@kelvininc/ui-components
Version:
Kelvin UI Components
489 lines (488 loc) • 19.3 kB
JavaScript
import { Host, h } from "@stencil/core";
import { EToggleState } from "./select-option.types";
import { LEVEL_OFFSET_PX } from "./select-option.config";
import { EActionButtonType } 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
*/
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 = '';
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: 'cba1456e44914ad80050fa09c8d09afebaf8927f', class: getClassMap(this.customClass), style: Object.assign({}, this.customStyle) }, h("div", { key: 'c68581a0470c01a78ae59d8c8700a865005e219a', part: "select-option-content" }, h("div", { key: '5fcfbc4df831b06645bf2f5922ee809976378f5e', 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
}, part: "option-container", onClick: this.onItemClick, style: { '--level-padding-offset': `${LEVEL_OFFSET_PX * this.level}px` } }, this.selectable && this.togglable && (h("kv-checkbox", { key: 'ba0e100e0866acfb1c7d2e8a49221683e6a8949b', checked: this.state === EToggleState.Selected, indeterminate: this.state === EToggleState.Indeterminate, part: "checkbox" })), this.icon && (h("div", { key: 'bbab4b96408db858f124e51fb7d455a4a3916ae7', class: "icon-container", part: "icon" }, h("kv-icon", { key: '016bf6c27df6154154303dbcf4d60888507389ac', name: this.icon }))), h("div", { key: '70248911478a2d0f40eaaae67c89038edcb3d0cc', class: "text-container" }, h("div", { key: '5fab13f6b6688c7bdb0b8b904d6f92ebd0db2608', class: "left-content" }, this.isDirty && h("kv-dirty-dot", { key: '9c34c9a424e668b9c881c6ab61cc1ea5d0d97c1f' }), h("div", { key: 'a03d011772861e44420e48627ecca15cbae8f9cd', class: "item-label", part: "label" }, this.label)), h("div", { key: '2ccb6de8db8b838fd62b5cd6ab4d172864c38438', class: "right-content" }, this.description && h("div", { key: 'dbb871815a3babc4247048fbed2e57b4ac85380a', class: "item-description" }, this.description), this.action && (h("div", { key: 'fb3e92d012ca5aed904be377160b5f9c4c2f1e6b', class: "action-container" }, h("kv-action-button-icon", { key: 'fcd7396ac108d335762251e11a95535f437fb79f', type: EActionButtonType.Ghost, icon: this.action.icon, onClickButton: this.action.onClick, active: this.action.active, onClick: event => event.stopPropagation() })))))), h("slot", { key: '7e597c43ae6a448c59c42b9f78dbdd903ed5f235' }))));
}
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
},
"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
},
"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.29.2/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
}
};
}
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"
}];
}
}