@luzmo/lucero 1.0.1-alpha.18 → 1.0.1-alpha.19
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/components/NumberFormatter-DewVDY5w.cjs +18 -0
- package/components/NumberFormatter-DgOUVrge.js +136 -0
- package/components/NumberParser-Dik4a0h-.cjs +18 -0
- package/components/NumberParser-ci9J5EKv.js +173 -0
- package/components/accordion/index.cjs +6 -183
- package/components/accordion/index.js +88 -136
- package/components/action-bar/index.cjs +4 -85
- package/components/action-bar/index.js +50 -72
- package/components/action-button/index.cjs +3 -205
- package/components/action-button/index.js +93 -167
- package/components/action-group/index.cjs +1 -7
- package/components/action-group/index.js +8 -12
- package/components/action-group-C54IxNZk.cjs +20 -0
- package/components/action-group-C9dsPJg-.js +258 -0
- package/components/action-menu/index.cjs +11 -91
- package/components/action-menu/index.js +47 -66
- package/components/async-directive-BwIAw5tB.js +82 -0
- package/components/async-directive-DLz6JB0v.cjs +22 -0
- package/components/avatar/index.cjs +3 -63
- package/components/avatar/index.js +42 -54
- package/components/{focusable-selectors-D0t_5P7C.cjs → base-BjTwmyRF.cjs} +5 -16
- package/components/base-CFWO09N1.js +684 -0
- package/components/base-Cy0MQrPT.cjs +40 -0
- package/components/base-D76d76ww.js +26 -0
- package/components/button/index.cjs +2 -134
- package/components/button/index.js +72 -106
- package/components/button-base-B8bWcklV.js +144 -0
- package/components/button-base-tf95Lyl4.cjs +25 -0
- package/components/button-group/index.cjs +1 -45
- package/components/button-group/index.js +25 -37
- package/components/calendar/index.cjs +1 -632
- package/components/calendar/index.js +7 -637
- package/components/checkbox/index.cjs +4 -111
- package/components/checkbox/index.js +53 -98
- package/components/checkbox-mixin-BOTvuPEu.js +70 -0
- package/components/checkbox-mixin-BVPpXtsq.cjs +27 -0
- package/components/class-map-CGfNk3Ee.js +51 -0
- package/components/class-map-D-Y-hsN5.cjs +22 -0
- package/components/clear-button-CuPbWwZY.cjs +18 -0
- package/components/clear-button-DzZ5ulBW.js +53 -0
- package/components/close-button-BTo4yrFR.cjs +18 -0
- package/components/close-button-CuQdsez5.js +51 -0
- package/components/color-area/index.cjs +13 -440
- package/components/color-area/index.js +187 -322
- package/components/color-controller-B0uX6Zso.js +3230 -0
- package/components/color-controller-CoUL5f9K.cjs +18 -0
- package/components/color-field/index.cjs +2 -95
- package/components/color-field/index.js +41 -77
- package/components/color-handle/index.cjs +3 -64
- package/components/color-handle/index.js +37 -58
- package/components/color-loupe/index.cjs +1 -7
- package/components/color-loupe/index.js +8 -12
- package/components/color-loupe-CrM2DVY3.cjs +56 -0
- package/components/color-loupe-DmQe3SpP.js +81 -0
- package/components/color-menu/index.cjs +12 -217
- package/components/color-menu/index.js +93 -187
- package/components/color-palette/index.cjs +1 -89
- package/components/color-palette/index.js +51 -78
- package/components/color-palette-group/index.cjs +3 -259
- package/components/color-palette-group/index.js +105 -193
- package/components/color-picker/index.cjs +6 -114
- package/components/color-picker/index.js +72 -92
- package/components/color-slider/index.cjs +1 -585
- package/components/color-slider/index.js +7 -590
- package/components/condition-attribute-with-id-DrQYZzFS.cjs +18 -0
- package/components/condition-attribute-with-id-Dv4lSRbe.js +31 -0
- package/components/date-time-picker/index.cjs +31 -1357
- package/components/date-time-picker/index.js +637 -951
- package/components/{dependency-manger-XHpQjFgK.js → dependency-manger-CO-VPlqq.js} +14 -24
- package/components/dependency-manger-uthev62E.cjs +18 -0
- package/components/directive-C7oCP5Bh.cjs +22 -0
- package/components/directive-helpers-D4KMv2dC.js +62 -0
- package/components/directive-helpers-t-TVum7J.cjs +22 -0
- package/components/{slottable-request-event-CANixJnR.cjs → directive-oAbCiebi.js} +25 -14
- package/components/divider/index.cjs +1 -54
- package/components/divider/index.js +30 -49
- package/components/divider.module-DDvBo9zo.cjs +18 -0
- package/components/divider.module-DoQWQEIJ.js +21 -0
- package/components/element-resolution-BvRLGqIU.cjs +18 -0
- package/components/element-resolution-FCUT-wql.js +91 -0
- package/components/field-group/index.cjs +1 -7
- package/components/field-group/index.js +8 -12
- package/components/field-group-5WQMBOk4.cjs +23 -0
- package/components/field-group-D4B0IOdA.js +66 -0
- package/components/field-label/index.cjs +1 -7
- package/components/field-label/index.js +8 -12
- package/components/field-label-DxmPiC5p.js +106 -0
- package/components/field-label-Dz9kisdW.cjs +25 -0
- package/components/flow-D-0MTYCm.js +527 -0
- package/components/flow-DM3dNAKs.cjs +30 -0
- package/components/focus-group-DHeTq18L.js +218 -0
- package/components/focus-group-DnxZUBhQ.cjs +18 -0
- package/components/focus-visible-BvScGDCE.js +74 -0
- package/components/focus-visible-D4BXb5RB.cjs +18 -0
- package/components/focusable-B_KwfEec.cjs +18 -0
- package/components/focusable-C5JjRZmT.js +153 -0
- package/components/{focusable-selectors-IltOAOd9.js → focusable-selectors-B4YgbghQ.js} +4 -7
- package/components/focusable-selectors-BgFlyFcY.cjs +18 -0
- package/components/icon/index.cjs +1 -90
- package/components/icon/index.js +46 -74
- package/components/if-defined-DULpqYwi.js +27 -0
- package/components/if-defined-DaXWqfzc.cjs +22 -0
- package/components/index-CNK8wHXu.cjs +57 -0
- package/components/index-Cf6G4q52.js +1490 -0
- package/components/index-D3ICqC7S.js +1174 -0
- package/components/index-hqVbNKYy.cjs +113 -0
- package/components/index.cjs +1 -174
- package/components/index.js +172 -174
- package/components/infield-button/index.cjs +2 -46
- package/components/infield-button/index.js +30 -41
- package/components/label/index.cjs +1 -37
- package/components/label/index.js +24 -36
- package/components/{language-resolution-BSGJAWiQ.js → language-resolution-B-wjV5bb.js} +17 -21
- package/components/language-resolution-EUER43cg.cjs +18 -0
- package/components/like-anchor-Bu3pXbjT.cjs +32 -0
- package/components/like-anchor-DCFJN0LV.js +69 -0
- package/components/luzmo-icons-CiSek5iM.js +229 -0
- package/components/luzmo-icons-CtA-TJPd.cjs +29 -0
- package/components/manage-help-text-CHfMLzSa.js +92 -0
- package/components/manage-help-text-DNqdEkTA.cjs +30 -0
- package/components/menu/index.cjs +29 -1297
- package/components/menu/index.js +499 -954
- package/components/multi-language-field/index.cjs +2 -132
- package/components/multi-language-field/index.js +88 -118
- package/components/mutation-controller-DH7YOCyj.js +52 -0
- package/components/mutation-controller-DkOMCW-c.cjs +22 -0
- package/components/number-field/index.cjs +10 -613
- package/components/number-field/index.js +243 -442
- package/components/observe-slot-presence-CmVi0zTc.js +68 -0
- package/components/observe-slot-presence-bc9chhsi.cjs +18 -0
- package/components/observe-slot-text-C3moTjwy.js +87 -0
- package/components/observe-slot-text-D2VAEFSd.cjs +18 -0
- package/components/options/index.cjs +60 -693
- package/components/options/index.js +953 -519
- package/components/overlay/index.cjs +21 -367
- package/components/overlay/index.js +189 -273
- package/components/overlay-B3ajDLLq.cjs +47 -0
- package/components/overlay-CUKs69yr.js +2745 -0
- package/components/{pending-state-CXbe-Xul.js → pending-state-B2wWssTo.js} +13 -28
- package/components/pending-state-bJr-nEJl.cjs +26 -0
- package/components/picker/index.cjs +1 -9
- package/components/picker/index.js +11 -15
- package/components/picker-C0LvseZe.cjs +123 -0
- package/components/picker-W1qNmtsh.js +461 -0
- package/components/picker-button/index.cjs +4 -56
- package/components/picker-button/index.js +34 -45
- package/components/{condition-attribute-with-id-Cn815e9W.js → platform-BM-uMWpX.js} +49 -24
- package/components/platform-BiXhwqk3.cjs +18 -0
- package/components/popover/index.cjs +1 -7
- package/components/popover/index.js +8 -12
- package/components/popover-fwJeZHMQ.cjs +30 -0
- package/components/popover-iD8f5Jkp.js +67 -0
- package/components/progress-circle/index.cjs +1 -7
- package/components/progress-circle/index.js +8 -12
- package/components/progress-circle-DZxaMe8L.cjs +33 -0
- package/components/progress-circle-USIIU1up.js +97 -0
- package/components/query-BL-TJj7K.cjs +22 -0
- package/components/query-D_KR_GUc.js +51 -0
- package/components/query-assigned-elements-DjfhL1cl.js +36 -0
- package/components/query-assigned-elements-DsKsfk7G.cjs +22 -0
- package/components/query-assigned-nodes-BcKWmGzy.cjs +22 -0
- package/components/query-assigned-nodes-C76XVPWY.js +36 -0
- package/components/radio/index.cjs +2 -244
- package/components/radio/index.js +110 -192
- package/components/{random-id-BEc6QIUL.js → random-id-ByCz1xaq.js} +3 -3
- package/components/random-id-CqvckpWe.cjs +18 -0
- package/components/roving-tabindex-By_fCy_e.cjs +18 -0
- package/components/roving-tabindex-DOg4z6ZU.js +66 -0
- package/components/search/index.cjs +8 -115
- package/components/search/index.js +66 -96
- package/components/select/index.cjs +51 -720
- package/components/select/index.js +347 -563
- package/components/sized-mixin-CJbBHWRQ.js +63 -0
- package/components/sized-mixin-WPHH0a_D.cjs +18 -0
- package/components/slider/index.cjs +1 -119
- package/components/slider/index.js +1113 -100
- package/components/slottable-request-event-BfUUt1Mh.cjs +18 -0
- package/components/{slottable-request-event-D9WzrdWv.js → slottable-request-event-DggLA4Rx.js} +9 -12
- package/components/state-DwIwYPvt.js +29 -0
- package/components/state-vf0PJN3_.cjs +22 -0
- package/components/strategies-C6HsQpU2.cjs +18 -0
- package/components/strategies-CUMLHtQI.js +195 -0
- package/components/streaming-listener-BQ68fKMa.js +91 -0
- package/components/streaming-listener-DeGQYM-9.cjs +18 -0
- package/components/style-map-Bnhf_mVZ.js +53 -0
- package/components/style-map-DuMd5xlY.cjs +22 -0
- package/components/swatch/index.cjs +7 -436
- package/components/swatch/index.js +205 -350
- package/components/switch/index.cjs +2 -61
- package/components/switch/index.js +34 -51
- package/components/tabs/index.cjs +26 -693
- package/components/tabs/index.js +388 -521
- package/components/tags/index.cjs +4 -201
- package/components/tags/index.js +87 -152
- package/components/text-field/index.cjs +3 -49
- package/components/text-field/index.js +30 -44
- package/components/text-field-BkFPYo7S.cjs +85 -0
- package/components/text-field-C2n3rzCK.js +314 -0
- package/components/text-field.module-C2KVUJcX.js +21 -0
- package/components/text-field.module-DXhFA9G-.cjs +18 -0
- package/components/toast/index.cjs +12 -177
- package/components/toast/index.js +73 -145
- package/components/tooltip/index.cjs +6 -250
- package/components/tooltip/index.js +124 -177
- package/components/unit-input/index.cjs +8 -232
- package/components/unit-input/index.js +108 -201
- package/components/utils.cjs +1 -25
- package/components/utils.js +22 -22
- package/components/{random-id-BE6HA503.cjs → when-CDK1Tt5Y.js} +10 -7
- package/components/when-CDZyJPvd.cjs +22 -0
- package/package.json +1 -1
- package/components/action-group-DHp8RHDf.js +0 -392
- package/components/action-group-MPf19RPV.cjs +0 -391
- package/components/base-COw9n7UR.cjs +0 -119
- package/components/base-DmeVy0cq.js +0 -120
- package/components/button-base-7Ak55xFd.cjs +0 -206
- package/components/button-base-C3kf6BTK.js +0 -207
- package/components/checkbox-mixin-8cL-vfDy.js +0 -84
- package/components/checkbox-mixin-CE7dJj3J.cjs +0 -83
- package/components/clear-button-Co6oKSgl.js +0 -59
- package/components/clear-button-X_HDY2eH.cjs +0 -58
- package/components/close-button-DPBK6Kpu.cjs +0 -59
- package/components/close-button-Miw9ZjoJ.js +0 -60
- package/components/color-controller-BjDZaxhX.js +0 -491
- package/components/color-controller-C3c_vb2P.cjs +0 -490
- package/components/color-loupe-BQqNR8YD.cjs +0 -88
- package/components/color-loupe-B_DDFv8l.js +0 -89
- package/components/condition-attribute-with-id-DEc2Yjne.cjs +0 -43
- package/components/dependency-manger-CcIE1uvQ.cjs +0 -63
- package/components/divider.module-Cm5LcDRV.cjs +0 -20
- package/components/divider.module-DauH6k2_.js +0 -21
- package/components/element-resolution-DCsrhGZO.cjs +0 -112
- package/components/element-resolution-nMlmW4Jy.js +0 -113
- package/components/field-group-DNmY8W9v.cjs +0 -86
- package/components/field-group-DVdAWCQF.js +0 -87
- package/components/field-label-CKH9EXpR.cjs +0 -156
- package/components/field-label-Dpsecoc6.js +0 -157
- package/components/focus-group-BqDAk9Is.js +0 -337
- package/components/focus-group-DFzOlalL.cjs +0 -336
- package/components/focus-visible-B-B8-P9R.cjs +0 -104
- package/components/focus-visible-BUPRWlsh.js +0 -105
- package/components/focusable-BPrTcZPd.cjs +0 -262
- package/components/focusable-ChCLg1k4.js +0 -263
- package/components/language-resolution-iN9EImbb.cjs +0 -57
- package/components/like-anchor-D62faRNG.cjs +0 -79
- package/components/like-anchor-v3cJ9RWM.js +0 -80
- package/components/manage-help-text-BYx84zZR.cjs +0 -125
- package/components/manage-help-text-DOuMTGht.js +0 -126
- package/components/observe-slot-presence-9AwLGUQ_.cjs +0 -78
- package/components/observe-slot-presence-DcMdoumP.js +0 -79
- package/components/observe-slot-text-CSofZeeF.cjs +0 -104
- package/components/observe-slot-text-CjnkkBPn.js +0 -105
- package/components/overlay-CN8ISP1F.js +0 -2485
- package/components/overlay-LViy9VWM.cjs +0 -2484
- package/components/pending-state-e4RbXe9u.cjs +0 -75
- package/components/picker-DNde3awt.cjs +0 -672
- package/components/picker-PfUAF05y.js +0 -673
- package/components/platform-CxDar3Dn.cjs +0 -68
- package/components/platform-Cxn0WbyT.js +0 -69
- package/components/popover-BkbYhl3i.js +0 -74
- package/components/popover-BkgUf0kL.cjs +0 -74
- package/components/progress-circle-Hu_ivPHf.js +0 -133
- package/components/progress-circle-_Etqsj9f.cjs +0 -132
- package/components/roving-tabindex-AsmAh2In.cjs +0 -95
- package/components/roving-tabindex-DPF9NmrH.js +0 -96
- package/components/sized-mixin-DmkrNdWB.js +0 -80
- package/components/sized-mixin-UaTVa-AE.cjs +0 -79
- package/components/strategies-DlMlaSJR.cjs +0 -317
- package/components/strategies-DlPQoTFE.js +0 -318
- package/components/streaming-listener-D4sHaMub.cjs +0 -145
- package/components/streaming-listener-cAz5zJyk.js +0 -146
- package/components/text-field-11tcnftU.cjs +0 -338
- package/components/text-field-Chi9J2Cz.js +0 -339
- package/components/text-field.module-CMBS0jSL.js +0 -21
- package/components/text-field.module-DIJdV_sA.cjs +0 -20
|
@@ -15,34 +15,33 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
30
|
-
import { property, state, query } from "lit/decorators.js";
|
|
31
|
-
import { classMap } from "lit/directives/class-map.js";
|
|
32
|
-
import { ifDefined } from "lit/directives/if-defined.js";
|
|
33
|
-
import { styleMap } from "lit/directives/style-map.js";
|
|
34
|
-
import { when } from "lit/directives/when.js";
|
|
35
|
-
import { F as Focusable } from "../focusable-ChCLg1k4.js";
|
|
36
|
-
import { S as SizedMixin, E as ElementSizes } from "../sized-mixin-DmkrNdWB.js";
|
|
37
|
-
import { luzmoAlert, luzmoCalendar } from "@luzmo/icons";
|
|
38
|
-
import "../calendar/index.js";
|
|
18
|
+
import { $ as ae, a as F, b as H, c as j, d as G, e as E, f as re, g as S, h as A, i as D, j as C, k as oe, l as ne, m as N } from "../index-Cf6G4q52.js";
|
|
19
|
+
import { $ as se } from "../NumberParser-ci9J5EKv.js";
|
|
20
|
+
import { r as Z, x as _, E as U, n as b } from "../base-CFWO09N1.js";
|
|
21
|
+
import { r as M } from "../state-DwIwYPvt.js";
|
|
22
|
+
import { e as W } from "../query-D_KR_GUc.js";
|
|
23
|
+
import { e as le } from "../class-map-CGfNk3Ee.js";
|
|
24
|
+
import { o as $ } from "../if-defined-DULpqYwi.js";
|
|
25
|
+
import { o as ce } from "../style-map-Bnhf_mVZ.js";
|
|
26
|
+
import { n as Y } from "../when-CDK1Tt5Y.js";
|
|
27
|
+
import { F as de } from "../focusable-C5JjRZmT.js";
|
|
28
|
+
import { S as ue, E as me } from "../sized-mixin-CJbBHWRQ.js";
|
|
29
|
+
import { $ as he, o as pe } from "../luzmo-icons-CiSek5iM.js";
|
|
39
30
|
import "../icon/index.js";
|
|
40
31
|
import "../overlay/index.js";
|
|
41
32
|
import "../picker-button/index.js";
|
|
42
33
|
import "../popover/index.js";
|
|
43
|
-
import { M as
|
|
44
|
-
import {
|
|
45
|
-
|
|
34
|
+
import { M as fe } from "../manage-help-text-CHfMLzSa.js";
|
|
35
|
+
import { $ as K } from "../NumberFormatter-DgOUVrge.js";
|
|
36
|
+
import { t as ve } from "../text-field.module-C2KVUJcX.js";
|
|
37
|
+
const ie = () => {
|
|
38
|
+
if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
|
|
39
|
+
const n = document.createElement("style");
|
|
40
|
+
n.setAttribute("data-luzmo-vars", ""), n.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(n);
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
ie();
|
|
44
|
+
const o = {
|
|
46
45
|
Year: "year",
|
|
47
46
|
Month: "month",
|
|
48
47
|
Day: "day",
|
|
@@ -52,109 +51,85 @@ const SegmentTypes = {
|
|
|
52
51
|
Millisecond: "fractionalSecond",
|
|
53
52
|
DayPeriod: "dayPeriod",
|
|
54
53
|
Literal: "literal"
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
[
|
|
58
|
-
[
|
|
59
|
-
[
|
|
60
|
-
[
|
|
61
|
-
[
|
|
62
|
-
[
|
|
63
|
-
[
|
|
64
|
-
|
|
65
|
-
};
|
|
66
|
-
const Precisions = {
|
|
54
|
+
}, ge = {
|
|
55
|
+
[o.Year]: "––––",
|
|
56
|
+
[o.Month]: "––",
|
|
57
|
+
[o.Day]: "––",
|
|
58
|
+
[o.Hour]: "––",
|
|
59
|
+
[o.Minute]: "––",
|
|
60
|
+
[o.Second]: "––",
|
|
61
|
+
[o.Millisecond]: "–––",
|
|
62
|
+
[o.DayPeriod]: "––"
|
|
63
|
+
}, p = {
|
|
67
64
|
Day: "day",
|
|
68
65
|
Hour: "hour",
|
|
69
66
|
Minute: "minute",
|
|
70
67
|
Second: "second",
|
|
71
68
|
Millisecond: "millisecond"
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
const DEFAULT_LEAP_YEAR = 2e3;
|
|
76
|
-
const MAX_DAYS_PER_MONTH = 31;
|
|
77
|
-
function isNumber(value) {
|
|
78
|
-
return typeof value === "number";
|
|
69
|
+
}, q = 0, V = 12, X = 2e3, ze = 31;
|
|
70
|
+
function k(n) {
|
|
71
|
+
return typeof n == "number";
|
|
79
72
|
}
|
|
80
|
-
function
|
|
81
|
-
return
|
|
73
|
+
function P(n) {
|
|
74
|
+
return n instanceof ae;
|
|
82
75
|
}
|
|
83
|
-
function
|
|
84
|
-
return
|
|
76
|
+
function B(n) {
|
|
77
|
+
return n instanceof F;
|
|
85
78
|
}
|
|
86
|
-
function
|
|
87
|
-
return
|
|
79
|
+
function L(n) {
|
|
80
|
+
return n instanceof H;
|
|
88
81
|
}
|
|
89
|
-
function
|
|
90
|
-
return
|
|
82
|
+
function J(n, e) {
|
|
83
|
+
return n = n % V + e;
|
|
91
84
|
}
|
|
92
|
-
function
|
|
93
|
-
return
|
|
85
|
+
function Q(n) {
|
|
86
|
+
return n >= V ? V : q;
|
|
94
87
|
}
|
|
95
|
-
function
|
|
96
|
-
return
|
|
88
|
+
function R(n, e) {
|
|
89
|
+
return n.length === e.length && n.every((t, i) => t === e[i]);
|
|
97
90
|
}
|
|
98
|
-
function
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
dateValue.minute,
|
|
108
|
-
dateValue.second,
|
|
109
|
-
dateValue.millisecond
|
|
91
|
+
function ee(n) {
|
|
92
|
+
return L(n) ? new Date(n.year, n.month - 1, n.day) : new Date(
|
|
93
|
+
n.year,
|
|
94
|
+
n.month - 1,
|
|
95
|
+
n.day,
|
|
96
|
+
n.hour,
|
|
97
|
+
n.minute,
|
|
98
|
+
n.second,
|
|
99
|
+
n.millisecond
|
|
110
100
|
);
|
|
111
101
|
}
|
|
112
|
-
class
|
|
113
|
-
constructor(
|
|
114
|
-
this.type =
|
|
115
|
-
this.formatted = formatted;
|
|
116
|
-
this.label = label;
|
|
117
|
-
this.placeholder = SegmentPlaceholders[type];
|
|
118
|
-
}
|
|
119
|
-
increment(_value) {
|
|
120
|
-
if (this.value === void 0) this.value = this.minValue;
|
|
121
|
-
else {
|
|
122
|
-
this.value = this.value + 1;
|
|
123
|
-
if (this.value > this.maxValue) this.value = this.minValue;
|
|
124
|
-
}
|
|
102
|
+
class y {
|
|
103
|
+
constructor(e, t, i) {
|
|
104
|
+
this.type = e, this.formatted = t, this.label = i, this.placeholder = ge[e];
|
|
125
105
|
}
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
else {
|
|
129
|
-
this.value = this.value - 1;
|
|
130
|
-
if (this.value < this.minValue) this.value = this.maxValue;
|
|
131
|
-
}
|
|
106
|
+
increment(e) {
|
|
107
|
+
this.value === void 0 ? this.value = this.minValue : (this.value = this.value + 1, this.value > this.maxValue && (this.value = this.minValue));
|
|
132
108
|
}
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
}
|
|
109
|
+
decrement(e) {
|
|
110
|
+
this.value === void 0 ? this.value = this.maxValue : (this.value = this.value - 1, this.value < this.minValue && (this.value = this.maxValue));
|
|
111
|
+
}
|
|
112
|
+
setValueFromDate(e) {
|
|
113
|
+
this.type === "fractionalSecond" ? this.value = e.millisecond : this.type !== o.DayPeriod && (this.value = e[this.type]);
|
|
139
114
|
}
|
|
140
115
|
clear() {
|
|
141
116
|
this.value = void 0;
|
|
142
117
|
}
|
|
143
|
-
handleInput(
|
|
144
|
-
const
|
|
145
|
-
if (Number.isNaN(
|
|
146
|
-
const
|
|
147
|
-
`${this.value ?? ""}${
|
|
118
|
+
handleInput(e, t) {
|
|
119
|
+
const i = t.parse(e);
|
|
120
|
+
if (Number.isNaN(i)) return;
|
|
121
|
+
const a = t.parse(
|
|
122
|
+
`${this.value ?? ""}${i}`
|
|
148
123
|
);
|
|
149
|
-
if (this.isInputValueCompliant(
|
|
150
|
-
this.value =
|
|
124
|
+
if (this.isInputValueCompliant(a)) {
|
|
125
|
+
this.value = a;
|
|
151
126
|
return;
|
|
152
127
|
}
|
|
153
|
-
|
|
128
|
+
this.isInputValueCompliant(i) && (this.value = i);
|
|
154
129
|
}
|
|
155
|
-
isInputValueCompliant(
|
|
156
|
-
const { minValue, maxValue } = this.inputValidationLimits;
|
|
157
|
-
return
|
|
130
|
+
isInputValueCompliant(e) {
|
|
131
|
+
const { minValue: t, maxValue: i } = this.inputValidationLimits;
|
|
132
|
+
return e >= t && e <= i;
|
|
158
133
|
}
|
|
159
134
|
get inputValidationLimits() {
|
|
160
135
|
return {
|
|
@@ -163,89 +138,73 @@ class EditableSegment {
|
|
|
163
138
|
};
|
|
164
139
|
}
|
|
165
140
|
updateValueToLimits() {
|
|
166
|
-
|
|
167
|
-
if (this.value < this.minValue) this.value = this.minValue;
|
|
168
|
-
if (this.value > this.maxValue) this.value = this.maxValue;
|
|
141
|
+
this.value !== void 0 && (this.value < this.minValue && (this.value = this.minValue), this.value > this.maxValue && (this.value = this.maxValue));
|
|
169
142
|
}
|
|
170
143
|
}
|
|
171
|
-
class
|
|
172
|
-
constructor(
|
|
173
|
-
super(
|
|
174
|
-
this.minValue = 1;
|
|
175
|
-
this.maxValue = 9999;
|
|
144
|
+
class te extends y {
|
|
145
|
+
constructor(e, t) {
|
|
146
|
+
super(o.Year, e, t), this.minValue = 1, this.maxValue = 9999;
|
|
176
147
|
}
|
|
177
|
-
setLimits(
|
|
178
|
-
this.minValue = 1;
|
|
179
|
-
this.maxValue = currentDate.calendar.getYearsInEra(currentDate);
|
|
180
|
-
this.updateValueToLimits();
|
|
148
|
+
setLimits(e) {
|
|
149
|
+
this.minValue = 1, this.maxValue = e.calendar.getYearsInEra(e), this.updateValueToLimits();
|
|
181
150
|
}
|
|
182
|
-
increment(
|
|
183
|
-
|
|
184
|
-
else super.increment();
|
|
151
|
+
increment(e) {
|
|
152
|
+
this.value === void 0 ? this.value = e.year : super.increment();
|
|
185
153
|
}
|
|
186
|
-
decrement(
|
|
187
|
-
|
|
188
|
-
else super.decrement();
|
|
154
|
+
decrement(e) {
|
|
155
|
+
this.value === void 0 ? this.value = e.year : super.decrement();
|
|
189
156
|
}
|
|
190
157
|
clear() {
|
|
191
158
|
if (this.value === void 0) return;
|
|
192
|
-
const
|
|
193
|
-
this.value =
|
|
159
|
+
const e = Math.floor(this.value / 10);
|
|
160
|
+
this.value = e > 0 ? e : void 0;
|
|
194
161
|
}
|
|
195
162
|
}
|
|
196
|
-
class
|
|
197
|
-
constructor(
|
|
198
|
-
this.segments =
|
|
163
|
+
class I {
|
|
164
|
+
constructor(e) {
|
|
165
|
+
this.segments = e;
|
|
199
166
|
}
|
|
200
167
|
get all() {
|
|
201
168
|
return this.segments;
|
|
202
169
|
}
|
|
203
170
|
get editableValues() {
|
|
204
|
-
return this.all.filter((
|
|
171
|
+
return this.all.filter((e) => e instanceof y).map((e) => e.value);
|
|
205
172
|
}
|
|
206
173
|
get year() {
|
|
207
|
-
const
|
|
208
|
-
if (
|
|
209
|
-
return void 0;
|
|
174
|
+
const e = this.getByType(o.Year);
|
|
175
|
+
if (e && e instanceof te) return e;
|
|
210
176
|
}
|
|
211
177
|
get month() {
|
|
212
|
-
const
|
|
213
|
-
if (
|
|
214
|
-
return;
|
|
178
|
+
const e = this.getByType(o.Month);
|
|
179
|
+
if (e) return e;
|
|
215
180
|
}
|
|
216
181
|
get day() {
|
|
217
|
-
const
|
|
218
|
-
if (
|
|
219
|
-
return;
|
|
182
|
+
const e = this.getByType(o.Day);
|
|
183
|
+
if (e) return e;
|
|
220
184
|
}
|
|
221
185
|
get hour() {
|
|
222
|
-
const
|
|
223
|
-
if (
|
|
224
|
-
return;
|
|
186
|
+
const e = this.getByType(o.Hour);
|
|
187
|
+
if (e) return e;
|
|
225
188
|
}
|
|
226
189
|
get minute() {
|
|
227
|
-
const
|
|
228
|
-
if (
|
|
229
|
-
return;
|
|
190
|
+
const e = this.getByType(o.Minute);
|
|
191
|
+
if (e) return e;
|
|
230
192
|
}
|
|
231
193
|
get second() {
|
|
232
|
-
const
|
|
233
|
-
if (
|
|
234
|
-
return;
|
|
194
|
+
const e = this.getByType(o.Second);
|
|
195
|
+
if (e) return e;
|
|
235
196
|
}
|
|
236
197
|
get millisecond() {
|
|
237
|
-
const
|
|
238
|
-
if (
|
|
239
|
-
return;
|
|
198
|
+
const e = this.getByType(o.Millisecond);
|
|
199
|
+
if (e) return e;
|
|
240
200
|
}
|
|
241
201
|
get dayPeriod() {
|
|
242
|
-
const
|
|
243
|
-
if (
|
|
244
|
-
return;
|
|
202
|
+
const e = this.getByType(o.DayPeriod);
|
|
203
|
+
if (e) return e;
|
|
245
204
|
}
|
|
246
|
-
getByType(
|
|
205
|
+
getByType(e) {
|
|
247
206
|
return this.segments.find(
|
|
248
|
-
(
|
|
207
|
+
(t) => t.type === e
|
|
249
208
|
);
|
|
250
209
|
}
|
|
251
210
|
/**
|
|
@@ -254,50 +213,46 @@ class DateTimeSegments {
|
|
|
254
213
|
*
|
|
255
214
|
* @param precision - The precision to use when creating the date object
|
|
256
215
|
*/
|
|
257
|
-
getFormattedDate(
|
|
258
|
-
var
|
|
259
|
-
const
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
if (
|
|
264
|
-
let hour = (_d = this.hour) == null ? void 0 : _d.value;
|
|
265
|
-
if (!isNumber(hour)) return;
|
|
216
|
+
getFormattedDate(e = p.Day) {
|
|
217
|
+
var c, f, v, g, h, z, x;
|
|
218
|
+
const t = (c = this.year) == null ? void 0 : c.value, i = (f = this.month) == null ? void 0 : f.value, a = (v = this.day) == null ? void 0 : v.value;
|
|
219
|
+
if (!k(t) || !k(i) || !k(a)) return;
|
|
220
|
+
if (e === p.Day) return new H(t, i, a);
|
|
221
|
+
let r = (g = this.hour) == null ? void 0 : g.value;
|
|
222
|
+
if (!k(r)) return;
|
|
266
223
|
if (this.dayPeriod) {
|
|
267
|
-
const
|
|
268
|
-
if (!
|
|
269
|
-
|
|
224
|
+
const w = this.dayPeriod.value;
|
|
225
|
+
if (!k(w)) return;
|
|
226
|
+
r = J(r, w);
|
|
270
227
|
}
|
|
271
|
-
if (
|
|
272
|
-
return new
|
|
273
|
-
const
|
|
274
|
-
if (!
|
|
275
|
-
if (
|
|
276
|
-
return new
|
|
277
|
-
const
|
|
278
|
-
if (!
|
|
279
|
-
if (
|
|
280
|
-
return new
|
|
281
|
-
const
|
|
282
|
-
if (
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
228
|
+
if (e === p.Hour)
|
|
229
|
+
return new F(t, i, a, r);
|
|
230
|
+
const s = (h = this.minute) == null ? void 0 : h.value;
|
|
231
|
+
if (!k(s)) return;
|
|
232
|
+
if (e === p.Minute)
|
|
233
|
+
return new F(t, i, a, r, s);
|
|
234
|
+
const l = (z = this.second) == null ? void 0 : z.value;
|
|
235
|
+
if (!k(l)) return;
|
|
236
|
+
if (e === p.Second)
|
|
237
|
+
return new F(t, i, a, r, s, l);
|
|
238
|
+
const d = (x = this.millisecond) == null ? void 0 : x.value;
|
|
239
|
+
if (k(d))
|
|
240
|
+
return new F(
|
|
241
|
+
t,
|
|
242
|
+
i,
|
|
243
|
+
a,
|
|
244
|
+
r,
|
|
245
|
+
s,
|
|
246
|
+
l,
|
|
247
|
+
d
|
|
248
|
+
);
|
|
292
249
|
}
|
|
293
250
|
}
|
|
294
|
-
class
|
|
295
|
-
constructor(
|
|
296
|
-
this.dateFormatter =
|
|
297
|
-
this.currentDate = currentDate;
|
|
298
|
-
this.numberFormatter = new NumberFormatter(
|
|
251
|
+
class be {
|
|
252
|
+
constructor(e, t) {
|
|
253
|
+
this.dateFormatter = e, this.currentDate = t, this.numberFormatter = new K(
|
|
299
254
|
this.dateFormatter.resolvedOptions().locale,
|
|
300
|
-
{ useGrouping:
|
|
255
|
+
{ useGrouping: !1 }
|
|
301
256
|
);
|
|
302
257
|
}
|
|
303
258
|
/**
|
|
@@ -305,246 +260,180 @@ class SegmentsFormatter {
|
|
|
305
260
|
* @param segments - `DateTimeSegments` to format
|
|
306
261
|
* @returns Formatted DateTimeSegments
|
|
307
262
|
*/
|
|
308
|
-
format(
|
|
309
|
-
if (!
|
|
310
|
-
const
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
hour,
|
|
325
|
-
minute,
|
|
326
|
-
second,
|
|
327
|
-
millisecond
|
|
263
|
+
format(e) {
|
|
264
|
+
if (!e.year || !e.month || !e.day) return e;
|
|
265
|
+
const t = this.getDateInfoWithDefaults(e);
|
|
266
|
+
return t && (this.setSegmentsFormatted(e, t), this.padSegmentsFormatted(e)), e;
|
|
267
|
+
}
|
|
268
|
+
setSegmentsFormatted(e, t) {
|
|
269
|
+
var h;
|
|
270
|
+
e = new I(e.all);
|
|
271
|
+
const { year: i, month: a, day: r, hour: s, minute: l, second: d, millisecond: c } = t, f = new Date(
|
|
272
|
+
i,
|
|
273
|
+
a - 1,
|
|
274
|
+
r,
|
|
275
|
+
s,
|
|
276
|
+
l,
|
|
277
|
+
d,
|
|
278
|
+
c
|
|
328
279
|
);
|
|
329
|
-
if (!
|
|
330
|
-
|
|
331
|
-
const
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
];
|
|
339
|
-
const
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
if (!formattedPart) continue;
|
|
347
|
-
segment.formatted = formattedPart;
|
|
280
|
+
if (!e.year) return;
|
|
281
|
+
e.year.formatted = this.numberFormatter.format(i);
|
|
282
|
+
const v = [
|
|
283
|
+
o.Month,
|
|
284
|
+
o.Day,
|
|
285
|
+
o.Hour,
|
|
286
|
+
o.Minute,
|
|
287
|
+
o.Second,
|
|
288
|
+
o.DayPeriod
|
|
289
|
+
], g = this.dateFormatter.formatToParts(f);
|
|
290
|
+
for (const z of v) {
|
|
291
|
+
const x = e[z];
|
|
292
|
+
if (!x) continue;
|
|
293
|
+
const w = (h = g.find(
|
|
294
|
+
(T) => T.type === z
|
|
295
|
+
)) == null ? void 0 : h.value;
|
|
296
|
+
w && (x.formatted = w);
|
|
348
297
|
}
|
|
349
298
|
}
|
|
350
|
-
padSegmentsFormatted(
|
|
351
|
-
if (!
|
|
352
|
-
const
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
299
|
+
padSegmentsFormatted(e) {
|
|
300
|
+
if (!e.hour) return;
|
|
301
|
+
const t = [
|
|
302
|
+
o.Month,
|
|
303
|
+
o.Day,
|
|
304
|
+
o.Hour,
|
|
305
|
+
o.Minute,
|
|
306
|
+
o.Second
|
|
358
307
|
];
|
|
359
|
-
for (const
|
|
360
|
-
const
|
|
361
|
-
|
|
362
|
-
segment.formatted = segment.formatted.padStart(
|
|
308
|
+
for (const i of t) {
|
|
309
|
+
const a = e[i];
|
|
310
|
+
a && (a.formatted = a.formatted.padStart(
|
|
363
311
|
2,
|
|
364
312
|
this.numberFormatter.format(0)
|
|
365
|
-
);
|
|
313
|
+
));
|
|
366
314
|
}
|
|
367
315
|
}
|
|
368
|
-
getDateInfoWithDefaults(
|
|
369
|
-
var
|
|
370
|
-
if (!
|
|
371
|
-
const
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
const
|
|
375
|
-
|
|
376
|
-
if (!isNumber(hour)) {
|
|
377
|
-
hour = isNumber(dayPeriod) ? dayPeriod : this.currentDate.hour;
|
|
378
|
-
} else if (isNumber(dayPeriod)) {
|
|
379
|
-
hour = convertHourTo24hFormat(hour, dayPeriod);
|
|
380
|
-
}
|
|
381
|
-
const minute = ((_c = segments.minute) == null ? void 0 : _c.value) ?? this.currentDate.minute;
|
|
382
|
-
const second = ((_d = segments.second) == null ? void 0 : _d.value) ?? this.currentDate.second;
|
|
383
|
-
const millisecond = ((_e = segments.millisecond) == null ? void 0 : _e.value) ?? this.currentDate.millisecond;
|
|
384
|
-
return { year, month, day, hour, minute, second, millisecond };
|
|
316
|
+
getDateInfoWithDefaults(e) {
|
|
317
|
+
var f, v, g, h, z;
|
|
318
|
+
if (!e.year || !e.month || !e.day) return;
|
|
319
|
+
const t = e.day.value ?? j(this.currentDate), i = e.month.value ?? G(this.currentDate), a = e.year.value ?? X, r = (f = e.dayPeriod) == null ? void 0 : f.value;
|
|
320
|
+
let s = (v = e.hour) == null ? void 0 : v.value;
|
|
321
|
+
k(s) ? k(r) && (s = J(s, r)) : s = k(r) ? r : this.currentDate.hour;
|
|
322
|
+
const l = ((g = e.minute) == null ? void 0 : g.value) ?? this.currentDate.minute, d = ((h = e.second) == null ? void 0 : h.value) ?? this.currentDate.second, c = ((z = e.millisecond) == null ? void 0 : z.value) ?? this.currentDate.millisecond;
|
|
323
|
+
return { year: a, month: i, day: t, hour: s, minute: l, second: d, millisecond: c };
|
|
385
324
|
}
|
|
386
325
|
}
|
|
387
|
-
class
|
|
388
|
-
constructor(
|
|
389
|
-
const { dateFormatter, segments, currentDate } =
|
|
390
|
-
this.segments = new
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
this.modifySegment(segment);
|
|
398
|
-
this.updateSegmentsLimits(segmentType);
|
|
399
|
-
const segmentsFormatter = new SegmentsFormatter(
|
|
326
|
+
class O {
|
|
327
|
+
constructor(e) {
|
|
328
|
+
const { dateFormatter: t, segments: i, currentDate: a } = e;
|
|
329
|
+
this.segments = new I(i.all), this.dateFormatter = t, this.currentDate = a;
|
|
330
|
+
}
|
|
331
|
+
modify(e) {
|
|
332
|
+
const t = this.segments.getByType(e);
|
|
333
|
+
if (!t) return this.segments;
|
|
334
|
+
this.modifySegment(t), this.updateSegmentsLimits(e);
|
|
335
|
+
const i = new be(
|
|
400
336
|
this.dateFormatter,
|
|
401
337
|
this.currentDate
|
|
402
338
|
);
|
|
403
|
-
this.segments =
|
|
404
|
-
return this.segments;
|
|
339
|
+
return this.segments = i.format(this.segments), this.segments;
|
|
405
340
|
}
|
|
406
|
-
updateSegmentsLimits(
|
|
407
|
-
const
|
|
408
|
-
|
|
409
|
-
const year = this.segments.year;
|
|
410
|
-
const month = this.segments.month;
|
|
411
|
-
const day = this.segments.day;
|
|
412
|
-
if (changedYear) {
|
|
413
|
-
month == null ? void 0 : month.setLimits(this.currentDate);
|
|
414
|
-
day == null ? void 0 : day.setLimits(this.currentDate, month == null ? void 0 : month.value, year == null ? void 0 : year.value);
|
|
415
|
-
}
|
|
416
|
-
if (changedMonth)
|
|
417
|
-
day == null ? void 0 : day.setLimits(this.currentDate, month == null ? void 0 : month.value, year == null ? void 0 : year.value);
|
|
341
|
+
updateSegmentsLimits(e) {
|
|
342
|
+
const t = e === o.Year, i = e === o.Month, a = this.segments.year, r = this.segments.month, s = this.segments.day;
|
|
343
|
+
t && (r == null || r.setLimits(this.currentDate), s == null || s.setLimits(this.currentDate, r == null ? void 0 : r.value, a == null ? void 0 : a.value)), i && (s == null || s.setLimits(this.currentDate, r == null ? void 0 : r.value, a == null ? void 0 : a.value));
|
|
418
344
|
}
|
|
419
345
|
}
|
|
420
|
-
class
|
|
421
|
-
modifySegment(
|
|
422
|
-
|
|
346
|
+
class ke extends O {
|
|
347
|
+
modifySegment(e) {
|
|
348
|
+
e.clear();
|
|
423
349
|
}
|
|
424
350
|
}
|
|
425
|
-
class
|
|
426
|
-
modifySegment(
|
|
427
|
-
|
|
351
|
+
class xe extends O {
|
|
352
|
+
modifySegment(e) {
|
|
353
|
+
e.decrement(this.currentDate);
|
|
428
354
|
}
|
|
429
355
|
}
|
|
430
|
-
class
|
|
431
|
-
modifySegment(
|
|
432
|
-
|
|
356
|
+
class ye extends O {
|
|
357
|
+
modifySegment(e) {
|
|
358
|
+
e.increment(this.currentDate);
|
|
433
359
|
}
|
|
434
360
|
}
|
|
435
|
-
class
|
|
436
|
-
constructor(
|
|
437
|
-
const { dateFormatter, segments, currentDate } =
|
|
438
|
-
super({ dateFormatter, segments, currentDate });
|
|
439
|
-
this.eventData = params.eventData;
|
|
440
|
-
this.numberParser = params.numberParser;
|
|
361
|
+
class we extends O {
|
|
362
|
+
constructor(e) {
|
|
363
|
+
const { dateFormatter: t, segments: i, currentDate: a } = e;
|
|
364
|
+
super({ dateFormatter: t, segments: i, currentDate: a }), this.eventData = e.eventData, this.numberParser = e.numberParser;
|
|
441
365
|
}
|
|
442
|
-
modifySegment(
|
|
443
|
-
|
|
444
|
-
segment.handleInput(this.eventData, this.numberParser);
|
|
366
|
+
modifySegment(e) {
|
|
367
|
+
this.eventData !== null && e.handleInput(this.eventData, this.numberParser);
|
|
445
368
|
}
|
|
446
369
|
}
|
|
447
|
-
class
|
|
448
|
-
constructor(
|
|
449
|
-
super(
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
if (!isNumber(month)) {
|
|
455
|
-
this.minValue = 1;
|
|
456
|
-
this.maxValue = MAX_DAYS_PER_MONTH;
|
|
370
|
+
class Se extends y {
|
|
371
|
+
constructor(e, t) {
|
|
372
|
+
super(o.Day, e, t), this.minValue = 1, this.maxValue = 31;
|
|
373
|
+
}
|
|
374
|
+
setLimits(e, t, i) {
|
|
375
|
+
if (!k(t)) {
|
|
376
|
+
this.minValue = 1, this.maxValue = ze;
|
|
457
377
|
return;
|
|
458
378
|
}
|
|
459
|
-
|
|
460
|
-
const
|
|
461
|
-
this.maxValue =
|
|
462
|
-
this.minValue = getMinimumDayInMonth(dateToUse);
|
|
463
|
-
this.updateValueToLimits();
|
|
379
|
+
k(i) || (i = X);
|
|
380
|
+
const a = new H(i, t, 1);
|
|
381
|
+
this.maxValue = e.calendar.getDaysInMonth(a), this.minValue = j(a), this.updateValueToLimits();
|
|
464
382
|
}
|
|
465
383
|
}
|
|
466
|
-
class
|
|
467
|
-
constructor(
|
|
468
|
-
super(
|
|
469
|
-
this.minValue = 1;
|
|
470
|
-
this.maxValue = 12;
|
|
384
|
+
class De extends y {
|
|
385
|
+
constructor(e, t) {
|
|
386
|
+
super(o.Month, e, t), this.minValue = 1, this.maxValue = 12;
|
|
471
387
|
}
|
|
472
|
-
setLimits(
|
|
473
|
-
this.minValue =
|
|
474
|
-
this.maxValue = currentDate.calendar.getMonthsInYear(currentDate);
|
|
475
|
-
this.updateValueToLimits();
|
|
388
|
+
setLimits(e) {
|
|
389
|
+
this.minValue = G(e), this.maxValue = e.calendar.getMonthsInYear(e), this.updateValueToLimits();
|
|
476
390
|
}
|
|
477
391
|
}
|
|
478
|
-
class
|
|
479
|
-
constructor(
|
|
480
|
-
this.formatted =
|
|
481
|
-
this.type = SegmentTypes.Literal;
|
|
392
|
+
class _e {
|
|
393
|
+
constructor(e) {
|
|
394
|
+
this.formatted = e, this.type = o.Literal;
|
|
482
395
|
}
|
|
483
396
|
}
|
|
484
|
-
class
|
|
485
|
-
constructor(
|
|
486
|
-
super(
|
|
487
|
-
this.minValue = AM;
|
|
488
|
-
this.maxValue = PM;
|
|
489
|
-
this.localizedMinValue = "AM";
|
|
490
|
-
this.localizedMaxValue = "PM";
|
|
397
|
+
class Ve extends y {
|
|
398
|
+
constructor(e, t) {
|
|
399
|
+
super(o.DayPeriod, e, t), this.minValue = q, this.maxValue = V, this.localizedMinValue = "AM", this.localizedMaxValue = "PM";
|
|
491
400
|
}
|
|
492
401
|
toggleAmPm() {
|
|
493
|
-
this.value = this.value ===
|
|
402
|
+
this.value = this.value === q ? V : q;
|
|
494
403
|
}
|
|
495
404
|
increment() {
|
|
496
|
-
|
|
497
|
-
else this.toggleAmPm();
|
|
405
|
+
this.value === void 0 ? this.value = this.minValue : this.toggleAmPm();
|
|
498
406
|
}
|
|
499
407
|
decrement() {
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
if (isCharFromPM) this.value = PM;
|
|
513
|
-
return;
|
|
514
|
-
}
|
|
515
|
-
setLocalizedLimits(dateFormatter) {
|
|
516
|
-
const amDate = new Date(0, 0, 0, this.minValue, 0);
|
|
517
|
-
const pmDate = new Date(0, 0, 0, this.maxValue, 0);
|
|
518
|
-
const [am, pm] = [amDate, pmDate].map(
|
|
519
|
-
this.getDayPeriodFromDate.bind(this, dateFormatter)
|
|
408
|
+
this.value === void 0 ? this.value = this.maxValue : this.toggleAmPm();
|
|
409
|
+
}
|
|
410
|
+
setValueFromDate(e) {
|
|
411
|
+
this.value = Q(e.hour);
|
|
412
|
+
}
|
|
413
|
+
handleInput(e) {
|
|
414
|
+
const t = e.toLowerCase(), i = this.localizedMinValue.toLowerCase().includes(t), a = this.localizedMaxValue.toLowerCase().includes(t);
|
|
415
|
+
i && a || (i && (this.value = q), a && (this.value = V));
|
|
416
|
+
}
|
|
417
|
+
setLocalizedLimits(e) {
|
|
418
|
+
const t = new Date(0, 0, 0, this.minValue, 0), i = new Date(0, 0, 0, this.maxValue, 0), [a, r] = [t, i].map(
|
|
419
|
+
this.getDayPeriodFromDate.bind(this, e)
|
|
520
420
|
);
|
|
521
|
-
|
|
522
|
-
if (pm) this.localizedMaxValue = pm;
|
|
421
|
+
a && (this.localizedMinValue = a), r && (this.localizedMaxValue = r);
|
|
523
422
|
}
|
|
524
|
-
getDayPeriodFromDate(
|
|
525
|
-
var
|
|
526
|
-
return (
|
|
423
|
+
getDayPeriodFromDate(e, t) {
|
|
424
|
+
var i;
|
|
425
|
+
return (i = e.formatToParts(t).find((a) => a.type === this.type)) == null ? void 0 : i.value;
|
|
527
426
|
}
|
|
528
427
|
}
|
|
529
|
-
class
|
|
530
|
-
constructor(
|
|
531
|
-
super(
|
|
532
|
-
this.minValue = 0;
|
|
533
|
-
this.maxValue = 23;
|
|
534
|
-
}
|
|
535
|
-
setLimits(is12HourClock) {
|
|
536
|
-
this.minValue = 0;
|
|
537
|
-
this.maxValue = 23;
|
|
538
|
-
if (is12HourClock) {
|
|
539
|
-
this.minValue = 0;
|
|
540
|
-
this.maxValue = 11;
|
|
541
|
-
}
|
|
542
|
-
this.updateValueToLimits();
|
|
428
|
+
class $e extends y {
|
|
429
|
+
constructor(e, t) {
|
|
430
|
+
super(o.Hour, e, t), this.minValue = 0, this.maxValue = 23;
|
|
543
431
|
}
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
432
|
+
setLimits(e) {
|
|
433
|
+
this.minValue = 0, this.maxValue = 23, e && (this.minValue = 0, this.maxValue = 11), this.updateValueToLimits();
|
|
434
|
+
}
|
|
435
|
+
setValueFromDate(e, t) {
|
|
436
|
+
t ? this.value = e.hour - Q(e.hour) : super.setValueFromDate(e);
|
|
548
437
|
}
|
|
549
438
|
/**
|
|
550
439
|
* Returns the limits used to validate a user typed-in value.
|
|
@@ -554,42 +443,35 @@ class HourSegment extends EditableSegment {
|
|
|
554
443
|
* for the 00 time, which is represented by the value of 0 of the hour segment.
|
|
555
444
|
*/
|
|
556
445
|
get inputValidationLimits() {
|
|
557
|
-
const
|
|
446
|
+
const e = this.maxValue === 11;
|
|
558
447
|
return {
|
|
559
|
-
minValue:
|
|
560
|
-
maxValue:
|
|
448
|
+
minValue: e ? 1 : 0,
|
|
449
|
+
maxValue: e ? 12 : 23
|
|
561
450
|
};
|
|
562
451
|
}
|
|
563
452
|
}
|
|
564
|
-
class
|
|
565
|
-
constructor(
|
|
566
|
-
super(
|
|
567
|
-
this.minValue = 0;
|
|
568
|
-
this.maxValue = 999;
|
|
453
|
+
class Pe extends y {
|
|
454
|
+
constructor(e, t) {
|
|
455
|
+
super(o.Millisecond, e, t), this.minValue = 0, this.maxValue = 999;
|
|
569
456
|
}
|
|
570
457
|
}
|
|
571
|
-
class
|
|
572
|
-
constructor(
|
|
573
|
-
super(
|
|
574
|
-
this.minValue = 0;
|
|
575
|
-
this.maxValue = 59;
|
|
458
|
+
class Fe extends y {
|
|
459
|
+
constructor(e, t) {
|
|
460
|
+
super(o.Minute, e, t), this.minValue = 0, this.maxValue = 59;
|
|
576
461
|
}
|
|
577
462
|
}
|
|
578
|
-
class
|
|
579
|
-
constructor(
|
|
580
|
-
super(
|
|
581
|
-
this.minValue = 0;
|
|
582
|
-
this.maxValue = 59;
|
|
463
|
+
class qe extends y {
|
|
464
|
+
constructor(e, t) {
|
|
465
|
+
super(o.Second, e, t), this.minValue = 0, this.maxValue = 59;
|
|
583
466
|
}
|
|
584
467
|
}
|
|
585
|
-
class
|
|
586
|
-
constructor(
|
|
587
|
-
this.dateFormatter =
|
|
588
|
-
const
|
|
589
|
-
this.numberFormatter = new
|
|
590
|
-
useGrouping:
|
|
591
|
-
})
|
|
592
|
-
this.dateTimeFieldDisplayNames = new Intl.DisplayNames([locale], {
|
|
468
|
+
class Me {
|
|
469
|
+
constructor(e) {
|
|
470
|
+
this.dateFormatter = e;
|
|
471
|
+
const t = this.dateFormatter.resolvedOptions().locale;
|
|
472
|
+
this.numberFormatter = new K(t, {
|
|
473
|
+
useGrouping: !1
|
|
474
|
+
}), this.dateTimeFieldDisplayNames = new Intl.DisplayNames([t], {
|
|
593
475
|
type: "dateTimeField"
|
|
594
476
|
});
|
|
595
477
|
}
|
|
@@ -598,150 +480,87 @@ class SegmentsFactory {
|
|
|
598
480
|
* @param currentDate - The date to create the segments from. This is used to set the limits and values of the segments.
|
|
599
481
|
* @param setValues - If true, the segments will have their values set from the currentDate. If false, the segments will have no values.
|
|
600
482
|
*/
|
|
601
|
-
createSegments(
|
|
602
|
-
const
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
const
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
year.setLimits(currentDate);
|
|
615
|
-
month.setLimits(currentDate);
|
|
616
|
-
if (setValues) {
|
|
617
|
-
year.setValueFromDate(currentDate);
|
|
618
|
-
month.setValueFromDate(currentDate);
|
|
483
|
+
createSegments(e, t = !1) {
|
|
484
|
+
const i = ee(e), a = this.dateFormatter.formatToParts(i).map((x) => {
|
|
485
|
+
const w = x.type;
|
|
486
|
+
let T = x.value;
|
|
487
|
+
return w === "year" && (T = this.numberFormatter.format(e.year)), this.createSegment(w, T);
|
|
488
|
+
}), r = new I(a), s = r.year, l = r.month, d = r.day;
|
|
489
|
+
s.setLimits(e), l.setLimits(e), t && (s.setValueFromDate(e), l.setValueFromDate(e)), d.setLimits(e, l.value, s.value), t && d.setValueFromDate(e);
|
|
490
|
+
const c = r.hour, f = r.minute, v = r.second, g = r.millisecond, h = r.dayPeriod;
|
|
491
|
+
if (h && h.setLocalizedLimits(this.dateFormatter), !c) return r;
|
|
492
|
+
const z = !!h;
|
|
493
|
+
if (c.setLimits(z), t) {
|
|
494
|
+
if (c.setValueFromDate(e, z), z && r.dayPeriod.setValueFromDate(e), !f || (f.setValueFromDate(e), !v) || (v.setValueFromDate(e), !g)) return r;
|
|
495
|
+
g.setValueFromDate(e);
|
|
619
496
|
}
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
const
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
millisecond.setValueFromDate(currentDate);
|
|
643
|
-
}
|
|
644
|
-
return segments;
|
|
645
|
-
}
|
|
646
|
-
createSegment(type, formatted) {
|
|
647
|
-
if (type === SegmentTypes.Literal) return new LiteralSegment(formatted);
|
|
648
|
-
const label = this.displayNameOfType(type);
|
|
649
|
-
switch (type) {
|
|
650
|
-
case SegmentTypes.Year: {
|
|
651
|
-
return new YearSegment(formatted, label);
|
|
652
|
-
}
|
|
653
|
-
case SegmentTypes.Month: {
|
|
654
|
-
return new MonthSegment(formatted, label);
|
|
655
|
-
}
|
|
656
|
-
case SegmentTypes.Day: {
|
|
657
|
-
return new DaySegment(formatted, label);
|
|
658
|
-
}
|
|
659
|
-
case SegmentTypes.Hour: {
|
|
660
|
-
return new HourSegment(formatted, label);
|
|
661
|
-
}
|
|
662
|
-
case SegmentTypes.Minute: {
|
|
663
|
-
return new MinuteSegment(formatted, label);
|
|
664
|
-
}
|
|
665
|
-
case SegmentTypes.Second: {
|
|
666
|
-
return new SecondSegment(formatted, label);
|
|
667
|
-
}
|
|
668
|
-
case SegmentTypes.Millisecond: {
|
|
669
|
-
return new MillisecondSegment(formatted, label);
|
|
670
|
-
}
|
|
671
|
-
case SegmentTypes.DayPeriod: {
|
|
672
|
-
return new DayPeriodSegment(formatted, label);
|
|
673
|
-
}
|
|
497
|
+
return r;
|
|
498
|
+
}
|
|
499
|
+
createSegment(e, t) {
|
|
500
|
+
if (e === o.Literal) return new _e(t);
|
|
501
|
+
const i = this.displayNameOfType(e);
|
|
502
|
+
switch (e) {
|
|
503
|
+
case o.Year:
|
|
504
|
+
return new te(t, i);
|
|
505
|
+
case o.Month:
|
|
506
|
+
return new De(t, i);
|
|
507
|
+
case o.Day:
|
|
508
|
+
return new Se(t, i);
|
|
509
|
+
case o.Hour:
|
|
510
|
+
return new $e(t, i);
|
|
511
|
+
case o.Minute:
|
|
512
|
+
return new Fe(t, i);
|
|
513
|
+
case o.Second:
|
|
514
|
+
return new qe(t, i);
|
|
515
|
+
case o.Millisecond:
|
|
516
|
+
return new Pe(t, i);
|
|
517
|
+
case o.DayPeriod:
|
|
518
|
+
return new Ve(t, i);
|
|
674
519
|
}
|
|
675
520
|
}
|
|
676
|
-
displayNameOfType(
|
|
677
|
-
const
|
|
678
|
-
|
|
679
|
-
return label.charAt(0).toUpperCase() + label.slice(1);
|
|
521
|
+
displayNameOfType(e) {
|
|
522
|
+
const t = e === "fractionalSecond" ? "millisecond" : this.dateTimeFieldDisplayNames.of(e);
|
|
523
|
+
return t ? t.charAt(0).toUpperCase() + t.slice(1) : "";
|
|
680
524
|
}
|
|
681
525
|
}
|
|
682
|
-
const dateTimePickerStyles = '@charset "UTF-8";:host{font-family:var(--luzmo-font-family);--date-time-picker-border-radius: var( --luzmo-date-time-picker-border-radius, var(--luzmo-border-radius) );--date-time-picker-border-radius-quiet: var( --luzmo-date-time-picker-border-radius-quiet, 0 );--date-time-picker-border-width: var(--luzmo-border-width);--date-time-picker-button-border-color: var( --highcontrast-datepicker-pickerbutton-border-color, var( --luzmo-date-time-picker-pickerbutton-border-color, var(--luzmo-border-color) ) );--date-time-picker-button-border-color-focus: var( --highcontrast-datepicker-pickerbutton-border-color, var( --luzmo-date-time-picker-pickerbutton-border-color-focus, var(--luzmo-primary) ) );--date-time-picker-button-border-color-invalid: var( --highcontrast-datepicker-pickerbutton-border-color, var( --luzmo-date-time-picker-pickerbutton-border-color-invalid, var(--luzmo-negative-color) ) );--date-time-picker-button-width: calc( var(--date-time-picker-edge-to-disclosure-icon) * 2 + var(--date-time-picker-icon-size) );--date-time-picker-quiet-button-offset: var( --luzmo-date-time-picker-quiet-button-offset, var(--date-time-picker-text-to-visual) );--date-time-picker-icon-to-text: var(--date-time-picker-edge-to-text);--date-time-picker-button-width-quiet: calc( var(--date-time-picker-button-width) - var( --date-time-picker-quiet-button-offset ) );--date-time-picker-focus-ring-gap: var( --luzmo-date-time-picker-focus-ring-gap, var(--luzmo-indicator-gap) );--date-time-picker-focus-thickness: var( --luzmo-date-time-picker-focus-thickness, var(--luzmo-indicator-width) );--date-time-picker-focus-animation: var( --luzmo-date-time-picker-focus-animation, var(--luzmo-animation-duration) );--date-time-picker-focus-ring-width: var( --luzmo-date-time-picker-focus-ring-width, var(--luzmo-border-width) );--date-time-picker-focus-ring-color: var( --highcontrast-datepicker-focus-ring-color, var(--luzmo-date-time-picker-focus-ring-color, var(--luzmo-indicator-color)) );--date-time-picker-focus-line-gap: var( --luzmo-date-time-picker-focus-line-gap, var(--luzmo-spacing-2) );--date-time-picker-invalid-quiet-color: var( --luzmo-date-time-picker-invalid-quiet-color, var(--luzmo-negative-color) );--date-time-picker-quiet-border-color-hover: var( --luzmo-date-time-picker-quiet-border-color-hover, var(--luzmo-border-color-hover) );--date-time-picker-border-color-disabled: var( --luzmo-date-time-picker-border-color-disabled, var(--luzmo-border-color-disabled) );--date-time-picker-dash-font-size: var( --luzmo-date-time-picker-dash-font-size, var(--date-time-picker-dash-font-size) );--date-time-picker-dash-color: var( --highcontrast-datepicker-dash-color, var(--luzmo-date-time-picker-dash-color, var(--luzmo-font-color)) );--date-time-picker-range-dash-padding-top: var( --luzmo-date-time-picker-range-dash-padding-top, 0 );--date-time-picker-range-dash-margin-inline-start: var( --luzmo-date-time-picker-range-dash-margin-left, calc(var(--date-time-picker-dash-font-size) * -.5) );--date-time-picker-range-input-width-first: var( --luzmo-date-time-picker-range-input-width-first, calc( var(--date-time-picker-initial-width) - var( --date-time-picker-generic-padding ) * 2 ) );--date-time-picker-input-width-base: calc( var(--date-time-picker-range-input-width-first) + var(--date-time-picker-icon-size) );--date-time-picker-input-width: var( --luzmo-date-time-picker-input-width, calc( var(--date-time-picker-input-width-base) + var(--date-time-picker-initial-height) ) );--date-time-picker-range-input-width-quiet-first: var( --luzmo-date-time-picker-range-input-width-quiet-first, calc( var(--date-time-picker-width-quiet-first) + var(--date-time-picker-width-quiet-second) ) );--date-time-picker-input-width-quiet: var( --luzmo-date-time-picker-input-width-quiet, calc( var(--date-time-picker-range-input-width-quiet-first) + var(--date-time-picker-icon-size) + var(--date-time-picker-initial-height) ) );--date-time-picker-datetime-input-width-first: var( --luzmo-date-time-picker-datetime-input-width-first, calc( var(--date-time-picker-input-width-base) + var(--date-time-picker-datetime-width-first) ) );--date-time-picker-datetime-input-width: var( --luzmo-date-time-picker-datetime-input-width, calc( var(--date-time-picker-datetime-input-width-first) + var(--date-time-picker-icon-size) + var(--date-time-picker-initial-height) ) );--date-time-picker-datetime-quiet-input-width-first: var( --luzmo-date-time-picker-datetime-quiet-input-width-first, calc( var(--date-time-picker-input-width-base) + var(--date-time-picker-input-datetime-width) ) );--date-time-picker-datetime-quiet-input-width: var( --luzmo-date-time-picker-datetime-quiet-input-width, calc( var(--date-time-picker-datetime-quiet-input-width-first) + var(--date-time-picker-icon-size) + var(--date-time-picker-initial-height) ) );--date-time-picker-padding-inline-end: var( --luzmo-date-time-picker-padding-inline, calc( var(--date-time-picker-button-width) + var(--date-time-picker-edge-to-text) - var( --date-time-picker-border-width ) * 2 ) );--date-time-picker-padding-inline-end-quiet: var( --luzmo-date-time-picker-padding-inline-quiet, calc( var(--date-time-picker-button-width) + var(--date-time-picker-edge-to-text) - var( --date-time-picker-quiet-button-offset ) ) );--date-time-picker-padding-inline-end-invalid-quiet: var( --luzmo-date-time-picker-padding-inline-end-invalid-quiet, calc( var(--date-time-picker-button-width-quiet) + var(--date-time-picker-icon-size) + var(--date-time-picker-icon-to-text) ) );min-inline-size:var(--luzmo-date-time-picker-min-width, var(--date-time-picker-min-width));border-radius:var(--date-time-picker-border-radius);flex-flow:row;display:inline-flex;position:relative}:host([disabled]) luzmo-picker-button{cursor:default}:host([disabled]){--luzmo-date-time-picker-dash-color: var( --luzmo-date-time-picker-dash-color-disabled, var(--disabled-content-color) );--luzmo-text-field-border-color-disabled: transparent}:host([invalid]),:host([invalid]) #text-field .icon{--luzmo-text-field-icon-spacing-inline-end-invalid: calc( var(--date-time-picker-button-width) + var(--date-time-picker-invalid-icon-to-button) );--luzmo-text-field-icon-spacing-inline-end-quiet-invalid: calc( var(--date-time-picker-button-width-quiet) + var(--date-time-picker-invalid-icon-to-button-quiet) )}:host(:not([quiet])){inline-size:var(--luzmo-date-time-picker-width, var(--date-time-picker-width))}:host([quiet]){inline-size:var(--luzmo-date-time-picker-width-quiet, var(--date-time-picker-width-quiet, var(--date-time-picker-width)))}:host(:not([quiet],[disabled])){--luzmo-picker-button-border-color: var( --date-time-picker-button-border-color )}:host([focused]),:host([focused]:not([quiet],[disabled])){--luzmo-picker-button-border-color: var( --date-time-picker-button-border-color-focus )}:host([invalid]:not([quiet],[disabled])){--luzmo-picker-button-border-color: var( --date-time-picker-button-border-color-invalid )}.input{inline-size:100%;flex:1;padding-inline-end:var(--date-time-picker-padding-inline-end);border-color:var(--luzmo-date-time-picker-border-color, var(--datepicker-border-color))}:host .input:read-only{border-color:var(--luzmo-date-time-picker-border-color, var(--datepicker-border-color))}.input.luzmo-DatePicker-startField{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0;padding-inline-end:var(--luzmo-date-time-picker-generic-padding, var(--date-time-picker-generic-padding))}.input.luzmo-DatePicker-endField{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0;padding-inline-start:var(--luzmo-date-time-picker-generic-padding, var(--date-time-picker-generic-padding))}luzmo-picker-button{cursor:pointer;position:absolute;inset-inline-end:0}.luzmo-DatePicker-rangeDash{color:var(--date-time-picker-dash-color);line-height:var(--luzmo-date-time-picker-dash-line-height, var(--date-time-picker-dash-line-height));flex:initial;inline-size:0;z-index:1;padding-block-start:var(--date-time-picker-range-dash-padding-top)}.luzmo-DatePicker-rangeDash:before{content:"–";margin-block:0;margin-inline:var(--date-time-picker-range-dash-margin-inline-start);text-align:center;vertical-align:middle;inline-size:var(--date-time-picker-dash-font-size);display:inline-block;overflow:hidden}:host([quiet]){--luzmo-date-time-picker-border-radius: var( --date-time-picker-border-radius-quiet );--luzmo-date-time-picker-padding-inline: var( --date-time-picker-padding-inline-end-quiet );--luzmo-picker-button-border-color-disabled: var( --date-time-picker-border-color-disabled );--luzmo-picker-button-background-color-hover-disabled: var( --date-time-picker-border-color-disabled )}:host([quiet][disabled]){--luzmo-text-field-border-color-disabled: var( --date-time-picker-border-color-disabled )}:host([quiet][invalid]) .input:not(.luzmo-DatePicker-startField){padding-inline-end:var(--date-time-picker-padding-inline-end-invalid-quiet)}@media (hover: hover){:host(:hover):not([focused],[disabled],[invalid]){--luzmo-picker-button-border-color: var( --date-time-picker-quiet-border-color-hover )}}:host([quiet][invalid]){--luzmo-picker-button-border-color: var( --date-time-picker-invalid-quiet-color )}:host([quiet]) luzmo-picker-button{inline-size:auto;inset-inline-end:calc(var(--date-time-picker-quiet-button-offset) * -1)}:host([quiet]) luzmo-picker-button:not(.is-open){--luzmo-picker-button-border-color-disabled: transparent}:host([quiet]) luzmo-picker-button:not(:disabled,.is-open){--luzmo-picker-button-background-color: transparent}.luzmo-DatePicker--range{--luzmo-date-time-picker-border-radius: var(--date-time-picker-border-radius)}.luzmo-DatePicker--range:after{pointer-events:none;content:"";margin:calc(var(--date-time-picker-focus-ring-gap) * -1);border-radius:calc(var(--date-time-picker-border-radius) + var(--date-time-picker-focus-ring-gap));transition:box-shadow var(--date-time-picker-focus-animation) ease-in-out,border-color var(--date-time-picker-focus-animation) ease-in-out;border-color:#0000;position:absolute;top:0;right:0;bottom:0;left:0}:host([focused]) .luzmo-DatePicker--range:not(.luzmo-DatePicker--quiet):after{box-shadow:0 0 0 var(--date-time-picker-focus-ring-width) var(--date-time-picker-focus-ring-color)}:host([focused]) .luzmo-DatePicker--range:not(.luzmo-DatePicker--quiet) #text-field:after{display:none}:host([quiet]) .luzmo-DatePicker--range{--luzmo-date-time-picker-border-radius: var( --date-time-picker-border-radius-quiet )}:host([quiet][focused]) .luzmo-DatePicker--range:after{box-shadow:none;border-block-end:var(--date-time-picker-focus-thickness) solid var(--date-time-picker-focus-ring-color);border-radius:0;margin:0;inset-block-end:calc(var(--date-time-picker-focus-line-gap) * -1)}:host([quiet]) .luzmo-DatePicker--range #text-field{min-inline-size:0;inline-size:var(--date-time-picker-input-width-quiet)}:host([quiet]) .luzmo-DatePicker--range #text-field:first-of-type{inline-size:var(--date-time-picker-range-input-width-quiet-first)}.luzmo-DatePicker--range.luzmo-DatePicker--datetimeRange #text-field{inline-size:var(--date-time-picker-datetime-input-width);min-inline-size:0}.luzmo-DatePicker--range.luzmo-DatePicker--datetimeRange #text-field:first-of-type{inline-size:var(--date-time-picker-datetime-input-width-first)}:host([quiet]) .luzmo-DatePicker--range.luzmo-DatePicker--datetimeRange #text-field{inline-size:var(--date-time-picker-datetime-quiet-input-width)}:host([quiet]) .luzmo-DatePicker--range.luzmo-DatePicker--datetimeRange #text-field:first-of-type{inline-size:var(--date-time-picker-datetime-quiet-input-width-first)}.luzmo-DatePicker--range #text-field{flex:initial;min-inline-size:0;inline-size:var(--date-time-picker-input-width)}.luzmo-DatePicker--range #text-field:first-of-type{inline-size:var(--date-time-picker-range-input-width-first)}@media (forced-colors: active){:host{--highcontrast-datepicker-dash-color: CanvasText;--highcontrast-datepicker-focus-ring-color: Highlight;--highcontrast-datepicker-pickerbutton-border-color: Highlight}:host([disabled]){--highcontrast-datepicker-dash-color: GrayText}:host([quiet][invalid]){--highcontrast-datepicker-pickerbutton-border-color: Highlight}}:host{--date-time-picker-width: auto;--date-time-picker-initial-height: var(--system-date-picker-initial-height);--date-time-picker-font-color-default: var(--luzmo-font-color);--datepicker-border-color: var(--luzmo-border-color);--date-time-picker-button-indicator-color: var(--luzmo-indicator-color);--text-field-focus-indicator-color: var(--luzmo-background-color-highlight);--date-time-picker-initial-width: 120px;--date-time-picker-min-width: 160px;--date-time-picker-calendar-padding: var(--luzmo-spacing-4);--date-time-picker-icon-size: 18px;--date-time-picker-dash-font-size: var(--luzmo-font-size);--date-time-picker-text-to-visual: var(--luzmo-spacing-3);--date-time-picker-edge-to-disclosure-icon: var(--luzmo-spacing-3);--date-time-picker-edge-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-icon-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-invalid-icon-to-button: var(--luzmo-spacing-3);--date-time-picker-generic-padding: var(--luzmo-spacing-4)}:host([size=s]){--date-time-picker-min-width: 140px;--date-time-picker-calendar-padding: var(--luzmo-spacing-3);--date-time-picker-icon-size: 16px;--date-time-picker-dash-font-size: var(--luzmo-font-size-s);--date-time-picker-text-to-visual: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--date-time-picker-edge-to-disclosure-icon: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--date-time-picker-edge-to-text: var(--luzmo-spacing-3);--date-time-picker-invalid-icon-to-button: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--date-time-picker-icon-to-text: var(--luzmo-spacing-3)}:host([invalid][size=s]){--text-field-icon-spacing-block-invalid: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([size=m]){--date-time-picker-min-width: 160px;--date-time-picker-calendar-padding: var(--luzmo-spacing-4);--date-time-picker-icon-size: 18px;--date-time-picker-dash-font-size: var(--luzmo-font-size-m);--date-time-picker-text-to-visual: var(--luzmo-spacing-3);--date-time-picker-edge-to-disclosure-icon: var(--luzmo-spacing-3);--date-time-picker-edge-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-invalid-icon-to-button: var(--luzmo-spacing-3);--date-time-picker-icon-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=l]){--date-time-picker-min-width: 180px;--date-time-picker-calendar-padding: var(--luzmo-spacing-5);--date-time-picker-icon-size: 20px;--date-time-picker-dash-font-size: var(--luzmo-font-size-l);--date-time-picker-text-to-visual: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-edge-to-disclosure-icon: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-edge-to-text: var(--luzmo-spacing-4);--date-time-picker-invalid-icon-to-button: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-icon-to-text: var(--luzmo-spacing-4)}:host([size=xl]){--date-time-picker-min-width: 200px;--date-time-picker-calendar-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--date-time-picker-icon-size: 22px;--date-time-picker-dash-font-size: var(--luzmo-font-size-xl);--date-time-picker-text-to-visual: var(--luzmo-spacing-4);--date-time-picker-edge-to-disclosure-icon: var(--luzmo-spacing-4);--date-time-picker-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--date-time-picker-invalid-icon-to-button: var(--luzmo-spacing-4);--date-time-picker-icon-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host{--status-icon-size: var( --luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid) );--picker-button-size: var( --luzmo-text-field-height, var(--text-field-height) );--input-spacing: var( --luzmo-text-field-spacing-inline, var(--text-field-spacing-inline) );--input-border-width: var( --luzmo-text-field-border-width, var(--luzmo-border-width) );--text-to-icon: var( --luzmo-text-field-icon-spacing-inline-start-invalid, var(--text-field-icon-spacing-inline-start-invalid) );--date-time-picker-input-width: var(--date-time-picker-width);flex-wrap:wrap}:host #text-field{display:inline-block}:host #text-field .input,:host([quiet]) #text-field .input,:host([valid]) #text-field .input,:host([invalid]) #text-field .input{inline-size:100%}:host #text-field .input,:host([quiet]) #text-field .input{padding-inline-end:calc(var(--picker-button-size) + var(--input-spacing) - var(--input-border-width))}:host([valid]) #text-field .input,:host([invalid]) #text-field .input{inline-size:100%;padding-inline-end:calc(var(--status-icon-size) + var(--picker-button-size) + var(--input-spacing) - var(--input-border-width) + var(--text-to-icon))}@media (hover: hover){:host([invalid]) #text-field:hover .input,:host([focused][invalid]) .input:hover,:host([focused][invalid]) #text-field:hover .input{border-color:var(--highcontrast-text-field-border-color-invalid-default, var(--luzmo-text-field-border-color-invalid-default, var(--luzmo-negative-color-hover)))}}luzmo-picker-button:focus-visible{outline:none}luzmo-popover{overflow-y:auto}luzmo-popover .popover-content{padding:var(--luzmo-date-time-picker-calendar-padding, var(--date-time-picker-calendar-padding))}.input-content{display:flex;align-items:center;height:100%;overflow:auto hidden;scrollbar-width:none;line-height:normal}.input-content::-webkit-scrollbar{display:none;width:0;height:0}.literal-segment,.editable-segment{display:inline-block;color:var(--luzmo-date-time-picker-font-color-default, var(--date-time-picker-font-color-default))}.editable-segment{padding:0 .15em;font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap;caret-color:transparent;outline:none}[dir=ltr] .editable-segment{text-align:start}.literal-segment{white-space:pre;user-select:none;-webkit-user-select:none}.is-placeholder,.is-placeholder+.literal-segment{color:var(--luzmo-font-color-disabled)}.editable-segment:focus-visible{color:var(--white);background-color:var(--highcontrast-text-field-focus-indicator-color, var(--luzmo-text-field-focus-indicator-color, var(--text-field-focus-indicator-color)))}.editable-segment::selection{background-color:transparent}';
|
|
683
|
-
var
|
|
684
|
-
var
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
688
|
-
if (decorator = decorators[i])
|
|
689
|
-
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
690
|
-
if (kind && result) __defProp(target, key, result);
|
|
691
|
-
return result;
|
|
526
|
+
const Te = '@charset "UTF-8";:host{font-family:var(--luzmo-font-family);--date-time-picker-border-radius: var( --luzmo-date-time-picker-border-radius, var(--luzmo-border-radius) );--date-time-picker-border-radius-quiet: var( --luzmo-date-time-picker-border-radius-quiet, 0 );--date-time-picker-border-width: var(--luzmo-border-width);--date-time-picker-button-border-color: var( --highcontrast-datepicker-pickerbutton-border-color, var( --luzmo-date-time-picker-pickerbutton-border-color, var(--luzmo-border-color) ) );--date-time-picker-button-border-color-focus: var( --highcontrast-datepicker-pickerbutton-border-color, var( --luzmo-date-time-picker-pickerbutton-border-color-focus, var(--luzmo-primary) ) );--date-time-picker-button-border-color-invalid: var( --highcontrast-datepicker-pickerbutton-border-color, var( --luzmo-date-time-picker-pickerbutton-border-color-invalid, var(--luzmo-negative-color) ) );--date-time-picker-button-width: calc( var(--date-time-picker-edge-to-disclosure-icon) * 2 + var(--date-time-picker-icon-size) );--date-time-picker-quiet-button-offset: var( --luzmo-date-time-picker-quiet-button-offset, var(--date-time-picker-text-to-visual) );--date-time-picker-icon-to-text: var(--date-time-picker-edge-to-text);--date-time-picker-button-width-quiet: calc( var(--date-time-picker-button-width) - var( --date-time-picker-quiet-button-offset ) );--date-time-picker-focus-ring-gap: var( --luzmo-date-time-picker-focus-ring-gap, var(--luzmo-indicator-gap) );--date-time-picker-focus-thickness: var( --luzmo-date-time-picker-focus-thickness, var(--luzmo-indicator-width) );--date-time-picker-focus-animation: var( --luzmo-date-time-picker-focus-animation, var(--luzmo-animation-duration) );--date-time-picker-focus-ring-width: var( --luzmo-date-time-picker-focus-ring-width, var(--luzmo-border-width) );--date-time-picker-focus-ring-color: var( --highcontrast-datepicker-focus-ring-color, var(--luzmo-date-time-picker-focus-ring-color, var(--luzmo-indicator-color)) );--date-time-picker-focus-line-gap: var( --luzmo-date-time-picker-focus-line-gap, var(--luzmo-spacing-2) );--date-time-picker-invalid-quiet-color: var( --luzmo-date-time-picker-invalid-quiet-color, var(--luzmo-negative-color) );--date-time-picker-quiet-border-color-hover: var( --luzmo-date-time-picker-quiet-border-color-hover, var(--luzmo-border-color-hover) );--date-time-picker-border-color-disabled: var( --luzmo-date-time-picker-border-color-disabled, var(--luzmo-border-color-disabled) );--date-time-picker-dash-font-size: var( --luzmo-date-time-picker-dash-font-size, var(--date-time-picker-dash-font-size) );--date-time-picker-dash-color: var( --highcontrast-datepicker-dash-color, var(--luzmo-date-time-picker-dash-color, var(--luzmo-font-color)) );--date-time-picker-range-dash-padding-top: var( --luzmo-date-time-picker-range-dash-padding-top, 0 );--date-time-picker-range-dash-margin-inline-start: var( --luzmo-date-time-picker-range-dash-margin-left, calc(var(--date-time-picker-dash-font-size) * -.5) );--date-time-picker-range-input-width-first: var( --luzmo-date-time-picker-range-input-width-first, calc( var(--date-time-picker-initial-width) - var( --date-time-picker-generic-padding ) * 2 ) );--date-time-picker-input-width-base: calc( var(--date-time-picker-range-input-width-first) + var(--date-time-picker-icon-size) );--date-time-picker-input-width: var( --luzmo-date-time-picker-input-width, calc( var(--date-time-picker-input-width-base) + var(--date-time-picker-initial-height) ) );--date-time-picker-range-input-width-quiet-first: var( --luzmo-date-time-picker-range-input-width-quiet-first, calc( var(--date-time-picker-width-quiet-first) + var(--date-time-picker-width-quiet-second) ) );--date-time-picker-input-width-quiet: var( --luzmo-date-time-picker-input-width-quiet, calc( var(--date-time-picker-range-input-width-quiet-first) + var(--date-time-picker-icon-size) + var(--date-time-picker-initial-height) ) );--date-time-picker-datetime-input-width-first: var( --luzmo-date-time-picker-datetime-input-width-first, calc( var(--date-time-picker-input-width-base) + var(--date-time-picker-datetime-width-first) ) );--date-time-picker-datetime-input-width: var( --luzmo-date-time-picker-datetime-input-width, calc( var(--date-time-picker-datetime-input-width-first) + var(--date-time-picker-icon-size) + var(--date-time-picker-initial-height) ) );--date-time-picker-datetime-quiet-input-width-first: var( --luzmo-date-time-picker-datetime-quiet-input-width-first, calc( var(--date-time-picker-input-width-base) + var(--date-time-picker-input-datetime-width) ) );--date-time-picker-datetime-quiet-input-width: var( --luzmo-date-time-picker-datetime-quiet-input-width, calc( var(--date-time-picker-datetime-quiet-input-width-first) + var(--date-time-picker-icon-size) + var(--date-time-picker-initial-height) ) );--date-time-picker-padding-inline-end: var( --luzmo-date-time-picker-padding-inline, calc( var(--date-time-picker-button-width) + var(--date-time-picker-edge-to-text) - var( --date-time-picker-border-width ) * 2 ) );--date-time-picker-padding-inline-end-quiet: var( --luzmo-date-time-picker-padding-inline-quiet, calc( var(--date-time-picker-button-width) + var(--date-time-picker-edge-to-text) - var( --date-time-picker-quiet-button-offset ) ) );--date-time-picker-padding-inline-end-invalid-quiet: var( --luzmo-date-time-picker-padding-inline-end-invalid-quiet, calc( var(--date-time-picker-button-width-quiet) + var(--date-time-picker-icon-size) + var(--date-time-picker-icon-to-text) ) );min-inline-size:var(--luzmo-date-time-picker-min-width, var(--date-time-picker-min-width));border-radius:var(--date-time-picker-border-radius);flex-flow:row;display:inline-flex;position:relative}:host([disabled]) luzmo-picker-button{cursor:default}:host([disabled]){--luzmo-date-time-picker-dash-color: var( --luzmo-date-time-picker-dash-color-disabled, var(--disabled-content-color) );--luzmo-text-field-border-color-disabled: transparent}:host([invalid]),:host([invalid]) #text-field .icon{--luzmo-text-field-icon-spacing-inline-end-invalid: calc( var(--date-time-picker-button-width) + var(--date-time-picker-invalid-icon-to-button) );--luzmo-text-field-icon-spacing-inline-end-quiet-invalid: calc( var(--date-time-picker-button-width-quiet) + var(--date-time-picker-invalid-icon-to-button-quiet) )}:host(:not([quiet])){inline-size:var(--luzmo-date-time-picker-width, var(--date-time-picker-width))}:host([quiet]){inline-size:var(--luzmo-date-time-picker-width-quiet, var(--date-time-picker-width-quiet, var(--date-time-picker-width)))}:host(:not([quiet],[disabled])){--luzmo-picker-button-border-color: var( --date-time-picker-button-border-color )}:host([focused]),:host([focused]:not([quiet],[disabled])){--luzmo-picker-button-border-color: var( --date-time-picker-button-border-color-focus )}:host([invalid]:not([quiet],[disabled])){--luzmo-picker-button-border-color: var( --date-time-picker-button-border-color-invalid )}.input{inline-size:100%;flex:1;padding-inline-end:var(--date-time-picker-padding-inline-end);border-color:var(--luzmo-date-time-picker-border-color, var(--datepicker-border-color))}:host .input:read-only{border-color:var(--luzmo-date-time-picker-border-color, var(--datepicker-border-color))}.input.luzmo-DatePicker-startField{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0;padding-inline-end:var(--luzmo-date-time-picker-generic-padding, var(--date-time-picker-generic-padding))}.input.luzmo-DatePicker-endField{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0;padding-inline-start:var(--luzmo-date-time-picker-generic-padding, var(--date-time-picker-generic-padding))}luzmo-picker-button{cursor:pointer;position:absolute;inset-inline-end:0}.luzmo-DatePicker-rangeDash{color:var(--date-time-picker-dash-color);line-height:var(--luzmo-date-time-picker-dash-line-height, var(--date-time-picker-dash-line-height));flex:initial;inline-size:0;z-index:1;padding-block-start:var(--date-time-picker-range-dash-padding-top)}.luzmo-DatePicker-rangeDash:before{content:"–";margin-block:0;margin-inline:var(--date-time-picker-range-dash-margin-inline-start);text-align:center;vertical-align:middle;inline-size:var(--date-time-picker-dash-font-size);display:inline-block;overflow:hidden}:host([quiet]){--luzmo-date-time-picker-border-radius: var( --date-time-picker-border-radius-quiet );--luzmo-date-time-picker-padding-inline: var( --date-time-picker-padding-inline-end-quiet );--luzmo-picker-button-border-color-disabled: var( --date-time-picker-border-color-disabled );--luzmo-picker-button-background-color-hover-disabled: var( --date-time-picker-border-color-disabled )}:host([quiet][disabled]){--luzmo-text-field-border-color-disabled: var( --date-time-picker-border-color-disabled )}:host([quiet][invalid]) .input:not(.luzmo-DatePicker-startField){padding-inline-end:var(--date-time-picker-padding-inline-end-invalid-quiet)}@media (hover: hover){:host(:hover):not([focused],[disabled],[invalid]){--luzmo-picker-button-border-color: var( --date-time-picker-quiet-border-color-hover )}}:host([quiet][invalid]){--luzmo-picker-button-border-color: var( --date-time-picker-invalid-quiet-color )}:host([quiet]) luzmo-picker-button{inline-size:auto;inset-inline-end:calc(var(--date-time-picker-quiet-button-offset) * -1)}:host([quiet]) luzmo-picker-button:not(.is-open){--luzmo-picker-button-border-color-disabled: transparent}:host([quiet]) luzmo-picker-button:not(:disabled,.is-open){--luzmo-picker-button-background-color: transparent}.luzmo-DatePicker--range{--luzmo-date-time-picker-border-radius: var(--date-time-picker-border-radius)}.luzmo-DatePicker--range:after{pointer-events:none;content:"";margin:calc(var(--date-time-picker-focus-ring-gap) * -1);border-radius:calc(var(--date-time-picker-border-radius) + var(--date-time-picker-focus-ring-gap));transition:box-shadow var(--date-time-picker-focus-animation) ease-in-out,border-color var(--date-time-picker-focus-animation) ease-in-out;border-color:#0000;position:absolute;top:0;right:0;bottom:0;left:0}:host([focused]) .luzmo-DatePicker--range:not(.luzmo-DatePicker--quiet):after{box-shadow:0 0 0 var(--date-time-picker-focus-ring-width) var(--date-time-picker-focus-ring-color)}:host([focused]) .luzmo-DatePicker--range:not(.luzmo-DatePicker--quiet) #text-field:after{display:none}:host([quiet]) .luzmo-DatePicker--range{--luzmo-date-time-picker-border-radius: var( --date-time-picker-border-radius-quiet )}:host([quiet][focused]) .luzmo-DatePicker--range:after{box-shadow:none;border-block-end:var(--date-time-picker-focus-thickness) solid var(--date-time-picker-focus-ring-color);border-radius:0;margin:0;inset-block-end:calc(var(--date-time-picker-focus-line-gap) * -1)}:host([quiet]) .luzmo-DatePicker--range #text-field{min-inline-size:0;inline-size:var(--date-time-picker-input-width-quiet)}:host([quiet]) .luzmo-DatePicker--range #text-field:first-of-type{inline-size:var(--date-time-picker-range-input-width-quiet-first)}.luzmo-DatePicker--range.luzmo-DatePicker--datetimeRange #text-field{inline-size:var(--date-time-picker-datetime-input-width);min-inline-size:0}.luzmo-DatePicker--range.luzmo-DatePicker--datetimeRange #text-field:first-of-type{inline-size:var(--date-time-picker-datetime-input-width-first)}:host([quiet]) .luzmo-DatePicker--range.luzmo-DatePicker--datetimeRange #text-field{inline-size:var(--date-time-picker-datetime-quiet-input-width)}:host([quiet]) .luzmo-DatePicker--range.luzmo-DatePicker--datetimeRange #text-field:first-of-type{inline-size:var(--date-time-picker-datetime-quiet-input-width-first)}.luzmo-DatePicker--range #text-field{flex:initial;min-inline-size:0;inline-size:var(--date-time-picker-input-width)}.luzmo-DatePicker--range #text-field:first-of-type{inline-size:var(--date-time-picker-range-input-width-first)}@media (forced-colors: active){:host{--highcontrast-datepicker-dash-color: CanvasText;--highcontrast-datepicker-focus-ring-color: Highlight;--highcontrast-datepicker-pickerbutton-border-color: Highlight}:host([disabled]){--highcontrast-datepicker-dash-color: GrayText}:host([quiet][invalid]){--highcontrast-datepicker-pickerbutton-border-color: Highlight}}:host{--date-time-picker-width: auto;--date-time-picker-initial-height: var(--system-date-picker-initial-height);--date-time-picker-font-color-default: var(--luzmo-font-color);--datepicker-border-color: var(--luzmo-border-color);--date-time-picker-button-indicator-color: var(--luzmo-indicator-color);--text-field-focus-indicator-color: var(--luzmo-background-color-highlight);--date-time-picker-initial-width: 120px;--date-time-picker-min-width: 160px;--date-time-picker-calendar-padding: var(--luzmo-spacing-4);--date-time-picker-icon-size: 18px;--date-time-picker-dash-font-size: var(--luzmo-font-size);--date-time-picker-text-to-visual: var(--luzmo-spacing-3);--date-time-picker-edge-to-disclosure-icon: var(--luzmo-spacing-3);--date-time-picker-edge-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-icon-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-invalid-icon-to-button: var(--luzmo-spacing-3);--date-time-picker-generic-padding: var(--luzmo-spacing-4)}:host([size=s]){--date-time-picker-min-width: 140px;--date-time-picker-calendar-padding: var(--luzmo-spacing-3);--date-time-picker-icon-size: 16px;--date-time-picker-dash-font-size: var(--luzmo-font-size-s);--date-time-picker-text-to-visual: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--date-time-picker-edge-to-disclosure-icon: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--date-time-picker-edge-to-text: var(--luzmo-spacing-3);--date-time-picker-invalid-icon-to-button: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--date-time-picker-icon-to-text: var(--luzmo-spacing-3)}:host([invalid][size=s]){--text-field-icon-spacing-block-invalid: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}:host([size=m]){--date-time-picker-min-width: 160px;--date-time-picker-calendar-padding: var(--luzmo-spacing-4);--date-time-picker-icon-size: 18px;--date-time-picker-dash-font-size: var(--luzmo-font-size-m);--date-time-picker-text-to-visual: var(--luzmo-spacing-3);--date-time-picker-edge-to-disclosure-icon: var(--luzmo-spacing-3);--date-time-picker-edge-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-invalid-icon-to-button: var(--luzmo-spacing-3);--date-time-picker-icon-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=l]){--date-time-picker-min-width: 180px;--date-time-picker-calendar-padding: var(--luzmo-spacing-5);--date-time-picker-icon-size: 20px;--date-time-picker-dash-font-size: var(--luzmo-font-size-l);--date-time-picker-text-to-visual: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-edge-to-disclosure-icon: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-edge-to-text: var(--luzmo-spacing-4);--date-time-picker-invalid-icon-to-button: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--date-time-picker-icon-to-text: var(--luzmo-spacing-4)}:host([size=xl]){--date-time-picker-min-width: 200px;--date-time-picker-calendar-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--date-time-picker-icon-size: 22px;--date-time-picker-dash-font-size: var(--luzmo-font-size-xl);--date-time-picker-text-to-visual: var(--luzmo-spacing-4);--date-time-picker-edge-to-disclosure-icon: var(--luzmo-spacing-4);--date-time-picker-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--date-time-picker-invalid-icon-to-button: var(--luzmo-spacing-4);--date-time-picker-icon-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host{--status-icon-size: var( --luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid) );--picker-button-size: var( --luzmo-text-field-height, var(--text-field-height) );--input-spacing: var( --luzmo-text-field-spacing-inline, var(--text-field-spacing-inline) );--input-border-width: var( --luzmo-text-field-border-width, var(--luzmo-border-width) );--text-to-icon: var( --luzmo-text-field-icon-spacing-inline-start-invalid, var(--text-field-icon-spacing-inline-start-invalid) );--date-time-picker-input-width: var(--date-time-picker-width);flex-wrap:wrap}:host #text-field{display:inline-block}:host #text-field .input,:host([quiet]) #text-field .input,:host([valid]) #text-field .input,:host([invalid]) #text-field .input{inline-size:100%}:host #text-field .input,:host([quiet]) #text-field .input{padding-inline-end:calc(var(--picker-button-size) + var(--input-spacing) - var(--input-border-width))}:host([valid]) #text-field .input,:host([invalid]) #text-field .input{inline-size:100%;padding-inline-end:calc(var(--status-icon-size) + var(--picker-button-size) + var(--input-spacing) - var(--input-border-width) + var(--text-to-icon))}@media (hover: hover){:host([invalid]) #text-field:hover .input,:host([focused][invalid]) .input:hover,:host([focused][invalid]) #text-field:hover .input{border-color:var(--highcontrast-text-field-border-color-invalid-default, var(--luzmo-text-field-border-color-invalid-default, var(--luzmo-negative-color-hover)))}}luzmo-picker-button:focus-visible{outline:none}luzmo-popover{overflow-y:auto}luzmo-popover .popover-content{padding:var(--luzmo-date-time-picker-calendar-padding, var(--date-time-picker-calendar-padding))}.input-content{display:flex;align-items:center;height:100%;overflow:auto hidden;scrollbar-width:none;line-height:normal}.input-content::-webkit-scrollbar{display:none;width:0;height:0}.literal-segment,.editable-segment{display:inline-block;color:var(--luzmo-date-time-picker-font-color-default, var(--date-time-picker-font-color-default))}.editable-segment{padding:0 .15em;font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap;caret-color:transparent;outline:none}[dir=ltr] .editable-segment{text-align:start}.literal-segment{white-space:pre;user-select:none;-webkit-user-select:none}.is-placeholder,.is-placeholder+.literal-segment{color:var(--luzmo-font-color-disabled)}.editable-segment:focus-visible{color:var(--white);background-color:var(--highcontrast-text-field-focus-indicator-color, var(--luzmo-text-field-focus-indicator-color, var(--text-field-focus-indicator-color)))}.editable-segment::selection{background-color:transparent}';
|
|
527
|
+
var Ce = Object.defineProperty, Le = Object.getOwnPropertyDescriptor, m = (n, e, t, i) => {
|
|
528
|
+
for (var a = i > 1 ? void 0 : i ? Le(e, t) : e, r = n.length - 1, s; r >= 0; r--)
|
|
529
|
+
(s = n[r]) && (a = (i ? s(e, t, a) : s(a)) || a);
|
|
530
|
+
return i && a && Ce(e, t, a), a;
|
|
692
531
|
};
|
|
693
|
-
class
|
|
694
|
-
|
|
695
|
-
validSizes: Object.values(
|
|
532
|
+
class u extends fe(
|
|
533
|
+
ue(de, {
|
|
534
|
+
validSizes: Object.values(me)
|
|
696
535
|
})
|
|
697
536
|
) {
|
|
698
537
|
constructor() {
|
|
699
|
-
super()
|
|
700
|
-
this._precision = Precisions.Minute;
|
|
701
|
-
this.isUserSetPrecision = false;
|
|
702
|
-
this.invalid = false;
|
|
703
|
-
this.readonly = false;
|
|
704
|
-
this.quiet = false;
|
|
705
|
-
this.placement = "bottom";
|
|
706
|
-
this.language = "en";
|
|
707
|
-
this.labels = {
|
|
538
|
+
super(), this._precision = p.Minute, this.isUserSetPrecision = !1, this.invalid = !1, this.readonly = !1, this.quiet = !1, this.placement = "bottom", this.language = "en", this.labels = {
|
|
708
539
|
previous: "Previous",
|
|
709
540
|
next: "Next",
|
|
710
541
|
today: "Today",
|
|
711
542
|
selected: "Selected",
|
|
712
543
|
empty: "Empty",
|
|
713
544
|
calendar: "Calendar"
|
|
714
|
-
}
|
|
715
|
-
this.focused = false;
|
|
716
|
-
this.segments = new DateTimeSegments([]);
|
|
717
|
-
this.isCalendarOpen = false;
|
|
718
|
-
this._timeZone = this.timeZone ?? getLocalTimeZone();
|
|
719
|
-
this.cachedLocalTime = now(this._timeZone);
|
|
720
|
-
this.setNumberParser();
|
|
721
|
-
this.setDateFormatter();
|
|
722
|
-
this.setAriaDateFormatter();
|
|
723
|
-
this.addEventListener(
|
|
545
|
+
}, this.focused = !1, this.segments = new I([]), this.isCalendarOpen = !1, this._timeZone = this.timeZone ?? E(), this.cachedLocalTime = re(this._timeZone), this.setNumberParser(), this.setDateFormatter(), this.setAriaDateFormatter(), this.addEventListener(
|
|
724
546
|
"focusin",
|
|
725
547
|
() => this.previousCommitedValue = this._value
|
|
726
|
-
);
|
|
727
|
-
this.addEventListener("focusout", () => this.commitValue());
|
|
548
|
+
), this.addEventListener("focusout", () => this.commitValue());
|
|
728
549
|
}
|
|
729
550
|
/**
|
|
730
551
|
* The styles of the calendar
|
|
731
552
|
* @internal
|
|
732
553
|
*/
|
|
733
554
|
static get styles() {
|
|
734
|
-
return [
|
|
555
|
+
return [Z(Te), Z(ve)];
|
|
735
556
|
}
|
|
736
557
|
get precision() {
|
|
737
558
|
return this._precision;
|
|
738
559
|
}
|
|
739
|
-
set precision(
|
|
740
|
-
this.isUserSetPrecision =
|
|
741
|
-
const
|
|
742
|
-
|
|
743
|
-
this._precision = value;
|
|
744
|
-
this.requestUpdate("precision", oldValue);
|
|
560
|
+
set precision(e) {
|
|
561
|
+
this.isUserSetPrecision = !0;
|
|
562
|
+
const t = this._precision;
|
|
563
|
+
e !== t && (this._precision = e, this.requestUpdate("precision", t));
|
|
745
564
|
}
|
|
746
565
|
/**
|
|
747
566
|
* The language used to format the dates and weekdays.
|
|
@@ -749,11 +568,7 @@ class LuzmoDateTimePicker extends ManageHelpText(
|
|
|
749
568
|
*/
|
|
750
569
|
get _language() {
|
|
751
570
|
try {
|
|
752
|
-
|
|
753
|
-
const locale = new Intl.Locale(this.language);
|
|
754
|
-
return locale.language;
|
|
755
|
-
}
|
|
756
|
-
return "en";
|
|
571
|
+
return this.language ? new Intl.Locale(this.language).language : "en";
|
|
757
572
|
} catch {
|
|
758
573
|
return "en";
|
|
759
574
|
}
|
|
@@ -770,63 +585,36 @@ class LuzmoDateTimePicker extends ManageHelpText(
|
|
|
770
585
|
* @internal
|
|
771
586
|
*/
|
|
772
587
|
get currentDate() {
|
|
773
|
-
|
|
774
|
-
return this.cachedLocalTime;
|
|
588
|
+
return this._value ? S(this._value, this._timeZone) : this.cachedLocalTime;
|
|
775
589
|
}
|
|
776
590
|
/**
|
|
777
591
|
* @return Whether the component's precision includes time segments (hour, minute, second, millisecond)
|
|
778
592
|
* @internal
|
|
779
593
|
*/
|
|
780
594
|
get includesTime() {
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
];
|
|
787
|
-
return timePrecisions.includes(this.precision);
|
|
595
|
+
return [
|
|
596
|
+
p.Hour,
|
|
597
|
+
p.Minute,
|
|
598
|
+
p.Second,
|
|
599
|
+
p.Millisecond
|
|
600
|
+
].includes(this.precision);
|
|
788
601
|
}
|
|
789
602
|
/**
|
|
790
603
|
* Resets the component's value and segments
|
|
791
604
|
*/
|
|
792
605
|
clear() {
|
|
793
|
-
this._value = void 0;
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
const changesLocale = changedProperties.has("language");
|
|
802
|
-
const changesDateFormat = changedProperties.has("dateFormat");
|
|
803
|
-
const changesDateSeparator = changedProperties.has("dateSeparator");
|
|
804
|
-
const changesPrecision = changedProperties.has("precision");
|
|
805
|
-
const changesSegments = changedProperties.has("segments");
|
|
806
|
-
const changesDisabled = changedProperties.has("disabled");
|
|
807
|
-
if (changesLocale) this.setNumberParser();
|
|
808
|
-
if (changesLocale || changesPrecision) {
|
|
809
|
-
this.setDateFormatter();
|
|
810
|
-
this.setAriaDateFormatter();
|
|
606
|
+
this._value = void 0, this.setSegments();
|
|
607
|
+
}
|
|
608
|
+
willUpdate(e) {
|
|
609
|
+
const t = e.has("value"), i = e.has("timeZone"), a = e.has("min"), r = e.has("max"), s = e.has("language"), l = e.has("dateFormat"), d = e.has("dateSeparator"), c = e.has("precision"), f = e.has("segments"), v = e.has("disabled");
|
|
610
|
+
if (s && this.setNumberParser(), (s || c) && (this.setDateFormatter(), this.setAriaDateFormatter()), t || a || r || i) {
|
|
611
|
+
this._value = this.value ? A(new Date(this.value).toISOString(), "UTC") : void 0, this._min = this.min ? A(new Date(this.min).toISOString(), "UTC") : void 0, this._max = this.max ? A(new Date(this.max).toISOString(), "UTC") : void 0;
|
|
612
|
+
const h = this.mostSpecificDateValue;
|
|
613
|
+
h && (this.convertDatePropsToMatch(h), this.checkDatePropsCompliance(a || r), this.updateDateProps(), this.updateDefaultPrecision());
|
|
811
614
|
}
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
this._max = this.max ? parseAbsolute(new Date(this.max).toISOString(), "UTC") : void 0;
|
|
816
|
-
const mostSpecificDateValue = this.mostSpecificDateValue;
|
|
817
|
-
if (mostSpecificDateValue) {
|
|
818
|
-
this.convertDatePropsToMatch(mostSpecificDateValue);
|
|
819
|
-
this.checkDatePropsCompliance(changesMin || changesMax);
|
|
820
|
-
this.updateDateProps();
|
|
821
|
-
this.updateDefaultPrecision();
|
|
822
|
-
}
|
|
823
|
-
}
|
|
824
|
-
if (changesValue || changesLocale || changesPrecision || changesDateFormat || changesTimeZone || changesDateSeparator)
|
|
825
|
-
this.setSegments();
|
|
826
|
-
if (changesSegments) this.setValueFromSegments();
|
|
827
|
-
if (changesDisabled && this.isCalendarOpen) this.isCalendarOpen = false;
|
|
828
|
-
const selectedDateLabel = this._value && this.labels.selected + ": " + this.ariaDateFormatter.format(dateValueToDate(this._value));
|
|
829
|
-
this.setAttribute("aria-label", selectedDateLabel ?? this.labels.empty);
|
|
615
|
+
(t || s || c || l || i || d) && this.setSegments(), f && this.setValueFromSegments(), v && this.isCalendarOpen && (this.isCalendarOpen = !1);
|
|
616
|
+
const g = this._value && this.labels.selected + ": " + this.ariaDateFormatter.format(ee(this._value));
|
|
617
|
+
this.setAttribute("aria-label", g ?? this.labels.empty);
|
|
830
618
|
}
|
|
831
619
|
/**
|
|
832
620
|
* Computes the component's most precise date property (min, max or value) or undefined if none is defined.
|
|
@@ -834,40 +622,30 @@ class LuzmoDateTimePicker extends ManageHelpText(
|
|
|
834
622
|
* @internal
|
|
835
623
|
*/
|
|
836
624
|
get mostSpecificDateValue() {
|
|
837
|
-
const
|
|
838
|
-
(
|
|
625
|
+
const e = [this._value, this._min, this._max].filter(
|
|
626
|
+
(r) => r !== void 0
|
|
839
627
|
);
|
|
840
|
-
if (
|
|
841
|
-
const
|
|
842
|
-
if (
|
|
843
|
-
const
|
|
844
|
-
|
|
845
|
-
const mostSpecificDate = dateValuesDefined.find((d) => isCalendarDate(d));
|
|
846
|
-
return mostSpecificDate;
|
|
628
|
+
if (e.length === 0) return;
|
|
629
|
+
const t = e.filter((r) => P(r));
|
|
630
|
+
if (t.length > 0) return t[0];
|
|
631
|
+
const i = e.filter((r) => B(r));
|
|
632
|
+
return i.length > 0 ? i[0] : e.find((r) => L(r));
|
|
847
633
|
}
|
|
848
634
|
/**
|
|
849
635
|
* Converts the DateTimePicker's date properties (min, max and value) to match the provided date's type.
|
|
850
636
|
*
|
|
851
637
|
* @param dateValue - The date value to be used as a reference for the conversion
|
|
852
638
|
*/
|
|
853
|
-
convertDatePropsToMatch(
|
|
854
|
-
if (
|
|
855
|
-
this._timeZone = this.timeZone ??
|
|
856
|
-
this._value = this._value && toZoned(this._value, this._timeZone);
|
|
857
|
-
this._min = this._min && toZoned(this._min, this._timeZone);
|
|
858
|
-
this._max = this._max && toZoned(this._max, this._timeZone);
|
|
639
|
+
convertDatePropsToMatch(e) {
|
|
640
|
+
if (P(e)) {
|
|
641
|
+
this._timeZone = this.timeZone ?? e.timeZone, this._value = this._value && S(this._value, this._timeZone), this._min = this._min && S(this._min, this._timeZone), this._max = this._max && S(this._max, this._timeZone);
|
|
859
642
|
return;
|
|
860
643
|
}
|
|
861
|
-
this._timeZone = this.timeZone ??
|
|
862
|
-
|
|
863
|
-
this._value = this._value && toCalendarDateTime(this._value);
|
|
864
|
-
this._min = this._min && toCalendarDateTime(this._min);
|
|
865
|
-
this._max = this._max && toCalendarDateTime(this._max);
|
|
644
|
+
if (this._timeZone = this.timeZone ?? E(), B(e)) {
|
|
645
|
+
this._value = this._value && D(this._value), this._min = this._min && D(this._min), this._max = this._max && D(this._max);
|
|
866
646
|
return;
|
|
867
647
|
}
|
|
868
|
-
this._value = this._value &&
|
|
869
|
-
this._min = this._min && toCalendarDate(this._min);
|
|
870
|
-
this._max = this._max && toCalendarDate(this._max);
|
|
648
|
+
this._value = this._value && C(this._value), this._min = this._min && C(this._min), this._max = this._max && C(this._max);
|
|
871
649
|
}
|
|
872
650
|
/**
|
|
873
651
|
* Validates the component's date properties (min, max and value) compliance with one another.
|
|
@@ -876,55 +654,36 @@ class LuzmoDateTimePicker extends ManageHelpText(
|
|
|
876
654
|
*
|
|
877
655
|
* @param checkInterval - Whether to check the [min, max] interval
|
|
878
656
|
*/
|
|
879
|
-
checkDatePropsCompliance(
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
this._min = void 0;
|
|
888
|
-
this._max = void 0;
|
|
889
|
-
}
|
|
890
|
-
}
|
|
891
|
-
if (this.isNonCompliantValue()) {
|
|
892
|
-
console.warn(
|
|
893
|
-
this,
|
|
894
|
-
`<${this.localName}> expects the preselected value to comply with the min and max constraints. Please ensure that 'value' property's date is in between the dates for the 'min' and 'max' properties.`
|
|
895
|
-
);
|
|
896
|
-
this._value = void 0;
|
|
897
|
-
}
|
|
898
|
-
if (!this._min && !this._max && !this._value)
|
|
899
|
-
this._timeZone = getLocalTimeZone();
|
|
657
|
+
checkDatePropsCompliance(e) {
|
|
658
|
+
e && this._min && this._max && (this._min.compare(this._max) < 0 || (console.warn(
|
|
659
|
+
this,
|
|
660
|
+
`<${this.localName}> expects the 'min' to be less than 'max'. Please ensure that 'min' property's date is earlier than 'max' property's date.`
|
|
661
|
+
), this._min = void 0, this._max = void 0)), this.isNonCompliantValue() && (console.warn(
|
|
662
|
+
this,
|
|
663
|
+
`<${this.localName}> expects the preselected value to comply with the min and max constraints. Please ensure that 'value' property's date is in between the dates for the 'min' and 'max' properties.`
|
|
664
|
+
), this._value = void 0), !this._min && !this._max && !this._value && (this._timeZone = E());
|
|
900
665
|
}
|
|
901
666
|
isNonCompliantValue() {
|
|
902
|
-
|
|
903
|
-
return Boolean(
|
|
904
|
-
this._min && this._value.compare(this._min) < 0 || this._max && this._value.compare(this._max) > 0
|
|
905
|
-
);
|
|
667
|
+
return this._value === void 0 ? !1 : !!(this._min && this._value.compare(this._min) < 0 || this._max && this._value.compare(this._max) > 0);
|
|
906
668
|
}
|
|
907
669
|
/**
|
|
908
670
|
* Update the component's date properties' types to include the provided precision.
|
|
909
671
|
*/
|
|
910
672
|
updateDateProps() {
|
|
911
|
-
const
|
|
912
|
-
if (!
|
|
913
|
-
|
|
914
|
-
if (shouldConvertToDateTime)
|
|
915
|
-
this.convertDatePropsToMatch(toCalendarDateTime(mostSpecificDateValue));
|
|
673
|
+
const e = this.mostSpecificDateValue;
|
|
674
|
+
if (!e || !this.isUserSetPrecision) return;
|
|
675
|
+
this.includesTime && L(e) && this.convertDatePropsToMatch(D(e));
|
|
916
676
|
}
|
|
917
677
|
/**
|
|
918
678
|
* Changes the component's default precision according to the most specific date property (min, max or value).
|
|
919
679
|
*/
|
|
920
680
|
updateDefaultPrecision() {
|
|
921
681
|
if (this.isUserSetPrecision) return;
|
|
922
|
-
const
|
|
923
|
-
|
|
924
|
-
this._precision = isCalendarDate(mostSpecificDateValue) ? Precisions.Day : Precisions.Minute;
|
|
682
|
+
const e = this.mostSpecificDateValue;
|
|
683
|
+
e && (this._precision = L(e) ? p.Day : p.Minute);
|
|
925
684
|
}
|
|
926
685
|
render() {
|
|
927
|
-
return
|
|
686
|
+
return _`
|
|
928
687
|
<div id="text-field">
|
|
929
688
|
${this.renderStateIcons()} ${this.renderInputContent()}
|
|
930
689
|
</div>
|
|
@@ -932,34 +691,31 @@ class LuzmoDateTimePicker extends ManageHelpText(
|
|
|
932
691
|
`;
|
|
933
692
|
}
|
|
934
693
|
renderStateIcons() {
|
|
935
|
-
|
|
936
|
-
return html`
|
|
694
|
+
return this.invalid ? _`
|
|
937
695
|
<luzmo-icon
|
|
938
|
-
.icon=${
|
|
696
|
+
.icon=${he}
|
|
939
697
|
.size=${this.size}
|
|
940
698
|
id="invalid"
|
|
941
699
|
class="icon"
|
|
942
700
|
></luzmo-icon>
|
|
943
|
-
|
|
944
|
-
return nothing;
|
|
701
|
+
` : U;
|
|
945
702
|
}
|
|
946
703
|
renderPicker() {
|
|
947
|
-
if (this.readonly) return
|
|
948
|
-
const
|
|
949
|
-
|
|
950
|
-
return html`
|
|
704
|
+
if (this.readonly) return U;
|
|
705
|
+
const e = () => this.isCalendarOpen = !1, t = () => this.isCalendarOpen = !0;
|
|
706
|
+
return _`
|
|
951
707
|
<luzmo-picker-button
|
|
952
708
|
?open=${this.isCalendarOpen}
|
|
953
709
|
?quiet=${this.quiet}
|
|
954
710
|
?invalid=${this.invalid}
|
|
955
711
|
?disabled=${this.disabled}
|
|
956
712
|
.size=${this.size}
|
|
957
|
-
@click=${
|
|
713
|
+
@click=${t}
|
|
958
714
|
label=${this.labels.calendar}
|
|
959
715
|
>
|
|
960
716
|
<slot name="calendar-icon" slot="icon">
|
|
961
717
|
<luzmo-icon
|
|
962
|
-
.icon=${
|
|
718
|
+
.icon=${pe}
|
|
963
719
|
.size=${this.size}
|
|
964
720
|
block
|
|
965
721
|
></luzmo-icon>
|
|
@@ -972,7 +728,7 @@ class LuzmoDateTimePicker extends ManageHelpText(
|
|
|
972
728
|
placement=${this.placement ?? "bottom"}
|
|
973
729
|
offset="0"
|
|
974
730
|
?open=${this.isCalendarOpen}
|
|
975
|
-
@luzmo-closed=${
|
|
731
|
+
@luzmo-closed=${e}
|
|
976
732
|
>
|
|
977
733
|
<luzmo-popover>
|
|
978
734
|
<div class="popover-content">
|
|
@@ -993,40 +749,26 @@ class LuzmoDateTimePicker extends ManageHelpText(
|
|
|
993
749
|
</luzmo-overlay>
|
|
994
750
|
`;
|
|
995
751
|
}
|
|
996
|
-
handleChange(
|
|
997
|
-
var
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
this.value = (_b = event.target) == null ? void 0 : _b.value;
|
|
1002
|
-
}
|
|
1003
|
-
const calendarValue = parseDate(
|
|
1004
|
-
((_c = event.target) == null ? void 0 : _c.value) ?? ""
|
|
752
|
+
handleChange(e) {
|
|
753
|
+
var i, a, r, s, l, d, c;
|
|
754
|
+
e.stopPropagation(), this.isCalendarOpen = !1, (i = e.target) != null && i.value && (this.value = (a = e.target) == null ? void 0 : a.value);
|
|
755
|
+
const t = oe(
|
|
756
|
+
((r = e.target) == null ? void 0 : r.value) ?? ""
|
|
1005
757
|
);
|
|
1006
758
|
if (this.includesTime) {
|
|
1007
|
-
const
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
const time = new Time(hour, minute, second, millisecond);
|
|
1012
|
-
const mostSpecificDateValue = this.mostSpecificDateValue;
|
|
1013
|
-
this._value = toCalendarDateTime(calendarValue, time);
|
|
1014
|
-
if (mostSpecificDateValue && isZonedDateTime(mostSpecificDateValue))
|
|
1015
|
-
this._value = toZoned(this._value, this._timeZone);
|
|
1016
|
-
} else {
|
|
1017
|
-
this._value = calendarValue;
|
|
1018
|
-
}
|
|
759
|
+
const f = ((s = this.segments.hour) == null ? void 0 : s.value) ?? 0, v = ((l = this.segments.minute) == null ? void 0 : l.value) ?? 0, g = ((d = this.segments.second) == null ? void 0 : d.value) ?? 0, h = ((c = this.segments.millisecond) == null ? void 0 : c.value) ?? 0, z = new ne(f, v, g, h), x = this.mostSpecificDateValue;
|
|
760
|
+
this._value = D(t, z), x && P(x) && (this._value = S(this._value, this._timeZone));
|
|
761
|
+
} else
|
|
762
|
+
this._value = t;
|
|
1019
763
|
this.commitValue();
|
|
1020
764
|
}
|
|
1021
765
|
renderInputContent() {
|
|
1022
|
-
|
|
1023
|
-
const focusOut = () => this.focused = false;
|
|
1024
|
-
return html`
|
|
766
|
+
return _`
|
|
1025
767
|
<div class="input">
|
|
1026
768
|
<span
|
|
1027
769
|
class="input-content"
|
|
1028
|
-
@focusin=${
|
|
1029
|
-
@focusout=${
|
|
770
|
+
@focusin=${() => this.focused = !this.readonly}
|
|
771
|
+
@focusout=${() => this.focused = !1}
|
|
1030
772
|
@keydown=${this.handleKeydown}
|
|
1031
773
|
@input=${this.handleInput}
|
|
1032
774
|
>
|
|
@@ -1037,98 +779,89 @@ class LuzmoDateTimePicker extends ManageHelpText(
|
|
|
1037
779
|
}
|
|
1038
780
|
renderSegments() {
|
|
1039
781
|
return this.segments.all.map(
|
|
1040
|
-
(
|
|
1041
|
-
|
|
1042
|
-
() => this.renderLiteralSegment(
|
|
1043
|
-
() => this.renderEditableSegment(
|
|
782
|
+
(e) => Y(
|
|
783
|
+
e.type === o.Literal,
|
|
784
|
+
() => this.renderLiteralSegment(e),
|
|
785
|
+
() => this.renderEditableSegment(e)
|
|
1044
786
|
)
|
|
1045
787
|
);
|
|
1046
788
|
}
|
|
1047
|
-
renderLiteralSegment(
|
|
1048
|
-
return
|
|
789
|
+
renderLiteralSegment(e) {
|
|
790
|
+
return _`
|
|
1049
791
|
<span
|
|
1050
792
|
class="literal-segment"
|
|
1051
|
-
data-test-id=${
|
|
793
|
+
data-test-id=${e.type}
|
|
1052
794
|
aria-hidden="true"
|
|
1053
|
-
>${
|
|
795
|
+
>${e.formatted}</span>
|
|
1054
796
|
`;
|
|
1055
797
|
}
|
|
1056
|
-
renderEditableSegment(
|
|
1057
|
-
const
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
"is-placeholder": usePlaceholder
|
|
1063
|
-
};
|
|
1064
|
-
const minWidth = segment.type !== SegmentTypes.Year && String(segment.maxValue).length > 0;
|
|
1065
|
-
const segmentStyles = {
|
|
1066
|
-
minWidth: minWidth ? `${minWidth}ch` : void 0
|
|
798
|
+
renderEditableSegment(e) {
|
|
799
|
+
const t = !this.disabled && !this.readonly, i = e.value === void 0, a = e.type === o.DayPeriod ? "text" : "numeric", r = {
|
|
800
|
+
"editable-segment": !0,
|
|
801
|
+
"is-placeholder": i
|
|
802
|
+
}, s = e.type !== o.Year && String(e.maxValue).length > 0, l = {
|
|
803
|
+
minWidth: s ? `${s}ch` : void 0
|
|
1067
804
|
};
|
|
1068
|
-
return
|
|
805
|
+
return _`
|
|
1069
806
|
<div
|
|
1070
807
|
role="spinbutton"
|
|
1071
|
-
aria-valuenow=${
|
|
1072
|
-
aria-valuemin=${
|
|
1073
|
-
aria-valuemax=${
|
|
1074
|
-
aria-label=${
|
|
1075
|
-
aria-valuetext=${
|
|
1076
|
-
|
|
808
|
+
aria-valuenow=${$(e.value)}
|
|
809
|
+
aria-valuemin=${e.minValue}
|
|
810
|
+
aria-valuemax=${e.maxValue}
|
|
811
|
+
aria-label=${e.label}
|
|
812
|
+
aria-valuetext=${$(
|
|
813
|
+
e.value === void 0 ? this.labels.empty : e.formatted
|
|
1077
814
|
)}
|
|
1078
|
-
contenteditable=${
|
|
1079
|
-
inputmode=${
|
|
1080
|
-
tabindex=${
|
|
1081
|
-
class=${
|
|
1082
|
-
style=${
|
|
1083
|
-
data-type=${
|
|
1084
|
-
.innerText=${this.renderSegmentText(
|
|
815
|
+
contenteditable=${$(t ? !0 : void 0)}
|
|
816
|
+
inputmode=${$(t ? a : void 0)}
|
|
817
|
+
tabindex=${$(t ? "0" : void 0)}
|
|
818
|
+
class=${le(r)}
|
|
819
|
+
style=${ce(l)}
|
|
820
|
+
data-type=${e.type}
|
|
821
|
+
.innerText=${this.renderSegmentText(e)}
|
|
1085
822
|
></div>
|
|
1086
823
|
`;
|
|
1087
824
|
}
|
|
1088
|
-
renderSegmentText(
|
|
1089
|
-
const
|
|
1090
|
-
return
|
|
1091
|
-
|
|
1092
|
-
() =>
|
|
1093
|
-
() =>
|
|
825
|
+
renderSegmentText(e) {
|
|
826
|
+
const t = e.value === void 0;
|
|
827
|
+
return Y(
|
|
828
|
+
t,
|
|
829
|
+
() => e.placeholder ?? "",
|
|
830
|
+
() => e.formatted ?? ""
|
|
1094
831
|
);
|
|
1095
832
|
}
|
|
1096
|
-
handleKeydown(
|
|
1097
|
-
var
|
|
1098
|
-
const
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
this.focusSegment(segmentElement, "previous");
|
|
1128
|
-
else this.clearSegmentContent(segmentType);
|
|
1129
|
-
break;
|
|
833
|
+
handleKeydown(e) {
|
|
834
|
+
var a;
|
|
835
|
+
const t = e.target, i = t.dataset.type;
|
|
836
|
+
if (i)
|
|
837
|
+
switch (e.code) {
|
|
838
|
+
case "ArrowUp": {
|
|
839
|
+
this.incrementValue(i);
|
|
840
|
+
break;
|
|
841
|
+
}
|
|
842
|
+
case "ArrowDown": {
|
|
843
|
+
this.decrementValue(i);
|
|
844
|
+
break;
|
|
845
|
+
}
|
|
846
|
+
case "ArrowRight": {
|
|
847
|
+
this.focusSegment(t, "next");
|
|
848
|
+
break;
|
|
849
|
+
}
|
|
850
|
+
case "ArrowLeft": {
|
|
851
|
+
this.focusSegment(t, "previous");
|
|
852
|
+
break;
|
|
853
|
+
}
|
|
854
|
+
case "Enter":
|
|
855
|
+
case "Space": {
|
|
856
|
+
this.commitValue();
|
|
857
|
+
break;
|
|
858
|
+
}
|
|
859
|
+
case "Backspace":
|
|
860
|
+
case "Delete": {
|
|
861
|
+
e.preventDefault(), ((a = this.segments.getByType(i)) == null ? void 0 : a.value) === void 0 ? this.focusSegment(t, "previous") : this.clearSegmentContent(i);
|
|
862
|
+
break;
|
|
863
|
+
}
|
|
1130
864
|
}
|
|
1131
|
-
}
|
|
1132
865
|
}
|
|
1133
866
|
/**
|
|
1134
867
|
* The modifier parameters of the component
|
|
@@ -1141,15 +874,13 @@ class LuzmoDateTimePicker extends ManageHelpText(
|
|
|
1141
874
|
currentDate: this.currentDate
|
|
1142
875
|
};
|
|
1143
876
|
}
|
|
1144
|
-
incrementValue(
|
|
1145
|
-
const
|
|
1146
|
-
this.segments =
|
|
1147
|
-
this.dispatchInput();
|
|
877
|
+
incrementValue(e) {
|
|
878
|
+
const t = new ye(this.modifierParams);
|
|
879
|
+
this.segments = t.modify(e), this.dispatchInput();
|
|
1148
880
|
}
|
|
1149
|
-
decrementValue(
|
|
1150
|
-
const
|
|
1151
|
-
this.segments =
|
|
1152
|
-
this.dispatchInput();
|
|
881
|
+
decrementValue(e) {
|
|
882
|
+
const t = new xe(this.modifierParams);
|
|
883
|
+
this.segments = t.modify(e), this.dispatchInput();
|
|
1153
884
|
}
|
|
1154
885
|
/**
|
|
1155
886
|
* Focuses the segment according to the direction, if there is one to focus on
|
|
@@ -1157,19 +888,13 @@ class LuzmoDateTimePicker extends ManageHelpText(
|
|
|
1157
888
|
* @param segment - Segment on which the event was triggered (the segment being changed)
|
|
1158
889
|
* @param elementToFocus - Defines which element will be focused: is it the previous one or the next one?
|
|
1159
890
|
*/
|
|
1160
|
-
focusSegment(
|
|
1161
|
-
let
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
if (!siblingSegment) {
|
|
891
|
+
focusSegment(e, t) {
|
|
892
|
+
let i = !1, a = e;
|
|
893
|
+
for (; !i; ) {
|
|
894
|
+
const r = t === "previous" ? a.previousElementSibling : a.nextElementSibling;
|
|
895
|
+
if (!r)
|
|
1166
896
|
break;
|
|
1167
|
-
|
|
1168
|
-
if (siblingSegment.getAttribute("contenteditable")) {
|
|
1169
|
-
siblingSegment.focus();
|
|
1170
|
-
segmentFound = true;
|
|
1171
|
-
}
|
|
1172
|
-
currentSegment = siblingSegment;
|
|
897
|
+
r.getAttribute("contenteditable") && (r.focus(), i = !0), a = r;
|
|
1173
898
|
}
|
|
1174
899
|
}
|
|
1175
900
|
/**
|
|
@@ -1177,42 +902,36 @@ class LuzmoDateTimePicker extends ManageHelpText(
|
|
|
1177
902
|
* is different from the previous commited value, dispatch a change event.
|
|
1178
903
|
*/
|
|
1179
904
|
commitValue() {
|
|
1180
|
-
if (this._value && this.previousCommitedValue && this._value.compare(this.previousCommitedValue) === 0)
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
905
|
+
if (!(this._value && this.previousCommitedValue && this._value.compare(this.previousCommitedValue) === 0)) {
|
|
906
|
+
if (this._value === void 0 && this.previousCommitedValue === void 0) {
|
|
907
|
+
const e = this.segments.editableValues.every(
|
|
908
|
+
(t) => t === void 0
|
|
909
|
+
);
|
|
910
|
+
this.invalid = !e;
|
|
911
|
+
return;
|
|
912
|
+
}
|
|
913
|
+
this.invalid = !!(this._value === void 0 || this.isNonCompliantValue()), this.previousCommitedValue = this._value, this.dispatchChange();
|
|
1188
914
|
}
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
this.
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
}
|
|
1200
|
-
handleInput(event) {
|
|
1201
|
-
event.stopPropagation();
|
|
1202
|
-
const segmentType = event.target.dataset.type;
|
|
1203
|
-
const valuesBefore = this.segments.editableValues;
|
|
1204
|
-
const inputModifier = new InputModifier({
|
|
915
|
+
}
|
|
916
|
+
clearSegmentContent(e) {
|
|
917
|
+
const t = this.segments.editableValues, i = new ke(this.modifierParams);
|
|
918
|
+
this.segments = i.modify(e);
|
|
919
|
+
const a = this.segments.editableValues;
|
|
920
|
+
R(t, a) || this.dispatchInput();
|
|
921
|
+
}
|
|
922
|
+
handleInput(e) {
|
|
923
|
+
e.stopPropagation();
|
|
924
|
+
const t = e.target.dataset.type, i = this.segments.editableValues, a = new we({
|
|
1205
925
|
...this.modifierParams,
|
|
1206
|
-
eventData:
|
|
926
|
+
eventData: e.data,
|
|
1207
927
|
numberParser: this.numberParser
|
|
1208
928
|
});
|
|
1209
|
-
this.segments =
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
event.target
|
|
929
|
+
this.segments = a.modify(t), this.updateSegmentContent(
|
|
930
|
+
this.segments.getByType(t),
|
|
931
|
+
e.target
|
|
1213
932
|
);
|
|
1214
|
-
const
|
|
1215
|
-
|
|
933
|
+
const r = this.segments.editableValues;
|
|
934
|
+
R(i, r) || this.dispatchInput();
|
|
1216
935
|
}
|
|
1217
936
|
/**
|
|
1218
937
|
* Updates the content of the segments by binding it to the `.innerText` property of the element,
|
|
@@ -1222,105 +941,79 @@ class LuzmoDateTimePicker extends ManageHelpText(
|
|
|
1222
941
|
* @param segment - Segment on which the event was triggered (the segment being changed)
|
|
1223
942
|
* @param event - Triggered event details
|
|
1224
943
|
*/
|
|
1225
|
-
updateSegmentContent(
|
|
1226
|
-
|
|
1227
|
-
}
|
|
1228
|
-
createOutputString(
|
|
1229
|
-
|
|
1230
|
-
if (isZonedDateTime(value))
|
|
1231
|
-
return this._value.toAbsoluteString();
|
|
1232
|
-
return new Date(this._value.toString()).toISOString();
|
|
1233
|
-
}
|
|
1234
|
-
return "";
|
|
944
|
+
updateSegmentContent(e, t) {
|
|
945
|
+
t.textContent = e.value === void 0 ? e.placeholder : e.formatted;
|
|
946
|
+
}
|
|
947
|
+
createOutputString(e) {
|
|
948
|
+
return e ? P(e) ? this._value.toAbsoluteString() : new Date(this._value.toString()).toISOString() : "";
|
|
1235
949
|
}
|
|
1236
950
|
dispatchChange() {
|
|
1237
|
-
const
|
|
951
|
+
const e = this.createOutputString(this._value);
|
|
1238
952
|
this.dispatchEvent(
|
|
1239
953
|
new CustomEvent("change", {
|
|
1240
|
-
bubbles:
|
|
1241
|
-
composed:
|
|
1242
|
-
cancelable:
|
|
954
|
+
bubbles: !0,
|
|
955
|
+
composed: !0,
|
|
956
|
+
cancelable: !0,
|
|
1243
957
|
detail: {
|
|
1244
|
-
value
|
|
958
|
+
value: e
|
|
1245
959
|
}
|
|
1246
960
|
})
|
|
1247
961
|
);
|
|
1248
962
|
}
|
|
1249
963
|
dispatchInput() {
|
|
1250
|
-
const
|
|
964
|
+
const e = this.createOutputString(this._value);
|
|
1251
965
|
this.dispatchEvent(
|
|
1252
966
|
new CustomEvent("input", {
|
|
1253
|
-
bubbles:
|
|
1254
|
-
composed:
|
|
1255
|
-
cancelable:
|
|
967
|
+
bubbles: !0,
|
|
968
|
+
composed: !0,
|
|
969
|
+
cancelable: !0,
|
|
1256
970
|
detail: {
|
|
1257
|
-
value
|
|
971
|
+
value: e
|
|
1258
972
|
}
|
|
1259
973
|
})
|
|
1260
974
|
);
|
|
1261
975
|
}
|
|
1262
976
|
setValueFromSegments() {
|
|
1263
|
-
const
|
|
1264
|
-
if (!
|
|
1265
|
-
|
|
1266
|
-
this._value = void 0;
|
|
977
|
+
const e = this.segments.getFormattedDate(this.precision);
|
|
978
|
+
if (!e) {
|
|
979
|
+
this._value && this.dispatchChange(), this._value = void 0;
|
|
1267
980
|
return;
|
|
1268
981
|
}
|
|
1269
|
-
|
|
1270
|
-
const
|
|
1271
|
-
|
|
1272
|
-
if (isZonedDateTime(mostSpecificDateValue))
|
|
1273
|
-
this._value = toZoned(formattedDate, this._timeZone);
|
|
1274
|
-
else if (isCalendarDateTime(mostSpecificDateValue))
|
|
1275
|
-
this._value = toCalendarDateTime(formattedDate);
|
|
1276
|
-
else this._value = toCalendarDate(formattedDate);
|
|
1277
|
-
} else {
|
|
1278
|
-
this._value = formattedDate;
|
|
1279
|
-
}
|
|
982
|
+
this._value === void 0 && this.dispatchChange();
|
|
983
|
+
const t = this.mostSpecificDateValue;
|
|
984
|
+
t ? P(t) ? this._value = S(e, this._timeZone) : B(t) ? this._value = D(e) : this._value = C(e) : this._value = e;
|
|
1280
985
|
}
|
|
1281
986
|
setSegments() {
|
|
1282
|
-
var
|
|
1283
|
-
const
|
|
1284
|
-
const segments = segmentsFactory.createSegments(
|
|
987
|
+
var i, a, r, s;
|
|
988
|
+
const t = new Me(this.dateFormatter).createSegments(
|
|
1285
989
|
this.currentDate,
|
|
1286
990
|
this._value !== void 0
|
|
1287
991
|
);
|
|
1288
992
|
if (this.dateFormat) {
|
|
1289
|
-
const
|
|
1290
|
-
(
|
|
1291
|
-
)
|
|
1292
|
-
|
|
1293
|
-
(d) => d.type === SegmentTypes.Day
|
|
993
|
+
const l = t.all.findIndex(
|
|
994
|
+
(c) => c.type === o.Month
|
|
995
|
+
), d = t.all.findIndex(
|
|
996
|
+
(c) => c.type === o.Day
|
|
1294
997
|
);
|
|
1295
|
-
if (
|
|
1296
|
-
if (this.dateFormat === "mmdd" &&
|
|
1297
|
-
const
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
segments.all[dayIndex] = segments.all[monthIndex];
|
|
1303
|
-
segments.all[monthIndex] = temp;
|
|
998
|
+
if (l !== -1 && d !== -1) {
|
|
999
|
+
if (this.dateFormat === "mmdd" && l > d) {
|
|
1000
|
+
const c = t.all[l];
|
|
1001
|
+
t.all[l] = t.all[d], t.all[d] = c;
|
|
1002
|
+
} else if (this.dateFormat === "ddmm" && d > l) {
|
|
1003
|
+
const c = t.all[d];
|
|
1004
|
+
t.all[d] = t.all[l], t.all[l] = c;
|
|
1304
1005
|
}
|
|
1305
1006
|
}
|
|
1306
1007
|
}
|
|
1307
|
-
|
|
1308
|
-
if (((_b = (_a = segments.all) == null ? void 0 : _a[1]) == null ? void 0 : _b.type) === SegmentTypes.Literal) {
|
|
1309
|
-
segments.all[1].formatted = this.dateSeparator;
|
|
1310
|
-
}
|
|
1311
|
-
if (((_d = (_c = segments.all) == null ? void 0 : _c[3]) == null ? void 0 : _d.type) === SegmentTypes.Literal) {
|
|
1312
|
-
segments.all[3].formatted = this.dateSeparator;
|
|
1313
|
-
}
|
|
1314
|
-
}
|
|
1315
|
-
this.segments = segments;
|
|
1008
|
+
typeof this.dateSeparator == "string" && this.dateSeparator && (((a = (i = t.all) == null ? void 0 : i[1]) == null ? void 0 : a.type) === o.Literal && (t.all[1].formatted = this.dateSeparator), ((s = (r = t.all) == null ? void 0 : r[3]) == null ? void 0 : s.type) === o.Literal && (t.all[3].formatted = this.dateSeparator)), this.segments = t;
|
|
1316
1009
|
}
|
|
1317
1010
|
setNumberParser() {
|
|
1318
|
-
this.numberParser = new
|
|
1011
|
+
this.numberParser = new se(this._language, {
|
|
1319
1012
|
maximumFractionDigits: 0
|
|
1320
1013
|
});
|
|
1321
1014
|
}
|
|
1322
1015
|
setDateFormatter() {
|
|
1323
|
-
this.dateFormatter = new
|
|
1016
|
+
this.dateFormatter = new N(this._language, {
|
|
1324
1017
|
day: "2-digit",
|
|
1325
1018
|
month: "2-digit",
|
|
1326
1019
|
year: "numeric",
|
|
@@ -1328,113 +1021,106 @@ class LuzmoDateTimePicker extends ManageHelpText(
|
|
|
1328
1021
|
});
|
|
1329
1022
|
}
|
|
1330
1023
|
setAriaDateFormatter() {
|
|
1331
|
-
this.ariaDateFormatter = new
|
|
1024
|
+
this.ariaDateFormatter = new N(this._language, {
|
|
1332
1025
|
day: "numeric",
|
|
1333
1026
|
month: "long",
|
|
1334
1027
|
year: "numeric",
|
|
1335
1028
|
...this.getTimeOptions("numeric")
|
|
1336
1029
|
});
|
|
1337
1030
|
}
|
|
1338
|
-
getTimeOptions(
|
|
1031
|
+
getTimeOptions(e) {
|
|
1339
1032
|
switch (this.precision) {
|
|
1340
|
-
case
|
|
1033
|
+
case p.Millisecond:
|
|
1341
1034
|
return {
|
|
1342
|
-
hour:
|
|
1343
|
-
minute:
|
|
1344
|
-
second:
|
|
1035
|
+
hour: e,
|
|
1036
|
+
minute: e,
|
|
1037
|
+
second: e,
|
|
1345
1038
|
fractionalSecondDigits: 3
|
|
1346
1039
|
};
|
|
1347
|
-
|
|
1348
|
-
case Precisions.Second: {
|
|
1040
|
+
case p.Second:
|
|
1349
1041
|
return {
|
|
1350
|
-
hour:
|
|
1351
|
-
minute:
|
|
1352
|
-
second:
|
|
1042
|
+
hour: e,
|
|
1043
|
+
minute: e,
|
|
1044
|
+
second: e
|
|
1353
1045
|
};
|
|
1354
|
-
|
|
1355
|
-
case Precisions.Minute: {
|
|
1046
|
+
case p.Minute:
|
|
1356
1047
|
return {
|
|
1357
|
-
hour:
|
|
1358
|
-
minute:
|
|
1048
|
+
hour: e,
|
|
1049
|
+
minute: e
|
|
1359
1050
|
};
|
|
1360
|
-
|
|
1361
|
-
case Precisions.Hour: {
|
|
1051
|
+
case p.Hour:
|
|
1362
1052
|
return {
|
|
1363
|
-
hour:
|
|
1053
|
+
hour: e
|
|
1364
1054
|
};
|
|
1365
|
-
|
|
1366
|
-
default: {
|
|
1055
|
+
default:
|
|
1367
1056
|
return {};
|
|
1368
|
-
}
|
|
1369
1057
|
}
|
|
1370
1058
|
}
|
|
1371
1059
|
}
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
],
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
],
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
],
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
],
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
],
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
],
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
],
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
],
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
],
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
],
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
],
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
],
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
],
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
],
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
],
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
],
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
],
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
],
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
],
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
],
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
],
|
|
1435
|
-
|
|
1436
|
-
customElements.define("luzmo-date-time-picker", LuzmoDateTimePicker);
|
|
1437
|
-
}
|
|
1060
|
+
m([
|
|
1061
|
+
b({ type: String, reflect: !0 })
|
|
1062
|
+
], u.prototype, "value", 2);
|
|
1063
|
+
m([
|
|
1064
|
+
b({ type: String, reflect: !0 })
|
|
1065
|
+
], u.prototype, "min", 2);
|
|
1066
|
+
m([
|
|
1067
|
+
b({ type: String, reflect: !0 })
|
|
1068
|
+
], u.prototype, "max", 2);
|
|
1069
|
+
m([
|
|
1070
|
+
b({ type: String, attribute: "date-format", reflect: !0 })
|
|
1071
|
+
], u.prototype, "dateFormat", 2);
|
|
1072
|
+
m([
|
|
1073
|
+
b({ type: String, attribute: "date-separator", reflect: !0 })
|
|
1074
|
+
], u.prototype, "dateSeparator", 2);
|
|
1075
|
+
m([
|
|
1076
|
+
b({ type: String, reflect: !0 })
|
|
1077
|
+
], u.prototype, "precision", 1);
|
|
1078
|
+
m([
|
|
1079
|
+
b({ type: Boolean, reflect: !0 })
|
|
1080
|
+
], u.prototype, "invalid", 2);
|
|
1081
|
+
m([
|
|
1082
|
+
b({ type: Boolean, reflect: !0 })
|
|
1083
|
+
], u.prototype, "readonly", 2);
|
|
1084
|
+
m([
|
|
1085
|
+
b({ type: Boolean, reflect: !0 })
|
|
1086
|
+
], u.prototype, "quiet", 2);
|
|
1087
|
+
m([
|
|
1088
|
+
b({ type: String, reflect: !0 })
|
|
1089
|
+
], u.prototype, "placement", 2);
|
|
1090
|
+
m([
|
|
1091
|
+
b({ type: String, attribute: "time-zone", reflect: !0 })
|
|
1092
|
+
], u.prototype, "timeZone", 2);
|
|
1093
|
+
m([
|
|
1094
|
+
b({ type: String, reflect: !0 })
|
|
1095
|
+
], u.prototype, "language", 2);
|
|
1096
|
+
m([
|
|
1097
|
+
b({ attribute: !1 })
|
|
1098
|
+
], u.prototype, "labels", 2);
|
|
1099
|
+
m([
|
|
1100
|
+
b({ type: Boolean, reflect: !0 })
|
|
1101
|
+
], u.prototype, "focused", 2);
|
|
1102
|
+
m([
|
|
1103
|
+
M()
|
|
1104
|
+
], u.prototype, "_value", 2);
|
|
1105
|
+
m([
|
|
1106
|
+
M()
|
|
1107
|
+
], u.prototype, "_min", 2);
|
|
1108
|
+
m([
|
|
1109
|
+
M()
|
|
1110
|
+
], u.prototype, "_max", 2);
|
|
1111
|
+
m([
|
|
1112
|
+
M()
|
|
1113
|
+
], u.prototype, "segments", 2);
|
|
1114
|
+
m([
|
|
1115
|
+
M()
|
|
1116
|
+
], u.prototype, "isCalendarOpen", 2);
|
|
1117
|
+
m([
|
|
1118
|
+
W(".editable-segment")
|
|
1119
|
+
], u.prototype, "firstEditableSegment", 2);
|
|
1120
|
+
m([
|
|
1121
|
+
W(".input")
|
|
1122
|
+
], u.prototype, "input", 2);
|
|
1123
|
+
customElements.get("luzmo-date-time-picker") || customElements.define("luzmo-date-time-picker", u);
|
|
1438
1124
|
export {
|
|
1439
|
-
LuzmoDateTimePicker
|
|
1125
|
+
u as LuzmoDateTimePicker
|
|
1440
1126
|
};
|