lib_ExtendedComponents_ui_ngx

Set of shared components you can use in your projects :

• Grid : Display & Edit tabular data
• Chips : display / remove tags in input fields

For more technical informations : documentation

• Installation
• Mobile Library
  • Shared Actions
    • agGridUpdateRows
    • cardIO_sa
    • ZXing_sa
  • Shared Components
    • agGrid
    • agGrid_CsvDownload
    • agGrid_CsvDownload_Row
    • angularxQRCode
    • cardIO_sc
    • DropZoneComponent
    • materialDatePicker
    • materialSlider
    • ngSelect
    • ngxTagInput
    • tinyMce

Installation

1. In your Convertigo Studio click on to import a project in the treeview

2. In the import wizard

   

   paste the text below into the Project remote URL field:

   Usage	Click the copy button at the end of the line
   To contribute	lib_ExtendedComponents_ui_ngx=git@github.com:convertigo/c8oprj-lib-extended-components-ui-ngx.git:branch=8.3.0.0
   To simply use	lib_ExtendedComponents_ui_ngx=git@github.com:convertigo/c8oprj-lib-extended-components-ui-ngx/archive/8.3.0.0.zip

3. Click the Finish button. This will automatically import the lib_ExtendedComponents_ui_ngx project

Mobile Library

Describes the mobile application global properties

Shared Actions

agGridUpdateRows

agGrid Update Rows, must be called in a GetRows Control

variables

name	comment
agGridEvent	map agGridEvent to the TS 'event' parameter from the GetRows Control
data	data must receive a JSON with a RowData key and an optional ColDef key

cardIO_sa

CardIO SharedAction

variables

name	comment
ccard_topic	Publish Topic name to use with a Subscribe component. Optional
ccn	Input tag identifier to set Card Number value to. Optional
cexp	Input tag identifier to set Expiry date value (MM/YY) to. Optional
cvv	Input tag identifier to set cryptogram value (123) to. Optional
local_ccard_suffix	Suffix for local page variable in case of multiple CardIO plugin instances. Default: ''. Optional
options	CardIO plugin options. See https://github.com/card-io/card.io-Cordova-Plugin

ZXing_sa

ZXing SharedAction

variables

name	comment
file	File object as Array (if not provided from an input type file).
imgId	Img tag identifier to output image file. Optional
isOutputEvent	Publish scan result or not to the topic event. Default: true.
isOutputGlobal	Insert or not the scan result in a global page variable. The variable is composed of 'zxing:' + topic + ref variables. Default: true.
ref	In case of multiple ZXing package instances, set the variable to different values to distinguish the Publish data event and/or the local page variable. Default: ''. Optional
resultId	Input tag identifier to set value to. Optional
topic	Publish Topic name to use with a Subscribe component. Optional
type	Scan from file or video. Default: 'file'
videoId	Video tag identifier to output video camera. Default: 'video'. Optional

Shared Components

agGrid

This Shared component wraps the ag-grid component. Most of the properties and events are supported. Please see https://www.ag-grid.com/ for more details.

variables

name	comment
accessibility	boolean: true (default) or false
ariaLabel
autoSizeColumns
class	One of the themes provided here : https://www.ag-grid.com/javascript-grid-themes-provided/ Also be shure to add the theme in the Theme object as : @import "../../node_modules/ag-grid-community/dist/styles/ag-theme-balham-dark/sass/ag-theme-balham-dark.scss";
columnDefs	Array of columnDef {headerName: 'headerName', field: 'fieldName'} objects
customLocaleText	Add or surcharge Grid localisation. You have to provide: { [key_lang: string]: { [key: string]: string } } => A map of key_lang->object pairs for adding or surcharging localising text within the grid. The default value is an empty object.
defaultColDef	default is {hide: false, editable: true, sortable: true, resizable: true, filter: true, checkboxSelection: false, singleClickEdit: false}
height	height is 'auto' or value in % or px
id	An Optional ID
localeText	Define the Grid localisation. You can provide: { [key: string]: string } => A map of key->value pairs for localising text within the grid. 'fr' or 'fr-FR' => A string representing the translation language (BCP47 Tag or Sub tag) The default language of the grid is American English.
maxBlocksInCache	How many blocks to keep in the store. Default is no limit, so every requested block is kept
overlayLoadingTemplate
overlayNoRowsTemplate
pagination	boolean: true (default) or false
paginationPageSize	integer: 20 by default
paginationPageSizeSelector	array | boolean: [20,50,100] by default. If 'paginationPageSize' has a value not in the default array, it is automatically added.
rowData	Array of row { fieldName1: 'value1', fieldName2: 'value2', fieldName3: true, ...} objects
rowDeselection	boolean: true (default) or false
rowHeight	Height of the row in pixels as a string
rowModelType	Row model type
rowSelection	string: 'single' (default) or 'multiple'
showCsvDownload	If set to true will display a side bar menu where user can click a download button to download the grid content as a CSV file.
showCsvDownloadAlignment	If 'showCsvDownload' is set to true, you can define the CSV button horizontal or vertical alignment to 'start', 'center' or 'end'.
showCsvDownloadPosition	If 'showCsvDownload' is set to true, you can define the CSV button position to 'top', 'bottom', 'left', 'right', 'both_row' or 'both_col' relative to the Grid.
suppressCellSelection
suppressRowClickSelection
width	width value in % or px
wrapperClass	Height of the row in pixels as a string

events

name	comment
CellClicked	Fired when a cell is clicked. Data will be the agGrid event
CellValueChanged	Fired when A Cell is edited changed. Data will be the agGrid event
GetRows	Fire when the RowModelType is 'infinite'. Excepts fromatted data into a agGridUpdateRows action
GridReady	Fired when the Grid is ready. Data will be the agGrid event
RowClicked	Fired when a row is clicked. Data will be the agGrid event
RowDataChanged	Fired when Row data changed. Data will be the agGrid event
RowDoubleClicked	Fired when A Cell is edited changed. Data will be the agGrid event
RowSelected	Fired when a row is selected. Data will be the agGrid event
SelectionChanged	Fired when selectionChange. Data will be the agGrid event
SortChanged	Fired when a a column is sorted. Data will be the agGrid event

agGrid_CsvDownload

variables

name	comment
ag_grid

agGrid_CsvDownload_Row

variables

name	comment
ag_grid
alignment

angularxQRCode

A QR Code Reader using Full JS Algorithm

variables

name	comment
allowEmptyString	Allow qrdata to be an empty string
alt	HTML alt attribute (supported by img, url)
ariaLabel	HTML aria-label attribute (supported by canvas, img, url)
colordark	RGBA color, color of dark module (foreground)
colorlight	RGBA color, color of light module (background)
cssClass	CSS Class
elementType	'canvas', 'svg', 'img', 'url' (alias for 'img')
errorCorrectionLevel	QR Correction level ('L', 'M', 'Q', 'H')
imageHeight	height of your image
imageSrc	Link to your image
imageWidth	width of your image
margin	Define how much wide the quiet zone should be.
qrdata	String to encode
scale	Scale factor. A value of 1 means 1px per modules (black dots).
title	HTML title attribute (supported by canvas, img, url)
version	1-40
width	Height/Width (any value)

cardIO_sc

CardIO SharedComponent

DropZoneComponent

This component handles file trop an a Zone. It will fire a FileDropped event with a Files object as data. The File dropped will be in the out[0]

variables

name	comment
Information

events

name	comment
FilesDropped

materialDatePicker

variables

name	comment
buttonAriaLabel
inputAriaLabel
model

materialSlider

variables

name	comment
ariaLabel
id
max
min
model
step

ngSelect

Lightweight all in one UI Select, Multiselect and Autocomplete

Features :

• Custom binding to property or object
• Custom option, label, header and footer templates
• Virtual Scroll support with large data sets (>5000 items).
• Infinite scroll
• Keyboard navigation
• Multiselect
• Flexible autocomplete with client/server filtering
• Custom search
• Custom tags
• Append to
• Group items
• Output events
• Accessibility
• Good base functionality test coverage
• Themes

