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

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-nightly.20250109",
   "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-nightly.20250109",
+    "@baloise/ds-icons": "17.2.2-nightly.20250109",
     "@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-nightly.20250109",
+    "@baloise/ds-maps": "17.2.2-nightly.20250109",
+    "@baloise/ds-brand-icons": "17.2.2-nightly.20250109",
+    "@baloise/ds-favicons": "17.2.2-nightly.20250109"
   },
   "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 };