@nylas/web-elements 1.1.5 → 1.1.6

package/dist/nylas-web-elements/nylas-date-picker.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, a as createEvent, h, i as Host } from './index-b5cb18eb.js';
+import { r as registerInstance, a as createEvent, h, i as Host, e as getElement } from './index-b5cb18eb.js';
 import { R as RegisterComponent } from './register-component-e6af12c1.js';
-import { b as addDaysToCurrentDate, i as instance, m as getLastDayOfMonth, n as getFirstDayOfMonth, o as isSameDay, q as convertMinutesToHoursAndMinutes, t as translateMonth, r as isSameMonth, a as debug } from './utils-8defae4b.js';
+import { b as addDaysToCurrentDate, i as instance, a as debug, m as getLastDayOfMonth, n as getFirstDayOfMonth, o as isSameDay, q as convertMinutesToHoursAndMinutes, t as translateMonth, r as isSameMonth } from './utils-8defae4b.js';
 
 const t0 = new Date, t1 = new Date;
 
@@ -1738,7 +1738,7 @@ function ticker(year, month, week, day, hour, minute) {
 const [utcTicks, utcTickInterval] = ticker(utcYear, utcMonth, utcSunday, unixDay, utcHour, utcMinute);
 const [timeTicks, timeTickInterval] = ticker(timeYear, timeMonth, timeSunday, timeDay, timeHour, timeMinute);
 
-const nylasDatePickerCss = ":host{display:block;min-height:444px;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}@media screen and (max-width: 768px){:host{min-height:auto}}.nylas-date-picker{display:flex;gap:1rem;flex-direction:column}.header{margin:0 0.5rem;height:48px}.header h2{font-size:1.3125rem;font-weight:400;line-height:1rem;color:var(--nylas-base-800)}.header h2 strong{font-weight:600}.title{margin:0 -1.25rem;display:flex;flex-direction:column;padding:0 1.5rem;gap:0.5rem;border-bottom:1px solid var(--nylas-base-200);font-family:var(--nylas-font-family)}.title h1{margin-bottom:0;font-size:18px;line-height:20px;font-weight:600;display:flex;gap:0.5rem;align-items:center}.title p{margin-top:0;font-size:16px;display:flex;gap:0.5rem;align-items:center}@keyframes pulsate{0%{background-color:var(--nylas-base-50)}50%{background-color:var(--nylas-base-100)}100%{background-color:var(--nylas-base-50)}}.dates{display:grid;justify-items:center;grid-template-columns:repeat(7, 1fr);gap:0.5rem;margin-bottom:24px}.dates .date{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;height:48px;width:48px;min-width:2rem;min-height:2rem;cursor:pointer;border-radius:var(--nylas-border-radius-2x);font-size:16px;font-weight:600;font-family:inherit;color:var(--nylas-base-text);background-color:var(--nylas-base-100);cursor:pointer;border:none}@media screen and (max-width: 412px){.dates .date{width:38px;height:38px;min-width:none}}.dates .date:hover:not(:disabled){box-shadow:0 0 0 2px var(--nylas-base-500) inset}.dates .date.date.current-month{color:var(--nylas-base-800)}.dates .date.date.selected{background-color:var(--nylas-primary);color:var(--nylas-base-0);font-weight:700}.dates .date.date.day-skeleton{color:var(--nylas-base-300)}.dates .date:disabled{color:var(--nylas-base-300);background-color:transparent;font-weight:400;cursor:not-allowed}.dates .day{font-size:12px;color:var(--nylas-base-800);font-weight:600;letter-spacing:0.5px;height:32px;display:flex;align-items:center}@media screen and (max-width: 768px){.dates .day{font-size:14px}}.dates .date.day-skeleton{height:48px;width:48px;border-radius:var(--nylas-border-radius-2x);animation:pulsate 1.5s infinite ease-in-out;background-color:var(--nylas-base-50)}@media screen and (max-width: 412px){.dates .date.day-skeleton{width:38px;height:38px;min-width:none}}.dates .date.current-day::after{content:\"\";position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background-color:var(--nylas-base-500)}.dates .date.current-day.selected::after{background-color:var(--nylas-base-100)}.pagination{display:flex;flex-direction:row;justify-content:space-between;align-items:center;min-width:92px}.pagination .chevron-right{transform:rotate(180deg)}.pagination .button{display:flex;flex-direction:row;justify-content:center;align-items:center;height:3vh;width:3vh;min-width:3em;min-height:3em;cursor:pointer;border-radius:var(--nylas-border-radius-2x);background-color:transparent;color:var(--nylas-base-800);cursor:pointer;border:none}.pagination .button:hover{background-color:var(--nylas-base-50)}.pagination .button:active{background-color:var(--nylas-base-100)}.pagination .button:disabled{background-color:transparent;color:var(--nylas-base-300);cursor:not-allowed}.flex-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center;color:var(--nylas-base-500)}";
+const nylasDatePickerCss = ":host{display:block;min-height:444px}@media screen and (max-width: 768px){:host{min-height:auto}}.nylas-date-picker{display:flex;gap:1rem;flex-direction:column}.header{margin:0 0.5rem;height:48px}.header h2{font-size:1.3125rem;font-weight:400;line-height:1rem;color:var(--nylas-base-800)}.header h2 strong{font-weight:600}.title{margin:0 -1.25rem;display:flex;flex-direction:column;padding:0 1.5rem;gap:0.5rem;border-bottom:1px solid var(--nylas-base-200);font-family:var(--nylas-font-family)}.title h1{margin-bottom:0;font-size:18px;line-height:20px;font-weight:600;display:flex;gap:0.5rem;align-items:center}.title p{margin-top:0;font-size:16px;display:flex;gap:0.5rem;align-items:center}@keyframes pulsate{0%{background-color:var(--nylas-base-50)}50%{background-color:var(--nylas-base-100)}100%{background-color:var(--nylas-base-50)}}.dates{display:grid;justify-items:center;grid-template-columns:repeat(7, 1fr);gap:0.5rem;margin-bottom:24px}.dates .date{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;height:48px;width:48px;min-width:2rem;min-height:2rem;cursor:pointer;border-radius:var(--nylas-border-radius-2x);font-size:16px;font-weight:600;font-family:inherit;color:var(--nylas-base-text);background-color:var(--nylas-base-100);cursor:pointer;border:none}@media screen and (max-width: 412px){.dates .date{width:38px;height:38px;min-width:none}}.dates .date:hover:not(:disabled){box-shadow:0 0 0 2px var(--nylas-base-500) inset}.dates .date.date.current-month{color:var(--nylas-base-800)}.dates .date.date.selected{background-color:var(--nylas-primary);color:var(--nylas-base-0);font-weight:700}.dates .date.date.day-skeleton{color:var(--nylas-base-300)}.dates .date:disabled{color:var(--nylas-base-300);background-color:transparent;font-weight:400;cursor:not-allowed}.dates .day{font-size:12px;color:var(--nylas-base-800);font-weight:600;letter-spacing:0.5px;height:32px;display:flex;align-items:center}@media screen and (max-width: 768px){.dates .day{font-size:14px}}.dates .date.day-skeleton{height:48px;width:48px;border-radius:var(--nylas-border-radius-2x);animation:pulsate 1.5s infinite ease-in-out;background-color:var(--nylas-base-50)}@media screen and (max-width: 412px){.dates .date.day-skeleton{width:38px;height:38px;min-width:none}}.dates .date.current-day::after{content:\"\";position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background-color:var(--nylas-base-500)}.dates .date.current-day.selected::after{background-color:var(--nylas-base-100)}.pagination{display:flex;flex-direction:row;justify-content:space-between;align-items:center;min-width:92px}.pagination .chevron-right{transform:rotate(180deg)}.pagination .button{display:flex;flex-direction:row;justify-content:center;align-items:center;height:3vh;width:3vh;min-width:3em;min-height:3em;cursor:pointer;border-radius:var(--nylas-border-radius-2x);background-color:transparent;color:var(--nylas-base-800);cursor:pointer;border:none}.pagination .button:hover{background-color:var(--nylas-base-50)}.pagination .button:active{background-color:var(--nylas-base-100)}.pagination .button:disabled{background-color:transparent;color:var(--nylas-base-300);cursor:not-allowed}.flex-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center;color:var(--nylas-base-500)}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -1761,6 +1761,7 @@ const NylasDatePicker = class {
         this.monthChanged = createEvent(this, "monthChanged", 7);
         this.selectableDates = undefined;
         this.configSettings = undefined;
+        this.themeConfig = undefined;
         this.selectedDate = undefined;
         this.selectedLanguage = undefined;
         this.isLoading = undefined;
@@ -1789,6 +1790,17 @@ const NylasDatePicker = class {
     connectedCallback() { }
     disconnectedCallback() { }
     componentWillLoad() { }
+    componentDidLoad() {
+        debug(`[nylas-date-picker] Component did load`);
+        this.applyThemeConfig(this.themeConfig);
+    }
+    applyThemeConfig(themeConfig) {
+        if (themeConfig) {
+            for (const [key, value] of Object.entries(themeConfig)) {
+                this.host.style.setProperty(`${key}`, value);
+            }
+        }
+    }
     getDates() {
         const lastDayOfMonth = getLastDayOfMonth(this.month);
         const firstDayOfMonth = getFirstDayOfMonth(this.month);
@@ -1818,7 +1830,7 @@ const NylasDatePicker = class {
         return date && selectableDates?.find(d => isSameDay(d, date)) === undefined;
     }
     render() {
-        return (h(Host, { key: '06638094c3e21b094641e5adbf08762b346fc10e', part: "ndp" }, h("div", { key: '370143e471513ab59c49dc369208365e5dcd1865', class: "nylas-date-picker" }, h("div", { key: '9b84a00eada140f2f142dec17a8418854160be87', class: "title", part: "ndp__title" }, this.configSettings?.name ? (h("h1", null, this.configSettings?.name)) : (this.configSettings?.organizer?.name && (h("h1", null, h("person-icon", null), this.configSettings?.organizer?.name || 'Organizer'))), h("p", { key: 'a64fee4f4c6886b31620cdc62de0769e3908b634' }, h("clock-icon", { key: 'e6c4d1cf6fd0b45e9824f26cb4f1a9fd828347d3' }), this.eventDuration ? convertMinutesToHoursAndMinutes(this.eventDuration) : `- ${instance.t('time.minutes')}`)), h("div", { key: '7568638d6af0fa03f84cf4b32b418c6b4f4df0de', class: 'header flex-row' }, h("h2", { key: '7b656957b240be95038151d5ca2089967b3704cd', part: 'ndp__month-header' }, h("strong", { key: 'cea1b1a9fc986885cb1425075364bb6b97b0d0e2' }, translateMonth(this.month.toLocaleDateString(undefined, { month: 'long' }).toLocaleLowerCase())), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'daf2f52ae4ca9e381fefadf53b9bf9f7a2c47987', class: 'pagination' }, h("button", { key: 'e182f6af777a122aaaa323fbada73258fd8bcf90', title: "Previous month", onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: !this.selectableDates?.length || this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: 'a9703cc9a0cbfc72e800f72a56233467bff2e5f9' })), h("button", { key: 'bcafc749f794352746d64974e8e564a5db1125a4', title: "Next month", onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: this.disableNextMonthButton, part: "ndp__month-button" }, h("chevron-icon", { key: '5fc036471ed8f1caabe79e8489321070d9b6eae3' })))), h("div", { key: '701d99cc45475a8b9217893bfa56c0fa80f61520', class: 'dates' }, [
+        return (h(Host, { key: 'ffb13b5ab2b96a23232a0e4fce0166cc4e471bc3', part: "ndp" }, h("div", { key: 'd617e1e85082cda56f123b915460161003fba8ad', class: "nylas-date-picker" }, h("div", { key: '8b966e5cfa60ec08da307e7537170adcfc04944b', class: "title", part: "ndp__title" }, this.configSettings?.name ? (h("h1", null, this.configSettings?.name)) : (this.configSettings?.organizer?.name && (h("h1", null, h("person-icon", null), this.configSettings?.organizer?.name || 'Organizer'))), h("p", { key: 'ec8dd18ff022b61ac574c1a0bb4c94c4bd51b643' }, h("clock-icon", { key: '8c0685800081b17f4b118938b106af1e291ded09' }), this.eventDuration ? convertMinutesToHoursAndMinutes(this.eventDuration) : `- ${instance.t('time.minutes')}`)), h("div", { key: '9c4e5f5aed7d3350f149115236b1be17ee1b77e7', class: 'header flex-row' }, h("h2", { key: 'b30d034da321b0e34e93f41fdeddcd5c6890fc9c', part: 'ndp__month-header' }, h("strong", { key: '2c45a29ba2d99856262c706e626c7dc43b05380b' }, translateMonth(this.month.toLocaleDateString(undefined, { month: 'long' }).toLocaleLowerCase())), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'eb086cc81c029c3f2dc12a5c796f4e20e60fef2e', class: 'pagination' }, h("button", { key: 'aefca223118d1e0c4f908ab325743730a5633d0f', title: "Previous month", onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: !this.selectableDates?.length || this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: '04e6c8e8dd6fa33805e19a97cc56aff0355bacd1' })), h("button", { key: '912568ecbc76504f9e917042edc7dd41ccfb51fa', title: "Next month", onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: this.disableNextMonthButton, part: "ndp__month-button" }, h("chevron-icon", { key: '25efda159f4cd761012ee2143690c37cf9247f66' })))), h("div", { key: '4c0d4d94cce9d758e8dd52d4e29ec27f21410772', class: 'dates' }, [
             instance.t('days.sunday'),
             instance.t('days.monday'),
             instance.t('days.tuesday'),
@@ -1844,6 +1856,7 @@ const NylasDatePicker = class {
                 }, "aria-lang": date.toLocaleDateString(undefined, { dateStyle: 'full' }), disabled: isDisabled, onClick: () => this.selectDate(date), part: `ndp__date ${this.isSelected(date, this.selectedDate, this.selectableDates) ? 'ndp__date--selected' : ''} ${isSameDay(date, new Date()) ? 'ndp__date--current-day' : ''} ${isSameMonth(date, this.month) ? 'ndp__date--current-month' : ''}` }, date.getDate()));
         })))));
     }
+    get host() { return getElement(this); }
     static get watchers() { return {
         "configSettings": ["configSettingsChanged"],
         "selectedLanguage": ["selectedLanguageChanged"]
@@ -1869,6 +1882,7 @@ __decorate([
                 debug('nylas-date-picker', 'monthChanged', event.detail);
             },
         },
+        localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
         fireRegisterEvent: true,
     }),
     __metadata("design:type", Function),