@ptcwebops/ptcw-design 0.2.2 → 0.2.4

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

@@ -0,0 +1,47 @@
+:host {
+  display: block;
+}
+
+.form-group {
+  position: relative;
+}
+
+.ptc-input {
+  width: -webkit-fill-available;
+  width: -moz-available;
+  width: stretch;
+  display: block;
+  padding: 6px 12px;
+  border: none;
+  border-bottom: 1px solid #3b4550;
+  padding-left: 20px;
+  box-shadow: 1px 1px 25px 0 rgba(0, 0, 0, 0.16);
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  font-size: 16px;
+  color: #707070;
+  padding-top: 14px;
+  background: #fff;
+}
+
+.floating-label {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  transform: translate(20px, -10px);
+  font-family: Raleway;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.07;
+  text-align: left;
+  transition: all 0.4s ease-in-out;
+}
+
+.focused + .floating-label {
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1.5;
+  transform: translate(20px, -24px);
+}

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

@@ -1,80 +1,133 @@
-// import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';
-// @Component({
-//   tag: 'ptc-input',
-//   styleUrl: 'ptc-input.scss',
-//   shadow: true,
-// })
-// export class PtcInput {
-//   /**
-//    * The type of control to display. The default type is text.
-//    */
-//   @Prop() type: string = 'text';
-//   /**
-//    * The name of the control, which is submitted with the form data.
-//    */
-//   @Prop() name: string = '';
-//   /**
-//    * If `true`, the user must fill in a value before submitting a form.
-//    */
-//   @Prop() required = false;
-//   /**
-//    * The value of the input.
-//    */
-//   @Prop({ mutable: true }) value?: string | null = '';
-//   /**
-//    * Takes the entire width of the row
-//    */
-//   @Prop() block?: boolean = false;
-//   /**
-//    * Label for input
-//    */
-//   @Prop() label?: string;
-//   @State() error: string = '';
-//   /**
-//    * Emitted when a keyboard input occurred.
-//    */
-//   @Event() inputEvent!: EventEmitter<KeyboardEvent>;
-//   /**
-//    * Emitted when the value has changed.
-//    */
-//   @Event() changeEvent!: EventEmitter<any>;
-//   /**
-//    * Emitted when the input loses focus.
-//    */
-//   @Event() blurEvent!: EventEmitter<void>;
-//   /**
-//    * Emitted when the input has focus.
-//    */
-//   @Event() focusEvent!: EventEmitter<void>;
-//   /**
-//    * Emitted when a key is pressed down
-//    */
-//   @Event() keyDownEvent: EventEmitter<void>;
-//   render() {
-//     return (
-//       <Host>
-//         <label>
-//           Name:
-//           <input type={this.type} value={this.value} onInput={this.onInput} />
-//         </label>
-//       </Host>
-//     );
-//   }
-//   private onInput = (ev: Event) => {
-//     const input = ev.target as HTMLInputElement | null;
-//     if (input) {
-//       this.value = input.value || '';
-//     }
-//     for (var key in input.validity) {
-//       if (input.validity[key]) {
-//         if (key === 'valid') {
-//           this.error = '';
-//           break;
-//         }
-//         //this.error = validityMessages(this)[key] || '' // "" catch all
-//         break;
-//       }
-//     }
-//     this.inputEvent.emit(ev as KeyboardEvent);
-//   };
-// }
+import { Component, h, Prop, Event, State } from '@stencil/core';
+export class PtcInput {
+  constructor() {
+    this.focused = false;
+    this.onBlur = () => {
+      this.blurEvent.emit();
+      this.focused = false;
+    };
+    this.onFocus = () => {
+      this.focusEvent.emit();
+      this.focused = true;
+    };
+  }
+  render() {
+    const focusState = this.focused ? ' focused' : '';
+    return (h("div", { class: "form-group" },
+      h("input", { type: this.type, id: this.inputId, class: `ptc-input form-control${focusState}`, "data-eloqua-name": this.dataEloquaName, name: this.inputName, onBlur: this.onBlur, onFocus: this.onFocus }),
+      h("label", { htmlFor: this.inputId, class: "floating-label" },
+        h("slot", null))));
+  }
+  static get is() { return "ptc-input"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-input.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-input.css"]
+  }; }
+  static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false
+    },
+    "dataEloquaName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "data-eloqua-name",
+      "reflect": false
+    },
+    "inputId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "input-id",
+      "reflect": false
+    },
+    "inputName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "input-name",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "focused": {}
+  }; }
+  static get events() { return [{
+      "method": "blurEvent",
+      "name": "blurEvent",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the input loses focus."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "focusEvent",
+      "name": "focusEvent",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the input has focus."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/ptc-select/ptc-select.css

@@ -0,0 +1,22 @@
+:host {
+  display: block;
+}
+
+.ptc-select {
+  display: block;
+  width: 100%;
+  padding: 6px 12px;
+  border: none;
+  border-bottom: 1px solid #3b4550;
+  padding-left: 20px;
+  -webkit-box-shadow: 1px 1px 25px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 1px 1px 25px 0 rgba(0, 0, 0, 0.16);
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  font-size: 16px;
+  color: #707070;
+  padding-top: 14px;
+  background: #fff;
+}

package/dist/collection/components/ptc-select/ptc-select.js

@@ -0,0 +1,105 @@
+import { Component, h, Prop, Element } from '@stencil/core';
+export class PtcSelect {
+  constructor() {
+    this.valueOptions = [];
+  }
+  componentWillLoad() {
+    const BASE_URL = 'https://countriesnow.space/api/v0.1/countries/iso';
+    async () => { };
+    return fetch(`${BASE_URL}`)
+      .then(response => response.json())
+      .then(data => {
+      this.valueOptions = data.data;
+      console.log(this.valueOptions);
+    });
+  }
+  render() {
+    if (this.selectId == 'contact-country') {
+      console.log('country field exist');
+    }
+    return (h("div", null,
+      h("select", { id: this.selectId, class: "ptc-select", "data-eloqua-name": this.dataEloquaName, name: this.name }, this.selectId === 'contact-country'
+        ? this.valueOptions.map(recipient => h("option", { value: recipient.Iso2 }, recipient.name))
+        : this.valueOptions.map(recipient => h("option", { value: recipient.Iso3 }, recipient.name))),
+      h("label", { htmlFor: this.selectId, class: "floating-label" },
+        h("slot", null))));
+  }
+  static get is() { return "ptc-select"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-select.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-select.css"]
+  }; }
+  static get properties() { return {
+    "dataEloquaName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "data-eloqua-name",
+      "reflect": false
+    },
+    "selectId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "select-id",
+      "reflect": false
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "valueOptions": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "any[]",
+        "resolved": "any[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    }
+  }; }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/ptc-title/ptc-title.js

@@ -39,7 +39,7 @@ export class PtcTitle {
     };
   }
   static get is() { return "ptc-title"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["ptc-title.scss"]
   }; }

