Page MenuHomeSealhub
Files F3010654

collapsible-field-group.ts
No OneTemporary
Actions

collapsible-field-group.ts
View Options

import { FlatTemplatable, tempstream } from "tempstream";
import { FieldGroup } from "./field-group.js";
import { randomUUID } from "crypto";
import { FormControl } from "./form-control.js";
type CollapsibleFieldGroupOptions = {
label?: string;
classes?: string[];
openOnStart?: boolean;
textWhenOpen?: string;
textWhenClosed?: string;
groupID?: string;
};
export class CollapsibleFieldGroup extends FieldGroup {
public collapseID: string;
constructor(
public controls: FormControl[],
public options: CollapsibleFieldGroupOptions = {}
) {
super([]);
if (this.options.groupID == undefined) {
this.options.groupID = "A" + randomUUID(); // "A" is needed as ids always have to start with a letter
}
this.collapseID = this.options.groupID + "collapse";
}
getGroupLabelProps() {
return tempstream`${super.getGroupLabelProps()} for="${
this.collapseID
}"`;
}
preLabelContainer(): FlatTemplatable {
return /* HTML */ `<style>
input#${this.collapseID} {
display: none;
}
input#${this.collapseID} ~ .field-group__fields {
display: none;
}
input#${this.collapseID}:checked ~ .field-group__fields {
display: block;
}
input#${this.collapseID}
~ .field-group__label-container
.field-group__collapse-label-text--open {
display: none;
}
input#${this.collapseID}:checked
~ .field-group__label-container
.field-group__collapse-label-text--open {
display: inline-block;
}
input#${this.collapseID}
~ .field-group__label-container
.field-group__collapse-label-text--closed {
display: inline-block;
}
input#${this.collapseID}:checked
~ .field-group__label-container
.field-group__collapse-label-text--closed {
display: none;
}
</style>
<input
type="checkbox"
id="${this.collapseID}"
${this.options.openOnStart ? "checked" : ""}
/>`;
}
postLabel(): FlatTemplatable {
return /* HTML */ `<label
class="field-group__collapse-label"
for="${this.collapseID}"
>
<span
class="field-group__collapse-label-text field-group__collapse-label-text--open"
>
${this.options.textWhenOpen || "close"}
</span>
<span
class="field-group__collapse-label-text field-group__collapse-label-text--closed"
>
${this.options.textWhenClosed || "open"}
</span>
</label>`;
}
}

File Metadata

Mime Type
text/html
Expires
Wed, May 7, 19:45 (1 d, 6 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
625480
Default Alt Text
collapsible-field-group.ts (2 KB)

Event Timeline