@progressive-development/pd-forms 0.0.17 → 0.0.19

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.17",
+  "version": "0.0.19",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -17,22 +17,22 @@
     "storybook:build": "npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@progressive-development/pd-icon": "0.0.8",
-    "lit": "^2.0.0-rc.4",
-    "@lit-labs/motion": "^1.0.0-rc.2"
+    "@lit-labs/motion": "^1.0.1",
+    "@progressive-development/pd-icon": "^0.0.9",
+    "lit": "^2.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@open-wc/eslint-config": "^4.3.0",
-    "@open-wc/testing": "next",
-    "@web/dev-server": "^0.1.22",
+    "@open-wc/testing": "^3.0.0-next.5",
+    "@web/dev-server": "^0.1.28",
     "@web/dev-server-storybook": "next",
-    "@web/test-runner": "^0.13.17",
+    "@web/test-runner": "^0.13.21",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
-    "prettier": "^2.4.0"
+    "prettier": "^2.4.1"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {

package/src/PdBaseUiInput.js

@@ -18,7 +18,8 @@ export class PdBaseUIInput extends PdBaseUI {
             gradient: { type: Boolean },        // true for gradient background
             disabled: { type: Boolean },        // disabled flag for element
             readonly: { type: Boolean },        // readonly flag for element
-            valueName: { type: String },
+            required: { type: Boolean },        // required flag for element
+            valueName: { 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...)

package/src/PdCheckbox.js

@@ -3,6 +3,9 @@
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
 
+
+Änderungen an den Klassen aus node_modules übernommen, nicht deployed und verwendet => offen
+
 import { html, css } from "lit";
 import { classMap } from 'lit/directives/class-map.js';
 
@@ -37,9 +40,11 @@ export class PdCheckbox extends PdBaseUIInput {
       css`
       :host {        
 
-        --my-icon-fill: var(--app-primary-color, #177E89); 
-        --my-icon-active-fill: var(--app-primary-color, #177E89); 
-        --my-icon-bg-color: var(--app-primary-color, #fefefe) ; 
+        /*
+        --my-icon-fill: var(--pd-app-light-background, #fefefe); 
+        --my-icon-active-fill: var(--pd-app-primary-color, #067394); 
+        --my-icon-inactive-fill: var(--pd-app-primary-color, darkgrey); 
+        
         --my-icon-bg-active-color: var(--app-primary-color, #fefefe); 
 
         --my-bg-color: var(--squi-bg-color, #177E89);
@@ -47,14 +52,14 @@ export class PdCheckbox extends PdBaseUIInput {
 
         --my-font: var(--squi-font-2, Montserrat);
 
-        /* ref copy from shared styles...*/
+         ref copy from shared styles...*
         --my-error-color: var(--squi-error-color, #d6242d);        
         --my-error-background-color: var(--squi-error-background-color, #f6d4d4a1);   
         --my-border-radius: var(--squi-border-radius, 0rem);
 
 
 
-        /* TODO vars used in pd-icon */
+        * TODO vars used in pd-icon *
         --squi-checkbox-checked-color: var(--my-primary);
         --squi-checkbox-unchecked-color: var(--my-ligth);
         --squi-checkbox-bg: var(--my-dark);
@@ -63,20 +68,25 @@ export class PdCheckbox extends PdBaseUIInput {
 
         --squi-checkbox-label-disabled-color:  var(--app-copy-color, #303030);
 
-        /* Checkbox pd-icon */
-        --pd-icon-fill: var(--my-icon-bg-color);
-        --pd-icon-bg: var(--my-icon-fill);
+        * Checkbox pd-icon 
+        --pd-icon-fill: red;
+        --pd-icon-bg: red;
         --pd-icon-fill-active: var(--my-icon-bg-active-color);
         --pd-icon-bg-active: var(--my-icon-active-fill);
+        */
+
+        --pd-icon-fill-active: var(--pd-app-primary-col, #067394);
+        --pd-icon-fill: var(--pd-checkbox-inactive-col, darkgrey);        
+        --pd-icon-bg: var(--pd-checkbox-bg-col, #fefefe);
 
         display: inline-block;
         font-size: .8rem;
       }
       /* Switch pd-icon */
       :host([isSwitch]) {
+          --pd-icon-fill-active: var(--my-icon-active-fill);  
           --pd-icon-fill: var(--my-icon-fill);
-          --pd-icon-bg: var(--my-icon-bg-color);
-          --pd-icon-fill-active: var(--my-icon-active-fill);
+          --pd-icon-bg: var(--my-icon-bg-color);          
           --pd-icon-bg-active: var(--my-icon-bg-active-color);
       }
       div {
@@ -145,10 +155,12 @@ export class PdCheckbox extends PdBaseUIInput {
     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 .isChecked.switch-paddle pd-icon {
     transform: translate3d(0, 0, 0);

package/src/PdInput.js

@@ -104,11 +104,13 @@ export class PdInput extends PdBaseUIInput {
     this.icon = 'toggleCollapse';
     this.secret = false;
     this.key = '';
+
+    this._defaultRequiredChar = '*';
   }
 
   render() {
     return html`
-      <label for="${this.id}Input">${this.label}</label>
+      <label for="${this.id}Input">${this.label}${this.required ? this._defaultRequiredChar : ''}</label>
       <div class="input ${classMap({ error: this.errorMsg.length > 0 })}">
         <pd-icon
           icon="toggleCollapse"

package/stories/form-row.stories.js

@@ -0,0 +1,23 @@
+import { html } from 'lit';
+import '../pd-form-row.js';
+
+export default {
+  title: 'PdForms/Form Row',
+  component: 'pd-form-row',
+  argTypes: {},
+};
+
+function Template() {
+  return html`
+    <h3>Noch im test ob Sinnvoll....</h3>
+    <div style="">
+      <pd-form-row>
+        <div style="background-color: blue;">Hier ist es blau</div>
+        <div style="background-color: red;">Hier ist es rot</div>
+      </pd-form-row>
+    </div>
+  `;
+}
+
+export const FormRow = Template.bind({});
+FormRow.args = {};