SaSelection Library

SaSelection is a standalone Angular component for customizable selection controls like switches, checkboxes, and radio buttons.

Installation

To install the library, use npm:

npm install sa-selection

Usage

Import SaSelectionComponent into your component:

import { SaSelectionComponent } from 'sa-selection';

Then, use it in your template:

<sa-selection name="example" type="switch" color="success" size="l">Toggle</sa-selection>

Default Configuration

You can set a default configuration by providing SaSelectionService in your app.config.ts (Angular 18+) or app.module.ts (pre-Angular 18):

import { SaSelectionService } from 'sa-selection';
import { SelectionConfig } from 'sa-selection/interfaces';

{
  provide: SaSelectionService,
  useValue: {
    config: {
      colorOf:'error-500'
    } as SelectionConfig,
  },
},

Service Configuration

SaSelection uses an injectable service to manage default configurations:

import { Injectable } from '@angular/core';
import { SelectionConfig } from 'sa-selection/interfaces';

@Injectable({
  providedIn: 'root',
})
export class SaSelectionService {
  config: SelectionConfig = {
    type: 'switch',
    color: 'success',
    colorOf: 'neutral-200',
    disabledOnLoading: false,
    circle: false, // used for checkbox shape
    size: 'l',
    extraClass: '',
  };
}

Interface and Types

export interface SelectionConfig {
  type: Type;
  color: string;
  colorOf: string;
  circle: boolean;
  disabledOnLoading: boolean;
  size: Size;
  extraClass: string;
}

export type Type = 'switch' | 'checkbox' | 'radio';
export type Size = 'l' | 's' | 'xl' | 'xxl';

Custom Colors

To add new colors, define them in your global styles or inline in an element:

--customcolor-500: #ff0094;

Example usage:

<sa-selection name="s" style="--customcolor-500:#ff0094" color="customcolor" size="s">
  Custom Color Example
</sa-selection>

Available Colors

| Name | Hex Code | |------------|----------| | Primary | #00bc71 | | Warning | #ff9500 | | Success | #007aff | | Secondary | #fcd63a | | Error | #ff3b30 |

Examples

<sa-selection name="medium">Default Selection</sa-selection>
<sa-selection name="xl" size="xl">Large Selection</sa-selection>
<sa-selection [loading]="true" [ngModel]="true" name="xxl" size="xxl">Loading Example</sa-selection>
<sa-selection name="disabled" size="xxl" [disabled]="true">Disabled Selection</sa-selection>

For checkboxes:

<sa-selection type="checkbox" name="checkbox1">Checkbox Example</sa-selection>

For radio buttons:

<sa-selection type="radio" name="radioGroup" radio="option1">Option 1</sa-selection>
<sa-selection type="radio" name="radioGroup" radio="option2">Option 2</sa-selection>