@design.estate/dees-catalog 1.0.225 → 1.0.227

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.225",
+  "version": "1.0.227",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
@@ -15,17 +15,19 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.0.51",
-    "@design.estate/dees-element": "^2.0.29",
+    "@design.estate/dees-domtools": "^2.0.55",
+    "@design.estate/dees-element": "^2.0.31",
     "@design.estate/dees-wcctools": "^1.0.81",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@push.rocks/smarti18n": "^1.0.4",
     "@push.rocks/smartpromise": "^4.0.3",
     "@push.rocks/smartstring": "^4.0.9",
-    "@tsclass/tsclass": "^4.0.43",
-    "highlight.js": "11.8.0",
+    "@tsclass/tsclass": "^4.0.46",
+    "highlight.js": "11.9.0",
+    "ibantools": "^4.3.5",
     "pdfjs-dist": "^3.11.174"
   },
   "devDependencies": {
@@ -35,7 +37,7 @@
     "@gitzone/tswatch": "^2.0.7",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/tapbundle": "^5.0.15",
-    "@types/node": "^20.8.3"
+    "@types/node": "^20.8.7"
   },
   "files": [
     "ts/**/*",

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.225',
+  version: '1.0.227',
   description: 'website for lossless.com'
 }

package/ts_web/elements/dees-form.demo.ts

@@ -0,0 +1,35 @@
+import { html, domtools } from '@design.estate/dees-element';
+import type { DeesForm } from './dees-form.js';
+
+export const demoFunc = () => html`
+  <style>
+    .demoContainer {
+      max-width: 400px;
+      margin: auto;
+      padding: 16px;
+      background: #111;
+    }
+  </style>
+  <div class="demoContainer">
+    <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-text .required="${true}" key="hello3" label="a password" isPasswordBool></dees-input-text>
+      <dees-input-checkbox
+        .required="${true}"
+        key="hello3"
+        label="another text"
+      ></dees-input-checkbox>
+      <dees-input-iban></dees-input-iban>
+      <dees-form-submit>Submit</dees-form-submit>
+    </dees-form>
+  </div>
+`;

package/ts_web/elements/dees-form.ts

@@ -1,4 +1,10 @@
-import { customElement, html, type TemplateResult, DeesElement, type CSSResult, } from '@design.estate/dees-element';
+import {
+  customElement,
+  html,
+  type TemplateResult,
+  DeesElement,
+  type CSSResult,
+} from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 
 import { DeesInputCheckbox } from './dees-input-checkbox.js';
@@ -7,17 +13,26 @@ import { DeesInputQuantitySelector } from './dees-input-quantityselector.js';
 import { DeesInputRadio } from './dees-input-radio.js';
 import { DeesFormSubmit } from './dees-form-submit.js';
 import { DeesTable } from './dees-table.js';
+import { demoFunc } from './dees-form.demo.js';
+import { DeesInputIban } from './dees-input-iban.js';
 
 // Unified set for form input types
 const FORM_INPUT_TYPES = [
   DeesInputCheckbox,
+  DeesInputIban,
   DeesInputText,
   DeesInputQuantitySelector,
   DeesInputRadio,
   DeesTable,
 ];
 
