feat(form-core): make __parentFormGroup and __toggleChecked protected

.changeset/lazy-chicken-speak.md

@@ -0,0 +1,6 @@
+---
+'@lion/form-core': patch
+'@lion/listbox': patch
+---
+
+Make \_\_parentFormGroup --> \_parentFormGroup so it is protected and not private

.changeset/witty-mugs-vanish.md

@@ -0,0 +1,6 @@
+---
+'@lion/form-core': patch
+'@lion/switch': patch
+---
+
+Make \_\_toggleChecked protected property (\_toggleChecked)

packages/form-core/src/choice-group/ChoiceGroupMixin.js

@@ -6,7 +6,7 @@ import { InteractionStateMixin } from '../InteractionStateMixin.js';
  * @typedef {import('../../types/choice-group/ChoiceGroupMixinTypes').ChoiceGroupMixin} ChoiceGroupMixin
  * @typedef {import('../../types/FormControlMixinTypes').FormControlHost} FormControlHost
  * @typedef {import('../../types/registration/FormRegistrarMixinTypes').ElementWithParentFormGroup} ElementWithParentFormGroup
- * @typedef {FormControlHost & HTMLElement & {__parentFormGroup?:HTMLElement, checked?:boolean}} FormControl
+ * @typedef {FormControlHost & HTMLElement & {_parentFormGroup?:HTMLElement, checked?:boolean}} FormControl
  * @typedef {import('../../types/choice-group/ChoiceInputMixinTypes').ChoiceInputHost} ChoiceInputHost
  */
 

packages/form-core/src/choice-group/ChoiceInputMixin.js

@@ -5,7 +5,7 @@ import { FormatMixin } from '../FormatMixin.js';
 
 /**
  * @typedef {import('../../types/FormControlMixinTypes').FormControlHost} FormControlHost
- * @typedef {FormControlHost & HTMLElement & {__parentFormGroup?:HTMLElement, checked?:boolean}} FormControl
+ * @typedef {FormControlHost & HTMLElement & {_parentFormGroup?:HTMLElement, checked?:boolean}} FormControl
  * @typedef {import('../../types/choice-group/ChoiceInputMixinTypes').ChoiceInputMixin} ChoiceInputMixin
  * @typedef {import('../../types/choice-group/ChoiceInputMixinTypes').ChoiceInputModelValue} ChoiceInputModelValue
  */
@@ -115,9 +115,9 @@ const ChoiceInputMixinImplementation = superclass =>
       if (
         changedProperties.has('name') &&
         // @ts-expect-error not all choice inputs have a parent form group, since this mixin does not have a strict contract with the registration system
-        this.__parentFormGroup &&
+        this._parentFormGroup &&
         // @ts-expect-error
-        this.__parentFormGroup.name !== this.name
+        this._parentFormGroup.name !== this.name
       ) {
         // @ts-expect-error not all choice inputs have a name prop, because this mixin does not have a strict contract with form control mixin
         this.name = changedProperties.get('name');
@@ -129,7 +129,7 @@ const ChoiceInputMixinImplementation = superclass =>
       this.modelValue = { value: '', checked: false };
       this.disabled = false;
       this._preventDuplicateLabelClick = this._preventDuplicateLabelClick.bind(this);
-      this.__toggleChecked = this.__toggleChecked.bind(this);
+      this._toggleChecked = this._toggleChecked.bind(this);
     }
 
     /**
@@ -193,7 +193,7 @@ const ChoiceInputMixinImplementation = superclass =>
       if (this._labelNode) {
         this._labelNode.addEventListener('click', this._preventDuplicateLabelClick);
       }
-      this.addEventListener('user-input-changed', this.__toggleChecked);
+      this.addEventListener('user-input-changed', this._toggleChecked);
     }
 
     disconnectedCallback() {
@@ -201,7 +201,7 @@ const ChoiceInputMixinImplementation = superclass =>
       if (this._labelNode) {
         this._labelNode.removeEventListener('click', this._preventDuplicateLabelClick);
       }
-      this.removeEventListener('user-input-changed', this.__toggleChecked);
+      this.removeEventListener('user-input-changed', this._toggleChecked);
     }
 
     /**
@@ -221,7 +221,9 @@ const ChoiceInputMixinImplementation = superclass =>
       this._inputNode.addEventListener('click', __inputClickHandler);
     }
 
-    __toggleChecked() {
+    /** @param {Event} ev */
+    // eslint-disable-next-line no-unused-vars
+    _toggleChecked(ev) {
       if (this.disabled) {
         return;
       }

packages/form-core/src/form-group/FormGroupMixin.js

@@ -12,7 +12,7 @@ import { FormElementsHaveNoError } from './FormElementsHaveNoError.js';
  * @typedef {import('../../types/FormControlMixinTypes').FormControlHost} FormControlHost
  * @typedef {import('../../types/registration/FormRegisteringMixinTypes').FormRegisteringHost} FormRegisteringHost
  * @typedef {import('../../types/registration/FormRegistrarMixinTypes').ElementWithParentFormGroup} ElementWithParentFormGroup
- * @typedef {FormControlHost & HTMLElement & {__parentFormGroup?: HTMLElement, checked?: boolean, disabled: boolean, hasFeedbackFor: string[], makeRequestToBeDisabled: Function }} FormControl
+ * @typedef {FormControlHost & HTMLElement & {_parentFormGroup?: HTMLElement, checked?: boolean, disabled: boolean, hasFeedbackFor: string[], makeRequestToBeDisabled: Function }} FormControl
  */
 
 /**
@@ -449,12 +449,12 @@ const FormGroupMixinImplementation = superclass =>
     __linkChildrenMessagesToParent(child) {
       // aria-describedby of (nested) children
       const unTypedThis = /** @type {unknown} */ (this);
-      let parent = /** @type {FormControlHost & { __parentFormGroup:any }} */ (unTypedThis);
+      let parent = /** @type {FormControlHost & { _parentFormGroup:any }} */ (unTypedThis);
       const ctor = /** @type {typeof FormGroupMixin} */ (this.constructor);
       while (parent) {
         ctor._addDescriptionElementIdsToField(child, parent._getAriaDescriptionElements());
         // Also check if the newly added child needs to refer grandparents
-        parent = parent.__parentFormGroup;
+        parent = parent._parentFormGroup;
       }
     }
 

