@keycloakify/angular-email 0.0.1-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +21 -0
- package/README.md +86 -0
- package/esbuild/esbuild.d.ts +1 -0
- package/esbuild/index.d.ts +1 -0
- package/fesm2022/keycloakify-angular-email-esbuild.mjs +28 -0
- package/fesm2022/keycloakify-angular-email-esbuild.mjs.map +1 -0
- package/fesm2022/keycloakify-angular-email.mjs +606 -0
- package/fesm2022/keycloakify-angular-email.mjs.map +1 -0
- package/index.d.ts +18 -0
- package/lib/components/background/background.component.d.ts +14 -0
- package/lib/components/body/body.component.d.ts +5 -0
- package/lib/components/button/button.component.d.ts +54 -0
- package/lib/components/color-scheme/color-scheme.component.d.ts +34 -0
- package/lib/components/column/column.component.d.ts +8 -0
- package/lib/components/conditional/conditional.component.d.ts +12 -0
- package/lib/components/container/container.component.d.ts +19 -0
- package/lib/components/head/head.component.d.ts +7 -0
- package/lib/components/heading/heading.component.d.ts +15 -0
- package/lib/components/hr/hr.component.d.ts +12 -0
- package/lib/components/html/html.component.d.ts +8 -0
- package/lib/components/img/img.component.d.ts +17 -0
- package/lib/components/link/link.component.d.ts +13 -0
- package/lib/components/preview/preview.component.d.ts +7 -0
- package/lib/components/section/section.component.d.ts +7 -0
- package/lib/components/text/text.component.d.ts +12 -0
- package/lib/render.d.ts +12 -0
- package/lib/utils.d.ts +16 -0
- package/package.json +53 -0
|
@@ -0,0 +1,606 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, computed, Component, ChangeDetectionStrategy, effect, CUSTOM_ELEMENTS_SCHEMA, inject, NO_ERRORS_SCHEMA, provideExperimentalZonelessChangeDetection } from '@angular/core';
|
|
3
|
+
import { NgTemplateOutlet, DOCUMENT } from '@angular/common';
|
|
4
|
+
import { bootstrapApplication } from '@angular/platform-browser';
|
|
5
|
+
import { provideServerRendering, renderApplication } from '@angular/platform-server';
|
|
6
|
+
import * as cheerio from 'cheerio';
|
|
7
|
+
import { convert } from 'html-to-text';
|
|
8
|
+
import pretty from 'pretty';
|
|
9
|
+
|
|
10
|
+
class BackgroundComponent {
|
|
11
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
12
|
+
$backgroundStyle = input(null, { alias: 'backgroundStyle' });
|
|
13
|
+
$width = input(0, { alias: 'width' });
|
|
14
|
+
$height = input(0, { alias: 'height' });
|
|
15
|
+
$src = input(undefined, { alias: 'src' });
|
|
16
|
+
$bgRepeat = input('no-repeat', { alias: 'bgRepeat' });
|
|
17
|
+
$bgColor = input(undefined, { alias: 'bgColor' });
|
|
18
|
+
$style = computed(() => ({ backgroundRepeat: this.$bgRepeat(), ...(this.$backgroundStyle() ?? {}) }));
|
|
19
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: BackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: BackgroundComponent, isStandalone: true, selector: "ng-email-background", inputs: { $backgroundStyle: { classPropertyName: "$backgroundStyle", publicName: "backgroundStyle", isSignal: true, isRequired: false, transformFunction: null }, $width: { classPropertyName: "$width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, $height: { classPropertyName: "$height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, $src: { classPropertyName: "$src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, $bgRepeat: { classPropertyName: "$bgRepeat", publicName: "bgRepeat", isSignal: true, isRequired: false, transformFunction: null }, $bgColor: { classPropertyName: "$bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let width = $width();\n@let height = $height();\n\n<table\n [cellPadding]=\"0\"\n [cellSpacing]=\"0\"\n [border]=\"0\"\n width=\"100%\"\n [attr.height]=\"height\"\n role=\"presentation\"\n>\n <tr>\n <td\n [align]=\"'top'\"\n [width]=\"width\"\n [height]=\"height && width ? height : undefined\"\n [attr.bgcolor]=\"$bgColor()\"\n [attr.background]=\"$src()\"\n [style]=\"$style()\"\n >\n <ng-content />\n </td>\n </tr>\n</table>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
21
|
+
}
|
|
22
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: BackgroundComponent, decorators: [{
|
|
23
|
+
type: Component,
|
|
24
|
+
args: [{ selector: 'ng-email-background', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "@let width = $width();\n@let height = $height();\n\n<table\n [cellPadding]=\"0\"\n [cellSpacing]=\"0\"\n [border]=\"0\"\n width=\"100%\"\n [attr.height]=\"height\"\n role=\"presentation\"\n>\n <tr>\n <td\n [align]=\"'top'\"\n [width]=\"width\"\n [height]=\"height && width ? height : undefined\"\n [attr.bgcolor]=\"$bgColor()\"\n [attr.background]=\"$src()\"\n [style]=\"$style()\"\n >\n <ng-content />\n </td>\n </tr>\n</table>\n" }]
|
|
25
|
+
}] });
|
|
26
|
+
|
|
27
|
+
class BodyComponent {
|
|
28
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: BodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
29
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: BodyComponent, isStandalone: true, selector: "ng-email-body", ngImport: i0, template: "<body>\n <ng-content />\n</body>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
30
|
+
}
|
|
31
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: BodyComponent, decorators: [{
|
|
32
|
+
type: Component,
|
|
33
|
+
args: [{ selector: 'ng-email-body', changeDetection: ChangeDetectionStrategy.OnPush, template: "<body>\n <ng-content />\n</body>\n" }]
|
|
34
|
+
}] });
|
|
35
|
+
|
|
36
|
+
class ButtonComponent {
|
|
37
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
38
|
+
$buttonStyle = input(null, { alias: 'buttonStyle' });
|
|
39
|
+
$href = input(undefined, { alias: 'href' });
|
|
40
|
+
$width = input(undefined, { alias: 'width' });
|
|
41
|
+
$height = input(undefined, { alias: 'height' });
|
|
42
|
+
$borderRadius = input(0, { alias: 'borderRadius' });
|
|
43
|
+
$textColor = input(undefined, { alias: 'textColor' });
|
|
44
|
+
$backgroundColor = input(undefined, { alias: 'backgroundColor' });
|
|
45
|
+
$borderColor = input(undefined, { alias: 'borderColor' });
|
|
46
|
+
$borderSize = input(1, { alias: 'borderSize' });
|
|
47
|
+
$fontSize = input(16, { alias: 'fontSize' });
|
|
48
|
+
$align = input('left', { alias: 'align' });
|
|
49
|
+
$withBackground = input(false, { alias: 'withBackground' });
|
|
50
|
+
$arcsize = computed(() => Math.floor((this.$borderRadius() / (this.$height() ?? 1)) * 100));
|
|
51
|
+
$lineHeight = computed(() => this.$borderSize() ? (this.$height() ?? 0) - 2 * this.$borderSize() : (this.$height() ?? 0));
|
|
52
|
+
$baseStyle = computed(() => ({
|
|
53
|
+
'-webkit-text-size-adjust': 'none',
|
|
54
|
+
borderRadius: this.$borderRadius(),
|
|
55
|
+
display: 'inline-block',
|
|
56
|
+
fontSize: this.$fontSize(),
|
|
57
|
+
lineHeight: `${this.$lineHeight()}px`,
|
|
58
|
+
maxWidth: this.$width(),
|
|
59
|
+
textAlign: 'center',
|
|
60
|
+
textDecoration: 'none',
|
|
61
|
+
width: '100%',
|
|
62
|
+
}));
|
|
63
|
+
$borderStyles = computed(() => ({
|
|
64
|
+
border: `${this.$borderSize()}px solid ${this.$borderColor()}`,
|
|
65
|
+
msoBorderAlt: 'none',
|
|
66
|
+
}));
|
|
67
|
+
$propStyles = computed(() => ({
|
|
68
|
+
// border styles
|
|
69
|
+
...(this.$borderColor() ? this.$borderStyles() : {}),
|
|
70
|
+
// background styles
|
|
71
|
+
...(this.$backgroundColor() ? { backgroundColor: this.$backgroundColor() } : {}),
|
|
72
|
+
// text styles
|
|
73
|
+
...(this.$textColor() ? { color: this.$textColor() } : {}),
|
|
74
|
+
}));
|
|
75
|
+
$withBackgroundStyle = computed(() => ({
|
|
76
|
+
...this.$baseStyle(),
|
|
77
|
+
// background styles
|
|
78
|
+
...(this.$backgroundColor() ? { backgroundColor: this.$backgroundColor() } : {}),
|
|
79
|
+
// text styles
|
|
80
|
+
...(this.$textColor() ? { color: this.$textColor() } : {}),
|
|
81
|
+
...(this.$buttonStyle() ?? {}),
|
|
82
|
+
...(this.$withBackground() ? {} : { msoHide: 'all' }),
|
|
83
|
+
}));
|
|
84
|
+
$withoutBackgroundStyle = computed(() => ({
|
|
85
|
+
...this.$baseStyle(),
|
|
86
|
+
// background styles
|
|
87
|
+
...this.$propStyles(),
|
|
88
|
+
...(this.$buttonStyle() ?? {}),
|
|
89
|
+
...(this.$withBackground() ? {} : { msoHide: 'all' }),
|
|
90
|
+
}));
|
|
91
|
+
$noBgInnerHtmlPre = computed(() => `<!--[if mso]>
|
|
92
|
+
<v:roundrect href="${this.$href()}" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:${this.$height()}px;v-text-anchor:middle;width:${this.$width()}px;" arcsize="${this.$arcsize()}%" ${this.$borderColor() ? `strokecolor=${this.$borderColor()}` : ''} ${this.$borderSize() ? `strokeweight="${this.$borderSize()}px"` : `stroke="false"`} ${this.$backgroundColor() ? `fillcolor=${this.$backgroundColor()}` : `fill="false"`}>
|
|
93
|
+
<w:anchorlock/>
|
|
94
|
+
<center style="font-size:${this.$fontSize()}px;${this.$textColor() ? `color:${this.$textColor()};` : ''}">`);
|
|
95
|
+
$noBgInnerHtmlPost = computed(() => `</center></v:roundrect>
|
|
96
|
+
<![endif]-->`);
|
|
97
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
98
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: ButtonComponent, isStandalone: true, selector: "ng-email-button", inputs: { $buttonStyle: { classPropertyName: "$buttonStyle", publicName: "buttonStyle", isSignal: true, isRequired: false, transformFunction: null }, $href: { classPropertyName: "$href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, $width: { classPropertyName: "$width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, $height: { classPropertyName: "$height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, $borderRadius: { classPropertyName: "$borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, $textColor: { classPropertyName: "$textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, $backgroundColor: { classPropertyName: "$backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, $borderColor: { classPropertyName: "$borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, $borderSize: { classPropertyName: "$borderSize", publicName: "borderSize", isSignal: true, isRequired: false, transformFunction: null }, $fontSize: { classPropertyName: "$fontSize", publicName: "fontSize", isSignal: true, isRequired: false, transformFunction: null }, $align: { classPropertyName: "$align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, $withBackground: { classPropertyName: "$withBackground", publicName: "withBackground", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@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<table\n [width]=\"'100%'\"\n [border]=\"0\"\n [cellPadding]=\"0\"\n [cellSpacing]=\"0\"\n style=\"border-collapse: collapse\"\n role=\"presentation\"\n>\n <tr>\n <td [align]=\"align\">\n @if (withBackground) {\n <table\n [align]=\"align\"\n [width]=\"width\"\n [border]=\"0\"\n [cellPadding]=\"0\"\n [cellSpacing]=\"0\"\n role=\"presentation\"\n [style]=\"{\n border: $borderSize() + 'px solid ' + ($borderColor() ?? 'inherit'),\n borderRadius,\n }\"\n >\n <tr>\n <td\n [attr.bgcolor]=\"$backgroundColor()\"\n [width]=\"width\"\n [height]=\"height\"\n [style]=\"{\n borderRadius,\n height,\n width,\n maxWidth: width,\n textAlign: 'center',\n }\"\n >\n <a\n [href]=\"href\"\n [style]=\"$withBackgroundStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </a>\n </td>\n </tr>\n </table>\n } @else {\n <noscript [attr.data-html]=\"$noBgInnerHtmlPre()\"></noscript>\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n <noscript [attr.data-html]=\"$noBgInnerHtmlPost()\"></noscript>\n <a\n [href]=\"href\"\n [style]=\"$withoutBackgroundStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </a>\n }\n </td>\n </tr>\n</table>\n\n<ng-template #content><ng-content></ng-content></ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
99
|
+
}
|
|
100
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
101
|
+
type: Component,
|
|
102
|
+
args: [{ selector: 'ng-email-button', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@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<table\n [width]=\"'100%'\"\n [border]=\"0\"\n [cellPadding]=\"0\"\n [cellSpacing]=\"0\"\n style=\"border-collapse: collapse\"\n role=\"presentation\"\n>\n <tr>\n <td [align]=\"align\">\n @if (withBackground) {\n <table\n [align]=\"align\"\n [width]=\"width\"\n [border]=\"0\"\n [cellPadding]=\"0\"\n [cellSpacing]=\"0\"\n role=\"presentation\"\n [style]=\"{\n border: $borderSize() + 'px solid ' + ($borderColor() ?? 'inherit'),\n borderRadius,\n }\"\n >\n <tr>\n <td\n [attr.bgcolor]=\"$backgroundColor()\"\n [width]=\"width\"\n [height]=\"height\"\n [style]=\"{\n borderRadius,\n height,\n width,\n maxWidth: width,\n textAlign: 'center',\n }\"\n >\n <a\n [href]=\"href\"\n [style]=\"$withBackgroundStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </a>\n </td>\n </tr>\n </table>\n } @else {\n <noscript [attr.data-html]=\"$noBgInnerHtmlPre()\"></noscript>\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n <noscript [attr.data-html]=\"$noBgInnerHtmlPost()\"></noscript>\n <a\n [href]=\"href\"\n [style]=\"$withoutBackgroundStyle()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </a>\n }\n </td>\n </tr>\n</table>\n\n<ng-template #content><ng-content></ng-content></ng-template>\n" }]
|
|
103
|
+
}] });
|
|
104
|
+
|
|
105
|
+
class ColorSchemeComponent {
|
|
106
|
+
$mode = input('normal', { alias: 'mode' });
|
|
107
|
+
$style = computed(() => `<style>:root { color-scheme: ${this.$mode()}; supported-color-schemes: ${this.$mode()}; }</style>`);
|
|
108
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ColorSchemeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
109
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: ColorSchemeComponent, isStandalone: true, selector: "ng-email-color-scheme", inputs: { $mode: { classPropertyName: "$mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let mode = $mode();\n\n<meta\n name=\"color-scheme\"\n [content]=\"mode\"\n/>\n<meta\n name=\"supported-color-schemes\"\n [content]=\"mode\"\n/>\n<noscript [attr.data-html]=\"$style()\"></noscript>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
110
|
+
}
|
|
111
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ColorSchemeComponent, decorators: [{
|
|
112
|
+
type: Component,
|
|
113
|
+
args: [{ selector: 'ng-email-color-scheme', changeDetection: ChangeDetectionStrategy.OnPush, template: "@let mode = $mode();\n\n<meta\n name=\"color-scheme\"\n [content]=\"mode\"\n/>\n<meta\n name=\"supported-color-schemes\"\n [content]=\"mode\"\n/>\n<noscript [attr.data-html]=\"$style()\"></noscript>\n" }]
|
|
114
|
+
}] });
|
|
115
|
+
|
|
116
|
+
class ColumnComponent {
|
|
117
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
118
|
+
$columnStyle = input(null, { alias: 'columnStyle' });
|
|
119
|
+
$bgImage = input(undefined, { alias: 'bgImage' });
|
|
120
|
+
$bgColor = input(undefined, { alias: 'bgColor' });
|
|
121
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
122
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: ColumnComponent, isStandalone: true, selector: "ng-email-column", inputs: { $columnStyle: { classPropertyName: "$columnStyle", publicName: "columnStyle", isSignal: true, isRequired: false, transformFunction: null }, $bgImage: { classPropertyName: "$bgImage", publicName: "bgImage", isSignal: true, isRequired: false, transformFunction: null }, $bgColor: { classPropertyName: "$bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<td\n [attr.background]=\"$bgImage()\"\n [attr.bgcolor]=\"$bgColor()\"\n [style]=\"$columnStyle()\"\n role=\"presentation\"\n>\n <ng-content />\n</td>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
123
|
+
}
|
|
124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ColumnComponent, decorators: [{
|
|
125
|
+
type: Component,
|
|
126
|
+
args: [{ selector: 'ng-email-column', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<td\n [attr.background]=\"$bgImage()\"\n [attr.bgcolor]=\"$bgColor()\"\n [style]=\"$columnStyle()\"\n role=\"presentation\"\n>\n <ng-content />\n</td>\n" }]
|
|
127
|
+
}] });
|
|
128
|
+
|
|
129
|
+
class ConditionalComponent {
|
|
130
|
+
$expression = input(undefined, { alias: 'expression' });
|
|
131
|
+
$mso = input(undefined, { alias: 'mso' });
|
|
132
|
+
noMsoInnerHtmlPre = '<!--[if !mso]><!-->';
|
|
133
|
+
noMsoInnerHtmlPost = '<!--<![endif]-->';
|
|
134
|
+
$msoInnerHtmlPre = computed(() => `<!--[if ${this.$expression() ?? 'mso'}]>`);
|
|
135
|
+
msoInnerHtmlPost = '<![endif]-->';
|
|
136
|
+
constructor() {
|
|
137
|
+
effect(() => {
|
|
138
|
+
if (typeof this.$expression() === 'undefined' && typeof this.$mso() === 'undefined')
|
|
139
|
+
throw new RangeError('angular-email: Conditional expects the `expression` or `mso` prop to be defined');
|
|
140
|
+
if (typeof this.$expression() !== 'undefined' && typeof this.$mso() !== 'undefined')
|
|
141
|
+
throw new RangeError('angular-email: Conditional expects the `expression` or `mso` prop to be defined, not both');
|
|
142
|
+
});
|
|
143
|
+
}
|
|
144
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ConditionalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
145
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: ConditionalComponent, isStandalone: true, selector: "ng-email-conditional", inputs: { $expression: { classPropertyName: "$expression", publicName: "expression", isSignal: true, isRequired: false, transformFunction: null }, $mso: { classPropertyName: "$mso", publicName: "mso", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let mso = $mso();\n\n@if (!mso) {\n <noscript [attr.data-html]=\"noMsoInnerHtmlPre\"></noscript>\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n <noscript [attr.data-html]=\"noMsoInnerHtmlPost\"></noscript>\n} @else {\n <noscript [attr.data-html]=\"$msoInnerHtmlPre()\"></noscript>\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n <noscript [attr.data-html]=\"msoInnerHtmlPost\"></noscript>\n}\n<ng-template #content><ng-content></ng-content></ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
146
|
+
}
|
|
147
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ConditionalComponent, decorators: [{
|
|
148
|
+
type: Component,
|
|
149
|
+
args: [{ selector: 'ng-email-conditional', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@let mso = $mso();\n\n@if (!mso) {\n <noscript [attr.data-html]=\"noMsoInnerHtmlPre\"></noscript>\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n <noscript [attr.data-html]=\"noMsoInnerHtmlPost\"></noscript>\n} @else {\n <noscript [attr.data-html]=\"$msoInnerHtmlPre()\"></noscript>\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n <noscript [attr.data-html]=\"msoInnerHtmlPost\"></noscript>\n}\n<ng-template #content><ng-content></ng-content></ng-template>\n" }]
|
|
150
|
+
}], ctorParameters: () => [] });
|
|
151
|
+
|
|
152
|
+
class ContainerComponent {
|
|
153
|
+
random = Math.random();
|
|
154
|
+
document = inject(DOCUMENT);
|
|
155
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
156
|
+
$containerStyle = input(null, { alias: 'containerStyle' });
|
|
157
|
+
$alignment = input('center', { alias: 'alignment' });
|
|
158
|
+
$disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });
|
|
159
|
+
$containerWidth = input(600, { alias: 'containerWidth' });
|
|
160
|
+
$style = computed(() => ({
|
|
161
|
+
...(this.$disableDefaultStyle() ? {} : { maxWidth: `${this.$containerWidth()}px` }),
|
|
162
|
+
...this.$containerStyle(),
|
|
163
|
+
}));
|
|
164
|
+
$trStyle = computed(() => ({
|
|
165
|
+
...(this.$disableDefaultStyle() ? {} : { width: '100%' }),
|
|
166
|
+
}));
|
|
167
|
+
$innerHtmlPre = computed(() => `<!--[if mso]><table align="${this.$alignment()}" width="${this.$containerWidth()}" style="border-spacing: 0; width:${this.$containerWidth()}px;" role="presentation"><tr><td><![endif]-->`);
|
|
168
|
+
$innerHtmlPost = computed(() => `<!--[if mso]></td></tr></table><![endif]-->`);
|
|
169
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
170
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: ContainerComponent, isStandalone: true, selector: "ng-email-container", inputs: { $containerStyle: { classPropertyName: "$containerStyle", publicName: "containerStyle", isSignal: true, isRequired: false, transformFunction: null }, $alignment: { classPropertyName: "$alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, $disableDefaultStyle: { classPropertyName: "$disableDefaultStyle", publicName: "disableDefaultStyle", isSignal: true, isRequired: false, transformFunction: null }, $containerWidth: { classPropertyName: "$containerWidth", publicName: "containerWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let containerWidth = $containerWidth();\n@let alignment = $alignment();\n\n<div [style]=\"{ tableLayout: 'fixed', width: '100%' }\">\n <div [style]=\"{ margin: '0 auto', maxWidth: containerWidth }\">\n <noscript [attr.data-html]=\"$innerHtmlPre()\"></noscript>\n <table\n [align]=\"alignment\"\n [width]=\"'100%'\"\n role=\"presentation\"\n [cellSpacing]=\"0\"\n [cellPadding]=\"0\"\n [border]=\"0\"\n [style]=\"$style()\"\n >\n <tbody>\n <tr [style]=\"$trStyle()\">\n <td [align]=\"alignment\">\n <ng-content></ng-content>\n </td>\n </tr>\n </tbody>\n </table>\n <noscript [attr.data-html]=\"$innerHtmlPost()\"></noscript>\n </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
171
|
+
}
|
|
172
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ContainerComponent, decorators: [{
|
|
173
|
+
type: Component,
|
|
174
|
+
args: [{ selector: 'ng-email-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "@let containerWidth = $containerWidth();\n@let alignment = $alignment();\n\n<div [style]=\"{ tableLayout: 'fixed', width: '100%' }\">\n <div [style]=\"{ margin: '0 auto', maxWidth: containerWidth }\">\n <noscript [attr.data-html]=\"$innerHtmlPre()\"></noscript>\n <table\n [align]=\"alignment\"\n [width]=\"'100%'\"\n role=\"presentation\"\n [cellSpacing]=\"0\"\n [cellPadding]=\"0\"\n [border]=\"0\"\n [style]=\"$style()\"\n >\n <tbody>\n <tr [style]=\"$trStyle()\">\n <td [align]=\"alignment\">\n <ng-content></ng-content>\n </td>\n </tr>\n </tbody>\n </table>\n <noscript [attr.data-html]=\"$innerHtmlPost()\"></noscript>\n </div>\n</div>\n" }]
|
|
175
|
+
}] });
|
|
176
|
+
|
|
177
|
+
class HeadComponent {
|
|
178
|
+
$enableFormatDetection = input(false, { alias: 'enableFormatDetection' });
|
|
179
|
+
xml = `\n<xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>\n`;
|
|
180
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: HeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
181
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: HeadComponent, isStandalone: true, selector: "ng-email-head", inputs: { $enableFormatDetection: { classPropertyName: "$enableFormatDetection", publicName: "enableFormatDetection", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let enableFormatDetection = $enableFormatDetection();\n\n<head>\n <meta\n http-equiv=\"content-type\"\n content=\"text/html; charset=UTF-8\"\n />\n <meta\n name=\"viewport\"\n content=\"width=device-width, initial-scale=1, user-scalable=yes\"\n />\n <meta name=\"x-apple-disable-message-reformatting\" />\n @if (!enableFormatDetection) {\n <meta\n name=\"format-detection\"\n content=\"telephone=no, date=no, address=no, email=no, url=no\"\n />\n }\n <ng-content></ng-content>\n <ng-email-conditional [mso]=\"true\">\n <noscript [attr.data-html]=\"xml\"></noscript>\n </ng-email-conditional>\n</head>\n", dependencies: [{ kind: "component", type: ConditionalComponent, selector: "ng-email-conditional", inputs: ["expression", "mso"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
182
|
+
}
|
|
183
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: HeadComponent, decorators: [{
|
|
184
|
+
type: Component,
|
|
185
|
+
args: [{ selector: 'ng-email-head', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ConditionalComponent], schemas: [NO_ERRORS_SCHEMA], template: "@let enableFormatDetection = $enableFormatDetection();\n\n<head>\n <meta\n http-equiv=\"content-type\"\n content=\"text/html; charset=UTF-8\"\n />\n <meta\n name=\"viewport\"\n content=\"width=device-width, initial-scale=1, user-scalable=yes\"\n />\n <meta name=\"x-apple-disable-message-reformatting\" />\n @if (!enableFormatDetection) {\n <meta\n name=\"format-detection\"\n content=\"telephone=no, date=no, address=no, email=no, url=no\"\n />\n }\n <ng-content></ng-content>\n <ng-email-conditional [mso]=\"true\">\n <noscript [attr.data-html]=\"xml\"></noscript>\n </ng-email-conditional>\n</head>\n" }]
|
|
186
|
+
}] });
|
|
187
|
+
|
|
188
|
+
const copyTextToClipboard = async (text) => {
|
|
189
|
+
try {
|
|
190
|
+
await navigator.clipboard.writeText(text);
|
|
191
|
+
}
|
|
192
|
+
catch {
|
|
193
|
+
throw new Error('Not able to copy');
|
|
194
|
+
}
|
|
195
|
+
};
|
|
196
|
+
const pxToPt = (px) => (isNaN(Number(px)) ? null : (parseInt(px, 10) * 3) / 4);
|
|
197
|
+
const withMargin = (props) => [
|
|
198
|
+
withSpace(props.m, ['margin']),
|
|
199
|
+
withSpace(props.mx, ['marginLeft', 'marginRight']),
|
|
200
|
+
withSpace(props.my, ['marginTop', 'marginBottom']),
|
|
201
|
+
withSpace(props.mt, ['marginTop']),
|
|
202
|
+
withSpace(props.mr, ['marginRight']),
|
|
203
|
+
withSpace(props.mb, ['marginBottom']),
|
|
204
|
+
withSpace(props.ml, ['marginLeft']),
|
|
205
|
+
].filter((s) => Object.keys(s).length)[0];
|
|
206
|
+
const withSpace = (value, properties) => {
|
|
207
|
+
return properties.reduce((styles, property) => {
|
|
208
|
+
if (value) {
|
|
209
|
+
return { ...styles, [property]: `${value}px` };
|
|
210
|
+
}
|
|
211
|
+
return styles;
|
|
212
|
+
}, {});
|
|
213
|
+
};
|
|
214
|
+
// https://stackoverflow.com/a/61410824
|
|
215
|
+
const styleToString = (style) => {
|
|
216
|
+
if (!style)
|
|
217
|
+
return '';
|
|
218
|
+
return Object.keys(style).reduce((acc, key) => acc +
|
|
219
|
+
key
|
|
220
|
+
.split(/(?=[A-Z])/)
|
|
221
|
+
.join('-')
|
|
222
|
+
.toLowerCase() +
|
|
223
|
+
':' +
|
|
224
|
+
style[key] +
|
|
225
|
+
';', '');
|
|
226
|
+
};
|
|
227
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
228
|
+
const classToString = (style) => {
|
|
229
|
+
if (!style)
|
|
230
|
+
return '';
|
|
231
|
+
if (typeof style === 'string')
|
|
232
|
+
return style;
|
|
233
|
+
if (Array.isArray(style))
|
|
234
|
+
return style.join(' ');
|
|
235
|
+
return Object.keys(style).reduce((acc, key) => acc +
|
|
236
|
+
key
|
|
237
|
+
.split(/(?=[A-Z])/)
|
|
238
|
+
.join('-')
|
|
239
|
+
.toLowerCase() +
|
|
240
|
+
':' +
|
|
241
|
+
style[key] +
|
|
242
|
+
';', '');
|
|
243
|
+
};
|
|
244
|
+
const unreachable = (condition, message = `Entered unreachable code. Received '${condition}'.`) => {
|
|
245
|
+
throw new TypeError(message);
|
|
246
|
+
};
|
|
247
|
+
const HTMLElements = [
|
|
248
|
+
'!DOCTYPE',
|
|
249
|
+
'a',
|
|
250
|
+
'abbr',
|
|
251
|
+
'abbr',
|
|
252
|
+
//"acronym", // NOT HTML5
|
|
253
|
+
'address',
|
|
254
|
+
//"applet", // NOT HTML5 (NOT MAJORLY SUPPORTED)
|
|
255
|
+
'area',
|
|
256
|
+
'article',
|
|
257
|
+
'aside',
|
|
258
|
+
'audio',
|
|
259
|
+
'b',
|
|
260
|
+
'base',
|
|
261
|
+
//"basefont", // NOT HTML5
|
|
262
|
+
'bdi',
|
|
263
|
+
'bdo',
|
|
264
|
+
//"big", // NOT HTML5
|
|
265
|
+
'blockquote',
|
|
266
|
+
'body',
|
|
267
|
+
'br',
|
|
268
|
+
'button',
|
|
269
|
+
'canvas',
|
|
270
|
+
'caption',
|
|
271
|
+
//"center", // NOT HTML5
|
|
272
|
+
'cite',
|
|
273
|
+
'code',
|
|
274
|
+
'col',
|
|
275
|
+
'colgroup',
|
|
276
|
+
'data',
|
|
277
|
+
'datalist',
|
|
278
|
+
'dd',
|
|
279
|
+
'del',
|
|
280
|
+
'details',
|
|
281
|
+
'dfn',
|
|
282
|
+
'dialog',
|
|
283
|
+
//"dir", NOT HTML5 (use "ul" instead)
|
|
284
|
+
'div',
|
|
285
|
+
'dl',
|
|
286
|
+
'dt',
|
|
287
|
+
'em',
|
|
288
|
+
'embed',
|
|
289
|
+
'fieldset',
|
|
290
|
+
'figcaption',
|
|
291
|
+
'figure',
|
|
292
|
+
//"font", // NOT HTML5 (use CSS)
|
|
293
|
+
'footer',
|
|
294
|
+
'form',
|
|
295
|
+
//"frame", // NOT HTML5
|
|
296
|
+
//"frameset", // NOT HTML5
|
|
297
|
+
'h1',
|
|
298
|
+
'h2',
|
|
299
|
+
'h3',
|
|
300
|
+
'h4',
|
|
301
|
+
'h5',
|
|
302
|
+
'h6',
|
|
303
|
+
'head',
|
|
304
|
+
'header',
|
|
305
|
+
'hr',
|
|
306
|
+
'html',
|
|
307
|
+
'i',
|
|
308
|
+
'iframe',
|
|
309
|
+
'img',
|
|
310
|
+
'input',
|
|
311
|
+
'ins',
|
|
312
|
+
'kbd',
|
|
313
|
+
'label',
|
|
314
|
+
'legend',
|
|
315
|
+
'li',
|
|
316
|
+
'link',
|
|
317
|
+
'main',
|
|
318
|
+
'map',
|
|
319
|
+
'mark',
|
|
320
|
+
'meta',
|
|
321
|
+
'meter',
|
|
322
|
+
'nav',
|
|
323
|
+
//"noframes", // NOT HTML5
|
|
324
|
+
'noscript',
|
|
325
|
+
'object',
|
|
326
|
+
'ol',
|
|
327
|
+
'optgroup',
|
|
328
|
+
'option',
|
|
329
|
+
'output',
|
|
330
|
+
'p',
|
|
331
|
+
'param',
|
|
332
|
+
'picture',
|
|
333
|
+
'pre',
|
|
334
|
+
'progress',
|
|
335
|
+
'q',
|
|
336
|
+
'rp',
|
|
337
|
+
'rt',
|
|
338
|
+
'ruby',
|
|
339
|
+
's',
|
|
340
|
+
'samp',
|
|
341
|
+
'script',
|
|
342
|
+
'section',
|
|
343
|
+
'select',
|
|
344
|
+
'small',
|
|
345
|
+
'source',
|
|
346
|
+
'span',
|
|
347
|
+
//"strike", NOT HTML5 (Use <del> or <s> instead)
|
|
348
|
+
'strong',
|
|
349
|
+
'style',
|
|
350
|
+
'sub',
|
|
351
|
+
'summary',
|
|
352
|
+
'sup',
|
|
353
|
+
'svg',
|
|
354
|
+
'table',
|
|
355
|
+
'tbody',
|
|
356
|
+
'td',
|
|
357
|
+
'template',
|
|
358
|
+
'textarea',
|
|
359
|
+
'tfoot',
|
|
360
|
+
'th',
|
|
361
|
+
'thead',
|
|
362
|
+
'time',
|
|
363
|
+
'title',
|
|
364
|
+
'tr',
|
|
365
|
+
'track',
|
|
366
|
+
//"tt", // NOT HTML5 (Use CSS)
|
|
367
|
+
'u',
|
|
368
|
+
'ul',
|
|
369
|
+
'var',
|
|
370
|
+
'video',
|
|
371
|
+
'wbr',
|
|
372
|
+
// xml
|
|
373
|
+
'xml',
|
|
374
|
+
'o:OfficeDocumentSettings',
|
|
375
|
+
'o:AllowPNG',
|
|
376
|
+
'o:PixelsPerInch',
|
|
377
|
+
]; // Total of 116 (excluding non-html5 and also comments, which are "<!-- [comment] -->").
|
|
378
|
+
|
|
379
|
+
class HeadingComponent {
|
|
380
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
381
|
+
$headingStyle = input(null, { alias: 'headingStyle' });
|
|
382
|
+
$as = input('h1', { alias: 'as' });
|
|
383
|
+
$m = input(undefined, { alias: 'm' });
|
|
384
|
+
$mx = input(undefined, { alias: 'mx' });
|
|
385
|
+
$my = input(undefined, { alias: 'my' });
|
|
386
|
+
$mt = input(undefined, { alias: 'mt' });
|
|
387
|
+
$mr = input(undefined, { alias: 'mr' });
|
|
388
|
+
$mb = input(undefined, { alias: 'mb' });
|
|
389
|
+
$ml = input(undefined, { alias: 'ml' });
|
|
390
|
+
$style = computed(() => {
|
|
391
|
+
return styleToString({
|
|
392
|
+
...withMargin({
|
|
393
|
+
m: this.$m(),
|
|
394
|
+
mx: this.$mx(),
|
|
395
|
+
my: this.$my(),
|
|
396
|
+
mt: this.$mt(),
|
|
397
|
+
mr: this.$mr(),
|
|
398
|
+
mb: this.$mb(),
|
|
399
|
+
ml: this.$ml(),
|
|
400
|
+
}),
|
|
401
|
+
...(this.$headingStyle() ?? {}),
|
|
402
|
+
});
|
|
403
|
+
});
|
|
404
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: HeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
405
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: HeadingComponent, isStandalone: true, selector: "ng-email-heading", inputs: { $headingStyle: { classPropertyName: "$headingStyle", publicName: "headingStyle", isSignal: true, isRequired: false, transformFunction: null }, $as: { classPropertyName: "$as", publicName: "as", isSignal: true, isRequired: false, transformFunction: null }, $m: { classPropertyName: "$m", publicName: "m", isSignal: true, isRequired: false, transformFunction: null }, $mx: { classPropertyName: "$mx", publicName: "mx", isSignal: true, isRequired: false, transformFunction: null }, $my: { classPropertyName: "$my", publicName: "my", isSignal: true, isRequired: false, transformFunction: null }, $mt: { classPropertyName: "$mt", publicName: "mt", isSignal: true, isRequired: false, transformFunction: null }, $mr: { classPropertyName: "$mr", publicName: "mr", isSignal: true, isRequired: false, transformFunction: null }, $mb: { classPropertyName: "$mb", publicName: "mb", isSignal: true, isRequired: false, transformFunction: null }, $ml: { classPropertyName: "$ml", publicName: "ml", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let heading = $as();\n@let style = $style();\n@if (heading === 'h1') {\n <h1 [style]=\"style\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h1>\n} @else if (heading === 'h2') {\n <h2 [style]=\"style\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h2>\n} @else if (heading === 'h3') {\n <h3 [style]=\"style\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h3>\n} @else if (heading === 'h4') {\n <h4 [style]=\"style\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h4>\n} @else if (heading === 'h5') {\n <h5 [style]=\"style\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h5>\n} @else if (heading === 'h6') {\n <h6 [style]=\"style\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h6>\n} @else {\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n}\n<ng-template #content><ng-content></ng-content></ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
406
|
+
}
|
|
407
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: HeadingComponent, decorators: [{
|
|
408
|
+
type: Component,
|
|
409
|
+
args: [{ selector: 'ng-email-heading', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let heading = $as();\n@let style = $style();\n@if (heading === 'h1') {\n <h1 [style]=\"style\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h1>\n} @else if (heading === 'h2') {\n <h2 [style]=\"style\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h2>\n} @else if (heading === 'h3') {\n <h3 [style]=\"style\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h3>\n} @else if (heading === 'h4') {\n <h4 [style]=\"style\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h4>\n} @else if (heading === 'h5') {\n <h5 [style]=\"style\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h5>\n} @else if (heading === 'h6') {\n <h6 [style]=\"style\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </h6>\n} @else {\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n}\n<ng-template #content><ng-content></ng-content></ng-template>\n" }]
|
|
410
|
+
}] });
|
|
411
|
+
|
|
412
|
+
class HrComponent {
|
|
413
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
414
|
+
$hrStyle = input(null, { alias: 'hrStyle' });
|
|
415
|
+
$disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });
|
|
416
|
+
$style = computed(() => {
|
|
417
|
+
return {
|
|
418
|
+
...(this.$disableDefaultStyle()
|
|
419
|
+
? {}
|
|
420
|
+
: {
|
|
421
|
+
width: '100%',
|
|
422
|
+
border: 'none',
|
|
423
|
+
borderTop: '1px solid #eaeaea',
|
|
424
|
+
}),
|
|
425
|
+
...(this.$hrStyle() ?? {}),
|
|
426
|
+
};
|
|
427
|
+
});
|
|
428
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: HrComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
429
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: HrComponent, isStandalone: true, selector: "ng-email-hr", inputs: { $hrStyle: { classPropertyName: "$hrStyle", publicName: "hrStyle", isSignal: true, isRequired: false, transformFunction: null }, $disableDefaultStyle: { classPropertyName: "$disableDefaultStyle", publicName: "disableDefaultStyle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<hr [style]=\"$style()\" />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
430
|
+
}
|
|
431
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: HrComponent, decorators: [{
|
|
432
|
+
type: Component,
|
|
433
|
+
args: [{ selector: 'ng-email-hr', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<hr [style]=\"$style()\" />\n" }]
|
|
434
|
+
}] });
|
|
435
|
+
|
|
436
|
+
class HtmlComponent {
|
|
437
|
+
$lang = input('en', { alias: 'lang' });
|
|
438
|
+
$dir = input('ltr', { alias: 'dir' });
|
|
439
|
+
$enableVML = input(true, { alias: 'enableVML' });
|
|
440
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: HtmlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
441
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: HtmlComponent, isStandalone: true, selector: "ng-email-html", inputs: { $lang: { classPropertyName: "$lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null }, $dir: { classPropertyName: "$dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, $enableVML: { classPropertyName: "$enableVML", publicName: "enableVML", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let enableVML = $enableVML();\n@let lang = $lang();\n@let dir = $dir();\n\n<html\n id=\"__angular-email\"\n [lang]=\"lang\"\n [dir]=\"dir\"\n [attr.xmlns:o]=\"enableVML ? 'urn:schemas-microsoft-com:office:office' : undefined\"\n [attr.xmlns:v]=\"enableVML ? 'urn:schemas-microsoft-com:vml' : undefined\"\n>\n <ng-content />\n</html>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
442
|
+
}
|
|
443
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: HtmlComponent, decorators: [{
|
|
444
|
+
type: Component,
|
|
445
|
+
args: [{ selector: 'ng-email-html', changeDetection: ChangeDetectionStrategy.OnPush, template: "@let enableVML = $enableVML();\n@let lang = $lang();\n@let dir = $dir();\n\n<html\n id=\"__angular-email\"\n [lang]=\"lang\"\n [dir]=\"dir\"\n [attr.xmlns:o]=\"enableVML ? 'urn:schemas-microsoft-com:office:office' : undefined\"\n [attr.xmlns:v]=\"enableVML ? 'urn:schemas-microsoft-com:vml' : undefined\"\n>\n <ng-content />\n</html>\n" }]
|
|
446
|
+
}] });
|
|
447
|
+
|
|
448
|
+
class ImgComponent {
|
|
449
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
450
|
+
$imgStyle = input(null, { alias: 'imgStyle' });
|
|
451
|
+
$disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });
|
|
452
|
+
$alt = input('', { alias: 'alt' });
|
|
453
|
+
$src = input('', { alias: 'src' });
|
|
454
|
+
$width = input('0', { alias: 'width' });
|
|
455
|
+
$height = input('0', { alias: 'height' });
|
|
456
|
+
$style = computed(() => {
|
|
457
|
+
return {
|
|
458
|
+
...(this.$disableDefaultStyle()
|
|
459
|
+
? {}
|
|
460
|
+
: {
|
|
461
|
+
display: 'block',
|
|
462
|
+
outline: 'none',
|
|
463
|
+
border: 'none',
|
|
464
|
+
textDecoration: 'none',
|
|
465
|
+
}),
|
|
466
|
+
...(this.$imgStyle() ?? {}),
|
|
467
|
+
};
|
|
468
|
+
});
|
|
469
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ImgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
470
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: ImgComponent, isStandalone: true, selector: "ng-email-img", inputs: { $imgStyle: { classPropertyName: "$imgStyle", publicName: "imgStyle", isSignal: true, isRequired: false, transformFunction: null }, $disableDefaultStyle: { classPropertyName: "$disableDefaultStyle", publicName: "disableDefaultStyle", isSignal: true, isRequired: false, transformFunction: null }, $alt: { classPropertyName: "$alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, $src: { classPropertyName: "$src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, $width: { classPropertyName: "$width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, $height: { classPropertyName: "$height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<img\n [style]=\"$style()\"\n [alt]=\"$alt()\"\n [src]=\"$src()\"\n [width]=\"$width()\"\n [height]=\"$height()\"\n/>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
471
|
+
}
|
|
472
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ImgComponent, decorators: [{
|
|
473
|
+
type: Component,
|
|
474
|
+
args: [{ selector: 'ng-email-img', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<img\n [style]=\"$style()\"\n [alt]=\"$alt()\"\n [src]=\"$src()\"\n [width]=\"$width()\"\n [height]=\"$height()\"\n/>\n" }]
|
|
475
|
+
}] });
|
|
476
|
+
|
|
477
|
+
class LinkComponent {
|
|
478
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
479
|
+
$linkStyle = input(null, { alias: 'linkStyle' });
|
|
480
|
+
$disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });
|
|
481
|
+
$href = input('', { alias: 'href' });
|
|
482
|
+
$target = input('_blank', { alias: 'target' });
|
|
483
|
+
$style = computed(() => {
|
|
484
|
+
return {
|
|
485
|
+
...(this.$disableDefaultStyle()
|
|
486
|
+
? {}
|
|
487
|
+
: {
|
|
488
|
+
color: '#067df7',
|
|
489
|
+
textDecoration: 'none',
|
|
490
|
+
}),
|
|
491
|
+
...(this.$linkStyle() ?? {}),
|
|
492
|
+
};
|
|
493
|
+
});
|
|
494
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
495
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: LinkComponent, isStandalone: true, selector: "ng-email-link", inputs: { $linkStyle: { classPropertyName: "$linkStyle", publicName: "linkStyle", isSignal: true, isRequired: false, transformFunction: null }, $disableDefaultStyle: { classPropertyName: "$disableDefaultStyle", publicName: "disableDefaultStyle", isSignal: true, isRequired: false, transformFunction: null }, $href: { classPropertyName: "$href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, $target: { classPropertyName: "$target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a\n [style]=\"$style()\"\n [href]=\"$href()\"\n [target]=\"$target()\"\n ><ng-content></ng-content\n></a>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
496
|
+
}
|
|
497
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: LinkComponent, decorators: [{
|
|
498
|
+
type: Component,
|
|
499
|
+
args: [{ selector: 'ng-email-link', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n [style]=\"$style()\"\n [href]=\"$href()\"\n [target]=\"$target()\"\n ><ng-content></ng-content\n></a>\n" }]
|
|
500
|
+
}] });
|
|
501
|
+
|
|
502
|
+
class PreviewComponent {
|
|
503
|
+
$preview = input('', { alias: 'preview' });
|
|
504
|
+
$text = computed(() => {
|
|
505
|
+
const preview = this.$preview();
|
|
506
|
+
const whiteSpaceCodes = '\xa0\u200C\u200B\u200D\u200E\u200F\uFEFF';
|
|
507
|
+
return whiteSpaceCodes.repeat(150 - preview.length);
|
|
508
|
+
});
|
|
509
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: PreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
510
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: PreviewComponent, isStandalone: true, selector: "ng-email-preview", inputs: { $preview: { classPropertyName: "$preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n id=\"__angular-email-preview\"\n style=\"display: none; overflow: hidden; line-height: 1px; opacity: 0; max-height: 0; max-width: 0\"\n>\n {{ $preview() }}\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
511
|
+
}
|
|
512
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: PreviewComponent, decorators: [{
|
|
513
|
+
type: Component,
|
|
514
|
+
args: [{ selector: 'ng-email-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n id=\"__angular-email-preview\"\n style=\"display: none; overflow: hidden; line-height: 1px; opacity: 0; max-height: 0; max-width: 0\"\n>\n {{ $preview() }}\n</div>\n" }]
|
|
515
|
+
}] });
|
|
516
|
+
|
|
517
|
+
class SectionComponent {
|
|
518
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
519
|
+
$sectionStyle = input(null, { alias: 'sectionStyle' });
|
|
520
|
+
$style = computed(() => {
|
|
521
|
+
return styleToString({
|
|
522
|
+
width: '100%',
|
|
523
|
+
...(this.$sectionStyle() ?? {}),
|
|
524
|
+
});
|
|
525
|
+
});
|
|
526
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
527
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: SectionComponent, isStandalone: true, selector: "ng-email-section", inputs: { $sectionStyle: { classPropertyName: "$sectionStyle", publicName: "sectionStyle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<table\n [align]=\"'center'\"\n [border]=\"0\"\n [cellPadding]=\"0\"\n [cellSpacing]=\"0\"\n width=\"100%\"\n role=\"presentation\"\n [style]=\"$style()\"\n>\n <tbody>\n <tr>\n <td>\n <ng-content />\n </td>\n </tr>\n </tbody>\n</table>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
528
|
+
}
|
|
529
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: SectionComponent, decorators: [{
|
|
530
|
+
type: Component,
|
|
531
|
+
args: [{ selector: 'ng-email-section', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<table\n [align]=\"'center'\"\n [border]=\"0\"\n [cellPadding]=\"0\"\n [cellSpacing]=\"0\"\n width=\"100%\"\n role=\"presentation\"\n [style]=\"$style()\"\n>\n <tbody>\n <tr>\n <td>\n <ng-content />\n </td>\n </tr>\n </tbody>\n</table>\n" }]
|
|
532
|
+
}] });
|
|
533
|
+
|
|
534
|
+
class TextComponent {
|
|
535
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
536
|
+
$textStyle = input(null, { alias: 'textStyle' });
|
|
537
|
+
$disableDefaultStyle = input(false, { alias: 'disableDefaultStyle' });
|
|
538
|
+
$style = computed(() => {
|
|
539
|
+
return {
|
|
540
|
+
...(this.$disableDefaultStyle()
|
|
541
|
+
? {}
|
|
542
|
+
: {
|
|
543
|
+
fontSize: '14px',
|
|
544
|
+
lineHeight: '24px',
|
|
545
|
+
margin: '16px 0',
|
|
546
|
+
}),
|
|
547
|
+
...(this.$textStyle() ?? {}),
|
|
548
|
+
};
|
|
549
|
+
});
|
|
550
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
551
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: TextComponent, isStandalone: true, selector: "ng-email-text", inputs: { $textStyle: { classPropertyName: "$textStyle", publicName: "textStyle", isSignal: true, isRequired: false, transformFunction: null }, $disableDefaultStyle: { classPropertyName: "$disableDefaultStyle", publicName: "disableDefaultStyle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p [style]=\"$style()\">\n <ng-content></ng-content>\n</p>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
552
|
+
}
|
|
553
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: TextComponent, decorators: [{
|
|
554
|
+
type: Component,
|
|
555
|
+
args: [{ selector: 'ng-email-text', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p [style]=\"$style()\">\n <ng-content></ng-content>\n</p>\n" }]
|
|
556
|
+
}] });
|
|
557
|
+
|
|
558
|
+
const render = async ({ component, selector, options }) => {
|
|
559
|
+
const nsHtmlRegex = new RegExp(`<(?!(\\/?(${HTMLElements.join('|')})))[^>]+>`, 'gm');
|
|
560
|
+
const bootstrap = () => bootstrapApplication(component, {
|
|
561
|
+
providers: [provideExperimentalZonelessChangeDetection(), provideServerRendering()],
|
|
562
|
+
});
|
|
563
|
+
const ngHtml = await renderApplication(bootstrap, {
|
|
564
|
+
document: `<${selector}></${selector}>`,
|
|
565
|
+
});
|
|
566
|
+
const normalizedHtml = ngHtml
|
|
567
|
+
.replace(new RegExp(`.+<${selector}[\\s\\S]*?>([\\s\\S]*?)<\\/${selector}>.+`, 'gm'), '$1')
|
|
568
|
+
.replace(nsHtmlRegex, '');
|
|
569
|
+
const $ = cheerio.load(normalizedHtml);
|
|
570
|
+
$('[data-html]').each(function () {
|
|
571
|
+
const content = $(this).attr('data-html');
|
|
572
|
+
if (content) {
|
|
573
|
+
$(this).replaceWith(`${content}\n`);
|
|
574
|
+
}
|
|
575
|
+
});
|
|
576
|
+
const html = $.html().replaceAll('<', '<').replaceAll('>', '>');
|
|
577
|
+
if (options?.plainText) {
|
|
578
|
+
return renderAsPlainText(html);
|
|
579
|
+
}
|
|
580
|
+
const doctype = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
|
|
581
|
+
const markup = html;
|
|
582
|
+
const document = `${doctype}${markup}`;
|
|
583
|
+
if (options?.pretty) {
|
|
584
|
+
return pretty(document);
|
|
585
|
+
}
|
|
586
|
+
return document;
|
|
587
|
+
};
|
|
588
|
+
const renderAsPlainText = (markup) => {
|
|
589
|
+
return convert(markup, {
|
|
590
|
+
selectors: [
|
|
591
|
+
{ selector: 'img', format: 'skip' },
|
|
592
|
+
{ selector: '#__angular-email-preview', format: 'skip' },
|
|
593
|
+
],
|
|
594
|
+
});
|
|
595
|
+
};
|
|
596
|
+
|
|
597
|
+
/*
|
|
598
|
+
* Public API Surface of angular-email
|
|
599
|
+
*/
|
|
600
|
+
|
|
601
|
+
/**
|
|
602
|
+
* Generated bundle index. Do not edit.
|
|
603
|
+
*/
|
|
604
|
+
|
|
605
|
+
export { BackgroundComponent, BodyComponent, ButtonComponent, ColorSchemeComponent, ColumnComponent, ConditionalComponent, ContainerComponent, HTMLElements, HeadComponent, HeadingComponent, HrComponent, HtmlComponent, ImgComponent, LinkComponent, PreviewComponent, SectionComponent, TextComponent, classToString, copyTextToClipboard, pxToPt, render, styleToString, unreachable, withMargin };
|
|
606
|
+
//# sourceMappingURL=keycloakify-angular-email.mjs.map
|