@descope/web-components-ui 0.0.1

package/src/components/descope-date-field/DateFieldClass.js

@@ -0,0 +1,702 @@
+import { createBaseInputClass } from '../../baseClasses/createBaseInputClass';
+import {
+  createStyleMixin,
+  draggableMixin,
+  componentNameValidationMixin,
+  portalMixin,
+} from '../../mixins';
+import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
+import { compose } from '../../helpers';
+import {
+  newDate,
+  isValidTimestamp,
+  formatTimestamp,
+  isSupportedKey,
+  isNumber,
+  getKeyMap,
+  getCurrentTime,
+  overrideConstructedStylesheet,
+} from './helpers';
+import { formats } from './formats';
+import { calendarIcon } from './icons';
+import { counterConfig, DEFAULT_FORMAT, DIVIDER, NATIVE_FORMAT } from './consts';
+import { DateCounter } from './DateCounterClass';
+import { TextFieldClass } from '../descope-text-field/TextFieldClass';
+
+export const componentName = getComponentName('date-field');
+
+// we set baseSelector to `vaadin-popover` as a temporary hack, so our portalMixin will
+// be able to process this component's overlay. The whole process needs refactoring as soon as possible.
+const BASE_SELECTOR = 'vaadin-popover';
+const BaseInputClass = createBaseInputClass({ componentName, baseSelector: BASE_SELECTOR });
+
+const dateFieldAttrs = ['format', 'opened', 'initial-value', 'readonly'];
+const calendarAttrs = ['years-range', 'calendar-months', 'calendar-weekdays'];
+const observedAttrs = [...dateFieldAttrs, ...calendarAttrs];
+
+class RawDateFieldClass extends BaseInputClass {
+  timestamp = '';
+
+  format = DEFAULT_FORMAT;
+
+  selectedCounterIdx = 0;
+
+  dateCounters = [
+    new DateCounter(counterConfig.MONTH),
+    new DateCounter(counterConfig.DAY),
+    new DateCounter(counterConfig.YEAR),
+  ];
+
+  static get observedAttributes() {
+    return [].concat(BaseInputClass.observedAttributes || [], observedAttrs);
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <style>
+      :host {
+        display: inline-block;
+        box-sizing: border-box;
+        user-select: none;
+        max-width: 100%;
+      }
+
+      :host ::slotted {
+        padding: 0;
+      }
+
+      .toggle-calendar {
+        cursor: pointer;
+        display: flex;
+        align-self: center;
+        z-index: 1;
+        height: 100%;
+        align-items: center;        
+      }
+
+      :host([readonly="true"]) .toggle-calendar {
+        pointer-events: none;
+      }
+    </style>
+    <div>
+      <descope-text-field>
+        <span slot="suffix" class="toggle-calendar">
+          <descope-icon>${calendarIcon}</descope-icon>
+        </span>
+      </descope-text-field>
+      <vaadin-popover></vaadin-popover>
+    </div>
+    `;
+
+    this.inputElement = this.shadowRoot.querySelector('descope-text-field');
+    this.popoverToggleButton = this.inputElement.querySelector('.toggle-calendar');
+
+    this.oninvalid = () => {
+      this.inputElement.setAttribute('invalid', 'true');
+      this.inputElement.focus();
+    };
+  }
+
+  get opened() {
+    return this.getAttribute('opened') === 'true';
+  }
+
+  // returns the input's value as a timestamp
+  get inputValueTimestamp() {
+    const date = formats[this.format].getDate(this.inputElement.value);
+
+    if (!isValidTimestamp(date?.getTime())) {
+      return null;
+    }
+
+    return date.getTime();
+  }
+
+  get sortedCounters() {
+    return this.format
+      .split(DIVIDER)
+      .map((placeholder) => this.dateCounters.find((dc) => dc.placeholder === placeholder));
+  }
+
+  get activeCounter() {
+    return this.sortedCounters[this.selectedCounterIdx];
+  }
+
+  get countersValue() {
+    return this.sortedCounters.map((dc) => dc.stringValue).join(DIVIDER);
+  }
+
+  get overlay() {
+    return this.baseElement.shadowRoot?.querySelector('vaadin-popover-overlay');
+  }
+
+  get backdrop() {
+    return this.overlay.shadowRoot?.querySelector('#backdrop');
+  }
+
+  get calendar() {
+    return this.overlay?.querySelector('descope-calendar');
+  }
+
+  get isRTL() {
+    const computedStyleDirection = getComputedStyle(this.baseElement).getPropertyValue('direction');
+
+    if (computedStyleDirection) {
+      return computedStyleDirection === 'rtl';
+    }
+
+    // Fallback: If for some reason computed style was not calculated in time, fallback to check on attribute
+    return this.getAttribute('st-host-direction') === 'rtl';
+  }
+
+  get value() {
+    return this.timestamp;
+  }
+
+  set value(val) {
+    if (!val) return;
+
+    const numVal = Number(val);
+    const isValTimestamp = !Number.isNaN(numVal);
+
+    let date;
+    let timestamp;
+
+    if (isValTimestamp) {
+      date = newDate(numVal);
+      timestamp = numVal;
+    } else {
+      date = newDate(val);
+      timestamp = date.getTime();
+    }
+
+    if (!isValidTimestamp(timestamp) || timestamp === this.timestamp) {
+      return;
+    }
+
+    this.timestamp = timestamp;
+
+    this.updateInputDisplay();
+    this.updateDateCounters(date);
+
+    // since baseElement is set to vaadin-popover, we need to manually dispatch an input event to trigger getValidity
+    this.dispatchEvent(new Event('input'));
+  }
+
+  updateInputDisplay() {
+    this.inputElement.value = formatTimestamp(newDate(this.value).getTime(), this.format);
+  }
+
+  init() {
+    super.init?.();
+
+    this.updateFormatPattern();
+    this.initPopover();
+    this.initInputElement();
+
+    setTimeout(() => {
+      this.#overrideOverlaySettings();
+    }, 0);
+  }
+
+  initInputElement() {
+    this.popoverToggleButton.addEventListener('click', this.onPopoverToggle.bind(this));
+
+    this.inputElement.addEventListener('focus', this.onFocus.bind(this));
+    this.inputElement.addEventListener('blur', this.onBlur.bind(this));
+    this.inputElement.addEventListener('input', this.onInput.bind(this));
+    this.inputElement.addEventListener('click', this.handleMouseCaretPositionChange.bind(this));
+    this.inputElement.addEventListener('keydown', this.handleKeyDownValueChange.bind(this));
+    this.inputElement.addEventListener('keydown', this.handleKeydownCaretPositionChange.bind(this));
+    this.inputElement.addEventListener('keydown', this.handleValueChange.bind(this));
+
+    forwardAttrs(this, this.inputElement, {
+      includeAttrs: [
+        'label',
+        'label-type',
+        'placeholder',
+        'disabled',
+        'readonly',
+        'bordered',
+        'required',
+        'full-width',
+        'st-host-direction',
+        'pattern',
+        'invalid',
+        'bordered',
+      ],
+    });
+  }
+
+  initPopover() {
+    this.baseElement.trigger = ['click'];
+    this.baseElement.withBackdrop = true;
+    this.baseElement.renderer = this.#popoverRenderer.bind(this);
+
+    // block popover events from focusing/blurring the text-field
+    this.baseElement.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    });
+  }
+
+  #popoverPosStylesheet;
+
+  #popoverRenderer(root) {
+    // popoverRenderer should run only once, when the popover is first rendering.
+    if (!root.firstChild) {
+      this.overlay.positionTarget = this.shadowRoot.querySelector('.toggle-calendar');
+
+      root.appendChild(this.#getPopoverContent());
+
+      // override vaadin's constructed stylesheet which hides the host element
+      overrideConstructedStylesheet(this.baseElement);
+
+      this.backdrop.addEventListener('click', this.closePopover.bind(this));
+    }
+
+    // Hide overlay before adjusting position to prevent flickering
+    root.style.setProperty('visibility', 'hidden');
+
+    // Wait until overlay is ready
+    setTimeout(() => {
+      this.#adjustPopoverPosition(root);
+
+      // Show adjusted overlay
+      root.style.setProperty('visibility', 'visible');
+      this.updateCalendarView(root);
+    }, 100);
+  }
+
+  #adjustPopoverPosition() {
+    const popover = this.shadowRoot.querySelector('vaadin-popover').shadowRoot;
+
+    // Remove previously added stylesheets
+    this.#popoverPosStylesheet?.remove();
+
+    const windowRect = document.body.getBoundingClientRect();
+    const inputRect = this.getBoundingClientRect();
+    const calendarRect = this.calendar.getBoundingClientRect();
+
+    const side = this.isRTL ? 'right' : 'left';
+    const offset = inputRect[side] - calendarRect[side];
+    const availableLeft = calendarRect.left;
+    const availableRight = windowRect.width - calendarRect.right;
+
+    let newOffset;
+    if (offset > 0) {
+      newOffset = Math.min(offset, availableRight);
+    } else {
+      newOffset = Math.min(Math.abs(offset), availableLeft) * -1;
+    }
+
+    this.#popoverPosStylesheet = document.createElement('style');
+    this.#popoverPosStylesheet.innerHTML = `
+      vaadin-popover-overlay::part(overlay) {
+        transform: translateX(${newOffset}px);
+      }
+    `;
+
+    popover.appendChild(this.#popoverPosStylesheet);
+  }
+
+  #getPopoverContent() {
+    const ele = document.createElement('span');
+
+    ele.innerHTML = `<descope-calendar></descope-calendar>`;
+
+    const calendar = ele.querySelector('descope-calendar');
+
+    calendar.addEventListener('date-submit', this.onCalendarSubmit.bind(this));
+    calendar.addEventListener('cancel', this.closePopover.bind(this));
+
+    return ele;
+  }
+
+  // the default vaadin behavior is to attach the overlay to the body when opened
+  // we do not want that because it's difficult to style the overlay in this way
+  // so we override it to open inside the shadow DOM
+  #overrideOverlaySettings() {
+    this.overlay._attachOverlay = () => this.overlay.bringToFront();
+    this.overlay._detachOverlay = () => {};
+    this.overlay._enterModalState = () => {};
+  }
+
+  onPopoverToggle() {
+    this.opened ? this.closePopover() : this.openPopover();
+  }
+
+  openPopover() {
+    this.setAttribute('opened', 'true');
+  }
+
+  closePopover() {
+    this.removeAttribute('opened');
+    this.inputElement.focus();
+  }
+
+  getCounterById(id) {
+    return this.dateCounters.find((dc) => dc.id === id);
+  }
+
+  onCalendarSubmit() {
+    if (!this.isReadOnly) {
+      if (!this.calendar.value) return;
+
+      const calendarDate = newDate(this.calendar.value);
+
+      this.value = calendarDate.getTime();
+
+      this.getCounterById('year').replaceValue(calendarDate.getFullYear());
+      this.getCounterById('month').replaceValue(calendarDate.getMonth() + 1);
+      this.getCounterById('day').replaceValue(calendarDate.getDate());
+
+      this.dispatchEvent(new Event('input'));
+    }
+
+    this.closePopover();
+  }
+
+  updateCalendarView() {
+    const validInputVal =
+      isValidTimestamp(newDate(this.inputElement.value || '').getTime()) &&
+      formats[this.format].validate(this.inputElement.value);
+
+    if (this.inputValueTimestamp || validInputVal) {
+      this.calendar.setAttribute(
+        'initial-value',
+        formatTimestamp(this.inputValueTimestamp || this.timestamp, NATIVE_FORMAT)
+      );
+    } else {
+      this.calendar.clearValue();
+      this.calendar.setAttribute('preview', formatTimestamp(getCurrentTime(), NATIVE_FORMAT));
+    }
+
+    forwardAttrs(this, this.calendar, {
+      includeAttrs: [
+        'st-host-direction',
+        'readonly',
+        'initial-month',
+        'initial-year',
+        'years-range',
+        'calendar-label-submit',
+        'calendar-label-cancel',
+        'calendar-months',
+        'calendar-weekdays',
+        'calendar-weekdays-short',
+      ],
+    });
+  }
+
+  onInput(e) {
+    if (!e.target.value) {
+      this.calendar?.clear();
+      this.calendar?.renderCalendar();
+    }
+  }
+
+  onFocus() {
+    if (this.isReadOnly) {
+      return;
+    }
+
+    if (!this.inputElement.value) {
+      this.inputElement.value = this.format;
+      this.setInputSelectionRange();
+    }
+  }
+
+  clearInputValue() {
+    this.inputElement.value = '';
+    this.resetDateCounters();
+  }
+
+  onBlur() {
+    if (this.inputValueTimestamp) {
+      this.value = this.inputValueTimestamp;
+    } else if (!this.opened && this.countersValue === this.format) {
+      this.clearInputValue();
+    }
+  }
+
+  onFormatUpdate(format) {
+    if (Object.keys(formats).includes(format)) {
+      this.format = format;
+      this.updateFormatPattern();
+    }
+  }
+
+  updateFormatPattern() {
+    const format = this.getAttribute('format') || this.format || DEFAULT_FORMAT;
+    this.setAttribute('type', 'date');
+    this.setAttribute('pattern', formats[format].pattern);
+  }
+
+  handleValueChange(e) {
+    if (isNumber(e.key)) {
+      e.preventDefault();
+
+      this.handleCountersValue(e.key);
+
+      if (this.activeCounter.isFull) {
+        this.selectNextCounter();
+      }
+
+      this.setInputSelectionRange();
+    }
+  }
+
+  getCounterIdx(caretPos) {
+    const [counter1ln, counter2ln] = this.sortedCounters.map((dc) => dc.length);
+
+    const c1 = caretPos <= counter1ln;
+    const c2 = caretPos >= counter1ln && caretPos <= counter1ln + counter2ln + 1;
+    const c3 = caretPos >= counter1ln + counter2ln + 2;
+
+    return [c1, c2, c3].indexOf(true);
+  }
+
+  handleCountersValue(val) {
+    this.activeCounter.add(val);
+    this.inputElement.value = this.countersValue;
+  }
+
+  setSelectedCounterByCaretPosition(e) {
+    this.selectedCounterIdx = this.getCounterIdx(e.target.selectionStart);
+  }
+
+  selectNextCounter() {
+    if (this.selectedCounterIdx < this.dateCounters.length) {
+      this.selectedCounterIdx = Math.min(this.selectedCounterIdx + 1, 2);
+    }
+  }
+
+  selectPrevCounter() {
+    if (this.selectedCounterIdx > 0) {
+      this.selectedCounterIdx = Math.min(this.selectedCounterIdx - 1, 1);
+    }
+  }
+
+  // Sets the text selection range in the input element based on the selected counter.
+  // The function calculates the starting position of the selection by summing the lengths
+  // of all counters before the currently selected counter (`selectedCounterIdx`).
+  // It then selects the entire length of the current counter in the input element.
+  setInputSelectionRange() {
+    // For preview/readonly state we don't have a caret or a caretIdx, so we skip setting input selection range
+    if (this.selectedCounterIdx < 0) {
+      return;
+    }
+
+    const caretStart = this.sortedCounters
+      .slice(0, this.selectedCounterIdx)
+      .reduce((acc, counter) => acc + counter.length, this.selectedCounterIdx);
+
+    this.inputElement.setSelectionRange(
+      caretStart,
+      caretStart + this.sortedCounters[this.selectedCounterIdx].length
+    );
+  }
+
+  resetDateCounters() {
+    this.dateCounters.forEach((dc) => dc.clear());
+  }
+
+  // in case value is set from external source we need to update date counters
+  updateDateCounters(date) {
+    this.dateCounters.forEach((dc) => {
+      switch (dc.id) {
+        case counterConfig.MONTH.id:
+          dc.set(date.getMonth() + 1);
+          break;
+        case counterConfig.YEAR.id:
+          dc.set(date.getFullYear());
+          break;
+        case counterConfig.DAY.id:
+          dc.set(date.getDate());
+          break;
+        default:
+          break;
+      }
+    });
+  }
+
+  handleKeyDownValueChange(e) {
+    if (this.isReadOnly) {
+      return;
+    }
+
+    const { key, shiftKey, metaKey } = e;
+    const keys = getKeyMap(key, shiftKey, metaKey);
+    const allowedOperations = keys.refresh || keys.tab || keys.shiftTab;
+
+    if (this.opened) {
+      this.closePopover();
+    }
+
+    if (isSupportedKey(key)) {
+      e.preventDefault();
+      const counter = this.activeCounter;
+
+      if (!counter) return;
+
+      const counterData = Object.values(counterConfig).find((config) => config.id === counter.id);
+      const { count, shiftCount } = counterData;
+
+      if (keys.backspace) this.handleBackspace();
+      else if (keys.arrowUp) counter.inc();
+      else if (keys.arrowDown) counter.dec();
+      else if (keys.shiftArrowUp) counter.inc(count);
+      else if (keys.shiftArrowDown) counter.dec(count);
+      else if (keys.pageUp) counter.inc(count);
+      else if (keys.pageDown) counter.dec(count);
+      else if (keys.shiftPageUp) counter.inc(shiftCount);
+      else if (keys.shiftPageDown) counter.dec(shiftCount);
+
+      this.inputElement.value = this.countersValue;
+
+      this.setInputSelectionRange();
+    } else if (!allowedOperations) {
+      e.preventDefault();
+    }
+  }
+
+  handleBackspace() {
+    const counter = this.activeCounter;
+
+    if (counter.isEmpty) {
+      this.selectPrevCounter();
+      this.setInputSelectionRange();
+    } else {
+      counter.del();
+    }
+  }
+
+  handleKeydownCaretPositionChange(e) {
+    if (this.opened) {
+      return;
+    }
+
+    const { key } = e;
+
+    if (isSupportedKey(key)) {
+      e.preventDefault();
+
+      const keys = getKeyMap(key, false);
+
+      if (keys.arrowRight) this.selectNextCounter();
+      else if (keys.arrowLeft) this.selectPrevCounter();
+
+      this.setInputSelectionRange();
+    }
+  }
+
+  handleMouseCaretPositionChange(e) {
+    if (this.opened) {
+      return;
+    }
+    e.preventDefault();
+    this.setSelectedCounterByCaretPosition(e);
+    this.setInputSelectionRange();
+  }
+
+  onInitialValueChange(val) {
+    // if component already has a value don't re-set value
+    if (this.value) return;
+
+    // we need to wait for the text-field to init
+    setTimeout(() => {
+      this.value = val;
+    });
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (oldValue !== newValue) {
+      if (dateFieldAttrs.includes(attrName)) {
+        if (newValue && attrName === 'format') {
+          this.onFormatUpdate(newValue);
+        }
+        if (attrName === 'initial-value') {
+          this.onInitialValueChange(newValue);
+        }
+      } else if (calendarAttrs.includes(attrName)) {
+        if (newValue) {
+          this.calendar?.setAttribute(attrName, newValue);
+        } else {
+          this.calendar?.removeAttribute(attrName);
+        }
+      }
+    }
+  }
+
+  getValidity() {
+    if (this.isRequired && !this.inputElement.value) {
+      return { valueMissing: true };
+    }
+
+    return {};
+  }
+}
+
+const textVars = TextFieldClass.cssVarList;
+const { host, input, inputEleRTL, toggleButton, overlay, backdrop } = {
+  host: { selector: () => ':host' },
+  input: { selector: () => 'descope-text-field' },
+  inputEleRTL: { selector: () => ':host([st-host-direction="rtl"]) descope-text-field' },
+  toggleButton: { selector: () => '.toggle-calendar' },
+  overlay: { selector: 'vaadin-popover-overlay::part(overlay)' },
+  backdrop: { selector: 'vaadin-popover-overlay::part(backdrop)' },
+};
+
+export const DateFieldClass = compose(
+  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
+  createStyleMixin({
+    mappings: {
+      iconMargin: { ...toggleButton, property: 'margin-inline-end' },
+      hostWidth: { ...host, property: 'width' },
+      hostDirection: { ...host, property: 'direction' },
+      textAlign: { ...input, property: 'text-align' },
+      rtlInputDirection: { ...inputEleRTL, property: textVars.inputDirection },
+      rtlInputAlignment: { ...inputEleRTL, property: textVars.inputTextAlign },
+      overlayGap: {
+        property: () => DateFieldClass.cssVarList.overlayGap,
+      },
+      overlayBackgroundColor: {
+        property: () => DateFieldClass.cssVarList.overlayBackgroundColor,
+      },
+      overlayPadding: {
+        property: () => DateFieldClass.cssVarList.overlayPadding,
+      },
+      overlayBoxShadow: { property: () => DateFieldClass.overlayBoxShadow },
+      overlayOutlineWidth: {
+        property: () => DateFieldClass.cssVarList.overlayOutlineWidth,
+      },
+      overlayOutlineColor: {
+        property: () => DateFieldClass.cssVarList.overlayOutlineColor,
+      },
+      overlayOutlineStyle: {
+        property: () => DateFieldClass.cssVarList.overlayOutlineStyle,
+      },
+    },
+  }),
+  portalMixin({
+    name: 'overlay',
+    selector: '',
+    mappings: {
+      marginTop: { ...overlay, property: 'margin-top' },
+      backgroundColor: { ...overlay },
+      backdropBackgroundColor: { ...backdrop, property: 'background-color' },
+      backdropPointerEvents: { ...backdrop, property: 'pointer-events' },
+      padding: { ...overlay },
+      boxShadow: { ...overlay },
+      outlineWidth: { ...overlay },
+      outlineColor: { ...overlay },
+      outlineStyle: { ...overlay },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawDateFieldClass);