fix no translation error (#8)

* fix no translation error

* prettier

docs/pages/resources/changelog.md

@@ -20,6 +20,11 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 - Removed `default` from `<wa-button>` and made `neutral` the new default
 - Removed the `circle` modifier from `<wa-button>` because button's no longer have a set height
 
+## Next
+
+- Fixed a bug with bundled components using CDN builds not having translations on initial connect [#1696]
+- Fixed a bug where the `"sl-change"` event would always fire simultaneously with `"sl-input"` event in `<sl-color-picker>`. The `<sl-change>` event now only fires when a user stops dragging a slider or stops dragging on the color canvas. [#1689]
+
 ## 2.11.2
 
 - Fixed a bug in `<sl-carousel>` component that caused an error to be thrown when rendered with Lit [#1684]

src/components/color-picker/color-picker.component.ts

@@ -243,7 +243,8 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
     const container = this.shadowRoot!.querySelector<HTMLElement>('.color-picker__slider.color-picker__alpha')!;
     const handle = container.querySelector<HTMLElement>('.color-picker__slider-handle')!;
     const { width } = container.getBoundingClientRect();
-    let oldValue = this.value;
+    let initialValue = this.value;
+    let currentValue = this.value;
 
     handle.focus();
     event.preventDefault();
@@ -253,12 +254,17 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
         this.alpha = clamp((x / width) * 100, 0, 100);
         this.syncValues();
 
-        if (this.value !== oldValue) {
-          oldValue = this.value;
-          this.emit('wa-change');
+        if (this.value !== currentValue) {
+          currentValue = this.value;
           this.emit('wa-input');
         }
       },
+      onStop: () => {
+        if (this.value !== initialValue) {
+          initialValue = this.value;
+          this.emit('wa-change');
+        }
+      },
       initialEvent: event
     });
   }
@@ -267,7 +273,8 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
     const container = this.shadowRoot!.querySelector<HTMLElement>('.color-picker__slider.color-picker__hue')!;
     const handle = container.querySelector<HTMLElement>('.color-picker__slider-handle')!;
     const { width } = container.getBoundingClientRect();
-    let oldValue = this.value;
+    let initialValue = this.value;
+    let currentValue = this.value;
 
     handle.focus();
     event.preventDefault();
@@ -277,12 +284,17 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
         this.hue = clamp((x / width) * 360, 0, 360);
         this.syncValues();
 
-        if (this.value !== oldValue) {
-          oldValue = this.value;
-          this.emit('wa-change');
+        if (this.value !== currentValue) {
+          currentValue = this.value;
           this.emit('wa-input');
         }
       },
+      onStop: () => {
+        if (this.value !== initialValue) {
+          initialValue = this.value;
+          this.emit('wa-change');
+        }
+      },
       initialEvent: event
     });
   }
@@ -291,7 +303,8 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
     const grid = this.shadowRoot!.querySelector<HTMLElement>('.color-picker__grid')!;
     const handle = grid.querySelector<HTMLElement>('.color-picker__grid-handle')!;
     const { width, height } = grid.getBoundingClientRect();
-    let oldValue = this.value;
+    let initialValue = this.value;
+    let currentValue = this.value;
 
     handle.focus();
     event.preventDefault();
@@ -304,13 +317,18 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
         this.brightness = clamp(100 - (y / height) * 100, 0, 100);
         this.syncValues();
 
-        if (this.value !== oldValue) {
-          oldValue = this.value;
-          this.emit('wa-change');
+        if (this.value !== currentValue) {
+          currentValue = this.value;
           this.emit('wa-input');
         }
       },
-      onStop: () => (this.isDraggingGridHandle = false),
+      onStop: () => {
+        this.isDraggingGridHandle = false;
+        if (this.value !== initialValue) {
+          initialValue = this.value;
+          this.emit('wa-change');
+        }
+      },
       initialEvent: event
     });
   }

src/components/color-picker/color-picker.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/webawesome.js';
 import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
-import { clickOnElement } from '../../internal/test.js';
+import { clickOnElement, dragElement } from '../../internal/test.js';
 import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import { sendKeys } from '@web/test-runner-commands';
 import { serialize } from '../../utilities/form.js';
