@progressive-development/pd-contact 0.5.0 → 0.5.1

package/dist/src/PdContact.js

@@ -1,12 +1,12 @@
 import { LitElement, css, html } from "lit";
 import { msg } from "@lit/localize";
 import { PDFontStyles } from "@progressive-development/pd-shared-styles";
-import "../node_modules/@progressive-development/pd-icon/pd-icon.js";
-import "../node_modules/@progressive-development/pd-forms/pd-checkbox.js";
-import "../node_modules/@progressive-development/pd-forms/pd-form-container.js";
-import "../node_modules/@progressive-development/pd-forms/pd-form-row.js";
-import "../node_modules/@progressive-development/pd-forms/pd-input.js";
-import "../node_modules/@progressive-development/pd-forms/pd-radio-group.js";
+import "@progressive-development/pd-icon/pd-icon";
+import "@progressive-development/pd-forms/pd-checkbox";
+import "@progressive-development/pd-forms/pd-form-container";
+import "@progressive-development/pd-forms/pd-form-row";
+import "@progressive-development/pd-forms/pd-input";
+import "@progressive-development/pd-forms/pd-radio-group";
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@progressive-development/pd-contact",
-  "description": "Progressive Development Contact component",  
+  "description": "Progressive Development Contact component",
   "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "exports": {
@@ -34,11 +34,11 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@progressive-development/pd-forms": "^0.2.16",
-    "@progressive-development/pd-icon": "^0.1.23",
+    "@lit/localize": "^0.11.4",
+    "@progressive-development/pd-forms": "^0.5.0",
+    "@progressive-development/pd-icon": "^0.5.0",
     "@progressive-development/pd-shared-styles": "^0.1.1",
-    "lit": "^2.8.0",
-    "@lit/localize": "^0.11.4"
+    "lit": "^2.8.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
@@ -54,6 +54,7 @@
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
     "prettier": "^2.8.8",
+    "rollup-plugin-visualizer": "^5.13.1",
     "storybook": "^7.6.20",
     "vite": "^5.4.11",
     "vitest": "^2.1.8"

package/dist/node_modules/@progressive-development/pd-forms/pd-checkbox.js

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

package/dist/node_modules/@progressive-development/pd-forms/pd-form-container.js

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

package/dist/node_modules/@progressive-development/pd-forms/pd-form-row.js

@@ -1,2 +0,0 @@
-import { PdFormRow } from "./src/PdFormRow.js";
-window.customElements.define("pd-form-row", PdFormRow);

package/dist/node_modules/@progressive-development/pd-forms/pd-hover-box.js

@@ -1,2 +0,0 @@
-import { PdHoverBox } from "./src/PdHoverBox.js";
-window.customElements.define("pd-hover-box", PdHoverBox);

package/dist/node_modules/@progressive-development/pd-forms/pd-input.js

@@ -1,2 +0,0 @@
-import { PdInput } from "./src/PdInput.js";
-window.customElements.define("pd-input", PdInput);

package/dist/node_modules/@progressive-development/pd-forms/pd-radio-group.js

@@ -1,2 +0,0 @@
-import { PdRadioGroup } from "./src/PdRadioGroup.js";
-window.customElements.define("pd-radio-group", PdRadioGroup);

package/dist/node_modules/@progressive-development/pd-forms/src/PdBaseInputElement.js

@@ -1,86 +0,0 @@
-import { PdBaseUIInput, INPUT_TYPE_DATE, 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:
-        return "input";
-      case INPUT_TYPE_DATE:
-        return "pd-input";
-      default:
-        return "";
-    }
-  }
-}
-export {
-  PdBaseInputElement
-};

package/dist/node_modules/@progressive-development/pd-forms/src/PdBaseUi.js

