@genesislcap/foundation-alerts 14.127.6 → 14.128.0

package/README.md

@@ -1,3 +1,16 @@
-# Foundation Inbox
-
+# Foundation Alerts
+`foundation-alerts` is a Micro-Frontend that is used for managing a list of alert rules. It enables users to create, edit, delete, disable and view alerts rules.
 [API](./docs/api/index.md)
+`foundation-alerts` provides several exports to promote reuse and extensibility at various levels. These include but are
+not limited to:
+
+* `ZeroAlerts`: A preconfigured version of the micro frontend built with the zero design system and zero components.
+* `configure`: A customisation hook for the base micro frontend that integrates it with your design system of choice.
+
+
+## License
+
+Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact [Genesis Global](https://genesis.global/contact-us/) for more details.
+
+### Licensed components
+Genesis low-code platform

package/dist/dts/components/zero-components.d.ts

@@ -0,0 +1,6 @@
+/**
+ * registerCommonZeroComponents.
+ * @public
+ */
+export declare const registerCommonZeroComponents: () => Promise<void>;
+//# sourceMappingURL=zero-components.d.ts.map

package/dist/dts/components/zero-components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zero-components.d.ts","sourceRoot":"","sources":["../../../src/components/zero-components.ts"],"names":[],"mappings":"AAqCA;;;GAGG;AACH,eAAO,MAAM,4BAA4B,qBAgBxC,CAAC"}

package/dist/dts/config/config.d.ts

@@ -0,0 +1,40 @@
+import { PartialFASTElementDefinition } from '@microsoft/fast-element';
+import { TemplateOptions } from './templates';
+/**
+ * Do not reference any ../main files here. We must avoid ../tags being referenced and therefore setup pre-configuration.
+ */
+/**
+ * AlertConfig DI interface.
+ *
+ * @public
+ */
+export interface AlertConfig extends PartialFASTElementDefinition {
+    /**
+     * Template options.
+     *
+     * @remarks
+     * Used by host applications to assign MF template options and subcomponent tags to align with the host design system.
+     */
+    templateOptions: TemplateOptions;
+    /**
+     * Design System prefix for foundation-form
+     *
+     * @remarks
+     * Used by foundation-form to specify the design system used by the form elements
+     */
+    designSystemPrefix: string;
+}
+/**
+ * Default AlertConfig DI implementation.
+ * @public
+ */
+export declare const defaultAlertConfig: AlertConfig;
+/**
+ * AlertConfig DI key.
+ *
+ * @internal
+ * @privateRemarks
+ * Marked as internal to stop api-extractor becoming confused cross-linking tokens with the same name.
+ */
+export declare const AlertConfig: import("@microsoft/fast-foundation").InterfaceSymbol<AlertConfig>;
+//# sourceMappingURL=config.d.ts.map

package/dist/dts/config/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/config/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAC;AAEvE,OAAO,EAA0B,eAAe,EAAE,MAAM,aAAa,CAAC;AAEtE;;GAEG;AAEH;;;;GAIG;AACH,MAAM,WAAW,WAAY,SAAQ,4BAA4B;IAC/D;;;;;OAKG;IACH,eAAe,EAAE,eAAe,CAAC;IACjC;;;;;OAKG;IACH,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,WAIhC,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,mEAAyE,CAAC"}

package/dist/dts/config/configure.d.ts

@@ -0,0 +1,28 @@
+import { AlertConfig } from './config';
+/**
+ * configure.
+ *
+ * @remarks
+ * Configure the alert micro frontend for host app integration.
+ *
+ * @example Providing template options to align to your host application.
+ * ```ts
+
+ *   const { configure } = await import('@genesislcap/foundation-alerts/config'); // < import from the subpath
+ *   return configure({
+ *     name: `nexus-app-alerts`,
+ *     // These will be merged with the packages `defaultTemplateOptions`. You will need to have these components registered in your application.
+ *     templateOptions: {
+ *       button: 'nexus-button',
+ *       checkbox: 'nexus-checkbox-next',
+ *       provider: 'template',
+ *     },
+ *   });
+ * },
+ * ```
+ *
+ * @param config - A partial AlertConfig.
+ * @public
+ */
+export declare function configure(config: Partial<AlertConfig>): Promise<typeof import("../main").FoundationAlerts>;
+//# sourceMappingURL=configure.d.ts.map

package/dist/dts/config/configure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"configure.d.ts","sourceRoot":"","sources":["../../../src/config/configure.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAsB,MAAM,UAAU,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAsB,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,WAAW,CAAC,sDAiC3D"}

package/dist/dts/config/index.d.ts

@@ -0,0 +1,3 @@
+export * from './config';
+export * from './configure';
+//# sourceMappingURL=index.d.ts.map

package/dist/dts/config/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/config/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC"}

package/dist/dts/config/templates.d.ts

@@ -0,0 +1,33 @@
+import { TemplateElementDependency } from '@genesislcap/foundation-ui';
+import { SyntheticViewTemplate } from '@microsoft/fast-element';
+/**
+ * TemplateComponents.
+ * @public
+ */
+export type TemplateComponents = {
+    icon: TemplateElementDependency;
+    button: TemplateElementDependency;
+    dropdownMenu: TemplateElementDependency;
+    divider: TemplateElementDependency;
+    provider: TemplateElementDependency;
+};
+/**
+ * TemplateOptions.
+ * @public
+ */
+export type TemplateOptions = Partial<TemplateComponents> & {
+    /**
+     * @remarks
+     * Just for reference that template options may be more than tags.
+     * @internal
+     */
+    somePartial?: string | SyntheticViewTemplate;
+};
+/**
+ * defaultTemplateOptions.
+ * @remarks
+ * The default template options this MF has been created with.
+ * @public
+ */
+export declare const defaultTemplateOptions: TemplateOptions;
+//# sourceMappingURL=templates.d.ts.map

package/dist/dts/config/templates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../../../src/config/templates.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,yBAAyB,CAAC;IAChC,MAAM,EAAE,yBAAyB,CAAC;IAClC,YAAY,EAAE,yBAAyB,CAAC;IACxC,OAAO,EAAE,yBAAyB,CAAC;IACnC,QAAQ,EAAE,yBAAyB,CAAC;CACrC,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,kBAAkB,CAAC,GAAG;IAC1D;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,qBAAqB,CAAC;CAC9C,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,EAAE,eAMpC,CAAC"}

package/dist/dts/index.d.ts

@@ -1,2 +1,3 @@
+export * from './config';
 export * from './main';
 //# sourceMappingURL=index.d.ts.map

package/dist/dts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC"}

package/dist/dts/main/main.d.ts

@@ -1,6 +1,7 @@
 import { Connect, Datasource, Message } from '@genesislcap/foundation-comms';
 import { FASTElement } from '@microsoft/fast-element';
 import { Subscription } from 'rxjs';
+import { AlertConfig } from '../config';
 import { AlertRule, AlertRuleRow } from './main.types';
 type displayState = 'add' | 'edit' | 'list';
 /**
@@ -14,6 +15,7 @@ export declare class FoundationAlerts extends FASTElement {
     displayState: displayState;
     items: AlertRule[];
     alertEditItemData: AlertRule;
+    alertConfig: AlertConfig;
     private sourceRef;
     private resourceName;
     private statusLabelMap;
@@ -43,5 +45,39 @@ export declare class FoundationAlerts extends FASTElement {
     handleAddAlertAction(): void;
     handleEditAlertAction(item: any): void;
 }
+/**
+ * ZeroAlerts.
+ *
+ * @remarks
+ * A zero version that pre-registers zero components and uses the zero design system. ZeroAlerts and its components won't bloat the core bundle as
+ * these are only loaded on-demand when in use.
+ *
+ * @example
+ * ```ts
+ * import { ZeroAlerts } from '@genesislcap/foundation-alerts';
+ * ...
+ * ZeroAlerts
+ * ```
+ *
+ * @example Load the micro frontend on-demand
+ * ```ts
+
+ *   const { ZeroAlerts } = await import('@genesislcap/foundation-alerts');
+ *   return ZeroAlerts;
+ * },
+ * ```
+ *
+ * @public
+ */
+export declare class ZeroAlerts extends FoundationAlerts {
+    /**
+     * @internal
+     */
+    connectedCallback(): Promise<void>;
+    /**
+     * @internal
+     */
+    protected loadRemotes(): Promise<void>;
+}
 export {};
 //# sourceMappingURL=main.d.ts.map

package/dist/dts/main/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../src/main/main.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,UAAU,EACV,OAAO,EAKR,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAiB,WAAW,EAAc,MAAM,yBAAyB,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AAIpC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEvD,KAAK,YAAY,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAE5C;;;;GAIG;AACH,qBAKa,gBAAiB,SAAQ,WAAW;IACtC,OAAO,EAAE,OAAO,CAAC;IACd,UAAU,EAAG,UAAU,CAAC;IACxB,YAAY,EAAE,YAAY,CAAU;IACpC,KAAK,EAAE,SAAS,EAAE,CAAM;IACxB,iBAAiB,EAAE,SAAS,CAAC;IACzC,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,YAAY,CAA8B;IAClD,OAAO,CAAC,cAAc,CAGpB;IACK,gBAAgB,EAAE,YAAY,CAAC;IAC/B,KAAK,EAAE,OAAO,CAAS;IACvB,OAAO;;;;;;QA4BZ;IACU,mBAAmB,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAa;IACjE,0BAA0B;IAMpB,iBAAiB;IAQvB,OAAO,CAAC,mBAAmB;YAIb,SAAS;IAyCvB,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,YAAY;IAKP,MAAM,CAAC,EAAE,EAAE,YAAY,CAAC,wBAAwB,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC;IAQpE,YAAY,CAAC,EACxB,WAAW,EACX,sBAAsB,EAAE,EAAE,GAC3B,EAAE,YAAY,GAAG,OAAO,CAAC,OAAO,CAAC;IAO3B,oBAAoB;IAIpB,qBAAqB,CAAC,IAAI,EAAE,GAAG;CAQvC"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../src/main/main.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,UAAU,EACV,OAAO,EAKR,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAiB,WAAW,EAAc,MAAM,yBAAyB,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAIxC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEvD,KAAK,YAAY,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAE5C;;;;GAIG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;IACtC,OAAO,EAAE,OAAO,CAAC;IACd,UAAU,EAAG,UAAU,CAAC;IACxB,YAAY,EAAE,YAAY,CAAU;IACpC,KAAK,EAAE,SAAS,EAAE,CAAM;IACxB,iBAAiB,EAAE,SAAS,CAAC;IAC5B,WAAW,EAAG,WAAW,CAAC;IAEvC,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,YAAY,CAA8B;IAClD,OAAO,CAAC,cAAc,CAGpB;IACK,gBAAgB,EAAE,YAAY,CAAC;IAC/B,KAAK,EAAE,OAAO,CAAS;IACvB,OAAO;;;;;;QA4BZ;IACU,mBAAmB,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAa;IACjE,0BAA0B;IAMpB,iBAAiB;IAQvB,OAAO,CAAC,mBAAmB;YAIb,SAAS;IAyCvB,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,YAAY;IAKP,MAAM,CAAC,EAAE,EAAE,YAAY,CAAC,wBAAwB,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC;IAQpE,YAAY,CAAC,EACxB,WAAW,EACX,sBAAsB,EAAE,EAAE,GAC3B,EAAE,YAAY,GAAG,OAAO,CAAC,OAAO,CAAC;IAO3B,oBAAoB;IAIpB,qBAAqB,CAAC,IAAI,EAAE,GAAG;CAQvC;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAKa,UAAW,SAAQ,gBAAgB;IAC9C;;OAEG;IACG,iBAAiB;IAKvB;;OAEG;cACa,WAAW;CAI5B"}

