@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.
- package/dist/cjs/index.cjs.js +68 -47
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +68 -47
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/8980.js +5 -2
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/descope-date-field-descope-calendar-index-js.js +1 -1
- package/dist/umd/descope-date-field-index-js.js +1 -1
- package/package.json +2 -2
- package/src/components/descope-date-field/DateFieldClass.js +66 -44
- package/src/components/descope-date-field/descope-calendar/CalendarClass.js +2 -2
- package/src/theme/components/dateField.js +0 -1
package/dist/cjs/index.cjs.js
CHANGED
@@ -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(
|
14390
|
-
navNextRTL: { selector: () => ':host(
|
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
|
-
|
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
|
-
|
14961
|
-
|
14970
|
+
this.backdrop.addEventListener('click', this.closePopover.bind(this));
|
14971
|
+
}
|
14962
14972
|
|
14963
|
-
|
14964
|
-
|
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
|
-
|
14970
|
-
|
14976
|
+
// Wait until overlay is ready
|
14977
|
+
setTimeout(() => {
|
14978
|
+
this.#adjustPopoverPosition(root);
|
14971
14979
|
|
14972
|
-
|
14973
|
-
|
14974
|
-
|
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.
|
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,
|
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
|
|