@nylas/web-elements 1.1.0-canary.16 → 1.1.0-canary.18

package/dist/nylas-web-elements/warning-icon.entry.js

@@ -9,7 +9,7 @@ const WarningIcon = class {
         this.height = '16';
     }
     render() {
-        return (h("svg", { key: '7986181ae6aef9438b547db4de9b19cb6eb91d29', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '6dae655e6e4fa48293722c517c90d03af23bb16c', d: "M7.68551 1.35232L1.12678 13.2773C0.576954 14.277 1.3002 15.5002 2.4411 15.5002H15.5586C16.6995 15.5002 17.4227 14.277 16.8729 13.2773L10.3142 1.35232C9.74426 0.316153 8.2554 0.316157 7.68551 1.35232ZM8.99982 5.25016C9.41403 5.25016 9.74982 5.58595 9.74982 6.00016V10.0002C9.74982 10.4144 9.41403 10.7502 8.99982 10.7502C8.5856 10.7502 8.24982 10.4144 8.24982 10.0002V6.00016C8.24982 5.58595 8.5856 5.25016 8.99982 5.25016ZM9.74982 12.2502C9.74982 12.6644 9.41403 13.0002 8.99982 13.0002C8.5856 13.0002 8.24982 12.6644 8.24982 12.2502C8.24982 11.8359 8.5856 11.5002 8.99982 11.5002C9.41403 11.5002 9.74982 11.8359 9.74982 12.2502Z", fill: "currentColor" })));
+        return (h("svg", { key: '1e51dda6a974ab0b7807a60ab0d75367ec8b92a1', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '4450fe1f41caaaeada2704a57a33c24223777e0a', d: "M7.68551 1.35232L1.12678 13.2773C0.576954 14.277 1.3002 15.5002 2.4411 15.5002H15.5586C16.6995 15.5002 17.4227 14.277 16.8729 13.2773L10.3142 1.35232C9.74426 0.316153 8.2554 0.316157 7.68551 1.35232ZM8.99982 5.25016C9.41403 5.25016 9.74982 5.58595 9.74982 6.00016V10.0002C9.74982 10.4144 9.41403 10.7502 8.99982 10.7502C8.5856 10.7502 8.24982 10.4144 8.24982 10.0002V6.00016C8.24982 5.58595 8.5856 5.25016 8.99982 5.25016ZM9.74982 12.2502C9.74982 12.6644 9.41403 13.0002 8.99982 13.0002C8.5856 13.0002 8.24982 12.6644 8.24982 12.2502C8.24982 11.8359 8.5856 11.5002 8.99982 11.5002C9.41403 11.5002 9.74982 11.8359 9.74982 12.2502Z", fill: "currentColor" })));
     }
 };
 WarningIcon.style = iconCss;

package/dist/types/components/design-system/input-dropdown/input-dropdown.d.ts

