@freshworks/crayons
Version:
Crayons Web Components library
291 lines (287 loc) • 14.9 kB
JavaScript
import { attachShadow, h, proxyCustomElement } from '@stencil/core/internal/client';
import { a as hasSlot } from './index2.js';
import { T as TranslationController } from './Translation.js';
import { d as defineCustomElement$h } from './avatar.js';
import { d as defineCustomElement$g } from './button.js';
import { d as defineCustomElement$f } from './checkbox.js';
import { d as defineCustomElement$e } from './datepicker.js';
import { d as defineCustomElement$1, a as defineCustomElement$d } from './icon.js';
import { d as defineCustomElement$c } from './input.js';
import { d as defineCustomElement$b } from './list-options.js';
import { d as defineCustomElement$a } from './popover.js';
import { d as defineCustomElement$9 } from './radio.js';
import { d as defineCustomElement$8 } from './radio-group.js';
import { d as defineCustomElement$7 } from './select.js';
import { d as defineCustomElement$6 } from './select-option.js';
import { d as defineCustomElement$5 } from './spinner.js';
import { d as defineCustomElement$4 } from './tag.js';
import { d as defineCustomElement$3 } from './textarea.js';
import { d as defineCustomElement$2 } from './timepicker.js';
const formControlCss = ":host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, \"Segoe UI\", roboto, oxygen, ubuntu, cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}.error{color:#d72d30;font-weight:400;font-size:12px;line-height:20px;padding-top:4px;padding-left:2px}label{font-size:12px;color:#475867;font-weight:600;margin-bottom:4px;padding-left:2px;display:block}label.required::after{content:\"*\";position:relative;display:inline-block;top:2px;font-size:14px;color:#d72d30;padding-left:2px;font-weight:700}.hint{font-weight:400;font-size:12px;color:#475867;line-height:20px;padding-top:4px;padding-left:2px}.form-control-container{margin:1em 0em}";
const NATIVE_CONTROLS = ['input', 'select', 'textarea'];
let FormControl = class extends HTMLElement {
constructor() {
super();
this.__registerHost();
attachShadow(this);
this.type = 'TEXT';
this.required = false;
this.hint = '';
this.placeholder = '';
this.choices = [];
/**
* Additional props can be passed here for crayons components. Useful when rendering crayons components implicitly via form-control.
*/
this.fieldProps = {};
this.touched = false;
this.error = '';
this.hasSlot = false;
}
renderControl() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
if (this.hasSlot)
return null;
if (!this.name)
return null;
let cmp;
switch (this.type) {
case 'TEXT':
case 'NUMBER':
case 'DECIMAL':
case 'EMAIL':
case 'TEL':
case 'URL': {
const type = this.type === 'DECIMAL' ? 'number' : (_a = this.type) === null || _a === void 0 ? void 0 : _a.toLowerCase();
const componentProps = Object.assign(Object.assign(Object.assign(Object.assign({}, this.fieldProps), { name: this.name, placeholder: this.placeholder, label: this.label, required: this.required, type: type }), (_b = this.controlProps) === null || _b === void 0 ? void 0 : _b.inputProps(this.name, type)), { state: (this.touched && this.error && 'error') || 'normal', ['hint-text']: this.hint, ['error-text']: TranslationController.t(this.error, {
field: this.label || this.name,
}) });
cmp = (h("fw-input", Object.assign({}, componentProps, { ref: (el) => (this.crayonsControlRef = el) })));
break;
}
case 'PARAGRAPH':
{
const componentProps = Object.assign(Object.assign(Object.assign(Object.assign({}, this.fieldProps), { name: this.name, placeholder: this.placeholder, label: this.label, required: this.required }), (_c = this.controlProps) === null || _c === void 0 ? void 0 : _c.inputProps(this.name, (_d = this.type) === null || _d === void 0 ? void 0 : _d.toLowerCase())), { state: (this.touched && this.error && 'error') || 'normal', ['hint-text']: this.hint, ['error-text']: TranslationController.t(this.error, {
field: this.label || this.name,
}) });
cmp = (h("fw-textarea", Object.assign({}, componentProps, { ref: (el) => (this.crayonsControlRef = el) })));
}
break;
case 'DATE':
{
const componentProps = Object.assign(Object.assign(Object.assign(Object.assign({}, this.fieldProps), { name: this.name, placeholder: this.placeholder, label: this.label, required: this.required }), (_e = this.controlProps) === null || _e === void 0 ? void 0 : _e.inputProps(this.name, (_f = this.type) === null || _f === void 0 ? void 0 : _f.toLowerCase())), { state: (this.touched && this.error && 'error') || 'normal', ['hint-text']: this.hint, ['error-text']: TranslationController.t(this.error, {
field: this.label || this.name,
}) });
cmp = (h("fw-datepicker", Object.assign({}, componentProps, { ref: (el) => (this.crayonsControlRef = el) })));
}
break;
case 'CHECKBOX':
{
const componentProps = Object.assign(Object.assign(Object.assign(Object.assign({}, this.fieldProps), { name: this.name, placeholder: this.placeholder, label: '', required: this.required }), (_g = this.controlProps) === null || _g === void 0 ? void 0 : _g.checkboxProps(this.name, (_h = this.type) === null || _h === void 0 ? void 0 : _h.toLowerCase())), { state: (this.touched && this.error && 'error') || 'normal', ['hint-text']: this.hint, ['error-text']: TranslationController.t(this.error, {
field: this.label || this.name,
}) });
cmp = (h("fw-checkbox", Object.assign({}, componentProps, { ref: (el) => (this.crayonsControlRef = el) }), this.label));
}
break;
case 'RADIO':
{
const controlProps = (_j = this.controlProps) === null || _j === void 0 ? void 0 : _j.radioProps(this.name, (_k = this.type) === null || _k === void 0 ? void 0 : _k.toLowerCase());
const componentProps = Object.assign(Object.assign(Object.assign({}, this.fieldProps), { 'name': this.name, 'placeholder': this.placeholder, 'label': this.label, 'required': this.required, 'allow-empty': true, 'state': (this.touched && this.error && 'error') || 'normal', ['hint-text']: this.hint, ['error-text']: TranslationController.t(this.error, {
field: this.label || this.name,
}) }), controlProps);
cmp = (h("fw-radio-group", Object.assign({}, componentProps, { ref: (el) => (this.crayonsControlRef = el) }), (_l = this.choices) === null || _l === void 0 ? void 0 : _l.map((ch) => {
const val = ch[componentProps.optionValuePath] || ch.value;
const label = ch[componentProps.optionLabelPath] || ch.value;
return (h("fw-radio", { name: this.name, value: val, state: this.touched && this.error ? 'error' : 'normal' }, label));
})));
}
break;
case 'DROPDOWN':
case 'MULTI_SELECT':
{
const controlProps = (_m = this.controlProps) === null || _m === void 0 ? void 0 : _m.selectProps(this.name, (_o = this.type) === null || _o === void 0 ? void 0 : _o.toLowerCase());
let componentProps = Object.assign(Object.assign({}, this.fieldProps), { name: this.name, placeholder: this.placeholder, label: this.label, required: this.required, multiple: this.type === 'MULTI_SELECT', state: (this.touched && this.error && 'error') || 'normal', ['hint-text']: this.hint, ['error-text']: TranslationController.t(this.error, {
field: this.label || this.name,
}) });
componentProps = Object.assign(Object.assign(Object.assign({}, componentProps), controlProps), { options: this.choices });
cmp = (h("fw-select", Object.assign({}, componentProps, { ref: (el) => (this.crayonsControlRef = el) })));
}
break;
case 'RELATIONSHIP':
{
const controlProps = (_p = this.controlProps) === null || _p === void 0 ? void 0 : _p.selectProps(this.name, (_q = this.type) === null || _q === void 0 ? void 0 : _q.toLowerCase());
const componentProps = Object.assign(Object.assign({}, this.fieldProps), { name: this.name, placeholder: this.placeholder, label: this.label, required: this.required, state: (this.touched && this.error && 'error') || 'normal', ['hint-text']: this.hint, ['error-text']: TranslationController.t(this.error, {
field: this.label || this.name,
}) });
if (Array.isArray(controlProps.value) &&
typeof controlProps.value[0] === 'object'
// handle multi_select, select [{}] initialValues
) {
componentProps.selectedOptions = controlProps.value;
}
if (((_r = componentProps.selectedOptions) === null || _r === void 0 ? void 0 : _r.length) > 0) {
(_s = this.crayonsControlRef) === null || _s === void 0 ? void 0 : _s.setSelectedOptions(componentProps.selectedOptions);
}
else if (!controlProps.value) {
(_t = this.crayonsControlRef) === null || _t === void 0 ? void 0 : _t.setSelectedOptions([]);
}
componentProps.noDataText =
TranslationController.t('search.startTyping');
cmp = (h("fw-select", Object.assign({}, componentProps, { ref: (el) => (this.crayonsControlRef = el) })));
}
break;
case 'TIME':
{
const componentProps = Object.assign(Object.assign(Object.assign(Object.assign({}, this.fieldProps), { name: this.name, placeholder: this.placeholder, label: this.label, required: this.required }), (_u = this.controlProps) === null || _u === void 0 ? void 0 : _u.inputProps(this.name, (_v = this.type) === null || _v === void 0 ? void 0 : _v.toLowerCase())), { state: (this.touched && this.error && 'error') || 'normal', ['hint-text']: this.hint, ['error-text']: TranslationController.t(this.error, {
field: this.label || this.name,
}) });
cmp = (h("fw-timepicker", Object.assign({}, componentProps, { ref: (el) => (this.crayonsControlRef = el) })));
}
break;
}
return cmp;
}
componentWillLoad() {
this.handleSlotChange();
}
/**
* Set Focus on the child
*/
async setFocus() {
var _a, _b, _c, _d;
if (!this.hasSlot) {
await ((_b = (_a = this.crayonsControlRef) === null || _a === void 0 ? void 0 : _a.setFocus) === null || _b === void 0 ? void 0 : _b.call(_a));
}
else {
(_d = (_c = this.slotElement) === null || _c === void 0 ? void 0 : _c.focus) === null || _d === void 0 ? void 0 : _d.call(_c);
}
}
handleSlotChange() {
var _a;
this.hasSlot = hasSlot(this.el);
this.slotElement = (_a = [...this.el.querySelectorAll('*')].filter((el) => {
var _a;
return NATIVE_CONTROLS.includes((_a = el === null || el === void 0 ? void 0 : el.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase());
})) === null || _a === void 0 ? void 0 : _a[0];
}
render() {
return (h("div", { class: 'form-control-container' }, this.renderControl(), this.hasSlot && (h("label", { htmlFor: this.name, class: {
label: true,
required: this.required,
} }, this.label)), h("slot", { onSlotchange: () => this.handleSlotChange() }), this.hasSlot && !(this.touched && this.error) && (h("div", { class: 'hint', id: `hint-${this.name}` }, this.hint)), this.hasSlot && this.touched && this.error && (h("div", { class: 'error', id: `error-${this.name}` }, TranslationController.t(this.error, {
field: this.label || this.name,
})))));
}
get el() { return this; }
static get style() { return formControlCss; }
};
FormControl = /*@__PURE__*/ proxyCustomElement(FormControl, [1, "fw-form-control", {
"type": [1],
"name": [520],
"label": [8],
"required": [4],
"hint": [1],
"placeholder": [1],
"choices": [8],
"fieldProps": [1032, "field-props"],
"controlProps": [8, "control-props"],
"touched": [4],
"error": [1],
"hasSlot": [32],
"setFocus": [64]
}]);
function defineCustomElement() {
const components = ["fw-form-control", "fw-avatar", "fw-button", "fw-checkbox", "fw-datepicker", "fw-icon", "fw-input", "fw-list-options", "fw-popover", "fw-radio", "fw-radio-group", "fw-select", "fw-select-option", "fw-spinner", "fw-tag", "fw-textarea", "fw-timepicker", "fw-toast-message"];
components.forEach(tagName => { switch (tagName) {
case "fw-form-control":
if (!customElements.get(tagName)) {
customElements.define(tagName, FormControl);
}
break;
case "fw-avatar":
if (!customElements.get(tagName)) {
defineCustomElement$h();
}
break;
case "fw-button":
if (!customElements.get(tagName)) {
defineCustomElement$g();
}
break;
case "fw-checkbox":
if (!customElements.get(tagName)) {
defineCustomElement$f();
}
break;
case "fw-datepicker":
if (!customElements.get(tagName)) {
defineCustomElement$e();
}
break;
case "fw-icon":
if (!customElements.get(tagName)) {
defineCustomElement$d();
}
break;
case "fw-input":
if (!customElements.get(tagName)) {
defineCustomElement$c();
}
break;
case "fw-list-options":
if (!customElements.get(tagName)) {
defineCustomElement$b();
}
break;
case "fw-popover":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "fw-radio":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "fw-radio-group":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "fw-select":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "fw-select-option":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "fw-spinner":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "fw-tag":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "fw-textarea":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "fw-timepicker":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "fw-toast-message":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { FormControl as F, defineCustomElement as d };