@progressive-development/pd-forms 0.5.6 → 0.5.7

package/dist/pd-input-time.js

@@ -0,0 +1,4 @@
+import { PdInputTime } from "./src/PdInputTime.js";
+if (!customElements.get("pd-input-time")) {
+  window.customElements.define("pd-input-time", PdInputTime);
+}

package/dist/src/PdBaseInputElement.js

@@ -1,4 +1,4 @@
-import { PdBaseUIInput, INPUT_TYPE_DATE, INPUT_TYPE_TEXT, INPUT_TYPE_FILE, INPUT_TYPE_SELECT, INPUT_TYPE_AREA } from "./PdBaseUiInput.js";
+import { PdBaseUIInput, INPUT_TYPE_DATE, INPUT_TYPE_TIME, INPUT_TYPE_TEXT, INPUT_TYPE_FILE, INPUT_TYPE_SELECT, INPUT_TYPE_AREA } from "./PdBaseUiInput.js";
 import { SharedInputFieldStyles } from "./shared-input-field-styles.js";
 /**
  * @license
@@ -73,6 +73,7 @@ class PdBaseInputElement extends PdBaseUIInput {
         return "select";
       case INPUT_TYPE_FILE:
       case INPUT_TYPE_TEXT:
+      case INPUT_TYPE_TIME:
         return "input";
       case INPUT_TYPE_DATE:
         return "pd-input";

package/dist/src/PdBaseUiInput.js

@@ -39,6 +39,7 @@ const INPUT_TYPE_RANGE = 4;
 const INPUT_TYPE_AREA = 5;
 const INPUT_TYPE_DATE = 7;
 const INPUT_TYPE_FILE = 8;
+const INPUT_TYPE_TIME = 9;
 const KEY_RETURN = 13;
 let delayTimer = 0;
 const DELAY_WAIT_TIME_MS = 400;
@@ -225,5 +226,6 @@ export {
   INPUT_TYPE_RANGE,
   INPUT_TYPE_SELECT,
   INPUT_TYPE_TEXT,
+  INPUT_TYPE_TIME,
   PdBaseUIInput
 };

package/dist/src/PdInputTime.js

@@ -0,0 +1,59 @@
+import { css, html } from "lit";
+import "@progressive-development/pd-icon/pd-icon";
+import { INPUT_TYPE_TIME } from "./PdBaseUiInput.js";
+import { PdBaseInputElement } from "./PdBaseInputElement.js";
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+class PdInputTime extends PdBaseInputElement {
+  static get styles() {
+    return [
+      PdBaseInputElement.styles,
+      css`        
+        * {
+          box-sizing: border-box;          
+        }
+      `
+    ];
+  }
+  static get properties() {
+    return {
+      /**
+       * Icon to be shown inside `pd-input`.
+       */
+      icon: { type: String }
+    };
+  }
+  constructor() {
+    super();
+    this._inputType = INPUT_TYPE_TIME;
+  }
+  render() {
+    const inputId = `${this.id}Input`;
+    return html`
+      ${this._renderLabel(inputId)}
+      <div class="input ${this.errorMsg.length > 0 ? "error" : ""}">
+        ${this.icon ? html`<pd-icon icon="${this.icon}" activeIcon @click="${this._iconClicked}"></pd-icon>` : ""}
+        <input
+          id="${inputId}"
+          name="${this.name || this.valueName || this.autoCompleteName}"          
+          class="input-style ${this.gradient ? "gradient" : ""}"
+          type="time"
+          .value="${this.value}"
+          ?readonly="${this.readonly}"
+          ?disabled="${this.disabled}"
+          @keyup="${this._onKeyUp}"
+          @blur="${this._onBlur}"
+        />
+      </div>
+      ${this._renderErrorMsg()}
+    `;
+  }
+  _iconClicked() {
+    this.dispatchEvent(new CustomEvent("input-icon-click"));
+  }
+}
+export {
+  PdInputTime
+};

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent pd-forms following open-wc recommendations",
   "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "exports": {
@@ -15,6 +15,7 @@
     "./pd-hover-box": "./dist/pd-hover-box.js",
     "./pd-input-area": "./dist/pd-input-area.js",
     "./pd-input-file": "./dist/pd-input-file.js",
+    "./pd-input-time": "./dist/pd-input-time.js",
     "./pd-input": "./dist/pd-input.js",
     "./pd-radio-group": "./dist/pd-radio-group.js",
     "./pd-range": "./dist/pd-range.js",