@progressive-development/pd-forms 0.5.7 → 0.6.0

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@progressive-development/pd-forms",
-  "description": "Webcomponent pd-forms following open-wc recommendations",
+  "version": "0.6.0",
+  "description": "Webcomponent pd-forms for rendering form input elements.",
   "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",
-  "version": "0.5.7",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
     "./pd-button": "./dist/pd-button.js",
@@ -31,68 +32,51 @@
     "LICENSE"
   ],
   "scripts": {
-    "analyze": "cem analyze --litelement",
+    "analyze": "cem analyze --litelement --exclude dist,demo",
     "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",
+    "clean": "rm -rf dist",
+    "lint": "eslint --ext .ts,.html src --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html src --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
     "test": "vitest run --coverage",
     "test:watch": "vitest --watch",
+    "check": "npm run lint && npm run build",
+    "prepublishOnly": "npm run clean && npm run check",
     "localizeExtract": "lit-localize extract",
     "localizeBuild": "lit-localize build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@lit-labs/motion": "1.0.3",
-    "@lit/localize": "^0.11.4",
-    "@progressive-development/pd-icon": "^0.5.0",
-    "@progressive-development/pd-shared-styles": "0.1.1",
-    "lit": "^2.8.0"
+    "@lit-labs/motion": "^1.0.8",
+    "@lit/localize": "^0.12.2",
+    "@progressive-development/pd-icon": "^0.6.1",
+    "@progressive-development/pd-shared-styles": "^0.2.1",
+    "lit": "^3.3.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.3.4",
+    "@chromatic-com/storybook": "^1.9.0",
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@lit/localize-tools": "^0.6.10",
-    "@storybook/addon-essentials": "^8.0.10",
-    "@storybook/addon-links": "^8.0.10",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
     "@storybook/blocks": "^8.0.10",
-    "@storybook/test": "^8.0.10",
+    "@storybook/test": "^8.6.14",
     "@storybook/web-components": "^8.0.10",
-    "@storybook/web-components-vite": "^8.0.10",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.10.0",
+    "@storybook/web-components-vite": "^8.6.14",
+    "@typescript-eslint/eslint-plugin": "^8.32.1",
+    "@typescript-eslint/parser": "^8.32.1",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-storybook": "^0.8.0",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.4",
-    "prettier": "^2.8.8",
-    "rollup-plugin-visualizer": "^5.13.1",
-    "storybook": "^8.0.10",
-    "vite": "^5.4.11",
-    "vitest": "^2.1.8"
+    "prettier": "^3.5.3",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "storybook": "^8.6.14",
+    "typescript": "^5.8.3",
+    "vite": "^5.4.19",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^2.1.9"
   },
-  "customElements": "custom-elements.json",
-  "eslintConfig": {
-    "extends": [
-      "@open-wc",
-      "prettier",
-      "plugin:storybook/recommended"
-    ]
-  },
-  "prettier": {
-    "singleQuote": true,
-    "arrowParens": "avoid"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.js": [
-      "eslint --fix",
-      "prettier --write"
-    ]
-  }
+  "customElements": "custom-elements.json"
 }

package/dist/src/PdBaseInputElement.js

@@ -1,87 +0,0 @@
-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
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- *
- * Abstract base lit class for pd-input elements.
- *
- * Used from:
- * - pd-input
- * - pd-input-area
- * - pd-select
- *
- * Used to:
- * - define element specific css
- * - handle auto completion
- *
- * Events:
- * - TODO
- *
- * Custom Properties (shared-input-field-styles):
- * ... TODO
- *
- */
-class PdBaseInputElement extends PdBaseUIInput {
-  /**
-   * Fire when the `pd-input` loses focus.
-   * @event focus-lost
-   */
-  static get styles() {
-    return [PdBaseUIInput.styles, SharedInputFieldStyles];
-  }
-  static get properties() {
-    return {
-      placeHolder: { type: String },
-      /* not used at the moment */
-      name: { type: String },
-      autoCompleteName: { type: String }
-    };
-  }
-  constructor() {
-    super();
-    this.placeHolder = "";
-    this.name = "";
-    this._input = {};
-  }
-  firstUpdated() {
-    this._input = this.shadowRoot.querySelector(this._getElementName());
-  }
-  focus() {
-    this._input.focus();
-  }
-  _onBlur(event) {
-    this.dispatchEvent(
-      new CustomEvent("focus-lost", {
-        detail: {
-          value: this._input.value
-        },
-        composed: true,
-        bubbles: true
-      })
-    );
-    this._handleChangedValue(this._input.value, event, true, true);
-  }
-  _onKeyUp(event) {
-    this._handleChangedValue(this._input.value, event, true);
-  }
-  _getElementName() {
-    switch (this._inputType) {
-      case INPUT_TYPE_AREA:
-        return "textarea";
-      case INPUT_TYPE_SELECT:
-        return "select";
-      case INPUT_TYPE_FILE:
-      case INPUT_TYPE_TEXT:
-      case INPUT_TYPE_TIME:
-        return "input";
-      case INPUT_TYPE_DATE:
-        return "pd-input";
-      default:
-        return "";
-    }
-  }
-}
-export {
-  PdBaseInputElement
-};

