@ikilote/magma

Magma is a component library for my personal projects, because I don't want to copy/paste.

It will evolve mainly according to my projects. But people want to use it and help, no worries.

Coverage

Included in Magma

Components

• Block
• Color picker
• Context-menu
  • List in options
  • Circle in options
• Contrib calendar
• Dialog
• Info-message
• Input
  • Checkbox
  • Color
  • Date
  • Number
  • Password
  • Radio
  • Range
  • Select
  • Text
  • Textarea
• Light-dark
• Loader
• Loader-block
• Message
• Paginate
• Progress
• Spinner
• Table
• Tabs
• Walkthrough

Services

• FormBuilderExtended
• Logger

Pipes

• classList
• fileSize
• math
• numFormat
• repeatFor

Directive

• Click Enter
• Click Outside
• Limit-focus
• ngInit
• ngModelChange debounced
• Sortable
• Stop Propagation
• Tooltip
• Textarea autosize

Utils

• Clipboard
• Coercion
• Cookies
• Date
• DOM
• Email
• Enum
• File
• Json
• Number
• Object
• Subscriptions

Styles

• Buttons
• Links
• Input
• Grid
  • Responsive
• Palette

Demo

See : Demo

For start

Install in project:

npm i @ikilote/magma colorjs.io ng-select2-component

Required in package.json

• @angular/common: ^20.0.0
• @angular/core: ^20.0.0
• @angular/cdk: ^20.0.0
• colorjs.io: ^0.5.2
• ng-select2-component: ^17.2.7

Add in style.css

@import '@angular/cdk/overlay-prebuilt.css';

@import '../node_modules/@ikilote/magma/assets/styles/font-icon.css';
@import '../node_modules/@ikilote/magma/assets/styles/css-var.css';
@import '../node_modules/@ikilote/magma/assets/styles/style.css';

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Publishing the library

npm run build:lib
npm run publish:lib

Update Demo

npm run build:demo

Test

Linux

Required for start test

export CHROME_BIN=chromium

test for lib

npm run test:lib

License

Like Angular, this module is released under the permissive MIT license. Your contributions are always welcome.