/* Smart HTML Elements v6.0.0 (2020-Jan)

Copyright (c) 2011-2020 jQWidgets.

License: https://htmlelements.com/license/ */

(function () {

'use strict';

const Version = '6.0.0';

const templates = [];

let namespace = 'Smart';

if (window[namespace] && window[namespace].Version) {

if (window[namespace].Version === Version) {

return;

}

else if (window[namespace].Version !== Version) {

namespace += Version;

}

else {

let suffix = 2;

while (window[namespace]) {

namespace += suffix.toString();

suffix++;

}

}

}

function Import(urls, async) {

let loadedScriptsLength = 0;

const loadScript = function (url, baseUrl) {

return new Promise(resolve => {

const script = document.createElement('script');

script.src = url;

script.onload = resolve;

for (let j = 0; j < document.head.children.length; j++) {

const child = document.head.children[j];

if (child.src && child.src.toString().indexOf(baseUrl) >= 0) {

resolve();

return;

}

}

document.head.appendChild(script);

});

}

return new Promise(resolve => {

const urlBase = Utilities.Core.getScriptLocation();

const syncLoadScripts = function (index) {

if (!urls[index]) {

return;

}

const url = urlBase + '/' + urls[index];

loadScript(url, urls[index]).then(function () {

loadedScriptsLength++;

if (loadedScriptsLength === urls.length) {

resolve();

}

syncLoadScripts(index + 1)

});

}

if (async) {

for (let i = 0; i < urls.length; i++) {

const url = urlBase + '/' + urls[i];

loadScript(url, urls[i]).then(function () {

loadedScriptsLength++;

if (loadedScriptsLength === urls.length) {

resolve();

}

});

}

}

else {

syncLoadScripts(0);

}

})

}

/**

* This is a base class for localization. Users can implement it in order to handle translations via i18n.

*/

class LocalizationModule {

static get moduleName() {

return 'LocalizationModule';

}

static get properties() {

const properties =

{

'messages': {

value: {

en: {}

},

type: 'object',

inherit: true,

reflectToAttribute: false

},

'locale': {

value: 'en',

type: 'string',

reflectToAttribute: false

},

'localizeFormatFunction': {

value: undefined,

type: 'function',

reflectToAttribute: false

}

};

return properties;

}

/**

* Adds messages.

* @param {String} - the string value's key.

* @param {Object} - the messages object.

*/

addMessages(messageKey, messages) {

const that = this;

Object.assign(that.messages[messageKey], messages);

}

/**

* Translates a text.

* @param {String} the string value's key.

* @param {Object} the values to be replaced in the string.

* @return {String} the translated text.

*/

localize(messageKey, messageArguments) {

const that = this;

if (!that.messages || !that.messages[that.locale]) {

return undefined;

}

let message = that.messages[that.locale][messageKey];

if (message === '') {

return '';

}

if (!message) {

return undefined;

}

const defaultMessage = message;

for (let messageName in messageArguments) {

let messageValue = messageArguments[messageName];

message = message.replace(new RegExp('{{' + messageName + '}}', 'g'), messageValue);

}

if (that.localizeFormatFunction) {

that.localizeFormatFunction(defaultMessage, message, messageArguments)

}

return message;

}

}

/**

* This is a base class for error logging.

*/

class ErrorModule {

static get moduleName() {

return 'ErrorModule';

}

static get properties() {

const properties =

{

'rethrowError': {

value: true,

type: 'boolean',

reflectToAttribute: false

},

'debugMode': {

value: true,

type: 'boolean',

reflectToAttribute: false

}

};

return properties;

}

/** Displays a log in the console.*/

log(message) {

const that = this;

that._logger('log', message);

}

/** Displays a warning in the console.*/

warn(message) {

const that = this;

that._logger('warn', message);

}

/** Displays an error in the console.*/

error(message) {

const that = this;

that._logger('error', message);

}

/**

Logs an Error.

@param {String} the error's level - 'warn', 'error' or 'log'.

@param {Error} the error to be logged.

*/

_logger(level, error) {

const that = this;

if (that.debugMode) {

const errorMessage = error instanceof Error ? error.message : error.toString();

console[level](errorMessage);

}

if (that.rethrowError && level === 'error') {

throw error;

}

}

}

/**

* This is a base class for data binding.

*/

class BindingModule {

static get moduleName() {

return 'BindingModule';

}

/**

* @typedef {Object} bindings

* @property {Array<Node>} children The child nodes.

* @property {Node} node The node.

* @property {BindingData} data The node's binding data.

*/

/**

* @typedef {Object} BindingData

* @property {Boolean} twoWay - Deterimes whether it's one way or two way data binding.

* @property {Boolean} updating - Determines whether the node is in update state.

* @property {Object} value - The bound property's value.

* @property {String} name - The bound property's name.

*/

getBindings(node, ownerMap) {

const that = this;

let index = 0;

let map = {

};

let boundData = (node => {

if (node instanceof HTMLElement) {

return that.parseAttributes(node);

}

else {

let boundProperty = that.parseProperty(node.data ? node.data.trim() : null, 'textContent', node);

if (boundProperty) {

if (that.ownerElement && node.parentNode === that.ownerElement.$.content) {

boundProperty.value = that.ownerElement.$.html !== '' ? that.ownerElement.$.html : undefined;

that.ownerElement.innerHTML = '';

}

return {

'textContent': boundProperty

};

}

}

return undefined;

})(node);

if (boundData) {

map.data = boundData;

}

if (!ownerMap) {

map.mapping = [];

ownerMap = map;

}

if (node.getAttribute) {

map.nodeId = node.getAttribute('smart-id');

if (ownerMap && boundData) {

ownerMap.mapping[map.nodeId] = boundData;

}

}

map.node = node;

if (node.firstChild) {

map.children = {

};

}

for (let child = node.firstChild; child; child = child.nextSibling) {

map.children[index++] = that.getBindings(child, ownerMap);

}

return map;

}

_addRemovePropertyBinding(hostPropertyName, targetPropertyName, targetElement, removeBinding, parentElement) {

if (!hostPropertyName || !targetPropertyName || !targetElement) {

return;

}

const that = this;

const bindings = that.ownerElement.bindings;

const id = targetElement.getAttribute('smart-id');

const twoWayBinding = hostPropertyName.indexOf('{{') >= 0;

hostPropertyName = hostPropertyName.replace('{{', '').replace('}}', '').replace('[[', '').replace(']]', '');

let not = false;

if (hostPropertyName.indexOf('!') >= 0) {

hostPropertyName = hostPropertyName.replace('!', '');

not = true;

}

const hostProperty = that.ownerElement._properties[hostPropertyName];

const boundProperty = {

name: hostPropertyName, reflectToAttribute: hostProperty.reflectToAttribute, twoWay: twoWayBinding, type: hostProperty.type, not: not

};

if (parentElement && !removeBinding) {

const map = {};

const targetBoundProperty = {

name: hostPropertyName, targetPropertyName: targetPropertyName, reflectToAttribute: hostProperty.reflectToAttribute, twoWay: twoWayBinding, type: hostProperty.type, not: not

};

map[hostPropertyName] = targetBoundProperty;

bindings.mapping[id] = map;

}

const setBinding = function (boundChildren) {

for (let childIndex in boundChildren) {

const child = boundChildren[childIndex];

if (child.nodeId === id) {

if (!child.data) {

child.data = {

};

}

if (removeBinding) {

child.data[targetPropertyName] = null;

delete child.data[targetPropertyName];

}

else {

child.data[targetPropertyName] = boundProperty;

}

break;

}

if (child.children) {

setBinding(child.children);

}

else if (child.node && child.node.children && child.node === targetElement.parentElement) {

const node = child.node;

if (node.firstChild) {

child.children = {

};

}

else {

continue;

}

let index = 0;

for (let currentChild = node.firstChild; currentChild; currentChild = currentChild.nextSibling) {

child.children[index++] = that.getBindings(currentChild);

}

setBinding(child.children);

}

}

}

setBinding(bindings.children);

if (!removeBinding) {

that.ownerElement.boundProperties[hostPropertyName] = true;

}

else {

delete that.ownerElement.boundProperties[hostPropertyName];

}

that.updateBoundNodes(hostPropertyName);

}

addPropertyBinding(hostPropertyName, targetPropertyName, targetElement, parentElement) {

const that = this;

that._addRemovePropertyBinding(hostPropertyName, targetPropertyName, targetElement, false, parentElement);

}

removePropertyBinding(hostPropertyName, targetPropertyName, targetElement, parentElement) {

const that = this;

that._addRemovePropertyBinding(hostPropertyName, targetPropertyName, targetElement, true, parentElement);

}

/**

* Parses the element's attributes.

* @param {HTMLElement} - html element.

* @return {Array<BindingData>}

*/

parseAttributes(htmlElement) {

const that = this;

let boundProperties = undefined;

for (let i = 0; i < htmlElement.attributes.length; i++) {

const attribute = htmlElement.attributes[i];

const attributeName = attribute.name;

const attributeValue = attribute.value;

if (!BindingModule.cache['toCamelCase' + attributeName]) {

BindingModule.cache['toCamelCase' + attributeName] = Utilities.Core.toCamelCase(attributeName);

}

const propertyName = BindingModule.cache['toCamelCase' + attributeName];

if (attributeName.indexOf('(') >= 0) {

let eventName = attributeName.substring(1, attributeName.length - 1);

if (that.ownerElement && !that.ownerElement.dataContext) {

that.ownerElement.templateListeners[htmlElement.getAttribute('smart-id') + '.' + eventName] = attributeValue;

htmlElement.removeAttribute(attributeName);

continue;

}

else {

if (!boundProperties) {

boundProperties = {

};

}

const handlerName = attributeValue.substring(0, attributeValue.indexOf('('));

boundProperties[propertyName] = {

isEvent: true, name: eventName, value: handlerName

};

continue;

}

}

let boundProperty = that.parseProperty(attributeValue, attributeName, htmlElement);

if (!boundProperty) {

continue;

}

if (!boundProperties) {

boundProperties = {

};

}

boundProperties[propertyName] = boundProperty;

}

return boundProperties;

}

/**

* Parses a property.

* @param {String} - The string to parse.

* @param {name} - property's name.

* @param {Node} - the node.

* @return {BindingData}

*/

parseProperty(text, elementAttributeName/*, name, node*/) {

if (!text || !text.length)

return;

const that = this;

let boundProperty;

let length = text.length;

let startIndex = 0, lastIndex = 0, endIndex = 0;

let twoWay = true;

while (lastIndex < length) {

startIndex = text.indexOf('{{', lastIndex);

let twoWayStart = text.indexOf('[[', lastIndex);

let terminator = '}}';

if (twoWayStart >= 0 &&

(startIndex < 0 || twoWayStart < startIndex)) {

startIndex = twoWayStart;

twoWay = false;

terminator = ']]';

}

endIndex = startIndex < 0 ? -1 : text.indexOf(terminator, startIndex + 2);

if (endIndex < 0) {

return;

}

boundProperty = boundProperty || {

};

let pathString = text.slice(startIndex + 2, endIndex).trim();

let attributeName = pathString;

/* if (twoWay) {

const updateToken = function (value) {

boundProperty.value = value;

if (node.$ && node.$.isNativeElement) {

if (!BindingModule.cache['toDash' + name]) {

BindingModule.cache['toDash' + name] = Utilities.Core.toDash(name);

}

const attributeName = BindingModule.cache['toDash' + name];

const oldValue = node.$.getAttributeValue(attributeName, boundProperty.type);

if (oldValue !== boundProperty.value) {

node.$.setAttributeValue(attributeName, boundProperty.value, boundProperty.type);

}

}

}

if (pathString.indexOf('::') >= 0) {

const eventIndex = pathString.indexOf('::');

const eventName = pathString.substring(eventIndex + 2);

that.ownerElement['$' + node.getAttribute('smart-id')].listen(eventName, function () {

updateToken(node[name]);

const boundPropertyName = boundProperty.name.substring(0, boundProperty.name.indexOf('::'));

that.updateBoundProperty(boundPropertyName, boundProperty);

});

}

if (node.$ && node.$.isCustomElement) {

if (!BindingModule.cache['toDash' + name]) {

BindingModule.cache['toDash' + name] = Utilities.Core.toDash(name);

}

const attributeName = BindingModule.cache['toDash' + name];

const propertyName = Utilities.Core.toCamelCase(attributeName);

if (node._properties && node._properties[propertyName]) {

node._properties[propertyName].notify = true;

}

that.ownerElement['$' + node.getAttribute('smart-id')].listen(attributeName + '-changed', function (event) {

const detail = event.detail;

updateToken(detail.value);

const context = that.ownerElement.context;

if (event.context !== document) {

that.ownerElement.context = that.ownerElement;

}

that.updateBoundProperty(name, boundProperty);

that.ownerElement.context = context;

});

}

}*/

boundProperty.name = attributeName;

lastIndex = endIndex + 2;

}

const propertyName = boundProperty.name;

const elementProperty = that.ownerElement ? that.ownerElement._properties[propertyName] : null;

boundProperty.twoWay = twoWay;

boundProperty.ready = false;

if (that.ownerElement) {

if (propertyName.indexOf('::') >= 0) {

that.ownerElement.boundProperties[propertyName.substring(0, propertyName.indexOf('::'))] = true;

}

else {

that.ownerElement.boundProperties[propertyName] = true;

}

}

if (elementProperty) {

boundProperty.type = elementProperty.type;

boundProperty.reflectToAttribute = elementProperty.reflectToAttribute;

}

else {

const booleans = ['checked', 'selected', 'async', 'autofocus', 'autoplay', 'controls', 'defer', 'disabled', 'hidden', 'ismap', 'loop', 'multiple', 'open', 'readonly', 'required', 'scoped'];

if (booleans.indexOf(elementAttributeName) >= 0) {

boundProperty.type = 'boolean';

}

else {

boundProperty.type = 'string';

}

boundProperty.reflectToAttribute = true;

}

return boundProperty;

}

/**

* Updates element's data bound nodes.

*/

updateTextNodes() {

const that = this;

that.updateTextNode(that.ownerElement.shadowRoot || that.ownerElement, that.ownerElement.bindings, that.ownerElement);

}

/**

* Updates a data bound node.

* @param {Node} - The bound node.

* @param {Array<BindingData>} - The node's binding data.

* @param {Element} - The element to be updated.

*/

updateTextNode(node, bindings, element) {

const that = this;

if (!bindings) {

return;

}

let index = 0;

for (let child = node.firstChild; child; child = child.nextSibling) {

if (!bindings.children) {

break;

}

that.updateTextNode(child, bindings.children[index++], element);

}

if (!bindings || !bindings.data) {

return;

}

for (let name in bindings.data) {

const boundProperty = bindings.data[name];

const boundPropertyName = boundProperty.name;

if (name !== 'textContent' || !boundProperty.twoWay || boundProperty.updating || boundProperty.value === undefined) {

continue;

}

element[boundPropertyName] = boundProperty.value;

}

}

/**

* Updates a data bound property.

* @param {String} - The propery's name.

* @param {Object} - The property's value.

*/

updateBoundProperty(propertyName, propertyConfig) {

if (propertyConfig.updating) {

return;

}

const that = this;

const element = that.ownerElement;

propertyConfig.updating = true;

element[propertyName] = propertyConfig.value;

propertyConfig.updating = false;

}

/**

* Updates element's data bound nodes.

*/

updateBoundNodes(propertyName) {

const that = this;

that.updateBoundNode(that.ownerElement.shadowRoot || that.ownerElement, that.ownerElement.bindings, that.ownerElement, propertyName);

if (that.ownerElement.detachedChildren.length > 0) {

for (let i = 0; i < that.ownerElement.detachedChildren.length; i++) {

const node = that.ownerElement.detachedChildren[i];

const smartId = node.getAttribute('smart-id');

const getBindings = function (bindings) {

if (bindings.nodeId === smartId) {

return bindings;

}

for (let index in bindings.children) {

const node = bindings.children[index];

const attribute = node.getAttribute ? node.getAttribute('smart-id') : '';

if (attribute === smartId) {

return bindings;

}

if (node.children) {

const result = getBindings(node);

if (result) {

return result;

}

}

}

return null;

}

const bindings = getBindings(that.ownerElement.bindings);

if (bindings) {

that.updateBoundNode(node, bindings, that.ownerElement, propertyName, true);

}

else {

if (node.getAttribute && that.ownerElement.bindings.mapping) {

const element = that.ownerElement;

const bindings = that.ownerElement.bindings;

if (bindings) {

for (let mapping in bindings.mapping) {

const childNode = element.querySelector('[smart-id="' + mapping + '"]');

if (childNode) {

const dataBoundProperties = bindings.mapping[mapping];

that.updateBoundData(childNode, dataBoundProperties, element, propertyName);

}

}

}

}

}

}

}

}

updateBoundMappedNodes() {

const that = this;

//const node = that.ownerElement.shadowRoot || that.ownerElement;

const bindings = that.ownerElement.bindings;

const element = that.ownerElement;

if (!bindings.mapping) {

return;

}

for (let mapping in bindings.mapping) {

let childNode = element.querySelector('[smart-id="' + mapping + '"]');

if (element.shadowRoot) {

childNode = element.querySelector('[id="' + mapping + '"]');

if (!childNode) {

childNode = element.shadowRoot.querySelector('[id="' + mapping + '"]') || element.shadowRoot.querySelector('[smart-id="' + mapping + '"]');

}

}

if (childNode) {

const dataBoundProperties = bindings.mapping[mapping];

that.updateBoundData(childNode, dataBoundProperties, element);

}

else if (element.getAttribute('aria-controls')) {

let detachedChildNode = document.getElementById(element.getAttribute('aria-controls'));

if (!detachedChildNode && element.shadowRoot) {

detachedChildNode = element.shadowRoot.getElementById(element.getAttribute('aria-controls'));

}

childNode = detachedChildNode.querySelector('[smart-id="' + mapping + '"]');

if (childNode) {

const dataBoundProperties = bindings.mapping[mapping];

that.updateBoundData(childNode, dataBoundProperties, element);

}

}

}

}

/**

* Updates a data bound node.

* @param {Node} - The bound node.

* @param {Array<BindingData>} - The node's binding data.

* @param {Element} - The element to be updated.

*/

updateBoundNode(node, bindings, element, propertyName, detached) {

const that = this;

if (!bindings) {

return;

}

/*

if (node.getAttribute && bindings.mapping) {

for (let mapping in bindings.mapping) {

const childNode = element.querySelector('[smart-id="' + mapping + '"]');

if (childNode) {

const dataBoundProperties = bindings.mapping[mapping];

that.updateBoundData(childNode, dataBoundProperties, element, null);

}

}

return;

}

*/

let index = 0;

if (!detached) {

for (let child = node.firstChild; child; child = child.nextSibling) {

if (!bindings.children) {

break;

}

// that.updateBoundNode(child, bindings.children[index++], element, propertyName);

if (child.getAttribute) {

const childId = child.getAttribute('smart-id');

const childBindings = function () {

for (let binding in bindings.children) {

if (bindings.children[binding].nodeId === childId) {

return bindings.children[binding];

}

}

}();

that.updateBoundNode(child, childBindings, element, propertyName);

index++;

}

else {

that.updateBoundNode(child, bindings.children[index++], element, propertyName);

}

}

}

else if (detached && !bindings.data) {

for (let child = node.firstChild; child; child = child.nextSibling) {

if (!bindings.children) {

break;

}

// that.updateBoundNode(child, bindings.children[index++], element, propertyName, detached);

if (child.getAttribute) {

const childId = child.getAttribute('smart-id');

const childBindings = function () {

for (let binding in bindings.children) {

if (bindings.children[binding].nodeId === childId) {

return bindings.children[binding];

}

}

}();

that.updateBoundNode(child, childBindings, element, propertyName);

index++;

}

else {

that.updateBoundNode(child, bindings.children[index++], element, propertyName, detached);

}

}

}

if (!bindings || !bindings.data) {

return;

}

const dataBoundProperties = bindings.data;

that.updateBoundData(node, dataBoundProperties, element, propertyName);

}

updateBoundData(node, dataBoundProperties, element, propertyName) {

const that = this;

for (let name in dataBoundProperties) {

const boundProperty = dataBoundProperties[name];

let boundPropertyName = boundProperty.name;

if (boundProperty.updating) {

continue;

}

if (boundPropertyName.indexOf('::') >= 0) {

boundPropertyName = boundPropertyName.substring(0, boundPropertyName.indexOf('::'));

}

if (propertyName !== undefined && propertyName !== boundPropertyName) {

continue;

}

if (boundPropertyName.indexOf('(') >= 0) {

let args = boundPropertyName.substring(boundPropertyName.indexOf('('));

const methodName = boundPropertyName.substring(0, boundPropertyName.indexOf('('));

args = args.substring(1, args.length - 1);

args = args.replace(/ /ig, '');

args = args.split(',');

if (args.length > 0 && args[0] !== '') {

let values = [];

for (let i = 0; i < args.length; i++) {

values.push(element[args[i]]);

}

boundProperty.value = element[methodName].apply(element, values);

}

else {

boundProperty.value = element[methodName]();

}

boundProperty.type = typeof boundProperty.value;

}

else {

boundProperty.value = element[boundPropertyName];

}

if (boundPropertyName === 'innerHTML') {

if (node[name].toString().trim() !== element[boundPropertyName].toString().trim()) {

if (boundProperty.ready) {

node[name] = boundProperty.value.toString().trim();

}

else if (element._properties[boundPropertyName].defaultValue !== boundProperty.value) {

node[name] = boundProperty.value.toString().trim();

}

}

}

else {

if (boundProperty.not) {

node[name] = !boundProperty.value;

if (boundProperty.targetPropertyName) {

node[boundProperty.targetPropertyName] = !boundProperty.value;

}

}

else {

node[name] = boundProperty.value;

if (boundProperty.targetPropertyName) {

node[boundProperty.targetPropertyName] = boundProperty.value;

}

}

}

if (node.$ && node.$.isNativeElement) {

if (!BindingModule.cache['toDash' + name]) {

BindingModule.cache['toDash' + name] = Utilities.Core.toDash(name);

}

const attributeName = BindingModule.cache['toDash' + name];

const oldValue = node.$.getAttributeValue(attributeName, boundProperty.type);

if (boundProperty.reflectToAttribute && (oldValue !== boundProperty.value || !boundProperty.ready)) {

node.$.setAttributeValue(attributeName, boundProperty.value, boundProperty.type);

}

if (!boundProperty.reflectToAttribute) {

node.$.setAttributeValue(attributeName, null, boundProperty.type);

}

}

if (!boundProperty.ready) {

if (node.$ && node.$.isCustomElement) {

if (!BindingModule.cache['toDash' + name]) {

BindingModule.cache['toDash' + name] = Utilities.Core.toDash(name);

}

const attributeName = BindingModule.cache['toDash' + name];

if (!node._properties) {

node._beforeCreatedProperties = node._properties = node.propertyByAttributeName = [];

}

if (!node._properties[name]) {

node._properties[name] = {

attributeName: attributeName

}

if (node._beforeCreatedProperties) {

node._beforeCreatedProperties[name] = node._properties[name];

}

node.propertyByAttributeName[attributeName] = node._properties[name];

}