@fundamental-ngx/core 0.34.3-rc.13 → 0.34.3-rc.14

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

@@ -23,6 +23,7 @@ class LinkComponent {
             this.disabled ? 'is-disabled' : '',
             this.inverted ? `fd-link--inverted` : '',
             this.subtle ? 'fd-link--subtle' : '',
+            this.undecorated ? 'fd-link--undecorated' : '',
             this.class
         ];
     }
@@ -36,7 +37,7 @@ class LinkComponent {
     }
 }
 LinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: LinkComponent, deps: [{ token: i0.ElementRef }], 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" }, usesOnChanges: true, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: ["/*!\n * Fundamental Library Styles v0.24.0-rc.8\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);-webkit-text-decoration:var(--fdLink_Text_Decoration);text-decoration:var(--fdLink_Text_Decoration);text-shadow:var(--sapContent_TextShadow);display:inline-block;transition:all 125ms ease-in;line-height:inherit}.fd-link:after,.fd-link:before{box-sizing:inherit;font-size:inherit}.fd-link--emphasized{font-weight:700}.fd-link:visited{color:var(--sapLink_Visited_Color)}.fd-link.is-hover,.fd-link:hover{color:var(--sapLink_Hover_Color);-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite)}.fd-link.is-focus,.fd-link:focus{z-index:5;box-shadow:none;outline-offset:-.0625rem;outline-width:var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle);-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite)}.fd-link.is-active,.fd-link:active{color:var(--sapLink_Active_Color);-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite)}.fd-link--inverted{color:var(--sapLink_InvertedColor);text-shadow:none}.fd-link--inverted.is-hover,.fd-link--inverted:hover{color:var(--sapLink_InvertedColor)}.fd-link--inverted.is-focus,.fd-link--inverted:focus{z-index:5;outline-color:var(--sapContent_ContrastFocusColor)}.fd-link--subtle{color:var(--sapLink_SubtleColor)}.fd-link.is-disabled,.fd-link:disabled,.fd-link[aria-disabled=true]{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:inherit;background:inherit;font-size:inherit;border-radius:inherit;line-height:1;-webkit-text-decoration:var(--fdLink_Text_Decoration);text-decoration:var(--fdLink_Text_Decoration)}.fd-link.is-hover [class*=sap-icon],.fd-link.is-hover[class*=sap-icon],.fd-link:hover [class*=sap-icon],.fd-link:hover[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite);color:var(--sapLink_Hover_Color)}.fd-link.is-focus,.fd-link:focus{z-index:5}.fd-link.is-focus [class*=sap-icon],.fd-link.is-focus[class*=sap-icon],.fd-link:focus [class*=sap-icon],.fd-link:focus[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite);color:var(--sapLinkColor)}.fd-link.is-active [class*=sap-icon],.fd-link.is-active[class*=sap-icon],.fd-link:active [class*=sap-icon],.fd-link:active[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite);color:var(--sapLink_Active_Color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+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" }, usesOnChanges: true, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: ["/*!\n * Fundamental Library Styles v0.24.0-rc.8\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);-webkit-text-decoration:var(--fdLink_Text_Decoration);text-decoration:var(--fdLink_Text_Decoration);text-shadow:var(--sapContent_TextShadow);display:inline-block;transition:all 125ms ease-in;line-height:inherit}.fd-link:after,.fd-link:before{box-sizing:inherit;font-size:inherit}.fd-link--emphasized{font-weight:700}.fd-link:visited{color:var(--sapLink_Visited_Color)}.fd-link.is-hover,.fd-link:hover{color:var(--sapLink_Hover_Color);-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite)}.fd-link.is-focus,.fd-link:focus{z-index:5;box-shadow:none;outline-offset:-.0625rem;outline-width:var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle);-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite)}.fd-link.is-active,.fd-link:active{color:var(--sapLink_Active_Color);-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite)}.fd-link--inverted{color:var(--sapLink_InvertedColor);text-shadow:none}.fd-link--inverted.is-hover,.fd-link--inverted:hover{color:var(--sapLink_InvertedColor)}.fd-link--inverted.is-focus,.fd-link--inverted:focus{z-index:5;outline-color:var(--sapContent_ContrastFocusColor)}.fd-link--subtle{color:var(--sapLink_SubtleColor)}.fd-link.is-disabled,.fd-link:disabled,.fd-link[aria-disabled=true]{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:inherit;background:inherit;font-size:inherit;border-radius:inherit;line-height:1;-webkit-text-decoration:var(--fdLink_Text_Decoration);text-decoration:var(--fdLink_Text_Decoration)}.fd-link.is-hover [class*=sap-icon],.fd-link.is-hover[class*=sap-icon],.fd-link:hover [class*=sap-icon],.fd-link:hover[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite);color:var(--sapLink_Hover_Color)}.fd-link.is-focus,.fd-link:focus{z-index:5}.fd-link.is-focus [class*=sap-icon],.fd-link.is-focus[class*=sap-icon],.fd-link:focus [class*=sap-icon],.fd-link:focus[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite);color:var(--sapLinkColor)}.fd-link.is-active [class*=sap-icon],.fd-link.is-active[class*=sap-icon],.fd-link:active [class*=sap-icon],.fd-link:active[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite);color:var(--sapLink_Active_Color)}.fd-link--undecorated:hover,.fd-link--undecorated:hover [class*=sap-icon],.fd-link--undecorated:hover[class*=sap-icon]{text-decoration:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),
@@ -45,7 +46,7 @@ __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]', template: ` <ng-content></ng-content> `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["/*!\n * Fundamental Library Styles v0.24.0-rc.8\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);-webkit-text-decoration:var(--fdLink_Text_Decoration);text-decoration:var(--fdLink_Text_Decoration);text-shadow:var(--sapContent_TextShadow);display:inline-block;transition:all 125ms ease-in;line-height:inherit}.fd-link:after,.fd-link:before{box-sizing:inherit;font-size:inherit}.fd-link--emphasized{font-weight:700}.fd-link:visited{color:var(--sapLink_Visited_Color)}.fd-link.is-hover,.fd-link:hover{color:var(--sapLink_Hover_Color);-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite)}.fd-link.is-focus,.fd-link:focus{z-index:5;box-shadow:none;outline-offset:-.0625rem;outline-width:var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle);-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite)}.fd-link.is-active,.fd-link:active{color:var(--sapLink_Active_Color);-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite)}.fd-link--inverted{color:var(--sapLink_InvertedColor);text-shadow:none}.fd-link--inverted.is-hover,.fd-link--inverted:hover{color:var(--sapLink_InvertedColor)}.fd-link--inverted.is-focus,.fd-link--inverted:focus{z-index:5;outline-color:var(--sapContent_ContrastFocusColor)}.fd-link--subtle{color:var(--sapLink_SubtleColor)}.fd-link.is-disabled,.fd-link:disabled,.fd-link[aria-disabled=true]{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:inherit;background:inherit;font-size:inherit;border-radius:inherit;line-height:1;-webkit-text-decoration:var(--fdLink_Text_Decoration);text-decoration:var(--fdLink_Text_Decoration)}.fd-link.is-hover [class*=sap-icon],.fd-link.is-hover[class*=sap-icon],.fd-link:hover [class*=sap-icon],.fd-link:hover[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite);color:var(--sapLink_Hover_Color)}.fd-link.is-focus,.fd-link:focus{z-index:5}.fd-link.is-focus [class*=sap-icon],.fd-link.is-focus[class*=sap-icon],.fd-link:focus [class*=sap-icon],.fd-link:focus[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite);color:var(--sapLinkColor)}.fd-link.is-active [class*=sap-icon],.fd-link.is-active[class*=sap-icon],.fd-link:active [class*=sap-icon],.fd-link:active[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite);color:var(--sapLink_Active_Color)}\n"] }]
+            args: [{ selector: '[fdLink], [fd-link]', template: ` <ng-content></ng-content> `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["/*!\n * Fundamental Library Styles v0.24.0-rc.8\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);-webkit-text-decoration:var(--fdLink_Text_Decoration);text-decoration:var(--fdLink_Text_Decoration);text-shadow:var(--sapContent_TextShadow);display:inline-block;transition:all 125ms ease-in;line-height:inherit}.fd-link:after,.fd-link:before{box-sizing:inherit;font-size:inherit}.fd-link--emphasized{font-weight:700}.fd-link:visited{color:var(--sapLink_Visited_Color)}.fd-link.is-hover,.fd-link:hover{color:var(--sapLink_Hover_Color);-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite)}.fd-link.is-focus,.fd-link:focus{z-index:5;box-shadow:none;outline-offset:-.0625rem;outline-width:var(--sapContent_FocusWidth);outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle);-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite)}.fd-link.is-active,.fd-link:active{color:var(--sapLink_Active_Color);-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite)}.fd-link--inverted{color:var(--sapLink_InvertedColor);text-shadow:none}.fd-link--inverted.is-hover,.fd-link--inverted:hover{color:var(--sapLink_InvertedColor)}.fd-link--inverted.is-focus,.fd-link--inverted:focus{z-index:5;outline-color:var(--sapContent_ContrastFocusColor)}.fd-link--subtle{color:var(--sapLink_SubtleColor)}.fd-link.is-disabled,.fd-link:disabled,.fd-link[aria-disabled=true]{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:inherit;background:inherit;font-size:inherit;border-radius:inherit;line-height:1;-webkit-text-decoration:var(--fdLink_Text_Decoration);text-decoration:var(--fdLink_Text_Decoration)}.fd-link.is-hover [class*=sap-icon],.fd-link.is-hover[class*=sap-icon],.fd-link:hover [class*=sap-icon],.fd-link:hover[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite);color:var(--sapLink_Hover_Color)}.fd-link.is-focus,.fd-link:focus{z-index:5}.fd-link.is-focus [class*=sap-icon],.fd-link.is-focus[class*=sap-icon],.fd-link:focus [class*=sap-icon],.fd-link:focus[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite);color:var(--sapLinkColor)}.fd-link.is-active [class*=sap-icon],.fd-link.is-active[class*=sap-icon],.fd-link:active [class*=sap-icon],.fd-link:active[class*=sap-icon]{-webkit-text-decoration:var(--fdLink_Text_Decoration_Opposite);text-decoration:var(--fdLink_Text_Decoration_Opposite);color:var(--sapLink_Active_Color)}.fd-link--undecorated:hover,.fd-link--undecorated:hover [class*=sap-icon],.fd-link--undecorated:hover[class*=sap-icon]{text-decoration:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { class: [{
                 type: Input
             }], emphasized: [{
@@ -56,6 +57,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                 type: Input
             }], subtle: [{
                 type: Input
+            }], undecorated: [{
+                type: Input
             }], 
         /** CssClassBuilder interface implementation
          * function is responsible for order which css classes are applied

package/link/fesm2020/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.module.ts","../../../../../libs/core/src/lib/link/fundamental-ngx-core-link.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    Input,\n    OnChanges,\n    ViewEncapsulation,\n    OnInit\n} from '@angular/core';\nimport { applyCssClass } from '@fundamental-ngx/core/utils';\nimport { CssClassBuilder } from '@fundamental-ngx/core/utils';\n\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[fdLink], [fd-link]',\n    template: ` <ng-content></ng-content> `,\n    styleUrls: ['./link.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class LinkComponent implements OnChanges, OnInit, CssClassBuilder {\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    /** @hidden */\n    constructor(private _elementRef: ElementRef) {}\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.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","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { LinkComponent } from './link.component';\n\n@NgModule({\n    declarations: [LinkComponent],\n    imports: [CommonModule],\n    exports: [LinkComponent]\n})\nexport class LinkModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;MAoBa,aAAa;;IAsBtB,YAAoB,WAAuB;QAAvB,gBAAW,GAAX,WAAW,CAAY;KAAI;;IAG/C,WAAW;QACP,IAAI,CAAC,sBAAsB,EAAE,CAAC;KACjC;;;;IAMD,sBAAsB;QAClB,OAAO;YACH,SAAS;YACT,IAAI,CAAC,UAAU,GAAG,qBAAqB,GAAG,EAAE;YAC5C,IAAI,CAAC,QAAQ,GAAG,aAAa,GAAG,EAAE;YAClC,IAAI,CAAC,QAAQ,GAAG,mBAAmB,GAAG,EAAE;YACxC,IAAI,CAAC,MAAM,GAAG,iBAAiB,GAAG,EAAE;YACpC,IAAI,CAAC,KAAK;SACb,CAAC;KACL;;IAGD,UAAU;QACN,OAAO,IAAI,CAAC,WAAW,CAAC;KAC3B;;IAGD,QAAQ;QACJ,IAAI,CAAC,sBAAsB,EAAE,CAAC;KACjC;;0GApDQ,aAAa;8FAAb,aAAa,oMALZ,6BAA6B;AAsCvC;IAJC,aAAa;;;;2DAab;2FA1CQ,aAAa;kBARzB,SAAS;+BAEI,qBAAqB,YACrB,6BAA6B,iBAExB,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM;iGAK/C,KAAK;sBADJ,KAAK;gBAKN,UAAU;sBADT,KAAK;gBAKN,QAAQ;sBADP,KAAK;gBAKN,QAAQ;sBADP,KAAK;gBAKN,MAAM;sBADL,KAAK;;;;;QAeN,sBAAsB;;MC3Cb,UAAU;;uGAAV,UAAU;wGAAV,UAAU,iBAJJ,aAAa,aAClB,YAAY,aACZ,aAAa;wGAEd,UAAU,YAHV,CAAC,YAAY,CAAC;2FAGd,UAAU;kBALtB,QAAQ;mBAAC;oBACN,YAAY,EAAE,CAAC,aAAa,CAAC;oBAC7B,OAAO,EAAE,CAAC,YAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,aAAa,CAAC;iBAC3B;;;ACTD;;;;;;"}
+{"version":3,"file":"fundamental-ngx-core-link.mjs","sources":["../../../../../libs/core/src/lib/link/link.component.ts","../../../../../libs/core/src/lib/link/link.module.ts","../../../../../libs/core/src/lib/link/fundamental-ngx-core-link.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    Input,\n    OnChanges,\n    ViewEncapsulation,\n    OnInit\n} from '@angular/core';\nimport { applyCssClass } from '@fundamental-ngx/core/utils';\nimport { CssClassBuilder } from '@fundamental-ngx/core/utils';\n\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[fdLink], [fd-link]',\n    template: ` <ng-content></ng-content> `,\n    styleUrls: ['./link.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class LinkComponent implements OnChanges, OnInit, CssClassBuilder {\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    constructor(private _elementRef: ElementRef) {}\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","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { LinkComponent } from './link.component';\n\n@NgModule({\n    declarations: [LinkComponent],\n    imports: [CommonModule],\n    exports: [LinkComponent]\n})\nexport class LinkModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;MAoBa,aAAa;;IA0BtB,YAAoB,WAAuB;QAAvB,gBAAW,GAAX,WAAW,CAAY;KAAI;;IAG/C,WAAW;QACP,IAAI,CAAC,sBAAsB,EAAE,CAAC;KACjC;;;;IAMD,sBAAsB;QAClB,OAAO;YACH,SAAS;YACT,IAAI,CAAC,UAAU,GAAG,qBAAqB,GAAG,EAAE;YAC5C,IAAI,CAAC,QAAQ,GAAG,aAAa,GAAG,EAAE;YAClC,IAAI,CAAC,QAAQ,GAAG,mBAAmB,GAAG,EAAE;YACxC,IAAI,CAAC,MAAM,GAAG,iBAAiB,GAAG,EAAE;YACpC,IAAI,CAAC,WAAW,GAAG,sBAAsB,GAAG,EAAE;YAC9C,IAAI,CAAC,KAAK;SACb,CAAC;KACL;;IAGD,UAAU;QACN,OAAO,IAAI,CAAC,WAAW,CAAC;KAC3B;;IAGD,QAAQ;QACJ,IAAI,CAAC,sBAAsB,EAAE,CAAC;KACjC;;0GAzDQ,aAAa;8FAAb,aAAa,gOALZ,6BAA6B;AA0CvC;IAJC,aAAa;;;;2DAcb;2FA/CQ,aAAa;kBARzB,SAAS;+BAEI,qBAAqB,YACrB,6BAA6B,iBAExB,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM;iGAK/C,KAAK;sBADJ,KAAK;gBAKN,UAAU;sBADT,KAAK;gBAKN,QAAQ;sBADP,KAAK;gBAKN,QAAQ;sBADP,KAAK;gBAKN,MAAM;sBADL,KAAK;gBAKN,WAAW;sBADV,KAAK;;;;;QAeN,sBAAsB;;MC/Cb,UAAU;;uGAAV,UAAU;wGAAV,UAAU,iBAJJ,aAAa,aAClB,YAAY,aACZ,aAAa;wGAEd,UAAU,YAHV,CAAC,YAAY,CAAC;2FAGd,UAAU;kBALtB,QAAQ;mBAAC;oBACN,YAAY,EAAE,CAAC,aAAa,CAAC;oBAC7B,OAAO,EAAE,CAAC,YAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,aAAa,CAAC;iBAC3B;;;ACTD;;;;;;"}

package/link/link.component.d.ts

@@ -13,6 +13,8 @@ export declare class LinkComponent implements OnChanges, OnInit, CssClassBuilder
     inverted: boolean;
     /** Whether user wants to use subtle mode */
     subtle: boolean;
+    /** Whether user wants to have a link without underline decoration */
+    undecorated: boolean;
     /** @hidden */
     constructor(_elementRef: ElementRef);
     /** @hidden */
@@ -26,5 +28,5 @@ export declare class LinkComponent implements OnChanges, OnInit, CssClassBuilder
     /** @hidden */
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LinkComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LinkComponent, "[fdLink], [fd-link]", never, { "class": "class"; "emphasized": "emphasized"; "disabled": "disabled"; "inverted": "inverted"; "subtle": "subtle"; }, {}, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LinkComponent, "[fdLink], [fd-link]", never, { "class": "class"; "emphasized": "emphasized"; "disabled": "disabled"; "inverted": "inverted"; "subtle": "subtle"; "undecorated": "undecorated"; }, {}, never, ["*"]>;
 }

