@fundamental-ngx/core 0.35.0-rc.10 → 0.35.0-rc.13

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

@@ -86,7 +86,7 @@ class FeedListItemComponent {
     }
 }
 FeedListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: FeedListItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FeedListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: FeedListItemComponent, selector: "fd-feed-list-item", inputs: { class: "class", authorTitle: "authorTitle", authorLink: "authorLink", text: "text", maxChars: "maxChars", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", moreLabel: "moreLabel", lessLabel: "lessLabel", isRichText: "isRichText", mobile: "mobile" }, host: { properties: { "class.fd-feed-list__body": "this.isFeedListItemBody" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"mobile; then headerTmpl; else avatarContent\"></ng-container>\n<div class=\"fd-feed-list__content\">\n    <ng-container *ngIf=\"!mobile\">\n        <ng-container *ngTemplateOutlet=\"actionContent\"></ng-container>\n    </ng-container>\n    <p class=\"fd-feed-list__text\">\n        <ng-container *ngIf=\"!isRichText\">\n            <ng-container *ngTemplateOutlet=\"feedContent; context: { $implicit: author }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"isRichText\">\n            <ng-container *ngTemplateOutlet=\"author\"></ng-container>\n            <fd-formatted-text [htmlText]=\"text\"></fd-formatted-text>\n        </ng-container>\n    </p>\n    <ng-container *ngIf=\"!mobile\">\n        <ng-container *ngTemplateOutlet=\"footerContent\"></ng-container>\n    </ng-container>\n</div>\n\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\n<ng-template #author>\n    <span class=\"fd-feed-list__name\">\n        <ng-container *ngIf=\"authorLink; else authorTitleTemplate\">\n            <a\n                target=\"_blank\"\n                fd-link\n                [attr.title]=\"authorTitle\"\n                [attr.href]=\"authorLink | safe: 'url'\"\n                [emphasized]=\"true\"\n            >\n                <ng-container *ngTemplateOutlet=\"authorTitleTemplate\"></ng-container>\n            </a> </ng-container\n        >:\n    </span>\n</ng-template>\n<ng-template #authorTitleTemplate>\n    {{ authorTitle }}\n</ng-template>\n\n<ng-template #feedContent let-param>\n    <ng-container *ngTemplateOutlet=\"param\"></ng-container>\n    <span\n        fd-truncate\n        [fdTruncateState]=\"isCollapsed\"\n        [fdTruncateChars]=\"maxChars\"\n        [fdTruncateTargetText]=\"text\"\n        (charCountUpdate)=\"checkCharCount($event)\"\n    >\n    </span>\n    <a\n        fd-link\n        class=\"fd-feed-list__link--more\"\n        *ngIf=\"!isRichText && hasMore\"\n        (click)=\"toggleTextView()\"\n        [innerText]=\"isCollapsed ? moreLabel : lessLabel\"\n    ></a>\n</ng-template>\n\n<ng-template #headerTmpl>\n    <div class=\"fd-feed-list__wrapper\">\n        <div class=\"fd-feed-list__wrapper fd-feed-list__wrapper--header\">\n            <ng-container *ngTemplateOutlet=\"avatarContent\"></ng-container>\n            <div>\n                <ng-container *ngTemplateOutlet=\"author\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"footerContent\"></ng-container>\n            </div>\n        </div>\n        <ng-container *ngTemplateOutlet=\"actionContent\"></ng-container>\n    </div>\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"], components: [{ type: i1.FormattedTextComponent, selector: "fd-formatted-text", inputs: ["htmlText", "convertedLinksDefaultTarget", "height", "width"], exportAs: ["fd-formatted-text"] }, { type: i2.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.TruncateDirective, selector: "[fd-truncate]", inputs: ["fdTruncateTargetText", "fdTruncateChars", "fdTruncateState"], outputs: ["charCountUpdate"] }], pipes: { "safe": i4.SafePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+FeedListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: FeedListItemComponent, selector: "fd-feed-list-item", inputs: { class: "class", authorTitle: "authorTitle", authorLink: "authorLink", text: "text", maxChars: "maxChars", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", moreLabel: "moreLabel", lessLabel: "lessLabel", isRichText: "isRichText", mobile: "mobile" }, host: { properties: { "class.fd-feed-list__body": "this.isFeedListItemBody" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"mobile; then headerTmpl; else avatarContent\"></ng-container>\n<div class=\"fd-feed-list__content\">\n    <ng-container *ngIf=\"!mobile\">\n        <ng-container *ngTemplateOutlet=\"actionContent\"></ng-container>\n    </ng-container>\n    <p class=\"fd-feed-list__text\">\n        <ng-container *ngIf=\"!isRichText\">\n            <ng-container *ngTemplateOutlet=\"feedContent; context: { $implicit: author }\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"isRichText\">\n            <ng-container *ngTemplateOutlet=\"author\"></ng-container>\n            <fd-formatted-text [htmlText]=\"text\"></fd-formatted-text>\n        </ng-container>\n    </p>\n    <ng-container *ngIf=\"!mobile\">\n        <ng-container *ngTemplateOutlet=\"footerContent\"></ng-container>\n    </ng-container>\n</div>\n\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\n<ng-template #author>\n    <span class=\"fd-feed-list__name\">\n        <ng-container *ngIf=\"authorLink; else authorTitleTemplate\">\n            <a\n                target=\"_blank\"\n                fd-link\n                [attr.title]=\"authorTitle\"\n                [attr.href]=\"authorLink | safe: 'url'\"\n                [emphasized]=\"true\"\n            >\n                <ng-container *ngTemplateOutlet=\"authorTitleTemplate\"></ng-container>\n            </a> </ng-container\n        >:\n    </span>\n</ng-template>\n<ng-template #authorTitleTemplate>\n    {{ authorTitle }}\n</ng-template>\n\n<ng-template #feedContent let-param>\n    <ng-container *ngTemplateOutlet=\"param\"></ng-container>\n    <span\n        fd-truncate\n        [fdTruncateState]=\"isCollapsed\"\n        [fdTruncateChars]=\"maxChars\"\n        [fdTruncateTargetText]=\"text\"\n        (charCountUpdate)=\"checkCharCount($event)\"\n    >\n    </span>\n    <a\n        fd-link\n        class=\"fd-feed-list__link--more\"\n        *ngIf=\"!isRichText && hasMore\"\n        (click)=\"toggleTextView()\"\n        [innerText]=\"isCollapsed ? moreLabel : lessLabel\"\n    ></a>\n</ng-template>\n\n<ng-template #headerTmpl>\n    <div class=\"fd-feed-list__wrapper\">\n        <div class=\"fd-feed-list__wrapper fd-feed-list__wrapper--header\">\n            <ng-container *ngTemplateOutlet=\"avatarContent\"></ng-container>\n            <div>\n                <ng-container *ngTemplateOutlet=\"author\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"footerContent\"></ng-container>\n            </div>\n        </div>\n        <ng-container *ngTemplateOutlet=\"actionContent\"></ng-container>\n    </div>\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"], components: [{ type: i1.FormattedTextComponent, selector: "fd-formatted-text", inputs: ["htmlText", "convertedLinksDefaultTarget", "height", "width"], exportAs: ["fd-formatted-text"] }, { type: i2.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.TruncateDirective, selector: "[fd-truncate]", inputs: ["fdTruncateTargetText", "fdTruncateChars", "fdTruncateState"], outputs: ["charCountUpdate"] }], pipes: { "safe": i4.SafePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),

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

@@ -264,7 +264,7 @@ class FormLabelComponent {
     }
 }
 FormLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: FormLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FormLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: FormLabelComponent, selector: "[fd-form-label]", inputs: { required: "required", colon: "colon", checkbox: "checkbox", radio: "radio", alignLabelEnd: "alignLabelEnd", inlineHelpTitle: "inlineHelpTitle", inlineHelpGlyph: "inlineHelpGlyph", inlineHelpTriggers: "inlineHelpTriggers", inlineHelpBodyPlacement: "inlineHelpBodyPlacement", inlineHelpPlacement: "inlineHelpPlacement" }, host: { properties: { "class.fd-form-label__wrapper--align-end": "this.alignLabelEnd", "class.fd-form-label__wrapper": "this.defaultClass", "class.fd-form-label__wrapper--inline-help": "this.inlineHelpClass", "class.fd-form-label__wrapper--inline-help--after": "this.inlineHelpAfter" } }, usesOnChanges: true, ngImport: i0, template: "<ng-template #inlineHelpRef>\n    <span fd-link [undecorated]=\"true\">\n        <fd-icon\n            *ngIf=\"inlineHelpTitle\"\n            class=\"fd-form-label__help\"\n            [class.fd-form-label__help--after]=\"inlineHelpPlacement === 'after'\"\n            [glyph]=\"inlineHelpGlyph\"\n            [triggers]=\"inlineHelpTriggers\"\n            [fd-inline-help]=\"inlineHelpTitle\"\n            [ariaLabel]=\"inlineHelpTitle\"\n            [placement]=\"inlineHelpBodyPlacement\"\n            tabindex=\"0\"\n        ></fd-icon>\n    </span>\n</ng-template>\n\n<ng-container *ngIf=\"inlineHelpPlacement === 'before' && inlineHelpTitle\">\n    <ng-container *ngTemplateOutlet=\"inlineHelpRef\"></ng-container>\n</ng-container>\n\n<span class=\"fd-form-label\" [class.fd-form-label--required]=\"required\">\n    <ng-content></ng-content>\n    <ng-container *ngIf=\"colon\">:</ng-container>\n</span>\n\n<ng-container *ngIf=\"inlineHelpPlacement === 'after' && inlineHelpTitle\">\n    <ng-container *ngTemplateOutlet=\"inlineHelpRef\"></ng-container>\n</ng-container>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.0-rc.128\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-form-label\n*/.fd-form-label{line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:-moz-fit-content;width:fit-content;position:relative;max-width:100%;font-size:var(--sapFontSize);color:var(--sapContent_LabelColor);margin-right:.5rem;cursor:text;align-self:flex-start}.fd-form-label:before,.fd-form-label:after{box-sizing:inherit;font-size:inherit}[dir=rtl] .fd-form-label,.fd-form-label[dir=rtl]{margin-left:.5rem;margin-right:0}.fd-form-label.is-disabled{opacity:.4}.fd-form-label--unit-description{padding:0 0 0 .25rem;color:var(--sapField_TextColor);margin:0}[dir=rtl] .fd-form-label--unit-description,.fd-form-label--unit-description[dir=rtl]{margin:0;padding:0 .25rem 0 0}.fd-form-label--required,.fd-form-label[aria-required=true]{padding-right:.5rem}.fd-form-label--required:after,.fd-form-label[aria-required=true]:after{content:\"*\";font-size:var(--sapFontSize);font-weight:700;color:var(--sapField_RequiredColor);position:absolute;right:0;top:0}[dir=rtl] .fd-form-label--required,.fd-form-label--required[dir=rtl],[dir=rtl] .fd-form-label[aria-required=true],.fd-form-label[aria-required=true][dir=rtl]{padding-right:0;padding-left:.5rem}[dir=rtl] .fd-form-label--required:after,.fd-form-label--required[dir=rtl]:after,[dir=rtl] .fd-form-label[aria-required=true]:after,.fd-form-label[aria-required=true][dir=rtl]:after{right:auto;left:0}.fd-form-label--colon{padding-right:.25rem}.fd-form-label--colon:before{content:\":\";font-size:var(--sapFontSize);color:inherit;position:absolute;right:0;top:0}[dir=rtl] .fd-form-label--colon,.fd-form-label--colon[dir=rtl]{padding-left:.25rem;padding-right:0}[dir=rtl] .fd-form-label--colon:before,.fd-form-label--colon[dir=rtl]:before{right:auto;left:0}.fd-form-label--colon.fd-form-label--required,.fd-form-label--colon[aria-required=true]{padding-right:.75rem}.fd-form-label--colon.fd-form-label--required:before,.fd-form-label--colon[aria-required=true]:before{right:.5rem}[dir=rtl] .fd-form-label--colon.fd-form-label--required,.fd-form-label--colon.fd-form-label--required[dir=rtl],[dir=rtl] .fd-form-label--colon[aria-required=true],.fd-form-label--colon[aria-required=true][dir=rtl]{padding-left:.75rem;padding-right:0}[dir=rtl] .fd-form-label--colon.fd-form-label--required:before,.fd-form-label--colon.fd-form-label--required[dir=rtl]:before,[dir=rtl] .fd-form-label--colon[aria-required=true]:before,.fd-form-label--colon[aria-required=true][dir=rtl]:before{right:auto;left:.5rem}.fd-form-label--inline-help{width:100%;display:flex;justify-content:space-between;align-items:center}.fd-form-label{display:inline-block}.fd-form-label__wrapper{position:relative;display:flex;padding-bottom:.125rem}.fd-form-label__wrapper--align-end{justify-content:flex-end}.fd-form-label__wrapper span.fd-form-label{margin-bottom:-.125rem}.fd-form-label__wrapper--inline-help{display:flex;padding-left:0rem}[dir=rtl] .fd-form-label__wrapper--inline-help,.fd-form-label__wrapper--inline-help[dir=rtl],.fd-form-label__wrapper--inline-help--after{padding-left:0;padding-right:0rem}[dir=rtl] .fd-form-label__wrapper--inline-help--after,.fd-form-label__wrapper--inline-help--after[dir=rtl]{padding-right:0;padding-left:0rem}.fd-form-label__help{position:relative;vertical-align:middle;left:0;right:auto}[dir=rtl] .fd-form-label__help,.fd-form-label__help[dir=rtl],.fd-form-label__help--after{right:0;left:auto}[dir=rtl] .fd-form-label__help--after,.fd-form-label__help--after[dir=rtl]{left:0;right:auto}\n"], components: [{ type: i1$1.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { type: i2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.InlineHelpDirective, selector: "[fd-inline-help], [fd-inline-help-template]", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help", "fd-inline-help-template"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+FormLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: FormLabelComponent, selector: "[fd-form-label]", inputs: { required: "required", colon: "colon", checkbox: "checkbox", radio: "radio", alignLabelEnd: "alignLabelEnd", inlineHelpTitle: "inlineHelpTitle", inlineHelpGlyph: "inlineHelpGlyph", inlineHelpTriggers: "inlineHelpTriggers", inlineHelpBodyPlacement: "inlineHelpBodyPlacement", inlineHelpPlacement: "inlineHelpPlacement" }, host: { properties: { "class.fd-form-label__wrapper--align-end": "this.alignLabelEnd", "class.fd-form-label__wrapper": "this.defaultClass", "class.fd-form-label__wrapper--inline-help": "this.inlineHelpClass", "class.fd-form-label__wrapper--inline-help--after": "this.inlineHelpAfter" } }, usesOnChanges: true, ngImport: i0, template: "<ng-template #inlineHelpRef>\n    <span fd-link [undecorated]=\"true\">\n        <fd-icon\n            *ngIf=\"inlineHelpTitle\"\n            class=\"fd-form-label__help\"\n            [class.fd-form-label__help--after]=\"inlineHelpPlacement === 'after'\"\n            [glyph]=\"inlineHelpGlyph\"\n            [triggers]=\"inlineHelpTriggers\"\n            [fd-inline-help]=\"inlineHelpTitle\"\n            [ariaLabel]=\"inlineHelpTitle\"\n            [placement]=\"inlineHelpBodyPlacement\"\n            tabindex=\"0\"\n        ></fd-icon>\n    </span>\n</ng-template>\n\n<ng-container *ngIf=\"inlineHelpPlacement === 'before' && inlineHelpTitle\">\n    <ng-container *ngTemplateOutlet=\"inlineHelpRef\"></ng-container>\n</ng-container>\n\n<span class=\"fd-form-label\" [class.fd-form-label--required]=\"required\">\n    <ng-content></ng-content>\n    <ng-container *ngIf=\"colon\">:</ng-container>\n</span>\n\n<ng-container *ngIf=\"inlineHelpPlacement === 'after' && inlineHelpTitle\">\n    <ng-container *ngTemplateOutlet=\"inlineHelpRef\"></ng-container>\n</ng-container>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.0-rc.128\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-form-label\n*/.fd-form-label{line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:-moz-fit-content;width:fit-content;position:relative;max-width:100%;font-size:var(--sapFontSize);color:var(--sapContent_LabelColor);margin-right:.5rem;cursor:text;align-self:flex-start}.fd-form-label:before,.fd-form-label:after{box-sizing:inherit;font-size:inherit}[dir=rtl] .fd-form-label,.fd-form-label[dir=rtl]{margin-left:.5rem;margin-right:0}.fd-form-label.is-disabled{opacity:.4}.fd-form-label--unit-description{padding:0 0 0 .25rem;color:var(--sapField_TextColor);margin:0}[dir=rtl] .fd-form-label--unit-description,.fd-form-label--unit-description[dir=rtl]{margin:0;padding:0 .25rem 0 0}.fd-form-label--required,.fd-form-label[aria-required=true]{padding-right:.5rem}.fd-form-label--required:after,.fd-form-label[aria-required=true]:after{content:\"*\";font-size:var(--sapFontSize);font-weight:700;color:var(--sapField_RequiredColor);position:absolute;right:0;top:0}[dir=rtl] .fd-form-label--required,.fd-form-label--required[dir=rtl],[dir=rtl] .fd-form-label[aria-required=true],.fd-form-label[aria-required=true][dir=rtl]{padding-right:0;padding-left:.5rem}[dir=rtl] .fd-form-label--required:after,.fd-form-label--required[dir=rtl]:after,[dir=rtl] .fd-form-label[aria-required=true]:after,.fd-form-label[aria-required=true][dir=rtl]:after{right:auto;left:0}.fd-form-label--colon{padding-right:.25rem}.fd-form-label--colon:before{content:\":\";font-size:var(--sapFontSize);color:inherit;position:absolute;right:0;top:0}[dir=rtl] .fd-form-label--colon,.fd-form-label--colon[dir=rtl]{padding-left:.25rem;padding-right:0}[dir=rtl] .fd-form-label--colon:before,.fd-form-label--colon[dir=rtl]:before{right:auto;left:0}.fd-form-label--colon.fd-form-label--required,.fd-form-label--colon[aria-required=true]{padding-right:.75rem}.fd-form-label--colon.fd-form-label--required:before,.fd-form-label--colon[aria-required=true]:before{right:.5rem}[dir=rtl] .fd-form-label--colon.fd-form-label--required,.fd-form-label--colon.fd-form-label--required[dir=rtl],[dir=rtl] .fd-form-label--colon[aria-required=true],.fd-form-label--colon[aria-required=true][dir=rtl]{padding-left:.75rem;padding-right:0}[dir=rtl] .fd-form-label--colon.fd-form-label--required:before,.fd-form-label--colon.fd-form-label--required[dir=rtl]:before,[dir=rtl] .fd-form-label--colon[aria-required=true]:before,.fd-form-label--colon[aria-required=true][dir=rtl]:before{right:auto;left:.5rem}.fd-form-label--inline-help{width:100%;display:flex;justify-content:space-between;align-items:center}.fd-form-label{display:inline-block}.fd-form-label__wrapper{position:relative;display:flex;padding-bottom:.125rem}.fd-form-label__wrapper--align-end{justify-content:flex-end}.fd-form-label__wrapper span.fd-form-label{margin-bottom:-.125rem}.fd-form-label__wrapper--inline-help{display:flex;padding-left:0rem}[dir=rtl] .fd-form-label__wrapper--inline-help,.fd-form-label__wrapper--inline-help[dir=rtl],.fd-form-label__wrapper--inline-help--after{padding-left:0;padding-right:0rem}[dir=rtl] .fd-form-label__wrapper--inline-help--after,.fd-form-label__wrapper--inline-help--after[dir=rtl]{padding-right:0;padding-left:0rem}.fd-form-label__help{position:relative;vertical-align:middle;left:0;right:auto}[dir=rtl] .fd-form-label__help,.fd-form-label__help[dir=rtl],.fd-form-label__help--after{right:0;left:auto}[dir=rtl] .fd-form-label__help--after,.fd-form-label__help--after[dir=rtl]{left:0;right:auto}\n"], components: [{ type: i1$1.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { type: i2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.InlineHelpDirective, selector: "[fd-inline-help], [fd-inline-help-template]", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help", "fd-inline-help-template"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: FormLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: '[fd-form-label]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #inlineHelpRef>\n    <span fd-link [undecorated]=\"true\">\n        <fd-icon\n            *ngIf=\"inlineHelpTitle\"\n            class=\"fd-form-label__help\"\n            [class.fd-form-label__help--after]=\"inlineHelpPlacement === 'after'\"\n            [glyph]=\"inlineHelpGlyph\"\n            [triggers]=\"inlineHelpTriggers\"\n            [fd-inline-help]=\"inlineHelpTitle\"\n            [ariaLabel]=\"inlineHelpTitle\"\n            [placement]=\"inlineHelpBodyPlacement\"\n            tabindex=\"0\"\n        ></fd-icon>\n    </span>\n</ng-template>\n\n<ng-container *ngIf=\"inlineHelpPlacement === 'before' && inlineHelpTitle\">\n    <ng-container *ngTemplateOutlet=\"inlineHelpRef\"></ng-container>\n</ng-container>\n\n<span class=\"fd-form-label\" [class.fd-form-label--required]=\"required\">\n    <ng-content></ng-content>\n    <ng-container *ngIf=\"colon\">:</ng-container>\n</span>\n\n<ng-container *ngIf=\"inlineHelpPlacement === 'after' && inlineHelpTitle\">\n    <ng-container *ngTemplateOutlet=\"inlineHelpRef\"></ng-container>\n</ng-container>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.0-rc.128\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-form-label\n*/.fd-form-label{line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:-moz-fit-content;width:fit-content;position:relative;max-width:100%;font-size:var(--sapFontSize);color:var(--sapContent_LabelColor);margin-right:.5rem;cursor:text;align-self:flex-start}.fd-form-label:before,.fd-form-label:after{box-sizing:inherit;font-size:inherit}[dir=rtl] .fd-form-label,.fd-form-label[dir=rtl]{margin-left:.5rem;margin-right:0}.fd-form-label.is-disabled{opacity:.4}.fd-form-label--unit-description{padding:0 0 0 .25rem;color:var(--sapField_TextColor);margin:0}[dir=rtl] .fd-form-label--unit-description,.fd-form-label--unit-description[dir=rtl]{margin:0;padding:0 .25rem 0 0}.fd-form-label--required,.fd-form-label[aria-required=true]{padding-right:.5rem}.fd-form-label--required:after,.fd-form-label[aria-required=true]:after{content:\"*\";font-size:var(--sapFontSize);font-weight:700;color:var(--sapField_RequiredColor);position:absolute;right:0;top:0}[dir=rtl] .fd-form-label--required,.fd-form-label--required[dir=rtl],[dir=rtl] .fd-form-label[aria-required=true],.fd-form-label[aria-required=true][dir=rtl]{padding-right:0;padding-left:.5rem}[dir=rtl] .fd-form-label--required:after,.fd-form-label--required[dir=rtl]:after,[dir=rtl] .fd-form-label[aria-required=true]:after,.fd-form-label[aria-required=true][dir=rtl]:after{right:auto;left:0}.fd-form-label--colon{padding-right:.25rem}.fd-form-label--colon:before{content:\":\";font-size:var(--sapFontSize);color:inherit;position:absolute;right:0;top:0}[dir=rtl] .fd-form-label--colon,.fd-form-label--colon[dir=rtl]{padding-left:.25rem;padding-right:0}[dir=rtl] .fd-form-label--colon:before,.fd-form-label--colon[dir=rtl]:before{right:auto;left:0}.fd-form-label--colon.fd-form-label--required,.fd-form-label--colon[aria-required=true]{padding-right:.75rem}.fd-form-label--colon.fd-form-label--required:before,.fd-form-label--colon[aria-required=true]:before{right:.5rem}[dir=rtl] .fd-form-label--colon.fd-form-label--required,.fd-form-label--colon.fd-form-label--required[dir=rtl],[dir=rtl] .fd-form-label--colon[aria-required=true],.fd-form-label--colon[aria-required=true][dir=rtl]{padding-left:.75rem;padding-right:0}[dir=rtl] .fd-form-label--colon.fd-form-label--required:before,.fd-form-label--colon.fd-form-label--required[dir=rtl]:before,[dir=rtl] .fd-form-label--colon[aria-required=true]:before,.fd-form-label--colon[aria-required=true][dir=rtl]:before{right:auto;left:.5rem}.fd-form-label--inline-help{width:100%;display:flex;justify-content:space-between;align-items:center}.fd-form-label{display:inline-block}.fd-form-label__wrapper{position:relative;display:flex;padding-bottom:.125rem}.fd-form-label__wrapper--align-end{justify-content:flex-end}.fd-form-label__wrapper span.fd-form-label{margin-bottom:-.125rem}.fd-form-label__wrapper--inline-help{display:flex;padding-left:0rem}[dir=rtl] .fd-form-label__wrapper--inline-help,.fd-form-label__wrapper--inline-help[dir=rtl],.fd-form-label__wrapper--inline-help--after{padding-left:0;padding-right:0rem}[dir=rtl] .fd-form-label__wrapper--inline-help--after,.fd-form-label__wrapper--inline-help--after[dir=rtl]{padding-right:0;padding-left:0rem}.fd-form-label__help{position:relative;vertical-align:middle;left:0;right:auto}[dir=rtl] .fd-form-label__help,.fd-form-label__help[dir=rtl],.fd-form-label__help--after{right:0;left:auto}[dir=rtl] .fd-form-label__help--after,.fd-form-label__help--after[dir=rtl]{left:0;right:auto}\n"] }]

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

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChildren, ViewChild, Input, NgModule } from '@angular/core';
+import { isDevMode, Optional, Self, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, ContentChildren, ViewChild, Input, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { __decorate, __metadata } from 'tslib';
+import { RouterLinkWithHref, RouterLink } from '@angular/router';
 import { applyCssClass } from '@fundamental-ngx/core/utils';
 import { Subject, startWith, map, tap, takeUntil } from 'rxjs';
 import * as i3 from '@angular/cdk/portal';
@@ -12,12 +13,16 @@ import * as i1 from '@angular/cdk/observers';
 
 class LinkComponent {
     /** @hidden */
-    constructor(_elementRef, contentObserver, changeDetectorRef) {
+    constructor(_elementRef, contentObserver, changeDetectorRef, routerLink) {
         this._elementRef = _elementRef;
         this.contentObserver = contentObserver;
         this.changeDetectorRef = changeDetectorRef;
+        this.routerLink = routerLink;
         /** @hidden */
         this._destroyed$ = new Subject();
+        if (isDevMode() && this.elementRef().nativeElement.hasAttribute('fd-breadcrumb-link')) {
+            console.warn('The fd-breadcrumb-link attribute is deprecated. Please use fd-link instead.');
+        }
     }
     /** @hidden */
     ngOnChanges() {
@@ -61,6 +66,18 @@ class LinkComponent {
                 this.contentSpan.nativeElement.childNodes[this.contentSpan.nativeElement.childNodes.length - 1]
                 ? icons[icons.length - 1].elementRef().nativeElement
                 : null;
+            if (prefix) {
+                this._prefixIconName = this.iconComponents.first.glyph;
+            }
+            else {
+                this._prefixIconName = '';
+            }
+            if (postfix) {
+                this._postfixIconName = this.iconComponents.last.glyph;
+            }
+            else {
+                this._postfixIconName = '';
+            }
             return { prefix, postfix };
         }), tap(() => {
             var _a, _b;
@@ -84,8 +101,17 @@ class LinkComponent {
         this._destroyed$.complete();
     }
 }
-LinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: LinkComponent, deps: [{ token: i0.ElementRef }, { token: i1.ContentObserver }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-LinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: LinkComponent, selector: "[fdLink], [fd-link]", inputs: { class: "class", emphasized: "emphasized", disabled: "disabled", inverted: "inverted", subtle: "subtle", undecorated: "undecorated" }, queries: [{ propertyName: "iconComponents", predicate: IconComponent }], viewQueries: [{ propertyName: "contentSpan", first: true, predicate: ["content"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span *ngIf=\"_prefixPortal\">\n    <ng-container *cdkPortalOutlet=\"_prefixPortal\"></ng-container>\n</span>\n<span class=\"fd-link__content\" #content>\n    <ng-content></ng-content>\n</span>\n<span *ngIf=\"_postfixPortal\">\n    <ng-container *cdkPortalOutlet=\"_postfixPortal\"></ng-container>\n</span>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.0-rc.128\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-link\n*/.fd-link{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;color:var(--sapLinkColor);text-shadow:var(--sapContent_TextShadow);display:inline-block;display:var(--fdLink_Display, inline-block);align-items:center;transition:all .125s ease-in;line-height:inherit;-webkit-text-decoration:none;-webkit-text-decoration:var(--fdLink_Text_Decoration, none);text-decoration:none;text-decoration:var(--fdLink_Text_Decoration, none)}.fd-link:before,.fd-link:after{box-sizing:inherit;font-size:inherit}.fd-link__content{-webkit-text-decoration:none;-webkit-text-decoration:var(--fdLink_Text_Content_Decoration, none);text-decoration:none;text-decoration:var(--fdLink_Text_Content_Decoration, none)}.fd-link:hover,.fd-link.is-hover{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Hover, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Hover, none)}.fd-link:focus,.fd-link.is-focus{z-index:5;--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Focus, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Focus, none)}.fd-link:active,.fd-link.is-active{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Active, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Active, none)}.fd-link[aria-disabled=true],.fd-link.is-disabled,.fd-link:disabled{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Disabled, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Disabled, none)}.fd-link--subtle{--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Subtle, none);--fdLink_Text_Content_Decoration_Hover: var(--fdLink_Text_Content_Decoration_Subtle_Hover, none);--fdLink_Text_Content_Decoration_Active: var(--fdLink_Text_Content_Decoration_Subtle_Active, none);--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Subtle, none);--fdLink_Text_Decoration_Hover: var(--fdLink_Text_Decoration_Subtle_Hover, none);--fdLink_Text_Decoration_Active: var(--fdLink_Text_Decoration_Subtle_Active, none)}.fd-link--undecorated{--fdLink_Text_Decoration: none;--fdLink_Text_Decoration_Subtle: none;--fdLink_Text_Decoration_Subtle_Hover: none;--fdLink_Text_Decoration_Subtle_Active: none;--fdLink_Text_Decoration_Hover: none;--fdLink_Text_Decoration_Focus: none;--fdLink_Text_Decoration_Active: none;--fdLink_Text_Decoration_Visited: none;--fdLink_Text_Decoration_Disabled: none;--fdLink_Text_Content_Decoration: none;--fdLink_Text_Content_Decoration_Subtle: none;--fdLink_Text_Content_Decoration_Subtle_Hover: none;--fdLink_Text_Content_Decoration_Subtle_Active: none;--fdLink_Text_Content_Decoration_Hover: none;--fdLink_Text_Content_Decoration_Focus: none;--fdLink_Text_Content_Decoration_Active: none;--fdLink_Text_Content_Decoration_Visited: none;--fdLink_Text_Content_Decoration_Disabled: none}.fd-link--emphasized{font-weight:700}.fd-link:visited{color:var(--sapLink_Visited_Color)}.fd-link:hover,.fd-link.is-hover{color:var(--sapLink_Hover_Color)}.fd-link:focus,.fd-link.is-focus{z-index:5;box-shadow:none;color:var(--fdLink_Text_Focus_Color);background-color:var(--fdLink_Focus_Background);border-radius:var(--fdLink_Focus_Border_Radius);text-shadow:var(--fdLink_Focus_Text_Shadow);outline-offset:var(--fdLink_Hover_Outline_Offset);outline-width:var(--fdLink_Hover_Outline_Width);outline-color:var(--fdLink_Hover_Outline_Color);outline-style:var(--fdLink_Hover_Outline_Style)}.fd-link:active,.fd-link.is-active{color:var(--sapLink_Active_Color)}.fd-link:active:focus,.fd-link:active.is-focus,.fd-link.is-active:focus,.fd-link.is-active.is-focus{z-index:5;background-color:transparent}.fd-link--inverted{color:var(--sapLink_InvertedColor);text-shadow:none}.fd-link--inverted:hover,.fd-link--inverted.is-hover{color:var(--sapLink_InvertedColor)}.fd-link--inverted:focus,.fd-link--inverted.is-focus{z-index:5;outline-color:var(--sapContent_ContrastFocusColor)}.fd-link--subtle{color:var(--sapLink_SubtleColor)}.fd-link[aria-disabled=true],.fd-link.is-disabled,.fd-link:disabled{opacity:var(--sapContent_DisabledOpacity);color:var(--sapLinkColor);pointer-events:none}.fd-link>img{vertical-align:bottom}.fd-link [class*=sap-icon],.fd-link[class*=sap-icon]{color:var(--sapLinkColor)}.fd-link [class*=sap-icon]:first-child,.fd-link[class*=sap-icon]:first-child{margin-right:0;margin-right:var(--fdLink_Icon_Spacing, 0)}[dir=rtl] .fd-link [class*=sap-icon]:first-child,.fd-link [class*=sap-icon]:first-child[dir=rtl],[dir=rtl] .fd-link[class*=sap-icon]:first-child,.fd-link[class*=sap-icon]:first-child[dir=rtl]{margin-right:0;margin-left:0;margin-left:var(--fdLink_Icon_Spacing, 0)}.fd-link [class*=sap-icon]:last-child,.fd-link[class*=sap-icon]:last-child{margin-left:0;margin-left:var(--fdLink_Icon_Spacing, 0)}[dir=rtl] .fd-link [class*=sap-icon]:last-child,.fd-link [class*=sap-icon]:last-child[dir=rtl],[dir=rtl] .fd-link[class*=sap-icon]:last-child,.fd-link[class*=sap-icon]:last-child[dir=rtl]{margin-right:0;margin-right:var(--fdLink_Icon_Spacing, 0);margin-left:0}.fd-link:hover [class*=sap-icon],.fd-link:hover[class*=sap-icon],.fd-link.is-hover [class*=sap-icon],.fd-link.is-hover[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Hover);text-decoration:var(--fdLink_Text_Decoration_Hover);color:var(--sapLink_Hover_Color)}.fd-link:focus,.fd-link.is-focus{z-index:5}.fd-link:focus [class*=sap-icon],.fd-link:focus[class*=sap-icon],.fd-link.is-focus [class*=sap-icon],.fd-link.is-focus[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Focus);text-decoration:var(--fdLink_Text_Decoration_Focus);color:var(--fdLink_Text_Focus_Color)}.fd-link:active [class*=sap-icon],.fd-link:active[class*=sap-icon],.fd-link.is-active [class*=sap-icon],.fd-link.is-active[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Active);text-decoration:var(--fdLink_Text_Decoration_Active);color:var(--sapLink_Active_Color)}.fd-link:visited [class*=sap-icon],.fd-link:visited[class*=sap-icon]{color:var(--sapLink_Visited_Color)}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+LinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: LinkComponent, deps: [{ token: i0.ElementRef }, { token: i1.ContentObserver }, { token: i0.ChangeDetectorRef }, { token: 'linkRouterTarget' }], target: i0.ɵɵFactoryTarget.Component });
+LinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: { class: "class", emphasized: "emphasized", disabled: "disabled", inverted: "inverted", subtle: "subtle", undecorated: "undecorated" }, providers: [
+        {
+            provide: 'linkRouterTarget',
+            useFactory: (withHref, routerLink) => withHref || routerLink,
+            deps: [
+                [new Optional(), new Self(), RouterLinkWithHref],
+                [new Optional(), new Self(), RouterLink]
+            ]
+        }
+    ], queries: [{ propertyName: "iconComponents", predicate: IconComponent }], viewQueries: [{ propertyName: "contentSpan", first: true, predicate: ["content"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span *ngIf=\"_prefixPortal\">\n    <ng-container *cdkPortalOutlet=\"_prefixPortal\"></ng-container>\n</span>\n<span class=\"fd-link__content\" #content>\n    <ng-content></ng-content>\n</span>\n<span *ngIf=\"_postfixPortal\">\n    <ng-container *cdkPortalOutlet=\"_postfixPortal\"></ng-container>\n</span>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.0-rc.128\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-link\n*/.fd-link{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;color:var(--sapLinkColor);text-shadow:var(--sapContent_TextShadow);display:inline-block;display:var(--fdLink_Display, inline-block);align-items:center;transition:all .125s ease-in;line-height:inherit;-webkit-text-decoration:none;-webkit-text-decoration:var(--fdLink_Text_Decoration, none);text-decoration:none;text-decoration:var(--fdLink_Text_Decoration, none)}.fd-link:before,.fd-link:after{box-sizing:inherit;font-size:inherit}.fd-link__content{-webkit-text-decoration:none;-webkit-text-decoration:var(--fdLink_Text_Content_Decoration, none);text-decoration:none;text-decoration:var(--fdLink_Text_Content_Decoration, none)}.fd-link:hover,.fd-link.is-hover{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Hover, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Hover, none)}.fd-link:focus,.fd-link.is-focus{z-index:5;--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Focus, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Focus, none)}.fd-link:active,.fd-link.is-active{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Active, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Active, none)}.fd-link[aria-disabled=true],.fd-link.is-disabled,.fd-link:disabled{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Disabled, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Disabled, none)}.fd-link--subtle{--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Subtle, none);--fdLink_Text_Content_Decoration_Hover: var(--fdLink_Text_Content_Decoration_Subtle_Hover, none);--fdLink_Text_Content_Decoration_Active: var(--fdLink_Text_Content_Decoration_Subtle_Active, none);--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Subtle, none);--fdLink_Text_Decoration_Hover: var(--fdLink_Text_Decoration_Subtle_Hover, none);--fdLink_Text_Decoration_Active: var(--fdLink_Text_Decoration_Subtle_Active, none)}.fd-link--undecorated{--fdLink_Text_Decoration: none;--fdLink_Text_Decoration_Subtle: none;--fdLink_Text_Decoration_Subtle_Hover: none;--fdLink_Text_Decoration_Subtle_Active: none;--fdLink_Text_Decoration_Hover: none;--fdLink_Text_Decoration_Focus: none;--fdLink_Text_Decoration_Active: none;--fdLink_Text_Decoration_Visited: none;--fdLink_Text_Decoration_Disabled: none;--fdLink_Text_Content_Decoration: none;--fdLink_Text_Content_Decoration_Subtle: none;--fdLink_Text_Content_Decoration_Subtle_Hover: none;--fdLink_Text_Content_Decoration_Subtle_Active: none;--fdLink_Text_Content_Decoration_Hover: none;--fdLink_Text_Content_Decoration_Focus: none;--fdLink_Text_Content_Decoration_Active: none;--fdLink_Text_Content_Decoration_Visited: none;--fdLink_Text_Content_Decoration_Disabled: none}.fd-link--emphasized{font-weight:700}.fd-link:visited{color:var(--sapLink_Visited_Color)}.fd-link:hover,.fd-link.is-hover{color:var(--sapLink_Hover_Color)}.fd-link:focus,.fd-link.is-focus{z-index:5;box-shadow:none;color:var(--fdLink_Text_Focus_Color);background-color:var(--fdLink_Focus_Background);border-radius:var(--fdLink_Focus_Border_Radius);text-shadow:var(--fdLink_Focus_Text_Shadow);outline-offset:var(--fdLink_Hover_Outline_Offset);outline-width:var(--fdLink_Hover_Outline_Width);outline-color:var(--fdLink_Hover_Outline_Color);outline-style:var(--fdLink_Hover_Outline_Style)}.fd-link:active,.fd-link.is-active{color:var(--sapLink_Active_Color)}.fd-link:active:focus,.fd-link:active.is-focus,.fd-link.is-active:focus,.fd-link.is-active.is-focus{z-index:5;background-color:transparent}.fd-link--inverted{color:var(--sapLink_InvertedColor);text-shadow:none}.fd-link--inverted:hover,.fd-link--inverted.is-hover{color:var(--sapLink_InvertedColor)}.fd-link--inverted:focus,.fd-link--inverted.is-focus{z-index:5;outline-color:var(--sapContent_ContrastFocusColor)}.fd-link--subtle{color:var(--sapLink_SubtleColor)}.fd-link[aria-disabled=true],.fd-link.is-disabled,.fd-link:disabled{opacity:var(--sapContent_DisabledOpacity);color:var(--sapLinkColor);pointer-events:none}.fd-link>img{vertical-align:bottom}.fd-link [class*=sap-icon],.fd-link[class*=sap-icon]{color:var(--sapLinkColor)}.fd-link [class*=sap-icon]:first-child,.fd-link[class*=sap-icon]:first-child{margin-right:0;margin-right:var(--fdLink_Icon_Spacing, 0)}[dir=rtl] .fd-link [class*=sap-icon]:first-child,.fd-link [class*=sap-icon]:first-child[dir=rtl],[dir=rtl] .fd-link[class*=sap-icon]:first-child,.fd-link[class*=sap-icon]:first-child[dir=rtl]{margin-right:0;margin-left:0;margin-left:var(--fdLink_Icon_Spacing, 0)}.fd-link [class*=sap-icon]:last-child,.fd-link[class*=sap-icon]:last-child{margin-left:0;margin-left:var(--fdLink_Icon_Spacing, 0)}[dir=rtl] .fd-link [class*=sap-icon]:last-child,.fd-link [class*=sap-icon]:last-child[dir=rtl],[dir=rtl] .fd-link[class*=sap-icon]:last-child,.fd-link[class*=sap-icon]:last-child[dir=rtl]{margin-right:0;margin-right:var(--fdLink_Icon_Spacing, 0);margin-left:0}.fd-link:hover [class*=sap-icon],.fd-link:hover[class*=sap-icon],.fd-link.is-hover [class*=sap-icon],.fd-link.is-hover[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Hover);text-decoration:var(--fdLink_Text_Decoration_Hover);color:var(--sapLink_Hover_Color)}.fd-link:focus,.fd-link.is-focus{z-index:5}.fd-link:focus [class*=sap-icon],.fd-link:focus[class*=sap-icon],.fd-link.is-focus [class*=sap-icon],.fd-link.is-focus[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Focus);text-decoration:var(--fdLink_Text_Decoration_Focus);color:var(--fdLink_Text_Focus_Color)}.fd-link:active [class*=sap-icon],.fd-link:active[class*=sap-icon],.fd-link.is-active [class*=sap-icon],.fd-link.is-active[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Active);text-decoration:var(--fdLink_Text_Decoration_Active);color:var(--sapLink_Active_Color)}.fd-link:visited [class*=sap-icon],.fd-link:visited[class*=sap-icon]{color:var(--sapLink_Visited_Color)}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),
@@ -94,8 +120,22 @@ __decorate([
 ], LinkComponent.prototype, "buildComponentCssClass", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: LinkComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[fdLink], [fd-link]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span *ngIf=\"_prefixPortal\">\n    <ng-container *cdkPortalOutlet=\"_prefixPortal\"></ng-container>\n</span>\n<span class=\"fd-link__content\" #content>\n    <ng-content></ng-content>\n</span>\n<span *ngIf=\"_postfixPortal\">\n    <ng-container *cdkPortalOutlet=\"_postfixPortal\"></ng-container>\n</span>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.0-rc.128\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-link\n*/.fd-link{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;color:var(--sapLinkColor);text-shadow:var(--sapContent_TextShadow);display:inline-block;display:var(--fdLink_Display, inline-block);align-items:center;transition:all .125s ease-in;line-height:inherit;-webkit-text-decoration:none;-webkit-text-decoration:var(--fdLink_Text_Decoration, none);text-decoration:none;text-decoration:var(--fdLink_Text_Decoration, none)}.fd-link:before,.fd-link:after{box-sizing:inherit;font-size:inherit}.fd-link__content{-webkit-text-decoration:none;-webkit-text-decoration:var(--fdLink_Text_Content_Decoration, none);text-decoration:none;text-decoration:var(--fdLink_Text_Content_Decoration, none)}.fd-link:hover,.fd-link.is-hover{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Hover, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Hover, none)}.fd-link:focus,.fd-link.is-focus{z-index:5;--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Focus, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Focus, none)}.fd-link:active,.fd-link.is-active{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Active, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Active, none)}.fd-link[aria-disabled=true],.fd-link.is-disabled,.fd-link:disabled{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Disabled, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Disabled, none)}.fd-link--subtle{--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Subtle, none);--fdLink_Text_Content_Decoration_Hover: var(--fdLink_Text_Content_Decoration_Subtle_Hover, none);--fdLink_Text_Content_Decoration_Active: var(--fdLink_Text_Content_Decoration_Subtle_Active, none);--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Subtle, none);--fdLink_Text_Decoration_Hover: var(--fdLink_Text_Decoration_Subtle_Hover, none);--fdLink_Text_Decoration_Active: var(--fdLink_Text_Decoration_Subtle_Active, none)}.fd-link--undecorated{--fdLink_Text_Decoration: none;--fdLink_Text_Decoration_Subtle: none;--fdLink_Text_Decoration_Subtle_Hover: none;--fdLink_Text_Decoration_Subtle_Active: none;--fdLink_Text_Decoration_Hover: none;--fdLink_Text_Decoration_Focus: none;--fdLink_Text_Decoration_Active: none;--fdLink_Text_Decoration_Visited: none;--fdLink_Text_Decoration_Disabled: none;--fdLink_Text_Content_Decoration: none;--fdLink_Text_Content_Decoration_Subtle: none;--fdLink_Text_Content_Decoration_Subtle_Hover: none;--fdLink_Text_Content_Decoration_Subtle_Active: none;--fdLink_Text_Content_Decoration_Hover: none;--fdLink_Text_Content_Decoration_Focus: none;--fdLink_Text_Content_Decoration_Active: none;--fdLink_Text_Content_Decoration_Visited: none;--fdLink_Text_Content_Decoration_Disabled: none}.fd-link--emphasized{font-weight:700}.fd-link:visited{color:var(--sapLink_Visited_Color)}.fd-link:hover,.fd-link.is-hover{color:var(--sapLink_Hover_Color)}.fd-link:focus,.fd-link.is-focus{z-index:5;box-shadow:none;color:var(--fdLink_Text_Focus_Color);background-color:var(--fdLink_Focus_Background);border-radius:var(--fdLink_Focus_Border_Radius);text-shadow:var(--fdLink_Focus_Text_Shadow);outline-offset:var(--fdLink_Hover_Outline_Offset);outline-width:var(--fdLink_Hover_Outline_Width);outline-color:var(--fdLink_Hover_Outline_Color);outline-style:var(--fdLink_Hover_Outline_Style)}.fd-link:active,.fd-link.is-active{color:var(--sapLink_Active_Color)}.fd-link:active:focus,.fd-link:active.is-focus,.fd-link.is-active:focus,.fd-link.is-active.is-focus{z-index:5;background-color:transparent}.fd-link--inverted{color:var(--sapLink_InvertedColor);text-shadow:none}.fd-link--inverted:hover,.fd-link--inverted.is-hover{color:var(--sapLink_InvertedColor)}.fd-link--inverted:focus,.fd-link--inverted.is-focus{z-index:5;outline-color:var(--sapContent_ContrastFocusColor)}.fd-link--subtle{color:var(--sapLink_SubtleColor)}.fd-link[aria-disabled=true],.fd-link.is-disabled,.fd-link:disabled{opacity:var(--sapContent_DisabledOpacity);color:var(--sapLinkColor);pointer-events:none}.fd-link>img{vertical-align:bottom}.fd-link [class*=sap-icon],.fd-link[class*=sap-icon]{color:var(--sapLinkColor)}.fd-link [class*=sap-icon]:first-child,.fd-link[class*=sap-icon]:first-child{margin-right:0;margin-right:var(--fdLink_Icon_Spacing, 0)}[dir=rtl] .fd-link [class*=sap-icon]:first-child,.fd-link [class*=sap-icon]:first-child[dir=rtl],[dir=rtl] .fd-link[class*=sap-icon]:first-child,.fd-link[class*=sap-icon]:first-child[dir=rtl]{margin-right:0;margin-left:0;margin-left:var(--fdLink_Icon_Spacing, 0)}.fd-link [class*=sap-icon]:last-child,.fd-link[class*=sap-icon]:last-child{margin-left:0;margin-left:var(--fdLink_Icon_Spacing, 0)}[dir=rtl] .fd-link [class*=sap-icon]:last-child,.fd-link [class*=sap-icon]:last-child[dir=rtl],[dir=rtl] .fd-link[class*=sap-icon]:last-child,.fd-link[class*=sap-icon]:last-child[dir=rtl]{margin-right:0;margin-right:var(--fdLink_Icon_Spacing, 0);margin-left:0}.fd-link:hover [class*=sap-icon],.fd-link:hover[class*=sap-icon],.fd-link.is-hover [class*=sap-icon],.fd-link.is-hover[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Hover);text-decoration:var(--fdLink_Text_Decoration_Hover);color:var(--sapLink_Hover_Color)}.fd-link:focus,.fd-link.is-focus{z-index:5}.fd-link:focus [class*=sap-icon],.fd-link:focus[class*=sap-icon],.fd-link.is-focus [class*=sap-icon],.fd-link.is-focus[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Focus);text-decoration:var(--fdLink_Text_Decoration_Focus);color:var(--fdLink_Text_Focus_Color)}.fd-link:active [class*=sap-icon],.fd-link:active[class*=sap-icon],.fd-link.is-active [class*=sap-icon],.fd-link.is-active[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Active);text-decoration:var(--fdLink_Text_Decoration_Active);color:var(--sapLink_Active_Color)}.fd-link:visited [class*=sap-icon],.fd-link:visited[class*=sap-icon]{color:var(--sapLink_Visited_Color)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ContentObserver }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { iconComponents: [{
+            args: [{ selector: '[fdLink], [fd-link], [fd-breadcrumb-link]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: 'linkRouterTarget',
+                            useFactory: (withHref, routerLink) => withHref || routerLink,
+                            deps: [
+                                [new Optional(), new Self(), RouterLinkWithHref],
+                                [new Optional(), new Self(), RouterLink]
+                            ]
+                        }
+                    ], template: "<span *ngIf=\"_prefixPortal\">\n    <ng-container *cdkPortalOutlet=\"_prefixPortal\"></ng-container>\n</span>\n<span class=\"fd-link__content\" #content>\n    <ng-content></ng-content>\n</span>\n<span *ngIf=\"_postfixPortal\">\n    <ng-container *cdkPortalOutlet=\"_postfixPortal\"></ng-container>\n</span>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.0-rc.128\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-link\n*/.fd-link{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;color:var(--sapLinkColor);text-shadow:var(--sapContent_TextShadow);display:inline-block;display:var(--fdLink_Display, inline-block);align-items:center;transition:all .125s ease-in;line-height:inherit;-webkit-text-decoration:none;-webkit-text-decoration:var(--fdLink_Text_Decoration, none);text-decoration:none;text-decoration:var(--fdLink_Text_Decoration, none)}.fd-link:before,.fd-link:after{box-sizing:inherit;font-size:inherit}.fd-link__content{-webkit-text-decoration:none;-webkit-text-decoration:var(--fdLink_Text_Content_Decoration, none);text-decoration:none;text-decoration:var(--fdLink_Text_Content_Decoration, none)}.fd-link:hover,.fd-link.is-hover{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Hover, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Hover, none)}.fd-link:focus,.fd-link.is-focus{z-index:5;--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Focus, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Focus, none)}.fd-link:active,.fd-link.is-active{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Active, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Active, none)}.fd-link[aria-disabled=true],.fd-link.is-disabled,.fd-link:disabled{--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Disabled, none);--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Disabled, none)}.fd-link--subtle{--fdLink_Text_Content_Decoration: var(--fdLink_Text_Content_Decoration_Subtle, none);--fdLink_Text_Content_Decoration_Hover: var(--fdLink_Text_Content_Decoration_Subtle_Hover, none);--fdLink_Text_Content_Decoration_Active: var(--fdLink_Text_Content_Decoration_Subtle_Active, none);--fdLink_Text_Decoration: var(--fdLink_Text_Decoration_Subtle, none);--fdLink_Text_Decoration_Hover: var(--fdLink_Text_Decoration_Subtle_Hover, none);--fdLink_Text_Decoration_Active: var(--fdLink_Text_Decoration_Subtle_Active, none)}.fd-link--undecorated{--fdLink_Text_Decoration: none;--fdLink_Text_Decoration_Subtle: none;--fdLink_Text_Decoration_Subtle_Hover: none;--fdLink_Text_Decoration_Subtle_Active: none;--fdLink_Text_Decoration_Hover: none;--fdLink_Text_Decoration_Focus: none;--fdLink_Text_Decoration_Active: none;--fdLink_Text_Decoration_Visited: none;--fdLink_Text_Decoration_Disabled: none;--fdLink_Text_Content_Decoration: none;--fdLink_Text_Content_Decoration_Subtle: none;--fdLink_Text_Content_Decoration_Subtle_Hover: none;--fdLink_Text_Content_Decoration_Subtle_Active: none;--fdLink_Text_Content_Decoration_Hover: none;--fdLink_Text_Content_Decoration_Focus: none;--fdLink_Text_Content_Decoration_Active: none;--fdLink_Text_Content_Decoration_Visited: none;--fdLink_Text_Content_Decoration_Disabled: none}.fd-link--emphasized{font-weight:700}.fd-link:visited{color:var(--sapLink_Visited_Color)}.fd-link:hover,.fd-link.is-hover{color:var(--sapLink_Hover_Color)}.fd-link:focus,.fd-link.is-focus{z-index:5;box-shadow:none;color:var(--fdLink_Text_Focus_Color);background-color:var(--fdLink_Focus_Background);border-radius:var(--fdLink_Focus_Border_Radius);text-shadow:var(--fdLink_Focus_Text_Shadow);outline-offset:var(--fdLink_Hover_Outline_Offset);outline-width:var(--fdLink_Hover_Outline_Width);outline-color:var(--fdLink_Hover_Outline_Color);outline-style:var(--fdLink_Hover_Outline_Style)}.fd-link:active,.fd-link.is-active{color:var(--sapLink_Active_Color)}.fd-link:active:focus,.fd-link:active.is-focus,.fd-link.is-active:focus,.fd-link.is-active.is-focus{z-index:5;background-color:transparent}.fd-link--inverted{color:var(--sapLink_InvertedColor);text-shadow:none}.fd-link--inverted:hover,.fd-link--inverted.is-hover{color:var(--sapLink_InvertedColor)}.fd-link--inverted:focus,.fd-link--inverted.is-focus{z-index:5;outline-color:var(--sapContent_ContrastFocusColor)}.fd-link--subtle{color:var(--sapLink_SubtleColor)}.fd-link[aria-disabled=true],.fd-link.is-disabled,.fd-link:disabled{opacity:var(--sapContent_DisabledOpacity);color:var(--sapLinkColor);pointer-events:none}.fd-link>img{vertical-align:bottom}.fd-link [class*=sap-icon],.fd-link[class*=sap-icon]{color:var(--sapLinkColor)}.fd-link [class*=sap-icon]:first-child,.fd-link[class*=sap-icon]:first-child{margin-right:0;margin-right:var(--fdLink_Icon_Spacing, 0)}[dir=rtl] .fd-link [class*=sap-icon]:first-child,.fd-link [class*=sap-icon]:first-child[dir=rtl],[dir=rtl] .fd-link[class*=sap-icon]:first-child,.fd-link[class*=sap-icon]:first-child[dir=rtl]{margin-right:0;margin-left:0;margin-left:var(--fdLink_Icon_Spacing, 0)}.fd-link [class*=sap-icon]:last-child,.fd-link[class*=sap-icon]:last-child{margin-left:0;margin-left:var(--fdLink_Icon_Spacing, 0)}[dir=rtl] .fd-link [class*=sap-icon]:last-child,.fd-link [class*=sap-icon]:last-child[dir=rtl],[dir=rtl] .fd-link[class*=sap-icon]:last-child,.fd-link[class*=sap-icon]:last-child[dir=rtl]{margin-right:0;margin-right:var(--fdLink_Icon_Spacing, 0);margin-left:0}.fd-link:hover [class*=sap-icon],.fd-link:hover[class*=sap-icon],.fd-link.is-hover [class*=sap-icon],.fd-link.is-hover[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Hover);text-decoration:var(--fdLink_Text_Decoration_Hover);color:var(--sapLink_Hover_Color)}.fd-link:focus,.fd-link.is-focus{z-index:5}.fd-link:focus [class*=sap-icon],.fd-link:focus[class*=sap-icon],.fd-link.is-focus [class*=sap-icon],.fd-link.is-focus[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Focus);text-decoration:var(--fdLink_Text_Decoration_Focus);color:var(--fdLink_Text_Focus_Color)}.fd-link:active [class*=sap-icon],.fd-link:active[class*=sap-icon],.fd-link.is-active [class*=sap-icon],.fd-link.is-active[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Active);text-decoration:var(--fdLink_Text_Decoration_Active);color:var(--sapLink_Active_Color)}.fd-link:visited [class*=sap-icon],.fd-link:visited[class*=sap-icon]{color:var(--sapLink_Visited_Color)}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i1.ContentObserver }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: ['linkRouterTarget']
+                    }] }];
+    }, propDecorators: { iconComponents: [{
                 type: ContentChildren,
                 args: [IconComponent]
             }], contentSpan: [{

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

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-core-link.mjs","sources":["../../../../libs/core/src/lib/link/link.component.ts","../../../../libs/core/src/lib/link/link.component.html","../../../../libs/core/src/lib/link/link.module.ts","../../../../libs/core/src/lib/link/constants.ts","../../../../libs/core/src/lib/link/fundamental-ngx-core-link.ts"],"sourcesContent":["import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    ElementRef,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    QueryList,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { applyCssClass, CssClassBuilder } from '@fundamental-ngx/core/utils';\nimport { ContentObserver } from '@angular/cdk/observers';\nimport { map, startWith, Subject, takeUntil, tap } from 'rxjs';\nimport { DomPortal, Portal } from '@angular/cdk/portal';\nimport { IconComponent } from '@fundamental-ngx/core/icon';\n\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[fdLink], [fd-link]',\n    templateUrl: './link.component.html',\n    styleUrls: ['./link.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class LinkComponent implements OnChanges, OnInit, CssClassBuilder, AfterViewInit, OnDestroy {\n    @ContentChildren(IconComponent)\n    iconComponents: QueryList<IconComponent>;\n\n    @ViewChild('content')\n    contentSpan: ElementRef<HTMLSpanElement>;\n\n    /** user's custom classes */\n    @Input()\n    class: string;\n\n    /** Whether user wants to use emphasized mode */\n    @Input()\n    emphasized: boolean;\n\n    /** Whether user wants to put disabled mode */\n    @Input()\n    disabled: boolean;\n\n    /** Whether user wants to use inverted mode */\n    @Input()\n    inverted: boolean;\n\n    /** Whether user wants to use subtle mode */\n    @Input()\n    subtle: boolean;\n\n    /** Whether user wants to have a link without underline decoration */\n    @Input()\n    undecorated: boolean;\n\n    /** @hidden */\n    _prefixPortal: Portal<any> | null;\n\n    /** @hidden */\n    _postfixPortal: Portal<any> | null;\n\n    /** @hidden */\n    private _destroyed$ = new Subject<void>();\n\n    /** @hidden */\n    constructor(\n        private _elementRef: ElementRef<Element>,\n        private contentObserver: ContentObserver,\n        private changeDetectorRef: ChangeDetectorRef\n    ) {}\n\n    /** @hidden */\n    ngOnChanges(): void {\n        this.buildComponentCssClass();\n    }\n\n    @applyCssClass\n    /** CssClassBuilder interface implementation\n     * function is responsible for order which css classes are applied\n     */\n    buildComponentCssClass(): string[] {\n        return [\n            'fd-link',\n            this.emphasized ? 'fd-link--emphasized' : '',\n            this.disabled ? 'is-disabled' : '',\n            this.inverted ? `fd-link--inverted` : '',\n            this.subtle ? 'fd-link--subtle' : '',\n            this.undecorated ? 'fd-link--undecorated' : '',\n            this.class\n        ];\n    }\n\n    /** @hidden */\n    elementRef(): ElementRef<any> {\n        return this._elementRef;\n    }\n\n    /** @hidden */\n    ngOnInit(): void {\n        this.buildComponentCssClass();\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this.iconComponents.changes\n            .pipe(\n                startWith(this.iconComponents),\n                map((c) => c.toArray()),\n                map((icons) =>\n                    // We are only interested in the first descendant of the content element\n                    icons.filter(\n                        (icon) => icon.elementRef().nativeElement.parentElement === this.contentSpan.nativeElement\n                    )\n                ),\n                map((icons) => {\n                    if (icons.length === 0) {\n                        return {};\n                    }\n                    const prefix =\n                        icons[0].elementRef().nativeElement === this.contentSpan.nativeElement.childNodes[0]\n                            ? icons[0].elementRef().nativeElement\n                            : null;\n                    const postfix =\n                        icons[icons.length - 1].elementRef().nativeElement ===\n                        this.contentSpan.nativeElement.childNodes[this.contentSpan.nativeElement.childNodes.length - 1]\n                            ? icons[icons.length - 1].elementRef().nativeElement\n                            : null;\n                    return { prefix, postfix };\n                }),\n                tap(() => {\n                    if (this._prefixPortal?.isAttached) {\n                        this._prefixPortal.detach();\n                    }\n                    if (this._postfixPortal?.isAttached) {\n                        this._postfixPortal.detach();\n                    }\n                }),\n                tap(({ prefix, postfix }) => {\n                    this._prefixPortal = prefix ? new DomPortal(prefix) : null;\n                    this._postfixPortal = postfix ? new DomPortal(postfix) : null;\n                }),\n                tap(() => {\n                    this.changeDetectorRef.detectChanges();\n                }),\n                takeUntil(this._destroyed$)\n            )\n            .subscribe();\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._destroyed$.next();\n        this._destroyed$.complete();\n    }\n}\n","<span *ngIf=\"_prefixPortal\">\n    <ng-container *cdkPortalOutlet=\"_prefixPortal\"></ng-container>\n</span>\n<span class=\"fd-link__content\" #content>\n    <ng-content></ng-content>\n</span>\n<span *ngIf=\"_postfixPortal\">\n    <ng-container *cdkPortalOutlet=\"_postfixPortal\"></ng-container>\n</span>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { LinkComponent } from './link.component';\nimport { PortalModule } from '@angular/cdk/portal';\n\n@NgModule({\n    declarations: [LinkComponent],\n    imports: [CommonModule, PortalModule],\n    exports: [LinkComponent]\n})\nexport class LinkModule {}\n","export const LINK_CLASS_NAME = {\n    linkContent: 'fd-link__content'\n} as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fundamental-ngx-core-link.mjs","sources":["../../../../libs/core/src/lib/link/link.component.ts","../../../../libs/core/src/lib/link/link.component.html","../../../../libs/core/src/lib/link/link.module.ts","../../../../libs/core/src/lib/link/constants.ts","../../../../libs/core/src/lib/link/fundamental-ngx-core-link.ts"],"sourcesContent":["import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    ElementRef,\n    Inject,\n    Input,\n    isDevMode,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Optional,\n    QueryList,\n    Self,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { applyCssClass, CssClassBuilder } from '@fundamental-ngx/core/utils';\nimport { ContentObserver } from '@angular/cdk/observers';\nimport { map, startWith, Subject, takeUntil, tap } from 'rxjs';\nimport { DomPortal, Portal } from '@angular/cdk/portal';\nimport { IconComponent } from '@fundamental-ngx/core/icon';\n\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[fdLink], [fd-link], [fd-breadcrumb-link]',\n    templateUrl: './link.component.html',\n    styleUrls: ['./link.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [\n        {\n            provide: 'linkRouterTarget',\n            useFactory: (\n                withHref?: RouterLinkWithHref,\n                routerLink?: RouterLink\n            ): RouterLinkWithHref | RouterLink | undefined => withHref || routerLink,\n            deps: [\n                [new Optional(), new Self(), RouterLinkWithHref],\n                [new Optional(), new Self(), RouterLink]\n            ]\n        }\n    ]\n})\nexport class LinkComponent implements OnChanges, OnInit, CssClassBuilder, AfterViewInit, OnDestroy {\n    @ContentChildren(IconComponent)\n    iconComponents: QueryList<IconComponent>;\n\n    @ViewChild('content')\n    contentSpan: ElementRef<HTMLSpanElement>;\n\n    /** user's custom classes */\n    @Input()\n    class: string;\n\n    /** Whether user wants to use emphasized mode */\n    @Input()\n    emphasized: boolean;\n\n    /** Whether user wants to put disabled mode */\n    @Input()\n    disabled: boolean;\n\n    /** Whether user wants to use inverted mode */\n    @Input()\n    inverted: boolean;\n\n    /** Whether user wants to use subtle mode */\n    @Input()\n    subtle: boolean;\n\n    /** Whether user wants to have a link without underline decoration */\n    @Input()\n    undecorated: boolean;\n\n    /** @hidden */\n    _prefixPortal: Portal<any> | null;\n\n    /** @hidden */\n    _postfixPortal: Portal<any> | null;\n\n    /** @hidden */\n    _prefixIconName: string;\n    /** @hidden */\n    _postfixIconName: string;\n\n    /** @hidden */\n    private _destroyed$ = new Subject<void>();\n\n    /** @hidden */\n    constructor(\n        private _elementRef: ElementRef<Element>,\n        private contentObserver: ContentObserver,\n        private changeDetectorRef: ChangeDetectorRef,\n        @Inject('linkRouterTarget') readonly routerLink: RouterLinkWithHref | RouterLink\n    ) {\n        if (isDevMode() && this.elementRef().nativeElement.hasAttribute('fd-breadcrumb-link')) {\n            console.warn('The fd-breadcrumb-link attribute is deprecated. Please use fd-link instead.');\n        }\n    }\n\n    /** @hidden */\n    ngOnChanges(): void {\n        this.buildComponentCssClass();\n    }\n\n    @applyCssClass\n    /** CssClassBuilder interface implementation\n     * function is responsible for order which css classes are applied\n     */\n    buildComponentCssClass(): string[] {\n        return [\n            'fd-link',\n            this.emphasized ? 'fd-link--emphasized' : '',\n            this.disabled ? 'is-disabled' : '',\n            this.inverted ? `fd-link--inverted` : '',\n            this.subtle ? 'fd-link--subtle' : '',\n            this.undecorated ? 'fd-link--undecorated' : '',\n            this.class\n        ];\n    }\n\n    /** @hidden */\n    elementRef(): ElementRef<any> {\n        return this._elementRef;\n    }\n\n    /** @hidden */\n    ngOnInit(): void {\n        this.buildComponentCssClass();\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this.iconComponents.changes\n            .pipe(\n                startWith(this.iconComponents),\n                map((c) => c.toArray()),\n                map((icons) =>\n                    // We are only interested in the first descendant of the content element\n                    icons.filter(\n                        (icon) => icon.elementRef().nativeElement.parentElement === this.contentSpan.nativeElement\n                    )\n                ),\n                map((icons) => {\n                    if (icons.length === 0) {\n                        return {};\n                    }\n                    const prefix =\n                        icons[0].elementRef().nativeElement === this.contentSpan.nativeElement.childNodes[0]\n                            ? icons[0].elementRef().nativeElement\n                            : null;\n                    const postfix =\n                        icons[icons.length - 1].elementRef().nativeElement ===\n                        this.contentSpan.nativeElement.childNodes[this.contentSpan.nativeElement.childNodes.length - 1]\n                            ? icons[icons.length - 1].elementRef().nativeElement\n                            : null;\n                    if (prefix) {\n                        this._prefixIconName = this.iconComponents.first.glyph;\n                    } else {\n                        this._prefixIconName = '';\n                    }\n                    if (postfix) {\n                        this._postfixIconName = this.iconComponents.last.glyph;\n                    } else {\n                        this._postfixIconName = '';\n                    }\n                    return { prefix, postfix };\n                }),\n                tap(() => {\n                    if (this._prefixPortal?.isAttached) {\n                        this._prefixPortal.detach();\n                    }\n                    if (this._postfixPortal?.isAttached) {\n                        this._postfixPortal.detach();\n                    }\n                }),\n                tap(({ prefix, postfix }) => {\n                    this._prefixPortal = prefix ? new DomPortal(prefix) : null;\n                    this._postfixPortal = postfix ? new DomPortal(postfix) : null;\n                }),\n                tap(() => {\n                    this.changeDetectorRef.detectChanges();\n                }),\n                takeUntil(this._destroyed$)\n            )\n            .subscribe();\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._destroyed$.next();\n        this._destroyed$.complete();\n    }\n}\n","<span *ngIf=\"_prefixPortal\">\n    <ng-container *cdkPortalOutlet=\"_prefixPortal\"></ng-container>\n</span>\n<span class=\"fd-link__content\" #content>\n    <ng-content></ng-content>\n</span>\n<span *ngIf=\"_postfixPortal\">\n    <ng-container *cdkPortalOutlet=\"_postfixPortal\"></ng-container>\n</span>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { LinkComponent } from './link.component';\nimport { PortalModule } from '@angular/cdk/portal';\n\n@NgModule({\n    declarations: [LinkComponent],\n    imports: [CommonModule, PortalModule],\n    exports: [LinkComponent]\n})\nexport class LinkModule {}\n","export const LINK_CLASS_NAME = {\n    linkContent: 'fd-link__content'\n} as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2015/fundamental-ngx-core-multi-input.mjs

@@ -674,7 +674,7 @@ MultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             multi: true
         },
         MenuKeyboardService
-    ], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["control"], descendants: true, read: TemplateRef }, { propertyName: "listTemplate", first: true, predicate: ["list"], descendants: true, read: TemplateRef }, { propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, read: ElementRef }, { propertyName: "tokenizer", first: true, predicate: TokenizerComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"_viewModel$ | async as viewModel\">\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            <ng-container [ngTemplateOutlet]=\"control\" *ngIf=\"mobile\"></ng-container>\n\n            <fd-popover\n                additionalBodyClass=\"fd-popover-custom-list\"\n                *ngIf=\"!mobile\"\n                [isOpen]=\"open\"\n                (isOpenChange)=\"openChangeHandle($event)\"\n                (input)=\"!open && openChangeHandle(true)\"\n                [triggers]=\"[]\"\n                [maxWidth]=\"bodyMaxWidth\"\n                [focusTrapped]=\"true\"\n                [disabled]=\"disabled\"\n                [fillControlMode]=\"fillControlMode\"\n                class=\"fd-multi-input-popover-custom\"\n            >\n                <fd-popover-control>\n                    <form (submit)=\"_onSubmit()\">\n                        <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n                    </form>\n                </fd-popover-control>\n\n                <fd-popover-body\n                    [attr.aria-hidden]=\"!open\"\n                    [class.fd-popover__body--hidden]=\"!viewModel.displayedOptions.length\"\n                >\n                    <ng-container *ngTemplateOutlet=\"list\"></ng-container>\n\n                    <ng-content></ng-content>\n                </fd-popover-body>\n            </fd-popover>\n        </div>\n    </div>\n\n    <ng-template #control>\n        <fd-input-group\n            class=\"fd-multi-input-input-group-custom\"\n            [state]=\"state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"displayAddonButton\"\n            [compact]=\"compact\"\n            [disabled]=\"disabled\"\n            [isExpanded]=\"open && !mobile && viewModel.displayedOptions.length > 0\"\n            [isControl]=\"true\"\n            [glyph]=\"displayAddonButton ? glyph : ''\"\n            [iconTitle]=\"title\"\n            (addOnButtonClicked)=\"_addOnButtonClicked()\"\n        >\n            <fd-tokenizer\n                [compactCollapse]=\"compactCollapse\"\n                [compact]=\"compact\"\n                [open]=\"open\"\n                [tokenizerFocusable]=\"false\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                class=\"fd-multi-input-tokenizer-custom\"\n                [class.fd-multi-input-tokenizer-custom--compact]=\"compact\"\n                tabindex=\"-1\"\n            >\n                <fd-token\n                    *ngFor=\"let option of viewModel.selectedOptions; trackBy: valueFn\"\n                    [compact]=\"compact\"\n                    [disabled]=\"disabled\"\n                    (onCloseClick)=\"_onTokenClick(option.value, false, $event)\"\n                    (onRemove)=\"_onTokenClick(option.value, false)\"\n                >\n                    <span [innerHtml]=\"option.label\"></span>\n                </fd-token>\n\n                <input\n                    type=\"text\"\n                    class=\"fd-input fd-tokenizer__input fd-multi-input-tokenizer-input\"\n                    autocomplete=\"off\"\n                    fd-form-control\n                    fd-input-group-input\n                    fd-auto-complete\n                    (onComplete)=\"_handleComplete($event)\"\n                    #searchInputElement\n                    [displayFn]=\"displayFn\"\n                    [inputText]=\"_searchTermCtrl.value\"\n                    [options]=\"dropdownValues\"\n                    [enable]=\"autoComplete && !mobile\"\n                    [placeholder]=\"placeholder\"\n                    [formControl]=\"_searchTermCtrl\"\n                    [compact]=\"compact\"\n                    [attr.aria-required]=\"required\"\n                    [class.fd-input--compact]=\"compact\"\n                    (keydown)=\"_handleInputKeydown($event)\"\n                    [attr.id]=\"inputId\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n    </ng-template>\n\n    <ng-template #list>\n        <ul\n            *ngIf=\"viewModel.displayedOptions.length\"\n            fd-list\n            class=\"fd-multi-input-menu-overflow\"\n            [selection]=\"true\"\n            [mobileMode]=\"mobile\"\n            [compact]=\"compact\"\n            [style.maxHeight]=\"!mobile ? maxHeight : 'auto'\"\n            (focusEscapeList)=\"handleListFocusEscape($event)\"\n            [style.minWidth]=\"'100%'\"\n        >\n            <li\n                *ngFor=\"let option of viewModel.displayedOptions; index as idx; trackBy: valueFn\"\n                fd-list-item\n                (click)=\"_onCheckboxClick(option.value, $event, idx, true)\"\n                (keyup)=\"_onCheckboxKeyup(option.value, $event, idx)\"\n                [selected]=\"option.isSelected\"\n            >\n                <fd-checkbox\n                    [compact]=\"compact\"\n                    (click)=\"_onCheckboxClick(option.value, $event, idx)\"\n                    [value]=\"option.isSelected\"\n                >\n                    <!-- TODO -->\n                </fd-checkbox>\n\n                <ng-container\n                    [ngTemplateOutlet]=\"itemSource\"\n                    [ngTemplateOutletContext]=\"{ option: option }\"\n                ></ng-container>\n            </li>\n\n            <li\n                *ngIf=\"showAllButton && viewModel.displayedOptions.length < dropdownValues.length\"\n                fd-list-item\n                class=\"fd-multi-input-show-all\"\n                (keyDown)=\"_showAllKeyDown($event)\"\n                (click)=\"_showAllClicked($event)\"\n            >\n                <a fd-link tabindex=\"0\">Show All ({{ dropdownValues.length }})</a>\n            </li>\n        </ul>\n    </ng-template>\n\n    <ng-template let-option=\"option\" #itemSource>\n        <span\n            *ngIf=\"!itemTemplate\"\n            fd-list-title\n            [innerHtml]=\"option.label | highlight: _searchTermCtrl.value:highlight\"\n        ></span>\n\n        <ng-container *ngIf=\"itemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.item }\"\n            ></ng-container>\n        </ng-container>\n    </ng-template>\n</ng-container>\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}.fd-multi-input-tokenizer-custom--compact{width:calc(100% - 2rem)}.fd-multi-input-input-group-custom{max-width:100%}.fd-multi-input-custom{display:block}.fd-multi-input-item{cursor:pointer;padding:0}.fd-multi-input-popover-size{overflow:auto;display:block}.fd-multi-input-popover-custom.fd-popover-custom{max-width:100%;display:block}.fd-multi-input-popover-custom.fd-popover-custom .fd-tokenizer{height:100%}.fd-multi-input-menu-overflow{max-width:37.5rem;overflow:auto}.fd-input.fd-multi-input-tokenizer-input{margin-top:0;margin-bottom:0;padding-left:0;background-color:transparent}.fd-multi-input-show-all{width:100%;display:flex;justify-content:flex-end;background-color:transparent}.fd-multi-input-show-all .fd-link:active{color:inherit}.fd-multi-input-checkbox{width:100%;cursor:pointer}.fd-multi-input-checkbox .fd-checkbox__label{color:inherit}.fd-list--multi-input{max-width:100%}.fd-popover__body--hidden{display:none}\n"], components: [{ type: i2$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { type: i2$1.PopoverControlComponent, selector: "fd-popover-control" }, { type: i2$1.PopoverBodyComponent, selector: "fd-popover-body" }, { type: i3$1.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "compact", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby"], outputs: ["addOnButtonClicked", "search"] }, { type: i4$1.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "ariaRoleDescription", "compact", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { type: i4$1.TokenComponent, selector: "fd-token", inputs: ["disabled", "compact", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick"] }, { type: i5.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "compact", "type", "class"] }, { type: i6.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "compact", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { type: i6.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { type: i7.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "compact", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { type: i8.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i10.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i10.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class", "compact"] }, { type: i1$1.AutoCompleteDirective, selector: "[fd-auto-complete]", inputs: ["options", "inputText", "enable", "displayFn"], outputs: ["onComplete"] }, { type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }], pipes: { "async": i9.AsyncPipe, "highlight": i1$1.SearchHighlightPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["control"], descendants: true, read: TemplateRef }, { propertyName: "listTemplate", first: true, predicate: ["list"], descendants: true, read: TemplateRef }, { propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, read: ElementRef }, { propertyName: "tokenizer", first: true, predicate: TokenizerComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"_viewModel$ | async as viewModel\">\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            <ng-container [ngTemplateOutlet]=\"control\" *ngIf=\"mobile\"></ng-container>\n\n            <fd-popover\n                additionalBodyClass=\"fd-popover-custom-list\"\n                *ngIf=\"!mobile\"\n                [isOpen]=\"open\"\n                (isOpenChange)=\"openChangeHandle($event)\"\n                (input)=\"!open && openChangeHandle(true)\"\n                [triggers]=\"[]\"\n                [maxWidth]=\"bodyMaxWidth\"\n                [focusTrapped]=\"true\"\n                [disabled]=\"disabled\"\n                [fillControlMode]=\"fillControlMode\"\n                class=\"fd-multi-input-popover-custom\"\n            >\n                <fd-popover-control>\n                    <form (submit)=\"_onSubmit()\">\n                        <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n                    </form>\n                </fd-popover-control>\n\n                <fd-popover-body\n                    [attr.aria-hidden]=\"!open\"\n                    [class.fd-popover__body--hidden]=\"!viewModel.displayedOptions.length\"\n                >\n                    <ng-container *ngTemplateOutlet=\"list\"></ng-container>\n\n                    <ng-content></ng-content>\n                </fd-popover-body>\n            </fd-popover>\n        </div>\n    </div>\n\n    <ng-template #control>\n        <fd-input-group\n            class=\"fd-multi-input-input-group-custom\"\n            [state]=\"state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"displayAddonButton\"\n            [compact]=\"compact\"\n            [disabled]=\"disabled\"\n            [isExpanded]=\"open && !mobile && viewModel.displayedOptions.length > 0\"\n            [isControl]=\"true\"\n            [glyph]=\"displayAddonButton ? glyph : ''\"\n            [iconTitle]=\"title\"\n            (addOnButtonClicked)=\"_addOnButtonClicked()\"\n        >\n            <fd-tokenizer\n                [compactCollapse]=\"compactCollapse\"\n                [compact]=\"compact\"\n                [open]=\"open\"\n                [tokenizerFocusable]=\"false\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                class=\"fd-multi-input-tokenizer-custom\"\n                [class.fd-multi-input-tokenizer-custom--compact]=\"compact\"\n                tabindex=\"-1\"\n            >\n                <fd-token\n                    *ngFor=\"let option of viewModel.selectedOptions; trackBy: valueFn\"\n                    [compact]=\"compact\"\n                    [disabled]=\"disabled\"\n                    (onCloseClick)=\"_onTokenClick(option.value, false, $event)\"\n                    (onRemove)=\"_onTokenClick(option.value, false)\"\n                >\n                    <span [innerHtml]=\"option.label\"></span>\n                </fd-token>\n\n                <input\n                    type=\"text\"\n                    class=\"fd-input fd-tokenizer__input fd-multi-input-tokenizer-input\"\n                    autocomplete=\"off\"\n                    fd-form-control\n                    fd-input-group-input\n                    fd-auto-complete\n                    (onComplete)=\"_handleComplete($event)\"\n                    #searchInputElement\n                    [displayFn]=\"displayFn\"\n                    [inputText]=\"_searchTermCtrl.value\"\n                    [options]=\"dropdownValues\"\n                    [enable]=\"autoComplete && !mobile\"\n                    [placeholder]=\"placeholder\"\n                    [formControl]=\"_searchTermCtrl\"\n                    [compact]=\"compact\"\n                    [attr.aria-required]=\"required\"\n                    [class.fd-input--compact]=\"compact\"\n                    (keydown)=\"_handleInputKeydown($event)\"\n                    [attr.id]=\"inputId\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n    </ng-template>\n\n    <ng-template #list>\n        <ul\n            *ngIf=\"viewModel.displayedOptions.length\"\n            fd-list\n            class=\"fd-multi-input-menu-overflow\"\n            [selection]=\"true\"\n            [mobileMode]=\"mobile\"\n            [compact]=\"compact\"\n            [style.maxHeight]=\"!mobile ? maxHeight : 'auto'\"\n            (focusEscapeList)=\"handleListFocusEscape($event)\"\n            [style.minWidth]=\"'100%'\"\n        >\n            <li\n                *ngFor=\"let option of viewModel.displayedOptions; index as idx; trackBy: valueFn\"\n                fd-list-item\n                (click)=\"_onCheckboxClick(option.value, $event, idx, true)\"\n                (keyup)=\"_onCheckboxKeyup(option.value, $event, idx)\"\n                [selected]=\"option.isSelected\"\n            >\n                <fd-checkbox\n                    [compact]=\"compact\"\n                    (click)=\"_onCheckboxClick(option.value, $event, idx)\"\n                    [value]=\"option.isSelected\"\n                >\n                    <!-- TODO -->\n                </fd-checkbox>\n\n                <ng-container\n                    [ngTemplateOutlet]=\"itemSource\"\n                    [ngTemplateOutletContext]=\"{ option: option }\"\n                ></ng-container>\n            </li>\n\n            <li\n                *ngIf=\"showAllButton && viewModel.displayedOptions.length < dropdownValues.length\"\n                fd-list-item\n                class=\"fd-multi-input-show-all\"\n                (keyDown)=\"_showAllKeyDown($event)\"\n                (click)=\"_showAllClicked($event)\"\n            >\n                <a fd-link tabindex=\"0\">Show All ({{ dropdownValues.length }})</a>\n            </li>\n        </ul>\n    </ng-template>\n\n    <ng-template let-option=\"option\" #itemSource>\n        <span\n            *ngIf=\"!itemTemplate\"\n            fd-list-title\n            [innerHtml]=\"option.label | highlight: _searchTermCtrl.value:highlight\"\n        ></span>\n\n        <ng-container *ngIf=\"itemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.item }\"\n            ></ng-container>\n        </ng-container>\n    </ng-template>\n</ng-container>\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}.fd-multi-input-tokenizer-custom--compact{width:calc(100% - 2rem)}.fd-multi-input-input-group-custom{max-width:100%}.fd-multi-input-custom{display:block}.fd-multi-input-item{cursor:pointer;padding:0}.fd-multi-input-popover-size{overflow:auto;display:block}.fd-multi-input-popover-custom.fd-popover-custom{max-width:100%;display:block}.fd-multi-input-popover-custom.fd-popover-custom .fd-tokenizer{height:100%}.fd-multi-input-menu-overflow{max-width:37.5rem;overflow:auto}.fd-input.fd-multi-input-tokenizer-input{margin-top:0;margin-bottom:0;padding-left:0;background-color:transparent}.fd-multi-input-show-all{width:100%;display:flex;justify-content:flex-end;background-color:transparent}.fd-multi-input-show-all .fd-link:active{color:inherit}.fd-multi-input-checkbox{width:100%;cursor:pointer}.fd-multi-input-checkbox .fd-checkbox__label{color:inherit}.fd-list--multi-input{max-width:100%}.fd-popover__body--hidden{display:none}\n"], components: [{ type: i2$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { type: i2$1.PopoverControlComponent, selector: "fd-popover-control" }, { type: i2$1.PopoverBodyComponent, selector: "fd-popover-body" }, { type: i3$1.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "compact", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby"], outputs: ["addOnButtonClicked", "search"] }, { type: i4$1.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "ariaRoleDescription", "compact", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { type: i4$1.TokenComponent, selector: "fd-token", inputs: ["disabled", "compact", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick"] }, { type: i5.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "compact", "type", "class"] }, { type: i6.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "compact", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { type: i6.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { type: i7.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "compact", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { type: i8.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i10.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i10.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class", "compact"] }, { type: i1$1.AutoCompleteDirective, selector: "[fd-auto-complete]", inputs: ["options", "inputText", "enable", "displayFn"], outputs: ["onComplete"] }, { type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }], pipes: { "async": i9.AsyncPipe, "highlight": i1$1.SearchHighlightPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),

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

@@ -432,6 +432,7 @@ class PopoverService extends BasePopoverClass {
             this._listenOnOutClicks();
             this._focusFirstTabbableElement();
             this._onLoad.next(this._getPopoverBody()._elementRef);
+            this._overlayRef.updatePosition();
         }
     }
     /** method updating template or text inside rendered PopoverBody */