igniteui-angular 14.2.26 → 14.2.28

package/fesm2020/igniteui-angular.mjs

@@ -14521,10 +14521,10 @@ class IgxInputGroupComponent extends DisplayDensityBase {
     }
 }
 IgxInputGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxInputGroupComponent, deps: [{ token: i0.ElementRef }, { token: DisplayDensityToken, optional: true }, { token: IGX_INPUT_GROUP_TYPE, optional: true }, { token: DOCUMENT }, { token: PlatformUtil }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-IgxInputGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: { resourceStrings: "resourceStrings", suppressInputAutofocus: "suppressInputAutofocus", type: "type", theme: "theme" }, host: { listeners: { "click": "onClick($event)", "pointerdown": "onPointerDown($event)" }, properties: { "class.igx-input-group": "this.defaultClass", "class.igx-input-group--placeholder": "this.hasPlaceholder", "class.igx-input-group--required": "this.isRequired", "class.igx-input-group--focused": "this.isFocused", "class.igx-input-group--disabled": "this.disabled", "class.igx-input-group--warning": "this.hasWarning", "class.igx-input-group--valid": "this.validClass", "class.igx-input-group--invalid": "this.invalidClass", "class.igx-input-group--filled": "this.isFilled", "class.igx-input-group--cosy": "this.isDisplayDensityCosy", "class.igx-input-group--comfortable": "this.isDisplayDensityComfortable", "class.igx-input-group--compact": "this.isDisplayDensityCompact", "class.igx-input-group--box": "this.isTypeBox", "class.igx-input-group--file": "this.isFileType", "class.igx-input-group--border": "this.isTypeBorder", "class.igx-input-group--fluent": "this.isTypeFluent", "class.igx-input-group--bootstrap": "this.isTypeBootstrap", "class.igx-input-group--indigo": "this.isTypeIndigo", "class.igx-input-group--search": "this.isTypeSearch" } }, providers: [{ provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent }], queries: [{ propertyName: "input", first: true, predicate: IgxInputDirective, descendants: true, read: IgxInputDirective, static: true }, { propertyName: "hints", predicate: IgxHintDirective, read: IgxHintDirective }], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-input-group__wrapper\" *ngIf=\"isTypeBox; else bundle\">\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n</div>\n\n<div class=\"igx-input-group__border\" *ngIf=\"hasBorder\"></div>\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    <igx-prefix *ngIf=\"isFileType\" class=\"igx-prefix--upload\">\n        <button\n            igxButton=\"raised\"\n            (click)=\"uploadButtonHandler()\"\n            [displayDensity]=\"displayDensity\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"{ 'igx-input-group__upload-button': isTypeLine }\"\n        >\n            {{ resourceStrings.igx_input_upload_button }}\n        </button>\n    </igx-prefix>\n</ng-template>\n\n<ng-template #files>\n    <div\n        *ngIf=\"isFileType\"\n        class=\"igx-input-group__file-input\"\n        [title]=\"fileNames\"\n    >\n        <span>{{ fileNames }}</span>\n    </div>\n</ng-template>\n\n<ng-template #clear>\n    <igx-suffix\n        class=\"igx-input-group__clear-icon\"\n        *ngIf=\"isFileType && isFilled\"\n        (click)=\"clearValueHandler()\"\n        (keydown.Enter)=\"clearValueHandler()\"\n        title=\"clear files\"\n        tabindex=\"0\"\n    >\n        <igx-icon>{{ resourceStrings.igx_input_clear_button }}</igx-icon>\n    </igx-suffix>\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    <ng-container [ngSwitch]=\"theme\">\n        <ng-container *ngSwitchCase=\"'bootstrap'\">\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'fluent'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'indigo-design'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] });
+IgxInputGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: { resourceStrings: "resourceStrings", suppressInputAutofocus: "suppressInputAutofocus", type: "type", theme: "theme" }, host: { listeners: { "click": "onClick($event)", "pointerdown": "onPointerDown($event)" }, properties: { "class.igx-input-group": "this.defaultClass", "class.igx-input-group--placeholder": "this.hasPlaceholder", "class.igx-input-group--required": "this.isRequired", "class.igx-input-group--focused": "this.isFocused", "class.igx-input-group--disabled": "this.disabled", "class.igx-input-group--warning": "this.hasWarning", "class.igx-input-group--valid": "this.validClass", "class.igx-input-group--invalid": "this.invalidClass", "class.igx-input-group--filled": "this.isFilled", "class.igx-input-group--cosy": "this.isDisplayDensityCosy", "class.igx-input-group--comfortable": "this.isDisplayDensityComfortable", "class.igx-input-group--compact": "this.isDisplayDensityCompact", "class.igx-input-group--box": "this.isTypeBox", "class.igx-input-group--file": "this.isFileType", "class.igx-input-group--border": "this.isTypeBorder", "class.igx-input-group--fluent": "this.isTypeFluent", "class.igx-input-group--bootstrap": "this.isTypeBootstrap", "class.igx-input-group--indigo": "this.isTypeIndigo", "class.igx-input-group--search": "this.isTypeSearch" } }, providers: [{ provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent }], queries: [{ propertyName: "input", first: true, predicate: IgxInputDirective, descendants: true, read: IgxInputDirective, static: true }, { propertyName: "hints", predicate: IgxHintDirective, read: IgxHintDirective }], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-input-group__wrapper\" *ngIf=\"isTypeBox; else bundle\">\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n</div>\n\n<div class=\"igx-input-group__border\" *ngIf=\"hasBorder\"></div>\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    <igx-prefix *ngIf=\"isFileType\" class=\"igx-prefix--upload\">\n        <button\n            igxButton=\"raised\"\n            type=\"button\"\n            (click)=\"uploadButtonHandler()\"\n            [displayDensity]=\"displayDensity\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"{ 'igx-input-group__upload-button': isTypeLine }\"\n        >\n            {{ resourceStrings.igx_input_upload_button }}\n        </button>\n    </igx-prefix>\n</ng-template>\n\n<ng-template #files>\n    <div\n        *ngIf=\"isFileType\"\n        class=\"igx-input-group__file-input\"\n        [title]=\"fileNames\"\n    >\n        <span>{{ fileNames }}</span>\n    </div>\n</ng-template>\n\n<ng-template #clear>\n    <igx-suffix\n        class=\"igx-input-group__clear-icon\"\n        *ngIf=\"isFileType && isFilled\"\n        (click)=\"clearValueHandler()\"\n        (keydown.Enter)=\"clearValueHandler()\"\n        title=\"clear files\"\n        tabindex=\"0\"\n    >\n        <igx-icon>{{ resourceStrings.igx_input_clear_button }}</igx-icon>\n    </igx-suffix>\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    <ng-container [ngSwitch]=\"theme\">\n        <ng-container *ngSwitchCase=\"'bootstrap'\">\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'fluent'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'indigo-design'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxInputGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-input-group', providers: [{ provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent }], template: "<div class=\"igx-input-group__wrapper\" *ngIf=\"isTypeBox; else bundle\">\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n</div>\n\n<div class=\"igx-input-group__border\" *ngIf=\"hasBorder\"></div>\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    <igx-prefix *ngIf=\"isFileType\" class=\"igx-prefix--upload\">\n        <button\n            igxButton=\"raised\"\n            (click)=\"uploadButtonHandler()\"\n            [displayDensity]=\"displayDensity\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"{ 'igx-input-group__upload-button': isTypeLine }\"\n        >\n            {{ resourceStrings.igx_input_upload_button }}\n        </button>\n    </igx-prefix>\n</ng-template>\n\n<ng-template #files>\n    <div\n        *ngIf=\"isFileType\"\n        class=\"igx-input-group__file-input\"\n        [title]=\"fileNames\"\n    >\n        <span>{{ fileNames }}</span>\n    </div>\n</ng-template>\n\n<ng-template #clear>\n    <igx-suffix\n        class=\"igx-input-group__clear-icon\"\n        *ngIf=\"isFileType && isFilled\"\n        (click)=\"clearValueHandler()\"\n        (keydown.Enter)=\"clearValueHandler()\"\n        title=\"clear files\"\n        tabindex=\"0\"\n    >\n        <igx-icon>{{ resourceStrings.igx_input_clear_button }}</igx-icon>\n    </igx-suffix>\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    <ng-container [ngSwitch]=\"theme\">\n        <ng-container *ngSwitchCase=\"'bootstrap'\">\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'fluent'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'indigo-design'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n" }]
+            args: [{ selector: 'igx-input-group', providers: [{ provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent }], template: "<div class=\"igx-input-group__wrapper\" *ngIf=\"isTypeBox; else bundle\">\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n</div>\n\n<div class=\"igx-input-group__border\" *ngIf=\"hasBorder\"></div>\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    <igx-prefix *ngIf=\"isFileType\" class=\"igx-prefix--upload\">\n        <button\n            igxButton=\"raised\"\n            type=\"button\"\n            (click)=\"uploadButtonHandler()\"\n            [displayDensity]=\"displayDensity\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"{ 'igx-input-group__upload-button': isTypeLine }\"\n        >\n            {{ resourceStrings.igx_input_upload_button }}\n        </button>\n    </igx-prefix>\n</ng-template>\n\n<ng-template #files>\n    <div\n        *ngIf=\"isFileType\"\n        class=\"igx-input-group__file-input\"\n        [title]=\"fileNames\"\n    >\n        <span>{{ fileNames }}</span>\n    </div>\n</ng-template>\n\n<ng-template #clear>\n    <igx-suffix\n        class=\"igx-input-group__clear-icon\"\n        *ngIf=\"isFileType && isFilled\"\n        (click)=\"clearValueHandler()\"\n        (keydown.Enter)=\"clearValueHandler()\"\n        title=\"clear files\"\n        tabindex=\"0\"\n    >\n        <igx-icon>{{ resourceStrings.igx_input_clear_button }}</igx-icon>\n    </igx-suffix>\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    <ng-container [ngSwitch]=\"theme\">\n        <ng-container *ngSwitchCase=\"'bootstrap'\">\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'fluent'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'indigo-design'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -35028,6 +35028,11 @@ class IgxChipComponent extends DisplayDensityBase {
          * @internal
          */
         this.hideBaseElement = false;
+        /**
+         * @hidden
+         * @internal
+         */
+        this.destroy$ = new Subject();
         this._tabIndex = null;
         this._selected = false;
         this._selectedItemClass = 'igx-chip__item--selected';
@@ -35420,6 +35425,10 @@ class IgxChipComponent extends DisplayDensityBase {
             }
         }
     }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
 }
 IgxChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxChipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DisplayDensityToken, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 IgxChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: IgxChipComponent, selector: "igx-chip", inputs: { id: "id", tabIndex: "tabIndex", data: "data", draggable: "draggable", animateOnRelease: "animateOnRelease", hideBaseOnDrag: "hideBaseOnDrag", removable: "removable", removeIcon: "removeIcon", selectable: "selectable", selectIcon: "selectIcon", class: "class", disabled: "disabled", selected: "selected", color: "color", resourceStrings: "resourceStrings" }, outputs: { selectedChange: "selectedChange", moveStart: "moveStart", moveEnd: "moveEnd", remove: "remove", chipClick: "chipClick", selectedChanging: "selectedChanging", selectedChanged: "selectedChanged", keyDown: "keyDown", dragEnter: "dragEnter", dragLeave: "dragLeave", dragOver: "dragOver", dragDrop: "dragDrop" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "attr.id": "this.id", "attr.role": "this.role", "attr.tabIndex": "this.tabIndex", "attr.aria-selected": "this.selected", "attr.class": "this.hostClass" } }, viewQueries: [{ propertyName: "dragDirective", first: true, predicate: ["chipArea"], descendants: true, read: IgxDragDirective, static: true }, { propertyName: "chipArea", first: true, predicate: ["chipArea"], descendants: true, read: ElementRef, static: true }, { propertyName: "selectContainer", first: true, predicate: ["selectContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "defaultRemoveIcon", first: true, predicate: ["defaultRemoveIcon"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultSelectIcon", first: true, predicate: ["defaultSelectIcon"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div #chipArea class=\"igx-chip__item\"\n    [igxDrag]=\"{chip: this}\"\n    [style.visibility]='hideBaseElement ? \"hidden\" : \"visible\"'\n    [ghostClass]=\"ghostClass\"\n    (dragStart)=\"onChipDragStart($event)\"\n    (ghostCreate)=\"onChipGhostCreate()\"\n    (ghostDestroy)=\"onChipGhostDestroy()\"\n    (dragEnd)=\"onChipDragEnd()\"\n    (transitioned)=\"onChipMoveEnd($event)\"\n    (dragClick)=\"onChipDragClicked($event)\"\n    igxDrop\n    (enter)=\"onChipDragEnterHandler($event)\"\n    (leave)= \"onChipDragLeaveHandler($event)\"\n    (over)=\"onChipOverHandler($event)\"\n    (dropped)=\"onChipDrop($event)\">\n\n    <div #selectContainer [ngClass]=\"selectClass(selected)\">\n        <ng-container *ngTemplateOutlet=\"selectIconTemplate\"></ng-container>\n    </div>\n\n    <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n\n    <div class=\"igx-chip__content\">\n        <ng-content></ng-content>\n    </div>\n\n    <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n\n    <div class=\"igx-chip__remove\" *ngIf=\"removable\"\n        [attr.tabIndex]=\"tabIndex\"\n        (keydown)=\"onRemoveBtnKeyDown($event)\"\n        (pointerdown)=\"onRemoveMouseDown($event)\"\n        (mousedown)=\"onRemoveMouseDown($event)\"\n        (click)=\"onRemoveClick($event)\"\n        (touchmove)=\"onRemoveTouchMove()\"\n        (touchend)=\"onRemoveTouchEnd($event)\">\n        <ng-container *ngTemplateOutlet=\"removeButtonTemplate\"></ng-container>\n    </div>\n</div>\n\n<ng-template #defaultSelectIcon>\n    <igx-icon [attr.aria-label]=\"resourceStrings.igx_chip_select\">done</igx-icon>\n</ng-template>\n\n<ng-template #defaultRemoveIcon>\n    <igx-icon [attr.aria-label]=\"resourceStrings.igx_chip_remove\">cancel</igx-icon>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }] });
@@ -35648,20 +35657,20 @@ class IgxChipsAreaComponent {
             const changes = this._differ.diff(this.chipsList.toArray());
             if (changes) {
                 changes.forEachAddedItem((addedChip) => {
-                    addedChip.item.moveStart.pipe(takeUntil(this.destroy$)).subscribe((args) => {
+                    addedChip.item.moveStart.pipe(takeUntil(addedChip.item.destroy$)).subscribe((args) => {
                         this.onChipMoveStart(args);
                     });
-                    addedChip.item.moveEnd.pipe(takeUntil(this.destroy$)).subscribe((args) => {
+                    addedChip.item.moveEnd.pipe(takeUntil(addedChip.item.destroy$)).subscribe((args) => {
                         this.onChipMoveEnd(args);
                     });
-                    addedChip.item.dragEnter.pipe(takeUntil(this.destroy$)).subscribe((args) => {
+                    addedChip.item.dragEnter.pipe(takeUntil(addedChip.item.destroy$)).subscribe((args) => {
                         this.onChipDragEnter(args);
                     });
-                    addedChip.item.keyDown.pipe(takeUntil(this.destroy$)).subscribe((args) => {
+                    addedChip.item.keyDown.pipe(takeUntil(addedChip.item.destroy$)).subscribe((args) => {
                         this.onChipKeyDown(args);
                     });
                     if (addedChip.item.selectable) {
-                        addedChip.item.selectedChanging.pipe(takeUntil(this.destroy$)).subscribe((args) => {
+                        addedChip.item.selectedChanging.pipe(takeUntil(addedChip.item.destroy$)).subscribe((args) => {
                             this.onChipSelectionChange(args);
                         });
                     }
@@ -55939,8 +55948,8 @@ class IgxQueryBuilderComponent extends DisplayDensityBase {
         const index = parent.children.indexOf(firstExpression);
         parent.children.splice(index, 0, groupItem);
         for (const expr of this.selectedExpressions) {
-            this.deleteItem(expr);
             groupItem.children.push(expr);
+            this.deleteItem(expr);
             expr.parent = groupItem;
         }
         this.clearSelection();
@@ -89127,13 +89136,13 @@ IgxDateRangeStartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0
 IgxDateRangeStartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: IgxDateRangeStartComponent, selector: "igx-date-range-start", providers: [
         { provide: IgxInputGroupBase, useExisting: IgxDateRangeStartComponent },
         { provide: IgxDateRangeInputsBaseComponent, useExisting: IgxDateRangeStartComponent }
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-input-group__wrapper\" *ngIf=\"isTypeBox; else bundle\">\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n</div>\n\n<div class=\"igx-input-group__border\" *ngIf=\"hasBorder\"></div>\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    <igx-prefix *ngIf=\"isFileType\" class=\"igx-prefix--upload\">\n        <button\n            igxButton=\"raised\"\n            (click)=\"uploadButtonHandler()\"\n            [displayDensity]=\"displayDensity\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"{ 'igx-input-group__upload-button': isTypeLine }\"\n        >\n            {{ resourceStrings.igx_input_upload_button }}\n        </button>\n    </igx-prefix>\n</ng-template>\n\n<ng-template #files>\n    <div\n        *ngIf=\"isFileType\"\n        class=\"igx-input-group__file-input\"\n        [title]=\"fileNames\"\n    >\n        <span>{{ fileNames }}</span>\n    </div>\n</ng-template>\n\n<ng-template #clear>\n    <igx-suffix\n        class=\"igx-input-group__clear-icon\"\n        *ngIf=\"isFileType && isFilled\"\n        (click)=\"clearValueHandler()\"\n        (keydown.Enter)=\"clearValueHandler()\"\n        title=\"clear files\"\n        tabindex=\"0\"\n    >\n        <igx-icon>{{ resourceStrings.igx_input_clear_button }}</igx-icon>\n    </igx-suffix>\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    <ng-container [ngSwitch]=\"theme\">\n        <ng-container *ngSwitchCase=\"'bootstrap'\">\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'fluent'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'indigo-design'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }] });
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-input-group__wrapper\" *ngIf=\"isTypeBox; else bundle\">\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n</div>\n\n<div class=\"igx-input-group__border\" *ngIf=\"hasBorder\"></div>\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    <igx-prefix *ngIf=\"isFileType\" class=\"igx-prefix--upload\">\n        <button\n            igxButton=\"raised\"\n            type=\"button\"\n            (click)=\"uploadButtonHandler()\"\n            [displayDensity]=\"displayDensity\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"{ 'igx-input-group__upload-button': isTypeLine }\"\n        >\n            {{ resourceStrings.igx_input_upload_button }}\n        </button>\n    </igx-prefix>\n</ng-template>\n\n<ng-template #files>\n    <div\n        *ngIf=\"isFileType\"\n        class=\"igx-input-group__file-input\"\n        [title]=\"fileNames\"\n    >\n        <span>{{ fileNames }}</span>\n    </div>\n</ng-template>\n\n<ng-template #clear>\n    <igx-suffix\n        class=\"igx-input-group__clear-icon\"\n        *ngIf=\"isFileType && isFilled\"\n        (click)=\"clearValueHandler()\"\n        (keydown.Enter)=\"clearValueHandler()\"\n        title=\"clear files\"\n        tabindex=\"0\"\n    >\n        <igx-icon>{{ resourceStrings.igx_input_clear_button }}</igx-icon>\n    </igx-suffix>\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    <ng-container [ngSwitch]=\"theme\">\n        <ng-container *ngSwitchCase=\"'bootstrap'\">\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'fluent'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'indigo-design'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxDateRangeStartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-date-range-start', providers: [
                         { provide: IgxInputGroupBase, useExisting: IgxDateRangeStartComponent },
                         { provide: IgxDateRangeInputsBaseComponent, useExisting: IgxDateRangeStartComponent }
-                    ], template: "<div class=\"igx-input-group__wrapper\" *ngIf=\"isTypeBox; else bundle\">\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n</div>\n\n<div class=\"igx-input-group__border\" *ngIf=\"hasBorder\"></div>\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    <igx-prefix *ngIf=\"isFileType\" class=\"igx-prefix--upload\">\n        <button\n            igxButton=\"raised\"\n            (click)=\"uploadButtonHandler()\"\n            [displayDensity]=\"displayDensity\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"{ 'igx-input-group__upload-button': isTypeLine }\"\n        >\n            {{ resourceStrings.igx_input_upload_button }}\n        </button>\n    </igx-prefix>\n</ng-template>\n\n<ng-template #files>\n    <div\n        *ngIf=\"isFileType\"\n        class=\"igx-input-group__file-input\"\n        [title]=\"fileNames\"\n    >\n        <span>{{ fileNames }}</span>\n    </div>\n</ng-template>\n\n<ng-template #clear>\n    <igx-suffix\n        class=\"igx-input-group__clear-icon\"\n        *ngIf=\"isFileType && isFilled\"\n        (click)=\"clearValueHandler()\"\n        (keydown.Enter)=\"clearValueHandler()\"\n        title=\"clear files\"\n        tabindex=\"0\"\n    >\n        <igx-icon>{{ resourceStrings.igx_input_clear_button }}</igx-icon>\n    </igx-suffix>\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    <ng-container [ngSwitch]=\"theme\">\n        <ng-container *ngSwitchCase=\"'bootstrap'\">\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'fluent'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'indigo-design'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n" }]
+                    ], template: "<div class=\"igx-input-group__wrapper\" *ngIf=\"isTypeBox; else bundle\">\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n</div>\n\n<div class=\"igx-input-group__border\" *ngIf=\"hasBorder\"></div>\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    <igx-prefix *ngIf=\"isFileType\" class=\"igx-prefix--upload\">\n        <button\n            igxButton=\"raised\"\n            type=\"button\"\n            (click)=\"uploadButtonHandler()\"\n            [displayDensity]=\"displayDensity\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"{ 'igx-input-group__upload-button': isTypeLine }\"\n        >\n            {{ resourceStrings.igx_input_upload_button }}\n        </button>\n    </igx-prefix>\n</ng-template>\n\n<ng-template #files>\n    <div\n        *ngIf=\"isFileType\"\n        class=\"igx-input-group__file-input\"\n        [title]=\"fileNames\"\n    >\n        <span>{{ fileNames }}</span>\n    </div>\n</ng-template>\n\n<ng-template #clear>\n    <igx-suffix\n        class=\"igx-input-group__clear-icon\"\n        *ngIf=\"isFileType && isFilled\"\n        (click)=\"clearValueHandler()\"\n        (keydown.Enter)=\"clearValueHandler()\"\n        title=\"clear files\"\n        tabindex=\"0\"\n    >\n        <igx-icon>{{ resourceStrings.igx_input_clear_button }}</igx-icon>\n    </igx-suffix>\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    <ng-container [ngSwitch]=\"theme\">\n        <ng-container *ngSwitchCase=\"'bootstrap'\">\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'fluent'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'indigo-design'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n" }]
         }] });
 /**
  * Defines the end input for a date range picker
@@ -89165,13 +89174,13 @@ IgxDateRangeEndComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 IgxDateRangeEndComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: IgxDateRangeEndComponent, selector: "igx-date-range-end", providers: [
         { provide: IgxInputGroupBase, useExisting: IgxDateRangeEndComponent },
         { provide: IgxDateRangeInputsBaseComponent, useExisting: IgxDateRangeEndComponent }
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-input-group__wrapper\" *ngIf=\"isTypeBox; else bundle\">\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n</div>\n\n<div class=\"igx-input-group__border\" *ngIf=\"hasBorder\"></div>\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    <igx-prefix *ngIf=\"isFileType\" class=\"igx-prefix--upload\">\n        <button\n            igxButton=\"raised\"\n            (click)=\"uploadButtonHandler()\"\n            [displayDensity]=\"displayDensity\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"{ 'igx-input-group__upload-button': isTypeLine }\"\n        >\n            {{ resourceStrings.igx_input_upload_button }}\n        </button>\n    </igx-prefix>\n</ng-template>\n\n<ng-template #files>\n    <div\n        *ngIf=\"isFileType\"\n        class=\"igx-input-group__file-input\"\n        [title]=\"fileNames\"\n    >\n        <span>{{ fileNames }}</span>\n    </div>\n</ng-template>\n\n<ng-template #clear>\n    <igx-suffix\n        class=\"igx-input-group__clear-icon\"\n        *ngIf=\"isFileType && isFilled\"\n        (click)=\"clearValueHandler()\"\n        (keydown.Enter)=\"clearValueHandler()\"\n        title=\"clear files\"\n        tabindex=\"0\"\n    >\n        <igx-icon>{{ resourceStrings.igx_input_clear_button }}</igx-icon>\n    </igx-suffix>\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    <ng-container [ngSwitch]=\"theme\">\n        <ng-container *ngSwitchCase=\"'bootstrap'\">\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'fluent'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'indigo-design'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }] });
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-input-group__wrapper\" *ngIf=\"isTypeBox; else bundle\">\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n</div>\n\n<div class=\"igx-input-group__border\" *ngIf=\"hasBorder\"></div>\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    <igx-prefix *ngIf=\"isFileType\" class=\"igx-prefix--upload\">\n        <button\n            igxButton=\"raised\"\n            type=\"button\"\n            (click)=\"uploadButtonHandler()\"\n            [displayDensity]=\"displayDensity\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"{ 'igx-input-group__upload-button': isTypeLine }\"\n        >\n            {{ resourceStrings.igx_input_upload_button }}\n        </button>\n    </igx-prefix>\n</ng-template>\n\n<ng-template #files>\n    <div\n        *ngIf=\"isFileType\"\n        class=\"igx-input-group__file-input\"\n        [title]=\"fileNames\"\n    >\n        <span>{{ fileNames }}</span>\n    </div>\n</ng-template>\n\n<ng-template #clear>\n    <igx-suffix\n        class=\"igx-input-group__clear-icon\"\n        *ngIf=\"isFileType && isFilled\"\n        (click)=\"clearValueHandler()\"\n        (keydown.Enter)=\"clearValueHandler()\"\n        title=\"clear files\"\n        tabindex=\"0\"\n    >\n        <igx-icon>{{ resourceStrings.igx_input_clear_button }}</igx-icon>\n    </igx-suffix>\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    <ng-container [ngSwitch]=\"theme\">\n        <ng-container *ngSwitchCase=\"'bootstrap'\">\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'fluent'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'indigo-design'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxDateRangeEndComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-date-range-end', providers: [
                         { provide: IgxInputGroupBase, useExisting: IgxDateRangeEndComponent },
                         { provide: IgxDateRangeInputsBaseComponent, useExisting: IgxDateRangeEndComponent }
-                    ], template: "<div class=\"igx-input-group__wrapper\" *ngIf=\"isTypeBox; else bundle\">\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n</div>\n\n<div class=\"igx-input-group__border\" *ngIf=\"hasBorder\"></div>\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    <igx-prefix *ngIf=\"isFileType\" class=\"igx-prefix--upload\">\n        <button\n            igxButton=\"raised\"\n            (click)=\"uploadButtonHandler()\"\n            [displayDensity]=\"displayDensity\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"{ 'igx-input-group__upload-button': isTypeLine }\"\n        >\n            {{ resourceStrings.igx_input_upload_button }}\n        </button>\n    </igx-prefix>\n</ng-template>\n\n<ng-template #files>\n    <div\n        *ngIf=\"isFileType\"\n        class=\"igx-input-group__file-input\"\n        [title]=\"fileNames\"\n    >\n        <span>{{ fileNames }}</span>\n    </div>\n</ng-template>\n\n<ng-template #clear>\n    <igx-suffix\n        class=\"igx-input-group__clear-icon\"\n        *ngIf=\"isFileType && isFilled\"\n        (click)=\"clearValueHandler()\"\n        (keydown.Enter)=\"clearValueHandler()\"\n        title=\"clear files\"\n        tabindex=\"0\"\n    >\n        <igx-icon>{{ resourceStrings.igx_input_clear_button }}</igx-icon>\n    </igx-suffix>\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    <ng-container [ngSwitch]=\"theme\">\n        <ng-container *ngSwitchCase=\"'bootstrap'\">\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'fluent'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'indigo-design'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n" }]
+                    ], template: "<div class=\"igx-input-group__wrapper\" *ngIf=\"isTypeBox; else bundle\">\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n</div>\n\n<div class=\"igx-input-group__border\" *ngIf=\"hasBorder\"></div>\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    <igx-prefix *ngIf=\"isFileType\" class=\"igx-prefix--upload\">\n        <button\n            igxButton=\"raised\"\n            type=\"button\"\n            (click)=\"uploadButtonHandler()\"\n            [displayDensity]=\"displayDensity\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"{ 'igx-input-group__upload-button': isTypeLine }\"\n        >\n            {{ resourceStrings.igx_input_upload_button }}\n        </button>\n    </igx-prefix>\n</ng-template>\n\n<ng-template #files>\n    <div\n        *ngIf=\"isFileType\"\n        class=\"igx-input-group__file-input\"\n        [title]=\"fileNames\"\n    >\n        <span>{{ fileNames }}</span>\n    </div>\n</ng-template>\n\n<ng-template #clear>\n    <igx-suffix\n        class=\"igx-input-group__clear-icon\"\n        *ngIf=\"isFileType && isFilled\"\n        (click)=\"clearValueHandler()\"\n        (keydown.Enter)=\"clearValueHandler()\"\n        title=\"clear files\"\n        tabindex=\"0\"\n    >\n        <igx-icon>{{ resourceStrings.igx_input_clear_button }}</igx-icon>\n    </igx-suffix>\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    <ng-container [ngSwitch]=\"theme\">\n        <ng-container *ngSwitchCase=\"'bootstrap'\">\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'fluent'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'indigo-design'\">\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchDefault>\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n" }]
         }] });
 class IgxDateRangeSeparatorDirective {
 }