@progressive-development/pd-forms 0.5.6 → 0.6.0

package/dist/pd-form-row.js

@@ -1,4 +1,108 @@
-import { PdFormRow } from "./src/PdFormRow.js";
-if (!customElements.get("pd-form-row")) {
-  window.customElements.define("pd-form-row", PdFormRow);
-}
+import { css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { PdBaseUI } from "./pd-base-ui.js";
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(result) || result;
+  return result;
+};
+let PdFormRow = class extends PdBaseUI {
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+PdFormRow.styles = [
+  PdBaseUI.styles,
+  css`
+      :host {
+        /* Define size for row, depends on media queries */
+        --my-row-width: var(--pd-form-row-base-width, 800px);
+        --my-gap: var(--pd-form-row-gap, 20px);
+        display: flex;
+        flex: 1 1 100%;
+        /*margin: 0 0 .5rem 0;*/
+        box-sizing: border-box;
+        width: 100%;
+        gap: var(--my-gap);
+        align-items: var(--pd-form-row-align-item, flex-start);
+        padding-top: var(--pd-form-row-padding-top, 10px);
+      }
+
+      ::slotted(.full-size) {
+        --pd-input-field-width: 100%;
+      }
+
+      ::slotted(.quarter1) {
+        --pd-input-field-width: calc(
+          var(--my-row-width) * 0.25 - (var(--my-gap) * 0.75)
+        );
+      }
+
+      ::slotted(.quarter1-area) {
+        --pd-input-field-width: calc(
+          (var(--my-row-width) - 5px) * 0.25 - (var(--my-gap) * 0.75)
+        );
+      }
+
+      ::slotted(.quarter2) {
+        --pd-input-field-width: calc(
+          (var(--my-row-width) * 0.5) - (var(--my-gap) / 2)
+        );
+      }
+
+      ::slotted(.quarter2-area) {
+        --pd-input-field-width: calc(
+          ((var(--my-row-width) - 8px) * 0.5) - (var(--my-gap) / 2)
+        );
+      }
+
+      ::slotted(.quarter3) {
+        --pd-input-field-width: calc(
+          var(--my-row-width) * 0.75 - (var(--my-gap) * 0.25)
+        );
+      }
+
+      ::slotted(.quarter3-area) {
+        --pd-input-field-width: calc(
+          (var(--my-row-width) - 10px) * 0.75 - (var(--my-gap) * 0.25)
+        );
+      }
+
+      ::slotted(.quarter4) {
+        --pd-input-field-width: var(--my-row-width);
+      }
+
+      ::slotted(.quarter4-area) {
+        --pd-input-field-width: calc(var(--my-row-width) - 15px);
+      }
+
+      @media (max-width: 930px) {
+        :host {
+          --my-row-width: 600px;
+        }
+      }
+
+      @media (max-width: 650px) {
+        :host {
+          --my-row-width: 400px;
+          --my-gap: 10px;
+        }
+      }
+
+      @media (max-width: 450px) {
+        :host {
+          --my-row-width: 300px;
+          --my-gap: 8px;
+        }
+      }
+    `
+];
+PdFormRow = __decorateClass([
+  customElement("pd-form-row")
+], PdFormRow);
+export {
+  PdFormRow
+};

package/dist/pd-hover-box.d.ts

@@ -0,0 +1,23 @@
+import { TemplateResult, CSSResultGroup } from 'lit';
+import { PdBaseUI } from './pd-base-ui.js';
+export declare class PdHoverBox extends PdBaseUI {
+    /**
+     * Controls visibility of the info box
+     */
+    private _visible;
+    /**
+     * True if the info box should open downward
+     */
+    private _toBottom;
+    static styles: CSSResultGroup;
+    render(): TemplateResult;
+    /**
+     * Activates and positions the info box based on current viewport height.
+     */
+    private _activateInfo;
+    /**
+     * Hides the info box again
+     */
+    private _closeInfo;
+}
+//# sourceMappingURL=pd-hover-box.d.ts.map

package/dist/pd-hover-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-hover-box.d.ts","sourceRoot":"","sources":["../src/pd-hover-box.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1E,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,qBACa,UAAW,SAAQ,QAAQ;IACtC;;OAEG;IAEH,OAAO,CAAC,QAAQ,CAAS;IAEzB;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAS;IAE1B,OAAgB,MAAM,EAAE,cAAc,CAqDpC;IAEO,MAAM,IAAI,cAAc;IAqBjC;;OAEG;IACH,OAAO,CAAC,aAAa;IAqBrB;;OAEG;IACH,OAAO,CAAC,UAAU;CAGnB"}

package/dist/pd-hover-box.js

@@ -1,4 +1,122 @@
-import { PdHoverBox } from "./src/PdHoverBox.js";
-if (!customElements.get("pd-hover-box")) {
-  window.customElements.define("pd-hover-box", PdHoverBox);
-}
+import { css, html } from "lit";
+import { state, customElement } from "lit/decorators.js";
+import { PdBaseUI } from "./pd-base-ui.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let PdHoverBox = class extends PdBaseUI {
+  constructor() {
+    super(...arguments);
+    this._visible = false;
+    this._toBottom = false;
+  }
+  render() {
+    return html`
+      <div class="hover-box">
+        <div @click=${this._activateInfo}>
+          <slot name="normal-view"></slot>
+        </div>
+
+        <div
+          id="infoViewId"
+          @click=${this._closeInfo}
+          class="info-view ${this._visible ? "visible" : "hidden"} ${this._toBottom ? "to-bottom" : "to-top"}"
+        >
+          <slot name="info-view"></slot>
+        </div>
+      </div>
+    `;
+  }
+  /**
+   * Activates and positions the info box based on current viewport height.
+   */
+  _activateInfo(e) {
+    var _a;
+    const modal = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById("infoViewId");
+    if (!modal) return;
+    const rect = modal.getBoundingClientRect();
+    const fitsBelow = modal.offsetHeight + rect.top + rect.height <= window.innerHeight;
+    this._toBottom = fitsBelow;
+    this._visible = true;
+    e.stopPropagation();
+  }
+  /**
+   * Hides the info box again
+   */
+  _closeInfo() {
+    this._visible = false;
+  }
+};
+PdHoverBox.styles = [
+  PdBaseUI.styles,
+  css`
+      :host {
+        display: block;
+      }
+
+      .hover-box {
+        position: relative;
+      }
+
+      .info-view {
+        position: absolute;
+        z-index: 100;
+        background-color: var(
+          --pd-hover-box-bg-col,
+          var(--pd-default-dark-col)
+        );
+        border: 1px solid var(--pd-hover-box-border-col, var(--pd-default-col));
+        text-align: center;
+        padding: 10px;
+        width: 240px;
+        color: var(--pd-hover-box-font-col, white);
+        font-size: var(--pd-hover-box-font-size, 0.8em);
+        transition: opacity 0.2s ease-in;
+      }
+
+      .visible {
+        visibility: visible;
+        opacity: 1;
+      }
+
+      .hidden {
+        visibility: hidden;
+        opacity: 0;
+      }
+
+      .to-bottom {
+        right: -3px;
+        top: -3px;
+      }
+
+      .to-top {
+        right: -3px;
+        bottom: -3px;
+      }
+
+      @media (max-width: 640px) {
+        .info-view {
+          width: 190px;
+        }
+      }
+    `
+];
+__decorateClass([
+  state()
+], PdHoverBox.prototype, "_visible", 2);
+__decorateClass([
+  state()
+], PdHoverBox.prototype, "_toBottom", 2);
+PdHoverBox = __decorateClass([
+  customElement("pd-hover-box")
+], PdHoverBox);
+export {
+  PdHoverBox
+};

