{
isMandatory: false,
key: "toggle",
type: "toggle",
label: "Default",
disable: false,
populators: {
name: "toggle-Default",
optionsKey: "name",
error: "Error!",
required: false,
options: [
{
code: "1",
name: "Toggle1",
},
{
code: "2",
name: "Toggle2",
},
{
code: "3",
name: "Toggle3",
},
],
},
}

{
isMandatory: false,
type: "radio",
key: "genders",
label: "Deafult",
disable: false,
populators: {
name: "radio-Deafult",
optionsKey: "name",
error: "Error!",
required: true,
mdmsConfig: {
masterName: "GenderType",
moduleName: "common-masters",
localePrefix: "COMMON_GENDER",
},
},
}

{
inline:true,
isMandatory: true,
type:"checkbox",
disable:false,
withoutLabel:true,
populators:{
name:"checkbox",
error:"Error Message",
title:”Checkbox Label”,
isLabelFirst: false,
}
}

{
inline:true,
label:"Example",
placeholder:"Enter Text"
isMandatory: true,
type:"text",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultText",
error:"Error Message",
validation:{minLength:2, maxLength:10},
customIcon:"DownloadIcon",
onIconSelection:{(e)=>{console.log("clicked");}}
prefix:"$",
suffix:"$",
wrapLabel:true
}
}

<TextInput
type="text"
disabled={false}
populators={{customIcon: "MyLocation"}
onIconSelection={()=>{console.log("selected")}
></TextInput>

{
label:"ExampleDate",
placeholder:"dd/mm/yyyy"
isMandatory: true,
type:"date",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultDate",
error:"Error Message",
editableDate:true
}
}

{
label:"ExampleTime",
placeholder:"placeholder"
isMandatory: true,
type:"time",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultTime",
error:"Error Message",
editableTime:true
}
}

{
label:"ExampleGeolocation",
placeholder:"placeholder"
isMandatory: true,
type:"geolocation",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultGeolocation",
error:"Error Message",
onIconSelection:{(e)=>{console.log(“clicked”);}}
}
}

{
label:"ExampleNumeric",
placeholder:"placeholder"
isMandatory: true,
type:"numeric",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultGeolocation",
error:"Error Message",
},
config:{step:””}
}

{
label:"ExamplePrefix",
placeholder:"placeholder"
isMandatory: true,
type:"text",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultText",
error:"Error Message",
prefix:”+91”
},
}

{
label:"ExampleSuffix",
placeholder:"placeholder"
isMandatory: true,
type:"text",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultText",
error:"Error Message",
suffix:”Kg”
},
}

{
label:"ExamplePassword",
placeholder:"placeholder"
isMandatory: true,
type:"password",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultText",
error:"Error Message",
},
}

{
label:"ExampleSearch",
placeholder:"placeholder"
isMandatory: true,
type:"search",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultSearch",
error:"Error Message",
onIconSelection:{(e)=>{console.log(“clicked”);}}
}
}

{
label:"ExampleTextArea",
placeholder:"placeholder"
isMandatory: true,
type:"textarea",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultSearch",
error:"Error Message",
resizeSmart: false,
}

npm install -save @egovernments/digit-ui-components-core

"@egovernments/digit-ui-components-core":"0.0.1"

import {TextInput, Dropdown} from "@egovernenets/digit-ui-components-core"

import {FormComposerV2} from "@egovernenets/digit-ui-components-core"

<React.Fragment>
<Header >{t("CREATE_HEADER")}</Header>
<FormComposerV2
label={t("PROCEED")}
config={configs.map((config) => {
return {
...config,
body: config.body.filter((a) => !a.hideInEmployee),
};
})}
defaultValues={sessionFormData}
onFormValueChange={onFormValueChange}
onSubmit={onFormSubmit}
/>
</React.Fragment>

return (
<React.Fragment>
<Header className="works-header-create">{isModify ? t("COMMON_MODIFY_PROJECT") : t("WORKS_CREATE_PROJECT")}</Header>
{createProjectConfig && (
<FormComposerV2
label={!isModify ? "WORKS_CREATE_PROJECT" : "WORKS_MODIFY_PROJECT"}
config={config?.form?.map((config) => {
return {
...config,
body: config?.body.filter((a) => !a.hideInEmployee),
};
})}
onSubmit={handleSubmit}
submitInForm={false}
inline={false}
className="form-no-margin"
defaultValues={sessionFormData}
showWrapperContainers={false}
noBreakLine={true}
showNavs={config?.metaData?.showNavs}
showFormInNav={true}
showMultipleCardsWithoutNavs={false}
showMultipleCardsInNavs={false}
horizontalNavConfig={navTypeConfig}
currentFormCategory={currentFormCategory}
onFormValueChange={onFormValueChange}
cardClassName="mukta-header-card"
/>
)}
</React.Fragment>
);