@@ -31,11 +31,21 @@ describe('<wa-color-picker>', () => {
 
       await clickOnElement(trigger); // open the dropdown
       await aTimeout(200); // wait for the dropdown to open
-      await clickOnElement(grid); // click on the grid
       await el.updateComplete;
 
+      // Simulate a drag event. "sl-change" should not fire until we stop dragging.
+      await dragElement(grid, 2, 0, {
+        afterMouseDown: () => {
+          expect(changeHandler).to.have.not.been.called;
+          expect(inputHandler).to.have.been.calledOnce;
+        },
+        afterMouseMove: () => {
+          expect(inputHandler).to.have.been.calledTwice;
+        }
+      });
+
       expect(changeHandler).to.have.been.calledOnce;
-      expect(inputHandler).to.have.been.calledOnce;
+      expect(inputHandler).to.have.been.calledTwice;
     });
 
     it('should emit wa-change and wa-input when the hue slider is moved', async () => {
@@ -50,10 +60,23 @@ describe('<wa-color-picker>', () => {
 
       await clickOnElement(trigger); // open the dropdown
       await aTimeout(200); // wait for the dropdown to open
-      await clickOnElement(slider); // click on the hue slider
+
+      // Simulate a drag event. "wa-change" should not fire until we stop dragging.
+      await dragElement(slider, 20, 0, {
+        afterMouseDown: () => {
+          expect(changeHandler).to.have.not.been.called;
+          expect(inputHandler).to.have.been.calledOnce;
+        },
+        afterMouseMove: () => {
+          // It's not twice because you can't change the hue of white!
+          expect(inputHandler).to.have.been.calledOnce;
+        }
+      });
+
       await el.updateComplete;
 
       expect(changeHandler).to.have.been.calledOnce;
+      // It's not twice because you can't change the hue of white!
       expect(inputHandler).to.have.been.calledOnce;
     });
 
@@ -69,11 +92,22 @@ describe('<wa-color-picker>', () => {
 
       await clickOnElement(trigger); // open the dropdown
       await aTimeout(200); // wait for the dropdown to open
-      await clickOnElement(slider); // click on the opacity slider
+
+      // Simulate a drag event. "wa-change" should not fire until we stop dragging.
+      await dragElement(slider, 2, 0, {
+        afterMouseDown: () => {
+          expect(changeHandler).to.have.not.been.called;
+          expect(inputHandler).to.have.been.calledOnce;
+        },
+        afterMouseMove: () => {
+          expect(inputHandler).to.have.been.calledTwice;
+        }
+      });
+
       await el.updateComplete;
 
       expect(changeHandler).to.have.been.calledOnce;
-      expect(inputHandler).to.have.been.calledOnce;
+      expect(inputHandler).to.have.been.calledTwice;
     });
 
     it('should emit wa-change and wa-input when toggling the format', async () => {

src/internal/test.ts

@@ -73,11 +73,17 @@ export async function dragElement(
   /** The horizontal distance to drag in pixels */
   deltaX = 0,
   /** The vertical distance to drag in pixels */
-  deltaY = 0
+  deltaY = 0,
+  callbacks: {
+    afterMouseDown?: () => void | Promise<void>;
+    afterMouseMove?: () => void | Promise<void>;
+  } = {}
 ): Promise<void> {
   await moveMouseOnElement(el);
   await sendMouse({ type: 'down' });
+  await callbacks.afterMouseDown?.();
   const { clickX, clickY } = determineMousePosition(el, 'center', deltaX, deltaY);
   await sendMouse({ type: 'move', position: [clickX, clickY] });
+  await callbacks.afterMouseMove?.();
   await sendMouse({ type: 'up' });
 }

src/utilities/localize.ts

@@ -1,9 +1,17 @@
-import '../translations/en.js';
-import { LocalizeController as DefaultLocalizationController } from '@shoelace-style/localize'; // Register English as the default/fallback language
+import { LocalizeController as DefaultLocalizationController, registerTranslation } from '@shoelace-style/localize';
+import en from '../translations/en.js'; // Register English as the default/fallback language
 import type { Translation as DefaultTranslation } from '@shoelace-style/localize';
 
 // Extend the controller and apply our own translation interface for better typings
-export class LocalizeController extends DefaultLocalizationController<Translation> {}
+export class LocalizeController extends DefaultLocalizationController<Translation> {
+  // Technicallly '../translations/en.js' is supposed to work via side-effects. However, by some mystery sometimes the
+  // translations don't get bundled as expected resulting in `no translation found` errors.
+  // This is basically some extra assurance that our translations get registered prior to our localizer connecting in a component
+  // and we don't rely on implicit import ordering.
+  static {
+    registerTranslation(en);
+  }
+}
 
 // Export functions from the localize lib so we have one central place to import them from
 export { registerTranslation } from '@shoelace-style/localize';