fix: expose members as protected for extension compat. till v1

.changeset/dirty-rules-wash.md

@@ -0,0 +1,11 @@
+---
+'@lion/button': patch
+'@lion/calendar': patch
+'@lion/input-date': patch
+'@lion/input-datepicker': patch
+'@lion/input': patch
+'@lion/select-rich': patch
+'@lion/select': patch
+---
+
+fix: expose members as protected for extension compat. till v1

packages/button/src/LionButton.js

@@ -240,8 +240,10 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
    * of the form, and firing click on this button. This will fire the form submit
    * without side effects caused by the click bubbling back up to lion-button.
    * @param {Event} ev
-   * @private
+   * @protected
+   * @returns {Promise<void>}
    */
+  // TODO: rename to _clickDelegationHandler in v1
   async __clickDelegationHandler(ev) {
     // Wait for updateComplete if form is not yet available
     if (!this._form) {

packages/calendar/src/LionCalendar.js

@@ -466,8 +466,9 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
    * @param {string} type
    * @param {string} previousMonth
    * @param {number} previousYear
-   * @private
+   * @protected
    */
+  // TODO: rename to _previousButtonTemplate in v1. Also see: https://github.com/ing-bank/lion/discussions/591
   __renderPreviousButton(type, previousMonth, previousYear) {
     const { disabled, month } = this.__getPreviousDisabled(type, previousMonth, previousYear);
     const previousButtonTitle = this.__getNavigationLabel('previous', type, month, previousYear);
@@ -496,8 +497,9 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
    * @param {string} type
    * @param {string} nextMonth
    * @param {number} nextYear
-   * @private
+   * @protected
    */
+  // TODO: rename to _nextButtonTemplate in v1. Also see: https://github.com/ing-bank/lion/discussions/591
   __renderNextButton(type, nextMonth, nextYear) {
     const { disabled, month } = this.__getNextDisabled(type, nextMonth, nextYear);
     const nextButtonTitle = this.__getNavigationLabel('next', type, month, nextYear);

packages/form-core/src/FormatMixin.js

@@ -219,12 +219,12 @@ const FormatMixinImplementation = superclass =>
           /** @type {?} */
           this.modelValue = this.deserializer(this.serializedValue);
         } else if (source === 'formatted') {
-          this.modelValue = this.__callParser();
+          this.modelValue = this._callParser();
         }
       }
       if (source !== 'formatted') {
         /** @type {string} */
-        this.formattedValue = this.__callFormatter();
+        this.formattedValue = this._callFormatter();
       }
       if (source !== 'serialized') {
         /** @type {string} */
@@ -239,7 +239,7 @@ const FormatMixinImplementation = superclass =>
      * @return {?}
      * @private
      */
-    __callParser(value = this.formattedValue) {
+    _callParser(value = this.formattedValue) {
       // A) check if we need to parse at all
 
       // A.1) The end user had no intention to parse
@@ -277,7 +277,7 @@ const FormatMixinImplementation = superclass =>
      * @returns {string|undefined}
      * @private
      */
-    __callFormatter() {
+    _callFormatter() {
       // - Why check for this.hasError?
       // We only want to format values that are considered valid. For best UX,
       // we only 'reward' valid inputs.
@@ -350,7 +350,7 @@ const FormatMixinImplementation = superclass =>
       if (!this.__isHandlingComposition) {
         this.value = this.preprocessor(this.value);
       }
-      this.modelValue = this.__callParser(this.value);
+      this.modelValue = this._callParser(this.value);
     }
 
     /**

packages/form-core/types/FormatMixinTypes.d.ts

@@ -27,10 +27,10 @@ export declare class FormatHost {
   protected _reflectBackOn(): boolean;
   protected _proxyInputEvent(): void;
   protected _onUserInputChanged(): void;
+  protected _callParser(value: string | undefined): object;
+  protected _callFormatter(): string;
 
   private __preventRecursiveTrigger: boolean;
-  private __callParser(value: string | undefined): object;
-  private __callFormatter(): string;
 }
 
 export declare function FormatImplementation<T extends Constructor<LitElement>>(

packages/input-amount/src/LionInputAmount.js

@@ -10,8 +10,6 @@ import { parseAmount } from './parsers.js';
  *
  * @customElement lion-input-amount
  */
-// TODO: make __callParser protected => _callParser
-// @ts-ignore [allow-private]: __callParser
 export class LionInputAmount extends LocalizeMixin(LionInput) {
   /** @type {any} */
   static get properties() {
@@ -104,15 +102,15 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
 
   /**
    * @override of FormatMixin
-   * @private
+   * @protected
    */
-  __callParser(value = this.formattedValue) {
+  _callParser(value = this.formattedValue) {
     // TODO: (@daKmor) input and change events both trigger parsing therefore we need to handle the second parse
     this.__parserCallcountSincePaste += 1;
     this.__isPasting = this.__parserCallcountSincePaste === 2;
     this.formatOptions.mode = this.__isPasting === true ? 'pasted' : 'auto';
-    // @ts-ignore [allow-private]
+    // @ts-ignore [allow-protected]
-    return super.__callParser(value);
+    return super._callParser(value);
   }
 
   /**

packages/input-datepicker/src/LionInputDatepicker.js

@@ -157,10 +157,17 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     ];
   }
 
+  /**
+   * @protected
+   */
   get _invokerNode() {
     return /** @type {HTMLElement} */ (this.querySelector(`#${this.__invokerId}`));
   }
 
+  /**
+   * @type {LionCalendar}
+   * @protected
+   */
   get _calendarNode() {
     return /** @type {LionCalendar} */ (this._overlayCtrl.contentNode.querySelector(
       '[slot="content"]',

packages/input-datepicker/test-helpers/DatepickerInputObject.js

@@ -44,6 +44,7 @@ export class DatepickerInputObject {
    */
 
   get invokerEl() {
+    // @ts-ignore [allow-protected] in test
     return this.el._invokerNode;
   }
 
@@ -63,6 +64,7 @@ export class DatepickerInputObject {
   }
 
   get calendarEl() {
+    // @ts-ignore [allow-protected] in test
     return /** @type {import('@lion/calendar').LionCalendar} */ (this.el && this.el._calendarNode);
   }
 

packages/select-rich/src/LionSelectRich.js

@@ -462,8 +462,9 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
 
   /**
    * @param {KeyboardEvent} ev
-   * @private
+   * @protected
    */
+  // TODO: rename to _onKeyUp in v1
   __onKeyUp(ev) {
     if (this.disabled) {
       return;