demo-npm-plugin v0.1.0

This is a package of common components used in ABB Manufacturing Operations Management. Value of below components is strictly connected to it's guide package.

1. Floating Input: Component generates input with type=text and floating label. Properties: onChange: (ev:KeyboardEvent) => void; (method to be handeled if the value was changed) onBlur: (ev:KeyboardEvent) => void; (method to be handeled if the input was blurred) onFocus: (ev:KeyboardEvent) => void; (method to be handeled if the input was focused) isReadonly: boolean; (Boolean property sets the readability of the input) value: string; (current value of the input) label: string; (value of the floating label) name: string; (name of the input, to be used fe. In forms) placeholder: string; (input’s placeholder) maxLength: number; (value which sets the maximum length of the input) classNames: string; (all additional class names for the input)

2. Stepper Component: Component generates input with type=text and user interface to easily manage the number value. Properties: getUpdatedValue: (param:number) => void; (method to be handeled each time after + or – button was clicked) onChange: (ev:KeyboardEvent) => void; (method to be handeled if the value was changed) onBlur: (ev:UIEvent) => void; ; (method to be handeled if the input was blurred) onFocus: (ev:UIEvent) => void; (method to be handeled if the input was focused) isZeroLessAvailable: boolean; (flag which sets less than zero value availability) value: number; (current input value) max: number; (maximum input value) min: number; (minimum input value) name: string; (input’s name to be used fe. In forms) classNames: string; (all additional class names for input) isReadonly: boolean; (flag which sets the readonly parameter for input) hasArrow: boolean; (flag which generates left and right arrow instead of – and + buttons)

3. AbbBarMenuComponent Component which lets you visualize all available menus Properties: label: string, (the main label to be shown on the left side of component) labelUrl: string, (url for the label, can be empty or omitted) options: [ (array of object with options to be shown inside the menu) { label: string, (option label) options: (array of options to be shown under the label) label: string, (label of the option) icon?: string, (icon name – the possible icons will be provided after receiving full list of svg icons) url?: string, (url of the options – if provided the option will become a link) classname?: string, (additional classnames) , isSpecialElement?: boolean, (flag – if true the option will be treatet as the “special” – shown on the right side of the image) }, ]

4. FeedbackInstructionComponent Component provides possibility to render input with label and special “I” icon Properties: onChange: (ev:KeyboardEvent) => void; (method to be handeled if the value was changed) onFocus: (ev:KeyboardEvent) => void; (method to be handeled if the input was focused) onBlur: (ev:KeyboardEvent) => void; (method to be handeled if the input was blurred) message: string; (string close to the “I” icon) label: string; (label right above the input) value: string; (value of the input) isReadonly: boolean; (flag to provide input modification availability) classNames: string; (additional classnames) name: string; (input’s name) placeholder: string; (input’s placeholder) maxLength: number; (maximum input’s length)

5. FeedbackConfirmationDiscreteComponent Component provides an easy way to show either the value of the component is correct or not. Properties: onChange: (ev:KeyboardEvent) => void; (method to be handeled if the value was changed) onFocus: (ev:KeyboardEvent) => void; (method to be handeled if the input was focused) onBlur: (ev:KeyboardEvent) => void; (method to be handeled if the input was blurred)label: string; (label above the input) value: string; (input’s value) name: string; (input’s name) classNames: string; (additional input’s classnames) placeholder: string; (input’s placeholder) isReadonly: boolean; (flag which sets the input modification availability) isConfirmed: boolean; (flag which sets if component should be marked as correct) isError: boolean; (flag which sets if component should be marked as error) maxLength: number; (maximum length of the input value)

6. SpinnerComponent Properties: isLoading: boolean; (flag which shows if the spinner should be shown) isFixed: boolean; (flag which sets if the spinner should be shown as fixed or inside a divider) label: string; (label of the spinner, can be null) hasBackdrop: boolean; (flag which sets if the backdrop should be shown)