nscomponentsreact
Version:
React Wrapper Components for NSComponents
633 lines (620 loc) • 384 kB
JavaScript
import * as React from 'react';
import React__default, { forwardRef, useRef, useState, useEffect, useImperativeHandle } from 'react';
import * as ReactDOM from 'react-dom';
import { createPortal } from 'react-dom';
import { renderToStaticMarkup } from 'react-dom/server';
import { useNavigate } from 'react-router-dom';
class ReactUtil {
constructor() {
}
static hasMethod(instance, name) {
if (instance == null) {
return false;
}
return instance[name] != null;
}
static callMethod(instance, name, args) {
if (!instance || !instance[name]) {
return;
}
let method = instance[name];
return method.apply(instance, args);
}
static addMethod(instance, name, callback) {
if (!instance || instance[name]) {
return;
}
instance[name] = callback;
}
static getMethods(instance, arrCompIgnore, callback) {
arrCompIgnore = arrCompIgnore || [];
let arrFunc = [];
let arrIgnore = ["constructor", "toString", "toLocaleString", "hasOwnProperty", "isPrototypeOf", "propertyIsEnumerable",
"initializeComponent", "setComponentProperties", "propertyChange", "removeComponent", "componentResized"]
.concat(arrCompIgnore);
const proto = Object.getPrototypeOf(instance);
let arrProps = Object.getOwnPropertyNames(proto);
for (var count = 0; count < arrProps.length; count++) {
var prop = arrProps[count];
/*if(prop && typeof instance[prop] == 'function')
{
console.log(prop);
}
if(prop == "isNavOpen" || prop == "toggleNavigation" || prop == "openNavigation")
{
console.log(prop);
}*/
if (prop && typeof instance[prop] == 'function' && arrIgnore.indexOf(prop) == -1 && !prop.startsWith("_")) {
arrFunc.push(prop);
if (callback) {
callback(prop);
}
}
}
return arrFunc;
}
}
const nsCompUtil$e = require('./generated/js/nsUtil.min.js');
const NSUtil$e = nsCompUtil$e.NSUtil;
class DynamicComponentService {
constructor(component, parent) {
this.portal = null;
this.oldPortal = null;
this.staticMarkup = null;
this.staticRenderTime = 0;
this.portalRefs = new Map();
this.component = component;
this.parent = parent;
this.__nsUtil = new NSUtil$e();
this.statelessComponent = DynamicComponentService.isStateless(this.component);
this.memoHookComponent = DynamicComponentService.isMemoHook(this.component);
}
init(params, compName) {
this.container = this.__nsUtil.createDiv(null, compName + "-react-container");
params.container = this.container;
this.renderStaticMarkup(params);
this.createPortal(params);
return new Promise(resolve => this.createComponent(params, resolve));
}
rendered() {
return this.isNullRender() ||
this.staticMarkup ||
(this.isStatelessComponent() && this.statelessComponentRendered()) ||
(!this.isStatelessComponent() && this.getComponentInstance());
}
isNullRender() {
return this.staticMarkup === "";
}
isStatelessComponent() {
return this.statelessComponent;
}
isMemoHookComponent() {
return this.memoHookComponent;
}
getReactComponentName() {
return this.component.name;
}
getComponentInstance() {
return this.componentRef;
}
getElement() {
return this.container;
}
statelessComponentRendered() {
return this.container.childElementCount > 0 || this.container.childNodes.length > 0;
}
destroy() {
if (this.portal) {
this.parent.destroyPortal(this.portal);
this.portal = null; // Clear reference to avoid reusing stale portal
}
}
refreshComponent(params) {
if (params) {
params.container = this.container;
}
this.oldPortal = this.portal;
this.createPortal(params);
this.parent.updatePortal(this.oldPortal, this.portal);
}
createPortal(params) {
// Safeguard: Only create portal if one doesn't already exist
if (!this.portal) {
if (!this.isStatelessComponent() || this.isMemoHookComponent()) {
params.ref = (element) => {
this.componentRef = element;
this.removeStaticMarkup();
};
}
const reactComponent = React__default.createElement(this.component, params);
const portal = ReactDOM.createPortal(reactComponent, this.container);
this.portalRefs.set(portal, this.componentRef);
this.portal = portal;
}
}
createComponent(params, resolve) {
const observer = new MutationObserver(() => {
this.removeStaticMarkup();
});
observer.observe(this.container, { childList: true });
this.parent.mountPortal(this.portal, this, (value) => {
resolve(value);
observer.disconnect(); // Ensure observer is disconnected when component is destroyed
});
}
removeStaticMarkup() {
if (this.staticMarkup) {
if (this.staticMarkup.remove) {
// Remove the static markup for modern browsers
this.staticMarkup.remove();
}
else if (this.container.removeChild) {
// For older browsers like IE11
this.container.removeChild(this.staticMarkup);
}
this.staticMarkup = null;
}
}
renderStaticMarkup(params) {
// Safeguard to ensure static markup is not duplicated
if (this.staticMarkup)
return;
const reactComponent = React__default.createElement(this.component, params);
try {
const start = Date.now();
const staticMarkup = renderToStaticMarkup(reactComponent);
this.staticRenderTime = Date.now() - start;
if (staticMarkup === "") {
this.staticMarkup = staticMarkup;
}
else if (staticMarkup) {
this.staticMarkup = document.createElement('span');
this.staticMarkup.innerHTML = staticMarkup;
this.container.appendChild(this.staticMarkup);
}
}
catch (e) {
console.error(e);
}
}
static hasSymbol() {
return typeof Symbol === 'function' && Symbol.for;
}
static isStateless(component) {
return (typeof component === 'function' && !(component.prototype && component.prototype.isReactComponent)) ||
this.isMemoHook(component);
}
static isMemoHook(component) {
const REACT_MEMO_TYPE = DynamicComponentService.hasSymbol() ? Symbol.for('react.memo') : 0xead3;
return (typeof component === 'object' && component.$$typeof === REACT_MEMO_TYPE);
}
static addDefaultMethods(instance, componentName, waitForInstanceCallback, batchUpdateCallback) {
if (instance == null) {
return;
}
const waitForInstance = function (reactComponent, resolve, runningTime = 0) {
if (instance.__hasDestroyed) {
resolve(null);
return;
}
if (reactComponent.rendered()) {
resolve(null);
}
else {
if (waitForInstanceCallback) {
const retBool = waitForInstanceCallback(reactComponent, runningTime);
if (!retBool) {
return;
}
}
window.setTimeout(() => instance.waitForInstance(reactComponent, resolve, runningTime + 5), 5);
}
};
const mountPortal = function (portal, reactComponent, resolve) {
instance.portals = [...instance.portals, portal];
instance.batchUpdate(instance.waitForInstance(reactComponent, resolve));
};
const updatePortal = function (oldPortal, newPortal) {
instance.portals[instance.portals.indexOf(oldPortal)] = newPortal;
instance.batchUpdate();
};
const destroyPortal = function (portal) {
var _a;
try {
instance.portals = instance.portals.filter(curPortal => curPortal !== portal);
instance.batchUpdate();
const dynamicComponentInstance = (_a = this.portalRefs) === null || _a === void 0 ? void 0 : _a.get(portal); // Retrieve the instance from the map
if (dynamicComponentInstance) {
dynamicComponentInstance.destroy();
this.portalRefs.delete(portal);
}
}
catch (error) {
console.error("Error occured in destroying the portal", error);
}
};
const batchUpdate = function (callback) {
if (instance.hasPendingPortalUpdate) {
return callback && callback();
}
setTimeout(() => {
if (!instance.__hasDestroyed) {
instance.forceUpdate(() => {
batchUpdateCallback && batchUpdateCallback();
callback && callback();
instance.hasPendingPortalUpdate = false;
});
}
});
instance.hasPendingPortalUpdate = true;
};
ReactUtil.addMethod(instance, "waitForInstance", waitForInstance);
ReactUtil.addMethod(instance, "mountPortal", mountPortal);
ReactUtil.addMethod(instance, "updatePortal", updatePortal);
ReactUtil.addMethod(instance, "destroyPortal", destroyPortal);
ReactUtil.addMethod(instance, "batchUpdate", batchUpdate);
}
}
const nsCompAjax$1 = require('./generated/js/nsAjax.min.js');
const NSAjax$1 = nsCompAjax$1.NSAjax;
class NSAjaxReact {
constructor(defaultSetting) {
this.ajax = null;
this.ajax = new NSAjax$1(defaultSetting);
this.post = this.post.bind(this);
this.get = this.get.bind(this);
this.jsonp = this.jsonp.bind(this);
}
post(url, data, setting) {
return this.ajax.post(url, data, setting);
}
get(url, data, setting) {
return this.ajax.get(url, data, setting);
}
delete(url, data, setting) {
return this.ajax.delete(url, data, setting);
}
head(url, data, setting) {
return this.ajax.head(url, data, setting);
}
options(url, data, setting) {
return this.ajax.options(url, data, setting);
}
put(url, data, setting) {
return this.ajax.put(url, data, setting);
}
jsonp(url, data, setting) {
return this.ajax.jsonp(url, data, setting);
}
}
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z$a = ".nsCalendar\r\n{\r\n\twidth: 240px;\r\n\tmin-width: 240px;\r\n border-radius: 3px;\r\n overflow: hidden;\r\n}\r\n.nsCalendar .nsCalendarContainer\r\n{\r\n}\r\n.nsCalendar .nsCalendarHeader\r\n{\r\n\tdisplay: flex;\r\n height: 32px;\r\n line-height: 30px;\r\n}\r\n.nsCalendar .nsCalendarButton\r\n{\r\n\tbackground: none;\r\n border: 0;\r\n outline: none;\r\n color: inherit;\r\n font: inherit;\r\n line-height: normal;\r\n overflow: visible;\r\n padding: 0;\r\n -webkit-appearance: button;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n cursor: pointer;\r\n}\r\n.nsCalendar .nsCalendarHeaderNav\r\n{\r\n\twidth: 100%;\r\n text-align: center;\r\n}\r\n.nsCalendar .nsCalendarSelect\r\n{\r\n line-height: 1.25;\r\n height: inherit;\r\n width: 49%;\r\n display: inline-block;\r\n max-width: 100%;\r\n}\r\n.nsCalendar .nsCalendarWeekContainer\r\n{\r\n\tdisplay: flex;\r\n flex-wrap: wrap;\r\n}\r\n.nsCalendar .nsCalendarWeek\r\n{\r\n width: 32px;\r\n height: 32px;\r\n line-height: 32px;\r\n text-align: center;\r\n}\r\n.nsCalendar .nsCalendarDayContainer\r\n{\r\n\tdisplay: flex!important;\r\n\tpadding-bottom: 4px!important;\r\n\tpadding-left: 4px!important;\r\n\tpadding-right: 4px!important;\r\n}\r\n.nsCalendar .nsCalendarDayContainerBody \r\n{\t\r\n}\r\n.nsCalendar .nsCalendarDayContainerRow \r\n{\r\n\tdisplay: flex!important;\r\n}\r\n.nsCalendar .nsCalendarDayContainerCell\r\n{\r\n width: 32px;\r\n height: 32px;\r\n line-height: 32px;\r\n border-radius: 4px;\r\n text-align: center;\r\n cursor: pointer;\r\n}\r\n.nsCalendar .nsCalendarDayDisabled\r\n{\r\n\topacity: 0.35;\r\n background-image: none;\r\n border-style: initial;\r\n border-color: initial;\r\n border-image: initial;\r\n pointer-events: none;\r\n cursor: default;\r\n}\r\n.nsCalendar .nsCalendarFooterContainer\r\n{\r\n}\r\n.nsCalendar .nsCalendarTimeContainer {\r\n display: flex;\r\n flex-direction: row;\r\n /*padding-bottom: 4px;*/\r\n padding-left: 4px;\r\n padding-right: 4px;\r\n justify-content: space-between;\r\n}\r\n\r\n.nsCalendar .nsCalendarTimeInput {\r\n border-radius: 4px;\r\n height: 24px;\r\n margin: 0px;\r\n padding: 0px;\r\n text-align: center;\r\n width: 40px;\r\n font-size: 10px;\r\n}\r\n\r\n.nsCalendar .nsCalendarTimeSaveContainer {\r\n padding: 2px;\r\n padding-bottom: 0px;\r\n}\r\n\r\n.nsCalendar .nsCalendarIconButton {\r\n background: transparent;\r\n border: none;\r\n padding: 0px;\r\n}\r\n.nsCalendar .nsCalendarIconTime {\r\n width: 24px;\r\n height: 24px;\r\n}\r\n\r\n.nsCalendar .nsCalendarIconTime.nsCalendarIconTimeSmall {\r\n width: 20px;\r\n height: 20px;\r\n}\r\n\r\n.nsCalendar .nsCalendarIconTime.nsCalendarIconTimeSave{\r\n color: green;\r\n}\r\n\r\n.nsCalendar .nsCalendarIconTime.nsCalendarIconTimeCancel{\r\n color: red;\r\n}\r\n\r\n.nsCalendarWhite\r\n{\r\n\tbackground-color: #fff;\r\n\tbox-shadow: 0 4px 22px 0 rgba(0, 0, 0, 0.05);\r\n border: solid 1px #e7e9ed;\r\n}\r\n.nsCalendarWhite .nsCalendarHeaderButtonSvg \r\n{\r\n fill: #0A9297;\r\n}\r\n.nsCalendarWhite .nsCalendarSelect\r\n{\r\n\tcolor: #495057;\r\n\tbackground: #fff;\r\n\tborder: 1px solid rgba(0,0,0,.15);\r\n\tvertical-align: middle;\r\n background-size: 8px 10px;\r\n border-radius: 4px;\r\n padding: 4px 8px;\r\n font-size: 14px;\r\n}\r\n.nsCalendarWhite .nsCalendarWeekContainer\r\n{\r\n\tbackground-color: #E7E9ED;\r\n}\r\n.nsCalendarWhite .nsCalendarWeek\r\n{\r\n\tbackground-color: #E7E9ED;\r\n\tcolor: #17a2b8;\r\n font-style: italic;\r\n font-size: 80%;\r\n font-weight: 400;\r\n}\r\n.nsCalendarWhite .nsCalendarWeek\r\n{\r\n\tbackground: transparent;\r\n color: #111;\r\n border-color: #f8f9fa;\r\n}\r\n.nsCalendarWhite .nsCalendarOtherMonth\r\n{\r\n\tbackground-color: #e2e6ea;\r\n background-image: none;\r\n border-color: #dae0e5;\r\n color: #868e96!important;\r\n opacity: 0.5;\r\n border-radius: 0;\r\n}\r\n.nsCalendarWhite .nsCalendarToday\r\n{\r\n background: #fffa90;\r\n color: #777620;\r\n}\r\n.nsCalendarWhite .nsCalendarSelected\r\n{\r\n\tbackground-color: #007bff;\r\n\tcolor: #fff;\r\n}\r\n.nsCalendarWhite .nsCalendarFooterContainer\r\n{\r\n\tborder-top: 1px solid #e9e9e9;\r\n\tpadding: 0 12px;\r\n\tline-height: 38px;\r\n}.nsDatePicker\r\n{\r\n\t\r\n}\r\n.nsDatePickerContainer\r\n{\r\n\tposition: relative;\r\n display: -ms-flexbox;\r\n display: flex;\r\n width: 100%;\r\n}\r\n.nsDatePickerTextBox\r\n{\r\n line-height: 1.25;\r\n color: #495057;\r\n background-color: #fff;\r\n background-image: none;\r\n background-clip: padding-box;\r\n border: 1px solid rgba(0,0,0,.15);\r\n border-radius: .25rem;\r\n border-top-right-radius: 0;\r\n border-bottom-right-radius: 0;\r\n width:100%;\r\n}\r\n.nsDatePickerTextBoxDisabled\r\n{\r\n\tbackground: #CCC; \r\n color: #333; \r\n border: 1px solid #666;\r\n pointer-events: none; \r\n}\r\n.nsDatePickerCalContainer\r\n{\r\n\tposition: absolute;\r\n top: 100%;\r\n left: 0;\r\n z-index: 1000;\r\n display: none;\r\n float: left;\r\n min-width: 10rem;\r\n padding: .5rem 0;\r\n margin: .125rem 0 0;\r\n color: #212529;\r\n text-align: left;\r\n background-color: #fff;\r\n background-clip: padding-box;\r\n border: 1px solid rgba(0,0,0,.15);\r\n border-radius: .25rem;\r\n}\r\n.nsDatePickerCalContainerVisible\r\n{\r\n\tdisplay: inline-block!important;\r\n}\r\n.nsDatePickerButton\r\n{\r\n\tline-height: 1.25;\r\n color: #495057;\r\n text-align: center;\r\n background-color: #e9ecef;\r\n border: 1px solid rgba(0,0,0,.15);\r\n border-radius: .25rem;\r\n border-top-left-radius: 0;\r\n border-bottom-left-radius: 0;\r\n cursor: pointer;\r\n padding:1px;\r\n}\r\n";
styleInject(css_248z$a);
const nsCompUtil$d = require('./generated/js/nsUtil.min.js');
const NSUtil$d = nsCompUtil$d.NSUtil;
class NSBaseReactComponent extends React.Component {
constructor(props, state) {
super(props, state);
this.props = props;
this.state = state;
//if renderer component is refreshed using updateRowByIndex,updateRowByKeyField,updateCellByIndex,updateCellByKeyField
//then React throws error in removeChild as Grid is internally deleting all cell element while reRendering data
let nsUtil = new NSUtil$d();
nsUtil.overrideRemoveChild();
}
render() {
return (React.createElement("div", null));
}
}
const nsCompUtil$c = require('./generated/js/nsUtil.min.js');
const NSUtil$c = nsCompUtil$c.NSUtil;
const nsCompDatePicker$2 = require('./generated/js/nsDatePicker.min.js');
const NSCalendar$1 = nsCompDatePicker$2.NSCalendar;
class NSCalendarReact extends NSBaseReactComponent {
constructor(props, state) {
super(props, state);
this.props = props;
this.state = state;
this.__arrEvents = [];
this.__hasInitialized = false;
this.__hasDestroyed = false;
}
componentDidMount() {
if (!this.__objNSCalendar) {
this.__nsUtil = new NSUtil$c();
this.__arrEvents = [NSCalendar$1.DATE_SELECTED
];
const setting = this.__nsUtil.cloneObject(this.props.setting, true);
this.__setting = setting;
this.create();
this.__addEvents();
}
this.__hasInitialized = true;
}
shouldComponentUpdate(nextProps, nextState) {
return false;
}
componentWillUnmount() {
if (this.__hasInitialized) {
this.__hasDestroyed = true;
}
}
render() {
return React.createElement("div", {
style: this.__getStyleForContainer(),
ref: (e) => {
this.__container = e;
}
});
}
getElement() {
return this.__container;
}
;
create() {
this.__objNSCalendar = new NSCalendar$1(this.__container, this.__setting);
}
;
getSelectedDate() {
return this.__objNSCalendar.getSelectedDate();
}
;
getSelectedDateAsString(format) {
return this.__objNSCalendar.getSelectedDateAsString(format);
}
;
setSelectedDate(date, format) {
this.__objNSCalendar.setSelectedDate(date, format);
}
;
setYear(year) {
this.__objNSCalendar.setYear(year);
}
;
setMonth(month) {
this.__objNSCalendar.setMonth(month);
}
;
reset() {
this.__objNSCalendar.reset();
}
;
setTodayDate() {
this.__objNSCalendar.setTodayDate();
}
;
setStyle(styleProp, value) {
this.__objNSCalendar.setStyle(styleProp, value);
}
;
setFocus(isFocus) {
this.__objNSCalendar.setFocus(isFocus);
}
;
hasFocus() {
return this.__objNSCalendar.hasFocus();
}
;
setTheme(theme) {
this.__objNSCalendar.setTheme(theme);
}
;
changeProperty(propertyName, value) {
this.__objNSCalendar.changeProperty(propertyName, value);
}
;
__getStyleForContainer() {
const style = {};
const containerStyle = this.props.containerStyle;
if (containerStyle) {
Object.keys(containerStyle).forEach(key => {
style[key] = containerStyle[key];
});
}
return style;
}
__addEvents() {
const self = this;
for (const eventName of this.__arrEvents) {
this.__nsUtil.addEvent(this.__container, eventName, (function (eventNameParam) {
return function (event) {
console.log(event);
event.stopPropagation();
event.stopImmediatePropagation();
self.__eventListener.bind(self)(event, eventNameParam);
};
})(eventName));
}
}
__eventListener(event, eventName) {
const eventListenerName = 'on' + eventName[0].toUpperCase() + eventName.substring(1);
if (this.props[eventListenerName]) {
this.props[eventListenerName](event);
}
}
}
const nsCompUtil$b = require('./generated/js/nsUtil.min.js');
const NSUtil$b = nsCompUtil$b.NSUtil;
const nsCompDatePicker$1 = require('./generated/js/nsDatePicker.min.js');
const NSDatePicker$1 = nsCompDatePicker$1.NSDatePicker;
class NSDatePickerReact extends NSBaseReactComponent {
constructor(props, state) {
super(props, state);
this.props = props;
this.state = state;
this.__arrEvents = [];
this.__hasInitialized = false;
this.__hasDestroyed = false;
}
componentDidMount() {
if (!this.__objNSDatePicker) {
this.__nsUtil = new NSUtil$b();
this.__arrEvents = [NSDatePicker$1.CALENDAR_OPENED,
NSDatePicker$1.CALENDAR_CLOSED,
NSDatePicker$1.DATE_SELECTED,
NSDatePicker$1.INPUT_CHANGE,
];
const setting = this.props.setting; //this.__nsUtil.cloneObject(this.props.setting,true);
this.__setting = setting;
this.create();
this.__addEvents();
}
this.__hasInitialized = true;
}
shouldComponentUpdate(nextProps, nextState) {
if (JSON.stringify(nextProps.value) !== JSON.stringify(this.props.value)) {
let valDate = nextProps.value;
if (typeof valDate === 'string') {
valDate = new Date(valDate);
}
this.setSelectedDate(valDate, null);
}
return false;
}
componentWillUnmount() {
if (this.__hasInitialized) {
this.__hasDestroyed = true;
}
}
render() {
return React.createElement("div", {
style: this.__getStyleForContainer(),
ref: (e) => {
this.__container = e;
}
});
}
getElement() {
return this.__container;
}
;
create() {
this.__objNSDatePicker = new NSDatePicker$1(this.__container, this.__setting);
}
;
getSelectedDate() {
return this.__objNSDatePicker.getSelectedDate();
}
;
getSelectedDateAsString(format) {
return this.__objNSDatePicker.getSelectedDateAsString(format);
}
;
setSelectedDate(date, format) {
this.__objNSDatePicker.setSelectedDate(date, format);
}
;
setYear(year) {
this.__objNSDatePicker.setYear(year);
}
;
setMonth(month) {
this.__objNSDatePicker.setMonth(month);
}
;
reset() {
this.__objNSDatePicker.reset();
}
;
setTodayDate() {
this.__objNSDatePicker.setTodayDate();
}
;
showCalendar(isAbsolutePosition) {
this.__objNSDatePicker.showCalendar(isAbsolutePosition);
}
;
closeCalendar() {
this.__objNSDatePicker.closeCalendar();
}
;
getCalendar() {
return this.__objNSDatePicker.getCalendar();
}
;
getTextBox() {
return this.__objNSDatePicker.getTextBox();
}
;
getText() {
if (this.__objNSDatePicker) {
return this.__objNSDatePicker.getText();
}
return "";
}
;
toggleCalendarVisibility() {
this.__objNSDatePicker.toggleCalendarVisibility();
}
;
setStyle(styleProp, value) {
this.__objNSDatePicker.setStyle(styleProp, value);
}
;
setFocus(isFocus) {
this.__objNSDatePicker.setFocus(isFocus);
}
;
hasFocus() {
return this.__objNSDatePicker.hasFocus();
}
;
setTheme(theme) {
this.__objNSDatePicker.setTheme(theme);
}
;
changeProperty(propertyName, value) {
this.__objNSDatePicker.changeProperty(propertyName, value);
}
;
__getStyleForContainer() {
const style = {};
const containerStyle = this.props.containerStyle;
if (containerStyle) {
Object.keys(containerStyle).forEach(key => {
style[key] = containerStyle[key];
});
}
return style;
}
__addEvents() {
const self = this;
for (const eventName of this.__arrEvents) {
this.__nsUtil.addEvent(this.__container, eventName, (function (eventNameParam) {
return function (event) {
event.stopPropagation();
event.stopImmediatePropagation();
self.__eventListener.bind(self)(event, eventNameParam);
};
})(eventName));
}
}
__eventListener(event, eventName) {
const eventListenerName = 'on' + eventName[0].toUpperCase() + eventName.substring(1);
if (this.props[eventListenerName]) {
this.props[eventListenerName](event);
}
}
}
var css_248z$9 = "/************Util Classes ***************/\r\n.nsContainer\r\n{\r\n\tdisplay:block;\r\n}\r\n/* used to measure the scrollbar width on a temporal element */\r\n.nsGetScrollBar \r\n{\r\n width: 50px;\r\n height: 50px;\r\n position: absolute;\r\n top: -9999px;\r\n overflow: auto;\r\n top:-100px;\r\n left:-100px\r\n}\r\n\r\n.nsGetDPI \r\n{\r\n height: 1in;\r\n left: -100%;\r\n position: absolute;\r\n top: -100%;\r\n width: 1in;\r\n}\r\n\r\n*.nsUnselectable \r\n{\r\n -webkit-touch-callout: none;\r\n\t-webkit-user-select: none;\r\n\t-khtml-user-select: none;\r\n\t-moz-user-select: none;\r\n\t-ms-user-select: none;\r\n\tuser-select: none;\r\n}\r\n\r\n.nsGhostElement\r\n{\r\n background:#D8D8D8;\r\n padding: 20px; \r\n width: 200px;\r\n height: 150px; \r\n position: absolute;\r\n margin: 0;\r\n padding: 0;\r\n z-index: 98;\r\n}\r\n\r\n.nsMoveOnClick\r\n{\r\n\tleft:0px;\r\n\ttop:0px;\r\n\ttransition: left .5s cubic-bezier(.42,-0.3,.78,1.25), \r\n\t\t\t\ttop .5s cubic-bezier(.42,-0.3,.78,1.25);\r\n}\r\n/************End of Util Classes ***************/\r\n\r\n/***********For NSToolTip ***************/\r\n.nsTooltip \r\n{\t\r\n\tposition: relative;\r\n}\r\n.nsTooltip span \r\n{\r\n\tcolor: #000000; \r\n\tmargin-left: -999em;\r\n\tposition: absolute;\r\n\toutline: none;\r\n\ttext-decoration: none;\r\n}\r\n.nsTooltip:hover span \r\n{\r\n\tborder-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; \r\n\tbox-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);\r\n\tfont-family: Calibri, Tahoma, Geneva, sans-serif;\r\n\tposition: absolute; left: 1em; top: 2em; z-index: 99;\r\n\tmargin-left: 0; width: 250px;\r\n}\r\n.nsTooltip:hover em \r\n{\r\n\tfont-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;\r\n\tdisplay: block; padding: 0.2em 0 0.6em 0;\r\n}\r\n.nsTooltipClassic \r\n{ \r\n\tpadding: 0.8em 1em; \r\n}\r\n.nsTooltipCustom \r\n{ \r\n\tpadding: 0.5em 0.8em 0.8em 2em; \r\n}\r\n.nsTooltipClassic \r\n{\r\n\tbackground: #FFFFAA; border: 1px solid #FFAD33; \r\n}\r\n.nsTooltipCritical \r\n{ \r\n\tbackground: #FFCCAA; border: 1px solid #FF3334;\t\r\n}\r\n.nsTooltipHelp \r\n{ \r\n\tbackground: #9FDAEE; border: 1px solid #2BB0D7;\t\r\n}\r\n.nsTooltipInfo \r\n{ \r\n\tbackground: #9FDAEE; border: 1px solid #2BB0D7;\t\r\n}\r\n.nsTooltipWarning \r\n{ \r\n\tbackground: #FFFFAA; border: 1px solid #FFAD33; \r\n}\r\n\r\n/***********End of NSToolTip ***************/\r\n/***********For NSCheckBox ****************/\r\n/*.checkbox ,.radioButton\r\n{\r\n display:block;\r\n margin:4px 0 0 0;\r\n padding:0;\r\n width:13px;\r\n height:13px;\r\n}*/\r\n\r\n.label\r\n{\r\n cursor:pointer; /* iPad Label Click Fix */\r\n}\r\n/***********End of NSCheckBox ****************/\r\n\r\n/***********For NSDividerBox ***************/\r\n.nsHorizontalResizerContainer\r\n{\r\n\tposition: relative;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\toverflow: hidden;\r\n}\r\n.nsResizerAnimation\r\n{\r\n \t-webkit-transition: all 0.6s ease-in-out;\r\n \t-moz-transition: all 0.6s ease-in-out;\r\n \t-o-transition: all 0.6s ease-in-out;\r\n \ttransition: all 0.6s ease-in-out;\r\n}\r\n.nsHorizontalResizerChild \r\n{\r\n\tposition: absolute;\r\n\tleft: 0;\r\n\tright: 0;\r\n\twidth:100%;\r\n\toverflow:auto;\r\n}\r\n.nsVerticalResizerContainer\r\n{\r\n\tposition: relative;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n.nsVerticalResizerChild \r\n{\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\theight:100%;\r\n\toverflow:auto;\r\n}\r\n.nsDivider\r\n{\tbackground: #d9d9d9;\r\n border-color: #b3b3b3;\r\n box-shadow: none;\r\n -webkit-box-shadow: none;\r\n -moz-box-shadow: none;\r\n}\r\n.nsDivider:hover\r\n{\r\n\tborder-color:#222; \r\n\tbackground-color:#888888; \r\n\tcolor: #fff;\r\n}\r\n\r\n.nsDivider:hover > .nsResizerLines\r\n{\r\n\tborder-color:#d9d9d9; \r\n\tbackground-color:#b3b3b3; \r\n}\r\n.nsVerticalResizer \r\n{\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tcursor: col-resize;\r\n}\r\n.nsHorizontalResizer \r\n{\r\n\tposition: absolute;\r\n\tleft: 0;\r\n\tright: 0;\r\n\tcursor: row-resize;\r\n}\r\n.nsVerticalResizerLines \r\n{\r\n position: absolute;\r\n border-color: #999;;\r\n background-color: #999;;\r\n cursor: pointer;\r\n left:0;\r\n top: 50%;\r\n height: 40px;\r\n width: 100%;\r\n}\r\n.nsHorizontalResizerLines\r\n{\r\n position: absolute;\r\n border-color: #999;;\r\n background-color: #999;;\r\n cursor: pointer;\r\n top:0;\r\n left: 50%;\r\n width: 40px;\r\n height: 100%;\r\n}\r\n.nsResizerCollapser \r\n{\r\n\t position: absolute;\r\n background-color: #999;\r\n cursor: pointer;\r\n display: inline-block;\r\n \r\n}\r\n.nsVerticalResizerCollapser\r\n{\r\n height: 20px;\r\n left: 0;\r\n margin-top: -10px;\r\n top: 5%;\r\n width: inherit;\r\n}\r\n.nsHorizontalResizerCollapser {\r\n height: inherit;\r\n top: 0;\r\n left: 5%;\r\n margin-left: -10px;\r\n width: 20px;\r\n}\r\n/************End of NSDividerBox******************/\r\n\r\n/***********For NSBanner ***************/\r\n.nsInfoBanner\r\n {\r\n border-bottom:1px solid black;\r\n background:#E5ECEF;\r\n padding: 3px 0;\r\n text-indent: 5px;\r\n font: normal 11px Verdana;\r\n }\r\n \r\n .nsWarningBanner\r\n {\r\n border-bottom:1px solid black;\r\n background:#FFFF99;\r\n padding: 3px 0;\r\n text-indent: 5px;\r\n font: normal 11px Verdana;\r\n }\r\n \r\n .nsErrorBanner\r\n {\r\n border-bottom:1px solid black;\r\n background:#FACDCA;\r\n padding: 3px 0;\r\n text-indent: 5px;\r\n font: normal 11px Verdana;\r\n }\r\n \r\n .nsCloseBannerButton\r\n{\r\n font-family: Verdana, Geneva, sans-serif;\r\n font-size: small;\r\n font-weight: bold;\r\n color : #000000;\r\n}\r\n\r\n.nsCloseBannerButton_hover\r\n{\r\n font-family: Verdana, Geneva, sans-serif;\r\n font-size: small;\r\n font-weight: bold;\r\n color : #FC1D00;\r\n}\r\n\r\n.nsFixedElement\r\n{\r\n position:fixed;\r\n}\r\n/************End of NSBanner******************/\r\n/************Start of nsScroller************/\r\n.gm-scrollbar-container {\r\n position: relative;\r\n overflow: hidden!important;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n.gm-scrollbar-container .gm-scroll-view {\r\n width: 100%;\r\n height: 100%;\r\n overflow: scroll;\r\n -webkit-overflow-scrolling: touch;\r\n}\r\n\r\n/* @option: autoshow */\r\n.gm-scrollbar-container.gm-autoshow .gm-scrollbar {\r\n opacity: 0;\r\n transition: opacity 120ms ease-out;\r\n}\r\n.gm-scrollbar-container.gm-autoshow:hover .gm-scrollbar,\r\n.gm-scrollbar-container.gm-autoshow:focus .gm-scrollbar {\r\n opacity: 1;\r\n transition: opacity 340ms ease-out;\r\n}\r\n.gm-prevented .gm-scrollbar {\r\n display: none;\r\n}\r\n.gm-scrollbar {\r\n position: absolute;\r\n right: 2px;\r\n bottom: 2px;\r\n z-index: 1;\r\n border-radius: 3px;\r\n}\r\n\r\n.gm-scrollbar.-vertical {\r\n width: 6px;\r\n top: 2px;\r\n}\r\n\r\n.gm-scrollbar.-horizontal {\r\n height: 6px;\r\n left: 2px;\r\n}\r\n\r\n.gm-scrollbar .thumb {\r\n position: relative;\r\n width: 0;\r\n height: 0;\r\n cursor: pointer;\r\n border-radius: inherit;\r\n background-color: rgba(0,0,0,.2);\r\n}\r\n\r\n.gm-scrollbar .thumb:hover,\r\n.gm-scrollbar .thumb:active {\r\n background-color: rgba(0,0,0,.3);\r\n}\r\n\r\n.gm-scrollbar.-vertical .thumb {\r\n width: 100%;\r\n}\r\n\r\n.gm-scrollbar.-horizontal .thumb {\r\n height: 100%;\r\n}\r\n\r\n.gm-scrollbar-disable-selection {\r\n -webkit-touch-callout: none;\r\n -webkit-user-select: none;\r\n -khtml-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n\r\n.gm-prevented {\r\n -webkit-overflow-scrolling: touch;\r\n}\r\n\r\n.nsScrollerBackground \r\n{\r\n\tbackground-color:rgba(0,0,0,0.15);\r\n \tbox-shadow:inset 0 1px 3px rgba(0,0,0,0.5),inset 0 0 2px rgba(0,0,0,0.2),0 0 0 1px rgba(255,255,255,0.5);\r\n}\r\n/************End of nsScroller************/\r\n/************Start of Loader******************/\r\n.nsLoaderOverlay {\r\n position: absolute;\r\n z-index: 999;\r\n top: 0px;\r\n bottom: 0px;\r\n left: 0px;\r\n right: 0px;\r\n background:#333;/*#FFFFFF;*/\r\n opacity:0.8;\r\n}\r\n\r\n.nsLoaderContainerParent {\r\n\tposition:absolute;\r\n\tz-index: 1000;\r\n\tdisplay: inline-block;\r\n\tbackground-color:#fff;\r\n\twidth:300px;\r\n\theight:140px;\r\n\tborder:1px solid black;\r\n\t-webkit-box-shadow: rgba(50, 50, 50, 0.74902) 0px 10px 5px 0px; \r\n\tbox-shadow: rgba(50, 50, 50, 0.74902) 0px 10px 5px 0px;\r\n}\r\n\t\t\t\r\n.nsLoaderContainer {\r\n\tvertical-align:center;\r\n\tposition:relative;\r\n\ttext-align:center;\r\n}\r\n\r\n.nsLoaderText {\r\n\tpadding-top:10px;\r\n\tposition:absolute;\r\n\ttop:0px;\r\n\tleft:0px;\r\n\tfont-weight: bold;\r\n}\r\n\r\n/* loading dots */\r\n.nsLoaderText:after {\r\n content: ' ...';\r\n -webkit-animation: dots 1s steps(5, end) infinite;\r\n animation: dots 1s steps(5, end) infinite;\r\n}\r\n/************End of Loader******************/\r\n.nsListRenderer \r\n{\r\n\toverflow:hidden;\r\n\ttext-align: left;\r\n}\r\n\r\n/************For making an element resizable and draggable ***********/\r\n.nsHiddenDiv {\r\n background: #999;\r\n opacity: 0;\r\n position: absolute;\r\n margin: 0;\r\n padding: 0;\r\n z-index: 98;\r\n -webkit-transition: all 0.25s ease-in-out;\r\n -moz-transition: all 0.25s ease-in-out;\r\n -ms-transition: all 0.25s ease-in-out;\r\n -o-transition: all 0.25s ease-in-out;\r\n transition: all 0.25s ease-in-out;\r\n}\r\n\r\n.nsTextHighlight{\r\n color:#CA2420;\r\n font-weight:bold;\r\n font-size:105%;\r\n}\r\n\r\n/************For making an row of table Draggable ***********/\r\n.nsDraggableRow{\r\n}\r\n.nsDraggableRow.nsDraggableRowDrag\r\n{\r\n\tcursor: move;\t\r\n}\r\n.nsDraggableCloneRow{\r\n background: #FFF;\r\n position: absolute;\r\n}\r\n.nsDraggableCloneRow > table {\r\n\tborder-collapse: collapse;\r\n}\r\n\r\n.nsDraggableCloneRow > table,.nsDraggableCloneRow > th,.nsDraggableCloneRow > td {\r\n\tborder: 1px solid black;\r\n}\r\n.nsDraggingRow {\r\n box-shadow:3px 5px 6px -4px rgba(0,0,0,0.8);\r\n}\r\n.nsDraggingRow > td {\r\n position:relative;\r\n z-index: 9999;\r\n}\r\n.nsDraggingRow > td:first-child::before {\r\n\tborder-top-left-radius:5px;\r\n\tborder-bottom-left-radius:5px;\r\n}\r\n.nsDraggingRow > td:last-child::before {\r\n\tborder-top-right-radius:5px;\r\n\tborder-bottom-right-radius:5px;\r\n}\r\n.nsDraggingRow > td::before {\r\n \tbackground-color:white;\r\n \tbox-shadow:3px 5px 6px -4px rgba(0,0,0,0.8);\r\n display:block;\r\n padding:0 9px 0 0;\r\n content:'';\r\n position:absolute;\r\n left:0;\r\n top:0;\r\n z-index:-1;\r\n width:100%;\r\n height:100%;\r\n}\r\n.nsDottedRow > td:first-child \r\n{\r\n border-left: 2px dotted red!important;\r\n}\r\n.nsDottedRow > td\r\n{\r\n border-top: 2px dotted red!important;\r\n border-bottom: 2px dotted red!important;\r\n}\r\n.nsDottedRow > td:last-child \r\n{\r\n border-right: 2px dotted red!important;\r\n}\r\n.nsTableRowMoverGhost {\r\n background: #e5e5e5;\r\n border: 1px solid black;\r\n cursor: move;\r\n font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\r\n font-size: 14px;\r\n line-height: 1.4;\r\n overflow: hidden;\r\n padding: 3px;\r\n position: absolute;\r\n text-overflow: ellipsis;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n background: white;\r\n border-radius: 2px;\r\n box-shadow: none;\r\n padding: 4px;\r\n border: 1px solid #BDC3C7;\r\n color: rgba(0, 0, 0, 0.54);\r\n font-weight: 600;\r\n font-size: 12px;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\r\n height: 32px !important;\r\n line-height: 32px;\r\n margin: 0;\r\n padding: 0 8px;\r\n transform: translateY(8px);\r\n z-index: 10000;\r\n}\r\n.nsTableRowMoverAnimation {\r\n\tposition: absolute;\r\n -webkit-transition: top 0.4s, height 0.4s, background-color 0.1s, opacity 0.2s, -webkit-transform 0.4s;\r\n transition: top 0.4s, height 0.4s, background-color 0.1s, opacity 0.2s, -webkit-transform 0.4s;\r\n transition: transform 0.4s, top 0.4s, height 0.4s, background-color 0.1s, opacity 0.2s;\r\n transition: transform 0.4s, top 0.4s, height 0.4s, background-color 0.1s, opacity 0.2s, -webkit-transform 0.4s;\r\n}\r\n\r\n/*********************NSPopUp CSS **********************/\r\n.nsPopUp {\r\n position: absolute;\r\n width: 200px;\r\n padding: 2px;\r\n margin: 0;\r\n background-color: #fefefe;\r\n border: solid thin #1e4691;\r\n z-index: 999;\r\n border-radius: 5px;\r\n box-shadow: 1px 1px 4px rgba(0,0,0,.2);\r\n opacity: 0;\r\n -webkit-transform: translate(0, 15px) scale(.95);\r\n transform: translate(0, 15px) scale(.95);\r\n transition: transform 0.1s ease-out, opacity 0.1s ease-out;\r\n pointer-events: none;\r\n display: none;\r\n}\r\n\r\n.nsPopUp.nsShowPopUp {\r\n opacity: 1!important;\r\n -webkit-transform: translate(0, 0) scale(1);\r\n transform: translate(0, 0) scale(1)!important;\r\n pointer-events: auto!important;\r\n display: block;\r\n}\r\n\r\n.nsPopUp .nsPopUpHeader\r\n{\r\n\toutline: none;\r\n\tborder-bottom: 1px solid rgb(218, 222, 224);\r\n\twidth: 100%;\r\n}\r\n\r\n.nsPopUp .nsPopUpHeaderContainer\r\n{\r\n padding: 0;\r\n\twhite-space: nowrap;\r\n\twidth: 100%;\r\n\tmin-height:30px;\r\n\tbox-sizing: content-box;\r\n\tbackground: transparent;\r\n -webkit-font-smoothing: antialiased;\r\n cursor: default;\r\n background-color: rgb(255, 255, 255);\r\n white-space: normal;\r\n -webkit-appearance: none;\r\n overflow: hidden;\r\n border-width: 0px;\r\n border-style: solid;\r\n border-color: rgb(218, 222, 224);\r\n border-image: initial;\r\n}\r\n\r\n.nsPopUp .nsPopUpTitleContainer\r\n{\r\n\theight:calc(100% - 1px);\r\n\twidth:calc(100% - 40px);\r\n\tdisplay: inline-block;\r\n vertical-align: top;\r\n border-width: 0px;\r\n margin-top: 0px;\r\n box-sizing: content-box;\r\n letter-spacing: 0px;\r\n}\r\n\r\n.nsPopUp .nsPopUpTitle\r\n{\r\n\tfont-weight: bold;\r\n\tpadding-top: 0px;\r\n padding-bottom: 0px;\r\n\tpadding-left: 12px;\r\n\theight: 100%;\r\n box-sizing: border-box;\r\n padding: 4px 12px;\r\n}\r\n\r\n.nsPopUp .nsPopUpCloseContainer\r\n{\r\n\tdisplay: inline-block;\r\n vertical-align: top;\r\n\tbox-sizing: border-box;\r\n height:calc(100% - 1px);\r\n width:40px;\r\n padding: 3px 2px;\r\n overflow: hidden;\r\n\ttext-align: center;\r\n position: relative;\r\n cursor: pointer;\r\n padding: 0px;\r\n margin: 0px auto;\r\n overflow: visible;\r\n}\r\n\r\n.nsPopUp .nsPopUpBtnClose\r\n{\r\n\theight: 100%;\r\n width: 100%;\r\n border-width: 0px;\r\n position: relative;\r\n z-index: 0;\r\n background-color: transparent;\r\n border: none;\r\n cursor: pointer;\r\n vertical-align: middle;\r\n padding: 0px;\r\n}\r\n\r\n.nsPopUp .nsPopUpBtnClose::before\r\n{\r\n\tcontent: \"\";\r\n opacity: 0;\r\n position: absolute;\r\n transition-duration: 0.15s;\r\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\r\n z-index: -1;\r\n bottom: 0px;\r\n left: 0px;\r\n right: 0px;\r\n top: 0px;\r\n transform: scale(0);\r\n transition-property: transform, opacity;\r\n border-radius: 50%;\r\n}\r\n\r\n.nsPopUp .nsPopUpClose\r\n{\r\n\tfont-size: 20px;\r\n height: 20px;\r\n width: 20px;\r\n display: inline-block;\r\n text-align: center;\r\n color: rgb(148, 161, 179);\r\n}\r\n\r\n.nsPopUp .nsPopUpClose::before\r\n{\r\n\tdisplay: inline-block;\r\n \tcontent: \"\\00d7\";\r\n \tfont-weight: 300;\r\n \tfont-family: Arial, sans-serif;\r\n}\r\n\r\n\r\n\r\n/************For adding tooltip to an element ***********/\r\n.nsElementTooltipContainer\r\n{\r\n\tmin-width: 100px; \r\n\tpadding: 10px 12px; \r\n\topacity: 0; \r\n\tdisplay:none;\r\n\tz-index: 99999; \r\n\tposition: absolute; \r\n\tmargin-left: 0px;\r\n\tmargin-top: 30px; \r\n\tfont-size: 12px; \r\n\tfont-style: normal; \r\n\t-webkit-border-radius: 3px; \r\n\t-moz-border-radius: 3px; -o-border-radius: 3px; \r\n\tborder-radius: 3px; \r\n\t-webkit-box-shadow: 4px 4px 4px #d9b3c3; \r\n\t-moz-box-shadow: 4px 4px 4px #d9b3c3; \r\n\tbox-shadow: 4px 4px 4px #d9b3c3; \r\n\tcolor: #000000; \r\n\tbackground: #f4f4f4; \r\n\tbackground: -moz-linear-gradient(top, #FBF5E6 0%, #FFFFFF 100%); \r\n\tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBF5E6), color-stop(100%,#FFFFFF)); \r\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBF5E6', endColorstr='#FFFFFF',GradientType=0 ); \r\n\tborder: 1px solid #8c8c8c; \r\n} \r\n\r\n\r\n.nsElementTooltipContainerVisible\r\n{ \r\n\tdisplay: inline; \r\n\tborder: 1px solid #8c8c8c; \r\n\tbackground: #f4f4f4;\r\n\topacity: 1; \r\n\ttext-decoration:none;\r\n\toverflow: visible; \r\n}\r\n\r\n.nsElementTooltipContainer .nsElementTooltipTipArrow\r\n{ \t\r\n\twidth: 15px; \r\n\theight: 15px; \r\n\tmargin-left: 5%; \r\n\tmargin-top: -19px; \r\n\tdisplay: block; \r\n\tposition: absolute; \r\n\t-webkit-transform: rotate(-45deg); \r\n\t-moz-transform: rotate(-45deg); \r\n\t-o-transform: rotate(-45deg); \r\n\ttransform: rotate(-45deg); \r\n\t-webkit-box-shadow: inset -1px 1px 0 #fff; \r\n\t-moz-box-shadow: inset 0 1px 0 #fff; -o-box-shadow: inset 0 1px 0 #fff; \r\n\tbox-shadow: inset 0 1px 0 #fff; \r\n\tbackground: #f4f4f4; \r\n\tborder-top: 1px solid #8c8c8c; \r\n\tborder-right: 1px solid #8c8c8c; \t \r\n}\r\n\r\n/************************ Custom Buttons ********************************/\r\n.nsButton {\r\nbackground-color: #4CAF50;\r\nborder: none;\r\ncolor: #FFFFFF;\r\npadding: 15px 15px;\r\ntext-align: center;\t\r\n-webkit-transition-duration: 0.4s; /* Safari */\r\ntransition-duration: 0.4s;\r\nmargin: 2px;\r\ntext-decoration: none;\r\nfont-size:16px;\r\n}\r\n.nsButtonGreen{border-radius:3px;background-color:#4CAF50;color:white;border: 2px solid #4CAF50;}\r\n.nsButtonBlue{border-radius:3px;background-color:#008CBA;color:white;border:2px solid #008CBA;}\r\n.nsButtonRed {border-radius:3px;background-color:#f44336;color:white;border:2px solid #f44336;}\r\n.nsButtonGrey {border-radius:3px;background-color:#A9A9A9;border:2px solid #A9A9A9;}\r\n.nsButtonOrange {border-radius:3px;background-color:#f0ad4e;border:2px solid #f0ad4e;}\r\n\r\n.nsButtonGreen:hover {background-color:white;color:black;border:2px solid #4CAF50;}\r\n.nsButtonBlue:hover {background-color:white;color:black;border:2px solid #008CBA;}\r\n.nsButtonRed:hover {background-color:white;color:black;border:2px solid #f44336;}\r\n.nsButtonGrey:hover {background-color:white;color:black;border:2px solid #e7e7e7;}\r\n.nsButtonOrange:hover {background-color:white;color:black;border:2px solid #f0ad4e;}\r\n\r\n.nsButtonShadow:hover{box-shadow:0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19) !important;}\r\n.nsButtonDisabled{cursor: not-allowed;opacity: 0.6;}\r\n\r\n.nsButtonFont10 {font-size:10px;padding: 4px 4px;}\r\n.nsButtonFont12 {font-size:12px;padding: 6px 6px;}\r\n.nsButtonFont14 {font-size:14px;padding: 8px 8px;}\r\n.nsButtonFont16 {font-size:16px;padding: 8px 8px;}\r\n.nsButtonFont18 {font-size:18px;padding: 9px 9px;}\r\n.nsButtonFont20 {font-size:20px;padding: 10px 10px;}\r\n.nsButtonFont24 {font-size:24px;padding: 10px 10px;}\r\n\r\n/************************ SearchTextBox ********************************/\r\n.nsSearchTextBoxWrapper {\r\n display: block;\r\n float: left;\r\n margin-bottom: 5px;\r\n border-width: 1px;\r\n border-style: solid;\r\n\tborder-color: #989898;\r\n}\r\n.nsSearchTextBoxWrapper .nsSearchInput {\r\n float: left;\r\n height: 20px;\r\n width: calc(100% - 20px);\r\n border: 1px none;\r\n padding: 0;\r\n text-indent: 2px;\r\n}\r\n.nsSearchTextBoxWrapper .nsSearchIconWrapper,.nsSearchTextBoxWrapper .nsSearchIconWrapper:hover {\r\n float: right;\r\n height: 20px;\r\n width: 11%;\r\n display: block;\r\n border-width: 0 0 0 1px;\r\n border-style: solid;\r\n}\r\n.nsSearchTextBoxWrapper .nsSearchIconWrapper {\r\n border-color: #989898;\r\n background-color: #e6e6e6;\r\n width:20px;\r\n\tmax-width:20px;\r\n}\r\n.nsSearchTextBoxWrapper .nsSearchIconWrapper:hover {\r\n border-color: black;\r\n background-color: #d3d3d3;\r\n width:20px;\r\n\t max-width:20px;\r\n}\r\n.nsSearchTextBoxWrapper .nsSearchIconParent > * {\r\n padding:1px;\r\n}\r\n.nsSearchTextBoxWrapper .nsSearchIcon\r\n{\r\n \twidth:14px;\r\n \theight:14px;\r\n}\r\n.nsSearchTextBoxWrapper .nsSearchIcon:hover\r\n{\r\n\tfill:red;\r\n}\r\n\r\n.nsSearchInlineTextBox \r\n{\r\n background: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDYxNS41MiA2MTUuNTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYxNS41MiA2MTUuNTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8Zz4KCQk8ZyBpZD0iU2VhcmNoX194MjhfYW5kX3Rob3Vfc2hhbGxfZmluZF94MjlfIj4KCQkJPGc+CgkJCQk8cGF0aCBkPSJNNjAyLjUzMSw1NDkuNzM2bC0xODQuMzEtMTg1LjM2OGMyNi42NzktMzcuNzIsNDIuNTI4LTgzLjcyOSw0Mi41MjgtMTMzLjU0OEM0NjAuNzUsMTAzLjM1LDM1Ny45OTcsMCwyMzEuMjU4LDAgICAgICBDMTA0LjUxOCwwLDEuNzY1LDEwMy4zNSwxLjc2NSwyMzAuODJjMCwxMjcuNDcsMTAyLjc1MywyMzAuODIsMjI5LjQ5MywyMzAuODJjNDkuNTMsMCw5NS4yNzEtMTUuOTQ0LDEzMi43OC00Mi43NzcgICAgICBsMTg0LjMxLDE4NS4zNjZjNy40ODIsNy41MjEsMTcuMjkyLDExLjI5MSwyNy4xMDIsMTEuMjkxYzkuODEyLDAsMTkuNjItMy43NywyNy4wODMtMTEuMjkxICAgICAgQzYxNy40OTYsNTg5LjE4OCw2MTcuNDk2LDU2NC43NzcsNjAyLjUzMSw1NDkuNzM2eiBNMzU1LjksMzE5Ljc2M2wtMTUuMDQyLDIxLjI3M0wzMTkuNywzNTYuMTc0ICAgICAgYy0yNi4wODMsMTguNjU4LTU2LjY2NywyOC41MjYtODguNDQyLDI4LjUyNmMtODQuMzY1LDAtMTUyLjk5NS02OS4wMzUtMTUyLjk5NS0xNTMuODhjMC04NC44NDYsNjguNjMtMTUzLjg4LDE1Mi45OTUtMTUzLjg4ICAgICAgczE1Mi45OTYsNjkuMDM0LDE1Mi45OTYsMTUzLjg4QzM4NC4yNzEsMjYyLjc2OSwzNzQuNDYyLDI5My41MjYsMzU1LjksMzE5Ljc2M3oiIGZpbGw9IiMwMDAwMDAiLz4KCQkJPC9nPgoJCTwvZz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K) no-repeat 4px 2px #FFF;\r\n min-height: 20px !important;\r\n border: 1px solid #848484;\r\n\tborder-radius:2px;\r\n\tpadding-left:24px !important;\r\n\t-webkit-transition: all 0.3s ease-out;\r\n -moz-transition: all 0.3s ease-out;\r\n -ms-transition: all 0.3s ease-out;\r\n -o-transition: all 0.3s ease-out;\r\n transition: all 0.3s ease-out;\r\n