<script setup lang="ts">
// ---------------------------------------------------------------------
// 🔒 AUTOGENERATED @synergy-design-system/vue wrappers for @synergy-design-system/components
// Please do not edit this file directly!
// It will get recreated when running pnpm build.
// ---------------------------------------------------------------------

/**
 * @summary A combobox component that combines the functionality of a text input with a dropdown listbox,
 * allowing users to either select from predefined options or enter custom values (when not restricted).
 *
 * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs
 * @status stable
 * @since 2.8.0
 *
 * @dependency syn-icon
 * @dependency syn-popup
 * @dependency syn-tag
 *
 * @slot - The listbox options. Must be `<syn-option>` elements.
 *    You can use `<syn-optgroup>`'s to group items visually.
 * @slot label - The combobox's label. Alternatively, you can use the `label` attribute.
 * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
 * @slot suffix - Used to append a presentational icon or similar element to the combobox.
 * @slot clear-icon - An icon to use in lieu of the default clear icon.
 * @slot expand-icon - The icon to show when the control is expanded and collapsed.
 *    Rotates on open and close.
 * @slot help-text - Text that describes how to use the combobox.
 *    Alternatively, you can use the `help-text` attribute.
 *
 * @event syn-change - Emitted when the control's value changes.
 * @event syn-clear - Emitted when the control's value is cleared.
 * @event syn-input - Emitted when the control receives input.
 * @event syn-focus - Emitted when the control gains focus.
 * @event syn-blur - Emitted when the control loses focus.
 * @event syn-show - Emitted when the combobox's menu opens.
 * @event syn-after-show - Emitted after the combobox's menu opens and all animations are complete.
 * @event syn-hide - Emitted when the combobox's menu closes.
 * @event syn-after-hide - Emitted after the combobox's menu closes and all animations are complete.
 * @event syn-invalid - Emitted when the form control has been checked for validity
 *    and its constraints aren't satisfied.
 * @event syn-error - Emitted when the combobox menu fails to open.
 *
 * @csspart form-control - The form control that wraps the label, combobox, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The combobox's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 * @csspart combobox - The container that wraps the prefix, combobox, clear icon, and expand button.
 * @csspart prefix - The container that wraps the prefix slot.
 * @csspart suffix - The container that wraps the suffix slot.
 * @csspart display-input - The element that displays the selected option's label,
 *     an `<input>` element.
 * @csspart listbox - The listbox container where the options are slotted
 *   and the filtered options list exists.
 * @csspart filtered-listbox - The container that wraps the filtered options.
 * @csspart clear-button - The clear button.
 * @csspart expand-icon - The container that wraps the expand icon.
 * @csspart popup - The popup's exported `popup` part.
 * Use this to target the tooltip's popup container.
 * @csspart no-results - The container that wraps the "no results" message.
 * @csspart tags - The container that houses option tags when `multiple` is used.
 * @csspart tag - The individual tags that represent each selected option in `multiple`.
 * @csspart tag__base - The tag's base part.
 * @csspart tag__content - The tag's content part.
 * @csspart tag__remove-button - The tag's remove button.
 * @csspart tag__remove-button__base - The tag's remove button base part.
 *
 * @animation combobox.show - The animation to use when showing the combobox.
 * @animation combobox.hide - The animation to use when hiding the combobox.
 */
import { computed, ref } from 'vue';
import '@synergy-design-system/components/components/combobox/combobox.js';

import type { SynChangeEvent } from '@synergy-design-system/components';
import type { SynClearEvent } from '@synergy-design-system/components';
import type { SynInputEvent } from '@synergy-design-system/components';
import type { SynFocusEvent } from '@synergy-design-system/components';
import type { SynBlurEvent } from '@synergy-design-system/components';
import type { SynShowEvent } from '@synergy-design-system/components';
import type { SynAfterShowEvent } from '@synergy-design-system/components';
import type { SynHideEvent } from '@synergy-design-system/components';
import type { SynAfterHideEvent } from '@synergy-design-system/components';
import type { SynInvalidEvent } from '@synergy-design-system/components';
import type { SynErrorEvent } from '@synergy-design-system/components';
import type SynCombobox from '@synergy-design-system/components/components/combobox/combobox.component.js';