package/dist/dts/main/main.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.template.d.ts","sourceRoot":"","sources":["../../../src/main/main.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAG1C;;GAEG;AACH,eAAO,MAAM,wBAAwB,uEA2FpC,CAAC"}
+{"version":3,"file":"main.template.d.ts","sourceRoot":"","sources":["../../../src/main/main.template.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAG1C;;GAEG;AACH,eAAO,MAAM,wBAAwB,uEA8FpC,CAAC"}

package/dist/dts/styles/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/styles/styles.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,sBAAsB,iDA0IlC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/styles/styles.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,sBAAsB,iDA2IlC,CAAC"}

package/dist/dts/tags/index.d.ts

@@ -0,0 +1,2 @@
+export * from './tags';
+//# sourceMappingURL=index.d.ts.map

package/dist/dts/tags/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tags/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/dts/tags/tags.d.ts

@@ -0,0 +1,28 @@
+/**
+ * It's important this file isn't referenced ahead of a `configure` call, otherwise these values may remain fixed at
+ * their defaults. Consumers must use the `/config` subpath to help avoid this. Files with references to tags should be
+ * lazily loaded. There is an alternative `getTags` utility at the end which could offer another approach, but direct
+ * tag exports and inline template references feel cleaner than having to convert all component `template` and `styles`
+ * exports to functions to call `getTags` on execution.
+ */
+/**
+ * @internal
+ */
+export declare const templateOptions: import("../config/templates").TemplateOptions;
+/**
+ * @internal
+ */
+export declare const iconTag: string;
+/**
+ * @internal
+ */
+export declare const buttonTag: string;
+/**
+ * @internal
+ */
+export declare const dropdownMenuTag: string;
+/**
+ * @internal
+ */
+export declare const dividerTag: string;
+//# sourceMappingURL=tags.d.ts.map

package/dist/dts/tags/tags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags.d.ts","sourceRoot":"","sources":["../../../src/tags/tags.ts"],"names":[],"mappings":"AAKA;;;;;;GAMG;AAEH;;GAEG;AACH,eAAO,MAAQ,eAAe,+CACiB,CAAC;AAEhD;;GAEG;AACH,eAAO,MAAM,OAAO,QAA+B,CAAC;AAEpD;;GAEG;AACH,eAAO,MAAM,SAAS,QAAiC,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,eAAe,QAAuC,CAAC;AAEpE;;GAEG;AACH,eAAO,MAAM,UAAU,QAAkC,CAAC"}

package/dist/esm/components/zero-components.js

@@ -0,0 +1,47 @@
+import { __awaiter } from "tslib";
+import { assureDesignSystem, ResourceType, } from '@genesislcap/foundation-utils';
+import { logger } from '../utils';
+/**
+ * zeroDesignSystemImport.
+ * @remarks
+ * Attempts to use a module federation version of zero before falling back to the version that was bundled with the app.
+ * @internal
+ */
+function zeroDesignSystemImport() {
+    return __awaiter(this, void 0, void 0, function* () {
+        let module;
+        let type = ResourceType.remote;
+        try {
+            module = yield import(
+            /* webpackChunkName: "foundation-zero" */
+            'foundationZero/ZeroDesignSystem');
+            return assureDesignSystem(module);
+        }
+        catch (e) {
+            logger.info(`Please note remoteEntry.js load errors are expected if module federated dependencies are offline. Falling back to locally bundled versions.`);
+            type = ResourceType.local;
+            module = yield import(
+            /* webpackChunkName: "foundation-zero" */
+            '@genesislcap/foundation-zero');
+            return assureDesignSystem(module);
+        }
+        finally {
+            logger.debug(`Using '${type}' version of foundation-zero`);
+        }
+    });
+}
+/**
+ * registerCommonZeroComponents.
+ * @public
+ */
+export const registerCommonZeroComponents = () => __awaiter(void 0, void 0, void 0, function* () {
+    const { provideDesignSystem, zeroIcon, zeroButton, zeroDivider, zeroDropdownMenu } = yield zeroDesignSystemImport();
+    /**
+     * Register the components the app is using with the system.
+     */
+    provideDesignSystem().register(
+    /**
+     * Common across most routes, so batch register these lightweight components upfront.
+     */
+    zeroIcon(), zeroButton(), zeroDropdownMenu(), zeroDivider());
+});

package/dist/esm/config/config.js

@@ -0,0 +1,19 @@
+import { DI } from '@microsoft/fast-foundation';
+import { defaultTemplateOptions } from './templates';
+/**
+ * Default AlertConfig DI implementation.
+ * @public
+ */
+export const defaultAlertConfig = {
+    name: 'foundation-alerts',
+    templateOptions: defaultTemplateOptions,
+    designSystemPrefix: 'zero',
+};
+/**
+ * AlertConfig DI key.
+ *
+ * @internal
+ * @privateRemarks
+ * Marked as internal to stop api-extractor becoming confused cross-linking tokens with the same name.
+ */
+export const AlertConfig = DI.createInterface((x) => x.instance(defaultAlertConfig));

package/dist/esm/config/configure.js

@@ -0,0 +1,57 @@
+import { __awaiter } from "tslib";
+import { FASTElement } from '@microsoft/fast-element';
+import { DI, Registration } from '@microsoft/fast-foundation';
+import { AlertConfig, defaultAlertConfig } from './config';
+/**
+ * configure.
+ *
+ * @remarks
+ * Configure the alert micro frontend for host app integration.
+ *
+ * @example Providing template options to align to your host application.
+ * ```ts
+
+ *   const { configure } = await import('@genesislcap/foundation-alerts/config'); // < import from the subpath
+ *   return configure({
+ *     name: `nexus-app-alerts`,
+ *     // These will be merged with the packages `defaultTemplateOptions`. You will need to have these components registered in your application.
+ *     templateOptions: {
+ *       button: 'nexus-button',
+ *       checkbox: 'nexus-checkbox-next',
+ *       provider: 'template',
+ *     },
+ *   });
+ * },
+ * ```
+ *
+ * @param config - A partial AlertConfig.
+ * @public
+ */
+export function configure(config) {
+    return __awaiter(this, void 0, void 0, function* () {
+        /**
+         * Merge the configs
+         */
+        const value = Object.assign(Object.assign({}, defaultAlertConfig), config);
+        if (config.templateOptions) {
+            value.templateOptions = Object.assign(Object.assign({}, defaultAlertConfig.templateOptions), config.templateOptions);
+        }
+        /**
+         * Register a new AlertConfig
+         */
+        DI.getOrCreateDOMContainer().register(Registration.instance(AlertConfig, value));
+        /**
+         * Lazily reference and define the micro frontend element post config setting.
+         */
+        const { FoundationAlerts, FoundationAlertsTemplate, FoundationAlertsStyles } = yield import('../main');
+        const { name, attributes, shadowOptions, elementOptions } = value;
+        return FASTElement.define(FoundationAlerts, {
+            name,
+            template: FoundationAlertsTemplate,
+            styles: FoundationAlertsStyles,
+            attributes,
+            shadowOptions,
+            elementOptions,
+        });
+    });
+}

package/dist/esm/config/index.js

@@ -0,0 +1,2 @@
+export * from './config';
+export * from './configure';

package/dist/esm/config/templates.js

@@ -0,0 +1,13 @@
+/**
+ * defaultTemplateOptions.
+ * @remarks
+ * The default template options this MF has been created with.
+ * @public
+ */
+export const defaultTemplateOptions = {
+    icon: 'zero-icon',
+    button: 'zero-button',
+    dropdownMenu: 'zero-dropdown-menu',
+    divider: 'zero-divider',
+    provider: 'zero-design-system-provider',
+};

package/dist/esm/index.js

@@ -1 +1,2 @@
+export * from './config';
 export * from './main';

package/dist/esm/main/main.js

@@ -1,6 +1,7 @@
 import { __awaiter, __decorate } from "tslib";
 import { Connect, Datasource, normaliseCriteria, dataServerResultFilter, MessageType, } from '@genesislcap/foundation-comms';
 import { customElement, FASTElement, observable } from '@microsoft/fast-element';
+import { AlertConfig } from '../config';
 import { FoundationAlertsStyles as styles } from '../styles';
 import { logger } from '../utils';
 import { FoundationAlertsTemplate as template } from './main.template';
@@ -9,7 +10,7 @@ import { FoundationAlertsTemplate as template } from './main.template';
  * Allow creating, disabling and deleting alerts
  * @beta
  */
-let FoundationAlerts = class FoundationAlerts extends FASTElement {
+export class FoundationAlerts extends FASTElement {
     constructor() {
         super(...arguments);
         this.displayState = 'list';
@@ -175,7 +176,7 @@ let FoundationAlerts = class FoundationAlerts extends FASTElement {
         this.alertEditItemData = Object.assign(Object.assign({}, item), { TABLE_ID: item.RULE_TABLE, USERNAME: item.USER_NAME });
         this.displayState = 'edit';
     }
-};
+}
 __decorate([
     Connect
 ], FoundationAlerts.prototype, "connect", void 0);
@@ -191,14 +192,64 @@ __decorate([
 __decorate([
     observable
 ], FoundationAlerts.prototype, "alertEditItemData", void 0);
+__decorate([
+    AlertConfig
+], FoundationAlerts.prototype, "alertConfig", void 0);
 __decorate([
     observable
 ], FoundationAlerts.prototype, "criteriaFromFilters", void 0);
-FoundationAlerts = __decorate([
+/**
+ * ZeroAlerts.
+ *
+ * @remarks
+ * A zero version that pre-registers zero components and uses the zero design system. ZeroAlerts and its components won't bloat the core bundle as
+ * these are only loaded on-demand when in use.
+ *
+ * @example
+ * ```ts
+ * import { ZeroAlerts } from '@genesislcap/foundation-alerts';
+ * ...
+ * ZeroAlerts
+ * ```
+ *
+ * @example Load the micro frontend on-demand
+ * ```ts
+
+ *   const { ZeroAlerts } = await import('@genesislcap/foundation-alerts');
+ *   return ZeroAlerts;
+ * },
+ * ```
+ *
+ * @public
+ */
+let ZeroAlerts = class ZeroAlerts extends FoundationAlerts {
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        const _super = Object.create(null, {
+            connectedCallback: { get: () => super.connectedCallback }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.connectedCallback.call(this);
+            yield this.loadRemotes();
+        });
+    }
+    /**
+     * @internal
+     */
+    loadRemotes() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { registerCommonZeroComponents } = yield import('../components/zero-components');
+            yield registerCommonZeroComponents();
+        });
+    }
+};
+ZeroAlerts = __decorate([
     customElement({
-        name: 'foundation-alerts',
+        name: 'zero-alerts',
         template,
         styles,
     })
-], FoundationAlerts);
-export { FoundationAlerts };
+], ZeroAlerts);
+export { ZeroAlerts };

