@synergy-design-system/components 2.6.0 → 2.7.0

package/dist/chunks/chunk.NCXSLHHQ.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/radio-group/radio-group.component.ts"],
-  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport {\n  customErrorValidityState,\n  FormControlController,\n  validValidityState,\n  valueMissingValidityState\n} from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\nimport formControlCustomStyles from '../../styles/form-control.custom.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynButtonGroup from '../button-group/button-group.component.js';\nimport styles from './radio-group.styles.js';\nimport customStyles from './radio-group.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport type SynRadio from '../radio/radio.js';\nimport type SynRadioButton from '../radio-button/radio-button.js';\n\n/**\n * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n * @documentation https://synergy.style/components/radio-group\n * @status stable\n * @since 2.0\n *\n * @dependency syn-button-group\n *\n * @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.\n * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`\n *  attribute.\n * @slot help-text - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-change - Emitted when the radio group's selected value changes.\n * @event syn-input - Emitted when the radio group receives user input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart button-group - The button group that wraps radio buttons.\n * @csspart button-group__base - The button group's `base` part.\n */\nexport default class SynRadioGroup extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n  static dependencies = { 'syn-button-group': SynButtonGroup };\n\n  protected readonly formControlController = new FormControlController(this);\n  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n  private customValidityMessage = '';\n  private validationTimeout: number;\n\n  @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n  @query('.radio-group__validation-input') validationInput: HTMLInputElement;\n\n  @state() private hasButtonGroup = false;\n  @state() private errorMessage = '';\n  @state() defaultValue = '';\n\n  /**\n   * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\n   * instead.\n   */\n  @property() label = '';\n\n  /** The radio groups's help text. If you need to display HTML, use the `help-text` slot instead. */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /** The name of the radio group, submitted as a name/value pair with form data. */\n  @property() name = 'option';\n\n  /** The current value of the radio group, submitted as a name/value pair with form data. */\n  @property({ reflect: true }) value = '';\n\n  /** The radio group's size. This size will be applied to all child radios and radio buttons. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n   * the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n\n  /** Ensures a child radio is checked before allowing the containing form to submit. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Gets the validity state object */\n  get validity() {\n    const isRequiredAndEmpty = this.required && !this.value;\n    const hasCustomValidityMessage = this.customValidityMessage !== '';\n\n    if (hasCustomValidityMessage) {\n      return customErrorValidityState;\n    } else if (isRequiredAndEmpty) {\n      return valueMissingValidityState;\n    }\n\n    return validValidityState;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    const isRequiredAndEmpty = this.required && !this.value;\n    const hasCustomValidityMessage = this.customValidityMessage !== '';\n\n    if (hasCustomValidityMessage) {\n      return this.customValidityMessage;\n    } else if (isRequiredAndEmpty) {\n      return this.validationInput.validationMessage;\n    }\n\n    return '';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.defaultValue = this.value;\n  }\n\n  firstUpdated() {\n    this.formControlController.updateValidity();\n  }\n\n  private getAllRadios() {\n    return [...this.querySelectorAll<SynRadio | SynRadioButton>('syn-radio, syn-radio-button')];\n  }\n\n  private handleRadioClick(event: MouseEvent) {\n    const target = (event.target as HTMLElement).closest<SynRadio | SynRadioButton>('syn-radio, syn-radio-button')!;\n    const radios = this.getAllRadios();\n    const oldValue = this.value;\n\n    if (target.disabled) {\n      return;\n    }\n\n    this.value = target.value;\n    radios.forEach(radio => (radio.checked = radio === target));\n\n    if (this.value !== oldValue) {\n      this.emit('syn-change');\n      this.emit('syn-input');\n    }\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key)) {\n      return;\n    }\n\n    const radios = this.getAllRadios().filter(radio => !radio.disabled);\n    const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n    const incr = event.key === ' ' ? 0 : ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;\n    const oldValue = this.value;\n    let index = radios.indexOf(checkedRadio) + incr;\n\n    if (index < 0) {\n      index = radios.length - 1;\n    }\n\n    if (index > radios.length - 1) {\n      index = 0;\n    }\n\n    this.getAllRadios().forEach(radio => {\n      radio.checked = false;\n\n      if (!this.hasButtonGroup) {\n        radio.tabIndex = -1;\n      }\n    });\n\n    this.value = radios[index].value;\n    radios[index].checked = true;\n\n    if (!this.hasButtonGroup) {\n      radios[index].tabIndex = 0;\n      radios[index].focus();\n    } else {\n      radios[index].shadowRoot!.querySelector('button')!.focus();\n    }\n\n    if (this.value !== oldValue) {\n      this.emit('syn-change');\n      this.emit('syn-input');\n    }\n\n    event.preventDefault();\n  }\n\n  private handleLabelClick() {\n    const radios = this.getAllRadios();\n    const checked = radios.find(radio => radio.checked);\n    const radioToFocus = checked || radios[0];\n\n    // Move focus to the checked radio (or the first one if none are checked) when clicking the label\n    if (radioToFocus) {\n      radioToFocus.focus();\n    }\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  private async syncRadioElements() {\n    const radios = this.getAllRadios();\n\n    await Promise.all(\n      // Sync the checked state and size\n      radios.map(async radio => {\n        await radio.updateComplete;\n        radio.checked = radio.value === this.value;\n        radio.size = this.size;\n      })\n    );\n\n    this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'syn-radio-button');\n\n    if (radios.length > 0 && !radios.some(radio => radio.checked)) {\n      if (this.hasButtonGroup) {\n        const buttonRadio = radios[0].shadowRoot?.querySelector('button');\n\n        if (buttonRadio) {\n          buttonRadio.tabIndex = 0;\n        }\n      } else {\n        radios[0].tabIndex = 0;\n      }\n    }\n\n    if (this.hasButtonGroup) {\n      const buttonGroup = this.shadowRoot?.querySelector('syn-button-group');\n\n      if (buttonGroup) {\n        buttonGroup.disableRole = true;\n      }\n    }\n  }\n\n  private syncRadios() {\n    if (customElements.get('syn-radio') && customElements.get('syn-radio-button')) {\n      this.syncRadioElements();\n      return;\n    }\n\n    if (customElements.get('syn-radio')) {\n      this.syncRadioElements();\n    } else {\n      customElements.whenDefined('syn-radio').then(() => this.syncRadios());\n    }\n\n    if (customElements.get('syn-radio-button')) {\n      this.syncRadioElements();\n    } else {\n      // Rerun this handler when <syn-radio> or <syn-radio-button> is registered\n      customElements.whenDefined('syn-radio-button').then(() => this.syncRadios());\n    }\n  }\n\n  private updateCheckedRadio() {\n    const radios = this.getAllRadios();\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\n    this.formControlController.setValidity(this.validity.valid);\n  }\n\n  @watch('size', { waitUntilFirstUpdate: true })\n  handleSizeChange() {\n    this.syncRadios();\n  }\n\n  @watch('value')\n  handleValueChange() {\n    if (this.hasUpdated) {\n      this.updateCheckedRadio();\n    }\n  }\n\n  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n  checkValidity() {\n    const isRequiredAndEmpty = this.required && !this.value;\n    const hasCustomValidityMessage = this.customValidityMessage !== '';\n\n    if (isRequiredAndEmpty || hasCustomValidityMessage) {\n      this.formControlController.emitInvalidEvent();\n      return false;\n    }\n\n    return true;\n  }\n\n  /** Gets the associated form, if one exists. */\n  getForm(): HTMLFormElement | null {\n    return this.formControlController.getForm();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  reportValidity(): boolean {\n    const isValid = this.validity.valid;\n\n    this.errorMessage = this.customValidityMessage || isValid ? '' : this.validationInput.validationMessage;\n    this.formControlController.setValidity(isValid);\n    this.validationInput.hidden = true;\n    clearTimeout(this.validationTimeout);\n\n    if (!isValid) {\n      // Show the browser's constraint validation message\n      this.validationInput.hidden = false;\n      this.validationInput.reportValidity();\n      this.validationTimeout = setTimeout(() => (this.validationInput.hidden = true), 10000) as unknown as number;\n    }\n\n    return isValid;\n  }\n\n  /** Sets a custom validation message. Pass an empty string to restore validity. */\n  setCustomValidity(message = '') {\n    this.customValidityMessage = message;\n    this.errorMessage = message;\n    this.validationInput.setCustomValidity(message);\n    this.formControlController.updateValidity();\n  }\n\n  render() {\n    const hasLabelSlot = this.hasSlotController.test('label');\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n    const hasLabel = this.label ? true : !!hasLabelSlot;\n    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n    const defaultSlot = html`\n      <slot @slotchange=${this.syncRadios} @click=${this.handleRadioClick} @keydown=${this.handleKeyDown}></slot>\n    `;\n\n    return html`\n      <fieldset\n        part=\"form-control\"\n        class=${classMap({\n          'form-control': true,\n          'form-control--small': this.size === 'small',\n          'form-control--medium': this.size === 'medium',\n          'form-control--large': this.size === 'large',\n          'form-control--radio-group': true,\n          'form-control--has-label': hasLabel,\n          'form-control--has-help-text': hasHelpText\n        })}\n        role=\"radiogroup\"\n        aria-labelledby=\"label\"\n        aria-describedby=\"help-text\"\n        aria-errormessage=\"error-message\"\n      >\n        <label\n          part=\"form-control-label\"\n          id=\"label\"\n          class=\"form-control__label\"\n          aria-hidden=${hasLabel ? 'false' : 'true'}\n          @click=${this.handleLabelClick}\n        >\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div part=\"form-control-input\" class=\"form-control-input\">\n          <div class=\"visually-hidden\">\n            <div id=\"error-message\" aria-live=\"assertive\">${this.errorMessage}</div>\n            <label class=\"radio-group__validation\">\n              <input\n                type=\"text\"\n                class=\"radio-group__validation-input\"\n                ?required=${this.required}\n                tabindex=\"-1\"\n                hidden\n                @invalid=${this.handleInvalid}\n              />\n            </label>\n          </div>\n\n          ${this.hasButtonGroup\n            ? html`\n                <syn-button-group part=\"button-group\" exportparts=\"base:button-group__base\" role=\"presentation\">\n                  ${defaultSlot}\n                </syn-button-group>\n              `\n            : defaultSlot}\n        </div>\n\n        <div\n          part=\"form-control-help-text\"\n          id=\"help-text\"\n          class=\"form-control__help-text\"\n          aria-hidden=${hasHelpText ? 'false' : 'true'}\n        >\n          <slot name=\"help-text\">${this.helpText}</slot>\n        </div>\n      </fieldset>\n    `;\n  }\n}\n"],
-  "mappings": "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",
-  "names": []
-}