import {TextInput, Dropdown} from "@egovernenets/digit-ui-components-core"

import {InboxSearchComposer} from "@egovernenets/digit-ui-components-core"

<div className ="inbox-search-wrapper">
<InboxSearchComposer configs={configs}></InboxSearchComposer>
</div>

Name                         Description

label(string)               label associated with the checkbox

onChange(boolCallBack)      callback function when the checkbox value changes

value(default: false)        current state of checkbox

isDisabled                     indicates whether the checkbox is disabled

iconColor                    checkbox colour can be customized using this

Padding                      padding around the checkbox widget

DigitCheckbox(
  label: "Label for checkbox",
  onChanged: (value) {},
),

<Toast
label={"Success Toast Message"}
onClose={}
transitionTime={}
/>

<Toast
label={"Warning Toast Message"}
warning={“warning”}
onClose={}
transitionTime={}
/>

<Toast
label={"Error Toast Message"}
error={true}
onClose={}
transitionTime={}
/>

Name                         Description

label(string)                text displayed on the button

onPressed(voidCallBack)     A callback function, when button is pressed

type                        specify the type of button(primary or secondary)

PrefixIcon                  Icon to be displayed before the label text

SuffixIcon                  Icon to be displayed after the label text

isDisabled                  indicates where the button is in a disabled state

Button(
  label: 'Primary Button',
  onPressed: () {},
  type: ButtonType.primary,
);

Button(
  suffixIcon: Icons.add,
  label: 'Primary Button',
  onPressed: () {},
  type: ButtonType.primary,
);

Button(
  prefixIcon: Icons.add,
  label: 'Primary Button',
  onPressed: () {},
  type: ButtonType.primary,
);

Button(
  label: 'secondary Button',
  onPressed: () {},
  type: ButtonType.secondary,
);

Button(
  label: 'tertiary Button',
  onPressed: () {},
  type: ButtonType.tertiary,
);

Button(
  label: 'link',
  onPressed: () {},
  type: ButtonType.link,
);

{
isMandatory: false,
type: "dropdown",
key: "genders",
label: "With Icons",
disable: false,
populators: {
name: "dropdown-WIth Icons",
optionsKey: "name",
error: "",
required: true,
showIcon: true,
isSearchable:true,
options: [
{
code: "1",
name: "Option1",
icon: "Article",
},
{
code: "2",
name: "Option2",
icon: "Article",
},
{
code: "3",
name: "Option3",
icon: "Article",
},
],
}
}

{
isMandatory: false,
type: "dropdown",
key: "genders",
label: "With Icons",
disable: false,
variant: "nesteddropdown",
populators: {
name: "nesteddropdown-With Icons",
optionsKey: "name",
error: "",
required: true,
showIcon:true,
isSearchable:true,
options: [
{
name: "Category A",
options: [
{ code: "Category A.Option A", name: "Option A", icon: "Article" },
{ code: "Category A.Option B", name: "Option B", icon: "Article" },
{ code: "Category A.Option C", name: "Option C", icon: "Article" },
],
code: "Category A",
},
{
name: "Category B",
options: [
{ code: "Category B.Option A", name: "Option A", icon: "Article" },
{ code: "Category B.Option 2", name: "Option 2", icon: "Article" },
{ code: "Category B.Option 3", name: "Option 3", icon: "Article" },
],
code: "Category B",
},
],
},
}

