@nylas/web-elements 2.5.4 → 2.5.6

package/dist/components/{p-D2Zt-T9i.js → p-BNfHz7A2.js}

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, e as createEvent, h, i as Host } from './p-Bht9ktsW.js';
-import { R as RegisterComponent } from './p-CdMky78w.js';
-import { a as debug } from './p-DBE6FcDx.js';
-import { i as instance } from './p-CFk78OEk.js';
+import { R as RegisterComponent } from './p-jHq8WTky.js';
+import { a as debug } from './p-xxFdByBn.js';
+import { i as instance } from './p-BjxQTsOy.js';
 import { d as defineCustomElement$4 } from './p-ao6VxuAL.js';
 import { d as defineCustomElement$3 } from './p-d3kelm3z.js';
-import { d as defineCustomElement$2 } from './p-elpxqGIV.js';
+import { d as defineCustomElement$2 } from './p-cIIaCJPC.js';
 import { d as defineCustomElement$1 } from './p-DxDoo-4C.js';
 
 const nylasPageNameCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--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-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff;width:inherit}.nylas-page-name{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200);text-align:left}.nylas-page-name .header{padding:1rem;display:grid;grid-template-columns:1fr auto}.nylas-page-name .header h3{border-radius:var(--nylas-border-radius-2x);margin:0;font-size:16px;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-page-name .header p{display:flex;gap:4px;align-items:center;margin:0.25rem 0 0 0;font-size:0.875rem;font-weight:400;line-height:20px;color:var(--nylas-base-600);text-align:left}.nylas-page-name .header p .required-asterisk{color:var(--nylas-error)}.nylas-page-name .header .drawer-toggle{display:flex;gap:24px;align-items:center}.nylas-page-name .header .drawer-toggle .chevron{display:flex;align-self:center;cursor:pointer}.nylas-page-name .header .drawer-toggle .chevron:hover,.nylas-page-name .header .drawer-toggle .chevron:active{color:var(--nylas-primary)}.nylas-page-name .header .drawer-toggle .chevron.open{transform:rotate(90deg)}.nylas-page-name .header .drawer-toggle .chevron.closed{transform:rotate(270deg)}.nylas-page-name .header .drawer-toggle .chevron.disabled{cursor:not-allowed;color:var(--nylas-base-300)}.nylas-page-name .header .drawer-toggle .chevron.disabled:hover{color:var(--nylas-base-300)}.nylas-page-name .nylas-page-name__body{display:grid;grid-template-columns:1fr;background-color:var(--nylas-base-25);border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 768px){.nylas-page-name .nylas-page-name__body{grid-template-columns:1fr}}.nylas-page-name .nylas-page-name__body .nylas-page-name__section{padding:1rem;display:flex;flex-direction:column;gap:1rem;color:var(--nylas-base-800)}@media screen and (max-width: 768px){.nylas-page-name .nylas-page-name__body .nylas-page-name__section{border:none}}.nylas-page-name .nylas-page-name__body .nylas-page-name__section .nylas-page-name__row{display:flex;align-items:center;gap:1rem}.nylas-page-name .nylas-page-name__body .nylas-page-name__section .nylas-page-name__row label{display:flex;align-items:center}.nylas-page-name .nylas-page-name__body .nylas-page-name__section .nylas-page-name__row label span.required{color:var(--nylas-error, #cc4841)}.nylas-page-name .nylas-page-name__body .nylas-page-name__section .nylas-page-name__row p{margin:0.25rem 0 0 0;font-size:16px;font-weight:500;line-height:24px;color:var(--nylas-base-900)}.nylas-page-name .nylas-page-name__body .nylas-page-name__section .nylas-page-name__row .input-container{width:100%}.nylas-page-name .nylas-page-name__body .nylas-page-name__section .nylas-page-name__row .input-container span.error-message{color:var(--nylas-error)}.nylas-page-name .nylas-page-name__input-wrapper{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:-moz-available;width:-webkit-fill-available;display:flex;flex-direction:row;gap:0.125rem;border-radius:var(--nylas-border-radius-2x);z-index:1}.nylas-page-name .nylas-page-name__input-wrapper:focus{outline-color:var(--nylas-primary)}.nylas-page-name .nylas-page-name__input-wrapper.error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}.nylas-page-name .nylas-page-name__input-wrapper.error::placeholder{font-weight:400}.nylas-page-name .nylas-page-name__input-wrapper::placeholder{color:var(--nylas-base-300)}.nylas-page-name .nylas-page-name__input-wrapper.error{border:1px solid var(--nylas-error)}.nylas-page-name .nylas-page-name__input-wrapper input-component::part(ic__input){outline:none;border:none;width:100%;font-size:16px;height:auto;padding-left:0px}";
@@ -211,6 +211,6 @@ function defineCustomElement() {
 }
 
 export { NylasPageName as N, defineCustomElement as d };
-//# sourceMappingURL=p-D2Zt-T9i.js.map
+//# sourceMappingURL=p-BNfHz7A2.js.map
 
-//# sourceMappingURL=p-D2Zt-T9i.js.map
+//# sourceMappingURL=p-BNfHz7A2.js.map

package/dist/components/{p-D2Zt-T9i.js.map → p-BNfHz7A2.js.map}

@@ -1 +1 @@
-{"file":"p-D2Zt-T9i.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler-editor/nylas-page-name/nylas-page-name.scss?tag=nylas-page-name&encapsulation=shadow","src/components/scheduler-editor/nylas-page-name/nylas-page-name.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n@use '../../../common/mixins/inputs' as *;\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-page-name {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  margin: 1rem;\n  border-radius: var(--nylas-border-radius-2x);\n  border: 1px solid var(--nylas-base-200);\n  text-align: left;\n\n  .header {\n    padding: 1rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n\n    h3 {\n      border-radius: var(--nylas-border-radius-2x);\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      line-height: 20px;\n      color: var(--nylas-base-900);\n      text-align: left;\n    }\n\n    p {\n      display: flex;\n      gap: 4px;\n      align-items: center;\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n\n      .required-asterisk {\n        color: var(--nylas-error);\n      }\n    }\n\n    .drawer-toggle {\n      display: flex;\n      gap: 24px;\n      align-items: center;\n\n      .chevron {\n        display: flex;\n        align-self: center;\n        cursor: pointer;\n\n        &:hover,\n        &:active {\n          color: var(--nylas-primary);\n        }\n\n        &.open {\n          transform: rotate(90deg);\n        }\n\n        &.closed {\n          transform: rotate(270deg);\n        }\n\n        &.disabled {\n          cursor: not-allowed;\n          color: var(--nylas-base-300);\n\n          &:hover {\n            color: var(--nylas-base-300);\n          }\n        }\n      }\n    }\n  }\n\n  .nylas-page-name__body {\n    display: grid;\n    grid-template-columns: 1fr;\n    background-color: var(--nylas-base-25);\n    border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n    border-top: 1px solid var(--nylas-base-200);\n\n    @media #{$mobile} {\n      grid-template-columns: 1fr;\n    }\n\n    .nylas-page-name__section {\n      padding: 1rem;\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      color: var(--nylas-base-800);\n\n      @media #{$mobile} {\n        border: none;\n      }\n\n      .nylas-page-name__row {\n        display: flex;\n        align-items: center;\n        gap: 1rem;\n\n        label {\n          display: flex;\n          align-items: center;\n\n          span.required {\n            color: var(--nylas-error, #cc4841);\n          }\n        }\n\n        p {\n          margin: 0.25rem 0 0 0;\n          font-size: 16px;\n          font-weight: 500;\n          line-height: 24px;\n          color: var(--nylas-base-900);\n        }\n\n        .input-container {\n          width: 100%;\n\n          span.error-message {\n            color: var(--nylas-error);\n          }\n        }\n      }\n    }\n  }\n\n  .nylas-page-name__input-wrapper {\n    @include textfield;\n    width: -moz-available;\n    width: -webkit-fill-available;\n    display: flex;\n    flex-direction: row;\n    gap: 0.125rem;\n    border-radius: var(--nylas-border-radius-2x);\n    z-index: 1;\n\n    &.error {\n      border: 1px solid var(--nylas-error);\n    }\n\n    input-component::part(ic__input) {\n      outline: none;\n      border: none;\n      width: 100%;\n      font-size: 16px;\n      height: auto;\n      padding-left: 0px;\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration, ThemeConfig } from '@nylas/core';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\n\n/**\n * The `nylas-page-name` component is a UI component that allows users to add a custom page name which will appear in the top left corner of the date picker.\n *\n * @part npn - The nylas-page-name container\n * @part npn__body - The body of the event communication section\n * @part npn__header - The header of the event communication section\n * @part npn__drawer-toggle--container - The card's drawer toggle container\n * @part npn__input-textfield - The page name input textfield\n */\n@Component({\n  tag: 'nylas-page-name',\n  styleUrl: 'nylas-page-name.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasPageName {\n  @Element() host!: HTMLNylasPageNameElement;\n\n  /**\n   * @standalone\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * @standalone\n   * The name of the component\n   */\n  @Prop() name: string = 'page-name';\n  /**\n   * @standalone\n   * The default page name\n   */\n  @Prop() pageName?: string;\n  /**\n   * @standalone\n   * Show toggle button that allows users to expand or collapse the card\n   */\n  @Prop() showToggle: boolean = true;\n  /**\n   * @standalone\n   * Is the page name container card expanded\n   */\n  @Prop() isOpen: boolean = true;\n  /**\n   * Make the field required\n   */\n  @Prop() required: boolean = false;\n  /**\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n  /**\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: LANGUAGE_CODE;\n\n  /**\n   * The required property for the page name input\n   */\n  @Prop() requirePageName: boolean = false;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The current page name state\n   */\n  @State() currentPageName!: string;\n\n  /**\n   * The page name error message\n   */\n  @State() pageNameErrorMessage!: string;\n\n  /**\n   * This event is fired when the page name value changes\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-page-name', 'connectedCallback');\n    // Use queueMicrotask to defer theme application until after React has set props.\n    // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n    queueMicrotask(() => {\n      if (this.themeConfig) {\n        this.applyThemeConfig(this.themeConfig);\n        this.host.setAttribute('data-themed', '');\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    debug('nylas-page-name', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-page-name', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n    // Theme already applied in connectedCallback via queueMicrotask\n  }\n\n  componentDidLoad() {\n    debug('nylas-page-name', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      this.currentPageName = this.pageName ?? '';\n    }\n    this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(this.currentPageName), this.name);\n  }\n\n  componentWillUpdate() {\n    debug('nylas-page-name', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-page-name', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-page-name', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-page-name', 'componentDidRender');\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-page-name', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue);\n    this.currentPageName = newValue?.name ?? this.pageName ?? '';\n    this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(this.currentPageName), this.name);\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    i18next.changeLanguage(newVal);\n  }\n\n  @Watch('themeConfig')\n  themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n    if (newVal === oldVal) return;\n    this.applyThemeConfig(newVal);\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  /**\n   * This method is essentially a workaround to check if the internals are available because\n   * the unit tests in stencil do not support the internals.\n   * @returns boolean\n   */\n  get isInternalsAvailable() {\n    return this.internals !== undefined && typeof this.internals.setFormValue === 'function' && typeof this.internals.setValidity === 'function';\n  }\n\n  @Listen('nylasFormInputChanged')\n  async nylasFormInputChangeHandler(event: CustomEvent<{ value: string; name: string }>) {\n    const { name, value } = event.detail;\n    if (!value && this.requirePageName) {\n      this.isInternalsAvailable && this.internals.setValidity({ customError: true }, i18next.t('nylasPageName.pageNameError'));\n      this.pageNameErrorMessage = i18next.t('nylasPageName.pageNameError');\n      return;\n    } else {\n      this.isInternalsAvailable && this.internals.setValidity({ customError: false });\n      this.pageNameErrorMessage = '';\n    }\n    if (name === 'page-name') {\n      this.currentPageName = value;\n      this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(value), this.name);\n      this.valueChanged.emit({ value: JSON.stringify(value), name: this.name });\n    }\n  }\n\n  toggleDrawer() {\n    this.isOpen = !this.isOpen;\n  }\n\n  @RegisterComponent<NylasPageName, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-page-name',\n    stateToProps: new Map([\n      ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n      ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n      ['schedulerConfig.themeConfig', 'themeConfig'],\n    ]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const isComponentReady = typeof this.currentPageName !== 'undefined';\n    return (\n      <Host>\n        <div class=\"nylas-page-name\" part=\"nces\">\n          <div class=\"header\" part=\"nces__header\">\n            <div>\n              <h3>{i18next.t('nylasPageName.headerTitle')}</h3>\n              <p>\n                {i18next.t('nylasPageName.headerSubTitle')}\n                <tooltip-component>\n                  <info-icon slot=\"tooltip-icon\" />\n                  <span slot=\"tooltip-content\">{i18next.t('nylasPageName.tooltip.desc')}</span>\n                </tooltip-component>\n                {this.requirePageName && <span class=\"required-asterisk\">*</span>}\n              </p>\n            </div>\n\n            {this.showToggle && (\n              <div class=\"drawer-toggle\" part=\"nces__drawer-toggle--container\">\n                <span class={`chevron ${this.isOpen ? 'open' : 'closed'} `} onClick={() => this.toggleDrawer()}>\n                  <chevron-icon width=\"24\" height=\"24\" />\n                </span>\n              </div>\n            )}\n          </div>\n\n          {this.isOpen && (\n            <div class=\"nylas-page-name__body\" part=\"nces__body\">\n              <div class=\"nylas-page-name__section\">\n                <div class=\"nylas-page-name__row\">\n                  <div class=\"input-container\">\n                    <div class={{ 'nylas-page-name__input-wrapper': true, 'error': !!this.pageNameErrorMessage }}>\n                      {isComponentReady && (\n                        <input-component\n                          name=\"page-name\"\n                          id=\"page-name\"\n                          type=\"text\"\n                          required={false}\n                          exportparts=\"ic_input: npn__input-textfield\"\n                          defaultValue={this.currentPageName ?? ''}\n                          themeConfig={this.themeConfig}\n                        />\n                      )}\n                    </div>\n                    {this.pageNameErrorMessage && <span class=\"error-message\">{this.pageNameErrorMessage}</span>}\n                  </div>\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BNfHz7A2.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler-editor/nylas-page-name/nylas-page-name.scss?tag=nylas-page-name&encapsulation=shadow","src/components/scheduler-editor/nylas-page-name/nylas-page-name.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n@use '../../../common/mixins/inputs' as *;\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-page-name {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  margin: 1rem;\n  border-radius: var(--nylas-border-radius-2x);\n  border: 1px solid var(--nylas-base-200);\n  text-align: left;\n\n  .header {\n    padding: 1rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n\n    h3 {\n      border-radius: var(--nylas-border-radius-2x);\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      line-height: 20px;\n      color: var(--nylas-base-900);\n      text-align: left;\n    }\n\n    p {\n      display: flex;\n      gap: 4px;\n      align-items: center;\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n\n      .required-asterisk {\n        color: var(--nylas-error);\n      }\n    }\n\n    .drawer-toggle {\n      display: flex;\n      gap: 24px;\n      align-items: center;\n\n      .chevron {\n        display: flex;\n        align-self: center;\n        cursor: pointer;\n\n        &:hover,\n        &:active {\n          color: var(--nylas-primary);\n        }\n\n        &.open {\n          transform: rotate(90deg);\n        }\n\n        &.closed {\n          transform: rotate(270deg);\n        }\n\n        &.disabled {\n          cursor: not-allowed;\n          color: var(--nylas-base-300);\n\n          &:hover {\n            color: var(--nylas-base-300);\n          }\n        }\n      }\n    }\n  }\n\n  .nylas-page-name__body {\n    display: grid;\n    grid-template-columns: 1fr;\n    background-color: var(--nylas-base-25);\n    border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n    border-top: 1px solid var(--nylas-base-200);\n\n    @media #{$mobile} {\n      grid-template-columns: 1fr;\n    }\n\n    .nylas-page-name__section {\n      padding: 1rem;\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      color: var(--nylas-base-800);\n\n      @media #{$mobile} {\n        border: none;\n      }\n\n      .nylas-page-name__row {\n        display: flex;\n        align-items: center;\n        gap: 1rem;\n\n        label {\n          display: flex;\n          align-items: center;\n\n          span.required {\n            color: var(--nylas-error, #cc4841);\n          }\n        }\n\n        p {\n          margin: 0.25rem 0 0 0;\n          font-size: 16px;\n          font-weight: 500;\n          line-height: 24px;\n          color: var(--nylas-base-900);\n        }\n\n        .input-container {\n          width: 100%;\n\n          span.error-message {\n            color: var(--nylas-error);\n          }\n        }\n      }\n    }\n  }\n\n  .nylas-page-name__input-wrapper {\n    @include textfield;\n    width: -moz-available;\n    width: -webkit-fill-available;\n    display: flex;\n    flex-direction: row;\n    gap: 0.125rem;\n    border-radius: var(--nylas-border-radius-2x);\n    z-index: 1;\n\n    &.error {\n      border: 1px solid var(--nylas-error);\n    }\n\n    input-component::part(ic__input) {\n      outline: none;\n      border: none;\n      width: 100%;\n      font-size: 16px;\n      height: auto;\n      padding-left: 0px;\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration, ThemeConfig } from '@nylas/core';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\n\n/**\n * The `nylas-page-name` component is a UI component that allows users to add a custom page name which will appear in the top left corner of the date picker.\n *\n * @part npn - The nylas-page-name container\n * @part npn__body - The body of the event communication section\n * @part npn__header - The header of the event communication section\n * @part npn__drawer-toggle--container - The card's drawer toggle container\n * @part npn__input-textfield - The page name input textfield\n */\n@Component({\n  tag: 'nylas-page-name',\n  styleUrl: 'nylas-page-name.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasPageName {\n  @Element() host!: HTMLNylasPageNameElement;\n\n  /**\n   * @standalone\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * @standalone\n   * The name of the component\n   */\n  @Prop() name: string = 'page-name';\n  /**\n   * @standalone\n   * The default page name\n   */\n  @Prop() pageName?: string;\n  /**\n   * @standalone\n   * Show toggle button that allows users to expand or collapse the card\n   */\n  @Prop() showToggle: boolean = true;\n  /**\n   * @standalone\n   * Is the page name container card expanded\n   */\n  @Prop() isOpen: boolean = true;\n  /**\n   * Make the field required\n   */\n  @Prop() required: boolean = false;\n  /**\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n  /**\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: LANGUAGE_CODE;\n\n  /**\n   * The required property for the page name input\n   */\n  @Prop() requirePageName: boolean = false;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The current page name state\n   */\n  @State() currentPageName!: string;\n\n  /**\n   * The page name error message\n   */\n  @State() pageNameErrorMessage!: string;\n\n  /**\n   * This event is fired when the page name value changes\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-page-name', 'connectedCallback');\n    // Use queueMicrotask to defer theme application until after React has set props.\n    // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n    queueMicrotask(() => {\n      if (this.themeConfig) {\n        this.applyThemeConfig(this.themeConfig);\n        this.host.setAttribute('data-themed', '');\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    debug('nylas-page-name', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-page-name', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n    // Theme already applied in connectedCallback via queueMicrotask\n  }\n\n  componentDidLoad() {\n    debug('nylas-page-name', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      this.currentPageName = this.pageName ?? '';\n    }\n    this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(this.currentPageName), this.name);\n  }\n\n  componentWillUpdate() {\n    debug('nylas-page-name', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-page-name', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-page-name', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-page-name', 'componentDidRender');\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-page-name', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue);\n    this.currentPageName = newValue?.name ?? this.pageName ?? '';\n    this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(this.currentPageName), this.name);\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    i18next.changeLanguage(newVal);\n  }\n\n  @Watch('themeConfig')\n  themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n    if (newVal === oldVal) return;\n    this.applyThemeConfig(newVal);\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  /**\n   * This method is essentially a workaround to check if the internals are available because\n   * the unit tests in stencil do not support the internals.\n   * @returns boolean\n   */\n  get isInternalsAvailable() {\n    return this.internals !== undefined && typeof this.internals.setFormValue === 'function' && typeof this.internals.setValidity === 'function';\n  }\n\n  @Listen('nylasFormInputChanged')\n  async nylasFormInputChangeHandler(event: CustomEvent<{ value: string; name: string }>) {\n    const { name, value } = event.detail;\n    if (!value && this.requirePageName) {\n      this.isInternalsAvailable && this.internals.setValidity({ customError: true }, i18next.t('nylasPageName.pageNameError'));\n      this.pageNameErrorMessage = i18next.t('nylasPageName.pageNameError');\n      return;\n    } else {\n      this.isInternalsAvailable && this.internals.setValidity({ customError: false });\n      this.pageNameErrorMessage = '';\n    }\n    if (name === 'page-name') {\n      this.currentPageName = value;\n      this.isInternalsAvailable && this.internals.setFormValue(JSON.stringify(value), this.name);\n      this.valueChanged.emit({ value: JSON.stringify(value), name: this.name });\n    }\n  }\n\n  toggleDrawer() {\n    this.isOpen = !this.isOpen;\n  }\n\n  @RegisterComponent<NylasPageName, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-page-name',\n    stateToProps: new Map([\n      ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n      ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n      ['schedulerConfig.themeConfig', 'themeConfig'],\n    ]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const isComponentReady = typeof this.currentPageName !== 'undefined';\n    return (\n      <Host>\n        <div class=\"nylas-page-name\" part=\"nces\">\n          <div class=\"header\" part=\"nces__header\">\n            <div>\n              <h3>{i18next.t('nylasPageName.headerTitle')}</h3>\n              <p>\n                {i18next.t('nylasPageName.headerSubTitle')}\n                <tooltip-component>\n                  <info-icon slot=\"tooltip-icon\" />\n                  <span slot=\"tooltip-content\">{i18next.t('nylasPageName.tooltip.desc')}</span>\n                </tooltip-component>\n                {this.requirePageName && <span class=\"required-asterisk\">*</span>}\n              </p>\n            </div>\n\n            {this.showToggle && (\n              <div class=\"drawer-toggle\" part=\"nces__drawer-toggle--container\">\n                <span class={`chevron ${this.isOpen ? 'open' : 'closed'} `} onClick={() => this.toggleDrawer()}>\n                  <chevron-icon width=\"24\" height=\"24\" />\n                </span>\n              </div>\n            )}\n          </div>\n\n          {this.isOpen && (\n            <div class=\"nylas-page-name__body\" part=\"nces__body\">\n              <div class=\"nylas-page-name__section\">\n                <div class=\"nylas-page-name__row\">\n                  <div class=\"input-container\">\n                    <div class={{ 'nylas-page-name__input-wrapper': true, 'error': !!this.pageNameErrorMessage }}>\n                      {isComponentReady && (\n                        <input-component\n                          name=\"page-name\"\n                          id=\"page-name\"\n                          type=\"text\"\n                          required={false}\n                          exportparts=\"ic_input: npn__input-textfield\"\n                          defaultValue={this.currentPageName ?? ''}\n                          themeConfig={this.themeConfig}\n                        />\n                      )}\n                    </div>\n                    {this.pageNameErrorMessage && <span class=\"error-message\">{this.pageNameErrorMessage}</span>}\n                  </div>\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CA-CDvvH.js → p-B_HtmTBC.js}

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, e as createEvent, h, i as Host } from './p-Bht9ktsW.js';
-import { R as RegisterComponent } from './p-CdMky78w.js';
-import { a as debug, e as error } from './p-DBE6FcDx.js';
-import { i as instance } from './p-CFk78OEk.js';
+import { R as RegisterComponent } from './p-jHq8WTky.js';
+import { a as debug, e as error } from './p-xxFdByBn.js';
+import { i as instance } from './p-BjxQTsOy.js';
 import { d as defineCustomElement$6 } from './p-kbilJltW.js';
 import { d as defineCustomElement$5 } from './p-ao6VxuAL.js';
 import { d as defineCustomElement$4 } from './p-CFeDwD40.js';
 import { d as defineCustomElement$3 } from './p-d3kelm3z.js';
-import { d as defineCustomElement$2 } from './p-elpxqGIV.js';
+import { d as defineCustomElement$2 } from './p-cIIaCJPC.js';
 import { d as defineCustomElement$1 } from './p-DxDoo-4C.js';
 
 const nylasCustomEventSlugCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--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-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff;width:inherit}.nylas-custom-event-slug{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200);text-align:left;background-color:var(--nylas-base-0);color:var(--nylas-base-900)}.nylas-custom-event-slug .header{padding:1rem;display:grid;grid-template-columns:1fr auto}.nylas-custom-event-slug .header h3{border-radius:var(--nylas-border-radius-2x);margin:0;font-size:16px;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-custom-event-slug .header p{margin:0.25rem 0 0 0;font-size:0.875rem;font-weight:400;line-height:20px;color:var(--nylas-base-600);text-align:left}.nylas-custom-event-slug .header .drawer-toggle{display:flex;gap:24px;align-items:center}.nylas-custom-event-slug .header .drawer-toggle .chevron{display:flex;align-self:center;cursor:pointer}.nylas-custom-event-slug .header .drawer-toggle .chevron:hover,.nylas-custom-event-slug .header .drawer-toggle .chevron:active{color:var(--nylas-primary)}.nylas-custom-event-slug .header .drawer-toggle .chevron.open{transform:rotate(90deg)}.nylas-custom-event-slug .header .drawer-toggle .chevron.closed{transform:rotate(270deg)}.nylas-custom-event-slug .header .drawer-toggle .chevron.disabled{cursor:not-allowed;color:var(--nylas-base-300)}.nylas-custom-event-slug .header .drawer-toggle .chevron.disabled:hover{color:var(--nylas-base-300)}.nylas-custom-event-slug .nylas-custom-event-slug__body{display:grid;grid-template-columns:1fr;background-color:var(--nylas-base-25);border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 768px){.nylas-custom-event-slug .nylas-custom-event-slug__body{grid-template-columns:1fr}}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section{padding:1rem;display:flex;flex-direction:column;gap:1rem;color:var(--nylas-base-800)}@media screen and (max-width: 768px){.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section{border:none}}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section .nylas-custom-event-slug__row{display:flex;align-items:center;gap:1rem}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section .nylas-custom-event-slug__row label{display:flex;align-items:center}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section .nylas-custom-event-slug__row label span.required{color:var(--nylas-error, #cc4841)}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section .nylas-custom-event-slug__row label span.label-icon{margin-left:4px}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section .nylas-custom-event-slug__row label span.label-icon tooltip-component{display:flex}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section .nylas-custom-event-slug__row p{margin:0.25rem 0 0 0;font-size:16px;font-weight:500;line-height:24px;color:var(--nylas-base-900)}.nylas-custom-event-slug .nylas-custom-event-slug__body .nylas-custom-event-slug__section .nylas-custom-event-slug__row .input-container{width:100%}.nylas-custom-event-slug .nylas-custom-event-slug__body span.error-message{color:var(--nylas-error)}.nylas-custom-event-slug .nylas-custom-event-slug__body span.help-text{margin:0.25rem 0 0 0;font-size:0.875rem;font-weight:400;line-height:20px;color:var(--nylas-base-600);text-align:left}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper{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:-moz-available;width:-webkit-fill-available;display:flex;flex-direction:row;gap:0.125rem;border-radius:var(--nylas-border-radius-2x);z-index:1}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper:focus{outline-color:var(--nylas-primary)}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper.error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper.error::placeholder{font-weight:400}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper::placeholder{color:var(--nylas-base-300)}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper.focus{outline:2px solid var(--nylas-primary)}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper.error{border-color:var(--nylas-error);outline:none}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper input-component::part(ic__input){outline:none;border:none;width:100%;font-size:16px;height:auto;padding-left:0px}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper .prefix{z-index:0;margin-top:1px;color:var(--nylas-base-400);font-weight:500;font-size:24px}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper .icon{margin-right:0.25rem;padding:0 0.75rem;height:100%;display:flex;align-items:center;right:0;cursor:pointer;user-select:none}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper .icon.disabled{cursor:not-allowed}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper .icon:hover svg path{fill:var(--nylas-primary)}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper .icon:active svg path{fill:var(--nylas-base-500)}.nylas-custom-event-slug .nylas-custom-event-slug__input-wrapper .icon .copied{display:flex;align-items:center;font-size:0.875rem;gap:0.125rem}";
@@ -254,6 +254,6 @@ function defineCustomElement() {
 }
 
 export { NylasCustomEventSlug as N, defineCustomElement as d };
-//# sourceMappingURL=p-CA-CDvvH.js.map
+//# sourceMappingURL=p-B_HtmTBC.js.map
 
-//# sourceMappingURL=p-CA-CDvvH.js.map
+//# sourceMappingURL=p-B_HtmTBC.js.map

package/dist/components/{p-CA-CDvvH.js.map → p-B_HtmTBC.js.map}

@@ -1 +1 @@
-{"file":"p-CA-CDvvH.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler-editor/nylas-custom-event-slug/nylas-custom-event-slug.scss?tag=nylas-custom-event-slug&encapsulation=shadow","src/components/scheduler-editor/nylas-custom-event-slug/nylas-custom-event-slug.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n@use '../../../common/mixins/inputs' as *;\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-custom-event-slug {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  margin: 1rem;\n  border-radius: var(--nylas-border-radius-2x);\n  border: 1px solid var(--nylas-base-200);\n  text-align: left;\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-900);\n\n  .header {\n    padding: 1rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n\n    h3 {\n      border-radius: var(--nylas-border-radius-2x);\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      line-height: 20px;\n      color: var(--nylas-base-900);\n      text-align: left;\n    }\n\n    p {\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n    }\n\n    .drawer-toggle {\n      display: flex;\n      gap: 24px;\n      align-items: center;\n\n      .chevron {\n        display: flex;\n        align-self: center;\n        cursor: pointer;\n\n        &:hover,\n        &:active {\n          color: var(--nylas-primary);\n        }\n\n        &.open {\n          transform: rotate(90deg);\n        }\n\n        &.closed {\n          transform: rotate(270deg);\n        }\n\n        &.disabled {\n          cursor: not-allowed;\n          color: var(--nylas-base-300);\n\n          &:hover {\n            color: var(--nylas-base-300);\n          }\n        }\n      }\n    }\n  }\n\n  .nylas-custom-event-slug__body {\n    display: grid;\n    grid-template-columns: 1fr;\n    background-color: var(--nylas-base-25);\n    border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n    border-top: 1px solid var(--nylas-base-200);\n\n    @media #{$mobile} {\n      grid-template-columns: 1fr;\n    }\n\n    .nylas-custom-event-slug__section {\n      padding: 1rem;\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      color: var(--nylas-base-800);\n\n      @media #{$mobile} {\n        border: none;\n      }\n\n      .nylas-custom-event-slug__row {\n        display: flex;\n        align-items: center;\n        gap: 1rem;\n\n        label {\n          display: flex;\n          align-items: center;\n\n          span.required {\n            color: var(--nylas-error, #cc4841);\n          }\n\n          span.label-icon {\n            margin-left: 4px;\n\n            tooltip-component {\n              display: flex;\n            }\n          }\n        }\n\n        p {\n          margin: 0.25rem 0 0 0;\n          font-size: 16px;\n          font-weight: 500;\n          line-height: 24px;\n          color: var(--nylas-base-900);\n        }\n\n        .input-container {\n          width: 100%;\n        }\n      }\n    }\n\n    span.error-message {\n      color: var(--nylas-error);\n    }\n\n    span.help-text {\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n    }\n  }\n\n  .nylas-custom-event-slug__input-wrapper {\n    @include textfield;\n    width: -moz-available;\n    width: -webkit-fill-available;\n    display: flex;\n    flex-direction: row;\n    gap: 0.125rem;\n    border-radius: var(--nylas-border-radius-2x);\n    z-index: 1;\n\n    &.focus {\n      outline: 2px solid var(--nylas-primary);\n    }\n\n    &.error {\n      border-color: var(--nylas-error);\n      outline: none;\n    }\n\n    input-component::part(ic__input) {\n      outline: none;\n      border: none;\n      width: 100%;\n      font-size: 16px;\n      height: auto;\n      padding-left: 0px;\n    }\n\n    .prefix {\n      z-index: 0;\n      margin-top: 1px;\n      color: var(--nylas-base-400);\n      font-weight: 500;\n      font-size: 24px;\n    }\n\n    .icon {\n      margin-right: 0.25rem;\n      padding: 0 0.75rem;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      right: 0;\n      cursor: pointer;\n      user-select: none;\n\n      &.disabled {\n        cursor: not-allowed;\n      }\n\n      &:hover {\n        svg path {\n          fill: var(--nylas-primary);\n        }\n      }\n\n      &:active {\n        svg path {\n          fill: var(--nylas-base-500);\n        }\n      }\n\n      .copied {\n        display: flex;\n        align-items: center;\n        font-size: 0.875rem;\n        gap: 0.125rem;\n      }\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, error } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\nimport { ThemeConfig } from '@nylas/core';\n\n/**\n * The `nylas-custom-event-slug` component is a UI component that allows users to add a custom URL slug for their event link.\n *\n * @part nces - The nylas-custom-event-slug container\n * @part nces__body - The body of the event communication section\n * @part nces__header - The header of the event communication section\n * @part nces__drawer-toggle--container - The card's drawer toggle container\n * @part nces__input-textfield - The custom slug input textfield\n */\n@Component({\n  tag: 'nylas-custom-event-slug',\n  styleUrl: 'nylas-custom-event-slug.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasCustomEventSlug {\n  @Element() host!: HTMLNylasCustomEventSlugElement;\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * The default custom event slug\n   */\n  @Prop() defaultUrlSlug?: string;\n  /**\n   * Is the custom event slug card expanded\n   */\n  @Prop() isOpen: boolean = true;\n  /**\n   * Slug error message\n   */\n  @Prop() slugErrorMessage: string = '';\n  /**\n   * The name of the component\n   */\n  @Prop() name: string = 'custom-event-slug';\n  /**\n   * Indicates if a slug is required for the configuration.\n   * When set to true, the user must enter a slug when creating or editing a configuration.\n   * The slug is used for hosted pages that are public.\n   */\n  @Prop() requiresSlug: boolean = false;\n  /**\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: LANGUAGE_CODE;\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The URL slug state\n   */\n  @State() urlSlug!: string;\n\n  /**\n   * The focus state of the input container.\n   */\n  @State() focus = false;\n\n  /**\n   * The copied state for the copy to clipboard button\n   */\n  @State() copied = false;\n\n  @State() requiredError: string = i18next.t('fieldRequired', { field: 'Slug' });\n  @State() patternError: string = i18next.t('invalidInputFormat', { field: 'Slug' });\n\n  /**\n   * This event is fired when the slug value changes\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-custom-event-slug', 'connectedCallback');\n    // Use queueMicrotask to defer theme application until after React has set props.\n    // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n    queueMicrotask(() => {\n      if (this.themeConfig) {\n        this.applyThemeConfig(this.themeConfig);\n        this.host.setAttribute('data-themed', '');\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    debug('nylas-custom-event-slug', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-custom-event-slug', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-custom-event-slug', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      debug('No selected configuration found');\n      this.urlSlug = this.defaultUrlSlug || '';\n    }\n  }\n\n  componentWillUpdate() {\n    debug('nylas-custom-event-slug', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-custom-event-slug', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-custom-event-slug', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-custom-event-slug', 'componentDidRender');\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-custom-event-slug', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue);\n    this.urlSlug = newValue?.slug || this.defaultUrlSlug || '';\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    i18next.changeLanguage(newVal);\n    this.requiredError = i18next.t('fieldRequired', { field: 'Slug' });\n    this.patternError = i18next.t('invalidInputFormat', { field: 'Slug' });\n  }\n\n  @Watch('themeConfig')\n  themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n    if (newVal === oldVal) return;\n    this.applyThemeConfig(newVal);\n  }\n\n  @Listen('nylasFormInputChanged')\n  async nylasFormInputChangeHandler(event: CustomEvent<{ value: string; name: string }>) {\n    const { name, value } = event.detail;\n    this.internals.setValidity({});\n\n    if (name === 'event-slug') {\n      this.urlSlug = value;\n      this.internals.setFormValue(JSON.stringify(value), this.name);\n      this.valueChanged.emit({ value: JSON.stringify(value), name: this.name });\n    }\n  }\n\n  @Listen('nylasFormInputFocused')\n  async nylasFormInputFocusHandler() {\n    this.focus = true;\n  }\n\n  @Listen('nylasFormInputBlurred')\n  async nylasFormInputBlurHandler() {\n    this.slugErrorMessage = '';\n    this.internals.setValidity({});\n    this.focus = false;\n    if (this.requiresSlug && this.urlSlug.trim() === '') {\n      this.internals.setValidity({ customError: true }, i18next.t('nylasCustomEventSlug.slugRequiredErrorMessage'));\n      this.slugErrorMessage = i18next.t('nylasCustomEventSlug.slugRequiredErrorMessage');\n      return;\n    }\n    if (!/^[A-Za-z0-9._-]*$/.test(this.urlSlug.trim())) {\n      this.internals.setValidity({ customError: true }, i18next.t('nylasCustomEventSlug.slugErrorMessage'));\n      this.slugErrorMessage = i18next.t('nylasCustomEventSlug.slugErrorMessage');\n    }\n  }\n\n  @Listen('formSubmitted', { target: 'window' })\n  formSubmittedHandler(event: CustomEvent) {\n    debug('nylas-event-title', 'formSubmittedHandler', event);\n    this.nylasFormInputBlurHandler();\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  toggleDrawer() {\n    this.isOpen = !this.isOpen;\n  }\n\n  async copyToClipboard() {\n    try {\n      await navigator.clipboard.writeText(`${this.urlSlug}`);\n\n      this.copied = true;\n      setTimeout(() => {\n        this.copied = false;\n      }, 1000);\n    } catch (err) {\n      error('Failed to copy: ', err);\n    }\n  }\n\n  @RegisterComponent<NylasCustomEventSlug, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-custom-event-slug',\n    stateToProps: new Map([\n      ['schedulerConfig.requiresSlug', 'requiresSlug'],\n      ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n      ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n      ['schedulerConfig.themeConfig', 'themeConfig'],\n    ]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    if (!this.requiresSlug) return null;\n    const isComponentReady = typeof this.urlSlug !== 'undefined';\n    return (\n      <Host>\n        <div class=\"nylas-custom-event-slug\" part=\"nces\">\n          <div class=\"header\" part=\"nces__header\">\n            <div>\n              <h3>{i18next.t('nylasCustomEventSlug.headerTitle')}</h3>\n              <p>{i18next.t('nylasCustomEventSlug.headerSubTitle')}</p>\n            </div>\n            <div class=\"drawer-toggle\" part=\"nces__drawer-toggle--container\">\n              <span class={`chevron ${this.isOpen ? 'open' : 'closed'} `} onClick={() => this.toggleDrawer()}>\n                <chevron-icon width=\"24\" height=\"24\" />\n              </span>\n            </div>\n          </div>\n\n          {this.isOpen && (\n            <div class=\"nylas-custom-event-slug__body\" part=\"nces__body\">\n              <div class=\"nylas-custom-event-slug__section\">\n                <div class=\"nylas-custom-event-slug__row\">\n                  <div class=\"input-container\">\n                    <label>\n                      {i18next.t('nylasCustomEventSlug.eventSlugLabel')}\n                      <span class=\"label-icon\">\n                        <tooltip-component>\n                          <info-icon slot=\"tooltip-icon\" />\n                          <span slot=\"tooltip-content\">{i18next.t('nylasCustomEventSlug.tooltip.desc')}</span>\n                        </tooltip-component>\n                      </span>\n                    </label>\n\n                    <div class={{ 'nylas-custom-event-slug__input-wrapper': true, 'focus': this.focus, 'error': !!this.slugErrorMessage }}>\n                      <div slot=\"prefix\" class=\"prefix\">\n                        &#47;\n                      </div>\n                      {isComponentReady && (\n                        <input-component\n                          name=\"event-slug\"\n                          id=\"event-slug\"\n                          type=\"text\"\n                          required={false}\n                          placeholder=\"my-link-name\"\n                          exportparts=\"ic_input: nces__input-textfield\"\n                          defaultValue={this.urlSlug}\n                          requiredError={this.requiredError}\n                          patternError={this.patternError}\n                          themeConfig={this.themeConfig}\n                        />\n                      )}\n                      <div slot=\"icon\" class={{ icon: true, disabled: !this.urlSlug }} onClick={() => !this.copied && !!this.urlSlug && this.copyToClipboard()}>\n                        {this.copied ? (\n                          <div class=\"copied\">\n                            <checkmark-icon width=\"12\" height=\"18\" /> {i18next.t('nylasCustomEventSlug.copied')}\n                          </div>\n                        ) : (\n                          <copy-icon width=\"12\" height=\"18\" />\n                        )}\n                      </div>\n                    </div>\n                    {this.slugErrorMessage && <span class=\"error-message\">{this.slugErrorMessage}</span>}\n                  </div>\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-B_HtmTBC.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler-editor/nylas-custom-event-slug/nylas-custom-event-slug.scss?tag=nylas-custom-event-slug&encapsulation=shadow","src/components/scheduler-editor/nylas-custom-event-slug/nylas-custom-event-slug.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n@use '../../../common/mixins/inputs' as *;\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-custom-event-slug {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  margin: 1rem;\n  border-radius: var(--nylas-border-radius-2x);\n  border: 1px solid var(--nylas-base-200);\n  text-align: left;\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-900);\n\n  .header {\n    padding: 1rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n\n    h3 {\n      border-radius: var(--nylas-border-radius-2x);\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      line-height: 20px;\n      color: var(--nylas-base-900);\n      text-align: left;\n    }\n\n    p {\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n    }\n\n    .drawer-toggle {\n      display: flex;\n      gap: 24px;\n      align-items: center;\n\n      .chevron {\n        display: flex;\n        align-self: center;\n        cursor: pointer;\n\n        &:hover,\n        &:active {\n          color: var(--nylas-primary);\n        }\n\n        &.open {\n          transform: rotate(90deg);\n        }\n\n        &.closed {\n          transform: rotate(270deg);\n        }\n\n        &.disabled {\n          cursor: not-allowed;\n          color: var(--nylas-base-300);\n\n          &:hover {\n            color: var(--nylas-base-300);\n          }\n        }\n      }\n    }\n  }\n\n  .nylas-custom-event-slug__body {\n    display: grid;\n    grid-template-columns: 1fr;\n    background-color: var(--nylas-base-25);\n    border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n    border-top: 1px solid var(--nylas-base-200);\n\n    @media #{$mobile} {\n      grid-template-columns: 1fr;\n    }\n\n    .nylas-custom-event-slug__section {\n      padding: 1rem;\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      color: var(--nylas-base-800);\n\n      @media #{$mobile} {\n        border: none;\n      }\n\n      .nylas-custom-event-slug__row {\n        display: flex;\n        align-items: center;\n        gap: 1rem;\n\n        label {\n          display: flex;\n          align-items: center;\n\n          span.required {\n            color: var(--nylas-error, #cc4841);\n          }\n\n          span.label-icon {\n            margin-left: 4px;\n\n            tooltip-component {\n              display: flex;\n            }\n          }\n        }\n\n        p {\n          margin: 0.25rem 0 0 0;\n          font-size: 16px;\n          font-weight: 500;\n          line-height: 24px;\n          color: var(--nylas-base-900);\n        }\n\n        .input-container {\n          width: 100%;\n        }\n      }\n    }\n\n    span.error-message {\n      color: var(--nylas-error);\n    }\n\n    span.help-text {\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n    }\n  }\n\n  .nylas-custom-event-slug__input-wrapper {\n    @include textfield;\n    width: -moz-available;\n    width: -webkit-fill-available;\n    display: flex;\n    flex-direction: row;\n    gap: 0.125rem;\n    border-radius: var(--nylas-border-radius-2x);\n    z-index: 1;\n\n    &.focus {\n      outline: 2px solid var(--nylas-primary);\n    }\n\n    &.error {\n      border-color: var(--nylas-error);\n      outline: none;\n    }\n\n    input-component::part(ic__input) {\n      outline: none;\n      border: none;\n      width: 100%;\n      font-size: 16px;\n      height: auto;\n      padding-left: 0px;\n    }\n\n    .prefix {\n      z-index: 0;\n      margin-top: 1px;\n      color: var(--nylas-base-400);\n      font-weight: 500;\n      font-size: 24px;\n    }\n\n    .icon {\n      margin-right: 0.25rem;\n      padding: 0 0.75rem;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      right: 0;\n      cursor: pointer;\n      user-select: none;\n\n      &.disabled {\n        cursor: not-allowed;\n      }\n\n      &:hover {\n        svg path {\n          fill: var(--nylas-primary);\n        }\n      }\n\n      &:active {\n        svg path {\n          fill: var(--nylas-base-500);\n        }\n      }\n\n      .copied {\n        display: flex;\n        align-items: center;\n        font-size: 0.875rem;\n        gap: 0.125rem;\n      }\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, error } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\nimport { ThemeConfig } from '@nylas/core';\n\n/**\n * The `nylas-custom-event-slug` component is a UI component that allows users to add a custom URL slug for their event link.\n *\n * @part nces - The nylas-custom-event-slug container\n * @part nces__body - The body of the event communication section\n * @part nces__header - The header of the event communication section\n * @part nces__drawer-toggle--container - The card's drawer toggle container\n * @part nces__input-textfield - The custom slug input textfield\n */\n@Component({\n  tag: 'nylas-custom-event-slug',\n  styleUrl: 'nylas-custom-event-slug.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasCustomEventSlug {\n  @Element() host!: HTMLNylasCustomEventSlugElement;\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * The default custom event slug\n   */\n  @Prop() defaultUrlSlug?: string;\n  /**\n   * Is the custom event slug card expanded\n   */\n  @Prop() isOpen: boolean = true;\n  /**\n   * Slug error message\n   */\n  @Prop() slugErrorMessage: string = '';\n  /**\n   * The name of the component\n   */\n  @Prop() name: string = 'custom-event-slug';\n  /**\n   * Indicates if a slug is required for the configuration.\n   * When set to true, the user must enter a slug when creating or editing a configuration.\n   * The slug is used for hosted pages that are public.\n   */\n  @Prop() requiresSlug: boolean = false;\n  /**\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: LANGUAGE_CODE;\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The URL slug state\n   */\n  @State() urlSlug!: string;\n\n  /**\n   * The focus state of the input container.\n   */\n  @State() focus = false;\n\n  /**\n   * The copied state for the copy to clipboard button\n   */\n  @State() copied = false;\n\n  @State() requiredError: string = i18next.t('fieldRequired', { field: 'Slug' });\n  @State() patternError: string = i18next.t('invalidInputFormat', { field: 'Slug' });\n\n  /**\n   * This event is fired when the slug value changes\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-custom-event-slug', 'connectedCallback');\n    // Use queueMicrotask to defer theme application until after React has set props.\n    // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n    queueMicrotask(() => {\n      if (this.themeConfig) {\n        this.applyThemeConfig(this.themeConfig);\n        this.host.setAttribute('data-themed', '');\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    debug('nylas-custom-event-slug', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-custom-event-slug', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-custom-event-slug', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      debug('No selected configuration found');\n      this.urlSlug = this.defaultUrlSlug || '';\n    }\n  }\n\n  componentWillUpdate() {\n    debug('nylas-custom-event-slug', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-custom-event-slug', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-custom-event-slug', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-custom-event-slug', 'componentDidRender');\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-custom-event-slug', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue);\n    this.urlSlug = newValue?.slug || this.defaultUrlSlug || '';\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    i18next.changeLanguage(newVal);\n    this.requiredError = i18next.t('fieldRequired', { field: 'Slug' });\n    this.patternError = i18next.t('invalidInputFormat', { field: 'Slug' });\n  }\n\n  @Watch('themeConfig')\n  themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n    if (newVal === oldVal) return;\n    this.applyThemeConfig(newVal);\n  }\n\n  @Listen('nylasFormInputChanged')\n  async nylasFormInputChangeHandler(event: CustomEvent<{ value: string; name: string }>) {\n    const { name, value } = event.detail;\n    this.internals.setValidity({});\n\n    if (name === 'event-slug') {\n      this.urlSlug = value;\n      this.internals.setFormValue(JSON.stringify(value), this.name);\n      this.valueChanged.emit({ value: JSON.stringify(value), name: this.name });\n    }\n  }\n\n  @Listen('nylasFormInputFocused')\n  async nylasFormInputFocusHandler() {\n    this.focus = true;\n  }\n\n  @Listen('nylasFormInputBlurred')\n  async nylasFormInputBlurHandler() {\n    this.slugErrorMessage = '';\n    this.internals.setValidity({});\n    this.focus = false;\n    if (this.requiresSlug && this.urlSlug.trim() === '') {\n      this.internals.setValidity({ customError: true }, i18next.t('nylasCustomEventSlug.slugRequiredErrorMessage'));\n      this.slugErrorMessage = i18next.t('nylasCustomEventSlug.slugRequiredErrorMessage');\n      return;\n    }\n    if (!/^[A-Za-z0-9._-]*$/.test(this.urlSlug.trim())) {\n      this.internals.setValidity({ customError: true }, i18next.t('nylasCustomEventSlug.slugErrorMessage'));\n      this.slugErrorMessage = i18next.t('nylasCustomEventSlug.slugErrorMessage');\n    }\n  }\n\n  @Listen('formSubmitted', { target: 'window' })\n  formSubmittedHandler(event: CustomEvent) {\n    debug('nylas-event-title', 'formSubmittedHandler', event);\n    this.nylasFormInputBlurHandler();\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  toggleDrawer() {\n    this.isOpen = !this.isOpen;\n  }\n\n  async copyToClipboard() {\n    try {\n      await navigator.clipboard.writeText(`${this.urlSlug}`);\n\n      this.copied = true;\n      setTimeout(() => {\n        this.copied = false;\n      }, 1000);\n    } catch (err) {\n      error('Failed to copy: ', err);\n    }\n  }\n\n  @RegisterComponent<NylasCustomEventSlug, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-custom-event-slug',\n    stateToProps: new Map([\n      ['schedulerConfig.requiresSlug', 'requiresSlug'],\n      ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n      ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n      ['schedulerConfig.themeConfig', 'themeConfig'],\n    ]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    if (!this.requiresSlug) return null;\n    const isComponentReady = typeof this.urlSlug !== 'undefined';\n    return (\n      <Host>\n        <div class=\"nylas-custom-event-slug\" part=\"nces\">\n          <div class=\"header\" part=\"nces__header\">\n            <div>\n              <h3>{i18next.t('nylasCustomEventSlug.headerTitle')}</h3>\n              <p>{i18next.t('nylasCustomEventSlug.headerSubTitle')}</p>\n            </div>\n            <div class=\"drawer-toggle\" part=\"nces__drawer-toggle--container\">\n              <span class={`chevron ${this.isOpen ? 'open' : 'closed'} `} onClick={() => this.toggleDrawer()}>\n                <chevron-icon width=\"24\" height=\"24\" />\n              </span>\n            </div>\n          </div>\n\n          {this.isOpen && (\n            <div class=\"nylas-custom-event-slug__body\" part=\"nces__body\">\n              <div class=\"nylas-custom-event-slug__section\">\n                <div class=\"nylas-custom-event-slug__row\">\n                  <div class=\"input-container\">\n                    <label>\n                      {i18next.t('nylasCustomEventSlug.eventSlugLabel')}\n                      <span class=\"label-icon\">\n                        <tooltip-component>\n                          <info-icon slot=\"tooltip-icon\" />\n                          <span slot=\"tooltip-content\">{i18next.t('nylasCustomEventSlug.tooltip.desc')}</span>\n                        </tooltip-component>\n                      </span>\n                    </label>\n\n                    <div class={{ 'nylas-custom-event-slug__input-wrapper': true, 'focus': this.focus, 'error': !!this.slugErrorMessage }}>\n                      <div slot=\"prefix\" class=\"prefix\">\n                        &#47;\n                      </div>\n                      {isComponentReady && (\n                        <input-component\n                          name=\"event-slug\"\n                          id=\"event-slug\"\n                          type=\"text\"\n                          required={false}\n                          placeholder=\"my-link-name\"\n                          exportparts=\"ic_input: nces__input-textfield\"\n                          defaultValue={this.urlSlug}\n                          requiredError={this.requiredError}\n                          patternError={this.patternError}\n                          themeConfig={this.themeConfig}\n                        />\n                      )}\n                      <div slot=\"icon\" class={{ icon: true, disabled: !this.urlSlug }} onClick={() => !this.copied && !!this.urlSlug && this.copyToClipboard()}>\n                        {this.copied ? (\n                          <div class=\"copied\">\n                            <checkmark-icon width=\"12\" height=\"18\" /> {i18next.t('nylasCustomEventSlug.copied')}\n                          </div>\n                        ) : (\n                          <copy-icon width=\"12\" height=\"18\" />\n                        )}\n                      </div>\n                    </div>\n                    {this.slugErrorMessage && <span class=\"error-message\">{this.slugErrorMessage}</span>}\n                  </div>\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CaPXccMa.js → p-Begx19Z9.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, e as createEvent, h } from './p-Bht9ktsW.js';
-import { i as instance } from './p-CFk78OEk.js';
+import { i as instance } from './p-BjxQTsOy.js';
 import { d as defineCustomElement$1 } from './p-ao6VxuAL.js';
 
 const inputColorPickerCss = ":host{display:block;position:relative;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--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-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff;width:100%}@media screen and (max-width: 768px){:host{position:unset}}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%;word-break:break-word;overflow-wrap:break-word;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)}.color-picker-container{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:-moz-available;width:-webkit-fill-available;padding-left:0;gap:0;overflow:hidden}.color-picker-container:focus{outline-color:var(--nylas-primary)}.color-picker-container.error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}.color-picker-container.error::placeholder{font-weight:400}.color-picker-container::placeholder{color:var(--nylas-base-300)}.color-picker-container input{display:flex;align-items:center;height:100%;appearance:none;border:none;border-right:1px solid var(--nylas-base-200);background:transparent}.color-picker-container input::-webkit-color-swatch{min-width:30px;border-radius:0.25rem;border:1px solid var(--nylas-base-200);margin:0.25rem}.color-picker-container input::-moz-color-swatch{min-width:30px;border-radius:0.25rem;border:1px solid var(--nylas-base-200);margin:0.25rem}.color-picker-container.error{border:1px solid var(--nylas-error)}.color-picker-container:hover,.color-picker-container:active{outline:1px solid var(--nylas-primary)}.color-picker-container:active{outline:2px solid var(--nylas-primary)}.color-picker-container label{width:100%}.labelBtn{color:var(--nylas-base-800);padding:14px;font-size:16px;font-family:var(--nylas-font-family);cursor:pointer;display:flex;flex-direction:row;justify-content:space-between;width:100%;gap:0.5rem;background:transparent;border:none}.labelBtn.error{border:1px solid var(--nylas-error)}.labelBtn.focus{background:transparent}.labelBtn:hover,.labelBtn:active{outline:1px solid var(--nylas-primary)}.labelBtn span.chevron{display:flex;align-self:center}.labelBtn span.open{transform:rotate(90deg)}.labelBtn span.closed{transform:rotate(270deg)}.labelBtn span.selected-option{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:144px;font-size:14px;line-height:20px}@media screen and (max-width: 768px){.labelBtn span.selected-option{max-width:124px;font-size:16px}}";
@@ -98,6 +98,6 @@ function defineCustomElement() {
 }
 
 export { InputColorPicker as I, defineCustomElement as d };
-//# sourceMappingURL=p-CaPXccMa.js.map
+//# sourceMappingURL=p-Begx19Z9.js.map
 
-//# sourceMappingURL=p-CaPXccMa.js.map
+//# sourceMappingURL=p-Begx19Z9.js.map

package/dist/components/{p-CaPXccMa.js.map → p-Begx19Z9.js.map}

@@ -1 +1 @@
-{"file":"p-CaPXccMa.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/design-system/input-color-picker/input-color-picker.scss?tag=input-color-picker&encapsulation=shadow","src/components/design-system/input-color-picker/input-color-picker.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n@use '../../../common/mixins/inputs' as *;\n\n:host {\n  display: block;\n  position: relative;\n  @include default-css-variables;\n  width: 100%;\n\n  @media #{$mobile} {\n    position: unset;\n  }\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.color-picker-container {\n  @include textfield;\n  width: -moz-available;\n  width: -webkit-fill-available;\n  padding-left: 0;\n  gap: 0;\n  overflow: hidden;\n\n  input {\n    display: flex;\n    align-items: center;\n    height: 100%;\n    appearance: none;\n    border: none;\n    border-right: 1px solid var(--nylas-base-200);\n    background: transparent;\n\n    &::-webkit-color-swatch {\n      min-width: 30px;\n      border-radius: 0.25rem;\n      border: 1px solid var(--nylas-base-200);\n      margin: 0.25rem;\n    }\n\n    &::-moz-color-swatch {\n      min-width: 30px;\n      border-radius: 0.25rem;\n      border: 1px solid var(--nylas-base-200);\n      margin: 0.25rem;\n    }\n  }\n\n  &.error {\n    border: 1px solid var(--nylas-error);\n  }\n\n  &:hover,\n  &:active {\n    outline: 1px solid var(--nylas-primary);\n  }\n\n  &:active {\n    outline: 2px solid var(--nylas-primary);\n  }\n\n  label {\n    width: 100%;\n  }\n}\n\n.labelBtn {\n  color: var(--nylas-base-800);\n  padding: 14px;\n  font-size: 16px;\n  font-family: var(--nylas-font-family);\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  gap: 0.5rem;\n  background: transparent;\n  border: none;\n\n  &.error {\n    border: 1px solid var(--nylas-error);\n  }\n\n  &.focus {\n    background: transparent;\n  }\n\n  &:hover,\n  &:active {\n    outline: 1px solid var(--nylas-primary);\n  }\n\n  span {\n    &.chevron {\n      display: flex;\n      align-self: center;\n    }\n\n    &.open {\n      transform: rotate(90deg);\n    }\n\n    &.closed {\n      transform: rotate(270deg);\n    }\n\n    &.selected-option {\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n      max-width: 144px;\n      font-size: 14px;\n      line-height: 20px;\n\n      @media #{$mobile} {\n        max-width: 124px;\n        font-size: 16px;\n      }\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\nimport i18next from '@/utils/i18n';\n\n/**\n * The `input-color-picker` component is a dropdown that allows users to select an accent color from either RGB inputs or an interactive color picker and converts them to a hex value.\n * This component is used in the scheduling form to input dropdown type inputs.\n * @part icp_color-picker - The dropdown container\n * @part icp_color-picker-button - The dropdown button\n * @part icp_color-picker-button-selected-label - The selected option label\n * @part icp_color-picker-label - The dropdown label\n */\n@Component({\n  tag: 'input-color-picker',\n  styleUrl: 'input-color-picker.scss',\n  shadow: true,\n})\nexport class InputColorPicker {\n  @Element() el!: HTMLElement;\n  private readonly componentType: string = 'color-picker';\n\n  private inputRef?: HTMLInputElement;\n\n  // Props\n  /**\n   * The name of the dropdown\n   */\n  @Prop() name!: string;\n  /**\n   * The default selected color\n   */\n  @Prop({ attribute: 'default-selected-color' }) defaultSelectedColor?: string;\n\n  // States\n  /**\n   * The selected option\n   */\n  @State() selectedColor: string | undefined = this.defaultSelectedColor;\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   * option in the list box to screen readers. The value of aria-activedescendant is the ID of\n   * the active option.\n   */\n  @State() ariaActivedescendant: string = '';\n\n  /**\n   * The error message to display when the value is empty or null and the dropdown is required\n   */\n  @State() errorMessage: string = '';\n\n  @State() private currentLanguage: string = i18next.language;\n\n  // Events\n  /**\n   * This event is fired when the selected option is changed\n   */\n  @Event({ bubbles: true, composed: true }) nylasFormDropdownChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    error?: string;\n    label?: string;\n  }>;\n\n  private languageChangedHandler = (lng: string) => {\n    this.currentLanguage = lng;\n  };\n\n  // Lifecycle events\n  connectedCallback() {\n    i18next.on('languageChanged', this.languageChangedHandler);\n  }\n\n  disconnectedCallback() {\n    i18next.off('languageChanged', this.languageChangedHandler);\n  }\n\n  componentWillLoad() {\n    this.selectedColor = this.defaultSelectedColor;\n    this.el.setAttribute('component-type', this.componentType);\n  }\n\n  // Methods\n  handleFocus() {\n    this.isOpen = true;\n  }\n  handleBlur() {\n    this.isOpen = false;\n  }\n\n  // handle input separately from change to allow for live updates in label\n  handleInput(event: Event) {\n    this.selectedColor = (event.target as HTMLInputElement).value;\n  }\n\n  handleChange(event: Event) {\n    this.selectedColor = (event.target as HTMLInputElement).value;\n    this.nylasFormDropdownChanged.emit({\n      value: this.selectedColor,\n      name: this.name,\n      error: this.errorMessage,\n    });\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.code === 'Enter' || event.code === 'Space') {\n      event.preventDefault();\n      this.inputRef?.click();\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    const isClickInside = path.includes(this.el);\n\n    if (!isClickInside && this.isOpen) {\n      this.isOpen = false;\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"color-picker-container\" part=\"icp_color-picker\" tabindex=\"0\" onKeyDown={e => this.handleKeyDown(e)}>\n        <input\n          type=\"color\"\n          ref={el => (this.inputRef = el as HTMLInputElement)}\n          id={this.name}\n          name={this.name}\n          value={this.selectedColor}\n          tabindex=\"-1\"\n          onFocus={() => this.handleFocus()}\n          onBlur={() => this.handleBlur()}\n          onInput={e => this.handleInput(e)}\n          onChange={e => this.handleChange(e)}\n          onKeyDown={e => this.handleKeyDown(e)}\n        />\n        <label\n          part=\"icp_color-picker-button\"\n          htmlFor={this.name}\n          class={{ labelBtn: true, open: this.isOpen, error: !!this.errorMessage }}\n          aria-haspopup=\"listbox\"\n          aria-expanded={this.isOpen ? 'true' : 'false'}\n          aria-label={this.name}\n        >\n          <span class=\"selected-option\" part=\"icp_color-picker-button-selected-label\" data-lang={this.currentLanguage}>\n            {this.selectedColor || i18next.t('nylasPageStyling.selectAColor')}\n          </span>\n          <span\n            class={{\n              open: this.isOpen,\n              closed: !this.isOpen,\n              chevron: true,\n            }}\n            aria-hidden=\"true\"\n          >\n            <chevron-icon width=\"16\" height=\"16\" />\n          </span>\n          {this.errorMessage && <span class=\"error help-text\">{this.errorMessage}</span>}\n        </label>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-Begx19Z9.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/design-system/input-color-picker/input-color-picker.scss?tag=input-color-picker&encapsulation=shadow","src/components/design-system/input-color-picker/input-color-picker.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n@use '../../../common/mixins/inputs' as *;\n\n:host {\n  display: block;\n  position: relative;\n  @include default-css-variables;\n  width: 100%;\n\n  @media #{$mobile} {\n    position: unset;\n  }\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.color-picker-container {\n  @include textfield;\n  width: -moz-available;\n  width: -webkit-fill-available;\n  padding-left: 0;\n  gap: 0;\n  overflow: hidden;\n\n  input {\n    display: flex;\n    align-items: center;\n    height: 100%;\n    appearance: none;\n    border: none;\n    border-right: 1px solid var(--nylas-base-200);\n    background: transparent;\n\n    &::-webkit-color-swatch {\n      min-width: 30px;\n      border-radius: 0.25rem;\n      border: 1px solid var(--nylas-base-200);\n      margin: 0.25rem;\n    }\n\n    &::-moz-color-swatch {\n      min-width: 30px;\n      border-radius: 0.25rem;\n      border: 1px solid var(--nylas-base-200);\n      margin: 0.25rem;\n    }\n  }\n\n  &.error {\n    border: 1px solid var(--nylas-error);\n  }\n\n  &:hover,\n  &:active {\n    outline: 1px solid var(--nylas-primary);\n  }\n\n  &:active {\n    outline: 2px solid var(--nylas-primary);\n  }\n\n  label {\n    width: 100%;\n  }\n}\n\n.labelBtn {\n  color: var(--nylas-base-800);\n  padding: 14px;\n  font-size: 16px;\n  font-family: var(--nylas-font-family);\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  gap: 0.5rem;\n  background: transparent;\n  border: none;\n\n  &.error {\n    border: 1px solid var(--nylas-error);\n  }\n\n  &.focus {\n    background: transparent;\n  }\n\n  &:hover,\n  &:active {\n    outline: 1px solid var(--nylas-primary);\n  }\n\n  span {\n    &.chevron {\n      display: flex;\n      align-self: center;\n    }\n\n    &.open {\n      transform: rotate(90deg);\n    }\n\n    &.closed {\n      transform: rotate(270deg);\n    }\n\n    &.selected-option {\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n      max-width: 144px;\n      font-size: 14px;\n      line-height: 20px;\n\n      @media #{$mobile} {\n        max-width: 124px;\n        font-size: 16px;\n      }\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\nimport i18next from '@/utils/i18n';\n\n/**\n * The `input-color-picker` component is a dropdown that allows users to select an accent color from either RGB inputs or an interactive color picker and converts them to a hex value.\n * This component is used in the scheduling form to input dropdown type inputs.\n * @part icp_color-picker - The dropdown container\n * @part icp_color-picker-button - The dropdown button\n * @part icp_color-picker-button-selected-label - The selected option label\n * @part icp_color-picker-label - The dropdown label\n */\n@Component({\n  tag: 'input-color-picker',\n  styleUrl: 'input-color-picker.scss',\n  shadow: true,\n})\nexport class InputColorPicker {\n  @Element() el!: HTMLElement;\n  private readonly componentType: string = 'color-picker';\n\n  private inputRef?: HTMLInputElement;\n\n  // Props\n  /**\n   * The name of the dropdown\n   */\n  @Prop() name!: string;\n  /**\n   * The default selected color\n   */\n  @Prop({ attribute: 'default-selected-color' }) defaultSelectedColor?: string;\n\n  // States\n  /**\n   * The selected option\n   */\n  @State() selectedColor: string | undefined = this.defaultSelectedColor;\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   * option in the list box to screen readers. The value of aria-activedescendant is the ID of\n   * the active option.\n   */\n  @State() ariaActivedescendant: string = '';\n\n  /**\n   * The error message to display when the value is empty or null and the dropdown is required\n   */\n  @State() errorMessage: string = '';\n\n  @State() private currentLanguage: string = i18next.language;\n\n  // Events\n  /**\n   * This event is fired when the selected option is changed\n   */\n  @Event({ bubbles: true, composed: true }) nylasFormDropdownChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    error?: string;\n    label?: string;\n  }>;\n\n  private languageChangedHandler = (lng: string) => {\n    this.currentLanguage = lng;\n  };\n\n  // Lifecycle events\n  connectedCallback() {\n    i18next.on('languageChanged', this.languageChangedHandler);\n  }\n\n  disconnectedCallback() {\n    i18next.off('languageChanged', this.languageChangedHandler);\n  }\n\n  componentWillLoad() {\n    this.selectedColor = this.defaultSelectedColor;\n    this.el.setAttribute('component-type', this.componentType);\n  }\n\n  // Methods\n  handleFocus() {\n    this.isOpen = true;\n  }\n  handleBlur() {\n    this.isOpen = false;\n  }\n\n  // handle input separately from change to allow for live updates in label\n  handleInput(event: Event) {\n    this.selectedColor = (event.target as HTMLInputElement).value;\n  }\n\n  handleChange(event: Event) {\n    this.selectedColor = (event.target as HTMLInputElement).value;\n    this.nylasFormDropdownChanged.emit({\n      value: this.selectedColor,\n      name: this.name,\n      error: this.errorMessage,\n    });\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.code === 'Enter' || event.code === 'Space') {\n      event.preventDefault();\n      this.inputRef?.click();\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    const isClickInside = path.includes(this.el);\n\n    if (!isClickInside && this.isOpen) {\n      this.isOpen = false;\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"color-picker-container\" part=\"icp_color-picker\" tabindex=\"0\" onKeyDown={e => this.handleKeyDown(e)}>\n        <input\n          type=\"color\"\n          ref={el => (this.inputRef = el as HTMLInputElement)}\n          id={this.name}\n          name={this.name}\n          value={this.selectedColor}\n          tabindex=\"-1\"\n          onFocus={() => this.handleFocus()}\n          onBlur={() => this.handleBlur()}\n          onInput={e => this.handleInput(e)}\n          onChange={e => this.handleChange(e)}\n          onKeyDown={e => this.handleKeyDown(e)}\n        />\n        <label\n          part=\"icp_color-picker-button\"\n          htmlFor={this.name}\n          class={{ labelBtn: true, open: this.isOpen, error: !!this.errorMessage }}\n          aria-haspopup=\"listbox\"\n          aria-expanded={this.isOpen ? 'true' : 'false'}\n          aria-label={this.name}\n        >\n          <span class=\"selected-option\" part=\"icp_color-picker-button-selected-label\" data-lang={this.currentLanguage}>\n            {this.selectedColor || i18next.t('nylasPageStyling.selectAColor')}\n          </span>\n          <span\n            class={{\n              open: this.isOpen,\n              closed: !this.isOpen,\n              chevron: true,\n            }}\n            aria-hidden=\"true\"\n          >\n            <chevron-icon width=\"16\" height=\"16\" />\n          </span>\n          {this.errorMessage && <span class=\"error help-text\">{this.errorMessage}</span>}\n        </label>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-DIYyA3tv.js → p-BhY18Huj.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, e as createEvent, h, i as Host } from './p-Bht9ktsW.js';
-import { R as RegisterComponent } from './p-CdMky78w.js';
-import { a as debug } from './p-DBE6FcDx.js';
-import { i as instance } from './p-CFk78OEk.js';
+import { R as RegisterComponent } from './p-jHq8WTky.js';
+import { a as debug } from './p-xxFdByBn.js';
+import { i as instance } from './p-BjxQTsOy.js';
 import { d as defineCustomElement$3 } from './p-BVH0Klhu.js';
 import { d as defineCustomElement$2 } from './p-C4BZ4XFc.js';
 import { d as defineCustomElement$1 } from './p-C7ZpwRD0.js';
@@ -167,6 +167,6 @@ function defineCustomElement() {
 }
 
 export { NylasOrganizerConfirmationCard as N, defineCustomElement as d };
-//# sourceMappingURL=p-DIYyA3tv.js.map
+//# sourceMappingURL=p-BhY18Huj.js.map
 
-//# sourceMappingURL=p-DIYyA3tv.js.map
+//# sourceMappingURL=p-BhY18Huj.js.map

package/dist/components/{p-DIYyA3tv.js.map → p-BhY18Huj.js.map}

@@ -1 +1 @@
-{"file":"p-DIYyA3tv.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.scss?tag=nylas-organizer-confirmation-card&encapsulation=shadow","src/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.event-card-wrapper {\n  height: inherit;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-900);\n  border-radius: var(--nylas-border-radius-3x);\n  position: relative;\n  margin-top: 1rem;\n  width: 424px;\n\n  box-shadow:\n    0px 1px 4px rgba(0, 0, 0, 0.1),\n    0px 3px 6px rgba(0, 0, 0, 0.06);\n\n  @media #{$mobile} {\n    width: 100%;\n    border-radius: 0px;\n  }\n}\n\n.calendar-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-200);\n  color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n  margin: 1.5rem 4rem;\n  overflow-wrap: anywhere;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  font-size: 16px;\n  font-weight: 400;\n\n  h2 {\n    color: var(--nylas-base-600);\n    margin-top: 1.5rem;\n    margin-bottom: 0.25rem;\n    font-size: 1.125rem;\n    font-weight: 600;\n  }\n}\n\n.manage-booking-description {\n  border-top: 1px solid var(--nylas-base-200);\n\n  p {\n    font-size: 16px;\n    margin: 1rem;\n    padding: 0.5rem 1rem;\n    font-weight: 400;\n    color: var(--nylas-base-800);\n  }\n}\n\n.footer {\n  padding: 0.5rem;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  background-color: var(--nylas-base-25);\n  width: 100%;\n  border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n\n  &.no-template-cols {\n    grid-template-columns: 1fr;\n  }\n\n  &.no-footer {\n    display: none;\n  }\n}\n\nsp-divider {\n  background-color: var(--nylas-base-200);\n  height: 1px;\n}\n\ncalendar-check-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\nbutton-component {\n  --dot-color: var(--nylas-base-700);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { LANGUAGE_CODE } from '@/common/constants';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, ThemeConfig } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n\n/**\n * The `nylas-organizer-confirmation-card` component is a UI component that displays the booked event card.\n *\n * @part nmcc - The booked event card host.\n * @part nmcc__card - The booked event card.\n * @part nmcc__title - The title of the booked event card.\n * @part nmcc__description - The description of the booked event card.\n * @part nmcc__button-outline - The cancel & reschedule button CTA.\n * @part nmcc__cancel-cta - The cancel button CTA.\n * @part nmcc__reschedule-cta - The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-organizer-confirmation-card',\n  styleUrl: 'nylas-organizer-confirmation-card.scss',\n  shadow: true,\n})\nexport class NylasOrganizerConfirmationCard {\n  /**\n   * The host element.\n   */\n  @Element() host!: HTMLNylasOrganizerConfirmationCardElement;\n\n  /**\n   * @standalone\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * @standalone\n   * The loading state prop. Used to display loading state when fetching availability.\n   */\n  @Prop() readonly isLoading?: boolean;\n\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n  /**\n   * Booking flow type.\n   */\n  @Prop() readonly organizerConfirmationBookingId?: string;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ attribute: 'selected-language' }) readonly selectedLanguage: string = navigator.language;\n\n  /**\n   * The state to identify which action is being performed.\n   */\n  @State() action: 'confirm' | 'reject' | null = null;\n\n  /**\n   * Reject booking button clicked event.\n   */\n  @Event() readonly rejectBookingButtonClicked!: EventEmitter<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }>;\n\n  /**\n   * Reschedule button clicked event.\n   * */\n  @Event() readonly confirmBookingButtonClicked!: EventEmitter<{\n    bookingId: string;\n    host: HTMLNylasOrganizerConfirmationCardElement;\n    errorHandler?: (error: NylasSchedulerErrorResponse) => void;\n  }>;\n\n  /**\n   * This event is fired when an error occurs while rescheduling the booking.\n   */\n  @Event() readonly confirmBookingError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  @Watch('themeConfig')\n  themeConfigChanged(newThemeConfig: ThemeConfig) {\n    this.applyThemeConfig(newThemeConfig);\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    i18next.changeLanguage(newVal);\n  }\n\n  connectedCallback() {\n    // Use queueMicrotask to defer theme application until after React has set props.\n    // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n    queueMicrotask(() => {\n      if (this.themeConfig) {\n        this.applyThemeConfig(this.themeConfig);\n        this.host.setAttribute('data-themed', '');\n      }\n    });\n  }\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-organizer-confirmation-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-organizer-confirmation-card] Component did load`);\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  private handleConfirmBookingButtonClicked = () => {\n    this.action = 'confirm';\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.confirmBookingError.emit(error);\n    };\n    if (this.organizerConfirmationBookingId && !this.isLoading) {\n      this.confirmBookingButtonClicked.emit({ bookingId: this.organizerConfirmationBookingId, host: this.host, errorHandler });\n    }\n  };\n\n  private handleRejectBookingButtonClicked = () => {\n    this.action = 'reject';\n    if (this.organizerConfirmationBookingId && !this.isLoading) {\n      this.rejectBookingButtonClicked.emit({ bookingId: this.organizerConfirmationBookingId, host: this.host });\n    }\n  };\n\n  @Method()\n  async resetAction() {\n    this.action = null;\n  }\n\n  @RegisterComponent<NylasOrganizerConfirmationCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-organizer-confirmation-card',\n    stateToProps: new Map([\n      ['scheduler.organizerConfirmationBookingId', 'organizerConfirmationBookingId'],\n      ['scheduler.configSettings', 'configSettings'],\n      ['scheduler.isLoading', 'isLoading'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.themeConfig', 'themeConfig'],\n    ]),\n    eventToProps: {\n      rejectBookingButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        nylasSchedulerConnector.scheduler.setReject(event.detail.bookingId);\n      },\n      confirmBookingButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        const { host } = event.detail;\n        const result = await nylasSchedulerConnector.scheduler.updateBooking({\n          bookingId: event.detail.bookingId,\n          status: 'confirmed',\n        });\n        const { errorHandler } = event.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n        await host.resetAction();\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nmcc\">\n        <div class=\"event-card-wrapper\" part=\"nmccc__card\">\n          <div class=\"calendar-icon\">\n            <calendar-check-icon />\n          </div>\n          <div class=\"booked-event-header\">\n            <h2 slot=\"card-title\" part=\"nmcc__title\">\n              {!!this.organizerConfirmationBookingId && `${i18next.t('bookingPendingTitle')}!`}\n            </h2>\n          </div>\n          <div class=\"manage-booking-description\">\n            <p>{i18next.t('bookingPendingnDescription')}</p>\n          </div>\n          <div\n            class={{\n              footer: true,\n            }}\n          >\n            <button-component\n              variant={'destructive'}\n              onClick={this.handleRejectBookingButtonClicked}\n              isLoading={this.isLoading && this.action === 'reject'}\n              part=\"nmcc__button-outline nmcc__cancel-cta\"\n            >\n              {`${i18next.t('rejectBookingButton')}`}\n            </button-component>\n            <button-component\n              variant={'basic'}\n              onClick={this.handleConfirmBookingButtonClicked}\n              isLoading={this.isLoading && this.action === 'confirm'}\n              part=\"nmcc__button-outline nmcc__reschedule-cta\"\n            >\n              {`${i18next.t('confirmBookingButton')}`}\n            </button-component>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BhY18Huj.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.scss?tag=nylas-organizer-confirmation-card&encapsulation=shadow","src/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.event-card-wrapper {\n  height: inherit;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-900);\n  border-radius: var(--nylas-border-radius-3x);\n  position: relative;\n  margin-top: 1rem;\n  width: 424px;\n\n  box-shadow:\n    0px 1px 4px rgba(0, 0, 0, 0.1),\n    0px 3px 6px rgba(0, 0, 0, 0.06);\n\n  @media #{$mobile} {\n    width: 100%;\n    border-radius: 0px;\n  }\n}\n\n.calendar-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-200);\n  color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n  margin: 1.5rem 4rem;\n  overflow-wrap: anywhere;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  font-size: 16px;\n  font-weight: 400;\n\n  h2 {\n    color: var(--nylas-base-600);\n    margin-top: 1.5rem;\n    margin-bottom: 0.25rem;\n    font-size: 1.125rem;\n    font-weight: 600;\n  }\n}\n\n.manage-booking-description {\n  border-top: 1px solid var(--nylas-base-200);\n\n  p {\n    font-size: 16px;\n    margin: 1rem;\n    padding: 0.5rem 1rem;\n    font-weight: 400;\n    color: var(--nylas-base-800);\n  }\n}\n\n.footer {\n  padding: 0.5rem;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  background-color: var(--nylas-base-25);\n  width: 100%;\n  border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n\n  &.no-template-cols {\n    grid-template-columns: 1fr;\n  }\n\n  &.no-footer {\n    display: none;\n  }\n}\n\nsp-divider {\n  background-color: var(--nylas-base-200);\n  height: 1px;\n}\n\ncalendar-check-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\nbutton-component {\n  --dot-color: var(--nylas-base-700);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { LANGUAGE_CODE } from '@/common/constants';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, ThemeConfig } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n\n/**\n * The `nylas-organizer-confirmation-card` component is a UI component that displays the booked event card.\n *\n * @part nmcc - The booked event card host.\n * @part nmcc__card - The booked event card.\n * @part nmcc__title - The title of the booked event card.\n * @part nmcc__description - The description of the booked event card.\n * @part nmcc__button-outline - The cancel & reschedule button CTA.\n * @part nmcc__cancel-cta - The cancel button CTA.\n * @part nmcc__reschedule-cta - The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-organizer-confirmation-card',\n  styleUrl: 'nylas-organizer-confirmation-card.scss',\n  shadow: true,\n})\nexport class NylasOrganizerConfirmationCard {\n  /**\n   * The host element.\n   */\n  @Element() host!: HTMLNylasOrganizerConfirmationCardElement;\n\n  /**\n   * @standalone\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * @standalone\n   * The loading state prop. Used to display loading state when fetching availability.\n   */\n  @Prop() readonly isLoading?: boolean;\n\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n  /**\n   * Booking flow type.\n   */\n  @Prop() readonly organizerConfirmationBookingId?: string;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ attribute: 'selected-language' }) readonly selectedLanguage: string = navigator.language;\n\n  /**\n   * The state to identify which action is being performed.\n   */\n  @State() action: 'confirm' | 'reject' | null = null;\n\n  /**\n   * Reject booking button clicked event.\n   */\n  @Event() readonly rejectBookingButtonClicked!: EventEmitter<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }>;\n\n  /**\n   * Reschedule button clicked event.\n   * */\n  @Event() readonly confirmBookingButtonClicked!: EventEmitter<{\n    bookingId: string;\n    host: HTMLNylasOrganizerConfirmationCardElement;\n    errorHandler?: (error: NylasSchedulerErrorResponse) => void;\n  }>;\n\n  /**\n   * This event is fired when an error occurs while rescheduling the booking.\n   */\n  @Event() readonly confirmBookingError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  @Watch('themeConfig')\n  themeConfigChanged(newThemeConfig: ThemeConfig) {\n    this.applyThemeConfig(newThemeConfig);\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    i18next.changeLanguage(newVal);\n  }\n\n  connectedCallback() {\n    // Use queueMicrotask to defer theme application until after React has set props.\n    // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n    queueMicrotask(() => {\n      if (this.themeConfig) {\n        this.applyThemeConfig(this.themeConfig);\n        this.host.setAttribute('data-themed', '');\n      }\n    });\n  }\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-organizer-confirmation-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-organizer-confirmation-card] Component did load`);\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  private handleConfirmBookingButtonClicked = () => {\n    this.action = 'confirm';\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.confirmBookingError.emit(error);\n    };\n    if (this.organizerConfirmationBookingId && !this.isLoading) {\n      this.confirmBookingButtonClicked.emit({ bookingId: this.organizerConfirmationBookingId, host: this.host, errorHandler });\n    }\n  };\n\n  private handleRejectBookingButtonClicked = () => {\n    this.action = 'reject';\n    if (this.organizerConfirmationBookingId && !this.isLoading) {\n      this.rejectBookingButtonClicked.emit({ bookingId: this.organizerConfirmationBookingId, host: this.host });\n    }\n  };\n\n  @Method()\n  async resetAction() {\n    this.action = null;\n  }\n\n  @RegisterComponent<NylasOrganizerConfirmationCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-organizer-confirmation-card',\n    stateToProps: new Map([\n      ['scheduler.organizerConfirmationBookingId', 'organizerConfirmationBookingId'],\n      ['scheduler.configSettings', 'configSettings'],\n      ['scheduler.isLoading', 'isLoading'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.themeConfig', 'themeConfig'],\n    ]),\n    eventToProps: {\n      rejectBookingButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        nylasSchedulerConnector.scheduler.setReject(event.detail.bookingId);\n      },\n      confirmBookingButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        const { host } = event.detail;\n        const result = await nylasSchedulerConnector.scheduler.updateBooking({\n          bookingId: event.detail.bookingId,\n          status: 'confirmed',\n        });\n        const { errorHandler } = event.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n        await host.resetAction();\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nmcc\">\n        <div class=\"event-card-wrapper\" part=\"nmccc__card\">\n          <div class=\"calendar-icon\">\n            <calendar-check-icon />\n          </div>\n          <div class=\"booked-event-header\">\n            <h2 slot=\"card-title\" part=\"nmcc__title\">\n              {!!this.organizerConfirmationBookingId && `${i18next.t('bookingPendingTitle')}!`}\n            </h2>\n          </div>\n          <div class=\"manage-booking-description\">\n            <p>{i18next.t('bookingPendingnDescription')}</p>\n          </div>\n          <div\n            class={{\n              footer: true,\n            }}\n          >\n            <button-component\n              variant={'destructive'}\n              onClick={this.handleRejectBookingButtonClicked}\n              isLoading={this.isLoading && this.action === 'reject'}\n              part=\"nmcc__button-outline nmcc__cancel-cta\"\n            >\n              {`${i18next.t('rejectBookingButton')}`}\n            </button-component>\n            <button-component\n              variant={'basic'}\n              onClick={this.handleConfirmBookingButtonClicked}\n              isLoading={this.isLoading && this.action === 'confirm'}\n              part=\"nmcc__button-outline nmcc__reschedule-cta\"\n            >\n              {`${i18next.t('confirmBookingButton')}`}\n            </button-component>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}