package/dist/chunks/chunk.OE4RXQU2.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/tab/tab.custom.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /* Write custom CSS here */\n\n  :host {\n    --background-color: none;\n    --border-width: var(--syn-border-width-none);\n    --border-color: none;\n    --border-radius: var(--syn-border-radius-none);\n  }\n\n  .tab {\n    border-color: transparent;\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    color: var(--syn-typography-color-text);\n    font: var(--syn-body-small-bold);\n    min-height: var(--syn-spacing-2x-large);\n    padding: var(--syn-spacing-small) var(--syn-spacing-large);\n\n    /* Stretch the tabs so they are aligned to each other vertically and the focus width stays the same  */\n    width: 100%;\n  }\n\n\n  /**\n   * Focus\n   */\n  .tab:focus-visible {\n    outline-offset: calc(var(--syn-focus-ring-offset) * -1);\n  }\n\n  .tab:focus-visible:not(.tab--disabled) {\n    color: var(--syn-typography-color-text);\n  }\n\n  @media (forced-colors: active) {\n    .tab.tab--active:not(.tab--disabled) {\n      outline-offset: calc(var(--syn-focus-ring-offset) * -1);\n    }\n  }\n\n  .tab:hover:not(.tab--disabled) {\n    color: var(--syn-color-primary-700);\n  }\n\n  .tab.tab--active:not(.tab--disabled) {\n    color: var(--syn-typography-color-text);\n  }\n\n\n  /**\n   * Closable\n   */\n  .tab.tab--closable {\n    padding: var(--syn-spacing-2x-small) var(--syn-spacing-large);\n  }\n\n  .tab__close-button {\n    color: var(--syn-color-neutral-500);\n    font-size: var(--syn-font-size-x-large);\n    margin-inline-start: var(--syn-spacing-2x-small);\n  }\n\n  .tab__close-button::part(base) {\n    padding: var(--syn-spacing-x-small);\n  }\n\n  .tab__close-button::part(base):hover {\n    color: var(--syn-color-primary-700);\n  }\n\n  .tab--active {\n    background-color: var(--background-color);\n    border-color: var(--border-color);\n    border-style: solid;\n    border-width: var(--border-width);\n  }\n\n  /* Slotted icon style */\n  .tab ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n`;\n"],
-  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,4BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
-  "names": []
-}

package/dist/chunks/chunk.RX7A4EQ2.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/internal/offset.ts", "../../src/internal/scroll.ts"],
-  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\n/**\n * Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the\n * parent doesn't have to be positioned relative or absolute.\n *\n * NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent seems\n * to ignore elements inside the surrounding shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=920069\n */\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n  return {\n    top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),\n    left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left)\n  };\n}\n", "/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { getOffset } from './offset.js';\n\nconst locks = new Set();\n\n/** Returns the width of the document's scrollbar */\nfunction getScrollbarWidth() {\n  const documentWidth = document.documentElement.clientWidth;\n  return Math.abs(window.innerWidth - documentWidth);\n}\n\n/**\n * Used in conjunction with `scrollbarWidth` to set proper body padding in case the user has padding already on the `<body>` element.\n */\nfunction getExistingBodyPadding() {\n  const padding = Number(getComputedStyle(document.body).paddingRight.replace(/px/, ''));\n\n  if (isNaN(padding) || !padding) {\n    return 0;\n  }\n\n  return padding;\n}\n\n/**\n * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n */\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n\n  // When the first lock is created, set the scroll lock size to match the scrollbar's width to prevent content from\n  // shifting. We only do this on the first lock because the scrollbar width will measure zero after overflow is hidden.\n  if (!document.documentElement.classList.contains('syn-scroll-lock')) {\n    /** Scrollbar width + body padding calculation can go away once Safari has scrollbar-gutter support. */\n    const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding(); // must be measured before the `syn-scroll-lock` class is applied\n    document.documentElement.classList.add('syn-scroll-lock');\n    document.documentElement.style.setProperty('--syn-scroll-lock-size', `${scrollbarWidth}px`);\n  }\n}\n\n/**\n * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n */\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.documentElement.classList.remove('syn-scroll-lock');\n    document.documentElement.style.removeProperty('--syn-scroll-lock-size');\n  }\n}\n\n/** Scrolls an element into view of its container. If the element is already in view, nothing will happen. */\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: 'horizontal' | 'vertical' | 'both' = 'vertical',\n  behavior: 'smooth' | 'auto' = 'smooth'\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === 'horizontal' || direction === 'both') {\n    if (offsetLeft < minX) {\n      container.scrollTo({ left: offsetLeft, behavior });\n    } else if (offsetLeft + element.clientWidth > maxX) {\n      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });\n    }\n  }\n\n  if (direction === 'vertical' || direction === 'both') {\n    if (offsetTop < minY) {\n      container.scrollTo({ top: offsetTop, behavior });\n    } else if (offsetTop + element.clientHeight > maxY) {\n      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });\n    }\n  }\n}\n"],
-  "mappings": ";AAeO,SAAS,UAAU,SAAsB,QAAqB;AACnE,SAAO;AAAA,IACL,KAAK,KAAK,MAAM,QAAQ,sBAAsB,EAAE,MAAM,OAAO,sBAAsB,EAAE,GAAG;AAAA,IACxF,MAAM,KAAK,MAAM,QAAQ,sBAAsB,EAAE,OAAO,OAAO,sBAAsB,EAAE,IAAI;AAAA,EAC7F;AACF;;;ACVA,IAAM,QAAQ,oBAAI,IAAI;AAGtB,SAAS,oBAAoB;AAC3B,QAAM,gBAAgB,SAAS,gBAAgB;AAC/C,SAAO,KAAK,IAAI,OAAO,aAAa,aAAa;AACnD;AAKA,SAAS,yBAAyB;AAChC,QAAM,UAAU,OAAO,iBAAiB,SAAS,IAAI,EAAE,aAAa,QAAQ,MAAM,EAAE,CAAC;AAErF,MAAI,MAAM,OAAO,KAAK,CAAC,SAAS;AAC9B,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAMO,SAAS,kBAAkB,WAAwB;AACxD,QAAM,IAAI,SAAS;AAInB,MAAI,CAAC,SAAS,gBAAgB,UAAU,SAAS,iBAAiB,GAAG;AAEnE,UAAM,iBAAiB,kBAAkB,IAAI,uBAAuB;AACpE,aAAS,gBAAgB,UAAU,IAAI,iBAAiB;AACxD,aAAS,gBAAgB,MAAM,YAAY,0BAA0B,GAAG,cAAc,IAAI;AAAA,EAC5F;AACF;AAKO,SAAS,oBAAoB,WAAwB;AAC1D,QAAM,OAAO,SAAS;AAEtB,MAAI,MAAM,SAAS,GAAG;AACpB,aAAS,gBAAgB,UAAU,OAAO,iBAAiB;AAC3D,aAAS,gBAAgB,MAAM,eAAe,wBAAwB;AAAA,EACxE;AACF;AAGO,SAAS,eACd,SACA,WACA,YAAgD,YAChD,WAA8B,UAC9B;AACA,QAAM,SAAS,UAAU,SAAS,SAAS;AAC3C,QAAM,YAAY,OAAO,MAAM,UAAU;AACzC,QAAM,aAAa,OAAO,OAAO,UAAU;AAC3C,QAAM,OAAO,UAAU;AACvB,QAAM,OAAO,UAAU,aAAa,UAAU;AAC9C,QAAM,OAAO,UAAU;AACvB,QAAM,OAAO,UAAU,YAAY,UAAU;AAE7C,MAAI,cAAc,gBAAgB,cAAc,QAAQ;AACtD,QAAI,aAAa,MAAM;AACrB,gBAAU,SAAS,EAAE,MAAM,YAAY,SAAS,CAAC;AAAA,IACnD,WAAW,aAAa,QAAQ,cAAc,MAAM;AAClD,gBAAU,SAAS,EAAE,MAAM,aAAa,UAAU,cAAc,QAAQ,aAAa,SAAS,CAAC;AAAA,IACjG;AAAA,EACF;AAEA,MAAI,cAAc,cAAc,cAAc,QAAQ;AACpD,QAAI,YAAY,MAAM;AACpB,gBAAU,SAAS,EAAE,KAAK,WAAW,SAAS,CAAC;AAAA,IACjD,WAAW,YAAY,QAAQ,eAAe,MAAM;AAClD,gBAAU,SAAS,EAAE,KAAK,YAAY,UAAU,eAAe,QAAQ,cAAc,SAAS,CAAC;AAAA,IACjG;AAAA,EACF;AACF;",
-  "names": []
-}

package/dist/chunks/chunk.U2OMGNNZ.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/menu-item/submenu-controller.ts"],
-  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { createRef, ref, type Ref } from 'lit/directives/ref.js';\nimport { type HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { type LocalizeController } from '../../utilities/localize.js';\nimport type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport type SynMenuItem from './menu-item.js';\nimport type SynPopup from '../popup/popup.js';\n\n/** A reactive controller to manage the registration of event listeners for submenus. */\nexport class SubmenuController implements ReactiveController {\n  private host: ReactiveControllerHost & SynMenuItem;\n  private popupRef: Ref<SynPopup> = createRef();\n  private enableSubmenuTimer = -1;\n  private isConnected = false;\n  private isPopupConnected = false;\n  private skidding = 0;\n  private readonly hasSlotController: HasSlotController;\n  private readonly localize: LocalizeController;\n  private readonly submenuOpenDelay = 100;\n\n  constructor(\n    host: ReactiveControllerHost & SynMenuItem,\n    hasSlotController: HasSlotController,\n    localize: LocalizeController\n  ) {\n    (this.host = host).addController(this);\n    this.hasSlotController = hasSlotController;\n    this.localize = localize;\n  }\n\n  hostConnected() {\n    if (this.hasSlotController.test('submenu') && !this.host.disabled) {\n      this.addListeners();\n    }\n  }\n\n  hostDisconnected() {\n    this.removeListeners();\n  }\n\n  hostUpdated() {\n    if (this.hasSlotController.test('submenu') && !this.host.disabled) {\n      this.addListeners();\n      this.updateSkidding();\n    } else {\n      this.removeListeners();\n    }\n  }\n\n  private addListeners() {\n    if (!this.isConnected) {\n      this.host.addEventListener('mousemove', this.handleMouseMove);\n      this.host.addEventListener('mouseover', this.handleMouseOver);\n      this.host.addEventListener('keydown', this.handleKeyDown);\n      this.host.addEventListener('click', this.handleClick);\n      this.host.addEventListener('focusout', this.handleFocusOut);\n      this.isConnected = true;\n    }\n\n    // The popup does not seem to get wired when the host is\n    // connected, so manage its listeners separately.\n    if (!this.isPopupConnected) {\n      if (this.popupRef.value) {\n        this.popupRef.value.addEventListener('mouseover', this.handlePopupMouseover);\n        this.popupRef.value.addEventListener('syn-reposition', this.handlePopupReposition);\n        this.isPopupConnected = true;\n      }\n    }\n  }\n\n  private removeListeners() {\n    if (this.isConnected) {\n      this.host.removeEventListener('mousemove', this.handleMouseMove);\n      this.host.removeEventListener('mouseover', this.handleMouseOver);\n      this.host.removeEventListener('keydown', this.handleKeyDown);\n      this.host.removeEventListener('click', this.handleClick);\n      this.host.removeEventListener('focusout', this.handleFocusOut);\n      this.isConnected = false;\n    }\n    if (this.isPopupConnected) {\n      if (this.popupRef.value) {\n        this.popupRef.value.removeEventListener('mouseover', this.handlePopupMouseover);\n        this.popupRef.value.removeEventListener('syn-reposition', this.handlePopupReposition);\n        this.isPopupConnected = false;\n      }\n    }\n  }\n\n  // Set the safe triangle cursor position\n  private handleMouseMove = (event: MouseEvent) => {\n    this.host.style.setProperty('--safe-triangle-cursor-x', `${event.clientX}px`);\n    this.host.style.setProperty('--safe-triangle-cursor-y', `${event.clientY}px`);\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasSlotController.test('submenu')) {\n      this.enableSubmenu();\n    }\n  };\n\n  private handleSubmenuEntry(event: KeyboardEvent) {\n    // Pass focus to the first menu-item in the submenu.\n    const submenuSlot: HTMLSlotElement | null = this.host.renderRoot.querySelector(\"slot[name='submenu']\");\n\n    // Missing slot\n    if (!submenuSlot) {\n      console.error('Cannot activate a submenu if no corresponding menuitem can be found.', this);\n      return;\n    }\n\n    // Menus\n    let menuItems: NodeListOf<Element> | null = null;\n    for (const elt of submenuSlot.assignedElements()) {\n      menuItems = elt.querySelectorAll(\"syn-menu-item, [role^='menuitem']\");\n      if (menuItems.length !== 0) {\n        break;\n      }\n    }\n\n    if (!menuItems || menuItems.length === 0) {\n      return;\n    }\n\n    menuItems[0].setAttribute('tabindex', '0');\n    for (let i = 1; i !== menuItems.length; ++i) {\n      menuItems[i].setAttribute('tabindex', '-1');\n    }\n\n    // Open the submenu (if not open), and set focus to first menuitem.\n    if (this.popupRef.value) {\n      event.preventDefault();\n      event.stopPropagation();\n      if (this.popupRef.value.active) {\n        if (menuItems[0] instanceof HTMLElement) {\n          menuItems[0].focus();\n        }\n      } else {\n        this.enableSubmenu(false);\n        this.host.updateComplete.then(() => {\n          if (menuItems![0] instanceof HTMLElement) {\n            menuItems![0].focus();\n          }\n        });\n        this.host.requestUpdate();\n      }\n    }\n  }\n\n  // Focus on the first menu-item of a submenu.\n  private handleKeyDown = (event: KeyboardEvent) => {\n    switch (event.key) {\n      case 'Escape':\n      case 'Tab':\n        this.disableSubmenu();\n        break;\n      case 'ArrowLeft':\n        // Either focus is currently on the host element or a child\n        if (event.target !== this.host) {\n          event.preventDefault();\n          event.stopPropagation();\n          this.host.focus();\n          this.disableSubmenu();\n        }\n        break;\n      case 'ArrowRight':\n      case 'Enter':\n      case ' ':\n        this.handleSubmenuEntry(event);\n        break;\n      default:\n        break;\n    }\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    // Clicking on the item which heads the menu does nothing, otherwise hide submenu and propagate\n    if (event.target === this.host) {\n      event.preventDefault();\n      event.stopPropagation();\n    } else if (\n      event.target instanceof Element &&\n      (event.target.tagName === 'syn-menu-item' || event.target.role?.startsWith('menuitem'))\n    ) {\n      this.disableSubmenu();\n    }\n  };\n\n  // Close this submenu on focus outside of the parent or any descendants.\n  private handleFocusOut = (event: FocusEvent) => {\n    if (event.relatedTarget && event.relatedTarget instanceof Element && this.host.contains(event.relatedTarget)) {\n      return;\n    }\n    this.disableSubmenu();\n  };\n\n  // Prevent the parent menu-item from getting focus on mouse movement on the submenu\n  private handlePopupMouseover = (event: MouseEvent) => {\n    event.stopPropagation();\n  };\n\n  // Set the safe triangle values for the submenu when the position changes\n  private handlePopupReposition = () => {\n    const submenuSlot: HTMLSlotElement | null = this.host.renderRoot.querySelector(\"slot[name='submenu']\");\n    const menu = submenuSlot?.assignedElements({ flatten: true }).filter(el => el.localName === 'syn-menu')[0];\n    const isRtl = this.localize.dir() === 'rtl';\n\n    if (!menu) {\n      return;\n    }\n\n    const { left, top, width, height } = menu.getBoundingClientRect();\n\n    this.host.style.setProperty('--safe-triangle-submenu-start-x', `${isRtl ? left + width : left}px`);\n    this.host.style.setProperty('--safe-triangle-submenu-start-y', `${top}px`);\n    this.host.style.setProperty('--safe-triangle-submenu-end-x', `${isRtl ? left + width : left}px`);\n    this.host.style.setProperty('--safe-triangle-submenu-end-y', `${top + height}px`);\n  };\n\n  private setSubmenuState(state: boolean) {\n    if (this.popupRef.value) {\n      if (this.popupRef.value.active !== state) {\n        this.popupRef.value.active = state;\n        this.host.requestUpdate();\n      }\n    }\n  }\n\n  // Shows the submenu. Supports disabling the opening delay, e.g. for keyboard events that want to set the focus to the\n  // newly opened menu.\n  private enableSubmenu(delay = true) {\n    if (delay) {\n      window.clearTimeout(this.enableSubmenuTimer);\n      this.enableSubmenuTimer = window.setTimeout(() => {\n        this.setSubmenuState(true);\n      }, this.submenuOpenDelay);\n    } else {\n      this.setSubmenuState(true);\n    }\n  }\n\n  private disableSubmenu() {\n    window.clearTimeout(this.enableSubmenuTimer);\n    this.setSubmenuState(false);\n  }\n\n  // Calculate the space the top of a menu takes-up, for aligning the popup menu-item with the activating element.\n  private updateSkidding(): void {\n    // .computedStyleMap() not always available.\n    if (!this.host.parentElement?.computedStyleMap) {\n      return;\n    }\n    const styleMap: StylePropertyMapReadOnly = this.host.parentElement.computedStyleMap();\n    const attrs: string[] = ['padding-top', 'border-top-width', 'margin-top'];\n\n    const skidding = attrs.reduce((accumulator, attr) => {\n      const styleValue: CSSStyleValue = styleMap.get(attr) ?? new CSSUnitValue(0, 'px');\n      const unitValue = styleValue instanceof CSSUnitValue ? styleValue : new CSSUnitValue(0, 'px');\n      const pxValue = unitValue.to('px');\n      return accumulator - pxValue.value;\n    }, 0);\n\n    this.skidding = skidding;\n  }\n\n  isExpanded(): boolean {\n    return this.popupRef.value ? this.popupRef.value.active : false;\n  }\n\n  renderSubmenu() {\n    const isLtr = this.localize.dir() === 'ltr';\n\n    // Always render the slot, but conditionally render the outer <syn-popup>\n    if (!this.isConnected) {\n      return html` <slot name=\"submenu\" hidden></slot> `;\n    }\n\n    return html`\n      <syn-popup\n        ${ref(this.popupRef)}\n        placement=${isLtr ? 'right-start' : 'left-start'}\n        anchor=\"anchor\"\n        flip\n        flip-fallback-strategy=\"best-fit\"\n        skidding=\"${this.skidding}\"\n        strategy=\"fixed\"\n      >\n        <slot name=\"submenu\"></slot>\n      </syn-popup>\n    `;\n  }\n}\n"],
-  "mappings": "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",
-  "names": ["_a"]
-}