@baloise/ds-core 0.0.5-nightly.e56f740

package/components/bal-logo.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface BalLogo extends Components.BalLogo, HTMLElement {}
+export const BalLogo: {
+    prototype: BalLogo;
+    new (): BalLogo;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bal-logo.js

@@ -0,0 +1,6 @@
+import { L as Logo, d as defineCustomElement$1 } from './bal-logo2.js';
+
+const BalLogo = Logo;
+const defineCustomElement = defineCustomElement$1;
+
+export { BalLogo, defineCustomElement };

package/components/bal-logo2.js

@@ -0,0 +1,169 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { B as BEM } from './bem.js';
+import { L as Logger } from './log.js';
+import { k as rIC } from './helpers.js';
+import { b as balBreakpoints } from './breakpoints.subject.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
+import { L as ListenToConfig } from './config.decorator.js';
+
+const balLogoCss = ".bal-logo{position:static;display:block;height:22px}.bal-logo svg{-webkit-transform:unset !important;transform:unset !important}.bal-logo svg svg,.bal-logo svg g,.bal-logo svg path,.bal-logo svg circle{fill:#000d6e}.bal-logo>div{height:22px}@media screen and (min-width: 1024px){.bal-logo--animated{margin-left:-7px}}.bal-logo--white svg svg,.bal-logo--white svg g,.bal-logo--white svg path,.bal-logo--white svg circle{fill:#fff}@media screen and (min-width: 1024px){.bal-logo{height:32px}.bal-logo>div{height:32px}}.bal-logo--size-small{height:22px}.bal-logo--size-small>div{height:22px}";
+const BalLogoStyle0 = balLogoCss;
+
+const Logo = /*@__PURE__*/ proxyCustomElement(class Logo extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.isTouch = balBreakpoints.isTouch;
+        this.doesConfigAllowAnimation = true;
+        this.color = 'blue';
+        this.size = '';
+        this.animated = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    animatedWatcher() {
+        if (!this.isAnimated) {
+            this.destroyAnimation();
+        }
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback() {
+        this.animatedWatcher();
+    }
+    componentDidUpdate() {
+        this.resetAnimation();
+    }
+    componentDidLoad() {
+        this.resetAnimation();
+    }
+    disconnectedCallback() {
+        if (this.el && !this.el.isConnected) {
+            this.destroyAnimation();
+        }
+    }
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    breakpointListener(breakpoints) {
+        this.isTouch = breakpoints.touch;
+    }
+    configChanged(state) {
+        this.doesConfigAllowAnimation = state.animated;
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    get isAnimated() {
+        return this.doesConfigAllowAnimation && this.animated;
+    }
+    async resetAnimation() {
+        this.destroyAnimation();
+        if (this.animated) {
+            await this.loadAnimation();
+            if (this.animationFunction) {
+                this.destroyAnimation();
+                this.animationItem = this.animationFunction(this.animatedLogoElement, this.color);
+            }
+        }
+    }
+    async loadAnimation() {
+        return new Promise((resolve, reject) => {
+            if (this.animationFunction) {
+                return resolve();
+            }
+            else {
+                rIC(async () => {
+                    import(/* @vite-ignore */ './bal-logo.animation.js')
+                        .then(module => {
+                        this.animationFunction = module.animate;
+                        resolve();
+                    })
+                        .catch(reject);
+                });
+            }
+        });
+    }
+    destroyAnimation() {
+        if (this.animated && this.animationItem && this.animationItem.destroy) {
+            this.animationItem.destroy();
+        }
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const logoBlock = BEM.block('logo');
+        const AnimatedLogo = () => {
+            return (h("div", { style: {
+                    width: this.isTouch ? '100px' : '158px',
+                    height: this.isTouch ? '22px' : '32px',
+                }, ref: el => (this.animatedLogoElement = el) }));
+        };
+        const LargeLogo = () => {
+            return (h("svg", { focusable: "false", "aria-hidden": "true", width: "158", height: "32", viewBox: "0 0 158 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M112.351 3.52166C112.351 1.47065 114.09 0 116.118 0C118.146 0 119.727 1.47065 119.727 3.52166C119.727 5.57268 118.146 7.00945 116.118 7.00945C114.09 7.00945 112.351 5.57324 112.351 3.52166ZM113.231 9.43647H118.97V27.4547H113.231V9.43647ZM82.5903 2.46199H88.33V27.4541H82.5903V2.46199ZM48.3558 27.8995C53.6142 27.8995 57.3602 23.8647 57.3602 18.4631C57.3602 13.0609 53.7175 9.0266 48.4915 9.02715C46.5342 9.02715 44.8845 9.60807 43.5786 10.7022V2.46255H37.839V27.4547H43.132V25.9163C44.4378 27.1814 46.1908 27.8995 48.3558 27.8995ZM47.5312 14.02C49.9368 14.02 51.6893 15.8989 51.6893 18.4631C51.6893 21.0272 49.9368 22.8733 47.5312 22.8733C45.0224 22.8733 43.3034 21.0611 43.3034 18.4631C43.3034 15.8317 44.9877 14.02 47.5312 14.02ZM78.8057 27.4547V9.43647H73.5127V11.317C72.2409 10.0524 70.522 9.36815 68.2889 9.36815C63.0305 9.36815 59.2498 13.0614 59.2498 18.4631C59.2498 23.8647 63.0305 27.8995 68.2889 27.8995C70.5226 27.8995 72.2409 27.1464 73.5127 25.8135V27.4547H78.8057ZM69.114 14.02C71.6229 14.02 73.3072 15.83 73.3072 18.4631C73.3072 21.0617 71.6224 22.8733 69.114 22.8733C66.6744 22.8733 64.9554 21.0256 64.9554 18.4631C64.9554 15.9005 66.7084 14.02 69.114 14.02ZM100.74 9.02659C94.9667 9.02659 90.8422 13.0609 90.8422 18.463C90.8422 23.8308 94.9684 27.8995 100.74 27.8995C106.549 27.8995 110.673 23.8308 110.673 18.463C110.673 13.0609 106.546 9.02659 100.74 9.02659ZM100.774 14.0867C103.283 14.0867 104.899 15.8644 104.899 18.4286C104.899 21.0272 103.249 22.8389 100.774 22.8394C98.2656 22.8394 96.6159 20.9928 96.6159 18.463C96.6159 15.8639 98.2656 14.0867 100.774 14.0867ZM126.05 21.2666L121.307 23.0788C122.373 26.2267 125.294 27.8995 129.382 27.8962C134.159 27.8962 137.183 25.6397 137.183 21.9125C137.183 17.823 133.59 16.8788 130.834 16.1549C129.121 15.7047 127.732 15.3397 127.732 14.3566C127.732 13.6046 128.316 13.1603 129.484 13.1603C130.687 13.1603 131.547 13.7412 131.959 14.8697L136.705 13.0231C135.983 10.4945 133.302 9.02437 129.59 9.02437C125.019 9.02437 122.132 11.1465 122.132 14.6337C122.132 18.3232 125.492 19.3268 128.205 20.1373C130.043 20.6862 131.584 21.1465 131.584 22.2924C131.584 23.1127 130.896 23.6253 129.59 23.6253C127.734 23.6253 126.531 22.7711 126.05 21.2666ZM157.6 18.0871C157.6 13.644 154.094 8.99216 148.183 8.99216C142.959 8.99216 138.766 13.2686 138.766 18.463C138.766 23.8308 142.546 27.8995 148.527 27.8995C152.473 27.8995 154.804 26.3867 156.201 24.6616L152.901 21.3716C151.87 22.6401 150.726 23.2493 148.698 23.2493C146.533 23.2493 144.918 22.1552 144.334 20.1392H157.462C157.557 19.4593 157.603 18.7735 157.6 18.0871ZM144.264 16.5825C144.746 14.3943 146.223 13.2658 148.32 13.2658C150.416 13.2658 151.791 14.531 152.272 16.5825H144.264ZM16.7228 1.02356L31.1352 15.3613C31.2611 15.4866 31.3609 15.6354 31.4289 15.7991C31.497 15.9628 31.5319 16.1383 31.5318 16.3155C31.5316 16.4926 31.4964 16.668 31.428 16.8316C31.3597 16.9953 31.2596 17.1439 31.1335 17.269L27.2256 21.1566L15.7648 9.75525L9.17152 16.3143L15.7648 22.8733L19.8525 18.8063L24.7206 23.6486L16.7256 31.605C16.5997 31.7302 16.4503 31.8296 16.2859 31.8973C16.1215 31.9651 15.9453 32 15.7673 32C15.5893 32 15.4131 31.9651 15.2486 31.8973C15.0842 31.8296 14.9348 31.7302 14.809 31.605L0.396538 17.2673C0.142626 17.0145 0 16.6717 0 16.3143C0 15.9569 0.142626 15.6141 0.396538 15.3613L14.8062 1.02356C14.932 0.898338 15.0814 0.799001 15.2458 0.731227C15.4103 0.663454 15.5865 0.628572 15.7645 0.628572C15.9425 0.628572 16.1187 0.663454 16.2831 0.731227C16.4475 0.799001 16.5969 0.898338 16.7228 1.02356Z", fill: "#000D6E" })));
+        };
+        const SmallLogo = () => {
+            return (h("svg", { focusable: "false", "aria-hidden": "true", width: "100", height: "22", viewBox: "0 0 100 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M71.2886 3.08227C71.2886 1.78086 72.3924 0.84771 73.679 0.84771C74.9656 0.84771 75.9688 1.78086 75.9688 3.08227C75.9688 4.38368 74.9656 5.29533 73.679 5.29533C72.3924 5.29533 71.2886 4.38403 71.2886 3.08227ZM71.8472 6.83532H75.4888V18.2682H71.8472V6.83532ZM52.405 2.40989H56.0469V18.2678H52.405V2.40989ZM30.6826 18.5505C34.0192 18.5505 36.3961 15.9903 36.3961 12.5629C36.3961 9.13507 34.0847 6.57525 30.7687 6.5756C29.5268 6.5756 28.48 6.94421 27.6514 7.63843V2.41025H24.0095V18.2682H27.368V17.292C28.1966 18.0948 29.3089 18.5505 30.6826 18.5505ZM30.1594 9.74366C31.6858 9.74366 32.7978 10.9358 32.7978 12.5629C32.7978 14.1899 31.6858 15.3613 30.1594 15.3613C28.5675 15.3613 27.4768 14.2114 27.4768 12.5629C27.4768 10.8932 28.5455 9.74366 30.1594 9.74366ZM50.0036 18.2682V6.83532H46.6451V8.02854C45.8382 7.22613 44.7475 6.79197 43.3305 6.79197C39.994 6.79197 37.5951 9.13543 37.5951 12.5629C37.5951 15.9903 39.994 18.5505 43.3305 18.5505C44.7478 18.5505 45.8382 18.0726 46.6451 17.2269V18.2682H50.0036ZM43.8541 9.74367C45.446 9.74367 46.5147 10.8921 46.5147 12.5629C46.5147 14.2117 45.4457 15.3613 43.8541 15.3613C42.3061 15.3613 41.2154 14.1888 41.2154 12.5629C41.2154 10.9369 42.3277 9.74367 43.8541 9.74367ZM63.9216 6.57524C60.2581 6.57524 57.641 9.13507 57.641 12.5628C57.641 15.9688 60.2591 18.5505 63.9216 18.5505C67.6071 18.5505 70.2238 15.9688 70.2238 12.5628C70.2238 9.13507 67.6057 6.57524 63.9216 6.57524ZM63.9432 9.78595C65.5351 9.78595 66.5603 10.914 66.5603 12.541C66.5603 14.1899 65.5135 15.3394 63.9432 15.3398C62.3513 15.3398 61.3045 14.168 61.3045 12.5628C61.3045 10.9136 62.3513 9.78595 63.9432 9.78595ZM79.9809 14.3418L76.9717 15.4916C77.6475 17.489 79.5013 18.5505 82.095 18.5484C85.1262 18.5484 87.045 17.1166 87.045 14.7516C87.045 12.1567 84.765 11.5576 83.0168 11.0983C81.9297 10.8126 81.0482 10.581 81.0482 9.95722C81.0482 9.48007 81.4187 9.19815 82.1601 9.19815C82.9235 9.19815 83.4687 9.56676 83.7305 10.2828L86.7415 9.11111C86.2834 7.50664 84.5824 6.57384 82.2271 6.57384C79.327 6.57384 77.4949 7.92035 77.4949 10.1331C77.4949 12.4741 79.6268 13.1109 81.3484 13.6252C82.5143 13.9735 83.4921 14.2655 83.4921 14.9926C83.4921 15.5131 83.056 15.8384 82.2271 15.8384C81.0496 15.8384 80.2862 15.2964 79.9809 14.3418ZM99.9999 12.3243C99.9999 9.50508 97.7756 6.5534 94.0246 6.5534C90.7101 6.5534 88.0494 9.26686 88.0494 12.5628C88.0494 15.9688 90.4483 18.5505 94.2429 18.5505C96.7469 18.5505 98.2259 17.5905 99.1125 16.496L97.0183 14.4084C96.3644 15.2132 95.6385 15.5998 94.3516 15.5998C92.9779 15.5998 91.9531 14.9056 91.5822 13.6264H99.9128C99.9728 13.195 100.002 12.7598 99.9999 12.3243ZM91.5383 11.3696C91.8436 9.98118 92.7813 9.2651 94.1114 9.2651C95.4416 9.2651 96.3141 10.0679 96.6194 11.3696H91.5383ZM10.6109 1.49718L19.7559 10.5947C19.8357 10.6742 19.899 10.7686 19.9422 10.8725C19.9854 10.9764 20.0076 11.0878 20.0075 11.2002C20.0074 11.3126 19.985 11.4239 19.9416 11.5277C19.8983 11.6315 19.8348 11.7258 19.7548 11.8052L17.2751 14.272L10.003 7.03759L5.81949 11.1994L10.003 15.3613L12.5967 12.7806L15.6857 15.8532L10.6127 20.9017C10.5328 20.9811 10.438 21.0442 10.3337 21.0872C10.2294 21.1302 10.1175 21.1523 10.0046 21.1523C9.89169 21.1523 9.77986 21.1302 9.67553 21.0872C9.5712 21.0442 9.47641 20.9811 9.39657 20.9017L0.251611 11.8041C0.0904986 11.6437 0 11.4262 0 11.1994C0 10.9726 0.0904986 10.7551 0.251611 10.5947L9.3948 1.49718C9.47464 1.41772 9.56943 1.35469 9.67376 1.31169C9.77809 1.26868 9.88992 1.24655 10.0028 1.24655C10.1158 1.24655 10.2276 1.26868 10.3319 1.31169C10.4363 1.35469 10.5311 1.41772 10.6109 1.49718Z", fill: "#000D6E" })));
+        };
+        const LogoElement = this.isAnimated
+            ? AnimatedLogo
+            : (this.isTouch && this.size === '') || this.size === 'small'
+                ? SmallLogo
+                : LargeLogo;
+        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign({}, logoBlock.class()), logoBlock.modifier(this.color).class()), logoBlock.modifier(`size-${this.size}`).class(this.size !== '')), logoBlock.modifier('animated').class(this.animated)) }, h(LogoElement, null)));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "animated": ["animatedWatcher"]
+    }; }
+    static get style() { return BalLogoStyle0; }
+}, [0, "bal-logo", {
+        "color": [1],
+        "size": [1],
+        "animated": [4],
+        "isTouch": [32],
+        "doesConfigAllowAnimation": [32]
+    }, undefined, {
+        "animated": ["animatedWatcher"]
+    }]);
+__decorate([
+    Logger('bal-logo'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Logo.prototype, "createLogger", null);
+__decorate([
+    ListenToBreakpoints(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], Logo.prototype, "breakpointListener", null);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], Logo.prototype, "configChanged", null);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-logo"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-logo":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Logo);
+            }
+            break;
+    } });
+}
+
+export { Logo as L, defineCustomElement as d };