package/link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/link",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/list",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/menu/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/menu",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/message-box/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/message-box",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/message-strip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/message-strip",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/message-toast/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/message-toast",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/micro-process-flow/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/micro-process-flow",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/mobile-mode/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/mobile-mode",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/multi-input/esm2020/multi-input.component.mjs

@@ -560,7 +560,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 vm\">\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            <ng-container [ngTemplateOutlet]=\"control\" *ngIf=\"mobile && !open\"></ng-container>\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                <fd-popover-body\n                    [attr.aria-hidden]=\"!open\"\n                    [class.fd-popover__body--hidden]=\"!vm.displayedOptions.length\"\n                >\n                    <ng-container *ngTemplateOutlet=\"list\"></ng-container>\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 && vm.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 vm.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                <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=\"vm.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 vm.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                <ng-container\n                    [ngTemplateOutlet]=\"itemSource\"\n                    [ngTemplateOutletContext]=\"{ option: option }\"\n                ></ng-container>\n            </li>\n            <li\n                *ngIf=\"showAllButton && vm.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        >\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.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { type: i2.PopoverControlComponent, selector: "fd-popover-control" }, { type: i2.PopoverBodyComponent, selector: "fd-popover-body" }, { type: i3.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.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "ariaRoleDescription", "compact", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { type: i4.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", "tabindex", "noData", "action", "interactive", "growing", "counter", "unread"], 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"] }], 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.InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class", "compact"] }, { type: i1.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.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 vm\">\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            <ng-container [ngTemplateOutlet]=\"control\" *ngIf=\"mobile && !open\"></ng-container>\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                <fd-popover-body\n                    [attr.aria-hidden]=\"!open\"\n                    [class.fd-popover__body--hidden]=\"!vm.displayedOptions.length\"\n                >\n                    <ng-container *ngTemplateOutlet=\"list\"></ng-container>\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 && vm.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 vm.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                <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=\"vm.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 vm.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                <ng-container\n                    [ngTemplateOutlet]=\"itemSource\"\n                    [ngTemplateOutletContext]=\"{ option: option }\"\n                ></ng-container>\n            </li>\n            <li\n                *ngIf=\"showAllButton && vm.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        >\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.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { type: i2.PopoverControlComponent, selector: "fd-popover-control" }, { type: i2.PopoverBodyComponent, selector: "fd-popover-body" }, { type: i3.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.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "ariaRoleDescription", "compact", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { type: i4.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", "tabindex", "noData", "action", "interactive", "growing", "counter", "unread"], 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.InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class", "compact"] }, { type: i1.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.SearchHighlightPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),

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

