@nylas/web-elements 1.0.0-prealpha1

package/dist/collection/components/scheduler/nylas-locale-switch/nylas-locale-switch.css

@@ -0,0 +1,72 @@
+:host {
+  display: block;
+}
+
+.nylas-locale-switch {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 3rem;
+  padding: 10px 0;
+  border-left: none;
+  border-right: none;
+  color: var(--nylas-base-50);
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  font-family: inherit;
+}
+
+.select-wrapper {
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  align-items: center;
+  justify-content: center;
+  color: var(--nylas-base-800);
+  /* &.timezone {
+    width: 140px;
+  }
+  &.language {
+    width: 80px;
+  } */
+}
+.select-wrapper select {
+  color: var(--nylas-base-800);
+  font-size: 14px;
+  font-weight: 500;
+  background-color: transparent;
+  margin: 0 0 1px;
+  padding: 2px;
+  vertical-align: middle;
+  &#timezone {
+    width: 140px;
+  }
+  &#language {
+    width: 80px;
+  }
+  text-overflow: ellipsis;
+}
+
+select {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  outline: none;
+  background-color: transparent;
+  margin: 0 0 1px;
+  padding: 4px;
+  vertical-align: middle;
+  &#timezone {
+    width: 140px;
+  }
+  &#language {
+    width: 80px;
+  }
+}

package/dist/collection/components/scheduler/nylas-locale-switch/nylas-locale-switch.js

