@visitwonders/assembly 0.1.0

package/dist/form/time-picker.js

@@ -0,0 +1,618 @@
+import "./time-picker.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { modifier } from 'ember-modifier';
+import { guidFor } from '@ember/object/internals';
+import Popover from '../overlay/popover.js';
+import Icon from '../media/icon.js';
+import { ChevronDown, Clock } from 'lucide';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i } from 'decorator-transforms/runtime';
+
+;
+
+// ============================================================================
+// Time Utilities
+// ============================================================================
+/**
+ * Parse a time string into hours and minutes
+ * Supports formats: HH:mm, H:mm, HHmm, Hmm, Ham, H:mmam, etc.
+ */
+function parseTimeString(input) {
+  if (!input) return null;
+  const trimmed = input.trim().toLowerCase();
+  // Check for am/pm
+  const isPM = trimmed.includes('pm');
+  const isAM = trimmed.includes('am');
+  const timeStr = trimmed.replace(/[ap]m/g, '').trim();
+  // Try HH:mm or H:mm format
+  const colonMatch = timeStr.match(/^(\d{1,2}):(\d{2})$/);
+  if (colonMatch) {
+    let hours = parseInt(colonMatch[1], 10);
+    const minutes = parseInt(colonMatch[2], 10);
+    if (isPM && hours < 12) hours += 12;
+    if (isAM && hours === 12) hours = 0;
+    if (hours >= 0 && hours < 24 && minutes >= 0 && minutes < 60) {
+      return {
+        hours,
+        minutes
+      };
+    }
+    return null;
+  }
+  // Try HHmm or Hmm format (without colon)
+  const noColonMatch = timeStr.match(/^(\d{1,2})(\d{2})$/);
+  if (noColonMatch) {
+    let hours = parseInt(noColonMatch[1], 10);
+    const minutes = parseInt(noColonMatch[2], 10);
+    if (isPM && hours < 12) hours += 12;
+    if (isAM && hours === 12) hours = 0;
+    if (hours >= 0 && hours < 24 && minutes >= 0 && minutes < 60) {
+      return {
+        hours,
+        minutes
+      };
+    }
+    return null;
+  }
+  // Try just hours (e.g., "9", "9am", "14")
+  const hoursOnlyMatch = timeStr.match(/^(\d{1,2})$/);
+  if (hoursOnlyMatch) {
+    let hours = parseInt(hoursOnlyMatch[1], 10);
+    if (isPM && hours < 12) hours += 12;
+    if (isAM && hours === 12) hours = 0;
+    if (hours >= 0 && hours < 24) {
+      return {
+        hours,
+        minutes: 0
+      };
+    }
+    return null;
+  }
+  return null;
+}
+/**
+ * Format hours and minutes to HH:mm string (24h format)
+ */
+function formatTime24h(hours, minutes) {
+  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+}
+/**
+ * Format time for display based on format preference
+ */
+function formatTimeDisplay(value, format) {
+  const parsed = parseTimeString(value);
+  if (!parsed) return value;
+  const {
+    hours,
+    minutes
+  } = parsed;
+  if (format === '12h') {
+    const period = hours >= 12 ? 'PM' : 'AM';
+    const displayHours = hours % 12 || 12;
+    return `${displayHours}:${minutes.toString().padStart(2, '0')} ${period}`;
+  }
+  return formatTime24h(hours, minutes);
+}
+/**
+ * Compare two time strings
+ * Returns negative if a < b, positive if a > b, 0 if equal
+ */
+function compareTime(a, b) {
+  const parsedA = parseTimeString(a);
+  const parsedB = parseTimeString(b);
+  if (!parsedA || !parsedB) return 0;
+  const minutesA = parsedA.hours * 60 + parsedA.minutes;
+  const minutesB = parsedB.hours * 60 + parsedB.minutes;
+  return minutesA - minutesB;
+}
+/**
+ * Generate time options based on interval and constraints
+ */
+function generateTimeOptions(interval, format, minTime, maxTime) {
+  const options = [];
+  const minutesInDay = 24 * 60;
+  for (let totalMinutes = 0; totalMinutes < minutesInDay; totalMinutes += interval) {
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    const value = formatTime24h(hours, minutes);
+    // Check constraints
+    let isDisabled = false;
+    if (minTime && compareTime(value, minTime) < 0) {
+      isDisabled = true;
+    }
+    if (maxTime && compareTime(value, maxTime) > 0) {
+      isDisabled = true;
+    }
+    options.push({
+      value,
+      label: formatTimeDisplay(value, format),
+      isDisabled
+    });
+  }
+  return options;
+}
+/**
+ * Get current time as HH:mm string
+ */
+function getCurrentTime() {
+  const now = new Date();
+  return formatTime24h(now.getHours(), now.getMinutes());
+}
+/**
+ * Round time to nearest interval
+ */
+function roundToInterval(time, interval) {
+  const parsed = parseTimeString(time);
+  if (!parsed) return time;
+  const totalMinutes = parsed.hours * 60 + parsed.minutes;
+  const rounded = Math.round(totalMinutes / interval) * interval;
+  const hours = Math.floor(rounded / 60) % 24;
+  const minutes = rounded % 60;
+  return formatTime24h(hours, minutes);
+}
+// ============================================================================
+// Main Component
+// ============================================================================
+let timePickerIdCounter = 0;
+class TimePicker extends Component {
+  static {
+    g(this.prototype, "isOpen", [tracked], function () {
+      return false;
+    });
+  }
+  #isOpen = (i(this, "isOpen"), void 0);
+  static {
+    g(this.prototype, "activeIndex", [tracked], function () {
+      return -1;
+    });
+  }
+  #activeIndex = (i(this, "activeIndex"), void 0);
+  static {
+    g(this.prototype, "inputValue", [tracked], function () {
+      return '';
+    });
+  }
+  #inputValue = (i(this, "inputValue"), void 0);
+  static {
+    g(this.prototype, "skipInputReset", [tracked], function () {
+      return false;
+    });
+  }
+  #skipInputReset = (i(this, "skipInputReset"), void 0);
+  /** Flag to prevent closeDropdown from resetting inputValue after a successful typed submission */
+  listboxId = `time-picker-listbox-${++timePickerIdCounter}`;
+  inputElement = null;
+  listboxElement = null;
+  get componentId() {
+    return this.args.id || guidFor(this);
+  }
+  get format() {
+    return this.args.format ?? '24h';
+  }
+  get interval() {
+    return this.args.interval ?? 15;
+  }
+  get closeOnSelect() {
+    return this.args.closeOnSelect ?? true;
+  }
+  get allowTextInput() {
+    return this.args.allowTextInput ?? true;
+  }
+  get showIcon() {
+    return this.args.showIcon ?? true;
+  }
+  get showNow() {
+    return this.args.showNow ?? false;
+  }
+  get hideDisabledOptions() {
+    return this.args.hideDisabledOptions ?? false;
+  }
+  get snapToInterval() {
+    return this.args.snapToInterval ?? false;
+  }
+  get selectedValue() {
+    return this.args.value ?? null;
+  }
+  get displayValue() {
+    if (this.selectedValue) {
+      return formatTimeDisplay(this.selectedValue, this.format);
+    }
+    return '';
+  }
+  /** The value to show in the input field */
+  get inputDisplayValue() {
+    // When dropdown is open, show what user is typing
+    if (this.isOpen) {
+      return this.inputValue;
+    }
+    // After submitting a typed value, show the submitted value until args.value syncs
+    if (this.skipInputReset) {
+      return this.inputValue;
+    }
+    // Otherwise show the current selected value
+    return this.displayValue;
+  }
+  get placeholder() {
+    return this.args.placeholder ?? (this.format === '12h' ? 'Select time' : 'HH:mm');
+  }
+  get timeOptions() {
+    const options = generateTimeOptions(this.interval, this.format, this.args.minTime, this.args.maxTime);
+    if (this.showNow) {
+      const now = getCurrentTime();
+      const roundedNow = roundToInterval(now, this.interval);
+      const nowOption = {
+        value: roundedNow,
+        label: `Now (${formatTimeDisplay(roundedNow, this.format)})`,
+        isNow: true
+      };
+      // Check if now is within constraints
+      if (this.args.minTime && compareTime(roundedNow, this.args.minTime) < 0) {
+        nowOption.isDisabled = true;
+      }
+      if (this.args.maxTime && compareTime(roundedNow, this.args.maxTime) > 0) {
+        nowOption.isDisabled = true;
+      }
+      return [nowOption, ...options];
+    }
+    return options;
+  }
+  get enabledOptions() {
+    return this.timeOptions.filter(o => !o.isDisabled);
+  }
+  get selectedIndex() {
+    if (!this.selectedValue) return -1;
+    return this.timeOptions.findIndex(o => o.value === this.selectedValue);
+  }
+  get activeOptionId() {
+    if (this.activeIndex >= 0 && this.activeIndex < this.timeOptions.length) {
+      return this.getOptionId(this.activeIndex);
+    }
+    return undefined;
+  }
+  get ariaExpanded() {
+    return this.isOpen ? 'true' : 'false';
+  }
+  get ariaRequired() {
+    return this.args.isRequired ? 'true' : undefined;
+  }
+  get ariaInvalid() {
+    return this.args.isInvalid ? 'true' : undefined;
+  }
+  getOptionId = index => {
+    return `${this.componentId}-option-${index}`;
+  };
+  // ============================================================================
+  // Modifiers
+  // ============================================================================
+  setupInput = modifier(element => {
+    this.inputElement = element;
+    return () => {
+      this.inputElement = null;
+    };
+  });
+  setupListbox = modifier(element => {
+    this.listboxElement = element;
+    // Scroll to selected or current time on mount
+    if (this.isOpen) {
+      this.scrollToSelected();
+    }
+    return () => {
+      this.listboxElement = null;
+    };
+  });
+  // ============================================================================
+  // Event Handlers
+  // ============================================================================
+  handleInputClick = event => {
+    // Stop propagation to prevent the Popover trigger from toggling
+    event.stopPropagation();
+    if (!this.args.isDisabled && !this.args.isReadOnly) {
+      this.openDropdown();
+    }
+  };
+  handleInputFocus = event => {
+    this.args.onFocus?.(event);
+  };
+  handleInputBlur = event => {
+    // Parse and validate text input on blur
+    if (this.allowTextInput && this.inputValue !== this.displayValue) {
+      this.parseAndSubmitTypedValue();
+    }
+    this.args.onBlur?.(event);
+  };
+  /** Parse the typed input value, apply snapping if enabled, validate, and submit */
+  parseAndSubmitTypedValue() {
+    const parsed = parseTimeString(this.inputValue);
+    if (parsed) {
+      let value = formatTime24h(parsed.hours, parsed.minutes);
+      // Round to nearest interval if snapToInterval is enabled
+      if (this.snapToInterval) {
+        value = roundToInterval(value, this.interval);
+      }
+      // Check constraints
+      let isValid = true;
+      if (this.args.minTime && compareTime(value, this.args.minTime) < 0) {
+        isValid = false;
+      }
+      if (this.args.maxTime && compareTime(value, this.args.maxTime) > 0) {
+        isValid = false;
+      }
+      if (isValid) {
+        this.args.onChange?.(value);
+        // Update inputValue to the formatted new value immediately
+        // (don't wait for displayValue to update via args.value)
+        this.inputValue = formatTimeDisplay(value, this.format);
+        // Prevent closeDropdown from resetting inputValue
+        this.skipInputReset = true;
+        return true;
+      }
+    }
+    // Reset input to display value on invalid input
+    this.inputValue = this.displayValue;
+    return false;
+  }
+  handleInputChange = event => {
+    const target = event.target;
+    this.inputValue = target.value;
+  };
+  handleKeyDown = event => {
+    if (this.args.isDisabled) return;
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.isOpen) {
+          this.openDropdown();
+        } else {
+          this.moveActive(1);
+        }
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.isOpen) {
+          this.openDropdown();
+        } else {
+          this.moveActive(-1);
+        }
+        break;
+      case 'Enter':
+        event.preventDefault();
+        event.stopPropagation();
+        // If user typed a custom value, parse and submit it
+        if (this.allowTextInput && this.inputValue !== this.displayValue) {
+          this.parseAndSubmitTypedValue();
+          this.closeDropdown();
+        } else if (this.isOpen && this.activeIndex >= 0) {
+          const option = this.timeOptions[this.activeIndex];
+          if (option && !option.isDisabled) {
+            this.selectOption(option.value);
+          }
+        } else if (!this.isOpen) {
+          this.openDropdown();
+        }
+        break;
+      case 'Escape':
+        if (this.isOpen) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.closeDropdown();
+        }
+        break;
+      case 'Home':
+        if (this.isOpen) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.moveToFirst();
+        }
+        break;
+      case 'End':
+        if (this.isOpen) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.moveToLast();
+        }
+        break;
+      case 'Tab':
+        // Parse typed value before closing (blur will also fire, but closeDropdown
+        // would reset inputValue before blur has a chance to parse it)
+        if (this.allowTextInput && this.inputValue !== this.displayValue) {
+          this.parseAndSubmitTypedValue();
+        }
+        if (this.isOpen) {
+          this.closeDropdown();
+        }
+        break;
+    }
+  };
+  handleOptionClick = (value, isDisabled) => {
+    if (!isDisabled) {
+      this.selectOption(value);
+    }
+  };
+  handleOptionMouseEnter = (index, isDisabled) => {
+    if (!isDisabled) {
+      this.activeIndex = index;
+    }
+  };
+  // ============================================================================
+  // Methods
+  // ============================================================================
+  openDropdown = () => {
+    if (this.args.isDisabled || this.args.isReadOnly) return;
+    this.isOpen = true;
+    this.skipInputReset = false;
+    this.inputValue = this.displayValue;
+    // Set active to selected or find closest to current time
+    if (this.selectedIndex >= 0) {
+      this.activeIndex = this.selectedIndex;
+    } else {
+      const currentTime = getCurrentTime();
+      const closestIndex = this.findClosestEnabledIndex(currentTime);
+      this.activeIndex = closestIndex;
+    }
+    // Scroll after DOM updates
+    setTimeout(() => {
+      this.scrollToActive();
+    }, 0);
+  };
+  closeDropdown = () => {
+    this.isOpen = false;
+    this.activeIndex = -1;
+    // Only reset inputValue if we didn't just submit a typed value
+    // Don't reset skipInputReset here - it's needed for the template to show
+    // the correct value until the next render. It gets reset in openDropdown.
+    if (!this.skipInputReset) {
+      this.inputValue = this.displayValue;
+    }
+  };
+  toggleDropdown = () => {
+    if (this.isOpen) {
+      this.closeDropdown();
+    } else {
+      this.openDropdown();
+    }
+  };
+  handleOpenChange = open => {
+    if (open) {
+      this.openDropdown();
+    } else {
+      this.closeDropdown();
+    }
+  };
+  selectOption(value) {
+    this.args.onChange?.(value);
+    this.inputValue = formatTimeDisplay(value, this.format);
+    if (this.closeOnSelect) {
+      this.closeDropdown();
+      this.inputElement?.focus();
+    }
+  }
+  moveActive(direction) {
+    if (this.enabledOptions.length === 0) return;
+    // Find current position in enabled options
+    let newIndex = this.activeIndex;
+    do {
+      newIndex += direction;
+      // Wrap around
+      if (newIndex < 0) {
+        newIndex = this.timeOptions.length - 1;
+      } else if (newIndex >= this.timeOptions.length) {
+        newIndex = 0;
+      }
+      // Prevent infinite loop
+      if (newIndex === this.activeIndex) break;
+    } while (this.timeOptions[newIndex]?.isDisabled);
+    this.activeIndex = newIndex;
+    this.scrollToActive();
+  }
+  moveToFirst() {
+    const firstEnabledIndex = this.timeOptions.findIndex(o => !o.isDisabled);
+    if (firstEnabledIndex >= 0) {
+      this.activeIndex = firstEnabledIndex;
+      this.scrollToActive();
+    }
+  }
+  moveToLast() {
+    for (let i = this.timeOptions.length - 1; i >= 0; i--) {
+      if (!this.timeOptions[i]?.isDisabled) {
+        this.activeIndex = i;
+        this.scrollToActive();
+        break;
+      }
+    }
+  }
+  findClosestEnabledIndex(time) {
+    let closestIndex = -1;
+    let closestDiff = Infinity;
+    const parsed = parseTimeString(time);
+    if (!parsed) return 0;
+    const targetMinutes = parsed.hours * 60 + parsed.minutes;
+    for (let i = 0; i < this.timeOptions.length; i++) {
+      const option = this.timeOptions[i];
+      if (option.isDisabled) continue;
+      const optionParsed = parseTimeString(option.value);
+      if (!optionParsed) continue;
+      const optionMinutes = optionParsed.hours * 60 + optionParsed.minutes;
+      const diff = Math.abs(optionMinutes - targetMinutes);
+      if (diff < closestDiff) {
+        closestDiff = diff;
+        closestIndex = i;
+      }
+    }
+    return closestIndex >= 0 ? closestIndex : 0;
+  }
+  scrollToActive() {
+    if (this.activeIndex < 0 || !this.listboxElement) return;
+    const optionId = this.getOptionId(this.activeIndex);
+    const optionElement = document.getElementById(optionId);
+    if (optionElement && this.listboxElement) {
+      this.scrollIntoViewWithinContainer(optionElement, this.listboxElement);
+    }
+  }
+  scrollToSelected() {
+    if (this.selectedIndex < 0 || !this.listboxElement) return;
+    const optionId = this.getOptionId(this.selectedIndex);
+    const optionElement = document.getElementById(optionId);
+    if (optionElement && this.listboxElement) {
+      this.scrollIntoViewWithinContainer(optionElement, this.listboxElement, true);
+    }
+  }
+  /** Scroll element into view within a scrollable container without affecting page scroll */
+  scrollIntoViewWithinContainer(element, container, center = false) {
+    const elementRect = element.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    if (center) {
+      // Center the element in the container
+      const elementTop = element.offsetTop;
+      const elementHeight = element.offsetHeight;
+      const containerHeight = container.clientHeight;
+      container.scrollTop = elementTop - containerHeight / 2 + elementHeight / 2;
+    } else {
+      // Only scroll if element is not fully visible
+      if (elementRect.top < containerRect.top) {
+        // Element is above visible area
+        container.scrollTop -= containerRect.top - elementRect.top;
+      } else if (elementRect.bottom > containerRect.bottom) {
+        // Element is below visible area
+        container.scrollTop += elementRect.bottom - containerRect.bottom;
+      }
+    }
+  }
+  // ============================================================================
+  // Template
+  // ============================================================================
+  static {
+    setComponentTemplate(precompileTemplate("<Popover @trigger=\"click\" @open={{this.isOpen}} @onOpenChange={{this.handleOpenChange}} @dismissOnClickOutside={{true}} @dismissOnEscape={{true}} class=\"time-picker_eb934fd65\" data-invalid={{if @isInvalid \"true\"}} data-disabled={{if @isDisabled \"true\"}} data-readonly={{if @isReadOnly \"true\"}} data-open={{if this.isOpen \"true\"}} data-test-time-picker ...attributes as |popover|>\n  {{!-- Hidden input for form submission --}}\n  {{#if @name}}\n    <input type=\"hidden\" name={{@name}} value={{this.selectedValue}} data-test-time-picker-hidden-input />\n  {{/if}}\n\n  <popover.Trigger class=\"time-picker-trigger-wrapper_eb934fd65\" disabled={{@isDisabled}} data-test-time-picker-trigger-wrapper>\n    <div class=\"time-picker-input-wrapper_eb934fd65\">\n      {{#if this.showIcon}}\n        <span class=\"time-picker-icon_eb934fd65\" aria-hidden=\"true\" data-test-time-picker-icon>\n          <Icon @icon={{Clock}} @size=\"sm\" />\n        </span>\n      {{/if}}\n\n      {{!-- template-lint-disable no-redundant-role --}}\n      <input id={{this.componentId}} type=\"text\" role=\"combobox\" class=\"time-picker-input_eb934fd65\" aria-haspopup=\"listbox\" aria-expanded={{this.ariaExpanded}} aria-controls={{this.listboxId}} aria-activedescendant={{this.activeOptionId}} aria-required={{this.ariaRequired}} aria-invalid={{this.ariaInvalid}} aria-describedby={{@aria-describedby}} placeholder={{this.placeholder}} value={{this.inputDisplayValue}} disabled={{@isDisabled}} readonly={{if this.allowTextInput @isReadOnly true}} autocomplete=\"off\" {{this.setupInput}} {{on \"click\" this.handleInputClick}} {{on \"focus\" this.handleInputFocus}} {{on \"blur\" this.handleInputBlur}} {{on \"input\" this.handleInputChange}} {{on \"keydown\" this.handleKeyDown}} data-test-time-picker-input />\n\n      <span class=\"time-picker-trigger_eb934fd65\" aria-hidden=\"true\" data-test-time-picker-trigger>\n        <Icon @icon={{ChevronDown}} @size=\"sm\" />\n      </span>\n    </div>\n  </popover.Trigger>\n\n  <popover.Content @side=\"bottom\" @align=\"start\" @sideOffset={{4}} @animation=\"scale\" class=\"time-picker-popover-content_eb934fd65\">\n    <div id={{this.listboxId}} role=\"listbox\" class=\"time-picker-listbox_eb934fd65\" tabindex=\"-1\" {{this.setupListbox}} data-test-time-picker-listbox>\n      {{#each this.timeOptions as |option index|}}\n        {{#if (this.shouldShowOption option)}}\n          <div id={{this.getOptionId index}} role=\"option\" class=\"time-picker-option_eb934fd65\" aria-selected={{if (this.isOptionSelected option.value) \"true\" \"false\"}} aria-disabled={{if option.isDisabled \"true\"}} data-selected={{if (this.isOptionSelected option.value) \"true\"}} data-active={{if (this.isOptionActive index) \"true\"}} data-disabled={{if option.isDisabled \"true\"}} data-now={{if option.isNow \"true\"}} {{on \"click\" (fn this.handleOptionClick option.value option.isDisabled)}} {{on \"mouseenter\" (fn this.handleOptionMouseEnter index option.isDisabled)}} data-test-time-picker-option data-test-time-picker-option-value={{option.value}}>\n            {{option.label}}\n          </div>\n        {{/if}}\n      {{/each}}\n    </div>\n  </popover.Content>\n</Popover>", {
+      strictMode: true,
+      scope: () => ({
+        Popover,
+        Icon,
+        Clock,
+        on,
+        ChevronDown,
+        fn
+      })
+    }), this);
+  }
+  // Helper methods for template
+  isOptionSelected = value => {
+    return this.selectedValue === value;
+  };
+  isOptionActive = index => {
+    return this.activeIndex === index;
+  };
+  shouldShowOption = option => {
+    if (this.hideDisabledOptions && option.isDisabled) {
+      return false;
+    }
+    return true;
+  };
+}
+
+export { TimePicker as default, formatTime24h, formatTimeDisplay, generateTimeOptions, parseTimeString };
+//# sourceMappingURL=time-picker.js.map