package/dist/src/PdBaseUiInput.js

@@ -1,231 +0,0 @@
-import { css, html } from "lit";
-import "@progressive-development/pd-icon/pd-icon";
-import { PdBaseUI } from "./PdBaseUi.js";
-import { SharedInputStyles } from "./shared-input-styles.js";
-import "../pd-hover-box.js";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- *
- * Abstract base lit class for pd-input elements.
- *
- * Used from:
- * - pd-checkbox
- * - pd-input
- * - pd-input-area
- * - pd-radio-group
- * - pd-range
- * - pd-select
- *
- * Used to:
- * - define css (import additional shared-input-styles.js)
- * - define common properties (detailieren, aktuell zu viele bzw. nicht für alle sub-elemente gültig)
- * - handle error msg (getter/setter)
- * - helpers for validation event after change and render label/error elements.
- *
- * Events:
- *  - validate-form => fired when input element changed its value.
- *  - enter-pressed => fired when enter pressed.
- *  - field-change => fired when input element changed its value.
- *
- * Custom Properties (shared-input-styles):
- * ... TODO
- *
- */
-const INPUT_TYPE_TEXT = 1;
-const INPUT_TYPE_SELECT = 2;
-const INPUT_TYPE_CHECK = 3;
-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;
-class PdBaseUIInput extends PdBaseUI {
-  /**
-   * Fired when an input element change its values.
-   * @event validate-form
-   */
-  /**
-   * Fired when enter was pressend during focus on input element.
-   * @event enter-pressed
-   */
-  /**
-   * Fired when field-value changed.
-   * @event field-change
-   */
-  static get styles() {
-    return [
-      PdBaseUI.styles,
-      SharedInputStyles,
-      css`
-            .label-header {
-              display: flex;
-              align-items: end;
-              justify-content: space-between;
-            }
-
-            .label-header pd-icon {
-              --pd-icon-size: 1.25rem;
-              --pd-icon-col-active: var(--pd-default-col);
-              --pd-icon-col-active-hover: var(--pd-default-hover-col);
-              --pd-icon-stroke-width: 0;
-              padding-right: 5px;
-              cursor: help;
-            }
-          `
-    ];
-  }
-  static get properties() {
-    return {
-      gradient: { type: Boolean },
-      // true for gradient background
-      disabled: { type: Boolean },
-      // disabled flag for element
-      readonly: { type: Boolean },
-      // readonly flag for element
-      required: { type: Boolean },
-      // required flag for element
-      requiredMsg: { type: String },
-      // specific error msg for required field
-      helperTxt: { type: String },
-      // helper text
-      valueName: { type: String },
-      defaultRequiredChar: { type: String },
-      defaultValue: { type: String },
-      // default value for input element (used for reset) TODO: Das hier ggf. automatisch mit erstem gesetzten Wert füllen?
-      label: { type: String },
-      // label text for input
-      value: { type: String },
-      // current value (set from outside) TODO: Typ (Object, Number, Txt, Bool...)
-      _errorMsg: { type: String, state: true },
-      // errorMsg (could set fronm outside for busines validation, internal validation=> todo)
-      _inputType: { type: Number, state: true }
-      // number value for type (text, select, range....), set constructor of sub-class
-    };
-  }
-  constructor() {
-    super();
-    this.gradient = false;
-    this.disabled = false;
-    this.readonly = false;
-    this.defaultValue = "";
-    this.label = "";
-    this.value = "";
-    this._errorMsg = "";
-    this._inputType = -1;
-    this.valueName = "";
-    this.defaultRequiredChar = "*";
-  }
-  // Test: Clear input with value => Dann in BasisKlasse und alle leiten von Basis UI Element ab
-  clear() {
-    this.value = "";
-  }
-  // Test: Reset input with value
-  reset() {
-    this.value = this.defaultValue || "";
-  }
-  get errorMsg() {
-    return this._errorMsg;
-  }
-  set errorMsg(msg) {
-    this._errorMsg = msg;
-  }
-  /*
-       get value() {
-           return this._value;
-       }
-  
-       set value(newValue) {
-           console.info("Meine Werte vor Set _value, input.value, newValue: ", this._value,  this._input.value, newValue);
-           this._value = newValue;
-           this._input.value = newValue;
-           console.info("Meine Werte nach Set: ", this._value,  this._input.value, newValue);
-       }
-       */
-  _generateValidateEvent() {
-    this.dispatchEvent(
-      new CustomEvent("validate-form", {
-        detail: {
-          singleElement: this,
-          errorMap: /* @__PURE__ */ new Map()
-        },
-        composed: true,
-        bubbles: true
-      })
-    );
-  }
-  _handleChangedValue(newValue, event, checkReturn, showValidateMsg) {
-    const changed = this.value !== newValue;
-    this.value = newValue;
-    const keyCode = event.keyCode ? Number(event.keyCode) : -1;
-    const eventDetail = {
-      value: newValue,
-      name: this.valueName,
-      keyCode,
-      changed
-    };
-    const handleReturn = checkReturn && keyCode === KEY_RETURN;
-    if (handleReturn) {
-      this.dispatchEvent(
-        new CustomEvent("enter-pressed", {
-          detail: eventDetail,
-          composed: true,
-          bubbles: true
-        })
-      );
-      event.preventDefault();
-    }
-    if (changed) {
-      this.dispatchEvent(
-        new CustomEvent("field-change", {
-          detail: eventDetail,
-          composed: true,
-          bubbles: true
-        })
-      );
-    }
-    if (showValidateMsg) {
-      clearTimeout(delayTimer);
-      delayTimer = setTimeout(
-        this._generateValidateEvent.bind(this),
-        DELAY_WAIT_TIME_MS
-      );
-    }
-  }
-  _renderErrorMsg() {
-    return this.errorMsg && this.errorMsg.length > 0 ? html`
-        <div class="error-box error">
-          <p class="error-msg">${this.errorMsg}</p>
-        </div>
-      ` : "";
-  }
-  _renderLabel(forParam, additionalValue) {
-    return html`
-          <div class="label-header">
-            <label for="${forParam}">${this.label}${this.required && this.label ? this.defaultRequiredChar : ""}${additionalValue ? html` - <b>${additionalValue}</b>` : ""}</label>
-            ${this.helperTxt ? html`
-                
-                <pd-hover-box>
-                    <pd-icon slot="normal-view" icon="helpIcon" activeIcon></pd-icon>                    
-                    <p slot="info-view">${this.helperTxt}</p>
-                </pd-hover-box>
-                
-                ` : ""}
-          </div>
-        `;
-  }
-}
-export {
-  INPUT_TYPE_AREA,
-  INPUT_TYPE_CHECK,
-  INPUT_TYPE_DATE,
-  INPUT_TYPE_FILE,
-  INPUT_TYPE_RANGE,
-  INPUT_TYPE_SELECT,
-  INPUT_TYPE_TEXT,
-  INPUT_TYPE_TIME,
-  PdBaseUIInput
-};