// DOM Reference to the element
const nativeElement = ref<SynCombobox>();

defineExpose({
  nativeElement,
});

// Map attributes
const props = defineProps<{
  /**
   * The name of the combobox, submitted as a name/value pair with form data.
   */
  name?: SynCombobox['name'];

  /**
   * The combobox's size.
   */
  size?: SynCombobox['size'];

  /**
   * Placeholder text to show as a hint when the combobox is empty.
   */
  placeholder?: SynCombobox['placeholder'];

  /**
   * Disables the combobox control.
   */
  disabled?: SynCombobox['disabled'];

  /**
   * Sets the combobox to a readonly state.
   */
  readonly?: SynCombobox['readonly'];

  /**
   * Adds a clear button when the combobox is not empty.
   */
  clearable?: SynCombobox['clearable'];

  /**
* Indicates whether or not the combobox is open.
You can toggle this attribute to show and hide the listbox, or you can use the `show()`
and `hide()` methods and this attribute will reflect the combobox's open state.
 */
  open?: SynCombobox['open'];

  /**
   * The combobox's label.
   * If you need to display HTML, use the `label` slot instead.
   */
  label?: SynCombobox['label'];

  /**
   * The maximum length of input that will be considered valid.
   */
  maxlength?: SynCombobox['maxlength'];

  /**
* The preferred placement of the combobox's menu.
Note that the actual placement may vary as needed to keep the listbox inside of the viewport.
 */
  placement?: SynCombobox['placement'];

  /**
   * The combobox's help text.
   * If you need to display HTML, use the `help-text` slot instead.
   */
  helpText?: SynCombobox['helpText'];

  /**
* By default, form controls are associated with the nearest containing `<form>` element.
This attribute allows you to place the form control outside of a form and associate it
with the form that has this `id`.
The form must be in the same document or shadow root for this to work.
 */
  form?: SynCombobox['form'];

  /**
   * The combobox's required attribute.
   */
  required?: SynCombobox['required'];

  /**
* When set to `true`, restricts the combobox to only allow selection from the available options.
Users will not be able to enter custom values that are not present in the list.
This will always be true, if `multiple` is active.
 */
  restricted?: SynCombobox['restricted'];

  /**
* Allows more than one option to be selected.
If `multiple` is set, the combobox will always be `restricted` to the available options
 */
  multiple?: SynCombobox['multiple'];

  /**
* A function that customizes the rendered option.
* The first argument is the option, the second
is the query string, which is typed into the combobox.
The function should return either a Lit TemplateResult or a string containing trusted HTML
to render in the shown list of filtered options.
If the query string should be highlighted use the `highlightOptionRenderer` function.
 */
  getOption?: SynCombobox['getOption'];

  /**
* A function used to filter options in the combobox component.
The default filter method is a case- and diacritic-insensitive string comparison.
 */
  filter?: SynCombobox['filter'];

  /**
* The delimiter to use when setting the value when `multiple` is enabled.
The default is a space ' ', but you can set it to a comma or other character(s).
 */
  delimiter?: SynCombobox['delimiter'];

  /**
* The maximum number of selected options to show when `multiple` is true.
* After the maximum, "+n" will be shown to
indicate the number of additional items that are selected.
* Set to 0 to remove the limit.
 */
  maxOptionsVisible?: SynCombobox['maxOptionsVisible'];

  /**
* A function that customizes the tags to be rendered when `multiple` is true.
* The first argument is the option, the second
is the current tag's index.
* The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at
the specified value.
 */
  getTag?: SynCombobox['getTag'];

  /**
* The current value of the combobox, submitted as a name/value pair with form data.
* When `multiple` is enabled, the
value attribute will be a list of values  separated by the delimiter, based on the options selected, and the value property will
be an array.
* **For this reason, values must not contain the delimiter character.**
 */
  value?: SynCombobox['value'];

  /**
   * Support for two way data binding
   */
  modelValue?: SynCombobox['value'];
}>();

