@microsoft/windows-admin-center-sdk
Version:
Microsoft - Windows Admin Center Shell
105 lines • 12.9 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { ElementRef, Injectable } from '@angular/core';
import { Debounce } from '@microsoft/windows-admin-center-sdk/core/index';
import * as i0 from "@angular/core";
/**
* A re-usable form field accessibility manager.
*/
export class FormFieldAccessibilityManagerBaseService {
/**
* The focus handler on delete/add if the form field is a list.
* @param value The value for the list form field.
* @param addButton The component reference for the add button.
* @param hostElement The host element reference.
* @param isDelete Determine if the action is delete.
* @returns void
*/
listFormFieldFocusHandlerOnKeyboardAction(value, addButton, hostElement, isDelete = true) {
// If there are no items in the list, focus on the add button.
if (!value || !value.length) {
this.deferredFocusOnAddButton(addButton);
return;
}
// Otherwise focus on the either the first input fields when it is delete or the last input field when it is add.
this.deferredFocusOnInputFields(hostElement, value, isDelete);
}
/**
* The focus handler on delete/add if the form field is a list. And the list is built with a specific selector.
* @param value The value for the list form field.
* @param addButton The component reference for the add button.
* @param hostElement The host element reference.
* @param selector The selector for the input fields.
* @returns void
*/
listFormFieldFocusHandlerOnKeyboardActionBySelector(value, addButton, hostElement, selector) {
// If there are no items in the list, focus on the add button.
if (!value || !value.length) {
this.deferredFocusOnAddButton(addButton);
return;
}
// Otherwise focus on the either the first input fields when it is delete or the last input field when it is add.
this.deferredFocusOnTargetBySelector(value, hostElement, selector);
}
/**
* It handles the focus on the input field by index if value is type of any[].
* @param hostElement the host form field element.
* @param index the index of the input field to focus on.
* @returns void.
*/
focusOnInputByIndex(hostElement, index) {
const inputs = hostElement.nativeElement.querySelectorAll('input');
if (index < 0 || index >= inputs.length) {
return;
}
inputs[index].focus();
}
deferredFocusOnTargetBySelector(value, hostElement, selector) {
if (!value || !value.length) {
return;
}
const targets = hostElement.nativeElement.querySelectorAll(selector);
if (!targets || !targets.length) {
return;
}
targets[0].focus();
}
deferredFocusOnAddButton(addButton) {
if (!addButton) {
return;
}
addButton.nativeElement.focus();
}
deferredFocusOnInputFields(hostElement, value, isDelete = true) {
if (!value || !value.length) {
return;
}
this.focusOnInputByIndex(hostElement, isDelete ? 0 : value.length - 1);
}
}
/** @nocollapse */ FormFieldAccessibilityManagerBaseService.ɵfac = function FormFieldAccessibilityManagerBaseService_Factory(t) { return new (t || FormFieldAccessibilityManagerBaseService)(); };
/** @nocollapse */ FormFieldAccessibilityManagerBaseService.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: FormFieldAccessibilityManagerBaseService, factory: FormFieldAccessibilityManagerBaseService.ɵfac, providedIn: 'root' });
__decorate([
Debounce(),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Array, ElementRef, String]),
__metadata("design:returntype", void 0)
], FormFieldAccessibilityManagerBaseService.prototype, "deferredFocusOnTargetBySelector", null);
__decorate([
Debounce(),
__metadata("design:type", Function),
__metadata("design:paramtypes", [ElementRef]),
__metadata("design:returntype", void 0)
], FormFieldAccessibilityManagerBaseService.prototype, "deferredFocusOnAddButton", null);
__decorate([
Debounce(),
__metadata("design:type", Function),
__metadata("design:paramtypes", [ElementRef, Array, Object]),
__metadata("design:returntype", void 0)
], FormFieldAccessibilityManagerBaseService.prototype, "deferredFocusOnInputFields", null);
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormFieldAccessibilityManagerBaseService, [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], null, { deferredFocusOnTargetBySelector: [], deferredFocusOnAddButton: [], deferredFocusOnInputFields: [] }); })();
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1maWVsZC1hY2Nlc3NpYmlsaXR5LW1hbmFnZXItYmFzZS5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vYW5ndWxhci9zcmMvY29udHJvbHMvZm9ybS9mb3JtLWZpZWxkL2Zvcm0tZmllbGQtYWNjZXNzaWJpbGl0eS1tYW5hZ2VyLWJhc2Uuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGdEQUFnRCxDQUFDOztBQUUxRTs7R0FFRztBQUlILE1BQU0sT0FBTyx3Q0FBd0M7SUFDakQ7Ozs7Ozs7T0FPRztJQUNJLHlDQUF5QyxDQUFDLEtBQWUsRUFBRSxTQUFpQyxFQUFFLFdBQXVCLEVBQUUsUUFBUSxHQUFHLElBQUk7UUFDekksOERBQThEO1FBQzlELElBQUksQ0FBQyxLQUFLLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxFQUFFO1lBQ3pCLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxTQUFTLENBQUMsQ0FBQztZQUN6QyxPQUFPO1NBQ1Y7UUFFRCxpSEFBaUg7UUFDakgsSUFBSSxDQUFDLDBCQUEwQixDQUFDLFdBQVcsRUFBRSxLQUFLLEVBQUUsUUFBUSxDQUFDLENBQUM7SUFDbEUsQ0FBQztJQUVEOzs7Ozs7O09BT0c7SUFDSSxtREFBbUQsQ0FBQyxLQUFlLEVBQUUsU0FBaUMsRUFBRSxXQUF1QixFQUFFLFFBQWdCO1FBQ3BKLDhEQUE4RDtRQUM5RCxJQUFJLENBQUMsS0FBSyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sRUFBRTtZQUN6QixJQUFJLENBQUMsd0JBQXdCLENBQUMsU0FBUyxDQUFDLENBQUM7WUFDekMsT0FBTztTQUNWO1FBRUQsaUhBQWlIO1FBQ2pILElBQUksQ0FBQywrQkFBK0IsQ0FBQyxLQUFLLEVBQUUsV0FBVyxFQUFFLFFBQVEsQ0FBQyxDQUFDO0lBQ3ZFLENBQUM7SUFFRDs7Ozs7T0FLRztJQUNJLG1CQUFtQixDQUFDLFdBQXVCLEVBQUUsS0FBYTtRQUM3RCxNQUFNLE1BQU0sR0FBRyxXQUFXLENBQUMsYUFBYSxDQUFDLGdCQUFnQixDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ25FLElBQUksS0FBSyxHQUFHLENBQUMsSUFBSSxLQUFLLElBQUksTUFBTSxDQUFDLE1BQU0sRUFBRTtZQUNyQyxPQUFPO1NBQ1Y7UUFFRCxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUdNLCtCQUErQixDQUFDLEtBQWUsRUFBRSxXQUF1QixFQUFFLFFBQWdCO1FBQzdGLElBQUksQ0FBQyxLQUFLLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxFQUFFO1lBQ3pCLE9BQU87U0FDVjtRQUVELE1BQU0sT0FBTyxHQUFHLFdBQVcsQ0FBQyxhQUFhLENBQUMsZ0JBQWdCLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDckUsSUFBSSxDQUFDLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUU7WUFDN0IsT0FBTztTQUNWO1FBRUQsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ3ZCLENBQUM7SUFHUyx3QkFBd0IsQ0FBQyxTQUFpQztRQUNoRSxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ1osT0FBTztTQUNWO1FBRUQsU0FBUyxDQUFDLGFBQWEsQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUNwQyxDQUFDO0lBR1MsMEJBQTBCLENBQUMsV0FBdUIsRUFBRSxLQUFlLEVBQUUsUUFBUSxHQUFHLElBQUk7UUFDMUYsSUFBSSxDQUFDLEtBQUssSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEVBQUU7WUFDekIsT0FBTztTQUNWO1FBRUQsSUFBSSxDQUFDLG1CQUFtQixDQUFDLFdBQVcsRUFBRSxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQztJQUMzRSxDQUFDOzttSkFwRlEsd0NBQXdDOzZIQUF4Qyx3Q0FBd0MsV0FBeEMsd0NBQXdDLG1CQUZ2QyxNQUFNO0FBd0RoQjtJQUFDLFFBQVEsRUFBRTs7NENBQzBELFVBQVU7OytGQVc5RTtBQUVEO0lBQUMsUUFBUSxFQUFFOztxQ0FDbUMsVUFBVTs7d0ZBTXZEO0FBRUQ7SUFBQyxRQUFRLEVBQUU7O3FDQUN1QyxVQUFVOzswRkFNM0Q7dUZBcEZRLHdDQUF3QztjQUhwRCxVQUFVO2VBQUM7Z0JBQ1YsVUFBVSxFQUFFLE1BQU07YUFDbkI7Z0JBd0RVLCtCQUErQixNQWM1Qix3QkFBd0IsTUFTeEIsMEJBQTBCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRWxlbWVudFJlZiwgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBEZWJvdW5jZSB9IGZyb20gJ0BtaWNyb3NvZnQvd2luZG93cy1hZG1pbi1jZW50ZXItc2RrL2NvcmUvaW5kZXgnO1xyXG5cclxuLyoqXHJcbiAqIEEgcmUtdXNhYmxlIGZvcm0gZmllbGQgYWNjZXNzaWJpbGl0eSBtYW5hZ2VyLlxyXG4gKi9cclxuQEluamVjdGFibGUoe1xyXG4gIHByb3ZpZGVkSW46ICdyb290J1xyXG59KVxyXG5leHBvcnQgY2xhc3MgRm9ybUZpZWxkQWNjZXNzaWJpbGl0eU1hbmFnZXJCYXNlU2VydmljZSB7XHJcbiAgICAvKipcclxuICAgICAqIFRoZSBmb2N1cyBoYW5kbGVyIG9uIGRlbGV0ZS9hZGQgaWYgdGhlIGZvcm0gZmllbGQgaXMgYSBsaXN0LlxyXG4gICAgICogQHBhcmFtIHZhbHVlIFRoZSB2YWx1ZSBmb3IgdGhlIGxpc3QgZm9ybSBmaWVsZC5cclxuICAgICAqIEBwYXJhbSBhZGRCdXR0b24gVGhlIGNvbXBvbmVudCByZWZlcmVuY2UgZm9yIHRoZSBhZGQgYnV0dG9uLlxyXG4gICAgICogQHBhcmFtIGhvc3RFbGVtZW50IFRoZSBob3N0IGVsZW1lbnQgcmVmZXJlbmNlLlxyXG4gICAgICogQHBhcmFtIGlzRGVsZXRlIERldGVybWluZSBpZiB0aGUgYWN0aW9uIGlzIGRlbGV0ZS5cclxuICAgICAqIEByZXR1cm5zIHZvaWRcclxuICAgICAqL1xyXG4gICAgcHVibGljIGxpc3RGb3JtRmllbGRGb2N1c0hhbmRsZXJPbktleWJvYXJkQWN0aW9uKHZhbHVlOiBzdHJpbmdbXSwgYWRkQnV0dG9uOiBFbGVtZW50UmVmIHwgdW5kZWZpbmVkLCBob3N0RWxlbWVudDogRWxlbWVudFJlZiwgaXNEZWxldGUgPSB0cnVlKTogdm9pZCB7XHJcbiAgICAgICAgLy8gSWYgdGhlcmUgYXJlIG5vIGl0ZW1zIGluIHRoZSBsaXN0LCBmb2N1cyBvbiB0aGUgYWRkIGJ1dHRvbi5cclxuICAgICAgICBpZiAoIXZhbHVlIHx8ICF2YWx1ZS5sZW5ndGgpIHtcclxuICAgICAgICAgICAgdGhpcy5kZWZlcnJlZEZvY3VzT25BZGRCdXR0b24oYWRkQnV0dG9uKTtcclxuICAgICAgICAgICAgcmV0dXJuO1xyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgLy8gT3RoZXJ3aXNlIGZvY3VzIG9uIHRoZSBlaXRoZXIgdGhlIGZpcnN0IGlucHV0IGZpZWxkcyB3aGVuIGl0IGlzIGRlbGV0ZSBvciB0aGUgbGFzdCBpbnB1dCBmaWVsZCB3aGVuIGl0IGlzIGFkZC5cclxuICAgICAgICB0aGlzLmRlZmVycmVkRm9jdXNPbklucHV0RmllbGRzKGhvc3RFbGVtZW50LCB2YWx1ZSwgaXNEZWxldGUpO1xyXG4gICAgfVxyXG5cclxuICAgIC8qKlxyXG4gICAgICogVGhlIGZvY3VzIGhhbmRsZXIgb24gZGVsZXRlL2FkZCBpZiB0aGUgZm9ybSBmaWVsZCBpcyBhIGxpc3QuIEFuZCB0aGUgbGlzdCBpcyBidWlsdCB3aXRoIGEgc3BlY2lmaWMgc2VsZWN0b3IuXHJcbiAgICAgKiBAcGFyYW0gdmFsdWUgVGhlIHZhbHVlIGZvciB0aGUgbGlzdCBmb3JtIGZpZWxkLlxyXG4gICAgICogQHBhcmFtIGFkZEJ1dHRvbiBUaGUgY29tcG9uZW50IHJlZmVyZW5jZSBmb3IgdGhlIGFkZCBidXR0b24uXHJcbiAgICAgKiBAcGFyYW0gaG9zdEVsZW1lbnQgVGhlIGhvc3QgZWxlbWVudCByZWZlcmVuY2UuXHJcbiAgICAgKiBAcGFyYW0gc2VsZWN0b3IgVGhlIHNlbGVjdG9yIGZvciB0aGUgaW5wdXQgZmllbGRzLlxyXG4gICAgICogQHJldHVybnMgdm9pZFxyXG4gICAgICovXHJcbiAgICBwdWJsaWMgbGlzdEZvcm1GaWVsZEZvY3VzSGFuZGxlck9uS2V5Ym9hcmRBY3Rpb25CeVNlbGVjdG9yKHZhbHVlOiBzdHJpbmdbXSwgYWRkQnV0dG9uOiBFbGVtZW50UmVmIHwgdW5kZWZpbmVkLCBob3N0RWxlbWVudDogRWxlbWVudFJlZiwgc2VsZWN0b3I6IHN0cmluZyk6IHZvaWQge1xyXG4gICAgICAgIC8vIElmIHRoZXJlIGFyZSBubyBpdGVtcyBpbiB0aGUgbGlzdCwgZm9jdXMgb24gdGhlIGFkZCBidXR0b24uXHJcbiAgICAgICAgaWYgKCF2YWx1ZSB8fCAhdmFsdWUubGVuZ3RoKSB7XHJcbiAgICAgICAgICAgIHRoaXMuZGVmZXJyZWRGb2N1c09uQWRkQnV0dG9uKGFkZEJ1dHRvbik7XHJcbiAgICAgICAgICAgIHJldHVybjtcclxuICAgICAgICB9XHJcblxyXG4gICAgICAgIC8vIE90aGVyd2lzZSBmb2N1cyBvbiB0aGUgZWl0aGVyIHRoZSBmaXJzdCBpbnB1dCBmaWVsZHMgd2hlbiBpdCBpcyBkZWxldGUgb3IgdGhlIGxhc3QgaW5wdXQgZmllbGQgd2hlbiBpdCBpcyBhZGQuXHJcbiAgICAgICAgdGhpcy5kZWZlcnJlZEZvY3VzT25UYXJnZXRCeVNlbGVjdG9yKHZhbHVlLCBob3N0RWxlbWVudCwgc2VsZWN0b3IpO1xyXG4gICAgfVxyXG5cclxuICAgIC8qKlxyXG4gICAgICogSXQgaGFuZGxlcyB0aGUgZm9jdXMgb24gdGhlIGlucHV0IGZpZWxkIGJ5IGluZGV4IGlmIHZhbHVlIGlzIHR5cGUgb2YgYW55W10uXHJcbiAgICAgKiBAcGFyYW0gaG9zdEVsZW1lbnQgdGhlIGhvc3QgZm9ybSBmaWVsZCBlbGVtZW50LlxyXG4gICAgICogQHBhcmFtIGluZGV4IHRoZSBpbmRleCBvZiB0aGUgaW5wdXQgZmllbGQgdG8gZm9jdXMgb24uXHJcbiAgICAgKiBAcmV0dXJucyB2b2lkLlxyXG4gICAgICovXHJcbiAgICBwdWJsaWMgZm9jdXNPbklucHV0QnlJbmRleChob3N0RWxlbWVudDogRWxlbWVudFJlZiwgaW5kZXg6IG51bWJlcik6IHZvaWQge1xyXG4gICAgICAgIGNvbnN0IGlucHV0cyA9IGhvc3RFbGVtZW50Lm5hdGl2ZUVsZW1lbnQucXVlcnlTZWxlY3RvckFsbCgnaW5wdXQnKTtcclxuICAgICAgICBpZiAoaW5kZXggPCAwIHx8IGluZGV4ID49IGlucHV0cy5sZW5ndGgpIHtcclxuICAgICAgICAgICAgcmV0dXJuO1xyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgaW5wdXRzW2luZGV4XS5mb2N1cygpO1xyXG4gICAgfVxyXG5cclxuICAgIEBEZWJvdW5jZSgpXHJcbiAgICBwdWJsaWMgZGVmZXJyZWRGb2N1c09uVGFyZ2V0QnlTZWxlY3Rvcih2YWx1ZTogc3RyaW5nW10sIGhvc3RFbGVtZW50OiBFbGVtZW50UmVmLCBzZWxlY3Rvcjogc3RyaW5nKTogdm9pZCB7XHJcbiAgICAgICAgaWYgKCF2YWx1ZSB8fCAhdmFsdWUubGVuZ3RoKSB7XHJcbiAgICAgICAgICAgIHJldHVybjtcclxuICAgICAgICB9XHJcblxyXG4gICAgICAgIGNvbnN0IHRhcmdldHMgPSBob3N0RWxlbWVudC5uYXRpdmVFbGVtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoc2VsZWN0b3IpO1xyXG4gICAgICAgIGlmICghdGFyZ2V0cyB8fCAhdGFyZ2V0cy5sZW5ndGgpIHtcclxuICAgICAgICAgICAgcmV0dXJuO1xyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgdGFyZ2V0c1swXS5mb2N1cygpO1xyXG4gICAgfVxyXG5cclxuICAgIEBEZWJvdW5jZSgpXHJcbiAgICBwcm90ZWN0ZWQgZGVmZXJyZWRGb2N1c09uQWRkQnV0dG9uKGFkZEJ1dHRvbjogRWxlbWVudFJlZiB8IHVuZGVmaW5lZCkge1xyXG4gICAgICAgIGlmICghYWRkQnV0dG9uKSB7XHJcbiAgICAgICAgICAgIHJldHVybjtcclxuICAgICAgICB9XHJcblxyXG4gICAgICAgIGFkZEJ1dHRvbi5uYXRpdmVFbGVtZW50LmZvY3VzKCk7XHJcbiAgICB9XHJcblxyXG4gICAgQERlYm91bmNlKClcclxuICAgIHByb3RlY3RlZCBkZWZlcnJlZEZvY3VzT25JbnB1dEZpZWxkcyhob3N0RWxlbWVudDogRWxlbWVudFJlZiwgdmFsdWU6IHN0cmluZ1tdLCBpc0RlbGV0ZSA9IHRydWUpOiB2b2lkIHtcclxuICAgICAgICBpZiAoIXZhbHVlIHx8ICF2YWx1ZS5sZW5ndGgpIHtcclxuICAgICAgICAgICAgcmV0dXJuO1xyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgdGhpcy5mb2N1c09uSW5wdXRCeUluZGV4KGhvc3RFbGVtZW50LCBpc0RlbGV0ZSA/IDAgOiB2YWx1ZS5sZW5ndGggLSAxKTtcclxuICAgIH1cclxufVxyXG4iXX0=