@descope/web-components-ui 1.0.386 → 1.0.387

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -14386,8 +14386,8 @@ const {
14386
14386
  weekday: { selector: () => '.weekday' },
14387
14387
  navPrev: { selector: () => '.nav-prev' },
14388
14388
  navNext: { selector: () => '.nav-next' },
14389
- navPrevRTL: { selector: () => ':host(:dir(rtl)) .nav-prev' },
14390
- navNextRTL: { selector: () => ':host(:dir(rtl)) .nav-next' },
14389
+ navPrevRTL: { selector: () => ':host([st-host-direction="rtl"]) .nav-prev' },
14390
+ navNextRTL: { selector: () => ':host([st-host-direction="rtl"]) .nav-next' },
14391
14391
  yearInput: { selector: () => '.year-input' },
14392
14392
  monthInput: { selector: () => '.month-input' },
14393
14393
  };
@@ -14743,7 +14743,7 @@ const componentName$5 = getComponentName('date-field');
14743
14743
  const BASE_SELECTOR = 'vaadin-popover';
14744
14744
  const BaseInputClass = createBaseInputClass({ componentName: componentName$5, baseSelector: BASE_SELECTOR });
14745
14745
 
14746
- const dateFieldAttrs = ['format', 'opened', 'initial-value'];
14746
+ const dateFieldAttrs = ['format', 'opened', 'initial-value', 'readonly'];
14747
14747
  const calendarAttrs = ['years-range', 'calendar-months', 'calendar-weekdays'];
14748
14748
  const observedAttrs = [...dateFieldAttrs, ...calendarAttrs];
14749
14749
 
@@ -14785,19 +14785,16 @@ class RawDateFieldClass extends BaseInputClass {
14785
14785
  display: flex;
14786
14786
  align-self: center;
14787
14787
  z-index: 1;
14788
+ height: 100%;
14789
+ align-items: center;
14788
14790
  }
14789
14791
 
