1.0.46

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.43",
+  "version": "1.0.46",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@designestate/dees-catalog",
-      "version": "1.0.43",
+      "version": "1.0.46",
       "license": "MIT",
       "dependencies": {
         "@designestate/dees-domtools": "^1.0.89",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.43",
+  "version": "1.0.46",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

ts_web/elements/dees-button.ts

@@ -145,17 +145,21 @@ export class DeesButton extends DeesElement {
       }
 
       .button.pending {
-        background: #0277bd70;
+        border: 1px solid ${cssManager.bdTheme('#0277bd', '#0277bd70')};
+        background: ${cssManager.bdTheme('#0277bd', '#0277bd70')};
         color: #fff;
       }
 
       .button.success {
-        background: #8BC34A70;
+        border: 1px solid ${cssManager.bdTheme('#689F38', '#8BC34A70')};
+        background: ${cssManager.bdTheme('#689F38', '#8BC34A70')};
         color: #fff;
       }
 
       .button.error {
-        background: #E64A1970;
+        border: 1px solid ${cssManager.bdTheme('#B71C1C', '#E64A1970')};
+        background: ${cssManager.bdTheme('#B71C1C', '')};
+        background: ;
         color: #fff;
       }
 

ts_web/elements/dees-form.ts

@@ -7,7 +7,9 @@ import { DeesInputRadio } from './dees-input-radio';
 import * as domtools from '@designestate/dees-domtools';
 import { DeesFormSubmit } from './dees-form-submit';
 
-export type TFormElement = Array<DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio>;
+export type TFormElement = Array<
+  DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio
+>;
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -18,15 +20,22 @@ declare global {
 @customElement('dees-form')
 export class DeesForm extends DeesElement {
   public static demo = () => html`
-    <dees-form style="display: block; margin:auto; max-width: 500px; padding: 20px" @formData=${async (eventArg) => {
+    <dees-form
+      style="display: block; margin:auto; max-width: 500px; padding: 20px"
+      @formData=${async (eventArg) => {
         const form: DeesForm = eventArg.currentTarget;
         form.setStatus('pending', 'authenticating...');
         await domtools.plugins.smartdelay.delayFor(1000);
         form.setStatus('success', 'authenticated!');
-    }}>
+      }}
+    >
       <dees-input-text .required="${true}" key="hello1" label="a text"></dees-input-text>
       <dees-input-text .required="${true}" key="hello2" label="also a text"></dees-input-text>
-      <dees-input-checkbox .required="${true}" key="hello3" label="another text"></dees-input-checkbox>
+      <dees-input-checkbox
+        .required="${true}"
+        key="hello3"
+        label="another text"
+      ></dees-input-checkbox>
       <dees-form-submit>Submit</dees-form-submit>
     </dees-form>
   `;
@@ -63,7 +72,11 @@ export class DeesForm extends DeesElement {
     const formChildren: TFormElement = [];
 
     for (const child of children) {
-      if (child instanceof DeesInputCheckbox || child instanceof DeesInputText || child instanceof DeesInputQuantitySelector) {
+      if (
+        child instanceof DeesInputCheckbox ||
+        child instanceof DeesInputText ||
+        child instanceof DeesInputQuantitySelector
+      ) {
         formChildren.push(child);
       }
     }
@@ -74,7 +87,7 @@ export class DeesForm extends DeesElement {
     const children: Array<DeesElement> = this.children as any;
     let submitButton: DeesFormSubmit;
     for (const childArg of children) {
-      if(childArg instanceof DeesFormSubmit) {
+      if (childArg instanceof DeesFormSubmit) {
         submitButton = childArg;
       }
     }
@@ -82,8 +95,7 @@ export class DeesForm extends DeesElement {
   }
 
   public async checkRequiredStatus() {
-    console.log('checking the required status.')
+    console.log('checking the required status.');
-    
 
     let requiredOK = true;
     for (const childArg of this.getFormChildren()) {
@@ -96,7 +108,7 @@ export class DeesForm extends DeesElement {
 
   public async gatherData() {
     const children = this.getFormChildren();
-    const valueObject: { [key: string]: string | number | boolean} = {};
+    const valueObject: { [key: string]: string | number | boolean } = {};
     for (const child of children) {
       valueObject[child.key] = child.value;
     }
@@ -107,20 +119,23 @@ export class DeesForm extends DeesElement {
     const valueObject = await this.gatherData();
     const formDataEvent = new CustomEvent('formData', {
       detail: {
-        data: valueObject
+        data: valueObject,
       },
-      bubbles: true
+      bubbles: true,
     });
     this.dispatchEvent(formDataEvent);
-    console.log('dispatched data:')
+    console.log('dispatched data:');
     console.log(valueObject);
   }
 
-  public setStatus (visualStateArg: 'normal' | 'pending' | 'error' | 'success', textStateArg: string) {
+  public setStatus(
+    visualStateArg: 'normal' | 'pending' | 'error' | 'success',
+    textStateArg: string
+  ) {
     const inputChildren = this.getFormChildren();
     const submitButton = this.getSubmitButton();
 
-    switch(visualStateArg) {
+    switch (visualStateArg) {
       case 'pending':
         submitButton.disabled = true;
         submitButton.status = 'pending';
@@ -135,9 +150,15 @@ export class DeesForm extends DeesElement {
           inputChild.disabled = true;
         }
         break;
+      case 'error':
+        submitButton.disabled = true;
+        submitButton.status = 'error';
+        for (const inputChild of inputChildren) {
+          inputChild.disabled = true;
+        }
+        break;
     }
 
     submitButton.text = textStateArg;
-
   }
 }

ts_web/elements/dees-spinner.ts

@@ -45,7 +45,7 @@ export class DeesSpinner extends DeesElement {
       }
 
       #loading {
-        transition: all 0.3s;
+        transition: none;
         display: flex;
         justify-content: center;
         align-content: center;