package/dist/custom-elements/index.d.ts

@@ -1,6 +1,6 @@
 /* PtcwDesign custom elements bundle */
 
-import type { Components, JSX } from "../types/components";
+import type { Components, JSX } from "../types/global";
 
 interface IconAsset extends Components.IconAsset, HTMLElement {}
 export const IconAsset: {
@@ -62,12 +62,24 @@ export const PtcFooter: {
   new (): PtcFooter;
 };
 
+interface PtcForm extends Components.PtcForm, HTMLElement {}
+export const PtcForm: {
+  prototype: PtcForm;
+  new (): PtcForm;
+};
+
 interface PtcImg extends Components.PtcImg, HTMLElement {}
 export const PtcImg: {
   prototype: PtcImg;
   new (): PtcImg;
 };
 
+interface PtcInput extends Components.PtcInput, HTMLElement {}
+export const PtcInput: {
+  prototype: PtcInput;
+  new (): PtcInput;
+};
+
 interface PtcLink extends Components.PtcLink, HTMLElement {}
 export const PtcLink: {
   prototype: PtcLink;
@@ -116,6 +128,12 @@ export const PtcPicture: {
   new (): PtcPicture;
 };
 
+interface PtcSelect extends Components.PtcSelect, HTMLElement {}
+export const PtcSelect: {
+  prototype: PtcSelect;
+  new (): PtcSelect;
+};
+
 interface PtcSpacer extends Components.PtcSpacer, HTMLElement {}
 export const PtcSpacer: {
   prototype: PtcSpacer;