fix: all event names should be prefixed with v

packages/angular/src/directives/proxies.ts

@@ -53,19 +53,19 @@ export declare interface VimeCaptions extends Components.VimeCaptions {}
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['controlsHeight', 'hidden'],
-  outputs: ['trackChange', 'cuesChange']
+  outputs: ['vTrackChange', 'vCuesChange']
 })
 export class VimeCaptions {
   /** Emitted when the current track changes. */
-  trackChange!: ICaptions['trackChange'];
+  vTrackChange!: ICaptions['vTrackChange'];
   /** Emitted when the active cues change. A cue is active when
 `currentTime >= cue.startTime && currentTime <= cue.endTime`. */
-  cuesChange!: ICaptions['cuesChange'];
+  vCuesChange!: ICaptions['vCuesChange'];
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['trackChange', 'cuesChange']);
+    proxyOutputs(this, this.el, ['vTrackChange', 'vCuesChange']);
   }
 }
 
@@ -98,16 +98,16 @@ export declare interface VimeControl extends Components.VimeControl {}
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['expanded', 'hidden', 'identifier', 'keys', 'label', 'menu', 'pressed', 'scale'],
-  outputs: ['interactionChange']
+  outputs: ['vInteractionChange']
 })
 export class VimeControl {
   /** Emitted when the user is interacting with the control by focusing, touching or hovering on it. */
-  interactionChange!: IControl['interactionChange'];
+  vInteractionChange!: IControl['vInteractionChange'];
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['interactionChange']);
+    proxyOutputs(this, this.el, ['vInteractionChange']);
   }
 }
 
@@ -284,21 +284,21 @@ export declare interface VimeEmbed extends Components.VimeEmbed {}
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['decoder', 'embedSrc', 'mediaTitle', 'origin', 'params', 'preconnections'],
-  outputs: ['embedSrcChange', 'embedMessage', 'embedLoaded']
+  outputs: ['vEmbedSrcChange', 'vEmbedMessage', 'vEmbedLoaded']
 })
 export class VimeEmbed {
   /** Emitted when the `embedSrc` or `params` props change. The payload contains the `params`
 serialized into a query string and appended to `embedSrc`. */
-  embedSrcChange!: IEmbed['embedSrcChange'];
+  vEmbedSrcChange!: IEmbed['vEmbedSrcChange'];
   /** Emitted when a new message is received from the embedded player via `postMessage`. */
-  embedMessage!: IEmbed['embedMessage'];
+  vEmbedMessage!: IEmbed['vEmbedMessage'];
   /** Emitted when the embedded player and any new media has loaded. */
-  embedLoaded!: IEmbed['embedLoaded'];
+  vEmbedLoaded!: IEmbed['vEmbedLoaded'];
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['embedSrcChange', 'embedMessage', 'embedLoaded']);
+    proxyOutputs(this, this.el, ['vEmbedSrcChange', 'vEmbedMessage', 'vEmbedLoaded']);
   }
 }
 
@@ -461,22 +461,22 @@ export declare interface VimeMenu extends Components.VimeMenu {}
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['active', 'controller', 'identifier'],
-  outputs: ['open', 'close', 'menuItemsChange', 'focusedMenuItem']
+  outputs: ['vOpen', 'vClose', 'vMenuItemsChange', 'vFocusMenuItemChange']
 })
 export class VimeMenu {
   /** Emitted when the menu is open/active. */
-  open!: IMenu['open'];
+  vOpen!: IMenu['vOpen'];
   /** Emitted when the menu has closed/is not active. */
-  close!: IMenu['close'];
+  vClose!: IMenu['vClose'];
   /** Emitted when the menu items present changes. */
-  menuItemsChange!: IMenu['menuItemsChange'];
+  vMenuItemsChange!: IMenu['vMenuItemsChange'];
   /** Emitted when the currently focused menu item changes. */
-  focusedMenuItem!: IMenu['focusedMenuItem'];
+  vFocusMenuItemChange!: IMenu['vFocusMenuItemChange'];
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['open', 'close', 'menuItemsChange', 'focusedMenuItem']);
+    proxyOutputs(this, this.el, ['vOpen', 'vClose', 'vMenuItemsChange', 'vFocusMenuItemChange']);
   }
 }
 
