@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
330 lines (329 loc) • 9.98 kB
JavaScript
/*!
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
* v1.5.0-next.4
*/
import { h, Host } from "@stencil/core";
import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
import { getElementProp, getSlotted } from "../../utils/dom";
import { guid } from "../../utils/guid";
import { connectInteractive, disconnectInteractive, updateHostInteraction } from "../../utils/interactive";
import { getAncestors, getDepth } from "../combobox/utils";
import { CSS } from "./resources";
/**
* @slot - A slot for adding nested `calcite-combobox-item`s.
*/
export class ComboboxItem {
constructor() {
/** Specifies the scale of the combobox-item controlled by parent, defaults to m */
this.scale = "m";
this.itemClickHandler = (event) => {
event.preventDefault();
this.toggleSelected();
};
this.disabled = false;
this.selected = false;
this.active = false;
this.ancestors = undefined;
this.guid = guid();
this.icon = undefined;
this.iconFlipRtl = false;
this.textLabel = undefined;
this.value = undefined;
this.filterDisabled = undefined;
}
selectedWatchHandler() {
this.calciteComboboxItemChange.emit();
}
// --------------------------------------------------------------------------
//
// Lifecycle
//
// --------------------------------------------------------------------------
connectedCallback() {
this.ancestors = getAncestors(this.el);
this.scale = getElementProp(this.el, "scale", this.scale);
connectConditionalSlotComponent(this);
connectInteractive(this);
}
disconnectedCallback() {
disconnectConditionalSlotComponent(this);
disconnectInteractive(this);
}
componentDidRender() {
updateHostInteraction(this);
}
// --------------------------------------------------------------------------
//
// Private Methods
//
// --------------------------------------------------------------------------
toggleSelected() {
if (this.disabled) {
return;
}
this.selected = !this.selected;
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
renderIcon(iconPath) {
return this.icon ? (h("calcite-icon", { class: {
[CSS.custom]: !!this.icon,
[CSS.iconActive]: this.icon && this.selected,
[CSS.iconIndent]: true
}, flipRtl: this.iconFlipRtl, icon: this.icon || iconPath, key: "icon", scale: this.scale === "l" ? "m" : "s" })) : null;
}
renderSelectIndicator(showDot, iconPath) {
return showDot ? (h("span", { class: {
[CSS.icon]: true,
[CSS.dot]: true,
[CSS.iconIndent]: true
} })) : (h("calcite-icon", { class: {
[CSS.icon]: true,
[CSS.iconActive]: this.selected,
[CSS.iconIndent]: true
}, flipRtl: this.iconFlipRtl, icon: iconPath, key: "indicator", scale: this.scale === "l" ? "m" : "s" }));
}
renderChildren() {
if (getSlotted(this.el)) {
return (h("ul", { key: "default-slot-container" }, h("slot", null)));
}
return null;
}
render() {
const isSingleSelect = getElementProp(this.el, "selection-mode", "multiple") === "single";
const showDot = isSingleSelect && !this.disabled;
const defaultIcon = isSingleSelect ? "dot" : "check";
const iconPath = this.disabled ? "circle-disallowed" : defaultIcon;
const classes = {
[CSS.label]: true,
[CSS.selected]: this.selected,
[CSS.active]: this.active,
[CSS.single]: isSingleSelect
};
const depth = getDepth(this.el);
return (h(Host, { "aria-hidden": "true" }, h("div", { class: `container scale--${this.scale}`, style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, h("li", { class: classes, id: this.guid, onClick: this.itemClickHandler }, this.renderSelectIndicator(showDot, iconPath), this.renderIcon(iconPath), h("span", { class: "title" }, this.textLabel)), this.renderChildren())));
}
static get is() { return "calcite-combobox-item"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["combobox-item.scss"]
};
}
static get styleUrls() {
return {
"$": ["combobox-item.css"]
};
}
static get properties() {
return {
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
},
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
},
"selected": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, the component is selected."
},
"attribute": "selected",
"reflect": true,
"defaultValue": "false"
},
"active": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, the component is active."
},
"attribute": "active",
"reflect": true,
"defaultValue": "false"
},
"ancestors": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "ComboboxChildElement[]",
"resolved": "ComboboxChildElement[]",
"references": {
"ComboboxChildElement": {
"location": "import",
"path": "../combobox/interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the parent and grandparent items, which are set on `calcite-combobox`."
}
},
"guid": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The `id` attribute of the component. When omitted, a globally unique identifier is used."
},
"attribute": "guid",
"reflect": true,
"defaultValue": "guid()"
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies an icon to display."
},
"attribute": "icon",
"reflect": true
},
"iconFlipRtl": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
},
"attribute": "icon-flip-rtl",
"reflect": true,
"defaultValue": "false"
},
"textLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "The component's text."
},
"attribute": "text-label",
"reflect": true
},
"value": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "The component's value."
},
"attribute": "value",
"reflect": false
},
"filterDisabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, omits the component from the `calcite-combobox` filtered search results."
},
"attribute": "filter-disabled",
"reflect": true
}
};
}
static get events() {
return [{
"method": "calciteComboboxItemChange",
"name": "calciteComboboxItemChange",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Emits whenever the component is selected or unselected."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "selected",
"methodName": "selectedWatchHandler"
}];
}
}