@odx/foundation 1.0.0-beta.80 → 1.0.0-beta.81

package/dist/components.js

@@ -735,17 +735,13 @@ const _OdxCheckboxGroup = class _OdxCheckboxGroup extends CheckboxGroupFormContr
     super(...arguments);
     this.layout = CheckboxGroupLayout.VERTICAL;
     this.#handleSlotChange = () => {
-      for (const control of this.groupControls) {
-        control.addEventListener("change", this.#handleGroupControlChange);
-      }
+      this.groupControl?.removeEventListener("change", this.#handleGroupControlChange);
+      this.groupControl?.addEventListener("change", this.#handleGroupControlChange);
     };
     this.#handleGroupControlChange = (event) => {
-      if (!this.isControl(event.target)) return;
+      if (!this.isGroupControl(event.target)) return;
       event.stopImmediatePropagation();
       this.updateValue(event.target.checked ? this.controls.map((control) => control.value) : [], true);
-      for (const groupControl of this.childGroups.flatMap((group) => group.groupControls)) {
-        groupControl.checked = event.target.checked;
-      }
     };
   }
   static {

package/dist/lib/control/checkbox-group-form-control.d.ts

@@ -6,11 +6,14 @@ export declare abstract class CheckboxGroupFormControl extends FormControl<strin
     private elements;
     protected get childGroups(): CheckboxGroupFormControl[];
     get controls(): CheckboxFormControl[];
-    get groupControls(): CheckboxFormControl[];
+    get selectedControls(): CheckboxFormControl[];
+    get groupControl(): CheckboxFormControl | null;
     value: string[];
     constructor();
+    protected firstUpdated(_changedProperties: PropertyValues): Promise<void>;
     toFormValue(): FormData;
     protected isControl(element: unknown): element is CheckboxFormControl;
+    protected isGroupControl(element: unknown): element is CheckboxFormControl;
     protected isControlChecked(control: CheckboxFormControl): boolean;
     protected updated(props: PropertyValues<this>): void;
     protected updateControls(updateFn: (control: CheckboxFormControl, index: number) => void): void;

package/dist/lib/utils/dom.d.ts

@@ -4,7 +4,7 @@ export declare function forwardEvent(target: HTMLElement, eventInit?: EventInit)
 export declare function getElementFromEvent<T = HTMLElement>(event: Event, filterFn: (node: Element) => boolean): T;
 export declare function waitForAnimations(element?: Element | null, subtree?: boolean): Promise<Animation[]>;
 export declare function toAriaBooleanAttribute(value: boolean, removeOnFalse?: boolean): 'true' | 'false';
-export declare function toPx(value?: string | number | null): string | null;
+export declare function toPx(value?: number | null): string | null;
 export interface GetAssignedElementOptions {
     slot?: string;
     selector?: string;

package/dist/main.js

@@ -68,9 +68,8 @@ function toAriaBooleanAttribute(value, removeOnFalse = true) {
   return removeOnFalse && value === false ? null : String(value);
 }
 function toPx(value) {
-  const coercedValue = Number(value);
-  if (value == null || value === "" || Number.isNaN(coercedValue)) return null;
-  return `${round(coercedValue, 2)}px`;
+  if (value == null || Number.isNaN(value)) return null;
+  return `${round(value, 2)}px`;
 }
 function getAssignedElement(root, options) {
   const { slot, selector } = options ?? {};
@@ -120,10 +119,10 @@ const CanBeDisabled = (superClass) => {
       this.ariaDisabled = toAriaBooleanAttribute(this.disabled);
       if (this.disabled) {
         this.tabIndex = -1;
-      } else if (this.#initialTabIndex !== void 0) {
-        this.tabIndex = this.#initialTabIndex;
-      } else {
+      } else if (this.#initialTabIndex === void 0) {
         this.removeAttribute("tabindex");
+      } else {
+        this.tabIndex = this.#initialTabIndex;
       }
     }
   }
@@ -244,7 +243,7 @@ class CheckboxFormControl extends FormControl {
     const newState = state ?? !currentState;
     if (this.disabled || this.readonly || newState === currentState) return;
     this.checked = newState;
-    if (!(emitEvent && this.emit("change"))) return;
+    if (!(emitEvent && this.emit("change", { bubbles: true }))) return;
     this.checked = currentState;
   }
   connectedCallback() {
@@ -272,16 +271,20 @@ const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormCo
     super();
     this.value = [];
     this.#handleChangeEvent = (event) => {
-      const { target } = event;
-      if (!this.isControl(target)) return;
-      if (target.checked) {
-        this.updateValue([...this.value, target.value], true);
-        return;
+      if (this.isControl(event.target)) {
+        this.#handleControlChange(event);
+      }
+    };
+    this.#handleControlChange = (event) => {
+      if (!this.isControl(event.target)) return;
+      if (event.target.checked) {
+        this.updateValue([...this.value, event.target.value], true);
+      } else {
+        this.updateValue(
+          this.value.filter((value) => value !== event.target.value),
+          true
+        );
       }
-      this.updateValue(
-        this.value.filter((value) => value !== target.value),
-        true
-      );
     };
     if (!isServer) {
       this.addEventListener("change", this.#handleChangeEvent);
@@ -293,8 +296,15 @@ const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormCo
   get controls() {
     return this.#findControls((element) => !element.hasAttribute(GROUP_CONTROL_SELECTOR)).concat(this.childGroups.flatMap((group) => group.controls));
   }
-  get groupControls() {
-    return this.#findControls((element) => element.hasAttribute(GROUP_CONTROL_SELECTOR));
+  get selectedControls() {
+    return this.controls.filter((control) => this.isControlChecked(control));
+  }
+  get groupControl() {
+    return this.#findControls((element) => element.hasAttribute(GROUP_CONTROL_SELECTOR))[0] ?? null;
+  }
+  async firstUpdated(_changedProperties) {
+    await 0;
+    this.value = this.controls.filter((control) => control.checked).map((control) => control.value);
   }
   toFormValue() {
     const formData = new FormData();
@@ -306,6 +316,9 @@ const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormCo
   isControl(element) {
     return element instanceof CheckboxFormControl;
   }
+  isGroupControl(element) {
+    return this.isControl(element) && element.hasAttribute(GROUP_CONTROL_SELECTOR);
+  }
   isControlChecked(control) {
     return this.value.includes(control.value);
   }
@@ -315,10 +328,10 @@ const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormCo
       this.updateControls((control) => {
         control.checked = this.isControlChecked(control);
       });
-      for (const groupControl of this.groupControls) {
-        if (groupControl instanceof CheckboxFormControl && "indeterminate" in groupControl) {
-          groupControl.indeterminate = this.value.length > 0 && this.value.length < this.controls.length;
-          groupControl.checked = this.controls.length > 0 && this.value.length === this.controls.length;
+      if (this.groupControl) {
+        this.groupControl.checked = this.controls.length > 0 && this.value.length === this.controls.length;
+        if ("indeterminate" in this.groupControl) {
+          this.groupControl.indeterminate = this.value.length > 0 && this.value.length < this.controls.length;
         }
       }
     }
@@ -343,13 +356,18 @@ const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormCo
   }
   updateValue(value, dispatchEvent) {
     this.value = value;
+    for (const group of this.childGroups) {
+      const groupValue = this.value.filter((value2) => group.controls.some((control) => control.value === value2));
+      group.updateValue(groupValue, false);
+    }
     if (!dispatchEvent) return;
-    this.emit("change");
+    this.emit("change", { bubbles: true });
   }
-  #handleChangeEvent;
   #findControls(predicate) {
     return this.elements.filter((element) => this.isControl(element) && predicate(element));
   }
+  #handleChangeEvent;
+  #handleControlChange;
 };
 __decorateClass([
   queryAssignedElements({ flatten: true })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@odx/foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-beta.80",
+  "version": "1.0.0-beta.81",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",