package/dist/form/time-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/form/toggle-field.css

@@ -0,0 +1,6 @@
+/* src/form/toggle-field.css */
+.toggle-field_e5c1644c4 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1-5);
+}

package/dist/form/toggle-field.js

@@ -0,0 +1,40 @@
+import "./toggle-field.css"
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+import Toggle from './toggle.js';
+import ErrorMessage from './error-message.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+;
+
+class ToggleField extends Component {
+  guid = guidFor(this);
+  get fieldId() {
+    return this.args.id ?? this.guid;
+  }
+  get errorMessageId() {
+    return `${this.guid}-error`;
+  }
+  get isInvalid() {
+    return !!this.args.error;
+  }
+  get ariaDescribedBy() {
+    if (this.isInvalid) {
+      return this.errorMessageId;
+    }
+    return undefined;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"toggle-field_e5c1644c4\" data-invalid={{if this.isInvalid \"true\"}} data-test-toggle-field ...attributes>\n  <Toggle @id={{this.fieldId}} @label={{@label}} @description={{@description}} @checked={{@checked}} @defaultChecked={{@defaultChecked}} @onChange={{@onChange}} @labelPosition={{@labelPosition}} @size={{@size}} @isDisabled={{@isDisabled}} @name={{@name}} @value={{@value}} @isRequired={{@isRequired}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} @aria-describedby={{this.ariaDescribedBy}} />\n\n  {{#if @error}}\n    <ErrorMessage id={{this.errorMessageId}} @isInvalid={{this.isInvalid}}>\n      {{@error}}\n    </ErrorMessage>\n  {{/if}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        Toggle,
+        ErrorMessage
+      })
+    }), this);
+  }
+}
+
+export { ToggleField as default };
+//# sourceMappingURL=toggle-field.js.map

package/dist/form/toggle-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-field.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}