@matches_m2605/lokey-core-components

IDfy LoKey Core Components

Library for Core UI Components using LoKey design system

unocss-lit-ts

Unocss

UnoCSS is the instant atomic CSS engine, that is designed to be flexible and extensible. The core is un-opinionated, and all the CSS utilities are provided via presets.

unosss guide : unocss

Lit elements

Lit is a simple library for building fast, lightweight web components.

At Lit's core is a boilerplate-killing component base class that provides reactive state, scoped styles, and a declarative template system that's tiny, fast and expressive.

Lit elements guide : litElement

This repo will show you how to use unocss.

To install project and use components :

1. npm i git+https://idfy_lokey:[e-mail]/code/ui-libraries/idfy-lokey-core-components.git#Develop
2. add import statment in js file

import {} from "@idfy/lokey-core-components";

3. use component in html file.

<idfy-button id="button_1" variant="filled" label="filled"></idfy-button>

4. add event listeners to component

#fetch component to attach listener.
const button = document.querySelector("idfy-button")
button.addEventListener('event-name' , (event:any) => { code goes here })

for component devs :

kitchen sink :

this component library has a kitchen sink which displays all components.

1. run npm run start
2. open in browser : http://localhost:5173/

add Component to library :

1. add component file.

// template for basic component
import IDfyComponent, {
  idfyCss,
  idfyHtml,
  idfyProperty,
  idfyCustomElement,
} from '@/bases/IDfyComponent';

@idfyCustomElement(<component-name>)
export class <Component>Element extends IDfyComponent {
  static styles = idfyCss`
  @unocss-placeholder
  :host {
     write css
	}
 ;
  `;

  @idfyProperty({ type: String }) prop_name = 'value';

  render() {
    return idfyHtml`
      <div> write code here </div>
  `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    <component-name>: <Component>Element;
  }

  namespace JSX {
    interface IntrinsicElements {
      <component-name>: any;
    }
  }
}

2. add export string in index.ts file. export { <Component>Element } from'@/path-to-component-file';
3. add your compnent to index.html to view it.
4. follow kitchen sink steps from above.

To generate docs :

this project uses https://www.npmjs.com/package/web-component-analyzer package for documentation.

steps to add docs for your component :

1. add comments for component (refer package docs for details).
2. run npm run docs_md
3. check README.md for new changes

Components Guide and Usage:

idfy-button

Buttons help people take actions, such as sending an email, sharing a document, or liking a comment. There are four types of common buttons: primary, secondary, tertiary ,ghost.

HTML markup :

<idfy-button variant="primary" label="button"></idfy-button>
<idfy-button variant="primary" icon1="pencil" label="button"></idfy-button>
<idfy-button variant="primary" icon2="gear" label="button"></idfy-button>
<idfy-button variant="primary" icon1="pencil" icon2="gear" label="button"></idfy-button>
<idfy-button variant="primary" disabled="true" label="button"></idfy-button>    

Properties

Property	Type	Default	Description
disabled	"true"|"false"	"false"	enabled or disabled button
icon1	string	""	select icon from icon component , displayed on left side of button
icon2	string	""	select icon from icon component , displayed on right side of button
label	string	"Button"	display label of button
size	string	"md"	size of button
type	"primary"|"extra"|"success"|"error"|"info"|"neutral"	"primary"	variant of color
variant	"primary"|"secondary"|"tertiary"|"ghost"	"primary"	variant of button

Events

Event	Type	Description
button-clicked	CustomEvent<{ key: string; value: any; }>	fires a custom event on button click.

idfy-chip

Chips help people enter information, make selections, filter content, or trigger actions. There are three types of chips: filled, accent, outline.

HTML markup :

<idfy-chip label="chip" variant="filled" icon1="pencil" type="primary"></idfy-chip>
<idfy-chip label="chip" variant="filled" icon1="pencil" type="extra"></idfy-chip>
<idfy-chip label="chip" variant="accent" icon1="pencil" type="success"></idfy-chip>
<idfy-chip label="chip" variant="accent" icon1="pencil" type="error"></idfy-chip>
<idfy-chip label="chip" variant="outline" icon1="pencil" type="info"></idfy-chip>
<idfy-chip label="chip" variant="outline" icon1="pencil" type="neutral"></idfy-chip>   

Properties

Property	Type	Default	Description
auto_close	"true|false"	"false"	self destruct
auto_close_time	"string"	"2000"	self destruct time
disabled	"true"|"false"	"false"	enabled or disabled button
icon1	string	""	select icon from icon component , displayed on left side of button
icon2	string	""	select icon from icon component , displayed on right side of button
label	string	"label"	displays label of button
size	"xxs"|"xs"|"sm"|"md"|"lg"|"xl"|"xxl"	"md"	size of chips
type	"primary"|"extra"|"success"|"error"|"info"|"neutral"	"primary"	variant of color
variant	"filled"|"accent"|"outline"	"filled"	variant of chip

Events

Event	Description
button-clicked	fires a custom event on chip button click.

idfy-icon-button

Icon buttons help people take supplementary actions with a single tap.

HTML markup :

<idfy-icon-button id="button_14" icon="pencil"></idfy-icon-button>

Properties

Property	Type	Default	Description
disabled	"true"|"false"	"false"	Enables / Disables the button.
icon	string	"paperclip"	name of icon to be used in fab button.
variant	"no_border"|"filled"|"outlined"	"no_border"	no_border ,outlined ,filled.

Events

Event	Type	Description
button-clicked	CustomEvent<{ key: string; value: any; }>	fires a custom event on click.

idfy-card-body

Properties

Property	Type	Default
description	string	"Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat."
image	string	"data:image/png;base64,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"
subtitle	string	"Subhead"
title	string	"Title"

idfy-card

Properties

Property	Type	Default
variant	string	""

idfy-card-footer

Properties

Property	Type	Default
position	string	"end"

idfy-card-header

This is card header

Properties

Property	Type	Default
header	string	"Hello"
icon	string	"https://www.idfy.com/wp-content/uploads/2021/10/IDfy_Logo-1-1.png"
subhead	string	"World"

Events

Event	Type
prop-change	CustomEvent<any>

idfy-mini-card

Properties

Property	Modifiers	Type	Default
header		string	"Hello"
icon		string	"https://www.idfy.com/wp-content/uploads/2021/10/IDfy_Logo-1-1.png"
image		string	"data:image/png;base64,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"
styles	readonly
subhead		string	"World"
variant		string	"flat"

idfy-checkbox-input-group

Checkboxes group houses all checkbox items , groups selected children and stores output value.

HTML markup :

 <idfy-checkbox-input-group id="color_checkbox" label="Options" layout="horizontal">
    <idfy-checkbox-input key_name="option_1" label="Option 1" selected="true"></idfy-checkbox-input>
    <idfy-checkbox-input key_name="option_2" label="Option 2"></idfy-checkbox-input>
    <idfy-checkbox-input key_name="option_3" label="Option 3" selected="true"></idfy-checkbox-input>
  </idfy-checkbox-input-group>

Properties

