# UCSearch

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.0.0.

## Bootstrap 5 Compatibility

✅ **Fully Compatible with Bootstrap 5**

This component has been migrated from Bootstrap 3 to Bootstrap 5 and includes:

- Updated CSS classes: `panel` → `card`, `btn-primary` → `btn btn-primary`
- Modern responsive design with Bootstrap 5 grid system
- Enhanced form controls using `form-control` and `form-select`
- Improved button styling with outline variants (`btn-outline-*`)
- Better accessibility with ARIA attributes

### Migration Summary

- **Bootstrap 3 Patterns Migrated**: 6 patterns including buttons, grid, panels, and forms
- **Bootstrap 5 Features Added**: Cards, modern form controls, utility classes
- **Migration Priority**: HIGH (completed)

## Version

notes: new ui under canary.x tags

Version 3.8.18

1. add default value option first day and last day of month for search type datepicker

Version 3.8.17

1. add showRptExecType input to show generate report execution type input

Version 3.8.16

1. undo fix checkNumericPair to read value from form - will rework later
2. remove trailing `\` if restriction is LIKE

Version 3.8.15

1. add ? when accessing experimental value from environment

Version 3.8.14

1. add disabled button search when criteria not ready
2. fix checkNumericPair to read value from form

Version 3.8.13

1. add input useOthersSelection for search type ddl

Version 3.8.12

1. fix set task definition key or process key to integration object on search when only has one option

Version 3.8.11

1. fix affectedCriteria for lookup

Version 3.8.10

1. add affectedfilter for lookup
2. expose search paging via `notify` input

Version 3.8.9

1. add additional property (formRaw) when emit genRpt

Version 3.8.8

1. fix datetimeService.GetNewDate to always return new Date()

Version 3.8.7

1. add `UcsearchFormService`. Use `getform()` to get FormGroup / form value from UcSearch

Version 3.8.6

1. add `isLockHo` in input type `officeRoleCodes`

Version 3.8.5

1. fix lookup circular deps
2. fix behavior `enter` when isReport is true

Version 3.8.4

1. add support restriction like for ddl

Version 3.8.3

1. change form.get to form.controls[_control_name_]

Version 3.8.2

1. remove unnecessary p tag

Version 3.8.1

1. support 'useFirstValue' option for search type dropdown - will select the first value as default value
2. fix input type currency dealing with multiple same name

Version 3.8.0

1. support search type `datepicker` to using ucdatepicker when environment.experimental.useNewDatepicker set to true
2. fix minor bug related to search type `datepicker`
3. fix bug related to search type `time` when using timepair
4. fix minor bug related to seatch type `blank`

Version 3.7.12

1. fix typo function

Version 3.7.11

1. fix data not set properly for where and from value
2. fix value not patch properly for search component type dropdown

Version 3.7.10

1. add search type `time`. will bind to assigned datepicker when timePair not empty

Version 3.7.9

1. fix lookup when empty
2. fix when restriction is undefined for type datepicker

Version 3.7.8

1. add input type `month` and `year`

Version 3.7.7

1. fix isolated dictionaries - will save to dicts when request only one parameter

Version 3.7.6

1. fix numeric default value

Version 3.7.5

1. fix numeric and currency attribute name for search

Version 3.7.4

1. add validation min/max for type numeric and currency
2. fix datepicker attribute name for search

Version 3.7.3

1. fix Show Errors: Migrated all form control error handling to utilize Reactive Forms, ensuring consistent error display and handling.
2. fix Dynamic Date Boundaries: Resolved issue where setting min/max values for dynamic date inputs would incorrectly affect themselves.
3. add Support for Multiple Parameters in Affected Dropdowns: Implemented support for passing multiple parameters via isolated dictionaries. These dictionaries capture dropdownlist data from the previous search component, enabling better control over dropdown interactions.

Version 3.7.2

1. enhance dynamic date min/max via datepickerPair -> now datepickerPair can be set to 1 variable act as base value for min/max with the value of the same datepickerPair
2. add option to exclude input from criteria using `excludeFromCrit` option

Version 3.7.1

1. support multiple parameter for affected dropdown
2. support dynamic date min/max via datepickerPair

Version 3.7.0

1. add support uclookup on search component

Version 3.6.5

1. fix export file data - data type boolean will convert into `YES` and `NO`

Version 3.6.4

1. fix export file data - now data exported with the same order as on grid UI

Version 3.6.3

1. Migrate dropdown popup to ngbDropdown

Version 3.6.2

1. fix date range guard validation

Version 3.6.1

1. add action to export list on each property value

Version 3.6.0

1. add sequential export file

Version 3.5.14

1. fix parse currency to compare

Version 3.5.13

1. add option `keepDdl` - will make dropdown still a dropdown despite there were only one data in ddl

Version 3.5.12

1. remove validation `restriction` for min/max date. will set the min/max date even when `restriction` is undefined

Version 3.5.11

1. add validation min / max by numericpair (will compare date to the same numericpair depends on lte or gte)

Version 3.5.10

1. fix min / max date validation

Version 3.5.9

1. fix min / max date validation
2. add validation min / max by datepickerpair (will compare date to the same datepickerpair depends on lte or gte)

Version 3.5.8

1. fix dropdown. will send value as criteria if there's only one option inside dropdown

Version 3.5.7

1. add support uc-directive-validate-date

Version 3.5.6

1. add support custom object, key, and value name for dropdown - will default to `ReturnObject`, `Key`, and `Value` respectively

Version 3.5.5

1. handle if response data null

Version 3.5.4

1. fix export type col length
2. configurable list inside export as button

Version 3.5.3

1. fix calling getQueryParams (ngx-router)

Version 3.5.2

1. fix parameter when calling getQueryParams (ngx-router)

Version 3.5.1

1. add support fe-core for ngx-router

Version 3.5.0

1. add feature to set where value from the search component value - by name property

Version 3.4.10

1. add support autofill for type dropdownlist
2. add support autofill source from dicts

Version 3.4.9

1. add support for multiple request object for dropdown
2. add support for request object get data from useraccess

Version 3.4.8

1. add clear default value on focus input currency

Version 3.4.7

1. fix guard clause for orderby

Version 3.4.6

1. uppercase value on autofill

Version 3.4.5

1. fix affected filter when set back to all

Version 3.4.4

1. add placeholder

Version 3.4.3

1. change font size
2. change dropdown icon

Version 3.4.2

1. change font color

Version 3.4.1

1. add option on/off uppercase for search input

Version 3.4.0

1. add option useraccess for autofill source
2. add isReadonly config

Version 3.3.3

1. fix subsection title

Version 3.3.2

1. add button hover

Version 3.3.1

1. Update UI/UX padding

Version 3.3.0

1. Update UI/UX
2. support dropdownlist criteria from queryparam

Version 3.2.0

1. add support for exclude export list. user can select exclude data to display on excel

Version 3.1.1

1. change copy object from shallow copy (spread) to deep copy (JSON.parse(JSON.stringify)). notes structured clone not available as for TS version < 4.7

Version 3.1.0

1. add support for additional export list. user can select additional data to display on excel when doing export other than data displayed on grid

Version 3.0.8

1. add guard clause for orderby

Version 3.0.7

1. fix guard clause for dataInput on export file

Version 3.0.5

1. fix dataInput undefined

Version 3.0.4

1. fix dataInput

Version 3.0.3

1. fix error when set title

Version 3.0.2

1. Fix bug search addToTemp, data not filtered

Version 3.0.1

1. update readme

Version 3.0.0

1. Fix versioning for angular 13
2. support data input

Version 2.9.23 (angular 13) & 2.13.6 (angular 7)

1. Fix bug error ketika isSearched true

Version 2.9.22 (angular 13) & 2.13.5 (angular 7)

1. Fix bug ketika melakukan sort, hasil table berubah sesuai dengan crit. hasil table berubah jika hanya tombol search diklik

Version 2.9.21 (angular 13) & 2.13.4 (angular 7)

1. add option autofill for auto input based on source

Version 2.9.20 (angular 13)

1. add option export file as csv and json
2. Fix bug ketika export excel untuk type action - selain button / icon

Version 2.9.19 (angular 13)

1. Fix header in export excel - nama header dalam file excel akan sesuai dengan nama header pada gridview

Version 2.9.18 (angular 13)

1. Fix bug ketika export excel untuk type action

Version 2.9.17 (angular 13)

1. Export excel button will appear if only user has click search button.
2. Export excel data will display the same data as grid view.
3. Export excel file name will adjust the json file title.

Version 2.9.16 (angular 13)

1. bug fix - type numeric untuk value > 1000

Version 2.9.15 (angular 13)

1. bug fix - check required when generate report

Version 2.9.14 (angular 13) & 2.13.3 (angular 7)

1. add option on ExportTypeList for Justify PDF
2. remove option XLS & DOC from ExportTypeList

Version 2.9.13 (angular 13) & 2.13.2 (angular 7)

1. tambah penjagaan criteria ketika export excel

Version 2.9.11

1. tambah penjagaan check gte/lte/gt/lt

Version 2.9.10

1. kasih penjagaan check gte/lte/gt/lt

Version 2.9.9

1. add validation check gte/lte/gt/lt if numeric

Version 2.13.1

1. add validation buat numeric, from gbs > dari to

Version 2.12.1

1. wfKeyFilter harus string with split delimiter (xania;yoan;apsari)

Version 2.11.28

1. async ngOnInit, initiateForm, reset

Version 2.11.26

1. type dropdownsearch
1.
1.
1.

Version 2.9.0

1. Update new attribute readonly buat datepicker

Version 2.8.0

1. restriction tidak trigger checkInputDate

Version 2.7.0

1. Tambah attribute data-numericpair

Version 2.6.0

1. Hapus logic skip untuk type "officeRoleCodes"

Version 2.5.3

1. Fix Bug Reset Report Type jadi kosong

Version 2.5.2

1. Tambah attribute data-datepickerpair

Version 2.5.1

1. Tambah output buat emit request get all datanya

Version 2.4.1

1. Fix condition affected value punya affected value

Version 2.3.8

1. Fix condition affected value punya affected value

Version 2.3.7

1. Update condition affected value punya affected value

Version 2.3.6

1. LOGGING buat CMS-119

Version 2.3.5

1. LOGGING buat CMS-119

Version 2.3.4

1. LOGGING buat CMS-119

Version 2.3.3

1. LOGGING buat CMS-119

Version 2.3.2

1. Test \*

Version 2.3.1

1. update folder/file name to lower-case

Version 2.3.0

1. Hapus penggunaan ddlEnvironments

Version 2.2.64

1. Bug fixing ucsearch

Version 2.2.63

1. logging

Version 2.2.62

1. logging

Version 2.2.61

1. logging

Version 2.2.60

1. Bug fixing ucsearch

Version 2.2.59

1. Bug fixing ucsearch

Version 2.2.58

1. Bug fixing ucsearch

Version 2.2.57

1. Menambah tipe ProcessKey

Version 2.2.56

1. tambahan input property InputSearchObj.fromValue

Version 2.2.55

1. isCriteriaDataTable pada type dropdown

Version 2.2.54

1. setMonthDDL dropdown list + setDefaultValueYear + setDefaultValueMonth

Version 2.2.53

1. isCriteriaDataTable pada type datetime

Version 2.2.52

1. ucsearch bug when ddltype one

Version 2.2.51

1. datepicker tambahan isTime fungsiny buat ubah date ada time

Version 2.2.50

1. bug fixing Translate di button

Version 2.2.49

1. rapihin text

Version 2.2.48

1. bug fixing dropdown

Version 2.2.47

1. taskDefinitionKey + officeRoleCodes bugV2

Version 2.2.45

1. taskDefinitionKey + officeRoleCodes bug

Version 2.2.41

1. onchangeEvent bug

Version 2.2.40

1. tambah type taskDefinitionKey + officeRoleCodes

Version 2.2.38

1. Tambah fitur exclude untuk dropdown

Version 2.2.37

1. Tambah type claim
2. CriteriaObj tambah property isCriteriaDataTable
3.

Version 2.2.32

1. using UcUpperCase

Version 2.2.29

1. propname ddl bug, get from attribute

Version 2.2.26

1. type dropdown new dtmType
2. ddl type default value by BD

Version 2.2.25

1. Fixed html for type numeric and datepicker
2. Fixed validation for datepicker

Version 2.2.24

1. ddl isEvent jika list 1 di trigger filter nya

Version 2.2.21

1. Comment validation datepicker when click search

Version 2.2.20

1. Add attr.label

Version 2.2.19

1. Add Validation min max pada DatePicker
2. Fixed patch default value
3. Fixed patch value datepicker ketika lihat BusinessDate

Version 2.2.18

1. fix export excel

Version 2.2.16

1. fix datetime value BD

Version 2.2.15

1. reset with viewchild

Version 2.2.14

1. listEnvironments, setting urlenvi in json

Version 2.2.12

1. hapus logic popup message jika required

Version 2.2.11

1. isRequired, jika required dan tidak diisi valueny maka akan keluar error message seperti form

Version 2.2.10

1. isRequired, jika required dan tidak diisi valueny maka akan muncul pop up message

Version 2.2.9

1. Add joinType

Version 2.2.8

1. update ReadMe

Version 2.2.7

1. join query dengan API luar
2. update InputSearchObj

Version 2.2.4

1. TranslateModule

Version 2.2.3

1. bug onChangeEvent

Version 2.2.2

1. filterPropName

Version 2.2.1

1. merapikan reset

Version 2.2.0

1. ucsearch support ucreport

Version 2.1.5

1. Input isReport
2. Output genRpt

Version 2.1.4

1. typo

Version 2.1.3

1. attribute data-name

Version 2.1.2

1. dropdown if only 1 option show label only

Version 2.1.0

1. update option all ddl

Version 2.0.73

1. change property json : isSelectOne to ddlType

Version 2.0.72

1. type currency

Version 2.0.50

1. rollback

Version 2.0.49

1. form to div

Version 2.0.48

1. keyup

Version 2.0.47

1. rollback

Version 2.0.46

1. Add type switch

Version 2.0.37

1. search able to do like restriction

Version 2.0.34

1. css title

Version 2.0.31

1. hapus headerTitle
2. tambah sectionTitle di json
3. title jdi card title paging

Version 2.0.30

1. header title in ucpaging

Version 2.0.29

1. pageSize

Version 2.0.28

1. fix value date ambil dari businessDt

Version 2.0.27

1. fix bug whereValue undefined

Version 2.0.26

1. update whereValue jadi list object {property, value}

Version 2.0.25

1. tambahan input property
   - InputSearchObj.title
   - InputSearchObj.whereValue

Version 2.0.24

1. fix onChangeEvent baca fullpath

Version 2.0.23

1. fix logic date

Version 2.0.22

1. fix date

Version 2.0.20

1. input title

Version 2.0.19

1. Orderby default

Version 2.0.18

1. #UCSearchClick buat panggil click

Version 2.0.17

1. dropdown bentuk path dan environment dalam object ddlEnvironments

Version 2.0.16

1. tambah kondisi dropwdown isQueryIn, jika select all criteria nya dari list dropdown

Version 2.0.14

1. Key Value

Version 2.0.13

1. tambah ReturnObject di ResolveObj

Version 2.0.12

1. tambah rowVersion

Version 2.0.11

1. ubah response model

Version 2.0.9

1. Update textbox tambah data restriction

Version 2.0.8

1. Menambahkan Query String pada export Excel

Version 2.0.7

1. Update validasi additional criteria

Version 2.0.6

1. Update add criteria

Version 2.0.5

1. Update add criteria

Version 2.0.4

1. Update add criteria

Version 2.0.3

1. change export data button icon

Version 2.0.2

1. fix exportData show

Version 2.0.1

1. add search by queryString

Version 2.0.0

1. Update ReadMe

Version 1.0.17

1. Update ReadMe

Version 1.0.16

1. Update ReadMe

Version 1.0.15

1. Update ReadMe

Version 1.0.14

1. Update ReadMe

Version 1.0.11

1. Tambahan FlaTModuleId

Version 1.0.10

1. Tambahan Encapsulation

Version 1.0.9

1. ubah icon subsection

Version 1.0.8

1. Ubah Search Component agar dapat di tambahkan criteria (contoh: refMasterTypeCode)

Version 1.0.7

1. ubah search component ketika menerima url environment

Version 1.0.6

1. ubah search title position, dan subsection icon

Version 1.0.5

1. reset input search, merapikan coding

Version 1.0.4

1. addCritInput penjagaan undefined

Version 1.0.2

1. Fix InputObj, filter with function

Version 1.0.1

1. Added ReadMe

## Bootstrap 5 Features

### CSS Classes Used

This component utilizes the following Bootstrap 5 classes:

```scss
// Layout & Grid
.col-*                  // Responsive grid columns
.col-md-*              // Medium breakpoint columns
.card                  // Replaces .panel
.card-body             // Replaces .panel-body

