@baloise/ds-core 18.3.0 → 19.0.0-nightly.20250512

package/dist/esm/bal-checkbox-button.entry.js

@@ -1,206 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
-import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { B as BEM } from './bem-8c7d2eb0.js';
-import { s as stopEventBubbling } from './form-input-263e6f5b.js';
-import { L as Logger } from './log-dfd1c19f.js';
-import { F as FOCUS_KEYS } from './focus-visible-f0cdd043.js';
-import { j as isDescendant } from './helpers-94c3fbac.js';
-import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator-0688a178.js';
-import './browser-a8073d92.js';
-import './config.utils-cd529084.js';
-import './listener-04842ae9.js';
-
-const balCheckboxButtonCss = "@media (hover: hover)and (pointer: fine){.bal-checkbox-button__native.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-radio-checkbox-symbol-size:1.5rem;--bal-radio-checkbox-symbol-width:calc(0.5rem - 1px);--bal-radio-checkbox-symbol-height:calc(0.875rem - 1px);--bal-radio-checkbox-symbol-left:calc(0.5rem + 1px);--bal-radio-checkbox-symbol-margin-top:0.25rem;--bal-radio-checkbox-label-min-height:1.5rem;--bal-radio-checkbox-select-button-background-hover:var(--bal-color-grey-2);--bal-radio-checkbox-select-button-background-active:var(--bal-color-grey-2);--bal-radio-checkbox-select-button-background-checked:var(--bal-color-primary);--bal-radio-checkbox-select-button-background-checked-hover:var(--bal-color-light-blue-5);--bal-radio-checkbox-select-button-background-checked-active:var(--bal-color-primary-6);--bal-radio-checkbox-select-button-background-invalid:var(--bal-color-danger-1);--bal-radio-checkbox-select-button-background-invalid-hover:var(--bal-color-danger-1);--bal-radio-checkbox-select-button-background-invalid-active:var(--bal-color-danger-1);--bal-radio-checkbox-select-button-background-invalid-checked:var(--bal-color-border-danger);--bal-radio-checkbox-select-button-background-invalid-checked-hover:var(--bal-color-danger-5);--bal-radio-checkbox-select-button-background-invalid-checked-active:var(--bal-color-danger-6);--bal-radio-checkbox-select-button-background-disabled-hover-active:var(--bal-color-grey-2);--bal-radio-checkbox-select-button-background-disabled-checked-hover-active:var(--bal-color-border-grey-dark);--bal-radio-checkbox-switch-label-background-before:var(--bal-color-primary-1);--bal-radio-checkbox-switch-label-background-after:var(--bal-color-primary);--bal-radio-checkbox-switch-label-background-hover-after:var(--bal-color-light-blue-5);--bal-radio-checkbox-switch-label-background-active-after:var(--bal-color-primary-6);--bal-radio-checkbox-switch-label-background-checked-before:var(--bal-color-success-4);--bal-radio-checkbox-switch-label-background-checked-after:var(--bal-color-white);--bal-radio-checkbox-switch-label-background-checked-hover-before:var(--bal-color-success-5);--bal-radio-checkbox-switch-label-background-checked-active-before:var(--bal-color-success-6);--bal-radio-checkbox-switch-label-background-invalid-before:var(--bal-color-danger-1);--bal-radio-checkbox-switch-label-background-invalid-after:var(--bal-color-border-danger);--bal-radio-checkbox-switch-label-background-invalid-hover-after:var(--bal-color-danger-6);--bal-radio-checkbox-switch-label-background-invalid-active-after:var(--bal-color-border-danger);--bal-radio-checkbox-switch-label-background-invalid-checked-before:var(--bal-color-danger-4);--bal-radio-checkbox-switch-label-background-invalid-checked-after:var(--bal-color-white);--bal-radio-checkbox-switch-label-background-invalid-checked-hover-before:var(--bal-color-danger-5);--bal-radio-checkbox-switch-label-background-invalid-checked-active-before:var(--bal-color-danger-6);--bal-radio-checkbox-switch-label-background-disabled-hover-active-before:var(--bal-color-grey-3);--bal-radio-checkbox-switch-label-background-disabled-hover-active-after:var(--bal-color-border-grey-dark);--bal-radio-checkbox-switch-label-background-disabled-checked-hover-active-before:var(--bal-color-border-grey-dark);--bal-radio-checkbox-switch-label-background-disabled-checked-hover-active-after:var(--bal-color-white);--bal-radio-checkbox-button-background:transparent;--bal-radio-checkbox-button-background-checked-green:var(--bal-color-green-1);--bal-radio-checkbox-button-background-checked-purple:var(--bal-color-purple-1);--bal-radio-checkbox-button-background-checked-red:var(--bal-color-red-1);--bal-radio-checkbox-button-background-checked-yellow:var(--bal-color-yellow-1);--bal-radio-checkbox-button-background-disabled:var(--bal-color-grey-1);--bal-radio-checkbox-button-background-hover:var(--bal-color-grey-1);--bal-radio-checkbox-select-button-border-color:var(--bal-color-primary);--bal-radio-checkbox-select-button-border-color-hover:var(--bal-color-light-blue-5);--bal-radio-checkbox-select-button-border-color-active:var(--bal-color-primary-6);--bal-radio-checkbox-select-button-border-color-invalid:var(--bal-color-border-danger);--bal-radio-checkbox-select-button-border-color-invalid-hover:var(--bal-color-danger-5);--bal-radio-checkbox-select-button-border-color-invalid-active:var(--bal-color-danger-6);--bal-radio-checkbox-select-button-border-color-invalid-checked:var(--bal-color-border-danger);--bal-radio-checkbox-select-button-border-color-invalid-checked-hover:var(--bal-color-danger-5);--bal-radio-checkbox-select-button-border-color-invalid-checked-active:var(--bal-color-danger-6);--bal-radio-checkbox-select-button-border-color-disabled-hover-active:var(--bal-color-border-grey-dark);--bal-radio-checkbox-select-button-border-color-disabled-checked-hover-active:var(--bal-color-border-grey-dark);--bal-radio-checkbox-button-border-color-hover:var(--bal-color-border-primary-hovered);--bal-radio-checkbox-button-border-color-active:var(--bal-color-border-primary-pressed);--bal-radio-checkbox-button-border-color-invalid-hover:var(--bal-color-border-danger-hovered);--bal-radio-checkbox-button-border-color-invalid-active:var(--bal-color-border-danger-pressed);--bal-radio-checkbox-button-border-color:var(--bal-color-border);--bal-radio-checkbox-button-border-color-checked:var(--bal-color-border-primary);--bal-radio-checkbox-button-border-color-disabled:var(--bal-color-border-grey-dark);--bal-radio-checkbox-button-border-color-invalid:var(--bal-color-border-danger)}.bal-checkbox-button{display:block;position:relative;-ms-flex:0 0 100%;flex:0 0 100%}@media screen and (min-width: 769px),print{.bal-checkbox-button--column-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox-button--column-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox-button--column-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (max-width: 768px){.bal-checkbox-button--column-mobile-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox-button--column-mobile-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox-button--column-mobile-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (min-width: 769px),print{.bal-checkbox-button--column-tablet-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox-button--column-tablet-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox-button--column-tablet-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (min-width: 1024px){.bal-checkbox-button--column-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox-button--column-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox-button--column-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}.bal-checkbox-button__native{display:block;width:100%;height:100%;background:var(--bal-radio-checkbox-button-background);border-style:var(--bal-form-field-control-border-style);border-radius:var(--bal-form-field-control-radius);border-width:var(--bal-form-field-control-border-width);border-color:var(--bal-radio-checkbox-button-border-color);padding:var(--bal-text-size-medium);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bal-checkbox-button__native--checked{border-color:var(--bal-radio-checkbox-button-border-color-checked)}.bal-checkbox-button__native--checked.bal-checkbox-button__native--color-green{background:var(--bal-radio-checkbox-button-background-checked-green)}.bal-checkbox-button__native--checked.bal-checkbox-button__native--color-purple{background:var(--bal-radio-checkbox-button-background-checked-purple)}.bal-checkbox-button__native--checked.bal-checkbox-button__native--color-red{background:var(--bal-radio-checkbox-button-background-checked-red)}.bal-checkbox-button__native--checked.bal-checkbox-button__native--color-yellow{background:var(--bal-radio-checkbox-button-background-checked-yellow)}.bal-checkbox-button__native:disabled,.bal-checkbox-button__native--disabled{background:var(--bal-radio-checkbox-button-background-disabled);border-color:var(--bal-radio-checkbox-button-border-color-disabled);cursor:default}.bal-checkbox-button__native--invalid{border-color:var(--bal-radio-checkbox-button-border-color-invalid)}@media (hover: hover)and (pointer: fine){.bal-checkbox-button__native:hover:not(:disabled):not(.bal-checkbox-button__native--colored){background:var(--bal-radio-checkbox-button-background-hover);border-color:var(--bal-radio-checkbox-button-border-color-hover)}}.bal-checkbox-button__native:active:not(:disabled){border-color:var(--bal-radio-checkbox-button-border-color-active)}@media (hover: hover)and (pointer: fine){.bal-checkbox-button__native--invalid:hover:not(:disabled){border-color:var(--bal-radio-checkbox-button-border-color-invalid-hover)}.bal-checkbox-button__native--invalid:active:not(:disabled){border-color:var(--bal-radio-checkbox-button-border-color-invalid-active)}}";
-const BalCheckboxButtonStyle0 = balCheckboxButtonCss;
-
-const CheckboxButton = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.balFocus = createEvent(this, "balFocus", 7);
-        this.balBlur = createEvent(this, "balBlur", 7);
-        this.balFormControlDidLoad = createEvent(this, "balFormControlDidLoad", 7);
-        this.keyboardMode = true;
-        /**
-         * EVENT BINDING
-         * ------------------------------------------------------
-         */
-        this.onClick = (ev) => {
-            if (this.disabled || this.readonly) {
-                return stopEventBubbling(ev);
-            }
-            const element = ev.target;
-            if (element && element.href) {
-                return;
-            }
-            const checkboxEl = this.el.querySelector('bal-checkbox');
-            const targetEl = ev.target;
-            if (checkboxEl && targetEl) {
-                const isCheckbox = targetEl === checkboxEl || isDescendant(checkboxEl, targetEl);
-                if (!isCheckbox) {
-                    stopEventBubbling(ev);
-                    checkboxEl.click();
-                }
-            }
-        };
-        this.onFocus = (ev) => {
-            var _a;
-            if (this.disabled || this.readonly) {
-                return stopEventBubbling(ev);
-            }
-            const checkboxEl = this.el.querySelector('bal-checkbox');
-            const targetEl = ev.target;
-            if (this.keyboardMode) {
-                this.focused = true;
-            }
-            if (checkboxEl && targetEl) {
-                const isCheckbox = targetEl === checkboxEl || isDescendant(checkboxEl, targetEl);
-                if (isCheckbox) {
-                    stopEventBubbling(ev);
-                    (_a = checkboxEl.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();
-                }
-            }
-            else {
-                this.balFocus.emit();
-            }
-        };
-        this.onBlur = (ev) => {
-            var _a;
-            if (this.disabled || this.readonly) {
-                return stopEventBubbling(ev);
-            }
-            const checkboxEl = this.el.querySelector('bal-checkbox');
-            const targetEl = ev.target;
-            this.focused = false;
-            if (checkboxEl && targetEl) {
-                const isCheckbox = targetEl === checkboxEl || isDescendant(checkboxEl, targetEl);
-                if (isCheckbox) {
-                    stopEventBubbling(ev);
-                    (_a = checkboxEl.querySelector('input')) === null || _a === void 0 ? void 0 : _a.blur();
-                }
-            }
-            else {
-                this.balBlur.emit();
-            }
-        };
-        this.onPointerDown = () => (this.keyboardMode = false);
-        this.onKeydown = (ev) => (this.keyboardMode = FOCUS_KEYS.includes(ev.key));
-        this.interactionState = BalElementStateListener.DefaultState;
-        this.checked = false;
-        this.focused = false;
-        this.invalid = undefined;
-        this.disabled = undefined;
-        this.readonly = undefined;
-        this.color = undefined;
-        this.colSize = 1;
-        this.colSizeTablet = 1;
-        this.colSizeMobile = 1;
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    invalidHandler() {
-        this.updateProps('invalid', ['bal-checkbox', 'bal-icon', 'bal-label', 'bal-text']);
-    }
-    disabledHandler() {
-        this.updateProps('disabled', ['bal-checkbox', 'bal-icon', 'bal-label', 'bal-text']);
-    }
-    readonlyHandler() {
-        this.updateProps('readonly', ['bal-checkbox', 'bal-icon', 'bal-label', 'bal-text']);
-    }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        this.triggerAllHandlers();
-        this.el.addEventListener('keydown', this.onKeydown);
-        this.el.addEventListener('touchstart', this.onPointerDown);
-        this.el.addEventListener('mousedown', this.onPointerDown);
-    }
-    componentWillLoad() {
-        this.triggerAllHandlers();
-    }
-    componentDidLoad() {
-        this.balFormControlDidLoad.emit(this.el);
-    }
-    disconnectedCallback() {
-        this.el.removeEventListener('keydown', this.onKeydown);
-        this.el.removeEventListener('touchstart', this.onPointerDown);
-        this.el.removeEventListener('mousedown', this.onPointerDown);
-    }
-    /**
-     * LISTENERS
-     * ------------------------------------------------------
-     */
-    elementStateListener(info) {
-        this.interactionChildElements.forEach(element => {
-            element.hovered = info.hovered;
-            element.pressed = info.pressed;
-        });
-    }
-    /**
-     * PUBLIC METHODS
-     * ------------------------------------------------------
-     */
-    /**
-     * @internal
-     */
-    async setChecked(checked = true) {
-        this.checked = checked;
-    }
-    /**
-     * PRIVATE METHODS
-     * ------------------------------------------------------
-     */
-    get interactionChildElements() {
-        return Array.from(this.el.querySelectorAll('bal-label, bal-text, bal-icon, bal-checkbox'));
-    }
-    triggerAllHandlers() {
-        this.disabledHandler();
-        this.readonlyHandler();
-        this.invalidHandler();
-    }
-    updateProps(key, selectors) {
-        const value = this[key];
-        if (value !== undefined) {
-            this.notifyComponents(selectors, input => (input[key] = value));
-        }
-    }
-    notifyComponents(selectors, callback) {
-        const components = this.el.querySelectorAll(selectors.join(', '));
-        components.forEach(c => callback(c));
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = BEM.block('checkbox-button');
-        const disabled = !!this.disabled || !!this.readonly;
-        const invalid = !!this.invalid;
-        const color = !!this.color;
-        const colored = this.checked && color;
-        return (h(Host, { key: 'f8a1bb7fe4001ebf045aef1ccb3e618448a4d216', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`column-${this.colSize}`).class(this.colSize > 1)), block.modifier(`column-tablet-${this.colSizeTablet}`).class(this.colSizeTablet > 1)), block.modifier(`column-mobile-${this.colSizeMobile}`).class(this.colSizeMobile > 1)), onClick: this.onClick }, h("button", { key: '4a2f2be8dac7e4a2f344ee8d9dedb494a8666b3c', role: "checkbox", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('invalid').class(invalid)), block.element('native').modifier('checked').class(this.checked)), block.element('native').modifier(`colored`).class(colored)), block.element('native').modifier(`color-${this.color}`).class(color)), { 'bal-focusable': !this.disabled }), disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, h("slot", { key: '08c9131a641ab8198746ec93c02e4ad16e6b1adc' }))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "invalid": ["invalidHandler"],
-        "disabled": ["disabledHandler"],
-        "readonly": ["readonlyHandler"]
-    }; }
-};
-__decorate([
-    Logger('bal-checkbox-button'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], CheckboxButton.prototype, "createLogger", null);
-__decorate([
-    ListenToElementStates(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], CheckboxButton.prototype, "elementStateListener", null);
-CheckboxButton.style = BalCheckboxButtonStyle0;
-
-export { CheckboxButton as bal_checkbox_button };

package/dist/esm/bal-radio-button.entry.js

@@ -1,206 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
-import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { B as BEM } from './bem-8c7d2eb0.js';
-import { s as stopEventBubbling } from './form-input-263e6f5b.js';
-import { L as Logger } from './log-dfd1c19f.js';
-import { F as FOCUS_KEYS } from './focus-visible-f0cdd043.js';
-import { j as isDescendant } from './helpers-94c3fbac.js';
-import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator-0688a178.js';
-import './browser-a8073d92.js';
-import './config.utils-cd529084.js';
-import './listener-04842ae9.js';
-
-const balRadioButtonCss = "@media (hover: hover)and (pointer: fine){.bal-radio-button__native.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}.bal-radio-button{display:block;position:relative;-ms-flex:0 0 100%;flex:0 0 100%}@media screen and (min-width: 769px),print{.bal-radio-button--column-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-radio-button--column-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-radio-button--column-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (max-width: 768px){.bal-radio-button--column-mobile-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-radio-button--column-mobile-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-radio-button--column-mobile-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (min-width: 769px),print{.bal-radio-button--column-tablet-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-radio-button--column-tablet-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-radio-button--column-tablet-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (min-width: 1024px){.bal-radio-button--column-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-radio-button--column-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-radio-button--column-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}.bal-radio-button__native{display:block;width:100%;height:100%;background:rgba(0,0,0,0);border-style:solid;border-radius:var(--bal-radius-normal);border-width:var(--bal-border-width-normal);border-color:var(--bal-color-border);padding:var(--bal-text-size-medium);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bal-radio-button__native--checked{border-color:var(--bal-color-border-primary)}.bal-radio-button__native--checked.bal-radio-button__native--color-green{background:var(--bal-color-green-1)}.bal-radio-button__native--checked.bal-radio-button__native--color-purple{background:var(--bal-color-purple-1)}.bal-radio-button__native--checked.bal-radio-button__native--color-red{background:var(--bal-color-red-1)}.bal-radio-button__native--checked.bal-radio-button__native--color-yellow{background:var(--bal-color-yellow-1)}.bal-radio-button__native:disabled,.bal-radio-button__native--disabled{background:var(--bal-color-grey-1);border-color:var(--bal-color-border-grey-dark);cursor:default}.bal-radio-button__native--invalid{border-color:var(--bal-color-border-danger)}@media (hover: hover)and (pointer: fine){.bal-radio-button__native:hover:not(:disabled):not(.bal-radio-button__native--colored){background:var(--bal-color-grey-1);border-color:var(--bal-color-border-primary-hovered)}}.bal-radio-button__native:active:not(:disabled){border-color:var(--bal-color-border-primary-pressed)}@media (hover: hover)and (pointer: fine){.bal-radio-button__native--invalid:hover:not(:disabled){border-color:var(--bal-color-border-danger-hovered)}.bal-radio-button__native--invalid:active:not(:disabled){border-color:var(--bal-color-border-danger-pressed)}}";
-const BalRadioButtonStyle0 = balRadioButtonCss;
-
-const RadioButton = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.balFocus = createEvent(this, "balFocus", 7);
-        this.balBlur = createEvent(this, "balBlur", 7);
-        this.balFormControlDidLoad = createEvent(this, "balFormControlDidLoad", 7);
-        this.keyboardMode = true;
-        /**
-         * EVENT HANDLER
-         * ------------------------------------------------------
-         */
-        this.onClick = (ev) => {
-            if (this.disabled || this.readonly) {
-                return stopEventBubbling(ev);
-            }
-            const element = ev.target;
-            if (element && element.href) {
-                return;
-            }
-            const radioEl = this.el.querySelector('bal-radio');
-            const targetEl = ev.target;
-            if (radioEl && targetEl) {
-                const isCheckbox = targetEl === radioEl || isDescendant(radioEl, targetEl);
-                if (!isCheckbox) {
-                    stopEventBubbling(ev);
-                    radioEl.click();
-                }
-            }
-        };
-        this.onFocus = (ev) => {
-            var _a;
-            if (this.disabled || this.readonly) {
-                return stopEventBubbling(ev);
-            }
-            const radioEl = this.el.querySelector('bal-radio');
-            const targetEl = ev.target;
-            if (this.keyboardMode) {
-                this.focused = true;
-            }
-            if (radioEl && targetEl) {
-                const isCheckbox = targetEl === radioEl || isDescendant(radioEl, targetEl);
-                if (isCheckbox) {
-                    stopEventBubbling(ev);
-                    (_a = radioEl.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();
-                }
-            }
-            else {
-                this.balFocus.emit();
-            }
-        };
-        this.onBlur = (ev) => {
-            var _a;
-            if (this.disabled || this.readonly) {
-                return stopEventBubbling(ev);
-            }
-            const radioEl = this.el.querySelector('bal-radio');
-            const targetEl = ev.target;
-            this.focused = false;
-            if (radioEl && targetEl) {
-                const isRadio = targetEl === radioEl || isDescendant(radioEl, targetEl);
-                if (isRadio) {
-                    stopEventBubbling(ev);
-                    (_a = radioEl.querySelector('input')) === null || _a === void 0 ? void 0 : _a.blur();
-                }
-            }
-            else {
-                this.balBlur.emit();
-            }
-        };
-        this.onPointerDown = () => (this.keyboardMode = false);
-        this.onKeydown = (ev) => (this.keyboardMode = FOCUS_KEYS.includes(ev.key));
-        this.interactionState = BalElementStateListener.DefaultState;
-        this.checked = false;
-        this.focused = false;
-        this.invalid = undefined;
-        this.disabled = undefined;
-        this.readonly = undefined;
-        this.color = undefined;
-        this.colSize = 1;
-        this.colSizeTablet = 1;
-        this.colSizeMobile = 1;
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    invalidHandler() {
-        this.updateProps('invalid', ['bal-radio', 'bal-icon', 'bal-label', 'bal-text']);
-    }
-    disabledHandler() {
-        this.updateProps('disabled', ['bal-radio', 'bal-icon', 'bal-label', 'bal-text']);
-    }
-    readonlyHandler() {
-        this.updateProps('readonly', ['bal-radio', 'bal-icon', 'bal-label', 'bal-text']);
-    }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        this.triggerAllHandlers();
-        this.el.addEventListener('keydown', this.onKeydown);
-        this.el.addEventListener('touchstart', this.onPointerDown);
-        this.el.addEventListener('mousedown', this.onPointerDown);
-    }
-    componentWillLoad() {
-        this.triggerAllHandlers();
-    }
-    componentDidLoad() {
-        this.balFormControlDidLoad.emit(this.el);
-    }
-    disconnectedCallback() {
-        this.el.removeEventListener('keydown', this.onKeydown);
-        this.el.removeEventListener('touchstart', this.onPointerDown);
-        this.el.removeEventListener('mousedown', this.onPointerDown);
-    }
-    /**
-     * LISTENERS
-     * ------------------------------------------------------
-     */
-    elementStateListener(info) {
-        this.interactionChildElements.forEach(element => {
-            element.hovered = info.hovered;
-            element.pressed = info.pressed;
-        });
-    }
-    /**
-     * PUBLIC METHODS
-     * ------------------------------------------------------
-     */
-    /**
-     * @internal
-     */
-    async setChecked(checked = true) {
-        this.checked = checked;
-    }
-    /**
-     * PRIVATE METHODS
-     * ------------------------------------------------------
-     */
-    get interactionChildElements() {
-        return Array.from(this.el.querySelectorAll('bal-label, bal-text, bal-icon, bal-radio'));
-    }
-    triggerAllHandlers() {
-        this.disabledHandler();
-        this.readonlyHandler();
-        this.invalidHandler();
-    }
-    updateProps(key, selectors) {
-        const value = this[key];
-        if (value !== undefined) {
-            this.notifyComponents(selectors, input => (input[key] = value));
-        }
-    }
-    notifyComponents(selectors, callback) {
-        const components = this.el.querySelectorAll(selectors.join(', '));
-        components.forEach(c => callback(c));
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = BEM.block('radio-button');
-        const disabled = !!this.disabled || !!this.readonly;
-        const invalid = !!this.invalid;
-        const color = !!this.color;
-        const colored = this.checked && color;
-        return (h(Host, { key: '26ecfd7485967bc7d6073d74db6cad201293d0de', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`column-${this.colSize}`).class(this.colSize > 1)), block.modifier(`column-tablet-${this.colSizeTablet}`).class(this.colSizeTablet > 1)), block.modifier(`column-mobile-${this.colSizeMobile}`).class(this.colSizeMobile > 1)), onClick: this.onClick }, h("button", { key: '13aaaf7966649025ba3c59ba04662a1853318c46', role: "radio", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('invalid').class(invalid)), block.element('native').modifier('checked').class(this.checked)), block.element('native').modifier(`colored`).class(colored)), block.element('native').modifier(`color-${this.color}`).class(color)), { 'bal-focusable': !this.disabled }), disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, h("slot", { key: '02a637665239cfd8ba3e4c3b02f36e05bc24f43f' }))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "invalid": ["invalidHandler"],
-        "disabled": ["disabledHandler"],
-        "readonly": ["readonlyHandler"]
-    }; }
-};
-__decorate([
-    Logger('bal-radio-button'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], RadioButton.prototype, "createLogger", null);
-__decorate([
-    ListenToElementStates(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], RadioButton.prototype, "elementStateListener", null);
-RadioButton.style = BalRadioButtonStyle0;
-
-export { RadioButton as bal_radio_button };

package/dist/esm-es5/app-globals-5dd5fe6b.js

@@ -1 +0,0 @@
-import{i as initializeBaloiseDesignSystem}from"./initialize-be160cc4.js";function appGlobalScript(){initializeBaloiseDesignSystem()}var globalScripts=appGlobalScript;export{globalScripts as g};

package/dist/esm-es5/bal-checkbox-button.entry.js

@@ -1 +0,0 @@
-import{__awaiter,__generator}from"tslib";import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-8d2a7ce7.js";import{_ as __decorate,a as __metadata}from"./tslib.es6-654e2c24.js";import{B as BEM}from"./bem-8c7d2eb0.js";import{s as stopEventBubbling}from"./form-input-263e6f5b.js";import{L as Logger}from"./log-dfd1c19f.js";import{F as FOCUS_KEYS}from"./focus-visible-f0cdd043.js";import{j as isDescendant}from"./helpers-94c3fbac.js";import{B as BalElementStateListener,L as ListenToElementStates}from"./element-states.decorator-0688a178.js";import"./browser-a8073d92.js";import"./config.utils-cd529084.js";import"./listener-04842ae9.js";var balCheckboxButtonCss="@media (hover: hover)and (pointer: fine){.bal-checkbox-button__native.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-radio-checkbox-symbol-size:1.5rem;--bal-radio-checkbox-symbol-width:calc(0.5rem - 1px);--bal-radio-checkbox-symbol-height:calc(0.875rem - 1px);--bal-radio-checkbox-symbol-left:calc(0.5rem + 1px);--bal-radio-checkbox-symbol-margin-top:0.25rem;--bal-radio-checkbox-label-min-height:1.5rem;--bal-radio-checkbox-select-button-background-hover:var(--bal-color-grey-2);--bal-radio-checkbox-select-button-background-active:var(--bal-color-grey-2);--bal-radio-checkbox-select-button-background-checked:var(--bal-color-primary);--bal-radio-checkbox-select-button-background-checked-hover:var(--bal-color-light-blue-5);--bal-radio-checkbox-select-button-background-checked-active:var(--bal-color-primary-6);--bal-radio-checkbox-select-button-background-invalid:var(--bal-color-danger-1);--bal-radio-checkbox-select-button-background-invalid-hover:var(--bal-color-danger-1);--bal-radio-checkbox-select-button-background-invalid-active:var(--bal-color-danger-1);--bal-radio-checkbox-select-button-background-invalid-checked:var(--bal-color-border-danger);--bal-radio-checkbox-select-button-background-invalid-checked-hover:var(--bal-color-danger-5);--bal-radio-checkbox-select-button-background-invalid-checked-active:var(--bal-color-danger-6);--bal-radio-checkbox-select-button-background-disabled-hover-active:var(--bal-color-grey-2);--bal-radio-checkbox-select-button-background-disabled-checked-hover-active:var(--bal-color-border-grey-dark);--bal-radio-checkbox-switch-label-background-before:var(--bal-color-primary-1);--bal-radio-checkbox-switch-label-background-after:var(--bal-color-primary);--bal-radio-checkbox-switch-label-background-hover-after:var(--bal-color-light-blue-5);--bal-radio-checkbox-switch-label-background-active-after:var(--bal-color-primary-6);--bal-radio-checkbox-switch-label-background-checked-before:var(--bal-color-success-4);--bal-radio-checkbox-switch-label-background-checked-after:var(--bal-color-white);--bal-radio-checkbox-switch-label-background-checked-hover-before:var(--bal-color-success-5);--bal-radio-checkbox-switch-label-background-checked-active-before:var(--bal-color-success-6);--bal-radio-checkbox-switch-label-background-invalid-before:var(--bal-color-danger-1);--bal-radio-checkbox-switch-label-background-invalid-after:var(--bal-color-border-danger);--bal-radio-checkbox-switch-label-background-invalid-hover-after:var(--bal-color-danger-6);--bal-radio-checkbox-switch-label-background-invalid-active-after:var(--bal-color-border-danger);--bal-radio-checkbox-switch-label-background-invalid-checked-before:var(--bal-color-danger-4);--bal-radio-checkbox-switch-label-background-invalid-checked-after:var(--bal-color-white);--bal-radio-checkbox-switch-label-background-invalid-checked-hover-before:var(--bal-color-danger-5);--bal-radio-checkbox-switch-label-background-invalid-checked-active-before:var(--bal-color-danger-6);--bal-radio-checkbox-switch-label-background-disabled-hover-active-before:var(--bal-color-grey-3);--bal-radio-checkbox-switch-label-background-disabled-hover-active-after:var(--bal-color-border-grey-dark);--bal-radio-checkbox-switch-label-background-disabled-checked-hover-active-before:var(--bal-color-border-grey-dark);--bal-radio-checkbox-switch-label-background-disabled-checked-hover-active-after:var(--bal-color-white);--bal-radio-checkbox-button-background:transparent;--bal-radio-checkbox-button-background-checked-green:var(--bal-color-green-1);--bal-radio-checkbox-button-background-checked-purple:var(--bal-color-purple-1);--bal-radio-checkbox-button-background-checked-red:var(--bal-color-red-1);--bal-radio-checkbox-button-background-checked-yellow:var(--bal-color-yellow-1);--bal-radio-checkbox-button-background-disabled:var(--bal-color-grey-1);--bal-radio-checkbox-button-background-hover:var(--bal-color-grey-1);--bal-radio-checkbox-select-button-border-color:var(--bal-color-primary);--bal-radio-checkbox-select-button-border-color-hover:var(--bal-color-light-blue-5);--bal-radio-checkbox-select-button-border-color-active:var(--bal-color-primary-6);--bal-radio-checkbox-select-button-border-color-invalid:var(--bal-color-border-danger);--bal-radio-checkbox-select-button-border-color-invalid-hover:var(--bal-color-danger-5);--bal-radio-checkbox-select-button-border-color-invalid-active:var(--bal-color-danger-6);--bal-radio-checkbox-select-button-border-color-invalid-checked:var(--bal-color-border-danger);--bal-radio-checkbox-select-button-border-color-invalid-checked-hover:var(--bal-color-danger-5);--bal-radio-checkbox-select-button-border-color-invalid-checked-active:var(--bal-color-danger-6);--bal-radio-checkbox-select-button-border-color-disabled-hover-active:var(--bal-color-border-grey-dark);--bal-radio-checkbox-select-button-border-color-disabled-checked-hover-active:var(--bal-color-border-grey-dark);--bal-radio-checkbox-button-border-color-hover:var(--bal-color-border-primary-hovered);--bal-radio-checkbox-button-border-color-active:var(--bal-color-border-primary-pressed);--bal-radio-checkbox-button-border-color-invalid-hover:var(--bal-color-border-danger-hovered);--bal-radio-checkbox-button-border-color-invalid-active:var(--bal-color-border-danger-pressed);--bal-radio-checkbox-button-border-color:var(--bal-color-border);--bal-radio-checkbox-button-border-color-checked:var(--bal-color-border-primary);--bal-radio-checkbox-button-border-color-disabled:var(--bal-color-border-grey-dark);--bal-radio-checkbox-button-border-color-invalid:var(--bal-color-border-danger)}.bal-checkbox-button{display:block;position:relative;-ms-flex:0 0 100%;flex:0 0 100%}@media screen and (min-width: 769px),print{.bal-checkbox-button--column-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox-button--column-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox-button--column-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (max-width: 768px){.bal-checkbox-button--column-mobile-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox-button--column-mobile-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox-button--column-mobile-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (min-width: 769px),print{.bal-checkbox-button--column-tablet-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox-button--column-tablet-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox-button--column-tablet-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (min-width: 1024px){.bal-checkbox-button--column-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox-button--column-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox-button--column-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}.bal-checkbox-button__native{display:block;width:100%;height:100%;background:var(--bal-radio-checkbox-button-background);border-style:var(--bal-form-field-control-border-style);border-radius:var(--bal-form-field-control-radius);border-width:var(--bal-form-field-control-border-width);border-color:var(--bal-radio-checkbox-button-border-color);padding:var(--bal-text-size-medium);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bal-checkbox-button__native--checked{border-color:var(--bal-radio-checkbox-button-border-color-checked)}.bal-checkbox-button__native--checked.bal-checkbox-button__native--color-green{background:var(--bal-radio-checkbox-button-background-checked-green)}.bal-checkbox-button__native--checked.bal-checkbox-button__native--color-purple{background:var(--bal-radio-checkbox-button-background-checked-purple)}.bal-checkbox-button__native--checked.bal-checkbox-button__native--color-red{background:var(--bal-radio-checkbox-button-background-checked-red)}.bal-checkbox-button__native--checked.bal-checkbox-button__native--color-yellow{background:var(--bal-radio-checkbox-button-background-checked-yellow)}.bal-checkbox-button__native:disabled,.bal-checkbox-button__native--disabled{background:var(--bal-radio-checkbox-button-background-disabled);border-color:var(--bal-radio-checkbox-button-border-color-disabled);cursor:default}.bal-checkbox-button__native--invalid{border-color:var(--bal-radio-checkbox-button-border-color-invalid)}@media (hover: hover)and (pointer: fine){.bal-checkbox-button__native:hover:not(:disabled):not(.bal-checkbox-button__native--colored){background:var(--bal-radio-checkbox-button-background-hover);border-color:var(--bal-radio-checkbox-button-border-color-hover)}}.bal-checkbox-button__native:active:not(:disabled){border-color:var(--bal-radio-checkbox-button-border-color-active)}@media (hover: hover)and (pointer: fine){.bal-checkbox-button__native--invalid:hover:not(:disabled){border-color:var(--bal-radio-checkbox-button-border-color-invalid-hover)}.bal-checkbox-button__native--invalid:active:not(:disabled){border-color:var(--bal-radio-checkbox-button-border-color-invalid-active)}}";var BalCheckboxButtonStyle0=balCheckboxButtonCss;var CheckboxButton=function(){function e(e){var a=this;registerInstance(this,e);this.balFocus=createEvent(this,"balFocus",7);this.balBlur=createEvent(this,"balBlur",7);this.balFormControlDidLoad=createEvent(this,"balFormControlDidLoad",7);this.keyboardMode=true;this.onClick=function(e){if(a.disabled||a.readonly){return stopEventBubbling(e)}var o=e.target;if(o&&o.href){return}var r=a.el.querySelector("bal-checkbox");var c=e.target;if(r&&c){var b=c===r||isDescendant(r,c);if(!b){stopEventBubbling(e);r.click()}}};this.onFocus=function(e){var o;if(a.disabled||a.readonly){return stopEventBubbling(e)}var r=a.el.querySelector("bal-checkbox");var c=e.target;if(a.keyboardMode){a.focused=true}if(r&&c){var b=c===r||isDescendant(r,c);if(b){stopEventBubbling(e);(o=r.querySelector("input"))===null||o===void 0?void 0:o.focus()}}else{a.balFocus.emit()}};this.onBlur=function(e){var o;if(a.disabled||a.readonly){return stopEventBubbling(e)}var r=a.el.querySelector("bal-checkbox");var c=e.target;a.focused=false;if(r&&c){var b=c===r||isDescendant(r,c);if(b){stopEventBubbling(e);(o=r.querySelector("input"))===null||o===void 0?void 0:o.blur()}}else{a.balBlur.emit()}};this.onPointerDown=function(){return a.keyboardMode=false};this.onKeydown=function(e){return a.keyboardMode=FOCUS_KEYS.includes(e.key)};this.interactionState=BalElementStateListener.DefaultState;this.checked=false;this.focused=false;this.invalid=undefined;this.disabled=undefined;this.readonly=undefined;this.color=undefined;this.colSize=1;this.colSizeTablet=1;this.colSizeMobile=1}e.prototype.createLogger=function(e){this.log=e};e.prototype.invalidHandler=function(){this.updateProps("invalid",["bal-checkbox","bal-icon","bal-label","bal-text"])};e.prototype.disabledHandler=function(){this.updateProps("disabled",["bal-checkbox","bal-icon","bal-label","bal-text"])};e.prototype.readonlyHandler=function(){this.updateProps("readonly",["bal-checkbox","bal-icon","bal-label","bal-text"])};e.prototype.connectedCallback=function(){this.triggerAllHandlers();this.el.addEventListener("keydown",this.onKeydown);this.el.addEventListener("touchstart",this.onPointerDown);this.el.addEventListener("mousedown",this.onPointerDown)};e.prototype.componentWillLoad=function(){this.triggerAllHandlers()};e.prototype.componentDidLoad=function(){this.balFormControlDidLoad.emit(this.el)};e.prototype.disconnectedCallback=function(){this.el.removeEventListener("keydown",this.onKeydown);this.el.removeEventListener("touchstart",this.onPointerDown);this.el.removeEventListener("mousedown",this.onPointerDown)};e.prototype.elementStateListener=function(e){this.interactionChildElements.forEach((function(a){a.hovered=e.hovered;a.pressed=e.pressed}))};e.prototype.setChecked=function(){return __awaiter(this,arguments,void 0,(function(e){if(e===void 0){e=true}return __generator(this,(function(a){this.checked=e;return[2]}))}))};Object.defineProperty(e.prototype,"interactionChildElements",{get:function(){return Array.from(this.el.querySelectorAll("bal-label, bal-text, bal-icon, bal-checkbox"))},enumerable:false,configurable:true});e.prototype.triggerAllHandlers=function(){this.disabledHandler();this.readonlyHandler();this.invalidHandler()};e.prototype.updateProps=function(e,a){var o=this[e];if(o!==undefined){this.notifyComponents(a,(function(a){return a[e]=o}))}};e.prototype.notifyComponents=function(e,a){var o=this.el.querySelectorAll(e.join(", "));o.forEach((function(e){return a(e)}))};e.prototype.render=function(){var e=BEM.block("checkbox-button");var a=!!this.disabled||!!this.readonly;var o=!!this.invalid;var r=!!this.color;var c=this.checked&&r;return h(Host,{key:"f8a1bb7fe4001ebf045aef1ccb3e618448a4d216",class:Object.assign(Object.assign(Object.assign(Object.assign({},e.class()),e.modifier("column-".concat(this.colSize)).class(this.colSize>1)),e.modifier("column-tablet-".concat(this.colSizeTablet)).class(this.colSizeTablet>1)),e.modifier("column-mobile-".concat(this.colSizeMobile)).class(this.colSizeMobile>1)),onClick:this.onClick},h("button",{key:"4a2f2be8dac7e4a2f344ee8d9dedb494a8666b3c",role:"checkbox",class:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},e.element("native").class()),e.element("native").modifier("disabled").class(a)),e.element("native").modifier("invalid").class(o)),e.element("native").modifier("checked").class(this.checked)),e.element("native").modifier("colored").class(c)),e.element("native").modifier("color-".concat(this.color)).class(r)),{"bal-focusable":!this.disabled}),disabled:a,onFocus:this.onFocus,onBlur:this.onBlur},h("slot",{key:"08c9131a641ab8198746ec93c02e4ad16e6b1adc"})))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{invalid:["invalidHandler"],disabled:["disabledHandler"],readonly:["readonlyHandler"]}},enumerable:false,configurable:true});return e}();__decorate([Logger("bal-checkbox-button"),__metadata("design:type",Function),__metadata("design:paramtypes",[Function]),__metadata("design:returntype",void 0)],CheckboxButton.prototype,"createLogger",null);__decorate([ListenToElementStates(),__metadata("design:type",Function),__metadata("design:paramtypes",[Object]),__metadata("design:returntype",void 0)],CheckboxButton.prototype,"elementStateListener",null);CheckboxButton.style=BalCheckboxButtonStyle0;export{CheckboxButton as bal_checkbox_button};

package/dist/esm-es5/bal-radio-button.entry.js

@@ -1 +0,0 @@
-import{__awaiter,__generator}from"tslib";import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-8d2a7ce7.js";import{_ as __decorate,a as __metadata}from"./tslib.es6-654e2c24.js";import{B as BEM}from"./bem-8c7d2eb0.js";import{s as stopEventBubbling}from"./form-input-263e6f5b.js";import{L as Logger}from"./log-dfd1c19f.js";import{F as FOCUS_KEYS}from"./focus-visible-f0cdd043.js";import{j as isDescendant}from"./helpers-94c3fbac.js";import{B as BalElementStateListener,L as ListenToElementStates}from"./element-states.decorator-0688a178.js";import"./browser-a8073d92.js";import"./config.utils-cd529084.js";import"./listener-04842ae9.js";var balRadioButtonCss="@media (hover: hover)and (pointer: fine){.bal-radio-button__native.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}.bal-radio-button{display:block;position:relative;-ms-flex:0 0 100%;flex:0 0 100%}@media screen and (min-width: 769px),print{.bal-radio-button--column-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-radio-button--column-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-radio-button--column-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (max-width: 768px){.bal-radio-button--column-mobile-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-radio-button--column-mobile-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-radio-button--column-mobile-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (min-width: 769px),print{.bal-radio-button--column-tablet-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-radio-button--column-tablet-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-radio-button--column-tablet-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (min-width: 1024px){.bal-radio-button--column-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-radio-button--column-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-radio-button--column-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}.bal-radio-button__native{display:block;width:100%;height:100%;background:rgba(0,0,0,0);border-style:solid;border-radius:var(--bal-radius-normal);border-width:var(--bal-border-width-normal);border-color:var(--bal-color-border);padding:var(--bal-text-size-medium);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bal-radio-button__native--checked{border-color:var(--bal-color-border-primary)}.bal-radio-button__native--checked.bal-radio-button__native--color-green{background:var(--bal-color-green-1)}.bal-radio-button__native--checked.bal-radio-button__native--color-purple{background:var(--bal-color-purple-1)}.bal-radio-button__native--checked.bal-radio-button__native--color-red{background:var(--bal-color-red-1)}.bal-radio-button__native--checked.bal-radio-button__native--color-yellow{background:var(--bal-color-yellow-1)}.bal-radio-button__native:disabled,.bal-radio-button__native--disabled{background:var(--bal-color-grey-1);border-color:var(--bal-color-border-grey-dark);cursor:default}.bal-radio-button__native--invalid{border-color:var(--bal-color-border-danger)}@media (hover: hover)and (pointer: fine){.bal-radio-button__native:hover:not(:disabled):not(.bal-radio-button__native--colored){background:var(--bal-color-grey-1);border-color:var(--bal-color-border-primary-hovered)}}.bal-radio-button__native:active:not(:disabled){border-color:var(--bal-color-border-primary-pressed)}@media (hover: hover)and (pointer: fine){.bal-radio-button__native--invalid:hover:not(:disabled){border-color:var(--bal-color-border-danger-hovered)}.bal-radio-button__native--invalid:active:not(:disabled){border-color:var(--bal-color-border-danger-pressed)}}";var BalRadioButtonStyle0=balRadioButtonCss;var RadioButton=function(){function a(a){var e=this;registerInstance(this,a);this.balFocus=createEvent(this,"balFocus",7);this.balBlur=createEvent(this,"balBlur",7);this.balFormControlDidLoad=createEvent(this,"balFormControlDidLoad",7);this.keyboardMode=true;this.onClick=function(a){if(e.disabled||e.readonly){return stopEventBubbling(a)}var t=a.target;if(t&&t.href){return}var o=e.el.querySelector("bal-radio");var r=a.target;if(o&&r){var n=r===o||isDescendant(o,r);if(!n){stopEventBubbling(a);o.click()}}};this.onFocus=function(a){var t;if(e.disabled||e.readonly){return stopEventBubbling(a)}var o=e.el.querySelector("bal-radio");var r=a.target;if(e.keyboardMode){e.focused=true}if(o&&r){var n=r===o||isDescendant(o,r);if(n){stopEventBubbling(a);(t=o.querySelector("input"))===null||t===void 0?void 0:t.focus()}}else{e.balFocus.emit()}};this.onBlur=function(a){var t;if(e.disabled||e.readonly){return stopEventBubbling(a)}var o=e.el.querySelector("bal-radio");var r=a.target;e.focused=false;if(o&&r){var n=r===o||isDescendant(o,r);if(n){stopEventBubbling(a);(t=o.querySelector("input"))===null||t===void 0?void 0:t.blur()}}else{e.balBlur.emit()}};this.onPointerDown=function(){return e.keyboardMode=false};this.onKeydown=function(a){return e.keyboardMode=FOCUS_KEYS.includes(a.key)};this.interactionState=BalElementStateListener.DefaultState;this.checked=false;this.focused=false;this.invalid=undefined;this.disabled=undefined;this.readonly=undefined;this.color=undefined;this.colSize=1;this.colSizeTablet=1;this.colSizeMobile=1}a.prototype.createLogger=function(a){this.log=a};a.prototype.invalidHandler=function(){this.updateProps("invalid",["bal-radio","bal-icon","bal-label","bal-text"])};a.prototype.disabledHandler=function(){this.updateProps("disabled",["bal-radio","bal-icon","bal-label","bal-text"])};a.prototype.readonlyHandler=function(){this.updateProps("readonly",["bal-radio","bal-icon","bal-label","bal-text"])};a.prototype.connectedCallback=function(){this.triggerAllHandlers();this.el.addEventListener("keydown",this.onKeydown);this.el.addEventListener("touchstart",this.onPointerDown);this.el.addEventListener("mousedown",this.onPointerDown)};a.prototype.componentWillLoad=function(){this.triggerAllHandlers()};a.prototype.componentDidLoad=function(){this.balFormControlDidLoad.emit(this.el)};a.prototype.disconnectedCallback=function(){this.el.removeEventListener("keydown",this.onKeydown);this.el.removeEventListener("touchstart",this.onPointerDown);this.el.removeEventListener("mousedown",this.onPointerDown)};a.prototype.elementStateListener=function(a){this.interactionChildElements.forEach((function(e){e.hovered=a.hovered;e.pressed=a.pressed}))};a.prototype.setChecked=function(){return __awaiter(this,arguments,void 0,(function(a){if(a===void 0){a=true}return __generator(this,(function(e){this.checked=a;return[2]}))}))};Object.defineProperty(a.prototype,"interactionChildElements",{get:function(){return Array.from(this.el.querySelectorAll("bal-label, bal-text, bal-icon, bal-radio"))},enumerable:false,configurable:true});a.prototype.triggerAllHandlers=function(){this.disabledHandler();this.readonlyHandler();this.invalidHandler()};a.prototype.updateProps=function(a,e){var t=this[a];if(t!==undefined){this.notifyComponents(e,(function(e){return e[a]=t}))}};a.prototype.notifyComponents=function(a,e){var t=this.el.querySelectorAll(a.join(", "));t.forEach((function(a){return e(a)}))};a.prototype.render=function(){var a=BEM.block("radio-button");var e=!!this.disabled||!!this.readonly;var t=!!this.invalid;var o=!!this.color;var r=this.checked&&o;return h(Host,{key:"26ecfd7485967bc7d6073d74db6cad201293d0de",class:Object.assign(Object.assign(Object.assign(Object.assign({},a.class()),a.modifier("column-".concat(this.colSize)).class(this.colSize>1)),a.modifier("column-tablet-".concat(this.colSizeTablet)).class(this.colSizeTablet>1)),a.modifier("column-mobile-".concat(this.colSizeMobile)).class(this.colSizeMobile>1)),onClick:this.onClick},h("button",{key:"13aaaf7966649025ba3c59ba04662a1853318c46",role:"radio",class:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},a.element("native").class()),a.element("native").modifier("disabled").class(e)),a.element("native").modifier("invalid").class(t)),a.element("native").modifier("checked").class(this.checked)),a.element("native").modifier("colored").class(r)),a.element("native").modifier("color-".concat(this.color)).class(o)),{"bal-focusable":!this.disabled}),disabled:e,onFocus:this.onFocus,onBlur:this.onBlur},h("slot",{key:"02a637665239cfd8ba3e4c3b02f36e05bc24f43f"})))};Object.defineProperty(a.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(a,"watchers",{get:function(){return{invalid:["invalidHandler"],disabled:["disabledHandler"],readonly:["readonlyHandler"]}},enumerable:false,configurable:true});return a}();__decorate([Logger("bal-radio-button"),__metadata("design:type",Function),__metadata("design:paramtypes",[Function]),__metadata("design:returntype",void 0)],RadioButton.prototype,"createLogger",null);__decorate([ListenToElementStates(),__metadata("design:type",Function),__metadata("design:paramtypes",[Object]),__metadata("design:returntype",void 0)],RadioButton.prototype,"elementStateListener",null);RadioButton.style=BalRadioButtonStyle0;export{RadioButton as bal_radio_button};

package/dist/esm-es5/breakpoints.decorator-3c6214ed.js

@@ -1 +0,0 @@
-import{a as balBreakpointSubject}from"./breakpoints.subject-6b4e30ba.js";function ListenToBreakpoints(){return function(t,n,e){var i=t.connectedCallback,r=t.disconnectedCallback;t.connectedCallback=function(){balBreakpointSubject.attach(this);return i&&i.call(this)};t.disconnectedCallback=function(){balBreakpointSubject.detach(this);return r&&r.call(this)}}}export{ListenToBreakpoints as L};

package/dist/types/components/bal-checkbox/bal-checkbox-button/bal-checkbox-button.d.ts

@@ -1,102 +0,0 @@
-import { ComponentInterface, EventEmitter } from '../../../stencil-public-runtime';
-import { Loggable, LogInstance } from '../../../utils/log';
-import { BalElementStateInfo, BalElementStateObserver } from '../../../utils/element-states';
-export declare class CheckboxButton implements ComponentInterface, Loggable, BalElementStateObserver {
-    el: HTMLElement;
-    private keyboardMode;
-    log: LogInstance;
-    createLogger(log: LogInstance): void;
-    interactionState: BalElementStateInfo;
-    checked: boolean;
-    focused: boolean;
-    /**
-     * PUBLIC PROPERTY API
-     * ------------------------------------------------------
-     */
-    /**
-     * If `true` the component gets a invalid red style.
-     */
-    invalid?: boolean;
-    invalidHandler(): void;
-    /**
-     * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
-     */
-    disabled?: boolean;
-    disabledHandler(): void;
-    /**
-     * If `true` the element can not mutated, meaning the user can not edit the control.
-     */
-    readonly?: boolean;
-    readonlyHandler(): void;
-    /**
-     * If `true` the component gets a invalid red style.
-     */
-    color?: BalProps.BalCheckboxButtonColor;
-    /**
-     * @internal
-     */
-    colSize: BalProps.BalCheckboxGroupColumns;
-    /**
-     * @internal
-     */
-    colSizeTablet: BalProps.BalCheckboxGroupColumns;
-    /**
-     * @internal
-     */
-    colSizeMobile: BalProps.BalCheckboxGroupColumns;
-    /**
-     * Emitted when the toggle has focus.
-     */
-    balFocus: EventEmitter<BalEvents.BalCheckboxButtonFocusDetail>;
-    /**
-     * Emitted when the toggle loses focus.
-     */
-    balBlur: EventEmitter<BalEvents.BalCheckboxButtonBlurDetail>;
-    /**
-     * @internal
-     */
-    balFormControlDidLoad: EventEmitter<BalEvents.BalCheckboxButtonAriaLabelledByDetail>;
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback(): void;
-    componentWillLoad(): void;
-    componentDidLoad(): void;
-    disconnectedCallback(): void;
-    /**
-     * LISTENERS
-     * ------------------------------------------------------
-     */
-    elementStateListener(info: BalElementStateInfo): void;
-    /**
-     * PUBLIC METHODS
-     * ------------------------------------------------------
-     */
-    /**
-     * @internal
-     */
-    setChecked(checked?: boolean): Promise<void>;
-    /**
-     * PRIVATE METHODS
-     * ------------------------------------------------------
-     */
-    private get interactionChildElements();
-    private triggerAllHandlers;
-    private updateProps;
-    private notifyComponents;
-    /**
-     * EVENT BINDING
-     * ------------------------------------------------------
-     */
-    private onClick;
-    private onFocus;
-    private onBlur;
-    private onPointerDown;
-    private onKeydown;
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render(): any;
-}