packages/form-core/src/registration/FormRegisteringMixin.js

@@ -19,7 +19,7 @@ const FormRegisteringMixinImplementation = superclass =>
     constructor() {
       super();
       /** @type {FormRegistrarHost | undefined} */
-      this.__parentFormGroup = undefined;
+      this._parentFormGroup = undefined;
     }
 
     connectedCallback() {
@@ -42,8 +42,8 @@ const FormRegisteringMixinImplementation = superclass =>
         // @ts-expect-error check it anyway, because could be lit-element extension
         super.disconnectedCallback();
       }
-      if (this.__parentFormGroup) {
-        this.__parentFormGroup.removeFormElement(this);
+      if (this._parentFormGroup) {
+        this._parentFormGroup.removeFormElement(this);
       }
     }
   };

packages/form-core/src/registration/FormRegistrarMixin.js

@@ -11,7 +11,7 @@ import { FormRegisteringMixin } from './FormRegisteringMixin.js';
 
 /**
  * @typedef {import('../../types/FormControlMixinTypes').FormControlHost} FormControlHost
- * @typedef {FormControlHost & HTMLElement & {__parentFormGroup?:HTMLElement, checked?:boolean}} FormControl
+ * @typedef {FormControlHost & HTMLElement & {_parentFormGroup?:HTMLElement, checked?:boolean}} FormControl
  */
 
 /**
@@ -77,7 +77,7 @@ const FormRegistrarMixinImplementation = superclass =>
     addFormElement(child, indexToInsertAt) {
       // This is a way to let the child element (a lion-fieldset or lion-field) know, about its parent
       // eslint-disable-next-line no-param-reassign
-      child.__parentFormGroup = this;
+      child._parentFormGroup = this;
 
       // 1. Add children as array element
       if (indexToInsertAt >= 0) {

packages/form-core/test/lion-field.test.js

@@ -16,7 +16,7 @@ import '../lion-field.js';
 /**
  * @typedef {import('../src/LionField.js').LionField} LionField
  * @typedef {import('../types/FormControlMixinTypes').FormControlHost} FormControlHost
- * @typedef {FormControlHost & HTMLElement & {__parentFormGroup?:HTMLElement, checked?:boolean}} FormControl
+ * @typedef {FormControlHost & HTMLElement & {_parentFormGroup?:HTMLElement, checked?:boolean}} FormControl
  */
 
 /** @typedef {HTMLElement & {shadowRoot: HTMLElement, assignedNodes: Function}} ShadowHTMLElement */