@@ -0,0 +1,147 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+import { LANGUAGE_MAP, TIMEZONE_MAP } from "../../../common/constants";
+import { RegisterComponent } from "../../../common/register-component";
+import { Host, h } from "@stencil/core";
+export class NylasLocaleSwitch {
+    constructor() {
+        this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        this.selectedLanguage = navigator.language;
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    componentWillLoad() { }
+    changeTimezone(timezone) {
+        this.selectedTimezone = timezone;
+        this.timezoneChanged.emit(timezone);
+    }
+    changeLanguage(language) {
+        this.selectedLanguage = language;
+        this.languageChanged.emit(language);
+    }
+    render() {
+        return (h(Host, { key: '7ef0766e840f854c9faaee4047085efd07b77228' }, h("div", { key: '3e39eac4848f737ab463439fefee19cd2087480b', class: "nylas-locale-switch" }, h("div", { key: 'd505d2c6486addbdf83cfd45dd41817aa0c97567', class: {
+                'select-wrapper': true,
+                'timezone': true,
+            } }, h("globe-icon", { key: '5b3efa47132faf63e791e84d56554754fe83b7fb', width: "20", height: "20" }), h("select", { key: 'c395886f203427dcfe98bbef21956741fadc7f37', id: "timezone", onChange: (e) => this.changeTimezone(e.target?.value) }, Object.keys(TIMEZONE_MAP).map(key => (h("option", { value: key, selected: key == this.selectedTimezone }, TIMEZONE_MAP[key]))))), h("div", { key: 'c5f0cb9c98ee0400155e8cf7fc7f51b1218ac7b6', class: {
+                'select-wrapper': true,
+                'language': true,
+            } }, h("translate-icon", { key: 'a70ae3f605413ce99874a824ae09b0a387e62a78', width: "20", height: "20" }), h("select", { key: 'c58d6634d01701f37f83dfe43f4dd6ef459461a0', id: "language", onChange: (e) => this.changeLanguage(e.target?.value) }, Object.keys(LANGUAGE_MAP).map(key => (h("option", { value: key, selected: key == this.selectedLanguage }, LANGUAGE_MAP[key]))))))));
+    }
+    static get is() { return "nylas-locale-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-locale-switch.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-locale-switch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selectedTimezone": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected timezone."
+                },
+                "attribute": "selected-timezone",
+                "reflect": false,
+                "defaultValue": "Intl.DateTimeFormat().resolvedOptions().timeZone"
+            },
+            "selectedLanguage": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected language."
+                },
+                "attribute": "selected-language",
+                "reflect": false,
+                "defaultValue": "navigator.language"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "timezoneChanged",
+                "name": "timezoneChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This event is fired when the timezone is changed."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "languageChanged",
+                "name": "languageChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This event is fired when the language is changed."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+__decorate([
+    RegisterComponent({
+        name: 'nylas-locale-switch',
+        stateToProps: new Map([
+            ['scheduler.selectedLanguage', 'selectedLanguage'],
+            ['scheduler.selectedTimezone', 'selectedTimezone'],
+        ]),
+        eventToProps: {
+            timezoneChanged: async (event, nylasSchedulerConnector) => {
+                nylasSchedulerConnector.scheduler.selectTimezone(event.detail);
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasLocaleSwitch.prototype, "render", null);
+//# sourceMappingURL=nylas-locale-switch.js.map

package/dist/collection/components/scheduler/nylas-locale-switch/nylas-locale-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-locale-switch.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-locale-switch/nylas-locale-switch.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAS9E,MAAM,OAAO,iBAAiB;;gCAIwB,IAAI,CAAC,cAAc,EAAE,CAAC,eAAe,EAAE,CAAC,QAAQ;gCAKhD,SAAS,CAAC,QAAQ;;IAYtE,iBAAiB,KAAI,CAAC;IAEtB,oBAAoB,KAAI,CAAC;IAEzB,iBAAiB,KAAI,CAAC;IAMd,cAAc,CAAC,QAAgB;QACrC,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QACjC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC;IAMO,cAAc,CAAC,QAAgB;QACrC,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QACjC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC;IAeD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,4DACE,KAAK,EAAE;wBACL,gBAAgB,EAAE,IAAI;wBACtB,UAAU,EAAE,IAAI;qBACjB;oBAED,mEAAY,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG;oBACrC,+DAAQ,EAAE,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAE,CAAC,CAAC,MAA4B,EAAE,KAAK,CAAC,IACtG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACpC,cAAQ,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,IAAI,CAAC,gBAAgB,IACvD,YAAY,CAAC,GAAG,CAAC,CACX,CACV,CAAC,CACK,CACL;gBACN,4DACE,KAAK,EAAE;wBACL,gBAAgB,EAAE,IAAI;wBACtB,UAAU,EAAE,IAAI;qBACjB;oBAED,uEAAgB,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG;oBACzC,+DAAQ,EAAE,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAE,CAAC,CAAC,MAA4B,EAAE,KAAK,CAAC,IACtG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACpC,cAAQ,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,IAAI,CAAC,gBAAgB,IACvD,YAAY,CAAC,GAAG,CAAC,CACX,CACV,CAAC,CACK,CACL,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAtCC;IAbC,iBAAiB,CAA2F;QAC3G,IAAI,EAAE,qBAAqB;QAC3B,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;YAClD,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;SACnD,CAAC;QACF,YAAY,EAAE;YACZ,eAAe,EAAE,KAAK,EAAE,KAA0B,EAAE,uBAAgD,EAAE,EAAE;gBACtG,uBAAuB,CAAC,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YACjE,CAAC;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;+CAsCD","sourcesContent":["import { LANGUAGE_MAP, TIMEZONE_MAP } from '@/common/constants';\nimport { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../../components';\nimport { NylasScheduler } from '../nylas-scheduler/nylas-scheduler';\n\n@Component({\n  tag: 'nylas-locale-switch',\n  styleUrl: 'nylas-locale-switch.css',\n  shadow: true,\n})\nexport class NylasLocaleSwitch {\n  /**\n   * The selected timezone.\n   */\n  @Prop({ mutable: true }) selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ mutable: true }) selectedLanguage: string = navigator.language;\n\n  /**\n   * This event is fired when the timezone is changed.\n   */\n  @Event() timezoneChanged!: EventEmitter<string>;\n\n  /**\n   * This event is fired when the language is changed.\n   */\n  @Event() languageChanged!: EventEmitter<string>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  componentWillLoad() {}\n\n  /**\n   * Change the timezone.\n   * @param timezone The timezone to select.\n   */\n  private changeTimezone(timezone: string) {\n    this.selectedTimezone = timezone;\n    this.timezoneChanged.emit(timezone);\n  }\n\n  /**\n   * Change the language.\n   * @param language The language to select.\n   */\n  private changeLanguage(language: string) {\n    this.selectedLanguage = language;\n    this.languageChanged.emit(language);\n  }\n\n  @RegisterComponent<NylasLocaleSwitch, NylasSchedulerConnector, Exclude<NylasScheduler['stores'], undefined>>({\n    name: 'nylas-locale-switch',\n    stateToProps: new Map([\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n    ]),\n    eventToProps: {\n      timezoneChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.selectTimezone(event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-locale-switch\">\n          <div\n            class={{\n              'select-wrapper': true,\n              'timezone': true,\n            }}\n          >\n            <globe-icon width=\"20\" height=\"20\" />\n            <select id=\"timezone\" onChange={(e: Event) => this.changeTimezone((e.target as HTMLSelectElement)?.value)}>\n              {Object.keys(TIMEZONE_MAP).map(key => (\n                <option value={key} selected={key == this.selectedTimezone}>\n                  {TIMEZONE_MAP[key]}\n                </option>\n              ))}\n            </select>\n          </div>\n          <div\n            class={{\n              'select-wrapper': true,\n              'language': true,\n            }}\n          >\n            <translate-icon width=\"20\" height=\"20\" />\n            <select id=\"language\" onChange={(e: Event) => this.changeLanguage((e.target as HTMLSelectElement)?.value)}>\n              {Object.keys(LANGUAGE_MAP).map(key => (\n                <option value={key} selected={key == this.selectedLanguage}>\n                  {LANGUAGE_MAP[key]}\n                </option>\n              ))}\n            </select>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler/nylas-notification/nylas-notification.css

@@ -0,0 +1,63 @@
+:host {
+  display: block;
+  position: absolute;
+  top: 1.5rem;
+  right: 1.5rem;
+}
+
+.notif {
+  display: flex;
+  width: 280px;
+  padding: 16px;
+  align-items: flex-start;
+  gap: 16px;
+  border-radius: 8px;
+  border: 1.5px solid var(--nylas-error);
+  background: var(--nylas-base-0);
+}
+.notif .content {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}
+.notif .content .message {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--nylas-base-800);
+}
+.notif .content .message .title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--nylas-base-950);
+  display: inline-block;
+}
+.notif .content .message .description {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--nylas-base-800);
+  display: inline-block;
+}
+.notif .content .icon.error {
+  color: var(--nylas-error);
+}
+.notif.nylasSchedulerError {
+  border-color: var(--nylas-error);
+}
+.notif.nylasSchedulerWarning {
+  border-color: var(--nylas-warning);
+}
+.notif.nylasSchedulerInfo {
+  border-color: var(--nylas-info);
+}
+.notif.nylasSchedulerSuccess {
+  border-color: var(--nylas-success);
+}
+.notif .dismiss-btn {
+  background: none;
+  border: none;
+  color: var(--nylas-base-950);
+  cursor: pointer;
+  position: absolute;
+  right: 0.5rem;
+  top: 0.5rem;
+}

package/dist/collection/components/scheduler/nylas-notification/nylas-notification.js

@@ -0,0 +1,132 @@
+import { Fragment, Host, h } from "@stencil/core";
+import { debug } from "../../../utils/utils";
+export class NylasNotification {
+    constructor() {
+        this.ttl = 5000;
+        this.allowedCategories = ['invalid_session', 'api', 'validation', 'internal'];
+        this.notifications = [];
+    }
+    onError(event) {
+        debug(`[nylas-notification] Error: ${event.detail.title}`);
+        this.handleNotification(event);
+    }
+    onWarning(event) {
+        debug(`[nylas-notification] Warning: ${event.detail.title}`);
+        this.handleNotification(event);
+    }
+    onInfo(event) {
+        debug(`[nylas-notification] Info: ${event.detail.title}`);
+        this.handleNotification(event);
+    }
+    onSuccess(event) {
+        debug(`[nylas-notification] Success: ${event.detail.title}`);
+        this.handleNotification(event);
+    }
+    handleNotification(event) {
+        if (event.defaultPrevented) {
+            debug(`[nylas-notification] Event default prevented`);
+            return;
+        }
+        if (this.ttl === 0) {
+            debug(`[nylas-notification] TTL is 0`);
+            return;
+        }
+        if (this.allowedCategories.length > 0 && !this.allowedCategories.includes(event.detail.category)) {
+            debug(`[nylas-notification] Category not allowed`);
+            return;
+        }
+        this.notifications = [...this.notifications, { ...event.detail }];
+        window.setTimeout(() => {
+            this.notifications = this.notifications.filter(notif => notif.id !== event.detail.id);
+        }, this.ttl);
+    }
+    dismissNotification(id) {
+        this.notifications = this.notifications.filter(notif => notif.id !== id);
+    }
+    render() {
+        return (h(Host, { key: 'abda5c2bf1feeda4561e4890dccf507062394cc5' }, h(Fragment, { key: '9eced3033f89523cf7a074d4e1c0d1ecec51b933' }, this.notifications.map(notif => (h("div", { class: `notif ${notif.type}`, key: notif.id }, h("div", { class: "content" }, h("span", { class: `icon ${notif.type}` }, (notif.type === 'error' || notif.type === 'warning') && h("warning-icon", null)), h("span", { class: "message" }, h("span", { class: "title" }, notif.title), notif.description && h("span", { class: "description" }, notif.description))), h("button", { class: "dismiss-btn", onClick: () => this.dismissNotification(notif.id) }, h("close-icon", null))))), h("slot", { key: 'a36441dda5f17822b9954f71aa35e8dae759e2dc' }))));
+    }
+    static get is() { return "nylas-notification"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-notification.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-notification.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "ttl": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "ttl",
+                "reflect": false,
+                "defaultValue": "5000"
+            },
+            "allowedCategories": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "['invalid_session', 'api', 'validation', 'internal']"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "notifications": {}
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "nylasSchedulerError",
+                "method": "onError",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "nylasSchedulerWarning",
+                "method": "onWarning",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "nylasSchedulerInfo",
+                "method": "onInfo",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "nylasSchedulerSuccess",
+                "method": "onSuccess",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=nylas-notification.js.map

package/dist/collection/components/scheduler/nylas-notification/nylas-notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-notification.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-notification/nylas-notification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Notification } from '@nylas/core';\nimport { Component, Fragment, Host, Listen, Prop, State, h } from '@stencil/core';\nimport { debug } from '@/utils/utils';\n\n@Component({\n  tag: 'nylas-notification',\n  styleUrl: 'nylas-notification.scss',\n  shadow: true,\n})\nexport class NylasNotification {\n  @Prop() ttl: number = 5000;\n  @Prop() allowedCategories: string[] = ['invalid_session', 'api', 'validation', 'internal'];\n\n  @State() notifications: Notification[] = [];\n\n  @Listen('nylasSchedulerError', { target: 'body' })\n  onError(event: CustomEvent<Notification>) {\n    debug(`[nylas-notification] Error: ${event.detail.title}`);\n    this.handleNotification(event);\n  }\n\n  @Listen('nylasSchedulerWarning', { target: 'body' })\n  onWarning(event: CustomEvent<Notification>) {\n    debug(`[nylas-notification] Warning: ${event.detail.title}`);\n    this.handleNotification(event);\n  }\n\n  @Listen('nylasSchedulerInfo', { target: 'body' })\n  onInfo(event: CustomEvent<Notification>) {\n    debug(`[nylas-notification] Info: ${event.detail.title}`);\n    this.handleNotification(event);\n  }\n\n  @Listen('nylasSchedulerSuccess', { target: 'body' })\n  onSuccess(event: CustomEvent<Notification>) {\n    debug(`[nylas-notification] Success: ${event.detail.title}`);\n    this.handleNotification(event);\n  }\n\n  private handleNotification(event: CustomEvent<Notification>) {\n    if (event.defaultPrevented) {\n      debug(`[nylas-notification] Event default prevented`);\n      return;\n    }\n    if (this.ttl === 0) {\n      debug(`[nylas-notification] TTL is 0`);\n      return;\n    }\n    if (this.allowedCategories.length > 0 && !this.allowedCategories.includes(event.detail.category)) {\n      debug(`[nylas-notification] Category not allowed`);\n      return;\n    }\n\n    this.notifications = [...this.notifications, { ...event.detail }];\n    window.setTimeout(() => {\n      this.notifications = this.notifications.filter(notif => notif.id !== event.detail.id);\n    }, this.ttl);\n  }\n\n  private dismissNotification(id: string) {\n    this.notifications = this.notifications.filter(notif => notif.id !== id);\n  }\n\n  render() {\n    return (\n      <Host>\n        <Fragment>\n          {this.notifications.map(notif => (\n            <div class={`notif ${notif.type}`} key={notif.id}>\n              <div class=\"content\">\n                <span class={`icon ${notif.type}`}>{(notif.type === 'error' || notif.type === 'warning') && <warning-icon />}</span>\n                <span class=\"message\">\n                  <span class=\"title\">{notif.title}</span>\n                  {notif.description && <span class=\"description\">{notif.description}</span>}\n                </span>\n              </div>\n              <button class=\"dismiss-btn\" onClick={() => this.dismissNotification(notif.id)}>\n                <close-icon />\n              </button>\n            </div>\n          ))}\n          <slot />\n        </Fragment>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler/nylas-open-hours-picker/nylas-open-hours-picker.css

@@ -0,0 +1,105 @@
+:host {
+  display: block;
+  font-size: inherit;
+  font-family: inherit;
+  --nylas-grid-border-color: var(--nylas-base-100);
+  --nylas-available-color: var(--nylas-base-500);
+  --nylas-available-hover-color: var(--nylas-base-100);
+  --nylas-unavailable-color: inherit;
+}
+
+.legend {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  align-items: center;
+  font-size: inherit;
+  font-family: inherit;
+  max-width: fit-content;
+  margin: 0 auto;
+  margin-top: 1rem;
+}
+.legend .available {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.5rem;
+  align-items: center;
+  font-size: inherit;
+  font-family: inherit;
+}
+.legend .available .box {
+  width: 2rem;
+  height: 2rem;
+  background-color: var(--nylas-available-color);
+  border: 1px dashed var(--nylas-grid-border-color);
+}
+.legend .unavailable {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.5rem;
+  align-items: center;
+  font-size: inherit;
+  font-family: inherit;
+}
+.legend .unavailable .box {
+  width: 2rem;
+  height: 2rem;
+  background-color: var(--nylas-unavailable-color);
+  border: 1px dashed var(--nylas-grid-border-color);
+}
+
+.open-hours {
+  display: grid;
+  gap: 1rem;
+  grid-template: ".... days days" "hours selected-hours selected-hours" 1fr/auto 1fr;
+}
+.open-hours .days {
+  grid-area: days;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  text-align: center;
+  justify-items: center;
+  font-size: inherit;
+  font-family: inherit;
+}
+.open-hours .hours {
+  display: grid;
+  grid-auto-flow: row;
+  grid-area: hours;
+  text-align: right;
+  align-items: start;
+  font-size: inherit;
+  font-family: inherit;
+}
+.open-hours .hours span {
+  top: -0.6rem;
+  display: block;
+  position: relative;
+}
+.open-hours .selected-hours {
+  display: grid;
+  grid-area: selected-hours;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+}
+.open-hours .selected-hours .hour {
+  display: grid;
+  border: 1px dashed var(--nylas-grid-border-color);
+  height: 40px;
+  background-color: var(--nylas-unavailable-color);
+}
+.open-hours .selected-hours .hour.selected {
+  background-color: var(--nylas-available-color);
+}
+.open-hours .selected-hours .hour.hovered {
+  background-color: var(--nylas-available-hover-color);
+}
+.open-hours .selected-hours.inverse .hour {
+  background-color: var(--nylas-available-color);
+}
+.open-hours .selected-hours.inverse .hour.selected {
+  background-color: var(--nylas-unavailable-color);
+}
+.open-hours .selected-hours.inverse .hour.hovered {
+  background-color: var(--nylas-available-hover-color);
+}