@progressive-development/pd-forms 0.2.15 → 0.5.0

package/dist/src/PdInputFile.js

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

@@ -0,0 +1,72 @@
+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/{src → dist/src}/PdRange.js

@@ -1,35 +1,29 @@
+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.
  */
-
-import { html, css } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
-
-import { PdBaseUIInput, INPUT_TYPE_RANGE } from './PdBaseUiInput.js';
-
-export 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`
+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/
@@ -230,19 +224,17 @@ export class PdRange extends PdBaseUIInput {
           }
 
           `
-        ];
-    }
-
-    render() {
-      const inputId = `${this.id}Range`;
-      // TODO: step kann hier nicht übergeben werden, wird dann initial nicht immer richtig angezeigt (bei komma rundungen)???
-      return html`
+    ];
+  }
+  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' : ''}"
+            class="input-range-style ${this.gradient ? "gradient" : ""}"
             type="range"
             .value="${this.value}"
             ?readonly="${this.readonly}"
@@ -262,15 +254,14 @@ export class PdRange extends PdBaseUIInput {
         </div>
         ${this._renderErrorMsg()}
         `;
-    }
-
-    firstUpdated() {
-      // Save input reference for performance
-      this._input = this.shadowRoot.querySelector('input');
-    }
-
-    _onChange(e) {
-      this._handleChangedValue(this._input.value, e, false);
-    }
-
+  }
+  firstUpdated() {
+    this._input = this.shadowRoot.querySelector("input");
+  }
+  _onChange(e) {
+    this._handleChangedValue(this._input.value, e, false);
+  }
 }
+export {
+  PdRange
+};

package/{src → dist/src}/PdSelect.js

@@ -1,55 +1,11 @@
+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.
  */
