Service for finding first focusable element

domQueryingService.ts

namespace settlementDrafts {
  export class DOMQueryingService {
    
    public findFirstEnabledElement(form: any): any {
      return _.find(form, (element: any) => {
        return this.isFocusableElement(element) && this.isEditableElement(element);
      });
    }
    
    private isFocusableElement(element: any): boolean {
      return element["tagName"] === "INPUT" ||
             element["tagName"] === "SELECT" ||
             element["tagName"] === "TEXTAREA";
    }
    
    private isEditableElement(element: any): boolean {
      return this.isReadOnly(element) === false &&
             this.isDisabled(element) === false &&
             this.isHidden(element) === false &&
             this.anyParentIsHidden(element) === false;
    }
    
    private isReadOnly(element: any): boolean {
      let readOnlyValue = element["readOnly"];
      return _.isUndefined(readOnlyValue) ? false : readOnlyValue;
    }
    
    private isDisabled(element: any): boolean {
      let disabledValue = element["disabled"];
      return _.isUndefined(disabledValue) ? false : disabledValue;
    }
    
    private isHidden(element: any): boolean {
      return element["type"] === "hidden";
    }
    
    private anyParentIsHidden(element: any): boolean {
      let parents = this.allParents(element);
      let hidableParents = this.hidableParents(parents);
      if (_.isNil(hidableParents)) {
        return false;
      } else {
        return this.resolveHidden(element, hidableParents);
      }
    }
    
    private resolveHidden(element: any, hidableParents: Array<any>): boolean {
      let scope = angular.element(element).scope();
      return _.some(hidableParents, (hidableParent: any) => {
        let ngHide = this.resolveExpression(scope, hidableParent["attributes"]["ng-hide"]);
        let ngShow = this.resolveExpression(scope, hidableParent["attributes"]["ng-show"]);
        console.log("ng-hide:" + ngHide + " ng-show:" + ngShow);
        return ngHide === true || ngShow === false;
      });
    }
    
    private resolveExpression(scope: any, expression: any): any {
      if (_.isNil(expression)) {
        return undefined;
      } else {
        return scope.$eval(expression["value"]);
      }
    }
    
    private hidableParents(parents: Array<any>): Array<any> {
      return _.filter(parents, (parentElement: any) => {
        if (_.isNil(parentElement["attributes"])) {
          return false;
        } else {
          return !_.isNil(parentElement["attributes"]["ng-show"]) || !_.isNil(parentElement["attributes"]["ng-hide"]);
        }
      });
    }
    
    private allParents(element: any): any {
      var p = angular.element(element).parent();
      var allParents = [];
      while (p.length > 0) {
        allParents.push(p[0]);
        p = p.parent();
      }
      
      return allParents;
    }
  
  
    // private parentIsHidden(element: any): boolean {
    //   return !( $(element).closest(".ng-hide") === null || $(element).closest(".ng-hide").length === 0 );
    // }
    
  }
  angular.module("settlementDrafts").service("DOMQueryingService", DOMQueryingService);
}