diff --git a/.changeset/afraid-mugs-argue.md b/.changeset/afraid-mugs-argue.md new file mode 100644 index 0000000000..95aa9a5904 --- /dev/null +++ b/.changeset/afraid-mugs-argue.md @@ -0,0 +1,5 @@ +--- +"@siemens/ix": minor +--- + +feat(core/message): add options to set size and position diff --git a/.changeset/clever-pandas-chew.md b/.changeset/clever-pandas-chew.md new file mode 100644 index 0000000000..ef1edbfd6d --- /dev/null +++ b/.changeset/clever-pandas-chew.md @@ -0,0 +1,5 @@ +--- +"@siemens/ix": patch +--- + +fix(core): replace font styles with actual formats diff --git a/.changeset/clever-rings-sneeze.md b/.changeset/clever-rings-sneeze.md new file mode 100644 index 0000000000..2da4c88a55 --- /dev/null +++ b/.changeset/clever-rings-sneeze.md @@ -0,0 +1,5 @@ +--- +'@siemens/ix': patch +--- + +fix(core/modal): figma - code mismatch diff --git a/.changeset/eight-windows-shout.md b/.changeset/eight-windows-shout.md new file mode 100644 index 0000000000..5849541eba --- /dev/null +++ b/.changeset/eight-windows-shout.md @@ -0,0 +1,7 @@ +--- +"@siemens/ix-angular": minor +"@siemens/ix": minor +"@siemens/ix-vue": minor +--- + +feat(core): improve component a11y diff --git a/.changeset/eighty-clocks-bake.md b/.changeset/eighty-clocks-bake.md new file mode 100644 index 0000000000..3a82b26513 --- /dev/null +++ b/.changeset/eighty-clocks-bake.md @@ -0,0 +1,5 @@ +--- +'@siemens/ix': patch +--- + +fix(core/content-header): adapt spacing diff --git a/.changeset/few-eels-smell.md b/.changeset/few-eels-smell.md new file mode 100644 index 0000000000..a7da8bf774 --- /dev/null +++ b/.changeset/few-eels-smell.md @@ -0,0 +1,5 @@ +--- +'@siemens/ix': patch +--- + +fix(core/checkbox): page jumps on checkbox click in scrollable ix-content diff --git a/.changeset/nasty-mangos-love.md b/.changeset/nasty-mangos-love.md new file mode 100644 index 0000000000..f8632ceafa --- /dev/null +++ b/.changeset/nasty-mangos-love.md @@ -0,0 +1,5 @@ +--- +'@siemens/ix': patch +--- + +fix(core/button): fix keyboard navigation & accessibility diff --git a/.changeset/nice-pianos-serve.md b/.changeset/nice-pianos-serve.md new file mode 100644 index 0000000000..e61228beba --- /dev/null +++ b/.changeset/nice-pianos-serve.md @@ -0,0 +1,5 @@ +--- +"@siemens/ix": patch +--- + +fix(core/spinner): move styling into shadow dom diff --git a/.changeset/nine-pugs-pump.md b/.changeset/nine-pugs-pump.md new file mode 100644 index 0000000000..e400eb70ca --- /dev/null +++ b/.changeset/nine-pugs-pump.md @@ -0,0 +1,5 @@ +--- +'@siemens/ix': patch +--- + +fix(core/select): update input value on slot change diff --git a/.changeset/pink-spoons-obey.md b/.changeset/pink-spoons-obey.md new file mode 100644 index 0000000000..53812baa38 --- /dev/null +++ b/.changeset/pink-spoons-obey.md @@ -0,0 +1,5 @@ +--- +'@siemens/ix': patch +--- + +fix(core/input): remove hover state from readonly and disabled variant diff --git a/.changeset/quiet-tools-study.md b/.changeset/quiet-tools-study.md new file mode 100644 index 0000000000..dd7953c76d --- /dev/null +++ b/.changeset/quiet-tools-study.md @@ -0,0 +1,5 @@ +--- +"@siemens/ix": patch +--- + +fix(core/icon-toggle-button): remove console.log diff --git a/.changeset/short-dolls-perform.md b/.changeset/short-dolls-perform.md new file mode 100644 index 0000000000..41f7a67489 --- /dev/null +++ b/.changeset/short-dolls-perform.md @@ -0,0 +1,5 @@ +--- +"@siemens/ix": patch +--- + +fix(card): card-filled colors for hover/active states diff --git a/.changeset/small-meals-think.md b/.changeset/small-meals-think.md new file mode 100644 index 0000000000..f4378c8426 --- /dev/null +++ b/.changeset/small-meals-think.md @@ -0,0 +1,5 @@ +--- +'@siemens/ix': patch +--- + +fix(core/card-list): adapt title margin to figma diff --git a/.changeset/tricky-hornets-work.md b/.changeset/tricky-hornets-work.md new file mode 100644 index 0000000000..b4b07aa49b --- /dev/null +++ b/.changeset/tricky-hornets-work.md @@ -0,0 +1,5 @@ +--- +"@siemens/ix": patch +--- + +fix(core/dropdown): clean up disconnected dropdowns diff --git a/.changeset/yellow-goats-wash.md b/.changeset/yellow-goats-wash.md new file mode 100644 index 0000000000..2a47438fa8 --- /dev/null +++ b/.changeset/yellow-goats-wash.md @@ -0,0 +1,5 @@ +--- +'@siemens/ix': patch +--- + +fix(core/upload): disable file browser if control is disabled diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index 8593b5252e..c366da9853 100644 --- a/.github/workflows/pr.yml +++ b/.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 }} @@ -192,3 +193,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 diff --git a/ix.code-workspace b/ix.code-workspace index fd772789d4..0840050eff 100644 --- a/ix.code-workspace +++ b/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" diff --git a/packages/angular-test-app/package.json b/packages/angular-test-app/package.json index 1bf7c601fc..2afb7fca6b 100644 --- a/packages/angular-test-app/package.json +++ b/packages/angular-test-app/package.json @@ -29,7 +29,7 @@ "ag-grid-community": "^30.2.0", "echarts": "^5.5.1", "echarts-gl": "^2.0.9", - "example-styles": "workspace:*", + "html-test-app": "workspace:*", "ngx-echarts": "~14.0.0", "rxjs": "~7.5.0", "tslib": "^2.3.0", diff --git a/packages/angular-test-app/scripts/copy-preview.mjs b/packages/angular-test-app/scripts/copy-preview.mjs index 96267ffe09..ccd1d48d1d 100644 --- a/packages/angular-test-app/scripts/copy-preview.mjs +++ b/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'); +})(); diff --git a/packages/angular-test-app/src/preview-examples/about-and-legal.css b/packages/angular-test-app/src/preview-examples/about-and-legal.css new file mode 100644 index 0000000000..a726a2876a --- /dev/null +++ b/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; +} diff --git a/packages/angular-test-app/src/preview-examples/about-and-legal.ts b/packages/angular-test-app/src/preview-examples/about-and-legal.ts index 03458ec742..5a7e7b8295 100644 --- a/packages/angular-test-app/src/preview-examples/about-and-legal.ts +++ b/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 }) diff --git a/packages/angular-test-app/src/preview-examples/application-app-switch.css b/packages/angular-test-app/src/preview-examples/application-app-switch.css new file mode 100644 index 0000000000..a726a2876a --- /dev/null +++ b/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; +} diff --git a/packages/angular-test-app/src/preview-examples/application-app-switch.ts b/packages/angular-test-app/src/preview-examples/application-app-switch.ts index 80fb72e64a..56c311dabb 100644 --- a/packages/angular-test-app/src/preview-examples/application-app-switch.ts +++ b/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 = { diff --git a/packages/angular-test-app/src/preview-examples/application-breakpoints.css b/packages/angular-test-app/src/preview-examples/application-breakpoints.css new file mode 100644 index 0000000000..a726a2876a --- /dev/null +++ b/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; +} diff --git a/packages/angular-test-app/src/preview-examples/application-breakpoints.ts b/packages/angular-test-app/src/preview-examples/application-breakpoints.ts index 41f551db77..521c7cb09b 100644 --- a/packages/angular-test-app/src/preview-examples/application-breakpoints.ts +++ b/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 { diff --git a/packages/example-styles/css/application.css b/packages/angular-test-app/src/preview-examples/application.css similarity index 61% rename from packages/example-styles/css/application.css rename to packages/angular-test-app/src/preview-examples/application.css index 1466d88b8c..a726a2876a 100644 --- a/packages/example-styles/css/application.css +++ b/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; diff --git a/packages/angular-test-app/src/preview-examples/application.ts b/packages/angular-test-app/src/preview-examples/application.ts index f1f65f1267..f7d097de76 100644 --- a/packages/angular-test-app/src/preview-examples/application.ts +++ b/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 {} diff --git a/packages/example-styles/css/basic-navigation.css b/packages/angular-test-app/src/preview-examples/basic-navigation.css similarity index 62% rename from packages/example-styles/css/basic-navigation.css rename to packages/angular-test-app/src/preview-examples/basic-navigation.css index ed4483b7aa..1c40937575 100644 --- a/packages/example-styles/css/basic-navigation.css +++ b/packages/angular-test-app/src/preview-examples/basic-navigation.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-basic-navigation { width: 100vw; diff --git a/packages/angular-test-app/src/preview-examples/basic-navigation.ts b/packages/angular-test-app/src/preview-examples/basic-navigation.ts index 36cb3c5c62..110ee0fe97 100644 --- a/packages/angular-test-app/src/preview-examples/basic-navigation.ts +++ b/packages/angular-test-app/src/preview-examples/basic-navigation.ts @@ -20,6 +20,6 @@ import { Component } from '@angular/core'; `, - styleUrls: ['./styles/basic-navigation.css'], + styleUrls: ['./basic-navigation.css'], }) export default class BasicNavigation {} diff --git a/packages/angular-test-app/src/preview-examples/blind-header-actions.css b/packages/angular-test-app/src/preview-examples/blind-header-actions.css new file mode 100644 index 0000000000..84fea6a2fe --- /dev/null +++ b/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; +} diff --git a/packages/angular-test-app/src/preview-examples/blind-header-actions.ts b/packages/angular-test-app/src/preview-examples/blind-header-actions.ts index 3946f1e8e0..d77a661c07 100644 --- a/packages/angular-test-app/src/preview-examples/blind-header-actions.ts +++ b/packages/angular-test-app/src/preview-examples/blind-header-actions.ts @@ -20,7 +20,6 @@ import { Component } from '@angular/core'; icon="context-menu" icon-color="color-primary" > - test Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet @@ -31,7 +30,11 @@ import { Component } from '@angular/core'; Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. + + Rename... + Delete... + `, - styleUrls: ['./styles/blind.css'], + styleUrls: ['./blind-header-actions.css'], }) export default class Blind {} diff --git a/packages/angular-test-app/src/preview-examples/blind-variants.css b/packages/angular-test-app/src/preview-examples/blind-variants.css new file mode 100644 index 0000000000..84fea6a2fe --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/blind-variants.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; +} diff --git a/packages/angular-test-app/src/preview-examples/blind-variants.ts b/packages/angular-test-app/src/preview-examples/blind-variants.ts index a74aad5df6..8542aca443 100644 --- a/packages/angular-test-app/src/preview-examples/blind-variants.ts +++ b/packages/angular-test-app/src/preview-examples/blind-variants.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './blind-variants.html', - styleUrls: ['./styles/blind.css'], + styleUrls: ['./blind-variants.css'], }) export default class Blind {} diff --git a/packages/example-styles/css/blind.css b/packages/angular-test-app/src/preview-examples/blind.css similarity index 59% rename from packages/example-styles/css/blind.css rename to packages/angular-test-app/src/preview-examples/blind.css index 999fb0fd26..84fea6a2fe 100644 --- a/packages/example-styles/css/blind.css +++ b/packages/angular-test-app/src/preview-examples/blind.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-blind { margin: 0.5rem 0; diff --git a/packages/angular-test-app/src/preview-examples/blind.ts b/packages/angular-test-app/src/preview-examples/blind.ts index f221c58b9f..0a55976c2b 100644 --- a/packages/angular-test-app/src/preview-examples/blind.ts +++ b/packages/angular-test-app/src/preview-examples/blind.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './blind.html', - styleUrls: ['./styles/blind.css'], + styleUrls: ['./blind.css'], }) export default class Blind {} diff --git a/packages/angular-test-app/src/preview-examples/button-danger-ghost.css b/packages/angular-test-app/src/preview-examples/button-danger-ghost.css new file mode 100644 index 0000000000..38340199f9 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/button-danger-ghost.css @@ -0,0 +1,20 @@ +/* + * 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 + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/button-danger-outline.css b/packages/angular-test-app/src/preview-examples/button-danger-outline.css new file mode 100644 index 0000000000..38340199f9 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/button-danger-outline.css @@ -0,0 +1,20 @@ +/* + * 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 + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/button-danger-outline.ts b/packages/angular-test-app/src/preview-examples/button-danger-outline.ts index f2f7386e9d..772a3710cb 100644 --- a/packages/angular-test-app/src/preview-examples/button-danger-outline.ts +++ b/packages/angular-test-app/src/preview-examples/button-danger-outline.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './button-danger-outline.html', - styleUrls: ['./styles/buttons.css'], + styleUrls: ['./button-danger-outline.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/button-danger.css b/packages/angular-test-app/src/preview-examples/button-danger.css new file mode 100644 index 0000000000..38340199f9 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/button-danger.css @@ -0,0 +1,20 @@ +/* + * 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 + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/button-danger.ts b/packages/angular-test-app/src/preview-examples/button-danger.ts index 1ff01bfb56..d2ae7999bc 100644 --- a/packages/angular-test-app/src/preview-examples/button-danger.ts +++ b/packages/angular-test-app/src/preview-examples/button-danger.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './button-danger.html', - styleUrls: ['./styles/buttons.css'], + styleUrls: ['./button-danger.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/button-ghost.css b/packages/angular-test-app/src/preview-examples/button-ghost.css new file mode 100644 index 0000000000..38340199f9 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/button-ghost.css @@ -0,0 +1,20 @@ +/* + * 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 + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/button-ghost.ts b/packages/angular-test-app/src/preview-examples/button-ghost.ts index 4f189d46a9..08f9825342 100644 --- a/packages/angular-test-app/src/preview-examples/button-ghost.ts +++ b/packages/angular-test-app/src/preview-examples/button-ghost.ts @@ -15,6 +15,6 @@ import { Component } from '@angular/core'; Button Button `, - styleUrls: ['./styles/buttons.css'], + styleUrls: ['./button-ghost.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/button-grey-ghost.css b/packages/angular-test-app/src/preview-examples/button-grey-ghost.css new file mode 100644 index 0000000000..38340199f9 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/button-grey-ghost.css @@ -0,0 +1,20 @@ +/* + * 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 + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/button-grey-ghost.ts b/packages/angular-test-app/src/preview-examples/button-grey-ghost.ts index 77620b0060..406a610b54 100644 --- a/packages/angular-test-app/src/preview-examples/button-grey-ghost.ts +++ b/packages/angular-test-app/src/preview-examples/button-grey-ghost.ts @@ -12,7 +12,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', template: buttonGreyGhost(), - styleUrls: ['./styles/buttons.css'], + styleUrls: ['./button-grey-ghost.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/button-grey-secondary.css b/packages/angular-test-app/src/preview-examples/button-grey-secondary.css new file mode 100644 index 0000000000..38340199f9 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/button-grey-secondary.css @@ -0,0 +1,20 @@ +/* + * 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 + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/button-grey-secondary.ts b/packages/angular-test-app/src/preview-examples/button-grey-secondary.ts index 9ace014073..079ad202a5 100644 --- a/packages/angular-test-app/src/preview-examples/button-grey-secondary.ts +++ b/packages/angular-test-app/src/preview-examples/button-grey-secondary.ts @@ -15,6 +15,6 @@ import { Component } from '@angular/core'; Button Button `, - styleUrls: ['./styles/buttons.css'], + styleUrls: ['./button-grey-secondary.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/button-grey.css b/packages/angular-test-app/src/preview-examples/button-grey.css new file mode 100644 index 0000000000..38340199f9 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/button-grey.css @@ -0,0 +1,20 @@ +/* + * 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 + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/button-grey.ts b/packages/angular-test-app/src/preview-examples/button-grey.ts index 09fa71e661..1f21c197b9 100644 --- a/packages/angular-test-app/src/preview-examples/button-grey.ts +++ b/packages/angular-test-app/src/preview-examples/button-grey.ts @@ -15,6 +15,6 @@ import { Component } from '@angular/core'; Button Button `, - styleUrls: ['./styles/buttons.css'], + styleUrls: ['./button-grey.css'], }) export default class Buttons {} diff --git a/packages/example-styles/css/button-loading.css b/packages/angular-test-app/src/preview-examples/button-loading.css similarity index 63% rename from packages/example-styles/css/button-loading.css rename to packages/angular-test-app/src/preview-examples/button-loading.css index 70968a6820..765cd8a296 100644 --- a/packages/example-styles/css/button-loading.css +++ b/packages/angular-test-app/src/preview-examples/button-loading.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 + */ body { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/button-loading.ts b/packages/angular-test-app/src/preview-examples/button-loading.ts index 92692fb330..33401290af 100644 --- a/packages/angular-test-app/src/preview-examples/button-loading.ts +++ b/packages/angular-test-app/src/preview-examples/button-loading.ts @@ -12,7 +12,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', template: './button-loading.html', - styleUrls: ['./styles/buttons.css'], + styleUrls: ['./button-loading.css'], }) export default class ButtonLoading { loading = false; diff --git a/packages/angular-test-app/src/preview-examples/button-secondary.css b/packages/angular-test-app/src/preview-examples/button-secondary.css new file mode 100644 index 0000000000..38340199f9 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/button-secondary.css @@ -0,0 +1,20 @@ +/* + * 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 + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/button-secondary.ts b/packages/angular-test-app/src/preview-examples/button-secondary.ts index c9fe9b20a8..33b0813928 100644 --- a/packages/angular-test-app/src/preview-examples/button-secondary.ts +++ b/packages/angular-test-app/src/preview-examples/button-secondary.ts @@ -13,6 +13,6 @@ import { Component } from '@angular/core'; selector: 'app-example', template: ` Button Button `, - styleUrls: ['./styles/buttons.css'], + styleUrls: ['./button-secondary.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/button-text-icon.css b/packages/angular-test-app/src/preview-examples/button-text-icon.css new file mode 100644 index 0000000000..38340199f9 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/button-text-icon.css @@ -0,0 +1,20 @@ +/* + * 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 + */ + +body { + display: flex; +} + +ix-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/button-text-icon.ts b/packages/angular-test-app/src/preview-examples/button-text-icon.ts index 2e7278906f..6c8e429bf6 100644 --- a/packages/angular-test-app/src/preview-examples/button-text-icon.ts +++ b/packages/angular-test-app/src/preview-examples/button-text-icon.ts @@ -17,6 +17,6 @@ import { Component } from '@angular/core'; Button Button `, - styleUrls: ['./styles/buttons.css'], + styleUrls: ['./button-text-icon.css'], }) export default class Buttons {} diff --git a/packages/example-styles/css/icon-button.css b/packages/angular-test-app/src/preview-examples/button-with-icon.css similarity index 65% rename from packages/example-styles/css/icon-button.css rename to packages/angular-test-app/src/preview-examples/button-with-icon.css index c219996bf0..d5bf8521d3 100644 --- a/packages/example-styles/css/icon-button.css +++ b/packages/angular-test-app/src/preview-examples/button-with-icon.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 + */ body { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/button-with-icon.ts b/packages/angular-test-app/src/preview-examples/button-with-icon.ts index c0ef2be5a0..793ad740f5 100644 --- a/packages/angular-test-app/src/preview-examples/button-with-icon.ts +++ b/packages/angular-test-app/src/preview-examples/button-with-icon.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './button-with-icon.html', - styleUrls: ['./styles/icon-button.css'], + styleUrls: ['./button-with-icon.css'], }) export default class ButtonWithIcon {} diff --git a/packages/example-styles/css/buttons.css b/packages/angular-test-app/src/preview-examples/buttons.css similarity index 62% rename from packages/example-styles/css/buttons.css rename to packages/angular-test-app/src/preview-examples/buttons.css index d591a858c9..38340199f9 100644 --- a/packages/example-styles/css/buttons.css +++ b/packages/angular-test-app/src/preview-examples/buttons.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 + */ body { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/buttons.ts b/packages/angular-test-app/src/preview-examples/buttons.ts index b76fb1d209..69f89588ab 100644 --- a/packages/angular-test-app/src/preview-examples/buttons.ts +++ b/packages/angular-test-app/src/preview-examples/buttons.ts @@ -15,6 +15,6 @@ import { Component } from '@angular/core'; Button Button `, - styleUrls: ['./styles/buttons.css'], + styleUrls: ['./buttons.css'], }) export default class Buttons {} diff --git a/packages/example-styles/css/card.css b/packages/angular-test-app/src/preview-examples/card.css similarity index 94% rename from packages/example-styles/css/card.css rename to packages/angular-test-app/src/preview-examples/card.css index 178d051cec..8cc004c1fe 100644 --- a/packages/example-styles/css/card.css +++ b/packages/angular-test-app/src/preview-examples/card.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-card { height: 15.75rem; diff --git a/packages/angular-test-app/src/preview-examples/card.ts b/packages/angular-test-app/src/preview-examples/card.ts index 22aa27f37f..7c834e4b07 100644 --- a/packages/angular-test-app/src/preview-examples/card.ts +++ b/packages/angular-test-app/src/preview-examples/card.ts @@ -12,7 +12,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './card.html', - styleUrls: ['./styles/card.css'], + styleUrls: ['./card.css'], }) export default class Card { onClick(event: Event) { diff --git a/packages/example-styles/css/chip.css b/packages/angular-test-app/src/preview-examples/chip.css similarity index 65% rename from packages/example-styles/css/chip.css rename to packages/angular-test-app/src/preview-examples/chip.css index 38d33a422f..02edd4ed6b 100644 --- a/packages/example-styles/css/chip.css +++ b/packages/angular-test-app/src/preview-examples/chip.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 + */ .chip { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/chip.ts b/packages/angular-test-app/src/preview-examples/chip.ts index 455385c841..fe3def6aec 100644 --- a/packages/angular-test-app/src/preview-examples/chip.ts +++ b/packages/angular-test-app/src/preview-examples/chip.ts @@ -37,6 +37,6 @@ import { Component } from '@angular/core'; `, - styleUrls: ['./styles/chip.css'], + styleUrls: ['./chip.css'], }) export default class Chip {} diff --git a/packages/angular-test-app/src/preview-examples/dropdown-button-icon.css b/packages/angular-test-app/src/preview-examples/dropdown-button-icon.css new file mode 100644 index 0000000000..aa2399617b --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/dropdown-button-icon.css @@ -0,0 +1,24 @@ +/* + * 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 + */ + +.dropdown-button { + display: flex; + flex-direction: column; + justify-content: center; + position: relative; + max-width: 20rem; +} + +.dropdown-button > ix-dropdown-button { + margin-bottom: 0.5rem; +} diff --git a/packages/angular-test-app/src/preview-examples/dropdown-button-icon.ts b/packages/angular-test-app/src/preview-examples/dropdown-button-icon.ts index af8857217a..373b5d14af 100644 --- a/packages/angular-test-app/src/preview-examples/dropdown-button-icon.ts +++ b/packages/angular-test-app/src/preview-examples/dropdown-button-icon.ts @@ -11,7 +11,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', - styleUrls: ['./styles/dropdown-button.css'], + styleUrls: ['./dropdown-button-icon.css'], template: `
diff --git a/packages/example-styles/css/dropdown-button.css b/packages/angular-test-app/src/preview-examples/dropdown-button.css similarity index 71% rename from packages/example-styles/css/dropdown-button.css rename to packages/angular-test-app/src/preview-examples/dropdown-button.css index cb7d534631..aa2399617b 100644 --- a/packages/example-styles/css/dropdown-button.css +++ b/packages/angular-test-app/src/preview-examples/dropdown-button.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 + */ .dropdown-button { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/dropdown-button.ts b/packages/angular-test-app/src/preview-examples/dropdown-button.ts index 67c7169a65..799e393a84 100644 --- a/packages/angular-test-app/src/preview-examples/dropdown-button.ts +++ b/packages/angular-test-app/src/preview-examples/dropdown-button.ts @@ -29,6 +29,6 @@ import { Component } from '@angular/core';
`, - styleUrls: ['./styles/dropdown-button.css'], + styleUrls: ['./dropdown-button.css'], }) export default class Dropdown {} diff --git a/packages/angular-test-app/src/preview-examples/echarts-bar-horizontal-stacked.css b/packages/angular-test-app/src/preview-examples/echarts-bar-horizontal-stacked.css new file mode 100644 index 0000000000..fce218a9ca --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-bar-horizontal-stacked.css @@ -0,0 +1,19 @@ +/* + * 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 + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-bar-horizontal-stacked.ts b/packages/angular-test-app/src/preview-examples/echarts-bar-horizontal-stacked.ts index ace3ccbf80..a0cf01339c 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-bar-horizontal-stacked.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-bar-horizontal-stacked.ts @@ -16,7 +16,7 @@ import { BarSeriesOption, EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-bar-horizontal-stacked.html', - styleUrls: ['./styles/charts.css'], + styleUrls: ['./echarts-bar-horizontal-stacked.css'], }) export default class EchartsBarHorizontalStacked implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-bar-simple.css b/packages/angular-test-app/src/preview-examples/echarts-bar-simple.css new file mode 100644 index 0000000000..fce218a9ca --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-bar-simple.css @@ -0,0 +1,19 @@ +/* + * 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 + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-bar-simple.ts b/packages/angular-test-app/src/preview-examples/echarts-bar-simple.ts index ba75783b04..a98ac0f89c 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-bar-simple.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-bar-simple.ts @@ -16,7 +16,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-bar-simple.html', - styleUrls: ["./styles/charts.css"], + styleUrls: ["./echarts-bar-simple.css"], }) export default class EchartsBarSimple implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-circle.css b/packages/angular-test-app/src/preview-examples/echarts-circle.css new file mode 100644 index 0000000000..fce218a9ca --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-circle.css @@ -0,0 +1,19 @@ +/* + * 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 + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-circle.ts b/packages/angular-test-app/src/preview-examples/echarts-circle.ts index bcf251ddb6..23277599f9 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-circle.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-circle.ts @@ -20,7 +20,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-circle.html', - styleUrls: ["./styles/charts.css"], + styleUrls: ["./echarts-circle.css"], }) export default class EchartsCircle implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-empty-state.css b/packages/angular-test-app/src/preview-examples/echarts-empty-state.css new file mode 100644 index 0000000000..fce218a9ca --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-empty-state.css @@ -0,0 +1,19 @@ +/* + * 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 + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-empty-state.ts b/packages/angular-test-app/src/preview-examples/echarts-empty-state.ts index d17ca27d19..f63450d51f 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-empty-state.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-empty-state.ts @@ -16,7 +16,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-empty-state.html', - styleUrls: ["./styles/charts-empty-state.css"], + styleUrls: ['./echarts-empty-state.css'], }) export default class EchartsLineSimple implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-gauge.css b/packages/angular-test-app/src/preview-examples/echarts-gauge.css new file mode 100644 index 0000000000..fce218a9ca --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-gauge.css @@ -0,0 +1,19 @@ +/* + * 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 + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-gauge.ts b/packages/angular-test-app/src/preview-examples/echarts-gauge.ts index d77944e5dc..64e18a0b98 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-gauge.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-gauge.ts @@ -20,7 +20,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-gauge.html', - styleUrls: ["./styles/charts.css"], + styleUrls: ["./echarts-gauge.css"], }) export default class EchartsGauge implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-line-advanced.css b/packages/angular-test-app/src/preview-examples/echarts-line-advanced.css new file mode 100644 index 0000000000..fce218a9ca --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-line-advanced.css @@ -0,0 +1,19 @@ +/* + * 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 + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-line-advanced.ts b/packages/angular-test-app/src/preview-examples/echarts-line-advanced.ts index d137ba867c..3921aceeb2 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-line-advanced.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-line-advanced.ts @@ -20,7 +20,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-line-advanced.html', - styleUrls: ["./styles/charts.css"], + styleUrls: ["./echarts-line-advanced.css"], }) export default class EchartsLineAdvanced implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-line-multiple-y-axis.css b/packages/angular-test-app/src/preview-examples/echarts-line-multiple-y-axis.css new file mode 100644 index 0000000000..fce218a9ca --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-line-multiple-y-axis.css @@ -0,0 +1,19 @@ +/* + * 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 + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-line-multiple-y-axis.ts b/packages/angular-test-app/src/preview-examples/echarts-line-multiple-y-axis.ts index a268bda273..89f9405a25 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-line-multiple-y-axis.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-line-multiple-y-axis.ts @@ -21,7 +21,7 @@ import { YAXisOption } from 'echarts/types/dist/shared'; @Component({ selector: 'app-example', templateUrl: './echarts-line-multiple-y-axis.html', - styleUrls: ["./styles/charts.css"], + styleUrls: ["./echarts-line-multiple-y-axis.css"], }) export default class EchartsLineMultipleYAxis implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-line-simple.css b/packages/angular-test-app/src/preview-examples/echarts-line-simple.css new file mode 100644 index 0000000000..fce218a9ca --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-line-simple.css @@ -0,0 +1,19 @@ +/* + * 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 + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-line-simple.ts b/packages/angular-test-app/src/preview-examples/echarts-line-simple.ts index 5168647f43..6d1365d285 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-line-simple.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-line-simple.ts @@ -16,7 +16,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-line-simple.html', - styleUrls: ["./styles/charts.css"], + styleUrls: ["./echarts-line-simple.css"], }) export default class EchartsLineSimple implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-pie.css b/packages/angular-test-app/src/preview-examples/echarts-pie.css new file mode 100644 index 0000000000..fce218a9ca --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-pie.css @@ -0,0 +1,19 @@ +/* + * 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 + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-pie.ts b/packages/angular-test-app/src/preview-examples/echarts-pie.ts index a97ade149a..e3073392c5 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-pie.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-pie.ts @@ -16,7 +16,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-pie.html', - styleUrls: ["./styles/charts.css"], + styleUrls: ["./echarts-pie.css"], }) export default class EchartsPie implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-progress-arc.css b/packages/angular-test-app/src/preview-examples/echarts-progress-arc.css new file mode 100644 index 0000000000..38b53e7434 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-progress-arc.css @@ -0,0 +1,19 @@ +/* + * 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 + */ + +.echarts-gauge { + position: relative; + width: 100%; + height: 20rem; + padding-top: 3rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-progress-arc.ts b/packages/angular-test-app/src/preview-examples/echarts-progress-arc.ts index 381fd57a83..c717037f05 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-progress-arc.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-progress-arc.ts @@ -20,7 +20,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-progress-arc.html', - styleUrls: ["./styles/charts-gauge.css"], + styleUrls: ["./echarts-progress-arc.css"], }) export default class EchartsProgressArc implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-progress-circle.css b/packages/angular-test-app/src/preview-examples/echarts-progress-circle.css new file mode 100644 index 0000000000..38b53e7434 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-progress-circle.css @@ -0,0 +1,19 @@ +/* + * 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 + */ + +.echarts-gauge { + position: relative; + width: 100%; + height: 20rem; + padding-top: 3rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-progress-circle.ts b/packages/angular-test-app/src/preview-examples/echarts-progress-circle.ts index 90d3fd6149..f634dd31b6 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-progress-circle.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-progress-circle.ts @@ -20,7 +20,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-progress-circle.html', - styleUrls: ["./styles/charts-gauge.css"], + styleUrls: ["./echarts-progress-circle.css"], }) export default class EchartsProgressCircle implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-special-3d.css b/packages/angular-test-app/src/preview-examples/echarts-special-3d.css new file mode 100644 index 0000000000..fce218a9ca --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-special-3d.css @@ -0,0 +1,19 @@ +/* + * 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 + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-special-3d.ts b/packages/angular-test-app/src/preview-examples/echarts-special-3d.ts index 33387e98c7..2ec21c5e7e 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-special-3d.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-special-3d.ts @@ -21,7 +21,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-special-3d.html', - styleUrls: ["./styles/charts.css"], + styleUrls: ["./echarts-special-3d.css"], }) export default class EchartsSpecial3d implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-special-toolbox.css b/packages/angular-test-app/src/preview-examples/echarts-special-toolbox.css new file mode 100644 index 0000000000..fce218a9ca --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-special-toolbox.css @@ -0,0 +1,19 @@ +/* + * 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 + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-special-toolbox.ts b/packages/angular-test-app/src/preview-examples/echarts-special-toolbox.ts index 53e2cff3b6..7a7be99c68 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-special-toolbox.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-special-toolbox.ts @@ -16,7 +16,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts-special-toolbox.html', - styleUrls: ["./styles/charts.css"], + styleUrls: ["./echarts-special-toolbox.css"], }) export default class EchartsSpecialToolbox implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts-special-zoom.css b/packages/angular-test-app/src/preview-examples/echarts-special-zoom.css new file mode 100644 index 0000000000..fce218a9ca --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts-special-zoom.css @@ -0,0 +1,19 @@ +/* + * 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 + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts-special-zoom.ts b/packages/angular-test-app/src/preview-examples/echarts-special-zoom.ts index 685561e632..c105918380 100644 --- a/packages/angular-test-app/src/preview-examples/echarts-special-zoom.ts +++ b/packages/angular-test-app/src/preview-examples/echarts-special-zoom.ts @@ -21,7 +21,7 @@ import { OrdinalRawValue } from 'echarts/types/src/util/types'; @Component({ selector: 'app-example', templateUrl: './echarts-special-zoom.html', - styleUrls: ["./styles/charts.css"], + styleUrls: ["./echarts-special-zoom.css"], }) export default class EchartsSpecialZoom implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/angular-test-app/src/preview-examples/echarts.css b/packages/angular-test-app/src/preview-examples/echarts.css new file mode 100644 index 0000000000..fce218a9ca --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/echarts.css @@ -0,0 +1,19 @@ +/* + * 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 + */ + +.echarts { + position: relative; + width: 100%; + height: 40rem; + padding-top: 1rem; +} diff --git a/packages/angular-test-app/src/preview-examples/echarts.ts b/packages/angular-test-app/src/preview-examples/echarts.ts index bc1d4883b6..e2015f9aba 100644 --- a/packages/angular-test-app/src/preview-examples/echarts.ts +++ b/packages/angular-test-app/src/preview-examples/echarts.ts @@ -16,7 +16,7 @@ import { EChartsOption } from 'echarts'; @Component({ selector: 'app-example', templateUrl: './echarts.html', - styleUrls: ["./styles/charts.css"], + styleUrls: ["./echarts.css"], }) export default class Echarts implements OnInit { theme = convertThemeName(themeSwitcher.getCurrentTheme()); diff --git a/packages/example-styles/css/flip-tile.css b/packages/angular-test-app/src/preview-examples/flip-tile.css similarity index 65% rename from packages/example-styles/css/flip-tile.css rename to packages/angular-test-app/src/preview-examples/flip-tile.css index 094cefdc47..49d1a64ba3 100644 --- a/packages/example-styles/css/flip-tile.css +++ b/packages/angular-test-app/src/preview-examples/flip-tile.css @@ -1,11 +1,15 @@ /* - * SPDX-FileCopyrightText: 2023 Siemens AG + * 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 + */ .flip-tile { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/flip-tile.ts b/packages/angular-test-app/src/preview-examples/flip-tile.ts index 98eceecc90..d2de629969 100644 --- a/packages/angular-test-app/src/preview-examples/flip-tile.ts +++ b/packages/angular-test-app/src/preview-examples/flip-tile.ts @@ -76,6 +76,6 @@ import { Component } from '@angular/core'; `, - styleUrls: ['./styles/flip-tile.css'], + styleUrls: ['./flip-tile.css'], }) export default class FlipTile {} diff --git a/packages/example-styles/css/global.css b/packages/angular-test-app/src/preview-examples/global.css similarity index 96% rename from packages/example-styles/css/global.css rename to packages/angular-test-app/src/preview-examples/global.css index 2acf50f0a3..1a55311fdb 100644 --- a/packages/example-styles/css/global.css +++ b/packages/angular-test-app/src/preview-examples/global.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 + */ @import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; diff --git a/packages/angular-test-app/src/preview-examples/grid-padding.css b/packages/angular-test-app/src/preview-examples/grid-padding.css new file mode 100644 index 0000000000..3229d7cf61 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/grid-padding.css @@ -0,0 +1,35 @@ +/* + * 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 + */ + +.grid { + padding-top: 1rem; + padding-bottom: 0.25rem; + background-color: var(--theme-color-ghost); +} + +.grid > ix-layout-grid { + margin-bottom: 1rem; +} + +.grid > ix-layout-grid > ix-row > ix-col ix-typography { + display: flex; + padding: 0.5rem; + flex-direction: column; + justify-content: center; + align-items: center; + flex: 1 0 0; + align-self: stretch; + border: 1px solid var(--theme-color-soft-bdr); + background: var(--theme-color-ghost); + border-radius: 3px; +} diff --git a/packages/angular-test-app/src/preview-examples/grid-padding.ts b/packages/angular-test-app/src/preview-examples/grid-padding.ts index 9a6b780dc7..f8b80ea9e5 100644 --- a/packages/angular-test-app/src/preview-examples/grid-padding.ts +++ b/packages/angular-test-app/src/preview-examples/grid-padding.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './grid-padding.html', - styleUrls: ['./styles/grid.css'], + styleUrls: ['./grid-padding.css'], }) export default class GridPadding {} diff --git a/packages/angular-test-app/src/preview-examples/grid-size.css b/packages/angular-test-app/src/preview-examples/grid-size.css new file mode 100644 index 0000000000..3229d7cf61 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/grid-size.css @@ -0,0 +1,35 @@ +/* + * 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 + */ + +.grid { + padding-top: 1rem; + padding-bottom: 0.25rem; + background-color: var(--theme-color-ghost); +} + +.grid > ix-layout-grid { + margin-bottom: 1rem; +} + +.grid > ix-layout-grid > ix-row > ix-col ix-typography { + display: flex; + padding: 0.5rem; + flex-direction: column; + justify-content: center; + align-items: center; + flex: 1 0 0; + align-self: stretch; + border: 1px solid var(--theme-color-soft-bdr); + background: var(--theme-color-ghost); + border-radius: 3px; +} diff --git a/packages/angular-test-app/src/preview-examples/grid-size.ts b/packages/angular-test-app/src/preview-examples/grid-size.ts index 4ffb2250cc..18a0641fae 100644 --- a/packages/angular-test-app/src/preview-examples/grid-size.ts +++ b/packages/angular-test-app/src/preview-examples/grid-size.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './grid-size.html', - styleUrls: ['./styles/grid.css'], + styleUrls: ['./grid-size.css'], }) export default class GridSize {} diff --git a/packages/example-styles/css/grid.css b/packages/angular-test-app/src/preview-examples/grid.css similarity index 75% rename from packages/example-styles/css/grid.css rename to packages/angular-test-app/src/preview-examples/grid.css index a0ec412e6a..3229d7cf61 100644 --- a/packages/example-styles/css/grid.css +++ b/packages/angular-test-app/src/preview-examples/grid.css @@ -1,11 +1,15 @@ /* - * SPDX-FileCopyrightText: 2023 Siemens AG + * 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 + */ .grid { padding-top: 1rem; diff --git a/packages/angular-test-app/src/preview-examples/grid.ts b/packages/angular-test-app/src/preview-examples/grid.ts index 8d4185cd4b..c005c69ca5 100644 --- a/packages/angular-test-app/src/preview-examples/grid.ts +++ b/packages/angular-test-app/src/preview-examples/grid.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './grid.html', - styleUrls: ['./styles/grid.css'], + styleUrls: ['./grid.css'], }) export default class Grid {} diff --git a/packages/example-styles/css/icon-toggle-buttons.css b/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-ghost.css similarity index 63% rename from packages/example-styles/css/icon-toggle-buttons.css rename to packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-ghost.css index 1f208a2bd2..8f18e1e125 100644 --- a/packages/example-styles/css/icon-toggle-buttons.css +++ b/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-ghost.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 + */ body { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-ghost.ts b/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-ghost.ts index e40a2a1daa..79d156b75e 100644 --- a/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-ghost.ts +++ b/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-ghost.ts @@ -37,6 +37,6 @@ import { Component } from '@angular/core'; icon="checkboxes" > `, - styleUrls: ['./styles/icon-toggle-buttons.css'], + styleUrls: ['./icon-toggle-button-primary-ghost.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-outline.css b/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-outline.css new file mode 100644 index 0000000000..8f18e1e125 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-outline.css @@ -0,0 +1,20 @@ +/* + * 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 + */ + +body { + display: flex; +} + +ix-icon-toggle-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-outline.ts b/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-outline.ts index 2c41a24ffc..610b2caece 100644 --- a/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-outline.ts +++ b/packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-outline.ts @@ -37,6 +37,6 @@ import { Component } from '@angular/core'; icon="checkboxes" > `, - styleUrls: ['./styles/icon-toggle-buttons.css'], + styleUrls: ['./icon-toggle-button-primary-outline.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-ghost.css b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-ghost.css new file mode 100644 index 0000000000..8f18e1e125 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-ghost.css @@ -0,0 +1,20 @@ +/* + * 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 + */ + +body { + display: flex; +} + +ix-icon-toggle-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-ghost.ts b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-ghost.ts index c19695cf69..34eeb71460 100644 --- a/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-ghost.ts +++ b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-ghost.ts @@ -30,6 +30,6 @@ import { Component } from '@angular/core'; icon="checkboxes" > `, - styleUrls: ['./styles/icon-toggle-buttons.css'], + styleUrls: ['./icon-toggle-button-secondary-ghost.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-outline.css b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-outline.css new file mode 100644 index 0000000000..8f18e1e125 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-outline.css @@ -0,0 +1,20 @@ +/* + * 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 + */ + +body { + display: flex; +} + +ix-icon-toggle-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-outline.ts b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-outline.ts index 9e561a7556..bbc2abc7d8 100644 --- a/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-outline.ts +++ b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-outline.ts @@ -80,6 +80,6 @@ import { Component } from '@angular/core'; icon="checkboxes" > `, - styleUrls: ['./styles/icon-toggle-buttons.css'], + styleUrls: ['./icon-toggle-button-secondary-outline.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary.css b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary.css new file mode 100644 index 0000000000..8f18e1e125 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary.css @@ -0,0 +1,20 @@ +/* + * 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 + */ + +body { + display: flex; +} + +ix-icon-toggle-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary.ts b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary.ts index 759f812d4a..c8ab41ab69 100644 --- a/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary.ts +++ b/packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary.ts @@ -21,6 +21,6 @@ import { Component } from '@angular/core'; icon="checkboxes" > `, - styleUrls: ['./styles/icon-toggle-buttons.css'], + styleUrls: ['./icon-toggle-button-secondary.css'], }) export default class Buttons {} diff --git a/packages/example-styles/css/kpi.css b/packages/angular-test-app/src/preview-examples/kpi.css similarity index 61% rename from packages/example-styles/css/kpi.css rename to packages/angular-test-app/src/preview-examples/kpi.css index c00e244036..9e007c2ee3 100644 --- a/packages/example-styles/css/kpi.css +++ b/packages/angular-test-app/src/preview-examples/kpi.css @@ -1,11 +1,15 @@ /* - * SPDX-FileCopyrightText: 2023 Siemens AG + * 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 + */ .kpi { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/kpi.ts b/packages/angular-test-app/src/preview-examples/kpi.ts index a94a0a6a76..b84fe9aa4c 100644 --- a/packages/angular-test-app/src/preview-examples/kpi.ts +++ b/packages/angular-test-app/src/preview-examples/kpi.ts @@ -32,6 +32,6 @@ import { Component } from '@angular/core'; > `, - styleUrls: ['./styles/kpi.css'], + styleUrls: ['./kpi.css'], }) export default class Kpi {} diff --git a/packages/example-styles/css/menu-category.css b/packages/angular-test-app/src/preview-examples/menu-category.css similarity index 51% rename from packages/example-styles/css/menu-category.css rename to packages/angular-test-app/src/preview-examples/menu-category.css index 678a7b8559..a726a2876a 100644 --- a/packages/example-styles/css/menu-category.css +++ b/packages/angular-test-app/src/preview-examples/menu-category.css @@ -1,11 +1,15 @@ /* - * SPDX-FileCopyrightText: 2023 Siemens AG + * 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; diff --git a/packages/angular-test-app/src/preview-examples/menu-category.ts b/packages/angular-test-app/src/preview-examples/menu-category.ts index 5a10c85c30..3a6c1584a4 100644 --- a/packages/angular-test-app/src/preview-examples/menu-category.ts +++ b/packages/angular-test-app/src/preview-examples/menu-category.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './menu-category.html', - styleUrls: ['./styles/menu-category.css'], + styleUrls: ['./menu-category.css'], }) export default class MenuCategory {} diff --git a/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.css b/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.css new file mode 100644 index 0000000000..a726a2876a --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.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; +} diff --git a/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.ts b/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.ts index 13b76f9721..94c30d4358 100644 --- a/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.ts +++ b/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.ts @@ -17,6 +17,6 @@ import { Component } from '@angular/core'; Bottom tab `, - styleUrls: ['./styles/menu.css'], + styleUrls: ['./menu-with-bottom-tabs.css'], }) export default class VerticalTabs {} diff --git a/packages/example-styles/css/message-bar.css b/packages/angular-test-app/src/preview-examples/message-bar.css similarity index 50% rename from packages/example-styles/css/message-bar.css rename to packages/angular-test-app/src/preview-examples/message-bar.css index dafa0c56a8..1b9e6501b5 100644 --- a/packages/example-styles/css/message-bar.css +++ b/packages/angular-test-app/src/preview-examples/message-bar.css @@ -1,17 +1,21 @@ /* - * SPDX-FileCopyrightText: 2023 Siemens AG + * 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 + */ .message-bar { - margin: 0.5rem + margin: 0.5rem; } .message-bar > ix-message-bar { margin-bottom: 0.5rem; - display: block + display: block; } diff --git a/packages/angular-test-app/src/preview-examples/message-bar.ts b/packages/angular-test-app/src/preview-examples/message-bar.ts index ed66e8d18d..159b66d380 100644 --- a/packages/angular-test-app/src/preview-examples/message-bar.ts +++ b/packages/angular-test-app/src/preview-examples/message-bar.ts @@ -23,6 +23,6 @@ import { Component } from '@angular/core'; `, - styleUrls: ['./styles/message-bar.css'], + styleUrls: ['./message-bar.css'], }) export default class MessageBar {} diff --git a/packages/example-styles/css/modal-sizes.css b/packages/angular-test-app/src/preview-examples/modal-sizes.css similarity index 68% rename from packages/example-styles/css/modal-sizes.css rename to packages/angular-test-app/src/preview-examples/modal-sizes.css index 64d4e313f5..c1370c08e3 100644 --- a/packages/example-styles/css/modal-sizes.css +++ b/packages/angular-test-app/src/preview-examples/modal-sizes.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 + */ .modal-sizes { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/modal-sizes.ts b/packages/angular-test-app/src/preview-examples/modal-sizes.ts index 57f5d58a24..9922171290 100644 --- a/packages/angular-test-app/src/preview-examples/modal-sizes.ts +++ b/packages/angular-test-app/src/preview-examples/modal-sizes.ts @@ -12,7 +12,7 @@ import { IxModalSize, ModalService } from '@siemens/ix-angular'; @Component({ selector: 'app-example', - styleUrls: ['./styles/modal-sizes.css'], + styleUrls: ['./modal-sizes.css'], templateUrl: './modal-sizes.html', }) export default class ModalSizes { diff --git a/packages/example-styles/css/pill-variants.css b/packages/angular-test-app/src/preview-examples/pill-variants.css similarity index 59% rename from packages/example-styles/css/pill-variants.css rename to packages/angular-test-app/src/preview-examples/pill-variants.css index 8656d8658e..7c5fc4e29a 100644 --- a/packages/example-styles/css/pill-variants.css +++ b/packages/angular-test-app/src/preview-examples/pill-variants.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-pill { min-width: 7rem; diff --git a/packages/angular-test-app/src/preview-examples/pill-variants.ts b/packages/angular-test-app/src/preview-examples/pill-variants.ts index 664829e479..8c3c5b6f0e 100644 --- a/packages/angular-test-app/src/preview-examples/pill-variants.ts +++ b/packages/angular-test-app/src/preview-examples/pill-variants.ts @@ -11,7 +11,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', - styleUrls: ['./styles/pill-variants.css'], + styleUrls: ['./pill-variants.css'], template: ` diff --git a/packages/example-styles/css/pill.css b/packages/angular-test-app/src/preview-examples/pill.css similarity index 63% rename from packages/example-styles/css/pill.css rename to packages/angular-test-app/src/preview-examples/pill.css index 1725902e15..18ebad9bfb 100644 --- a/packages/example-styles/css/pill.css +++ b/packages/angular-test-app/src/preview-examples/pill.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-pill { margin: 0 0.5rem 0.5rem 0; diff --git a/packages/angular-test-app/src/preview-examples/pill.ts b/packages/angular-test-app/src/preview-examples/pill.ts index c0395308cf..27c3845df6 100644 --- a/packages/angular-test-app/src/preview-examples/pill.ts +++ b/packages/angular-test-app/src/preview-examples/pill.ts @@ -11,7 +11,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', - styleUrls: ['./styles/pill.css'], + styleUrls: ['./pill.css'], template: ` Label diff --git a/packages/angular-test-app/src/preview-examples/popover-news.css b/packages/angular-test-app/src/preview-examples/popover-news.css new file mode 100644 index 0000000000..a726a2876a --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/popover-news.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; +} diff --git a/packages/angular-test-app/src/preview-examples/popover-news.ts b/packages/angular-test-app/src/preview-examples/popover-news.ts index e693c8b82f..818ed9c0dd 100644 --- a/packages/angular-test-app/src/preview-examples/popover-news.ts +++ b/packages/angular-test-app/src/preview-examples/popover-news.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './popover-news.html', - styleUrls: ['./styles/application.css'], + styleUrls: ['./popover-news.css'], }) export default class PopoverNews {} diff --git a/packages/example-styles/css/radio-button.css b/packages/angular-test-app/src/preview-examples/radio-button.css similarity index 66% rename from packages/example-styles/css/radio-button.css rename to packages/angular-test-app/src/preview-examples/radio-button.css index ae440bf9aa..d6b248c047 100644 --- a/packages/example-styles/css/radio-button.css +++ b/packages/angular-test-app/src/preview-examples/radio-button.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 + */ .radio-button { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/radio-button.ts b/packages/angular-test-app/src/preview-examples/radio-button.ts index bf1c961bcd..53a7c9f50a 100644 --- a/packages/angular-test-app/src/preview-examples/radio-button.ts +++ b/packages/angular-test-app/src/preview-examples/radio-button.ts @@ -23,6 +23,6 @@ import { Component } from '@angular/core'; `, - styleUrls: ['./styles/radio-button.css'], + styleUrls: ['./radio-button.css'], }) export default class Radiobutton {} diff --git a/packages/angular-test-app/src/preview-examples/settings.css b/packages/angular-test-app/src/preview-examples/settings.css new file mode 100644 index 0000000000..a726a2876a --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/settings.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; +} diff --git a/packages/angular-test-app/src/preview-examples/settings.ts b/packages/angular-test-app/src/preview-examples/settings.ts index 9ae41d6643..0f157c0b63 100644 --- a/packages/angular-test-app/src/preview-examples/settings.ts +++ b/packages/angular-test-app/src/preview-examples/settings.ts @@ -12,7 +12,7 @@ import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './settings.html', - styleUrls: ['./styles/application.css'], + styleUrls: ['./settings.css'], }) export default class Settings implements AfterViewInit { @ViewChild('menu', { read: ElementRef }) diff --git a/packages/example-styles/css/tabs.css b/packages/angular-test-app/src/preview-examples/tabs.css similarity index 62% rename from packages/example-styles/css/tabs.css rename to packages/angular-test-app/src/preview-examples/tabs.css index 38297316e6..e1240426ef 100644 --- a/packages/example-styles/css/tabs.css +++ b/packages/angular-test-app/src/preview-examples/tabs.css @@ -1,11 +1,15 @@ /* - * SPDX-FileCopyrightText: 2023 Siemens AG + * 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 + */ .tabs { display: block; diff --git a/packages/angular-test-app/src/preview-examples/tabs.ts b/packages/angular-test-app/src/preview-examples/tabs.ts index 337ef7cb6f..a5b3401e34 100644 --- a/packages/angular-test-app/src/preview-examples/tabs.ts +++ b/packages/angular-test-app/src/preview-examples/tabs.ts @@ -23,7 +23,7 @@ import { Component } from '@angular/core';
Content Tab 3
`, - styleUrls: ['./styles/tabs.css'], + styleUrls: ['./tabs.css'], }) export default class Tabs { selectedTab = 1; diff --git a/packages/example-styles/css/theme-switcher.css b/packages/angular-test-app/src/preview-examples/theme-switcher.css similarity index 55% rename from packages/example-styles/css/theme-switcher.css rename to packages/angular-test-app/src/preview-examples/theme-switcher.css index dae33ecf06..e6b324e508 100644 --- a/packages/example-styles/css/theme-switcher.css +++ b/packages/angular-test-app/src/preview-examples/theme-switcher.css @@ -1,11 +1,15 @@ /* - * SPDX-FileCopyrightText: 2023 Siemens AG + * 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 + */ .theme-switcher ix-col { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/theme-switcher.ts b/packages/angular-test-app/src/preview-examples/theme-switcher.ts index 2612d21c54..56d0290c0f 100644 --- a/packages/angular-test-app/src/preview-examples/theme-switcher.ts +++ b/packages/angular-test-app/src/preview-examples/theme-switcher.ts @@ -13,7 +13,7 @@ import { themeSwitcher } from '@siemens/ix'; @Component({ selector: 'app-example', templateUrl: './theme-switcher.html', - styleUrls: ['./styles/theme-switcher.css'], + styleUrls: ['./theme-switcher.css'], }) export default class ThemeSwitcher { themes = ['theme-classic-light', 'theme-classic-dark']; diff --git a/packages/angular-test-app/src/preview-examples/tile.css b/packages/angular-test-app/src/preview-examples/tile.css new file mode 100644 index 0000000000..654fa06435 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/tile.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-tile { + margin-bottom: 0.5rem; +} diff --git a/packages/angular-test-app/src/preview-examples/tile.ts b/packages/angular-test-app/src/preview-examples/tile.ts index 21b370ecb4..652cc0bd53 100644 --- a/packages/angular-test-app/src/preview-examples/tile.ts +++ b/packages/angular-test-app/src/preview-examples/tile.ts @@ -49,6 +49,6 @@ import { Component } from '@angular/core'; `, - styleUrls: ['./styles/tile.css'], + styleUrls: ['./tile.css'], }) export default class Tile {} diff --git a/packages/example-styles/css/toggle-buttons.css b/packages/angular-test-app/src/preview-examples/toggle-button-primary-ghost.css similarity index 62% rename from packages/example-styles/css/toggle-buttons.css rename to packages/angular-test-app/src/preview-examples/toggle-button-primary-ghost.css index 1211b14e43..e3c3e245ac 100644 --- a/packages/example-styles/css/toggle-buttons.css +++ b/packages/angular-test-app/src/preview-examples/toggle-button-primary-ghost.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 + */ body { display: flex; diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-primary-ghost.ts b/packages/angular-test-app/src/preview-examples/toggle-button-primary-ghost.ts index a7e9b68ac3..9442796f3c 100644 --- a/packages/angular-test-app/src/preview-examples/toggle-button-primary-ghost.ts +++ b/packages/angular-test-app/src/preview-examples/toggle-button-primary-ghost.ts @@ -23,6 +23,6 @@ import { Component } from '@angular/core'; Loading `, - styleUrls: ['./styles/toggle-buttons.css'], + styleUrls: ['./toggle-button-primary-ghost.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-primary-outline.css b/packages/angular-test-app/src/preview-examples/toggle-button-primary-outline.css new file mode 100644 index 0000000000..e3c3e245ac --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/toggle-button-primary-outline.css @@ -0,0 +1,20 @@ +/* + * 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 + */ + +body { + display: flex; +} + +ix-toggle-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-primary-outline.ts b/packages/angular-test-app/src/preview-examples/toggle-button-primary-outline.ts index 457d705ccf..2daee6a1a0 100644 --- a/packages/angular-test-app/src/preview-examples/toggle-button-primary-outline.ts +++ b/packages/angular-test-app/src/preview-examples/toggle-button-primary-outline.ts @@ -23,6 +23,6 @@ import { Component } from '@angular/core'; Loading `, - styleUrls: ['./styles/toggle-buttons.css'], + styleUrls: ['./toggle-button-primary-outline.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-primary.css b/packages/angular-test-app/src/preview-examples/toggle-button-primary.css new file mode 100644 index 0000000000..e3c3e245ac --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/toggle-button-primary.css @@ -0,0 +1,20 @@ +/* + * 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 + */ + +body { + display: flex; +} + +ix-toggle-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-primary.ts b/packages/angular-test-app/src/preview-examples/toggle-button-primary.ts index a6945a35a5..d88a039d63 100644 --- a/packages/angular-test-app/src/preview-examples/toggle-button-primary.ts +++ b/packages/angular-test-app/src/preview-examples/toggle-button-primary.ts @@ -19,6 +19,6 @@ import { Component } from '@angular/core'; Loading `, - styleUrls: ['./styles/toggle-buttons.css'], + styleUrls: ['./toggle-button-primary.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-secondary-ghost.css b/packages/angular-test-app/src/preview-examples/toggle-button-secondary-ghost.css new file mode 100644 index 0000000000..e3c3e245ac --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/toggle-button-secondary-ghost.css @@ -0,0 +1,20 @@ +/* + * 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 + */ + +body { + display: flex; +} + +ix-toggle-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-secondary-ghost.ts b/packages/angular-test-app/src/preview-examples/toggle-button-secondary-ghost.ts index b821cff4ec..8507156d0e 100644 --- a/packages/angular-test-app/src/preview-examples/toggle-button-secondary-ghost.ts +++ b/packages/angular-test-app/src/preview-examples/toggle-button-secondary-ghost.ts @@ -17,6 +17,6 @@ import { Component } from '@angular/core'; Disabled Loading `, - styleUrls: ['./styles/toggle-buttons.css'], + styleUrls: ['./toggle-button-secondary-ghost.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-secondary-outline.css b/packages/angular-test-app/src/preview-examples/toggle-button-secondary-outline.css new file mode 100644 index 0000000000..e3c3e245ac --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/toggle-button-secondary-outline.css @@ -0,0 +1,20 @@ +/* + * 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 + */ + +body { + display: flex; +} + +ix-toggle-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-secondary-outline.ts b/packages/angular-test-app/src/preview-examples/toggle-button-secondary-outline.ts index 279ff60524..6a80a84dcf 100644 --- a/packages/angular-test-app/src/preview-examples/toggle-button-secondary-outline.ts +++ b/packages/angular-test-app/src/preview-examples/toggle-button-secondary-outline.ts @@ -17,6 +17,6 @@ import { Component } from '@angular/core'; Disabled Loading `, - styleUrls: ['./styles/toggle-buttons.css'], + styleUrls: ['./toggle-button-secondary-outline.css'], }) export default class Buttons {} diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-secondary.css b/packages/angular-test-app/src/preview-examples/toggle-button-secondary.css new file mode 100644 index 0000000000..e3c3e245ac --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/toggle-button-secondary.css @@ -0,0 +1,20 @@ +/* + * 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 + */ + +body { + display: flex; +} + +ix-toggle-button { + margin: 0.25rem; +} diff --git a/packages/angular-test-app/src/preview-examples/toggle-button-secondary.ts b/packages/angular-test-app/src/preview-examples/toggle-button-secondary.ts index 3c738c916f..269d6175be 100644 --- a/packages/angular-test-app/src/preview-examples/toggle-button-secondary.ts +++ b/packages/angular-test-app/src/preview-examples/toggle-button-secondary.ts @@ -17,6 +17,6 @@ import { Component } from '@angular/core'; Disabled Loading `, - styleUrls: ['./styles/toggle-buttons.css'], + styleUrls: ['./toggle-button-secondary.css'], }) export default class Buttons {} diff --git a/packages/example-styles/css/tooltip.css b/packages/angular-test-app/src/preview-examples/tooltip.css similarity index 59% rename from packages/example-styles/css/tooltip.css rename to packages/angular-test-app/src/preview-examples/tooltip.css index 725562be02..c65e0d165a 100644 --- a/packages/example-styles/css/tooltip.css +++ b/packages/angular-test-app/src/preview-examples/tooltip.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-button { margin: 4rem; diff --git a/packages/angular-test-app/src/preview-examples/tooltip.ts b/packages/angular-test-app/src/preview-examples/tooltip.ts index 03c9b11a39..e551028ce7 100644 --- a/packages/angular-test-app/src/preview-examples/tooltip.ts +++ b/packages/angular-test-app/src/preview-examples/tooltip.ts @@ -12,6 +12,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './tooltip.html', - styleUrls: ['./styles/tooltip.css'], + styleUrls: ['./tooltip.css'], }) export default class Tooltip {} diff --git a/packages/example-styles/css/menu.css b/packages/angular-test-app/src/preview-examples/vertical-tabs-with-avatar.css similarity index 61% rename from packages/example-styles/css/menu.css rename to packages/angular-test-app/src/preview-examples/vertical-tabs-with-avatar.css index 81bab94994..73d90ff551 100644 --- a/packages/example-styles/css/menu.css +++ b/packages/angular-test-app/src/preview-examples/vertical-tabs-with-avatar.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-menu { width: 100vw; diff --git a/packages/angular-test-app/src/preview-examples/vertical-tabs-with-avatar.ts b/packages/angular-test-app/src/preview-examples/vertical-tabs-with-avatar.ts index 81bd6822e6..9f379b9df3 100644 --- a/packages/angular-test-app/src/preview-examples/vertical-tabs-with-avatar.ts +++ b/packages/angular-test-app/src/preview-examples/vertical-tabs-with-avatar.ts @@ -32,6 +32,6 @@ import { Component } from '@angular/core'; `, - styleUrls: ['./styles/menu.css'], + styleUrls: ['./vertical-tabs-with-avatar.css'], }) export default class VerticalTabsWithAvatar {} diff --git a/packages/angular-test-app/src/preview-examples/vertical-tabs.css b/packages/angular-test-app/src/preview-examples/vertical-tabs.css new file mode 100644 index 0000000000..73d90ff551 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/vertical-tabs.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-menu { + width: 100vw; + height: 100vh; +} diff --git a/packages/angular-test-app/src/preview-examples/vertical-tabs.ts b/packages/angular-test-app/src/preview-examples/vertical-tabs.ts index 4035b52ab7..28c437f583 100644 --- a/packages/angular-test-app/src/preview-examples/vertical-tabs.ts +++ b/packages/angular-test-app/src/preview-examples/vertical-tabs.ts @@ -22,6 +22,6 @@ import { Component } from '@angular/core'; `, - styleUrls: ['./styles/menu.css'], + styleUrls: ['./vertical-tabs.css'], }) export default class VerticalTabs {} diff --git a/packages/angular-test-app/src/preview-examples/workflow.css b/packages/angular-test-app/src/preview-examples/workflow.css new file mode 100644 index 0000000000..de09882623 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/workflow.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 + */ + +body { + overflow-x: scroll; +} diff --git a/packages/angular-test-app/src/preview-examples/workflow.ts b/packages/angular-test-app/src/preview-examples/workflow.ts index 1b77149a15..6e7c315a32 100644 --- a/packages/angular-test-app/src/preview-examples/workflow.ts +++ b/packages/angular-test-app/src/preview-examples/workflow.ts @@ -21,6 +21,6 @@ import { Component } from '@angular/core'; Step 6 `, - styleUrls: ['./styles/workflow.css'], + styleUrls: ['./workflow.css'], }) export default class Workflow {} diff --git a/packages/angular-test-app/src/styles.scss b/packages/angular-test-app/src/styles.scss index ac638cda63..5fe49b33e0 100644 --- a/packages/angular-test-app/src/styles.scss +++ b/packages/angular-test-app/src/styles.scss @@ -7,4 +7,4 @@ * LICENSE file in the root directory of this source tree. */ -@import './preview-examples/styles/global.css'; +@import './preview-examples/global.css'; diff --git a/packages/core/.eslintignore b/packages/core/.eslintignore index 25235e6dac..3c88593351 100644 --- a/packages/core/.eslintignore +++ b/packages/core/.eslintignore @@ -3,3 +3,4 @@ playwright.config.ts stencil.config.ts src/components.d.ts scripts/build +scripts/e2e diff --git a/packages/core/.eslintrc.json b/packages/core/.eslintrc.json index 8557349071..8f1928bca1 100644 --- a/packages/core/.eslintrc.json +++ b/packages/core/.eslintrc.json @@ -1,15 +1,22 @@ { "root": true, "parserOptions": { - "project": "./tsconfig.json" + "project": "./tsconfig.lib.json" }, - "extends": [/* "plugin:@typescript-eslint/recommended", */ "plugin:@stencil-community/recommended", "ix"], + "extends": [ + /* "plugin:@typescript-eslint/recommended", */ "plugin:@stencil-community/recommended", + "eslint-config-ix/index.js" + ], "rules": { "@stencil-community/async-methods": 0, "@stencil-community/own-props-must-be-private": 0, "@stencil-community/own-methods-must-be-private": 0, "@stencil-community/strict-boolean-conditions": 0, "@stencil-community/ban-default-true": ["warn"], + "@stencil-community/decorators-style": [ + "error", + { "prop": "inline", "method": "multiline" } + ], "react/jsx-no-bind": 0, "react/jsx-uses-react": 0, "react/react-in-jsx-scope": 0, diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 92bfacd8a6..47f9ee17ae 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -55,7 +55,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -120,7 +120,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -583,7 +583,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -604,7 +604,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -625,7 +625,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -651,7 +651,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false } ], @@ -890,7 +890,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -911,7 +911,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -937,7 +937,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -1406,7 +1406,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -1533,7 +1533,13 @@ "styles": [], "slots": [], "parts": [], - "listeners": [] + "listeners": [ + { + "event": "click", + "capture": true, + "passive": false + } + ] }, { "dirPath": "src/components/card", @@ -1588,6 +1594,7 @@ "text": "2.1.0" } ], + "default": "false", "values": [ { "type": "boolean" @@ -1935,7 +1942,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -1969,7 +1976,7 @@ "name": "showAllCount", "type": "number", "complexType": { - "original": "number | undefined", + "original": "number", "resolved": "number", "references": {} }, @@ -1983,7 +1990,7 @@ "type": "number" } ], - "optional": false, + "optional": true, "required": false }, { @@ -3249,7 +3256,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -6301,6 +6308,7 @@ "reflectToAttr": false, "docs": "Display a chevron icon in list items. Defaults to 'false'", "docsTags": [], + "default": "false", "values": [ { "type": "boolean" @@ -6398,6 +6406,7 @@ "reflectToAttr": false, "docs": "Show chevron on right side of the event list item", "docsTags": [], + "default": "false", "values": [ { "type": "boolean" @@ -6434,7 +6443,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -6450,6 +6459,7 @@ "reflectToAttr": false, "docs": "Disable event list item", "docsTags": [], + "default": "false", "values": [ { "type": "boolean" @@ -6481,7 +6491,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -6497,6 +6507,7 @@ "reflectToAttr": false, "docs": "Show event list item as selected", "docsTags": [], + "default": "false", "values": [ { "type": "boolean" @@ -9280,7 +9291,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -11735,7 +11746,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -11756,7 +11767,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false } ], @@ -12185,7 +12196,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -12228,7 +12239,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -16785,7 +16796,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -16824,7 +16835,7 @@ "type": "TypographyFormatCode" } ], - "optional": false, + "optional": true, "required": false }, { @@ -16884,7 +16895,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -16977,7 +16988,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -17679,11 +17690,6 @@ "docstring": "", "path": "src/components/card/card.tsx" }, - "src/components/typography/typography.tsx::TypographyVariants": { - "declaration": "export type TypographyVariants =\n | 'x-small'\n | 'small'\n | 'caption'\n | 'caption-single'\n | 'default'\n | 'default-single'\n | 'default-title'\n | 'default-title-single'\n | 'large'\n | 'large-single'\n | 'large-title'\n | 'large-title-single'\n | 'h2'\n | 'display-large';", - "docstring": "", - "path": "src/components/typography/typography.tsx" - }, "src/components/typography/typography.tsx::TypographyFormat": { "declaration": "export type TypographyFormat =\n | TypographyFormatLabel\n | TypographyFormatBody\n | TypographyFormatDisplay\n | TypographyFormatHeading\n | TypographyFormatCode;", "docstring": "", diff --git a/packages/core/package.json b/packages/core/package.json index bf7b4e39bb..6207cbc401 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -54,7 +54,7 @@ "devDependencies": { "@playwright/test": "^1.32.1", "@siemens/ix-icons": "^2.0.0", - "@stencil-community/eslint-plugin": "^0.7.1", + "@stencil-community/eslint-plugin": "^0.7.2", "@stencil-community/postcss": "^2.2.0", "@stencil/angular-output-target": "^0.8.3", "@stencil/react-output-target": "^0.5.3", @@ -86,6 +86,7 @@ "rimraf": "^5.0.5", "sass": "^1.58.3", "start-server-and-test": "^1.14.0", + "strict-check": "workspace:*", "ts-node": "^10.0.0", "typescript": "^5.3.3" }, diff --git a/packages/core/scripts/e2e/load-e2e-runtime.js b/packages/core/scripts/e2e/load-e2e-runtime.js index e60ca8e440..6965ac4695 100644 --- a/packages/core/scripts/e2e/load-e2e-runtime.js +++ b/packages/core/scripts/e2e/load-e2e-runtime.js @@ -8,59 +8,69 @@ */ function loadResources() { - var ixEsm = document.createElement('script'); + const ixEsm = document.createElement('script'); ixEsm.setAttribute('type', 'module'); ixEsm.setAttribute( 'src', 'http://127.0.0.1:8080/www/build/siemens-ix.esm.js' ); - var ix = document.createElement('script'); + const ix = document.createElement('script'); ix.setAttribute('nomodule', ''); ix.setAttribute('src', 'http://127.0.0.1:8080/www/build/siemens-ix.js'); - var bootstrapStyling = document.createElement('link'); + const bootstrapStyling = document.createElement('link'); bootstrapStyling.setAttribute('rel', 'stylesheet'); bootstrapStyling.setAttribute( 'href', 'http://127.0.0.1:8080/www/build/bootstrap/dist/css/bootstrap.css' ); - var ixStyling = document.createElement('link'); + const ixStyling = document.createElement('link'); ixStyling.setAttribute('rel', 'stylesheet'); ixStyling.setAttribute( 'href', 'http://127.0.0.1:8080/www/build/siemens-ix.css' ); - var ixBrandStyle = document.createElement('link'); + const ixBrandStyle = document.createElement('link'); ixBrandStyle.setAttribute('rel', 'stylesheet'); ixBrandStyle.setAttribute( 'href', 'http://127.0.0.1:8080/www/build/ix-brand-theme/ix-brand-theme.css' ); - var ixBrandEsm = document.createElement('script'); + const ixBrandEsm = document.createElement('script'); ixBrandEsm.setAttribute('type', 'module'); ixBrandEsm.setAttribute( 'src', 'http://127.0.0.1:8080/www/build/ix-brand-theme/ix-brand-theme.esm.js' ); - var ixBrand = document.createElement('script'); + const ixBrand = document.createElement('script'); ixBrand.setAttribute('nomodule', ''); ixBrand.setAttribute( 'src', 'http://127.0.0.1:8080/www/build/ix-brand-theme/ix-brand-theme.js' ); - var ixIcons = document.createElement('link'); + const ixIcons = document.createElement('link'); ixIcons.setAttribute('rel', 'stylesheet'); ixIcons.setAttribute( 'href', 'http://127.0.0.1:8080/www/build/ix-icons/css/ix-icons.css' ); + const fullBodyStyles = document.createElement('style'); + fullBodyStyles.innerHTML = ` + html, body { + margin: 0px; + padding: 0px; + width: 100vw; + height: 100vh; + } + `; + document.getElementsByTagName('head')[0].appendChild(bootstrapStyling); document.getElementsByTagName('head')[0].appendChild(ixEsm); document.getElementsByTagName('head')[0].appendChild(ix); @@ -69,6 +79,7 @@ function loadResources() { document.getElementsByTagName('head')[0].appendChild(ixBrandEsm); document.getElementsByTagName('head')[0].appendChild(ixBrand); document.getElementsByTagName('head')[0].appendChild(ixIcons); + document.getElementsByTagName('head')[0].appendChild(fullBodyStyles); } function detectThemeSwitching() { diff --git a/packages/core/scss/components/_checkboxes.scss b/packages/core/scss/components/_checkboxes.scss index d984f2f717..c477e8d7d6 100755 --- a/packages/core/scss/components/_checkboxes.scss +++ b/packages/core/scss/components/_checkboxes.scss @@ -13,18 +13,11 @@ /* Base for label styling */ [type='checkbox']:not(:checked), [type='checkbox']:checked { - clip: rect(0 0 0 0); - clip-path: inset(50%); - height: 1px; - width: 1px; - max-height: 1px; - max-width: 1px; - min-height: 0px; - min-width: 0px; - overflow: hidden; position: absolute; - white-space: nowrap; - appearance: none; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; } [type='checkbox']:not(:checked) + label, diff --git a/packages/core/scss/components/form/_input.scss b/packages/core/scss/components/form/_input.scss index 0a37694b49..6ad86fbac6 100644 --- a/packages/core/scss/components/form/_input.scss +++ b/packages/core/scss/components/form/_input.scss @@ -19,8 +19,7 @@ color: var(--theme-input--color); -moz-appearance: textfield; text-overflow: ellipsis; - border: var(--theme-input--border-thickness, 1px) solid - var(--theme-input--border-color); + border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color); border-radius: var(--theme-input--border-radius); box-shadow: var(--theme-input--box-shadow); } @@ -30,8 +29,7 @@ -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important; -webkit-text-fill-color: var(--theme-input--color--autofill) !important; background-color: var(--theme-input--background--autofill) !important; - border: var(--theme-input--border-thickness, 1px) solid - var(--theme-input--border-color--autofill) !important; + border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important; color: var(--theme-input--color--autofill) !important; } @@ -39,17 +37,19 @@ color: var(--theme-input-hint--color); } - &.hover, - &:hover { - border-color: var(--theme-input--border-color--hover) !important; - background-color: var(--theme-input--background--hover); + &.hover, &:hover { + &:not(.read-only, .disabled, [readonly], [disabled]) { + border-color: var(--theme-input--border-color--hover) !important; + background-color: var(--theme-input--background--hover); + } } - &.focus, - &:focus { - outline: 1px solid var(--theme-color-focus-bdr); - outline-offset: var(--theme-input--focus--outline-offset); - border-color: var(--theme-input--border-color--focus) !important; + &.focus, &:focus { + &:not(.read-only, .disabled, [readonly], [disabled]) { + outline: 1px solid var(--theme-color-focus-bdr); + outline-offset: var(--theme-input--focus--outline-offset); + border-color: var(--theme-input--border-color--focus) !important; + } } @if $feature-read-only == true { @@ -59,9 +59,7 @@ background-color: transparent; outline: none; border: none; - border-bottom: var(--theme-input--border-thickness, 1px) - solid - var(--theme-input--border-color-bottom--readonly); + border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly); } &.read-only, @@ -72,17 +70,16 @@ } } - &:disabled { + &:disabled, &.disabled { box-shadow: none; background-color: transparent; outline: none; border: none; color: var(--theme-input--color--disabled); - border-bottom: var(--theme-input--border-thickness, 1px) solid - var(--theme-input--border-color-bottom--disabled); + border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled); } - &:disabled::placeholder { + &:disabled::placeholder, &.disabled::placeholder { color: transparent; } } diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 03f40e0d39..c92cc204b1 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -44,7 +44,7 @@ import { ToastConfig, ToastType } from "./components/toast/toast-utils"; import { ShowToastResult } from "./components/toast/toast-container"; import { Element } from "@stencil/core"; import { TreeContext, TreeItemContext, TreeModel, UpdateCallback } from "./components/tree/tree-model"; -import { TextDecoration, TypographyColors, TypographyFormat, TypographyVariants } from "./components/typography/typography"; +import { TextDecoration, TypographyColors, TypographyFormat } from "./components/typography/typography"; import { UploadFileState } from "./components/upload/upload-file-state"; export { ActionCardVariant } from "./components/action-card/action-card"; export { IxTheme } from "./components/utils/theme-switcher"; @@ -85,7 +85,7 @@ export { ToastConfig, ToastType } from "./components/toast/toast-utils"; export { ShowToastResult } from "./components/toast/toast-container"; export { Element } from "@stencil/core"; export { TreeContext, TreeItemContext, TreeModel, UpdateCallback } from "./components/tree/tree-model"; -export { TextDecoration, TypographyColors, TypographyFormat, TypographyVariants } from "./components/typography/typography"; +export { TextDecoration, TypographyColors, TypographyFormat } from "./components/typography/typography"; export { UploadFileState } from "./components/upload/upload-file-state"; export namespace Components { /** @@ -95,7 +95,7 @@ export namespace Components { /** * Card heading */ - "heading": string; + "heading"?: string; /** * Card icon */ @@ -107,7 +107,7 @@ export namespace Components { /** * Card subheading */ - "subheading": string; + "subheading"?: string; /** * Card variant * @deprecated variant "insight" and "notification" will be removed in 3.0. Use "outline" or "filled" instead. @@ -163,20 +163,20 @@ export namespace Components { * Optional description text that will be displayed underneath the username. Note: Only working if avatar is part of the ix-application-header * @since 2.1.0 */ - "extra": string; + "extra"?: string; /** * Display an avatar image */ - "image": string; + "image"?: string; /** * Display the initials of the user. Will be overwritten by image */ - "initials": string; + "initials"?: string; /** * If set an info card displaying the username will be placed inside the dropdown. Note: Only working if avatar is part of the ix-application-header * @since 2.1.0 */ - "username": string; + "username"?: string; } interface IxBasicNavigation { /** @@ -206,16 +206,16 @@ export namespace Components { * Optional icon to be displayed next to the header label * @since 1.5.0 */ - "icon": string; + "icon"?: string; /** * Label of blind */ - "label": string; + "label"?: string; /** * Secondary label inside blind header * @since 2.0.0 */ - "sublabel": string; + "sublabel"?: string; /** * Blind variant * @since 2.0.0 @@ -268,7 +268,7 @@ export namespace Components { /** * Icon name */ - "icon": string; + "icon"?: string; "iconSize": '12' | '16' | '24'; /** * Loading button @@ -342,7 +342,7 @@ export namespace Components { /** * Name the card list */ - "label": string; + "label"?: string; /** * List style */ @@ -354,7 +354,7 @@ export namespace Components { /** * Overwrite the default show all count. */ - "showAllCount": number | undefined; + "showAllCount"?: number; /** * Suppress the overflow handling of child elements */ @@ -508,7 +508,7 @@ export namespace Components { /** * Title of Header */ - "headerTitle": string; + "headerTitle"?: string; /** * Variant of content header */ @@ -518,7 +518,7 @@ export namespace Components { /** * Define css grid template */ - "templates": Partial>; + "templates"?: Partial>; } interface IxCssGridItem { /** @@ -987,7 +987,7 @@ export namespace Components { * @link https://ix.siemens.io/docs/theming/colors/ * @deprecated since 2.1.0 use `item-color` */ - "color": string; + "color"?: string; /** * Disable event list item */ @@ -996,7 +996,7 @@ export namespace Components { * Color of the status indicator. You can find a list of all available colors in our documentation. Example values are `--theme-color-alarm` or `color-alarm` * @link https://ix.siemens.io/docs/theming/colors/ */ - "itemColor": string; + "itemColor"?: string; /** * Show event list item as selected */ @@ -1348,7 +1348,7 @@ export namespace Components { /** * Should only be set if you use ix-menu standalone */ - "applicationName": string; + "applicationName"?: string; /** * Internal */ @@ -1676,11 +1676,11 @@ export namespace Components { /** * Icon of the Header */ - "icon": string; + "icon"?: string; /** * Icon color */ - "iconColor": string; + "iconColor"?: string; } interface IxModalLoading { } @@ -1740,7 +1740,7 @@ export namespace Components { /** * Title of the side panel */ - "heading": string; + "heading"?: string; /** * Define if the pane should have a collapsed state */ @@ -1748,7 +1748,7 @@ export namespace Components { /** * Name of the icon */ - "icon": string; + "icon"?: string; "ignoreLayoutSettings": boolean; "isMobile": boolean; /** @@ -2338,30 +2338,25 @@ export namespace Components { * Text color based on theme variables * @deprecated since 2.1.0 use property `text-color` */ - "color": TypographyColors; + "color"?: TypographyColors; /** * Text format */ - "format": TypographyFormat; + "format"?: TypographyFormat; /** * Text color based on theme variables */ - "textColor": TypographyColors; + "textColor"?: TypographyColors; /** * Text decoration */ "textDecoration": TextDecoration; - /** - * Font variant based on theme variables - * @deprecated Use `format` property - */ - "variant": TypographyVariants; } interface IxUpload { /** * The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload). [accept]{@link "https://www.w3schools.com/tags/att_input_accept.asp"} */ - "accept": string; + "accept"?: string; /** * Disable all input events */ @@ -4435,7 +4430,7 @@ declare namespace LocalJSX { /** * Overwrite the default show all count. */ - "showAllCount"?: number | undefined; + "showAllCount"?: number; /** * Suppress the overflow handling of child elements */ @@ -6637,11 +6632,6 @@ declare namespace LocalJSX { * Text decoration */ "textDecoration"?: TextDecoration; - /** - * Font variant based on theme variables - * @deprecated Use `format` property - */ - "variant"?: TypographyVariants; } interface IxUpload { /** diff --git a/packages/core/src/components/action-card/action-card.tsx b/packages/core/src/components/action-card/action-card.tsx index 36c889a06b..1882c9d3e6 100644 --- a/packages/core/src/components/action-card/action-card.tsx +++ b/packages/core/src/components/action-card/action-card.tsx @@ -36,19 +36,19 @@ export class IxActionCard { /** * Card heading */ - @Prop() heading: string; + @Prop() heading?: string; /** * Card subheading */ - @Prop() subheading: string; + @Prop() subheading?: string; /** * Card selection */ @Prop() selected = false; - private getSubheadingColor(): TypographyColors { + private getSubheadingColor(): TypographyColors | undefined { switch (this.variant) { case 'insight': case 'notification': diff --git a/packages/core/src/components/avatar/avatar.scss b/packages/core/src/components/avatar/avatar.scss index 5a69d88c52..d1f668bea6 100644 --- a/packages/core/src/components/avatar/avatar.scss +++ b/packages/core/src/components/avatar/avatar.scss @@ -106,7 +106,7 @@ @include btn-base-variant('invisible-primary', false); - li { + .avatar { transform: scale(0.8); } } diff --git a/packages/core/src/components/avatar/avatar.tsx b/packages/core/src/components/avatar/avatar.tsx index 04b1f4f2b5..1e6cbfc55c 100644 --- a/packages/core/src/components/avatar/avatar.tsx +++ b/packages/core/src/components/avatar/avatar.tsx @@ -53,23 +53,23 @@ function DefaultAvatar(props: { initials?: string }) { ); } -function AvatarImage(props: { image: string; initials: string }) { +function AvatarImage(props: { image?: string; initials?: string }) { return ( -
  • +
    {props.image ? ( ) : ( )} -
    • + ); } function UserInfo(props: { - image: string; - initials: string; + image?: string; + initials?: string; userName: string; - extra: string; + extra?: string; }) { return ( @@ -97,19 +97,19 @@ function UserInfo(props: { shadow: true, }) export class Avatar { - @Element() hostElement: HTMLIxAvatarElement; + @Element() hostElement!: HTMLIxAvatarElement; /** * Display an avatar image * */ - @Prop() image: string; + @Prop() image?: string; /** * Display the initials of the user. Will be overwritten by image * */ - @Prop() initials: string; + @Prop() initials?: string; /** * If set an info card displaying the username will be placed inside the dropdown. @@ -117,7 +117,7 @@ export class Avatar { * * @since 2.1.0 */ - @Prop() username: string; + @Prop() username?: string; /** * Optional description text that will be displayed underneath the username. @@ -125,13 +125,13 @@ export class Avatar { * * @since 2.1.0 */ - @Prop() extra: string; + @Prop() extra?: string; @State() isClosestApplicationHeader = false; @State() hasSlottedElements = false; - private slotElement: HTMLSlotElement; - private dropdownElement: HTMLIxDropdownElement; + private slotElement?: HTMLSlotElement; + private dropdownElement?: HTMLIxDropdownElement; componentWillLoad() { const closest = closestElement('ix-application-header', this.hostElement); @@ -143,10 +143,15 @@ export class Avatar { } private resolveAvatarTrigger() { - return new Promise((resolve) => { - readTask(() => - resolve(this.hostElement.shadowRoot.querySelector('button')) - ); + return new Promise((resolve, reject) => { + readTask(() => { + const button = this.hostElement.shadowRoot!.querySelector('button'); + if (button) { + resolve(button); + } else { + reject(new Error('ix-avatar - trigger element not found')); + } + }); }); } diff --git a/packages/core/src/components/blind/blind.tsx b/packages/core/src/components/blind/blind.tsx index 2ecfba1be3..73372379d4 100644 --- a/packages/core/src/components/blind/blind.tsx +++ b/packages/core/src/components/blind/blind.tsx @@ -40,19 +40,19 @@ export class Blind { /** * Label of blind */ - @Prop() label: string; + @Prop() label?: string; /** * Secondary label inside blind header * @since 2.0.0 */ - @Prop() sublabel: string; + @Prop() sublabel?: string; /** * Optional icon to be displayed next to the header label * @since 1.5.0 */ - @Prop() icon: string; + @Prop() icon?: string; /** * Blind variant @@ -63,11 +63,11 @@ export class Blind { /** * Collapsed state changed */ - @Event() collapsedChange: EventEmitter; + @Event() collapsedChange!: EventEmitter; @Element() hostElement!: HTMLIxBlindElement; - private chevronRef: HTMLElement; + private chevronRef?: HTMLElement; private blindId = ++sequentialInstanceId; constructor() {} @@ -82,7 +82,7 @@ export class Blind { } get content() { - return this.hostElement.shadowRoot.querySelector('.blind-content'); + return this.hostElement.shadowRoot!.querySelector('.blind-content'); } @Watch('collapsed') @@ -160,7 +160,7 @@ export class Blind { ? 'color-primary' : `color-${this.variant}--contrast` } - ref={(ref) => (this.chevronRef = ref)} + ref={(ref: HTMLElement) => (this.chevronRef = ref)} >
    { } }; -export function BaseButton(props: BaseButtonProps, children) { +export const BaseButton: FunctionalComponent = ( + props: BaseButtonProps, + children +) => { const extraClasses = props.extraClasses ?? {}; const ariaAttributes = props.ariaAttributes ?? {}; @@ -136,4 +139,4 @@ export function BaseButton(props: BaseButtonProps, children) { {props.afterContent ? props.afterContent : null} ); -} +}; diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx index bf87fb0317..005c91e53e 100644 --- a/packages/core/src/components/button/button.tsx +++ b/packages/core/src/components/button/button.tsx @@ -7,7 +7,7 @@ * LICENSE file in the root directory of this source tree. */ -import { Component, Element, h, Host, Prop } from '@stencil/core'; +import { Component, Element, h, Host, Listen, Prop } from '@stencil/core'; import { BaseButton, BaseButtonProps } from './base-button'; export type ButtonVariant = 'danger' | 'primary' | 'secondary'; @@ -54,7 +54,7 @@ export class Button { /** * Icon name */ - @Prop() icon: string; + @Prop() icon?: string; /** @internal */ @Prop() alignment: 'center' | 'start' = 'center'; @@ -62,12 +62,20 @@ export class Button { /** @internal */ @Prop() iconSize: '12' | '16' | '24' = '24'; - @Element() hostElement: HTMLIxButtonElement; + @Element() hostElement!: HTMLIxButtonElement; /** * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284) */ - submitButtonElement: HTMLButtonElement; + submitButtonElement?: HTMLButtonElement; + + @Listen('click', { capture: true }) + handleClick(event: Event) { + if (this.disabled || this.loading) { + event.stopPropagation(); + event.preventDefault(); + } + } componentDidLoad() { if (this.type === 'submit') { @@ -82,7 +90,12 @@ export class Button { } dispatchFormEvents() { - if (this.type === 'submit' && this.submitButtonElement) { + if ( + this.type === 'submit' && + this.submitButtonElement && + !this.disabled && + !this.loading + ) { this.submitButtonElement.click(); } } diff --git a/packages/core/src/components/card-accordion/card-accordion.tsx b/packages/core/src/components/card-accordion/card-accordion.tsx index bb356ee34c..95538f39f4 100644 --- a/packages/core/src/components/card-accordion/card-accordion.tsx +++ b/packages/core/src/components/card-accordion/card-accordion.tsx @@ -35,12 +35,12 @@ export class CardAccordion { */ @Prop() collapse = false; - @Element() hostElement: HTMLIxCardAccordionElement; + @Element() hostElement!: HTMLIxCardAccordionElement; /** * @internal */ - @Event() accordionExpand: EventEmitter; + @Event() accordionExpand!: EventEmitter; @State() expandContent = false; @@ -50,7 +50,7 @@ export class CardAccordion { } get expandedContent() { - return this.hostElement.shadowRoot.querySelector('.expand-content'); + return this.hostElement.shadowRoot!.querySelector('.expand-content'); } onExpandActionClick(event: Event) { @@ -69,10 +69,10 @@ export class CardAccordion { private scrollExpandedContentIntoView() { setTimeout(() => { - const rect = this.expandedContent.getBoundingClientRect(); + const rect = this.expandedContent!.getBoundingClientRect(); if (rect.bottom > window.innerHeight) { - this.hostElement.shadowRoot - .querySelector('.expand-content') + this.hostElement + .shadowRoot!.querySelector('.expand-content')! .scrollIntoView(false); } }, 150); diff --git a/packages/core/src/components/card-list/card-list.scss b/packages/core/src/components/card-list/card-list.scss index dfa50b70c0..75177d3597 100644 --- a/packages/core/src/components/card-list/card-list.scss +++ b/packages/core/src/components/card-list/card-list.scss @@ -25,7 +25,7 @@ $CardList__Title__Height: 1.5rem; height: $CardList__Title__Height; align-items: center; width: 100%; - margin-bottom: 0.5rem; + margin-bottom: 1rem; &__Label { overflow: hidden; diff --git a/packages/core/src/components/card-list/card-list.tsx b/packages/core/src/components/card-list/card-list.tsx index bfcb672a74..b2130de913 100644 --- a/packages/core/src/components/card-list/card-list.tsx +++ b/packages/core/src/components/card-list/card-list.tsx @@ -12,7 +12,7 @@ import { import { createMutationObserver } from '../utils/mutation-observer'; function CardListTitle(props: { - label: string; + label?: string; isCollapsed: boolean; onClick: (e: MouseEvent) => void; onShowAllClick: (e: MouseEvent) => void; @@ -20,7 +20,7 @@ function CardListTitle(props: { showAllCounter: number; hideShowAll: boolean; }) { - if (props.label === '') { + if (!props.label) { return null; } @@ -36,7 +36,7 @@ function CardListTitle(props: { CardList__Title__Button__Collapsed: props.isCollapsed, }} > - + {props.label} {!props.hideShowAll && ( @@ -67,7 +67,7 @@ export class CardList { /** * Name the card list */ - @Prop() label: string; + @Prop() label?: string; /** * Collapse the list @@ -89,7 +89,7 @@ export class CardList { /** * Overwrite the default show all count. * */ - @Prop() showAllCount: number | undefined; + @Prop() showAllCount?: number; /** * Suppress the overflow handling of child elements @@ -116,23 +116,23 @@ export class CardList { /** * Fire event when the collapse state is changed by the user */ - @Event() collapseChanged: EventEmitter; + @Event() collapseChanged!: EventEmitter; /** * Fire event when the collapse state is changed by the user */ - @Event() showAllClick: EventEmitter<{ + @Event() showAllClick!: EventEmitter<{ nativeEvent: MouseEvent; }>; /** * Fire event when the show more card is clicked. */ - @Event() showMoreCardClick: EventEmitter<{ + @Event() showMoreCardClick!: EventEmitter<{ nativeEvent: MouseEvent; }>; - @Element() hostElement: HTMLIxCardListElement; + @Element() hostElement!: HTMLIxCardListElement; @State() private hasOverflowingElements = false; @State() private numberOfOverflowingElements = 0; @@ -140,7 +140,7 @@ export class CardList { @State() private leftScrollDistance = 0; @State() private rightScrollDistance = 0; - private observer: MutationObserver; + private observer?: MutationObserver; private onCardListVisibilityToggle() { this.collapse = !this.collapse; @@ -154,7 +154,7 @@ export class CardList { } private getListChildren() { - const slot = this.hostElement.shadowRoot.querySelector( + const slot = this.hostElement.shadowRoot!.querySelector( '.CardList__Content > slot' ) as HTMLSlotElement; return slot.assignedElements({ flatten: true }); @@ -185,7 +185,7 @@ export class CardList { }); this.observer.observe( - this.hostElement.shadowRoot.querySelector('.CardList__Content'), + this.hostElement.shadowRoot!.querySelector('.CardList__Content')!, { childList: true, subtree: true, @@ -207,7 +207,7 @@ export class CardList { } private get listElement() { - return this.hostElement.shadowRoot.querySelector('.CardList__Content'); + return this.hostElement.shadowRoot!.querySelector('.CardList__Content'); } private onCardListScroll() { @@ -260,6 +260,9 @@ export class CardList { @Listen('resize', { target: 'window' }) private detectOverflow() { + if (!this.listElement) { + return; + } const { clientWidth, scrollWidth, scrollLeft } = this.listElement; this.leftScrollDistance = scrollLeft; diff --git a/packages/core/src/components/card/card.scss b/packages/core/src/components/card/card.scss index 4404a88663..8b6daa9623 100644 --- a/packages/core/src/components/card/card.scss +++ b/packages/core/src/components/card/card.scss @@ -41,12 +41,24 @@ } } -:host(.card-insight), :host(.card-outline) { - --ix-card-background: transparent; +@mixin accordionChevronColorPrimary { + ::slotted(ix-card-accordion) { + color: var(--theme-color-primary); + } +} + +:host(.card-insight), +:host(.card-outline) { + @include accordionChevronColorPrimary; + + --ix-card-background: var(--theme-color-ghost); --ix-card-border-color: var(--theme-color-soft-bdr); } -:host(.card-notification), :host(.card-filled) { +:host(.card-notification), +:host(.card-filled) { + @include accordionChevronColorPrimary; + --ix-card-background: var(--theme-color-component-1); } @@ -85,17 +97,19 @@ color: var(--theme-color-neutral--contrast); } -:host(:not(.card-insight)) { +:host(:not(.card-insight, .card-outline)) { --ix-card-border-color: transparent; } // ### Hover ### -:host(.card-insight:hover) { +:host(.card-insight:hover), +:host(.card-outline:hover) { --ix-card-background: var(--theme-color-ghost--hover); } -:host(.card-notification:hover) { +:host(.card-notification:hover), +:host(.card-filled:hover) { --ix-card-background: var(--theme-color-component-1--hover); } @@ -129,11 +143,13 @@ // ### Active ### -:host(.card-insight:active) { +:host(.card-insight:active), +:host(.card-outline:active) { --ix-card-background: var(--theme-color-ghost--active); } -:host(.card-notification:active) { +:host(.card-notification:active), +:host(.card-filled:active) { --ix-card-background: var(--theme-color-component-1--active); } @@ -171,11 +187,13 @@ --ix-card-border-color: var(--theme-color-dynamic); } -:host(.selected.card-insight) { +:host(.selected.card-insight), +:host(.selected.card-outline) { --ix-card-background: var(--theme-color-ghost--selected); } -:host(.selected.card-notification) { +:host(.selected.card-notification), +:host(.selected.card-filled) { --ix-card-background: var(--theme-color-ghost--selected); } diff --git a/packages/core/src/components/card/card.tsx b/packages/core/src/components/card/card.tsx index 7f56e6450d..a037a39bfc 100644 --- a/packages/core/src/components/card/card.tsx +++ b/packages/core/src/components/card/card.tsx @@ -23,7 +23,7 @@ export type CardVariant = shadow: true, }) export class Card { - @Element() hostElement: HTMLIxCardElement; + @Element() hostElement!: HTMLIxCardElement; /** * Card variant @@ -34,7 +34,7 @@ export class Card { /** * @since 2.1.0 */ - @Prop() selected: boolean; + @Prop() selected: boolean = false; render() { return ( diff --git a/packages/core/src/components/category-filter/category-filter.scss b/packages/core/src/components/category-filter/category-filter.scss index 61b2fa31a9..7cecadf8d9 100644 --- a/packages/core/src/components/category-filter/category-filter.scss +++ b/packages/core/src/components/category-filter/category-filter.scss @@ -95,9 +95,7 @@ .list-unstyled { display: flex; flex-wrap: wrap; - list-style: none; - padding: 0; - margin: 0; + height: 100%; overflow-y: auto; } @@ -126,7 +124,7 @@ height: 100%; } - ul > li, + .list-unstyled > span:not(.category-preview), input { padding-inline-start: 0; padding-top: 2px; diff --git a/packages/core/src/components/category-filter/category-filter.tsx b/packages/core/src/components/category-filter/category-filter.tsx index 6a572a0545..af086b6b45 100644 --- a/packages/core/src/components/category-filter/category-filter.tsx +++ b/packages/core/src/components/category-filter/category-filter.tsx @@ -22,6 +22,7 @@ import { BaseButton, BaseButtonProps } from '../button/base-button'; import { FilterState } from './filter-state'; import { InputState } from './input-state'; import { LogicalFilterOperator } from './logical-filter-operator'; +import { A11yAttributes, a11yHostAttributes } from '../utils/a11y'; @Component({ tag: 'ix-category-filter', @@ -35,6 +36,7 @@ export class CategoryFilter { @State() private textInput?: HTMLInputElement; private formElement?: HTMLFormElement; private isScrollStateDirty?: boolean; + private a11yAttributes?: A11yAttributes; @Element() hostElement!: HTMLIxCategoryFilterElement; @@ -162,6 +164,10 @@ export class CategoryFilter { this.setFilterState(newValue); } + componentWillLoad() { + this.a11yAttributes = a11yHostAttributes(this.hostElement); + } + componentDidLoad() { if (this.filterState !== undefined) { setTimeout(() => this.setFilterState(this.filterState)); @@ -710,9 +716,9 @@ export class CategoryFilter { size="16" >
    -
      +
      {this.filterTokens.map((value, index) => ( -
    • {this.getFilterChipLabel(value)} -
      • + ))} {this.categories === undefined ? ( '' ) : ( -
    • {this.categories[this.category]?.label} -
      • + )} (this.textInput = el)} type="text" placeholder={this.placeholder} + {...this.a11yAttributes} > -
    +
    {!this.readonly && !this.disabled && this.getResetButton()} diff --git a/packages/core/src/components/col/col.tsx b/packages/core/src/components/col/col.tsx index 7a646713cc..30a6d25fa2 100644 --- a/packages/core/src/components/col/col.tsx +++ b/packages/core/src/components/col/col.tsx @@ -81,8 +81,8 @@ export class Col { } } - private getColumnSize() { - let size: ColumnSize; + private getColumnSize(): ColumnSize | undefined { + let size: ColumnSize | undefined; Col.Breakpoints.forEach((breakpoint) => { const isMediaQueryActive = breakpoint !== '' ? matchBreakpoint(breakpoint) : true; diff --git a/packages/core/src/components/content-header/content-header.scss b/packages/core/src/components/content-header/content-header.scss index 84ac84b54d..c9cce37069 100644 --- a/packages/core/src/components/content-header/content-header.scss +++ b/packages/core/src/components/content-header/content-header.scss @@ -11,16 +11,20 @@ display: flex; flex-direction: row; align-items: flex-start; - padding: 0px; + padding: 0; .titleGroup { display: flex; flex-direction: column; - flex: 1 1 0%; + flex: 1 1 0; + + .secondary { + padding: 0.25rem 0; + } } .subtitle { - margin-top: 0.5rem; + margin-top: -0.125rem; } .backButton { diff --git a/packages/core/src/components/content-header/content-header.tsx b/packages/core/src/components/content-header/content-header.tsx index 620e606dff..6ad134af1e 100644 --- a/packages/core/src/components/content-header/content-header.tsx +++ b/packages/core/src/components/content-header/content-header.tsx @@ -25,7 +25,7 @@ export class ContentHeader { /** * Title of Header */ - @Prop() headerTitle: string; + @Prop() headerTitle?: string; /** * Subtitle of Header @@ -40,7 +40,7 @@ export class ContentHeader { /** * Triggered when back button is clicked */ - @Event() backButtonClick: EventEmitter; + @Event() backButtonClick!: EventEmitter; render() { return ( @@ -57,15 +57,20 @@ export class ContentHeader {
    {this.headerTitle} - {this.headerSubtitle !== undefined ? ( - + {!!this.headerSubtitle && ( + {this.headerSubtitle} - ) : null} + )}
    diff --git a/packages/core/src/components/content/content.scss b/packages/core/src/components/content/content.scss index 7008702ae7..da0330faee 100644 --- a/packages/core/src/components/content/content.scss +++ b/packages/core/src/components/content/content.scss @@ -24,6 +24,7 @@ flex-grow: 1; overflow: auto; padding-right: 1.5rem; + position: relative; } .content-header.slotted { diff --git a/packages/core/src/components/content/content.tsx b/packages/core/src/components/content/content.tsx index 15a4f46fa7..11d42a15c3 100644 --- a/packages/core/src/components/content/content.tsx +++ b/packages/core/src/components/content/content.tsx @@ -25,7 +25,7 @@ export class Content { @State() isContentHeaderSlotted = false; get contentHeaderSlot() { - return this.hostElement.shadowRoot.querySelector( + return this.hostElement.shadowRoot!.querySelector( '.content-header slot' ) as HTMLSlotElement; } diff --git a/packages/core/src/components/css-grid/css-grid.tsx b/packages/core/src/components/css-grid/css-grid.tsx index de0e6b72ed..12dc01ae5b 100644 --- a/packages/core/src/components/css-grid/css-grid.tsx +++ b/packages/core/src/components/css-grid/css-grid.tsx @@ -37,9 +37,9 @@ export class CssGrid { /** * Define css grid template */ - @Prop() templates: Partial>; + @Prop() templates?: Partial>; - @State() currentTemplate: string[][]; + @State() currentTemplate?: string[][]; private disposeMediaQueryListener: ((event: MediaQueryListEvent) => void)[] = []; @@ -77,7 +77,10 @@ export class CssGrid { }); } - private findNextTemplate(type: CssGridTemplateType) { + private findNextTemplate(type: CssGridTemplateType): string[][] { + if (!this.templates) { + return []; + } const typeIndex = this.mediaQueries.findIndex((mq) => mq.name === type); const nextTemplate = this.templates[this.mediaQueries[typeIndex + 1].name]; if (!nextTemplate) { @@ -87,6 +90,9 @@ export class CssGrid { } private applyTemplate() { + if (!this.templates) { + return; + } let active = this.mediaQueries.find((mq) => mq.mediaQuery.matches); if (!active) { @@ -103,8 +109,8 @@ export class CssGrid { } render() { - const style = {}; - if (this.currentTemplate?.length !== 0) { + const style: Record = {}; + if (this.currentTemplate && this.currentTemplate.length !== 0) { style['grid-template-areas'] = templateBuilder(this.currentTemplate); } return ( diff --git a/packages/core/src/components/date-picker/date-picker.tsx b/packages/core/src/components/date-picker/date-picker.tsx index 74933790d1..24c145d814 100644 --- a/packages/core/src/components/date-picker/date-picker.tsx +++ b/packages/core/src/components/date-picker/date-picker.tsx @@ -147,6 +147,7 @@ export class DatePicker { * @since 2.1.0 */ @Prop() locale: string = undefined; + @Watch('locale') onLocaleChange() { this.setTranslations(); @@ -518,7 +519,11 @@ export class DatePicker { } } - private selectDay(selectedDay: number) { + private selectDay(selectedDay: number, target: Element) { + if (target.classList.contains('disabled')) { + return; + } + const date = DateTime.fromJSDate( new Date(this.selectedYear, this.selectedMonth, selectedDay) ); @@ -781,8 +786,16 @@ export class DatePicker { id={`day-cell-${day}`} date-calender-day class={this.getDayClasses(day)} - onClick={() => this.selectDay(day)} - onKeyUp={(e) => e.key === 'Enter' && this.selectDay(day)} + onClick={(e) => { + const target = e.currentTarget as HTMLElement; + this.selectDay(day, target); + }} + onKeyUp={(e) => { + const target = e.currentTarget as HTMLElement; + if (e.key === 'Enter') { + this.selectDay(day, target); + } + }} tabIndex={day === this.focusedDay ? 0 : -1} onFocus={() => this.onDayFocus()} onBlur={() => this.onDayBlur()} diff --git a/packages/core/src/components/date-picker/test/date-picker.ct.ts b/packages/core/src/components/date-picker/test/date-picker.ct.ts index 95f359bef7..31e6315d83 100644 --- a/packages/core/src/components/date-picker/test/date-picker.ct.ts +++ b/packages/core/src/components/date-picker/test/date-picker.ct.ts @@ -36,6 +36,37 @@ test('translation', async ({ mount, page }) => { await expect(header).toHaveCount(1); }); +test.describe('date picker tests single', () => { + test.beforeEach(async ({ mount }) => { + await mount( + `` + ); + }); + + test('select disabled date with enter', async ({ page }) => { + await page.waitForSelector('ix-date-time-card'); + + await page.getByText(/^9$/).focus(); + await page.keyboard.press('Enter'); + + expect((await getDateObj(page))[0]).toEqual({ + from: '2024/10/10', + to: undefined, + }); + }); + + test('select disabled date with click', async ({ page }) => { + await page.waitForSelector('ix-date-time-card'); + + await page.getByText(/^9$/).click({ force: true }); + + expect((await getDateObj(page))[0]).toEqual({ + from: '2024/10/10', + to: undefined, + }); + }); +}); + test.describe('date picker tests single', () => { test.beforeEach(async ({ mount }) => { await mount( diff --git a/packages/core/src/components/dropdown-header/dropdown-header.tsx b/packages/core/src/components/dropdown-header/dropdown-header.tsx index fce356f8a2..1076d6fe4a 100644 --- a/packages/core/src/components/dropdown-header/dropdown-header.tsx +++ b/packages/core/src/components/dropdown-header/dropdown-header.tsx @@ -26,7 +26,7 @@ export class DropdownHeader { render() { return ( - + {this.label} diff --git a/packages/core/src/components/dropdown/dropdown-controller.ts b/packages/core/src/components/dropdown/dropdown-controller.ts index 8f1336f8df..b0d356d102 100644 --- a/packages/core/src/components/dropdown/dropdown-controller.ts +++ b/packages/core/src/components/dropdown/dropdown-controller.ts @@ -65,7 +65,23 @@ class DropdownController { } disconnected(dropdown: DropdownInterface) { - this.dropdowns.delete(dropdown.getId()); + const id = dropdown.getId(); + this.removeFromSubmenuIds(id); + this.dropdowns.delete(id); + } + + removeFromSubmenuIds(id: string) { + this.dropdowns.forEach((dropdown) => { + const submenuIds = this.submenuIds[dropdown.getId()]; + if (submenuIds) { + const index = submenuIds.indexOf(id); + if (index > -1) { + submenuIds.splice(index, 1); + } + } + }); + + delete this.submenuIds[id]; } discoverSubmenus() { diff --git a/packages/core/src/components/dropdown/test/dropdown.ct.ts b/packages/core/src/components/dropdown/test/dropdown.ct.ts index 70fc51582f..8bae36fc26 100644 --- a/packages/core/src/components/dropdown/test/dropdown.ct.ts +++ b/packages/core/src/components/dropdown/test/dropdown.ct.ts @@ -1,12 +1,3 @@ -/* - * SPDX-FileCopyrightText: 2023 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. - */ - /* * SPDX-FileCopyrightText: 2023 Siemens AG * @@ -634,6 +625,29 @@ test.describe('resolve during element connect', () => { }); }); +test('Child dropdown disconnects', async ({ mount, page }) => { + await mount(`Open + + Item level 1 + + Item level 2 + + `); + const trigger = page.locator('ix-button').first(); + await trigger.click(); + const dropdown = page.locator('ix-dropdown').first(); + + await expect(dropdown).toBeVisible(); + + await dropdown.evaluate((dd) => { + dd.removeChild(dd.querySelector('ix-dropdown-button')); + }); + + await trigger.click(); + await trigger.click(); + await expect(dropdown).toBeVisible(); +}); + test.describe('A11y', () => { test.describe('Keyboard navigation', () => { test.beforeEach(async ({ page, mount }) => { diff --git a/packages/core/src/components/empty-state/empty-state.tsx b/packages/core/src/components/empty-state/empty-state.tsx index 38d76b4cbc..ee840a7c73 100644 --- a/packages/core/src/components/empty-state/empty-state.tsx +++ b/packages/core/src/components/empty-state/empty-state.tsx @@ -66,9 +66,7 @@ export class EmptyState {
    - + {this.header} diff --git a/packages/core/src/components/event-list-item/event-list-item.tsx b/packages/core/src/components/event-list-item/event-list-item.tsx index 79c897f0d2..a23e593897 100644 --- a/packages/core/src/components/event-list-item/event-list-item.tsx +++ b/packages/core/src/components/event-list-item/event-list-item.tsx @@ -34,7 +34,7 @@ export class EventListItem { * @deprecated since 2.1.0 use `item-color` */ // eslint-disable-next-line @stencil-community/reserved-member-names - @Prop() color: string; + @Prop() color?: string; /** * Color of the status indicator. @@ -43,27 +43,27 @@ export class EventListItem { * * @link https://ix.siemens.io/docs/theming/colors/ */ - @Prop() itemColor: string; + @Prop() itemColor?: string; /** * Show event list item as selected */ - @Prop() selected: boolean; + @Prop() selected = false; /** * Disable event list item */ - @Prop() disabled: boolean; + @Prop() disabled = false; /** * Show chevron on right side of the event list item */ - @Prop() chevron: boolean; + @Prop() chevron = false; /** * Event list item click */ - @Event() itemClick: EventEmitter; + @Event() itemClick!: EventEmitter; @Listen('click', { passive: true }) handleItemClick() { @@ -88,7 +88,8 @@ export class EventListItem { disabled: this.disabled, }} > -
  • )}
    • - +
    ); } diff --git a/packages/core/src/components/event-list/event-list.scss b/packages/core/src/components/event-list/event-list.scss index f88c0acd2a..3210978083 100644 --- a/packages/core/src/components/event-list/event-list.scss +++ b/packages/core/src/components/event-list/event-list.scss @@ -14,13 +14,6 @@ display: block; position: relative; - - ul { - list-style: none; - padding: 0; - margin-top: 0; - margin-bottom: 0; - } } :host(.item-size-l) { diff --git a/packages/core/src/components/event-list/event-list.tsx b/packages/core/src/components/event-list/event-list.tsx index e4a87d43c2..115e9923fa 100644 --- a/packages/core/src/components/event-list/event-list.tsx +++ b/packages/core/src/components/event-list/event-list.tsx @@ -48,7 +48,7 @@ export class EventList { /** * Display a chevron icon in list items. Defaults to 'false' */ - @Prop() chevron: boolean; + @Prop() chevron = false; @Watch('chevron') watchChevron(chevron: boolean | undefined) { @@ -111,7 +111,7 @@ export class EventList { const keyframes = [{ opacity: 1, easing: 'easeInSine' }, { opacity: 0 }]; - const listElement = this.hostElement.shadowRoot.querySelector('ul'); + const listElement = this.hostElement.shadowRoot!.querySelector('ul'); anime({ targets: listElement, @@ -166,9 +166,9 @@ export class EventList { compact: this.compact, }} > -
      +
      -
    +
    ); } diff --git a/packages/core/src/components/event-list/test/event-list.spec.tsx b/packages/core/src/components/event-list/test/event-list.spec.tsx deleted file mode 100644 index 513c9cdc0a..0000000000 --- a/packages/core/src/components/event-list/test/event-list.spec.tsx +++ /dev/null @@ -1,75 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2023 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. - */ - -import { newSpecPage } from '@stencil/core/testing'; -//@ts-ignore -import { createMutationObserver } from '../../utils/mutation-observer'; -import { EventList } from '../event-list'; - -jest.mock('../../utils/mutation-observer'); - -describe('event-list', () => { - beforeEach(() => { - //@ts-ignore - createMutationObserver = jest.fn(() => ({ - observe: jest.fn(), - })); - }); - - it('renders', async () => { - const page = await newSpecPage({ - components: [EventList], - html: ` - - - - `, - }); - expect(page.root).toEqualHtml(` - - -
      - -
    -     - -     - `); - }); - - it('compact', async () => { - const page = await newSpecPage({ - components: [EventList], - html: ` - - - - `, - }); - - const eventList = page.doc.querySelector( - 'ix-event-list' - ) as HTMLIxEventListElement; - - eventList.compact = true; - - await page.waitForChanges(); - - expect(page.root).toEqualHtml(` - - -
      - -
    -     - -     - `); - }); -}); diff --git a/packages/core/src/components/icon-button/icon-button-mixin.scss b/packages/core/src/components/icon-button/icon-button-mixin.scss index 5e87c89f68..12488fb101 100644 --- a/packages/core/src/components/icon-button/icon-button-mixin.scss +++ b/packages/core/src/components/icon-button/icon-button-mixin.scss @@ -63,25 +63,4 @@ @include icon-button-size('12', 1rem); @include icon-button-size('16', 1.5rem); @include icon-button-size('32', 2rem); - - :host(.btn-icon-12) { - ix-spinner { - height: 12px; - width: 12px; - } - } - - :host(.btn-icon-16) { - ix-spinner { - height: 16px; - width: 16px; - } - } - - :host(.btn-icon-32) { - ix-spinner { - height: 24px; - width: 24px; - } - } } diff --git a/packages/core/src/components/icon-toggle-button/icon-toggle-button.tsx b/packages/core/src/components/icon-toggle-button/icon-toggle-button.tsx index 8143b9eeea..1d5afa0cc5 100644 --- a/packages/core/src/components/icon-toggle-button/icon-toggle-button.tsx +++ b/packages/core/src/components/icon-toggle-button/icon-toggle-button.tsx @@ -144,7 +144,6 @@ export class IconToggleButton { ...this.getIconSizeClass(), }, }; - console.log(baseButtonProps, this.disabled, this.loading); return (
    - + {this.label}
    diff --git a/packages/core/src/components/menu-category/menu-category.tsx b/packages/core/src/components/menu-category/menu-category.tsx index f45ec845f1..18a908b5ae 100644 --- a/packages/core/src/components/menu-category/menu-category.tsx +++ b/packages/core/src/components/menu-category/menu-category.tsx @@ -274,7 +274,7 @@ export class MenuCategory { }} > - + {this.label} diff --git a/packages/core/src/components/menu-item/menu-item.tsx b/packages/core/src/components/menu-item/menu-item.tsx index e5c3573a88..328bcc5575 100644 --- a/packages/core/src/components/menu-item/menu-item.tsx +++ b/packages/core/src/components/menu-item/menu-item.tsx @@ -76,11 +76,11 @@ export class MenuItem { @State() tooltip?: string; @State() menuExpanded: boolean = false; - private buttonRef = makeRef(); + private readonly buttonRef = makeRef(); private isHostedInsideCategory = false; - private menuExpandedDisposer: Disposable; + private menuExpandedDisposer?: Disposable; - private observer: MutationObserver = createMutationObserver(() => { + private readonly observer: MutationObserver = createMutationObserver(() => { this.setTooltip(); }); @@ -91,7 +91,7 @@ export class MenuItem { this.onIconChange(); this.onTabIconChange(); - this.menuExpanded = menuController.nativeElement.expand; + this.menuExpanded = menuController.nativeElement?.expand || false; this.menuExpandedDisposer = menuController.expandChange.on( (expand) => (this.menuExpanded = expand) ); @@ -102,7 +102,7 @@ export class MenuItem { } setTooltip() { - this.tooltip = this.label ?? this.hostElement.textContent; + this.tooltip = this.label ?? this.hostElement.textContent ?? undefined; } connectedCallback() { @@ -172,7 +172,6 @@ export class MenuItem {