@enterprise-components/material

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