2022-09-14 22:05:21 +00:00
|
|
|
import { AKElement } from "@goauthentik/elements/Base";
|
|
|
|
|
|
|
|
|
|
import { CSSResult, TemplateResult, css, html } from "lit";
|
2021-11-04 21:34:48 +00:00
|
|
|
import { customElement, property } from "lit/decorators.js";
|
2021-09-21 09:31:37 +00:00
|
|
|
|
2021-04-02 09:27:49 +00:00
|
|
|
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
2021-09-21 09:31:37 +00:00
|
|
|
import PFForm from "@patternfly/patternfly/components/Form/form.css";
|
|
|
|
|
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
|
|
|
|
|
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
2021-04-02 09:27:49 +00:00
|
|
|
|
web: laying the groundwork for future expansion (#7045)
* web: laying the groundwork for future expansion
This commit is a hodge-podge of updates and changes to the web. Functional changes:
- Makefile: Fixed a bug in the `help` section that prevented the WIDTH from being accurately
calculated if `help` was included rather than in-lined.
- ESLint: Modified the "unused vars" rule so that variables starting with an underline are not
considered by the rule. This allows for elided variables in event handlers. It's not a perfect
solution-- a better one would be to use Typescript's function-specialization typing, but there are
too many places where we elide or ignore some variables in a function's usage that switching over
to specialization would be a huge lift.
- locale: It turns out, lit-locale does its own context management. We don't need to have a context
at all in this space, and that's one less listener we need to attach t othe DOM.
- ModalButton: A small thing, but using `nothing` instead of "html``" allows lit better control over
rendering and reduces the number of actual renders of the page.
- FormGroup: Provided a means to modify the aria-label, rather than stick with the just the word
"Details." Specializing this field will both help users of screen readers in the future, and will
allow test suites to find specific form groups now.
- RadioButton: provide a more consistent interface to the RadioButton. First, we dispatch the
events to the outside world, and we set the value locally so that the current `Form.ts` continues
to behave as expected. We also prevent the "button lost value" event from propagating; this
presents a unified select-like interface to users of the RadioButtonGroup. The current value
semantics are preserved; other clients of the RadioButton do not see a change in behavior.
- EventEmitter: If the custom event detail is *not* an object, do not use the object-like semantics
for forwarding it; just send it as-is.
- Comments: In the course of laying the groundwork for the application wizard, I throw a LOT of
comments into the code, describing APIs, interfaces, class and function signatures, to better
document the behavior inside and as signposts for future work.
* web: permit arrays to be sent in custom events without interpolation.
* actually use assignValue or rather serializeFieldRecursive
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
2023-10-02 20:33:27 +00:00
|
|
|
/**
|
|
|
|
|
* Form Group
|
|
|
|
|
*
|
|
|
|
|
* Mostly visual effects, with a single interaction for opening/closing the view.
|
|
|
|
|
*
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* TODO: Listen for custom events from its children about 'invalidation' events, and
|
|
|
|
|
* trigger the `expanded` property as needed.
|
|
|
|
|
*/
|
|
|
|
|
|
2021-04-02 09:27:49 +00:00
|
|
|
@customElement("ak-form-group")
|
2022-09-14 22:05:21 +00:00
|
|
|
export class FormGroup extends AKElement {
|
web: laying the groundwork for future expansion (#7045)
* web: laying the groundwork for future expansion
This commit is a hodge-podge of updates and changes to the web. Functional changes:
- Makefile: Fixed a bug in the `help` section that prevented the WIDTH from being accurately
calculated if `help` was included rather than in-lined.
- ESLint: Modified the "unused vars" rule so that variables starting with an underline are not
considered by the rule. This allows for elided variables in event handlers. It's not a perfect
solution-- a better one would be to use Typescript's function-specialization typing, but there are
too many places where we elide or ignore some variables in a function's usage that switching over
to specialization would be a huge lift.
- locale: It turns out, lit-locale does its own context management. We don't need to have a context
at all in this space, and that's one less listener we need to attach t othe DOM.
- ModalButton: A small thing, but using `nothing` instead of "html``" allows lit better control over
rendering and reduces the number of actual renders of the page.
- FormGroup: Provided a means to modify the aria-label, rather than stick with the just the word
"Details." Specializing this field will both help users of screen readers in the future, and will
allow test suites to find specific form groups now.
- RadioButton: provide a more consistent interface to the RadioButton. First, we dispatch the
events to the outside world, and we set the value locally so that the current `Form.ts` continues
to behave as expected. We also prevent the "button lost value" event from propagating; this
presents a unified select-like interface to users of the RadioButtonGroup. The current value
semantics are preserved; other clients of the RadioButton do not see a change in behavior.
- EventEmitter: If the custom event detail is *not* an object, do not use the object-like semantics
for forwarding it; just send it as-is.
- Comments: In the course of laying the groundwork for the application wizard, I throw a LOT of
comments into the code, describing APIs, interfaces, class and function signatures, to better
document the behavior inside and as signposts for future work.
* web: permit arrays to be sent in custom events without interpolation.
* actually use assignValue or rather serializeFieldRecursive
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
2023-10-02 20:33:27 +00:00
|
|
|
@property({ type: Boolean, reflect: true })
|
2021-04-02 09:27:49 +00:00
|
|
|
expanded = false;
|
|
|
|
|
|
web: laying the groundwork for future expansion (#7045)
* web: laying the groundwork for future expansion
This commit is a hodge-podge of updates and changes to the web. Functional changes:
- Makefile: Fixed a bug in the `help` section that prevented the WIDTH from being accurately
calculated if `help` was included rather than in-lined.
- ESLint: Modified the "unused vars" rule so that variables starting with an underline are not
considered by the rule. This allows for elided variables in event handlers. It's not a perfect
solution-- a better one would be to use Typescript's function-specialization typing, but there are
too many places where we elide or ignore some variables in a function's usage that switching over
to specialization would be a huge lift.
- locale: It turns out, lit-locale does its own context management. We don't need to have a context
at all in this space, and that's one less listener we need to attach t othe DOM.
- ModalButton: A small thing, but using `nothing` instead of "html``" allows lit better control over
rendering and reduces the number of actual renders of the page.
- FormGroup: Provided a means to modify the aria-label, rather than stick with the just the word
"Details." Specializing this field will both help users of screen readers in the future, and will
allow test suites to find specific form groups now.
- RadioButton: provide a more consistent interface to the RadioButton. First, we dispatch the
events to the outside world, and we set the value locally so that the current `Form.ts` continues
to behave as expected. We also prevent the "button lost value" event from propagating; this
presents a unified select-like interface to users of the RadioButtonGroup. The current value
semantics are preserved; other clients of the RadioButton do not see a change in behavior.
- EventEmitter: If the custom event detail is *not* an object, do not use the object-like semantics
for forwarding it; just send it as-is.
- Comments: In the course of laying the groundwork for the application wizard, I throw a LOT of
comments into the code, describing APIs, interfaces, class and function signatures, to better
document the behavior inside and as signposts for future work.
* web: permit arrays to be sent in custom events without interpolation.
* actually use assignValue or rather serializeFieldRecursive
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
2023-10-02 20:33:27 +00:00
|
|
|
@property({ type: String, attribute: "aria-label", reflect: true })
|
|
|
|
|
ariaLabel = "Details";
|
|
|
|
|
|
2021-04-02 09:27:49 +00:00
|
|
|
static get styles(): CSSResult[] {
|
2021-08-03 15:52:21 +00:00
|
|
|
return [
|
|
|
|
|
PFBase,
|
|
|
|
|
PFForm,
|
|
|
|
|
PFButton,
|
|
|
|
|
PFFormControl,
|
|
|
|
|
css`
|
|
|
|
|
slot[name="body"][hidden] {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
`,
|
|
|
|
|
];
|
2021-04-02 09:27:49 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render(): TemplateResult {
|
|
|
|
|
return html`<div class="pf-c-form__field-group ${this.expanded ? "pf-m-expanded" : ""}">
|
|
|
|
|
<div class="pf-c-form__field-group-toggle">
|
|
|
|
|
<div class="pf-c-form__field-group-toggle-button">
|
2021-08-03 15:52:21 +00:00
|
|
|
<button
|
|
|
|
|
class="pf-c-button pf-m-plain"
|
|
|
|
|
type="button"
|
|
|
|
|
aria-expanded="${this.expanded}"
|
web: laying the groundwork for future expansion (#7045)
* web: laying the groundwork for future expansion
This commit is a hodge-podge of updates and changes to the web. Functional changes:
- Makefile: Fixed a bug in the `help` section that prevented the WIDTH from being accurately
calculated if `help` was included rather than in-lined.
- ESLint: Modified the "unused vars" rule so that variables starting with an underline are not
considered by the rule. This allows for elided variables in event handlers. It's not a perfect
solution-- a better one would be to use Typescript's function-specialization typing, but there are
too many places where we elide or ignore some variables in a function's usage that switching over
to specialization would be a huge lift.
- locale: It turns out, lit-locale does its own context management. We don't need to have a context
at all in this space, and that's one less listener we need to attach t othe DOM.
- ModalButton: A small thing, but using `nothing` instead of "html``" allows lit better control over
rendering and reduces the number of actual renders of the page.
- FormGroup: Provided a means to modify the aria-label, rather than stick with the just the word
"Details." Specializing this field will both help users of screen readers in the future, and will
allow test suites to find specific form groups now.
- RadioButton: provide a more consistent interface to the RadioButton. First, we dispatch the
events to the outside world, and we set the value locally so that the current `Form.ts` continues
to behave as expected. We also prevent the "button lost value" event from propagating; this
presents a unified select-like interface to users of the RadioButtonGroup. The current value
semantics are preserved; other clients of the RadioButton do not see a change in behavior.
- EventEmitter: If the custom event detail is *not* an object, do not use the object-like semantics
for forwarding it; just send it as-is.
- Comments: In the course of laying the groundwork for the application wizard, I throw a LOT of
comments into the code, describing APIs, interfaces, class and function signatures, to better
document the behavior inside and as signposts for future work.
* web: permit arrays to be sent in custom events without interpolation.
* actually use assignValue or rather serializeFieldRecursive
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
2023-10-02 20:33:27 +00:00
|
|
|
aria-label=${this.ariaLabel}
|
2021-08-03 15:52:21 +00:00
|
|
|
@click=${() => {
|
|
|
|
|
this.expanded = !this.expanded;
|
|
|
|
|
}}
|
|
|
|
|
>
|
2021-04-02 09:27:49 +00:00
|
|
|
<span class="pf-c-form__field-group-toggle-icon">
|
|
|
|
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pf-c-form__field-group-header">
|
|
|
|
|
<div class="pf-c-form__field-group-header-main">
|
|
|
|
|
<div class="pf-c-form__field-group-header-title">
|
|
|
|
|
<div class="pf-c-form__field-group-header-title-text">
|
|
|
|
|
<slot name="header"></slot>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pf-c-form__field-group-header-description">
|
|
|
|
|
<slot name="description"></slot>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<slot ?hidden=${!this.expanded} class="pf-c-form__field-group-body" name="body"></slot>
|
|
|
|
|
</div>`;
|
|
|
|
|
}
|
|
|
|
|
}
|