package/dist/pd-icon-panel-button.d.ts

@@ -0,0 +1,18 @@
+import { CSSResultGroup } from 'lit';
+import { PdBaseUI } from './pd-base-ui';
+export declare class PdIconPanelButton extends PdBaseUI {
+    pdButtonIcon?: string;
+    buttonText: string;
+    value?: string;
+    panelButton: boolean;
+    private _panelOpen;
+    static styles: CSSResultGroup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _closePanel;
+    render(): import('lit-html').TemplateResult<1>;
+    private _onKeyDown;
+    private _buttonClicked;
+    private _togglePanel;
+}
+//# sourceMappingURL=pd-icon-panel-button.d.ts.map

package/dist/pd-icon-panel-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-icon-panel-button.d.ts","sourceRoot":"","sources":["../src/pd-icon-panel-button.ts"],"names":[],"mappings":"AACA;;;GAGG;AAEH,OAAO,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAGhD,OAAO,0CAA0C,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,qBACa,iBAAkB,SAAQ,QAAQ;IAE7C,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,UAAU,EAAE,MAAM,CAAQ;IAG1B,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,WAAW,EAAE,OAAO,CAAS;IAG7B,OAAO,CAAC,UAAU,CAAkB;IAEpC,OAAgB,MAAM,EAAE,cAAc,CAoIpC;IAEF,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,WAAW,CAEjB;IAGF,MAAM;IAgCN,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,YAAY;CAQrB"}

package/dist/pd-input-area.d.ts

@@ -0,0 +1,18 @@
+import { CSSResultGroup } from 'lit';
+import { PdBaseInputElement } from './pd-base-input-element.js';
+export declare class PdInputArea extends PdBaseInputElement {
+    rows: number;
+    cols?: number;
+    /**
+     * Minimum length constraint
+     */
+    minlength?: number;
+    /**
+     * Maximum length constraint
+     */
+    maxlength?: number;
+    constructor();
+    static styles: CSSResultGroup;
+    render(): import('lit-html').TemplateResult<1>;
+}
+//# sourceMappingURL=pd-input-area.d.ts.map

