@genesislcap/foundation-header 9.0.1-alpha-b5c5eb7.0

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

@@ -0,0 +1,10 @@
+/**
+ * TODO: Bring all the style and typography mixins into the design system package
+ */
+export declare const mixinScreen: (display?: string) => string;
+/**
+ * TODO
+ */
+export declare const genesisLogo: (slot?: string) => string;
+export declare const settingsIcon: (slot?: string) => string;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/styles/styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,WAAW,aAAa,MAAM,WAM1C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,2BAIvB,CAAC;AAEF,eAAO,MAAM,YAAY,2BAIxB,CAAC"}

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

@@ -0,0 +1,5 @@
+/**
+ * TODO: Bring all the style and typography mixins into the design system package
+ */
+export declare const stylesFontFaces: string;
+//# sourceMappingURL=typography.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/styles/typography.ts"],"names":[],"mappings":"AAAA;;GAEG;AAQH,eAAO,MAAM,eAAe,QAU3B,CAAC"}

package/dist/dts/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.34.4"
+    }
+  ]
+}

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

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

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

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

package/dist/dts/utils/logger.d.ts

@@ -0,0 +1,2 @@
+export declare const logger: import("@genesislcap/foundation-utils").Logger;
+//# sourceMappingURL=logger.d.ts.map

package/dist/dts/utils/logger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../../src/utils/logger.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,MAAM,gDAAoC,CAAC"}

package/dist/esm/assets/logo.svg

@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.7702 23.0437C18.7702 22.4675 18.8526 21.8089 19.0995 21.3149C19.3465 20.7386 19.6758 20.2447 20.0874 19.833C20.4991 19.4214 20.993 19.0921 21.5693 18.8451C22.1456 18.5982 22.7219 18.5158 23.2981 18.5158H25.9326V11.6828H19.1819V14.3172C19.1819 15.5521 18.6879 16.7047 17.8647 17.5279C17.0414 18.3512 15.8888 18.8451 14.7363 18.9275H6.7507V6.99025H16.4651V0.157227H3.54C2.63442 0.157227 1.72884 0.568855 1.07023 1.22746C0.411628 1.88606 0 2.79165 0 3.77955V22.2205C0 23.1261 0.411628 24.0316 1.07023 24.7726C1.72884 25.4312 2.63442 25.8428 3.54 25.8428H18.7702V23.0437Z" fill="white"/>
+</svg>

package/dist/esm/components/components.js

@@ -0,0 +1,43 @@
+import { __awaiter } from "tslib";
+/**
+ * These DS / Component imports will be replaced with an import from the local alpha design system.
+ * We're just fixing something on our side to allow you to extend zero.
+ */
+import { allComponents, provideFASTDesignSystem } from '@microsoft/fast-components';
+import { logger } from '../utils';
+provideFASTDesignSystem().register(allComponents);
+var ResourceType;
+(function (ResourceType) {
+    ResourceType["local"] = "local";
+    ResourceType["remote"] = "remote";
+})(ResourceType || (ResourceType = {}));
+function loadZeroFallback() {
+    return import(
+    /* webpackMode: "lazy" */
+    '@genesislcap/foundation-zero');
+}
+export const loadZeroDesignSystem = () => __awaiter(void 0, void 0, void 0, function* () {
+    let type = ResourceType.remote;
+    try {
+        // @ts-ignore
+        return yield import('foundationZero/ZeroDesignSystem');
+    }
+    catch (e) {
+        type = ResourceType.local;
+        return yield loadZeroFallback();
+    }
+    finally {
+        logger.debug(`Using '${type}' version of foundationZero/DesignSystem`);
+    }
+});
+/**
+ * Load the wp5 module federation remote versions, or fallback to code split bundled versions.
+ * You would really be targeting the client's design system, components etc here. For now just targeting zero.
+ */
+export const loadRemotes = () => __awaiter(void 0, void 0, void 0, function* () {
+    const { registerZeroDesignSystem } = yield loadZeroDesignSystem();
+    return {
+        ZeroDesignSystem: registerZeroDesignSystem(),
+    };
+});
+//# sourceMappingURL=components.js.map

