@iamproperty/components 7.2.2--beta3 → 7.4.0

package/assets/js/components/calendar/calendar.component.js

@@ -0,0 +1,1083 @@
+import { trackComponent, trackComponentRegistered } from '../_global.js';
+import { uniqueID } from '../../modules/helpers.js';
+trackComponentRegistered('iam-calendar');
+class iamCalendar extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        const assetLocation = document.body.hasAttribute('data-assets-location')
+            ? document.body.getAttribute('data-assets-location')
+            : '/assets';
+        const loadCSS = `@import "${assetLocation}/css/components/calendar.component.css";`;
+        const weekViewOnly = `<table class="table--day" role="presentation"><tbody>
+      <tr class="allday"><th>All day</th></tr>
+      <tr><th data-hour="0">00</th></tr>
+      <tr><th data-hour="1">01</th></tr>
+      <tr><th data-hour="2">02</th></tr>
+      <tr><th data-hour="3">03</th></tr>
+      <tr><th data-hour="4">04</th></tr>
+      <tr><th data-hour="5">05</th></tr>
+      <tr><th data-hour="6">06</th></tr>
+      <tr><th data-hour="7">07</th></tr>
+      <tr><th data-hour="8">08</th></tr>
+      <tr><th data-hour="9">09</th></tr>
+      <tr><th data-hour="10">10</th></tr>
+      <tr><th data-hour="11">11</th></tr>
+      <tr><th data-hour="12">12</th></tr>
+      <tr><th data-hour="13">13</th></tr>
+      <tr><th data-hour="14">14</th></tr>
+      <tr><th data-hour="15">15</th></tr>
+      <tr><th data-hour="16">16</th></tr>
+      <tr><th data-hour="17">17</th></tr>
+      <tr><th data-hour="18">18</th></tr>
+      <tr><th data-hour="19">19</th></tr>
+      <tr><th data-hour="20">20</th></tr>
+      <tr><th data-hour="21">21</th></tr>
+      <tr><th data-hour="22">22</th></tr>
+      <tr><th data-hour="23">23</th></tr>
+      </tbody></table>`;
+        const template = document.createElement('template');
+        template.innerHTML = `
+    <style>
+    ${loadCSS}
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="calendar__container">
+
+      <div class="calendar__controls">
+        <button id="today-button" class="btn btn-action">Today</button>
+
+
+        <button id="prev-button" class="btn btn-action fa-chevron-left border-0"><span class="visually-hidden">previous</span></button>
+        <div class="calendar__datepicker">
+          <span class="calendar__title"></span>
+          <input type="date" id="date" name="date" />
+        </div>
+        <button id="next-button" class="btn btn-action fa-chevron-right border-0"><span class="visually-hidden">Next</span></button>
+      
+        <hr/>
+  
+
+        <select name="view" id="view" class="btn btn-action">
+
+          <button>
+            <selectedcontent></selectedcontent> <i class="fa-regular fa-chevron-down"></i>
+          </button>
+
+          <option value="month"><i class="fa-light fa-calendar-days"></i>Month</option>
+          <option value="week"><i class="fa-light fa-calendar-week"></i>Week</option>
+          <option value="day"><i class="fa-light fa-calendar-day"></i>Day</option>
+          <option value="list"><i class="fa-light fa-list"></i>List</option>
+          <option value="year"><i class="fa-light fa-calendars"></i>Year</option>
+        </select>
+
+        <label class="tag tag--toggle"><input type="checkbox" name="split" value="true">Split view</label>
+
+        <button id="filters-button" class="btn btn-action"><i class="fa-light fa-sliders"></i><span class="visually-hidden">Filters</span></button>
+
+        <button id="settings-button" class="btn btn-action"><i class="fa-light fa-gear"></i><span class="visually-hidden">Settings</span></button>
+        
+      </div>
+
+      <dialog id="settings">
+        <button class="dialog__close">Close</button>
+        <span class="h3">Calendar settings</span>
+
+        <fieldset id="workday" class="mb-5">
+        <label>Start time <span><input type="time" id="start-time" name="start-time" step="3600" value="08:00" /><span class="suffix fa-regular fa-clock" aria-hidden="true"></span></span></label>
+        <label>End time <span><input type="time" id="end-time" name="end-time" step="3600" value="18:00" /><span class="suffix fa-regular fa-clock" aria-hidden="true"></span></span></label>
+
+        </fieldset>
+
+        <hr/>
+        <fieldset>
+          <span class="label">Show weekends</span>
+          <input type="radio" name="weekends" id="weekends-yes" tabindex="-1">
+          <label for="weekends-yes" class="d-inline-block">Yes</label>
+          <input type="radio" name="weekends" id="weekends-no" tabindex="-1">
+          <label for="weekends-no" class="d-inline-block">No</label>
+        </fieldset>
+        <hr/>
+        <button class="btn btn-primary">Save settings</button>
+        <button class="btn btn-secondary">Cancel</button>
+
+      </dialog>
+
+    
+      <div class="calendar__wrapper">
+        
+        <div id="week-view-corner" class="calendar">
+          <table>
+            <thead>
+            <tr>
+              <th class="column-header">Empty</th>
+            </tr>
+            </thead>
+            <tbody>
+              <tr class="allday">
+                <th>All day</th>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div id="week-view-header" class="calendar">
+          <table>
+            <thead>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+        </div>
+
+        <div id="week-view-side">${weekViewOnly}</div>
+
+        <div class="calendar month-wrapper" id="calendar" part="calendar">
+          <table>
+            <thead>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+        </div>
+
+        <div id="year-view">
+        </div>
+      </div>
+
+
+      <slot></slot>
+
+    </div>
+    `;
+        this.shadowRoot.appendChild(template.content.cloneNode(true));
+        this.monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+        this.dayArray = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+        this.english_ordinal_rules = new Intl.PluralRules("en", { type: "ordinal" });
+        this.suffixes = {
+            one: "st",
+            two: "nd",
+            few: "rd",
+            other: "th"
+        };
+        this.calendars = ['Default']; // TO DO allow for these to be set via the component data attributes
+        this.eventTypes = []; // TO DO allow for these to be set via the component data attributes
+        this.pauseObserver = false;
+    }
+    createThead(sundayFirst) {
+        if (sundayFirst)
+            return `<tr>
+    <th class="column-header sunday"><span class="long-day-name">Sunday</span><span class="short-day-name" role="presentation">Sun</span></th>
+    <th class="column-header monday"><span class="long-day-name">Monday</span><span class="short-day-name" role="presentation">Mon</span></th>
+    <th class="column-header tuesday"><span class="long-day-name">Tuesday</span><span class="short-day-name" role="presentation">Tues</span></th>
+    <th class="column-header wednesday"><span class="long-day-name">Wednesday</span><span class="short-day-name" role="presentation">Wed</span></th>
+    <th class="column-header thursday"><span class="long-day-name">Thursday</span><span class="short-day-name" role="presentation">Thurs</span></th>
+    <th class="column-header friday"><span class="long-day-name">Friday</span><span class="short-day-name" role="presentation">Fri</span></th>
+    <th class="column-header saturday"><span class="long-day-name">Saturday</span><span class="short-day-name" role="presentation">Sat</span></th>
+  </tr>`;
+        return `<tr>
+    <th class="column-header monday"><span class="long-day-name">Monday</span><span class="short-day-name" role="presentation">Mon</span></th>
+    <th class="column-header tuesday"><span class="long-day-name">Tuesday</span><span class="short-day-name" role="presentation">Tues</span></th>
+    <th class="column-header wednesday"><span class="long-day-name">Wednesday</span><span class="short-day-name" role="presentation">Wed</span></th>
+    <th class="column-header thursday"><span class="long-day-name">Thursday</span><span class="short-day-name" role="presentation">Thurs</span></th>
+    <th class="column-header friday"><span class="long-day-name">Friday</span><span class="short-day-name" role="presentation">Fri</span></th>
+    <th class="column-header saturday"><span class="long-day-name">Saturday</span><span class="short-day-name" role="presentation">Sat</span></th>
+    <th class="column-header sunday"><span class="long-day-name">Sunday</span><span class="short-day-name" role="presentation">Sun</span></th>
+</tr>`;
+    }
+    numberDaysInMonth(year, month) {
+        return new Date(year, month, 0).getDate();
+    }
+    getOrdinalNumber(number) {
+        const category = this.english_ordinal_rules.select(number);
+        const suffix = this.suffixes[category];
+        return (number + suffix);
+    }
+    setToMonday(date) {
+        const day = date.getDay() || 7;
+        if (day !== 1)
+            date.setHours(-24 * (day - 1));
+        return date;
+    }
+    setToSunday(date) {
+        const monday = this.setToMonday(date);
+        const sunday = new Date(monday);
+        sunday.setDate(sunday.getDate() + 6);
+        return sunday;
+    }
+    getTitle(dateStr, view) {
+        const date = new Date(dateStr);
+        const month = date.getMonth();
+        const year = date.getFullYear();
+        const day = date.getDate();
+        const dayOfWeek = date.getDay() ? date.getDay() : 7;
+        if (view == "week") {
+            const monday = this.setToMonday(new Date(dateStr));
+            const sunday = this.setToSunday(new Date(dateStr));
+            const mondayMonth = monday.getMonth();
+            const mondayYear = monday.getFullYear();
+            const mondayDay = monday.getDate();
+            const sundayMonth = sunday.getMonth();
+            const sundayYear = sunday.getFullYear();
+            const sundayDay = sunday.getDate();
+            return `${this.getOrdinalNumber(mondayDay)} ${mondayMonth != sundayMonth ? this.monthArray[sundayMonth] : ''} ${mondayYear != sundayYear ? mondayYear : ''} - ${this.getOrdinalNumber(sundayDay)} ${this.monthArray[sundayMonth]} ${sundayYear}`;
+        }
+        else if (view == "day") {
+            return `${this.dayArray[dayOfWeek]} ${this.getOrdinalNumber(day)} ${this.monthArray[month]} ${year}`;
+        }
+        else if (view == "year") {
+            return `${year}`;
+        }
+        return `${this.monthArray[month]} ${year}`;
+    }
+    createCalendar(selectedDate, today, sundayFirst) {
+        const date = new Date(selectedDate);
+        const month = date.getMonth();
+        const year = date.getFullYear();
+        const day = date.getDate();
+        const selectedDateStr = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+        const daysThisMonth = this.numberDaysInMonth(year, month + 1);
+        const startOfMonth = new Date(`${year}-${String(month + 1).padStart(2, "0")}-01`);
+        const endOfMonth = new Date(`${year}-${String(month + 1).padStart(2, "0")}-${daysThisMonth}`);
+        const startDay = startOfMonth.getDay() != 0 ? startOfMonth.getDay() : 7;
+        const endDay = endOfMonth.getDay() != 0 ? endOfMonth.getDay() : 7;
+        const loopDays = daysThisMonth + startDay + (7 - endDay - 1);
+        // Get the previous month
+        const prevMonthDate = new Date(selectedDate);
+        prevMonthDate.setMonth(prevMonthDate.getMonth() - 1);
+        const prevMonth = prevMonthDate.getMonth();
+        const prevMonthYear = prevMonthDate.getFullYear();
+        const daysPrevMonth = this.numberDaysInMonth(year, month);
+        // Get the next month
+        const nextMonthDate = new Date(selectedDate);
+        nextMonthDate.setMonth(nextMonthDate.getMonth() + 1);
+        const nextMonth = nextMonthDate.getMonth();
+        const nextMonthYear = nextMonthDate.getFullYear();
+        // Get calendars
+        if (!this.hasAttribute('data-calendars')) {
+            Array.from(this.querySelectorAll('button[data-calendar]')).forEach((element) => {
+                // Scan through the buttons and look forunique calendar names
+                if (!(this.calendars.includes(element.getAttribute('data-calendar'))))
+                    this.calendars.push(element.getAttribute('data-calendar'));
+            });
+        }
+        // Create tbody string by looping through the number of days in month plus some days before and after
+        let tbodyContent = `<tr>`;
+        for (let i = (sundayFirst ? 0 : 1); i <= loopDays; i++) {
+            const loopDay = i - (startDay - 1);
+            const loopDate = `${year}-${String(month + 1).padStart(2, "0")}-${String(loopDay).padStart(2, "0")}`;
+            const dayOfWeek = i % 7;
+            tbodyContent += `<td class="day--${this.dayArray[dayOfWeek].toLowerCase()} ${loopDate == today ? 'today' : ''} ${loopDate == selectedDateStr ? 'selected' : ''} ${i < startDay ? 'prev-month' : ''} ${loopDay > daysThisMonth ? 'next-month' : ''}">`;
+            // prev month days
+            if (i < startDay) {
+                const adjustedLoopDay = daysPrevMonth - (startDay - 1 - i);
+                const adjustedLoopDate = `${prevMonthYear}-${String(prevMonth + 1).padStart(2, "0")}-${String(adjustedLoopDay).padStart(2, "0")}`;
+                tbodyContent += `<time class="column-header" datetime="${adjustedLoopDate}" title="${this.dayArray[dayOfWeek]} ${loopDay} ${this.monthArray[prevMonth]} ${year}"><span class="day-of-week">${this.dayArray[dayOfWeek]} </span><span class="day">${adjustedLoopDay}</span> <span class="month">${this.monthArray[prevMonth]}</span></time>`;
+                tbodyContent += this.addDay(adjustedLoopDate, this.calendars);
+            }
+            if (i >= startDay && loopDay <= daysThisMonth) {
+                tbodyContent += `<time class="column-header" datetime="${loopDate}" title="${this.dayArray[dayOfWeek]} ${loopDay} ${this.monthArray[month]} ${year}"><span class="day-of-week">${this.dayArray[dayOfWeek]} </span><span class="day">${loopDay}</span> <span class="month">${this.monthArray[month]}</span></time>`;
+                tbodyContent += this.addDay(loopDate, this.calendars);
+            }
+            // next month days
+            if (loopDay > daysThisMonth) {
+                const adjustedLoopDay = i - (startDay - 1) - daysThisMonth;
+                const adjustedLoopDate = `${nextMonthYear}-${String(nextMonth + 1).padStart(2, "0")}-${String(adjustedLoopDay).padStart(2, "0")}`;
+                tbodyContent += `<time class="column-header" datetime="${adjustedLoopDate}" title="${this.dayArray[dayOfWeek]} ${loopDay} ${this.monthArray[nextMonth]} ${year}"><span class="day-of-week">${this.dayArray[dayOfWeek]} </span><span class="day">${adjustedLoopDay}</span> <span class="month">${this.monthArray[nextMonth]}</span></time>`;
+                tbodyContent += this.addDay(adjustedLoopDate, this.calendars);
+            }
+            tbodyContent += '</td>';
+            // Close row and start a new one
+            if (((sundayFirst ? i + 1 : i) % 7) === 0 && i != loopDays) {
+                tbodyContent += `</tr><tr>`;
+            }
+        }
+        tbodyContent += '</tr>';
+        return tbodyContent;
+    }
+    addDay(day, calendars) {
+        let htmlTable = '<table class="table--day">';
+        htmlTable += `<thead><tr><th>time</th>`;
+        calendars.forEach(calendarTitle => {
+            htmlTable += `<th class="column-header">${calendarTitle}</th>`;
+        });
+        htmlTable += `</tr></thead>`;
+        htmlTable += `<tbody>`;
+        htmlTable += `<tr class="allday"><th>All day</th>`;
+        calendars.forEach(calendarTitle => {
+            htmlTable += `<td datetime="${day}" data-calendar="${calendarTitle}"><span datetime="${day}"></span></td>`;
+        });
+        htmlTable += `</tr>`;
+        for (let i = 0; i < 24; i++) {
+            htmlTable += `<tr class="hour${i}"><th data-hour="${i}">${i}${i < 12 ? 'am' : 'pm'}</th>`;
+            calendars.forEach(calendarTitle => {
+                htmlTable += `<td datetime="${day}T${String(i).padStart(2, "0")}:00" data-calendar="${calendarTitle}"><span datetime="${day}T${String(i).padStart(2, "0")}:00"></span><span datetime="${day}T${String(i).padStart(2, "0")}:15"></span><span datetime="${day}T${String(i).padStart(2, "0")}:30"></span><span datetime="${day}T${String(i).padStart(2, "0")}:45"></span></td>`;
+            });
+            htmlTable += `</tr>`;
+        }
+        htmlTable += `</tbody>`;
+        htmlTable += '</table>';
+        return htmlTable;
+    }
+    addEvents() {
+        function setDefaultEventValues(component, element, index) {
+            const datetime = element.getAttribute('datetime');
+            const datetimeArr = datetime.split('T');
+            let id = element.getAttribute('id');
+            // Add ID
+            if (!element.hasAttribute('id')) {
+                id = `event${uniqueID(index)}`;
+                element.setAttribute('id', id);
+            }
+            // Wrap content in span for formatting in week/day view
+            if (!element.querySelector('span:not(.tooltip__content')) {
+                element.innerHTML = `<span>${element.innerHTML}</span>`;
+            }
+            // Add event type enum so we can set the correct colours
+            //if(!element.hasAttribute('data-event-type-enum') && element.hasAttribute('data-event-type')){
+            const eventType = element.getAttribute('data-event-type');
+            if (!component.eventTypes.includes(eventType))
+                component.eventTypes.push(eventType);
+            element.setAttribute('data-event-type-enum', component.eventTypes.indexOf(eventType) + 1);
+            //}
+            // Add calendar enum so we can set the correct colours
+            if (element.hasAttribute('data-calendar')) {
+                const calendar = element.getAttribute('data-calendar');
+                if (!component.calendars.includes(calendar))
+                    component.calendars.push(calendar);
+                element.setAttribute('data-calendar-enum', component.calendars.indexOf(calendar) + 1);
+            }
+            if (!element.hasAttribute('data-calendar-enum')) {
+                element.setAttribute('data-calendar-enum', 1);
+            }
+            if (!element.hasAttribute('data-hours') && !element.hasAttribute('data-days')) {
+                if (datetimeArr[1]) {
+                    element.setAttribute('data-hours', 1);
+                }
+                else {
+                    element.setAttribute('data-days', 1);
+                }
+            }
+            let getRoundedDate = (minutes, d = new Date()) => {
+                let ms = 1000 * 60 * minutes; // convert minutes to ms
+                let roundedDate = new Date(Math.round(d.getTime() / ms) * ms);
+                const newMonth = roundedDate.getMonth();
+                const newYear = roundedDate.getFullYear();
+                const newDay = roundedDate.getDate();
+                const newMinutes = roundedDate.getMinutes();
+                const newHour = roundedDate.getHours();
+                const strRoundedDate = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-${String(newDay).padStart(2, "0")}T${String(newHour).padStart(2, "0")}:${String(newMinutes).padStart(2, "0")}`;
+                return strRoundedDate;
+            };
+            if (datetimeArr[1]) {
+                element.setAttribute('data-start', datetimeArr[1]);
+                element.querySelector(':scope > span').setAttribute('data-start', datetimeArr[1]);
+                const roundedDatetime = getRoundedDate(15, new Date(datetime));
+                element.setAttribute('datetime', roundedDatetime);
+                console.log(roundedDatetime);
+            }
+            if (element.querySelector('.tooltip__content')) {
+                const tooltip = element.querySelector('.tooltip__content');
+                tooltip.style.positionAnchor = `--${id}`;
+                element.style.anchorName = `--${id}`;
+            }
+            element.classList.add('defaults-added');
+        }
+        function adjustEvent(component, element, continued) {
+            var _a;
+            const datetime = element.getAttribute('datetime');
+            const date = new Date(datetime);
+            const dayOfWeek = date.getDay() ? date.getDay() : 7;
+            // Locate where we need to add slots for the buttons to go - We need duplicate slots for the split view and fixed header
+            const timeTd = component.shadowRoot.querySelector(`.month-wrapper .table--day td:has(span[datetime="${datetime}"])${element.hasAttribute('data-calendar') ? `[data-calendar="${element.getAttribute('data-calendar').replace('_', '')}"]` : ''}`);
+            const timeTdHeader = component.shadowRoot.querySelector(`#week-view-header .table--day td:has(span[datetime="${datetime}"])${element.hasAttribute('data-calendar') ? `[data-calendar="${element.getAttribute('data-calendar').replace('_', '')}"]` : ''}`);
+            if (timeTdHeader && timeTdHeader.closest('tr').classList.contains("allday")) {
+                // Add the alldays slot for the fixed header 
+                if (!timeTdHeader.querySelector(`slot[name="${datetime}${element.hasAttribute('data-calendar') ? `-${element.getAttribute('data-calendar').replace('_', '')}` : ''}-header]"`)) {
+                    timeTdHeader.querySelector(`span[datetime="${datetime}"]`).insertAdjacentHTML('beforeEnd', `<slot name="${datetime}${element.hasAttribute('data-calendar') ? `-${element.getAttribute('data-calendar').replace('_', '')}` : ''}-header" class="${continued ? 'continued' : ''}"></slot>`);
+                }
+            }
+            const dateTd = (_a = timeTd === null || timeTd === void 0 ? void 0 : timeTd.parentElement) === null || _a === void 0 ? void 0 : _a.closest('td');
+            // original event needs a slot name adding
+            element.setAttribute('slot', `${datetime}${element.hasAttribute('data-calendar') ? `-${element.getAttribute('data-calendar').replace('_', '')}` : ''}`);
+            // Add matching slot to the event element to have it show in the correct place on the calendar
+            if (timeTd) {
+                // Add the default slot
+                if (!timeTd.querySelector(`slot[name="${datetime}${element.hasAttribute('data-calendar') ? `-${element.getAttribute('data-calendar').replace('_', '')}` : ''}"]`)) {
+                    timeTd.querySelector(`span[datetime="${datetime}"]`).insertAdjacentHTML('beforeEnd', `<slot name="${datetime}${element.hasAttribute('data-calendar') ? `-${element.getAttribute('data-calendar').replace('_', '')}` : ''}" class="${continued ? 'continued' : ''}"></slot>`);
+                }
+                // Set the classes need to create the grey bars in the mobile month view
+                const events = dateTd.hasAttribute('data-events') ? parseInt(dateTd.getAttribute('data-events')) : 0;
+                let hours = dateTd.hasAttribute('data-hours') ? parseFloat(dateTd.getAttribute('data-hours')) : 0;
+                hours += element.hasAttribute('data-hours') ? parseFloat(element.getAttribute('data-hours')) : 0;
+                dateTd.setAttribute('data-events', parseInt(events) + 1);
+                if ((events + 1) > 2)
+                    dateTd.setAttribute('data-more', (parseInt(events) + 1) - 2);
+                dateTd.setAttribute('data-hours', hours);
+                dateTd.classList.add('has-event');
+                if (timeTd.closest('tr').classList.contains('has-event'))
+                    timeTd.closest('tr').classList.add('multiple-event');
+                else
+                    timeTd.closest('tr').classList.add('has-event');
+                if (hours > 2)
+                    dateTd.classList.add('multi-events');
+                if (hours > 4)
+                    dateTd.classList.add('busy-day');
+                if (element.hasAttribute('data-days'))
+                    dateTd.classList.add('all-day');
+                if (element.classList.contains('continued'))
+                    dateTd.classList.add('continued-day');
+            }
+            // Add CSS properties so we can control the size of the event elements for day and week view
+            if (element.hasAttribute('data-hours'))
+                element.style.setProperty('--event-height', `${parseInt(element.getAttribute('data-hours')) * (1.09375 * 4)}rem`);
+            if (element.hasAttribute('data-days') && !element.classList.contains('processed')) {
+                const eventDayTotal = element.getAttribute('data-days');
+                element.style.setProperty('--event-width', `${eventDayTotal * 100}%`);
+                element.style.setProperty('--event-max-width', `${(8 - dayOfWeek) * 100}%`);
+                element.classList.add('allday-event');
+                // Create a duplicate event for each day the orginal 
+                for (let i = 1; i < eventDayTotal; i++) {
+                    const cloneElement = element.cloneNode(true);
+                    cloneElement.removeAttribute('data-days');
+                    cloneElement.removeAttribute('style');
+                    cloneElement.classList.add('continued');
+                    cloneElement.classList.add('allday-event');
+                    const id = `event${uniqueID(i)}`;
+                    cloneElement.setAttribute('id', id);
+                    if (cloneElement.querySelector('.tooltip__content')) {
+                        const tooltip = cloneElement.querySelector('.tooltip__content');
+                        tooltip.style.positionAnchor = `--${id}`;
+                        cloneElement.style.anchorName = `--${id}`;
+                    }
+                    const newDate = new Date(datetime);
+                    newDate.setDate(newDate.getDate() + i);
+                    const newMonth = newDate.getMonth();
+                    const newYear = newDate.getFullYear();
+                    const newDay = newDate.getDate();
+                    const newDayOfWeek = newDate.getDay() ? newDate.getDay() : 7;
+                    const strCloneEvent = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-${String(newDay).padStart(2, "0")}`;
+                    cloneElement.setAttribute('data-original-datetime', element.getAttribute('datetime'));
+                    cloneElement.setAttribute('datetime', strCloneEvent);
+                    element.after(cloneElement); // Add after original
+                    adjustEvent(component, cloneElement, true);
+                    if (newDayOfWeek == 1) { // Monday
+                        cloneElement.style.setProperty('--event-width', `${(eventDayTotal - i) * 100}%`);
+                        cloneElement.style.setProperty('--event-max-width', `${(8 - newDayOfWeek) * 100}%`);
+                        cloneElement.classList.remove('continued');
+                    }
+                }
+            }
+            // Add flag so we dont have to re-do the above
+            element.classList.add('processed');
+        }
+        this.pauseObserver = true;
+        Array.from(this.querySelectorAll('button[datetime]')).forEach((element, index) => {
+            setDefaultEventValues(this, element, index);
+            adjustEvent(this, element);
+        });
+        setTimeout(() => {
+            this.pauseObserver = false;
+        }, "500");
+    }
+    addJSEvents(component) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        // Add events to the newly created calendar 
+        const title = (_a = component.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.calendar__title');
+        const datePicker = (_b = component.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`#date`);
+        const viewPicker = (_c = component.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector(`#view`);
+        const yearView = (_d = this.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('#year-view');
+        const today = new Date();
+        const date = today.getDate();
+        const month = today.getMonth();
+        const year = today.getFullYear();
+        const strToday = `${year}-${String(month + 1).padStart(2, "0")}-${String(date).padStart(2, "0")}`;
+        const tbody = (_e = component.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('#calendar > table > tbody');
+        // clicking on the day istelf
+        Array.from(component.shadowRoot.querySelectorAll('.month-wrapper > table > tbody > tr > td:has(slot)')).forEach((element) => {
+            element.addEventListener('click', (event) => {
+                if (!event.target.matches('button')) {
+                    const elementDate = element.querySelector('time').getAttribute('datetime');
+                    datePicker.value = elementDate;
+                    Array.from(tbody.querySelectorAll(':scope > tr > td')).forEach((innerelement) => {
+                        innerelement.classList.remove('selected');
+                    });
+                    element.classList.add('selected');
+                    // Go to day if the in month view with out split view enabled
+                    if (component.shadowRoot.querySelector('[name="split"]:checked') && viewPicker.value == "month") {
+                        Array.from(component.querySelectorAll(`[data-slot]`)).forEach((button) => {
+                            button.setAttribute('slot', button.getAttribute('data-slot'));
+                        });
+                        Array.from(component.querySelectorAll(`[slot^="${datePicker.value}"]`)).forEach((button) => {
+                            button.setAttribute('data-slot', button.getAttribute('slot'));
+                            button.removeAttribute('slot');
+                        });
+                    }
+                    else if (!component.shadowRoot.querySelector('[name="split"]:checked') && viewPicker.value == "month") {
+                        viewPicker.value = "day";
+                        title === null || title === void 0 ? void 0 : title.innerHTML = this.getTitle(datePicker.value, viewPicker.value);
+                        component.scrollIntoPlace();
+                    }
+                    if (viewPicker.value == "year") {
+                        viewPicker.value = "month";
+                        yearView === null || yearView === void 0 ? void 0 : yearView.innerHTML = '';
+                        tbody === null || tbody === void 0 ? void 0 : tbody.innerHTML = component.createCalendar(datePicker.value, strToday);
+                        component.addEvents();
+                    }
+                }
+            });
+        });
+        // Drag and drop
+        (_f = component.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelectorAll(`#calendar .table--day td span`).forEach((element) => {
+            element.addEventListener("dragover", (ev) => {
+                ev.preventDefault();
+                return false;
+            });
+            element.addEventListener("dragenter", (ev) => {
+                ev.preventDefault();
+                element.classList.add('dragover');
+            });
+            element.addEventListener("dragleave", (ev) => {
+                ev.preventDefault();
+                element.classList.remove('dragover');
+            });
+            element.addEventListener("drop", (ev) => {
+                ev.preventDefault();
+                const droppedElement = component.querySelector(`#${ev.dataTransfer.getData("text")}`);
+                const td = element.closest('td');
+                const datetime = element.getAttribute('datetime');
+                element.classList.remove('dragover');
+                // Add a new slot to te span if needed
+                if (!element.querySelector(`slot[name="${datetime}${td.hasAttribute('data-calendar') ? `-${td.getAttribute('data-calendar').replace('_', '')}]` : ''}]"`)) {
+                    element.insertAdjacentHTML('beforeEnd', `<slot name="${datetime}${td.hasAttribute('data-calendar') ? `-${td.getAttribute('data-calendar').replace('_', '')}` : ''}" class=""></slot>`);
+                }
+                // Update the slot attribute to match the slot the event has been dropped on
+                droppedElement === null || droppedElement === void 0 ? void 0 : droppedElement.setAttribute('slot', `${datetime}${td.hasAttribute('data-calendar') ? `-${td.getAttribute('data-calendar').replace('_', '')}` : ''}`);
+            });
+        });
+        // Watch for the event being resized 
+        const resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.target.classList.contains('mousedown'))
+                    entry.target.classList.add('resizing');
+            }
+        });
+        if (component.hasAttribute('data-drag')) {
+            component.querySelectorAll(`button:not([draggable])`).forEach((element) => {
+                element.setAttribute('draggable', 'true');
+                element.addEventListener("dragstart", (ev) => {
+                    ev.dataTransfer.setData("text", ev.target.id); // save the id for when dropped
+                });
+                // set onbserver
+                resizeObserver.observe(element);
+                element.addEventListener("mousedown", (ev) => {
+                    element.classList.add('mousedown');
+                });
+                element.addEventListener("click", (ev) => {
+                    if (element.classList.contains('resizing')) {
+                        ev.stopPropagation();
+                        ev.stopImmediatePropagation();
+                        element.classList.remove('mousedown');
+                        element.classList.remove('resizing');
+                        // Work out the evnt length in hours and set the height
+                        const span = this.shadowRoot.querySelector(`span[datetime="${element.getAttribute('datetime')}"]`);
+                        const spanStyles = window.getComputedStyle(span);
+                        const hours = Math.round(parseInt(element.style.height) / parseInt(spanStyles.getPropertyValue("height"))) / 4;
+                        element.setAttribute('data-hours', hours);
+                        element.style.setProperty('--event-height', `${hours * (1.09375 * 4)}rem`);
+                        element.style.height = "";
+                        // to do dispatch event
+                    }
+                });
+            });
+        }
+        component.querySelectorAll(`button`).forEach((element) => {
+            element.addEventListener("contextmenu", (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+            });
+        });
+        (_g = component.shadowRoot) === null || _g === void 0 ? void 0 : _g.querySelectorAll(`.month-wrapper > table > tbody > tr > td`).forEach((element) => {
+            element.addEventListener("contextmenu", (event) => {
+                event.preventDefault();
+                const customEvent = new CustomEvent('right-click', {
+                    detail: {
+                        'clientX': event.clientX,
+                        'clientY': event.clientY,
+                        'element': element,
+                        'datetime': element.querySelector('time').getAttribute('datetime')
+                    },
+                });
+                console.log(element);
+                this.dispatchEvent(customEvent);
+            });
+        });
+    }
+    paginateDate(direction, view, currentDate) {
+        if (view == "month" || view == "list") {
+            const selectedDate = new Date(currentDate);
+            if (direction == "next")
+                selectedDate.setMonth(selectedDate.getMonth() + 1);
+            else
+                selectedDate.setMonth(selectedDate.getMonth() - 1);
+            const month = selectedDate.getMonth() + 1;
+            const year = selectedDate.getFullYear();
+            const strNextMonth = `${year}-${String(month).padStart(2, "0")}-01`;
+            return strNextMonth;
+        }
+        else if (view == "week") {
+            //const selectedDate = new Date(currentDate);
+            const monday = this.setToMonday(new Date(currentDate));
+            if (direction == "next")
+                monday.setDate(monday.getDate() + 7);
+            else
+                monday.setDate(monday.getDate() - 7);
+            const date = monday.getDate();
+            const month = monday.getMonth() + 1;
+            const year = monday.getFullYear();
+            const strNextWeek = `${year}-${String(month).padStart(2, "0")}-${String(date).padStart(2, "0")}`;
+            return strNextWeek;
+        }
+        else if (view == "year") {
+            const selectedDate = new Date(currentDate);
+            if (direction == "next")
+                selectedDate.setYear(selectedDate.getFullYear() + 1);
+            else
+                selectedDate.setYear(selectedDate.getFullYear() - 1);
+            const year = selectedDate.getFullYear();
+            const month = selectedDate.getMonth() + 1;
+            const strNextMonth = `${year}-${String(month).padStart(2, "0")}-01`;
+            return strNextMonth;
+        }
+        const nextDay = new Date(currentDate);
+        if (direction == "next")
+            nextDay.setDate(nextDay.getDate() + 1);
+        else
+            nextDay.setDate(nextDay.getDate() - 1);
+        const date = nextDay.getDate();
+        const month = nextDay.getMonth() + 1;
+        const year = nextDay.getFullYear();
+        const strNextDay = `${year}-${String(month).padStart(2, "0")}-${String(date).padStart(2, "0")}`;
+        return strNextDay;
+    }
+    setWeekDay() {
+        var _a, _b, _c, _d;
+        (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.out-of-hours').forEach(element => {
+            element.classList.remove('out-of-hours');
+        });
+        const startTime = parseInt((_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#start-time').value.split(':')[0]);
+        const endTime = parseInt((_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#end-time').value.split(':')[0]);
+        (_d = this.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelectorAll('[data-hour]').forEach(element => {
+            const hour = parseInt(element.getAttribute('data-hour'));
+            if (hour < startTime)
+                element.classList.add('out-of-hours');
+            if (hour >= endTime)
+                element.classList.add('out-of-hours');
+        });
+    }
+    scrollIntoPlace() {
+        var _a, _b;
+        const fs = parseInt(window.getComputedStyle(document.body).getPropertyValue('font-size'));
+        const startTime = parseInt((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#start-time').value.split(':')[0]);
+        const scrollPos = startTime * (4.5 * fs);
+        const viewPicker = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`#view`);
+        const wrapper = this.shadowRoot.querySelector('.calendar__wrapper');
+        // scroll
+        if (viewPicker.value == "week")
+            wrapper.scrollTo(0, scrollPos); // TO DO work out how much to scroll by
+        else if (viewPicker.value == "day") {
+            wrapper.scrollTo(0, scrollPos); // TO DO work out how much to scroll by
+        }
+    }
+    setupSettings() {
+        var _a, _b;
+        const settingsButton = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#settings-button');
+        const settingsDialog = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#settings');
+        // Setup the pre-defined attributes and display the form elements to match
+        if (this.hasAttribute('data-hide-weekends'))
+            settingsDialog.querySelector('#weekends-no').checked = true;
+        else
+            settingsDialog.querySelector('#weekends-yes').checked = true;
+        if (this.hasAttribute('data-start-time'))
+            settingsDialog.querySelector('#start-time').value = this.getAttribute('data-start-time');
+        else
+            this.setAttribute('data-start-time', settingsDialog.querySelector('#start-time').value);
+        if (this.hasAttribute('data-end-time'))
+            settingsDialog.querySelector('#end-time').value = this.getAttribute('data-end-time');
+        else
+            this.setAttribute('data-end-time', settingsDialog.querySelector('#end-time').value);
+        // open dialog
+        settingsButton === null || settingsButton === void 0 ? void 0 : settingsButton.addEventListener('click', () => {
+            settingsDialog.showModal();
+            settingsDialog.focus();
+            const customEvent = new CustomEvent('open-settings');
+            this.dispatchEvent(customEvent);
+        });
+        // On clicking the save button, adjust the data attributes
+        settingsDialog === null || settingsDialog === void 0 ? void 0 : settingsDialog.addEventListener('click', (event) => {
+            if (event && event.target.matches('button')) {
+                if (event.target.matches('.btn-primary')) {
+                    if (settingsDialog.querySelector('#weekends-no:checked'))
+                        this.setAttribute('data-hide-weekends', 'true');
+                    else
+                        this.removeAttribute('data-hide-weekends');
+                    this.setAttribute('data-start-time', settingsDialog.querySelector('#start-time').value);
+                    this.setAttribute('data-end-time', settingsDialog.querySelector('#end-time').value);
+                    this.setWeekDay();
+                    const customEvent = new CustomEvent('save-settings');
+                    this.dispatchEvent(customEvent);
+                }
+                const customEvent = new CustomEvent('close-settings');
+                this.dispatchEvent(customEvent);
+                settingsDialog.close();
+            }
+        });
+    }
+    setTime() {
+        var _a;
+        if (!this.hasAttribute('data-time')) {
+            const today = new Date();
+            const hour = today.getHours();
+            const minute = today.getMinutes();
+            const time = `${hour}:${minute}`;
+            this.setAttribute('data-time', time);
+        }
+        if (this.hasAttribute('data-time')) {
+            const time = this.getAttribute('data-time');
+            const hour = parseInt(time.split(':')[0]);
+            const minute = parseInt(time.split(':')[1]);
+            (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`[data-hour="${hour}"]`).forEach((element) => {
+                var _a;
+                element.setAttribute('data-time', time);
+                element.classList.add('column-header');
+                (_a = element.closest('tr')) === null || _a === void 0 ? void 0 : _a.style.setProperty('--minute-pos', ((minute / 60) * 100) + '%');
+            });
+        }
+    }
+    getYearView(selectedDate, today, sundayFirst) {
+        let yearViewStr = "";
+        for (let i = 0; i < 12; i++) {
+            console.log(selectedDate);
+            const selectedDateObj = new Date(selectedDate);
+            const selectedYear = selectedDateObj.getFullYear();
+            const selectedFormattedDate = `${selectedYear}-${String(i + 1).padStart(2, "0")}-01`;
+            yearViewStr += `<div class='month-wrapper'>
+        <time class="column-header">${this.monthArray[i]}</time>
+        <table>
+          <thead>
+            ${this.createThead(sundayFirst)}
+          </thead>
+          <tbody>
+            ${this.createCalendar(selectedFormattedDate, today, sundayFirst)}
+          </tbody>
+        </table>
+      </div>`;
+        }
+        return yearViewStr;
+    }
+    connectedCallback() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        // To to transform the below into variables of component to make more re-usable
+        const title = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.calendar__title');
+        const tbody = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#calendar > table > tbody');
+        const thead = (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#calendar > table > thead');
+        //const tbodySplit = this.shadowRoot?.querySelector('#split > table > tbody');
+        //const theadSplit = this.shadowRoot?.querySelector('#split > table > thead');
+        const weekViewHeader = (_d = this.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('#week-view-header > table > tbody');
+        const yearView = (_e = this.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('#year-view');
+        const datePicker = (_f = this.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector(`#date`);
+        const viewPicker = (_g = this.shadowRoot) === null || _g === void 0 ? void 0 : _g.querySelector(`#view`);
+        const todayButton = (_h = this.shadowRoot) === null || _h === void 0 ? void 0 : _h.querySelector('#today-button');
+        const filtersButton = (_j = this.shadowRoot) === null || _j === void 0 ? void 0 : _j.querySelector('#filters-button');
+        const prevButton = (_k = this.shadowRoot) === null || _k === void 0 ? void 0 : _k.querySelector('#prev-button');
+        const nextButton = (_l = this.shadowRoot) === null || _l === void 0 ? void 0 : _l.querySelector('#next-button');
+        const sundayFirst = this.hasAttribute('data-sunday-first');
+        const splitButton = (_m = this.shadowRoot) === null || _m === void 0 ? void 0 : _m.querySelector(`[name="split"]`);
+        // set the table head - starting by monday by default but can be changed to sunday
+        thead === null || thead === void 0 ? void 0 : thead.innerHTML = this.createThead(sundayFirst);
+        //theadSplit?.innerHTML = this.createThead(sundayFirst);
+        // Get a formatted version of todays date
+        const today = new Date();
+        const date = today.getDate();
+        const month = today.getMonth();
+        const year = today.getFullYear();
+        const strToday = `${year}-${String(month + 1).padStart(2, "0")}-${String(date).padStart(2, "0")}`;
+        datePicker.value = strToday;
+        // Setup the view, month being default
+        if (this.hasAttribute('data-view'))
+            viewPicker.value = this.getAttribute('data-view');
+        else {
+            this.setAttribute('data-view', "month");
+            viewPicker.value = "month";
+        }
+        if (this.hasAttribute('data-views'))
+            viewPicker === null || viewPicker === void 0 ? void 0 : viewPicker.setAttribute('data-views', this.getAttribute('data-views'));
+        // Create the calendars
+        if (this.hasAttribute('data-calendars')) {
+            this.calendars = this.getAttribute('data-calendars').split(',');
+            this.calendars.forEach((item, index) => {
+                this.calendars[index] = item.trim();
+            });
+        }
+        // Setup the settings dialog
+        this.setupSettings();
+        // Setup the calendar then adjust and add events 
+        title === null || title === void 0 ? void 0 : title.innerHTML = this.getTitle(strToday, viewPicker.value);
+        const calendarHtml = this.createCalendar(strToday, strToday, sundayFirst);
+        tbody === null || tbody === void 0 ? void 0 : tbody.innerHTML = calendarHtml;
+        //tbodySplit?.innerHTML = calendarHtml;
+        weekViewHeader === null || weekViewHeader === void 0 ? void 0 : weekViewHeader.innerHTML = calendarHtml;
+        if (viewPicker.value == "year") {
+            yearView === null || yearView === void 0 ? void 0 : yearView.innerHTML = this.getYearView(datePicker.value, strToday, sundayFirst);
+            tbody === null || tbody === void 0 ? void 0 : tbody.innerHTML = '';
+        }
+        this.addEvents();
+        this.addJSEvents(this);
+        this.setWeekDay(); // Working hours
+        this.setTime(); // Month and day view has a current time indicator
+        this.scrollIntoPlace(); // Scroll into place - month and day view needs have the weekday hours in place
+        // #region Add events for the basic top controls
+        // Remove the slot attribute on selected days when in split mode
+        splitButton === null || splitButton === void 0 ? void 0 : splitButton.addEventListener('change', () => {
+            if (splitButton.checked) {
+                Array.from(this.querySelectorAll(`[slot^="${datePicker.value}"]`)).forEach((button) => {
+                    button.setAttribute('data-slot', button.getAttribute('slot'));
+                    button.removeAttribute('slot');
+                });
+            }
+            else {
+                Array.from(this.querySelectorAll(`[data-slot]`)).forEach((button) => {
+                    button.setAttribute('slot', button.getAttribute('data-slot'));
+                });
+            }
+        });
+        const resizeObserver = new ResizeObserver((entries) => {
+            const splitButtonDisplayed = window.getComputedStyle(splitButton === null || splitButton === void 0 ? void 0 : splitButton.parentElement, null).display;
+            if (splitButtonDisplayed == "none") {
+                Array.from(this.querySelectorAll(`[data-slot]`)).forEach((button) => {
+                    button.setAttribute('slot', button.getAttribute('data-slot'));
+                });
+                splitButton.checked = false;
+            }
+        });
+        resizeObserver.observe(this);
+        viewPicker === null || viewPicker === void 0 ? void 0 : viewPicker.addEventListener('change', () => {
+            title === null || title === void 0 ? void 0 : title.innerHTML = this.getTitle(datePicker.value, viewPicker.value);
+            this.setAttribute('data-view', viewPicker.value);
+            if (viewPicker.value == "week") {
+                Array.from(this.querySelectorAll(`.allday-event`)).forEach((button) => {
+                    button.setAttribute('slot', button.getAttribute('slot') + '-header');
+                });
+            }
+            else {
+                Array.from(this.querySelectorAll(`.allday-event`)).forEach((button) => {
+                    var _a;
+                    button.setAttribute('slot', (_a = button.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.replace('-header', ''));
+                });
+            }
+            if (viewPicker.value == "week" || viewPicker.value == "day")
+                this.scrollIntoPlace();
+            if (viewPicker.value != "month") {
+                Array.from(this.querySelectorAll(`[data-slot^="${datePicker.value}"]`)).forEach((button) => {
+                    button.setAttribute('slot', button.getAttribute('data-slot'));
+                });
+            }
+            if (viewPicker.value == "year") {
+                yearView === null || yearView === void 0 ? void 0 : yearView.innerHTML = this.getYearView(datePicker.value, strToday, sundayFirst);
+                tbody === null || tbody === void 0 ? void 0 : tbody.innerHTML = '';
+                this.addEvents();
+                this.addJSEvents(this);
+                this.setWeekDay(); // Working hours
+                this.setTime(); // Month and day view has a current time indicator
+                this.scrollIntoPlace();
+            }
+            else if ((tbody === null || tbody === void 0 ? void 0 : tbody.innerHTML) == "") {
+                yearView === null || yearView === void 0 ? void 0 : yearView.innerHTML = '';
+                tbody === null || tbody === void 0 ? void 0 : tbody.innerHTML = this.createCalendar(datePicker.value, strToday);
+                this.addEvents();
+                this.addJSEvents(this);
+                this.setWeekDay(); // Working hours
+                this.setTime(); // Month and day view has a current time indicator
+                this.scrollIntoPlace();
+            }
+            const customEvent = new CustomEvent('change-view', {
+                detail: {
+                    'view': viewPicker.value,
+                    'date': datePicker.value
+                },
+            });
+            this.dispatchEvent(customEvent);
+        });
+        function resetCalendar(component) {
+            if (viewPicker.value == "year") {
+                yearView === null || yearView === void 0 ? void 0 : yearView.innerHTML = component.getYearView(datePicker.value, strToday, sundayFirst);
+                tbody === null || tbody === void 0 ? void 0 : tbody.innerHTML = '';
+                component.addEvents();
+                component.addJSEvents(component);
+                component.setWeekDay(); // Working hours
+                component.setTime(); // Month and day view has a current time indicator
+            }
+            else {
+                const calendarHtml = component.createCalendar(datePicker.value, strToday);
+                tbody === null || tbody === void 0 ? void 0 : tbody.innerHTML = calendarHtml;
+                //tbodySplit?.innerHTML = calendarHtml;
+                weekViewHeader === null || weekViewHeader === void 0 ? void 0 : weekViewHeader.innerHTML = calendarHtml;
+                component.addEvents();
+                component.addJSEvents(component);
+                component.setWeekDay();
+                component.setTime();
+            }
+        }
+        function updateCalendar(component) {
+            Array.from(component.shadowRoot.querySelectorAll('.selected')).forEach((element) => {
+                element.classList.remove('selected');
+            });
+            Array.from(component.shadowRoot.querySelectorAll(`td:has(time[datetime="${datePicker.value}"]):not(.prev-month, .next-month)`)).forEach((element) => {
+                element.classList.add('selected');
+            });
+        }
+        datePicker === null || datePicker === void 0 ? void 0 : datePicker.addEventListener('change', () => {
+            title === null || title === void 0 ? void 0 : title.innerHTML = this.getTitle(datePicker.value, viewPicker.value);
+            if (this.shadowRoot.querySelector(`td:has(time[datetime="${datePicker.value}"]):not(.prev-month, .next-month)`))
+                updateCalendar(this);
+            else
+                resetCalendar(this);
+            const customEvent = new CustomEvent('change-date', {
+                detail: {
+                    'view': viewPicker.value,
+                    'date': datePicker.value
+                },
+            });
+            this.dispatchEvent(customEvent);
+        });
+        filtersButton === null || filtersButton === void 0 ? void 0 : filtersButton.addEventListener('click', () => {
+            const customEvent = new CustomEvent('open-filters');
+            this.dispatchEvent(customEvent);
+        });
+        // HTML Observer
+        const htmlUpdated = (mutationList, observer) => {
+            observer.disconnect();
+            console.log(this.pauseObserver);
+            if (this.pauseObserver == false) {
+                for (const mutation of mutationList) {
+                    if (mutation.type == 'characterData' || (mutation.type == 'childList' && mutation.addedNodes.length) || mutation.type === 'attributes') {
+                        //resetCalendar(this);
+                        this.addEvents();
+                    }
+                }
+            }
+            observer.observe(this, { childList: true, characterData: true, subtree: true, attributes: true });
+        };
+        const observer = new MutationObserver(htmlUpdated);
+        observer.observe(this, { childList: true, characterData: true, subtree: true, attributes: true });
+        todayButton === null || todayButton === void 0 ? void 0 : todayButton.addEventListener('click', () => {
+            datePicker.value = strToday;
+            title === null || title === void 0 ? void 0 : title.innerHTML = this.getTitle(datePicker.value, viewPicker.value);
+            if (this.shadowRoot.querySelector(`td:has(time[datetime="${datePicker.value}"]):not(.prev-month, .next-month)`))
+                updateCalendar(this);
+            else
+                resetCalendar(this);
+            const customEvent = new CustomEvent('change-date-today', {
+                detail: {
+                    'view': viewPicker.value,
+                    'date': datePicker.value
+                },
+            });
+            this.dispatchEvent(customEvent);
+        });
+        prevButton === null || prevButton === void 0 ? void 0 : prevButton.addEventListener('click', () => {
+            datePicker.value = this.paginateDate("prev", viewPicker.value, datePicker.value);
+            title === null || title === void 0 ? void 0 : title.innerHTML = this.getTitle(datePicker.value, viewPicker.value);
+            if (this.shadowRoot.querySelector(`td:has(time[datetime="${datePicker.value}"]):not(.prev-month, .next-month)`))
+                updateCalendar(this);
+            else
+                resetCalendar(this);
+            const customEvent = new CustomEvent('change-date-previous', {
+                detail: {
+                    'view': viewPicker.value,
+                    'date': datePicker.value
+                },
+            });
+            this.dispatchEvent(customEvent);
+        });
+        nextButton === null || nextButton === void 0 ? void 0 : nextButton.addEventListener('click', () => {
+            datePicker.value = this.paginateDate("next", viewPicker.value, datePicker.value);
+            title === null || title === void 0 ? void 0 : title.innerHTML = this.getTitle(datePicker.value, viewPicker.value);
+            console.log(datePicker.value);
+            if (this.shadowRoot.querySelector(`td:has(time[datetime="${datePicker.value}"]):not(.prev-month, .next-month)`))
+                updateCalendar(this);
+            else
+                resetCalendar(this);
+            const customEvent = new CustomEvent('change-date-next', {
+                detail: {
+                    'view': viewPicker.value,
+                    'date': datePicker.value
+                },
+            });
+            this.dispatchEvent(customEvent);
+        });
+        // #endregion
+        // TODO
+        trackComponent(this, 'iam-calendar', [
+            'open-filters',
+            'change-view',
+            'change-date',
+            'change-date-today',
+            'change-date-previous',
+            'change-date-next',
+            'open-settings',
+            'close-settings',
+            'save-settings'
+        ]);
+    }
+    static get observedAttributes() {
+        return ['data-calendars', 'data-view'];
+    }
+    attributeChangedCallback(attrName, oldVal, newVal) {
+        var _a, _b, _c, _d;
+        this.pauseObserver = true;
+        switch (attrName) {
+            case 'data-calendars':
+                {
+                    if (oldVal != newVal) {
+                        const tbody = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#calendar > table > tbody');
+                        const weekViewHeader = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#week-view-header > table > tbody');
+                        const datePicker = (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector(`#date`);
+                        // Get a formatted version of todays date
+                        const today = new Date();
+                        const date = today.getDate();
+                        const month = today.getMonth();
+                        const year = today.getFullYear();
+                        const strToday = `${year}-${String(month + 1).padStart(2, "0")}-${String(date).padStart(2, "0")}`;
+                        if (this.hasAttribute('data-calendars')) {
+                            this.calendars = this.getAttribute('data-calendars').split(',');
+                            this.calendars.forEach((item, index) => {
+                                this.calendars[index] = item.trim();
+                            });
+                        }
+                        const calendarHtml = this.createCalendar(datePicker.value, strToday);
+                        tbody === null || tbody === void 0 ? void 0 : tbody.innerHTML = calendarHtml;
+                        weekViewHeader === null || weekViewHeader === void 0 ? void 0 : weekViewHeader.innerHTML = calendarHtml;
+                        this.addEvents();
+                        this.addJSEvents(this);
+                        this.setWeekDay();
+                        this.setTime();
+                    }
+                    break;
+                }
+                ;
+            case 'data-view': {
+                if (oldVal != newVal) {
+                    const viewPicker = (_d = this.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector(`#view`);
+                    viewPicker.value = newVal;
+                    viewPicker.dispatchEvent(new Event('change'));
+                }
+                break;
+            }
+        }
+        setTimeout(() => {
+            this.pauseObserver = false;
+        }, "500");
+    }
+}
+export default iamCalendar;