package/dist/pd-input-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-input-area.d.ts","sourceRoot":"","sources":["../src/pd-input-area.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,qBACa,WAAY,SAAQ,kBAAkB;IAEjD,IAAI,SAAK;IAGT,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAO;;IAOzB,OAAgB,MAAM,EAAE,cAAc,CAQpC;IAEO,MAAM;CAyBhB"}

package/dist/pd-input-area.js

@@ -1,4 +1,74 @@
-import { PdInputArea } from "./src/PdInputArea.js";
-if (!customElements.get("pd-input-area")) {
-  window.customElements.define("pd-input-area", PdInputArea);
-}
+import { css, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { PdBaseInputElement } from "./pd-base-input-element.js";
+import { INPUT_TYPE_AREA } from "./pd-base-ui-input.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let PdInputArea = class extends PdBaseInputElement {
+  constructor() {
+    super();
+    this.rows = 2;
+    this.maxlength = 500;
+    this._inputType = INPUT_TYPE_AREA;
+  }
+  render() {
+    const inputAreaId = `${this.id}InputArea`;
+    return html`
+      ${this._renderLabel(inputAreaId)}
+      <div class="input ${this.errorMsg.length > 0 ? "error" : ""}">
+        <textarea
+          id=${inputAreaId}
+          name=${this.name || this.valueName || this.autoCompleteName}
+          autocomplete=${this.autoCompleteName ?? "off"}
+          class="input-style ${this.gradient ? "gradient" : ""}"
+          rows=${this.rows}
+          cols=${this.cols ?? ""}
+          placeholder=${this.placeHolder}
+          minlength=${this.minlength ?? ""}
+          maxlength=${this.maxlength ?? ""}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          .value=${this.value}
+          @keyup=${this._onKeyUp}
+          @blur=${this._onBlur}
+        ></textarea>
+      </div>
+      ${this._renderErrorMsg()}
+    `;
+  }
+};
+PdInputArea.styles = [
+  PdBaseInputElement.styles,
+  css`
+      /* override default width for area */
+      .input-style {
+        width: var(--pd-input-field-width, 240px);
+      }
+    `
+];
+__decorateClass([
+  property({ type: Number })
+], PdInputArea.prototype, "rows", 2);
+__decorateClass([
+  property({ type: Number })
+], PdInputArea.prototype, "cols", 2);
+__decorateClass([
+  property({ type: Number })
+], PdInputArea.prototype, "minlength", 2);
+__decorateClass([
+  property({ type: Number })
+], PdInputArea.prototype, "maxlength", 2);
+PdInputArea = __decorateClass([
+  customElement("pd-input-area")
+], PdInputArea);
+export {
+  PdInputArea
+};

package/dist/pd-input-file.d.ts

@@ -0,0 +1,15 @@
+import { CSSResultGroup } from 'lit';
+import { PdBaseInputElement } from './pd-base-input-element.js';
+export declare class PdInputFile extends PdBaseInputElement {
+    icon?: string;
+    accept?: string;
+    maxlength?: number;
+    constructor();
+    static styles: CSSResultGroup;
+    render(): import('lit-html').TemplateResult<1>;
+    _onKeyUp(e: KeyboardEvent): void;
+    private _iconClicked;
+    private _onChange;
+    get files(): FileList | null | undefined;
+}
+//# sourceMappingURL=pd-input-file.d.ts.map

package/dist/pd-input-file.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-input-file.d.ts","sourceRoot":"","sources":["../src/pd-input-file.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,qBACa,WAAY,SAAQ,kBAAkB;IAEjD,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,SAAS,CAAC,EAAE,MAAM,CAAC;;IAOnB,OAAgB,MAAM,EAAE,cAAc,CAOpC;IAEO,MAAM;IA6BN,QAAQ,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAIzC,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,SAAS;IAYjB,IAAI,KAAK,IAAI,QAAQ,GAAG,IAAI,GAAG,SAAS,CAIvC;CACF"}

package/dist/pd-input-file.js

