@visitwonders/assembly 0.10.1 → 0.11.0

package/dist/form/multi-combobox-field.js

@@ -0,0 +1,36 @@
+import Component from '@glimmer/component';
+import Control from './control.js';
+import MultiComboBox from './multi-combobox.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+class MultiComboBoxField extends Component {
+  get isInvalid() {
+    return !!this.args.error;
+  }
+  get isLabelHidden() {
+    return this.args.labelVisibility === 'hidden';
+  }
+  getAriaDescribedBy = controlId => {
+    const parts = [];
+    if (this.args.helpText) {
+      parts.push(`${controlId}-help-text`);
+    }
+    if (this.args.error) {
+      parts.push(`${controlId}-error-message`);
+    }
+    return parts.length > 0 ? parts.join(' ') : undefined;
+  };
+  static {
+    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @labelInfo={{@labelInfo}} ...attributes as |ctrl|>\n  {{#if (has-block \"info\")}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      <:default>{{@label}}</:default>\n      <:info>{{yield to=\"info\"}}</:info>\n    </ctrl.Label>\n  {{else}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      {{@label}}\n    </ctrl.Label>\n  {{/if}}\n\n  <MultiComboBox @id={{ctrl.id}} @name={{@name}} @items={{@items}} @values={{@values}} @placeholder={{@placeholder}} @noResultsText={{@noResultsText}} @onSearch={{@onSearch}} @searchDebounceMs={{@searchDebounceMs}} @isLoading={{@isLoading}} @onSearchError={{@onSearchError}} @loadingText={{@loadingText}} @isCreatable={{@isCreatable}} @onCreate={{@onCreate}} @createLabel={{@createLabel}} @maxVisibleChips={{@maxVisibleChips}} @isDisabled={{@isDisabled}} @isInvalid={{this.isInvalid}} @isRequired={{@isRequired}} @isClearable={{@isClearable}} @aria-describedby={{this.getAriaDescribedBy ctrl.id}} @onChange={{@onChange}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} @onOpen={{@onOpen}} @onClose={{@onClose}} data-test-multi-combobox-field />\n\n  {{#if @helpText}}\n    <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n  {{/if}}\n\n  {{#if @error}}\n    <ctrl.ErrorMessage>{{@error}}</ctrl.ErrorMessage>\n  {{/if}}\n</Control>", {
+      strictMode: true,
+      scope: () => ({
+        Control,
+        MultiComboBox
+      })
+    }), this);
+  }
+}
+
+export { MultiComboBoxField as default };
+//# sourceMappingURL=multi-combobox-field.js.map

