@nylas/web-elements 0.0.0-test-20250320180623 → 0.0.0-test-20250320184617

package/dist/cjs/button-component_2.cjs.entry.js

@@ -23,7 +23,7 @@ const ButtonComponent = class {
     }
     render() {
         const className = `button-${this.variant}` + (this.disabled ? ' disabled' : '');
-        return (index.h("button", { key: 'f7ab1093a487b82272e55f430f12827ecefe6f79', class: className, disabled: this.disabled, type: "type", title: this.tooltip, onClick: this.clickHandler, onMouseOver: this.mouseOverHandler, onMouseOut: this.mouseOutHandler, onFocus: this.focusHandler, onBlur: this.blurHandler }, !!this.isLoading && index.h("loading-icon", { slot: "icon" }), index.h("slot", { key: '54acbf084444ac5c115b3dab60acb43a8a391ebd' })));
+        return (index.h("button", { key: '0d4e2bd6da64d91dc45672f11baf5ab9e2952788', class: className, disabled: this.disabled, type: "type", title: this.tooltip, onClick: this.clickHandler, onMouseOver: this.mouseOverHandler, onMouseOut: this.mouseOutHandler, onFocus: this.focusHandler, onBlur: this.blurHandler }, !!this.isLoading && index.h("loading-icon", { slot: "icon" }), index.h("slot", { key: 'f92c1e76e0bd689686f269411bae2762c57028ac' })));
     }
 };
 ButtonComponent.style = ButtonComponentStyle0;