For more informations see documentation

variables

name	comment
addTag	Allows to create custom options.
addTagText	Set custom text when using tagging
appearance	Allows to select dropdown appearance. Set to outline to add border instead of underline (applies only to Material theme)
appendTo	Append dropdown to body or any other element using css selector. For correct positioning body should have position:relative
bindLabel	Object property to use for label. Default label
bindValue	Object property to use for selected model. By default binds to whole object.
clearable	Allow to clear selected value. Default true
clearAllText	Set custom text for clear all icon title
clearOnBackspace	Clear selected values one by one when clicking backspace. Default true
clearSearchOnAdd	Clears search input when item is selected. Default true. Default false when closeOnSelect is false
closeOnSelect	Whether to close the menu when a value is selected
compareWith	A function to compare the option values with the selected values. The first argument is a value from an option. The second is a value from the selection(model). A boolean should be returned.
deselectOnClick	Deselects a selected item when it is clicked in the dropdown. Default false. Default true when multiple is true
dropdownPosition	Set the dropdown position on open -- bottom | top | auto
editableSearchTerm	Allow to edit search query if option selected. Default false. Works only if multiple is false.
groupBy	Allow to group items by key or function expression
groupValue	Function expression to provide group value
hideSelected	Allows to hide selected items.
inputAttrs	Pass custom attributes to underlying input element
isOpen	Allows manual control of dropdown opening and closing. true - won't close. false - won't open.
items	Items array
keyDownFn	Provide custom keyDown function. Executed before default handler. Return false to suppress execution of default key down handlers.
labelForId	Id to associate control with label.
loading	You can set the loading state from the outside (e.g. async items loading)
loadingText	Set custom text when for loading items
markFirst	Marks first item as focused when opening/filtering.
maxSelectedItems	When multiple = true, allows to set a limit number of selection.
minTermLength	Minimum term length to start a search. Should be used with typeahead
multiple	Allows to select multiple items.
notFoundText	Set custom text when filter returns empty result
openOnEnter	Open dropdown using enter. Default true
placeholder	Placeholder text.
readonly	Set ng-select as readonly. Mostly used with reactive forms.
searchable	Allow to search for value. Default true
searchFn	Allow to filter by custom search function
searchWhileComposing	Whether items should be filtered while composition started
selectableGroup	Allow to select group when groupBy is used
selectableGroupAsModel	Indicates whether to select all children or group itself
selectOnTab	Select marked dropdown item using tab. Default false
tabIndex	Set tabindex on ng-select
trackByFn	Provide custom trackBy function
typeahead	Custom autocomplete or advanced filter.
typeToSearchText	Set custom text when using Typeahead
virtualScroll	Enable virtual scroll for better performance when rendering a lot of data

events

name	comment
add	Fired when item is added while [multiple]="true". Outputs added item
blur	Fired on select blur
change	Fired on model change. Outputs whole model
clear	Fired on clear icon click
close	Fired on select dropdown close
focus	Fired on select focus
open	Fired on select dropdown open
remove	Fired when item is removed while [multiple]="true"
scroll	Fired when scrolled. Provides the start and end index of the currently available items. Can be used for loading more items in chunks before the user has scrolled all the way to the bottom of the list.
scrollToEnd	Fired when scrolled to the end of items. Can be used for loading more items in chunks.
search	Fired while typing search term. Outputs search term with filtered items

ngxTagInput

This component provides Chips management for your apps

variables

name	comment
addOnBlur
autocompleteItems
editableTag
inputtext
itemDisplayBy
itemIdentifyBy
items
maxItems
onlyFromAutocomplete
placeholder
removableTag
secondaryPlaceholder
showAutoCompleteDropdownIfEmpty
theme

events

name	comment
Add
Blur
Focus
ModelChange
Paste
Remove
Select
TagEdited
TextChange
ValidationError

tinyMce

This is the TinyMCE WYSIWIG HTML editor you can use to provide rich text editing in your apps

variables

name	comment
apiKey
cloudChannel
disabled
id
init
initialValue
inline
model
plugins
tagName
toolbar

events

name	comment
onBlur