+
`;
}
@@ -221,7 +195,8 @@ export class DeesInputFileupload extends DeesElement {
this.changeSubject.next(this);
}
- public firstUpdated() {
+ public firstUpdated(_changedProperties: Map
+
+
+
${this.value.map(
(fileArg) => html`
+ {
@@ -205,6 +178,7 @@ export class DeesInputFileupload extends DeesElement {
${this.buttonText}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ this.validateIban(eventArg);
+ }}
+ >
+
`;
}
- public async firstUpdated() {
- const deesInputText = this.shadowRoot.querySelector('dees-input-text');
- deesInputText.disabled = this.disabled;
- deesInputText.required = this.required;
- deesInputText.changeSubject.subscribe(valueArg => {
- this.value = valueArg.value;
- this.changeSubject.next(this);
- })
+ public firstUpdated(_changedProperties: Map
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- ) {
+ super.firstUpdated(_changedProperties);
+ // Update boolean options if they changed
if (this.type === 'boolean') {
this.options = [this.booleanTrueName || 'true', this.booleanFalseName || 'false'];
}
- this.setIndicator();
+ // Wait for the next frame to ensure DOM is fully rendered
+ await this.updateComplete;
+ requestAnimationFrame(() => {
+ this.setIndicator();
+ });
}
public async handleSelection(optionArg: string) {
@@ -142,18 +169,57 @@ export class DeesInputMultitoggle extends DeesElement {
this.setIndicator();
}
+ private indicatorInitialized = false;
+
public async setIndicator() {
const indicator: HTMLDivElement = this.shadowRoot.querySelector('.indicator');
+ const selectedIndex = this.options.indexOf(this.selectedOption);
+
+ // If no valid selection, hide indicator
+ if (selectedIndex === -1 || !indicator) {
+ if (indicator) {
+ indicator.style.opacity = '0';
+ }
+ return;
+ }
+
const option: HTMLDivElement = this.shadowRoot.querySelector(
- `.option:nth-child(${this.options.indexOf(this.selectedOption) + 2})`
+ `.option:nth-child(${selectedIndex + 2})`
);
+
if (indicator && option) {
+ // Only disable transition for the very first positioning
+ if (!this.indicatorInitialized) {
+ indicator.classList.add('no-transition');
+ this.indicatorInitialized = true;
+
+ // Remove the no-transition class after a brief delay
+ setTimeout(() => {
+ indicator.classList.remove('no-transition');
+ }, 50);
+ }
+
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);
+ }
+
+ public getValue(): string | boolean {
+ if (this.type === 'boolean') {
+ return this.selectedOption === this.booleanTrueName;
+ }
+ return this.selectedOption;
+ }
+
+ public setValue(value: string | boolean): void {
+ if (this.type === 'boolean' && typeof value === 'boolean') {
+ this.selectedOption = value ? (this.booleanTrueName || 'true') : (this.booleanFalseName || 'false');
+ } else {
+ this.selectedOption = value as string;
+ }
+ if (this.hasUpdated) {
+ this.setIndicator();
+ }
}
}
diff --git a/ts_web/elements/dees-input-phone.demo.ts b/ts_web/elements/dees-input-phone.demo.ts
index 64f5002..3b5cb35 100644
--- a/ts_web/elements/dees-input-phone.demo.ts
+++ b/ts_web/elements/dees-input-phone.demo.ts
@@ -1,3 +1,80 @@
-import { html } from '@design.estate/dees-element';
+import { html, css } from '@design.estate/dees-element';
-export const demoFunc = () => html`
+
+
+
+`;
\ No newline at end of file
diff --git a/ts_web/elements/dees-input-phone.ts b/ts_web/elements/dees-input-phone.ts
index 1153042..3c62c57 100644
--- a/ts_web/elements/dees-input-phone.ts
+++ b/ts_web/elements/dees-input-phone.ts
@@ -1,14 +1,14 @@
import {
customElement,
- DeesElement,
type TemplateResult,
property,
+ state,
html,
css,
- unsafeCSS,
cssManager,
- type CSSResult,
} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+import { DeesInputBase } from './dees-input-base.js';
import { demoFunc } from './dees-input-phone.demo.js';
declare global {
@@ -18,12 +18,116 @@ declare global {
}
@customElement('dees-input-phone')
-export class DeesInputPhone extends DeesElement {
+export class DeesInputPhone extends DeesInputBase {
// STATIC
public static demo = demoFunc;
// INSTANCE
- public render() {
- return html`) {
+ super.firstUpdated(_changedProperties);
+ // Initialize formatted phone from value
+ if (this.value) {
+ this.formattedPhone = this.formatPhoneNumber(this.value);
+ }
+
+ // Subscribe to the inner input's changes
+ const innerInput = this.shadowRoot.querySelector('dees-input-text') as any;
+ if (innerInput && innerInput.changeSubject) {
+ innerInput.changeSubject.subscribe(() => {
+ this.changeSubject.next(this);
+ });
+ }
+ }
+
+ private handlePhoneInput(event: InputEvent) {
+ const input = event.target as HTMLInputElement;
+ const cleanedValue = this.cleanPhoneNumber(input.value);
+ const formatted = this.formatPhoneNumber(cleanedValue);
+
+ // Update the input with formatted value
+ if (input.value !== formatted) {
+ const cursorPosition = input.selectionStart || 0;
+ input.value = formatted;
+
+ // Try to maintain cursor position intelligently
+ const newCursorPos = this.calculateCursorPosition(cleanedValue, formatted, cursorPosition);
+ input.setSelectionRange(newCursorPos, newCursorPos);
+ }
+
+ this.formattedPhone = formatted;
+ this.value = cleanedValue;
+ this.changeSubject.next(this);
+ }
+
+ private cleanPhoneNumber(value: string): string {
+ // Remove all non-numeric characters
+ return value.replace(/\D/g, '');
+ }
+
+ private formatPhoneNumber(value: string): string {
+ // Basic US phone number formatting
+ // This can be enhanced to support international formats
+ const cleaned = this.cleanPhoneNumber(value);
+
+ if (cleaned.length === 0) return '';
+ if (cleaned.length <= 3) return cleaned;
+ if (cleaned.length <= 6) return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3)}`;
+ if (cleaned.length <= 10) return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`;
+
+ // For numbers longer than 10 digits, format as international
+ return `+${cleaned.slice(0, cleaned.length - 10)} (${cleaned.slice(-10, -7)}) ${cleaned.slice(-7, -4)}-${cleaned.slice(-4)}`;
+ }
+
+ private calculateCursorPosition(cleaned: string, formatted: string, oldPos: number): number {
+ // Simple cursor position calculation
+ // Count how many formatting characters are before the cursor
+ let formattingChars = 0;
+ for (let i = 0; i < oldPos && i < formatted.length; i++) {
+ if (!/\d/.test(formatted[i])) {
+ formattingChars++;
+ }
+ }
+ return Math.min(oldPos + formattingChars, formatted.length);
+ }
+
+ public getValue(): string {
+ return this.value;
+ }
+
+ public setValue(value: string): void {
+ this.value = value;
+ this.formattedPhone = this.formatPhoneNumber(value);
}
}
\ No newline at end of file
diff --git a/ts_web/elements/dees-input-quantityselector.demo.ts b/ts_web/elements/dees-input-quantityselector.demo.ts
new file mode 100644
index 0000000..c8d7c12
--- /dev/null
+++ b/ts_web/elements/dees-input-quantityselector.demo.ts
@@ -0,0 +1,127 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+
+
+
+
+`;
\ No newline at end of file
diff --git a/ts_web/elements/dees-input-quantityselector.ts b/ts_web/elements/dees-input-quantityselector.ts
index 0801552..474b511 100644
--- a/ts_web/elements/dees-input-quantityselector.ts
+++ b/ts_web/elements/dees-input-quantityselector.ts
@@ -1,5 +1,7 @@
-import { customElement, property, html, type TemplateResult, DeesElement, type CSSResult, } from '@design.estate/dees-element';
+import { customElement, property, html, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
+import { DeesInputBase } from './dees-input-base.js';
+import { demoFunc } from './dees-input-quantityselector.demo.js';
declare global {
interface HTMLElementTagNameMap {
@@ -8,67 +10,50 @@ declare global {
}
@customElement('dees-input-quantityselector')
-export class DeesInputQuantitySelector extends DeesElement {
- public static demo = () => html` {
+ public static demo = demoFunc;
// INSTANCE
- public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
-
- @property()
- public label: string = 'Label';
-
- @property({
- type: String,
- reflect: true,
- })
- public key: string;
@property({
type: Number
})
public value: number = 1;
- @property({
- type: Boolean,
- })
- public required: boolean = false;
- @property({
- type: Boolean
- })
- public disabled: boolean = false;
- constructor() {
- super();
- }
-
- public render(): TemplateResult {
- return html`
- ${domtools.elementBasic.styles}
-
+ `,
+ ];
-
+
`;
}
- public async firstUpdated() {
+ public async connectedCallback() {
+ await super.connectedCallback();
+ // Initialize boolean options early
+ if (this.type === 'boolean' && this.options.length === 0) {
+ this.options = [this.booleanTrueName || 'true', this.booleanFalseName || 'false'];
+ }
+ }
+
+ public async firstUpdated(_changedProperties: Map
+
+
${this.options.map(
(option) =>
@@ -125,16 +137,31 @@ export class DeesInputMultitoggle extends DeesElement {
${option}
`
)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Phone Input
`;
+ @state()
+ protected formattedPhone: string = '';
+
+ @property({ type: String })
+ public value: string = '';
+
+ @property({ type: String })
+ public placeholder: string = '+1 (555) 123-4567';
+
+ public static styles = [
+ ...DeesInputBase.baseStyles,
+ cssManager.defaultStyles,
+ css`
+ /* Phone input specific styles can go here */
+ `,
+ ];
+
+ public render(): TemplateResult {
+ return html`
+
+ this.handlePhoneInput(event)}
+ >
+
+ `;
+ }
+
+ public firstUpdated(_changedProperties: Map
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Premium Headphones
+ $199.99
+
+
+
+ Wireless Mouse
+ $49.99
+
+
+ USB-C Cable
+ $19.99
+
- {
+ // Implement radio group behavior
+ const radioGroups = new Map();
+
+ // Group radios by their container
+ const radioContainers = elementArg.querySelectorAll('.radio-group');
+ radioContainers.forEach((container) => {
+ const radios = Array.from(container.querySelectorAll('dees-input-radio')) as DeesInputRadio[];
+ const groupName = container.getAttribute('data-group') || 'default';
+ radioGroups.set(groupName, radios);
+
+ // Add click handlers for radio group behavior
+ radios.forEach((radio) => {
+ radio.addEventListener('click', () => {
+ if (!radio.disabled && !radio.value) {
+ // Uncheck all other radios in the group
+ radios.forEach((r) => {
+ if (r !== radio) {
+ r.value = false;
+ }
+ });
+ radio.value = true;
+ }
+ });
+ });
+ });
+ }}>
+
+
+
+`;
\ No newline at end of file
diff --git a/ts_web/elements/dees-input-radio.ts b/ts_web/elements/dees-input-radio.ts
index c41689b..910c4b8 100644
--- a/ts_web/elements/dees-input-radio.ts
+++ b/ts_web/elements/dees-input-radio.ts
@@ -1,6 +1,6 @@
import {customElement, type TemplateResult, property, html, css, cssManager} from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
import { DeesInputBase } from './dees-input-base.js';
+import { demoFunc } from './dees-input-radio.demo.js';
declare global {
interface HTMLElementTagNameMap {
@@ -10,7 +10,7 @@ declare global {
@customElement('dees-input-radio')
export class DeesInputRadio extends DeesInputBase {
- public static demo = () => html`
+
+
+
+`;
\ No newline at end of file
diff --git a/ts_web/elements/dees-input-text.ts b/ts_web/elements/dees-input-text.ts
index 25a277d..4d2b49c 100644
--- a/ts_web/elements/dees-input-text.ts
+++ b/ts_web/elements/dees-input-text.ts
@@ -1,5 +1,6 @@
import * as colors from './00colors.js';
import { DeesInputBase } from './dees-input-base.js';
+import { demoFunc } from './dees-input-text.demo.js';
import {
customElement,
@@ -18,10 +19,7 @@ declare global {
@customElement('dees-input-text')
export class DeesInputText extends DeesInputBase {
- public static demo = () => html`
-
+
+
+
`;
\ No newline at end of file
diff --git a/ts_web/elements/dees-input-typelist.ts b/ts_web/elements/dees-input-typelist.ts
index b08a1f5..13a2ae5 100644
--- a/ts_web/elements/dees-input-typelist.ts
+++ b/ts_web/elements/dees-input-typelist.ts
@@ -1,44 +1,37 @@
import {
customElement,
- DeesElement,
type TemplateResult,
state,
html,
- domtools,
property,
css,
cssManager,
} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+import { DeesInputBase } from './dees-input-base.js';
const { demoFunc } = await import('./dees-input-typelist.demo.js');
@customElement('dees-input-typelist')
-export class DeesInputTypelist extends DeesElement {
+export class DeesInputTypelist extends DeesInputBase {
public static demo = demoFunc;
// INSTANCE
- @property({
- type: String,
- })
- public label: string;
+ @property({ type: Array })
+ public value: string[] = [];
+
+ @state()
+ private inputValue: string = '';
- constructor() {
- super();
- }
public static styles = [
+ ...DeesInputBase.baseStyles,
cssManager.defaultStyles,
css`
:host {
- display: block;
color: ${cssManager.bdTheme('#333', '#fff')};
- margin: 8px 0px 24px 0px;
- }
- .label {
- font-size: 14px;
- margin-bottom: 8px;
}
.mainbox {
border-radius: 3px;
@@ -79,20 +72,89 @@ export class DeesInputTypelist extends DeesElement {
input:focus {
height: 32px;
}
+
+ .tag {
+ display: inline-block;
+ background: ${cssManager.bdTheme('#e0e0e0', '#444')};
+ color: ${cssManager.bdTheme('#333', '#fff')};
+ padding: 4px 8px;
+ border-radius: 3px;
+ margin: 2px;
+ font-size: 12px;
+ }
+
+ .tag .remove {
+ margin-left: 6px;
+ cursor: pointer;
+ opacity: 0.6;
+ }
+
+ .tag .remove:hover {
+ opacity: 1;
+ }
`,
];
public render(): TemplateResult {
return html`
-
-
+ public render(): TemplateResult {
+ return html`
+
+
`;
}
- public increase () {
- this.value++;
- this.changeSubject.next(this);
+ public increase() {
+ if (!this.disabled) {
+ this.value++;
+ this.changeSubject.next(this);
+ }
}
- public decrease () {
- if (this.value > 0) {
+ public decrease() {
+ if (!this.disabled && this.value > 0) {
this.value--;
- } else {
- // nothing to do here
+ this.changeSubject.next(this);
}
- this.changeSubject.next(this);
+ }
+
+ public getValue(): number {
+ return this.value;
+ }
+
+ public setValue(value: number): void {
+ this.value = value;
}
}
diff --git a/ts_web/elements/dees-input-radio.demo.ts b/ts_web/elements/dees-input-radio.demo.ts
new file mode 100644
index 0000000..c9aa2f7
--- /dev/null
+++ b/ts_web/elements/dees-input-radio.demo.ts
@@ -0,0 +1,277 @@
+import { html, css } from '@design.estate/dees-element';
+import '@design.estate/dees-wcctools/demotools';
+import type { DeesInputRadio } from './dees-input-radio.js';
+
+export const demoFunc = () => html`
+
+
-
${this.value}
- +
+ +
+
+
+
+
+
+ Basic Radio Groups
+Radio buttons for single-choice selections
+ +
+
+
+ Select your subscription plan:
+
+
+ Task Priority:
+
+
+
+ Horizontal Layout
+Radio buttons arranged horizontally for yes/no questions
+ +
+
+
+ Do you agree?
+
+
+ Experience Level:
+
+
+
+ Survey Example
+Multiple radio groups in a survey format
+ +
+
+
+
+
+ How satisfied are you?
+
+
+ Would you recommend us?
+
+
+
+ States
+Different radio button states
+ +
+
+
+
+ Settings Example
+Common radio button patterns in settings
+ +
+
+
+ Theme Preference:
+
+
+ Notification Frequency:
+
+
+
+
+
+ Basic Text Inputs
+Standard text inputs with labels and descriptions
+ +
+
+
+ Horizontal Layout
+Multiple inputs arranged horizontally for compact forms
+ +
+
+
+
+
+ Label Positions
+Different label positioning options for various layouts
+ +
+
+
+
+
+ Validation & States
+Different validation states and input configurations
+ +
+
+ Advanced Features
+Password visibility toggle and other advanced features
+ +
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Tip: Type a value and press Enter to add it to the list. Click on any item to remove it.
+
+ ${this.label}
-
-
+
+
+
+
+ Display Preferences
+
+
+
+
+ Quick display settings using horizontal layout:
+
+
+ Update Notifications
`;
diff --git a/ts_web/elements/index.ts b/ts_web/elements/index.ts
index 5d9026b..7a37d75 100644
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@@ -39,6 +39,7 @@ export * from './dees-label.js';
export * from './dees-mobilenavigation.js';
export * from './dees-modal.js';
export * from './dees-input-multitoggle.js';
+export * from './dees-panel.js';
export * from './dees-pdf.js';
export * from './dees-searchbar.js';
export * from './dees-simple-appdash.js';
Notification Settings
+
+
+ Email Frequency:
+