[ADF-5311] Extract infinite select scroll loading logic to a reusable component (#6536)

* move translation to core

* select scroll directive

* register directive

* add infinite scroll directive

* clean up component and aditional logic

* use  waitForAsync over async

* update docs

* change output emitter name

* revert to async

* restore default value;

* test

lib/core/directives/infinite-select-scroll.directive.spec.ts

@@ -0,0 +1,82 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ViewChild } from '@angular/core';
+import { ComponentFixture, fakeAsync, flush, TestBed } from '@angular/core/testing';
+import { InfiniteSelectScrollDirective } from './infinite-select-scroll.directive';
+import { setupTestBed } from '../testing/setup-test-bed';
+import {  MatSelect, MatSelectModule } from '@angular/material/select';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+@Component({
+    template: `
+        <mat-select adf-infinite-select-scroll (scrollEnd)="load()" >
+            <mat-option *ngFor="let option of options; let idx=index">
+                {{ option.text }}
+            </mat-option>
+        </mat-select>`
+})
+class TestComponent {
+    options = new Array(50).fill({text: 'dummy'});
+
+    @ViewChild(MatSelect, { static: true })
+    matSelect: MatSelect;
+
+    open() {
+        this.matSelect.open();
+    }
+
+    load() {
+        this.options.push(...new Array(10).fill({text: 'dummy'}));
+    }
+}
+
+describe('InfiniteSelectScrollDirective', () => {
+    let fixture: ComponentFixture<TestComponent>;
+    let component: TestComponent;
+
+    setupTestBed({
+        imports: [
+            MatSelectModule,
+            NoopAnimationsModule
+        ],
+        declarations: [
+            TestComponent,
+            InfiniteSelectScrollDirective
+        ]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TestComponent);
+        component = fixture.componentInstance;
+    });
+
+    beforeEach(fakeAsync(() => {
+        fixture.detectChanges();
+        component.open();
+        fixture.detectChanges();
+        flush();
+    }));
+
+    it('should call an action on scrollEnd event', fakeAsync(() => {
+        const panel = document.querySelector('.mat-select-panel')  as HTMLElement;
+        panel.scrollTop = panel.scrollHeight;
+        panel.dispatchEvent(new Event('scroll'));
+        fixture.detectChanges();
+        expect(component.options.length).toBe(60);
+    }));
+});