@@ -676,7 +676,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 vm\">\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            <ng-container [ngTemplateOutlet]=\"control\" *ngIf=\"mobile && !open\"></ng-container>\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                <fd-popover-body\n                    [attr.aria-hidden]=\"!open\"\n                    [class.fd-popover__body--hidden]=\"!vm.displayedOptions.length\"\n                >\n                    <ng-container *ngTemplateOutlet=\"list\"></ng-container>\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 && vm.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 vm.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                <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=\"vm.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 vm.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                <ng-container\n                    [ngTemplateOutlet]=\"itemSource\"\n                    [ngTemplateOutletContext]=\"{ option: option }\"\n                ></ng-container>\n            </li>\n            <li\n                *ngIf=\"showAllButton && vm.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        >\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", "tabindex", "noData", "action", "interactive", "growing", "counter", "unread"], 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"] }], 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 vm\">\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            <ng-container [ngTemplateOutlet]=\"control\" *ngIf=\"mobile && !open\"></ng-container>\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                <fd-popover-body\n                    [attr.aria-hidden]=\"!open\"\n                    [class.fd-popover__body--hidden]=\"!vm.displayedOptions.length\"\n                >\n                    <ng-container *ngTemplateOutlet=\"list\"></ng-container>\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 && vm.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 vm.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                <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=\"vm.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 vm.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                <ng-container\n                    [ngTemplateOutlet]=\"itemSource\"\n                    [ngTemplateOutletContext]=\"{ option: option }\"\n                ></ng-container>\n            </li>\n            <li\n                *ngIf=\"showAllButton && vm.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        >\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", "tabindex", "noData", "action", "interactive", "growing", "counter", "unread"], 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 });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),

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