Property	Type	Default	Description
column_width	'string'	""	width of each column
disabled	"true"|"false"	"false"	disabled attribute.
internals
label	"string"	""	label for group
layout	'horizontal'|'vertical'	"horizontal"	layout for checkbox items inside
required	'true'|'false'	"true"	is checkbox required in form ?
select_all	'true'|'false'	"false"	add a option to select/deselect all items
stretch	'true'|'false'	"false"	strech ?
value	'string'	"[]"	value for checkbox group

idfy-checkbox-input

Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.

Properties

Property	Type	Default	Description
color_selected	"true"|"false"	"true"	color_selected adds color when checkbox input item is selected
disabled	"true"|"false"	"false"	disabled attribute.
internals
key_name	"string"	"key_name"	key name attribute for checkbox input item
label	"string"	"Label"	label attribute for checkbox input item
name	"string"	""	name attribute for checkbox input item
selected	"true"|"false"	"false"	is selected checkbox input item ?
show_checkbox	"true"|"false"	"true"	to show checkbox svg in input item
supporting_text	"string"	""	supporting_text addes a string for supporting label
tabIndex	"string"	0	tabindex for input , default 0
value	"true"|"false"	""	value for checkbox input item

Events

Event	Type
checkbox-clicked	CustomEvent<this>

idfy-draggable-item

Properties

Property	Type	Default	Description
keyname	"string"	""	keyname attribute for draggable list item ,
label	"string"	""	label attribute for draggable list item ,

idfy-draggable-list

idfy-draggable-list , allows ordering of child 'idfy-draggable-item' , stores ordered items in value

HTML markup :

  <idfy-draggable-list name="draggable">
    <idfy-draggable-item keyname="op1" label="Option 1"></idfy-draggable-item>
    <idfy-draggable-item keyname="op2" label="Option 2"></idfy-draggable-item>
    <idfy-draggable-item keyname="op3" label="Option 3"></idfy-draggable-item>
    <idfy-draggable-item keyname="op4" label="Option 4"></idfy-draggable-item>
  </idfy-draggable-list>

Properties

Property	Type	Default	Description
internals
label	"string"	"Label"	label for draggable list .
numberOrder	"string"	"true"	show number order ? .
value	"string"	""	value attribute for draggable list .

idfy-file-upload-input

idfy-file-upload-input , element is used to create interactive controls for web-based forms in order to accept data from the user; it lets the user select a file.

HTML markup :

    <idfy-file-upload-input name="files"></idfy-file-upload-input>
    <idfy-file-upload-input name="files" multiple="true"></idfy-file-upload-input>

Properties

Property	Type	Default	Description
accept	"string"	""	accept file types attribute for file input element , add a CSV value.
accept_text	"string"	""	accept_text displays text on input , for which files and sizes accepted. eg. "image/*,video/*" ,".png,.jpeg,.mp4" , "image/*,.mp4"
action	"string"	""	action attribute adds action button for file input element.
action_event	"string"	"text_input_action"	custom event name for action button of text input
disabled	"true"|"false"	"false"	disabled/enabled attribute for file input element.
error_text	"string"	""	String to be displayed in error text.
helper_text	"string"	""	helper_text attribute for file input element.
internals
label	"string"	"Label"	label attribute for file input element.
multiple	"string"	"false"	multiple attribute for file input element.
required	"string"	"true"	reuired attribute for file input element.
size	"string"	""	size of input which is to be accepted ,value should be in kiloBytes.
value	"string"	[]	value attribute for file input element.

Events

Event	Type	Description
file-added	CustomEvent<this>	fires a custom event on file addition.
file-deleted	CustomEvent<this>	fires a custom event on file deletion.

idfy-form

form component is used to collect user input. The user input is most often sent to a server for processing.

idfy-form component needs following structure

HTML markup :

  <idfy-form form_title="User Form" action="/" method="POST">
        <idfy-form-content>
          .
          .
          form components
          .
          .
        </idfy-form-content>
  </idfy-form>

Properties

Property	Type	Default	Description
action	"string"	"/"	form action
form_valid	"true"|"false"	""	form_valid attribute stores validity for form , if any input form component return it's validity false , value is stored "false" utill input form component is returning false,
method	"string"	"POST"	form method

idfy-form-content

idfy-form-content component houses form components , and needs to be immediate and single child of a idfy-form

HTML markup :

  <idfy-form form_title="User Form" action="/" method="POST">
        <idfy-form-content>
          .
          .
          form components
          .
          .
        </idfy-form-content>
  </idfy-form>

Properties

Property	Type	Default	Description
bg_color	"string"	"transparent"	background color of form
border	"string"	""	border of form needs to be one of follwing structure, example => '1px black solid | 1px 2px black solid | 1px 2px 3px 4px black solid'
border_radius	"string"	""	border radius of form
form_title	"string"	"Form"	string to be displayed on form form title
margin	"string"	""	margin of form
padding	"string"	""	padding of form

idfy-pop-up

Properties

Property	Type	Default
action_button	string	"true"
action_button_1	string	"true"
action_button_2	string	"true"
body	string	"true"
button_1_label	string	"Clear"
button_2_label	string	"Done"
callback		"(() => {\n this.requestUpdate();\n }).bind(this)"
close_icon	string	"true"
enablePopup	string	""
header	string	"Modal Heading"
icon_box	string	"true"
padding	string	"20px"
variant	string	""

Events

Event	Type
popup-button-1	CustomEvent<this>
popup-button-2	CustomEvent<this>
popup-close

idfy-submit-button

---

Submit button for forms. There are four types of common buttons: primary, secondary, tertiary ,ghost.

HTML markup :

<idfy-submit-button variant="primary" label="button"></idfy-submit-button>
<idfy-submit-button variant="primary" icon1="pencil" label="button"></idfy-submit-button>
<idfy-submit-button variant="primary" icon2="gear" label="button"></idfy-submit-button>
<idfy-submit-button variant="primary" icon1="pencil" icon2="gear" label="button"></idfy-submit-button>
<idfy-submit-button variant="primary" disabled="true" label="button"></idfy-submit-button>    

Properties

Property	Type	Default	Description
disabled	string	"false"	enabled or disabled button : "true" or "false"
icon1	string	""	select icon from icon component , displayed on left side of button.
icon2	string	""	select icon from icon component , displayed on right side of button.
internals
label	string	"Submit"	displat label of button .
variant	string	"primary"	variant of button : primary, secondary, tertiary ,ghost.

Events

Event	Type	Description
submit	CustomEvent<{ key: string; value: any; }>	fires a custom event on button click.

idfy-text-area

idfy-text area .

HTML markup :

  <idfy-text-area label="input text" required="true" rows="5" cols="10" placeholder="enter text here ..." minLength="100" maxLength="1000"></idfy-text-area>

Properties

Property	Type	Default	Description
cols	"string"	""	decides col span for component ,
disabled	"true"|"false"	"false"	disabled attribute for component ,
internals
label	"string"	"Label"	label attribute for component ,
maxLength	"string"	""	max length of value for component valid in form,
minLength	"string"	""	minimum length of value for component valid in form,
placeholder	"string"	"Placeholder"	placeholder displayed for component ,
required	"string"	"false"	required for component ,
rows	"string"	""	decides row span for component ,
setValidities	object	{}
validties_msg	{ valueMissing: string; typeMismatch: string; patternMismatch: string; tooLong: string; tooShort: string; }	{"valueMissing":"this is required field","typeMismatch":"this is type mismatch","patternMismatch":"pattern mismatch"}
value	"string"	""	value attribute for component,

