Rocket-te-ui

It is a wrapper, and it has ability to update your ui library.
We use the carbon10 and angular10 in this project.
For your project, it should install carbon-component-angular, carbon-component, carbon-icon.

This project was generated with Angular CLI version 9.1.3.

How to use to NPM

ng build rocket-ui-lib
chang version in package.json
npm publish

Go to bzshared/webmart
npm install

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

About scss folder

Used for rocket-ui, should import scss/styles.scss in project.

Components

1. rocket-tooltip

normal mode:
options:
{placement, alignment, content, template, trigger}
placement:
"bottom", "top"
alignment:
"start", "center", "end"

template Mode
template:
show costomer defined ng-template in tooltip
trigger:
'click', 'hover'
placement:
"bottom", "top"

2. rocket-select

[tooltip] ="{show, content, template}"
[selected]="selectNode" (onChange)="change($event)">

options:
{
size: sm, md, xl,
marked, // required or not
label,
display, // 'inline', 'default'
selected, // secondary way to bind ngModel
data: [{
value, text/label
}]
group mode:
isGroup: true,
data: [{
text,
children: [{text, value}]
}]
}
id
selected:
primary way to bind ngModel
tooltip:
view rocket-tooltip
onChange(e):
emit e
how to set selected in parent component:
change($event) {
this.selectNode = $event.target.value;
}

3. rocket-text

options:
{
label, 
marked, // required or not
placeholder, 
disabled, 
isInvalid, 
validationText, 
data
}
tooltip: {
show,
content
}
id
onChange():
emit $event

4. rocket-text-area

options:
{
label, 
marked, // required or not
placeholder, 
disabled, 
isInvalid, 
validationText, 
data, //ngModel
rows,
cols
}
tooltip: {
show,
content
}
id
change():
emit $event

5. rocket-table

options:
{
showPagination,
showBtn: {add, import, export, search},
showSelectionColumn,
pageLength: default 15，
itemsPerPageOptions: default [15, 20, 30, 40, 50],
totalDataLength,
currentPage
}
id
data:
{headers, rows}
selectAction():
emit {data, type} //select event in overflow and button // edit, reset-pwd, delete, add, upload ...
selectList():
select row by checkbox of each row.

6. rocket-radio

id='radio'
[options]="{data, lable, disabled, orientation, selectedIndex}"
[tooltip] ="{show, content, template}"
(onSelect)="select($event)" #radio>


options:
{
data: [{value, label/text}],
label,
marked, // required or not
disabled,
orientation: 'vertical', 'horizontal',
selectedIndex: For ngModel, selected index which is used for compatible with carbon 9
}
id
onSelect:
select event, emit select item in data.
tooltip:
view rocket-tooltip
update check status:
this.radio.update(newData) ;

7. rocket-notificate

options:
{
type error, success, warning, info,
title,
message,
showClose
}
id
close():
emit close event.

8. rocket-modal

Template which will show in modal center

options:
{
show,
modalType: {'default', 'danger'}
header,
title,
waitCallback, //show result in dialog, such as: ldap test
keepOpen, // keep open if click other place, such as: reset password
hideFooter,
hideClose,
confirmBtnOpts: {text, disabled},
cancelBtnOpts: {kind, text, hide},
size: 'xl' // administrator multi select
}
id
submit() submit event
close() submit event

9. rocket-checkbox

{{"sessions.keepAlive.enableKeepAlive" | translate}}


options:
{
disabled,
checked: true/false,
label: secondary way for text
}
onChange():
selected event
{{label}}:
primary way for text
tooltip:
view rocket-tooltip
id

10. rocket-button

opions
{
kind: "primary", "secondary", "tertiary", "ghost", "danger", "danger--primary",
size: "normal", "sm", "field",
disabled,
text
}
id
onClick():
emit click event

11. rocket-progress-indicator

[options]="{steps: steps, current: current}">

opions
{
steps: [
{
text,
state: ['current', 'complete', 'incomplete', 'error]
}],
current
}
id

12. rocket-accordion

options:
{
title
}
expanded
id

13. rocket-accordion-item

options: {title, expanded}
id

## 14. rocket-toggle


options:
{
disabled,
enable,
size: {"md", "sm"},
label
}
tooltip
onChange():
emit array
id

## 14. rocket-search


options: {
placeholder,
size: ["sm", "md", "xl"]
label
}
onChange():
emit change event
clear():
emit clear event
id

15. rocket-icon

type:
'view'
'view-off'
'information'
'checkmark-filled'
'chevron-up'
'chevron-down'
'chevron-left'
'chevron-right'
'arrow-left'
'arrow-right'
'home'
'settings'
'user'
'data-structured'<'session'>,
'data-1'<'group'>
'checkmark'
'radio-button'
'collaborate'<'login'>
'play-outline'
'close'
'upload'
'delete'
'unlocked'
'download'
'folder'
'folder-add'
'add'
'subtract-alt'
'document-export'
'renew'
'terminal'
'edit'
'undo'
'y-axis'
'caret-up'
'caret-down'
'settings-adjust'
'visual-recognition
'warning-filled'
'warning'
'document'
'copy-link'

options
{
size: 16, 20, 14, 32
color,
color, stroke, strokeWidth,
isCenter: for 16 size vertical
isImg: use other type as icon not svg
src, width, height
}

16. rocket-loading

id rule: component-feature-type

group-session-btn
group-privilege-select

console.warn(if id is null)