@synergy-design-system/mcp 2.14.1 → 3.0.0

package/metadata/packages/components/components/syn-tooltip/component.vue

@@ -1,150 +0,0 @@
-<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 Tooltips display additional information based on a specific action.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tooltip--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-popup
- *
- * @slot - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
- * @slot content - The content to render in the tooltip. Alternatively, you can use the `content` attribute.
- *
- * @event syn-show - Emitted when the tooltip begins to show.
- * @event syn-after-show - Emitted after the tooltip has shown and all animations are complete.
- * @event syn-hide - Emitted when the tooltip begins to hide.
- * @event syn-after-hide - Emitted after the tooltip has hidden and all animations are complete.
- *
- * @csspart base - The component's base wrapper, an `<syn-popup>` element.
- * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
- * @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
- * @csspart body - The tooltip's body where its content is rendered.
- *
- * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
- * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
- * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
- *
- * @animation tooltip.show - The animation to use when showing the tooltip.
- * @animation tooltip.hide - The animation to use when hiding the tooltip.
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/tooltip/tooltip.js';
-
-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 { SynTooltip } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynTooltip>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map attributes
-const props = defineProps<{
-  /**
-   * The tooltip's content.
-   * If you need to display HTML, use the `content` slot instead.
-   */
-  content?: SynTooltip['content'];
-
-  /**
-* The preferred placement of the tooltip.
-* Note that the actual placement may vary as needed to keep the tooltip
-inside of the viewport.
- */
-  placement?: SynTooltip['placement'];
-
-  /**
-   * Disables the tooltip so it won't show when triggered.
-   */
-  disabled?: SynTooltip['disabled'];
-
-  /**
-   * The distance in pixels from which to offset the tooltip away from its target.
-   */
-  distance?: SynTooltip['distance'];
-
-  /**
-   * Indicates whether or not the tooltip is open.
-   * You can use this in lieu of the show/hide methods.
-   */
-  open?: SynTooltip['open'];
-
-  /**
-   * The distance in pixels from which to offset the tooltip along its target.
-   */
-  skidding?: SynTooltip['skidding'];
-
-  /**
-* Controls how the tooltip is activated.
-* Possible options include `click`, `hover`, `focus`, and `manual`.
-* Multiple
-options can be passed by separating them with a space.
-* When manual is used, the tooltip must be activated
-programmatically.
- */
-  trigger?: SynTooltip['trigger'];
-}>();
-
-// 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 tooltip begins to show.
-   */
-  'syn-show': [e: SynShowEvent];
-
-  /**
-   * Emitted after the tooltip has shown and all animations are complete.
-   */
-  'syn-after-show': [e: SynAfterShowEvent];
-
-  /**
-   * Emitted when the tooltip begins to hide.
-   */
-  'syn-hide': [e: SynHideEvent];
-
-  /**
-   * Emitted after the tooltip has hidden and all animations are complete.
-   */
-  'syn-after-hide': [e: SynAfterHideEvent];
-}>();
-</script>
-
-<script lang="ts">
-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';
-</script>
-
-<template>
-  <syn-tooltip
-    @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)"
-    v-bind="visibleProps"
-    ref="nativeElement">
-    <slot></slot>
-  </syn-tooltip>
-</template>

package/metadata/packages/components/components/syn-validate/component.angular.ts