packages/form-core/types/choice-group/ChoiceInputMixinTypes.d.ts

@@ -43,7 +43,7 @@ export declare class ChoiceInputHost {
 
   _preventDuplicateLabelClick(ev: Event): void;
 
-  __toggleChecked(): void;
+  _toggleChecked(ev: Event): void;
 
   __syncModelCheckedToChecked(checked: boolean): void;
 

packages/form-core/types/registration/FormRegisteringMixinTypes.d.ts

@@ -6,7 +6,7 @@ export declare class FormRegisteringHost {
   constructor(...args: any[]);
   connectedCallback(): void;
   disconnectedCallback(): void;
-  __parentFormGroup?: FormRegistrarHost;
+  _parentFormGroup?: FormRegistrarHost;
 }
 
 export declare function FormRegisteringImplementation<T extends Constructor<LitElement>>(

packages/form-core/types/registration/FormRegistrarMixinTypes.d.ts

@@ -5,7 +5,7 @@ import { FormControlHost } from '../../types/FormControlMixinTypes';
 import { LitElement } from '@lion/core';
 
 export declare class ElementWithParentFormGroup {
-  __parentFormGroup: FormRegistrarHost;
+  _parentFormGroup: FormRegistrarHost;
 }
 
 export declare class FormRegistrarHost {

packages/listbox/src/LionOption.js

@@ -121,7 +121,7 @@ export class LionOption extends DisabledMixin(ChoiceInputMixin(FormRegisteringMi
     if (this.disabled) {
       return;
     }
-    const parentForm = /** @type {unknown} */ (this.__parentFormGroup);
+    const parentForm = /** @type {unknown} */ (this._parentFormGroup);
     this.__isHandlingUserInput = true;
     if (parentForm && /** @type {ChoiceGroupHost} */ (parentForm).multipleChoice) {
       this.checked = !this.checked;

packages/listbox/types/LionOption.d.ts

@@ -2,5 +2,5 @@ import { ChoiceGroupHost } from '@lion/form-core/types/choice-group/ChoiceGroupM
 
 export declare class LionOptionHost {
   constructor(...args: any[]);
-  private __parentFormGroup: ChoiceGroupHost;
+  protected _parentFormGroup: ChoiceGroupHost;
 }

packages/switch/src/LionSwitch.js

@@ -80,7 +80,7 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
       this._inputNode.addEventListener('checked-changed', this.__handleButtonSwitchCheckedChanged);
     }
     if (this._labelNode) {
-      this._labelNode.addEventListener('click', this.__toggleChecked);
+      this._labelNode.addEventListener('click', this._toggleChecked);
     }
     this._syncButtonSwitch();
     this.submitted = true;
@@ -94,7 +94,7 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
       );
     }
     if (this._labelNode) {
-      this._labelNode.removeEventListener('click', this.__toggleChecked);
+      this._labelNode.removeEventListener('click', this._toggleChecked);
     }
   }
 

packages/switch/src/LionSwitchButton.js

@@ -77,7 +77,7 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
 
     this.role = 'switch';
     this.checked = false;
-    this.__toggleChecked = this.__toggleChecked.bind(this);
+    this._toggleChecked = this._toggleChecked.bind(this);
     this.__handleKeydown = this.__handleKeydown.bind(this);
     this.__handleKeyup = this.__handleKeyup.bind(this);
   }
@@ -85,19 +85,19 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('aria-checked', `${this.checked}`);
-    this.addEventListener('click', this.__toggleChecked);
+    this.addEventListener('click', this._toggleChecked);
     this.addEventListener('keydown', this.__handleKeydown);
     this.addEventListener('keyup', this.__handleKeyup);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener('click', this.__toggleChecked);
+    this.removeEventListener('click', this._toggleChecked);
     this.removeEventListener('keydown', this.__handleKeydown);
     this.removeEventListener('keyup', this.__handleKeyup);
   }
 
-  __toggleChecked() {
+  _toggleChecked() {
     if (this.disabled) {
       return;
     }
@@ -132,7 +132,7 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
    */
   __handleKeyup(e) {
     if ([32 /* space */, 13 /* enter */].indexOf(e.keyCode) !== -1) {
-      this.__toggleChecked();
+      this._toggleChecked();
     }
   }