package/dist/esm/components/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../../../src/components/components.ts"],"names":[],"mappings":";AAAA;;;GAGG;AACH,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,uBAAuB,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;AAElD,IAAK,YAGJ;AAHD,WAAK,YAAY;IACf,+BAAe,CAAA;IACf,iCAAiB,CAAA;AACnB,CAAC,EAHI,YAAY,KAAZ,YAAY,QAGhB;AAED,SAAS,gBAAgB;IACvB,OAAO,MAAM;IACX,yBAAyB;IACzB,8BAA8B,CAC/B,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAS,EAAE;IAC7C,IAAI,IAAI,GAAG,YAAY,CAAC,MAAM,CAAC;IAC/B,IAAI;QACF,aAAa;QACb,OAAO,MAAM,MAAM,CAAC,iCAAiC,CAAC,CAAC;KACxD;IAAC,OAAO,CAAC,EAAE;QACV,IAAI,GAAG,YAAY,CAAC,KAAK,CAAC;QAC1B,OAAO,MAAM,gBAAgB,EAAE,CAAC;KACjC;YAAS;QACR,MAAM,CAAC,KAAK,CAAC,UAAU,IAAI,0CAA0C,CAAC,CAAC;KACxE;AACH,CAAC,CAAA,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAS,EAAE;IACpC,MAAM,EAAE,wBAAwB,EAAE,GAAG,MAAM,oBAAoB,EAAE,CAAC;IAClE,OAAO;QACL,gBAAgB,EAAE,wBAAwB,EAAE;KAC7C,CAAC;AACJ,CAAC,CAAA,CAAC"}

package/dist/esm/components/index.js

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/index.js.map

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

package/dist/esm/index.federated.js

@@ -0,0 +1,2 @@
+import('./index');
+//# sourceMappingURL=index.federated.js.map

package/dist/esm/index.federated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.federated.js","sourceRoot":"","sources":["../../src/index.federated.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,SAAS,CAAC,CAAC"}

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from './main/index';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

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

package/dist/esm/main/index.js

@@ -0,0 +1,4 @@
+export * from './main.styles';
+export { NavTemplate } from './main.template';
+export * from './main';
+//# sourceMappingURL=index.js.map

package/dist/esm/main/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/main/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,cAAc,QAAQ,CAAC"}

package/dist/esm/main/main.css

@@ -0,0 +1,13 @@
+/* index.ejs styling */
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+:not(:defined) {
+  visibility: hidden;
+}

package/dist/esm/main/main.js

