@fundamental-ngx/core 0.61.2-rc.8 → 0.61.2

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

@@ -25,13 +25,13 @@ class GridListFilterBarComponent {
         this.close = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GridListFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: GridListFilterBarComponent, isStandalone: true, selector: "fd-grid-list-filter-bar", outputs: { close: "close" }, host: { classAttribute: "fd-col fd-col--12" }, ngImport: i0, template: "<fd-toolbar\n    fdType=\"info\"\n    [active]=\"true\"\n    [tabindex]=\"0\"\n    class=\"fd-grid-list__filter\"\n    [attr.aria-label]=\"('coreGridList.filterBarCancelButtonTitle' | fdTranslate)()\"\n    (click)=\"close.emit()\"\n    (keydown.space)=\"$event.preventDefault()\"\n    (keyup.space)=\"close.emit()\"\n    (keydown.enter)=\"close.emit()\"\n>\n    <ng-content></ng-content>\n\n    <fd-toolbar-spacer></fd-toolbar-spacer>\n\n    <fd-icon glyph=\"decline\"></fd-icon>\n</fd-toolbar>\n", dependencies: [{ kind: "component", type: ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: GridListFilterBarComponent, isStandalone: true, selector: "fd-grid-list-filter-bar", outputs: { close: "close" }, host: { classAttribute: "fd-col fd-col--12" }, ngImport: i0, template: "<fd-toolbar\n    fdType=\"info\"\n    [active]=\"true\"\n    [tabindex]=\"0\"\n    class=\"fd-grid-list__filter\"\n    [attr.aria-label]=\"'coreGridList.filterBarCancelButtonTitle' | fdTranslate\"\n    (click)=\"close.emit()\"\n    (keydown.space)=\"$event.preventDefault()\"\n    (keyup.space)=\"close.emit()\"\n    (keydown.enter)=\"close.emit()\"\n>\n    <ng-content></ng-content>\n\n    <fd-toolbar-spacer></fd-toolbar-spacer>\n\n    <fd-icon glyph=\"decline\"></fd-icon>\n</fd-toolbar>\n", dependencies: [{ kind: "component", type: ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GridListFilterBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-grid-list-filter-bar', host: {
                         class: 'fd-col fd-col--12'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ToolbarComponent, ToolbarSpacerDirective, IconComponent, FdTranslatePipe], template: "<fd-toolbar\n    fdType=\"info\"\n    [active]=\"true\"\n    [tabindex]=\"0\"\n    class=\"fd-grid-list__filter\"\n    [attr.aria-label]=\"('coreGridList.filterBarCancelButtonTitle' | fdTranslate)()\"\n    (click)=\"close.emit()\"\n    (keydown.space)=\"$event.preventDefault()\"\n    (keyup.space)=\"close.emit()\"\n    (keydown.enter)=\"close.emit()\"\n>\n    <ng-content></ng-content>\n\n    <fd-toolbar-spacer></fd-toolbar-spacer>\n\n    <fd-icon glyph=\"decline\"></fd-icon>\n</fd-toolbar>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ToolbarComponent, ToolbarSpacerDirective, IconComponent, FdTranslatePipe], template: "<fd-toolbar\n    fdType=\"info\"\n    [active]=\"true\"\n    [tabindex]=\"0\"\n    class=\"fd-grid-list__filter\"\n    [attr.aria-label]=\"'coreGridList.filterBarCancelButtonTitle' | fdTranslate\"\n    (click)=\"close.emit()\"\n    (keydown.space)=\"$event.preventDefault()\"\n    (keyup.space)=\"close.emit()\"\n    (keydown.enter)=\"close.emit()\"\n>\n    <ng-content></ng-content>\n\n    <fd-toolbar-spacer></fd-toolbar-spacer>\n\n    <fd-icon glyph=\"decline\"></fd-icon>\n</fd-toolbar>\n" }]
         }], propDecorators: { close: [{
                 type: Output
             }] } });
