<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 Icons are symbols that can be used to represent various options within an application.
 * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-icon--docs
 * @status stable
 * @since 1.0.0
 *
 * @event syn-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
 * @event syn-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
 *
 * @csspart svg - The internal SVG element.
 * @csspart use - The <use> element generated when using `spriteSheet: true`
 */
import { computed, ref } from 'vue';
import '@synergy-design-system/components/components/icon/icon.js';

import type { SynLoadEvent } from '@synergy-design-system/components';
import type { SynErrorEvent } from '@synergy-design-system/components';
import type SynIcon from '@synergy-design-system/components/components/icon/icon.component.js';

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

defineExpose({
  nativeElement,
});

// Map attributes
const props = defineProps<{
  /**
   * The name of the icon to draw.
   * Available names depend on the icon library being used.
   */
  name?: SynIcon['name'];

  /**
* An external URL of an SVG file.
* Be sure you trust the content you are including, as it will be executed as code and
can result in XSS attacks.
 */
  src?: SynIcon['src'];

  /**
* An alternate description to use for assistive devices.
* If omitted, the icon will be considered presentational and
ignored by assistive devices.
 */
  label?: SynIcon['label'];

  /**
   * The name of a registered custom icon library.
   */
  library?: SynIcon['library'];
}>();

// 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 icon has loaded.
   * When using `spriteSheet: true` this will not emit.
   */
  'syn-load': [e: SynLoadEvent];

  /**
   * Emitted when the icon fails to load due to an error.
   * When using `spriteSheet: true` this will not emit.
   */
  'syn-error': [e: SynErrorEvent];
}>();
</script>

<script lang="ts">
export type { SynLoadEvent } from '@synergy-design-system/components';
export type { SynErrorEvent } from '@synergy-design-system/components';
</script>

<template>
  <syn-icon
    @syn-load="$emit('syn-load', $event)"
    @syn-error="$emit('syn-error', $event)"
    v-bind="visibleProps"
    ref="nativeElement">
  </syn-icon>
</template>