@@ -0,0 +1,222 @@
+import { __awaiter, __decorate } from "tslib";
+import { Auth, CredentialManager } from '@genesislcap/foundation-comms';
+import { EventEmitter } from '@genesislcap/foundation-events';
+import { FASTElement, customElement, observable, attr } from '@microsoft/fast-element';
+import { Route } from '@microsoft/fast-router';
+import { DynamicTemplate as template, LoadingTemplate, MainTemplate } from './main.template';
+import { MainStyles as styles } from './main.styles';
+import { logger } from '../utils';
+import * as Components from '../components';
+import logo from '../assets/logo.svg';
+const name = 'foundation-header';
+/**
+ * Navigation micro-frontend includes navigation bar and flyout menu
+ *
+ * @remarks
+ *
+ * `foundation-header` micro-frontend can be added to the project to include a navigation bar
+ * and flyout menu. There are multiple ways that the behaviour of the component can be configured
+ * - the icon shown on the navigation bar and flyout menu (this shows the Genesis logo by default).
+ * - navigation links at the left-hand side of the navigation bar.
+ * - the control buttons on the right-hand side of the navigation bar can be shown or hidden, and their behaviour controlled via event listeners
+ * - The contents of the flyout menu.
+ *
+ * @param logo-src - Option attribute which sets the source of the image in the navigation bar and flyout menu. The Genesis logo will be shown if this attribute is not provided.
+ * @param show-luminance-toggle-button - Boolean attribute which controls whether the navigation bar will display the luminance toggle icon.
+ * @param show-misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the miscellaneous behaviour icon.
+ * @param show-misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the show notification icon.
+ *
+ * @public
+ */
+let Navigation = class Navigation extends EventEmitter(FASTElement) {
+    constructor() {
+        super(...arguments);
+        this.ready = false;
+        this.sideNavOpen = false;
+        /**
+         * Optional attribute which controls the icon to show on the navigation bar and flyout
+         * Control via `logo-src`
+         *
+         * @remarks
+         *
+         * If this attribute is not set then the Genesis logo is shown instead
+         */
+        this.logoSrc = logo;
+    }
+    connectedCallback() {
+        const _super = Object.create(null, {
+            connectedCallback: { get: () => super.connectedCallback }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.connectedCallback.call(this);
+            logger.debug(`${name} is now connected to the DOM`);
+            yield this.loadRemotes();
+            this.userName = this.auth.loggedUserResult
+                ? this.auth.loggedUserResult.username
+                : 'Genesis User';
+        });
+    }
+    /**
+     * Load remote components
+     *
+     * @remarks
+     *
+     * With regards to module federation
+     *
+     * @internal
+     */
+    loadRemotes() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const remoteComponents = yield Components.loadRemotes();
+            this.ready = true;
+        });
+    }
+    selectTemplate() {
+        return this.ready ? MainTemplate : LoadingTemplate;
+    }
+    /**
+     * Logs the user out of their session
+     *
+     * @remarks
+     *
+     * Activated when the user clicks on the logout button on the right hand side of the navigation bar. Requires
+     * the usage of the auth functionality from {@link @genesislcap/foundation-comms#Auth}.
+     *
+     * @public
+     */
+    logout() {
+        return __awaiter(this, void 0, void 0, function* () {
+            logger.debug('logout submission');
+            try {
+                const result = yield this.auth.logout();
+                if (!result.success) {
+                    logger.error(`Couldn't log out`, result);
+                    return;
+                }
+                logger.debug('logged out', result);
+                yield this.credentialManager.preventSilentAccess();
+                this.navigateTo('/');
+            }
+            catch (err) {
+                logger.error(`Error: ${err.message}`);
+            }
+        });
+    }
+    /**
+     * Changes the route of the current page
+     *
+     * @remarks
+     *
+     * Requires setup of the Router and usage of the FAST Router
+     *
+     * @param path - string represeting the new route to move to
+     *
+     * @public
+     */
+    navigateTo(path) {
+        try {
+            logger.debug('navigateTo', path);
+            Route.path.push(path);
+        }
+        catch (err) {
+            logger.error(`Error: ${err.message}`);
+        }
+    }
+    /**
+     * Opens the flyout menu on the left hand side
+     *
+     * @remarks
+     *
+     * Activated when the user clicks on the menu button on the navigation
+     * bar left hand side
+     *
+     * @internal
+     */
+    toggleNavVisibility() {
+        this.sideNavOpen = !this.sideNavOpen;
+    }
+    /**
+     * Emits the event corresponding to the luminance icon being clicked
+     *
+     * @remarks
+     *
+     * Activated when the user clicks on the moon icon on the navigation
+     * bar right hand side
+     *
+     * @internal
+     */
+    luminanceIconEvent() {
+        this.$emit('luminance-icon-clicked');
+    }
+    /**
+     * Emits the event corresponding to the miscellaneous icon being clicked
+     *
+     * @remarks
+     *
+     * Activated when the user clicks on the menu icon on the navigation
+     * bar right hand side
+     *
+     * @internal
+     */
+    miscIconEvent() {
+        this.$emit('misc-icon-clicked');
+    }
+    /**
+     * Emits the event corresponding to the notification icon being clicked
+     *
+     * @remarks
+     *
+     * Activated when the user clicks on the bell icon on the navigation
+     * bar right hand side
+     *
+     * @internal
+     */
+    notificationIconEvent() {
+        this.$emit('notification-icon-clicked');
+    }
+};
+__decorate([
+    Auth
+], Navigation.prototype, "auth", void 0);
+__decorate([
+    CredentialManager
+], Navigation.prototype, "credentialManager", void 0);
+__decorate([
+    observable
+], Navigation.prototype, "provider", void 0);
+__decorate([
+    observable
+], Navigation.prototype, "ready", void 0);
+__decorate([
+    observable
+], Navigation.prototype, "userName", void 0);
+__decorate([
+    observable
+], Navigation.prototype, "sideNavOpen", void 0);
+__decorate([
+    attr({ attribute: 'logo-src' })
+], Navigation.prototype, "logoSrc", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'show-luminance-toggle-button' })
+], Navigation.prototype, "showLuminanceToggleButton", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'show-misc-toggle-button' })
+], Navigation.prototype, "showMiscToggleButton", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'show-notification-button' })
+], Navigation.prototype, "showNotificationsButton", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'hide-side-bar' })
+], Navigation.prototype, "hideSideBar", void 0);
+__decorate([
+    observable
+], Navigation.prototype, "routeButtons", void 0);
+Navigation = __decorate([
+    customElement({
+        name,
+        template,
+        styles,
+    })
+], Navigation);
+export { Navigation };
+//# sourceMappingURL=main.js.map

