@design.estate/dees-catalog 1.0.241 → 1.0.243

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.241",
+  "version": "1.0.243",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

package/ts_web/00_commitinfo_data.ts

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

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

@@ -2,7 +2,13 @@ import { html } from '@design.estate/dees-element';
 
 export const demoFunc = () => html`
   <dees-input-multitoggle
-    .options=${['option 1', 'option 2', 'option 3']}
+    .options=${['option 1', 'option 2', 'a longer option with multiple words']}
     .selectedOption=${'option 2'}
   ></dees-input-multitoggle>
+  <dees-input-multitoggle
+    .type=${'boolean'}
+    .booleanTrueName=${'enabled'}
+    .booleanFalseName=${'disabled'}
+    .selectedOption=${'true'}
+  ></dees-input-multitoggle>
 `;

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

@@ -55,12 +55,18 @@ export class DeesInputMultitoggle extends DeesElement {
       }
 
       .option {
+        color: #CCC;
         position: relative;
         padding: 0px 16px;
         line-height: 40px;
-        cursor: pointer;
+        cursor: default;
         width: min-content; /* Make the width as per the content */
         white-space: nowrap; /* Prevent text wrapping */
+        transition: all 0.1s;
+      }
+
+      .option:hover {
+        color: #fff;
       }
 
       .indicator {
@@ -90,7 +96,7 @@ export class DeesInputMultitoggle extends DeesElement {
 
   public async firstUpdated() {
     if (this.type === 'boolean') {
-      this.options = [this.booleanTrueName || 'true', this.booleanFalseName];
+      this.options = [this.booleanTrueName || 'true', this.booleanFalseName || 'false'];
     }
     this.setIndicator();
   }

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

@@ -1,5 +1,15 @@
 import { html } from '@design.estate/dees-element';
 
 export const demoFunc = () => html`
-  <dees-input-multiselect></dees-input-multiselect>
+  <style>
+    .demoContainer {
+      max-width: 600px;
+      margin: auto;
+      padding: 40px;
+      background: #000;
+    }
+  </style>
+  <div class="demoContainer">
+    <dees-input-typelist></dees-input-typelist>
+  </div>
 `;

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

@@ -40,29 +40,48 @@ export class DeesInputTypelist extends DeesElement {
         border-left: ${cssManager.bdTheme('1px solid #CCC', 'none')};
       }
 
-      .selections {
-        padding: 8px;
+      .tags {
+        padding: 16px;
+        cursor: default;
+      }
+
+      .notags {
+        text-align: center;
+        opacity: 0.5;
+        font-size: 12px;
       }
 
       input {
+        display: block;
+        box-sizing: border-box;
         background: #181818;
         width: 100%;
         outline: none;
         border: none;
         color: inherit;
-        padding: 8px;
+        padding: 0px 16px;
+        overflow: hidden;
+        line-height: 32px;
+        height: 0px;
+        transition: height 0.2s;
+      }
+
+      input:focus {
+        height: 32px;
       }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      <div class="label">MultiSelect</div>
+      <div class="label">Type List</div>
       <div class="mainbox">
-        <div class="selections">
-          Nothing selected...
+        <div class="tags" @click=${() => {
+          this.shadowRoot.querySelector('input').focus();
+        }}>
+          <div class="notags">No tags yet</div>
         </div>
-        <input type="text" placeholder="Type to select" />
+        <input type="text" placeholder="Type, press Enter to add it..." />
       </div>
     `;
   }

package/ts_web/elements/dees-pdf.ts

@@ -57,18 +57,9 @@ export class DeesPdf extends DeesElement {
     if (!DeesPdf.pdfJsReady) {
       const pdfJsReadyDeferred = domtools.plugins.smartpromise.defer();
       DeesPdf.pdfJsReady = pdfJsReadyDeferred.promise;
-      const loadDeferred = domtools.plugins.smartpromise.defer();
-      const script = document.createElement('script');
-      script.addEventListener('load', () => {
-        console.log('pdf.js loaded!');
-        loadDeferred.resolve();
-      });
-      script.src = 'https:////mozilla.github.io/pdf.js/build/pdf.js';
-      document.getElementsByTagName('head')[0].appendChild(script);
-      // The workerSrc property shall be specified.
-      await loadDeferred.promise;
-      DeesPdf.pdfjsLib = window['pdfjs-dist/build/pdf'];
-      DeesPdf.pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
+      // @ts-ignore
+      DeesPdf.pdfjsLib = await import('https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.379/+esm');
+      DeesPdf.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.379/build/pdf.worker.mjs';
       pdfJsReadyDeferred.resolve();
     }
     await DeesPdf.pdfJsReady;

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

@@ -0,0 +1,7 @@
+import { html } from '@design.estate/dees-element';
+
+import { DeesUpdater } from './dees-updater.js';
+
+export const demoFunc = () => {
+  
+}

package/ts_web/elements/dees-updater.ts

@@ -1,7 +1,5 @@
-import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, } from '@design.estate/dees-element';
-
-import * as domtools from '@design.estate/dees-domtools';
-
+import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, domtools } from '@design.estate/dees-element';
+import { demoFunc } from './dees-updater.demo.js';
 
 import './dees-windowlayer';
 import { css, cssManager } from '@design.estate/dees-element';
@@ -14,7 +12,11 @@ declare global {
 
 @customElement('dees-updater')
 export class DeesUpdater extends DeesElement {
-  public static demo = () => html`<dees-updater></dees-updater>`;
+  public static demo = demoFunc;
+
+  public static async createAndShow() {
+    
+  }
 
   @property({
     type: String,
@@ -38,9 +40,8 @@ export class DeesUpdater extends DeesElement {
           will-change: transform;
           position: relative;
           background: ${cssManager.bdTheme('#eeeeeb', '#222')};
-          margin: auto;
           max-width: 800px;
-          border-radius: 3px;
+          border-radius: 8px;
           border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
         }
 
@@ -68,7 +69,9 @@ export class DeesUpdater extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <dees-windowlayer @clicked="${this.windowLayerClicked}">
+      <dees-windowlayer @clicked="${this.windowLayerClicked}" .options=${{
+        blur: true,
+      }}>
         <div class="modalContainer">
           <div class="headingContainer">
             <dees-spinner .size=${60}></dees-spinner>
@@ -84,7 +87,6 @@ export class DeesUpdater extends DeesElement {
   }
 
   private windowLayerClicked() {
-    const windowLayer = this.shadowRoot.querySelector('dees-windowlayer');
-    windowLayer.toggleVisibility();
+    
   }
 }