@baloise/ds-core 17.2.1 → 17.2.2-nightly.20250109

package/components/all.d.ts

@@ -27,6 +27,7 @@ import { BalDate, defineCustomElement as defineBalDate } from './bal-date'
 import { BalDateCalendar, defineCustomElement as defineBalDateCalendar } from './bal-date-calendar'
 import { BalDateCalendarCell, defineCustomElement as defineBalDateCalendarCell } from './bal-date-calendar-cell'
 import { BalDivider, defineCustomElement as defineBalDivider } from './bal-divider'
+import { BalDocApp, defineCustomElement as defineBalDocApp } from './bal-doc-app'
 import { BalDropdown, defineCustomElement as defineBalDropdown } from './bal-dropdown'
 import { BalField, defineCustomElement as defineBalField } from './bal-field'
 import { BalFieldControl, defineCustomElement as defineBalFieldControl } from './bal-field-control'
@@ -144,6 +145,7 @@ export { BalDate, defineBalDate }
 export { BalDateCalendar, defineBalDateCalendar }
 export { BalDateCalendarCell, defineBalDateCalendarCell }
 export { BalDivider, defineBalDivider }
+export { BalDocApp, defineBalDocApp }
 export { BalDropdown, defineBalDropdown }
 export { BalField, defineBalField }
 export { BalFieldControl, defineBalFieldControl }

package/components/all.js

@@ -27,6 +27,7 @@ import { BalDate, defineCustomElement as defineBalDate } from './bal-date'
 import { BalDateCalendar, defineCustomElement as defineBalDateCalendar } from './bal-date-calendar'
 import { BalDateCalendarCell, defineCustomElement as defineBalDateCalendarCell } from './bal-date-calendar-cell'
 import { BalDivider, defineCustomElement as defineBalDivider } from './bal-divider'
+import { BalDocApp, defineCustomElement as defineBalDocApp } from './bal-doc-app'
 import { BalDropdown, defineCustomElement as defineBalDropdown } from './bal-dropdown'
 import { BalField, defineCustomElement as defineBalField } from './bal-field'
 import { BalFieldControl, defineCustomElement as defineBalFieldControl } from './bal-field-control'
@@ -144,6 +145,7 @@ export { BalDate, defineBalDate }
 export { BalDateCalendar, defineBalDateCalendar }
 export { BalDateCalendarCell, defineBalDateCalendarCell }
 export { BalDivider, defineBalDivider }
+export { BalDocApp, defineBalDocApp }
 export { BalDropdown, defineBalDropdown }
 export { BalField, defineBalField }
 export { BalFieldControl, defineBalFieldControl }
@@ -262,6 +264,7 @@ export const defineAllComponents = () => {
   defineBalDateCalendar()
   defineBalDateCalendarCell()
   defineBalDivider()
+  defineBalDocApp()
   defineBalDropdown()
   defineBalField()
   defineBalFieldControl()

package/components/bal-accordion.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { m as raf, t as transitionEndAsync, n as debounceEvent, w as waitForComponent } from './helpers.js';
+import { n as raf, t as transitionEndAsync, o as debounceEvent, w as waitForComponent } from './helpers.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { d as defineCustomElement$4 } from './bal-button2.js';

package/components/bal-app.js

@@ -1,96 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { b as balBrowser } from './browser.js';
-import { b as balDevice } from './device.js';
-import { j as debounce, o as rIC, l as rLCP } from './helpers.js';
-import { L as Logger } from './log.js';
-import { s as startFocusVisible } from './focus-visible.js';
-import { b as updateBalAnimated } from './config.utils.js';
-
-const balAppCss = ":root{--bal-app-height:100%}.bal-app{position:relative;display:block}.lcp-wait{opacity:0;visibility:hidden;display:none}.lcp-ready .lcp-wait{opacity:inherit;visibility:inherit;display:inherit}";
-const BalAppStyle0 = balAppCss;
-
-const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.debouncedNotify = debounce(() => this.notifyResize(), 100);
-        this.notifyResize = async () => {
-            if (balBrowser.hasDocument && balBrowser.hasWindow) {
-                const doc = document.documentElement;
-                doc.style.setProperty('--bal-app-height', `${window.innerHeight}px`);
-            }
-        };
-        this.animated = true;
-        this.ready = false;
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    connectedCallback() {
-        if (this.animated === false) {
-            updateBalAnimated(this.animated);
-        }
-        if (balBrowser.hasWindow) {
-            window.addEventListener('resize', this.debouncedNotify);
-            this.debouncedNotify();
-        }
-    }
-    componentDidLoad() {
-        rIC(() => {
-            this.ready = true;
-            startFocusVisible();
-        });
-        rLCP(() => {
-            if (balBrowser.hasDocument && balBrowser.hasWindow) {
-                const doc = document.documentElement;
-                doc.classList.add('lcp-ready');
-            }
-        });
-    }
-    disconnectedCallback() {
-        if (balBrowser.hasWindow) {
-            window.removeEventListener('resize', this.debouncedNotify);
-        }
-    }
-    async setFocus(elements) {
-        if (this.focusVisible) {
-            this.focusVisible.setFocus(elements);
-        }
-    }
-    render() {
-        return (h(Host, { key: '8e124474f0e95f8fdcd4546d7998556764d81d71', class: {
-                'bal-app': true,
-                'bal-app--safari': balBrowser.isSafari,
-                'bal-app--touch': balDevice.hasTouchScreen,
-            } }, h("slot", { key: 'e4a8974a3f55ec71c4ff7c46f2a9728d7efd4408' })));
-    }
-    get el() { return this; }
-    static get style() { return BalAppStyle0; }
-}, [4, "bal-app", {
-        "animated": [516],
-        "ready": [1540],
-        "setFocus": [64]
-    }]);
-__decorate([
-    Logger('bal-app'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], App.prototype, "createLogger", null);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bal-app"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bal-app":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, App);
-            }
-            break;
-    } });
-}
+import { A as App, d as defineCustomElement$1 } from './bal-app2.js';
 
 const BalApp = App;
 const defineCustomElement = defineCustomElement$1;

