@fundamental-ngx/core 0.61.2 → 0.62.0-rc.1

package/fesm2022/fundamental-ngx-core-facets.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-core-facets.mjs","sources":["../../../../libs/core/facets/constants.ts","../../../../libs/core/facets/utils.ts","../../../../libs/core/facets/content/facet-content.component.ts","../../../../libs/core/facets/facet-container.component.ts","../../../../libs/core/facets/facet-group.component.ts","../../../../libs/core/facets/facet/facet.component.ts","../../../../libs/core/facets/facet/facet.component.html","../../../../libs/core/facets/facet.module.ts","../../../../libs/core/facets/fundamental-ngx-core-facets.ts"],"sourcesContent":["export const FACET_CLASS_NAME = {\n    facetContainer: 'fd-facet__container',\n    facetRatingIndicatorContainer: 'fd-facet__rating-container',\n    facetRatingIndicatorDynamicText: 'fd-facet__rating-dynamic-text',\n    facetObjectStatus: 'fd-facet__object-status',\n    facetObjectStatusText: 'fd-facet__object-status-text',\n    marginTopTiny: 'fd-margin-top--tiny',\n    marginBottomTiny: 'fd-margin-bottom--tiny',\n    marginEndTiny: 'fd-margin-end--tiny',\n    paddingNone: 'fd-padding--none'\n} as const;\n\nexport type FacetType = 'form' | 'key-value' | 'image' | 'rating-indicator' | 'custom';\n","import { Renderer2 } from '@angular/core';\n\nexport const addClassNameToFacetElement = (renderer: Renderer2, element: Element, className: string): void => {\n    renderer.addClass(element, className);\n};\n","import { ChangeDetectionStrategy, Component, ElementRef, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';\nimport { FACET_CLASS_NAME } from '../constants';\nimport { addClassNameToFacetElement } from '../utils';\n\n@Component({\n    selector: 'fd-facet-content',\n    template: `<ng-content></ng-content>`,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    standalone: true\n})\nexport class FacetContentComponent implements OnInit {\n    /** @hidden */\n    constructor(\n        public readonly elementRef: ElementRef<HTMLElement>,\n        private _renderer: Renderer2\n    ) {}\n\n    /** @hidden */\n    ngOnInit(): void {\n        this._addClassNameToHostElement(FACET_CLASS_NAME.facetContainer);\n    }\n\n    /** @hidden */\n    private _addClassNameToHostElement(className: string): void {\n        addClassNameToFacetElement(this._renderer, this.elementRef.nativeElement, className);\n    }\n}\n","import { ChangeDetectionStrategy, Component, input, ViewEncapsulation } from '@angular/core';\n\nexport type ContainerFlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';\n\nexport type ContainerFlexJustify =\n    | 'start'\n    | 'center'\n    | 'end'\n    | 'flex-start'\n    | 'flex-end'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n    | 'stretch';\n\nexport type ContainerFlexAlign =\n    | 'start'\n    | 'center'\n    | 'end'\n    | 'flex-start'\n    | 'flex-end'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n    | 'stretch'\n    | 'self-start'\n    | 'self-end'\n    | 'baseline';\n\n@Component({\n    selector: 'fd-facet-container',\n    template: ` <ng-content></ng-content> `,\n    styleUrl: './facet-container.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[class.fd-facet-container]': 'true',\n        '[style.gap.rem]': 'flexGap()',\n        '[style.flex-direction]': 'flexDirection()',\n        '[style.align-items]': 'alignItems()',\n        '[style.justify-content]': 'justifyContent()'\n    },\n    standalone: true\n})\nexport class FacetContainerComponent {\n    /**\n     * Value for the direction of the flex container.\n     * Possible values: 'row' | 'row-reverse' | 'column' | 'column-reverse'\n     * Default: 'column'\n     */\n    flexDirection = input<ContainerFlexDirection>('column');\n\n    /**\n     * Value for align-items of the flex container.\n     * Possible values:\n     * 'start', 'center', 'end', 'flex-start', 'flex-end', 'space-between', 'space-around',\n     * 'space-evenly', 'stretch', 'self-start', 'self-end', 'baseline'\n     * Default: 'start'\n     */\n    alignItems = input<ContainerFlexJustify>('start');\n\n    /**\n     * Value for justify-content of the flex container.\n     * Possible values:\n     * 'start', 'center', 'end', 'flex-start', 'flex-end', 'space-between', 'space-around',\n     * 'space-evenly', 'stretch'\n     * Default: 'start'\n     */\n    justifyContent = input<ContainerFlexAlign>('start');\n\n    /**\n     * Value for the flex container gap in rem.\n     * An integer number\n     * Default: 1\n     */\n    flexGap = input(1);\n}\n","import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';\n\nimport { Nullable } from '@fundamental-ngx/cdk/utils';\n\n@Component({\n    selector: 'fd-facet-group',\n    template: ` <ng-content select=\"fd-facet\"></ng-content> `,\n    styleUrl: './facet-group.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[class.fd-facet-group]': 'true',\n        '[attr.aria-label]': 'ariaLabel',\n        role: 'group'\n    },\n    standalone: true\n})\nexport class FacetGroupComponent {\n    /**\n     * the aria label for the facet group\n     */\n    @Input()\n    ariaLabel: Nullable<string>;\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    HostBinding,\n    Input,\n    Renderer2,\n    ViewEncapsulation\n} from '@angular/core';\nimport { Nullable } from '@fundamental-ngx/cdk/utils';\nimport { FormLabelComponent } from '@fundamental-ngx/core/form';\nimport { HeadingLevel } from '@fundamental-ngx/core/shared';\nimport { TitleComponent } from '@fundamental-ngx/core/title';\nimport { FACET_CLASS_NAME, FacetType } from '../constants';\nimport { addClassNameToFacetElement } from '../utils';\n\nlet randomId = 0;\nlet randomTitleId = 0;\n\n@Component({\n    selector: 'fd-facet',\n    templateUrl: './facet.component.html',\n    styleUrl: './facet.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[class.fd-facet]': 'true'\n    },\n    imports: [NgTemplateOutlet, TitleComponent, FormLabelComponent]\n})\nexport class FacetComponent implements AfterViewInit {\n    /** the type of Facet: form, key-value, image, rating-indicator */\n    @Input()\n    type: FacetType;\n\n    /** The facet title.\n     * For eg: for key-value facet, facetTitle is the key and the underlying object status or object number\n     * component is the value.\n     */\n    @Input()\n    facetTitle: string;\n\n    /** An optional subtitle to display in the rating-indicator facet */\n    @Input()\n    subtitle: string;\n\n    /**\n     * Heading level of the facet title.\n     */\n    @Input()\n    set headingLevel(level: Nullable<HeadingLevel>) {\n        if (typeof level === 'number') {\n            this._headingLevel = level;\n        } else if (typeof level === 'string') {\n            this._headingLevel = Number.parseInt(level.replace(/\\D/g, ''), 10);\n        }\n    }\n\n    /**\n     * id for the facet\n     */\n    @Input()\n    @HostBinding('attr.role')\n    id = `fd-facet-id-${randomId++}`;\n\n    /**\n     * property that allows the facet to be aligned to the end of the facet group, right-aligned.\n     */\n    @Input()\n    alignEnd = false;\n\n    /** @hidden\n     * the appropriate role for each facet type\n     */\n    @HostBinding('attr.role')\n    get role(): string {\n        return this.type !== 'image' ? 'group' : '';\n    }\n\n    /** @hidden\n     * the appropriate aria-labelledby to associate with the role\n     */\n    @HostBinding('attr.aria-labelledby')\n    get ariaLabelledby(): string {\n        return this.type !== 'image' ? this.titleId : '';\n    }\n\n    /** @hidden */\n    _headingLevel: number;\n\n    /** @hidden\n     * the internal id for the title to be associated with the aria-labelledby\n     */\n    titleId = `fd-facet-title-id-${randomTitleId++}`;\n\n    /** @hidden */\n    constructor(\n        public readonly elementRef: ElementRef<HTMLElement>,\n        private _renderer: Renderer2\n    ) {}\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this._setupAdditionalStyles();\n        this._addAlignmentModifier();\n    }\n\n    /**\n     * @hidden\n     * set up common styles and specific styles based on each facet type\n     */\n    private _setupAdditionalStyles(): void {\n        if (!this.type) {\n            return;\n        }\n        // add type modifier class to host\n        this.elementRef.nativeElement.classList.add(`fd-facet--${this.type}`);\n\n        // add margin end and bottom spacings\n        this.elementRef.nativeElement.classList.add(`fd-margin-end--md`);\n        if (this.type !== 'image') {\n            // add bottom margin to non-image facets\n            this.elementRef.nativeElement.classList.add(`fd-margin-bottom--sm`);\n        }\n\n        switch (this.type) {\n            case 'image':\n                // image should always be on the left\n                this._setStyleToHostElement('order', '-1');\n                break;\n            case 'rating-indicator': {\n                const ratingIndicatorComponent = this.elementRef.nativeElement.querySelector('.fd-rating-indicator');\n\n                if (!ratingIndicatorComponent) {\n                    return;\n                }\n                this._addClassNameToCustomElement(ratingIndicatorComponent, FACET_CLASS_NAME.facetContainer);\n                const ratingIndicatorContainer = ratingIndicatorComponent.querySelector(\n                    '.fd-rating-indicator__container'\n                );\n                if (!ratingIndicatorContainer) {\n                    return;\n                }\n                this._addClassNameToCustomElement(\n                    ratingIndicatorContainer,\n                    FACET_CLASS_NAME.facetRatingIndicatorContainer\n                );\n\n                const ratingIndicatorDynamicText = ratingIndicatorComponent.querySelector(\n                    '.fd-rating-indicator__dynamic-text'\n                );\n                if (!ratingIndicatorDynamicText) {\n                    return;\n                }\n                this._addClassNameToCustomElement(\n                    ratingIndicatorDynamicText,\n                    FACET_CLASS_NAME.facetRatingIndicatorDynamicText\n                );\n                this._addClassNameToCustomElement(ratingIndicatorDynamicText, FACET_CLASS_NAME.marginTopTiny);\n                break;\n            }\n            case 'form': {\n                const formFacetContainer = this.elementRef.nativeElement.querySelectorAll('.fd-facet__container');\n                if (!formFacetContainer) {\n                    return;\n                }\n                formFacetContainer.forEach((container, index) => {\n                    if (index !== formFacetContainer.length - 1) {\n                        this._addClassNameToCustomElement(container, FACET_CLASS_NAME.marginBottomTiny);\n                    }\n                    // if icon+link is presented, add spacing to the icon\n                    const iconComponent = container.querySelector('fd-icon');\n                    if (!iconComponent) {\n                        return;\n                    }\n                    this._addClassNameToCustomElement(iconComponent, FACET_CLASS_NAME.marginEndTiny);\n                });\n\n                break;\n            }\n            case 'key-value': {\n                // add class to object status\n                const objectStatusComponent = this.elementRef.nativeElement.querySelector('.fd-object-status');\n                if (!objectStatusComponent) {\n                    return;\n                }\n                this._addClassNameToCustomElement(objectStatusComponent, FACET_CLASS_NAME.facetObjectStatus);\n\n                // add class to override font-family value\n                const objectStatusText = objectStatusComponent.querySelector('.fd-object-status__text');\n                if (!objectStatusText) {\n                    return;\n                }\n                this._addClassNameToCustomElement(objectStatusText, FACET_CLASS_NAME.facetObjectStatusText);\n\n                // add spacing to object status icon, if present\n                const objectStatusIcon = objectStatusComponent.querySelector('.fd-object-status__icon');\n                if (!objectStatusIcon) {\n                    return;\n                }\n                this._addClassNameToCustomElement(objectStatusIcon, FACET_CLASS_NAME.paddingNone);\n                this._addClassNameToCustomElement(objectStatusIcon, FACET_CLASS_NAME.marginEndTiny);\n                break;\n            }\n            default:\n                break;\n        }\n    }\n\n    /** @hidden\n     * adds the logic for `alignEnd` modifier\n     */\n    private _addAlignmentModifier(): void {\n        if (!this.alignEnd) {\n            return;\n        }\n        addClassNameToFacetElement(this._renderer, this.elementRef.nativeElement, 'fd-facet-align-end');\n\n        // add margins to the left after removing existing right margin\n        this.elementRef.nativeElement.classList.remove(`fd-margin-end--md`);\n        this.elementRef.nativeElement.classList.add(`fd-margin-begin--md`);\n    }\n\n    /** @hidden */\n    private _setStyleToHostElement(attribute: string, value: any): void {\n        this._renderer.setStyle(this.elementRef.nativeElement, attribute, value);\n    }\n\n    /** @hidden */\n    private _addClassNameToCustomElement(element: Element, className: string): void {\n        addClassNameToFacetElement(this._renderer, element, className);\n    }\n}\n","@if (type === 'image') {\n    <ng-template [ngTemplateOutlet]=\"customContentTemplate\"></ng-template>\n} @else {\n    @if (facetTitle) {\n        <div\n            [attr.role]=\"!!_headingLevel ? 'heading' : null\"\n            [attr.aria-level]=\"_headingLevel\"\n            fd-title\n            [headerSize]=\"5\"\n            class=\"fd-margin-bottom--sm\"\n            [id]=\"titleId\"\n        >\n            {{ facetTitle }}\n        </div>\n    }\n    @if (type === 'form') {\n        <ng-template [ngTemplateOutlet]=\"contentTemplate\"></ng-template>\n    }\n    @if (type === 'key-value' || 'custom') {\n        <ng-template [ngTemplateOutlet]=\"customContentTemplate\"></ng-template>\n    }\n    @if (type === 'rating-indicator') {\n        <span fd-form-label>{{ subtitle }}</span>\n        <ng-template [ngTemplateOutlet]=\"contentTemplate\"></ng-template>\n    }\n}\n<ng-template #contentTemplate>\n    <ng-content select=\"fd-facet-content\"></ng-content>\n</ng-template>\n<ng-template #customContentTemplate>\n    <ng-content></ng-content>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { FacetContentComponent } from './content/facet-content.component';\nimport { FacetContainerComponent } from './facet-container.component';\nimport { FacetGroupComponent } from './facet-group.component';\nimport { FacetComponent } from './facet/facet.component';\n\nconst components = [FacetComponent, FacetGroupComponent, FacetContentComponent, FacetContainerComponent];\n/**\n * @deprecated\n * Use direct imports of components and directives.\n */\n@NgModule({\n    imports: [...components],\n    exports: [...components]\n})\nexport class FacetModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fundamental-ngx-core-facets.mjs","sources":["../../../../libs/core/facets/constants.ts","../../../../libs/core/facets/utils.ts","../../../../libs/core/facets/content/facet-content.component.ts","../../../../libs/core/facets/facet-container.component.ts","../../../../libs/core/facets/facet-group.component.ts","../../../../libs/core/facets/facet/facet.component.ts","../../../../libs/core/facets/facet/facet.component.html","../../../../libs/core/facets/facet.module.ts","../../../../libs/core/facets/fundamental-ngx-core-facets.ts"],"sourcesContent":["export const FACET_CLASS_NAME = {\n    facetContainer: 'fd-facet__container',\n    facetRatingIndicatorContainer: 'fd-facet__rating-container',\n    facetRatingIndicatorDynamicText: 'fd-facet__rating-dynamic-text',\n    facetObjectStatus: 'fd-facet__object-status',\n    facetObjectStatusText: 'fd-facet__object-status-text',\n    marginTopTiny: 'fd-margin-top--tiny',\n    marginBottomTiny: 'fd-margin-bottom--tiny',\n    marginEndTiny: 'fd-margin-end--tiny',\n    paddingNone: 'fd-padding--none'\n} as const;\n\nexport type FacetType = 'form' | 'key-value' | 'image' | 'rating-indicator' | 'custom';\n","import { Renderer2 } from '@angular/core';\n\nexport const addClassNameToFacetElement = (renderer: Renderer2, element: Element, className: string): void => {\n    renderer.addClass(element, className);\n};\n","import { ChangeDetectionStrategy, Component, ElementRef, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';\nimport { FACET_CLASS_NAME } from '../constants';\nimport { addClassNameToFacetElement } from '../utils';\n\n@Component({\n    selector: 'fd-facet-content',\n    template: `<ng-content></ng-content>`,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    standalone: true\n})\nexport class FacetContentComponent implements OnInit {\n    /** @hidden */\n    constructor(\n        public readonly elementRef: ElementRef<HTMLElement>,\n        private _renderer: Renderer2\n    ) {}\n\n    /** @hidden */\n    ngOnInit(): void {\n        this._addClassNameToHostElement(FACET_CLASS_NAME.facetContainer);\n    }\n\n    /** @hidden */\n    private _addClassNameToHostElement(className: string): void {\n        addClassNameToFacetElement(this._renderer, this.elementRef.nativeElement, className);\n    }\n}\n","import { ChangeDetectionStrategy, Component, input, ViewEncapsulation } from '@angular/core';\n\nexport type ContainerFlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';\n\nexport type ContainerFlexJustify =\n    | 'start'\n    | 'center'\n    | 'end'\n    | 'flex-start'\n    | 'flex-end'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n    | 'stretch';\n\nexport type ContainerFlexAlign =\n    | 'start'\n    | 'center'\n    | 'end'\n    | 'flex-start'\n    | 'flex-end'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n    | 'stretch'\n    | 'self-start'\n    | 'self-end'\n    | 'baseline';\n\n@Component({\n    selector: 'fd-facet-container',\n    template: ` <ng-content></ng-content> `,\n    styleUrl: './facet-container.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[class.fd-facet-container]': 'true',\n        '[style.gap.rem]': 'flexGap()',\n        '[style.flex-direction]': 'flexDirection()',\n        '[style.align-items]': 'alignItems()',\n        '[style.justify-content]': 'justifyContent()'\n    },\n    standalone: true\n})\nexport class FacetContainerComponent {\n    /**\n     * Value for the direction of the flex container.\n     * Possible values: 'row' | 'row-reverse' | 'column' | 'column-reverse'\n     * Default: 'column'\n     */\n    flexDirection = input<ContainerFlexDirection>('column');\n\n    /**\n     * Value for align-items of the flex container.\n     * Possible values:\n     * 'start', 'center', 'end', 'flex-start', 'flex-end', 'space-between', 'space-around',\n     * 'space-evenly', 'stretch', 'self-start', 'self-end', 'baseline'\n     * Default: 'start'\n     */\n    alignItems = input<ContainerFlexJustify>('start');\n\n    /**\n     * Value for justify-content of the flex container.\n     * Possible values:\n     * 'start', 'center', 'end', 'flex-start', 'flex-end', 'space-between', 'space-around',\n     * 'space-evenly', 'stretch'\n     * Default: 'start'\n     */\n    justifyContent = input<ContainerFlexAlign>('start');\n\n    /**\n     * Value for the flex container gap in rem.\n     * An integer number\n     * Default: 1\n     */\n    flexGap = input(1);\n}\n","import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';\n\nimport { Nullable } from '@fundamental-ngx/cdk/utils';\n\n@Component({\n    selector: 'fd-facet-group',\n    template: ` <ng-content select=\"fd-facet\"></ng-content> `,\n    styleUrl: './facet-group.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[class.fd-facet-group]': 'true',\n        '[attr.aria-label]': 'ariaLabel',\n        role: 'group'\n    },\n    standalone: true\n})\nexport class FacetGroupComponent {\n    /**\n     * the aria label for the facet group\n     */\n    @Input()\n    ariaLabel: Nullable<string>;\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    HostBinding,\n    Input,\n    Renderer2,\n    ViewEncapsulation\n} from '@angular/core';\nimport { Nullable } from '@fundamental-ngx/cdk/utils';\nimport { FormLabelComponent } from '@fundamental-ngx/core/form';\nimport { HeadingLevel } from '@fundamental-ngx/core/shared';\nimport { TitleComponent } from '@fundamental-ngx/core/title';\nimport { FACET_CLASS_NAME, FacetType } from '../constants';\nimport { addClassNameToFacetElement } from '../utils';\n\nlet randomId = 0;\nlet randomTitleId = 0;\n\n@Component({\n    selector: 'fd-facet',\n    templateUrl: './facet.component.html',\n    styleUrl: './facet.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[class.fd-facet]': 'true'\n    },\n    imports: [NgTemplateOutlet, TitleComponent, FormLabelComponent]\n})\nexport class FacetComponent implements AfterViewInit {\n    /** the type of Facet: form, key-value, image, rating-indicator */\n    @Input()\n    type: FacetType;\n\n    /** The facet title.\n     * For eg: for key-value facet, facetTitle is the key and the underlying object status or object number\n     * component is the value.\n     */\n    @Input()\n    facetTitle: string;\n\n    /** An optional subtitle to display in the rating-indicator facet */\n    @Input()\n    subtitle: string;\n\n    /**\n     * Heading level of the facet title.\n     */\n    @Input()\n    set headingLevel(level: Nullable<HeadingLevel>) {\n        if (typeof level === 'number') {\n            this._headingLevel = level;\n        } else if (typeof level === 'string') {\n            this._headingLevel = Number.parseInt(level.replace(/\\D/g, ''), 10);\n        }\n    }\n\n    /**\n     * id for the facet\n     */\n    @Input()\n    @HostBinding('attr.role')\n    id = `fd-facet-id-${randomId++}`;\n\n    /**\n     * property that allows the facet to be aligned to the end of the facet group, right-aligned.\n     */\n    @Input()\n    alignEnd = false;\n\n    /** @hidden\n     * the appropriate role for each facet type\n     */\n    @HostBinding('attr.role')\n    get role(): string {\n        return this.type !== 'image' ? 'group' : '';\n    }\n\n    /** @hidden\n     * the appropriate aria-labelledby to associate with the role\n     */\n    @HostBinding('attr.aria-labelledby')\n    get ariaLabelledby(): string {\n        return this.type !== 'image' ? this.titleId : '';\n    }\n\n    /** @hidden */\n    _headingLevel: number;\n\n    /** @hidden\n     * the internal id for the title to be associated with the aria-labelledby\n     */\n    titleId = `fd-facet-title-id-${randomTitleId++}`;\n\n    /** @hidden */\n    constructor(\n        public readonly elementRef: ElementRef<HTMLElement>,\n        private _renderer: Renderer2\n    ) {}\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this._setupAdditionalStyles();\n        this._addAlignmentModifier();\n    }\n\n    /**\n     * @hidden\n     * set up common styles and specific styles based on each facet type\n     */\n    private _setupAdditionalStyles(): void {\n        if (!this.type) {\n            return;\n        }\n        // add type modifier class to host\n        this.elementRef.nativeElement.classList.add(`fd-facet--${this.type}`);\n\n        // add margin end and bottom spacings\n        this.elementRef.nativeElement.classList.add(`fd-margin-end--md`);\n        if (this.type !== 'image') {\n            // add bottom margin to non-image facets\n            this.elementRef.nativeElement.classList.add(`fd-margin-bottom--sm`);\n        }\n\n        switch (this.type) {\n            case 'image':\n                // image should always be on the left\n                this._setStyleToHostElement('order', '-1');\n                break;\n            case 'rating-indicator': {\n                const ratingIndicatorComponent = this.elementRef.nativeElement.querySelector('.fd-rating-indicator');\n\n                if (!ratingIndicatorComponent) {\n                    return;\n                }\n                this._addClassNameToCustomElement(ratingIndicatorComponent, FACET_CLASS_NAME.facetContainer);\n                const ratingIndicatorContainer = ratingIndicatorComponent.querySelector(\n                    '.fd-rating-indicator__container'\n                );\n                if (!ratingIndicatorContainer) {\n                    return;\n                }\n                this._addClassNameToCustomElement(\n                    ratingIndicatorContainer,\n                    FACET_CLASS_NAME.facetRatingIndicatorContainer\n                );\n\n                const ratingIndicatorDynamicText = ratingIndicatorComponent.querySelector(\n                    '.fd-rating-indicator__dynamic-text'\n                );\n                if (!ratingIndicatorDynamicText) {\n                    return;\n                }\n                this._addClassNameToCustomElement(\n                    ratingIndicatorDynamicText,\n                    FACET_CLASS_NAME.facetRatingIndicatorDynamicText\n                );\n                this._addClassNameToCustomElement(ratingIndicatorDynamicText, FACET_CLASS_NAME.marginTopTiny);\n                break;\n            }\n            case 'form': {\n                const formFacetContainer = this.elementRef.nativeElement.querySelectorAll('.fd-facet__container');\n                if (!formFacetContainer) {\n                    return;\n                }\n                formFacetContainer.forEach((container, index) => {\n                    if (index !== formFacetContainer.length - 1) {\n                        this._addClassNameToCustomElement(container, FACET_CLASS_NAME.marginBottomTiny);\n                    }\n                    // if icon+link is presented, add spacing to the icon\n                    const iconComponent = container.querySelector('fd-icon');\n                    if (!iconComponent) {\n                        return;\n                    }\n                    this._addClassNameToCustomElement(iconComponent, FACET_CLASS_NAME.marginEndTiny);\n                });\n\n                break;\n            }\n            case 'key-value': {\n                // add class to object status\n                const objectStatusComponent = this.elementRef.nativeElement.querySelector('.fd-object-status');\n                if (!objectStatusComponent) {\n                    return;\n                }\n                this._addClassNameToCustomElement(objectStatusComponent, FACET_CLASS_NAME.facetObjectStatus);\n\n                // add class to override font-family value\n                const objectStatusText = objectStatusComponent.querySelector('.fd-object-status__text');\n                if (!objectStatusText) {\n                    return;\n                }\n                this._addClassNameToCustomElement(objectStatusText, FACET_CLASS_NAME.facetObjectStatusText);\n\n                // add spacing to object status icon, if present\n                const objectStatusIcon = objectStatusComponent.querySelector('.fd-object-status__icon');\n                if (!objectStatusIcon) {\n                    return;\n                }\n                this._addClassNameToCustomElement(objectStatusIcon, FACET_CLASS_NAME.paddingNone);\n                this._addClassNameToCustomElement(objectStatusIcon, FACET_CLASS_NAME.marginEndTiny);\n                break;\n            }\n            default:\n                break;\n        }\n    }\n\n    /** @hidden\n     * adds the logic for `alignEnd` modifier\n     */\n    private _addAlignmentModifier(): void {\n        if (!this.alignEnd) {\n            return;\n        }\n        addClassNameToFacetElement(this._renderer, this.elementRef.nativeElement, 'fd-facet-align-end');\n\n        // add margins to the left after removing existing right margin\n        this.elementRef.nativeElement.classList.remove(`fd-margin-end--md`);\n        this.elementRef.nativeElement.classList.add(`fd-margin-begin--md`);\n    }\n\n    /** @hidden */\n    private _setStyleToHostElement(attribute: string, value: any): void {\n        this._renderer.setStyle(this.elementRef.nativeElement, attribute, value);\n    }\n\n    /** @hidden */\n    private _addClassNameToCustomElement(element: Element, className: string): void {\n        addClassNameToFacetElement(this._renderer, element, className);\n    }\n}\n","@if (type === 'image') {\n    <ng-template [ngTemplateOutlet]=\"customContentTemplate\"></ng-template>\n} @else {\n    @if (facetTitle) {\n        <div\n            [attr.role]=\"!!_headingLevel ? 'heading' : null\"\n            [attr.aria-level]=\"_headingLevel\"\n            fd-title\n            [headerSize]=\"5\"\n            class=\"fd-margin-bottom--sm\"\n            [id]=\"titleId\"\n        >\n            {{ facetTitle }}\n        </div>\n    }\n    @if (type === 'form') {\n        <ng-template [ngTemplateOutlet]=\"contentTemplate\"></ng-template>\n    }\n    @if (type === 'key-value' || 'custom') {\n        <ng-template [ngTemplateOutlet]=\"customContentTemplate\"></ng-template>\n    }\n    @if (type === 'rating-indicator') {\n        <span fd-form-label>{{ subtitle }}</span>\n        <ng-template [ngTemplateOutlet]=\"contentTemplate\"></ng-template>\n    }\n}\n<ng-template #contentTemplate>\n    <ng-content select=\"fd-facet-content\"></ng-content>\n</ng-template>\n<ng-template #customContentTemplate>\n    <ng-content></ng-content>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { FacetContentComponent } from './content/facet-content.component';\nimport { FacetContainerComponent } from './facet-container.component';\nimport { FacetGroupComponent } from './facet-group.component';\nimport { FacetComponent } from './facet/facet.component';\n\nconst components = [FacetComponent, FacetGroupComponent, FacetContentComponent, FacetContainerComponent];\n/**\n * @deprecated\n * Use direct imports of components and directives.\n */\n@NgModule({\n    imports: [...components],\n    exports: [...components]\n})\nexport class FacetModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/fundamental-ngx-core-feed-list-item.mjs

@@ -126,7 +126,7 @@ class FeedListItemComponent {
         this.isCollapsed = !this.isCollapsed;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FeedListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: FeedListItemComponent, isStandalone: true, selector: "fd-feed-list-item", inputs: { class: "class", authorTitle: "authorTitle", authorLink: "authorLink", text: "text", maxChars: "maxChars", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", isRichText: "isRichText", mobile: "mobile" }, host: { properties: { "class.fd-feed-list__body": "this.isFeedListItemBody" } }, usesOnChanges: true, ngImport: i0, template: "@if (mobile) {\n    <div class=\"fd-feed-list__wrapper\">\n        <div class=\"fd-feed-list__wrapper fd-feed-list__wrapper--header\">\n            <ng-template [ngTemplateOutlet]=\"avatarContent\"></ng-template>\n            <div>\n                <ng-template [ngTemplateOutlet]=\"author\"></ng-template>\n                <ng-template [ngTemplateOutlet]=\"footerContent\"></ng-template>\n            </div>\n        </div>\n        <ng-template [ngTemplateOutlet]=\"actionContent\"></ng-template>\n    </div>\n} @else {\n    <ng-content select=\"fd-feed-list-avatar\"></ng-content>\n}\n<div class=\"fd-feed-list__content\">\n    @if (!mobile) {\n        <ng-template [ngTemplateOutlet]=\"actionContent\"></ng-template>\n    }\n    <p class=\"fd-feed-list__text\">\n        @if (!isRichText) {\n            <ng-template\n                [ngTemplateOutlet]=\"feedContent\"\n                [ngTemplateOutletContext]=\"{ $implicit: author }\"\n            ></ng-template>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"author\"></ng-template>\n            <fd-formatted-text [htmlText]=\"text\"></fd-formatted-text>\n        }\n    </p>\n    @if (!mobile) {\n        <ng-template [ngTemplateOutlet]=\"footerContent\"></ng-template>\n    }\n</div>\n<ng-template #avatarContent>\n    <ng-content select=\"fd-feed-list-avatar\"></ng-content>\n</ng-template>\n<ng-template #actionContent>\n    <ng-content select=\"fd-feed-list-action\"></ng-content>\n</ng-template>\n<ng-template #footerContent>\n    <ng-content select=\"fd-feed-list-footer\"></ng-content>\n</ng-template>\n<ng-template #author>\n    <span class=\"fd-feed-list__name\">\n        @if (authorLink) {\n            <a\n                target=\"_blank\"\n                fd-link\n                [attr.title]=\"authorTitle\"\n                [attr.href]=\"authorLink | safe: 'url'\"\n                [emphasized]=\"true\"\n            >\n                <ng-template [ngTemplateOutlet]=\"authorTitleTemplate\"></ng-template>\n            </a>\n        } @else {\n            {{ authorTitle }}\n        }\n        :\n    </span>\n</ng-template>\n<ng-template #authorTitleTemplate>\n    {{ authorTitle }}\n</ng-template>\n<ng-template #feedContent let-param>\n    <ng-template [ngTemplateOutlet]=\"param\"></ng-template>\n    <span>\n        {{ isCollapsed ? (text | truncate: maxChars) : text }}\n    </span>\n    @if (!isRichText && hasMore) {\n        <a fd-link class=\"fd-feed-list__link--more\" tabindex=\"0\" (click)=\"toggleTextView()\">{{\n            isCollapsed\n                ? ('coreFeedListItem.moreLabel' | fdTranslate: { count: (text ? text.length : 0) - maxChars })\n                : ('coreFeedListItem.lessLabel' | fdTranslate)\n        }}</a>\n    }\n</ng-template>\n", styles: [".fd-feed-list__name a{max-width:75%;display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:top;white-space:nowrap}.fd-feed-list__thumb{display:flex;align-items:center;justify-content:center;max-width:3rem;flex:0 0 3rem;height:3rem;overflow:hidden}.fd-feed-list__thumb img{width:100%;height:100%;object-fit:contain}.fd-feed-list__link--more{cursor:pointer;text-transform:initial}.fd-feed-list__link--more:hover{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FormattedTextComponent, selector: "fd-formatted-text", inputs: ["htmlText", "convertedLinksDefaultTarget", "height", "width"], exportAs: ["fd-formatted-text"] }, { kind: "component", type: LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }, { 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: FeedListItemComponent, isStandalone: true, selector: "fd-feed-list-item", inputs: { class: "class", authorTitle: "authorTitle", authorLink: "authorLink", text: "text", maxChars: "maxChars", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", isRichText: "isRichText", mobile: "mobile" }, host: { properties: { "class.fd-feed-list__body": "this.isFeedListItemBody" } }, usesOnChanges: true, ngImport: i0, template: "@if (mobile) {\n    <div class=\"fd-feed-list__wrapper\">\n        <div class=\"fd-feed-list__wrapper fd-feed-list__wrapper--header\">\n            <ng-template [ngTemplateOutlet]=\"avatarContent\"></ng-template>\n            <div>\n                <ng-template [ngTemplateOutlet]=\"author\"></ng-template>\n                <ng-template [ngTemplateOutlet]=\"footerContent\"></ng-template>\n            </div>\n        </div>\n        <ng-template [ngTemplateOutlet]=\"actionContent\"></ng-template>\n    </div>\n} @else {\n    <ng-content select=\"fd-feed-list-avatar\"></ng-content>\n}\n<div class=\"fd-feed-list__content\">\n    @if (!mobile) {\n        <ng-template [ngTemplateOutlet]=\"actionContent\"></ng-template>\n    }\n    <p class=\"fd-feed-list__text\">\n        @if (!isRichText) {\n            <ng-template\n                [ngTemplateOutlet]=\"feedContent\"\n                [ngTemplateOutletContext]=\"{ $implicit: author }\"\n            ></ng-template>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"author\"></ng-template>\n            <fd-formatted-text [htmlText]=\"text\"></fd-formatted-text>\n        }\n    </p>\n    @if (!mobile) {\n        <ng-template [ngTemplateOutlet]=\"footerContent\"></ng-template>\n    }\n</div>\n<ng-template #avatarContent>\n    <ng-content select=\"fd-feed-list-avatar\"></ng-content>\n</ng-template>\n<ng-template #actionContent>\n    <ng-content select=\"fd-feed-list-action\"></ng-content>\n</ng-template>\n<ng-template #footerContent>\n    <ng-content select=\"fd-feed-list-footer\"></ng-content>\n</ng-template>\n<ng-template #author>\n    <span class=\"fd-feed-list__name\">\n        @if (authorLink) {\n            <a\n                target=\"_blank\"\n                fd-link\n                [attr.title]=\"authorTitle\"\n                [attr.href]=\"authorLink | safe: 'url'\"\n                [emphasized]=\"true\"\n            >\n                <ng-template [ngTemplateOutlet]=\"authorTitleTemplate\"></ng-template>\n            </a>\n        } @else {\n            {{ authorTitle }}\n        }\n        :\n    </span>\n</ng-template>\n<ng-template #authorTitleTemplate>\n    {{ authorTitle }}\n</ng-template>\n<ng-template #feedContent let-param>\n    <ng-template [ngTemplateOutlet]=\"param\"></ng-template>\n    <span>\n        {{ isCollapsed ? (text | truncate: maxChars) : text }}\n    </span>\n    @if (!isRichText && hasMore) {\n        <a fd-link class=\"fd-feed-list__link--more\" tabindex=\"0\" (click)=\"toggleTextView()\">{{\n            (isCollapsed\n                ? ('coreFeedListItem.moreLabel' | fdTranslate: { count: (text ? text.length : 0) - maxChars })\n                : ('coreFeedListItem.lessLabel' | fdTranslate))()\n        }}</a>\n    }\n</ng-template>\n", styles: [".fd-feed-list__name a{max-width:75%;display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:top;white-space:nowrap}.fd-feed-list__thumb{display:flex;align-items:center;justify-content:center;max-width:3rem;flex:0 0 3rem;height:3rem;overflow:hidden}.fd-feed-list__thumb img{width:100%;height:100%;object-fit:contain}.fd-feed-list__link--more{cursor:pointer;text-transform:initial}.fd-feed-list__link--more:hover{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FormattedTextComponent, selector: "fd-formatted-text", inputs: ["htmlText", "convertedLinksDefaultTarget", "height", "width"], exportAs: ["fd-formatted-text"] }, { kind: "component", type: LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     applyCssClass,
@@ -136,7 +136,7 @@ __decorate([
 ], FeedListItemComponent.prototype, "buildComponentCssClass", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FeedListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fd-feed-list-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, FormattedTextComponent, LinkComponent, SafePipe, TruncatePipe, FdTranslatePipe], template: "@if (mobile) {\n    <div class=\"fd-feed-list__wrapper\">\n        <div class=\"fd-feed-list__wrapper fd-feed-list__wrapper--header\">\n            <ng-template [ngTemplateOutlet]=\"avatarContent\"></ng-template>\n            <div>\n                <ng-template [ngTemplateOutlet]=\"author\"></ng-template>\n                <ng-template [ngTemplateOutlet]=\"footerContent\"></ng-template>\n            </div>\n        </div>\n        <ng-template [ngTemplateOutlet]=\"actionContent\"></ng-template>\n    </div>\n} @else {\n    <ng-content select=\"fd-feed-list-avatar\"></ng-content>\n}\n<div class=\"fd-feed-list__content\">\n    @if (!mobile) {\n        <ng-template [ngTemplateOutlet]=\"actionContent\"></ng-template>\n    }\n    <p class=\"fd-feed-list__text\">\n        @if (!isRichText) {\n            <ng-template\n                [ngTemplateOutlet]=\"feedContent\"\n                [ngTemplateOutletContext]=\"{ $implicit: author }\"\n            ></ng-template>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"author\"></ng-template>\n            <fd-formatted-text [htmlText]=\"text\"></fd-formatted-text>\n        }\n    </p>\n    @if (!mobile) {\n        <ng-template [ngTemplateOutlet]=\"footerContent\"></ng-template>\n    }\n</div>\n<ng-template #avatarContent>\n    <ng-content select=\"fd-feed-list-avatar\"></ng-content>\n</ng-template>\n<ng-template #actionContent>\n    <ng-content select=\"fd-feed-list-action\"></ng-content>\n</ng-template>\n<ng-template #footerContent>\n    <ng-content select=\"fd-feed-list-footer\"></ng-content>\n</ng-template>\n<ng-template #author>\n    <span class=\"fd-feed-list__name\">\n        @if (authorLink) {\n            <a\n                target=\"_blank\"\n                fd-link\n                [attr.title]=\"authorTitle\"\n                [attr.href]=\"authorLink | safe: 'url'\"\n                [emphasized]=\"true\"\n            >\n                <ng-template [ngTemplateOutlet]=\"authorTitleTemplate\"></ng-template>\n            </a>\n        } @else {\n            {{ authorTitle }}\n        }\n        :\n    </span>\n</ng-template>\n<ng-template #authorTitleTemplate>\n    {{ authorTitle }}\n</ng-template>\n<ng-template #feedContent let-param>\n    <ng-template [ngTemplateOutlet]=\"param\"></ng-template>\n    <span>\n        {{ isCollapsed ? (text | truncate: maxChars) : text }}\n    </span>\n    @if (!isRichText && hasMore) {\n        <a fd-link class=\"fd-feed-list__link--more\" tabindex=\"0\" (click)=\"toggleTextView()\">{{\n            isCollapsed\n                ? ('coreFeedListItem.moreLabel' | fdTranslate: { count: (text ? text.length : 0) - maxChars })\n                : ('coreFeedListItem.lessLabel' | fdTranslate)\n        }}</a>\n    }\n</ng-template>\n", styles: [".fd-feed-list__name a{max-width:75%;display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:top;white-space:nowrap}.fd-feed-list__thumb{display:flex;align-items:center;justify-content:center;max-width:3rem;flex:0 0 3rem;height:3rem;overflow:hidden}.fd-feed-list__thumb img{width:100%;height:100%;object-fit:contain}.fd-feed-list__link--more{cursor:pointer;text-transform:initial}.fd-feed-list__link--more:hover{text-decoration:underline}\n"] }]
+            args: [{ selector: 'fd-feed-list-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, FormattedTextComponent, LinkComponent, SafePipe, TruncatePipe, FdTranslatePipe], template: "@if (mobile) {\n    <div class=\"fd-feed-list__wrapper\">\n        <div class=\"fd-feed-list__wrapper fd-feed-list__wrapper--header\">\n            <ng-template [ngTemplateOutlet]=\"avatarContent\"></ng-template>\n            <div>\n                <ng-template [ngTemplateOutlet]=\"author\"></ng-template>\n                <ng-template [ngTemplateOutlet]=\"footerContent\"></ng-template>\n            </div>\n        </div>\n        <ng-template [ngTemplateOutlet]=\"actionContent\"></ng-template>\n    </div>\n} @else {\n    <ng-content select=\"fd-feed-list-avatar\"></ng-content>\n}\n<div class=\"fd-feed-list__content\">\n    @if (!mobile) {\n        <ng-template [ngTemplateOutlet]=\"actionContent\"></ng-template>\n    }\n    <p class=\"fd-feed-list__text\">\n        @if (!isRichText) {\n            <ng-template\n                [ngTemplateOutlet]=\"feedContent\"\n                [ngTemplateOutletContext]=\"{ $implicit: author }\"\n            ></ng-template>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"author\"></ng-template>\n            <fd-formatted-text [htmlText]=\"text\"></fd-formatted-text>\n        }\n    </p>\n    @if (!mobile) {\n        <ng-template [ngTemplateOutlet]=\"footerContent\"></ng-template>\n    }\n</div>\n<ng-template #avatarContent>\n    <ng-content select=\"fd-feed-list-avatar\"></ng-content>\n</ng-template>\n<ng-template #actionContent>\n    <ng-content select=\"fd-feed-list-action\"></ng-content>\n</ng-template>\n<ng-template #footerContent>\n    <ng-content select=\"fd-feed-list-footer\"></ng-content>\n</ng-template>\n<ng-template #author>\n    <span class=\"fd-feed-list__name\">\n        @if (authorLink) {\n            <a\n                target=\"_blank\"\n                fd-link\n                [attr.title]=\"authorTitle\"\n                [attr.href]=\"authorLink | safe: 'url'\"\n                [emphasized]=\"true\"\n            >\n                <ng-template [ngTemplateOutlet]=\"authorTitleTemplate\"></ng-template>\n            </a>\n        } @else {\n            {{ authorTitle }}\n        }\n        :\n    </span>\n</ng-template>\n<ng-template #authorTitleTemplate>\n    {{ authorTitle }}\n</ng-template>\n<ng-template #feedContent let-param>\n    <ng-template [ngTemplateOutlet]=\"param\"></ng-template>\n    <span>\n        {{ isCollapsed ? (text | truncate: maxChars) : text }}\n    </span>\n    @if (!isRichText && hasMore) {\n        <a fd-link class=\"fd-feed-list__link--more\" tabindex=\"0\" (click)=\"toggleTextView()\">{{\n            (isCollapsed\n                ? ('coreFeedListItem.moreLabel' | fdTranslate: { count: (text ? text.length : 0) - maxChars })\n                : ('coreFeedListItem.lessLabel' | fdTranslate))()\n        }}</a>\n    }\n</ng-template>\n", styles: [".fd-feed-list__name a{max-width:75%;display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:top;white-space:nowrap}.fd-feed-list__thumb{display:flex;align-items:center;justify-content:center;max-width:3rem;flex:0 0 3rem;height:3rem;overflow:hidden}.fd-feed-list__thumb img{width:100%;height:100%;object-fit:contain}.fd-feed-list__link--more{cursor:pointer;text-transform:initial}.fd-feed-list__link--more:hover{text-decoration:underline}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { class: [{
                 type: Input
             }], authorTitle: [{

package/fesm2022/fundamental-ngx-core-feed-list-item.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-core-feed-list-item.mjs","sources":["../../../../libs/core/feed-list-item/components/feed-list-action/feed-list-action.component.ts","../../../../libs/core/feed-list-item/components/feed-list-avatar/feed-list-avatar.component.ts","../../../../libs/core/feed-list-item/components/feed-list-footer/feed-list-footer.component.ts","../../../../libs/core/feed-list-item/constants.ts","../../../../libs/core/feed-list-item/components/item/feed-list-item.component.ts","../../../../libs/core/feed-list-item/components/item/feed-list-item.component.html","../../../../libs/core/feed-list-item/components/list/feed-list.component.ts","../../../../libs/core/feed-list-item/components/list/feed-list.component.html","../../../../libs/core/feed-list-item/directives/byline.directive.ts","../../../../libs/core/feed-list-item/feed-list-item.module.ts","../../../../libs/core/feed-list-item/fundamental-ngx-core-feed-list-item.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n    selector: 'fd-feed-list-action',\n    template: '<ng-content></ng-content>',\n    host: { class: 'fd-feed-list__actions' },\n    standalone: true\n})\nexport class FeedListActionComponent {}\n","import { Component } from '@angular/core';\n\n@Component({\n    selector: 'fd-feed-list-avatar',\n    template: '<ng-content></ng-content>',\n    host: { class: 'fd-feed-list__thumb' },\n    standalone: true\n})\nexport class FeedListAvatarComponent {}\n","import { Component } from '@angular/core';\n\n@Component({\n    selector: 'fd-feed-list-footer',\n    template: '<ng-content></ng-content>',\n    host: { class: 'fd-feed-list__footer' },\n    standalone: true\n})\nexport class FeedListFooterComponent {}\n","export const CSS_CLASS_NAME = {\n    list: 'fd-feed-list',\n    item: 'fd-feed-list__item'\n};\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    HostBinding,\n    Input,\n    OnChanges,\n    OnInit,\n    SimpleChanges,\n    ViewEncapsulation\n} from '@angular/core';\nimport { CssClassBuilder, Nullable, applyCssClass } from '@fundamental-ngx/cdk/utils';\n\nimport { NgTemplateOutlet } from '@angular/common';\nimport { SafePipe, TruncatePipe } from '@fundamental-ngx/cdk/utils';\nimport { FormattedTextComponent } from '@fundamental-ngx/core/formatted-text';\nimport { LinkComponent } from '@fundamental-ngx/core/link';\nimport { FdTranslatePipe } from '@fundamental-ngx/i18n';\nimport { CSS_CLASS_NAME } from '../../constants';\n\n@Component({\n    selector: 'fd-feed-list-item',\n    templateUrl: './feed-list-item.component.html',\n    styleUrl: './feed-list-item.component.scss',\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [NgTemplateOutlet, FormattedTextComponent, LinkComponent, SafePipe, TruncatePipe, FdTranslatePipe]\n})\nexport class FeedListItemComponent implements OnInit, OnChanges, CssClassBuilder {\n    /** User's custom classes */\n    @Input()\n    class: string;\n\n    /**\n     * Author of feed\n     */\n    @Input()\n    authorTitle: string;\n\n    /**\n     * Link to Author of feed\n     */\n    @Input()\n    authorLink: Nullable<string>;\n\n    /**\n     * Feed text\n     */\n    @Input()\n    text: string;\n\n    /**\n     * Max preview characters of Feed text. If you have more than max characters text, you can toggle preview/full text with more/less button.\n     */\n    @Input()\n    maxChars: number;\n\n    /**\n     * Sets the `aria-label` attribute to the element.\n     */\n    @Input()\n    ariaLabel = '';\n\n    /**\n     * aria-labelledby for element describing.\n     */\n    @Input()\n    ariaLabelledby: string;\n\n    /**\n     * Apply rich feed text, please note - we use a formatted text component with this option, it has a list of controlled tags and attibutes.\n     * This feature should be handled with care as it allows for countless custom layouts.\n     */\n    @Input()\n    isRichText = false;\n\n    /**\n     * Apply mobile view\n     */\n    @Input()\n    mobile = false;\n\n    /**\n     * Apply body class by default\n     */\n    @HostBinding('class.fd-feed-list__body')\n    isFeedListItemBody = true;\n\n    /** @hidden */\n    maxCharsAtDefault = false;\n\n    /**\n     * Shows toggle state of feed text - more or less\n     */\n    isCollapsed = true;\n\n    /**\n     * Shows have you more line than max lines\n     */\n    hasMore = false;\n\n    /** @hidden */\n    constructor(public readonly elementRef: ElementRef) {}\n\n    /** @hidden\n     * CssClassBuilder interface implementation\n     * function must return single string\n     * function is responsible for order which css classes are applied\n     */\n    @applyCssClass\n    buildComponentCssClass(): string[] {\n        return [CSS_CLASS_NAME.item, this.class, this.isRichText ? '' : `${CSS_CLASS_NAME.item}--collapsible`];\n    }\n\n    /** @hidden */\n    setHasMore(): void {\n        if (this.text) {\n            this.hasMore = this.text.length > this.maxChars;\n        }\n    }\n\n    /** @hidden */\n    setDefaultMaxChars(): void {\n        this.maxChars = this.mobile ? 300 : 500;\n    }\n\n    /** @hidden */\n    ngOnInit(): void {\n        this.buildComponentCssClass();\n        if (!this.maxChars) {\n            this.setDefaultMaxChars();\n            this.maxCharsAtDefault = true;\n        }\n        this.setHasMore();\n    }\n\n    /** @hidden */\n    ngOnChanges(changes: SimpleChanges): void {\n        if ('class' in changes || 'isRichText' in changes) {\n            this.buildComponentCssClass();\n        }\n        this.maxCharsAtDefault && this.setDefaultMaxChars();\n        this.setHasMore();\n    }\n\n    /** @hidden */\n    toggleTextView(): void {\n        this.isCollapsed = !this.isCollapsed;\n    }\n}\n","@if (mobile) {\n    <div class=\"fd-feed-list__wrapper\">\n        <div class=\"fd-feed-list__wrapper fd-feed-list__wrapper--header\">\n            <ng-template [ngTemplateOutlet]=\"avatarContent\"></ng-template>\n            <div>\n                <ng-template [ngTemplateOutlet]=\"author\"></ng-template>\n                <ng-template [ngTemplateOutlet]=\"footerContent\"></ng-template>\n            </div>\n        </div>\n        <ng-template [ngTemplateOutlet]=\"actionContent\"></ng-template>\n    </div>\n} @else {\n    <ng-content select=\"fd-feed-list-avatar\"></ng-content>\n}\n<div class=\"fd-feed-list__content\">\n    @if (!mobile) {\n        <ng-template [ngTemplateOutlet]=\"actionContent\"></ng-template>\n    }\n    <p class=\"fd-feed-list__text\">\n        @if (!isRichText) {\n            <ng-template\n                [ngTemplateOutlet]=\"feedContent\"\n                [ngTemplateOutletContext]=\"{ $implicit: author }\"\n            ></ng-template>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"author\"></ng-template>\n            <fd-formatted-text [htmlText]=\"text\"></fd-formatted-text>\n        }\n    </p>\n    @if (!mobile) {\n        <ng-template [ngTemplateOutlet]=\"footerContent\"></ng-template>\n    }\n</div>\n<ng-template #avatarContent>\n    <ng-content select=\"fd-feed-list-avatar\"></ng-content>\n</ng-template>\n<ng-template #actionContent>\n    <ng-content select=\"fd-feed-list-action\"></ng-content>\n</ng-template>\n<ng-template #footerContent>\n    <ng-content select=\"fd-feed-list-footer\"></ng-content>\n</ng-template>\n<ng-template #author>\n    <span class=\"fd-feed-list__name\">\n        @if (authorLink) {\n            <a\n                target=\"_blank\"\n                fd-link\n                [attr.title]=\"authorTitle\"\n                [attr.href]=\"authorLink | safe: 'url'\"\n                [emphasized]=\"true\"\n            >\n                <ng-template [ngTemplateOutlet]=\"authorTitleTemplate\"></ng-template>\n            </a>\n        } @else {\n            {{ authorTitle }}\n        }\n        :\n    </span>\n</ng-template>\n<ng-template #authorTitleTemplate>\n    {{ authorTitle }}\n</ng-template>\n<ng-template #feedContent let-param>\n    <ng-template [ngTemplateOutlet]=\"param\"></ng-template>\n    <span>\n        {{ isCollapsed ? (text | truncate: maxChars) : text }}\n    </span>\n    @if (!isRichText && hasMore) {\n        <a fd-link class=\"fd-feed-list__link--more\" tabindex=\"0\" (click)=\"toggleTextView()\">{{\n            isCollapsed\n                ? ('coreFeedListItem.moreLabel' | fdTranslate: { count: (text ? text.length : 0) - maxChars })\n                : ('coreFeedListItem.lessLabel' | fdTranslate)\n        }}</a>\n    }\n</ng-template>\n","import {\n    AfterContentChecked,\n    ChangeDetectionStrategy,\n    Component,\n    ContentChildren,\n    ElementRef,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    QueryList,\n    SimpleChanges,\n    ViewEncapsulation\n} from '@angular/core';\nimport { CssClassBuilder, applyCssClass } from '@fundamental-ngx/cdk/utils';\nimport { Subscription } from 'rxjs';\n\nimport { CSS_CLASS_NAME } from '../../constants';\nimport { FeedListItemComponent } from '../item/feed-list-item.component';\n\n@Component({\n    selector: 'fd-feed-list',\n    templateUrl: './feed-list.component.html',\n    styleUrl: './feed-list.component.scss',\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: true\n})\nexport class FeedListComponent implements OnInit, AfterContentChecked, OnDestroy, OnChanges, CssClassBuilder {\n    /** User's custom classes */\n    @Input()\n    class: string;\n    /**\n     * Sets the `aria-label` attribute to the element.\n     */\n    @Input()\n    ariaLabel = '';\n    /**\n     * aria-labelledby for element describing.\n     */\n    @Input()\n    ariaLabelledby: string;\n    /**\n     * Apply mobile view\n     */\n    @Input()\n    mobile = false;\n    /**\n     * Feed list items will be display in a group.\n     */\n    @Input()\n    isGroup = true;\n    /**\n     * It removes border if items are displaying in a group.\n     */\n    @Input()\n    borderLess = false;\n    /**\n     * Gets feed list items\n     */\n    @ContentChildren(FeedListItemComponent)\n    feedItems: QueryList<FeedListItemComponent>;\n\n    /** @hidden */\n    private $feedItemChanges: Subscription;\n\n    /** @hidden */\n    constructor(public readonly elementRef: ElementRef) {}\n\n    /** @hidden\n     * CssClassBuilder interface implementation\n     * function must return single string\n     * function is responsible for order which css classes are applied\n     */\n    @applyCssClass\n    buildComponentCssClass(): string[] {\n        return [\n            CSS_CLASS_NAME.list,\n            this.class,\n            this.borderLess ? `${CSS_CLASS_NAME.list}--no-border` : '',\n            this.isGroup ? `${CSS_CLASS_NAME.list}--group` : '',\n            this.mobile ? `${CSS_CLASS_NAME.list}--s` : ''\n        ];\n    }\n    /** @hidden */\n    ngAfterContentChecked(): void {\n        this._refreshItems();\n        this._listenOnFeedItems();\n    }\n    /** @hidden */\n    ngOnInit(): void {\n        this.buildComponentCssClass();\n    }\n\n    /** @hidden */\n    ngOnChanges(changes: SimpleChanges): void {\n        if ('mobile' in changes || 'borderLess' in changes) {\n            this.buildComponentCssClass();\n            this._refreshItems();\n        }\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        if (this.$feedItemChanges) {\n            this.$feedItemChanges.unsubscribe();\n        }\n    }\n\n    /** @hidden */\n    private _listenOnFeedItems(): void {\n        this.$feedItemChanges = this.feedItems.changes.subscribe(() => this._refreshItems());\n    }\n\n    /** @hidden */\n    private _refreshItems(): void {\n        (this.feedItems || []).forEach((feedItem) => {\n            feedItem.mobile = this.mobile;\n            if (feedItem.maxCharsAtDefault && this.mobile) {\n                feedItem.setDefaultMaxChars();\n                feedItem.setHasMore();\n            }\n        });\n    }\n}\n","<ng-content select=\"fd-feed-list-item\"></ng-content>\n","import { Directive, HostBinding } from '@angular/core';\n\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: '[fd-item-footer-byline]',\n    standalone: true\n})\nexport class FeedListFooterBylineDirective {\n    /** @hidden */\n    @HostBinding('class.fd-feed-list__footer--byline')\n    fdBylineClass = true;\n}\n","import { NgModule } from '@angular/core';\n\nimport { FeedListActionComponent } from './components/feed-list-action/feed-list-action.component';\nimport { FeedListAvatarComponent } from './components/feed-list-avatar/feed-list-avatar.component';\nimport { FeedListFooterComponent } from './components/feed-list-footer/feed-list-footer.component';\nimport { FeedListItemComponent } from './components/item/feed-list-item.component';\nimport { FeedListComponent } from './components/list/feed-list.component';\nimport { FeedListFooterBylineDirective } from './directives/byline.directive';\n\nconst components = [\n    FeedListComponent,\n    FeedListItemComponent,\n    FeedListAvatarComponent,\n    FeedListActionComponent,\n    FeedListFooterComponent,\n    FeedListFooterBylineDirective\n];\n\n/**\n * @deprecated\n * Use direct imports of components and directives.\n */\n@NgModule({\n    imports: [...components],\n    exports: [...components]\n})\nexport class FeedListItemModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fundamental-ngx-core-feed-list-item.mjs","sources":["../../../../libs/core/feed-list-item/components/feed-list-action/feed-list-action.component.ts","../../../../libs/core/feed-list-item/components/feed-list-avatar/feed-list-avatar.component.ts","../../../../libs/core/feed-list-item/components/feed-list-footer/feed-list-footer.component.ts","../../../../libs/core/feed-list-item/constants.ts","../../../../libs/core/feed-list-item/components/item/feed-list-item.component.ts","../../../../libs/core/feed-list-item/components/item/feed-list-item.component.html","../../../../libs/core/feed-list-item/components/list/feed-list.component.ts","../../../../libs/core/feed-list-item/components/list/feed-list.component.html","../../../../libs/core/feed-list-item/directives/byline.directive.ts","../../../../libs/core/feed-list-item/feed-list-item.module.ts","../../../../libs/core/feed-list-item/fundamental-ngx-core-feed-list-item.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n    selector: 'fd-feed-list-action',\n    template: '<ng-content></ng-content>',\n    host: { class: 'fd-feed-list__actions' },\n    standalone: true\n})\nexport class FeedListActionComponent {}\n","import { Component } from '@angular/core';\n\n@Component({\n    selector: 'fd-feed-list-avatar',\n    template: '<ng-content></ng-content>',\n    host: { class: 'fd-feed-list__thumb' },\n    standalone: true\n})\nexport class FeedListAvatarComponent {}\n","import { Component } from '@angular/core';\n\n@Component({\n    selector: 'fd-feed-list-footer',\n    template: '<ng-content></ng-content>',\n    host: { class: 'fd-feed-list__footer' },\n    standalone: true\n})\nexport class FeedListFooterComponent {}\n","export const CSS_CLASS_NAME = {\n    list: 'fd-feed-list',\n    item: 'fd-feed-list__item'\n};\n","import {\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    HostBinding,\n    Input,\n    OnChanges,\n    OnInit,\n    SimpleChanges,\n    ViewEncapsulation\n} from '@angular/core';\nimport { CssClassBuilder, Nullable, applyCssClass } from '@fundamental-ngx/cdk/utils';\n\nimport { NgTemplateOutlet } from '@angular/common';\nimport { SafePipe, TruncatePipe } from '@fundamental-ngx/cdk/utils';\nimport { FormattedTextComponent } from '@fundamental-ngx/core/formatted-text';\nimport { LinkComponent } from '@fundamental-ngx/core/link';\nimport { FdTranslatePipe } from '@fundamental-ngx/i18n';\nimport { CSS_CLASS_NAME } from '../../constants';\n\n@Component({\n    selector: 'fd-feed-list-item',\n    templateUrl: './feed-list-item.component.html',\n    styleUrl: './feed-list-item.component.scss',\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [NgTemplateOutlet, FormattedTextComponent, LinkComponent, SafePipe, TruncatePipe, FdTranslatePipe]\n})\nexport class FeedListItemComponent implements OnInit, OnChanges, CssClassBuilder {\n    /** User's custom classes */\n    @Input()\n    class: string;\n\n    /**\n     * Author of feed\n     */\n    @Input()\n    authorTitle: string;\n\n    /**\n     * Link to Author of feed\n     */\n    @Input()\n    authorLink: Nullable<string>;\n\n    /**\n     * Feed text\n     */\n    @Input()\n    text: string;\n\n    /**\n     * Max preview characters of Feed text. If you have more than max characters text, you can toggle preview/full text with more/less button.\n     */\n    @Input()\n    maxChars: number;\n\n    /**\n     * Sets the `aria-label` attribute to the element.\n     */\n    @Input()\n    ariaLabel = '';\n\n    /**\n     * aria-labelledby for element describing.\n     */\n    @Input()\n    ariaLabelledby: string;\n\n    /**\n     * Apply rich feed text, please note - we use a formatted text component with this option, it has a list of controlled tags and attibutes.\n     * This feature should be handled with care as it allows for countless custom layouts.\n     */\n    @Input()\n    isRichText = false;\n\n    /**\n     * Apply mobile view\n     */\n    @Input()\n    mobile = false;\n\n    /**\n     * Apply body class by default\n     */\n    @HostBinding('class.fd-feed-list__body')\n    isFeedListItemBody = true;\n\n    /** @hidden */\n    maxCharsAtDefault = false;\n\n    /**\n     * Shows toggle state of feed text - more or less\n     */\n    isCollapsed = true;\n\n    /**\n     * Shows have you more line than max lines\n     */\n    hasMore = false;\n\n    /** @hidden */\n    constructor(public readonly elementRef: ElementRef) {}\n\n    /** @hidden\n     * CssClassBuilder interface implementation\n     * function must return single string\n     * function is responsible for order which css classes are applied\n     */\n    @applyCssClass\n    buildComponentCssClass(): string[] {\n        return [CSS_CLASS_NAME.item, this.class, this.isRichText ? '' : `${CSS_CLASS_NAME.item}--collapsible`];\n    }\n\n    /** @hidden */\n    setHasMore(): void {\n        if (this.text) {\n            this.hasMore = this.text.length > this.maxChars;\n        }\n    }\n\n    /** @hidden */\n    setDefaultMaxChars(): void {\n        this.maxChars = this.mobile ? 300 : 500;\n    }\n\n    /** @hidden */\n    ngOnInit(): void {\n        this.buildComponentCssClass();\n        if (!this.maxChars) {\n            this.setDefaultMaxChars();\n            this.maxCharsAtDefault = true;\n        }\n        this.setHasMore();\n    }\n\n    /** @hidden */\n    ngOnChanges(changes: SimpleChanges): void {\n        if ('class' in changes || 'isRichText' in changes) {\n            this.buildComponentCssClass();\n        }\n        this.maxCharsAtDefault && this.setDefaultMaxChars();\n        this.setHasMore();\n    }\n\n    /** @hidden */\n    toggleTextView(): void {\n        this.isCollapsed = !this.isCollapsed;\n    }\n}\n","@if (mobile) {\n    <div class=\"fd-feed-list__wrapper\">\n        <div class=\"fd-feed-list__wrapper fd-feed-list__wrapper--header\">\n            <ng-template [ngTemplateOutlet]=\"avatarContent\"></ng-template>\n            <div>\n                <ng-template [ngTemplateOutlet]=\"author\"></ng-template>\n                <ng-template [ngTemplateOutlet]=\"footerContent\"></ng-template>\n            </div>\n        </div>\n        <ng-template [ngTemplateOutlet]=\"actionContent\"></ng-template>\n    </div>\n} @else {\n    <ng-content select=\"fd-feed-list-avatar\"></ng-content>\n}\n<div class=\"fd-feed-list__content\">\n    @if (!mobile) {\n        <ng-template [ngTemplateOutlet]=\"actionContent\"></ng-template>\n    }\n    <p class=\"fd-feed-list__text\">\n        @if (!isRichText) {\n            <ng-template\n                [ngTemplateOutlet]=\"feedContent\"\n                [ngTemplateOutletContext]=\"{ $implicit: author }\"\n            ></ng-template>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"author\"></ng-template>\n            <fd-formatted-text [htmlText]=\"text\"></fd-formatted-text>\n        }\n    </p>\n    @if (!mobile) {\n        <ng-template [ngTemplateOutlet]=\"footerContent\"></ng-template>\n    }\n</div>\n<ng-template #avatarContent>\n    <ng-content select=\"fd-feed-list-avatar\"></ng-content>\n</ng-template>\n<ng-template #actionContent>\n    <ng-content select=\"fd-feed-list-action\"></ng-content>\n</ng-template>\n<ng-template #footerContent>\n    <ng-content select=\"fd-feed-list-footer\"></ng-content>\n</ng-template>\n<ng-template #author>\n    <span class=\"fd-feed-list__name\">\n        @if (authorLink) {\n            <a\n                target=\"_blank\"\n                fd-link\n                [attr.title]=\"authorTitle\"\n                [attr.href]=\"authorLink | safe: 'url'\"\n                [emphasized]=\"true\"\n            >\n                <ng-template [ngTemplateOutlet]=\"authorTitleTemplate\"></ng-template>\n            </a>\n        } @else {\n            {{ authorTitle }}\n        }\n        :\n    </span>\n</ng-template>\n<ng-template #authorTitleTemplate>\n    {{ authorTitle }}\n</ng-template>\n<ng-template #feedContent let-param>\n    <ng-template [ngTemplateOutlet]=\"param\"></ng-template>\n    <span>\n        {{ isCollapsed ? (text | truncate: maxChars) : text }}\n    </span>\n    @if (!isRichText && hasMore) {\n        <a fd-link class=\"fd-feed-list__link--more\" tabindex=\"0\" (click)=\"toggleTextView()\">{{\n            (isCollapsed\n                ? ('coreFeedListItem.moreLabel' | fdTranslate: { count: (text ? text.length : 0) - maxChars })\n                : ('coreFeedListItem.lessLabel' | fdTranslate))()\n        }}</a>\n    }\n</ng-template>\n","import {\n    AfterContentChecked,\n    ChangeDetectionStrategy,\n    Component,\n    ContentChildren,\n    ElementRef,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    QueryList,\n    SimpleChanges,\n    ViewEncapsulation\n} from '@angular/core';\nimport { CssClassBuilder, applyCssClass } from '@fundamental-ngx/cdk/utils';\nimport { Subscription } from 'rxjs';\n\nimport { CSS_CLASS_NAME } from '../../constants';\nimport { FeedListItemComponent } from '../item/feed-list-item.component';\n\n@Component({\n    selector: 'fd-feed-list',\n    templateUrl: './feed-list.component.html',\n    styleUrl: './feed-list.component.scss',\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: true\n})\nexport class FeedListComponent implements OnInit, AfterContentChecked, OnDestroy, OnChanges, CssClassBuilder {\n    /** User's custom classes */\n    @Input()\n    class: string;\n    /**\n     * Sets the `aria-label` attribute to the element.\n     */\n    @Input()\n    ariaLabel = '';\n    /**\n     * aria-labelledby for element describing.\n     */\n    @Input()\n    ariaLabelledby: string;\n    /**\n     * Apply mobile view\n     */\n    @Input()\n    mobile = false;\n    /**\n     * Feed list items will be display in a group.\n     */\n    @Input()\n    isGroup = true;\n    /**\n     * It removes border if items are displaying in a group.\n     */\n    @Input()\n    borderLess = false;\n    /**\n     * Gets feed list items\n     */\n    @ContentChildren(FeedListItemComponent)\n    feedItems: QueryList<FeedListItemComponent>;\n\n    /** @hidden */\n    private $feedItemChanges: Subscription;\n\n    /** @hidden */\n    constructor(public readonly elementRef: ElementRef) {}\n\n    /** @hidden\n     * CssClassBuilder interface implementation\n     * function must return single string\n     * function is responsible for order which css classes are applied\n     */\n    @applyCssClass\n    buildComponentCssClass(): string[] {\n        return [\n            CSS_CLASS_NAME.list,\n            this.class,\n            this.borderLess ? `${CSS_CLASS_NAME.list}--no-border` : '',\n            this.isGroup ? `${CSS_CLASS_NAME.list}--group` : '',\n            this.mobile ? `${CSS_CLASS_NAME.list}--s` : ''\n        ];\n    }\n    /** @hidden */\n    ngAfterContentChecked(): void {\n        this._refreshItems();\n        this._listenOnFeedItems();\n    }\n    /** @hidden */\n    ngOnInit(): void {\n        this.buildComponentCssClass();\n    }\n\n    /** @hidden */\n    ngOnChanges(changes: SimpleChanges): void {\n        if ('mobile' in changes || 'borderLess' in changes) {\n            this.buildComponentCssClass();\n            this._refreshItems();\n        }\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        if (this.$feedItemChanges) {\n            this.$feedItemChanges.unsubscribe();\n        }\n    }\n\n    /** @hidden */\n    private _listenOnFeedItems(): void {\n        this.$feedItemChanges = this.feedItems.changes.subscribe(() => this._refreshItems());\n    }\n\n    /** @hidden */\n    private _refreshItems(): void {\n        (this.feedItems || []).forEach((feedItem) => {\n            feedItem.mobile = this.mobile;\n            if (feedItem.maxCharsAtDefault && this.mobile) {\n                feedItem.setDefaultMaxChars();\n                feedItem.setHasMore();\n            }\n        });\n    }\n}\n","<ng-content select=\"fd-feed-list-item\"></ng-content>\n","import { Directive, HostBinding } from '@angular/core';\n\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: '[fd-item-footer-byline]',\n    standalone: true\n})\nexport class FeedListFooterBylineDirective {\n    /** @hidden */\n    @HostBinding('class.fd-feed-list__footer--byline')\n    fdBylineClass = true;\n}\n","import { NgModule } from '@angular/core';\n\nimport { FeedListActionComponent } from './components/feed-list-action/feed-list-action.component';\nimport { FeedListAvatarComponent } from './components/feed-list-avatar/feed-list-avatar.component';\nimport { FeedListFooterComponent } from './components/feed-list-footer/feed-list-footer.component';\nimport { FeedListItemComponent } from './components/item/feed-list-item.component';\nimport { FeedListComponent } from './components/list/feed-list.component';\nimport { FeedListFooterBylineDirective } from './directives/byline.directive';\n\nconst components = [\n    FeedListComponent,\n    FeedListItemComponent,\n    FeedListAvatarComponent,\n    FeedListActionComponent,\n    FeedListFooterComponent,\n    FeedListFooterBylineDirective\n];\n\n/**\n * @deprecated\n * Use direct imports of components and directives.\n */\n@NgModule({\n    imports: [...components],\n    exports: [...components]\n})\nexport class FeedListItemModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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: [{