@lion/ui 0.23.0 → 0.25.0

package/components/form-core/src/choice-group/ChoiceInputMixin.js

@@ -22,131 +22,138 @@ const hasChanged = (nw, old = {}) => nw.value !== old.value || nw.checked !== ol
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
 // prettier-ignore
-const ChoiceInputMixinImplementation = /** @type {ChoiceInputMixin} */ (superclass =>
-  class ChoiceInputMixin extends FormatMixin(superclass) {
-    /** @type {any} */
-    static get properties() {
-      return {
-        checked: { type: Boolean, reflect: true },
-        disabled: { type: Boolean, reflect: true },
-        modelValue: { type: Object, hasChanged },
-        choiceValue: { type: Object },
+const ChoiceInputMixinImplementation = /** @type {ChoiceInputMixin} */superclass => class ChoiceInputMixin extends FormatMixin(superclass) {
+  /** @type {any} */
+  static get properties() {
+    return {
+      checked: {
+        type: Boolean,
+        reflect: true
+      },
+      disabled: {
+        type: Boolean,
+        reflect: true
+      },
+      modelValue: {
+        type: Object,
+        hasChanged
+      },
+      choiceValue: {
+        type: Object
+      }
+    };
+  }
+
+  /**
+   * The value that will be registered to the modelValue of the parent ChoiceGroup. Recommended
+   * to be a string
+   * @type {string|any}
+   */
+  get choiceValue() {
+    return this.modelValue.value;
+  }
+  set choiceValue(value) {
+    this.requestUpdate('choiceValue', this.choiceValue);
+    // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; Lit reactive property: read through a typed local instead (e.g. const next = this.x ?? DEFAULT) - a class field would shadow the accessor Lit creates from static properties
+    if (this.modelValue.value !== value) {
+      /** @type {ChoiceInputModelValue} */
+      // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; Lit reactive property: read through a typed local instead (e.g. const next = this.x ?? DEFAULT) - a class field would shadow the accessor Lit creates from static properties
+      this.modelValue = {
+        value,
+        checked: this.modelValue.checked
       };
     }
-
-    /**
-     * The value that will be registered to the modelValue of the parent ChoiceGroup. Recommended
-     * to be a string
-     * @type {string|any}
-     */
-    get choiceValue() {
-      return this.modelValue.value;
-    }
-
-    set choiceValue(value) {
-      this.requestUpdate('choiceValue', this.choiceValue);
-      // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; Lit reactive property: read through a typed local instead (e.g. const next = this.x ?? DEFAULT) - a class field would shadow the accessor Lit creates from static properties
-      if (this.modelValue.value !== value) {
-        /** @type {ChoiceInputModelValue} */
-        // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; Lit reactive property: read through a typed local instead (e.g. const next = this.x ?? DEFAULT) - a class field would shadow the accessor Lit creates from static properties
-        this.modelValue = { value, checked: this.modelValue.checked };
+  }
+
+  /**
+   * @param {string} [name]
+   * @param {unknown} [oldValue]
+   * @param {import('lit').PropertyDeclaration} [options]
+   * @returns {void}
+   */
+  requestUpdate(name, oldValue, options) {
+    super.requestUpdate(name, oldValue, options);
+    if (name === 'modelValue') {
+      if (this.modelValue.checked !== this.checked) {
+        this.__syncModelCheckedToChecked(this.modelValue.checked);
+      }
+    } else if (name === 'checked') {
+      if (this.modelValue.checked !== this.checked) {
+        this.__syncCheckedToModel(this.checked);
       }
     }
-
+  }
+
+  /**
+   * @param {import('lit').PropertyValues } changedProperties
+   */
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    if (changedProperties.has('checked')) {
+      // Here we set the initial value for our [slot=input] content,
+      // which has been set by our SlotMixin
+      this.__syncCheckedToInputElement();
+    }
+  }
+
+  /**
+   * @param {import('lit').PropertyValues } changedProperties
+   */
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has('modelValue')) {
+      this.__syncCheckedToInputElement();
+    }
+    if (changedProperties.has('name') && this._parentFormGroup && this._parentFormGroup.name !== this.name) {
+      this._syncNameToParentFormGroup();
+    }
+  }
+  constructor() {
+    super();
     /**
-     * @param {string} [name]
-     * @param {unknown} [oldValue]
-     * @param {import('lit').PropertyDeclaration} [options]
-     * @returns {void}
+     * Boolean indicating whether or not this element is checked by the end user.
      */
-    requestUpdate(name, oldValue, options) {
-      super.requestUpdate(name, oldValue, options);
-
-      if (name === 'modelValue') {
-        if (this.modelValue.checked !== this.checked) {
-          this.__syncModelCheckedToChecked(this.modelValue.checked);
-        }
-      } else if (name === 'checked') {
-        if (this.modelValue.checked !== this.checked) {
-          this.__syncCheckedToModel(this.checked);
-        }
-      }
-    }
-
+    // TODO: [v1] this can be solved when property effects are scheduled until firstUpdated
+    // this.checked = false;
     /**
-     * @param {import('lit').PropertyValues } changedProperties
+     * Whereas 'normal' `.modelValue`s usually store a complex/typed version
+     * of a view value, choice inputs have a slightly different approach.
+     * In order to remain their Single Source of Truth characteristic, choice inputs
+     * store both the value and 'checkedness', in the format { value: 'x', checked: true }
+     * Different from the platform, this also allows to serialize the 'non checkedness',
+     * allowing to restore form state easily and inform the server about unchecked options.
+     * @type {{value:string|any,checked:boolean}}
      */
-    firstUpdated(changedProperties) {
-      super.firstUpdated(changedProperties);
-      if (changedProperties.has('checked')) {
-        // Here we set the initial value for our [slot=input] content,
-        // which has been set by our SlotMixin
-        this.__syncCheckedToInputElement();
-      }
-    }
-
+    this.modelValue = {
+      value: '',
+      checked: false
+    };
+    // TODO: maybe disabled is more a concern of FormControl/Field?
     /**
-     * @param {import('lit').PropertyValues } changedProperties
+     * Boolean indicating whether or not this element is disabled.
+     * @type {boolean}
      */
-    updated(changedProperties) {
-      super.updated(changedProperties);
-      if (changedProperties.has('modelValue')) {
-        this.__syncCheckedToInputElement();
-      }
-
-      if (
-        changedProperties.has('name') &&
-        this._parentFormGroup &&
-        this._parentFormGroup.name !== this.name
-      ) {
-        this._syncNameToParentFormGroup();
-      }
-    }
-
-    constructor() {
-      super();
-      /**
-       * Boolean indicating whether or not this element is checked by the end user.
-       */
-      // TODO: [v1] this can be solved when property effects are scheduled until firstUpdated
-      // this.checked = false;
-      /**
-       * Whereas 'normal' `.modelValue`s usually store a complex/typed version
-       * of a view value, choice inputs have a slightly different approach.
-       * In order to remain their Single Source of Truth characteristic, choice inputs
-       * store both the value and 'checkedness', in the format { value: 'x', checked: true }
-       * Different from the platform, this also allows to serialize the 'non checkedness',
-       * allowing to restore form state easily and inform the server about unchecked options.
-       * @type {{value:string|any,checked:boolean}}
-       */
-      this.modelValue = { value: '', checked: false };
-      // TODO: maybe disabled is more a concern of FormControl/Field?
-      /**
-       * Boolean indicating whether or not this element is disabled.
-       * @type {boolean}
-       */
-      this.disabled = false;
-
-      /**
-       * The value property of the modelValue. It provides an easy interface for storing
-       * (complex) values in the modelValue
-       */
-
-      /** @protected */
-      this._preventDuplicateLabelClick = this._preventDuplicateLabelClick.bind(this);
-      /** @protected */
-      this._toggleChecked = this._toggleChecked.bind(this);
-    }
+    this.disabled = false;
 
     /**
-     * Styles for [input=radio] and [input=checkbox] wrappers.
-     * For [role=option] extensions, please override completely
+     * The value property of the modelValue. It provides an easy interface for storing
+     * (complex) values in the modelValue
      */
-    static get styles() {
-      return [
-        // @ts-ignore [ts7-2855] TS7 rejects field access via super (the parent declares this as a field). Dot form kept deliberately: bracket access is exempt from property mangling (terser keep_quoted), which could split this property into two names. Upstream fix: declare an accessor in the parent type
-        ...(super.styles || []),
-        css`
+
+    /** @protected */
+    this._preventDuplicateLabelClick = this._preventDuplicateLabelClick.bind(this);
+    /** @protected */
+    this._toggleChecked = this._toggleChecked.bind(this);
+  }
+
+  /**
+   * Styles for [input=radio] and [input=checkbox] wrappers.
+   * For [role=option] extensions, please override completely
+   */
+  static get styles() {
+    return [
+    // @ts-ignore [ts7-2855] TS7 rejects field access via super (the parent declares this as a field). Dot form kept deliberately: bracket access is exempt from property mangling (terser keep_quoted), which could split this property into two names. Upstream fix: declare an accessor in the parent type
+    ...(super.styles || []), css`
           :host {
             display: flex;
             flex-wrap: wrap;
@@ -163,16 +170,15 @@ const ChoiceInputMixinImplementation = /** @type {ChoiceInputMixin} */ (supercla
             display: block;
             flex-basis: 100%;
           }
-        `,
-      ];
-    }
-
-    /**
-     * Template for [input=radio] and [input=checkbox] wrappers.
-     * For [role=option] extensions, please override completely
-     */
-    render() {
-      return html`
+        `];
+  }
+
+  /**
+   * Template for [input=radio] and [input=checkbox] wrappers.
+   * For [role=option] extensions, please override completely
+   */
+  render() {
+    return html`
         <slot name="input"></slot>
         <div class="choice-field__graphic-container" aria-hidden="true">
           ${this._choiceGraphicTemplate()}
@@ -185,185 +191,189 @@ const ChoiceInputMixinImplementation = /** @type {ChoiceInputMixin} */ (supercla
         </small>
         ${this._afterTemplate()}
       `;
+  }
+
+  /**
+   * @protected
+   */
+  _choiceGraphicTemplate() {
+    return nothing;
+  }
+
+  /**
+   * @protected
+   */
+  _afterTemplate() {
+    return nothing;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this._labelNode) {
+      this._labelNode.addEventListener('click', this._preventDuplicateLabelClick);
     }
-
-    /**
-     * @protected
-     */
-    _choiceGraphicTemplate() {
-      return nothing;
-    }
-
-    /**
-     * @protected
-     */
-    _afterTemplate() {
-      return nothing;
-    }
-
-    connectedCallback() {
-      super.connectedCallback();
-      if (this._labelNode) {
-        this._labelNode.addEventListener('click', this._preventDuplicateLabelClick);
-      }
-      this.addEventListener('user-input-changed', this._toggleChecked);
-    }
-
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      if (this._labelNode) {
-        this._labelNode.removeEventListener('click', this._preventDuplicateLabelClick);
-      }
-      this.removeEventListener('user-input-changed', this._toggleChecked);
-    }
-
-    /**
-     * The native platform fires an event for both the click on the label, and also
-     * the redispatched click on the native input element.
-     * This results in two click events arriving at the host, but we only want one.
-     * This method prevents the duplicate click and ensures the correct isTrusted event
-     * with the correct event.target arrives at the host.
-     * @param {Event} ev
-     * @protected
-     */
-    // eslint-disable-next-line no-unused-vars
-    _preventDuplicateLabelClick(ev) {
-      const __inputClickHandler = /** @param {Event} _ev */ _ev => {
-        _ev.stopImmediatePropagation();
-        this._inputNode.removeEventListener('click', __inputClickHandler);
-      };
-      this._inputNode.addEventListener('click', __inputClickHandler);
-    }
-
-    /**
-     * @param {Event} ev
-     * @protected
-     */
-    // eslint-disable-next-line no-unused-vars
-    _toggleChecked(ev) {
-      if (this.disabled || this.readOnly) {
-        return;
-      }
-      this._isHandlingUserInput = true;
-      this.checked = !this.checked;
-      this._isHandlingUserInput = false;
+    this.addEventListener('user-input-changed', this._toggleChecked);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._labelNode) {
+      this._labelNode.removeEventListener('click', this._preventDuplicateLabelClick);
     }
-
-    // TODO: make this less fuzzy by applying these methods in LionRadio and LionCheckbox
-    // via instanceof (or feat. detection for tree-shaking in case parentGroup not needed)
-    /**
-     * Override this in case of extending ChoiceInputMixin and requiring
-     * to sync differently with parent form group name
-     * Right now it checks tag name match where the parent form group tagname
-     * should include the child field tagname ('checkbox' is included in 'checkbox-group')
-     * @protected
-     */
-    _syncNameToParentFormGroup() {
-      // @ts-expect-error [external]: tagName should be a prop of HTMLElement
-      if (this._parentFormGroup.tagName.includes(this.tagName)) {
-        this.name = this._parentFormGroup?.name || '';
-      }
+    this.removeEventListener('user-input-changed', this._toggleChecked);
+  }
+
+  /**
+   * The native platform fires an event for both the click on the label, and also
+   * the redispatched click on the native input element.
+   * This results in two click events arriving at the host, but we only want one.
+   * This method prevents the duplicate click and ensures the correct isTrusted event
+   * with the correct event.target arrives at the host.
+   * @param {Event} ev
+   * @protected
+   */
+  // eslint-disable-next-line no-unused-vars
+  _preventDuplicateLabelClick(ev) {
+    const __inputClickHandler = /** @param {Event} _ev */_ev => {
+      _ev.stopImmediatePropagation();
+      this._inputNode.removeEventListener('click', __inputClickHandler);
+    };
+    this._inputNode.addEventListener('click', __inputClickHandler);
+  }
+
+  /**
+   * @param {Event} ev
+   * @protected
+   */
+  // eslint-disable-next-line no-unused-vars
+  _toggleChecked(ev) {
+    if (this.disabled || this.readOnly) {
+      return;
     }
-
-    /**
-     * @param {boolean} checked
-     * @private
-     */
-    __syncModelCheckedToChecked(checked) {
-      this.checked = checked;
+    this._isHandlingUserInput = true;
+    this.checked = !this.checked;
+    this._isHandlingUserInput = false;
+  }
+
+  // TODO: make this less fuzzy by applying these methods in LionRadio and LionCheckbox
+  // via instanceof (or feat. detection for tree-shaking in case parentGroup not needed)
+  /**
+   * Override this in case of extending ChoiceInputMixin and requiring
+   * to sync differently with parent form group name
+   * Right now it checks tag name match where the parent form group tagname
+   * should include the child field tagname ('checkbox' is included in 'checkbox-group')
+   * @protected
+   */
+  _syncNameToParentFormGroup() {
+    // @ts-expect-error [external]: tagName should be a prop of HTMLElement
+    if (this._parentFormGroup.tagName.includes(this.tagName)) {
+      this.name = this._parentFormGroup?.name || '';
     }
-
-    /**
-     * @param {any} checked
-     * @private
-     */
-    __syncCheckedToModel(checked) {
-      this.modelValue = { value: this.choiceValue, checked };
+  }
+
+  /**
+   * @param {boolean} checked
+   * @private
+   */
+  __syncModelCheckedToChecked(checked) {
+    this.checked = checked;
+  }
+
+  /**
+   * @param {any} checked
+   * @private
+   */
+  __syncCheckedToModel(checked) {
+    this.modelValue = {
+      value: this.choiceValue,
+      checked
+    };
+  }
+
+  /**
+   * @private
+   */
+  __syncCheckedToInputElement() {
+    // ._inputNode might not be available yet(slot content)
+    // or at all (no reliance on platform construct, in case of [role=option])
+    if (this._inputNode) {
+      /** @type {HTMLInputElement} */
+      this._inputNode.checked = this.checked ?? false;
     }
-
-    /**
-     * @private
-     */
-    __syncCheckedToInputElement() {
-      // ._inputNode might not be available yet(slot content)
-      // or at all (no reliance on platform construct, in case of [role=option])
-      if (this._inputNode) {
-        /** @type {HTMLInputElement} */
-        (this._inputNode).checked = this.checked ?? false;
-      }
+  }
+
+  /**
+   * @override
+   * This method is overridden from FormatMixin. It originally fired the normalizing
+   * 'user-input-changed' event after listening to the native 'input' event.
+   * However on Chrome on Mac whenever you use the keyboard
+   * it fires the input AND change event. Other Browsers only fires the change event.
+   * Therefore we disable the input event here.
+   * @protected
+   */
+  _proxyInputEvent() {}
+
+  /**
+   * @override
+   * hasChanged is designed for async (updated) callback, also check for sync
+   * (requestUpdate) callback
+   * @param {{ modelValue:unknown }} newV
+   * @param {{ modelValue:unknown }} [old]
+   * @protected
+   */
+  _onModelValueChanged({
+    modelValue
+  }, old) {
+    let _old;
+    if (old && old.modelValue) {
+      _old = old.modelValue;
     }
-
-    /**
-     * @override
-     * This method is overridden from FormatMixin. It originally fired the normalizing
-     * 'user-input-changed' event after listening to the native 'input' event.
-     * However on Chrome on Mac whenever you use the keyboard
-     * it fires the input AND change event. Other Browsers only fires the change event.
-     * Therefore we disable the input event here.
-     * @protected
-     */
-    _proxyInputEvent() {}
-
-    /**
-     * @override
-     * hasChanged is designed for async (updated) callback, also check for sync
-     * (requestUpdate) callback
-     * @param {{ modelValue:unknown }} newV
-     * @param {{ modelValue:unknown }} [old]
-     * @protected
-     */
-    _onModelValueChanged({ modelValue }, old) {
-      let _old;
-      if (old && old.modelValue) {
-        _old = old.modelValue;
-      }
-      // @ts-expect-error [external]: lit private property
-      if (this.constructor.elementProperties.get('modelValue').hasChanged(modelValue, _old)) {
-        super._onModelValueChanged({ modelValue });
-      }
-    }
-
-    /**
-     * @override
-     * Overridden from FormatMixin, since a different modelValue is used for choice inputs.
-     * Sets modelValue based on checked state (instead of value), so that changes will be detected.
-     */
-    parser() {
-      return this.modelValue;
-    }
-
-    /**
-     * @override Overridden from FormatMixin, since a different modelValue is used for choice inputs.
-     * @param {ChoiceInputModelValue } modelValue
-     */
-    formatter(modelValue) {
-      return modelValue && modelValue.value !== undefined ? modelValue.value : modelValue;
+    // @ts-expect-error [external]: lit private property
+    if (this.constructor.elementProperties.get('modelValue').hasChanged(modelValue, _old)) {
+      super._onModelValueChanged({
+        modelValue
+      });
     }
-
-    /**
-     * @override
-     * Overridden from LionField, since the modelValue should not be cleared.
-     */
-    // @ts-expect-error FIXME: @override gives error because LionField is not superclass type, this mixin should only allow LionField extensions
-    clear() {
-      this.checked = false;
-    }
-
-    /**
-     * Used for required validator.
-     * @protected
-     */
-    _isEmpty() {
-      return !this.checked;
-    }
-
-    /**
-     * @override
-     * Overridden from FormatMixin, since a different modelValue is used for choice inputs.
-     * Synchronization from user input is already arranged in this Mixin.
-     * @protected
-     */
-    _syncValueUpwards() {}
-  });
-
+  }
+
+  /**
+   * @override
+   * Overridden from FormatMixin, since a different modelValue is used for choice inputs.
+   * Sets modelValue based on checked state (instead of value), so that changes will be detected.
+   */
+  parser() {
+    return this.modelValue;
+  }
+
+  /**
+   * @override Overridden from FormatMixin, since a different modelValue is used for choice inputs.
+   * @param {ChoiceInputModelValue } modelValue
+   */
+  formatter(modelValue) {
+    return modelValue && modelValue.value !== undefined ? modelValue.value : modelValue;
+  }
+
+  /**
+   * @override
+   * Overridden from LionField, since the modelValue should not be cleared.
+   */
+  // @ts-expect-error FIXME: @override gives error because LionField is not superclass type, this mixin should only allow LionField extensions
+  clear() {
+    this.checked = false;
+  }
+
+  /**
+   * Used for required validator.
+   * @protected
+   */
+  _isEmpty() {
+    return !this.checked;
+  }
+
+  /**
+   * @override
+   * Overridden from FormatMixin, since a different modelValue is used for choice inputs.
+   * Synchronization from user input is already arranged in this Mixin.
+   * @protected
+   */
+  _syncValueUpwards() {}
+};
 export const ChoiceInputMixin = dedupeMixin(ChoiceInputMixinImplementation);