idfy-text-input

text input creates a single line text input field, where the user can type any text input.

HTML markup :

<idfy-text-input id="text_box_1" input_type="text_box" helper_text="Helper text" error_text="error text" label="Label">
<idfy-text-input id="text_box_6" input_type="text_box_outline" helper_text="Helper text" error_text="error text" label="Label">
<idfy-text-input id="phone_1" country_code="+91" input_type="phone_number" valid="" value="" helper_text="Helper text" label="Label" action="Action">
<idfy-text-input input_type="number" helper_text="Helper text" label="Label"></idfy-text-input>
<idfy-text-input id="password_4" input_type="password" valid="" value="" helper_text="Helper text" label="Label" action="Action">

Properties

Property	Type	Default	Description
action	"string"	""	action attribute of text input
action_event	"string"	"text_input_action"	custom event name for action button of text input
add_on_text	"string"	""	add on text attribute of text input
country_code	"string"	"+91"	country code prefix added when text input is of variant "phone_number"
debounce	"string"	"0"	debounce time for input text , time in ms
debouncedSetValue	DebouncedFunc<() => void>	"debounce(() => {\n this.value = this.temp_value;\n }, parseInt(this.debounce))"
default_value	"string"	""	String default value of text field
disabled	"true"|"false"	"false"	disabled attribute of text input
error_text	"string"	""	error text for text input
helper_text	"string"	""	helper text label attribute of text input
icon_1	"string"	""	icon name for icon 1 of text input
icon_2	"string"	""	icon name for icon 2 of text input
input_type	"text_box"|"text_box_outline"|"password"|"phone_number"|"number"	"text_box"	variant of text input
internals
label	"string"	""	label attribute of text input
maxLength	"string"	""	String of number of minimum chars required , if empty ,minimum is not required
maxNum	"string"	"5"	maximum number limit for number input type
minLength	"string"	""	String of number of minimum chars required , if empty ,minimum is not required
minNum	"string"	"0"	minimum number limit for number input type
payment_icon	"string"	""	icon name for payment icon of text input
placeholder	"string"	"Placeholder"	placeholder attribute of text input
regex	"regex string"|""	""	String regex which which text is match , does not use regex if empty
required	"string"	"false"	required attribute for input.
strength	"none"|"weak"|"average"|"strong"|"excellent"	"none"	strength of password text input
tabIndex	number	0
valid	"true"|"false"	""	valid attribute of text input , on "true" it displaye text error and error style input
value	"string"|""	""	String value of text field prefered over default_value if not empty

Events

Event	Description
text-input-regex	fires a custom event if regex validation is truthy.

idfy-toggle-input

toggle switches the state of a single item on or off. Switches are the preferred way to adjust settings. They're used to control binary options – think On/Off or True/False.

HTML markup :

<idfy-toggle-input name="toggle"></idfy-toggle-input>
<idfy-toggle-input name="toggle" label_1="label"></idfy-toggle-input>
<idfy-toggle-input name="toggle" label_2="label"></idfy-toggle-input> 
<idfy-toggle-input name="toggle" label_1="label" label_2="label" checked="true"></idfy-toggle-input>
<idfy-toggle-input name="toggle" label_1="label" supporting_text_1="supoorting text"></idfy-toggle-input>
<idfy-toggle-input name="toggle" label_2="label" supporting_text_2="supoorting text"></idfy-toggle-input>
<idfy-toggle-input name="toggle" label_1="label" supporting_text_1="supoorting text" label_2="label" supporting_text_2="supoorting text"></idfy-toggle-input>

Properties

Property	Modifiers	Type	Default	Description
checked		"true"|"false"		checked or not ,"true" or "false".
label_1		string	""	String to be displayed left of button.
label_2		string	""	String to be displayed right of button.
styles	readonly
supporting_text_1		string	""	String to be displayed for supporting text left of button.
supporting_text_2		string	""	String to be displayed for supporting text right of button.
value		string	"false"

idfy-grid

A grid is a collection of horizontal and vertical lines creating a pattern against which we can line up our design elements. They help us to create layouts in which our elements won't jump around or change width as we move from page to page, providing greater consistency on our websites.

HTML markup :

<idfy-grid grid_columns="5" grid_rows="5" slotBorder="false" grid_gap="10px" padding="0px">
. 
. 
.
</idfy-grid>   

Properties

Property	Modifiers	Type	Default	Description
border		string	"false"
grid_columns		string	5	number of columns in grid.
grid_gap		string	"16px"	value of gutter gap betweens items in grid.
grid_rows		string	5	number of rows in grid.
margin		string	""
padding		string	""	padding arrond grid.
slotBorder		string	"false"	adds border to items in grid , "true" or "false".
styles	readonly

idfy-item

Properties

Property	Modifiers	Type	Default
bg_color		string	"transparent"
border		string	"false"
col_start		string	""
col_stop		string	""
flexbasis		string	""
flexgrow		string	""
justify_content		string	""
position		string	""
row_span		string	""
row_start		string	""
styles	readonly

idfy-hbox

hbox can place elements inside in horizontal way.

HTML markup :

<idfy-hbox >
. 
. 
.
</idfy-hbox>

Properties

Property	Type	Default	Description
align_content	"normal"|"start"|"end"|"center"|"between"|"around"|"evenly"|"stretch"	"center"	content align attribute for hbox
bg_color	"string"	"transparent"	background attribute for hbox
border	"string"	""	border attribute for hbox eg: "1px black solid" | "2px 5px black solid" | "2px 5px 2px 5px black solid"
border_radius	"string"	""	border radius attribute for hbox
bottom	"string"	""	bottom attribute for hbox postion
flex_wrap	"nowrap"|"wrap"|"wrap-reverse"	"reverse"	flex wrap attribute for hbox
flexbasis	"string"	""	flexbasis attribute for hbox
gap	"start"|"end"|"center"	"16px"	gap attribute for hbox
item	"normal"|"start"|"end"|"center"|"between"|"around"|"evenly"|"stretch"	"center"	item align attribute for hbox
justify	"normal"|"start"|"end"|"center"|"between"|"around"|"evenly"|"stretch"	"start"	justify attribute for hbox
left	"string"	""	left attribute for hbox postion
margin	"start"|"end"|"center"	""	margin attribute for hbox
padding	"start"|"end"|"center"	""	padding attribute for hbox
position	"static"|"relative"|"absolute"|"sticky"	"static"	position attribute for hbox
right	"string"	""	right attribute for hbox postion
top	"string"	""	top attribute for hbox postion

idfy-icons

fetch function in pass path and then render svg

const response = await fetch( 'pass the path of assets folder to rander svg' +${this.icon_name} +'.svg',{ cache: 'force-cache' });

Properties

Property	Type	Default	Description
URLPath	string	"http://localhost:5173/src/components/icons/assets/"
height	type: String	"20"	icon of height
icon_name	type: String	""	name of icon
stroke	type: String	"black"	color of icon using stroke
width	type: String	"20"	icon of width

