@freshworks/crayons
Version:
Crayons Web Components library
161 lines (157 loc) • 7.87 kB
JavaScript
import { attachShadow, createEvent, h, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
import { d as defineCustomElement$5 } from './avatar.js';
import { d as defineCustomElement$4 } from './checkbox.js';
import { d as defineCustomElement$1, a as defineCustomElement$3 } from './icon.js';
import { d as defineCustomElement$2 } from './spinner.js';
const selectOptionCss = ":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}.select-center{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.select-option{cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:#12344d;font-size:14px;border-radius:4px;list-style:none;line-height:1.45;word-break:break-word;word-wrap:break-word;position:relative;margin-bottom:4px;padding-right:8px}.select-option.single-line{padding-top:6px;padding-bottom:6px}.select-option.multi-line{padding-top:8px;padding-bottom:8px}.select-option.standard{padding-left:0px}.select-option.icon{padding-left:10px}.select-option.avatar{padding-left:4px}.select-option.selected{font-weight:600;background-color:#e5f2fd}.select-option.selected:hover,.select-option.selected:focus{background-color:#e5f2fd}.select-option:hover{background-color:#ebeff3}.select-option:focus{background-color:#ebeff3;outline:#2c5cc5 auto 1px}.select-option.disabled{color:#92a2b1;position:relative;cursor:not-allowed;background-color:#f5f7f9}.select-option .description{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.select-option .description-text{font-weight:600}.select-option .description-subText{font-weight:400;font-size:12px;color:#475867}.select-option .description.icon-margin{margin-left:18px}.select-option .description.standard-margin{margin-left:12px}.select-option .selected-icon{min-width:24px;min-height:24px;margin-left:auto;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.select-option fw-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}";
let SelectOption = class extends HTMLElement {
constructor() {
super();
this.__registerHost();
attachShadow(this);
this.fwSelected = createEvent(this, "fwSelected", 7);
this.fwFocus = createEvent(this, "fwFocus", 7);
this.fwBlur = createEvent(this, "fwBlur", 7);
/**
* Sets the state of the option to selected. The selected option is highlighted and a check mark is displayed next to it. If the attribute’s value is undefined, the value is set to false.
*/
this.selected = false;
/**
* Sets the state of the option to disabled. The selected option is disabled and greyed out. If the attribute’s value is undefined, the value is set to false.
*/
this.disabled = false;
/**
* States that the option is an HTML value. If the attribute's value is undefined, the value is set to true.
*/
this.html = false;
/**
* Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row.
* The props for the icon or avatar are passed as an object via the graphicsProps.
*/
this.variant = 'standard';
/**
* Place a checkbox.
*/
this.checkbox = false;
/**
* Whether clicking on the already selected option disables it.
*/
this.allowDeselect = true;
}
async setFocus() {
this.rowContainer.focus();
}
onKeyDown(ev) {
switch (ev.key) {
case 'Enter':
this.onOptionSelected();
break;
}
}
onOptionSelected() {
if (this.disabled) {
return;
}
if (this.selected && !this.allowDeselect) {
return;
}
this.selected = !this.selected;
const { value, selected } = this;
this.fwSelected.emit({ value, selected });
}
renderInnerHtml() {
const description = this.createDescription();
const checkbox = this.checkbox ? this.createCheckbox() : '';
const selectedIconContainer = (h("span", { class: 'selected-icon' }, this.selected && (h("fw-icon", { name: 'check', size: 12, color: '#2C5CC5', library: 'system' }))));
switch (this.variant) {
case 'standard':
return (h(Fragment, null, checkbox, description, selectedIconContainer));
case 'icon':
return (h(Fragment, null, checkbox, this.createIcon(), description, selectedIconContainer));
case 'avatar':
return (h(Fragment, null, checkbox, this.createAvatar(), description, selectedIconContainer));
}
}
createDescription() {
return this.subText ? (h("div", { class: 'description ' +
(this.variant === 'icon' ? 'icon-margin ' : 'standard-margin ') }, h("span", { class: 'description-text' }, this.text), h("span", { class: 'description-subText' }, this.subText))) : (h("span", { class: 'description ' +
(this.variant === 'icon' ? 'icon-margin ' : 'standard-margin ') }, this.text));
}
createIcon() {
return h("fw-icon", Object.assign({}, this.graphicsProps));
}
createCheckbox() {
return h("fw-checkbox", { checked: this.selected });
}
createAvatar() {
return h("fw-avatar", Object.assign({ size: 'small' }, this.graphicsProps));
}
render() {
return (h("div", { role: 'option', tabindex: '-1', "aria-selected": this.selected, ref: (el) => (this.rowContainer = el), class: 'select-option ' +
(this.selected && !this.checkbox ? 'selected ' : '') +
(this.disabled ? 'disabled ' : '') +
(this.html
? ''
: (this.subText ? 'multi-line ' : 'single-line ') +
(this.variant + ' ' + 'select-center')), onMouseDown: () => this.onOptionSelected(), onFocus: () => this.fwFocus.emit({ id: this.host.id }), onBlur: (e) => this.fwBlur.emit(e) }, this.html ? '' : this.text ? this.renderInnerHtml() : h("slot", null)));
}
componentDidLoad() {
if (this.html) {
this.rowContainer.innerHTML = this.htmlContent;
}
}
get host() { return this; }
static get style() { return selectOptionCss; }
};
SelectOption = /*@__PURE__*/ proxyCustomElement(SelectOption, [1, "fw-select-option", {
"value": [8],
"selected": [1540],
"disabled": [1540],
"html": [1540],
"optionText": [513, "option-text"],
"htmlContent": [1, "html-content"],
"variant": [1],
"text": [1],
"subText": [513, "sub-text"],
"groupName": [1, "group-name"],
"graphicsProps": [8, "graphics-props"],
"checkbox": [4],
"allowDeselect": [4, "allow-deselect"],
"setFocus": [64]
}, [[0, "keydown", "onKeyDown"]]]);
function defineCustomElement() {
const components = ["fw-select-option", "fw-avatar", "fw-checkbox", "fw-icon", "fw-spinner", "fw-toast-message"];
components.forEach(tagName => { switch (tagName) {
case "fw-select-option":
if (!customElements.get(tagName)) {
customElements.define(tagName, SelectOption);
}
break;
case "fw-avatar":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "fw-checkbox":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
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 { SelectOption as S, defineCustomElement as d };