Pass events to parent component

Author: drwpow

src/components.d.ts

@@ -16,23 +16,11 @@ import {
 } from 'types/Service';
 import {
   Option,
-  Value,
 } from 'types/Select';
 
 
 export namespace Components {
 
-  interface CustomPlanFeature {
-    'feature': Catalog.ExpandedFeature;
-    'planLabel': string;
-    'selectedValue': string;
-  }
-  interface CustomPlanFeatureAttributes extends StencilHTMLAttributes {
-    'feature'?: Catalog.ExpandedFeature;
-    'planLabel'?: string;
-    'selectedValue'?: string;
-  }
-
   interface FeaturedService {
     'logo': string;
     'name': string;
@@ -167,52 +155,53 @@ export namespace Components {
   }
 
   interface MfSelect {
+    'defaultValue'?: string;
     'name': string;
-    'onChange': (e: UIEvent) => void;
     'options': Option[];
     'required'?: boolean;
-    'selectedValue'?: Value;
   }
   interface MfSelectAttributes extends StencilHTMLAttributes {
+    'defaultValue'?: string;
     'name'?: string;
-    'onChange'?: (e: UIEvent) => void;
+    'onOnInputChange'?: (event: CustomEvent) => void;
     'options'?: Option[];
     'required'?: boolean;
-    'selectedValue'?: Value;
   }
 
   interface MfSlider {
+    'defaultValue'?: number;
     'error'?: string;
     'increment': number;
     'max': number;
     'min': number;
     'name': string;
-    'onChange': (e: Event) => void;
-    'selectedValue': number;
     'suffix': string;
   }
   interface MfSliderAttributes extends StencilHTMLAttributes {
+    'defaultValue'?: number;
     'error'?: string;
     'increment'?: number;
     'max'?: number;
     'min'?: number;
     'name'?: string;
-    'onChange'?: (e: Event) => void;
-    'selectedValue'?: number;
+    'onOnInputChange'?: (event: CustomEvent) => void;
     'suffix'?: string;
   }
 
   interface MfToggle {
     'ariaLabelledby'?: string;
+    'defaultValue'?: boolean;
     'disabled'?: boolean;
     'label'?: string;
     'name': string;
   }
   interface MfToggleAttributes extends StencilHTMLAttributes {
     'ariaLabelledby'?: string;
+    'defaultValue'?: boolean;
     'disabled'?: boolean;
     'label'?: string;
     'name'?: string;
+    'onOnInputChange'?: (event: CustomEvent) => void;
   }
 
   interface PlanDetails {
@@ -291,7 +280,6 @@ export namespace Components {
 
 declare global {
   interface StencilElementInterfaces {
-    'CustomPlanFeature': Components.CustomPlanFeature;
     'FeaturedService': Components.FeaturedService;
     'ImageGallery': Components.ImageGallery;
     'LinkButton': Components.LinkButton;
@@ -317,7 +305,6 @@ declare global {
   }
 
   interface StencilIntrinsicElements {
-    'custom-plan-feature': Components.CustomPlanFeatureAttributes;
     'featured-service': Components.FeaturedServiceAttributes;
     'image-gallery': Components.ImageGalleryAttributes;
     'link-button': Components.LinkButtonAttributes;
@@ -343,12 +330,6 @@ declare global {
   }
 
 
-  interface HTMLCustomPlanFeatureElement extends Components.CustomPlanFeature, HTMLStencilElement {}
-  var HTMLCustomPlanFeatureElement: {
-    prototype: HTMLCustomPlanFeatureElement;
-    new (): HTMLCustomPlanFeatureElement;
-  };
-
   interface HTMLFeaturedServiceElement extends Components.FeaturedService, HTMLStencilElement {}
   var HTMLFeaturedServiceElement: {
     prototype: HTMLFeaturedServiceElement;
@@ -482,7 +463,6 @@ declare global {
   };
 
   interface HTMLElementTagNameMap {
-    'custom-plan-feature': HTMLCustomPlanFeatureElement
     'featured-service': HTMLFeaturedServiceElement
     'image-gallery': HTMLImageGalleryElement
     'link-button': HTMLLinkButtonElement
@@ -508,7 +488,6 @@ declare global {
   }
 
   interface ElementTagNameMap {
-    'custom-plan-feature': HTMLCustomPlanFeatureElement;
     'featured-service': HTMLFeaturedServiceElement;
     'image-gallery': HTMLImageGalleryElement;
     'link-button': HTMLLinkButtonElement;

src/components/custom-plan-feature/custom-plan-feature.tsx

@@ -1,31 +1,32 @@
-import { Component, Prop, Event, EventEmitter } from '@stencil/core';
-import { Option, Value } from 'types/Select';
+import { Component, Prop, Event, EventEmitter, Watch } from '@stencil/core';
+import { Option } from 'types/Select';
 
 @Component({
   tag: 'mf-select',
   styleUrl: 'mf-select.css',
   scoped: true,
 })
 export class MfSelect {
-  @Prop() eventName?: string;
+  @Prop() defaultValue?: string;
   @Prop() name: string;
   @Prop() options: Option[] = [];
   @Prop() required?: boolean;
-  @Prop() selectedValue?: Value;
-  @Event({ eventName: this.eventName }) onChange: EventEmitter;
-
-  private onChangeHandler(e: Event) {
-    console.log('changed');
-    if (!e.target || !this.eventName) return;
-    const el = e.target as HTMLSelectElement;
-    this.onChange.emit({ name: el.getAttribute('name'), value: el.value });
+  @Event() onInputChange: EventEmitter;
+  @Watch('defaultValue') watchHandler(newVal: string) {
+    this.onInputChange.emit({ name: this.name, value: newVal });
   }
 
+  onChangeHandler = (e: Event) => {
+    if (!e.target) return;
+    const { value } = e.target as HTMLSelectElement;
+    this.onInputChange.emit({ name: this.name, value });
+  };
+
   render() {
     return (
       <select name={this.name} required={this.required} onChange={this.onChangeHandler}>
         {this.options.map(({ label, value }) => (
-          <option value={value} selected={this.selectedValue === value}>
+          <option value={value} selected={value === this.defaultValue}>
             {label}
           </option>
         ))}

src/components/custom-plan-feature/readme.md

@@ -7,20 +7,19 @@
 
 ## Properties
 
-| Property        | Attribute        | Description | Type                            | Default     |
-| --------------- | ---------------- | ----------- | ------------------------------- | ----------- |
-| `eventName`     | `event-name`     |             | `string \| undefined`           | `undefined` |
-| `name`          | `name`           |             | `string`                        | `undefined` |
-| `options`       | --               |             | `Option[]`                      | `[]`        |
-| `required`      | `required`       |             | `boolean \| undefined`          | `undefined` |
-| `selectedValue` | `selected-value` |             | `number \| string \| undefined` | `undefined` |
+| Property       | Attribute       | Description | Type                   | Default     |
+| -------------- | --------------- | ----------- | ---------------------- | ----------- |
+| `defaultValue` | `default-value` |             | `string \| undefined`  | `undefined` |
+| `name`         | `name`          |             | `string`               | `undefined` |
+| `options`      | --              |             | `Option[]`             | `[]`        |
+| `required`     | `required`      |             | `boolean \| undefined` | `undefined` |
 
 
 ## Events
 
-| Event      | Description | Type                |
-| ---------- | ----------- | ------------------- |
-| `onChange` |             | `CustomEvent<void>` |
+| Event           | Description | Type                |
+| --------------- | ----------- | ------------------- |
+| `onInputChange` |             | `CustomEvent<void>` |
 
 
 ----------------------------------------------

src/components/mf-select/mf-select.tsx

@@ -1,33 +1,38 @@
-import { Component, Prop, Event, EventEmitter } from '@stencil/core';
+import { Component, Prop, Event, EventEmitter, Watch } from '@stencil/core';
 
 @Component({
   tag: 'mf-slider',
   styleUrl: 'mf-slider.css',
   scoped: true,
 })
 export class MfSlider {
+  @Prop() defaultValue?: number;
   @Prop() error?: string;
-  @Prop() eventName?: string;
   @Prop() increment: number = 1;
   @Prop() max: number;
   @Prop() min: number = 0;
   @Prop() name: string = '';
-  @Prop() selectedValue: number;
   @Prop() suffix: string = '';
-  @Event({ eventName: this.eventName }) onChange: EventEmitter;
-
-  private onChangeHandler(e: Event) {
-    if (!e.target || !this.eventName) return;
-    const el = e.target as HTMLInputElement;
-    this.onChange.emit({ name: el.getAttribute('name'), value: parseInt(el.value, 10) });
+  @Event() onInputChange: EventEmitter;
+  @Watch('defaultValue') watchHandler(newVal: number) {
+    this.onInputChange.emit({ name: this.name, value: newVal });
   }
 
+  onChangeHandler = (e: Event) => {
+    if (!e.target) return;
+    const { value } = e.target as HTMLInputElement;
+    this.onInputChange.emit({
+      name: this.name,
+      value: parseInt(value, 10),
+    });
+  };
+
   get positionCount() {
     return (this.max - this.min) / this.increment;
   }
 
   render() {
-    const value = this.selectedValue || this.min;
+    const value = this.defaultValue || this.min;
     return (
       <div class="container">
         {this.positionCount < 500 ? (

src/components/mf-select/readme.md

@@ -7,23 +7,22 @@
 
 ## Properties
 
-| Property        | Attribute        | Description | Type                  | Default     |
-| --------------- | ---------------- | ----------- | --------------------- | ----------- |
-| `error`         | `error`          |             | `string \| undefined` | `undefined` |
-| `eventName`     | `event-name`     |             | `string \| undefined` | `undefined` |
-| `increment`     | `increment`      |             | `number`              | `1`         |
-| `max`           | `max`            |             | `number`              | `undefined` |
-| `min`           | `min`            |             | `number`              | `0`         |
-| `name`          | `name`           |             | `string`              | `''`        |
-| `selectedValue` | `selected-value` |             | `number`              | `undefined` |
-| `suffix`        | `suffix`         |             | `string`              | `''`        |
+| Property       | Attribute       | Description | Type                  | Default     |
+| -------------- | --------------- | ----------- | --------------------- | ----------- |
+| `defaultValue` | `default-value` |             | `number \| undefined` | `undefined` |
+| `error`        | `error`         |             | `string \| undefined` | `undefined` |
+| `increment`    | `increment`     |             | `number`              | `1`         |
+| `max`          | `max`           |             | `number`              | `undefined` |
+| `min`          | `min`           |             | `number`              | `0`         |
+| `name`         | `name`          |             | `string`              | `''`        |
+| `suffix`       | `suffix`        |             | `string`              | `''`        |
 
 
 ## Events
 
-| Event      | Description | Type                |
-| ---------- | ----------- | ------------------- |
-| `onChange` |             | `CustomEvent<void>` |
+| Event           | Description | Type                |
+| --------------- | ----------- | ------------------- |
+| `onInputChange` |             | `CustomEvent<void>` |
 
 
 ----------------------------------------------