package/dist/esm/main/main.template.js

@@ -1,4 +1,5 @@
 import { html, repeat, when } from '@microsoft/fast-element';
+import { buttonTag, iconTag, dropdownMenuTag, dividerTag } from '../tags';
 /**
  * @public
  */
@@ -7,6 +8,7 @@ export const FoundationAlertsTemplate = html `
     ${when((x) => x.displayState === 'add', html `
         <foundation-form
           resourceName="EVENT_DYNAMIC_RULE_NOTIFY_CREATE"
+          design-system-prefix=${(x) => x.alertConfig.designSystemPrefix}
           @submit-success=${(x) => () => (x.displayState = 'list')}
         ></foundation-form>
       `)}
@@ -14,6 +16,7 @@ export const FoundationAlertsTemplate = html `
         <foundation-form
           resourceName="EVENT_DYNAMIC_RULE_NOTIFY_UPDATE"
           :data=${(x) => x.alertEditItemData}
+          design-system-prefix=${(x) => x.alertConfig.designSystemPrefix}
           @submit-success=${(x) => (x.displayState = 'list')}
         ></foundation-form>
       `)}
@@ -21,26 +24,27 @@ export const FoundationAlertsTemplate = html `
         <div class="header">
           <h2 class="title" part="title">Alerts rules</h2>
           <nav class="main-menu">
