@descope/web-components-ui 1.0.386 → 1.0.387

package/dist/index.esm.js

@@ -3961,8 +3961,8 @@ const {
   weekday: { selector: () => '.weekday' },
   navPrev: { selector: () => '.nav-prev' },
   navNext: { selector: () => '.nav-next' },
-  navPrevRTL: { selector: () => ':host(:dir(rtl)) .nav-prev' },
-  navNextRTL: { selector: () => ':host(:dir(rtl)) .nav-next' },
+  navPrevRTL: { selector: () => ':host([st-host-direction="rtl"]) .nav-prev' },
+  navNextRTL: { selector: () => ':host([st-host-direction="rtl"]) .nav-next' },
   yearInput: { selector: () => '.year-input' },
   monthInput: { selector: () => '.month-input' },
 };
@@ -4503,7 +4503,7 @@ const componentName$R = getComponentName('date-field');
 const BASE_SELECTOR = 'vaadin-popover';
 const BaseInputClass$8 = createBaseInputClass({ componentName: componentName$R, baseSelector: BASE_SELECTOR });
 
-const dateFieldAttrs = ['format', 'opened', 'initial-value'];
+const dateFieldAttrs = ['format', 'opened', 'initial-value', 'readonly'];
 const calendarAttrs = ['years-range', 'calendar-months', 'calendar-weekdays'];
 const observedAttrs = [...dateFieldAttrs, ...calendarAttrs];
 
@@ -4545,19 +4545,16 @@ class RawDateFieldClass extends BaseInputClass$8 {
         display: flex;
         align-self: center;
         z-index: 1;
+        height: 100%;
+        align-items: center;        
       }
 
-      descope-text-field .overlay-position-anchor {
-        position: absolute;
-        height: 100%;
-        width: 0;
-        z-index: 1;
+      :host([readonly="true"]) .toggle-calendar {
         pointer-events: none;
       }
     </style>
     <div>
       <descope-text-field>
-        <span slot="prefix" class="overlay-position-anchor"></span>
         <span slot="suffix" class="toggle-calendar">
           <descope-icon>${calendarIcon}</descope-icon>
         </span>
@@ -4568,7 +4565,6 @@ class RawDateFieldClass extends BaseInputClass$8 {
 
     this.inputElement = this.shadowRoot.querySelector('descope-text-field');
     this.popoverToggleButton = this.inputElement.querySelector('.toggle-calendar');
-    this.overlayPositionAnchor = this.inputElement.querySelector('.overlay-position-anchor');
 
     this.oninvalid = () => {
       this.inputElement.setAttribute('invalid', 'true');
@@ -4617,6 +4613,17 @@ class RawDateFieldClass extends BaseInputClass$8 {
     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;
   }
@@ -4697,10 +4704,8 @@ class RawDateFieldClass extends BaseInputClass$8 {
   }
 
   initPopover() {
-    this.baseElement.target = this.overlayPositionAnchor;
     this.baseElement.trigger = ['click'];
     this.baseElement.withBackdrop = true;
-    this.baseElement.noCloseOnOutsideClick = true;
     this.baseElement.renderer = this.#popoverRenderer.bind(this);
 
     // block popover events from focusing/blurring the text-field
@@ -4710,32 +4715,64 @@ class RawDateFieldClass extends BaseInputClass$8 {
     });
   }
 
+  #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);
 
-      // To prevent position flickering of the dialog we set opacity to 0
-      root.style.setProperty('opacity', '0');
+      this.backdrop.addEventListener('click', this.closePopover.bind(this));
+    }
 
-      setTimeout(() => {
-        // on first render we adjust the a anchor element in the input
-        // so vaadin computes the popover position according to the anchor position
-        // (otherwise it will simply center the popover below the input).
-        this.#adjustOverlayPosition();
+    // Hide overlay before adjusting position to prevent flickering
+    root.style.setProperty('visibility', 'hidden');
 
-        // remove opacity to show overlay
-        root.style.setProperty('opacity', '1');
+    // Wait until overlay is ready
+    setTimeout(() => {
+      this.#adjustPopoverPosition(root);
 
-        // on outside click - close popover. this event runs once on popover first render
-        // and does not need to be cleared
-        this.backdrop.addEventListener('click', this.closePopover.bind(this));
-      });
+      // 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.updateCalendarView();
+    this.#popoverPosStylesheet = document.createElement('style');
+    this.#popoverPosStylesheet.innerHTML = `
+      vaadin-popover-overlay::part(overlay) {
+        transform: translateX(${newOffset}px);
+      }
+    `;
+
+    popover.appendChild(this.#popoverPosStylesheet);
   }
 
   #getPopoverContent() {
@@ -4751,17 +4788,6 @@ class RawDateFieldClass extends BaseInputClass$8 {
     return ele;
   }
 
-  #adjustOverlayPosition() {
-    const { width: inputEleWidth } = this.inputElement.getClientRects()[0];
-    const { width: calendarEleWidth } = this.calendar.getClientRects()[0];
-    const pos = inputEleWidth - calendarEleWidth / 2;
-    /* eslint-disable no-use-before-define */
-    this.overlayPositionAnchor.style.setProperty(
-      DateFieldClass.cssVarList.overlayAnchorPos,
-      `${pos}px`
-    );
-  }
-
   // 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
@@ -4845,6 +4871,10 @@ class RawDateFieldClass extends BaseInputClass$8 {
   }
 
   onFocus() {
+    if (this.isReadOnly) {
+      return;
+    }
+
     if (!this.inputElement.value) {
       this.inputElement.value = this.format;
       this.setInputSelectionRange();
@@ -5082,12 +5112,10 @@ class RawDateFieldClass extends BaseInputClass$8 {
   }
 }
 
-const { host: host$i, input, toggleButton, overlayAnchor, overlayAnchorRTL, overlay, backdrop } = {
+const { host: host$i, input, toggleButton, overlay, backdrop } = {
   host: { selector: () => ':host' },
   input: { selector: () => 'descope-text-field' },
   toggleButton: { selector: () => '.toggle-calendar' },
-  overlayAnchor: { selector: () => ':host .overlay-position-anchor' },
-  overlayAnchorRTL: { selector: ':host([st-host-direction="rtl"]) .overlay-position-anchor' },
   overlay: { selector: 'vaadin-popover-overlay::part(overlay)' },
   backdrop: { selector: 'vaadin-popover-overlay::part(backdrop)' },
 };
@@ -5100,14 +5128,9 @@ const DateFieldClass = compose(
       hostWidth: { ...host$i, property: 'width' },
       hostDirection: { ...host$i, property: 'direction' },
       textAlign: { ...input, property: 'text-align' },
-      overlayAnchorPos: [
-        { ...overlayAnchor, property: 'right' },
-        { ...overlayAnchorRTL, property: 'left' },
-      ],
       overlayGap: {
         property: () => DateFieldClass.cssVarList.overlayGap,
       },
-
       overlayBackgroundColor: {
         property: () => DateFieldClass.cssVarList.overlayBackgroundColor,
       },
@@ -5139,7 +5162,6 @@ const DateFieldClass = compose(
       outlineWidth: { ...overlay },
       outlineColor: { ...overlay },
       outlineStyle: { ...overlay },
-      direction: { ...overlay },
     },
   }),
   draggableMixin,
@@ -17141,7 +17163,6 @@ const dateField = {
   [vars$4.overlay.outlineWidth]: '0',
   [vars$4.overlay.outlineColor]: 'transparent',
   [vars$4.overlay.outlineStyle]: 'none',
-  [vars$4.overlay.direction]: refs.direction,
   [vars$4.overlay.padding]: '0',
 };