package/dist/cjs/button-component_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"button-component.loading-icon.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,m1EAAm1E,CAAC;AAC/2E,8BAAe,kBAAkB;;MCOpB,eAAe;;;uBAEI,SAAS;wBAGX,KAAK;oBAEV,QAAQ;uBACL,EAAE;yBACC,KAAK;;;;;;;IAOlC,MAAM;QACJ,MAAM,SAAS,GAAG,UAAU,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CAAC;QAEhF,QACEA,qEACE,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,UAAU,EAAE,IAAI,CAAC,eAAe,EAChC,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,MAAM,EAAE,IAAI,CAAC,WAAW,IAEvB,CAAC,CAAC,IAAI,CAAC,SAAS,IAAIA,0BAAc,IAAI,EAAC,MAAM,GAAgB,EAC9DA,oEAAa,CACN,EACT;KACH;;;;AC3CH,MAAM,UAAU,GAAG,4WAA4W,CAAC;AAChY,0BAAe,UAAU;;MCMZ,WAAW;;;qBACE,IAAI;sBACH,IAAI;;IAE7B,MAAM;QACJ,QAEEA,kEAAK,KAAK,EAAC,MAAM,IACfA,kEAAK,KAAK,EAAC,KAAK,GAAO,EACvBA,kEAAK,KAAK,EAAC,KAAK,GAAO,EACvBA,kEAAK,KAAK,EAAC,KAAK,GAAO,CACnB,EACN;KACH;;;;;;;","names":["h"],"sources":["src/components/design-system/button-component/button-component.scss?tag=button-component&encapsulation=scoped","src/components/design-system/button-component/button-component.tsx","src/common/icons/loading.css?tag=loading-icon&encapsulation=shadow","src/common/icons/loading.tsx"],"sourcesContent":["@import '../../../common/mixins/buttons.scss';\n@import '../../../common/styles/variables.scss';\n\nbutton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75rem;\n  height: 48px;\n  border: none;\n  border-radius: var(--nylas-border-radius-2x);\n  font-size: 16px;\n  line-height: 24px;\n  padding: 0 1rem;\n  cursor: pointer;\n  font-family: var(--nylas-font-family);\n  font-weight: 600;\n  width: 100%;\n\n  @media #{$mobile} {\n    width: 100%;\n  }\n\n  &.button-primary {\n    @include primary-button;\n  }\n\n  &.button-basic {\n    border: 1px solid var(--nylas-base-300);\n    color: var(--nylas-base-700);\n    background: transparent;\n\n    &:hover {\n      background: transparent;\n      border-color: var(--nylas-primary);\n    }\n\n    &:active {\n      background: transparent;\n      border-color: var(--nylas-base-600);\n      border-width: 2px;\n    }\n\n    &:disabled {\n      background: transparent;\n      border-color: var(--nylas-base-300);\n      color: var(--nylas-base-300);\n      cursor: not-allowed;\n    }\n  }\n\n  &.button-destructive {\n    border: 1px solid var(--nylas-base-300);\n    color: var(--nylas-error);\n    background: transparent;\n\n    &:hover {\n      background: transparent;\n      border-color: var(--nylas-error);\n    }\n\n    &:active {\n      background: transparent;\n      border-color: var(--nylas-error-pressed);\n      border-width: 2px;\n      color: var(--nylas-error-pressed);\n    }\n\n    &:disabled {\n      background: transparent;\n      border-color: var(--nylas-base-300);\n      color: var(--nylas-base-300);\n      cursor: not-allowed;\n    }\n  }\n\n  &.button-invisible {\n    background: transparent;\n    color: var(--nylas-base-800);\n    border: none;\n\n    &:hover {\n      background: var(--nylas-base-50);\n      color: var(--nylas-primary);\n    }\n\n    &:active {\n      background: var(--nylas-base-50);\n      color: var(--nylas-base-850);\n    }\n\n    &:disabled {\n      background: transparent;\n      color: var(--nylas-base-300);\n      cursor: not-allowed;\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\ntype ButtonType = 'primary' | 'basic' | 'destructive' | 'invisible';\n\n@Component({\n  tag: 'button-component',\n  styleUrl: 'button-component.scss',\n  scoped: true,\n})\nexport class ButtonComponent {\n  // Define a prop to accept the button type\n  @Prop() variant: ButtonType = 'primary';\n\n  // Define a prop for disabled state\n  @Prop() disabled: boolean = false;\n\n  @Prop() type: string = 'button';\n  @Prop() tooltip: string = '';\n  @Prop() isLoading: boolean = false;\n  @Prop() clickHandler?: (event: MouseEvent) => void;\n  @Prop() mouseOverHandler?: (event: MouseEvent) => void;\n  @Prop() mouseOutHandler?: (event: MouseEvent) => void;\n  @Prop() focusHandler?: (event: FocusEvent) => void;\n  @Prop() blurHandler?: (event: FocusEvent) => void;\n\n  render() {\n    const className = `button-${this.variant}` + (this.disabled ? ' disabled' : '');\n\n    return (\n      <button\n        class={className}\n        disabled={this.disabled}\n        type=\"type\"\n        title={this.tooltip}\n        onClick={this.clickHandler}\n        onMouseOver={this.mouseOverHandler}\n        onMouseOut={this.mouseOutHandler}\n        onFocus={this.focusHandler}\n        onBlur={this.blurHandler}\n      >\n        {!!this.isLoading && <loading-icon slot=\"icon\"></loading-icon>}\n        <slot></slot>\n      </button>\n    );\n  }\n}\n",".wave {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dot {\n  width: 4px;\n  height: 4px;\n  background-color: var(--dot-color, white);\n  border-radius: 50%;\n  margin: 0 2px;\n  animation: wave 1.5s infinite ease-in-out;\n}\n\n.dot:nth-child(2) {\n  animation-delay: 0.2s;\n}\n\n.dot:nth-child(3) {\n  animation-delay: 0.4s;\n}\n\n@keyframes wave {\n  0%,\n  60%,\n  100% {\n    transform: translateY(0);\n  }\n  30% {\n    transform: translateY(-4px);\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'loading-icon',\n  styleUrl: 'loading.css',\n  shadow: true,\n})\nexport class LoadingIcon {\n  @Prop() width: string = '15';\n  @Prop() height: string = '15';\n\n  render() {\n    return (\n      // Loading icon svg\n      <div class=\"wave\">\n        <div class=\"dot\"></div>\n        <div class=\"dot\"></div>\n        <div class=\"dot\"></div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"button-component.loading-icon.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,m1EAAm1E,CAAC;AAC/2E,8BAAe,kBAAkB;;MCMpB,eAAe;;;uBAEI,SAAS;wBAGX,KAAK;oBAEV,QAAQ;uBACL,EAAE;yBACC,KAAK;;;;;;;IAOlC,MAAM;QACJ,MAAM,SAAS,GAAG,UAAU,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CAAC;QAEhF,QACEA,qEACE,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,UAAU,EAAE,IAAI,CAAC,eAAe,EAChC,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,MAAM,EAAE,IAAI,CAAC,WAAW,IAEvB,CAAC,CAAC,IAAI,CAAC,SAAS,IAAIA,0BAAc,IAAI,EAAC,MAAM,GAAgB,EAC9DA,oEAAa,CACN,EACT;KACH;;;;AC1CH,MAAM,UAAU,GAAG,4WAA4W,CAAC;AAChY,0BAAe,UAAU;;MCMZ,WAAW;;;qBACE,IAAI;sBACH,IAAI;;IAE7B,MAAM;QACJ,QAEEA,kEAAK,KAAK,EAAC,MAAM,IACfA,kEAAK,KAAK,EAAC,KAAK,GAAO,EACvBA,kEAAK,KAAK,EAAC,KAAK,GAAO,EACvBA,kEAAK,KAAK,EAAC,KAAK,GAAO,CACnB,EACN;KACH;;;;;;;","names":["h"],"sources":["src/components/design-system/button-component/button-component.scss?tag=button-component&encapsulation=scoped","src/components/design-system/button-component/button-component.tsx","src/common/icons/loading.css?tag=loading-icon&encapsulation=shadow","src/common/icons/loading.tsx"],"sourcesContent":["@import '../../../common/mixins/buttons.scss';\n@import '../../../common/styles/variables.scss';\n\nbutton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75rem;\n  height: 48px;\n  border: none;\n  border-radius: var(--nylas-border-radius-2x);\n  font-size: 16px;\n  line-height: 24px;\n  padding: 0 1rem;\n  cursor: pointer;\n  font-family: var(--nylas-font-family);\n  font-weight: 600;\n  width: 100%;\n\n  @media #{$mobile} {\n    width: 100%;\n  }\n\n  &.button-primary {\n    @include primary-button;\n  }\n\n  &.button-basic {\n    border: 1px solid var(--nylas-base-300);\n    color: var(--nylas-base-700);\n    background: transparent;\n\n    &:hover {\n      background: transparent;\n      border-color: var(--nylas-primary);\n    }\n\n    &:active {\n      background: transparent;\n      border-color: var(--nylas-base-600);\n      border-width: 2px;\n    }\n\n    &:disabled {\n      background: transparent;\n      border-color: var(--nylas-base-300);\n      color: var(--nylas-base-300);\n      cursor: not-allowed;\n    }\n  }\n\n  &.button-destructive {\n    border: 1px solid var(--nylas-base-300);\n    color: var(--nylas-error);\n    background: transparent;\n\n    &:hover {\n      background: transparent;\n      border-color: var(--nylas-error);\n    }\n\n    &:active {\n      background: transparent;\n      border-color: var(--nylas-error-pressed);\n      border-width: 2px;\n      color: var(--nylas-error-pressed);\n    }\n\n    &:disabled {\n      background: transparent;\n      border-color: var(--nylas-base-300);\n      color: var(--nylas-base-300);\n      cursor: not-allowed;\n    }\n  }\n\n  &.button-invisible {\n    background: transparent;\n    color: var(--nylas-base-800);\n    border: none;\n\n    &:hover {\n      background: var(--nylas-base-50);\n      color: var(--nylas-primary);\n    }\n\n    &:active {\n      background: var(--nylas-base-50);\n      color: var(--nylas-base-850);\n    }\n\n    &:disabled {\n      background: transparent;\n      color: var(--nylas-base-300);\n      cursor: not-allowed;\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { ButtonType } from '@nylas/core';\n@Component({\n  tag: 'button-component',\n  styleUrl: 'button-component.scss',\n  scoped: true,\n})\nexport class ButtonComponent {\n  // Define a prop to accept the button type\n  @Prop() variant: ButtonType = 'primary';\n\n  // Define a prop for disabled state\n  @Prop() disabled: boolean = false;\n\n  @Prop() type: string = 'button';\n  @Prop() tooltip: string = '';\n  @Prop() isLoading: boolean = false;\n  @Prop() clickHandler?: (event: MouseEvent) => void;\n  @Prop() mouseOverHandler?: (event: MouseEvent) => void;\n  @Prop() mouseOutHandler?: (event: MouseEvent) => void;\n  @Prop() focusHandler?: (event: FocusEvent) => void;\n  @Prop() blurHandler?: (event: FocusEvent) => void;\n\n  render() {\n    const className = `button-${this.variant}` + (this.disabled ? ' disabled' : '');\n\n    return (\n      <button\n        class={className}\n        disabled={this.disabled}\n        type=\"type\"\n        title={this.tooltip}\n        onClick={this.clickHandler}\n        onMouseOver={this.mouseOverHandler}\n        onMouseOut={this.mouseOutHandler}\n        onFocus={this.focusHandler}\n        onBlur={this.blurHandler}\n      >\n        {!!this.isLoading && <loading-icon slot=\"icon\"></loading-icon>}\n        <slot></slot>\n      </button>\n    );\n  }\n}\n",".wave {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dot {\n  width: 4px;\n  height: 4px;\n  background-color: var(--dot-color, white);\n  border-radius: 50%;\n  margin: 0 2px;\n  animation: wave 1.5s infinite ease-in-out;\n}\n\n.dot:nth-child(2) {\n  animation-delay: 0.2s;\n}\n\n.dot:nth-child(3) {\n  animation-delay: 0.4s;\n}\n\n@keyframes wave {\n  0%,\n  60%,\n  100% {\n    transform: translateY(0);\n  }\n  30% {\n    transform: translateY(-4px);\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'loading-icon',\n  styleUrl: 'loading.css',\n  shadow: true,\n})\nexport class LoadingIcon {\n  @Prop() width: string = '15';\n  @Prop() height: string = '15';\n\n  render() {\n    return (\n      // Loading icon svg\n      <div class=\"wave\">\n        <div class=\"dot\"></div>\n        <div class=\"dot\"></div>\n        <div class=\"dot\"></div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/calendar-agenda-fill-icon_36.cjs.entry.js

@@ -4160,10 +4160,10 @@ const NylasBufferTime = class {
             const value = i * 5;
             return {
                 label: value.toString(),
-                value: value,
+                value: value.toString(),
             };
         });
