@progressive-development/pd-forms 0.0.12 → 0.0.14

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent pd-forms following open-wc recommendations",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -17,7 +17,7 @@
     "storybook:build": "npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@progressive-development/pd-icon": "0.0.2",
+    "@progressive-development/pd-icon": "0.0.4",
     "lit": "^2.0.0-rc.4",
     "@lit-labs/motion": "^1.0.0-rc.2"
   },

package/pd-button-goup.js

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

package/pd-button.js

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

package/pd-checkbox.js

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

package/pd-form-container.js

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

package/pd-form-row.js

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

package/pd-input-area.js

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

package/pd-input.js

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

package/pd-label-value.js

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

package/pd-radio-group.js

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

package/pd-select.js

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

package/src/{squi-base-ui.js → PdBaseUi.js}

@@ -5,7 +5,7 @@
 
 import { LitElement } from 'lit';
 
-export class SquiBaseUI extends LitElement {
+export class PdBaseUI extends LitElement {
 
     static get properties() {
         return {

package/src/{squi-base-ui-input.js → PdBaseUiInput.js}

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
 
-import { SquiBaseUI } from './squi-base-ui.js';
+import { PdBaseUI } from './PdBaseUi.js';
 
 export const INPUT_TYPE_TEXT = 1;
 export const INPUT_TYPE_SELECT = 2;
@@ -11,7 +11,7 @@ export const INPUT_TYPE_CHECK = 3;
 export const INPUT_TYPE_RANGE = 4;
 export const INPUT_TYPE_AREA = 5;
 
-export class SquiBaseUIInput extends SquiBaseUI {
+export class PdBaseUIInput extends PdBaseUI {
 
     static get properties() {
         return {            

package/src/{squi-button.js → PdButton.js}

@@ -7,7 +7,7 @@ import { html, css , LitElement } from 'lit';
 
 import { SharedInputStyles } from './shared-input-styles.js';
 
-export class SquiButton extends LitElement {
+export class PdButton extends LitElement {
 
   static get styles() {
     return [  

package/src/{squi-button-group.js → PdButtonGroup.js}

@@ -6,10 +6,10 @@
 import { html, css , LitElement } from 'lit';
 
 import { SharedInputStyles } from './shared-input-styles.js';
-import './squi-button.js';
+import '../pd-button.js';
 
 
-export class SquiButtonGroup extends LitElement {
+export class PdButtonGroup extends LitElement {
 
   static get styles() {
     return [  
@@ -46,7 +46,7 @@ export class SquiButtonGroup extends LitElement {
     return html`
     <div class="button-group">
       ${this.buttons.map(entry => html`
-        <squi-button text="${entry.text}" style="visibility: ${entry.visibility};"></squi-button>
+        <pd-button text="${entry.text}" style="visibility: ${entry.visibility};"></pd-button>
       `)}
     </div>
     `;

package/src/{squi-checkbox.js → PdCheckbox.js}

@@ -9,12 +9,12 @@ import { classMap } from 'lit/directives/class-map.js';
 // import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
 
 import '@progressive-development/pd-icon';
-import { SquiBaseUIInput, INPUT_TYPE_CHECK } from "./squi-base-ui-input.js";
+import { PdBaseUIInput, INPUT_TYPE_CHECK } from "./PdBaseUiInput.js";
 
 
 // import { installMediaQueryWatcher } from 'pwa-helpers/media-query.js';
 
-export class SquiCheckbox extends SquiBaseUIInput {
+export class PdCheckbox extends PdBaseUIInput {
   static get properties() {
     return {      
       hasInner: { type: Boolean },

package/src/{squi-form-container.js → PdFormContainer.js}

@@ -11,7 +11,7 @@ import {LitElement, html, css} from 'lit';
  * @slot - This element has a slot
  * @csspart button - The button
  */
-export class SquiFormContainer extends LitElement {
+export class PdFormContainer extends LitElement {
 
   static get styles() {
     return css`

package/src/{squi-form-row.js → PdFormRow.js}

@@ -11,7 +11,7 @@ import {LitElement, html, css} from 'lit';
  * @slot - This element has a slot
  * @csspart button - The button
  */
-export class SquiFormRow extends LitElement {
+export class PdFormRow extends LitElement {
 
   static get styles() {
     return css`

package/src/{squi-input.js → PdInput.js}

@@ -7,7 +7,7 @@ import { html, css } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { SharedInputStyles } from './shared-input-styles.js';
 
-import { SquiBaseUIInput, INPUT_TYPE_TEXT } from './squi-base-ui-input.js';
+import { PdBaseUIInput, INPUT_TYPE_TEXT } from './PdBaseUiInput.js';
 
 import '@progressive-development/pd-icon/pd-icon.js';
 
@@ -39,34 +39,34 @@ import '@progressive-development/pd-icon/pd-icon.js';
  *
  * 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>
+ *     <pd-input icon-left></pd-input>
+ *     <pd-input icon-right></pd-input>
  *
- *     <squi-input icon-left .icon="${'hardware:headset'}"></squi-input>
+ *     <pd-input icon-left .icon="${'hardware:headset'}"></pd-input>
  *
  * Text can be left or right aligned. Default is left alignment.
  *
- *     <squi-input text-right></squi-input>
- *     <squi-input text-left></squi-input>
+ *     <pd-input text-right></pd-input>
+ *     <pd-input text-left></pd-input>
  */
-export class SquiInput extends SquiBaseUIInput {
+export class PdInput extends PdBaseUIInput {
   /**
-   * Fired when `squi-input` has focus and the user press `Enter` key.
+   * Fired when `pd-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`.
+   * Fired when `pd-input` has focus and the user press any key except `Enter`.
    * @event key-pressed
    */
 
   /**
-   * Fire when the `squi-input` loses focus.
+   * Fire when the `pd-input` loses focus.
    * @event focus-lost
    */
 
   /**
-   * Fire when the icon inside `squi-input` is clicked.
+   * Fire when the icon inside `pd-input` is clicked.
    * @event icon-clicked
    */
 
@@ -85,10 +85,10 @@ export class SquiInput extends SquiBaseUIInput {
     return {
       key: { type: String }, // Test, wird für das setzten der Error Msg benötigt
 
-      /** Placeholder for `squi-input` initial text. */
+      /** Placeholder for `pd-input` initial text. */
       placeHolder: { type: String },
       /**
-       * Icon to be shown inside `squi-input`.
+       * Icon to be shown inside `pd-input`.
        */
       icon: { type: String },
       secret: { type: Boolean }, // True for type password

package/src/{squi-input-area.js → PdInputArea.js}

@@ -7,7 +7,7 @@ import { html, css } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { SharedInputStyles } from './shared-input-styles.js';
 
-import { SquiBaseUIInput, INPUT_TYPE_AREA } from './squi-base-ui-input.js';
+import { PdBaseUIInput, INPUT_TYPE_AREA } from './PdBaseUiInput.js';
 
 
 import '@progressive-development/pd-icon/pd-icon.js';
@@ -40,35 +40,35 @@ import '@progressive-development/pd-icon/pd-icon.js';
  *
  * 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>
+ *     <pd-input icon-left></pd-input>
+ *     <pd-input icon-right></pd-input>
  *
- *     <squi-input icon-left .icon="${'hardware:headset'}"></squi-input>
+ *     <pd-input icon-left .icon="${'hardware:headset'}"></pd-input>
  *
  * Text can be left or right aligned. Default is left alignment.
  *
- *     <squi-input text-right></squi-input>
- *     <squi-input text-left></squi-input>
+ *     <pd-input text-right></pd-input>
+ *     <pd-input text-left></pd-input>
  */
-export class SquiInputArea extends SquiBaseUIInput {
+export class PdInputArea extends PdBaseUIInput {
 
   /**
-   * Fired when `squi-input-area` has focus and the user press `Enter` key.
+   * Fired when `pd-input-area` has focus and the user press `Enter` key.
    * @event enter-pressed
    */
 
   /**
-   * Fired when `squi-input-area` has focus and the user press any key except `Enter`.
+   * Fired when `pd-input-area` has focus and the user press any key except `Enter`.
    * @event key-pressed
    */
 
   /**
-   * Fire when the `squi-input-area` loses focus.
+   * Fire when the `pd-input-area` loses focus.
    * @event focus-lost
    */
 
   /**
-   * Fire when the icon inside `squi-input-area` is clicked.
+   * Fire when the icon inside `pd-input-area` is clicked.
    * @event icon-clicked
    */
 

package/src/PdLabelValue.js

@@ -0,0 +1,75 @@
+/**
+ * @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';
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class PdLabelValue extends LitElement {
+
+  static get styles() {
+    return css`
+    :host {
+
+      --my-label-color: var(--squi-background-color, #24a3b9);
+      --my-label-font: var(--squi-background-color, #24a3b9);
+      
+      --my-value-color: var(--squi-background-hover-color, #23636e);
+      --my-value-font: var(--squi-background-hover-color, #23636e);
+
+        display: block;        
+      }
+
+      .container {
+
+      }
+
+      .label {
+
+      }
+
+      .value {
+
+      }
+
+    `;
+  }
+
+  static get properties() {
+    return {
+      label: {type: String},
+      value: {type: String}
+    };
+  }
+
+  constructor() {
+    super();
+    this.label = '';
+    this.value = '';
+  }
+
+  render() {
+    return html`
+      <div class="container">
+        <span class="label">${this.label}</span>
+        <span class="value">${this.value}</span>
+      </div>
+    `;
+  }
+
+}

package/src/{squi-radio-group.js → PdRadioGroup.js}

@@ -13,7 +13,7 @@ import { SharedInputStyles } from './shared-input-styles.js';
  * @slot - This element has a slot
  * @csspart button - The button
  */
-export class SquiRadioGroup extends LitElement {
+export class PdRadioGroup extends LitElement {
 
   static get styles() {
     return [
@@ -52,7 +52,7 @@ export class SquiRadioGroup extends LitElement {
   }
 
   get value() {
-    const elColl = this.getElementsByTagName('squi-checkbox');          
+    const elColl = this.getElementsByTagName('pd-checkbox');          
     let returnVal;
     Object.keys(elColl).forEach(keyValue => {              
       if (elColl[keyValue].value === 'true') {        
@@ -66,7 +66,7 @@ export class SquiRadioGroup extends LitElement {
 
     // add event listener
     this.addEventListener('checkbox-changed', (e) => {
-      const elCollection = this.getElementsByTagName('squi-checkbox');      
+      const elCollection = this.getElementsByTagName('pd-checkbox');      
       Object.keys(elCollection).forEach(keyValue => {                
         if (elCollection[keyValue] !== e.target) {
           elCollection[keyValue].value = false;          
@@ -78,7 +78,7 @@ export class SquiRadioGroup extends LitElement {
     });
 
     // set default
-    const elColl = this.getElementsByTagName('squi-checkbox');      
+    const elColl = this.getElementsByTagName('pd-checkbox');      
       Object.keys(elColl).forEach(keyValue => {        
         elColl[keyValue].readonly = elColl[keyValue].value === 'true';        
       });

package/src/{squi-select.js → PdSelect.js}

@@ -7,7 +7,7 @@ import { html, css } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { SharedInputStyles } from './shared-input-styles.js';
 
-import { SquiBaseUIInput, INPUT_TYPE_SELECT } from './squi-base-ui-input.js';
+import { PdBaseUIInput, INPUT_TYPE_SELECT } from './PdBaseUiInput.js';
 
 import '@progressive-development/pd-icon/pd-icon.js';
 
@@ -39,17 +39,17 @@ import '@progressive-development/pd-icon/pd-icon.js';
  *
  * 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>
+ *     <pd-input icon-left></pd-input>
+ *     <pd-input icon-right></pd-input>
  *
- *     <squi-input icon-left .icon="${'hardware:headset'}"></squi-input>
+ *     <pd-input icon-left .icon="${'hardware:headset'}"></pd-input>
  *
  * Text can be left or right aligned. Default is left alignment.
  *
- *     <squi-input text-right></squi-input>
- *     <squi-input text-left></squi-input>
+ *     <pd-input text-right></pd-input>
+ *     <pd-input text-left></pd-input>
  */
-export class SquiSelect extends SquiBaseUIInput {
+export class PdSelect extends PdBaseUIInput {
   /**
    * Fired when `squi-input` has focus and the user press `Enter` key.
    * @event enter-pressed

package/stories/button.stories.js

@@ -0,0 +1,15 @@
+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 = {};

package/stories/checkbox.stories.js

@@ -0,0 +1,50 @@
+import { html } from 'lit';
+import '../pd-checkbox.js';
+
+export default {
+  title: 'PdForms/Checkbox',
+  component: 'pd-checkbox',
+  parameters: {
+    actions: {
+      handles: ['checkbox-changed'],
+    },
+  },
+};
+
+function Template({ errorMsg }) {
+  return html`
+    <h3>Checkbox selected</h3>
+    <pd-checkbox name="Test1" value="true" errorMsg="${errorMsg}"
+      >Label zur Checkbox</pd-checkbox
+    >
+
+    <h3>Checkbox unselected</h3>
+    <pd-checkbox name="Test2" value="false" errorMsg="${errorMsg}"
+      >Label zur Checkbox</pd-checkbox
+    >
+  `;
+}
+
+function SwitchTemplate({ errorMsg }) {
+  return html`
+    <h3>Switch selected</h3>
+    <pd-checkbox name="Test1" isSwitch value="true" errorMsg="${errorMsg}"
+      >Label zur Checkbox</pd-checkbox
+    >
+
+    <h3>Switch unselected</h3>
+    <pd-checkbox name="Test2" isSwitch value="false" errorMsg="${errorMsg}"
+      >Label zur Checkbox</pd-checkbox
+    >
+  `;
+}
+
+export const Checkbox = Template.bind({});
+Checkbox.args = {
+  errorMsg: '',
+};
+
+export const Switch = SwitchTemplate.bind({});
+Switch.args = {
+  errorMsg: '',
+};

package/stories/form-container.stories.js

@@ -0,0 +1,50 @@
+import { html } from 'lit';
+import '../pd-form-container.js';
+import '../pd-form-row.js';
+import '../pd-input.js';
+
+export default {
+  title: 'PdForms/Form Container',
+  component: 'pd-form-container',
+  argTypes: {},
+};
+
+function Template() {
+  return html`
+    <h3>Mit Forms</h3>
+    <pd-form-container>
+      <pd-form-row>
+        <pd-input class="quarter2" id="test1Id" label="Label 1"></pd-input>
+        <pd-input class="quarter2" id="test2Id" label="Label 2"></pd-input>
+      </pd-form-row>
+      <pd-form-row>
+        <pd-input class="quarter4" id="test3Id" label="Label 3"></pd-input>
+      </pd-form-row>
+      <pd-form-row>
+        <pd-input class="quarter3" id="test4Id" label="Label 4"></pd-input>
+      </pd-form-row>
+      <pd-form-row>
+        <pd-input class="quarter1" id="test5Id" label="Label 5"></pd-input>
+        <pd-input class="quarter1" id="test6Id" label="Label 6"></pd-input>
+        <pd-input class="quarter1" id="test7Id" label="Label 7"></pd-input>
+        <pd-input class="quarter1" id="test8Id" label="Label 8"></pd-input>
+      </pd-form-row>
+      <pd-form-row>
+        <pd-input class="quarter3" id="test9Id" label="Label 5"></pd-input>
+        <pd-input class="quarter1" id="test10Id" label="Label 6"></pd-input>
+      </pd-form-row>
+      <pd-form-row>
+        <pd-input class="quarter1" id="test11Id" label="Label 5"></pd-input>
+        <pd-input class="quarter3" id="test12Id" label="Label 6"></pd-input>
+      </pd-form-row>
+      <pd-form-row>
+        <pd-input class="quarter1" id="test13Id" label="Label 5"></pd-input>
+        <pd-input class="quarter1" id="test14Id" label="Label 5"></pd-input>
+        <pd-input class="quarter2" id="test15Id" label="Label 6"></pd-input>
+      </pd-form-row>
+    </pd-form-container>
+  `;
+}
+
+export const FormContainer = Template.bind({});
+FormContainer.args = {};