idfy-page

individual page component. HTML markup :

<idfy-page >
. 
. 
.
</idfy-page>

Properties

Property	Type	Default	Description
active	"true"	"false"	active attribute for page.
bg_color	"string"	"transparent"	background attribute.
icon	"string"	""	icon for page.
label	"string"	""	label attribute.
scroll_x	"string"	"hidden"	scrollable page x axis ?.
scroll_y	"string"	"none"	scrollable page y axis ? ,smaller height is to be provided.
supporting_text	"string"	""	supporting text attribute.

Events

Event	Type
slot-change	CustomEvent<string>

idfy-stepper

Properties

Property	Type	Default	Description
direction	"vertical"|"horizontal"	"horizontal"	direction for stepper
icon_map		{}
label	string	""	label for stepper.
pager_type	string	""
progress	string	""
selected	string	""
step	string	""
supportingText	string	""	supporting text label for stepper.
type	string	""
variant	"icon_icon"|"icon_filled"|"icon_number"	"icon_number"	stepper variant

idfy-pager

pager component which fetches pages inside and creates a stepper and a display component with buttons to navigate.

HTML markup :

 <idfy-pager pager_type="progress_bar" stepper_variant="icon_filled">
    <idfy-page icon="gear" label="Phone Text boxes" supporting_text="supporting_text">
        .
        .
        .
    </idfy-page>
    <idfy-page icon="pencil" label="Password Text Boxes" supporting_text="supporting_text">
        .
        .
        .
    </idfy-page>
  </idfy-pager>

Properties

Property	Type	Default	Description
content_bg	"string"	"transparent"	inside pager content background.
content_height	"string"	"100%"	inside pager content height.
content_margin	"string"	"1rem"	inside pager content margin.
content_padding	"string"	""	inside pager content padding.
curr_progress	string	""
direction	string	""
disable_next_button	string	""	disables next button for pager component.
disable_prev_button	string	""	disables previous button for pager component.
header	string	"Header"	header attribute for pager component of mobile variant.
header_bg_color	"string"	"shade-0"	value for header color, can be from theme eg: primary-500 or direct value eg: red.
header_text_color	"string"	"shade-100"	value for header text color , can be from theme eg: primary-500 or direct value eg: red.
next_button_label	string	"Next"	label for next button for pager component.
nodes	never[]	[]
page_selected	string	"0"	selected page attribute for pager component.
pager_type	string	""
prev_button_label	string	"Previous"	label for previous button for pager component.
progress	string	"0"
progress_tracker	'{"1":"20","2":"100"}'	"{"1":"20","2":"100"}"	a object string for progress stepper info for mobile variant. refer idfy-progress-tracker component.
show_next_button	string	"true"	shows next button for pager component.
show_prev_button	string	"true"	shows previous button for pager component.
stepper_variant	"icon_icon"|"icon_filled"|"icon_number"	"icon_number"	variant for stepper component.
type	string	""
variant	"desktop"|"mobile"	"desktop"	variant for pager component.

Events

Event
before-page-change

idfy-avatar

Properties

Property	Type	Default
image	string	"data:image/png;base64,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"
size	string	"md"
status	string	""
text	string	""

idfy-collapsible-section

this is collapsibled section container which also displays status , if provided.

HTML markup :

<idfy-collapsible-section>
. 
. 
. 
</idfy-collapsible-section>

Properties

Property	Type	Default	Description
collapsed	string	"true"	collapsed or not "true" or "false".
gap	string	"16px"	gap for content spacing.
section_header	string	"Section Details"	String to be displayed as header.
status	string	""	chip with status on section : "saved" or "done".
variant	string	"mobile"	variant of section , mobile has fixed width ,desktop takes ful width of parent container,"mobile" or "desktop".

idfy-colorpicker

Properties

Property	Type	Default
color	string	"--primary-500"

idfy-date-component

Calendar pick days, months, years, or even decades. Supports range selection.

HTML markup :

<idfy-date-component actions=true twoMonth=true shortcuts=true disabledPast=false></idfy-date-component>
<idfy-date-component actions=true twoMonth=true shortcuts=false disabledPast=true></idfy-date-component>
<idfy-date-component actions=true twoMonth=false shortcuts=false disabledPast=false></idfy-date-component>  

Properties