-        return (index$1.h(index$1.Host, null, index$1.h("div", { class: "nylas-buffer-time", part: "nbt" }, index$1.h("div", { class: "header", part: "nbt__header" }, index$1.h("h3", null, utils.instance.t('nylasBufferTime.headerTitle')), index$1.h("p", null, utils.instance.t('nylasBufferTime.headerSubTitle'), index$1.h("tooltip-component", null, index$1.h("info-icon", { slot: "tooltip-icon" }), index$1.h("span", { slot: "tooltip-content" }, utils.instance.t('nylasBufferTime.tooltip.desc'))))), index$1.h("div", { class: "nylas-buffer-time__body", part: "nbt__body" }, index$1.h("div", { class: "nylas-buffer-time__dropdown" }, index$1.h("div", { class: "nylas-buffer-time__row" }, index$1.h("label", null, utils.instance.t('nylasBufferTime.beforeBufferLabel')), index$1.h("div", { class: "dropdown-container" }, this.componentLoaded && (index$1.h("select-dropdown", { id: "before-buffer-time", withSearch: false, name: "before-buffer-time", exportparts: "sd_dropdown: nbt__dropdown-before, sd_dropdown-button: nbt__dropdown-button-before, sd_dropdown-content: nbt__dropdown-content-before", options: minuteOptions, defaultSelectedOption: minuteOptions.find(min => min.value == this.selectedBeforeBufferTime) })), index$1.h("span", null, utils.instance.t('nylasBufferTime.minutesShort')))), index$1.h("div", { class: "nylas-buffer-time__row" }, index$1.h("label", null, utils.instance.t('nylasBufferTime.afterBufferLabel')), index$1.h("div", { class: "dropdown-container" }, this.componentLoaded && (index$1.h("select-dropdown", { id: "after-buffer-time", withSearch: false, name: "after-buffer-time", exportparts: "sd_dropdown: nbt__dropdown-after, sd_dropdown-button: nbt__dropdown-button-after, sd_dropdown-content: nbt__dropdown-content-after", options: minuteOptions, defaultSelectedOption: minuteOptions.find(min => min.value == this.selectedAfterBufferTime) })), index$1.h("span", null, utils.instance.t('nylasBufferTime.minutesShort'))))), index$1.h("div", { class: "nylas-buffer-time__preview", part: "nbt__preview" }, index$1.h("h4", null, utils.instance.t('nylasBufferTime.previewHeader')), this.renderPreview())))));
+        return (index$1.h(index$1.Host, null, index$1.h("div", { class: "nylas-buffer-time", part: "nbt" }, index$1.h("div", { class: "header", part: "nbt__header" }, index$1.h("h3", null, utils.instance.t('nylasBufferTime.headerTitle')), index$1.h("p", null, utils.instance.t('nylasBufferTime.headerSubTitle'), index$1.h("tooltip-component", null, index$1.h("info-icon", { slot: "tooltip-icon" }), index$1.h("span", { slot: "tooltip-content" }, utils.instance.t('nylasBufferTime.tooltip.desc'))))), index$1.h("div", { class: "nylas-buffer-time__body", part: "nbt__body" }, index$1.h("div", { class: "nylas-buffer-time__dropdown" }, index$1.h("div", { class: "nylas-buffer-time__row" }, index$1.h("label", null, utils.instance.t('nylasBufferTime.beforeBufferLabel')), index$1.h("div", { class: "dropdown-container" }, this.componentLoaded && (index$1.h("select-dropdown", { id: "before-buffer-time", withSearch: false, name: "before-buffer-time", exportparts: "sd_dropdown: nbt__dropdown-before, sd_dropdown-button: nbt__dropdown-button-before, sd_dropdown-content: nbt__dropdown-content-before", options: minuteOptions, defaultSelectedOption: minuteOptions.find(min => min.value === this.selectedBeforeBufferTime.toString()) })), index$1.h("span", null, utils.instance.t('nylasBufferTime.minutesShort')))), index$1.h("div", { class: "nylas-buffer-time__row" }, index$1.h("label", null, utils.instance.t('nylasBufferTime.afterBufferLabel')), index$1.h("div", { class: "dropdown-container" }, this.componentLoaded && (index$1.h("select-dropdown", { id: "after-buffer-time", withSearch: false, name: "after-buffer-time", exportparts: "sd_dropdown: nbt__dropdown-after, sd_dropdown-button: nbt__dropdown-button-after, sd_dropdown-content: nbt__dropdown-content-after", options: minuteOptions, defaultSelectedOption: minuteOptions.find(min => min.value === this.selectedAfterBufferTime.toString()) })), index$1.h("span", null, utils.instance.t('nylasBufferTime.minutesShort'))))), index$1.h("div", { class: "nylas-buffer-time__preview", part: "nbt__preview" }, index$1.h("h4", null, utils.instance.t('nylasBufferTime.previewHeader')), this.renderPreview())))));
     }
     static get formAssociated() { return true; }
     get host() { return index$1.getElement(this); }