@@ -509,16 +509,16 @@ export declare interface VimeMenuRadio extends Components.VimeMenuRadio {}
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['badge', 'checked', 'checkedIcon', 'label', 'value'],
-  outputs: ['check']
+  outputs: ['vCheck']
 })
 export class VimeMenuRadio {
   /** Emitted when the radio button is selected. */
-  check!: IMenuRadio['check'];
+  vCheck!: IMenuRadio['vCheck'];
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['check']);
+    proxyOutputs(this, this.el, ['vCheck']);
   }
 }
 
@@ -532,16 +532,16 @@ export declare interface VimeMenuRadioGroup extends Components.VimeMenuRadioGrou
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['value'],
-  outputs: ['check']
+  outputs: ['vCheck']
 })
 export class VimeMenuRadioGroup {
   /** Emitted when a new radio button is selected for this group. */
-  check!: IMenuRadioGroup['check'];
+  vCheck!: IMenuRadioGroup['vCheck'];
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['check']);
+    proxyOutputs(this, this.el, ['vCheck']);
   }
 }
 
@@ -705,20 +705,20 @@ export declare interface VimePoster extends Components.VimePoster {}
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['fit'],
-  outputs: ['loaded', 'willShow', 'willHide']
+  outputs: ['vLoaded', 'vWillShow', 'vWillHide']
 })
 export class VimePoster {
   /** Emitted when the poster has loaded. */
-  loaded!: IPoster['loaded'];
+  vLoaded!: IPoster['vLoaded'];
   /** Emitted when the poster will be shown. */
-  willShow!: IPoster['willShow'];
+  vWillShow!: IPoster['vWillShow'];
   /** Emitted when the poster will be hidden. */
-  willHide!: IPoster['willHide'];
+  vWillHide!: IPoster['vWillHide'];
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['loaded', 'willShow', 'willHide']);
+    proxyOutputs(this, this.el, ['vLoaded', 'vWillShow', 'vWillHide']);
   }
 }
 
@@ -809,16 +809,16 @@ export declare interface VimeSlider extends Components.VimeSlider {}
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['label', 'max', 'min', 'step', 'value', 'valueText'],
-  outputs: ['valueChange']
+  outputs: ['vValueChange']
 })
 export class VimeSlider {
   /** Emitted when the value of the underlying `input` field changes. */
-  valueChange!: ISlider['valueChange'];
+  vValueChange!: ISlider['vValueChange'];
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['valueChange']);
+    proxyOutputs(this, this.el, ['vValueChange']);
   }
 }
 
@@ -829,18 +829,18 @@ export declare interface VimeSpinner extends Components.VimeSpinner {}
   selector: 'vime-spinner',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  outputs: ['willShow', 'willHide']
+  outputs: ['vWillShow', 'vWillHide']
 })
 export class VimeSpinner {
   /** Emitted when the spinner will be shown. */
-  willShow!: ISpinner['willShow'];
+  vWillShow!: ISpinner['vWillShow'];
   /** Emitted when the spinner will be hidden. */
-  willHide!: ISpinner['willHide'];
+  vWillHide!: ISpinner['vWillHide'];
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['willShow', 'willHide']);
+    proxyOutputs(this, this.el, ['vWillShow', 'vWillHide']);
   }
 }
 

packages/core/src/components/core/embed/embed.tsx

@@ -12,7 +12,6 @@ import {
   Watch,
 } from '@stencil/core';
 import { isString } from '../../../utils/unit';
-import { EmbedEvent, EmbedEventPayload } from './EmbedEvent';
 import { appendParamsToURL, Params, preconnect } from '../../../utils/network';
 
 let idCount = 0;
@@ -61,7 +60,7 @@ export class Embed implements ComponentInterface {
       if (preconnect(this.srcWithParams)) connected.add(this.embedSrc);
     }
 
