@baloise/ds-core 16.5.0 → 16.5.1

package/dist/cjs/bal-segment.cjs.entry.js

@@ -1,319 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-219b2f52.js');
-const tslib_es6 = require('./tslib.es6-a680968e.js');
-const bem = require('./bem-81bc6a2d.js');
-const log = require('./log-33398c2a.js');
-const index_esm = require('./index.esm-54a3d84e.js');
-const formInput = require('./form-input-134c5116.js');
-const focusVisible = require('./focus-visible-264bd9b8.js');
-const helpers = require('./helpers-2a8c8333.js');
-const breakpoints_decorator = require('./breakpoints.decorator-a4a5bd7a.js');
-const windowResize_decorator = require('./window-resize.decorator-c7a521b0.js');
-require('./browser-1d542d0f.js');
-require('./index-e6a233be.js');
-require('./_commonjsHelpers-68cdf74f.js');
-require('./icons.constant-7c82086a.js');
-require('./config.utils-e4cd49d6.js');
-require('./breakpoints.subject-fbf85930.js');
-require('./device-9f97a845.js');
-require('./listener-52d2e5fd.js');
-require('./tokens.esm-aa4bb7f7.js');
-
-const balSegmentCss = ":root{--bal-segment-background:var(--bal-color-grey-2);--bal-segment-background-invalid:var(--bal-color-danger-1);--bal-segment-item-focus-border:var(--bal-color-border-primary);--bal-segment-item-text-color:var(--bal-color-text-primary);--bal-segment-item-text-color-checked:var(--bal-color-text-primary);--bal-segment-item-text-color-checked-hovered:var(--bal-color-text-primary-hovered);--bal-segment-item-text-color-checked-pressed:var(--bal-color-text-primary-pressed);--bal-segment-item-text-color-invalid:var(--bal-color-text-danger);--bal-segment-item-text-color-invalid-hovered:var(--bal-color-text-danger-hovered);--bal-segment-item-text-color-invalid-pressed:var(--bal-color-text-danger-pressed);--bal-segment-item-text-color-disabled:var(--bal-color-text-grey);--bal-segment-item-text-color-disabled-checked:var(--bal-color-text-grey-dark);--bal-segment-item-divider-background:var(--bal-color-grey);--bal-segment-item-divider-background-invalid:var(--bal-color-danger-2);--bal-segment-item-indicator-background:var(--bal-color-purple-2);--bal-segment-item-indicator-background-invalid:var(--bal-color-danger-4);--bal-segment-item-indicator-background-disabled:var(--bal-color-grey-3)}.bal-segment{display:-ms-flexbox;display:flex;background:var(--bal-segment-background);border-radius:var(--bal-radius-normal);gap:.125rem;gap:.125rem;padding:.25rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.bal-segment--invalid{background:var(--bal-segment-background-invalid)}.bal-segment--vertical{-ms-flex-direction:column;flex-direction:column;width:100%}.bal-segment--vertical .bal-segment-item__button{width:100%;-ms-flex:1;flex:1}.bal-segment--vertical.bal-segment--scrollable{overflow:auto;max-height:240px}.bal-segment--expanded{width:100%;min-width:100%;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center}.bal-segment--expanded .bal-segment-item,.bal-segment--expanded .bal-segment-item>button{-ms-flex:1;flex:1;width:100%}.bal-segment--expanded .bal-segment-item .bal-content,.bal-segment--expanded .bal-segment-item>button .bal-content{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}";
-const BalSegmentStyle0 = balSegmentCss;
-
-const Segment = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.balBlur = index.createEvent(this, "balBlur", 7);
-        this.balChange = index.createEvent(this, "balChange", 7);
-        this.balSelect = index.createEvent(this, "balSelect", 7);
-        this.balVertical = index.createEvent(this, "balVertical", 7);
-        this.getSegmentItem = (selector) => {
-            var _a, _b;
-            const items = this.items.filter(item => !item.disabled);
-            const currIndex = items.findIndex(item => item === document.activeElement.closest('bal-segment-item'));
-            switch (selector) {
-                case 'current':
-                    return items[currIndex];
-                case 'first':
-                    return items[0];
-                case 'last':
-                    return items[items.length - 1];
-                case 'next':
-                    return (_a = items[currIndex + 1]) !== null && _a !== void 0 ? _a : items[0];
-                case 'previous':
-                    return (_b = items[currIndex - 1]) !== null && _b !== void 0 ? _b : items[items.length - 1];
-                default:
-                    return null;
-            }
-        };
-        /**
-         * PRIVATE EVENT HANDLERS
-         * ------------------------------------------------------
-         */
-        this.onPointerDown = () => {
-            this.keyboardMode = false;
-        };
-        this.onSlottedItemsChange = () => {
-            /**
-             * When the slotted segment buttons change we need to
-             * ensure that the new segment buttons are checked if
-             * the value matches the segment button value.
-             */
-            this.valueChanged(this.value);
-            this.defineWidth();
-        };
-        this.onClick = (ev) => {
-            if (this.disabled) {
-                return;
-            }
-            const current = ev.target;
-            const previous = this.checked;
-            // If the current element is a segment then that means
-            // the user tried to swipe to a segment button and
-            // click a segment button at the same time so we should
-            // not update the checked segment button
-            if (current.tagName === 'BAL-SEGMENT') {
-                return;
-            }
-            if (current && current.setFocus) {
-                current.setFocus();
-            }
-            if (previous) {
-                this.checkButton(previous, current);
-            }
-            else {
-                this.setCheckedClasses();
-                this.checkButton(current, current);
-            }
-            if (current !== previous) {
-                this.emitValueChange();
-            }
-        };
-        this.focusedValue = undefined;
-        this.keyboardMode = true;
-        this.isVertical = false;
-        this.isMobile = false;
-        this.maxWidth = 0;
-        this.invalid = false;
-        this.disabled = false;
-        this.vertical = false;
-        this.scrollable = false;
-        this.expanded = false;
-        this.value = undefined;
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    valueChanged(value) {
-        /**
-         * `balSelect` is emitted every time the value changes (internal or external changes).
-         * Used by `bal-segment-item` to determine if the button should be checked.
-         */
-        this.balSelect.emit(value);
-    }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        this.el.addEventListener('touchstart', this.onPointerDown);
-        this.el.addEventListener('mousedown', this.onPointerDown);
-    }
-    disconnectedCallback() {
-        this.el.removeEventListener('touchstart', this.onPointerDown);
-        this.el.removeEventListener('mousedown', this.onPointerDown);
-    }
-    async componentDidLoad() {
-        this.setCheckedClasses();
-        this.defineWidth();
-    }
-    /**
-     * LISTENERS
-     * ------------------------------------------------------
-     */
-    breakpointListener(breakpoints) {
-        this.isMobile = breakpoints.mobile;
-    }
-    windowResizeListener() {
-        if (this.vertical === false && this.maxWidth > 0) {
-            const parent = this.el.parentElement.getBoundingClientRect();
-            if (parent.width < this.maxWidth) {
-                //
-                // element in horizontal is to big
-                this.emitVerticalChange(true);
-            }
-            else {
-                //
-                // element has enough space in parent element
-                this.emitVerticalChange(false);
-            }
-        }
-        else {
-            this.emitVerticalChange(true);
-        }
-    }
-    listenOnBalBlur(ev) {
-        formInput.stopEventBubbling(ev);
-        this.balBlur.emit(ev.detail);
-    }
-    listenOnKeyDown(ev) {
-        this.keyboardMode = focusVisible.FOCUS_KEYS.includes(ev.key);
-        let current;
-        if (index_esm.isSpaceKey(ev)) {
-            formInput.stopEventBubbling(ev);
-            current = this.getSegmentItem('current');
-        }
-        else if (index_esm.isArrowUpKey(ev) || index_esm.isArrowLeftKey(ev)) {
-            formInput.stopEventBubbling(ev);
-            current = this.getSegmentItem('previous');
-        }
-        else if (index_esm.isArrowDownKey(ev) || index_esm.isArrowRightKey(ev)) {
-            formInput.stopEventBubbling(ev);
-            current = this.getSegmentItem('next');
-        }
-        else if (index_esm.isHomeKey(ev)) {
-            formInput.stopEventBubbling(ev);
-            current = this.getSegmentItem('first');
-        }
-        else if (index_esm.isEndKey(ev)) {
-            formInput.stopEventBubbling(ev);
-            current = this.getSegmentItem('last');
-        }
-        if (!current) {
-            return;
-        }
-        const previous = this.checked;
-        if (current !== previous) {
-            this.checkButton(previous, current);
-            this.emitValueChange();
-        }
-        if (current) {
-            current.setFocus();
-        }
-    }
-    /**
-     * GETTERS
-     * ------------------------------------------------------
-     */
-    get items() {
-        return Array.from(this.el.querySelectorAll('bal-segment-item'));
-    }
-    get checked() {
-        return this.items.find(item => item.value === this.value);
-    }
-    /**
-     * PRIVATE METHODS
-     * ------------------------------------------------------
-     */
-    emitValueChange() {
-        this.balChange.emit(this.value);
-    }
-    emitVerticalChange(isVertical) {
-        if (this.isVertical !== isVertical) {
-            this.isVertical = isVertical;
-            this.balVertical.emit(this.isVertical);
-        }
-    }
-    defineWidth() {
-        helpers.raf(() => {
-            if (this.isVertical === false) {
-                const childRect = this.el.getBoundingClientRect();
-                this.maxWidth = childRect.width;
-            }
-            this.windowResizeListener();
-        });
-    }
-    getIndicator(item) {
-        const root = item.shadowRoot || item;
-        return root.querySelector('.bal-segment-item__indicator');
-    }
-    checkButton(previous, current) {
-        const previousIndicator = this.getIndicator(previous);
-        const currentIndicator = this.getIndicator(current);
-        if (previousIndicator === null || currentIndicator === null) {
-            return;
-        }
-        const previousClientRect = previousIndicator.getBoundingClientRect();
-        const currentClientRect = currentIndicator.getBoundingClientRect();
-        const widthDelta = previousClientRect.width / currentClientRect.width;
-        const xPosition = previousClientRect.left - currentClientRect.left;
-        // Scale the indicator width to match the previous indicator width
-        // and translate it on top of the previous indicator
-        let transform = `translate3d(${xPosition}px, 0, 0) scaleX(${widthDelta})`;
-        if (this.isVertical) {
-            const heightDelta = previousClientRect.height / currentClientRect.height;
-            const yPosition = previousClientRect.top - currentClientRect.top;
-            // Scale the indicator width to match the previous indicator width
-            // and translate it on top of the previous indicator
-            transform = `translate3d(0, ${yPosition}px, 0) scaleY(${heightDelta})`;
-        }
-        index.writeTask(() => {
-            // Remove the transition before positioning on top of the previous indicator
-            currentIndicator.classList.remove('bal-segment-item__indicator--animated');
-            currentIndicator.style.setProperty('transform', transform);
-            // Force a repaint to ensure the transform happens
-            currentIndicator.getBoundingClientRect();
-            // Add the transition to move the indicator into place
-            currentIndicator.classList.add('bal-segment-item__indicator--animated');
-            // Remove the transform to slide the indicator back to the button clicked
-            currentIndicator.style.setProperty('transform', '');
-        });
-        this.value = current.value;
-        this.setCheckedClasses();
-    }
-    setCheckedClasses() {
-        const items = this.items;
-        const index = items.findIndex(item => item.value === this.value);
-        const next = index + 1;
-        const previous = index - 1;
-        for (const item of items) {
-            item.classList.remove('bal-segment-item--after-checked');
-            item.classList.remove('bal-segment-item--before-checked');
-        }
-        if (next < items.length) {
-            items[next].classList.add('bal-segment-item--after-checked');
-        }
-        if (previous < items.length && previous >= 0) {
-            items[previous].classList.add('bal-segment-item--before-checked');
-        }
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const { invalid, isVertical, scrollable, keyboardMode, expanded, isMobile } = this;
-        const block = bem.BEM.block('segment');
-        return (index.h(index.Host, { role: "radiogroup", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('invalid').class(invalid)), block.modifier('vertical').class(isVertical)), block.modifier('scrollable').class(scrollable)), block.modifier('keyboard').class(keyboardMode)), block.modifier('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, index.h("slot", { onSlotchange: this.onSlottedItemsChange })));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "value": ["valueChanged"]
-    }; }
-};
-tslib_es6.__decorate([
-    log.Logger('bal-segment'),
-    tslib_es6.__metadata("design:type", Function),
-    tslib_es6.__metadata("design:paramtypes", [Function]),
-    tslib_es6.__metadata("design:returntype", void 0)
-], Segment.prototype, "createLogger", null);
-tslib_es6.__decorate([
-    breakpoints_decorator.ListenToBreakpoints(),
-    tslib_es6.__metadata("design:type", Function),
-    tslib_es6.__metadata("design:paramtypes", [Object]),
-    tslib_es6.__metadata("design:returntype", void 0)
-], Segment.prototype, "breakpointListener", null);
-tslib_es6.__decorate([
-    windowResize_decorator.ListenToWindowResize(),
-    tslib_es6.__metadata("design:type", Function),
-    tslib_es6.__metadata("design:paramtypes", []),
-    tslib_es6.__metadata("design:returntype", void 0)
-], Segment.prototype, "windowResizeListener", null);
-Segment.style = BalSegmentStyle0;
-
-exports.bal_segment = Segment;

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

