Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions projects/element-ng/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
# Element Angular

The core Angular component library implementing the Siemens Design Language for Smart
Infrastructure applications. Provides 80+ production-ready UI components built with
Angular signals, standalone components, and OnPush change detection.

## Usage

Add the library to your project dependencies:

```sh
npm install --save @siemens/element-ng
```

Also install the required peer dependencies:

```sh
npm install --save @siemens/element-theme @siemens/element-icons @siemens/element-translate-ng @angular/cdk
```

Apply the global theme in your main stylesheet:

```scss
@use '@siemens/element-theme/theme';
```

Import individual components directly in your standalone components:

```ts
import { SiAccordionComponent } from '@siemens/element-ng/accordion';
import { SiButtonComponent } from '@siemens/element-ng/button';
import { SiModalService } from '@siemens/element-ng/modal';

@Component({
selector: 'app-example',
imports: [SiAccordionComponent, SiButtonComponent],
templateUrl: './example.component.html'
})
export class ExampleComponent {}
```

Each component is available as a separate entry point under `@siemens/element-ng/<component>`.
Browse the full component catalog at [element.siemens.io](https://element.siemens.io).

### Running unit tests

Run `npm run lib:test` to run the unit tests via
[Karma](https://karma-runner.github.io).

## License

The following applies for code and documentation of the git repository,
unless explicitly mentioned.

Copyright (c) Siemens 2016 - 2026
Comment thread
vineethwilson15 marked this conversation as resolved.

MIT, see [LICENSE.md](LICENSE.md).
54 changes: 54 additions & 0 deletions projects/element-theme/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
# Element Theme

The CSS/SCSS theme package for Siemens Element, implementing the Siemens Design Language.

## Usage

To use the Element Theme in your project, add it to your dependencies by running:

```sh
npm install --save @siemens/element-theme
```

### Add the theme to your Angular application

Import the theme in your application's global stylesheet (e.g. `src/styles.scss`):

```scss
@use '@siemens/element-theme/theme';
```

This imports Bootstrap-based layout utilities, all component styles, and the default
Siemens Element color theme.

### Using SCSS variables and mixins

The package also exports SCSS variables and mixins that you can use in your own styles:

```scss
@use '@siemens/element-theme/src/styles/variables';

.my-component {
color: variables.$element-text-primary;
background-color: variables.$element-base-1;
}
```

### Custom theming

To apply a different theme variant, configure the theme before importing:

```scss
@use '@siemens/element-theme/theme' with (
$element-theme-default: 'element-dark'
);
```

## License

The following applies for code and documentation of the git repository,
unless explicitly mentioned.

Copyright (c) Siemens 2016 - 2026

MIT, see [LICENSE.md](LICENSE.md).
65 changes: 65 additions & 0 deletions projects/element-translate-cli/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
# Element Translate CLI

The CLI tool for the Siemens Element translation abstraction layer. It extracts
translatable keys from compiled Element library files and generates a TypeScript
keys interface and a default translations JSON file.

## Usage

Install the CLI as part of the `@siemens/element-translate-ng` workflow:

```sh
npm install --save-dev @siemens/element-translate-cli
```

### Extract translatable keys

Run the extraction after building your library:

```sh
npx update-translatable-keys
```

By default this reads the configuration from `element-translate.conf.json`. To use a
different config file, pass its path as the first argument:

```sh
npx update-translatable-keys path/to/my-config.json
```

### Configuration

Create an `element-translate.conf.json` file in your project root:

```json
{
"files": "dist/@siemens/**/fesm2022/**/*.mjs",
"configs": [
{
"name": "element",
"locationPrefix": "projects/element-ng",
"keysFile": "projects/element-ng/translate/si-translatable-keys.interface.ts",
"keysInterfaceName": "SiTranslatableKeys",
"messagesFile": "dist/@siemens/element-ng/template-i18n.json"
}
]
}
```

| Field | Description |
| ------------------- | ------------------------------------------------------- |
| `files` | Glob pattern for compiled library files to scan |
| `name` | Identifier for this config entry |
| `locationPrefix` | Source path prefix used to match extraction locations |
| `keysFile` | Output path for the generated TypeScript keys interface |
| `keysInterfaceName` | Name of the generated TypeScript interface |
| `messagesFile` | Output path for the generated default translations JSON |

## License

The following applies for code and documentation of the git repository,
unless explicitly mentioned.

Copyright (c) Siemens 2016 - 2026

MIT, see [LICENSE.md](LICENSE.md).