@kelvininc/ui-components
Version:
Kelvin UI Components
468 lines (467 loc) • 18.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 { hasAnyVisibleElement, isElementVisible } from "./select.helper";
import { EActionButtonType, 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;
/** @inheritdoc */
this.hasLabelContent = false;
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 hasAnyVisibleElement(this.el, '[slot="select-header-label"]');
}
render() {
const hasLabels = this.selectionAll || this.selectionClearable || this.hasActionsSlot || this.hasLabelSlot || this.hasLabelContent;
const hasHeader = this.searchable || hasLabels;
return (h(Host, { key: '8750ca9ecd54a914cae8fd78a85cf6e6ce041b05', style: this.customStyle }, h("div", { key: 'c6771a8fe1ee7ddc3100cb590de062ab52321140', class: "select-container", part: "select" }, hasHeader && (h("div", { key: '71a7fbf6b5efc8d642068d66f1b9357c45f5fbc8', class: "select-header-container" }, this.searchable && (h("kv-search", { key: '16185bd4cf0e5e7f2ebea7c824d14c17f6d5b50b', ref: element => (this.searchRef = element), size: EComponentSize.Small, value: this.searchValue, placeholder: this.searchPlaceholder, onTextChange: this.onSearchChange })), hasLabels && (h("div", { key: '4291071b81ad65a3f0d1f02b888dc4b80f08fb36', class: "search-footer" }, h("div", { key: '220f55cf1201acd9b047e6bba089e29ab7e54b87', class: "footer-actions" }, this.selectionAll && (h("kv-action-button-text", { key: '12bba1244c3bb969d6841a04450a06aca7d88682', type: EActionButtonType.Text, text: this.selectAllLabel, onClickButton: this.onSelectAll, disabled: !this.selectionAllEnabled })), this.selectionClearable && (h(Fragment, { key: '5e4bc2dd329162313e8331d554c193c034cced58' }, this.selectionAll && h("div", { key: 'f979ad7eecd86ed414e537096c5afc8d6cf744d2', class: "divider" }), h("kv-action-button-text", { key: 'f73f046a4424cb406ed42bf93a0fe9eb459b4397', type: EActionButtonType.Text, text: this.clearSelectionLabel, onClickButton: this.onClearSelection, disabled: !this.selectionClearEnabled }), this.hasActionsSlot && h("div", { key: '553dac95a9e9a8685cf92435adb92b7bf53fc416', class: "divider" }))), h("slot", { key: '8d4fc04785f6ba638599959f6beca14ca71d22e0', name: "select-header-actions" })), h("slot", { key: '3e49d038ca355228e2d12ebca1bce2dcd018cfde', name: "select-header-label" }))))), h("div", { key: '37442fe4ed036f51edae6687b57cbf44b8301c6b', class: "select-options-container" }, h("slot", { key: '3632ff4f6ce190dce7e7dd8dd4fc9885c3fb7f3c' })), h("div", { key: '08e88e1fe09df288de705d54d752be6f4edd9d3f' }, h("slot", { key: '885aa3b0e22c303a46a4d0dcbf66c7f7a78a53a9', 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
},
"hasLabelContent": {
"type": "boolean",
"attribute": "has-label-content",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the header label section is forced to be visible"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
}
};
}
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"; }
}