import { CSSResultArray , html , SpectrumElement , TemplateResult , } from '@spectrum-web-components/base' ; import { property } from '@spectrum-web-components/base/src/decorators.js' ; import messageStyles from './illustrated-message.css.js' ; import headingStyles from '@spectrum-web-components/styles/heading.js' ; import bodyStyles from '@spectrum-web-components/styles/body.js' ; element slot slot slot export class IllustratedMessage extends SpectrumElement { public static readonly is = 'sp-illustrated-message' ; public static get styles ( ) : CSSResultArray { return [ headingStyles , bodyStyles , messageStyles ] ; } @ property ( ) public heading = '' ; @ property ( ) public description = '' ; protected render ( ) { return html `
            <div id="illustration"><slot></slot></div>
            <h2
                id="heading"
                class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light"
            >
                <slot name="heading">${ this . heading }</slot>
            </h2>
            <div id="description" class="spectrum-Body spectrum-Body--sizeS">
                <slot name="description">${ this . description }</slot>
            </div>
        ` ; } }