import { CSSResultArray , html , PropertyValues , SpectrumElement , TemplateResult , } from '@spectrum-web-components/base' ; import { property } from '@spectrum-web-components/base/src/decorators.js' ; import { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js' ; import styles from './field-group.css.js' ; element slot slot slot export class FieldGroup extends ManageHelpText ( SpectrumElement , { mode : 'external' , } ) { public static get styles ( ) : CSSResultArray { return [ styles ] ; } @ property ( { type : Boolean , reflect : true } ) public horizontal = false ; @ property ( { type : Boolean , reflect : true } ) public invalid = false ; @ property ( ) public label = '' ; @ property ( { type : Boolean , reflect : true } ) public vertical = false ; protected render ( ) { return html `
            <div class="group" role="presentation">
                <slot></slot>
            </div>
            ${ this . renderHelpText ( this . invalid ) }
        ` ; } protected updated ( changes ) { super . updated ( changes ) ; if ( changes . has ( 'label' ) ) { if ( this . label ) { this . setAttribute ( 'aria-label' , this . label ) ; } else { this . removeAttribute ( 'aria-label' ) ; } } } }