| 1 | |
| 2 | |
| 3 | |
| 4 | |
| 5 |
|
| 6 | (function (global, factory) {
|
| 7 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
| 8 | typeof define === 'function' && define.amd ? define(factory) :
|
| 9 | (global = global || self, global.phonon = factory());
|
| 10 | }(this, function () { 'use strict';
|
| 11 |
|
| 12 | |
| 13 | |
| 14 | |
| 15 | |
| 16 | |
| 17 | |
| 18 | |
| 19 | |
| 20 | |
| 21 | |
| 22 | |
| 23 | |
| 24 | |
| 25 |
|
| 26 |
|
| 27 |
|
| 28 | var extendStatics = function(d, b) {
|
| 29 | extendStatics = Object.setPrototypeOf ||
|
| 30 | ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
| 31 | function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
| 32 | return extendStatics(d, b);
|
| 33 | };
|
| 34 |
|
| 35 | function __extends(d, b) {
|
| 36 | extendStatics(d, b);
|
| 37 | function __() { this.constructor = d; }
|
| 38 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
| 39 | }
|
| 40 |
|
| 41 | function __awaiter(thisArg, _arguments, P, generator) {
|
| 42 | return new (P || (P = Promise))(function (resolve, reject) {
|
| 43 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
| 44 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
| 45 | function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
|
| 46 | step((generator = generator.apply(thisArg, _arguments || [])).next());
|
| 47 | });
|
| 48 | }
|
| 49 |
|
| 50 | function __generator(thisArg, body) {
|
| 51 | var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
| 52 | return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
| 53 | function verb(n) { return function (v) { return step([n, v]); }; }
|
| 54 | function step(op) {
|
| 55 | if (f) throw new TypeError("Generator is already executing.");
|
| 56 | while (_) try {
|
| 57 | if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
| 58 | if (y = 0, t) op = [op[0] & 2, t.value];
|
| 59 | switch (op[0]) {
|
| 60 | case 0: case 1: t = op; break;
|
| 61 | case 4: _.label++; return { value: op[1], done: false };
|
| 62 | case 5: _.label++; y = op[1]; op = [0]; continue;
|
| 63 | case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
| 64 | default:
|
| 65 | if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
| 66 | if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
| 67 | if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
| 68 | if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
| 69 | if (t[2]) _.ops.pop();
|
| 70 | _.trys.pop(); continue;
|
| 71 | }
|
| 72 | op = body.call(thisArg, _);
|
| 73 | } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
| 74 | if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
| 75 | }
|
| 76 | }
|
| 77 |
|
| 78 | function elementEvent(domElement, eventName, moduleName, detail) {
|
| 79 | if (detail === void 0) { detail = {}; }
|
| 80 | var fullEventName = eventName + ".ph." + moduleName;
|
| 81 | domElement.dispatchEvent(new CustomEvent(fullEventName, { detail: detail }));
|
| 82 | }
|
| 83 | function pageEvent(eventName, pageName, detail) {
|
| 84 | if (detail === void 0) { detail = {}; }
|
| 85 | var fullEventName = pageName + "." + eventName;
|
| 86 | window.dispatchEvent(new CustomEvent(fullEventName, { detail: detail }));
|
| 87 | document.dispatchEvent(new CustomEvent(fullEventName, { detail: detail }));
|
| 88 | }
|
| 89 | function winDocEvent(eventName, moduleName, detail) {
|
| 90 | if (detail === void 0) { detail = {}; }
|
| 91 | var fullEventName = eventName + ".ph." + moduleName;
|
| 92 | window.dispatchEvent(new CustomEvent(fullEventName, { detail: detail }));
|
| 93 | document.dispatchEvent(new CustomEvent(fullEventName, { detail: detail }));
|
| 94 | }
|
| 95 | var dispatch = {
|
| 96 | elementEvent: elementEvent,
|
| 97 | pageEvent: pageEvent,
|
| 98 | winDocEvent: winDocEvent,
|
| 99 | };
|
| 100 |
|
| 101 | function onError() {
|
| 102 | if (typeof window === 'undefined') {
|
| 103 | return;
|
| 104 | }
|
| 105 | window.addEventListener('error', function (event) {
|
| 106 | console.error('-- Phonon Error --');
|
| 107 | console.error('An error has occured!'
|
| 108 | + ' ' + 'You can pen an issue here: https://github.com/quark-dev/Phonon-Framework/issues');
|
| 109 | console.error(JSON.stringify(event));
|
| 110 | });
|
| 111 | }
|
| 112 |
|
| 113 | var availableEvents = ['mousedown', 'mousemove', 'mouseup'];
|
| 114 | var touchScreen = false;
|
| 115 | if (typeof window !== 'undefined') {
|
| 116 | if (('ontouchstart' in window) || window.DocumentTouch
|
| 117 | && document instanceof window.DocumentTouch) {
|
| 118 | touchScreen = true;
|
| 119 | availableEvents = ['touchstart', 'touchmove', 'touchend', 'touchcancel'];
|
| 120 | }
|
| 121 | if (window.navigator.pointerEnabled) {
|
| 122 | availableEvents = ['pointerdown', 'pointermove', 'pointerup', 'pointercancel'];
|
| 123 | }
|
| 124 | else if (window.navigator.msPointerEnabled) {
|
| 125 | availableEvents = ['MSPointerDown', 'MSPointerMove', 'MSPointerUp', 'MSPointerCancel'];
|
| 126 | }
|
| 127 | }
|
| 128 | var transitions = [
|
| 129 | { name: 'transition', start: 'transitionstart', end: 'transitionend' },
|
| 130 | { name: 'MozTransition', start: 'transitionstart', end: 'transitionend' },
|
| 131 | { name: 'msTransition', start: 'msTransitionStart', end: 'msTransitionEnd' },
|
| 132 | { name: 'WebkitTransition', start: 'webkitTransitionStart', end: 'webkitTransitionEnd' },
|
| 133 | ];
|
| 134 | var animations = [
|
| 135 | { name: 'animation', start: 'animationstart', end: 'animationend' },
|
| 136 | { name: 'MozAnimation', start: 'animationstart', end: 'animationend' },
|
| 137 | { name: 'msAnimation', start: 'msAnimationStart', end: 'msAnimationEnd' },
|
| 138 | { name: 'WebkitAnimation', start: 'webkitAnimationStart', end: 'webkitAnimationEnd' },
|
| 139 | ];
|
| 140 | var el = window.document.createElement('div');
|
| 141 | var transition = transitions.find(function (t) { return typeof el.style[t.name] !== 'undefined'; });
|
| 142 | var animation = animations.find(function (t) { return typeof el.style[t.name] !== 'undefined'; });
|
| 143 | var transitionStart = transition ? transition.start : 'transitionstart';
|
| 144 | var transitionEnd = transition ? transition.end : 'transitionend';
|
| 145 | var animationStart = animation ? animation.start : 'animationstart';
|
| 146 | var animationEnd = animation ? animation.end : 'animationend';
|
| 147 | var events = {
|
| 148 | TOUCH_SCREEN: touchScreen,
|
| 149 | NETWORK_ONLINE: 'online',
|
| 150 | NETWORK_OFFLINE: 'offline',
|
| 151 | NETWORK_RECONNECTING: 'reconnecting',
|
| 152 | NETWORK_RECONNECTING_SUCCESS: 'reconnect.success',
|
| 153 | NETWORK_RECONNECTING_FAILURE: 'reconnect.failure',
|
| 154 | SHOW: 'show',
|
| 155 | SHOWN: 'shown',
|
| 156 | HIDE: 'hide',
|
| 157 | HIDDEN: 'hidden',
|
| 158 | HASH: 'hash',
|
| 159 | START: availableEvents[0],
|
| 160 | MOVE: availableEvents[1],
|
| 161 | END: availableEvents[2],
|
| 162 | CANCEL: typeof availableEvents[3] === 'undefined' ? null : availableEvents[3],
|
| 163 | CLICK: 'click',
|
| 164 | TRANSITION_START: transitionStart,
|
| 165 | TRANSITION_END: transitionEnd,
|
| 166 | ANIMATION_START: animationStart,
|
| 167 | ANIMATION_END: animationEnd,
|
| 168 | ITEM_SELECTED: 'itemSelected',
|
| 169 | };
|
| 170 |
|
| 171 | function closest(element, selector) {
|
| 172 | if (!Element.prototype.matches) ;
|
| 173 | var el = element;
|
| 174 | do {
|
| 175 | if (el.matches(selector)) {
|
| 176 | return el;
|
| 177 | }
|
| 178 | el = (el.parentElement || el.parentNode);
|
| 179 | } while (el !== null && el.nodeType === 1);
|
| 180 | return null;
|
| 181 | }
|
| 182 | function attrConfig(element) {
|
| 183 | if (!element) {
|
| 184 | return null;
|
| 185 | }
|
| 186 | var attr = element.getAttribute('data-config');
|
| 187 | if (!attr) {
|
| 188 | return null;
|
| 189 | }
|
| 190 | try {
|
| 191 | var config = JSON.parse(attr);
|
| 192 | return config;
|
| 193 | }
|
| 194 | catch (e) {
|
| 195 | }
|
| 196 | var keys = (attr.match(/(\w+)\s*:\s*(["'])?/igm) || [])
|
| 197 | .map(function (e) { return e.replace(/(\w+)\s*:\s*(["'])?/igm, '$1'); });
|
| 198 | var values = attr.match(/[^:]+(?=,|$)/igm) || [];
|
| 199 | var json = {};
|
| 200 | keys.forEach(function (key, i) {
|
| 201 | var value = values[i].replace(/ /g, '').replace(/\'|"/g, '');
|
| 202 | var convertedValue = '';
|
| 203 | if (value === 'true' || value === 'false') {
|
| 204 | convertedValue = value === 'true';
|
| 205 | }
|
| 206 | else if (!isNaN(value)) {
|
| 207 | convertedValue = parseFloat(value);
|
| 208 | }
|
| 209 | else {
|
| 210 | convertedValue = value;
|
| 211 | }
|
| 212 | json[key] = convertedValue;
|
| 213 | });
|
| 214 | return json;
|
| 215 | }
|
| 216 | function removeClasses(element, classList, prefix) {
|
| 217 | if (prefix === void 0) { prefix = null; }
|
| 218 | classList.forEach(function (className) {
|
| 219 | var cName = prefix ? prefix + "-" + className : className;
|
| 220 | if (element.classList.contains(cName)) {
|
| 221 | element.classList.remove(cName);
|
| 222 | }
|
| 223 | });
|
| 224 | }
|
| 225 | function isElement(node) {
|
| 226 | return node.nodeType === 1
|
| 227 | && typeof node.className === 'string';
|
| 228 | }
|
| 229 | var selector = {
|
| 230 | attrConfig: attrConfig,
|
| 231 | removeClasses: removeClasses,
|
| 232 | closest: closest,
|
| 233 | isElement: isElement,
|
| 234 | };
|
| 235 |
|
| 236 | var components = {};
|
| 237 | function getName(component) {
|
| 238 | if (typeof component === 'string') {
|
| 239 | return component.toLowerCase();
|
| 240 | }
|
| 241 | return component.constructor.name.toLowerCase();
|
| 242 | }
|
| 243 | function addComponent(component) {
|
| 244 | var name = getName(component);
|
| 245 | if (!components[name]) {
|
| 246 | components[name] = [];
|
| 247 | }
|
| 248 | components[name].push(component);
|
| 249 | }
|
| 250 | function removeComponent(componentName, element) {
|
| 251 | var name = getName(componentName);
|
| 252 | var index = (components[name] || []).findIndex(function (c) { return c.getElement() === element; });
|
| 253 | if (index === -1) {
|
| 254 | return;
|
| 255 | }
|
| 256 | var component = components[name][index];
|
| 257 | component.destroy();
|
| 258 | components[name].splice(index, 1);
|
| 259 | }
|
| 260 | function getComponent(component, options) {
|
| 261 | var className = getName(component);
|
| 262 | var element = options.element;
|
| 263 | if (!element) {
|
| 264 | return null;
|
| 265 | }
|
| 266 | var selector = typeof element === 'string' ? document.querySelector(element) : element;
|
| 267 | var existingComponent = (components[className] || [])
|
| 268 | .find(function (c) { return c.getElement() === selector; });
|
| 269 | if (!existingComponent) {
|
| 270 | return null;
|
| 271 | }
|
| 272 | if (options) {
|
| 273 | existingComponent.setProps(options);
|
| 274 | }
|
| 275 | return existingComponent;
|
| 276 | }
|
| 277 | var stack = {
|
| 278 | addComponent: addComponent,
|
| 279 | getComponent: getComponent,
|
| 280 | removeComponent: removeComponent,
|
| 281 | };
|
| 282 |
|
| 283 | var mutatorSubscribers = [];
|
| 284 | function subscribe(subscriber) {
|
| 285 | mutatorSubscribers.push(subscriber);
|
| 286 | if (document.body) {
|
| 287 | Array.from(document.body.querySelectorAll("." + subscriber.componentClass) || [])
|
| 288 | .filter(function (component) { return component.getAttribute('data-no-boot') === null; })
|
| 289 | .forEach(function (component) {
|
| 290 | dispatchChangeEvent(subscriber, 'onAdded', component, stack.addComponent);
|
| 291 | });
|
| 292 | }
|
| 293 | }
|
| 294 | function dispatchChangeEvent(subscriber, eventName) {
|
| 295 | var args = [];
|
| 296 | for (var _i = 2; _i < arguments.length; _i++) {
|
| 297 | args[_i - 2] = arguments[_i];
|
| 298 | }
|
| 299 | var callback = subscriber[eventName];
|
| 300 | if (!callback) {
|
| 301 | return;
|
| 302 | }
|
| 303 | callback.apply(callback, args);
|
| 304 | }
|
| 305 | function nodeFn(element, added) {
|
| 306 | if (added === void 0) { added = true; }
|
| 307 | if (element.getAttribute('data-no-boot') !== null) {
|
| 308 | return;
|
| 309 | }
|
| 310 | var elementClasses = element.className.split(' ');
|
| 311 | var subscriber = mutatorSubscribers.find(function (l) { return elementClasses.indexOf(l.componentClass) > -1; });
|
| 312 | if (!subscriber) {
|
| 313 | return;
|
| 314 | }
|
| 315 | var eventName = added ? 'onAdded' : 'onRemoved';
|
| 316 | var args = added ? [element, stack.addComponent] : [element, stack.removeComponent];
|
| 317 | dispatchChangeEvent.apply(void 0, [subscriber, eventName].concat(args));
|
| 318 | }
|
| 319 | function apply(node, added) {
|
| 320 | if (added === void 0) { added = true; }
|
| 321 | nodeFn(node, added);
|
| 322 | var nextNode = node.firstElementChild;
|
| 323 | while (nextNode) {
|
| 324 | var next = nextNode.nextElementSibling;
|
| 325 | if (isElement(nextNode)) {
|
| 326 | apply(nextNode, added);
|
| 327 | }
|
| 328 | nextNode = next;
|
| 329 | }
|
| 330 | }
|
| 331 | function getElements(nodes) {
|
| 332 | return Array
|
| 333 | .from(nodes)
|
| 334 | .filter(function (node) { return isElement(node); });
|
| 335 | }
|
| 336 | function observe() {
|
| 337 | (new MutationObserver(function (mutations) { return mutations.forEach(function (mutation) {
|
| 338 | if (mutation.type === 'attributes') {
|
| 339 | return;
|
| 340 | }
|
| 341 | var addedNodes = mutation.addedNodes, removedNodes = mutation.removedNodes;
|
| 342 | getElements(addedNodes).forEach(function (node) { return apply(node, true); });
|
| 343 | getElements(removedNodes).forEach(function (node) { return apply(node, false); });
|
| 344 | }); })).observe(document, {
|
| 345 | childList: true,
|
| 346 | subtree: true,
|
| 347 | characterData: true,
|
| 348 | attributes: true,
|
| 349 | });
|
| 350 | }
|
| 351 | function boot() {
|
| 352 | if (!('MutationObserver' in window)) {
|
| 353 | return;
|
| 354 | }
|
| 355 | if (document.body) {
|
| 356 | observe();
|
| 357 | }
|
| 358 | else {
|
| 359 | var obs_1 = new MutationObserver(function () {
|
| 360 | if (document.body) {
|
| 361 | obs_1.disconnect();
|
| 362 | observe();
|
| 363 | }
|
| 364 | });
|
| 365 | obs_1.observe(document, { childList: true, subtree: true });
|
| 366 | }
|
| 367 | }
|
| 368 | boot();
|
| 369 | var observer = {
|
| 370 | subscribe: subscribe,
|
| 371 | getComponent: stack.getComponent,
|
| 372 | };
|
| 373 |
|
| 374 | var sleep = (function (timeout) {
|
| 375 | return new Promise(function (resolve) {
|
| 376 | setTimeout(resolve, timeout);
|
| 377 | });
|
| 378 | });
|
| 379 |
|
| 380 | onError();
|
| 381 | var utils = {
|
| 382 | sleep: sleep,
|
| 383 | Event: events,
|
| 384 | Dispatch: dispatch,
|
| 385 | Selector: selector,
|
| 386 | Observer: observer,
|
| 387 | };
|
| 388 |
|
| 389 | |
| 390 | |
| 391 | |
| 392 | |
| 393 | |
| 394 | |
| 395 | |
| 396 | |
| 397 |
|
| 398 |
|
| 399 | var Component = (function () {
|
| 400 | function Component(name, defaultProps, props) {
|
| 401 | var _this = this;
|
| 402 | this.template = '';
|
| 403 | this.id = null;
|
| 404 | this.eventHandlers = [];
|
| 405 | this.registeredElements = [];
|
| 406 | this.name = name;
|
| 407 | var element = typeof props.element === 'string'
|
| 408 | ? document.querySelector(props.element) : props.element;
|
| 409 | var config = {};
|
| 410 | if (element) {
|
| 411 | var dataConfig = utils.Selector.attrConfig(element);
|
| 412 | if (dataConfig) {
|
| 413 | config = dataConfig;
|
| 414 | }
|
| 415 | }
|
| 416 | this.defaultProps = defaultProps;
|
| 417 | this.props = Object.assign(defaultProps, config, props, { element: element });
|
| 418 | this.id = this.uid();
|
| 419 | this.elementListener = function (event) { return _this.onBeforeElementEvent(event); };
|
| 420 | this.setEventsHandler();
|
| 421 | }
|
| 422 | Component.prototype.setTemplate = function (template) {
|
| 423 | this.template = template;
|
| 424 | };
|
| 425 | Component.prototype.getTemplate = function () {
|
| 426 | return this.template;
|
| 427 | };
|
| 428 | Component.prototype.getElement = function () {
|
| 429 | return this.getProp('element') || null;
|
| 430 | };
|
| 431 | Component.prototype.setElement = function (element) {
|
| 432 | this.props.element = element;
|
| 433 | };
|
| 434 | Component.prototype.getId = function () {
|
| 435 | return this.id;
|
| 436 | };
|
| 437 | Component.prototype.uid = function () {
|
| 438 | return Math.random().toString(36).substr(2, 10);
|
| 439 | };
|
| 440 | Component.prototype.getName = function () {
|
| 441 | return this.name;
|
| 442 | };
|
| 443 | Component.prototype.getProps = function () {
|
| 444 | return this.props;
|
| 445 | };
|
| 446 | Component.prototype.getProp = function (name) {
|
| 447 | var defaultValue = this.defaultProps[name];
|
| 448 | return typeof this.props[name] !== 'undefined' ? this.props[name] : defaultValue;
|
| 449 | };
|
| 450 | Component.prototype.setProps = function (props) {
|
| 451 | var componentProps = Object.assign({}, props);
|
| 452 | this.props = Object.assign(this.props, componentProps);
|
| 453 | };
|
| 454 | Component.prototype.setProp = function (name, value) {
|
| 455 | if (typeof this.props[name] === 'undefined') {
|
| 456 | throw new Error('Cannot set an invalid prop');
|
| 457 | }
|
| 458 | this.props[name] = value;
|
| 459 | };
|
| 460 | Component.prototype.registerElements = function (elements) {
|
| 461 | var _this = this;
|
| 462 | elements.forEach(function (element) { return _this.registerElement(element); });
|
| 463 | };
|
| 464 | Component.prototype.registerElement = function (element) {
|
| 465 | element.target.addEventListener(element.event, this.elementListener);
|
| 466 | this.registeredElements.push(element);
|
| 467 | };
|
| 468 | Component.prototype.unregisterElements = function () {
|
| 469 | var _this = this;
|
| 470 | this.registeredElements.forEach(function (element) {
|
| 471 | _this.unregisterElement(element);
|
| 472 | });
|
| 473 | };
|
| 474 | Component.prototype.unregisterElement = function (element) {
|
| 475 | var registeredElementIndex = this.registeredElements
|
| 476 | .findIndex(function (el) { return el.target === element.target && el.event === element.event; });
|
| 477 | if (registeredElementIndex > -1) {
|
| 478 | element.target.removeEventListener(element.event, this.elementListener);
|
| 479 | this.registeredElements.splice(registeredElementIndex, 1);
|
| 480 | }
|
| 481 | else {
|
| 482 | console.error('Warning! Could not remove element:'
|
| 483 | + ' ' + (element.target + " with event: " + element.event + "."));
|
| 484 | }
|
| 485 | };
|
| 486 | Component.prototype.triggerEvent = function (eventName, detail, objectEventOnly) {
|
| 487 | var _this = this;
|
| 488 | if (detail === void 0) { detail = {}; }
|
| 489 | if (objectEventOnly === void 0) { objectEventOnly = false; }
|
| 490 | var eventNameObject = eventName.split('.').reduce(function (acc, current, index) {
|
| 491 | if (index === 0) {
|
| 492 | return current;
|
| 493 | }
|
| 494 | return acc + current.charAt(0).toUpperCase() + current.slice(1);
|
| 495 | });
|
| 496 | var eventNameAlias = "on" + eventNameObject
|
| 497 | .charAt(0).toUpperCase() + eventNameObject.slice(1);
|
| 498 | var props = this.getProps();
|
| 499 | this.eventHandlers.forEach(function (scope) {
|
| 500 | if (typeof scope[eventNameObject] === 'function') {
|
| 501 | scope[eventNameObject].apply(_this, [detail]);
|
| 502 | }
|
| 503 | if (typeof scope[eventNameAlias] === 'function') {
|
| 504 | props[eventNameAlias].apply(_this, [detail]);
|
| 505 | }
|
| 506 | });
|
| 507 | if (objectEventOnly) {
|
| 508 | return;
|
| 509 | }
|
| 510 | var element = this.getElement();
|
| 511 | if (element) {
|
| 512 | utils.Dispatch.elementEvent(element, eventName, this.name, detail);
|
| 513 | }
|
| 514 | else {
|
| 515 | utils.Dispatch.winDocEvent(eventName, this.name, detail);
|
| 516 | }
|
| 517 | };
|
| 518 | Component.prototype.preventClosable = function () {
|
| 519 | return false;
|
| 520 | };
|
| 521 | Component.prototype.destroy = function () {
|
| 522 | this.unregisterElements();
|
| 523 | };
|
| 524 | Component.prototype.onElementEvent = function (event) {
|
| 525 | };
|
| 526 | Component.prototype.setEventsHandler = function () {
|
| 527 | var props = this.getProps();
|
| 528 | var scope = Object.keys(props).reduce(function (cur, key) {
|
| 529 | if (typeof props[key] === 'function') {
|
| 530 | cur[key] = props[key];
|
| 531 | }
|
| 532 | return cur;
|
| 533 | }, {});
|
| 534 | if (Object.keys(scope).length > 0) {
|
| 535 | this.eventHandlers.push(scope);
|
| 536 | }
|
| 537 | };
|
| 538 | Component.prototype.onBeforeElementEvent = function (event) {
|
| 539 | if (this.preventClosable()) {
|
| 540 | return;
|
| 541 | }
|
| 542 | this.onElementEvent(event);
|
| 543 | };
|
| 544 | return Component;
|
| 545 | }());
|
| 546 |
|
| 547 | var Collapse = (function (_super) {
|
| 548 | __extends(Collapse, _super);
|
| 549 | function Collapse(props) {
|
| 550 | if (props === void 0) { props = { toggle: false }; }
|
| 551 | var _this = _super.call(this, 'collapse', { toggle: false }, props) || this;
|
| 552 | var toggle = _this.getProp('toggle');
|
| 553 | if (toggle) {
|
| 554 | _this.toggle();
|
| 555 | }
|
| 556 | return _this;
|
| 557 | }
|
| 558 | Collapse.attachDOM = function () {
|
| 559 | var className = 'collapse';
|
| 560 | utils.Observer.subscribe({
|
| 561 | componentClass: className,
|
| 562 | onAdded: function (element, create) {
|
| 563 | create(new Collapse({ element: element }));
|
| 564 | },
|
| 565 | onRemoved: function (element, remove) {
|
| 566 | remove('Collapse', element);
|
| 567 | },
|
| 568 | });
|
| 569 | document.addEventListener(utils.Event.CLICK, function (event) {
|
| 570 | if (!event.target) {
|
| 571 | return;
|
| 572 | }
|
| 573 | var target = utils.Selector.closest(event.target, '[data-toggle]');
|
| 574 | if (!target) {
|
| 575 | return;
|
| 576 | }
|
| 577 | var dataToggleAttr = target.getAttribute('data-toggle');
|
| 578 | if (dataToggleAttr && dataToggleAttr === className) {
|
| 579 | var id = target.getAttribute('data-target') || target.getAttribute('href');
|
| 580 | if (!id) {
|
| 581 | return;
|
| 582 | }
|
| 583 | event.preventDefault();
|
| 584 | var collapse = document.querySelector(id);
|
| 585 | if (!collapse) {
|
| 586 | return;
|
| 587 | }
|
| 588 | var collapseComponent = utils.Observer.getComponent(className, { element: collapse });
|
| 589 | if (!collapseComponent) {
|
| 590 | return;
|
| 591 | }
|
| 592 | collapseComponent.toggle({ element: collapse, toggle: true });
|
| 593 | }
|
| 594 | });
|
| 595 | };
|
| 596 | Collapse.prototype.getHeight = function () {
|
| 597 | return this.getElement().getBoundingClientRect(this.getElement()).height;
|
| 598 | };
|
| 599 | Collapse.prototype.toggle = function () {
|
| 600 | if (this.isVisible()) {
|
| 601 | return this.hide();
|
| 602 | }
|
| 603 | return this.show();
|
| 604 | };
|
| 605 | Collapse.prototype.show = function () {
|
| 606 | var _this = this;
|
| 607 | var element = this.getElement();
|
| 608 | if (element.classList.contains('collapsing') || this.isVisible()) {
|
| 609 | return false;
|
| 610 | }
|
| 611 | this.triggerEvent(utils.Event.SHOW);
|
| 612 | var onCollapsed = function () {
|
| 613 | _this.triggerEvent(utils.Event.SHOWN);
|
| 614 | element.classList.add('show');
|
| 615 | element.classList.remove('collapsing');
|
| 616 | element.removeEventListener(utils.Event.TRANSITION_END, onCollapsed);
|
| 617 | element.setAttribute('aria-expanded', true);
|
| 618 | element.style.height = 'auto';
|
| 619 | };
|
| 620 | if (!element.classList.contains('collapsing')) {
|
| 621 | element.classList.add('collapsing');
|
| 622 | }
|
| 623 | element.addEventListener(utils.Event.TRANSITION_END, onCollapsed);
|
| 624 | var height = this.getHeight();
|
| 625 | element.style.height = '0px';
|
| 626 | setTimeout(function () {
|
| 627 | element.style.height = height + "px";
|
| 628 | }, 20);
|
| 629 | return true;
|
| 630 | };
|
| 631 | Collapse.prototype.hide = function () {
|
| 632 | var _this = this;
|
| 633 | var element = this.getElement();
|
| 634 | if (element.classList.contains('collapsing')) {
|
| 635 | return false;
|
| 636 | }
|
| 637 | if (!element.classList.contains('show')) {
|
| 638 | return false;
|
| 639 | }
|
| 640 | this.triggerEvent(utils.Event.HIDE);
|
| 641 | var onCollapsed = function () {
|
| 642 | _this.triggerEvent(utils.Event.HIDDEN);
|
| 643 | element.classList.remove('collapsing');
|
| 644 | element.style.height = 'auto';
|
| 645 | element.removeEventListener(utils.Event.TRANSITION_END, onCollapsed);
|
| 646 | element.setAttribute('aria-expanded', false);
|
| 647 | };
|
| 648 | element.style.height = element.offsetHeight + "px";
|
| 649 | setTimeout(function () {
|
| 650 | element.style.height = '0px';
|
| 651 | }, 20);
|
| 652 | element.addEventListener(utils.Event.TRANSITION_END, onCollapsed);
|
| 653 | if (!element.classList.contains('collapsing')) {
|
| 654 | element.classList.add('collapsing');
|
| 655 | }
|
| 656 | element.classList.remove('show');
|
| 657 | return true;
|
| 658 | };
|
| 659 | Collapse.prototype.isVisible = function () {
|
| 660 | return this.getElement().classList.contains('show');
|
| 661 | };
|
| 662 | return Collapse;
|
| 663 | }(Component));
|
| 664 | Collapse.attachDOM();
|
| 665 |
|
| 666 | var Accordion = (function (_super) {
|
| 667 | __extends(Accordion, _super);
|
| 668 | function Accordion(props) {
|
| 669 | var _this = _super.call(this, 'accordion', { multiple: false }, props) || this;
|
| 670 | _this.collapses = [];
|
| 671 | var element = _this.getElement();
|
| 672 | var toggles = Array
|
| 673 | .from(element.querySelectorAll('[data-toggle="accordion"]') || []);
|
| 674 | toggles.forEach(function (toggle) {
|
| 675 | var collapseId = toggle.getAttribute('href') || toggle.getAttribute('data-target');
|
| 676 | if (collapseId === null) {
|
| 677 | throw new Error('Accordion: collapse is missing href or data-target attribute');
|
| 678 | }
|
| 679 | var collapse = document.querySelector(collapseId);
|
| 680 | if (collapse) {
|
| 681 | _this.addCollapse(collapse);
|
| 682 | }
|
| 683 | });
|
| 684 | _this.registerElement({ target: element, event: utils.Event.CLICK });
|
| 685 | return _this;
|
| 686 | }
|
| 687 | Accordion.attachDOM = function () {
|
| 688 | utils.Observer.subscribe({
|
| 689 | componentClass: 'accordion',
|
| 690 | onAdded: function (element, create) {
|
| 691 | create(new Accordion({ element: element }));
|
| 692 | },
|
| 693 | onRemoved: function (element, remove) {
|
| 694 | remove('Accordion', element);
|
| 695 | },
|
| 696 | });
|
| 697 | };
|
| 698 | Accordion.prototype.addCollapse = function (element) {
|
| 699 | var collapse = new Collapse({
|
| 700 | element: element,
|
| 701 | });
|
| 702 | this.collapses.push(collapse);
|
| 703 | return collapse;
|
| 704 | };
|
| 705 | Accordion.prototype.getCollapse = function (element) {
|
| 706 | var el = this.getElement();
|
| 707 | var collapse = this.collapses.find(function (c) { return el.getAttribute('id') === element.getAttribute('id'); });
|
| 708 | if (!collapse) {
|
| 709 | collapse = this.addCollapse(element);
|
| 710 | }
|
| 711 | return collapse;
|
| 712 | };
|
| 713 | Accordion.prototype.getCollapses = function () {
|
| 714 | return this.collapses;
|
| 715 | };
|
| 716 | Accordion.prototype.setCollapses = function (showCollapse) {
|
| 717 | var _this = this;
|
| 718 | var element = this.getElement();
|
| 719 | var collapse = this.getCollapse(showCollapse);
|
| 720 | var multipleOpen = this.getProp('multiple');
|
| 721 | if (!multipleOpen) {
|
| 722 | this.collapses.filter(function (c) { return c.getElement() !== collapse.getElement(); }).forEach(function (c) {
|
| 723 | _this.toggleIcon(c.getElement(), 'icon-minus', 'icon-plus');
|
| 724 | c.hide();
|
| 725 | });
|
| 726 | }
|
| 727 | var v = collapse.isVisible();
|
| 728 | this.toggleIcon(collapse.getElement(), v ? 'icon-minus' : 'icon-plus', v ? 'icon-plus' : 'icon-minus');
|
| 729 | collapse.toggle();
|
| 730 | };
|
| 731 | Accordion.prototype.onElementEvent = function (event) {
|
| 732 | var target = event.target;
|
| 733 | var toggleEl = utils.Selector.closest(target, '[data-toggle="accordion"]');
|
| 734 | if (!toggleEl) {
|
| 735 | return;
|
| 736 | }
|
| 737 | var collapseId = toggleEl.getAttribute('data-target') || toggleEl.getAttribute('href');
|
| 738 | if (!collapseId) {
|
| 739 | return;
|
| 740 | }
|
| 741 | var collapseEl = document.querySelector(collapseId);
|
| 742 | var accordion = utils.Selector.closest(toggleEl, '.accordion');
|
| 743 | if (!accordion || !collapseEl) {
|
| 744 | return;
|
| 745 | }
|
| 746 | event.preventDefault();
|
| 747 | this.show(collapseEl);
|
| 748 | };
|
| 749 | Accordion.prototype.toggleIcon = function (collapse, remove, add) {
|
| 750 | var id = collapse.getAttribute('id');
|
| 751 | var selector = "[data-toggle=\"accordion\"][href=\"#" + id + "\"] .collapse-toggle";
|
| 752 | var iconEl = document.querySelector(selector);
|
| 753 | if (!iconEl) {
|
| 754 | return;
|
| 755 | }
|
| 756 | if (iconEl.classList.contains(remove)) {
|
| 757 | iconEl.classList.remove(remove);
|
| 758 | iconEl.classList.add(add);
|
| 759 | }
|
| 760 | };
|
| 761 | Accordion.prototype.show = function (collapseEl) {
|
| 762 | var collapse = collapseEl;
|
| 763 | if (typeof collapseEl === 'string') {
|
| 764 | collapse = document.querySelector(collapseEl);
|
| 765 | }
|
| 766 | if (!collapse) {
|
| 767 | throw new Error("The collapsible " + collapseEl + " is an invalid HTMLElement.");
|
| 768 | }
|
| 769 | this.setCollapses(collapse);
|
| 770 | return true;
|
| 771 | };
|
| 772 | Accordion.prototype.hide = function (collapseEl) {
|
| 773 | var collapse = collapseEl;
|
| 774 | if (typeof collapseEl === 'string') {
|
| 775 | collapse = document.querySelector(collapseEl);
|
| 776 | }
|
| 777 | if (!collapse) {
|
| 778 | throw new Error("The collapsible " + collapseEl + " is an invalid HTMLElement.");
|
| 779 | }
|
| 780 | var collapseObj = this.getCollapse(collapse);
|
| 781 | return collapseObj.hide();
|
| 782 | };
|
| 783 | return Accordion;
|
| 784 | }(Component));
|
| 785 | Accordion.attachDOM();
|
| 786 |
|
| 787 | var Alert = (function (_super) {
|
| 788 | __extends(Alert, _super);
|
| 789 | function Alert(props) {
|
| 790 | if (props === void 0) { props = { fade: true }; }
|
| 791 | var _this = _super.call(this, 'alert', { fade: true }, props) || this;
|
| 792 | _this.onTransition = false;
|
| 793 | if (_this.getOpacity() !== 0) {
|
| 794 | var target = _this.getElement().querySelector('[data-dismiss="alert"]');
|
| 795 | if (target) {
|
| 796 | _this.registerElement({ target: target, event: utils.Event.CLICK });
|
| 797 | }
|
| 798 | }
|
| 799 | return _this;
|
| 800 | }
|
| 801 | Alert.attachDOM = function () {
|
| 802 | utils.Observer.subscribe({
|
| 803 | componentClass: 'alert',
|
| 804 | onAdded: function (element, create) {
|
| 805 | create(new Alert({ element: element }));
|
| 806 | },
|
| 807 | onRemoved: function (element, remove) {
|
| 808 | remove('Alert', element);
|
| 809 | },
|
| 810 | });
|
| 811 | };
|
| 812 | Alert.prototype.show = function () {
|
| 813 | var _this = this;
|
| 814 | if (this.onTransition) {
|
| 815 | return false;
|
| 816 | }
|
| 817 | var element = this.getElement();
|
| 818 | if (element.classList.contains('show') && this.getOpacity() !== 0) {
|
| 819 | return false;
|
| 820 | }
|
| 821 | this.onTransition = true;
|
| 822 | this.triggerEvent(utils.Event.SHOW);
|
| 823 | var onShow = function () {
|
| 824 | _this.triggerEvent(utils.Event.SHOWN);
|
| 825 | if (element.classList.contains('fade')) {
|
| 826 | element.classList.remove('fade');
|
| 827 | }
|
| 828 | var target = utils.Selector.closest(_this.getElement(), '[data-dismiss="alert"]');
|
| 829 | if (target) {
|
| 830 | _this.registerElement({ target: target, event: utils.Event.CLICK });
|
| 831 | }
|
| 832 | element.removeEventListener(utils.Event.TRANSITION_END, onShow);
|
| 833 | _this.onTransition = false;
|
| 834 | };
|
| 835 | var fade = this.getProp('fade');
|
| 836 | if (fade && !element.classList.contains('fade')) {
|
| 837 | element.classList.add('fade');
|
| 838 | }
|
| 839 | element.classList.add('show');
|
| 840 | element.addEventListener(utils.Event.TRANSITION_END, onShow);
|
| 841 | if (element.classList.contains('hide')) {
|
| 842 | element.classList.remove('hide');
|
| 843 | }
|
| 844 | if (!fade) {
|
| 845 | onShow();
|
| 846 | }
|
| 847 | return true;
|
| 848 | };
|
| 849 | Alert.prototype.hide = function (el) {
|
| 850 | var _this = this;
|
| 851 | if (this.onTransition || this.getOpacity() === 0) {
|
| 852 | return false;
|
| 853 | }
|
| 854 | this.onTransition = true;
|
| 855 | var element = el || this.getElement();
|
| 856 | this.triggerEvent(utils.Event.HIDE);
|
| 857 | var onHide = function () {
|
| 858 | _this.triggerEvent(utils.Event.HIDDEN);
|
| 859 | element.removeEventListener(utils.Event.TRANSITION_END, onHide);
|
| 860 | _this.onTransition = false;
|
| 861 | };
|
| 862 | var fade = this.getProp('fade');
|
| 863 | if (fade && !element.classList.contains('fade')) {
|
| 864 | element.classList.add('fade');
|
| 865 | }
|
| 866 | element.addEventListener(utils.Event.TRANSITION_END, onHide);
|
| 867 | if (!element.classList.contains('hide')) {
|
| 868 | element.classList.add('hide');
|
| 869 | }
|
| 870 | if (element.classList.contains('show')) {
|
| 871 | element.classList.remove('show');
|
| 872 | }
|
| 873 | if (!fade) {
|
| 874 | onHide();
|
| 875 | }
|
| 876 | return true;
|
| 877 | };
|
| 878 | Alert.prototype.onElementEvent = function (event) {
|
| 879 | if (event.type !== utils.Event.CLICK) {
|
| 880 | return;
|
| 881 | }
|
| 882 | this.hide();
|
| 883 | };
|
| 884 | Alert.prototype.destroy = function () {
|
| 885 | this.unregisterElements();
|
| 886 | this.hide();
|
| 887 | };
|
| 888 | Alert.prototype.getOpacity = function () {
|
| 889 | var element = this.getElement();
|
| 890 | var opacity = window.getComputedStyle(element).opacity;
|
| 891 | return parseFloat(opacity || '');
|
| 892 | };
|
| 893 | return Alert;
|
| 894 | }(Component));
|
| 895 | Alert.attachDOM();
|
| 896 |
|
| 897 | var Size;
|
| 898 | (function (Size) {
|
| 899 | Size["sm"] = "sm";
|
| 900 | Size["md"] = "md";
|
| 901 | Size["lg"] = "lg";
|
| 902 | Size["xl"] = "xl";
|
| 903 | })(Size || (Size = {}));
|
| 904 | var Color;
|
| 905 | (function (Color) {
|
| 906 | Color["primary"] = "primary";
|
| 907 | Color["secondary"] = "secondary";
|
| 908 | Color["success"] = "success";
|
| 909 | Color["warning"] = "warning";
|
| 910 | Color["danger"] = "danger";
|
| 911 | })(Color || (Color = {}));
|
| 912 | var Direction;
|
| 913 | (function (Direction) {
|
| 914 | Direction["top"] = "top";
|
| 915 | Direction["right"] = "right";
|
| 916 | Direction["bottom"] = "bottom";
|
| 917 | Direction["left"] = "left";
|
| 918 | })(Direction || (Direction = {}));
|
| 919 |
|
| 920 | var Loader = (function (_super) {
|
| 921 | __extends(Loader, _super);
|
| 922 | function Loader(props) {
|
| 923 | if (props === void 0) { props = { color: Color.primary, size: Size.md }; }
|
| 924 | return _super.call(this, 'loader', { fade: true, size: Size.md, color: Color.primary }, props) || this;
|
| 925 | }
|
| 926 | Loader.prototype.show = function () {
|
| 927 | var element = this.getElement();
|
| 928 | if (element.classList.contains('hide')) {
|
| 929 | element.classList.remove('hide');
|
| 930 | }
|
| 931 | this.triggerEvent(utils.Event.SHOW);
|
| 932 | var size = this.getProp('size');
|
| 933 | utils.Selector.removeClasses(element, Object.values(Size), 'loader');
|
| 934 | element.classList.add("loader-" + size);
|
| 935 | var color = this.getProp('color');
|
| 936 | var spinner = this.getSpinner();
|
| 937 | utils.Selector.removeClasses(spinner, Object.values(Color), 'loader');
|
| 938 | spinner.classList.add("loader-" + color);
|
| 939 | this.triggerEvent(utils.Event.SHOWN);
|
| 940 | return true;
|
| 941 | };
|
| 942 | Loader.prototype.animate = function (startAnimation) {
|
| 943 | if (startAnimation === void 0) { startAnimation = true; }
|
| 944 | if (startAnimation) {
|
| 945 | this.show();
|
| 946 | }
|
| 947 | else {
|
| 948 | this.hide();
|
| 949 | }
|
| 950 | var loaderSpinner = this.getSpinner();
|
| 951 | if (startAnimation
|
| 952 | && !loaderSpinner.classList.contains('loader-spinner-animated')) {
|
| 953 | loaderSpinner.classList.add('loader-spinner-animated');
|
| 954 | return true;
|
| 955 | }
|
| 956 | if (!startAnimation
|
| 957 | && loaderSpinner.classList.contains('loader-spinner-animated')) {
|
| 958 | loaderSpinner.classList.remove('loader-spinner-animated');
|
| 959 | }
|
| 960 | return true;
|
| 961 | };
|
| 962 | Loader.prototype.hide = function () {
|
| 963 | var element = this.getElement();
|
| 964 | if (!element.classList.contains('hide')) {
|
| 965 | element.classList.add('hide');
|
| 966 | }
|
| 967 | this.triggerEvent(utils.Event.HIDE);
|
| 968 | this.triggerEvent(utils.Event.HIDDEN);
|
| 969 | return true;
|
| 970 | };
|
| 971 | Loader.prototype.getSpinner = function () {
|
| 972 | return this.getElement().querySelector('.loader-spinner');
|
| 973 | };
|
| 974 | return Loader;
|
| 975 | }(Component));
|
| 976 |
|
| 977 | var Modal = (function (_super) {
|
| 978 | __extends(Modal, _super);
|
| 979 | function Modal(props, autoCreate) {
|
| 980 | if (autoCreate === void 0) { autoCreate = true; }
|
| 981 | var _this = _super.call(this, 'modal', {
|
| 982 | title: null,
|
| 983 | message: null,
|
| 984 | cancelable: true,
|
| 985 | background: null,
|
| 986 | cancelableKeyCodes: [
|
| 987 | 27,
|
| 988 | 13,
|
| 989 | ],
|
| 990 | buttons: [
|
| 991 | { event: 'confirm', text: 'Ok', dismiss: true, class: 'btn btn-primary' },
|
| 992 | ],
|
| 993 | center: true,
|
| 994 | }, props) || this;
|
| 995 | _this.backdropSelector = 'modal-backdrop';
|
| 996 | _this.elementGenerated = false;
|
| 997 | _this.setTemplate(''
|
| 998 | + '<div class="modal" tabindex="-1" role="modal" data-no-boot>'
|
| 999 | + '<div class="modal-inner" role="document">'
|
| 1000 | + '<div class="modal-content">'
|
| 1001 | + '<div class="modal-header">'
|
| 1002 | + '<h5 class="modal-title"></h5>'
|
| 1003 | + '<button type="button" class="icon-close" data-dismiss="modal" aria-label="Close">'
|
| 1004 | + '<span class="icon" aria-hidden="true"></span>'
|
| 1005 | + '</button>'
|
| 1006 | + '</div>'
|
| 1007 | + '<div class="modal-body">'
|
| 1008 | + '<p></p>'
|
| 1009 | + '</div>'
|
| 1010 | + '<div class="modal-footer">'
|
| 1011 | + '</div>'
|
| 1012 | + '</div>'
|
| 1013 | + '</div>'
|
| 1014 | + '</div>');
|
| 1015 | if (autoCreate && _this.getElement() === null) {
|
| 1016 | _this.build();
|
| 1017 | }
|
| 1018 | return _this;
|
| 1019 | }
|
| 1020 | Modal.attachDOM = function () {
|
| 1021 | var className = 'modal';
|
| 1022 | utils.Observer.subscribe({
|
| 1023 | componentClass: className,
|
| 1024 | onAdded: function (element, create) {
|
| 1025 | create(new Modal({ element: element }));
|
| 1026 | },
|
| 1027 | onRemoved: function (element, remove) {
|
| 1028 | remove('Modal', element);
|
| 1029 | },
|
| 1030 | });
|
| 1031 | document.addEventListener(utils.Event.CLICK, function (event) {
|
| 1032 | var target = event.target;
|
| 1033 | if (!target) {
|
| 1034 | return;
|
| 1035 | }
|
| 1036 | var toggleEl = utils.Selector.closest(target, "[data-toggle=\"" + className + "\"]");
|
| 1037 | if (toggleEl) {
|
| 1038 | var selector = toggleEl.getAttribute('data-target');
|
| 1039 | if (!selector) {
|
| 1040 | return;
|
| 1041 | }
|
| 1042 | var modal = document.querySelector(selector);
|
| 1043 | if (!modal) {
|
| 1044 | return;
|
| 1045 | }
|
| 1046 | var modalComponent = utils.Observer.getComponent(className, { element: modal });
|
| 1047 | if (!modalComponent) {
|
| 1048 | return;
|
| 1049 | }
|
| 1050 | target.blur();
|
| 1051 | modalComponent.show();
|
| 1052 | }
|
| 1053 | });
|
| 1054 | };
|
| 1055 | Modal.prototype.build = function () {
|
| 1056 | var _this = this;
|
| 1057 | this.elementGenerated = true;
|
| 1058 | var builder = document.createElement('div');
|
| 1059 | builder.innerHTML = this.getTemplate();
|
| 1060 | this.setElement(builder.firstChild);
|
| 1061 | var element = this.getElement();
|
| 1062 | var title = this.getProp('title');
|
| 1063 | if (title !== null) {
|
| 1064 | element.querySelector('.modal-title').innerHTML = title;
|
| 1065 | }
|
| 1066 | var message = this.getProp('message');
|
| 1067 | if (message !== null) {
|
| 1068 | element.querySelector('.modal-body').firstChild.innerHTML = message;
|
| 1069 | }
|
| 1070 | else {
|
| 1071 | this.removeTextBody();
|
| 1072 | }
|
| 1073 | var cancelable = this.getProp('cancelable');
|
| 1074 | if (!cancelable) {
|
| 1075 | element.querySelector('.close').style.display = 'none';
|
| 1076 | }
|
| 1077 | var buttons = this.getProp('buttons');
|
| 1078 | if (Array.isArray(buttons) && buttons.length > 0) {
|
| 1079 | buttons.forEach(function (button) {
|
| 1080 | element.querySelector('.modal-footer').appendChild(_this.buildButton(button));
|
| 1081 | });
|
| 1082 | }
|
| 1083 | else {
|
| 1084 | this.removeFooter();
|
| 1085 | }
|
| 1086 | document.body.appendChild(element);
|
| 1087 | };
|
| 1088 | Modal.prototype.show = function () {
|
| 1089 | var _this = this;
|
| 1090 | var element = this.getElement();
|
| 1091 | if (element === null) {
|
| 1092 | this.build();
|
| 1093 | }
|
| 1094 | if (element.classList.contains('show')) {
|
| 1095 | return false;
|
| 1096 | }
|
| 1097 | document.body.style.overflow = 'hidden';
|
| 1098 | (function () { return __awaiter(_this, void 0, void 0, function () {
|
| 1099 | var onShown;
|
| 1100 | var _this = this;
|
| 1101 | return __generator(this, function (_a) {
|
| 1102 | switch (_a.label) {
|
| 1103 | case 0: return [4, utils.sleep(20)];
|
| 1104 | case 1:
|
| 1105 | _a.sent();
|
| 1106 | this.triggerEvent(utils.Event.SHOW);
|
| 1107 | this.buildBackdrop();
|
| 1108 | this.attachEvents();
|
| 1109 | onShown = function () {
|
| 1110 | _this.triggerEvent(utils.Event.SHOWN);
|
| 1111 | element.removeEventListener(utils.Event.TRANSITION_END, onShown);
|
| 1112 | };
|
| 1113 | element.addEventListener(utils.Event.TRANSITION_END, onShown);
|
| 1114 | if (this.getProp('center')) {
|
| 1115 | this.center();
|
| 1116 | }
|
| 1117 | element.classList.add('show');
|
| 1118 | return [2];
|
| 1119 | }
|
| 1120 | });
|
| 1121 | }); })();
|
| 1122 | return true;
|
| 1123 | };
|
| 1124 | Modal.prototype.hide = function () {
|
| 1125 | var _this = this;
|
| 1126 | var element = this.getElement();
|
| 1127 | if (!element.classList.contains('show')) {
|
| 1128 | return false;
|
| 1129 | }
|
| 1130 | document.body.style.overflow = 'visible';
|
| 1131 | this.triggerEvent(utils.Event.HIDE);
|
| 1132 | this.detachEvents();
|
| 1133 | element.classList.add('hide');
|
| 1134 | element.classList.remove('show');
|
| 1135 | var backdrop = this.getBackdrop();
|
| 1136 | var onHidden = function () {
|
| 1137 | if (backdrop) {
|
| 1138 | document.body.removeChild(backdrop);
|
| 1139 | backdrop.removeEventListener(utils.Event.TRANSITION_END, onHidden);
|
| 1140 | }
|
| 1141 | element.classList.remove('hide');
|
| 1142 | _this.triggerEvent(utils.Event.HIDDEN);
|
| 1143 | if (_this.elementGenerated) {
|
| 1144 | document.body.removeChild(element);
|
| 1145 | }
|
| 1146 | };
|
| 1147 | if (backdrop) {
|
| 1148 | backdrop.addEventListener(utils.Event.TRANSITION_END, onHidden);
|
| 1149 | backdrop.classList.add('fadeout');
|
| 1150 | }
|
| 1151 | return true;
|
| 1152 | };
|
| 1153 | Modal.prototype.onElementEvent = function (event) {
|
| 1154 | if (event.type === 'keyup') {
|
| 1155 | var keycodes = this.getProp('cancelableKeyCodes');
|
| 1156 | if (keycodes.find(function (k) { return k === event.keyCode; })) {
|
| 1157 | this.hide();
|
| 1158 | }
|
| 1159 | return;
|
| 1160 | }
|
| 1161 | if (event.type === utils.Event.START) {
|
| 1162 | this.hide();
|
| 1163 | return;
|
| 1164 | }
|
| 1165 | if (event.type === utils.Event.CLICK) {
|
| 1166 | var target = event.target;
|
| 1167 | var eventName = target.getAttribute('data-event');
|
| 1168 | if (eventName) {
|
| 1169 | this.triggerEvent(eventName);
|
| 1170 | }
|
| 1171 | var dismissButton = utils.Selector.closest(target, '[data-dismiss]');
|
| 1172 | if (dismissButton && dismissButton.getAttribute('data-dismiss') === 'modal') {
|
| 1173 | this.hide();
|
| 1174 | }
|
| 1175 | }
|
| 1176 | };
|
| 1177 | Modal.prototype.setBackgroud = function () {
|
| 1178 | var element = this.getElement();
|
| 1179 | var background = this.getProp('background');
|
| 1180 | if (!background) {
|
| 1181 | return;
|
| 1182 | }
|
| 1183 | if (!element.classList.contains("modal-" + background)) {
|
| 1184 | element.classList.add("modal-" + background);
|
| 1185 | }
|
| 1186 | if (!element.classList.contains('text-white')) {
|
| 1187 | element.classList.add('text-white');
|
| 1188 | }
|
| 1189 | };
|
| 1190 | Modal.prototype.buildButton = function (buttonInfo) {
|
| 1191 | var button = document.createElement('button');
|
| 1192 | button.setAttribute('type', 'button');
|
| 1193 | button.setAttribute('class', buttonInfo.class || 'btn');
|
| 1194 | button.setAttribute('data-event', buttonInfo.event);
|
| 1195 | button.innerHTML = buttonInfo.text;
|
| 1196 | if (buttonInfo.dismiss) {
|
| 1197 | button.setAttribute('data-dismiss', 'modal');
|
| 1198 | }
|
| 1199 | return button;
|
| 1200 | };
|
| 1201 | Modal.prototype.buildBackdrop = function () {
|
| 1202 | var backdrop = document.createElement('div');
|
| 1203 | backdrop.setAttribute('data-id', this.getId());
|
| 1204 | backdrop.classList.add(this.backdropSelector);
|
| 1205 | document.body.appendChild(backdrop);
|
| 1206 | };
|
| 1207 | Modal.prototype.getBackdrop = function () {
|
| 1208 | return document.querySelector("." + this.backdropSelector + "[data-id=\"" + this.getId() + "\"]");
|
| 1209 | };
|
| 1210 | Modal.prototype.removeTextBody = function () {
|
| 1211 | var element = this.getElement();
|
| 1212 | element.querySelector('.modal-body')
|
| 1213 | .removeChild(element.querySelector('.modal-body').firstChild);
|
| 1214 | };
|
| 1215 | Modal.prototype.removeFooter = function () {
|
| 1216 | var element = this.getElement();
|
| 1217 | var footer = element.querySelector('.modal-footer');
|
| 1218 | element.querySelector('.modal-content').removeChild(footer);
|
| 1219 | };
|
| 1220 | Modal.prototype.center = function () {
|
| 1221 | var element = this.getElement();
|
| 1222 | var computedStyle = window.getComputedStyle(element);
|
| 1223 | if (computedStyle && computedStyle.height) {
|
| 1224 | var height = computedStyle.height.slice(0, computedStyle.height.length - 2);
|
| 1225 | var top_1 = (window.innerHeight / 2) - (parseFloat(height) / 2);
|
| 1226 | element.style.top = top_1 + "px";
|
| 1227 | }
|
| 1228 | };
|
| 1229 | Modal.prototype.attachEvents = function () {
|
| 1230 | var _this = this;
|
| 1231 | var element = this.getElement();
|
| 1232 | var buttons = Array
|
| 1233 | .from(element.querySelectorAll('[data-dismiss], .modal-footer button') || []);
|
| 1234 | buttons.forEach(function (button) { return _this.registerElement({
|
| 1235 | target: button,
|
| 1236 | event: utils.Event.CLICK,
|
| 1237 | }); });
|
| 1238 | var cancelable = this.getProp('cancelable');
|
| 1239 | var backdrop = this.getBackdrop();
|
| 1240 | if (cancelable && backdrop) {
|
| 1241 | this.registerElement({ target: backdrop, event: utils.Event.START });
|
| 1242 | this.registerElement({ target: document, event: 'keyup' });
|
| 1243 | }
|
| 1244 | };
|
| 1245 | Modal.prototype.detachEvents = function () {
|
| 1246 | var _this = this;
|
| 1247 | var element = this.getElement();
|
| 1248 | var buttons = Array
|
| 1249 | .from(element.querySelectorAll('[data-dismiss], .modal-footer button') || []);
|
| 1250 | buttons.forEach(function (button) { return _this.unregisterElement({
|
| 1251 | target: button,
|
| 1252 | event: utils.Event.CLICK,
|
| 1253 | }); });
|
| 1254 | var cancelable = this.getProp('cancelable');
|
| 1255 | if (cancelable) {
|
| 1256 | var backdrop = this.getBackdrop();
|
| 1257 | this.unregisterElement({ target: backdrop, event: utils.Event.START });
|
| 1258 | this.unregisterElement({ target: document, event: 'keyup' });
|
| 1259 | }
|
| 1260 | };
|
| 1261 | return Modal;
|
| 1262 | }(Component));
|
| 1263 | Modal.attachDOM();
|
| 1264 |
|
| 1265 | var ModalConfirm = (function (_super) {
|
| 1266 | __extends(ModalConfirm, _super);
|
| 1267 | function ModalConfirm(props) {
|
| 1268 | var _this = _super.call(this, Object.assign({
|
| 1269 | buttons: [
|
| 1270 | { event: 'cancel', text: 'Cancel', dismiss: true, class: 'btn btn-secondary' },
|
| 1271 | { event: 'confirm', text: 'Ok', dismiss: true, class: 'btn btn-primary' },
|
| 1272 | ],
|
| 1273 | }, props), false) || this;
|
| 1274 | _this.setTemplate(''
|
| 1275 | + '<div class="modal" tabindex="-1" role="modal" data-no-boot>'
|
| 1276 | + '<div class="modal-inner" role="document">'
|
| 1277 | + '<div class="modal-content">'
|
| 1278 | + '<div class="modal-header">'
|
| 1279 | + '<h5 class="modal-title"></h5>'
|
| 1280 | + '<button type="button" class="icon-close" data-dismiss="modal" aria-label="Close">'
|
| 1281 | + '<span class="icon" aria-hidden="true"></span>'
|
| 1282 | + '</button>'
|
| 1283 | + '</div>'
|
| 1284 | + '<div class="modal-body">'
|
| 1285 | + '<p></p>'
|
| 1286 | + '</div>'
|
| 1287 | + '<div class="modal-footer">'
|
| 1288 | + '</div>'
|
| 1289 | + '</div>'
|
| 1290 | + '</div>'
|
| 1291 | + '</div>');
|
| 1292 | if (_this.getElement() === null) {
|
| 1293 | _this.build();
|
| 1294 | }
|
| 1295 | return _this;
|
| 1296 | }
|
| 1297 | return ModalConfirm;
|
| 1298 | }(Modal));
|
| 1299 |
|
| 1300 | var ModalLoader = (function (_super) {
|
| 1301 | __extends(ModalLoader, _super);
|
| 1302 | function ModalLoader(props) {
|
| 1303 | var _this = _super.call(this, Object.assign({
|
| 1304 | buttons: [
|
| 1305 | { event: 'cancel', text: 'Cancel', dismiss: true, class: 'btn btn-secondary' },
|
| 1306 | { event: 'confirm', text: 'Ok', dismiss: true, class: 'btn btn-primary' },
|
| 1307 | ],
|
| 1308 | }, props), false) || this;
|
| 1309 | _this.loader = null;
|
| 1310 | _this.setTemplate(''
|
| 1311 | + '<div class="modal" tabindex="-1" role="modal" data-no-boot>'
|
| 1312 | + '<div class="modal-inner" role="document">'
|
| 1313 | + '<div class="modal-content">'
|
| 1314 | + '<div class="modal-header">'
|
| 1315 | + '<h5 class="modal-title"></h5>'
|
| 1316 | + '<button type="button" class="icon-close" data-dismiss="modal" aria-label="Close">'
|
| 1317 | + '<span class="icon" aria-hidden="true"></span>'
|
| 1318 | + '</button>'
|
| 1319 | + '</div>'
|
| 1320 | + '<div class="modal-body">'
|
| 1321 | + '<p></p>'
|
| 1322 | + '<div class="mx-auto text-center">'
|
| 1323 | + '<div class="loader mx-auto d-block">'
|
| 1324 | + '<div class="loader-spinner"></div>'
|
| 1325 | + '</div>'
|
| 1326 | + '</div>'
|
| 1327 | + '</div>'
|
| 1328 | + '<div class="modal-footer">'
|
| 1329 | + '</div>'
|
| 1330 | + '</div>'
|
| 1331 | + '</div>'
|
| 1332 | + '</div>');
|
| 1333 | if (_this.getElement() === null) {
|
| 1334 | _this.build();
|
| 1335 | }
|
| 1336 | return _this;
|
| 1337 | }
|
| 1338 | ModalLoader.prototype.show = function () {
|
| 1339 | _super.prototype.show.call(this);
|
| 1340 | this.loader = new Loader({ element: this.getElement().querySelector('.loader') });
|
| 1341 | this.loader.animate(true);
|
| 1342 | return true;
|
| 1343 | };
|
| 1344 | ModalLoader.prototype.hide = function () {
|
| 1345 | _super.prototype.hide.call(this);
|
| 1346 | if (this.loader) {
|
| 1347 | this.loader.animate(false);
|
| 1348 | }
|
| 1349 | this.loader = null;
|
| 1350 | return true;
|
| 1351 | };
|
| 1352 | return ModalLoader;
|
| 1353 | }(Modal));
|
| 1354 |
|
| 1355 | var ModalPrompt = (function (_super) {
|
| 1356 | __extends(ModalPrompt, _super);
|
| 1357 | function ModalPrompt(props) {
|
| 1358 | var _this = _super.call(this, Object.assign({
|
| 1359 | buttons: [
|
| 1360 | { event: 'cancel', text: 'Cancel', dismiss: true, class: 'btn btn-secondary' },
|
| 1361 | { event: 'confirm', text: 'Ok', dismiss: true, class: 'btn btn-primary' },
|
| 1362 | ],
|
| 1363 | inputValue: '',
|
| 1364 | }, props), false) || this;
|
| 1365 | _this.setTemplate(''
|
| 1366 | + '<div class="modal" tabindex="-1" role="modal" data-no-boot>'
|
| 1367 | + '<div class="modal-inner" role="document">'
|
| 1368 | + '<div class="modal-content">'
|
| 1369 | + '<div class="modal-header">'
|
| 1370 | + '<h5 class="modal-title"></h5>'
|
| 1371 | + '<button type="button" class="icon-close" data-dismiss="modal" aria-label="Close">'
|
| 1372 | + '<span class="icon" aria-hidden="true"></span>'
|
| 1373 | + '</button>'
|
| 1374 | + '</div>'
|
| 1375 | + '<div class="modal-body">'
|
| 1376 | + '<p></p>'
|
| 1377 | + '<input class="form-control" type="text" value="">'
|
| 1378 | + '</div>'
|
| 1379 | + '<div class="modal-footer">'
|
| 1380 | + '</div>'
|
| 1381 | + '</div>'
|
| 1382 | + '</div>'
|
| 1383 | + '</div>');
|
| 1384 | if (_this.getElement() === null) {
|
| 1385 | _this.build();
|
| 1386 | }
|
| 1387 | return _this;
|
| 1388 | }
|
| 1389 | ModalPrompt.prototype.show = function () {
|
| 1390 | _super.prototype.show.call(this);
|
| 1391 | var defaultValue = this.getProp('inputValue');
|
| 1392 | if (typeof defaultValue === 'string') {
|
| 1393 | this.setInputValue(defaultValue);
|
| 1394 | }
|
| 1395 | this.attachInputEvent();
|
| 1396 | return true;
|
| 1397 | };
|
| 1398 | ModalPrompt.prototype.hide = function () {
|
| 1399 | _super.prototype.hide.call(this);
|
| 1400 | this.detachInputEvent();
|
| 1401 | return true;
|
| 1402 | };
|
| 1403 | ModalPrompt.prototype.setInputValue = function (value) {
|
| 1404 | if (value === void 0) { value = ''; }
|
| 1405 | this.getInput().value = value;
|
| 1406 | };
|
| 1407 | ModalPrompt.prototype.getInputValue = function () {
|
| 1408 | return this.getInput().value;
|
| 1409 | };
|
| 1410 | ModalPrompt.prototype.onElementEvent = function (event) {
|
| 1411 | if (event.target === this.getInput()) {
|
| 1412 | return;
|
| 1413 | }
|
| 1414 | };
|
| 1415 | ModalPrompt.prototype.getInput = function () {
|
| 1416 | return this.getElement().querySelector('.form-control');
|
| 1417 | };
|
| 1418 | ModalPrompt.prototype.attachInputEvent = function () {
|
| 1419 | this.registerElement({ target: this.getInput(), event: 'keyup' });
|
| 1420 | };
|
| 1421 | ModalPrompt.prototype.detachInputEvent = function () {
|
| 1422 | this.unregisterElement({ target: this.getInput(), event: 'keyup' });
|
| 1423 | };
|
| 1424 | return ModalPrompt;
|
| 1425 | }(Modal));
|
| 1426 |
|
| 1427 | var Notification = (function (_super) {
|
| 1428 | __extends(Notification, _super);
|
| 1429 | function Notification(props) {
|
| 1430 | if (props === void 0) { props = { element: null, title: '', button: true }; }
|
| 1431 | var _this = _super.call(this, 'notification', {
|
| 1432 | button: true,
|
| 1433 | timeout: null,
|
| 1434 | title: '',
|
| 1435 | message: null,
|
| 1436 | background: 'primary',
|
| 1437 | appendIn: document.body,
|
| 1438 | directionX: 'right',
|
| 1439 | directionY: 'top',
|
| 1440 | offsetX: 0,
|
| 1441 | offsetY: 0,
|
| 1442 | }, props) || this;
|
| 1443 | _this.timeoutCallback = null;
|
| 1444 | _this.elementGenerated = false;
|
| 1445 | _this.setTemplate(''
|
| 1446 | + '<div class="notification" data-no-boot>'
|
| 1447 | + '<div class="notification-inner">'
|
| 1448 | + '<div class="notification-header">'
|
| 1449 | + '<h5 class="notification-title"></h5>'
|
| 1450 | + '<button type="button" class="icon-close" data-dismiss="notification" aria-label="Close">'
|
| 1451 | + '<span class="icon" aria-hidden="true"></span>'
|
| 1452 | + '</button>'
|
| 1453 | + '</div>'
|
| 1454 | + '<div class="notification-body"></div>'
|
| 1455 | + '</div>'
|
| 1456 | + '</div>');
|
| 1457 | if (_this.getElement() === null) {
|
| 1458 | _this.build();
|
| 1459 | }
|
| 1460 | return _this;
|
| 1461 | }
|
| 1462 | Notification.attachDOM = function () {
|
| 1463 | utils.Observer.subscribe({
|
| 1464 | componentClass: 'notification',
|
| 1465 | onAdded: function (element, create) {
|
| 1466 | create(new Notification({ element: element }));
|
| 1467 | },
|
| 1468 | onRemoved: function (element, remove) {
|
| 1469 | remove('Notification', element);
|
| 1470 | },
|
| 1471 | });
|
| 1472 | };
|
| 1473 | Notification.prototype.build = function () {
|
| 1474 | this.elementGenerated = true;
|
| 1475 | var builder = document.createElement('div');
|
| 1476 | builder.innerHTML = this.getTemplate();
|
| 1477 | this.setElement(builder.firstChild);
|
| 1478 | var element = this.getElement();
|
| 1479 | element.querySelector('.notification-title').innerHTML = this.getProp('title');
|
| 1480 | if (this.getProp('message')) {
|
| 1481 | element.querySelector('.notification-body').innerHTML = this.getProp('message');
|
| 1482 | }
|
| 1483 | else {
|
| 1484 | element.querySelector('.notification-body').style.display = 'none';
|
| 1485 | }
|
| 1486 | if (!this.getProp('button')) {
|
| 1487 | element.querySelector('button').style.display = 'none';
|
| 1488 | }
|
| 1489 | var container = this.getProp('appendIn');
|
| 1490 | container.appendChild(element);
|
| 1491 | };
|
| 1492 | Notification.prototype.setPosition = function () {
|
| 1493 | var x = this.getProp('directionX');
|
| 1494 | var y = this.getProp('directionY');
|
| 1495 | var offsetX = this.getProp('offsetX');
|
| 1496 | var offsetY = this.getProp('offsetY');
|
| 1497 | var notification = this.getElement();
|
| 1498 | utils.Selector.removeClasses(notification, Object.values(Direction));
|
| 1499 | notification.style.marginLeft = '0px';
|
| 1500 | notification.style.marginRight = '0px';
|
| 1501 | notification.classList.add("notification-" + x);
|
| 1502 | notification.classList.add("notification-" + y);
|
| 1503 | var activeNotifications = Array
|
| 1504 | .from(document.querySelectorAll('.notification.show') || []);
|
| 1505 | var totalNotifY = 0;
|
| 1506 | activeNotifications.forEach(function (n) {
|
| 1507 | if (notification !== n) {
|
| 1508 | var style = getComputedStyle(n);
|
| 1509 | var top_1 = parseInt(style.marginTop, 10);
|
| 1510 | var bottom = parseInt(style.marginBottom, 10);
|
| 1511 | totalNotifY += n.offsetHeight + top_1 + bottom;
|
| 1512 | }
|
| 1513 | });
|
| 1514 | notification.style.transform = "translateY(" + (y === 'top' ? '' : '-') + totalNotifY + "px)";
|
| 1515 | notification.style["margin" + x.replace(/^\w/, function (c) { return c.toUpperCase(); })] = offsetX + "px";
|
| 1516 | notification.style["margin" + y.replace(/^\w/, function (c) { return c.toUpperCase(); })] = offsetY + "px";
|
| 1517 | };
|
| 1518 | Notification.prototype.show = function () {
|
| 1519 | var _this = this;
|
| 1520 | if (this.getElement() === null) {
|
| 1521 | this.build();
|
| 1522 | }
|
| 1523 | var element = this.getElement();
|
| 1524 | if (element.classList.contains('show')) {
|
| 1525 | return false;
|
| 1526 | }
|
| 1527 | var background = this.getProp('background');
|
| 1528 | if (background) {
|
| 1529 | element.removeAttribute('class');
|
| 1530 | element.setAttribute('class', 'notification');
|
| 1531 | element.classList.add("notification-" + background);
|
| 1532 | element.querySelector('button').classList.add("btn-" + background);
|
| 1533 | }
|
| 1534 | var buttonElement = element.querySelector('button[data-dismiss]');
|
| 1535 | var button = this.getProp('button');
|
| 1536 | if (button && buttonElement) {
|
| 1537 | this.registerElement({ target: buttonElement, event: utils.Event.CLICK });
|
| 1538 | }
|
| 1539 | var toggleButton = element.querySelector('button[data-dismiss]');
|
| 1540 | this.registerElement({ target: buttonElement, event: utils.Event.CLICK });
|
| 1541 | (function () { return __awaiter(_this, void 0, void 0, function () {
|
| 1542 | var timeout, onShown;
|
| 1543 | var _this = this;
|
| 1544 | return __generator(this, function (_a) {
|
| 1545 | switch (_a.label) {
|
| 1546 | case 0: return [4, utils.sleep(20)];
|
| 1547 | case 1:
|
| 1548 | _a.sent();
|
| 1549 | this.setPosition();
|
| 1550 | timeout = this.getProp('timeout');
|
| 1551 | if (Number.isInteger(timeout) && timeout > 0) {
|
| 1552 | this.timeoutCallback = setTimeout(function () {
|
| 1553 | _this.hide();
|
| 1554 | }, timeout + 1);
|
| 1555 | }
|
| 1556 | element.classList.add('show');
|
| 1557 | this.triggerEvent(utils.Event.SHOW);
|
| 1558 | onShown = function () {
|
| 1559 | _this.triggerEvent(utils.Event.SHOWN);
|
| 1560 | element.removeEventListener(utils.Event.TRANSITION_END, onShown);
|
| 1561 | };
|
| 1562 | element.addEventListener(utils.Event.TRANSITION_END, onShown);
|
| 1563 | return [2];
|
| 1564 | }
|
| 1565 | });
|
| 1566 | }); })();
|
| 1567 | return true;
|
| 1568 | };
|
| 1569 | Notification.prototype.hideBody = function () {
|
| 1570 | var body = this.getElement().querySelector('.notification-body');
|
| 1571 | if (body.classList.contains('show')) {
|
| 1572 | body.classList.remove('show');
|
| 1573 | }
|
| 1574 | };
|
| 1575 | Notification.prototype.hide = function () {
|
| 1576 | var _this = this;
|
| 1577 | if (this.timeoutCallback) {
|
| 1578 | clearTimeout(this.timeoutCallback);
|
| 1579 | this.timeoutCallback = null;
|
| 1580 | }
|
| 1581 | var element = this.getElement();
|
| 1582 | if (!element.classList.contains('show')) {
|
| 1583 | return false;
|
| 1584 | }
|
| 1585 | this.triggerEvent(utils.Event.HIDE);
|
| 1586 | var button = this.getProp('button');
|
| 1587 | var buttonElement = element.querySelector('button[data-dismiss]');
|
| 1588 | if (button && buttonElement) {
|
| 1589 | this.unregisterElement({ target: buttonElement, event: utils.Event.CLICK });
|
| 1590 | }
|
| 1591 | element.classList.remove('show');
|
| 1592 | element.classList.add('hide');
|
| 1593 | this.hideBody();
|
| 1594 | var onHidden = function () {
|
| 1595 | element.removeEventListener(utils.Event.TRANSITION_END, onHidden);
|
| 1596 | element.classList.remove('hide');
|
| 1597 | _this.triggerEvent(utils.Event.HIDDEN);
|
| 1598 | if (_this.elementGenerated) {
|
| 1599 | document.body.removeChild(element);
|
| 1600 | }
|
| 1601 | };
|
| 1602 | element.addEventListener(utils.Event.TRANSITION_END, onHidden);
|
| 1603 | return true;
|
| 1604 | };
|
| 1605 | Notification.prototype.onElementEvent = function () {
|
| 1606 | this.hide();
|
| 1607 | };
|
| 1608 | return Notification;
|
| 1609 | }(Component));
|
| 1610 |
|
| 1611 | var OffCanvas = (function (_super) {
|
| 1612 | __extends(OffCanvas, _super);
|
| 1613 | function OffCanvas(props) {
|
| 1614 | var _this = _super.call(this, 'off-canvas', {
|
| 1615 | toggle: false,
|
| 1616 | closableKeyCodes: [27],
|
| 1617 | container: document.body,
|
| 1618 | setupContainer: true,
|
| 1619 | aside: {
|
| 1620 | md: false,
|
| 1621 | lg: true,
|
| 1622 | xl: true,
|
| 1623 | },
|
| 1624 | }, props) || this;
|
| 1625 | _this.currentWidthName = null;
|
| 1626 | _this.animate = true;
|
| 1627 | _this.showAside = false;
|
| 1628 | _this.directions = ['left', 'right'];
|
| 1629 | _this.direction = null;
|
| 1630 | _this.sizes = [];
|
| 1631 | _this.backdropSelector = 'offcanvas-backdrop';
|
| 1632 | var sm = { name: 'sm', media: window.matchMedia('(min-width: 1px)') };
|
| 1633 | var md = { name: 'md', media: window.matchMedia('(min-width: 768px)') };
|
| 1634 | var lg = { name: 'lg', media: window.matchMedia('(min-width: 992px)') };
|
| 1635 | var xl = { name: 'xl', media: window.matchMedia('(min-width: 1200px)') };
|
| 1636 | _this.sizes = [sm, md, lg, xl].reverse();
|
| 1637 | _this.checkDirection();
|
| 1638 | if (_this.getProp('setupContainer')) {
|
| 1639 | _this.checkWidth();
|
| 1640 | }
|
| 1641 | var toggle = _this.getProp('toggle');
|
| 1642 | if (toggle) {
|
| 1643 | _this.toggle();
|
| 1644 | }
|
| 1645 | window.addEventListener('resize', function () { return _this.checkWidth(); }, false);
|
| 1646 | return _this;
|
| 1647 | }
|
| 1648 | OffCanvas.attachDOM = function () {
|
| 1649 | var className = 'offcanvas';
|
| 1650 | utils.Observer.subscribe({
|
| 1651 | componentClass: className,
|
| 1652 | onAdded: function (element, create) {
|
| 1653 | create(new OffCanvas({ element: element }));
|
| 1654 | },
|
| 1655 | onRemoved: function (element, remove) {
|
| 1656 | remove('OffCanvas', element);
|
| 1657 | },
|
| 1658 | });
|
| 1659 | document.addEventListener(utils.Event.CLICK, function (event) {
|
| 1660 | var target = event.target;
|
| 1661 | if (!target) {
|
| 1662 | return;
|
| 1663 | }
|
| 1664 | var toggleEl = utils.Selector.closest(target, "[data-toggle=\"" + className + "\"]");
|
| 1665 | if (toggleEl) {
|
| 1666 | var selector = toggleEl.getAttribute('data-target');
|
| 1667 | if (!selector) {
|
| 1668 | return;
|
| 1669 | }
|
| 1670 | var offCanvas = document.querySelector(selector);
|
| 1671 | if (!offCanvas) {
|
| 1672 | return;
|
| 1673 | }
|
| 1674 | var offCanvasComponent = utils.Observer.getComponent(className, { element: offCanvas });
|
| 1675 | if (!offCanvasComponent) {
|
| 1676 | return;
|
| 1677 | }
|
| 1678 | target.blur();
|
| 1679 | offCanvasComponent.toggle();
|
| 1680 | }
|
| 1681 | });
|
| 1682 | };
|
| 1683 | OffCanvas.prototype.checkDirection = function () {
|
| 1684 | var _this = this;
|
| 1685 | var element = this.getElement();
|
| 1686 | this.directions.every(function (direction) {
|
| 1687 | if (element.classList.contains("offcanvas-" + direction)) {
|
| 1688 | _this.direction = direction;
|
| 1689 | return false;
|
| 1690 | }
|
| 1691 | return true;
|
| 1692 | });
|
| 1693 | };
|
| 1694 | OffCanvas.prototype.checkWidth = function () {
|
| 1695 | if (!('matchMedia' in window)) {
|
| 1696 | return;
|
| 1697 | }
|
| 1698 | var size = this.sizes.find(function (s) {
|
| 1699 | var mediaQuery = s.media;
|
| 1700 | var match = mediaQuery.media.match(/[a-z]?-width:\s?([0-9]+)/);
|
| 1701 | return match && mediaQuery.matches ? true : false;
|
| 1702 | });
|
| 1703 | if (!size) {
|
| 1704 | return;
|
| 1705 | }
|
| 1706 | this.setAside(size.name);
|
| 1707 | };
|
| 1708 | OffCanvas.prototype.setAside = function (sizeName) {
|
| 1709 | var container = this.getContainer();
|
| 1710 | if (this.currentWidthName === sizeName || !container) {
|
| 1711 | return;
|
| 1712 | }
|
| 1713 | this.currentWidthName = sizeName;
|
| 1714 | var aside = this.getProp('aside');
|
| 1715 | this.showAside = aside[sizeName] === true;
|
| 1716 | if (aside[sizeName] === true) {
|
| 1717 | if (!container.classList.contains("offcanvas-aside-" + this.direction)) {
|
| 1718 | container.classList.add("offcanvas-aside-" + this.direction);
|
| 1719 | }
|
| 1720 | this.animate = false;
|
| 1721 | if (this.getBackdrop()) {
|
| 1722 | this.removeBackdrop();
|
| 1723 | }
|
| 1724 | var containerShowClass = this.getShowClass();
|
| 1725 | if (this.isVisible() && !container.classList.contains(containerShowClass)) {
|
| 1726 | container.classList.add(containerShowClass);
|
| 1727 | }
|
| 1728 | else if (!this.isVisible() && container.classList.contains(containerShowClass)) {
|
| 1729 | container.classList.remove(containerShowClass);
|
| 1730 | }
|
| 1731 | }
|
| 1732 | else {
|
| 1733 | if (container.classList.contains("offcanvas-aside-" + this.direction)) {
|
| 1734 | container.classList.remove("offcanvas-aside-" + this.direction);
|
| 1735 | }
|
| 1736 | this.animate = true;
|
| 1737 | this.hide();
|
| 1738 | }
|
| 1739 | };
|
| 1740 | OffCanvas.prototype.onElementEvent = function (event) {
|
| 1741 | var closableKeyCodes = this.getProp('closableKeyCodes');
|
| 1742 | if (event.type === 'keyup' && !closableKeyCodes.find(function (k) { return k === event.keyCode; })) {
|
| 1743 | return;
|
| 1744 | }
|
| 1745 | this.hide();
|
| 1746 | };
|
| 1747 | OffCanvas.prototype.isVisible = function () {
|
| 1748 | return this.getElement().classList.contains('show');
|
| 1749 | };
|
| 1750 | OffCanvas.prototype.show = function () {
|
| 1751 | var _this = this;
|
| 1752 | if (this.getElement().classList.contains('show')) {
|
| 1753 | return false;
|
| 1754 | }
|
| 1755 | this.triggerEvent(utils.Event.SHOW);
|
| 1756 | if (!this.showAside) {
|
| 1757 | this.createBackdrop();
|
| 1758 | }
|
| 1759 | (function () { return __awaiter(_this, void 0, void 0, function () {
|
| 1760 | var onShown, container, containerShowClass, el;
|
| 1761 | var _this = this;
|
| 1762 | return __generator(this, function (_a) {
|
| 1763 | switch (_a.label) {
|
| 1764 | case 0: return [4, utils.sleep(20)];
|
| 1765 | case 1:
|
| 1766 | _a.sent();
|
| 1767 | this.attachEvents();
|
| 1768 | onShown = function () {
|
| 1769 | _this.triggerEvent(utils.Event.SHOWN);
|
| 1770 | if (_this.animate) {
|
| 1771 | var element = _this.getElement();
|
| 1772 | element.removeEventListener(utils.Event.TRANSITION_END, onShown);
|
| 1773 | element.classList.remove('animate');
|
| 1774 | }
|
| 1775 | };
|
| 1776 | if (this.showAside) {
|
| 1777 | container = this.getContainer();
|
| 1778 | containerShowClass = this.getShowClass();
|
| 1779 | if (container && !container.classList.contains(containerShowClass)) {
|
| 1780 | container.classList.add(containerShowClass);
|
| 1781 | }
|
| 1782 | }
|
| 1783 | el = this.getElement();
|
| 1784 | if (this.animate) {
|
| 1785 | el.addEventListener(utils.Event.TRANSITION_END, onShown);
|
| 1786 | el.classList.add('animate');
|
| 1787 | }
|
| 1788 | else {
|
| 1789 | onShown();
|
| 1790 | }
|
| 1791 | el.classList.add('show');
|
| 1792 | return [2];
|
| 1793 | }
|
| 1794 | });
|
| 1795 | }); })();
|
| 1796 | return true;
|
| 1797 | };
|
| 1798 | OffCanvas.prototype.hide = function () {
|
| 1799 | var _this = this;
|
| 1800 | var element = this.getElement();
|
| 1801 | if (!element.classList.contains('show')) {
|
| 1802 | return false;
|
| 1803 | }
|
| 1804 | this.triggerEvent(utils.Event.HIDE);
|
| 1805 | this.detachEvents();
|
| 1806 | if (this.animate) {
|
| 1807 | element.classList.add('animate');
|
| 1808 | }
|
| 1809 | element.classList.remove('show');
|
| 1810 | if (this.showAside) {
|
| 1811 | var container = this.getContainer();
|
| 1812 | var containerShowClass = this.getShowClass();
|
| 1813 | if (container && container.classList.contains(containerShowClass)) {
|
| 1814 | container.classList.remove(containerShowClass);
|
| 1815 | }
|
| 1816 | }
|
| 1817 | if (!this.showAside) {
|
| 1818 | var backdrop_1 = this.getBackdrop();
|
| 1819 | if (!backdrop_1) {
|
| 1820 | return true;
|
| 1821 | }
|
| 1822 | var onHidden_1 = function () {
|
| 1823 | if (_this.animate) {
|
| 1824 | element.classList.remove('animate');
|
| 1825 | }
|
| 1826 | backdrop_1.removeEventListener(utils.Event.TRANSITION_END, onHidden_1);
|
| 1827 | _this.triggerEvent(utils.Event.HIDDEN);
|
| 1828 | _this.removeBackdrop();
|
| 1829 | };
|
| 1830 | if (backdrop_1) {
|
| 1831 | backdrop_1.addEventListener(utils.Event.TRANSITION_END, onHidden_1);
|
| 1832 | backdrop_1.classList.add('fadeout');
|
| 1833 | }
|
| 1834 | }
|
| 1835 | return true;
|
| 1836 | };
|
| 1837 | OffCanvas.prototype.toggle = function () {
|
| 1838 | if (this.isVisible()) {
|
| 1839 | return this.hide();
|
| 1840 | }
|
| 1841 | return this.show();
|
| 1842 | };
|
| 1843 | OffCanvas.prototype.createBackdrop = function () {
|
| 1844 | var backdrop = document.createElement('div');
|
| 1845 | var id = this.getId();
|
| 1846 | if (id) {
|
| 1847 | backdrop.setAttribute('data-id', id);
|
| 1848 | }
|
| 1849 | backdrop.classList.add(this.backdropSelector);
|
| 1850 | var container = this.getContainer();
|
| 1851 | if (container) {
|
| 1852 | container.appendChild(backdrop);
|
| 1853 | }
|
| 1854 | };
|
| 1855 | OffCanvas.prototype.getBackdrop = function () {
|
| 1856 | return document.querySelector("." + this.backdropSelector + "[data-id=\"" + this.getId() + "\"]");
|
| 1857 | };
|
| 1858 | OffCanvas.prototype.removeBackdrop = function () {
|
| 1859 | var backdrop = this.getBackdrop();
|
| 1860 | if (backdrop && backdrop.parentNode) {
|
| 1861 | backdrop.parentNode.removeChild(backdrop);
|
| 1862 | }
|
| 1863 | };
|
| 1864 | OffCanvas.prototype.attachEvents = function () {
|
| 1865 | var _this = this;
|
| 1866 | var element = this.getElement();
|
| 1867 | Array.from(element.querySelectorAll('[data-dismiss]') || [])
|
| 1868 | .forEach(function (button) { return _this.registerElement({
|
| 1869 | target: button,
|
| 1870 | event: utils.Event.CLICK,
|
| 1871 | }); });
|
| 1872 | var backdrop = this.getBackdrop();
|
| 1873 | if (!this.showAside && backdrop) {
|
| 1874 | this.registerElement({ target: backdrop, event: utils.Event.START });
|
| 1875 | }
|
| 1876 | this.registerElement({ target: document, event: 'keyup' });
|
| 1877 | };
|
| 1878 | OffCanvas.prototype.detachEvents = function () {
|
| 1879 | var _this = this;
|
| 1880 | var element = this.getElement();
|
| 1881 | var dismissButtons = element.querySelectorAll('[data-dismiss]');
|
| 1882 | if (dismissButtons) {
|
| 1883 | Array
|
| 1884 | .from(dismissButtons)
|
| 1885 | .forEach(function (button) { return _this.unregisterElement({
|
| 1886 | target: button,
|
| 1887 | event: utils.Event.CLICK,
|
| 1888 | }); });
|
| 1889 | }
|
| 1890 | var backdrop = this.getBackdrop();
|
| 1891 | if (!this.showAside && backdrop) {
|
| 1892 | this.unregisterElement({ target: backdrop, event: utils.Event.START });
|
| 1893 | }
|
| 1894 | this.unregisterElement({ target: document, event: 'keyup' });
|
| 1895 | };
|
| 1896 | OffCanvas.prototype.getContainer = function () {
|
| 1897 | var container = this.getProp('container');
|
| 1898 | if (typeof container === 'string') {
|
| 1899 | container = document.querySelector(container);
|
| 1900 | }
|
| 1901 | return container;
|
| 1902 | };
|
| 1903 | OffCanvas.prototype.getShowClass = function () {
|
| 1904 | return "show-" + this.direction;
|
| 1905 | };
|
| 1906 | return OffCanvas;
|
| 1907 | }(Component));
|
| 1908 | OffCanvas.attachDOM();
|
| 1909 |
|
| 1910 | var Progress = (function (_super) {
|
| 1911 | __extends(Progress, _super);
|
| 1912 | function Progress(props) {
|
| 1913 | var _this = _super.call(this, 'progress', {
|
| 1914 | height: 8,
|
| 1915 | min: 0,
|
| 1916 | max: 100,
|
| 1917 | now: 0,
|
| 1918 | label: false,
|
| 1919 | striped: false,
|
| 1920 | animate: true,
|
| 1921 | background: null,
|
| 1922 | }, props) || this;
|
| 1923 | _this.onTransition = false;
|
| 1924 | _this.setHeight();
|
| 1925 | _this.setAccessibility();
|
| 1926 | if (_this.getProp('striped')) {
|
| 1927 | _this.setStriped();
|
| 1928 | }
|
| 1929 | if (_this.getProp('background')) {
|
| 1930 | _this.setBackground();
|
| 1931 | }
|
| 1932 | _this.set(_this.getProp('now'));
|
| 1933 | return _this;
|
| 1934 | }
|
| 1935 | Progress.attachDOM = function () {
|
| 1936 | utils.Observer.subscribe({
|
| 1937 | componentClass: 'progress',
|
| 1938 | onAdded: function (element, create) {
|
| 1939 | create(new Progress({ element: element }));
|
| 1940 | },
|
| 1941 | onRemoved: function (element, remove) {
|
| 1942 | remove('Progress', element);
|
| 1943 | },
|
| 1944 | });
|
| 1945 | };
|
| 1946 | Progress.prototype.set = function (value) {
|
| 1947 | if (value === void 0) { value = 0; }
|
| 1948 | var progressBar = this.getProgressBar();
|
| 1949 | var min = this.getProp('min');
|
| 1950 | var max = this.getProp('max');
|
| 1951 | var progress = Math.round((value / (min + max)) * 100);
|
| 1952 | if (value < min) {
|
| 1953 | console.error("Progress: Warning, " + value + " is under min value.");
|
| 1954 | return false;
|
| 1955 | }
|
| 1956 | if (value > max) {
|
| 1957 | console.error("Progress: Warning, " + value + " is above max value.");
|
| 1958 | return false;
|
| 1959 | }
|
| 1960 | progressBar.setAttribute('aria-valuenow', "" + value);
|
| 1961 | if (this.getProp('label')) {
|
| 1962 | progressBar.innerHTML = progress + "%";
|
| 1963 | }
|
| 1964 | progressBar.style.width = progress + "%";
|
| 1965 | return true;
|
| 1966 | };
|
| 1967 | Progress.prototype.animateProgressBar = function (startAnimation) {
|
| 1968 | if (startAnimation === void 0) { startAnimation = true; }
|
| 1969 | if (!this.getProp('striped')) {
|
| 1970 | throw new Error('Progress: Animation works only with striped progress.');
|
| 1971 | return false;
|
| 1972 | }
|
| 1973 | var progressBar = this.getProgressBar();
|
| 1974 | if (startAnimation && !progressBar.classList.contains('progress-bar-animated')) {
|
| 1975 | progressBar.classList.add('progress-bar-animated');
|
| 1976 | }
|
| 1977 | if (!startAnimation && progressBar.classList.contains('progress-bar-animated')) {
|
| 1978 | progressBar.classList.remove('progress-bar-animated');
|
| 1979 | }
|
| 1980 | return true;
|
| 1981 | };
|
| 1982 | Progress.prototype.show = function () {
|
| 1983 | var progress = this.getElement();
|
| 1984 | progress.style.height = this.getProp('height') + "px";
|
| 1985 | this.triggerEvent(utils.Event.SHOW);
|
| 1986 | this.triggerEvent(utils.Event.SHOWN);
|
| 1987 | return true;
|
| 1988 | };
|
| 1989 | Progress.prototype.hide = function () {
|
| 1990 | var progress = this.getElement();
|
| 1991 | progress.style.height = '0px';
|
| 1992 | this.triggerEvent(utils.Event.HIDE);
|
| 1993 | this.triggerEvent(utils.Event.HIDDEN);
|
| 1994 | return true;
|
| 1995 | };
|
| 1996 | Progress.prototype.destroy = function () {
|
| 1997 | this.unregisterElements();
|
| 1998 | this.hide();
|
| 1999 | };
|
| 2000 | Progress.prototype.setHeight = function () {
|
| 2001 | this.getElement().style.height = this.getProp('height') + "px";
|
| 2002 | };
|
| 2003 | Progress.prototype.setAccessibility = function () {
|
| 2004 | var progress = this.getElement();
|
| 2005 | progress.setAttribute('aria-valuemin', "" + this.getProp('min'));
|
| 2006 | progress.setAttribute('aria-valuemax', "" + this.getProp('max'));
|
| 2007 | };
|
| 2008 | Progress.prototype.setStriped = function () {
|
| 2009 | this.getProgressBar().classList.add('progress-bar-striped');
|
| 2010 | if (this.getProp('animate')) {
|
| 2011 | this.animateProgressBar();
|
| 2012 | }
|
| 2013 | };
|
| 2014 | Progress.prototype.setBackground = function () {
|
| 2015 | var progressBar = this.getProgressBar();
|
| 2016 | var background = this.getProp('background');
|
| 2017 | if (progressBar.classList.contains("bg-" + background)) {
|
| 2018 | progressBar.classList.add("bg-" + background);
|
| 2019 | }
|
| 2020 | };
|
| 2021 | Progress.prototype.getProgressBar = function () {
|
| 2022 | return this.getElement().querySelector('.progress-bar');
|
| 2023 | };
|
| 2024 | return Progress;
|
| 2025 | }(Component));
|
| 2026 | Progress.attachDOM();
|
| 2027 |
|
| 2028 | var Selectbox = (function (_super) {
|
| 2029 | __extends(Selectbox, _super);
|
| 2030 | function Selectbox(props) {
|
| 2031 | var _this = _super.call(this, 'selectbox', {
|
| 2032 | name: null,
|
| 2033 | selectable: true,
|
| 2034 | filterItems: null,
|
| 2035 | multiple: false,
|
| 2036 | tag: false,
|
| 2037 | }, props) || this;
|
| 2038 | if (!_this.getProp('name')) {
|
| 2039 | var hiddenInput = _this.getElement().querySelector('input[type="hidden"]');
|
| 2040 | if (hiddenInput) {
|
| 2041 | _this.setProp('name', hiddenInput.getAttribute('name'));
|
| 2042 | }
|
| 2043 | }
|
| 2044 | _this.filterItemsHandler = function (event) {
|
| 2045 | var target = event.target;
|
| 2046 | if (!target) {
|
| 2047 | return;
|
| 2048 | }
|
| 2049 | var search = target.value;
|
| 2050 | if (search === '') {
|
| 2051 | _this.showItems();
|
| 2052 | return;
|
| 2053 | }
|
| 2054 | _this.getItems().forEach(function (item) {
|
| 2055 | var filterItems = _this.getProp('filterItems');
|
| 2056 | var fn = typeof filterItems === 'function' ? filterItems : _this.filterItems;
|
| 2057 | if (fn(search, item)) {
|
| 2058 | item.element.style.display = 'block';
|
| 2059 | }
|
| 2060 | else {
|
| 2061 | item.element.style.display = 'none';
|
| 2062 | }
|
| 2063 | });
|
| 2064 | };
|
| 2065 | _this.registerElement({ target: _this.getElement(), event: utils.Event.CLICK });
|
| 2066 | _this.searchInputInContainer = _this.getElement()
|
| 2067 | .querySelector('.selectbox-input-container .input-select-one') !== null;
|
| 2068 | var selectedItem = _this.getItemData(_this.getElement().querySelector('[data-selected]'));
|
| 2069 | if (selectedItem) {
|
| 2070 | _this.setSelected(selectedItem.value, selectedItem.text);
|
| 2071 | }
|
| 2072 | return _this;
|
| 2073 | }
|
| 2074 | Selectbox.attachDOM = function () {
|
| 2075 | utils.Observer.subscribe({
|
| 2076 | componentClass: 'selectbox',
|
| 2077 | onAdded: function (element, create) {
|
| 2078 | create(new Selectbox({ element: element }));
|
| 2079 | },
|
| 2080 | onRemoved: function (element, remove) {
|
| 2081 | remove('Selectbox', element);
|
| 2082 | },
|
| 2083 | });
|
| 2084 | };
|
| 2085 | Selectbox.prototype.getSearchInput = function () {
|
| 2086 | return this.getElement().querySelector('.input-select-one');
|
| 2087 | };
|
| 2088 | Selectbox.prototype.filterItems = function (search, item) {
|
| 2089 | if (search === void 0) { search = ''; }
|
| 2090 | return item.value.indexOf(search) > -1 || item.text.indexOf(search) > -1;
|
| 2091 | };
|
| 2092 | Selectbox.prototype.showItems = function () {
|
| 2093 | this.getItems().forEach(function (item) {
|
| 2094 | item.element.style.display = 'block';
|
| 2095 | });
|
| 2096 | };
|
| 2097 | Selectbox.prototype.getItems = function () {
|
| 2098 | var _this = this;
|
| 2099 | var items = Array
|
| 2100 | .from(this.getElement().querySelectorAll('.selectbox-menu-item') || []);
|
| 2101 | return items.map(function (item) {
|
| 2102 | var info = _this.getItemData(item);
|
| 2103 | return { text: info.text, value: info.value, element: item };
|
| 2104 | });
|
| 2105 | };
|
| 2106 | Selectbox.prototype.setSelected = function (value, text) {
|
| 2107 | if (value === void 0) { value = ''; }
|
| 2108 | if (text === void 0) { text = ''; }
|
| 2109 | var selectable = this.getProp('selectable');
|
| 2110 | if (!selectable) {
|
| 2111 | return false;
|
| 2112 | }
|
| 2113 | var element = this.getElement();
|
| 2114 | var multiple = this.getProp('multiple');
|
| 2115 | if (multiple) {
|
| 2116 | this.addItemSelection(value);
|
| 2117 | }
|
| 2118 | else {
|
| 2119 | var itemsSelected = Array
|
| 2120 | .from(element.querySelectorAll('.selectbox-item-selection .item-selected') || []);
|
| 2121 | if (itemsSelected.length === 0) {
|
| 2122 | this.addItemSelection(value);
|
| 2123 | }
|
| 2124 | }
|
| 2125 | var lastSelectedEl = element
|
| 2126 | .querySelector('.selectbox-item-selection .item-selected:last-child');
|
| 2127 | var spanEl = lastSelectedEl.querySelector('[data-value]');
|
| 2128 | if (spanEl) {
|
| 2129 | spanEl.innerHTML = text;
|
| 2130 | }
|
| 2131 | else {
|
| 2132 | lastSelectedEl.innerHTML = text;
|
| 2133 | }
|
| 2134 | var hiddenInputs = Array
|
| 2135 | .from(this.getElement().querySelectorAll('input[type="hidden"]') || []);
|
| 2136 | var lastInput = hiddenInputs.slice(-1).pop();
|
| 2137 | if (lastInput) {
|
| 2138 | lastInput.setAttribute('value', value);
|
| 2139 | }
|
| 2140 | this.updateActiveList();
|
| 2141 | this.setSearchInputWidth();
|
| 2142 | var searchInput = this.getSearchInput();
|
| 2143 | if (value === '') {
|
| 2144 | this.showPlaceholder();
|
| 2145 | }
|
| 2146 | else {
|
| 2147 | this.showPlaceholder(false);
|
| 2148 | }
|
| 2149 | return true;
|
| 2150 | };
|
| 2151 | Selectbox.prototype.getSelected = function () {
|
| 2152 | var hiddenInputs = Array
|
| 2153 | .from(this.getElement().querySelectorAll('input[type="hidden"]') || []);
|
| 2154 | if (!this.getProp('multiple')) {
|
| 2155 | return hiddenInputs.length > 0 ? hiddenInputs[0].value : '';
|
| 2156 | }
|
| 2157 | return hiddenInputs.map(function (input) { return input.value; });
|
| 2158 | };
|
| 2159 | Selectbox.prototype.setSearchInputWidth = function () {
|
| 2160 | if (!this.searchInputInContainer) {
|
| 2161 | return;
|
| 2162 | }
|
| 2163 | var selectbox = this.getElement();
|
| 2164 | var selection = selectbox.querySelector('.selectbox-item-selection');
|
| 2165 | var availableSpace = selectbox.offsetWidth - selection.offsetWidth;
|
| 2166 | var searchInput = this.getSearchInput();
|
| 2167 | if (!searchInput) {
|
| 2168 | throw new Error('Selectbox: search input is not defined');
|
| 2169 | }
|
| 2170 | var selectedItemWidth = Array
|
| 2171 | .from(selectbox.querySelectorAll('.item-selected') || [])
|
| 2172 | .reduce(function (total, el) { return (total + el.offsetWidth); }, 0);
|
| 2173 | if (availableSpace > 0) {
|
| 2174 | searchInput.style.width = "calc(100% - " + (selectedItemWidth + 15) + "px)";
|
| 2175 | }
|
| 2176 | searchInput.style.left = selectedItemWidth + "px";
|
| 2177 | };
|
| 2178 | Selectbox.prototype.getItemData = function (item) {
|
| 2179 | if (item === void 0) { item = null; }
|
| 2180 | var text = '';
|
| 2181 | var value = '';
|
| 2182 | if (item) {
|
| 2183 | text = item.getAttribute('data-text') || item.innerHTML;
|
| 2184 | var selectedTextNode = item.querySelector('.text');
|
| 2185 | if (selectedTextNode) {
|
| 2186 | text = selectedTextNode.innerHTML;
|
| 2187 | }
|
| 2188 | value = item.getAttribute('data-value') || '';
|
| 2189 | }
|
| 2190 | return { text: text, value: value };
|
| 2191 | };
|
| 2192 | Selectbox.prototype.onElementEvent = function (event) {
|
| 2193 | var target = event.target;
|
| 2194 | if (event.type === utils.Event.START) {
|
| 2195 | var selectbox = utils.Selector.closest(target, '.selectbox');
|
| 2196 | if (!selectbox || selectbox !== this.getElement()) {
|
| 2197 | this.hide();
|
| 2198 | }
|
| 2199 | }
|
| 2200 | else if (event.type === utils.Event.CLICK) {
|
| 2201 | var dataToggleAttr = target.getAttribute('data-toggle');
|
| 2202 | if (dataToggleAttr && dataToggleAttr === 'selectbox') {
|
| 2203 | this.toggle();
|
| 2204 | return;
|
| 2205 | }
|
| 2206 | var dismissButton = utils.Selector
|
| 2207 | .closest(target, '[data-dismiss="selectbox"]');
|
| 2208 | if (dismissButton) {
|
| 2209 | this.hide();
|
| 2210 | return;
|
| 2211 | }
|
| 2212 | var selectedTag = utils.Selector.closest(target, '.icon-close');
|
| 2213 | if (selectedTag) {
|
| 2214 | this.removeSelected(selectedTag.parentNode);
|
| 2215 | return;
|
| 2216 | }
|
| 2217 | var item = utils.Selector.closest(target, '.selectbox-menu-item');
|
| 2218 | if (item && !item.classList.contains('disabled')) {
|
| 2219 | var itemInfo = this.getItemData(item);
|
| 2220 | if (this.getSelected() !== itemInfo.value) {
|
| 2221 | this.setSelected(itemInfo.value, itemInfo.text);
|
| 2222 | var selectInput = this.getElement().querySelector('.input-select-one').value = '';
|
| 2223 | var detail = { item: item, text: itemInfo.text, value: itemInfo.value };
|
| 2224 | this.triggerEvent(utils.Event.ITEM_SELECTED, detail);
|
| 2225 | }
|
| 2226 | this.hide();
|
| 2227 | return;
|
| 2228 | }
|
| 2229 | var selectboxMenu = utils.Selector.closest(target, '.selectbox-menu');
|
| 2230 | if (selectboxMenu) {
|
| 2231 | return;
|
| 2232 | }
|
| 2233 | this.toggle();
|
| 2234 | }
|
| 2235 | else if (event.type === 'keyup' && event.keyCode === 8) {
|
| 2236 | var inputTarget = event.target;
|
| 2237 | if (inputTarget.value !== '') {
|
| 2238 | return;
|
| 2239 | }
|
| 2240 | if (!this.searchInputInContainer) {
|
| 2241 | return;
|
| 2242 | }
|
| 2243 | this.removeLastSelected();
|
| 2244 | }
|
| 2245 | };
|
| 2246 | Selectbox.prototype.addItemSelection = function (value) {
|
| 2247 | var itemSelectedEl = document.createElement('div');
|
| 2248 | itemSelectedEl.classList.add('item-selected');
|
| 2249 | if (this.getProp('tag')) {
|
| 2250 | itemSelectedEl.classList.add('tag');
|
| 2251 | var spanEl = document.createElement('span');
|
| 2252 | spanEl.setAttribute('data-value', 'true');
|
| 2253 | itemSelectedEl.appendChild(spanEl);
|
| 2254 | var closeEl = document.createElement('button');
|
| 2255 | closeEl.setAttribute('type', 'button');
|
| 2256 | closeEl.classList.add('icon-close');
|
| 2257 | var iconEl = document.createElement('span');
|
| 2258 | iconEl.setAttribute('class', 'icon');
|
| 2259 | iconEl.setAttribute('aria-hidden', 'true');
|
| 2260 | closeEl.appendChild(iconEl);
|
| 2261 | itemSelectedEl.appendChild(closeEl);
|
| 2262 | }
|
| 2263 | var element = this.getElement();
|
| 2264 | element.querySelector('.selectbox-item-selection').appendChild(itemSelectedEl);
|
| 2265 | var selectbox = this.getElement();
|
| 2266 | var hiddenInputs = Array.from(selectbox.querySelectorAll('input[type="hidden"]') || []);
|
| 2267 | var lastHiddenInput = hiddenInputs.length > 0 ? hiddenInputs[hiddenInputs.length - 1] : null;
|
| 2268 | if ((!this.getProp('multiple') && !lastHiddenInput) || this.getProp('multiple')) {
|
| 2269 | var hiddenInput = document.createElement('input');
|
| 2270 | hiddenInput.setAttribute('type', 'hidden');
|
| 2271 | var name_1 = this.getProp('name');
|
| 2272 | hiddenInput.setAttribute('name', this.getProp('multiple') ? name_1 + "[]" : name_1);
|
| 2273 | hiddenInput.setAttribute('value', value);
|
| 2274 | selectbox.insertBefore(hiddenInput, lastHiddenInput ? lastHiddenInput.nextSibling : selectbox.firstChild);
|
| 2275 | }
|
| 2276 | };
|
| 2277 | Selectbox.prototype.removeLastSelected = function () {
|
| 2278 | var selectbox = this.getElement();
|
| 2279 | var selectedItems = Array
|
| 2280 | .from(selectbox.querySelectorAll('.selectbox-item-selection .item-selected') || []);
|
| 2281 | if (selectedItems.length === 0) {
|
| 2282 | return;
|
| 2283 | }
|
| 2284 | var lastSelectedItem = selectedItems[selectedItems.length - 1];
|
| 2285 | this.removeSelected(lastSelectedItem);
|
| 2286 | };
|
| 2287 | Selectbox.prototype.removeSelected = function (selectedItem) {
|
| 2288 | var selectbox = this.getElement();
|
| 2289 | var selectedItems = Array
|
| 2290 | .from(selectbox.querySelectorAll('.selectbox-item-selection .item-selected') || []);
|
| 2291 | if (selectedItems.length === 0) {
|
| 2292 | return;
|
| 2293 | }
|
| 2294 | selectbox.querySelector('.selectbox-item-selection').removeChild(selectedItem);
|
| 2295 | if (this.getProp('multiple')) {
|
| 2296 | var values = this.getSelected();
|
| 2297 | var hiddenInput = selectbox
|
| 2298 | .querySelector("input[type=\"hidden\"][value=\"" + values.slice(-1).pop() + "\"]");
|
| 2299 | this.getElement().removeChild(hiddenInput);
|
| 2300 | }
|
| 2301 | else {
|
| 2302 | var hiddenInput = selectbox.querySelector('input[type="hidden"]');
|
| 2303 | if (!this.getProp('multiple') && hiddenInput) {
|
| 2304 | hiddenInput.setAttribute('value', '');
|
| 2305 | }
|
| 2306 | }
|
| 2307 | this.updateActiveList();
|
| 2308 | this.setSearchInputWidth();
|
| 2309 | if (selectedItems.length === 1) {
|
| 2310 | this.showPlaceholder();
|
| 2311 | }
|
| 2312 | };
|
| 2313 | Selectbox.prototype.showPlaceholder = function (show) {
|
| 2314 | if (show === void 0) { show = true; }
|
| 2315 | var searchInput = this.getSearchInput();
|
| 2316 | if (!searchInput) {
|
| 2317 | return;
|
| 2318 | }
|
| 2319 | if (show && searchInput.classList.contains('hide-placeholder')) {
|
| 2320 | searchInput.classList.remove('hide-placeholder');
|
| 2321 | }
|
| 2322 | else if (!show && !searchInput.classList.contains('hide-placeholder')) {
|
| 2323 | searchInput.classList.add('hide-placeholder');
|
| 2324 | }
|
| 2325 | };
|
| 2326 | Selectbox.prototype.updateActiveList = function () {
|
| 2327 | var _this = this;
|
| 2328 | var selected = this.getSelected();
|
| 2329 | var selectedItems = Array.isArray(selected) ? selected : [selected];
|
| 2330 | var items = Array
|
| 2331 | .from(this.getElement().querySelectorAll('.selectbox-menu-item') || []);
|
| 2332 | items.forEach(function (item) {
|
| 2333 | var data = _this.getItemData(item);
|
| 2334 | if (selectedItems.indexOf(data.value) > -1) {
|
| 2335 | if (!item.classList.contains('selected')) {
|
| 2336 | item.classList.add('selected');
|
| 2337 | }
|
| 2338 | }
|
| 2339 | else {
|
| 2340 | if (item.classList.contains('selected')) {
|
| 2341 | item.classList.remove('selected');
|
| 2342 | }
|
| 2343 | }
|
| 2344 | });
|
| 2345 | };
|
| 2346 | Selectbox.prototype.toggle = function () {
|
| 2347 | if (this.getElement().classList.contains('active')) {
|
| 2348 | return this.hide();
|
| 2349 | }
|
| 2350 | return this.show();
|
| 2351 | };
|
| 2352 | Selectbox.prototype.show = function () {
|
| 2353 | var element = this.getElement();
|
| 2354 | if (element.classList.contains('active')) {
|
| 2355 | return false;
|
| 2356 | }
|
| 2357 | element.classList.add('active');
|
| 2358 | var selectboxMenu = element.querySelector('.selectbox-menu');
|
| 2359 | var selectInput = this.getSearchInput();
|
| 2360 | selectboxMenu.scrollTop = 0;
|
| 2361 | this.triggerEvent(utils.Event.SHOW);
|
| 2362 | this.triggerEvent(utils.Event.SHOWN);
|
| 2363 | this.registerElement({ target: document.body, event: utils.Event.START });
|
| 2364 | if (selectInput) {
|
| 2365 | this.registerElement({ target: selectInput, event: 'keyup' });
|
| 2366 | selectInput.addEventListener('keyup', this.filterItemsHandler);
|
| 2367 | selectInput.focus();
|
| 2368 | }
|
| 2369 | var closeButton = element.querySelector('[data-dismiss="selectbox"]');
|
| 2370 | if (closeButton) {
|
| 2371 | this.registerElement({ target: closeButton, event: utils.Event.CLICK });
|
| 2372 | }
|
| 2373 | return true;
|
| 2374 | };
|
| 2375 | Selectbox.prototype.hide = function () {
|
| 2376 | var element = this.getElement();
|
| 2377 | if (!element.classList.contains('active')) {
|
| 2378 | return false;
|
| 2379 | }
|
| 2380 | element.classList.remove('active');
|
| 2381 | this.triggerEvent(utils.Event.HIDE);
|
| 2382 | this.triggerEvent(utils.Event.HIDDEN);
|
| 2383 | this.unregisterElement({ target: document.body, event: utils.Event.START });
|
| 2384 | var closeButton = element.querySelector('[data-dismiss="selectbox"]');
|
| 2385 | if (closeButton) {
|
| 2386 | this.unregisterElement({ target: closeButton, event: utils.Event.CLICK });
|
| 2387 | }
|
| 2388 | var selectInput = this.getSearchInput();
|
| 2389 | if (selectInput) {
|
| 2390 | selectInput.removeEventListener('keyup', this.filterItemsHandler);
|
| 2391 | selectInput.value = '';
|
| 2392 | this.unregisterElement({ target: selectInput, event: 'keyup' });
|
| 2393 | }
|
| 2394 | this.showItems();
|
| 2395 | return true;
|
| 2396 | };
|
| 2397 | return Selectbox;
|
| 2398 | }(Component));
|
| 2399 | Selectbox.attachDOM();
|
| 2400 |
|
| 2401 | var Tab = (function (_super) {
|
| 2402 | __extends(Tab, _super);
|
| 2403 | function Tab(props) {
|
| 2404 | var _this = _super.call(this, 'tab', {}, props) || this;
|
| 2405 | _this.tabSelector = 'tab';
|
| 2406 | _this.tabItemSelector = 'tab-item';
|
| 2407 | _this.tabContentSelector = 'tab-pane';
|
| 2408 | _this.onAnimation = false;
|
| 2409 | _this.registerElement({ target: _this.getElement(), event: utils.Event.CLICK });
|
| 2410 | return _this;
|
| 2411 | }
|
| 2412 | Tab.attachDOM = function () {
|
| 2413 | utils.Observer.subscribe({
|
| 2414 | componentClass: 'tabs',
|
| 2415 | onAdded: function (element, create) {
|
| 2416 | create(new Tab({ element: element }));
|
| 2417 | },
|
| 2418 | onRemoved: function (element, remove) {
|
| 2419 | remove('Tab', element);
|
| 2420 | },
|
| 2421 | });
|
| 2422 | };
|
| 2423 | Tab.prototype.onElementEvent = function (event) {
|
| 2424 | var target = event.target;
|
| 2425 | if (!target) {
|
| 2426 | return;
|
| 2427 | }
|
| 2428 | var dataToggleAttr = target.getAttribute('data-toggle');
|
| 2429 | if (dataToggleAttr) {
|
| 2430 | var id = target.getAttribute('href') || target.getAttribute('data-target');
|
| 2431 | if (!id) {
|
| 2432 | return;
|
| 2433 | }
|
| 2434 | event.preventDefault();
|
| 2435 | this.show(target);
|
| 2436 | }
|
| 2437 | };
|
| 2438 | Tab.prototype.show = function (tabLink) {
|
| 2439 | var _this = this;
|
| 2440 | if (this.onAnimation) {
|
| 2441 | return false;
|
| 2442 | }
|
| 2443 | var tabItem = utils.Selector.closest(tabLink, "." + this.tabItemSelector);
|
| 2444 | if (!tabItem || tabItem.classList.contains('active')) {
|
| 2445 | return false;
|
| 2446 | }
|
| 2447 | var id = tabLink.getAttribute('href') || tabLink.getAttribute('data-target');
|
| 2448 | if (!id) {
|
| 2449 | return false;
|
| 2450 | }
|
| 2451 | var tabContainer = this.getElement();
|
| 2452 | var tabItems = Array.from(tabContainer.querySelectorAll('.tab-item') || []);
|
| 2453 | tabItems.forEach(function (tab) {
|
| 2454 | if (tab.classList.contains('active')) {
|
| 2455 | tab.classList.remove('active');
|
| 2456 | }
|
| 2457 | var link = tab.querySelector('.tab-link');
|
| 2458 | if (link) {
|
| 2459 | link.setAttribute('aria-selected', 'false');
|
| 2460 | }
|
| 2461 | });
|
| 2462 | this.onAnimation = true;
|
| 2463 | tabItem.classList.add('active');
|
| 2464 | tabLink.setAttribute('aria-selected', 'true');
|
| 2465 | var tabContent = document.querySelector(id);
|
| 2466 | if (!tabContent) {
|
| 2467 | return false;
|
| 2468 | }
|
| 2469 | var tabContentParent = tabContent.parentNode;
|
| 2470 | if (!tabContentParent) {
|
| 2471 | return false;
|
| 2472 | }
|
| 2473 | var tabContents = Array
|
| 2474 | .from(tabContentParent.querySelectorAll("." + this.tabContentSelector) || []);
|
| 2475 | var prevTabItem = tabContainer.querySelector('.tab-item.active');
|
| 2476 | tabContents.forEach(function (tab) {
|
| 2477 | if (tab.classList.contains('active')) {
|
| 2478 | tab.classList.remove('active');
|
| 2479 | }
|
| 2480 | });
|
| 2481 | tabContent.classList.add('showing');
|
| 2482 | this.triggerEvent(utils.Event.SHOW, this.getTabEvent(tabLink));
|
| 2483 | if (prevTabItem) {
|
| 2484 | this.triggerEvent(utils.Event.HIDE, this.getTabEvent(prevTabItem));
|
| 2485 | }
|
| 2486 | var onShowed = function () {
|
| 2487 | tabContent.classList.remove('animate');
|
| 2488 | tabContent.classList.add('active');
|
| 2489 | tabContent.classList.remove('showing');
|
| 2490 | _this.triggerEvent(utils.Event.SHOWN, _this.getTabEvent(tabLink));
|
| 2491 | if (prevTabItem) {
|
| 2492 | _this.triggerEvent(utils.Event.HIDDEN, _this.getTabEvent(prevTabItem));
|
| 2493 | }
|
| 2494 | _this.onAnimation = false;
|
| 2495 | tabContent.removeEventListener(utils.Event.TRANSITION_END, onShowed);
|
| 2496 | };
|
| 2497 | (function () { return __awaiter(_this, void 0, void 0, function () {
|
| 2498 | return __generator(this, function (_a) {
|
| 2499 | switch (_a.label) {
|
| 2500 | case 0: return [4, utils.sleep(20)];
|
| 2501 | case 1:
|
| 2502 | _a.sent();
|
| 2503 | tabContent.addEventListener(utils.Event.TRANSITION_END, onShowed);
|
| 2504 | tabContent.classList.add('animate');
|
| 2505 | return [2];
|
| 2506 | }
|
| 2507 | });
|
| 2508 | }); })();
|
| 2509 | return true;
|
| 2510 | };
|
| 2511 | Tab.prototype.getTabEvent = function (tabLink) {
|
| 2512 | return {
|
| 2513 | id: tabLink.getAttribute('href') || tabLink.getAttribute('data-target'),
|
| 2514 | target: tabLink,
|
| 2515 | };
|
| 2516 | };
|
| 2517 | Tab.prototype.destroy = function () {
|
| 2518 | this.registerElement({ target: this.getElement(), event: utils.Event.CLICK });
|
| 2519 | };
|
| 2520 | return Tab;
|
| 2521 | }(Component));
|
| 2522 | Tab.attachDOM();
|
| 2523 |
|
| 2524 | var componentCreator = function (component, options) {
|
| 2525 | if (options === void 0) { options = {}; }
|
| 2526 | return utils.Observer.getComponent(component, options) || new component(options);
|
| 2527 | };
|
| 2528 | var api = {
|
| 2529 | accordion: function (options) { return componentCreator(Accordion, options); },
|
| 2530 | alert: function (options) { return componentCreator(Alert, options); },
|
| 2531 | modal: function (options) { return componentCreator(Modal, options); },
|
| 2532 | modalConfirm: function (options) { return componentCreator(ModalConfirm, options); },
|
| 2533 | modalLoader: function (options) { return componentCreator(ModalLoader, options); },
|
| 2534 | modalPrompt: function (options) { return componentCreator(ModalPrompt, options); },
|
| 2535 | loader: function (options) { return componentCreator(Loader, options); },
|
| 2536 | collapse: function (options) { return componentCreator(Collapse, options); },
|
| 2537 | notification: function (options) { return componentCreator(Notification, options); },
|
| 2538 | offCanvas: function (options) { return componentCreator(OffCanvas, options); },
|
| 2539 | tab: function (options) { return componentCreator(Tab, options); },
|
| 2540 | selectbox: function (options) { return componentCreator(Selectbox, options); },
|
| 2541 | progress: function (options) { return componentCreator(Progress, options); },
|
| 2542 | };
|
| 2543 | var phonon = Object.assign(api, utils);
|
| 2544 |
|
| 2545 | return phonon;
|
| 2546 |
|
| 2547 | }));
|
| 2548 |
|