@kelvininc/ui-components
Version:
Kelvin UI Components
592 lines (591 loc) • 24 kB
JavaScript
import { Host, h } from "@stencil/core";
import { EToggleState } from "./select-option.types";
import { LEVEL_OFFSET_PX } from "./select-option.config";
import { EActionButtonType, EComponentSize } from "../../types";
import { getClassMap } from "../../utils/css-class.helper";
/**
* @part select-option-content - The option's content container
* @part option-container - The option's container
* @part checkbox - The option's checkbox
* @part label - The option's label
* @part icon - The option's icon
* @part right-icon - The option's right icon
*/
export class KvSelectOption {
constructor() {
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.selected = false;
/** @inheritdoc */
this.highlighted = false;
/** @inheritdoc */
this.togglable = false;
/** @inheritdoc */
this.selectable = true;
/** @inheritdoc */
this.heading = false;
/** @inheritdoc */
this.level = 0;
/** @inheritdoc */
this.isDirty = false;
/** @inheritdoc */
this.customClass = '';
/** @inheritdoc */
this.customAttributes = {};
this.onItemClick = () => {
if (this.disabled) {
return;
}
this.itemSelected.emit(this.value);
};
}
highlightedChangeHandler() {
if (this.highlighted) {
this.el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
}
render() {
return (h(Host, { key: 'f301f208c28ca684f54a468ccab064026c060056', class: getClassMap(this.customClass), style: Object.assign({}, this.customStyle) }, h("div", { key: '8a14113e32a83ea7f10fe8b7946acb3c38ce2ebd', part: "select-option-content" }, h("div", Object.assign({ key: '50b7ac8fc3cc668b86c4b9bc1e7da31b61916586', class: {
'select-option': true,
'select-option--selected': this.selected,
'select-option--highlighted': this.highlighted,
'select-option--disabled': this.disabled,
'select-option--selectable': this.selectable,
'select-option--heading': this.heading,
'select-option--with-checkbox': this.selectable && this.togglable
}, part: "option-container", onClick: this.onItemClick }, this.customAttributes, { style: { '--level-padding-offset': `${LEVEL_OFFSET_PX * this.level}px` } }), this.selectable && this.togglable && (h("kv-checkbox", { key: 'dbd7ef9c44189c8fa60845340c3bf1893facd72c', size: EComponentSize.Small, disabled: this.disabled, checked: this.state === EToggleState.Selected, indeterminate: this.state === EToggleState.Indeterminate, part: "checkbox" })), this.icon && (h("div", { key: '33d3af17c15c479d47c8e1282beab060a172bb46', class: "icon-container", part: "icon" }, h("kv-tooltip", { key: '9be930787341ee603dcebfabfa125027eb43ead6', text: this.iconTooltipText }, h("kv-icon", { key: '8e4fbe433fcf585ade4d1c1b4c1dea38fdae8771', name: this.icon })))), h("div", { key: '6f375a32450ca292e4d29afa3c5995eaedc5d4f9', class: "text-container" }, h("div", { key: '0eba6f89978925c2777d29fdcb43bca760ba6a6f', class: "left-content" }, this.isDirty && h("kv-dirty-dot", { key: 'f6120de1506fac50af6b54d661ee94bcb3a575ce' }), h("kv-tooltip", { key: '1925ad56d07372dc5c5ad28fb2ce283d0991b4a2', truncate: true, text: this.label }, h("div", { key: '5e5b6a228a632dd1c6bfd79eb0498b4b5a0f9786', class: "item-label", part: "label" }, this.label))), (this.description || this.rightIcon || this.action) && (h("div", { key: '75cd691e13673199385755fff537e4bc7fe857ce', class: "right-content" }, (this.description || this.rightIcon) && (h("div", { key: '7c33d00b80ff83d8d746e1f51ec313df73a3289e', class: "group" }, this.rightIcon && (h("kv-tooltip", { key: 'b11b7a3596016f1d84ec8786dc786a0956ebe8d4', text: this.rightIconTooltipText }, h("div", { key: '9e50c9eeaf1e0ca4ec65a41f540aec3f7e3fb67a', class: "item-right-icon", part: "right-icon" }, h("kv-icon", { key: 'd82fb9709ce67f32bc39d6255772cd932dd94db8', name: this.rightIcon })))), this.description && h("div", { key: '88f15d47b78cbb4a099b09aee001e6261d449d5e', class: "item-description" }, this.description))), this.action && (h("div", { key: 'b69edb736948b420775a3b0e9699375980682f35', class: "group" }, h("kv-action-button-icon", { key: '750284db30c7610cc4efa127dab7a0b2d929a48b', type: EActionButtonType.Tertiary, icon: this.action.icon, onClickButton: this.action.onClick, active: this.action.active, onClick: event => event.stopPropagation() }))))))), h("slot", { key: 'cc246c9d64e365e02f6b2c86e724801ba4abcadc' }))));
}
static get is() { return "kv-select-option"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["select-option.scss"]
};
}
static get styleUrls() {
return {
"$": ["select-option.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"attribute": "label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) The text to display on the item"
},
"getter": false,
"setter": false,
"reflect": true
},
"value": {
"type": "string",
"attribute": "value",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) The item value"
},
"getter": false,
"setter": false,
"reflect": true
},
"icon": {
"type": "string",
"attribute": "icon",
"mutable": false,
"complexType": {
"original": "EIconName",
"resolved": "EIconName",
"references": {
"EIconName": {
"location": "import",
"path": "../icon/icon.types",
"id": "src/components/icon/icon.types.ts::EIconName"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Icon of the item displayed on the left"
},
"getter": false,
"setter": false,
"reflect": true
},
"iconTooltipText": {
"type": "string",
"attribute": "icon-tooltip-text",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Tooltip text to be displayed on icon hover"
},
"getter": false,
"setter": false,
"reflect": true
},
"rightIconTooltipText": {
"type": "string",
"attribute": "right-icon-tooltip-text",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Tooltip text to be displayed on right icon hover"
},
"getter": false,
"setter": false,
"reflect": true
},
"description": {
"type": "string",
"attribute": "description",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Description of the item displayed on the right"
},
"getter": false,
"setter": false,
"reflect": true
},
"rightIcon": {
"type": "string",
"attribute": "right-icon",
"mutable": false,
"complexType": {
"original": "EIconName",
"resolved": "EIconName",
"references": {
"EIconName": {
"location": "import",
"path": "../icon/icon.types",
"id": "src/components/icon/icon.types.ts::EIconName"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Icon of the item displayed on the right"
},
"getter": false,
"setter": false,
"reflect": true
},
"disabled": {
"type": "boolean",
"attribute": "disabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the item is disabled"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"selected": {
"type": "boolean",
"attribute": "selected",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the item is selected"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"highlighted": {
"type": "boolean",
"attribute": "highlighted",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the item is highlighted"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"togglable": {
"type": "boolean",
"attribute": "togglable",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the item is togglable"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"selectable": {
"type": "boolean",
"attribute": "selectable",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `false` the item is only for presenting and cannot be selected."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "true"
},
"heading": {
"type": "boolean",
"attribute": "heading",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the item is presented as a list heading. Default: `false`"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"level": {
"type": "number",
"attribute": "level",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The level depth at which the option is rendered"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "0"
},
"state": {
"type": "string",
"attribute": "state",
"mutable": false,
"complexType": {
"original": "EToggleState",
"resolved": "EToggleState.Indeterminate | EToggleState.None | EToggleState.Selected",
"references": {
"EToggleState": {
"location": "import",
"path": "./select-option.types",
"id": "src/components/select-option/select-option.types.ts::EToggleState"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The toggle button state"
},
"getter": false,
"setter": false,
"reflect": true
},
"isDirty": {
"type": "boolean",
"attribute": "is-dirty",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If true, a dirty dot indicator will be added to left side of the option's text."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"customClass": {
"type": "string",
"attribute": "custom-class",
"mutable": false,
"complexType": {
"original": "CustomCssClass",
"resolved": "CssClassMap | string | string[]",
"references": {
"CustomCssClass": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::CustomCssClass"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Custom class to apply for custom styling."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "''"
},
"customStyle": {
"type": "unknown",
"attribute": "custom-style",
"mutable": false,
"complexType": {
"original": "HostAttributes['style']",
"resolved": "{ [key: string]: string; }",
"references": {
"HostAttributes": {
"location": "import",
"path": "@stencil/core/internal",
"id": "../../node_modules/.pnpm/@stencil+core@4.36.3/node_modules/@stencil/core/internal/index.d.ts::HostAttributes"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Additional style to apply for custom CSS."
},
"getter": false,
"setter": false
},
"action": {
"type": "unknown",
"attribute": "action",
"mutable": false,
"complexType": {
"original": "ISelectOptionAction",
"resolved": "ISelectOptionAction",
"references": {
"ISelectOptionAction": {
"location": "import",
"path": "./select-option.types",
"id": "src/components/select-option/select-option.types.ts::ISelectOptionAction"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Action to display on the right side of the item"
},
"getter": false,
"setter": false
},
"customAttributes": {
"type": "unknown",
"attribute": "custom-attributes",
"mutable": false,
"complexType": {
"original": "Record<string, string>",
"resolved": "{ [x: string]: string; }",
"references": {
"Record": {
"location": "global",
"id": "global::Record"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Custom attributes to be applied to the option container element"
},
"getter": false,
"setter": false,
"defaultValue": "{}"
}
};
}
static get events() {
return [{
"method": "itemSelected",
"name": "itemSelected",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the user clicks on the item"
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "highlighted",
"methodName": "highlightedChangeHandler"
}];
}
}