Property	Type	Default	Description
actions	string	""	enables 'done' and 'clear' button.
calendar_icon	string	""	enables calendar icon.
date	string	""
date_label	string	"Selected Date"
disabledPast	string	""	disables previous date from current date.
endDate	string	""	end date.
formatDate	(date: any) => string	"(date: any) => {\n const day = String(date.getDate()).padStart(2, '0');\n const month = String(date.getMonth() + 1).padStart(2, '0');\n const year = date.getFullYear();\n\n return ${day}/${month}/${year};\n }"
handleButton	(action: any, e: any) => void	"(action, e) => {\n const calendar = this.shadowRoot?.querySelector('.calendar');\n\n if (action === 'clear') {\n const month_tag = this.shadowRoot?.getElementById('month-tag-1');\n\n const month_tag_1 = this.shadowRoot?.getElementById('month-tag-2');\n const dateInput = this.shadowRoot?.getElementById(\n 'dateInput'\n ) as HTMLInputElement;\n const dateInput2 = this.shadowRoot?.getElementById(\n 'dateInput2'\n ) as HTMLInputElement;\n\n this.selectedDate = null;\n month_tag.removeAttribute('selectedDate');\n if (this.twoMonth === 'true') {\n this.startDate = null;\n this.endDate = null;\n month_tag.removeAttribute('startDate');\n month_tag.removeAttribute('endDate');\n month_tag.removeAttribute('shortcuts_type');\n month_tag_1.removeAttribute('startDate');\n month_tag_1.removeAttribute('endDate');\n month_tag_1.removeAttribute('shortcuts_type');\n dateInput.value = this.startDate;\n dateInput2.value = this.endDate;\n }\n dateInput.value = this.selectedDate;\n } else {\n if (this.twoMonth === 'true') {\n this.handleChange(this.startDate, this.endDate);\n } else {\n this.handleChange(this.selectedDate);\n }\n calendar.classList.toggle('!hidden');\n }\n }"
handleChange	(startDate: any, endDate?: string) => void	"(startDate, endDate = '') => {\n const x = this.handleDateOffset(startDate);\n\n if (this.twoMonth === 'true') {\n const y = this.handleDateOffset(endDate);\n\n const obj = { start_date: x, end_date: y };\n\n this.value = JSON.stringify(obj);\n } else {\n this.value = x;\n }\n }"
handleDateOffset	(now: any) => string	"(now) => {\n const utcTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000);\n\n const formattedDate = utcTime.toISOString();\n\n return formattedDate;\n }"
handleDateSelecetd	(event: any) => void	"(event) => {\n const month_tag = this.shadowRoot?.getElementById('month-tag-1');\n const month_tag_1 = this.shadowRoot?.getElementById('month-tag-2');\n const dateInput = this.shadowRoot?.getElementById(\n 'dateInput'\n ) as HTMLInputElement;\n const dateInput2 = this.shadowRoot?.getElementById(\n 'dateInput2'\n ) as HTMLInputElement;\n\n if (this.twoMonth === 'true') {\n if (!this.startDate) {\n this.startDate = event.detail;\n\n this.setAttributeFunc(\n this.startDate,\n this.endDate,\n this.shortcuts_type\n );\n const formattedStartDate = this.formatDate(this.startDate);\n dateInput.value = formattedStartDate;\n } else if (!this.endDate) {\n this.endDate = event.detail;\n\n if (this.startDate && this.startDate > this.endDate) {\n const tempDate = this.startDate;\n this.startDate = this.endDate;\n this.endDate = tempDate;\n\n this.setAttributeFunc(\n this.startDate,\n this.endDate,\n this.shortcuts_type\n );\n }\n\n this.setAttributeFunc(\n this.startDate,\n this.endDate,\n this.shortcuts_type\n );\n const formattedStartDate = this.formatDate(this.endDate);\n dateInput2.value = formattedStartDate;\n this.handleChange(this.startDate, this.endDate);\n } else {\n this.startDate = '';\n this.endDate = '';\n month_tag.removeAttribute('startDate');\n month_tag.removeAttribute('endDate');\n month_tag_1.removeAttribute('startDate');\n month_tag_1.removeAttribute('endDate');\n\n dateInput.value = this.startDate;\n dateInput2.value = this.endDate;\n }\n } else {\n this.selectedDate = event.detail;\n month_tag.setAttribute('selectedDate', this.selectedDate);\n const formattedStartDate = this.formatDate(this.selectedDate);\n dateInput.value = formattedStartDate;\n this.handleChange(this.selectedDate);\n }\n }"
handleShortcutSelected	(event: any) => void	"(event) => {\n const month_tag = this.shadowRoot?.getElementById('month-tag-1');\n const month_tag_1 = this.shadowRoot?.getElementById('month-tag-2');\n const dateInput = this.shadowRoot?.getElementById(\n 'dateInput'\n ) as HTMLInputElement;\n const dateInput2 = this.shadowRoot?.getElementById(\n 'dateInput2'\n ) as HTMLInputElement;\n\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n\n this.shortcuts_type = event.detail;\n\n if (\n this.shortcuts_type === 'today' ||\n this.shortcuts_type === 'yesterday'\n ) {\n this.setAttributeFunc(this.startDate, this.endDate, this.shortcuts_type);\n } else if (this.shortcuts_type === 'this-week') {\n const dayOfWeek = today.getDay();\n const start_diff =\n today.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 0);\n const end_diff =\n today.getDate() + (6 - dayOfWeek) + (dayOfWeek === 0 ? -6 : 0);\n this.startDate = new Date(today.setDate(start_diff));\n this.endDate = new Date(today.setDate(end_diff));\n\n this.setAttributeFunc(this.startDate, this.endDate, this.shortcuts_type);\n } else if (this.shortcuts_type === 'last-week') {\n const startOfCurrentWeek = new Date(today);\n startOfCurrentWeek.setDate(today.getDate() - today.getDay());\n\n this.endDate = new Date(startOfCurrentWeek);\n this.endDate.setDate(startOfCurrentWeek.getDate() - 1);\n\n this.startDate = new Date(this.endDate);\n this.startDate.setDate(this.endDate.getDate() - 6);\n\n this.setAttributeFunc(this.startDate, this.endDate, this.shortcuts_type);\n } else if (this.shortcuts_type === 'this-month') {\n this.startDate = new Date(today.getFullYear(), today.getMonth(), 1);\n this.endDate = new Date(today.getFullYear(), today.getMonth() + 1, 0);\n\n this.setAttributeFunc(this.startDate, this.endDate, this.shortcuts_type);\n } else if (this.shortcuts_type === 'last-month') {\n this.startDate = new Date(today.getFullYear(), today.getMonth() - 1, 1);\n this.endDate = new Date(today.getFullYear(), today.getMonth(), 0);\n\n this.setAttributeFunc(this.startDate, this.endDate, this.shortcuts_type);\n } else {\n this.startDate = '';\n this.endDate = '';\n month_tag.removeAttribute('startDate');\n month_tag.removeAttribute('endDate');\n month_tag.removeAttribute('shortcuts_type');\n month_tag_1.removeAttribute('startDate');\n month_tag_1.removeAttribute('endDate');\n month_tag_1.removeAttribute('shortcuts_type');\n dateInput.value = this.startDate;\n dateInput2.value = this.endDate;\n }\n }"
helper_text	string	"false"
helper_text_value	string	""
isOpen	string	"false"
label	string	""
month_1	string	""
selectedDate	string	""	single date for single month calendar.
setAttributeFunc	(startDate: any, endDate: any, shortcuts_type: any) => void	"(startDate: any, endDate: any, shortcuts_type) => {\n const month_tag = this.shadowRoot?.getElementById('month-tag-1');\n const month_tag_1 = this.shadowRoot?.getElementById('month-tag-2');\n const dateInput = this.shadowRoot?.getElementById(\n 'dateInput'\n ) as HTMLInputElement;\n const dateInput2 = this.shadowRoot?.getElementById(\n 'dateInput2'\n ) as HTMLInputElement;\n\n month_tag.setAttribute('startDate', startDate);\n if (this.twoMonth === 'true') {\n if (\n shortcuts_type === 'this-week' ||\n shortcuts_type === 'last-week' ||\n shortcuts_type === 'this-month' ||\n shortcuts_type === 'last-month'\n ) {\n const formattedStartDate = this.formatDate(startDate);\n dateInput.value = formattedStartDate;\n }\n\n month_tag_1.setAttribute('startDate', startDate);\n }\n month_tag.setAttribute('endDate', endDate);\n if (this.twoMonth === 'true') {\n if (\n shortcuts_type === 'this-week' ||\n shortcuts_type === 'last-week' ||\n shortcuts_type === 'this-month' ||\n shortcuts_type === 'last-month'\n ) {\n const formattedEndDate = this.formatDate(endDate);\n dateInput2.value = formattedEndDate;\n }\n\n month_tag_1.setAttribute('endDate', endDate);\n }\n if (this.shortcuts === 'true') {\n month_tag.setAttribute('shortcuts_type', shortcuts_type);\n if (this.twoMonth === 'true') {\n month_tag_1.setAttribute('shortcuts_type', shortcuts_type);\n }\n }\n }"
shortcuts	string	""	enables shortcut button.
shortcuts_type	string	""	selects particular type.
startDate	string	""	start date .
twoMonth	string	""	enables two month calendar.
year_1	string	""

idfy-month

Properties

Property	Modifiers	Type	Default	Description
actions		string	""	Calendar month component generate the dates in month.
dayClick		(event: any) => void	"(event: any) => {\n const i = event.target.textContent;\n const month = event.target.getAttribute('month');\n const year = event.target.getAttribute('year');\n\n const date = new Date(year, month, i);\n\n this.dispatchEvent(new CustomEvent('date-selected', { detail: date }));\n }"
disabledPast		string	""
endDate
month		string	""
selectedDate
shortcuts_type		string	""
startDate
styles	readonly
twoMonth		string	""
year		string	""

Events

Event	Type
date-selected	CustomEvent<Date>

