@visitwonders/assembly 0.1.0

package/dist/form/listbox.js

@@ -0,0 +1,388 @@
+import "./listbox.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { guidFor } from '@ember/object/internals';
+import { on } from '@ember/modifier';
+import { modifier } from 'ember-modifier';
+import { hash } from '@ember/helper';
+import { eq } from 'ember-truth-helpers';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i } from 'decorator-transforms/runtime';
+
+;
+
+// ============================================================================
+// Sub-components
+// ============================================================================
+class ListboxOptionComponent extends Component {
+  handleClick = () => {
+    if (!this.args.disabled) {
+      this.args.onselect?.(this.args.value);
+    }
+  };
+  handleMouseEnter = () => {
+    if (!this.args.disabled) {
+      this.args.onhover?.(this.args.value);
+    }
+  };
+  static {
+    setComponentTemplate(precompileTemplate("<div role=\"option\" id={{@id}} class=\"listbox-option_efb584ef0\" aria-selected={{if @selected \"true\" \"false\"}} aria-disabled={{if @disabled \"true\"}} data-selected={{if @selected \"true\" \"false\"}} data-focused={{if @focused \"true\" \"false\"}} data-disabled={{if @disabled \"true\" \"false\"}} data-test-listbox-option data-test-listbox-option-value={{@value}} {{on \"click\" this.handleClick}} {{on \"mouseenter\" this.handleMouseEnter}} ...attributes>\n  {{yield}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        on
+      })
+    }), this);
+  }
+}
+class ListboxGroupComponent extends Component {
+  labelId = `${guidFor(this)}-label`;
+  static {
+    setComponentTemplate(precompileTemplate("<div role=\"group\" aria-labelledby={{this.labelId}} class=\"listbox-group_efb584ef0\" data-test-listbox-group ...attributes>\n  <div role=\"presentation\" id={{this.labelId}} class=\"listbox-group-label_efb584ef0\" data-test-listbox-group-label>\n    {{@label}}\n  </div>\n  {{yield}}\n</div>", {
+      strictMode: true
+    }), this);
+  }
+}
+class ListboxGroupLabelComponent extends Component {
+  // Explicit role as presentation element
+  get role() {
+    return 'presentation';
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div role={{this.role}} class=\"listbox-group-label_efb584ef0\" data-test-listbox-group-label ...attributes>\n  {{yield}}\n</div>", {
+      strictMode: true
+    }), this);
+  }
+}
+class ListboxEmptyComponent extends Component {
+  // Semantic class name for empty state
+  get className() {
+    return 'listbox-empty';
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class={{this.className}} data-test-listbox-empty ...attributes>\n  {{yield}}\n</div>", {
+      strictMode: true
+    }), this);
+  }
+}
+// ============================================================================
+// Main Component
+// ============================================================================
+
+class Listbox extends Component {
+  static {
+    g(this.prototype, "focusedValue", [tracked], function () {
+      return null;
+    });
+  }
+  #focusedValue = (i(this, "focusedValue"), void 0);
+  static {
+    g(this.prototype, "typeaheadBuffer", [tracked], function () {
+      return '';
+    });
+  }
+  #typeaheadBuffer = (i(this, "typeaheadBuffer"), void 0);
+  typeaheadTimeout = null;
+  elementRef = null;
+  // ============================================================================
+  // Lifecycle
+  // ============================================================================
+  willDestroy() {
+    super.willDestroy();
+    if (this.typeaheadTimeout) {
+      clearTimeout(this.typeaheadTimeout);
+    }
+  }
+  // ============================================================================
+  // Computed Properties
+  // ============================================================================
+  get componentId() {
+    return guidFor(this);
+  }
+  get mode() {
+    return this.args.mode ?? 'single';
+  }
+  get selectedValue() {
+    if (this.mode === 'multiple') {
+      return this.args.value ?? [];
+    }
+    return this.args.value ?? '';
+  }
+  get loop() {
+    return this.args.loop ?? false;
+  }
+  get typeaheadEnabled() {
+    return this.args.typeahead ?? true;
+  }
+  get typeaheadTimeoutMs() {
+    return this.args.typeaheadTimeout ?? 500;
+  }
+  get focusOnHover() {
+    return this.args.focusOnHover ?? true;
+  }
+  /** Normalize options to consistent format */
+  get normalizedOptions() {
+    const options = this.args.options ?? [];
+    return options.map(option => {
+      if (typeof option === 'string') {
+        return {
+          value: option,
+          label: option,
+          disabled: false
+        };
+      }
+      const getValue = this.args.getOptionValue ?? (o => o.value);
+      const getLabel = this.args.getOptionLabel ?? (o => o.label);
+      const isDisabled = this.args.isOptionDisabled ?? (o => o.disabled ?? false);
+      const getGroup = this.args.groupBy;
+      return {
+        value: getValue(option),
+        label: getLabel(option),
+        disabled: isDisabled(option),
+        group: getGroup ? getGroup(option) : undefined
+      };
+    });
+  }
+  /** Get enabled (non-disabled) options for navigation */
+  get enabledOptions() {
+    return this.normalizedOptions.filter(opt => !opt.disabled);
+  }
+  /** Group options by group key */
+  get groupedOptions() {
+    const groups = new Map();
+    for (const option of this.normalizedOptions) {
+      const groupKey = option.group ?? null;
+      const existing = groups.get(groupKey) ?? [];
+      existing.push(option);
+      groups.set(groupKey, existing);
+    }
+    const result = [];
+    for (const [group, options] of groups) {
+      result.push({
+        group,
+        options
+      });
+    }
+    return result;
+  }
+  get hasGroups() {
+    return this.groupedOptions.some(g => g.group !== null);
+  }
+  get isEmpty() {
+    return this.normalizedOptions.length === 0;
+  }
+  get activedescendant() {
+    if (this.focusedValue) {
+      return this.getOptionId(this.focusedValue);
+    }
+    return undefined;
+  }
+  get tabIndex() {
+    return this.args.isDisabled ? -1 : 0;
+  }
+  // ============================================================================
+  // Methods
+  // ============================================================================
+  getOptionId = value => {
+    // Sanitize value to ensure valid HTML ID (replace non-alphanumeric chars)
+    const sanitizedValue = value.replace(/[^a-zA-Z0-9-_]/g, '_');
+    return `${this.componentId}-option-${sanitizedValue}`;
+  };
+  getGroupId = groupName => {
+    // Sanitize group name to ensure valid HTML ID (replace non-alphanumeric chars)
+    const sanitizedGroup = groupName.replace(/[^a-zA-Z0-9-_]/g, '_');
+    return `${this.componentId}-group-${sanitizedGroup}`;
+  };
+  isSelected = value => {
+    if (this.mode === 'multiple') {
+      const selected = this.selectedValue;
+      return selected.includes(value);
+    }
+    return this.selectedValue === value;
+  };
+  isFocused = value => {
+    return this.focusedValue === value;
+  };
+  selectValue = value => {
+    const option = this.normalizedOptions.find(o => o.value === value);
+    if (!option || option.disabled) return;
+    this.args.onSelect?.(value);
+    if (this.mode === 'multiple') {
+      const current = this.selectedValue.slice();
+      const index = current.indexOf(value);
+      let newValue;
+      if (index >= 0) {
+        // Remove if already selected (toggle)
+        current.splice(index, 1);
+        newValue = current;
+      } else {
+        // Add to selection
+        newValue = [...current, value];
+      }
+      this.args.onChange?.(newValue);
+    } else {
+      this.args.onChange?.(value);
+    }
+  };
+  moveFocus(direction) {
+    const enabled = this.enabledOptions;
+    if (enabled.length === 0) return;
+    const currentIndex = this.focusedValue ? enabled.findIndex(o => o.value === this.focusedValue) : -1;
+    let newIndex;
+    switch (direction) {
+      case 'first':
+        newIndex = 0;
+        break;
+      case 'last':
+        newIndex = enabled.length - 1;
+        break;
+      case 'next':
+        if (currentIndex < 0) {
+          newIndex = 0;
+        } else if (currentIndex >= enabled.length - 1) {
+          newIndex = this.loop ? 0 : enabled.length - 1;
+        } else {
+          newIndex = currentIndex + 1;
+        }
+        break;
+      case 'prev':
+        if (currentIndex < 0) {
+          newIndex = enabled.length - 1;
+        } else if (currentIndex <= 0) {
+          newIndex = this.loop ? enabled.length - 1 : 0;
+        } else {
+          newIndex = currentIndex - 1;
+        }
+        break;
+    }
+    const newOption = enabled[newIndex];
+    if (newOption) {
+      this.setFocusedValue(newOption.value);
+    }
+  }
+  setFocusedValue(value) {
+    this.focusedValue = value;
+    this.args.onFocusChange?.(value);
+    // Scroll the focused option into view
+    if (value) {
+      const optionId = this.getOptionId(value);
+      const optionElement = document.getElementById(optionId);
+      optionElement?.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+  }
+  handleTypeahead(char) {
+    if (!this.typeaheadEnabled) return;
+    // Clear existing timeout
+    if (this.typeaheadTimeout) {
+      clearTimeout(this.typeaheadTimeout);
+    }
+    // Append character to buffer
+    this.typeaheadBuffer += char.toLowerCase();
+    // Find matching option
+    const match = this.enabledOptions.find(option => option.label.toLowerCase().startsWith(this.typeaheadBuffer));
+    if (match) {
+      this.setFocusedValue(match.value);
+    }
+    // Set timeout to clear buffer
+    this.typeaheadTimeout = setTimeout(() => {
+      this.typeaheadBuffer = '';
+      this.typeaheadTimeout = null;
+    }, this.typeaheadTimeoutMs);
+  }
+  // ============================================================================
+  // Event Handlers
+  // ============================================================================
+  handleKeyDown = event => {
+    if (this.args.isDisabled) return;
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.moveFocus('next');
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.moveFocus('prev');
+        break;
+      case 'Home':
+        event.preventDefault();
+        this.moveFocus('first');
+        break;
+      case 'End':
+        event.preventDefault();
+        this.moveFocus('last');
+        break;
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        if (this.focusedValue) {
+          this.selectValue(this.focusedValue);
+        }
+        break;
+      default:
+        // Typeahead: single printable character
+        if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+          this.handleTypeahead(event.key);
+        }
+        break;
+    }
+  };
+  handleFocus = () => {
+    // Focus first selected option, or first enabled option
+    if (!this.focusedValue) {
+      if (this.mode === 'single' && this.selectedValue) {
+        this.setFocusedValue(this.selectedValue);
+      } else if (this.mode === 'multiple') {
+        const selected = this.selectedValue;
+        if (selected.length > 0) {
+          this.setFocusedValue(selected[0]);
+        } else if (this.enabledOptions.length > 0) {
+          this.setFocusedValue(this.enabledOptions[0].value);
+        }
+      } else if (this.enabledOptions.length > 0) {
+        this.setFocusedValue(this.enabledOptions[0].value);
+      }
+    }
+  };
+  handleBlur = () => {
+    this.setFocusedValue(null);
+  };
+  handleOptionMouseEnter = value => {
+    if (this.focusOnHover && !this.args.isDisabled) {
+      this.setFocusedValue(value);
+    }
+  };
+  // ============================================================================
+  // Modifiers
+  // ============================================================================
+  setupRef = modifier(element => {
+    this.elementRef = element;
+    if (this.args.autoFocus) {
+      element.focus();
+    }
+    return () => {
+      this.elementRef = null;
+    };
+  });
+  // ============================================================================
+  // Template
+  // ============================================================================
+  static {
+    setComponentTemplate(precompileTemplate("{{!-- tabindex=\"0\" is required for focusable listbox, -1 when disabled --}}\n{{!-- template-lint-disable no-positive-tabindex require-aria-activedescendant-tabindex --}}\n<div role=\"listbox\" tabindex={{this.tabIndex}} class=\"listbox_efb584ef0\" aria-multiselectable={{if (eq this.mode \"multiple\") \"true\"}} aria-activedescendant={{this.activedescendant}} aria-disabled={{if @isDisabled \"true\"}} data-disabled={{if @isDisabled \"true\" \"false\"}} data-test-listbox {{this.setupRef}} {{on \"keydown\" this.handleKeyDown}} {{on \"focus\" this.handleFocus}} {{on \"blur\" this.handleBlur}} ...attributes>\n  {{#if (has-block)}}\n    {{yield (hash option=ListboxOptionComponent group=ListboxGroupComponent groupLabel=ListboxGroupLabelComponent empty=ListboxEmptyComponent isSelected=this.isSelected isFocused=this.isFocused focusedValue=this.focusedValue select=this.selectValue getOptionId=this.getOptionId onOptionMouseEnter=this.handleOptionMouseEnter)}}\n  {{else if this.isEmpty}}\n    {{#if (has-block \"empty\")}}\n      {{yield to=\"empty\"}}\n    {{else}}\n      <div class=\"listbox-empty_efb584ef0\" data-test-listbox-empty>\n        No options available\n      </div>\n    {{/if}}\n  {{else if this.hasGroups}}\n    {{#each this.groupedOptions as |group|}}\n      {{#if group.group}}\n        <div role=\"group\" aria-labelledby={{this.getGroupId group.group}} class=\"listbox-group_efb584ef0\" data-test-listbox-group>\n          <div role=\"presentation\" id={{this.getGroupId group.group}} class=\"listbox-group-label_efb584ef0\" data-test-listbox-group-label>\n            {{group.group}}\n          </div>\n          {{#each group.options as |option|}}\n            <ListboxOptionComponent @value={{option.value}} @disabled={{option.disabled}} @selected={{this.isSelected option.value}} @focused={{this.isFocused option.value}} @id={{this.getOptionId option.value}} @onselect={{this.selectValue}} @onhover={{this.handleOptionMouseEnter}}>\n              {{option.label}}\n            </ListboxOptionComponent>\n          {{/each}}\n        </div>\n      {{else}}\n        {{#each group.options as |option|}}\n          <ListboxOptionComponent @value={{option.value}} @disabled={{option.disabled}} @selected={{this.isSelected option.value}} @focused={{this.isFocused option.value}} @id={{this.getOptionId option.value}} @onselect={{this.selectValue}} @onhover={{this.handleOptionMouseEnter}}>\n            {{option.label}}\n          </ListboxOptionComponent>\n        {{/each}}\n      {{/if}}\n    {{/each}}\n  {{else}}\n    {{#each this.normalizedOptions as |option|}}\n      <ListboxOptionComponent @value={{option.value}} @disabled={{option.disabled}} @selected={{this.isSelected option.value}} @focused={{this.isFocused option.value}} @id={{this.getOptionId option.value}} @onselect={{this.selectValue}} @onhover={{this.handleOptionMouseEnter}}>\n        {{option.label}}\n      </ListboxOptionComponent>\n    {{/each}}\n  {{/if}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        eq,
+        on,
+        hash,
+        ListboxOptionComponent,
+        ListboxGroupComponent,
+        ListboxGroupLabelComponent,
+        ListboxEmptyComponent
+      })
+    }), this);
+  }
+}
+
+export { Listbox as default };
+//# sourceMappingURL=listbox.js.map

