@baloise/ds-core 17.2.1 → 17.2.2

package/dist/types/components/bal-tabs/components/tab-button.d.ts

@@ -11,7 +11,7 @@ export interface TabButtonProps {
     isAccordionOpen: boolean;
     isLinkList: boolean;
     inverted: boolean;
-    expanded: boolean;
+    isExpanded: boolean;
     spaceless: boolean;
     clickable: boolean;
     iconPosition: BalProps.BalTabsIconPosition;

package/dist/types/components/bal-tabs/components/tab-label.d.ts

@@ -5,6 +5,7 @@ export interface TabLabelProps {
     inverted: boolean;
     isMobile: boolean;
     isVertical: boolean;
+    isExpanded: boolean;
     hasBubble: boolean;
     context?: BalProps.BalTabsContext;
 }

package/dist/types/components/bal-tabs/components/tab-nav.d.ts

@@ -1,17 +1,20 @@
 import { FunctionalComponent } from '../../../stencil-public-runtime';
 import { BalTabOption } from '../bal-tab.type';
+import { SwiperUtil } from "../../../utils/swiper/index";
 export interface TabNavProps {
+    swiper: SwiperUtil;
     items: BalTabOption[];
     tabsId: string;
-    hasCarousel: boolean;
     isVertical: boolean;
     inNavbar: boolean;
     isMobile: boolean;
     isTouch: boolean;
     lineActive: boolean;
+    lineHidden: boolean;
     border: boolean;
     accordion: boolean;
     isAccordionOpen: boolean;
+    showSwiperControls: boolean;
     inverted: boolean;
     clickable: boolean;
     animated: boolean;

package/dist/types/components.d.ts

@@ -7,7 +7,6 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { BalConfigState } from "./utils/config";
 import { AccordionState } from "./interfaces";
-import { BalCarouselItemData, BalSlide } from "./components/bal-carousel/bal-carousel.type";
 import { BalCheckboxOption } from "./components/bal-checkbox/bal-checkbox.type";
 import { BalAriaForm } from "./utils/form";
 import { BalOption } from "./utils/dropdown";
@@ -20,7 +19,6 @@ import { BalStepOption } from "./components/bal-steps/bal-step.type";
 import { BalTabOption } from "./components/bal-tabs/bal-tab.type";
 export { BalConfigState } from "./utils/config";
 export { AccordionState } from "./interfaces";
-export { BalCarouselItemData, BalSlide } from "./components/bal-carousel/bal-carousel.type";
 export { BalCheckboxOption } from "./components/bal-checkbox/bal-checkbox.type";
 export { BalAriaForm } from "./utils/form";
 export { BalOption } from "./utils/dropdown";
@@ -386,8 +384,9 @@ export namespace Components {
           * If `true` the carousel uses the full height
          */
         "fullHeight": boolean;
+        "getContainerId": () => Promise<string>;
         /**
-          * Defines the role of the carousel.
+          * @deprecated Defines the role of the carousel.
          */
         "htmlRole": 'tablist' | 'list' | '';
         /**
@@ -402,11 +401,11 @@ export namespace Components {
           * Defines how many slides are visible in the container for the user. `auto` will use the size of the actual item content
          */
         "itemsPerView": 'auto' | 1 | 2 | 3 | 4;
-        "next": (steps?: number) => Promise<BalSlide | undefined>;
+        "next": (steps?: number) => Promise<void>;
         /**
           * PUBLIC METHODS ------------------------------------------------------
          */
-        "previous": (steps?: number) => Promise<BalSlide | undefined>;
+        "previous": (steps?: number) => Promise<void>;
         /**
           * If `true` vertical scrolling on mobile is enabled.
          */
@@ -433,13 +432,12 @@ export namespace Components {
           * The type of button.
          */
         "elementType": BalProps.BalButtonElementType;
-        "getData": () => Promise<BalCarouselItemData>;
         /**
           * Specifies the URL of the page the link goes to
          */
         "href"?: string;
         /**
-          * Defines the role of the carousel.
+          * @deprecated Defines the role of the carousel.
          */
         "htmlRole": 'tab' | 'listitem' | '';
         /**
@@ -5421,7 +5419,7 @@ declare namespace LocalJSX {
          */
         "fullHeight"?: boolean;
         /**
-          * Defines the role of the carousel.
+          * @deprecated Defines the role of the carousel.
          */
         "htmlRole"?: 'tablist' | 'list' | '';
         /**
@@ -5471,7 +5469,7 @@ declare namespace LocalJSX {
          */
         "href"?: string;
         /**
-          * Defines the role of the carousel.
+          * @deprecated Defines the role of the carousel.
          */
         "htmlRole"?: 'tab' | 'listitem' | '';
         /**

package/dist/types/index.d.ts

@@ -35,7 +35,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/types/utils/helpers.d.ts

@@ -4,6 +4,7 @@ import { BalConfig } from './config';
  * Request Largest Contentful Paint (LCP) callback
  */
 export declare const rLCP: (callback: () => void, timeout?: number) => NodeJS.Timeout;
+export declare const rOnLoad: (callback: () => void, timeout?: number) => void;
 export declare const rIC: (callback: () => void, timeout?: number) => void;
 export declare const wait: (ms?: number) => Promise<void>;
 export declare const debounceEvent: (ev: EventEmitter, wait: number) => EventEmitter;
@@ -43,5 +44,6 @@ export declare const waitForDesignSystem: (el: any | null, _config?: BalConfig)
 export declare const waitAfterFramePaint: () => Promise<unknown>;
 export declare const waitAfterIdleCallback: () => Promise<unknown>;
 export declare const waitAfterLargestContentfulPaintCallback: () => Promise<unknown>;
+export declare const waitOnLoadEventCallback: () => Promise<unknown>;
 export declare const runHighPrioritizedTask: (callback: (value: unknown) => void) => void;
 export declare const waitForRequestIdleCallback: () => () => Promise<unknown>;

package/dist/types/utils/keyboard/keyboard.helpers.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Returns `true` if the keyboard event was triggered by the `Enter` key
+ */
+export declare function isTabKey(event: KeyboardEvent): boolean;
 /**
  * Returns `true` if the keyboard event was triggered by the `Enter` key
  */

package/dist/types/utils/resize/resize.interfaces.d.ts

@@ -1,4 +1,7 @@
-export type BalResizeInfo = {};
+export type BalResizeInfo = {
+    width: boolean;
+    height: boolean;
+};
 export type BalResizeListenerFn = (info: BalResizeInfo) => void;
 export interface BalResizeObserver {
     el: HTMLElement;

package/dist/types/utils/resize/resize.listener.d.ts

@@ -3,6 +3,8 @@ import { BalResizeInfo } from './resize.interfaces';
 export declare class BalResizeListener<TObserver> extends ListenerAbstract<TObserver, BalResizeInfo> {
     private resizeObserver;
     private debouncedNotify;
+    private lastWidth;
+    private lastHeight;
     connect(el: HTMLElement): void;
     disconnect(): void;
 }

package/dist/types/utils/style.d.ts

@@ -6,3 +6,4 @@ export interface Padding {
 }
 export declare const getComputedPadding: (element: HTMLElement, defaultPadding?: number) => Padding;
 export declare const getComputedWidth: (element: HTMLElement) => number;
+export declare const getWidthOfOverflowingChildren: (element: HTMLElement) => number;

package/dist/types/utils/swiper/controls/index.d.ts

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

package/dist/types/utils/swiper/index.d.ts

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

package/dist/types/utils/swiper/swiper.i18n.d.ts

@@ -0,0 +1,7 @@
+import { I18n } from '../../interfaces';
+interface I18nSwiperControlLabel {
+    left: string;
+    right: string;
+}
+export declare const i18nSwiperControlLabel: I18n<I18nSwiperControlLabel>;
+export {};

package/dist/types/utils/swiper/swiper.type.d.ts

@@ -0,0 +1,31 @@
+import { BalLanguage } from '../config';
+import { SwiperUtil } from './swiper.util';
+export interface SwiperControlItem {
+    value: number;
+    label: string;
+}
+export type SwiperChildItem = HTMLElement & {
+    label: string;
+    setFocus(): Promise<void>;
+};
+export interface SwiperSlide {
+    el: SwiperChildItem;
+    transformNext: number;
+    transformActive: number;
+    isLast: boolean;
+    isFirst: boolean;
+    index: number;
+    total: number;
+}
+export type SwiperControl = 'small' | 'large' | 'dots' | 'none' | 'tabs';
+export type SwiperItemsPerView = 'auto' | 1 | 2 | 3 | 4;
+export type SwiperInterface = {
+    el: HTMLElement;
+    swiper: SwiperUtil;
+    language: BalLanguage;
+    hasAnimated: boolean;
+    isMobile: boolean;
+    inverted: boolean;
+    swiperGetAllChildrenElements(): SwiperChildItem[];
+    swiperOnChange(index: number): void;
+};

package/dist/types/utils/swiper/swiper.util.d.ts

@@ -0,0 +1,92 @@
+import type { SwiperControl, SwiperControlItem, SwiperInterface, SwiperItemsPerView, SwiperSlide } from './swiper.type';
+export declare class SwiperUtil {
+    private component;
+    private currentRaf;
+    private previousTransformValue;
+    private active;
+    id: string;
+    containerId: string;
+    containerEl?: HTMLElement;
+    innerEl?: HTMLElement;
+    borderEl?: HTMLElement;
+    index: number;
+    gapSize: number;
+    steps: number;
+    noNeedForSlide: boolean;
+    isLastSlideVisible: boolean;
+    itemsPerView: SwiperItemsPerView;
+    controls: SwiperControl;
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback(component: SwiperInterface): void;
+    disconnectedCallback(): void;
+    /**
+     * EVENTS
+     * ------------------------------------------------------
+     */
+    private keyboardMode;
+    private shiftMode;
+    private isInsideContainer;
+    private focusByKey;
+    private pointerDown;
+    private listenToKeyDown;
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    isActive(): boolean;
+    activate(): Promise<void>;
+    disable(): Promise<void>;
+    focusItem(index: number): Promise<void>;
+    focusNextItem(ev: KeyboardEvent): Promise<void>;
+    focusPreviousItem(ev: KeyboardEvent): Promise<void>;
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    private updateFocus;
+    private setFocusToEl;
+    /**
+     * CSS Classes
+     * ------------------------------------------------------
+     */
+    private cssBlock;
+    cssSwiper: () => {
+        [x: string]: boolean;
+    };
+    cssInnerSwiper: () => {
+        [x: string]: boolean;
+    };
+    cssSwiperContainer: () => {
+        [x: string]: boolean;
+    };
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    notifyChange: (...args: any[]) => any;
+    isFirst(): boolean;
+    hasShadowLeft(): boolean;
+    hasShadowRight(): boolean;
+    isLast(): boolean;
+    previous(steps?: number): Promise<SwiperSlide | undefined>;
+    next(steps?: number): Promise<SwiperSlide | undefined>;
+    updateIndex(index?: number): Promise<undefined>;
+    goTo(index?: number): Promise<SwiperSlide | undefined>;
+    renderControls(): any;
+    getAllControlItems(): SwiperControlItem[];
+    onControlChange: (selectedValue: number) => void;
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    private lastIndex;
+    private hasShadow;
+    private notifyChangeInternal;
+    private buildSlide;
+    private animate;
+    private onPreviousButtonClick;
+    private onNextButtonClick;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baloise/ds-core",
-  "version": "17.2.1",
+  "version": "17.2.2",
   "description": "The Baloise Design-System is an open source project for styling awesome web applications that follow the Baloise corporate styling guidelines.",
   "repository": {
     "type": "git",
@@ -28,12 +28,12 @@
     "test:ui": "vitest --ui"
   },
   "dependencies": {
-    "@baloise/ds-styles": "17.2.1",
-    "@baloise/ds-icons": "17.2.1",
+    "@baloise/ds-styles": "17.2.2",
+    "@baloise/ds-icons": "17.2.2",
     "@baloise/web-app-utils": "3.15.0",
     "@floating-ui/dom": "~1.6.3",
     "@popperjs/core": "~2.11.4",
-    "@stencil/core": "4.22.3",
+    "@stencil/core": "4.23.0",
     "big.js": "~6.2.1",
     "contactjs": "2.1.7",
     "filesize.js": "~2.0.0",
@@ -54,10 +54,10 @@
     "@baloise/output-target-react": "0.0.0",
     "@baloise/output-target-vue": "0.0.0",
     "@baloise/output-target-web": "0.0.0",
-    "@baloise/ds-css": "17.2.1",
-    "@baloise/ds-maps": "17.2.1",
-    "@baloise/ds-brand-icons": "17.2.1",
-    "@baloise/ds-favicons": "17.2.1"
+    "@baloise/ds-css": "17.2.2",
+    "@baloise/ds-maps": "17.2.2",
+    "@baloise/ds-brand-icons": "17.2.2",
+    "@baloise/ds-favicons": "17.2.2"
   },
   "sideEffects": false
 }

package/components/bal-carousel-item2.js

@@ -1,115 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { B as BEM } from './bem.js';
-import { l as rLCP, b as waitAfterFramePaint } from './helpers.js';
-import { i as inheritAttributes } from './attributes.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.src = undefined;
-        this.label = '';
-        this.htmlRole = 'listitem';
-        this.elementType = 'button';
-        this.name = '';
-        this.value = '';
-        this.href = undefined;
-        this.target = '_self';
-        this.rel = undefined;
-        this.download = undefined;
-        this.color = undefined;
-    }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    componentDidLoad() {
-        rLCP(() => {
-            this.isLargestContentfulPaintDone = true;
-        });
-    }
-    componentWillLoad() {
-        this.imageInheritAttributes = inheritAttributes(this.el, ['alt']);
-    }
-    async getData() {
-        return {
-            clientWidth: this.el.clientWidth,
-            label: this.label,
-        };
-    }
-    async setFocus() {
-        await waitAfterFramePaint();
-        if (this.buttonEl) {
-            this.buttonEl.focus();
-        }
-    }
-    render() {
-        const block = BEM.block('carousel');
-        const itemEl = block.element('item');
-        const isProduct = !!this.color && !!this.label;
-        if (!isProduct) {
-            return (h(Host, { role: this.htmlRole, class: Object.assign({}, itemEl.class()) }, 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, { role: this.htmlRole, 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],
-        "getData": [64],
-        "setFocus": [64]
-    }]);
-function defineCustomElement() {
-    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;
-    } });
-}
-
-export { CarouselItem as C, defineCustomElement as d };