@@ -1,4 +1,91 @@
-import { PdInputFile } from "./src/PdInputFile.js";
-if (!customElements.get("pd-input-file")) {
-  window.customElements.define("pd-input-file", PdInputFile);
-}
+import { css, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import "@progressive-development/pd-icon/pd-icon";
+import { PdBaseInputElement } from "./pd-base-input-element.js";
+import { INPUT_TYPE_FILE } from "./pd-base-ui-input.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let PdInputFile = class extends PdBaseInputElement {
+  constructor() {
+    super();
+    this._inputType = INPUT_TYPE_FILE;
+  }
+  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="file"
+          maxlength=${this.maxlength ?? ""}
+          accept=${this.accept ?? ""}
+          ?disabled=${this.disabled}
+          @keyup=${this._onKeyUp}
+          @blur=${this._onBlur}
+          @change=${this._onChange}
+        />
+      </div>
+      ${this._renderErrorMsg()}
+    `;
+  }
+  _onKeyUp(e) {
+    super._onKeyUp(e);
+  }
+  _iconClicked() {
+    this.dispatchEvent(new CustomEvent("input-icon-click"));
+  }
+  _onChange() {
+    this.dispatchEvent(
+      new CustomEvent("file-change", {
+        detail: {
+          files: this.files
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  get files() {
+    var _a, _b;
+    return (_b = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById(`${this.id}Input`)) == null ? void 0 : _b.files;
+  }
+};
+PdInputFile.styles = [
+  PdBaseInputElement.styles,
+  css`
+      * {
+        box-sizing: border-box;
+      }
+    `
+];
+__decorateClass([
+  property({ type: String })
+], PdInputFile.prototype, "icon", 2);
+__decorateClass([
+  property({ type: String })
+], PdInputFile.prototype, "accept", 2);
+__decorateClass([
+  property({ type: Number })
+], PdInputFile.prototype, "maxlength", 2);
+PdInputFile = __decorateClass([
+  customElement("pd-input-file")
+], PdInputFile);
+export {
+  PdInputFile
+};

package/dist/pd-input-time.d.ts

@@ -0,0 +1,10 @@
+import { CSSResultGroup } from 'lit';
+import { PdBaseInputElement } from './pd-base-input-element.js';
+export declare class PdInputTime extends PdBaseInputElement {
+    icon?: string;
+    constructor();
+    static get styles(): CSSResultGroup;
+    render(): import('lit-html').TemplateResult<1>;
+    private _iconClicked;
+}
+//# sourceMappingURL=pd-input-time.d.ts.map

package/dist/pd-input-time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-input-time.d.ts","sourceRoot":"","sources":["../src/pd-input-time.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,qBACa,WAAY,SAAQ,kBAAkB;IAEjD,IAAI,CAAC,EAAE,MAAM,CAAC;;IAOd,WAAoB,MAAM,IAAI,cAAc,CAS3C;IAEQ,MAAM;IA4Bf,OAAO,CAAC,YAAY;CAGrB"}

package/dist/pd-input-time.js

@@ -0,0 +1,68 @@
+import { css, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import "@progressive-development/pd-icon/pd-icon";
+import { PdBaseInputElement } from "./pd-base-input-element.js";
+import { INPUT_TYPE_TIME } from "./pd-base-ui-input.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let PdInputTime = class extends PdBaseInputElement {
+  constructor() {
+    super();
+    this._inputType = INPUT_TYPE_TIME;
+  }
+  static get styles() {
+    return [
+      PdBaseInputElement.styles,
+      css`
+        * {
+          box-sizing: border-box;
+        }
+      `
+    ];
+  }
+  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"));
+  }
+};
+__decorateClass([
+  property({ type: String })
+], PdInputTime.prototype, "icon", 2);
+PdInputTime = __decorateClass([
+  customElement("pd-input-time")
+], PdInputTime);
+export {
+  PdInputTime
+};

package/dist/pd-input.d.ts

@@ -0,0 +1,30 @@
+import { TemplateResult, CSSResultGroup } from 'lit';
+import { PdBaseInputElement } from './pd-base-input-element.js';
+export declare class PdInput extends PdBaseInputElement {
+    /**
+     * Optional icon to display inside input
+     */
+    icon: string;
+    /**
+     * If true, uses input type password
+     */
+    secret: boolean;
+    /**
+     * Minimum length constraint
+     */
+    minlength?: number;
+    /**
+     * Maximum length constraint
+     */
+    maxlength?: number;
+    /**
+     * If true, restricts input to numbers only (legacy, use type="number" langfristig)
+     */
+    onlyNumbers: boolean;
+    constructor();
+    static styles: CSSResultGroup;
+    render(): TemplateResult;
+    protected _onKeyUp(e: KeyboardEvent): void;
+    private _iconClicked;
+}
+//# sourceMappingURL=pd-input.d.ts.map

package/dist/pd-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-input.d.ts","sourceRoot":"","sources":["../src/pd-input.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAa,KAAK,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,0CAA0C,CAAC;AAGlD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAIhE,qBACa,OAAQ,SAAQ,kBAAkB;IAC7C;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAO;IAEzB;;OAEG;IAEH,WAAW,UAAS;;IAOpB,OAAgB,MAAM,EAAE,cAAc,CAOpC;IAEO,MAAM,IAAI,cAAc;cAmCd,QAAQ,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAYnD,OAAO,CAAC,YAAY;CAKrB"}