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:[email protected]/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