@kelvininc/ui-components
Version:
Kelvin UI Components
338 lines (337 loc) • 14.5 kB
JavaScript
import { Host, h } from "@stencil/core";
import { DEFAULT_INPUT_CONFIG } from "./dropdown.config";
import { EIconName } from "../icon/icon.types";
import { merge } from "lodash-es";
import { DEFAULT_DROPDOWN_Z_INDEX } from "../../globals/config";
import { getDefaultDropdownPositionConfig } from "./dropdown.helper";
export class KvDropdown {
constructor() {
/** @inheritdoc */
this.inputConfig = {};
/** @inheritdoc */
this.isOpen = false;
/** @inheritdoc */
this.actionElement = null;
/** @inheritdoc */
this.listElement = null;
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.clickOutsideClose = true;
/** @inheritdoc */
this.zIndex = DEFAULT_DROPDOWN_Z_INDEX;
this.getInputConfig = () => {
return merge({}, DEFAULT_INPUT_CONFIG, { inputDisabled: this.disabled }, this.inputConfig);
};
}
/** Toggles the dropdown open state */
async onToggleOpenState() {
if (!this.disabled) {
this.openStateChange.emit(!this.isOpen);
}
}
componentDidRender() {
var _a;
this._actionElement = (_a = this.actionElement) !== null && _a !== void 0 ? _a : this.el.querySelector('#dropdown-input').shadowRoot.querySelector('#dropdown-input');
}
render() {
var _a;
const inputConfig = this.getInputConfig();
return (h(Host, { key: 'c083c83fd9a6aa37463ae894629f02f12089bc2c' }, h("div", { key: 'a50eeb51574c39dfecc914fcf76340a08ebd3e8a', class: "dropdown-container" }, h("kv-dropdown-base", { key: 'bbc825dc210378fa0a13eedc8b80ce0cd95b288c', isOpen: this.isOpen, options: (_a = this.options) !== null && _a !== void 0 ? _a : getDefaultDropdownPositionConfig(inputConfig), actionElement: this._actionElement, listElement: this.listElement, clickOutsideClose: this.clickOutsideClose, zIndex: this.zIndex }, h("slot", { key: '6f05055ab2960b1271b6ce9d5167594cd4fe392f', name: "dropdown-action", slot: "action" }, h("div", { key: '86f8694876e234cdd8115e6b584efb56abb971af' }, h("kv-text-field", Object.assign({ key: 'cf2052003f2a0596c97527176680b582bf89ad2b' }, inputConfig, { id: "dropdown-input", forcedFocus: this.isOpen, onFieldClick: this.onToggleOpenState.bind(this), inputReadonly: true, actionIcon: this.isOpen ? EIconName.ArrowDropUp : EIconName.ArrowDropDown }), h("slot", { key: '2b5ec20bfb917fd4fc0df8a2dfb79ba5b4cb1d63', name: "right-slot", slot: "right-slot" }), h("slot", { key: '73e3903105aa3c9198c491d1e52ad0937365b522', name: "left-slot", slot: "left-slot" })))), h("div", { key: 'e276011c29cf3015a2a98f821733660a18e7b949', slot: "list" }, h("div", { key: '5607a15a0816b8ae5aa6780f7edbf339dfa90e57', id: "select", class: "select" }, h("slot", { key: '468b00342404e43053392ae287c225a9eb809e66' })))))));
}
static get is() { return "kv-dropdown"; }
static get originalStyleUrls() {
return {
"$": ["dropdown.scss"]
};
}
static get styleUrls() {
return {
"$": ["dropdown.css"]
};
}
static get properties() {
return {
"inputConfig": {
"type": "unknown",
"attribute": "input-config",
"mutable": false,
"complexType": {
"original": "Partial<ITextField>",
"resolved": "{ type?: EInputFieldType; label?: string; icon?: EIconName; actionIcon?: EIconName; inputName?: string; examples?: string[]; placeholder?: string; maxLength?: number; minLength?: number; max?: string | number; min?: string | number; step?: string | number; size?: EComponentSize; inputDisabled?: boolean; inputRequired?: boolean; loading?: boolean; state?: EValidationState; helpText?: string | string[]; value?: string | number; valuePrefix?: string; badge?: string; inputReadonly?: boolean; forcedFocus?: boolean; tooltipConfig?: Partial<ITooltip>; useInputMask?: boolean; inputMaskRegex?: string; fitContent?: boolean; customStyle?: { [key: string]: string; }; isDirty?: boolean; hideBadge?: boolean; }",
"references": {
"Partial": {
"location": "global",
"id": "global::Partial"
},
"ITextField": {
"location": "import",
"path": "../text-field/text-field.types",
"id": "src/components/text-field/text-field.types.ts::ITextField"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The text field options"
},
"getter": false,
"setter": false,
"defaultValue": "{}"
},
"isOpen": {
"type": "boolean",
"attribute": "is-open",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the list is opened"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"options": {
"type": "unknown",
"attribute": "options",
"mutable": false,
"complexType": {
"original": "Partial<ComputePositionConfig>",
"resolved": "{ strategy?: Strategy; placement?: Placement; middleware?: (false | { name: string; options?: any; fn: (state: { x: number; y: number; initialPlacement: Placement; strategy: Strategy; platform: Platform; placement: Placement; middlewareData: MiddlewareData; rects: ElementRects; elements: Elements; }) => Promisable<MiddlewareReturn>; })[]; platform?: Platform; }",
"references": {
"Partial": {
"location": "global",
"id": "global::Partial"
},
"ComputePositionConfig": {
"location": "import",
"path": "@floating-ui/dom",
"id": "../../node_modules/.pnpm/@floating-ui+dom@1.6.11/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::ComputePositionConfig"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The dropdown position config options"
},
"getter": false,
"setter": false
},
"actionElement": {
"type": "unknown",
"attribute": "action-element",
"mutable": false,
"complexType": {
"original": "HTMLElement | null",
"resolved": "HTMLElement",
"references": {
"HTMLElement": {
"location": "global",
"id": "global::HTMLElement"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) A reference to the dropdown action element"
},
"getter": false,
"setter": false,
"defaultValue": "null"
},
"listElement": {
"type": "unknown",
"attribute": "list-element",
"mutable": false,
"complexType": {
"original": "HTMLElement | null",
"resolved": "HTMLElement",
"references": {
"HTMLElement": {
"location": "global",
"id": "global::HTMLElement"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) A reference to the dropdown list element"
},
"getter": false,
"setter": false,
"defaultValue": "null"
},
"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` clicking on the action will not open the dropdown list. Default: false"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"clickOutsideClose": {
"type": "boolean",
"attribute": "click-outside-close",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `false` clicking outside the dropdown will not trigger state change. Default: true"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "true"
},
"zIndex": {
"type": "number",
"attribute": "z-index",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) the dropdown list z-index (default: 9004)"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "DEFAULT_DROPDOWN_Z_INDEX"
}
};
}
static get states() {
return {
"_actionElement": {}
};
}
static get events() {
return [{
"method": "openStateChange",
"name": "openStateChange",
"bubbles": false,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the dropdown opens state changes"
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}, {
"method": "clickOutside",
"name": "clickOutside",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when there's a click outside the dropdown's bondaries"
},
"complexType": {
"original": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}];
}
static get methods() {
return {
"onToggleOpenState": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Toggles the dropdown open state",
"tags": []
}
}
};
}
static get elementRef() { return "el"; }
}