fix(core): update

2024-01-10 05:11:55 +01:00
parent f3ca4a114a
commit 93ee42135c
15 changed files with 230 additions and 107 deletions
--- a/ts_web/elements/dees-button.ts
+++ b/ts_web/elements/dees-button.ts
@@ -93,15 +93,15 @@ export class DeesButton extends DeesElement {
      }

      .button:hover {
-        background: #039be5;
+        background: #0050b9;
        color: #ffffff;
-        border: 1px solid #039be5;
-        border-top: 1px solid #039be5;
+        border: 1px solid #0050b9;
+        border-top: 1px solid #0050b9;
      }

      .button:active {
-        background: #0277bd;
-        border-top: 1px solid #0277bd;
+        background: #0069f2;
+        border-top: 1px solid #0069f2;
      }

      .button.disabled {
@@ -145,8 +145,8 @@ export class DeesButton extends DeesElement {
      }

      .button.pending {
-        border: 1px dashed ${cssManager.bdTheme('#0277bd', '#0277bd70')};
-        background: ${cssManager.bdTheme('#0277bd', '#0277bd70')};
+        border: 1px dashed ${cssManager.bdTheme('#0069f2', '#0069f270')};
+        background: ${cssManager.bdTheme('#0069f2', '#0069f270')};
        color: #fff;
      }

--- a/ts_web/elements/dees-form.demo.ts
+++ b/ts_web/elements/dees-form.demo.ts
@@ -35,6 +35,7 @@ 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-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
--- a/ts_web/elements/dees-input-checkbox.ts
+++ b/ts_web/elements/dees-input-checkbox.ts
@@ -103,8 +103,8 @@ export class DeesInputCheckbox extends DeesElement {
        }

        .checkbox.selected {
-          background: #039BE5;
-          border: 1px solid #039BE5;
+          background: #0050b9;
+          border: 1px solid #0050b9;
        }

        .checkbox.disabled {
--- a/ts_web/elements/dees-input-dropdown.ts
+++ b/ts_web/elements/dees-input-dropdown.ts
@@ -128,17 +128,22 @@ export class DeesInputDropdown extends DeesElement {
        max-width: 420px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
        min-height: 40px;
-        border-radius: 3px;
+        border-radius: 8px;
        padding: 4px 8px;
-        transform: scale(0.98, 0.98);
        position: absolute;
        user-select: none;
      }
+      .selectionBox.top {
+        transform: translate(0px, 4px);
+      }
+      .selectionBox.bottom {
+        transform: translate(0px, -4px);
+      }

      .selectionBox.show {
        pointer-events: all;
+        transform: scale(1, 1) translate(0px, 0px);
        opacity: 1;
-        transform: scale(1, 1);
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
      }

@@ -151,7 +156,7 @@ export class DeesInputDropdown extends DeesElement {
      }

      .option.highlighted {
-        border-left: 2px solid #0277bd;
+        border-left: 2px solid #0069f2;
        padding-left: 6px;
        background: #ffffff20;
      }
@@ -159,29 +164,36 @@ export class DeesInputDropdown extends DeesElement {
      .option:hover {
        color: #fff;
        padding-left: 8px;
-        background: #0277bd;
+        background: #0069f2;
      }

-      .search {
-        padding: 8px;
+      .search.top {
+        padding-top: 4px;
+      }
+      .search.bottom {
+        padding-bottom: 4px;
      }
      .search input {
        display: block;
-        width: 80%;
        background: none;
        border: none;
        height: 24px;
        color: inherit;
-        text-align: center;
+        text-align: left;
        font-size: 12px;
        font-weight: 600;
-        background: ${cssManager.bdTheme('#00000010', '#ffffff08')};
-        border-radius: 16px;
+        width: 100%;
        margin: auto;
      }

+      .search.top input {
+        border-bottom: 1px dotted #333;
+      }
+      .search.bottom input {
+        border-top: 1px dotted #333;
+      }
+
      .search input:focus {
-        border: none;
        outline: none;
      }
    `,
@@ -194,7 +206,7 @@ export class DeesInputDropdown extends DeesElement {
        <div class="selectionBox">
          ${this.enableSearch && !this.opensToTop
            ? html`
-                <div class="search">
+                <div class="search top">
                  <input type="text" placeholder="Search" @input="${this.handleSearch}" />
                </div>
              `
@@ -214,7 +226,7 @@ export class DeesInputDropdown extends DeesElement {
          })}
          ${this.enableSearch && this.opensToTop
            ? html`
-                <div class="search">
+                <div class="search bottom">
                  <input type="text" placeholder="Search" @input="${this.handleSearch}" />
                </div>
              `
@@ -304,25 +316,27 @@ export class DeesInputDropdown extends DeesElement {
    } else {
      if (!selectionBox.classList.contains('show')) {
        selectionBox.style.width = selectedBox.clientWidth + 'px';
-        selectionBox.classList.add('show');
        const spaceData = selectedBox.getBoundingClientRect();
        if (300 > window.innerHeight - spaceData.bottom) {
          this.opensToTop = true;
          selectedBox.classList.add('accentTop');
+          selectionBox.classList.add('top');
          selectionBox.style.bottom = selectedBox.clientHeight + 2 + 'px';
        } else {
          selectedBox.classList.add('accentBottom');
+          selectionBox.classList.add('bottom');
          this.opensToTop = false;
          const labelOffset = this.label ? 24 : 0;
          selectionBox.style.top = selectedBox.clientHeight + labelOffset + 'px';
        }
        await domtoolsInstance.convenience.smartdelay.delayFor(0);
        const searchInput = selectionBox.querySelector('input');
-        searchInput.focus();
+        searchInput?.focus();
+        selectionBox.classList.add('show');
      } else {
        selectedBox.style.pointerEvents = 'none';
        selectionBox.classList.remove('show');
-        selectedBox.style.opacity = '0';
+        // selectedBox.style.opacity = '0';
      }
    }
  }
--- a/ts_web/elements/dees-input-multitoggle.demo.ts
+++ b/ts_web/elements/dees-input-multitoggle.demo.ts
@@ -0,0 +1,8 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <dees-input-multitoggle
+    .options=${['option 1', 'option 2', 'option 3']}
+    .selectedOption=${'option 2'}
+  ></dees-input-multitoggle>
+`;
--- a/ts_web/elements/dees-input-multitoggle.ts
+++ b/ts_web/elements/dees-input-multitoggle.ts
@@ -0,0 +1,115 @@
+import {
+  customElement,
+  DeesElement,
+  type TemplateResult,
+  state,
+  html,
+  domtools,
+  property,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+
+const { demoFunc } = await import('./dees-input-multitoggle.demo.js');
+
+@customElement('dees-input-multitoggle')
+export class DeesInputMultitoggle extends DeesElement {
+  public static demo = demoFunc;
+
+  @property()
+  type: 'boolean' | 'multi' | 'single' = 'multi';
+
+  @property()
+  booleanTrueName: string = 'true';
+
+  @property()
+  booleanFalseName: string = 'false';
+
+  @property({
+    type: Array,
+  })
+  options: string[] = [];
+
+  @property()
+  selectedOption: string = '';
+
+  @property()
+  boolValue: boolean = false;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        user-select: none;
+      }
+      .selections {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        background: #333;
+        width: min-content;
+        border-radius: 20px;
+        height: 40px;
+      }
+
+      .option {
+        position: relative;
+        padding: 0px 16px;
+        line-height: 40px;
+        cursor: pointer;
+        width: min-content; /* Make the width as per the content */
+        white-space: nowrap; /* Prevent text wrapping */
+      }
+
+      .indicator {
+        opacity: 0;
+        position: absolute;
+        height: 32px;
+        left: 4px;
+        top: 4px;
+        border-radius: 16px;
+        background: #0050b9;
+        min-width: 36px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="label">MultiSelect</div>
+      <div class="mainbox">
+        <div class="selections">
+          <div class="indicator"></div>
+          ${this.options.map((option) => html` <div class="option" @click=${() => this.handleSelection(option)}>${option}</div> `)}
+        </div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated() {
+    if (this.type === 'boolean') {
+      this.options = [this.booleanTrueName || 'true', this.booleanFalseName];
+    }
+    this.setIndicator();
+  }
+
+  public async handleSelection(optionArg: string) {
+    this.selectedOption = optionArg;
+    this.setIndicator();
+  }
+
+  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})`);
+    if (indicator && option) {
+      indicator.style.width = `${option.clientWidth - 8}px`;
+      indicator.style.left = `${option.offsetLeft + 4}px`;
+      indicator.style.opacity = '1';
+    }
+    setTimeout(() => {
+      indicator.style.transition = 'all 0.1s';
+    }, 100);
+  }
+}
--- a/ts_web/elements/dees-input-radio.ts
+++ b/ts_web/elements/dees-input-radio.ts
@@ -90,8 +90,8 @@ export class DeesInputRadio extends DeesElement {
        }

        .checkbox.selected {
-          background: #039BE5;
-          border: 1px solid #039BE5;
+          background: #0050b9;
+          border: 1px solid #0050b9;
        }

        .maincontainer:hover .checkbox.selected {
--- a/ts_web/elements/dees-input-multiselect.demo.ts
+++ b/ts_web/elements/dees-input-multiselect.demo.ts
--- a/ts_web/elements/dees-input-multiselect.ts
+++ b/ts_web/elements/dees-input-multiselect.ts
@@ -10,10 +10,10 @@ import {
  cssManager,
 } from '@design.estate/dees-element';

-const { demoFunc } = await import('./dees-input-multiselect.demo.js');
+const { demoFunc } = await import('./dees-input-typelist.demo.js');

-@customElement('dees-input-multiselect')
-export class DeesInputMultiselect extends DeesElement {
+@customElement('dees-input-typelist')
+export class DeesInputTypelist extends DeesElement {
  public static demo = demoFunc;

  constructor() {
--- a/ts_web/elements/dees-simple-login.ts
+++ b/ts_web/elements/dees-simple-login.ts
@@ -48,7 +48,7 @@ export class DeesSimpleLogin extends DeesElement {
        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;
+        border-radius: 8px;
        padding: 24px;
        transition: opacity 0.3s, transform 0.3s;
      }
--- a/ts_web/elements/dees-stepper.ts
+++ b/ts_web/elements/dees-stepper.ts
@@ -99,7 +99,7 @@ export class DeesStepper extends DeesElement {
        transition: all 0.7s ease-in-out;
        max-width: 500px;
        min-height: 300px;
-        border-radius: 3px;
+        border-radius: 8px;
        background: ${cssManager.bdTheme('#ffffff', '#181818')};
        border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#181818')};
        color: ${cssManager.bdTheme('#333', '#fff')};
@@ -127,6 +127,7 @@ export class DeesStepper extends DeesElement {
      }

      .step .stepCounter {
+        color: #999;
        position: absolute;
        top: 0px;
        right: 0px;
@@ -137,6 +138,8 @@ export class DeesStepper extends DeesElement {
      }

      .step .goBack {
+        color: #999;
+        cursor: default;
        position: absolute;
        top: 0px;
        left: 0px;
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@@ -12,13 +12,14 @@ export * from './dees-input-checkbox.js';
 export * from './dees-input-dropdown.js';
 export * from './dees-input-fileupload.js';
 export * from './dees-input-iban.js';
-export * from './dees-input-multiselect.js';
+export * from './dees-input-typelist.js';
 export * from './dees-input-phone.js';
 export * from './dees-input-quantityselector.js';
 export * from './dees-input-radio.js';
 export * from './dees-input-text.js';
 export * from './dees-mobilenavigation.js';
 export * from './dees-modal.js';
+export * from './dees-input-multitoggle.js';
 export * from './dees-pdf.js';
 export * from './dees-simple-appdash.js';
 export * from './dees-simple-login.js';