import { customElement } from 'lit/decorators.js'
import Element from './internals/ApiModelingAccessScreen.js'
import common from './internals/styles/api.styles.js'
import form from './internals/styles/form_styles.js'
import typography from '../styles/m3/typography.module.js'

// Required UI elements used by the screen
import '../md/select/ui-select.js'
import '../md/select/ui-option.js'
import '../md/divider/ui-divider.js'
import '../md/icons/ui-icon.js'
import './api-modeling-access-configuration.js'

/**
 * A component that renders the API Access section screen in the API modeling tool.
 * It consists of authentication, authorization, and access configuration.
 */
@customElement('api-modeling-access')
export class ApiModelingAccessElement extends Element {
  static override styles = [form, typography, common]
}

declare global {
  interface HTMLElementTagNameMap {
    'api-modeling-access': ApiModelingAccessElement
  }
}
