Fix/reuse UUID missing parent callback disabled property (#2090)

* refactor: reuse uuid function from the core

* fix: invoke parent class callback

* fix: do not run disabled property reflection unless it was part of the changeset

.changeset/khaki-months-ring.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+do not run disabled property reflection unless it was part of the changeset in LionSwitchButton

.changeset/soft-wombats-dress.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+reuse uuid function from the core in LionButton and LionInputDatepicker

.changeset/sweet-zebras-judge.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+invoke parent class updated callback in LionCollapsible, LionDrawer and LionSwitchButton

packages/ui/components/button/src/LionButton.js

@@ -1,5 +1,5 @@
 import { html, LitElement, css } from 'lit';
-import { browserDetection, DisabledWithTabIndexMixin } from '@lion/ui/core.js';
+import { browserDetection, DisabledWithTabIndexMixin, uuid } from '@lion/ui/core.js';
 
 const isKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) => e.key === ' ' || e.key === 'Enter';
 const isSpaceKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) => e.key === ' ';
@@ -124,7 +124,7 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
     this.type = 'button';
     this.active = false;
 
-    this._buttonId = `button-${Math.random().toString(36).substr(2, 10)}`;
+    this._buttonId = uuid('button');
     if (browserDetection.isIE11) {
       this.updateComplete.then(() => {
         if (!this.hasAttribute('aria-labelledby')) {

packages/ui/components/collapsible/src/LionCollapsible.js

@@ -68,6 +68,7 @@ export class LionCollapsible extends LitElement {
    * @param {import('lit').PropertyValues } changedProperties
    */
   updated(changedProperties) {
+    super.updated(changedProperties);
     if (changedProperties.has('opened')) {
       this.__openedChanged();
     }

packages/ui/components/drawer/src/LionDrawer.js

@@ -53,6 +53,7 @@ export class LionDrawer extends LionCollapsible {
    * @param {import('lit').PropertyValues } changedProperties
    */
   updated(changedProperties) {
+    super.updated(changedProperties);
     if (changedProperties.has('opened')) {
       this._openedChanged();
     }

packages/ui/components/input-datepicker/src/LionInputDatepicker.js

@@ -1,5 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { LionCalendar } from '@lion/ui/calendar.js';
+import { uuid } from '@lion/ui/core.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { html, css } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -149,7 +150,7 @@ export class LionInputDatepicker extends ScopedElementsMixin(
   constructor() {
     super();
     /** @private */
-    this.__invokerId = this.__createUniqueIdForA11y();
+    this.__invokerId = uuid(this.localName);
     /** @protected */
     this._calendarInvokerSlot = 'suffix';
 
@@ -169,11 +170,6 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     this._onCalendarUserSelectedChanged = this._onCalendarUserSelectedChanged.bind(this);
   }
 
-  /** @private */
-  __createUniqueIdForA11y() {
-    return `${this.localName}-${Math.random().toString(36).substr(2, 10)}`;
-  }
-
   /**
    * @param {string} [name]
    * @param {unknown} [oldValue]

packages/ui/components/switch/src/LionSwitch.js

@@ -100,8 +100,10 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
   /** @param {import('lit').PropertyValues } changedProperties */
   updated(changedProperties) {
     super.updated(changedProperties);
+    if (changedProperties.has('disabled')) {
       this._syncButtonSwitch();
     }
+  }
 
   /**
    * Override this function from ChoiceInputMixin.

packages/ui/components/switch/src/LionSwitchButton.js

@@ -142,6 +142,7 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
 
   /** @param {import('lit').PropertyValues } changedProperties */
   updated(changedProperties) {
+    super.updated(changedProperties);
     if (changedProperties.has('disabled')) {
       this.setAttribute('aria-disabled', `${this.disabled}`); // create mixin if we need it in more places
     }