@nylas/web-elements 1.1.0-canary.15 → 1.1.0-canary.17

package/dist/components/nylas-participants-custom-availability2.js

@@ -0,0 +1,218 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { R as RegisterComponent } from './register-component.js';
+import { a as debug } from './utils.js';
+import { d as defineCustomElement$b } from './add-circle.js';
+import { d as defineCustomElement$a } from './chevron.js';
+import { d as defineCustomElement$9 } from './close.js';
+import { d as defineCustomElement$8 } from './globe.js';
+import { d as defineCustomElement$7 } from './info.js';
+import { d as defineCustomElement$6 } from './nylas-availability-picker2.js';
+import { d as defineCustomElement$5 } from './nylas-time-window-picker2.js';
+import { d as defineCustomElement$4 } from './search.js';
+import { d as defineCustomElement$3 } from './select-dropdown2.js';
+import { d as defineCustomElement$2 } from './toggle-switch2.js';
+import { d as defineCustomElement$1 } from './toolitp-component.js';
+
+const nylasParticipantsCustomAvailabilityCss = ":host{display:block;--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;width:inherit}.nylas-participants-custom-availability{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200)}.nylas-participants-custom-availability .header{padding:1rem}.nylas-participants-custom-availability .header h3{margin:0;font-size:16px;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-participants-custom-availability .header p{margin:0.25rem 0 0 0;font-size:0.875rem;font-weight:400;line-height:20px;color:var(--nylas-base-600);text-align:left}.nylas-participants-custom-availability .content .participant-container{padding-top:8px;border-top:1px solid var(--nylas-base-200)}.nylas-participants-custom-availability .content .participant-container .participant-title{display:flex;justify-content:space-between;align-items:center;padding:4px 16px 12px}.nylas-participants-custom-availability .content .participant-container .participant-title p{margin:0}.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle{display:flex;gap:24px;align-items:center}.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle .chevron{display:flex;align-self:center;cursor:pointer}.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle .chevron:hover,.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle .chevron:active{color:var(--nylas-primary)}.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle .chevron.open{transform:rotate(90deg)}.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle .chevron.closed{transform:rotate(270deg)}.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle .chevron.disabled{cursor:not-allowed;color:var(--nylas-base-300)}.nylas-participants-custom-availability .content .participant-container .participant-title .participant-toggle .chevron.disabled:hover{color:var(--nylas-base-300)}.nylas-participants-custom-availability .content .participant-container nylas-availability-picker::part(nap){margin:0;border:none}";
+
+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;
+    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 = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+const NylasParticipantsCustomAvailability = proxyCustomElement(class NylasParticipantsCustomAvailability extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.valueChanged = createEvent(this, "valueChanged", 7);
+        this.internals = this.attachInternals();
+        this.name = 'participant-custom-availability';
+        this.participants = undefined;
+        this.selectedParticipants = this.setParticipants(this.participants);
+    }
+    elementNameChangedHandler(newValue) {
+        debug('nylas-participants-custom-availability', 'elementNameChangedHandler', newValue);
+        this.host.setAttribute('name', newValue);
+    }
+    participantsChangedHandler(newValue) {
+        debug('nylas-participants-custom-availability', 'participantsChangedHandler', newValue);
+        this.selectedParticipants = this.setParticipants(newValue);
+    }
+    connectedCallback() {
+        debug('nylas-participants-custom-availability', 'connectedCallback');
+    }
+    disconnectedCallback() {
+        debug('nylas-participants-custom-availability', 'disconnectedCallback');
+    }
+    componentWillLoad() {
+        debug('nylas-participants-custom-availability', 'componentWillLoad');
+    }
+    componentDidLoad() {
+        debug('nylas-participants-custom-availability', 'componentDidLoad');
+    }
+    nylasFormSwitchToggledHandler(event) {
+        debug('nylas-participants-custom-availability', 'nylasFormSwitchToggledHandler', event.detail);
+        this.selectedParticipants[event.detail.name]['isOpen'] = event.detail.checked;
+        this.selectedParticipants[event.detail.name]['setCustom'] = event.detail.checked;
+        this.selectedParticipants = { ...this.selectedParticipants };
+    }
+    handleValueChanged(event) {
+        debug('[nylas-editor-tabs]', 'handleValueChanged', event);
+        const { name, value } = event.detail;
+        if (!name.startsWith('participant-')) {
+            return;
+        }
+        if (!this.participantFormRef.checkValidity()) {
+            this.internals.setValidity({ customError: true }, 'Please fix the overlapping time ranges.');
+            return;
+        }
+        else {
+            this.internals.setValidity({});
+        }
+        const jsonValue = JSON.parse(value);
+        const key = name.split('-')[2];
+        if (!this.selectedParticipants[key])
+            return;
+        this.selectedParticipants[key]['openHours'] = jsonValue.openHours;
+        this.selectedParticipants = { ...this.selectedParticipants };
+        const participantOpenHours = {};
+        this.participants.forEach(participant => {
+            participantOpenHours[participant.email] = this.selectedParticipants[participant.email].openHours;
+        });
+        this.internals.setFormValue(JSON.stringify(participantOpenHours), this.name);
+        this.valueChanged.emit({ value: JSON.stringify(participantOpenHours), name: this.name });
+    }
+    setParticipants(participants) {
+        const selectedParticipants = {};
+        participants.forEach(participant => {
+            const isOpen = participant.is_organizer ? true : false;
+            selectedParticipants[participant.email] = {
+                isOpen: isOpen,
+                setCustom: !!participant.availability?.open_hours ? true : false,
+                openHours: participant.availability?.open_hours || [],
+                name: participant.name || participant.email,
+                availability: participant.availability,
+            };
+        });
+        return selectedParticipants;
+    }
+    render() {
+        return (h(Host, { key: '5590f983de527efa3e79d854e9cb2b49e433d64b' }, h("div", { key: '7a016a7a277b077a4edd63d433a185a7d2f7aaab', class: "nylas-participants-custom-availability", part: "npca" }, h("div", { key: '7fb61474d9b80c59844dd2ca67cd00e95ee2a2be', class: "header", part: "npca__header" }, h("h3", { key: 'dc66f0262309a5c08c887bbbf5c408233ebd1c00' }, "Set Custom Availability for Participants"), h("p", { key: '60686b9f1c4aab680caf07de6c22561c5ec1a9e5' }, "Set custom availability for scheduling meetings, or default to general availability.")), h("div", { key: '8782a3b4e48ce7eb74eb6e41e239b16d9840fb80', class: "content", part: "npca__content" }, h("form", { key: 'c2f23d7eebc4a113fbfa2cbcd7623c99b5a87f89', ref: el => (this.participantFormRef = el) }, Object.keys(this.selectedParticipants).map((key, index) => {
+            const participant = this.selectedParticipants[key];
+            if (!participant || !participant.name || !participant.availability)
+                return;
+            return (h("div", { class: "participant-container", part: "npca__participant-container", key: `participant-conatiner-${index}` }, h("div", { class: "participant-title", part: "npca__participant-title" }, h("p", null, "Set ", participant.name, "'s custom availability"), h("div", { class: "participant-toggle", part: "npca__participant-toggle--container" }, h("toggle-switch", { exportparts: "ts_label: npca__toggle-label, ts_input: npca_toggle-input, ts_slider: npca_toggle-slider", name: key, checked: !!participant.openHours && participant.openHours.length > 0 }), h("span", { class: `chevron ${participant.isOpen ? 'open' : 'closed'} ${participant.setCustom ? '' : 'disabled'}`, onClick: () => {
+                    if (!participant.setCustom)
+                        return;
+                    this.selectedParticipants[key].isOpen = !participant.isOpen;
+                    this.selectedParticipants = { ...this.selectedParticipants };
+                } }, h("chevron-icon", { width: "24", height: "24" })))), participant.isOpen && (h("nylas-availability-picker", { key: index, name: `participant-${index}-${key}`, openHours: participant.openHours, defaultTimezone: participant.openHours?.[0]?.timezone, hideHeader: true }))));
+        }))))));
+    }
+    static get formAssociated() { return true; }
+    get host() { return this; }
+    static get watchers() { return {
+        "name": ["elementNameChangedHandler"],
+        "participants": ["participantsChangedHandler"]
+    }; }
+    static get style() { return nylasParticipantsCustomAvailabilityCss; }
+}, [65, "nylas-participants-custom-availability", {
+        "name": [1],
+        "participants": [16],
+        "selectedParticipants": [32]
+    }, [[0, "nylasFormSwitchToggled", "nylasFormSwitchToggledHandler"], [0, "valueChanged", "handleValueChanged"]], {
+        "name": ["elementNameChangedHandler"],
+        "participants": ["participantsChangedHandler"]
+    }]);
+__decorate([
+    RegisterComponent({
+        name: 'nylas-participants-custom-availability',
+        eventToProps: {},
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasParticipantsCustomAvailability.prototype, "render", null);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-participants-custom-availability", "add-circle-icon", "chevron-icon", "close-icon", "globe-icon", "info-icon", "nylas-availability-picker", "nylas-time-window-picker", "search-icon", "select-dropdown", "toggle-switch", "tooltip-component"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-participants-custom-availability":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasParticipantsCustomAvailability);
+            }
+            break;
+        case "add-circle-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "chevron-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "close-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "globe-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "info-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "nylas-availability-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "nylas-time-window-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "search-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "select-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "toggle-switch":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "tooltip-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { NylasParticipantsCustomAvailability as N, defineCustomElement as d };
+
+//# sourceMappingURL=nylas-participants-custom-availability2.js.map

package/dist/components/nylas-participants-custom-availability2.js.map

@@ -0,0 +1 @@
+{"file":"nylas-participants-custom-availability2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-participants-custom-availability/nylas-participants-custom-availability.scss?tag=nylas-participants-custom-availability&encapsulation=shadow","src/components/scheduler-editor/nylas-participants-custom-availability/nylas-participants-custom-availability.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-participants-custom-availability {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  margin: 1rem;\n  border-radius: var(--nylas-border-radius-2x);\n  border: 1px solid var(--nylas-base-200);\n  .header {\n    padding: 1rem;\n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      line-height: 20px;\n      color: var(--nylas-base-900);\n      text-align: left;\n    }\n    p {\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n    }\n  }\n  .content {\n    .participant-container {\n      padding-top: 8px;\n      border-top: 1px solid var(--nylas-base-200);\n      .participant-title {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 4px 16px 12px;\n        p {\n          margin: 0;\n        }\n        .participant-toggle {\n          display: flex;\n          gap: 24px;\n          align-items: center;\n          .chevron {\n            display: flex;\n            align-self: center;\n            cursor: pointer;\n\n            &:hover,\n            &:active {\n              color: var(--nylas-primary);\n            }\n\n            &.open {\n              transform: rotate(90deg);\n            }\n\n            &.closed {\n              transform: rotate(270deg);\n            }\n\n            &.disabled {\n              cursor: not-allowed;\n              color: var(--nylas-base-300);\n              &:hover {\n                color: var(--nylas-base-300);\n              }\n            }\n          }\n        }\n      }\n      nylas-availability-picker::part(nap) {\n        margin: 0;\n        border: none;\n      }\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Availability, OpenHours, Participant } from '@nylas/core';\n\n/**\n * The `nylas-participants-custom-availability` component is a form input for setting custom availability for participants.\n *\n * @part npca - The participants custom availability container\n * @part npca__header - The header of the participants custom availability\n * @part npca__content - The content of the participants custom availability\n * @part npca__participant-container - The participant container\n * @part npca__participant-title - The title of the participant\n * @part npca__participant-toggle--container - The toggle container for the participant\n * @part npca__toggle-label - The label of the toggle\n * @part npca_toggle-input - The input of the toggle\n * @part npca_toggle-slider - The slider of the toggle\n */\n@Component({\n  tag: 'nylas-participants-custom-availability',\n  styleUrl: 'nylas-participants-custom-availability.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasParticipantsCustomAvailability {\n  @Element() host!: HTMLNylasParticipantsCustomAvailabilityElement;\n  private participantFormRef!: HTMLFormElement;\n\n  /**\n   * The name of the participants custom availability.\n   */\n  @Prop() name: string = 'participant-custom-availability';\n\n  /**\n   * The participants selected in the add participants section.\n   */\n  @Prop() participants!: Participant[];\n\n  /**\n   * This event is fired when the participants custom availability changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The state to store the custom availability setting for participants.\n   */\n  @State() selectedParticipants: {\n    [key: string]: {\n      setCustom: boolean;\n      isOpen: boolean;\n      openHours: OpenHours[];\n      name: string;\n      availability?: Availability;\n    };\n  } = this.setParticipants(this.participants);\n\n  // Watchers\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-participants-custom-availability', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('participants')\n  participantsChangedHandler(newValue: Participant[]) {\n    debug('nylas-participants-custom-availability', 'participantsChangedHandler', newValue);\n    this.selectedParticipants = this.setParticipants(newValue);\n  }\n\n  // Lifecycle Methods\n  connectedCallback() {\n    debug('nylas-participants-custom-availability', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-participants-custom-availability', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-participants-custom-availability', 'componentWillLoad');\n  }\n\n  componentDidLoad() {\n    debug('nylas-participants-custom-availability', 'componentDidLoad');\n  }\n\n  // Event Handlers\n  @Listen('nylasFormSwitchToggled')\n  nylasFormSwitchToggledHandler(event: CustomEvent<{ checked: boolean; name: string; label: boolean }>) {\n    debug('nylas-participants-custom-availability', 'nylasFormSwitchToggledHandler', event.detail);\n    this.selectedParticipants[event.detail.name]['isOpen'] = event.detail.checked;\n    this.selectedParticipants[event.detail.name]['setCustom'] = event.detail.checked;\n    this.selectedParticipants = { ...this.selectedParticipants };\n  }\n\n  @Listen('valueChanged')\n  handleValueChanged(event: CustomEvent) {\n    debug('[nylas-editor-tabs]', 'handleValueChanged', event);\n    const { name, value } = event.detail;\n    if (!name.startsWith('participant-')) {\n      return;\n    }\n    // Validate the form\n    if (!this.participantFormRef.checkValidity()) {\n      this.internals.setValidity({ customError: true }, 'Please fix the overlapping time ranges.');\n      return;\n    } else {\n      this.internals.setValidity({});\n    }\n\n    const jsonValue = JSON.parse(value);\n\n    const key = name.split('-')[2];\n    if (!this.selectedParticipants[key]) return;\n    this.selectedParticipants[key]['openHours'] = jsonValue.openHours;\n    this.selectedParticipants = { ...this.selectedParticipants };\n\n    const participantOpenHours = {};\n    this.participants.forEach(participant => {\n      participantOpenHours[participant.email] = this.selectedParticipants[participant.email].openHours;\n    });\n    this.internals.setFormValue(JSON.stringify(participantOpenHours), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(participantOpenHours), name: this.name });\n  }\n\n  setParticipants(participants: Participant[]) {\n    const selectedParticipants = {};\n    participants.forEach(participant => {\n      const isOpen = participant.is_organizer ? true : false;\n      selectedParticipants[participant.email] = {\n        isOpen: isOpen,\n        setCustom: !!participant.availability?.open_hours ? true : false,\n        openHours: participant.availability?.open_hours || [],\n        name: participant.name || participant.email,\n        availability: participant.availability,\n      };\n    });\n    return selectedParticipants;\n  }\n  @RegisterComponent<NylasParticipantsCustomAvailability, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-participants-custom-availability',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-participants-custom-availability\" part=\"npca\">\n          <div class=\"header\" part=\"npca__header\">\n            <h3>Set Custom Availability for Participants</h3>\n            <p>Set custom availability for scheduling meetings, or default to general availability.</p>\n          </div>\n          <div class=\"content\" part=\"npca__content\">\n            <form ref={el => (this.participantFormRef = el as HTMLFormElement)}>\n              {Object.keys(this.selectedParticipants).map((key, index) => {\n                const participant = this.selectedParticipants[key];\n                if (!participant || !participant.name || !participant.availability) return;\n                return (\n                  <div class=\"participant-container\" part=\"npca__participant-container\" key={`participant-conatiner-${index}`}>\n                    <div class=\"participant-title\" part=\"npca__participant-title\">\n                      <p>Set {participant.name}'s custom availability</p>\n                      <div class=\"participant-toggle\" part=\"npca__participant-toggle--container\">\n                        <toggle-switch\n                          exportparts=\"ts_label: npca__toggle-label, ts_input: npca_toggle-input, ts_slider: npca_toggle-slider\"\n                          name={key}\n                          checked={!!participant.openHours && participant.openHours.length > 0}\n                        />\n                        <span\n                          class={`chevron ${participant.isOpen ? 'open' : 'closed'} ${participant.setCustom ? '' : 'disabled'}`}\n                          onClick={() => {\n                            if (!participant.setCustom) return;\n                            this.selectedParticipants[key].isOpen = !participant.isOpen;\n                            this.selectedParticipants = { ...this.selectedParticipants };\n                          }}\n                        >\n                          <chevron-icon width=\"24\" height=\"24\" />\n                        </span>\n                      </div>\n                    </div>\n                    {participant.isOpen && (\n                      <nylas-availability-picker\n                        key={index}\n                        name={`participant-${index}-${key}`}\n                        openHours={participant.openHours}\n                        defaultTimezone={participant.openHours?.[0]?.timezone}\n                        hideHeader={true}\n                      />\n                    )}\n                  </div>\n                );\n              })}\n            </form>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-provider.js

@@ -182,7 +182,7 @@ const NylasProvider$1 = proxyCustomElement(class NylasProvider extends HTMLEleme
         return this.baseProvider?.getStore('schedulerConfig');
     }
     render() {
-        return (h(Host, { key: '57612ac13296cebf2c8731bcb9329f980db034d3' }, h("slot", { key: 'd752cd8c4cd47c9c17d57e23477d3a7720cbc8f5' })));
+        return (h(Host, { key: '7fee35047bafd5dc2f77e83012fe5149f17f7f9f' }, h("slot", { key: '96dcdef76b63b551e2deb56bfd0d1497ff897114' })));
     }
     get host() { return this; }
     static get style() { return nylasProviderCss; }