package/dist/form/multi-combobox-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-combobox-field.js","sources":["../../src/form/multi-combobox-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport Control from './control.gts';\nimport MultiComboBox from './multi-combobox.gts';\nimport type { ComboBoxItems, ComboBoxOption } from './combobox-shared.ts';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface MultiComboBoxFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required). */\n    label: string;\n\n    /** Available options. Flat or pre-grouped. */\n    items: ComboBoxItems;\n\n    /** Current selected values (controlled). */\n    values?: string[];\n\n    /** Fires when the selection changes. */\n    onChange?: (values: string[], options: ComboBoxOption[]) => void;\n\n    /** Async search. */\n    onSearch?: (query: string) => Promise<ComboBoxItems>;\n\n    /** Debounce for `onSearch` in ms. */\n    searchDebounceMs?: number;\n\n    /** Force the loading state. */\n    isLoading?: boolean;\n\n    /** Called when an `onSearch` promise rejects. */\n    onSearchError?: (error: unknown) => void;\n\n    /** Loading row text. */\n    loadingText?: string;\n\n    /** Input placeholder when no values selected. */\n    placeholder?: string;\n\n    /** Empty state text. */\n    noResultsText?: string;\n\n    /** Allow creating new options from a non-matching query. */\n    isCreatable?: boolean;\n\n    /** Fires when the user activates the create row. */\n    onCreate?: (query: string) => void;\n\n    /** Build the create-row label. */\n    createLabel?: (query: string) => string;\n\n    /** Chips shown before collapsing to \"+N more\". */\n    maxVisibleChips?: number;\n\n    /** Help text displayed below the control. */\n    helpText?: string;\n\n    /** Error message (also sets invalid state). */\n    error?: string;\n\n    /** Field is required. */\n    isRequired?: boolean;\n\n    /** Field is disabled. */\n    isDisabled?: boolean;\n\n    /** Show the clear-all button when values are set. */\n    isClearable?: boolean;\n\n    /** Info tooltip text shown next to the label. */\n    labelInfo?: string;\n\n    /** Label visibility. */\n    labelVisibility?: LabelVisibility;\n\n    /** Input name — one hidden input is rendered per selected value. */\n    name?: string;\n\n    /** Blur event handler. */\n    onBlur?: (event: FocusEvent) => void;\n\n    /** Focus event handler. */\n    onFocus?: (event: FocusEvent) => void;\n\n    /** Fires when the dropdown opens. */\n    onOpen?: () => void;\n\n    /** Fires when the dropdown closes. */\n    onClose?: () => void;\n  };\n  Blocks: {\n    /** Rich tooltip content shown next to the label. */\n    info: [];\n  };\n}\n\nexport default class MultiComboBoxField extends Component<MultiComboBoxFieldSignature> {\n  get isInvalid(): boolean {\n    return !!this.args.error;\n  }\n\n  get isLabelHidden(): boolean {\n    return this.args.labelVisibility === 'hidden';\n  }\n\n  getAriaDescribedBy = (controlId: string): string | undefined => {\n    const parts: string[] = [];\n    if (this.args.helpText) {\n      parts.push(`${controlId}-help-text`);\n    }\n    if (this.args.error) {\n      parts.push(`${controlId}-error-message`);\n    }\n    return parts.length > 0 ? parts.join(' ') : undefined;\n  };\n\n  <template>\n    <Control\n      @isInvalid={{this.isInvalid}}\n      @isDisabled={{@isDisabled}}\n      @isRequired={{@isRequired}}\n      @labelInfo={{@labelInfo}}\n      ...attributes\n      as |ctrl|\n    >\n      {{#if (has-block \"info\")}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          <:default>{{@label}}</:default>\n          <:info>{{yield to=\"info\"}}</:info>\n        </ctrl.Label>\n      {{else}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          {{@label}}\n        </ctrl.Label>\n      {{/if}}\n\n      <MultiComboBox\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @items={{@items}}\n        @values={{@values}}\n        @placeholder={{@placeholder}}\n        @noResultsText={{@noResultsText}}\n        @onSearch={{@onSearch}}\n        @searchDebounceMs={{@searchDebounceMs}}\n        @isLoading={{@isLoading}}\n        @onSearchError={{@onSearchError}}\n        @loadingText={{@loadingText}}\n        @isCreatable={{@isCreatable}}\n        @onCreate={{@onCreate}}\n        @createLabel={{@createLabel}}\n        @maxVisibleChips={{@maxVisibleChips}}\n        @isDisabled={{@isDisabled}}\n        @isInvalid={{this.isInvalid}}\n        @isRequired={{@isRequired}}\n        @isClearable={{@isClearable}}\n        @aria-describedby={{this.getAriaDescribedBy ctrl.id}}\n        @onChange={{@onChange}}\n        @onBlur={{@onBlur}}\n        @onFocus={{@onFocus}}\n        @onOpen={{@onOpen}}\n        @onClose={{@onClose}}\n        data-test-multi-combobox-field\n      />\n\n      {{#if @helpText}}\n        <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n      {{/if}}\n\n      {{#if @error}}\n        <ctrl.ErrorMessage>{{@error}}</ctrl.ErrorMessage>\n      {{/if}}\n    </Control>\n  </template>\n}\n"],"names":["MultiComboBoxField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","MultiComboBox"],"mappings":";;;;;;AAkGe,MAAMA,2BAA2BC,SAAA,CAAU;EACxD,IAAIC,SAAAA,GAAqB;AACvB,IAAA,OAAO,CAAC,CAAC,IAAI,CAACC,IAAI,CAACC,KAAK;AAC1B,EAAA;EAEA,IAAIC,aAAAA,GAAyB;AAC3B,IAAA,OAAO,IAAI,CAACF,IAAI,CAACG,eAAe,KAAK,QAAA;AACvC,EAAA;EAEAC,kBAAA,GAAsBC,SAAiB,IAAqB;IAC1D,MAAMC,KAAa,GAAK,EAAE;AAC1B,IAAA,IAAI,IAAI,CAACN,IAAI,CAACO,QAAQ,EAAE;AACtBD,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,YAAqB,CAAA;AACrC,IAAA;AACA,IAAA,IAAI,IAAI,CAACL,IAAI,CAACC,KAAK,EAAE;AACnBK,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,gBAAyB,CAAA;AACzC,IAAA;AACA,IAAA,OAAOC,MAAMG,MAAM,GAAG,IAAIH,KAAA,CAAMI,IAAI,CAAC,GAAA,CAAA,GAAOC,SAAA;EAC9C,CAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,u2CAAA,EAyDA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}

package/dist/form/multi-combobox.css

@@ -0,0 +1,422 @@
+/* src/form/multi-combobox.css */
+/* ===================================
+ * MultiComboBox Component
+ * Multi-select with chips + typeahead
+ * =================================== */
+
+.multi-combobox_e1a041f66 {
+  display: inline-flex;
+  width: 100%;
+}
+
+/* Visually-hidden aria-live region for screen-reader announcements. */
+.multi-combobox-sr-only_e1a041f66 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ===================================
+ * Trigger wrapper — input-like surface that also holds the chips.
+ * Fixed height so adding chips doesn't resize the trigger (which
+ * would in turn make floating-ui reposition the popover — visible
+ * as a "jumping" dropdown on every pick).
+ * =================================== */
+
+.multi-combobox_e1a041f66 .multi-combobox-trigger_e1a041f66 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--input-height-md);
+  border: var(--border-width-1) solid var(--color-border-control);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg);
+  padding: 0 var(--spacing-1);
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+.multi-combobox_e1a041f66 .multi-combobox-trigger_e1a041f66:hover:not([data-disabled="true"]) {
+  border-color: var(--color-border-control-hover);
+}
+
+.multi-combobox_e1a041f66 .multi-combobox-trigger_e1a041f66:focus-within {
+  border-color: var(--color-border-focus);
+  box-shadow: var(--focus-ring);
+}
+
+/* ===================================
+ * Chips row — wraps chips inline with the input.
+ * =================================== */
+
+.multi-combobox-chips_e1a041f66 {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 4px;
+  padding: 0 var(--spacing-1);
+  overflow: hidden;
+}
+
+/* ===================================
+ * Chip
+ * =================================== */
+
+.multi-combobox-chip_e1a041f66 {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 180px;
+  padding: 2px 4px 2px var(--spacing-2);
+  background-color: var(--color-bg-neutral-subtle);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-13);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+}
+
+.multi-combobox-chip-label_e1a041f66 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.multi-combobox-chip-remove_e1a041f66 {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: color var(--transition-fast);
+}
+
+.multi-combobox-chip-remove_e1a041f66:hover {
+  color: var(--color-text-critical);
+}
+
+.multi-combobox-more_e1a041f66 {
+  font-size: var(--font-size-13);
+  color: var(--color-text-tertiary);
+  padding: 0 var(--spacing-1);
+  white-space: nowrap;
+}
+
+/* ===================================
+ * Input
+ * =================================== */
+
+.multi-combobox-input_e1a041f66 {
+  flex: 1;
+  min-width: 80px;
+  height: var(--spacing-7);
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--font-size-md);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+  text-overflow: ellipsis;
+}
+
+.multi-combobox-input_e1a041f66,
+.multi-combobox-input_e1a041f66:focus,
+.multi-combobox-input_e1a041f66:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.multi-combobox-input_e1a041f66::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.multi-combobox-input_e1a041f66:disabled {
+  cursor: not-allowed;
+}
+
+/* ===================================
+ * Clear + Chevron
+ * =================================== */
+
+.multi-combobox-clear_e1a041f66,
+.multi-combobox-chevron_e1a041f66 {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0 2px;
+  border: none;
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: color var(--transition-fast);
+  align-self: center;
+}
+
+.multi-combobox-clear_e1a041f66:hover,
+.multi-combobox-chevron_e1a041f66:hover:not(:disabled) {
+  color: var(--color-text);
+}
+
+.multi-combobox-chevron_e1a041f66 {
+  margin-right: var(--spacing-1);
+  transition:
+    transform var(--transition-fast),
+    color var(--transition-fast);
+}
+
+.multi-combobox_e1a041f66[data-open="true"] .multi-combobox-chevron_e1a041f66 {
+  transform: rotate(180deg);
+}
+
+.multi-combobox-chevron_e1a041f66:disabled {
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+
+/* ===================================
+ * Invalid state
+ * =================================== */
+
+.multi-combobox_e1a041f66[data-invalid="true"] .multi-combobox-trigger_e1a041f66 {
+  border-color: var(--color-border-critical);
+}
+
+.multi-combobox_e1a041f66[data-invalid="true"] .multi-combobox-trigger_e1a041f66:focus-within {
+  border-color: var(--color-border-critical);
+  box-shadow: var(--focus-ring-critical);
+}
+
+/* ===================================
+ * Disabled state
+ * =================================== */
+
+.multi-combobox_e1a041f66[data-disabled="true"] .multi-combobox-trigger_e1a041f66 {
+  background-color: var(--color-bg-disabled);
+  border-color: var(--color-border-control-disabled);
+  cursor: not-allowed;
+}
+
+.multi-combobox_e1a041f66[data-disabled="true"] .multi-combobox-input_e1a041f66 {
+  color: var(--color-text-disabled);
+}
+
+/* ===================================
+ * Popover content
+ * =================================== */
+
+.multi-combobox-popover-content_e1a041f66 {
+  min-width: 240px;
+  max-height: min(320px, 40vh);
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  overflow: hidden;
+  /* Anchor the open-scale animation to the top-left edge (where the
+   * popover meets the trigger with @side="bottom" @align="start"),
+   * so it appears to emerge from the trigger rather than inflate from
+   * its own centre. */
+  transform-origin: top left;
+}
+
+.multi-combobox-listbox_e1a041f66 {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--spacing-2) var(--spacing-1);
+  /* Keep the active row comfortably away from the scroll edges when
+   * keyboard nav brings it into view (scrollIntoView({ block: 'nearest' })). */
+  scroll-padding-block: var(--spacing-2);
+}
+
+/* ===================================
+ * Empty / Loading state
+ * =================================== */
+
+.multi-combobox-empty_e1a041f66,
+.multi-combobox-loading_e1a041f66 {
+  padding: var(--spacing-3);
+  text-align: center;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-13);
+}
+
+/* ===================================
+ * Groups
+ * =================================== */
+
+.multi-combobox-group_e1a041f66:not(:first-child) {
+  border-top: 1px solid var(--color-border-subtle);
+  margin-top: var(--spacing-1);
+  padding-top: var(--spacing-1);
+}
+
+.multi-combobox-group-heading_e1a041f66 {
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-1);
+  font-size: var(--font-size-11);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* ===================================
+ * Create row
+ * =================================== */
+
+.multi-combobox-create_e1a041f66 {
+  border-top: 1px solid var(--color-border-subtle);
+  margin-top: var(--spacing-1);
+  padding-top: var(--spacing-2);
+  color: var(--color-text-accent);
+  font-weight: var(--font-weight-medium);
+}
+
+.multi-combobox-create-icon_e1a041f66 {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  font-size: var(--font-size-md);
+  line-height: 1;
+}
+
+/* ===================================
+ * Options
+ * =================================== */
+
+.multi-combobox-option_e1a041f66 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-13);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--transition-fast);
+}
+
+/* When a description is present, the content block becomes two-line;
+ * switch alignment so the checkbox aligns with the first line (label),
+ * not the visual centre between the two lines. */
+.multi-combobox-option_e1a041f66:has(.multi-combobox-option-description_e1a041f66) {
+  align-items: flex-start;
+}
+
+.multi-combobox-option_e1a041f66:hover:not([data-disabled="true"]) {
+  background-color: var(--color-bg-neutral-subtle);
+}
+
+.multi-combobox-option_e1a041f66[data-active="true"]:not([data-disabled="true"]) {
+  background-color: var(--color-bg-neutral-subtle);
+}
+
+.multi-combobox-option_e1a041f66[data-disabled="true"] {
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+
+.multi-combobox-option-content_e1a041f66 {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.multi-combobox-option-label_e1a041f66 {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.multi-combobox-option-description_e1a041f66 {
+  display: block;
+  font-size: var(--font-size-11);
+  font-weight: var(--font-weight-regular);
+  color: var(--color-text-tertiary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ===================================
+ * Match highlight
+ * =================================== */
+
+.multi-combobox-mark_e1a041f66 {
+  background: transparent;
+  color: inherit;
+  font-weight: var(--font-weight-bold);
+  padding: 0;
+}
+
+/* ===================================
+ * Checkbox indicator (trailing, Stripe-style)
+ * =================================== */
+
+.multi-combobox-checkbox_e1a041f66 {
+  flex-shrink: 0;
+  position: relative;
+  width: 16px;
+  height: 16px;
+  border: var(--border-width-1) solid var(--color-border-control);
+  border-radius: var(--radius-sm);
+  background-color: var(--color-bg-surface);
+  transition:
+    background-color var(--transition-fast),
+    border-color var(--transition-fast);
+}
+
+/* Align with the first line of content when a description pushes the
+ * option to two lines. Without this it would center between lines. */
+.multi-combobox-option_e1a041f66:has(.multi-combobox-option-description_e1a041f66)
+  .multi-combobox-checkbox_e1a041f66 {
+  margin-top: 2px;
+}
+
+.multi-combobox-checkbox_e1a041f66[data-checked="true"] {
+  background-color: var(--color-bg-fill-accent);
+  border-color: var(--color-bg-fill-accent);
+}
+
+.multi-combobox-checkbox_e1a041f66[data-checked="true"]::before {
+  content: "";
+  position: absolute;
+  left: 5px;
+  top: 1px;
+  width: 4px;
+  height: 9px;
+  border: solid var(--color-text-on-accent);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}