dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
347 lines (346 loc) • 15.1 kB
JavaScript
var m = Object.defineProperty;
var u = Object.getOwnPropertySymbols;
var b = Object.prototype.hasOwnProperty, x = Object.prototype.propertyIsEnumerable;
var f = (o, e, t) => e in o ? m(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t, h = (o, e) => {
for (var t in e || (e = {}))
b.call(e, t) && f(o, t, e[t]);
if (u)
for (var t of u(e))
x.call(e, t) && f(o, t, e[t]);
return o;
};
import { clsx as g } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as d } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as c } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { ifDefined as v } from "../../node_modules/lit-html/directives/if-defined.js";
import { unsafeStatic as I, html as O } from "../../node_modules/lit-html/static.js";
import { scrollIntoContainer as y } from "../../common/utils.js";
import { DdsElement as C } from "../../internal/dds-hu-element.js";
import { SizedMixin as S } from "../../internal/mixin/sizedMixin.js";
import A from "../option-item/option-item.component.js";
import E from "./option-list.scss.js";
import { unsafeCSS as T } from "../../node_modules/@lit/reactive-element/css-tag.js";
var $ = Object.defineProperty, a = (o, e, t, i) => {
for (var s = void 0, l = o.length - 1, p; l >= 0; l--)
(p = o[l]) && (s = p(e, t, s) || s);
return s && $(e, t, s), s;
};
const r = class r extends S(C) {
constructor() {
super(...arguments), this.filterText = "", this.focused = !1, this.search = !1, this.searchMode = "none", this.searchOnValueSet = "true", this.selectable = "true", this.disableDelaySet = !1, this.queryString = "", this.firstLoad = !0, this.optionEls = [], this.availableOptions = [], this.handleOptionClick = (e) => {
this.focused = !0;
const t = e.target;
if (t && !t.disabled) {
const i = e.ctrlKey || e.metaKey, s = t.selected;
if (i && s) {
const l = this.availableOptions.find(
(p) => p.hasAttribute("empty")
);
l ? (this.setSelectedOption(l), this.setCurrentOption(l), this.value = l.value, this.selectedIndex = this.findIndexByValue(
this.availableOptions,
l.value
), this.emit("dds-option-change", h({}, this.getEventDetails(l)))) : (this.setSelectedOption(void 0), this.setCurrentOption(null), this.value = void 0, this.selectedIndex = -1, this.emit("dds-option-deselect", {
option: t,
value: void 0,
index: -1,
text: t.optionText
}));
return;
}
this.setCurrentOption(t), this.setSelectedOption(t), this.selectionChanged(t), this.updateComplete.then(() => {
this.selectedIndex = this.findIndexByValue(
this.availableOptions,
this.value
), this.disableDelaySet || this.emit("dds-option-change", h({}, this.getEventDetails(this.currentOption)));
});
} else
e.preventDefault(), e.stopPropagation();
}, this.getSearchString = (e) => (typeof this.queryTimeout == "number" && window.clearTimeout(this.queryTimeout), this.queryTimeout = window.setTimeout(() => {
this.queryString = "";
}, 500), this.queryString += e, this.queryString), this.buildQueryString = (e) => {
const t = this.getSearchString(e);
for (const i of this.availableOptions)
if (i.optionText.toLowerCase().startsWith(t.toLowerCase())) {
this.selectedIndex = this.findIndexByValue(
this.availableOptions,
i.value
), this.setCurrentOption(i);
break;
}
};
}
get isAutoComplete() {
return this.searchMode === "autocomplete" || this.searchMode === "manual";
}
firstUpdated(e) {
super.firstUpdated(e), this.setAttribute("role", "listbox");
}
getAllOptions() {
var s;
const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot"), t = e == null ? void 0 : e.assignedElements()[0], i = (t == null ? void 0 : t.nodeName) === "SLOT" ? (e == null ? void 0 : e.assignedElements()[0]).assignedElements() : e == null ? void 0 : e.assignedElements();
return i ? [...i] : [...this.querySelectorAll("dap-ds-option-item")];
}
getAllRenderedOptions() {
var t;
const e = (t = this.shadowRoot) == null ? void 0 : t.querySelectorAll("dap-ds-option-item");
return e ? [...e] : [];
}
getAllAvailabeOptions() {
return this.availableOptions;
}
getActiveOption() {
return this.currentOption ? this.getAllRenderedOptions().find(
(t) => t.value === this.currentOption.value
) : null;
}
updated(e) {
if (super.updated(e), e.has("value") && !e.has("currentOption") && this.searchOnValueSet === "true") {
const t = this.availableOptions.find(
(i) => i.value === this.value
);
t && (this.changeOption(t, e.get("value")), this.selectedIndex = this.findIndexByValue(
this.availableOptions,
this.value
), this.emit("dds-option-change", h({}, this.getEventDetails(this.currentOption))));
}
(e.has("options") || e.has("optionEls")) && (this.availableOptions = this.options || this.optionEls, this.emit("dds-list-changed", { elements: this.availableOptions }));
}
shouldUpdate(e) {
return e.has("filterText") && (this.filterText && this.searchMode !== "none" && this.searchMode !== "manual" ? (this.filterAvailableOptions(), this.selectedIndex = 0, this.setCurrentOption(this.availableOptions[0], !1), this.emit("dds-list-changed", { elements: this.availableOptions })) : this.filterText && this.searchMode === "manual" ? this.selectedIndex === -1 && this.availableOptions.length > 0 && (this.selectedIndex = 0, this.setCurrentOption(this.availableOptions[0], !1)) : this.filterText && this.searchMode === "none" ? (this.filterAvailableOptions(), this.selectedIndex = -1, this.setCurrentOption(null, !1), this.setSelectedOption(), this.emit("dds-list-changed", { elements: this.availableOptions })) : (this.availableOptions = this.options || this.optionEls, this.selectedIndex = -1, this.setCurrentOption(null, !1), this.emit("dds-list-changed", { elements: this.availableOptions }))), super.shouldUpdate(e);
}
filterAvailableOptions() {
const e = this.filterText.toLowerCase();
this.availableOptions = (this.options || this.optionEls).filter((t) => {
if (!t.disabled)
return t.optionText.toLowerCase().startsWith(e);
});
}
attributeChangedCallback(e, t, i) {
if (super.attributeChangedCallback(e, t, i), e === "value" && t !== i && this.searchOnValueSet === "true")
if (i) {
const s = this.availableOptions.find((l) => l.value === i);
this.setSelectedOption(s), this.selectionChanged(s), this.emit("dds-option-change", h({}, this.getEventDetails(this.currentOption)));
} else
this.setSelectedOption(), this.selectionChanged();
}
setOptionsFromSlottedItems() {
const e = this.getAllOptions();
this.availableOptions = e, this.optionEls = e;
}
handleKeydown(e) {
e.preventDefault(), this.handleKeyCodes(e.key, e.code);
}
scrollToActiveOption() {
if (!this.currentOption)
return;
const e = this.getAllRenderedOptions().find(
(t) => t.value === this.currentOption.value
);
e && y(e);
}
handleNavigationKey(e) {
var t;
if (e === "ArrowDown")
this.selectedIndex = this.findNearestEnabled(
this.availableOptions,
this.selectedIndex,
1
);
else if (e === "ArrowUp") {
const i = this.findNearestEnabled(
this.availableOptions,
this.selectedIndex,
this.selectedIndex === -1 ? 1 : -1
);
this.selectedIndex = i === this.availableOptions.length ? -1 : i;
} else if (e === "Home")
this.selectedIndex = (t = this.availableOptions[0]) != null && t.disabled ? this.findNearestEnabled(this.availableOptions, -1, 1) : 0;
else if (e === "End") {
const i = this.findNearestEnabled(
this.availableOptions,
this.availableOptions.length,
-1
);
this.selectedIndex = i === this.availableOptions.length ? -1 : i;
}
}
handleActionKey(e) {
e === "Escape" ? this.emit("dds-cancel") : e === "Enter" && (this.setSelectedOption(this.availableOptions[this.selectedIndex]), this.selectionChanged(this.availableOptions[this.selectedIndex]), this.emit("dds-option-change", h({}, this.getEventDetails(this.currentOption))));
}
handleTypeheadKey(e) {
this.searchMode === "typehead" && ((e == null ? void 0 : e.length) === 1 || e === "Backspace") && this.buildQueryString(e);
}
handleKeyCodes(e, t) {
if (this.focused && (this.handleNavigationKey(e), this.handleActionKey(e), this.handleTypeheadKey(e), this.selectedIndex >= 0)) {
const i = this.availableOptions[this.selectedIndex];
this.setCurrentOption(i), this.emit("dds-keydown", h({
code: t,
key: e
}, this.getEventDetails(i)));
}
}
getEventDetails(e) {
if (!e)
return;
let t = e;
return e.tagName !== "DAP-DS-OPTION-ITEM" && (t = e.closest("dap-ds-option-item")), {
opt: t,
value: t == null ? void 0 : t.value,
text: t == null ? void 0 : t.optionText,
index: this.selectedIndex
};
}
findNearestEnabled(e, t, i) {
let s = t, l;
do
if (s += i, l = e[s], l === void 0)
break;
while (l != null && l.disabled);
return l ? s : t;
}
findIndexByValue(e, t) {
return e.findIndex((i) => i.value === t);
}
clearItemFocusStates() {
this.availableOptions.forEach((e) => {
e.focused = !1, e.tabIndex = -1;
});
}
// Only set the current option without selecting it, eg: focus
setCurrentOption(e, t = !0) {
this.clearItemFocusStates(), e ? (this.currentOption = e, e.focused = !0, e.tabIndex = 0, this.emit("dds-current-change", h({}, this.getEventDetails(e))), t ? this.setFocusedOption(e) : this.scrollToActiveOption()) : (this.currentOption = null, this.emit("dds-current-change", null));
}
setFocusedOption(e) {
const t = this.getAllRenderedOptions().find(
(i) => i.value === e.value
);
t && t.focus({ preventScroll: !0 });
}
setSelectedOption(e) {
this.availableOptions.forEach((t) => t.selected = !1), e && (this.currentOption = e, e.selected = !0);
}
selectionChanged(e, t) {
const i = t || this.value;
e && e.value !== i && (this.value = e.value);
}
changeOption(e, t) {
e && !e.disabled && (this.selectedIndex = this.findIndexByValue(
this.availableOptions,
e.value
), this.setSelectedOption(e), this.setCurrentOption(e), this.selectionChanged(e, t));
}
handleInitialFocus() {
if (!this.value && this.selectedIndex < 0)
this.selectedIndex = 0;
else {
const e = this.value ? this.findIndexByValue(this.availableOptions, this.value) : this.selectedIndex;
e !== -1 && !this.isAutoComplete && (this.selectedIndex = e, this.setCurrentOption(this.availableOptions[this.selectedIndex]), this.setSelectedOption(this.availableOptions[this.selectedIndex]), this.value && this.selectionChanged(this.availableOptions[this.selectedIndex]));
}
this.selectedIndex || (this.setCurrentOption(this.availableOptions[0]), this.setSelectedOption(this.availableOptions[0]));
}
handleKeyFocus(e) {
(this.isAutoComplete || this.searchMode === "none") && (this.handleKeyCodes(e), this.setCurrentOption(this.availableOptions[this.selectedIndex], !1), this.setSelectedOption(this.availableOptions[this.selectedIndex])), this.searchMode === "typehead" && this.buildQueryString(e);
}
captureFocus(e) {
this.focused = !0, this.focus(), e ? this.handleKeyFocus(e) : this.handleInitialFocus(), typeof requestAnimationFrame == "function" && requestAnimationFrame(() => this.scrollToActiveOption());
}
removeFocus() {
this.focused = !1, this.clearItemFocusStates();
}
handleSlotChange() {
const e = this.getAllOptions();
if (this.setOptionsFromSlottedItems(), e.length > 0 && this.searchOnValueSet === "true") {
const t = e.find((i) => i.value === this.value);
this.setSelectedOption(t), this.selectionChanged(t), this.currentOption && (this.selectedIndex = this.findIndexByValue(e, this.value), this.emit("dds-option-change", h({}, this.getEventDetails(this.currentOption))));
} else if (e.length > 0 && !this.search && !this.isAutoComplete) {
const t = e.find((i) => !i.disabled);
this.selectedIndex = 0, this.setCurrentOption(t, !1), this.emit("dds-current-change", h({}, this.getEventDetails(t)));
} else if (e.length > 0 && (this.search || this.isAutoComplete)) {
const t = e.find((i) => !i.disabled);
(!this.currentOption || this.currentOption.value !== (t == null ? void 0 : t.value)) && (this.selectedIndex = 0, this.setCurrentOption(t, !1));
}
}
render() {
return O`<div
part="base"
class=${g("option-list", {
"option-list--sm": this.size === "sm",
"option-list--lg": this.size === "lg"
})}
=${this.handleKeydown}
=${this.captureFocus}>
${this.availableOptions.map(
(e, t) => O`
<dap-ds-option-item
size=${this.size}
part="option-item"
exportparts="base: option-item-base, label: option-item-label, prefix: option-item-prefix, suffix: option-item-suffix"
?disabled=${e.disabled}
?selected=${this.value === e.value}
?focused=${t === this.selectedIndex}
label=${v(e.label)}
role="option"
value=${e.value}
tabIndex=${e.tabIndex}
id=${e.id || `dap-ds-option-${e.value}`}
data-testid=${v(e.dataset.testid || void 0)}
selectable=${this.selectable}
=${this.handleOptionClick}>
${I(e.innerHTML)}
</dap-ds-option-item>
`
)}
<slot hidden =${this.handleSlotChange}></slot>
</div> `;
}
};
r.tagName = "dap-ds-option-list", r.dependencies = {
"dap-ds-option-item": A
}, r.styles = T(E);
let n = r;
a([
d()
], n.prototype, "filterText");
a([
d({ type: String, reflect: !0 })
], n.prototype, "value");
a([
d({ type: Boolean })
], n.prototype, "focused");
a([
d({ type: Boolean })
], n.prototype, "search");
a([
d()
], n.prototype, "searchMode");
a([
d({ type: String })
], n.prototype, "searchOnValueSet");
a([
d({ type: String })
], n.prototype, "selectable");
a([
d({ type: Array })
], n.prototype, "options");
a([
d({ type: Boolean })
], n.prototype, "disableDelaySet");
a([
c()
], n.prototype, "currentOption");
a([
c()
], n.prototype, "selectedIndex");
a([
c()
], n.prototype, "optionEls");
a([
c()
], n.prototype, "availableOptions");
export {
n as default
};
//# sourceMappingURL=option-list.component.js.map