@@ -13,6 +13,7 @@ export declare class InputDropdown {
     defaultInputOption?: DropdownOption;
     inputValue: string;
     pluralizedLabel: string;
+    filterable: boolean;
     selectedOption: DropdownOption | null;
     isOpen: boolean;
     filteredOptions: DropdownOption[];
@@ -26,6 +27,7 @@ export declare class InputDropdown {
     defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption): void;
     inputValueChangedHandler(newValue: string, oldValue: string): void;
     componentWillLoad(): void;
+    getFilteredOptions(options: any): DropdownOption[];
     toggleDropdown(): void;
     selectOption(option: DropdownOption): void;
     handleOnInput(event: Event): void;

package/dist/types/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.d.ts

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
 type Participant = {
     name?: string;
     email: string;
@@ -18,6 +19,10 @@ export declare class NylasAdditionalParticipants {
     eventParticipants?: Participant[];
     participantOptions?: Participant[];
     internals: ElementInternals;
+    valueChanged: EventEmitter<{
+        value: string;
+        name: string;
+    }>;
     elementNameChangedHandler(newValue: string): void;
     participants: Participant[];
     participantsValid: boolean;
@@ -33,7 +38,7 @@ export declare class NylasAdditionalParticipants {
     addParticipant(): void;
     removeParticipant(index: number): void;
     validate(email: any, index: any): void;
-    participantsWithouOrganizer(): Participant[];
+    updateFormValue(): void;
     getArrayDifference(array1: Participant[], array2: Participant[]): {
         value: string;
         label: string;

package/dist/types/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.d.ts

@@ -42,11 +42,9 @@ export declare class NylasAvailabilityPicker {
     openHours?: OpenHours[];
     name: string;
     defaultTimezone: string;
+    hideHeader: boolean;
     valueChanged: EventEmitter<{
-        value: {
-            openHours: OpenHours[];
-            timezone: string;
-        };
+        value: string;
         name: string;
     }>;
     internals: ElementInternals;

package/dist/types/components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs.d.ts

@@ -1,4 +1,4 @@
-import { BookingType, Calendar, Configuration, OpenHours } from '@nylas/core';
+import { BookingType, Calendar, Configuration, OpenHours, Participant } from '@nylas/core';
 import { Event, EventEmitter } from '../../../stencil-public-runtime';
 import { User } from "../../../common/nylas-api-request";
 type SchedulerEventDetail = {
@@ -29,7 +29,10 @@ export declare class NylasEditorTabs {
             openHours?: OpenHours[];
         };
         calendarIds: string[];
-        participants?: any[];
+        participants?: Participant[];
+        participantOpenHours?: {
+            [key: string]: OpenHours[];
+        };
         bookingCalendar?: string;
         location?: string;
         bookingType?: string;
@@ -66,10 +69,10 @@ export declare class NylasEditorTabs {
         duration: string;
         availability: {
             timezone: string;
-            openHours: OpenHours[] | undefined;
+            openHours: OpenHours[];
         };
         calendarIds: string[];
-        participants: import("@nylas/core").Participant[];
+        participants: Participant[];
         bookingCalendar: string;
         location: string;
         bookingType: BookingType;
@@ -86,6 +89,7 @@ export declare class NylasEditorTabs {
         hideCancellationOptions: boolean;
         hideReschedulingOptions: boolean;
     };
+    setFormState(value: any, key: any): void;
     updateFormState(): Partial<{
         title: string;
         description: string;
@@ -95,7 +99,10 @@ export declare class NylasEditorTabs {
             openHours?: OpenHours[] | undefined;
         } | undefined;
         calendarIds: string[];
-        participants?: any[] | undefined;
+        participants?: Participant[] | undefined;
+        participantOpenHours?: {
+            [key: string]: OpenHours[];
+        } | undefined;
         bookingCalendar?: string | undefined;
         location?: string | undefined;
         bookingType?: string | undefined;

package/dist/types/components/scheduler-editor/nylas-participants-custom-availability/nylas-participants-custom-availability.d.ts

@@ -0,0 +1,36 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { Availability, OpenHours, Participant } from '@nylas/core';
+export declare class NylasParticipantsCustomAvailability {
+    host: HTMLNylasParticipantsCustomAvailabilityElement;
+    private participantFormRef;
+    name: string;
+    participants: Participant[];
+    valueChanged: EventEmitter<{
+        value: string;
+        name: string;
+    }>;
+    internals: ElementInternals;
+    selectedParticipants: {
+        [key: string]: {
+            setCustom: boolean;
+            isOpen: boolean;
+            openHours: OpenHours[];
+            name: string;
+            availability?: Availability;
+        };
+    };
+    elementNameChangedHandler(newValue: string): void;
+    participantsChangedHandler(newValue: Participant[]): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    nylasFormSwitchToggledHandler(event: CustomEvent<{
+        checked: boolean;
+        name: string;
+        label: boolean;
+    }>): void;
+    handleValueChanged(event: CustomEvent): void;
+    setParticipants(participants: Participant[]): {};
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -207,6 +207,10 @@ export namespace Components {
           * The default selected option
          */
         "defaultInputOption"?: DropdownOption;
+        /**
+          * This is used to set if the dropdown should be filtered based on the input value. If set to true, the dropdown will be filtered based on the input value.
+         */
+        "filterable": boolean;
         /**
           * Should show search input
          */
@@ -271,6 +275,10 @@ export namespace Components {
      */
     interface NylasAvailabilityPicker {
         "defaultTimezone": string;
+        /**
+          * Hide the header of the availability picker.
+         */
+        "hideHeader": boolean;
         /**
           * The name of the availability picker.
          */
@@ -884,6 +892,19 @@ export namespace Components {
          */
         "ttl": number | 'none';
     }
+    /**
+     * The `nylas-participants-custom-availability` component is a form input for setting custom availability for participants.
+     */
+    interface NylasParticipantsCustomAvailability {
+        /**
+          * The name of the participants custom availability.
+         */
+        "name": string;
+        /**
+          * The participants selected in the add participants section.
+         */
+        "participants": Participant[];
+    }
     /**
      * The Nylas Provider component.
      * This component is used to manage the Nylas Provider.
@@ -1323,6 +1344,9 @@ export namespace Components {
         "defaultSelectedPeriod": string;
         "timePeriods": string[];
     }
+    /**
+     * The `toggle-switch` component is a UI component that allows users to toggle a switch.
+     */
     interface ToggleSwitch {
         "checked": boolean;
         "label": string;
@@ -1370,6 +1394,10 @@ export interface MultiSelectDropdownCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMultiSelectDropdownElement;
 }
+export interface NylasAdditionalParticipantsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNylasAdditionalParticipantsElement;
+}
 export interface NylasAvailabilityPickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNylasAvailabilityPickerElement;
@@ -1482,6 +1510,10 @@ export interface NylasMinCancellationNoticeCustomEvent<T> extends CustomEvent<T>
     detail: T;
     target: HTMLNylasMinCancellationNoticeElement;
 }
+export interface NylasParticipantsCustomAvailabilityCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNylasParticipantsCustomAvailabilityElement;
+}
 export interface NylasProviderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNylasProviderElement;
@@ -1796,10 +1828,24 @@ declare global {
         prototype: HTMLMultiSelectDropdownElement;
         new (): HTMLMultiSelectDropdownElement;
     };
+    interface HTMLNylasAdditionalParticipantsElementEventMap {
+        "valueChanged": {
+    value: string;
+    name: string;
+  };
+    }
     /**
      * The `nylas-additional-participants` component is a form input for adding additional participants to an event.
      */
     interface HTMLNylasAdditionalParticipantsElement extends Components.NylasAdditionalParticipants, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNylasAdditionalParticipantsElementEventMap>(type: K, listener: (this: HTMLNylasAdditionalParticipantsElement, ev: NylasAdditionalParticipantsCustomEvent<HTMLNylasAdditionalParticipantsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNylasAdditionalParticipantsElementEventMap>(type: K, listener: (this: HTMLNylasAdditionalParticipantsElement, ev: NylasAdditionalParticipantsCustomEvent<HTMLNylasAdditionalParticipantsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLNylasAdditionalParticipantsElement: {
         prototype: HTMLNylasAdditionalParticipantsElement;
@@ -1807,10 +1853,7 @@ declare global {
     };
     interface HTMLNylasAvailabilityPickerElementEventMap {
         "valueChanged": {
-    value: {
-      openHours: OpenHours[];
-      timezone: string;
-    };
+    value: string;
     name: string;
   };
     }
@@ -2530,6 +2573,29 @@ declare global {
         prototype: HTMLNylasNotificationElement;
         new (): HTMLNylasNotificationElement;
     };
+    interface HTMLNylasParticipantsCustomAvailabilityElementEventMap {
+        "valueChanged": {
+    value: string;
+    name: string;
+  };
+    }
+    /**
+     * The `nylas-participants-custom-availability` component is a form input for setting custom availability for participants.
+     */
+    interface HTMLNylasParticipantsCustomAvailabilityElement extends Components.NylasParticipantsCustomAvailability, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNylasParticipantsCustomAvailabilityElementEventMap>(type: K, listener: (this: HTMLNylasParticipantsCustomAvailabilityElement, ev: NylasParticipantsCustomAvailabilityCustomEvent<HTMLNylasParticipantsCustomAvailabilityElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNylasParticipantsCustomAvailabilityElementEventMap>(type: K, listener: (this: HTMLNylasParticipantsCustomAvailabilityElement, ev: NylasParticipantsCustomAvailabilityCustomEvent<HTMLNylasParticipantsCustomAvailabilityElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNylasParticipantsCustomAvailabilityElement: {
+        prototype: HTMLNylasParticipantsCustomAvailabilityElement;
+        new (): HTMLNylasParticipantsCustomAvailabilityElement;
+    };
     interface HTMLNylasProviderElementEventMap {
         "init": HTMLNylasProviderElement;
         "loggedIn": HTMLNylasProviderElement;
@@ -2915,6 +2981,9 @@ declare global {
     label: string;
   };
     }
+    /**
+     * The `toggle-switch` component is a UI component that allows users to toggle a switch.
+     */
     interface HTMLToggleSwitchElement extends Components.ToggleSwitch, HTMLStencilElement {
         addEventListener<K extends keyof HTMLToggleSwitchElementEventMap>(type: K, listener: (this: HTMLToggleSwitchElement, ev: ToggleSwitchCustomEvent<HTMLToggleSwitchElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3030,6 +3099,7 @@ declare global {
         "nylas-min-booking-notice": HTMLNylasMinBookingNoticeElement;
         "nylas-min-cancellation-notice": HTMLNylasMinCancellationNoticeElement;
         "nylas-notification": HTMLNylasNotificationElement;
+        "nylas-participants-custom-availability": HTMLNylasParticipantsCustomAvailabilityElement;
         "nylas-provider": HTMLNylasProviderElement;
         "nylas-scheduler-editor": HTMLNylasSchedulerEditorElement;
         "nylas-scheduling": HTMLNylasSchedulingElement;
@@ -3238,6 +3308,10 @@ declare namespace LocalJSX {
           * The default selected option
          */
         "defaultInputOption"?: DropdownOption;
+        /**
+          * This is used to set if the dropdown should be filtered based on the input value. If set to true, the dropdown will be filtered based on the input value.
+         */
+        "filterable"?: boolean;
         /**
           * Should show search input
          */
@@ -3309,6 +3383,13 @@ declare namespace LocalJSX {
     interface NylasAdditionalParticipants {
         "eventParticipants"?: Participant[];
         "name"?: string;
+        /**
+          * This event is fired when the selected participants change.
+         */
+        "onValueChanged"?: (event: NylasAdditionalParticipantsCustomEvent<{
+    value: string;
+    name: string;
+  }>) => void;
         "participantOptions"?: Participant[];
     }
     /**
@@ -3316,18 +3397,19 @@ declare namespace LocalJSX {
      */
     interface NylasAvailabilityPicker {
         "defaultTimezone"?: string;
+        /**
+          * Hide the header of the availability picker.
+         */
+        "hideHeader"?: boolean;
         /**
           * The name of the availability picker.
          */
         "name"?: string;
         /**
-          * This event is fired when the selected availability / open hours change.
+          * This event is fired when the selected availability / open hours change. The value is a stringified JSON object with the open hours and timezone. Ex: {   openHours: OpenHours[];   timezone: string; };
          */
         "onValueChanged"?: (event: NylasAvailabilityPickerCustomEvent<{
-    value: {
-      openHours: OpenHours[];
-      timezone: string;
-    };
+    value: string;
     name: string;
   }>) => void;
         /**
@@ -4161,6 +4243,26 @@ declare namespace LocalJSX {
          */
         "ttl"?: number | 'none';
     }
+    /**
+     * The `nylas-participants-custom-availability` component is a form input for setting custom availability for participants.
+     */
+    interface NylasParticipantsCustomAvailability {
+        /**
+          * The name of the participants custom availability.
+         */
+        "name"?: string;
+        /**
+          * This event is fired when the participants custom availability changes.
+         */
+        "onValueChanged"?: (event: NylasParticipantsCustomAvailabilityCustomEvent<{
+    value: string;
+    name: string;
+  }>) => void;
+        /**
+          * The participants selected in the add participants section.
+         */
+        "participants": Participant[];
+    }
     /**
      * The Nylas Provider component.
      * This component is used to manage the Nylas Provider.
@@ -4652,6 +4754,9 @@ declare namespace LocalJSX {
         "onTimePeriodChanged"?: (event: TimePeriodSelectorCustomEvent<{ number: number; period: string }>) => void;
         "timePeriods"?: string[];
     }
+    /**
+     * The `toggle-switch` component is a UI component that allows users to toggle a switch.
+     */
     interface ToggleSwitch {
         "checked"?: boolean;
         "label"?: string;
@@ -4755,6 +4860,7 @@ declare namespace LocalJSX {
         "nylas-min-booking-notice": NylasMinBookingNotice;
         "nylas-min-cancellation-notice": NylasMinCancellationNotice;
         "nylas-notification": NylasNotification;
+        "nylas-participants-custom-availability": NylasParticipantsCustomAvailability;
         "nylas-provider": NylasProvider;
         "nylas-scheduler-editor": NylasSchedulerEditor;
         "nylas-scheduling": NylasScheduling;
@@ -4990,6 +5096,10 @@ declare module "@stencil/core" {
              * The `nylas-notification` component is a UI component that displays notifications.
              */
             "nylas-notification": LocalJSX.NylasNotification & JSXBase.HTMLAttributes<HTMLNylasNotificationElement>;
+            /**
+             * The `nylas-participants-custom-availability` component is a form input for setting custom availability for participants.
+             */
+            "nylas-participants-custom-availability": LocalJSX.NylasParticipantsCustomAvailability & JSXBase.HTMLAttributes<HTMLNylasParticipantsCustomAvailabilityElement>;
             /**
              * The Nylas Provider component.
              * This component is used to manage the Nylas Provider.
@@ -5049,6 +5159,9 @@ declare module "@stencil/core" {
              */
             "textarea-component": LocalJSX.TextareaComponent & JSXBase.HTMLAttributes<HTMLTextareaComponentElement>;
             "time-period-selector": LocalJSX.TimePeriodSelector & JSXBase.HTMLAttributes<HTMLTimePeriodSelectorElement>;
+            /**
+             * The `toggle-switch` component is a UI component that allows users to toggle a switch.
+             */
             "toggle-switch": LocalJSX.ToggleSwitch & JSXBase.HTMLAttributes<HTMLToggleSwitchElement>;
             /**
              * The `tooltip-component` component is a UI component that displays a tooltip.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nylas/web-elements",
-  "version": "1.1.0-canary.16",
+  "version": "1.1.0-canary.18",
   "description": "Nylas Web Elements",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",