@@ -1,137 +0,0 @@
-// ---------------------------------------------------------------------
-// 🔒 AUTOGENERATED @synergy-design-system/angular wrappers for @synergy-design-system/components
-// Please do not edit this file directly!
-// It will get recreated when running pnpm build.
-// ---------------------------------------------------------------------
-import {
-  Component,
-  ElementRef,
-  NgZone,
-  Input,
-  Output,
-  EventEmitter,
-  AfterContentInit,
-} from '@angular/core';
-import type { SynValidate } from '@synergy-design-system/components';
-
-import '@synergy-design-system/components/components/validate/validate.js';
-
-/**
- * @summary Validate provides form field validation messages in a unified way.
- * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
- * and showing the validation message in a consistent, user defined way.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs
- * @dependency syn-alert
- * @dependency syn-tooltip
- *
- * @slot - The form field that should be validated.
- * Avoid slotting in more than one element, as subsequent ones will be ignored.
- *
- * @csspart base - The component's base wrapper.
- * @csspart input-wrapper - The container that wraps the form field.
- *
- * @csspart alert - The syn-alert that is shown when the variant is set to "inline".
- * @csspart alert__base - The container that wraps the alert.
- * @csspart alert__message - The container that wraps the alert message.
- * @csspart alert__icon - The container that wraps the alert icon.
- *
- * @csspart tooltip - The syn-tooltip that is shown when the variant is set to "tooltip".
- * @csspart tooltip__base - The container that wraps the tooltip.
- * @csspart tooltip__popup - The container that wraps the tooltip popup.
- * @csspart tooltip__arrow - The container that wraps the tooltip arrow.
- * @csspart tooltip__body - The container that wraps the tooltip body.
- */
-@Component({
-  selector: 'syn-validate',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynValidateComponent {
-  public nativeElement: SynValidate;
-  private _ngZone: NgZone;
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-  }
-
-  /**
-* The variant that should be used to show validation alerts.
-
-The following variants are supported:
-- **native** (default): Uses the native browser validation, usually a browser tooltip.
-- **tooltip**: Show the validation message as a tooltip using a `<syn-tooltip>`.
-- **inline**: Show the validation message underneath the element, using a `<syn-alert>`
- */
-  @Input()
-  set variant(v: SynValidate['variant']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.variant = v));
-  }
-  get variant(): SynValidate['variant'] {
-    return this.nativeElement.variant;
-  }
-
-  /**
-   * Do not show the error icon when using the inline variant validation
-   */
-  @Input()
-  set hideIcon(v: '' | SynValidate['hideIcon']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.hideIcon = v === '' || v),
-    );
-  }
-  get hideIcon(): SynValidate['hideIcon'] {
-    return this.nativeElement.hideIcon;
-  }
-
-  /**
-* Defines the events that trigger the validation.
-`invalid` will always automatically be included.
-You may also use the `live` keyword to validate on every input change.
-`live` will make sure to listen to the `invalid`, `input` and `blur` events.
-
-Please have a look at the [documentation for native form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
-and [the use of form invalid events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) for further information.
- */
-  @Input()
-  set on(v: SynValidate['on']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.on = v));
-  }
-  get on(): SynValidate['on'] {
-    return this.nativeElement.on;
-  }
-
-  /**
-* Custom validation message to be displayed when the input is invalid.
-Will override the default browser validation message.
-Set to an empty string to reset the validation message.
- */
-  @Input()
-  set customValidationMessage(v: SynValidate['customValidationMessage']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.customValidationMessage = v),
-    );
-  }
-  get customValidationMessage(): SynValidate['customValidationMessage'] {
-    return this.nativeElement.customValidationMessage;
-  }
-
-  /**
-* Set this to true to validate the input immediately when it is rendered.
-Best used with a `variant` of `inline`.
-When setting eager, the input will not be focused automatically.
-
-When using a `variant` of `native` the browser will focus
-the last eager field as it is using a tooltip.
-In this case it is better to just provide one eager field.
- */
-  @Input()
-  set eager(v: '' | SynValidate['eager']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.eager = v === '' || v),
-    );
-  }
-  get eager(): SynValidate['eager'] {
-    return this.nativeElement.eager;
-  }
-}

package/metadata/packages/components/components/syn-validate/component.react.ts

@@ -1,44 +0,0 @@
-// ---------------------------------------------------------------------
-// 🔒 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components
-// Please do not edit this file directly!
-// It will get recreated when running pnpm build.
-// ---------------------------------------------------------------------
-import * as React from 'react';
-import { createComponent } from '@lit/react';
-import Component from '@synergy-design-system/components/components/validate/validate.component.js';
-
-const tagName = 'syn-validate';
-Component.define('syn-validate');
-
-/**
- * @summary Validate provides form field validation messages in a unified way.
- * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
- * and showing the validation message in a consistent, user defined way.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs
- * @dependency syn-alert
- * @dependency syn-tooltip
- *
- * @slot - The form field that should be validated.
- * Avoid slotting in more than one element, as subsequent ones will be ignored.
- *
- * @csspart base - The component's base wrapper.
- * @csspart input-wrapper - The container that wraps the form field.
- *
- * @csspart alert - The syn-alert that is shown when the variant is set to "inline".
- * @csspart alert__base - The container that wraps the alert.
- * @csspart alert__message - The container that wraps the alert message.
- * @csspart alert__icon - The container that wraps the alert icon.
- *
- * @csspart tooltip - The syn-tooltip that is shown when the variant is set to "tooltip".
- * @csspart tooltip__base - The container that wraps the tooltip.
- * @csspart tooltip__popup - The container that wraps the tooltip popup.
- * @csspart tooltip__arrow - The container that wraps the tooltip arrow.
- * @csspart tooltip__body - The container that wraps the tooltip body.
- */
-export const SynValidate = createComponent({
-  displayName: 'SynValidate',
-  elementClass: Component,
-  events: {},
-  react: React,
-  tagName,
-});

package/metadata/packages/components/components/syn-validate/component.styles.ts

@@ -1,9 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  .validate {
-    display: flex;
-    flex-direction: column;
-    gap: var(--syn-spacing-small);
-  }
-`;