`
@@ -214,7 +226,7 @@ export class DeesInputDropdown extends DeesElement {
})}
${this.enableSearch && this.opensToTop
? html`
-
+
`
@@ -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';
}
}
}
diff --git a/ts_web/elements/dees-input-multitoggle.demo.ts b/ts_web/elements/dees-input-multitoggle.demo.ts
new file mode 100644
index 0000000..8382887
--- /dev/null
+++ b/ts_web/elements/dees-input-multitoggle.demo.ts
@@ -0,0 +1,8 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+
+`;
\ No newline at end of file
diff --git a/ts_web/elements/dees-input-multitoggle.ts b/ts_web/elements/dees-input-multitoggle.ts
new file mode 100644
index 0000000..db9c92a
--- /dev/null
+++ 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`
+
MultiSelect
+
+
+
+ ${this.options.map((option) => html`
this.handleSelection(option)}>${option}
`)}
+
+
+ `;
+ }
+
+ 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);
+ }
+}
diff --git a/ts_web/elements/dees-input-radio.ts b/ts_web/elements/dees-input-radio.ts
index c52b7fc..a7f8b74 100644
--- 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 {
diff --git a/ts_web/elements/dees-input-multiselect.demo.ts b/ts_web/elements/dees-input-typelist.demo.ts
similarity index 100%
rename from ts_web/elements/dees-input-multiselect.demo.ts
rename to ts_web/elements/dees-input-typelist.demo.ts
diff --git a/ts_web/elements/dees-input-multiselect.ts b/ts_web/elements/dees-input-typelist.ts
similarity index 89%
rename from ts_web/elements/dees-input-multiselect.ts
rename to ts_web/elements/dees-input-typelist.ts
index b8a2678..b551eb3 100644
--- a/ts_web/elements/dees-input-multiselect.ts
+++ b/ts_web/elements/dees-input-typelist.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() {
diff --git a/ts_web/elements/dees-simple-login.ts b/ts_web/elements/dees-simple-login.ts
index 02ce5aa..b5f629a 100644
--- 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;
}
diff --git a/ts_web/elements/dees-stepper.ts b/ts_web/elements/dees-stepper.ts
index c4c7c17..3d27076 100644
--- 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;
diff --git a/ts_web/elements/index.ts b/ts_web/elements/index.ts
index 4989755..af1ad0f 100644
--- 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';