@vonage/vivid 3.0.0-next.7 → 3.0.0-test.0

package/calendar/index.js

@@ -0,0 +1,1521 @@
+import '../elevation/index.js';
+import { e as emptyArray, O as Observable, S as SubscriberSet, D as DOM, H as HTMLDirective, f as HTMLView, F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import { s as styleInject } from '../shared/style-inject.es.js';
+import '../shared/web.dom-collections.iterator.js';
+import '../shared/es.object.assign.js';
+import { b as _has, _ as _curry1, a as _curry2 } from '../shared/_has.js';
+import '../shared/class-names.js';
+
+/** @internal */
+function newSplice(index, removed, addedCount) {
+    return {
+        index: index,
+        removed: removed,
+        addedCount: addedCount,
+    };
+}
+const EDIT_LEAVE = 0;
+const EDIT_UPDATE = 1;
+const EDIT_ADD = 2;
+const EDIT_DELETE = 3;
+// Note: This function is *based* on the computation of the Levenshtein
+// "edit" distance. The one change is that "updates" are treated as two
+// edits - not one. With Array splices, an update is really a delete
+// followed by an add. By retaining this, we optimize for "keeping" the
+// maximum array items in the original array. For example:
+//
+//   'xxxx123' -> '123yyyy'
+//
+// With 1-edit updates, the shortest path would be just to update all seven
+// characters. With 2-edit updates, we delete 4, leave 3, and add 4. This
+// leaves the substring '123' intact.
+function calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd) {
+    // "Deletion" columns
+    const rowCount = oldEnd - oldStart + 1;
+    const columnCount = currentEnd - currentStart + 1;
+    const distances = new Array(rowCount);
+    let north;
+    let west;
+    // "Addition" rows. Initialize null column.
+    for (let i = 0; i < rowCount; ++i) {
+        distances[i] = new Array(columnCount);
+        distances[i][0] = i;
+    }
+    // Initialize null row
+    for (let j = 0; j < columnCount; ++j) {
+        distances[0][j] = j;
+    }
+    for (let i = 1; i < rowCount; ++i) {
+        for (let j = 1; j < columnCount; ++j) {
+            if (current[currentStart + j - 1] === old[oldStart + i - 1]) {
+                distances[i][j] = distances[i - 1][j - 1];
+            }
+            else {
+                north = distances[i - 1][j] + 1;
+                west = distances[i][j - 1] + 1;
+                distances[i][j] = north < west ? north : west;
+            }
+        }
+    }
+    return distances;
+}
+// This starts at the final weight, and walks "backward" by finding
+// the minimum previous weight recursively until the origin of the weight
+// matrix.
+function spliceOperationsFromEditDistances(distances) {
+    let i = distances.length - 1;
+    let j = distances[0].length - 1;
+    let current = distances[i][j];
+    const edits = [];
+    while (i > 0 || j > 0) {
+        if (i === 0) {
+            edits.push(EDIT_ADD);
+            j--;
+            continue;
+        }
+        if (j === 0) {
+            edits.push(EDIT_DELETE);
+            i--;
+            continue;
+        }
+        const northWest = distances[i - 1][j - 1];
+        const west = distances[i - 1][j];
+        const north = distances[i][j - 1];
+        let min;
+        if (west < north) {
+            min = west < northWest ? west : northWest;
+        }
+        else {
+            min = north < northWest ? north : northWest;
+        }
+        if (min === northWest) {
+            if (northWest === current) {
+                edits.push(EDIT_LEAVE);
+            }
+            else {
+                edits.push(EDIT_UPDATE);
+                current = northWest;
+            }
+            i--;
+            j--;
+        }
+        else if (min === west) {
+            edits.push(EDIT_DELETE);
+            i--;
+            current = west;
+        }
+        else {
+            edits.push(EDIT_ADD);
+            j--;
+            current = north;
+        }
+    }
+    edits.reverse();
+    return edits;
+}
+function sharedPrefix(current, old, searchLength) {
+    for (let i = 0; i < searchLength; ++i) {
+        if (current[i] !== old[i]) {
+            return i;
+        }
+    }
+    return searchLength;
+}
+function sharedSuffix(current, old, searchLength) {
+    let index1 = current.length;
+    let index2 = old.length;
+    let count = 0;
+    while (count < searchLength && current[--index1] === old[--index2]) {
+        count++;
+    }
+    return count;
+}
+function intersect(start1, end1, start2, end2) {
+    // Disjoint
+    if (end1 < start2 || end2 < start1) {
+        return -1;
+    }
+    // Adjacent
+    if (end1 === start2 || end2 === start1) {
+        return 0;
+    }
+    // Non-zero intersect, span1 first
+    if (start1 < start2) {
+        if (end1 < end2) {
+            return end1 - start2; // Overlap
+        }
+        return end2 - start2; // Contained
+    }
+    // Non-zero intersect, span2 first
+    if (end2 < end1) {
+        return end2 - start1; // Overlap
+    }
+    return end1 - start1; // Contained
+}
+/**
+ * Splice Projection functions:
+ *
+ * A splice map is a representation of how a previous array of items
+ * was transformed into a new array of items. Conceptually it is a list of
+ * tuples of
+ *
+ *   <index, removed, addedCount>
+ *
+ * which are kept in ascending index order of. The tuple represents that at
+ * the |index|, |removed| sequence of items were removed, and counting forward
+ * from |index|, |addedCount| items were added.
+ */
+/**
+ * @internal
+ * @remarks
+ * Lacking individual splice mutation information, the minimal set of
+ * splices can be synthesized given the previous state and final state of an
+ * array. The basic approach is to calculate the edit distance matrix and
+ * choose the shortest path through it.
+ *
+ * Complexity: O(l * p)
+ *   l: The length of the current array
+ *   p: The length of the old array
+ */
+function calcSplices(current, currentStart, currentEnd, old, oldStart, oldEnd) {
+    let prefixCount = 0;
+    let suffixCount = 0;
+    const minLength = Math.min(currentEnd - currentStart, oldEnd - oldStart);
+    if (currentStart === 0 && oldStart === 0) {
+        prefixCount = sharedPrefix(current, old, minLength);
+    }
+    if (currentEnd === current.length && oldEnd === old.length) {
+        suffixCount = sharedSuffix(current, old, minLength - prefixCount);
+    }
+    currentStart += prefixCount;
+    oldStart += prefixCount;
+    currentEnd -= suffixCount;
+    oldEnd -= suffixCount;
+    if (currentEnd - currentStart === 0 && oldEnd - oldStart === 0) {
+        return emptyArray;
+    }
+    if (currentStart === currentEnd) {
+        const splice = newSplice(currentStart, [], 0);
+        while (oldStart < oldEnd) {
+            splice.removed.push(old[oldStart++]);
+        }
+        return [splice];
+    }
+    else if (oldStart === oldEnd) {
+        return [newSplice(currentStart, [], currentEnd - currentStart)];
+    }
+    const ops = spliceOperationsFromEditDistances(calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd));
+    const splices = [];
+    let splice = void 0;
+    let index = currentStart;
+    let oldIndex = oldStart;
+    for (let i = 0; i < ops.length; ++i) {
+        switch (ops[i]) {
+            case EDIT_LEAVE:
+                if (splice !== void 0) {
+                    splices.push(splice);
+                    splice = void 0;
+                }
+                index++;
+                oldIndex++;
+                break;
+            case EDIT_UPDATE:
+                if (splice === void 0) {
+                    splice = newSplice(index, [], 0);
+                }
+                splice.addedCount++;
+                index++;
+                splice.removed.push(old[oldIndex]);
+                oldIndex++;
+                break;
+            case EDIT_ADD:
+                if (splice === void 0) {
+                    splice = newSplice(index, [], 0);
+                }
+                splice.addedCount++;
+                index++;
+                break;
+            case EDIT_DELETE:
+                if (splice === void 0) {
+                    splice = newSplice(index, [], 0);
+                }
+                splice.removed.push(old[oldIndex]);
+                oldIndex++;
+                break;
+            // no default
+        }
+    }
+    if (splice !== void 0) {
+        splices.push(splice);
+    }
+    return splices;
+}
+const $push = Array.prototype.push;
+function mergeSplice(splices, index, removed, addedCount) {
+    const splice = newSplice(index, removed, addedCount);
+    let inserted = false;
+    let insertionOffset = 0;
+    for (let i = 0; i < splices.length; i++) {
+        const current = splices[i];
+        current.index += insertionOffset;
+        if (inserted) {
+            continue;
+        }
+        const intersectCount = intersect(splice.index, splice.index + splice.removed.length, current.index, current.index + current.addedCount);
+        if (intersectCount >= 0) {
+            // Merge the two splices
+            splices.splice(i, 1);
+            i--;
+            insertionOffset -= current.addedCount - current.removed.length;
+            splice.addedCount += current.addedCount - intersectCount;
+            const deleteCount = splice.removed.length + current.removed.length - intersectCount;
+            if (!splice.addedCount && !deleteCount) {
+                // merged splice is a noop. discard.
+                inserted = true;
+            }
+            else {
+                let currentRemoved = current.removed;
+                if (splice.index < current.index) {
+                    // some prefix of splice.removed is prepended to current.removed.
+                    const prepend = splice.removed.slice(0, current.index - splice.index);
+                    $push.apply(prepend, currentRemoved);
+                    currentRemoved = prepend;
+                }
+                if (splice.index + splice.removed.length >
+                    current.index + current.addedCount) {
+                    // some suffix of splice.removed is appended to current.removed.
+                    const append = splice.removed.slice(current.index + current.addedCount - splice.index);
+                    $push.apply(currentRemoved, append);
+                }
+                splice.removed = currentRemoved;
+                if (current.index < splice.index) {
+                    splice.index = current.index;
+                }
+            }
+        }
+        else if (splice.index < current.index) {
+            // Insert splice here.
+            inserted = true;
+            splices.splice(i, 0, splice);
+            i++;
+            const offset = splice.addedCount - splice.removed.length;
+            current.index += offset;
+            insertionOffset += offset;
+        }
+    }
+    if (!inserted) {
+        splices.push(splice);
+    }
+}
+function createInitialSplices(changeRecords) {
+    const splices = [];
+    for (let i = 0, ii = changeRecords.length; i < ii; i++) {
+        const record = changeRecords[i];
+        mergeSplice(splices, record.index, record.removed, record.addedCount);
+    }
+    return splices;
+}
+/** @internal */
+function projectArraySplices(array, changeRecords) {
+    let splices = [];
+    const initialSplices = createInitialSplices(changeRecords);
+    for (let i = 0, ii = initialSplices.length; i < ii; ++i) {
+        const splice = initialSplices[i];
+        if (splice.addedCount === 1 && splice.removed.length === 1) {
+            if (splice.removed[0] !== array[splice.index]) {
+                splices.push(splice);
+            }
+            continue;
+        }
+        splices = splices.concat(calcSplices(array, splice.index, splice.index + splice.addedCount, splice.removed, 0, splice.removed.length));
+    }
+    return splices;
+}
+
+let arrayObservationEnabled = false;
+function adjustIndex(changeRecord, array) {
+    let index = changeRecord.index;
+    const arrayLength = array.length;
+    if (index > arrayLength) {
+        index = arrayLength - changeRecord.addedCount;
+    }
+    else if (index < 0) {
+        index =
+            arrayLength + changeRecord.removed.length + index - changeRecord.addedCount;
+    }
+    if (index < 0) {
+        index = 0;
+    }
+    changeRecord.index = index;
+    return changeRecord;
+}
+class ArrayObserver extends SubscriberSet {
+    constructor(source) {
+        super(source);
+        this.oldCollection = void 0;
+        this.splices = void 0;
+        this.needsQueue = true;
+        this.call = this.flush;
+        Reflect.defineProperty(source, "$fastController", {
+            value: this,
+            enumerable: false,
+        });
+    }
+    addSplice(splice) {
+        if (this.splices === void 0) {
+            this.splices = [splice];
+        }
+        else {
+            this.splices.push(splice);
+        }
+        if (this.needsQueue) {
+            this.needsQueue = false;
+            DOM.queueUpdate(this);
+        }
+    }
+    reset(oldCollection) {
+        this.oldCollection = oldCollection;
+        if (this.needsQueue) {
+            this.needsQueue = false;
+            DOM.queueUpdate(this);
+        }
+    }
+    flush() {
+        const splices = this.splices;
+        const oldCollection = this.oldCollection;
+        if (splices === void 0 && oldCollection === void 0) {
+            return;
+        }
+        this.needsQueue = true;
+        this.splices = void 0;
+        this.oldCollection = void 0;
+        const finalSplices = oldCollection === void 0
+            ? projectArraySplices(this.source, splices)
+            : calcSplices(this.source, 0, this.source.length, oldCollection, 0, oldCollection.length);
+        this.notify(finalSplices);
+    }
+}
+/* eslint-disable prefer-rest-params */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/**
+ * Enables the array observation mechanism.
+ * @remarks
+ * Array observation is enabled automatically when using the
+ * {@link RepeatDirective}, so calling this API manually is
+ * not typically necessary.
+ * @public
+ */
+function enableArrayObservation() {
+    if (arrayObservationEnabled) {
+        return;
+    }
+    arrayObservationEnabled = true;
+    Observable.setArrayObserverFactory((collection) => {
+        return new ArrayObserver(collection);
+    });
+    const proto = Array.prototype;
+    // Don't patch Array if it has already been patched
+    // by another copy of fast-element.
+    if (proto.$fastPatch) {
+        return;
+    }
+    Reflect.defineProperty(proto, "$fastPatch", {
+        value: 1,
+        enumerable: false,
+    });
+    const pop = proto.pop;
+    const push = proto.push;
+    const reverse = proto.reverse;
+    const shift = proto.shift;
+    const sort = proto.sort;
+    const splice = proto.splice;
+    const unshift = proto.unshift;
+    proto.pop = function () {
+        const notEmpty = this.length > 0;
+        const methodCallResult = pop.apply(this, arguments);
+        const o = this.$fastController;
+        if (o !== void 0 && notEmpty) {
+            o.addSplice(newSplice(this.length, [methodCallResult], 0));
+        }
+        return methodCallResult;
+    };
+    proto.push = function () {
+        const methodCallResult = push.apply(this, arguments);
+        const o = this.$fastController;
+        if (o !== void 0) {
+            o.addSplice(adjustIndex(newSplice(this.length - arguments.length, [], arguments.length), this));
+        }
+        return methodCallResult;
+    };
+    proto.reverse = function () {
+        let oldArray;
+        const o = this.$fastController;
+        if (o !== void 0) {
+            o.flush();
+            oldArray = this.slice();
+        }
+        const methodCallResult = reverse.apply(this, arguments);
+        if (o !== void 0) {
+            o.reset(oldArray);
+        }
+        return methodCallResult;
+    };
+    proto.shift = function () {
+        const notEmpty = this.length > 0;
+        const methodCallResult = shift.apply(this, arguments);
+        const o = this.$fastController;
+        if (o !== void 0 && notEmpty) {
+            o.addSplice(newSplice(0, [methodCallResult], 0));
+        }
+        return methodCallResult;
+    };
+    proto.sort = function () {
+        let oldArray;
+        const o = this.$fastController;
+        if (o !== void 0) {
+            o.flush();
+            oldArray = this.slice();
+        }
+        const methodCallResult = sort.apply(this, arguments);
+        if (o !== void 0) {
+            o.reset(oldArray);
+        }
+        return methodCallResult;
+    };
+    proto.splice = function () {
+        const methodCallResult = splice.apply(this, arguments);
+        const o = this.$fastController;
+        if (o !== void 0) {
+            o.addSplice(adjustIndex(newSplice(+arguments[0], methodCallResult, arguments.length > 2 ? arguments.length - 2 : 0), this));
+        }
+        return methodCallResult;
+    };
+    proto.unshift = function () {
+        const methodCallResult = unshift.apply(this, arguments);
+        const o = this.$fastController;
+        if (o !== void 0) {
+            o.addSplice(adjustIndex(newSplice(0, [], arguments.length), this));
+        }
+        return methodCallResult;
+    };
+}
+/* eslint-enable prefer-rest-params */
+/* eslint-enable @typescript-eslint/explicit-function-return-type */
+
+const defaultRepeatOptions = Object.freeze({
+    positioning: false,
+    recycle: true,
+});
+function bindWithoutPositioning(view, items, index, context) {
+    view.bind(items[index], context);
+}
+function bindWithPositioning(view, items, index, context) {
+    const childContext = Object.create(context);
+    childContext.index = index;
+    childContext.length = items.length;
+    view.bind(items[index], childContext);
+}
+/**
+ * A behavior that renders a template for each item in an array.
+ * @public
+ */
+class RepeatBehavior {
+    /**
+     * Creates an instance of RepeatBehavior.
+     * @param location - The location in the DOM to render the repeat.
+     * @param itemsBinding - The array to render.
+     * @param isItemsBindingVolatile - Indicates whether the items binding has volatile dependencies.
+     * @param templateBinding - The template to render for each item.
+     * @param isTemplateBindingVolatile - Indicates whether the template binding has volatile dependencies.
+     * @param options - Options used to turn on special repeat features.
+     */
+    constructor(location, itemsBinding, isItemsBindingVolatile, templateBinding, isTemplateBindingVolatile, options) {
+        this.location = location;
+        this.itemsBinding = itemsBinding;
+        this.templateBinding = templateBinding;
+        this.options = options;
+        this.source = null;
+        this.views = [];
+        this.items = null;
+        this.itemsObserver = null;
+        this.originalContext = void 0;
+        this.childContext = void 0;
+        this.bindView = bindWithoutPositioning;
+        this.itemsBindingObserver = Observable.binding(itemsBinding, this, isItemsBindingVolatile);
+        this.templateBindingObserver = Observable.binding(templateBinding, this, isTemplateBindingVolatile);
+        if (options.positioning) {
+            this.bindView = bindWithPositioning;
+        }
+    }
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     */
+    bind(source, context) {
+        this.source = source;
+        this.originalContext = context;
+        this.childContext = Object.create(context);
+        this.childContext.parent = source;
+        this.childContext.parentContext = this.originalContext;
+        this.items = this.itemsBindingObserver.observe(source, this.originalContext);
+        this.template = this.templateBindingObserver.observe(source, this.originalContext);
+        this.observeItems(true);
+        this.refreshAllViews();
+    }
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     */
+    unbind() {
+        this.source = null;
+        this.items = null;
+        if (this.itemsObserver !== null) {
+            this.itemsObserver.unsubscribe(this);
+        }
+        this.unbindAllViews();
+        this.itemsBindingObserver.disconnect();
+        this.templateBindingObserver.disconnect();
+    }
+    /** @internal */
+    handleChange(source, args) {
+        if (source === this.itemsBinding) {
+            this.items = this.itemsBindingObserver.observe(this.source, this.originalContext);
+            this.observeItems();
+            this.refreshAllViews();
+        }
+        else if (source === this.templateBinding) {
+            this.template = this.templateBindingObserver.observe(this.source, this.originalContext);
+            this.refreshAllViews(true);
+        }
+        else {
+            this.updateViews(args);
+        }
+    }
+    observeItems(force = false) {
+        if (!this.items) {
+            this.items = emptyArray;
+            return;
+        }
+        const oldObserver = this.itemsObserver;
+        const newObserver = (this.itemsObserver = Observable.getNotifier(this.items));
+        const hasNewObserver = oldObserver !== newObserver;
+        if (hasNewObserver && oldObserver !== null) {
+            oldObserver.unsubscribe(this);
+        }
+        if (hasNewObserver || force) {
+            newObserver.subscribe(this);
+        }
+    }
+    updateViews(splices) {
+        const childContext = this.childContext;
+        const views = this.views;
+        const totalRemoved = [];
+        const bindView = this.bindView;
+        let removeDelta = 0;
+        for (let i = 0, ii = splices.length; i < ii; ++i) {
+            const splice = splices[i];
+            const removed = splice.removed;
+            totalRemoved.push(...views.splice(splice.index + removeDelta, removed.length));
+            removeDelta -= splice.addedCount;
+        }
+        const items = this.items;
+        const template = this.template;
+        for (let i = 0, ii = splices.length; i < ii; ++i) {
+            const splice = splices[i];
+            let addIndex = splice.index;
+            const end = addIndex + splice.addedCount;
+            for (; addIndex < end; ++addIndex) {
+                const neighbor = views[addIndex];
+                const location = neighbor ? neighbor.firstChild : this.location;
+                const view = this.options.recycle && totalRemoved.length > 0
+                    ? totalRemoved.shift()
+                    : template.create();
+                views.splice(addIndex, 0, view);
+                bindView(view, items, addIndex, childContext);
+                view.insertBefore(location);
+            }
+        }
+        for (let i = 0, ii = totalRemoved.length; i < ii; ++i) {
+            totalRemoved[i].dispose();
+        }
+        if (this.options.positioning) {
+            for (let i = 0, ii = views.length; i < ii; ++i) {
+                const currentContext = views[i].context;
+                currentContext.length = ii;
+                currentContext.index = i;
+            }
+        }
+    }
+    refreshAllViews(templateChanged = false) {
+        const items = this.items;
+        const childContext = this.childContext;
+        const template = this.template;
+        const location = this.location;
+        const bindView = this.bindView;
+        let itemsLength = items.length;
+        let views = this.views;
+        let viewsLength = views.length;
+        if (itemsLength === 0 || templateChanged) {
+            // all views need to be removed
+            HTMLView.disposeContiguousBatch(views);
+            viewsLength = 0;
+        }
+        if (viewsLength === 0) {
+            // all views need to be created
+            this.views = views = new Array(itemsLength);
+            for (let i = 0; i < itemsLength; ++i) {
+                const view = template.create();
+                bindView(view, items, i, childContext);
+                views[i] = view;
+                view.insertBefore(location);
+            }
+        }
+        else {
+            // attempt to reuse existing views with new data
+            let i = 0;
+            for (; i < itemsLength; ++i) {
+                if (i < viewsLength) {
+                    const view = views[i];
+                    bindView(view, items, i, childContext);
+                }
+                else {
+                    const view = template.create();
+                    bindView(view, items, i, childContext);
+                    views.push(view);
+                    view.insertBefore(location);
+                }
+            }
+            const removed = views.splice(i, viewsLength - i);
+            for (i = 0, itemsLength = removed.length; i < itemsLength; ++i) {
+                removed[i].dispose();
+            }
+        }
+    }
+    unbindAllViews() {
+        const views = this.views;
+        for (let i = 0, ii = views.length; i < ii; ++i) {
+            views[i].unbind();
+        }
+    }
+}
+/**
+ * A directive that configures list rendering.
+ * @public
+ */
+class RepeatDirective extends HTMLDirective {
+    /**
+     * Creates an instance of RepeatDirective.
+     * @param itemsBinding - The binding that provides the array to render.
+     * @param templateBinding - The template binding used to obtain a template to render for each item in the array.
+     * @param options - Options used to turn on special repeat features.
+     */
+    constructor(itemsBinding, templateBinding, options) {
+        super();
+        this.itemsBinding = itemsBinding;
+        this.templateBinding = templateBinding;
+        this.options = options;
+        /**
+         * Creates a placeholder string based on the directive's index within the template.
+         * @param index - The index of the directive within the template.
+         */
+        this.createPlaceholder = DOM.createBlockPlaceholder;
+        enableArrayObservation();
+        this.isItemsBindingVolatile = Observable.isVolatileBinding(itemsBinding);
+        this.isTemplateBindingVolatile = Observable.isVolatileBinding(templateBinding);
+    }
+    /**
+     * Creates a behavior for the provided target node.
+     * @param target - The node instance to create the behavior for.
+     */
+    createBehavior(target) {
+        return new RepeatBehavior(target, this.itemsBinding, this.isItemsBindingVolatile, this.templateBinding, this.isTemplateBindingVolatile, this.options);
+    }
+}
+/**
+ * A directive that enables list rendering.
+ * @param itemsBinding - The array to render.
+ * @param templateOrTemplateBinding - The template or a template binding used obtain a template
+ * to render for each item in the array.
+ * @param options - Options used to turn on special repeat features.
+ * @public
+ */
+function repeat(itemsBinding, templateOrTemplateBinding, options = defaultRepeatOptions) {
+    const templateBinding = typeof templateOrTemplateBinding === "function"
+        ? templateOrTemplateBinding
+        : () => templateOrTemplateBinding;
+    return new RepeatDirective(itemsBinding, templateBinding, options);
+}
+
+/**
+ * Tests whether or not an object is an array.
+ *
+ * @private
+ * @param {*} val The object to test.
+ * @return {Boolean} `true` if `val` is an array, `false` otherwise.
+ * @example
+ *
+ *      _isArray([]); //=> true
+ *      _isArray(null); //=> false
+ *      _isArray({}); //=> false
+ */
+var _isArray = Array.isArray || function _isArray(val) {
+  return val != null && val.length >= 0 && Object.prototype.toString.call(val) === '[object Array]';
+};
+
+function _isString(x) {
+  return Object.prototype.toString.call(x) === '[object String]';
+}
+
+var toString = Object.prototype.toString;
+
+var _isArguments =
+/*#__PURE__*/
+function () {
+  return toString.call(arguments) === '[object Arguments]' ? function _isArguments(x) {
+    return toString.call(x) === '[object Arguments]';
+  } : function _isArguments(x) {
+    return _has('callee', x);
+  };
+}();
+
+var _isArguments$1 = _isArguments;
+
+var hasEnumBug = !
+/*#__PURE__*/
+{
+  toString: null
+}.propertyIsEnumerable('toString');
+var nonEnumerableProps = ['constructor', 'valueOf', 'isPrototypeOf', 'toString', 'propertyIsEnumerable', 'hasOwnProperty', 'toLocaleString']; // Safari bug
+
+var hasArgsEnumBug =
+/*#__PURE__*/
+function () {
+
+  return arguments.propertyIsEnumerable('length');
+}();
+
+var contains = function contains(list, item) {
+  var idx = 0;
+
+  while (idx < list.length) {
+    if (list[idx] === item) {
+      return true;
+    }
+
+    idx += 1;
+  }
+
+  return false;
+};
+/**
+ * Returns a list containing the names of all the enumerable own properties of
+ * the supplied object.
+ * Note that the order of the output array is not guaranteed to be consistent
+ * across different JS platforms.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.1.0
+ * @category Object
+ * @sig {k: v} -> [k]
+ * @param {Object} obj The object to extract properties from
+ * @return {Array} An array of the object's own properties.
+ * @see R.keysIn, R.values
+ * @example
+ *
+ *      R.keys({a: 1, b: 2, c: 3}); //=> ['a', 'b', 'c']
+ */
+
+
+var keys = typeof Object.keys === 'function' && !hasArgsEnumBug ?
+/*#__PURE__*/
+_curry1(function keys(obj) {
+  return Object(obj) !== obj ? [] : Object.keys(obj);
+}) :
+/*#__PURE__*/
+_curry1(function keys(obj) {
+  if (Object(obj) !== obj) {
+    return [];
+  }
+
+  var prop, nIdx;
+  var ks = [];
+
+  var checkArgsLength = hasArgsEnumBug && _isArguments$1(obj);
+
+  for (prop in obj) {
+    if (_has(prop, obj) && (!checkArgsLength || prop !== 'length')) {
+      ks[ks.length] = prop;
+    }
+  }
+
+  if (hasEnumBug) {
+    nIdx = nonEnumerableProps.length - 1;
+
+    while (nIdx >= 0) {
+      prop = nonEnumerableProps[nIdx];
+
+      if (_has(prop, obj) && !contains(ks, prop)) {
+        ks[ks.length] = prop;
+      }
+
+      nIdx -= 1;
+    }
+  }
+
+  return ks;
+});
+var keys$1 = keys;
+
+/**
+ * Gives a single-word string description of the (native) type of a value,
+ * returning such answers as 'Object', 'Number', 'Array', or 'Null'. Does not
+ * attempt to distinguish user Object types any further, reporting them all as
+ * 'Object'.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.8.0
+ * @category Type
+ * @sig (* -> {*}) -> String
+ * @param {*} val The value to test
+ * @return {String}
+ * @example
+ *
+ *      R.type({}); //=> "Object"
+ *      R.type(1); //=> "Number"
+ *      R.type(false); //=> "Boolean"
+ *      R.type('s'); //=> "String"
+ *      R.type(null); //=> "Null"
+ *      R.type([]); //=> "Array"
+ *      R.type(/[A-z]/); //=> "RegExp"
+ *      R.type(() => {}); //=> "Function"
+ *      R.type(undefined); //=> "Undefined"
+ */
+
+var type =
+/*#__PURE__*/
+_curry1(function type(val) {
+  return val === null ? 'Null' : val === undefined ? 'Undefined' : Object.prototype.toString.call(val).slice(8, -1);
+});
+
+var type$1 = type;
+
+/**
+ * A function that returns the `!` of its argument. It will return `true` when
+ * passed false-y value, and `false` when passed a truth-y one.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.1.0
+ * @category Logic
+ * @sig * -> Boolean
+ * @param {*} a any value
+ * @return {Boolean} the logical inverse of passed argument.
+ * @see R.complement
+ * @example
+ *
+ *      R.not(true); //=> false
+ *      R.not(false); //=> true
+ *      R.not(0); //=> true
+ *      R.not(1); //=> false
+ */
+
+var not =
+/*#__PURE__*/
+_curry1(function not(a) {
+  return !a;
+});
+
+var not$1 = not;
+
+function _arrayFromIterator(iter) {
+  var list = [];
+  var next;
+
+  while (!(next = iter.next()).done) {
+    list.push(next.value);
+  }
+
+  return list;
+}
+
+function _includesWith(pred, x, list) {
+  var idx = 0;
+  var len = list.length;
+
+  while (idx < len) {
+    if (pred(x, list[idx])) {
+      return true;
+    }
+
+    idx += 1;
+  }
+
+  return false;
+}
+
+function _functionName(f) {
+  // String(x => x) evaluates to "x => x", so the pattern may not match.
+  var match = String(f).match(/^function (\w*)/);
+  return match == null ? '' : match[1];
+}
+
+// Based on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+function _objectIs(a, b) {
+  // SameValue algorithm
+  if (a === b) {
+    // Steps 1-5, 7-10
+    // Steps 6.b-6.e: +0 != -0
+    return a !== 0 || 1 / a === 1 / b;
+  } else {
+    // Step 6.a: NaN == NaN
+    return a !== a && b !== b;
+  }
+}
+
+var _objectIs$1 = typeof Object.is === 'function' ? Object.is : _objectIs;
+
+/**
+ * private _uniqContentEquals function.
+ * That function is checking equality of 2 iterator contents with 2 assumptions
+ * - iterators lengths are the same
+ * - iterators values are unique
+ *
+ * false-positive result will be returned for comparision of, e.g.
+ * - [1,2,3] and [1,2,3,4]
+ * - [1,1,1] and [1,2,3]
+ * */
+
+function _uniqContentEquals(aIterator, bIterator, stackA, stackB) {
+  var a = _arrayFromIterator(aIterator);
+
+  var b = _arrayFromIterator(bIterator);
+
+  function eq(_a, _b) {
+    return _equals(_a, _b, stackA.slice(), stackB.slice());
+  } // if *a* array contains any element that is not included in *b*
+
+
+  return !_includesWith(function (b, aItem) {
+    return !_includesWith(eq, aItem, b);
+  }, b, a);
+}
+
+function _equals(a, b, stackA, stackB) {
+  if (_objectIs$1(a, b)) {
+    return true;
+  }
+
+  var typeA = type$1(a);
+
+  if (typeA !== type$1(b)) {
+    return false;
+  }
+
+  if (a == null || b == null) {
+    return false;
+  }
+
+  if (typeof a['fantasy-land/equals'] === 'function' || typeof b['fantasy-land/equals'] === 'function') {
+    return typeof a['fantasy-land/equals'] === 'function' && a['fantasy-land/equals'](b) && typeof b['fantasy-land/equals'] === 'function' && b['fantasy-land/equals'](a);
+  }
+
+  if (typeof a.equals === 'function' || typeof b.equals === 'function') {
+    return typeof a.equals === 'function' && a.equals(b) && typeof b.equals === 'function' && b.equals(a);
+  }
+
+  switch (typeA) {
+    case 'Arguments':
+    case 'Array':
+    case 'Object':
+      if (typeof a.constructor === 'function' && _functionName(a.constructor) === 'Promise') {
+        return a === b;
+      }
+
+      break;
+
+    case 'Boolean':
+    case 'Number':
+    case 'String':
+      if (!(typeof a === typeof b && _objectIs$1(a.valueOf(), b.valueOf()))) {
+        return false;
+      }
+
+      break;
+
+    case 'Date':
+      if (!_objectIs$1(a.valueOf(), b.valueOf())) {
+        return false;
+      }
+
+      break;
+
+    case 'Error':
+      return a.name === b.name && a.message === b.message;
+
+    case 'RegExp':
+      if (!(a.source === b.source && a.global === b.global && a.ignoreCase === b.ignoreCase && a.multiline === b.multiline && a.sticky === b.sticky && a.unicode === b.unicode)) {
+        return false;
+      }
+
+      break;
+  }
+
+  var idx = stackA.length - 1;
+
+  while (idx >= 0) {
+    if (stackA[idx] === a) {
+      return stackB[idx] === b;
+    }
+
+    idx -= 1;
+  }
+
+  switch (typeA) {
+    case 'Map':
+      if (a.size !== b.size) {
+        return false;
+      }
+
+      return _uniqContentEquals(a.entries(), b.entries(), stackA.concat([a]), stackB.concat([b]));
+
+    case 'Set':
+      if (a.size !== b.size) {
+        return false;
+      }
+
+      return _uniqContentEquals(a.values(), b.values(), stackA.concat([a]), stackB.concat([b]));
+
+    case 'Arguments':
+    case 'Array':
+    case 'Object':
+    case 'Boolean':
+    case 'Number':
+    case 'String':
+    case 'Date':
+    case 'Error':
+    case 'RegExp':
+    case 'Int8Array':
+    case 'Uint8Array':
+    case 'Uint8ClampedArray':
+    case 'Int16Array':
+    case 'Uint16Array':
+    case 'Int32Array':
+    case 'Uint32Array':
+    case 'Float32Array':
+    case 'Float64Array':
+    case 'ArrayBuffer':
+      break;
+
+    default:
+      // Values of other types are only equal if identical.
+      return false;
+  }
+
+  var keysA = keys$1(a);
+
+  if (keysA.length !== keys$1(b).length) {
+    return false;
+  }
+
+  var extendedStackA = stackA.concat([a]);
+  var extendedStackB = stackB.concat([b]);
+  idx = keysA.length - 1;
+
+  while (idx >= 0) {
+    var key = keysA[idx];
+
+    if (!(_has(key, b) && _equals(b[key], a[key], extendedStackA, extendedStackB))) {
+      return false;
+    }
+
+    idx -= 1;
+  }
+
+  return true;
+}
+
+/**
+ * Returns `true` if its arguments are equivalent, `false` otherwise. Handles
+ * cyclical data structures.
+ *
+ * Dispatches symmetrically to the `equals` methods of both arguments, if
+ * present.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.15.0
+ * @category Relation
+ * @sig a -> b -> Boolean
+ * @param {*} a
+ * @param {*} b
+ * @return {Boolean}
+ * @example
+ *
+ *      R.equals(1, 1); //=> true
+ *      R.equals(1, '1'); //=> false
+ *      R.equals([1, 2, 3], [1, 2, 3]); //=> true
+ *
+ *      const a = {}; a.v = a;
+ *      const b = {}; b.v = b;
+ *      R.equals(a, b); //=> true
+ */
+
+var equals =
+/*#__PURE__*/
+_curry2(function equals(a, b) {
+  return _equals(a, b, [], []);
+});
+
+var equals$1 = equals;
+
+function _isObject(x) {
+  return Object.prototype.toString.call(x) === '[object Object]';
+}
+
+/**
+ * Returns the empty value of its argument's type. Ramda defines the empty
+ * value of Array (`[]`), Object (`{}`), String (`''`), and Arguments. Other
+ * types are supported if they define `<Type>.empty`,
+ * `<Type>.prototype.empty` or implement the
+ * [FantasyLand Monoid spec](https://github.com/fantasyland/fantasy-land#monoid).
+ *
+ * Dispatches to the `empty` method of the first argument, if present.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.3.0
+ * @category Function
+ * @sig a -> a
+ * @param {*} x
+ * @return {*}
+ * @example
+ *
+ *      R.empty(Just(42));      //=> Nothing()
+ *      R.empty([1, 2, 3]);     //=> []
+ *      R.empty('unicorns');    //=> ''
+ *      R.empty({x: 1, y: 2});  //=> {}
+ */
+
+var empty =
+/*#__PURE__*/
+_curry1(function empty(x) {
+  return x != null && typeof x['fantasy-land/empty'] === 'function' ? x['fantasy-land/empty']() : x != null && x.constructor != null && typeof x.constructor['fantasy-land/empty'] === 'function' ? x.constructor['fantasy-land/empty']() : x != null && typeof x.empty === 'function' ? x.empty() : x != null && x.constructor != null && typeof x.constructor.empty === 'function' ? x.constructor.empty() : _isArray(x) ? [] : _isString(x) ? '' : _isObject(x) ? {} : _isArguments$1(x) ? function () {
+    return arguments;
+  }() : void 0 // else
+  ;
+});
+
+var empty$1 = empty;
+
+/**
+ * Returns `true` if the given value is its type's empty value; `false`
+ * otherwise.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.1.0
+ * @category Logic
+ * @sig a -> Boolean
+ * @param {*} x
+ * @return {Boolean}
+ * @see R.empty
+ * @example
+ *
+ *      R.isEmpty([1, 2, 3]);   //=> false
+ *      R.isEmpty([]);          //=> true
+ *      R.isEmpty('');          //=> true
+ *      R.isEmpty(null);        //=> false
+ *      R.isEmpty({});          //=> true
+ *      R.isEmpty({length: 0}); //=> false
+ */
+
+var isEmpty =
+/*#__PURE__*/
+_curry1(function isEmpty(x) {
+  return x != null && equals$1(x, empty$1(x));
+});
+
+var isEmpty$1 = isEmpty;
+
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\nol {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n[role=grid i] {\n  position: relative;\n  z-index: 0;\n  display: grid;\n  margin: auto;\n  grid-template-areas: \". column-headers\" \"row-headers calendar\";\n  grid-template-columns: min-content auto;\n  inline-size: max(100%, 500px);\n  min-inline-size: 880px;\n}\n\n.row-headers {\n  display: grid;\n  grid-area: row-headers;\n  grid-template-rows: repeat(24, 1fr);\n  margin-inline-end: 2px;\n}\n.row-headers > [role=rowheader i] {\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n}\n.row-headers > [role=rowheader i] > time {\n  font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  font-size: small;\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.calendar-row {\n  display: contents;\n}\n\n.calendar-grid-presentation {\n  display: grid;\n  overflow: hidden;\n  background-color: var(--vvd-color-surface-2dp);\n  border-radius: 6px;\n  counter-reset: listing;\n  filter: var(--vvd-shadow-surface-2dp);\n  gap: 1px;\n  grid-area: calendar;\n  grid-auto-flow: column;\n  grid-template: repeat(24, 1fr)/repeat(7, 1fr);\n}\n\n.hours {\n  display: contents;\n}\n.hours > [role=listitem i] {\n  position: relative;\n  grid-column: 1/8;\n  grid-row: var(--row);\n  min-block-size: 48px;\n  pointer-events: none;\n}\n.hours > [role=listitem i]:not(:first-child)::after {\n  position: absolute;\n  border-block-end: var(--vvd-color-neutral-20) 1px solid;\n  content: \"\";\n  inline-size: 100%;\n  margin-block-start: -1px;\n}\n.hours > [role=listitem i]:nth-child(24n+1) {\n  --row: 1;\n}\n.hours > [role=listitem i]:nth-child(24n+2) {\n  --row: 2;\n}\n.hours > [role=listitem i]:nth-child(24n+3) {\n  --row: 3;\n}\n.hours > [role=listitem i]:nth-child(24n+4) {\n  --row: 4;\n}\n.hours > [role=listitem i]:nth-child(24n+5) {\n  --row: 5;\n}\n.hours > [role=listitem i]:nth-child(24n+6) {\n  --row: 6;\n}\n.hours > [role=listitem i]:nth-child(24n+7) {\n  --row: 7;\n}\n.hours > [role=listitem i]:nth-child(24n+8) {\n  --row: 8;\n}\n.hours > [role=listitem i]:nth-child(24n+9) {\n  --row: 9;\n}\n.hours > [role=listitem i]:nth-child(24n+10) {\n  --row: 10;\n}\n.hours > [role=listitem i]:nth-child(24n+11) {\n  --row: 11;\n}\n.hours > [role=listitem i]:nth-child(24n+12) {\n  --row: 12;\n}\n.hours > [role=listitem i]:nth-child(24n+13) {\n  --row: 13;\n}\n.hours > [role=listitem i]:nth-child(24n+14) {\n  --row: 14;\n}\n.hours > [role=listitem i]:nth-child(24n+15) {\n  --row: 15;\n}\n.hours > [role=listitem i]:nth-child(24n+16) {\n  --row: 16;\n}\n.hours > [role=listitem i]:nth-child(24n+17) {\n  --row: 17;\n}\n.hours > [role=listitem i]:nth-child(24n+18) {\n  --row: 18;\n}\n.hours > [role=listitem i]:nth-child(24n+19) {\n  --row: 19;\n}\n.hours > [role=listitem i]:nth-child(24n+20) {\n  --row: 20;\n}\n.hours > [role=listitem i]:nth-child(24n+21) {\n  --row: 21;\n}\n.hours > [role=listitem i]:nth-child(24n+22) {\n  --row: 22;\n}\n.hours > [role=listitem i]:nth-child(24n+23) {\n  --row: 23;\n}\n.hours > [role=listitem i]:nth-child(24n+24) {\n  --row: 24;\n}\n\n[role=gridcell i] {\n  display: grid;\n  gap: 1px;\n  grid-auto-flow: column;\n}\n\n[role=gridcell i],\n[role=columnheader i],\n[role=columnheader i] [role=button i] {\n  position: relative;\n}\n[role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n  position: absolute;\n  z-index: -1;\n  background-color: var(--vvd-color-info-10);\n  content: \"\";\n}\n@supports (inset: 0) {\n  [role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n    inset: 0;\n  }\n}\n@supports not (inset: 0) {\n  [role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n}\n[role=gridcell i]:focus,\n[role=columnheader i]:focus,\n[role=columnheader i] [role=button i]:focus {\n  outline: none;\n}\n[role=gridcell i]:not(:focus)::before,\n[role=columnheader i]:not(:focus)::before,\n[role=columnheader i] [role=button i]:not(:focus)::before {\n  display: none;\n}\n\n.columns {\n  display: contents;\n}\n.columns > [role=gridcell i] {\n  position: relative;\n  grid-column: var(--column);\n  grid-row: 1/25;\n}\n.columns > [role=gridcell i]:nth-child(1) {\n  --column: 1;\n}\n.columns > [role=gridcell i]:nth-child(2) {\n  --column: 2;\n}\n.columns > [role=gridcell i]:nth-child(3) {\n  --column: 3;\n}\n.columns > [role=gridcell i]:nth-child(4) {\n  --column: 4;\n}\n.columns > [role=gridcell i]:nth-child(5) {\n  --column: 5;\n}\n.columns > [role=gridcell i]:nth-child(6) {\n  --column: 6;\n}\n.columns > [role=gridcell i]:nth-child(7) {\n  --column: 7;\n}\n.columns > [role=gridcell i]:not(:first-child)::after {\n  position: absolute;\n  block-size: 100%;\n  border-inline-end: var(--vvd-color-neutral-20) 1px solid;\n  content: \"\";\n  margin-inline-start: -1px;\n}\n\n.column-headers {\n  display: grid;\n  grid-area: column-headers;\n  grid-template-columns: repeat(7, 1fr);\n}\n.column-headers [role=columnheader i] h2 {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: grid;\n  align-items: baseline;\n  margin: 0;\n  grid-template-columns: 1fr auto 1fr;\n}\n.column-headers [role=columnheader i] h2 > em {\n  font: inherit;\n  inline-size: min-content;\n}\n@supports (inset: 0) {\n  .column-headers [role=columnheader i] h2 > em {\n    inset-inline-start: 0;\n  }\n}\n@supports not (inset: 0) {\n  .column-headers [role=columnheader i] h2 > em {\n    left: 0;\n  }\n}\n.column-headers [role=columnheader i] h2 > small {\n  font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  text-transform: uppercase;\n}";
+styleInject(css_248z);
+
+const ARROW_UP = 'ArrowUp';
+const ARROW_RIGHT = 'ArrowRight';
+const ARROW_DOWN = 'ArrowDown';
+const ARROW_LEFT = 'ArrowLeft';
+function isCellOrHeader(el) {
+  return el instanceof HTMLElement && (el.matches('[role="gridcell"i]') || el.matches('[role="columnheader"i]'));
+}
+
+const getCellOrHeader = f => f.matches('[role="columnheader"i]') ? '[role="gridcell"i]' : '[role="columnheader"i]';
+
+function getNextFocusableGridElement(key, activeElement) {
+  if (activeElement.parentNode instanceof HTMLElement) {
+    switch (key) {
+      case ARROW_RIGHT:
+        return activeElement.nextElementSibling || activeElement.parentNode.firstElementChild;
+
+      case ARROW_LEFT:
+        return activeElement.previousElementSibling || activeElement.parentNode.lastElementChild;
+
+      case ARROW_UP:
+      case ARROW_DOWN:
+        {
+          const {
+            children
+          } = activeElement.parentNode;
+          const i = Array.from(children).indexOf(activeElement);
+          return this.shadowRoot.querySelector(`${getCellOrHeader(activeElement)}:nth-child(${i + 1})`);
+        }
+    }
+  }
+}
+function getHeaderDescendantGridCell(key, activeElement) {
+  if (key !== ARROW_DOWN) {
+    return;
+  }
+
+  const header = activeElement.closest('[role="columnheader"i]');
+  const columnHeaders = this.shadowRoot.querySelectorAll('[role="columnheader"i]');
+  const i = Array.from(columnHeaders).indexOf(header);
+  return this.shadowRoot.querySelector(`[role="gridcell"i]:nth-child(${i + 1})`);
+}
+
+function getDay(el) {
+  const cellOrHeader = el.closest('[role="gridcell"i], [role="columnheader"i]');
+
+  if (cellOrHeader) {
+    const {
+      parentElement
+    } = cellOrHeader;
+
+    if (parentElement) {
+      return parentElement.children && Array.from(parentElement.children).indexOf(cellOrHeader);
+    }
+  }
+}
+
+function getHour(e, el, hours) {
+  const rowHeaderOrCell = el.closest('[role="rowheader"], [role="gridcell"i]');
+
+  if (rowHeaderOrCell) {
+    const DOMRect = rowHeaderOrCell.getBoundingClientRect();
+    const offsetY = e.clientY - DOMRect.y;
+    const hourHeight = DOMRect.height / hours;
+    const hour = offsetY / hourHeight;
+    return Math.round((hour + Number.EPSILON) * 100) / 100;
+  }
+}
+
+const getEventContext = function getEventContext(e) {
+  if (!(e instanceof KeyboardEvent || e instanceof MouseEvent)) {
+    throw new Error('Invalid event. Event must be instance of KeyboardEvent or MouseEvent');
+  }
+
+  const [el] = e.composedPath();
+
+  if (!(el && el instanceof HTMLElement && this.shadowRoot.contains(el))) {
+    throw new Error('Invalid event. Event must contain a target object which is a direct descendant of calendar');
+  }
+
+  const day = getDay(el);
+  let hour;
+
+  if (e instanceof MouseEvent) {
+    hour = getHour(e, el, this._hours);
+  }
+
+  const context = Object.assign(Object.assign({}, day != undefined && {
+    day
+  }), hour != undefined && {
+    hour
+  });
+  return not$1(isEmpty$1(context)) ? context : null;
+};
+
+class Calendar extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.hour12 = false;
+    this._hours = 24;
+    this._days = 7;
+    this.hoursAsDatetime = Array.from({
+      length: this._hours - 1
+    }).fill(new Date(new Date().setHours(0, 0, 0))).map((d, i) => new Date(d.setHours(++i)));
+
+    this._generateDaysArr = dateArr => {
+      if (dateArr.length == this._days) {
+        return dateArr;
+      }
+
+      const lastDate = new Date(dateArr[dateArr.length - 1]);
+      lastDate.setDate(lastDate.getDate() + 1);
+      return this._generateDaysArr([...dateArr, lastDate]);
+    };
+
+    this.getEventContext = getEventContext;
+  }
+
+  arrowKeysInteractions(key) {
+    const activeElement = this.shadowRoot.activeElement;
+    let focusNext;
+
+    if (isCellOrHeader(activeElement)) {
+      focusNext = getNextFocusableGridElement.call(this, key, activeElement);
+    } else if (activeElement === null || activeElement === void 0 ? void 0 : activeElement.matches('em[role="button"i]')) {
+      focusNext = getHeaderDescendantGridCell.call(this, key, activeElement);
+    } else {
+      focusNext = this.shadowRoot.querySelector('[role="columnheader"i]');
+    }
+
+    this.moveTo(focusNext);
+  }
+
+  moveTo(el) {
+    const onBlur = ({
+      target
+    }) => target.setAttribute('tabindex', '-1');
+
+    el === null || el === void 0 ? void 0 : el.addEventListener('blur', onBlur, {
+      once: true
+    });
+    el === null || el === void 0 ? void 0 : el.setAttribute('tabindex', '0');
+    el === null || el === void 0 ? void 0 : el.focus();
+  }
+
+  onKeydown({
+    key
+  }) {
+    const isArrow = [ARROW_UP, ARROW_RIGHT, ARROW_DOWN, ARROW_LEFT].some(predefinedKey => predefinedKey == key);
+
+    if (isArrow) {
+      this.arrowKeysInteractions(key);
+    }
+
+    return !isArrow;
+  }
+
+}
+
+__decorate([attr, __metadata("design:type", Object)], Calendar.prototype, "datetime", void 0);
+
+__decorate([attr({
+  attribute: 'start-day'
+}), __metadata("design:type", String)], Calendar.prototype, "startDay", void 0);
+
+__decorate([attr, __metadata("design:type", Object)], Calendar.prototype, "locales", void 0);
+
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], Calendar.prototype, "hour12", void 0);
+
+function getValidDateString(date) {
+  const twoDigit = num => `0${num}`.slice(-2);
+
+  return `${date.getFullYear()}-${twoDigit(date.getMonth() + 1)}-${twoDigit(date.getDate())}`;
+}
+const weekdaysMap = new Map([['sunday', 0], ['monday', 1]]);
+function getFirstDateOfTheWeek(date = new Date(), startDay) {
+  date = new Date(date);
+  let num = weekdaysMap.get(startDay);
+  num !== null && num !== void 0 ? num : num = 1;
+  const day = date.getDate() - (date.getDay() + 7 - num) % 7;
+  return new Date(date.setDate(day));
+}
+
+let _2 = t => t,
+    _t,
+    _t2,
+    _t3,
+    _t4,
+    _t5,
+    _t6,
+    _t7;
+
+const HoursTemplate = () => {
+  return html(_t || (_t = _2`
+  <div class="row-headers" role="presentation">
+    ${0}
+  </div>`), repeat(x => x.hoursAsDatetime, html(_t2 || (_t2 = _2`<span role="rowheader">
+      <time datetime="${0}">
+						${0}
+					</time>
+				</span>`), (x, c) => new Intl.DateTimeFormat(c.parent.locales, {
+    hour: 'numeric',
+    minute: 'numeric',
+    hour12: false
+  }).format(x), (x, c) => new Intl.DateTimeFormat(c.parent.locales, {
+    hour: 'numeric',
+    hour12: c.parent.hour12
+  }).format(x))));
+};
+
+const DaysTemplate = () => {
+  return html(_t3 || (_t3 = _2`
+			<div class="column-headers" role="row">
+				${0}
+			</div>`), repeat(x => x._generateDaysArr([getFirstDateOfTheWeek(x.datetime, x.startDay)]), html(_t4 || (_t4 = _2`
+						<div role="columnheader" tabindex="-1">
+              <time datetime=${0}>
+                <h2>
+									<!-- TODO add to column aria-labelledby or describedby to count
+                  events and related day e.g. "3 events, Sunday, March 8" -->
+									<em tabindex="0" role="button" aria-label=${0}>
+										${0}
+									</em>
+									<small aria-hidden="true">
+										${0}
+									</small>
+                </h2>
+              </time>
+						</div>`), x => getValidDateString(x), (x, c) => new Intl.DateTimeFormat(c.parent.locales, {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric'
+  }).format(x), (x, c) => new Intl.DateTimeFormat(c.parent.locales, {
+    day: '2-digit'
+  }).format(x), (x, c) => new Intl.DateTimeFormat(c.parent.locales, {
+    weekday: 'short'
+  }).format(x))));
+};
+
+const ColumnTemplate = html(_t5 || (_t5 = _2`
+            <div role="gridcell" tabindex="-1">
+              <slot name="day-${0}"></slot>
+            </div>
+          `), (_, c) => c.index);
+const CalendarTemplate = () => html(_t6 || (_t6 = _2`
+  <div role="grid" @keydown=${0}>
+    ${0}
+    <div role="row" class="calendar-row">
+      ${0}
+      <div class="calendar-grid-presentation" role="presentation">
+        <div class="hours" role="list">
+          ${0}
+        </div>
+        <div class="columns" role="presentation">
+          ${0}
+        </div>
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+`), (x, c) => x.onKeydown(c.event), DaysTemplate, HoursTemplate, repeat(x => Array.from({
+  length: x.hoursAsDatetime.length + 1
+}), html(_t7 || (_t7 = _2`
+            <div role="listitem"></div>`))), repeat(x => Array.from(Array(x._days)), ColumnTemplate, {
+  positioning: true
+}));
+
+const vividCalendar = Calendar.compose({
+  baseName: 'calendar',
+  template: CalendarTemplate,
+  styles: css_248z
+});
+designSystem.register(vividCalendar());
+
+export { vividCalendar };