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 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import {
Component,
ElementRef,
EventEmitter,
HostBinding,
HostListener,
Input,
OnChanges,
OnDestroy,
Output,
SimpleChanges,
ViewChild,
} from '@angular/core';
import { FocusableElementOwner, Key } from '../../utils/util.types';
import {
AriaLiveReadDisposer,
AriaLiveReaderComponent,
} from '../aria-live-reader/aria-live-reader.component';
export type ConversationItemType = 'Hint' | 'Question' | 'Answer';
@Component({
selector: 'gc-conversation-item',
templateUrl: './conversation-item.component.html',
styleUrl: './conversation-item.component.css',
standalone: false,
})
export class ConversationItemComponent
implements FocusableElementOwner, OnChanges, OnDestroy
{
@Output()
public readonly onRateItem: EventEmitter<Key> = new EventEmitter<Key>();
@Output()
public readonly onFocus: EventEmitter<ConversationItemComponent> =
new EventEmitter<ConversationItemComponent>();
@Input()
public key?: Key;
@Input()
public type?: ConversationItemType;
@Input()
public text?: string;
@Input()
public time?: string;
@Input()
public rating?: string;
@Input()
public partial?: boolean;
@Input()
public keyboardFocusable?: boolean;
/** @ignore */
@ViewChild('ariaLiveReader')
private readonly ariaLiveReader?: AriaLiveReaderComponent;
/** @ignore */
@HostBinding('attr.tabindex')
protected get _tabIndex() {
return this.keyboardFocusable ? 0 : -1;
}
/** @ignore */
@HostBinding('class.gc-answer')
protected get _gcAnswer() {
return this.type === 'Answer';
}
/** @ignore */
@HostBinding('class.gc-hint')
protected get _gcHint() {
return this.type === 'Hint';
}
/** @ignore */
@HostBinding('class.gc-question')
protected get _gcQuestion() {
return this.type === 'Question';
}
/** @ignore */
private _reading?: AriaLiveReadDisposer;
constructor(private readonly host: ElementRef<HTMLElement>) {}
/** @ignore */
@HostListener('focus')
protected _handle_onfocus() {
this.onFocus.emit(this);
}
/** @ignore */
ngOnChanges(changes: SimpleChanges): void {
if ('partial' in changes) {
if (this.partial) {
this._impl_startReadState();
} else {
this._impl_stopReadState();
}
}
}
/** @ignore */
ngOnDestroy(): void {
this._reading?.();
}
public focusChild(): boolean {
this.host.nativeElement.focus();
return true;
}
/** @ignore */
protected _impl_isFocused() {
return document.activeElement === this.host.nativeElement;
}
/** @ignore */
protected _impl_triggerRating() {
this.onRateItem.emit(this.key);
}
/** @ignore */
private _impl_startReadState() {
const doRead = (r: AriaLiveReaderComponent) => {
this._reading = r.readText('Antwort wird generiert', 2000, 10000);
};
this.useTimeoutIfUninitialized(() => this.ariaLiveReader, doRead);
}
/** @ignore */
private useTimeoutIfUninitialized<V>(
val: () => V | undefined,
action: (val: V) => void,
) {
const v = val();
if (v) {
action(v);
} else {
setTimeout(() => {
const v2 = val();
if (v2) {
action(v2);
} else {
console.warn('useTimeoutIfUninitialized failed');
}
}, 0);
}
}
/** @ignore */
private _impl_stopReadState() {
if (this._reading) {
this._reading();
this._reading = undefined;
}
}
}
|