Dynastech Identity

Install

yarn add @angular-mdc/web @dynastech/angular-mdc @dynastech/identity

Import Module

import { DgIdentityModule } from '@dynastech/identity';

@NgModule({
  imports: [DgIdentityModule]
})
export class AppModule { }

Import Style

@use '~perfect-scrollbar/css/perfect-scrollbar';

@use '~material-components-web/dist/material-components-web';

@use '~@angular-mdc/theme/material';

@use '~@dynastech/angular-mdc/themes/mdc';

Avatar Usage

Avatar Directive

<img dgIdentityAvatar [avatarId]="avatarId" [colorReversed]="colorReversed">

Chip Selector Usage

Chip Selector Component

<dg-identity-chip-selector [label]="label" [selectMutiple]="selectMutiple" [readonly]="readonly" [(selectedItems)]="selectedItems">
  <dg-identity-chip-selector-list title="organization" kinds="organization"></dg-identity-chip-selector-list>
  <dg-identity-chip-selector-list title="user" kinds="user"></dg-identity-chip-selector-list>
  <dg-identity-chip-selector-list title="post" kinds="post"></dg-identity-chip-selector-list>
  <dg-identity-chip-selector-list title="group" kinds="group"></dg-identity-chip-selector-list>
  <mdc-icon dgIdentityChipSelectorIcon [trailing] [svgIcon]="svgIcon"></mdc-icon>
</dg-identity-chip-selector>

Smart Selector Usage

Smart Selector Component

<dg-identity-smart-selector [selectMutiple]="selectMutiple" [selectedHidden]="selectedHidden" [(selectedItems)]="selectedItems">
  <dg-identity-smart-selector-list title="organization and user" kinds="organization,user" selectableKinds="user"></dg-identity-smart-selector-list>
  <dg-identity-smart-selector-list title="organization" kinds="organization"></dg-identity-smart-selector-list>
  <dg-identity-smart-selector-list title="post" kinds="post"></dg-identity-smart-selector-list>
  <dg-identity-smart-selector-list title="group" kinds="group"></dg-identity-smart-selector-list>
  <dg-identity-smart-selector-search kinds="organization,user,post,group"></dg-identity-smart-selector-search>
</dg-identity-smart-selector>