idfy-shortcut-component

Properties

Property	Type	Default	Description
handleShortcuts	(shortcut: any) => void	"(shortcut) => {\n this.dispatchEvent(new CustomEvent('shortcut-click', { detail: shortcut }));\n }"	Shortcut component enables to select range from shortcut button.

Events

Event	Type
shortcut-click	CustomEvent<any>

idfy-icon

icon components provides a icon svg.

HTML markup :

<idfy-icon icon="pencil" icon_color="primary-500"></idfy-icon>

Properties

Property	Type	Default	Description
disabled	"true"|"false"	"false"	disabled attribute for icon
icon	"fonts"|"file"|"icon"|"pages"|"tick"|"loader"|"layout"|"trash"|"table"|"globe"|"circle_close"|"youtube"|"google"|"layers"|"minus"|"plus"|"india"|"circle_tick"|"eye"|"eye_slash"|"lock"|"hamburger"|"search"|"login"|"logout"|"user"|"home"|"calendar"|"gear"|"pencil"|"button"|"visa"|"arrow_down"|"arrow_left"|"arrow_right"|"arrow_up"|"alert"|"warning_circle"	""	icon name
icon_color	"string"	"black"	variant of button
size	"xs"|"sm"|"md"|"lg"|"xl"	"md"	variant of button

idfy-progress-tracker

Properties

Property	Modifiers	Type	Default
progress		string	"{"1": "100"}"
styles	readonly

idfy-tooltip

A divider is a thin line that groups content in lists and containers.

HTML markup :

<idfy-tooltip target="color_btn">this is button</idfy-tooltip>    
. 
. 
. 
<idfy-button id="color_btn" label="button"></idfy-button>

Properties

Property	Modifiers	Type	Default	Description
allowHTML		string	"true"	parsing of html in tooltip, "true" or "false".
arrow		string	"true"	display rectangle or dialouge type tooltip, "true" or "false".
interactive		string	"true"	interactive allows pointer events on tooltip, "true" or "false".
placement		string	"top"	placement of tooltip.
placement_map		string		class for placement class.
styles	readonly
target		string	""	id of element , on which tooltip is shown.
width		string	"350"	width of tooltip.

idfy-content-area

content area component houses all main contents for a page. HTML markup :

<idfy-content-area >
. 
. 
.
</idfy-content-area>

Properties

Property	Modifiers	Type	Default
handleSlotChange		() => void	"() => {\n this.dispatchEvent(new CustomEvent('slot-change', { detail: 'change' }));\n }"
styles	readonly

Events

Event	Type
slot-change	CustomEvent<string>

idfy-nav-area

nav area component houses all contents for a nav. HTML markup :

<idfy-nav-area >
. 
. 
.
</idfy-nav-area>

Properties

Property	Modifiers
styles	readonly

idfy-screen

Properties

Property	Type	Default
contentArea	undefined	"undefined"
expanded	string	""
height	string	"100vh"
navArea	undefined	"undefined"
nodes	never[]	[]
override
selected_page	string	""
spawn_nav	string	"false"
theme	string	""
urlPath	string	""
width	string	"100%"

idfy-radio-group

Radio buttons allow users to select one option from a set. Radio buttons are the recommended way to allow users to make a single selection from a list of options. Only one radio button can be selected at a time.

HTML markup :

<idfy-radio-group name="radio" label="Options" layout="horizontal" required="false">
  <idfy-radio-input key_name="option1" label="Option 1" ></idfy-radio-input>
  <idfy-radio-input key_name="option2" label="Option 2" ></idfy-radio-input>
  <idfy-radio-input key_name="option3" label="Option 3" ></idfy-radio-input>
</idfy-radio-group>

Properties

Property	Type	Default	Description
internals
label	string	"Label"	String to be displayed in label.
layout	string	"horizontal"	layout of checkboxes. "horizontal" or "vertical".
required	string	"false"	required or not "true" or "false".
tabIndex	number	0
value	string	""	Stringified selected key.

idfy-radio-input

Radio buttons allow users to select one option from a set. Radio buttons are the recommended way to allow users to make a single selection from a list of options. Only one radio button can be selected at a time.

Properties

Property	Type	Default	Description
internals
key_name	string	"Label"	String key of checkbox option .
label	string	"Label"	String to be displayed in label.
name	string	""	String name of checkbox option.
selected	string	"false"	wheather checbox is selected or not".
supporting_text	string	""	String for supporting_text.

Events

Event	Type
radio-input-clicked	CustomEvent<this>

idfy-select-input

Select box / Dropdowns allows to select from given options , can be single selction or multiple , with searchbox included

HTML markup :

<idfy-select-input checkbox="true" searchbox="true">
<idfy-select-input-item key_name="option1" label="item 1" supporting_text="supporting text"
    selected="true"></idfy-select-input-item>
<idfy-select-input-item key_name="option2" label="item 2"
    supporting_text="supporting text"></idfy-select-input-item>
<idfy-select-input-item key_name="option3" label="item 3" supporting_text="supporting text"
    selected="true"></idfy-select-input-item>
<idfy-select-input-item key_name="option4" label="item 4" supporting_text="supporting text"
    selected="true"></idfy-select-input-item>
</idfy-select-input>

Properties

Property	Type	Default	Description
chip_variant	string	"clubbe"	enables or disables grouping of selected chips in multiselect, "true" or "false".
funcRef
helper_text	string	""	String to be displayed in helper text.
internals
label	string	""	String to be displayed in label.
multiple	string	"true"	enabled or disabled multiselect option , "true" or "false".
placeholder	string	"Select from Dropdown"	String to be displayed in placeholder.
required	string	"false"
searchbox	string	"false"	enabled or disabled searchbar , "true" or "false".
selected	string		Stringified array of selected options".
selected_labels	string		enables or disables grouping of selected chips in multiselect, "true" or "false".
setValidities	object	{}
show_checkbox	string	"false"	to display checkbox in UI or not , "true" or "false".
validties_msg	{ valueMissing: string; }	{"valueMissing":"this is required field"}
value	string	""

idfy-select-input-item

Properties

Property	Type	Default	Description
checkbox	string		to display checkbox or not , "true" or "false".
key_name	string	""	String key of checkbox option .
label	string	""	String to be displayed in label.
selected	string	"false"	wheather checbox is selected or not".
show_checkbox	string	""
supporting_text	string	""	String for supporting_text.

Events

Event	Type
select-input	CustomEvent<this>

idfy-sidebar

HTML markup :

 <idfy-sidebar anamepp_="Company-config"></idfy-sidebar>

Navigation drawers provide ergonomic access to destinations in an app.

Properties

Property	Type	Default	Description
add_logo	string	"true"
app_name	string	""	String displayed on title.
expanded	boolean	false
link	string	""

idfy-sidebar-section

HTML markup :

<idfy-sidebar-section icon="home" label="home"></idfy-sidebar-section> 

Navigation drawer section.

Properties

Property	Type	Default	Description
count	string	"10"	String displayed on section for count.
expanded	string	"false"
icon	string	"star"	displayed icon.
label	string	"Fruits"	String displayed on label.
link	string	"https://google.com"	href.
selected	string	"false"	used to select button in drawer.
target_content_id	string	"1"	on the click of sidebar button clicked target content id will be send in event

