igniteui-react-core/esm5/lib/react-renderer.js

Ignite UI React Core.

/*
THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
https://www.infragistics.com/legal/license/igultimate-la
https://www.infragistics.com/legal/license/igultimate-eula
GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOADING AND/OR INSTALLING AND USING INFRAGISTICS SOFTWARE:  you are indicating that you have read and understand this Agreement, and agree to be legally bound by it on behalf of the yourself and your company.
*/
import { List$1 } from "./List$1";
import { String_$type } from './type';
import { CssHelper } from './CssHelper';
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { TypeRegistrar } from "./type";
import { fromSpinal } from './componentUtil';
import { Localization } from './Localization';
var ReactRenderer = /** @class */ /*@__PURE__*/ (function () {
    function ReactRenderer(container, document, useDefaultsSource, defaultsSource, portalManager) {
        if (portalManager === void 0) {
            portalManager = null;
        }
        this.container = container;
        this._useDefaultsSource = false;
        this._checkResized = null;
        this._resizeListener = null;
        this._resizeTicking = false;
        this._portalManager = null;
        this._destroyed = false;
        this._resizeTickId = -1;
        this._discStack = [];
        this._toUnbind = [];
        this._currentFontQuery = null;
        this._document = document;
        this._container = container;
        this._rootElement = container;
        this._rootWrapper = new ReactWrapper(this._rootElement, this);
        this._cssHelper = new ReactCssHelper(this, this._document);
        this._useDefaultsSource = useDefaultsSource;
        this._defaultsSource = defaultsSource;
        this._portalManager = portalManager;
        if (this._portalManager) {
            this._portalManager.renderer = this;
        }
    }
    ReactRenderer.prototype.addSizeWatcher = function (onResized) {
        var _this = this;
        var previousWidth = this._rootElement.offsetWidth;
        var previousHeight = this._rootElement.offsetHeight;
        var previousRatio = window.devicePixelRatio;
        if (this._checkResized == null) {
            this._checkResized = function () {
                var currWidth = _this._rootElement.offsetWidth;
                var currHeight = _this._rootElement.offsetHeight;
                var currRatio = window.devicePixelRatio;
                var changed = false;
                if (previousWidth != currWidth ||
                    previousHeight != currHeight ||
                    previousRatio != currRatio) {
                    changed = true;
                }
                previousWidth = currWidth;
                previousHeight = currHeight;
                previousRatio = currRatio;
                if (changed) {
                    onResized();
                }
            };
        }
        this._resizeListener = this.globalListen("window", "resize", function (ev) { return _this._checkResized(); });
        var self = this;
        this._resizeTicking = true;
        function resizeTick() {
            self._resizeTickId = -1;
            if (self._resizeTicking) {
                self._checkResized();
                self._resizeTickId = self.setTimeout(resizeTick, 100);
            }
        }
        this._resizeTickId = this.setTimeout(resizeTick, 100);
    };
    ReactRenderer.prototype.destroy = function () {
        this._destroyed = true;
        for (var i = 0; i < this._toUnbind.length; i++) {
            this._toUnbind[i]();
        }
        this._toUnbind = [];
        this.removeSizeWatcher();
        this._rootWrapper.destroy();
        this._rootWrapper = null;
        this._rootElement = null;
    };
    ReactRenderer.prototype.removeSizeWatcher = function () {
        this._resizeTicking = false;
        if (this._resizeTickId != -1) {
            window.clearTimeout(this._resizeTickId);
            this._resizeTickId = -1;
        }
        if (this._resizeListener != null) {
            this._resizeListener();
            this._resizeListener = null;
        }
    };
    ReactRenderer.prototype.updateRoot = function (root) {
        this._rootWrapper = root;
        this._rootElement = root.getNativeElement();
    };
    ReactRenderer.prototype.withRenderer = function (act) {
        act(this);
    };
    ReactRenderer.prototype.supportsAnimation = function () {
        return true;
    };
    ReactRenderer.prototype.getRequestAnimationFrame = function () {
        var ret = function (act) {
            requestAnimationFrame(act);
        };
        return ret;
    };
    ReactRenderer.prototype.getSetTimeout = function () {
        var ret = function (act, millisecondsDelay) {
            var val = window.setTimeout(act, millisecondsDelay);
            return val;
        };
        return ret;
    };
    ReactRenderer.prototype.getClearTimeout = function () {
        var ret = function (timerId) {
            window.clearTimeout(timerId);
        };
        return ret;
    };
    ReactRenderer.prototype.setTimeout = function (act, millisecondsDelay) {
        var val;
        val = window.setTimeout(act, millisecondsDelay);
        return val;
    };
    ReactRenderer.prototype.clearTimeout = function (timerId) {
        window.clearTimeout(timerId);
    };
    Object.defineProperty(ReactRenderer.prototype, "rootWrapper", {
        get: function () {
            return this._rootWrapper;
        },
        enumerable: false,
        configurable: true
    });
    ReactRenderer.prototype.querySelector = function (selector) {
        var _this = this;
        var wrapper = null;
        this.withRenderer(function (ren) {
            var ele = _this.rootWrapper.getNativeElement().querySelector(selector);
            if (ele === null) {
                return null;
            }
            wrapper = new ReactWrapper(ele, ren);
        });
        return wrapper;
    };
    ReactRenderer.prototype.getWrapper = function (ele) {
        if (!ele) {
            return null;
        }
        var wrapper = null;
        this.withRenderer(function (ren) {
            wrapper = new ReactWrapper(ele, ren);
        });
        return wrapper;
    };
    ReactRenderer.prototype.getResourceString = function (resourceId) {
        // check if the resource culture is available.  It is a combination of the bundle ID and culture ID
        var grouping = this._resourceBundleId + "-" + this._cultureId;
        var isRegistered = Localization.isRegistered(grouping);
        if (isRegistered) {
            return Localization.getString(grouping, resourceId);
        }
        else {
            return "";
        }
    };
    ReactRenderer.prototype.setResourceBundleId = function (bundle) {
        this._resourceBundleId = bundle;
    };
    ReactRenderer.prototype.setCultureId = function (culture) {
        this._cultureId = culture;
    };
    ReactRenderer.prototype.append = function (child) {
        this._rootWrapper.append(child);
        return this;
    };
    ReactRenderer.prototype.appendToBody = function (element) {
        if (this._document !== null && this._document.body !== null) {
            this._document.body.appendChild(element.getNativeElement());
        }
    };
    ReactRenderer.prototype.createElement = function (elementName) {
        var _this = this;
        var ele;
        this.withRenderer(function (ren) {
            ele = _this._document.createElement(elementName);
        });
        var wrap = new ReactWrapper(ele, this);
        return wrap;
    };
    ReactRenderer.prototype.createElementNS = function (elementName, ns) {
        var _this = this;
        var ele;
        this.withRenderer(function (ren) {
            ele = _this._document.createElementNS(ns, elementName);
        });
        var wrap = new ReactWrapper(ele, this);
        return wrap;
    };
    ReactRenderer.prototype.endCSSQuery = function () {
        this._currentFontQuery = null;
        if (!this.hasBody()) {
            return;
        }
        if (this._discStack.length > 0) {
            var toRemove = this._discStack.pop();
            toRemove.remove();
        }
    };
    ReactRenderer.prototype.expandTemplate = function (template, args) {
        throw new Error("not implemented");
    };
    ReactRenderer.prototype.get2DCanvasContext = function (canvas) {
        var context = null;
        this.withRenderer(function (ren) {
            var canv = (canvas.getNativeElement());
            context = canv.getContext("2d");
        });
        return context;
    };
    Object.defineProperty(ReactRenderer.prototype, "isComputedFontQuery", {
        get: function () {
            return this._currentFontQuery != null &&
                this.hasBody();
        },
        enumerable: false,
        configurable: true
    });
    ReactRenderer.prototype.getCssDefaultPropertyValue = function (className, propertyName) {
        if (this._useDefaultsSource && !this.isComputedFontQuery) {
            var c = this._defaultsSource[className];
            if (className == "" || className == null) {
                c = this._defaultsSource;
            }
            if (c === undefined) {
                return null;
            }
            var v = c[propertyName];
            if (v === undefined) {
                return null;
            }
            return v;
        }
        return this._cssHelper.getPropertyValue(this.getCurrentDiscovery(), className, propertyName);
    };
    ReactRenderer.prototype.getCssDefaultValuesForClassCollection = function (classPrefix, propertyNames) {
        if (this._useDefaultsSource) {
            var ret = [];
            for (var k in this._defaultsSource) {
                if (k.indexOf(classPrefix) === 0) {
                    var subRet = [];
                    ret.push(subRet);
                    for (var i = 0; i < propertyNames.length; i++) {
                        var v = this._defaultsSource[k][propertyNames[i]];
                        if (v === undefined) {
                            subRet.push(null);
                        }
                        else {
                            subRet.push(v);
                        }
                    }
                }
            }
            return ret;
        }
        return this._cssHelper.getValuesForClassCollection(this.getCurrentDiscovery(), classPrefix, propertyNames);
    };
    ReactRenderer.prototype.getDefaultFontHeight = function () {
        if (this._defaultsSource["default-font-height"] !== undefined) {
            return +this._defaultsSource["default-font-height"];
        }
        return 16;
    };
    ReactRenderer.prototype.getHeightForFontString = function (fontString, text, useOffsetHeight) {
        if (this._rootWrapper.getNativeElement() == null) {
            //TODO: some voodoo here.
            return 12;
        }
        this.startCSSQuery();
        var disc = this.getCurrentDiscovery();
        if (disc == null || !this.hasWindow) {
            return this.getDefaultFontHeight();
        }
        if (disc.getNativeElement().parentElement) {
            disc.getNativeElement().parentElement.removeChild(disc.getNativeElement());
        }
        disc.setStyleProperty("position", "absolute");
        disc.setStyleProperty("visibility", "hidden");
        disc.setStyleProperty("font", fontString);
        document.body.appendChild(disc.getNativeElement());
        var span;
        this.withRenderer(function (ren) {
            span = ren.createElement("span");
        });
        var spanWrap = new ReactWrapper(span, this);
        this.getCurrentDiscovery().append(spanWrap);
        spanWrap.setText(text);
        var height;
        if (useOffsetHeight) {
            var offHeight = spanWrap.getNativeElement().offsetHeight;
            height = offHeight;
        }
        else {
            height = spanWrap.getNativeElement().height();
        }
        if (height == 0) {
            //HACK: HACK! HACK! HACK!
            height = this.getDefaultFontHeight();
        }
        //console.log("font height: " + height);
        document.body.removeChild(disc.getNativeElement());
        this.endCSSQuery();
        return height;
    };
    ReactRenderer.prototype.getSubRenderer = function (root) {
        var elem = root;
        elem = elem.getNativeElement();
        return new ReactRenderer(elem, this._document, this._useDefaultsSource, this._defaultsSource, this._portalManager);
    };
    ReactRenderer.prototype.listen = function (element, eventName, handler) {
        var retVal = null;
        if (element == "window") {
            element = window;
        }
        if (element == "document") {
            element = document;
        }
        var $self = this;
        var ret = element.addEventListener(eventName, handler);
        var self = this;
        retVal = function () {
            var ind = self._toUnbind.indexOf(retVal);
            if (ind >= 0) {
                self._toUnbind.splice(ind, 1);
            }
            element.removeEventListener(eventName, handler);
            handler = null;
        };
        this._toUnbind.push(retVal);
        return retVal;
    };
    ReactRenderer.prototype.runInMainZone = function (action) {
        action();
    };
    ReactRenderer.prototype.globalListen = function (element, eventName, handler) {
        var retVal = null;
        //this._ngZone.runOutsideAngular(() => {
        var $self = this;
        var a = function (e) {
            var inner = {};
            //TODO: normalize here?
            inner.originalEvent = e;
            inner.altKey = e.altKey;
            inner.button = e.button;
            inner.ctrlKey = e.ctrlKey;
            inner.offsetX = e.offsetX;
            inner.offsetY = e.offsetY;
            inner.pageX = e.pageX;
            inner.pageY = e.pageY;
            if (e.touches && e.touches.length > 0) {
                inner.pageX = e.touches[0].pageX;
                inner.pageY = e.touches[0].pageY;
            }
            inner.shiftKey = e.shiftKey;
            inner.which = e.which;
            inner.preventDefault = function () {
                e.preventDefault();
            };
            inner.stopPropagation = function () {
                e.stopPropagation();
            };
            //console.log(e);
            handler(inner);
        };
        var ret = this.listen(element, eventName, a);
        var self = this;
        retVal = function () {
            var ind = self._toUnbind.indexOf(retVal);
            if (ind >= 0) {
                self._toUnbind.splice(ind, 1);
            }
            ret();
            a = null;
        };
        this._toUnbind.push(retVal);
        //});
        return retVal;
    };
    ReactRenderer.prototype.hasBody = function () {
        return this._document !== null && this._document.body !== null;
    };
    ReactRenderer.prototype.hasWindow = function () {
        //todo: hmmm
        return true;
    };
    ReactRenderer.prototype.getCurrentDiscovery = function () {
        if (this._discStack.length <= 0) {
            return null;
        }
        return this._discStack[this._discStack.length - 1];
    };
    ReactRenderer.prototype.setCssQueryFontString = function (fontString) {
        if (this._useDefaultsSource) {
            this._currentFontQuery = fontString;
        }
        if (!document.body.contains(this.getCurrentDiscovery().getNativeElement())) {
            this.getCurrentDiscovery().remove();
            this.appendToBody(this.getCurrentDiscovery());
        }
        this.getCurrentDiscovery().setStyleProperty("font", fontString);
    };
    ReactRenderer.prototype.startCSSQuery = function () {
        if (!this.hasBody()) {
            return;
        }
        var disc = this._cssHelper.getDiscoveryElement(this._rootElement);
        this._discStack.push(disc);
        this._rootWrapper.append(disc);
    };
    ReactRenderer.prototype.supportsDOMEvents = function () {
        //todo: hmmm.
        return true;
    };
    ReactRenderer.prototype.getPortal = function (hostElement, elementTag, portalCallback, isContentPortal) {
        if (this._portalManager) {
            this._portalManager.getPortal(hostElement, elementTag, portalCallback, isContentPortal);
        }
    };
    ReactRenderer.prototype.getExternal = function (internalComponent, styleSourceElement, optionalParent) {
        if (optionalParent === void 0) {
            optionalParent = null;
        }
        if (internalComponent.externalObject) {
            return internalComponent.externalObject;
        }
        var ext = null;
        if (!internalComponent.$type) {
            return null;
        }
        var name = internalComponent.$type.name;
        var externalName = "Igr" + name;
        if (!TypeRegistrar.isRegistered(externalName)) {
            return null;
        }
        ext = TypeRegistrar.create(externalName);
        if (ext) {
            ext._implementation = internalComponent;
            internalComponent.externalObject = ext;
        }
        if (styleSourceElement) {
            if (ext._styling) {
                ext._styling(styleSourceElement.getNativeElement(), ext, optionalParent);
            }
        }
        return ext;
    };
    return ReactRenderer;
}());
export { ReactRenderer };
var ReactWrapper = /** @class */ /*@__PURE__*/ (function () {
    function ReactWrapper(element, renderer) {
        this.renderer = renderer;
        this._toUnbind = [];
        this._attrCache = new Map();
        this._styleCache = new Map();
        this._currentDisplay = "";
        this._innerText = undefined;
        if (element && element.getNativeElement) {
            element = element.getNativeElement();
        }
        this.ele = element;
        this._toUnbind = [];
    }
    ReactWrapper.prototype.destroy = function () {
        this.unlistenAll();
        this.ele = null;
    };
    ReactWrapper.prototype.withRenderer = function (act) {
        act(this.renderer);
    };
    ReactWrapper.prototype.addClass = function (className) {
        var _this = this;
        if (className == null || className.length == 0) {
            return this;
        }
        this.withRenderer(function (ren) {
            className.split(" ").forEach(function (item) { return _this.ele.classList.add(item); });
        });
        return this;
    };
    ReactWrapper.prototype.append = function (child) {
        var _this = this;
        this.withRenderer(function (ren) {
            _this.ele.appendChild(child.getNativeElement());
        });
        return this;
    };
    ReactWrapper.prototype.getAttribute = function (propertyName) {
        if (this._attrCache.has(propertyName)) {
            return this._attrCache.get(propertyName);
        }
        if (this.ele) {
            return this.ele.getAttribute(propertyName);
        }
        return null;
    };
    ReactWrapper.prototype.setAttribute = function (propertyName, value) {
        var _this = this;
        this._attrCache.set(propertyName, value);
        this.withRenderer(function (ren) {
            _this.ele.setAttribute(propertyName, value);
        });
        return this;
    };
    ReactWrapper.prototype.before = function (child) {
        if (this.ele.parentElement) {
            this.ele.parentElement.insertBefore(child.getNativeElement(), this.ele);
            // this.insertBefore(child.getNativeElement());
        }
        return this;
    };
    ReactWrapper.prototype.clone = function () {
        return new ReactWrapper(this.getNativeElement().cloneNode(true), this.renderer);
    };
    ReactWrapper.prototype.getStyleProperty = function (propertyName) {
        if (this.getNativeElement() !== null) {
            if (getComputedStyle !== undefined) {
                var computed = getComputedStyle(this.getNativeElement());
                //console.log("getting computed value for: " + propertyName + ": " + computed[propertyName]);
                return computed[propertyName];
            }
        }
        if (this._styleCache.has(propertyName)) {
            return this._styleCache.get(propertyName);
        }
        return null;
    };
    ReactWrapper.prototype.setStyleProperty = function (propertyName, value) {
        var _this = this;
        if (propertyName == "display") {
            if (value != "none") {
                this._currentDisplay = value;
            }
        }
        this._styleCache.set(propertyName, value);
        this.withRenderer(function (ren) {
            _this.ele.style[propertyName] = value;
        });
        return this;
    };
    ReactWrapper.prototype.findByClass = function (className) {
        if (className.substring(0, 1) == '.') {
            className = className.substring(1);
        }
        var ret = this.ele.getElementsByClassName(className);
        var retVal = [];
        retVal.length = ret.length;
        for (var i = 0; i < ret.length; i++) {
            retVal[i] = new ReactWrapper(ret[i], this.renderer);
        }
        return retVal;
    };
    ReactWrapper.prototype.focus = function (preventScroll) {
        if (this.getNativeElement() !== null && this.getNativeElement().focus !== undefined) {
            if (preventScroll) {
                this.getNativeElement().focus({ preventScroll: true });
            }
            else {
                this.getNativeElement().focus();
            }
        }
        return this;
    };
    ReactWrapper.prototype.extractElement = function (index) {
        if (!this.getNativeElement() ||
            index < 0 ||
            index >= 1) {
            return null;
        }
        return this.getNativeElement();
    };
    ReactWrapper.prototype.injectElement = function (index, element) {
        if (index < 0 ||
            index >= 1) {
            return;
        }
        this.ele = element;
    };
    ReactWrapper.prototype.getChildAt = function (i) {
        var child = this.ele.children[i];
        return new ReactWrapper(child, this.renderer);
    };
    ReactWrapper.prototype.getChildCount = function () {
        return this.ele.children.length;
    };
    ReactWrapper.prototype.getNativeElement = function () {
        var _this = this;
        var nativeElement = null;
        this.withRenderer(function (ren) {
            if (_this.ele == null) {
                nativeElement = null;
                return;
            }
            if (_this.ele.getNativeElement == undefined) {
                nativeElement = _this.ele;
                return nativeElement;
            }
            nativeElement = (_this.ele.getNativeElement());
        });
        return nativeElement;
    };
    ReactWrapper.prototype.height = function () {
        var ret = this.getStyleProperty("height");
        if (ret == null) {
            //todo: some voodoo here.
            return 500;
        }
        var val = parseFloat(ret.replace("px", ""));
        if (isNaN(val)) {
            return 0;
        }
        return val;
    };
    ReactWrapper.prototype.hide = function () {
        var currDisplay = this.getStyleProperty("display");
        if (currDisplay == '') {
            currDisplay = this._currentDisplay;
        }
        if (currDisplay != 'none') {
            this._currentDisplay = currDisplay;
        }
        this.setStyleProperty("display", "none");
        return this;
    };
    ReactWrapper.prototype.listen = function (eventName, handler) {
        var retVal = null;
        //this.ngZone.runOutsideAngular(() => {
        var $self = this;
        var a = function (e) {
            var inner = {};
            //TODO: normalize here?
            inner.originalEvent = e;
            inner.altKey = e.altKey;
            inner.button = e.button;
            inner.ctrlKey = e.ctrlKey;
            inner.offsetX = e.offsetX;
            inner.offsetY = e.offsetY;
            inner.pageX = e.pageX;
            inner.pageY = e.pageY;
            if (e.touches && e.touches.length > 0) {
                inner.pageX = e.touches[0].pageX;
                inner.pageY = e.touches[0].pageY;
            }
            inner.shiftKey = e.shiftKey;
            inner.which = e.which;
            inner.preventDefault = function () {
                e.preventDefault();
            };
            inner.stopPropagation = function () {
                e.stopPropagation();
            };
            //console.log(e);
            handler(inner);
        };
        var ret = this.renderer.listen(this.ele, eventName, a);
        var self = this;
        retVal = function () {
            var ind = self._toUnbind.indexOf(retVal);
            if (ind >= 0) {
                self._toUnbind.splice(ind, 1);
            }
            ret();
            a = null;
        };
        this._toUnbind.push(retVal);
        //});
        return retVal;
    };
    ReactWrapper.prototype.getOffsetHelper = function (ele) {
        var clientRect = ele.getBoundingClientRect();
        return {
            top: clientRect.top + window.pageYOffset,
            left: clientRect.left + window.pageXOffset
        };
    };
    ReactWrapper.prototype.getOffset = function () {
        return this.getOffsetHelper(this.getNativeElement());
    };
    ReactWrapper.prototype.setOffset = function (x, y) {
        var par = this.getNativeElement().offsetParent || this.getNativeElement().parentElement;
        var parentOffset = this.getOffsetHelper(par);
        return this.setRawPosition(x - parentOffset.left, y - parentOffset.top);
        //return this;
    };
    ReactWrapper.prototype.outerHeight = function () {
        return this.getProperty("offsetHeight");
    };
    ReactWrapper.prototype.outerHeightWithMargin = function () {
        var height = this.outerHeight();
        height += parseInt(this.getStyleProperty("marginTop"));
        height += parseInt(this.getStyleProperty("marginBottom"));
        return height;
    };
    ReactWrapper.prototype.outerWidth = function () {
        return this.getProperty("offsetWidth");
    };
    ReactWrapper.prototype.outerWidthWithMargin = function () {
        var width = this.outerWidth();
        width += parseInt(this.getStyleProperty("marginLeft"));
        width += parseInt(this.getStyleProperty("marginRight"));
        return width;
    };
    ReactWrapper.prototype.getProperty = function (propertyName) {
        var native = this.getNativeElement();
        return native[propertyName];
    };
    ReactWrapper.prototype.setProperty = function (propertyName, value) {
        var _this = this;
        this.withRenderer(function (ren) {
            _this.ele[propertyName] = value;
        });
        return this;
    };
    ReactWrapper.prototype.remove = function () {
        var _this = this;
        this.withRenderer(function (ren) {
            var ele = _this.getNativeElement();
            if (ele.parentElement != null) {
                _this.ele.parentElement.removeChild(ele);
            }
            //ren.detachView([this.getNativeElement()]);
        });
        return this;
    };
    ReactWrapper.prototype.removeChild = function (child) {
        var _this = this;
        this.withRenderer(function (ren) {
            _this.ele.removeChild(child.getNativeElement());
            //ren.detachView([child.getNativeElement()]);
        });
        return this;
    };
    ReactWrapper.prototype.removeChildren = function () {
        for (var i = this.getChildCount() - 1; i >= 0; i--) {
            this.removeChild(this.getChildAt(i));
        }
        return this;
    };
    ReactWrapper.prototype.removeClass = function (className) {
        var _this = this;
        if (className == null || className.length == 0) {
            return this;
        }
        this.withRenderer(function (ren) {
            className.split(" ").forEach(function (item) { return _this.ele.classList.remove(item); });
        });
        return this;
    };
    ReactWrapper.prototype.setRawStyleProperty = function (propertyName, value) {
        //this.withRenderer((ren) => {
        this.ele.style[propertyName] = value;
        //})
        return this;
    };
    ReactWrapper.prototype.setRawPosition = function (x, y) {
        this.ele.style.left = x + "px";
        this.ele.style.top = y + "px";
        return this;
    };
    ReactWrapper.prototype.setRawXPosition = function (x) {
        this.ele.style.left = x + "px";
        return this;
    };
    ReactWrapper.prototype.setRawYPosition = function (y) {
        this.ele.style.top = y + "px";
        return this;
    };
    ReactWrapper.prototype.setRawSize = function (width, height) {
        this.ele.style.width = width + "px";
        this.ele.style.height = height + "px";
        return this;
    };
    ReactWrapper.prototype.show = function () {
        this.setStyleProperty("display", this._currentDisplay);
        return this;
    };
    ReactWrapper.prototype.getText = function () {
        if (this._innerText != undefined) {
            return this._innerText;
        }
        return this.getNativeElement().innerText;
    };
    ReactWrapper.prototype.setText = function (value) {
        var _this = this;
        this._innerText = value;
        this.withRenderer(function (ren) {
            //workaround warning:
            _this.getNativeElement().innerText = value;
            //ren.setText(this.ele, value);
        });
        return this;
    };
    ReactWrapper.prototype.setRawText = function (value) {
        this._innerText = value;
        this.ele.textContent = value;
        return this;
    };
    ReactWrapper.prototype.unlistenAll = function () {
        var toUnbind = [];
        for (var i = 0; i < this._toUnbind.length; i++) {
            toUnbind.push(this._toUnbind[i]);
        }
        for (var i = 0; i < toUnbind.length; i++) {
            toUnbind[i]();
        }
        this._toUnbind.length = 0;
        return this;
    };
    ReactWrapper.prototype.width = function () {
        var ret = this.getStyleProperty("width");
        if (ret == null) {
            //todo: some voodoo here.
            return 500;
        }
        var val = parseFloat(ret.replace("px", ""));
        if (isNaN(val)) {
            return 0;
        }
        return val;
    };
    ReactWrapper.prototype.parent = function () {
        return this.ele == null || this.ele.parentElement == null ? null :
            new ReactWrapper(this.ele.parentElement, this.renderer);
    };
    ReactWrapper.prototype.querySelectorAll = function (selector) {
        var elements = this.ele.querySelectorAll(selector);
        var result = [];
        for (var ii = 0; ii < elements.length; ii++) {
            result.push(new ReactWrapper(elements[ii], this.renderer));
        }
        return result;
    };
    return ReactWrapper;
}());
export { ReactWrapper };
var ReactCssHelper = /** @class */ /*@__PURE__*/ (function () {
    function ReactCssHelper(renderer, document) {
        this.renderer = renderer;
        this.document = document;
    }
    ReactCssHelper.prototype.getDiscoveryElement = function (container) {
        //console.log(container);
        var ele = this.renderer.createElement("fakediscoveryelement");
        var wrapper = new ReactWrapper(ele, this.renderer);
        wrapper.setStyleProperty("box-sizing", "content-box");
        return wrapper;
    };
    ReactCssHelper.prototype.getPropertyValue = function (discoveryElement, className, propertyName) {
        //console.log("fetching: " + className + ", prop: " + propertyName);
        var ret = CssHelper.getPropertyValue1(discoveryElement, className, propertyName);
        //console.log("for: " + className + ", prop: " + propertyName + " value: " + ret);
        return ret;
    };
    ReactCssHelper.prototype.getValuesForClassCollection = function (discoveryElement, classPrefix, propertyNames) {
        var prop = new List$1(String_$type, 0);
        for (var i = 0; i < propertyNames.length; i++) {
            prop.add(propertyNames[i]);
        }
        var ret = CssHelper.getValuesForClassCollection(discoveryElement, classPrefix, prop);
        var retVal = new Array(ret.count);
        for (var i1 = 0; i1 < ret.count; i1++) {
            retVal[i1] = new Array(ret._inner[i1].count);
            for (var j = 0; j < ret._inner[i1].count; j++) {
                retVal[i1][j] = ret._inner[i1]._inner[j];
            }
        }
        return retVal;
    };
    return ReactCssHelper;
}());
var PortalManager = /** @class */ /*@__PURE__*/ (function () {
    function PortalManager(id, requestRender) {
        this.disableContentPortal = false;
        this._portals = [];
        this._portalsMap = new Map();
        this._id = null;
        this._currId = 0;
        this._requestRender = requestRender;
        this._onPortalRef = this._onPortalRef.bind(this);
        this._id = id;
    }
    PortalManager.prototype.onRender = function (children) {
        if (this._portals && this._portals.length > 0) {
            //children = React.Children.toArray(this.props.children);
            for (var i = 0; i < this._portals.length; i++) {
                var p = this._portals[i];
                if (p.isContentPortal && !this.disableContentPortal) {
                    var mine = children.slice(0);
                    children.length = 0;
                    var n = p._createPortal(mine);
                    p._nativePortal = n;
                }
                else {
                    var n = p._createPortal(null);
                    p._nativePortal = n;
                }
                children.push(p._nativePortal);
            }
        }
    };
    PortalManager.prototype.getId = function () {
        return this._id + "__" + (this._currId++).toString();
    };
    PortalManager.prototype.getPortal = function (hostElement, elementTag, portalCallback, isContentPortal) {
        var existingPortal = this._portals.find(function (x) { return x.portalContainer.getNativeElement() === hostElement.getNativeElement(); });
        if (existingPortal) {
            return;
        }
        var portal = new ReactDomPortal(this, hostElement, elementTag, portalCallback, this.getId(), this._onPortalRef, isContentPortal);
        this._portals.push(portal);
        this._portalsMap.set(portal._portalId, portal);
        this._requestRender();
    };
    PortalManager.prototype.getPortals = function () {
        return this._portals;
    };
    PortalManager.prototype._onPortalRef = function (ele) {
        if (ele != null) {
            var key = ele.props.id;
            if (this._portalsMap.has(key)) {
                var p = this._portalsMap.get(key);
                p._onComponentProvided(ele);
            }
        }
    };
    PortalManager.prototype._destroy = function (portal) {
        var ind = this._portals.indexOf(portal);
        this._portalsMap.delete(portal._portalId);
        this._portals.splice(ind, 1);
        this._requestRender();
    };
    return PortalManager;
}());
export { PortalManager };
var ReactDomPortal = /** @class */ /*@__PURE__*/ (function () {
    function ReactDomPortal(portalManager, hostElement, elementTag, portalCallback, portalId, portalRef, isContentPortal) {
        this._portalRef = null;
        this.portalContainer = hostElement;
        this._elementTag = elementTag;
        this._portalCallback = portalCallback;
        this._portalId = portalId;
        this.isContentPortal = isContentPortal;
        this._portalRef = portalRef;
        this._owner = portalManager;
    }
    ReactDomPortal.prototype.destroy = function () {
        this._owner._destroy(this);
    };
    ReactDomPortal.prototype._onComponentProvided = function (ele) {
        var oldValue = this.componentRef;
        this.componentRef = ele;
        if (oldValue !== this.componentRef) {
            this._portalCallback(this);
        }
    };
    ReactDomPortal.prototype.toPascal = function (name) {
        var val = fromSpinal(name);
        return val.substr(0, 1).toUpperCase() + val.substr(1);
    };
    ReactDomPortal.prototype.createElementFromTag = function (elementTag, portalId, portalRef, children) {
        if (elementTag.indexOf("-") >= 0) {
            elementTag = this.toPascal(elementTag);
        }
        var name = "Igr" + elementTag;
        var ele = TypeRegistrar.get(name);
        var rEle = React.createElement(ele, {
            ref: portalRef,
            key: portalId,
            id: portalId,
            children: children
        });
        return rEle;
    };
    ReactDomPortal.prototype._createPortal = function (children) {
        var reactEle = this.createElementFromTag(this._elementTag, this._portalId, this._portalRef, children);
        this._nativePortal = ReactDOM.createPortal(reactEle, this.portalContainer.getNativeElement(), this._portalId);
        return this._nativePortal;
    };
    return ReactDomPortal;
}());