{
isMandatory: false,
type: "dropdown",
key: "genders",
label: "Default",
disable: false,
variant: "treedropdown",
populators: {
name: "treedropdown-Default",
optionsKey: "name",
error: "",
required: true,
options: [
{
name: "Category A",
options: [
{
code: "Category A.Option A",
name: "Option A",
options: [
{ code: "Category A.Option A.Option 1", name: "Option 1" },
{ code: "Category A.Option A.Option 2", name: "Option 2" },
],
},
{
code: "Category A.Option B",
name: "Option B",
options: [
{ code: "Category A.Option B.Option 1", name: "Option 1" },
{ code: "Category A.Option B.Option 2", name: "Option 2" },
],
},
],
code: "Category A",
},
{
name: "Category B",
options: [
{ code: "Category B.Option A", name: "Option A" },
{
code: "Category B.Option B",
name: "Option B",
options: [
{ code: "Category B.Option B.Option 1", name: "Option 1" },
{ code: "Category B.Option B.Option 2", name: "Option 2" },
],
},
],
code: "Category B",
},
{
name: "Category C",
options: [{ code: "Category C.Option A", name: "Option A" }],
code: "Category C",
},
],
},
}

{
isMandatory: false,
type: "dropdown",
key: "genders",
label: "With Icon",
disable: false,
variant: "nestedtextdropdown",
populators: {
name: "nestedtextdropdown-With Icon",
optionsKey: "name",
error: "",
required: true,
showIcon:true,
options: [
{
code: "Option1",
name: "Option1",
icon: "Article",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor ",
},
{
code: "Option2",
name: "Option2",
icon: "Article",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor",
},
{
code: "Option3",
name: "Option3",
icon: "Article",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor",
},
],
},
},

{
isMandatory: false,
type: "dropdown",
key: "genders",
label: "With CustomIcon",
disable: false,
variant: "profiledropdown",
populators: {
name: "profiledropdown-With CustomIcon",
optionsKey: "name",
error: "",
required: true,
options: [
{
code: "Option1",
name: "Option1",
profileIcon:"
https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila-21.png
",

},
{
code: "Option2",
name: "Option2",
profileIcon:"
https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila-21.png
",

},
{
code: "Option3",
name: "Option3",
profileIcon:"
https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila-21.png
",

},
],
},
}

{
isMandatory: false,
type: "dropdown",
key: "genders",
label: "ProfileDropdown",
disable: false,
variant: "profilenestedtext",
populators: {
name: "profiledropdown-With NestedText",
optionsKey: "name",
error: "",
required: true,
options: [
{
code: "Option1",
name: "Option1",
profileIcon:"
https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila-21.png
",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor",
},
{
code: "Option2",
name: "Option2",
profileIcon:"

https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila-21.png
",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor",

},
{
code: "Option3",
name: "Option3",
profileIcon:"
https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila-21.png
",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor",
},
],
},
}

{
isMandatory: false,
key: "multiselect",
type: "multiselectdropdown",
label: "With Icons",
disable: false,
populators: {
name: "multiselectdropdown-With Icons",
optionsKey: "name",
error: "Error!",
required: false,
isDropdownWithChip: true,
showIcon:true,
clearLabel:"Clear All"
options: [
{
code: "Option1",
name: "Option1",
icon: "Article",
},
{
code: "Option2",
name: "Option2",
icon: "Article",
},
{
code: "Option3",
name: "Option3",
icon: "Article",
},
],
},
}

{
isMandatory: false,
key: "multiselect",
type: "multiselectdropdown",
label: "With Icons",
disable: false,
variant: "nestedmultiselect",
populators: {
name: "nestedmultiselect-With Icons",
optionsKey: "name",
error: "Error!",
required: false,
isDropdownWithChip: true,
showIcon:true,
options: [
{
name: "Category A",
options: [
{ code: "Category A.Option A", name: "Option A", icon: "Article" },
{ code: "Category A.Option B", name: "Option B", icon: "Article" },
{ code: "Category A.Option C", name: "Option C", icon: "Article" },
],
code: "Category A",
},
{
name: "Category B",
options: [
{ code: "Category B.Option A", name: "Option A", icon: "Article" },
{ code: "Category B.Option 2", name: "Option 2", icon: "Article" },
{ code: "Category B.Option 3", name: "Option 3", icon: "Article" },
],
code: "Category B",
},
],
},
}

