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

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

@@ -1,210 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-84f42282.js');
-const tslib_es6 = require('./tslib.es6-a680968e.js');
-const bem = require('./bem-81bc6a2d.js');
-const formInput = require('./form-input-e9974433.js');
-const log = require('./log-33398c2a.js');
-const focusVisible = require('./focus-visible-264bd9b8.js');
-const helpers = require('./helpers-debb881a.js');
-const elementStates_decorator = require('./element-states.decorator-aa5126e2.js');
-require('./browser-1d542d0f.js');
-require('./config.utils-df30e424.js');
-require('./listener-52d2e5fd.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) {
-        index.registerInstance(this, hostRef);
-        this.balFocus = index.createEvent(this, "balFocus", 7);
-        this.balBlur = index.createEvent(this, "balBlur", 7);
-        this.balFormControlDidLoad = index.createEvent(this, "balFormControlDidLoad", 7);
-        this.keyboardMode = true;
-        /**
-         * EVENT HANDLER
-         * ------------------------------------------------------
-         */
-        this.onClick = (ev) => {
-            if (this.disabled || this.readonly) {
-                return formInput.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 || helpers.isDescendant(radioEl, targetEl);
-                if (!isCheckbox) {
-                    formInput.stopEventBubbling(ev);
-                    radioEl.click();
-                }
-            }
-        };
-        this.onFocus = (ev) => {
-            var _a;
-            if (this.disabled || this.readonly) {
-                return formInput.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 || helpers.isDescendant(radioEl, targetEl);
-                if (isCheckbox) {
-                    formInput.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 formInput.stopEventBubbling(ev);
-            }
-            const radioEl = this.el.querySelector('bal-radio');
-            const targetEl = ev.target;
-            this.focused = false;
-            if (radioEl && targetEl) {
-                const isRadio = targetEl === radioEl || helpers.isDescendant(radioEl, targetEl);
-                if (isRadio) {
-                    formInput.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 = focusVisible.FOCUS_KEYS.includes(ev.key));
-        this.interactionState = elementStates_decorator.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.BEM.block('radio-button');
-        const disabled = !!this.disabled || !!this.readonly;
-        const invalid = !!this.invalid;
-        const color = !!this.color;
-        const colored = this.checked && color;
-        return (index.h(index.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 }, index.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 }, index.h("slot", { key: '02a637665239cfd8ba3e4c3b02f36e05bc24f43f' }))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "invalid": ["invalidHandler"],
-        "disabled": ["disabledHandler"],
-        "readonly": ["readonlyHandler"]
-    }; }
-};
-tslib_es6.__decorate([
-    log.Logger('bal-radio-button'),
-    tslib_es6.__metadata("design:type", Function),
-    tslib_es6.__metadata("design:paramtypes", [Function]),
-    tslib_es6.__metadata("design:returntype", void 0)
-], RadioButton.prototype, "createLogger", null);
-tslib_es6.__decorate([
-    elementStates_decorator.ListenToElementStates(),
-    tslib_es6.__metadata("design:type", Function),
-    tslib_es6.__metadata("design:paramtypes", [Object]),
-    tslib_es6.__metadata("design:returntype", void 0)
-], RadioButton.prototype, "elementStateListener", null);
-RadioButton.style = BalRadioButtonStyle0;
-
-exports.bal_radio_button = RadioButton;

package/dist/collection/components/bal-checkbox/bal-checkbox-button/bal-checkbox-button.css

@@ -1 +0,0 @@
-@media(hover: hover)and (pointer: fine){.bal-checkbox-button__native.bal-focused{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;flex:0 0 100%}@media screen and (min-width: 769px),print{.bal-checkbox-button--column-2{flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox-button--column-3{flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox-button--column-4{flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (max-width: 768px){.bal-checkbox-button--column-mobile-2{flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox-button--column-mobile-3{flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox-button--column-mobile-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{flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox-button--column-tablet-3{flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox-button--column-tablet-4{flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (min-width: 1024px){.bal-checkbox-button--column-2{flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox-button--column-3{flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox-button--column-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;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)}}