diff --git a/docs/content-services/directives/auto-focus.directive.md b/docs/content-services/directives/auto-focus.directive.md new file mode 100644 index 0000000000..88a5999152 --- /dev/null +++ b/docs/content-services/directives/auto-focus.directive.md @@ -0,0 +1,20 @@ +--- +Title: Auto Focus directive +Added: v5.1.0 +Status: Active +Last reviewed: 2022-10-25 +--- + +# [Auto Focus directive](../../../lib/content-services/src/lib/directives/auto-focus.directive.ts "Defined in auto-focus.directive.ts") + +Automatically focuses HTML element after content is initialized. + +## Basic Usage + +```html + +``` + +## Class members + +### Properties diff --git a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html index 1d60c8506c..8560774133 100644 --- a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html +++ b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html @@ -26,7 +26,7 @@
- diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.module.ts b/lib/content-services/src/lib/aspect-list/aspect-list.module.ts index 9b448d49e8..813cc971ec 100644 --- a/lib/content-services/src/lib/aspect-list/aspect-list.module.ts +++ b/lib/content-services/src/lib/aspect-list/aspect-list.module.ts @@ -28,6 +28,7 @@ import { AspectListDialogComponent } from './aspect-list-dialog.component'; import { MatButtonModule } from '@angular/material/button'; import { MatTooltipModule } from '@angular/material/tooltip'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { ContentDirectiveModule } from '../directives/content-directive.module'; @NgModule({ imports: [ @@ -40,7 +41,8 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; MatDialogModule, MatButtonModule, MatTooltipModule, - MatProgressSpinnerModule + MatProgressSpinnerModule, + ContentDirectiveModule ], exports: [ AspectListComponent, diff --git a/lib/content-services/src/lib/directives/auto-focus.directive.spec.ts b/lib/content-services/src/lib/directives/auto-focus.directive.spec.ts new file mode 100644 index 0000000000..1b17b06298 --- /dev/null +++ b/lib/content-services/src/lib/directives/auto-focus.directive.spec.ts @@ -0,0 +1,52 @@ +/*! + * @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 } from '@angular/core'; +import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; +import { AutoFocusDirective } from './auto-focus.directive'; +import { By } from '@angular/platform-browser'; +import { TranslateModule } from '@ngx-translate/core'; + +@Component({ + template: `
Test
` +}) +class AutoFoucsTestComponent {} + +describe('AutoFocusDirective', () => { + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ + TranslateModule.forRoot() + ], + declarations: [ + AutoFocusDirective, + AutoFoucsTestComponent + ] + }); + fixture = TestBed.createComponent(AutoFoucsTestComponent); + }); + + it('should focus the element after content is initialized', fakeAsync(() => { + const autoFocusElement = fixture.debugElement.query(By.directive(AutoFocusDirective)).nativeElement; + spyOn(autoFocusElement, 'focus'); + fixture.detectChanges(); + tick(200); + expect(autoFocusElement.focus).toHaveBeenCalled(); + })); +}); diff --git a/lib/content-services/src/lib/directives/auto-focus.directive.ts b/lib/content-services/src/lib/directives/auto-focus.directive.ts new file mode 100644 index 0000000000..8bc7a00eb1 --- /dev/null +++ b/lib/content-services/src/lib/directives/auto-focus.directive.ts @@ -0,0 +1,31 @@ +/*! + * @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 { AfterContentInit, Directive, ElementRef } from '@angular/core'; + +@Directive({ + selector: '[adf-auto-focus]' +}) +export class AutoFocusDirective implements AfterContentInit { + public constructor(private el: ElementRef) {} + + public ngAfterContentInit() { + setTimeout(() => { + this.el.nativeElement.focus(); + }, 100); + } +} diff --git a/lib/content-services/src/lib/directives/content-directive.module.ts b/lib/content-services/src/lib/directives/content-directive.module.ts index 3ed6d233ab..1e9a54fcc9 100644 --- a/lib/content-services/src/lib/directives/content-directive.module.ts +++ b/lib/content-services/src/lib/directives/content-directive.module.ts @@ -22,6 +22,7 @@ import { TranslateModule } from '@ngx-translate/core'; import { NodeLockDirective } from './node-lock.directive'; import { NodeCounterComponent, NodeCounterDirective } from './node-counter.directive'; +import { AutoFocusDirective } from './auto-focus.directive'; @NgModule({ imports: [ @@ -32,11 +33,13 @@ import { NodeCounterComponent, NodeCounterDirective } from './node-counter.direc declarations: [ NodeLockDirective, NodeCounterDirective, - NodeCounterComponent + NodeCounterComponent, + AutoFocusDirective ], exports: [ NodeLockDirective, - NodeCounterDirective + NodeCounterDirective, + AutoFocusDirective ] }) export class ContentDirectiveModule { diff --git a/lib/content-services/src/lib/directives/public-api.ts b/lib/content-services/src/lib/directives/public-api.ts index 7164362a33..2e30ade106 100644 --- a/lib/content-services/src/lib/directives/public-api.ts +++ b/lib/content-services/src/lib/directives/public-api.ts @@ -18,3 +18,4 @@ export * from './content-directive.module'; export * from './node-lock.directive'; export * from './node-counter.directive'; +export * from './auto-focus.directive';