@serve.zone/dcrouter 13.9.2 → 13.11.0

package/dist_ts_web/elements/email/ops-view-email-domains.js

@@ -0,0 +1,403 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { DeesElement, html, customElement, css, state, cssManager, } from '@design.estate/dees-element';
+import * as appstate from '../../appstate.js';
+import * as interfaces from '../../../dist_ts_interfaces/index.js';
+import { viewHostCss } from '../shared/css.js';
+import {} from '@design.estate/dees-catalog';
+let OpsViewEmailDomains = (() => {
+    let _classDecorators = [customElement('ops-view-email-domains')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _emailDomainsState_decorators;
+    let _emailDomainsState_initializers = [];
+    let _emailDomainsState_extraInitializers = [];
+    let _domainsState_decorators;
+    let _domainsState_initializers = [];
+    let _domainsState_extraInitializers = [];
+    var OpsViewEmailDomains = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _emailDomainsState_decorators = [state()];
+            _domainsState_decorators = [state()];
+            __esDecorate(this, null, _emailDomainsState_decorators, { kind: "accessor", name: "emailDomainsState", static: false, private: false, access: { has: obj => "emailDomainsState" in obj, get: obj => obj.emailDomainsState, set: (obj, value) => { obj.emailDomainsState = value; } }, metadata: _metadata }, _emailDomainsState_initializers, _emailDomainsState_extraInitializers);
+            __esDecorate(this, null, _domainsState_decorators, { kind: "accessor", name: "domainsState", static: false, private: false, access: { has: obj => "domainsState" in obj, get: obj => obj.domainsState, set: (obj, value) => { obj.domainsState = value; } }, metadata: _metadata }, _domainsState_initializers, _domainsState_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            OpsViewEmailDomains = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #emailDomainsState_accessor_storage = __runInitializers(this, _emailDomainsState_initializers, appstate.emailDomainsStatePart.getState());
+        get emailDomainsState() { return this.#emailDomainsState_accessor_storage; }
+        set emailDomainsState(value) { this.#emailDomainsState_accessor_storage = value; }
+        #domainsState_accessor_storage = (__runInitializers(this, _emailDomainsState_extraInitializers), __runInitializers(this, _domainsState_initializers, appstate.domainsStatePart.getState()));
+        get domainsState() { return this.#domainsState_accessor_storage; }
+        set domainsState(value) { this.#domainsState_accessor_storage = value; }
+        constructor() {
+            super();
+            __runInitializers(this, _domainsState_extraInitializers);
+            const sub = appstate.emailDomainsStatePart.select().subscribe((s) => {
+                this.emailDomainsState = s;
+            });
+            this.rxSubscriptions.push(sub);
+            const domSub = appstate.domainsStatePart.select().subscribe((s) => {
+                this.domainsState = s;
+            });
+            this.rxSubscriptions.push(domSub);
+        }
+        async connectedCallback() {
+            await super.connectedCallback();
+            await appstate.emailDomainsStatePart.dispatchAction(appstate.fetchEmailDomainsAction, null);
+            await appstate.domainsStatePart.dispatchAction(appstate.fetchDomainsAndProvidersAction, null);
+        }
+        static styles = [
+            cssManager.defaultStyles,
+            viewHostCss,
+            css `
+      .emailDomainsContainer {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+
+      .statusBadge {
+        display: inline-flex;
+        align-items: center;
+        padding: 3px 10px;
+        border-radius: 12px;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+      }
+
+      .statusBadge.valid {
+        background: ${cssManager.bdTheme('#dcfce7', '#14532d')};
+        color: ${cssManager.bdTheme('#166534', '#4ade80')};
+      }
+
+      .statusBadge.missing {
+        background: ${cssManager.bdTheme('#fef2f2', '#450a0a')};
+        color: ${cssManager.bdTheme('#991b1b', '#f87171')};
+      }
+
+      .statusBadge.invalid {
+        background: ${cssManager.bdTheme('#fff7ed', '#431407')};
+        color: ${cssManager.bdTheme('#9a3412', '#fb923c')};
+      }
+
+      .statusBadge.unchecked {
+        background: ${cssManager.bdTheme('#f3f4f6', '#1f2937')};
+        color: ${cssManager.bdTheme('#4b5563', '#9ca3af')};
+      }
+
+      .sourceBadge {
+        display: inline-flex;
+        align-items: center;
+        padding: 3px 8px;
+        border-radius: 4px;
+        font-size: 11px;
+        font-weight: 500;
+        background: ${cssManager.bdTheme('#f3f4f6', '#1f2937')};
+        color: ${cssManager.bdTheme('#374151', '#d1d5db')};
+      }
+    `,
+        ];
+        render() {
+            const domains = this.emailDomainsState.domains;
+            const validCount = domains.filter((d) => d.dnsStatus.mx === 'valid' &&
+                d.dnsStatus.spf === 'valid' &&
+                d.dnsStatus.dkim === 'valid' &&
+                d.dnsStatus.dmarc === 'valid').length;
+            const issueCount = domains.length - validCount;
+            const tiles = [
+                {
+                    id: 'total',
+                    title: 'Total Domains',
+                    value: domains.length,
+                    type: 'number',
+                    icon: 'lucide:globe',
+                    color: '#3b82f6',
+                },
+                {
+                    id: 'valid',
+                    title: 'Valid DNS',
+                    value: validCount,
+                    type: 'number',
+                    icon: 'lucide:Check',
+                    color: '#22c55e',
+                },
+                {
+                    id: 'issues',
+                    title: 'Issues',
+                    value: issueCount,
+                    type: 'number',
+                    icon: 'lucide:TriangleAlert',
+                    color: issueCount > 0 ? '#ef4444' : '#22c55e',
+                },
+                {
+                    id: 'dkim',
+                    title: 'DKIM Active',
+                    value: domains.filter((d) => d.dkim.publicKey).length,
+                    type: 'number',
+                    icon: 'lucide:KeyRound',
+                    color: '#8b5cf6',
+                },
+            ];
+            return html `
+      <dees-heading level="3">Email Domains</dees-heading>
+
+      <div class="emailDomainsContainer">
+        <dees-statsgrid
+          .tiles=${tiles}
+          .minTileWidth=${200}
+          .gridActions=${[
+                {
+                    name: 'Refresh',
+                    iconName: 'lucide:RefreshCw',
+                    action: async () => {
+                        await appstate.emailDomainsStatePart.dispatchAction(appstate.fetchEmailDomainsAction, null);
+                    },
+                },
+            ]}
+        ></dees-statsgrid>
+
+        <dees-table
+          .heading1=${'Email Domains'}
+          .heading2=${'DKIM, SPF, DMARC and MX management'}
+          .data=${domains}
+          .showColumnFilters=${true}
+          .displayFunction=${(d) => ({
+                Domain: d.domain,
+                Source: this.renderSourceBadge(d.linkedDomainId),
+                MX: this.renderDnsStatus(d.dnsStatus.mx),
+                SPF: this.renderDnsStatus(d.dnsStatus.spf),
+                DKIM: this.renderDnsStatus(d.dnsStatus.dkim),
+                DMARC: this.renderDnsStatus(d.dnsStatus.dmarc),
+            })}
+          .dataActions=${[
+                {
+                    name: 'Add Email Domain',
+                    iconName: 'lucide:plus',
+                    type: ['header'],
+                    actionFunc: async () => {
+                        await this.showCreateDialog();
+                    },
+                },
+                {
+                    name: 'Validate DNS',
+                    iconName: 'lucide:search-check',
+                    type: ['inRow', 'contextmenu'],
+                    actionFunc: async (actionData) => {
+                        const d = actionData.item;
+                        await appstate.emailDomainsStatePart.dispatchAction(appstate.validateEmailDomainAction, d.id);
+                        const { DeesToast } = await import('@design.estate/dees-catalog');
+                        DeesToast.show({ message: `DNS validated for ${d.domain}`, type: 'success', duration: 2500 });
+                    },
+                },
+                {
+                    name: 'Provision DNS',
+                    iconName: 'lucide:wand-sparkles',
+                    type: ['inRow', 'contextmenu'],
+                    actionFunc: async (actionData) => {
+                        const d = actionData.item;
+                        await appstate.emailDomainsStatePart.dispatchAction(appstate.provisionEmailDomainDnsAction, d.id);
+                        const { DeesToast } = await import('@design.estate/dees-catalog');
+                        DeesToast.show({ message: `DNS records provisioned for ${d.domain}`, type: 'success', duration: 2500 });
+                    },
+                },
+                {
+                    name: 'View DNS Records',
+                    iconName: 'lucide:list',
+                    type: ['inRow', 'contextmenu'],
+                    actionFunc: async (actionData) => {
+                        const d = actionData.item;
+                        await this.showDnsRecordsDialog(d);
+                    },
+                },
+                {
+                    name: 'Delete',
+                    iconName: 'lucide:trash2',
+                    type: ['inRow', 'contextmenu'],
+                    actionFunc: async (actionData) => {
+                        const d = actionData.item;
+                        await appstate.emailDomainsStatePart.dispatchAction(appstate.deleteEmailDomainAction, d.id);
+                    },
+                },
+            ]}
+          dataName="email domain"
+        ></dees-table>
+      </div>
+    `;
+        }
+        renderDnsStatus(status) {
+            return html `<span class="statusBadge ${status}">${status}</span>`;
+        }
+        renderSourceBadge(linkedDomainId) {
+            const domain = this.domainsState.domains.find((d) => d.id === linkedDomainId);
+            if (!domain)
+                return html `<span class="sourceBadge">unknown</span>`;
+            const label = domain.source === 'dcrouter'
+                ? 'dcrouter'
+                : this.domainsState.providers.find((p) => p.id === domain.providerId)?.name || 'provider';
+            return html `<span class="sourceBadge">${label}</span>`;
+        }
+        async showCreateDialog() {
+            const { DeesModal } = await import('@design.estate/dees-catalog');
+            const domainOptions = this.domainsState.domains.map((d) => ({
+                option: `${d.name} (${d.source})`,
+                key: d.id,
+            }));
+            DeesModal.createAndShow({
+                heading: 'Add Email Domain',
+                content: html `
+        <dees-form>
+          <dees-input-dropdown
+            .key=${'linkedDomainId'}
+            .label=${'Domain'}
+            .description=${'Select an existing DNS domain'}
+            .options=${domainOptions}
+            .required=${true}
+          ></dees-input-dropdown>
+          <dees-input-text
+            .key=${'dkimSelector'}
+            .label=${'DKIM Selector'}
+            .description=${'Identifier used in DNS record name'}
+            .value=${'default'}
+          ></dees-input-text>
+          <dees-input-dropdown
+            .key=${'dkimKeySize'}
+            .label=${'DKIM Key Size'}
+            .options=${[
+                    { option: '2048 (recommended)', key: '2048' },
+                    { option: '1024', key: '1024' },
+                    { option: '4096', key: '4096' },
+                ]}
+            .selectedOption=${{ option: '2048 (recommended)', key: '2048' }}
+          ></dees-input-dropdown>
+          <dees-input-checkbox
+            .key=${'rotateKeys'}
+            .label=${'Auto-rotate DKIM keys'}
+            .value=${false}
+          ></dees-input-checkbox>
+        </dees-form>
+      `,
+                menuOptions: [
+                    { name: 'Cancel', action: async (m) => m.destroy() },
+                    {
+                        name: 'Create',
+                        action: async (m) => {
+                            const form = m.shadowRoot?.querySelector('.content')?.querySelector('dees-form');
+                            if (!form)
+                                return;
+                            const data = await form.collectFormData();
+                            const linkedDomainId = typeof data.linkedDomainId === 'object'
+                                ? data.linkedDomainId.key
+                                : data.linkedDomainId;
+                            const keySize = typeof data.dkimKeySize === 'object'
+                                ? parseInt(data.dkimKeySize.key, 10)
+                                : parseInt(data.dkimKeySize || '2048', 10);
+                            await appstate.emailDomainsStatePart.dispatchAction(appstate.createEmailDomainAction, {
+                                linkedDomainId,
+                                dkimSelector: data.dkimSelector || 'default',
+                                dkimKeySize: keySize,
+                                rotateKeys: Boolean(data.rotateKeys),
+                            });
+                            m.destroy();
+                        },
+                    },
+                ],
+            });
+        }
+        async showDnsRecordsDialog(emailDomain) {
+            const { DeesModal, DeesToast } = await import('@design.estate/dees-catalog');
+            // Fetch required DNS records
+            let records = [];
+            try {
+                const response = await appstate.fetchEmailDomainDnsRecords(emailDomain.id);
+                records = response.records;
+            }
+            catch {
+                records = [];
+            }
+            DeesModal.createAndShow({
+                heading: `DNS Records: ${emailDomain.domain}`,
+                content: html `
+        <dees-table
+          .data=${records}
+          .displayFunction=${(r) => ({
+                    Type: r.type,
+                    Name: r.name,
+                    Value: r.value,
+                    Status: html `<span class="statusBadge ${r.status}">${r.status}</span>`,
+                })}
+          .dataActions=${[
+                    {
+                        name: 'Copy Value',
+                        iconName: 'lucide:copy',
+                        type: ['inRow'],
+                        actionFunc: async (actionData) => {
+                            const rec = actionData.item;
+                            await navigator.clipboard.writeText(rec.value);
+                            DeesToast.show({ message: 'Copied to clipboard', type: 'success', duration: 1500 });
+                        },
+                    },
+                ]}
+          dataName="DNS record"
+        ></dees-table>
+      `,
+                menuOptions: [
+                    {
+                        name: 'Auto-Provision All',
+                        action: async (m) => {
+                            await appstate.emailDomainsStatePart.dispatchAction(appstate.provisionEmailDomainDnsAction, emailDomain.id);
+                            DeesToast.show({ message: 'DNS records provisioned', type: 'success', duration: 2500 });
+                            m.destroy();
+                        },
+                    },
+                    { name: 'Close', action: async (m) => m.destroy() },
+                ],
+            });
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return OpsViewEmailDomains = _classThis;
+})();
+export { OpsViewEmailDomains };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3BzLXZpZXctZW1haWwtZG9tYWlucy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3RzX3dlYi9lbGVtZW50cy9lbWFpbC9vcHMtdmlldy1lbWFpbC1kb21haW5zLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQ0wsV0FBVyxFQUNYLElBQUksRUFDSixhQUFhLEVBRWIsR0FBRyxFQUNILEtBQUssRUFDTCxVQUFVLEdBQ1gsTUFBTSw2QkFBNkIsQ0FBQztBQUNyQyxPQUFPLEtBQUssUUFBUSxNQUFNLG1CQUFtQixDQUFDO0FBQzlDLE9BQU8sS0FBSyxVQUFVLE1BQU0sc0NBQXNDLENBQUM7QUFDbkUsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQy9DLE9BQU8sRUFBbUIsTUFBTSw2QkFBNkIsQ0FBQztJQVNqRCxtQkFBbUI7NEJBRC9CLGFBQWEsQ0FBQyx3QkFBd0IsQ0FBQzs7OztzQkFDQyxXQUFXOzs7Ozs7O21DQUFuQixTQUFRLFdBQVc7Ozs7NkNBQ2pELEtBQUssRUFBRTt3Q0FJUCxLQUFLLEVBQUU7WUFIUix3TUFBUyxpQkFBaUIsNkJBQWpCLGlCQUFpQiw2R0FDbUI7WUFHN0MseUxBQVMsWUFBWSw2QkFBWixZQUFZLG1HQUFpRTtZQU54Riw2S0ErV0M7Ozs7UUE3V0MsK0ZBQ0UsUUFBUSxDQUFDLHFCQUFxQixDQUFDLFFBQVEsRUFBRyxFQUFDO1FBRDdDLElBQVMsaUJBQWlCLHVEQUNtQjtRQUQ3QyxJQUFTLGlCQUFpQiw2REFDbUI7UUFHN0MscUpBQWdELFFBQVEsQ0FBQyxnQkFBZ0IsQ0FBQyxRQUFRLEVBQUcsR0FBQztRQUF0RixJQUFTLFlBQVksa0RBQWlFO1FBQXRGLElBQVMsWUFBWSx3REFBaUU7UUFFdEY7WUFDRSxLQUFLLEVBQUUsQ0FBQzs7WUFDUixNQUFNLEdBQUcsR0FBRyxRQUFRLENBQUMscUJB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

package/dist_ts_web/elements/email/ops-view-email-security.d.ts

@@ -10,5 +10,5 @@ export declare class OpsViewEmailSecurity extends DeesElement {
     constructor();
     static styles: import("@design.estate/dees-element").CSSResult[];
     render(): TemplateResult;
-    private saveEmailSecuritySettings;
+    private showEditSecurityDialog;
 }

package/dist_ts_web/elements/email/ops-view-email-security.js

@@ -72,25 +72,10 @@ let OpsViewEmailSecurity = (() => {
             cssManager.defaultStyles,
             viewHostCss,
             css `
-      h2 {
-        margin: 32px 0 16px 0;
-        font-size: 24px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#333', '#ccc')};
-      }
-      dees-statsgrid {
-        margin-bottom: 32px;
-      }
-      .securityCard {
-        background: ${cssManager.bdTheme('#fff', '#222')};
-        border: 1px solid ${cssManager.bdTheme('#e9ecef', '#333')};
-        border-radius: 8px;
-        padding: 24px;
-        position: relative;
-        overflow: hidden;
-      }
-      .actionButton {
-        margin-top: 16px;
+      .securityContainer {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
       }
     `,
         ];
@@ -144,48 +129,44 @@ let OpsViewEmailSecurity = (() => {
             return html `
       <dees-heading level="3">Email Security</dees-heading>
 
-      <dees-statsgrid
-        .tiles=${tiles}
-        .minTileWidth=${200}
-      ></dees-statsgrid>
+      <div class="securityContainer">
+        <dees-statsgrid
+          .tiles=${tiles}
+          .minTileWidth=${200}
+        ></dees-statsgrid>
 
-      <h2>Email Security Configuration</h2>
-      <div class="securityCard">
-        <dees-form>
-          <dees-input-checkbox
-            .key=${'enableSPF'}
-            .label=${'Enable SPF checking'}
-            .value=${true}
-          ></dees-input-checkbox>
-          <dees-input-checkbox
-            .key=${'enableDKIM'}
-            .label=${'Enable DKIM validation'}
-            .value=${true}
-          ></dees-input-checkbox>
-          <dees-input-checkbox
-            .key=${'enableDMARC'}
-            .label=${'Enable DMARC policy enforcement'}
-            .value=${true}
-          ></dees-input-checkbox>
-          <dees-input-checkbox
-            .key=${'enableSpamFilter'}
-            .label=${'Enable spam filtering'}
-            .value=${true}
-          ></dees-input-checkbox>
-        </dees-form>
-        <dees-button
-          class="actionButton"
-          type="highlighted"
-          @click=${() => this.saveEmailSecuritySettings()}
-        >
-          Save Settings
-        </dees-button>
+        <dees-settings
+          .heading=${'Security Configuration'}
+          .settingsFields=${[
+                { key: 'spf', label: 'SPF checking', value: 'enabled' },
+                { key: 'dkim', label: 'DKIM validation', value: 'enabled' },
+                { key: 'dmarc', label: 'DMARC policy', value: 'enabled' },
+                { key: 'spam', label: 'Spam filtering', value: 'enabled' },
+            ]}
+          .actions=${[{ name: 'Edit', action: () => this.showEditSecurityDialog() }]}
+        ></dees-settings>
       </div>
     `;
         }
-        async saveEmailSecuritySettings() {
-            // Config is read-only from the UI for now
-            alert('Email security settings are read-only. Update the dcrouter configuration file to change these settings.');
+        async showEditSecurityDialog() {
+            const { DeesModal } = await import('@design.estate/dees-catalog');
+            DeesModal.createAndShow({
+                heading: 'Edit Security Configuration',
+                content: html `
+        <dees-form>
+          <dees-input-checkbox .key=${'enableSPF'} .label=${'SPF checking'} .value=${true}></dees-input-checkbox>
+          <dees-input-checkbox .key=${'enableDKIM'} .label=${'DKIM validation'} .value=${true}></dees-input-checkbox>
+          <dees-input-checkbox .key=${'enableDMARC'} .label=${'DMARC policy enforcement'} .value=${true}></dees-input-checkbox>
+          <dees-input-checkbox .key=${'enableSpamFilter'} .label=${'Spam filtering'} .value=${true}></dees-input-checkbox>
+        </dees-form>
+        <p style="margin-top: 12px; font-size: 12px; opacity: 0.7;">
+          These settings are read-only for now. Update the dcrouter configuration to change them.
+        </p>
+      `,
+                menuOptions: [
+                    { name: 'Close', action: async (modalArg) => modalArg.destroy() },
+                ],
+            });
         }
         static {
             __runInitializers(_classThis, _classExtraInitializers);
@@ -194,4 +175,4 @@ let OpsViewEmailSecurity = (() => {
     return OpsViewEmailSecurity = _classThis;
 })();
 export { OpsViewEmailSecurity };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3BzLXZpZXctZW1haWwtc2VjdXJpdHkuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvZW1haWwvb3BzLXZpZXctZW1haWwtc2VjdXJpdHkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxRQUFRLE1BQU0sbUJBQW1CLENBQUM7QUFDOUMsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBRS9DLE9BQU8sRUFDTCxXQUFXLEVBQ1gsYUFBYSxFQUNiLElBQUksRUFDSixLQUFLLEVBQ0wsR0FBRyxFQUNILFVBQVUsR0FFWCxNQUFNLDZCQUE2QixDQUFDO0FBQ3JDLE9BQU8sRUFBbUIsTUFBTSw2QkFBNkIsQ0FBQztJQVNqRCxvQkFBb0I7NEJBRGhDLGFBQWEsQ0FBQyx5QkFBeUIsQ0FBQzs7OztzQkFDQyxXQUFXOzs7O29DQUFuQixTQUFRLFdBQVc7Ozs7c0NBQ2xELEtBQUssRUFBRTtZQUNSLG1MQUFTLFVBQVUsNkJBQVYsVUFBVSwrRkFBNkQ7WUFGbEYsNktBMElDOzs7O1FBeElDLGlGQUE0QyxRQUFRLENBQUMsY0FBYyxDQUFDLFFBQVEsRUFBRyxFQUFDO1FBQWhGLElBQVMsVUFBVSxnREFBNkQ7UUFBaEYsSUFBUyxVQUFVLHNEQUE2RDtRQUVoRjtZQUNFLEtBQUssRUFBRSxDQUFDOztZQUNSLE1BQU0sR0FBRyxHQUFHLFFBQVEsQ0FBQyxjQUFjO2lCQUNoQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQztpQkFDaEIsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUU7Z0JBQ2YsSUFBSSxDQUFDLFVBQVUsR0FBRyxDQUFDLENBQUM7WUFDdEIsQ0FBQyxDQUFDLENBQUM7WUFDTCxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FB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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3BzLXZpZXctZW1haWwtc2VjdXJpdHkuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvZW1haWwvb3BzLXZpZXctZW1haWwtc2VjdXJpdHkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxRQUFRLE1BQU0sbUJBQW1CLENBQUM7QUFDOUMsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBRS9DLE9BQU8sRUFDTCxXQUFXLEVBQ1gsYUFBYSxFQUNiLElBQUksRUFDSixLQUFLLEVBQ0wsR0FBRyxFQUNILFVBQVUsR0FFWCxNQUFNLDZCQUE2QixDQUFDO0FBQ3JDLE9BQU8sRUFBbUIsTUFBTSw2QkFBNkIsQ0FBQztJQVNqRCxvQkFBb0I7NEJBRGhDLGFBQWEsQ0FBQyx5QkFBeUIsQ0FBQzs7OztzQkFDQyxXQUFXOzs7O29DQUFuQixTQUFRLFdBQVc7Ozs7c0NBQ2xELEtBQUssRUFBRTtZQUNSLG1MQUFTLFVBQVUsNkJBQVYsVUFBVSwrRkFBNkQ7WUFGbEYsNktBdUhDOzs7O1FBckhDLGlGQUE0QyxRQUFRLENBQUMsY0FBYyxDQUFDLFFBQVEsRUFBRyxFQUFDO1FBQWhGLElBQVMsVUFBVSxnREFBNkQ7UUFBaEYsSUFBUyxVQUFVLHNEQUE2RDtRQUVoRjtZQUNFLEtBQUssRUFBRSxDQUFDOztZQUNSLE1BQU0sR0FBRyxHQUFHLFFBQVEsQ0FBQyxjQUFjO2lCQUNoQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQztpQkFDaEIsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUU7Z0JBQ2YsSUFBSSxDQUFDLFVBQVUsR0FBRyxDQUFDLENBQUM7WUFDdEIsQ0FBQyxDQUFDLENBQUM7WUFDTCxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FB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