// Make sure prop binding only forwards the props that are actually there.
// This is needed because :param="param" also adds an empty attribute
// when using web-components, which breaks optional arguments like size in SynInput
// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
const visibleProps = computed(() =>
  Object.fromEntries(
    Object.entries(props).filter(([, value]) => typeof value !== 'undefined'),
  ),
);

// Map events
defineEmits<{
  /**
   * Emitted when the control's value changes.
   */
  'syn-change': [e: SynChangeEvent];

  /**
   * Emitted when the control's value is cleared.
   */
  'syn-clear': [e: SynClearEvent];

  /**
   * Emitted when the control receives input.
   */
  'syn-input': [e: SynInputEvent];

  /**
   * Emitted when the control gains focus.
   */
  'syn-focus': [e: SynFocusEvent];

  /**
   * Emitted when the control loses focus.
   */
  'syn-blur': [e: SynBlurEvent];

  /**
   * Emitted when the combobox's menu opens.
   */
  'syn-show': [e: SynShowEvent];

  /**
   * Emitted after the combobox's menu opens and all animations are complete.
   */
  'syn-after-show': [e: SynAfterShowEvent];

  /**
   * Emitted when the combobox's menu closes.
   */
  'syn-hide': [e: SynHideEvent];

  /**
   * Emitted after the combobox's menu closes and all animations are complete.
   */
  'syn-after-hide': [e: SynAfterHideEvent];

  /**
   * Emitted when the form control has been checked for validity and its constraints aren't satisfied.
   */
  'syn-invalid': [e: SynInvalidEvent];

  /**
   * Emitted when the combobox menu fails to open.
   */
  'syn-error': [e: SynErrorEvent];

  /**
   * Support for two way data binding
   */
  'update:modelValue': [newValue: SynCombobox['value']];
}>();
</script>

<script lang="ts">
export type { SynChangeEvent } from '@synergy-design-system/components';
export type { SynClearEvent } from '@synergy-design-system/components';
export type { SynInputEvent } from '@synergy-design-system/components';
export type { SynFocusEvent } from '@synergy-design-system/components';
export type { SynBlurEvent } from '@synergy-design-system/components';
export type { SynShowEvent } from '@synergy-design-system/components';
export type { SynAfterShowEvent } from '@synergy-design-system/components';
export type { SynHideEvent } from '@synergy-design-system/components';
export type { SynAfterHideEvent } from '@synergy-design-system/components';
export type { SynInvalidEvent } from '@synergy-design-system/components';
export type { SynErrorEvent } from '@synergy-design-system/components';
</script>

<template>
  <syn-combobox
    @syn-change="$emit('syn-change', $event)"
    @syn-clear="$emit('syn-clear', $event)"
    @syn-input="
      $emit('update:modelValue', ($event.target as SynCombobox).value);
      $emit('syn-input', $event);
    "
    @syn-focus="$emit('syn-focus', $event)"
    @syn-blur="$emit('syn-blur', $event)"
    @syn-show="$emit('syn-show', $event)"
    @syn-after-show="$emit('syn-after-show', $event)"
    @syn-hide="$emit('syn-hide', $event)"
    @syn-after-hide="$emit('syn-after-hide', $event)"
    @syn-invalid="$emit('syn-invalid', $event)"
    @syn-error="$emit('syn-error', $event)"
    :value="
      typeof props.modelValue !== 'undefined'
        ? props.modelValue
        : typeof props.value !== 'undefined'
          ? props.value
          : undefined
    "
    v-bind="visibleProps"
    ref="nativeElement">
    <slot></slot>
  </syn-combobox>
</template>
