@nylas/web-elements 1.3.2 → 1.3.3

package/dist/nylas-web-elements/time-period-selector.entry.js

@@ -31,6 +31,21 @@ const TimePeriodSelector = class {
             };
         });
     }
+    defaultSelectedPeriodChanged(newValue) {
+        this.selectedPeriod = newValue;
+        this.updateNumberOptionsAndSelectedNumber(newValue);
+    }
+    defaultSelectedNumberChanged(newValue) {
+        this.selectedNumber = newValue;
+    }
+    timePeriodsChanged(newValue) {
+        this.timePeriodOptions = newValue.map(period => {
+            return {
+                label: period,
+                value: period,
+            };
+        });
+    }
     componentDidLoad() {
         this.selectedNumber = this.defaultSelectedNumber;
         this.selectedPeriod = this.defaultSelectedPeriod;
@@ -98,9 +113,14 @@ const TimePeriodSelector = class {
         this.selectedNumber = parseInt(this.numberOptions[0].value);
     }
     render() {
-        return (h("div", { key: '76ed6c36ebbcfbb8b8d54edc6a26a9d2a6d6f7fb', class: "time-period-selector" }, typeof this.selectedNumber == 'number' && (h("input-dropdown", { id: "time-number", name: 'time-number', inputValue: this.selectedNumber.toString(), exportparts: "id_dropdown: tps__number-dropdown, id_dropdown-input: tps__number-dropdown-button, id_dropdown-content: tps__number-dropdown-content", options: this.numberOptions, defaultInputOption: this.numberOptions.find(i => i.value == this.selectedNumber.toString()) })), typeof this.selectedPeriod == 'string' && (h("select-dropdown", { id: "time-period", name: 'time-period', options: this.timePeriodOptions, exportparts: "sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content", pluralizedLabel: this.selectedNumber > 1 ? 's' : '', defaultSelectedOption: this.timePeriodOptions.find(i => i.value == this.selectedPeriod), withSearch: false }))));
+        return (h("div", { key: 'f40a2be9bc76a0a5be0ffa3c87779fab644e52f2', class: "time-period-selector" }, typeof this.selectedNumber == 'number' && (h("input-dropdown", { id: "time-number", name: 'time-number', inputValue: this.selectedNumber.toString(), exportparts: "id_dropdown: tps__number-dropdown, id_dropdown-input: tps__number-dropdown-button, id_dropdown-content: tps__number-dropdown-content", options: this.numberOptions, defaultInputOption: this.numberOptions.find(i => i.value == this.selectedNumber.toString()) })), typeof this.selectedPeriod == 'string' && (h("select-dropdown", { id: "time-period", name: 'time-period', options: this.timePeriodOptions, exportparts: "sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content", pluralizedLabel: this.selectedNumber > 1 ? 's' : '', defaultSelectedOption: this.timePeriodOptions.find(i => i.value == this.selectedPeriod), withSearch: false }))));
     }
     get host() { return getElement(this); }
+    static get watchers() { return {
+        "defaultSelectedPeriod": ["defaultSelectedPeriodChanged"],
+        "defaultSelectedNumber": ["defaultSelectedNumberChanged"],
+        "timePeriods": ["timePeriodsChanged"]
+    }; }
 };
 TimePeriodSelector.style = timePeriodSelectorCss;
 

package/dist/nylas-web-elements/time-period-selector.entry.js.map

