trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/elements: fix alignment with checkbox in table 

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
Show Stats 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">
${this.checkbox
? html`<td class="pf-c-table__check" role="cell">
<input
type="checkbox"
.checked=${this.selectedElements.indexOf(item) >= 0}
@input=${(ev: InputEvent) => {
if ((ev.target as HTMLInputElement).checked) {
// Add item to selected
this.selectedElements.push(item);
} else {
// Get index of item and remove if selected
const index = this.selectedElements.indexOf(item);
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;
<label
><input
type="checkbox"
.checked=${this.selectedElements.indexOf(item) >= 0}
@input=${(ev: InputEvent) => {
if ((ev.target as HTMLInputElement).checked) {
// Add item to selected
this.selectedElements.push(item);
} else {
// Get index of item and remove if selected
const index = this.selectedElements.indexOf(item);
if (index <= -1) return;
this.selectedElements.splice(index, 1);
}
selectAllCheckbox.checked = false;
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>`
: html``}
${this.expandable