package/components/bal-app2.js

@@ -0,0 +1,95 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { b as balBrowser } from './browser.js';
+import { b as balDevice } from './device.js';
+import { k as debounce, p as rIC, m as rOnLoad } from './helpers.js';
+import { L as Logger } from './log.js';
+import { s as startFocusVisible } from './focus-visible.js';
+import { b as updateBalAnimated } from './config.utils.js';
+
+const balAppCss = ":root{--bal-app-height:100%}.bal-app{position:relative;display:block}.lcp-wait{opacity:0;visibility:hidden;display:none}.lcp-ready .lcp-wait{opacity:inherit;visibility:inherit;display:inherit}";
+const BalAppStyle0 = balAppCss;
+
+const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.debouncedNotify = debounce(() => this.notifyResize(), 100);
+        this.notifyResize = async () => {
+            if (balBrowser.hasDocument && balBrowser.hasWindow) {
+                const doc = document.documentElement;
+                doc.style.setProperty('--bal-app-height', `${window.innerHeight}px`);
+            }
+        };
+        this.animated = true;
+        this.ready = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    connectedCallback() {
+        if (this.animated === false) {
+            updateBalAnimated(this.animated);
+        }
+        if (balBrowser.hasWindow) {
+            window.addEventListener('resize', this.debouncedNotify);
+            this.debouncedNotify();
+        }
+    }
+    componentDidLoad() {
+        rIC(() => {
+            this.ready = true;
+            startFocusVisible();
+        });
+        rOnLoad(() => {
+            if (balBrowser.hasDocument && balBrowser.hasWindow) {
+                const doc = document.documentElement;
+                doc.classList.add('lcp-ready');
+            }
+        });
+    }
+    disconnectedCallback() {
+        if (balBrowser.hasWindow) {
+            window.removeEventListener('resize', this.debouncedNotify);
+        }
+    }
+    async setFocus(elements) {
+        if (this.focusVisible) {
+            this.focusVisible.setFocus(elements);
+        }
+    }
+    render() {
+        return (h(Host, { key: '29fef05a451290e2e20dc6808d1cce03ec1b1c4c', class: {
+                'bal-app': true,
+                'bal-app--safari': balBrowser.isSafari,
+                'bal-app--touch': balDevice.hasTouchScreen,
+            } }, h("slot", { key: 'd54179394cb4d9882647d497e09495193d57a12d' })));
+    }
+    get el() { return this; }
+    static get style() { return BalAppStyle0; }
+}, [4, "bal-app", {
+        "animated": [516],
+        "ready": [1540],
+        "setFocus": [64]
+    }]);
+__decorate([
+    Logger('bal-app'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], App.prototype, "createLogger", null);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-app"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-app":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, App);
+            }
+            break;
+    } });
+}
+
+export { App as A, defineCustomElement as d };

package/components/bal-button2.js

@@ -1,8 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { i as inheritAttributes } from './attributes.js';
-import { l as rLCP } from './helpers.js';
-import { L as ListenTo } from './listen.js';
+import { m as rOnLoad } from './helpers.js';
 import { d as defineCustomElement$2 } from './bal-icon2.js';
 import { d as defineCustomElement$1 } from './bal-spinner2.js';
 
