<div class="sky-dropdown">
  <button
    #triggerButton
    class="sky-btn sky-dropdown-button"
    type="button"
    [attr.aria-expanded]="isOpen"
    [attr.aria-controls]="isOpen ? menuId : null"
    [attr.aria-haspopup]="menuAriaRole"
    [attr.aria-label]="
      label ||
      (buttonType === 'context-menu'
        ? (contentInfoObs | async)?.descriptor
          ? (contentInfoObs | async)?.descriptor?.type === 'text'
            ? ('skyux_dropdown_context_menu_with_content_descriptor_default_label'
              | skyLibResources: (contentInfoObs | async)?.descriptor?.value)
            : undefined
          : ('skyux_dropdown_context_menu_default_label' | skyLibResources)
        : undefined)
    "
    [attr.aria-labelledby]="
      !label &&
      buttonType === 'context-menu' &&
      (contentInfoObs | async)?.descriptor?.type === 'elementId'
        ? screenReaderLabelContextMenu.id +
          ' ' +
          (contentInfoObs | async)?.descriptor?.value
        : undefined
    "
    [attr.title]="title"
    [disabled]="disabled"
    [ngClass]="[
      'sky-dropdown-button-type-' + buttonType,
      'sky-btn-' + buttonStyle
    ]"
  >
    @switch (buttonType) {
      @case ('context-menu') {
        <sky-icon icon="ellipsis" />
      }
      @default {
        <div class="sky-dropdown-button-container">
          <div class="sky-dropdown-button-content-container">
            <ng-content select="sky-dropdown-button" />
          </div>
          <div class="sky-dropdown-button-icon-container">
            <sky-icon
              *skyThemeIf="'default'"
              class="sky-dropdown-caret"
              icon="caret-down"
            />
            <sky-icon
              *skyThemeIf="'modern'"
              class="sky-dropdown-caret"
              icon="chevron-down"
            />
          </div>
        </div>
      }
    }
  </button>
</div>

<ng-template #menuContainerTemplateRef>
  <div
    #menuContainerElementRef
    class="sky-dropdown-menu-container"
    [class.hidden]="!isVisible"
  >
    <ng-content select="sky-dropdown-menu" />
  </div>
</ng-template>
<span
  #screenReaderLabelContextMenu="skyId"
  skyScreenReaderLabel
  skyId
  [createLabel]="
    buttonType === 'context-menu' &&
    (contentInfoObs | async)?.descriptor?.type === 'elementId'
  "
>
  {{
    'skyux_dropdown_context_menu_with_content_descriptor_el_default_label'
      | skyLibResources
  }}
</span>
