@freshworks/crayons
Version:
Crayons Web Components library
917 lines (856 loc) • 28.4 kB
HTML
<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Stencil Component Starter</title> <link rel="modulepreload" href="/build/p-6469c25a.js"><script type="module" src="/build/p-6469c25a.js" data-stencil data-resources-url="/build/" data-stencil-namespace="crayons"></script> <script nomodule="" src="/build/crayons.js" data-stencil></script> </head> <body> <fw-button expand="" color="primary">Primary Button</fw-button> <!-- <br />
<fw-radio-group
name="Profile"
value="au"
hint-text="radio group hint"
warning-text="Warning text"
error-text="error"
label="radio group label"
required
state="warning"
orientation="row"
>
<fw-radio value="au">Auditory</fw-radio>
<fw-radio value="vi">Visual</fw-radio>
<fw-radio value="re">Restless</fw-radio>
<div slot="warning-text">Wrning radio ASLOT</div>
</fw-radio-group>
<br />
<h3>hshshsh ohso</h3>
<fw-input
placeholder="input"
hint-text="Do not enter your user ID"
warning-text="Warning"
error-text="error"
label="input label"
required
name="inp"
state="warning"
>
<div slot="warning-text">Wrning ASLOT</div>
</fw-input>
<fw-textarea
placeholder="textarea"
hint-text="Do not enter your user ID"
warning-text="Warning"
error-text="error textss"
label="textarea label"
required
name="para"
state="error"
>
<div slot="error-text">Error ASLOT</div>
</fw-textarea>
<fw-datepicker
placeholder="datepicker"
hint-text="Do not enter your user ID"
warning-text="Warning"
error-text="error textss"
label="datepicker label"
required
name="para"
state="error"
>
<div slot="error-text">Error ASLOT</div>
</fw-datepicker>
<fw-select
label="Select Label"
required
value="1"
placeholder="Your choice"
hint-text="select hint"
warning-text="select Warning"
error-text="select error"
state="warning"
>
<fw-select-option value="1">Starks</fw-select-option>
<fw-select-option value="2">Lannisters</fw-select-option>
<div slot="warning-text">warning select SLOT</div>
</fw-select>
<fw-timepicker
label="Select Timepicker"
required
placeholder="Your timepicker"
hint-text="timepicker hint"
warning-text="timepicker Warning"
error-text="timepicker error"
state="error"
>
<div slot="warning-text">warning timepicker SLOT</div>
<div slot="hint-text">hint timepicker SLOT</div>
<div slot="error-text">error timepicker SLOT</div>
</fw-timepicker>
<br /> --> <!-- <h3>Pattern 1</h3>
<fw-form id="fw-form"> </fw-form>
<br /> --> <!-- <h3>Pattern 2</h3>
<fw-form id="fw-form"></fw-form>
<div id="child" style="display: none;">
<input name="ccc" id="ccc" placeholder="ccc"
autocomplete="off"
></input>
</div> --> <!-- <br /> --> <!-- <h3>Pattern 3 </h3>
<fw-form id="fw-form">
<fw-form-control
type="TEXT"
name="first_name"
placeholder="First Name"
required
label="First Name"
id="first_name"
></fw-form-control>
<fw-form-control
type="TEXT"
name="abc"
placeholder="Custom Layout"
required
label="Custom Layout"
></fw-form-control>
<fw-form-control
type="TEXT"
name="ccc"
placeholder="Custom native in"
required
label="Custom native in"
>
<input name="ccc" id="ccc" placeholder="ccc"
autocomplete="off"
></input>
</fw-form>
<br /><br />
<button id="submit">Submit</button>
<button id="reset">Reset</button>
<script>
const form = document.querySelector('#fw-form');
document.querySelector('#submit').addEventListener('click', async (e) => {
const { values, isValid } = await form.doSubmit(e);
console.log({ values, isValid });
if (isValid) {
// make ajax post end point with values
// fetch("/post",values);
// if error from backend , set Errors - passing key value pair
form.setFieldErrors({
first_name: 'First Name must be unique <!Server Error>>',
});
// reset the form if required if success
// formRef.current.doReset(e);
}
});
document.querySelector('#reset').addEventListener('click', (e) => {
if (document.querySelector('#ccc'))
document.querySelector('#ccc').value = '';
form.doReset(e);
});
const formSchema = {
title: 'Test Form',
name: 'Test Form',
fields: [
{
id: '2978f820-704b-46c7-9f88-110e14e34a8c',
name: 'first_name',
label: 'First Name',
type: 'TEXT',
position: 3,
required: true,
editable: true,
visible: true,
deleted: false,
link: null,
placeholder: 'Enter…',
hint: 'Please provide a text of at max 100 characters',
field_options: { lego_unique_field: 'true' },
filterable: true,
searchable: true,
parent_id: null,
choices: [],
},
{
id: '3978f820-704b-46c7-9f88-110e14e34a8c',
name: 'last_name',
label: 'Last Name',
type: 'TEXT',
position: 3,
required: true,
editable: true,
visible: true,
deleted: false,
link: null,
placeholder: 'Enter…',
hint: 'Please provide a text of at max 100 characters',
field_options: { lego_unique_field: 'true' },
filterable: true,
searchable: true,
parent_id: null,
choices: [],
},
{
id: '42aecb8f-25cf-47ce-89c6-5410fe3d4315',
name: 'languages_known',
label: 'Languages Known',
type: 'MULTI_SELECT',
position: 13,
required: true,
editable: true,
visible: true,
deleted: false,
link: null,
placeholder: 'Enter…',
hint: 'Select one or more values',
field_options: {},
filterable: true,
searchable: true,
parent_id: null,
choices: [
{
id: 1,
value: 'English',
position: 1,
dependent_ids: {},
},
{
id: 2,
value: 'Hindi',
position: 2,
dependent_ids: {},
},
{
id: 3,
value: 'Tamil',
position: 3,
dependent_ids: {},
},
],
},
{
id: '6978f820-704b-46c7-9f88-110e14e34a8c',
name: 'email',
label: 'Email',
type: 'EMAIL',
position: 3,
required: true,
editable: true,
visible: true,
deleted: false,
link: null,
placeholder: 'Enter…',
hint: 'Please provide an email Id',
field_options: {},
filterable: true,
searchable: true,
parent_id: null,
choices: [],
},
{
id: 'f319f86f-1b6a-49cb-b4b6-cf487be94595',
name: 'date_of_birth',
label: 'Date Of Birth',
type: 'DATE',
position: 11,
required: true,
editable: true,
visible: true,
deleted: false,
link: null,
Placeholder: 'Enter…',
hint: 'Please enter your date of birth',
field_options: {},
filterable: true,
searchable: true,
parent_id: null,
choices: [],
},
{
id: 'f319f86f-1b6a-49cb-b4b6-cf487be94595',
name: 'landmark',
label: 'Landmark',
type: 'PARAGRAPH',
position: 7,
required: true,
editable: true,
visible: true,
deleted: false,
link: null,
Placeholder: 'Enter some text…',
hint: 'Please enter the nearest landmark',
field_options: {},
filterable: false,
searchable: true,
parent_id: null,
choices: [],
},
{
id: 'f319f86f-1b6a-49cb-b4b6-cf487be94595',
name: 'is_indian_citizen',
label: 'Indian Citizen?',
type: 'CHECKBOX',
position: 7,
required: true,
editable: true,
visible: true,
deleted: false,
link: null,
placeholder: null,
hint: 'Check or Uncheck the box',
field_options: {},
filterable: true,
searchable: true,
parent_id: null,
choices: [],
},
{
id: '8978f820-704b-46c7-9f88-110e14e34a8c',
name: 'phone_number',
label: 'Phone number',
type: 'TEXT',
position: 3,
required: true,
editable: true,
visible: true,
deleted: false,
link: null,
placeholder: 'Enter…',
hint: 'Please provide your phone number',
field_options: {},
filterable: true,
searchable: true,
parent_id: null,
choices: [],
},
{
id: 'f319f86f-1b6a-49cb-b4b6-cf487be94595',
name: 'pincode',
label: 'Pincode',
type: 'NUMBER',
position: 8,
required: false,
editable: true,
visible: true,
deleted: false,
link: null,
Placeholder: 'Enter…',
hint: 'Please enter your Pincode',
field_options: {},
filterable: true,
searchable: true, // For the field to be used as filter condition in search API, this needs to be set
parent_id: null,
choices: [],
},
{
id: 'ba53775e-2948-4065-8a59-d99d4494e845',
name: 'gender',
label: 'Gender',
type: 'RADIO',
position: 5,
required: true,
editable: true,
visible: true,
deleted: false,
link: null,
placeholder: null,
hint: 'Please specify your gender',
field_options: {},
filterable: true,
searchable: true,
parent_id: null,
choices: [
{
id: 1,
value: 'Female',
position: 1,
dependent_ids: {},
},
{
id: 2,
value: 'Male',
position: 2,
dependent_ids: {},
},
],
},
{
id: '42aecb8f-25cf-47ce-89c6-5410fe3d4315',
name: 'order_status',
label: 'Order Status',
type: 'DROPDOWN',
position: 4,
required: true,
editable: true,
visible: true,
deleted: false,
link: null,
placeholder: 'Enter…',
hint: 'Select a value',
field_options: {},
filterable: true,
searchable: true,
parent_id: null,
choices: [
{
id: 1,
value: 'open',
position: 1,
dependent_ids: {},
},
{
id: 2,
value: 'pending',
position: 2,
dependent_ids: {},
},
{
id: 3,
value: 'closed',
position: 3,
dependent_ids: {},
},
],
},
{
id: 'f319f86f-1b6a-49cb-b4b6-cf487be94595',
name: 'amount_paid',
label: 'Amount Paid',
type: 'DECIMAL',
position: 10,
required: true,
editable: true,
visible: true,
deleted: false,
link: null,
Placeholder: 'Enter…',
hint: 'Please enter the amount paid',
field_options: {},
filterable: true,
searchable: true,
parent_id: null,
choices: [],
},
// {
// id: '9319f86f-1b6a-49cb-b4b6-cf487be94595',
// name: 'abc4',
// label: 'Custom Input123123',
// type: 'CUSTOM',
// position: 3,
// required: true,
// editable: true,
// visible: true,
// deleted: false,
// link: null,
// Placeholder: 'Enter…',
// hint: 'Custom Input webcomponent via schema',
// field_options: {},
// filterable: true,
// searchable: true,
// parent_id: null,
// choices: [],
// component: "fw-input",
// componentProps: {
// color: "secondary",
// formRef: "fw-form",
// ref:""
// }
// },
],
};
const initialValues = {
// abc: 'Test',
// is_indian_citizen: true,
};
//form.validateOnInput = false;
/** pattern 1 **/
// form.formSchema = formSchema;
// for pattern 2
// formSchema?.fields?.forEach(f =>{
// const formControl = document.createElement("fw-form-control");
// formControl.name = f.name;
// formControl.type = f.type;
// formControl.hint = f.hint;
// formControl.label = f.label;
// formControl.placeholder = f.placeholder;
// formControl.required = f.required;
// formControl.choices = f.choices;
// formControl.id = f.name
// form.appendChild(formControl);
// });
// const formControl = document.createElement("fw-form-control");
// formControl.name = "ccc";
// formControl.type = "TEXT";
// formControl.hint = "custom web hint";
// formControl.label = "custom we";
// formControl.required = true;
// formControl.innerHTML = (document.querySelector("#child")).innerHTML;
// form.querySelector("fw-form-control#last_name").prepend(formControl)
form.initialValues = initialValues;
// no required for Pattern 1 since implicit validation is in place.
form.validate = async function (values) {
console.log('validate method called with ', values);
return {
// first_name: 'first name error',
// last_name: 'last name error',
ccc: 'ss',
};
// json api std.
};
function handleInput(e) {
console.log('handle input');
form.setFieldValue([e.target.name], e.target.value);
}
document.querySelector('#ccc').addEventListener('input', handleInput);
document.querySelector('#ccc').addEventListener('change', handleInput);
document.querySelector('#ccc').addEventListener('blur', handleInput);
</script> --> <!-- <fw-form-group>
<fw-form-label>Label 1 </fw-form-label>
<fw-form-control>
<fw-input></fw-input>
</fw-form-control>
<fw-form-text>Text hint</fw-form-text>
<br />
<fw-form-control-feedback>negative </fw-form-control-feedback>
</fw-form-group> --> <!-- <fw-form-text>Text hint</fw-form-text> --> <!-- <br />
<fw-button-group>
<fw-button color="secondary"> Test 1</fw-button>
<fw-button color="secondary">Test 2</fw-button>
<fw-button color="secondary">Test 3</fw-button>
</fw-button-group>
<br />
<fw-button-group>
<fw-button size="icon" color="secondary"> <fw-icon name="reply" library="system" ></fw-icon></fw-button>
<fw-button size="icon" color="secondary"><fw-icon name="add-contact" library="system" ></fw-icon></fw-button>
<fw-button size="icon" color="secondary"> <fw-icon name="more-horizontal" library="system" ></fw-icon></fw-button>
</fw-button-group> --> <!-- <fw-input value="kjhgfdrftgyjhkujlnhbgvhfcty kjghfcftgh"></fw-input>
<fw-select
label="Select App type"
placeholder="Choose app type"
value="2"
>
<fw-select-option value="1" html option-text="LLL">
<div style="color: red; padding: 10px;">Lannister </div class="cls">
<div style="color: green; padding: 5px;">Lannisters are gods</div>
</fw-select-option>
<fw-select-option value="2">
Shenigans
</fw-select-option>
</fw-select>
<fw-textarea cols=75 rows=5 value="qwertyuiop asdfghjk zxcvbnm" ></fw-textarea>
<fw-timepicker min-time="11:25 AM" max-time="03:45 PM" value="11:25" interval=45> </fw-timepicker>
<fw-timepicker min-time="01:39 AM" interval=55> </fw-timepicker>
<div style="float:left;width:100%;">
<fw-datepicker style="float:left;"></fw-datepicker>
<fw-datepicker mode="range" style="float:left;margin-left:250px"></fw-datepicker>
</div>
<br><br>
<fw-dropdown-button label="Click me" split color="danger" placeholder="efwewe">
<div slot="dropdown-options">
<option id="1" value="Ullu">Ullu</option>
<option id="2" value="Hotstar">Hotstar</option>
<option id="3" value="Amazon">Amazon</option>
<option id="4" value="Netflix">Netflix</option>
<option id="5" value="Mx player">Mx Player</option>
<option id="6" value="Share it">Share it</option>
<option id="7" value="Prime">Amazon Prime</option>
<option id="8" value="Watch32">Watch32</option>
<option id="9" value="YTS Movies">YTS Movies</option>
<option id="10" value="Telegram">Telegram</option>
<option id="11" value="Solar Movies">Solar Movies</option>
<option id="12" value="Yifi torrents">Yifi torrents</option>
</div>
</fw-dropdown-button>
<fw-label color="red" value="wfwefwe" style="--label-padding-vertical: 10px; --label-padding-horizontal:20px" />
<br>
<fw-toast id="left" position="top-left" content="Conversation #3255 - 💬 Festive offers adasdds conversation has been Restored" type="error"></fw-toast>
<fw-toast id="right" position="top-right" timeout=1000></fw-toast>
<fw-toast id="center" timeout=10000></fw-toast>
<fw-toast id="center1"></fw-toast>
<fw-toast-message type='success' id="custom-toast" timeout="1000000">
<div>
<span class="abc">i am a slot</span>
<h1>custom content</h1>
<button onclick="alert('ss')">custom btn</button>
</div>
</fw-toast-message>
<fw-button onClick="document.querySelector('#left').trigger({type:'success',timeout:20000000, actionLinkText:'undo'})">Trigger left Toast </fw-button>
<fw-button onClick="document.querySelector('#right').trigger({type:'error', content:'right'})">Trigger right Toast</fw-button>
<fw-button onClick="document.querySelector('#center').trigger({type:'warning', content:'center'})">Trigger Center toast</fw-button>
<fw-button onClick="document.querySelector('#center1').trigger({type:'inprogress', content:'center 1'})">Trigger Center toast 1</fw-button>
<fw-button onClick="document.querySelector('#right').trigger({type:'success', contentref:'#custom-toast', timeout:4666000})">Trigger Right Custom Ref</fw-button>
<br/>
<fw-toggle-group name="Test toggle group" value="bb,cc" multiple="true">
<fw-toggle-group-button
header="Header A"
description="This is a sample description of the card component. Test sentence for longer texts exceeding the given height"
value="aa"
></fw-toggle-group-button>
<fw-toggle-group-button
header="Header B"
description="This is a sample description of the card component."
value="bb"
></fw-toggle-group-button>
<fw-toggle-group-button
header="Header c"
description="This is a sample description of the card component."
value="cc"
></fw-toggle-group-button>
<fw-toggle-group-button
header="Header D"
value="dd"
></fw-toggle-group-button>
<fw-toggle-group-button
header="Header E"
value="ee"
></fw-toggle-group-button>
<fw-toggle-group-button
header="Header F"
value="ff"
></fw-toggle-group-button>
</fw-toggle-group>
<br/>
<fw-toggle-group name="Test icon toggle group" value="gg">
<fw-toggle-group-button
icon-name="phone"
value="aa"
type="icon"
></fw-toggle-group-button>
<fw-toggle-group-button
icon-name="agent"
value="bb"
type="icon"
></fw-toggle-group-button>
<fw-toggle-group-button
icon-name="delete"
value="cc"
type="icon"
></fw-toggle-group-button>
<fw-toggle-group-button
icon-name="check"
value="dd"
type="icon"
></fw-toggle-group-button>
<fw-toggle-group-button
icon-name="code"
value="ee"
type="icon"
></fw-toggle-group-button>
<fw-toggle-group-button
icon-name="calendar-time"
value="ff"
type="icon"
></fw-toggle-group-button>
<fw-toggle-group-button
icon-name="reply"
value="gg"
type="icon"
></fw-toggle-group-button>
<fw-toggle-group-button
icon-name="chat-online"
value="hh"
type="icon"
></fw-toggle-group-button>
<fw-toggle-group-button
icon-name="more-horizontal"
value="ii"
type="icon"
></fw-toggle-group-button>
</fw-toggle-group>
<br/>
<script>
window.addEventListener('fwLinkClick', eventHandler);
function eventHandler(e) {
console.log('action link clicked', e);
}
window.addEventListener('fwChange', function(e) {
console.log('datepicker fwChange triggered', e);
});
document.querySelector('fw-dropdown-button')
.addEventListener('fwOptionsAdd', (e) => console.log('Selected values are ', e.detail.value))
document.querySelector('fw-dropdown-button')
.addEventListener('fwOptionClick', (e) => console.log('Selected values are ', e.detail.value))
</script>
--> <!-- <div style="display: flex; align-items: center; justify-content: center;">
<div style="width: 1200px; margin-top: 80px;">
<fw-data-table id="datatable-0" is-selectable="true" is-all-selectable="true" label="Data table 0">
</fw-data-table>
<fw-data-table id="datatable-1"></fw-data-table>
</div>
</div> --> <!-- <script>
var data = {
columns: [{
"key": "name",
"text": "Name",
"position": 2
}, {
"key": "group",
"text": "Group",
"position": 3
}, {
"key": "role",
"text": "Role",
"position": 1
}, {
"key": "school",
"text": "School"
}, {
"key": "place",
"text": "Place",
"position": 5
}],
persons: [
{
"id": "61c443eac41891ee584cc2c2",
"name": "dolore",
"role": "est",
"group": "sunt",
"school": "cillum",
"place": "non"
},
{
"id": "61c443eade33a3b23e1ba388",
"name": "et",
"role": "quis",
"group": "ipsum",
"school": "mollit",
"place": "sit"
},
{
"id": "61c443eaf6ffceda052527ca",
"name": "velit",
"role": "id",
"group": "incididunt",
"school": "culpa",
"place": "eiusmod"
},
{
"id": "61c443ea9f6d4df981cb697d",
"name": "do",
"role": "in",
"group": "veniam",
"school": "sit",
"place": "qui"
},
{
"id": "61c443eab03c9692f3782ce3",
"name": "nostrud",
"role": "ea",
"group": "fugiat",
"school": "mollit",
"place": "et"
},
{
"id": "61c443eadc0aa4d77f9ce50b",
"name": "ex",
"role": "pariatur",
"group": "sint",
"school": "mollit",
"place": "non"
},
{
"id": "61c443eafa776aa88180fb93",
"name": "sit",
"role": "eiusmod",
"group": "enim",
"school": "occaecat",
"place": "elit"
},
{
"id": "61c443ea47480024fb82103f",
"name": "anim",
"role": "nisi",
"group": "minim",
"school": "excepteur",
"place": "ad"
},
{
"id": "61c443ea7cd7ad9b57a25c30",
"name": "amet",
"role": "qui",
"group": "laborum",
"school": "Lorem",
"place": "ipsum"
},
{
"id": "61c443ea06902015b1d10b0a",
"name": "sit",
"role": "reprehenderit",
"group": "reprehenderit",
"school": "incididunt",
"place": "velit"
},
{
"id": "61c443ea499fa2176088b569",
"name": "ipsum",
"role": "aute",
"group": "eu",
"school": "amet",
"place": "eu"
}
]
};
var datatable = document.getElementById('datatable-0');
datatable.columns = data.columns;
datatable.rows = data.persons;
datatable.rowActions = [{
name: 'Edit',
handler: (rowData) => {
console.log(rowData);
}
}, {
name: 'Delete',
handler: async (rowData) => {
let deleteActionPromise = new Promise((resolve, reject) => {
setTimeout(() => {
console.log(rowData);
resolve();
}, 5000);
});
return deleteActionPromise;
},
hideForRowIds: ['61c443ea499fa2176088b569']
}];
var data1 = {
columns: [{
"key": "search",
"text": "Search Engine",
"position": 1,
"variant": "anchor"
}, {
"key": "rank",
"text": "Rank",
"position": 2
}],
rows: [{
"id": "001",
"search": { "text": "Google", "href": "https://www.google.com" },
"rank": 1
}, {
"id": "002",
"search": { "text": "Bing", "href": "https://www.bing.com" },
"rank": 2
}, {
"id": "003",
"search": { "text": "DuckDuckGo", "href": "https://www.duckduckgo.com" },
"rank": 3
}]
};
var datatable1 = document.getElementById('datatable-1');
datatable1.columns = data1.columns;
datatable1.rows = data1.rows;
</script> --> <!-- <fw-file-uploader
text="Upload CSV"
description="or drag and drop your csv file here"
hint="File size must be within 5MB"
max-file-size="5"
>
</fw-file-uploader> --> <script data-build="2023-02-09T15:52:55">
if ('serviceWorker' in navigator && location.protocol !== 'file:') {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js')
.then(function(reg) {
reg.onupdatefound = function() {
var installingWorker = reg.installing;
installingWorker.onstatechange = function() {
if (installingWorker.state === 'installed') {
window.dispatchEvent(new Event('swUpdate'))
}
}
}
})
.catch(function(err) { console.error('service worker error', err) });
});
}</script></body></html>