@scania/tegel
Version:
Tegel Design System
273 lines (272 loc) • 10.1 kB
JavaScript
import { Host, h, } from "@stencil/core";
import { convertToString } from "../../../utils/convertToString";
/**
* @slot <default> - <b>Unnamed slot.</b> For the option label text.
*/
export class TdsDropdownOption {
constructor() {
this.parentElement = null;
// @ts-expect-error - label property is used internally for text content tracking
// eslint-disable-next-line no-unused-vars,
this.label = '';
this.componentWillRender = () => {
var _a, _b, _c;
if (!this.host.parentElement) {
return;
}
this.parentElement =
((_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) === 'TDS-DROPDOWN'
? this.host.parentElement
: this.host.getRootNode().host;
if (this.parentElement) {
this.multiselect = (_b = this.parentElement.multiselect) !== null && _b !== void 0 ? _b : false;
this.size = this.parentElement.size || 'lg';
}
this.label = ((_c = this.host.textContent) === null || _c === void 0 ? void 0 : _c.trim()) || '';
};
this.handleSingleSelect = () => {
if (!this.disabled) {
this.selected = true;
this.parentElement.appendValue(this.internalValue);
this.parentElement.close();
this.tdsSelect.emit({
value: this.internalValue,
selected: this.selected,
});
}
};
this.handleMultiselect = (event) => {
if (!this.disabled) {
if (event.detail.checked) {
this.parentElement.appendValue(this.internalValue);
this.selected = true;
this.tdsSelect.emit({
value: this.internalValue,
selected: this.selected,
});
}
else {
this.parentElement.removeValue(this.internalValue);
this.selected = false;
this.tdsSelect.emit({
value: this.internalValue,
selected: this.selected,
});
}
event.stopPropagation();
}
};
this.handleFocus = (event) => {
this.tdsFocus.emit(event);
};
this.handleBlur = (event) => {
this.tdsBlur.emit(event);
};
this.value = undefined;
this.internalValue = undefined;
this.disabled = false;
this.tdsAriaLabel = undefined;
this.selected = false;
this.multiselect = false;
this.size = 'lg';
}
/** Method to select/deselect an option. */
async setSelected(selected) {
this.selected = selected;
}
valueWatcher(newValue) {
this.internalValue = convertToString(newValue);
}
componentWillLoad() {
this.internalValue = convertToString(this.value);
}
connectedCallback() {
if (!this.tdsAriaLabel && !this.multiselect) {
console.warn('Tegel Dropdown option component: tdsAriaLabel prop is missing');
}
}
render() {
return (h(Host, { key: '52827112a3060a8858978c3e65c284358f923539' }, h("div", { key: 'edf5262e5dbbfadf34ff6faa164e58b7fec1e561', class: `dropdown-option
${this.size}
${this.selected ? 'selected' : ''}
${this.disabled ? 'disabled' : ''}
` }, this.multiselect ? (h("div", { class: "multiselect", onKeyDown: (event) => {
if (event.key === 'Escape') {
this.parentElement.close();
}
} }, h("tds-checkbox", { onTdsChange: (event) => {
this.handleMultiselect(event);
}, disabled: this.disabled, checked: this.selected, tdsAriaLabel: this.tdsAriaLabel, class: {
[this.size]: true,
} }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected, "aria-label": this.tdsAriaLabel, onClick: () => {
this.handleSingleSelect();
}, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled, class: this.size }, h("div", { class: "single-select" }, h("slot", null), this.selected && h("tds-icon", { name: "tick", size: "16px" })))))));
}
static get is() { return "tds-dropdown-option"; }
static get encapsulation() { return "shadow"; }
static get delegatesFocus() { return true; }
static get originalStyleUrls() {
return {
"$": ["dropdown-option.scss"]
};
}
static get styleUrls() {
return {
"$": ["dropdown-option.css"]
};
}
static get properties() {
return {
"value": {
"type": "any",
"mutable": false,
"complexType": {
"original": "string | number",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Value of the dropdown option"
},
"attribute": "value",
"reflect": false
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the option as disabled."
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"tdsAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines aria-label attribute for the option"
},
"attribute": "tds-aria-label",
"reflect": false
}
};
}
static get states() {
return {
"internalValue": {},
"selected": {},
"multiselect": {},
"size": {}
};
}
static get events() {
return [{
"method": "tdsSelect",
"name": "tdsSelect",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Click event for the Dropdown option."
},
"complexType": {
"original": "{\n selected: boolean;\n value: string;\n }",
"resolved": "{ selected: boolean; value: string; }",
"references": {}
}
}, {
"method": "tdsFocus",
"name": "tdsFocus",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Focus event for the Dropdown option."
},
"complexType": {
"original": "FocusEvent",
"resolved": "FocusEvent",
"references": {
"FocusEvent": {
"location": "global",
"id": "global::FocusEvent"
}
}
}
}, {
"method": "tdsBlur",
"name": "tdsBlur",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Blur event for the Dropdown option."
},
"complexType": {
"original": "FocusEvent",
"resolved": "FocusEvent",
"references": {
"FocusEvent": {
"location": "global",
"id": "global::FocusEvent"
}
}
}
}];
}
static get methods() {
return {
"setSelected": {
"complexType": {
"signature": "(selected: boolean) => Promise<void>",
"parameters": [{
"name": "selected",
"type": "boolean",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Method to select/deselect an option.",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "value",
"methodName": "valueWatcher"
}];
}
}