{"version":3,"file":"keycloakify-angular-email.mjs","sources":["../../../projects/angular-email/src/lib/components/background/background.component.ts","../../../projects/angular-email/src/lib/components/background/background.component.html","../../../projects/angular-email/src/lib/components/body/body.component.ts","../../../projects/angular-email/src/lib/components/body/body.component.html","../../../projects/angular-email/src/lib/components/button/button.component.ts","../../../projects/angular-email/src/lib/components/button/button.component.html","../../../projects/angular-email/src/lib/components/color-scheme/color-scheme.component.ts","../../../projects/angular-email/src/lib/components/color-scheme/color-scheme.component.html","../../../projects/angular-email/src/lib/components/column/column.component.ts","../../../projects/angular-email/src/lib/components/column/column.component.html","../../../projects/angular-email/src/lib/components/conditional/conditional.component.ts","../../../projects/angular-email/src/lib/components/conditional/conditional.component.html","../../../projects/angular-email/src/lib/components/container/container.component.ts","../../../projects/angular-email/src/lib/components/container/container.component.html","../../../projects/angular-email/src/lib/components/head/head.component.ts","../../../projects/angular-email/src/lib/components/head/head.component.html","../../../projects/angular-email/src/lib/utils.ts","../../../projects/angular-email/src/lib/components/heading/heading.component.ts","../../../projects/angular-email/src/lib/components/heading/heading.component.html","../../../projects/angular-email/src/lib/components/hr/hr.component.ts","../../../projects/angular-email/src/lib/components/hr/hr.component.html","../../../projects/angular-email/src/lib/components/html/html.component.ts","../../../projects/angular-email/src/lib/components/html/html.component.html","../../../projects/angular-email/src/lib/components/img/img.component.ts","../../../projects/angular-email/src/lib/components/img/img.component.html","../../../projects/angular-email/src/lib/components/link/link.component.ts","../../../projects/angular-email/src/lib/components/link/link.component.html","../../../projects/angular-email/src/lib/components/raw/raw.component.ts","../../../projects/angular-email/src/lib/components/raw/raw.component.html","../../../projects/angular-email/src/lib/components/preview/preview.component.ts","../../../projects/angular-email/src/lib/components/preview/preview.component.html","../../../projects/angular-email/src/lib/components/row/row.component.ts","../../../projects/angular-email/src/lib/components/row/row.component.html","../../../projects/angular-email/src/lib/components/section/section.component.ts","../../../projects/angular-email/src/lib/components/section/section.component.html","../../../projects/angular-email/src/lib/components/text/text.component.ts","../../../projects/angular-email/src/lib/components/text/text.component.html","../../../projects/angular-email/src/lib/render.ts","../../../projects/angular-email/src/index.ts","../../../projects/angular-email/src/keycloakify-angular-email.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\n@Component({\n selector: 'ng-email-background',\n templateUrl: 'background.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [],\n})\nexport class BackgroundComponent {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n $style = input | null | undefined>(null, { alias: 'style' });\n $styleClass = input(undefined, { alias: 'styleClass' });\n\n $width = input(0, { alias: 'width' });\n $height = input(0, { alias: 'height' });\n $src = input(undefined, { alias: 'src' });\n $bgRepeat = input<'repeat' | 'no-repeat'>('no-repeat', { alias: 'bgRepeat' });\n $bgColor = input(undefined, { alias: 'bgColor' });\n\n $bgStyle = computed(() => ({ backgroundRepeat: this.$bgRepeat(), ...(this.$style() ?? {}) }));\n}\n","@let width = $width();\n@let height = $height();\n\n\n \n \n \n \n \n\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n@Component({\n selector: 'ng-email-body',\n templateUrl: 'body.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BodyComponent {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n $style = input | null | undefined>(null, { alias: 'style' });\n $styleClass = input(undefined, { alias: 'styleClass' });\n}\n","\n \n\n","import { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\n@Component({\n selector: 'ng-email-button',\n templateUrl: 'button.component.html',\n imports: [NgTemplateOutlet],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonComponent {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n $style = input | null | undefined>(null, { alias: 'style' });\n $styleClass = input(null, { alias: 'styleClass' });\n\n $href = input(undefined, { alias: 'href' });\n $textContent = input.required({ alias: 'textContent' });\n $width = input(undefined, { alias: 'width' });\n $height = input(undefined, { alias: 'height' });\n $borderRadius = input(0, { alias: 'borderRadius' });\n $textColor = input(undefined, { alias: 'textColor' });\n $backgroundColor = input(undefined, { alias: 'backgroundColor' });\n $borderColor = input(undefined, { alias: 'borderColor' });\n $borderSize = input(1, { alias: 'borderSize' });\n $fontSize = input(16, { alias: 'fontSize' });\n $align = input('left', { alias: 'align' });\n $withBackground = input(false, { alias: 'withBackground' });\n\n $arcsize = computed(() => Math.floor((this.$borderRadius() / (this.$height() ?? 1)) * 100));\n $lineHeight = computed(() =>\n this.$borderSize() ? (this.$height() ?? 0) - 2 * this.$borderSize() : (this.$height() ?? 0),\n );\n\n private $baseStyle = computed(() => ({\n '-webkit-text-size-adjust': 'none',\n borderRadius: `${this.$borderRadius()}px`,\n display: 'inline-block',\n fontSize: `${this.$fontSize()}px`,\n lineHeight: `${this.$lineHeight()}px`,\n maxWidth: this.$width() ? `${this.$width()}px` : undefined,\n textAlign: 'center',\n textDecoration: 'none',\n width: '100%',\n }));\n\n private $borderStyles = computed(() => ({\n border: `${this.$borderSize()}px solid ${this.$borderColor()}`,\n msoBorderAlt: 'none',\n }));\n\n private $propStyles = computed(() => ({\n // border styles\n ...(this.$borderColor() ? this.$borderStyles() : {}),\n // background styles\n ...(this.$backgroundColor() ? { backgroundColor: this.$backgroundColor() } : {}),\n // text styles\n ...(this.$textColor() ? { color: this.$textColor() } : {}),\n }));\n\n $withBackgroundStyle = computed(() => ({\n ...this.$baseStyle(),\n // background styles\n ...(this.$backgroundColor() ? { backgroundColor: this.$backgroundColor() } : {}),\n // text styles\n ...(this.$textColor() ? { color: this.$textColor() } : {}),\n ...(this.$style() ?? {}),\n ...(this.$withBackground() ? {} : { msoHide: 'all' }),\n }));\n\n $withoutBackgroundStyle = computed(() => ({\n ...this.$baseStyle(),\n // background styles\n ...this.$propStyles(),\n ...(this.$style() ?? {}),\n ...(this.$withBackground() ? {} : { msoHide: 'all' }),\n }));\n\n $noBgInnerHtml = computed(() => {\n const href = this.$href();\n const borderColor = this.$borderColor();\n const borderSize = this.$borderSize();\n const height = this.$height();\n const width = this.$width();\n const arcsize = this.$arcsize();\n const backgroundColor = this.$backgroundColor();\n const fontSize = this.$fontSize();\n const textColor = this.$textColor();\n const textContent = this.$textContent();\n return ``;\n });\n}\n","@let withBackground = $withBackground();\n@let align = $align();\n@let href = $href();\n@let height = $height();\n@let width = $width();\n@let borderRadius = $borderRadius();\n\n\n\n\n \n \n @if (withBackground) {\n \n \n \n \n \n \n \n \n \n } @else {\n \n \n \n \n }\n \n \n\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\nexport type ColorSchemeMode =\n | 'dark'\n /**\n * The email client will only ever render the content in the dark color scheme and forbids the\n * email client from overriding the color scheme.\n */\n | 'dark only'\n | 'light'\n /**\n * The email client will choose the light or dark theme to match the user’s preference.\n * If the user’s preference does not match something in the list, the email client will choose\n * which mode to display.\n */\n | 'light dark'\n /**\n * The email client will choose the first of the listed schemes that it supports taking user\n * preference into account and forbids the email client from overriding the color scheme.\n */\n | 'light dark only'\n /**\n * The email client will only ever render the content in the light color scheme and forbids the\n * email client from overriding the color scheme.\n */\n | 'light only'\n /**\n * Indicates that the email supports the page’s supported color schemes, if they are set, or\n * that it supports no color schemes at all otherwise.\n */\n | 'normal';\n\n@Component({\n selector: 'ng-email-color-scheme',\n templateUrl: 'color-scheme.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ColorSchemeComponent {\n $mode = input('normal', { alias: 'mode' });\n $style = computed(\n () => ``,\n );\n}\n","@let mode = $mode();\n\n\n\n\n\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n@Component({\n selector: 'ng-email-column',\n templateUrl: 'column.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [],\n})\nexport class ColumnComponent {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n $style = input | null | undefined>(null, { alias: 'style' });\n $styleClass = input(undefined, { alias: 'styleClass' });\n $bgImage = input(undefined, { alias: 'bgImage' });\n $bgColor = input(undefined, { alias: 'bgColor' });\n}\n","\n \n\n","import { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, CUSTOM_ELEMENTS_SCHEMA, effect, input } from '@angular/core';\n\n@Component({\n selector: 'ng-email-conditional',\n templateUrl: 'conditional.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [NgTemplateOutlet],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class ConditionalComponent {\n $expression = input(undefined, { alias: 'expression' });\n $mso = input(undefined, { alias: 'mso' });\n\n noMsoInnerHtmlPre = '<!--[if !mso]><!-->';\n noMsoInnerHtmlPost = '<!--<![endif]-->';\n\n $msoInnerHtmlPre = computed(() => `<!--[if ${this.$expression() ?? 'mso'}]>`);\n msoInnerHtmlPost = '<![endif]-->';\n\n constructor() {\n effect(() => {\n if (typeof this.$expression() === 'undefined' && typeof this.$mso() === 'undefined')\n throw new RangeError('angular-email: Conditional expects the `expression` or `mso` prop to be defined');\n\n if (typeof this.$expression() !== 'undefined' && typeof this.$mso() !== 'undefined')\n throw new RangeError(\n 'angular-email: Conditional expects the `expression` or `mso` prop to be defined, not both',\n );\n });\n }\n}\n","@let mso = $mso();\n\n@if (!mso) {\n \n \n \n} @else {\n \n \n \n}\n\n","import { ChangeDetectionStrategy, Component, computed, inject, input, DOCUMENT } from '@angular/core';\n\n@Component({\n selector: 'ng-email-container',\n templateUrl: 'container.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [],\n})\nexport class ContainerComponent {\n random = Math.random();\n document = inject(DOCUMENT);\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n $style = input | null | undefined>(null, { alias: 'style' });\n $styleClass = input(undefined, { alias: 'styleClass' });\n $alignment = input('center', { alias: 'alignment' });\n $disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });\n $containerWidth = input(600, { alias: 'containerWidth' });\n\n $containerStyle = computed(() => ({\n ...(this.$disableDefaultStyle() ? {} : { maxWidth: `${this.$containerWidth()}px` }),\n ...this.$style(),\n }));\n\n $trStyle = computed(() => ({\n ...(this.$disableDefaultStyle() ? {} : { width: '100%' }),\n }));\n\n $innerHtmlPre = computed(\n () =>\n ``,\n );\n\n $innerHtmlPost = computed(() => ``);\n}\n","@let containerWidth = $containerWidth();\n@let alignment = $alignment();\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n","import { ChangeDetectionStrategy, Component, input, NO_ERRORS_SCHEMA } from '@angular/core';\nimport { ConditionalComponent } from '../conditional/conditional.component';\n\n@Component({\n selector: 'ng-email-head',\n templateUrl: 'head.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [ConditionalComponent],\n schemas: [NO_ERRORS_SCHEMA],\n})\nexport class HeadComponent {\n $enableFormatDetection = input(false, { alias: 'enableFormatDetection' });\n xml = `\\n96\\n`;\n}\n","@let enableFormatDetection = $enableFormatDetection();\n\n\n \n \n \n @if (!enableFormatDetection) {\n \n }\n \n \n \n \n\n","export const copyTextToClipboard = async (text: string) => {\n try {\n await navigator.clipboard.writeText(text);\n } catch {\n throw new Error('Not able to copy');\n }\n};\n\nexport const pxToPt = (px: string): number | null => (isNaN(Number(px)) ? null : (parseInt(px, 10) * 3) / 4);\n\nexport interface Margin {\n m?: string;\n mx?: string;\n my?: string;\n mt?: string;\n mr?: string;\n mb?: string;\n ml?: string;\n}\n\nexport const withMargin = (props: Margin) =>\n [\n withSpace(props.m, ['margin']),\n withSpace(props.mx, ['marginLeft', 'marginRight']),\n withSpace(props.my, ['marginTop', 'marginBottom']),\n withSpace(props.mt, ['marginTop']),\n withSpace(props.mr, ['marginRight']),\n withSpace(props.mb, ['marginBottom']),\n withSpace(props.ml, ['marginLeft']),\n ].filter((s) => Object.keys(s).length)[0];\n\nconst withSpace = (value: string | undefined, properties: string[]) => {\n return properties.reduce((styles, property) => {\n if (value) {\n return { ...styles, [property]: `${value}px` };\n }\n return styles;\n }, {});\n};\n\n// https://stackoverflow.com/a/61410824\n\nexport const styleToString = (style: Record | undefined | null) => {\n if (!style) return '';\n return Object.keys(style).reduce(\n (acc, key) =>\n acc +\n key\n .split(/(?=[A-Z])/)\n .join('-')\n .toLowerCase() +\n ':' +\n style[key] +\n ';',\n '',\n );\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const classToString = (style: string | string[] | Set | Record | null | undefined) => {\n if (!style) return '';\n if (typeof style === 'string') return style;\n if (Array.isArray(style)) return style.join(' ');\n return Object.keys(style).reduce(\n (acc, key) =>\n acc +\n key\n .split(/(?=[A-Z])/)\n .join('-')\n .toLowerCase() +\n ':' +\n style[key as keyof typeof style] +\n ';',\n '',\n );\n};\n\nexport const unreachable = (\n condition: never,\n message = `Entered unreachable code. Received '${condition}'.`,\n): never => {\n throw new TypeError(message);\n};\n\nexport const HTMLElements = [\n '!DOCTYPE',\n 'a',\n 'abbr',\n 'abbr',\n //\"acronym\", // NOT HTML5\n 'address',\n //\"applet\", // NOT HTML5 (NOT MAJORLY SUPPORTED)\n 'area',\n 'article',\n 'aside',\n 'audio',\n 'b',\n 'base',\n //\"basefont\", // NOT HTML5\n 'bdi',\n 'bdo',\n //\"big\", // NOT HTML5\n 'blockquote',\n 'body',\n 'br',\n 'button',\n 'canvas',\n 'caption',\n //\"center\", // NOT HTML5\n 'cite',\n 'code',\n 'col',\n 'colgroup',\n 'data',\n 'datalist',\n 'dd',\n 'del',\n 'details',\n 'dfn',\n 'dialog',\n //\"dir\", NOT HTML5 (use \"ul\" instead)\n 'div',\n 'dl',\n 'dt',\n 'em',\n 'embed',\n 'fieldset',\n 'figcaption',\n 'figure',\n //\"font\", // NOT HTML5 (use CSS)\n 'footer',\n 'form',\n //\"frame\", // NOT HTML5\n //\"frameset\", // NOT HTML5\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'h5',\n 'h6',\n 'head',\n 'header',\n 'hr',\n 'html',\n 'i',\n 'iframe',\n 'img',\n 'input',\n 'ins',\n 'kbd',\n 'label',\n 'legend',\n 'li',\n 'link',\n 'main',\n 'map',\n 'mark',\n 'meta',\n 'meter',\n 'nav',\n //\"noframes\", // NOT HTML5\n 'noscript',\n 'object',\n 'ol',\n 'optgroup',\n 'option',\n 'output',\n 'p',\n 'param',\n 'picture',\n 'pre',\n 'progress',\n 'q',\n 'rp',\n 'rt',\n 'ruby',\n 's',\n 'samp',\n 'script',\n 'section',\n 'select',\n 'small',\n 'source',\n 'span',\n //\"strike\", NOT HTML5 (Use or instead)\n 'strong',\n 'style',\n 'sub',\n 'summary',\n 'sup',\n 'svg',\n 'table',\n 'tbody',\n 'td',\n 'template',\n 'textarea',\n 'tfoot',\n 'th',\n 'thead',\n 'time',\n 'title',\n 'tr',\n 'track',\n //\"tt\", // NOT HTML5 (Use CSS)\n 'u',\n 'ul',\n 'var',\n 'video',\n 'wbr',\n // xml\n 'xml',\n 'o:OfficeDocumentSettings',\n 'o:AllowPNG',\n 'o:PixelsPerInch',\n 'angular-email-raw',\n];\n\nconst START_TAG = '__COMMENT_START';\nconst END_TAG = '__COMMENT_END';\nexport function escapeForRawComponent(input: string): string {\n // escape comment sequences\n return input.replace(//g, END_TAG);\n}\n\nexport function unescapeForRawComponent(input: string): string {\n return input.replace(new RegExp(START_TAG, 'g'), '');\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { styleToString, withMargin } from '../../utils';\n\n@Component({\n selector: 'ng-email-heading',\n templateUrl: 'heading.component.html',\n imports: [NgTemplateOutlet],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HeadingComponent {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n $style = input | null | undefined>(null, { alias: 'style' });\n $styleClass = input(undefined, { alias: 'styleClass' });\n $as = input<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>('h1', { alias: 'as' });\n $m = input(undefined, { alias: 'm' });\n $mx = input(undefined, { alias: 'mx' });\n $my = input(undefined, { alias: 'my' });\n $mt = input(undefined, { alias: 'mt' });\n $mr = input(undefined, { alias: 'mr' });\n $mb = input(undefined, { alias: 'mb' });\n $ml = input(undefined, { alias: 'ml' });\n $headingStyle = computed(() => {\n return styleToString({\n ...withMargin({\n m: this.$m(),\n mx: this.$mx(),\n my: this.$my(),\n mt: this.$mt(),\n mr: this.$mr(),\n mb: this.$mb(),\n ml: this.$ml(),\n }),\n ...(this.$style() ?? {}),\n });\n });\n}\n","@let heading = $as();\n@let style = $headingStyle();\n@let styleClass = $styleClass();\n@if (heading === 'h1') {\n \n \n \n} @else if (heading === 'h2') {\n \n \n \n} @else if (heading === 'h3') {\n \n \n \n} @else if (heading === 'h4') {\n \n \n \n} @else if (heading === 'h5') {\n \n \n \n} @else if (heading === 'h6') {\n \n \n \n} @else {\n \n}\n\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\n@Component({\n selector: 'ng-email-hr',\n templateUrl: 'hr.component.html',\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HrComponent {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n $style = input | null | undefined>(null, { alias: 'style' });\n $styleClass = input(undefined, { alias: 'styleClass' });\n $disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });\n $hrStyle = computed(() => {\n return {\n ...(this.$disableDefaultStyle()\n ? {}\n : {\n width: '100%',\n border: 'none',\n borderTop: '1px solid #eaeaea',\n }),\n ...(this.$style() ?? {}),\n };\n });\n}\n","\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n@Component({\n selector: 'ng-email-html',\n templateUrl: 'html.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HtmlComponent {\n $lang = input('en', { alias: 'lang' });\n $dir = input('ltr', { alias: 'dir' });\n $enableVML = input(true, { alias: 'enableVML' });\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n $style = input | null | undefined>(null, { alias: 'style' });\n $styleClass = input(undefined, { alias: 'styleClass' });\n}\n","@let enableVML = $enableVML();\n@let lang = $lang();\n@let dir = $dir();\n\n\n \n\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\n@Component({\n selector: 'ng-email-img',\n templateUrl: 'img.component.html',\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ImgComponent {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n $style = input | null | undefined>(null, { alias: 'style' });\n $styleClass = input(undefined, { alias: 'styleClass' });\n $disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });\n $alt = input('', { alias: 'alt' });\n $src = input('', { alias: 'src' });\n $width = input('0', { alias: 'width' });\n $height = input('0', { alias: 'height' });\n $imageStyle = computed(() => {\n return {\n ...(this.$disableDefaultStyle()\n ? {}\n : {\n display: 'block',\n outline: 'none',\n border: 'none',\n textDecoration: 'none',\n }),\n ...(this.$style() ?? {}),\n };\n });\n}\n","\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\n@Component({\n selector: 'ng-email-link',\n templateUrl: 'link.component.html',\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LinkComponent {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n $style = input | null | undefined>(null, { alias: 'style' });\n $styleClass = input(undefined, { alias: 'styleClass' });\n $disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });\n $href = input('', { alias: 'href' });\n $target = input('_blank', { alias: 'target' });\n $linkStyle = computed(() => {\n return {\n ...(this.$disableDefaultStyle()\n ? {}\n : {\n color: '#067df7',\n textDecoration: 'none',\n }),\n ...(this.$style() ?? {}),\n };\n });\n}\n","\n","import { ChangeDetectionStrategy, Component, computed, CUSTOM_ELEMENTS_SCHEMA, input } from '@angular/core';\nimport { escapeForRawComponent } from '../../utils';\n\n@Component({\n selector: 'ng-email-raw',\n templateUrl: 'raw.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class RawComponent {\n $disablePlainTextOutput = input(false, { alias: 'disablePlainTextOutput' });\n $content = input('', { alias: 'content' });\n $escapingContent = computed(() => ``);\n}\n","\n \n\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { RawComponent } from '../raw/raw.component';\n\n@Component({\n selector: 'ng-email-preview',\n templateUrl: 'preview.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [RawComponent],\n})\nexport class PreviewComponent {\n $preview = input('', { alias: 'preview' });\n\n maxLength = 150;\n $text = computed(() => {\n const preview = this.$preview();\n if (preview.length >= this.maxLength) return null;\n const whiteSpaceCodes = ' ‌​‍‎‏';\n return whiteSpaceCodes.repeat(this.maxLength - preview.length);\n });\n}\n","@let text = $text();\n\n\n {{ $preview() }}\n @if (text) {\n \n }\n\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n@Component({\n selector: 'ng-email-row',\n templateUrl: 'row.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [],\n})\nexport class RowComponent {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n $style = input | null | undefined>(null, { alias: 'style' });\n $styleClass = input(undefined, { alias: 'styleClass' });\n $disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });\n}\n","\n \n \n \n \n \n\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { styleToString } from '../../utils';\n\n@Component({\n selector: 'ng-email-section',\n templateUrl: 'section.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [],\n})\nexport class SectionComponent {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n $style = input | null | undefined>(null, { alias: 'style' });\n $styleClass = input(undefined, { alias: 'styleClass' });\n $sectionStyle = computed(() => {\n return styleToString({\n width: '100%',\n ...(this.$style() ?? {}),\n });\n });\n}\n","\n \n \n \n \n \n \n \n\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\n@Component({\n selector: 'ng-email-text',\n templateUrl: 'text.component.html',\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TextComponent {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n $style = input | null | undefined>(null, { alias: 'style' });\n $styleClass = input(undefined, { alias: 'styleClass' });\n $disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });\n $textStyle = computed(() => {\n return {\n ...(this.$disableDefaultStyle()\n ? {}\n : {\n fontSize: '14px',\n lineHeight: '24px',\n margin: '16px 0',\n }),\n ...(this.$style() ?? {}),\n };\n });\n}\n","\n \n

\n","/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport { provideZonelessChangeDetection, Type } from '@angular/core';\nimport { bootstrapApplication, BootstrapContext } from '@angular/platform-browser';\nimport { renderApplication } from '@angular/platform-server';\nimport { provideServerRendering } from '@angular/ssr';\nimport * as cheerio from 'cheerio/slim';\nimport { convert } from 'html-to-text';\nimport juice from 'juice';\nimport prettyPrint from 'pretty';\nimport { HTMLElements, unescapeForRawComponent } from './utils';\n\ntype Render> = {\n component: Type;\n /** Component selector */\n selector: string;\n props?: Input;\n options?: {\n plainText?: boolean;\n pretty?: boolean;\n cssProcessor?: (css: string, html: string) => Promise;\n signalInputsPrefix?: string;\n };\n};\n\n/**\n * Renders an Angular component to HTML and applies transformations.\n *\n * @param component - The Angular component to render.\n * @param selector - The Component selector.\n * @param options - Optional rendering options.\n *\n * @returns {Promise} The rendered HTML or plain text.\n */\nexport const render = async >({\n component,\n selector,\n props,\n options,\n}: Render) => {\n const __originalConsoleLog = console.log;\n console.log = (\n (log) =>\n (...args) => {\n if (args[0] !== 'Angular is running in development mode.') log(...args);\n }\n )(console.log);\n try {\n const { style, html: normalizedHtml } = await renderNgComponent(\n component,\n selector,\n props,\n options?.signalInputsPrefix,\n );\n const html = applyHtmlTransformations(normalizedHtml);\n\n if (options?.plainText) {\n return renderAsPlainText(html);\n }\n const cssProcessor = options?.cssProcessor;\n const css = await parseStyles(style, html, cssProcessor);\n const doctype =\n '';\n\n const markup = await inlineCss(html, css, !!options?.pretty);\n const document = `${doctype}${markup}`;\n return document;\n } finally {\n console.log = __originalConsoleLog;\n }\n};\n\nexport type RenderToHtml> = (props?: Input) => ReturnType;\n\n/**\n * Converts the given markup string to plain text while skipping certain elements.\n *\n * @param markup - The HTML markup string to be converted to plain text.\n * @returns The plain text representation of the given markup.\n *\n * The conversion skips the following elements:\n * - `` tags\n * - Elements with the ID `__angular-email-preview`\n */\nconst renderAsPlainText = (markup: string) => {\n return convert(markup, {\n decodeEntities: true,\n formatters: {\n raw: (elem, _walk, builder) => {\n if (elem.children.length && elem.children[0].type === 'comment') {\n builder.addInline(unescapeForRawComponent(elem.children[0].data!.trim()));\n }\n },\n },\n selectors: [\n { selector: '[data-skip=\"true\"]', format: 'skip' },\n { selector: 'img', format: 'skip' },\n { selector: '#__angular-email-preview', format: 'skip' },\n {\n format: 'raw',\n options: {},\n selector: 'angular-email-raw',\n },\n { selector: 'h1', format: 'heading', options: { leadingLineBreaks: 3, trailingLineBreaks: 2, uppercase: false } },\n { selector: 'h2', format: 'heading', options: { leadingLineBreaks: 3, trailingLineBreaks: 2, uppercase: false } },\n { selector: 'h3', format: 'heading', options: { leadingLineBreaks: 3, trailingLineBreaks: 2, uppercase: false } },\n { selector: 'h4', format: 'heading', options: { leadingLineBreaks: 2, trailingLineBreaks: 2, uppercase: false } },\n { selector: 'h5', format: 'heading', options: { leadingLineBreaks: 2, trailingLineBreaks: 2, uppercase: false } },\n { selector: 'h6', format: 'heading', options: { leadingLineBreaks: 2, trailingLineBreaks: 2, uppercase: false } },\n ],\n });\n};\n\n/**\n * Renders an Angular component to html.\n *\n * @param component - The Angular component to render.\n * @param selector - The CSS selector for the component.\n * @returns A promise that resolves to the rendered HTML string.\n */\nconst renderNgComponent = async (\n component: Type,\n selector: string,\n props?: Record,\n signalInputsPrefix?: string,\n) => {\n const bootstrap = async (context?: BootstrapContext) => {\n const appRef = await bootstrapApplication(\n component,\n {\n providers: [provideZonelessChangeDetection(), provideServerRendering()],\n },\n context,\n );\n appRef.components.forEach((componentRef) => {\n Object.entries(props ?? {}).forEach(([key, value]) => {\n if (key in componentRef.instance || `${signalInputsPrefix ?? ''}${key}` in componentRef.instance) {\n componentRef.setInput(key, value);\n }\n });\n componentRef.changeDetectorRef.detectChanges();\n });\n return appRef;\n };\n const ngHtml = await renderApplication(bootstrap, {\n document: `<${selector}>`,\n });\n const $ = cheerio.load(ngHtml, {\n xml: { lowerCaseAttributeNames: false, lowerCaseTags: false },\n });\n let style: string = '';\n $('style').each(function () {\n const content = $(this).html();\n if (content) {\n style += `\\n${content}`;\n }\n });\n const html = normalizeNgHtml(ngHtml, selector);\n return { style, html };\n};\n\n/**\n * Normalizes the provided HTML string by extracting the content within the specified selector\n * and removing any non-standard HTML elements.\n *\n * @param html - The HTML string to be normalized.\n * @param selector - The CSS selector used to identify the content to be extracted.\n * @returns The normalized HTML string with the content of the specified selector and without non-standard HTML elements.\n */\nconst normalizeNgHtml = (html: string, selector: string): string => {\n const nsHtmlRegex = new RegExp(`<(?!(\\\\/?(${HTMLElements.join('|')})(?![-\\\\w])))[^>]+>`, 'gm');\n return html\n .replace(new RegExp(`[\\\\s\\\\S]*?<${selector}[\\\\s\\\\S]*?>([\\\\s\\\\S]*?)<\\\\/${selector}>[\\\\s\\\\S]*?.+`, 'gm'), '$1')\n .replace(nsHtmlRegex, '');\n};\n\n/**\n * Applies HTML transformations to the provided HTML string.\n *\n * This function uses Cheerio to load the HTML and perform transformations such as\n * replacing placeholders and applying styles from the provided CSS file paths.\n * It also ensures that certain HTML entities are replaced with their corresponding\n * characters.\n *\n * @param html - The HTML string to transform.\n * @param cssFilePaths - An optional array of CSS file paths to apply styles from.\n * @returns The transformed HTML string.\n */\nconst applyHtmlTransformations = (html: string) => {\n const $ = cheerio.load(html);\n replacePlaceholders($);\n\n return $.html()\n .replace(/\\s+/g, ' ')\n .replace(/>\\s+<')\n .replaceAll('<', '<')\n .replaceAll('>', '>')\n .replaceAll('$', '$');\n};\n\n/**\n * Replaces elements with the `data-html` attribute with their corresponding HTML content.\n *\n * This function iterates over all elements that have the `data-html` attribute,\n * retrieves the value of the attribute, and replaces the element with the HTML content\n * specified in the attribute.\n *\n * @param $ - The Cheerio API instance used to manipulate the HTML.\n */\nconst replacePlaceholders = ($: cheerio.CheerioAPI) => {\n $('[data-html]').each(function () {\n const content = $(this).attr('data-html');\n if (content) {\n $(this).replaceWith(`${content}`);\n }\n });\n};\n\n/**\n * Applies the styles from the specified CSS file paths to the HTML document.\n *\n * @param style - The raw content of