{"version":3,"file":"feature-block.Dn1g36Lz.js","sources":["../../../../../packages/web-components/src/lib/components/feature-block/feature-block.ts"],"sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { pdsCustomElement as customElement } from '../../decorators/pds-custom-element';\nimport { PdsElement } from '../PdsElement';\nimport styles from './feature-block.scss?inline';\n\n/**\n * @summary A wrapper that contains stacked media and a body of content\n * on small screens and then breaks them side-by-side on large screens\n *\n * @slot media Required: Holds the image or video\n * @slot default Required: Holds the content of the feature block (heading, text-passage, CTAs)\n */\n@customElement('pds-feature-block', {\n category: 'component',\n type: 'component',\n state: 'stable',\n styles,\n})\nexport class PdsFeatureBlock extends PdsElement {\n /**\n * Behavior variant\n * - **reversed** renders the media slot to the right of the body on md/lg screens\n */\n @property()\n behavior: 'reversed' | 'default' = 'default';\n\n /**\n * Full width variant\n * 1) Turns on the full bleed media slot behind the body overlay\n */\n @property({ type: Boolean })\n fullWidth: boolean = false;\n\n /**\n * reverse the stacking order in mobile display\n */\n @property({ type: Boolean })\n reverseMobileDisplay: boolean = false;\n\n /**\n * @internal\n */\n get classNames() {\n return {\n [`${this.behavior}`]: !!this.behavior,\n 'full-width': !!this.fullWidth,\n 'reverse-mobile-display': !!this.reverseMobileDisplay,\n };\n }\n\n render() {\n return html`