@pacem/pacem-ui 1.0.0-abel

package/dist/esm/calendar.js

@@ -0,0 +1,662 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { P, PCSS, CustomElement, Watch, ViewChild, Utils, PropertyConverters, Components, CustomTypedEvent, PropertyChangeEvent, Defaults, CustomElementUtils, Debounce, PropertyChangeEventName } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI {
+export var CalendarZoom;
+(function (CalendarZoom) {
+    CalendarZoom["Month"] = "month";
+    CalendarZoom["Week"] = "week";
+    CalendarZoom["Day"] = "day";
+})(CalendarZoom || (CalendarZoom = {}));
+export class ViewDateChangeEvent extends CustomTypedEvent {
+    constructor(date) {
+        super('viewdatechange', date);
+    }
+}
+export class DateSelectEvent extends CustomTypedEvent {
+    constructor(date) {
+        super('dateselect', date, { bubbles: true });
+    }
+}
+export class TimeSelectEvent extends CustomTypedEvent {
+    constructor(date) {
+        super('timeselect', date, { bubbles: true });
+    }
+}
+const MSECS_PER_HOUR = 1000 * 60 * 60;
+const MSECS_PER_DAY = MSECS_PER_HOUR * 24;
+const DAY_HOURS = [0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5,
+    12, 12.5, 13, 13.5, 14, 14.5, 15, 15.5, 16, 16.5, 17, 17.5, 18, 18.5, 19, 19.5, 20, 20.5, 21, 21.5, 22, 22.5, 23, 23.5];
+let now = new Date();
+const DUMMY_DATE = Utils.Dates.dateOnly(now).valueOf();
+const DAYS_OF_WEEK = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
+let PacemCalendarEventElement = class PacemCalendarEventElement extends Components.PacemItemElement {
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        cancelAnimationFrame(this._handle);
+        this._handle = requestAnimationFrame(() => {
+            let container = this.container;
+            if (!Utils.isNull(container)) {
+                // trigger propertychange for `items`
+                container.dispatchEvent(new PropertyChangeEvent({ propertyName: 'items', oldValue: container.items, currentValue: container.items }));
+            }
+        });
+    }
+};
+__decorate([
+    Watch({ converter: PropertyConverters.Datetime })
+], PacemCalendarEventElement.prototype, "start", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Datetime })
+], PacemCalendarEventElement.prototype, "end", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.String })
+], PacemCalendarEventElement.prototype, "caption", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Json })
+], PacemCalendarEventElement.prototype, "place", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Boolean })
+], PacemCalendarEventElement.prototype, "allDay", void 0);
+PacemCalendarEventElement = __decorate([
+    CustomElement({
+        tagName: P + '-calendar-event'
+    })
+], PacemCalendarEventElement);
+export { PacemCalendarEventElement };
+export class CalendarEventSelectEvent extends CustomTypedEvent {
+    constructor(args) {
+        super("eventselect", args, { bubbles: false, cancelable: true });
+    }
+}
+export class CalendarEventUnselectEvent extends CustomTypedEvent {
+    constructor(args) {
+        super("eventunselect", args, { bubbles: false, cancelable: true });
+    }
+}
+export class PacemCalendarBaseElement extends Components.PacemItemsContainerElement {
+    validate(item) {
+        return item instanceof PacemCalendarEventElement;
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        if (name === 'viewDate' || name === 'weekStart') {
+            this._synchronizeWeek();
+        }
+        switch (name) {
+            case 'viewDate':
+                this.dispatchEvent(new ViewDateChangeEvent(val));
+                Utils.removeClass(this, "viewdate-next viewdate-previous");
+                requestAnimationFrame(() => {
+                    Utils.addClass(this, old > val ? "viewdate-previous" : "viewdate-next");
+                });
+                break;
+            case 'zoom':
+                Utils.removeClass(this, "viewdate-next viewdate-previous");
+                break;
+        }
+    }
+    // #region PROTECTED
+    oneventselect(el, evt) {
+        this.dispatchEvent(new CalendarEventSelectEvent({ element: el, event: evt }));
+    }
+    oneventunselect(el, evt) {
+        this.dispatchEvent(new CalendarEventUnselectEvent({ element: el, event: evt }));
+    }
+    getHeaderLabel(d, f) {
+        const options = f === CalendarZoom.Week ? { weekday: 'short', day: 'numeric', month: 'numeric' }
+            : (f === CalendarZoom.Day ? { weekday: 'long' } : /* fallback: month */ { weekday: 'short' });
+        return Utils.parseDate(d).toLocaleString(Utils.lang(this), options);
+    }
+    getDayLabel(d) {
+        const options = d.getDate() == 1 ? { month: 'short', day: 'numeric' } : { day: 'numeric' };
+        return Utils.parseDate(d).toLocaleString(Utils.lang(this), options);
+    }
+    getHourLabel(d) {
+        const options = { hour: 'numeric' /*, minute: 'numeric'*/ };
+        return Utils.parseDate(d).toLocaleString(Utils.lang(this), options);
+    }
+    getTimeLabel(d) {
+        const options = { hour: 'numeric', minute: 'numeric' };
+        return Utils.parseDate(d).toLocaleString(Utils.lang(this), options);
+    }
+    isNow(d, now) {
+        const d0 = Utils.parseDate(d), v = Utils.parseDate(now || new Date());
+        return d0.getHours() === v.getHours() && this.isToday(d, now);
+    }
+    isToday(d, now) {
+        return this.isDate(d, now || new Date());
+    }
+    isViewDay(d, vd = this.viewDate) {
+        return this.isDate(d, vd || this.viewDate || new Date());
+    }
+    isDate(expected, d) {
+        if (!Utils.Dates.isDate(d) || !Utils.Dates.isDate(expected)) {
+            return false;
+        }
+        const d0 = Utils.parseDate(expected), v = Utils.parseDate(d);
+        return d0.getDate() === v.getDate() && d0.getMonth() == v.getMonth() && d0.getFullYear() === v.getFullYear();
+    }
+    isViewWeek(d) {
+        const d0 = Utils.parseDate(d);
+        return this.week && this.week.find(d1 => d1.getDate() == d0.getDate() && d1.getMonth() == d0.getMonth() && d1.getDate() == d0.getDate());
+    }
+    isViewMonth(d) {
+        const d0 = Utils.parseDate(d), v = Utils.parseDate(this.viewDate || new Date());
+        return d0.getMonth() == v.getMonth() && d0.getFullYear() === v.getFullYear();
+    }
+    isTimeSlotDisabled(ranges, d, h) {
+        if (!Utils.isNullOrEmpty(ranges)) {
+            h = h || 0;
+            const slotDate = new Date(d.getFullYear(), d.getMonth(), d.getDate(), Math.floor(h), 60 * (h % 1)), tz = slotDate.getTimezoneOffset(), slot = slotDate.valueOf() - (tz * 60 * 1000);
+            for (let range of ranges) {
+                let from = Utils.Dates.parse(range.from), to = Utils.Dates.parse(range.to);
+                if ((!from || (from && from.valueOf() <= slot))
+                    && (!to || (to && to.valueOf() > slot))
+                    && (to || from)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    // #endregion
+    // #region PRIVATE
+    _getWeekStart(day, weekstart) {
+        let dow = day.getDay(), v = day.valueOf();
+        const tget = (weekstart || 'm').toLowerCase().startsWith('m') ? 1 : 0;
+        if (dow === tget) {
+            return v;
+        }
+        if (dow === 0) {
+            // damn 0-indexed sunday, skip to the previous one
+            dow = 7;
+        }
+        return v + (tget - dow) * MSECS_PER_DAY;
+    }
+    _getDatasource(d, w = this.weekStart) {
+        let day = Utils.Dates.dateOnly(Utils.parseDate(d));
+        const ds = this.month;
+        let _d0 = ds && ds.length && ds[0] && ds[0].length && ds[0][0];
+        if (_d0 && _d0.getMonth() == day.getMonth() && _d0.getFullYear() == day.getFullYear()
+            && ds.find(wk => !Utils.isNull(wk.find(dy => dy.valueOf() == day.valueOf())))) {
+            // return the "convenient" datasource
+            return ds;
+        }
+        //
+        // month
+        let d1 = new Date(day.getFullYear(), day.getMonth(), 1);
+        let date1 = this._getWeekStart(d1, w);
+        let month = [];
+        let week = [];
+        do {
+            let date = Utils.Dates.dateOnly(new Date(date1));
+            week.push(date);
+            if (week.length == 7) {
+                month.push(week.splice(0));
+            }
+            date1 = date.valueOf() + MSECS_PER_DAY + /* beware of day-light-saving occurrences */ MSECS_PER_HOUR;
+        } while (month.length < 6);
+        //
+        return this.month = month;
+    }
+    _synchronizeWeek() {
+        const viewDate = Utils.parseDate(this.viewDate);
+        const vd = new Date(viewDate.getFullYear(), viewDate.getMonth(), 1);
+        const ds = this._getDatasource(vd, this.weekStart);
+        const week = ds.filter((w, j) => w.some(d => d.getDate() == viewDate.getDate() && d.getMonth() == viewDate.getMonth() && d.getFullYear() == viewDate.getFullYear()))[0];
+        if (!(this.week && this.week.length) || this.week[0] !== week[0]) {
+            this.week = week;
+        }
+    }
+}
+__decorate([
+    Watch({ converter: PropertyConverters.Datetime })
+], PacemCalendarBaseElement.prototype, "viewDate", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Datetime })
+], PacemCalendarBaseElement.prototype, "now", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.String })
+], PacemCalendarBaseElement.prototype, "zoom", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.String })
+], PacemCalendarBaseElement.prototype, "weekStart", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Eval })
+], PacemCalendarBaseElement.prototype, "week", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Eval })
+], PacemCalendarBaseElement.prototype, "month", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Eval })
+], PacemCalendarBaseElement.prototype, "disabledRanges", void 0);
+export class PacemCalendarWithEventsBaseElement extends PacemCalendarBaseElement {
+    constructor() {
+        super(...arguments);
+        this._datasource = [];
+    }
+    get datasource() {
+        return this._datasource;
+    }
+    _getSortedItems(items) {
+        return items.slice().sort((a, b) => {
+            const a_start = a.start.valueOf(), b_start = b.start.valueOf();
+            if (a_start != b_start) {
+                return a_start < b_start ? -1 : 1;
+            }
+            const a_end = a.end.valueOf(), b_end = b.end.valueOf(), a_span = a_end - a_start, b_span = b_end - b_start;
+            if (a_span != b_span) {
+                return a_span > b_span ? -1 : 1;
+            }
+            return 0;
+        });
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'month':
+            case 'week':
+            case 'items':
+            case 'zoom':
+            case 'viewDate':
+                cancelAnimationFrame(this._handle);
+                this._handle = requestAnimationFrame(() => {
+                    let oldval = this._datasource;
+                    let newval = this._datasource = this.buildDataSource(this._getSortedItems(this.items || []));
+                    this.dispatchEvent(new PropertyChangeEvent({ propertyName: 'datasource', oldValue: oldval, currentValue: newval }));
+                });
+                break;
+        }
+    }
+}
+function getWeeklyEventDataItems(items, week) {
+    let lbound = week.length - 1, wstart = week[0].valueOf(), wend = week[lbound].valueOf();
+    return items.filter(evt => {
+        let startDate = Utils.Dates.dateOnly(evt.start);
+        let endDate = Utils.Dates.dateOnly(evt.end);
+        return startDate.valueOf() <= wend && endDate.valueOf() >= wstart;
+    }).map(evt => {
+        let startDate = Utils.Dates.dateOnly(evt.start), start = week.find(d => d.valueOf() == startDate.valueOf()), startIndex = week.indexOf(start);
+        let endDate = Utils.Dates.dateOnly(evt.end), end = week.find(d => d.valueOf() == endDate.valueOf()), endIndex = week.indexOf(end);
+        let ndx0 = startIndex == -1 ? 0 : startIndex, ndx1 = endIndex == -1 ? lbound : endIndex;
+        return {
+            start: evt.start, end: evt.end,
+            allDay: true,
+            // indexes
+            day: ndx0,
+            continuing: { start: startIndex == -1, end: endIndex == -1 },
+            // span (may be column- or row-)
+            span: ndx1 + 1 - ndx0,
+            caption: evt.caption,
+            event: evt
+        };
+    });
+}
+// #region AGENDA
+function buildAgendaGrid() {
+    let grid = '';
+    for (let day = 0; day < 7; day++) {
+        if (day == 0) {
+            grid += `<div class="agenda-left all-day"></div>`;
+        }
+        grid += `<${P}-panel class="agenda-slot all-day day-${(day + 1)}" css-class="{{ {'viewday': :host.isViewDay(:host.week[${day}], :host.viewDate), 'today': :host.isToday(:host.week[${day}], :host.now)} }}"></${P}-panel>`;
+    }
+    for (let day = 0; day < 7; day++) {
+        for (let hour of DAY_HOURS) {
+            let whole = hour % 1 == 0;
+            let css = `hour-${whole ? 'whole' : 'half'}`;
+            if (day == 0 && whole) {
+                grid += `<${P}-text class="agenda-left ${css} hour-${hour * 2 + 1}"" text="{{ :host.getHourLabel(${DUMMY_DATE + hour * MSECS_PER_HOUR}) }}"></${P}-text>`;
+            }
+            grid += `<${P}-panel on-click=":host.time = Pacem.Utils.Dates.parse(:host.week[${day}].valueOf() + ${(hour * MSECS_PER_HOUR)})" disabled="{{ :host.isTimeSlotDisabled(:host.disabledRanges, :host.week[${day}], ${hour}) }}" class="agenda-slot ${css} day-${(day + 1)} hour-${hour * 2 + 1}" css-class="{{ {'viewday': :host.isViewDay(:host.week[${day}], :host.viewDate), 'today': :host.isToday(:host.week[${day}], :host.now)} }}"></${P}-panel>`;
+        }
+    }
+    return grid;
+}
+let PacemAgendaElement = class PacemAgendaElement extends PacemCalendarWithEventsBaseElement {
+    constructor() {
+        super(...arguments);
+        this._allDayDatasource = [];
+    }
+    buildDataSource(items) {
+        var week = this.week;
+        if (this.zoom === CalendarZoom.Day) {
+            week = [Utils.Dates.dateOnly(this.viewDate)];
+        }
+        let ds = [];
+        if (!Utils.isNull(week)) {
+            // alldays
+            this.dispatchEvent(new PropertyChangeEvent({
+                propertyName: 'allDayDatasource',
+                oldValue: this._allDayDatasource,
+                currentValue: this._allDayDatasource = getWeeklyEventDataItems(items.filter(evt => {
+                    return (evt.end.valueOf() - evt.start.valueOf()) >= MSECS_PER_DAY;
+                }), week)
+            }));
+            // hourlies
+            for (let j = 0; j < week.length; j++) {
+                let day = week[j], dayValue = day.valueOf(), 
+                // search for events in this week
+                dayItems = items.filter(evt => {
+                    let startDate = Utils.Dates.dateOnly(evt.start);
+                    let endDate = Utils.Dates.dateOnly(evt.end);
+                    return startDate.valueOf() <= dayValue && endDate.valueOf() >= dayValue;
+                }).map(evt => {
+                    let evtStart = evt.start.valueOf(), evtEnd = evt.end.valueOf();
+                    let retval = {
+                        allDay: evt.allDay || (evtEnd - evtStart) >= MSECS_PER_DAY,
+                        continuing: { start: evtStart < dayValue, end: evtEnd > (dayValue + MSECS_PER_DAY) },
+                        caption: evt.caption,
+                        hour: 0,
+                        span: DAY_HOURS.length - 1,
+                        offset: { start: "0", end: "0" },
+                        event: evt
+                    };
+                    let startHour = evt.start.getHours() + evt.start.getMinutes() / 60, startIndex = retval.continuing.start ? 0 : Math.floor(startHour * 2), endHour = evt.end.getHours() + evt.end.getMinutes() / 60, endIndex = -1 + (retval.continuing.end ? DAY_HOURS.length : Math.ceil(endHour * 2));
+                    let endNdx = endIndex + 1, end = endNdx >= DAY_HOURS.length ? 24 : DAY_HOURS[endNdx];
+                    let fullSpan = end - DAY_HOURS[startIndex];
+                    retval.hour = startIndex;
+                    retval.span = 1 + endIndex - startIndex;
+                    // offsets
+                    if (!retval.continuing.start) {
+                        // compute correct start offset
+                        retval.offset.start = (((startHour - DAY_HOURS[startIndex]) / fullSpan) * 100) + "%";
+                    }
+                    if (!retval.continuing.end) {
+                        // compute correct end offset
+                        retval.offset.end = (((end - endHour) / fullSpan) * 100) + "%";
+                    }
+                    return retval;
+                });
+                //
+                ds.push(dayItems);
+            }
+        }
+        return ds;
+    }
+    get allDayDatasource() {
+        return this._allDayDatasource;
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        const clock = this._clock;
+        if (name === 'time') {
+            this.dispatchEvent(new TimeSelectEvent(val));
+        }
+        else if (!Utils.isNull(clock)) {
+            if (name === 'now') {
+                clock.now = val;
+                clock.className = `hour-${val.getHours()} minute-${val.getMinutes()}`;
+            }
+            if (name === 'now' || name === 'zoom' || name === 'viewDate') {
+                const d = this.now, z = this.zoom;
+                const showClock = d && z && ((this.isViewDay(d) && z === CalendarZoom.Day)
+                    || (this.isViewWeek(d) && z === CalendarZoom.Week));
+                clock.hidden = !showClock;
+            }
+        }
+    }
+};
+__decorate([
+    ViewChild(P + '-clock')
+], PacemAgendaElement.prototype, "_clock", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Datetime })
+], PacemAgendaElement.prototype, "time", void 0);
+PacemAgendaElement = __decorate([
+    CustomElement({
+        tagName: P + '-agenda', shadow: Defaults.USE_SHADOW_ROOT,
+        template: `<${P}-repeater class="${PCSS}-agenda agenda-grid" datasource="{{ :host.datasource }}">${buildAgendaGrid()}<${P}-clock hidden></${P}-clock>
+    <template>
+        <${P}-repeater class="agenda-day" datasource="{{ ^item }}">
+            <template>
+                <${P}-panel class="agenda-event-wrapper" 
+css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item.span +1), 'day-start-'+ (!^item.continuing.start), 'day-end-'+ (!^item.continuing.end)] }}">
+                    <${P}-panel class="agenda-event" css="{{ {'top': ^item.offset.start, 'bottom': ^item.offset.end} }}" tab-order="{{ (^^index + 1) * 1000 + (^item.hour + 1) * 100 + ^index }}"
+                        on-focus=":host.oneventselect($this, ^item.event)" on-blur=":host.oneventunselect($this, ^item.event)">
+                        <${P}-span class="event-caption" text="{{ ^item.caption }}"></${P}-span>
+                    </${P}-panel>
+                </${P}-panel>
+            </template>
+        </${P}-repeater>
+    </template>
+    <${P}-repeater class="agenda-allday" datasource="{{ :host.allDayDatasource }}">
+        <template>
+            <${P}-panel class="agenda-event" tab-order="{{ (^index + 1) * 500 + (^item.day + 1) * 50 + ^index }}" css-class="{{ ['day-start-'+ (^item.day + 1), 'day-end-'+ (^item.day + ^item.span + 1)] }}"
+                on-focus=":host.oneventselect($this, ^item.event)" on-blur=":host.oneventunselect($this, ^item.event)">
+                <${P}-text class="event-caption" text="{{ ^item.caption }}"></${P}-text>
+            </${P}-panel>
+        </template>
+    </${P}-repeater>
+</${P}-repeater><${P}-content></${P}-content>`
+    })
+], PacemAgendaElement);
+export { PacemAgendaElement };
+// #endregion
+// #region CALENDAR
+function buildCalendarGrid() {
+    let grid = '';
+    for (let week = 0; week < 6; week++) {
+        for (let day = 0; day < 7; day++) {
+            let css = `class="calendar-day week-${week + 1} day-${day + 1}"`;
+            grid += `<${P}-panel disabled="{{ :host.isTimeSlotDisabled(:host.disabledRanges, :host.month[${week}][${day}]) }}" on-click=":host._setDate(:host.month[${week}][${day}])" ${css} css-class="{{ {'viewmonth': :host.isViewMonth(:host.month[${week}][${day}]), 'viewday': :host.isViewDay(:host.month[${week}][${day}], :host.viewDate), 'today': :host.isToday(:host.month[${week}][${day}], :host.now), 'selected-date': :host.isDate(:host.month[${week}][${day}], :host.date)} }}"><${P}-span culture="{{ :host.culture }}" class="text-ellipsed" text="{{ :host.getDayLabel(:host.month[${week}][${day}], :host._formatVersion) }}"></${P}-span></${P}-panel>`;
+        }
+    }
+    return grid;
+}
+let PacemCalendarElement = class PacemCalendarElement extends PacemCalendarWithEventsBaseElement {
+    buildDataSource(items) {
+        const month = this.month;
+        let ds = [];
+        if (!Utils.isNull(month)) {
+            for (let j = 0; j < month.length; j++) {
+                let week = month[j], 
+                // search for events in this week
+                weekItems = getWeeklyEventDataItems(items, week);
+                //
+                ds.push(weekItems);
+            }
+        }
+        return ds;
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            //case 'date':
+            //    this.dispatchEvent(new DateSelectEvent(val));
+            //    break;
+            case 'dayLabelFormatter':
+                this._formatVersion = Date.now();
+                break;
+        }
+    }
+    _setDate(d) {
+        if (d?.valueOf() !== this.date?.valueOf()) {
+            this.date = d;
+            this.dispatchEvent(new DateSelectEvent(d));
+        }
+    }
+    getDayLabel(d, _ = this._formatVersion) {
+        const labeler = this.dayLabelFormatter;
+        if (typeof labeler === 'function') {
+            return labeler(d);
+        }
+        return super.getDayLabel(d);
+    }
+};
+__decorate([
+    Watch({ converter: PropertyConverters.Datetime })
+], PacemCalendarElement.prototype, "date", void 0);
+__decorate([
+    Watch({ emit: false })
+], PacemCalendarElement.prototype, "dayLabelFormatter", void 0);
+__decorate([
+    Watch()
+], PacemCalendarElement.prototype, "_formatVersion", void 0);
+PacemCalendarElement = __decorate([
+    CustomElement({
+        tagName: P + '-calendar', shadow: Defaults.USE_SHADOW_ROOT,
+        template: `<${P}-repeater class="${PCSS}-calendar calendar-grid" datasource="{{ :host.datasource }}">${buildCalendarGrid()}
+    <template>
+        <${P}-repeater class="calendar-week" datasource="{{ ^item }}">
+            <template>
+                <${P}-panel class="calendar-event" tab-order="{{ (^^index + 1) * 1000 + (^item.day + 1) * 100 + ^index }}" 
+                    on-focus=":host.oneventselect($this, ^item.event)" on-blur=":host.oneventunselect($this, ^item.event)"
+                    css-class="{{ ['day-start-'+ (^item.day + 1), 'day-end-'+ (^item.day + ^item.span + 1)] }}">
+                    <${P}-span class="event-startdate" culture="{{ :host.culture }}" hide="{{ ^item.continuing.start }}" text="{{ :host.getTimeLabel(^item.event.start) }}"></${P}-span>
+                    <${P}-span class="event-caption" text="{{ ^item.caption }}"></${P}-span>
+                </${P}-panel>
+            </template>
+        </${P}-repeater>
+    </template>
+</${P}-repeater><${P}-content></${P}-content>`
+    })
+], PacemCalendarElement);
+export { PacemCalendarElement };
+// #endregion
+// #region CLOCK (to be worked on: many possibilities ahead)
+let PacemClockElement = class PacemClockElement extends Components.PacemElement {
+};
+__decorate([
+    Watch({ converter: PropertyConverters.Datetime })
+], PacemClockElement.prototype, "now", void 0);
+PacemClockElement = __decorate([
+    CustomElement({ tagName: P + '-clock' })
+], PacemClockElement);
+export { PacemClockElement };
+// #endregion
+// #region SCHEDULE
+function buildCalendarHeader() {
+    let header = '';
+    for (let day = 0; day < 7; day++) {
+        header += `<${P}-span culture="{{ :host.culture }}" css-class="{{ {'viewday': :host.isViewDay(:host.week[${day}], :host.viewDate)} }}" class="schedule-heading day-${day + 1} text-ellipsed" text="{{ :host.getHeaderLabel(:host.week[${day}], :host.zoom) }}"></${P}-span>`;
+    }
+    const id = "dock_" + Utils.uniqueCode();
+    return `<div class="schedule-header schedule-grid"><div class="heading-left"></div>${header}</div>`;
+}
+let PacemScheduleElement = class PacemScheduleElement extends PacemCalendarBaseElement {
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        this._calendar.addEventListener('dateselect', this.emitHandler, false);
+        this._agenda.addEventListener('timeselect', this.emitHandler, false);
+        // bootstrap
+        this.now = new Date();
+    }
+    disconnectedCallback() {
+        if (this._calendar) {
+            this._calendar.removeEventListener('dateselect', this.emitHandler, false);
+            this._agenda.removeEventListener('timeselect', this.emitHandler, false);
+        }
+        super.disconnectedCallback();
+    }
+};
+__decorate([
+    ViewChild(P + '-calendar')
+], PacemScheduleElement.prototype, "_calendar", void 0);
+__decorate([
+    ViewChild(P + '-agenda')
+], PacemScheduleElement.prototype, "_agenda", void 0);
+PacemScheduleElement = __decorate([
+    CustomElement({
+        tagName: P + '-schedule', shadow: Defaults.USE_SHADOW_ROOT,
+        template: `<${P}-panel class="${PCSS}-schedule" css-class="{{ ['schedule-'+ (:host.zoom || '${CalendarZoom.Month}')] }}">
+    <${P}-timer interval="10000" on-tick=":host.now = Pacem.Utils.parseDate(Date.now())"></${P}-timer>
+    ${buildCalendarHeader()}
+    <${P}-agenda disabled-ranges="{{ :host.disabledRanges }}" on-eventselect=":host.handle($event)" on-eventunselect=":host.handle($event)" now="{{ :host.now }}" culture="{{ :host.culture }}" view-date="{{ :host.viewDate }}" zoom="{{ :host.zoom }}" week-start="{{ :host.weekStart }}" items="{{ :host.items }}"></${P}-agenda>
+    <${P}-calendar disabled-ranges="{{ :host.disabledRanges }}" on-eventselect=":host.handle($event)" on-eventunselect=":host.handle($event)" now="{{ :host.now }}" culture="{{ :host.culture }}" view-date="{{ :host.viewDate }}" zoom="{{ :host.zoom }}" week-start="{{ :host.weekStart }}" items="{{ :host.items }}"></${P}-calendar>
+    <${P}-content></${P}-content>
+</${P}-panel>`
+    })
+], PacemScheduleElement);
+export { PacemScheduleElement };
+// #endregion
+// #region RULES
+export class PacemCalendarRuleBaseElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this._disabledRanges = [];
+    }
+    viewActivatedCallback() {
+        if (!Utils.isNull(this._target = CustomElementUtils.findAncestor(this, node => node instanceof PacemCalendarBaseElement))) {
+            this.refreshDisabledRanges();
+        }
+        else {
+            throw `Missing ancestor calendar element for ${this.constructor.name}.`;
+        }
+    }
+    disconnectedCallback() {
+        this._target = undefined;
+    }
+    get target() {
+        return this._target;
+    }
+    refreshDisabledRanges() {
+        if (Utils.isNullOrEmpty(this._target)) {
+            // TODO: throw
+            return;
+        }
+        let actualRanges = this._target.disabledRanges || [];
+        // cleanup old ones
+        for (let range of this._disabledRanges) {
+            let ndx = actualRanges.indexOf(range);
+            if (ndx >= 0) {
+                actualRanges.splice(ndx, 1);
+            }
+        }
+        // add new ones
+        this._disabledRanges = this.computeDisabledRanges() || [];
+        for (let range of this._disabledRanges) {
+            actualRanges.push(range);
+        }
+        this._target.disabledRanges = actualRanges;
+    }
+}
+__decorate([
+    Debounce(true)
+], PacemCalendarRuleBaseElement.prototype, "refreshDisabledRanges", null);
+let PacemCalendarDayOfWeekRuleElement = class PacemCalendarDayOfWeekRuleElement extends PacemCalendarRuleBaseElement {
+    constructor() {
+        super(...arguments);
+        this._daysOfWeek = [];
+        this._calendarChangeHandler = (evt) => {
+            if (evt.detail.propertyName == 'month') {
+                this.refreshDisabledRanges();
+            }
+        };
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        this.target.addEventListener(PropertyChangeEventName, this._calendarChangeHandler, false);
+    }
+    propertyChangedCallback(name, old, val, first) {
+        if (name === 'days') {
+            this._daysOfWeek = (val || []).map(i => DAYS_OF_WEEK.indexOf(i)).filter(i => i >= 0);
+            this.refreshDisabledRanges();
+        }
+    }
+    computeDisabledRanges() {
+        let retval = [];
+        for (let week of this.target.month) {
+            for (let day of week) {
+                if (this._daysOfWeek.indexOf(day.getDay()) == -1) {
+                    let from = Utils.Dates.dateOnly(day), to = Utils.Dates.dateOnly(new Date(from.valueOf() + MSECS_PER_DAY + /* get rid of daylight saving switches */ MSECS_PER_HOUR));
+                    retval.push({ from: from, to: to });
+                }
+            }
+        }
+        return retval;
+    }
+};
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.StringArray })
+], PacemCalendarDayOfWeekRuleElement.prototype, "days", void 0);
+PacemCalendarDayOfWeekRuleElement = __decorate([
+    CustomElement({ tagName: P + '-calendar-daysofweek-rule' })
+], PacemCalendarDayOfWeekRuleElement);
+export { PacemCalendarDayOfWeekRuleElement };
+// #endregion