@scania/tegel
Version:
Tegel Design System
158 lines (154 loc) • 8.26 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
import { c as convertToString } from './p-a1181b1f.js';
import { d as defineCustomElement$2 } from './p-23aab3b9.js';
import { d as defineCustomElement$1 } from './p-b390ece5.js';
const dropdownOptionCss = ":host{box-sizing:border-box;display:block;background-color:var(--tds-dropdown-option-background)}:host *{box-sizing:border-box}:host .dropdown-option{color:var(--tds-dropdown-option-color);border-bottom:1px solid var(--tds-dropdown-option-border);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);overflow-wrap:anywhere;transition:background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-option.selected{background-color:var(--tds-dropdown-option-background-selected)}:host .dropdown-option.disabled{color:var(--tds-dropdown-option-color-disabled)}:host .dropdown-option button:focus{outline:2px solid var(--tds-dropdown-option-focus);box-shadow:inset 0 0 0 3px var(--tds-white);outline-offset:-2px}:host .dropdown-option button{all:unset;width:100%}:host .dropdown-option button.lg{padding:19px 0 20px}:host .dropdown-option button.md{padding:15px 0 16px}:host .dropdown-option button.sm{padding:11px 0 12px}:host .dropdown-option button.xs{padding:7px 0 8px}:host .dropdown-option button .single-select{display:flex;align-items:center;justify-content:space-between;padding:0 16px}:host .dropdown-option .multiselect{width:100%;height:100%}:host .dropdown-option .multiselect tds-checkbox{display:flex;height:100%;width:100%}:host .dropdown-option .multiselect tds-checkbox.lg{padding:15px 16px 16px}:host .dropdown-option .multiselect tds-checkbox.md{padding:11px 16px 12px}:host .dropdown-option .multiselect tds-checkbox.sm{padding:7px 16px 8px}:host .dropdown-option .multiselect tds-checkbox.xs{padding:7px 16px 8px}:host .dropdown-option:hover{border-bottom-color:var(--tds-dropdown-option-border-hover);cursor:pointer}:host .dropdown-option:hover.disabled{border-bottom-color:var(--tds-dropdown-option-border-hover);cursor:not-allowed}:host([hidden]){display:none}";
const TdsDropdownOptionStyle0 = dropdownOptionCss;
const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOption extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.tdsSelect = createEvent(this, "tdsSelect", 6);
this.tdsFocus = createEvent(this, "tdsFocus", 6);
this.tdsBlur = createEvent(this, "tdsBlur", 6);
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 delegatesFocus() { return true; }
get host() { return this; }
static get watchers() { return {
"value": ["valueWatcher"]
}; }
static get style() { return TdsDropdownOptionStyle0; }
}, [17, "tds-dropdown-option", {
"value": [8],
"disabled": [4],
"tdsAriaLabel": [1, "tds-aria-label"],
"internalValue": [32],
"selected": [32],
"multiselect": [32],
"size": [32],
"setSelected": [64]
}, undefined, {
"value": ["valueWatcher"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["tds-dropdown-option", "tds-checkbox", "tds-icon"];
components.forEach(tagName => { switch (tagName) {
case "tds-dropdown-option":
if (!customElements.get(tagName)) {
customElements.define(tagName, TdsDropdownOption);
}
break;
case "tds-checkbox":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "tds-icon":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { TdsDropdownOption as T, defineCustomElement as d };