-export type TFormInputElement = DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio | DeesTable<any>;
+export type TFormInputElement =
+  | DeesInputCheckbox
+  | DeesInputIban
+  | DeesInputText
+  | DeesInputQuantitySelector
+  | DeesInputRadio
+  | DeesTable<any>;
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -27,26 +42,10 @@ 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) => {
-        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-form-submit>Submit</dees-form-submit>
-    </dees-form>
-  `;
+  public static demo = demoFunc;
 
   public name: string = 'myform';
-  public changeSubject = new domtools.rxjs.Subject();
+  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
   public readyDeferred = domtools.plugins.smartpromise.defer();
 
   public render(): TemplateResult {
@@ -77,14 +76,14 @@ export class DeesForm extends DeesElement {
   }
 
   public getFormElements(): Array<TFormInputElement> {
-    return (Array.from(this.children)).filter(child => 
+    return Array.from(this.children).filter((child) =>
       FORM_INPUT_TYPES.includes(child.constructor as any)
     ) as unknown as TFormInputElement[];
   }
 
   public getSubmitButton(): DeesFormSubmit | undefined {
-    return Array.from(this.children).find(child => 
-      child instanceof DeesFormSubmit
+    return Array.from(this.children).find(
+      (child) => child instanceof DeesFormSubmit
     ) as DeesFormSubmit;
   }
 
@@ -104,7 +103,7 @@ export class DeesForm extends DeesElement {
 
   public async collectFormData() {
     const children = this.getFormElements();
-    const valueObject: { [key: string]: string | number | boolean | any [] } = {};
+    const valueObject: { [key: string]: string | number | boolean | any[] } = {};
     for (const child of children) {
       if (!child.key) {
         console.log(`form element with label "${child.label}" has no key. skipping.`);

package/ts_web/elements/dees-input-checkbox.ts

@@ -22,7 +22,7 @@ export class DeesInputCheckbox extends DeesElement {
   public static demo = () => html`<dees-input-checkbox></dees-input-checkbox>`;
 
   // INSTANCE
-  public changeSubject = new domtools.rxjs.Subject();
+  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
 
   @property({
     type: String,

package/ts_web/elements/dees-input-dropdown.ts

@@ -20,7 +20,7 @@ export class DeesInputDropdown extends DeesElement {
   `
 
   // INSTANCE
-  public changeSubject = new domtools.rxjs.Subject();
+  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
 
   @property({
     type: String,

package/ts_web/elements/dees-input-fileupload.ts

@@ -8,10 +8,9 @@ import {
   unsafeCSS,
   cssManager,
   type CSSResult,
+  domtools,
 } from '@design.estate/dees-element';
 
-import * as domtools from '@design.estate/dees-domtools';
-
 declare global {
   interface HTMLElementTagNameMap {
     'dees-input-fileupload': DeesInputFileupload;
@@ -23,7 +22,7 @@ export class DeesInputFileupload extends DeesElement {
   public static demo = () => html`<dees-input-fileupload .label=${'Attachments'}></dees-input-fileupload>`;
 
   // INSTANCE
-  public changeSubject = new domtools.rxjs.Subject();
+  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
 
   @property({
     type: String,

package/ts_web/elements/dees-input-iban.demo.ts

@@ -0,0 +1,3 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`<dees-input-iban .label=${'IBAN'}></dees-input-iban>`;

package/ts_web/elements/dees-input-iban.ts

@@ -0,0 +1,98 @@
+import {
+  customElement,
+  DeesElement,
+  type TemplateResult,
+  state,
+  html,
+  domtools,
+  property,
+} from '@design.estate/dees-element';
+
+import * as ibantools from 'ibantools';
+import { demoFunc } from './dees-input-iban.demo.js';
+
+@customElement('dees-input-iban')
+export class DeesInputIban extends DeesElement {
+  // STATIC
+  public static demo = demoFunc;
+
+  // INSTANCE
+  @state()
+  enteredString: string = '';
+
+  @state()
+  enteredIbanIsValid: boolean = false;
+
+  @property({
+    type: Boolean,
+  })
+  public disabled = false;
+
+  @property({
+    type: Boolean,
+  })
+  public required = false;
+
+  @property({
+    type: String,
+  })
+  public label = '';
+
+  @property({
+    type: String,
+  })
+  public key = '';
+
+  @property({
+    type: String,
+  })
+  public value = '';
+
+  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject<DeesInputIban>();
+
+  public render(): TemplateResult {
+    return html`
+      <style>
+        input[type='text'] {
+          line-height: 20px;
+          padding: 5px;
+          width: 250px;
+        }
+      </style>
+      <dees-input-text
+        .label=${'IBAN'}
+        .value=${this.value}
+        @input=${(eventArg: InputEvent) => {
+          this.validateIban(eventArg);
+        }}
+      ></dees-input-text>
+    `;
+  }
+
+  public async firstUpdated() {
+    const deesInputText = this.shadowRoot.querySelector('dees-input-text');
+    deesInputText.disabled = this.disabled;
+    deesInputText.required = this.required;
+    deesInputText.changeSubject.subscribe(valueArg => {
+      this.value = valueArg.value;
+      this.changeSubject.next(this);
+    })
+  }
+
+  public async validateIban(eventArg: InputEvent): Promise<void> {
+    const inputElement: HTMLInputElement = eventArg.target as HTMLInputElement;
+    let enteredString = inputElement?.value;
+    enteredString = enteredString || '';
+    if (this.enteredString !== enteredString) {
+      this.enteredString = ibantools.friendlyFormatIBAN(enteredString) || '';
+      if (inputElement) {
+        inputElement.value = this.enteredString;
+        this.value = this.enteredString;
+        this.changeSubject.next(this);
+      }
+    }
+    this.enteredIbanIsValid = ibantools.isValidIBAN(this.enteredString.replace(/ /g, ''));
+    const deesInputText = this.shadowRoot.querySelector('dees-input-text');
+    deesInputText.validationText = `IBAN is valid: ${this.enteredIbanIsValid}`;
+  }
+}

package/ts_web/elements/dees-input-phone.demo.ts

@@ -0,0 +1,3 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`<dees-input-phone .label=${'Phone Number'}></dees-input-phone>`;

package/ts_web/elements/dees-input-phone.ts

@@ -0,0 +1,29 @@
+import {
+  customElement,
+  DeesElement,
+  type TemplateResult,
+  property,
+  html,
+  css,
+  unsafeCSS,
+  cssManager,
+  type CSSResult,
+} from '@design.estate/dees-element';
+import { demoFunc } from './dees-input-phone.demo.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-phone': DeesInputPhone;
+  }
+}
+
+@customElement('dees-input-phone')
+export class DeesInputPhone extends DeesElement {
+  // STATIC
+  public static demo = demoFunc;
+
+  // INSTANCE
+  public render() {
+    return html`<div>Phone Input</div>`;
+  }
+}

package/ts_web/elements/dees-input-quantityselector.ts

@@ -12,7 +12,7 @@ export class DeesInputQuantitySelector extends DeesElement {
   public static demo = () => html`<dees-input-quantityselector></dees-input-quantityselector>`;
 
   // INSTANCE
-  public changeSubject = new domtools.rxjs.Subject();
+  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
 
   @property()
   public label: string = 'Label';

package/ts_web/elements/dees-input-radio.ts

@@ -12,7 +12,7 @@ export class DeesInputRadio extends DeesElement {
   public static demo = () => html`<dees-input-radio></dees-input-radio>`;
 
   // INSTANCE
-  public changeSubject = new domtools.rxjs.Subject();
+  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
 
   @property({
     type: String,

package/ts_web/elements/dees-input-text.ts

@@ -1,4 +1,13 @@
-import {customElement, DeesElement, type TemplateResult, property, html, cssManager, type CSSResult,} from '@design.estate/dees-element';
+import {
+  customElement,
+  DeesElement,
+  type TemplateResult,
+  property,
+  html,
+  cssManager,
+  css,
+  type CSSResult,
+} from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 
 declare global {
@@ -15,10 +24,10 @@ export class DeesInputText extends DeesElement {
   `;
 
   // INSTANCE
-  public changeSubject = new domtools.rxjs.Subject<DeesInputText>();
+  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject<DeesInputText>();
 
   @property({
-    type: String
+    type: String,
   })
   public label: string;
 
@@ -35,12 +44,12 @@ export class DeesInputText extends DeesElement {
   public value: string = '';
 
   @property({
-    type: Boolean
+    type: Boolean,
   })
   public required: boolean = false;
 
   @property({
-    type: Boolean
+    type: Boolean,
   })
   public disabled: boolean = false;
 
@@ -56,88 +65,156 @@ export class DeesInputText extends DeesElement {
   })
   public showPasswordBool = false;
 
-  public render(): TemplateResult {
-    return html `
-      <style>
-        * {
-          box-sizing: border-box;
-        }
-
-        :host {
-          position: relative;
-          display: grid;
-          margin: 10px 0px;
-          margin-bottom: 24px;
-        }
-
-        .maincontainer {
-          color: ${this.goBright ? '#333' : '#ccc'};
-        }
+  @property({
+    type: Boolean,
+    reflect: true,
+  })
+  public validationState: 'valid' | 'warn' | 'invalid';
 
-        .label {
-          font-size: 14px;
-          margin-bottom: 5px;
-        }
+  @property({
+    reflect: true,
+  })
+  public validationText: string = '';
+
+  @property({})
+  validationFunction: (value: string) => boolean;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        position: relative;
+        display: grid;
+        margin: 8px 0px;
+        margin-bottom: 24px;
+        z-index: auto;
+      }
+
+      .maincontainer {
+        color: ${cssManager.bdTheme('#333', '#ccc')};
+      }
+
+      .label {
+        font-size: 14px;
+        margin-bottom: 4px;
+      }
+
+      input {
+        margin-top: 5px;
+        background: ${cssManager.bdTheme('#fafafa', '#222')};
+        border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
+        border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #333')};
+        border-right: ${cssManager.bdTheme('1px solid #CCC', 'none')};
+        border-left: ${cssManager.bdTheme('1px solid #CCC', 'none')};
+        padding-left: 10px;
+        padding-right: 10px;
+        border-radius: 2px;
+        width: 100%;
+        line-height: 36px;
+        transition: all 0.2s;
+        outline: none;
+        font-size: 16px;
+        position: relative;
+        z-index: 2;
+        // see template for more
+      }
+
+      input:disabled {
+        background: ${cssManager.bdTheme('#ffffff00', '#11111100')};
+        border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
+        color: #9b9b9e;
+        cursor: default;
+      }
+
+      input:focus {
+        outline: none;
+        border-bottom: 1px solid #e4002b;
+      }
+
+      .showPassword {
+        position: absolute;
+        bottom: 7px;
+        right: 10px;
+        border: 1px dashed #444;
+        border-radius: 7px;
+        padding: 4px 0px;
+        width: 40px;
+      }
+
+      .showPassword:hover {
+        cursor: pointer;
+        background: ${cssManager.bdTheme('#00000010', '#ffffff10')};
+      }
+
+      .validationContainer {
+        text-align: center;
+        padding: 6px 2px 2px 2px;
+        margin-top: -4px;
+        font-size: 12px;
+        color: #fff;
+        background: #e4002b;
+        position: relative;
+        z-index: 1;
+        border-radius: 3px;
+        transition: all 0.2s;
+      }
+    `,
+  ];
 
+  public render(): TemplateResult {
+    return html`
+      <style>
         input {
-          margin-top: 5px;
-          background: ${this.goBright ? '#fafafa' : '#222'};
-          border-top: ${this.goBright ? '1px solid #CCC'  : '1px solid #444'};
-          border-bottom: ${this.goBright ? '1px solid #CCC' : '1px solid #333'};
-          border-right: ${this.goBright ? '1px solid #CCC' : 'none'};
-          border-left: ${this.goBright ? '1px solid #CCC' : 'none'};
-          padding-left:10px;
-          padding-right: 10px;
-          border-radius: 2px;
-          width: 100%;
-          line-height: 48px;
-          transition: all 0.2s;
-          outline: none;
-          font-size: 16px;
-          font-family: ${this.isPasswordBool ? 'monospace': 'Inter'};
-          letter-spacing: ${this.isPasswordBool ? '1px': 'normal'};
+          font-family: ${this.isPasswordBool ? 'monospace' : 'Inter'};
+          letter-spacing: ${this.isPasswordBool ? '1px' : 'normal'};
           color: ${this.goBright ? '#333' : '#ccc'};
         }
-
-        input:disabled {
-          background: ${cssManager.bdTheme('#ffffff00', '#11111100')};
-          border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
-          color: #9b9b9e;
-          cursor: default;
-        }
-
-        input:focus {
-          outline: none;
-          border-bottom: 1px solid #e4002b;
-        }
-
-        .showPassword {
-          position: absolute;
-          bottom: 8px;
-          right: 10px;
-          border: 1px dashed #444;
-          border-radius: 7px;
-          padding: 8px 0px;
-          width: 40px;
-        }
-
-        .showPassword:hover {
-          cursor: pointer;
-          background: ${cssManager.bdTheme('#00000010', '#ffffff10')};
-        }
+        ${this.validationText ? css`
+          .validationContainer {
+            height: 22px;
+            opacity: 1;
+          }
+        ` : css`
+          .validationContainer {
+            height: 4px;
+            padding: 2px !important;
+            opacity: 0;
+          }
+        `}
       </style>
       <div class="maincontainer">
         ${this.label ? html`<div class="label">${this.label}</div>` : html``}
-        <input type="${this.isPasswordBool && !this.showPasswordBool ? 'password' : 'text'}" .value=${this.value} @input="${this.updateValue}" .disabled=${this.disabled} />
-        ${this.isPasswordBool ? html`
-          <div class="showPassword" @click=${this.togglePasswordView}>
-            <dees-icon .iconFA=${this.showPasswordBool ? 'eye' : 'eyeSlash'}></dees-icon>
-          </div>
-        ` : html``}
+        <input
+          type="${this.isPasswordBool && !this.showPasswordBool ? 'password' : 'text'}"
+          .value=${this.value}
+          @input="${this.updateValue}"
+          .disabled=${this.disabled}
+        />
+        <div class="validationContainer">
+          ${this.validationText}
+        </div>
+        ${this.isPasswordBool
+          ? html`
+              <div class="showPassword" @click=${this.togglePasswordView}>
+                <dees-icon .iconFA=${this.showPasswordBool ? 'eye' : 'eyeSlash'}></dees-icon>
+              </div>
+            `
+          : html``}
       </div>
     `;
   }
 
+  firstUpdated() {
+    const input = this.shadowRoot.querySelector('input');
+    input.addEventListener('input', (eventArg: InputEvent) => {
+      
+    });
+  }
+
   public async updateValue(eventArg: Event) {
     const target: any = eventArg.target;
     this.value = target.value;
@@ -152,10 +229,10 @@ export class DeesInputText extends DeesElement {
     this.disabled = false;
   }
 
-  public async togglePasswordView () {
+  public async togglePasswordView() {
     const domtools = await this.domtoolsPromise;
     this.showPasswordBool = !this.showPasswordBool;
-    console.log(`this.showPasswordBool is: ${this.showPasswordBool}`)
+    console.log(`this.showPasswordBool is: ${this.showPasswordBool}`);
   }
 
   public async focus() {

package/ts_web/elements/dees-table.ts

@@ -113,7 +113,7 @@ export class DeesTable<T> extends DeesElement {
     return this.data;
   }
   set value(valueArg) {}
-  public changeSubject = new domtools.rxjs.Subject<DeesTable<T>>();
+  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject<DeesTable<T>>();
   // end dees-form compatibility -----------------------------------------
 
   @property({