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
    • cyGraph
    • DropZoneComponent
    • frappeGantt
    • kanbanBoard
    • materialDatePicker
    • materialSlider
    • ngSelect
    • ngxTagInput
    • sortableJS
    • tinyMce
    • tuiImageEditor

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.4.0.0
   To simply use	lib_ExtendedComponents_ui_ngx=https://github.com/convertigo/c8oprj-lib-extended-components-ui-ngx/archive/8.4.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 Example: n/a
data	data must receive a JSON with a RowData key and an optional ColDef key Example: n/a

cardIO_sa

CardIO SharedAction

variables

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

ZXing_sa

ZXing SharedAction

variables

name	comment
file	File object as Array (if not provided from an input type file). Example: n/a
imgId	Img tag identifier to output image file. Optional Example: n/a
isOutputEvent	Publish scan result or not to the topic event. Default: true. Example: true
isOutputGlobal	Insert or not the scan result in a global page variable. The variable is composed of 'zxing:' + topic + ref variables. Default: true. Example: 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 Example: n/a
resultId	Input tag identifier to set value to. Optional Example: n/a
topic	Publish Topic name to use with a Subscribe component. Optional Example: n/a
type	Scan from file or video. Default: 'file' Example: 'file'
videoId	Video tag identifier to output video camera. Default: 'video'. Optional Example: 'video'

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 Example: false
ariaLabel	Variable aria Label. Example: n/a
autoSizeColumns	Variable auto Size Columns. Example: true
cacheBlockSize	Variable cache Block Size. Example: 100
class	One of the themes provided by AG Grid. See https://www.ag-grid.com/javascript-grid-themes-provided/ and import the matching theme stylesheet in the app theme. Example: 'ag-theme-quartz'
columnDefs	Array of columnDef {headerName: 'headerName', field: 'fieldName'} objects Example: []
customLocaleText	Adds or overrides grid localization entries by language key. Example: {}
datasource	Variable datasource. Example: null
defaultColDef	default is {hide: false, editable: true, sortable: true, resizable: true, filter: true, checkboxSelection: false, singleClickEdit: false} Example: {hide: false, editable: true, sortable: true, resizable: true, filter: true, checkboxSelection: false, singleClickEdit: false}
domLayout	boolean: true (default) or false Example: 'autoHeight'
getLocaleText	Variable get Locale Text. Example: null
height	height is 'auto' or value in % or px Example: 'auto'
id	An Optional ID Example: n/a
localeText	Defines grid localization. You can pass a language code (for example fr or fr-FR) or a map of translation key/value pairs. Example: 'en'
maxBlocksInCache	How many blocks to keep in the store. Default is no limit, so every requested block is kept Example: n/a
overlayLoadingTemplate	Variable overlay Loading Template. Example: n/a
overlayNoRowsTemplate	Variable overlay No Rows Template. Example: n/a
pagination	boolean: true (default) or false Example: true
paginationPageSize	integer: 10 by default Example: 10
paginationPageSizeSelector	array | boolean: [20,50,100] by default Example: true
rowData	Array of row { fieldName1: 'value1', fieldName2: 'value2', fieldName3: true, ...} objects Example: [{ make: 'Toyota', model: 'Celica', price: 35000 },{ make: 'Ford', model: 'Mondeo', price: 32000 },{ make: 'Porsche', model: 'Boxter', pr...
rowDeselection	boolean: true (default) or false Example: true
rowHeight	Height of the row in pixels as a string Example: '25'
rowModelType	Row model type Example: 'clientSide'
rowSelection	string: 'single' (default) or 'multiple' Example: 'single'
showCsvDownload	If true, displays a CSV download button/menu around the grid. Example: false
showCsvDownloadAlignment	If showCsvDownload is true, defines CSV button alignment: start, center or end. Example: 'end'
showCsvDownloadPosition	If showCsvDownload is true, defines CSV button position relative to the grid: top, bottom, left, right, both_row or both_col. Example: 'top'
suppressCellSelection	Variable suppress Cell Selection. Example: false
suppressFieldDotNotation	boolean: true (default) or false Example: false
suppressRowClickSelection	Variable suppress Row Click Selection. Example: false
width	width value in % or px Example: '100%'
wrapperClass	Height of the row in pixels as a string Example: n/a

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 Example: false
alt	HTML alt attribute (supported by img, url) Example: null
ariaLabel	HTML aria-label attribute (supported by canvas, img, url) Example: null
colordark	RGBA color, color of dark module (foreground) Example: '#000000'
colorlight	RGBA color, color of light module (background) Example: '#FFFFFF'
cssClass	CSS Class Example: 'qrcode'
elementType	'canvas', 'svg', 'img', 'url' (alias for 'img') Example: 'canvas'
errorCorrectionLevel	QR Correction level ('L', 'M', 'Q', 'H') Example: 'M'
imageHeight	height of your image Example: 256
imageSrc	Link to your image Example: null
imageWidth	width of your image Example: 256
margin	Define how much wide the quiet zone should be. Example: 4
qrdata	String to encode Example: n/a
scale	Scale factor. A value of 1 means 1px per modules (black dots). Example: 4
title	HTML title attribute (supported by canvas, img, url) Example: null
version	1-40 Example: '(auto)'
width	Height/Width (any value) Example: 10

cardIO_sc

CardIO SharedComponent

cyGraph

variables

name	comment
autounselectify	Disables element selection when true
boxSelectionEnabled	Enables box selection mode
elements	Cytoscape elements array
height	Graph container height
id	Optional HTML id for the graph container
layout	Cytoscape layout object
maxZoom	Maximum zoom level
minZoom	Minimum zoom level
options	Additional Cytoscape options object
style	Cytoscape style array (leave empty to use theme-aware defaults)
userPanningEnabled	Allows user panning interactions
userZoomingEnabled	Allows user zoom interactions
wheelSensitivity	Mouse wheel zoom sensitivity
width	Graph container width

events

name	comment
BackgroundTap	Fired when graph background is tapped
CyReady	Fired when Cytoscape is initialized
EdgeTap	Fired when an edge is tapped
NodeTap	Fired when a node is tapped

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	Information text displayed inside the drop zone Example: n/a

events

name	comment
FilesDropped	Fired when file(s) are dropped on the drop zone. Data is the dropped files array.

frappeGantt

Shared component wrapping the Frappe Gantt chart library. Pass tasks as an array or as a JSON string.

variables

name	comment
dateFormat	Date format used by Frappe Gantt parser Example: 'YYYY-MM-DD'
height	Container height Example: '360px'
id	Optional HTML id for the gantt container Example: 'my-gantt'
options	Optional Frappe Gantt options object (object or JSON string) Example: {"readonly":false,"bar_height":24}
tasks	Array of tasks accepted by Frappe Gantt (array or JSON string) Example: [{"id":"Task 1","name":"Planning","start":"2026-02-01","end":"2026-02-04","progress":65}]
viewMode	Default view mode for the chart Example: 'Day'
width	Container width Example: '100%'

events

name	comment
DateChanged	Fired when a task date range changes.
ProgressChanged	Fired when a task progress changes.
TaskClicked	Fired when a task bar is clicked.
ViewChanged	Fired when the gantt view mode changes.

kanbanBoard

Shared component implementing a Kanban board powered by SortableJS. Cards can be dragged across columns and columns can optionally be reordered.

variables

name	comment
animation	Card drag animation duration in milliseconds. Example: 180
cardTitleKey	Property name used to display card labels when cards are objects. Example: 'title'
chosenClass	CSS class applied to the selected card. Example: 'kanban-card-chosen'
columnAnimation	Column drag animation duration in milliseconds. Example: 180
columnChosenClass	CSS class applied to the selected column. Example: 'kanban-column-chosen'
columnDragClass	CSS class applied while dragging a column. Example: 'kanban-column-drag'
columnGhostClass	CSS class applied to column ghost elements. Example: 'kanban-column-ghost'
columnHandle	CSS selector used as drag handle for columns. Example: '.kanban-column-header'
columnOptions	Optional SortableJS options for column sorting (object or JSON string). Example: {"delay":80}
columns	Array of Kanban columns (array or JSON string). Example: [{"id":"todo","title":"To Do","cards":[{"id":"c1","title":"Prepare backlog"}]}]
columnSort	Allows column reordering when true. Example: false
disabled	Disables drag and drop when true. Example: false
dragClass	CSS class applied while dragging a card. Example: 'kanban-card-drag'
emptyColumnText	Placeholder text shown when a column has no cards. Example: 'Drop cards here'
ghostClass	CSS class applied to card ghost elements. Example: 'kanban-card-ghost'
groupName	SortableJS group name used between columns. Example: 'kanban-board'
handle	Optional CSS selector for dragging cards by handle. Example: '.card-handle'
height	Container height. Example: 'auto'
id	Optional HTML id for the kanban host. Example: 'my-kanban'
options	Optional SortableJS options for cards (object or JSON string). Example: {"swapThreshold":0.7}
sort	Allows card sorting when true. Example: true
width	Container width. Example: '100%'

events

name	comment
BoardChanged	Fired when the board structure changes.
CardClicked	Fired when a card is clicked.
CardMoved	Fired when a card is moved between positions or columns.
ColumnClicked	Fired when a column header is clicked.
ColumnOrderChanged	Fired when columns are reordered.

materialDatePicker

variables

name	comment
buttonAriaLabel	Accessibility label applied to the datepicker toggle button Example: n/a
inputAriaLabel	Accessibility label applied to the date input Example: n/a
model	Date model bound to the input and emitted on change Example: n/a

materialSlider

variables

name	comment
ariaLabel	Accessibility label applied to the slider thumb input Example: n/a
id	Optional HTML id for the slider input Example: n/a
max	Maximum slider value Example: 10
min	Minimum slider value Example: 0
model	Current slider value bound to ngModel Example: n/a
showTickMarks	boolean: show or hide slider tick marks Example: false
showValue	boolean: display current value label near the thumb Example: true
step	Slider step increment Example: 1

events

name	comment
ModelChange	Fired when the slider value changes. Data is the new numeric value.

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

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

sortableJS

Shared component wrapping SortableJS for drag-and-drop list ordering. Pass items as an array or as a JSON string.

variables

name	comment
animation	Animation duration in milliseconds. Example: 180
chosenClass	CSS class applied to the chosen element. Example: 'sortablejs-chosen'
disabled	Disables drag and drop when true. Example: false
dragClass	CSS class applied while dragging. Example: 'sortablejs-drag'
emitItemsOnChange	Emits ItemsChanged after each drop event when true. Example: true
emptyText	Placeholder text when the list is empty. Example: 'Drop items here'
ghostClass	CSS class applied to the ghost element. Example: 'sortablejs-ghost'
handle	Optional CSS selector for drag handles. Example: '.drag-handle'
height	Container height. Example: 'auto'
id	Optional HTML id for the sortable container. Example: 'my-sortable'
items	Array of draggable items (array or JSON string). Example: [{"label":"Backlog"},{"label":"In Progress"},{"label":"Done"}]
options	Optional SortableJS options object (object or JSON string). Example: {"swapThreshold":0.65}
sort	Allows sorting when true. Example: true
width	Container width. Example: '100%'

events

name	comment
DragEnded	Fired when a drag operation ends.
DragStarted	Fired when a drag operation starts.
ItemClicked	Fired when an item is clicked.
ItemsChanged	Fired with the reordered items array.
OrderChanged	Fired when the list order changes.

tinyMce

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

variables

name	comment
apiKey	Tiny Cloud API key (optional when using local assets) Example: n/a
cloudChannel	Tiny Cloud channel version (used when loading cloud resources) Example: '5-dev'
disabled	boolean: disable or enable editor interactions Example: n/a
id	Optional HTML id applied to the editor element Example: n/a
init	TinyMCE init configuration object Example: {}
initialValue	Initial editor content when ngModel is null Example: n/a
inline	boolean: use TinyMCE inline mode Example: false
model	HTML content bound to the editor ngModel Example: n/a
plugins	List of TinyMCE plugins to load Example: ['advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table code hel...
tagName	HTML tag name used as editor root element in inline mode Example: 'div'
toolbar	TinyMCE toolbar configuration string Example: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | \bullist numlist outdent indent | rem...

events

name	comment
onBlur	Fired when the editor loses focus.

tuiImageEditor

variables

name	comment
cssMaxHeight	Maximum editor canvas height in pixels Example: n/a
cssMaxWidth	Maximum editor canvas width in pixels Example: n/a
imageName3	Reserved variable not used by the current component implementation Example: n/a
imageName4	Reserved variable not used by the current component implementation Example: n/a
imageName5	Reserved variable not used by the current component implementation Example: n/a
imageName6	Reserved variable not used by the current component implementation Example: n/a
imageName7	Reserved variable not used by the current component implementation Example: n/a
imageName8	Reserved variable not used by the current component implementation Example: n/a
imageName	Source image display name shown in the editor UI Example: n/a
imagePath	Source image path or data URL loaded by the editor Example: n/a