NotificationListItem.hbs

<li
	class="{{itemClasses}}"
	@focusin="{{_onfocusin}}"
	@keydown="{{_onkeydown}}"
	@keyup="{{_onkeyup}}"
	@click="{{_onclick}}"
	tabindex="{{forcedTabIndex}}"
	aria-labelledby="{{ariaLabelledBy}}"
	aria-level="2"
>

	<div class="{{contentClasses}}">

			{{#if hasImportance}}
				<ui5-tag id="{{_id}}-importance" class="ui5-nli-importance" design="Set2" color-scheme="2" wrapping-type="None">
					<ui5-icon name="high-priority" slot="icon"></ui5-icon>
					{{importanceText}}
				</ui5-tag>
			{{/if}}
		<div class="ui5-nli-title-text-wrapper">
			{{#if hasState}}
				<ui5-icon
					class="ui5-state-icon"
					name="{{statusIconName}}"
					show-tooltip="true"
					accessible-name={{stateText}}
					design="{{statusIconDesign}}">
				</ui5-icon>
			{{/if}}

			<div id="{{_id}}-title-text" class="ui5-nli-title-text" part="title-text">
				<span class="ui5-hidden-text">{{stateText}}</span>
				{{titleText}}
			</div>
		</div>

		{{#if isLoading}}
			<span id="{{_id}}-loading" class="ui5-hidden-text">{{loadingText}}</span>
		{{/if}}

		<span id="{{_id}}-read" class="ui5-hidden-text">{{readText}}</span>

		{{#if hasDesc}}
			<div id="{{_id}}-description" class="ui5-nli-description">
				<slot></slot>
			</div>
		{{/if}}

		<div id="{{_id}}-footer" class="ui5-nli-footer">
			{{#each footerItems}}
				<slot name="{{slotName}}"></slot>
				{{#if showDivider}}
					<div class="ui5-nli-footer-divider" aria-hidden="true">·</div>
				{{/if}}
			{{/each}}

			<ui5-link
				class="ui5-nli-footer-showMore"
				?hidden="{{hideShowMore}}"
				@ui5-click="{{_onShowMoreClick}}"
				wrapping-type="None"
				href="#" {{!--without href ENTER does not trigger click --}}
				showMore-btn
				accessible-name="{{moreLinkAccessibleName}}"
				accessible-role="Button"
				.accessibilityAttributes={{accInfoLink.accessibilityAttributes}}
			>
				{{showMoreText}}
			</ui5-link>
		</div>

	</div>

	<div class="ui5-nli-actions">
		{{#if showMenu}}
			<ui5-button
				icon="overflow"
				design="Transparent"
				@click="{{_onBtnMenuClick}}"
				class="ui5-nli-menu-btn"
				tooltip="{{menuBtnAccessibleName}}"
				.accessibilityAttributes={{accInfoButton.accessibilityAttributes}}
			></ui5-button>
		{{/if}}
		{{#if showClose}}
			<ui5-button
				icon="decline"
                class="ui5-nli-close-btn"
				design="Transparent"
				@click="{{_onBtnCloseClick}}"
				tooltip="{{closeBtnAccessibleName}}"
				accessible-name="{{closeBtnAccessibleName}}"
				close-btn
			></ui5-button>
		{{/if}}
	</div>

	<div class="ui5-nli-avatar" aria-hidden="true">
		<slot name="avatar"></slot>
	</div>

	<slot name="menu"></slot>

	{{#if loading}}
		<ui5-busy-indicator
				delay="{{loadingDelay}}"
				active
				class="ui5-nli-loading"
				data-sap-focus-ref
		></ui5-busy-indicator>
	{{/if}}
</li>