@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:

npm config set strict-ssl false

Then you can install the library:

npm add @asml-angular/material

Build

To build the project, run:

ng build

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

ng 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:

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

Migration Guides

1. Update from Angular Flex-Layout to Tailwind classes

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

2. Use Angular Control Flow

   ng generate @angular/core:control-flow

3. Migrate to Standalone Components

   ng 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

<type>(<scope>): <short summary>
│       │             │
│       │             └─⫸ Summary in present tense. Not capitalized. No period at the end.
│       │
│       └─⫸ Commit Scope: animations|bazel|benchpress|common|compiler|compiler-cli|core|
│                          elements|forms|http|language-service|localize|platform-browser|
│                          platform-browser-dynamic|platform-server|router|service-worker|
│                          upgrade|zone.js|packaging|changelog|docs-infra|migrations|
│                          devtools
│
└─⫸ 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:

npm i @asml-angular/material-2

Step 2

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

{
  "styles": [
    {
      "input": "./node_modules/@asml-angular/material-2/themes/_index.scss",
      "inject": true
    },
    {
      "input": "./node_modules/@asml-angular/material-2/themes/_theming.scss",
      "inject": true
    },
    {
      "input": "./node_modules/@asml-angular/material-2/themes/old_theme.scss",
      "inject": true
    },
    "src/styles.scss"
  ],
  "stylePreprocessorOptions": {
    "includePaths": [
      "node_modules",
      "src/styles" // <- other styles
    ]
  }
}

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!