@design.estate/dees-catalog 9.6.2 → 9.8.0

package/ts_web/elements/00group-input/dees-input-datepicker/datepicker-popup.ts

@@ -14,6 +14,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 import { DeesWindowLayer } from '../../00group-overlay/dees-windowlayer/dees-windowlayer.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 import type { IDateEvent } from './types.js';
+import { createCalendarDate, dateValidationMessage } from './date-validation.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -534,29 +535,32 @@ export class DeesInputDatepickerPopup extends DeesElement {
             const totalEventCount = dayEvents.reduce((sum, event) => sum + (event.count || 1), 0);
 
             return html`
-              <div
+              <button type="button"
                 class="day ${isOtherMonth ? 'other-month' : ''} ${isToday ? 'today' : ''} ${isSelected ? 'selected' : ''} ${isDayDisabled ? 'disabled' : ''} ${hasEvents ? 'has-event' : ''}"
+                ?disabled=${isDayDisabled}
+                aria-label=${`${String(day.getFullYear()).padStart(4, '0')}-${String(day.getMonth() + 1).padStart(2, '0')}-${String(day.getDate()).padStart(2, '0')}`}
+                aria-pressed=${isSelected ? 'true' : 'false'}
                 @click=${() => !isDayDisabled && this.handleSelectDate(day)}
               >
                 ${day.getDate()}
                 ${hasEvents ? html`
                   ${totalEventCount > 3 ? html`
-                    <div class="event-count">${totalEventCount}</div>
+                    <span class="event-count">${totalEventCount}</span>
                   ` : html`
-                    <div class="event-indicator">
+                    <span class="event-indicator">
                       ${dayEvents.slice(0, 3).map(event => html`
-                        <div class="event-dot ${event.type || 'info'}"></div>
+                        <span class="event-dot ${event.type || 'info'}"></span>
                       `)}
-                    </div>
+                    </span>
                   `}
                   ${dayEvents[0].title ? html`
-                    <div class="event-tooltip">
+                    <span class="event-tooltip">
                       ${dayEvents[0].title}
                       ${totalEventCount > 1 ? html` (+${totalEventCount - 1} more)` : ''}
-                    </div>
+                    </span>
                   ` : ''}
                 ` : ''}
-              </div>
+              </button>
             `;
           })}
         </div>