@@ -1 +1 @@
-{"file":"time-period-selector.entry.esm.js","mappings":"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","names":[],"sources":["src/components/design-system/time-period-selector/time-period-selector.scss?tag=time-period-selector&encapsulation=scoped","src/components/design-system/time-period-selector/time-period-selector.tsx"],"sourcesContent":[".time-period-selector {\n  display: grid;\n  gap: 0.5rem;\n  grid-template-columns: auto 1fr;\n\n  select-dropdown,\n  input-dropdown {\n    border: 1px solid var(--nylas-base-200);\n    border-radius: var(--nylas-border-radius-2x);\n  }\n  select-dropdown {\n    width: 116px;\n  }\n  input-dropdown {\n    width: 84px;\n    display: flex;\n    align-items: center;\n  }\n\n  select-dropdown#time-period::part(sd_dropdown-button) {\n    width: 100%;\n  }\n  input-dropdown::part(id_dropdown) {\n    width: inherit;\n    height: 100%;\n  }\n  input-dropdown#time-number::part(id_dropdown-input) {\n    border: none;\n    border-radius: var(--nylas-border-radius-2x);\n  }\n  input-dropdown::part(id_dropdown-input) {\n    padding: 17px;\n    gap: 1rem;\n  }\n  input-dropdown::part(id_dropdown-content) {\n    width: 100%;\n    max-height: 200px;\n  }\n  select-dropdown::part(sd_dropdown) {\n    width: inherit;\n  }\n  select-dropdown::part(sd_dropdown-button) {\n    padding: 1rem;\n    gap: 1rem;\n    justify-content: space-between;\n  }\n  select-dropdown::part(sd_dropdown-content) {\n    width: 100%;\n    max-height: 200px;\n  }\n}\n","import { debug } from '@/utils/utils';\nimport { Element, Event, EventEmitter } from '@stencil/core';\nimport { Component, h, Listen, Prop, State } from '@stencil/core';\n\nconst pluralToSingular = {\n  hours: 'hour',\n  days: 'day',\n  weeks: 'week',\n  months: 'month',\n};\n\n@Component({\n  tag: 'time-period-selector',\n  styleUrl: 'time-period-selector.scss',\n  scoped: true,\n})\nexport class TimePeriodSelector {\n  @Element() host!: HTMLElement;\n\n  // The possible values for the time periods dropdown\n  @Prop() timePeriods: string[] = ['hour', 'day', 'week', 'month'];\n\n  /**\n   * The default selected time period.\n   */\n  @Prop() defaultSelectedPeriod!: string;\n\n  /**\n   * The default selected number.\n   */\n  @Prop() defaultSelectedNumber!: number;\n\n  /**\n   * The currently selected time period\n   */\n  @State() selectedPeriod: string = this.defaultSelectedPeriod;\n\n  /**\n   * The currently selected number of the time period\n   */\n  @State() selectedNumber: number = this.defaultSelectedNumber;\n\n  /*\n   * The options for the number dropdown, to be calculated based on the selectedPeriod\n   */\n  @State() numberOptions: { label: string; value: string }[] = this.calculateOptions(this.defaultSelectedPeriod || 'hour').map(i => {\n    return {\n      label: i.toString(),\n      value: i.toString(),\n    };\n  });\n\n  /**\n   * The options for the time period dropdown\n   */\n  @State() timePeriodOptions = this.timePeriods.map(period => {\n    return {\n      label: period,\n      value: period,\n    };\n  });\n\n  componentDidLoad() {\n    this.selectedNumber = this.defaultSelectedNumber;\n    this.selectedPeriod = this.defaultSelectedPeriod;\n    const period = pluralToSingular[this.selectedPeriod] ?? this.selectedPeriod;\n    const numberOptions = this.calculateOptions(period);\n    this.numberOptions = numberOptions.map(i => {\n      return {\n        label: i.toString(),\n        value: i.toString(),\n      };\n    });\n  }\n\n  @Event() timePeriodChanged!: EventEmitter<{ number: number; period: string }>;\n\n  private calculateOptions(period: string): number[] {\n    switch (period) {\n      case 'hour':\n        return Array.from({ length: 23 }, (_, i) => i + 1);\n      case 'minute':\n        return Array.from({ length: 13 }, (_, i) => i * 5);\n      case 'day':\n        return Array.from({ length: 30 }, (_, i) => i + 1);\n      case 'week':\n        return Array.from({ length: 4 }, (_, i) => i + 1);\n      case 'month':\n        return Array.from({ length: 12 }, (_, i) => i + 1);\n      default:\n        return [];\n    }\n  }\n\n  @Listen('inputOptionChanged')\n  inputOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('time-period-selector', 'inputOptionChangedHandler', event.detail);\n    const { value, name } = event.detail;\n    if (name === 'time-number') {\n      this.selectedNumber = value ? parseInt(value) : this.defaultSelectedNumber;\n    }\n    const selected = {\n      number: this.selectedNumber,\n      period: this.selectedPeriod,\n    };\n    this.timePeriodChanged.emit(selected);\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('time-period-selector', 'nylasFormDropdownChangedHandler', event.detail);\n    const { value, name } = event.detail;\n    if (name === 'time-period') {\n      this.selectedPeriod = value;\n      this.updateNumberOptionsAndSelectedNumber(value);\n    } else if (name === 'time-number') {\n      this.selectedNumber = parseInt(value);\n    }\n    const selected = {\n      number: this.selectedNumber,\n      period: this.selectedPeriod,\n    };\n    this.timePeriodChanged.emit(selected);\n  }\n\n  updateNumberOptionsAndSelectedNumber(period: string) {\n    const numberOptions = this.calculateOptions(period);\n    this.numberOptions = numberOptions.map(i => {\n      return {\n        label: i.toString(),\n        value: i.toString(),\n      };\n    });\n    this.selectedNumber = parseInt(this.numberOptions[0].value);\n  }\n\n  render() {\n    return (\n      <div class=\"time-period-selector\">\n        {typeof this.selectedNumber == 'number' && (\n          <input-dropdown\n            id=\"time-number\"\n            name={'time-number'}\n            inputValue={this.selectedNumber.toString()}\n            exportparts=\"id_dropdown: tps__number-dropdown, id_dropdown-input: tps__number-dropdown-button, id_dropdown-content: tps__number-dropdown-content\"\n            options={this.numberOptions}\n            defaultInputOption={this.numberOptions.find(i => i.value == this.selectedNumber.toString())}\n          />\n        )}\n        {typeof this.selectedPeriod == 'string' && (\n          <select-dropdown\n            id=\"time-period\"\n            name={'time-period'}\n            options={this.timePeriodOptions}\n            exportparts=\"sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content\"\n            pluralizedLabel={this.selectedNumber > 1 ? 's' : ''}\n            defaultSelectedOption={this.timePeriodOptions.find(i => i.value == this.selectedPeriod)}\n            withSearch={false}\n          />\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"time-period-selector.entry.esm.js","mappings":"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","names":[],"sources":["src/components/design-system/time-period-selector/time-period-selector.scss?tag=time-period-selector&encapsulation=scoped","src/components/design-system/time-period-selector/time-period-selector.tsx"],"sourcesContent":[".time-period-selector {\n  display: grid;\n  gap: 0.5rem;\n  grid-template-columns: auto 1fr;\n\n  select-dropdown,\n  input-dropdown {\n    border: 1px solid var(--nylas-base-200);\n    border-radius: var(--nylas-border-radius-2x);\n  }\n  select-dropdown {\n    width: 116px;\n  }\n  input-dropdown {\n    width: 84px;\n    display: flex;\n    align-items: center;\n  }\n\n  select-dropdown#time-period::part(sd_dropdown-button) {\n    width: 100%;\n  }\n  input-dropdown::part(id_dropdown) {\n    width: inherit;\n    height: 100%;\n  }\n  input-dropdown#time-number::part(id_dropdown-input) {\n    border: none;\n    border-radius: var(--nylas-border-radius-2x);\n  }\n  input-dropdown::part(id_dropdown-input) {\n    padding: 17px;\n    gap: 1rem;\n  }\n  input-dropdown::part(id_dropdown-content) {\n    width: 100%;\n    max-height: 200px;\n  }\n  select-dropdown::part(sd_dropdown) {\n    width: inherit;\n  }\n  select-dropdown::part(sd_dropdown-button) {\n    padding: 1rem;\n    gap: 1rem;\n    justify-content: space-between;\n  }\n  select-dropdown::part(sd_dropdown-content) {\n    width: 100%;\n    max-height: 200px;\n  }\n}\n","import { debug } from '@/utils/utils';\nimport { Element, Event, EventEmitter, Watch } from '@stencil/core';\nimport { Component, h, Listen, Prop, State } from '@stencil/core';\n\nconst pluralToSingular = {\n  hours: 'hour',\n  days: 'day',\n  weeks: 'week',\n  months: 'month',\n};\n\n@Component({\n  tag: 'time-period-selector',\n  styleUrl: 'time-period-selector.scss',\n  scoped: true,\n})\nexport class TimePeriodSelector {\n  @Element() host!: HTMLElement;\n\n  // The possible values for the time periods dropdown\n  @Prop() timePeriods: string[] = ['hour', 'day', 'week', 'month'];\n\n  /**\n   * The default selected time period.\n   */\n  @Prop() defaultSelectedPeriod!: string;\n\n  /**\n   * The default selected number.\n   */\n  @Prop() defaultSelectedNumber!: number;\n\n  /**\n   * The currently selected time period\n   */\n  @State() selectedPeriod: string = this.defaultSelectedPeriod;\n\n  /**\n   * The currently selected number of the time period\n   */\n  @State() selectedNumber: number = this.defaultSelectedNumber;\n\n  /*\n   * The options for the number dropdown, to be calculated based on the selectedPeriod\n   */\n  @State() numberOptions: { label: string; value: string }[] = this.calculateOptions(this.defaultSelectedPeriod || 'hour').map(i => {\n    return {\n      label: i.toString(),\n      value: i.toString(),\n    };\n  });\n\n  /**\n   * The options for the time period dropdown\n   */\n  @State() timePeriodOptions = this.timePeriods.map(period => {\n    return {\n      label: period,\n      value: period,\n    };\n  });\n\n  @Watch('defaultSelectedPeriod')\n  defaultSelectedPeriodChanged(newValue: string) {\n    this.selectedPeriod = newValue;\n    this.updateNumberOptionsAndSelectedNumber(newValue);\n  }\n\n  @Watch('defaultSelectedNumber')\n  defaultSelectedNumberChanged(newValue: number) {\n    this.selectedNumber = newValue;\n  }\n\n  @Watch('timePeriods')\n  timePeriodsChanged(newValue: string[]) {\n    this.timePeriodOptions = newValue.map(period => {\n      return {\n        label: period,\n        value: period,\n      };\n    });\n  }\n\n  componentDidLoad() {\n    this.selectedNumber = this.defaultSelectedNumber;\n    this.selectedPeriod = this.defaultSelectedPeriod;\n    const period = pluralToSingular[this.selectedPeriod] ?? this.selectedPeriod;\n    const numberOptions = this.calculateOptions(period);\n    this.numberOptions = numberOptions.map(i => {\n      return {\n        label: i.toString(),\n        value: i.toString(),\n      };\n    });\n  }\n\n  @Event() timePeriodChanged!: EventEmitter<{ number: number; period: string }>;\n\n  private calculateOptions(period: string): number[] {\n    switch (period) {\n      case 'hour':\n        return Array.from({ length: 23 }, (_, i) => i + 1);\n      case 'minute':\n        return Array.from({ length: 13 }, (_, i) => i * 5);\n      case 'day':\n        return Array.from({ length: 30 }, (_, i) => i + 1);\n      case 'week':\n        return Array.from({ length: 4 }, (_, i) => i + 1);\n      case 'month':\n        return Array.from({ length: 12 }, (_, i) => i + 1);\n      default:\n        return [];\n    }\n  }\n\n  @Listen('inputOptionChanged')\n  inputOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('time-period-selector', 'inputOptionChangedHandler', event.detail);\n    const { value, name } = event.detail;\n    if (name === 'time-number') {\n      this.selectedNumber = value ? parseInt(value) : this.defaultSelectedNumber;\n    }\n    const selected = {\n      number: this.selectedNumber,\n      period: this.selectedPeriod,\n    };\n    this.timePeriodChanged.emit(selected);\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('time-period-selector', 'nylasFormDropdownChangedHandler', event.detail);\n    const { value, name } = event.detail;\n    if (name === 'time-period') {\n      this.selectedPeriod = value;\n      this.updateNumberOptionsAndSelectedNumber(value);\n    } else if (name === 'time-number') {\n      this.selectedNumber = parseInt(value);\n    }\n    const selected = {\n      number: this.selectedNumber,\n      period: this.selectedPeriod,\n    };\n    this.timePeriodChanged.emit(selected);\n  }\n\n  updateNumberOptionsAndSelectedNumber(period: string) {\n    const numberOptions = this.calculateOptions(period);\n    this.numberOptions = numberOptions.map(i => {\n      return {\n        label: i.toString(),\n        value: i.toString(),\n      };\n    });\n    this.selectedNumber = parseInt(this.numberOptions[0].value);\n  }\n\n  render() {\n    return (\n      <div class=\"time-period-selector\">\n        {typeof this.selectedNumber == 'number' && (\n          <input-dropdown\n            id=\"time-number\"\n            name={'time-number'}\n            inputValue={this.selectedNumber.toString()}\n            exportparts=\"id_dropdown: tps__number-dropdown, id_dropdown-input: tps__number-dropdown-button, id_dropdown-content: tps__number-dropdown-content\"\n            options={this.numberOptions}\n            defaultInputOption={this.numberOptions.find(i => i.value == this.selectedNumber.toString())}\n          />\n        )}\n        {typeof this.selectedPeriod == 'string' && (\n          <select-dropdown\n            id=\"time-period\"\n            name={'time-period'}\n            options={this.timePeriodOptions}\n            exportparts=\"sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content\"\n            pluralizedLabel={this.selectedNumber > 1 ? 's' : ''}\n            defaultSelectedOption={this.timePeriodOptions.find(i => i.value == this.selectedPeriod)}\n            withSearch={false}\n          />\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/types/components/design-system/checkbox-component/checkbox-component.d.ts

@@ -13,6 +13,7 @@ export declare class CheckboxComponent {
         name: string;
         label: string;
     }>;
+    checkedPropChangedHandler(newValue: boolean): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     handleBookingFormSubmitted(event: CustomEvent): void;

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

@@ -18,6 +18,8 @@ export declare class MultiSelectDropdown {
         value: string[];
         name: string;
     }>;
+    areOptionsEqual(arr1: DropdownOption[], arr2: DropdownOption[]): boolean;
+    optionsChangedHandler(newValue: DropdownOption[]): void;
     componentDidLoad(): void;
     componentDidRender(): void;
     handleOutsideClick(event: MouseEvent): void;

package/dist/types/components/design-system/nylas-date-component/nylas-date-component.d.ts

@@ -14,6 +14,7 @@ export declare class NylasDateComponent {
     requiredError: string;
     value: string;
     error: string;
+    isDateValid: boolean;
     nylasFormInputChanged: EventEmitter<{
         value: string;
         name: string;

package/dist/types/components/design-system/time-period-selector/time-period-selector.d.ts

@@ -14,6 +14,9 @@ export declare class TimePeriodSelector {
         label: string;
         value: string;
     }[];
+    defaultSelectedPeriodChanged(newValue: string): void;
+    defaultSelectedNumberChanged(newValue: number): void;
+    timePeriodsChanged(newValue: string[]): void;
     componentDidLoad(): void;
     timePeriodChanged: EventEmitter<{
         number: number;

package/dist/types/components/scheduler-editor/nylas-booking-form-config/nylas-booking-form-config.d.ts

@@ -26,10 +26,12 @@ export declare class NylasBookingFormConfig {
     internals: ElementInternals;
     formFields: AdditionalFieldsInternal[];
     elementNameChangedHandler(newValue: string): void;
+    selectedConfigurationChangedHandler(newValue: Configuration): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    updateFormFields(config: Configuration): void;
     watchHandler(newValue: AdditionalFieldsInternal[]): void;
     findNextMissingNumber(arr: string[]): number;
     nylasFormDropdownChangedHandler(event: CustomEvent<{

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

@@ -34,6 +34,8 @@ export declare class NylasBufferTime {
         value: string;
         name: string;
     }>): void;
+    get isInternalsAvailable(): boolean;
+    updateFormValue(): void;
     renderPreview(): any;
     render(): any;
 }

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

@@ -22,6 +22,8 @@ export declare class NylasEventLocation {
     internals: ElementInternals;
     elementNameChangedHandler(newValue: string): void;
     selectedConfigurationChangedHandler(newValue: Configuration): void;
+    currentUserChangedHandler(newValue: User): void;
+    conferenceProvidersChanged(newValue: Record<string, string>): void;
     valueChanged: EventEmitter<{
         value: string;
         name: string;
@@ -33,6 +35,7 @@ export declare class NylasEventLocation {
     nylasFormDropdownChangedHandler(event: CustomEvent<{
         value: string;
     }>): void;
+    setLocationOptionsForProvider(provider: string): void;
     setDefaultLocationOption(eventConferencing: Conference | null, eventLocation: string): any;
     setDefaultGrantID(eventConferencing: Conference): any;
     setFormValue(value: string, name: string): void;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { Availability, Configuration, OpenHours, Participant } from '@nylas/core';
+import { Configuration, OpenHours, Participant, ParticipantAvailability } from '@nylas/core';
 export declare class NylasParticipantsCustomAvailability {
     host: HTMLNylasParticipantsCustomAvailabilityElement;
     private participantFormRef;
@@ -17,7 +17,7 @@ export declare class NylasParticipantsCustomAvailability {
             isOpen: boolean;
             openHours: OpenHours[];
             name: string;
-            availability?: Availability;
+            availability?: ParticipantAvailability;
             timezone?: string;
         };
     };

package/package.json

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

package/dist/nylas-web-elements/p-2fa604d7.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as s,h as t,H as a,a as n}from"./p-68c2fadf.js";import{a as o}from"./p-05f97bb8.js";const r=':host{display:block;width:inherit;--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}.dropdown{display:inline-block;width:100%;position:relative}.dropdown .dropdown-label{display:flex;align-items:center;gap:0.25rem;color:var(--nylas-base-800)}.dropdown span.error{color:var(--nylas-error);font-size:14px}.dropbtn{width:inherit;height:48px;color:black;padding:0.5rem;font-size:1rem;cursor:pointer;display:flex;gap:0.5rem;justify-content:space-between;align-items:center;background:transparent;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.dropbtn.focus{background:transparent}.dropbtn.error{border:1px solid var(--nylas-error)}.dropbtn:hover,.dropbtn:active{border:1px solid var(--nylas-primary)}.dropbtn:active{outline:2px solid var(--nylas-primary)}.dropbtn span.open{transform:rotate(90deg)}.dropbtn span.closed{transform:rotate(270deg)}.dropdown-content{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);width:100%;max-height:336px;overflow:auto;z-index:1;border-radius:4px;position:absolute;top:72px;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.0509803922);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1019607843)}.dropdown-content ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px}.dropdown-content ul li{padding:16px, 12px, 16px, 12px;color:black;padding:12px 16px;text-decoration:none;display:block;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;text-align:left;cursor:pointer}.dropdown-content ul li:hover,.dropdown-content ul li:focus{background-color:var(--nylas-base-100)}.dropdown-content ul li label{display:flex;align-items:center;gap:0.5rem}.dropdown-content ul li label input{margin:0}.selected-options{display:flex;flex-wrap:wrap;gap:0.5rem;padding:0.5rem 0;margin-top:0.25rem;background:var(--nylas-base-0)}.selected-options .selected-option{display:flex;align-items:center;gap:0.5rem;padding:4px 8px;border-radius:var(--nylas-border-radius-2x);background:var(--nylas-base-100);color:var(--nylas-base-800);font-size:16px;font-weight:500;line-height:1.5rem;letter-spacing:0.5px}.selected-options .selected-option button{background:transparent;border:none;cursor:pointer;padding:0}.selected-options .selected-option button:hover{color:var(--nylas-primary)}';const i=r;const d=class{constructor(t){e(this,t);this.selectedOptionsChanged=s(this,"selectedOptionsChanged",7);this.name=undefined;this.label=undefined;this.options=[];this.error="";this.availableOptions=this.options;this.isOpen=false;this.ariaActivedescendant="";this.shouldFocusFirstOption=false}componentDidLoad(){o("multi-select-dropdown","componentDidLoad");if(this.options){this.availableOptions=this.options}}componentDidRender(){o("multi-select-dropdown","componentDidRender");if(this.isOpen&&this.shouldFocusFirstOption){this.ariaActivedescendant=this.availableOptions[0]?.value;this.focusOption(0);this.shouldFocusFirstOption=false}}handleOutsideClick(e){const s=e.composedPath();const t=s.includes(this.el);if(!t&&this.isOpen){this.isOpen=false}}selectOption(e){this.availableOptions=this.availableOptions.map((s=>{if(s.value===e.value){s.selected=e.selected?false:true}return s}));const s=this.availableOptions.filter((e=>e.selected)).map((e=>e.value));this.selectedOptionsChanged.emit({value:s,name:this.name})}toggleDropdown(){this.isOpen=!this.isOpen;if(this.isOpen){this.shouldFocusFirstOption=true}else{this.ariaActivedescendant=""}}handleSelectButtonKeyDown(e){switch(e.key){case"ArrowDown":case"Enter":e.preventDefault();if(!this.isOpen){this.toggleDropdown()}break;case"Escape":this.isOpen=false;break}}handleListboxKeydown(e){const s=this.availableOptions;const t=s.findIndex((e=>e.value===this.ariaActivedescendant));switch(e.key){case"ArrowDown":case"Tab":if(!e.shiftKey){e.preventDefault();const a=t+1<s.length?t+1:0;this.ariaActivedescendant=s[a].value;this.focusOption(a)}else{e.preventDefault();const a=t-1>=0?t-1:s.length-1;this.ariaActivedescendant=s[a].value;this.focusOption(a)}break;case"ArrowUp":e.preventDefault();const a=t-1>=0?t-1:s.length-1;this.ariaActivedescendant=s[a].value;this.focusOption(a);break;case"Enter":e.preventDefault();if(this.ariaActivedescendant){this.selectOption(s[t])}break;case"Escape":this.isOpen=false;break}}focusOption(e){const s=this.availableOptions[e];if(!s)return;const t=s.value;const a=this.el.shadowRoot?.getElementById(t);if(a){a.focus();a.scrollIntoView({behavior:"smooth",block:"nearest"})}}getSelectedOptions(){return this.availableOptions.filter((e=>e.selected))}renderOption(e){return t("li",{key:e.value,id:e.value,role:"option",tabindex:"0","aria-selected":e.selected?"true":"false",onClick:s=>{s.stopImmediatePropagation();this.selectOption(e)},class:{selected:!!e.selected}},t("label",{htmlFor:e.value},t("input",{"aria-hidden":"true",id:e.value,type:"checkbox",checked:e.selected}),t("span",null,e.label)))}render(){return t(a,{key:"e1d4d14ecbb535efa9c01bbd472648b0a11f80f0"},t("div",{key:"4fa54bb57eea3f45d49d0864e11ca20bb6b9b16c",class:"dropdown",part:"msd_dropdown"},t("label",{key:"dd418efe1b38427042f1f88b9fd615ee89c9f5d9",class:"dropdown-label"},this.label,t("slot",{key:"a8cd3f9fd40a3b77683c636b3b835e0cbd738981",name:"label-icon","aria-hidden":"true"})),t("button",{key:"d39f657c45ecd246018f4c5db904ad37d475634b",name:this.name,part:`msd_dropdown-button ${this.error?"msd_dropdown-button--error":""}`,class:{dropbtn:true,open:this.isOpen,error:!!this.error},onClick:()=>this.toggleDropdown(),"aria-haspopup":"listbox","aria-expanded":this.isOpen?"true":"false","aria-label":this.name,onKeyDown:e=>this.handleSelectButtonKeyDown(e)},t("slot",{key:"45f912fd627eb75e06446a782d91b27bf138677c",name:"select-icon","aria-hidden":"true"}),t("span",{key:"8271bafba127888d6646b31749292b049e190589",class:"selected-option",part:"msd_dropdown-button-selected-label"},this.getSelectedOptions().length>1?`Multiple options selected`:this.availableOptions.filter((e=>e.selected))[0]?.label??this.availableOptions[0]?.label),t("span",{key:"75caecf1bffad204acab61b8d8809b03a9dbeb73",class:this.isOpen?"open":"closed","aria-hidden":"true"},t("chevron-icon",{key:"cc9faf08225b9c73481d27a9b3f6e7a43b379c25",width:"16",height:"16"}))),this.error?t("span",{class:"error"},this.error):null,this.isOpen?null:t("div",{class:"selected-options"},this.getSelectedOptions().map((e=>t("span",{class:"selected-option"},e.label,t("button",{key:e.label,onClick:()=>this.selectOption(e)},t("close-icon",null)))))),this.isOpen?t("div",{class:"dropdown-content",part:"msd_dropdown-content"},t("ul",{tabindex:"-1",role:"listbox","aria-label":this.name,"aria-multiselectable":true,"aria-activedescendant":this.ariaActivedescendant,onKeyDown:e=>this.handleListboxKeydown(e)},this.availableOptions.map((e=>this.renderOption(e))))):null))}get el(){return n(this)}};d.style=i;export{d as multi_select_dropdown};
-//# sourceMappingURL=p-2fa604d7.entry.js.map

package/dist/nylas-web-elements/p-2fa604d7.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["multiSelectDropdownCss","MultiSelectDropdownStyle0","MultiSelectDropdown","this","options","componentDidLoad","debug","availableOptions","componentDidRender","isOpen","shouldFocusFirstOption","ariaActivedescendant","value","focusOption","handleOutsideClick","event","path","composedPath","isClickInside","includes","el","selectOption","option","map","o","selected","selectedOptions","filter","selectedOptionsChanged","emit","name","toggleDropdown","handleSelectButtonKeyDown","key","preventDefault","handleListboxKeydown","e","items","currentIndex","findIndex","item","shiftKey","nextIndex","length","prevIndex","index","elementId","element","shadowRoot","getElementById","focus","scrollIntoView","behavior","block","getSelectedOptions","renderOption","h","id","role","tabindex","onClick","stopImmediatePropagation","class","htmlFor","type","checked","label","render","Host","part","error","dropbtn","open","onKeyDown","width","height"],"sources":["src/components/design-system/multi-select-dropdown/multi-select-dropdown.scss?tag=multi-select-dropdown&encapsulation=shadow","src/components/design-system/multi-select-dropdown/multi-select-dropdown.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  width: inherit;\n  @include default-css-variables;\n}\n\n.dropdown {\n  display: inline-block;\n  width: 100%;\n  position: relative;\n\n  .dropdown-label {\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n    color: var(--nylas-base-800);\n  }\n\n  span.error {\n    color: var(--nylas-error);\n    font-size: 14px;\n  }\n}\n\n.dropbtn {\n  width: inherit;\n  height: 48px;\n  color: black;\n  padding: 0.5rem;\n  font-size: 1rem;\n  cursor: pointer;\n  display: flex;\n  gap: 0.5rem;\n  justify-content: space-between;\n  align-items: center;\n  background: transparent;\n  border: 1px solid var(--nylas-base-200);\n  border-radius: var(--nylas-border-radius-2x);\n\n  &.focus {\n    background: transparent;\n  }\n\n  &.error {\n    border: 1px solid var(--nylas-error);\n  }\n\n  &:hover,\n  &:active {\n    border: 1px solid var(--nylas-primary);\n  }\n\n  &:active {\n    outline: 2px solid var(--nylas-primary);\n  }\n\n  span {\n    &.open {\n      transform: rotate(90deg);\n    }\n\n    &.closed {\n      transform: rotate(270deg);\n    }\n  }\n}\n\n.dropdown-content {\n  display: block;\n  margin-top: 0.5rem;\n  background-color: var(--nylas-base-0);\n  width: 100%;\n  max-height: 336px;\n  overflow: auto;\n  z-index: 1;\n  border-radius: 4px;\n  position: absolute;\n  top: calc(48px + 24px);\n  box-shadow: 0px 4px 6px -2px #0000000d;\n  box-shadow: 0px 10px 15px -3px #0000001a;\n}\n\n.dropdown-content ul {\n  padding: 0;\n  list-style-type: none;\n  color: var(--nylas-base-900);\n  max-height: 336px;\n\n  li {\n    padding: 16px, 12px, 16px, 12px;\n    color: black;\n    padding: 12px 16px;\n    text-decoration: none;\n    display: block;\n    font-family: inherit;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n    letter-spacing: 0px;\n    text-align: left;\n    cursor: pointer;\n\n    &:hover,\n    &:focus {\n      background-color: var(--nylas-base-100);\n    }\n\n    label {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n\n      input {\n        margin: 0;\n      }\n    }\n  }\n}\n\n.selected-options {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  padding: 0.5rem 0;\n  margin-top: 0.25rem;\n  background: var(--nylas-base-0);\n\n  .selected-option {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 4px 8px;\n    border-radius: var(--nylas-border-radius-2x);\n    background: var(--nylas-base-100);\n    color: var(--nylas-base-800);\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 1.5rem;\n    letter-spacing: 0.5px;\n\n    button {\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      padding: 0;\n\n      &:hover {\n        color: var(--nylas-primary);\n      }\n    }\n  }\n}\n","import { debug } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h } from '@stencil/core';\n\ninterface DropdownOption {\n  label: string;\n  value: string;\n  selected?: boolean; // Add a selected flag to each option\n}\n\n@Component({\n  tag: 'multi-select-dropdown',\n  styleUrl: 'multi-select-dropdown.scss',\n  shadow: true,\n})\nexport class MultiSelectDropdown {\n  @Element() el!: HTMLElement;\n\n  // Props\n  /**\n   * The name of the dropdown\n   */\n  @Prop() name!: string;\n\n  /**\n   * The label of the dropdown\n   */\n  @Prop() label?: string;\n\n  /**\n   * The options to display in the dropdown\n   */\n  @Prop() options: DropdownOption[] = [];\n\n  /**\n   * Error message to display\n   */\n  @Prop() error?: string = '';\n\n  // States\n  /**\n   * The copy of the options to display in the dropdown\n   */\n  @State() availableOptions: DropdownOption[] = this.options;\n  /**\n   * The open state of the dropdown\n   */\n  @State() isOpen: boolean = false;\n  /**\n   * The aria-activedescendant attribute for the listbox element to indicate the currently active\n   */\n  @State() ariaActivedescendant: string = '';\n\n  /**\n   * This flag is used to focus the first option when the dropdown is opened\n   * and reset after the first option is focused\n   */\n  @State() shouldFocusFirstOption: boolean = false;\n\n  // Events\n  /**\n   * This event is fired when the selected options are changed\n   */\n  @Event({ bubbles: true, composed: true }) selectedOptionsChanged!: EventEmitter<{\n    value: string[];\n    name: string;\n  }>;\n\n  // Lifecycle methods\n  componentDidLoad() {\n    debug('multi-select-dropdown', 'componentDidLoad');\n    if (this.options) {\n      this.availableOptions = this.options;\n    }\n  }\n\n  componentDidRender() {\n    debug('multi-select-dropdown', 'componentDidRender');\n    if (this.isOpen && this.shouldFocusFirstOption) {\n      // The dropdown is open and we should focus the first option\n      this.ariaActivedescendant = this.availableOptions[0]?.value;\n      this.focusOption(0);\n      // Reset the flag\n      this.shouldFocusFirstOption = false;\n    }\n  }\n\n  // Event listeners\n  @Listen('click', { target: 'document', capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    // Get the path of the event\n    const path = event.composedPath();\n\n    // Check if the path includes the host element\n    const isClickInside = path.includes(this.el);\n\n    if (!isClickInside && this.isOpen) {\n      this.isOpen = false;\n    }\n  }\n\n  // Methods\n\n  selectOption(option: DropdownOption): void {\n    this.availableOptions = this.availableOptions.map(o => {\n      if (o.value === option.value) {\n        o.selected = option.selected ? false : true;\n      }\n      return o;\n    });\n    const selectedOptions = this.availableOptions.filter(o => o.selected).map(o => o.value);\n    this.selectedOptionsChanged.emit({\n      value: selectedOptions,\n      name: this.name,\n    });\n  }\n\n  toggleDropdown(): void {\n    this.isOpen = !this.isOpen;\n    if (this.isOpen) {\n      this.shouldFocusFirstOption = true;\n    } else {\n      this.ariaActivedescendant = '';\n    }\n  }\n\n  handleSelectButtonKeyDown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'Enter':\n        event.preventDefault();\n        if (!this.isOpen) {\n          this.toggleDropdown();\n        }\n        break;\n      case 'Escape':\n        this.isOpen = false;\n        break;\n    }\n  }\n\n  handleListboxKeydown(e: KeyboardEvent) {\n    const items = this.availableOptions;\n    const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n\n    switch (e.key) {\n      case 'ArrowDown':\n      case 'Tab':\n        if (!e.shiftKey) {\n          e.preventDefault();\n          const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n          this.ariaActivedescendant = items[nextIndex].value;\n          this.focusOption(nextIndex);\n        } else {\n          e.preventDefault();\n          const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n          this.ariaActivedescendant = items[prevIndex].value;\n          this.focusOption(prevIndex);\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n        this.ariaActivedescendant = items[prevIndex].value;\n        this.focusOption(prevIndex);\n        break;\n      case 'Enter':\n        e.preventDefault();\n        if (this.ariaActivedescendant) {\n          this.selectOption(items[currentIndex]);\n        }\n        break;\n      case 'Escape':\n        this.isOpen = false;\n        break;\n    }\n  }\n\n  focusOption(index: number) {\n    const option = this.availableOptions[index];\n    if (!option) return; // Guard clause in case index is out of bounds\n\n    const elementId = option.value;\n    const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n    if (element) {\n      element.focus(); // Set focus on the element\n      element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n    }\n  }\n\n  getSelectedOptions() {\n    return this.availableOptions.filter(option => option.selected);\n  }\n\n  renderOption(option: DropdownOption) {\n    return (\n      <li\n        key={option.value}\n        id={option.value}\n        role=\"option\"\n        tabindex=\"0\"\n        aria-selected={option.selected ? 'true' : 'false'}\n        onClick={e => {\n          e.stopImmediatePropagation();\n          this.selectOption(option);\n        }}\n        class={{ selected: !!option.selected }}\n      >\n        <label htmlFor={option.value}>\n          <input aria-hidden=\"true\" id={option.value} type=\"checkbox\" checked={option.selected} />\n          <span>{option.label}</span>\n        </label>\n      </li>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"dropdown\" part=\"msd_dropdown\">\n          <label class=\"dropdown-label\">\n            {this.label}\n            <slot name=\"label-icon\" aria-hidden=\"true\"></slot>\n          </label>\n          <button\n            name={this.name}\n            part={`msd_dropdown-button ${this.error ? 'msd_dropdown-button--error' : ''}`}\n            class={{ dropbtn: true, open: this.isOpen, error: !!this.error }}\n            onClick={() => this.toggleDropdown()}\n            aria-haspopup=\"listbox\"\n            aria-expanded={this.isOpen ? 'true' : 'false'}\n            aria-label={this.name}\n            onKeyDown={e => this.handleSelectButtonKeyDown(e)}\n          >\n            <slot name=\"select-icon\" aria-hidden=\"true\"></slot>\n            <span class=\"selected-option\" part=\"msd_dropdown-button-selected-label\">\n              {this.getSelectedOptions().length > 1 ? `Multiple options selected` : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.availableOptions[0]?.label}\n            </span>\n            <span class={this.isOpen ? 'open' : 'closed'} aria-hidden=\"true\">\n              <chevron-icon width=\"16\" height=\"16\" />\n            </span>\n          </button>\n          {this.error ? <span class=\"error\">{this.error}</span> : null}\n          {this.isOpen ? null : (\n            <div class={'selected-options'}>\n              {this.getSelectedOptions().map(option => (\n                <span class=\"selected-option\">\n                  {option.label}\n                  <button key={option.label} onClick={() => this.selectOption(option)}>\n                    <close-icon />\n                  </button>\n                </span>\n              ))}\n            </div>\n          )}\n          {this.isOpen ? (\n            <div class=\"dropdown-content\" part=\"msd_dropdown-content\">\n              <ul\n                tabindex=\"-1\"\n                role=\"listbox\"\n                aria-label={this.name}\n                aria-multiselectable={true}\n                aria-activedescendant={this.ariaActivedescendant}\n                onKeyDown={e => this.handleListboxKeydown(e)}\n              >\n                {this.availableOptions.map(option => this.renderOption(option))}\n              </ul>\n            </div>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nylas-web-elements/p-52b9c0cb.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as a,h as s,a as r}from"./p-68c2fadf.js";import{n as i}from"./p-05f97bb8.js";const t='.checkbox-container{--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;display:flex;flex-direction:column;gap:0.5rem}.checkbox-container p.error{color:var(--nylas-error);font-size:14px;font-weight:400;line-height:20px;font-family:var(--nylas-font-family);margin:0}label{display:flex;align-items:center;font-family:var(--nylas-font-family);cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}label input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}label input[type=checkbox]:focus~.checkmark,label input[type=checkbox]:hover~.checkmark{border-color:var(--nylas-primary)}label input[type=checkbox]:checked~.checkmark{color:var(--nylas-base-0);background:var(--nylas-primary) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border:2px solid var(--nylas-primary)}label .checkmark{border-radius:var(--nylas-border-radius);border:2px solid var(--nylas-base-800);position:absolute;left:0;top:2px;width:18px;height:18px;cursor:pointer;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}label .label{margin-left:32px;font-size:16px;font-weight:400;color:var(--nylas-base-800);line-height:24px}';const l=t;const n=class{constructor(s){e(this,s);this.nylasFormCheckboxToggled=a(this,"nylasFormCheckboxToggled",7);this.componentType="checkbox";this.name="checkbox";this.checked=undefined;this.label="";this.required=false;this.isChecked=undefined;this.error=""}componentWillLoad(){this.el.setAttribute("component-type",this.componentType)}componentDidLoad(){this.isChecked=this.checked||false}handleBookingFormSubmitted(e){if(this.required&&!this.isChecked){this.error=`${this.label} is required.`;return}if(this.error){e.preventDefault()}}toggleCheck(){this.error="";this.isChecked=!this.isChecked;this.nylasFormCheckboxToggled.emit({checked:this.isChecked,name:this.name,label:this.label})}render(){return s("div",{key:"f4dfab5a5da9f9c79424930bfd5497c24dc1bfe5",class:"checkbox-container"},s("label",{key:"78e192f2eddcfd788ac16e80be3ac0b9c47e6f6a"},s("input",{key:"6e3aa50fb6542cb134dc5454e9fc0052be22e36f",type:"checkbox",name:this.name,checked:this.isChecked,onChange:()=>this.toggleCheck()}),s("span",{key:"abbd103b06bf934eff294b443b468e446901c371",class:"checkmark"}),s("slot",{key:"f11d669ba02b705ba7679985e83b91086a17ccc9",name:"label"},s("span",{key:"1298c44fbbe9ce75638b00ac07e6e83bab1394c2",class:"label"},this.label))),this.error&&s("p",{class:"error"},this.error))}get el(){return r(this)}};n.style=l;const o=':host{display:block;height:auto;--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:100%}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%;flex-direction:column;gap:4px;font-family:var(--nylas-font-family);font-size:16px;color:var(--nylas-base-800)}label.error{color:var(--nylas-error)}label span.required{color:var(--nylas-error);padding:0 0.25rem}label p{margin:0}label .error{color:var(--nylas-error)}.input_wrapper{display:flex;align-items:center;gap:1rem}input[type=date]{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%;width:100%;width:-moz-available;width:-webkit-fill-available}input[type=date]:focus{outline-color:var(--nylas-primary)}input[type=date].error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}input[type=date].error::placeholder{font-weight:400}input[type=date]::placeholder{color:var(--nylas-base-300)}';const h=o;const c={date:"YYYY-MM-DD"};const d=class{constructor(s){e(this,s);this.nylasFormInputChanged=a(this,"nylasFormInputChanged",7);this.nylasFormInputFocused=a(this,"nylasFormInputFocused",7);this.nylasFormInputBlurred=a(this,"nylasFormInputBlurred",7);this.name="input";this.defaultValue=undefined;this.label="";this.placeholder=c["date"];this.required=false;this.readOnly=false;this.autoFocus=false;this.pattern=undefined;this.maxLength=255;this.patternError="";this.requiredError="";this.value=undefined;this.error=""}handleDefaultValueChange(e){this.value=i(e);if(this.value){this.validatePattern(this.value)}}componentDidLoad(){this.value=i(this.defaultValue||"");if(this.value){this.validatePattern(this.value)}}handleBookingFormSubmitted(e){this.validatePattern(this.value);if(this.error){e.preventDefault()}}async handleFormSubmitted(e){if(this.el?.getAttribute("data-page-styling")){this.validatePattern(this.value);if(this.error){e.preventDefault()}}}handleInput(e){this.error="";this.value=i(e.target.value);this.nylasFormInputChanged.emit({value:this.value,name:this.name,label:this.label,error:this.error,type:"date"})}handleBlur(){this.nylasFormInputBlurred.emit({value:this.value,name:this.name})}handleFocus(){this.nylasFormInputFocused.emit({value:this.value,name:this.name})}validatePattern(e){this.error="";if(this.required&&!e){this.error=this.requiredError||"This field is required.";return}if(!this.pattern||!e&&!this.required)return;if(this.pattern.test(e)){this.error=""}else{this.error=this.patternError||"Invalid format."}}render(){return s("label",{key:"959c6b772ea4f2f4706d72255d1e36ea8d4fcbd3",part:"ic__label",class:{error:!!this.error}},this.label&&s("p",null,s("span",{class:"label"},this.label),this.required&&s("span",{class:"required"},"*")),s("div",{key:"a018a19fe2a77416d7ac4d9c7ea84cb0560a70de",part:"ic__input_wrapper",class:"input_wrapper"},s("input",{key:"7952451a1397dc1a08ac5dc6a251d452a882981b",type:"date",name:this.name,part:"ic__date",readOnly:this.readOnly,autoFocus:this.autoFocus,value:this.value,maxLength:this.maxLength,placeholder:this.placeholder,class:{error:!!this.error},onInput:e=>this.handleInput(e),onFocus:()=>this.handleFocus(),onBlur:()=>this.handleBlur()}),s("slot",{key:"9730db9ef73e570667c69879ce457c45b5e196a5",name:"additional-input"})),this.error&&s("span",{class:"error help-text"},this.error))}get el(){return r(this)}static get watchers(){return{defaultValue:["handleDefaultValueChange"]}}};d.style=h;const b='.radio-group{display:flex;flex-direction:column;gap:0.5rem;--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}.radio-group slot[name=label]{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%;font-size:16px}.radio-group slot[name=label].error{color:var(--nylas-error)}.radio-group slot[name=label] span.required{color:var(--nylas-error);padding:0 0.25rem}.radio-group slot[name=label] p{margin:0}.radio-group slot[name=label] p.error{color:var(--nylas-error)}.radio-group slot[name=label] .error{color:var(--nylas-error)}.radio-group span.error{color:var(--nylas-error);font-size:14px;font-weight:400;line-height:20px;font-family:var(--nylas-font-family)}.radio-group label{display:flex;font-family:var(--nylas-font-family);cursor:pointer}.radio-group label .radio-option{display:flex;align-items:flex-start;gap:0.5rem}.radio-group label .radio-option input[type=radio]{cursor:pointer}.radio-group label .radio-option input[type=radio i]{width:20px;height:20px;color:var(--nylas-primary)}.radio-group label .radio-option p{display:flex;flex-direction:column;gap:0.5rem;margin:0}.radio-group label .radio-option p .title{font-size:16px;font-weight:500;line-height:20px;color:var(--nylas-base-800)}.radio-group label .radio-option p .description{font-size:14px;font-weight:400;line-height:20px;color:var(--nylas-base-600)}';const p=b;const f=class{constructor(s){e(this,s);this.nylasFormRadioChanged=a(this,"nylasFormRadioChanged",7);this.componentType="radio-group";this.name="radio-group";this.options=[];this.defaultSelectedValue="";this.label=undefined;this.required=false;this.selectedValue=undefined;this.error=""}handleDefaultSelectedValueChange(e){this.selectedValue=e}componentDidLoad(){this.selectedValue=this.defaultSelectedValue}handleBookingFormSubmitted(e){if(this.required&&!this.selectedValue){this.error=`${this.label} is required.`;return}if(this.error){e.preventDefault()}}componentWillLoad(){this.el.setAttribute("component-type",this.componentType)}handleChange(e){this.error="";this.selectedValue=e;this.nylasFormRadioChanged.emit({value:e,name:this.name,label:this.label})}render(){return s("div",{key:"42720c3b8d691a39d7667afe105c9fa8dd12c1a5",class:"radio-group"},s("slot",{key:"6b2771531918f8391b9cd53625ae7e3194754008",name:"label"},this.label&&s("p",{class:{error:!!this.error}},s("span",{class:"label"},this.label),this.required&&s("span",{class:"required"},"*"))),this.options.map((e=>s("label",null,s("div",{class:"radio-option"},s("input",{type:"radio",name:this.name,value:e.value,checked:this.selectedValue===e.value,onChange:()=>this.handleChange(e.value)}),s("p",null,s("span",{class:"title"},e.label),s("span",{class:"description"},e.description)))))),this.error&&s("span",{class:"error help-text"},this.error))}get el(){return r(this)}static get watchers(){return{defaultSelectedValue:["handleDefaultSelectedValueChange"]}}};f.style=p;export{n as checkbox_component,d as nylas_date_component,f as radio_button_group};
-//# sourceMappingURL=p-52b9c0cb.entry.js.map

package/dist/nylas-web-elements/p-52b9c0cb.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["checkboxComponentCss","CheckboxComponentStyle0","CheckboxComponent","this","componentType","componentWillLoad","el","setAttribute","componentDidLoad","isChecked","checked","handleBookingFormSubmitted","event","required","error","label","preventDefault","toggleCheck","nylasFormCheckboxToggled","emit","name","render","h","key","class","type","onChange","nylasDateComponentCss","NylasDateComponentStyle0","DefaultPlaceholder","date","NylasDateComponent","handleDefaultValueChange","newValue","value","sanitize","validatePattern","defaultValue","handleFormSubmitted","getAttribute","handleInput","e","target","nylasFormInputChanged","handleBlur","nylasFormInputBlurred","handleFocus","nylasFormInputFocused","requiredError","pattern","test","patternError","part","readOnly","autoFocus","maxLength","placeholder","onInput","onFocus","onBlur","radioButtonGroupCss","RadioButtonGroupStyle0","RadioButtonGroup","handleDefaultSelectedValueChange","selectedValue","defaultSelectedValue","handleChange","nylasFormRadioChanged","options","map","option","description"],"sources":["src/components/design-system/checkbox-component/checkbox-component.scss?tag=checkbox-component&encapsulation=shadow","src/components/design-system/checkbox-component/checkbox-component.tsx","src/components/design-system/nylas-date-component/nylas-date-component.scss?tag=nylas-date-component&encapsulation=shadow","src/components/design-system/nylas-date-component/nylas-date-component.tsx","src/components/design-system/radio-button-group/radio-button-group.scss?tag=radio-button-group&encapsulation=shadow","src/components/design-system/radio-button-group/radio-button-group.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n.checkbox-container {\n  @include default-css-variables;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n\n  p.error {\n    color: var(--nylas-error);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n    font-family: var(--nylas-font-family);\n    margin: 0;\n  }\n}\n\nlabel {\n  display: flex;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n  cursor: pointer;\n  position: relative;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n\n  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n\n    &:focus ~ .checkmark,\n    &:hover ~ .checkmark {\n      border-color: var(--nylas-primary);\n    }\n\n    &:checked ~ .checkmark {\n      color: var(--nylas-base-0);\n      background: var(--nylas-primary)\n        url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+)\n        50% 40% no-repeat;\n      border: 2px solid var(--nylas-primary);\n    }\n  }\n\n  .checkmark {\n    border-radius: var(--nylas-border-radius);\n    border: 2px solid var(--nylas-base-800);\n    position: absolute;\n    left: 0;\n    top: 2px;\n    width: 18px;\n    height: 18px;\n    cursor: pointer;\n    pointer-events: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n\n  .label {\n    margin-left: 32px;\n    font-size: 16px;\n    font-weight: 400;\n    color: var(--nylas-base-800);\n    line-height: 24px;\n  }\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Listen, Element } from '@stencil/core';\n\n/**\n * The `checkbox-component` component is a UI component that allows users to select a checkbox.\n * This component is used in the scheduling form to input checkbox type inputs.\n */\n@Component({\n  tag: 'checkbox-component',\n  styleUrl: 'checkbox-component.scss',\n  shadow: true,\n})\nexport class CheckboxComponent {\n  @Element() el!: HTMLElement;\n  private readonly componentType: string = 'checkbox';\n\n  /**\n   * The name of the checkbox. This is used to identify the checkbox when submitting a form.\n   */\n  @Prop() name: string = 'checkbox';\n  /**\n   * The default value of the checkbox. This is the value that is displayed when the checkbox is rendered.\n   */\n  @Prop() checked?: boolean;\n  /**\n   * The label of the checkbox. This is displayed next to the checkbox.\n   */\n  @Prop() label: string = '';\n  /**\n   * Whether the checkbox is required. If true, the checkbox must be checked when submitting a form.\n   * Default is false. If the checkbox is required and not checked, an error message is displayed.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * The checked state of the checkbox.\n   */\n  @State() isChecked!: boolean;\n  /**\n   * The error message state.\n   */\n  @State() error: string = '';\n\n  /**\n   * This event is fired when the checkbox is toggled.\n   */\n  @Event() nylasFormCheckboxToggled!: EventEmitter<{\n    checked: boolean;\n    name: string;\n    label: string;\n  }>;\n\n  // Lifecycle events\n  componentWillLoad() {\n    this.el.setAttribute('component-type', this.componentType);\n  }\n\n  componentDidLoad() {\n    this.isChecked = this.checked || false;\n  }\n\n  // Event listeners\n  /**\n   * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n   */\n  @Listen('bookingFormSubmitted', { target: 'document' })\n  handleBookingFormSubmitted(event: CustomEvent) {\n    if (this.required && !this.isChecked) {\n      this.error = `${this.label} is required.`;\n      return;\n    }\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  // Methods\n  toggleCheck() {\n    this.error = '';\n    this.isChecked = !this.isChecked;\n    this.nylasFormCheckboxToggled.emit({\n      checked: this.isChecked,\n      name: this.name,\n      label: this.label,\n    });\n  }\n\n  render() {\n    return (\n      <div class=\"checkbox-container\">\n        <label>\n          <input type=\"checkbox\" name={this.name} checked={this.isChecked} onChange={() => this.toggleCheck()} />\n          <span class=\"checkmark\"></span>\n          <slot name=\"label\">\n            <span class=\"label\">{this.label}</span>\n          </slot>\n        </label>\n        {this.error && <p class=\"error\">{this.error}</p>}\n      </div>\n    );\n  }\n}\n","@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n:host {\n  display: block;\n  height: auto;\n  @include default-css-variables;\n  width: 100%;\n}\n\nlabel {\n  @include input-label;\n  flex-direction: column;\n  gap: 4px;\n  font-family: var(--nylas-font-family);\n  font-size: 16px;\n  color: var(--nylas-base-800);\n\n  p {\n    margin: 0;\n  }\n\n  .error {\n    color: var(--nylas-error);\n  }\n}\n\n.input_wrapper {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\ninput[type='date'] {\n  @include textfield;\n  width: 100%;\n  width: -moz-available;\n  width: -webkit-fill-available;\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\nimport { sanitize } from '@/utils/utils';\n\nconst DefaultPlaceholder = {\n  date: 'YYYY-MM-DD',\n};\n\n/**\n * The `nylas-date-component` component is a UI component that allows users to input text, email, or phone number values.\n * This component is used in the scheduling form to input text, email and phone number type inputs.\n */\n\n@Component({\n  tag: 'nylas-date-component',\n  styleUrl: 'nylas-date-component.scss',\n  shadow: true,\n})\nexport class NylasDateComponent {\n  /**\n   * The host element\n   */\n  @Element() el!: HTMLElement;\n  /**\n   * The name of the input. This is used to identify the input when submitting a form.\n   */\n  @Prop() name: string = 'input';\n  /**\n   * The default value of the input. This is the value that is displayed when the input is rendered.\n   */\n  @Prop() defaultValue?: string;\n  /**\n   * The label of the input. This is displayed above the input.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The placeholder of the input. This is displayed when the input is empty.\n   */\n  @Prop() placeholder: string = DefaultPlaceholder['date'];\n  /**\n   * Whether the input is required. If true, the input must have a value when submitting a form.\n   * Default is false. If the input is required and the value is empty, an error message is displayed.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * Whether the input is read-only. If true, the input cannot be edited.\n   * Default is false.\n   */\n  @Prop() readOnly: boolean = false;\n  /**\n   * Whether the input should be focused when rendered.\n   * Default is false. If true, the input is focused when rendered.\n   * Use this to set the focus on the first input in a form.\n   */\n  @Prop() autoFocus: boolean = false;\n  /**\n   * The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\n   * Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'.\n   */\n  @Prop() pattern?: RegExp;\n  /**\n   * The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed.\n   * Default is 255.\n   */\n  @Prop() maxLength: number = 255;\n  /**\n   * The error message to display when the value does not match the pattern.\n   * Default is 'Invalid <field> format.' where <field> is the input label.\n   */\n  @Prop() patternError: string = '';\n\n  /**\n   * This error message is displayed when the input value is empty and the input is required.\n   */\n  @Prop() requiredError: string = '';\n\n  /**\n   * The input value state.\n   */\n  @State() value!: string;\n  /**\n   * The error message state.\n   */\n  @State() error: string = '';\n\n  /**\n   * This event is fired when the input value is changed.\n   * The scheduling form listens for this event to validate the input value and submit the form.\n   * If using outside of the scheduling form, listen for this event to validate the input value\n   * and handle the input value change.\n   */\n  @Event() nylasFormInputChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    label: string;\n    type: string;\n    error: string;\n  }>;\n\n  @Event() nylasFormInputFocused!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  @Event() nylasFormInputBlurred!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  // Lifecycle methods\n  @Watch('defaultValue')\n  handleDefaultValueChange(newValue: string) {\n    this.value = sanitize(newValue);\n    if (this.value) {\n      this.validatePattern(this.value);\n    }\n  }\n\n  componentDidLoad() {\n    this.value = sanitize(this.defaultValue || '');\n    if (this.value) {\n      this.validatePattern(this.value);\n    }\n  }\n\n  // Event listeners\n  /**\n   * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n   */\n  @Listen('bookingFormSubmitted', { target: 'document' })\n  handleBookingFormSubmitted(event: CustomEvent) {\n    this.validatePattern(this.value);\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  @Listen('formSubmitted', { target: 'document' })\n  async handleFormSubmitted(event: CustomEvent) {\n    if (this.el?.getAttribute('data-page-styling')) {\n      this.validatePattern(this.value);\n      if (this.error) {\n        event.preventDefault();\n      }\n    }\n  }\n\n  // Methods\n  handleInput(e: Event) {\n    this.error = '';\n    this.value = sanitize((e.target as HTMLInputElement).value);\n    this.nylasFormInputChanged.emit({\n      value: this.value,\n      name: this.name,\n      label: this.label,\n      error: this.error,\n      type: 'date',\n    });\n  }\n\n  handleBlur() {\n    this.nylasFormInputBlurred.emit({\n      value: this.value,\n      name: this.name,\n    });\n  }\n\n  handleFocus() {\n    this.nylasFormInputFocused.emit({\n      value: this.value,\n      name: this.name,\n    });\n  }\n\n  validatePattern(value: string) {\n    // Reset error\n    this.error = '';\n    // Check if the field is required and value is empty\n    if (this.required && !value) {\n      this.error = this.requiredError || 'This field is required.';\n      return;\n    }\n    // Check if value matches pattern\n    if (!this.pattern || (!value && !this.required)) return;\n\n    if (this.pattern.test(value)) {\n      this.error = '';\n    } else {\n      this.error = this.patternError || 'Invalid format.';\n    }\n  }\n\n  render() {\n    return (\n      <label part=\"ic__label\" class={{ error: !!this.error }}>\n        {this.label && (\n          <p>\n            <span class=\"label\">{this.label}</span>\n            {this.required && <span class=\"required\">*</span>}\n          </p>\n        )}\n        <div part=\"ic__input_wrapper\" class=\"input_wrapper\">\n          <input\n            type=\"date\"\n            name={this.name}\n            part=\"ic__date\"\n            readOnly={this.readOnly}\n            autoFocus={this.autoFocus}\n            value={this.value}\n            maxLength={this.maxLength}\n            placeholder={this.placeholder}\n            class={{ error: !!this.error }}\n            onInput={e => this.handleInput(e)}\n            onFocus={() => this.handleFocus()}\n            onBlur={() => this.handleBlur()}\n          />\n          <slot name=\"additional-input\"></slot>\n        </div>\n        {this.error && <span class=\"error help-text\">{this.error}</span>}\n      </label>\n    );\n  }\n}\n","@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n.radio-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  @include default-css-variables;\n\n  slot[name='label'] {\n    @include input-label;\n    font-size: 16px;\n\n    p {\n      margin: 0;\n\n      &.error {\n        color: var(--nylas-error);\n      }\n    }\n\n    .error {\n      color: var(--nylas-error);\n    }\n  }\n\n  span.error {\n    color: var(--nylas-error);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n    font-family: var(--nylas-font-family);\n  }\n\n  label {\n    display: flex;\n\n    font-family: var(--nylas-font-family);\n    cursor: pointer;\n\n    .radio-option {\n      display: flex;\n      align-items: flex-start;\n      gap: 0.5rem;\n\n      input[type='radio'] {\n        cursor: pointer;\n      }\n\n      input[type='radio' i] {\n        width: 20px;\n        height: 20px;\n        color: var(--nylas-primary);\n      }\n\n      p {\n        display: flex;\n        flex-direction: column;\n        gap: 0.5rem;\n        margin: 0;\n\n        .title {\n          font-size: 16px;\n          font-weight: 500;\n          line-height: 20px;\n          color: var(--nylas-base-800);\n        }\n\n        .description {\n          font-size: 14px;\n          font-weight: 400;\n          line-height: 20px;\n          color: var(--nylas-base-600);\n        }\n      }\n    }\n  }\n}\n","// src/components/radio-group/radio-group.tsx\nimport { Component, h, Prop, State, Event, EventEmitter, Listen, Element, Watch } from '@stencil/core';\n\n/**\n * The `radio-button-group` component is a UI component that allows users to select a single option from a list of options.\n * This component is used in the scheduling form to input radio button type inputs.\n */\n@Component({\n  tag: 'radio-button-group',\n  styleUrl: 'radio-button-group.scss',\n  shadow: true,\n})\nexport class RadioButtonGroup {\n  @Element() el!: HTMLElement;\n  private readonly componentType: string = 'radio-group';\n\n  /**\n   * The name of the radio group. This is used to identify the radio group when submitting a form.\n   */\n  @Prop() name: string = 'radio-group';\n  /**\n   * The list of options in the radio group.\n   * Each option has a label and a value and an optional description.\n   */\n  @Prop() options: { label: string; value: string; description?: string }[] = [];\n  /**\n   * The default selected value of the radio group.\n   */\n  @Prop({ attribute: 'default-selected-value' }) defaultSelectedValue: string = '';\n  /**\n   * The label of the radio group. This is displayed above the radio group.\n   * Label is optional. You can also use the slot 'label' to add a label.\n   */\n  @Prop() label?: string;\n  /**\n   * Whether the radio group is required. If true, the radio group must have a value when submitting a form.\n   * Default is false. If the radio group is required and the value is empty, an error message is displayed.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * The selected value of the radio group.\n   */\n  @State() selectedValue!: string;\n  /**\n   * The error message state.\n   */\n  @State() error: string = '';\n  /**\n   * This event is fired when the selected value changes.\n   */\n  @Event() nylasFormRadioChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    label?: string;\n  }>;\n\n  @Watch('defaultSelectedValue')\n  handleDefaultSelectedValueChange(newValue: string) {\n    this.selectedValue = newValue;\n  }\n\n  // Lifecycle methods\n  componentDidLoad() {\n    this.selectedValue = this.defaultSelectedValue;\n  }\n\n  // Event listeners\n  /**\n   * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n   */\n  @Listen('bookingFormSubmitted', { target: 'document' })\n  handleBookingFormSubmitted(event: CustomEvent) {\n    if (this.required && !this.selectedValue) {\n      this.error = `${this.label} is required.`;\n      return;\n    }\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  componentWillLoad() {\n    this.el.setAttribute('component-type', this.componentType);\n  }\n\n  handleChange(value: string) {\n    this.error = '';\n    this.selectedValue = value;\n    this.nylasFormRadioChanged.emit({\n      value,\n      name: this.name,\n      label: this.label,\n    });\n  }\n\n  render() {\n    return (\n      <div class=\"radio-group\">\n        <slot name=\"label\">\n          {this.label && (\n            <p class={{ error: !!this.error }}>\n              <span class=\"label\">{this.label}</span>\n              {this.required && <span class=\"required\">*</span>}\n            </p>\n          )}\n        </slot>\n        {this.options.map(option => (\n          <label>\n            <div class=\"radio-option\">\n              <input type=\"radio\" name={this.name} value={option.value} checked={this.selectedValue === option.value} onChange={() => this.handleChange(option.value)} />\n              <p>\n                <span class=\"title\">{option.label}</span>\n                <span class=\"description\">{option.description}</span>\n              </p>\n            </div>\n          </label>\n        ))}\n        {this.error && <span class=\"error help-text\">{this.error}</span>}\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nylas-web-elements/p-9db69aed.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as r,a as o}from"./p-68c2fadf.js";import{a as i}from"./p-05f97bb8.js";const s=".time-period-selector.sc-time-period-selector{display:grid;gap:0.5rem;grid-template-columns:auto 1fr}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector,.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector{border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector{width:116px}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector{width:84px;display:flex;align-items:center}.time-period-selector.sc-time-period-selector select-dropdown#time-period.sc-time-period-selector::part(sd_dropdown-button){width:100%}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector::part(id_dropdown){width:inherit;height:100%}.time-period-selector.sc-time-period-selector input-dropdown#time-number.sc-time-period-selector::part(id_dropdown-input){border:none;border-radius:var(--nylas-border-radius-2x)}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector::part(id_dropdown-input){padding:17px;gap:1rem}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector::part(id_dropdown-content){width:100%;max-height:200px}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector::part(sd_dropdown){width:inherit}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector::part(sd_dropdown-button){padding:1rem;gap:1rem;justify-content:space-between}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector::part(sd_dropdown-content){width:100%;max-height:200px}";const d=s;const n={hours:"hour",days:"day",weeks:"week",months:"month"};const p=class{constructor(r){e(this,r);this.timePeriodChanged=t(this,"timePeriodChanged",7);this.timePeriods=["hour","day","week","month"];this.defaultSelectedPeriod=undefined;this.defaultSelectedNumber=undefined;this.selectedPeriod=this.defaultSelectedPeriod;this.selectedNumber=this.defaultSelectedNumber;this.numberOptions=this.calculateOptions(this.defaultSelectedPeriod||"hour").map((e=>({label:e.toString(),value:e.toString()})));this.timePeriodOptions=this.timePeriods.map((e=>({label:e,value:e})))}componentDidLoad(){this.selectedNumber=this.defaultSelectedNumber;this.selectedPeriod=this.defaultSelectedPeriod;const e=n[this.selectedPeriod]??this.selectedPeriod;const t=this.calculateOptions(e);this.numberOptions=t.map((e=>({label:e.toString(),value:e.toString()})))}calculateOptions(e){switch(e){case"hour":return Array.from({length:23},((e,t)=>t+1));case"minute":return Array.from({length:13},((e,t)=>t*5));case"day":return Array.from({length:30},((e,t)=>t+1));case"week":return Array.from({length:4},((e,t)=>t+1));case"month":return Array.from({length:12},((e,t)=>t+1));default:return[]}}inputOptionChangedHandler(e){i("time-period-selector","inputOptionChangedHandler",e.detail);const{value:t,name:r}=e.detail;if(r==="time-number"){this.selectedNumber=t?parseInt(t):this.defaultSelectedNumber}const o={number:this.selectedNumber,period:this.selectedPeriod};this.timePeriodChanged.emit(o)}nylasFormDropdownChangedHandler(e){i("time-period-selector","nylasFormDropdownChangedHandler",e.detail);const{value:t,name:r}=e.detail;if(r==="time-period"){this.selectedPeriod=t;this.updateNumberOptionsAndSelectedNumber(t)}else if(r==="time-number"){this.selectedNumber=parseInt(t)}const o={number:this.selectedNumber,period:this.selectedPeriod};this.timePeriodChanged.emit(o)}updateNumberOptionsAndSelectedNumber(e){const t=this.calculateOptions(e);this.numberOptions=t.map((e=>({label:e.toString(),value:e.toString()})));this.selectedNumber=parseInt(this.numberOptions[0].value)}render(){return r("div",{key:"76ed6c36ebbcfbb8b8d54edc6a26a9d2a6d6f7fb",class:"time-period-selector"},typeof this.selectedNumber=="number"&&r("input-dropdown",{id:"time-number",name:"time-number",inputValue:this.selectedNumber.toString(),exportparts:"id_dropdown: tps__number-dropdown, id_dropdown-input: tps__number-dropdown-button, id_dropdown-content: tps__number-dropdown-content",options:this.numberOptions,defaultInputOption:this.numberOptions.find((e=>e.value==this.selectedNumber.toString()))}),typeof this.selectedPeriod=="string"&&r("select-dropdown",{id:"time-period",name:"time-period",options:this.timePeriodOptions,exportparts:"sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content",pluralizedLabel:this.selectedNumber>1?"s":"",defaultSelectedOption:this.timePeriodOptions.find((e=>e.value==this.selectedPeriod)),withSearch:false}))}get host(){return o(this)}};p.style=d;export{p as time_period_selector};
-//# sourceMappingURL=p-9db69aed.entry.js.map

package/dist/nylas-web-elements/p-9db69aed.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["timePeriodSelectorCss","TimePeriodSelectorStyle0","pluralToSingular","hours","days","weeks","months","TimePeriodSelector","this","defaultSelectedPeriod","defaultSelectedNumber","calculateOptions","map","i","label","toString","value","timePeriods","period","componentDidLoad","selectedNumber","selectedPeriod","numberOptions","Array","from","length","_","inputOptionChangedHandler","event","debug","detail","name","parseInt","selected","number","timePeriodChanged","emit","nylasFormDropdownChangedHandler","updateNumberOptionsAndSelectedNumber","render","h","key","class","id","inputValue","exportparts","options","defaultInputOption","find","timePeriodOptions","pluralizedLabel","defaultSelectedOption","withSearch"],"sources":["src/components/design-system/time-period-selector/time-period-selector.scss?tag=time-period-selector&encapsulation=scoped","src/components/design-system/time-period-selector/time-period-selector.tsx"],"sourcesContent":[".time-period-selector {\n  display: grid;\n  gap: 0.5rem;\n  grid-template-columns: auto 1fr;\n\n  select-dropdown,\n  input-dropdown {\n    border: 1px solid var(--nylas-base-200);\n    border-radius: var(--nylas-border-radius-2x);\n  }\n  select-dropdown {\n    width: 116px;\n  }\n  input-dropdown {\n    width: 84px;\n    display: flex;\n    align-items: center;\n  }\n\n  select-dropdown#time-period::part(sd_dropdown-button) {\n    width: 100%;\n  }\n  input-dropdown::part(id_dropdown) {\n    width: inherit;\n    height: 100%;\n  }\n  input-dropdown#time-number::part(id_dropdown-input) {\n    border: none;\n    border-radius: var(--nylas-border-radius-2x);\n  }\n  input-dropdown::part(id_dropdown-input) {\n    padding: 17px;\n    gap: 1rem;\n  }\n  input-dropdown::part(id_dropdown-content) {\n    width: 100%;\n    max-height: 200px;\n  }\n  select-dropdown::part(sd_dropdown) {\n    width: inherit;\n  }\n  select-dropdown::part(sd_dropdown-button) {\n    padding: 1rem;\n    gap: 1rem;\n    justify-content: space-between;\n  }\n  select-dropdown::part(sd_dropdown-content) {\n    width: 100%;\n    max-height: 200px;\n  }\n}\n","import { debug } from '@/utils/utils';\nimport { Element, Event, EventEmitter } from '@stencil/core';\nimport { Component, h, Listen, Prop, State } from '@stencil/core';\n\nconst pluralToSingular = {\n  hours: 'hour',\n  days: 'day',\n  weeks: 'week',\n  months: 'month',\n};\n\n@Component({\n  tag: 'time-period-selector',\n  styleUrl: 'time-period-selector.scss',\n  scoped: true,\n})\nexport class TimePeriodSelector {\n  @Element() host!: HTMLElement;\n\n  // The possible values for the time periods dropdown\n  @Prop() timePeriods: string[] = ['hour', 'day', 'week', 'month'];\n\n  /**\n   * The default selected time period.\n   */\n  @Prop() defaultSelectedPeriod!: string;\n\n  /**\n   * The default selected number.\n   */\n  @Prop() defaultSelectedNumber!: number;\n\n  /**\n   * The currently selected time period\n   */\n  @State() selectedPeriod: string = this.defaultSelectedPeriod;\n\n  /**\n   * The currently selected number of the time period\n   */\n  @State() selectedNumber: number = this.defaultSelectedNumber;\n\n  /*\n   * The options for the number dropdown, to be calculated based on the selectedPeriod\n   */\n  @State() numberOptions: { label: string; value: string }[] = this.calculateOptions(this.defaultSelectedPeriod || 'hour').map(i => {\n    return {\n      label: i.toString(),\n      value: i.toString(),\n    };\n  });\n\n  /**\n   * The options for the time period dropdown\n   */\n  @State() timePeriodOptions = this.timePeriods.map(period => {\n    return {\n      label: period,\n      value: period,\n    };\n  });\n\n  componentDidLoad() {\n    this.selectedNumber = this.defaultSelectedNumber;\n    this.selectedPeriod = this.defaultSelectedPeriod;\n    const period = pluralToSingular[this.selectedPeriod] ?? this.selectedPeriod;\n    const numberOptions = this.calculateOptions(period);\n    this.numberOptions = numberOptions.map(i => {\n      return {\n        label: i.toString(),\n        value: i.toString(),\n      };\n    });\n  }\n\n  @Event() timePeriodChanged!: EventEmitter<{ number: number; period: string }>;\n\n  private calculateOptions(period: string): number[] {\n    switch (period) {\n      case 'hour':\n        return Array.from({ length: 23 }, (_, i) => i + 1);\n      case 'minute':\n        return Array.from({ length: 13 }, (_, i) => i * 5);\n      case 'day':\n        return Array.from({ length: 30 }, (_, i) => i + 1);\n      case 'week':\n        return Array.from({ length: 4 }, (_, i) => i + 1);\n      case 'month':\n        return Array.from({ length: 12 }, (_, i) => i + 1);\n      default:\n        return [];\n    }\n  }\n\n  @Listen('inputOptionChanged')\n  inputOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('time-period-selector', 'inputOptionChangedHandler', event.detail);\n    const { value, name } = event.detail;\n    if (name === 'time-number') {\n      this.selectedNumber = value ? parseInt(value) : this.defaultSelectedNumber;\n    }\n    const selected = {\n      number: this.selectedNumber,\n      period: this.selectedPeriod,\n    };\n    this.timePeriodChanged.emit(selected);\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('time-period-selector', 'nylasFormDropdownChangedHandler', event.detail);\n    const { value, name } = event.detail;\n    if (name === 'time-period') {\n      this.selectedPeriod = value;\n      this.updateNumberOptionsAndSelectedNumber(value);\n    } else if (name === 'time-number') {\n      this.selectedNumber = parseInt(value);\n    }\n    const selected = {\n      number: this.selectedNumber,\n      period: this.selectedPeriod,\n    };\n    this.timePeriodChanged.emit(selected);\n  }\n\n  updateNumberOptionsAndSelectedNumber(period: string) {\n    const numberOptions = this.calculateOptions(period);\n    this.numberOptions = numberOptions.map(i => {\n      return {\n        label: i.toString(),\n        value: i.toString(),\n      };\n    });\n    this.selectedNumber = parseInt(this.numberOptions[0].value);\n  }\n\n  render() {\n    return (\n      <div class=\"time-period-selector\">\n        {typeof this.selectedNumber == 'number' && (\n          <input-dropdown\n            id=\"time-number\"\n            name={'time-number'}\n            inputValue={this.selectedNumber.toString()}\n            exportparts=\"id_dropdown: tps__number-dropdown, id_dropdown-input: tps__number-dropdown-button, id_dropdown-content: tps__number-dropdown-content\"\n            options={this.numberOptions}\n            defaultInputOption={this.numberOptions.find(i => i.value == this.selectedNumber.toString())}\n          />\n        )}\n        {typeof this.selectedPeriod == 'string' && (\n          <select-dropdown\n            id=\"time-period\"\n            name={'time-period'}\n            options={this.timePeriodOptions}\n            exportparts=\"sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content\"\n            pluralizedLabel={this.selectedNumber > 1 ? 's' : ''}\n            defaultSelectedOption={this.timePeriodOptions.find(i => i.value == this.selectedPeriod)}\n            withSearch={false}\n          />\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}