import { MarkdownToHtmlComponent } from '@allianz/taly-core/ui';
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { NxButtonModule } from '@allianz/ng-aquila/button';
import { NxIconModule } from '@allianz/ng-aquila/icon';
import { NxPopoverComponent, NxPopoverTriggerDirective } from '@allianz/ng-aquila/popover';
import type { DfInfoIconConfig } from './info-icon.model';
@Component({
selector: 'df-info-icon',
templateUrl: './info-icon.component.html',
styleUrls: ['./info-icon.component.scss'],
host: {
class: 'df-info-icon'
},
imports: [
NxIconModule,
NxButtonModule,
NxPopoverTriggerDirective,
NxPopoverComponent,
MarkdownToHtmlComponent
],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DfInfoIconComponent {
config = input<DfInfoIconConfig | undefined>();
}
<button
class="df-info-icon__button"
nxPlainButton
[nxPopoverTriggerFor]="popoverClick"
nxPopoverTrigger="click"
[nxPopoverDirection]="config()?.popoverDirection || 'bottom'"
[closeOnClickOutside]="true"
nxPopoverMaxWidth="400px"
type="button"
aria-label="click to open popover"
i18n-aria-label="@@form.field.info-icon.label"
data-testid="info-icon-button"
#infoIconButton
>
<nx-icon
name="info-circle-o"
aria-hidden="true"
size="s"
class="df-info-icon__button__icon"
></nx-icon>
<nx-icon
name="info-circle"
aria-hidden="true"
size="s"
class="df-info-icon__button__icon-hover"
></nx-icon>
</button>
<nx-popover #popoverClick>
@defer(on hover(infoIconButton)) {
<taly-markdown-to-html [markdown]="config()?.popoverText || ''" />
}
</nx-popover>
.df-info-icon {
&__button {
margin: 0px;
&__icon {
display: block;
}
&__icon-hover {
display: none;
}
&:hover {
.df-info-icon__button__icon {
display: none;
}
.df-info-icon__button__icon-hover {
display: block;
}
}
}
}
Legend
Html element with directive