-            <zero-button
+            <${buttonTag}
               class="main-button"
               @click=${(x) => x.handleAddAlertAction()}
               part="add-button"
             >
-              <zero-icon name="plus" size="1x"></zero-icon>
-            </zero-button>
-            <zero-dropdown-menu
+              <${iconTag} name="plus" size="1x"></${iconTag}>
+            </${buttonTag}>
+            <${dropdownMenuTag} 
               class="main-button filter-button"
               name=""
               :items=${(x) => x.filters}
               part="filter-button"
             />
-              <zero-icon name="filter" size="1x"></zero-icon>
-            </zero-dropdown-menu>
+              <${iconTag} name="filter" size="1x"></${iconTag}>
+            </${dropdownMenuTag}>
           </nav>
         </div>
         ${when((x) => { var _a; return ((_a = x.items) === null || _a === void 0 ? void 0 : _a.length) >= 1; }, html `
             <ul class="list" part="list">
               ${repeat((x) => x.items, html `
+                  <${dividerTag} class="item-separator"></${dividerTag}>
                   <li class="item" part="item">
                     <h4 class="item-title">${(x) => x.RULE_EXPRESSION}</h4>
                     <div class="item-bottom">
@@ -49,21 +53,21 @@ export const FoundationAlertsTemplate = html `
                       </span>
                       <span class="date">${(x) => x.DATE}</span>
                       <nav class="item-menu">
-                        <zero-button
+                        <${buttonTag}
                           class="button"
                           @click=${(x, c) => c.parent.handleEditAlertAction(x)}
                         >
-                          <zero-icon name="gear"></zero-icon>
-                        </zero-button>
-                        <zero-button class="button" @click=${(x, c) => c.parent.toogleStatus(x)}>
-                          <zero-icon name="grip-lines-vertical"></zero-icon>
-                        </zero-button>
-                        <zero-button
+                          <${iconTag} name="gear"></${iconTag}>
+                        </${buttonTag}>
+                        <${buttonTag} class="button" @click=${(x, c) => c.parent.toogleStatus(x)}>
+                          <${iconTag} name="grip-lines-vertical"></${iconTag}>
+                        </${buttonTag}>
+                        <${buttonTag}
                           class="button"
                           @click=${(x, c) => c.parent.delete(x.DYNAMIC_NOTIFY_RULE_ID)}
                         >
-                          <zero-icon name="trash"></zero-icon>
-                        </zero-button>
+                          <${iconTag} name="trash"></${iconTag}>
+                        </${buttonTag}>
                       </nav>
                     </div>
                   </li>

package/dist/esm/styles/styles.js

@@ -1,29 +1,28 @@
-import { ColorHEX, RapidColorHEX } from '@genesislcap/foundation-zero';
 import { css } from '@microsoft/fast-element';
 /**
  * @public
  */
 export const FoundationAlertsStyles = css `
-  .wrapper {
-    --default-text-color: ${RapidColorHEX.white};
-    --available-text-color: ${RapidColorHEX.green};
-    --unavailable-text-color: ${RapidColorHEX.red};
-    --rest-text-color: ${ColorHEX.almostWhite};
+
+  .wrapper:has(foundation-form) {
+    padding: calc(var(--design-unit) * 4px);
   }
 
   .header {
     width: calc(100% - (var(--design-unit) * 5px - var(--design-unit) * 3px)));
     display: flex;
     align-items: center;
-    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px)
-      calc(var(--design-unit) * 2px) calc(var(--design-unit) * 5px);
+    padding: calc(var(--design-unit) * 3px) calc(var(--design-unit) * 4px);
   }
 
   .header .main-button {
     margin: 0;
-    min-width: 25px;
-    min-height: 25px;
     color: var(--neutral-fill-strong-rest);
+    height: calc((var(--base-height-multiplier) + var(--design-unit) + 2) * 2px);
+    min-width: calc((var(--base-height-multiplier) + var(--design-unit)) * 2px);
+    width: calc((var(--base-height-multiplier) + var(--design-unit) + 2) * 2px);
+    align-items: center;
+    justify-content: center;
   }
 
   .header .main-button::part(actions-container) {
@@ -33,6 +32,7 @@ export const FoundationAlertsStyles = css `
   .header .main-button::part(actions-container),
   .header .main-button::part(actions-opener) {
     height: 100%;
+    min-width: calc((var(--base-height-multiplier) + var(--design-unit) + 2) * 2px);
   }
 
   .header .main-button::part(actions-opener) {
@@ -52,18 +52,15 @@ export const FoundationAlertsStyles = css `
   .title {
     padding: 0;
     margin: 0;
-    font-size: calc(var(--design-unit) * 6px);
+    font-size: var(--type-ramp-plus-2-font-size);
     font-weight: 500;
-    color: var(--default-text-color);
+    color: var(--neutral-foreground-rest);
   }
 
   .main-menu {
     display: flex;
     margin-left: auto;
     gap: calc(var(--design-unit) * 2px);
-
-    --density: -2;
-    --menu-item-height-multiplier: 4;
   }
 
   .list,
@@ -80,16 +77,14 @@ export const FoundationAlertsStyles = css `
 
   .item {
     width: calc(100% - (var(--design-unit) * 3px) - (var(--design-unit) * 5px));
-    padding: calc(var(--design-unit) * 4px) calc(var(--design-unit) * 3px)
-      calc(var(--design-unit) * 4px) calc(var(--design-unit) * 5px);
-    border-top: calc(var(--stroke-width) * 1px) solid var(--neutral-fill-hover);
-    color: var(--default-text-color);
+    padding: calc(var(--design-unit) * 3px) calc(var(--design-unit) * 4px);
+    color: var(--neutral-foreground-rest);
   }
 
   .item-title {
     padding: 0;
-    margin: 0 0 calc(var(--design-unit) * 3px) 0;
-    font-size: calc(var(--design-unit) * 5px);
+    margin: 0 0 calc(var(--design-unit) * 2px) 0;
+    font-size: var(--type-ramp-base-font-size);
     font-weight: 400;
   }
 
@@ -97,9 +92,9 @@ export const FoundationAlertsStyles = css `
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
-    gap: calc(var(--design-unit) * 5px);
-    font-size: calc(var(--design-unit) * 5px);
-    color: var(--rest-text-color);
+    gap: calc(var(--design-unit) * 4px);
+    font-size: var(--type-ramp-base-font-size);
+    color: var(--neutral-foreground-hint);
   }
 
   .item-menu {
@@ -109,11 +104,12 @@ export const FoundationAlertsStyles = css `
   }
 
   .item-menu .button {
-    color: var(--neutral-stroke-active);
+    color: var(--neutral-stroke-rest);
+    border: none;
   }
 
   .item-menu .button:hover {
-    color: var(--neutral-stroke-focus);
+    color: var(--neutral-stroke-hover);
   }
 
   .item-bottom .button {
@@ -125,20 +121,24 @@ export const FoundationAlertsStyles = css `
   .header .button::part(control),
   .item-bottom .button::part(control) {
     padding: 0;
+    border: none;
   }
 
   .status.enabled {
-    color: var(--available-text-color);
+    color: var(--success-color);
   }
 
   .status.disabled {
-    color: var(--unavailable-text-color);
+    color: var(--error-color);
   }
 
   .empty {
-    font-size: 12px;
-    padding: calc(var(--design-unit) * 4px) calc(var(--design-unit) * 3px)
-      calc(var(--design-unit) * 4px) calc(var(--design-unit) * 5px);
+    font-size: var(--type-ramp-base-font-size);
+    padding: calc(var(--design-unit) * 3px) calc(var(--design-unit) * 4px);
+    margin: 0;
+  }
+
+  .item-separator {
     margin: 0;
   }
 `;

package/dist/esm/tags/index.js

@@ -0,0 +1 @@
+export * from './tags';

package/dist/esm/tags/tags.js

@@ -0,0 +1,31 @@
+import { tagFor } from '@genesislcap/foundation-ui';
+import { DI } from '@microsoft/fast-foundation';
+import { AlertConfig } from '../config/config';
+import { defaultTemplateOptions } from '../config/templates';
+/**
+ * It's important this file isn't referenced ahead of a `configure` call, otherwise these values may remain fixed at
+ * their defaults. Consumers must use the `/config` subpath to help avoid this. Files with references to tags should be
+ * lazily loaded. There is an alternative `getTags` utility at the end which could offer another approach, but direct
+ * tag exports and inline template references feel cleaner than having to convert all component `template` and `styles`
+ * exports to functions to call `getTags` on execution.
+ */
+/**
+ * @internal
+ */
+export const { templateOptions = defaultTemplateOptions } = DI.getOrCreateDOMContainer().get(AlertConfig);
+/**
+ * @internal
+ */
+export const iconTag = tagFor(templateOptions.icon);
+/**
+ * @internal
+ */
+export const buttonTag = tagFor(templateOptions.button);
+/**
+ * @internal
+ */
+export const dropdownMenuTag = tagFor(templateOptions.dropdownMenu);
+/**
+ * @internal
+ */
+export const dividerTag = tagFor(templateOptions.divider);

package/dist/foundation-alerts.api.json

@@ -172,6 +172,190 @@
       "name": "",
       "preserveMemberOrder": false,
       "members": [
+        {
+          "kind": "Interface",
+          "canonicalReference": "@genesislcap/foundation-alerts!AlertConfig:interface",
+          "docComment": "/**\n * AlertConfig DI interface.\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export interface AlertConfig extends "
+            },
+            {
+              "kind": "Reference",
+              "text": "PartialFASTElementDefinition",
+              "canonicalReference": "@microsoft/fast-element!PartialFASTElementDefinition:interface"
+            },
+            {
+              "kind": "Content",
+              "text": " "
+            }
+          ],
+          "fileUrlPath": "src/config/config.ts",
+          "releaseTag": "Public",
+          "name": "AlertConfig",
+          "preserveMemberOrder": false,
+          "members": [
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@genesislcap/foundation-alerts!AlertConfig#designSystemPrefix:member",
+              "docComment": "/**\n * Design System prefix for foundation-form\n *\n * @remarks\n *\n * Used by foundation-form to specify the design system used by the form elements\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "designSystemPrefix: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "designSystemPrefix",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@genesislcap/foundation-alerts!AlertConfig#templateOptions:member",
+              "docComment": "/**\n * Template options.\n *\n * @remarks\n *\n * Used by host applications to assign MF template options and subcomponent tags to align with the host design system.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "templateOptions: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "TemplateOptions",
+                  "canonicalReference": "@genesislcap/foundation-alerts!~TemplateOptions:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "templateOptions",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            }
+          ],
+          "extendsTokenRanges": [
+            {
+              "startIndex": 1,
+              "endIndex": 2
+            }
+          ]
+        },
+        {
+          "kind": "Function",
+          "canonicalReference": "@genesislcap/foundation-alerts!configure:function(1)",
+          "docComment": "/**\n * configure.\n *\n * @remarks\n *\n * Configure the alert micro frontend for host app integration.\n *\n * @param config - A partial AlertConfig.\n *\n * @example\n *\n * Providing template options to align to your host application.\n * ```ts\n *\n *   const { configure } = await import('@genesislcap/foundation-alerts/config'); // < import from the subpath\n *   return configure({\n *     name: `nexus-app-alerts`,\n *     // These will be merged with the packages `defaultTemplateOptions`. You will need to have these components registered in your application.\n *     templateOptions: {\n *       button: 'nexus-button',\n *       checkbox: 'nexus-checkbox-next',\n *       provider: 'template',\n *     },\n *   });\n * },\n * ```\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare function configure(config: "
+            },
+            {
+              "kind": "Reference",
+              "text": "Partial",
+              "canonicalReference": "!Partial:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "AlertConfig",
+              "canonicalReference": "@genesislcap/foundation-alerts!AlertConfig:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ">"
+            },
+            {
+              "kind": "Content",
+              "text": "): "
+            },
+            {
+              "kind": "Reference",
+              "text": "Promise",
+              "canonicalReference": "!Promise:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<typeof import(\"../main\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "FoundationAlerts",
+              "canonicalReference": "@genesislcap/foundation-alerts!FoundationAlerts:class"
+            },
+            {
+              "kind": "Content",
+              "text": ">"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/config/configure.ts",
+          "returnTypeTokenRange": {
+            "startIndex": 6,
+            "endIndex": 10
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [
+            {
+              "parameterName": "config",
+              "parameterTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 5
+              },
+              "isOptional": false
+            }
+          ],
+          "name": "configure"
+        },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@genesislcap/foundation-alerts!defaultAlertConfig:var",
+          "docComment": "/**\n * Default AlertConfig DI implementation.\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "defaultAlertConfig: "
+            },
+            {
+              "kind": "Reference",
+              "text": "AlertConfig",
+              "canonicalReference": "@genesislcap/foundation-alerts!AlertConfig:interface"
+            }
+          ],
+          "fileUrlPath": "src/config/config.ts",
+          "isReadonly": true,
+          "releaseTag": "Public",
+          "name": "defaultAlertConfig",
+          "variableTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          }
+        },
         {
           "kind": "Class",
           "canonicalReference": "@genesislcap/foundation-alerts!FoundationAlerts:class",
@@ -197,6 +381,37 @@
           "name": "FoundationAlerts",
           "preserveMemberOrder": false,
           "members": [
+            {
+              "kind": "Property",
+              "canonicalReference": "@genesislcap/foundation-alerts!FoundationAlerts#alertConfig:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "alertConfig: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "AlertConfig",
+                  "canonicalReference": "@genesislcap/foundation-alerts!AlertConfig:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Beta",
+              "name": "alertConfig",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            },
             {
               "kind": "Property",
               "canonicalReference": "@genesislcap/foundation-alerts!FoundationAlerts#alertEditItemData:member",
@@ -842,6 +1057,37 @@
             "startIndex": 1,
             "endIndex": 6
           }
+        },
+        {
+          "kind": "Class",
+          "canonicalReference": "@genesislcap/foundation-alerts!ZeroAlerts:class",
+          "docComment": "/**\n * ZeroAlerts.\n *\n * @remarks\n *\n * A zero version that pre-registers zero components and uses the zero design system. ZeroAlerts and its components won't bloat the core bundle as these are only loaded on-demand when in use.\n *\n * @example\n * ```ts\n * import { ZeroAlerts } from '@genesislcap/foundation-alerts';\n * ...\n * ZeroAlerts\n * ```\n *\n * @example\n *\n * Load the micro frontend on-demand\n * ```ts\n *\n *   const { ZeroAlerts } = await import('@genesislcap/foundation-alerts');\n *   return ZeroAlerts;\n * },\n * ```\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare class ZeroAlerts extends "
+            },
+            {
+              "kind": "Reference",
+              "text": "FoundationAlerts",
+              "canonicalReference": "@genesislcap/foundation-alerts!FoundationAlerts:class"
+            },
+            {
+              "kind": "Content",
+              "text": " "
+            }
+          ],
+          "fileUrlPath": "src/main/main.ts",
+          "releaseTag": "Public",
+          "isAbstract": false,
+          "name": "ZeroAlerts",
+          "preserveMemberOrder": false,
+          "members": [],
+          "extendsTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          },
+          "implementsTokenRanges": []
         }
       ]
     }

