@roadtrip/components 2.24.1 → 2.27.0

package/dist/collection/components/img/img.js

@@ -5,9 +5,11 @@ import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil
 export class Img {
   constructor() {
     this.onLoad = () => {
+      this.roadimgdidload.emit();
       this.roadImgDidLoad.emit();
     };
     this.onError = () => {
+      this.roaderror.emit();
       this.roadError.emit();
     };
   }
@@ -45,6 +47,7 @@ export class Img {
   load() {
     this.loadError = this.onError;
     this.loadSrc = this.src;
+    this.roadimgwillload.emit();
     this.roadImgWillLoad.emit();
   }
   removeIO() {
@@ -107,14 +110,47 @@ export class Img {
     "loadError": {}
   }; }
   static get events() { return [{
+      "method": "roadimgwillload",
+      "name": "roadimgwillload",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the img src has been set"
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
       "method": "roadImgWillLoad",
       "name": "roadImgWillLoad",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "roadimgdidload",
+      "name": "roadimgdidload",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the img src has been set"
+        "text": "Emitted when the image has finished loading"
       },
       "complexType": {
         "original": "void",
@@ -127,9 +163,27 @@ export class Img {
       "bubbles": true,
       "cancelable": true,
       "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "roaderror",
+      "name": "roaderror",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the image has finished loading"
+        "text": "Emitted when the img fails to load"
       },
       "complexType": {
         "original": "void",
@@ -143,8 +197,11 @@ export class Img {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
-        "text": "Emitted when the img fails to load"
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
       },
       "complexType": {
         "original": "void",

package/dist/collection/components/img/img.stories.js

@@ -5,7 +5,7 @@ export default {
   component: 'road-img',
   parameters: {
     actions: {
-      handles: ['roadImgWillLoad', 'roadImgDidLoad', 'roadError'],
+      handles: ['roadimgwillload', 'roadimgdidload', 'roaderror'],
     },
   },
 };

package/dist/collection/components/input/input.css

@@ -9,18 +9,18 @@
  */
 
 /**
- * @prop --input-text-align: align the content of the field
  * @prop --border-radius: Border radius of the field
- * @prop --margin-bottom: Bottom margin of the field
  * @prop --height: height of the field
+ * @prop --input-text-align: align the content of the field
+ * @prop --margin-bottom: Bottom margin of the field
  */
 
 
 :host {
-  --input-text-align: left;
+  --height: 3rem;
   --border-radius: 0.25rem;
+  --input-text-align: left;
   --margin-bottom: 1rem;
-  --height: 3rem;
 
   position: relative;
   display: block;

package/dist/collection/components/input/input.js

@@ -3,7 +3,7 @@ const debounceEvent = (event, wait) => {
   const original = event._original || event;
   return {
     _original: event,
-    emit: debounce(original.emit.bind(original), wait)
+    emit: debounce(original.emit.bind(original), wait),
   };
 };
 const debounce = (func, wait = 0) => {
@@ -76,22 +76,27 @@ export class Input {
       if (input) {
         this.value = input.value || '';
       }
+      this.roadinput.emit(ev);
       this.roadInput.emit(ev);
     };
     this.onBlur = () => {
+      this.roadblur.emit();
       this.roadBlur.emit();
     };
     this.onFocus = () => {
+      this.roadfocus.emit();
       this.roadFocus.emit();
     };
   }
   debounceChanged() {
+    this.roadchange = debounceEvent(this.roadchange, this.debounce);
     this.roadChange = debounceEvent(this.roadChange, this.debounce);
   }
   /**
    * Update the native input element when the value changes
    */
   valueChanged() {
+    this.roadchange.emit({ value: this.value == null ? this.value : this.value.toString() });
     this.roadChange.emit({ value: this.value == null ? this.value : this.value.toString() });
   }
   getValue() {
@@ -570,8 +575,8 @@ export class Input {
     }
   }; }
   static get events() { return [{
-      "method": "roadInput",
-      "name": "roadInput",
+      "method": "roadinput",
+      "name": "roadinput",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -589,8 +594,30 @@ export class Input {
         }
       }
     }, {
-      "method": "roadChange",
-      "name": "roadChange",
+      "method": "roadInput",
+      "name": "roadInput",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "KeyboardEvent",
+        "resolved": "KeyboardEvent",
+        "references": {
+          "KeyboardEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "roadchange",
+      "name": "roadchange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -603,15 +630,66 @@ export class Input {
         "resolved": "{ value: string | null | undefined; }",
         "references": {}
       }
+    }, {
+      "method": "roadChange",
+      "name": "roadChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{\n    value: string | undefined | null;\n  }",
+        "resolved": "{ value: string | null | undefined; }",
+        "references": {}
+      }
+    }, {
+      "method": "roadblur",
+      "name": "roadblur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the input loses focus."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
     }, {
       "method": "roadBlur",
       "name": "roadBlur",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "roadfocus",
+      "name": "roadfocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the input loses focus."
+        "text": "Emitted when the input has focus."
       },
       "complexType": {
         "original": "void",
@@ -625,8 +703,11 @@ export class Input {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
-        "text": "Emitted when the input has focus."
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
       },
       "complexType": {
         "original": "void",

package/dist/collection/components/input/input.stories.js

@@ -6,17 +6,175 @@ export default {
   component: 'road-input',
   parameters: {
     actions: {
-      handles: ['roadBlur', 'roadFocus'],
+      handles: ['roadblur', 'roadfocus'],
     },
   },
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+    },
+    readonly: {
+      control: 'boolean',
+    },
+    required: {
+      control: 'boolean',
+    },
+    autofocus: {
+      control: 'boolean',
+    },
+    spellcheck: {
+      control: 'boolean',
+    },
+    error: {
+      control: 'text',
+    },
+    label: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+    placeholder: {
+      control: 'text',
+    },
+    size: {
+      control: 'number',
+    },
+    min: {
+      control: 'text',
+    },
+    minlength: {
+      control: 'number',
+    },
+    max: {
+      control: 'text',
+    },
+    maxlength: {
+      control: 'number',
+    },
+    step: {
+      control: 'number',
+    },
+    pattern: {
+      control: 'text',
+    },
+    value: {
+      control: 'number',
+    },
+    type: {
+      options: ['date', 'email', 'number', 'password', 'search', 'tel', 'text', 'url', 'time'],
+      control: {
+        type: 'select',
+      },
+    },
+    autocapitalize: {
+      options: ['on', 'off'],
+      control: {
+        type: 'select',
+      },
+    },
+    autocomplete: {
+      options: ['on', 'off', 'name', 'honorific-prefix', 'given-name', 'additional-name', 'family-name', 'honorific-suffix', 'nickname', 'email', 'username', 'new-password', 'current-password', 'one-time-code', 'organization-title', 'organization', 'street-address', 'address-line1', 'address-line2', 'address-line3', 'address-level4', 'address-level3', 'address-level2', 'address-level1', 'country', 'country-name', 'postal-code', 'cc-name', 'cc-given-name', 'cc-additional-name', 'cc-family-name', 'cc-family-name', 'cc-number', 'cc-exp', 'cc-exp-month', 'cc-exp-year', 'cc-csc', 'cc-type', 'transaction-currency', 'transaction-amount', 'language', 'bday', 'bday-day', 'bday-month', 'bday-year', 'sex', 'tel', 'tel-country-code', 'tel-national', 'tel-area-code', 'tel-local', 'tel-extension', 'impp', 'url', 'photo'],
+      control: {
+        type: 'select',
+      },
+    },
+    autocorrect: {
+      options: ['on', 'off'],
+      control: {
+        type: 'select',
+      },
+    },
+    enterkeyhint: {
+      options: ['enter', 'done', 'go', 'next', 'previous', 'search', 'send'],
+      control: {
+        type: 'select',
+      },
+    },
+    inputmode: {
+      options: ['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search'],
+      control: {
+        type: 'select',
+      },
+    },
+    debounce: {
+      control: 'number',
+    },
+    'input-id': {
+      control: 'text',
+    },
+    roadblur: {
+      control: {
+        type: null,
+      },
+    },
+    roadfocus: {
+      control: {
+        type: null,
+      },
+    },
+    roadchange: {
+      action: 'roadchange',
+      control: {
+        type: null,
+      },
+    },
+    roadinput: {
+      action: 'roadinput',
+      control: {
+        type: null,
+      },
+    },
+    '--height': {
+      table: {
+        defaultValue: { summary: '3rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--border-radius': {
+      table: {
+        defaultValue: { summary: '0.25rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--input-text-align': {
+      table: {
+        defaultValue: { summary: 'left' },
+      },
+      control: {
+        type: null,
+      },
+    },
+    '--margin-bottom': {
+      table: {
+        defaultValue: { summary: '1rem' },
+      },
+      control: {
+        type: null,
+      },
+    },
+  },
+  args: {
+    label: 'Label',
+    disabled: null,
+    readonly: null,
+    required: null,
+    autofocus: null,
+    spellcheck: null,
+  },
 };
 
-export const Playground = (args) => html`
+const Template = (args) => html`
   <road-input
-    label="${args.label}"
-    .disabled="${args.disabled}"
-    .required="${args.required}"
-    .autofocus="${args.autofocus}"
+    input-id="${ifDefined(args['input-id'])}"
+    label="${ifDefined(args.label)}"
+    disabled="${ifDefined(args.disabled)}"
+    required="${ifDefined(args.required)}"
+    autofocus="${ifDefined(args.autofocus)}"
     error="${ifDefined(args.error)}"
     size="${ifDefined(args.size)}"
     min="${ifDefined(args.min)}" 
@@ -25,136 +183,44 @@ export const Playground = (args) => html`
     minlength="${ifDefined(args.minlength)}"
     step="${ifDefined(args.step)}" 
     value="${ifDefined(args.value)}" 
-    .spellcheck="${args.spellcheck}"
+    pattern="${ifDefined(args.pattern)}"
+    spellcheck="${ifDefined(args.spellcheck)}"
     placeholder="${ifDefined(args.placeholder)}"
-    type="${args.type}"
-    autocapitalize="${args.autocapitalize}"
-    autocomplete="${args.autocomplete}"
-    autocorrect="${args.autocorrect}"
+    type="${ifDefined(args.type)}"
+    autocapitalize="${ifDefined(args.autocapitalize)}"
+    autocomplete="${ifDefined(args.autocomplete)}"
+    autocorrect="${ifDefined(args.autocorrect)}"
     enterkeyhint="${ifDefined(args.enterkeyhint)}"
     inputmode="${ifDefined(args.inputmode)}"
-    .readonly="${args.readonly}"
-    debounce="${args.debounce}"
-    @roadChange=${event => args.roadChange(event.detail.value)}
-    @roadInput=${event => args.roadInput(event.target.value)}
+    readonly="${ifDefined(args.readonly)}"
+    debounce="${ifDefined(args.debounce)}"
+    @roadchange=${event => args.roadchange(event.detail.value)}
+    @roadinput=${event => args.roadinput(event.target.value)}
   ></road-input>
 `;
-Playground.args = {
-  label: 'Label',
-  type: 'text',
-};
-Playground.argTypes = {
-  disabled: {
-    control: 'boolean',
-  },
-  readonly: {
-    control: 'boolean',
-  },
-  required: {
-    control: 'boolean',
-  },
-  autofocus: {
-    control: 'boolean',
-  },
-  spellcheck: {
-    control: 'boolean',
-  },
-  error: {
-    control: 'text',
-  },
-  label: {
-    control: 'text',
-  },
-  name: {
-    control: 'text',
-  },
-  placeholder: {
-    control: 'text',
-  },
-  size: {
-    control: 'number',
-  },
-  min: {
-    control: 'number',
-  },
-  minlength: {
-    control: 'number',
-  },
-  max: {
-    control: 'number',
-  },
-  maxlength: {
-    control: 'number',
-  },
-  step: {
-    control: 'number',
-  },
-  value: {
-    control: 'number',
-  },
-  type: {
-    options: ['date', 'email', 'number', 'password', 'search', 'tel', 'text', 'url', 'time'],
-    control: {
-      type: 'select',
-    },
-  },
-  autocapitalize: {
-    options: ['on', 'off'],
-    control: {
-      type: 'select',
-    },
-  },
-  autocomplete: {
-    options: ['on', 'off', 'name', 'honorific-prefix', 'given-name', 'additional-name', 'family-name', 'honorific-suffix', 'nickname', 'email', 'username', 'new-password', 'current-password', 'one-time-code', 'organization-title', 'organization', 'street-address', 'address-line1', 'address-line2', 'address-line3', 'address-level4', 'address-level3', 'address-level2', 'address-level1', 'country', 'country-name', 'postal-code', 'cc-name', 'cc-given-name', 'cc-additional-name', 'cc-family-name', 'cc-family-name', 'cc-number', 'cc-exp', 'cc-exp-month', 'cc-exp-year', 'cc-csc', 'cc-type', 'transaction-currency', 'transaction-amount', 'language', 'bday', 'bday-day', 'bday-month', 'bday-year', 'sex', 'tel', 'tel-country-code', 'tel-national', 'tel-area-code', 'tel-local', 'tel-extension', 'impp', 'url', 'photo'],
-    control: {
-      type: 'select',
-    },
-  },
-  autocorrect: {
-    options: ['on', 'off'],
-    control: {
-      type: 'select',
-    },
-  },
-  enterkeyhint: {
-    options: ['enter', 'done', 'go', 'next', 'previous', 'search', 'send'],
-    control: {
-      type: 'select',
-    },
-  },
-  inputmode: {
-    options: ['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search'],
-    control: {
-      type: 'select',
-    },
-  },
-  debounce: {
-    control: 'number'
-  },
-  roadChange: {
-    action: 'roadChange',
-  },
-  roadInput: {
-    action: 'roadInput',
-  },
-};
 
-export const Default = () => html`
-  <road-input label="Label"></road-input>
-`;
+export const Playground = Template.bind({});
 
-export const WithValue = () => html`
-  <road-input label="Label" value="Value"></road-input>
-`;
+export const WithValue = Template.bind({});
+WithValue.args = {
+  value: 'Value',
+};
 
-export const Date = () => html`
-  <road-input label="Date" type="date" value="2021-04-21" min="2021-01-01" max="2021-12-31"></road-input>
-`;
+export const Date = Template.bind({});
+Date.args = {
+  label: 'Date',
+  type: 'date',
+  value: '2021-04-21',
+  min: '2021-01-01',
+  max: '2021-12-31',
+};
 
-export const Disabled = () => html`
-  <road-input label="Label" disabled></road-input>
-`;
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
 
-export const Error = () => html`
-  <road-input label="Label" error="This field is required"></road-input>
-`;
+export const Error = Template.bind({});
+Error.args = {
+  error: 'This field is required',
+};