@kelvininc/ui-components
Version:
Kelvin UI Components
449 lines (448 loc) • 17.3 kB
JavaScript
import { Host, h, Fragment } from "@stencil/core";
import { isNil, omitBy } from "lodash-es";
import { CLEAR_SELECTION_LABEL, SELECT_ALL_LABEL } from "./select.config";
import { isElementVisible } from "./select.helper";
import { EComponentSize } from "../../types";
/**
* @part select - The select container.
*/
export class KvSelect {
constructor() {
/** @inheritdoc */
this.searchable = false;
/** @inheritdoc */
this.selectionClearable = false;
/** @inheritdoc */
this.clearSelectionLabel = CLEAR_SELECTION_LABEL;
/** @inheritdoc */
this.selectionAll = false;
/** @inheritdoc */
this.selectAllLabel = SELECT_ALL_LABEL;
this.onSearchChange = (event) => {
event.stopPropagation();
this.searchChange.emit(event.detail);
};
this.onClearSelection = () => {
this.clearSelection.emit();
};
this.onSelectAll = () => {
this.selectAll.emit();
};
}
/** Focuses the search text field */
async focusSearch() {
var _a;
(_a = this.searchRef) === null || _a === void 0 ? void 0 : _a.focusInput();
}
get customStyle() {
return omitBy({
'--select-max-height': this.maxHeight,
'--select-min-height': this.minHeight,
'--select-max-width': this.maxWidth,
'--select-min-width': this.minWidth
}, isNil);
}
get hasActionsSlot() {
return isElementVisible(this.el, '[slot="select-header-actions"]');
}
get hasLabelSlot() {
return isElementVisible(this.el, '[slot="select-header-label"]');
}
render() {
const hasLabels = this.selectionAll || this.selectionClearable || this.hasActionsSlot || this.hasLabelSlot;
const hasHeader = this.searchable || hasLabels;
return (h(Host, { key: '10b617e5029cfb5e8011c8571a9fd729009905d2', style: this.customStyle }, h("div", { key: 'f9dd9673d31faa686ab711a0dc0a31b8c919ae7a', class: "select-container", part: "select" }, hasHeader && (h("div", { key: '440ac25a7ec08a5a96e98746c405359c5bf4613f', class: "select-header-container" }, this.searchable && (h("kv-search", { key: '18d2e4e748ba5d12f657d03e655034f456d4a3a8', ref: element => (this.searchRef = element), size: EComponentSize.Small, value: this.searchValue, placeholder: this.searchPlaceholder, onTextChange: this.onSearchChange })), hasLabels && (h("div", { key: 'd12adbbb46e86104463a3ef17e3845292caa31db', class: "search-footer" }, h("div", { key: '116af362d27d9309e93d823d6cd83d9012cc9e4c', class: "footer-actions" }, this.selectionAll && (h("div", { key: '5542e17308d8262c4ca474cd4754bee7d76a06bc', class: {
'action': true,
'action--disabled': !this.selectionAllEnabled
}, onClick: this.onSelectAll }, this.selectAllLabel)), this.selectionClearable && (h(Fragment, { key: '93919f533503e8ce9083fefacf4f03e219599dc9' }, this.selectionAll && h("div", { key: '43fe0acaee60048cffb8d3c53ed98f78f73154a8', class: "divider" }), h("div", { key: 'fb57dd7d02e729bf7223ca9c952486c37771c167', class: {
'action': true,
'action--disabled': !this.selectionClearEnabled
}, onClick: this.onClearSelection }, this.clearSelectionLabel), this.hasActionsSlot && h("div", { key: 'b55d7ba874248959de2504f97b3e1f1557d76655', class: "divider" }))), h("slot", { key: 'ac10224687f331395f10ed0969b613fe90a4af67', name: "select-header-actions" })), h("slot", { key: 'b27e47ce27ff034ce266e2c42855cc384b55dd24', name: "select-header-label" }))))), h("div", { key: 'efe2c477a174106fcc5260d4b1bf8389f6659a69', class: "select-options-container" }, h("slot", { key: '89ca7b3abad94d1639ce78271b151b63d56dfb84' })), h("slot", { key: 'f2705fe488d52cc8fe923141bbbb0203a87b0fdc', name: "select-footer" }))));
}
static get is() { return "kv-select"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["select.scss"]
};
}
static get styleUrls() {
return {
"$": ["select.css"]
};
}
static get properties() {
return {
"searchable": {
"type": "boolean",
"attribute": "searchable",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the list has a search text field"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"searchValue": {
"type": "string",
"attribute": "search-value",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The search value on the list"
},
"getter": false,
"setter": false,
"reflect": true
},
"searchPlaceholder": {
"type": "string",
"attribute": "search-placeholder",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The list search text field placeholder"
},
"getter": false,
"setter": false,
"reflect": true
},
"selectionClearable": {
"type": "boolean",
"attribute": "selection-clearable",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the list has an action to unselect all items"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"selectionClearEnabled": {
"type": "boolean",
"attribute": "selection-clear-enabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the list can be cleared"
},
"getter": false,
"setter": false,
"reflect": true
},
"clearSelectionLabel": {
"type": "string",
"attribute": "clear-selection-label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The clear search action text"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "CLEAR_SELECTION_LABEL"
},
"selectionAll": {
"type": "boolean",
"attribute": "selection-all",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the list has an action to select all items"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"selectionAllEnabled": {
"type": "boolean",
"attribute": "selection-all-enabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the selection action is enabled"
},
"getter": false,
"setter": false,
"reflect": true
},
"selectAllLabel": {
"type": "string",
"attribute": "select-all-label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The selection all action text"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "SELECT_ALL_LABEL"
},
"minHeight": {
"type": "string",
"attribute": "min-height",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The dropdown's min-height"
},
"getter": false,
"setter": false,
"reflect": true
},
"maxHeight": {
"type": "string",
"attribute": "max-height",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The dropdown's max-height"
},
"getter": false,
"setter": false,
"reflect": true
},
"minWidth": {
"type": "string",
"attribute": "min-width",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The dropdown's min-width"
},
"getter": false,
"setter": false,
"reflect": true
},
"maxWidth": {
"type": "string",
"attribute": "max-width",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The dropdown's max-width"
},
"getter": false,
"setter": false,
"reflect": true
}
};
}
static get events() {
return [{
"method": "searchChange",
"name": "searchChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the user interacts with the search text field"
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}, {
"method": "clearSelection",
"name": "clearSelection",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the user clears the selected items"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "selectAll",
"name": "selectAll",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the user clicks on the all items"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get methods() {
return {
"focusSearch": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Focuses the search text field",
"tags": []
}
}
};
}
static get elementRef() { return "el"; }
}