@fundamental-ngx/platform 0.48.0-rc.20 → 0.48.0-rc.21

package/fesm2022/fundamental-ngx-platform-list.mjs

@@ -1586,7 +1586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
 
 class StandardListItemComponent extends BaseListItem {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: StandardListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: StandardListItemComponent, isStandalone: true, selector: "fdp-standard-list-item", host: { attributes: { "role": "none" } }, providers: [{ provide: BaseListItem, useExisting: forwardRef(() => StandardListItemComponent) }], usesInheritance: true, ngImport: i0, template: "<!--  list item navigation with Arrow-->\n@if (navigationIndicator || (navigated && !(noDataText !== null && noDataText !== undefined))) {\n    <div\n        #listItem\n        [unread]=\"unRead\"\n        fd-list-item\n        [attr.id]=\"id\"\n        [selected]=\"_selected\"\n        [tabindex]=\"-1\"\n        (keydown)=\"_onKeyDown($event)\"\n        (keyup)=\"_onKeyUp($event)\"\n        class=\"fd-list__item--link\"\n        [class.fd-list__item--inactive]=\"listType === 'inactive'\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-describedby]=\"ariaDescribedBy\"\n        [attr.aria-level]=\"ariaLevel\"\n        [attr.aria-posinset]=\"ariaPosinset\"\n        [ariaRole]=\"_listItemRole\"\n        [attr.aria-selected]=\"_selectedAttr\"\n        [attr.aria-setsize]=\"ariaSetSize | async\"\n    >\n        <ng-template [ngTemplateOutlet]=\"selectionTemplate\"> </ng-template>\n        <a\n            #linkElement\n            fd-list-link\n            [routerLink]=\"link\"\n            [navigationIndicator]=\"navigationIndicator\"\n            [navigated]=\"navigated\"\n        >\n            <ng-template [ngTemplateOutlet]=\"_hasByLine ? byLineTemplate : commonTemplate\"></ng-template>\n        </a>\n    </div>\n}\n<!--  list item without navigation and used for simple list display-->\n@if (!navigationIndicator && !navigated && !(noDataText !== null && noDataText !== undefined)) {\n    <div\n        #listItem\n        [unread]=\"unRead\"\n        fd-list-item\n        [attr.id]=\"id\"\n        [selected]=\"_selected\"\n        (keydown)=\"_onKeyDown($event)\"\n        [tabindex]=\"-1\"\n        (keyup)=\"_onKeyUp($event)\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-describedby]=\"ariaDescribedBy\"\n        [attr.aria-level]=\"ariaLevel\"\n        [attr.aria-posinset]=\"ariaPosinset\"\n        [class.fd-list__item--inactive]=\"listType === 'inactive'\"\n        [ariaRole]=\"_listItemRole\"\n        [attr.aria-selected]=\"_selectedAttr\"\n        [attr.aria-setsize]=\"ariaSetSize | async\"\n    >\n        <ng-template [ngTemplateOutlet]=\"selectionTemplate\"></ng-template>\n        <ng-template [ngTemplateOutlet]=\"_hasByLine ? byLineTemplate : commonTemplate\"></ng-template>\n    </div>\n}\n@if (noDataText !== null && noDataText !== undefined) {\n    <div\n        #listItem\n        fd-list-item\n        [attr.id]=\"id\"\n        [tabindex]=\"0\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-level]=\"ariaLevel\"\n        [attr.aria-posinset]=\"ariaPosinset\"\n        [attr.aria-setsize]=\"ariaSetSize | async\"\n    >\n        <span fd-list-title [attr.aria-label]=\"noDataText\" [attr.title]=\"noDataText\">{{ noDataText }}</span>\n    </div>\n}\n<ng-template #commonTemplate>\n    @if (icon.glyph) {\n        <fd-icon\n            class=\"fd-list__icon\"\n            [glyph]=\"icon.glyph\"\n            [font]=\"icon.font\"\n            [ariaLabel]=\"icon.ariaLabel\"\n            [attr.alt]=\"icon.ariaLabel\"\n            role=\"img\"\n        >\n        </fd-icon>\n    }\n    @if (avatar.label || avatar.image || avatar.glyph || avatar.zoomGlyph) {\n        <fd-avatar\n            [size]=\"avatar.size\"\n            [glyph]=\"avatar.glyph\"\n            [zoomGlyph]=\"avatar.zoomGlyph\"\n            [label]=\"avatar.label\"\n            [circle]=\"avatar.circle\"\n            [placeholder]=\"avatar.placeholder\"\n            [tile]=\"avatar.tile\"\n            [colorAccent]=\"avatar.colorAccent\"\n            [image]=\"avatar.image\"\n            [transparent]=\"avatar.transparent\"\n            [random]=\"avatar.random\"\n            [class]=\"'fd-list__icon ' + avatar.class\"\n            [ariaLabel]=\"avatar.ariaLabel\"\n            [ariaLabelledby]=\"avatar.ariaLabelledby\"\n            [contain]=\"avatar.contain\"\n            [border]=\"avatar.border\"\n            [alterIcon]=\"avatar.alterIcon\"\n            [backupImage]=\"avatar.backupImage\"\n            [clickable]=\"avatar.clickable\"\n            [attr.alt]=\"avatar.ariaLabel\"\n            role=\"img\"\n        ></fd-avatar>\n    }\n    @if (title) {\n        <span fd-list-title [attr.aria-label]=\"ariaLabel\" [attr.nowrap]=\"titleWrap\" [attr.title]=\"title\">\n            {{ title }}\n        </span>\n    }\n    @if (secondary !== null && secondary !== undefined) {\n        <span fd-list-secondary [attr.aria-label]=\"secondary\" [attr.title]=\"secondary\" [attr.nowrap]=\"secondaryWrap\">\n            {{ secondary }}\n        </span>\n    }\n    @if (counter !== null && counter !== undefined) {\n        <span fd-list-secondary class=\"fd-list__item-counter\" [attr.aria-label]=\"counter\" [attr.title]=\"counter\">\n            {{ counter }}\n        </span>\n    }\n    <ng-template [ngTemplateOutlet]=\"actionsTemplate\"></ng-template>\n</ng-template>\n<ng-template #byLineTemplate>\n    <div fdListThumbnail>\n        @if (icon.glyph) {\n            <fd-icon\n                class=\"fd-list__icon\"\n                [glyph]=\"icon.glyph\"\n                [font]=\"icon.font\"\n                [ariaLabel]=\"icon.ariaLabel\"\n                [attr.alt]=\"icon.ariaLabel\"\n                role=\"img\"\n            >\n            </fd-icon>\n        }\n        @if (avatar.label || avatar.image || avatar.glyph || avatar.zoomGlyph) {\n            <fd-avatar\n                [size]=\"avatar.size\"\n                [glyph]=\"avatar.glyph\"\n                [zoomGlyph]=\"avatar.zoomGlyph\"\n                [label]=\"avatar.label\"\n                [circle]=\"avatar.circle\"\n                [placeholder]=\"avatar.placeholder\"\n                [tile]=\"avatar.tile\"\n                [colorAccent]=\"avatar.colorAccent\"\n                [image]=\"avatar.image\"\n                [transparent]=\"avatar.transparent\"\n                [random]=\"avatar.random\"\n                [class]=\"avatar.class\"\n                [ariaLabel]=\"avatar.ariaLabel\"\n                [ariaLabelledby]=\"avatar.ariaLabelledby\"\n                [contain]=\"avatar.contain\"\n                [border]=\"avatar.border\"\n                [alterIcon]=\"avatar.alterIcon\"\n                [backupImage]=\"avatar.backupImage\"\n                [clickable]=\"avatar.clickable\"\n                [attr.alt]=\"avatar.ariaLabel\"\n                role=\"img\"\n            ></fd-avatar>\n        }\n    </div>\n    <div class=\"fd-list__content\">\n        @if (title) {\n            <div fd-list-title [attr.aria-label]=\"title\" [attr.nowrap]=\"titleWrap\" [attr.title]=\"title\">\n                {{ title }}\n            </div>\n        }\n        <div class=\"fd-list__byline fd-list__byline--2-col\">\n            @if (description) {\n                <ng-template\n                    [ngTemplateOutlet]=\"_isAdvancedText(description) ? advancedDescription : simpleDescription\"\n                    [ngTemplateOutletContext]=\"{ $implicit: description }\"\n                ></ng-template>\n            }\n            @if (secondary) {\n                <ng-template\n                    [ngTemplateOutlet]=\"_isAdvancedText(secondary) ? advancedSecondary : simpleSecondary\"\n                    [ngTemplateOutletContext]=\"{ $implicit: secondary }\"\n                ></ng-template>\n            }\n        </div>\n    </div>\n    <ng-template [ngTemplateOutlet]=\"actionsTemplate\"></ng-template>\n</ng-template>\n<ng-template #selectionTemplate>\n    @if ((selectionMode === 'multi' || selectionMode === 'single') && !rowSelection) {\n        <div fd-form-item class=\"fd-list__form-item\">\n            @if (selectionMode === 'multi') {\n                <fd-checkbox\n                    (click)=\"$event.stopPropagation()\"\n                    [(ngModel)]=\"_selected\"\n                    [ariaLabel]=\"ariaLabel\"\n                    tabIndexValue=\"-1\"\n                    (ngModelChange)=\"_onCheckboxModelChange()\"\n                    [attr.aria-selected]=\"_selected\"\n                >\n                </fd-checkbox>\n            }\n            @if (selectionMode === 'single') {\n                <fd-radio-button\n                    [value]=\"value\"\n                    [name]=\"name\"\n                    role=\"radio\"\n                    [(ngModel)]=\"selectionValue\"\n                    [attr.aria-selected]=\"_selected\"\n                >\n                </fd-radio-button>\n            }\n        </div>\n    }\n</ng-template>\n<ng-template #actionsTemplate>\n    <ng-content select=\"#secondaryAction\"></ng-content>\n    @if (listType === 'detail') {\n        <button\n            fd-button\n            #edit\n            [attr.id]=\"'detail-' + id\"\n            role=\"button\"\n            fdType=\"transparent\"\n            glyph=\"edit\"\n            (click)=\"_onActionButtonClick('edit')\"\n            [attr.aria-label]=\"'platformStandardListItem.detailsActionAriaLabel' | fdTranslate\"\n            [attr.title]=\"'platformStandardListItem.detailsActionAriaLabel' | fdTranslate\"\n            (keydown)=\"_onKeyButtonClick($event, 'edit')\"\n        ></button>\n    }\n    @if (selectionMode === 'delete') {\n        <button\n            fd-button\n            #delete\n            [attr.id]=\"'delete-' + id\"\n            role=\"button\"\n            [attr.aria-label]=\"'platformStandardListItem.deleteActionAriaLabel' | fdTranslate\"\n            [attr.title]=\"'platformStandardListItem.deleteActionAriaLabel' | fdTranslate\"\n            fdType=\"transparent\"\n            glyph=\"decline\"\n            (click)=\"_onActionButtonClick('delete')\"\n            (keydown)=\"_onKeyButtonClick($event, 'delete')\"\n        ></button>\n    }\n</ng-template>\n<ng-template #simpleDescription let-description>\n    <span\n        class=\"fd-list__byline-left\"\n        [attr.aria-label]=\"description\"\n        [attr.title]=\"description\"\n        [attr.nowrap]=\"titleWrap\"\n    >\n        {{ description }}\n    </span>\n</ng-template>\n<ng-template #advancedDescription let-description>\n    <span\n        class=\"fd-list__byline-left\"\n        [attr.aria-label]=\"description.ariaLabel ?? description.text\"\n        [attr.title]=\"description.title ?? description.text\"\n        [attr.nowrap]=\"titleWrap\"\n    >\n        {{ description.text }}\n    </span>\n</ng-template>\n<ng-template #simpleSecondary let-secondary>\n    @if (!inverted) {\n        <span\n            [attr.aria-label]=\"secondary\"\n            class=\"fd-list__byline-right\"\n            [class]=\"statusType ? 'fd-list__byline-right--' + statusType : ''\"\n            [attr.title]=\"secondary\"\n            [attr.nowrap]=\"secondaryWrap\"\n        >\n            {{ secondary }}\n        </span>\n    } @else {\n        <span\n            class=\"fd-list__byline-right\"\n            [attr.aria-label]=\"secondary\"\n            [attr.title]=\"secondary\"\n            [attr.nowrap]=\"secondaryWrap\"\n        >\n            <fdp-object-status [status]=\"statusType\" [inverted]=\"inverted\" [label]=\"secondary\"></fdp-object-status>\n        </span>\n    }\n</ng-template>\n<ng-template #advancedSecondary let-secondary>\n    @if (!inverted) {\n        <span\n            [attr.aria-label]=\"secondary.ariaLabel ?? secondary.text\"\n            class=\"fd-list__byline-right\"\n            [class]=\"statusType ? 'fd-list__byline-right--' + statusType : ''\"\n            [attr.title]=\"secondary.title ?? secondary.text\"\n            [attr.nowrap]=\"secondaryWrap\"\n        >\n            {{ secondary.text }}\n        </span>\n    } @else {\n        <span\n            class=\"fd-list__byline-right\"\n            [attr.aria-label]=\"secondary.ariaLabel ?? secondary.text\"\n            [attr.title]=\"secondary.title ?? secondary.text\"\n            [attr.nowrap]=\"secondaryWrap\"\n        >\n            <fdp-object-status [status]=\"statusType\" [inverted]=\"inverted\" [label]=\"secondary.text\"></fdp-object-status>\n        </span>\n    }\n</ng-template>\n", dependencies: [{ kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "directive", type: ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "component", type: FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "selectedValue", "name", "id", "value", "required", "standalone"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: ObjectStatusComponent, selector: "fdp-object-status", inputs: ["status", "glyph", "indicationColor", "secondaryIndication", "clickable", "inverted", "large", "label", "ariaLabel", "title"], outputs: ["objectStatusClick"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: StandardListItemComponent, isStandalone: true, selector: "fdp-standard-list-item", host: { attributes: { "role": "none" } }, providers: [{ provide: BaseListItem, useExisting: forwardRef(() => StandardListItemComponent) }], usesInheritance: true, ngImport: i0, template: "<!--  list item navigation with Arrow-->\n@if (navigationIndicator || (navigated && !(noDataText !== null && noDataText !== undefined))) {\n    <div\n        #listItem\n        [unread]=\"unRead\"\n        fd-list-item\n        [attr.id]=\"id\"\n        [selected]=\"_selected\"\n        [tabindex]=\"-1\"\n        (keydown)=\"_onKeyDown($event)\"\n        (keyup)=\"_onKeyUp($event)\"\n        class=\"fd-list__item--link\"\n        [class.fd-list__item--inactive]=\"listType === 'inactive'\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-describedby]=\"ariaDescribedBy\"\n        [attr.aria-level]=\"ariaLevel\"\n        [attr.aria-posinset]=\"ariaPosinset\"\n        [ariaRole]=\"_listItemRole\"\n        [attr.aria-selected]=\"_selectedAttr\"\n        [attr.aria-setsize]=\"ariaSetSize | async\"\n    >\n        <ng-template [ngTemplateOutlet]=\"selectionTemplate\"> </ng-template>\n        <a\n            #linkElement\n            fd-list-link\n            [routerLink]=\"link\"\n            [navigationIndicator]=\"navigationIndicator\"\n            [navigated]=\"navigated\"\n        >\n            <ng-template [ngTemplateOutlet]=\"_hasByLine ? byLineTemplate : commonTemplate\"></ng-template>\n        </a>\n    </div>\n}\n<!--  list item without navigation and used for simple list display-->\n@if (!navigationIndicator && !navigated && !(noDataText !== null && noDataText !== undefined)) {\n    <div\n        #listItem\n        [unread]=\"unRead\"\n        fd-list-item\n        [attr.id]=\"id\"\n        [selected]=\"_selected\"\n        (keydown)=\"_onKeyDown($event)\"\n        [tabindex]=\"-1\"\n        (keyup)=\"_onKeyUp($event)\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-describedby]=\"ariaDescribedBy\"\n        [attr.aria-level]=\"ariaLevel\"\n        [attr.aria-posinset]=\"ariaPosinset\"\n        [class.fd-list__item--inactive]=\"listType === 'inactive'\"\n        [ariaRole]=\"_listItemRole\"\n        [attr.aria-selected]=\"_selectedAttr\"\n        [attr.aria-setsize]=\"ariaSetSize | async\"\n    >\n        <ng-template [ngTemplateOutlet]=\"selectionTemplate\"></ng-template>\n        <ng-template [ngTemplateOutlet]=\"_hasByLine ? byLineTemplate : commonTemplate\"></ng-template>\n    </div>\n}\n@if (noDataText !== null && noDataText !== undefined) {\n    <div\n        #listItem\n        fd-list-item\n        [attr.id]=\"id\"\n        [tabindex]=\"0\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-level]=\"ariaLevel\"\n        [attr.aria-posinset]=\"ariaPosinset\"\n        [attr.aria-setsize]=\"ariaSetSize | async\"\n    >\n        <span fd-list-title [attr.aria-label]=\"noDataText\" [attr.title]=\"noDataText\">{{ noDataText }}</span>\n    </div>\n}\n<ng-template #commonTemplate>\n    @if (icon.glyph) {\n        <fd-icon\n            class=\"fd-list__icon\"\n            [glyph]=\"icon.glyph\"\n            [font]=\"icon.font\"\n            [ariaLabel]=\"icon.ariaLabel\"\n            [attr.alt]=\"icon.ariaLabel\"\n            role=\"img\"\n        >\n        </fd-icon>\n    }\n    @if (avatar.label || avatar.image || avatar.glyph || avatar.zoomGlyph) {\n        <fd-avatar\n            [size]=\"avatar.size\"\n            [glyph]=\"avatar.glyph\"\n            [zoomGlyph]=\"avatar.zoomGlyph\"\n            [label]=\"avatar.label\"\n            [circle]=\"avatar.circle\"\n            [placeholder]=\"avatar.placeholder\"\n            [tile]=\"avatar.tile\"\n            [colorAccent]=\"avatar.colorAccent\"\n            [image]=\"avatar.image\"\n            [transparent]=\"avatar.transparent\"\n            [random]=\"avatar.random\"\n            [class]=\"'fd-list__icon ' + avatar.class\"\n            [ariaLabel]=\"avatar.ariaLabel\"\n            [ariaLabelledby]=\"avatar.ariaLabelledby\"\n            [contain]=\"avatar.contain\"\n            [border]=\"avatar.border\"\n            [alterIcon]=\"avatar.alterIcon\"\n            [backupImage]=\"avatar.backupImage\"\n            [clickable]=\"avatar.clickable\"\n            [attr.alt]=\"avatar.ariaLabel\"\n            role=\"img\"\n        ></fd-avatar>\n    }\n    @if (title) {\n        <span fd-list-title [attr.aria-label]=\"ariaLabel\" [attr.nowrap]=\"titleWrap\" [attr.title]=\"title\">\n            {{ title }}\n        </span>\n    }\n    @if (secondary !== null && secondary !== undefined) {\n        <span fd-list-secondary [attr.aria-label]=\"secondary\" [attr.title]=\"secondary\" [attr.nowrap]=\"secondaryWrap\">\n            {{ secondary }}\n        </span>\n    }\n    @if (counter !== null && counter !== undefined) {\n        <span fd-list-secondary class=\"fd-list__item-counter\" [attr.aria-label]=\"counter\" [attr.title]=\"counter\">\n            {{ counter }}\n        </span>\n    }\n    <ng-template [ngTemplateOutlet]=\"actionsTemplate\"></ng-template>\n</ng-template>\n<ng-template #byLineTemplate>\n    <div fdListThumbnail>\n        @if (icon.glyph) {\n            <fd-icon\n                class=\"fd-list__icon\"\n                [glyph]=\"icon.glyph\"\n                [font]=\"icon.font\"\n                [ariaLabel]=\"icon.ariaLabel\"\n                [attr.alt]=\"icon.ariaLabel\"\n                role=\"img\"\n            >\n            </fd-icon>\n        }\n        @if (avatar.label || avatar.image || avatar.glyph || avatar.zoomGlyph) {\n            <fd-avatar\n                [size]=\"avatar.size\"\n                [glyph]=\"avatar.glyph\"\n                [zoomGlyph]=\"avatar.zoomGlyph\"\n                [label]=\"avatar.label\"\n                [circle]=\"avatar.circle\"\n                [placeholder]=\"avatar.placeholder\"\n                [tile]=\"avatar.tile\"\n                [colorAccent]=\"avatar.colorAccent\"\n                [image]=\"avatar.image\"\n                [transparent]=\"avatar.transparent\"\n                [random]=\"avatar.random\"\n                [class]=\"avatar.class\"\n                [ariaLabel]=\"avatar.ariaLabel\"\n                [ariaLabelledby]=\"avatar.ariaLabelledby\"\n                [contain]=\"avatar.contain\"\n                [border]=\"avatar.border\"\n                [alterIcon]=\"avatar.alterIcon\"\n                [backupImage]=\"avatar.backupImage\"\n                [clickable]=\"avatar.clickable\"\n                [attr.alt]=\"avatar.ariaLabel\"\n                role=\"img\"\n            ></fd-avatar>\n        }\n    </div>\n    <div class=\"fd-list__content\">\n        @if (title) {\n            <div fd-list-title [attr.aria-label]=\"title\" [attr.nowrap]=\"titleWrap\" [attr.title]=\"title\">\n                {{ title }}\n            </div>\n        }\n        <div class=\"fd-list__byline fd-list__byline--2-col\">\n            @if (description) {\n                <ng-template\n                    [ngTemplateOutlet]=\"_isAdvancedText(description) ? advancedDescription : simpleDescription\"\n                    [ngTemplateOutletContext]=\"{ $implicit: description }\"\n                ></ng-template>\n            }\n            @if (secondary) {\n                <ng-template\n                    [ngTemplateOutlet]=\"_isAdvancedText(secondary) ? advancedSecondary : simpleSecondary\"\n                    [ngTemplateOutletContext]=\"{ $implicit: secondary }\"\n                ></ng-template>\n            }\n        </div>\n    </div>\n    <ng-template [ngTemplateOutlet]=\"actionsTemplate\"></ng-template>\n</ng-template>\n<ng-template #selectionTemplate>\n    @if ((selectionMode === 'multi' || selectionMode === 'single') && !rowSelection) {\n        <div fd-form-item class=\"fd-list__form-item\">\n            @if (selectionMode === 'multi') {\n                <fd-checkbox\n                    (click)=\"$event.stopPropagation()\"\n                    [(ngModel)]=\"_selected\"\n                    [ariaLabel]=\"ariaLabel\"\n                    tabIndexValue=\"-1\"\n                    (ngModelChange)=\"_onCheckboxModelChange()\"\n                    [attr.aria-selected]=\"_selected\"\n                >\n                </fd-checkbox>\n            }\n            @if (selectionMode === 'single') {\n                <fd-radio-button\n                    [value]=\"value\"\n                    [name]=\"name\"\n                    role=\"radio\"\n                    [(ngModel)]=\"selectionValue\"\n                    [attr.aria-selected]=\"_selected\"\n                >\n                </fd-radio-button>\n            }\n        </div>\n    }\n</ng-template>\n<ng-template #actionsTemplate>\n    <ng-content select=\"#secondaryAction\"></ng-content>\n    @if (listType === 'detail') {\n        <button\n            fd-button\n            #edit\n            [attr.id]=\"'detail-' + id\"\n            role=\"button\"\n            fdType=\"transparent\"\n            glyph=\"edit\"\n            (click)=\"_onActionButtonClick('edit')\"\n            [attr.aria-label]=\"'platformStandardListItem.detailsActionAriaLabel' | fdTranslate\"\n            [attr.title]=\"'platformStandardListItem.detailsActionAriaLabel' | fdTranslate\"\n            (keydown)=\"_onKeyButtonClick($event, 'edit')\"\n        ></button>\n    }\n    @if (selectionMode === 'delete') {\n        <button\n            fd-button\n            #delete\n            [attr.id]=\"'delete-' + id\"\n            role=\"button\"\n            [attr.aria-label]=\"'platformStandardListItem.deleteActionAriaLabel' | fdTranslate\"\n            [attr.title]=\"'platformStandardListItem.deleteActionAriaLabel' | fdTranslate\"\n            fdType=\"transparent\"\n            glyph=\"decline\"\n            (click)=\"_onActionButtonClick('delete')\"\n            (keydown)=\"_onKeyButtonClick($event, 'delete')\"\n        ></button>\n    }\n</ng-template>\n<ng-template #simpleDescription let-description>\n    <span\n        class=\"fd-list__byline-left\"\n        [attr.aria-label]=\"description\"\n        [attr.title]=\"description\"\n        [attr.nowrap]=\"titleWrap\"\n    >\n        {{ description }}\n    </span>\n</ng-template>\n<ng-template #advancedDescription let-description>\n    <span\n        class=\"fd-list__byline-left\"\n        [attr.aria-label]=\"description.ariaLabel ?? description.text\"\n        [attr.title]=\"description.title ?? description.text\"\n        [attr.nowrap]=\"titleWrap\"\n    >\n        {{ description.text }}\n    </span>\n</ng-template>\n<ng-template #simpleSecondary let-secondary>\n    @if (!inverted) {\n        <span\n            [attr.aria-label]=\"secondary\"\n            class=\"fd-list__byline-right\"\n            [class]=\"statusType ? 'fd-list__byline-right--' + statusType : ''\"\n            [attr.title]=\"secondary\"\n            [attr.nowrap]=\"secondaryWrap\"\n        >\n            {{ secondary }}\n        </span>\n    } @else {\n        <span\n            class=\"fd-list__byline-right\"\n            [attr.aria-label]=\"secondary\"\n            [attr.title]=\"secondary\"\n            [attr.nowrap]=\"secondaryWrap\"\n        >\n            <fdp-object-status [status]=\"statusType\" [inverted]=\"inverted\" [label]=\"secondary\"></fdp-object-status>\n        </span>\n    }\n</ng-template>\n<ng-template #advancedSecondary let-secondary>\n    @if (!inverted) {\n        <span\n            [attr.aria-label]=\"secondary.ariaLabel ?? secondary.text\"\n            class=\"fd-list__byline-right\"\n            [class]=\"statusType ? 'fd-list__byline-right--' + statusType : ''\"\n            [attr.title]=\"secondary.title ?? secondary.text\"\n            [attr.nowrap]=\"secondaryWrap\"\n        >\n            {{ secondary.text }}\n        </span>\n    } @else {\n        <span\n            class=\"fd-list__byline-right\"\n            [attr.aria-label]=\"secondary.ariaLabel ?? secondary.text\"\n            [attr.title]=\"secondary.title ?? secondary.text\"\n            [attr.nowrap]=\"secondaryWrap\"\n        >\n            <fdp-object-status [status]=\"statusType\" [inverted]=\"inverted\" [label]=\"secondary.text\"></fdp-object-status>\n        </span>\n    }\n</ng-template>\n", dependencies: [{ kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "directive", type: ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "component", type: FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "selectedValue", "name", "id", "value", "required", "standalone"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: ObjectStatusComponent, selector: "fdp-object-status", inputs: ["status", "glyph", "glyphFont", "indicationColor", "secondaryIndication", "clickable", "inverted", "large", "label", "ariaLabel", "title"], outputs: ["objectStatusClick"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: StandardListItemComponent, decorators: [{
             type: Component,