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
    • angularxQRCode
    • cardIO_sc
    • DropZoneComponent
    • materialDatePicker
    • materialSlider
    • 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=https://github.com/convertigo/c8oprj-lib-extended-components-ui-ngx.git:branch=8.3.0.0
   To simply use	lib_ExtendedComponents_ui_ngx=https://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
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
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: 10 by default
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.
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

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

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