Events

Event	Type
sidebar_button_clicked	CustomEvent<{ target: string; }>

idfy-sidebar-section-container

HTML markup :

<idfy-sidebar-section-container></idfy-sidebar-section-container> 

Navigation drawer section conteiner , used to display section header and divider.

Properties

Property	Type	Default	Description
add_divider	string	"false"	show divider or not.
expanded	string	""
section_header	string	""	String displayed on section heading label.

idfy-nav-item

idfy-nav-item component is individual nav button inside idfy-nav Navigation drawers provide ergonomic access to destinations in an app.

idfy-nav can use idfy-pages to create a nav drawer by itself, it reads idfy-pages from the content area and generates a drawer, or be provided with idfy-nav-item from markup to generate a drawer manually.

To generate idfy-nav automatically:

HTML markup:

<idfy-screen spawn_nav="true">
  <idfy-nav-area>
    <idfy-nav app_name="Component Library">
    </idfy-nav>
  </idfy-nav-area>
  <idfy-content-area>
    <idfy-page label="home" icon="home"></idfy-page>
    <idfy-page label="settings" icon="gear"></idfy-page>
    <idfy-page label="accounts" icon="user"></idfy-page>
  </idfy-content-area>
</idfy-screen>

To add idfy-nav manually:

HTML markup:

<idfy-screen>
  <idfy-nav-area>
    <idfy-nav app_name="Component Library">
      <idfy-nav-item label="Web" icon="globe">
        <idfy-nav-item label="google" icon="google" link="https://google.com"></idfy-nav-item>
        <idfy-nav-item label="youtube" icon="youtube" link="https://youtube.com"></idfy-nav-item>
      </idfy-nav-item>
       <!-- add named slot "footer" for footer contents -->
      <idfy-nav-item slot="footer" label="Logout" icon="logout" link="https://google.com"></idfy-nav-item>
      <idfy-nav-item slot="footer" label="Admin Panel" icon="user" link="https://google.com"></idfy-nav-item>
    </idfy-nav>
  </idfy-nav-area>
  <idfy-content-area>
    ...
  </idfy-content-area>
</idfy-screen>

Properties

Property	Type	Default	Description
active	string	"false"	enables highlighting for active nav button.
expanded	string	"false"
highlighted	string	"false"
icon	string	""	displays icon from icon component.
icon_color	string	"white"	sets color for icon svg.
label	string	""	String label for nav button.
link	string	""	allows redirecting to external path , if link provided.

Events

Event	Type
navrail_click	CustomEvent<{ key: string; value: any; id: any; }>

idfy-nav

Properties

Property	Type	Default	Description
add_logo	"true"|"false"	"true"	add company logo .
app_name	"string"	""	App Name can be displayed on top .
current_page	"string"	""	current active page .
expandable	"true"|"false"	"true"	allow drawer to be expandable or static width .
expanded	boolean	false
link	"string"	""	link which can be used to redirect when company logo is clicked.
track_last_visited	"string"	"false"	tracks last visited page .

idfy-snackbar-bucket

SnackBar bucket component. HTML markup :

<idfy-snackbar-bucket bottom="1.2rem" left="1.2rem">
  .  
  .
  <idfy-snackbar variant="outlined" type="destructive" indicator="true"></idfy-snackbar>    
  .
  .
</idfy-snackbar-bucket>

Properties

Property	Type	Default	Description
bottom	string	"1.2rem"	left position of snackbar bucket
left	string	"1.2rem"	left position of snackbar bucket
right	string	""	left position of snackbar bucket
top	string	""	left position of snackbar bucket

idfy-snackbar

SnackBar component. HTML markup :

  <idfy-snackbar></idfy-snackbar>
  <idfy-snackbar variant="outlined" type="destructive" indicator="true"></idfy-snackbar>
    

Properties

Property	Type	Default	Description
add_icon	"true|false"	"true"	adds icon at start of snackbar
auto_close	"true|false"	"false"	self destruct snackbar
close_btn	"true|false"	"true"	adds close icon at end of snackbar
icon	"outlined"|"filled"|"w_indicator"|"icon_filled"	"gear"	icon for snackbar
indicator	"true|false"	"false"	adds a indicator
type	"primary"|"extra"|"success"|"error"|"info"|"neutral"	"primary"	type of color
variant	"outlined"|"filled"|"w_indicator"|"icon_filled"	"outlined"	variant of snackbar

idfy-tab-button

buttons for tab component , can be used independent of tab component

<idfy-tab-button label="button"></idfy-tab-button>
<idfy-tab-button icon1="pencil" label="button"></idfy-tab-button>
<idfy-tab-button icon2="gear" label="button"></idfy-tab-button>
<idfy-tab-button icon1="pencil" label="button" link="https://google.com"></idfy-tab-button>
<idfy-tab-button disabled="true" label="button" tabValue="10"></idfy-tab-button>    

Properties

Property	Type	Default	Description
active	string	"true"	active attribute of button
disabled	"true"|"false"	"false"	enabled or disabled button
icon1	string	""	select icon from icon component , displayed on left side of button
icon2	string	""	select icon from icon component , displayed on right side of button
label	string	"Button"	display label of button
link	string	""	link attribute of button
tabValue	string	""	tab value displayes string inside a indicator

Events

Event	Type
tab-button-clicked	CustomEvent<{ key: string; value: any; }>

idfy-tab

tab component ,allows navigation and content switch. reads idfy-pages inside and creates tab contents

HTML markup :

    <idfy-tab>
      <idfy-page label="content 1" icon="gear">
        .
        .
      </idfy-page>
      <idfy-page label="content 2" icon="pencil">
        .
        .
      </idfy-page>
      <idfy-page label="content 3" icon="user">
        .
        .
      </idfy-page>
    </idfy-tab>

idfy-table-column

table column component is used to define columns in idfy-table HTML markup :

 <idfy-table-column title="Header" width="20%" searchable="false" orderanble="true" text_align="center" ></idfy-table-column>

Properties

Property	Type	Default	Description
createCell	"true"|"false"		createcell call back for column in table.
data	string	"null"
orderable	"true"|"false"	"false"	orderable column in table.
renderCell	"true"|"false"		cell render callback for column in table.
searchable	"true"|"false"	"true"	searchable column in table.
text_align	"left"|"center"|"right"	"left"	alignment of data in column.
title	"string"	""	title attribute for component , displayed on header of column in table.
width	"string"	""	width ofcolumn in table.

Events

Event	Type
component-updated	CustomEvent<this>

idfy-table