package/components/bal-modal-body.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface BalModalBody extends Components.BalModalBody, HTMLElement {}
+export const BalModalBody: {
+    prototype: BalModalBody;
+    new (): BalModalBody;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bal-modal-body.js

@@ -0,0 +1,29 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const ModalBody = /*@__PURE__*/ proxyCustomElement(class ModalBody extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    render() {
+        return (h(Host, { class: "bal-modal__body" }, h("slot", null)));
+    }
+}, [4, "bal-modal-body"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-modal-body"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-modal-body":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ModalBody);
+            }
+            break;
+    } });
+}
+
+const BalModalBody = ModalBody;
+const defineCustomElement = defineCustomElement$1;
+
+export { BalModalBody, defineCustomElement };

package/components/bal-modal-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface BalModalHeader extends Components.BalModalHeader, HTMLElement {}
+export const BalModalHeader: {
+    prototype: BalModalHeader;
+    new (): BalModalHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bal-modal-header.js

@@ -0,0 +1,57 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './bal-close2.js';
+import { d as defineCustomElement$3 } from './bal-heading2.js';
+import { d as defineCustomElement$2 } from './bal-icon2.js';
+
+const ModalHeader = /*@__PURE__*/ proxyCustomElement(class ModalHeader extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.closeHandler = () => {
+            if (this.parentModal) {
+                this.parentModal.dismiss(undefined, 'model-close');
+            }
+        };
+    }
+    get parentModal() {
+        return this.el.closest('bal-modal');
+    }
+    render() {
+        var _a;
+        return (h(Host, { class: "bal-modal__header" }, h("div", { class: "bal-modal__header__title" }, h("bal-heading", { level: "h2", space: "none" }, h("slot", null))), ((_a = this.parentModal) === null || _a === void 0 ? void 0 : _a.isClosable) ? (h("bal-close", { class: "bal-modal__header__close data-test-modal-close", onClick: this.closeHandler })) : ('')));
+    }
+    get el() { return this; }
+}, [4, "bal-modal-header"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-modal-header", "bal-close", "bal-heading", "bal-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-modal-header":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ModalHeader);
+            }
+            break;
+        case "bal-close":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "bal-heading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bal-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const BalModalHeader = ModalHeader;
+const defineCustomElement = defineCustomElement$1;
+
+export { BalModalHeader, defineCustomElement };

