ns-components-angular/embedded/nsContainerBase.d.ts

Angular Wrapper Components for NSComponents

export declare const NSContainerBaseCode = "var nsModuleExport = function(root,name,prototype)\r\n\t{\r\n\t\tif(typeof exports === 'object' && typeof module === 'object')\r\n\t\t{\r\n\t\t\tmodule.exports[name] = prototype;\r\n\t\t}\r\n\t\telse if (typeof define === \"function\" && define.amd)\r\n\t\t{\r\n\t\t\tdefine(name,[], function () {return prototype;});\r\n\t\t}\r\n\t\telse if(typeof exports === 'object')\r\n\t\t{\r\n\t\t\texports[name] = prototype;\r\n\t\t}\r\n\t\telse\r\n\t\t{\r\n\t\t\troot[name] = prototype;\r\n\t\t}\r\n\t};var nsIsWeb = function(root)\r\n\t{\r\n\t\tif(typeof exports === 'object' && typeof module === 'object')\r\n\t\t{\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\telse if (typeof define === \"function\" && define.amd)\r\n\t\t{\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\telse if(typeof exports === 'object')\r\n\t\t{\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\telse\r\n\t\t{\r\n\t\t\treturn true;\r\n\t\t}\r\n\t};if(!nsIsWeb())\r\n\t\t{\r\nvar nsutilRef = require('./nsUtil.min.js');\r\nvar NSUtil = nsutilRef.NSUtil;\r\n\r\n\t\t}\r\n\"use strict\";\r\nvar nsExtendPrototype = (function()\r\n{\r\n\tvar nsExtendPrototype = function(source,destination) \r\n\t{\r\n\t\tif(source && destination)\r\n\t\t{\r\n\t\t\tdestination.prototype = Object.create(source.prototype);\r\n\t\t\tdestination.prototype.constructor = destination;\r\n\t\t\tdestination.prototype.base = source.prototype;\r\n\t\t\treturn source.prototype;\r\n\t\t}\r\n\t\treturn null;\r\n\t};\r\n\treturn nsExtendPrototype;\r\n})();\r\nnsModuleExport(this,\"nsExtendPrototype\",nsExtendPrototype);\r\n\r\nvar NSContainerBase = (function()\r\n{\r\n\tvar NSContainerBase = function()\r\n\t{\r\n\t};\r\n\t\r\n\t/*start of functions */\r\n\t//set checkVisibility to true if component needs to reRender when baseComponent width or height > 0 or baseComponent is Visible\r\n\tNSContainerBase.prototype.__setBaseComponent = function(component,checkVisibility)\r\n\t{\r\n\t\tif(component)\r\n\t\t{\r\n\t\t\tthis.__baseComponent = (typeof component == \"string\") ? document.getElementById(component) : component;\r\n\t\t\tthis.__initialize();\r\n\t\t\tif(checkVisibility == true)\r\n\t\t\t{\r\n\t\t\t\tthis.__checkBaseComponentVisibility();\r\n\t\t\t}\r\n\t\t}\r\n\t\telse\r\n\t\t{\r\n\t\t\tthrow new Error(\"Component is undefined\");\r\n\t\t}\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.__initialize = function() \r\n\t{\r\n\t\tthis.INITIALIZE = \"initialize\";\r\n\t\tthis.CREATION_COMPLETE = \"creationComplete\";\r\n\t\tthis.PROPERTY_CHANGE = \"propertyChange\";\r\n\t\tthis.REMOVE = \"remove\";\r\n\t\tthis.RESIZE = \"resize\";\r\n\t\t\r\n\t\t  /*start of private variables */\r\n\t\t//this.__baseComponent = null;\r\n\t\tthis.__isCreationCompleted = false;\r\n\t\tthis.__isRemoved = false;\r\n\t\tthis.__setProperty = true; \r\n\t\tthis.__id = null;\r\n\t\tthis.__shadow = null;\r\n\t\tthis.__focused = false;\r\n\t\tthis.__mediaQuery = null;\r\n\t\tthis.__arrQueries = [];\r\n\t\tthis.__arrQueriesTrimmed = [];\r\n\t\tthis.__focusHandlerRef = null;\r\n\t\tthis.__blurHandlerRef = null;\r\n\t\tthis.__resizeHandlerRef = null;\r\n\t\tthis.__nsResizeListener = null;\r\n\t\tthis.__baseDocumentMouseDownRef = null;\r\n\t\tthis.__creationCompleteInterval = -1;\r\n\t\tthis.__themeContainer = null;\r\n\t\tthis.__themePrefix = null;\r\n\t\tthis.__theme = \"White\";\r\n\t\tthis.__domVariables = null; \r\n\t\tthis.__doc = null;\r\n\t\tthis.__win = null;\r\n\t\tthis.__isMobile = false;\r\n\t\tthis.__baseCompObserver = null;\r\n\t\t  /*end of private variables */\r\n\t\tthis.util = new NSUtil();\r\n\t\tthis.__setDomVariables();\r\n\t\tthis.__setID();\r\n\t\tthis.initializeComponent();\r\n\t\tif(this.util.isElementInDOM(this.__baseComponent))\r\n\t\t{\r\n\t\t\tthis.__creationComplete();\r\n\t\t}\r\n\t\telse\r\n\t\t{\r\n\t\t\tvar self = this;\r\n\t\t\tthis.__creationCompleteInterval = setTimeout(\r\n\t\t\tfunction()\r\n\t\t\t{ \r\n\t\t\t\tself.__callCreationComplete.bind(self)();\r\n\t\t\t},10);\r\n\t\t}\r\n\t\tif(!this.__focusHandlerRef)\r\n\t\t{\r\n\t\t\tthis.__focusHandlerRef = this.focusHandler.bind(this);\r\n\t\t\tthis.util.addEvent(this.__baseComponent,\"focus\",this.__focusHandlerRef);\r\n\t\t}\r\n\t\tif(!this.__blurHandlerRef)\r\n\t\t{\r\n\t\t\tthis.__blurHandlerRef = this.blurHandler.bind(this);\r\n\t\t\tthis.util.addEvent(this.__baseComponent,\"blur\",this.__blurHandlerRef);\r\n\t\t}\r\n\t\tif(!this.__baseDocumentMouseDownRef && this.__baseComponent)\r\n\t\t{\r\n\t\t\tthis.__baseDocumentMouseDownRef = this.__baseDocumentMouseDownHandler.bind(this);\r\n\t\t\tthis.util.addEvent(document,\"mousedown\", this.__baseDocumentMouseDownRef);\r\n\t\t}\r\n\t\tthis.util.dispatchEvent(this.__baseComponent,this.INITIALIZE);\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.__callCreationComplete = function(event)\r\n\t{\r\n\t\tif(this.__creationCompleteInterval != -1)\r\n\t\t{\r\n\t\t\tclearTimeout(this.__creationCompleteInterval);\r\n\t\t\tthis.__creationCompleteInterval = -1;\r\n\t\t}\r\n\t\tif(this.util.isElementInDOM(this.__baseComponent))\r\n\t\t{\r\n\t\t\tthis.__creationComplete();\r\n\t\t}\r\n\t\telse\r\n\t\t{\r\n\t\t\tvar self = this;\r\n\t\t\tthis.__creationCompleteInterval = setTimeout(\r\n\t\t\tfunction()\r\n\t\t\t{ \r\n\t\t\t\tself.__callCreationComplete.bind(self)();\r\n\t\t\t},10);\r\n\t\t}\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.__creationComplete = function()\r\n\t{\r\n\t\tif(!this.__isCreationCompleted)\r\n\t\t{\r\n\t\t\tthis.__setProperty = false;\r\n\t\t\tthis.util.addStyleClass(this.__baseComponent,\"nsContainer\");\r\n\t\t\tif(this.__isMobile)\r\n\t\t\t{\r\n\t\t\t\tthis.util.addStyleClass(this.__baseComponent,\"nsContainerMobile\");\r\n\t\t\t}\r\n\t\t\tthis.setComponentProperties();\r\n\t\t\tthis.__addMediaQueries();\r\n\t\t\tthis.util.dispatchEvent(this.__baseComponent,this.CREATION_COMPLETE);\r\n\t\t}\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.__checkBaseComponentVisibility = function() \r\n\t{\r\n\t\tif(this.__baseComponent && !this.__baseCompObserver)\r\n\t\t{\r\n\t\t\tif(!this.util.isElementVisible(this.__baseComponent))\r\n\t\t\t{\r\n\t\t\t\tvar self = this;\r\n\t\t\t\tvar callback = function() \r\n\t\t\t\t{\r\n\t\t\t\t\tif(self.util.isElementVisible(self.__baseComponent))\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tif(self.__baseCompObserver)\r\n\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\tclearInterval(self.__baseCompObserver);\r\n\t\t\t\t\t\t\tself.__baseCompObserver = null;\r\n\t\t\t\t\t\t\tif(self[\"reRender\"])\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\tself[\"reRender\"].call(self);\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t};\r\n\t\t\t\tthis.__baseCompObserver = setInterval(function(){ callback() }, 1000);\r\n\t\t\t}\r\n\t\t\telse\r\n\t\t\t{\r\n\t\t\t\tif(this.__baseCompObserver)\r\n\t\t\t\t{\r\n\t\t\t\t\tclearInterval(this.__baseCompObserver);\r\n\t\t\t\t\tthis.__baseCompObserver = null;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n\t\r\n\t//derived component should call this function to attach resize listener so that \r\n\t//when the component is fully rendered then resize starts working than in between \r\n\tNSContainerBase.prototype.attachResizeListener = function()\r\n\t{\r\n\t\tif(!this.__resizeHandlerRef)\r\n\t\t{\r\n\t\t\tthis.__resizeHandlerRef = this.resizeHandler.bind(this);\r\n\t\t\tthis.__nsResizeListener = new this.util.nsResizeListener();\r\n\t\t\tthis.__nsResizeListener.addResizeListener(this.__baseComponent,this.__resizeHandlerRef);\r\n\t\t}\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.attributeChangedCallback = function(attrName, oldVal, newVal)\r\n\t{\r\n\t\tvar data = {};\r\n\t\tdata.propertyName = attrName;\r\n\t\tdata.oldValue = oldVal;\r\n\t\tdata.newValue = newVal;\r\n\t\tthis.util.dispatchEvent(this.__baseComponent,this.PROPERTY_CHANGE,data);\r\n\t\tthis.propertyChange(attrName, oldVal, newVal, this.__setProperty);\r\n\t\tthis.__setProperty = true;\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.detachedCallback = function()\r\n\t{\r\n\t\tthis.removeComponent();\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.__setDomVariables = function()\r\n\t{\r\n\t\tthis.__domVariables = this.util.getDomVariables();\r\n\t\tthis.__doc = this.__domVariables.doc;\r\n\t\tthis.__win = this.__domVariables.win;\r\n\t\tvar objMobile = this.util.isMobile(this.__win);\r\n\t\tthis.__isMobile = objMobile.any;\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.__setID = function()\r\n\t{\r\n\t\tvar setID = false;\r\n\t\tif(this.__baseComponent && this.__baseComponent.hasAttribute(\"id\"))\r\n\t\t{\r\n\t\t\tthis.__id = this.__baseComponent.getAttribute(\"id\");\r\n\t\t}\r\n\t\telse if(this.__baseComponent && this.__baseComponent.hasAttribute(\"name\"))\r\n\t\t{\r\n\t\t\tthis.__id = this.__baseComponent.getAttribute(\"name\");\r\n\t\t\tsetID = true;\r\n\t\t}\r\n\t\telse\r\n\t\t{\r\n\t\t\tthis.__id = \"comp\" + this.util.getUniqueId();\r\n\t\t\tsetID = true;\r\n\t\t}\r\n\t\tif(setID)\r\n\t\t{\r\n\t\t\tthis.__baseComponent.setAttribute(\"id\",this.__id);\r\n\t\t}\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.__applyTheme = function(container,themePrefix) \r\n\t{\r\n\t\tif(container)\r\n\t\t{\r\n\t\t\tthis.__themeContainer = container;\r\n\t\t\tthis.__themePrefix = themePrefix;\r\n\t\t\tthis.setTheme(this.__theme);\r\n\t\t}\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.__addMediaQueries = function(isReset) \r\n\t{\r\n\t\tif(this.__arrQueries && this.__arrQueries.length && (!this.__arrQueriesTrimmed.length || isReset))\r\n\t\t{\r\n\t\t\tvar query = null;\r\n\t\t\tvar mediaQuery = null;\r\n\t\t\tvar trimmedMediaQuery = null;\r\n\t\t\tfor (var count = 0; count < this.__arrQueries.length; count++)\r\n\t\t\t{ \r\n\t\t\t\tquery = this.__arrQueries[count];\r\n\t\t\t\ttrimmedMediaQuery = query.replace(/ /g, \"\");\r\n\t\t\t\tthis.__arrQueriesTrimmed.push(trimmedMediaQuery);\r\n\t\t\t\tmediaQuery = window.matchMedia(query);\r\n\t\t\t\tmediaQuery.addListener(this.__mediaChangeHandler.bind(this));\r\n\t\t\t\tthis.__mediaChangeHandler(mediaQuery);\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.__mediaChangeHandler = function(changed) \r\n\t{\r\n\t\tvar conditionTrue = false;\r\n\t\tif(changed.matches) \r\n\t\t{\r\n\t\t\tconditionTrue = true;\r\n\t    } \r\n\t\tvar tempMedia = changed.media.replace(/ /g, \"\");\r\n\t\tvar queryIndex = -1;\r\n\t\tvar trimmedMediaQuery = null;\r\n\t\tvar length = this.__arrQueriesTrimmed.length;\r\n\t\tfor (var count = 0; count < length; count++)\r\n\t\t{ \r\n\t\t\ttrimmedMediaQuery = this.__arrQueriesTrimmed[count];\r\n\t\t\tif(conditionTrue)\r\n\t\t\t{\r\n\t\t\t\t/*console.log(tempMedia);\r\n\t\t\t\tconsole.log(trimmedMediaQuery);\r\n\t\t\t\tconsole.log(tempMedia == trimmedMediaQuery);*/\r\n\t\t\t}\r\n\t\t\tif(tempMedia === trimmedMediaQuery)\r\n\t\t\t{\r\n\t\t\t\tqueryIndex = count;\r\n\t\t\t\tbreak;\r\n\t\t\t}\r\n\t\t}\r\n\t\tthis.deviceViewChanged(conditionTrue,queryIndex,changed.media);\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.resizeHandler = function(event) \r\n\t{\r\n\t\tthis.componentResized(event);\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.initializeComponent = function() \r\n\t{\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.setComponentProperties = function() \r\n\t{\r\n\t\tthis.__isCreationCompleted = true;\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.propertyChange = function(attrName, oldVal, newVal, setProperty) \r\n\t{\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.removeComponent = function() \r\n\t{\r\n\t\tthis.__isRemoved = true;\r\n\t\tif(this.__baseCompObserver)\r\n\t\t{\r\n\t\t\tclearInterval(this.__baseCompObserver);\r\n\t\t\tthis.__baseCompObserver = null;\r\n\t\t}\r\n\t\tif(this.__resizeHandlerRef)\r\n\t\t{\r\n\t\t\tthis.__nsResizeListener.removeResizeListener(this.__baseComponent,this.__resizeHandlerRef);\r\n\t\t\tthis.__resizeHandlerRef = null;\r\n\t\t}\r\n\t\tif(this.__baseDocumentMouseDownRef)\r\n\t\t{\r\n\t\t\tthis.util.addEvent(document,\"mousedown\", this.__baseDocumentMouseDownRef);\r\n\t\t\tthis.__baseDocumentMouseDownRef = null;\r\n\t\t}\r\n\t\tthis.util.dispatchEvent(this.__baseComponent,this.REMOVE);\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.componentResized = function(event) \r\n\t{\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.deviceViewChanged = function(conditionTrue,queryIndex,query) \r\n\t{\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.initializeDOM = function(requireStyleClass)\r\n\t{\r\n\t\tif(document.head.createShadowRoot) \r\n\t\t{\r\n\t\t    if(!this.__shadow)\r\n\t\t    {\r\n\t\t    \tthis.__shadow = this.__baseComponent.createShadowRoot();\r\n\t\t    }\r\n\t\t    if(requireStyleClass)\r\n\t\t    {\r\n\t\t    \tvar shadow = this.__shadow;\r\n\t\t    \tnew this.util.ajax(ns.__dicPath[\"nsComponent.css\"], function (response) {\r\n\t\t    \t\tif(response)\r\n\t\t    \t\t{\r\n\t\t    \t\t\tvar sheet = document.createElement(\"style\");\r\n\t\t\t\t    \tsheet.innerHTML = response;\r\n\t\t\t\t    \tshadow.appendChild(sheet);\r\n\t\t    \t\t}\r\n\t\t\t    });\r\n\t\t    \tnew this.util.ajax(requireStyleClass, function (response) {\r\n\t\t    \t\tif(response)\r\n\t\t    \t\t{\r\n\t\t    \t\t\tvar sheet = document.createElement(\"style\");\r\n\t\t\t\t    \tsheet.innerHTML = response;\r\n\t\t\t\t    \tshadow.appendChild(sheet);\r\n\t\t    \t\t}\r\n\t\t\t    });\r\n\t\t    \t\r\n\t\t    }\r\n\t\t}\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.getID = function() \r\n\t{\r\n\t\treturn this.__id;\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.focusHandler = function(event)\r\n\t{\r\n\t\tthis.__focused = true;\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.blurHandler = function(event)\r\n\t{\r\n\t\tthis.__focused = false;\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.__baseDocumentMouseDownHandler = function(event)\r\n\t{\r\n\t\tif(this.__baseComponent)\r\n\t\t{\r\n\t\t\tevent = this.util.getEvent(event);\r\n\t\t\tvar target = this.util.getTarget(event);\r\n\t\t\tvar hasFocus = (this.__baseComponent === target || (this.__baseComponent.compareDocumentPosition(target) & Node.DOCUMENT_POSITION_CONTAINED_BY));\r\n\t\t\thasFocus = (hasFocus > 0);\r\n\t\t\tif(hasFocus != this.__focused)\r\n\t\t\t{\r\n\t\t\t\thasFocus = hasFocus ? this.focusHandler(event) : this.blurHandler(event);\r\n\t\t    }\r\n\t\t}\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.addChild = function(element)\r\n\t{\r\n\t\tif(element)\r\n\t\t{\r\n\t\t    if(this.__shadow)\r\n\t\t    {\r\n\t\t    \t this.__shadow.appendChild(element);\r\n\t\t    }\r\n\t\t\telse \r\n\t\t\t{\r\n\t\t\t\tthis.__baseComponent.appendChild(element);\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.deleteChild = function(element)\r\n\t{\r\n\t\tif(element)\r\n\t\t{\r\n\t\t    if(this.__shadow)\r\n\t\t    {\r\n\t\t    \t this.__shadow.removeChild(element);\r\n\t\t    }\r\n\t\t\telse \r\n\t\t\t{\r\n\t\t\t    this.removeChild(element);\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.setStyle = function(styleProp,value) \r\n\t{\r\n\t\tif(this.__baseComponent && styleProp && !this.util.isUndefinedOrNull(value))\r\n\t\t{\r\n\t\t\tthis.__baseComponent.style[styleProp] = value;\r\n\t\t}\r\n\t};\r\n\t\r\n\t\r\n\tNSContainerBase.prototype.setFocus = function(isFocus)\r\n\t{\r\n\t    this.__focused = isFocus;\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.hasFocus = function()\r\n\t{\r\n\t    return this.__focused;\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.isRemoved = function()\r\n\t{\r\n\t    return this.__isRemoved;\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.setTheme = function(theme) \r\n\t{\r\n\t\tif(this.__themeContainer && this.__themePrefix)\r\n\t\t{\r\n\t\t\tif(this.__isMobile)\r\n\t\t\t{\r\n\t\t\t\tthis.util.removeStyleClass(this.__baseComponent,\"nsContainerMobile\" +  this.__theme);\r\n\t\t\t\tthis.util.removeStyleClass(this.__themeContainer,this.__themePrefix + \"Mobile\" +  this.__theme);\r\n\t\t\t}\r\n\t\t\tthis.util.removeStyleClass(this.__themeContainer,this.__themePrefix + this.__theme);\r\n\t\t\tthis.__theme = theme;\r\n\t\t\tthis.util.addStyleClass(this.__themeContainer,this.__themePrefix + this.__theme);\r\n\t\t\tif(this.__isMobile)\r\n\t\t\t{\r\n\t\t\t\tthis.util.addStyleClass(this.__baseComponent,\"nsContainerMobile\" +  this.__theme);\r\n\t\t\t\tthis.util.addStyleClass(this.__themeContainer,this.__themePrefix + \"Mobile\" + this.__theme);\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n\t\r\n\tNSContainerBase.prototype.changeProperty = function(propertyName,value)\r\n\t{\r\n\t\tthis.__setProperty = true;\r\n\t\tthis.attributeChangedCallback(propertyName,null,value);\r\n\t};\r\n\t/*end of functions */\r\n\t\r\n\treturn NSContainerBase;\r\n})();\r\nnsModuleExport(this,\"NSContainerBase\",NSContainerBase);";