@design.estate/dees-catalog 9.6.0 → 9.7.0

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() },
+  ];
+};

package/ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.ts

@@ -166,9 +166,9 @@ export class DeesContextmenu extends DeesElement {
     return !!active && (active === this || !!this.shadowRoot?.contains(active) || !!this.submenu?.ownsFocus(active));
   }
 
-  constructor() {
-    super();
-    this.tabIndex = 0;
+  public connectedCallback(): Promise<void> {
+    if (!this.hasAttribute('tabindex')) this.tabIndex = 0;
+    return super.connectedCallback();
   }
 
   /**