@fundamental-ngx/core 0.35.2-rc.12 → 0.35.2-rc.13

package/fesm2015/fundamental-ngx-core-avatar.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, HostBinding, Output, ViewChild, HostListener, NgModule } from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Attribute, Input, HostBinding, Output, ViewChild, HostListener, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { __decorate, __metadata } from 'tslib';
@@ -14,9 +14,10 @@ const ALTER_ICON_OPTIONS = {
 };
 class AvatarComponent {
     /** @hidden */
-    constructor(_elementRef, _cdr) {
+    constructor(_elementRef, _cdr, hostTabindex) {
         this._elementRef = _elementRef;
         this._cdr = _cdr;
+        this.hostTabindex = hostTabindex;
         /** Id of the Avatar. */
         this.id = `fd-avatar-${avatarUniqueId++}`;
         /** Aria-label for Avatar. */
@@ -117,6 +118,9 @@ class AvatarComponent {
     }
     /** @hidden */
     get _tabindex() {
+        if (this.hostTabindex != null) {
+            return this.hostTabindex;
+        }
         return this.clickable ? 0 : null;
     }
     /** If a default placeholder should be displayed */
@@ -155,9 +159,9 @@ class AvatarComponent {
         return this._elementRef;
     }
     /** @hidden */
-    _onClick() {
+    _onClick(event) {
         if (this.clickable) {
-            this.avatarClicked.emit();
+            this.avatarClicked.emit(event);
         }
     }
     /** @hidden Get an abbreviate from the label or return null if not fit requirements */
@@ -256,8 +260,8 @@ class AvatarComponent {
         this.glyph = null;
     }
 }
-AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AvatarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: AvatarComponent, selector: "fd-avatar", inputs: { class: "class", id: "id", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", label: "label", size: "size", glyph: "glyph", zoomGlyph: "zoomGlyph", circle: "circle", transparent: "transparent", contain: "contain", placeholder: "placeholder", tile: "tile", border: "border", colorAccent: "colorAccent", random: "random", clickable: "clickable", backgroundImage: "backgroundImage", image: "image", alterIcon: "alterIcon", backupImage: "backupImage" }, outputs: { avatarClicked: "avatarClicked", zoomGlyphClicked: "zoomGlyphClicked" }, host: { listeners: { "click": "_onClick()", "keyup.enter": "_onClick()", "keyup.space": "_onClick()" }, properties: { "attr.tabindex": "_tabindex", "attr.id": "this.id", "attr.aria-label": "this.ariaLabel", "attr.aria-labelledby": "this.ariaLabelledby", "style.background-image": "this.bgImage", "attr.role": "this.role" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "{{ abbreviate }}\n\n<i\n    *ngIf=\"zoomGlyph\"\n    role=\"presentation\"\n    class=\"fd-avatar__zoom-icon\"\n    tabindex=\"0\"\n    [class]=\"zoomGlyph ? 'sap-icon--' + zoomGlyph : ''\"\n    (click)=\"zoomGlyphClicked.next()\"\n    (keyup.space)=\"zoomGlyphClicked.next()\"\n    (keyup.enter)=\"zoomGlyphClicked.next()\"\n>\n</i>\n\n<i\n    *ngIf=\"glyph || showDefault\"\n    class=\"fd-avatar__icon\"\n    role=\"presentation\"\n    [class]=\"glyph ? 'sap-icon--' + glyph : 'sap-icon--person-placeholder'\"\n>\n</i>\n\n<div #content style=\"display: none\">\n    <ng-content></ng-content>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.1-rc.1\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-avatar+((--circle), (--thumbnail), (--xxs|--xs|--s|--m|--l|--xl|--xxl), (--accent-color-{1-10}))\n  .fd-avatar__icon\n  .fd-avatar__zoom-icon\n*/.fd-avatar{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;border:var(--fdAvatar_Border);color:var(--sapContent_ContrastTextColor);background-color:var(--fdAvatar_BackgroundColor);display:inline-block;position:relative;vertical-align:middle;text-align:center;background-repeat:no-repeat;background-size:cover;background-position:50%;border-radius:var(--sapElement_BorderCornerRadius)}.fd-avatar:before,.fd-avatar:after{box-sizing:inherit;font-size:inherit}.fd-avatar:focus,.fd-avatar.is-focus{outline-width:var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle)}.fd-avatar[tabindex=\"0\"]{cursor:pointer}.fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar__zoom-icon[class*=sap-icon]{color:inherit;background:inherit;font-size:inherit;border-radius:inherit;line-height:1;display:flex;justify-content:center;align-items:center;position:absolute;color:var(--sapButton_Emphasized_TextColor);background-color:var(--sapButton_Emphasized_Background);border-radius:50%;border:.0625rem solid var(--sapButton_Emphasized_BorderColor)}.fd-avatar__icon [class*=sap-icon],.fd-avatar__icon[class*=sap-icon]{color:inherit;background:inherit;font-size:inherit;border-radius:inherit;line-height:1;display:flex;justify-content:center;align-items:center;align-content:center}.fd-avatar--circle{border-radius:50%}.fd-avatar--circle .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--circle .fd-avatar__zoom-icon[class*=sap-icon]{bottom:0;right:0}[dir=rtl] .fd-avatar--circle .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--circle .fd-avatar__zoom-icon [class*=sap-icon][dir=rtl],[dir=rtl] .fd-avatar--circle .fd-avatar__zoom-icon[class*=sap-icon],.fd-avatar--circle .fd-avatar__zoom-icon[class*=sap-icon][dir=rtl]{right:auto;left:0}.fd-avatar--transparent{background-color:var(--fdAvatar-Transparent_BackgroundColor);color:var(--sapContent_IconColor)}.fd-avatar--background-contain{background-size:contain}.fd-avatar--placeholder{background-color:var(--sapContent_ImagePlaceholderBackground)}.fd-avatar--tile{background-color:var(--fdAvatar_Tile_BackgroundColor)}.fd-avatar--border{border:.0625rem solid var(--sapGroup_ContentBorderColor)}.fd-avatar--accent-color-1{background-color:var(--fdAvatar_Accent_Color_1);color:var(--fdAvatar_Accent_Color_1_Text);border:var(--fdAvatar_Accent_Color_1_Border)}.fd-avatar--accent-color-2{background-color:var(--fdAvatar_Accent_Color_2);color:var(--fdAvatar_Accent_Color_2_Text);border:var(--fdAvatar_Accent_Color_2_Border)}.fd-avatar--accent-color-3{background-color:var(--fdAvatar_Accent_Color_3);color:var(--fdAvatar_Accent_Color_3_Text);border:var(--fdAvatar_Accent_Color_3_Border)}.fd-avatar--accent-color-4{background-color:var(--fdAvatar_Accent_Color_4);color:var(--fdAvatar_Accent_Color_4_Text);border:var(--fdAvatar_Accent_Color_4_Border)}.fd-avatar--accent-color-5{background-color:var(--fdAvatar_Accent_Color_5);color:var(--fdAvatar_Accent_Color_5_Text);border:var(--fdAvatar_Accent_Color_5_Border)}.fd-avatar--accent-color-6{background-color:var(--fdAvatar_Accent_Color_6);color:var(--fdAvatar_Accent_Color_6_Text);border:var(--fdAvatar_Accent_Color_6_Border)}.fd-avatar--accent-color-7{background-color:var(--fdAvatar_Accent_Color_7);color:var(--fdAvatar_Accent_Color_7_Text);border:var(--fdAvatar_Accent_Color_7_Border)}.fd-avatar--accent-color-8{background-color:var(--fdAvatar_Accent_Color_8);color:var(--fdAvatar_Accent_Color_8_Text);border:var(--fdAvatar_Accent_Color_8_Border)}.fd-avatar--accent-color-9{background-color:var(--fdAvatar_Accent_Color_9);color:var(--fdAvatar_Accent_Color_9_Text);border:var(--fdAvatar_Accent_Color_9_Border)}.fd-avatar--accent-color-10{background-color:var(--fdAvatar_Accent_Color_10);color:var(--fdAvatar_Accent_Color_10_Text);border:var(--fdAvatar_Accent_Color_10_Border)}.fd-avatar--xs{padding:0;margin:0;width:2rem;height:2rem;max-width:2rem;max-height:2rem;min-width:2rem;min-height:2rem;font-size:1rem;font-stretch:condensed;display:inline-flex;align-items:center;justify-content:center}.fd-avatar--xs .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xs .fd-avatar__zoom-icon[class*=sap-icon]{font-size:.75rem;width:1.125rem;height:1.125rem}.fd-avatar--xs:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xs:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon]{bottom:-.125rem;right:-.125rem}[dir=rtl] .fd-avatar--xs:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xs:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon][dir=rtl],[dir=rtl] .fd-avatar--xs:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon],.fd-avatar--xs:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon][dir=rtl]{right:auto;left:-.125rem}.fd-avatar--s{padding:0;margin:0;width:3rem;height:3rem;max-width:3rem;max-height:3rem;min-width:3rem;min-height:3rem;font-size:1.125rem;font-stretch:condensed;display:inline-flex;align-items:center;justify-content:center}.fd-avatar--s .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--s .fd-avatar__zoom-icon[class*=sap-icon]{font-size:.75rem;width:1.125rem;height:1.125rem}.fd-avatar--s:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--s:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon]{bottom:-.125rem;right:-.125rem}[dir=rtl] .fd-avatar--s:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--s:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon][dir=rtl],[dir=rtl] .fd-avatar--s:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon],.fd-avatar--s:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon][dir=rtl]{right:auto;left:-.125rem}.fd-avatar--m{padding:0;margin:0;width:4rem;height:4rem;max-width:4rem;max-height:4rem;min-width:4rem;min-height:4rem;font-size:1.5rem;font-stretch:normal;display:inline-flex;align-items:center;justify-content:center}.fd-avatar--m .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--m .fd-avatar__zoom-icon[class*=sap-icon]{font-size:.75rem;width:1.125rem;height:1.125rem}.fd-avatar--m:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--m:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon]{bottom:-.125rem;right:-.125rem}[dir=rtl] .fd-avatar--m:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--m:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon][dir=rtl],[dir=rtl] .fd-avatar--m:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon],.fd-avatar--m:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon][dir=rtl]{right:auto;left:-.125rem}.fd-avatar--l{padding:0;margin:0;width:5rem;height:5rem;max-width:5rem;max-height:5rem;min-width:5rem;min-height:5rem;font-size:2.25rem;font-stretch:normal;display:inline-flex;align-items:center;justify-content:center}.fd-avatar--l .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--l .fd-avatar__zoom-icon[class*=sap-icon]{font-size:.875rem;width:1.25rem;height:1.25rem}.fd-avatar--l:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--l:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon]{bottom:-.1875rem;right:-.1875rem}[dir=rtl] .fd-avatar--l:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--l:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon][dir=rtl],[dir=rtl] .fd-avatar--l:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon],.fd-avatar--l:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon][dir=rtl]{right:auto;left:-.1875rem}.fd-avatar--xl{padding:0;margin:0;width:7rem;height:7rem;max-width:7rem;max-height:7rem;min-width:7rem;min-height:7rem;font-size:3rem;font-stretch:normal;display:inline-flex;align-items:center;justify-content:center}.fd-avatar--xl .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xl .fd-avatar__zoom-icon[class*=sap-icon]{font-size:1rem;width:1.75rem;height:1.75rem}.fd-avatar--xl:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xl:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon]{bottom:-.25rem;right:-.25rem}[dir=rtl] .fd-avatar--xl:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xl:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon][dir=rtl],[dir=rtl] .fd-avatar--xl:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon],.fd-avatar--xl:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon][dir=rtl]{right:auto;left:-.25rem}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AvatarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
+AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: AvatarComponent, selector: "fd-avatar", inputs: { class: "class", id: "id", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", label: "label", size: "size", glyph: "glyph", zoomGlyph: "zoomGlyph", circle: "circle", transparent: "transparent", contain: "contain", placeholder: "placeholder", tile: "tile", border: "border", colorAccent: "colorAccent", random: "random", clickable: "clickable", backgroundImage: "backgroundImage", image: "image", alterIcon: "alterIcon", backupImage: "backupImage" }, outputs: { avatarClicked: "avatarClicked", zoomGlyphClicked: "zoomGlyphClicked" }, host: { listeners: { "click": "_onClick($event)", "keydown.enter": "_onClick($event)", "keydown.space": "_onClick($event)" }, properties: { "attr.tabindex": "_tabindex", "attr.id": "this.id", "attr.aria-label": "this.ariaLabel", "attr.alt": "this.ariaLabel", "attr.aria-labelledby": "this.ariaLabelledby", "style.background-image": "this.bgImage", "attr.role": "this.role" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "{{ abbreviate }}\n\n<i\n    *ngIf=\"zoomGlyph\"\n    role=\"presentation\"\n    class=\"fd-avatar__zoom-icon\"\n    tabindex=\"0\"\n    [class]=\"zoomGlyph ? 'sap-icon--' + zoomGlyph : ''\"\n    (click)=\"zoomGlyphClicked.next()\"\n    (keyup.space)=\"zoomGlyphClicked.next()\"\n    (keyup.enter)=\"zoomGlyphClicked.next()\"\n>\n</i>\n\n<i\n    *ngIf=\"glyph || showDefault\"\n    class=\"fd-avatar__icon\"\n    role=\"presentation\"\n    [class]=\"glyph ? 'sap-icon--' + glyph : 'sap-icon--person-placeholder'\"\n>\n</i>\n\n<div #content style=\"display: none\">\n    <ng-content></ng-content>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.1-rc.1\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-avatar+((--circle), (--thumbnail), (--xxs|--xs|--s|--m|--l|--xl|--xxl), (--accent-color-{1-10}))\n  .fd-avatar__icon\n  .fd-avatar__zoom-icon\n*/.fd-avatar{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;border:var(--fdAvatar_Border);color:var(--sapContent_ContrastTextColor);background-color:var(--fdAvatar_BackgroundColor);display:inline-block;position:relative;vertical-align:middle;text-align:center;background-repeat:no-repeat;background-size:cover;background-position:50%;border-radius:var(--sapElement_BorderCornerRadius)}.fd-avatar:before,.fd-avatar:after{box-sizing:inherit;font-size:inherit}.fd-avatar:focus,.fd-avatar.is-focus{outline-width:var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle)}.fd-avatar[tabindex=\"0\"]{cursor:pointer}.fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar__zoom-icon[class*=sap-icon]{color:inherit;background:inherit;font-size:inherit;border-radius:inherit;line-height:1;display:flex;justify-content:center;align-items:center;position:absolute;color:var(--sapButton_Emphasized_TextColor);background-color:var(--sapButton_Emphasized_Background);border-radius:50%;border:.0625rem solid var(--sapButton_Emphasized_BorderColor)}.fd-avatar__icon [class*=sap-icon],.fd-avatar__icon[class*=sap-icon]{color:inherit;background:inherit;font-size:inherit;border-radius:inherit;line-height:1;display:flex;justify-content:center;align-items:center;align-content:center}.fd-avatar--circle{border-radius:50%}.fd-avatar--circle .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--circle .fd-avatar__zoom-icon[class*=sap-icon]{bottom:0;right:0}[dir=rtl] .fd-avatar--circle .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--circle .fd-avatar__zoom-icon [class*=sap-icon][dir=rtl],[dir=rtl] .fd-avatar--circle .fd-avatar__zoom-icon[class*=sap-icon],.fd-avatar--circle .fd-avatar__zoom-icon[class*=sap-icon][dir=rtl]{right:auto;left:0}.fd-avatar--transparent{background-color:var(--fdAvatar-Transparent_BackgroundColor);color:var(--sapContent_IconColor)}.fd-avatar--background-contain{background-size:contain}.fd-avatar--placeholder{background-color:var(--sapContent_ImagePlaceholderBackground)}.fd-avatar--tile{background-color:var(--fdAvatar_Tile_BackgroundColor)}.fd-avatar--border{border:.0625rem solid var(--sapGroup_ContentBorderColor)}.fd-avatar--accent-color-1{background-color:var(--fdAvatar_Accent_Color_1);color:var(--fdAvatar_Accent_Color_1_Text);border:var(--fdAvatar_Accent_Color_1_Border)}.fd-avatar--accent-color-2{background-color:var(--fdAvatar_Accent_Color_2);color:var(--fdAvatar_Accent_Color_2_Text);border:var(--fdAvatar_Accent_Color_2_Border)}.fd-avatar--accent-color-3{background-color:var(--fdAvatar_Accent_Color_3);color:var(--fdAvatar_Accent_Color_3_Text);border:var(--fdAvatar_Accent_Color_3_Border)}.fd-avatar--accent-color-4{background-color:var(--fdAvatar_Accent_Color_4);color:var(--fdAvatar_Accent_Color_4_Text);border:var(--fdAvatar_Accent_Color_4_Border)}.fd-avatar--accent-color-5{background-color:var(--fdAvatar_Accent_Color_5);color:var(--fdAvatar_Accent_Color_5_Text);border:var(--fdAvatar_Accent_Color_5_Border)}.fd-avatar--accent-color-6{background-color:var(--fdAvatar_Accent_Color_6);color:var(--fdAvatar_Accent_Color_6_Text);border:var(--fdAvatar_Accent_Color_6_Border)}.fd-avatar--accent-color-7{background-color:var(--fdAvatar_Accent_Color_7);color:var(--fdAvatar_Accent_Color_7_Text);border:var(--fdAvatar_Accent_Color_7_Border)}.fd-avatar--accent-color-8{background-color:var(--fdAvatar_Accent_Color_8);color:var(--fdAvatar_Accent_Color_8_Text);border:var(--fdAvatar_Accent_Color_8_Border)}.fd-avatar--accent-color-9{background-color:var(--fdAvatar_Accent_Color_9);color:var(--fdAvatar_Accent_Color_9_Text);border:var(--fdAvatar_Accent_Color_9_Border)}.fd-avatar--accent-color-10{background-color:var(--fdAvatar_Accent_Color_10);color:var(--fdAvatar_Accent_Color_10_Text);border:var(--fdAvatar_Accent_Color_10_Border)}.fd-avatar--xs{padding:0;margin:0;width:2rem;height:2rem;max-width:2rem;max-height:2rem;min-width:2rem;min-height:2rem;font-size:1rem;font-stretch:condensed;display:inline-flex;align-items:center;justify-content:center}.fd-avatar--xs .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xs .fd-avatar__zoom-icon[class*=sap-icon]{font-size:.75rem;width:1.125rem;height:1.125rem}.fd-avatar--xs:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xs:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon]{bottom:-.125rem;right:-.125rem}[dir=rtl] .fd-avatar--xs:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xs:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon][dir=rtl],[dir=rtl] .fd-avatar--xs:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon],.fd-avatar--xs:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon][dir=rtl]{right:auto;left:-.125rem}.fd-avatar--s{padding:0;margin:0;width:3rem;height:3rem;max-width:3rem;max-height:3rem;min-width:3rem;min-height:3rem;font-size:1.125rem;font-stretch:condensed;display:inline-flex;align-items:center;justify-content:center}.fd-avatar--s .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--s .fd-avatar__zoom-icon[class*=sap-icon]{font-size:.75rem;width:1.125rem;height:1.125rem}.fd-avatar--s:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--s:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon]{bottom:-.125rem;right:-.125rem}[dir=rtl] .fd-avatar--s:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--s:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon][dir=rtl],[dir=rtl] .fd-avatar--s:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon],.fd-avatar--s:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon][dir=rtl]{right:auto;left:-.125rem}.fd-avatar--m{padding:0;margin:0;width:4rem;height:4rem;max-width:4rem;max-height:4rem;min-width:4rem;min-height:4rem;font-size:1.5rem;font-stretch:normal;display:inline-flex;align-items:center;justify-content:center}.fd-avatar--m .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--m .fd-avatar__zoom-icon[class*=sap-icon]{font-size:.75rem;width:1.125rem;height:1.125rem}.fd-avatar--m:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--m:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon]{bottom:-.125rem;right:-.125rem}[dir=rtl] .fd-avatar--m:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--m:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon][dir=rtl],[dir=rtl] .fd-avatar--m:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon],.fd-avatar--m:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon][dir=rtl]{right:auto;left:-.125rem}.fd-avatar--l{padding:0;margin:0;width:5rem;height:5rem;max-width:5rem;max-height:5rem;min-width:5rem;min-height:5rem;font-size:2.25rem;font-stretch:normal;display:inline-flex;align-items:center;justify-content:center}.fd-avatar--l .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--l .fd-avatar__zoom-icon[class*=sap-icon]{font-size:.875rem;width:1.25rem;height:1.25rem}.fd-avatar--l:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--l:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon]{bottom:-.1875rem;right:-.1875rem}[dir=rtl] .fd-avatar--l:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--l:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon][dir=rtl],[dir=rtl] .fd-avatar--l:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon],.fd-avatar--l:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon][dir=rtl]{right:auto;left:-.1875rem}.fd-avatar--xl{padding:0;margin:0;width:7rem;height:7rem;max-width:7rem;max-height:7rem;min-width:7rem;min-height:7rem;font-size:3rem;font-stretch:normal;display:inline-flex;align-items:center;justify-content:center}.fd-avatar--xl .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xl .fd-avatar__zoom-icon[class*=sap-icon]{font-size:1rem;width:1.75rem;height:1.75rem}.fd-avatar--xl:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xl:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon]{bottom:-.25rem;right:-.25rem}[dir=rtl] .fd-avatar--xl:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xl:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon][dir=rtl],[dir=rtl] .fd-avatar--xl:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon],.fd-avatar--xl:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon][dir=rtl]{right:auto;left:-.25rem}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),
@@ -269,7 +273,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
             args: [{ selector: 'fd-avatar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.tabindex]': '_tabindex'
                     }, template: "{{ abbreviate }}\n\n<i\n    *ngIf=\"zoomGlyph\"\n    role=\"presentation\"\n    class=\"fd-avatar__zoom-icon\"\n    tabindex=\"0\"\n    [class]=\"zoomGlyph ? 'sap-icon--' + zoomGlyph : ''\"\n    (click)=\"zoomGlyphClicked.next()\"\n    (keyup.space)=\"zoomGlyphClicked.next()\"\n    (keyup.enter)=\"zoomGlyphClicked.next()\"\n>\n</i>\n\n<i\n    *ngIf=\"glyph || showDefault\"\n    class=\"fd-avatar__icon\"\n    role=\"presentation\"\n    [class]=\"glyph ? 'sap-icon--' + glyph : 'sap-icon--person-placeholder'\"\n>\n</i>\n\n<div #content style=\"display: none\">\n    <ng-content></ng-content>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.1-rc.1\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-avatar+((--circle), (--thumbnail), (--xxs|--xs|--s|--m|--l|--xl|--xxl), (--accent-color-{1-10}))\n  .fd-avatar__icon\n  .fd-avatar__zoom-icon\n*/.fd-avatar{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;border:var(--fdAvatar_Border);color:var(--sapContent_ContrastTextColor);background-color:var(--fdAvatar_BackgroundColor);display:inline-block;position:relative;vertical-align:middle;text-align:center;background-repeat:no-repeat;background-size:cover;background-position:50%;border-radius:var(--sapElement_BorderCornerRadius)}.fd-avatar:before,.fd-avatar:after{box-sizing:inherit;font-size:inherit}.fd-avatar:focus,.fd-avatar.is-focus{outline-width:var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle)}.fd-avatar[tabindex=\"0\"]{cursor:pointer}.fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar__zoom-icon[class*=sap-icon]{color:inherit;background:inherit;font-size:inherit;border-radius:inherit;line-height:1;display:flex;justify-content:center;align-items:center;position:absolute;color:var(--sapButton_Emphasized_TextColor);background-color:var(--sapButton_Emphasized_Background);border-radius:50%;border:.0625rem solid var(--sapButton_Emphasized_BorderColor)}.fd-avatar__icon [class*=sap-icon],.fd-avatar__icon[class*=sap-icon]{color:inherit;background:inherit;font-size:inherit;border-radius:inherit;line-height:1;display:flex;justify-content:center;align-items:center;align-content:center}.fd-avatar--circle{border-radius:50%}.fd-avatar--circle .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--circle .fd-avatar__zoom-icon[class*=sap-icon]{bottom:0;right:0}[dir=rtl] .fd-avatar--circle .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--circle .fd-avatar__zoom-icon [class*=sap-icon][dir=rtl],[dir=rtl] .fd-avatar--circle .fd-avatar__zoom-icon[class*=sap-icon],.fd-avatar--circle .fd-avatar__zoom-icon[class*=sap-icon][dir=rtl]{right:auto;left:0}.fd-avatar--transparent{background-color:var(--fdAvatar-Transparent_BackgroundColor);color:var(--sapContent_IconColor)}.fd-avatar--background-contain{background-size:contain}.fd-avatar--placeholder{background-color:var(--sapContent_ImagePlaceholderBackground)}.fd-avatar--tile{background-color:var(--fdAvatar_Tile_BackgroundColor)}.fd-avatar--border{border:.0625rem solid var(--sapGroup_ContentBorderColor)}.fd-avatar--accent-color-1{background-color:var(--fdAvatar_Accent_Color_1);color:var(--fdAvatar_Accent_Color_1_Text);border:var(--fdAvatar_Accent_Color_1_Border)}.fd-avatar--accent-color-2{background-color:var(--fdAvatar_Accent_Color_2);color:var(--fdAvatar_Accent_Color_2_Text);border:var(--fdAvatar_Accent_Color_2_Border)}.fd-avatar--accent-color-3{background-color:var(--fdAvatar_Accent_Color_3);color:var(--fdAvatar_Accent_Color_3_Text);border:var(--fdAvatar_Accent_Color_3_Border)}.fd-avatar--accent-color-4{background-color:var(--fdAvatar_Accent_Color_4);color:var(--fdAvatar_Accent_Color_4_Text);border:var(--fdAvatar_Accent_Color_4_Border)}.fd-avatar--accent-color-5{background-color:var(--fdAvatar_Accent_Color_5);color:var(--fdAvatar_Accent_Color_5_Text);border:var(--fdAvatar_Accent_Color_5_Border)}.fd-avatar--accent-color-6{background-color:var(--fdAvatar_Accent_Color_6);color:var(--fdAvatar_Accent_Color_6_Text);border:var(--fdAvatar_Accent_Color_6_Border)}.fd-avatar--accent-color-7{background-color:var(--fdAvatar_Accent_Color_7);color:var(--fdAvatar_Accent_Color_7_Text);border:var(--fdAvatar_Accent_Color_7_Border)}.fd-avatar--accent-color-8{background-color:var(--fdAvatar_Accent_Color_8);color:var(--fdAvatar_Accent_Color_8_Text);border:var(--fdAvatar_Accent_Color_8_Border)}.fd-avatar--accent-color-9{background-color:var(--fdAvatar_Accent_Color_9);color:var(--fdAvatar_Accent_Color_9_Text);border:var(--fdAvatar_Accent_Color_9_Border)}.fd-avatar--accent-color-10{background-color:var(--fdAvatar_Accent_Color_10);color:var(--fdAvatar_Accent_Color_10_Text);border:var(--fdAvatar_Accent_Color_10_Border)}.fd-avatar--xs{padding:0;margin:0;width:2rem;height:2rem;max-width:2rem;max-height:2rem;min-width:2rem;min-height:2rem;font-size:1rem;font-stretch:condensed;display:inline-flex;align-items:center;justify-content:center}.fd-avatar--xs .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xs .fd-avatar__zoom-icon[class*=sap-icon]{font-size:.75rem;width:1.125rem;height:1.125rem}.fd-avatar--xs:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xs:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon]{bottom:-.125rem;right:-.125rem}[dir=rtl] .fd-avatar--xs:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xs:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon][dir=rtl],[dir=rtl] .fd-avatar--xs:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon],.fd-avatar--xs:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon][dir=rtl]{right:auto;left:-.125rem}.fd-avatar--s{padding:0;margin:0;width:3rem;height:3rem;max-width:3rem;max-height:3rem;min-width:3rem;min-height:3rem;font-size:1.125rem;font-stretch:condensed;display:inline-flex;align-items:center;justify-content:center}.fd-avatar--s .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--s .fd-avatar__zoom-icon[class*=sap-icon]{font-size:.75rem;width:1.125rem;height:1.125rem}.fd-avatar--s:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--s:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon]{bottom:-.125rem;right:-.125rem}[dir=rtl] .fd-avatar--s:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--s:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon][dir=rtl],[dir=rtl] .fd-avatar--s:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon],.fd-avatar--s:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon][dir=rtl]{right:auto;left:-.125rem}.fd-avatar--m{padding:0;margin:0;width:4rem;height:4rem;max-width:4rem;max-height:4rem;min-width:4rem;min-height:4rem;font-size:1.5rem;font-stretch:normal;display:inline-flex;align-items:center;justify-content:center}.fd-avatar--m .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--m .fd-avatar__zoom-icon[class*=sap-icon]{font-size:.75rem;width:1.125rem;height:1.125rem}.fd-avatar--m:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--m:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon]{bottom:-.125rem;right:-.125rem}[dir=rtl] .fd-avatar--m:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--m:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon][dir=rtl],[dir=rtl] .fd-avatar--m:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon],.fd-avatar--m:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon][dir=rtl]{right:auto;left:-.125rem}.fd-avatar--l{padding:0;margin:0;width:5rem;height:5rem;max-width:5rem;max-height:5rem;min-width:5rem;min-height:5rem;font-size:2.25rem;font-stretch:normal;display:inline-flex;align-items:center;justify-content:center}.fd-avatar--l .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--l .fd-avatar__zoom-icon[class*=sap-icon]{font-size:.875rem;width:1.25rem;height:1.25rem}.fd-avatar--l:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--l:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon]{bottom:-.1875rem;right:-.1875rem}[dir=rtl] .fd-avatar--l:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--l:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon][dir=rtl],[dir=rtl] .fd-avatar--l:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon],.fd-avatar--l:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon][dir=rtl]{right:auto;left:-.1875rem}.fd-avatar--xl{padding:0;margin:0;width:7rem;height:7rem;max-width:7rem;max-height:7rem;min-width:7rem;min-height:7rem;font-size:3rem;font-stretch:normal;display:inline-flex;align-items:center;justify-content:center}.fd-avatar--xl .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xl .fd-avatar__zoom-icon[class*=sap-icon]{font-size:1rem;width:1.75rem;height:1.75rem}.fd-avatar--xl:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xl:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon]{bottom:-.25rem;right:-.25rem}[dir=rtl] .fd-avatar--xl:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon],.fd-avatar--xl:not(.fd-avatar--circle) .fd-avatar__zoom-icon [class*=sap-icon][dir=rtl],[dir=rtl] .fd-avatar--xl:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon],.fd-avatar--xl:not(.fd-avatar--circle) .fd-avatar__zoom-icon[class*=sap-icon][dir=rtl]{right:auto;left:-.25rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { class: [{
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                        type: Attribute,
+                        args: ['tabindex']
+                    }] }];
+    }, propDecorators: { class: [{
                 type: Input
             }], id: [{
                 type: Input
@@ -281,6 +290,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
             }, {
                 type: HostBinding,
                 args: ['attr.aria-label']
+            }, {
+                type: HostBinding,
+                args: ['attr.alt']
             }], ariaLabelledby: [{
                 type: Input
             }, {
@@ -340,13 +352,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
          */
         buildComponentCssClass: [], _onClick: [{
                 type: HostListener,
-                args: ['click']
+                args: ['click', ['$event']]
             }, {
                 type: HostListener,
-                args: ['keyup.enter']
+                args: ['keydown.enter', ['$event']]
             }, {
                 type: HostListener,
-                args: ['keyup.space']
+                args: ['keydown.space', ['$event']]
             }] } });
 
 class AvatarModule {

package/fesm2015/fundamental-ngx-core-avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-core-avatar.mjs","sources":["../../../../libs/core/src/lib/avatar/avatar.component.ts","../../../../libs/core/src/lib/avatar/avatar.component.html","../../../../libs/core/src/lib/avatar/avatar.module.ts","../../../../libs/core/src/lib/avatar/fundamental-ngx-core-avatar.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    EventEmitter,\n    HostBinding,\n    HostListener,\n    Input,\n    OnChanges,\n    OnInit,\n    Output,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport {\n    ANY_LANGUAGE_LETTERS_REGEX,\n    ColorAccent,\n    Size,\n    applyCssClass,\n    getRandomColorAccent,\n    CssClassBuilder\n} from '@fundamental-ngx/core/utils';\nimport { Nullable } from '@fundamental-ngx/core/shared';\n\nlet avatarUniqueId = 0;\n\nconst ALTER_ICON_OPTIONS = {\n    CONTENT: 'content',\n    ALT: 'alt',\n    BACKUP: 'backup',\n    DEFAULT_ICON: 'default-icon'\n};\n\n@Component({\n    selector: 'fd-avatar',\n    templateUrl: './avatar.component.html',\n    styleUrls: ['./avatar.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        '[attr.tabindex]': '_tabindex'\n    }\n})\nexport class AvatarComponent implements OnChanges, OnInit, CssClassBuilder {\n    /** User's custom classes */\n    @Input()\n    class: string;\n\n    /** Id of the Avatar. */\n    @Input()\n    @HostBinding('attr.id')\n    id = `fd-avatar-${avatarUniqueId++}`;\n\n    /** Aria-label for Avatar. */\n    @Input()\n    @HostBinding('attr.aria-label')\n    ariaLabel: Nullable<string> = null;\n\n    /** Aria-Labelledby for element describing Avatar. */\n    @Input()\n    @HostBinding('attr.aria-labelledby')\n    ariaLabelledby: Nullable<string> = null;\n\n    /** Localized text for label */\n    @Input()\n    set label(value: Nullable<string>) {\n        this.ariaLabel = value || null;\n        this.abbreviate = this._getAbbreviate(value);\n    }\n\n    /** The size of the Avatar. Options include: *xs*, *s*, *m*, *l* and *xl*. */\n    @Input() size: Size = 'l';\n\n    /** The glyph name. */\n    @Input() glyph: Nullable<string> = null;\n\n    /** The glyph name for zoom icon. */\n    @Input() zoomGlyph: Nullable<string> = null;\n\n    /** Whether to apply a circle style to the Avatar. */\n    @Input() circle = false;\n\n    /** Whether to apply a transparent style to the Avatar. */\n    @Input() transparent = false;\n\n    /** Whether to apply background size contain style to the Avatar */\n    @Input() contain = false;\n\n    /** Whether to apply a placeholder background style to the Avatar. */\n    @Input() placeholder = false;\n\n    /** Whether to apply a tile background style to the Avatar. */\n    @Input() tile = false;\n\n    /** Whether to apply a border to the Avatar. */\n    @Input() border = false;\n\n    /** A number from 1 to 10 representing the background color of the Avatar. */\n    @Input() colorAccent: Nullable<ColorAccent> = null;\n\n    /** Whether to apply random background color to the Avatar. */\n    @Input() random = false;\n\n    /** Whether component should be focusable & clicable */\n    @Input() clickable = false;\n\n    /**\n     * @deprecated\n     * Deprecated according to Rename `backgroundImage` to `image`\n     * */\n    /** Background image url. */\n    @Input()\n    set backgroundImage(value: string) {\n        this._setImage(value);\n    }\n\n    /** Background image resource: url or base64. */\n    @Input()\n    set image(value: Nullable<string>) {\n        this._setImage(value);\n    }\n    get image(): Nullable<string> {\n        return this._image;\n    }\n\n    /** Backup options to use when image hasn't been loaded successfully.\n     * Options separated with \"|\" symbol.\n     * Possible options: content, alt, backup, default-icon\n     */\n    @Input()\n    set alterIcon(value: Nullable<string>) {\n        this._alterIcon = value;\n    }\n    get alterIcon(): Nullable<string> {\n        return this._alterIcon;\n    }\n\n    /** Backup image to load when image hasn't been loaded successfully.\n     * Only applicable when using alterIcon input property.\n     */\n    @Input()\n    set backupImage(value: Nullable<string>) {\n        this._backupImage = value;\n    }\n    get backupImage(): Nullable<string> {\n        return this._backupImage;\n    }\n\n    /** Event emitted when avatar clicked. Only fires if clickable input property set to true. */\n    @Output() avatarClicked = new EventEmitter<void>();\n\n    /** Event emitted when zoom icon clicked. Only fires if zoomGlyph input property is set. */\n    @Output() zoomGlyphClicked = new EventEmitter<void>();\n\n    /** @hidden */\n    @HostBinding('style.background-image')\n    get bgImage(): Nullable<string> {\n        return this._bgImage;\n    }\n\n    /** @hidden */\n    @HostBinding('attr.role')\n    get role(): string {\n        return this.zoomGlyph ? 'button' : 'img';\n    }\n\n    /** @hidden */\n    @ViewChild('content')\n    set content(value: ElementRef) {\n        this._content = value;\n    }\n\n    /** @hidden */\n    abbreviate: Nullable<string> = null;\n\n    /** @hidden */\n    private _image: Nullable<string> = null;\n\n    /** @hidden */\n    private _alterIcon: Nullable<string> = null;\n\n    /** @hidden */\n    private _content: Nullable<ElementRef> = null;\n\n    /** @hidden */\n    private _backupImage: Nullable<string> = null;\n\n    /** @hidden */\n    private _bgImage: Nullable<string> = null;\n\n    /** @hidden */\n    get _tabindex(): number | null {\n        return this.clickable ? 0 : null;\n    }\n\n    /** If a default placeholder should be displayed */\n    get showDefault(): boolean {\n        return !this.abbreviate && !this._image && !this.glyph;\n    }\n\n    /** @hidden */\n    constructor(private _elementRef: ElementRef, private _cdr: ChangeDetectorRef) {}\n\n    /** @hidden */\n    ngOnInit(): void {\n        this.buildComponentCssClass();\n    }\n\n    /** @hidden */\n    ngOnChanges(): void {\n        this.buildComponentCssClass();\n    }\n\n    @applyCssClass\n    /** CssClassBuilder interface implementation\n     * function must return single string\n     * function is responsible for order which css classes are applied\n     */\n    buildComponentCssClass(): string[] {\n        return [\n            'fd-avatar',\n            this.size ? `fd-avatar--${this.size}` : '',\n            this.colorAccent && !this.random ? `fd-avatar--accent-color-${this.colorAccent}` : '',\n            this.random ? `fd-avatar--accent-color-${getRandomColorAccent()}` : '',\n            this.circle ? 'fd-avatar--circle' : '',\n            this.border ? 'fd-avatar--border' : '',\n            this.transparent ? 'fd-avatar--transparent' : '',\n            this.contain ? 'fd-avatar--background-contain' : '',\n            this.placeholder ? 'fd-avatar--placeholder' : '',\n            this.tile ? 'fd-avatar--tile' : '',\n            this.class\n        ];\n    }\n\n    /** @hidden */\n    elementRef(): ElementRef<any> {\n        return this._elementRef;\n    }\n\n    /** @hidden */\n    @HostListener('click')\n    @HostListener('keyup.enter')\n    @HostListener('keyup.space')\n    _onClick(): void {\n        if (this.clickable) {\n            this.avatarClicked.emit();\n        }\n    }\n\n    /** @hidden Get an abbreviate from the label or return null if not fit requirements */\n    private _getAbbreviate(label: Nullable<string>): string | null {\n        if (!label || this._image) {\n            return null;\n        }\n\n        return this._generateAbbreviation(label);\n    }\n\n    /** @hidden Get the abbreviation string */\n    private _generateAbbreviation(label: string): string | null {\n        const maxLettersCount = 3;\n        const firstLetters = label.split(' ').map((word) => word.charAt(0));\n        const abbreviate = firstLetters.join('');\n\n        if (firstLetters.length > maxLettersCount || !abbreviate.match(ANY_LANGUAGE_LETTERS_REGEX)) {\n            return null;\n        }\n\n        return abbreviate;\n    }\n\n    /** @hidden */\n    private _setImage(value: Nullable<string>): void {\n        this._image = value;\n\n        if (value) {\n            this._verifyImageUrl(value, (): void => {}, this._onErrorCallback);\n        } else {\n            this._bgImage = null;\n        }\n    }\n\n    /** @hidden */\n    private _verifyImageUrl(srcValue: string, onLoadCallback: () => void, onErrorCallback: () => void): void {\n        const img = new Image();\n        img.onload = onLoadCallback.bind(this);\n        img.onerror = onErrorCallback.bind(this);\n        img.src = srcValue;\n        this._assignBgImage(srcValue);\n    }\n\n    /** @hidden */\n    private _assignBgImage(srcValue: Nullable<string>): void {\n        this._bgImage = srcValue ? `url(${srcValue})` : null;\n    }\n\n    /** @hidden */\n    private _onErrorCallback(): void {\n        if (!this._alterIcon) {\n            this._showDefaultIcon();\n            this._cdr.detectChanges();\n            return;\n        }\n\n        const options = this._alterIcon.split('|');\n        for (let i = 0; i < options.length; i++) {\n            const option = options[i];\n\n            if (option === ALTER_ICON_OPTIONS.CONTENT) {\n                const contentValue = this._content?.nativeElement.innerText;\n                if (contentValue) {\n                    this.abbreviate = this._generateAbbreviation(contentValue);\n                    break;\n                }\n\n                continue;\n            }\n\n            if (option === ALTER_ICON_OPTIONS.ALT) {\n                const altValue = this.elementRef().nativeElement.getAttribute('alt');\n                if (altValue) {\n                    this.abbreviate = this._generateAbbreviation(altValue);\n                    break;\n                }\n\n                continue;\n            }\n\n            if (option === ALTER_ICON_OPTIONS.BACKUP) {\n                if (this._backupImage && this._backupImage !== '') {\n                    // Check if backupImage can be loaded successfully\n                    // If not, set default user icon\n                    this._verifyImageUrl(\n                        this._backupImage,\n                        () => {\n                            this._assignBgImage(this._backupImage);\n                            this._cdr.detectChanges();\n                        },\n                        () => {\n                            this._showDefaultIcon();\n                            this._cdr.detectChanges();\n                        }\n                    );\n                    break;\n                }\n\n                continue;\n            }\n\n            if (option === ALTER_ICON_OPTIONS.DEFAULT_ICON) {\n                this._showDefaultIcon();\n                break;\n            }\n\n            this._showDefaultIcon();\n        }\n\n        this._cdr.detectChanges();\n    }\n\n    /** @hidden */\n    private _showDefaultIcon(): void {\n        this.abbreviate = null;\n        this._image = null;\n        this.glyph = null;\n    }\n}\n","{{ abbreviate }}\n\n<i\n    *ngIf=\"zoomGlyph\"\n    role=\"presentation\"\n    class=\"fd-avatar__zoom-icon\"\n    tabindex=\"0\"\n    [class]=\"zoomGlyph ? 'sap-icon--' + zoomGlyph : ''\"\n    (click)=\"zoomGlyphClicked.next()\"\n    (keyup.space)=\"zoomGlyphClicked.next()\"\n    (keyup.enter)=\"zoomGlyphClicked.next()\"\n>\n</i>\n\n<i\n    *ngIf=\"glyph || showDefault\"\n    class=\"fd-avatar__icon\"\n    role=\"presentation\"\n    [class]=\"glyph ? 'sap-icon--' + glyph : 'sap-icon--person-placeholder'\"\n>\n</i>\n\n<div #content style=\"display: none\">\n    <ng-content></ng-content>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { AvatarComponent } from './avatar.component';\n\n@NgModule({\n    imports: [CommonModule],\n    exports: [AvatarComponent],\n    declarations: [AvatarComponent]\n})\nexport class AvatarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fundamental-ngx-core-avatar.mjs","sources":["../../../../libs/core/src/lib/avatar/avatar.component.ts","../../../../libs/core/src/lib/avatar/avatar.component.html","../../../../libs/core/src/lib/avatar/avatar.module.ts","../../../../libs/core/src/lib/avatar/fundamental-ngx-core-avatar.ts"],"sourcesContent":["import {\n    Attribute,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    EventEmitter,\n    HostBinding,\n    HostListener,\n    Input,\n    OnChanges,\n    OnInit,\n    Output,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport {\n    ANY_LANGUAGE_LETTERS_REGEX,\n    ColorAccent,\n    Size,\n    applyCssClass,\n    getRandomColorAccent,\n    CssClassBuilder\n} from '@fundamental-ngx/core/utils';\nimport { Nullable } from '@fundamental-ngx/core/shared';\n\nlet avatarUniqueId = 0;\n\nconst ALTER_ICON_OPTIONS = {\n    CONTENT: 'content',\n    ALT: 'alt',\n    BACKUP: 'backup',\n    DEFAULT_ICON: 'default-icon'\n};\n\n@Component({\n    selector: 'fd-avatar',\n    templateUrl: './avatar.component.html',\n    styleUrls: ['./avatar.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        '[attr.tabindex]': '_tabindex'\n    }\n})\nexport class AvatarComponent implements OnChanges, OnInit, CssClassBuilder {\n    /** User's custom classes */\n    @Input()\n    class: string;\n\n    /** Id of the Avatar. */\n    @Input()\n    @HostBinding('attr.id')\n    id = `fd-avatar-${avatarUniqueId++}`;\n\n    /** Aria-label for Avatar. */\n    @Input()\n    @HostBinding('attr.aria-label')\n    @HostBinding('attr.alt')\n    ariaLabel: Nullable<string> = null;\n\n    /** Aria-Labelledby for element describing Avatar. */\n    @Input()\n    @HostBinding('attr.aria-labelledby')\n    ariaLabelledby: Nullable<string> = null;\n\n    /** Localized text for label */\n    @Input()\n    set label(value: Nullable<string>) {\n        this.ariaLabel = value || null;\n        this.abbreviate = this._getAbbreviate(value);\n    }\n\n    /** The size of the Avatar. Options include: *xs*, *s*, *m*, *l* and *xl*. */\n    @Input() size: Size = 'l';\n\n    /** The glyph name. */\n    @Input() glyph: Nullable<string> = null;\n\n    /** The glyph name for zoom icon. */\n    @Input() zoomGlyph: Nullable<string> = null;\n\n    /** Whether to apply a circle style to the Avatar. */\n    @Input() circle = false;\n\n    /** Whether to apply a transparent style to the Avatar. */\n    @Input() transparent = false;\n\n    /** Whether to apply background size contain style to the Avatar */\n    @Input() contain = false;\n\n    /** Whether to apply a placeholder background style to the Avatar. */\n    @Input() placeholder = false;\n\n    /** Whether to apply a tile background style to the Avatar. */\n    @Input() tile = false;\n\n    /** Whether to apply a border to the Avatar. */\n    @Input() border = false;\n\n    /** A number from 1 to 10 representing the background color of the Avatar. */\n    @Input() colorAccent: Nullable<ColorAccent> = null;\n\n    /** Whether to apply random background color to the Avatar. */\n    @Input() random = false;\n\n    /** Whether component should be focusable & clicable */\n    @Input() clickable = false;\n\n    /**\n     * @deprecated\n     * Deprecated according to Rename `backgroundImage` to `image`\n     * */\n    /** Background image url. */\n    @Input()\n    set backgroundImage(value: string) {\n        this._setImage(value);\n    }\n\n    /** Background image resource: url or base64. */\n    @Input()\n    set image(value: Nullable<string>) {\n        this._setImage(value);\n    }\n    get image(): Nullable<string> {\n        return this._image;\n    }\n\n    /** Backup options to use when image hasn't been loaded successfully.\n     * Options separated with \"|\" symbol.\n     * Possible options: content, alt, backup, default-icon\n     */\n    @Input()\n    set alterIcon(value: Nullable<string>) {\n        this._alterIcon = value;\n    }\n    get alterIcon(): Nullable<string> {\n        return this._alterIcon;\n    }\n\n    /** Backup image to load when image hasn't been loaded successfully.\n     * Only applicable when using alterIcon input property.\n     */\n    @Input()\n    set backupImage(value: Nullable<string>) {\n        this._backupImage = value;\n    }\n    get backupImage(): Nullable<string> {\n        return this._backupImage;\n    }\n\n    /** Event emitted when avatar clicked. Only fires if clickable input property set to true. */\n    @Output() avatarClicked = new EventEmitter<Event>();\n\n    /** Event emitted when zoom icon clicked. Only fires if zoomGlyph input property is set. */\n    @Output() zoomGlyphClicked = new EventEmitter<void>();\n\n    /** @hidden */\n    @HostBinding('style.background-image')\n    get bgImage(): Nullable<string> {\n        return this._bgImage;\n    }\n\n    /** @hidden */\n    @HostBinding('attr.role')\n    get role(): string {\n        return this.zoomGlyph ? 'button' : 'img';\n    }\n\n    /** @hidden */\n    @ViewChild('content')\n    set content(value: ElementRef) {\n        this._content = value;\n    }\n\n    /** @hidden */\n    abbreviate: Nullable<string> = null;\n\n    /** @hidden */\n    private _image: Nullable<string> = null;\n\n    /** @hidden */\n    private _alterIcon: Nullable<string> = null;\n\n    /** @hidden */\n    private _content: Nullable<ElementRef> = null;\n\n    /** @hidden */\n    private _backupImage: Nullable<string> = null;\n\n    /** @hidden */\n    private _bgImage: Nullable<string> = null;\n\n    /** @hidden */\n    get _tabindex(): number | null {\n        if (this.hostTabindex != null) {\n            return this.hostTabindex;\n        }\n        return this.clickable ? 0 : null;\n    }\n\n    /** If a default placeholder should be displayed */\n    get showDefault(): boolean {\n        return !this.abbreviate && !this._image && !this.glyph;\n    }\n\n    /** @hidden */\n    constructor(\n        private _elementRef: ElementRef,\n        private _cdr: ChangeDetectorRef,\n        @Attribute('tabindex') private hostTabindex: number | null\n    ) {}\n\n    /** @hidden */\n    ngOnInit(): void {\n        this.buildComponentCssClass();\n    }\n\n    /** @hidden */\n    ngOnChanges(): void {\n        this.buildComponentCssClass();\n    }\n\n    @applyCssClass\n    /** CssClassBuilder interface implementation\n     * function must return single string\n     * function is responsible for order which css classes are applied\n     */\n    buildComponentCssClass(): string[] {\n        return [\n            'fd-avatar',\n            this.size ? `fd-avatar--${this.size}` : '',\n            this.colorAccent && !this.random ? `fd-avatar--accent-color-${this.colorAccent}` : '',\n            this.random ? `fd-avatar--accent-color-${getRandomColorAccent()}` : '',\n            this.circle ? 'fd-avatar--circle' : '',\n            this.border ? 'fd-avatar--border' : '',\n            this.transparent ? 'fd-avatar--transparent' : '',\n            this.contain ? 'fd-avatar--background-contain' : '',\n            this.placeholder ? 'fd-avatar--placeholder' : '',\n            this.tile ? 'fd-avatar--tile' : '',\n            this.class\n        ];\n    }\n\n    /** @hidden */\n    elementRef(): ElementRef<any> {\n        return this._elementRef;\n    }\n\n    /** @hidden */\n    @HostListener('click', ['$event'])\n    @HostListener('keydown.enter', ['$event'])\n    @HostListener('keydown.space', ['$event'])\n    _onClick(event: Event): void {\n        if (this.clickable) {\n            this.avatarClicked.emit(event);\n        }\n    }\n\n    /** @hidden Get an abbreviate from the label or return null if not fit requirements */\n    private _getAbbreviate(label: Nullable<string>): string | null {\n        if (!label || this._image) {\n            return null;\n        }\n\n        return this._generateAbbreviation(label);\n    }\n\n    /** @hidden Get the abbreviation string */\n    private _generateAbbreviation(label: string): string | null {\n        const maxLettersCount = 3;\n        const firstLetters = label.split(' ').map((word) => word.charAt(0));\n        const abbreviate = firstLetters.join('');\n\n        if (firstLetters.length > maxLettersCount || !abbreviate.match(ANY_LANGUAGE_LETTERS_REGEX)) {\n            return null;\n        }\n\n        return abbreviate;\n    }\n\n    /** @hidden */\n    private _setImage(value: Nullable<string>): void {\n        this._image = value;\n\n        if (value) {\n            this._verifyImageUrl(value, (): void => {}, this._onErrorCallback);\n        } else {\n            this._bgImage = null;\n        }\n    }\n\n    /** @hidden */\n    private _verifyImageUrl(srcValue: string, onLoadCallback: () => void, onErrorCallback: () => void): void {\n        const img = new Image();\n        img.onload = onLoadCallback.bind(this);\n        img.onerror = onErrorCallback.bind(this);\n        img.src = srcValue;\n        this._assignBgImage(srcValue);\n    }\n\n    /** @hidden */\n    private _assignBgImage(srcValue: Nullable<string>): void {\n        this._bgImage = srcValue ? `url(${srcValue})` : null;\n    }\n\n    /** @hidden */\n    private _onErrorCallback(): void {\n        if (!this._alterIcon) {\n            this._showDefaultIcon();\n            this._cdr.detectChanges();\n            return;\n        }\n\n        const options = this._alterIcon.split('|');\n        for (let i = 0; i < options.length; i++) {\n            const option = options[i];\n\n            if (option === ALTER_ICON_OPTIONS.CONTENT) {\n                const contentValue = this._content?.nativeElement.innerText;\n                if (contentValue) {\n                    this.abbreviate = this._generateAbbreviation(contentValue);\n                    break;\n                }\n\n                continue;\n            }\n\n            if (option === ALTER_ICON_OPTIONS.ALT) {\n                const altValue = this.elementRef().nativeElement.getAttribute('alt');\n                if (altValue) {\n                    this.abbreviate = this._generateAbbreviation(altValue);\n                    break;\n                }\n\n                continue;\n            }\n\n            if (option === ALTER_ICON_OPTIONS.BACKUP) {\n                if (this._backupImage && this._backupImage !== '') {\n                    // Check if backupImage can be loaded successfully\n                    // If not, set default user icon\n                    this._verifyImageUrl(\n                        this._backupImage,\n                        () => {\n                            this._assignBgImage(this._backupImage);\n                            this._cdr.detectChanges();\n                        },\n                        () => {\n                            this._showDefaultIcon();\n                            this._cdr.detectChanges();\n                        }\n                    );\n                    break;\n                }\n\n                continue;\n            }\n\n            if (option === ALTER_ICON_OPTIONS.DEFAULT_ICON) {\n                this._showDefaultIcon();\n                break;\n            }\n\n            this._showDefaultIcon();\n        }\n\n        this._cdr.detectChanges();\n    }\n\n    /** @hidden */\n    private _showDefaultIcon(): void {\n        this.abbreviate = null;\n        this._image = null;\n        this.glyph = null;\n    }\n}\n","{{ abbreviate }}\n\n<i\n    *ngIf=\"zoomGlyph\"\n    role=\"presentation\"\n    class=\"fd-avatar__zoom-icon\"\n    tabindex=\"0\"\n    [class]=\"zoomGlyph ? 'sap-icon--' + zoomGlyph : ''\"\n    (click)=\"zoomGlyphClicked.next()\"\n    (keyup.space)=\"zoomGlyphClicked.next()\"\n    (keyup.enter)=\"zoomGlyphClicked.next()\"\n>\n</i>\n\n<i\n    *ngIf=\"glyph || showDefault\"\n    class=\"fd-avatar__icon\"\n    role=\"presentation\"\n    [class]=\"glyph ? 'sap-icon--' + glyph : 'sap-icon--person-placeholder'\"\n>\n</i>\n\n<div #content style=\"display: none\">\n    <ng-content></ng-content>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { AvatarComponent } from './avatar.component';\n\n@NgModule({\n    imports: [CommonModule],\n    exports: [AvatarComponent],\n    declarations: [AvatarComponent]\n})\nexport class AvatarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2015/fundamental-ngx-core-grid-list.mjs

@@ -261,9 +261,9 @@ class GridListItemComponent {
         this.subscription.unsubscribe();
     }
     /** Focus grid list item programmatically */
-    focus() {
+    focus(options) {
         var _a;
-        (_a = this._gridListItem) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
+        (_a = this._gridListItem) === null || _a === void 0 ? void 0 : _a.nativeElement.focus(options);
     }
     /** @hidden */
     _setActive(event, isActive) {
@@ -339,9 +339,11 @@ class GridListItemComponent {
     /** @hidden */
     _onKeyDown(event) {
         const target = event.target;
-        if (!KeyUtil.isKeyCode(event, [ENTER, SPACE]) ||
-            this.selectionMode === 'none' ||
-            !target.classList.contains('fd-grid-list__item')) {
+        const isSelectionKeyDown = KeyUtil.isKeyCode(event, [ENTER, SPACE]);
+        if (isSelectionKeyDown && this.selectionMode === 'none') {
+            this.press.emit(this._outputEventValue);
+        }
+        if (!isSelectionKeyDown || this.selectionMode === 'none' || !target.classList.contains('fd-grid-list__item')) {
             return;
         }
         this._preventDefault(event);
@@ -406,10 +408,10 @@ class GridListItemComponent {
     }
 }
 GridListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: GridListItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: GridList }], target: i0.ɵɵFactoryTarget.Component });
-GridListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: GridListItemComponent, selector: "fd-grid-list-item", inputs: { id: "id", width: "width", layoutItemPattern: "layoutItemPattern", status: "status", counter: "counter", value: "value", disableToolbarClick: "disableToolbarClick", selected: "selected", noPadding: "noPadding", ariaLabel: "ariaLabel", type: "type", state: "state", isNavigated: "isNavigated", title: "title", description: "description" }, outputs: { press: "press", detail: "detail", delete: "delete", navigate: "navigate", draft: "draft", locked: "locked" }, host: { properties: { "style.max-width": "this.width", "style.min-width": "this.width" } }, queries: [{ propertyName: "footerBarComponent", first: true, predicate: GridListItemFooterBarComponent, descendants: true }, { propertyName: "itemToolbarComponent", first: true, predicate: GridListItemToolbarComponent, descendants: true }, { propertyName: "body", first: true, predicate: GridListItemBodyDirective, descendants: true }], viewQueries: [{ propertyName: "_gridListItem", first: true, predicate: ["gridListItem"], descendants: true }], ngImport: i0, template: "<div\n    #gridListItem\n    [id]=\"id\"\n    tabindex=\"0\"\n    class=\"fd-grid-list__item\"\n    role=\"option\"\n    [class.is-navigated]=\"isNavigated\"\n    [class.is-selected]=\"!!_selectedItem\"\n    [class.fd-grid-list__item--link]=\"\n        _isActive && (type === 'active' || type === 'detailsAndActive' || type === 'navigation')\n    \"\n    [class.fd-grid-list__item--unread]=\"state === 'unread'\"\n    [class.fd-grid-list__item--locked]=\"state === 'locked'\"\n    [class.fd-grid-list__item--draft]=\"state === 'draft'\"\n    [class.fd-grid-list__item--error]=\"state === 'error'\"\n    (keydown)=\"_onKeyDown($event)\"\n    (click)=\"selectionMode === 'singleSelect' && _singleSelect($event); _onClick($event)\"\n    [attr.aria-label]=\"ariaLabel\"\n    (mouseover)=\"_setActive($event, false)\"\n    (mouseout)=\"_setActive($event, true)\"\n    [attr.aria-selected]=\"selectionMode === 'none' ? null : !!_selectedItem\"\n>\n    <span\n        *ngIf=\"status\"\n        class=\"fd-grid-list__highlight\"\n        [class.fd-grid-list__highlight--positive]=\"status === 'success'\"\n        [class.fd-grid-list__highlight--negative]=\"status === 'warning'\"\n        [class.fd-grid-list__highlight--critical]=\"status === 'error'\"\n        [class.fd-grid-list__highlight--neutral]=\"status === 'neutral'\"\n        i18n-aria-label=\"coreGridList.Item.Status|Status aria-label attribute\"\n        [attr.aria-label]=\"'Item has status. Status: ' + status + '.'\"\n    ></span>\n\n    <ng-container *ngIf=\"selectionMode === 'singleSelect'\">\n        <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n    </ng-container>\n\n    <div\n        class=\"fd-toolbar fd-grid-list__item-toolbar\"\n        *ngIf=\"\n            counter ||\n            itemToolbarComponent?.contentTemplateRef ||\n            (type && type !== 'inactive' && type !== 'active') ||\n            (selectionMode !== 'none' && selectionMode !== 'singleSelect')\n        \"\n    >\n        <ng-container *ngIf=\"selectionMode === 'singleSelectLeft'\">\n            <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"selectionMode === 'multiSelect'\">\n            <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"itemToolbarComponent?.contentTemplateRef\">\n            <div class=\"fd-toolbar--extra-content\">\n                <ng-container *ngTemplateOutlet=\"itemToolbarComponent.contentTemplateRef\"></ng-container>\n            </div>\n        </ng-container>\n\n        <fd-grid-list-title-bar-spacer></fd-grid-list-title-bar-spacer>\n\n        <span\n            *ngIf=\"counter\"\n            class=\"fd-grid-list__item-counter\"\n            i18n-aria-label=\"@@coreGridList.Item.Counter|Count aria-label attribute\"\n            [attr.aria-label]=\"'Item has ' + counter + ' children'\"\n            [innerText]=\"counter\"\n        ></span>\n\n        <button\n            *ngIf=\"type === 'detail' || type === 'detailsAndActive'\"\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"edit\"\n            class=\"fd-grid-list__action-button\"\n            i18n-aria-label=\"coreGridList.Item.Btn.Details|Button aria-label attribute\"\n            aria-label=\"Details\"\n            i18n-title=\"coreGridList.Item.Btn.Details|Button title attribute\"\n            title=\"Details\"\n            fdCompact\n            (click)=\"_onDetail($event)\"\n        ></button>\n\n        <button\n            *ngIf=\"selectionMode === 'delete'\"\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"decline\"\n            class=\"fd-grid-list__action-button\"\n            i18n-aria-label=\"coreGridList.Item.Btn.Delete|Button aria-label attribute\"\n            aria-label=\"Delete\"\n            i18n-title=\"coreGridList.Item.Btn.Delete|Button title attribute\"\n            title=\"Delete\"\n            fdCompact\n            (click)=\"_onDelete($event)\"\n        ></button>\n\n        <span *ngIf=\"type === 'navigation'\" class=\"fd-grid-list__item-navigation-indicator\">\n            <fd-icon glyph=\"navigation-right-arrow\"></fd-icon>\n        </span>\n\n        <ng-container *ngIf=\"selectionMode === 'singleSelectRight'\">\n            <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n        </ng-container>\n    </div>\n\n    <div class=\"fd-grid-list__item-body\" [class.fd-grid-list__item-body--no-padding]=\"noPadding\">\n        <ng-content select=\"[fd-grid-list-item-image]\"></ng-content>\n\n        <div *ngIf=\"title || description\" class=\"fd-grid-list__item-header\">\n            <h4 *ngIf=\"title\" fd-title>{{ title }}</h4>\n            <span *ngIf=\"description\" class=\"fd-grid-list__item-subtitle\">{{ description }}</span>\n        </div>\n\n        <div *ngIf=\"body?.templateRef\" class=\"fd-grid-list__item-content\">\n            <ng-container [ngTemplateOutlet]=\"body.templateRef\"></ng-container>\n        </div>\n\n        <ng-container *ngIf=\"state || footerBarComponent?.contentTemplateRef\">\n            <ng-container *ngTemplateOutlet=\"itemFooter\"></ng-container>\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #radio>\n    <input\n        [attr.tabindex]=\"selectionMode === 'singleSelect' ? -1 : 0\"\n        type=\"radio\"\n        class=\"fd-radio fd-radio--compact fd-grid-list__radio-input\"\n        [style.display]=\"selectionMode === 'singleSelect' ? 'none' : ''\"\n        [id]=\"id + '-radio'\"\n        [name]=\"'fd-grid-list-item-toolbar-' + selectionMode\"\n        [attr.aria-label]=\"ariaLabel\"\n        [value]=\"value\"\n        [ngModel]=\"_selectedItem\"\n        (ngModelChange)=\"$event && _selectionItem($event)\"\n    />\n    <label\n        class=\"fd-radio__label fd-grid-list__radio-label\"\n        [for]=\"id + '-radio'\"\n        tabindex=\"-1\"\n        (mouseover)=\"_setActive($event, false)\"\n        (mouseout)=\"_setActive($event, true)\"\n    ></label>\n</ng-template>\n\n<ng-template #checkbox>\n    <input\n        type=\"checkbox\"\n        class=\"fd-checkbox fd-checkbox--compact fd-grid-list__checkbox-input\"\n        [id]=\"id + '-checkbox'\"\n        [attr.aria-label]=\"ariaLabel\"\n        [ngModel]=\"_selectedItem\"\n        (click)=\"_checkboxClick($event)\"\n    />\n    <label\n        class=\"fd-checkbox__label fd-checkbox__label--compact fd-grid-list__checkbox-label\"\n        [for]=\"id + '-checkbox'\"\n        tabindex=\"-1\"\n    ></label>\n</ng-template>\n\n<ng-template #itemFooter>\n    <div class=\"fd-grid-list__item-body-actions\" *ngIf=\"footerBarComponent || state\">\n        <ng-container *ngIf=\"footerBarComponent?.contentTemplateRef\">\n            <ng-container *ngTemplateOutlet=\"footerBarComponent.contentTemplateRef\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"!footerBarComponent?.contentTemplateRef && state\">\n            <span\n                *ngIf=\"state === 'error'\"\n                fd-object-status\n                status=\"negative\"\n                i18n-label=\"coreGridList.Item.Status.ContainsErrors|Error label attribute\"\n                label=\"Contains errors\"\n                i18n-title=\"coreGridList.Item.Status.ContainsErrors|Error title attribute\"\n                title=\"Contains errors\"\n            ></span>\n\n            <button\n                class=\"fd-grid-list__action-button\"\n                *ngIf=\"state === 'locked'\"\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"private\"\n                i18n-aria-label=\"coreGridList.Item.Status.Locked|Button aria-label attribute\"\n                aria-label=\"Locked\"\n                i18n-label=\"coreGridList.Item.Status.Locked|Button label attribute\"\n                label=\"Locked\"\n                fdCompact\n                (click)=\"_clickOnLocked($event)\"\n            ></button>\n\n            <button\n                class=\"fd-grid-list__action-button\"\n                *ngIf=\"state === 'draft'\"\n                fd-button\n                fdType=\"transparent\"\n                i18n-aria-label=\"coreGridList.Item.Status.Draft|Button aria-label attribute\"\n                aria-label=\"Draft\"\n                i18n-label=\"coreGridList.Item.Status.Draft|Button label attribute\"\n                label=\"Draft\"\n                fdCompact\n                (click)=\"_clickOnDraft($event)\"\n            ></button>\n        </ng-container>\n    </div>\n</ng-template>\n", styles: [".fd-grid-list .fd-dnd-item.fd-dnd-on-drag{cursor:-o-grabbing;cursor:-ms-grabbing;cursor:grabbing;background-color:transparent}.fd-grid-list .fd-dnd-item .fd-grid-list__item{overflow:visible}.fd-grid-list__item .drop-area__line--vertical{height:100%}.fd-grid-list__item .drop-area__line--vertical.before{left:-.55rem}.fd-grid-list__item .drop-area__line--vertical.after{right:-.55rem}.fd-grid-list__item .fd-checkbox__label{-webkit-user-select:none;user-select:none}\n"], components: [{ type: GridListTitleBarSpacerComponent, selector: "fd-grid-list-title-bar-spacer" }, { type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { type: i4.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { type: i6.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { type: i9.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+GridListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: GridListItemComponent, selector: "fd-grid-list-item", inputs: { id: "id", width: "width", layoutItemPattern: "layoutItemPattern", status: "status", counter: "counter", value: "value", disableToolbarClick: "disableToolbarClick", selected: "selected", noPadding: "noPadding", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", type: "type", state: "state", isNavigated: "isNavigated", title: "title", description: "description" }, outputs: { press: "press", detail: "detail", delete: "delete", navigate: "navigate", draft: "draft", locked: "locked" }, host: { properties: { "style.max-width": "this.width", "style.min-width": "this.width" } }, queries: [{ propertyName: "footerBarComponent", first: true, predicate: GridListItemFooterBarComponent, descendants: true }, { propertyName: "itemToolbarComponent", first: true, predicate: GridListItemToolbarComponent, descendants: true }, { propertyName: "body", first: true, predicate: GridListItemBodyDirective, descendants: true }], viewQueries: [{ propertyName: "_gridListItem", first: true, predicate: ["gridListItem"], descendants: true }], ngImport: i0, template: "<div\n    #gridListItem\n    [id]=\"id\"\n    tabindex=\"0\"\n    class=\"fd-grid-list__item\"\n    role=\"option\"\n    [class.is-navigated]=\"isNavigated\"\n    [class.is-selected]=\"!!_selectedItem\"\n    [class.fd-grid-list__item--link]=\"\n        _isActive && (type === 'active' || type === 'detailsAndActive' || type === 'navigation')\n    \"\n    [class.fd-grid-list__item--unread]=\"state === 'unread'\"\n    [class.fd-grid-list__item--locked]=\"state === 'locked'\"\n    [class.fd-grid-list__item--draft]=\"state === 'draft'\"\n    [class.fd-grid-list__item--error]=\"state === 'error'\"\n    (keydown)=\"_onKeyDown($event)\"\n    (click)=\"selectionMode === 'singleSelect' && _singleSelect($event); _onClick($event)\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    (mouseover)=\"_setActive($event, false)\"\n    (mouseout)=\"_setActive($event, true)\"\n    [attr.aria-selected]=\"selectionMode === 'none' ? null : !!_selectedItem\"\n>\n    <span\n        *ngIf=\"status\"\n        class=\"fd-grid-list__highlight\"\n        [class.fd-grid-list__highlight--positive]=\"status === 'success'\"\n        [class.fd-grid-list__highlight--negative]=\"status === 'warning'\"\n        [class.fd-grid-list__highlight--critical]=\"status === 'error'\"\n        [class.fd-grid-list__highlight--neutral]=\"status === 'neutral'\"\n        i18n-aria-label=\"coreGridList.Item.Status|Status aria-label attribute\"\n        [attr.aria-label]=\"'Item has status. Status: ' + status + '.'\"\n    ></span>\n\n    <ng-container *ngIf=\"selectionMode === 'singleSelect'\">\n        <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n    </ng-container>\n\n    <div\n        class=\"fd-toolbar fd-grid-list__item-toolbar\"\n        *ngIf=\"\n            counter ||\n            itemToolbarComponent?.contentTemplateRef ||\n            (type && type !== 'inactive' && type !== 'active') ||\n            (selectionMode !== 'none' && selectionMode !== 'singleSelect')\n        \"\n    >\n        <ng-container *ngIf=\"selectionMode === 'singleSelectLeft'\">\n            <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"selectionMode === 'multiSelect'\">\n            <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"itemToolbarComponent?.contentTemplateRef\">\n            <div class=\"fd-toolbar--extra-content\">\n                <ng-container *ngTemplateOutlet=\"itemToolbarComponent.contentTemplateRef\"></ng-container>\n            </div>\n        </ng-container>\n\n        <fd-grid-list-title-bar-spacer></fd-grid-list-title-bar-spacer>\n\n        <span\n            *ngIf=\"counter\"\n            class=\"fd-grid-list__item-counter\"\n            i18n-aria-label=\"@@coreGridList.Item.Counter|Count aria-label attribute\"\n            [attr.aria-label]=\"'Item has ' + counter + ' children'\"\n            [innerText]=\"counter\"\n        ></span>\n\n        <button\n            *ngIf=\"type === 'detail' || type === 'detailsAndActive'\"\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"edit\"\n            class=\"fd-grid-list__action-button\"\n            i18n-aria-label=\"coreGridList.Item.Btn.Details|Button aria-label attribute\"\n            aria-label=\"Details\"\n            i18n-title=\"coreGridList.Item.Btn.Details|Button title attribute\"\n            title=\"Details\"\n            fdCompact\n            (click)=\"_onDetail($event)\"\n        ></button>\n\n        <button\n            *ngIf=\"selectionMode === 'delete'\"\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"decline\"\n            class=\"fd-grid-list__action-button\"\n            i18n-aria-label=\"coreGridList.Item.Btn.Delete|Button aria-label attribute\"\n            aria-label=\"Delete\"\n            i18n-title=\"coreGridList.Item.Btn.Delete|Button title attribute\"\n            title=\"Delete\"\n            fdCompact\n            (click)=\"_onDelete($event)\"\n        ></button>\n\n        <span *ngIf=\"type === 'navigation'\" class=\"fd-grid-list__item-navigation-indicator\">\n            <fd-icon glyph=\"navigation-right-arrow\"></fd-icon>\n        </span>\n\n        <ng-container *ngIf=\"selectionMode === 'singleSelectRight'\">\n            <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n        </ng-container>\n    </div>\n\n    <div class=\"fd-grid-list__item-body\" [class.fd-grid-list__item-body--no-padding]=\"noPadding\">\n        <ng-content select=\"[fd-grid-list-item-image]\"></ng-content>\n\n        <div *ngIf=\"title || description\" class=\"fd-grid-list__item-header\">\n            <h4 *ngIf=\"title\" fd-title>{{ title }}</h4>\n            <span *ngIf=\"description\" class=\"fd-grid-list__item-subtitle\">{{ description }}</span>\n        </div>\n\n        <div *ngIf=\"body?.templateRef\" class=\"fd-grid-list__item-content\">\n            <ng-container [ngTemplateOutlet]=\"body.templateRef\"></ng-container>\n        </div>\n\n        <ng-container *ngIf=\"state || footerBarComponent?.contentTemplateRef\">\n            <ng-container *ngTemplateOutlet=\"itemFooter\"></ng-container>\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #radio>\n    <input\n        [attr.tabindex]=\"selectionMode === 'singleSelect' ? -1 : 0\"\n        type=\"radio\"\n        class=\"fd-radio fd-radio--compact fd-grid-list__radio-input\"\n        [style.display]=\"selectionMode === 'singleSelect' ? 'none' : ''\"\n        [id]=\"id + '-radio'\"\n        [name]=\"'fd-grid-list-item-toolbar-' + selectionMode\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [value]=\"value\"\n        [ngModel]=\"_selectedItem\"\n        (ngModelChange)=\"$event && _selectionItem($event)\"\n    />\n    <label\n        class=\"fd-radio__label fd-grid-list__radio-label\"\n        [for]=\"id + '-radio'\"\n        tabindex=\"-1\"\n        (mouseover)=\"_setActive($event, false)\"\n        (mouseout)=\"_setActive($event, true)\"\n    ></label>\n</ng-template>\n\n<ng-template #checkbox>\n    <input\n        type=\"checkbox\"\n        class=\"fd-checkbox fd-checkbox--compact fd-grid-list__checkbox-input\"\n        [id]=\"id + '-checkbox'\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [ngModel]=\"_selectedItem\"\n        (click)=\"_checkboxClick($event)\"\n    />\n    <label\n        class=\"fd-checkbox__label fd-checkbox__label--compact fd-grid-list__checkbox-label\"\n        [for]=\"id + '-checkbox'\"\n        tabindex=\"-1\"\n    ></label>\n</ng-template>\n\n<ng-template #itemFooter>\n    <div class=\"fd-grid-list__item-body-actions\" *ngIf=\"footerBarComponent || state\">\n        <ng-container *ngIf=\"footerBarComponent?.contentTemplateRef\">\n            <ng-container *ngTemplateOutlet=\"footerBarComponent.contentTemplateRef\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"!footerBarComponent?.contentTemplateRef && state\">\n            <span\n                *ngIf=\"state === 'error'\"\n                fd-object-status\n                status=\"negative\"\n                i18n-label=\"coreGridList.Item.Status.ContainsErrors|Error label attribute\"\n                label=\"Contains errors\"\n                i18n-title=\"coreGridList.Item.Status.ContainsErrors|Error title attribute\"\n                title=\"Contains errors\"\n            ></span>\n\n            <button\n                class=\"fd-grid-list__action-button\"\n                *ngIf=\"state === 'locked'\"\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"private\"\n                i18n-aria-label=\"coreGridList.Item.Status.Locked|Button aria-label attribute\"\n                aria-label=\"Locked\"\n                i18n-label=\"coreGridList.Item.Status.Locked|Button label attribute\"\n                label=\"Locked\"\n                fdCompact\n                (click)=\"_clickOnLocked($event)\"\n            ></button>\n\n            <button\n                class=\"fd-grid-list__action-button\"\n                *ngIf=\"state === 'draft'\"\n                fd-button\n                fdType=\"transparent\"\n                i18n-aria-label=\"coreGridList.Item.Status.Draft|Button aria-label attribute\"\n                aria-label=\"Draft\"\n                i18n-label=\"coreGridList.Item.Status.Draft|Button label attribute\"\n                label=\"Draft\"\n                fdCompact\n                (click)=\"_clickOnDraft($event)\"\n            ></button>\n        </ng-container>\n    </div>\n</ng-template>\n", styles: [".fd-grid-list .fd-dnd-item.fd-dnd-on-drag{cursor:-o-grabbing;cursor:-ms-grabbing;cursor:grabbing;background-color:transparent}.fd-grid-list .fd-dnd-item .fd-grid-list__item{overflow:visible}.fd-grid-list__item .drop-area__line--vertical{height:100%}.fd-grid-list__item .drop-area__line--vertical.before{left:-.55rem}.fd-grid-list__item .drop-area__line--vertical.after{right:-.55rem}.fd-grid-list__item .fd-checkbox__label{-webkit-user-select:none;user-select:none}\n"], components: [{ type: GridListTitleBarSpacerComponent, selector: "fd-grid-list-title-bar-spacer" }, { type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { type: i4.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { type: i6.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { type: i9.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: GridListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fd-grid-list-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n    #gridListItem\n    [id]=\"id\"\n    tabindex=\"0\"\n    class=\"fd-grid-list__item\"\n    role=\"option\"\n    [class.is-navigated]=\"isNavigated\"\n    [class.is-selected]=\"!!_selectedItem\"\n    [class.fd-grid-list__item--link]=\"\n        _isActive && (type === 'active' || type === 'detailsAndActive' || type === 'navigation')\n    \"\n    [class.fd-grid-list__item--unread]=\"state === 'unread'\"\n    [class.fd-grid-list__item--locked]=\"state === 'locked'\"\n    [class.fd-grid-list__item--draft]=\"state === 'draft'\"\n    [class.fd-grid-list__item--error]=\"state === 'error'\"\n    (keydown)=\"_onKeyDown($event)\"\n    (click)=\"selectionMode === 'singleSelect' && _singleSelect($event); _onClick($event)\"\n    [attr.aria-label]=\"ariaLabel\"\n    (mouseover)=\"_setActive($event, false)\"\n    (mouseout)=\"_setActive($event, true)\"\n    [attr.aria-selected]=\"selectionMode === 'none' ? null : !!_selectedItem\"\n>\n    <span\n        *ngIf=\"status\"\n        class=\"fd-grid-list__highlight\"\n        [class.fd-grid-list__highlight--positive]=\"status === 'success'\"\n        [class.fd-grid-list__highlight--negative]=\"status === 'warning'\"\n        [class.fd-grid-list__highlight--critical]=\"status === 'error'\"\n        [class.fd-grid-list__highlight--neutral]=\"status === 'neutral'\"\n        i18n-aria-label=\"coreGridList.Item.Status|Status aria-label attribute\"\n        [attr.aria-label]=\"'Item has status. Status: ' + status + '.'\"\n    ></span>\n\n    <ng-container *ngIf=\"selectionMode === 'singleSelect'\">\n        <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n    </ng-container>\n\n    <div\n        class=\"fd-toolbar fd-grid-list__item-toolbar\"\n        *ngIf=\"\n            counter ||\n            itemToolbarComponent?.contentTemplateRef ||\n            (type && type !== 'inactive' && type !== 'active') ||\n            (selectionMode !== 'none' && selectionMode !== 'singleSelect')\n        \"\n    >\n        <ng-container *ngIf=\"selectionMode === 'singleSelectLeft'\">\n            <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"selectionMode === 'multiSelect'\">\n            <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"itemToolbarComponent?.contentTemplateRef\">\n            <div class=\"fd-toolbar--extra-content\">\n                <ng-container *ngTemplateOutlet=\"itemToolbarComponent.contentTemplateRef\"></ng-container>\n            </div>\n        </ng-container>\n\n        <fd-grid-list-title-bar-spacer></fd-grid-list-title-bar-spacer>\n\n        <span\n            *ngIf=\"counter\"\n            class=\"fd-grid-list__item-counter\"\n            i18n-aria-label=\"@@coreGridList.Item.Counter|Count aria-label attribute\"\n            [attr.aria-label]=\"'Item has ' + counter + ' children'\"\n            [innerText]=\"counter\"\n        ></span>\n\n        <button\n            *ngIf=\"type === 'detail' || type === 'detailsAndActive'\"\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"edit\"\n            class=\"fd-grid-list__action-button\"\n            i18n-aria-label=\"coreGridList.Item.Btn.Details|Button aria-label attribute\"\n            aria-label=\"Details\"\n            i18n-title=\"coreGridList.Item.Btn.Details|Button title attribute\"\n            title=\"Details\"\n            fdCompact\n            (click)=\"_onDetail($event)\"\n        ></button>\n\n        <button\n            *ngIf=\"selectionMode === 'delete'\"\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"decline\"\n            class=\"fd-grid-list__action-button\"\n            i18n-aria-label=\"coreGridList.Item.Btn.Delete|Button aria-label attribute\"\n            aria-label=\"Delete\"\n            i18n-title=\"coreGridList.Item.Btn.Delete|Button title attribute\"\n            title=\"Delete\"\n            fdCompact\n            (click)=\"_onDelete($event)\"\n        ></button>\n\n        <span *ngIf=\"type === 'navigation'\" class=\"fd-grid-list__item-navigation-indicator\">\n            <fd-icon glyph=\"navigation-right-arrow\"></fd-icon>\n        </span>\n\n        <ng-container *ngIf=\"selectionMode === 'singleSelectRight'\">\n            <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n        </ng-container>\n    </div>\n\n    <div class=\"fd-grid-list__item-body\" [class.fd-grid-list__item-body--no-padding]=\"noPadding\">\n        <ng-content select=\"[fd-grid-list-item-image]\"></ng-content>\n\n        <div *ngIf=\"title || description\" class=\"fd-grid-list__item-header\">\n            <h4 *ngIf=\"title\" fd-title>{{ title }}</h4>\n            <span *ngIf=\"description\" class=\"fd-grid-list__item-subtitle\">{{ description }}</span>\n        </div>\n\n        <div *ngIf=\"body?.templateRef\" class=\"fd-grid-list__item-content\">\n            <ng-container [ngTemplateOutlet]=\"body.templateRef\"></ng-container>\n        </div>\n\n        <ng-container *ngIf=\"state || footerBarComponent?.contentTemplateRef\">\n            <ng-container *ngTemplateOutlet=\"itemFooter\"></ng-container>\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #radio>\n    <input\n        [attr.tabindex]=\"selectionMode === 'singleSelect' ? -1 : 0\"\n        type=\"radio\"\n        class=\"fd-radio fd-radio--compact fd-grid-list__radio-input\"\n        [style.display]=\"selectionMode === 'singleSelect' ? 'none' : ''\"\n        [id]=\"id + '-radio'\"\n        [name]=\"'fd-grid-list-item-toolbar-' + selectionMode\"\n        [attr.aria-label]=\"ariaLabel\"\n        [value]=\"value\"\n        [ngModel]=\"_selectedItem\"\n        (ngModelChange)=\"$event && _selectionItem($event)\"\n    />\n    <label\n        class=\"fd-radio__label fd-grid-list__radio-label\"\n        [for]=\"id + '-radio'\"\n        tabindex=\"-1\"\n        (mouseover)=\"_setActive($event, false)\"\n        (mouseout)=\"_setActive($event, true)\"\n    ></label>\n</ng-template>\n\n<ng-template #checkbox>\n    <input\n        type=\"checkbox\"\n        class=\"fd-checkbox fd-checkbox--compact fd-grid-list__checkbox-input\"\n        [id]=\"id + '-checkbox'\"\n        [attr.aria-label]=\"ariaLabel\"\n        [ngModel]=\"_selectedItem\"\n        (click)=\"_checkboxClick($event)\"\n    />\n    <label\n        class=\"fd-checkbox__label fd-checkbox__label--compact fd-grid-list__checkbox-label\"\n        [for]=\"id + '-checkbox'\"\n        tabindex=\"-1\"\n    ></label>\n</ng-template>\n\n<ng-template #itemFooter>\n    <div class=\"fd-grid-list__item-body-actions\" *ngIf=\"footerBarComponent || state\">\n        <ng-container *ngIf=\"footerBarComponent?.contentTemplateRef\">\n            <ng-container *ngTemplateOutlet=\"footerBarComponent.contentTemplateRef\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"!footerBarComponent?.contentTemplateRef && state\">\n            <span\n                *ngIf=\"state === 'error'\"\n                fd-object-status\n                status=\"negative\"\n                i18n-label=\"coreGridList.Item.Status.ContainsErrors|Error label attribute\"\n                label=\"Contains errors\"\n                i18n-title=\"coreGridList.Item.Status.ContainsErrors|Error title attribute\"\n                title=\"Contains errors\"\n            ></span>\n\n            <button\n                class=\"fd-grid-list__action-button\"\n                *ngIf=\"state === 'locked'\"\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"private\"\n                i18n-aria-label=\"coreGridList.Item.Status.Locked|Button aria-label attribute\"\n                aria-label=\"Locked\"\n                i18n-label=\"coreGridList.Item.Status.Locked|Button label attribute\"\n                label=\"Locked\"\n                fdCompact\n                (click)=\"_clickOnLocked($event)\"\n            ></button>\n\n            <button\n                class=\"fd-grid-list__action-button\"\n                *ngIf=\"state === 'draft'\"\n                fd-button\n                fdType=\"transparent\"\n                i18n-aria-label=\"coreGridList.Item.Status.Draft|Button aria-label attribute\"\n                aria-label=\"Draft\"\n                i18n-label=\"coreGridList.Item.Status.Draft|Button label attribute\"\n                label=\"Draft\"\n                fdCompact\n                (click)=\"_clickOnDraft($event)\"\n            ></button>\n        </ng-container>\n    </div>\n</ng-template>\n", styles: [".fd-grid-list .fd-dnd-item.fd-dnd-on-drag{cursor:-o-grabbing;cursor:-ms-grabbing;cursor:grabbing;background-color:transparent}.fd-grid-list .fd-dnd-item .fd-grid-list__item{overflow:visible}.fd-grid-list__item .drop-area__line--vertical{height:100%}.fd-grid-list__item .drop-area__line--vertical.before{left:-.55rem}.fd-grid-list__item .drop-area__line--vertical.after{right:-.55rem}.fd-grid-list__item .fd-checkbox__label{-webkit-user-select:none;user-select:none}\n"] }]
+            args: [{ selector: 'fd-grid-list-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n    #gridListItem\n    [id]=\"id\"\n    tabindex=\"0\"\n    class=\"fd-grid-list__item\"\n    role=\"option\"\n    [class.is-navigated]=\"isNavigated\"\n    [class.is-selected]=\"!!_selectedItem\"\n    [class.fd-grid-list__item--link]=\"\n        _isActive && (type === 'active' || type === 'detailsAndActive' || type === 'navigation')\n    \"\n    [class.fd-grid-list__item--unread]=\"state === 'unread'\"\n    [class.fd-grid-list__item--locked]=\"state === 'locked'\"\n    [class.fd-grid-list__item--draft]=\"state === 'draft'\"\n    [class.fd-grid-list__item--error]=\"state === 'error'\"\n    (keydown)=\"_onKeyDown($event)\"\n    (click)=\"selectionMode === 'singleSelect' && _singleSelect($event); _onClick($event)\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    (mouseover)=\"_setActive($event, false)\"\n    (mouseout)=\"_setActive($event, true)\"\n    [attr.aria-selected]=\"selectionMode === 'none' ? null : !!_selectedItem\"\n>\n    <span\n        *ngIf=\"status\"\n        class=\"fd-grid-list__highlight\"\n        [class.fd-grid-list__highlight--positive]=\"status === 'success'\"\n        [class.fd-grid-list__highlight--negative]=\"status === 'warning'\"\n        [class.fd-grid-list__highlight--critical]=\"status === 'error'\"\n        [class.fd-grid-list__highlight--neutral]=\"status === 'neutral'\"\n        i18n-aria-label=\"coreGridList.Item.Status|Status aria-label attribute\"\n        [attr.aria-label]=\"'Item has status. Status: ' + status + '.'\"\n    ></span>\n\n    <ng-container *ngIf=\"selectionMode === 'singleSelect'\">\n        <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n    </ng-container>\n\n    <div\n        class=\"fd-toolbar fd-grid-list__item-toolbar\"\n        *ngIf=\"\n            counter ||\n            itemToolbarComponent?.contentTemplateRef ||\n            (type && type !== 'inactive' && type !== 'active') ||\n            (selectionMode !== 'none' && selectionMode !== 'singleSelect')\n        \"\n    >\n        <ng-container *ngIf=\"selectionMode === 'singleSelectLeft'\">\n            <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"selectionMode === 'multiSelect'\">\n            <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"itemToolbarComponent?.contentTemplateRef\">\n            <div class=\"fd-toolbar--extra-content\">\n                <ng-container *ngTemplateOutlet=\"itemToolbarComponent.contentTemplateRef\"></ng-container>\n            </div>\n        </ng-container>\n\n        <fd-grid-list-title-bar-spacer></fd-grid-list-title-bar-spacer>\n\n        <span\n            *ngIf=\"counter\"\n            class=\"fd-grid-list__item-counter\"\n            i18n-aria-label=\"@@coreGridList.Item.Counter|Count aria-label attribute\"\n            [attr.aria-label]=\"'Item has ' + counter + ' children'\"\n            [innerText]=\"counter\"\n        ></span>\n\n        <button\n            *ngIf=\"type === 'detail' || type === 'detailsAndActive'\"\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"edit\"\n            class=\"fd-grid-list__action-button\"\n            i18n-aria-label=\"coreGridList.Item.Btn.Details|Button aria-label attribute\"\n            aria-label=\"Details\"\n            i18n-title=\"coreGridList.Item.Btn.Details|Button title attribute\"\n            title=\"Details\"\n            fdCompact\n            (click)=\"_onDetail($event)\"\n        ></button>\n\n        <button\n            *ngIf=\"selectionMode === 'delete'\"\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"decline\"\n            class=\"fd-grid-list__action-button\"\n            i18n-aria-label=\"coreGridList.Item.Btn.Delete|Button aria-label attribute\"\n            aria-label=\"Delete\"\n            i18n-title=\"coreGridList.Item.Btn.Delete|Button title attribute\"\n            title=\"Delete\"\n            fdCompact\n            (click)=\"_onDelete($event)\"\n        ></button>\n\n        <span *ngIf=\"type === 'navigation'\" class=\"fd-grid-list__item-navigation-indicator\">\n            <fd-icon glyph=\"navigation-right-arrow\"></fd-icon>\n        </span>\n\n        <ng-container *ngIf=\"selectionMode === 'singleSelectRight'\">\n            <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n        </ng-container>\n    </div>\n\n    <div class=\"fd-grid-list__item-body\" [class.fd-grid-list__item-body--no-padding]=\"noPadding\">\n        <ng-content select=\"[fd-grid-list-item-image]\"></ng-content>\n\n        <div *ngIf=\"title || description\" class=\"fd-grid-list__item-header\">\n            <h4 *ngIf=\"title\" fd-title>{{ title }}</h4>\n            <span *ngIf=\"description\" class=\"fd-grid-list__item-subtitle\">{{ description }}</span>\n        </div>\n\n        <div *ngIf=\"body?.templateRef\" class=\"fd-grid-list__item-content\">\n            <ng-container [ngTemplateOutlet]=\"body.templateRef\"></ng-container>\n        </div>\n\n        <ng-container *ngIf=\"state || footerBarComponent?.contentTemplateRef\">\n            <ng-container *ngTemplateOutlet=\"itemFooter\"></ng-container>\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #radio>\n    <input\n        [attr.tabindex]=\"selectionMode === 'singleSelect' ? -1 : 0\"\n        type=\"radio\"\n        class=\"fd-radio fd-radio--compact fd-grid-list__radio-input\"\n        [style.display]=\"selectionMode === 'singleSelect' ? 'none' : ''\"\n        [id]=\"id + '-radio'\"\n        [name]=\"'fd-grid-list-item-toolbar-' + selectionMode\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [value]=\"value\"\n        [ngModel]=\"_selectedItem\"\n        (ngModelChange)=\"$event && _selectionItem($event)\"\n    />\n    <label\n        class=\"fd-radio__label fd-grid-list__radio-label\"\n        [for]=\"id + '-radio'\"\n        tabindex=\"-1\"\n        (mouseover)=\"_setActive($event, false)\"\n        (mouseout)=\"_setActive($event, true)\"\n    ></label>\n</ng-template>\n\n<ng-template #checkbox>\n    <input\n        type=\"checkbox\"\n        class=\"fd-checkbox fd-checkbox--compact fd-grid-list__checkbox-input\"\n        [id]=\"id + '-checkbox'\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [ngModel]=\"_selectedItem\"\n        (click)=\"_checkboxClick($event)\"\n    />\n    <label\n        class=\"fd-checkbox__label fd-checkbox__label--compact fd-grid-list__checkbox-label\"\n        [for]=\"id + '-checkbox'\"\n        tabindex=\"-1\"\n    ></label>\n</ng-template>\n\n<ng-template #itemFooter>\n    <div class=\"fd-grid-list__item-body-actions\" *ngIf=\"footerBarComponent || state\">\n        <ng-container *ngIf=\"footerBarComponent?.contentTemplateRef\">\n            <ng-container *ngTemplateOutlet=\"footerBarComponent.contentTemplateRef\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"!footerBarComponent?.contentTemplateRef && state\">\n            <span\n                *ngIf=\"state === 'error'\"\n                fd-object-status\n                status=\"negative\"\n                i18n-label=\"coreGridList.Item.Status.ContainsErrors|Error label attribute\"\n                label=\"Contains errors\"\n                i18n-title=\"coreGridList.Item.Status.ContainsErrors|Error title attribute\"\n                title=\"Contains errors\"\n            ></span>\n\n            <button\n                class=\"fd-grid-list__action-button\"\n                *ngIf=\"state === 'locked'\"\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"private\"\n                i18n-aria-label=\"coreGridList.Item.Status.Locked|Button aria-label attribute\"\n                aria-label=\"Locked\"\n                i18n-label=\"coreGridList.Item.Status.Locked|Button label attribute\"\n                label=\"Locked\"\n                fdCompact\n                (click)=\"_clickOnLocked($event)\"\n            ></button>\n\n            <button\n                class=\"fd-grid-list__action-button\"\n                *ngIf=\"state === 'draft'\"\n                fd-button\n                fdType=\"transparent\"\n                i18n-aria-label=\"coreGridList.Item.Status.Draft|Button aria-label attribute\"\n                aria-label=\"Draft\"\n                i18n-label=\"coreGridList.Item.Status.Draft|Button label attribute\"\n                label=\"Draft\"\n                fdCompact\n                (click)=\"_clickOnDraft($event)\"\n            ></button>\n        </ng-container>\n    </div>\n</ng-template>\n", styles: [".fd-grid-list .fd-dnd-item.fd-dnd-on-drag{cursor:-o-grabbing;cursor:-ms-grabbing;cursor:grabbing;background-color:transparent}.fd-grid-list .fd-dnd-item .fd-grid-list__item{overflow:visible}.fd-grid-list__item .drop-area__line--vertical{height:100%}.fd-grid-list__item .drop-area__line--vertical.before{left:-.55rem}.fd-grid-list__item .drop-area__line--vertical.after{right:-.55rem}.fd-grid-list__item .fd-checkbox__label{-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: GridList }]; }, propDecorators: { id: [{
                 type: Input
             }], width: [{
@@ -436,6 +438,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                 type: Input
             }], ariaLabel: [{
                 type: Input
+            }], ariaLabelledBy: [{
+                type: Input
             }], type: [{
                 type: Input
             }], state: [{