@progressive-development/pd-forms 0.0.4 → 0.0.6

package/src/squi-input.js

@@ -0,0 +1,206 @@
+import { html, css } from 'lit';
+import { classMap } from 'lit/directives/class-map';
+import { SharedInputStyles } from './shared-input-styles.js';
+
+import { SquiBaseUIInput, INPUT_TYPE_TEXT } from './squi-base-ui-input.js';
+
+import '@progressive-development/pd-icon/pd-icon.js';
+
+// https://github.com/Victor-Bernabe/lit-input
+// https://levelup.gitconnected.com/build-a-material-like-input-web-component-using-litelement-20e9e0d203b6
+/**
+ * Web component to input text implemented with LitElement.
+ *
+ * ### Styling
+ *
+ * All custom properties should start with `--squi-input`.
+ *
+ * Font and icon size will scale automatically with `squi-input`'s height.
+ *
+ * Custom property | Description | Default
+ * ----------------|-------------|--------
+ * `--squi-input-width` | Width | `250px`
+ * `--my-input-height` | Height | `30px`
+ * `--squi-input-border` | Border | `1px solid black`
+ * `--squi-input-border-focus` | Border when focused | `1px solid #4d90fe`
+ * `--squi-input-background-color` | Background color | `white`
+ * `--squi-input-font-size` | Font size | `calc(var(--my-input-height) / 1.8)`
+ * `--squi-input-text-color` | Text color | `inherit`
+ * `--squi-input-placeholder-color` | Placeholder text color | `#a0a0a0`
+ * `--squi-input-icon-fill-color` | Icon fill color | `currentcolor`
+ * `--squi-input-icon-stroke-color` | Icon stroke color | `none`
+ *
+ * ### Icon and text alignment
+ *
+ * The icon inside `squi-input` is hidden by default. To show it, set the attribute `icon-right` or `icon-left`.
+ *
+ *     <squi-input icon-left></squi-input>
+ *     <squi-input icon-right></squi-input>
+ *
+ *     <squi-input icon-left .icon="${'hardware:headset'}"></squi-input>
+ *
+ * Text can be left or right aligned. Default is left alignment.
+ *
+ *     <squi-input text-right></squi-input>
+ *     <squi-input text-left></squi-input>
+ */
+export class SquiInput extends SquiBaseUIInput {
+  /**
+   * Fired when `squi-input` has focus and the user press `Enter` key.
+   * @event enter-pressed
+   */
+
+  /**
+   * Fired when `squi-input` has focus and the user press any key except `Enter`.
+   * @event key-pressed
+   */
+
+  /**
+   * Fire when the `squi-input` loses focus.
+   * @event focus-lost
+   */
+
+  /**
+   * Fire when the icon inside `squi-input` is clicked.
+   * @event icon-clicked
+   */
+
+  static get styles() {
+    return [
+      SharedInputStyles,
+      css`
+        * {
+          box-sizing: border-box;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      key: { type: String }, // Test, wird für das setzten der Error Msg benötigt
+
+      /** Placeholder for `squi-input` initial text. */
+      placeHolder: { type: String },
+      /**
+       * Icon to be shown inside `squi-input`.
+       */
+      icon: { type: String },
+      secret: { type: Boolean }, // True for type password
+      minlength: { type: String },
+      maxlength: { type: String }, // max length for field
+    };
+  }
+
+  constructor() {
+    super();
+    this._inputType = INPUT_TYPE_TEXT;
+    this.placeHolder = '';
+    this.icon = 'toggleCollapse';
+    this.secret = false;
+    this.key = '';
+  }
+
+  render() {
+    return html`
+      <label for="${this.id}Input">${this.label}</label>
+      <div class="input ${classMap({ error: this.errorMsg.length > 0 })}">
+        <squi-icon
+          icon="toggleCollapse"
+          @click="${this._onIconClick}"
+        ></squi-icon>
+        <input
+          id="${this.id}Input"
+          class="input-style ${this.gradient ? 'gradient' : ''}"
+          type="${this.secret ? 'password' : 'text'}"
+          placeholder="${this.disabled ? '---' : this.placeHolder}"
+          .value="${this.value}"
+          ?readonly="${this.readonly}"
+          minlength="${this.minlength}"
+          maxlength="${this.maxlength}"
+          ?disabled="${this.disabled}"
+          @keyup="${this._onKeyUp}"
+          @blur="${this._onBlur}"
+        />
+        <!-- Sollte erst Clientseitig im Input validiert werden. Meldung verschwindet erst beim Submit nicht mehr zeitgemäß-->
+        ${this.errorMsg.length > 0
+          ? html`<span class="error-msg">${this.errorMsg}</span>`
+          : ''}
+      </div>
+    `;
+  }
+
+  firstUpdated() {
+    // Save input reference for performance (bind html element to class property)
+    this._input = this.shadowRoot.querySelector('input');
+  }
+
+  _onKeyUp(event) {
+    // set value (tbd überdenken)
+    this.value = this._input.value;
+
+    // If Enter key pressed, fire 'enter-pressed'
+    if (Number(event.keyCode) === 13) {
+      this.dispatchEvent(
+        new CustomEvent('enter-pressed', {
+          detail: {
+            value: this._input.value,
+          },
+          composed: true,
+          bubbles: true,
+        })
+      );
+      event.preventDefault();
+    } else {
+      // If any other key, fire 'key-pressed'
+
+      // Interessante Stelle, die error msg wird von außen gesetzt
+      // wenn die error msg hier gesetzt wird, danach nicht mehr für änderungen von außen für den gleichen typ gültig
+      // da der wert außen nicht verändert wurde, und daher nicht neu gesetzt wird...
+      // => Die eigentliche NAchricht ist nochgesetzt...
+      // Hack bevor das Thema richtig nachgezogen wird (recherche), es wird nicht für felder von bestimmten typ durchgeführt
+      // d.h. für zip und mail nicht
+      /*
+      if (this.key != 'mail' && this.key != 'zip' && this.key != 'phone') {
+        this.errorMsg = '';
+      } 
+
+      Aufrund der gennanten Problematik auskommentiert, ein evenlistener sorgt nun dafür
+      */
+      this.dispatchEvent(
+        new CustomEvent('key-pressed', {
+          detail: {
+            value: this._input.value,
+            name: this.valueName,
+          },
+          composed: true,
+          bubbles: true,
+        })
+      );
+    }
+  }
+
+  _onBlur() {
+    this.dispatchEvent(
+      new CustomEvent('focus-lost', {
+        detail: {
+          value: this._input.value,
+        },
+        composed: true,
+        bubbles: true,
+      })
+    );
+  }
+
+  _onIconClick() {
+    this.dispatchEvent(
+      new CustomEvent('icon-clicked', {
+        detail: {
+          value: this._input.value,
+        },
+        composed: true,
+        bubbles: true,
+      })
+    );
+  }
+}

package/src/squi-radio-group.js

@@ -0,0 +1,111 @@
+/**
+ * @license
+ * Copyright (c) 2019 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at
+ * http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at
+ * http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at
+ * http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at
+ * http://polymer.github.io/PATENTS.txt
+ */
+
+import {LitElement, html, css} from 'lit';
+import { classMap } from 'lit/directives/class-map';
+import { SharedInputStyles } from './shared-input-styles.js';
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class SquiRadioGroup extends LitElement {
+
+  static get styles() {
+    return [
+      SharedInputStyles,
+      css`
+      :host {        
+        /* define direction of checkboxes*/
+        --my-direction: var(--group-direction, row);
+        
+        /* ToDo: Auf die schnelle, anders lösen (vertikal / horizontal als eigenschaft mit entsprechenden klassen)*/
+        --my-gap: var(--group-gap, 5px);
+      }
+
+      .group-style {
+        display: flex;
+        gap: var(--my-gap);
+        flex-direction: var(--my-direction);        
+      }
+
+    `];
+  }
+
+  static get properties() {
+    return {
+      label: {type: String},
+      valueName: { type: String },
+      errorMsg: {type: String}  // errorMsg (could set fronm outside for busines validation, internal validation=> todo)
+    };
+  }
+
+  constructor() {
+    super();
+    this.label = '';
+    this.valueName = '';
+    this.errorMsg = '';
+  }
+
+  get value() {
+    const elColl = this.getElementsByTagName('squi-checkbox');          
+    let returnVal;
+    Object.keys(elColl).forEach(keyValue => {              
+      if (elColl[keyValue].value === 'true') {        
+        returnVal = elColl[keyValue];
+      }
+    });    
+    return returnVal ? returnVal.valueName : undefined;
+  }
+
+  firstUpdated() {
+
+    // add event listener
+    this.addEventListener('checkbox-changed', (e) => {
+      const elCollection = this.getElementsByTagName('squi-checkbox');      
+      Object.keys(elCollection).forEach(keyValue => {                
+        if (elCollection[keyValue] !== e.target) {
+          elCollection[keyValue].value = false;          
+        }
+        elCollection[keyValue].readonly = (elCollection[keyValue].value === 'true');
+        // do with event handler, change from outside...
+        // this.errorMsg = '';
+      });
+    });
+
+    // set default
+    const elColl = this.getElementsByTagName('squi-checkbox');      
+      Object.keys(elColl).forEach(keyValue => {        
+        elColl[keyValue].readonly = elColl[keyValue].value === 'true';        
+      });
+
+  }
+
+  render() {
+    return html`
+      <label>${this.label}</label>
+      <div class="group-style input ${classMap({'error': this.errorMsg.length > 0})}">      
+        <slot></slot>        
+      </div>      
+      ${this.errorMsg.length > 0 ? html`
+        <div class="error-box error">
+          <span class="error-msg">${this.errorMsg}</span>
+        </div>
+      ` : ''}
+    `;
+  }
+ 
+}

package/src/squi-select.js

@@ -0,0 +1,308 @@
+import { html, css } from 'lit';
+import { classMap } from 'lit/directives/class-map';
+import { SharedInputStyles } from './shared-input-styles.js';
+
+import { SquiBaseUIInput, INPUT_TYPE_SELECT } from './squi-base-ui-input.js';
+
+import '@progressive-development/pd-icon/pd-icon.js';
+
+// https://github.com/Victor-Bernabe/lit-input
+// https://levelup.gitconnected.com/build-a-material-like-input-web-component-using-litelement-20e9e0d203b6
+/**
+ * Web component to input text implemented with LitElement.
+ *
+ * ### Styling
+ *
+ * All custom properties should start with `--squi-input`.
+ *
+ * Font and icon size will scale automatically with `squi-input`'s height.
+ *
+ * Custom property | Description | Default
+ * ----------------|-------------|--------
+ * `--squi-input-width` | Width | `250px`
+ * `--my-input-height` | Height | `30px`
+ * `--squi-input-border` | Border | `1px solid black`
+ * `--squi-input-border-focus` | Border when focused | `1px solid #4d90fe`
+ * `--squi-input-background-color` | Background color | `white`
+ * `--squi-input-font-size` | Font size | `calc(var(--my-input-height) / 1.8)`
+ * `--squi-input-text-color` | Text color | `inherit`
+ * `--squi-input-placeholder-color` | Placeholder text color | `#a0a0a0`
+ * `--squi-input-icon-fill-color` | Icon fill color | `currentcolor`
+ * `--squi-input-icon-stroke-color` | Icon stroke color | `none`
+ *
+ * ### Icon and text alignment
+ *
+ * The icon inside `squi-input` is hidden by default. To show it, set the attribute `icon-right` or `icon-left`.
+ *
+ *     <squi-input icon-left></squi-input>
+ *     <squi-input icon-right></squi-input>
+ *
+ *     <squi-input icon-left .icon="${'hardware:headset'}"></squi-input>
+ *
+ * Text can be left or right aligned. Default is left alignment.
+ *
+ *     <squi-input text-right></squi-input>
+ *     <squi-input text-left></squi-input>
+ */
+export class SquiSelect extends SquiBaseUIInput {
+  /**
+   * Fired when `squi-input` has focus and the user press `Enter` key.
+   * @event enter-pressed
+   */
+
+  /**
+   * Fired when `squi-input` has focus and the user press any key except `Enter`.
+   * @event key-pressed
+   */
+
+  /**
+   * Fired when value is changed
+   * @event change-value
+   */
+
+  /**
+   * Fire when the `squi-input` loses focus.
+   * @event focus-lost
+   */
+
+  /**
+   * Fire when the icon inside `squi-input` is clicked.
+   * @event icon-clicked
+   */
+
+  static get styles() {
+    return [
+      SharedInputStyles,
+      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;
+
+          /* 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');
+          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% */
+        }
+
+        .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);
+        }
+
+        /* Hide arrow icon in IE browsers */
+        .select-css::-ms-expand {
+          display: none;
+        }
+
+        /* Focus style */
+        .select-css:focus {
+          border-color: var(--my-border-color-focus);
+          /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
+          box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
+          box-shadow: 0 0 0 3px -moz-mac-focusring;
+          color: #222;
+          outline: none;
+        }
+
+        .error .select-css {
+          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');
+          /* 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%;
+        }
+
+        .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);
+        }
+
+        /* Set options to normal weight */
+        .select-css option {
+          font-weight: normal;
+        }
+
+        /* Disabled styles */
+        .select-css:disabled,
+        .select-css[aria-disabled='true'] {
+          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');
+          /* 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%;
+        }
+
+        .gradient:disabled,
+        .gradient[aria-disabled='true'] {
+          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, #ebebeb 0%, #999 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%;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      icon: { type: String },
+      values: { type: Array },
+    };
+  }
+
+  constructor() {
+    super();
+    this._inputType = INPUT_TYPE_SELECT;
+    this.icon = 'toggleCollapse';
+    this.values = [];
+  }
+
+  render() {
+    return html`
+      <label for="${this.id}Select">${this.label}</label>
+      <div class="input ${classMap({ error: this.errorMsg.length > 0 })}">
+        <squi-icon
+          icon="toggleCollapse"
+          @click="${this._onIconClick}"
+        ></squi-icon>
+        <select
+          id="${this.id}Input"
+          class="select-css input-style ${this.gradient ? 'gradient' : ''}"
+          ?disabled="${this.disabled}"
+          @change="${this._onChange}"
+          @keyup="${this._onKeyUp}"
+          @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>
+        <!-- Sollte erst Clientseitig im Input validiert werden. Meldung verschwindet erst beim Submit nicht mehr zeitgemäß-->
+        ${this.errorMsg.length > 0
+          ? html`<span class="error-msg">${this.errorMsg}</span>`
+          : ''}
+      </div>
+    `;
+  }
+
+  firstUpdated() {
+    // Save input reference for performance (bind html element to class property)
+    this._input = this.shadowRoot.querySelector('select');
+  }
+
+  _onKeyUp(event) {
+    // set value (tbd überdenken)
+    this.value = this._input.value;
+
+    // If Enter key pressed, fire 'enter-pressed'
+    // eslint-disable-next-line eqeqeq
+    if (event.keyCode == 13) {
+      this.dispatchEvent(
+        new CustomEvent('enter-pressed', {
+          detail: {
+            value: this._input.value,
+          },
+          composed: true,
+          bubbles: true,
+        })
+      );
+      event.preventDefault();
+    } else {
+      // If any other key, fire 'key-pressed'
+      this.dispatchEvent(
+        new CustomEvent('key-pressed', {
+          detail: {
+            value: this._input.value,
+          },
+          composed: true,
+          bubbles: true,
+        })
+      );
+    }
+  }
+
+  _onChange() {
+    this.value = this._input.value;
+    // this.errorMsg = ''; do not change public attribute inside component => progress, handle with event handler at the moment
+    this.dispatchEvent(
+      new CustomEvent('change-value', {
+        detail: {
+          value: this._input.value,
+          name: this.valueName,
+        },
+        composed: true,
+        bubbles: true,
+      })
+    );
+  }
+
+  _onBlur() {
+    this.dispatchEvent(
+      new CustomEvent('focus-lost', {
+        detail: {
+          value: this._input.value,
+        },
+        composed: true,
+        bubbles: true,
+      })
+    );
+  }
+
+  _onIconClick() {
+    this.dispatchEvent(
+      new CustomEvent('icon-clicked', {
+        detail: {
+          value: this._input.value,
+        },
+        composed: true,
+        bubbles: true,
+      })
+    );
+  }
+}

package/src/components/test-el.js

@@ -1,32 +0,0 @@
-import { html, css, LitElement } from 'lit';
-
-export class TestEl extends LitElement {
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-        padding: 25px;
-        color: var(--pd-forms-text-color, #000);
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      title: { type: String },
-      counter: { type: Number },
-    };
-  }
-
-  constructor() {
-    super();
-    this.title = 'Hey there';
-    this.counter = 5;
-  }
-  
-  render() {
-    return html`
-      <h2>Das ist wirklich gut</h2>      
-    `;
-  }
-}

package/test-el.js

@@ -1,34 +0,0 @@
-import { html, css, LitElement } from 'lit';
-
-export class TestEl extends LitElement {
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-        padding: 25px;
-        color: var(--pd-forms-text-color, #000);
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      title: { type: String },
-      counter: { type: Number },
-    };
-  }
-
-  constructor() {
-    super();
-    this.title = 'Hey there';
-    this.counter = 5;
-  }
-  
-  render() {
-    return html`
-      <h2>Das ist wirklich gut</h2>      
-    `;
-  }
-}
-
-window.customElements.define('test-el', TestEl);