Aax-picker NPM

Aax Picker

Aax Picker is a simple library for a modal selector of colours or icons.

System Requirements

This project was generated with Angular CLI version 7.3.3.

Installation

Install with npm:

npm install aax-picker

Note: this project is written in TypeScript and includes type definitions in the package.json file. This means that if you want to use it from TypeScript, you don't need to install a separate @types module.

Depends on

Default Icons (Material Icons):

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Angular Modules:

@angular/animations
@angular/flex-layout
@angular/material
@angular/cdk

Types

Colour:

A simple object with a name, a foreground colour (used in css as color) and background colour (used in css as background-color).

export interface Colour {
  name: string;
  background: string;
  foreground: string;
}

Icon:

A selection of icon objects grouped in named groups. Icon id will be used in a material icon element and icons can be searched by their tags strings. The icon id and description are added to the tags and so will be searched on as well. Separated to allow a material id and description to be different and tags separate to allow for search text that is not present in description or id.

export interface Icon {
  id: string;
  description?: string; // Replaced with id if absent
  tags?: string; // Replaced with id if absent
}

export interface IconGroup {
  name: string;
  icons: Icon[];
}

Example

Colour Picker:

Component:

import { Colour, PickerType } from 'aax-picker';

public PickerTypes = PickerType;
public colour: Colour;

usedColours: Colour[] = [
  {name: 'Mulberry', background: '#cb498b', foreground: '#ffffff'},
  {name: 'Pearl', background: '#d9dddc', foreground: '#2f394d'},
];

Template:

<aax-picker [usedColours]="usedColours"
            [pickerType]="PickerTypes.colour"
            [selectedColour]="colour"
            (colourSelected)="colour=$event">
</aax-picker>

Stackblitz Colour Picker Example

Icon Picker:

Component:

import { Icon, PickerType } from 'aax-picker';

public PickerTypes = PickerType;
public icon: Icon;

usedIcons: Icon[] = [
  {id: 'backup'}, {id: 'book'}, {id: 'bookmark'},
];

Template:

<aax-picker [usedIcons]="usedIcons"
            [pickerType]="PickerTypes.icon"
            [selectedIcon]="icon"
            (iconSelected)="icon=$event">
</aax-picker>

Stackblitz Icon Picker Example