package/dist/src/PdButton.js

@@ -1,194 +0,0 @@
-import { css, html } from "lit";
-import { PdBaseUI } from "./PdBaseUi.js";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdButton extends PdBaseUI {
-  /**
-   * @event button-clicked
-   */
-  static get styles() {
-    return [
-      PdBaseUI.styles,
-      css`
-       :host {        
-         
-         font-family: var(--pd-default-font-title-family);
-         font-size: var(--pd-button-font-size, 1em);
-         font-weight: var(--pd-button-font-weight, normal);
-         
-         /*        
-         height: 100%;         
-         width: 100%; => Ohne diese Angabe eht die % Angaben icht
-         */                    
-         margin: 0.5rem;
-         margin-left: 0; /* Um gleich zum input field zu sein */
- 
-         pointer-events: none;
-       }
- 
-       .button-div {
- 
-         display: flex;      
-         justify-content: center;
-         align-items: center;
-         width: var(--pd-button-width, 140px);
-         height: var(--pd-button-height, 2rem);
-         
-         border-radius: var(--pd-border-radius, 1px);
- 
-         background-color: var(--pd-button-bg-col, var(--pd-default-dark-col));
-         color: var(--pd-button-font-col, var(--pd-default-bg-col));
-         border: var(--pd-button-border, 0);
-         cursor: pointer;
- 
-         box-shadow: var(--pd-button-box-shadow, none);
- 
-         pointer-events: all;
-       }
- 
-       :host(:not([disabled])) .button-div:hover {
-         box-shadow: var(--pd-button-box-shadow-hover, -1px 1px 2px var(--pd-default-dark-col)); 
-         background-color: var(--pd-button-bg-col-hover, var(--pd-default-hover-col));
-         color: var(--pd-button-font-col-hover, var(--pd-default-dark-col));
-         transition: background-color 0.4s ease 0s;        
-         --pd-button-border: var(--pd-button-border-hover);
-       }
-
-       :host(:not([disabled])):host([primary]) .button-div:hover {         
-         background-color: var(--pd-button-primary-bg-col-hover, var(--pd-default-hover-col));      
-         color: var(--pd-button-primary-font-col-hover, var(--pd-default-bg-col));   
-         --pd-button-border: var(--pd-button-border-hover);
-       }
- 
-       :host([primary]) .button-div {
-         background-color: var(--pd-button-primary-bg-col, var(--pd-default-col));
-         color: var(--pd-button-primary-font-col, var(--pd-default-bg-col));
-       }
- 
-       :host([gradient]) .button-div {
-         background: linear-gradient(to right, var(--my-background-gradient-color, red) 0%, var(--my-background-color, blue) 100%);      
-       }      
- 
-       :host([disabled]) .button-div {
-         cursor: auto;            
-         border-color: var(--pd-default-disabled-col);
-         background-color: var(--pd-button-bg-col-disabled, var(--pd-default-disabled-col));
-         color: var(--pd-button-font-col-disabled, black);
-         --pd-button-border: var(--pd-button-border-disabled);
-       }
- 
-       /* Style for Button */
-       a {
-         display: inline-block;
-         text-decoration: none;
-         border: none;        
-         white-space: nowrap;
-         margin: 0.5rem;
-         pointer-events: none;        
- 
-         /*box-shadow:  -2px 2px 4px #999;/* TODO: From var */
-         /*border-bottom: 1px solid var(--my-border-color);*/
-         /*will-change: transform; Dann über Menu bei Scroll...*/
- 
-         /*
-         transition-property: box-shadow, background;
-         transition: .2s ease-in;
-         box-sizing: border-box;
-         */
-         
-         /*overflow: hidden;
-         text-overflow: ellipsis;*/
-         
-         /*padding: var(--squi-input-padding, .5rem);*/
-       }
-             
- 
-       /* button icon not integrated at the moment */
-       .button-icon {
-         display: flex;
-         align-items: center;
-         justify-content: center;
-         white-space: nowrap;
-         --pd-icon-fill: var(--icon-fill-light);
-         --pd-icon-fill-hover: var(--icon-fill-light);
-       }
-       
-       .button-icon:not([disabled]) {
-         --pd-icon-fill: var(--app-primary-color);
-         --pd-icon-fill-hover: var(--app-primary-color-dark);
-       }
- 
-       .button-icon pd-icon {
-         max-width: 1.25rem;
-         height: 1.25rem;
-         width: 1.25rem;
-         margin: 0 .15rem;
-       }
- 
-       .button-icon.small pd-icon {
-         max-width: 1.25rem;
-         height: 1.25rem;
-         width: 1.25rem;
-         padding-right: 0.15rem;
-       }
- 
-       .button-icon svg {
-           max-width: 1rem;
-           height: 1rem;
-           width: 1rem;
-           padding-right: .5rem;
-           fill: var(--app-primary-color);
-       }
-       
-       .button-icon:hover pd-icon,    
-       .button-icon:hover svg {
-           fill: var(--app-primary-color);
-       }            
- 
-       @media (min-width: 580px) {        
-         .button-icon pd-icon {
-             margin: 0 .5rem;
-         }        
-         .button-icon.small pd-icon {
-             padding-right: .5rem;
-         }
-       }
- 
-     `
-    ];
-  }
-  static get properties() {
-    return {
-      primary: { type: Boolean },
-      gradient: { type: Boolean },
-      disabled: { type: Boolean },
-      text: { type: String },
-      value: { type: String }
-    };
-  }
-  constructor() {
-    super();
-    this.primary = false;
-    this.gradient = false;
-    this.disabled = false;
-    this.text = "Ok";
-  }
-  render() {
-    return html`
-     <div @click="${this._handleClick}" class="button-div">
-       <a ?disabled="${this.disabled}">${this.text}</a>
-     </div>`;
-  }
-  _handleClick() {
-    if (!this.disabled) {
-      this.dispatchEvent(new CustomEvent("button-clicked", {
-        detail: this.value
-      }));
-    }
-  }
-}
-export {
-  PdButton
-};