@@ -1,180 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-b6003bc7.js';
-import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { B as BEM } from './bem-8c7d2eb0.js';
-import { p as preventDefault } from './utils-9fbab1d3.js';
-import { B as BalScrollHandler } from './scroll-f4b20848.js';
-import { b as balBreakpoints } from './breakpoints.subject-3605e395.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-f2ac9963.js';
-import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
-import './index-82aff103.js';
-import './browser-a8073d92.js';
-import './helpers-c201154e.js';
-import './icons.constant-a7885631.js';
-import './config.utils-6ac6c9bd.js';
-import './device-8c6d2881.js';
-import './listener-04842ae9.js';
-import './tokens.esm-337782ae.js';
-
-const balHintCss = ":root{--bal-hint-content-background:var(--bal-color-grey-2)}.bal-hint{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block}.bal-hint__icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}@media (hover: hover)and (pointer: fine){.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle,.bal-hint__icon:focus svg,.bal-hint__icon:focus g,.bal-hint__icon:focus path,.bal-hint__icon:focus circle{fill:var(--bal-color-light-blue-5)}}.bal-hint__content{background:var(--bal-hint-content-background);display:-ms-flexbox;display:flex;gap:1.5rem;-ms-flex-direction:column;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{-ms-flex:1;flex:1}}.bal-hint__content__title{display:block;margin-bottom:1rem}.bal-hint__content__title__heading{font-family:var(--bal-title-font-family);font-weight:var(--bal-title-font-weight);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-tablet);line-height:var(--bal-line-height-tablet-x-large)}}@media screen and (min-width: 1024px){.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}@media screen and (min-width: 769px),print{.bal-hint__content__buttons--is-hidden-desktop{display:none !important}}.bal-hint__overlay__content{position:fixed;display:none;overflow:auto;top:0;left:0;right:0;bottom:0;z-index:var(--bal-z-index-popup)}.bal-hint__overlay__content--active{display:block}";
-const BalHintStyle0 = balHintCss;
-
-const Hint = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.bodyScrollHandler = new BalScrollHandler();
-        this.onPopoverChange = (ev) => {
-            this.isActive = ev.detail;
-            preventDefault(ev);
-        };
-        this.isActive = false;
-        this.innerCloseLabel = 'Close';
-        this.isMobile = balBreakpoints.isMobile;
-        this.closeLabel = undefined;
-        this.small = false;
-    }
-    connectedCallback() {
-        this.bodyScrollHandler.connect();
-    }
-    componentDidRender() {
-        this.updateContent();
-    }
-    disconnectedCallback() {
-        this.bodyScrollHandler.disconnect();
-    }
-    breakpointListener(breakpoints) {
-        const isCurrentMobile = breakpoints.mobile;
-        if (isCurrentMobile !== this.isMobile) {
-            this.isActive = false;
-        }
-        this.isMobile = isCurrentMobile;
-    }
-    /**
-     * @internal define config for the component
-     */
-    async configChanged(state) {
-        if (!this.closeLabel) {
-            switch (state.language) {
-                case 'de':
-                    this.innerCloseLabel = 'Schliessen';
-                    break;
-                case 'fr':
-                    this.innerCloseLabel = 'Fermer';
-                    break;
-                case 'it':
-                    this.innerCloseLabel = 'Chiudere';
-                    break;
-                case 'nl':
-                    this.innerCloseLabel = 'Sluiten';
-                    break;
-                default:
-                    this.innerCloseLabel = 'Close';
-                    break;
-            }
-        }
-    }
-    /**
-     * Toggles the hint box.
-     */
-    async toggle() {
-        if (this.isActive) {
-            this.dismiss();
-        }
-        else {
-            this.present();
-        }
-    }
-    /**
-     * Opens the hint box.
-     */
-    async present() {
-        if (this.popoverElement) {
-            this.popoverElement.present();
-        }
-        if (this.isMobile) {
-            this.bodyScrollHandler.disable();
-        }
-        this.isActive = true;
-    }
-    /**
-     * Closes the hint box.
-     */
-    async dismiss() {
-        if (this.popoverElement) {
-            this.popoverElement.dismiss();
-        }
-        if (this.isMobile) {
-            this.bodyScrollHandler.enable();
-        }
-        this.isActive = false;
-    }
-    updateContent() {
-        if (this.hintContentEl && this.slotWrapperEl) {
-            this.hintContentEl.innerHTML = this.slotWrapperEl.innerHTML;
-        }
-    }
-    render() {
-        const block = BEM.block('hint');
-        const elIcon = block.element('icon');
-        const elContent = block.element('content');
-        const elButtons = elContent.element('buttons');
-        const padding = this.isMobile ? 0 : 8;
-        const offsetY = this.isMobile ? 0 : 16;
-        const TriggerIcon = () => {
-            return (h("bal-icon", { class: Object.assign({}, elIcon.class()), "data-testid": "bal-hint-trigger", "bal-popover-trigger": true, "aria-haspopup": "true", role: "button", name: "info-circle", onClick: () => this.toggle() }));
-        };
-        const HintContent = () => {
-            return (h("div", { class: Object.assign({}, elContent.class()), "data-testid": "bal-hint-content" }, h("div", { ref: el => (this.hintContentEl = el) }), h("bal-button-group", { class: Object.assign(Object.assign({}, elButtons.class()), elButtons.modifier('is-hidden-desktop').class(this.small)) }, h("bal-button", { "data-testid": "bal-hint-close", color: "info", onClick: () => this.dismiss() }, this.closeLabel ? this.closeLabel : this.innerCloseLabel))));
-        };
-        const MobileOverlay = () => {
-            const elOverlay = block.element('overlay');
-            return (h("div", { class: Object.assign({}, elOverlay.class()) }, h(TriggerIcon, null), h("div", { class: Object.assign(Object.assign({}, elOverlay.element('content').class()), elOverlay.element('content').modifier('active').class(this.isActive)) }, h(HintContent, null))));
-        };
-        const Popover = () => {
-            return (h("div", { class: Object.assign({}, block.element('popover').class()) }, h("bal-popover", { hint: true, position: "right", offsetX: 0, offsetY: offsetY, padding: padding, ref: el => (this.popoverElement = el), onBalChange: this.onPopoverChange }, h(TriggerIcon, null), h("bal-popover-content", { color: "grey" }, h(HintContent, null)))));
-        };
-        const HintElement = this.isMobile ? MobileOverlay : Popover;
-        return (h(Host, { class: Object.assign({}, block.class()) }, h(HintElement, null), h("div", { ref: el => (this.slotWrapperEl = el), style: { display: 'none' } }, h("slot", null))));
-    }
-    get element() { return getElement(this); }
-};
-__decorate([
-    ListenToBreakpoints(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], Hint.prototype, "breakpointListener", null);
-__decorate([
-    ListenToConfig(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", Promise)
-], Hint.prototype, "configChanged", null);
-Hint.style = BalHintStyle0;
-
-const HintText = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        const block = BEM.block('hint');
-        const elContent = block.element('content');
-        const elText = elContent.element('text');
-        const elTextField = elText.element('field');
-        return (h(Host, { class: Object.assign({}, elText.class()) }, h("p", { class: Object.assign({}, elTextField.class()) }, h("slot", null))));
-    }
-};
-
-const HintTitle = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        const block = BEM.block('hint');
-        const elContent = block.element('content');
-        const elTitle = elContent.element('title');
-        const elHeading = elTitle.element('heading');
-        return (h(Host, { class: Object.assign({}, elTitle.class()) }, h("h3", { class: Object.assign({}, elHeading.class()) }, h("span", null, h("slot", null)))));
-    }
-};
-
-export { Hint as bal_hint, HintText as bal_hint_text, HintTitle as bal_hint_title };

