@design.estate/dees-catalog 1.0.243 → 1.0.246

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.243",
+  "version": "1.0.246",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
@@ -11,7 +11,7 @@
   "dependencies": {
     "@design.estate/dees-domtools": "^2.0.55",
     "@design.estate/dees-element": "^2.0.33",
-    "@design.estate/dees-wcctools": "^1.0.85",
+    "@design.estate/dees-wcctools": "^1.0.87",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-brands-svg-icons": "^6.5.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
@@ -21,17 +21,17 @@
     "@push.rocks/smartstring": "^4.0.13",
     "@tsclass/tsclass": "^4.0.46",
     "highlight.js": "11.9.0",
-    "ibantools": "^4.3.8",
+    "ibantools": "^4.3.9",
     "pdfjs-dist": "^4.0.379"
   },
   "devDependencies": {
     "@git.zone/tsbuild": "^2.1.72",
-    "@git.zone/tsbundle": "^2.0.14",
+    "@git.zone/tsbundle": "^2.0.15",
     "@git.zone/tstest": "^1.0.77",
     "@git.zone/tswatch": "^2.0.21",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/tapbundle": "^5.0.15",
-    "@types/node": "^20.10.8"
+    "@types/node": "^20.11.5"
   },
   "files": [
     "ts/**/*",

package/ts_web/00_commitinfo_data.ts

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

package/ts_web/elements/00colors.ts

@@ -0,0 +1,11 @@
+export const dark = {
+  blue: '#0050b9',
+  blueActive: '#0069f2',
+  text: '#ffffff',
+}
+
+export const bright = {
+  blue: '#0050b9',
+  blueActive: '#0069f2',
+  text: '#333333',
+}

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

@@ -1,5 +1,5 @@
 import { html } from '@design.estate/dees-element';
-import * as plugins from './plugins.js';
+import * as plugins from './00plugins.js';
 
 import { DeesContextmenu } from './dees-contextmenu.js';
 

package/ts_web/elements/dees-contextmenu.ts

@@ -1,5 +1,6 @@
+import * as colors from './00colors.js';
+import * as plugins from './00plugins.js';
 import { demoFunc } from './dees-contextmenu.demo.js';
-import * as plugins from './plugins.js';
 import {
   customElement,
   html,
@@ -110,16 +111,18 @@ export class DeesContextmenu extends DeesElement {
         color: ${cssManager.bdTheme('#222', '#ccc')};
         font-size: 14px;
         width: 200px;
-        border: 1px solid ${cssManager.bdTheme('#fff', '#444')};
+        border: 1px solid ${cssManager.bdTheme('#fff', '#ffffff10')};
         min-height: 34px;
         border-radius: 3px;
         background: ${cssManager.bdTheme('#fff', '#222')};
         box-shadow: 0px 1px 4px ${cssManager.bdTheme('#00000020', '#000000')};
         user-select: none;
+        padding: 4px;
       }
 
       .mainbox .menuitem {
-        padding: 8px;
+        padding: 4px 8px;
+        border-radius: 3px;
       }
 
       .mainbox .menuitem dees-icon {
@@ -130,7 +133,7 @@ export class DeesContextmenu extends DeesElement {
       }
 
       .mainbox .menuitem:hover {
-        background: ${cssManager.bdTheme('#00000010', '#ffffff10')};
+        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
       }
 
       .mainbox .menuitem:active {

package/ts_web/elements/dees-dataview-statusobject.ts

@@ -1,3 +1,6 @@
+import * as colors from './00colors.js';
+import * as plugins from './00plugins.js';
+
 import { demoFunc } from './dees-dataview-statusobject.demo.js';
 import {
   DeesElement,
@@ -34,6 +37,7 @@ export class DeesDataviewStatusobject extends DeesElement {
         box-shadow: 0px 1px 3px #00000030;
         min-height: 48px;
         color: ${cssManager.bdTheme('#000', '#fff')};
+        cursor: default;
       }
 
       .heading {
@@ -69,7 +73,20 @@ export class DeesDataviewStatusobject extends DeesElement {
         padding: 4px;
         border-radius: 3px;
         margin-right: 16px;
-        color: #ffffff80
+        color: #ffffff80;
+        user-select: none;
+      }
+
+      .copyMain:hover {
+        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+        border: 1px solid ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+        color: #fff;
+      }
+
+      .copyMain:active {
+        background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
+        border: 1px solid ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
+        color: #fff;
       }
 
       .statusdot.ok {
@@ -85,11 +102,16 @@ export class DeesDataviewStatusobject extends DeesElement {
       }
 
       .detail {
-        minheight: 60px;
+        min-height: 60px;
         align-items: center;
         display: grid;
         grid-template-columns: 40px auto;
         border-top: 1px dotted ${cssManager.bdTheme('#999', '#282828')};
+        transition: all 0.2s;
+      }
+
+      .detail:hover {
+        background: #ffffff05;
       }
 
       .detail .detailsText {

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

@@ -35,7 +35,9 @@ export const demoFunc = () => html`
           { option: 'option 2', key: 'option2' },
           { option: 'option 3', key: 'option3' },
         ]}></dees-input-multiselect>
-      <dees-input-typelist></dees-input-typelist>
+      <dees-input-typelist
+        .label=${'a type list'}
+      ></dees-input-typelist>
       <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
@@ -50,6 +52,14 @@ export const demoFunc = () => html`
         label="another text"
       ></dees-input-checkbox>
       <dees-input-iban></dees-input-iban>
+      <dees-input-multitoggle
+        .label=${'multi select'}
+        .options=${['option 1', 'option 2', 'option 3']}
+        .selectedOption=${'option 1'}
+      ></dees-input-multitoggle>
+      <dees-input-fileupload
+        .label=${'attachments'}
+      ></dees-input-fileupload>
       <dees-form-submit>Submit</dees-form-submit>
     </dees-form>
   </div>

package/ts_web/elements/dees-icon.ts

@@ -50,11 +50,13 @@ import {
   faEyeSlash as faEyeSlashSolid,
   faFileInvoice as faFileInvoiceSolid,
   faFileInvoiceDollar as faFileInvoiceDollarSolid,
+  faGear as faGearSolid,
   faGrip as faGripSolid,
   faMessage as faMessageSolid,
   faMoneyCheckDollar as faMoneyCheckDollarSolid,
   faMugHot as faMugHotSolid,
   faMinus as faMinusSolid,
+  faPaperclip as faPaperclipSolid,
   faPaste as faPasteSolid,
   faPenToSquare as faPenToSquareSolid,
   faPlus as faPlusSolid,
@@ -93,12 +95,14 @@ export const faIcons = {
   eyeSlash: faEyeSlashSolid,
   fileInvoice: faFileInvoiceSolid,
   fileInvoiceDoller: faFileInvoiceDollarSolid,
+  gear: faGearSolid,
   grip: faGripSolid,
   message: faMessageRegular,
   messageSolid: faMessageSolid,
   moneyCheckDollar: faMoneyCheckDollarSolid,
   mugHot: faMugHotSolid,
   minus: faMinusSolid,
+  paperclip: faPaperclipSolid,
   paste: faPasteRegular,
   pasteSolid: faPasteSolid,
   penToSquare: faPenToSquareSolid,

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

@@ -1,3 +1,8 @@
+import * as colors from './00colors.js';
+import * as plugins from './00plugins.js';
+
+import { DeesContextmenu } from './dees-contextmenu.js';
+
 import {
   customElement,
   DeesElement,
@@ -19,7 +24,8 @@ declare global {
 
 @customElement('dees-input-fileupload')
 export class DeesInputFileupload extends DeesElement {
-  public static demo = () => html`<dees-input-fileupload .label=${'Attachments'}></dees-input-fileupload>`;
+  public static demo = () =>
+    html`<dees-input-fileupload .label=${'Attachments'}></dees-input-fileupload>`;
 
   // INSTANCE
   public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
@@ -70,6 +76,7 @@ export class DeesInputFileupload extends DeesElement {
         display: grid;
         margin: 10px 0px;
         margin-bottom: 24px;
+        color: ${cssManager.bdTheme('#333', '#ccc')};
       }
 
       .hidden {
@@ -77,13 +84,37 @@ export class DeesInputFileupload extends DeesElement {
       }
 
       .maincontainer {
+        position: relative;
+        border-radius: 3px;
+        padding: 8px;
+        background: ${cssManager.bdTheme('#fafafa', '#222222')};
         color: ${cssManager.bdTheme('#333', '#ccc')};
-        
+        border-top: 1px solid #ffffff10;
+      }
+
+      .maincontainer::after {
+        top: 2px;
+        right: 2px;
+        left: 2px;
+        bottom: 2px;
+        transform: scale3d(0.98, 0.9, 1);
+        position: absolute;
+        content: '';
+        display: block;
+        border: 2px dashed rgba(255, 255, 255, 0);
+        transition: all 0.2s;
+        pointer-events: none;
+        background: #00000000;
+      }
+      .maincontainer.dragOver::after {
+        transform: scale3d(1, 1, 1);
+        border: 2px dashed rgba(255, 255, 255, 0.3);
+        background: #00000080;
       }
 
       .label {
         font-size: 14px;
-        margin-bottom: 5px;
+        margin-bottom: 8px;
       }
 
       .uploadButton {
@@ -93,46 +124,50 @@ export class DeesInputFileupload extends DeesElement {
         background: ${cssManager.bdTheme('#fafafa', '#333333')};
         border-radius: 3px;
         text-align: center;
+        font-size: 14px;
+        cursor: default;
       }
 
       .uploadButton:hover {
         color: #fff;
-        background: rgb(3, 155, 229);
-      }
-
-      .uploadButton::after {
-        top: 2px;
-        right: 2px;
-        left: 2px;
-        bottom: 2px;
-        transform: scale3d(0.98, 0.9, 1);
-        position: absolute;
-        content: '';
-        display: block;
-        border: 2px dashed rgba(255, 255, 255, 0);
-        transition: all 0.2s;
-      }
-      .uploadButton.dragOver::after {
-        transform: scale3d(1, 1, 1);
-        border: 2px dashed rgba(255, 255, 255, 0.3);
+        background: ${unsafeCSS(colors.dark.blue)};
       }
 
       .uploadCandidate {
+        display: grid;
+        grid-template-columns: 48px auto;
+        background: #333;
+        padding: 8px 8px 8px 0px;
+        margin-bottom: 8px;
         text-align: left;
-        border-bottom: 1px dashed #444;
+        border-radius: 3px;
         color: ${cssManager.bdTheme('#666', '#ccc')};
-        padding: 8px;
         font-family: 'Roboto', 'Inter', sans-serif;
-      }
-
-      .uploadButton:hover .uploadCandidate {
-        color: ${cssManager.bdTheme('#fff', '#fff')};
-        border-bottom: 1px dashed #fff;
+        cursor: default;
+        transition: all 0.2s;
+        border-top: 1px solid #ffffff10;
       }
 
       .uploadCandidate:last-child {
         margin-bottom: 8px;
       }
+
+      .uploadCandidate .icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 16px;
+      }
+
+      .uploadCandidate:hover {
+        background: #393939;
+      }
+
+      .uploadCandidate .description {
+        font-size: 14px;
+        border-left: 1px solid #ffffff10;
+        padding-left: 8px;
+      }
     `,
   ];
 
@@ -141,10 +176,32 @@ export class DeesInputFileupload extends DeesElement {
       <div class="hidden">
         <input type="file"></div>
       </div>
-      <div class="maincontainer">
-        ${this.label ? html`<div class="label">${this.label}</div>` : null}
-        ${this.value.map((fileArg) => html` <div class="uploadCandidate">${fileArg.name} | ${fileArg.size}</div> `)}
-        <div class="uploadButton ${this.state === 'dragOver' ? 'dragOver' : ''}" @click=${this.openFileSelector}>
+      ${this.label ? html`<div class="label">${this.label}</div>` : null}
+      <div class="maincontainer ${this.state === 'dragOver' ? 'dragOver' : ''}">
+        ${this.value.map(
+          (fileArg) => html`
+          <div class="uploadCandidate" @contextmenu=${eventArg => {
+            DeesContextmenu.openContextMenuWithOptions(eventArg, [{
+              iconName: 'trash',
+              name: 'Remove',
+              action: async () => {
+                this.value.splice(this.value.indexOf(fileArg), 1);
+                this.requestUpdate();
+              }
+            }]);
+          }}>
+            <div class="icon">
+              <dees-icon .iconFA=${'paperclip'}></dees-icon>
+            </div>
+            <div class="description">
+              <span style="font-weight: 600">${fileArg.name}</span><br />
+              <span style="font-weight: 400">${fileArg.size}</span>
+            </div>
+          </div> `
+        )}
+        <div class="uploadButton" @click=${
+          this.openFileSelector
+        }>
           ${this.buttonText}
         </div>
       </div>
@@ -157,7 +214,6 @@ export class DeesInputFileupload extends DeesElement {
     this.state = 'idle';
     this.buttonText = 'Upload more files...';
   }
-  
 
   public async updateValue(eventArg: Event) {
     const target: any = eventArg.target;
@@ -178,9 +234,8 @@ export class DeesInputFileupload extends DeesElement {
       target.value = '';
     });
 
-
     // lets handle drag and drop
-    const dropArea = this.shadowRoot.querySelector('.uploadButton');
+    const dropArea = this.shadowRoot.querySelector('.maincontainer');
     const handlerFunction = (eventArg: DragEvent) => {
       eventArg.preventDefault();
       switch (eventArg.type) {

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

@@ -16,6 +16,11 @@ const { demoFunc } = await import('./dees-input-multitoggle.demo.js');
 export class DeesInputMultitoggle extends DeesElement {
   public static demo = demoFunc;
 
+  @property({
+    type: String,
+  })
+  public label: string;
+
   @property()
   type: 'boolean' | 'multi' | 'single' = 'multi';
 
@@ -40,9 +45,17 @@ export class DeesInputMultitoggle extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        display: block;
+        color: ${cssManager.bdTheme('#333', '#ccc')};
         user-select: none;
+        margin: 8px 0px 24px 0px;
       }
+
+      .label {
+        font-size: 14px;
+        margin-bottom: 8px;
+      }
+
       .selections {
         position: relative;
         display: flex;
@@ -51,30 +64,37 @@ export class DeesInputMultitoggle extends DeesElement {
         background: #333;
         width: min-content;
         border-radius: 20px;
-        height: 40px;
+        height: 32px;
+        border-top: 1px solid #ffffff10;
       }
 
       .option {
-        color: #CCC;
+        color: #ccc;
         position: relative;
         padding: 0px 16px;
-        line-height: 40px;
+        line-height: 32px;
         cursor: default;
         width: min-content; /* Make the width as per the content */
         white-space: nowrap; /* Prevent text wrapping */
         transition: all 0.1s;
+        font-size: 14px;
+        transform: translateY(-1px);
       }
 
       .option:hover {
         color: #fff;
       }
 
+      .option.selected {
+        color: #fff;
+      }
+
       .indicator {
         opacity: 0;
         position: absolute;
-        height: 32px;
+        height: 24px;
         left: 4px;
-        top: 4px;
+        top: 3px;
         border-radius: 16px;
         background: #0050b9;
         min-width: 36px;
@@ -84,11 +104,16 @@ export class DeesInputMultitoggle extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="label">MultiSelect</div>
+      ${this.label ? html`<div class="label">${this.label}</div>` : html``}
       <div class="mainbox">
         <div class="selections">
           <div class="indicator"></div>
-          ${this.options.map((option) => html` <div class="option" @click=${() => this.handleSelection(option)}>${option}</div> `)}
+          ${this.options.map(
+            (option) =>
+              html`<div class="option ${option === this.selectedOption ? 'selected': ''}" @click=${() => this.handleSelection(option)}>
+                ${option}
+              </div> `
+          )}
         </div>
       </div>
     `;
@@ -108,7 +133,9 @@ export class DeesInputMultitoggle extends DeesElement {
 
   public async setIndicator() {
     const indicator: HTMLDivElement = this.shadowRoot.querySelector('.indicator');
-    const option: HTMLDivElement = this.shadowRoot.querySelector(`.option:nth-child(${this.options.indexOf(this.selectedOption) + 2})`);
+    const option: HTMLDivElement = this.shadowRoot.querySelector(
+      `.option:nth-child(${this.options.indexOf(this.selectedOption) + 2})`
+    );
     if (indicator && option) {
       indicator.style.width = `${option.clientWidth - 8}px`;
       indicator.style.left = `${option.offsetLeft + 4}px`;

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

@@ -100,14 +100,14 @@ export class DeesInputText extends DeesElement {
 
       .label {
         font-size: 14px;
-        margin-bottom: 4px;
+        margin-bottom: 8px;
       }
 
       input {
-        margin-top: 5px;
+        margin-top: 0px;
         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-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #ffffff10')};
+        border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #222')};
         border-right: ${cssManager.bdTheme('1px solid #CCC', 'none')};
         border-left: ${cssManager.bdTheme('1px solid #CCC', 'none')};
         padding-left: 10px;

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

@@ -16,6 +16,14 @@ const { demoFunc } = await import('./dees-input-typelist.demo.js');
 export class DeesInputTypelist extends DeesElement {
   public static demo = demoFunc;
 
+
+  // INSTANCE
+
+  @property({
+    type: String,
+  })
+  public label: string;
+
   constructor() {
     super();
   }
@@ -24,11 +32,13 @@ export class DeesInputTypelist extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        color: ${cssManager.bdTheme('#333', '#fff')}
+        display: block;
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        margin: 8px 0px 24px 0px;
       }
       .label {
         font-size: 14px;
-        margin-bottom: 4px;
+        margin-bottom: 8px;
       }
       .mainbox {
         border-radius: 3px;
@@ -74,7 +84,7 @@ export class DeesInputTypelist extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="label">Type List</div>
+      <div class="label">${this.label}</div>
       <div class="mainbox">
         <div class="tags" @click=${() => {
           this.shadowRoot.querySelector('input').focus();

package/ts_web/elements/dees-mobilenavigation.ts

@@ -1,4 +1,4 @@
-import * as plugins from './plugins.js';
+import * as plugins from './00plugins.js';
 import {
   cssManager,
   css,

package/ts_web/elements/dees-modal.ts

@@ -1,4 +1,6 @@
-import * as plugins from './plugins.js';
+import * as colors from './00colors.js';
+import * as plugins from './00plugins.js';
+
 import { demoFunc } from './dees-modal.demo.js';
 import {
   customElement,
@@ -123,19 +125,35 @@ export class DeesModal extends DeesElement {
         padding: 16px;
       }
       .modal .bottomButtons {
-        display: grid;
+        display: flex;
+        flex-direction: row;
         border-top: 1px solid #222;
+        justify-content: flex-end;
       }
 
       .modal .bottomButtons .bottomButton {
-        height: 40px;
-        line-height: 40px;
+        margin: 8px 0px;
+        padding: 8px 12px;
+        border-radius: 4px;
+        line-height: 16px;
         text-align: center;
         font-size: 14px;
-        border-right: 1px solid #222;
+        cursor: default;
+        user-select: none;
+      }
+
+      .modal .bottomButtons .bottomButton:first-child {
+        margin-left: 8px;
       }
+      .modal .bottomButtons .bottomButton:last-child {
+        margin-right: 8px;
+      }
+
       .modal .bottomButtons .bottomButton:hover {
-        background: #222;
+        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+      }
+      .modal .bottomButtons .bottomButton:active {
+        background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
       }
       .modal .bottomButtons .bottomButton:last-child {
         border-right: none;

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

@@ -0,0 +1,11 @@
+import { html } from '@design.estate/dees-element';
+
+import { DeesProgressbar } from './dees-progressbar.js';
+
+export const demoFunc = () => {
+  return html`
+    <dees-progressbar
+      .percentage=${50}
+    ></dees-progressbar>
+  `;
+}