{
isMandatory: false,
key: "multiselect",
type: "multiselectdropdown",
label: "Default",
disable: false,
variant: "treemultiselect",
populators: {
name: "treemultiselect-Default",
optionsKey: "name",
error: "Error!",
required: false,
isDropdownWithChip: true,
options: [
{
name: "Category A",
options: [
{
code: "Category A.Option A",
name: "Option A",
options: [
{ code: "Category A.Option A.Option 1", name: "Option 1" },
{ code: "Category A.Option A.Option 2", name: "Option 2" },
],
},
{
code: "Category A.Option B",
name: "Option B",
options: [
{ code: "Category A.Option B.Option 1", name: "Option 1" },
{ code: "Category A.Option B.Option 2", name: "Option 2" },
],
},
],
code: "Category A",
},
{
name: "Category B",
options: [
{ code: "Category B.Option A", name: "Option A" },
{
code: "Category B.Option B",
name: "Option B",
options: [
{ code: "Category B.Option B.Option 1", name: "Option 1" },
{ code: "Category B.Option B.Option 2", name: "Option 2" },
],
},
],
code: "Category B",
},
{
name: "Category C",
options: [{ code: "Category C.Option A", name: "Option A" }],
code: "Category C",
},
],
},
}

{
isMandatory: false,
type: "multiselectdropdown",
key: "multiselect",
label: "With Icons",
disable: false,
variant: "nestedtextmultiselect",
populators: {
name: "nestedtextmultiselect-With Icon",
optionsKey: "name",
error: "Error!",
required: false,
showIcon:true,
isDropdownWithChip:true,
options: [
{
code: "Option1",
name: "Option1",
icon: "Article",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor ",
},
{
code: "Option2",
name: "Option2",
icon: "Article",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor",
},
{
code: "Option3",
name: "Option3",
icon: "Article",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor",
},
],
},
},

Name                           Description

toggleButtons                   A list of ToggleButtonModels that define the toggle 
                                button

onChanged                       a callback when a toggle is selected

selectedIndex                 initially selected toggle(by default first toggle will 
                              be selected)

contentPadding                optional Padding around toggle buttons

ToggleList(
  toggleButtons: [
    ToggleButtonModel(
      name: 'Toggle 1', key: 'key1', onSelected: (value) {}),
    ToggleButtonModel(
      name: 'Toggle 2', key: 'key2', onSelected: (value) {}),
    ToggleButtonModel(
      name: 'Toggle 3', key: 'key3', onSelected: (value) {}),
  ],
  selectedIndex: 1,
onChanged: (selectedValues) {},
);

Name                            Description

radioButtons                 A list of RadioButtonModel representing the radio button

onChanged                   a callback when a radio button is selected

groupValue                  the current selected value in the radio group, using this
                            any radio button can be selected initially, the default is a
                            empty string.

isDisabled                   indicates whether radio buttons are disabled

containerPadding              padding applied around each radio button

RadioList(
  onChanged: (value) {},
  radioButtons: [
    RadioButtonModel(code: '1',name: 'One',),
    RadioButtonModel(code: '2', name: 'Two'),
    RadioButtonModel(code: '3', name: 'Three'),
  ],
);

Name                             Description

textEditingController         controller for managing the text

onChange                      a callback when a new option is selected

items                         A list of DropdownItem representing the options

suffixIcon                    modify the suffixIcon to open dropdown

dropdownType                   dropdown can be nested dropdown( type is mandatory in
                               nested dropdown item list)

emptyItemText                 Text to display when empty options are sent or no match
                              is found during searching

isSearchable                 flag indicating if the dropdown should support filtering
                             option

selectedOption              the default selected option

isDisabled                 flag indicating where dropdown is disabled(default: false)

code(required)                 unique identifier for option

name(required)                 the label or name of dropdown option

description                    additional description for the dropdown option

textIcon                      Icon to be displayed inside the dropdown option

textIcon                      Icon to be displayed inside the dropdown option

type                          in case of nested dropdown type will be sent

code(required)                 unique identifier for that node

name(required)                 displaying the name or label for the node

children                      a list of the tree node

DigitDropdown<int>(
  dropdownType: type.singleSelect,
  onChange: (String value, String index) => {},
  textEditingController: TextEditingController(),
  items: const [
    DropdownItem(name: 'first',code: '1',),
    DropdownItem(name: 'second',code: '2',),
    DropdownItem(name: 'third',code: '3',),
    DropdownItem(name: 'fourth',code: '4',),
  ],
);