package/dist/esm/main/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../../../src/main/main.ts"],"names":[],"mappings":"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"}

package/dist/esm/main/main.styles.js

@@ -0,0 +1,250 @@
+import { neutralLayer2, } from '@microsoft/fast-components';
+import { css } from '@microsoft/fast-element';
+import { stylesFontFaces } from '../styles';
+import './main.css';
+import { backgroundNavOption, ColorHEX, defaultBackgroundHover, defaultBackgroundItem, PrimaryRapidColorHEX, } from '../styles/colors';
+/**
+ * Base styles for the foundation-header
+ *
+ * @returns ElementStyles instance for the foundation-header
+ *
+ * @public
+ */
+export const MainStyles = css `
+  ${stylesFontFaces}
+  :host {
+    display: flex;
+    flex-direction: row;
+
+    --primary-gradient-angle: -113.5deg;
+    --design-unit: 2.5;
+  }
+
+  zero-design-system-provider,
+  .dynamic-template {
+    width: 100%;
+  }
+
+  .nav-listbox {
+    background: ${neutralLayer2};
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    box-shadow: 0 0 15px 0 rgb(0 0 0 / 30%);
+  }
+
+  fast-listbox {
+    border-color: var(--rapid-ag-background-color);
+  }
+
+  .nav-leftside {
+    background: ${neutralLayer2};
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    margin-left: calc(var(--design-unit) * 6px);
+    display: flex;
+  }
+
+  .nav-leftside:focus-within {
+    box-shadow: none;
+  }
+
+  ::slotted(fast-option),
+  .nav-listbox fast-option {
+    margin: 0 calc(var(--design-unit) * 2px);
+    padding: 0 calc(var(--design-unit) * 6px);
+
+    --focus-stroke-width: 0;
+  }
+
+  ::slotted(fast-option.selected),
+  .nav-listbox fast-option.selected {
+    background: ${backgroundNavOption};
+    color: ${ColorHEX.white};
+  }
+
+  ::slotted(fast-option:not(.selected)),
+  .nav-listbox fast-option:not(.selected) {
+    background-color: ${defaultBackgroundItem};
+    color: #c9c9c9;
+  }
+
+  ::slotted(fast-option:not(.selected):hover),
+  .nav-listbox fast-option:not(.selected):hover {
+    background-color: ${defaultBackgroundHover};
+    color: ${ColorHEX.white};
+  }
+
+  .top-layout zero-icon {
+    position: absolute;
+    right: calc(var(--design-unit) * 6px);
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 25px;
+    opacity: 80%;
+    cursor: pointer;
+  }
+
+  .logout-container zero-icon {
+    padding: 0 calc(var(--design-unit) * 3px);
+  }
+
+  .nav-listbox .bars-container {
+    margin-right: calc(var(--design-unit) * 3px);
+  }
+
+  .user-container zero-icon {
+    font-size: 20px;
+    margin-right: calc(var(--design-unit) * 2px);
+    color: #879ba6;
+  }
+
+  .group-container zero-icon {
+    padding-right: 10px;
+    color: #879ba6;
+  }
+
+  .nav-listbox .bars-container zero-icon {
+    cursor: pointer;
+    font-size: calc(var(--design-unit) * 8px);
+    background: linear-gradient(
+          var(--primary-gradient-angle),
+          ${PrimaryRapidColorHEX.blue} 0%,
+          ${PrimaryRapidColorHEX.purple} 100%
+        )
+        top/100% 1px,
+      linear-gradient(
+          var(--primary-gradient-angle),
+          ${PrimaryRapidColorHEX.blue} 0%,
+          ${PrimaryRapidColorHEX.purple} 100%
+        )
+        bottom/100% 1px;
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .logo-container {
+    display: flex;
+    align-items: center;
+    margin-right: calc(var(--design-unit) * 3px);
+  }
+
+  .logo {
+    height: calc(var(--design-unit) * 8px);
+    width: calc(var(--design-unit) * 10px);
+  }
+
+  .nav-rightside {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    margin-right: calc(var(--design-unit) * 6px);
+    color: #c9c9c9;
+  }
+
+  .user-container {
+    background-color: ${defaultBackgroundItem};
+    padding: calc(var(--design-unit) * 1px);
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    cursor: pointer;
+  }
+
+  .icon-container {
+    font-size: 20px;
+    padding: calc(var(--design-unit) * 3px);
+    margin-right: calc(var(--design-unit) * 4px);
+    color: #879ba6;
+    cursor: pointer;
+  }
+
+  .open-nav {
+    width: 300px;
+  }
+
+  .top-layout {
+    background: linear-gradient(
+          var(--primary-gradient-angle),
+          ${PrimaryRapidColorHEX.blue} 0%,
+          ${PrimaryRapidColorHEX.purple} 100%
+        )
+        top/100% 1px,
+      linear-gradient(
+          var(--primary-gradient-angle),
+          ${PrimaryRapidColorHEX.blue} 0%,
+          ${PrimaryRapidColorHEX.purple} 100%
+        )
+        bottom/100% 1px;
+    background-origin: border-box;
+    background-size: cover;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 15%;
+    max-height: 120px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+  }
+
+  .top-layout img {
+    width: 50px;
+    margin-left: calc(var(--design-unit) * 6px);
+  }
+
+  .top-layout zero-icon:hover {
+    opacity: 100%;
+  }
+
+  .group-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  ::slotted(zero-tree-view) {
+    --type-ramp-base-font-size: 12px;
+  }
+
+  ::slotted(div) {
+    color: ${PrimaryRapidColorHEX.blue};
+    font-size: var(--type-ramp-minus-1-font-size);
+    margin-bottom: calc(var(--design-unit) * 4px);
+    padding-left: calc(var(--design-unit) * 4px);
+    padding-right: calc(var(--design-unit) * 4px);
+  }
+
+  .nav-preferences {
+    width: 100%;
+    height: 25%;
+    max-height: 250px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  .logout-container {
+    align-items: center;
+    background-color: var(--neutral-fill-rest);
+    border: calc(var(--stroke-width) * 1px) solid ${defaultBackgroundItem};
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    height: 8%;
+    max-height: 80px;
+    padding: 3%;
+  }
+
+  .logout-container:hover {
+    background-color: var(--neutral-fill-hover);
+  }
+`;
+//# sourceMappingURL=main.styles.js.map