// Forms
.form-control          // Enhanced form inputs
.form-select           // Modern select dropdowns
.btn                   // Button base class
.btn-outline-*         // Outline button variants

// Utilities
.d-inline              // Display utilities
.d-block               // Block display
```

### Responsive Design

- **Mobile First**: Optimized for mobile devices with responsive breakpoints
- **Grid System**: Uses Bootstrap 5 flexbox grid with `.col-*` classes
- **Form Layout**: Responsive form controls that adapt to screen size

### Accessibility Improvements

- **ARIA Labels**: Enhanced screen reader support
- **Keyboard Navigation**: Full keyboard accessibility
- **Focus Management**: Proper focus indicators and management
- **Form Validation**: Accessible error messaging

## Dependency Module

import this module :

- FormsModule
- **Bootstrap 5**: Requires Bootstrap 5.3.0 or higher
- **@ng-bootstrap/ng-bootstrap**: For Bootstrap 5 Angular components

## Selector

lib-ucsearch

## Input

1. searchInput : InputSearchObj (object) \*mandatory
2. pageSize : default search pageSize
3. isReport : boolean // default false | for ucreport usage
4. showRptExecType: boolean // default false | for ucreport usage

## Output

1. result : Emitting event after search, return resultData of search paging
2. genRpt : { ExportType: number, showRptExecType: number, ElRef: ElementRef } // ucreport usage
3. reqGetAllData : Emitting event after search, return request for get all data

## Object property & JSON property

InputSearchObj :

- \_url : search.json
- enviromentUrl : environment path (foundation, setting, vendor)
- title : title for section paging // \*optional, if using same json for multiple component
- apiQryPaging : search paging API path
- listEnvironments : Array<EnvisObj> // set default envi url
- whereValue :
  [
  {
  property: "IsActive",
  value: "true"
  },
  {
  property: "BizTmpltCode",
  value: "CF4W"
  }
  ] \*optional // list for value in whereQuery
- fromValue :
  [
  {
  {
  property: "CustId",
  value: "123"
  },
  {
  property: "AppId",
  value: "20"
  }
  }
  ] \*optional // list for value in fromQuery
- switchValue :
  [
  {
  property: "BizTmpltCode",
  value: "CF4W"
  }
  ] \*optional // list value for headerList type switch
- isJoinExAPI : boolean // to determine if query join external API
- integrationObj : {// mandatory information that needed to be send if isJoinExAPI true
  baseUrl: environment url
  apiPath: routing url
  requestObj: request object for the external API
  leftColumnToJoin: querystring join query external API // written from the alias select
  from querystring
  rightColumnToJoin: query external API join querystring // written from the alias select
  from query external API
  joinType : string // determine join type (LEFT | default INNER) *optional
  } IntegrationObj (object)
  *notes : querystring and query external API cannot have the same alias in select querystring or returnObj external API
- dataInput : alternative data supply; use ESModule import to load json data, then pass the value into here. will override http.get

search.json :

```javascript
{
    "title" : "title", // Title paging
    "sectionTitle" : "title", // section title paging *optional, default title in section "paging"
    "exportExcel" : "false", // boolean: true|false
    "component" : [ // search criteria property
        {
            "type" : "textbox", // type input
            "label" : "search id", // label criteria name
            "name" : "searchId", // property search to backend
            "id" : "uniqueId", // bound the label with the input, when click label *optional
            "value" : "", // default value of input *optional
            "placeholder" : "placeholder", // *optional
            "datatype" : "text", // data type of input (text, numeric, date)
            "restriction" : "like", // restriction criteria for backend (like)
            "isRequired" : false, // boolean: true|false, if true will show pop message when input value empty
            "isCriteriaDataTable" : false, // mandatory, default false, filter criteria from datatable or not
        },
        {
            "type" : "textarea",
            "label" : "textarea",
            "name" : "textareaId",
            "id" : "uniqueId",
            "value" : "",
            "placeholder" : "",
            "datatype" : "text"
        },
        {
            "type" : "numeric",
            "label" : "numeric <=",
            "name" : "numericId",
            "id" : "uniqueId",
            "value" : "1",
            "restriction" : "lte", // restriction criteria for backend (lte, gte)
            "placeholder" : "",
            "datatype" : "numeric"
        },
        {
            "type" : "currency",
            "label" : "Money Amount",
            "name" : "currencyId",
            "id" : "uniqueId",
            "value" : "1",
            "restriction" : "eq",
            "placeholder" : "",
            "datatype" : "numeric",
            "isCustom" : "false" // boolean: true|false
            // setting currencyMask if isCustom true
            "thousands" : "," // string | separator
            "decimal" : "." // string | separator
            "align" : "right" // string | left,right
            "allowNegative" : "" // boolean: true|false
            "allowZero" : "" // boolean: true|false
            "precision" : "2" // number
            "nullable" : "" // boolean: true|false
        },
        {
            "type" : "datepicker",
            "label" : "Date From",
            "name" : "dateDt",
            "id" : "uniqueId", //*mandatory di ucReport
            "value" : "", // BD : set value base on BusinessDate. format: BD + (+|-) + number.
            "isTime" : "" // boolean: true|false
            "restriction" : "gte",
            "datatype" : "date",
            "minDate" : "2-1-2021", //format can be either, MM-dd-YYYY or dd-MMM-yyyy
            "maxDate" : "31-Mar-2021",
            "datepickerPair": "string" //date from and date to have a same value (for report only)
        },
        {
            "type" : "dropdown",
            "label" : "dropdown",
            "name" : "dropdownId",
            "id" : "uniqueId",
            "value" : "BD+", // BD : set value base on BusinessDate. format: BD + (+|-) + number(default 1).
            "datatype" : "date",
            "dtmType" : "month" // string: (month | year) format : "month"/"year" + (+-|-+|+|-) + number. generate list month/year base on number.
            "ddlType" : "all", // string: (one, all, blank) // (select one, select all, 'no select option') | default select all
            "items" : [ // hardcode the option list
                {
                    "key" : "1",
                    "value" : "Yes"
                },
                {
                    "key" : "0",
                    "value" : "No"
                }
            ],
            "isFromURL" : "true", // boolean: true|false, if true get the option list from backend
            "url" : "", // full path get keyValue API *mandatory, if isFromUrl true
            "itemsUrl" : [], // *mandatory if isFromUrl true, property to store option list from backend
            "criteriaPropName" : "typeCode", // additional criteria property *optional
            "criteriaPropValue" : "TYPE_CODE" // additional criteria value *optional
        },
        {
            "type" : "dropdown",
            "label" : "dropdown",
            "name" : "dropdownId",
            "id" : "uniqueId",
            "value" : "",
            "datatype" : "date",
            "ddlType" : "all", // string: (one, all, blank) // (select one, select all, 'no select option') | default select all
            "items" : [],
            "isEvent" : "true", // boolean: true|false, if true dropdown criteria affect other dropdown criteria
            "affectedFilter" : ["dropdownId", "searchId"], // affected filter check by name
            "filterPropName" : "Id", // string, request propName for ddl affectedFilter
            "isFromURL" : "true",
            "url" : "", // full path url api
            "path": "", // path api
            "criteriaPropName": "", // criteria property name
            "criteriaPropValue": "", // criteria value
            "itemsUrl" : [],
            "exclude" : [] // list value to exclude from list
        },
        {
            "type" : "dropdownSearch",
            "label" : "dropdown",
            "name" : "dropdownId",
            "value" : "",
            "descr" : "", // value yg tampilin di inputan dds(drop-down-search)
            "ddsType" : "true", // string: (one, all, blank) // (select one, select all, 'no select option') | default select all
            "placeholder": "FILTER",
            "size": 10, // height of dds, *mandatory
            "isListHide": true, // default setting, *mandatory
            "isFromURL": true,
            "isQueryIn": true,
            "environment": "", // key name from listEnvironments
            "path": "", // path api
            "items" : [],
            "itemsUrl" : [],
            "criteriaPropName": "", // criteria property name
            "criteriaPropValue": "", // criteria value
            "exclude" : [] // list value to exclude from list

        },
        {
            "type": "taskDefinitionKey",
            "label" : "taskDefinitionKey",
            "datatype": "text",
            "name" : "taskDefinitionKeyId",
            "id" : "uniqueId",
            "placeholder": "Placeholder",
            "isFromURL": true, //*mandatory
            "ddlType" : "one", // *mandatory string: one
            "path": "", // *mandatory path api
            "criteriaPropValue" : "TaskDefinitionKey" //field yang mau dicompare
        },
        {
            "type": "processKey",
            "label" : "processKey",
            "datatype": "text",
            "name" : "processKeyId",
            "id" : "uniqueId",
            "placeholder": "Placeholder",
            "isFromURL": true, //*mandatory
            "ddlType" : "one", // *mandatory string: one
            "path": "/RefMaster/GetListKeyValueActiveByCode", // *mandatory path api
            "criteriaPropName": "Code",
            "criteriaPropValue" : "PRCS_KEY_LEAD_CANCEL", //field yang mau dicompare
            "wfKeyFilter" : "ProcessKey"
        },
        {
            "type": "officeRoleCodes",
            "label" : "officeRoleCodes",
            "datatype": "text",
            "name" : "officeRoleCodesId",
            "id" : "uniqueId",
            "placeholder": "Placeholder",
            "isFromURL": true,
            "ddlType" : "all", // string: (one, all, blank) // (select one, select all, 'no select option') | default select all
            "isQueryIn": true, // boolean: true|false, if true and ddlType all then in list insert to criteria
            "path": "", // path api
            "isLockHo": false //boolean: true|false, if true then ddl value will be locked to Head Office only
        },
        {
            "label" : "label",
            "type" : "claim",
            "ddlType" : "all", // string: (one, all, blank) // (select one, select all, 'no select option') | default select all
            "isCriteriaDataTable" : false, // mandatory, default false, filter criteria from datatable or not
        },
        {
            "type" : "switch",
            "case" : [ // list of case
                        {
                            "conditions" : [ // list of conditions
                                {
                                    "property" : "type", // property for condition checking
                                    "value" : "EXE", // value to check
                                    "restriction" : "EQ" // condition restrictions (EQ, NEQ, GT, GTE, LT, LTE | default EQ) *optional
                                }
                            ],
                            "result" : { // result of this case
                                "type": "textbox", // type like bodyList : text,decimal,date,link,boolean
                                "label" : "Action",
                                "datatype" : "text",
                                "name" : "dateDt",
                                "id" : "uniqueId",
                                "value" : "",
                                "restriction" : "gte"
                            },
                            "isHide" : true
                        }
                     ]
        }
    ],
    "querystring": { // query data by sql
        "select": "", // ex: "SELECT APP_ID AS appId, IS_ACTIVE AS isActive" *must use alias, field to select first must be the first row of grid
        "from": "", // ex: "FROM dbo.APP WITH(NOLOCK)" *don't forget WITH(NOLOCK), INNER JOIN, DBO.
        "where": "", // ex: "WHERE IS_ACTIVE = 1"
        "where": "", // where when using whereValue, ex: "WHERE IS_ACTIVE = {0}" *must use whereValue
        // where untuk string/Date -> N'{0}', int -> {0}
        "groupby": "", // ex: "GROUP BY ....."
    },
    "orderby": {
        "key": "A.APP_ID", // sort by name
        "value": "true" // boolean: true|false, true|false = ASC|DESC
    }
}
}
```

## Code scaffolding

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

> Note: Don't forget to add `--project UCSearch` or else it will be added to the default project in your `angular.json` file.

## Build

Run `ng build UCSearch` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build UCSearch`, go to the dist folder `cd dist/ucsearch` and run `npm publish`.

## Running unit tests

Run `ng test UCSearch` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).