@baloise/ds-core 19.9.5 → 20.0.0-next.4

package/dist/esm/bal-carousel_2.entry.js

@@ -1,392 +0,0 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-BdVwMG9u.js';
-import { _ as __decorate, a as __metadata } from './tslib.es6-dfXERft2.js';
-import { B as BEM } from './bem-ByiN-QjD.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-DwhK_t2m.js';
-import { s as stopEventBubbling } from './form-input-DYvzaBlM.js';
-import { a as ariaBooleanToString } from './aria-DBsOHTWj.js';
-import { t as toKebabCase, S as SwiperUtil } from './string-Dk4PnSfl.js';
-import { L as ListenToMutation } from './mutation.decorator-DhVeNnnY.js';
-import { L as ListenToSwipe } from './swipe.decorator-B-pmjyNr.js';
-import { L as ListenToResize } from './resize.decorator-ZKPOJfw5.js';
-import { b as balBreakpoints } from './breakpoints.subject-PxavGndB.js';
-import { d as defaultConfig } from './config.default-RE8-gLMQ.js';
-import { L as ListenToVisibility } from './visibility.decorator-zTjPC2du.js';
-import { L as ListenToConfig } from './config.decorator-3bfyZ-0Y.js';
-import { s as sanitizeSvg } from './svg-DhNz-XmR.js';
-import { i as inheritAttributes } from './attributes-C4sZQbkT.js';
-import { l as rOnLoad, a as waitAfterFramePaint } from './helpers-BNj87EbG.js';
-import './keyboard.helpers-BERg8BNc.js';
-import './listener-CClDIhvK.js';
-import './browser-B1u-Mq75.js';
-import './swipe.subject-BXuaiulg.js';
-import './device-TtMibDFL.js';
-import './tokens.esm-Dk6PruGq.js';
-import './config.utils-B7jugjyM.js';
-import './log-CwssmmaV.js';
-import './_commonjsHelpers-BFTU3MAI.js';
-
-const TabControl = ({ value, items, containerId, onControlChange }) => {
-    const block = BEM.block('carousel');
-    const controls = block.element('controls');
-    return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('tabs').class()) }, h("bal-card", null, h("bal-card-content", { role: "tabs" }, items.map(item => (h("button", { class: {
-            'button': true,
-            'is-fullwidth': true,
-            'is-primary': value === item.value,
-            'is-light': value !== item.value,
-        }, role: "tab", "aria-selected": ariaBooleanToString(value === item.value), "aria-controls": containerId + '-' + toKebabCase(item.label), key: item.value, onClick: () => onControlChange(item) }, item.label)))))));
-};
-
-const balCarouselCss = ":root{--bal-carousel-inner-border-background:var(--bal-color-border);--bal-carousel-inner-border-background-inverted:var(--bal-color-border-primary-light);--bal-carousel-inner-shadow-left-background-before:var(--bal-color-white);--bal-carousel-inner-shadow-right-background-after:var(--bal-color-white);--bal-carousel-inner-shadow-left-background-inverted-before:var(--bal-color-primary);--bal-carousel-inner-shadow-right-background-inverted-after:var(--bal-color-primary);--bal-carousel-product-item-button-background:var(--bal-color-white);--bal-carousel-product-item-button-background-green:var(--bal-color-green-1);--bal-carousel-product-item-button-background-green-hover:var(--bal-color-green-1);--bal-carousel-product-item-button-background-green-active:var(--bal-color-green-2);--bal-carousel-product-item-button-background-red:var(--bal-color-red-1);--bal-carousel-product-item-button-background-red-hover:var(--bal-color-red-1);--bal-carousel-product-item-button-background-red-active:var(--bal-color-red-2);--bal-carousel-product-item-button-background-yellow:var(--bal-color-yellow-1);--bal-carousel-product-item-button-background-yellow-hover:var(--bal-color-yellow-1);--bal-carousel-product-item-button-background-yellow-active:var(--bal-color-yellow-2);--bal-carousel-product-item-button-background-purple:var(--bal-color-purple-1);--bal-carousel-product-item-button-background-purple-hover:var(--bal-color-purple-1);--bal-carousel-product-item-button-background-purple-active:var(--bal-color-purple-2);--bal-carousel-inner-border-radius:var(--bal-radius-rounded);--bal-carousel-image-border-radius:var(--bal-radius-normal);--bal-carousel-product-item-button-border-radius:var(--bal-radius-large);--bal-carousel-product-item-button-label-text-color:var(--bal-color-text-primary);--bal-carousel-sticky-top:0}.bal-swiper{position:relative;display:block}.bal-swiper__inner{display:block;position:relative;margin-left:auto;margin-right:auto;overflow:clip;list-style:none;padding:0;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-overflow-scrolling:touch}.bal-swiper__inner--items-per-view-auto .bal-carousel__item{width:auto}.bal-swiper__inner--items-per-view-1 .bal-carousel__item{width:100%}.bal-swiper__inner--items-per-view-2 .bal-carousel__item{width:50%}.bal-swiper__inner--items-per-view-3 .bal-carousel__item{width:33.3333%}.bal-swiper__inner--items-per-view-4 .bal-carousel__item{width:25%}.bal-swiper__container{position:relative;max-width:100%;width:100%;height:100%;display:-ms-flexbox;display:flex;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-duration:0ms;transition-duration:0ms;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px)}.bal-swiper__container--gap-none{gap:0}.bal-swiper__container--gap-normal{gap:1rem}.bal-swiper__container--gap-medium{gap:1.5rem}.bal-swiper__controls{width:100%}.bal-swiper__controls--dots{position:relative}@media screen and (max-width: 768px){.bal-swiper__controls--large{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;gap:2rem;margin-top:1rem}}@media screen and (min-width: 769px),print{.bal-swiper__controls--large{position:absolute;top:calc(50% - 1.5rem)}.bal-swiper__controls--large .bal-swiper__controls__button{position:absolute;z-index:7}.bal-swiper__controls--large .bal-swiper__controls__button--left{left:0}.bal-swiper__controls--large .bal-swiper__controls__button--right{right:0}}.bal-swiper__controls__button--hidden{display:none !important;visibility:none !important}.bal-swiper__controls--small{position:absolute;top:calc(50% - 1rem)}.bal-swiper__controls--small .bal-swiper__controls__button{position:absolute;z-index:7}.bal-swiper__controls--small .bal-swiper__controls__button--left{left:0}.bal-swiper__controls--small .bal-swiper__controls__button--right{right:0}.bal-swiper__controls--small .bal-swiper__controls__button--hidden{display:none !important;visibility:hidden !important}.bal-swiper__inner--shadow-left::before,.bal-swiper__inner--shadow-right::after{position:absolute;width:3rem;height:100%;top:0}.bal-swiper__inner--shadow-left::before{content:\"\";left:0;background:-webkit-gradient(linear, left top, right top, color-stop(50%, var(--bal-carousel-inner-shadow-left-background-before)), to(rgba(255, 255, 255, 0)));background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-swiper__inner--shadow-right::after{content:\"\";right:0;background:-webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, var(--bal-carousel-inner-shadow-right-background-after)));background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-after) 50%)}.bal-swiper__inner--shadow-left.bal-swiper__inner--inverted::before{background:-webkit-gradient(linear, left top, right top, color-stop(50%, var(--bal-carousel-inner-shadow-left-background-inverted-before)), to(rgba(255, 255, 255, 0)));background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-inverted-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-swiper__inner--shadow-right.bal-swiper__inner--inverted::after{background:-webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, var(--bal-carousel-inner-shadow-right-background-inverted-after)));background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-inverted-after) 50%)}.bal-carousel--full-height{height:100%}.bal-carousel--full-height .bal-carousel__item{height:auto}.bal-carousel__inner--full-height{height:100%}.bal-carousel__inner__container--border{padding-bottom:var(--bal-border-width-normal)}.bal-carousel__inner__container__border{position:absolute;background:var(--bal-carousel-inner-border-background);border-radius:var(--bal-carousel-inner-border-radius);height:var(--bal-border-width-normal);width:100%;bottom:0;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px)}.bal-carousel__inner__container__border--inverted{background:var(--bal-carousel-inner-border-background-inverted)}.bal-carousel__item{-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;font-size:var(--bal-text-size-large);min-height:2rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;round:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-inverted-after) 50%)}.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:2.5rem}}@media screen and (min-width: 1024px){.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:3rem}}.bal-carousel--card{margin-left:-1rem;margin-right:-1rem}@media screen and (min-width: 769px),print{.bal-carousel--card{margin-left:-2.5rem;margin-right:-2.5rem}}.bal-carousel--card .bal-carousel__controls{padding-left:1rem;padding-right:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__controls{padding-left:2.5rem;padding-right:2.5rem}}.bal-carousel--card .bal-carousel__item{width:100%;padding-top:1rem;padding-bottom:1rem;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__item{width:100%;padding-top:2.5rem;padding-bottom:2.5rem;padding-left:2.5rem;padding-right:2.5rem}}.bal-carousel--controls-sticky .bal-carousel__controls--tabs{position:-webkit-sticky;position:sticky;top:var(--bal-carousel-sticky-top);z-index:var(--bal-z-index-sticky)}.bal-carousel__controls--tabs .bal-card{padding:0}.bal-carousel__controls--tabs .bal-card-content{padding:.5rem !important;gap:.5rem;display:-ms-flexbox;display:flex}.bal-carousel__controls--tabs .bal-card-content .bal-button{-ms-flex:1;flex:1}.bal-carousel__controls--tabs .bal-card-content .bal-button .button{padding:.5rem !important}.bal-carousel--image .bal-carousel__inner{border-radius:var(--bal-carousel-image-border-radius)}.bal-carousel--image .bal-carousel__inner--is-1by1{padding-top:100%}.bal-carousel--image .bal-carousel__inner--is-16by9{padding-top:56.25%}.bal-carousel--image .bal-carousel__inner--is-3by2{padding-top:66.66%}.bal-carousel--image .bal-carousel__inner--is-4by3{padding-top:75%}.bal-carousel--image .bal-carousel__inner__container{position:absolute;top:0;left:0;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:100%}.bal-carousel--image .bal-carousel__item{position:relative;-ms-flex:0 0 100%;flex:0 0 100%}.bal-carousel--image .bal-carousel__item>img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;user-drag:none;user-zoom:fixed}.bal-carousel--product .bal-carousel__inner__container{gap:1rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding-top:1rem;padding-bottom:1rem}@media screen and (min-width: 769px),print{.bal-carousel--product .bal-carousel__inner__container{padding-top:1.5rem;padding-bottom:1.5rem}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__inner__container{padding-top:2rem;padding-bottom:2rem}}.bal-carousel--product .bal-carousel__item{display:-ms-flexbox;display:flex;min-width:10rem;max-width:10rem;height:11rem;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;user-zoom:fixed;user-drag:none}.bal-carousel--product .bal-carousel__item img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;user-zoom:fixed;user-drag:none}.bal-carousel--product .bal-carousel__item__button{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;gap:1rem;border-radius:var(--bal-carousel-product-item-button-border-radius);padding:var(--bal-text-size-x-small);border:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;background:var(--bal-carousel-product-item-button-background)}@media (hover: hover)and (pointer: fine){.bal-carousel--product .bal-carousel__item__button:focus-visible:not(:active){-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-green{background:var(--bal-carousel-product-item-button-background-green)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-green:hover{background:var(--bal-carousel-product-item-button-background-green-hover)}.bal-carousel--product .bal-carousel__item__button--color-green:active{background:var(--bal-carousel-product-item-button-background-green-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-red{background:var(--bal-carousel-product-item-button-background-red)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-red:hover{background:var(--bal-carousel-product-item-button-background-red-hover)}.bal-carousel--product .bal-carousel__item__button--color-red:active{background:var(--bal-carousel-product-item-button-background-red-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-yellow{background:var(--bal-carousel-product-item-button-background-yellow)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-yellow:hover{background:var(--bal-carousel-product-item-button-background-yellow-hover)}.bal-carousel--product .bal-carousel__item__button--color-yellow:active{background:var(--bal-carousel-product-item-button-background-yellow-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-purple{background:var(--bal-carousel-product-item-button-background-purple)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-purple:hover{background:var(--bal-carousel-product-item-button-background-purple-hover)}.bal-carousel--product .bal-carousel__item__button--color-purple:active{background:var(--bal-carousel-product-item-button-background-purple-active)}}.bal-carousel--product .bal-carousel__item__button__image{width:5rem;height:5rem;pointer-events:none}.bal-carousel--product .bal-carousel__item__button__label{font-weight:var(--bal-font-weight-bold);color:var(--bal-carousel-product-item-button-label-text-color);font-size:var(--bal-text-size-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;height:3.5rem;overflow:hidden;line-height:1.15rem;word-break:break-word}";
-
-const Carousel = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.balChange = createEvent(this, "balChange");
-        this.swiper = new SwiperUtil();
-        this.swiperIsLastSlideVisible = false;
-        this.hasAnimated = false;
-        this.isMobile = balBreakpoints.isMobile;
-        this.language = defaultConfig.language;
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * Defines the active slide index.
-         */
-        this.value = 0;
-        /**
-         * When how many slides are moved when going forward or backward.
-         */
-        this.steps = 1;
-        /**
-         * Defines how many slides are visible in the container for the user.
-         * `auto` will use the size of the actual item content
-         */
-        this.itemsPerView = 1;
-        /**
-         * Defines the layout of the navigation controls.
-         */
-        this.controls = 'none';
-        /**
-         * Defines the layout of the navigation controls.
-         */
-        this.space = 'none';
-        /**
-         * @deprecated
-         * Defines the role of the carousel.
-         */
-        this.htmlRole = 'list';
-        /**
-         * If `true` items move under the controls, instead of having a gap
-         */
-        this.controlsOverflow = false;
-        /**
-         * If `true` the carousel can be used on dark background
-         */
-        this.inverted = false;
-        /**
-         * If `true` the carousel uses the full height
-         */
-        this.fullHeight = false;
-        /**
-         * Defines the image aspect ratio.
-         * Should be combined with the interface `product`
-         */
-        this.aspectRatio = '16by9';
-        /**
-         * Defines special looks.
-         */
-        this.interface = '';
-        /**
-         * If `true` the controls will be sticky to the top.
-         */
-        this.controlsSticky = false;
-        /**
-         * If `true` vertical scrolling on mobile is enabled.
-         */
-        this.scrollY = true;
-        /**
-         * If `true` a light border is shown at the bottom.
-         */
-        this.border = false;
-        this.mutationObserverActive = true;
-    }
-    onValueChange() {
-        this.swiper.index = this.value;
-    }
-    onStepsChange() {
-        this.swiper.steps = this.steps;
-    }
-    onItemsPerViewChange() {
-        this.swiper.itemsPerView = this.itemsPerView;
-    }
-    onControlsChange() {
-        this.swiper.controls = this.controls;
-    }
-    onSpaceChange() {
-        this.swiper.gapSpace = this.space;
-    }
-    onInterFaceChange() {
-        this.swiper.gapSpace = this.interface === 'product' ? 'normal' : this.space;
-    }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        this.swiper.connectedCallback(this);
-        this.onControlsChange();
-        this.onItemsPerViewChange();
-        this.onStepsChange();
-        this.onSpaceChange();
-        this.onInterFaceChange();
-        this.onValueChange();
-    }
-    disconnectedCallback() {
-        this.swiper.disconnectedCallback();
-    }
-    /**
-     * LISTENERS
-     * ------------------------------------------------------
-     */
-    async blockVerticalScrolling(ev) {
-        var _a;
-        if (!this.scrollY && ((_a = this.el) === null || _a === void 0 ? void 0 : _a.contains(ev.target))) {
-            stopEventBubbling(ev);
-        }
-    }
-    mutationListener() {
-        this.swiper.notifyChange();
-    }
-    visibilityListener() {
-        this.swiper.notifyChange();
-    }
-    swipeListener({ left, right }) {
-        if (left) {
-            this.next();
-        }
-        else if (right) {
-            this.previous();
-        }
-    }
-    breakpointListener(breakpoints) {
-        this.isMobile = breakpoints.mobile;
-        this.swiper.notifyChange();
-    }
-    resizeListener() {
-        this.swiper.notifyChange();
-    }
-    /**
-     * @internal define config for the component
-     */
-    async configChanged(state) {
-        this.language = state.language;
-    }
-    /**
-     * PUBLIC METHODS
-     * ------------------------------------------------------
-     */
-    async previous(steps = this.steps) {
-        this.swiper.previous(steps);
-    }
-    async next(steps = this.steps) {
-        this.swiper.next(steps);
-    }
-    /**
-     * @internal
-     */
-    async getContainerId() {
-        return this.swiper.containerId;
-    }
-    /**
-     * GETTERS
-     * ------------------------------------------------------
-     */
-    swiperGetAllChildrenElements() {
-        return Array.from(this.el.querySelectorAll('bal-carousel-item'));
-    }
-    /**
-     * EVENT HANDLERS
-     * ------------------------------------------------------
-     */
-    swiperOnChange(index) {
-        this.value = index;
-        this.balChange.emit(index);
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = BEM.block('carousel');
-        const inner = block.element('inner');
-        const container = inner.element('container');
-        return (h(Host, { key: '561107c8e3c5eb7a80b3e2a8b113ed13f2fdfb5d', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssSwiper()), block.class()), block.modifier(this.interface).class(this.interface !== '')), block.modifier(`full-height`).class(this.fullHeight)), block.modifier('controls-sticky').class(this.controlsSticky)), block.modifier(`controls-tabs`).class(this.controls === 'tabs')) }, this.controls === 'tabs' ? (h(TabControl, { value: this.value, items: this.swiper.getAllControlItems(), containerId: this.swiper.containerId, onControlChange: item => this.swiper.onControlChange(item.value) })) : (''), h("div", { key: '6adb9641efe5f488a940ffac297bcc7b3932c92a', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssInnerSwiper()), inner.class()), inner.modifier(`is-${this.aspectRatio}`).class()), inner.modifier(`inverted`).class(this.inverted)), inner.modifier(`full-height`).class(this.fullHeight)), ref: el => (this.swiper.innerEl = el) }, h("div", { key: 'fb4083afd4a967761c25200e8630f171b02a6c2d', id: this.swiper.containerId, role: this.controls === 'tabs' ? '' : 'list', class: Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssSwiperContainer()), container.class()), container.modifier(`border`).class(this.border)), container.modifier(`is-${this.aspectRatio}`).class()), ref: el => (this.swiper.containerEl = el) }, h("slot", { key: 'c46d996cc3904bcdc38951f155e3a49f73f284f8' }), this.border ? (h("div", { id: `${this.swiper.id}-border`, "aria-hidden": "true", class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.swiper.borderEl = el) })) : (''))), this.swiper.renderControls()));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "value": ["onValueChange"],
-        "steps": ["onStepsChange"],
-        "itemsPerView": ["onItemsPerViewChange"],
-        "controls": ["onControlsChange"],
-        "space": ["onSpaceChange"],
-        "interface": ["onInterFaceChange"]
-    }; }
-};
-__decorate([
-    ListenToMutation({ tags: ['bal-carousel-item'], characterData: false }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], Carousel.prototype, "mutationListener", null);
-__decorate([
-    ListenToVisibility(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], Carousel.prototype, "visibilityListener", null);
-__decorate([
-    ListenToSwipe(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], Carousel.prototype, "swipeListener", null);
-__decorate([
-    ListenToBreakpoints(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], Carousel.prototype, "breakpointListener", null);
-__decorate([
-    ListenToResize(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], Carousel.prototype, "resizeListener", null);
-__decorate([
-    ListenToConfig(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", Promise)
-], Carousel.prototype, "configChanged", null);
-Carousel.style = balCarouselCss;
-
-const CarouselItem = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.balNavigate = createEvent(this, "balNavigate");
-        this.balFocus = createEvent(this, "balFocus");
-        this.balBlur = createEvent(this, "balBlur");
-        this.imageInheritAttributes = {};
-        this.isOnLoadEventDone = false;
-        this.containerId = '';
-        this.svgContent = '';
-        /**
-         * Label of the slide which will be used for pagination tabs
-         */
-        this.label = '';
-        /**
-         * Svg content.
-         */
-        this.svg = '';
-        /**
-         * @deprecated
-         * Defines the role of the carousel.
-         */
-        this.htmlRole = 'listitem';
-        /**
-         * The type of button.
-         */
-        this.elementType = 'button';
-        /**
-         * The name of the button, which is submitted with the form data.
-         */
-        this.name = undefined;
-        /**
-         * The value of the button, which is submitted with the form data.
-         */
-        this.value = undefined;
-        /**
-         * Specifies where to display the linked URL.
-         * Only applies when an `href` is provided.
-         */
-        this.target = '_self';
-        this.generateSvgContent = () => {
-            if (this.svg !== undefined && this.svg.length > 0) {
-                this.svgContent = sanitizeSvg(this.svg);
-            }
-        };
-        this.onClick = (ev) => {
-            if (this.href !== undefined) {
-                this.balNavigate.emit(ev);
-            }
-        };
-        this.onFocus = () => {
-            this.balFocus.emit();
-        };
-        this.onBlur = () => {
-            this.balBlur.emit();
-        };
-    }
-    svgChanged() {
-        this.generateSvgContent();
-    }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        this.generateSvgContent();
-    }
-    componentDidLoad() {
-        rOnLoad(() => {
-            this.isOnLoadEventDone = 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.isOnLoadEventDone && 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.isOnLoadEventDone && 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.isOnLoadEventDone && this.svgContent !== undefined ? (h("div", { class: Object.assign({}, image.class()), innerHTML: this.svgContent })) : (''), this.label !== undefined ? h("span", { class: Object.assign({}, label.class()) }, this.label) : '', h("slot", null))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "svg": ["svgChanged"]
-    }; }
-};
-
-export { Carousel as bal_carousel, CarouselItem as bal_carousel_item };