Table Element. interally it uses datatables.net Refer [https://datatables.net/examples/index] for indepth usage & understanding

2 ways to input data in table

1. direct api call , supply a URL using 'dataURL' prop to table . table calls and fetches data api call json contains data as follows .

{
  draw: 1,
  recordsTotal: 57,
  recordsFiltered: 57,
  data: [

    {
      id: '1',
      name: 'Tiger PP Nixon',
      position: 'System Architect',
      salary: '$320,800',
      start_date: '2011/04/25',
      office: 'Edinburgh',
      extn: '5421',
    },
    {
      id: '2',
      name: 'Garrett Winters',
      position: 'Accountant',
      salary: '$170,750',
      start_date: '2011/07/25',
      office: 'Tokyo',
      extn: '8422',
    }
  ]
}

2. supply dataCallback for writing whole data fetching implementation

var element = document.getElementById('data-table');

element.dataCallback = (query) => {
  const queryString = Object.keys(query)
      .map(
        (key) => `${encodeURIComponent(key)}=${encodeURIComponent(query[key])}`
      )
      .join('&');
  const urlWithQuery = `http://localhost:3000?${queryString}`;

  return fetch(urlWithQuery)
      .then((response) => {
        return response.json();
      })
      .catch((error) => {
        console.warn('Fetch error:', error);
        callback({
            "draw": 1,
            "recordsFiltered": 0,
            "recordsTotal": 0,
            "data": []
        });
      });
}

idfy-table component needs idfy-table-column for column defination

HTML markup :

<idfy-table id="data-table" pageLength="5">
  <idfy-table-column title="Name" data="name" width='20%'  orderable="true" searchable="false" ></idfy-table-column>
  <idfy-table-column title="Position" data="position" width='20%' orderable="false" searchable="false"></idfy-table-column>
  <idfy-table-column title="Office" data="office" width='20%' orderable="false" searchable="false" text_align="center"></idfy-table-column>
  <idfy-table-column title="Salary" data="salary" width='20%' orderable="false" searchable="false" text_align="center">
      <idfy-chip id="salary" variant="filled" label="#{data}"></idfy-chip>
  </idfy-table-column>
  <idfy-table-column title="food" data="fav_food" width="20%"  orderable="false" searchable="false" >
      <div style="display: flex; align-items: center;">
        <idfy-checkbox-input-group id="color_checkbox" layout="horizontal">
            <idfy-checkbox-input key_name="option_1" label="#{data.food1}"></idfy-checkbox-input>
            <idfy-checkbox-input key_name="option_2" label="#{data.food2}"></idfy-checkbox-input>
        </idfy-checkbox-input-group>
      </div>
  </idfy-table-column>
  <idfy-table-column data="null" width='10%' orderable="false" searchable="false" >
      <div style="display: flex; justify-content: space-around; align-items: center; width: 100%;">
        <idfy-chip id="action1" variant="filled" type="success" label="action 1"></idfy-chip>
        <idfy-chip id="action2" variant="filled" type="error" label="action 2"></idfy-chip>
      </div>
  </idfy-table-column>
</idfy-table>

for rendering inside table cells multiple ways are possible :

1. direct markup can be provided inside table column ( has to a single child )

<idfy-table>
  <idfy-table-column title="Salary" data="salary" width='20%' orderable="false" searchable="false" text_align="center">
      <idfy-chip id="salary" variant="filled" label="#{data}"></idfy-chip>
  </idfy-table-column>
  <idfy-table-column data="null" width='10%' orderable="false" searchable="false" >
      <div style="display: flex; justify-content: space-around; align-items: center; width: 100%;">
        <idfy-chip id="action1" variant="filled" type="success" label="action 1"></idfy-chip>
        <idfy-chip id="action2" variant="filled" type="error" label="action 2"></idfy-chip>
      </div>
  </idfy-table-column>
</idfy-table>

2. direct markup can be provided inside table column ( has to a single child )

<idfy-table id="data-table" pageLength="5">
  <idfy-table-column title="Name" data="name" width='20%'  orderable="true" searchable="false" ></idfy-table-column>
  <idfy-table-column id="col1" title="Position" data="position" width='20%' orderable="false" searchable="false"></idfy-table-column>
</idfy-table>

  const col1 = document.getElementById('col1');

  col1.createdCell=
  (cell, cellData, rowData, rowIndex, colIndex) => {
      const ele = document.createElement("idfy-chip")
      ele.setAttribute("label", cellData)
      ele.setAttribute("variant", "filled")
      ele.addEventListener("click", () => console.log(cellData))
      cell.innerHTML = '';
      cell.appendChild(ele);
  }

Properties

Property	Type	Default	Description
columns	"array"	[]	metatable for columns in table.
dataCallback	"function"	null	dataCallback for data fetching.
dataURL	"string"	null	data URL for table.
funcRef
id	"string"	"table-container"	id for table.
length_menu	"string"	"[[5, 10, 25, -1],[5, 10, 25, "All"]]"	Options for length menu for rows in table.
pageLength	"string"	"10"	length of rows in table.
rowHover	"string"	"false"	allows hovering of rows.
rowSelect	"string"	"false"	allows selcting of rows.
searchBox	"string"	"true"	search box in table.
temp	never[]	[]
text_align	{ left: string; center: string; right: string; }	{"left":"text-left","center":"text-center","right":"text-right"}

Events

Event	Type
table-event	CustomEvent<{ cell: any; cell_data: any; row_data: any; }>
table-ready

idfy-text-editor

Properties

Property	Type	Default
disabled	string	"false"
helper_text	string	""
internals
label	string	""
required	string	"false"
setValidities	object	{}
setValue	(e: any) => void	"(e) => {\n this.value = e.target.htmlValue;\n this.manageRequired(this.value);\n this.internals.setFormValue(this.value);\n }"
tabIndex	number	0
validties_msg	{ valueMissing: string; }	{"valueMissing":"this is required field"}
value	string	""

idfy-typography

Properties

Property	Type	Default	Description
text_color	string	"neutral-900"	color for the text.
text_style	string	"h1"	define style for the text. "h1"|"h2"|"h3"|"h4"|"h5"|"h6"|"paragraph"|"display"
variant	string	"medium"	define style for the text. - heading: "light"|"medium"|"bold" - paragraph: "lg_light"|"lg_medium"|"lg_bold"|"md_light"|"md_medium"|"md_bold"|"sm_light"|"sm_medium"|"sm_bold"|"xs_light"|"xs_medium"|"xs_bold" - display: "light"|"medium"|"bold"

idfy-vbox

vbox can place elements inside in vertical way.

HTML markup :

  <idfy-vbox gap="5px">
    .
    .
    .
  </idfy-vbox>

Properties

Property	Type	Default	Description
align	"start"|"end"|"center"	""	align item attribute for vbox
bg_color	"string"	"transparent"	background attribute for vbox
border	"string"	""	border attribute for vbox eg: "1px black solid" | "2px 5px black solid" | "2px 5px 2px 5px black solid"
border_radius	"string"	""	border radius attribute for vbox
bottom	"string"	""	bottom attribute for vbox postion
flexbasis	"string"	""	flexbasis attribute for vbox
gap	"start"|"end"|"center"	"16px"	gap attribute for vbox
justify	"normal"|"start"|"end"|"center"|"between"|"around"|"evenly"|"stretch"	"center"	justify attribute for vbox
left	"string"	""	left attribute for vbox postion
margin	"start"|"end"|"center"	""	margin attribute for vbox
padding	"start"|"end"|"center"	""	padding attribute for vbox
position	"static"|"relative"|"absolute"|"sticky"	"static"	position attribute for vbox
right	"string"	""	right attribute for vbox postion
top	"string"	""	top attribute for vbox postion