package/dist/esm/main/main.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.styles.js","sourceRoot":"","sources":["../../../src/main/main.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,aAAa,GAGd,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,YAAY,CAAC;AACpB,OAAO,EACL,mBAAmB,EACnB,QAAQ,EACR,sBAAsB,EACtB,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,kBAAkB,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;IACzB,eAAe;;;;;;;;;;;;;;;kBAeD,aAAa;;;;;;;;;;;;;;kBAcb,aAAa;;;;;;;;;;;;;;;;;;;;;;kBAsBb,mBAAmB;aACxB,QAAQ,CAAC,KAAK;;;;;wBAKH,qBAAqB;;;;;;wBAMrB,sBAAsB;aACjC,QAAQ,CAAC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAqCf,oBAAoB,CAAC,IAAI;YACzB,oBAAoB,CAAC,MAAM;;;;;YAK3B,oBAAoB,CAAC,IAAI;YACzB,oBAAoB,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA8Bf,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;YAwBjC,oBAAoB,CAAC,IAAI;YACzB,oBAAoB,CAAC,MAAM;;;;;YAK3B,oBAAoB,CAAC,IAAI;YACzB,oBAAoB,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAmC1B,oBAAoB,CAAC,IAAI;;;;;;;;;;;;;;;;;;;oDAmBc,qBAAqB;;;;;;;;;;;;CAYxE,CAAC"}