@@ -1,33 +0,0 @@
-import { LitElement } from "lit";
-import { updateWhenLocaleChanges } from "@lit/localize";
-import { PDColorStyles, PDFontStyles } from "@progressive-development/pd-shared-styles";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- *  
- * Abstract base lit class for all pd-form elements.
- * Import shared-global-style to make common custom properties available to all components.
- * 
- * Used from:
- * - pd-base-ui-input
- * 
- * Used to:
- * - define css (import shared-global-styles.js)
- * - define common properties (detailieren, aktuell keine)
- * - define updateWhenLocaleChanges for all pd-elements (check, aktuell nur für pd-form-container benötigt)
- * 
- * Custom Properties (shared-global-styles):
- * ... TODO
- */
-class PdBaseUI extends LitElement {
-  static get styles() {
-    return [PDColorStyles, PDFontStyles];
-  }
-  constructor() {
-    super();
-    updateWhenLocaleChanges(this);
-  }
-}
-export {
-  PdBaseUI
-};

package/dist/node_modules/@progressive-development/pd-forms/src/PdBaseUiInput.js

@@ -1,229 +0,0 @@
-import { css, html } from "lit";
-import "../../pd-icon/pd-icon.js";
-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 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,
-  PdBaseUIInput
-};

package/dist/node_modules/@progressive-development/pd-forms/src/PdCheckbox.js

