Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | 1x 80x 80x 80x 80x 80x 80x 80x 80x 80x 80x 80x 1x 1x 1x 1x 1x 2x 2x 2x 4x 4x 1x 1x | /**
* Copyright (c) Siemens 2016 - 2025
* SPDX-License-Identifier: MIT
*/
import { CdkDragHandle } from '@angular/cdk/drag-drop';
import { CdkOption } from '@angular/cdk/listbox';
import {
ChangeDetectionStrategy,
Component,
ElementRef,
HostListener,
inject,
input,
output,
viewChild
} from '@angular/core';
import {
addIcons,
elementHide,
elementLock,
elementMenu,
elementShow,
SiIconComponent
} from '@siemens/element-ng/icon';
import { Column } from '../si-column-selection-dialog.types';
@Component({
selector: 'si-column-selection-editor',
imports: [CdkDragHandle, SiIconComponent],
templateUrl: './si-column-selection-editor.component.html',
styles: `
.form-control {
cursor: text;
}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
class: 'd-block my-4 mx-1 rounded-2 elevation-1'
}
})
export class SiColumnSelectionEditorComponent {
readonly column = input.required<Column>();
readonly selected = input.required<boolean>();
readonly renameInputLabel = input.required<string>();
readonly columnVisibilityConfigurable = input.required<boolean>();
readonly titleChange = output();
readonly visibilityChange = output();
protected readonly cdkOption = inject(CdkOption);
protected editing = false;
private readonly title = viewChild.required<ElementRef<HTMLInputElement>>('title');
private readonly elementRef = inject<ElementRef<HTMLDivElement>>(ElementRef);
protected readonly icons = addIcons({
elementHide,
elementMenu,
elementLock,
elementShow
});
@HostListener('keydown.enter', ['$event'])
protected tryEdit(event: Event): void {
if (this.column().editable) {
event.stopPropagation();
this.startEdit();
}
}
protected updateTitle(value: string): void {
this.column().title = value;
this.titleChange.emit();
}
protected startEdit(): void {
if (this.column().editable) {
this.editing = true;
setTimeout(() => this.title().nativeElement.focus());
}
}
protected stopEdit(): void {
this.editing = false;
this.elementRef.nativeElement.focus();
}
protected toggleVisibility(): void {
this.cdkOption.toggle();
// manually toggling does not emit an event, so we have to fire one
this.visibilityChange.emit();
}
}
|