package/dist/foundation-alerts.d.ts

@@ -2,10 +2,48 @@ import { Connect } from '@genesislcap/foundation-comms';
 import { Datasource } from '@genesislcap/foundation-comms';
 import { ElementStyles } from '@microsoft/fast-element';
 import { FASTElement } from '@microsoft/fast-element';
+import { InterfaceSymbol } from '@microsoft/fast-foundation';
 import { Message } from '@genesislcap/foundation-comms';
+import { PartialFASTElementDefinition } from '@microsoft/fast-element';
 import { Subscription } from 'rxjs';
+import { SyntheticViewTemplate } from '@microsoft/fast-element';
+import { TemplateElementDependency } from '@genesislcap/foundation-ui';
 import { ViewTemplate } from '@microsoft/fast-element';
 
+/**
+ * Do not reference any ../main files here. We must avoid ../tags being referenced and therefore setup pre-configuration.
+ */
+/**
+ * AlertConfig DI interface.
+ *
+ * @public
+ */
+export declare interface AlertConfig extends PartialFASTElementDefinition {
+    /**
+     * Template options.
+     *
+     * @remarks
+     * Used by host applications to assign MF template options and subcomponent tags to align with the host design system.
+     */
+    templateOptions: TemplateOptions;
+    /**
+     * Design System prefix for foundation-form
+     *
+     * @remarks
+     * Used by foundation-form to specify the design system used by the form elements
+     */
+    designSystemPrefix: string;
+}
+
+/**
+ * AlertConfig DI key.
+ *
+ * @internal
+ * @privateRemarks
+ * Marked as internal to stop api-extractor becoming confused cross-linking tokens with the same name.
+ */
+export declare const AlertConfig: InterfaceSymbol<AlertConfig>;
+
 declare interface AlertRule extends AlertRuleRow {
     DATE: string;
 }