package/components/bal-modal.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface BalModal extends Components.BalModal, HTMLElement {}
+export const BalModal: {
+    prototype: BalModal;
+    new (): BalModal;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bal-modal.js

@@ -0,0 +1,292 @@
+import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, writeTask, h, Host } from '@stencil/core/internal/client';
+import { p as prepareOverlay, d as dismiss, e as eventMethod } from './overlays.js';
+import { c as componentOnReady, e as deepReady, f as wait } from './helpers.js';
+import { B as BalScrollHandler } from './scroll.js';
+import { b as balBrowser } from './browser.js';
+
+const attachComponent = async (delegate, container, component, cssClasses, componentProps) => {
+    if (delegate) {
+        return delegate.attachViewToDom(container, component, componentProps, cssClasses);
+    }
+    if (typeof component !== 'string' && !(component instanceof HTMLElement)) {
+        throw new Error('framework delegate is missing');
+    }
+    const el = typeof component === 'string'
+        ? container.ownerDocument && container.ownerDocument.createElement(component)
+        : component;
+    if (cssClasses) {
+        cssClasses.forEach(c => el.classList.add(c));
+    }
+    if (componentProps) {
+        Object.assign(el, componentProps);
+    }
+    container.appendChild(el);
+    await new Promise(resolve => componentOnReady(el, resolve));
+    return el;
+};
+const detachComponent = (delegate, element) => {
+    if (element) {
+        if (delegate) {
+            const container = element.parentElement;
+            return delegate.removeViewFromDom(container, element);
+        }
+        element.remove();
+    }
+    return Promise.resolve();
+};
+
+const getClassMap = (classes) => {
+    const map = {};
+    getClassList(classes).forEach(c => (map[c] = true));
+    return map;
+};
+const getClassList = (classes) => {
+    if (classes !== undefined) {
+        const array = Array.isArray(classes) ? classes : classes.split(' ');
+        return array
+            .filter(c => c != null)
+            .map(c => c.trim())
+            .filter(c => c !== '');
+    }
+    return [];
+};
+
+const balModalCss = ".bal-modal__background,.bal-modal{bottom:0;left:0;position:absolute;right:0;top:0}:root{--bal-modal-background:var(--bal-color-white);--bal-modal-backdrop-background:var(--bal-color-primary-6);--bal-modal-backdrop-opacity:.6;--bal-modal-radius:var(--bal-radius-large)}.bal-modal{-ms-flex-align:center;align-items:center;display:none;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;overflow:hidden;position:fixed;z-index:var(--bal-z-index-modal)}.bal-modal--is-active{display:-ms-flexbox;display:flex}.bal-modal__background{background:var(--bal-modal-backdrop-background);opacity:var(--bal-modal-backdrop-opacity)}.bal-modal__header__title{padding-right:2.5rem;line-height:2rem}.bal-modal__header__close{position:absolute !important;display:-ms-flexbox !important;display:flex !important;right:1.25rem !important;top:1.5rem !important;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:2rem;max-width:2rem;min-height:2rem;max-height:2rem}.bal-modal__container{position:fixed;top:0;bottom:0;left:0;right:0;overflow-x:none;overflow-y:auto;-ms-overflow-y:visible;padding:.5rem}@media screen and (min-width: 769px),print{.bal-modal__container{padding:0}}.bal-modal__content{overflow:none;position:relative;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background:var(--bal-modal-background);border-radius:var(--bal-modal-radius);padding:1rem}@media screen and (min-width: 769px),print{.bal-modal__content{margin:3rem auto;width:var(--bal-modal-width, var(--bal-width, 40rem))}}.bal-modal__content .bal-modal__header{padding-bottom:1rem}.bal-modal__content .bal-modal__header__close{right:1.2rem !important;top:.7rem !important}@media screen and (min-width: 769px),print{.bal-modal__content{padding:1.5rem}.bal-modal__content .bal-modal__header{padding-bottom:1.5rem}.bal-modal__content .bal-modal__header__close{right:1.6rem !important;top:1.2rem !important}}@media screen and (min-width: 1024px){.bal-modal__content{padding:2.5rem}.bal-modal__content .bal-modal__header{padding-bottom:2.5rem}.bal-modal__content .bal-modal__header__close{right:2.7rem !important;top:2.2rem !important}}@media screen and (min-width: 769px),print{.bal-modal__content--has-spacing-small{padding:1rem}.bal-modal__content--has-spacing-small .bal-modal__header{padding-bottom:1rem}.bal-modal__content--has-spacing-small .bal-modal__header__close{right:1.1rem !important;top:.7rem !important}}@media screen and (min-width: 1024px){.bal-modal__content--has-spacing-small{padding:1rem}.bal-modal__content--has-spacing-small .bal-modal__header{padding-bottom:1rem}.bal-modal__content--has-spacing-small .bal-modal__header__close{right:1.1rem !important;top:.7rem !important}}@media screen and (min-width: 769px),print{.bal-modal__content--has-spacing-medium{padding:1.5rem}.bal-modal__content--has-spacing-medium .bal-modal__header{padding-bottom:1.5rem}.bal-modal__content--has-spacing-medium .bal-modal__header__close{right:1.6rem !important;top:1.2rem !important}}@media screen and (min-width: 1024px){.bal-modal__content--has-spacing-medium{padding:1.5rem}.bal-modal__content--has-spacing-medium .bal-modal__header{padding-bottom:1.5rem}.bal-modal__content--has-spacing-medium .bal-modal__header__close{right:1.6rem !important;top:1.2rem !important}}.bal-modal__body>bal-button-group{padding-top:1rem}";
+const BalModalStyle0 = balModalCss;
+
+const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement$1 {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.didPresent = createEvent(this, "balModalDidPresent", 7);
+        this.willPresent = createEvent(this, "balModalWillPresent", 7);
+        this.willDismiss = createEvent(this, "balModalWillDismiss", 7);
+        this.didDismiss = createEvent(this, "balModalDidDismiss", 7);
+        this.isClickedOutsideOnMouseDown = false;
+        this.isClickedOutsideOnMouseUp = false;
+        this.bodyScrollHandler = new BalScrollHandler();
+        this.presented = false;
+        this.overlayIndex = undefined;
+        this.delegate = undefined;
+        this.dataTestId = undefined;
+        this.modalWidth = 640;
+        this.space = '';
+        this.hasBackdrop = true;
+        this.isClosable = true;
+        this.component = undefined;
+        this.componentProps = undefined;
+        this.cssClass = undefined;
+        this.backdropDismiss = true;
+        this.demo = false;
+    }
+    connectedCallback() {
+        this.bodyScrollHandler.connect();
+        prepareOverlay(this);
+        if (balBrowser.hasDocument && this.demo) {
+            this.open();
+        }
+    }
+    disconnectedCallback() {
+        this.bodyScrollHandler.disconnect();
+    }
+    /**
+     * @internal Opens the modal.
+     */
+    async open() {
+        await deepReady(this.usersElement);
+        this.setModalActiveOnBody();
+        writeTask(() => {
+            if (this.modalBackgroundElement) {
+                this.modalBackgroundElement.classList.add('fadeIn');
+            }
+            if (this.modalContentElement) {
+                this.modalContentElement.classList.add('fadeInDown');
+            }
+        });
+        if (this.presented) {
+            return;
+        }
+        this.willPresent.emit();
+        this.presented = true;
+        await wait(150);
+        writeTask(() => {
+            if (this.modalBackgroundElement) {
+                this.modalBackgroundElement.classList.remove('fadeIn');
+            }
+            if (this.modalContentElement) {
+                this.modalContentElement.classList.remove('fadeInDown');
+            }
+        });
+        this.didPresent.emit();
+    }
+    /**
+     * @internal Closes the modal.
+     */
+    async close() {
+        this.willDismiss.emit();
+        this.unsetModalActiveOnBody();
+        this.presented = false;
+        this.didDismiss.emit();
+    }
+    /**
+     * Presents the modal through the modal controller
+     */
+    async present() {
+        this.setModalActiveOnBody();
+        if (this.presented) {
+            return;
+        }
+        const container = this.el.querySelector(`.bal-modal__content`);
+        if (!container) {
+            throw new Error('container is undefined');
+        }
+        const componentProps = Object.assign(Object.assign({}, this.componentProps), { modal: this.el });
+        this.usersElement = await attachComponent(this.delegate, container, this.component, [], componentProps);
+        await this.open();
+    }
+    /**
+     * Closes the presented modal with the modal controller
+     */
+    async dismiss(data, role) {
+        this.unsetModalActiveOnBody();
+        if (this.delegate === undefined) {
+            await this.close();
+            return true;
+        }
+        const dismissed = await dismiss(this, data, role, async () => {
+            writeTask(() => {
+                if (this.modalBackgroundElement) {
+                    this.modalBackgroundElement.classList.add('fadeOut');
+                }
+                if (this.modalContentElement) {
+                    this.modalContentElement.classList.add('fadeOutUp');
+                }
+            });
+            await wait(140);
+        });
+        if (dismissed) {
+            await detachComponent(this.delegate, this.usersElement);
+        }
+        return dismissed;
+    }
+    /**
+     * Returns a promise that resolves when the modal did dismiss.
+     */
+    onDidDismiss() {
+        return eventMethod(this.el, 'balModalDidDismiss');
+    }
+    /**
+     * Returns a promise that resolves when the modal will dismiss.
+     */
+    onWillDismiss() {
+        return eventMethod(this.el, 'balModalWillDismiss');
+    }
+    async onClickCloseButton(ev) {
+        if (this.isClosable && this.presented && ev && ev.target) {
+            const element = ev.target;
+            const closestBalButton = element.closest('bal-button');
+            if (closestBalButton && closestBalButton.hasAttribute('modal-close')) {
+                await this.dismiss(undefined, 'model-close');
+            }
+            if (this.backdropDismiss && this.isClickedOutsideOnMouseUp && this.isClickedOutsideOnMouseDown) {
+                await this.dismiss(undefined, 'model-close');
+            }
+        }
+    }
+    async onMouseDown(ev) {
+        this.isClickedOutsideOnMouseDown = this.isClickedOutside(ev);
+    }
+    async onMouseUp(ev) {
+        this.isClickedOutsideOnMouseUp = this.isClickedOutside(ev);
+    }
+    async handleKeyUp(ev) {
+        const modals = Array.from(document.querySelectorAll('bal-modal')).filter(el => el.hasAttribute('aria-presented'));
+        const numbers = modals
+            .map(el => el.overlayIndex)
+            .map(num => parseInt(num))
+            .filter(num => !Number.isNaN(num));
+        const max = Math.max(...numbers);
+        if (this.overlayIndex === max) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            if (this.presented && this.isClosable) {
+                if (ev.key === 'Escape' || ev.key === 'Esc') {
+                    if (this.delegate) {
+                        await this.dismiss(undefined, 'model-escape');
+                    }
+                    else {
+                        await this.close();
+                    }
+                }
+            }
+        }
+    }
+    setModalActiveOnBody() {
+        if (!this.demo) {
+            this.bodyScrollHandler.disable();
+        }
+    }
+    unsetModalActiveOnBody() {
+        this.bodyScrollHandler.enable();
+    }
+    isClickedOutside(ev) {
+        if (this.isClosable && this.presented && ev && ev.target && this.backdropDismiss) {
+            const element = ev.target;
+            return element.classList.contains('bal-modal__container');
+        }
+        return false;
+    }
+    render() {
+        return (h(Host, { "aria-modal": "true", "aria-presented": this.presented ? 'true' : null, "data-testid": this.dataTestId, tabindex: "-1", class: Object.assign({ 'bal-modal': true, 'bal-modal--is-closable': this.isClosable, 'bal-modal--is-active': this.presented }, getClassMap(this.cssClass)), style: {
+                '--bal-width': `${this.modalWidth}px`,
+            } }, h("div", { class: {
+                'bal-modal__background': true,
+                'is-hidden': !this.hasBackdrop,
+            }, ref: div => (this.modalBackgroundElement = div) }), h("div", { class: {
+                'bal-modal__container': true,
+            }, ref: div => (this.modalContainerElement = div) }, h("div", { class: {
+                'bal-modal__content': true,
+                [`bal-modal__content--has-spacing-${this.space}`]: true,
+            }, ref: div => (this.modalContentElement = div) }, h("slot", null)))));
+    }
+    get el() { return this; }
+    static get style() { return BalModalStyle0; }
+}, [4, "bal-modal", {
+        "overlayIndex": [1026, "overlay-index"],
+        "delegate": [16],
+        "dataTestId": [1, "data-test-id"],
+        "modalWidth": [2, "modal-width"],
+        "space": [1],
+        "hasBackdrop": [4, "has-backdrop"],
+        "isClosable": [4, "is-closable"],
+        "component": [1],
+        "componentProps": [16],
+        "cssClass": [1, "css-class"],
+        "backdropDismiss": [4, "backdrop-dismiss"],
+        "demo": [4],
+        "presented": [32],
+        "open": [64],
+        "close": [64],
+        "present": [64],
+        "dismiss": [64],
+        "onDidDismiss": [64],
+        "onWillDismiss": [64]
+    }, [[0, "click", "onClickCloseButton"], [1, "mousedown", "onMouseDown"], [1, "mouseup", "onMouseUp"], [16, "keyup", "handleKeyUp"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-modal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-modal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Modal);
+            }
+            break;
+    } });
+}
+
+const BalModal = Modal;
+const defineCustomElement = defineCustomElement$1;
+
+export { BalModal, defineCustomElement };

package/components/bal-nav-link-grid-col.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface BalNavLinkGridCol extends Components.BalNavLinkGridCol, HTMLElement {}
+export const BalNavLinkGridCol: {
+    prototype: BalNavLinkGridCol;
+    new (): BalNavLinkGridCol;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bal-nav-link-grid-col.js

@@ -0,0 +1,6 @@
+import { N as NavigationLinkGridCol, d as defineCustomElement$1 } from './bal-nav-link-grid-col2.js';
+
+const BalNavLinkGridCol = NavigationLinkGridCol;
+const defineCustomElement = defineCustomElement$1;
+
+export { BalNavLinkGridCol, defineCustomElement };