npm - @design.estate/dees-catalog - Versions diffs - 1.0.173 → 1.0.174 - Mend

@design.estate/dees-catalog 1.0.173 → 1.0.174

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/dist_bundle/bundle.js +237 -208
package/dist_bundle/bundle.js.map +4 -4
package/dist_ts_web/elements/dees-form.d.ts +6 -6
package/dist_ts_web/elements/dees-form.js +41 -52
package/dist_ts_web/elements/dees-input-checkbox.d.ts +1 -0
package/dist_ts_web/elements/dees-input-checkbox.js +8 -2
package/dist_ts_web/elements/dees-simple-login.d.ts +12 -0
package/dist_ts_web/elements/dees-simple-login.js +68 -0
package/dist_ts_web/elements/helperclasses/formcontroller.d.ts +2 -0
package/dist_ts_web/elements/helperclasses/formcontroller.js +3 -0
package/dist_ts_web/elements/index.d.ts +2 -1
package/dist_ts_web/elements/index.js +3 -2
package/dist_ts_web/pages/index.d.ts +1 -0
package/dist_ts_web/pages/index.js +2 -0
package/dist_ts_web/pages/mainpage.d.ts +1 -0
package/dist_ts_web/pages/mainpage.js +6 -0
package/dist_watch/bundle.js +74412 -0
package/dist_watch/bundle.js.map +7 -0
package/dist_watch/index.html +28 -0
package/package.json +7 -7
package/ts_web/00_commitinfo_data.ts +1 -1
package/ts_web/elements/dees-form.ts +48 -57
package/ts_web/elements/dees-input-checkbox.ts +8 -1
package/ts_web/elements/dees-input-fileupload.ts +17 -0
package/ts_web/elements/dees-simple-login.ts +74 -0
package/ts_web/elements/helperclasses/formcontroller.ts +3 -0
package/ts_web/elements/index.ts +2 -1
package/ts_web/pages/index.ts +1 -0
package/ts_web/pages/mainpage.ts +6 -0

package/dist_watch/index.html ADDED Viewed

@@ -0,0 +1,28 @@
+<!--gitzone element-->
+<!-- made by Task Venture Capital GmbH -->
+<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
+<html lang="en">
+  <head>
+    <!--Lets set some basic meta tags-->
+    <meta
+      name="viewport"
+      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
+    />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <!--Lets load standard fonts-->
+    <link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
+    <link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
+    <style>
+      body {
+        margin: 0px;
+        background: #222222;
+      }
+    </style>
+    <script type="module" src="/bundle.js"></script>
+  </head>
+  <body>
+  </body>
+</html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.173",
+  "version": "1.0.174",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
@@ -22,20 +22,20 @@
     "@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/smartpromise": "^4.0.0",
-    "@push.rocks/smartstring": "^4.0.5",
+    "@push.rocks/smartpromise": "^4.0.3",
+    "@push.rocks/smartstring": "^4.0.8",
     "@tsclass/tsclass": "^4.0.42",
     "highlight.js": "11.8.0",