@@ -1,230 +0,0 @@
-import { css, html } from "lit";
-import { classMap as o } from "../../../lit-html/directives/class-map.js";
-import "../../pd-icon/pd-icon.js";
-import { PdBaseUIInput, INPUT_TYPE_CHECK } from "./PdBaseUiInput.js";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdCheckbox extends PdBaseUIInput {
-  static get properties() {
-    return {
-      isSwitch: { type: Boolean },
-      _hasInner: { type: Boolean, state: true }
-    };
-  }
-  constructor() {
-    super();
-    this._inputType = INPUT_TYPE_CHECK;
-  }
-  static get styles() {
-    return [
-      PdBaseUIInput.styles,
-      css`
-      :host {
-        display: inline-block;
-
-        /* Style for active checkbox => use defaults from pd-icon if no custom properties set */
-        --pd-icon-col-active: var(--pd-cb-col);
-        --pd-icon-col-active-hover: var(--pd-cb-col-hover);
-        --pd-icon-bg-col-active: var(--pd-cb-bg-col);
-        --pd-icon-stroke-col-active: var(--pd-cb-stroke-col);
-        --pd-icon-stroke-col-active-hover: var(--pd-cb-stroke-col-hover);
-
-        /* Style for inactive checkbox */
-        --pd-icon-col: var(--pd-cb-unset-col);
-        --pd-icon-col-hover: var(--pd-cb-unset-col-hover);
-        --pd-icon-bg-col: var(--pd-cb-unset-bg-col);
-        --pd-icon-stroke-col: var(--pd-cb-unset-stroke-col);
-        --pd-icon-stroke-col-hover: var(--pd-cb-unset-stroke-col-hover);
-      }
-
-      /* Switch pd-icon => Prüfen, bei mir musste ich reflect setzten, wird das verwendet? */
-      :host([isSwitch]) {
-        /* derzeit keine Angaben */
-      }
-
-      .div-container {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-      }
-
-      .div-container.disabled {
-        opacity: 0.5;
-        cursor: auto;
-      }
-
-      .div-container.readonly {
-        cursor: auto;
-      }
-
-      /*
-       * Class checkbox for icon and a element (checkbox case)
-       */
-      .checkbox {
-        display: flex;
-        border-radius: 4px;
-        line-height: 0;
-        align-items: center;
-        justify-content: center;
-        /*
-        Wurde das hier für Border verwendet? Aktuell border in folgendem Element gesetzt
-        background-color: var(--pd-cb-border-col, var(--pd-primary-col, #067394));
-        */
-
-      }
-
-      .checkbox pd-icon {
-        margin-right: .2rem;
-        margin-bottom: .2rem;
-        border: 2px solid var(--pd-cb-border-col, var(--pd-default-col));
-        border-radius: var(--pd-cb-border-radius, 3px);
-      }
-
-      .label {
-        margin-left: 0.1rem;
-        color: var(--pd-cb-font-col, var(--pd-default-font-input-col));
-        font-family: var(--pd-default-font-input-family);
-        text-align: left;
-        font-size: var(--pd-default-font-input-size);
-      }
-
-      .readonly .label {
-        color: var(--pd-cb-font-col-readonly, #4d4d4d);
-      }
-
-      .readonly .checkbox pd-icon {
-        border-color: var(--pd-cb-border-col-readonly, transparent);
-      }
-
-      /* Switch styles */
-      .switch {
-        height: var(--pd-cb-switch-height);
-        position: relative;
-        outline: 0;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-      }
-
-      .switch .label {
-        margin-left: 0.5rem;
-      }
-
-      .switch-paddle {
-        display: inline-block;
-        vertical-align: baseline;
-        margin: 0;
-        position: relative;
-        min-width: 4rem;
-        max-width: 4rem;
-        height: 2rem;
-        border-radius: 0;
-        background: var(--pd-cb-switch-paddle-col, var(--pd-default-col));
-        font-weight: inherit;
-        color: inherit;
-        cursor: pointer;
-      }
-
-      .switch-paddle pd-icon {
-        position: absolute;
-        top: 0;
-        left: 0;
-        display: block;
-        width: 1.5rem;
-        height: 1.5rem;
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        border: 2px solid var(--pd-cb-border-col, var(--pd-default-col));
-        box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
-        border-radius: var(--pd-cb-border-radius, 4px);
-        -webkit-transition: all 0.25s ease-out;
-        transition: all 0.25s ease-out;
-        content: '';
-      }
-
-      .disabled .switch-paddle {
-        cursor: auto;
-      }
-
-      .readonly .switch-paddle {
-        cursor: auto;
-        max-width: 2rem;
-        min-width: 2rem;
-        background: none;
-
-        /* Prüfen TODO
-        --pd-icon-bg: transparent;
-        --pd-icon-fill: var(--card-dark-red);
-        --pd-icon-fill-hover: var(--pd-icon-fill);
-        --pd-icon-fill-active: var(--card-medium-green);
-        */
-      }
-
-      .readonly .switch-paddle pd-icon {
-        border-color: var(--pd-cb-border-col-readonly, transparent);
-      }
-
-      .readonly .isChecked.switch-paddle pd-icon {
-        transform: translate3d(0, 0, 0);
-        left: 0rem;
-      }
-
-      .isChecked.switch-paddle pd-icon {
-          left: 2.25rem;
-      }
-
-      @media (min-width: 580px) {
-        :host {
-          font-size: 1rem;
-        }
-      }
-    `
-    ];
-  }
-  render() {
-    if (!this._hasInnerSet) {
-      this._hasInnerSet = true;
-      this._hasInner = !!this.innerHTML.trim().length;
-    }
-    const checked = this.value === "true";
-    const classMapVal = { "disabled": this.disabled, "switch": this.isSwitch, "readonly": this.readonly, "div-container": true };
-    const aClassMap = { "switch-paddle": this.isSwitch, "checkbox": !this.isSwitch, "isChecked": checked, "isUnchecked": !checked };
-    const inputId = `${this.id}Check`;
-    return html`
-      ${this._renderLabel(inputId)}
-      <div @click="${this.onClick}" class="${o(classMapVal)}">
-        <a href="#" @click="${this.linkClick}" @keypress="${this.onKeyPress}" class="${o(aClassMap)}">
-          <pd-icon icon="${this.isSwitch ? "checkBox" : "checkBoxOnlyCheck"}" class="small" ?activeIcon="${checked}"></pd-icon>
-        </a>
-        ${this._hasInner ? html`
-          <span class="label">
-            <slot></slot>
-          </span>` : ""}
-      </div>
-      ${this._renderErrorMsg()}
-    `;
-  }
-  onClick(e) {
-    if (this.disabled || this.readonly) {
-      return;
-    }
-    const checked = this.value === "true";
-    this._handleChangedValue(checked ? "false" : "true", e);
-  }
-  onKeyPress(e) {
-    e.preventDefault();
-    if (e.keyCode === 32 || e.code === "Space") {
-      this.onClick(e);
-    }
-  }
-  // eslint-disable-next-line class-methods-use-this
-  linkClick(e) {
-    e.preventDefault();
-  }
-}
-export {
-  PdCheckbox
-};