@asml-angular/material

This project provides Angular components that follow the Enterprise Design System and Material guidelines. The resulting library is published under the @asml-angular/material package in ASML Mirai Artifactory .

---

Table of Contents

1. Usage
2. Build
3. Development Conventions
4. Creating a New Component
5. Migration Guides
6. Changelog and Commit Guidelines
7. Deployments
8. How to Include in Other Projects

---

Usage

NPM

Before installing, ensure your npm is configured correctly:

1npm config set strict-ssl false

Then you can install the library:

1npm add @asml-angular/material

---

Build

To build the project, run:

1ng build

The build artifacts will be stored in the dist/ directory.
Use the --prod flag for a production build:

1ng build --prod

---

Development Conventions

Note on Sass Partials:
Files prefixed with an underscore, like _index.scss, are recognized by Sass as partial files. Partial files are not compiled into standalone CSS but are meant to be imported into other Sass files.

---

Creating a New Component

Use the following script to create a new component within @asml-angular/material. For example, to create an atoms component named slide-toggle:

1node tools/create-component.js @asml-angular/material atoms slide-toggle

---

Migration Guides

1. Update from Angular Flex-Layout to Tailwind classes

   1npx @ngnomads/ngflex2tailwind -r false -p ./projects/asml-angular/material-2/src/lib/atoms/filter-button

2. Use Angular Control Flow

   1ng generate @angular/core:control-flow

3. Migrate to Standalone Components

   1ng generate @angular/core:standalone

---

Changelog and Commit Guidelines

We encourage granular commits for clear changelog generation. Please follow Angular’s Commit Guidelines and use Conventional Commits.

Commit Message Format

1<type>(<scope>): <short summary>
2│       │             │
3│       │             └─⫸ Summary in present tense. Not capitalized. No period at the end.
4│       │
5│       └─⫸ Commit Scope: animations|bazel|benchpress|common|compiler|compiler-cli|core|
6│                          elements|forms|http|language-service|localize|platform-browser|
7│                          platform-browser-dynamic|platform-server|router|service-worker|
8│                          upgrade|zone.js|packaging|changelog|docs-infra|migrations|
9│                          devtools
10│
11└─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|test

Examples

• feat(aal-input-currency): add new feature
• fix(aal-input-currency): fix issue
• refactor(aal-input-currency): refactor code

Tip: Commit messages should be imperative, for example, "fix input issue" rather than "fixed input issue".

---

Deployments

Currently, all released versions are hosted on GitLab Pages:

• Storybook:
  Storybook URL

• Compodoc:
  Compodoc URL

• Artifacts:
  Artifactory URL

---

How to Include in Other Projects

Prerequisite: Properly configure the ASML Mirai JFrog Artifactory settings in your .npmrc.

Step 1

Install the library:

1npm i @asml-angular/material-2

Step 2

In your angular.json, within your project’s build options (<project> -> architect -> build -> options), add the following:

1{
2  "styles": [
3    {
4      "input": "./node_modules/@asml-angular/material-2/themes/_index.scss",
5      "inject": true
6    },
7    {
8      "input": "./node_modules/@asml-angular/material-2/themes/_theming.scss",
9      "inject": true
10    },
11    {
12      "input": "./node_modules/@asml-angular/material-2/themes/old_theme.scss",
13      "inject": true
14    },
15    "src/styles.scss"
16  ],
17  "stylePreprocessorOptions": {
18    "includePaths": [
19      "node_modules",
20      "src/styles" // <- other styles
21    ]
22  }
23}

Once configured, you can refer to the Storybook to discover the available components and their usage. If you require a component that isn’t provided or need additional help, reach out to:

• @RGBA Developers
• Or consult your UX Designer to align with our team.

---

Questions or Feedback?
Feel free to open an issue or contact the maintainers if you need further assistance. We welcome contributions and improvements!