Controls library

Controls library

Controls library contains theme and custom controls created by AVASpace core team.

Theme

Controls library contains styling and themes for the AvaSpace platform. Styles are located in scss folder, from there it is bundled into one file and distributed into applications.

Controls

Core team develops controls to help other developers to faster develop their apps.

Controls are defined in sub modules:

• CA controls - Controls that are loading content based on custom attributes used in dynamic pages
• controls - contains custom controls
• form-controls - contains custom form controls
• layout-controls - contains layout controls

All controls are shown in Storybook.

CA controls

Custom attributes controls:

• angle down - shows simple angle down image
• benefit panel - It is composite control from sub header and list panel
• column feature panel - Control is created from sub header control in column row
• column number panel - Column number panel is control which displays numbers in columns
• feature list - Feature list is component based on list panel, but uses alternating image and text
• feature panel - Feature panel is composite control composed from feature list and list panel
• header - Component to show header with image and text
• language switcher - shows language selector
• list panel - Displays list of items
• opinion list - Displays list of data in columns
• panel title - Component that show simple title in composite controls
• single link - Simple controls that shows link
• single item - Simple controls that shows image and text, but it is not a header
• sub header - Shows sub header with image and text
• video banner - shows video banner

Controls

Custom controls:

• Avatar picture – control containing circular picture
• Breadcrumb - show breadcrumb - in development
• Captcha policy control – control which adds privacy policy for Google recaptcha
• Card component - Card component
• Chip list control – composite control chip control
• Chip list autocomplete control – composite control with autocomplete and chip control
• Circle progress control – control containing circular progress control
• Composite tree control – composite control with tree view, language control and dynamic control
• Composite tree control page – composite control with tree view, language control and dynamic control in page layout
• Cookies - Component containing cookie bar and service
• Data toolbar - Component for table and card components showing filtering, delete, export etc. buttons
• Dialog - Dialog component
• Dynamic form control – simple dynamic form control used with tree view
• File download badge
• File picker control – control for file picker
• Grid control – control provides grid functionality; it is composite control with pagination
• Image file picker – control for image picker with image cropper
• Infobox - Component that shows simple information box on page with theme colors
• Language select control – control for language selection in list
• Loader control – control to display spinner loader
• Media carousel - Control for media carousel
• Pagination – control wrapper for Angular material pagination
• Platform logo - Component to show logo
• Progress bar - Component that show progress bar
• Progress scale - Component that shows progress via radio buttons, usage in data forms
• Richtext editor - Richtext editor
• Search category filter control – composite control for category filter component
• Search field control – simple control with search field
• Slider - Slider component
• Tooltip - Tooltip component
• Tree view – tree view control
• Comment - page component show comments

Form controls

Form controls are composite controls which consists of label and component, they provide validation, hint and placeholder texts etc.

Form controls:

• Checkbox
• Date picker
• Drag drop file upload
• Image field
• Label field
• Input field
• JSON object field
• Select field
• Text area field
• Radio group
• Switch

All form controls have same base class defining these common properties:

Name	Type	Default value	Description
placeholderText	AsolLocalizedValue<string> or string	empty	Localizable placeholder text
hintText	AsolLocalizedValue<string> or string	empty	Localizable hint text
localized	boolean	false	Flag if texts should be localized
labelKey	string	empty	Translation key for label control
transKey	string	empty	Unique translation key for translation file
labelText	AsolLocalizedValue<string> or string	empty	Localizable label text
labelTextStyle	undefined		Style for label text
placeholderKey	string	empty	Translation key for placeholder
hintKey	string	empty	Translation key for hint
formControlName	string	empty	FormControlName in FormGroup
locale	string	empty	Locale define which is used in combination with localized
isDisabled	boolean	false	Flag if component is disabled
isRequired	boolean	false	Flag if component is required
tooltipText	string	empty	Text shown in tooltip
tooltipPosition	TooltipPosition	right	position of the tooltip in label

Layout controls

Layout controls contains:

• CA page layout - control to display dynamic pages based on custom attributes
• footer - unified footer component
• Page header - Unified page header element with back button

Utilities

Controls library also contains these utilities:

• Scroll int view function - Scrolls the scrollable parent to show given element

Pipes

• breakpoint - return AsolBreakpoint type of actual screen width
  • connected to the AsolBreakpointService and part of AsolPlatformControlsModule

Constants

• BOOTSTRAP_BREAKPOINTS - breakpoints derived from Bootstrap