@freshworks/crayons
Version:
Crayons Web Components library
594 lines (583 loc) • 36.8 kB
JavaScript
import { r as registerInstance, h, c as createEvent, e as Host, i as getElement } from './index-25bc21e4.js';
import { h as hasSlot, r as renderHiddenField, a as handleKeyDown } from './index-04e9b0fa.js';
import { F as FieldControl } from './field-control-d467cf63.js';
import { c as createPopper } from './popper-cec7308d.js';
const avatarCss = ":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}:host{display:inline-block;--size:3rem}.avatar{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:calc(var(--size) * 0.5);font-weight:400;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.avatar__initials{line-height:1;font-weight:600;font-size:32px;text-align:center;text-transform:uppercase}.avatar__image{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.avatar--dark{background-color:#527fa5;color:#fff}.avatar--dark--initials{border:2px solid rgba(18, 52, 77, 0.16)}.avatar--light{background-color:#dff0ff;color:#12344d}.avatar--light--initials{border:2px solid #bedbf5}.avatar--circle{border-radius:50%}.avatar--rounded{border-radius:4px}.avatar--square{border-radius:0}.avatar--xxlarge{width:96px;height:96px}.avatar--xxlarge .avatar__initials{font-size:32px}.avatar--xlarge{width:72px;height:72px}.avatar--xlarge .avatar__initials{font-size:24px}.avatar--large{width:56px;height:56px}.avatar--large .avatar__initials{font-size:20px}.avatar--medium{width:40px;height:40px}.avatar--medium .avatar__initials{font-size:16px}.avatar--small{width:32px;height:32px}.avatar--small .avatar__initials{font-size:14px}.avatar--xsmall{width:24px;height:24px}.avatar--xsmall .avatar__initials{font-size:12px}.avatar--xxsmall{width:20px;height:20px}.avatar--xxsmall .avatar__initials{font-size:10px}";
let Avatar = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.shape = 'circle';
this.name = '';
this.size = 'large';
this.mode = 'dark';
}
/**
* Function to get the initials to display inside the avatar
* @returns initials from either initials prop or from name prop
*/
getInitials() {
let initials = '';
if (this.initials) {
initials = this.initials;
}
else if (this.name.trim().length > 0) {
const nameParts = this.name.trim().split(' ');
if (nameParts.length === 1) {
initials = nameParts.shift().charAt(0);
}
else if (nameParts.length > 1) {
initials = nameParts.shift().charAt(0) + nameParts.pop().charAt(0);
}
}
return initials;
}
render() {
let strBaseClassName = `avatar
avatar--${this.shape}
avatar--${this.size}
avatar--${this.mode}
`;
if (!this.image) {
strBaseClassName += ` avatar--${this.mode}--initials`;
}
return (h("div", { class: strBaseClassName, "aria-label": this.alt }, this.image ? (h("img", { part: 'image', class: 'avatar__image', src: this.image, alt: this.alt })) : (h("div", { part: 'initials', class: 'avatar__initials' }, this.getInitials()))));
}
};
Avatar.style = avatarCss;
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 {
constructor(hostRef) {
registerInstance(this, hostRef);
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 getElement(this); }
static get watchers() { return {
"checked": ["checkChanged"],
"disabled": ["disabledChanged"]
}; }
};
Checkbox.style = checkboxCss;
const inputCss = ":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}*,::after,::before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:host{display:block}.input-container{width:inherit;height:inherit}.input-container-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;border:1px solid #cfd7df;background-color:#fff;position:relative;border-radius:4px;-webkit-box-shadow:inset 0px 1px 2px rgba(24, 50, 71, 0.05);box-shadow:inset 0px 1px 2px rgba(24, 50, 71, 0.05)}.input-container-inner.error{border-color:#d72d30}.input-container-inner.error.has-focus{-webkit-box-shadow:none;box-shadow:none;border-color:#d72d30}.input-container-inner.error:hover,.input-container-inner.error:focus{border-color:#d72d30}.input-container-inner.error+.help-block{color:#d72d30}.input-container-inner.warning{border-color:#f8ab59}.input-container-inner.warning.has-focus{-webkit-box-shadow:none;box-shadow:none;border-color:#f8ab59}.input-container-inner.warning:hover,.input-container-inner.warning:focus{border-color:#f8ab59}.input-container-inner.warning+.help-block{color:#f8ab59}.input-container-inner .inner__content{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-wrap:wrap;flex-wrap:wrap}.input-container-inner .inner__content .input__label{-ms-flex:1 1 40%;flex:1 1 40%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-left:8px}.input-container-inner .inner__content .input__label input{width:100%;padding:5px 0px;resize:none;border:none;outline:none;-webkit-box-shadow:none;box-shadow:none;min-height:24px;font-size:14px;font-weight:500;letter-spacing:0;line-height:20px;color:#183247;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:text;display:inline-block;font-family:inherit}.input-container-inner .inner__content .input__label input[disabled]{font-weight:400;color:#92a2b1;background-color:#f7f9fa;pointer-events:none}.input-container-inner .inner__content .input__prefix{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:0 1 auto;flex:0 1 auto;margin-left:4px}.input-container-inner .inner__content .input__prefix.hasContent{margin-left:8px}.input-container-inner .inner__suffix{-ms-flex:0 1 auto;flex:0 1 auto;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-right:8px}@media (prefers-reduced-motion){.input-container-inner{}.input-container-inner:hover{-webkit-transition:none;transition:none}}.input-container-inner:hover{border:1px #475867 solid}.input-container-inner.has-focus{outline:none;background:#fff;background-color:#fff;border:1px solid #2c5cc5;-webkit-box-shadow:0 0 0 1px #2c5cc5;box-shadow:0 0 0 1px #2c5cc5}.input-container-inner.disabled{font-weight:400;color:#92a2b1;border:1px solid #ebeff3;background-color:#f7f9fa;border-style:solid;pointer-events:none}.input-container-inner .clear-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:16px;width:16px}.input-container-inner .clear-button:hover,.input-container-inner .clear-button:focus{cursor:pointer;pointer-events:initial}.input-container-inner .clear-button .clear-img{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:12px;height:12px}.input-container-inner+.help-block{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}::-webkit-input-placeholder{color:#acb6be}::-moz-placeholder{color:#acb6be}:-ms-input-placeholder{color:#acb6be}:-moz-placeholder{color:#acb6be}";
let Input = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.fwFocus = createEvent(this, "fwFocus", 7);
this.fwBlur = createEvent(this, "fwBlur", 7);
this.fwInput = createEvent(this, "fwInput", 7);
this.fwInputClear = createEvent(this, "fwInputClear", 7);
this.hasFocus = false;
this.hasPrefix = false;
this.hasHintTextSlot = false;
this.hasWarningTextSlot = false;
this.hasErrorTextSlot = false;
/**
* Label displayed on the interface, for the component.
*/
this.label = '';
/**
* Default value displayed in the input box.
*/
this.value = '';
/**
* Type of value accepted as the input value. If a user enters a value other than the specified type, the input box is not populated.
*/
this.type = 'text';
/**
* Specifies whether the browser can display suggestions to autocomplete the text value.
*/
this.autocomplete = 'off';
/**
* Displays a right-justified clear icon in the text box. Clicking the icon clears the input text. If the attribute’s value is undefined, the value is set to false. For a read-only input box, the clear icon is not displayed unless a default value is specified for the input box.
*/
this.clearInput = false;
/**
* The step attribute is used when the type is `number`. It specifies the interval between legal numbers in a number/decimal input element.
* Works with the min and max attributes to limit the increments at which a value can be set.
* Possible values are `any` or a positive floating point number.
* Default value is `any`
*/
this.step = 'any';
/**
* Name of the component, saved as part of form data.
*/
this.name = '';
/**
* Theme based on which the text box is styled.
*/
this.state = 'normal';
/**
* If true, the user cannot enter a value in the input box. If the attribute’s value is undefined, the value is set to false.
*/
this.readonly = false;
/**
* 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;
/**
* Disables the component on the interface. If the attribute’s value is undefined, the value is set to false.
*/
this.disabled = false;
/**
* Identifier of the icon that is displayed in the left side of the text box. The attribute’s value must be a valid svg file in the repo of icons (assets/icons).
*/
this.iconLeft = undefined;
/**
* Identifier of the icon that is displayed in the right side of the text box. The attribute’s value must be a valid svg file in the repo of icons (assets/icons).
*/
this.iconRight = undefined;
/**
* Hint text displayed below the text box.
*/
this.hintText = '';
/**
* Warning text displayed below the text box.
*/
this.warningText = '';
/**
* Error text displayed below the text box.
*/
this.errorText = '';
this.onInput = (ev) => {
const input = ev.target;
this.value = input.value || '';
this.fwInput.emit({
event: ev,
name: this.name,
value: this.getValue(),
});
};
this.onFocus = () => {
this.hasFocus = true;
this.fwFocus.emit();
};
this.onBlur = (ev) => {
this.hasFocus = false;
this.fwBlur.emit({
event: ev,
name: this.name,
});
};
this.clearTextInput = (ev) => {
if (!this.disabled) {
this.value = '';
if (this.nativeInput) {
this.nativeInput.value = '';
}
this.fwInputClear.emit({
event: ev,
name: this.name,
value: this.value,
});
}
};
}
showClearButton() {
var _a;
return this.clearInput && !this.disabled && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0;
}
getValue() {
return this.value || '';
}
hasValue() {
return this.getValue().length > 0;
}
/**
* Sets focus on a specific `fw-input`. Use this method instead of the global `input.focus()`.
*/
async setFocus() {
if (this.nativeInput) {
this.nativeInput.focus();
}
}
renderClearButton() {
return (h("div", { class: 'clear-button', role: 'button', tabindex: '0', onClick: (e) => this.clearTextInput(e), onKeyDown: handleKeyDown(this.clearTextInput) }, h("fw-icon", { class: 'clear-img', name: 'cross', size: 8, library: 'system' })));
}
renderIcon(iconName) {
return h("fw-icon", { name: iconName });
}
componentWillLoad() {
this.hasPrefix =
!!this.host.querySelector('[slot="input-prefix"]') || !!this.iconLeft;
this.checkSlotContent();
}
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;
}
checkSlotContent() {
this.hasHintTextSlot = hasSlot(this.host, 'hint-text');
this.hasWarningTextSlot = hasSlot(this.host, 'warning-text');
this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
}
render() {
const { host, name, value } = this;
renderHiddenField(host, name, value);
return (h(FieldControl, { inputId: this.name, label: this.label, labelId: `${this.label}-${this.name}`, state: this.state, hintTextId: `hint-${this.name}`, hintText: this.hintText, hasHintTextSlot: this.hasHintTextSlot, errorTextId: `error-${this.name}`, errorText: this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, warningTextId: `warning-${this.name}`, warningText: this.warningText, hasWarningTextSlot: this.hasWarningTextSlot, required: this.required }, h("div", { "aria-disabled": this.disabled, class: {
'has-value': this.hasValue(),
'has-focus': this.hasFocus,
} }, h("div", { class: {
'input-container': true,
} }, h("div", { class: {
'input-container-inner': true,
'has-focus': this.hasFocus,
'disabled': this.disabled,
[this.state]: true,
} }, h("div", { class: 'inner__content' }, h("div", { class: { input__prefix: true, hasContent: this.hasPrefix } }, this.iconLeft && this.renderIcon(this.iconLeft), h("slot", { name: 'input-prefix' })), h("div", { class: 'input__label' }, h("input", { ref: (input) => {
this.nativeInput = input;
}, id: this.name, autoComplete: this.autocomplete, disabled: this.disabled, name: this.name, placeholder: this.placeholder || '', minLength: this.minlength, maxLength: this.maxlength, min: this.min, max: this.max, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-invalid": this.state === 'error', "aria-describedby": this.getAriaDescribedBy() }), this.showClearButton() && this.renderClearButton())), h("div", { class: 'inner__suffix' }, this.iconRight && this.renderIcon(this.iconRight), h("slot", { name: 'input-suffix' })))))));
}
get host() { return getElement(this); }
};
Input.style = inputCss;
const popoverCss = ":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}.popper-content{display:none;z-index:99;min-width:var(--fw-popover-min-width);max-width:var(--fw-popover-max-width);min-height:var(--fw-popover-min-height, 10px);max-height:var(--fw-popover-max-height, 400px);overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;margin:0px;border-radius:var(--fw-popover-border-radius, 8px);border:1px solid #ebeff3;position:absolute;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;-webkit-box-shadow:-15px 20px 40px rgba(0, 0, 0, 0.04);box-shadow:-15px 20px 40px rgba(0, 0, 0, 0.04);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transform:scale(0.01);transform:scale(0.01);-webkit-transition:150ms color, 150ms border, 150ms -webkit-box-shadow;transition:150ms color, 150ms border, 150ms -webkit-box-shadow;transition:150ms color, 150ms border, 150ms box-shadow;transition:150ms color, 150ms border, 150ms box-shadow, 150ms -webkit-box-shadow;will-change:auto}.popper-content.no-border{border:0px}.popper-content.no-transition{-webkit-transition:none;transition:none}.popper-content[data-show]{display:block}.overlay{width:100%;height:100%;display:none;position:fixed;top:0;left:0;z-index:95;background-color:transparent}@media screen and (prefers-reduced-motion: reduce){.popper-content{-webkit-transition:none;transition:none}}";
let Popover = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.fwShow = createEvent(this, "fwShow", 7);
this.fwHide = createEvent(this, "fwHide", 7);
this.triggerRefSlot = null;
this.isOpen = false;
/**
* Placement of the popover content with respect to the popover trigger.
*/
this.placement = 'bottom';
/**
* Alternative placement for popover if the default placement is not possible.
*/
this.fallbackPlacements = ['top'];
/**
* Skidding defines the distance between the popover trigger and the popover content along x-axis.
*/
this.skidding = '0';
/**
* Distance defines the distance between the popover trigger and the popover content along y-axis.
*/
this.distance = '0';
/**
* Variant defines the style of the popover-content.
*/
this.variant = 'select';
/**
* Whether the popover-content width to be same as that of the popover-trigger.
*/
this.sameWidth = true;
/**
* The trigger event on which the popover-content is displayed. The available options are
* 'click' | 'manual' | 'hover', in case of 'manual' no trigger event will be set.
*/
this.trigger = 'click';
/**
* Option to determine if popover-content has a border.
*/
this.hasBorder = true;
/**
* Option to prevent the tooltip from being clipped when the component is placed inside a container with
* `overflow: auto|hidden|scroll`.
*/
this.hoist = false;
/**
* Option to disable the popover animation on hide and show.
*/
this.disableTransition = false;
/**
* Whether to focus on the element in popover-content slot on opening the dropdown.
*/
this.autoFocusOnContent = false;
/**
* Indicates whether popover contents should be hidden on pressing Tab.
*/
this.hideOnTab = true;
}
onKeyDown(ev) {
switch (ev.key) {
case 'Tab':
this.hideOnTab && this.hide();
break;
case 'Escape':
this.hide();
break;
}
}
async show() {
var _a, _b, _c;
if (!this.isOpen) {
this.sameWidth &&
(this.popperDiv.style.width =
String(this.triggerRef.getBoundingClientRect().width) + 'px');
// Create popper instance if it's not available
!this.popperInstance && this.createPopperInstance();
this.popperDiv.setAttribute('data-show', '');
// Enable the event listeners
this.popperInstance.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [
...options.modifiers,
{ name: 'eventListeners', enabled: true },
] })));
this.popperInstance.update();
if (this.trigger !== 'hover') {
this.overlay.style.display = 'block';
}
this.isOpen = !this.isOpen;
if (((_a = this.contentRef) === null || _a === void 0 ? void 0 : _a.tagName) === 'FW-LIST-OPTIONS') {
const listOptionsElement = this.contentRef;
listOptionsElement.scrollToLastSelected();
}
this.autoFocusOnContent &&
(this.contentRef.setFocus
? this.contentRef.setFocus()
: (_c = (_b = this.contentRef).focus) === null || _c === void 0 ? void 0 : _c.call(_b));
this.fwShow.emit();
}
}
async hide() {
var _a, _b, _c;
if (this.isOpen) {
this.popperDiv.removeAttribute('data-show');
// Disable the event listeners
this.popperInstance.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [
...options.modifiers,
{ name: 'eventListeners', enabled: false },
] })));
if (this.trigger !== 'hover') {
this.overlay.style.display = 'none';
}
this.isOpen = !this.isOpen;
if (((_a = this.contentRef) === null || _a === void 0 ? void 0 : _a.tagName) === 'FW-LIST-OPTIONS') {
const listOptionsElement = this.contentRef;
listOptionsElement.clearFilter();
}
this.autoFocusOnContent &&
(this.triggerRef.setFocus
? this.triggerRef.setFocus()
: (_c = (_b = this.triggerRef).focus) === null || _c === void 0 ? void 0 : _c.call(_b));
this.fwHide.emit();
}
}
componentWillLoad() {
this.contentRef = this.host.querySelector('[slot="popover-content"]');
this.triggerRef = this.host.querySelector('[slot="popover-trigger"]');
if (this.triggerRef.nodeName === 'SLOT') {
const assignedElements = this.triggerRef.assignedElements();
if (assignedElements.length) {
this.triggerRefSlot = assignedElements[0];
}
}
if (this.trigger === 'click') {
this.triggerRef.addEventListener(this.trigger, () => {
if (this.isOpen) {
this.hide();
}
else {
this.show();
}
});
}
else if (this.trigger === 'hover') {
const trigger = this.triggerRefSlot || this.triggerRef;
trigger.addEventListener('focus', this.show.bind(this));
trigger.addEventListener('blur', this.hide.bind(this));
trigger.addEventListener('mouseenter', this.show.bind(this));
this.host.addEventListener('mouseleave', (event) => {
const eventPath = event.path ? event.path : event.composedPath();
const tooltip = eventPath.filter((node) => node.nodeName === 'FW-TOOLTIP')[0];
if (tooltip) {
const mouseLeaveHandler = (() => {
const hoverElements = document.querySelectorAll(':hover');
const index = [].indexOf.call(hoverElements, tooltip);
if (index < 0) {
this.hide();
}
}).bind(this);
setTimeout(mouseLeaveHandler, 200);
}
else {
this.hide();
}
});
}
this.popperOptions = {
placement: this.placement,
strategy: this.hoist ? 'fixed' : 'absolute',
modifiers: [
{
name: 'flip',
options: {
fallbackPlacements: this.fallbackPlacements,
},
},
{
name: 'preventOverflow',
options: {
boundary: this.boundary || 'clippingParents',
},
},
{
name: 'offset',
options: {
offset: [Number(this.skidding), Number(this.distance)],
},
},
],
};
}
disconnectedCallback() {
var _a;
(_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
}
createPopperInstance() {
const triggerRef = this.triggerRefSlot || this.triggerRef;
this.popperInstance = createPopper(triggerRef, this.popperDiv, this.popperOptions);
}
render() {
return [
h("slot", { name: 'popover-trigger' }),
h("div", { class: {
'popper-content': true,
'no-border': !this.hasBorder,
'no-transition': this.disableTransition,
}, ref: (popperDiv) => (this.popperDiv = popperDiv) }, h("slot", { name: 'popover-content' })),
this.trigger !== 'hover' && (h("div", { "aria-hidden": 'true', class: 'overlay', ref: (overlay) => (this.overlay = overlay), onClick: () => this.hide() })),
];
}
get host() { return getElement(this); }
};
Popover.style = popoverCss;
export { Avatar as fw_avatar, Checkbox as fw_checkbox, Input as fw_input, Popover as fw_popover };