@design.estate/dees-catalog 1.0.243 → 1.0.246

package/ts_web/elements/dees-progressbar.ts

@@ -0,0 +1,95 @@
+import * as plugins from './00plugins.js';
+import * as colors from './00colors.js';
+import { demoFunc } from './dees-progressbar.demo.js';
+import {
+  customElement,
+  html,
+  DeesElement,
+  property,
+  type TemplateResult,
+  cssManager,
+  css,
+  type CSSResult,
+  unsafeCSS,
+  unsafeHTML,
+  state,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+
+@customElement('dees-progressbar')
+export class DeesProgressbar extends DeesElement {
+  // STATIC
+  public static demo = demoFunc;
+
+  // INSTANCE
+  @property({
+    type: Number,
+  })
+  public percentage = 0;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        color: ${cssManager.bdTheme(colors.bright.text, colors.dark.text)};
+      }
+      .progressBarContainer {
+        padding: 8px;
+        min-width: 200px;
+      }
+
+      .progressBar {
+        background: ${cssManager.bdTheme('#eeeeeb', '#444')};
+        height: 8px;
+        width: 100%;
+        border-radius: 4px;
+        border-top: 0.5px solid ${cssManager.bdTheme('none', '#555')};
+      }
+
+      .progressBarFill {
+        background: ${cssManager.bdTheme(colors.dark.blueActive, colors.bright.blueActive)};
+        height: 8px;
+        margin-top: -0.5px;
+        transition: 0.2s width;
+        border-radius: 4px;
+        width: 0px;
+        border-top: 0.5 solid ${cssManager.bdTheme('none', '#398fff')};
+      }
+
+      .progressText {
+        padding: 8px;
+        text-align: center;
+      }
+    `
+  ];
+
+  public render() {
+    return html`
+      <div class="progressBarContainer">
+        <div class="progressBar">
+          <div class="progressBarFill"></div>
+          <div class="progressText">
+            ${this.percentage}%
+          <div>
+        </div>
+      </div>
+    `
+  }
+
+  firstUpdated (_changedProperties: Map<string | number | symbol, unknown>): void {
+    super.firstUpdated(_changedProperties);
+    this.updateComplete.then(() => {
+      this.updatePercentage();
+    });
+  }
+
+  public async updatePercentage() {
+    const progressBarFill = this.shadowRoot.querySelector('.progressBarFill') as HTMLElement;
+    progressBarFill.style.width = `${this.percentage}%`;
+  }
+
+  updated(){
+    this.updatePercentage();
+  }
+}

package/ts_web/elements/dees-stepper.ts

@@ -1,3 +1,6 @@
+import * as plugins from './00plugins.js';
+import * as colors from './00colors.js';
+
 import {
   DeesElement,
   customElement,
@@ -150,7 +153,22 @@ export class DeesStepper extends DeesElement {
       }
 
       .step .goBack:hover {
-        background: ${cssManager.bdTheme('#00000012', '#ffffff12')};
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        background: ${cssManager.bdTheme('#00000012', colors.dark.blue)};
+      }
+
+      .step .goBack:active {
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        background: ${cssManager.bdTheme('#00000012', colors.dark.blueActive)};
+      }
+
+      .step .goBack span {
+        transition: all 0.2s;
+        display: inline-block;
+      }
+
+      .step .goBack:hover span {
+        transform: translateX(-2px);
       }
 
       .step .title {
@@ -180,7 +198,7 @@ export class DeesStepper extends DeesElement {
                 : ''}"
             >
               ${this.getIndexOfStep(stepArg) > 0
-                ? html`<div class="goBack" @click=${this.goBack}><- go to previous step</div>`
+                ? html`<div class="goBack" @click=${this.goBack}><span style="font-family: Inter"><-</span> go to previous step</div>`
                 : ``}
               <div class="stepCounter">
                 Step ${this.steps.findIndex((elementArg) => elementArg === stepArg) + 1} of

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

@@ -1,5 +1,5 @@
 import { type ITableAction } from './dees-table.js';
-import * as plugins from './plugins.js';
+import * as plugins from './00plugins.js';
 import { html } from '@design.estate/dees-element';
 
 interface ITableDemoData {

package/ts_web/elements/dees-table.ts

@@ -1,4 +1,5 @@
-import * as plugins from './plugins.js';
+import * as colors from './00colors.js';
+import * as plugins from './00plugins.js';
 import { demoFunc } from './dees-table.demo.js';
 import {
   customElement,
@@ -173,6 +174,7 @@ export class DeesTable<T> extends DeesElement {
         border-top: 1px solid ${cssManager.bdTheme('#fff', '#444')};
         box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
         overflow-x: auto;
+        cursor: default;
       }
 
       .header {
@@ -311,6 +313,7 @@ export class DeesTable<T> extends DeesElement {
         line-height: 36px;
         height: 36px;
         display: inline-block;
+        border-radius: 8px;
       }
 
       .action:first-child {
@@ -319,7 +322,15 @@ export class DeesTable<T> extends DeesElement {
       }
 
       .action:hover {
-        background: ${cssManager.bdTheme('#CCC', '#00000030')};
+        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+      }
+
+      .action:active {
+        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blueActive)};
+      }
+
+      .action:hover dees-icon {
+        filter: ${cssManager.bdTheme('invert(1) brightness(3)', '')};
       }
 
       .footer {
@@ -344,16 +355,22 @@ export class DeesTable<T> extends DeesElement {
       .footerActions .footerAction {
         padding: 8px 16px;
         display: flex;
+        user-select: none;
       }
 
       .footerActions .footerAction:hover {
-        background: ${cssManager.bdTheme('#CCC', '#111')};
+        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+        color: #fff;
       }
 
-      .footerActions dees-icon {
+      .footerActions .footerAction dees-icon {
         display: flex;
         margin-right: 8px;
       }
+
+      .footerActions .footerAction:hover dees-icon {
+        
+      }
     `,
   ];
 

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

