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

package/components/bal-checkbox-group.js

@@ -1,18 +1,20 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { a as ariaBooleanToString } from './aria.js';
 import { a as areArraysEqual } from './array.js';
-import { s as stopEventBubbling } from './form-input.js';
-import { j as isDescendant, q as hasTagName } from './helpers.js';
 import { i as inheritAttributes } from './attributes.js';
 import { B as BEM } from './bem.js';
-import { L as Logger } from './log.js';
 import { d as defaultBalAriaForm } from './form.js';
-import { a as ariaBooleanToString } from './aria.js';
-import { d as defineCustomElement$3 } from './bal-checkbox2.js';
-import { d as defineCustomElement$2 } from './bal-icon2.js';
+import { s as stopEventBubbling } from './form-input.js';
+import { j as isDescendant, q as hasTagName } from './helpers.js';
+import { L as Logger } from './log.js';
+import { d as defineCustomElement$2 } from './bal-checkbox2.js';
 import { L as ListenToFocus } from './focus.decorator.js';
 import { L as ListenToMutation } from './mutation.decorator.js';
 
+const balCheckboxGroupCss = ".bal-checkbox-group{display:inline-block;position:relative;width:100%}.bal-checkbox-group__inner{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:stretch;align-items:stretch;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--bal-space-normal)}.bal-checkbox-group__inner--button{-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex:1;flex:1;gap:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-checkbox-group__inner--button{-ms-flex-direction:row;flex-direction:row}}.bal-checkbox-group__inner--expanded{-ms-flex-align:stretch;align-items:stretch}.bal-checkbox-group__inner--expanded .bal-checkbox{-ms-flex:1;flex:1}@media screen and (max-width: 768px){.bal-checkbox-group__inner--expanded .bal-checkbox{width:100%}}.bal-checkbox-group__inner--button.bal-checkbox-group__inner--vertical{gap:var(--bal-space-x-small)}.bal-checkbox-group__inner--vertical{-ms-flex-direction:column;flex-direction:column;border-radius:var(--bal-radius-normal);gap:0}@media screen and (min-width: 769px),print{.bal-checkbox-group__inner--vertical{-ms-flex-align:start;align-items:flex-start}}@media screen and (max-width: 768px){.bal-checkbox-group__inner--vertical-mobile{-ms-flex-direction:column;flex-direction:column;border-radius:var(--bal-radius-normal);gap:0}}";
+const BalCheckboxGroupStyle0 = balCheckboxGroupCss;
+
 const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup extends HTMLElement {
     constructor() {
         super();
@@ -40,24 +42,13 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
             if (element.href) {
                 return;
             }
-            ev.preventDefault();
             const selectedCheckbox = ev.target && ev.target.closest('bal-checkbox');
             if (selectedCheckbox) {
                 if (selectedCheckbox.disabled || selectedCheckbox.readonly) {
                     return ev.stopPropagation();
                 }
             }
-            // generate new value array out of the checked checkboxes
-            const newValue = [];
-            this.getCheckboxes().forEach(cb => {
-                if (cb.checked) {
-                    newValue.push(cb.value);
-                }
-            });
-            if (!areArraysEqual(this.value, newValue)) {
-                this.value = [...newValue];
-                this.balChange.emit(this.value);
-            }
+            this.updateValues();
         };
         this.onOptionChange = async () => {
             this.sync();
@@ -94,9 +85,6 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
                 this.getCheckboxes().forEach(child => {
                     child.invalid = value;
                 });
-                this.getCheckboxButtons().forEach(child => {
-                    child.invalid = value;
-                });
             }
         }
     }
@@ -106,9 +94,6 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
                 this.getCheckboxes().forEach(child => {
                     child.disabled = value;
                 });
-                this.getCheckboxButtons().forEach(child => {
-                    child.disabled = value;
-                });
             }
         }
     }
@@ -118,9 +103,6 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
                 this.getCheckboxes().forEach(child => {
                     child.readonly = value;
                 });
-                this.getCheckboxButtons().forEach(child => {
-                    child.readonly = value;
-                });
             }
         }
     }
