MS UI Library

A comprehensive Angular UI component library for the MS Design System.

Installation

npm install @ms/ui-library

Usage

Import the Module

import { MsDesignSystemModule } from '@ms/ui-library';

@NgModule({
  imports: [MsDesignSystemModule],
  // ...
})
export class AppModule { }

Or use Standalone Components

import { MsButton, MsDropdown } from '@ms/ui-library';

@Component({
  selector: 'app-example',
  imports: [MsButton, MsDropdown],
  template: `
    <ms-button variant="primary" size="md">Click me</ms-button>
    <ms-dropdown></ms-dropdown>
  `
})
export class ExampleComponent { }

Using Providers (Recommended for Angular 17+)

import { provideMsDesignSystem } from '@ms/ui-library';

export const appConfig: ApplicationConfig = {
  providers: [
    provideMsDesignSystem(),
    // other providers...
  ]
};

Components

MsButton

A versatile button component with multiple variants and sizes.

Properties:

• variant: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link' | 'subtle' | 'default'
• size: 'sm' | 'md' | 'lg'
• type: 'button' | 'submit' | 'reset'
• disabled: boolean
• block: boolean
• icon: string (CSS class for icon)
• iconPosition: 'prefix' | 'suffix'
• iconOnly: boolean

Example:

<ms-button 
  variant="primary" 
  size="md" 
  icon="fa fa-plus" 
  iconPosition="prefix">
  Add Item
</ms-button>

MsDropdown

A dropdown component for creating interactive menus.

Example:

<ms-dropdown></ms-dropdown>

Styling

The library includes comprehensive SCSS styles. Import the styles in your angular.json:

{
  "styles": [
    "node_modules/@ms/ui-library/styles.scss"
  ]
}

Development

This library is built with Angular 21 and follows modern Angular practices including:

• Standalone components
• Modern SCSS with @use syntax
• TypeScript strict mode
• Comprehensive type definitions

License

MIT