npm - @fundamental-ngx/core - Versions diffs - 0.43.26 → 0.43.27 - Mend

@fundamental-ngx/core 0.43.26 → 0.43.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (95) hide show

package/fesm2015/fundamental-ngx-core-facets.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fundamental-ngx-core-facets.mjs","sources":["../../../../libs/core/src/lib/facets/constants.ts","../../../../libs/core/src/lib/facets/facet-group.component.ts","../../../../libs/core/src/lib/facets/utils.ts","../../../../libs/core/src/lib/facets/content/facet-content.component.ts","../../../../libs/core/src/lib/facets/facet/facet.component.ts","../../../../libs/core/src/lib/facets/facet/facet.component.html","../../../../libs/core/src/lib/facets/facet.module.ts","../../../../libs/core/src/lib/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 { Component, ChangeDetectionStrategy, ViewEncapsulation, Input } 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 styleUrls: ['./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})\nexport class FacetGroupComponent {\n /*\n the aria label for the facet group\n /\n @Input()\n ariaLabel: Nullable<string>;\n}\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 { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Renderer2, OnInit } 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})\nexport class FacetContentComponent implements OnInit {\n /* @hidden /\n constructor(public readonly elementRef: ElementRef<HTMLElement>, private _renderer: Renderer2) {}\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 {\n Component,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n Input,\n ElementRef,\n Renderer2,\n AfterViewInit,\n HostBinding\n} from '@angular/core';\nimport { FacetType, FACET_CLASS_NAME } 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 styleUrls: ['./facet.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class.fd-facet]': 'true'\n }\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 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 * 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(public readonly elementRef: ElementRef<HTMLElement>, private _renderer: Renderer2) {}\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","<ng-container ngIf=\"type === 'image'\">\n <ng-container ngTemplateOutlet=\"customContentTemplate\"></ng-container>\n</ng-container>\n\n<ng-container ngIf=\"type !== 'image'\">\n <h1 ngIf=\"facetTitle\" fd-title [headerSize]=\"5\" class=\"fd-margin-bottom--sm\" [id]=\"titleId\">{{ facetTitle }}</h1>\n <ng-container ngIf=\"type === 'form'\">\n <ng-container ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </ng-container>\n <ng-container ngIf=\"type === 'key-value' \|\| 'custom'\">\n <ng-container ngTemplateOutlet=\"customContentTemplate\"></ng-container>\n </ng-container>\n <ng-container ngIf=\"type === 'rating-indicator'\">\n <span fd-form-label>{{ subtitle }}</span>\n <ng-container ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </ng-container>\n</ng-container>\n\n<ng-template #contentTemplate>\n <ng-content select=\"fd-facet-content\"></ng-content>\n</ng-template>\n\n<ng-template #customContentTemplate>\n <ng-content></ng-content>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FacetGroupComponent } from './facet-group.component';\nimport { FacetContentComponent } from './content/facet-content.component';\nimport { FacetComponent } from './facet/facet.component';\nimport { TitleModule } from '@fundamental-ngx/core/title';\nimport { FormLabelModule } from '@fundamental-ngx/core/form';\n\n@NgModule({\n declarations: [FacetComponent, FacetGroupComponent, FacetContentComponent],\n imports: [CommonModule, TitleModule, FormLabelModule],\n exports: [FacetComponent, FacetGroupComponent, FacetContentComponent]\n})\nexport class FacetModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"fundamental-ngx-core-facets.mjs","sources":["../../../../libs/core/src/lib/facets/constants.ts","../../../../libs/core/src/lib/facets/facet-group.component.ts","../../../../libs/core/src/lib/facets/utils.ts","../../../../libs/core/src/lib/facets/content/facet-content.component.ts","../../../../libs/core/src/lib/facets/facet/facet.component.ts","../../../../libs/core/src/lib/facets/facet/facet.component.html","../../../../libs/core/src/lib/facets/facet.module.ts","../../../../libs/core/src/lib/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 { Component, ChangeDetectionStrategy, ViewEncapsulation, Input } 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 styleUrls: ['./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})\nexport class FacetGroupComponent {\n /*\n the aria label for the facet group\n /\n @Input()\n ariaLabel: Nullable<string>;\n}\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 { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Renderer2, OnInit } 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})\nexport class FacetContentComponent implements OnInit {\n /* @hidden /\n constructor(public readonly elementRef: ElementRef<HTMLElement>, private _renderer: Renderer2) {}\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 {\n Component,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n Input,\n ElementRef,\n Renderer2,\n AfterViewInit,\n HostBinding\n} from '@angular/core';\nimport { Nullable } from '@fundamental-ngx/cdk/utils';\nimport { FacetType, FACET_CLASS_NAME } 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 styleUrls: ['./facet.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class.fd-facet]': 'true'\n }\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 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 /\n Heading level (i.e. <h1>, <h2>, etc.) of the facet title.\n /\n @Input()\n headingLevel: Nullable<1 \| 2 \| 3 \| 4 \| 5 \| 6>;\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 * 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(public readonly elementRef: ElementRef<HTMLElement>, private _renderer: Renderer2) {}\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","<ng-container ngIf=\"type === 'image'\">\n <ng-container ngTemplateOutlet=\"customContentTemplate\"></ng-container>\n</ng-container>\n\n<ng-container ngIf=\"type !== 'image'\">\n <span\n ngIf=\"facetTitle\"\n style=\"display: block\"\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 >{{ facetTitle }}</span\n >\n <ng-container ngIf=\"type === 'form'\">\n <ng-container ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </ng-container>\n <ng-container ngIf=\"type === 'key-value' \|\| 'custom'\">\n <ng-container ngTemplateOutlet=\"customContentTemplate\"></ng-container>\n </ng-container>\n <ng-container ngIf=\"type === 'rating-indicator'\">\n <span fd-form-label>{{ subtitle }}</span>\n <ng-container ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </ng-container>\n</ng-container>\n\n<ng-template #contentTemplate>\n <ng-content select=\"fd-facet-content\"></ng-content>\n</ng-template>\n\n<ng-template #customContentTemplate>\n <ng-content></ng-content>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FacetGroupComponent } from './facet-group.component';\nimport { FacetContentComponent } from './content/facet-content.component';\nimport { FacetComponent } from './facet/facet.component';\nimport { TitleModule } from '@fundamental-ngx/core/title';\nimport { FormLabelModule } from '@fundamental-ngx/core/form';\n\n@NgModule({\n declarations: [FacetComponent, FacetGroupComponent, FacetContentComponent],\n imports: [CommonModule, TitleModule, FormLabelModule],\n exports: [FacetComponent, FacetGroupComponent, FacetContentComponent]\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/fesm2015/fundamental-ngx-core-grid-list.mjs CHANGED Viewed

@@ -411,7 +411,7 @@ class GridListItemComponent {
     }
 }
 GridListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GridListItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: GridList }], target: i0.ɵɵFactoryTarget.Component });
-GridListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GridListItemComponent, selector: "fd-grid-list-item", inputs: { id: "id", width: "width", layoutItemPattern: "layoutItemPattern", status: "status", counter: "counter", value: "value", disableToolbarClick: "disableToolbarClick", selected: "selected", noPadding: "noPadding", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", type: "type", state: "state", isNavigated: "isNavigated", title: "title", description: "description" }, outputs: { press: "press", detail: "detail", delete: "delete", navigate: "navigate", draft: "draft", locked: "locked" }, host: { properties: { "style.max-width": "this.width", "style.min-width": "this.width" } }, queries: [{ propertyName: "footerBarComponent", first: true, predicate: GridListItemFooterBarComponent, descendants: true }, { propertyName: "itemToolbarComponent", first: true, predicate: GridListItemToolbarComponent, descendants: true }, { propertyName: "body", first: true, predicate: GridListItemBodyDirective, descendants: true }], viewQueries: [{ propertyName: "_gridListItem", first: true, predicate: ["gridListItem"], descendants: true }], ngImport: i0, template: "<div\n    #gridListItem\n    [id]=\"id\"\n    tabindex=\"0\"\n    class=\"fd-grid-list__item\"\n    role=\"option\"\n    [class.is-navigated]=\"isNavigated\"\n    [class.is-selected]=\"!!_selectedItem\"\n    [class.fd-grid-list__item--link]=\"\n        _isActive && (type === 'active' || type === 'detailsAndActive' || type === 'navigation')\n    \"\n    [class.fd-grid-list__item--unread]=\"state === 'unread'\"\n    [class.fd-grid-list__item--locked]=\"state === 'locked'\"\n    [class.fd-grid-list__item--draft]=\"state === 'draft'\"\n    [class.fd-grid-list__item--error]=\"state === 'error'\"\n    (keydown)=\"_onKeyDown($event)\"\n    (click)=\"selectionMode === 'singleSelect' && _singleSelect($event); _onClick($event)\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    (mouseover)=\"_setActive($event, false)\"\n    (mouseout)=\"_setActive($event, true)\"\n    [attr.aria-selected]=\"selectionMode === 'none' ? null : !!_selectedItem\"\n>\n    <span\n        *ngIf=\"status\"\n        class=\"fd-grid-list__highlight\"\n        [class.fd-grid-list__highlight--positive]=\"status === 'success'\"\n        [class.fd-grid-list__highlight--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    <ng-container *ngIf=\"selectionMode === 'singleSelect'\">\n        <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n    </ng-container>\n\n    <div\n        class=\"fd-toolbar fd-grid-list__item-toolbar\"\n        *ngIf=\"\n            counter ||\n            itemToolbarComponent?.contentTemplateRef ||\n            (type && type !== 'inactive' && type !== 'active') ||\n            (selectionMode !== 'none' && selectionMode !== 'singleSelect')\n        \"\n    >\n        <ng-container *ngIf=\"selectionMode === 'singleSelectLeft'\">\n            <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"selectionMode === 'multiSelect'\">\n            <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"itemToolbarComponent?.contentTemplateRef\">\n            <div class=\"fd-toolbar--extra-content\">\n                <ng-container *ngTemplateOutlet=\"itemToolbarComponent.contentTemplateRef\"></ng-container>\n            </div>\n        </ng-container>\n\n        <fd-grid-list-title-bar-spacer></fd-grid-list-title-bar-spacer>\n\n        <span\n            *ngIf=\"counter\"\n            class=\"fd-grid-list__item-counter\"\n            [attr.aria-label]=\"'coreGridList.listItemCounterAriaLabel' | fdTranslate : { count: counter }\"\n            >{{ counter }}</span\n        >\n\n        <button\n            *ngIf=\"type === 'detail' || type === 'detailsAndActive'\"\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"edit\"\n            class=\"fd-grid-list__action-button\"\n            [attr.aria-label]=\"'coreGridList.listItemButtonDetailsTitle' | fdTranslate\"\n            [title]=\"'coreGridList.listItemButtonDetailsTitle' | fdTranslate\"\n            fdCompact\n            (click)=\"_onDetail($event)\"\n        ></button>\n\n        <button\n            *ngIf=\"selectionMode === 'delete'\"\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"decline\"\n            class=\"fd-grid-list__action-button\"\n            [attr.aria-label]=\"'coreGridList.listItemButtonDeleteTitle' | fdTranslate\"\n            [title]=\"'coreGridList.listItemButtonDeleteTitle' | fdTranslate\"\n            title=\"Delete\"\n            fdCompact\n            (click)=\"_onDelete($event)\"\n        ></button>\n\n        <span *ngIf=\"type === 'navigation'\" class=\"fd-grid-list__item-navigation-indicator\">\n            <fd-icon glyph=\"navigation-right-arrow\"></fd-icon>\n        </span>\n\n        <ng-container *ngIf=\"selectionMode === 'singleSelectRight'\">\n            <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n        </ng-container>\n    </div>\n\n    <div class=\"fd-grid-list__item-body\" [class.fd-grid-list__item-body--no-padding]=\"noPadding\">\n        <ng-content select=\"[fd-grid-list-item-image]\"></ng-content>\n\n        <div *ngIf=\"title || description\" class=\"fd-grid-list__item-header\">\n            <h4 *ngIf=\"title\" fd-title>{{ title }}</h4>\n            <span *ngIf=\"description\" class=\"fd-grid-list__item-subtitle\">{{ description }}</span>\n        </div>\n\n        <div *ngIf=\"body?.templateRef\" class=\"fd-grid-list__item-content\">\n            <ng-container [ngTemplateOutlet]=\"body.templateRef\"></ng-container>\n        </div>\n\n        <ng-container *ngIf=\"state || footerBarComponent?.contentTemplateRef\">\n            <ng-container *ngTemplateOutlet=\"itemFooter\"></ng-container>\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #radio>\n    <input\n        [attr.tabindex]=\"selectionMode === 'singleSelect' ? -1 : 0\"\n        type=\"radio\"\n        class=\"fd-radio is-compact fd-grid-list__radio-input\"\n        [style.display]=\"selectionMode === 'singleSelect' ? 'none' : ''\"\n        [id]=\"id + '-radio'\"\n        [name]=\"'fd-grid-list-item-toolbar-' + selectionMode\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [value]=\"value\"\n        [ngModel]=\"_selectedItem\"\n        (ngModelChange)=\"$event && _selectionItem($event)\"\n    />\n    <label\n        class=\"fd-radio__label fd-grid-list__radio-label\"\n        [for]=\"id + '-radio'\"\n        tabindex=\"-1\"\n        (mouseover)=\"_setActive($event, false)\"\n        (mouseout)=\"_setActive($event, true)\"\n    ></label>\n</ng-template>\n\n<ng-template #checkbox>\n    <input\n        type=\"checkbox\"\n        class=\"fd-checkbox is-compact fd-grid-list__checkbox-input\"\n        [id]=\"id + '-checkbox'\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [ngModel]=\"_selectedItem\"\n        (click)=\"_checkboxClick($event)\"\n    />\n    <label 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\n<ng-template #itemFooter>\n    <div class=\"fd-grid-list__item-body-actions\" *ngIf=\"footerBarComponent || state\">\n        <ng-container *ngIf=\"footerBarComponent?.contentTemplateRef\">\n            <ng-container *ngTemplateOutlet=\"footerBarComponent.contentTemplateRef\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"!footerBarComponent?.contentTemplateRef && state\">\n            <span\n                *ngIf=\"state === 'error'\"\n                fd-object-status\n                status=\"negative\"\n                [label]=\"'coreGridList.listItemStatusContainsErrors' | fdTranslate\"\n                [attr.aria-label]=\"'coreGridList.listItemStatusContainsErrors' | fdTranslate\"\n            ></span>\n\n            <button\n                class=\"fd-grid-list__action-button\"\n                *ngIf=\"state === 'locked'\"\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"private\"\n                [label]=\"'coreGridList.listItemStatusLocked' | fdTranslate\"\n                [attr.aria-label]=\"'coreGridList.listItemStatusLocked' | fdTranslate\"\n                fdCompact\n                (click)=\"_clickOnLocked($event)\"\n            ></button>\n\n            <button\n                class=\"fd-grid-list__action-button\"\n                *ngIf=\"state === 'draft'\"\n                fd-button\n                fdType=\"transparent\"\n                [attr.aria-label]=\"'coreGridList.listItemStatusDraft' | fdTranslate\"\n                [label]=\"'coreGridList.listItemStatusDraft' | fdTranslate\"\n                fdCompact\n                (click)=\"_clickOnDraft($event)\"\n            ></button>\n        </ng-container>\n    </div>\n</ng-template>\n", styles: [".fd-grid-list .fd-dnd-item.fd-dnd-on-drag{cursor:-o-grabbing;cursor:-ms-grabbing;cursor:grabbing;background-color:transparent}.fd-grid-list .fd-dnd-item .fd-grid-list__item{overflow:visible}.fd-grid-list__item .drop-area__line--vertical{height:100%}.fd-grid-list__item .drop-area__line--vertical.before{left:-.55rem}.fd-grid-list__item .drop-area__line--vertical.after{right:-.55rem}.fd-grid-list__item .fd-checkbox__label{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.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: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i5.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: "component", type: i6.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i7.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i8.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }, { kind: "component", type: GridListTitleBarSpacerComponent, selector: "fd-grid-list-title-bar-spacer" }, { kind: "pipe", type: i10.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+GridListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: GridListItemComponent, selector: "fd-grid-list-item", inputs: { id: "id", width: "width", layoutItemPattern: "layoutItemPattern", status: "status", counter: "counter", value: "value", disableToolbarClick: "disableToolbarClick", selected: "selected", noPadding: "noPadding", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", type: "type", state: "state", isNavigated: "isNavigated", title: "title", description: "description" }, outputs: { press: "press", detail: "detail", delete: "delete", navigate: "navigate", draft: "draft", locked: "locked" }, host: { properties: { "style.max-width": "this.width", "style.min-width": "this.width" } }, queries: [{ propertyName: "footerBarComponent", first: true, predicate: GridListItemFooterBarComponent, descendants: true }, { propertyName: "itemToolbarComponent", first: true, predicate: GridListItemToolbarComponent, descendants: true }, { propertyName: "body", first: true, predicate: GridListItemBodyDirective, descendants: true }], viewQueries: [{ propertyName: "_gridListItem", first: true, predicate: ["gridListItem"], descendants: true }], ngImport: i0, template: "<div\n    #gridListItem\n    [id]=\"id\"\n    tabindex=\"0\"\n    class=\"fd-grid-list__item\"\n    role=\"option\"\n    [class.is-navigated]=\"isNavigated\"\n    [class.is-selected]=\"!!_selectedItem\"\n    [class.fd-grid-list__item--link]=\"\n        _isActive && (type === 'active' || type === 'detailsAndActive' || type === 'navigation')\n    \"\n    [class.fd-grid-list__item--unread]=\"state === 'unread'\"\n    [class.fd-grid-list__item--locked]=\"state === 'locked'\"\n    [class.fd-grid-list__item--draft]=\"state === 'draft'\"\n    [class.fd-grid-list__item--error]=\"state === 'error'\"\n    (keydown)=\"_onKeyDown($event)\"\n    (click)=\"selectionMode === 'singleSelect' && _singleSelect($event); _onClick($event)\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    (mouseover)=\"_setActive($event, false)\"\n    (mouseout)=\"_setActive($event, true)\"\n    [attr.aria-selected]=\"selectionMode === 'none' ? null : !!_selectedItem\"\n>\n    <span\n        *ngIf=\"status\"\n        class=\"fd-grid-list__highlight\"\n        [class.fd-grid-list__highlight--positive]=\"status === 'success'\"\n        [class.fd-grid-list__highlight--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    <ng-container *ngIf=\"selectionMode === 'singleSelect'\">\n        <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n    </ng-container>\n\n    <div\n        class=\"fd-toolbar fd-grid-list__item-toolbar\"\n        *ngIf=\"\n            counter ||\n            itemToolbarComponent?.contentTemplateRef ||\n            (type && type !== 'inactive' && type !== 'active') ||\n            (selectionMode !== 'none' && selectionMode !== 'singleSelect')\n        \"\n    >\n        <ng-container *ngIf=\"selectionMode === 'singleSelectLeft'\">\n            <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"selectionMode === 'multiSelect'\">\n            <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"itemToolbarComponent?.contentTemplateRef\">\n            <div class=\"fd-toolbar--extra-content\">\n                <ng-container *ngTemplateOutlet=\"itemToolbarComponent.contentTemplateRef\"></ng-container>\n            </div>\n        </ng-container>\n\n        <fd-grid-list-title-bar-spacer></fd-grid-list-title-bar-spacer>\n\n        <span\n            *ngIf=\"counter\"\n            class=\"fd-grid-list__item-counter\"\n            [attr.aria-label]=\"'coreGridList.listItemCounterAriaLabel' | fdTranslate : { count: counter }\"\n            >{{ counter }}</span\n        >\n\n        <button\n            *ngIf=\"type === 'detail' || type === 'detailsAndActive'\"\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"edit\"\n            class=\"fd-grid-list__action-button\"\n            [attr.aria-label]=\"'coreGridList.listItemButtonDetailsTitle' | fdTranslate\"\n            [title]=\"'coreGridList.listItemButtonDetailsTitle' | fdTranslate\"\n            fdCompact\n            (click)=\"_onDetail($event)\"\n        ></button>\n\n        <button\n            *ngIf=\"selectionMode === 'delete'\"\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"decline\"\n            class=\"fd-grid-list__action-button\"\n            [attr.aria-label]=\"'coreGridList.listItemButtonDeleteTitle' | fdTranslate\"\n            [title]=\"'coreGridList.listItemButtonDeleteTitle' | fdTranslate\"\n            title=\"Delete\"\n            fdCompact\n            (click)=\"_onDelete($event)\"\n        ></button>\n\n        <span *ngIf=\"type === 'navigation'\" class=\"fd-grid-list__item-navigation-indicator\">\n            <fd-icon glyph=\"navigation-right-arrow\"></fd-icon>\n        </span>\n\n        <ng-container *ngIf=\"selectionMode === 'singleSelectRight'\">\n            <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n        </ng-container>\n    </div>\n\n    <div class=\"fd-grid-list__item-body\" [class.fd-grid-list__item-body--no-padding]=\"noPadding\">\n        <ng-content select=\"[fd-grid-list-item-image]\"></ng-content>\n\n        <div *ngIf=\"title || description\" class=\"fd-grid-list__item-header\">\n            <h4 *ngIf=\"title\" fd-title>{{ title }}</h4>\n            <span *ngIf=\"description\" class=\"fd-grid-list__item-subtitle\">{{ description }}</span>\n        </div>\n\n        <div *ngIf=\"body?.templateRef\" class=\"fd-grid-list__item-content\">\n            <ng-container [ngTemplateOutlet]=\"body.templateRef\"></ng-container>\n        </div>\n\n        <ng-container *ngIf=\"state || footerBarComponent?.contentTemplateRef\">\n            <ng-container *ngTemplateOutlet=\"itemFooter\"></ng-container>\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #radio>\n    <input\n        [attr.tabindex]=\"selectionMode === 'singleSelect' ? -1 : 0\"\n        type=\"radio\"\n        class=\"fd-radio is-compact fd-grid-list__radio-input\"\n        [style.display]=\"selectionMode === 'singleSelect' ? 'none' : ''\"\n        [id]=\"id + '-radio'\"\n        [name]=\"'fd-grid-list-item-toolbar-' + selectionMode\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [value]=\"value\"\n        [ngModel]=\"_selectedItem\"\n        (ngModelChange)=\"$event && _selectionItem($event)\"\n    />\n    <label\n        class=\"fd-radio__label fd-grid-list__radio-label\"\n        [for]=\"id + '-radio'\"\n        tabindex=\"-1\"\n        (mouseover)=\"_setActive($event, false)\"\n        (mouseout)=\"_setActive($event, true)\"\n    ></label>\n</ng-template>\n\n<ng-template #checkbox>\n    <input\n        type=\"checkbox\"\n        class=\"fd-checkbox is-compact fd-grid-list__checkbox-input\"\n        [id]=\"id + '-checkbox'\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [ngModel]=\"_selectedItem\"\n        (click)=\"_checkboxClick($event)\"\n    />\n    <label 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\n<ng-template #itemFooter>\n    <div class=\"fd-grid-list__item-body-actions\" *ngIf=\"footerBarComponent || state\">\n        <ng-container *ngIf=\"footerBarComponent?.contentTemplateRef\">\n            <ng-container *ngTemplateOutlet=\"footerBarComponent.contentTemplateRef\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"!footerBarComponent?.contentTemplateRef && state\">\n            <span\n                *ngIf=\"state === 'error'\"\n                fd-object-status\n                status=\"negative\"\n                [label]=\"'coreGridList.listItemStatusContainsErrors' | fdTranslate\"\n                [attr.aria-label]=\"'coreGridList.listItemStatusContainsErrors' | fdTranslate\"\n            ></span>\n\n            <button\n                class=\"fd-grid-list__action-button\"\n                *ngIf=\"state === 'locked'\"\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"private\"\n                [label]=\"'coreGridList.listItemStatusLocked' | fdTranslate\"\n                [attr.aria-label]=\"'coreGridList.listItemStatusLocked' | fdTranslate\"\n                fdCompact\n                (click)=\"_clickOnLocked($event)\"\n            ></button>\n\n            <button\n                class=\"fd-grid-list__action-button\"\n                *ngIf=\"state === 'draft'\"\n                fd-button\n                fdType=\"transparent\"\n                [attr.aria-label]=\"'coreGridList.listItemStatusDraft' | fdTranslate\"\n                [label]=\"'coreGridList.listItemStatusDraft' | fdTranslate\"\n                fdCompact\n                (click)=\"_clickOnDraft($event)\"\n            ></button>\n        </ng-container>\n    </div>\n</ng-template>\n", styles: [".fd-grid-list .fd-dnd-item.fd-dnd-on-drag{cursor:-o-grabbing;cursor:-ms-grabbing;cursor:grabbing;background-color:transparent}.fd-grid-list .fd-dnd-item .fd-grid-list__item{overflow:visible}.fd-grid-list__item .drop-area__line--vertical{height:100%}.fd-grid-list__item .drop-area__line--vertical.before{left:-.55rem}.fd-grid-list__item .drop-area__line--vertical.after{right:-.55rem}.fd-grid-list__item .fd-checkbox__label{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.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: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i5.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: "component", type: i6.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i7.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title], span[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i8.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }, { kind: "component", type: GridListTitleBarSpacerComponent, selector: "fd-grid-list-title-bar-spacer" }, { kind: "pipe", type: i10.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: GridListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-grid-list-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n    #gridListItem\n    [id]=\"id\"\n    tabindex=\"0\"\n    class=\"fd-grid-list__item\"\n    role=\"option\"\n    [class.is-navigated]=\"isNavigated\"\n    [class.is-selected]=\"!!_selectedItem\"\n    [class.fd-grid-list__item--link]=\"\n        _isActive && (type === 'active' || type === 'detailsAndActive' || type === 'navigation')\n    \"\n    [class.fd-grid-list__item--unread]=\"state === 'unread'\"\n    [class.fd-grid-list__item--locked]=\"state === 'locked'\"\n    [class.fd-grid-list__item--draft]=\"state === 'draft'\"\n    [class.fd-grid-list__item--error]=\"state === 'error'\"\n    (keydown)=\"_onKeyDown($event)\"\n    (click)=\"selectionMode === 'singleSelect' && _singleSelect($event); _onClick($event)\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    (mouseover)=\"_setActive($event, false)\"\n    (mouseout)=\"_setActive($event, true)\"\n    [attr.aria-selected]=\"selectionMode === 'none' ? null : !!_selectedItem\"\n>\n    <span\n        *ngIf=\"status\"\n        class=\"fd-grid-list__highlight\"\n        [class.fd-grid-list__highlight--positive]=\"status === 'success'\"\n        [class.fd-grid-list__highlight--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    <ng-container *ngIf=\"selectionMode === 'singleSelect'\">\n        <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n    </ng-container>\n\n    <div\n        class=\"fd-toolbar fd-grid-list__item-toolbar\"\n        *ngIf=\"\n            counter ||\n            itemToolbarComponent?.contentTemplateRef ||\n            (type && type !== 'inactive' && type !== 'active') ||\n            (selectionMode !== 'none' && selectionMode !== 'singleSelect')\n        \"\n    >\n        <ng-container *ngIf=\"selectionMode === 'singleSelectLeft'\">\n            <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"selectionMode === 'multiSelect'\">\n            <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"itemToolbarComponent?.contentTemplateRef\">\n            <div class=\"fd-toolbar--extra-content\">\n                <ng-container *ngTemplateOutlet=\"itemToolbarComponent.contentTemplateRef\"></ng-container>\n            </div>\n        </ng-container>\n\n        <fd-grid-list-title-bar-spacer></fd-grid-list-title-bar-spacer>\n\n        <span\n            *ngIf=\"counter\"\n            class=\"fd-grid-list__item-counter\"\n            [attr.aria-label]=\"'coreGridList.listItemCounterAriaLabel' | fdTranslate : { count: counter }\"\n            >{{ counter }}</span\n        >\n\n        <button\n            *ngIf=\"type === 'detail' || type === 'detailsAndActive'\"\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"edit\"\n            class=\"fd-grid-list__action-button\"\n            [attr.aria-label]=\"'coreGridList.listItemButtonDetailsTitle' | fdTranslate\"\n            [title]=\"'coreGridList.listItemButtonDetailsTitle' | fdTranslate\"\n            fdCompact\n            (click)=\"_onDetail($event)\"\n        ></button>\n\n        <button\n            *ngIf=\"selectionMode === 'delete'\"\n            fd-button\n            fdType=\"transparent\"\n            glyph=\"decline\"\n            class=\"fd-grid-list__action-button\"\n            [attr.aria-label]=\"'coreGridList.listItemButtonDeleteTitle' | fdTranslate\"\n            [title]=\"'coreGridList.listItemButtonDeleteTitle' | fdTranslate\"\n            title=\"Delete\"\n            fdCompact\n            (click)=\"_onDelete($event)\"\n        ></button>\n\n        <span *ngIf=\"type === 'navigation'\" class=\"fd-grid-list__item-navigation-indicator\">\n            <fd-icon glyph=\"navigation-right-arrow\"></fd-icon>\n        </span>\n\n        <ng-container *ngIf=\"selectionMode === 'singleSelectRight'\">\n            <ng-container *ngTemplateOutlet=\"radio\"></ng-container>\n        </ng-container>\n    </div>\n\n    <div class=\"fd-grid-list__item-body\" [class.fd-grid-list__item-body--no-padding]=\"noPadding\">\n        <ng-content select=\"[fd-grid-list-item-image]\"></ng-content>\n\n        <div *ngIf=\"title || description\" class=\"fd-grid-list__item-header\">\n            <h4 *ngIf=\"title\" fd-title>{{ title }}</h4>\n            <span *ngIf=\"description\" class=\"fd-grid-list__item-subtitle\">{{ description }}</span>\n        </div>\n\n        <div *ngIf=\"body?.templateRef\" class=\"fd-grid-list__item-content\">\n            <ng-container [ngTemplateOutlet]=\"body.templateRef\"></ng-container>\n        </div>\n\n        <ng-container *ngIf=\"state || footerBarComponent?.contentTemplateRef\">\n            <ng-container *ngTemplateOutlet=\"itemFooter\"></ng-container>\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #radio>\n    <input\n        [attr.tabindex]=\"selectionMode === 'singleSelect' ? -1 : 0\"\n        type=\"radio\"\n        class=\"fd-radio is-compact fd-grid-list__radio-input\"\n        [style.display]=\"selectionMode === 'singleSelect' ? 'none' : ''\"\n        [id]=\"id + '-radio'\"\n        [name]=\"'fd-grid-list-item-toolbar-' + selectionMode\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [value]=\"value\"\n        [ngModel]=\"_selectedItem\"\n        (ngModelChange)=\"$event && _selectionItem($event)\"\n    />\n    <label\n        class=\"fd-radio__label fd-grid-list__radio-label\"\n        [for]=\"id + '-radio'\"\n        tabindex=\"-1\"\n        (mouseover)=\"_setActive($event, false)\"\n        (mouseout)=\"_setActive($event, true)\"\n    ></label>\n</ng-template>\n\n<ng-template #checkbox>\n    <input\n        type=\"checkbox\"\n        class=\"fd-checkbox is-compact fd-grid-list__checkbox-input\"\n        [id]=\"id + '-checkbox'\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [ngModel]=\"_selectedItem\"\n        (click)=\"_checkboxClick($event)\"\n    />\n    <label 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\n<ng-template #itemFooter>\n    <div class=\"fd-grid-list__item-body-actions\" *ngIf=\"footerBarComponent || state\">\n        <ng-container *ngIf=\"footerBarComponent?.contentTemplateRef\">\n            <ng-container *ngTemplateOutlet=\"footerBarComponent.contentTemplateRef\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"!footerBarComponent?.contentTemplateRef && state\">\n            <span\n                *ngIf=\"state === 'error'\"\n                fd-object-status\n                status=\"negative\"\n                [label]=\"'coreGridList.listItemStatusContainsErrors' | fdTranslate\"\n                [attr.aria-label]=\"'coreGridList.listItemStatusContainsErrors' | fdTranslate\"\n            ></span>\n\n            <button\n                class=\"fd-grid-list__action-button\"\n                *ngIf=\"state === 'locked'\"\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"private\"\n                [label]=\"'coreGridList.listItemStatusLocked' | fdTranslate\"\n                [attr.aria-label]=\"'coreGridList.listItemStatusLocked' | fdTranslate\"\n                fdCompact\n                (click)=\"_clickOnLocked($event)\"\n            ></button>\n\n            <button\n                class=\"fd-grid-list__action-button\"\n                *ngIf=\"state === 'draft'\"\n                fd-button\n                fdType=\"transparent\"\n                [attr.aria-label]=\"'coreGridList.listItemStatusDraft' | fdTranslate\"\n                [label]=\"'coreGridList.listItemStatusDraft' | fdTranslate\"\n                fdCompact\n                (click)=\"_clickOnDraft($event)\"\n            ></button>\n        </ng-container>\n    </div>\n</ng-template>\n", styles: [".fd-grid-list .fd-dnd-item.fd-dnd-on-drag{cursor:-o-grabbing;cursor:-ms-grabbing;cursor:grabbing;background-color:transparent}.fd-grid-list .fd-dnd-item .fd-grid-list__item{overflow:visible}.fd-grid-list__item .drop-area__line--vertical{height:100%}.fd-grid-list__item .drop-area__line--vertical.before{left:-.55rem}.fd-grid-list__item .drop-area__line--vertical.after{right:-.55rem}.fd-grid-list__item .fd-checkbox__label{-webkit-user-select:none;user-select:none}\n"] }]