@baloise/ds-core 17.2.1 → 17.2.2

package/dist/collection/components/bal-time-input/bal-time-input.js

@@ -10,7 +10,6 @@ import { BEM } from "../../utils/bem";
 import { i18nBalTimeInput } from "./bal-time-input.i18n";
 import { defaultBalAriaForm } from "../../utils/form";
 import { Logger } from "../../utils/log";
-import { ListenTo } from "../../utils/listen";
 export class TimeInput {
     constructor() {
         this.inputId = `bal-time-input-${timeInputIds++}`;
@@ -131,7 +130,7 @@ export class TimeInput {
         const value = this.focused ? this.getRawValue() : this.getFormattedValue();
         const block = BEM.block('time-input');
         const native = block.element('native');
-        return (h(Host, { key: '67ec2306c4cf0a9e6b5cee8af80f930e5dc4ee33', "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '1873f5acc2647eb4b4d4f2634693caafadb98341', disabled: this.disabled || this.readonly, invalid: this.invalid }, h("input", Object.assign({ key: '846d18705dd58f61a418cb4c25fab603e3c9264d', type: "time", class: Object.assign({ 'input': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'has-focus': this.focused, 'show-placeholder': !this.focused && (this.value === '' || this.value === undefined), 'has-value': this.value !== '' && this.value !== undefined }, native.class()), ref: input => (this.nativeInput = input), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: `${i18nBalTimeInput[this.language].hours}:${i18nBalTimeInput[this.language].minutes}`, value: value, onInput: ev => this.onInput(ev), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes)), h("bal-icon", { key: 'd34d154f6bafaa5fe925a9333796e5c2b1c41dfc', "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', name: "clock" }))));
+        return (h(Host, { key: '2578b65264137e9434088835c57d22d206103771', "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: 'b01517906f8bf0a8062150353c8ab222b8168d7a', disabled: this.disabled || this.readonly, invalid: this.invalid }, h("input", Object.assign({ key: '07e361337fcfb7089f43f8b01393df8978f3806e', type: "time", class: Object.assign({ 'input': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'has-focus': this.focused, 'show-placeholder': !this.focused && (this.value === '' || this.value === undefined), 'has-value': this.value !== '' && this.value !== undefined }, native.class()), ref: input => (this.nativeInput = input), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: `${i18nBalTimeInput[this.language].hours}:${i18nBalTimeInput[this.language].minutes}`, value: value, onInput: ev => this.onInput(ev), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes)), h("bal-icon", { key: 'c5962393a8981a078a6cf0e2f41890ecc534fd11', "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', name: "clock" }))));
     }
     static get is() { return "bal-time-input"; }
     static get originalStyleUrls() {
@@ -160,6 +159,8 @@ export class TimeInput {
                     "tags": [],
                     "text": "The name of the control, which is submitted with the form data."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.inputId"
@@ -178,6 +179,8 @@ export class TimeInput {
                     "tags": [],
                     "text": "If `true` the component gets a invalid style."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "false"
@@ -196,6 +199,8 @@ export class TimeInput {
                     "tags": [],
                     "text": "If `true`, the user must fill in a value before submitting a form."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
@@ -214,6 +219,8 @@ export class TimeInput {
                     "tags": [],
                     "text": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -232,6 +239,8 @@ export class TimeInput {
                     "tags": [],
                     "text": "If `true` the element can not mutated, meaning the user can not edit the control."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
@@ -250,6 +259,8 @@ export class TimeInput {
                     "tags": [],
                     "text": "Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "debounce",
                 "reflect": false,
                 "defaultValue": "0"
@@ -268,6 +279,8 @@ export class TimeInput {
                     "tags": [],
                     "text": "The value of the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -286,6 +299,8 @@ export class TimeInput {
                     "tags": [],
                     "text": "If `true`, in Angular reactive forms the control will not be set invalid"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "auto-invalid-off",
                 "reflect": true,
                 "defaultValue": "false"
@@ -550,6 +565,21 @@ export class TimeInput {
                 "methodName": "debounceChanged"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "listenOnClick",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "reset",
+                "method": "resetHandler",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }];
+    }
 }
 __decorate([
     Logger('bal-time-input'),
@@ -557,18 +587,6 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], TimeInput.prototype, "createLogger", null);
-__decorate([
-    ListenTo('click', { capture: true, target: 'document' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [UIEvent]),
-    __metadata("design:returntype", void 0)
-], TimeInput.prototype, "listenOnClick", null);
-__decorate([
-    ListenTo('reset', { capture: true, target: 'document' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [UIEvent]),
-    __metadata("design:returntype", void 0)
-], TimeInput.prototype, "resetHandler", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),

package/dist/collection/components/bal-toast/bal-toast.js

@@ -34,7 +34,7 @@ export class Toast {
         return `bal-toast__inner--is-${this.color}`;
     }
     render() {
-        return (h(Host, { key: '022b79aa15606a15256ff3a4a8ea327cd3d7badf', id: this.toastId, class: "bal-toast" }, h("div", { key: '13e4f7084f3d27ecec0729a229c4ced273b781d7', role: "alert", onClick: () => this.close(), class: `bal-toast__inner ${this.colorType}` }, h("span", { key: 'ba07ca16899d4af96dbc8936e997a424b3c1b584', class: "bal-toast__label", innerHTML: this.message, "data-testid": "bal-toast-label" }, h("slot", { key: '059e7c7095f24eeefa2629e7fc168d1eda116a7c' })), h("bal-close", { key: '3efd56336ee10d4afbdf118c091ec9f306603450', class: "bal-toast__close", inverted: false, "data-testid": "bal-toast-close" }))));
+        return (h(Host, { key: '98efc7e715868158761632175f1d5ebaf2109fef', id: this.toastId, class: "bal-toast" }, h("div", { key: '3d5562a482701cd6013749b5dac2e6b2d6b5452f', role: "alert", onClick: () => this.close(), class: `bal-toast__inner ${this.colorType}` }, h("span", { key: '394cdb2e5000ee33929093cf4e563bd729de44f8', class: "bal-toast__label", innerHTML: this.message, "data-testid": "bal-toast-label" }, h("slot", { key: '69731e615a6212359cfccf7089064525de7f0f89' })), h("bal-close", { key: 'd07cf7ad019afc147c24a7002415359640c19266', class: "bal-toast__close", inverted: false, "data-testid": "bal-toast-close" }))));
     }
     static get is() { return "bal-toast"; }
     static get originalStyleUrls() {
@@ -68,6 +68,8 @@ export class Toast {
                     "tags": [],
                     "text": "The theme type of the toast.\nColor type primary is deprecated, please use info instead."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "color",
                 "reflect": false,
                 "defaultValue": "''"
@@ -86,6 +88,8 @@ export class Toast {
                     "tags": [],
                     "text": "The duration of the toast in milliseconds."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "duration",
                 "reflect": false,
                 "defaultValue": "0"
@@ -104,6 +108,8 @@ export class Toast {
                     "tags": [],
                     "text": "Content message"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "message",
                 "reflect": false,
                 "defaultValue": "''"
@@ -125,6 +131,8 @@ export class Toast {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "() => void 0"
             }
         };

package/dist/collection/components/bal-tooltip/bal-tooltip.js

@@ -195,7 +195,7 @@ export class Tooltip {
         const arrowBlock = block.element('arrow');
         const innerBlock = block.element('inner');
         const innerContentBlock = innerBlock.element('content');
-        return (h(Host, { key: 'be527a1b6a3bc6c4958692998c35a935ec529484', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}` }, h("div", { key: '1ef5d833c3796839e5f265651867d2a3d17c0251', class: Object.assign({}, containerBlock.class()), ref: containerEl => (this.containerEl = containerEl) }, h("div", { key: '0f29a68c79453bbde28ed48464e91b49caf46ada', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '71509e320a90d1e5e8fd92fc689352bd352a5557', layout: "vertical", class: Object.assign({}, innerBlock.class()) }, h("div", { key: '56628c0fce715db27e5a39385d7b698aabc070e1', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-tooltip-content" }, h("slot", { key: 'a303a3a3b414eaddd6cba0a3ee585451a29be532' }))))));
+        return (h(Host, { key: '0d4c212b2fc53455951d404533f2edee8032a022', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}` }, h("div", { key: '33331b2e7e10c448fd3ee2031d15ac6e328237d8', class: Object.assign({}, containerBlock.class()), ref: containerEl => (this.containerEl = containerEl) }, h("div", { key: 'e85f45f6f548350d35c11ad4bbf287022daba636', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '33445925363c46f16f06c160a90ea811f2abdc60', layout: "vertical", class: Object.assign({}, innerBlock.class()) }, h("div", { key: '71a9d997a4fdcd5081bd69a3922918c109278377', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-tooltip-content" }, h("slot", { key: 'df311a2293e02dfe52234ee77815f6e996647736' }))))));
     }
     static get is() { return "bal-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -225,6 +225,8 @@ export class Tooltip {
                     "tags": [],
                     "text": "Id of the reference element default is the trigger element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "reference",
                 "reflect": false,
                 "defaultValue": "''"
@@ -248,6 +250,8 @@ export class Tooltip {
                     "tags": [],
                     "text": "If set it turns a tooltip into a fullscreen or a drawer on touch devices"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placement",
                 "reflect": false,
                 "defaultValue": "'bottom'"
@@ -266,6 +270,8 @@ export class Tooltip {
                     "tags": [],
                     "text": "Offset form trigger to tooltip."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "offset",
                 "reflect": false,
                 "defaultValue": "0"
@@ -287,6 +293,8 @@ export class Tooltip {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "demo",
                 "reflect": false,
                 "defaultValue": "false"
@@ -305,6 +313,8 @@ export class Tooltip {
                     "tags": [],
                     "text": "Defines the width of the content"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "content-width",
                 "reflect": false
             }

package/dist/collection/index.js

@@ -31,7 +31,7 @@ export { newBalTabOption } from './components/bal-tabs/bal-tab.util';
 export { newBalCheckboxOption } from './components/bal-checkbox/utils/bal-checkbox.util';
 export { newBalRadioOption } from './components/bal-radio/utils/bal-radio.util';
 export { newBalOptionValue, newBalSingleOptionValue } from './components/bal-select/utils/bal-option.util';
-export { waitForComponent, waitForDesignSystem, waitAfterFramePaint, waitAfterIdleCallback, waitAfterLargestContentfulPaintCallback, shallowReady, deepReady, wait, getAppRoot, componentOnReady, isDescendant, } from './utils/helpers';
+export { waitForComponent, waitForDesignSystem, waitAfterFramePaint, waitAfterIdleCallback, waitAfterLargestContentfulPaintCallback, waitOnLoadEventCallback, shallowReady, deepReady, wait, getAppRoot, componentOnReady, isDescendant, } from './utils/helpers';
 export { scrollToFirstInvalidField } from './utils/form';
 export { BalScrollHandler } from './utils/scroll';
 export { balBrowser } from './utils/browser';

package/dist/collection/utils/constants/version.constant.js

@@ -1,2 +1,2 @@
 // generated by .build/version.js
-export const VERSION = '17.2.1';
+export const VERSION = '17.2.2';

package/dist/collection/utils/floating-ui.js

@@ -1,4 +1,4 @@
-import { rLCP } from "./helpers";
+import { rOnLoad } from "./helpers";
 class BalFloatingUiInternal {
     constructor() {
         this.load = async () => {
@@ -7,7 +7,7 @@ class BalFloatingUiInternal {
                     return resolve(this.lib);
                 }
                 else {
-                    rLCP(async () => {
+                    rOnLoad(async () => {
                         import(/* @vite-ignore */ '@floating-ui/dom')
                             .then(module => {
                             this.lib = module;

package/dist/collection/utils/helpers.js

@@ -31,6 +31,25 @@ export const rLCP = (callback, timeout = 3000) => {
         return setTimeout(callback, 32);
     }
 };
+export const rOnLoad = (callback, timeout = 32) => {
+    let called = false;
+    const callOnce = () => {
+        if (!called) {
+            called = true;
+            callback();
+        }
+    };
+    if (balBrowser.hasWindow) {
+        const timer = setTimeout(callOnce, timeout);
+        window.addEventListener('load', () => {
+            clearTimeout(timer);
+            callOnce();
+        });
+    }
+    else {
+        setTimeout(callOnce, 32);
+    }
+};
 export const rIC = (callback, timeout = 5000) => {
     if (balBrowser.hasWindow && 'requestIdleCallback' in window) {
         ;
@@ -226,8 +245,16 @@ export const waitForComponent = async (el) => {
     await waitAfterIdleCallback();
 };
 export const isChildOfEventTarget = async (ev, el, callback) => {
-    if (ev && ev.target && el && el !== ev.target && isDescendant(ev.target, el)) {
-        callback();
+    if (ev && ev.target && el && el !== ev.target) {
+        let target = ev.target;
+        // special case for the navbar case
+        const isNavbarBrand = ev.target.nodeName === 'BAL-NAVBAR-BRAND';
+        if (isNavbarBrand) {
+            target = target.closest('bal-navbar');
+        }
+        if (target && isDescendant(target, el)) {
+            callback();
+        }
     }
 };
 export const waitForDesignSystem = async (el, _config) => {
@@ -275,6 +302,9 @@ export const waitAfterIdleCallback = () => {
 export const waitAfterLargestContentfulPaintCallback = () => {
     return new Promise(resolve => rLCP(() => runHighPrioritizedTask(resolve)));
 };
+export const waitOnLoadEventCallback = () => {
+    return new Promise(resolve => rOnLoad(() => runHighPrioritizedTask(resolve)));
+};
 export const runHighPrioritizedTask = (callback) => {
     if (balBrowser.hasWindow && 'MessageChannel' in window) {
         const messageChannel = new window.MessageChannel();

package/dist/collection/utils/keyboard/keyboard.helpers.js

@@ -1,3 +1,9 @@
+/**
+ * Returns `true` if the keyboard event was triggered by the `Enter` key
+ */
+export function isTabKey(event) {
+    return event.key === 'Tab';
+}
 /**
  * Returns `true` if the keyboard event was triggered by the `Enter` key
  */

package/dist/collection/utils/mutation/mutation.listener.js

@@ -13,21 +13,24 @@ export class BalMutationListener extends ListenerAbstract {
             characterData: true,
         };
         this.mutationCallback = (mutationRecord) => {
-            const hasChanges = mutationRecord.some(record => this.tags.includes(record.target.nodeName));
-            if (hasChanges) {
-                return this.notify(undefined);
-            }
-            const hasRemovedNodeChanges = mutationRecord.some(record => Array.from(record.removedNodes).some((node) => this.tags.includes(node.nodeName)));
-            if (hasRemovedNodeChanges) {
-                return this.notify(undefined);
-            }
+            // default when no tag is provided
             if (this.tags.length === 0 && mutationRecord.length > 0) {
-                const hasCharacterDataChanges = mutationRecord.some(record => record.type === 'characterData');
-                if (hasCharacterDataChanges) {
-                    return this.notify(undefined);
-                }
+                return this.notify(undefined);
             }
-            if (this.tags.length === 0 && mutationRecord.length > 0) {
+            const tagRecords = mutationRecord.filter(record => this.tags.includes(record.target.nodeName.toLowerCase()));
+            // check for added nodes
+            const hasAddedNodeChanges = tagRecords.some(record => Array.from(record.addedNodes).some((node) => this.tags.includes(node.nodeName)));
+            // check for removed nodes
+            const hasRemovedNodeChanges = tagRecords.some(record => Array.from(record.removedNodes).some((node) => this.tags.includes(node.nodeName)));
+            // check for attribute changes
+            const attributeNameCheck = (attributeName) => {
+                return (attributeName !== 'styles' &&
+                    attributeName !== 'class' &&
+                    !attributeName.startsWith('data-') &&
+                    !attributeName.startsWith('aria-'));
+            };
+            const hasAttributeChanges = tagRecords.some(record => record.type === 'attributes' && attributeNameCheck(record.attributeName));
+            if (hasAddedNodeChanges || hasAttributeChanges || hasRemovedNodeChanges) {
                 return this.notify(undefined);
             }
         };

package/dist/collection/utils/resize/resize.listener.js

@@ -1,10 +1,10 @@
 import { balBrowser } from "../browser";
-import { debounce } from "../helpers";
+import { debounce, rIC } from "../helpers";
 import { ListenerAbstract } from "../types/listener";
 export class BalResizeListener extends ListenerAbstract {
     constructor() {
         super(...arguments);
-        this.debouncedNotify = debounce(() => this.notify(), 10);
+        this.debouncedNotify = debounce((info) => this.notify(info), 10);
     }
     connect(el) {
         var _a;
@@ -22,7 +22,23 @@ export class BalResizeListener extends ListenerAbstract {
                     if (!Array.isArray(entries) || !entries.length) {
                         return;
                     }
-                    this.debouncedNotify();
+                    const entry = entries[0];
+                    if (this.lastWidth === undefined && this.lastHeight === undefined) {
+                        this.lastWidth = entry.contentRect.width;
+                        this.lastHeight = entry.contentRect.height;
+                    }
+                    else {
+                        const widthChanged = this.lastWidth !== entry.contentRect.width;
+                        const heightChanged = this.lastHeight !== entry.contentRect.height;
+                        if (widthChanged || heightChanged) {
+                            rIC(() => this.debouncedNotify({
+                                width: widthChanged,
+                                height: heightChanged,
+                            }));
+                            this.lastWidth = entry.contentRect.width;
+                            this.lastHeight = entry.contentRect.height;
+                        }
+                    }
                 });
             }
         });

package/dist/collection/utils/resize/resize.subject.js

@@ -2,8 +2,8 @@ import { SingleSubject } from "../types/signal";
 import { BalResizeListener } from "./resize.listener";
 export class BalResizeSubject extends SingleSubject {
     constructor() {
-        super((observer, _data) => {
-            observer.resizeListener({});
+        super((observer, data) => {
+            observer.resizeListener(data);
         });
         this.listener = new BalResizeListener();
     }

package/dist/collection/utils/style.js

@@ -15,8 +15,21 @@ export const getComputedWidth = (element) => {
         return element.clientWidth;
     }
     const computedStyle = window.getComputedStyle(element);
+    const boxSizing = computedStyle.getPropertyValue('box-sizing');
     const width = convert(computedStyle.getPropertyValue('width'));
-    const paddingLeft = convert(computedStyle.getPropertyValue('padding-left'));
-    const paddingRight = convert(computedStyle.getPropertyValue('padding-left'));
-    return width + paddingLeft + paddingRight;
+    if (boxSizing === 'border-box') {
+        return width;
+    }
+    const right = convert(computedStyle.getPropertyValue('padding-right'));
+    const left = convert(computedStyle.getPropertyValue('padding-left'));
+    return left + width + right;
+};
+export const getWidthOfOverflowingChildren = (element) => {
+    const children = Array.from(element.children);
+    let maxWidth = 0;
+    for (const child of children) {
+        const childWidth = child.offsetLeft + child.offsetWidth;
+        maxWidth = Math.max(maxWidth, childWidth);
+    }
+    return maxWidth;
 };

package/dist/collection/utils/swipe/swipe.listener.js

@@ -1,5 +1,5 @@
 import { ListenerAbstract } from "../types/listener";
-import { rLCP } from "../helpers";
+import { rOnLoad } from "../helpers";
 export class BalSwipeListener extends ListenerAbstract {
     async connect(el) {
         super.connect(el);
@@ -17,7 +17,7 @@ export class BalSwipeListener extends ListenerAbstract {
     }
     async loadLib() {
         return new Promise((resolve, reject) => {
-            rLCP(async () => {
+            rOnLoad(async () => {
                 import(/* @vite-ignore */ 'contactjs')
                     .then(module => {
                     this.PointerListenerLib = module.PointerListener;

package/dist/collection/{components/bal-carousel → utils/swiper}/controls/dot-control.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 export const DotControl = ({ value, items, containerId, onControlChange }) => {
-    const block = BEM.block('carousel');
+    const block = BEM.block('swiper');
     const controls = block.element('controls');
     const onChange = (ev) => {
         let selectedValue = ev.detail - 1;

package/dist/collection/utils/swiper/controls/index.js

@@ -0,0 +1,3 @@
+export * from './dot-control';
+export * from './small-control';
+export * from './large-control';

package/dist/collection/{components/bal-carousel → utils/swiper}/controls/large-control.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 export const LargeControl = ({ isFirst, isLast, inverted, areControlsHidden, onNextClick, onPreviousClick, containerId, leftControlTitle, rightControlTitle, }) => {
-    const block = BEM.block('carousel');
+    const block = BEM.block('swiper');
     const controls = block.element('controls');
     const button = controls.element('button');
-    return (h("div", { "data-mutation": "false", class: Object.assign(Object.assign({}, controls.class()), controls.modifier('large').class()) }, h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('left').class()), button.modifier('hidden').class(isFirst && areControlsHidden)), "aria-controls": containerId, square: true, icon: "nav-go-left", rounded: true, inverted: inverted, onClick: () => onPreviousClick(), disabled: isFirst, "aria-hidden": isFirst && areControlsHidden ? 'true' : null, "data-testid": "bal-carousel-control-left", title: leftControlTitle }), h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('right').class()), button.modifier('hidden').class(isLast && areControlsHidden)), "aria-controls": containerId, square: true, icon: "nav-go-right", rounded: true, inverted: inverted, onClick: () => onNextClick(), disabled: isLast, "aria-hidden": isLast && areControlsHidden ? 'true' : null, "data-testid": "bal-carousel-control-right", title: rightControlTitle })));
+    return (h("div", { "data-mutation": "false", class: Object.assign(Object.assign({}, controls.class()), controls.modifier('large').class()) }, h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('left').class()), button.modifier('hidden').class(isFirst && areControlsHidden)), "aria-controls": containerId, square: true, icon: "nav-go-left", rounded: true, inverted: inverted, onClick: () => onPreviousClick(), tabindex: -1, disabled: isFirst, "aria-hidden": isFirst && areControlsHidden ? 'true' : null, "data-testid": "bal-carousel-control-left", title: leftControlTitle }), h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('right').class()), button.modifier('hidden').class(isLast && areControlsHidden)), "aria-controls": containerId, square: true, icon: "nav-go-right", rounded: true, inverted: inverted, onClick: () => onNextClick(), tabindex: -1, disabled: isLast, "aria-hidden": isLast && areControlsHidden ? 'true' : null, "data-testid": "bal-carousel-control-right", title: rightControlTitle })));
 };

package/dist/collection/{components/bal-carousel → utils/swiper}/controls/small-control.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 export const SmallControl = ({ isFirst, isLast, inverted, leftControlTitle, rightControlTitle, containerId, onNextClick, onPreviousClick, }) => {
-    const block = BEM.block('carousel');
+    const block = BEM.block('swiper');
     const controls = block.element('controls');
     const button = controls.element('button');
-    return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('small').class()) }, h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('left').class()), button.modifier('hidden').class(isFirst)), "aria-controls": containerId, square: true, size: "small", icon: "nav-go-left", rounded: true, inverted: inverted, onClick: () => onPreviousClick(), disabled: isFirst, "aria-hidden": isFirst ? 'true' : null, tabindex: "-1", "data-testid": "bal-carousel-control-left", title: leftControlTitle }), h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('right').class()), button.modifier('hidden').class(isLast)), "aria-controls": containerId, square: true, size: "small", icon: "nav-go-right", rounded: true, inverted: inverted, onClick: () => onNextClick(), disabled: isLast, "aria-hidden": isLast ? 'true' : null, tabindex: "-1", "data-testid": "bal-carousel-control-right", title: rightControlTitle })));
+    return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('small').class()) }, h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('left').class()), button.modifier('hidden').class(isFirst)), "aria-controls": containerId, square: true, size: "small", icon: "nav-go-left", rounded: true, inverted: inverted, onClick: () => onPreviousClick(), disabled: isFirst, tabindex: "-1", "data-testid": "bal-carousel-control-left", title: leftControlTitle }), h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('right').class()), button.modifier('hidden').class(isLast)), "aria-controls": containerId, square: true, size: "small", icon: "nav-go-right", rounded: true, inverted: inverted, onClick: () => onNextClick(), disabled: isLast, tabindex: "-1", "data-testid": "bal-carousel-control-right", title: rightControlTitle })));
 };

package/dist/collection/utils/swiper/index.js

@@ -0,0 +1 @@
+export { SwiperUtil } from './swiper.util';

package/dist/collection/{components/bal-carousel/bal-carousel.i18n.js → utils/swiper/swiper.i18n.js}

@@ -1,4 +1,4 @@
-export const i18nControlLabel = {
+export const i18nSwiperControlLabel = {
     de: {
         left: 'vorherige',
         right: 'nächste',