@progressive-development/pd-forms 0.0.14 → 0.0.15

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.14",
+  "version": "0.0.15",
   "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.4",
+    "@progressive-development/pd-icon": "0.0.6",
     "lit": "^2.0.0-rc.4",
     "@lit-labs/motion": "^1.0.0-rc.2"
   },

package/src/PdButton.js

@@ -117,23 +117,23 @@ export class PdButton extends LitElement {
         align-items: center;
         justify-content: center;
         white-space: nowrap;
-        --squi-icon-fill: var(--icon-fill-light);
-        --squi-icon-fill-hover: var(--icon-fill-light);
+        --pd-icon-fill: var(--icon-fill-light);
+        --pd-icon-fill-hover: var(--icon-fill-light);
       }
       
       .button-icon:not([disabled]) {
-        --squi-icon-fill: var(--app-primary-color);
-        --squi-icon-fill-hover: var(--app-primary-color-dark);
+        --pd-icon-fill: var(--app-primary-color);
+        --pd-icon-fill-hover: var(--app-primary-color-dark);
       }
 
-      .button-icon squi-icon {
+      .button-icon pd-icon {
         max-width: 1.25rem;
         height: 1.25rem;
         width: 1.25rem;
         margin: 0 .15rem;
       }
 
-      .button-icon.small squi-icon {
+      .button-icon.small pd-icon {
         max-width: 1.25rem;
         height: 1.25rem;
         width: 1.25rem;
@@ -148,16 +148,16 @@ export class PdButton extends LitElement {
           fill: var(--app-primary-color);
       }
       
-      .button-icon:hover squi-icon,    
+      .button-icon:hover pd-icon,    
       .button-icon:hover svg {
           fill: var(--app-primary-color);
       }            
 
       @media (min-width: 580px) {        
-        .button-icon squi-icon {
+        .button-icon pd-icon {
             margin: 0 .5rem;
         }        
-        .button-icon.small squi-icon {
+        .button-icon.small pd-icon {
             padding-right: .5rem;
         }
       }

package/src/PdCheckbox.js

@@ -54,7 +54,7 @@ export class PdCheckbox extends PdBaseUIInput {
 
 
 
-        /* TODO vars used in squi-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,21 +63,21 @@ export class PdCheckbox extends PdBaseUIInput {
 
         --squi-checkbox-label-disabled-color:  var(--app-copy-color, #303030);
 
-        /* Checkbox squi-icon */
-        --squi-icon-fill: var(--my-icon-bg-color);
-        --squi-icon-bg: var(--my-icon-fill);
-        --squi-icon-fill-active: var(--my-icon-bg-active-color);
-        --squi-icon-bg-active: var(--my-icon-active-fill);
+        /* Checkbox pd-icon */
+        --pd-icon-fill: var(--my-icon-bg-color);
+        --pd-icon-bg: var(--my-icon-fill);
+        --pd-icon-fill-active: var(--my-icon-bg-active-color);
+        --pd-icon-bg-active: var(--my-icon-active-fill);
 
         display: inline-block;
         font-size: .8rem;
       }
-      /* Switch squi-icon */
+      /* Switch pd-icon */
       :host([isSwitch]) {
-          --squi-icon-fill: var(--my-icon-fill);
-          --squi-icon-bg: var(--my-icon-bg-color);
-          --squi-icon-fill-active: var(--my-icon-active-fill);
-          --squi-icon-bg-active: var(--my-icon-bg-active-color);
+          --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-active: var(--my-icon-bg-active-color);
       }
       div {
         display: flex;
@@ -98,7 +98,7 @@ export class PdCheckbox extends PdBaseUIInput {
         align-items: center;
         justify-content: center;
       }
-      .checkbox squi-icon {
+      .checkbox pd-icon {
         margin: .25rem;
       }
       .label {
@@ -145,16 +145,16 @@ export class PdCheckbox extends PdBaseUIInput {
     min-width: 2rem;
     background: none;
 
-    --squi-icon-bg: transparent;
-    --squi-icon-fill: var(--card-dark-red);
-    --squi-icon-fill-hover: var(--squi-icon-fill);
-    --squi-icon-fill-active: var(--card-medium-green);
+    --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 squi-icon {
+  .readonly .isChecked.switch-paddle pd-icon {
     transform: translate3d(0, 0, 0);
     left: 0.25rem;
   }
-  .switch-paddle squi-icon {
+  .switch-paddle pd-icon {
       position: absolute;
       top: 0.25rem;
       left: 0.25rem;
@@ -168,7 +168,7 @@ export class PdCheckbox extends PdBaseUIInput {
       transition: all 0.25s ease-out;
       content: '';
   }
-  .isChecked.switch-paddle squi-icon {
+  .isChecked.switch-paddle pd-icon {
       left: 2.25rem;
   }
 
@@ -211,7 +211,7 @@ export class PdCheckbox extends PdBaseUIInput {
     return html`<div @click="${this.onClick}" class="${classMap({'disabled': this.disabled, 'switch': this.isSwitch, 'readonly': this.readonly})}">
         <a href="#" @click="${this.linkClick}" @keypress="${this.onKeyPress}"
            class="${classMap({'switch-paddle': this.isSwitch, 'checkbox': !this.isSwitch, 'isChecked': checked, 'isUnchecked': !checked})}">
-           <squi-icon icon="checkBox" class="${classMap({'switch': this.isSwitch, 'checkBox': !this.isSwitch})}" ?activeIcon="${checked}"></squi-icon>           
+           <pd-icon icon="checkBox" class="${classMap({'switch': this.isSwitch, 'checkBox': !this.isSwitch})}" ?activeIcon="${checked}"></pd-icon>           
         </a>
         ${this.hasInner
           ? html`<span class="label">

package/src/PdInput.js

@@ -110,10 +110,10 @@ export class PdInput extends PdBaseUIInput {
     return html`
       <label for="${this.id}Input">${this.label}</label>
       <div class="input ${classMap({ error: this.errorMsg.length > 0 })}">
-        <squi-icon
+        <pd-icon
           icon="toggleCollapse"
           @click="${this._onIconClick}"
-        ></squi-icon>
+        ></pd-icon>
         <input
           id="${this.id}Input"
           class="input-style ${this.gradient ? 'gradient' : ''}"

package/src/PdInputArea.js

@@ -116,8 +116,8 @@ export class PdInputArea extends PdBaseUIInput {
     return html`
     <label for="${this.id}InputArea">${this.label}</label>
     <div class="input ${classMap({'error': this.errorMsg.length > 0})}">
-      <squi-icon icon="toggleCollapse" 
-        @click="${this._onIconClick}"></squi-icon>
+      <pd-icon icon="toggleCollapse" 
+        @click="${this._onIconClick}"></pd-icon>
       <textarea
         id="${this.id}InputArea"        
         class="input-style ${this.gradient ? 'gradient' : ''}"

package/src/PdSelect.js

@@ -202,10 +202,10 @@ export class PdSelect extends PdBaseUIInput {
     return html`
       <label for="${this.id}Select">${this.label}</label>
       <div class="input ${classMap({ error: this.errorMsg.length > 0 })}">
-        <squi-icon
+        <pd-icon
           icon="toggleCollapse"
           @click="${this._onIconClick}"
-        ></squi-icon>
+        ></pd-icon>
         <select
           id="${this.id}Input"
           class="select-css input-style ${this.gradient ? 'gradient' : ''}"

package/src/shared-input-styles.js

@@ -45,8 +45,8 @@ export const SharedInputStyles = css`
   .input {
     display: inline-block;
     /*position: relative; Prüfen: Wennd as an ist, felder über scroll-menu?*/
-    /* squi-icon smaller than input */
-    --squi-icon-computed-size: calc(var(--my-input-height) * 0.75); /* calc */
+    /* pd-icon smaller than input */
+    --pd-icon-computed-size: calc(var(--my-input-height) * 0.75); /* calc */
 
     /* Hack um eine Form Row (input mit Button => Booking) zu bekommen*/
     padding-top: var(--squi-input-padding, 0.5rem);
@@ -55,28 +55,28 @@ export const SharedInputStyles = css`
     color: var(--my-error-color);
   }
   /* squi icon depends on input styles to fit inside */
-  squi-icon {
+  pd-icon {
     display: none;
     position: absolute;
-    --squi-icon-height: var(--squi-icon-computed-size, 2rem);
-    --squi-icon-width: var(--squi-icon-computed-size, 2rem);
-    --squi-icon-fill-color: var(--squi-input-icon-fill-color, currentcolor);
-    --squi-icon-stroke-color: var(--squi-input-icon-stroke-color, none);
+    --pd-icon-height: var(--pd-icon-computed-size, 2rem);
+    --pd-icon-width: var(--pd-icon-computed-size, 2rem);
+    --pd-icon-fill-color: var(--squi-input-icon-fill-color, currentcolor);
+    --pd-icon-stroke-color: var(--squi-input-icon-stroke-color, none);
   }
-  squi-icon:hover {
+  pd-icon:hover {
     cursor: pointer;
   }
   /* Display icon if it's positioned */
-  :host([icon-right]) .input squi-icon {
+  :host([icon-right]) .input pd-icon {
     display: inline-block;
     right: 0;
   }
-  :host([icon-left]) .input squi-icon {
+  :host([icon-left]) .input pd-icon {
     display: inline-block;
     left: 0;
   }
 
-  /* Padding space for squi-icon => Noch input spezifisch? */
+  /* Padding space for pd-icon => Noch input spezifisch? */
   :host([icon-right]) > input {
     padding-right: var(--my-input-height);
   }