uicore-ts 1.0.1

package/compiledScripts/UIView.js

@@ -0,0 +1,1533 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIView = void 0;
+const UIColor_1 = require("./UIColor");
+const UICore_1 = require("./UICore");
+const UIDialogView_1 = require("./UIDialogView");
+const UIObject_1 = require("./UIObject");
+const UIPoint_1 = require("./UIPoint");
+const UIRectangle_1 = require("./UIRectangle");
+require("./UICoreExtensions");
+class UIView extends UIObject_1.UIObject {
+    constructor(elementID = ("UIView" +
+        UIView.nextIndex), viewHTMLElement = null, elementType = null, initViewData) {
+        super();
+        this._nativeSelectionEnabled = UIObject_1.YES;
+        this._enabled = UIObject_1.YES;
+        this._backgroundColor = UIColor_1.UIColor.transparentColor;
+        this._localizedTextObject = UIObject_1.nil;
+        this._controlEventTargets = {}; //{ "PointerDown": Function[]; "PointerMove": Function[]; "PointerLeave": Function[]; "PointerEnter": Function[]; "PointerUpInside": Function[]; "PointerUp": Function[]; "PointerHover": Function[]; };
+        this._viewControllerLayoutFunction = UIObject_1.nil;
+        this._isHidden = UIObject_1.NO;
+        this.pausesPointerEvents = UIObject_1.NO;
+        this.stopsPointerEventPropagation = UIObject_1.YES;
+        this._pointerDragThreshold = 2;
+        this.ignoresTouches = UIObject_1.NO;
+        this.ignoresMouse = UIObject_1.NO;
+        this.forceIntrinsicSizeZero = UIObject_1.NO;
+        this.controlEvent = UIView.controlEvent;
+        this._class = UIView;
+        this.superclass = UIObject_1.UIObject;
+        // Instance variables
+        UIView._UIViewIndex = UIView.nextIndex;
+        this._UIViewIndex = UIView._UIViewIndex;
+        this._styleClasses = [];
+        // Object.defineProperty(this, "styleClasses", { get: this.styleClasses, set: this.setStyleClasses });
+        // Object.defineProperty(this, "styleClassName", { get: this.styleClassName });
+        this._initViewHTMLElement(elementID, viewHTMLElement, elementType);
+        this.subviews = [];
+        this.superview = UIObject_1.nil;
+        // Object.defineProperty(this, "elementID", { get: this.elementID });
+        // Object.defineProperty(this, "constraints", { get: this.constraints, set: this.setConstraints });
+        this._constraints = [];
+        this._updateLayoutFunction = UIObject_1.nil;
+        //Object.defineProperty(this, "backgroundColor", { get: this.backgroundColor, set: this.setBackgroundColor });
+        //this.backgroundColor = "transparent";
+        // Object.defineProperty(this, "alpha", { get: this.alpha, set: this.setAlpha });
+        // Object.defineProperty(this, "frame", { get: this.frame, set: this.setFrame });
+        // Object.defineProperty(this, "bounds", { get: this.bounds, set: this.setBounds });
+        // Object.defineProperty(this, "userInteractionEnabled", { get: this.userInteractionEnabled, set: this.setUserInteractionEnabled });
+        // this._controlEventTargets = {
+        //     "PointerDown": [],
+        //     "PointerMove": [],
+        //     "PointerLeave": [],
+        //     "PointerEnter": [],
+        //     "PointerUpInside": [],
+        //     "PointerUp": [],
+        //     "PointerHover": []
+        // }
+        this._didLayoutSubviewsDelegateFunction = function () {
+        };
+        this._frameTransform = "";
+        this.initView(this.viewHTMLElement.id, this.viewHTMLElement, initViewData);
+        this._initViewCSSSelectorsIfNeeded();
+        this._loadUIEvents();
+        this.setNeedsLayout();
+    }
+    static get nextIndex() {
+        return UIView._UIViewIndex + 1;
+    }
+    static get pageHeight() {
+        const body = document.body;
+        const html = document.documentElement;
+        const height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
+        return height;
+    }
+    static get pageWidth() {
+        const body = document.body;
+        const html = document.documentElement;
+        const width = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);
+        return width;
+    }
+    initView(elementID, viewHTMLElement, initViewData) {
+    }
+    centerInContainer() {
+        this.style.left = "50%";
+        this.style.top = "50%";
+        this.style.transform = "translateX(-50%) translateY(-50%)";
+    }
+    centerXInContainer() {
+        this.style.left = "50%";
+        this.style.transform = "translateX(-50%)";
+    }
+    centerYInContainer() {
+        this.style.top = "50%";
+        this.style.transform = "translateY(-50%)";
+    }
+    _initViewHTMLElement(elementID, viewHTMLElement, elementType = "div") {
+        if (!(0, UIObject_1.IS)(elementType)) {
+            elementType = "div";
+        }
+        if (!(0, UIObject_1.IS)(viewHTMLElement)) {
+            this._viewHTMLElement = this.createElement(elementID, elementType);
+            this.style.position = "absolute";
+            this.style.margin = "0";
+        }
+        else {
+            this._viewHTMLElement = viewHTMLElement;
+        }
+        if ((0, UIObject_1.IS)(elementID)) {
+            this.viewHTMLElement.id = elementID;
+        }
+        this.viewHTMLElement.obeyAutolayout = UIObject_1.YES;
+        this.viewHTMLElement.UIView = this;
+        this.addStyleClass(this.styleClassName);
+    }
+    set nativeSelectionEnabled(selectable) {
+        this._nativeSelectionEnabled = selectable;
+        if (!selectable) {
+            this.style.cssText = this.style.cssText +
+                " -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;";
+        }
+        else {
+            this.style.cssText = this.style.cssText +
+                " -webkit-touch-callout: text; -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;";
+        }
+    }
+    get nativeSelectionEnabled() {
+        return this._nativeSelectionEnabled;
+    }
+    get styleClassName() {
+        const result = "UICore_UIView_" + this.class.name;
+        return result;
+    }
+    _initViewCSSSelectorsIfNeeded() {
+        if (!this.class._areViewCSSSelectorsInitialized) {
+            this.initViewStyleSelectors();
+            this.class._areViewCSSSelectorsInitialized = UIObject_1.YES;
+        }
+    }
+    initViewStyleSelectors() {
+        // Override this in a subclass
+    }
+    initStyleSelector(selector, style) {
+        const styleRules = UIView.getStyleRules(selector);
+        if (!styleRules) {
+            UIView.createStyleSelector(selector, style);
+        }
+    }
+    createElement(elementID, elementType) {
+        var result = document.getElementById(elementID);
+        if (!result) {
+            result = document.createElement(elementType);
+        }
+        return result;
+    }
+    get viewHTMLElement() {
+        return this._viewHTMLElement;
+    }
+    get elementID() {
+        return this.viewHTMLElement.id;
+    }
+    setInnerHTML(key, defaultString, parameters) {
+        this._innerHTMLKey = key;
+        this._defaultInnerHTML = defaultString;
+        this._parameters = parameters;
+        const languageName = UICore_1.UICore.languageService.currentLanguageKey;
+        const result = UICore_1.UICore.languageService.stringForKey(key, languageName, defaultString, parameters);
+        this.innerHTML = result;
+    }
+    _setInnerHTMLFromKeyIfPossible() {
+        if (this._innerHTMLKey && this._defaultInnerHTML) {
+            this.setInnerHTML(this._innerHTMLKey, this._defaultInnerHTML, this._parameters);
+        }
+    }
+    _setInnerHTMLFromLocalizedTextObjectIfPossible() {
+        if ((0, UIObject_1.IS)(this._localizedTextObject)) {
+            this.innerHTML = UICore_1.UICore.languageService.stringForCurrentLanguage(this._localizedTextObject);
+        }
+    }
+    get localizedTextObject() {
+        return this._localizedTextObject;
+    }
+    set localizedTextObject(localizedTextObject) {
+        this._localizedTextObject = localizedTextObject;
+        this._setInnerHTMLFromLocalizedTextObjectIfPossible();
+    }
+    get innerHTML() {
+        return this.viewHTMLElement.innerHTML;
+    }
+    set innerHTML(innerHTML) {
+        if (this.innerHTML != innerHTML) {
+            this.viewHTMLElement.innerHTML = (0, UIObject_1.FIRST)(innerHTML, "");
+        }
+    }
+    set hoverText(hoverText) {
+        this.viewHTMLElement.setAttribute("title", hoverText);
+    }
+    get hoverText() {
+        return this.viewHTMLElement.getAttribute("title");
+    }
+    get scrollSize() {
+        const result = new UIRectangle_1.UIRectangle(0, 0, this.viewHTMLElement.scrollHeight, this.viewHTMLElement.scrollWidth);
+        return result;
+    }
+    get dialogView() {
+        if (!(0, UIObject_1.IS)(this.superview)) {
+            return UIObject_1.nil;
+        }
+        if (!(this instanceof UIDialogView_1.UIDialogView)) {
+            return this.superview.dialogView;
+        }
+        return this;
+    }
+    get rootView() {
+        if ((0, UIObject_1.IS)(this.superview)) {
+            return this.superview.rootView;
+        }
+        return this;
+    }
+    set enabled(enabled) {
+        this._enabled = enabled;
+        this.updateContentForCurrentEnabledState();
+    }
+    get enabled() {
+        return this._enabled;
+    }
+    updateContentForCurrentEnabledState() {
+        this.hidden = !this.enabled;
+        this.userInteractionEnabled = this.enabled;
+    }
+    get tabIndex() {
+        return Number(this.viewHTMLElement.getAttribute("tabindex"));
+    }
+    set tabIndex(index) {
+        this.viewHTMLElement.setAttribute("tabindex", "" + index);
+    }
+    get styleClasses() {
+        return this._styleClasses;
+    }
+    set styleClasses(styleClasses) {
+        this._styleClasses = styleClasses;
+    }
+    hasStyleClass(styleClass) {
+        // This is for performance reasons
+        if (!(0, UIObject_1.IS)(styleClass)) {
+            return UIObject_1.NO;
+        }
+        const index = this.styleClasses.indexOf(styleClass);
+        if (index > -1) {
+            return UIObject_1.YES;
+        }
+        return UIObject_1.NO;
+    }
+    addStyleClass(styleClass) {
+        if (!(0, UIObject_1.IS)(styleClass)) {
+            return;
+        }
+        if (!this.hasStyleClass(styleClass)) {
+            this._styleClasses.push(styleClass);
+        }
+    }
+    removeStyleClass(styleClass) {
+        // This is for performance reasons
+        if (!(0, UIObject_1.IS)(styleClass)) {
+            return;
+        }
+        const index = this.styleClasses.indexOf(styleClass);
+        if (index > -1) {
+            this.styleClasses.splice(index, 1);
+        }
+    }
+    static findViewWithElementID(elementID) {
+        const viewHTMLElement = document.getElementById(elementID);
+        if ((0, UIObject_1.IS_NOT)(viewHTMLElement)) {
+            return UIObject_1.nil;
+        }
+        // @ts-ignore
+        const result = viewHTMLElement.UIView;
+        return result;
+    }
+    static createStyleSelector(selector, style) {
+        return;
+        // @ts-ignore
+        if (!document.styleSheets) {
+            return;
+        }
+        if (document.getElementsByTagName("head").length == 0) {
+            return;
+        }
+        var styleSheet;
+        var mediaType;
+        if (document.styleSheets.length > 0) {
+            for (var i = 0, l = document.styleSheets.length; i < l; i++) {
+                if (document.styleSheets[i].disabled) {
+                    continue;
+                }
+                const media = document.styleSheets[i].media;
+                mediaType = typeof media;
+                if (mediaType === "string") {
+                    if (media === "" || (media.indexOf("screen") !== -1)) {
+                        styleSheet = document.styleSheets[i];
+                    }
+                }
+                else if (mediaType == "object") {
+                    if (media.mediaText === "" || (media.mediaText.indexOf("screen") !== -1)) {
+                        styleSheet = document.styleSheets[i];
+                    }
+                }
+                if (typeof styleSheet !== "undefined") {
+                    break;
+                }
+            }
+        }
+        if (typeof styleSheet === "undefined") {
+            const styleSheetElement = document.createElement("style");
+            styleSheetElement.type = "text/css";
+            document.getElementsByTagName("head")[0].appendChild(styleSheetElement);
+            for (i = 0; i < document.styleSheets.length; i++) {
+                if (document.styleSheets[i].disabled) {
+                    continue;
+                }
+                styleSheet = document.styleSheets[i];
+            }
+            mediaType = typeof styleSheet.media;
+        }
+        if (mediaType === "string") {
+            for (var i = 0, l = styleSheet.rules.length; i < l; i++) {
+                if (styleSheet.rules[i].selectorText && styleSheet.rules[i].selectorText.toLowerCase() ==
+                    selector.toLowerCase()) {
+                    styleSheet.rules[i].style.cssText = style;
+                    return;
+                }
+            }
+            styleSheet.addRule(selector, style);
+        }
+        else if (mediaType === "object") {
+            var styleSheetLength = 0;
+            try {
+                styleSheetLength = (styleSheet.cssRules) ? styleSheet.cssRules.length : 0;
+            }
+            catch (error) {
+            }
+            for (var i = 0; i < styleSheetLength; i++) {
+                if (styleSheet.cssRules[i].selectorText && styleSheet.cssRules[i].selectorText.toLowerCase() ==
+                    selector.toLowerCase()) {
+                    styleSheet.cssRules[i].style.cssText = style;
+                    return;
+                }
+            }
+            styleSheet.insertRule(selector + "{" + style + "}", styleSheetLength);
+        }
+    }
+    static getStyleRules(selector) {
+        var selector = selector.toLowerCase();
+        for (var i = 0; i < document.styleSheets.length; i++) {
+            const styleSheet = document.styleSheets[i];
+            var styleRules;
+            try {
+                styleRules = styleSheet.cssRules ? styleSheet.cssRules : styleSheet.rules;
+            }
+            catch (error) {
+            }
+            return styleRules;
+        }
+    }
+    get style() {
+        return this.viewHTMLElement.style;
+    }
+    get computedStyle() {
+        return getComputedStyle(this.viewHTMLElement);
+    }
+    get hidden() {
+        return this._isHidden;
+    }
+    set hidden(v) {
+        this._isHidden = v;
+        if (this._isHidden) {
+            this.style.visibility = "hidden";
+        }
+        else {
+            this.style.visibility = "visible";
+        }
+    }
+    static set pageScale(scale) {
+        UIView._pageScale = scale;
+        const zoom = scale;
+        const width = 100 / zoom;
+        const viewHTMLElement = UICore_1.UICore.main.rootViewController.view.viewHTMLElement;
+        viewHTMLElement.style.transformOrigin = "left top";
+        viewHTMLElement.style.transform = "scale(" + zoom + ")";
+        viewHTMLElement.style.width = width + "%";
+    }
+    static get pageScale() {
+        return UIView._pageScale;
+    }
+    calculateAndSetViewFrame() {
+        // Use this method to calculate the frame for the view itself
+        // This can be used when adding subviews to existing views like buttons
+    }
+    get frame() {
+        // var result = new UIRectangle(1 * this.viewHTMLElement.offsetLeft, 1 * this.viewHTMLElement.offsetTop, 1 * this.viewHTMLElement.offsetHeight, 1 * this.viewHTMLElement.offsetWidth);
+        // result.zIndex = 1 * this.style.zIndex;
+        var result = this._frame;
+        if (!result) {
+            result = new UIRectangle_1.UIRectangle(1 * this.viewHTMLElement.offsetLeft, 1 * this.viewHTMLElement.offsetTop, 1 *
+                this.viewHTMLElement.offsetHeight, 1 * this.viewHTMLElement.offsetWidth);
+            result.zIndex = 0;
+        }
+        return result.copy();
+    }
+    set frame(rectangle) {
+        if ((0, UIObject_1.IS)(rectangle)) {
+            this.setFrame(rectangle);
+        }
+    }
+    setFrame(rectangle, zIndex = 0, performUncheckedLayout = UIObject_1.NO) {
+        const frame = this._frame || new UIRectangle_1.UIRectangle(UIObject_1.nil, UIObject_1.nil, UIObject_1.nil, UIObject_1.nil);
+        if (zIndex != undefined) {
+            rectangle.zIndex = zIndex;
+        }
+        this._frame = rectangle;
+        // This is useless because frames are copied
+        // frame.didChange = function () {
+        //     // Do nothing
+        // }
+        // rectangle.didChange = function () {
+        //     this.frame = rectangle;
+        // }.bind(this);
+        if (frame && frame.isEqualTo(rectangle) && !performUncheckedLayout) {
+            return;
+        }
+        UIView._setAbsoluteSizeAndPosition(this.viewHTMLElement, rectangle.topLeft.x, rectangle.topLeft.y, rectangle.width, rectangle.height, rectangle.zIndex);
+        if (frame.height != rectangle.height || frame.width != rectangle.width || performUncheckedLayout) {
+            this.setNeedsLayout();
+            this.boundsDidChange();
+            //this.layoutSubviews();
+        }
+    }
+    get bounds() {
+        var result;
+        // if (IS_NOT(this._frame) && this.style.height == "" && this.style.width  == "" && this.style.left == "" && this.style.right == "" && this.style.bottom == "" && this.style.top == "") {
+        //     result = new UIRectangle(0, 0, 0, 0)
+        // }
+        // else
+        if ((0, UIObject_1.IS_NOT)(this._frame)) {
+            result = new UIRectangle_1.UIRectangle(0, 0, 1 * this.viewHTMLElement.offsetHeight, 1 * this.viewHTMLElement.offsetWidth);
+        }
+        else {
+            result = this.frame.copy();
+            result.x = 0;
+            result.y = 0;
+        }
+        return result;
+    }
+    set bounds(rectangle) {
+        const frame = this.frame;
+        this.frame = new UIRectangle_1.UIRectangle(frame.topLeft.x, frame.topLeft.y, rectangle.height, rectangle.width);
+    }
+    boundsDidChange() {
+    }
+    setPosition(left = UIObject_1.nil, right = UIObject_1.nil, bottom = UIObject_1.nil, top = UIObject_1.nil, height = UIObject_1.nil, width = UIObject_1.nil) {
+        const previousBounds = this.bounds;
+        this.setStyleProperty("left", left);
+        this.setStyleProperty("right", right);
+        this.setStyleProperty("bottom", bottom);
+        this.setStyleProperty("top", top);
+        this.setStyleProperty("height", height);
+        this.setStyleProperty("width", width);
+        const bounds = this.bounds;
+        if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
+            this.setNeedsLayout();
+            this.boundsDidChange();
+        }
+    }
+    setSizes(height, width) {
+        const previousBounds = this.bounds;
+        this.setStyleProperty("height", height);
+        this.setStyleProperty("width", width);
+        const bounds = this.bounds;
+        if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
+            this.setNeedsLayout();
+            this.boundsDidChange();
+        }
+    }
+    setMinSizes(height, width) {
+        const previousBounds = this.bounds;
+        this.setStyleProperty("minHeight", height);
+        this.setStyleProperty("minWidth", width);
+        const bounds = this.bounds;
+        if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
+            this.setNeedsLayout();
+            this.boundsDidChange();
+        }
+    }
+    setMaxSizes(height, width) {
+        const previousBounds = this.bounds;
+        this.setStyleProperty("maxHeight", height);
+        this.setStyleProperty("maxWidth", width);
+        const bounds = this.bounds;
+        if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
+            this.setNeedsLayout();
+            this.boundsDidChange();
+        }
+    }
+    setMargin(margin) {
+        const previousBounds = this.bounds;
+        this.setStyleProperty("margin", margin);
+        const bounds = this.bounds;
+        if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
+            this.setNeedsLayout();
+            this.boundsDidChange();
+        }
+    }
+    setMargins(left, right, bottom, top) {
+        const previousBounds = this.bounds;
+        this.setStyleProperty("marginLeft", left);
+        this.setStyleProperty("marginRight", right);
+        this.setStyleProperty("marginBottom", bottom);
+        this.setStyleProperty("marginTop", top);
+        const bounds = this.bounds;
+        if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
+            this.setNeedsLayout();
+            this.boundsDidChange();
+        }
+    }
+    setPadding(padding) {
+        const previousBounds = this.bounds;
+        this.setStyleProperty("padding", padding);
+        const bounds = this.bounds;
+        if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
+            this.setNeedsLayout();
+            this.boundsDidChange();
+        }
+    }
+    setPaddings(left, right, bottom, top) {
+        const previousBounds = this.bounds;
+        this.setStyleProperty("paddingLeft", left);
+        this.setStyleProperty("paddingRight", right);
+        this.setStyleProperty("paddingBottom", bottom);
+        this.setStyleProperty("paddingTop", top);
+        const bounds = this.bounds;
+        if (bounds.height != previousBounds.height || bounds.width != previousBounds.width) {
+            this.setNeedsLayout();
+            this.boundsDidChange();
+        }
+    }
+    setBorder(radius = UIObject_1.nil, width = 1, color = UIColor_1.UIColor.blackColor, style = "solid") {
+        this.setStyleProperty("borderStyle", style);
+        this.setStyleProperty("borderRadius", radius);
+        this.setStyleProperty("borderColor", color.stringValue);
+        this.setStyleProperty("borderWidth", width);
+    }
+    setStyleProperty(propertyName, value) {
+        try {
+            if ((0, UIObject_1.IS_NIL)(value)) {
+                return;
+            }
+            if ((0, UIObject_1.IS_DEFINED)(value) && value.isANumber) {
+                value = "" + value.integerValue + "px";
+            }
+            this.style[propertyName] = value;
+        }
+        catch (exception) {
+            console.log(exception);
+        }
+    }
+    get userInteractionEnabled() {
+        const result = (this.style.pointerEvents != "none");
+        return result;
+    }
+    set userInteractionEnabled(userInteractionEnabled) {
+        if (userInteractionEnabled) {
+            this.style.pointerEvents = "";
+        }
+        else {
+            this.style.pointerEvents = "none";
+        }
+    }
+    get backgroundColor() {
+        return this._backgroundColor;
+    }
+    set backgroundColor(backgroundColor) {
+        this._backgroundColor = backgroundColor;
+        this.style.backgroundColor = backgroundColor.stringValue;
+    }
+    get alpha() {
+        return 1 * this.style.opacity;
+    }
+    set alpha(alpha) {
+        this.style.opacity = "" + alpha;
+    }
+    static animateViewOrViewsWithDurationDelayAndFunction(viewOrViews, duration, delay, timingStyle = "cubic-bezier(0.25,0.1,0.25,1)", transformFunction, transitioncompletionFunction) {
+        function callTransitioncompletionFunction() {
+            (transitioncompletionFunction || UIObject_1.nil)();
+            viewOrViews.forEach(function (view, index, array) {
+                view.animationDidFinish();
+            });
+        }
+        if (UICore_1.IS_FIREFOX) {
+            // Firefox does not fire the transition completion event properly
+            new UIObject_1.UIObject().performFunctionWithDelay(delay + duration, callTransitioncompletionFunction);
+        }
+        if (!(viewOrViews instanceof Array)) {
+            viewOrViews = [viewOrViews];
+        }
+        const transitionStyles = [];
+        const transitionDurations = [];
+        const transitionDelays = [];
+        const transitionTimings = [];
+        for (var i = 0; i < viewOrViews.length; i++) {
+            var view = viewOrViews[i];
+            if (view.viewHTMLElement) {
+                view = view.viewHTMLElement;
+            }
+            view.addEventListener("transitionend", transitionDidFinish, true);
+            transitionStyles.push(view.style.transition);
+            transitionDurations.push(view.style.transitionDuration);
+            transitionDelays.push(view.style.transitionDelay);
+            transitionTimings.push(view.style.transitionTimingFunction);
+            view.style.transition = "all";
+            view.style.transitionDuration = "" + duration + "s";
+            view.style.transitionDelay = "" + delay + "s";
+            view.style.transitionTimingFunction = timingStyle;
+        }
+        transformFunction();
+        const transitionObject = {
+            "finishImmediately": finishTransitionImmediately,
+            "didFinish": transitionDidFinishManually,
+            "views": viewOrViews,
+            "registrationTime": Date.now()
+        };
+        function finishTransitionImmediately() {
+            for (var i = 0; i < viewOrViews.length; i++) {
+                var view = viewOrViews[i];
+                if (view.viewHTMLElement) {
+                    view = view.viewHTMLElement;
+                }
+                view.style.transition = "all";
+                view.style.transitionDuration = "" + duration + "s";
+                view.style.transitionDelay = "" + delay + "s";
+                view.style.transition = transitionStyles[i];
+                view.style.transitionDuration = transitionDurations[i];
+                view.style.transitionDelay = transitionDelays[i];
+                view.style.transitionTimingFunction = transitionTimings[i];
+            }
+        }
+        function transitionDidFinish(event) {
+            var view = event.srcElement;
+            if (!view) {
+                return;
+            }
+            if (view.viewHTMLElement) {
+                view = view.viewHTMLElement;
+            }
+            view.style.transition = transitionStyles[i];
+            view.style.transitionDuration = transitionDurations[i];
+            view.style.transitionDelay = transitionDelays[i];
+            view.style.transitionTimingFunction = transitionTimings[i];
+            callTransitioncompletionFunction();
+            view.removeEventListener("transitionend", transitionDidFinish, true);
+        }
+        function transitionDidFinishManually() {
+            for (var i = 0; i < viewOrViews.length; i++) {
+                var view = viewOrViews[i];
+                if (view.viewHTMLElement) {
+                    view = view.viewHTMLElement;
+                }
+                view.style.transition = transitionStyles[i];
+                view.style.transitionDuration = transitionDurations[i];
+                view.style.transitionDelay = transitionDelays[i];
+                view.style.transitionTimingFunction = transitionTimings[i];
+                view.removeEventListener("transitionend", transitionDidFinish, true);
+            }
+        }
+        return transitionObject;
+    }
+    animationDidFinish() {
+    }
+    static _setAbsoluteSizeAndPosition(element, left, top, width, height, zIndex = 0) {
+        // if (!UIView._transformAttribute) {
+        //     UIView._transformAttribute = (('transform' in document.documentElement.style) ? 'transform' : undefined);
+        //     UIView._transformAttribute = UIView._transformAttribute || (('-webkit-transform' in document.documentElement.style) ? '-webkit-transform' : 'undefined');
+        //     UIView._transformAttribute = UIView._transformAttribute || (('-moz-transform' in document.documentElement.style) ? '-moz-transform' : 'undefined');
+        //     UIView._transformAttribute = UIView._transformAttribute || (('-ms-transform' in document.documentElement.style) ? '-ms-transform' : 'undefined');
+        //     UIView._transformAttribute = UIView._transformAttribute || (('-o-transform' in document.documentElement.style) ? '-o-transform' : 'undefined');
+        // }
+        if (!(0, UIObject_1.IS)(element) || !element.obeyAutolayout && !element.getAttribute("obeyAutolayout")) {
+            return;
+        }
+        if (element.id == "mainView") {
+            var asd = 1;
+        }
+        if ((0, UIObject_1.IS)(height)) {
+            height = height.integerValue + "px";
+        }
+        if ((0, UIObject_1.IS)(width)) {
+            width = width.integerValue + "px";
+        }
+        var str = element.style.cssText;
+        const frameTransform = UIView._transformAttribute + ": translate3d(" + (1 * left).integerValue + "px, " +
+            (1 * top).integerValue + "px, " + zIndex.integerValue + "px)";
+        if (element.UIView) {
+            str = str + frameTransform + ";";
+        }
+        else {
+            element.UIView._frameTransform = frameTransform;
+        }
+        if (height == UIObject_1.nil) {
+            str = str + " height: unset;";
+        }
+        else {
+            str = str + " height:" + height + ";";
+        }
+        if (width == UIObject_1.nil) {
+            str = str + " width: unset;";
+        }
+        else {
+            str = str + " width:" + width + ";";
+        }
+        if (element.id == "mainView") {
+            var asd = 1;
+        }
+        element.style.cssText = element.style.cssText + str;
+    }
+    static performAutoLayout(parentElement, visualFormatArray, constraintsArray) {
+        const view = new AutoLayout.View();
+        if ((0, UIObject_1.IS)(visualFormatArray) && (0, UIObject_1.IS)(visualFormatArray.length)) {
+            view.addConstraints(AutoLayout.VisualFormat.parse(visualFormatArray, { extended: true }));
+        }
+        if ((0, UIObject_1.IS)(constraintsArray) && (0, UIObject_1.IS)(constraintsArray.length)) {
+            view.addConstraints(constraintsArray);
+        }
+        const elements = {};
+        for (var key in view.subViews) {
+            if (!view.subViews.hasOwnProperty(key)) {
+                continue;
+            }
+            var element = UIObject_1.nil;
+            try {
+                element = parentElement.querySelector("#" + key);
+            }
+            catch (error) {
+                //console.log("Error occurred " + error);
+            }
+            if (element && !element.obeyAutolayout && !element.getAttribute("obeyAutolayout")) {
+            }
+            else if (element) {
+                element.className += element.className ? " abs" : "abs";
+                elements[key] = element;
+            }
+        }
+        var parentUIView = UIObject_1.nil;
+        if (parentElement.UIView) {
+            parentUIView = parentElement.UIView;
+        }
+        const updateLayout = function () {
+            view.setSize(parentElement ? parentElement.clientWidth : window.innerWidth, parentElement ? parentElement.clientHeight : window.innerHeight);
+            for (key in view.subViews) {
+                if (!view.subViews.hasOwnProperty(key)) {
+                    continue;
+                }
+                const subView = view.subViews[key];
+                if (elements[key]) {
+                    UIView._setAbsoluteSizeAndPosition(elements[key], subView.left, subView.top, subView.width, subView.height);
+                }
+            }
+            parentUIView.didLayoutSubviews();
+        };
+        updateLayout();
+        return updateLayout;
+    }
+    static runFunctionBeforeNextFrame(step) {
+        if (UICore_1.IS_SAFARI) {
+            // This creates a microtask
+            Promise.resolve().then(step);
+        }
+        else {
+            window.requestAnimationFrame(step);
+        }
+    }
+    static scheduleLayoutViewsIfNeeded() {
+        UIView.runFunctionBeforeNextFrame(UIView.layoutViewsIfNeeded);
+    }
+    static layoutViewsIfNeeded() {
+        for (var i = 0; i < UIView._viewsToLayout.length; i++) {
+            const view = UIView._viewsToLayout[i];
+            view.layoutIfNeeded();
+        }
+        UIView._viewsToLayout = [];
+    }
+    setNeedsLayout() {
+        if (this._shouldLayout) {
+            return;
+        }
+        this._shouldLayout = UIObject_1.YES;
+        // Register view for layout before next frame
+        UIView._viewsToLayout.push(this);
+        if (UIView._viewsToLayout.length == 1) {
+            UIView.scheduleLayoutViewsIfNeeded();
+        }
+    }
+    get needsLayout() {
+        return this._shouldLayout;
+    }
+    layoutIfNeeded() {
+        if (!this._shouldLayout) {
+            return;
+        }
+        this._shouldLayout = UIObject_1.NO;
+        try {
+            this.layoutSubviews();
+        }
+        catch (exception) {
+            console.log(exception);
+        }
+    }
+    layoutSubviews() {
+        this._shouldLayout = UIObject_1.NO;
+        // Autolayout
+        //window.removeEventListener('resize', this._updateLayoutFunction);
+        if (this.constraints.length) {
+            this._updateLayoutFunction = UIView.performAutoLayout(this.viewHTMLElement, null, this.constraints);
+        }
+        //this._updateLayoutFunction = this.layoutSubviews.bind(this);
+        //window.addEventListener('resize', this._updateLayoutFunction);
+        this._viewControllerLayoutFunction();
+        this.applyClassesAndStyles();
+        for (var i = 0; i < this.subviews.length; i++) {
+            const subview = this.subviews[i];
+            subview.calculateAndSetViewFrame();
+            //subview.layoutSubviews();
+        }
+        this.didLayoutSubviews();
+    }
+    applyClassesAndStyles() {
+        //var classesString = "";
+        for (var i = 0; i < this.styleClasses.length; i++) {
+            const styleClass = this.styleClasses[i];
+            if (styleClass) {
+                this.viewHTMLElement.classList.add(styleClass);
+            }
+            //classesString = classesString + " " + styleClass;
+        }
+        //this.viewHTMLElement.className = classesString;
+    }
+    didLayoutSubviews() {
+        this._didLayoutSubviewsDelegateFunction();
+    }
+    get constraints() {
+        return this._constraints;
+    }
+    set constraints(constraints) {
+        this._constraints = constraints;
+    }
+    addConstraint(constraint) {
+        this.constraints.push(constraint);
+    }
+    addConstraintsWithVisualFormat(visualFormatArray) {
+        this.constraints = this.constraints.concat(AutoLayout.VisualFormat.parse(visualFormatArray, { extended: true }));
+    }
+    static constraintWithView(view, attribute, relation, toView, toAttribute, multiplier, constant, priority) {
+        var UIViewObject = UIObject_1.nil;
+        var viewID = null;
+        if (view) {
+            if (view.isKindOfClass && view.isKindOfClass(UIView)) {
+                UIViewObject = view;
+                view = view.viewHTMLElement;
+            }
+            viewID = view.id;
+        }
+        var toUIViewObject = UIObject_1.nil;
+        var toViewID = null;
+        if (toView) {
+            if (toView.isKindOfClass && view.isKindOfClass(UIView)) {
+                toUIViewObject = toView;
+                toView = toView.viewHTMLElement;
+            }
+            toViewID = toView.id;
+        }
+        const constraint = {
+            view1: viewID,
+            attr1: attribute,
+            relation: relation,
+            view2: toViewID,
+            attr2: toAttribute,
+            multiplier: multiplier,
+            constant: constant,
+            priority: priority
+        };
+        return constraint;
+    }
+    subviewWithID(viewID) {
+        var resultHTMLElement = UIObject_1.nil;
+        try {
+            resultHTMLElement = this.viewHTMLElement.querySelector("#" + viewID);
+        }
+        catch (error) {
+        }
+        if (resultHTMLElement && resultHTMLElement.UIView) {
+            return resultHTMLElement.UIView;
+        }
+        return UIObject_1.nil;
+    }
+    rectangleContainingSubviews() {
+        const center = this.bounds.center;
+        var result = new UIRectangle_1.UIRectangle(center.x, center.y, 0, 0);
+        for (var i = 0; i < this.subviews.length; i++) {
+            const subview = this.subviews[i];
+            var frame = subview.frame;
+            const rectangleContainingSubviews = subview.rectangleContainingSubviews();
+            frame = frame.concatenateWithRectangle(rectangleContainingSubviews);
+            result = result.concatenateWithRectangle(frame);
+        }
+        return result;
+    }
+    hasSubview(view) {
+        // This is for performance reasons
+        if (!(0, UIObject_1.IS)(view)) {
+            return UIObject_1.NO;
+        }
+        for (var i = 0; i < this.subviews.length; i++) {
+            const subview = this.subviews[i];
+            if (subview == view) {
+                return UIObject_1.YES;
+            }
+        }
+        return UIObject_1.NO;
+    }
+    get viewBelowThisView() {
+        const result = (this.viewHTMLElement.previousElementSibling || {}).UIView;
+        return result;
+    }
+    get viewAboveThisView() {
+        const result = (this.viewHTMLElement.nextElementSibling || {}).UIView;
+        return result;
+    }
+    addSubview(view, aboveView) {
+        if (!this.hasSubview(view) && (0, UIObject_1.IS)(view)) {
+            view.willMoveToSuperview(this);
+            if ((0, UIObject_1.IS)(aboveView)) {
+                this.viewHTMLElement.insertBefore(view.viewHTMLElement, aboveView.viewHTMLElement.nextSibling);
+                this.subviews.insertElementAtIndex(this.subviews.indexOf(aboveView), view);
+            }
+            else {
+                this.viewHTMLElement.appendChild(view.viewHTMLElement);
+                this.subviews.push(view);
+            }
+            view.didMoveToSuperview(this);
+            if (this.superview && this.isMemberOfViewTree) {
+                view.broadcastEventInSubtree({
+                    name: UIView.broadcastEventName.AddedToViewTree,
+                    parameters: UIObject_1.nil
+                });
+            }
+            this.setNeedsLayout();
+        }
+    }
+    addSubviews(views) {
+        views.forEach(function (view, index, array) {
+            this.addSubview(view);
+        }, this);
+    }
+    moveToBottomOfSuperview() {
+        if ((0, UIObject_1.IS)(this.superview)) {
+            const bottomView = this.superview.subviews.firstElement;
+            if (bottomView == this) {
+                return;
+            }
+            this.superview.subviews.removeElement(this);
+            this.superview.subviews.insertElementAtIndex(0, this);
+            this.superview.viewHTMLElement.insertBefore(this.viewHTMLElement, bottomView.viewHTMLElement);
+        }
+    }
+    moveToTopOfSuperview() {
+        if ((0, UIObject_1.IS)(this.superview)) {
+            const topView = this.superview.subviews.lastElement;
+            if (topView == this) {
+                return;
+            }
+            this.superview.subviews.removeElement(this);
+            this.superview.subviews.push(this);
+            this.superview.viewHTMLElement.appendChild(this.viewHTMLElement);
+        }
+    }
+    removeFromSuperview() {
+        if ((0, UIObject_1.IS)(this.superview)) {
+            this.forEachViewInSubtree(function (view) {
+                view.blur();
+            });
+            const index = this.superview.subviews.indexOf(this);
+            if (index > -1) {
+                this.superview.subviews.splice(index, 1);
+                this.superview.viewHTMLElement.removeChild(this.viewHTMLElement);
+                this.superview = UIObject_1.nil;
+                this.broadcastEventInSubtree({
+                    name: UIView.broadcastEventName.RemovedFromViewTree,
+                    parameters: UIObject_1.nil
+                });
+            }
+        }
+    }
+    willAppear() {
+    }
+    willMoveToSuperview(superview) {
+        this._setInnerHTMLFromKeyIfPossible();
+        this._setInnerHTMLFromLocalizedTextObjectIfPossible();
+    }
+    didMoveToSuperview(superview) {
+        this.superview = superview;
+    }
+    wasAddedToViewTree() {
+    }
+    wasRemovedFromViewTree() {
+    }
+    get isMemberOfViewTree() {
+        var element = this.viewHTMLElement;
+        for (var i = 0; element; i = i) {
+            if (element.parentElement && element.parentElement == document.body) {
+                return UIObject_1.YES;
+            }
+            element = element.parentElement;
+        }
+        return UIObject_1.NO;
+    }
+    get allSuperviews() {
+        const result = [];
+        var view = this;
+        for (var i = 0; (0, UIObject_1.IS)(view); i = i) {
+            result.push(view);
+            view = view.superview;
+        }
+        return result;
+    }
+    setNeedsLayoutOnAllSuperviews() {
+        this.allSuperviews.reverse().forEach(function (view, index, array) {
+            view.setNeedsLayout();
+        });
+    }
+    setNeedsLayoutUpToRootView() {
+        this.setNeedsLayoutOnAllSuperviews();
+        this.setNeedsLayout();
+    }
+    focus() {
+        this.viewHTMLElement.focus();
+    }
+    blur() {
+        this.viewHTMLElement.blur();
+    }
+    _loadUIEvents() {
+        //this.viewHTMLElement = nil;
+        const isTouchEventClassDefined = UIObject_1.NO || window.TouchEvent;
+        const pauseEvent = (event, forced = UIObject_1.NO) => {
+            if (this.pausesPointerEvents || forced) {
+                if (event.stopPropagation) {
+                    event.stopPropagation();
+                }
+                if (event.preventDefault) {
+                    event.preventDefault();
+                }
+                event.cancelBubble = true;
+                event.returnValue = false;
+                return false;
+            }
+            if (event.stopPropagation && this.stopsPointerEventPropagation) {
+                event.stopPropagation();
+            }
+        };
+        const onMouseDown = (event) => {
+            if ((this.ignoresTouches && isTouchEventClassDefined && event instanceof TouchEvent) ||
+                ((this.ignoresMouse || ((0, UIObject_1.IS)(this._touchEventTime) && (Date.now() - this._touchEventTime) > 500)) &&
+                    event instanceof MouseEvent)) {
+                return;
+            }
+            this.sendControlEventForKey(UIView.controlEvent.PointerDown, event);
+            this._isPointerInside = UIObject_1.YES;
+            this._isPointerValid = UIObject_1.YES;
+            this._initialPointerPosition = new UIPoint_1.UIPoint(event.clientX, event.clientY);
+            if (isTouchEventClassDefined && event instanceof TouchEvent) {
+                this._touchEventTime = Date.now();
+                this._initialPointerPosition = new UIPoint_1.UIPoint(event.touches[0].clientX, event.touches[0].clientY);
+                if (event.touches.length > 1) {
+                    onTouchCancel(event);
+                    return;
+                }
+            }
+            else {
+                this._touchEventTime = UIObject_1.nil;
+                pauseEvent(event);
+            }
+            this._hasPointerDragged = UIObject_1.NO;
+        };
+        const onTouchStart = onMouseDown;
+        const onmouseup = (event) => {
+            if (!this._isPointerValid) {
+                return;
+            }
+            if ((this.ignoresTouches && isTouchEventClassDefined && event instanceof TouchEvent) ||
+                (this.ignoresMouse && event instanceof MouseEvent)) {
+                return;
+            }
+            if (this._isPointerInside) {
+                onPointerUpInside(event);
+                if (!this._hasPointerDragged) {
+                    this.sendControlEventForKey(UIView.controlEvent.PointerTap, event);
+                }
+            }
+            // This has to be sent after the more specific event so that UIButton can ignore it when not highlighted
+            this.sendControlEventForKey(UIView.controlEvent.PointerUp, event);
+            pauseEvent(event);
+        };
+        const onTouchEnd = onmouseup;
+        // function onMouseEnter(event) {
+        //     this.sendControlEventForKey(UIView.controlEvent.PointerEnter, event);
+        //     this._isPointerInside = YES;
+        //     pauseEvent(event);
+        // }
+        const onmouseout = (event) => {
+            if ((this.ignoresTouches && isTouchEventClassDefined && event instanceof TouchEvent) ||
+                (this.ignoresMouse && event instanceof MouseEvent)) {
+                return;
+            }
+            this.sendControlEventForKey(UIView.controlEvent.PointerLeave, event);
+            this._isPointerInside = UIObject_1.NO;
+            pauseEvent(event);
+        };
+        const onTouchLeave = onmouseout;
+        var onTouchCancel = function (event) {
+            if (!this._isPointerValid) {
+                return;
+            }
+            if ((this.ignoresTouches && isTouchEventClassDefined && event instanceof TouchEvent) ||
+                (this.ignoresMouse && event instanceof MouseEvent)) {
+                return;
+            }
+            this._isPointerValid = UIObject_1.NO;
+            this.sendControlEventForKey(UIView.controlEvent.PointerCancel, event);
+        }.bind(this);
+        const onmouseover = (event) => {
+            if ((this.ignoresTouches && isTouchEventClassDefined && event instanceof TouchEvent) ||
+                (this.ignoresMouse && event instanceof MouseEvent)) {
+                return;
+            }
+            this.sendControlEventForKey(UIView.controlEvent.PointerHover, event);
+            this._isPointerInside = UIObject_1.YES;
+            this._isPointerValid = UIObject_1.YES;
+            pauseEvent(event);
+        };
+        const onMouseMove = (event) => {
+            if (!this._isPointerValid) {
+                return;
+            }
+            if ((this.ignoresTouches && isTouchEventClassDefined && event instanceof TouchEvent) ||
+                (this.ignoresMouse && event instanceof MouseEvent)) {
+                return;
+            }
+            if ((0, UIObject_1.IS_NOT)(this._initialPointerPosition)) {
+                this._initialPointerPosition = new UIPoint_1.UIPoint(event.clientX, event.clientY);
+            }
+            if (new UIPoint_1.UIPoint(event.clientX, event.clientY).to(this._initialPointerPosition).length >
+                this._pointerDragThreshold) {
+                this._hasPointerDragged = UIObject_1.YES;
+            }
+            this.sendControlEventForKey(UIView.controlEvent.PointerMove, event);
+            pauseEvent(event);
+        };
+        const onTouchMove = function (event) {
+            if (!this._isPointerValid) {
+                return;
+            }
+            if ((this.ignoresTouches && isTouchEventClassDefined && event instanceof TouchEvent) ||
+                (this.ignoresMouse && event instanceof MouseEvent)) {
+                return;
+            }
+            if (event.touches.length > 1) {
+                onTouchZoom(event);
+                return;
+            }
+            const touch = event.touches[0];
+            if (new UIPoint_1.UIPoint(touch.clientX, touch.clientY).to(this._initialPointerPosition).length >
+                this._pointerDragThreshold) {
+                this._hasPointerDragged = UIObject_1.YES;
+            }
+            if (this._isPointerInside && this.viewHTMLElement !=
+                document.elementFromPoint(touch.clientX, touch.clientY)) {
+                this._isPointerInside = UIObject_1.NO;
+                this.sendControlEventForKey(UIView.controlEvent.PointerLeave, event);
+            }
+            this.sendControlEventForKey(UIView.controlEvent.PointerMove, event);
+            //pauseEvent(event);
+        };
+        var onTouchZoom = function onTouchZoom(event) {
+            this.sendControlEventForKey(UIView.controlEvent.MultipleTouches, event);
+        }.bind(this);
+        var onPointerUpInside = (event) => {
+            pauseEvent(event);
+            this.sendControlEventForKey(UIView.controlEvent.PointerUpInside, event);
+        };
+        function eventKeyIsEnter(event) {
+            if (event.keyCode !== 13) {
+                return UIObject_1.NO;
+            }
+            return UIObject_1.YES;
+        }
+        function eventKeyIsTab(event) {
+            if (event.keyCode !== 9) {
+                return UIObject_1.NO;
+            }
+            return UIObject_1.YES;
+        }
+        function eventKeyIsEsc(event) {
+            var result = false;
+            if ("key" in event) {
+                result = (event.key == "Escape" || event.key == "Esc");
+            }
+            else {
+                result = (event.keyCode == 27);
+            }
+            return result;
+        }
+        function eventKeyIsLeft(event) {
+            if (event.keyCode != "37") {
+                return UIObject_1.NO;
+            }
+            return UIObject_1.YES;
+        }
+        function eventKeyIsRight(event) {
+            if (event.keyCode != "39") {
+                return UIObject_1.NO;
+            }
+            return UIObject_1.YES;
+        }
+        function eventKeyIsDown(event) {
+            if (event.keyCode != "40") {
+                return UIObject_1.NO;
+            }
+            return UIObject_1.YES;
+        }
+        function eventKeyIsUp(event) {
+            if (event.keyCode != "38") {
+                return UIObject_1.NO;
+            }
+            return UIObject_1.YES;
+        }
+        const onKeyDown = function (event) {
+            if (eventKeyIsEnter(event)) {
+                this.sendControlEventForKey(UIView.controlEvent.EnterDown, event);
+            }
+            if (eventKeyIsEsc(event)) {
+                this.sendControlEventForKey(UIView.controlEvent.EscDown, event);
+            }
+            if (eventKeyIsTab(event) && this._controlEventTargets.TabDown && this._controlEventTargets.TabDown.length) {
+                this.sendControlEventForKey(UIView.controlEvent.TabDown, event);
+                pauseEvent(event, UIObject_1.YES);
+            }
+            if (eventKeyIsLeft(event)) {
+                this.sendControlEventForKey(UIView.controlEvent.LeftArrowDown, event);
+            }
+            if (eventKeyIsRight(event)) {
+                this.sendControlEventForKey(UIView.controlEvent.RightArrowDown, event);
+            }
+            if (eventKeyIsDown(event)) {
+                this.sendControlEventForKey(UIView.controlEvent.DownArrowDown, event);
+            }
+            if (eventKeyIsUp(event)) {
+                this.sendControlEventForKey(UIView.controlEvent.UpArrowDown, event);
+            }
+        }.bind(this);
+        const onKeyUp = function (event) {
+            if (eventKeyIsEnter(event)) {
+                this.sendControlEventForKey(UIView.controlEvent.EnterUp, event);
+            }
+        }.bind(this);
+        const onfocus = function (event) {
+            this.sendControlEventForKey(UIView.controlEvent.Focus, event);
+        }.bind(this);
+        const onblur = function (event) {
+            this.sendControlEventForKey(UIView.controlEvent.Blur, event);
+        }.bind(this);
+        // Mouse and touch start events
+        this._viewHTMLElement.onmousedown = onMouseDown.bind(this);
+        this._viewHTMLElement.ontouchstart = onTouchStart.bind(this);
+        // this.viewHTMLElement.addEventListener("mousedown", onMouseDown.bind(this), false)
+        // this.viewHTMLElement.addEventListener('touchstart', onTouchStart.bind(this), false)
+        // //this.viewHTMLElement.addEventListener("mouseenter", onMouseEnter.bind(this), false);
+        // Mouse and touch move events
+        this._viewHTMLElement.onmousemove = onMouseMove.bind(this);
+        this._viewHTMLElement.ontouchmove = onTouchMove.bind(this);
+        // this.viewHTMLElement.addEventListener("mousemove", onMouseMove.bind(this), false)
+        // this.viewHTMLElement.addEventListener('touchmove', onTouchMove.bind(this), false)
+        //this.viewHTMLElement.addEventListener("mousewheel", onmousewheel.bind(this), false)
+        this._viewHTMLElement.onmouseover = onmouseover.bind(this);
+        // this.viewHTMLElement.addEventListener("mouseover", onmouseover.bind(this), false)
+        // Mouse and touch end events
+        this._viewHTMLElement.onmouseup = onmouseup.bind(this);
+        this._viewHTMLElement.ontouchend = onTouchEnd.bind(this);
+        this._viewHTMLElement.ontouchcancel = onTouchCancel.bind(this);
+        // this.viewHTMLElement.addEventListener("mouseup", onmouseup.bind(this), false)
+        // this.viewHTMLElement.addEventListener('touchend', onTouchEnd.bind(this), false)
+        // this.viewHTMLElement.addEventListener('touchcancel', onTouchCancel.bind(this), false)
+        this._viewHTMLElement.onmouseout = onmouseout.bind(this);
+        // this.viewHTMLElement.addEventListener("mouseout", onmouseout.bind(this), false)
+        this._viewHTMLElement.addEventListener("touchleave", onTouchLeave.bind(this), false);
+        // this.viewHTMLElement.onkeydown = onkeydown
+        // this.viewHTMLElement.onkeyup = onkeyup
+        this._viewHTMLElement.addEventListener("keydown", onKeyDown, false);
+        this._viewHTMLElement.addEventListener("keyup", onKeyUp, false);
+        // Focus events
+        this._viewHTMLElement.onfocus = onfocus;
+        this._viewHTMLElement.onblur = onblur;
+        // this.viewHTMLElement.addEventListener("focus", onfocus, true)
+        // this.viewHTMLElement.addEventListener("blur", onblur, true)
+    }
+    get addControlEventTarget() {
+        const eventKeys = [];
+        const result = new Proxy(this.constructor.controlEvent, {
+            get: (target, key, receiver) => {
+                eventKeys.push(key);
+                return result;
+            },
+            set: (target, key, value, receiver) => {
+                eventKeys.push(key);
+                this.addTargetForControlEvents(eventKeys, value);
+                return true;
+            }
+        });
+        return result;
+    }
+    addTargetForControlEvents(eventKeys, targetFunction) {
+        eventKeys.forEach(function (key, index, array) {
+            this.addTargetForControlEvent(key, targetFunction);
+        }, this);
+    }
+    addTargetForControlEvent(eventKey, targetFunction) {
+        var targets = this._controlEventTargets[eventKey];
+        if (!targets) {
+            // @ts-ignore
+            targets = [];
+            this._controlEventTargets[eventKey] = targets;
+        }
+        if (targets.indexOf(targetFunction) == -1) {
+            targets.push(targetFunction);
+        }
+    }
+    removeTargetForControlEvent(eventKey, targetFunction) {
+        const targets = this._controlEventTargets[eventKey];
+        if (!targets) {
+            return;
+        }
+        const index = targets.indexOf(targetFunction);
+        if (index != -1) {
+            targets.splice(index, 1);
+        }
+    }
+    removeTargetForControlEvents(eventKeys, targetFunction) {
+        eventKeys.forEach(function (key, index, array) {
+            this.removeTargetForControlEvent(key, targetFunction);
+        }, this);
+    }
+    sendControlEventForKey(eventKey, nativeEvent) {
+        var targets = this._controlEventTargets[eventKey];
+        if (!targets) {
+            return;
+        }
+        targets = targets.copy();
+        for (var i = 0; i < targets.length; i++) {
+            const target = targets[i];
+            target(this, nativeEvent);
+        }
+    }
+    broadcastEventInSubtree(event) {
+        this.forEachViewInSubtree(function (view) {
+            view.didReceiveBroadcastEvent(event);
+            if (view._didReceiveBroadcastEventDelegateFunction) {
+                view._didReceiveBroadcastEventDelegateFunction(event);
+            }
+        });
+    }
+    didReceiveBroadcastEvent(event) {
+        if (event.name == UIView.broadcastEventName.PageDidScroll) {
+            this._isPointerValid = UIObject_1.NO;
+        }
+        if (event.name == UIView.broadcastEventName.AddedToViewTree) {
+            this.wasAddedToViewTree();
+        }
+        if (event.name == UIView.broadcastEventName.RemovedFromViewTree) {
+            this.wasRemovedFromViewTree();
+        }
+        if (event.name == UIView.broadcastEventName.LanguageChanged || event.name ==
+            UIView.broadcastEventName.AddedToViewTree) {
+            this._setInnerHTMLFromKeyIfPossible();
+            this._setInnerHTMLFromLocalizedTextObjectIfPossible();
+        }
+    }
+    forEachViewInSubtree(functionToCall) {
+        functionToCall(this);
+        this.subviews.forEach(function (subview, index, array) {
+            subview.forEachViewInSubtree(functionToCall);
+        });
+    }
+    rectangleInView(rectangle, view) {
+        if (!view.isMemberOfViewTree || !this.isMemberOfViewTree) {
+            return UIObject_1.nil;
+        }
+        const viewClientRectangle = view.viewHTMLElement.getBoundingClientRect();
+        const viewLocation = new UIPoint_1.UIPoint(viewClientRectangle.left, viewClientRectangle.top);
+        const selfClientRectangle = this.viewHTMLElement.getBoundingClientRect();
+        const selfLocation = new UIPoint_1.UIPoint(selfClientRectangle.left, selfClientRectangle.top);
+        const offsetPoint = selfLocation.subtract(viewLocation);
+        return rectangle.copy().offsetByPoint(offsetPoint);
+    }
+    rectangleFromView(rectangle, view) {
+        return view.rectangleInView(rectangle, this);
+    }
+    intrinsicContentSizeWithConstraints(constrainingHeight = 0, constrainingWidth = 0) {
+        // This works but is slow
+        const result = new UIRectangle_1.UIRectangle(0, 0, 0, 0);
+        if (this.rootView.forceIntrinsicSizeZero) {
+            return result;
+        }
+        var temporarilyInViewTree = UIObject_1.NO;
+        var nodeAboveThisView;
+        if (!this.isMemberOfViewTree) {
+            document.body.appendChild(this.viewHTMLElement);
+            temporarilyInViewTree = UIObject_1.YES;
+            nodeAboveThisView = this.viewHTMLElement.nextSibling;
+        }
+        const height = this.style.height;
+        const width = this.style.width;
+        this.style.height = "" + constrainingHeight;
+        this.style.width = "" + constrainingWidth;
+        const left = this.style.left;
+        const right = this.style.right;
+        const bottom = this.style.bottom;
+        const top = this.style.top;
+        this.style.left = "";
+        this.style.right = "";
+        this.style.bottom = "";
+        this.style.top = "";
+        const resultHeight = this.viewHTMLElement.scrollHeight;
+        const whiteSpace = this.style.whiteSpace;
+        this.style.whiteSpace = "nowrap";
+        const resultWidth = this.viewHTMLElement.scrollWidth;
+        this.style.whiteSpace = whiteSpace;
+        this.style.height = height;
+        this.style.width = width;
+        this.style.left = left;
+        this.style.right = right;
+        this.style.bottom = bottom;
+        this.style.top = top;
+        if (temporarilyInViewTree) {
+            document.body.removeChild(this.viewHTMLElement);
+            if (this.superview) {
+                if (nodeAboveThisView) {
+                    this.superview.viewHTMLElement.insertBefore(this.viewHTMLElement, nodeAboveThisView);
+                }
+                else {
+                    this.superview.viewHTMLElement.appendChild(this.viewHTMLElement);
+                }
+            }
+        }
+        result.height = resultHeight;
+        result.width = resultWidth;
+        return result;
+    }
+    intrinsicContentWidth(constrainingHeight = 0) {
+        const result = this.intrinsicContentSizeWithConstraints(constrainingHeight).width;
+        return result;
+    }
+    intrinsicContentHeight(constrainingWidth = 0) {
+        const result = this.intrinsicContentSizeWithConstraints(undefined, constrainingWidth).height;
+        return result;
+    }
+    intrinsicContentSize() {
+        return UIObject_1.nil;
+    }
+}
+exports.UIView = UIView;
+UIView._UIViewIndex = -1;
+UIView._viewsToLayout = [];
+UIView._pageScale = 1;
+UIView._transformAttribute = (("transform" in document.documentElement.style) ? "transform" : undefined) ||
+    (("-webkit-transform" in document.documentElement.style) ? "-webkit-transform" : "undefined") ||
+    (("-moz-transform" in document.documentElement.style) ? "-moz-transform" : "undefined") ||
+    (("-ms-transform" in document.documentElement.style) ? "-ms-transform" : "undefined") ||
+    (("-o-transform" in document.documentElement.style) ? "-o-transform" : "undefined");
+UIView.constraintAttribute = {
+    "left": AutoLayout.Attribute.LEFT,
+    "right": AutoLayout.Attribute.RIGHT,
+    "bottom": AutoLayout.Attribute.BOTTOM,
+    "top": AutoLayout.Attribute.TOP,
+    "centerX": AutoLayout.Attribute.CENTERX,
+    "centerY": AutoLayout.Attribute.CENTERY,
+    "height": AutoLayout.Attribute.HEIGHT,
+    "width": AutoLayout.Attribute.WIDTH,
+    "zIndex": AutoLayout.Attribute.ZINDEX,
+    // Not sure what these are for
+    "constant": AutoLayout.Attribute.NOTANATTRIBUTE,
+    "variable": AutoLayout.Attribute.VARIABLE
+};
+UIView.constraintRelation = {
+    "equal": AutoLayout.Relation.EQU,
+    "lessThanOrEqual": AutoLayout.Relation.LEQ,
+    "greaterThanOrEqual": AutoLayout.Relation.GEQ
+};
+UIView.controlEvent = {
+    "PointerDown": "PointerDown",
+    "PointerMove": "PointerMove",
+    "PointerLeave": "PointerLeave",
+    "PointerEnter": "PointerEnter",
+    "PointerUpInside": "PointerUpInside",
+    "PointerTap": "PointerTap",
+    "PointerUp": "PointerUp",
+    "MultipleTouches": "PointerZoom",
+    "PointerCancel": "PointerCancel",
+    "PointerHover": "PointerHover",
+    "EnterDown": "EnterDown",
+    "EnterUp": "EnterUp",
+    "EscDown": "EscDown",
+    "TabDown": "TabDown",
+    "LeftArrowDown": "LeftArrowDown",
+    "RightArrowDown": "RightArrowDown",
+    "DownArrowDown": "DownArrowDown",
+    "UpArrowDown": "UpArrowDown",
+    "Focus": "Focus",
+    "Blur": "Blur"
+};
+UIView.broadcastEventName = {
+    "LanguageChanged": "LanguageChanged",
+    "RemovedFromViewTree": "RemovedFromViewTree",
+    "AddedToViewTree": "AddedToViewTree",
+    "PageDidScroll": "PageDidScroll"
+};
+//# sourceMappingURL=UIView.js.map