DigitDropdown<int>(
  dropdownType: type.singleSelect,
  onChange: (String value, String index) => {},
  textEditingController: TextEditingController(),
  items: const [
    DropdownItem(
      name: 'first',
      code: '1',
      description: 'description for first one',
      profileImageUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzBXNuO6PezhC18aYH_2cYtS0I7KbxoKYdwA&usqp=CAU',
    ),
    DropdownItem(
      name: 'second',
      code: '2',
      description: 'description for second one',
      profileImageUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzBXNuO6PezhC18aYH_2cYtS0I7KbxoKYdwA&usqp=CAU',
    ),
    DropdownItem(
      name: 'third',
      code: '3',
      description: 'description for third one',
      profileImageUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzBXNuO6PezhC18aYH_2cYtS0I7KbxoKYdwA&usqp=CAU',
    ),
    DropdownItem(
      name: 'fourth',
      code: '4',
      description: 'description for fourth one',
      profileImageUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzBXNuO6PezhC18aYH_2cYtS0I7KbxoKYdwA&usqp=CAU',
    ),
  ],
);

DigitDropdown<int>(
  dropdownType: type.singleSelect,
  dropdownSubtype: DropdownSubtype.nested,
  onChange: (String value, String index) => {},
  textEditingController: TextEditingController(),
  dropdownType: DropdownType.nestedSelect,
  items: const [
    DropdownItem(name: 'first',code: '1',type: 'Type A',),
    DropdownItem(name: 'second',code: '2',type: 'Type B'),
    DropdownItem(name: 'third',code: '3',type: 'Type A',),
    DropdownItem(name: 'fourth',code: '4',type: 'Type B'),
  ],
);

TreeSelectDropDown<int>(
  dropdownType: type.singleSelect,
  dropdownSubtype: DropdownSubtype.tree,
  onOptionSelected: (List<TreeNode> selectedOptions) {},
  options: [
      TreeNode('C', 'C', [
      TreeNode('C.C1', 'C1', []),
      TreeNode('C.C2', 'C2', []),
    ]),
    TreeNode('D', 'D', [
      TreeNode('D.D1', 'D1', []),
      TreeNode('D.D2', 'D2', []),
    ]),
  ],
  controller: TreeSelectController(),
);

Name                             Description

options                         A list of DropdownItem representing options

onOptionSelected                callback function when an option is selected

selectionType                   nested Selected(type is required inside DropdownItem)

selectedOptions                  List of DropdownItem, which will be selected by 
                                 default

chipConfig                       configuration of appearance of selected option

suffixIcon                      custom suffix icon

focusNode                       a focus node can be passed, to control focus

isDisabled                      whether dropdown is enabled or disabled

clearAllText                    Text for Clear all button in chip selection

valueMapper                      mapper to show selected option inside the chip

controller                      MultiSelectController can be passed

MultiSelectDropDown<int>(
  dropdownType: type.multiSelect,
  onOptionSelected: (List<DropdownItem> selectedOptions) {},
  options: const [
    DropdownItem(code: '1', name: 'first'),
    DropdownItem(code: '2', name: 'second'),
    DropdownItem(code: '3', name: 'third'),
    DropdownItem(code: '4', name: 'four'),
  ],
);

MultiSelectDropDown<int>(
  dropdownType: type.multiSelect,
  dropdownSubtype: DropdownSubtype.nested,
  onOptionSelected: (List<DropdownItem> selectedOptions) {},
  options: const [
    DropdownItem(
      code: '1', name: 'first', type: "Type A"),
    DropdownItem(
      code: '2', name: 'second', type: "Type A"),
    DropdownItem(
      code: '3', name: 'third', type: "Type A"),
    DropdownItem(
      code: '4', name: 'four', type: "Type B"),
    DropdownItem(
      code: '5', name: 'five', type: "Type B"),
  ],
  selectionType: SelectionType.nestedMultiSelect,
);

TreeSelectDropDown<int>(
  dropdownType: type.multiSelect,
  dropdownSubtype: DropdownSubtype.tree,
  onOptionSelected: (List<TreeNode> selectedOptions) {},
  options: [
    TreeNode('C', 'C', [
      TreeNode('C.C1', 'C1', []),
      TreeNode('C.C2', 'C2', []),
    ]),
    TreeNode('D', 'D', [
      TreeNode('D.D1', 'D1', []),
      TreeNode('D.D2', 'D2', []),
    ]),
  ],
  controller: TreeSelectController(),
);

import './index.css' import { initPGR } from '@egovernments/pgr-module'; import punjabLogo from './assets/logo.png' const theme = { "--primary-color": "#3f51b5", "--text-color": "#212121" } const PGRComponents = { "logo": punjabLogo } const initPunjabPGR = (onRouteChange) => initPGR({ state: "pb", element: "#appWrapper", components: PGRComponents, onRouteChange, theme }); export default initPunjabPGR;