@@ -28,6 +66,39 @@ declare enum AlertRuleStatus {
     DISABLED = "DISABLED"
 }
 
+/**
+ * configure.
+ *
+ * @remarks
+ * Configure the alert micro frontend for host app integration.
+ *
+ * @example Providing template options to align to your host application.
+ * ```ts
+
+ *   const { configure } = await import('@genesislcap/foundation-alerts/config'); // < import from the subpath
+ *   return configure({
+ *     name: `nexus-app-alerts`,
+ *     // These will be merged with the packages `defaultTemplateOptions`. You will need to have these components registered in your application.
+ *     templateOptions: {
+ *       button: 'nexus-button',
+ *       checkbox: 'nexus-checkbox-next',
+ *       provider: 'template',
+ *     },
+ *   });
+ * },
+ * ```
+ *
+ * @param config - A partial AlertConfig.
+ * @public
+ */
+export declare function configure(config: Partial<AlertConfig>): Promise<FoundationAlerts>;
+
+/**
+ * Default AlertConfig DI implementation.
+ * @public
+ */
+export declare const defaultAlertConfig: AlertConfig;
+
 declare type displayState = 'add' | 'edit' | 'list';
 
 /**
@@ -41,6 +112,7 @@ export declare class FoundationAlerts extends FASTElement {
     displayState: displayState;
     items: AlertRule[];
     alertEditItemData: AlertRule;
+    alertConfig: AlertConfig;
     private sourceRef;
     private resourceName;
     private statusLabelMap;
@@ -81,4 +153,64 @@ export declare const FoundationAlertsStyles: ElementStyles;
  */
 export declare const FoundationAlertsTemplate: ViewTemplate<FoundationAlerts, any>;
 
