@progressive-development/pd-forms 0.5.7 → 0.6.0

package/dist/src/PdInputArea.js

@@ -1,61 +0,0 @@
-import { css, html } from "lit";
-import { INPUT_TYPE_AREA } from "./PdBaseUiInput.js";
-import { PdBaseInputElement } from "./PdBaseInputElement.js";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdInputArea extends PdBaseInputElement {
-  static get styles() {
-    return [
-      PdBaseInputElement.styles,
-      css`
-        /* overwrite default (250px), area contains 10px scroll bar */
-        .input-style {
-          width: var(--pd-input-field-width, 240px);
-        }
-      `
-    ];
-  }
-  static get properties() {
-    return {
-      rows: { type: Number },
-      cols: { type: Number },
-      minlength: { type: String },
-      maxlength: { type: String }
-      // max length for field
-    };
-  }
-  constructor() {
-    super();
-    this._inputType = INPUT_TYPE_AREA;
-    this.maxlength = 500;
-    this.rows = 2;
-  }
-  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}
-          class="input-style ${this.gradient ? "gradient" : ""}"
-          rows="${this.rows}"
-          cols="${this.cols}"
-          placeholder="${this.placeHolder}"
-          ?disabled="${this.disabled}"
-          ?readonly="${this.readonly}"
-          .value="${this.value || ""}"
-          @keyup="${this._onKeyUp}"
-          @blur="${this._onBlur}"
-        ></textarea>
-      </div>
-      ${this._renderErrorMsg()}
-    `;
-  }
-}
-export {
-  PdInputArea
-};

package/dist/src/PdInputFile.js

@@ -1,73 +0,0 @@
-import { css, html } from "lit";
-import "@progressive-development/pd-icon/pd-icon";
-import { INPUT_TYPE_FILE } from "./PdBaseUiInput.js";
-import { PdBaseInputElement } from "./PdBaseInputElement.js";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdInputFile 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 },
-      accept: { type: String },
-      maxlength: { type: String }
-      // max length for field,
-    };
-  }
-  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(e) {
-    this.dispatchEvent(new CustomEvent("file-change"));
-  }
-  get files() {
-    const el = this.shadowRoot.getElementById(`${this.id}Input`);
-    return el ? el.files : void 0;
-  }
-}
-export {
-  PdInputFile
-};

package/dist/src/PdInputTime.js

@@ -1,59 +0,0 @@
-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/dist/src/PdRadioGroup.js

@@ -1,72 +0,0 @@
-import { css, html } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-import { PdBaseUIInput } from "./PdBaseUiInput.js";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdRadioGroup extends PdBaseUIInput {
-  static get styles() {
-    return [
-      PdBaseUIInput.styles,
-      css`      
-
-      .group-style {
-        display: flex;
-        gap: var(--pd-cb-group-gap, 20px);
-        flex-direction: var(--pd-cb-group-direction, row);
-        flex-wrap: wrap;
-        padding: var(--pd-input-label-padding, 0);
-        padding-top: 5px;
-      }
-
-      ::slotted(pd-checkbox) {
-        --pd-cb-border-col-readonly: var(--pd-cb-border-col, var(--pd-default-col));
-      }
-
-    `
-    ];
-  }
-  firstUpdated() {
-    this.addEventListener("field-change", (e) => {
-      const elCollection = this.getElementsByTagName("pd-checkbox");
-      Object.keys(elCollection).forEach((keyValue) => {
-        if (elCollection[keyValue] !== e.target) {
-          elCollection[keyValue].value = "false";
-        } else {
-          this.value = elCollection[keyValue].valueName;
-        }
-        elCollection[keyValue].readonly = elCollection[keyValue].value === "true";
-      });
-      this.dispatchEvent(
-        new CustomEvent("validate-form", {
-          detail: {
-            singleElement: this,
-            errorMap: /* @__PURE__ */ new Map()
-          },
-          composed: true,
-          bubbles: true
-        })
-      );
-    });
-    const elColl = this.getElementsByTagName("pd-checkbox");
-    Object.keys(elColl).forEach((keyValue) => {
-      if (elColl[keyValue].value === "true") {
-        elColl[keyValue].readonly = true;
-        this.value = elColl[keyValue].valueName;
-      }
-    });
-  }
-  render() {
-    return html`
-      ${this._renderLabel()}
-      <div class="group-style input ${classMap({ "error": this.errorMsg.length > 0 })}">      
-        <slot></slot>        
-      </div>      
-      ${this._renderErrorMsg()}
-    `;
-  }
-}
-export {
-  PdRadioGroup
-};

package/dist/src/PdRange.js

@@ -1,267 +0,0 @@
-import { css, html } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-import { PdBaseUIInput, INPUT_TYPE_RANGE } from "./PdBaseUiInput.js";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdRange extends PdBaseUIInput {
-  static get properties() {
-    return {
-      min: { type: String },
-      max: { type: String },
-      step: { type: Number },
-      optionValueMapper: { type: Object }
-    };
-  }
-  constructor() {
-    super();
-    this._inputType = INPUT_TYPE_RANGE;
-    this.step = 1;
-    this.optionValueMapper = {};
-  }
-  static get styles() {
-    return [
-      PdBaseUIInput.styles,
-      css`
-
-         /* Link:
-          * css styling:        - https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
-          * no-empty-default    - https://stackoverflow.com/questions/40302515/is-there-a-way-to-set-default-value-of-range-input-to-be-empty
-          * => Könnte ich vlt. mit dummy element lösen => Kein Wert => Dummy wird angezeigt => Bei Klick wird Wert gesetzt und PdRange angezeigt. Oder doch Vorschlag aus StackOverflow => -1 als default Wert => Kein gesetzer Wert
-          * Style Ticks/Lables: - https://stackoverflow.com/questions/26612700/ticks-for-type-range-html-input
-          */
-
-          /****************************************************
-           * Style for SLIDER                                 *
-           ****************************************************/
-
-          :host([disabled]) {
-            --pd-range-bg-col: grey;
-            --pd-range-thumb-col: lightgrey;
-          }
-
-          input[type=range] {
-            -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
-            width: var(--pd-input-field-width, 250px); /* Specific width is required for Firefox. */
-            background: transparent; /* Otherwise white in Chrome */
-
-            background-color: var(--pd-range-bg-col, var(--pd-default-col));
-            padding: 0.5rem;
-            height: var(--pd-input-field-range-height, 1.7rem);
-            box-sizing: border-box;
-
-            border-radius: 0.75rem;
-          }
-
-          input[type=range]:focus {
-            /* Removes the blue border.
-             * You should probably do some kind of focus styling for accessibility reasons though. */
-            outline: none;
-          }
-
-          /****************************************************
-           * Style for THUMBS specific for different browser  *
-           * Check: Possible to extract common definitions?   *
-           * =>  Note that while we’re repeating code here,   *
-           *     that’s necessary as you can’t comma-separate *
-           *     these type of selectors. Browsers will drop  *
-           *     the entire selector if it doesn’t understand *
-           *     a part of it.                                *
-           ****************************************************/
-
-          /**
-           * Standard/Chrome thumb definition.
-           */
-          input[type=range]::-webkit-slider-thumb {
-            /* Hide the standard thumb element */
-            -webkit-appearance: none;
-            /*margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
-            margin-top: -6px; /* squi.cards value */
-
-            /* redundant, check if it is possible to extract common definitions */
-            cursor: pointer;
-            height: 15px;
-            width: 39px;
-            background: var(--pd-range-thumb-col, var(--pd-default-hover-col));
-            border: 1px solid var(--pd-default-dark-col);
-            border-radius: 3px;
-            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-          }
-
-          /**
-           * Firefox thumb definition.
-           */
-          input[type=range]::-moz-range-thumb {
-            /* redundant, check if it is possible to extract common definitions */
-            cursor: pointer;
-            height: 15px;
-            width: 39px;
-            background: var(--pd-range-thumb-col, var(--pd-default-hover-col));
-            border: 1px solid var(--pd-default-dark-col);
-            border-radius: 3px;
-            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-          }
-
-          /**
-           * IE Thum definiton.
-           */
-          input[type=range]::-ms-thumb {
-            /* redundant, check if it is possible to extract common definitions */
-            cursor: pointer;
-            height: 15px;
-            width: 39px;
-            background: var(--pd-range-thumb-col, var(--pd-default-hover-col));
-            border: 1px solid var(--pd-default-dark-col);
-            border-radius: 3px;
-            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-          }
-
-
-          /****************************************************
-           * Style for TRACK specific for different browser  *
-           * (see thumbs styles)                              *
-           ****************************************************/
-
-          /**
-           * Standard/Chrome track definition.
-           */
-          input[type=range]::-webkit-slider-runnable-track {
-            width: 100%;
-            height: 8.4px;
-            cursor: pointer;
-            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-            background: var(--pd-range-track-col, var(--pd-default-light-col));
-            border: 0.2px solid #010101;
-
-            border-radius: 0.75rem;
-          }
-
-          input[type=range]:focus::-webkit-slider-runnable-track {
-            background: var(--pd-range-track-hover-col, var(--pd-default-light-col));
-            border: 0.2px solid var(--pd-default-hover-col);
-          }
-
-          /**
-           * Firefox track definition.
-           */
-          input[type=range]::-moz-range-track {
-            width: 100%;
-            height: 8.4px;
-            cursor: pointer;
-            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-            background: var(--pd-range-track-col, var(--pd-default-light-col));
-            border-radius: 0.75rem;
-            border: 0.2px solid #010101;
-          }
-
-          /**
-           * IE track definition.
-           * Check: Why are they different.
-           */
-          input[type=range]::-ms-track {
-
-            height: 8.4px;
-            width: 100%;
-            cursor: pointer;
-
-            /* Hides the slider so custom styles can be added */
-            background: transparent;
-            border-color: transparent;
-            color: transparent;
-
-            border-width: 16px 0;
-          }
-          input[type=range]::-ms-fill-lower {
-            background: var(--pd-range-track-col, var(--pd-default-light-col));
-            border: 0.2px solid #010101;
-            border-radius: 0.75rem;
-            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-          }
-          input[type=range]:focus::-ms-fill-lower {
-            background: #3071a9;
-          }
-          input[type=range]::-ms-fill-upper {
-            background: var(--pd-range-track-col, var(--pd-default-light-col));
-            border: 0.2px solid #010101;
-            border-radius: 0.75rem;
-            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-          }
-          input[type=range]:focus::-ms-fill-upper {
-            background: #367ebd;
-          }
-
-           /*
-           Der Style für ticks ist noch temporär, Bereinigung unf Anpassung.
-           TODO: Fest derzeit 5 Elemente
-           */
-          .ticks {
-            display: flex;
-            justify-content: space-between;
-            padding: 10px 30px;
-          }
-
-          .tick {
-            line-height: 5px;
-            height: 5px;
-            margin-top: -13px;
-            font-size: 8pt;
-            font-weight: bolder;
-          }
-
-          .ticks.disabled {
-            color: grey;
-          }
-
-          .ticks.enabled {
-            color: var(--pd-default-col);
-          }
-
-          @media (max-width: 650px) {
-            label {
-            font-size: 12px;
-            }
-          }
-
-          `
-    ];
-  }
-  render() {
-    const inputId = `${this.id}Range`;
-    return html`
-        ${this._renderLabel(inputId, this.optionValueMapper[this.value] || this.value)}
-        <div class="input-range ${classMap({ error: this.errorMsg.length > 0 })}">
-          <input
-            id="${inputId}"
-            name="${this.name || this.valueName}"
-            class="input-range-style ${this.gradient ? "gradient" : ""}"
-            type="range"
-            .value="${this.value}"
-            ?readonly="${this.readonly}"
-            ?disabled="${this.disabled}"
-            min="${this.min}" max="${this.max}" step="1"
-            @change="${this._onChange}"
-            @input="${this._onChange}"
-          >
-          <div class="ticks ${this.disabled ? "disabled" : "enabled"}">
-            <span class="tick">|</span>
-            <span class="tick">|</span>
-            <span class="tick">|</span>
-            <span class="tick">|</span>
-            <span class="tick">|</span>
-          </div>
-
-        </div>
-        ${this._renderErrorMsg()}
-        `;
-  }
-  firstUpdated() {
-    this._input = this.shadowRoot.querySelector("input");
-  }
-  _onChange(e) {
-    this._handleChangedValue(this._input.value, e, false);
-  }
-}
-export {
-  PdRange
-};

package/dist/src/PdSelect.js

@@ -1,125 +0,0 @@
-import { css, html } from "lit";
-import { INPUT_TYPE_SELECT } from "./PdBaseUiInput.js";
-import { PdBaseInputElement } from "./PdBaseInputElement.js";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdSelect extends PdBaseInputElement {
-  static get styles() {
-    return [
-      PdBaseInputElement.styles,
-      css`
-        /* Select style */
-        /* https://css-tricks.com/styling-a-select-like-its-2019/
-       class applies to select element itself, not a wrapper element */
-        .select-css {
-          display: block;
-
-          -moz-appearance: none;
-          -webkit-appearance: none;
-          appearance: none;
-          padding: 5px;
-
-          background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
-          background-repeat: no-repeat, repeat;
-          /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
-          background-position: right 0.5em top 50%, 0 0;
-          /* icon size, then gradient */
-          background-size: 0.65em auto, 100%;
-          max-width: 100%; /* useful when width is set to anything other than 100% */
-        }
-
-        /* Hide arrow icon in IE browsers */
-        .select-css::-ms-expand {
-          display: none;
-        }
-
-        /* Set options to normal weight */
-        .select-css option {
-          font-weight: normal;
-          text-indent: 5px;
-        }
-
-        /* [aria-disabled='true'] */
-
-        .gradient {
-          /* Define color */
-          background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
-            linear-gradient(
-              to bottom,
-              var(--my-background-gradient-color),
-              var(--my-background-color)
-            );
-          background-color: var(--my-background-color);
-        }
-
-        .error .gradient {
-          background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
-            linear-gradient(
-              to bottom,
-              var(--my-background-gradient-color) 10%,
-              #f5979b 100%
-            );
-          /* repeat instructions because of setted background in shared-styles */
-          background-repeat: no-repeat, repeat;
-          /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
-          background-position: right 0.5em top 50%, 0 0;
-          /* icon size, then gradient */
-          background-size: 0.65em auto, 100%;
-          background-color: var(--my-error-background-color);
-        }
-      `
-    ];
-  }
-  static get properties() {
-    return {
-      values: { type: Array }
-    };
-  }
-  constructor() {
-    super();
-    this._inputType = INPUT_TYPE_SELECT;
-    this.values = [];
-  }
-  render() {
-    const selectId = `${this.id}Select`;
-    return html`
-      ${this._renderLabel(selectId)}
-      <div class="input ${this.errorMsg.length > 0 ? "error" : ""}">
-        <select
-          id="${selectId}"
-          class="input-style select-css ${this.gradient ? "gradient" : ""}"
-          ?disabled="${this.disabled}"
-          name="${this.name || this.valueName || this.autoCompleteName}"
-          autocomplete=${this.autoCompleteName}
-          @change="${this._onKeyUp}"
-          @keyup="${this._onSelectKeyUp}"
-          @blur="${this._onBlur}"
-        >
-          ${this.values.map(
-      (val) => html`
-              <option
-                value="${val.value}"
-                ?selected=${// eslint-disable-next-line eqeqeq
-      this.value == val.value}
-              >
-                ${val.name}
-              </option>
-            `
-    )}
-        </select>
-      </div>
-      ${this._renderErrorMsg()}
-    `;
-  }
-  /**
-   * At the moment specific for select.
-   */
-  // eslint-disable-next-line class-methods-use-this
-  _onSelectKeyUp() {
-  }
-}
-export {
-  PdSelect
-};