@@ -2,6 +2,9 @@ import { html } from '@design.estate/dees-element';
 
 import { DeesUpdater } from './dees-updater.js';
 
-export const demoFunc = () => {
-  
+export const demoFunc = async () => {
+  const updater = await DeesUpdater.createAndShow();
+  setTimeout(async () => {
+    await updater.destroy();
+  }, 10000);
 }

package/ts_web/elements/dees-updater.ts

@@ -1,4 +1,12 @@
-import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, domtools } from '@design.estate/dees-element';
+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';
@@ -15,7 +23,9 @@ export class DeesUpdater extends DeesElement {
   public static demo = demoFunc;
 
   public static async createAndShow() {
-    
+    const updater = new DeesUpdater();
+    document.body.appendChild(updater);
+    return updater;
   }
 
   @property({
@@ -37,56 +47,64 @@ export class DeesUpdater extends DeesElement {
     cssManager.defaultStyles,
     css`
       .modalContainer {
-          will-change: transform;
-          position: relative;
-          background: ${cssManager.bdTheme('#eeeeeb', '#222')};
-          max-width: 800px;
-          border-radius: 8px;
-          border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
-        }
+        will-change: transform;
+        position: relative;
+        background: ${cssManager.bdTheme('#eeeeeb', '#222')};
+        max-width: 800px;
+        border-radius: 8px;
+        border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
+      }
 
-        .headingContainer {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          padding: 40px 40px;
-        }
+      .headingContainer {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 40px 40px;
+      }
 
-        h1 {
-          margin: none;
-          font-size: 20px;
-          color: ${cssManager.bdTheme('#333', '#fff')};
-          margin-left: 20px;
-          font-weight: normal;
-        }
+      h1 {
+        margin: none;
+        font-size: 20px;
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        margin-left: 20px;
+        font-weight: normal;
+      }
 
-        .buttonContainer {
-          display: grid;
-          grid-template-columns: 50% 50%;
-        }
-    `
-  ]
+      .buttonContainer {
+        display: grid;
+        grid-template-columns: 50% 50%;
+      }
+    `,
+  ];
 
   public render(): TemplateResult {
     return html`
-      <dees-windowlayer @clicked="${this.windowLayerClicked}" .options=${{
-        blur: true,
-      }}>
+      <dees-windowlayer
+        @clicked="${this.windowLayerClicked}"
+        .options=${{
+          blur: true,
+        }}
+      >
         <div class="modalContainer">
           <div class="headingContainer">
             <dees-spinner .size=${60}></dees-spinner>
             <h1>Updating the application...</h1>
           </div>
+          <div class="progress">
+            <dees-progressbar .progress=${0.5}></dees-progressbar>
+          </div>
           <div class="buttonContainer">
             <dees-button>More info</dees-button>
             <dees-button>Changelog</dees-button>
           </div>
-        </div>
-      </dees-windowlayer>>
+        </div> </dees-windowlayer
+      >>
     `;
   }
 
-  private windowLayerClicked() {
-    
+  public async destroy() {
+    this.parentElement.removeChild(this);
   }
+
+  private windowLayerClicked() {}
 }

package/ts_web/elements/index.ts

@@ -14,6 +14,7 @@ export * from './dees-input-fileupload.js';
 export * from './dees-input-iban.js';
 export * from './dees-input-typelist.js';
 export * from './dees-input-phone.js';
+export * from './dees-progressbar.js';
 export * from './dees-input-quantityselector.js';
 export * from './dees-input-radio.js';
 export * from './dees-input-text.js';