@@ -135,13 +117,13 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
         }
     }
     columnsChanged(value) {
-        this.getCheckboxButtons().forEach(checkboxButton => (checkboxButton.colSize = value));
+        this.getCheckboxes().forEach(checkbox => (checkbox.colSize = value));
     }
     columnsTabletChanged(value) {
-        this.getCheckboxButtons().forEach(checkboxButton => (checkboxButton.colSizeTablet = value));
+        this.getCheckboxes().forEach(checkbox => (checkbox.colSizeTablet = value));
     }
     columnsMobileChanged(value) {
-        this.getCheckboxButtons().forEach(checkboxButton => (checkboxButton.colSizeMobile = value));
+        this.getCheckboxes().forEach(checkbox => (checkbox.colSizeMobile = value));
     }
     /**
      * LIFECYCLE
@@ -150,12 +132,14 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
     connectedCallback() {
         if (this.control) {
             this.mutationObserverActive = this.options === undefined;
+            this.valueChanged(this.value, []);
         }
     }
     componentWillLoad() {
         if (this.control) {
             this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
             this.disabledChanged(this.disabled);
+            this.invalidChanged(this.invalid);
             this.readonlyChanged(this.readonly);
         }
         this.columnsChanged(this.columns);
@@ -179,10 +163,11 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
         this.columnsMobileChanged(this.columnsMobile);
         this.onOptionChange();
     }
-    listenOnClick(ev) {
+    listenOnCheckboxChange(ev) {
         if (this.control) {
             if (isDescendant(this.el, ev.target)) {
                 stopEventBubbling(ev);
+                this.updateValues();
             }
         }
     }
@@ -265,15 +250,25 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
     getCheckboxes() {
         return Array.from(this.el.querySelectorAll('bal-checkbox'));
     }
-    getCheckboxButtons() {
-        return Array.from(this.el.querySelectorAll('bal-checkbox-button'));
+    updateValues() {
+        // generate new value array out of the checked checkboxes
+        const newValue = [];
+        this.getCheckboxes().forEach(cb => {
+            if (cb.checked) {
+                newValue.push(cb.value);
+            }
+        });
+        if (!areArraysEqual(this.value, newValue)) {
+            this.value = [...newValue];
+            this.balChange.emit(this.value);
+        }
     }
     /**
      * RENDER
      * ------------------------------------------------------
      */
     render() {
-        const block = BEM.block('radio-checkbox-group');
+        const block = BEM.block('checkbox-group');
         const innerEl = block.element('inner');
         const rawOptions = this.options || [];
         const options = rawOptions.map(option => {
@@ -282,7 +277,7 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
             }
             return option;
         });
-        return (h(Host, Object.assign({ class: Object.assign({}, block.class()), role: "group", "aria-disabled": ariaBooleanToString(this.disabled), "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, onClick: this.onClick }, this.inheritedAttributes), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier('vertical-mobile').class(this.verticalOnMobile)), innerEl.modifier('vertical').class(this.vertical)), innerEl.modifier('expanded').class(this.expanded)), innerEl.modifier('select-button').class(this.interface === 'select-button')) }, h("slot", null), options.map(option => (h("bal-checkbox", { key: option.value, name: option.name, value: option.value, labelHidden: option.labelHidden, flat: option.flat, interface: option.interface, disabled: option.disabled, readonly: option.readonly, required: option.required, nonSubmit: !!option.nonSubmit, invalid: option.invalid, innerHTML: option.html }))))));
+        return (h(Host, Object.assign({ class: Object.assign({}, block.class()), role: "group", "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), onClick: this.onClick }, this.inheritedAttributes), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier('vertical-mobile').class(this.verticalOnMobile)), innerEl.modifier('vertical').class(this.vertical)), innerEl.modifier('expanded').class(this.expanded)), innerEl.modifier('button').class(this.interface === 'button')) }, h("slot", null), options.map(option => (h("bal-checkbox", { key: option.value, name: option.name, value: option.value, labelHidden: option.labelHidden, flat: option.flat, interface: option.interface, disabled: option.disabled, readonly: option.readonly, required: option.required, nonSubmit: !!option.nonSubmit, invalid: option.invalid, innerHTML: option.html }))))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -295,6 +290,7 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
         "columnsTablet": ["columnsTabletChanged"],
         "columnsMobile": ["columnsMobileChanged"]
     }; }
+    static get style() { return BalCheckboxGroupStyle0; }
 }, [4, "bal-checkbox-group", {
         "options": [16],
         "interface": [1],
@@ -315,7 +311,7 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
         "setValue": [64],
         "getOptionByValue": [64],
         "setAriaForm": [64]
-    }, [[6, "balChange", "listenOnClick"], [6, "reset", "resetHandler"], [6, "balFocus", "checkboxFocusListener"], [6, "balBlur", "checkboxBlurListener"]], {
+    }, [[6, "balChange", "listenOnCheckboxChange"], [6, "reset", "resetHandler"], [6, "balFocus", "checkboxFocusListener"], [6, "balBlur", "checkboxBlurListener"]], {
         "options": ["optionChanged"],
         "invalid": ["invalidChanged"],
         "disabled": ["disabledChanged"],
@@ -354,7 +350,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["bal-checkbox-group", "bal-checkbox", "bal-icon"];
+    const components = ["bal-checkbox-group", "bal-checkbox"];
     components.forEach(tagName => { switch (tagName) {
         case "bal-checkbox-group":
             if (!customElements.get(tagName)) {
@@ -362,11 +358,6 @@ function defineCustomElement$1() {
             }
             break;
         case "bal-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "bal-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }