@vector-crystal-web/shared

Shared library for the Crystal Design System. Provides Angular module bundles, types, constants, and utilities (icons, CSS) for use across apps and other Crystal libraries.

Features

| Category | Exports | | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Modules | CRYSTAL_BASIC_MODULES, CRYSTAL_FORM_MODULES, CRYSTAL_UI_MODULES, CRYSTAL_FULL_MODULES, CRYSTAL_CORE_MODULES, CRYSTAL_FORM_ONLY_MODULES, CRYSTAL_UI_ONLY_MODULES, CRYSTAL_FEEDBACK_ONLY_MODULES, CRYSTAL_AVATAR_ONLY_MODULES | | Types | ListItem, ComponentSize | | Constants | BUTTON_TYPES, COMPONENT_SIZES, COMPONENT_STATES, DIRECTIONS, POSITIONS, BREAKPOINTS, Z_INDEX, ANIMATION_DURATIONS, ANIMATION_EASINGS | | Utils | CrystalIconUtils, CrystalCssUtils |

Use the module bundles in standalone components; use types and constants for consistent APIs; use utils for icons (Phosphor) and PrimeFlex class composition.

Usage

// Module bundles (standalone imports)
import { CRYSTAL_BASIC_MODULES } from '@vector-crystal-web/shared';

@Component({
  standalone: true,
  imports: [CRYSTAL_BASIC_MODULES],
  template: `...`,
})
export class MyComponent {}

// Types and constants
import { ListItem, ComponentSize } from '@vector-crystal-web/shared';
import { COMPONENT_SIZES, BUTTON_TYPES } from '@vector-crystal-web/shared';

const item: ListItem = { name: 'Option', code: '1' };
const size: ComponentSize = COMPONENT_SIZES.MEDIUM;

// Utils (icons, CSS)
import { CrystalIconUtils, CrystalCssUtils } from '@vector-crystal-web/shared';

const iconClass = CrystalIconUtils.getIconClass('check-circle', 'bold');
const classes = CrystalCssUtils.combineClasses('flex', 'justify-center', 'gap-2');

Generated with Nx.