package/dist/form/listbox.js.map

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

package/dist/form/money-field.css

@@ -0,0 +1,9 @@
+/* src/form/money-field.css */
+/* Money Field Input - Monospace font for numeric alignment */
+[data-money-field] {
+  font-family: var(--font-family-mono);
+}
+
+[data-money-field]::placeholder {
+  font-family: var(--font-family-sans);
+}

package/dist/form/money-field.js

@@ -0,0 +1,203 @@
+import "./money-field.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import { array } from '@ember/helper';
+import Control from './control.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime';
+
+;
+
+const CURRENCY_CONFIG = {
+  GBP: {
+    symbol: '£',
+    decimals: 2,
+    position: 'prefix'
+  },
+  USD: {
+    symbol: '$',
+    decimals: 2,
+    position: 'prefix'
+  },
+  EUR: {
+    symbol: '€',
+    decimals: 2,
+    position: 'prefix'
+  },
+  JPY: {
+    symbol: '¥',
+    decimals: 0,
+    position: 'prefix'
+  },
+  CHF: {
+    symbol: 'CHF',
+    decimals: 2,
+    position: 'prefix'
+  }
+};
+class MoneyField extends Component {
+  static {
+    g(this.prototype, "internalDisplayValue", [tracked], function () {
+      return '';
+    });
+  }
+  #internalDisplayValue = (i(this, "internalDisplayValue"), void 0);
+  get currencyConfig() {
+    return CURRENCY_CONFIG[this.args.currency] ?? {
+      symbol: this.args.currency,
+      decimals: 2,
+      position: 'prefix'
+    };
+  }
+  get showCurrencySymbol() {
+    return this.args.showCurrencySymbol ?? true;
+  }
+  get currencyPosition() {
+    return this.args.currencyPosition ?? this.currencyConfig.position;
+  }
+  get currencySymbol() {
+    return this.currencyConfig.symbol;
+  }
+  get showPrefix() {
+    return this.showCurrencySymbol && this.currencyPosition === 'prefix';
+  }
+  get showSuffix() {
+    return this.showCurrencySymbol && this.currencyPosition === 'suffix';
+  }
+  get isLabelHidden() {
+    return this.args.labelVisibility === 'hidden';
+  }
+  get isInvalid() {
+    return !!this.args.error;
+  }
+  get isControlled() {
+    return this.args.value !== undefined;
+  }
+  get displayValue() {
+    if (this.isControlled) {
+      return this.formatMinorToDisplay(this.args.value);
+    }
+    return this.internalDisplayValue;
+  }
+  get placeholder() {
+    if (this.args.placeholder) {
+      return this.args.placeholder;
+    }
+    const {
+      decimals
+    } = this.currencyConfig;
+    if (decimals === 0) {
+      return '0';
+    }
+    return `0.${'0'.repeat(decimals)}`;
+  }
+  formatMinorToDisplay(minorUnits) {
+    if (minorUnits === undefined || minorUnits === null) {
+      return '';
+    }
+    const {
+      decimals
+    } = this.currencyConfig;
+    if (decimals === 0) {
+      return String(minorUnits);
+    }
+    const majorUnits = minorUnits / Math.pow(10, decimals);
+    return majorUnits.toFixed(decimals);
+  }
+  parseDisplayToMinor(displayValue) {
+    if (!displayValue || displayValue.trim() === '') {
+      return null;
+    }
+    const {
+      decimals
+    } = this.currencyConfig;
+    const parsed = parseFloat(displayValue);
+    if (isNaN(parsed)) {
+      return null;
+    }
+    return Math.round(parsed * Math.pow(10, decimals));
+  }
+  clampValue(value) {
+    const min = this.args.min ?? -Infinity;
+    const max = this.args.max ?? Infinity;
+    return Math.max(min, Math.min(max, value));
+  }
+  handleInput(event) {
+    const input = event.target;
+    const rawValue = input.value;
+    // Allow only valid characters for decimal input
+    const {
+      decimals
+    } = this.currencyConfig;
+    const validPattern = decimals > 0 ? /^-?\d*\.?\d*$/ : /^-?\d*$/;
+    if (!validPattern.test(rawValue)) {
+      // Revert to previous value if invalid characters
+      input.value = this.displayValue;
+      return;
+    }
+    // Check decimal places
+    if (decimals > 0 && rawValue.includes('.')) {
+      const parts = rawValue.split('.');
+      if (parts[1] && parts[1].length > decimals) {
+        input.value = this.displayValue;
+        return;
+      }
+    }
+    if (!this.isControlled) {
+      this.internalDisplayValue = rawValue;
+    }
+    const minorValue = this.parseDisplayToMinor(rawValue);
+    this.args.onInput?.(minorValue, event);
+  }
+  static {
+    n(this.prototype, "handleInput", [action]);
+  }
+  handleBlur(event) {
+    const input = event.target;
+    const minorValue = this.parseDisplayToMinor(input.value);
+    if (minorValue !== null) {
+      const clampedValue = this.clampValue(minorValue);
+      const formattedDisplay = this.formatMinorToDisplay(clampedValue);
+      if (!this.isControlled) {
+        this.internalDisplayValue = formattedDisplay;
+      }
+      // Set DOM value directly for immediate visual feedback of formatted value.
+      // In controlled mode, the parent should update @value in response to onChange,
+      // which will sync the displayValue getter on the next render.
+      input.value = formattedDisplay;
+      this.args.onChange?.(clampedValue, event);
+    } else {
+      if (!this.isControlled) {
+        this.internalDisplayValue = '';
+      }
+      input.value = '';
+      this.args.onChange?.(null, event);
+    }
+    this.args.onBlur?.(event);
+  }
+  static {
+    n(this.prototype, "handleBlur", [action]);
+  }
+  handleFocus(event) {
+    this.args.onFocus?.(event);
+  }
+  static {
+    n(this.prototype, "handleFocus", [action]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} data-currency={{@currency}} data-test-money-field ...attributes as |ctrl|>\n  <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n    {{@label}}\n  </ctrl.Label>\n\n  <ctrl.Input @prefix={{if this.showPrefix this.currencySymbol}} @suffix={{if this.showSuffix this.currencySymbol}} @inputMode=\"decimal\" @placeholder={{this.placeholder}} @name={{@name}} @value={{this.displayValue}} data-money-field {{on \"input\" this.handleInput}} {{on \"blur\" this.handleBlur}} {{on \"focus\" this.handleFocus}} />\n\n  {{#if @helpText}}\n    <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n  {{/if}}\n\n  {{#if @error}}\n    <ctrl.ErrorMessage @errors={{array @error}} />\n  {{/if}}\n</Control>", {
+      strictMode: true,
+      scope: () => ({
+        Control,
+        on,
+        array
+      })
+    }), this);
+  }
+}
+
+export { MoneyField as default };
+//# sourceMappingURL=money-field.js.map

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

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