@iamproperty/components 7.4.0 → 7.5.0

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

@@ -151,14 +151,27 @@ class iamCalendar extends HTMLElement {
     </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.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"
+            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
@@ -191,7 +204,7 @@ class iamCalendar extends HTMLElement {
     getOrdinalNumber(number) {
         const category = this.english_ordinal_rules.select(number);
         const suffix = this.suffixes[category];
-        return (number + suffix);
+        return number + suffix;
     }
     setToMonday(date) {
         const day = date.getDay() || 7;
@@ -211,7 +224,7 @@ class iamCalendar extends HTMLElement {
         const year = date.getFullYear();
         const day = date.getDate();
         const dayOfWeek = date.getDay() ? date.getDay() : 7;
-        if (view == "week") {
+        if (view == 'week') {
             const monday = this.setToMonday(new Date(dateStr));
             const sunday = this.setToSunday(new Date(dateStr));
             const mondayMonth = monday.getMonth();
@@ -222,10 +235,10 @@ class iamCalendar extends HTMLElement {
             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") {
+        else if (view == 'day') {
             return `${this.dayArray[dayOfWeek]} ${this.getOrdinalNumber(day)} ${this.monthArray[month]} ${year}`;
         }
-        else if (view == "year") {
+        else if (view == 'year') {
             return `${year}`;
         }
         return `${this.monthArray[month]} ${year}`;
@@ -235,10 +248,10 @@ class iamCalendar extends HTMLElement {
         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 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 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);
@@ -257,21 +270,21 @@ class iamCalendar extends HTMLElement {
         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'))))
+                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++) {
+        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 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")}`;
+                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);
             }
@@ -282,13 +295,13 @@ class iamCalendar extends HTMLElement {
             // 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")}`;
+                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) {
+            if ((sundayFirst ? i + 1 : i) % 7 === 0 && i != loopDays) {
                 tbodyContent += `</tr><tr>`;
             }
         }
@@ -298,20 +311,20 @@ class iamCalendar extends HTMLElement {
     addDay(day, calendars) {
         let htmlTable = '<table class="table--day">';
         htmlTable += `<thead><tr><th>time</th>`;
-        calendars.forEach(calendarTitle => {
+        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 => {
+        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>`;
+            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>`;
         }
@@ -358,15 +371,15 @@ class iamCalendar extends HTMLElement {
                     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 getRoundedDate = (minutes, d = new Date()) => {
+                const ms = 1000 * 60 * minutes; // convert minutes to ms
+                const 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")}`;
+                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]) {
@@ -374,7 +387,6 @@ class iamCalendar extends HTMLElement {
                 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');
@@ -391,10 +403,12 @@ class iamCalendar extends HTMLElement {
             // 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 && 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>`);
+                    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');
@@ -404,15 +418,17 @@ class iamCalendar extends HTMLElement {
             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>`);
+                    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);
+                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'))
@@ -436,7 +452,7 @@ class iamCalendar extends HTMLElement {
                 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 
+                // 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');
@@ -456,12 +472,13 @@ class iamCalendar extends HTMLElement {
                     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")}`;
+                    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
+                    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');
@@ -478,11 +495,11 @@ class iamCalendar extends HTMLElement {
         });
         setTimeout(() => {
             this.pauseObserver = false;
-        }, "500");
+        }, '500');
     }
     addJSEvents(component) {
         var _a, _b, _c, _d, _e, _f, _g;
-        // Add events to the newly created calendar 
+        // 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`);
@@ -491,7 +508,7 @@ class iamCalendar extends HTMLElement {
         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 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) => {
@@ -504,7 +521,7 @@ class iamCalendar extends HTMLElement {
                     });
                     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") {
+                    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'));
                         });
@@ -513,13 +530,13 @@ class iamCalendar extends HTMLElement {
                             button.removeAttribute('slot');
                         });
                     }
-                    else if (!component.shadowRoot.querySelector('[name="split"]:checked') && viewPicker.value == "month") {
-                        viewPicker.value = "day";
+                    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";
+                    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();
@@ -529,21 +546,21 @@ class iamCalendar extends HTMLElement {
         });
         // 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) => {
+            element.addEventListener('dragover', (ev) => {
                 ev.preventDefault();
                 return false;
             });
-            element.addEventListener("dragenter", (ev) => {
+            element.addEventListener('dragenter', (ev) => {
                 ev.preventDefault();
                 element.classList.add('dragover');
             });
-            element.addEventListener("dragleave", (ev) => {
+            element.addEventListener('dragleave', (ev) => {
                 ev.preventDefault();
                 element.classList.remove('dragover');
             });
-            element.addEventListener("drop", (ev) => {
+            element.addEventListener('drop', (ev) => {
                 ev.preventDefault();
-                const droppedElement = component.querySelector(`#${ev.dataTransfer.getData("text")}`);
+                const droppedElement = component.querySelector(`#${ev.dataTransfer.getData('text')}`);
                 const td = element.closest('td');
                 const datetime = element.getAttribute('datetime');
                 element.classList.remove('dragover');
@@ -555,7 +572,7 @@ class iamCalendar extends HTMLElement {
                 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 
+        // Watch for the event being resized
         const resizeObserver = new ResizeObserver((entries) => {
             for (const entry of entries) {
                 if (entry.target.classList.contains('mousedown'))
@@ -565,15 +582,15 @@ class iamCalendar extends HTMLElement {
         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
+                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.addEventListener('mousedown', (ev) => {
                     element.classList.add('mousedown');
                 });
-                element.addEventListener("click", (ev) => {
+                element.addEventListener('click', (ev) => {
                     if (element.classList.contains('resizing')) {
                         ev.stopPropagation();
                         ev.stopImmediatePropagation();
@@ -582,30 +599,30 @@ class iamCalendar extends HTMLElement {
                         // 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;
+                        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 = "";
+                        element.style.height = '';
                         // to do dispatch event
                     }
                 });
             });
         }
         component.querySelectorAll(`button`).forEach((element) => {
-            element.addEventListener("contextmenu", (event) => {
+            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) => {
+            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')
+                        clientX: event.clientX,
+                        clientY: event.clientY,
+                        element: element,
+                        datetime: element.querySelector('time').getAttribute('datetime'),
                     },
                 });
                 console.log(element);
@@ -614,60 +631,60 @@ class iamCalendar extends HTMLElement {
         });
     }
     paginateDate(direction, view, currentDate) {
-        if (view == "month" || view == "list") {
+        if (view == 'month' || view == 'list') {
             const selectedDate = new Date(currentDate);
-            if (direction == "next")
+            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`;
+            const strNextMonth = `${year}-${String(month).padStart(2, '0')}-01`;
             return strNextMonth;
         }
-        else if (view == "week") {
+        else if (view == 'week') {
             //const selectedDate = new Date(currentDate);
             const monday = this.setToMonday(new Date(currentDate));
-            if (direction == "next")
+            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")}`;
+            const strNextWeek = `${year}-${String(month).padStart(2, '0')}-${String(date).padStart(2, '0')}`;
             return strNextWeek;
         }
-        else if (view == "year") {
+        else if (view == 'year') {
             const selectedDate = new Date(currentDate);
-            if (direction == "next")
+            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`;
+            const strNextMonth = `${year}-${String(month).padStart(2, '0')}-01`;
             return strNextMonth;
         }
         const nextDay = new Date(currentDate);
-        if (direction == "next")
+        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")}`;
+        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 => {
+        (_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 => {
+        (_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');
@@ -683,9 +700,9 @@ class iamCalendar extends HTMLElement {
         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")
+        if (viewPicker.value == 'week')
             wrapper.scrollTo(0, scrollPos); // TO DO work out how much to scroll by
-        else if (viewPicker.value == "day") {
+        else if (viewPicker.value == 'day') {
             wrapper.scrollTo(0, scrollPos); // TO DO work out how much to scroll by
         }
     }
@@ -750,17 +767,17 @@ class iamCalendar extends HTMLElement {
                 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) + '%');
+                (_a = element.closest('tr')) === null || _a === void 0 ? void 0 : _a.style.setProperty('--minute-pos', (minute / 60) * 100 + '%');
             });
         }
     }
     getYearView(selectedDate, today, sundayFirst) {
-        let yearViewStr = "";
+        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`;
+            const selectedFormattedDate = `${selectedYear}-${String(i + 1).padStart(2, '0')}-01`;
             yearViewStr += `<div class='month-wrapper'>
         <time class="column-header">${this.monthArray[i]}</time>
         <table>
@@ -801,14 +818,14 @@ class iamCalendar extends HTMLElement {
         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 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";
+            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'));
@@ -821,13 +838,13 @@ class iamCalendar extends HTMLElement {
         }
         // Setup the settings dialog
         this.setupSettings();
-        // Setup the calendar then adjust and add events 
+        // 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") {
+        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 = '';
         }
@@ -853,7 +870,7 @@ class iamCalendar extends HTMLElement {
         });
         const resizeObserver = new ResizeObserver((entries) => {
             const splitButtonDisplayed = window.getComputedStyle(splitButton === null || splitButton === void 0 ? void 0 : splitButton.parentElement, null).display;
-            if (splitButtonDisplayed == "none") {
+            if (splitButtonDisplayed == 'none') {
                 Array.from(this.querySelectorAll(`[data-slot]`)).forEach((button) => {
                     button.setAttribute('slot', button.getAttribute('data-slot'));
                 });
@@ -864,7 +881,7 @@ class iamCalendar extends HTMLElement {
         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") {
+            if (viewPicker.value == 'week') {
                 Array.from(this.querySelectorAll(`.allday-event`)).forEach((button) => {
                     button.setAttribute('slot', button.getAttribute('slot') + '-header');
                 });
@@ -875,14 +892,14 @@ class iamCalendar extends HTMLElement {
                     button.setAttribute('slot', (_a = button.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.replace('-header', ''));
                 });
             }
-            if (viewPicker.value == "week" || viewPicker.value == "day")
+            if (viewPicker.value == 'week' || viewPicker.value == 'day')
                 this.scrollIntoPlace();
-            if (viewPicker.value != "month") {
+            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") {
+            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();
@@ -891,7 +908,7 @@ class iamCalendar extends HTMLElement {
                 this.setTime(); // Month and day view has a current time indicator
                 this.scrollIntoPlace();
             }
-            else if ((tbody === null || tbody === void 0 ? void 0 : tbody.innerHTML) == "") {
+            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();
@@ -902,14 +919,14 @@ class iamCalendar extends HTMLElement {
             }
             const customEvent = new CustomEvent('change-view', {
                 detail: {
-                    'view': viewPicker.value,
-                    'date': datePicker.value
+                    view: viewPicker.value,
+                    date: datePicker.value,
                 },
             });
             this.dispatchEvent(customEvent);
         });
         function resetCalendar(component) {
-            if (viewPicker.value == "year") {
+            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();
@@ -944,8 +961,8 @@ class iamCalendar extends HTMLElement {
                 resetCalendar(this);
             const customEvent = new CustomEvent('change-date', {
                 detail: {
-                    'view': viewPicker.value,
-                    'date': datePicker.value
+                    view: viewPicker.value,
+                    date: datePicker.value,
                 },
             });
             this.dispatchEvent(customEvent);
@@ -960,7 +977,9 @@ class iamCalendar extends HTMLElement {
             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') {
+                    if (mutation.type == 'characterData' ||
+                        (mutation.type == 'childList' && mutation.addedNodes.length) ||
+                        mutation.type === 'attributes') {
                         //resetCalendar(this);
                         this.addEvents();
                     }
@@ -979,14 +998,14 @@ class iamCalendar extends HTMLElement {
                 resetCalendar(this);
             const customEvent = new CustomEvent('change-date-today', {
                 detail: {
-                    'view': viewPicker.value,
-                    'date': datePicker.value
+                    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);
+            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);
@@ -994,14 +1013,14 @@ class iamCalendar extends HTMLElement {
                 resetCalendar(this);
             const customEvent = new CustomEvent('change-date-previous', {
                 detail: {
-                    'view': viewPicker.value,
-                    'date': datePicker.value
+                    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);
+            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)`))
@@ -1010,8 +1029,8 @@ class iamCalendar extends HTMLElement {
                 resetCalendar(this);
             const customEvent = new CustomEvent('change-date-next', {
                 detail: {
-                    'view': viewPicker.value,
-                    'date': datePicker.value
+                    view: viewPicker.value,
+                    date: datePicker.value,
                 },
             });
             this.dispatchEvent(customEvent);
@@ -1027,7 +1046,7 @@ class iamCalendar extends HTMLElement {
             'change-date-next',
             'open-settings',
             'close-settings',
-            'save-settings'
+            'save-settings',
         ]);
     }
     static get observedAttributes() {
@@ -1037,35 +1056,33 @@ class iamCalendar extends HTMLElement {
         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();
+            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();
+                        });
                     }
-                    break;
+                    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`);
@@ -1077,7 +1094,7 @@ class iamCalendar extends HTMLElement {
         }
         setTimeout(() => {
             this.pauseObserver = false;
-        }, "500");
+        }, '500');
     }
 }
 export default iamCalendar;