@freshworks/crayons
Version:
Crayons Web Components library
201 lines (196 loc) • 13 kB
JavaScript
import { attachShadow, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
import { a as hasSlot, r as renderHiddenField } from './index2.js';
import { d as defineCustomElement$1, a as defineCustomElement$3 } from './icon.js';
import { d as defineCustomElement$2 } from './spinner.js';
const checkboxCss = ":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}.field-control{position:relative}.field-control-label{display:block;font-size:12px;color:var(--fw-label-color, #475867);font-weight:600;margin-bottom:4px;padding-left:2px;line-height:20px}.field-control-label.required::after{content:\"*\";position:relative;display:inline-block;top:2px;font-size:14px;color:#d72d30;padding-left:2px;font-weight:700}.field-control-hint-text{font-family:-apple-system, blinkmacsystemfont, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", arial, sans-serif;font-size:12px;line-height:20px;margin-top:4px;margin-bottom:0;color:var(--fw-hint-color, #acb6be);position:inherit;display:block;padding-left:2px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.field-control-error-text{font-family:-apple-system, blinkmacsystemfont, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", arial, sans-serif;font-size:12px;line-height:20px;margin-top:4px;margin-bottom:0;color:var(--fw-error-color, #d72d30);position:inherit;display:block;padding-left:2px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.field-control-warning-text{font-family:-apple-system, blinkmacsystemfont, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", arial, sans-serif;font-size:12px;line-height:20px;margin-top:4px;margin-bottom:0;color:var(--fw-warning-color, #f8ab59);position:inherit;display:block;padding-left:2px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host{display:inline-block;position:relative}:host(:focus){outline:none}:host(:focus) input[type=checkbox]+label::before{border:1px solid transparent;-webkit-box-shadow:0 0 0 2px #2c5cc5;box-shadow:0 0 0 2px #2c5cc5}:host(:focus) input[type=checkbox]:checked+label::before{border:1px solid #ffffff}:host(:focus) input[type=checkbox][disabled]+label::before{-webkit-box-shadow:none;box-shadow:none;border:1px solid #dadfe3}:host(:hover) input[type=checkbox]+label::before{border-color:#cfd7df;-webkit-box-shadow:0 0 0 5px #ebeff3;box-shadow:0 0 0 5px #ebeff3}:host(:hover) input[type=checkbox]:checked+label::before{border-color:#2c5cc5}:host(:hover) input[type=checkbox][disabled]+label{cursor:not-allowed}:host(:hover) input[type=checkbox][disabled]+label::before{-webkit-box-shadow:none;box-shadow:none;border:1px solid #dadfe3}.checkbox-container{cursor:pointer}.checkbox-container.disabled{cursor:not-allowed}#description{font-size:12px;color:#475867;letter-spacing:0;line-height:20px;position:relative;font-weight:400;word-wrap:break-word;padding-left:22px}input[type=checkbox]{display:none}input[type=checkbox]+label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:0;vertical-align:middle;font-size:14px;color:#12344d;line-height:20px;font-weight:400;cursor:inherit}input[type=checkbox]+label .with-description{font-weight:600}input[type=checkbox]+label #label{padding-left:22px;box-decoration-break:clone;-webkit-box-decoration-break:clone}input[type=checkbox]+label #label.required::after{content:\"*\";position:relative;display:inline-block;top:2px;font-size:14px;color:#d72d30;padding-left:2px;font-weight:700}@media screen and (prefers-reduced-motion: reduce){input[type=checkbox]+label::before{-webkit-transition:none;transition:none}}input[type=checkbox]+label::before{position:absolute;left:0;top:3px;display:block;content:\"\";border:1px solid #475867;height:14px;width:14px;background-color:#fff;-webkit-transition:all 0.2s ease;transition:all 0.2s ease;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:2px}@media screen and (prefers-reduced-motion: reduce){input[type=checkbox]+label.error::before{-webkit-transition:none;transition:none}}input[type=checkbox]+label.error::before{position:absolute;left:0;top:3px;display:block;content:\"\";border:1px solid #d72d30;height:14px;width:14px;background-color:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:2px;-webkit-transition:all 0.2s ease;transition:all 0.2s ease}@media screen and (prefers-reduced-motion: reduce){input[type=checkbox]+label .after{-webkit-transition:none;transition:none}}input[type=checkbox]+label .after{position:absolute;display:block;content:\"\";left:3px;top:-1px;width:8px;height:8px;opacity:0;-webkit-transition:opacity 0.2s ease-in-out;transition:opacity 0.2s ease-in-out;-webkit-box-sizing:border-box;box-sizing:border-box}input[type=checkbox]:checked+label::before{background:#2c5cc5;border-color:#2c5cc5;-webkit-box-shadow:none;box-shadow:none}input[type=checkbox]:checked+label .after{opacity:1}input[type=checkbox]:checked:hover+label::before{border-color:#2c5cc5;-webkit-box-shadow:0 0 0 5px #ebeff3;box-shadow:0 0 0 5px #ebeff3}input[type=checkbox]:checked:hover+label .after{opacity:1}input[type=checkbox]:checked:focus+label::before{background:#2c5cc5;border-color:#fff;-webkit-box-shadow:0 0 0 1px #2c5cc5;box-shadow:0 0 0 1px #2c5cc5}input[type=checkbox]:checked:focus+label .after{opacity:1}input[type=checkbox][disabled]+label{color:#92a2b1}input[type=checkbox][disabled]+label .label-field{color:#92a2b1}input[type=checkbox][disabled]+label::before{border-color:#dadfe3;background-color:#ebeff3}input[type=checkbox][disabled]:checked+label{color:#92a2b1}input[type=checkbox][disabled]:checked+label::before{background-color:#ebeff3;border-color:#dadfe3}";
let Checkbox = class extends HTMLElement {
constructor() {
super();
this.__registerHost();
attachShadow(this);
this.fwChange = createEvent(this, "fwChange", 7);
this.fwFocus = createEvent(this, "fwFocus", 7);
this.fwBlur = createEvent(this, "fwBlur", 7);
/**
* Sets the state of the check box to selected. If the attribute’s value is undefined, the value is set to false.
*/
this.checked = false;
/**
* Disables the check box on the interface. If the attribute’s value is undefined, the value is set to false.
*/
this.disabled = false;
/**
* Description to be displayed for the checkbox.
*/
this.description = '';
/**
* @deprecated Use `description` instead.
* Label displayed on the interface, for the check box.
*/
this.label = '';
/**
* Name of the component, saved as part of form data.
*/
this.name = '';
/**
* Identifier corresponding to the component, that is saved when the form data is saved.
*/
this.value = '';
/**
* Specifies the input box as a mandatory field and displays an asterisk next to the label. If the attribute’s value is undefined, the value is set to false.
*/
this.required = false;
/**
* Theme based on which the checkbox is styled.
*/
this.state = 'normal';
/**
/**
* Hint text displayed below the radio group.
*/
this.hintText = '';
/**
* Warning text displayed below the radio group.
*/
this.warningText = '';
/**
* Error text displayed below the radio group.
*/
this.errorText = '';
this.hasHintTextSlot = false;
this.hasWarningTextSlot = false;
this.hasErrorTextSlot = false;
this.onFocus = () => {
this.fwFocus.emit();
};
this.onBlur = (e) => {
this.fwBlur.emit({
event: e,
name: this.name,
});
};
this.toggle = (e) => {
if (!this.disabled) {
this.checked = !this.checked;
this.fwChange.emit({
event: e,
value: this.value,
name: this.name,
meta: { checked: this.checked },
});
}
};
}
componentDidLoad() {
this.checkbox.checked = this.checked;
this.checkbox.disabled = this.disabled;
}
checkChanged(isChecked) {
this.checkbox.checked = isChecked;
}
componentWillLoad() {
this.checkSlotContent();
}
checkSlotContent() {
this.hasHintTextSlot = hasSlot(this.host, 'hint-text');
this.hasWarningTextSlot = hasSlot(this.host, 'warning-text');
this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
}
/**
* Sets focus on a `fw-checkbox`.
*/
async setFocus() {
var _a;
(_a = this.host) === null || _a === void 0 ? void 0 : _a.focus();
}
disabledChanged(isDisabled) {
this.checkbox.disabled = isDisabled;
}
handleKeydown(ev) {
if (ev.code === 'Space') {
ev.preventDefault();
}
}
handleKeyup(ev) {
if (ev.code === 'Space') {
this.toggle(ev);
}
}
getAriaDescribedBy() {
if (this.state === 'normal')
return `hint-${this.name}`;
else if (this.state === 'error')
return `error-${this.name}`;
else if (this.state === 'warning')
return `warning-${this.name}`;
return null;
}
render() {
const { host, name, value } = this;
if (this.checked) {
renderHiddenField(host, name, value);
}
const hasHintText = this.hintText ? true : this.hasHintTextSlot;
const hasErrorText = this.errorText ? true : this.hasErrorTextSlot;
const hasWarningText = this.warningText ? true : this.hasWarningTextSlot;
const showHintText = this.state === 'normal' ? true : false;
const showErrorText = this.state === 'error' ? true : false;
const showWarningText = this.state === 'warning' ? true : false;
const hintTextId = `hint-${this.name}`;
const warningTextId = `warning-${this.name}`;
const errorTextId = `error-${this.name}`;
return (h(Host, { role: 'checkbox', tabIndex: '0', "aria-disabled": this.disabled ? 'true' : 'false', "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": 'label', "aria-describedby": `description ${this.getAriaDescribedBy()}`, onClick: this.toggle, onFocus: this.onFocus, onBlur: this.onBlur, "aria-invalid": this.state === 'error' }, h("div", { class: { 'checkbox-container': true, 'disabled': this.disabled } }, h("input", { type: 'checkbox', ref: (el) => (this.checkbox = el), required: this.required, name: this.name, id: this.name }), h("label", { class: { error: this.state === 'error' } }, h("span", { id: 'label', class: {
'with-description': this.description !== '',
'required': this.required,
} }, h("slot", null)), this.description !== '' || this.label !== '' ? (h("div", { id: 'description' }, this.description ? this.description : this.label)) : (''), this.checked && (h("span", { class: 'after' }, h("fw-icon", { name: 'check', color: this.disabled ? '#92A2B1' : '#ffffff', size: 8 }))))), showHintText && hasHintText && (h("div", { id: hintTextId, class: 'field-control-hint-text', "aria-hidden": hasHintText ? 'false' : 'true' }, h("slot", { name: 'hint-text' }, this.hintText))), showErrorText && hasErrorText && (h("div", { id: errorTextId, class: 'field-control-error-text', "aria-hidden": hasErrorText ? 'false' : 'true' }, h("slot", { name: 'error-text' }, this.errorText))), showWarningText && hasWarningText && (h("div", { id: warningTextId, class: 'field-control-warning-text', "aria-hidden": hasWarningText ? 'false' : 'true' }, h("slot", { name: 'warning-text' }, this.warningText)))));
}
get host() { return this; }
static get watchers() { return {
"checked": ["checkChanged"],
"disabled": ["disabledChanged"]
}; }
static get style() { return checkboxCss; }
};
Checkbox = /*@__PURE__*/ proxyCustomElement(Checkbox, [1, "fw-checkbox", {
"checked": [1540],
"disabled": [1540],
"description": [1],
"label": [1],
"name": [1],
"value": [1],
"required": [4],
"state": [1],
"hintText": [1, "hint-text"],
"warningText": [1, "warning-text"],
"errorText": [1, "error-text"],
"hasHintTextSlot": [32],
"hasWarningTextSlot": [32],
"hasErrorTextSlot": [32],
"setFocus": [64]
}, [[0, "keydown", "handleKeydown"], [0, "keyup", "handleKeyup"]]]);
function defineCustomElement() {
const components = ["fw-checkbox", "fw-icon", "fw-spinner", "fw-toast-message"];
components.forEach(tagName => { switch (tagName) {
case "fw-checkbox":
if (!customElements.get(tagName)) {
customElements.define(tagName, Checkbox);
}
break;
case "fw-icon":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "fw-spinner":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "fw-toast-message":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { Checkbox as C, defineCustomElement as d };