@@ -601,8 +605,8 @@ export class DeesInputDatepickerPopup extends DeesElement {
         ` : ''}
 
         <div class="calendar-actions">
-          <button class="action-button today-button" @click=${this.handleSelectToday}>Today</button>
-          <button class="action-button clear-action-button" @click=${this.handleClear}>Clear</button>
+          <button type="button" class="action-button today-button" ?disabled=${this.isDayDisabled(new Date())} @click=${this.handleSelectToday}>Today</button>
+          <button type="button" class="action-button clear-action-button" @click=${this.handleClear}>Clear</button>
         </div>
       </div>
     `;
@@ -624,22 +628,19 @@ export class DeesInputDatepickerPopup extends DeesElement {
 
   // Calendar logic
   private getDaysInMonth(): Date[] {
-    const year = this.viewDate.getFullYear();
-    const month = this.viewDate.getMonth();
-    const firstDay = new Date(year, month, 1);
-    const lastDay = new Date(year, month + 1, 0);
-    const days: Date[] = [];
+    const firstDay = new Date(this.viewDate);
+    firstDay.setDate(1);
+    firstDay.setHours(12, 0, 0, 0);
 
     const startOffset = this.weekStartsOn === 1
       ? (firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1)
       : firstDay.getDay();
 
-    for (let i = startOffset; i > 0; i--) days.push(new Date(year, month, 1 - i));
-    for (let i = 1; i <= lastDay.getDate(); i++) days.push(new Date(year, month, i));
-    const remaining = 42 - days.length;
-    for (let i = 1; i <= remaining; i++) days.push(new Date(year, month + 1, i));
-
-    return days;
+    return Array.from({ length: 42 }, (_, index) => {
+      const day = new Date(firstDay);
+      day.setDate(1 - startOffset + index);
+      return day;
+    });
   }
 
   private isToday(date: Date): boolean {
@@ -653,15 +654,7 @@ export class DeesInputDatepickerPopup extends DeesElement {
   }
 
   private isDayDisabled(date: Date): boolean {
-    if (this.minDate) { const min = new Date(this.minDate); if (date < min) return true; }
-    if (this.maxDate) { const max = new Date(this.maxDate); if (date > max) return true; }
-    if (this.disabledDates?.length) {
-      return this.disabledDates.some(ds => {
-        try { const d = new Date(ds); return date.getDate() === d.getDate() && date.getMonth() === d.getMonth() && date.getFullYear() === d.getFullYear(); }
-        catch { return false; }
-      });
-    }
-    return false;
+    return Boolean(dateValidationMessage(date, this));
   }
 
   private getEventsForDate(date: Date): IDateEvent[] {
@@ -671,16 +664,24 @@ export class DeesInputDatepickerPopup extends DeesElement {
   }
 
   private previousMonth(): void {
-    this.viewDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth() - 1, 1);
+    const date = new Date(this.viewDate);
+    date.setMonth(date.getMonth() - 1, 1);
+    this.viewDate = date;
   }
 
   private nextMonth(): void {
-    this.viewDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth() + 1, 1);
+    const date = new Date(this.viewDate);
+    date.setMonth(date.getMonth() + 1, 1);
+    this.viewDate = date;
   }
 
   // Event dispatching
   private handleSelectDate(day: Date): void {
-    this.selectedDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), this.selectedHour, this.selectedMinute);
+    if (this.isDayDisabled(day)) return;
+    const selected = createCalendarDate(day.getFullYear(), day.getMonth() + 1, day.getDate(),
+      this.enableTime ? this.selectedHour : undefined, this.enableTime ? this.selectedMinute : 0);
+    if (!selected || this.isDayDisabled(selected)) return;
+    this.selectedDate = selected;
     this.dispatchEvent(new CustomEvent('date-selected', { detail: this.selectedDate }));
     if (!this.enableTime) {
       this.dispatchEvent(new CustomEvent('close-request'));
@@ -689,14 +690,11 @@ export class DeesInputDatepickerPopup extends DeesElement {
 
   private handleSelectToday(): void {
     const today = new Date();
-    this.selectedDate = today;
+    if (this.isDayDisabled(today)) return;
     this.viewDate = new Date(today);
     this.selectedHour = today.getHours();
     this.selectedMinute = today.getMinutes();
-    this.dispatchEvent(new CustomEvent('date-selected', { detail: this.selectedDate }));
-    if (!this.enableTime) {
-      this.dispatchEvent(new CustomEvent('close-request'));
-    }
+    this.handleSelectDate(today);
   }
 
   private handleClear(): void {
@@ -722,7 +720,7 @@ export class DeesInputDatepickerPopup extends DeesElement {
     const input = e.target as HTMLInputElement;
     let value = parseInt(input.value) || 0;
     value = Math.max(0, Math.min(59, value));
-    if (this.minuteIncrement > 1) value = Math.round(value / this.minuteIncrement) * this.minuteIncrement;
+    if (this.minuteIncrement > 1) value = Math.min(59, Math.round(value / this.minuteIncrement) * this.minuteIncrement);
     this.selectedMinute = value;
     this.emitTimeUpdate();
   };
@@ -740,7 +738,9 @@ export class DeesInputDatepickerPopup extends DeesElement {
 
   private emitTimeUpdate(): void {
     if (this.selectedDate) {
-      this.selectedDate = new Date(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate(), this.selectedHour, this.selectedMinute);
+      const selected = createCalendarDate(this.selectedDate.getFullYear(), this.selectedDate.getMonth() + 1, this.selectedDate.getDate(), this.selectedHour, this.selectedMinute);
+      if (!selected || this.isDayDisabled(selected)) return;
+      this.selectedDate = selected;
       this.dispatchEvent(new CustomEvent('date-selected', { detail: this.selectedDate }));
     }
   }

package/ts_web/elements/00group-input/dees-input-datepicker/styles.ts

@@ -38,6 +38,11 @@ export const datepickerStyles = [
         color: var(--dees-color-text-muted);
       }
 
+      .date-input[aria-invalid="true"] { border-color: var(--dees-color-accent-error); }
+      .field-messages { grid-column: 1 / -1; }
+      .validationText { color: var(--dees-color-text-error); font-size: var(--dees-font-footnote-size); }
+      .validationText:not(:empty) { margin-top: var(--dees-spacing-xs); }
+
       .date-input:hover:not(:disabled) {
         border-color: var(--dees-color-border-strong);
       }

package/ts_web/elements/00group-input/dees-input-datepicker/template.ts

@@ -11,18 +11,21 @@ export const renderDatepicker = (component: DeesInputDatepicker): TemplateResult
               aria-label=${component.label}
               aria-haspopup="dialog"
               aria-expanded=${component.isOpened ? 'true' : 'false'}
+              aria-invalid=${component.validationText ? 'true' : 'false'}
+              aria-describedby="date-description date-validation"
               class="date-input field-control ${component.isOpened ? 'open' : ''}"
-              .value=${component.formatDate(component.value)}
+              .value=${component.draftText ?? component.formatDate(component.value)}
               .placeholder=${component.placeholder}
               ?disabled=${component.disabled}
+              ?required=${component.required}
               @click=${component.toggleCalendar}
               @keydown=${component.handleKeydown}
               @input=${component.handleManualInput}
               @blur=${component.handleInputBlur}
-              style="padding-right: ${component.value ? 'calc(var(--dees-input-action-size) + 40px)' : '40px'}"
+              style="padding-right: ${component.value || component.draftText ? 'calc(var(--dees-input-action-size) + 40px)' : '40px'}"
             />
             <div class="icon-container">
-              ${component.value && !component.disabled ? html`
+              ${(component.value || component.draftText) && !component.disabled ? html`
                 <button type="button" class="clear-button input-action" @click=${component.clearValue} aria-label="Clear date">
                   <dees-icon icon="lucide:x" iconSize="14"></dees-icon>
                 </button>
@@ -30,7 +33,10 @@ export const renderDatepicker = (component: DeesInputDatepicker): TemplateResult
               <dees-icon class="calendar-icon" icon="lucide:calendar" iconSize="16"></dees-icon>
             </div>
           </div>
-          ${component.renderDescription()}
+          <div class="field-messages">
+            <div id="date-description">${component.renderDescription()}</div>
+            <div id="date-validation" class="validationText" role="status">${component.validationText}</div>
+          </div>
         </div>
       `;
 

package/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts

@@ -1,5 +1,6 @@
 import * as colors from '../../00colors.js';
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
+import { textInputContextMenuItems } from '../text-input-contextmenu.js';
 import { demoFunc } from './dees-input-text.demo.js';
 
 import {
@@ -408,58 +409,10 @@ export class DeesInputText extends DeesInputBase {
   }
 
   public getContextMenuItems() {
-    const input = this.shadowRoot!.querySelector('input')!;
-    const hasSelection = input.selectionStart !== input.selectionEnd;
-    return [
-      {
-        name: 'Cut',
-        iconName: 'lucide:Scissors',
-        shortcut: 'Cmd+X',
-        disabled: !hasSelection,
-        action: async () => {
-          const selected = this.value.substring(input.selectionStart!, input.selectionEnd!);
-          await navigator.clipboard.writeText(selected);
-          const start = input.selectionStart!;
-          this.value = this.value.substring(0, start) + this.value.substring(input.selectionEnd!);
-          input.value = this.value;
-          input.setSelectionRange(start, start);
-          this.changeSubject.next(this);
-        },
-      },
-      {
-        name: 'Copy',
-        iconName: 'lucide:Copy',
-        shortcut: 'Cmd+C',
-        disabled: !hasSelection,
-        action: async () => {
-          const selected = this.value.substring(input.selectionStart!, input.selectionEnd!);
-          await navigator.clipboard.writeText(selected);
-        },
-      },
-      {
-        name: 'Paste',
-        iconName: 'lucide:ClipboardPaste',
-        shortcut: 'Cmd+V',
-        action: async () => {
-          const text = await navigator.clipboard.readText();
-          const start = input.selectionStart!;
-          const end = input.selectionEnd!;
-          this.value = this.value.substring(0, start) + text + this.value.substring(end);
-          input.value = this.value;
-          input.setSelectionRange(start + text.length, start + text.length);
-          this.changeSubject.next(this);
-        },
-      },
-      { divider: true },
-      {
-        name: 'Select All',
-        iconName: 'lucide:TextCursorInput',
-        shortcut: 'Cmd+A',
-        action: async () => {
-          input.select();
-        },
-      },
-    ];
+    return textInputContextMenuItems({
+      input: this.shadowRoot!.querySelector('input')!, disabled: this.disabled,
+      commit: value => { this.value = value; this.changeSubject.next(this); },
+    });
   }
 
   public getValue(): string {

package/ts_web/elements/00group-input/dees-input-textarea/dees-input-textarea.demo.ts

@@ -0,0 +1,2 @@
+import { focusedInputDemo } from '../../../demos/inputs.js';
+export const demoFunc = () => focusedInputDemo('textarea');

package/ts_web/elements/00group-input/dees-input-textarea/dees-input-textarea.ts

@@ -0,0 +1,128 @@
+import { customElement, property, html, css, type TemplateResult } from '@design.estate/dees-element';
+import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
+import { textInputContextMenuItems } from '../text-input-contextmenu.js';
+import { demoFunc } from './dees-input-textarea.demo.js';
+import '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
+
+declare global { interface HTMLElementTagNameMap { 'dees-input-textarea': DeesInputTextarea; } }
+
+@customElement('dees-input-textarea')
+export class DeesInputTextarea extends DeesInputBase<DeesInputTextarea> {
+  public static demo = demoFunc;
+  public static demoGroups = ['Input'];
+  public static inputLayout = 'compound' as const;
+
+  @property({ type: String }) accessor value = '';
+  @property({ type: String }) accessor placeholder = '';
+  @property({ type: Number }) accessor rows = 3;
+  @property({ type: Number }) accessor maxLength = -1;
+  @property({ type: String, reflect: true }) accessor validationState: 'valid' | 'warn' | 'invalid' | undefined;
+  @property({ type: String }) accessor validationText = '';
+  @property({ attribute: false }) accessor validationFunction: ((value: string) => { valid: boolean; message?: string }) | undefined;
+  private touched = false;
+  private lastValidity: boolean | undefined;
+
+  public static styles = [...DeesInputBase.baseStyles, css`
+    textarea { display: block; width: 100%; height: auto; padding: 10px 12px; resize: vertical; text-align: left; }
+    .field-messages { grid-column: 1 / -1; }
+    .validationText { font-size: var(--dees-font-footnote-size); line-height: var(--dees-font-footnote-line); color: var(--dees-color-text-error); }
+    .validationText:not(:empty) { margin-top: var(--dees-spacing-xs); }
+    :host([validationstate="invalid"]) textarea { border-color: var(--dees-color-accent-error); }
+    :host([validationstate="warn"]) .validationText { color: var(--dees-color-text-warning); }
+    :host([validationstate="valid"]) .validationText { color: var(--dees-color-text-success); }
+  `];
+
+  public render(): TemplateResult {
+    return html`<div class="input-wrapper">
+      <dees-label .label=${this.label} .infoText=${this.infoText} .required=${this.required} @click=${() => this.focus()}></dees-label>
+      <div class="input-container">
+        <textarea class="field-control" .value=${this.value} .rows=${Math.max(1, this.rows)}
+          placeholder=${this.placeholder} ?disabled=${this.disabled} ?required=${this.required}
+          aria-label=${this.label ?? ''} aria-invalid=${this.validationState === 'invalid' ? 'true' : 'false'}
+          aria-describedby="field-description field-validation"
+          @input=${this.handleInput} @blur=${() => this.validate()}></textarea>
+      </div>
+      <div class="field-messages">
+        <div id="field-description">${this.renderDescription()}</div>
+        <div id="field-validation" class="validationText" role="status">${this.validationText}</div>
+      </div>
+    </div>`;
+  }
+
+  public willUpdate(changed: Map<PropertyKey, unknown>): void {
+    super.willUpdate(changed);
+    if (changed.has('value') && this.value == null) this.value = '';
+  }
+
+  public updated(changed: Map<string, unknown>): void {
+    super.updated(changed);
+    const input = this.shadowRoot?.querySelector('textarea');
+    if (this.maxLength >= 0) input?.setAttribute('maxlength', String(this.maxLength));
+    else input?.removeAttribute('maxlength');
+    if (['value', 'required', 'maxLength', 'validationFunction', 'disabled'].some(key => changed.has(key))) {
+      this.validate(this.touched || Boolean(this.value));
+    } else if (changed.has('validationState') || changed.has('validationText')) {
+      this.syncValidity();
+    }
+  }
+
+  private ruleMessage(): string {
+    if (this.disabled) return '';
+    if (this.required && !this.value.length) return 'Enter a value.';
+    if (this.maxLength >= 0 && this.value.length > this.maxLength) return `Use ${this.maxLength} characters or fewer.`;
+    const result = this.validationFunction?.(this.value);
+    return result && !result.valid ? result.message || 'Check this value.' : '';
+  }
+
+  private syncValidity(): void {
+    const message = this.disabled ? '' : this.ruleMessage() || (this.validationState === 'invalid' ? this.validationText || 'Check this value.' : '');
+    this.shadowRoot?.querySelector('textarea')?.setCustomValidity(message);
+    const valid = !message;
+    if (valid !== this.lastValidity) {
+      this.lastValidity = valid;
+      this.dispatchEvent(new CustomEvent('validation-change', { detail: { valid, message }, bubbles: true, composed: true }));
+    }
+  }
+
+  public validate(showMessage = true): boolean {
+    if (showMessage) this.touched = true;
+    const message = this.ruleMessage();
+    this.validationText = showMessage ? message : '';
+    this.validationState = showMessage ? message ? 'invalid' : 'valid' : undefined;
+    this.syncValidity();
+    return !message;
+  }
+
+  public checkValidity(): boolean {
+    return this.disabled || (!this.ruleMessage() && this.validationState !== 'invalid');
+  }
+
+  public reportValidity(): boolean {
+    // Preserve a host-supplied validation message until the value changes.
+    const valid = this.validationState === 'invalid' ? this.checkValidity() : this.validate();
+    if (!valid) this.focus();
+    return valid;
+  }
+
+  private handleInput = (): void => {
+    if (this.disabled) return;
+    this.value = this.shadowRoot!.querySelector('textarea')!.value;
+    this.validate();
+    this.changeSubject.next(this);
+  };
+
+  public getContextMenuItems() {
+    return textInputContextMenuItems({ input: this.shadowRoot!.querySelector('textarea')!, disabled: this.disabled,
+      commit: value => { this.value = value; this.validate(); this.changeSubject.next(this); } });
+  }
+
+  public getValue(): string { return this.value; }
+  public setValue(value: string | null): void {
+    this.value = value ?? '';
+    this.touched = false;
+    this.validate(false);
+  }
+  public reset(): void { this.setValue(''); }
+  public focus(options?: FocusOptions): void { this.shadowRoot?.querySelector('textarea')?.focus(options); }
+  public blur(): void { this.shadowRoot?.querySelector('textarea')?.blur(); }
+}

package/ts_web/elements/00group-input/dees-input-textarea/index.ts

@@ -0,0 +1 @@
+export * from './dees-input-textarea.js';

package/ts_web/elements/00group-input/index.ts

@@ -15,6 +15,7 @@ export * from './dees-input-richtext/index.js';
 export * from './dees-input-searchselect/index.js';
 export * from './dees-input-tags/index.js';
 export * from './dees-input-text/index.js';
+export * from './dees-input-textarea/index.js';
 export * from './dees-input-toggle/index.js';
 export * from './dees-input-typelist/index.js';
 export * from './dees-input-wysiwyg.js';

package/ts_web/elements/00group-input/text-input-contextmenu.ts

@@ -0,0 +1,31 @@
+interface ITextInputContext {
+  input: HTMLInputElement | HTMLTextAreaElement;
+  disabled: boolean;
+  commit: (value: string) => void;
+}
+
+/** Shared plain-text editing commands for single- and multiline fields. */
+export const textInputContextMenuItems = ({ input, disabled, commit }: ITextInputContext) => {
+  const selectedText = () => input.value.substring(input.selectionStart ?? 0, input.selectionEnd ?? 0);
+  const replaceSelection = (text: string) => {
+    if (disabled || input.disabled) return;
+    input.setRangeText(text, input.selectionStart ?? 0, input.selectionEnd ?? 0, 'end');
+    commit(input.value);
+  };
+  return [
+    { name: 'Cut', iconName: 'lucide:Scissors', shortcut: 'Cmd+X', disabled: disabled || !selectedText(), action: async () => {
+      if (disabled || input.disabled) return;
+      await navigator.clipboard.writeText(selectedText());
+      replaceSelection('');
+    } },
+    { name: 'Copy', iconName: 'lucide:Copy', shortcut: 'Cmd+C', disabled: !selectedText(), action: async () => {
+      await navigator.clipboard.writeText(selectedText());
+    } },
+    { name: 'Paste', iconName: 'lucide:ClipboardPaste', shortcut: 'Cmd+V', disabled, action: async () => {
+      if (disabled || input.disabled) return;
+      replaceSelection(await navigator.clipboard.readText());
+    } },
+    { divider: true as const },
+    { name: 'Select All', iconName: 'lucide:TextCursorInput', shortcut: 'Cmd+A', action: () => input.select() },
+  ];
+};