dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
264 lines (263 loc) • 9.69 kB
JavaScript
var $ = Object.defineProperty, V = Object.defineProperties;
var A = Object.getOwnPropertyDescriptors;
var m = Object.getOwnPropertySymbols;
var z = Object.prototype.hasOwnProperty, S = Object.prototype.propertyIsEnumerable;
var g = (d, t, e) => t in d ? $(d, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : d[t] = e, v = (d, t) => {
for (var e in t || (t = {}))
z.call(t, e) && g(d, e, t[e]);
if (m)
for (var e of m(t))
S.call(t, e) && g(d, e, t[e]);
return d;
}, k = (d, t) => V(d, A(t));
var f = (d, t, e) => new Promise((i, s) => {
var o = (l) => {
try {
n(e.next(l));
} catch (p) {
s(p);
}
}, a = (l) => {
try {
n(e.throw(l));
} catch (p) {
s(p);
}
}, n = (l) => l.done ? i(l.value) : Promise.resolve(l.value).then(o, a);
n((e = e.apply(d, t)).next());
});
import { clsx as R } 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 y } from "../../../node_modules/@lit/reactive-element/decorators/property.js";
import { query as w } from "../../../node_modules/@lit/reactive-element/decorators/query.js";
import { ifDefined as r } from "../../../node_modules/lit-html/directives/if-defined.js";
import { html as h } from "../../../node_modules/lit-html/static.js";
import { GenericFormElement as C } from "../../../internal/mixin/genericFormElement.js";
import L from "../../feedback/feedback.component.js";
import I from "../../icon/icon.component.js";
import q from "../../icon-button/icon-button.component.js";
import F from "../../tooltip/tooltip.component.js";
import _ from "../../typography/typography.component.js";
import D from "../form-label/form-label.component.js";
import E from "../input-group/input-group.scss.js";
import { unsafeCSS as x } from "../../../node_modules/@lit/reactive-element/css-tag.js";
var M = Object.defineProperty, b = (d, t, e, i) => {
for (var s = void 0, o = d.length - 1, a; o >= 0; o--)
(a = d[o]) && (s = a(t, e, s) || s);
return s && M(t, e, s), s;
};
const T = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "], c = class c extends C {
constructor() {
super(...arguments), this.tooltipPlacement = "bottom", this.optionalLabel = "";
}
/** A radio value may be `false` or `0`, so emptiness is not the same as falsiness. */
get hasValue() {
return this.value !== void 0 && this.value !== null && this.value !== "";
}
willUpdate(t) {
super.willUpdate(t), t.has("value") && (this._previousValue = t.get("value"));
}
updated(t) {
super.updated(t), t.has("value") && this._previousValue !== this.value && this.updateRadioStates();
}
attributeChangedCallback(t, e, i) {
super.attributeChangedCallback(t, e, i), (t === "disabled" || t === "invalid") && this.getAllRadios().forEach((s) => {
s[t] = i !== null;
});
}
_handleSlotChange(t) {
(t == null ? void 0 : t.target).setAttribute("slot", "icon");
}
getAllRadios() {
return [...this.querySelectorAll("dap-ds-radio-button")];
}
updateRadioStates() {
const t = this.getAllRadios();
if (t.forEach((e, i) => {
e.checked = e.value === this.value, e.size = this.size, e.posInSet = i + 1, e.setSize = t.length, this.name && (e.name = this.name), e.focusable = e.checked;
}), !this.hasValue) {
const e = t.find((i) => !i.disabled);
e && (e.focusable = !0);
}
this.internals.setFormValue(this.value), this.setValidity();
}
syncRadioElements() {
return f(this, null, function* () {
const t = this.getAllRadios();
if (yield Promise.all(
t.map((e, i) => f(this, null, function* () {
yield e.updateComplete, e.checked = e.value === this.value, e.size = this.size, e.posInSet = i + 1, e.setSize = t.length, this.name && (e.name = this.name), e.focusable = e.checked;
}))
), !this.hasValue) {
const e = t.find((i) => !i.disabled);
e && t.forEach((i) => {
i.focusable = i === e;
});
}
this.internals.setFormValue(this.value), this.setValidity();
});
}
handleRadioClick(t) {
const e = t.target.closest(
"dap-ds-radio-button"
), i = this.getAllRadios(), s = this.value;
e.disabled || (this.value = e.value, i.forEach((o) => {
o.checked = o === e, o.focusable = o === e;
}), this.value !== s && (this.emit("dds-change", { value: e.value, checked: !0 }), this.internals.setFormValue(this.value), this.setValidity()));
}
handleKeyDown(t) {
var n;
if (!T.includes(t.key))
return;
const e = this.getAllRadios().filter((l) => !l.disabled), i = (n = e.find((l) => l.checked)) != null ? n : e[0], s = t.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(t.key) ? -1 : 1, o = this.value;
let a = e.indexOf(i) + s;
a < 0 && (a = e.length - 1), a > e.length - 1 && (a = 0), this.getAllRadios().forEach((l) => {
l.checked = !1, l.focusable = !1, l.tabIndex = -1;
}), this.value = e[a].value, e[a].checked = !0, e[a].focusable = !0, e[a].tabIndex = 0, e[a].focus(), this.value !== o && (this.emit("dds-change", { value: e[a].value, checked: !0 }), this.internals.setFormValue(this.value), this.setValidity()), t.preventDefault();
}
setValidity() {
const e = this.getAllRadios().some((i) => i.checked);
this.required && !e ? this.internals.setValidity(
{ valueMissing: !0 },
this.validationMessage,
this.innerInput
) : this.internals.setValidity({});
}
get validationMessage() {
return " ";
}
checkValidity() {
return !this.required || this.hasValue;
}
get validity() {
return k(v({}, this.internals.validity), {
valid: this.checkValidity(),
valueMissing: this.required && !this.hasValue
});
}
reportValidity() {
return this.required ? this.checkValidity() : !0;
}
handleLabelClick() {
var i;
const t = this.getAllRadios();
((i = t.find((s) => s.checked)) != null ? i : t[0]).focus();
}
handleInvalid(t) {
t.preventDefault();
}
render() {
return h`
<fieldset
id="input"
part="base"
class="input-group"
.disabled=${this.disabled}
form=${r(this.form)}
name=${this.name}
role="radiogroup"
tabindex="-1"
aria-labelledby="label"
aria-required=${this.required}
aria-describedby=${`description ${this.feedbackId}`}
aria-errormessage=${r(this.feedbackId)}
=${this.handleInvalid}>
${(this.label || this.tooltip) && h`<legend class="input-group__legend">
<div class="label-container">
${this.label && h`<dap-ds-form-label
part="label"
id="label"
.size=${this.size}
.required=${this.required}
.requiredLabel=${this.requiredLabel}
.optionalLabel=${this.optionalLabel}
.optional=${this.optional}
.subtle=${this.subtle}
.disabled=${this.disabled}
.noMargin=${!!this.description}
.hideLabel=${this.hideLabel}
label=${r(this.label)}
=${this.handleLabelClick}>
</dap-ds-form-label>`}
${this.tooltip && h` <dap-ds-tooltip
part="tooltip"
content=${this.tooltip}
mode="toggle"
placement=${this.tooltipPlacement}>
<dap-ds-icon-button
clean
slot="trigger"
class="info-button"
aria-label=${this.tooltipAriaLabel}
size=${this.size}
iconSize=${this.size === "xs" ? "16" : "22"}>
<dap-ds-icon
name="information-line"
class="info-button"></dap-ds-icon>
</dap-ds-icon-button>
</dap-ds-tooltip>`}
</div>
${this.description && h`
<dap-ds-typography
part="description"
variant="description"
class=${R("input-description")}
size=${r(this.size)}
id="description">
${this.description}
</dap-ds-typography>
`}
</legend>`}
<div part="container" class="input-group__items">
<input id="hidden" hidden =${this.handleInvalid} />
<slot
=${this.handleRadioClick}
=${this.handleKeyDown}
=${this.onBlur}
=${this.onFocus}
=${this.syncRadioElements}></slot>
</div>
${this.feedback && this._renderFeedback()}
</fieldset>
`;
}
_renderFeedback() {
return h`
<dap-ds-feedback
part="feedback"
feedbackType=${r(this.feedbackType)}
feedbackSize="${r(this.size)}"
id="feedback"
.subtle=${this.subtle}>
<slot
name="feedback-icon"
="${this._handleSlotChange}"></slot>
${this.feedback}
</dap-ds-feedback>
`;
}
};
c.tagName = "dap-ds-radio-group", c.dependencies = {
"dap-ds-form-label": D,
"dap-ds-tooltip": F,
"dap-ds-icon-button": q,
"dap-ds-icon": I,
"dap-ds-typography": _,
"dap-ds-feedback": L
}, c.styles = x(E);
let u = c;
b([
y()
], u.prototype, "tooltipPlacement");
b([
w("#hidden")
], u.prototype, "hiddenInput");
b([
y()
], u.prototype, "optionalLabel");
export {
u as default
};
//# sourceMappingURL=radio-group.component.js.map