+/**
+ * TemplateComponents.
+ * @public
+ */
+declare type TemplateComponents = {
+    icon: TemplateElementDependency;
+    button: TemplateElementDependency;
+    dropdownMenu: TemplateElementDependency;
+    divider: TemplateElementDependency;
+    provider: TemplateElementDependency;
+};
+
+/**
+ * TemplateOptions.
+ * @public
+ */
+declare type TemplateOptions = Partial<TemplateComponents> & {
+    /**
+     * @remarks
+     * Just for reference that template options may be more than tags.
+     * @internal
+     */
+    somePartial?: string | SyntheticViewTemplate;
+};
+
+/**
+ * ZeroAlerts.
+ *
+ * @remarks
+ * A zero version that pre-registers zero components and uses the zero design system. ZeroAlerts and its components won't bloat the core bundle as
+ * these are only loaded on-demand when in use.
+ *
+ * @example
+ * ```ts
+ * import { ZeroAlerts } from '@genesislcap/foundation-alerts';
+ * ...
+ * ZeroAlerts
+ * ```
+ *
+ * @example Load the micro frontend on-demand
+ * ```ts
+
+ *   const { ZeroAlerts } = await import('@genesislcap/foundation-alerts');
+ *   return ZeroAlerts;
+ * },
+ * ```
+ *
+ * @public
+ */
+export declare class ZeroAlerts extends FoundationAlerts {
+    /**
+     * @internal
+     */
+    connectedCallback(): Promise<void>;
+    /**
+     * @internal
+     */
+    protected loadRemotes(): Promise<void>;
+}
+
 export { }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-alerts",
   "description": "Genesis Foundation Alerts",
