habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/elements: fix alignment with checkbox in table

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2022-12-22 15:12:47 +01:00
parent ab9efcea77
commit db0af3763b
1 changed files with 27 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
web/src/elements/table/Table.ts
View File

@ -286,34 +286,35 @@ export abstract class Table<T> extends AKElement {
<tr role="row"> <tr role="row">
${this.checkbox ${this.checkbox
? html`<td class="pf-c-table__check" role="cell"> ? html`<td class="pf-c-table__check" role="cell">
<input <label
type="checkbox" ><input
.checked=${this.selectedElements.indexOf(item) >= 0} type="checkbox"
@input=${(ev: InputEvent) => { .checked=${this.selectedElements.indexOf(item) >= 0}
if ((ev.target as HTMLInputElement).checked) { @input=${(ev: InputEvent) => {
// Add item to selected if ((ev.target as HTMLInputElement).checked) {
this.selectedElements.push(item); // Add item to selected
} else { this.selectedElements.push(item);
// Get index of item and remove if selected } else {
const index = this.selectedElements.indexOf(item); // Get index of item and remove if selected
if (index <= -1) return; const index = this.selectedElements.indexOf(item);
this.selectedElements.splice(index, 1); if (index <= -1) return;
} this.selectedElements.splice(index, 1);
this.requestUpdate();
// Unset select-all if selectedElements is empty
if (this.selectedElements.length < 1) {
const selectAllCheckbox =
this.shadowRoot?.querySelector<HTMLInputElement>(
"[name=select-all]",
);
if (!selectAllCheckbox) {
return;
} }
selectAllCheckbox.checked = false;
this.requestUpdate(); this.requestUpdate();
} // Unset select-all if selectedElements is empty
}} if (this.selectedElements.length < 1) {
/> const selectAllCheckbox =
this.shadowRoot?.querySelector<HTMLInputElement>(
"[name=select-all]",
);
if (!selectAllCheckbox) {
return;
}
selectAllCheckbox.checked = false;
this.requestUpdate();
}
}}
/></label>
</td>` </td>`
: html``} : html``}
${this.expandable ${this.expandable