@progressive-development/pd-forms 0.2.15 → 0.5.0

package/src/PdRadioGroup.js

@@ -1,88 +0,0 @@
-/**
- * @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 } from './PdBaseUiInput.js'; 
-
-/**
- * An example element.
- *
- * @slot - This element has a slot
- * @csspart button - The button
- */
-export 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() {
-
-    // add event listener
-    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');
-      });
-
-      // validate radio-group after change
-      this.dispatchEvent(
-        new CustomEvent('validate-form', {
-          detail: {
-            singleElement: this,
-            errorMap: new Map()
-          },
-          composed: true,
-          bubbles: true,
-        })
-      );
-    });
-
-    // set default
-    const elColl = this.getElementsByTagName('pd-checkbox');      
-      Object.keys(elColl).forEach(keyValue => {        
-        if (elColl[keyValue].value === 'true') {
-          elColl[keyValue].readonly = true;
-          // führt aktuell zu update cycle log
-          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()}
-    `;
-  }
- 
-}

package/src/PdRange copy.js

@@ -1,197 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-
-import { html, css } from 'lit';
-
-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},
-          showLegend: { type: Boolean }
-        };
-    }
-
-    constructor() {
-      super();
-      this._inputType = INPUT_TYPE_RANGE;
-      this.step = 0.1;
-      this.showLegend = false;
-    }
-
-    static get styles() {
-        return [
-          css`
-          input[type=range] {
-            -webkit-appearance: none;
-            margin: 0;
-            width: 100%;
-            background-color: var(--my-background-color);
-            padding: var(--squi-input-padding, .5rem);
-            height: var(--my-input-height);
-            box-sizing: border-box;
-          }
-          input[type=range]:focus {
-            outline: none;
-          }
-          input[type=range]::-webkit-slider-runnable-track {
-            width: 100%;
-            cursor: pointer;
-            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-            background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
-            border-radius: 3px;
-            border: 0px solid #000101;
-          }
-          input[type=range]::-webkit-slider-thumb {
-            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-            border: 0px solid #000000;
-            height: 20px;
-            width: 39px;
-            border-radius: 3px;
-            background: var(--my-primary-color);
-            cursor: pointer;
-            -webkit-appearance: none;
-            margin-top: -3.6px;
-          }
-          input[type=range]:focus::-webkit-slider-runnable-track {
-            background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
-          }
-          input[type=range]::-moz-range-track {
-            width: 100%;
-            height: 12.8px;
-            cursor: pointer;
-            animation: 0.2s;
-            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-            background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
-            border-radius: 3px;
-            border: 0px solid #000101;
-          }
-          input[type=range]::-moz-range-thumb {
-            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-            border: 0px solid #000000;
-            height: 20px;
-            width: 39px;
-            border-radius: 3px;
-            background: var(--my-primary-color);
-            cursor: pointer;
-          }
-          input[type=range]::-ms-track {
-            width: 100%;
-            height: 12.8px;
-            cursor: pointer;
-            animation: 0.2s;
-            background: transparent;
-            border-color: transparent;
-            border-width: 39px 0;
-            color: transparent;
-          }
-          input[type=range]::-ms-fill-lower {
-            background: linear-gradient(-90deg, rgba(var(---my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
-            border: 0px solid #000101;
-            border-radius: 7px;
-            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-          }
-          input[type=range]::-ms-fill-upper {
-            background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
-            border: 0px solid #000101;
-            border-radius: 7px;
-            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-          }
-          input[type=range]::-ms-thumb {
-            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-            border: 0px solid #000000;
-            height: 20px;
-            width: 39px;
-            border-radius: 3px;
-            background: var(--my-primary-color);
-            cursor: pointer;
-          }
-          :host label.value {
-            flex: 0 1 10%;
-          }
-          input[type=range]:focus::-ms-fill-lower {
-            background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
-          }
-          input[type=range]:focus::-ms-fill-upper {
-            background: linear-gradient(-90deg, rgba(var(--my-lighter-background-color), .8) 25%, rgba(var(--my-darker-background-color), 1));
-          }
-          .legend {
-            display: flex;
-            /*margin: 0 -1rem;*/
-          }
-          .legend label {
-            text-align: center;
-            position: relative;
-          }
-          .legend label::before {
-            background-color: rgb(var(--my-lighter-background-color));
-            content: "";
-            height: .5rem;
-            position: absolute;
-            left: 50%;
-            top: -.5rem;
-            width: 1px;
-          }
-          .range_legend_label--selected {
-            color: var(--my-primary-color);
-          }
-          /* TODO remove to specific */
-          .range_legend_label--selected::after{
-              content: '';
-              position: absolute;
-              left: 20%;
-              top: 100%;
-              width: 0;
-              height: 0;
-              border-left: 20px solid transparent;
-              border-right: 20px solid transparent;
-              border-bottom: 20px solid rgb(var(--my-lighter-background-color));
-          }
-          `
-        ];
-    }
-
-    render() {
-        // TODO: step kann hier nicht übergeben werden, wird dann initial nicht immer richtig angezeigt (bei komma rundungen)???
-        return html`
-            <label for="${this.id}Input">${this.label} ${this.showLegend ? '' : html`- ${this.value}`}</label>
-            <input ?disabled=${this.disabled} type="range" name="${this.id}Name" @change="${this._onChange}" 
-                   .value="${this.value}" min="${this.min}" max="${this.max}" 
-                   step="${this.step}" id="${this.id}Input">
-            ${this.showLegend ? this._addLegend() : ''}            
-        `;
-    }
-
-    firstUpdated() {
-      // Save input reference for performance
-      this._input = this.shadowRoot.querySelector('input');
-    }
-
-    _addLegend() {
-      const steps = this.max - this.min;
-      const labels = [];
-      for (let i = 0; i <= steps; i+=1) {
-        labels.push(html`<label class="${i + this.step === this.value * 1 ? 'range_legend_label--selected' : ''}">${i + this.step}</label>`);
-      }
-      return html`<div class="legend">${labels}</div>`
-    }
-
-    _onChange() {
-      this.value = this._input.value;
-      this.dispatchEvent(new CustomEvent('changed', {
-        detail: { 
-          value: this._input.value
-        },
-        composed: true,
-        bubbles: true
-      }));
-    }
-
-}

package/src/generated/locale/be.js

@@ -1,19 +0,0 @@
-
-    // Do not modify this file by hand!
-    // Re-generate this file by running lit-localize
-
-    
-    
-
-    /* eslint-disable no-irregular-whitespace */
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-
-    export const templates = {
-      's369cb9ac30f626a2': `* Verplichte in te vullen`,
-'s441bc7f34cdb5af3': `Vul dit veld in`,
-'s570d46ddb2a278ce': `Ongeldig VAT, gebruik BE0123456789`,
-'s5b7e33463603827f': `Ongeldig telefoonnummer, gebruik +32 494 667085`,
-'s82000595de0f83d0': `Ongeldig e-mailadres, gebruik mail@test.be`,
-'s8716290d3f8456dd': `Alleen nummers toegestaan`,
-    };
-  

package/src/generated/locale/en.js

@@ -1,19 +0,0 @@
-
-    // Do not modify this file by hand!
-    // Re-generate this file by running lit-localize
-
-    
-    
-
-    /* eslint-disable no-irregular-whitespace */
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-
-    export const templates = {
-      's369cb9ac30f626a2': `* Pflichtfeld`,
-'s441bc7f34cdb5af3': `Eingabe erforderlich`,
-'s82000595de0f83d0': `Format mail@test.de verwenden`,
-'s5b7e33463603827f': `Format +49123 123456 verwenden`,
-'s570d46ddb2a278ce': `Format DE0123456789 verwenden`,
-'s8716290d3f8456dd': `Nur Zahlen erlaubt`,
-    };
-  

package/src/generated/locale-codes.js

@@ -1,25 +0,0 @@
-// Do not modify this file by hand!
-// Re-generate this file by running lit-localize.
-
-/**
- * The locale code that templates in this source code are written in.
- */
-export const sourceLocale = `de`;
-
-/**
- * The other locale codes that this application is localized into. Sorted
- * lexicographically.
- */
-export const targetLocales = [
-  `be`,
-  `en`,
-];
-
-/**
- * All valid project locale codes. Sorted lexicographically.
- */
-export const allLocales = [
-  `be`,
-  `de`,
-  `en`,
-];

package/src/stories/01_index.stories.js

@@ -1,268 +0,0 @@
-import { html } from 'lit';
-
-import '../../pd-button.js';
-import '../../pd-checkbox.js';
-import '../../pd-input.js';
-import '../../pd-input-area.js';
-import '../../pd-radio-group.js';
-import '../../pd-select.js';
-
-export default {
-  title: 'PDForms/Form Examples',
-  component: 'pd-forms',
-  argTypes: {
-    gradient: { control: 'boolean' },
-    primaryColor: { control: 'color' },
-    secondaryColor: { control: 'color' },
-    thirdColor: { control: 'color' },
-    textColor: { control: 'color' },
-    highlightColor: { control: 'color' },
-    errorColor: { control: 'color' },
-    errorBackgroundColor: { control: 'color' },
-    borderRadius: { control: 'text' },
-    displayFont: { control: 'text' },
-    fontSize: { control: 'text' },
-    inputHeigth: { control: 'text' },
-  },
-};
-
-function Template({
-      selectVals,
-      gradient,
-      primaryColor,
-      secondaryColor,
-      thirdColor,
-      textColor,
-      highlightColor,
-      errorColor,
-      errorBackgroundColor,
-      borderRadius,
-      displayFont,
-      fontSize,
-      inputHeigth,
-    }) {
-
-  let style = '';
-  if (primaryColor) {
-    style += `--squi-primary-color:${primaryColor};`;
-  }
-  if (secondaryColor) {
-    style += `--squi-secondary-color:${secondaryColor};`;
-  }
-  if (thirdColor) {
-    style += `--squi-third-color:${thirdColor};`;
-  }
-  if (textColor) {
-    style += `--squi-text-color:${textColor};`;
-  }
-  if (highlightColor) {
-    style += `--squi-highlight-color:${highlightColor};`;
-  }
-  if (errorColor) {
-    style += `--squi-error-color:${errorColor};`;
-  }
-  if (errorBackgroundColor) {
-    style += `--squi-error-background-color:${errorBackgroundColor};`;
-  }
-  if (borderRadius) {
-    style += `--squi-border-radius:${borderRadius};`;
-  }
-  if (displayFont) {
-    style += `--squi-display-font:${displayFont};`;
-  }
-  if (fontSize) {
-    style += `--squi-font-size:${fontSize};`;
-  }
-  if (inputHeigth) {
-    style += `--pd-input-field-height:${inputHeigth};`;
-  }
-
-return html`
-    <h3>Defaults Inputs with labels</h3>
-    <div
-      style="display: flex; justify-content: space-between; max-width: 800px"
-    >
-      <pd-select
-        id="testId1"
-        ?gradient="${gradient}"        
-        label="Select Label"
-      ></pd-select>
-      <pd-input
-        id="testId1"
-        ?gradient="${gradient}"        
-        label="Input Label"
-      ></pd-input>
-      <pd-input-area
-        id="testId2"
-        ?gradient="${gradient}"        
-        label="Input Area Label"
-      ></pd-input-area>
-    </div>
-
-    <div
-      style="display: flex; justify-content: space-between; max-width: 800px"
-    >
-      <pd-select
-        id="testId1"
-        ?gradient="${gradient}"
-        .values="${selectVals}"        
-        label="Select Label"
-      ></pd-select>
-      <pd-input
-        id="testId1"
-        ?gradient="${gradient}"        
-        label="Input Label"
-        value="My Value"
-      ></pd-input>
-      <pd-input-area
-        id="testId2"
-        ?gradient="${gradient}"        
-        label="Input Area Label"
-        value="My Value Area Text and ..."
-      ></pd-input-area>
-    </div>
-
-    <div
-      style="display: flex; justify-content: space-between; max-width: 800px"
-    >
-      <pd-select
-        id="testId1"
-        .values="${selectVals}"
-        ?gradient="${gradient}"      
-        label="Select Label"      
-      ></pd-select>
-      <pd-input
-        id="testId1"
-        ?gradient="${gradient}"
-        label="Input Label"
-        value="My Value"        
-      ></pd-input>
-      <pd-input-area
-        id="testId2"        
-        ?gradient="${gradient}"
-        label="Input Area Label"        
-        value="My Value Area Text and ..."
-      ></pd-input-area>
-    </div>
-
-    <div
-      style="display: flex; justify-content: space-between; max-width: 800px"
-    >
-      <pd-select
-        id="testId1"
-        .values="${selectVals}"
-        ?gradient="${gradient}"        
-        ?disabled="${true}"
-        label="Select Label"
-      ></pd-select>
-      <pd-input
-        id="testId1"        
-        ?gradient="${gradient}"
-        label="Input Label"
-        ?disabled="${true}"
-        value="My Value"
-      ></pd-input>
-      <pd-input-area
-        id="testId2"        
-        ?gradient="${gradient}"
-        label="Input Area Label"
-        ?disabled="${true}"
-        value="My Value Area Text and ..."
-      ></pd-input-area>
-    </div>
-
-    <div
-      style="display: flex; justify-content: space-between; max-width: 800px"
-    >
-      <pd-select
-        id="testId1"
-        .values="${selectVals}"
-        ?gradient="${gradient}"        
-        ?disabled="${true}"
-        label="Select ohne Placeholder"
-      ></pd-select>
-      <pd-input
-        id="testId1"        
-        ?gradient="${gradient}"
-        label="Input Label"
-        placeHolder="Placeholder Text"
-      ></pd-input>
-      <pd-input-area
-        id="testId2"        
-        ?gradient="${gradient}"
-        label="Input Area Label"
-        placeHolder="Placeholder Text"
-      ></pd-input-area>
-    </div>
-
-    <h3>Radio & Switch</h3>
-    <div
-      style="display: flex; justify-content: space-between; max-width: 1000px"
-    >
-      <pd-checkbox name="Test1" value="true"
-        >Label zur Checkbox</pd-checkbox
-      >
-      <pd-checkbox name="Test2" value="false"
-        >Label zur Checkbox</pd-checkbox
-      >
-      <pd-checkbox name="Test1" isSwitch value="true"
-        >Label zur Checkbox</pd-checkbox
-      >
-      <pd-checkbox name="Test2" isSwitch value="false"
-        >Label zur Checkbox</pd-checkbox
-      >
-    </div>
-
-    <h3>Radio Group</h3>
-    <pd-radio-group>
-      <pd-checkbox name="Test1" value="true"
-        >Label zur Checkbox</pd-checkbox
-      >
-      <pd-checkbox name="Test2" value="false"
-        >Label zur Checkbox</pd-checkbox
-      >
-    </pd-radio-group>
-    <pd-radio-group style="--group-direction: column;">
-      <pd-checkbox name="Test3" value="true"
-        >Label zur Checkbox</pd-checkbox
-      >
-      <pd-checkbox name="Test4" value="false"
-        >Label zur Checkbox</pd-checkbox
-      >
-    </pd-radio-group>
-
-    <h3>Buttons</h3>
-    <pd-button
-      ?gradient="${gradient}"      
-      text="Primary Button"
-      ?primary="${true}"
-    ></pd-button>
-    <pd-button
-      ?gradient="${gradient}"      
-      text="Secondary Button"
-    ></pd-button>
-    <pd-button
-      ?gradient="${gradient}"      
-      ?disabled="${true}"
-      text="Disabled Button"
-    ></pd-button>
-    <pd-button
-      ?gradient="${gradient}"      
-      text="Primary Disabled"
-      ?disabled="${true}"
-      ?primary="${true}"
-    ></pd-button>
-
-  `;
-}
-
-export const FormExamples = Template.bind({});
-FormExamples.args = {
-  selectVals: [
-    { name: 'Option 1', value: 1 },
-    { name: 'Option 2', value: 2 },
-    { name: 'Option 3', value: 3 },
-  ],
-  gradient: false,
-};
-

package/src/stories/button.stories.js

@@ -1,15 +0,0 @@
-import { html } from 'lit';
-import '../../pd-button.js';
-
-export default {
-  title: 'PdForms/Button',
-  component: 'pd-button',
-  argTypes: {},
-};
-
-function ButtonTemplate() {
-  return html` <pd-button text="My Button"></pd-button> `;
-}
-
-export const Button = ButtonTemplate.bind({});
-Button.args = {};