-  "version": "14.127.6",
+  "version": "14.128.0",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/foundation-alerts.d.ts",
@@ -23,6 +23,10 @@
       "types": "./dist/foundation-alerts.d.ts",
       "default": "./dist/esm/index.js"
     },
+    "./config": {
+      "types": "./dist/dts/config/index.d.ts",
+      "default": "./dist/esm/config/index.js"
+    },
     "./e2e": {
       "default": "./test/e2e/index.ts"
     },
@@ -30,6 +34,9 @@
   },
   "typesVersions": {
     "*": {
+      "config": [
+        "./dist/dts/config/index.d.ts"
+      ],
       "e2e": [
         "./test/e2e/index.ts"
       ]
@@ -53,15 +60,16 @@
     "test:debug": "genx test --debug"
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.127.6",
-    "@genesislcap/genx": "14.127.6",
+    "@genesislcap/foundation-testing": "14.128.0",
+    "@genesislcap/genx": "14.128.0",
     "rimraf": "^3.0.2"
   },
   "dependencies": {
-    "@genesislcap/foundation-comms": "14.127.6",
-    "@genesislcap/foundation-logger": "14.127.6",
-    "@genesislcap/foundation-ui": "14.127.6",
-    "@genesislcap/foundation-zero": "14.127.6",
+    "@genesislcap/foundation-comms": "14.128.0",
+    "@genesislcap/foundation-logger": "14.128.0",
+    "@genesislcap/foundation-ui": "14.128.0",
+    "@genesislcap/foundation-utils": "14.128.0",
+    "@genesislcap/foundation-zero": "14.128.0",
     "@microsoft/fast-components": "^2.30.6",
     "@microsoft/fast-element": "^1.12.0",
     "@microsoft/fast-foundation": "^2.49.4",
@@ -79,5 +87,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "bee68a5b13b648123943e49d547c27da5a7ff6ed"
+  "gitHead": "5fc8cef3a47b0b518e28d67f03b3ac7f4df99b38"
 }