-    "pdfjs-dist": "^2.15.349"
+    "pdfjs-dist": "^2.16.105"
   },
   "devDependencies": {
     "@gitzone/tsbuild": "^2.1.66",
     "@gitzone/tsbundle": "^2.0.8",
     "@gitzone/tstest": "^1.0.77",
     "@gitzone/tswatch": "^2.0.7",
-    "@push.rocks/projectinfo": "^5.0.1",
-    "@push.rocks/tapbundle": "^5.0.12",
-    "@types/node": "^20.4.8"
+    "@push.rocks/projectinfo": "^5.0.2",
+    "@push.rocks/tapbundle": "^5.0.15",
+    "@types/node": "^20.5.1"
   },
   "files": [
     "ts/**/*",

package/ts_web/00_commitinfo_data.ts CHANGED Viewed

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

package/ts_web/elements/dees-form.ts CHANGED Viewed

@@ -7,9 +7,15 @@ import { DeesInputQuantitySelector } from './dees-input-quantityselector.js';
 import { DeesInputRadio } from './dees-input-radio.js';
 import { DeesFormSubmit } from './dees-form-submit.js';
-export type TFormElement = Array<
-  DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio
->;
+// Unified set for form input types
+const FORM_INPUT_TYPES = [
+  DeesInputCheckbox,
+  DeesInputText,
+  DeesInputQuantitySelector,
+  DeesInputRadio
+];
+export type TFormInputElement = DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio;
 declare global {
   interface HTMLElementTagNameMap {
@@ -19,6 +25,7 @@ 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"
@@ -31,11 +38,7 @@ export class DeesForm extends DeesElement {
     >
       <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>
   `;
@@ -55,51 +58,37 @@ export class DeesForm extends DeesElement {
   }
   public async firstUpdated() {
-    const formChildren = this.getFormChildren();
-    this.checkRequiredStatus();
+    const formChildren = this.getFormElements();
+    this.updateRequiredStatus();
     for (const child of formChildren) {
-      child.changeSubject.subscribe(async (elementArg: TFormElement) => {
-        const valueObject = await this.gatherData();
+      child.changeSubject.subscribe(async () => {
+        const valueObject = await this.collectFormData();
         this.changeSubject.next(valueObject);
         console.log(valueObject);
-        this.checkRequiredStatus();
+        this.updateRequiredStatus();
       });
     }
-    await this.instrumentBehaviours();
+    await this.addBehaviours();
   }
-  public getFormChildren() {
-    const children: Array<DeesElement> = this.children as any;
-    const formChildren: TFormElement = [];
-    for (const child of children) {
-      if (
-        child instanceof DeesInputCheckbox ||
-        child instanceof DeesInputText ||
-        child instanceof DeesInputQuantitySelector
-      ) {
-        formChildren.push(child);
-      }
-    }
-    return formChildren;
+  public getFormElements(): Array<TFormInputElement> {
+    return (Array.from(this.children)).filter(child =>
+      FORM_INPUT_TYPES.includes(child.constructor as any)
+    ) as unknown as TFormInputElement[];
   }
-  public getSubmitButton() {
-    const children: Array<DeesElement> = this.children as any;
-    let submitButton: DeesFormSubmit;
-    for (const childArg of children) {
-      if (childArg instanceof DeesFormSubmit) {
-        submitButton = childArg;
-      }
-    }
-    return submitButton;
+  public getSubmitButton(): DeesFormSubmit | undefined {
+    return Array.from(this.children).find(child =>
+      child instanceof DeesFormSubmit
+    ) as DeesFormSubmit;
   }
-  public async checkRequiredStatus() {
+  public async updateRequiredStatus() {
     console.log('checking the required status.');
     let requiredOK = true;
-    for (const childArg of this.getFormChildren()) {
+    for (const childArg of this.getFormElements()) {
       if (childArg.required && !childArg.value) {
         requiredOK = false;
       }
@@ -109,8 +98,8 @@ export class DeesForm extends DeesElement {
     }
   }
-  public async gatherData() {
-    const children = this.getFormChildren();
+  public async collectFormData() {
+    const children = this.getFormElements();
     const valueObject: { [key: string]: string | number | boolean } = {};
     for (const child of children) {
       valueObject[child.key] = child.value;
@@ -119,7 +108,7 @@ export class DeesForm extends DeesElement {
   }
   public async gatherAndDispatch() {
-    const valueObject = await this.gatherData();
+    const valueObject = await this.collectFormData();
     const formDataEvent = new CustomEvent('formData', {
       detail: {
         data: valueObject,
@@ -135,7 +124,7 @@ export class DeesForm extends DeesElement {
     visualStateArg: 'normal' | 'pending' | 'error' | 'success',
     textStateArg: string
   ) {
-    const inputChildren = this.getFormChildren();
+    const inputChildren = this.getFormElements();
     const submitButton = this.getSubmitButton();
     switch (visualStateArg) {
@@ -172,20 +161,22 @@ export class DeesForm extends DeesElement {
     submitButton.text = textStateArg;
   }
-  public async instrumentBehaviours() {
-    const children = this.getFormChildren();
-    for (const child of children) {
-      child.addEventListener('keydown', (eventArg) => {
-        if (eventArg.key === 'Enter') {
-          const currentIndex = children.indexOf(child);
-          if (currentIndex < children.length - 1) {
-            children[currentIndex + 1].focus();
-          } else {
-            children[currentIndex].blur();
-            this.getSubmitButton().focus();
-          }
+  public async addBehaviours() {
+    // Use event delegation
+    this.addEventListener('keydown', (event: KeyboardEvent) => {
+      const target = event.target as DeesElement;
+      if (!FORM_INPUT_TYPES.includes(target.constructor as any)) return;
+      if (event.key === 'Enter') {
+        const children = this.getFormElements();
+        const currentIndex = children.indexOf(target as any);
+        if (currentIndex < children.length - 1) {
+          children[currentIndex + 1].focus();
+        } else {
+          target.blur();
+          this.getSubmitButton()?.focus();
         }
-      });
-    }
+      }
+    });
   }
 }

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

@@ -144,7 +144,7 @@ export class DeesInputCheckbox extends DeesElement {
         }
       </style>
       <div class="maincontainer" @click="${this.toggleSelected}">
-        <div class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}">
+        <div class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}" tabindex="0">
           ${this.value
             ? html`
                 <span class="checkmark">
@@ -172,4 +172,11 @@ export class DeesInputCheckbox extends DeesElement {
     );
     this.changeSubject.next(this);
   }
+  public focus(): void {
+    const checkboxDiv = this.shadowRoot.querySelector('.checkbox');
+    if (checkboxDiv) {
+      (checkboxDiv as any).focus();
+    }
+  }
 }

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

@@ -155,7 +155,10 @@ export class DeesInputFileupload extends DeesElement {
   public async openFileSelector() {
     const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
     inputFile.click();
+    this.state = 'idle';
+    this.buttonText = 'Upload more files...';
   }
   public async updateValue(eventArg: Event) {
     const target: any = eventArg.target;
@@ -164,6 +167,20 @@ export class DeesInputFileupload extends DeesElement {
   }
   public firstUpdated() {
+    const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
+    inputFile.addEventListener('change', (event: Event) => {
+      const target = event.target as HTMLInputElement;
+      for (const file of Array.from(target.files)) {
+        this.value.push(file);
+      }
+      this.requestUpdate();
+      console.log(`Got ${this.value.length} files!`);
+      // Reset the input value to allow selecting the same file again if needed
+      target.value = '';
+    });
+    // lets handle drag and drop
     const dropArea = this.shadowRoot.querySelector('.uploadButton');
     const handlerFunction = (eventArg: DragEvent) => {
       eventArg.preventDefault();

package/ts_web/elements/dees-simple-login.ts ADDED Viewed

@@ -0,0 +1,74 @@
+import {
+  customElement,
+  html,
+  DeesElement,
+  property,
+  type TemplateResult,
+  cssManager,
+  css,
+  unsafeCSS,
+  type CSSResult,
+  state,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-simple-login': DeesSimpleLogin;
+  }
+}
+@customElement('dees-simple-login')
+export class DeesSimpleLogin extends DeesElement {
+  // STATIC
+  public static demo = () => html` <dees-simple-login></dees-simple-login> `;
+  // INSTANCE
+  @property()
+  public title = 'Dees Simple Login';
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        color: ${cssManager.bdTheme('#333', '#fff')};
+      }
+      .loginContainer {
+        display: flex;
+        justify-content: center; /* aligns horizontally */
+        align-items: center; /* aligns vertically */
+        height: 100%;
+      }
+      .login {
+        min-width: 320px;
+        min-height: 100px;
+        background: ${cssManager.bdTheme('#eeeeeb', '#111')};
+        box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
+        border-radius: 3px;
+        padding: 24px;
+      }
+      .header {
+        text-align: center;
+      }
+    `,
+  ];
+  public render(): TemplateResult {
+    return html`
+      <div class="loginContainer">
+        <div class="login">
+          <dees-form>
+            <div class="header">Login to ${this.title}</div>
+            <dees-input-text label="username"></dees-input-text>
+            <dees-input-text label="password" isPasswordBool></dees-input-text>
+            <dees-form-submit>login</dees-form-submit>
+          </dees-form>
+        </div>
+      </div>
+      <slot></slot>
+    `;
+  }
+}

package/ts_web/elements/helperclasses/formcontroller.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export class FormController {
+}

package/ts_web/elements/index.ts CHANGED Viewed

@@ -4,8 +4,8 @@ export * from './dees-chips.js';
 export * from './dees-contextmenu.js';
 export * from './dees-dataview-codebox.js';
 export * from './dees-dataview-statusobject.js';
-export * from './dees-form.js';
 export * from './dees-form-submit.js';
+export * from './dees-form.js';
 export * from './dees-icon.js';
 export * from './dees-input-checkbox.js';
 export * from './dees-input-dropdown.js';
@@ -15,6 +15,7 @@ export * from './dees-input-radio.js';
 export * from './dees-input-text.js';
 export * from './dees-mobilenavigation.js';
 export * from './dees-pdf.js';
+export * from './dees-simple-login.js';
 export * from './dees-speechbubble.js';
 export * from './dees-spinner.js';
 export * from './dees-stepper.js';

package/ts_web/pages/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './mainpage.js';

package/ts_web/pages/mainpage.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { html } from '@design.estate/dees-element';
+export const mainPage = () => html`
+  <dees-input-text label="my-test-label"></dees-input-text>
+  <dees-input-text label="my-test-label"></dees-input-text>
+`;