import { CSSResultArray , html , nothing , SizedMixin , SpectrumElement , TemplateResult , } from '@spectrum-web-components/base' ; import { property } from '@spectrum-web-components/base/src/decorators.js' ; import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js' ; import styles from './help-text.css.js' ; type HelpTextVariants = 'neutral' | 'negative' ; element export class HelpText extends SizedMixin ( SpectrumElement ) { public static get styles ( ) : CSSResultArray { return [ styles ] ; } @ property ( { type : Boolean , reflect : true } ) public icon = false ; /**
     * The visual variant to apply to this help text.
     */ @ property ( { reflect : true } ) public variant : HelpTextVariants = 'neutral' ; protected render ( ) { return html `
            ${ this . variant === 'negative' && this . icon ? html `
                      <sp-icon-alert class="icon"></sp-icon-alert>
                  ` : nothing }
            <div class="text"><slot></slot></div>
        ` ; } }