14790
- descope-text-field .overlay-position-anchor {
14791
- position: absolute;
14792
- height: 100%;
14793
- width: 0;
14794
- z-index: 1;
14792
+ :host([readonly="true"]) .toggle-calendar {
14795
14793
  pointer-events: none;
14796
14794
  }
14797
14795
  </style>
14798
14796
  <div>
14799
14797
  <descope-text-field>
14800
- <span slot="prefix" class="overlay-position-anchor"></span>
14801
14798
  <span slot="suffix" class="toggle-calendar">
14802
14799
  <descope-icon>${calendarIcon}</descope-icon>
14803
14800
  </span>
@@ -14808,7 +14805,6 @@ class RawDateFieldClass extends BaseInputClass {
14808
14805
 
14809
14806
  this.inputElement = this.shadowRoot.querySelector('descope-text-field');
14810
14807
  this.popoverToggleButton = this.inputElement.querySelector('.toggle-calendar');
14811
- this.overlayPositionAnchor = this.inputElement.querySelector('.overlay-position-anchor');
14812
14808
 
14813
14809
  this.oninvalid = () => {
14814
14810
  this.inputElement.setAttribute('invalid', 'true');
@@ -14857,6 +14853,17 @@ class RawDateFieldClass extends BaseInputClass {
14857
14853
  return this.overlay?.querySelector('descope-calendar');
14858
14854
  }
14859
14855
 
14856
+ get isRTL() {
14857
+ const computedStyleDirection = getComputedStyle(this.baseElement).getPropertyValue('direction');
14858
+
14859
+ if (computedStyleDirection) {
14860
+ return computedStyleDirection === 'rtl';
14861
+ }
14862
+
14863
+ // Fallback: If for some reason computed style was not calculated in time, fallback to check on attribute
14864
+ return this.getAttribute('st-host-direction') === 'rtl';
14865
+ }
14866
+
14860
14867
  get value() {
14861
14868
  return this.timestamp;
14862
14869
  }
@@ -14937,10 +14944,8 @@ class RawDateFieldClass extends BaseInputClass {
14937
14944
  }
14938
14945
 
14939
14946
  initPopover() {
14940
- this.baseElement.target = this.overlayPositionAnchor;
14941
14947
  this.baseElement.trigger = ['click'];
14942
14948
  this.baseElement.withBackdrop = true;
14943
- this.baseElement.noCloseOnOutsideClick = true;
14944
14949
  this.baseElement.renderer = this.#popoverRenderer.bind(this);
14945
14950
 
14946
14951
  // block popover events from focusing/blurring the text-field
@@ -14950,32 +14955,64 @@ class RawDateFieldClass extends BaseInputClass {
14950
14955
  });
14951
14956
  }
14952
14957
 
14958
+ #popoverPosStylesheet;
14959
+
14953
14960
  #popoverRenderer(root) {
14954
14961
  // popoverRenderer should run only once, when the popover is first rendering.
14955
14962
  if (!root.firstChild) {
14963
+ this.overlay.positionTarget = this.shadowRoot.querySelector('.toggle-calendar');
14964
+
14956
14965
  root.appendChild(this.#getPopoverContent());
14966
+
14957
14967
  // override vaadin's constructed stylesheet which hides the host element
14958
14968
  overrideConstructedStylesheet(this.baseElement);
14959
14969
 
14960
- // To prevent position flickering of the dialog we set opacity to 0
14961
- root.style.setProperty('opacity', '0');
14970
+ this.backdrop.addEventListener('click', this.closePopover.bind(this));
14971
+ }
14962
14972
 
14963
- setTimeout(() => {
14964
- // on first render we adjust the a anchor element in the input
14965
- // so vaadin computes the popover position according to the anchor position
14966
- // (otherwise it will simply center the popover below the input).
14967
- this.#adjustOverlayPosition();
14973
+ // Hide overlay before adjusting position to prevent flickering
14974
+ root.style.setProperty('visibility', 'hidden');
14968
14975
 
14969
- // remove opacity to show overlay
14970
- root.style.setProperty('opacity', '1');
14976
+ // Wait until overlay is ready
14977
+ setTimeout(() => {
14978
+ this.#adjustPopoverPosition(root);
14971
14979
 
14972
- // on outside click - close popover. this event runs once on popover first render
14973
- // and does not need to be cleared
14974
- this.backdrop.addEventListener('click', this.closePopover.bind(this));
14975
- });
14980
+ // Show adjusted overlay
14981
+ root.style.setProperty('visibility', 'visible');
14982
+ this.updateCalendarView(root);
14983
+ }, 100);
14984
+ }
14985
+
14986
+ #adjustPopoverPosition() {
14987
+ const popover = this.shadowRoot.querySelector('vaadin-popover').shadowRoot;
14988
+
14989
+ // Remove previously added stylesheets
14990
+ this.#popoverPosStylesheet?.remove();
14991
+
14992
+ const windowRect = document.body.getBoundingClientRect();
14993
+ const inputRect = this.getBoundingClientRect();
14994
+ const calendarRect = this.calendar.getBoundingClientRect();
14995
+
14996
+ const side = this.isRTL ? 'right' : 'left';
14997
+ const offset = inputRect[side] - calendarRect[side];
14998
+ const availableLeft = calendarRect.left;
14999
+ const availableRight = windowRect.width - calendarRect.right;
15000
+
15001
+ let newOffset;
15002
+ if (offset > 0) {
15003
+ newOffset = Math.min(offset, availableRight);
15004
+ } else {
15005
+ newOffset = Math.min(Math.abs(offset), availableLeft) * -1;
14976
15006
  }
14977
15007
 
14978
- this.updateCalendarView();
15008
+ this.#popoverPosStylesheet = document.createElement('style');
15009
+ this.#popoverPosStylesheet.innerHTML = `
15010
+ vaadin-popover-overlay::part(overlay) {
15011
+ transform: translateX(${newOffset}px);
15012
+ }
15013
+ `;
15014
+
15015
+ popover.appendChild(this.#popoverPosStylesheet);
14979
15016
  }
14980
15017
 
14981
15018
  #getPopoverContent() {
@@ -14991,17 +15028,6 @@ class RawDateFieldClass extends BaseInputClass {
14991
15028
  return ele;
14992
15029
  }
14993
15030
 
14994
- #adjustOverlayPosition() {
14995
- const { width: inputEleWidth } = this.inputElement.getClientRects()[0];
14996
- const { width: calendarEleWidth } = this.calendar.getClientRects()[0];
14997
- const pos = inputEleWidth - calendarEleWidth / 2;
14998
- /* eslint-disable no-use-before-define */
14999
- this.overlayPositionAnchor.style.setProperty(
15000
- DateFieldClass.cssVarList.overlayAnchorPos,
15001
- `${pos}px`
15002
- );
15003
- }
15004
-
15005
15031
  // the default vaadin behavior is to attach the overlay to the body when opened
15006
15032
  // we do not want that because it's difficult to style the overlay in this way
15007
15033
  // so we override it to open inside the shadow DOM
@@ -15085,6 +15111,10 @@ class RawDateFieldClass extends BaseInputClass {
15085
15111
  }
15086
15112
 
15087
15113
  onFocus() {
15114
+ if (this.isReadOnly) {
15115
+ return;
15116
+ }
15117
+
15088
15118
  if (!this.inputElement.value) {
15089
15119
  this.inputElement.value = this.format;
15090
15120
  this.setInputSelectionRange();
@@ -15322,12 +15352,10 @@ class RawDateFieldClass extends BaseInputClass {
15322
15352
  }
15323
15353
  }
15324
15354
 
15325
- const { host, input, toggleButton, overlayAnchor, overlayAnchorRTL, overlay, backdrop } = {
15355
+ const { host, input, toggleButton, overlay, backdrop } = {
15326
15356
  host: { selector: () => ':host' },
15327
15357
  input: { selector: () => 'descope-text-field' },
15328
15358
  toggleButton: { selector: () => '.toggle-calendar' },
15329
- overlayAnchor: { selector: () => ':host .overlay-position-anchor' },
15330
- overlayAnchorRTL: { selector: ':host([st-host-direction="rtl"]) .overlay-position-anchor' },
15331
15359
  overlay: { selector: 'vaadin-popover-overlay::part(overlay)' },
15332
15360
  backdrop: { selector: 'vaadin-popover-overlay::part(backdrop)' },
15333
15361
  };
@@ -15340,14 +15368,9 @@ const DateFieldClass = compose(
15340
15368
  hostWidth: { ...host, property: 'width' },
15341
15369
  hostDirection: { ...host, property: 'direction' },
15342
15370
  textAlign: { ...input, property: 'text-align' },
15343
- overlayAnchorPos: [
15344
- { ...overlayAnchor, property: 'right' },
15345
- { ...overlayAnchorRTL, property: 'left' },
15346
- ],
15347
15371
  overlayGap: {
15348
15372
  property: () => DateFieldClass.cssVarList.overlayGap,
15349
15373
  },
15350
-
15351
15374
  overlayBackgroundColor: {
15352
15375
  property: () => DateFieldClass.cssVarList.overlayBackgroundColor,
15353
15376
  },
@@ -15379,7 +15402,6 @@ const DateFieldClass = compose(
15379
15402
  outlineWidth: { ...overlay },
15380
15403
  outlineColor: { ...overlay },
15381
15404
  outlineStyle: { ...overlay },
15382
- direction: { ...overlay },
15383
15405
  },
15384
15406
  }),
15385
15407
  draggableMixin,
@@ -15406,7 +15428,6 @@ const dateField = {
15406
15428
  [vars$4.overlay.outlineWidth]: '0',
15407
15429
  [vars$4.overlay.outlineColor]: 'transparent',
15408
15430
  [vars$4.overlay.outlineStyle]: 'none',
15409
- [vars$4.overlay.direction]: refs.direction,
15410
15431
  [vars$4.overlay.padding]: '0',
15411
15432
  };
15412
15433