62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { AKElement } from "@goauthentik/elements/Base";
|
|
import { RadioOption } from "@goauthentik/elements/forms/Radio";
|
|
import "@goauthentik/elements/forms/Radio";
|
|
|
|
import { html, nothing } from "lit";
|
|
import { customElement, property } from "lit/decorators.js";
|
|
|
|
@customElement("ak-radio-input")
|
|
export class AkRadioInput<T> extends AKElement {
|
|
// Render into the lightDOM. This effectively erases the shadowDOM nature of this component, but
|
|
// we're not actually using that and, for the meantime, we need the form handlers to be able to
|
|
// find the children of this component.
|
|
//
|
|
// TODO: This abstraction is wrong; it's putting *more* layers in as a way of managing the
|
|
// visual clutter and legibility issues of ak-form-elemental-horizontal and patternfly in
|
|
// general.
|
|
protected createRenderRoot() {
|
|
return this;
|
|
}
|
|
|
|
@property({ type: String })
|
|
name!: string;
|
|
|
|
@property({ type: String })
|
|
label = "";
|
|
|
|
@property({ type: String })
|
|
help = "";
|
|
|
|
@property({ type: Boolean })
|
|
required = false;
|
|
|
|
@property({ type: Object })
|
|
value!: T;
|
|
|
|
@property({ type: Array })
|
|
options: RadioOption<T>[] = [];
|
|
|
|
handleInput(ev: CustomEvent) {
|
|
this.value = ev.detail.value;
|
|
}
|
|
|
|
render() {
|
|
return html`<ak-form-element-horizontal
|
|
label=${this.label}
|
|
?required=${this.required}
|
|
name=${this.name}
|
|
>
|
|
<ak-radio
|
|
.options=${this.options}
|
|
.value=${this.value}
|
|
@input=${this.handleInput}
|
|
></ak-radio>
|
|
${this.help.trim()
|
|
? html`<p class="pf-c-form__helper-radio">${this.help}</p>`
|
|
: nothing}
|
|
</ak-form-element-horizontal> `;
|
|
}
|
|
}
|
|
|
|
export default AkRadioInput;
|