@@ -5352,10 +5352,10 @@ const NylasEventDuration = class {
         this.durationIncrement = undefined;
         this.error = '';
         this.durationMinutesOptions = [
-            { value: 15, label: '15' },
-            { value: 30, label: '30' },
-            { value: 45, label: '45' },
-            { value: 60, label: '60' },
+            { value: (15).toString(), label: '15' },
+            { value: (30).toString(), label: '30' },
+            { value: (45).toString(), label: '45' },
+            { value: (60).toString(), label: '60' },
         ];
     }
     elementNameChangedHandler(newValue) {
@@ -5406,14 +5406,14 @@ const NylasEventDuration = class {
     setDurationMintueOptions() {
         if (this.durationIncrement === 1) {
             this.durationMinutesOptions = [
-                { value: 15, label: '15' },
-                { value: 30, label: '30' },
-                { value: 45, label: '45' },
-                { value: 60, label: '60' },
+                { value: (15).toString(), label: '15' },
+                { value: (30).toString(), label: '30' },
+                { value: (45).toString(), label: '45' },
+                { value: (60).toString(), label: '60' },
             ];
         }
         else {
-            this.durationMinutesOptions = Array.from({ length: 23 }, (_, i) => ({ value: i + 1, label: (i + 1).toString() }));
+            this.durationMinutesOptions = Array.from({ length: 23 }, (_, i) => ({ value: (i + 1).toString(), label: (i + 1).toString() }));
         }
         return this.durationMinutesOptions;
     }
@@ -5435,7 +5435,7 @@ const NylasEventDuration = class {
     nylasFormDropdownChangedHandler(event) {
         utils.debug('nylas-calendar-picker', 'nylasFormDropdownChangedHandler', event.detail);
         const { value } = event.detail;
-        this.durationIncrement = parseInt(value);
+        this.durationIncrement = parseInt(value.toString());
         if (this.durationIncrement === 1) {
             this.duration = 60;
         }
@@ -5453,9 +5453,8 @@ const NylasEventDuration = class {
     inputOptionChangedHandler(event) {
         utils.debug('nylas-calendar-picker', 'inputOptionChangedHandler', event.detail);
         const { value } = event.detail;
-        this.duration = value;
+        this.duration = parseFloat(value.toString());
         this.durationMinutes = this.duration * this.durationIncrement;
-        console.log('###errror:', this.validateDuration(), this.durationMinutes, this.durationIncrement);
         if (this.validateDuration() !== '') {
             return;
         }
@@ -5464,12 +5463,12 @@ const NylasEventDuration = class {
     }
     render() {
         const durationOptions = [
-            { value: 1, label: utils.instance.t('timeDuration', { context: 'minute' }) },
-            { value: 60, label: utils.instance.t('timeDuration', { context: 'hour' }) },
+            { value: (1).toString(), label: utils.instance.t('timeDuration', { context: 'minute' }) },
+            { value: (60).toString(), label: utils.instance.t('timeDuration', { context: 'hour' }) },
         ];
-        return (index$1.h(index$1.Host, { key: 'c0525f28dbeb2398489d58d64d7b8e400ca13424' }, index$1.h("div", { key: '5ae98592a0364146987a3d2e4eee5e5f80a80097', class: "nylas-event-duration", part: "ned" }, index$1.h("label", { key: 'dc4ebcc5dbf749afbdbe27373a8d9904c2343433', htmlFor: "duration" }, utils.instance.t('nylasEventDuration.headerTitle'), index$1.h("span", { key: '449d71a0f7479fad65ab3c00481cdf3f2cb6ed55', class: "required" }, "*")), index$1.h("div", { key: '807948b6f03032d24d5d93013f64f279bc92682b', class: "nylas-event-duration__wrapper" }, index$1.h("input-dropdown", { key: '2e47a704274e2cb19a7045ddd31e8c10e0a668b8', class: this.error ? 'error' : '', name: 'event-duration', options: this.durationMinutesOptions, inputValue: this.duration.toString(), exportparts: "id_dropdown: ned__input_dropdown, id_dropdown-input: ned__input_dropdown-input, id_dropdown-content: ned__input_dropdown-content", defaultInputOption: this.durationMinutesOptions.find(i => i.value == this.duration) }), this.durationIncrement && (index$1.h("select-dropdown", { name: 'event-duration', options: durationOptions, pluralizedLabel: this.duration > 1
+        return (index$1.h(index$1.Host, { key: '291d5aada4656f1e7a3ad639459090a164c667cd' }, index$1.h("div", { key: '389ed738c72f9af0b2413360ca30048a903fe834', class: "nylas-event-duration", part: "ned" }, index$1.h("label", { key: '3ab5ae91a80a98386cd77ffc2ed9bee1773e2cce', htmlFor: "duration" }, utils.instance.t('nylasEventDuration.headerTitle'), index$1.h("span", { key: 'a3eb28826f0237e227c6b9c4fbbbbb96544df143', class: "required" }, "*")), index$1.h("div", { key: '48e6f8aebb8f14fbe0ff74a600c1d06f0b65d2b4', class: "nylas-event-duration__wrapper" }, index$1.h("input-dropdown", { key: '4502e6a0eea47789edb136886dc0de048893b639', class: this.error ? 'error' : '', name: 'event-duration', options: this.durationMinutesOptions, inputValue: this.duration.toString(), exportparts: "id_dropdown: ned__input_dropdown, id_dropdown-input: ned__input_dropdown-input, id_dropdown-content: ned__input_dropdown-content", defaultInputOption: this.durationMinutesOptions.find(i => i.value === this.duration.toString()) }), this.durationIncrement && (index$1.h("select-dropdown", { name: 'event-duration', options: durationOptions, pluralizedLabel: this.duration > 1
                 ? utils.instance.t(`time.${this.durationIncrement === 60 ? 'hours' : 'minutes'}`)
-                : utils.instance.t(`time.${this.durationIncrement === 60 ? 'hour' : 'minute'}`), exportparts: "sd_dropdown: ned__dropdown, sd_dropdown-button: ned__dropdown-button, sd_dropdown-content: ned__dropdown-content", defaultSelectedOption: durationOptions.find(i => i.value == this.durationIncrement), withSearch: false }))), index$1.h("div", { key: '1b7710bb059db3bde722f17ed7660698e3f6988a', class: `nylas-event-duration__error-container ${this.error ? 'visible' : ''}`, part: "ned__error-container" }, index$1.h("div", { key: '7e90795969a0fb22703217671cca38ffbb23d2a8', class: "nylas-event-duration__error", part: "ned__error" }, this.error)))));
+                : utils.instance.t(`time.${this.durationIncrement === 60 ? 'hour' : 'minute'}`), exportparts: "sd_dropdown: ned__dropdown, sd_dropdown-button: ned__dropdown-button, sd_dropdown-content: ned__dropdown-content", defaultSelectedOption: durationOptions.find(i => i.value === this.durationIncrement.toString()), withSearch: false }))), index$1.h("div", { key: 'f847e873066be7c174f7c5eea94e4cdc473d1ecd', class: `nylas-event-duration__error-container ${this.error ? 'visible' : ''}`, part: "ned__error-container" }, index$1.h("div", { key: '7cac0c1055ce71dd4de9cf08558d74c051527eb5', class: "nylas-event-duration__error", part: "ned__error" }, this.error)))));
     }
     static get formAssociated() { return true; }
     get host() { return index$1.getElement(this); }