@@ -498,7 +498,7 @@ class GridListItemComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GridListItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: GridList }, { token: i2.ContentDensityObserver }, { token: i3.TabbableElementService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: GridListItemComponent, isStandalone: true, selector: "fd-grid-list-item", inputs: { id: "id", width: "width", layoutItemPattern: "layoutItemPattern", status: "status", counter: "counter", value: "value", disableToolbarClick: "disableToolbarClick", selected: ["selected", "selected", booleanAttribute], noPadding: "noPadding", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", type: "type", state: "state", isNavigated: "isNavigated", title: "title", titleLevel: "titleLevel", description: "description", autoHeight: "autoHeight" }, outputs: { press: "press", detail: "detail", delete: "delete", navigate: "navigate", cardClick: "cardClick", draft: "draft", locked: "locked" }, host: { properties: { "style.max-width": "this.width", "style.min-width": "this.width" } }, providers: [contentDensityObserverProviders()], 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]=\"tabIndex()\"\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    [class.fd-grid-list__item--height-auto]=\"autoHeight\"\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    @if (status) {\n        <span\n            class=\"fd-grid-list__highlight\"\n            [class.fd-grid-list__highlight--positive]=\"status === 'success'\"\n            [class.fd-grid-list__highlight--critical]=\"status === 'warning'\"\n            [class.fd-grid-list__highlight--negative]=\"status === 'error'\"\n            [class.fd-grid-list__highlight--neutral]=\"status === 'neutral'\"\n            [attr.aria-label]=\"('coreGridList.listItemStatusAriaLabel' | fdTranslate: { status: status })()\"\n        ></span>\n    }\n    @if (selectionMode === 'singleSelect') {\n        <ng-template [ngTemplateOutlet]=\"radio\"></ng-template>\n    }\n    @if (\n        counter ||\n        itemToolbarComponent?.contentTemplateRef ||\n        (type && type !== 'inactive' && type !== 'active') ||\n        (selectionMode !== 'none' && selectionMode !== 'singleSelect')\n    ) {\n        <div class=\"fd-toolbar fd-grid-list__item-toolbar\">\n            @if (selectionMode === 'singleSelectLeft') {\n                <ng-template [ngTemplateOutlet]=\"radio\"></ng-template>\n            }\n            @if (selectionMode === 'multiSelect') {\n                <ng-template [ngTemplateOutlet]=\"checkbox\"></ng-template>\n            }\n            @if (itemToolbarComponent?.contentTemplateRef) {\n                <div class=\"fd-toolbar--extra-content\">\n                    <ng-template [ngTemplateOutlet]=\"itemToolbarComponent!.contentTemplateRef\"></ng-template>\n                </div>\n            }\n            <fd-grid-list-title-bar-spacer></fd-grid-list-title-bar-spacer>\n            @if (counter) {\n                <span\n                    class=\"fd-grid-list__item-counter\"\n                    [attr.aria-label]=\"('coreGridList.listItemCounterAriaLabel' | fdTranslate: { count: counter })()\"\n                    >{{ counter }}</span\n                >\n            }\n            @if (type === 'detail' || type === 'detailsAndActive') {\n                <button\n                    fd-button\n                    fdType=\"transparent\"\n                    glyph=\"edit\"\n                    class=\"fd-grid-list__action-button\"\n                    [attr.aria-label]=\"('coreGridList.listItemButtonDetailsTitle' | fdTranslate)()\"\n                    [title]=\"('coreGridList.listItemButtonDetailsTitle' | fdTranslate)()\"\n                    fdCompact\n                    (click)=\"_onDetail($event)\"\n                ></button>\n            }\n            @if (selectionMode === 'delete') {\n                <button\n                    fd-button\n                    fdType=\"transparent\"\n                    glyph=\"decline\"\n                    class=\"fd-grid-list__action-button\"\n                    [attr.aria-label]=\"('coreGridList.listItemButtonDeleteTitle' | fdTranslate)()\"\n                    [title]=\"('coreGridList.listItemButtonDeleteTitle' | fdTranslate)()\"\n                    title=\"Delete\"\n                    fdCompact\n                    (click)=\"_onDelete($event)\"\n                ></button>\n            }\n            @if (type === 'navigation') {\n                <span class=\"fd-grid-list__item-navigation-indicator\">\n                    <fd-icon glyph=\"navigation-right-arrow\"></fd-icon>\n                </span>\n            }\n            @if (selectionMode === 'singleSelectRight') {\n                <ng-template [ngTemplateOutlet]=\"radio\"></ng-template>\n            }\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        @if (title || description) {\n            <div class=\"fd-grid-list__item-header\">\n                @if (title) {\n                    <div\n                        role=\"heading\"\n                        [attr.aria-level]=\"titleLevel\"\n                        class=\"fd-title fd-title--h4 fd-grid-list__item-title\"\n                    >\n                        {{ title }}\n                    </div>\n                }\n                @if (description) {\n                    <span class=\"fd-grid-list__item-subtitle\">{{ description }}</span>\n                }\n            </div>\n        }\n        @if (body?.templateRef) {\n            <div class=\"fd-grid-list__item-content\">\n                <ng-template [ngTemplateOutlet]=\"body!.templateRef\"></ng-template>\n            </div>\n        }\n        @if (state || footerBarComponent?.contentTemplateRef) {\n            <ng-template [ngTemplateOutlet]=\"itemFooter\"></ng-template>\n        }\n    </div>\n</div>\n<ng-template #radio>\n    <input\n        [attr.tabindex]=\"selectionMode === 'singleSelect' ? -1 : 0\"\n        type=\"radio\"\n        class=\"fd-radio 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<ng-template #checkbox>\n    <input\n        type=\"checkbox\"\n        class=\"fd-checkbox 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        (keydown.escape)=\"_checkboxEscape()\"\n        (keydown.shift)=\"_checkboxEscape()\"\n    />\n    <label class=\"fd-checkbox__label fd-grid-list__checkbox-label\" [for]=\"id + '-checkbox'\" tabindex=\"-1\">\n        <span class=\"fd-checkbox__checkmark\" aria-hidden=\"true\"></span>\n    </label>\n</ng-template>\n<ng-template #itemFooter>\n    @if (footerBarComponent || state) {\n        <div class=\"fd-grid-list__item-body-actions\">\n            @if (footerBarComponent?.contentTemplateRef) {\n                <ng-template [ngTemplateOutlet]=\"footerBarComponent!.contentTemplateRef\"></ng-template>\n            }\n            @if (!footerBarComponent?.contentTemplateRef && state) {\n                @if (state === 'error') {\n                    <span\n                        fd-object-status\n                        status=\"negative\"\n                        [label]=\"('coreGridList.listItemStatusContainsErrors' | fdTranslate)()\"\n                        [attr.aria-label]=\"('coreGridList.listItemStatusContainsErrors' | fdTranslate)()\"\n                    ></span>\n                }\n                @if (state === 'locked') {\n                    <button\n                        class=\"fd-grid-list__action-button\"\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"private\"\n                        [label]=\"('coreGridList.listItemStatusLocked' | fdTranslate)()\"\n                        [attr.aria-label]=\"('coreGridList.listItemStatusLocked' | fdTranslate)()\"\n                        [attr.data-test-id]=\"('coreGridList.listItemStatusLocked' | fdTranslate)()\"\n                        fdCompact\n                        (click)=\"_clickOnLocked($event)\"\n                    ></button>\n                }\n                @if (state === 'draft') {\n                    <button\n                        class=\"fd-grid-list__action-button\"\n                        fd-button\n                        fdType=\"transparent\"\n                        [attr.aria-label]=\"('coreGridList.listItemStatusDraft' | fdTranslate)()\"\n                        [label]=\"('coreGridList.listItemStatusDraft' | fdTranslate)()\"\n                        [attr.data-test-id]=\"('coreGridList.listItemStatusDraft' | fdTranslate)()\"\n                        fdCompact\n                        (click)=\"_clickOnDraft($event)\"\n                    ></button>\n                }\n            }\n        </div>\n    }\n</ng-template>\n", styles: [".fd-grid-list .fd-dnd-item.fd-dnd-on-drag{cursor:-webkit-grabbing;cursor:-moz-grabbing;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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GridListTitleBarSpacerComponent, selector: "fd-grid-list-title-bar-spacer" }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["status", "statusMessage", "glyph", "glyphFont", "label", "ariaLabel", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large", "secondaryIndication", "textTemplate", "ariaRoleDescription"] }, { kind: "ngmodule", type: ContentDensityModule }, { kind: "directive", type: i2.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"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: GridListItemComponent, isStandalone: true, selector: "fd-grid-list-item", inputs: { id: "id", width: "width", layoutItemPattern: "layoutItemPattern", status: "status", counter: "counter", value: "value", disableToolbarClick: "disableToolbarClick", selected: ["selected", "selected", booleanAttribute], noPadding: "noPadding", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", type: "type", state: "state", isNavigated: "isNavigated", title: "title", titleLevel: "titleLevel", description: "description", autoHeight: "autoHeight" }, outputs: { press: "press", detail: "detail", delete: "delete", navigate: "navigate", cardClick: "cardClick", draft: "draft", locked: "locked" }, host: { properties: { "style.max-width": "this.width", "style.min-width": "this.width" } }, providers: [contentDensityObserverProviders()], 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]=\"tabIndex()\"\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    [class.fd-grid-list__item--height-auto]=\"autoHeight\"\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    @if (status) {\n        <span\n            class=\"fd-grid-list__highlight\"\n            [class.fd-grid-list__highlight--positive]=\"status === 'success'\"\n            [class.fd-grid-list__highlight--critical]=\"status === 'warning'\"\n            [class.fd-grid-list__highlight--negative]=\"status === 'error'\"\n            [class.fd-grid-list__highlight--neutral]=\"status === 'neutral'\"\n            [attr.aria-label]=\"'coreGridList.listItemStatusAriaLabel' | fdTranslate: { status: status }\"\n        ></span>\n    }\n    @if (selectionMode === 'singleSelect') {\n        <ng-template [ngTemplateOutlet]=\"radio\"></ng-template>\n    }\n    @if (\n        counter ||\n        itemToolbarComponent?.contentTemplateRef ||\n        (type && type !== 'inactive' && type !== 'active') ||\n        (selectionMode !== 'none' && selectionMode !== 'singleSelect')\n    ) {\n        <div class=\"fd-toolbar fd-grid-list__item-toolbar\">\n            @if (selectionMode === 'singleSelectLeft') {\n                <ng-template [ngTemplateOutlet]=\"radio\"></ng-template>\n            }\n            @if (selectionMode === 'multiSelect') {\n                <ng-template [ngTemplateOutlet]=\"checkbox\"></ng-template>\n            }\n            @if (itemToolbarComponent?.contentTemplateRef) {\n                <div class=\"fd-toolbar--extra-content\">\n                    <ng-template [ngTemplateOutlet]=\"itemToolbarComponent!.contentTemplateRef\"></ng-template>\n                </div>\n            }\n            <fd-grid-list-title-bar-spacer></fd-grid-list-title-bar-spacer>\n            @if (counter) {\n                <span\n                    class=\"fd-grid-list__item-counter\"\n                    [attr.aria-label]=\"'coreGridList.listItemCounterAriaLabel' | fdTranslate: { count: counter }\"\n                    >{{ counter }}</span\n                >\n            }\n            @if (type === 'detail' || type === 'detailsAndActive') {\n                <button\n                    fd-button\n                    fdType=\"transparent\"\n                    glyph=\"edit\"\n                    class=\"fd-grid-list__action-button\"\n                    [attr.aria-label]=\"'coreGridList.listItemButtonDetailsTitle' | fdTranslate\"\n                    [title]=\"'coreGridList.listItemButtonDetailsTitle' | fdTranslate\"\n                    fdCompact\n                    (click)=\"_onDetail($event)\"\n                ></button>\n            }\n            @if (selectionMode === 'delete') {\n                <button\n                    fd-button\n                    fdType=\"transparent\"\n                    glyph=\"decline\"\n                    class=\"fd-grid-list__action-button\"\n                    [attr.aria-label]=\"'coreGridList.listItemButtonDeleteTitle' | fdTranslate\"\n                    [title]=\"'coreGridList.listItemButtonDeleteTitle' | fdTranslate\"\n                    title=\"Delete\"\n                    fdCompact\n                    (click)=\"_onDelete($event)\"\n                ></button>\n            }\n            @if (type === 'navigation') {\n                <span class=\"fd-grid-list__item-navigation-indicator\">\n                    <fd-icon glyph=\"navigation-right-arrow\"></fd-icon>\n                </span>\n            }\n            @if (selectionMode === 'singleSelectRight') {\n                <ng-template [ngTemplateOutlet]=\"radio\"></ng-template>\n            }\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        @if (title || description) {\n            <div class=\"fd-grid-list__item-header\">\n                @if (title) {\n                    <div\n                        role=\"heading\"\n                        [attr.aria-level]=\"titleLevel\"\n                        class=\"fd-title fd-title--h4 fd-grid-list__item-title\"\n                    >\n                        {{ title }}\n                    </div>\n                }\n                @if (description) {\n                    <span class=\"fd-grid-list__item-subtitle\">{{ description }}</span>\n                }\n            </div>\n        }\n        @if (body?.templateRef) {\n            <div class=\"fd-grid-list__item-content\">\n                <ng-template [ngTemplateOutlet]=\"body!.templateRef\"></ng-template>\n            </div>\n        }\n        @if (state || footerBarComponent?.contentTemplateRef) {\n            <ng-template [ngTemplateOutlet]=\"itemFooter\"></ng-template>\n        }\n    </div>\n</div>\n<ng-template #radio>\n    <input\n        [attr.tabindex]=\"selectionMode === 'singleSelect' ? -1 : 0\"\n        type=\"radio\"\n        class=\"fd-radio 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<ng-template #checkbox>\n    <input\n        type=\"checkbox\"\n        class=\"fd-checkbox 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        (keydown.escape)=\"_checkboxEscape()\"\n        (keydown.shift)=\"_checkboxEscape()\"\n    />\n    <label class=\"fd-checkbox__label fd-grid-list__checkbox-label\" [for]=\"id + '-checkbox'\" tabindex=\"-1\">\n        <span class=\"fd-checkbox__checkmark\" aria-hidden=\"true\"></span>\n    </label>\n</ng-template>\n<ng-template #itemFooter>\n    @if (footerBarComponent || state) {\n        <div class=\"fd-grid-list__item-body-actions\">\n            @if (footerBarComponent?.contentTemplateRef) {\n                <ng-template [ngTemplateOutlet]=\"footerBarComponent!.contentTemplateRef\"></ng-template>\n            }\n            @if (!footerBarComponent?.contentTemplateRef && state) {\n                @if (state === 'error') {\n                    <span\n                        fd-object-status\n                        status=\"negative\"\n                        [label]=\"'coreGridList.listItemStatusContainsErrors' | fdTranslate\"\n                        [attr.aria-label]=\"'coreGridList.listItemStatusContainsErrors' | fdTranslate\"\n                    ></span>\n                }\n                @if (state === 'locked') {\n                    <button\n                        class=\"fd-grid-list__action-button\"\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"private\"\n                        [label]=\"'coreGridList.listItemStatusLocked' | fdTranslate\"\n                        [attr.aria-label]=\"'coreGridList.listItemStatusLocked' | fdTranslate\"\n                        [attr.data-test-id]=\"'coreGridList.listItemStatusLocked' | fdTranslate\"\n                        fdCompact\n                        (click)=\"_clickOnLocked($event)\"\n                    ></button>\n                }\n                @if (state === 'draft') {\n                    <button\n                        class=\"fd-grid-list__action-button\"\n                        fd-button\n                        fdType=\"transparent\"\n                        [attr.aria-label]=\"'coreGridList.listItemStatusDraft' | fdTranslate\"\n                        [label]=\"'coreGridList.listItemStatusDraft' | fdTranslate\"\n                        [attr.data-test-id]=\"'coreGridList.listItemStatusDraft' | fdTranslate\"\n                        fdCompact\n                        (click)=\"_clickOnDraft($event)\"\n                    ></button>\n                }\n            }\n        </div>\n    }\n</ng-template>\n", styles: [".fd-grid-list .fd-dnd-item.fd-dnd-on-drag{cursor:-webkit-grabbing;cursor:-moz-grabbing;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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GridListTitleBarSpacerComponent, selector: "fd-grid-list-title-bar-spacer" }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["status", "statusMessage", "glyph", "glyphFont", "label", "ariaLabel", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large", "secondaryIndication", "textTemplate", "ariaRoleDescription"] }, { kind: "ngmodule", type: ContentDensityModule }, { kind: "directive", type: i2.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"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GridListItemComponent, decorators: [{
             type: Component,
@@ -511,7 +511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         ObjectStatusComponent,
                         FdTranslatePipe,
                         ContentDensityModule
-                    ], providers: [contentDensityObserverProviders()], template: "<div\n    #gridListItem\n    [id]=\"id\"\n    [tabindex]=\"tabIndex()\"\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    [class.fd-grid-list__item--height-auto]=\"autoHeight\"\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    @if (status) {\n        <span\n            class=\"fd-grid-list__highlight\"\n            [class.fd-grid-list__highlight--positive]=\"status === 'success'\"\n            [class.fd-grid-list__highlight--critical]=\"status === 'warning'\"\n            [class.fd-grid-list__highlight--negative]=\"status === 'error'\"\n            [class.fd-grid-list__highlight--neutral]=\"status === 'neutral'\"\n            [attr.aria-label]=\"('coreGridList.listItemStatusAriaLabel' | fdTranslate: { status: status })()\"\n        ></span>\n    }\n    @if (selectionMode === 'singleSelect') {\n        <ng-template [ngTemplateOutlet]=\"radio\"></ng-template>\n    }\n    @if (\n        counter ||\n        itemToolbarComponent?.contentTemplateRef ||\n        (type && type !== 'inactive' && type !== 'active') ||\n        (selectionMode !== 'none' && selectionMode !== 'singleSelect')\n    ) {\n        <div class=\"fd-toolbar fd-grid-list__item-toolbar\">\n            @if (selectionMode === 'singleSelectLeft') {\n                <ng-template [ngTemplateOutlet]=\"radio\"></ng-template>\n            }\n            @if (selectionMode === 'multiSelect') {\n                <ng-template [ngTemplateOutlet]=\"checkbox\"></ng-template>\n            }\n            @if (itemToolbarComponent?.contentTemplateRef) {\n                <div class=\"fd-toolbar--extra-content\">\n                    <ng-template [ngTemplateOutlet]=\"itemToolbarComponent!.contentTemplateRef\"></ng-template>\n                </div>\n            }\n            <fd-grid-list-title-bar-spacer></fd-grid-list-title-bar-spacer>\n            @if (counter) {\n                <span\n                    class=\"fd-grid-list__item-counter\"\n                    [attr.aria-label]=\"('coreGridList.listItemCounterAriaLabel' | fdTranslate: { count: counter })()\"\n                    >{{ counter }}</span\n                >\n            }\n            @if (type === 'detail' || type === 'detailsAndActive') {\n                <button\n                    fd-button\n                    fdType=\"transparent\"\n                    glyph=\"edit\"\n                    class=\"fd-grid-list__action-button\"\n                    [attr.aria-label]=\"('coreGridList.listItemButtonDetailsTitle' | fdTranslate)()\"\n                    [title]=\"('coreGridList.listItemButtonDetailsTitle' | fdTranslate)()\"\n                    fdCompact\n                    (click)=\"_onDetail($event)\"\n                ></button>\n            }\n            @if (selectionMode === 'delete') {\n                <button\n                    fd-button\n                    fdType=\"transparent\"\n                    glyph=\"decline\"\n                    class=\"fd-grid-list__action-button\"\n                    [attr.aria-label]=\"('coreGridList.listItemButtonDeleteTitle' | fdTranslate)()\"\n                    [title]=\"('coreGridList.listItemButtonDeleteTitle' | fdTranslate)()\"\n                    title=\"Delete\"\n                    fdCompact\n                    (click)=\"_onDelete($event)\"\n                ></button>\n            }\n            @if (type === 'navigation') {\n                <span class=\"fd-grid-list__item-navigation-indicator\">\n                    <fd-icon glyph=\"navigation-right-arrow\"></fd-icon>\n                </span>\n            }\n            @if (selectionMode === 'singleSelectRight') {\n                <ng-template [ngTemplateOutlet]=\"radio\"></ng-template>\n            }\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        @if (title || description) {\n            <div class=\"fd-grid-list__item-header\">\n                @if (title) {\n                    <div\n                        role=\"heading\"\n                        [attr.aria-level]=\"titleLevel\"\n                        class=\"fd-title fd-title--h4 fd-grid-list__item-title\"\n                    >\n                        {{ title }}\n                    </div>\n                }\n                @if (description) {\n                    <span class=\"fd-grid-list__item-subtitle\">{{ description }}</span>\n                }\n            </div>\n        }\n        @if (body?.templateRef) {\n            <div class=\"fd-grid-list__item-content\">\n                <ng-template [ngTemplateOutlet]=\"body!.templateRef\"></ng-template>\n            </div>\n        }\n        @if (state || footerBarComponent?.contentTemplateRef) {\n            <ng-template [ngTemplateOutlet]=\"itemFooter\"></ng-template>\n        }\n    </div>\n</div>\n<ng-template #radio>\n    <input\n        [attr.tabindex]=\"selectionMode === 'singleSelect' ? -1 : 0\"\n        type=\"radio\"\n        class=\"fd-radio 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<ng-template #checkbox>\n    <input\n        type=\"checkbox\"\n        class=\"fd-checkbox 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        (keydown.escape)=\"_checkboxEscape()\"\n        (keydown.shift)=\"_checkboxEscape()\"\n    />\n    <label class=\"fd-checkbox__label fd-grid-list__checkbox-label\" [for]=\"id + '-checkbox'\" tabindex=\"-1\">\n        <span class=\"fd-checkbox__checkmark\" aria-hidden=\"true\"></span>\n    </label>\n</ng-template>\n<ng-template #itemFooter>\n    @if (footerBarComponent || state) {\n        <div class=\"fd-grid-list__item-body-actions\">\n            @if (footerBarComponent?.contentTemplateRef) {\n                <ng-template [ngTemplateOutlet]=\"footerBarComponent!.contentTemplateRef\"></ng-template>\n            }\n            @if (!footerBarComponent?.contentTemplateRef && state) {\n                @if (state === 'error') {\n                    <span\n                        fd-object-status\n                        status=\"negative\"\n                        [label]=\"('coreGridList.listItemStatusContainsErrors' | fdTranslate)()\"\n                        [attr.aria-label]=\"('coreGridList.listItemStatusContainsErrors' | fdTranslate)()\"\n                    ></span>\n                }\n                @if (state === 'locked') {\n                    <button\n                        class=\"fd-grid-list__action-button\"\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"private\"\n                        [label]=\"('coreGridList.listItemStatusLocked' | fdTranslate)()\"\n                        [attr.aria-label]=\"('coreGridList.listItemStatusLocked' | fdTranslate)()\"\n                        [attr.data-test-id]=\"('coreGridList.listItemStatusLocked' | fdTranslate)()\"\n                        fdCompact\n                        (click)=\"_clickOnLocked($event)\"\n                    ></button>\n                }\n                @if (state === 'draft') {\n                    <button\n                        class=\"fd-grid-list__action-button\"\n                        fd-button\n                        fdType=\"transparent\"\n                        [attr.aria-label]=\"('coreGridList.listItemStatusDraft' | fdTranslate)()\"\n                        [label]=\"('coreGridList.listItemStatusDraft' | fdTranslate)()\"\n                        [attr.data-test-id]=\"('coreGridList.listItemStatusDraft' | fdTranslate)()\"\n                        fdCompact\n                        (click)=\"_clickOnDraft($event)\"\n                    ></button>\n                }\n            }\n        </div>\n    }\n</ng-template>\n", styles: [".fd-grid-list .fd-dnd-item.fd-dnd-on-drag{cursor:-webkit-grabbing;cursor:-moz-grabbing;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"] }]
+                    ], providers: [contentDensityObserverProviders()], template: "<div\n    #gridListItem\n    [id]=\"id\"\n    [tabindex]=\"tabIndex()\"\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    [class.fd-grid-list__item--height-auto]=\"autoHeight\"\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    @if (status) {\n        <span\n            class=\"fd-grid-list__highlight\"\n            [class.fd-grid-list__highlight--positive]=\"status === 'success'\"\n            [class.fd-grid-list__highlight--critical]=\"status === 'warning'\"\n            [class.fd-grid-list__highlight--negative]=\"status === 'error'\"\n            [class.fd-grid-list__highlight--neutral]=\"status === 'neutral'\"\n            [attr.aria-label]=\"'coreGridList.listItemStatusAriaLabel' | fdTranslate: { status: status }\"\n        ></span>\n    }\n    @if (selectionMode === 'singleSelect') {\n        <ng-template [ngTemplateOutlet]=\"radio\"></ng-template>\n    }\n    @if (\n        counter ||\n        itemToolbarComponent?.contentTemplateRef ||\n        (type && type !== 'inactive' && type !== 'active') ||\n        (selectionMode !== 'none' && selectionMode !== 'singleSelect')\n    ) {\n        <div class=\"fd-toolbar fd-grid-list__item-toolbar\">\n            @if (selectionMode === 'singleSelectLeft') {\n                <ng-template [ngTemplateOutlet]=\"radio\"></ng-template>\n            }\n            @if (selectionMode === 'multiSelect') {\n                <ng-template [ngTemplateOutlet]=\"checkbox\"></ng-template>\n            }\n            @if (itemToolbarComponent?.contentTemplateRef) {\n                <div class=\"fd-toolbar--extra-content\">\n                    <ng-template [ngTemplateOutlet]=\"itemToolbarComponent!.contentTemplateRef\"></ng-template>\n                </div>\n            }\n            <fd-grid-list-title-bar-spacer></fd-grid-list-title-bar-spacer>\n            @if (counter) {\n                <span\n                    class=\"fd-grid-list__item-counter\"\n                    [attr.aria-label]=\"'coreGridList.listItemCounterAriaLabel' | fdTranslate: { count: counter }\"\n                    >{{ counter }}</span\n                >\n            }\n            @if (type === 'detail' || type === 'detailsAndActive') {\n                <button\n                    fd-button\n                    fdType=\"transparent\"\n                    glyph=\"edit\"\n                    class=\"fd-grid-list__action-button\"\n                    [attr.aria-label]=\"'coreGridList.listItemButtonDetailsTitle' | fdTranslate\"\n                    [title]=\"'coreGridList.listItemButtonDetailsTitle' | fdTranslate\"\n                    fdCompact\n                    (click)=\"_onDetail($event)\"\n                ></button>\n            }\n            @if (selectionMode === 'delete') {\n                <button\n                    fd-button\n                    fdType=\"transparent\"\n                    glyph=\"decline\"\n                    class=\"fd-grid-list__action-button\"\n                    [attr.aria-label]=\"'coreGridList.listItemButtonDeleteTitle' | fdTranslate\"\n                    [title]=\"'coreGridList.listItemButtonDeleteTitle' | fdTranslate\"\n                    title=\"Delete\"\n                    fdCompact\n                    (click)=\"_onDelete($event)\"\n                ></button>\n            }\n            @if (type === 'navigation') {\n                <span class=\"fd-grid-list__item-navigation-indicator\">\n                    <fd-icon glyph=\"navigation-right-arrow\"></fd-icon>\n                </span>\n            }\n            @if (selectionMode === 'singleSelectRight') {\n                <ng-template [ngTemplateOutlet]=\"radio\"></ng-template>\n            }\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        @if (title || description) {\n            <div class=\"fd-grid-list__item-header\">\n                @if (title) {\n                    <div\n                        role=\"heading\"\n                        [attr.aria-level]=\"titleLevel\"\n                        class=\"fd-title fd-title--h4 fd-grid-list__item-title\"\n                    >\n                        {{ title }}\n                    </div>\n                }\n                @if (description) {\n                    <span class=\"fd-grid-list__item-subtitle\">{{ description }}</span>\n                }\n            </div>\n        }\n        @if (body?.templateRef) {\n            <div class=\"fd-grid-list__item-content\">\n                <ng-template [ngTemplateOutlet]=\"body!.templateRef\"></ng-template>\n            </div>\n        }\n        @if (state || footerBarComponent?.contentTemplateRef) {\n            <ng-template [ngTemplateOutlet]=\"itemFooter\"></ng-template>\n        }\n    </div>\n</div>\n<ng-template #radio>\n    <input\n        [attr.tabindex]=\"selectionMode === 'singleSelect' ? -1 : 0\"\n        type=\"radio\"\n        class=\"fd-radio 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<ng-template #checkbox>\n    <input\n        type=\"checkbox\"\n        class=\"fd-checkbox 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        (keydown.escape)=\"_checkboxEscape()\"\n        (keydown.shift)=\"_checkboxEscape()\"\n    />\n    <label class=\"fd-checkbox__label fd-grid-list__checkbox-label\" [for]=\"id + '-checkbox'\" tabindex=\"-1\">\n        <span class=\"fd-checkbox__checkmark\" aria-hidden=\"true\"></span>\n    </label>\n</ng-template>\n<ng-template #itemFooter>\n    @if (footerBarComponent || state) {\n        <div class=\"fd-grid-list__item-body-actions\">\n            @if (footerBarComponent?.contentTemplateRef) {\n                <ng-template [ngTemplateOutlet]=\"footerBarComponent!.contentTemplateRef\"></ng-template>\n            }\n            @if (!footerBarComponent?.contentTemplateRef && state) {\n                @if (state === 'error') {\n                    <span\n                        fd-object-status\n                        status=\"negative\"\n                        [label]=\"'coreGridList.listItemStatusContainsErrors' | fdTranslate\"\n                        [attr.aria-label]=\"'coreGridList.listItemStatusContainsErrors' | fdTranslate\"\n                    ></span>\n                }\n                @if (state === 'locked') {\n                    <button\n                        class=\"fd-grid-list__action-button\"\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"private\"\n                        [label]=\"'coreGridList.listItemStatusLocked' | fdTranslate\"\n                        [attr.aria-label]=\"'coreGridList.listItemStatusLocked' | fdTranslate\"\n                        [attr.data-test-id]=\"'coreGridList.listItemStatusLocked' | fdTranslate\"\n                        fdCompact\n                        (click)=\"_clickOnLocked($event)\"\n                    ></button>\n                }\n                @if (state === 'draft') {\n                    <button\n                        class=\"fd-grid-list__action-button\"\n                        fd-button\n                        fdType=\"transparent\"\n                        [attr.aria-label]=\"'coreGridList.listItemStatusDraft' | fdTranslate\"\n                        [label]=\"'coreGridList.listItemStatusDraft' | fdTranslate\"\n                        [attr.data-test-id]=\"'coreGridList.listItemStatusDraft' | fdTranslate\"\n                        fdCompact\n                        (click)=\"_clickOnDraft($event)\"\n                    ></button>\n                }\n            }\n        </div>\n    }\n</ng-template>\n", styles: [".fd-grid-list .fd-dnd-item.fd-dnd-on-drag{cursor:-webkit-grabbing;cursor:-moz-grabbing;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: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: GridList }, { type: i2.ContentDensityObserver }, { type: i3.TabbableElementService }], propDecorators: { id: [{
                 type: Input
             }], width: [{