-
-import { html, css } from 'lit';
-
-import '@progressive-development/pd-icon/pd-icon.js';
-
-import { INPUT_TYPE_SELECT } from './PdBaseUiInput.js';
-import { PdBaseInputElement } from './PdBaseInputElement.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
- * ----------------|-------------|--------
- * `--pd-input-field-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`.
- *
- *     <pd-input icon-left></pd-input>
- *     <pd-input icon-right></pd-input>
- *
- *     <pd-input icon-left .icon="${'hardware:headset'}"></pd-input>
- *
- * Text can be left or right aligned. Default is left alignment.
- *
- *     <pd-input text-right></pd-input>
- *     <pd-input text-left></pd-input>
- */
-export class PdSelect extends PdBaseInputElement {
-
+class PdSelect extends PdBaseInputElement {
   static get styles() {
     return [
       PdBaseInputElement.styles,
@@ -113,30 +69,27 @@ export class PdSelect extends PdBaseInputElement {
           background-size: 0.65em auto, 100%;
           background-color: var(--my-error-background-color);
         }
-      `,
+      `
     ];
   }
-
   static get properties() {
     return {
-      values: { type: Array },
+      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' : ''}">
+      <div class="input ${this.errorMsg.length > 0 ? "error" : ""}">
         <select
           id="${selectId}"
-          class="input-style select-css ${this.gradient ? 'gradient' : ''}"
+          class="input-style select-css ${this.gradient ? "gradient" : ""}"
           ?disabled="${this.disabled}"
           name="${this.name || this.valueName || this.autoCompleteName}"
           autocomplete=${this.autoCompleteName}
@@ -145,30 +98,28 @@ export class PdSelect extends PdBaseInputElement {
           @blur="${this._onBlur}"
         >
           ${this.values.map(
-            val => html`
+      (val) => html`
               <option
                 value="${val.value}"
-                ?selected=${
-                  // eslint-disable-next-line eqeqeq
-                  this.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() {    
-    // this._handleChangedValue(this._input.value, event, true);
+  _onSelectKeyUp() {
   }
-
 }
+export {
+  PdSelect
+};

package/{src → dist/src}/shared-input-field-styles.js

@@ -1,14 +1,9 @@
+import { css } from "lit";
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
-
-import { css } from 'lit';
-
-/**
- * Shared styles for pd-input, pd-input-area and pd-select.
- */
-export const SharedInputFieldStyles = css`
+const SharedInputFieldStyles = css`
 
   /* Describe input div (with icon) around input/select/area element */  
   .input {
@@ -151,4 +146,7 @@ export const SharedInputFieldStyles = css`
     color: var(--pd-input-placeholder-color, #474747e4);
   } 
 
-`;
+`;
+export {
+  SharedInputFieldStyles
+};

package/{src → dist/src}/shared-input-styles.js

@@ -1,15 +1,9 @@
+import { css } from "lit";
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
-
-import { css } from 'lit';
-
-/**
- * Shared styles for all input elements:
- * Used from pd-input, pd-select, pd-input-area, pd-range, pd-checkbox and pd-radio-group.
- */
-export const SharedInputStyles = css`
+const SharedInputStyles = css`
   
   /**
    * Label used for input, select, input-area, range and radio-group.
@@ -65,3 +59,6 @@ export const SharedInputStyles = css`
   }
 
 `;
+export {
+  SharedInputStyles
+};

package/package.json

@@ -1,18 +1,43 @@
 {
   "name": "@progressive-development/pd-forms",
-  "description": "Webcomponent pd-forms following open-wc recommendations",
-  "license": "SEE LICENSE IN LICENSE",
+  "description": "Webcomponent pd-forms following open-wc recommendations",  
   "author": "PD Progressive Development",
-  "version": "0.2.15",
-  "main": "index.js",
-  "module": "index.js",
+  "license": "SEE LICENSE IN LICENSE",
+  "version": "0.5.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./pd-button": "./dist/pd-button.js",
+    "./pd-checkbox": "./dist/pd-checkbox.js",
+    "./pd-form-container": "./dist/pd-form-container.js",
+    "./pd-form-row": "./dist/pd-form-row.js",
+    "./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": "./dist/pd-input.js",
+    "./pd-radio-group": "./dist/pd-radio-group.js",
+    "./pd-range": "./dist/pd-range.js",
+    "./pd-select": "./dist/pd-select.js",
+    "./locales/be": "./dist/locales/be.js",
+    "./locales/de": "./dist/locales/de.js",
+    "./locales/en": "./dist/locales/en.js"
+  },
+  "files": [
+    "dist/",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
     "analyze": "cem analyze --litelement",
-    "start": "web-dev-server",
-    "lint": "eslint --ext .js,.html . --ignore-path .gitignore && prettier \"**/*.js\" --check --ignore-path .gitignore",
-    "format": "eslint --ext .js,.html . --fix --ignore-path .gitignore && prettier \"**/*.js\" --write --ignore-path .gitignore",
-    "test": "web-test-runner --coverage",
-    "test:watch": "web-test-runner --watch",
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint --ext .js,.html . --ignore-path .gitignore && prettier \"**/*.{js,html}\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .js,.html . --fix --ignore-path .gitignore && prettier \"**/*.{js,html}\" --write --ignore-path .gitignore",
+    "test": "vitest run --coverage",
+    "test:watch": "vitest --watch",
     "localizeExtract": "lit-localize extract",
     "localizeBuild": "lit-localize build",
     "storybook": "storybook dev -p 6006",
@@ -21,29 +46,28 @@
   "dependencies": {
     "@lit-labs/motion": "^1.0.6",
     "@lit/localize": "^0.11.4",
-    "@progressive-development/pd-icon": "^0.1.22",
+    "@progressive-development/pd-icon": "^0.5.0",
     "@progressive-development/pd-shared-styles": "0.1.1",
     "lit": "^2.8.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
-    "@lit/localize-tools": "^0.6.10",
-    "@open-wc/eslint-config": "^4.3.0",
-    "@open-wc/testing": "^3.2.2",
-    "@storybook/addon-essentials": "^7.6.4",
-    "@storybook/addon-links": "^7.6.4",
-    "@storybook/blocks": "^7.5.1",
-    "@storybook/web-components": "^7.5.1",
-    "@storybook/web-components-vite": "^7.6.4",
-    "@web/dev-server": "^0.1.38",
-    "@web/test-runner": "^0.13.31",
+    "@lit/localize-tools": "^0.7.2",
+    "@storybook/addon-essentials": "^7.6.20",
+    "@storybook/addon-links": "^7.6.20",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/web-components": "^7.5.3",
+    "@storybook/web-components-vite": "^7.6.20",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-storybook": "^0.6.15",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
     "prettier": "^2.8.8",
-    "storybook": "^7.6.4"
+    "rollup-plugin-visualizer": "^5.13.1",
+    "storybook": "^7.6.20",
+    "vite": "^5.4.11",
+    "vitest": "^2.1.8"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {
@@ -67,8 +91,5 @@
       "eslint --fix",
       "prettier --write"
     ]
-  },
-  "directories": {
-    "test": "test"
   }
 }

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.storybook/main.js

@@ -1,13 +0,0 @@
-/** @type { import('@storybook/web-components-vite').StorybookConfig } */
-const config = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
-  framework: {
-    name: '@storybook/web-components-vite',
-    options: {},
-  },
-  docs: {
-    autodocs: 'tag',
-  },
-};
-export default config;

package/.storybook/preview-head.html

@@ -1,4 +0,0 @@
-<link rel="preconnect" href="https://fonts.gstatic.com">
-<link href="https://family=Roboto:wght@300;400&display=swap" rel="stylesheet">
-<link href="https://webfonts.ffonts.net/Gidolinya-Regular.font" rel="stylesheet">
-

package/.storybook/preview.js

@@ -1,14 +0,0 @@
-/** @type { import('@storybook/web-components').Preview } */
-const preview = {
-  parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;

package/demo/index.html

@@ -1,29 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <style>
-    body {
-      background: #fafafa;
-    }
-  </style>
-</head>
-<body>
-  <div id="demo"></div>
-
-  <script type="module">
-    import { html, render } from 'lit';
-    import '../pd-forms.js';
-
-    const title = 'Hello owc World!';
-    render(
-      html`
-        <pd-forms .title=${title}>
-          some light-dom
-        </pd-forms>
-      `,
-      document.querySelector('#demo')
-    );
-  </script>
-</body>
-</html>

package/lit-localize.json

@@ -1,18 +0,0 @@
-{
-    "$schema": "https://raw.githubusercontent.com/lit/lit/main/packages/localize-tools/config.schema.json",
-    "sourceLocale": "de",
-    "targetLocales": ["en", "be"],
-    "inputFiles": [
-      "src/**/*.js"
-    ],
-    "output": {
-        "mode": "runtime",
-        "localeCodesModule": "src/generated/locale-codes.js",
-        "outputDir": "src/generated/locale"
-        
-    },
-    "interchange": {
-      "format": "xliff",
-      "xliffDir": "./xliff/"
-    }
-  }

package/pd-button.js

@@ -1,3 +0,0 @@
-import { PdButton } from './src/PdButton.js';
-
-window.customElements.define('pd-button', PdButton);

package/pd-checkbox.js

@@ -1,3 +0,0 @@
-import { PdCheckbox } from './src/PdCheckbox.js';
-
-window.customElements.define('pd-checkbox', PdCheckbox);

package/pd-form-container.js

@@ -1,3 +0,0 @@
-import { PdFormContainer } from './src/PdFormContainer.js';
-
-window.customElements.define('pd-form-container', PdFormContainer);