Components
The @smartsoft001/angular package ships 57 smart-* components. Each page shows the component's API, an executed usage example with the template and the TypeScript you write, and the live Storybook story.
| Component | Description |
|---|---|
accordion | Accordion base component API for extending in custom implementations. |
action-panel | Action Panel component API with InjectionToken pattern for custom implementations. |
alert | Alert (confirm dialog) component API with InjectionToken pattern, and the AlertService that opens it from code. |
avatar | Avatar component API with InjectionToken pattern for custom implementations. |
badge | Badge component API with InjectionToken pattern for custom implementations. |
breadcrumbs | Breadcrumbs component API with InjectionToken pattern, configurable separators (chevron/slash/arrow) and four layout variants. |
button | Button component API with InjectionToken pattern for custom implementations. |
button-group | ButtonGroup component API with InjectionToken pattern for custom implementations. |
calendar | Calendar component API with InjectionToken pattern for custom implementations. |
card | Card component API, DI token, and base class for @smartsoft001/angular |
card-heading | Card heading component API with InjectionToken pattern for custom implementations. |
command-palette | Command Palette component API with InjectionToken pattern for custom implementations. |
container | Container layout component API, DI token, and base class for @smartsoft001/angular |
date-edit | Date edit component API and usage patterns for @smartsoft001/angular. Includes ready-to-use <smart-date-edit> and extensible base class. |
date-range | Date range picker component API and usage patterns for @smartsoft001/angular. Includes ready-to-use <smart-date-range> and extensible base classes. |
description-list | Description list component API with InjectionToken pattern for custom implementations. |
detail | Detail field component with InjectionToken pattern for per-field substitution. |
details | Details component API with InjectionToken pattern for custom implementations. Renders a list of model fields via <smart-detail>. |
divider | Divider component API with InjectionToken pattern for custom implementations. |
drawer | Drawer component API with InjectionToken pattern for custom implementations. |
dropdown | Dropdown component API with InjectionToken pattern for custom implementations. |
empty-state | Empty State component API with InjectionToken pattern for custom implementations. |
export | A download button that hands the bound value to a handler when clicked, disabled while there is nothing to export. |
feed | Feed (timeline/activity) component API with InjectionToken pattern for custom implementations. |
form | Form component API with InjectionToken pattern for custom implementations. Renders a reactive form with dynamic inputs based on model decorators. |
grid-list | Grid list component API with InjectionToken pattern for custom implementations. |
icon | Icon component API, IconName glyph set, template override, and the styled Preset variation for @smartsoft001/angular |
import | An upload button that opens the native file dialog and emits the chosen file, with an accept filter for the dialog. |
info | Info popover component API with InjectionToken pattern for custom implementations. |
input | Input field component with InjectionToken pattern for per-FieldType substitution. |
list | List component API with InjectionToken map pattern for custom implementations per mode (desktop/mobile/masonryGrid). |
list-container | ListContainer layout component API with InjectionToken pattern for custom implementations. |
loader | A spinner that shows while data loads, sized and coloured through inputs, with a preset variation and a token to swap the implementation. |
media-object | MediaObject layout component API with InjectionToken pattern for custom implementations. |
modal | Modal component API with InjectionToken pattern for custom implementations. |
multi-column-layout | Multi-column layout component API with InjectionToken pattern for custom implementations. |
navbar | Navbar component API with InjectionToken pattern for custom implementations. |
notification | Notification component API with InjectionToken pattern for custom implementations. |
page | Page component API with map-based variant dispatch and TemplateRef slots. |
page-heading | Page heading component API with InjectionToken pattern for custom implementations. |
paging | Paging component API with InjectionToken pattern for custom implementations. |
password-strength | Password-strength indicator component API with InjectionToken pattern for custom implementations. |
progress-bars | Progress indicators with step list (8 visual variants) and percentage progress bar mode. InjectionToken pattern for custom implementations. |
searchbar | Searchbar component API with InjectionToken pattern for custom implementations. |
section-heading | Section heading component API with InjectionToken pattern for custom implementations. |
select-menu | Select menu component API with InjectionToken pattern for custom implementations. |
sidebar-layout | Sidebar layout component API with InjectionToken pattern for custom implementations. |
sidebar-navigation | Sidebar navigation component API with logo, expandable sections and profile footer using InjectionToken pattern. |
sign-in-form | Sign-in / sign-up form component API with InjectionToken pattern for custom implementations. |
stacked-layout | Stacked layout component API with InjectionToken pattern for custom implementations. |
stacked-list | Stacked list component API with InjectionToken pattern for custom implementations. |
stats | Stats component API with InjectionToken pattern for custom implementations. |
table | Table component API with InjectionToken pattern for custom implementations. |
tabs | Tabs component API with InjectionToken pattern for custom implementations. |
textarea | Textarea component API with InjectionToken pattern for custom implementations. |
toggle | Toggle component API with InjectionToken pattern for custom implementations. |
vertical-navigation | Vertical navigation component API with InjectionToken pattern for custom implementations. |