@nylas/web-elements 0.0.0-canary-20251006194336 → 0.0.0-canary-20251007161342

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

@@ -1,7 +1,29 @@
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
 export declare class TooltipComponent {
     el: HTMLElement;
-    position: 'top' | 'bottom' | 'left' | 'right';
-    showTooltip(event: FocusEvent): void;
-    hideTooltip(event: FocusEvent): void;
+    position: TooltipPosition;
+    isVisible: boolean;
+    isPinned: boolean;
+    actualPosition: TooltipPosition;
+    tooltipStyle: {
+        top: string;
+        left: string;
+    };
+    private tooltipContentEl?;
+    private tooltipId;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleDocumentClick(event: MouseEvent): void;
+    private calculatePosition;
+    private checkPositionFits;
+    private findBestAlternativePosition;
+    private getPositionCoordinates;
+    private showTooltip;
+    private hideTooltip;
+    private handleClick;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleFocus;
+    private handleBlur;
     render(): any;
 }
+export {};

package/dist/types/components.d.ts

@@ -3105,13 +3105,14 @@ export namespace Components {
     }
     /**
      * The `tooltip-component` component is a UI component that displays a tooltip.
+     * It automatically adjusts its position to avoid being cut off by viewport or container boundaries.
      */
     interface TooltipComponent {
         /**
-          * The position of the tooltip.
+          * The preferred position of the tooltip. The tooltip will attempt to use this position but will automatically adjust if it would be cut off.
           * @default 'bottom'
          */
-        "position": 'top' | 'bottom' | 'left' | 'right';
+        "position": TooltipPosition;
     }
     interface TranslateIcon {
         /**
@@ -5439,6 +5440,7 @@ declare global {
     };
     /**
      * The `tooltip-component` component is a UI component that displays a tooltip.
+     * It automatically adjusts its position to avoid being cut off by viewport or container boundaries.
      */
     interface HTMLTooltipComponentElement extends Components.TooltipComponent, HTMLStencilElement {
     }
@@ -9355,13 +9357,14 @@ declare namespace LocalJSX {
     }
     /**
      * The `tooltip-component` component is a UI component that displays a tooltip.
+     * It automatically adjusts its position to avoid being cut off by viewport or container boundaries.
      */
     interface TooltipComponent {
         /**
-          * The position of the tooltip.
+          * The preferred position of the tooltip. The tooltip will attempt to use this position but will automatically adjust if it would be cut off.
           * @default 'bottom'
          */
-        "position"?: 'top' | 'bottom' | 'left' | 'right';
+        "position"?: TooltipPosition;
     }
     interface TranslateIcon {
         /**
@@ -9949,6 +9952,7 @@ declare module "@stencil/core" {
             "toggle-switch": LocalJSX.ToggleSwitch & JSXBase.HTMLAttributes<HTMLToggleSwitchElement>;
             /**
              * The `tooltip-component` component is a UI component that displays a tooltip.
+             * It automatically adjusts its position to avoid being cut off by viewport or container boundaries.
              */
             "tooltip-component": LocalJSX.TooltipComponent & JSXBase.HTMLAttributes<HTMLTooltipComponentElement>;
             "translate-icon": LocalJSX.TranslateIcon & JSXBase.HTMLAttributes<HTMLTranslateIconElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nylas/web-elements",
-  "version": "0.0.0-canary-20251006194336",
+  "version": "0.0.0-canary-20251007161342",
   "description": "Nylas Web Elements",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -56,7 +56,7 @@
     "rrule": "2.8.1",
     "sanitize-html": "^2.13.0",
     "sortablejs": "^1.15.6",
-    "@nylas/core": "^0.0.0-canary-20251006194336",
+    "@nylas/core": "^0.0.0-canary-20251007161342",
     "@nylas/identity": "^3.1.0"
   },
   "devDependencies": {

package/dist/components/p-BsfPlCjP.js.map

@@ -1 +0,0 @@
-{"file":"p-BsfPlCjP.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler-editor/nylas-specific-time-availability-picker/nylas-specific-time-availability-picker.scss?tag=nylas-specific-time-availability-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-specific-time-availability-picker/nylas-specific-time-availability-picker.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.nylas-specific-time-availability-picker {\n  display: flex;\n  margin: 1rem;\n  flex-direction: column;\n  border-radius: var(--nylas-border-radius-2x);\n  border: 1px solid var(--nylas-base-200);\n\n  .content {\n    padding: 1rem;\n    border-radius: var(--nylas-border-radius-2x);\n    color: var(--nylas-base-900);\n    font-size: 16px;\n    font-family: var(--nylas-font-family);\n    background: var(--nylas-base-25);\n  }\n\n  .header {\n    padding: 1rem;\n    border-bottom: 1px solid var(--nylas-base-200);\n\n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      line-height: 20px;\n      color: var(--nylas-base-900);\n      text-align: left;\n    }\n\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      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n  }\n\n  .specific-times {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  .empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 2rem 1rem;\n    text-align: center;\n\n    .empty-icon {\n      margin-bottom: 1.5rem;\n      opacity: 0.4;\n      color: var(--nylas-base-400);\n    }\n\n    .empty-title {\n      margin: 0 0 0.5rem 0;\n      font-size: 1.125rem;\n      font-weight: 600;\n      color: var(--nylas-base-700);\n      line-height: 1.5;\n    }\n\n    .empty-subtitle {\n      margin: 0;\n      font-size: 0.875rem;\n      color: var(--nylas-base-500);\n      line-height: 1.5;\n      max-width: 300px;\n    }\n  }\n\n  .specific-time-entry {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    padding: 12px;\n    border: 1px solid var(--nylas-base-200);\n    border-radius: var(--nylas-border-radius);\n    background: var(--nylas-base-0);\n\n    .entry-content {\n      display: grid;\n      grid-template-columns: 160px auto 30px 30px;\n      gap: 12px;\n\n      @media (max-width: 768px) {\n        grid-template-areas:\n          'date calendar_toggle remove'\n          'time_or_unavailable time_or_unavailable time_or_unavailable';\n        grid-template-columns: 1fr auto auto;\n        grid-template-rows: 1fr 1fr;\n      }\n    }\n\n    .date-input-container {\n      flex: 0 0 auto;\n      width: 160px;\n      @media (max-width: 768px) {\n        grid-area: date;\n      }\n      .date-input {\n        width: 100%;\n      }\n      nylas-date-component::part(ic__date) {\n        border: 1px solid var(--nylas-base-200);\n        height: 50px;\n        display: flex;\n        align-items: center;\n      }\n    }\n\n    .time-pickers {\n      display: grid;\n      grid-template-columns: auto 10px 1fr;\n      width: 342px;\n      gap: 14px;\n      flex: 1;\n      min-width: 0;\n\n      @media (max-width: 768px) {\n        flex: 1;\n        width: auto;\n        grid-area: time_or_unavailable;\n      }\n\n      .time-separator {\n        font-size: 0.875rem;\n        color: var(--nylas-base-600);\n        font-weight: 500;\n        flex-shrink: 0;\n        line-height: 1;\n        padding: 0 0px 0px 6px;\n        margin-top: 18px;\n      }\n    }\n\n    .unavailable-text {\n      flex: 1;\n      display: flex;\n      align-items: center;\n      padding: 0 15px;\n      border-radius: var(--nylas-border-radius);\n      background: var(--nylas-base-50);\n      min-height: 50px;\n      @media (max-width: 768px) {\n        grid-area: time_or_unavailable;\n      }\n      .unavailable-label {\n        font-size: 0.875rem;\n        color: var(--nylas-base-500);\n        font-style: italic;\n      }\n    }\n\n    .toggle-button {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 40px;\n      height: 48px;\n      padding-left: 8px;\n      border: none;\n      border-radius: 4px;\n      background: transparent;\n      color: var(--nylas-base-400);\n      cursor: pointer;\n      transition: all 0.2s ease;\n      flex-shrink: 0;\n      @media (max-width: 768px) {\n        grid-area: calendar_toggle;\n      }\n      &:hover {\n        color: var(--nylas-primary);\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &.unavailable {\n        color: var(--nylas-error);\n\n        &:hover {\n          color: var(--nylas-error);\n        }\n      }\n    }\n\n    .remove-button {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 40px;\n      height: 48px;\n      padding: 0;\n      border: none;\n      border-radius: 4px;\n      background: transparent;\n      color: var(--nylas-base-400);\n      cursor: pointer;\n      transition: all 0.2s ease;\n      flex-shrink: 0;\n      @media (max-width: 768px) {\n        grid-area: remove;\n      }\n      &:hover {\n        color: var(--nylas-error);\n      }\n\n      &:focus {\n        outline: none;\n        background: var(--nylas-base-100);\n        box-shadow: 0 0 0 2px var(--nylas-primary);\n      }\n\n      &:active {\n        background: var(--nylas-base-200);\n      }\n    }\n\n    .error-message {\n      width: -webkit-fill-available;\n      padding: 4px 8px;\n      background: var(--nylas-error-50);\n      color: var(--nylas-error);\n      font-size: 12px;\n      border-radius: 4px;\n      border: 1px solid var(--nylas-error-200);\n      margin-top: 8px;\n    }\n  }\n\n  .add-button-container {\n    display: flex;\n    justify-content: flex-start;\n    button-component {\n      width: 100%;\n    }\n  }\n}\n\n// Override button-component styles for the add button\n::part(nstap__add-button) {\n  border: 1px dashed var(--nylas-base-200);\n  background: var(--nylas-base-0);\n  color: var(--nylas-base-700);\n\n  &:hover {\n    border-color: var(--nylas-primary);\n    background: var(--nylas-base-50);\n    color: var(--nylas-primary);\n  }\n}\n\n// Custom styling for time picker components\n::part(nstap__time-picker-container) {\n  flex: 1;\n  min-width: 0;\n}\n\n::part(nstap__time-picker-input) {\n  width: 100%;\n  font-size: 0.875rem;\n  min-height: 50px;\n  display: flex;\n  align-items: center;\n}\n\n// Custom styling for date input component\n::part(nstap__date-input) {\n  width: 100%;\n}\n\n::part(nstap__date-field) {\n  width: 100%;\n  font-size: 0.875rem;\n  border: 1px solid var(--nylas-base-200);\n  border-radius: var(--nylas-border-radius);\n  padding: 0.5rem 0.75rem;\n\n  &:focus {\n    border-color: var(--nylas-primary);\n    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n  }\n}\n\n::part(nstap__date-wrapper) {\n  margin: 0;\n}\n\n::part(nstap__date-label) {\n  margin: 0;\n  padding: 0;\n\n  p {\n    display: none; // Hide label since we don't need it\n  }\n}\n","import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Prop, Watch, State, Listen } from '@stencil/core';\nimport { RegisterComponent } from '@/common/register-component';\nimport { LANGUAGE_CODE } from '@/common/constants';\nimport { Configuration, SpecificTimeAvailability, ThemeConfig } from '@nylas/core';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { debug, convertTo12HourFormat, convertTo24HourFormat, timeToMinutes } from '@/utils/utils';\nimport i18next from '@/utils/i18n';\n\n@Component({\n  tag: 'nylas-specific-time-availability-picker',\n  styleUrl: 'nylas-specific-time-availability-picker.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasSpecificTimeAvailabilityPicker {\n  /**\n   * The element <nylas-specific-time-availability-picker> itself.\n   */\n  @Element() host!: HTMLNylasSpecificTimeAvailabilityPickerElement;\n\n  /**\n   * @standalone\n   * The name of the specific date availability picker.\n   */\n  @Prop() name: string = 'specific-time-availability';\n\n  /**\n   * @standalone\n   * The selected configuration.\n   */\n  @Prop() selectedConfiguration?: Configuration;\n\n  /**\n   * @standalone\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: LANGUAGE_CODE;\n\n  /**\n   * @standalone\n   * The specific date open hours.\n   */\n  @Prop() specificTimesAvailability?: SpecificTimeAvailability[];\n\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n  /**\n   * @standalone\n   * Hide the header of the specific time availability picker.\n   */\n  @Prop() hideHeader: boolean = false;\n\n  /**\n   * @standalone\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The event is fired when the specific date open hours change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  /**\n   * Internal state for managing specific date entries\n   */\n  @State() specificDateEntries: Array<{\n    id: string;\n    date: string;\n    startTime: string;\n    endTime: string;\n    isUnavailable: boolean;\n  }> = [];\n\n  /**\n   * State for tracking validation errors\n   */\n  @State() validationErrors: { [key: string]: string } = {};\n\n  connectedCallback() {\n    debug('nylas-specific-time-availability-picker', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-specific-time-availability-picker', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-specific-time-availability-picker', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-specific-time-availability-picker', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.configChangedHandler(this.selectedConfiguration);\n    } else if (this.specificTimesAvailability && this.specificTimesAvailability.length > 0) {\n      this.loadSpecificTimeAvailability();\n    }\n    this.applyThemeConfig(this.themeConfig);\n  }\n\n  get isInternalsAvailable() {\n    return typeof this.internals.setFormValue === 'function';\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-specific-time-availability-picker', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  configChangedHandler(newConfig: Configuration) {\n    debug('nylas-specific-time-availability-picker', 'configChangedHandler', newConfig);\n    // Load specific date open hours from the configuration participants\n    this.loadSpecificTimeAvailability();\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  loadSpecificTimeAvailability() {\n    if (!this.specificTimesAvailability || this.specificTimesAvailability.length === 0) {\n      return;\n    }\n\n    const entries = this.specificTimesAvailability.map((item, index) => {\n      // Check if both start and end are \"00:00\" - this indicates an unavailable day\n      const isUnavailable = item.start === '00:00' && item.end === '00:00';\n\n      return {\n        id: `specific-time-${index}`,\n        date: item.date,\n        startTime: isUnavailable ? '09:00am' : convertTo12HourFormat(item.start),\n        endTime: isUnavailable ? '05:00pm' : convertTo12HourFormat(item.end),\n        isUnavailable,\n      };\n    });\n\n    this.specificDateEntries = entries;\n    this.emitValueChanged();\n  }\n\n  addSpecificTimeAvailability() {\n    // Initialize with incremental dates based on existing entries\n    // First entry: today, second entry: tomorrow, third entry: day after, etc.\n    const today = new Date();\n    const targetDate = new Date(today);\n    targetDate.setDate(today.getDate() + this.specificDateEntries.length);\n    const formattedDate = targetDate.toISOString().split('T')[0];\n\n    const newEntry = {\n      id: `specific-time-${Date.now()}`,\n      date: formattedDate,\n      startTime: '09:00am',\n      endTime: '05:00pm',\n      isUnavailable: false,\n    };\n\n    this.specificDateEntries = [...this.specificDateEntries, newEntry];\n\n    // Clear any global validation errors since we're adding a new valid entry\n    if (this.isInternalsAvailable) {\n      this.internals.setValidity({ customError: false });\n    }\n\n    this.emitValueChanged();\n  }\n\n  removeSpecificTimeAvailability(id: string) {\n    this.specificDateEntries = this.specificDateEntries.filter(entry => entry.id !== id);\n\n    // Clear validation error for the removed entry\n    if (this.validationErrors[id]) {\n      const newErrors = { ...this.validationErrors };\n      delete newErrors[id];\n      this.validationErrors = newErrors;\n    }\n\n    this.emitValueChanged();\n  }\n\n  toggleAvailability(id: string) {\n    this.specificDateEntries = this.specificDateEntries.map(entry => {\n      if (entry.id === id) {\n        return { ...entry, isUnavailable: !entry.isUnavailable };\n      }\n      return entry;\n    });\n\n    // Clear any existing validation error for this entry since availability state changed\n    if (this.validationErrors[id]) {\n      const newErrors = { ...this.validationErrors };\n      delete newErrors[id];\n      this.validationErrors = newErrors;\n    }\n\n    this.emitValueChanged();\n  }\n\n  /**\n   * Validates a single date entry\n   */\n  validateEntry(entry: (typeof this.specificDateEntries)[0]): string | null {\n    // Check if date is empty or invalid\n    if (!entry.date) {\n      return i18next.t('nylasSpecificTimeAvailabilityPicker.errors.dateRequired');\n    }\n\n    const dateObj = new Date(entry.date);\n    if (isNaN(dateObj.getTime())) {\n      return i18next.t('nylasSpecificTimeAvailabilityPicker.errors.invalidDateFormat');\n    }\n\n    // If unavailable, no need to validate times\n    if (entry.isUnavailable) {\n      return null;\n    }\n\n    // Validate start and end times are present\n    if (!entry.startTime || !entry.endTime) {\n      return i18next.t('nylasSpecificTimeAvailabilityPicker.errors.timesRequired');\n    }\n\n    // Validate start time is before end time\n    const startMinutes = timeToMinutes(entry.startTime);\n    const endMinutes = timeToMinutes(entry.endTime);\n\n    if (startMinutes >= endMinutes) {\n      return i18next.t('nylasSpecificTimeAvailabilityPicker.errors.startTimeBeforeEndTime');\n    }\n\n    return null;\n  }\n\n  /**\n   * Validates all entries and updates validation state\n   */\n  validateAllEntries() {\n    const errors: { [key: string]: string } = {};\n    let hasErrors = false;\n\n    this.specificDateEntries.forEach(entry => {\n      const error = this.validateEntry(entry);\n      if (error) {\n        errors[entry.id] = error;\n        hasErrors = true;\n      }\n    });\n\n    this.validationErrors = errors;\n\n    // Update form validity\n    if (hasErrors) {\n      const firstErrorElement = this.host.shadowRoot?.querySelector(`[data-entry-id=\"${Object.keys(errors)[0]}\"]`) as HTMLElement;\n      if (this.isInternalsAvailable) {\n        this.internals.setValidity({ customError: true }, 'Please fix validation errors', firstErrorElement);\n      }\n    } else {\n      if (this.isInternalsAvailable) {\n        this.internals.setValidity({ customError: false });\n      }\n    }\n\n    return !hasErrors;\n  }\n\n  @Listen('timeChange')\n  handleTimeChange(event: CustomEvent<{ key: string; value: string }>) {\n    const { key, value } = event.detail;\n    const [entryId, timeType] = key.split('_');\n\n    this.specificDateEntries = this.specificDateEntries.map(entry => {\n      if (entry.id === entryId) {\n        return {\n          ...entry,\n          [timeType === 'start' ? 'startTime' : 'endTime']: value,\n        };\n      }\n      return entry;\n    });\n\n    // Clear any existing validation error for this entry\n    if (this.validationErrors[entryId]) {\n      const newErrors = { ...this.validationErrors };\n      delete newErrors[entryId];\n      this.validationErrors = newErrors;\n    }\n\n    // Clear form validity errors related to time\n    if (this.isInternalsAvailable) {\n      this.internals.setValidity({ customError: false });\n    }\n\n    this.emitValueChanged();\n  }\n\n  @Listen('timeWindowFormError')\n  setFormError(event: CustomEvent<{ key: string; message: string }>) {\n    const { key, message } = event.detail;\n    const [entryId] = key.split('_');\n\n    if (message) {\n      // Set validation error for this entry\n      this.validationErrors = {\n        ...this.validationErrors,\n        [entryId]: message,\n      };\n\n      const element = this.host.shadowRoot?.getElementById(key);\n      if (element && this.isInternalsAvailable) {\n        this.internals.setValidity({ customError: true }, message, element as HTMLInputElement);\n      }\n    } else {\n      // Clear validation error for this entry\n      const newErrors = { ...this.validationErrors };\n      delete newErrors[entryId];\n      this.validationErrors = newErrors;\n\n      if (this.isInternalsAvailable) {\n        this.internals.setValidity({ customError: false });\n      }\n    }\n  }\n\n  @Listen('nylasFormInputChanged')\n  handleFormInputChange(event: CustomEvent<{ value: string; name: string; label: string; type: string; error: string }>) {\n    const { name, value } = event.detail;\n\n    // Check if this is a date input for our component\n    if (name.startsWith('date-') && name.includes('specific-time-')) {\n      const entryId = name.replace('date-', '');\n\n      this.specificDateEntries = this.specificDateEntries.map(entry => {\n        if (entry.id === entryId) {\n          return { ...entry, date: value };\n        }\n        return entry;\n      });\n\n      // Clear any existing validation error for this entry\n      if (this.validationErrors[entryId]) {\n        const newErrors = { ...this.validationErrors };\n        delete newErrors[entryId];\n        this.validationErrors = newErrors;\n      }\n\n      this.emitValueChanged();\n    }\n  }\n\n  emitValueChanged() {\n    // Validate all entries before emitting\n    const isValid = this.validateAllEntries();\n\n    const specificTimesAvailability = this.specificDateEntries\n      .filter(entry => entry.date && (entry.isUnavailable || (entry.startTime && entry.endTime)))\n      .map(entry => ({\n        date: entry.date,\n        start: entry.isUnavailable ? '00:00' : convertTo24HourFormat(entry.startTime),\n        end: entry.isUnavailable ? '00:00' : convertTo24HourFormat(entry.endTime),\n      }));\n\n    const value = JSON.stringify(specificTimesAvailability);\n\n    if (this.isInternalsAvailable && isValid) {\n      this.internals.setFormValue(value, this.name);\n    }\n\n    this.valueChanged.emit({\n      value,\n      name: this.name,\n    });\n  }\n\n  @RegisterComponent<NylasSpecificTimeAvailabilityPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-specific-time-availability-picker',\n    stateToProps: new Map([\n      ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n      ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n      ['schedulerConfig.themeConfig', 'themeConfig'],\n    ]),\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-specific-time-availability-picker\" part=\"nstap\">\n          {!this.hideHeader && (\n            <div class=\"header\" part=\"nstap__header\">\n              <h3>{i18next.t('nylasSpecificTimeAvailabilityPicker.headerTitle')}</h3>\n              <p>\n                {i18next.t('nylasSpecificTimeAvailabilityPicker.headerDescription')}\n                <tooltip-component>\n                  <info-icon slot=\"tooltip-icon\" />\n                  <span slot=\"tooltip-content\">{i18next.t('nylasSpecificTimeAvailabilityPicker.tooltip.desc')}</span>\n                </tooltip-component>\n              </p>\n            </div>\n          )}\n          <div class=\"content\" part=\"nstap__content\">\n            <div class=\"specific-times\" part=\"nstap__specific-times\">\n              {this.specificDateEntries.length === 0 ? (\n                <div class=\"empty-state\" part=\"nstap__empty-state\">\n                  <div class=\"empty-icon\" part=\"nstap__empty-icon\">\n                    <calendar-icon width=\"32\" height=\"32\" />\n                  </div>\n                  <h3 class=\"empty-title\" part=\"nstap__empty-title\">\n                    {i18next.t('nylasSpecificTimeAvailabilityPicker.emptyState.title')}\n                  </h3>\n                  <p class=\"empty-subtitle\" part=\"nstap__empty-subtitle\">\n                    {i18next.t('nylasSpecificTimeAvailabilityPicker.emptyState.subtitle')}\n                  </p>\n                </div>\n              ) : (\n                this.specificDateEntries.map(entry => (\n                  <div class=\"specific-time-entry\" part=\"nstap__specific-time-entry\" key={entry.id} data-entry-id={entry.id}>\n                    <div class=\"entry-content\" part=\"nstap__entry-content\">\n                      <div class=\"date-input-container\" part=\"nstap__date-input-container\">\n                        <nylas-date-component\n                          name={`date-${entry.id}`}\n                          defaultValue={entry.date}\n                          placeholder=\"yyyy-mm-dd\"\n                          part=\"nstap__date-input\"\n                          class=\"date-input\"\n                          themeConfig={this.themeConfig}\n                          exportparts=\"ic__date: nstap__date-field, ic__input_wrapper: nstap__date-wrapper, ic__label: nstap__date-label\"\n                        />\n                      </div>\n                      {entry.isUnavailable ? (\n                        <div class=\"unavailable-text\" part=\"nstap__unavailable-text\">\n                          <span class=\"unavailable-label\">{i18next.t('nylasSpecificTimeAvailabilityPicker.entireDayUnavailable')}</span>\n                        </div>\n                      ) : (\n                        <div class=\"time-pickers\" part=\"nstap__time-pickers\">\n                          <nylas-time-window-picker\n                            id={`${entry.id}_start`}\n                            time={entry.startTime}\n                            name={`${entry.id}_start`}\n                            key={`${entry.id}_start`}\n                            language={this.selectedLanguage}\n                            hasError={!!this.validationErrors[entry.id]}\n                            themeConfig={this.themeConfig}\n                            exportparts=\"time-picker: nstap__time-picker-container, time-input: nstap__time-picker-input, times: nstap__time-picker-times\"\n                          />\n                          <span class=\"time-separator\">-</span>\n                          <nylas-time-window-picker\n                            id={`${entry.id}_end`}\n                            time={entry.endTime}\n                            name={`${entry.id}_end`}\n                            key={`${entry.id}_end`}\n                            minimumStartTime={entry.startTime}\n                            language={this.selectedLanguage}\n                            hasError={!!this.validationErrors[entry.id]}\n                            themeConfig={this.themeConfig}\n                            exportparts=\"time-picker: nstap__time-picker-container, time-input: nstap__time-picker-input, times: nstap__time-picker-times\"\n                          />\n                        </div>\n                      )}\n                      <button\n                        type=\"button\"\n                        class={{ 'toggle-button': true, 'unavailable': entry.isUnavailable }}\n                        part=\"nstap__toggle-button\"\n                        onClick={() => this.toggleAvailability(entry.id)}\n                        title={\n                          entry.isUnavailable\n                            ? i18next.t('nylasSpecificTimeAvailabilityPicker.markAsAvailable')\n                            : i18next.t('nylasSpecificTimeAvailabilityPicker.markAsUnavailable')\n                        }\n                      >\n                        <calendar-icon width=\"20\" height=\"20\" />\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"remove-button\"\n                        part=\"nstap__remove-button\"\n                        onClick={() => this.removeSpecificTimeAvailability(entry.id)}\n                        aria-label=\"Remove specific date\"\n                      >\n                        <close-icon width=\"16\" height=\"16\" />\n                      </button>\n                    </div>\n                    {this.validationErrors[entry.id] && (\n                      <div class=\"error-message\" part=\"nstap__error-message\">\n                        {this.validationErrors[entry.id]}\n                      </div>\n                    )}\n                  </div>\n                ))\n              )}\n            </div>\n            <div class=\"add-button-container\" part=\"nstap__add-button-container\">\n              <button-component id=\"add-specific-time-open-hour\" onClick={() => this.addSpecificTimeAvailability()} part=\"nstap__add-button\" variant=\"basic\">\n                <add-circle-icon width=\"24\" height=\"24\" />\n                {i18next.t('nylasSpecificTimeAvailabilityPicker.addSpecificTimeAvailability')}\n              </button-component>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-C6fgjGAL.js

@@ -1,43 +0,0 @@
-import { p as proxyCustomElement, H, h } from './p-Bht9ktsW.js';
-
-const tooltipComponentCss = ".tooltip-container{position:relative;display:flex;--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}.tooltip-content{display:none;background-color:var(--nylas-base-800);color:var(--nylas-base-0);text-align:left;border-radius:6px;padding:5px 0;position:absolute;z-index:1;transition:opacity 0.3s;padding:0.5rem 1rem;max-width:200px;width:max-content}.tooltip-content.top{bottom:0;left:0;margin-bottom:1.25rem;transform:translateX(-50%)}.tooltip-content.right{top:50%;left:0%;margin-left:1.25rem;transform:translateY(-50%)}.tooltip-content.bottom{top:0;left:0;margin-top:1.25rem;transform:translateX(-50%)}.tooltip-content.left{top:50%;right:0%;margin-right:1.25rem;transform:translateY(-50%)}.tooltip-container:hover .tooltip-content,.tooltip-container:focus-within .tooltip-content{display:inline}.tooltip-content::after{content:\"\";position:absolute;top:-0.75rem;left:50%;transform:rotate(180deg);border-width:6px;border-style:solid;border-color:var(--nylas-base-900) transparent transparent transparent}.tooltip-content.top::after{top:100%;left:50%;transform:rotate(0deg)}.tooltip-content.bottom::after{top:-0.75rem;left:50%;transform:rotate(180deg)}.tooltip-content.left::after{top:47.5%;left:100%;transform:rotate(270deg)}.tooltip-content.right::after{top:47.5%;left:-0.75rem;transform:rotate(90deg)}";
-
-const TooltipComponent = proxyCustomElement(class TooltipComponent extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.position = 'bottom';
-    }
-    showTooltip(event) {
-        event.target.nextElementSibling.style.display = 'inline';
-    }
-    hideTooltip(event) {
-        event.target.nextElementSibling.style.display = 'none';
-    }
-    render() {
-        return (h("div", { key: '2a4f34fe50836fd863f30d037de2df43238f04da', class: "tooltip-container", part: "tc__container" }, h("span", { key: '90e5c2cbcd0f911f44c1913f8bb44a4d7b9db65c', class: "info-icon", tabindex: "0", onFocus: this.showTooltip.bind(this), onBlur: this.hideTooltip.bind(this) }, h("slot", { key: '8173d93c63026171627fc99be32c6f94d4e6f45b', name: "tooltip-icon" }, "i")), h("span", { key: '375781fe085a1bea6d998d5b9cb8516b77acb744', class: `tooltip-content ${this.position}`, part: "tc__content" }, h("slot", { key: '3d7f984edbd2467b03ec1da7918a57ec6250b98e', name: "tooltip-content" }, "This is a help text."))));
-    }
-    get el() { return this; }
-    static get style() { return tooltipComponentCss; }
-}, [257, "tooltip-component", {
-        "position": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["tooltip-component"];
-    components.forEach(tagName => { switch (tagName) {
-        case "tooltip-component":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, TooltipComponent);
-            }
-            break;
-    } });
-}
-
-export { TooltipComponent as T, defineCustomElement as d };
-//# sourceMappingURL=p-C6fgjGAL.js.map
-
-//# sourceMappingURL=p-C6fgjGAL.js.map

package/dist/components/p-C6fgjGAL.js.map

@@ -1 +0,0 @@
-{"file":"p-C6fgjGAL.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,q4GAAq4G;;MCap5G,gBAAgB,GAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAL7B,IAAA,WAAA,GAAA;;;;AAUU,QAAA,IAAQ,CAAA,QAAA,GAAwC,QAAQ;AAqBjE;AAnBC,IAAA,WAAW,CAAC,KAAiB,EAAA;QACzB,KAAK,CAAC,MAAsB,CAAC,kBAAmC,CAAC,KAAK,CAAC,OAAO,GAAG,QAAQ;;AAG7F,IAAA,WAAW,CAAC,KAAiB,EAAA;QACzB,KAAK,CAAC,MAAsB,CAAC,kBAAmC,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM;;IAE3F,MAAM,GAAA;QACJ,QACE,4DAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,eAAe,EAAA,EACjD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAC,GAAG,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,EAC5G,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,EAAA,GAAA,CAAS,CAC7B,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,gBAAA,EAAmB,IAAI,CAAC,QAAQ,CAAE,CAAA,EAAE,IAAI,EAAC,aAAa,EAAA,EACjE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,iBAAiB,2BAA4B,CACnD,CACH;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/design-system/tooltip-component/tooltip-component.scss?tag=tooltip-component&encapsulation=shadow","src/components/design-system/tooltip-component/toolitp-component.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n\n.tooltip-container {\n  position: relative;\n  display: flex;\n  @include default-css-variables;\n}\n\n.tooltip-content {\n  display: none;\n  background-color: var(--nylas-base-800);\n  color: var(--nylas-base-0);\n  text-align: left;\n  border-radius: 6px;\n  padding: 5px 0;\n  position: absolute;\n  z-index: 1;\n  transition: opacity 0.3s;\n  padding: 0.5rem 1rem;\n  max-width: 200px;\n  width: max-content;\n}\n\n/* Position-specific styles */\n.tooltip-content.top {\n  bottom: 0;\n  left: 0;\n  margin-bottom: 1.25rem;\n  transform: translateX(-50%);\n}\n\n.tooltip-content.right {\n  top: 50%;\n  left: 0%;\n  margin-left: 1.25rem;\n  transform: translateY(-50%);\n}\n\n.tooltip-content.bottom {\n  top: 0;\n  left: 0;\n  margin-top: 1.25rem;\n  transform: translateX(-50%);\n}\n\n.tooltip-content.left {\n  top: 50%;\n  right: 0%;\n  margin-right: 1.25rem;\n  transform: translateY(-50%);\n}\n\n.tooltip-container:hover .tooltip-content,\n.tooltip-container:focus-within .tooltip-content {\n  display: inline;\n}\n\n/* Arrow styles */\n.tooltip-content::after {\n  content: '';\n  position: absolute;\n  top: -0.75rem;\n  left: 50%;\n  transform: rotate(180deg);\n  border-width: 6px;\n  border-style: solid;\n  border-color: var(--nylas-base-900) transparent transparent transparent;\n}\n\n.tooltip-content {\n  &.top::after {\n    top: 100%;\n    left: 50%;\n    transform: rotate(0deg);\n  }\n\n  &.bottom::after {\n    top: -0.75rem;\n    left: 50%;\n    transform: rotate(180deg);\n  }\n\n  &.left::after {\n    top: 47.5%;\n    left: 100%;\n    transform: rotate(270deg);\n  }\n\n  &.right::after {\n    top: 47.5%;\n    left: -0.75rem;\n    transform: rotate(90deg);\n  }\n}\n","import { Component, Element, Prop, h } from '@stencil/core';\n\n/**\n * The `tooltip-component` component is a UI component that displays a tooltip.\n *\n * @part tc__container - The tooltip container.\n * @part tc__content - The tooltip content.\n */\n@Component({\n  tag: 'tooltip-component',\n  styleUrl: 'tooltip-component.scss',\n  shadow: true,\n})\nexport class TooltipComponent {\n  @Element() el!: HTMLElement;\n  /**\n   * The position of the tooltip.\n   */\n  @Prop() position: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\n\n  showTooltip(event: FocusEvent) {\n    ((event.target as HTMLElement).nextElementSibling as HTMLElement)!.style.display = 'inline';\n  }\n\n  hideTooltip(event: FocusEvent) {\n    ((event.target as HTMLElement).nextElementSibling as HTMLElement)!.style.display = 'none';\n  }\n  render() {\n    return (\n      <div class=\"tooltip-container\" part=\"tc__container\">\n        <span class=\"info-icon\" tabindex=\"0\" onFocus={this.showTooltip.bind(this)} onBlur={this.hideTooltip.bind(this)}>\n          <slot name=\"tooltip-icon\">i</slot>\n        </span>\n        <span class={`tooltip-content ${this.position}`} part=\"tc__content\">\n          <slot name=\"tooltip-content\">This is a help text.</slot>\n        </span>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/nylas-web-elements/p-4ebae0d7.entry.js

@@ -1,2 +0,0 @@
-import{r as o,h as e,a as l}from"./p-0EQQA0nE.js";const a=".sc-info-icon-h{display:flex}";const t=class{constructor(e){o(this,e);this.width="14";this.height="14"}render(){return e("svg",{key:"c696b28bb70a5a154123cbed8ee56ad418612ed8",width:this.width,height:this.height,fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("path",{key:"91f34ea650a82fe34aea41a7c62b072498049a50",fill:"currentColor",d:"M6.5 5.5C6.77614 5.5 7 5.72386 7 6V9C7 9.27614 6.77614 9.5 6.5 9.5C6.22386 9.5 6 9.27614 6 9V6C6 5.72386 6.22386 5.5 6.5 5.5ZM6.50001 4.74907C6.91369 4.74907 7.24905 4.41371 7.24905 4.00003C7.24905 3.58635 6.91369 3.251 6.50001 3.251C6.08633 3.251 5.75098 3.58635 5.75098 4.00003C5.75098 4.41371 6.08633 4.74907 6.50001 4.74907ZM0.5 6.5C0.5 3.18629 3.18629 0.5 6.5 0.5C9.81371 0.5 12.5 3.18629 12.5 6.5C12.5 9.81371 9.81371 12.5 6.5 12.5C3.18629 12.5 0.5 9.81371 0.5 6.5ZM6.5 1.5C3.73858 1.5 1.5 3.73858 1.5 6.5C1.5 9.26142 3.73858 11.5 6.5 11.5C9.26142 11.5 11.5 9.26142 11.5 6.5C11.5 3.73858 9.26142 1.5 6.5 1.5Z"}))}};t.style=a;const r='.tooltip-container{position:relative;display:flex;--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}.tooltip-content{display:none;background-color:var(--nylas-base-800);color:var(--nylas-base-0);text-align:left;border-radius:6px;padding:5px 0;position:absolute;z-index:1;transition:opacity 0.3s;padding:0.5rem 1rem;max-width:200px;width:max-content}.tooltip-content.top{bottom:0;left:0;margin-bottom:1.25rem;transform:translateX(-50%)}.tooltip-content.right{top:50%;left:0%;margin-left:1.25rem;transform:translateY(-50%)}.tooltip-content.bottom{top:0;left:0;margin-top:1.25rem;transform:translateX(-50%)}.tooltip-content.left{top:50%;right:0%;margin-right:1.25rem;transform:translateY(-50%)}.tooltip-container:hover .tooltip-content,.tooltip-container:focus-within .tooltip-content{display:inline}.tooltip-content::after{content:"";position:absolute;top:-0.75rem;left:50%;transform:rotate(180deg);border-width:6px;border-style:solid;border-color:var(--nylas-base-900) transparent transparent transparent}.tooltip-content.top::after{top:100%;left:50%;transform:rotate(0deg)}.tooltip-content.bottom::after{top:-0.75rem;left:50%;transform:rotate(180deg)}.tooltip-content.left::after{top:47.5%;left:100%;transform:rotate(270deg)}.tooltip-content.right::after{top:47.5%;left:-0.75rem;transform:rotate(90deg)}';const n=class{constructor(e){o(this,e);this.position="bottom"}showTooltip(o){o.target.nextElementSibling.style.display="inline"}hideTooltip(o){o.target.nextElementSibling.style.display="none"}render(){return e("div",{key:"2a4f34fe50836fd863f30d037de2df43238f04da",class:"tooltip-container",part:"tc__container"},e("span",{key:"90e5c2cbcd0f911f44c1913f8bb44a4d7b9db65c",class:"info-icon",tabindex:"0",onFocus:this.showTooltip.bind(this),onBlur:this.hideTooltip.bind(this)},e("slot",{key:"8173d93c63026171627fc99be32c6f94d4e6f45b",name:"tooltip-icon"},"i")),e("span",{key:"375781fe085a1bea6d998d5b9cb8516b77acb744",class:`tooltip-content ${this.position}`,part:"tc__content"},e("slot",{key:"3d7f984edbd2467b03ec1da7918a57ec6250b98e",name:"tooltip-content"},"This is a help text.")))}get el(){return l(this)}};n.style=r;export{t as info_icon,n as tooltip_component};
-//# sourceMappingURL=p-4ebae0d7.entry.js.map

package/dist/nylas-web-elements/p-4ebae0d7.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["iconCss","InfoIcon","constructor","hostRef","this","width","height","render","h","key","fill","xmlns","d","tooltipComponentCss","TooltipComponent","position","showTooltip","event","target","nextElementSibling","style","display","hideTooltip","class","part","tabindex","onFocus","bind","onBlur","name"],"sources":["src/common/icons/icon.css?tag=info-icon&encapsulation=scoped","src/common/icons/info.tsx","src/components/design-system/tooltip-component/tooltip-component.scss?tag=tooltip-component&encapsulation=shadow","src/components/design-system/tooltip-component/toolitp-component.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'info-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class InfoIcon {\n  @Prop() width: string = '14';\n  @Prop() height: string = '14';\n\n  render() {\n    return (\n      <svg width={this.width} height={this.height} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          fill=\"currentColor\"\n          d=\"M6.5 5.5C6.77614 5.5 7 5.72386 7 6V9C7 9.27614 6.77614 9.5 6.5 9.5C6.22386 9.5 6 9.27614 6 9V6C6 5.72386 6.22386 5.5 6.5 5.5ZM6.50001 4.74907C6.91369 4.74907 7.24905 4.41371 7.24905 4.00003C7.24905 3.58635 6.91369 3.251 6.50001 3.251C6.08633 3.251 5.75098 3.58635 5.75098 4.00003C5.75098 4.41371 6.08633 4.74907 6.50001 4.74907ZM0.5 6.5C0.5 3.18629 3.18629 0.5 6.5 0.5C9.81371 0.5 12.5 3.18629 12.5 6.5C12.5 9.81371 9.81371 12.5 6.5 12.5C3.18629 12.5 0.5 9.81371 0.5 6.5ZM6.5 1.5C3.73858 1.5 1.5 3.73858 1.5 6.5C1.5 9.26142 3.73858 11.5 6.5 11.5C9.26142 11.5 11.5 9.26142 11.5 6.5C11.5 3.73858 9.26142 1.5 6.5 1.5Z\"\n        />\n      </svg>\n    );\n  }\n}\n","@use '../../../common/styles/variables' as *;\n\n.tooltip-container {\n  position: relative;\n  display: flex;\n  @include default-css-variables;\n}\n\n.tooltip-content {\n  display: none;\n  background-color: var(--nylas-base-800);\n  color: var(--nylas-base-0);\n  text-align: left;\n  border-radius: 6px;\n  padding: 5px 0;\n  position: absolute;\n  z-index: 1;\n  transition: opacity 0.3s;\n  padding: 0.5rem 1rem;\n  max-width: 200px;\n  width: max-content;\n}\n\n/* Position-specific styles */\n.tooltip-content.top {\n  bottom: 0;\n  left: 0;\n  margin-bottom: 1.25rem;\n  transform: translateX(-50%);\n}\n\n.tooltip-content.right {\n  top: 50%;\n  left: 0%;\n  margin-left: 1.25rem;\n  transform: translateY(-50%);\n}\n\n.tooltip-content.bottom {\n  top: 0;\n  left: 0;\n  margin-top: 1.25rem;\n  transform: translateX(-50%);\n}\n\n.tooltip-content.left {\n  top: 50%;\n  right: 0%;\n  margin-right: 1.25rem;\n  transform: translateY(-50%);\n}\n\n.tooltip-container:hover .tooltip-content,\n.tooltip-container:focus-within .tooltip-content {\n  display: inline;\n}\n\n/* Arrow styles */\n.tooltip-content::after {\n  content: '';\n  position: absolute;\n  top: -0.75rem;\n  left: 50%;\n  transform: rotate(180deg);\n  border-width: 6px;\n  border-style: solid;\n  border-color: var(--nylas-base-900) transparent transparent transparent;\n}\n\n.tooltip-content {\n  &.top::after {\n    top: 100%;\n    left: 50%;\n    transform: rotate(0deg);\n  }\n\n  &.bottom::after {\n    top: -0.75rem;\n    left: 50%;\n    transform: rotate(180deg);\n  }\n\n  &.left::after {\n    top: 47.5%;\n    left: 100%;\n    transform: rotate(270deg);\n  }\n\n  &.right::after {\n    top: 47.5%;\n    left: -0.75rem;\n    transform: rotate(90deg);\n  }\n}\n","import { Component, Element, Prop, h } from '@stencil/core';\n\n/**\n * The `tooltip-component` component is a UI component that displays a tooltip.\n *\n * @part tc__container - The tooltip container.\n * @part tc__content - The tooltip content.\n */\n@Component({\n  tag: 'tooltip-component',\n  styleUrl: 'tooltip-component.scss',\n  shadow: true,\n})\nexport class TooltipComponent {\n  @Element() el!: HTMLElement;\n  /**\n   * The position of the tooltip.\n   */\n  @Prop() position: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\n\n  showTooltip(event: FocusEvent) {\n    ((event.target as HTMLElement).nextElementSibling as HTMLElement)!.style.display = 'inline';\n  }\n\n  hideTooltip(event: FocusEvent) {\n    ((event.target as HTMLElement).nextElementSibling as HTMLElement)!.style.display = 'none';\n  }\n  render() {\n    return (\n      <div class=\"tooltip-container\" part=\"tc__container\">\n        <span class=\"info-icon\" tabindex=\"0\" onFocus={this.showTooltip.bind(this)} onBlur={this.hideTooltip.bind(this)}>\n          <slot name=\"tooltip-icon\">i</slot>\n        </span>\n        <span class={`tooltip-content ${this.position}`} part=\"tc__content\">\n          <slot name=\"tooltip-content\">This is a help text.</slot>\n        </span>\n      </div>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAU,gC,MCOHC,EAAQ,MALrB,WAAAC,CAAAC,G,UAMUC,KAAKC,MAAW,KAChBD,KAAME,OAAW,IAY1B,CAVC,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKJ,MAAOD,KAAKC,MAAOC,OAAQF,KAAKE,OAAQI,KAAK,OAAOC,MAAM,8BAC7DH,EACE,QAAAC,IAAA,2CAAAC,KAAK,eACLE,EAAE,2mB,aChBZ,MAAMC,EAAsB,k4G,MCafC,EAAgB,MAL7B,WAAAZ,CAAAC,G,UAUUC,KAAQW,SAAwC,QAqBzD,CAnBC,WAAAC,CAAYC,GACRA,EAAMC,OAAuBC,mBAAoCC,MAAMC,QAAU,Q,CAGrF,WAAAC,CAAYL,GACRA,EAAMC,OAAuBC,mBAAoCC,MAAMC,QAAU,M,CAErF,MAAAd,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKc,MAAM,oBAAoBC,KAAK,iBAClChB,EAAA,QAAAC,IAAA,2CAAMc,MAAM,YAAYE,SAAS,IAAIC,QAAStB,KAAKY,YAAYW,KAAKvB,MAAOwB,OAAQxB,KAAKkB,YAAYK,KAAKvB,OACvGI,EAAA,QAAAC,IAAA,2CAAMoB,KAAK,gBAAc,MAE3BrB,EAAM,QAAAC,IAAA,2CAAAc,MAAO,mBAAmBnB,KAAKW,WAAYS,KAAK,eACpDhB,EAAA,QAAAC,IAAA,2CAAMoB,KAAK,mBAAiB,yB","ignoreList":[]}