(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.GSTC = factory());
}(this, (function () { 'use strict';
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
/**
* Brands a function as a directive factory function so that lit-html will call
* the function during template rendering, rather than passing as a value.
*
* A _directive_ is a function that takes a Part as an argument. It has the
* signature: `(part: Part) => void`.
*
* A directive _factory_ is a function that takes arguments for data and
* configuration and returns a directive. Users of directive usually refer to
* the directive factory as the directive. For example, "The repeat directive".
*
* Usually a template author will invoke a directive factory in their template
* with relevant arguments, which will then return a directive function.
*
* Here's an example of using the `repeat()` directive factory that takes an
* array and a function to render an item:
*
* ```js
* html`<ul><${repeat(items, (item) => html`<li>${item}</li>`)}</ul>`
* ```
*
* When `repeat` is invoked, it returns a directive function that closes over
* `items` and the template function. When the outer template is rendered, the
* return directive function is called with the Part for the expression.
* `repeat` then performs it's custom logic to render multiple items.
*
* @param f The directive factory function. Must be a function that returns a
* function of the signature `(part: Part) => void`. The returned function will
* be called with the part object.
*
* @example
*
* import {directive, html} from 'lit-html';
*
* const immutable = directive((v) => (part) => {
* if (part.value !== v) {
* part.setValue(v)
* }
* });
*/
const directive = (f) => ((...args) => {
const d = f(...args);
// tslint:disable-next-line:no-any
d.isDirective = true;
return d;
});
class Directive {
constructor() {
this.isDirective = true;
this.isClass = true;
}
body(_part) {
// body of the directive
}
}
const isDirective = (o) => {
return o !== undefined && o !== null &&
// tslint:disable-next-line:no-any
typeof o.isDirective === 'boolean';
};
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
/**
* True if the custom elements polyfill is in use.
*/
const isCEPolyfill = typeof window !== 'undefined' ?
window.customElements != null &&
window.customElements
.polyfillWrapFlushCallback !== undefined :
false;
/**
* Reparents nodes, starting from `start` (inclusive) to `end` (exclusive),
* into another container (could be the same container), before `before`. If
* `before` is null, it appends the nodes to the container.
*/
const reparentNodes = (container, start, end = null, before = null) => {
while (start !== end) {
const n = start.nextSibling;
container.insertBefore(start, before);
start = n;
}
};
/**
* Removes nodes, starting from `start` (inclusive) to `end` (exclusive), from
* `container`.
*/
const removeNodes = (container, start, end = null) => {
while (start !== end) {
const n = start.nextSibling;
container.removeChild(start);
start = n;
}
};
/**
* @license
* Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
/**
* A sentinel value that signals that a value was handled by a directive and
* should not be written to the DOM.
*/
const noChange = {};
/**
* A sentinel value that signals a NodePart to fully clear its content.
*/
const nothing = {};
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
/**
* An expression marker with embedded unique key to avoid collision with
* possible text in templates.
*/
const marker = `{{lit-${String(Math.random()).slice(2)}}}`;
/**
* An expression marker used text-positions, multi-binding attributes, and
* attributes with markup-like text values.
*/
const nodeMarker = `<!--${marker}-->`;
const markerRegex = new RegExp(`${marker}|${nodeMarker}`);
/**
* Suffix appended to all bound attribute names.
*/
const boundAttributeSuffix = '$lit$';
/**
* An updatable Template that tracks the location of dynamic parts.
*/
class Template {
constructor(result, element) {
this.parts = [];
this.element = element;
const nodesToRemove = [];
const stack = [];
// Edge needs all 4 parameters present; IE11 needs 3rd parameter to be null
const walker = document.createTreeWalker(element.content, 133 /* NodeFilter.SHOW_{ELEMENT|COMMENT|TEXT} */, null, false);
// Keeps track of the last index associated with a part. We try to delete
// unnecessary nodes, but we never want to associate two different parts
// to the same index. They must have a constant node between.
let lastPartIndex = 0;
let index = -1;
let partIndex = 0;
const { strings, values: { length } } = result;
while (partIndex < length) {
const node = walker.nextNode();
if (node === null) {
// We've exhausted the content inside a nested template element.
// Because we still have parts (the outer for-loop), we know:
// - There is a template in the stack
// - The walker will find a nextNode outside the template
walker.currentNode = stack.pop();
continue;
}
index++;
if (node.nodeType === 1 /* Node.ELEMENT_NODE */) {
if (node.hasAttributes()) {
const attributes = node.attributes;
const { length } = attributes;
// Per
// https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap,
// attributes are not guaranteed to be returned in document order.
// In particular, Edge/IE can return them out of order, so we cannot
// assume a correspondence between part index and attribute index.
let count = 0;
for (let i = 0; i < length; i++) {
if (endsWith(attributes[i].name, boundAttributeSuffix)) {
count++;
}
}
while (count-- > 0) {
// Get the template literal section leading up to the first
// expression in this attribute
const stringForPart = strings[partIndex];
// Find the attribute name
const name = lastAttributeNameRegex.exec(stringForPart)[2];
// Find the corresponding attribute
// All bound attributes have had a suffix added in
// TemplateResult#getHTML to opt out of special attribute
// handling. To look up the attribute value we also need to add
// the suffix.
const attributeLookupName = name.toLowerCase() + boundAttributeSuffix;
const attributeValue = node.getAttribute(attributeLookupName);
node.removeAttribute(attributeLookupName);
const statics = attributeValue.split(markerRegex);
this.parts.push({
type: 'attribute',
index,
name,
strings: statics,
sanitizer: undefined
});
partIndex += statics.length - 1;
}
}
if (node.tagName === 'TEMPLATE') {
stack.push(node);
walker.currentNode = node.content;
}
}
else if (node.nodeType === 3 /* Node.TEXT_NODE */) {
const data = node.data;
if (data.indexOf(marker) >= 0) {
const parent = node.parentNode;
const strings = data.split(markerRegex);
const lastIndex = strings.length - 1;
// Generate a new text node for each literal section
// These nodes are also used as the markers for node parts
for (let i = 0; i < lastIndex; i++) {
let insert;
let s = strings[i];
if (s === '') {
insert = createMarker();
}
else {
const match = lastAttributeNameRegex.exec(s);
if (match !== null && endsWith(match[2], boundAttributeSuffix)) {
s = s.slice(0, match.index) + match[1] +
match[2].slice(0, -boundAttributeSuffix.length) + match[3];
}
insert = document.createTextNode(s);
}
parent.insertBefore(insert, node);
this.parts.push({ type: 'node', index: ++index });
}
// If there's no text, we must insert a comment to mark our place.
// Else, we can trust it will stick around after cloning.
if (strings[lastIndex] === '') {
parent.insertBefore(createMarker(), node);
nodesToRemove.push(node);
}
else {
node.data = strings[lastIndex];
}
// We have a part for each match found
partIndex += lastIndex;
}
}
else if (node.nodeType === 8 /* Node.COMMENT_NODE */) {
if (node.data === marker) {
const parent = node.parentNode;
// Add a new marker node to be the startNode of the Part if any of
// the following are true:
// * We don't have a previousSibling
// * The previousSibling is already the start of a previous part
if (node.previousSibling === null || index === lastPartIndex) {
index++;
parent.insertBefore(createMarker(), node);
}
lastPartIndex = index;
this.parts.push({ type: 'node', index });
// If we don't have a nextSibling, keep this node so we have an end.
// Else, we can remove it to save future costs.
if (node.nextSibling === null) {
node.data = '';
}
else {
nodesToRemove.push(node);
index--;
}
partIndex++;
}
else {
let i = -1;
while ((i = node.data.indexOf(marker, i + 1)) !== -1) {
// Comment node has a binding marker inside, make an inactive part
// The binding won't work, but subsequent bindings will
// TODO (justinfagnani): consider whether it's even worth it to
// make bindings in comments work
this.parts.push({ type: 'node', index: -1 });
partIndex++;
}
}
}
}
// Remove text binding nodes after the walk to not disturb the TreeWalker
for (const n of nodesToRemove) {
n.parentNode.removeChild(n);
}
}
}
const endsWith = (str, suffix) => {
const index = str.length - suffix.length;
return index >= 0 && str.slice(index) === suffix;
};
const isTemplatePartActive = (part) => part.index !== -1;
/**
* Used to clone existing node instead of each time creating new one which is
* slower
*/
const markerNode = document.createComment('');
// Allows `document.createComment('')` to be renamed for a
// small manual size-savings.
const createMarker = () => markerNode.cloneNode();
/**
* This regex extracts the attribute name preceding an attribute-position
* expression. It does this by matching the syntax allowed for attributes
* against the string literal directly preceding the expression, assuming that
* the expression is in an attribute-value position.
*
* See attributes in the HTML spec:
* https://www.w3.org/TR/html5/syntax.html#elements-attributes
*
* " \x09\x0a\x0c\x0d" are HTML space characters:
* https://www.w3.org/TR/html5/infrastructure.html#space-characters
*
* "\0-\x1F\x7F-\x9F" are Unicode control characters, which includes every
* space character except " ".
*
* So an attribute is:
* * The name: any character except a control character, space character, ('),
* ("), ">", "=", or "/"
* * Followed by zero or more space characters
* * Followed by "="
* * Followed by zero or more space characters
* * Followed by:
* * Any character except space, ('), ("), "<", ">", "=", (`), or
* * (") then any non-("), or
* * (') then any non-(')
*/
const lastAttributeNameRegex =
// eslint-disable-next-line no-control-regex
/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
/**
* An instance of a `Template` that can be attached to the DOM and updated
* with new values.
*/
class TemplateInstance {
constructor(template, processor, options) {
this.__parts = [];
this.template = template;
this.processor = processor;
this.options = options;
}
update(values) {
let i = 0;
for (const part of this.__parts) {
if (part !== undefined) {
part.setValue(values[i]);
}
i++;
}
for (const part of this.__parts) {
if (part !== undefined) {
part.commit();
}
}
}
_clone() {
// There are a number of steps in the lifecycle of a template instance's
// DOM fragment:
// 1. Clone - create the instance fragment
// 2. Adopt - adopt into the main document
// 3. Process - find part markers and create parts
// 4. Upgrade - upgrade custom elements
// 5. Update - set node, attribute, property, etc., values
// 6. Connect - connect to the document. Optional and outside of this
// method.
//
// We have a few constraints on the ordering of these steps:
// * We need to upgrade before updating, so that property values will pass
// through any property setters.
// * We would like to process before upgrading so that we're sure that the
// cloned fragment is inert and not disturbed by self-modifying DOM.
// * We want custom elements to upgrade even in disconnected fragments.
//
// Given these constraints, with full custom elements support we would
// prefer the order: Clone, Process, Adopt, Upgrade, Update, Connect
//
// But Safari does not implement CustomElementRegistry#upgrade, so we
// can not implement that order and still have upgrade-before-update and
// upgrade disconnected fragments. So we instead sacrifice the
// process-before-upgrade constraint, since in Custom Elements v1 elements
// must not modify their light DOM in the constructor. We still have issues
// when co-existing with CEv0 elements like Polymer 1, and with polyfills
// that don't strictly adhere to the no-modification rule because shadow
// DOM, which may be created in the constructor, is emulated by being placed
// in the light DOM.
//
// The resulting order is on native is: Clone, Adopt, Upgrade, Process,
// Update, Connect. document.importNode() performs Clone, Adopt, and Upgrade
// in one step.
//
// The Custom Elements v1 polyfill supports upgrade(), so the order when
// polyfilled is the more ideal: Clone, Process, Adopt, Upgrade, Update,
// Connect.
const fragment = isCEPolyfill ?
this.template.element.content.cloneNode(true) :
document.importNode(this.template.element.content, true);
const stack = [];
const parts = this.template.parts;
// Edge needs all 4 parameters present; IE11 needs 3rd parameter to be null
const walker = document.createTreeWalker(fragment, 133 /* NodeFilter.SHOW_{ELEMENT|COMMENT|TEXT} */, null, false);
let partIndex = 0;
let nodeIndex = 0;
let part;
let node = walker.nextNode();
// Loop through all the nodes and parts of a template
while (partIndex < parts.length) {
part = parts[partIndex];
if (!isTemplatePartActive(part)) {
this.__parts.push(undefined);
partIndex++;
continue;
}
// Progress the tree walker until we find our next part's node.
// Note that multiple parts may share the same node (attribute parts
// on a single element), so this loop may not run at all.
while (nodeIndex < part.index) {
nodeIndex++;
if (node.nodeName === 'TEMPLATE') {
stack.push(node);
walker.currentNode = node.content;
}
if ((node = walker.nextNode()) === null) {
// We've exhausted the content inside a nested template element.
// Because we still have parts (the outer for-loop), we know:
// - There is a template in the stack
// - The walker will find a nextNode outside the template
walker.currentNode = stack.pop();
node = walker.nextNode();
}
}
// We've arrived at our part's node.
if (part.type === 'node') {
const textPart = this.processor.handleTextExpression(this.options, part);
textPart.insertAfterNode(node.previousSibling);
this.__parts.push(textPart);
}
else {
this.__parts.push(...this.processor.handleAttributeExpressions(node, part.name, part.strings, this.options, part));
}
partIndex++;
}
if (isCEPolyfill) {
document.adoptNode(fragment);
customElements.upgrade(fragment);
}
return fragment;
}
}
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
let policy;
/**
* Turns the value to trusted HTML. If the application uses Trusted Types the
* value is transformed into TrustedHTML, which can be assigned to execution
* sink. If the application doesn't use Trusted Types, the return value is the
* same as the argument.
*/
function convertConstantTemplateStringToTrustedHTML(value) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const w = window;
// TrustedTypes have been renamed to trustedTypes
// (https://github.com/WICG/trusted-types/issues/177)
const trustedTypes = (w.trustedTypes || w.TrustedTypes);
if (trustedTypes && !policy) {
policy = trustedTypes.createPolicy('lit-html', { createHTML: (s) => s });
}
return policy ? policy.createHTML(value) : value;
}
const commentMarker = ` ${marker} `;
/**
* Used to clone existing node instead of each time creating new one which is
* slower
*/
const emptyTemplateNode = document.createElement('template');
/**
* The return type of `html`, which holds a Template and the values from
* interpolated expressions.
*/
class TemplateResult {
constructor(strings, values, type, processor) {
this.strings = strings;
this.values = values;
this.type = type;
this.processor = processor;
}
/**
* Returns a string of HTML used to create a `<template>` element.
*/
getHTML() {
const l = this.strings.length - 1;
let html = '';
let isCommentBinding = false;
for (let i = 0; i < l; i++) {
const s = this.strings[i];
// For each binding we want to determine the kind of marker to insert
// into the template source before it's parsed by the browser's HTML
// parser. The marker type is based on whether the expression is in an
// attribute, text, or comment position.
// * For node-position bindings we insert a comment with the marker
// sentinel as its text content, like <!--{{lit-guid}}-->.
// * For attribute bindings we insert just the marker sentinel for the
// first binding, so that we support unquoted attribute bindings.
// Subsequent bindings can use a comment marker because multi-binding
// attributes must be quoted.
// * For comment bindings we insert just the marker sentinel so we don't
// close the comment.
//
// The following code scans the template source, but is *not* an HTML
// parser. We don't need to track the tree structure of the HTML, only
// whether a binding is inside a comment, and if not, if it appears to be
// the first binding in an attribute.
const commentOpen = s.lastIndexOf('<!--');
// We're in comment position if we have a comment open with no following
// comment close. Because <-- can appear in an attribute value there can
// be false positives.
isCommentBinding = (commentOpen > -1 || isCommentBinding) &&
s.indexOf('-->', commentOpen + 1) === -1;
// Check to see if we have an attribute-like sequence preceding the
// expression. This can match "name=value" like structures in text,
// comments, and attribute values, so there can be false-positives.
const attributeMatch = lastAttributeNameRegex.exec(s);
if (attributeMatch === null) {
// We're only in this branch if we don't have a attribute-like
// preceding sequence. For comments, this guards against unusual
// attribute values like <div foo="<!--${'bar'}">. Cases like
// <!-- foo=${'bar'}--> are handled correctly in the attribute branch
// below.
html += s + (isCommentBinding ? commentMarker : nodeMarker);
}
else {
// For attributes we use just a marker sentinel, and also append a
// $lit$ suffix to the name to opt-out of attribute-specific parsing
// that IE and Edge do for style and certain SVG attributes.
html += s.substr(0, attributeMatch.index) + attributeMatch[1] +
attributeMatch[2] + boundAttributeSuffix + attributeMatch[3] +
marker;
}
}
html += this.strings[l];
return html;
}
getTemplateElement() {
const template = emptyTemplateNode.cloneNode();
// this is secure because `this.strings` is a TemplateStringsArray.
// TODO: validate this when
// https://github.com/tc39/proposal-array-is-template-object is implemented.
template.innerHTML =
convertConstantTemplateStringToTrustedHTML(this.getHTML());
return template;
}
}
/**
* A TemplateResult for SVG fragments.
*
* This class wraps HTML in an `<svg>` tag in order to parse its contents in the
* SVG namespace, then modifies the template to remove the `<svg>` tag so that
* clones only container the original fragment.
*/
class SVGTemplateResult extends TemplateResult {
getHTML() {
return `<svg>${super.getHTML()}</svg>`;
}
getTemplateElement() {
const template = super.getTemplateElement();
const content = template.content;
const svgElement = content.firstChild;
content.removeChild(svgElement);
reparentNodes(content, svgElement.firstChild);
return template;
}
}
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
const isPrimitive = (value) => {
return (value === null ||
!(typeof value === 'object' || typeof value === 'function'));
};
const isIterable = (value) => {
return Array.isArray(value) ||
// tslint:disable-next-line: no-any
!!(value && value[Symbol.iterator]);
};
const identityFunction = (value) => value;
const noopSanitizer = (_node, _name, _type) => identityFunction;
/**
* A global callback used to get a sanitizer for a given field.
*/
let sanitizerFactory = noopSanitizer;
/** Sets the global sanitizer factory. */
const setSanitizerFactory = (newSanitizer) => {
if (sanitizerFactory !== noopSanitizer) {
throw new Error(`Attempted to overwrite existing lit-html security policy.` +
` setSanitizeDOMValueFactory should be called at most once.`);
}
sanitizerFactory = newSanitizer;
};
/**
* Used to clone text node instead of each time creating new one which is slower
*/
const emptyTextNode = document.createTextNode('');
/**
* Writes attribute values to the DOM for a group of AttributeParts bound to a
* single attribute. The value is only set once even if there are multiple parts
* for an attribute.
*/
class AttributeCommitter {
constructor(element, name, strings,
// Next breaking change, consider making this param required.
templatePart, kind = 'attribute') {
this.dirty = true;
this.element = element;
this.name = name;
this.strings = strings;
this.parts = [];
let sanitizer = templatePart && templatePart.sanitizer;
if (sanitizer === undefined) {
sanitizer = sanitizerFactory(element, name, kind);
if (templatePart !== undefined) {
templatePart.sanitizer = sanitizer;
}
}
this.sanitizer = sanitizer;
for (let i = 0; i < strings.length - 1; i++) {
this.parts[i] = this._createPart();
}
}
/**
* Creates a single part. Override this to create a differnt type of part.
*/
_createPart() {
return new AttributePart(this);
}
_getValue() {
const strings = this.strings;
const parts = this.parts;
const l = strings.length - 1;
// If we're assigning an attribute via syntax like:
// attr="${foo}" or attr=${foo}
// but not
// attr="${foo} ${bar}" or attr="${foo} baz"
// then we don't want to coerce the attribute value into one long
// string. Instead we want to just return the value itself directly,
// so that sanitizeDOMValue can get the actual value rather than
// String(value)
// The exception is if v is an array, in which case we do want to smash
// it together into a string without calling String() on the array.
//
// This also allows trusted values (when using TrustedTypes) being
// assigned to DOM sinks without being stringified in the process.
if (l === 1 && strings[0] === '' && strings[1] === '' &&
parts[0] !== undefined) {
const v = parts[0].value;
if (!isIterable(v)) {
return v;
}
}
let text = '';
for (let i = 0; i < l; i++) {
text += strings[i];
const part = parts[i];
if (part !== undefined) {
const v = part.value;
if (isPrimitive(v) || !isIterable(v)) {
text += typeof v === 'string' ? v : String(v);
}
else {
for (const t of v) {
text += typeof t === 'string' ? t : String(t);
}
}
}
}
text += strings[l];
return text;
}
commit() {
if (this.dirty) {
this.dirty = false;
let value = this._getValue();
value = this.sanitizer(value);
if (typeof value === 'symbol') {
// Native Symbols throw if they're coerced to string.
value = String(value);
}
this.element.setAttribute(this.name, value);
}
}
}
/**
* A Part that controls all or part of an attribute value.
*/
class AttributePart {
constructor(committer) {
this.value = undefined;
this.committer = committer;
}
setValue(value) {
if (value !== noChange && (!isPrimitive(value) || value !== this.value)) {
this.value = value;
// If the value is a not a directive, dirty the committer so that it'll
// call setAttribute. If the value is a directive, it'll dirty the
// committer if it calls setValue().
if (!isDirective(value)) {
this.committer.dirty = true;
}
}
}
commit() {
while (isDirective(this.value)) {
const directive = this.value;
this.value = noChange;
// tslint:disable-next-line: no-any
if (directive.isClass) {
// tslint:disable-next-line: no-any
directive.body(this);
}
else {
directive(this);
}
}
if (this.value === noChange) {
return;
}
this.committer.commit();
}
}
/**
* A Part that controls a location within a Node tree. Like a Range, NodePart
* has start and end locations and can set and update the Nodes between those
* locations.
*
* NodeParts support several value types: primitives, Nodes, TemplateResults,
* as well as arrays and iterables of those types.
*/
class NodePart {
constructor(options, templatePart) {
this.value = undefined;
this.__pendingValue = undefined;
/**
* The sanitizer to use when writing text contents into this NodePart.
*
* We have to initialize this here rather than at the template literal level
* because the security of text content depends on the context into which
* it's written. e.g. the same text has different security requirements
* when a child of a <script> vs a <style> vs a <div>.
*/
this.textSanitizer = undefined;
this.options = options;
this.templatePart = templatePart;
}
/**
* Appends this part into a container.
*
* This part must be empty, as its contents are not automatically moved.
*/
appendInto(container) {
this.startNode = container.appendChild(createMarker());
this.endNode = container.appendChild(createMarker());
}
/**
* Inserts this part after the `ref` node (between `ref` and `ref`'s next
* sibling). Both `ref` and its next sibling must be static, unchanging nodes
* such as those that appear in a literal section of a template.
*
* This part must be empty, as its contents are not automatically moved.
*/
insertAfterNode(ref) {
this.startNode = ref;
this.endNode = ref.nextSibling;
}
/**
* Appends this part into a parent part.
*
* This part must be empty, as its contents are not automatically moved.
*/
appendIntoPart(part) {
part.__insert(this.startNode = createMarker());
part.__insert(this.endNode = createMarker());
}
/**
* Inserts this part after the `ref` part.
*
* This part must be empty, as its contents are not automatically moved.
*/
insertAfterPart(ref) {
ref.__insert(this.startNode = createMarker());
this.endNode = ref.endNode;
ref.endNode = this.startNode;
}
setValue(value) {
this.__pendingValue = value;
}
commit() {
while (isDirective(this.__pendingValue)) {
const directive = this.__pendingValue;
this.__pendingValue = noChange;
// tslint:disable-next-line: no-any
if (directive.isClass) {
// tslint:disable-next-line: no-any
directive.body(this);
}
else {
directive(this);
}
}
const value = this.__pendingValue;
if (value === noChange) {
return;
}
if (isPrimitive(value)) {
if (value !== this.value) {
this.__commitText(value);
}
}
else if (value instanceof TemplateResult) {
this.__commitTemplateResult(value);
}
else if (value instanceof Node) {
this.__commitNode(value);
}
else if (isIterable(value)) {
this.__commitIterable(value);
}
else if (value === nothing) {
this.value = nothing;
this.clear();
}
else {
// Fallback, will render the string representation
this.__commitText(value);
}
}
__insert(node) {
this.endNode.parentNode.insertBefore(node, this.endNode);
}
__commitNode(value) {
if (this.value === value) {
return;
}
this.clear();
this.__insert(value);
this.value = value;
}
__commitText(value) {
const node = this.startNode.nextSibling;
value = value == null ? '' : value;
if (node === this.endNode.previousSibling &&
node.nodeType === 3 /* Node.TEXT_NODE */) {
// If we only have a single text node between the markers, we can just
// set its value, rather than replacing it.
if (this.textSanitizer === undefined) {
this.textSanitizer = sanitizerFactory(node, 'data', 'property');
}
const renderedValue = this.textSanitizer(value);
node.data = typeof renderedValue === 'string' ?
renderedValue :
String(renderedValue);
}
else {
// When setting text content, for security purposes it matters a lot what
// the parent is. For example, <style> and <script> need to be handled
// with care, while <span> does not. So first we need to put a text node
// into the document, then we can sanitize its contentx.
const textNode = emptyTextNode.cloneNode();
this.__commitNode(textNode);
if (this.textSanitizer === undefined) {
this.textSanitizer = sanitizerFactory(textNode, 'data', 'property');
}
const renderedValue = this.textSanitizer(value);
textNode.data = typeof renderedValue === 'string' ? renderedValue :
String(renderedValue);
}
this.value = value;
}
__commitTemplateResult(value) {
const template = this.options.templateFactory(value);
if (this.value instanceof TemplateInstance &&
this.value.template === template) {
this.value.update(value.values);
}
else {
// `value` is a template result that was constructed without knowledge of
// the parent we're about to write it into. sanitizeDOMValue hasn't been
// made aware of this relationship, and for scripts and style specifically
// this is known to be unsafe. So in the case where the user is in
// "secure mode" (i.e. when there's a sanitizeDOMValue set), we just want
// to forbid this because it's not a use case we want to support.
// We only apply this policy when sanitizerFactory has been set to
// prevent this from being a breaking change to the library.
const parent = this.endNode.parentNode;
if (sanitizerFactory !== noopSanitizer && parent.nodeName === 'STYLE' ||
parent.nodeName === 'SCRIPT') {
this.__commitText('/* lit-html will not write ' +
'TemplateResults to scripts and styles */');
return;
}
// Make sure we propagate the template processor from the TemplateResult
// so that we use its syntax extension, etc. The template factory comes
// from the render function options so that it can control template
// caching and preprocessing.
const instance = new TemplateInstance(template, value.processor, this.options);
const fragment = instance._clone();
instance.update(value.values);
this.__commitNode(fragment);
this.value = instance;
}
}
__commitIterable(value) {
// For an Iterable, we create a new InstancePart per item, then set its
// value to the item. This is a little bit of overhead for every item in
// an Iterable, but it lets us recurse easily and efficiently update Arrays
// of TemplateResults that will be commonly returned from expressions like:
// array.map((i) => html`${i}`), by reusing existing TemplateInstances.
// If _value is an array, then the previous render was of an
// iterable and _value will contain the NodeParts from the previous
// render. If _value is not an array, clear this part and make a new
// array for NodeParts.
if (!Array.isArray(this.value)) {
this.value = [];
this.clear();
}
// Lets us keep track of how many items we stamped so we can clear leftover
// items from a previous render
const itemParts = this.value;
let partIndex = 0;
let itemPart;
for (const item of value) {
// Try to reuse an existing part
itemPart = itemParts[partIndex];
// If no existing part, create a new one
if (itemPart === undefined) {
itemPart = new NodePart(this.options, this.templatePart);
itemParts.push(itemPart);
if (partIndex === 0) {
itemPart.appendIntoPart(this);
}
else {
itemPart.insertAfterPart(itemParts[partIndex - 1]);
}
}
itemPart.setValue(item);
itemPart.commit();
partIndex++;
}
if (partIndex < itemParts.length) {
// Truncate the parts array so _value reflects the current state
itemParts.length = partIndex;
this.clear(itemPart && itemPart.endNode);
}
}
clear(startNode = this.startNode) {
removeNodes(this.startNode.parentNode, startNode.nextSibling, this.endNode);
}
}
/**
* Implements a boolean attribute, roughly as defined in the HTML
* specification.
*
* If the value is truthy, then the attribute is present with a value of
* ''. If the value is falsey, the attribute is removed.
*/
class BooleanAttributePart {
constructor(element, name, strings) {
this.value = undefined;
this.__pendingValue = undefined;
if (strings.length !== 2 || strings[0] !== '' || strings[1] !== '') {
throw new Error('Boolean attributes can only contain a single expression');
}
this.element = element;
this.name = name;
this.strings = strings;
}
setValue(value) {
this.__pendingValue = value;
}
commit() {
while (isDirective(this.__pendingValue)) {
const directive = this.__pendingValue;
this.__pendingValue = noChange;
// tslint:disable-next-line: no-any
if (directive.isClass) {
// tslint:disable-next-line: no-any
directive.body(this);
}
else {
directive(this);
}
}
if (this.__pendingValue === noChange) {
return;
}
const value = !!this.__pendingValue;
if (this.value !== value) {
if (value) {
this.element.setAttribute(this.name, '');
}
else {
this.element.removeAttribute(this.name);
}
this.value = value;
}
this.__pendingValue = noChange;
}
}
/**
* Sets attribute values for PropertyParts, so that the value is only set once
* even if there are multiple parts for a property.
*
* If an expression controls the whole property value, then the value is simply
* assigned to the property under control. If there are string literals or
* multiple expressions, then the strings are expressions are interpolated into
* a string first.
*/
class PropertyCommitter extends AttributeCommitter {
constructor(element, name, strings,
// Next breaking change, consider making this param required.
templatePart) {
super(element, name, strings, templatePart, 'property');
this.single =
(strings.length === 2 && strings[0] === '' && strings[1] === '');
}
_createPart() {
return new PropertyPart(this);
}
_getValue() {
if (this.single) {
return this.parts[0].value;
}
return super._getValue();
}
commit() {
if (this.dirty) {
this.dirty = false;
let value = this._getValue();
value = this.sanitizer(value);
// tslint:disable-next-line: no-any
this.element[this.name] = value;
}
}
}
class PropertyPart extends AttributePart {
}
// Detect event listener options support. If the `capture` property is read
// from the options object, then options are supported. If not, then the third
// argument to add/removeEventListener is interpreted as the boolean capture
// value so we should only pass the `capture` property.
let eventOptionsSupported = false;
// Wrap into an IIFE because MS Edge <= v41 does not support having try/catch
// blocks right into the body of a module
(() => {
try {
const options = {
get capture() {
eventOptionsSupported = true;
return false;
}
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
window.addEventListener('test', options, options);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
window.removeEventListener('test', options, options);
}
catch (_e) {
// noop
}
})();
class EventPart {
constructor(element, eventName, eventContext) {
this.value = undefined;
this.__pendingValue = undefined;
this.element = element;
this.eventName = eventName;
this.eventContext = eventContext;
this.__boundHandleEvent = (e) => this.handleEvent(e);
}
setValue(value) {
this.__pendingValue = value;
}
commit() {
while (isDirective(this.__pendingValue)) {
const directive = this.__pendingValue;
this.__pendingValue = noChange;
// tslint:disable-next-line: no-any
if (directive.isClass) {
// tslint:disable-next-line: no-any
directive.body(this);
}
else {
directive(this);
}
}
if (this.__pendingValue === noChange) {
return;
}
const newListener = this.__pendingValue;
const oldListener = this.value;
const shouldRemoveListener = newListener == null ||
oldListener != null &&
(newListener.capture !== oldListener.capture ||
newListener.once !== oldListener.once ||
newListener.passive !== oldListener.passive);
const shouldAddListener = newListener != null && (oldListener == null || shouldRemoveListener);
if (shouldRemoveListener) {
this.element.removeEventListener(this.eventName, this.__boundHandleEvent, this.__options);
}
if (shouldAddListener) {
this.__options = getOptions(newListener);
this.element.addEventListener(this.eventName, this.__boundHandleEvent, this.__options);
}
this.value = newListener;
this.__pendingValue = noChange;
}
handleEvent(event) {
if (typeof this.value === 'function') {
this.value.call(this.eventContext || this.element, event);
}
else {
this.value.handleEvent(event);
}
}
}
// We copy options because of the inconsistent behavior of browsers when reading
// the third argument of add/removeEventListener. IE11 doesn't support options
// at all. Chrome 41 only reads `capture` if the argument is an object.
const getOptions = (o) => o &&
(eventOptionsSupported ?
{ capture: o.capture, passive: o.passive, once: o.once } :
o.capture);
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
/**
* Creates Parts when a template is instantiated.
*/
class DefaultTemplateProcessor {
/**
* Create parts for an attribute-position binding, given the event, attribute
* name, and string literals.
*
* @param element The element containing the binding
* @param name The attribute name
* @param strings The string literals. There are always at least two strings,
* event for fully-controlled bindings with a single expression.
*/
handleAttributeExpressions(element, name, strings, options, templatePart) {
const prefix = name[0];
if (prefix === '.') {
const committer = new PropertyCommitter(element, name.slice(1), strings, templatePart);
return committer.parts;
}
if (prefix === '@') {
return [new EventPart(element, name.slice(1), options.eventContext)];
}
if (prefix === '?') {
return [new BooleanAttributePart(element, name.slice(1), strings)];
}
const committer = new AttributeCommitter(element, name, strings, templatePart);
return committer.parts;
}
/**
* Create parts for a text-position binding.
* @param templateFactory
*/
handleTextExpression(options, nodeTemplatePart) {
return new NodePart(options, nodeTemplatePart);
}
}
const defaultTemplateProcessor = new DefaultTemplateProcessor();
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
/**
* The default TemplateFactory which caches Templates keyed on
* result.type and result.strings.
*/
function templateFactory(result) {
let templateCache = templateCaches.get(result.type);
if (templateCache === undefined) {
templateCache = {
stringsArray: new WeakMap(),
keyString: new Map()
};
templateCaches.set(result.type, templateCache);
}
let template = templateCache.stringsArray.get(result.strings);
if (template !== undefined) {
return template;
}
// If the TemplateStringsArray is new, generate a key from the strings
// This key is shared between all templates with identical content
const key = result.strings.join(marker);
// Check if we already have a Template for this key
template = templateCache.keyString.get(key);
if (template === undefined) {
// If we have not seen this key before, create a new Template
template = new Template(result, result.getTemplateElement());
// Cache the Template for this key
templateCache.keyString.set(key, template);
}
// Cache all future queries for this TemplateStringsArray
templateCache.stringsArray.set(result.strings, template);
return template;
}
const templateCaches = new Map();
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
const parts = new WeakMap();
/**
* Renders a template result or other value to a container.
*
* To update a container with new values, reevaluate the template literal and
* call `render` with the new result.
*
* @param result Any value renderable by NodePart - typically a TemplateResult
* created by evaluating a template tag like `html` or `svg`.
* @param container A DOM parent to render to. The entire contents are either
* replaced, or efficiently updated if the same result type was previous
* rendered there.
* @param options RenderOptions for the entire render tree rendered to this
* container. Render options must *not* change between renders to the same
* container, as those changes will not effect previously rendered DOM.
*/
const render = (result, container, options) => {
let part = parts.get(container);
if (part === undefined) {
removeNodes(container, container.firstChild);
parts.set(container, part = new NodePart(Object.assign({ templateFactory }, options), undefined));
part.appendInto(container);
}
part.setValue(result);
part.commit();
};
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
// IMPORTANT: do not change the property name or the assignment expression.
// This line will be used in regexes to search for lit-html usage.
// TODO(justinfagnani): inject version number at build time
const isBrowser = typeof window !== 'undefined';
if (isBrowser) {
// If we run in the browser set version
(window['litHtmlVersions'] || (window['litHtmlVersions'] = [])).push('1.1.7');
}
/**
* Interprets a template literal as an HTML template that can efficiently
* render to and update a container.
*/
const html = (strings, ...values) => new TemplateResult(strings, values, 'html', defaultTemplateProcessor);
/**
* Interprets a template literal as an SVG template that can efficiently
* render to and update a container.
*/
const svg = (strings, ...values) => new SVGTemplateResult(strings, values, 'svg', defaultTemplateProcessor);
var lithtml = /*#__PURE__*/Object.freeze({
__proto__: null,
html: html,
svg: svg,
DefaultTemplateProcessor: DefaultTemplateProcessor,
defaultTemplateProcessor: defaultTemplateProcessor,
directive: directive,
Directive: Directive,
isDirective: isDirective,
removeNodes: removeNodes,
reparentNodes: reparentNodes,
noChange: noChange,
nothing: nothing,
AttributeCommitter: AttributeCommitter,
AttributePart: AttributePart,
BooleanAttributePart: BooleanAttributePart,
EventPart: EventPart,
isIterable: isIterable,
isPrimitive: isPrimitive,
NodePart: NodePart,
PropertyCommitter: PropertyCommitter,
PropertyPart: PropertyPart,
get sanitizerFactory () { return sanitizerFactory; },
setSanitizerFactory: setSanitizerFactory,
parts: parts,
render: render,
templateCaches: templateCaches,
templateFactory: templateFactory,
TemplateInstance: TemplateInstance,
SVGTemplateResult: SVGTemplateResult,
TemplateResult: TemplateResult,
createMarker: createMarker,
isTemplatePartActive: isTemplatePartActive,
Template: Template
});
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
var __asyncValues = function (o) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
};
/**
* A directive that renders the items of an async iterable[1], appending new
* values after previous values, similar to the built-in support for iterables.
*
* Async iterables are objects with a [Symbol.asyncIterator] method, which
* returns an iterator who's `next()` method returns a Promise. When a new
* value is available, the Promise resolves and the value is appended to the
* Part controlled by the directive. If another value other than this
* directive has been set on the Part, the iterable will no longer be listened
* to and new values won't be written to the Part.
*
* [1]: https://github.com/tc39/proposal-async-iteration
*
* @param value An async iterable
* @param mapper An optional function that maps from (value, index) to another
* value. Useful for generating templates for each item in the iterable.
*/
const asyncAppend = directive((value, mapper) => async (part) => {
var e_1, _a;
if (!(part instanceof NodePart)) {
throw new Error('asyncAppend can only be used in text bindings');
}
// If we've already set up this particular iterable, we don't need
// to do anything.
if (value === part.value) {
return;
}
part.value = value;
// We keep track of item Parts across iterations, so that we can
// share marker nodes between consecutive Parts.
let itemPart;
let i = 0;
try {
for (var value_1 = __asyncValues(value), value_1_1; value_1_1 = await value_1.next(), !value_1_1.done;) {
let v = value_1_1.value;
// Check to make sure that value is the still the current value of
// the part, and if not bail because a new value owns this part
if (part.value !== value) {
break;
}
// When we get the first value, clear the part. This lets the
// previous value display until we can replace it.
if (i === 0) {
part.clear();
}
// As a convenience, because functional-programming-style
// transforms of iterables and async iterables requires a library,
// we accept a mapper function. This is especially convenient for
// rendering a template for each item.
if (mapper !== undefined) {
// This is safe because T must otherwise be treated as unknown by
// the rest of the system.
v = mapper(v, i);
}
// Like with sync iterables, each item induces a Part, so we need
// to keep track of start and end nodes for the Part.
// Note: Because these Parts are not updatable like with a sync
// iterable (if we render a new value, we always clear), it may
// be possible to optimize away the Parts and just re-use the
// Part.setValue() logic.
let itemStartNode = part.startNode;
// Check to see if we have a previous item and Part
if (itemPart !== undefined) {
// Create a new node to separate the previous and next Parts
itemStartNode = createMarker();
// itemPart is currently the Part for the previous item. Set
// it's endNode to the node we'll use for the next Part's
// startNode.
itemPart.endNode = itemStartNode;
part.endNode.parentNode.insertBefore(itemStartNode, part.endNode);
}
itemPart = new NodePart(part.options, part.templatePart);
itemPart.insertAfterNode(itemStartNode);
itemPart.setValue(v);
itemPart.commit();
i++;
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (value_1_1 && !value_1_1.done && (_a = value_1.return)) await _a.call(value_1);
}
finally { if (e_1) throw e_1.error; }
}
});
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
var __asyncValues$1 = function (o) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
};
/**
* A directive that renders the items of an async iterable[1], replacing
* previous values with new values, so that only one value is ever rendered
* at a time.
*
* Async iterables are objects with a [Symbol.asyncIterator] method, which
* returns an iterator who's `next()` method returns a Promise. When a new
* value is available, the Promise resolves and the value is rendered to the
* Part controlled by the directive. If another value other than this
* directive has been set on the Part, the iterable will no longer be listened
* to and new values won't be written to the Part.
*
* [1]: https://github.com/tc39/proposal-async-iteration
*
* @param value An async iterable
* @param mapper An optional function that maps from (value, index) to another
* value. Useful for generating templates for each item in the iterable.
*/
const asyncReplace = directive((value, mapper) => async (part) => {
var e_1, _a;
if (!(part instanceof NodePart)) {
throw new Error('asyncReplace can only be used in text bindings');
}
// If we've already set up this particular iterable, we don't need
// to do anything.
if (value === part.value) {
return;
}
// We nest a new part to keep track of previous item values separately
// of the iterable as a value itself.
const itemPart = new NodePart(part.options, part.templatePart);
part.value = value;
let i = 0;
try {
for (var value_1 = __asyncValues$1(value), value_1_1; value_1_1 = await value_1.next(), !value_1_1.done;) {
let v = value_1_1.value;
// Check to make sure that value is the still the current value of
// the part, and if not bail because a new value owns this part
if (part.value !== value) {
break;
}
// When we get the first value, clear the part. This let's the
// previous value display until we can replace it.
if (i === 0) {
part.clear();
itemPart.appendIntoPart(part);
}
// As a convenience, because functional-programming-style
// transforms of iterables and async iterables requires a library,
// we accept a mapper function. This is especially convenient for
// rendering a template for each item.
if (mapper !== undefined) {
// This is safe because T must otherwise be treated as unknown by
// the rest of the system.
v = mapper(v, i);
}
itemPart.setValue(v);
itemPart.commit();
i++;
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (value_1_1 && !value_1_1.done && (_a = value_1.return)) await _a.call(value_1);
}
finally { if (e_1) throw e_1.error; }
}
});
/**
* @license
* Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
const templateCaches$1 = new WeakMap();
/**
* Enables fast switching between multiple templates by caching the DOM nodes
* and TemplateInstances produced by the templates.
*
* Example:
*
* ```
* let checked = false;
*
* html`
* ${cache(checked ? html`input is checked` : html`input is not checked`)}
* `
* ```
*/
const cache = directive((value) => (part) => {
if (!(part instanceof NodePart)) {
throw new Error('cache can only be used in text bindings');
}
let templateCache = templateCaches$1.get(part);
if (templateCache === undefined) {
templateCache = new WeakMap();
templateCaches$1.set(part, templateCache);
}
const previousValue = part.value;
// First, can we update the current TemplateInstance, or do we need to move
// the current nodes into the cache?
if (previousValue instanceof TemplateInstance) {
if (value instanceof TemplateResult &&
previousValue.template === part.options.templateFactory(value)) {
// Same Template, just trigger an update of the TemplateInstance
part.setValue(value);
return;
}
else {
// Not the same Template, move the nodes from the DOM into the cache.
let cachedTemplate = templateCache.get(previousValue.template);
if (cachedTemplate === undefined) {
cachedTemplate = {
instance: previousValue,
nodes: document.createDocumentFragment(),
};
templateCache.set(previousValue.template, cachedTemplate);
}
reparentNodes(cachedTemplate.nodes, part.startNode.nextSibling, part.endNode);
}
}
// Next, can we reuse nodes from the cache?
if (value instanceof TemplateResult) {
const template = part.options.templateFactory(value);
const cachedTemplate = templateCache.get(template);
if (cachedTemplate !== undefined) {
// Move nodes out of cache
part.setValue(cachedTemplate.nodes);
part.commit();
// Set the Part value to the TemplateInstance so it'll update it.
part.value = cachedTemplate.instance;
}
}
part.setValue(value);
});
/**
* @license
* Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
/**
* Stores the ClassInfo object applied to a given AttributePart.
* Used to unset existing values when a new ClassInfo object is applied.
*/
const previousClassesCache = new WeakMap();
/**
* A directive that applies CSS classes. This must be used in the `class`
* attribute and must be the only part used in the attribute. It takes each
* property in the `classInfo` argument and adds the property name to the
* element's `classList` if the property value is truthy; if the property value
* is falsey, the property name is removed from the element's `classList`. For
* example
* `{foo: bar}` applies the class `foo` if the value of `bar` is truthy.
* @param classInfo {ClassInfo}
*/
const classMap = directive((classInfo) => (part) => {
if (!(part instanceof AttributePart) || (part instanceof PropertyPart) ||
part.committer.name !== 'class' || part.committer.parts.length > 1) {
throw new Error('The `classMap` directive must be used in the `class` attribute ' +
'and must be the only part in the attribute.');
}
const { committer } = part;
const { element } = committer;
let previousClasses = previousClassesCache.get(part);
if (previousClasses === undefined) {
// Write static classes once
element.className = committer.strings.join(' ');
previousClassesCache.set(part, previousClasses = new Set());
}
const { classList } = element;
// Remove old classes that no longer apply
// We use forEach() instead of for-of so that re don't require down-level
// iteration.
previousClasses.forEach((name) => {
if (!(name in classInfo)) {
classList.remove(name);
previousClasses.delete(name);
}
});
// Add or remove classes based on their classMap value
for (const name in classInfo) {
const value = classInfo[name];
// We explicitly want a loose truthy check of `value` because it seems more
// convenient that '' and 0 are skipped.
if (value != previousClasses.has(name)) {
if (value) {
classList.add(name);
previousClasses.add(name);
}
else {
classList.remove(name);
previousClasses.delete(name);
}
}
}
});
/**
* @license
* Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
const previousValues = new WeakMap();
/**
* Prevents re-render of a template function until a single value or an array of
* values changes.
*
* Example:
*
* ```js
* html`
* <div>
* ${guard([user.id, company.id], () => html`...`)}
* </div>
* ```
*
* In this case, the template only renders if either `user.id` or `company.id`
* changes.
*
* guard() is useful with immutable data patterns, by preventing expensive work
* until data updates.
*
* Example:
*
* ```js
* html`
* <div>
* ${guard([immutableItems], () => immutableItems.map(i => html`${i}`))}
* </div>
* ```
*
* In this case, items are mapped over only when the array reference changes.
*
* @param value the value to check before re-rendering
* @param f the template function
*/
const guard = directive((value, f) => (part) => {
const previousValue = previousValues.get(part);
if (Array.isArray(value)) {
// Dirty-check arrays by item
if (Array.isArray(previousValue) &&
previousValue.length === value.length &&
value.every((v, i) => v === previousValue[i])) {
return;
}
}
else if (previousValue === value &&
(value !== undefined || previousValues.has(part))) {
// Dirty-check non-arrays by identity
return;
}
part.setValue(f());
// Copy the value if it's an array so that if it's mutated we don't forget
// what the previous values were.
previousValues.set(part, Array.isArray(value) ? Array.from(value) : value);
});
/**
* @license
* Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
/**
* For AttributeParts, sets the attribute if the value is defined and removes
* the attribute if the value is undefined.
*
* For other part types, this directive is a no-op.
*/
const ifDefined = directive((value) => (part) => {
if (value === undefined && part instanceof AttributePart) {
if (value !== part.value) {
const name = part.committer.name;
part.committer.element.removeAttribute(name);
}
}
else {
part.setValue(value);
}
});
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
// Helper functions for manipulating parts
// TODO(kschaaf): Refactor into Part API?
const createAndInsertPart = (containerPart, beforePart) => {
const container = containerPart.startNode.parentNode;
const beforeNode = beforePart == null ? containerPart.endNode : beforePart.startNode;
const startNode = container.insertBefore(createMarker(), beforeNode);
container.insertBefore(createMarker(), beforeNode);
const newPart = new NodePart(containerPart.options, undefined);
newPart.insertAfterNode(startNode);
return newPart;
};
const updatePart = (part, value) => {
part.setValue(value);
part.commit();
return part;
};
const insertPartBefore = (containerPart, part, ref) => {
const container = containerPart.startNode.parentNode;
const beforeNode = ref ? ref.startNode : containerPart.endNode;
const endNode = part.endNode.nextSibling;
if (endNode !== beforeNode) {
reparentNodes(container, part.startNode, endNode, beforeNode);
}
};
const removePart = (part) => {
removeNodes(part.startNode.parentNode, part.startNode, part.endNode.nextSibling);
};
// Helper for generating a map of array item to its index over a subset
// of an array (used to lazily generate `newKeyToIndexMap` and
// `oldKeyToIndexMap`)
const generateMap = (list, start, end) => {
const map = new Map();
for (let i = start; i <= end; i++) {
map.set(list[i], i);
}
return map;
};
// Stores previous ordered list of parts and map of key to index
const partListCache = new WeakMap();
const keyListCache = new WeakMap();
/**
* A directive that repeats a series of values (usually `TemplateResults`)
* generated from an iterable, and updates those items efficiently when the
* iterable changes based on user-provided `keys` associated with each item.
*
* Note that if a `keyFn` is provided, strict key-to-DOM mapping is maintained,
* meaning previous DOM for a given key is moved into the new position if
* needed, and DOM will never be reused with values for different keys (new DOM
* will always be created for new keys). This is generally the most efficient
* way to use `repeat` since it performs minimum unnecessary work for insertions
* and removals.
*
* IMPORTANT: If providing a `keyFn`, keys *must* be unique for all items in a
* given call to `repeat`. The behavior when two or more items have the same key
* is undefined.
*
* If no `keyFn` is provided, this directive will perform similar to mapping
* items to values, and DOM will be reused against potentially different items.
*/
const repeat = directive((items, keyFnOrTemplate, template) => {
let keyFn;
if (template === undefined) {
template = keyFnOrTemplate;
}
else if (keyFnOrTemplate !== undefined) {
keyFn = keyFnOrTemplate;
}
return (containerPart) => {
if (!(containerPart instanceof NodePart)) {
throw new Error('repeat can only be used in text bindings');
}
// Old part & key lists are retrieved from the last update
// (associated with the part for this instance of the directive)
const oldParts = partListCache.get(containerPart) || [];
const oldKeys = keyListCache.get(containerPart) || [];
// New part list will be built up as we go (either reused from
// old parts or created for new keys in this update). This is
// saved in the above cache at the end of the update.
const newParts = [];
// New value list is eagerly generated from items along with a
// parallel array indicating its key.
const newValues = [];
const newKeys = [];
let index = 0;
for (const item of items) {
newKeys[index] = keyFn ? keyFn(item, index) : index;
newValues[index] = template(item, index);
index++;
}
// Maps from key to index for current and previous update; these
// are generated lazily only when needed as a performance
// optimization, since they are only required for multiple
// non-contiguous changes in the list, which are less common.
let newKeyToIndexMap;
let oldKeyToIndexMap;
// Head and tail pointers to old parts and new values
let oldHead = 0;
let oldTail = oldParts.length - 1;
let newHead = 0;
let newTail = newValues.length - 1;
// Overview of O(n) reconciliation algorithm (general approach
// based on ideas found in ivi, vue, snabbdom, etc.):
//
// * We start with the list of old parts and new values (and
// arrays of their respective keys), head/tail pointers into
// each, and we build up the new list of parts by updating
// (and when needed, moving) old parts or creating new ones.
// The initial scenario might look like this (for brevity of
// the diagrams, the numbers in the array reflect keys
// associated with the old parts or new values, although keys
// and parts/values are actually stored in parallel arrays
// indexed using the same head/tail pointers):
//
// oldHead v v oldTail
// oldKeys: [0, 1, 2, 3, 4, 5, 6]
// newParts: [ , , , , , , ]
// newKeys: [0, 2, 1, 4, 3, 7, 6] <- reflects the user's new
// item order
// newHead ^ ^ newTail
//
// * Iterate old & new lists from both sides, updating,
// swapping, or removing parts at the head/tail locations
// until neither head nor tail can move.
//
// * Example below: keys at head pointers match, so update old
// part 0 in-place (no need to move it) and record part 0 in
// the `newParts` list. The last thing we do is advance the
// `oldHead` and `newHead` pointers (will be reflected in the
// next diagram).
//
// oldHead v v oldTail
// oldKeys: [0, 1, 2, 3, 4, 5, 6]
// newParts: [0, , , , , , ] <- heads matched: update 0
// newKeys: [0, 2, 1, 4, 3, 7, 6] and advance both oldHead
// & newHead
// newHead ^ ^ newTail
//
// * Example below: head pointers don't match, but tail
// pointers do, so update part 6 in place (no need to move
// it), and record part 6 in the `newParts` list. Last,
// advance the `oldTail` and `oldHead` pointers.
//
// oldHead v v oldTail
// oldKeys: [0, 1, 2, 3, 4, 5, 6]
// newParts: [0, , , , , , 6] <- tails matched: update 6
// newKeys: [0, 2, 1, 4, 3, 7, 6] and advance both oldTail
// & newTail
// newHead ^ ^ newTail
//
// * If neither head nor tail match; next check if one of the
// old head/tail items was removed. We first need to generate
// the reverse map of new keys to index (`newKeyToIndexMap`),
// which is done once lazily as a performance optimization,
// since we only hit this case if multiple non-contiguous
// changes were made. Note that for contiguous removal
// anywhere in the list, the head and tails would advance
// from either end and pass each other before we get to this
// case and removals would be handled in the final while loop
// without needing to generate the map.
//
// * Example below: The key at `oldTail` was removed (no longer
// in the `newKeyToIndexMap`), so remove that part from the
// DOM and advance just the `oldTail` pointer.
//
// oldHead v v oldTail
// oldKeys: [0, 1, 2, 3, 4, 5, 6]
// newParts: [0, , , , , , 6] <- 5 not in new map: remove
// newKeys: [0, 2, 1, 4, 3, 7, 6] 5 and advance oldTail
// newHead ^ ^ newTail
//
// * Once head and tail cannot move, any mismatches are due to
// either new or moved items; if a new key is in the previous
// "old key to old index" map, move the old part to the new
// location, otherwise create and insert a new part. Note
// that when moving an old part we null its position in the
// oldParts array if it lies between the head and tail so we
// know to skip it when the pointers get there.
//
// * Example below: neither head nor tail match, and neither
// were removed; so find the `newHead` key in the
// `oldKeyToIndexMap`, and move that old part's DOM into the
// next head position (before `oldParts[oldHead]`). Last,
// null the part in the `oldPart` array since it was
// somewhere in the remaining oldParts still to be scanned
// (between the head and tail pointers) so that we know to
// skip that old part on future iterations.
//
// oldHead v v oldTail
// oldKeys: [0, 1, -, 3, 4, 5, 6]
// newParts: [0, 2, , , , , 6] <- stuck: update & move 2
// newKeys: [0, 2, 1, 4, 3, 7, 6] into place and advance
// newHead
// newHead ^ ^ newTail
//
// * Note that for moves/insertions like the one above, a part
// inserted at the head pointer is inserted before the
// current `oldParts[oldHead]`, and a part inserted at the
// tail pointer is inserted before `newParts[newTail+1]`. The
// seeming asymmetry lies in the fact that new parts are
// moved into place outside in, so to the right of the head
// pointer are old parts, and to the right of the tail
// pointer are new parts.
//
// * We always restart back from the top of the algorithm,
// allowing matching and simple updates in place to
// continue...
//
// * Example below: the head pointers once again match, so
// simply update part 1 and record it in the `newParts`
// array. Last, advance both head pointers.
//
// oldHead v v oldTail
// oldKeys: [0, 1, -, 3, 4, 5, 6]
// newParts: [0, 2, 1, , , , 6] <- heads matched: update 1
// newKeys: [0, 2, 1, 4, 3, 7, 6] and advance both oldHead
// & newHead
// newHead ^ ^ newTail
//
// * As mentioned above, items that were moved as a result of
// being stuck (the final else clause in the code below) are
// marked with null, so we always advance old pointers over
// these so we're comparing the next actual old value on
// either end.
//
// * Example below: `oldHead` is null (already placed in
// newParts), so advance `oldHead`.
//
// oldHead v v oldTail
// oldKeys: [0, 1, -, 3, 4, 5, 6] <- old head already used:
// newParts: [0, 2, 1, , , , 6] advance oldHead
// newKeys: [0, 2, 1, 4, 3, 7, 6]
// newHead ^ ^ newTail
//
// * Note it's not critical to mark old parts as null when they
// are moved from head to tail or tail to head, since they
// will be outside the pointer range and never visited again.
//
// * Example below: Here the old tail key matches the new head
// key, so the part at the `oldTail` position and move its
// DOM to the new head position (before `oldParts[oldHead]`).
// Last, advance `oldTail` and `newHead` pointers.
//
// oldHead v v oldTail
// oldKeys: [0, 1, -, 3, 4, 5, 6]
// newParts: [0, 2, 1, 4, , , 6] <- old tail matches new
// newKeys: [0, 2, 1, 4, 3, 7, 6] head: update & move 4,
// advance oldTail & newHead
// newHead ^ ^ newTail
//
// * Example below: Old and new head keys match, so update the
// old head part in place, and advance the `oldHead` and
// `newHead` pointers.
//
// oldHead v oldTail
// oldKeys: [0, 1, -, 3, 4, 5, 6]
// newParts: [0, 2, 1, 4, 3, ,6] <- heads match: update 3
// newKeys: [0, 2, 1, 4, 3, 7, 6] and advance oldHead &
// newHead
// newHead ^ ^ newTail
//
// * Once the new or old pointers move past each other then all
// we have left is additions (if old list exhausted) or
// removals (if new list exhausted). Those are handled in the
// final while loops at the end.
//
// * Example below: `oldHead` exceeded `oldTail`, so we're done
// with the main loop. Create the remaining part and insert
// it at the new head position, and the update is complete.
//
// (oldHead > oldTail)
// oldKeys: [0, 1, -, 3, 4, 5, 6]
// newParts: [0, 2, 1, 4, 3, 7 ,6] <- create and insert 7
// newKeys: [0, 2, 1, 4, 3, 7, 6]
// newHead ^ newTail
//
// * Note that the order of the if/else clauses is not
// important to the algorithm, as long as the null checks
// come first (to ensure we're always working on valid old
// parts) and that the final else clause comes last (since
// that's where the expensive moves occur). The order of
// remaining clauses is is just a simple guess at which cases
// will be most common.
//
// * TODO(kschaaf) Note, we could calculate the longest
// increasing subsequence (LIS) of old items in new position,
// and only move those not in the LIS set. However that costs
// O(nlogn) time and adds a bit more code, and only helps
// make rare types of mutations require fewer moves. The
// above handles removes, adds, reversal, swaps, and single
// moves of contiguous items in linear time, in the minimum
// number of moves. As the number of multiple moves where LIS
// might help approaches a random shuffle, the LIS
// optimization becomes less helpful, so it seems not worth
// the code at this point. Could reconsider if a compelling
// case arises.
while (oldHead <= oldTail && newHead <= newTail) {
if (oldParts[oldHead] === null) {
// `null` means old part at head has already been used
// below; skip
oldHead++;
}
else if (oldParts[oldTail] === null) {
// `null` means old part at tail has already been used
// below; skip
oldTail--;
}
else if (oldKeys[oldHead] === newKeys[newHead]) {
// Old head matches new head; update in place
newParts[newHead] =
updatePart(oldParts[oldHead], newValues[newHead]);
oldHead++;
newHead++;
}
else if (oldKeys[oldTail] === newKeys[newTail]) {
// Old tail matches new tail; update in place
newParts[newTail] =
updatePart(oldParts[oldTail], newValues[newTail]);
oldTail--;
newTail--;
}
else if (oldKeys[oldHead] === newKeys[newTail]) {
// Old head matches new tail; update and move to new tail
newParts[newTail] =
updatePart(oldParts[oldHead], newValues[newTail]);
insertPartBefore(containerPart, oldParts[oldHead], newParts[newTail + 1]);
oldHead++;
newTail--;
}
else if (oldKeys[oldTail] === newKeys[newHead]) {
// Old tail matches new head; update and move to new head
newParts[newHead] =
updatePart(oldParts[oldTail], newValues[newHead]);
insertPartBefore(containerPart, oldParts[oldTail], oldParts[oldHead]);
oldTail--;
newHead++;
}
else {
if (newKeyToIndexMap === undefined) {
// Lazily generate key-to-index maps, used for removals &
// moves below
newKeyToIndexMap = generateMap(newKeys, newHead, newTail);
oldKeyToIndexMap = generateMap(oldKeys, oldHead, oldTail);
}
if (!newKeyToIndexMap.has(oldKeys[oldHead])) {
// Old head is no longer in new list; remove
removePart(oldParts[oldHead]);
oldHead++;
}
else if (!newKeyToIndexMap.has(oldKeys[oldTail])) {
// Old tail is no longer in new list; remove
removePart(oldParts[oldTail]);
oldTail--;
}
else {
// Any mismatches at this point are due to additions or
// moves; see if we have an old part we can reuse and move
// into place
const oldIndex = oldKeyToIndexMap.get(newKeys[newHead]);
const oldPart = oldIndex !== undefined ? oldParts[oldIndex] : null;
if (oldPart === null) {
// No old part for this value; create a new one and
// insert it
const newPart = createAndInsertPart(containerPart, oldParts[oldHead]);
updatePart(newPart, newValues[newHead]);
newParts[newHead] = newPart;
}
else {
// Reuse old part
newParts[newHead] =
updatePart(oldPart, newValues[newHead]);
insertPartBefore(containerPart, oldPart, oldParts[oldHead]);
// This marks the old part as having been used, so that
// it will be skipped in the first two checks above
oldParts[oldIndex] = null;
}
newHead++;
}
}
}
// Add parts for any remaining new values
while (newHead <= newTail) {
// For all remaining additions, we insert before last new
// tail, since old pointers are no longer valid
const newPart = createAndInsertPart(containerPart, newParts[newTail + 1]);
updatePart(newPart, newValues[newHead]);
newParts[newHead++] = newPart;
}
// Remove any remaining unused old parts
while (oldHead <= oldTail) {
const oldPart = oldParts[oldHead++];
if (oldPart !== null) {
removePart(oldPart);
}
}
// Save order of new parts for next round
partListCache.set(containerPart, newParts);
keyListCache.set(containerPart, newKeys);
};
});
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
// For each part, remember the value that was last rendered to the part by the
// unsafeHTML directive, and the DocumentFragment that was last set as a value.
// The DocumentFragment is used as a unique key to check if the last value
// rendered to the part was with unsafeHTML. If not, we'll always re-render the
// value passed to unsafeHTML.
const previousValues$1 = new WeakMap();
/**
* Used to clone existing node instead of each time creating new one which is
* slower
*/
const emptyTemplateNode$1 = document.createElement('template');
/**
* Renders the result as HTML, rather than text.
*
* Note, this is unsafe to use with any user-provided input that hasn't been
* sanitized or escaped, as it may lead to cross-site-scripting
* vulnerabilities.
*/
const unsafeHTML = directive((value) => (part) => {
if (!(part instanceof NodePart)) {
throw new Error('unsafeHTML can only be used in text bindings');
}
const previousValue = previousValues$1.get(part);
if (previousValue !== undefined && isPrimitive(value) &&
value === previousValue.value && part.value === previousValue.fragment) {
return;
}
const template = emptyTemplateNode$1.cloneNode();
template.innerHTML = value; // innerHTML casts to string internally
const fragment = document.importNode(template.content, true);
part.setValue(fragment);
previousValues$1.set(part, { value, fragment });
});
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
const _state = new WeakMap();
// Effectively infinity, but a SMI.
const _infinity = 0x7fffffff;
/**
* Renders one of a series of values, including Promises, to a Part.
*
* Values are rendered in priority order, with the first argument having the
* highest priority and the last argument having the lowest priority. If a
* value is a Promise, low-priority values will be rendered until it resolves.
*
* The priority of values can be used to create placeholder content for async
* data. For example, a Promise with pending content can be the first,
* highest-priority, argument, and a non_promise loading indicator template can
* be used as the second, lower-priority, argument. The loading indicator will
* render immediately, and the primary content will render when the Promise
* resolves.
*
* Example:
*
* const content = fetch('./content.txt').then(r => r.text());
* html`${until(content, html`<span>Loading...</span>`)}`
*/
const until = directive((...args) => (part) => {
let state = _state.get(part);
if (state === undefined) {
state = {
lastRenderedIndex: _infinity,
values: [],
};
_state.set(part, state);
}
const previousValues = state.values;
let previousLength = previousValues.length;
state.values = args;
for (let i = 0; i < args.length; i++) {
// If we've rendered a higher-priority value already, stop.
if (i > state.lastRenderedIndex) {
break;
}
const value = args[i];
// Render non-Promise values immediately
if (isPrimitive(value) ||
typeof value.then !== 'function') {
part.setValue(value);
state.lastRenderedIndex = i;
// Since a lower-priority value will never overwrite a higher-priority
// synchronous value, we can stop processing now.
break;
}
// If this is a Promise we've already handled, skip it.
if (i < previousLength && value === previousValues[i]) {
continue;
}
// We have a Promise that we haven't seen before, so priorities may have
// changed. Forget what we rendered before.
state.lastRenderedIndex = _infinity;
previousLength = 0;
Promise.resolve(value).then((resolvedValue) => {
const index = state.values.indexOf(value);
// If state.values doesn't contain the value, we've re-rendered without
// the value, so don't render it. Then, only render if the value is
// higher-priority than what's already been rendered.
if (index > -1 && index < state.lastRenderedIndex) {
state.lastRenderedIndex = index;
part.setValue(resolvedValue);
part.commit();
}
});
}
});
const detached = new WeakMap();
class Detach extends Directive {
constructor(ifFn) {
super();
this.ifFn = ifFn;
}
body(part) {
const detach = this.ifFn();
const element = part.committer.element;
if (detach) {
if (!detached.has(part)) {
const nextSibling = element.nextSibling;
detached.set(part, { element, nextSibling });
}
element.remove();
}
else {
const data = detached.get(part);
if (typeof data !== 'undefined' && data !== null) {
data.nextSibling.parentNode.insertBefore(data.element, data.nextSibling);
detached.delete(part);
}
}
}
}
const toRemove = [], toUpdate = [];
class StyleMap extends Directive {
constructor(styleInfo, detach = false) {
super();
this.previous = {};
this.style = styleInfo;
this.detach = detach;
}
setStyle(styleInfo) {
this.style = styleInfo;
}
setDetach(detach) {
this.detach = detach;
}
body(part) {
toRemove.length = 0;
toUpdate.length = 0;
// @ts-ignore
const element = part.committer.element;
const style = element.style;
let previous = this.previous;
for (const name in previous) {
if (this.style[name] === undefined) {
toRemove.push(name);
}
}
for (const name in this.style) {
const value = this.style[name];
const prev = previous[name];
if (prev !== undefined && prev === value) {
continue;
}
toUpdate.push(name);
}
if (toRemove.length || toUpdate.length) {
let parent, nextSibling;
if (this.detach) {
parent = element.parentNode;
if (parent) {
nextSibling = element.nextSibling;
element.remove();
}
}
for (const name of toRemove) {
style.removeProperty(name);
}
for (const name of toUpdate) {
const value = this.style[name];
if (!name.includes('-')) {
style[name] = value;
}
else {
style.setProperty(name, value);
}
}
if (this.detach && parent) {
parent.insertBefore(element, nextSibling);
}
this.previous = Object.assign({}, this.style);
}
}
}
class Action {
constructor() {
this.isAction = true;
}
}
Action.prototype.isAction = true;
const defaultOptions = {
element: document.createTextNode(''),
axis: 'xy',
threshold: 10,
onDown(data) { },
onMove(data) { },
onUp(data) { },
onWheel(data) { }
};
const pointerEventsExists = typeof PointerEvent !== 'undefined';
let id = 0;
class PointerAction extends Action {
constructor(element, data) {
super();
this.moving = '';
this.initialX = 0;
this.initialY = 0;
this.lastY = 0;
this.lastX = 0;
this.onPointerDown = this.onPointerDown.bind(this);
this.onPointerMove = this.onPointerMove.bind(this);
this.onPointerUp = this.onPointerUp.bind(this);
this.onWheel = this.onWheel.bind(this);
this.element = element;
this.id = ++id;
this.options = Object.assign(Object.assign({}, defaultOptions), data.pointerOptions);
if (pointerEventsExists) {
element.addEventListener('pointerdown', this.onPointerDown);
document.addEventListener('pointermove', this.onPointerMove);
document.addEventListener('pointerup', this.onPointerUp);
}
else {
element.addEventListener('touchstart', this.onPointerDown);
document.addEventListener('touchmove', this.onPointerMove, { passive: false });
document.addEventListener('touchend', this.onPointerUp);
document.addEventListener('touchcancel', this.onPointerUp);
element.addEventListener('mousedown', this.onPointerDown);
document.addEventListener('mousemove', this.onPointerMove, { passive: false });
document.addEventListener('mouseup', this.onPointerUp);
}
}
normalizeMouseWheelEvent(event) {
// @ts-ignore
let x = event.deltaX || 0;
// @ts-ignore
let y = event.deltaY || 0;
// @ts-ignore
let z = event.deltaZ || 0;
// @ts-ignore
const mode = event.deltaMode;
// @ts-ignore
const lineHeight = parseInt(getComputedStyle(event.target).getPropertyValue('line-height'));
let scale = 1;
switch (mode) {
case 1:
scale = lineHeight;
break;
case 2:
// @ts-ignore
scale = window.height;
break;
}
x *= scale;
y *= scale;
z *= scale;
return { x, y, z, event };
}
onWheel(event) {
const normalized = this.normalizeMouseWheelEvent(event);
this.options.onWheel(normalized);
}
normalizePointerEvent(event) {
let result = { x: 0, y: 0, pageX: 0, pageY: 0, clientX: 0, clientY: 0, screenX: 0, screenY: 0, event };
switch (event.type) {
case 'wheel':
const wheel = this.normalizeMouseWheelEvent(event);
result.x = wheel.x;
result.y = wheel.y;
result.pageX = result.x;
result.pageY = result.y;
result.screenX = result.x;
result.screenY = result.y;
result.clientX = result.x;
result.clientY = result.y;
break;
case 'touchstart':
case 'touchmove':
case 'touchend':
case 'touchcancel':
result.x = event.changedTouches[0].screenX;
result.y = event.changedTouches[0].screenY;
result.pageX = event.changedTouches[0].pageX;
result.pageY = event.changedTouches[0].pageY;
result.screenX = event.changedTouches[0].screenX;
result.screenY = event.changedTouches[0].screenY;
result.clientX = event.changedTouches[0].clientX;
result.clientY = event.changedTouches[0].clientY;
break;
default:
result.x = event.x;
result.y = event.y;
result.pageX = event.pageX;
result.pageY = event.pageY;
result.screenX = event.screenX;
result.screenY = event.screenY;
result.clientX = event.clientX;
result.clientY = event.clientY;
break;
}
return result;
}
onPointerDown(event) {
if (event.type === 'mousedown' && event.button !== 0)
return;
this.moving = 'xy';
const normalized = this.normalizePointerEvent(event);
this.lastX = normalized.x;
this.lastY = normalized.y;
this.initialX = normalized.x;
this.initialY = normalized.y;
this.options.onDown(normalized);
}
handleX(normalized) {
let movementX = normalized.x - this.lastX;
this.lastY = normalized.y;
this.lastX = normalized.x;
return movementX;
}
handleY(normalized) {
let movementY = normalized.y - this.lastY;
this.lastY = normalized.y;
this.lastX = normalized.x;
return movementY;
}
onPointerMove(event) {
if (this.moving === '' || (event.type === 'mousemove' && event.button !== 0))
return;
const normalized = this.normalizePointerEvent(event);
if (this.options.axis === 'x|y') {
let movementX = 0, movementY = 0;
if (this.moving === 'x' ||
(this.moving === 'xy' && Math.abs(normalized.x - this.initialX) > this.options.threshold)) {
this.moving = 'x';
movementX = this.handleX(normalized);
}
if (this.moving === 'y' ||
(this.moving === 'xy' && Math.abs(normalized.y - this.initialY) > this.options.threshold)) {
this.moving = 'y';
movementY = this.handleY(normalized);
}
this.options.onMove({
movementX,
movementY,
x: normalized.x,
y: normalized.y,
initialX: this.initialX,
initialY: this.initialY,
lastX: this.lastX,
lastY: this.lastY,
event
});
}
else if (this.options.axis === 'xy') {
let movementX = 0, movementY = 0;
if (Math.abs(normalized.x - this.initialX) > this.options.threshold) {
movementX = this.handleX(normalized);
}
if (Math.abs(normalized.y - this.initialY) > this.options.threshold) {
movementY = this.handleY(normalized);
}
this.options.onMove({
movementX,
movementY,
x: normalized.x,
y: normalized.y,
initialX: this.initialX,
initialY: this.initialY,
lastX: this.lastX,
lastY: this.lastY,
event
});
}
else if (this.options.axis === 'x') {
if (this.moving === 'x' ||
(this.moving === 'xy' && Math.abs(normalized.x - this.initialX) > this.options.threshold)) {
this.moving = 'x';
this.options.onMove({
movementX: this.handleX(normalized),
movementY: 0,
initialX: this.initialX,
initialY: this.initialY,
lastX: this.lastX,
lastY: this.lastY,
event
});
}
}
else if (this.options.axis === 'y') {
let movementY = 0;
if (this.moving === 'y' ||
(this.moving === 'xy' && Math.abs(normalized.y - this.initialY) > this.options.threshold)) {
this.moving = 'y';
movementY = this.handleY(normalized);
}
this.options.onMove({
movementX: 0,
movementY,
x: normalized.x,
y: normalized.y,
initialX: this.initialX,
initialY: this.initialY,
lastX: this.lastX,
lastY: this.lastY,
event
});
}
}
onPointerUp(event) {
this.moving = '';
const normalized = this.normalizePointerEvent(event);
this.options.onUp({
movementX: 0,
movementY: 0,
x: normalized.x,
y: normalized.y,
initialX: this.initialX,
initialY: this.initialY,
lastX: this.lastX,
lastY: this.lastY,
event
});
this.lastY = 0;
this.lastX = 0;
}
destroy(element) {
if (pointerEventsExists) {
element.removeEventListener('pointerdown', this.onPointerDown);
document.removeEventListener('pointermove', this.onPointerMove);
document.removeEventListener('pointerup', this.onPointerUp);
}
else {
element.removeEventListener('mousedown', this.onPointerDown);
document.removeEventListener('mousemove', this.onPointerMove);
document.removeEventListener('mouseup', this.onPointerUp);
element.removeEventListener('touchstart', this.onPointerDown);
document.removeEventListener('touchmove', this.onPointerMove);
document.removeEventListener('touchend', this.onPointerUp);
document.removeEventListener('touchcancel', this.onPointerUp);
}
}
}
function getPublicComponentMethods(components, actionsByInstance, clone) {
return class PublicComponentMethods {
constructor(instance, vidoInstance, props = {}) {
this.instance = instance;
this.name = vidoInstance.name;
this.vidoInstance = vidoInstance;
this.props = props;
this.destroy = this.destroy.bind(this);
this.update = this.update.bind(this);
this.change = this.change.bind(this);
this.html = this.html.bind(this);
}
/**
* Destroy component
*/
destroy() {
if (this.vidoInstance.debug) {
console.groupCollapsed(`destroying component ${this.instance}`);
console.log(clone({ components: components.keys(), actionsByInstance }));
console.trace();
console.groupEnd();
}
return this.vidoInstance.destroyComponent(this.instance, this.vidoInstance);
}
/**
* Update template - trigger rendering process
*/
update() {
if (this.vidoInstance.debug) {
console.groupCollapsed(`updating component ${this.instance}`);
console.log(clone({ components: components.keys(), actionsByInstance }));
console.trace();
console.groupEnd();
}
return this.vidoInstance.updateTemplate(this.vidoInstance);
}
/**
* Change component input properties
* @param {any} newProps
*/
change(newProps, options) {
if (this.vidoInstance.debug) {
console.groupCollapsed(`changing component ${this.instance}`);
console.log(clone({ props: this.props, newProps: newProps, components: components.keys(), actionsByInstance }));
console.trace();
console.groupEnd();
}
components.get(this.instance).change(newProps, options);
}
/**
* Get component lit-html template
* @param {} templateProps
*/
html(templateProps = {}) {
const component = components.get(this.instance);
if (component) {
return component.update(templateProps, this.vidoInstance);
}
return undefined;
}
_getComponents() {
return components;
}
_getActions() {
return actionsByInstance;
}
};
}
function getActionsCollector(actionsByInstance) {
return class ActionsCollector extends Directive {
constructor(instance) {
super();
this.instance = instance;
}
set(actions, props) {
this.actions = actions;
this.props = props;
// props must be mutable! (do not do this -> {...props})
// because we will modify action props with onChange and can reuse existin instance
return this;
}
body(part) {
const element = part.committer.element;
for (const create of this.actions) {
if (typeof create !== 'undefined') {
let exists;
if (actionsByInstance.has(this.instance)) {
for (const action of actionsByInstance.get(this.instance)) {
if (action.componentAction.create === create && action.element === element) {
exists = action;
break;
}
}
}
if (!exists) {
// @ts-ignore
if (typeof element.vido !== 'undefined')
delete element.vido;
const componentAction = {
create,
update() { },
destroy() { }
};
const action = { instance: this.instance, componentAction, element, props: this.props };
let byInstance = [];
if (actionsByInstance.has(this.instance)) {
byInstance = actionsByInstance.get(this.instance);
}
byInstance.push(action);
actionsByInstance.set(this.instance, byInstance);
}
else {
exists.props = this.props;
}
}
}
}
};
}
function getInternalComponentMethods(components, actionsByInstance, clone) {
return class InternalComponentMethods {
constructor(instance, vidoInstance, renderFunction, content) {
this.instance = instance;
this.vidoInstance = vidoInstance;
this.renderFunction = renderFunction;
this.content = content;
}
destroy() {
var _a;
if (this.vidoInstance.debug) {
console.groupCollapsed(`component destroy method fired ${this.instance}`);
console.log(clone({
props: this.vidoInstance.props,
components: components.keys(),
destroyable: this.vidoInstance.destroyable,
actionsByInstance
}));
console.trace();
console.groupEnd();
}
if (typeof ((_a = this.content) === null || _a === void 0 ? void 0 : _a.destroy) === 'function') {
this.content.destroy();
}
for (const d of this.vidoInstance.destroyable) {
d();
}
this.vidoInstance.onChangeFunctions = [];
this.vidoInstance.destroyable = [];
this.vidoInstance.update();
}
update(props = {}) {
if (this.vidoInstance.debug) {
console.groupCollapsed(`component update method fired ${this.instance}`);
console.log(clone({ components: components.keys(), actionsByInstance }));
console.trace();
console.groupEnd();
}
return this.renderFunction(props);
}
change(changedProps, options = { leave: false }) {
const props = changedProps;
if (this.vidoInstance.debug) {
console.groupCollapsed(`component change method fired ${this.instance}`);
console.log(clone({
props,
components: components.keys(),
onChangeFunctions: this.vidoInstance.onChangeFunctions,
changedProps,
actionsByInstance
}));
console.trace();
console.groupEnd();
}
for (const fn of this.vidoInstance.onChangeFunctions) {
fn(changedProps, options);
}
}
};
}
/**
* Schedule - a throttle function that uses requestAnimationFrame to limit the rate at which a function is called.
*
* @param {function} fn
* @returns {function}
*/
function schedule(fn) {
let frameId = 0;
function wrapperFn(argument) {
if (frameId) {
return;
}
function executeFrame() {
frameId = 0;
fn.apply(undefined, [argument]);
}
frameId = requestAnimationFrame(executeFrame);
}
return wrapperFn;
}
/**
* Is object - helper function to determine if specified variable is an object
*
* @param {any} item
* @returns {boolean}
*/
function isObject(item) {
return item && typeof item === 'object' && !Array.isArray(item);
}
/**
* Merge deep - helper function which will merge objects recursively - creating brand new one - like clone
*
* @param {object} target
* @params {object} sources
* @returns {object}
*/
function mergeDeep(target, ...sources) {
const source = sources.shift();
if (isObject(target) && isObject(source)) {
for (const key in source) {
if (isObject(source[key])) {
if (typeof target[key] === 'undefined') {
target[key] = {};
}
target[key] = mergeDeep(target[key], source[key]);
}
else if (Array.isArray(source[key])) {
target[key] = [];
for (let item of source[key]) {
if (isObject(item)) {
target[key].push(mergeDeep({}, item));
continue;
}
target[key].push(item);
}
}
else {
target[key] = source[key];
}
}
}
if (!sources.length) {
return target;
}
return mergeDeep(target, ...sources);
}
/**
* Clone helper function
*
* @param source
* @returns {object} cloned source
*/
function clone(source) {
if (typeof source.actions !== 'undefined') {
const actns = source.actions.map((action) => {
const result = Object.assign({}, action);
const props = Object.assign({}, result.props);
delete props.state;
delete props.api;
delete result.element;
result.props = props;
return result;
});
source.actions = actns;
}
return mergeDeep({}, source);
}
/* dev imports
import { render, html, directive, svg, Part } from '../lit-html';
import { asyncAppend } from '../lit-html/directives/async-append';
import { asyncReplace } from '../lit-html/directives/async-replace';
import { cache } from '../lit-html/directives/cache';
import { classMap } from '../lit-html/directives/class-map';
import { guard } from '../lit-html/directives/guard';
import { ifDefined } from '../lit-html/directives/if-defined';
import { repeat } from '../lit-html/directives/repeat';
import { unsafeHTML } from '../lit-html/directives/unsafe-html';
import { until } from '../lit-html/directives/until';
import { Directive } from '../lit-html/lib/directive';
*/
/**
* Vido library
*
* @param {any} state - state management for the view (can be anything)
* @param {any} api - some api's or other globally available services
* @returns {object} vido instance
*/
function Vido(state, api) {
let componentId = 0;
const components = new Map();
let actionsByInstance = new Map();
let app, element;
let shouldUpdateCount = 0;
const resolved = Promise.resolve();
const additionalMethods = {};
const ActionsCollector = getActionsCollector(actionsByInstance);
class InstanceActionsCollector {
constructor(instance) {
this.instance = instance;
}
create(actions, props) {
const actionsInstance = new ActionsCollector(this.instance);
actionsInstance.set(actions, props);
return actionsInstance;
}
}
const PublicComponentMethods = getPublicComponentMethods(components, actionsByInstance, clone);
const InternalComponentMethods = getInternalComponentMethods(components, actionsByInstance, clone);
class vido {
constructor() {
this.destroyable = [];
this.onChangeFunctions = [];
this.debug = false;
this.state = state;
this.api = api;
this.lastProps = {};
this.html = html;
this.svg = svg;
this.directive = directive;
this.asyncAppend = asyncAppend;
this.asyncReplace = asyncReplace;
this.cache = cache;
this.classMap = classMap;
this.guard = guard;
this.ifDefined = ifDefined;
this.repeat = repeat;
this.unsafeHTML = unsafeHTML;
this.until = until;
this.schedule = schedule;
this.actionsByInstance = (componentActions, props) => { };
this.StyleMap = StyleMap;
this.Detach = Detach;
this.PointerAction = PointerAction;
this.Action = Action;
this._components = components;
this._actions = actionsByInstance;
this.reuseComponents = this.reuseComponents.bind(this);
this.onDestroy = this.onDestroy.bind(this);
this.onChange = this.onChange.bind(this);
this.update = this.update.bind(this);
for (const name in additionalMethods) {
this[name] = additionalMethods[name];
}
}
addMethod(name, body) {
additionalMethods[name] = body;
}
onDestroy(fn) {
this.destroyable.push(fn);
}
onChange(fn) {
this.onChangeFunctions.push(fn);
}
update(callback) {
return this.updateTemplate(callback);
}
/**
* Reuse existing components when your data was changed
*
* @param {array} currentComponents - array of components
* @param {array} dataArray - any data as array for each component
* @param {function} getProps - you can pass params to component from array item ( example: item=>({id:item.id}) )
* @param {function} component - what kind of components do you want to create?
* @param {boolean} leaveTail - leave last elements and do not destroy corresponding components
* @returns {array} of components (with updated/destroyed/created ones)
*/
reuseComponents(currentComponents, dataArray, getProps, component, leaveTail = true) {
const modified = [];
const currentLen = currentComponents.length;
const dataLen = dataArray.length;
let leave = false;
if (leaveTail && (dataArray === undefined || dataArray.length === 0)) {
leave = true;
}
let leaveStartingAt = 0;
if (currentLen < dataLen) {
let diff = dataLen - currentLen;
while (diff) {
const item = dataArray[dataLen - diff];
const newComponent = this.createComponent(component, getProps(item));
currentComponents.push(newComponent);
modified.push(newComponent.instance);
diff--;
}
}
else if (currentLen > dataLen) {
let diff = currentLen - dataLen;
if (leaveTail) {
leave = true;
leaveStartingAt = currentLen - diff;
}
while (diff) {
const index = currentLen - diff;
if (!leaveTail) {
modified.push(currentComponents[index].instance);
currentComponents[index].destroy();
}
diff--;
}
if (!leaveTail) {
currentComponents.length = dataLen;
}
}
let index = 0;
for (const component of currentComponents) {
const item = dataArray[index];
if (!modified.includes(component.instance)) {
component.change(getProps(item), { leave: leave && index >= leaveStartingAt });
}
index++;
}
}
createComponent(component, props = {}, content = null) {
const instance = component.name + ':' + componentId++;
let vidoInstance;
vidoInstance = new vido();
vidoInstance.instance = instance;
vidoInstance.name = component.name;
vidoInstance.Actions = new InstanceActionsCollector(instance);
const publicMethods = new PublicComponentMethods(instance, vidoInstance, props);
const internalMethods = new InternalComponentMethods(instance, vidoInstance, component(vidoInstance, props, content), content);
components.set(instance, internalMethods);
components.get(instance).change(props);
if (vidoInstance.debug) {
console.groupCollapsed(`component created ${instance}`);
console.log(clone({ props, components: components.keys(), actionsByInstance }));
console.trace();
console.groupEnd();
}
return publicMethods;
}
destroyComponent(instance, vidoInstance) {
if (vidoInstance.debug) {
console.groupCollapsed(`destroying component ${instance}...`);
console.log(clone({ components: components.keys(), actionsByInstance }));
console.trace();
console.groupEnd();
}
if (actionsByInstance.has(instance)) {
for (const action of actionsByInstance.get(instance)) {
if (typeof action.componentAction.destroy === 'function') {
action.componentAction.destroy(action.element, action.props);
}
}
}
actionsByInstance.delete(instance);
const component = components.get(instance);
component.update();
component.destroy();
components.delete(instance);
if (vidoInstance.debug) {
console.groupCollapsed(`component destroyed ${instance}`);
console.log(clone({ components: components.keys(), actionsByInstance }));
console.trace();
console.groupEnd();
}
}
executeActions() {
var _a, _b, _c;
for (const actions of actionsByInstance.values()) {
for (const action of actions) {
if (action.element.vido === undefined) {
const componentAction = action.componentAction;
const create = componentAction.create;
if (typeof create !== 'undefined') {
let result;
if (((_a = create.prototype) === null || _a === void 0 ? void 0 : _a.isAction) !== true &&
create.isAction === undefined &&
((_b = create.prototype) === null || _b === void 0 ? void 0 : _b.update) === undefined &&
((_c = create.prototype) === null || _c === void 0 ? void 0 : _c.destroy) === undefined) {
result = create(action.element, action.props);
}
else {
result = new create(action.element, action.props);
}
if (result !== undefined) {
if (typeof result === 'function') {
componentAction.destroy = result;
}
else {
if (typeof result.update === 'function') {
componentAction.update = result.update.bind(result);
}
if (typeof result.destroy === 'function') {
componentAction.destroy = result.destroy.bind(result);
}
}
}
}
}
else {
action.element.vido = action.props;
if (typeof action.componentAction.update === 'function') {
action.componentAction.update(action.element, action.props);
}
}
}
for (const action of actions) {
action.element.vido = action.props;
}
}
}
updateTemplate(callback) {
return new Promise((resolve) => {
const currentShouldUpdateCount = ++shouldUpdateCount;
const self = this;
function flush() {
if (currentShouldUpdateCount === shouldUpdateCount) {
shouldUpdateCount = 0;
self.render();
if (typeof callback === 'function')
callback();
resolve();
}
}
resolved.then(flush);
});
}
createApp(config) {
element = config.element;
const App = this.createComponent(config.component, config.props);
app = App.instance;
this.render();
return App;
}
render() {
const appComponent = components.get(app);
if (appComponent) {
render(appComponent.update(), element);
this.executeActions();
}
else if (element) {
element.remove();
}
}
}
return new vido();
}
Vido.prototype.lithtml = lithtml;
Vido.prototype.Action = Action;
Vido.prototype.Directive = Directive;
Vido.prototype.schedule = schedule;
Vido.prototype.Detach = Detach;
Vido.prototype.StyleMap = StyleMap;
Vido.prototype.PointerAction = PointerAction;
Vido.prototype.asyncAppend = asyncAppend;
Vido.prototype.asyncReplace = asyncReplace;
Vido.prototype.cache = cache;
Vido.prototype.classMap = classMap;
Vido.prototype.guard = guard;
Vido.prototype.ifDefined = ifDefined;
Vido.prototype.repeat = repeat;
Vido.prototype.unsafeHTML = unsafeHTML;
Vido.prototype.unti = until;
/**
* A collection of shims that provide minimal functionality of the ES6 collections.
*
* These implementations are not meant to be used outside of the ResizeObserver
* modules as they cover only a limited range of use cases.
*/
/* eslint-disable require-jsdoc, valid-jsdoc */
var MapShim = (function () {
if (typeof Map !== 'undefined') {
return Map;
}
/**
* Returns index in provided array that matches the specified key.
*
* @param {Array<Array>} arr
* @param {*} key
* @returns {number}
*/
function getIndex(arr, key) {
var result = -1;
arr.some(function (entry, index) {
if (entry[0] === key) {
result = index;
return true;
}
return false;
});
return result;
}
return /** @class */ (function () {
function class_1() {
this.__entries__ = [];
}
Object.defineProperty(class_1.prototype, "size", {
/**
* @returns {boolean}
*/
get: function () {
return this.__entries__.length;
},
enumerable: true,
configurable: true
});
/**
* @param {*} key
* @returns {*}
*/
class_1.prototype.get = function (key) {
var index = getIndex(this.__entries__, key);
var entry = this.__entries__[index];
return entry && entry[1];
};
/**
* @param {*} key
* @param {*} value
* @returns {void}
*/
class_1.prototype.set = function (key, value) {
var index = getIndex(this.__entries__, key);
if (~index) {
this.__entries__[index][1] = value;
}
else {
this.__entries__.push([key, value]);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.delete = function (key) {
var entries = this.__entries__;
var index = getIndex(entries, key);
if (~index) {
entries.splice(index, 1);
}
};
/**
* @param {*} key
* @returns {void}
*/
class_1.prototype.has = function (key) {
return !!~getIndex(this.__entries__, key);
};
/**
* @returns {void}
*/
class_1.prototype.clear = function () {
this.__entries__.splice(0);
};
/**
* @param {Function} callback
* @param {*} [ctx=null]
* @returns {void}
*/
class_1.prototype.forEach = function (callback, ctx) {
if (ctx === void 0) { ctx = null; }
for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
var entry = _a[_i];
callback.call(ctx, entry[1], entry[0]);
}
};
return class_1;
}());
})();
/**
* Detects whether window and document objects are available in current environment.
*/
var isBrowser$1 = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
// Returns global object of a current environment.
var global$1 = (function () {
if (typeof global !== 'undefined' && global.Math === Math) {
return global;
}
if (typeof self !== 'undefined' && self.Math === Math) {
return self;
}
if (typeof window !== 'undefined' && window.Math === Math) {
return window;
}
// eslint-disable-next-line no-new-func
return Function('return this')();
})();
/**
* A shim for the requestAnimationFrame which falls back to the setTimeout if
* first one is not supported.
*
* @returns {number} Requests' identifier.
*/
var requestAnimationFrame$1 = (function () {
if (typeof requestAnimationFrame === 'function') {
// It's required to use a bounded function because IE sometimes throws
// an "Invalid calling object" error if rAF is invoked without the global
// object on the left hand side.
return requestAnimationFrame.bind(global$1);
}
return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };
})();
// Defines minimum timeout before adding a trailing call.
var trailingTimeout = 2;
/**
* Creates a wrapper function which ensures that provided callback will be
* invoked only once during the specified delay period.
*
* @param {Function} callback - Function to be invoked after the delay period.
* @param {number} delay - Delay after which to invoke callback.
* @returns {Function}
*/
function throttle (callback, delay) {
var leadingCall = false, trailingCall = false, lastCallTime = 0;
/**
* Invokes the original callback function and schedules new invocation if
* the "proxy" was called during current request.
*
* @returns {void}
*/
function resolvePending() {
if (leadingCall) {
leadingCall = false;
callback();
}
if (trailingCall) {
proxy();
}
}
/**
* Callback invoked after the specified delay. It will further postpone
* invocation of the original function delegating it to the
* requestAnimationFrame.
*
* @returns {void}
*/
function timeoutCallback() {
requestAnimationFrame$1(resolvePending);
}
/**
* Schedules invocation of the original function.
*
* @returns {void}
*/
function proxy() {
var timeStamp = Date.now();
if (leadingCall) {
// Reject immediately following calls.
if (timeStamp - lastCallTime < trailingTimeout) {
return;
}
// Schedule new call to be in invoked when the pending one is resolved.
// This is important for "transitions" which never actually start
// immediately so there is a chance that we might miss one if change
// happens amids the pending invocation.
trailingCall = true;
}
else {
leadingCall = true;
trailingCall = false;
setTimeout(timeoutCallback, delay);
}
lastCallTime = timeStamp;
}
return proxy;
}
// Minimum delay before invoking the update of observers.
var REFRESH_DELAY = 20;
// A list of substrings of CSS properties used to find transition events that
// might affect dimensions of observed elements.
var transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
// Check if MutationObserver is available.
var mutationObserverSupported = typeof MutationObserver !== 'undefined';
/**
* Singleton controller class which handles updates of ResizeObserver instances.
*/
var ResizeObserverController = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserverController.
*
* @private
*/
function ResizeObserverController() {
/**
* Indicates whether DOM listeners have been added.
*
* @private {boolean}
*/
this.connected_ = false;
/**
* Tells that controller has subscribed for Mutation Events.
*
* @private {boolean}
*/
this.mutationEventsAdded_ = false;
/**
* Keeps reference to the instance of MutationObserver.
*
* @private {MutationObserver}
*/
this.mutationsObserver_ = null;
/**
* A list of connected observers.
*
* @private {Array<ResizeObserverSPI>}
*/
this.observers_ = [];
this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
}
/**
* Adds observer to observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be added.
* @returns {void}
*/
ResizeObserverController.prototype.addObserver = function (observer) {
if (!~this.observers_.indexOf(observer)) {
this.observers_.push(observer);
}
// Add listeners if they haven't been added yet.
if (!this.connected_) {
this.connect_();
}
};
/**
* Removes observer from observers list.
*
* @param {ResizeObserverSPI} observer - Observer to be removed.
* @returns {void}
*/
ResizeObserverController.prototype.removeObserver = function (observer) {
var observers = this.observers_;
var index = observers.indexOf(observer);
// Remove observer if it's present in registry.
if (~index) {
observers.splice(index, 1);
}
// Remove listeners if controller has no connected observers.
if (!observers.length && this.connected_) {
this.disconnect_();
}
};
/**
* Invokes the update of observers. It will continue running updates insofar
* it detects changes.
*
* @returns {void}
*/
ResizeObserverController.prototype.refresh = function () {
var changesDetected = this.updateObservers_();
// Continue running updates if changes have been detected as there might
// be future ones caused by CSS transitions.
if (changesDetected) {
this.refresh();
}
};
/**
* Updates every observer from observers list and notifies them of queued
* entries.
*
* @private
* @returns {boolean} Returns "true" if any observer has detected changes in
* dimensions of it's elements.
*/
ResizeObserverController.prototype.updateObservers_ = function () {
// Collect observers that have active observations.
var activeObservers = this.observers_.filter(function (observer) {
return observer.gatherActive(), observer.hasActive();
});
// Deliver notifications in a separate cycle in order to avoid any
// collisions between observers, e.g. when multiple instances of
// ResizeObserver are tracking the same element and the callback of one
// of them changes content dimensions of the observed target. Sometimes
// this may result in notifications being blocked for the rest of observers.
activeObservers.forEach(function (observer) { return observer.broadcastActive(); });
return activeObservers.length > 0;
};
/**
* Initializes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.connect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already added.
if (!isBrowser$1 || this.connected_) {
return;
}
// Subscription to the "Transitionend" event is used as a workaround for
// delayed transitions. This way it's possible to capture at least the
// final state of an element.
document.addEventListener('transitionend', this.onTransitionEnd_);
window.addEventListener('resize', this.refresh);
if (mutationObserverSupported) {
this.mutationsObserver_ = new MutationObserver(this.refresh);
this.mutationsObserver_.observe(document, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
}
else {
document.addEventListener('DOMSubtreeModified', this.refresh);
this.mutationEventsAdded_ = true;
}
this.connected_ = true;
};
/**
* Removes DOM listeners.
*
* @private
* @returns {void}
*/
ResizeObserverController.prototype.disconnect_ = function () {
// Do nothing if running in a non-browser environment or if listeners
// have been already removed.
if (!isBrowser$1 || !this.connected_) {
return;
}
document.removeEventListener('transitionend', this.onTransitionEnd_);
window.removeEventListener('resize', this.refresh);
if (this.mutationsObserver_) {
this.mutationsObserver_.disconnect();
}
if (this.mutationEventsAdded_) {
document.removeEventListener('DOMSubtreeModified', this.refresh);
}
this.mutationsObserver_ = null;
this.mutationEventsAdded_ = false;
this.connected_ = false;
};
/**
* "Transitionend" event handler.
*
* @private
* @param {TransitionEvent} event
* @returns {void}
*/
ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {
var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;
// Detect whether transition may affect dimensions of an element.
var isReflowProperty = transitionKeys.some(function (key) {
return !!~propertyName.indexOf(key);
});
if (isReflowProperty) {
this.refresh();
}
};
/**
* Returns instance of the ResizeObserverController.
*
* @returns {ResizeObserverController}
*/
ResizeObserverController.getInstance = function () {
if (!this.instance_) {
this.instance_ = new ResizeObserverController();
}
return this.instance_;
};
/**
* Holds reference to the controller's instance.
*
* @private {ResizeObserverController}
*/
ResizeObserverController.instance_ = null;
return ResizeObserverController;
}());
/**
* Defines non-writable/enumerable properties of the provided target object.
*
* @param {Object} target - Object for which to define properties.
* @param {Object} props - Properties to be defined.
* @returns {Object} Target object.
*/
var defineConfigurable = (function (target, props) {
for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
var key = _a[_i];
Object.defineProperty(target, key, {
value: props[key],
enumerable: false,
writable: false,
configurable: true
});
}
return target;
});
/**
* Returns the global object associated with provided element.
*
* @param {Object} target
* @returns {Object}
*/
var getWindowOf = (function (target) {
// Assume that the element is an instance of Node, which means that it
// has the "ownerDocument" property from which we can retrieve a
// corresponding global object.
var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
// Return the local global object if it's not possible extract one from
// provided element.
return ownerGlobal || global$1;
});
// Placeholder of an empty content rectangle.
var emptyRect = createRectInit(0, 0, 0, 0);
/**
* Converts provided string to a number.
*
* @param {number|string} value
* @returns {number}
*/
function toFloat(value) {
return parseFloat(value) || 0;
}
/**
* Extracts borders size from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @param {...string} positions - Borders positions (top, right, ...)
* @returns {number}
*/
function getBordersSize(styles) {
var positions = [];
for (var _i = 1; _i < arguments.length; _i++) {
positions[_i - 1] = arguments[_i];
}
return positions.reduce(function (size, position) {
var value = styles['border-' + position + '-width'];
return size + toFloat(value);
}, 0);
}
/**
* Extracts paddings sizes from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @returns {Object} Paddings box.
*/
function getPaddings(styles) {
var positions = ['top', 'right', 'bottom', 'left'];
var paddings = {};
for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
var position = positions_1[_i];
var value = styles['padding-' + position];
paddings[position] = toFloat(value);
}
return paddings;
}
/**
* Calculates content rectangle of provided SVG element.
*
* @param {SVGGraphicsElement} target - Element content rectangle of which needs
* to be calculated.
* @returns {DOMRectInit}
*/
function getSVGContentRect(target) {
var bbox = target.getBBox();
return createRectInit(0, 0, bbox.width, bbox.height);
}
/**
* Calculates content rectangle of provided HTMLElement.
*
* @param {HTMLElement} target - Element for which to calculate the content rectangle.
* @returns {DOMRectInit}
*/
function getHTMLElementContentRect(target) {
// Client width & height properties can't be
// used exclusively as they provide rounded values.
var clientWidth = target.clientWidth, clientHeight = target.clientHeight;
// By this condition we can catch all non-replaced inline, hidden and
// detached elements. Though elements with width & height properties less
// than 0.5 will be discarded as well.
//
// Without it we would need to implement separate methods for each of
// those cases and it's not possible to perform a precise and performance
// effective test for hidden elements. E.g. even jQuery's ':visible' filter
// gives wrong results for elements with width & height less than 0.5.
if (!clientWidth && !clientHeight) {
return emptyRect;
}
var styles = getWindowOf(target).getComputedStyle(target);
var paddings = getPaddings(styles);
var horizPad = paddings.left + paddings.right;
var vertPad = paddings.top + paddings.bottom;
// Computed styles of width & height are being used because they are the
// only dimensions available to JS that contain non-rounded values. It could
// be possible to utilize the getBoundingClientRect if only it's data wasn't
// affected by CSS transformations let alone paddings, borders and scroll bars.
var width = toFloat(styles.width), height = toFloat(styles.height);
// Width & height include paddings and borders when the 'border-box' box
// model is applied (except for IE).
if (styles.boxSizing === 'border-box') {
// Following conditions are required to handle Internet Explorer which
// doesn't include paddings and borders to computed CSS dimensions.
//
// We can say that if CSS dimensions + paddings are equal to the "client"
// properties then it's either IE, and thus we don't need to subtract
// anything, or an element merely doesn't have paddings/borders styles.
if (Math.round(width + horizPad) !== clientWidth) {
width -= getBordersSize(styles, 'left', 'right') + horizPad;
}
if (Math.round(height + vertPad) !== clientHeight) {
height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
}
}
// Following steps can't be applied to the document's root element as its
// client[Width/Height] properties represent viewport area of the window.
// Besides, it's as well not necessary as the <html> itself neither has
// rendered scroll bars nor it can be clipped.
if (!isDocumentElement(target)) {
// In some browsers (only in Firefox, actually) CSS width & height
// include scroll bars size which can be removed at this step as scroll
// bars are the only difference between rounded dimensions + paddings
// and "client" properties, though that is not always true in Chrome.
var vertScrollbar = Math.round(width + horizPad) - clientWidth;
var horizScrollbar = Math.round(height + vertPad) - clientHeight;
// Chrome has a rather weird rounding of "client" properties.
// E.g. for an element with content width of 314.2px it sometimes gives
// the client width of 315px and for the width of 314.7px it may give
// 314px. And it doesn't happen all the time. So just ignore this delta
// as a non-relevant.
if (Math.abs(vertScrollbar) !== 1) {
width -= vertScrollbar;
}
if (Math.abs(horizScrollbar) !== 1) {
height -= horizScrollbar;
}
}
return createRectInit(paddings.left, paddings.top, width, height);
}
/**
* Checks whether provided element is an instance of the SVGGraphicsElement.
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
var isSVGGraphicsElement = (function () {
// Some browsers, namely IE and Edge, don't have the SVGGraphicsElement
// interface.
if (typeof SVGGraphicsElement !== 'undefined') {
return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };
}
// If it's so, then check that element is at least an instance of the
// SVGElement and that it has the "getBBox" method.
// eslint-disable-next-line no-extra-parens
return function (target) { return (target instanceof getWindowOf(target).SVGElement &&
typeof target.getBBox === 'function'); };
})();
/**
* Checks whether provided element is a document element (<html>).
*
* @param {Element} target - Element to be checked.
* @returns {boolean}
*/
function isDocumentElement(target) {
return target === getWindowOf(target).document.documentElement;
}
/**
* Calculates an appropriate content rectangle for provided html or svg element.
*
* @param {Element} target - Element content rectangle of which needs to be calculated.
* @returns {DOMRectInit}
*/
function getContentRect(target) {
if (!isBrowser$1) {
return emptyRect;
}
if (isSVGGraphicsElement(target)) {
return getSVGContentRect(target);
}
return getHTMLElementContentRect(target);
}
/**
* Creates rectangle with an interface of the DOMRectReadOnly.
* Spec: https://drafts.fxtf.org/geometry/#domrectreadonly
*
* @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.
* @returns {DOMRectReadOnly}
*/
function createReadOnlyRect(_a) {
var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
// If DOMRectReadOnly is available use it as a prototype for the rectangle.
var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
var rect = Object.create(Constr.prototype);
// Rectangle's properties are not writable and non-enumerable.
defineConfigurable(rect, {
x: x, y: y, width: width, height: height,
top: y,
right: x + width,
bottom: height + y,
left: x
});
return rect;
}
/**
* Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.
* Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit
*
* @param {number} x - X coordinate.
* @param {number} y - Y coordinate.
* @param {number} width - Rectangle's width.
* @param {number} height - Rectangle's height.
* @returns {DOMRectInit}
*/
function createRectInit(x, y, width, height) {
return { x: x, y: y, width: width, height: height };
}
/**
* Class that is responsible for computations of the content rectangle of
* provided DOM element and for keeping track of it's changes.
*/
var ResizeObservation = /** @class */ (function () {
/**
* Creates an instance of ResizeObservation.
*
* @param {Element} target - Element to be observed.
*/
function ResizeObservation(target) {
/**
* Broadcasted width of content rectangle.
*
* @type {number}
*/
this.broadcastWidth = 0;
/**
* Broadcasted height of content rectangle.
*
* @type {number}
*/
this.broadcastHeight = 0;
/**
* Reference to the last observed content rectangle.
*
* @private {DOMRectInit}
*/
this.contentRect_ = createRectInit(0, 0, 0, 0);
this.target = target;
}
/**
* Updates content rectangle and tells whether it's width or height properties
* have changed since the last broadcast.
*
* @returns {boolean}
*/
ResizeObservation.prototype.isActive = function () {
var rect = getContentRect(this.target);
this.contentRect_ = rect;
return (rect.width !== this.broadcastWidth ||
rect.height !== this.broadcastHeight);
};
/**
* Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
* from the corresponding properties of the last observed content rectangle.
*
* @returns {DOMRectInit} Last observed content rectangle.
*/
ResizeObservation.prototype.broadcastRect = function () {
var rect = this.contentRect_;
this.broadcastWidth = rect.width;
this.broadcastHeight = rect.height;
return rect;
};
return ResizeObservation;
}());
var ResizeObserverEntry = /** @class */ (function () {
/**
* Creates an instance of ResizeObserverEntry.
*
* @param {Element} target - Element that is being observed.
* @param {DOMRectInit} rectInit - Data of the element's content rectangle.
*/
function ResizeObserverEntry(target, rectInit) {
var contentRect = createReadOnlyRect(rectInit);
// According to the specification following properties are not writable
// and are also not enumerable in the native implementation.
//
// Property accessors are not being used as they'd require to define a
// private WeakMap storage which may cause memory leaks in browsers that
// don't support this type of collections.
defineConfigurable(this, { target: target, contentRect: contentRect });
}
return ResizeObserverEntry;
}());
var ResizeObserverSPI = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback function that is invoked
* when one of the observed elements changes it's content dimensions.
* @param {ResizeObserverController} controller - Controller instance which
* is responsible for the updates of observer.
* @param {ResizeObserver} callbackCtx - Reference to the public
* ResizeObserver instance which will be passed to callback function.
*/
function ResizeObserverSPI(callback, controller, callbackCtx) {
/**
* Collection of resize observations that have detected changes in dimensions
* of elements.
*
* @private {Array<ResizeObservation>}
*/
this.activeObservations_ = [];
/**
* Registry of the ResizeObservation instances.
*
* @private {Map<Element, ResizeObservation>}
*/
this.observations_ = new MapShim();
if (typeof callback !== 'function') {
throw new TypeError('The callback provided as parameter 1 is not a function.');
}
this.callback_ = callback;
this.controller_ = controller;
this.callbackCtx_ = callbackCtx;
}
/**
* Starts observing provided element.
*
* @param {Element} target - Element to be observed.
* @returns {void}
*/
ResizeObserverSPI.prototype.observe = function (target) {
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === 'undefined' || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is already being observed.
if (observations.has(target)) {
return;
}
observations.set(target, new ResizeObservation(target));
this.controller_.addObserver(this);
// Force the update of observations.
this.controller_.refresh();
};
/**
* Stops observing provided element.
*
* @param {Element} target - Element to stop observing.
* @returns {void}
*/
ResizeObserverSPI.prototype.unobserve = function (target) {
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Do nothing if current environment doesn't have the Element interface.
if (typeof Element === 'undefined' || !(Element instanceof Object)) {
return;
}
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var observations = this.observations_;
// Do nothing if element is not being observed.
if (!observations.has(target)) {
return;
}
observations.delete(target);
if (!observations.size) {
this.controller_.removeObserver(this);
}
};
/**
* Stops observing all elements.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.disconnect = function () {
this.clearActive();
this.observations_.clear();
this.controller_.removeObserver(this);
};
/**
* Collects observation instances the associated element of which has changed
* it's content rectangle.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.gatherActive = function () {
var _this = this;
this.clearActive();
this.observations_.forEach(function (observation) {
if (observation.isActive()) {
_this.activeObservations_.push(observation);
}
});
};
/**
* Invokes initial callback function with a list of ResizeObserverEntry
* instances collected from active resize observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.broadcastActive = function () {
// Do nothing if observer doesn't have active observations.
if (!this.hasActive()) {
return;
}
var ctx = this.callbackCtx_;
// Create ResizeObserverEntry instance for every active observation.
var entries = this.activeObservations_.map(function (observation) {
return new ResizeObserverEntry(observation.target, observation.broadcastRect());
});
this.callback_.call(ctx, entries, ctx);
this.clearActive();
};
/**
* Clears the collection of active observations.
*
* @returns {void}
*/
ResizeObserverSPI.prototype.clearActive = function () {
this.activeObservations_.splice(0);
};
/**
* Tells whether observer has active observations.
*
* @returns {boolean}
*/
ResizeObserverSPI.prototype.hasActive = function () {
return this.activeObservations_.length > 0;
};
return ResizeObserverSPI;
}());
// Registry of internal observers. If WeakMap is not available use current shim
// for the Map collection as it has all required methods and because WeakMap
// can't be fully polyfilled anyway.
var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();
/**
* ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
* exposing only those methods and properties that are defined in the spec.
*/
var ResizeObserver = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback that is invoked when
* dimensions of the observed elements change.
*/
function ResizeObserver(callback) {
if (!(this instanceof ResizeObserver)) {
throw new TypeError('Cannot call a class as a function.');
}
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
var controller = ResizeObserverController.getInstance();
var observer = new ResizeObserverSPI(callback, controller, this);
observers.set(this, observer);
}
return ResizeObserver;
}());
// Expose public methods of ResizeObserver.
[
'observe',
'unobserve',
'disconnect'
].forEach(function (method) {
ResizeObserver.prototype[method] = function () {
var _a;
return (_a = observers.get(this))[method].apply(_a, arguments);
};
});
var index = (function () {
// Export existing implementation if available.
if (typeof global$1.ResizeObserver !== 'undefined') {
return global$1.ResizeObserver;
}
return ResizeObserver;
})();
/**
* Main component
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0 (https://github.com/neuronetio/gantt-schedule-timeline-calendar/blob/master/LICENSE)
* @link https://github.com/neuronetio/gantt-schedule-timeline-calendar
*/
function Main(vido, props = {}) {
const { api, state, onDestroy, Actions, update, createComponent, html, StyleMap, schedule } = vido;
const componentName = api.name;
// Initialize plugins
onDestroy(state.subscribe('config.plugins', plugins => {
if (typeof plugins !== 'undefined' && Array.isArray(plugins)) {
for (const initializePlugin of plugins) {
const destroyPlugin = initializePlugin(vido);
if (typeof destroyPlugin === 'function') {
onDestroy(destroyPlugin);
}
else if (destroyPlugin && destroyPlugin.hasOwnProperty('destroy')) {
destroyPlugin.destroy();
}
}
}
}));
const componentSubs = [];
let ListComponent;
componentSubs.push(state.subscribe('config.components.List', value => (ListComponent = value)));
let ChartComponent;
componentSubs.push(state.subscribe('config.components.Chart', value => (ChartComponent = value)));
const List = createComponent(ListComponent);
onDestroy(List.destroy);
const Chart = createComponent(ChartComponent);
onDestroy(Chart.destroy);
onDestroy(() => {
componentSubs.forEach(unsub => unsub());
});
let wrapper;
onDestroy(state.subscribe('config.wrappers.Main', value => (wrapper = value)));
const componentActions = api.getActions('main');
let className, classNameVerticalScroll;
const styleMap = new StyleMap({}), verticalScrollStyleMap = new StyleMap({}), verticalScrollAreaStyleMap = new StyleMap({});
let verticalScrollBarElement;
let rowsHeight = 0;
let resizerActive = false;
/**
* Update class names
* @param {object} classNames
*/
const updateClassNames = classNames => {
const config = state.get('config');
className = api.getClass(componentName, { config });
if (resizerActive) {
className += ` ${componentName}__list-column-header-resizer--active`;
}
classNameVerticalScroll = api.getClass('vertical-scroll', { config });
update();
};
onDestroy(state.subscribe('config.classNames', updateClassNames));
/**
* Height change
*/
function heightChange() {
const config = state.get('config');
const scrollBarHeight = state.get('_internal.scrollBarHeight');
const height = config.height - config.headerHeight - scrollBarHeight;
state.update('_internal.height', height);
styleMap.style['--height'] = config.height + 'px';
verticalScrollStyleMap.style.height = height + 'px';
verticalScrollStyleMap.style.width = scrollBarHeight + 'px';
verticalScrollStyleMap.style['margin-top'] = config.headerHeight + 'px';
update();
}
onDestroy(state.subscribeAll(['config.height', 'config.headerHeight', '_internal.scrollBarHeight'], heightChange));
/**
* Resizer active change
* @param {boolean} active
*/
function resizerActiveChange(active) {
resizerActive = active;
className = api.getClass(api.name);
if (resizerActive) {
className += ` ${api.name}__list-column-header-resizer--active`;
}
update();
}
onDestroy(state.subscribe('_internal.list.columns.resizer.active', resizerActiveChange));
/**
* Generate tree
* @param {object} bulk
* @param {object} eventInfo
*/
function generateTree(bulk, eventInfo) {
if (state.get('_internal.flatTreeMap').length && eventInfo.type === 'subscribe') {
return;
}
const configRows = state.get('config.list.rows');
const rows = [];
for (const rowId in configRows) {
rows.push(configRows[rowId]);
}
api.fillEmptyRowValues(rows);
const configItems = state.get('config.chart.items');
const items = [];
for (const itemId in configItems) {
items.push(configItems[itemId]);
}
api.prepareItems(items);
const treeMap = api.makeTreeMap(rows, items);
state.update('_internal.treeMap', treeMap);
const flatTreeMapById = api.getFlatTreeMapById(treeMap);
state.update('_internal.flatTreeMapById', flatTreeMapById);
const flatTreeMap = api.flattenTreeMap(treeMap);
state.update('_internal.flatTreeMap', flatTreeMap);
update();
}
onDestroy(state.subscribeAll(['config.list.rows;', 'config.chart.items;'], generateTree));
onDestroy(state.subscribeAll(['config.list.rows.*.parentId', 'config.chart.items.*.rowId'], generateTree, { bulk: true }));
function prepareExpanded() {
const configRows = state.get('config.list.rows');
const rowsWithParentsExpanded = api.getRowsFromIds(api.getRowsWithParentsExpanded(state.get('_internal.flatTreeMap'), state.get('_internal.flatTreeMapById'), configRows), configRows);
rowsHeight = api.getRowsHeight(rowsWithParentsExpanded);
state.update('_internal.list.rowsHeight', rowsHeight);
state.update('_internal.list.rowsWithParentsExpanded', rowsWithParentsExpanded);
update();
}
onDestroy(state.subscribeAll(['config.list.rows.*.expanded', '_internal.treeMap;', 'config.list.rows.*.height'], prepareExpanded, { bulk: true }));
/**
* Generate visible rows
*/
function generateVisibleRowsAndItems() {
const { visibleRows, compensation } = api.getVisibleRowsAndCompensation(state.get('_internal.list.rowsWithParentsExpanded'));
const smoothScroll = state.get('config.scroll.smooth');
const currentVisibleRows = state.get('_internal.list.visibleRows');
let shouldUpdate = true;
state.update('config.scroll.compensation.y', smoothScroll ? -compensation : 0);
if (visibleRows.length !== currentVisibleRows.length) {
shouldUpdate = true;
}
else if (visibleRows.length) {
shouldUpdate = visibleRows.some((row, index) => {
if (typeof currentVisibleRows[index] === 'undefined') {
return true;
}
return row.id !== currentVisibleRows[index].id;
});
}
if (shouldUpdate) {
state.update('_internal.list.visibleRows', visibleRows);
}
const visibleItems = [];
for (const row of visibleRows) {
for (const item of row._internal.items) {
visibleItems.push(item);
}
}
state.update('_internal.chart.visibleItems', visibleItems);
update();
}
onDestroy(state.subscribeAll(['_internal.list.rowsWithParentsExpanded;', 'config.scroll.top', 'config.chart.items'], generateVisibleRowsAndItems, { bulk: true }));
let elementScrollTop = 0;
function onVisibleRowsChange() {
const top = state.get('config.scroll.top');
verticalScrollAreaStyleMap.style.width = '1px';
verticalScrollAreaStyleMap.style.height = rowsHeight + 'px';
if (elementScrollTop !== top && verticalScrollBarElement) {
elementScrollTop = top;
verticalScrollBarElement.scrollTop = top;
}
update();
}
onDestroy(state.subscribe('_internal.list.visibleRows;', onVisibleRowsChange));
/**
* Generate and add period dates
* @param {string} period
* @param {object} internalTime
*/
const generatePeriodDates = (period, internalTime) => {
const dates = [];
let leftGlobal = internalTime.leftGlobal;
const timePerPixel = internalTime.timePerPixel;
let startOfLeft = api.time
.date(leftGlobal)
.startOf(period)
.valueOf();
if (startOfLeft < leftGlobal)
startOfLeft = leftGlobal;
let sub = leftGlobal - startOfLeft;
let subPx = sub / timePerPixel;
let leftPx = 0;
const diff = Math.ceil(api.time
.date(internalTime.rightGlobal)
.endOf(period)
.diff(api.time.date(leftGlobal).startOf(period), period, true));
for (let i = 0; i < diff; i++) {
const date = {
sub,
subPx,
leftGlobal,
rightGlobal: api.time
.date(leftGlobal)
.endOf(period)
.valueOf(),
width: 0,
leftPx: 0,
rightPx: 0,
period
};
date.width = (date.rightGlobal - date.leftGlobal + sub) / timePerPixel;
date.leftPx = leftPx;
leftPx += date.width;
date.rightPx = leftPx;
dates.push(date);
leftGlobal = date.rightGlobal + 1;
sub = 0;
subPx = 0;
}
return dates;
};
function triggerLoadedEvent() {
if (state.get('_internal.loadedEventTriggered'))
return;
Promise.resolve().then(() => {
const element = state.get('_internal.elements.main');
const parent = element.parentNode;
const event = new Event('gstc-loaded');
element.dispatchEvent(event);
parent.dispatchEvent(event);
});
state.update('_internal.loadedEventTriggered', true);
}
function limitGlobalAndSetCenter(time) {
if (time.leftGlobal < time.finalFrom)
time.leftGlobal = time.finalFrom;
if (time.rightGlobal > time.finalTo)
time.rightGlobal = time.finalTo;
time.centerGlobal = time.leftGlobal + Math.round((time.rightGlobal - time.leftGlobal) / 2);
return time;
}
function guessPeriod(time, calendar) {
if (!time.zoom)
return time;
for (const level of calendar.levels) {
const formatting = level.formats.find(format => +time.zoom <= +format.zoomTo);
if (formatting && level.main) {
time.period = formatting.period;
}
}
return time;
}
function updateLevels(time, calendar) {
time.levels = [];
let index = 0;
for (const level of calendar.levels) {
const formatting = level.formats.find(format => +time.zoom <= +format.zoomTo);
if (level.main) {
time.format = formatting;
time.level = index;
}
if (formatting) {
time.levels.push(generatePeriodDates(formatting.period, time));
}
index++;
}
}
let working = false;
function recalculateTimes(reason) {
if (working)
return;
working = true;
const configTime = state.get('config.chart.time');
const chartWidth = state.get('_internal.chart.dimensions.width');
const calendar = state.get('config.chart.calendar');
const oldTime = Object.assign({}, state.get('_internal.chart.time'));
let time = api.mergeDeep({}, configTime);
if ((!time.from || !time.to) && !Object.keys(state.get('config.chart.items')).length) {
return;
}
let mainLevel = calendar.levels.find(level => level.main);
if (!mainLevel) {
throw new Error('Main calendar level not found (config.chart.calendar.levels).');
}
if (!time.calculatedZoomMode) {
if (time.period !== oldTime.period) {
let periodFormat = mainLevel.formats.find(format => format.period === time.period && format.default);
if (periodFormat) {
time.zoom = periodFormat.zoomTo;
}
}
guessPeriod(time, calendar);
}
// If _internal.chart.time (leftGlobal, centerGlobal, rightGlobal, from , to) was changed
// then we need to apply those values - no recalculation is needed (values form plugins etc)
const justApply = ['leftGlobal', 'centerGlobal', 'rightGlobal', 'from', 'to'].includes(reason.name);
if (justApply) {
time = Object.assign(Object.assign({}, time), { leftGlobal: configTime.leftGlobal, centerGlobal: configTime.centerGlobal, rightGlobal: configTime.rightGlobal, from: configTime.from, to: configTime.to });
}
let scrollLeft = 0;
// source of everything = time.timePerPixel
if (time.calculatedZoomMode && chartWidth) {
time.finalFrom = time.from;
time.finalTo = time.to;
time.totalViewDurationMs = api.time.date(time.finalTo).diff(time.finalFrom, 'milliseconds');
time.timePerPixel = time.totalViewDurationMs / chartWidth;
time.zoom = Math.log(time.timePerPixel) / Math.log(2);
guessPeriod(time, calendar);
time.totalViewDurationPx = Math.round(time.totalViewDurationMs / time.timePerPixel);
time.leftGlobal = time.from;
time.rightGlobal = time.to;
}
else {
time.timePerPixel = Math.pow(2, time.zoom);
time = api.time.recalculateFromTo(time);
time.totalViewDurationMs = api.time.date(time.finalTo).diff(time.finalFrom, 'milliseconds');
time.totalViewDurationPx = Math.round(time.totalViewDurationMs / time.timePerPixel);
scrollLeft = state.get('config.scroll.left');
}
if (!justApply && !time.calculatedZoomMode) {
// If time.zoom (or time.period) has been changed
// then we need to recalculate basing on time.centerGlobal
// and update scroll left
// if not then we need to calculate from scroll left
// because change was triggered by scroll
if (time.zoom !== oldTime.zoom && oldTime.centerGlobal) {
const chartWidthInMs = chartWidth * time.timePerPixel;
const halfChartInMs = Math.round(chartWidthInMs / 2);
time.leftGlobal = oldTime.centerGlobal - halfChartInMs;
time.rightGlobal = time.leftGlobal + chartWidthInMs;
scrollLeft = (time.leftGlobal - time.finalFrom) / time.timePerPixel;
scrollLeft = api.limitScrollLeft(time.totalViewDurationPx, chartWidth, scrollLeft);
}
else {
time.leftGlobal = scrollLeft * time.timePerPixel + time.finalFrom;
time.rightGlobal = time.leftGlobal + chartWidth * time.timePerPixel;
}
}
limitGlobalAndSetCenter(time);
time.leftInner = time.leftGlobal - time.finalFrom;
time.rightInner = time.rightGlobal - time.finalFrom;
time.leftPx = time.leftInner / time.timePerPixel;
time.rightPx = time.rightInner / time.timePerPixel;
updateLevels(time, calendar);
let xCompensation = 0;
if (time.levels[time.level] && time.levels[time.level].length !== 0) {
xCompensation = time.levels[time.level][0].subPx;
}
state.update(`_internal.chart.time`, time);
state.update('config.scroll.compensation.x', xCompensation);
state.update('config.chart.time', configTime => {
configTime.zoom = time.zoom;
configTime.period = time.format.period;
configTime.leftGlobal = time.leftGlobal;
configTime.centerGlobal = time.centerGlobal;
configTime.rightGlobal = time.rightGlobal;
configTime.from = time.from;
configTime.to = time.to;
configTime.finalFrom = time.finalFrom;
configTime.finalTo = time.finalTo;
return configTime;
});
state.update('config.scroll.left', scrollLeft);
update().then(() => {
if (!state.get('_internal.loaded.time')) {
state.update('_internal.loaded.time', true);
}
});
working = false;
}
const recalculationTriggerCache = {
initialized: false,
zoom: 0,
period: '',
scrollLeft: 0,
chartWidth: 0,
leftGlobal: 0,
centerGlobal: 0,
rightGlobal: 0,
from: 0,
to: 0
};
function recalculationIsNeeded() {
const configTime = state.get('config.chart.time');
const scrollLeft = state.get('config.scroll.left');
const chartWidth = state.get('_internal.chart.dimensions.width');
const cache = Object.assign({}, recalculationTriggerCache);
recalculationTriggerCache.zoom = configTime.zoom;
recalculationTriggerCache.period = configTime.period;
recalculationTriggerCache.leftGlobal = configTime.leftGlobal;
recalculationTriggerCache.centerGlobal = configTime.centerGlobal;
recalculationTriggerCache.rightGlobal = configTime.rightGlobal;
recalculationTriggerCache.from = configTime.from;
recalculationTriggerCache.to = configTime.to;
recalculationTriggerCache.scrollLeft = scrollLeft;
recalculationTriggerCache.chartWidth = chartWidth;
if (!recalculationTriggerCache.initialized) {
recalculationTriggerCache.initialized = true;
return { name: 'all' };
}
if (configTime.zoom !== cache.zoom)
return { name: 'zoom', oldValue: cache.zoom, newValue: configTime.zoom };
if (configTime.period !== cache.period)
return { name: 'period', oldValue: cache.period, newValue: configTime.period };
if (configTime.leftGlobal !== cache.leftGlobal)
return { name: 'leftGlobal', oldValue: cache.leftGlobal, newValue: configTime.leftGlobal };
if (configTime.centerGlobal !== cache.centerGlobal)
return { name: 'centerGlobal', oldValue: cache.centerGlobal, newValue: configTime.centerGlobal };
if (configTime.rightGlobal !== cache.rightGlobal)
return { name: 'rightGlobal', oldValue: cache.rightGlobal, newValue: configTime.rightGlobal };
if (configTime.from !== cache.from)
return { name: 'from', oldValue: cache.from, newValue: configTime.from };
if (configTime.to !== cache.to)
return { name: 'to', oldValue: cache.to, newValue: configTime.to };
if (scrollLeft !== cache.scrollLeft)
return { name: 'scroll', oldValue: cache.scrollLeft, newValue: scrollLeft };
if (chartWidth !== cache.chartWidth)
return { name: 'chartWidth', oldValue: cache.chartWidth, newValue: chartWidth };
return false;
}
onDestroy(state.subscribeAll(['config.chart.time', 'config.chart.calendar.levels', 'config.scroll.left', '_internal.chart.dimensions.width'], () => {
let reason = recalculationIsNeeded();
if (reason)
recalculateTimes(reason);
}, { bulk: true }));
// When time.from and time.to is not specified and items are reloaded;
// check if item is outside current time scope and extend it if needed
onDestroy(state.subscribe('config.chart.items.*.time', items => {
recalculateTimes({ name: 'items' });
}, { bulk: true }));
if (state.get('config.usageStatistics') === true && !localStorage.getItem('gstcus')) {
try {
fetch('https://gstc-us.neuronet.io/', {
method: 'POST',
cache: 'force-cache',
mode: 'cors',
credentials: 'omit',
redirect: 'follow',
body: JSON.stringify({ location: { href: location.href, host: location.host } })
}).catch(e => { });
localStorage.setItem('gstcus', 'true');
}
catch (e) { }
}
let scrollTop = 0;
let propagate = true;
onDestroy(state.subscribe('config.scroll.propagate', prpgt => (propagate = prpgt)));
/**
* Handle scroll Event
* @param {MouseEvent} event
*/
function handleEvent(event) {
if (!propagate) {
event.stopPropagation();
event.preventDefault();
}
if (event.type === 'scroll') {
// @ts-ignore
const top = event.target.scrollTop;
/**
* Handle on scroll event
* @param {object} scroll
* @returns {object} scroll
*/
const handleOnScroll = scroll => {
scroll.top = top;
scrollTop = scroll.top;
const scrollInner = state.get('_internal.elements.vertical-scroll-inner');
if (scrollInner) {
const scrollHeight = scrollInner.clientHeight;
scroll.percent.top = scroll.top / scrollHeight;
}
return scroll;
};
if (scrollTop !== top)
state.update('config.scroll', handleOnScroll, {
only: ['top', 'percent.top']
});
}
}
const onScroll = {
handleEvent,
passive: false,
capture: false
};
const dimensions = { width: 0, height: 0 };
let ro;
/**
* Resize action
* @param {Element} element
*/
class ResizeAction {
constructor(element) {
if (!ro) {
ro = new index((entries, observer) => {
const width = element.clientWidth;
const height = element.clientHeight;
if (dimensions.width !== width || dimensions.height !== height) {
dimensions.width = width;
dimensions.height = height;
state.update('_internal.dimensions', dimensions);
}
});
ro.observe(element);
state.update('_internal.elements.main', element);
}
}
update() { }
destroy(element) {
ro.unobserve(element);
}
}
if (!componentActions.includes(ResizeAction)) {
componentActions.push(ResizeAction);
}
onDestroy(() => {
ro.disconnect();
});
/**
* Bind scroll element
* @param {HTMLElement} element
*/
function bindScrollElement(element) {
if (!verticalScrollBarElement) {
verticalScrollBarElement = element;
state.update('_internal.elements.vertical-scroll', element);
}
}
onDestroy(state.subscribeAll(['_internal.loaded', '_internal.chart.time.totalViewDurationPx'], () => {
if (state.get('_internal.loadedEventTriggered'))
return;
const loaded = state.get('_internal.loaded');
if (loaded.main && loaded.chart && loaded.time && loaded['horizontal-scroll-inner']) {
const scroll = state.get('_internal.elements.horizontal-scroll-inner');
const width = state.get('_internal.chart.time.totalViewDurationPx');
if (scroll && scroll.clientWidth === Math.round(width)) {
setTimeout(triggerLoadedEvent, 0);
}
}
}));
function LoadedEventAction() {
state.update('_internal.loaded.main', true);
}
if (!componentActions.includes(LoadedEventAction))
componentActions.push(LoadedEventAction);
/**
* Bind scroll inner element
* @param {Element} element
*/
function bindScrollInnerElement(element) {
if (!state.get('_internal.elements.vertical-scroll-inner'))
state.update('_internal.elements.vertical-scroll-inner', element);
if (!state.get('_internal.loaded.vertical-scroll-inner'))
state.update('_internal.loaded.vertical-scroll-inner', true);
}
const actionProps = Object.assign(Object.assign({}, props), { api, state });
const mainActions = Actions.create(componentActions, actionProps);
const verticalScrollActions = Actions.create([bindScrollElement]);
const verticalScrollAreaActions = Actions.create([bindScrollInnerElement]);
return templateProps => wrapper(html `
<div
data-info-url="https://github.com/neuronetio/gantt-schedule-timeline-calendar"
class=${className}
style=${styleMap}
@scroll=${onScroll}
@wheel=${onScroll}
data-actions=${mainActions}
>
${List.html()}${Chart.html()}
<div
class=${classNameVerticalScroll}
style=${verticalScrollStyleMap}
@scroll=${onScroll}
@wheel=${onScroll}
data-actions=${verticalScrollActions}
>
<div style=${verticalScrollAreaStyleMap} data-actions=${verticalScrollAreaActions} />
</div>
</div>
`, { props, vido, templateProps });
}
/**
* List component
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0 (https://github.com/neuronetio/gantt-schedule-timeline-calendar/blob/master/LICENSE)
* @link https://github.com/neuronetio/gantt-schedule-timeline-calendar
*/
function List(vido, props = {}) {
const { api, state, onDestroy, Actions, update, reuseComponents, html, schedule, StyleMap, cache } = vido;
const componentName = 'list';
const componentActions = api.getActions(componentName);
let wrapper;
onDestroy(state.subscribe('config.wrappers.List', value => (wrapper = value)));
let ListColumnComponent;
const listColumnUnsub = state.subscribe('config.components.ListColumn', value => (ListColumnComponent = value));
function renderExpanderIcons() {
const icons = state.get('config.list.expander.icons');
const rendered = {};
for (const iconName in icons) {
const html = icons[iconName];
rendered[iconName] = api.getSVGIconSrc(html);
}
state.update('_internal.list.expander.icons', rendered);
}
renderExpanderIcons();
function renderToggleIcons() {
const toggleIconsSrc = {
open: '',
close: ''
};
const icons = state.get('config.list.toggle.icons');
for (const iconName in icons) {
const html = icons[iconName];
toggleIconsSrc[iconName] = api.getSVGIconSrc(html);
}
state.update('_internal.list.toggle.icons', toggleIconsSrc);
}
renderToggleIcons();
let className;
let list, percent;
function onListChange() {
list = state.get('config.list');
percent = list.columns.percent;
update();
}
onDestroy(state.subscribe('config.list', onListChange));
onDestroy(state.subscribe('config.classNames', () => {
className = api.getClass(componentName, { list });
update();
}));
let listColumns = [];
function onListColumnsDataChange(data) {
const destroy = reuseComponents(listColumns, Object.values(data), column => ({ columnId: column.id }), ListColumnComponent);
update();
return destroy;
}
onDestroy(state.subscribe('config.list.columns.data;', onListColumnsDataChange));
const styleMap = new StyleMap({
height: '',
'--expander-padding-width': '',
'--expander-size': ''
});
onDestroy(state.subscribeAll(['config.height', 'config.list.expander'], bulk => {
const expander = state.get('config.list.expander');
styleMap.style['height'] = state.get('config.height') + 'px';
styleMap.style['--expander-padding-width'] = expander.padding + 'px';
styleMap.style['--expander-size'] = expander.size + 'px';
update();
}));
onDestroy(() => {
listColumns.forEach(listColumn => listColumn.destroy());
listColumnUnsub();
});
function onScroll(event) {
event.stopPropagation();
event.preventDefault();
if (event.type === 'scroll') {
state.update('config.scroll.top', event.target.scrollTop);
}
else {
const wheel = api.normalizeMouseWheelEvent(event);
state.update('config.scroll.top', top => {
const rowsHeight = state.get('_internal.list.rowsHeight');
const internalHeight = state.get('_internal.height');
return api.limitScrollTop(rowsHeight, internalHeight, (top += wheel.y * state.get('config.scroll.yMultiplier')));
});
}
}
let width;
function getWidth(element) {
if (!width) {
width = element.clientWidth;
if (percent === 0) {
width = 0;
}
state.update('_internal.list.width', width);
}
}
class ListAction {
constructor(element, data) {
data.state.update('_internal.elements.list', element);
getWidth(element);
}
update(element) {
return getWidth(element);
}
}
componentActions.push(ListAction);
const actions = Actions.create(componentActions, Object.assign(Object.assign({}, props), { api, state }));
return templateProps => wrapper(cache(list.columns.percent > 0
? html `
<div class=${className} data-actions=${actions} style=${styleMap} @scroll=${onScroll} @wheel=${onScroll}>
${listColumns.map(c => c.html())}
</div>
`
: ''), { vido, props: {}, templateProps });
}
/**
* ListColumn component
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0 (https://github.com/neuronetio/gantt-schedule-timeline-calendar/blob/master/LICENSE)
* @link https://github.com/neuronetio/gantt-schedule-timeline-calendar
*/
/**
* Bind element action
*/
class BindElementAction {
constructor(element, data) {
let shouldUpdate = false;
let elements = data.state.get('_internal.elements.list-columns');
if (typeof elements === 'undefined') {
elements = [];
shouldUpdate = true;
}
if (!elements.includes(element)) {
elements.push(element);
shouldUpdate = true;
}
if (shouldUpdate)
data.state.update('_internal.elements.list-columns', elements);
}
destroy(element, data) {
data.state.update('_internal.elements.list-columns', elements => {
return elements.filter(el => el !== element);
});
}
}
function ListColumn(vido, props) {
const { api, state, onDestroy, onChange, Actions, update, createComponent, reuseComponents, html, StyleMap } = vido;
let wrapper;
onDestroy(state.subscribe('config.wrappers.ListColumn', value => (wrapper = value)));
const componentsSub = [];
let ListColumnRowComponent;
componentsSub.push(state.subscribe('config.components.ListColumnRow', value => (ListColumnRowComponent = value)));
let ListColumnHeaderComponent;
componentsSub.push(state.subscribe('config.components.ListColumnHeader', value => (ListColumnHeaderComponent = value)));
const actionProps = Object.assign(Object.assign({}, props), { api, state });
const componentName = 'list-column';
const rowsComponentName = componentName + '-rows';
const componentActions = api.getActions(componentName);
const rowsActions = api.getActions(rowsComponentName);
let className, classNameContainer, calculatedWidth;
const widthStyleMap = new StyleMap({ width: '', '--width': '' });
const containerStyleMap = new StyleMap({ width: '', height: '' });
const scrollCompensationStyleMap = new StyleMap({ width: '', height: '' });
let column, columnPath = `config.list.columns.data.${props.columnId}`;
let columnSub = state.subscribe(columnPath, function columnChanged(val) {
column = val;
update();
});
let width;
function calculateStyle() {
const list = state.get('config.list');
const compensationY = state.get('config.scroll.compensation.y');
calculatedWidth = list.columns.data[column.id].width * list.columns.percent * 0.01;
width = calculatedWidth;
const height = state.get('_internal.height');
widthStyleMap.style.width = width + 'px';
widthStyleMap.style['--width'] = width + 'px';
containerStyleMap.style.height = height + 'px';
scrollCompensationStyleMap.style.height = height + Math.abs(compensationY) + 'px';
scrollCompensationStyleMap.style.transform = `translate(0px, ${compensationY}px)`;
}
let styleSub = state.subscribeAll([
'config.list.columns.percent',
'config.list.columns.resizer.width',
`config.list.columns.data.${column.id}.width`,
'_internal.chart.dimensions.width',
'_internal.height',
'config.scroll.compensation.y',
'_internal.list.width'
], calculateStyle, { bulk: true });
const ListColumnHeader = createComponent(ListColumnHeaderComponent, { columnId: props.columnId });
onDestroy(ListColumnHeader.destroy);
onChange(changedProps => {
props = changedProps;
for (const prop in props) {
actionProps[prop] = props[prop];
}
if (columnSub)
columnSub();
ListColumnHeader.change({ columnId: props.columnId });
columnPath = `config.list.columns.data.${props.columnId}`;
columnSub = state.subscribe(columnPath, function columnChanged(val) {
column = val;
update();
});
if (styleSub)
styleSub();
styleSub = state.subscribeAll([
'config.list.columns.percent',
'config.list.columns.resizer.width',
`config.list.columns.data.${column.id}.width`,
'_internal.chart.dimensions.width',
'_internal.height',
'config.scroll.compensation.y',
'_internal.list.width'
], calculateStyle, { bulk: true });
ListColumnHeader.change(props);
});
onDestroy(() => {
columnSub();
styleSub();
});
onDestroy(state.subscribe('config.classNames', value => {
className = api.getClass(componentName);
classNameContainer = api.getClass(rowsComponentName);
update();
}));
const visibleRows = [];
const visibleRowsChange = val => {
const destroy = reuseComponents(visibleRows, val || [], row => row && { columnId: props.columnId, rowId: row.id, width }, ListColumnRowComponent);
update();
return destroy;
};
onDestroy(state.subscribe('_internal.list.visibleRows;', visibleRowsChange));
onDestroy(() => {
visibleRows.forEach(row => row.destroy());
componentsSub.forEach(unsub => unsub());
});
function getRowHtml(row) {
return row.html();
}
componentActions.push(BindElementAction);
const headerActions = Actions.create(componentActions, { column, state: state, api: api });
const rowActions = Actions.create(rowsActions, { api, state });
return templateProps => wrapper(html `
<div class=${className} data-actions=${headerActions} style=${widthStyleMap}>
${ListColumnHeader.html()}
<div class=${classNameContainer} style=${containerStyleMap} data-actions=${rowActions}>
<div class=${classNameContainer + '--scroll-compensation'} style=${scrollCompensationStyleMap}>
${visibleRows.map(getRowHtml)}
</div>
</div>
</div>
`, { vido, props, templateProps });
}
/**
* ListColumnHeader component
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0 (https://github.com/neuronetio/gantt-schedule-timeline-calendar/blob/master/LICENSE)
* @link https://github.com/neuronetio/gantt-schedule-timeline-calendar
*/
function ListColumnHeader(vido, props) {
const { api, state, onDestroy, onChange, Actions, update, createComponent, html, cache, StyleMap } = vido;
const actionProps = Object.assign(Object.assign({}, props), { api, state });
let wrapper;
onDestroy(state.subscribe('config.wrappers.ListColumnHeader', value => (wrapper = value)));
const componentName = 'list-column-header';
const componentActions = api.getActions(componentName);
const componentsSubs = [];
let ListColumnHeaderResizerComponent;
componentsSubs.push(state.subscribe('config.components.ListColumnHeaderResizer', value => (ListColumnHeaderResizerComponent = value)));
const ListColumnHeaderResizer = createComponent(ListColumnHeaderResizerComponent, { columnId: props.columnId });
let ListColumnRowExpanderComponent;
componentsSubs.push(state.subscribe('config.components.ListColumnRowExpander', value => (ListColumnRowExpanderComponent = value)));
const ListColumnRowExpander = createComponent(ListColumnRowExpanderComponent, {});
onDestroy(() => {
ListColumnHeaderResizer.destroy();
ListColumnRowExpander.destroy();
componentsSubs.forEach(unsub => unsub());
});
let column;
let columnSub = state.subscribe(`config.list.columns.data.${props.columnId}`, val => {
column = val;
update();
});
onDestroy(columnSub);
onChange(changedProps => {
props = changedProps;
for (const prop in props) {
actionProps[prop] = props[prop];
}
if (columnSub)
columnSub();
columnSub = state.subscribe(`config.list.columns.data.${props.columnId}`, val => {
column = val;
update();
});
});
let className, contentClass;
onDestroy(state.subscribe('config.classNames', () => {
className = api.getClass(componentName);
contentClass = api.getClass(componentName + '-content');
}));
const styleMap = new StyleMap({
height: '',
'--height': '',
'--paddings-count': ''
});
onDestroy(state.subscribe('config.headerHeight', () => {
const value = state.get('config');
styleMap.style['height'] = value.headerHeight + 'px';
styleMap.style['--height'] = value.headerHeight + 'px';
styleMap.style['--paddings-count'] = '1';
update();
}));
function withExpander() {
return html `
<div class=${contentClass}>
${ListColumnRowExpander.html()}${ListColumnHeaderResizer.html(column)}
</div>
`;
}
function withoutExpander() {
return html `
<div class=${contentClass}>
${ListColumnHeaderResizer.html(column)}
</div>
`;
}
const actions = Actions.create(componentActions, actionProps);
return templateProps => wrapper(html `
<div class=${className} style=${styleMap} data-actions=${actions}>
${cache(column.expander ? withExpander() : withoutExpander())}
</div>
`, { vido, props, templateProps });
}
/**
* ListColumnHeaderResizer component
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0 (https://github.com/neuronetio/gantt-schedule-timeline-calendar/blob/master/LICENSE)
* @link https://github.com/neuronetio/gantt-schedule-timeline-calendar
*/
function ListColumnHeaderResizer(vido, props) {
const { api, state, onDestroy, update, html, schedule, Actions, PointerAction, cache, StyleMap } = vido;
const componentName = 'list-column-header-resizer';
const componentActions = api.getActions(componentName);
const componentDotsActions = api.getActions(componentName + '-dots');
let wrapper;
onDestroy(state.subscribe('config.wrappers.ListColumnHeaderResizer', value => (wrapper = value)));
let column;
onDestroy(state.subscribe(`config.list.columns.data.${props.columnId}`, val => {
column = val;
update();
}));
let className, containerClass, dotsClass, dotClass, calculatedWidth;
const dotsStyleMap = new StyleMap({ width: '' });
let inRealTime = false;
onDestroy(state.subscribe('config.classNames', value => {
className = api.getClass(componentName, { column });
containerClass = api.getClass(componentName + '-container', { column });
dotsClass = api.getClass(componentName + '-dots', { column });
dotClass = api.getClass(componentName + '-dots-dot', { column });
update();
}));
onDestroy(state.subscribeAll([
`config.list.columns.data.${column.id}.width`,
'config.list.columns.percent',
'config.list.columns.resizer.width',
'config.list.columns.resizer.inRealTime'
], (value, path) => {
const list = state.get('config.list');
calculatedWidth = column.width * list.columns.percent * 0.01;
dotsStyleMap.style['--width'] = list.columns.resizer.width + 'px';
inRealTime = list.columns.resizer.inRealTime;
state.update('_internal.list.width', calculatedWidth);
update();
}));
let dots = [1, 2, 3, 4, 5, 6, 7, 8];
onDestroy(state.subscribe('config.list.columns.resizer.dots', value => {
dots = [];
for (let i = 0; i < value; i++) {
dots.push(i);
}
update();
}));
/*
let isMoving = false;
const lineStyleMap = new StyleMap({
'--display': 'none',
'--left': left + 'px'
});*/
let left = calculatedWidth;
const columnWidthPath = `config.list.columns.data.${column.id}.width`;
const actionProps = {
column,
api,
state,
pointerOptions: {
axis: 'x',
onMove: function onMove({ movementX }) {
let minWidth = state.get('config.list.columns.minWidth');
if (typeof column.minWidth === 'number') {
minWidth = column.minWidth;
}
left += movementX;
if (left < minWidth) {
left = minWidth;
}
if (inRealTime) {
state.update(columnWidthPath, left);
}
}
}
};
componentActions.push(PointerAction);
const actions = Actions.create(componentActions, actionProps);
const dotsActions = Actions.create(componentDotsActions, actionProps);
return templateProps => wrapper(html `
<div class=${className} data-actions=${actions}>
<div class=${containerClass}>
${cache(column.header.html
? html `
${column.header.html}
`
: column.header.content)}
</div>
<div class=${dotsClass} style=${dotsStyleMap} data-actions=${dotsActions}>
${dots.map(dot => html `
<div class=${dotClass} />
`)}
</div>
</div>
`, { vido, props, templateProps });
}
/**
* ListColumnRow component
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0 (https://github.com/neuronetio/gantt-schedule-timeline-calendar/blob/master/LICENSE)
* @link https://github.com/neuronetio/gantt-schedule-timeline-calendar
*/
/**
* Bind element action
*/
class BindElementAction$1 {
constructor(element, data) {
let elements = data.state.get('_internal.elements.list-column-rows');
let shouldUpdate = false;
if (typeof elements === 'undefined') {
shouldUpdate = true;
elements = [];
}
if (!elements.includes(element)) {
elements.push(element);
shouldUpdate = true;
}
if (shouldUpdate)
data.state.update('_internal.elements.list-column-rows', elements);
}
destroy(element, data) {
data.state.update('_internal.elements.list-column-rows', elements => {
return elements.filter(el => el !== element);
});
}
}
function ListColumnRow(vido, props) {
const { api, state, onDestroy, Detach, Actions, update, html, createComponent, onChange, StyleMap, unsafeHTML, PointerAction } = vido;
const actionProps = Object.assign(Object.assign({}, props), { api, state });
let shouldDetach = false;
const detach = new Detach(() => shouldDetach);
let wrapper;
onDestroy(state.subscribe('config.wrappers.ListColumnRow', value => (wrapper = value)));
let ListColumnRowExpanderComponent;
onDestroy(state.subscribe('config.components.ListColumnRowExpander', value => (ListColumnRowExpanderComponent = value)));
let rowPath = `_internal.flatTreeMapById.${props.rowId}`, row = state.get(rowPath);
let colPath = `config.list.columns.data.${props.columnId}`, column = state.get(colPath);
const styleMap = new StyleMap(column.expander
? {
height: '',
top: '',
'--height': '',
'--expander-padding-width': '',
'--expander-size': ''
}
: {
height: '',
top: '',
'--height': ''
}, true);
let rowSub, colSub;
const ListColumnRowExpander = createComponent(ListColumnRowExpanderComponent, { row });
const onPropsChange = (changedProps, options) => {
if (options.leave || changedProps.rowId === undefined || changedProps.columnId === undefined) {
shouldDetach = true;
if (rowSub)
rowSub();
if (colSub)
colSub();
update();
return;
}
shouldDetach = false;
props = changedProps;
for (const prop in props) {
actionProps[prop] = props[prop];
}
const rowId = props.rowId;
const columnId = props.columnId;
if (rowSub)
rowSub();
if (colSub)
colSub();
rowPath = `_internal.flatTreeMapById.${rowId}`;
colPath = `config.list.columns.data.${columnId}`;
rowSub = state.subscribeAll([rowPath, colPath, 'config.list.expander'], bulk => {
column = state.get(colPath);
row = state.get(rowPath);
if (column === undefined || row === undefined) {
shouldDetach = true;
update();
return;
}
if (column === undefined || row === undefined)
return;
const expander = state.get('config.list.expander');
// @ts-ignore
styleMap.setStyle({}); // we must reset style because of user specified styling
styleMap.style['height'] = row.height + 'px';
styleMap.style['--height'] = row.height + 'px';
if (column.expander) {
styleMap.style['--expander-padding-width'] = expander.padding * (row._internal.parents.length + 1) + 'px';
}
for (const parentId of row._internal.parents) {
const parent = state.get(`_internal.flatTreeMapById.${parentId}`);
if (typeof parent.style === 'object' && parent.style.constructor.name === 'Object') {
if (typeof parent.style.children === 'object') {
const childrenStyle = parent.style.children;
for (const name in childrenStyle) {
styleMap.style[name] = childrenStyle[name];
}
}
}
}
if (typeof row.style === 'object' &&
row.style.constructor.name === 'Object' &&
typeof row.style.current === 'object') {
const rowCurrentStyle = row.style.current;
for (const name in rowCurrentStyle) {
styleMap.style[name] = rowCurrentStyle[name];
}
}
update();
}, { bulk: true });
if (ListColumnRowExpander) {
ListColumnRowExpander.change({ row });
}
colSub = state.subscribe(colPath, val => {
column = val;
update();
});
};
onChange(onPropsChange);
onDestroy(() => {
if (ListColumnRowExpander)
ListColumnRowExpander.destroy();
colSub();
rowSub();
});
const componentName = 'list-column-row';
const componentActions = api.getActions(componentName);
let className;
onDestroy(state.subscribe('config.classNames', value => {
className = api.getClass(componentName);
update();
}));
function getHtml() {
if (row === undefined)
return null;
if (typeof column.data === 'function')
return unsafeHTML(column.data(row));
return unsafeHTML(row[column.data]);
}
function getText() {
if (row === undefined)
return null;
if (typeof column.data === 'function')
return column.data(row);
return row[column.data];
}
if (!componentActions.includes(BindElementAction$1))
componentActions.push(BindElementAction$1);
actionProps.pointerOptions = {
axis: 'x|y',
onMove({ event, movementX, movementY }) {
event.stopPropagation();
event.preventDefault();
if (movementX) {
state.update('config.list.columns.percent', percent => {
percent += movementX * state.get('config.scroll.xMultiplier');
if (percent < 0)
percent = 0;
if (percent > 100)
percent = 100;
return percent;
});
}
else if (movementY) {
state.update('config.scroll.top', top => {
top -= movementY * state.get('config.scroll.yMultiplier');
const rowsHeight = state.get('_internal.list.rowsHeight');
const internalHeight = state.get('_internal.height');
top = api.limitScrollTop(rowsHeight, internalHeight, top);
return top;
});
}
}
};
componentActions.push(PointerAction);
const actions = Actions.create(componentActions, actionProps);
return templateProps => wrapper(html `
<div detach=${detach} class=${className} style=${styleMap} data-actions=${actions}>
${column.expander ? ListColumnRowExpander.html() : null}
<div class=${className + '-content'}>
${column.isHTML ? getHtml() : getText()}
</div>
</div>
`, { vido, props, templateProps });
}
/**
* ListColumnRowExpander component
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0 (https://github.com/neuronetio/gantt-schedule-timeline-calendar/blob/master/LICENSE)
* @link https://github.com/neuronetio/gantt-schedule-timeline-calendar
*/
function ListColumnRowExpander(vido, props) {
const { api, state, onDestroy, Actions, update, html, createComponent, onChange } = vido;
const componentName = 'list-column-row-expander';
const componentActions = api.getActions(componentName);
const actionProps = Object.assign(Object.assign({}, props), { api, state });
let className;
let ListColumnRowExpanderToggleComponent;
const toggleUnsub = state.subscribe('config.components.ListColumnRowExpanderToggle', value => (ListColumnRowExpanderToggleComponent = value));
const ListColumnRowExpanderToggle = createComponent(ListColumnRowExpanderToggleComponent, props.row ? { row: props.row } : {});
onDestroy(() => {
ListColumnRowExpanderToggle.destroy();
toggleUnsub();
});
let wrapper;
onDestroy(state.subscribe('config.wrappers.ListColumnRowExpander', value => (wrapper = value)));
onDestroy(state.subscribe('config.classNames', value => {
className = api.getClass(componentName);
update();
}));
if (props.row) {
function onPropsChange(changedProps) {
props = changedProps;
for (const prop in props) {
actionProps[prop] = props[prop];
}
ListColumnRowExpanderToggle.change(props);
}
onChange(onPropsChange);
}
const actions = Actions.create(componentActions, actionProps);
return templateProps => wrapper(html `
<div class=${className} data-action=${actions}>
${ListColumnRowExpanderToggle.html()}
</div>
`, { vido, props, templateProps });
}
/**
* ListColumnRowExpanderToggle component
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0 (https://github.com/neuronetio/gantt-schedule-timeline-calendar/blob/master/LICENSE)
* @link https://github.com/neuronetio/gantt-schedule-timeline-calendar
*/
function ListColumnRowExpanderToggle(vido, props) {
const { api, state, onDestroy, Actions, update, html, onChange, cache } = vido;
const componentName = 'list-column-row-expander-toggle';
const actionProps = Object.assign(Object.assign({}, props), { api, state });
let wrapper;
onDestroy(state.subscribe('config.wrappers.ListColumnRowExpanderToggle', value => (wrapper = value)));
const componentActions = api.getActions(componentName);
let className, classNameChild, classNameOpen, classNameClosed;
let expanded = false;
let iconChild, iconOpen, iconClosed;
onDestroy(state.subscribe('config.classNames', value => {
className = api.getClass(componentName);
classNameChild = className + '-child';
classNameOpen = className + '-open';
classNameClosed = className + '-closed';
update();
}));
onDestroy(state.subscribe('_internal.list.expander.icons', icons => {
if (icons) {
iconChild = icons.child;
iconOpen = icons.open;
iconClosed = icons.closed;
}
update();
}));
if (props.row) {
function expandedChange(isExpanded) {
expanded = isExpanded;
update();
}
let expandedSub;
function onPropsChange(changedProps) {
var _a, _b;
props = changedProps;
for (const prop in props) {
actionProps[prop] = props[prop];
}
if (expandedSub)
expandedSub();
if ((_b = (_a = props) === null || _a === void 0 ? void 0 : _a.row) === null || _b === void 0 ? void 0 : _b.id)
expandedSub = state.subscribe(`config.list.rows.${props.row.id}.expanded`, expandedChange);
}
onChange(onPropsChange);
onDestroy(function listToggleDestroy() {
if (expandedSub)
expandedSub();
});
}
else {
function expandedChange(bulk) {
for (const rowExpanded of bulk) {
if (rowExpanded.value) {
expanded = true;
break;
}
}
update();
}
onDestroy(state.subscribe('config.list.rows.*.expanded', expandedChange, { bulk: true }));
}
function toggle() {
expanded = !expanded;
if (props.row) {
state.update(`config.list.rows.${props.row.id}.expanded`, expanded);
}
else {
state.update(`config.list.rows`, rows => {
for (const rowId in rows) {
rows[rowId].expanded = expanded;
}
return rows;
}, { only: ['*.expanded'] });
}
}
const getIcon = () => {
var _a, _b, _c;
if (iconChild) {
if (((_c = (_b = (_a = props.row) === null || _a === void 0 ? void 0 : _a._internal) === null || _b === void 0 ? void 0 : _b.children) === null || _c === void 0 ? void 0 : _c.length) === 0) {
return html `
<img width="16" height="16" class=${classNameChild} src=${iconChild} />
`;
}
return expanded
? html `
<img width="16" height="16" class=${classNameOpen} src=${iconOpen} />
`
: html `
<img width="16" height="16" class=${classNameClosed} src=${iconClosed} />
`;
}
return '';
};
const actions = Actions.create(componentActions, actionProps);
return templateProps => wrapper(html `
<div class=${className} data-action=${actions} @click=${toggle}>
${cache(getIcon())}
</div>
`, { vido, props, templateProps });
}
/**
* ListToggle component
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0 (https://github.com/neuronetio/gantt-schedule-timeline-calendar/blob/master/LICENSE)
* @link https://github.com/neuronetio/gantt-schedule-timeline-calendar
*/
function ListToggle(vido, props = {}) {
const { html, onDestroy, api, state, update } = vido;
const componentName = 'list-toggle';
let className;
onDestroy(state.subscribe('config.classNames', classNames => {
className = api.getClass(componentName);
}));
let wrapper;
onDestroy(state.subscribe('config.wrappers.ListToggle', ListToggleWrapper => (wrapper = ListToggleWrapper)));
let toggleIconsSrc = {
open: '',
close: ''
};
onDestroy(state.subscribe('_internal.list.toggle.icons', value => {
if (value) {
toggleIconsSrc = value;
update();
}
}));
let open = true;
onDestroy(state.subscribe('config.list.columns.percent', percent => (percent === 0 ? (open = false) : (open = true))));
function toggle(ev) {
state.update('config.list.columns.percent', percent => {
return percent === 0 ? 100 : 0;
});
}
return templateProps => wrapper(html `
<div class=${className} @click=${toggle}><img src=${open ? toggleIconsSrc.close : toggleIconsSrc.open} /></div>
`, { props, vido, templateProps });
}
/**
* Chart component
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0 (https://github.com/neuronetio/gantt-schedule-timeline-calendar/blob/master/LICENSE)
* @link https://github.com/neuronetio/gantt-schedule-timeline-calendar
*/
function Chart(vido, props = {}) {
const { api, state, onDestroy, Actions, update, html, StyleMap, createComponent } = vido;
const componentName = 'chart';
const ChartCalendarComponent = state.get('config.components.ChartCalendar');
const ChartTimelineComponent = state.get('config.components.ChartTimeline');
let wrapper;
onDestroy(state.subscribe('config.wrappers.Chart', value => (wrapper = value)));
const Calendar = createComponent(ChartCalendarComponent);
onDestroy(Calendar.destroy);
const Timeline = createComponent(ChartTimelineComponent);
onDestroy(Timeline.destroy);
let className, classNameScroll, classNameScrollInner, scrollElement, scrollInnerElement;
const componentActions = api.getActions(componentName);
onDestroy(state.subscribe('config.classNames', value => {
className = api.getClass(componentName);
classNameScroll = api.getClass('horizontal-scroll');
classNameScrollInner = api.getClass('horizontal-scroll-inner');
update();
}));
onDestroy(state.subscribeAll(['_internal.chart.dimensions.width', '_internal.chart.time.totalViewDurationPx'], function horizontalScroll() {
if (scrollElement)
scrollElement.style.width = state.get('_internal.chart.dimensions.width') + 'px';
if (scrollInnerElement)
scrollInnerElement.style.width = state.get('_internal.chart.time.totalViewDurationPx') + 'px';
}));
onDestroy(state.subscribe('config.scroll.left', left => {
if (scrollElement) {
scrollElement.scrollLeft = left;
}
}));
function onScrollHandler(event) {
if (event.type === 'scroll') {
// @ts-ignore
const left = event.target.scrollLeft;
state.update('config.scroll.left', left);
}
}
const onScroll = {
handleEvent: onScrollHandler,
passive: true,
capture: false
};
function onWheelHandler(event) {
if (event.type === 'wheel') {
const wheel = api.normalizeMouseWheelEvent(event);
const xMultiplier = state.get('config.scroll.xMultiplier');
const yMultiplier = state.get('config.scroll.yMultiplier');
const currentScrollLeft = state.get('config.scroll.left');
const totalViewDurationPx = state.get('_internal.chart.time.totalViewDurationPx');
if (event.shiftKey && wheel.y) {
const newScrollLeft = api.limitScrollLeft(totalViewDurationPx, chartWidth, currentScrollLeft + wheel.y * xMultiplier);
state.update('config.scroll.left', newScrollLeft); // will trigger scrollbar to move which will trigger scroll event
}
else if (event.ctrlKey && wheel.y) {
event.preventDefault();
state.update('config.chart.time.zoom', currentZoom => {
if (wheel.y < 0) {
return currentZoom - 1;
}
return currentZoom + 1;
});
}
else if (wheel.x) {
const currentScrollLeft = state.get('config.scroll.left');
state.update('config.scroll.left', api.limitScrollLeft(totalViewDurationPx, chartWidth, currentScrollLeft + wheel.x * xMultiplier));
}
else {
state.update('config.scroll.top', top => {
const rowsHeight = state.get('_internal.list.rowsHeight');
const internalHeight = state.get('_internal.height');
return api.limitScrollTop(rowsHeight, internalHeight, (top += wheel.y * yMultiplier));
});
}
}
}
const onWheel = {
handleEvent: onWheelHandler,
passive: false,
capture: false
};
function bindElement(element) {
if (!scrollElement) {
scrollElement = element;
state.update('_internal.elements.horizontal-scroll', element);
}
}
function bindInnerScroll(element) {
scrollInnerElement = element;
const old = state.get('_internal.elements.horizontal-scroll-inner');
if (old !== element)
state.update('_internal.elements.horizontal-scroll-inner', element);
if (!state.get('_internal.loaded.horizontal-scroll-inner'))
state.update('_internal.loaded.horizontal-scroll-inner', true);
}
let chartWidth = 0;
let ro;
componentActions.push(function bindElement(element) {
if (!ro) {
ro = new index((entries, observer) => {
const width = element.clientWidth;
const height = element.clientHeight;
const innerWidth = width - state.get('_internal.scrollBarHeight');
if (chartWidth !== width) {
chartWidth = width;
state.update('_internal.chart.dimensions', { width, innerWidth, height });
}
});
ro.observe(element);
state.update('_internal.elements.chart', element);
state.update('_internal.loaded.chart', true);
}
});
onDestroy(() => {
ro.disconnect();
});
const actions = Actions.create(componentActions, { api, state });
const scrollActions = Actions.create([bindElement]);
const scrollAreaActions = Actions.create([bindInnerScroll]);
return templateProps => wrapper(html `
<div class=${className} data-actions=${actions} @wheel=${onWheel} @scroll=${onScroll}>
${Calendar.html()}${Timeline.html()}
<div class=${classNameScroll} data-actions=${scrollActions} @scroll=${onScroll}>
<div class=${classNameScrollInner} style="height: 1px" data-actions=${scrollAreaActions} />
</div>
</div>
`, { vido, props: {}, templateProps });
}
/**
* ChartCalendar component
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0 (https://github.com/neuronetio/gantt-schedule-timeline-calendar/blob/master/LICENSE)
* @link https://github.com/neuronetio/gantt-schedule-timeline-calendar
*/
function ChartCalendar(vido, props) {
const { api, state, onDestroy, Actions, update, reuseComponents, html, StyleMap } = vido;
const componentName = 'chart-calendar';
const componentActions = api.getActions(componentName);
const actionProps = Object.assign(Object.assign({}, props), { api, state });
const ChartCalendarDateComponent = state.get('config.components.ChartCalendarDate');
let wrapper;
onDestroy(state.subscribe('config.wrappers.ChartCalendar', value => (wrapper = value)));
let className;
onDestroy(state.subscribe('config.classNames', value => {
className = api.getClass(componentName);
update();
}));
let headerHeight;
const styleMap = new StyleMap({ height: '', '--headerHeight': '', 'margin-left': '' });
onDestroy(state.subscribe('config.headerHeight', value => {
headerHeight = value;
styleMap.style['height'] = headerHeight + 'px';
styleMap.style['--calendar-height'] = headerHeight + 'px';
update();
}));
onDestroy(state.subscribe('config.scroll.compensation.x', compensation => {
styleMap.style['margin-left'] = -compensation + 'px';
update();
}));
const components = [[], []];
onDestroy(state.subscribe(`_internal.chart.time.levels`, levels => {
let level = 0;
for (const dates of levels) {
if (!dates.length)
continue;
let currentDateFormat = 'YYYY-MM-DD HH'; // hour
switch (dates[0].period) {
case 'day':
currentDateFormat = 'YYYY-MM-DD';
break;
case 'week':
currentDateFormat = 'YYYY-MM-ww';
break;
case 'month':
currentDateFormat = 'YYYY-MM';
break;
case 'year':
currentDateFormat = 'YYYY';
break;
}
const currentDate = api.time.date().format(currentDateFormat);
reuseComponents(components[level], dates, date => date && { level, date, currentDate, currentDateFormat }, ChartCalendarDateComponent);
level++;
}
update();
}));
onDestroy(() => {
components.forEach(level => level.forEach(component => component.destroy()));
});
componentActions.push(element => {
state.update('_internal.elements.chart-calendar', element);
});
const actions = Actions.create(componentActions, actionProps);
return templateProps => wrapper(html `
<div class=${className} data-actions=${actions} style=${styleMap}>
${components.map((components, level) => html `
<div class=${className + '-dates ' + className + `-dates--level-${level}`}>
${components.map(m => m.html())}
</div>
`)}
</div>
`, { props, vido, templateProps });
}
class Action$1 {
constructor() {
this.isAction = true;
}
}
Action$1.prototype.isAction = true;
/**
* ChartCalendarDay component
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0 (https://github.com/neuronetio/gantt-schedule-timeline-calendar/blob/master/LICENSE)
* @link https://github.com/neuronetio/gantt-schedule-timeline-calendar
*/
/**
* Save element
* @param {HTMLElement} element
* @param {object} data
*/
class BindElementAction$2 extends Action$1 {
constructor(element, data) {
super();
data.state.update('_internal.elements.chart-calendar-dates', elements => {
if (typeof elements === 'undefined') {
elements = [];
}
if (!elements.includes(element)) {
elements.push(element);
}
return elements;
});
}
}
function ChartCalendarDay(vido, props) {
const { api, state, onDestroy, Actions, update, onChange, html, StyleMap, Detach } = vido;
const componentName = 'chart-calendar-date';
const componentActions = api.getActions(componentName);
let wrapper;
onDestroy(state.subscribe('config.wrappers.ChartCalendarDate', value => (wrapper = value)));
let className;
onDestroy(state.subscribe('config.classNames', () => {
className = api.getClass(componentName, props);
}));
let current = '';
let time, htmlFormatted;
const styleMap = new StyleMap({ width: '', visibility: 'visible' }), scrollStyleMap = new StyleMap({
overflow: 'hidden',
'text-align': 'left'
});
let formatClassName = '';
function updateDate() {
if (!props)
return;
const cache = state.get('_internal.cache.calendar');
const level = state.get(`config.chart.calendar.levels.${props.level}`);
styleMap.style.width = props.date.width + 'px';
styleMap.style.visibility = 'visible';
scrollStyleMap.style = { overflow: 'hidden', 'text-align': 'left', 'margin-left': props.date.subPx + 8 + 'px' };
time = state.get('_internal.chart.time');
const cacheKey = `${new Date(props.date.leftGlobal).toISOString()}-${props.date.period}-${props.level}-${time.zoom}`;
if (!cache[cacheKey]) {
cache[cacheKey] = {};
}
let timeStart, timeEnd;
{
timeStart = api.time.date(props.date.leftGlobal);
timeEnd = api.time.date(props.date.rightGlobal);
cache[cacheKey].timeStart = timeStart;
cache[cacheKey].timeEnd = timeEnd;
}
const formats = level.formats;
const formatting = formats.find(formatting => +time.zoom <= +formatting.zoomTo);
let format;
{
format = formatting ? formatting.format({ timeStart, timeEnd, className, vido, props }) : null;
cache[cacheKey].format = format;
}
{
if (timeStart.format(props.currentDateFormat) === props.currentDate) {
current = ' gstc-current';
}
else if (timeStart.subtract(1, props.date.period).format(props.currentDateFormat) === props.currentDate) {
current = ' gstc-next';
}
else if (timeStart.add(1, props.date.period).format(props.currentDateFormat) === props.currentDate) {
current = ' gstc-previous';
}
else {
current = '';
}
cache[cacheKey].current = current;
}
let finalClassName = className + '-content ' + className + `-content--${props.date.period}` + current;
if (formatting.className) {
finalClassName += ' ' + formatting.className;
formatClassName = ' ' + formatting.className;
}
else {
formatClassName = '';
}
// updating cache state is not necessary because it is object and nobody listen to cache
htmlFormatted = html `
<div class=${finalClassName}>
${format}
</div>
`;
update();
}
let shouldDetach = false;
const detach = new Detach(() => shouldDetach);
let timeSub;
const actionProps = { date: props.date, period: props.period, api, state };
onChange((changedProps, options) => {
if (options.leave) {
shouldDetach = true;
return update();
}
shouldDetach = false;
props = changedProps;
actionProps.date = props.date;
actionProps.period = props.period;
if (timeSub) {
timeSub();
}
timeSub = state.subscribeAll(['_internal.chart.time', 'config.chart.calendar.levels'], updateDate, {
bulk: true
});
});
onDestroy(() => {
timeSub();
});
if (!componentActions.includes(BindElementAction$2))
componentActions.push(BindElementAction$2);
const actions = Actions.create(componentActions, actionProps);
return templateProps => wrapper(html `
<div
detach=${detach}
class=${className +
' ' +
className +
`--${props.date.period}` +
' ' +
className +
`--level-${props.level}` +
current +
formatClassName}
style=${styleMap}
data-actions=${actions}
>
${htmlFormatted}
</div>
`, { props, vido, templateProps });
}
/**
* ChartTimeline component
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0 (https://github.com/neuronetio/gantt-schedule-timeline-calendar/blob/master/LICENSE)
* @link https://github.com/neuronetio/gantt-schedule-timeline-calendar
*/
function ChartTimeline(vido, props) {
const { api, state, onDestroy, Action, Actions, update, html, createComponent, StyleMap } = vido;
const componentName = 'chart-timeline';
const componentActions = api.getActions(componentName);
const actionProps = Object.assign(Object.assign({}, props), { api, state });
let wrapper;
onDestroy(state.subscribe('config.wrappers.ChartTimeline', value => (wrapper = value)));
const GridComponent = state.get('config.components.ChartTimelineGrid');
const ItemsComponent = state.get('config.components.ChartTimelineItems');
const ListToggleComponent = state.get('config.components.ListToggle');
const Grid = createComponent(GridComponent);
onDestroy(Grid.destroy);
const Items = createComponent(ItemsComponent);
onDestroy(Items.destroy);
const ListToggle = createComponent(ListToggleComponent);
onDestroy(ListToggle.destroy);
let className, classNameInner;
onDestroy(state.subscribe('config.classNames', () => {
className = api.getClass(componentName);
classNameInner = api.getClass(componentName + '-inner');
update();
}));
let showToggle;
onDestroy(state.subscribe('config.list.toggle.display', val => (showToggle = val)));
const styleMap = new StyleMap({}), innerStyleMap = new StyleMap({});
function calculateStyle() {
const xCompensation = api.getCompensationX();
const yCompensation = api.getCompensationY();
const width = state.get('_internal.chart.dimensions.width');
const height = state.get('_internal.list.rowsHeight');
styleMap.style.height = state.get('_internal.height') + 'px';
styleMap.style['--height'] = styleMap.style.height;
styleMap.style['--negative-compensation-x'] = xCompensation + 'px';
styleMap.style['--compensation-x'] = Math.round(Math.abs(xCompensation)) + 'px';
styleMap.style['--negative-compensation-y'] = yCompensation + 'px';
styleMap.style['--compensation-y'] = Math.abs(yCompensation) + 'px';
if (width) {
styleMap.style.width = width + 'px';
styleMap.style['--width'] = width + 'px';
}
else {
styleMap.style.width = '0px';
styleMap.style['--width'] = '0px';
}
innerStyleMap.style.height = height + 'px';
if (width) {
innerStyleMap.style.width = width + xCompensation + 'px';
}
else {
innerStyleMap.style.width = '0px';
}
//innerStyleMap.style.transform = `translate(-${xCompensation}px, ${yCompensation}px)`;
innerStyleMap.style['margin-left'] = -xCompensation + 'px';
update();
}
onDestroy(state.subscribeAll([
'_internal.height',
'_internal.chart.dimensions.width',
'_internal.list.rowsHeight',
'config.scroll.compensation',
'_internal.chart.time.dates.day'
], calculateStyle));
componentActions.push(class BindElementAction extends Action {
constructor(element) {
super();
const old = state.get('_internal.elements.chart-timeline');
if (old !== element)
state.update('_internal.elements.chart-timeline', element);
}
});
const actions = Actions.create(componentActions, actionProps);
return templateProps => wrapper(html `
<div class=${className} style=${styleMap} data-actions=${actions} @wheel=${api.onScroll}>
<div class=${classNameInner} style=${innerStyleMap}>
${Grid.html()}${Items.html()}${showToggle ? ListToggle.html() : ''}
</div>
</div>
`, { props, vido, templateProps });
}
/**
* ChartTimelineGrid component
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0 (https://github.com/neuronetio/gantt-schedule-timeline-calendar/blob/master/LICENSE)
* @link https://github.com/neuronetio/gantt-schedule-timeline-calendar
*/
/**
* Bind element action
*/
class BindElementAction$3 {
constructor(element, data) {
const old = data.state.get('_internal.elements.chart-timeline-grid');
if (old !== element)
data.state.update('_internal.elements.chart-timeline-grid', element);
}
destroy(element, data) {
data.state.update('_internal.elements', elements => {
delete elements['chart-timeline-grid'];
return elements;
});
}
}
function ChartTimelineGrid(vido, props) {
const { api, state, onDestroy, Actions, update, html, reuseComponents, StyleMap } = vido;
const componentName = 'chart-timeline-grid';
const componentActions = api.getActions(componentName);
const actionProps = { api, state };
let wrapper;
onDestroy(state.subscribe('config.wrappers.ChartTimelineGrid', value => (wrapper = value)));
const GridRowComponent = state.get('config.components.ChartTimelineGridRow');
let className;
onDestroy(state.subscribe('config.classNames', () => {
className = api.getClass(componentName);
update();
}));
let onBlockCreate;
onDestroy(state.subscribe('config.chart.grid.block.onCreate', onCreate => (onBlockCreate = onCreate)));
const rowsComponents = [];
const rowsWithBlocks = [];
const formatCache = new Map();
const styleMap = new StyleMap({});
/**
* Generate blocks
*/
function generateBlocks() {
const width = state.get('_internal.chart.dimensions.width');
const height = state.get('_internal.height');
const time = state.get('_internal.chart.time');
const periodDates = state.get(`_internal.chart.time.levels.${time.level}`);
if (!periodDates || periodDates.length === 0) {
state.update('_internal.chart.grid.rowsWithBlocks', []);
return;
}
const visibleRows = state.get('_internal.list.visibleRows');
const xCompensation = api.getCompensationX();
const yCompensation = api.getCompensationY();
styleMap.style.height = height + Math.abs(yCompensation) + 'px';
styleMap.style.width = width + xCompensation + 'px';
let top = 0;
rowsWithBlocks.length = 0;
for (const row of visibleRows) {
const blocks = [];
for (const time of periodDates) {
let format;
if (formatCache.has(time.leftGlobal)) {
format = formatCache.get(time.leftGlobal);
}
else {
format = api.time.date(time.leftGlobal).format('YYYY-MM-DD HH:mm');
formatCache.set(time.leftGlobal, format);
}
const id = row.id + ':' + format;
let block = { id, time, row, top };
for (const onCreate of onBlockCreate) {
block = onCreate(block);
}
blocks.push(block);
}
rowsWithBlocks.push({ row, blocks, top, width });
top += row.height;
}
state.update('_internal.chart.grid.rowsWithBlocks', rowsWithBlocks);
}
onDestroy(state.subscribeAll([
'_internal.list.visibleRows;',
`_internal.chart.time.levels`,
'_internal.height',
'_internal.chart.dimensions.width'
], generateBlocks, {
bulk: true
}));
/**
* Generate rows components
* @param {array} rowsWithBlocks
*/
function generateRowsComponents(rowsWithBlocks) {
reuseComponents(rowsComponents, rowsWithBlocks || [], row => row, GridRowComponent);
update();
}
onDestroy(state.subscribe('_internal.chart.grid.rowsWithBlocks', generateRowsComponents));
onDestroy(() => {
rowsComponents.forEach(row => row.destroy());
});
componentActions.push(BindElementAction$3);
const actions = Actions.create(componentActions, actionProps);
return templateProps => wrapper(html `
<div class=${className} data-actions=${actions} style=${styleMap}>
${rowsComponents.map(r => r.html())}
</div>
`, { props, vido, templateProps });
}
/**
* ChartTimelineGridRow component
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0 (https://github.com/neuronetio/gantt-schedule-timeline-calendar/blob/master/LICENSE)
* @link https://github.com/neuronetio/gantt-schedule-timeline-calendar
*/
/**
* Bind element action
*/
class BindElementAction$4 {
constructor(element, data) {
let shouldUpdate = false;
let rows = data.state.get('_internal.elements.chart-timeline-grid-rows');
if (typeof rows === 'undefined') {
rows = [];
shouldUpdate = true;
}
if (!rows.includes(element)) {
rows.push(element);
shouldUpdate = true;
}
if (shouldUpdate)
data.state.update('_internal.elements.chart-timeline-grid-rows', rows, { only: null });
}
destroy(element, data) {
data.state.update('_internal.elements.chart-timeline-grid-rows', rows => {
return rows.filter(el => el !== element);
});
}
}
function ChartTimelineGridRow(vido, props) {
const { api, state, onDestroy, Detach, Actions, update, html, reuseComponents, onChange, StyleMap } = vido;
const componentName = 'chart-timeline-grid-row';
const actionProps = Object.assign(Object.assign({}, props), { api,
state });
let wrapper;
onDestroy(state.subscribe('config.wrappers.ChartTimelineGridRow', value => {
wrapper = value;
update();
}));
const GridBlockComponent = state.get('config.components.ChartTimelineGridRowBlock');
const componentActions = api.getActions(componentName);
let className;
onDestroy(state.subscribe('config.classNames', () => {
className = api.getClass(componentName);
}));
const styleMap = new StyleMap({
width: props.width + 'px',
height: props.row.height + 'px',
overflow: 'hidden'
}, true);
let shouldDetach = false;
const detach = new Detach(() => shouldDetach);
const rowsBlocksComponents = [];
onChange(function onPropsChange(changedProps, options) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
if (options.leave || changedProps.row === undefined) {
shouldDetach = true;
reuseComponents(rowsBlocksComponents, [], block => block, GridBlockComponent);
update();
return;
}
shouldDetach = false;
props = changedProps;
reuseComponents(rowsBlocksComponents, props.blocks, block => block, GridBlockComponent);
styleMap.setStyle({});
styleMap.style.height = props.row.height + 'px';
styleMap.style.width = props.width + 'px';
const rows = state.get('config.list.rows');
for (const parentId of props.row._internal.parents) {
const parent = rows[parentId];
const childrenStyle = (_d = (_c = (_b = (_a = parent) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.grid) === null || _c === void 0 ? void 0 : _c.row) === null || _d === void 0 ? void 0 : _d.children;
if (childrenStyle)
for (const name in childrenStyle) {
styleMap.style[name] = childrenStyle[name];
}
}
const currentStyle = (_j = (_h = (_g = (_f = (_e = props) === null || _e === void 0 ? void 0 : _e.row) === null || _f === void 0 ? void 0 : _f.style) === null || _g === void 0 ? void 0 : _g.grid) === null || _h === void 0 ? void 0 : _h.row) === null || _j === void 0 ? void 0 : _j.current;
if (currentStyle)
for (const name in currentStyle) {
styleMap.style[name] = currentStyle[name];
}
for (const prop in props) {
actionProps[prop] = props[prop];
}
update();
});
onDestroy(function destroy() {
rowsBlocksComponents.forEach(rowBlock => rowBlock.destroy());
});
if (componentActions.indexOf(BindElementAction$4) === -1) {
componentActions.push(BindElementAction$4);
}
const actions = Actions.create(componentActions, actionProps);
return templateProps => {
return wrapper(html `
<div detach=${detach} class=${className} data-actions=${actions} style=${styleMap}>
${rowsBlocksComponents.map(r => r.html())}
</div>
`, { vido, props, templateProps });
};
}
/**
* ChartTimelineGridRowBlock component
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0 (https://github.com/neuronetio/gantt-schedule-timeline-calendar/blob/master/LICENSE)
* @link https://github.com/neuronetio/gantt-schedule-timeline-calendar
*/
/**
* Bind element action
* @param {Element} element
* @param {any} data
* @returns {object} with update and destroy
*/
class BindElementAction$5 {
constructor(element, data) {
let shouldUpdate = false;
let blocks = data.state.get('_internal.elements.chart-timeline-grid-row-blocks');
if (typeof blocks === 'undefined') {
blocks = [];
shouldUpdate = true;
}
if (!blocks.includes(element)) {
blocks.push(element);
shouldUpdate = true;
}
if (shouldUpdate)
data.state.update('_internal.elements.chart-timeline-grid-row-blocks', blocks, { only: null });
}
destroy(element, data) {
data.state.update('_internal.elements.chart-timeline-grid-row-blocks', blocks => {
return blocks.filter(el => el !== element);
}, { only: [''] });
}
}
const ChartTimelineGridRowBlock = (vido, props) => {
const { api, state, onDestroy, Detach, Actions, update, html, onChange, StyleMap } = vido;
const componentName = 'chart-timeline-grid-row-block';
const actionProps = Object.assign(Object.assign({}, props), { api,
state });
let shouldDetach = false;
const detach = new Detach(() => shouldDetach);
const componentActions = api.getActions(componentName);
let wrapper;
onDestroy(state.subscribe('config.wrappers.ChartTimelineGridRowBlock', value => {
wrapper = value;
update();
}));
let className;
function updateClassName(time) {
const currentTime = api.time
.date()
.startOf(time.period)
.valueOf();
className = api.getClass(componentName);
if (time.leftGlobal === currentTime) {
className += ' current';
}
}
updateClassName(props.time);
const styleMap = new StyleMap({ width: '', height: '' });
/**
* On props change
* @param {any} changedProps
*/
function onPropsChange(changedProps, options) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
if (options.leave || changedProps.row === undefined) {
shouldDetach = true;
return update();
}
shouldDetach = false;
props = changedProps;
for (const prop in props) {
actionProps[prop] = props[prop];
}
updateClassName(props.time);
styleMap.setStyle({});
styleMap.style.width = (((_b = (_a = props) === null || _a === void 0 ? void 0 : _a.time) === null || _b === void 0 ? void 0 : _b.width) || 0) + 'px';
styleMap.style.height = (((_d = (_c = props) === null || _c === void 0 ? void 0 : _c.row) === null || _d === void 0 ? void 0 : _d.height) || 0) + 'px';
const rows = state.get('config.list.rows');
for (const parentId of props.row._internal.parents) {
const parent = rows[parentId];
const childrenStyle = (_h = (_g = (_f = (_e = parent) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.grid) === null || _g === void 0 ? void 0 : _g.block) === null || _h === void 0 ? void 0 : _h.children;
if (childrenStyle)
styleMap.setStyle(Object.assign(Object.assign({}, styleMap.style), childrenStyle));
}
const currentStyle = (_o = (_m = (_l = (_k = (_j = props) === null || _j === void 0 ? void 0 : _j.row) === null || _k === void 0 ? void 0 : _k.style) === null || _l === void 0 ? void 0 : _l.grid) === null || _m === void 0 ? void 0 : _m.block) === null || _o === void 0 ? void 0 : _o.current;
if (currentStyle)
styleMap.setStyle(Object.assign(Object.assign({}, styleMap.style), currentStyle));
update();
}
onChange(onPropsChange);
componentActions.push(BindElementAction$5);
const actions = Actions.create(componentActions, actionProps);
return templateProps => {
return wrapper(html `
<div detach=${detach} class=${className} data-actions=${actions} style=${styleMap}></div>
`, { props, vido, templateProps });
};
};
/**
* ChartTimelineItems component
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0 (https://github.com/neuronetio/gantt-schedule-timeline-calendar/blob/master/LICENSE)
* @link https://github.com/neuronetio/gantt-schedule-timeline-calendar
*/
function ChartTimelineItems(vido, props = {}) {
const { api, state, onDestroy, Actions, update, html, reuseComponents, StyleMap } = vido;
const componentName = 'chart-timeline-items';
const componentActions = api.getActions(componentName);
let wrapper;
onDestroy(state.subscribe('config.wrappers.ChartTimelineItems', value => (wrapper = value)));
let ItemsRowComponent;
onDestroy(state.subscribe('config.components.ChartTimelineItemsRow', value => (ItemsRowComponent = value)));
let className;
onDestroy(state.subscribe('config.classNames', () => {
className = api.getClass(componentName);
update();
}));
const styleMap = new StyleMap({}, true);
function calculateStyle() {
const width = state.get('_internal.chart.dimensions.width');
const height = state.get('_internal.height');
const yCompensation = api.getCompensationY();
const xCompensation = api.getCompensationX();
styleMap.style.width = width + xCompensation + 'px';
styleMap.style.height = height + Math.abs(yCompensation) + 'px';
}
onDestroy(state.subscribeAll([
'_internal.height',
'_internal.chart.dimensions.width',
'config.scroll.compensation',
'_internal.chart.time.dates.day'
], calculateStyle));
const rowsComponents = [];
function createRowComponents() {
const visibleRows = state.get('_internal.list.visibleRows');
reuseComponents(rowsComponents, visibleRows || [], row => ({ row }), ItemsRowComponent);
update();
}
onDestroy(state.subscribeAll(['_internal.list.visibleRows;', 'config.chart.items'], createRowComponents));
onDestroy(() => {
rowsComponents.forEach(row => row.destroy());
});
const actions = Actions.create(componentActions, { api, state });
return templateProps => wrapper(html `
<div class=${className} style=${styleMap} data-actions=${actions}>
${rowsComponents.map(r => r.html())}
</div>
`, { props, vido, templateProps });
}
/**
* ChartTimelineItemsRow component
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0 (https://github.com/neuronetio/gantt-schedule-timeline-calendar/blob/master/LICENSE)
* @link https://github.com/neuronetio/gantt-schedule-timeline-calendar
*/
/**
* Bind element action
* @param {Element} element
* @param {any} data
*/
class BindElementAction$6 {
constructor(element, data) {
let shouldUpdate = false;
let rows = data.state.get('_internal.elements.chart-timeline-items-rows');
if (typeof rows === 'undefined') {
rows = [];
shouldUpdate = true;
}
if (!rows.includes(element)) {
rows.push(element);
shouldUpdate = true;
}
if (shouldUpdate)
data.state.update('_internal.elements.chart-timeline-items-rows', rows, { only: null });
}
destroy(element, data) {
data.state.update('_internal.elements.chart-timeline-items-rows', rows => {
return rows.filter(el => el !== element);
});
}
}
const ChartTimelineItemsRow = (vido, props) => {
const { api, state, onDestroy, Detach, Actions, update, html, onChange, reuseComponents, StyleMap } = vido;
const actionProps = Object.assign(Object.assign({}, props), { api, state });
let wrapper;
onDestroy(state.subscribe('config.wrappers.ChartTimelineItemsRow', value => (wrapper = value)));
let ItemComponent;
onDestroy(state.subscribe('config.components.ChartTimelineItemsRowItem', value => (ItemComponent = value)));
let itemsPath = `_internal.flatTreeMapById.${props.row.id}._internal.items`;
let rowSub, itemsSub;
const itemComponents = [], styleMap = new StyleMap({ width: '', height: '' }, true);
let shouldDetach = false;
const detach = new Detach(() => shouldDetach);
const updateDom = () => {
const chart = state.get('_internal.chart');
shouldDetach = false;
const xCompensation = api.getCompensationX();
styleMap.style.width = chart.dimensions.width + xCompensation + 'px';
if (!props) {
shouldDetach = true;
return;
}
styleMap.style.height = props.row.height + 'px';
styleMap.style['--row-height'] = props.row.height + 'px';
};
function updateRow(row) {
itemsPath = `_internal.flatTreeMapById.${row.id}._internal.items`;
if (typeof rowSub === 'function') {
rowSub();
}
if (typeof itemsSub === 'function') {
itemsSub();
}
rowSub = state.subscribe('_internal.chart', value => {
if (value === undefined) {
shouldDetach = true;
return update();
}
updateDom();
update();
});
itemsSub = state.subscribe(itemsPath, value => {
if (value === undefined) {
shouldDetach = true;
reuseComponents(itemComponents, [], item => ({ row, item }), ItemComponent);
return update();
}
reuseComponents(itemComponents, value, item => ({ row, item }), ItemComponent);
updateDom();
update();
});
}
/**
* On props change
* @param {any} changedProps
*/
onChange((changedProps, options) => {
if (options.leave || changedProps.row === undefined) {
shouldDetach = true;
return update();
}
props = changedProps;
for (const prop in props) {
actionProps[prop] = props[prop];
}
updateRow(props.row);
});
onDestroy(() => {
itemsSub();
rowSub();
itemComponents.forEach(item => item.destroy());
});
const componentName = 'chart-timeline-items-row';
const componentActions = api.getActions(componentName);
let className;
onDestroy(state.subscribe('config.classNames', () => {
className = api.getClass(componentName, props);
update();
}));
componentActions.push(BindElementAction$6);
const actions = Actions.create(componentActions, actionProps);
return templateProps => {
return wrapper(html `
<div detach=${detach} class=${className} data-actions=${actions} style=${styleMap}>
${itemComponents.map(i => i.html())}
</div>
`, { props, vido, templateProps });
};
};
/**
* ChartTimelineItemsRowItem component
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0 (https://github.com/neuronetio/gantt-schedule-timeline-calendar/blob/master/LICENSE)
* @link https://github.com/neuronetio/gantt-schedule-timeline-calendar
*/
/**
* Bind element action
*/
class BindElementAction$7 {
constructor(element, data) {
let shouldUpdate = false;
let items = data.state.get('_internal.elements.chart-timeline-items-row-items');
if (typeof items === 'undefined') {
items = [];
shouldUpdate = true;
}
if (!items.includes(element)) {
items.push(element);
shouldUpdate = true;
}
if (shouldUpdate)
data.state.update('_internal.elements.chart-timeline-items-row-items', items, { only: null });
}
destroy(element, data) {
data.state.update('_internal.elements.chart-timeline-items-row-items', items => {
return items.filter(el => el !== element);
});
}
}
function ChartTimelineItemsRowItem(vido, props) {
const { api, state, onDestroy, Detach, Actions, update, html, onChange, unsafeHTML, StyleMap } = vido;
let wrapper;
onDestroy(state.subscribe('config.wrappers.ChartTimelineItemsRowItem', value => (wrapper = value)));
let itemLeftPx = 0, itemWidthPx = 0, leave = false, cutLeft = false, cutRight = false;
const styleMap = new StyleMap({ width: '', height: '', left: '' }), leftCutStyleMap = new StyleMap({ 'margin-left': '0px' }), rightCutStyleMap = new StyleMap({ 'margin-right': '0px' }), actionProps = {
item: props.item,
row: props.row,
left: itemLeftPx,
width: itemWidthPx,
api,
state
};
let shouldDetach = false;
function updateItem() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
if (leave)
return;
const time = state.get('_internal.chart.time');
itemLeftPx = api.time.globalTimeToViewPixelOffset(props.item.time.start);
itemLeftPx = Math.round(itemLeftPx * 10) * 0.1;
itemWidthPx = (props.item.time.end - props.item.time.start) / time.timePerPixel;
itemWidthPx -= state.get('config.chart.spacing') || 0;
if (itemWidthPx) {
itemWidthPx = Math.round(itemWidthPx * 10) * 0.1;
}
if (props.item.time.start < time.leftGlobal) {
leftCutStyleMap.style['margin-left'] = (time.leftGlobal - props.item.time.start) / time.timePerPixel + 'px';
cutLeft = true;
}
else {
leftCutStyleMap.style['margin-left'] = '0px';
cutLeft = false;
}
if (props.item.time.end > time.rightGlobal) {
rightCutStyleMap.style['margin-right'] = (props.item.time.end - time.rightGlobal) / time.timePerPixel + 'px';
cutRight = true;
}
else {
cutRight = false;
rightCutStyleMap.style['margin-right'] = '0px';
}
const oldWidth = styleMap.style.width;
const oldLeft = styleMap.style.left;
const xCompensation = api.getCompensationX();
styleMap.setStyle({});
const inViewPort = api.isItemInViewport(props.item, time.leftGlobal, time.rightGlobal);
shouldDetach = !inViewPort;
if (inViewPort) {
// update style only when visible to prevent browser's recalculate style
styleMap.style.width = itemWidthPx + 'px';
styleMap.style.left = itemLeftPx + xCompensation + 'px';
}
else {
styleMap.style.width = oldWidth;
styleMap.style.left = oldLeft;
}
const rows = state.get('config.list.rows');
for (const parentId of props.row._internal.parents) {
const parent = rows[parentId];
const childrenStyle = (_d = (_c = (_b = (_a = parent) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.item) === null || _d === void 0 ? void 0 : _d.children;
if (childrenStyle)
styleMap.setStyle(Object.assign(Object.assign({}, styleMap.style), childrenStyle));
}
const currentRowItemsStyle = (_j = (_h = (_g = (_f = (_e = props) === null || _e === void 0 ? void 0 : _e.row) === null || _f === void 0 ? void 0 : _f.style) === null || _g === void 0 ? void 0 : _g.items) === null || _h === void 0 ? void 0 : _h.item) === null || _j === void 0 ? void 0 : _j.current;
if (currentRowItemsStyle)
styleMap.setStyle(Object.assign(Object.assign({}, styleMap.style), currentRowItemsStyle));
const currentStyle = (_l = (_k = props) === null || _k === void 0 ? void 0 : _k.item) === null || _l === void 0 ? void 0 : _l.style;
if (currentStyle)
styleMap.setStyle(Object.assign(Object.assign({}, styleMap.style), currentStyle));
actionProps.left = itemLeftPx + xCompensation;
actionProps.width = itemWidthPx;
update();
}
const componentName = 'chart-timeline-items-row-item';
const cutterName = api.getClass(componentName) + '-cut';
const cutterLeft = html `
<div class=${cutterName} style=${leftCutStyleMap}>
<svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 18 16" width="16">
<path fill-opacity="0.5" fill="#ffffff" d="m5,3l-5,5l5,5l0,-10z" />
</svg>
</div>
`;
const cutterRight = html `
<div class=${cutterName} style=${rightCutStyleMap}>
<svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 4 16" width="16">
<path transform="rotate(-180 2.5,8) " fill-opacity="0.5" fill="#ffffff" d="m5,3l-5,5l5,5l0,-10z" />
</svg>
</div>
`;
function onPropsChange(changedProps, options) {
if (options.leave || changedProps.row === undefined || changedProps.item === undefined) {
leave = true;
shouldDetach = true;
return update();
}
else {
shouldDetach = false;
leave = false;
}
props = changedProps;
actionProps.item = props.item;
actionProps.row = props.row;
updateItem();
}
onChange(onPropsChange);
const componentActions = api.getActions(componentName);
let className, labelClassName;
onDestroy(state.subscribe('config.classNames', () => {
className = api.getClass(componentName, props);
labelClassName = api.getClass(componentName + '-label', props);
update();
}));
onDestroy(state.subscribeAll(['_internal.chart.time', 'config.scroll.compensation.x'], updateItem));
componentActions.push(BindElementAction$7);
const actions = Actions.create(componentActions, actionProps);
const detach = new Detach(() => shouldDetach);
return templateProps => {
return wrapper(html `
<div detach=${detach} class=${className} data-actions=${actions} style=${styleMap}>
${cutLeft ? cutterLeft : ''}
<div class=${labelClassName}>
${props.item.isHtml ? unsafeHTML(props.item.label) : props.item.label}
</div>
${cutRight ? cutterRight : ''}
</div>
`, { vido, props, templateProps });
};
}
/**
* Gantt-Schedule-Timeline-Calendar
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0
*/
const actionNames = [
'main',
'list',
'list-column',
'list-column-header',
'list-column-header-resizer',
'list-column-header-resizer-dots',
'list-column-row',
'list-column-row-expander',
'list-column-row-expander-toggle',
'list-toggle',
'chart',
'chart-calendar',
'chart-calendar-date',
'chart-timeline',
'chart-timeline-grid',
'chart-timeline-grid-row',
'chart-timeline-grid-row-block',
'chart-timeline-items',
'chart-timeline-items-row',
'chart-timeline-items-row-item'
];
function generateEmptyActions() {
const actions = {};
actionNames.forEach(name => (actions[name] = []));
return actions;
}
function generateEmptySlots() {
const slots = {};
actionNames.forEach(name => {
slots[name] = { before: [], after: [] };
});
return slots;
}
// default configuration
function defaultConfig() {
const actions = generateEmptyActions();
const slots = generateEmptySlots();
return {
plugins: [],
plugin: {},
height: 822,
headerHeight: 72,
components: {
Main,
List,
ListColumn,
ListColumnHeader,
ListColumnHeaderResizer,
ListColumnRow,
ListColumnRowExpander,
ListColumnRowExpanderToggle,
ListToggle,
Chart,
ChartCalendar,
ChartCalendarDate: ChartCalendarDay,
ChartTimeline,
ChartTimelineGrid,
ChartTimelineGridRow,
ChartTimelineGridRowBlock,
ChartTimelineItems,
ChartTimelineItemsRow,
ChartTimelineItemsRowItem
},
wrappers: {
Main(input) {
return input;
},
List(input) {
return input;
},
ListColumn(input) {
return input;
},
ListColumnHeader(input) {
return input;
},
ListColumnHeaderResizer(input) {
return input;
},
ListColumnRow(input) {
return input;
},
ListColumnRowExpander(input) {
return input;
},
ListColumnRowExpanderToggle(input) {
return input;
},
ListToggle(input) {
return input;
},
Chart(input) {
return input;
},
ChartCalendar(input) {
return input;
},
ChartCalendarDate(input) {
return input;
},
ChartTimeline(input) {
return input;
},
ChartTimelineGrid(input) {
return input;
},
ChartTimelineGridRow(input) {
return input;
},
ChartTimelineGridRowBlock(input) {
return input;
},
ChartTimelineItems(input) {
return input;
},
ChartTimelineItemsRow(input) {
return input;
},
ChartTimelineItemsRowItem(input) {
return input;
}
},
list: {
rows: {},
rowHeight: 40,
columns: {
percent: 100,
resizer: {
width: 10,
inRealTime: true,
dots: 6
},
minWidth: 50,
data: {}
},
expander: {
padding: 18,
size: 20,
icon: {
width: 16,
height: 16
},
icons: {
child: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><ellipse ry="4" rx="4" id="svg_1" cy="12" cx="12" fill="#000000B0"/></svg>',
open: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/><path fill="none" d="M0 0h24v24H0V0z"/></svg>',
closed: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/><path fill="none" d="M0 0h24v24H0V0z"/></svg>'
}
},
toggle: {
display: true,
icons: {
open: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path stroke="null" d="m16.406954,16.012672l4.00393,-4.012673l-4.00393,-4.012673l1.232651,-1.232651l5.245324,5.245324l-5.245324,5.245324l-1.232651,-1.232651z"/><path stroke="null" d="m-0.343497,12.97734zm1.620144,0l11.341011,0l0,-1.954681l-11.341011,0l0,1.954681zm0,3.909362l11.341011,0l0,-1.954681l-11.341011,0l0,1.954681zm0,-9.773404l0,1.95468l11.341011,0l0,-1.95468l-11.341011,0z"/></svg>`,
close: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path transform="rotate(-180 4.392796516418457,12) " stroke="null" d="m1.153809,16.012672l4.00393,-4.012673l-4.00393,-4.012673l1.232651,-1.232651l5.245324,5.245324l-5.245324,5.245324l-1.232651,-1.232651z"/><path stroke="null" d="m9.773297,12.97734zm1.620144,0l11.341011,0l0,-1.954681l-11.341011,0l0,1.954681zm0,3.909362l11.341011,0l0,-1.954681l-11.341011,0l0,1.954681zm0,-9.773404l0,1.95468l11.341011,0l0,-1.95468l-11.341011,0z"/></svg>`
}
}
},
scroll: {
propagate: true,
smooth: false,
top: 0,
left: 0,
xMultiplier: 3,
yMultiplier: 3,
percent: {
top: 0,
left: 0
},
compensation: {
x: 0,
y: 0
}
},
chart: {
time: {
period: 'day',
from: 0,
to: 0,
finalFrom: 0,
finalTo: 0,
zoom: 21,
leftGlobal: 0,
centerGlobal: 0,
rightGlobal: 0,
levels: [],
calculatedZoomMode: false
},
calendar: {
expand: true,
levels: [
{
formats: [
{
zoomTo: 17,
period: 'day',
className: 'gstc-date-medium gstc-date-left',
format({ timeStart }) {
return timeStart.format('DD MMMM YYYY (dddd)');
}
},
{
zoomTo: 23,
period: 'month',
format({ timeStart }) {
return timeStart.format('MMMM YYYY');
}
},
{
zoomTo: 24,
period: 'month',
format({ timeStart, className, vido }) {
return timeStart.format("MMMM 'YY");
}
},
{
zoomTo: 25,
period: 'month',
format({ timeStart }) {
return timeStart.format('MMM YYYY');
}
},
{
zoomTo: 27,
period: 'year',
format({ timeStart }) {
return timeStart.format('YYYY');
}
},
{
zoomTo: 100,
period: 'year',
default: true,
format() {
return null;
}
}
]
},
{
main: true,
formats: [
{
zoomTo: 16,
period: 'hour',
format({ timeStart }) {
return timeStart.format('HH:mm');
}
},
{
zoomTo: 17,
period: 'hour',
default: true,
format({ timeStart }) {
return timeStart.format('HH');
}
},
{
zoomTo: 19,
period: 'day',
className: 'gstc-date-medium',
format({ timeStart, className, vido }) {
return vido.html `<span class="${className}-content gstc-date-bold">${timeStart.format('DD')}</span> <span class="${className}-content gstc-date-thin">${timeStart.format('dddd')}</span>`;
}
},
{
zoomTo: 20,
period: 'day',
default: true,
format({ timeStart, vido, className }) {
return vido.html `<div class="${className}-content gstc-date-top">${timeStart.format('DD')}</div><div class="${className}-content gstc-date-small">${timeStart.format('dddd')}</div>`;
}
},
{
zoomTo: 21,
period: 'day',
format({ timeStart, vido, className }) {
return vido.html `<div class="${className}-content gstc-date-top">${timeStart.format('DD')}</div><div class="${className}-content gstc-date-small">${timeStart.format('ddd')}</div>`;
}
},
{
zoomTo: 22,
period: 'day',
className: 'gstc-date-vertical',
format({ timeStart, className, vido }) {
return vido.html `<div class="${className}-content gstc-date-top">${timeStart.format('DD')}</div><div class="${className}-content gstc-date-extra-small">${timeStart.format('ddd')}</div>`;
}
},
{
zoomTo: 23,
period: 'week',
default: true,
format({ timeStart, timeEnd, className, vido }) {
return vido.html `<div class="${className}-content gstc-date-top">${timeStart.format('DD')} - ${timeEnd.format('DD')}</div><div class="${className}-content gstc-date-small gstc-date-thin">${timeStart.format('ddd')} - ${timeEnd.format('dd')}</div>`;
}
},
{
zoomTo: 25,
period: 'week',
className: 'gstc-date-vertical',
format({ timeStart, timeEnd, className, vido }) {
return vido.html `<div class="${className}-content gstc-date-top gstc-date-small gstc-date-normal">${timeStart.format('DD')}</div><div class="gstc-dash gstc-date-small">-</div><div class="${className}-content gstc-date-small gstc-date-normal">${timeEnd.format('DD')}</div>`;
}
},
{
zoomTo: 26,
period: 'month',
default: true,
className: 'gstc-date-month-level-1',
format({ timeStart, vido, className }) {
return vido.html `<div class="${className}-content gstc-date-top">${timeStart.format('MMM')}</div><div class="${className}-content gstc-date-small gstc-date-bottom">${timeStart.format('MM')}</div>`;
}
},
{
zoomTo: 27,
period: 'month',
className: 'gstc-date-vertical',
format({ timeStart, className, vido }) {
return vido.html `<div class="${className}-content gstc-date-top">${timeStart.format('MM')}</div><div class="${className}-content gstc-date-extra-small">${timeStart.format('MMM')}</div>`;
}
},
{
zoomTo: 28,
period: 'year',
default: true,
className: 'gstc-date-big',
format({ timeStart }) {
return timeStart.format('YYYY');
}
},
{
zoomTo: 29,
period: 'year',
className: 'gstc-date-medium',
format({ timeStart }) {
return timeStart.format('YYYY');
}
},
{
zoomTo: 30,
period: 'year',
className: 'gstc-date-medium',
format({ timeStart }) {
return timeStart.format('YY');
}
},
{
zoomTo: 100,
period: 'year',
default: true,
format() {
return null;
}
}
]
}
]
},
grid: {
block: {
onCreate: []
}
},
items: {},
spacing: 1
},
slots,
classNames: {},
actions,
locale: {
name: 'en',
weekdays: 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'),
weekdaysShort: 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'),
weekdaysMin: 'Su_Mo_Tu_We_Th_Fr_Sa'.split('_'),
months: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),
monthsShort: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'),
weekStart: 1,
relativeTime: {
future: 'in %s',
past: '%s ago',
s: 'a few seconds',
m: 'a minute',
mm: '%d minutes',
h: 'an hour',
hh: '%d hours',
d: 'a day',
dd: '%d days',
M: 'a month',
MM: '%d months',
y: 'a year',
yy: '%d years'
},
formats: {
LT: 'HH:mm',
LTS: 'HH:mm:ss',
L: 'DD/MM/YYYY',
LL: 'D MMMM YYYY',
LLL: 'D MMMM YYYY HH:mm',
LLLL: 'dddd, D MMMM YYYY HH:mm'
},
ordinal: (n) => {
const s = ['th', 'st', 'nd', 'rd'];
const v = n % 100;
return `[${n}${s[(v - 20) % 10] || s[v] || s[0]}]`;
}
},
utcMode: false,
usageStatistics: true
};
}
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
var dayjs_min = createCommonjsModule(function (module, exports) {
!function(t,n){module.exports=n();}(commonjsGlobal,function(){var t="millisecond",n="second",e="minute",r="hour",i="day",s="week",u="month",o="quarter",a="year",h=/^(\d{4})-?(\d{1,2})-?(\d{0,2})[^0-9]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?.?(\d{1,3})?$/,f=/\[([^\]]+)]|Y{2,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,c=function(t,n,e){var r=String(t);return !r||r.length>=n?t:""+Array(n+1-r.length).join(e)+t},d={s:c,z:function(t){var n=-t.utcOffset(),e=Math.abs(n),r=Math.floor(e/60),i=e%60;return (n<=0?"+":"-")+c(r,2,"0")+":"+c(i,2,"0")},m:function(t,n){var e=12*(n.year()-t.year())+(n.month()-t.month()),r=t.clone().add(e,u),i=n-r<0,s=t.clone().add(e+(i?-1:1),u);return Number(-(e+(n-r)/(i?r-s:s-r))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(h){return {M:u,y:a,w:s,d:i,D:"date",h:r,m:e,s:n,ms:t,Q:o}[h]||String(h||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},$={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_")},l="en",m={};m[l]=$;var y=function(t){return t instanceof v},M=function(t,n,e){var r;if(!t)return l;if("string"==typeof t)m[t]&&(r=t),n&&(m[t]=n,r=t);else{var i=t.name;m[i]=t,r=i;}return !e&&r&&(l=r),r||!e&&l},g=function(t,n,e){if(y(t))return t.clone();var r=n?"string"==typeof n?{format:n,pl:e}:n:{};return r.date=t,new v(r)},D=d;D.l=M,D.i=y,D.w=function(t,n){return g(t,{locale:n.$L,utc:n.$u,$offset:n.$offset})};var v=function(){function c(t){this.$L=this.$L||M(t.locale,null,!0),this.parse(t);}var d=c.prototype;return d.parse=function(t){this.$d=function(t){var n=t.date,e=t.utc;if(null===n)return new Date(NaN);if(D.u(n))return new Date;if(n instanceof Date)return new Date(n);if("string"==typeof n&&!/Z$/i.test(n)){var r=n.match(h);if(r)return e?new Date(Date.UTC(r[1],r[2]-1,r[3]||1,r[4]||0,r[5]||0,r[6]||0,r[7]||0)):new Date(r[1],r[2]-1,r[3]||1,r[4]||0,r[5]||0,r[6]||0,r[7]||0)}return new Date(n)}(t),this.init();},d.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},d.$utils=function(){return D},d.isValid=function(){return !("Invalid Date"===this.$d.toString())},d.isSame=function(t,n){var e=g(t);return this.startOf(n)<=e&&e<=this.endOf(n)},d.isAfter=function(t,n){return g(t)<this.startOf(n)},d.isBefore=function(t,n){return this.endOf(n)<g(t)},d.$g=function(t,n,e){return D.u(t)?this[n]:this.set(e,t)},d.year=function(t){return this.$g(t,"$y",a)},d.month=function(t){return this.$g(t,"$M",u)},d.day=function(t){return this.$g(t,"$W",i)},d.date=function(t){return this.$g(t,"$D","date")},d.hour=function(t){return this.$g(t,"$H",r)},d.minute=function(t){return this.$g(t,"$m",e)},d.second=function(t){return this.$g(t,"$s",n)},d.millisecond=function(n){return this.$g(n,"$ms",t)},d.unix=function(){return Math.floor(this.valueOf()/1e3)},d.valueOf=function(){return this.$d.getTime()},d.startOf=function(t,o){var h=this,f=!!D.u(o)||o,c=D.p(t),d=function(t,n){var e=D.w(h.$u?Date.UTC(h.$y,n,t):new Date(h.$y,n,t),h);return f?e:e.endOf(i)},$=function(t,n){return D.w(h.toDate()[t].apply(h.toDate(),(f?[0,0,0,0]:[23,59,59,999]).slice(n)),h)},l=this.$W,m=this.$M,y=this.$D,M="set"+(this.$u?"UTC":"");switch(c){case a:return f?d(1,0):d(31,11);case u:return f?d(1,m):d(0,m+1);case s:var g=this.$locale().weekStart||0,v=(l<g?l+7:l)-g;return d(f?y-v:y+(6-v),m);case i:case"date":return $(M+"Hours",0);case r:return $(M+"Minutes",1);case e:return $(M+"Seconds",2);case n:return $(M+"Milliseconds",3);default:return this.clone()}},d.endOf=function(t){return this.startOf(t,!1)},d.$set=function(s,o){var h,f=D.p(s),c="set"+(this.$u?"UTC":""),d=(h={},h[i]=c+"Date",h.date=c+"Date",h[u]=c+"Month",h[a]=c+"FullYear",h[r]=c+"Hours",h[e]=c+"Minutes",h[n]=c+"Seconds",h[t]=c+"Milliseconds",h)[f],$=f===i?this.$D+(o-this.$W):o;if(f===u||f===a){var l=this.clone().set("date",1);l.$d[d]($),l.init(),this.$d=l.set("date",Math.min(this.$D,l.daysInMonth())).toDate();}else d&&this.$d[d]($);return this.init(),this},d.set=function(t,n){return this.clone().$set(t,n)},d.get=function(t){return this[D.p(t)]()},d.add=function(t,o){var h,f=this;t=Number(t);var c=D.p(o),d=function(n){var e=g(f);return D.w(e.date(e.date()+Math.round(n*t)),f)};if(c===u)return this.set(u,this.$M+t);if(c===a)return this.set(a,this.$y+t);if(c===i)return d(1);if(c===s)return d(7);var $=(h={},h[e]=6e4,h[r]=36e5,h[n]=1e3,h)[c]||1,l=this.$d.getTime()+t*$;return D.w(l,this)},d.subtract=function(t,n){return this.add(-1*t,n)},d.format=function(t){var n=this;if(!this.isValid())return "Invalid Date";var e=t||"YYYY-MM-DDTHH:mm:ssZ",r=D.z(this),i=this.$locale(),s=this.$H,u=this.$m,o=this.$M,a=i.weekdays,h=i.months,c=function(t,r,i,s){return t&&(t[r]||t(n,e))||i[r].substr(0,s)},d=function(t){return D.s(s%12||12,t,"0")},$=i.meridiem||function(t,n,e){var r=t<12?"AM":"PM";return e?r.toLowerCase():r},l={YY:String(this.$y).slice(-2),YYYY:this.$y,M:o+1,MM:D.s(o+1,2,"0"),MMM:c(i.monthsShort,o,h,3),MMMM:h[o]||h(this,e),D:this.$D,DD:D.s(this.$D,2,"0"),d:String(this.$W),dd:c(i.weekdaysMin,this.$W,a,2),ddd:c(i.weekdaysShort,this.$W,a,3),dddd:a[this.$W],H:String(s),HH:D.s(s,2,"0"),h:d(1),hh:d(2),a:$(s,u,!0),A:$(s,u,!1),m:String(u),mm:D.s(u,2,"0"),s:String(this.$s),ss:D.s(this.$s,2,"0"),SSS:D.s(this.$ms,3,"0"),Z:r};return e.replace(f,function(t,n){return n||l[t]||r.replace(":","")})},d.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},d.diff=function(t,h,f){var c,d=D.p(h),$=g(t),l=6e4*($.utcOffset()-this.utcOffset()),m=this-$,y=D.m(this,$);return y=(c={},c[a]=y/12,c[u]=y,c[o]=y/3,c[s]=(m-l)/6048e5,c[i]=(m-l)/864e5,c[r]=m/36e5,c[e]=m/6e4,c[n]=m/1e3,c)[d]||m,f?y:D.a(y)},d.daysInMonth=function(){return this.endOf(u).$D},d.$locale=function(){return m[this.$L]},d.locale=function(t,n){if(!t)return this.$L;var e=this.clone(),r=M(t,n,!0);return r&&(e.$L=r),e},d.clone=function(){return D.w(this.$d,this)},d.toDate=function(){return new Date(this.valueOf())},d.toJSON=function(){return this.isValid()?this.toISOString():null},d.toISOString=function(){return this.$d.toISOString()},d.toString=function(){return this.$d.toUTCString()},c}();return g.prototype=v.prototype,g.extend=function(t,n){return t(n,v,g),g},g.locale=M,g.isDayjs=y,g.unix=function(t){return g(1e3*t)},g.en=m[l],g.Ls=m,g});
});
var utc = createCommonjsModule(function (module, exports) {
!function(t,i){module.exports=i();}(commonjsGlobal,function(){return function(t,i,e){var s=(new Date).getTimezoneOffset(),n=i.prototype;e.utc=function(t,e){return new i({date:t,utc:!0,format:e})},n.utc=function(){return e(this.toDate(),{locale:this.$L,utc:!0})},n.local=function(){return e(this.toDate(),{locale:this.$L,utc:!1})};var u=n.parse;n.parse=function(t){t.utc&&(this.$u=!0),this.$utils().u(t.$offset)||(this.$offset=t.$offset),u.call(this,t);};var o=n.init;n.init=function(){if(this.$u){var t=this.$d;this.$y=t.getUTCFullYear(),this.$M=t.getUTCMonth(),this.$D=t.getUTCDate(),this.$W=t.getUTCDay(),this.$H=t.getUTCHours(),this.$m=t.getUTCMinutes(),this.$s=t.getUTCSeconds(),this.$ms=t.getUTCMilliseconds();}else o.call(this);};var f=n.utcOffset;n.utcOffset=function(t){var i=this.$utils().u;if(i(t))return this.$u?0:i(this.$offset)?f.call(this):this.$offset;var e,n=Math.abs(t)<=16?60*t:t;return 0!==t?(e=this.local().add(n+s,"minute")).$offset=n:e=this.utc(),e};var r=n.format;n.format=function(t){var i=t||(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return r.call(this,i)},n.valueOf=function(){var t=this.$utils().u(this.$offset)?0:this.$offset+s;return this.$d.valueOf()-6e4*t},n.isUTC=function(){return !!this.$u},n.toISOString=function(){return this.toDate().toISOString()},n.toString=function(){return this.toDate().toUTCString()};}});
});
var advancedFormat = createCommonjsModule(function (module, exports) {
!function(e,t){module.exports=t();}(commonjsGlobal,function(){return function(e,t,r){var n=t.prototype,o=n.format;r.en.ordinal=function(e){var t=["th","st","nd","rd"],r=e%100;return "["+e+(t[(r-20)%10]||t[r]||t[0])+"]"},n.format=function(e){var t=this,r=this.$locale(),n=this.$utils(),a=(e||"YYYY-MM-DDTHH:mm:ssZ").replace(/\[([^\]]+)]|Q|wo|ww|w|gggg|Do|X|x|k{1,2}|S/g,function(e){switch(e){case"Q":return Math.ceil((t.$M+1)/3);case"Do":return r.ordinal(t.$D);case"gggg":return t.weekYear();case"wo":return r.ordinal(t.week(),"W");case"w":case"ww":return n.s(t.week(),"w"===e?1:2,"0");case"k":case"kk":return n.s(String(0===t.$H?24:t.$H),"k"===e?1:2,"0");case"X":return Math.floor(t.$d.getTime()/1e3);case"x":return t.$d.getTime();default:return e}});return o.bind(this)(a)};}});
});
var weekOfYear = createCommonjsModule(function (module, exports) {
!function(e,t){module.exports=t();}(commonjsGlobal,function(){var e="week",t="year";return function(i,n){var r=n.prototype;r.week=function(i){if(void 0===i&&(i=null),null!==i)return this.add(7*(i-this.week()),"day");var n=this.$locale().yearStart||1;if(11===this.month()&&this.date()>25){var r=this.startOf(t).add(1,t).date(n),f=this.endOf(e);if(r.isBefore(f))return 1}var s=this.startOf(t).date(n).startOf(e).subtract(1,"millisecond"),a=this.diff(s,e,!0);return a<0?this.startOf("week").week():Math.ceil(a)},r.weeks=function(e){return void 0===e&&(e=null),this.week(e)};}});
});
/**
* Gantt-Schedule-Timeline-Calendar
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0
*/
dayjs_min.extend(advancedFormat);
dayjs_min.extend(weekOfYear);
class TimeApi {
constructor(state) {
this.utcMode = false;
this.state = state;
this.locale = state.get('config.locale');
this.utcMode = state.get('config.utcMode');
if (this.utcMode) {
dayjs_min.extend(utc);
}
// @ts-ignore
dayjs_min.locale(this.locale, null, true);
}
date(time) {
const _dayjs = this.utcMode ? dayjs_min.utc : dayjs_min;
return time ? _dayjs(time).locale(this.locale.name) : _dayjs().locale(this.locale.name);
}
addAdditionalSpace(time) {
if (time.additionalSpaces && time.additionalSpaces[time.period]) {
const add = time.additionalSpaces[time.period];
if (add.before) {
time.finalFrom = this.date(time.from)
.subtract(add.before, add.period)
.valueOf();
}
if (add.after) {
time.finalTo = this.date(time.to)
.add(add.after, add.period)
.valueOf();
}
}
return time;
}
recalculateFromTo(time) {
const period = time.period;
time = Object.assign({}, time);
time.from = +time.from;
time.to = +time.to;
let from = Number.MAX_SAFE_INTEGER, to = 0;
const items = this.state.get('config.chart.items');
if (Object.keys(items).length === 0) {
return time;
}
if (time.from === 0 || time.to === 0) {
for (const itemId in items) {
const item = items[itemId];
if (item.time.start < from && item.time.start) {
from = item.time.start;
}
if (item.time.end > to) {
to = item.time.end;
}
}
if (time.from === 0) {
time.from = this.date(from)
.startOf(period)
.valueOf();
}
if (time.to === 0) {
time.to = this.date(to)
.endOf(period)
.valueOf();
}
}
time.finalFrom = time.from;
time.finalTo = time.to;
time = this.addAdditionalSpace(time);
return time;
}
getCenter(time) {
return time.leftGlobal + (time.rightGlobal - time.leftGlobal) / 2;
}
timeToPixelOffset(milliseconds) {
const timePerPixel = this.state.get('_internal.chart.time.timePerPixel') || 1;
return milliseconds / timePerPixel;
}
globalTimeToViewPixelOffset(milliseconds, withCompensation = false) {
const time = this.state.get('_internal.chart.time');
let xCompensation = this.state.get('config.scroll.compensation.x') || 0;
const viewPixelOffset = (milliseconds - time.leftGlobal) / time.timePerPixel;
if (withCompensation)
return viewPixelOffset + xCompensation;
return viewPixelOffset;
}
}
// forked from https://github.com/joonhocho/superwild
function Matcher(pattern, wchar = '*') {
this.wchar = wchar;
this.pattern = pattern;
this.segments = [];
this.starCount = 0;
this.minLength = 0;
this.maxLength = 0;
this.segStartIndex = 0;
for (let i = 0, len = pattern.length; i < len; i += 1) {
const char = pattern[i];
if (char === wchar) {
this.starCount += 1;
if (i > this.segStartIndex) {
this.segments.push(pattern.substring(this.segStartIndex, i));
}
this.segments.push(char);
this.segStartIndex = i + 1;
}
}
if (this.segStartIndex < pattern.length) {
this.segments.push(pattern.substring(this.segStartIndex));
}
if (this.starCount) {
this.minLength = pattern.length - this.starCount;
this.maxLength = Infinity;
}
else {
this.maxLength = this.minLength = pattern.length;
}
}
Matcher.prototype.match = function match(match) {
if (this.pattern === this.wchar) {
return true;
}
if (this.segments.length === 0) {
return this.pattern === match;
}
const { length } = match;
if (length < this.minLength || length > this.maxLength) {
return false;
}
let segLeftIndex = 0;
let segRightIndex = this.segments.length - 1;
let rightPos = match.length - 1;
let rightIsStar = false;
while (true) {
const segment = this.segments[segRightIndex];
segRightIndex -= 1;
if (segment === this.wchar) {
rightIsStar = true;
}
else {
const lastIndex = rightPos + 1 - segment.length;
const index = match.lastIndexOf(segment, lastIndex);
if (index === -1 || index > lastIndex) {
return false;
}
if (rightIsStar) {
rightPos = index - 1;
rightIsStar = false;
}
else {
if (index !== lastIndex) {
return false;
}
rightPos -= segment.length;
}
}
if (segLeftIndex > segRightIndex) {
break;
}
}
return true;
};
function WildcardObject(obj, delimeter, wildcard) {
this.obj = obj;
this.delimeter = delimeter;
this.wildcard = wildcard;
}
WildcardObject.prototype.simpleMatch = function simpleMatch(first, second) {
if (first === second)
return true;
if (first === this.wildcard)
return true;
const index = first.indexOf(this.wildcard);
if (index > -1) {
const end = first.substr(index + 1);
if (index === 0 || second.substring(0, index) === first.substring(0, index)) {
const len = end.length;
if (len > 0) {
return second.substr(-len) === end;
}
return true;
}
}
return false;
};
WildcardObject.prototype.match = function match(first, second) {
return (first === second ||
first === this.wildcard ||
second === this.wildcard ||
this.simpleMatch(first, second) ||
new Matcher(first).match(second));
};
WildcardObject.prototype.handleArray = function handleArray(wildcard, currentArr, partIndex, path, result = {}) {
let nextPartIndex = wildcard.indexOf(this.delimeter, partIndex);
let end = false;
if (nextPartIndex === -1) {
end = true;
nextPartIndex = wildcard.length;
}
const currentWildcardPath = wildcard.substring(partIndex, nextPartIndex);
let index = 0;
for (const item of currentArr) {
const key = index.toString();
const currentPath = path === '' ? key : path + this.delimeter + index;
if (currentWildcardPath === this.wildcard ||
currentWildcardPath === key ||
this.simpleMatch(currentWildcardPath, key)) {
end ? (result[currentPath] = item) : this.goFurther(wildcard, item, nextPartIndex + 1, currentPath, result);
}
index++;
}
return result;
};
WildcardObject.prototype.handleObject = function handleObject(wildcard, currentObj, partIndex, path, result = {}) {
let nextPartIndex = wildcard.indexOf(this.delimeter, partIndex);
let end = false;
if (nextPartIndex === -1) {
end = true;
nextPartIndex = wildcard.length;
}
const currentWildcardPath = wildcard.substring(partIndex, nextPartIndex);
for (let key in currentObj) {
key = key.toString();
const currentPath = path === '' ? key : path + this.delimeter + key;
if (currentWildcardPath === this.wildcard ||
currentWildcardPath === key ||
this.simpleMatch(currentWildcardPath, key)) {
end
? (result[currentPath] = currentObj[key])
: this.goFurther(wildcard, currentObj[key], nextPartIndex + 1, currentPath, result);
}
}
return result;
};
WildcardObject.prototype.goFurther = function goFurther(wildcard, currentObj, partIndex, currentPath, result = {}) {
if (Array.isArray(currentObj)) {
return this.handleArray(wildcard, currentObj, partIndex, currentPath, result);
}
return this.handleObject(wildcard, currentObj, partIndex, currentPath, result);
};
WildcardObject.prototype.get = function get(wildcard) {
return this.goFurther(wildcard, this.obj, 0, '');
};
class ObjectPath {
static get(path, obj, copiedPath = null) {
if (copiedPath === null) {
copiedPath = path.slice();
}
if (copiedPath.length === 0 || typeof obj === "undefined") {
return obj;
}
const currentPath = copiedPath.shift();
if (!obj.hasOwnProperty(currentPath)) {
return undefined;
}
if (copiedPath.length === 0) {
return obj[currentPath];
}
return ObjectPath.get(path, obj[currentPath], copiedPath);
}
static set(path, newValue, obj, copiedPath = null) {
if (copiedPath === null) {
copiedPath = path.slice();
}
if (copiedPath.length === 0) {
for (const key in obj) {
delete obj[key];
}
for (const key in newValue) {
obj[key] = newValue[key];
}
return;
}
const currentPath = copiedPath.shift();
if (copiedPath.length === 0) {
obj[currentPath] = newValue;
return;
}
if (!obj) {
obj = {};
}
if (!obj.hasOwnProperty(currentPath)) {
obj[currentPath] = {};
}
ObjectPath.set(path, newValue, obj[currentPath], copiedPath);
}
}
function log(message, info) {
console.debug(message, info);
}
const defaultOptions$1 = {
delimeter: `.`,
notRecursive: `;`,
param: `:`,
wildcard: `*`,
log
};
const defaultListenerOptions = {
bulk: false,
debug: false,
source: "",
data: undefined
};
const defaultUpdateOptions = {
only: [],
source: "",
debug: false,
data: undefined,
updateAfter: false
};
class DeepState {
constructor(data = {}, options = defaultOptions$1) {
this.listeners = new Map();
this.waitingListeners = new Map();
this.data = data;
this.options = Object.assign(Object.assign({}, defaultOptions$1), options);
this.id = 0;
this.pathGet = ObjectPath.get;
this.pathSet = ObjectPath.set;
this.scan = new WildcardObject(this.data, this.options.delimeter, this.options.wildcard);
}
getListeners() {
return this.listeners;
}
destroy() {
this.data = undefined;
this.listeners = new Map();
}
match(first, second) {
if (first === second)
return true;
if (first === this.options.wildcard || second === this.options.wildcard)
return true;
return this.scan.match(first, second);
}
getIndicesOf(searchStr, str) {
const searchStrLen = searchStr.length;
if (searchStrLen == 0) {
return [];
}
let startIndex = 0, index, indices = [];
while ((index = str.indexOf(searchStr, startIndex)) > -1) {
indices.push(index);
startIndex = index + searchStrLen;
}
return indices;
}
getIndicesCount(searchStr, str) {
const searchStrLen = searchStr.length;
if (searchStrLen == 0) {
return 0;
}
let startIndex = 0, index, indices = 0;
while ((index = str.indexOf(searchStr, startIndex)) > -1) {
indices++;
startIndex = index + searchStrLen;
}
return indices;
}
cutPath(longer, shorter) {
longer = this.cleanNotRecursivePath(longer);
shorter = this.cleanNotRecursivePath(shorter);
const shorterPartsLen = this.getIndicesCount(this.options.delimeter, shorter);
const longerParts = this.getIndicesOf(this.options.delimeter, longer);
return longer.substr(0, longerParts[shorterPartsLen]);
}
trimPath(path) {
path = this.cleanNotRecursivePath(path);
if (path.charAt(0) === this.options.delimeter) {
return path.substr(1);
}
return path;
}
split(path) {
return path === "" ? [] : path.split(this.options.delimeter);
}
isWildcard(path) {
return path.includes(this.options.wildcard);
}
isNotRecursive(path) {
return path.endsWith(this.options.notRecursive);
}
cleanNotRecursivePath(path) {
return this.isNotRecursive(path) ? path.substring(0, path.length - 1) : path;
}
hasParams(path) {
return path.includes(this.options.param);
}
getParamsInfo(path) {
let paramsInfo = { replaced: "", original: path, params: {} };
let partIndex = 0;
let fullReplaced = [];
for (const part of this.split(path)) {
paramsInfo.params[partIndex] = {
original: part,
replaced: "",
name: ""
};
const reg = new RegExp(`\\${this.options.param}([^\\${this.options.delimeter}\\${this.options.param}]+)`, "g");
let param = reg.exec(part);
if (param) {
paramsInfo.params[partIndex].name = param[1];
}
else {
delete paramsInfo.params[partIndex];
fullReplaced.push(part);
partIndex++;
continue;
}
reg.lastIndex = 0;
paramsInfo.params[partIndex].replaced = part.replace(reg, this.options.wildcard);
fullReplaced.push(paramsInfo.params[partIndex].replaced);
partIndex++;
}
paramsInfo.replaced = fullReplaced.join(this.options.delimeter);
return paramsInfo;
}
getParams(paramsInfo, path) {
if (!paramsInfo) {
return undefined;
}
const split = this.split(path);
const result = {};
for (const partIndex in paramsInfo.params) {
const param = paramsInfo.params[partIndex];
result[param.name] = split[partIndex];
}
return result;
}
waitForAll(userPaths, fn) {
const paths = {};
for (let path of userPaths) {
paths[path] = { dirty: false };
if (this.hasParams(path)) {
paths[path].paramsInfo = this.getParamsInfo(path);
}
paths[path].isWildcard = this.isWildcard(path);
paths[path].isRecursive = !this.isNotRecursive(path);
}
this.waitingListeners.set(userPaths, { fn, paths });
fn(paths);
return function unsubscribe() {
this.waitingListeners.delete(userPaths);
};
}
executeWaitingListeners(updatePath) {
for (const waitingListener of this.waitingListeners.values()) {
const { fn, paths } = waitingListener;
let dirty = 0;
let all = 0;
for (let path in paths) {
const pathInfo = paths[path];
let match = false;
if (pathInfo.isRecursive)
updatePath = this.cutPath(updatePath, path);
if (pathInfo.isWildcard && this.match(path, updatePath))
match = true;
if (updatePath === path)
match = true;
if (match) {
pathInfo.dirty = true;
}
if (pathInfo.dirty) {
dirty++;
}
all++;
}
if (dirty === all) {
fn(paths);
}
}
}
subscribeAll(userPaths, fn, options = defaultListenerOptions) {
let unsubscribers = [];
for (const userPath of userPaths) {
unsubscribers.push(this.subscribe(userPath, fn, options));
}
return function unsubscribe() {
for (const unsubscribe of unsubscribers) {
unsubscribe();
}
};
}
getCleanListenersCollection(values = {}) {
return Object.assign({ listeners: new Map(), isRecursive: false, isWildcard: false, hasParams: false, match: undefined, paramsInfo: undefined, path: undefined, count: 0 }, values);
}
getCleanListener(fn, options = defaultListenerOptions) {
return {
fn,
options: Object.assign(Object.assign({}, defaultListenerOptions), options)
};
}
getListenerCollectionMatch(listenerPath, isRecursive, isWildcard) {
listenerPath = this.cleanNotRecursivePath(listenerPath);
const self = this;
return function listenerCollectionMatch(path) {
if (isRecursive)
path = self.cutPath(path, listenerPath);
if (isWildcard && self.match(listenerPath, path))
return true;
return listenerPath === path;
};
}
getListenersCollection(listenerPath, listener) {
if (this.listeners.has(listenerPath)) {
let listenersCollection = this.listeners.get(listenerPath);
listenersCollection.listeners.set(++this.id, listener);
return listenersCollection;
}
let collCfg = {
isRecursive: true,
isWildcard: false,
hasParams: false,
paramsInfo: undefined,
originalPath: listenerPath,
path: listenerPath
};
if (this.hasParams(collCfg.path)) {
collCfg.paramsInfo = this.getParamsInfo(collCfg.path);
collCfg.path = collCfg.paramsInfo.replaced;
collCfg.hasParams = true;
}
collCfg.isWildcard = this.isWildcard(collCfg.path);
if (this.isNotRecursive(collCfg.path)) {
collCfg.isRecursive = false;
}
let listenersCollection = this.getCleanListenersCollection(Object.assign(Object.assign({}, collCfg), { match: this.getListenerCollectionMatch(collCfg.path, collCfg.isRecursive, collCfg.isWildcard) }));
this.id++;
listenersCollection.listeners.set(this.id, listener);
this.listeners.set(collCfg.path, listenersCollection);
return listenersCollection;
}
subscribe(listenerPath, fn, options = defaultListenerOptions, type = "subscribe") {
let listener = this.getCleanListener(fn, options);
const listenersCollection = this.getListenersCollection(listenerPath, listener);
listenersCollection.count++;
listenerPath = listenersCollection.path;
if (!listenersCollection.isWildcard) {
fn(this.pathGet(this.split(this.cleanNotRecursivePath(listenerPath)), this.data), {
type,
listener,
listenersCollection,
path: {
listener: listenerPath,
update: undefined,
resolved: this.cleanNotRecursivePath(listenerPath)
},
params: this.getParams(listenersCollection.paramsInfo, listenerPath),
options
});
}
else {
const paths = this.scan.get(this.cleanNotRecursivePath(listenerPath));
if (options.bulk) {
const bulkValue = [];
for (const path in paths) {
bulkValue.push({
path,
params: this.getParams(listenersCollection.paramsInfo, path),
value: paths[path]
});
}
fn(bulkValue, {
type,
listener,
listenersCollection,
path: {
listener: listenerPath,
update: undefined,
resolved: undefined
},
options,
params: undefined
});
}
else {
for (const path in paths) {
fn(paths[path], {
type,
listener,
listenersCollection,
path: {
listener: listenerPath,
update: undefined,
resolved: this.cleanNotRecursivePath(path)
},
params: this.getParams(listenersCollection.paramsInfo, path),
options
});
}
}
}
this.debugSubscribe(listener, listenersCollection, listenerPath);
return this.unsubscribe(listenerPath, this.id);
}
unsubscribe(path, id) {
const listeners = this.listeners;
const listenersCollection = listeners.get(path);
return function unsub() {
listenersCollection.listeners.delete(id);
listenersCollection.count--;
if (listenersCollection.count === 0) {
listeners.delete(path);
}
};
}
same(newValue, oldValue) {
return ((["number", "string", "undefined", "boolean"].includes(typeof newValue) || newValue === null) &&
oldValue === newValue);
}
notifyListeners(listeners, exclude = [], returnNotified = true) {
const alreadyNotified = [];
for (const path in listeners) {
let { single, bulk } = listeners[path];
for (const singleListener of single) {
if (exclude.includes(singleListener))
continue;
const time = this.debugTime(singleListener);
singleListener.listener.fn(singleListener.value(), singleListener.eventInfo);
if (returnNotified)
alreadyNotified.push(singleListener);
this.debugListener(time, singleListener);
}
for (const bulkListener of bulk) {
if (exclude.includes(bulkListener))
continue;
const time = this.debugTime(bulkListener);
const bulkValue = [];
for (const bulk of bulkListener.value) {
bulkValue.push(Object.assign(Object.assign({}, bulk), { value: bulk.value() }));
}
bulkListener.listener.fn(bulkValue, bulkListener.eventInfo);
if (returnNotified)
alreadyNotified.push(bulkListener);
this.debugListener(time, bulkListener);
}
}
return alreadyNotified;
}
getSubscribedListeners(updatePath, newValue, options, type = "update", originalPath = null) {
options = Object.assign(Object.assign({}, defaultUpdateOptions), options);
const listeners = {};
for (let [listenerPath, listenersCollection] of this.listeners) {
listeners[listenerPath] = { single: [], bulk: [], bulkData: [] };
if (listenersCollection.match(updatePath)) {
const params = listenersCollection.paramsInfo
? this.getParams(listenersCollection.paramsInfo, updatePath)
: undefined;
const value = listenersCollection.isRecursive || listenersCollection.isWildcard
? () => this.get(this.cutPath(updatePath, listenerPath))
: () => newValue;
const bulkValue = [{ value, path: updatePath, params }];
for (const listener of listenersCollection.listeners.values()) {
if (listener.options.bulk) {
listeners[listenerPath].bulk.push({
listener,
listenersCollection,
eventInfo: {
type,
listener,
path: {
listener: listenerPath,
update: originalPath ? originalPath : updatePath,
resolved: undefined
},
params,
options
},
value: bulkValue
});
}
else {
listeners[listenerPath].single.push({
listener,
listenersCollection,
eventInfo: {
type,
listener,
path: {
listener: listenerPath,
update: originalPath ? originalPath : updatePath,
resolved: this.cleanNotRecursivePath(updatePath)
},
params,
options
},
value
});
}
}
}
}
return listeners;
}
notifySubscribedListeners(updatePath, newValue, options, type = "update", originalPath = null) {
return this.notifyListeners(this.getSubscribedListeners(updatePath, newValue, options, type, originalPath));
}
getNestedListeners(updatePath, newValue, options, type = "update", originalPath = null) {
const listeners = {};
for (let [listenerPath, listenersCollection] of this.listeners) {
listeners[listenerPath] = { single: [], bulk: [] };
const currentCuttedPath = this.cutPath(listenerPath, updatePath);
if (this.match(currentCuttedPath, updatePath)) {
const restPath = this.trimPath(listenerPath.substr(currentCuttedPath.length));
const values = new WildcardObject(newValue, this.options.delimeter, this.options.wildcard).get(restPath);
const params = listenersCollection.paramsInfo
? this.getParams(listenersCollection.paramsInfo, updatePath)
: undefined;
const bulk = [];
const bulkListeners = {};
for (const currentRestPath in values) {
const value = () => values[currentRestPath];
const fullPath = [updatePath, currentRestPath].join(this.options.delimeter);
for (const [listenerId, listener] of listenersCollection.listeners) {
const eventInfo = {
type,
listener,
listenersCollection,
path: {
listener: listenerPath,
update: originalPath ? originalPath : updatePath,
resolved: this.cleanNotRecursivePath(fullPath)
},
params,
options
};
if (listener.options.bulk) {
bulk.push({ value, path: fullPath, params });
bulkListeners[listenerId] = listener;
}
else {
listeners[listenerPath].single.push({
listener,
listenersCollection,
eventInfo,
value
});
}
}
}
for (const listenerId in bulkListeners) {
const listener = bulkListeners[listenerId];
const eventInfo = {
type,
listener,
listenersCollection,
path: {
listener: listenerPath,
update: updatePath,
resolved: undefined
},
options,
params
};
listeners[listenerPath].bulk.push({
listener,
listenersCollection,
eventInfo,
value: bulk
});
}
}
}
return listeners;
}
notifyNestedListeners(updatePath, newValue, options, type = "update", alreadyNotified, originalPath = null) {
return this.notifyListeners(this.getNestedListeners(updatePath, newValue, options, type, originalPath), alreadyNotified, false);
}
getNotifyOnlyListeners(updatePath, newValue, options, type = "update", originalPath = null) {
const listeners = {};
if (typeof options.only !== "object" ||
!Array.isArray(options.only) ||
typeof options.only[0] === "undefined" ||
!this.canBeNested(newValue)) {
return listeners;
}
for (const notifyPath of options.only) {
const wildcardScan = new WildcardObject(newValue, this.options.delimeter, this.options.wildcard).get(notifyPath);
listeners[notifyPath] = { bulk: [], single: [] };
for (const wildcardPath in wildcardScan) {
const fullPath = updatePath + this.options.delimeter + wildcardPath;
for (const [listenerPath, listenersCollection] of this.listeners) {
const params = listenersCollection.paramsInfo
? this.getParams(listenersCollection.paramsInfo, fullPath)
: undefined;
if (this.match(listenerPath, fullPath)) {
const value = () => wildcardScan[wildcardPath];
const bulkValue = [{ value, path: fullPath, params }];
for (const listener of listenersCollection.listeners.values()) {
const eventInfo = {
type,
listener,
listenersCollection,
path: {
listener: listenerPath,
update: originalPath ? originalPath : updatePath,
resolved: this.cleanNotRecursivePath(fullPath)
},
params,
options
};
if (listener.options.bulk) {
if (!listeners[notifyPath].bulk.some(bulkListener => bulkListener.listener === listener)) {
listeners[notifyPath].bulk.push({
listener,
listenersCollection,
eventInfo,
value: bulkValue
});
}
}
else {
listeners[notifyPath].single.push({
listener,
listenersCollection,
eventInfo,
value
});
}
}
}
}
}
}
return listeners;
}
notifyOnly(updatePath, newValue, options, type = "update", originalPath = "") {
return (typeof this.notifyListeners(this.getNotifyOnlyListeners(updatePath, newValue, options, type, originalPath))[0] !==
"undefined");
}
canBeNested(newValue) {
return typeof newValue === "object" && newValue !== null;
}
getUpdateValues(oldValue, split, fn) {
if (typeof oldValue === "object" && oldValue !== null) {
Array.isArray(oldValue) ? (oldValue = oldValue.slice()) : (oldValue = Object.assign({}, oldValue));
}
let newValue = fn;
if (typeof fn === "function") {
newValue = fn(this.pathGet(split, this.data));
}
return { newValue, oldValue };
}
wildcardUpdate(updatePath, fn, options = defaultUpdateOptions) {
options = Object.assign(Object.assign({}, defaultUpdateOptions), options);
const scanned = this.scan.get(updatePath);
const bulk = {};
for (const path in scanned) {
const split = this.split(path);
const { oldValue, newValue } = this.getUpdateValues(scanned[path], split, fn);
if (!this.same(newValue, oldValue))
bulk[path] = newValue;
}
const groupedListenersPack = [];
const waitingPaths = [];
for (const path in bulk) {
const newValue = bulk[path];
if (options.only.length) {
groupedListenersPack.push(this.getNotifyOnlyListeners(path, newValue, options, "update", updatePath));
}
else {
groupedListenersPack.push(this.getSubscribedListeners(path, newValue, options, "update", updatePath));
this.canBeNested(newValue) &&
groupedListenersPack.push(this.getNestedListeners(path, newValue, options, "update", updatePath));
}
options.debug && this.options.log("Wildcard update", { path, newValue });
this.pathSet(this.split(path), newValue, this.data);
waitingPaths.push(path);
}
let alreadyNotified = [];
for (const groupedListeners of groupedListenersPack) {
alreadyNotified = [...alreadyNotified, ...this.notifyListeners(groupedListeners, alreadyNotified)];
}
for (const path of waitingPaths) {
this.executeWaitingListeners(path);
}
}
update(updatePath, fn, options = defaultUpdateOptions) {
if (this.isWildcard(updatePath)) {
return this.wildcardUpdate(updatePath, fn, options);
}
const split = this.split(updatePath);
const { oldValue, newValue } = this.getUpdateValues(this.pathGet(split, this.data), split, fn);
if (options.debug) {
this.options.log(`Updating ${updatePath} ${options.source ? `from ${options.source}` : ""}`, {
oldValue,
newValue
});
}
if (this.same(newValue, oldValue)) {
return newValue;
}
if (!options.updateAfter) {
this.pathSet(split, newValue, this.data);
}
options = Object.assign(Object.assign({}, defaultUpdateOptions), options);
if (options.only === null) {
return newValue;
}
if (options.only.length) {
this.notifyOnly(updatePath, newValue, options);
this.executeWaitingListeners(updatePath);
return newValue;
}
const alreadyNotified = this.notifySubscribedListeners(updatePath, newValue, options);
if (this.canBeNested(newValue)) {
this.notifyNestedListeners(updatePath, newValue, options, "update", alreadyNotified);
}
this.executeWaitingListeners(updatePath);
if (options.updateAfter) {
this.pathSet(split, newValue, this.data);
}
return newValue;
}
get(userPath = undefined) {
if (typeof userPath === "undefined" || userPath === "") {
return this.data;
}
return this.pathGet(this.split(userPath), this.data);
}
debugSubscribe(listener, listenersCollection, listenerPath) {
if (listener.options.debug) {
this.options.log("listener subscribed", {
listenerPath,
listener,
listenersCollection
});
}
}
debugListener(time, groupedListener) {
if (groupedListener.eventInfo.options.debug || groupedListener.listener.options.debug) {
this.options.log("Listener fired", {
time: Date.now() - time,
info: groupedListener
});
}
}
debugTime(groupedListener) {
return groupedListener.listener.options.debug || groupedListener.eventInfo.options.debug ? Date.now() : 0;
}
}
/**
* Schedule - a throttle function that uses requestAnimationFrame to limit the rate at which a function is called.
*
* @param {function} fn
* @returns {function}
*/
/**
* Is object - helper function to determine if specified variable is an object
*
* @param {any} item
* @returns {boolean}
*/
function isObject$1(item) {
return item && typeof item === 'object' && !Array.isArray(item);
}
/**
* Merge deep - helper function which will merge objects recursively - creating brand new one - like clone
*
* @param {object} target
* @params {object} sources
* @returns {object}
*/
function mergeDeep$1(target, ...sources) {
const source = sources.shift();
if (isObject$1(target) && isObject$1(source)) {
for (const key in source) {
if (isObject$1(source[key])) {
if (typeof target[key] === 'undefined') {
target[key] = {};
}
target[key] = mergeDeep$1(target[key], source[key]);
}
else if (Array.isArray(source[key])) {
target[key] = [];
for (let item of source[key]) {
if (isObject$1(item)) {
target[key].push(mergeDeep$1({}, item));
continue;
}
target[key].push(item);
}
}
else {
target[key] = source[key];
}
}
}
if (!sources.length) {
return target;
}
return mergeDeep$1(target, ...sources);
}
/**
* Api functions
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0
*/
const lib = 'gantt-schedule-timeline-calendar';
function mergeActions(userConfig, defaultConfig) {
const defaultConfigActions = mergeDeep$1({}, defaultConfig.actions);
const userActions = mergeDeep$1({}, userConfig.actions);
let allActionNames = [...Object.keys(defaultConfigActions), ...Object.keys(userActions)];
allActionNames = allActionNames.filter(i => allActionNames.includes(i));
const actions = {};
for (const actionName of allActionNames) {
actions[actionName] = [];
if (typeof defaultConfigActions[actionName] !== 'undefined' && Array.isArray(defaultConfigActions[actionName])) {
actions[actionName] = [...defaultConfigActions[actionName]];
}
if (typeof userActions[actionName] !== 'undefined' && Array.isArray(userActions[actionName])) {
actions[actionName] = [...actions[actionName], ...userActions[actionName]];
}
}
delete userConfig.actions;
delete defaultConfig.actions;
return actions;
}
function stateFromConfig(userConfig) {
const defaultConfig$1 = defaultConfig();
const actions = mergeActions(userConfig, defaultConfig$1);
const state = { config: mergeDeep$1({}, defaultConfig$1, userConfig) };
state.config.actions = actions;
// @ts-ignore
return (this.state = new DeepState(state, { delimeter: '.' }));
}
const publicApi = {
name: lib,
stateFromConfig,
mergeDeep: mergeDeep$1,
date(time) {
return time ? dayjs_min(time) : dayjs_min();
},
setPeriod(period) {
this.state.update('config.chart.time.period', period);
return this.state.get('config.chart.time.zoom');
},
dayjs: dayjs_min
};
function getInternalApi(state) {
let $state = state.get();
let unsubscribes = [];
const iconsCache = {};
const api = {
name: lib,
debug: false,
setVido(Vido) {
},
log(...args) {
if (this.debug) {
console.log.call(console, ...args);
}
},
mergeDeep: mergeDeep$1,
getClass(name) {
let simple = `${lib}__${name}`;
if (name === this.name) {
simple = this.name;
}
return simple;
},
allActions: [],
getActions(name) {
if (!this.allActions.includes(name))
this.allActions.push(name);
let actions = state.get('config.actions.' + name);
if (typeof actions === 'undefined') {
actions = [];
}
return actions.slice();
},
isItemInViewport(item, left, right) {
return ((item.time.start >= left && item.time.start < right) ||
(item.time.end >= left && item.time.end < right) ||
(item.time.start <= left && item.time.end >= right));
},
prepareItems(items) {
for (const item of items) {
item.time.start = +item.time.start;
item.time.end = +item.time.end;
item.id = String(item.id);
}
return items;
},
fillEmptyRowValues(rows) {
let top = 0;
for (const rowId in rows) {
const row = rows[rowId];
row._internal = {
parents: [],
children: [],
items: []
};
if (typeof row.height !== 'number') {
row.height = $state.config.list.rowHeight;
}
if (typeof row.expanded !== 'boolean') {
row.expanded = false;
}
row.top = top;
top += row.height;
}
return rows;
},
generateParents(rows, parentName = 'parentId') {
const parents = {};
for (const row of rows) {
const parentId = row[parentName] !== undefined && row[parentName] !== null ? row[parentName] : '';
if (parents[parentId] === undefined) {
parents[parentId] = {};
}
parents[parentId][row.id] = row;
}
return parents;
},
fastTree(rowParents, node, parents = []) {
const children = rowParents[node.id];
node._internal.parents = parents;
if (typeof children === 'undefined') {
node._internal.children = [];
return node;
}
if (node.id !== '') {
parents = [...parents, node.id];
}
node._internal.children = Object.values(children);
for (const childrenId in children) {
const child = children[childrenId];
this.fastTree(rowParents, child, parents);
}
return node;
},
makeTreeMap(rows, items) {
const itemParents = this.generateParents(items, 'rowId');
for (const row of rows) {
row._internal.items = itemParents[row.id] !== undefined ? Object.values(itemParents[row.id]) : [];
}
const rowParents = this.generateParents(rows);
const tree = { id: '', _internal: { children: [], parents: [], items: [] } };
return this.fastTree(rowParents, tree);
},
getFlatTreeMapById(treeMap, flatTreeMapById = {}) {
for (const child of treeMap._internal.children) {
flatTreeMapById[child.id] = child;
this.getFlatTreeMapById(child, flatTreeMapById);
}
return flatTreeMapById;
},
flattenTreeMap(treeMap, rows = []) {
for (const child of treeMap._internal.children) {
rows.push(child.id);
this.flattenTreeMap(child, rows);
}
return rows;
},
getRowsFromMap(flatTreeMap, rows) {
return flatTreeMap.map(node => rows[node.id]);
},
getRowsFromIds(ids, rows) {
const result = [];
for (const id of ids) {
result.push(rows[id]);
}
return result;
},
getRowsWithParentsExpanded(flatTreeMap, flatTreeMapById, rows) {
if (!flatTreeMap ||
!flatTreeMapById ||
!rows ||
flatTreeMap.length === 0 ||
flatTreeMapById.length === 0 ||
Object.keys(rows).length === 0) {
return [];
}
const rowsWithParentsExpanded = [];
next: for (const rowId of flatTreeMap) {
for (const parentId of flatTreeMapById[rowId]._internal.parents) {
const parent = rows[parentId];
if (!parent || !parent.expanded) {
continue next;
}
}
rowsWithParentsExpanded.push(rowId);
}
return rowsWithParentsExpanded;
},
getRowsHeight(rows) {
let height = 0;
for (const row of rows) {
if (row)
height += row.height;
}
return height;
},
/**
* Get visible rows - get rows that are inside current viewport (height)
*
* @param {array} rowsWithParentsExpanded rows that have parent expanded- they are visible
*/
getVisibleRowsAndCompensation(rowsWithParentsExpanded) {
const visibleRows = [];
let currentRowsOffset = 0;
let rowOffset = 0;
const scrollTop = state.get('config.scroll.top');
const height = state.get('_internal.height');
let chartViewBottom = 0;
let compensation = 0;
for (const row of rowsWithParentsExpanded) {
if (row === undefined)
continue;
chartViewBottom = scrollTop + height;
if (currentRowsOffset + row.height >= scrollTop && currentRowsOffset <= chartViewBottom) {
row.top = rowOffset;
compensation = row.top + scrollTop - currentRowsOffset;
rowOffset += row.height;
visibleRows.push(row);
}
currentRowsOffset += row.height;
if (currentRowsOffset >= chartViewBottom) {
break;
}
}
return { visibleRows, compensation };
},
/**
* Normalize mouse wheel event to get proper scroll metrics
*
* @param {Event} event mouse wheel event
*/
normalizeMouseWheelEvent(event) {
// @ts-ignore
let x = event.deltaX || 0;
// @ts-ignore
let y = event.deltaY || 0;
// @ts-ignore
let z = event.deltaZ || 0;
// @ts-ignore
const mode = event.deltaMode;
const lineHeight = state.get('config.list.rowHeight');
let scale = 1;
switch (mode) {
case 1:
if (lineHeight) {
scale = lineHeight;
}
break;
case 2:
// @ts-ignore
scale = window.height;
break;
}
x *= scale;
y *= scale;
z *= scale;
return { x, y, z, event };
},
normalizePointerEvent(event) {
const result = { x: 0, y: 0, pageX: 0, pageY: 0, clientX: 0, clientY: 0, screenX: 0, screenY: 0 };
switch (event.type) {
case 'wheel':
const wheel = this.normalizeMouseWheelEvent(event);
result.x = wheel.x;
result.y = wheel.y;
result.pageX = result.x;
result.pageY = result.y;
result.screenX = result.x;
result.screenY = result.y;
result.clientX = result.x;
result.clientY = result.y;
break;
case 'touchstart':
case 'touchmove':
case 'touchend':
case 'touchcancel':
result.x = event.changedTouches[0].screenX;
result.y = event.changedTouches[0].screenY;
result.pageX = event.changedTouches[0].pageX;
result.pageY = event.changedTouches[0].pageY;
result.screenX = event.changedTouches[0].screenX;
result.screenY = event.changedTouches[0].screenY;
result.clientX = event.changedTouches[0].clientX;
result.clientY = event.changedTouches[0].clientY;
break;
default:
result.x = event.x;
result.y = event.y;
result.pageX = event.pageX;
result.pageY = event.pageY;
result.screenX = event.screenX;
result.screenY = event.screenY;
result.clientX = event.clientX;
result.clientY = event.clientY;
break;
}
return result;
},
limitScrollLeft(totalViewDurationPx, chartWidth, scrollLeft) {
const width = totalViewDurationPx - chartWidth;
if (scrollLeft < 0) {
scrollLeft = 0;
}
else if (scrollLeft > width) {
scrollLeft = width;
}
return Math.round(scrollLeft);
},
limitScrollTop(rowsHeight, internalHeight, scrollTop) {
const height = rowsHeight - internalHeight;
if (scrollTop < 0) {
scrollTop = 0;
}
else if (scrollTop > height) {
scrollTop = height;
}
return Math.round(scrollTop);
},
time: new TimeApi(state),
/**
* Get scrollbar height - compute it from element
*
* @returns {number}
*/
getScrollBarHeight(add = 0) {
const outer = document.createElement('div');
outer.style.visibility = 'hidden';
outer.style.height = '100px';
document.body.appendChild(outer);
const noScroll = outer.offsetHeight;
outer.style.msOverflowStyle = 'scrollbar';
outer.style.overflow = 'scroll';
const inner = document.createElement('div');
inner.style.height = '100%';
outer.appendChild(inner);
const withScroll = inner.offsetHeight;
outer.parentNode.removeChild(outer);
return noScroll - withScroll + add;
},
scrollToTime(toTime) {
const time = state.get('_internal.chart.time');
state.update('config.scroll', scroll => {
const chartWidth = state.get('_internal.chart.dimensions.width');
const halfTime = (chartWidth / 2) * time.timePerPixel;
const leftGlobal = toTime - halfTime - time.finalFrom;
scroll.left = this.limitScrollLeft(time.totalViewDurationPx, chartWidth, leftGlobal / time.timePerPixel);
return scroll;
});
},
/**
* Get grid blocks that are under specified rectangle
*
* @param {number} x beginging at chart-timeline bounding rect
* @param {number} y beginging at chart-timeline bounding rect
* @param {number} width
* @param {number} height
* @returns {array} array of {element, data}
*/
getGridBlocksUnderRect(x, y, width, height) {
const main = state.get('_internal.elements.main');
if (!main)
return [];
},
getCompensationX() {
return state.get('config.scroll.compensation.x') || 0;
},
getCompensationY() {
return state.get('config.scroll.compensation.y') || 0;
},
getSVGIconSrc(svg) {
if (typeof iconsCache[svg] === 'string')
return iconsCache[svg];
iconsCache[svg] = 'data:image/svg+xml;base64,' + btoa(svg);
return iconsCache[svg];
},
/**
* Destroy things to release memory
*/
destroy() {
$state = undefined;
for (const unsubscribe of unsubscribes) {
unsubscribe();
}
unsubscribes = [];
if (api.debug) {
// @ts-ignore
delete window.state;
}
}
};
if (api.debug) {
// @ts-ignore
window.state = state;
// @ts-ignore
window.api = api;
}
return api;
}
/**
* Gantt-Schedule-Timeline-Calendar
*
* @copyright Rafal Pospiech <https://neuronet.io>
* @author Rafal Pospiech <neuronet.io@gmail.com>
* @package gantt-schedule-timeline-calendar
* @license AGPL-3.0
*/
function GSTC(options) {
const state = options.state;
const api = getInternalApi(state);
const _internal = {
components: {
Main
},
scrollBarHeight: api.getScrollBarHeight(2),
height: 0,
treeMap: {},
flatTreeMap: [],
flatTreeMapById: {},
list: {
expandedHeight: 0,
visibleRows: [],
rows: {},
width: 0
},
dimensions: {
width: 0,
height: 0
},
chart: {
dimensions: {
width: 0,
innerWidth: 0
},
visibleItems: [],
time: {
levels: [],
timePerPixel: 0,
firstTaskTime: 0,
lastTaskTime: 0,
totalViewDurationMs: 0,
totalViewDurationPx: 0,
leftGlobal: 0,
rightGlobal: 0,
leftPx: 0,
rightPx: 0,
leftInner: 0,
rightInner: 0,
maxWidth: {}
}
},
elements: {},
cache: {
calendar: {}
},
loaded: {}
};
if (typeof options.debug === 'boolean' && options.debug) {
// @ts-ignore
window.state = state;
}
state.update('', oldValue => {
return {
config: oldValue.config,
_internal
};
});
// @ts-ignore
const vido = Vido(state, api);
api.setVido(vido);
const app = vido.createApp({ component: Main, props: {}, element: options.element });
const internalApi = app.vidoInstance.api;
return { state, app, api: internalApi };
}
GSTC.api = publicApi;
return GSTC;
})));
//# sourceMappingURL=index.umd.js.map