@@ -672,7 +672,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 vm\">\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            <ng-container [ngTemplateOutlet]=\"control\" *ngIf=\"mobile && !open\"></ng-container>\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                <fd-popover-body\n                    [attr.aria-hidden]=\"!open\"\n                    [class.fd-popover__body--hidden]=\"!vm.displayedOptions.length\"\n                >\n                    <ng-container *ngTemplateOutlet=\"list\"></ng-container>\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 && vm.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 vm.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                <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=\"vm.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 vm.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                <ng-container\n                    [ngTemplateOutlet]=\"itemSource\"\n                    [ngTemplateOutletContext]=\"{ option: option }\"\n                ></ng-container>\n            </li>\n            <li\n                *ngIf=\"showAllButton && vm.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        >\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", "tabindex", "noData", "action", "interactive", "growing", "counter", "unread"], 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"] }], 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 vm\">\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            <ng-container [ngTemplateOutlet]=\"control\" *ngIf=\"mobile && !open\"></ng-container>\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                <fd-popover-body\n                    [attr.aria-hidden]=\"!open\"\n                    [class.fd-popover__body--hidden]=\"!vm.displayedOptions.length\"\n                >\n                    <ng-container *ngTemplateOutlet=\"list\"></ng-container>\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 && vm.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 vm.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                <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=\"vm.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 vm.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                <ng-container\n                    [ngTemplateOutlet]=\"itemSource\"\n                    [ngTemplateOutletContext]=\"{ option: option }\"\n                ></ng-container>\n            </li>\n            <li\n                *ngIf=\"showAllButton && vm.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        >\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", "tabindex", "noData", "action", "interactive", "growing", "counter", "unread"], 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 });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),

package/multi-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/multi-input",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/nested-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/nested-list",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/notification/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/notification",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/object-identifier/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/object-identifier",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/object-marker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/object-marker",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/object-number/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/object-number",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/object-status/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/object-status",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "schematics": "./schematics/collection.json",
   "description": "Fundamental Library for Angular - core",
   "license": "Apache-2.0",

package/pagination/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/pagination",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/panel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/panel",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/popover/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/popover",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/product-switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/product-switch",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/progress-indicator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/progress-indicator",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "~12.0.5",
     "@angular/core": "~12.0.5"

package/quick-view/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/quick-view",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/radio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/radio",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/rating-indicator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/rating-indicator",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/resizable-card-layout/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/resizable-card-layout",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/scroll-spy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/scroll-spy",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/scrollbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/scrollbar",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/segmented-button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/segmented-button",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"

package/select/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-ngx/core/select",
-  "version": "0.34.3-rc.13",
+  "version": "0.34.3-rc.14",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0"