package/dist/esm/bal-segment-item.entry.js

@@ -1,152 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
-import { B as BEM } from './bem-8c7d2eb0.js';
-import { i as inheritAttributes } from './attributes-4fa7040f.js';
-import { j as addEventListener, r as removeEventListener, l as raf } from './helpers-c201154e.js';
-import './browser-a8073d92.js';
-import './icons.constant-a7885631.js';
-import './config.utils-6ac6c9bd.js';
-
-const balSegmentItemCss = ":root{--bal-segment-background:var(--bal-color-grey-2);--bal-segment-background-invalid:var(--bal-color-danger-1);--bal-segment-item-focus-border:var(--bal-color-border-primary);--bal-segment-item-text-color:var(--bal-color-text-primary);--bal-segment-item-text-color-checked:var(--bal-color-text-primary);--bal-segment-item-text-color-checked-hovered:var(--bal-color-text-primary-hovered);--bal-segment-item-text-color-checked-pressed:var(--bal-color-text-primary-pressed);--bal-segment-item-text-color-invalid:var(--bal-color-text-danger);--bal-segment-item-text-color-invalid-hovered:var(--bal-color-text-danger-hovered);--bal-segment-item-text-color-invalid-pressed:var(--bal-color-text-danger-pressed);--bal-segment-item-text-color-disabled:var(--bal-color-text-grey);--bal-segment-item-text-color-disabled-checked:var(--bal-color-text-grey-dark);--bal-segment-item-divider-background:var(--bal-color-grey);--bal-segment-item-divider-background-invalid:var(--bal-color-danger-2);--bal-segment-item-indicator-background:var(--bal-color-purple-2);--bal-segment-item-indicator-background-invalid:var(--bal-color-danger-4);--bal-segment-item-indicator-background-disabled:var(--bal-color-grey-3)}.bal-segment-item{display:block;position:relative;height:auto;text-decoration:none;text-overflow:ellipsis;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;grid-row:1;-webkit-font-kerning:none;font-kerning:none}.bal-segment-item--disabled{cursor:default !important;pointer-events:none !important}.bal-segment-item__button{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-height:2.5rem;min-width:3rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1;padding-top:.375rem;padding-bottom:.375rem;padding-left:20px;padding-right:20px;outline:none;border-color:rgba(0,0,0,0);border-width:var(--bal-border-width-normal);border-style:solid;border-radius:var(--bal-radius-normal);background:rgba(0,0,0,0);font-size:var(--bal-text-size-normal);font-weight:var(--bal-font-weight-bold);color:var(--bal-segment-item-text-color);overflow:hidden;position:relative;contain:content;pointer-events:none;cursor:pointer;z-index:2}.bal-segment-item__button--vertical{padding-left:.75rem;padding-right:.75rem}.bal-segment-item__button span{font-size:var(--bal-text-size-small);font-weight:var(--bal-font-weight-regular)}.bal-segment-item__button{will-change:color,padding;-webkit-transition:color 160ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 160ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:padding 160ms cubic-bezier(0.4, 0, 0.2, 1);transition:padding 160ms cubic-bezier(0.4, 0, 0.2, 1)}.bal-segment-item:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{content:\"\";position:absolute;background:var(--bal-segment-item-divider-background);border-radius:var(--bal-radius-normal)}.bal-segment-item:not(.bal-segment-item--vertical):not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{top:2px;bottom:2px;right:-1px;width:2px}.bal-segment-item.bal-segment-item--vertical:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{left:2px;right:2px;bottom:-1px;height:2px}.bal-segment-item--invalid:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{background:var(--bal-segment-item-divider-background-invalid)}.bal-segment-item__indicator{-webkit-transform-origin:left;transform-origin:left;position:absolute;opacity:0;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none;border-radius:var(--bal-radius-normal);background:var(--bal-segment-item-indicator-background);top:0;left:0}.bal-segment-item__indicator--vertical{-webkit-transform-origin:top;transform-origin:top}.bal-segment-item__indicator--invalid{background:var(--bal-segment-item-indicator-background-invalid)}.bal-segment-item__indicator--background{min-width:100%;min-height:100%;-webkit-transform:none;transform:none;pointer-events:none}.bal-segment-item__indicator--animated{will-change:transform,opacity,top,bottom,left,right,min-width,min-heigth;-webkit-transition:min-width 100ms ease,min-height 100ms ease,top 100ms ease,left 100ms ease,bottom 100ms ease,right 100ms ease,-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:min-width 100ms ease,min-height 100ms ease,top 100ms ease,left 100ms ease,bottom 100ms ease,right 100ms ease,-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1),min-width 100ms ease,min-height 100ms ease,top 100ms ease,left 100ms ease,bottom 100ms ease,right 100ms ease;transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1),min-width 100ms ease,min-height 100ms ease,top 100ms ease,left 100ms ease,bottom 100ms ease,right 100ms ease,-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1)}.bal-segment-item__indicator--checked{opacity:1}.bal-segment-item:active .bal-segment-item__indicator{min-width:calc(100% - 4px);min-height:calc(100% - 4px);top:2px !important;bottom:2px !important;left:2px !important;right:2px !important}.bal-segment-item__button__icon{position:absolute !important;opacity:0;width:0 !important;-webkit-transform:translateX(0.1rem);transform:translateX(0.1rem);pointer-events:none !important;cursor:inherit;will-change:transform,opacity}.bal-segment-item__button__icon:not(.bal-segment-item__button__icon--vertical){left:10px}.bal-segment-item__button__icon--vertical{right:10px}.bal-segment-item__button__icon--animated{opacity:1;width:.875rem !important;-webkit-transform:translateX(-4px);transform:translateX(-4px);-webkit-transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),transform 260ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1)}.bal-segment-item__button--checked{color:var(--bal-segment-item-text-color-checked);padding-right:40px}.bal-segment-item__button--checked:not(.bal-segment-item__button--vertical){padding-left:26px;padding-right:12px}@media (hover: hover)and (pointer: fine){.bal-segment-item:not(.bal-segment-item--disabled):hover .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-checked-hovered)}}.bal-segment-item:not(.bal-segment-item--disabled):active .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-checked-pressed)}.bal-segment--keyboard .bal-segment-item__button:not(.bal-segment-item__button--disabled):focus-visible,.bal-segment--keyboard .bal-segment-item__button--focused:not(.bal-segment-item__button--disabled){border-color:var(--bal-segment-item-focus-border);border-width:var(--bal-border-width-normal);border-style:solid;-webkit-transition:border 300ms ease-in-out;transition:border 300ms ease-in-out}.bal-segment-item.bal-segment-item--invalid:not(.bal-segment-item--disabled) .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-invalid)}@media (hover: hover)and (pointer: fine){.bal-segment-item.bal-segment-item--invalid:not(.bal-segment-item--disabled):hover .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-invalid-hovered)}}.bal-segment-item.bal-segment-item--invalid:not(.bal-segment-item--disabled):active .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-invalid-pressed)}.bal-segment-item__button--invalid.bal-segment-item__button--checked{color:var(--bal-color-text-white)}.bal-segment-item__button--disabled{background:rgba(0,0,0,0);color:var(--bal-segment-item-text-color-disabled)}.bal-segment-item__button--disabled.bal-segment-item__button--checked{background:var(--bal-segment-item-indicator-background-disabled);color:var(--bal-segment-item-text-color-disabled-checked)}.bal-segment-item__button__slot--hidden{display:none !important}";
-const BalSegmentItemStyle0 = balSegmentItemCss;
-
-let ids = 0;
-const SegmentItem = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.balBlur = createEvent(this, "balBlur", 7);
-        this.segmentEl = null;
-        this.inheritedAttributes = {};
-        this.id = ids++;
-        this.updateVertical = (ev) => {
-            this.isVertical = ev.detail;
-        };
-        this.updateState = () => {
-            const { segmentEl } = this;
-            if (segmentEl) {
-                if (segmentEl.value === '' || segmentEl.value === undefined || segmentEl.value === null) {
-                    const items = this.items;
-                    if (items.length > 0) {
-                        const first = items[0];
-                        this.isFocusable = first === this.el;
-                    }
-                }
-                else {
-                    this.checked = segmentEl.value === this.value;
-                    this.isFocusable = segmentEl.value === this.value;
-                }
-                if (segmentEl.disabled) {
-                    this.disabled = true;
-                }
-            }
-        };
-        this.onSlottedItemsChange = () => {
-            /**
-             * When the slotted segment buttons change we need to
-             * ensure that the new segment buttons are checked if
-             * the value matches the segment button value.
-             */
-            this.checkSlotContent();
-        };
-        this.hasSlotContent = false;
-        this.isFocusable = false;
-        this.isVertical = false;
-        this.disabled = false;
-        this.invalid = false;
-        this.focused = false;
-        this.checked = false;
-        this.label = '';
-        this.value = 'bal-si-' + this.id;
-    }
-    valueChanged() {
-        this.updateState();
-    }
-    connectedCallback() {
-        const segmentEl = (this.segmentEl = this.el.closest('bal-segment'));
-        if (segmentEl) {
-            this.updateState();
-            addEventListener(segmentEl, 'balSelect', this.updateState);
-            addEventListener(segmentEl, 'balVertical', this.updateVertical);
-        }
-    }
-    disconnectedCallback() {
-        const segmentEl = this.segmentEl;
-        if (segmentEl) {
-            removeEventListener(segmentEl, 'balSelect', this.updateState);
-            removeEventListener(segmentEl, 'balVertical', this.updateVertical);
-            this.segmentEl = null;
-        }
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = Object.assign({}, inheritAttributes(this.el, ['aria-label']));
-    }
-    componentDidLoad() {
-        raf(() => this.checkSlotContent());
-    }
-    /**
-     * @internal
-     * Focuses the native <button> element
-     * inside of ion-segment-button.
-     */
-    async setFocus() {
-        const { nativeEl } = this;
-        if (nativeEl !== undefined) {
-            nativeEl.focus();
-        }
-    }
-    get items() {
-        return this.allItems.filter(item => !item.disabled);
-    }
-    get allItems() {
-        const { segmentEl } = this;
-        if (segmentEl) {
-            return Array.from(segmentEl.querySelectorAll('bal-segment-item'));
-        }
-        return [];
-    }
-    isFirst() {
-        const { segmentEl } = this;
-        let items = this.items;
-        if (segmentEl && segmentEl.disabled) {
-            items = this.allItems;
-        }
-        if (items.length > 0) {
-            const first = items[0];
-            return first === this.el;
-        }
-        return false;
-    }
-    isLast() {
-        const { segmentEl } = this;
-        let items = this.items;
-        if (segmentEl && segmentEl.disabled) {
-            items = this.allItems;
-        }
-        if (items.length > 0) {
-            const last = items[items.length - 1];
-            return last === this.el;
-        }
-        return false;
-    }
-    checkSlotContent() {
-        const slot = this.el.querySelector('[part="slot"]');
-        const children = slot ? slot.innerHTML.trim() : '';
-        this.hasSlotContent = children.length > 0;
-    }
-    render() {
-        const { checked, focused, segmentEl, label, isFocusable } = this;
-        const block = BEM.block('segment-item');
-        const buttonBem = block.element('button');
-        const indicatorBem = block.element('indicator');
-        const invalid = this.invalid || (segmentEl && segmentEl.invalid);
-        const disabled = this.disabled || (segmentEl && segmentEl.disabled);
-        const vertical = this.isVertical;
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('vertical').class(vertical)), block.modifier('disabled').class(disabled)), block.modifier('checked').class(checked)), block.modifier('invalid').class(invalid)), block.modifier('line').class(!this.isFirst() && !checked)), block.modifier('last').class(this.isLast() && !checked)) }, h("button", Object.assign({ role: "radio", "aria-checked": checked ? 'true' : 'false', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, buttonBem.class()), buttonBem.modifier('checked').class(checked)), buttonBem.modifier('invalid').class(invalid)), buttonBem.modifier('disabled').class(disabled)), buttonBem.modifier('focused').class(focused)), buttonBem.modifier('vertical').class(vertical)), "aria-labelledby": `bal-si-${this.id}-label`, type: 'button', tabIndex: isFocusable ? 0 : -1, part: "native", onBlur: ev => this.balBlur.emit(ev), disabled: disabled, ref: el => (this.nativeEl = el) }, this.inheritedAttributes), h("bal-icon", { name: "check", size: "small", class: Object.assign(Object.assign(Object.assign({}, buttonBem.element('icon').class()), buttonBem.element('icon').modifier('animated').class(checked)), buttonBem.element('icon').modifier('vertical').class(vertical)), color: disabled ? 'grey-dark' : invalid ? 'white' : 'primary' }), h("bal-stack", { space: "x-small", layout: 'horizontal' }, h("bal-content", { space: "none" }, h("bal-label", { htmlId: `bal-si-${this.id}-label` }, label), h("span", { part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', h("slot", { onSlotchange: this.onSlottedItemsChange }))))), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, indicatorBem.class()), indicatorBem.modifier('animated').class()), indicatorBem.modifier('background').class()), indicatorBem.modifier('disabled').class(disabled)), indicatorBem.modifier('invalid').class(invalid)), indicatorBem.modifier('checked').class(checked)), indicatorBem.modifier('vertical').class(vertical)) })));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "value": ["valueChanged"]
-    }; }
-};
-SegmentItem.style = BalSegmentItemStyle0;
-
-export { SegmentItem as bal_segment_item };