-    this.embedSrcChange.emit(this.srcWithParams);
+    this.vEmbedSrcChange.emit(this.srcWithParams);
   }
 
   /**
@@ -85,23 +84,17 @@ export class Embed implements ComponentInterface {
    * Emitted when the `embedSrc` or `params` props change. The payload contains the `params`
    * serialized into a query string and appended to `embedSrc`.
    */
-  @Event({
-    bubbles: false,
-  }) embedSrcChange!: EventEmitter<EmbedEventPayload[EmbedEvent.SrcChange]>;
+  @Event({ bubbles: false, }) vEmbedSrcChange!: EventEmitter<string>;
 
   /**
    * Emitted when a new message is received from the embedded player via `postMessage`.
    */
-  @Event({
-    bubbles: false,
-  }) embedMessage!: EventEmitter<EmbedEventPayload[EmbedEvent.Message]>;
+  @Event({ bubbles: false, }) vEmbedMessage!: EventEmitter<any>;
 
   /**
    * Emitted when the embedded player and any new media has loaded.
    */
-  @Event({
-    bubbles: false,
-  }) embedLoaded!: EventEmitter<EmbedEventPayload[EmbedEvent.Loaded]>;
+  @Event({ bubbles: false, }) vEmbedLoaded!: EventEmitter<void>;
 
   @Watch('preconnections')
   preconnectionsChange() {
@@ -130,7 +123,7 @@ export class Embed implements ComponentInterface {
     if (!originMatches) return;
 
     const message = this.decoder?.(e.data) ?? e.data;
-    if (message) this.embedMessage.emit(message);
+    if (message) this.vEmbedMessage.emit(message);
   }
 
   /**
@@ -142,7 +135,7 @@ export class Embed implements ComponentInterface {
   }
 
   private onLoad() {
-    this.embedLoaded.emit();
+    this.vEmbedLoaded.emit();
   }
 
   private genIframeId() {

packages/core/src/components/core/embed/readme.md

@@ -37,11 +37,11 @@ Embeds an external media player and enables interacting with it via `postMessage
 
 ## Events
 
-| Event            | Description                                                                                                                                        | Type                  |
-| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
-| `embedLoaded`    | Emitted when the embedded player and any new media has loaded.                                                                                     | `CustomEvent<void>`   |
-| `embedMessage`   | Emitted when a new message is received from the embedded player via `postMessage`.                                                                 | `CustomEvent<any>`    |
-| `embedSrcChange` | Emitted when the `embedSrc` or `params` props change. The payload contains the `params` serialized into a query string and appended to `embedSrc`. | `CustomEvent<string>` |
+| Event             | Description                                                                                                                                        | Type                  |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
+| `vEmbedLoaded`    | Emitted when the embedded player and any new media has loaded.                                                                                     | `CustomEvent<void>`   |
+| `vEmbedMessage`   | Emitted when a new message is received from the embedded player via `postMessage`.                                                                 | `CustomEvent<any>`    |
+| `vEmbedSrcChange` | Emitted when the `embedSrc` or `params` props change. The payload contains the `params` serialized into a query string and appended to `embedSrc`. | `CustomEvent<string>` |
 
 
 ## Methods

packages/core/src/components/core/embed/tests/embed.spec.ts

@@ -1,6 +1,5 @@
 import { newSpecPage, SpecPage } from '@stencil/core/testing';
 import { Embed } from '../embed';
-import { EmbedEvent } from '../EmbedEvent';
 
 let page: SpecPage;
 
@@ -29,7 +28,7 @@ it('should increment iframe id', async () => {
 
 it('should fire event when src/params change', async () => {
   const cb = jest.fn();
-  page.root!.addEventListener(EmbedEvent.SrcChange, cb);
+  page.root!.addEventListener('vEmbedSrcChange', cb);
   page.rootInstance!.embedSrc = 'http://apples.com';
   await page.waitForChanges();
   expect(cb).toHaveBeenCalled();

packages/core/src/components/providers/dailymotion/dailymotion.tsx

@@ -336,8 +336,8 @@ export class Dailymotion implements MediaProvider<HTMLVimeEmbedElement> {
         params={this.buildParams()}
         decoder={decodeQueryString}
         preconnections={this.getPreconnections()}
-        onEmbedMessage={this.onEmbedMessage.bind(this)}
-        onEmbedSrcChange={this.onEmbedSrcChange.bind(this)}
+        onVEmbedMessage={this.onEmbedMessage.bind(this)}
+        onVEmbedSrcChange={this.onEmbedSrcChange.bind(this)}
         ref={(el: any) => { this.embed = el; }}
       />
     );

packages/core/src/components/providers/vimeo/vimeo.tsx

@@ -410,8 +410,8 @@ export class Vimeo implements MediaProvider<HTMLVimeEmbedElement> {
         params={this.buildParams()}
         decoder={decodeJSON}
         preconnections={this.getPreconnections()}
-        onEmbedMessage={this.onEmbedMessage.bind(this)}
-        onEmbedSrcChange={this.onEmbedSrcChange.bind(this)}
+        onVEmbedMessage={this.onEmbedMessage.bind(this)}
+        onVEmbedSrcChange={this.onEmbedSrcChange.bind(this)}
         ref={(el: any) => { this.embed = el; }}
       />
     );

packages/core/src/components/providers/youtube/youtube.tsx

@@ -356,9 +356,9 @@ export class YouTube implements MediaProvider<HTMLVimeEmbedElement> {
         params={this.buildParams()}
         decoder={decodeJSON}
         preconnections={this.getPreconnections()}
-        onEmbedLoaded={this.onEmbedLoaded.bind(this)}
-        onEmbedMessage={this.onEmbedMessage.bind(this)}
-        onEmbedSrcChange={this.onEmbedSrcChange.bind(this)}
+        onVEmbedLoaded={this.onEmbedLoaded.bind(this)}
+        onVEmbedMessage={this.onEmbedMessage.bind(this)}
+        onVEmbedSrcChange={this.onEmbedSrcChange.bind(this)}
         ref={(el: any) => { this.embed = el; }}
       />
     );

packages/core/src/components/ui/captions/captions.tsx

@@ -24,14 +24,14 @@ export class Captions {
 
   @Watch('activeTrack')
   onActiveTrackChange() {
-    this.trackChange.emit(this.activeTrack);
+    this.vTrackChange.emit(this.activeTrack);
   }
 
   @State() activeCues: TextTrackCue[] = [];
 
   @Watch('activeCues')
   onActiveCuesChange() {
-    this.cuesChange.emit(this.activeCues);
+    this.vCuesChange.emit(this.activeCues);
   }
 
   /**
@@ -68,13 +68,13 @@ export class Captions {
   /**
    * Emitted when the current track changes.
    */
-  @Event({ bubbles: false }) trackChange!: EventEmitter<TextTrack | undefined>;
+  @Event({ bubbles: false }) vTrackChange!: EventEmitter<TextTrack | undefined>;
 
   /**
    * Emitted when the active cues change. A cue is active when
    * `currentTime >= cue.startTime && currentTime <= cue.endTime`.
    */
-  @Event({ bubbles: false }) cuesChange!: EventEmitter<TextTrackCue[]>;
+  @Event({ bubbles: false }) vCuesChange!: EventEmitter<TextTrackCue[]>;
 
   disconnectedCallback() {
     this.cleanup();

packages/core/src/components/ui/captions/readme.md

@@ -33,10 +33,10 @@ to be used in combination with the native HTML5 player controls.
 
 ## Events
 
-| Event         | Description                                                                                                             | Type                                  |
-| ------------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
-| `cuesChange`  | Emitted when the active cues change. A cue is active when `currentTime >= cue.startTime && currentTime <= cue.endTime`. | `CustomEvent<TextTrackCue[]>`         |
-| `trackChange` | Emitted when the current track changes.                                                                                 | `CustomEvent<TextTrack \| undefined>` |
+| Event          | Description                                                                                                             | Type                                  |
+| -------------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
+| `vCuesChange`  | Emitted when the active cues change. A cue is active when `currentTime >= cue.startTime && currentTime <= cue.endTime`. | `CustomEvent<TextTrackCue[]>`         |
+| `vTrackChange` | Emitted when the current track changes.                                                                                 | `CustomEvent<TextTrack \| undefined>` |
 
 
 ## CSS Custom Properties