@@ -62,7 +60,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         }
     }
     componentDidLoad() {
-        rLCP(() => (this.isLargestContentPaintDone = true));
+        rOnLoad(() => (this.isLargestContentPaintDone = true));
     }
     componentWillLoad() {
         this.inheritAttributes = inheritAttributes(this.el, [
@@ -198,13 +196,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         "value": [8],
         "aria": [16],
         "isLargestContentPaintDone": [32]
-    }]);
-__decorate([
-    ListenTo('click', { capture: true, target: 'document' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [UIEvent]),
-    __metadata("design:returntype", void 0)
-], Button.prototype, "listenOnClick", null);
+    }, [[6, "click", "listenOnClick"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/components/bal-carousel-item.js

@@ -1,4 +1,120 @@
-import { C as CarouselItem, d as defineCustomElement$1 } from './bal-carousel-item2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { B as BEM } from './bem.js';
+import { m as rOnLoad, b as waitAfterFramePaint } from './helpers.js';
+import { i as inheritAttributes } from './attributes.js';
+import { t as toKebabCase } from './string.js';
+
+const CarouselItem = /*@__PURE__*/ proxyCustomElement(class CarouselItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.balNavigate = createEvent(this, "balNavigate", 7);
+        this.balFocus = createEvent(this, "balFocus", 7);
+        this.balBlur = createEvent(this, "balBlur", 7);
+        this.imageInheritAttributes = {};
+        this.onClick = (ev) => {
+            if (this.href !== undefined) {
+                this.balNavigate.emit(ev);
+            }
+        };
+        this.onFocus = () => {
+            this.balFocus.emit();
+        };
+        this.onBlur = () => {
+            this.balBlur.emit();
+        };
+        this.isLargestContentfulPaintDone = false;
+        this.containerId = '';
+        this.src = undefined;
+        this.label = '';
+        this.htmlRole = 'listitem';
+        this.elementType = 'button';
+        this.name = undefined;
+        this.value = undefined;
+        this.href = undefined;
+        this.target = '_self';
+        this.rel = undefined;
+        this.download = undefined;
+        this.color = undefined;
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    componentDidLoad() {
+        rOnLoad(() => {
+            this.isLargestContentfulPaintDone = true;
+        });
+    }
+    componentWillLoad() {
+        this.imageInheritAttributes = inheritAttributes(this.el, ['alt']);
+        this.getContainerId();
+    }
+    async setFocus() {
+        await waitAfterFramePaint();
+        if (this.buttonEl) {
+            this.buttonEl.focus();
+        }
+    }
+    async getContainerId() {
+        const parentEl = this.el.closest('bal-carousel');
+        this.containerId = await parentEl.getContainerId();
+    }
+    render() {
+        const block = BEM.block('carousel');
+        const itemEl = block.element('item');
+        const isProduct = !!this.color && !!this.label;
+        const parentEl = this.el.closest('bal-carousel');
+        const role = parentEl && parentEl.controls === 'tabs' ? 'tabpanel' : 'listitem';
+        const id = `${this.containerId}-${toKebabCase(this.label)}`;
+        if (!isProduct) {
+            return (h(Host, { id: id, role: role, class: Object.assign({}, itemEl.class()), "aria-label": this.label }, this.isLargestContentfulPaintDone && this.src !== undefined ? (h("img", Object.assign({ draggable: false, onDragStart: () => false, src: this.src }, this.imageInheritAttributes))) : (''), h("slot", null)));
+        }
+        const button = itemEl.element('button');
+        const image = button.element('image');
+        const label = button.element('label');
+        const { elementType, download, href, rel, target, name, value } = this;
+        const TagType = this.href === undefined ? 'button' : 'a';
+        const attrs = TagType === 'button'
+            ? { type: elementType, name, value }
+            : {
+                download,
+                href,
+                rel,
+                target,
+            };
+        return (h(Host, { id: id, role: role, "aria-label": this.label, class: Object.assign({}, itemEl.class()) }, h(TagType, Object.assign({}, attrs, { class: Object.assign(Object.assign({}, button.class()), button.modifier(`color-${this.color}`).class()), part: "native", onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, ref: el => (this.buttonEl = el) }), this.isLargestContentfulPaintDone && this.src !== undefined ? (h("img", Object.assign({ class: Object.assign({}, image.class()), draggable: false, onDragStart: () => false, "aria-hidden": "true", src: this.src }, this.imageInheritAttributes))) : (''), this.label !== undefined ? h("span", { class: Object.assign({}, label.class()) }, this.label) : '', h("slot", null))));
+    }
+    get el() { return this; }
+}, [4, "bal-carousel-item", {
+        "src": [513],
+        "label": [513],
+        "htmlRole": [1, "html-role"],
+        "elementType": [1, "element-type"],
+        "name": [513],
+        "value": [520],
+        "href": [1],
+        "target": [1],
+        "rel": [1],
+        "download": [1],
+        "color": [1],
+        "isLargestContentfulPaintDone": [32],
+        "containerId": [32],
+        "setFocus": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-carousel-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-carousel-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CarouselItem);
+            }
+            break;
+    } });
+}
 
 const BalCarouselItem = CarouselItem;
 const defineCustomElement = defineCustomElement$1;