@esri/solutions-components 0.8.8 → 0.8.10

Sign up to get free protection for your applications and to get access to all the features.
Files changed (121) hide show
  1. package/dist/assets/t9n/crowdsource-reporter/resources.json +11 -2
  2. package/dist/assets/t9n/crowdsource-reporter/resources_en.json +11 -2
  3. package/dist/cjs/{calcite-action-menu_2.cjs.entry.js → calcite-action-menu_3.cjs.entry.js} +114 -7
  4. package/dist/cjs/calcite-alert_4.cjs.entry.js +47 -5
  5. package/dist/cjs/{calcite-input-date-picker_3.cjs.entry.js → calcite-block_5.cjs.entry.js} +691 -13
  6. package/dist/cjs/{calcite-combobox_5.cjs.entry.js → calcite-combobox_3.cjs.entry.js} +876 -844
  7. package/dist/cjs/calcite-dropdown_4.cjs.entry.js +1023 -0
  8. package/dist/cjs/{calcite-flow_5.cjs.entry.js → calcite-flow_6.cjs.entry.js} +327 -2
  9. package/dist/cjs/card-manager_3.cjs.entry.js +5 -5
  10. package/dist/cjs/crowdsource-manager.cjs.entry.js +25 -17
  11. package/dist/cjs/crowdsource-reporter.cjs.entry.js +122 -21
  12. package/dist/cjs/{downloadUtils-8b05d7cc.js → downloadUtils-dd787ddf.js} +2 -2
  13. package/dist/cjs/{index.es-e7587227.js → index.es-29fa176d.js} +2 -2
  14. package/dist/cjs/loader.cjs.js +1 -1
  15. package/dist/cjs/map-select-tools_3.cjs.entry.js +8 -8
  16. package/dist/cjs/{mapViewUtils-3e0fa457.js → mapViewUtils-82018df6.js} +12 -6
  17. package/dist/cjs/public-notification.cjs.entry.js +2 -2
  18. package/dist/cjs/solutions-components.cjs.js +1 -1
  19. package/dist/collection/collection-manifest.json +1 -0
  20. package/dist/collection/components/create-feature/create-feature.js +18 -0
  21. package/dist/collection/components/crowdsource-manager/crowdsource-manager.css +15 -0
  22. package/dist/collection/components/crowdsource-manager/crowdsource-manager.js +48 -16
  23. package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.css +16 -0
  24. package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.js +155 -35
  25. package/dist/collection/components/feature-details/feature-details.css +18 -0
  26. package/dist/collection/components/feature-details/feature-details.js +500 -0
  27. package/dist/collection/components/feature-details/test/feature-details.e2e.js +14 -0
  28. package/dist/collection/components/feature-details/test/feature-details.spec.js +22 -0
  29. package/dist/collection/components/feature-list/feature-list.js +14 -1
  30. package/dist/collection/components/info-card/info-card.css +15 -5
  31. package/dist/collection/components/info-card/info-card.js +179 -5
  32. package/dist/collection/components/layer-table/layer-table.js +2 -2
  33. package/dist/collection/components/map-card/map-card.js +1 -1
  34. package/dist/collection/components/map-select-tools/map-select-tools.js +5 -5
  35. package/dist/collection/components/refine-selection/refine-selection.js +1 -1
  36. package/dist/collection/demos/crowdsource-manager.html +7 -2
  37. package/dist/collection/demos/crowdsource-reporter.html +115 -1
  38. package/dist/collection/utils/mapViewUtils.js +12 -6
  39. package/dist/collection/utils/mapViewUtils.ts +14 -6
  40. package/dist/components/create-feature2.js +4 -0
  41. package/dist/components/crowdsource-manager.js +26 -18
  42. package/dist/components/crowdsource-reporter.js +270 -81
  43. package/dist/components/feature-details.d.ts +11 -0
  44. package/dist/components/feature-details.js +11 -0
  45. package/dist/components/feature-details2.js +449 -0
  46. package/dist/components/feature-list2.js +14 -1
  47. package/dist/components/info-card2.js +54 -5
  48. package/dist/components/layer-table2.js +2 -2
  49. package/dist/components/map-card2.js +1 -1
  50. package/dist/components/map-select-tools2.js +5 -5
  51. package/dist/components/mapViewUtils.js +12 -6
  52. package/dist/components/refine-selection2.js +1 -1
  53. package/dist/esm/{calcite-action-menu_2.entry.js → calcite-action-menu_3.entry.js} +118 -12
  54. package/dist/esm/calcite-alert_4.entry.js +47 -5
  55. package/dist/esm/{calcite-input-date-picker_3.entry.js → calcite-block_5.entry.js} +688 -12
  56. package/dist/esm/{calcite-combobox_5.entry.js → calcite-combobox_3.entry.js} +878 -844
  57. package/dist/esm/calcite-date-picker-day_3.entry.js +1 -1
  58. package/dist/esm/calcite-dropdown_4.entry.js +1016 -0
  59. package/dist/esm/{calcite-flow_5.entry.js → calcite-flow_6.entry.js} +327 -3
  60. package/dist/esm/card-manager_3.entry.js +5 -5
  61. package/dist/esm/crowdsource-manager.entry.js +26 -18
  62. package/dist/esm/crowdsource-reporter.entry.js +122 -21
  63. package/dist/esm/{date-5630530d.js → date-0c026a8b.js} +1 -1
  64. package/dist/esm/{downloadUtils-0c1e4d7b.js → downloadUtils-25aa808f.js} +2 -2
  65. package/dist/esm/{index.es-286e3cfa.js → index.es-a16c9db4.js} +2 -2
  66. package/dist/esm/loader.js +1 -1
  67. package/dist/esm/map-select-tools_3.entry.js +8 -8
  68. package/dist/esm/{mapViewUtils-253178f1.js → mapViewUtils-c83c03a4.js} +12 -6
  69. package/dist/esm/public-notification.entry.js +2 -2
  70. package/dist/esm/solutions-components.js +1 -1
  71. package/dist/solutions-components/demos/crowdsource-manager.html +7 -2
  72. package/dist/solutions-components/demos/crowdsource-reporter.html +115 -1
  73. package/dist/solutions-components/p-2f687975.entry.js +17 -0
  74. package/dist/solutions-components/{p-813fd8a4.entry.js → p-3e5085ae.entry.js} +2 -2
  75. package/dist/solutions-components/p-40039b84.entry.js +6 -0
  76. package/dist/solutions-components/p-511b1c91.entry.js +23 -0
  77. package/dist/solutions-components/{p-94de9279.js → p-5817d78c.js} +1 -1
  78. package/dist/solutions-components/{p-15f9624a.entry.js → p-58997cc1.entry.js} +1 -1
  79. package/dist/solutions-components/p-82e398cb.entry.js +17 -0
  80. package/dist/solutions-components/p-ae75d7d7.entry.js +6 -0
  81. package/dist/solutions-components/{p-331b5d1e.js → p-b1376c75.js} +2 -2
  82. package/dist/solutions-components/p-b5acfcd8.entry.js +6 -0
  83. package/dist/solutions-components/{p-212b02e7.js → p-bdd77f17.js} +1 -1
  84. package/dist/solutions-components/{p-038fcd93.entry.js → p-c273ab7a.entry.js} +1 -1
  85. package/dist/solutions-components/p-d742b915.entry.js +29 -0
  86. package/dist/solutions-components/p-d9c89479.js +36 -0
  87. package/dist/solutions-components/p-dfad61a8.entry.js +24 -0
  88. package/dist/solutions-components/p-fffc9e08.entry.js +6 -0
  89. package/dist/solutions-components/solutions-components.esm.js +1 -1
  90. package/dist/solutions-components/utils/mapViewUtils.ts +14 -6
  91. package/dist/types/components/create-feature/create-feature.d.ts +4 -4
  92. package/dist/types/components/crowdsource-manager/crowdsource-manager.d.ts +13 -1
  93. package/dist/types/components/crowdsource-reporter/crowdsource-reporter.d.ts +91 -10
  94. package/dist/types/components/feature-details/feature-details.d.ts +151 -0
  95. package/dist/types/components/feature-list/feature-list.d.ts +6 -0
  96. package/dist/types/components/info-card/info-card.d.ts +33 -1
  97. package/dist/types/components.d.ts +148 -12
  98. package/dist/types/preact.d.ts +9 -2
  99. package/dist/types/utils/mapViewUtils.d.ts +5 -3
  100. package/package.json +1 -1
  101. package/dist/cjs/calcite-block_2.cjs.entry.js +0 -652
  102. package/dist/cjs/calcite-graph_2.cjs.entry.js +0 -1055
  103. package/dist/cjs/calcite-scrim.cjs.entry.js +0 -125
  104. package/dist/cjs/utils-7bc7f595.js +0 -64
  105. package/dist/esm/calcite-block_2.entry.js +0 -647
  106. package/dist/esm/calcite-graph_2.entry.js +0 -1050
  107. package/dist/esm/calcite-scrim.entry.js +0 -121
  108. package/dist/esm/utils-9fb4104a.js +0 -61
  109. package/dist/solutions-components/p-04c37d69.entry.js +0 -17
  110. package/dist/solutions-components/p-0b92e4b1.entry.js +0 -11
  111. package/dist/solutions-components/p-13ca3b00.entry.js +0 -6
  112. package/dist/solutions-components/p-238d3b5f.entry.js +0 -6
  113. package/dist/solutions-components/p-3af79063.js +0 -36
  114. package/dist/solutions-components/p-80b11ec1.entry.js +0 -17
  115. package/dist/solutions-components/p-a3a11749.entry.js +0 -6
  116. package/dist/solutions-components/p-aec06ce4.entry.js +0 -18
  117. package/dist/solutions-components/p-bfdf89c2.js +0 -11
  118. package/dist/solutions-components/p-c4ff3b52.entry.js +0 -17
  119. package/dist/solutions-components/p-ced067bd.entry.js +0 -17
  120. package/dist/solutions-components/p-d136eab0.entry.js +0 -23
  121. package/dist/solutions-components/p-e0446d5b.entry.js +0 -6
@@ -1,652 +0,0 @@
1
- /*!
2
- * Copyright 2022 Esri
3
- * Licensed under the Apache License, Version 2.0
4
- * http://www.apache.org/licenses/LICENSE-2.0
5
- */
6
- 'use strict';
7
-
8
- Object.defineProperty(exports, '__esModule', { value: true });
9
-
10
- const index = require('./index-105cf2b9.js');
11
- const conditionalSlot = require('./conditionalSlot-9d7b60d1.js');
12
- const dom = require('./dom-c9c2c835.js');
13
- const interactive = require('./interactive-3ab7044d.js');
14
- const locale = require('./locale-d237c9d5.js');
15
- const t9n = require('./t9n-993a84de.js');
16
- const Heading = require('./Heading-bd401e0a.js');
17
- const loadable = require('./loadable-5a794992.js');
18
- const openCloseComponent = require('./openCloseComponent-19a769d0.js');
19
- const date = require('./date-9de4dd6f.js');
20
- const utils = require('./utils-7bc7f595.js');
21
- require('./observers-db4527e4.js');
22
- require('./guid-ae73cd27.js');
23
- require('./resources-9447c777.js');
24
- require('./browser-d08a5f99.js');
25
- require('./key-c5504030.js');
26
-
27
- /*!
28
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
29
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
30
- * v2.4.0
31
- */
32
- const IDS = {
33
- content: "content",
34
- toggle: "toggle",
35
- header: "header",
36
- };
37
- const CSS = {
38
- button: "button",
39
- container: "container",
40
- content: "content",
41
- controlContainer: "control-container",
42
- description: "description",
43
- header: "header",
44
- headerContainer: "header-container",
45
- heading: "heading",
46
- icon: "icon",
47
- invalid: "invalid",
48
- statusIcon: "status-icon",
49
- summary: "summary",
50
- title: "title",
51
- toggle: "toggle",
52
- toggleIcon: "toggle-icon",
53
- valid: "valid",
54
- };
55
- const SLOTS = {
56
- icon: "icon",
57
- control: "control",
58
- headerMenuActions: "header-menu-actions",
59
- };
60
- const ICONS = {
61
- opened: "chevron-up",
62
- closed: "chevron-down",
63
- valid: "check-circle",
64
- invalid: "exclamation-mark-triangle",
65
- };
66
-
67
- const blockCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);padding:0px;transition-property:margin;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0.215, 0.440, 0.420, 0.880);flex-basis:auto}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.header{justify-content:flex-start;padding:0px}.header,.toggle{grid-area:header}.header-container{display:grid;align-items:stretch;grid-template:auto/auto 1fr auto auto;grid-template-areas:\"handle header control menu\";grid-column:header-start/menu-end;grid-row:1/2}.toggle{margin:0px;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0px;font-family:inherit;outline-color:transparent;text-align:initial;background-color:transparent}.toggle:hover{background-color:var(--calcite-color-foreground-2)}.toggle:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n -2px *\n calc(\n 1 -\n 2 * clamp(\n 0,\n var(--calcite-offset-invert-focus),\n 1\n )\n )\n )}calcite-loader[inline]{grid-area:control;align-self:center}calcite-handle{grid-area:handle}.title{margin:0px;padding:0.75rem}.header .title .heading{padding:0px;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-medium);line-height:1.25;color:var(--calcite-color-text-2);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);word-wrap:break-word;word-break:break-word}.description{margin-block-start:0.125rem;padding:0px;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-color-text-3);word-wrap:break-word;word-break:break-word}.icon{display:flex;margin-inline-start:0.75rem;margin-inline-end:0px}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}@keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}.toggle-icon{margin-block:0.75rem;align-self:center;justify-self:end;color:var(--calcite-color-text-3);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:0.75rem;margin-inline-start:auto}.toggle:hover .toggle-icon{color:var(--calcite-color-text-1)}.container{position:relative;display:flex;block-size:100%;flex-direction:column}.content{position:relative;min-block-size:0px;flex:1 1 0%}@keyframes in{0%{opacity:0}100%{opacity:1}}.content{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;padding-block:var(--calcite-block-padding, 0.5rem);padding-inline:var(--calcite-block-padding, 0.625rem)}.control-container{margin:0px;display:flex;grid-area:control}calcite-action-menu{grid-area:menu}:host([open]){margin-block:0.5rem}:host([open]) .header .title .heading{color:var(--calcite-color-text-1)}:host([hidden]){display:none}[hidden]{display:none}";
68
-
69
- const Block = class {
70
- constructor(hostRef) {
71
- index.registerInstance(this, hostRef);
72
- this.calciteBlockBeforeClose = index.createEvent(this, "calciteBlockBeforeClose", 6);
73
- this.calciteBlockBeforeOpen = index.createEvent(this, "calciteBlockBeforeOpen", 6);
74
- this.calciteBlockClose = index.createEvent(this, "calciteBlockClose", 6);
75
- this.calciteBlockOpen = index.createEvent(this, "calciteBlockOpen", 6);
76
- this.calciteBlockToggle = index.createEvent(this, "calciteBlockToggle", 6);
77
- this.openTransitionProp = "opacity";
78
- // --------------------------------------------------------------------------
79
- //
80
- // Private Methods
81
- //
82
- // --------------------------------------------------------------------------
83
- this.onHeaderClick = () => {
84
- this.open = !this.open;
85
- this.calciteBlockToggle.emit();
86
- };
87
- this.setTransitionEl = (el) => {
88
- this.transitionEl = el;
89
- };
90
- this.collapsible = false;
91
- this.disabled = false;
92
- this.dragHandle = false;
93
- this.heading = undefined;
94
- this.headingLevel = undefined;
95
- this.loading = false;
96
- this.open = false;
97
- this.status = undefined;
98
- this.description = undefined;
99
- this.messages = undefined;
100
- this.messageOverrides = undefined;
101
- this.overlayPositioning = "absolute";
102
- this.effectiveLocale = undefined;
103
- this.defaultMessages = undefined;
104
- }
105
- openHandler() {
106
- openCloseComponent.onToggleOpenCloseComponent(this);
107
- }
108
- onMessagesChange() {
109
- /* wired up by t9n util */
110
- }
111
- //--------------------------------------------------------------------------
112
- //
113
- // Public Methods
114
- //
115
- //--------------------------------------------------------------------------
116
- /**
117
- * Sets focus on the component's first tabbable element.
118
- *
119
- */
120
- async setFocus() {
121
- await loadable.componentFocusable(this);
122
- dom.focusFirstTabbable(this.el);
123
- }
124
- onBeforeOpen() {
125
- this.calciteBlockBeforeOpen.emit();
126
- }
127
- onOpen() {
128
- this.calciteBlockOpen.emit();
129
- }
130
- onBeforeClose() {
131
- this.calciteBlockBeforeClose.emit();
132
- }
133
- onClose() {
134
- this.calciteBlockClose.emit();
135
- }
136
- effectiveLocaleChange() {
137
- t9n.updateMessages(this, this.effectiveLocale);
138
- }
139
- // --------------------------------------------------------------------------
140
- //
141
- // Lifecycle
142
- //
143
- // --------------------------------------------------------------------------
144
- connectedCallback() {
145
- conditionalSlot.connectConditionalSlotComponent(this);
146
- interactive.connectInteractive(this);
147
- locale.connectLocalized(this);
148
- t9n.connectMessages(this);
149
- }
150
- disconnectedCallback() {
151
- interactive.disconnectInteractive(this);
152
- locale.disconnectLocalized(this);
153
- t9n.disconnectMessages(this);
154
- conditionalSlot.disconnectConditionalSlotComponent(this);
155
- }
156
- async componentWillLoad() {
157
- await t9n.setUpMessages(this);
158
- loadable.setUpLoadableComponent(this);
159
- if (this.open) {
160
- openCloseComponent.onToggleOpenCloseComponent(this);
161
- }
162
- }
163
- componentDidLoad() {
164
- loadable.setComponentLoaded(this);
165
- }
166
- componentDidRender() {
167
- interactive.updateHostInteraction(this);
168
- }
169
- // --------------------------------------------------------------------------
170
- //
171
- // Render Methods
172
- //
173
- // --------------------------------------------------------------------------
174
- renderScrim() {
175
- const { loading } = this;
176
- const defaultSlot = index.h("slot", null);
177
- return [loading ? index.h("calcite-scrim", { loading: loading }) : null, defaultSlot];
178
- }
179
- renderIcon() {
180
- const { loading, messages, status } = this;
181
- const hasSlottedIcon = !!dom.getSlotted(this.el, SLOTS.icon);
182
- return loading ? (index.h("div", { class: CSS.icon, key: "loader" }, index.h("calcite-loader", { inline: true, label: messages.loading }))) : !!status ? (index.h("div", { class: CSS.icon, key: "status-icon" }, index.h("calcite-icon", { class: {
183
- [CSS.statusIcon]: true,
184
- [CSS.valid]: status == "valid",
185
- [CSS.invalid]: status == "invalid",
186
- }, icon: ICONS[status], scale: "s" }))) : hasSlottedIcon ? (index.h("div", { class: CSS.icon, key: "icon-slot" }, index.h("slot", { key: "icon-slot", name: SLOTS.icon }))) : null;
187
- }
188
- renderTitle() {
189
- const { heading, headingLevel, description } = this;
190
- return heading || description ? (index.h("div", { class: CSS.title }, index.h(Heading.Heading, { class: CSS.heading, level: headingLevel }, heading), description ? index.h("div", { class: CSS.description }, description) : null)) : null;
191
- }
192
- render() {
193
- const { collapsible, el, loading, open, heading, messages } = this;
194
- const toggleLabel = open ? messages.collapse : messages.expand;
195
- const headerContent = (index.h("header", { class: CSS.header, id: IDS.header }, this.renderIcon(), this.renderTitle()));
196
- const hasControl = !!dom.getSlotted(el, SLOTS.control);
197
- const hasMenuActions = !!dom.getSlotted(el, SLOTS.headerMenuActions);
198
- const collapseIcon = open ? ICONS.opened : ICONS.closed;
199
- const headerNode = (index.h("div", { class: CSS.headerContainer }, this.dragHandle ? index.h("calcite-handle", { label: heading }) : null, collapsible ? (index.h("button", { "aria-controls": IDS.content, "aria-describedby": IDS.header, "aria-expanded": collapsible ? dom.toAriaBoolean(open) : null, class: CSS.toggle, id: IDS.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, index.h("calcite-icon", { "aria-hidden": "true", class: CSS.toggleIcon, icon: collapseIcon, scale: "s" }))) : (headerContent), hasControl ? (index.h("div", { class: CSS.controlContainer }, index.h("slot", { name: SLOTS.control }))) : null, hasMenuActions ? (index.h("calcite-action-menu", { label: messages.options, overlayPositioning: this.overlayPositioning }, index.h("slot", { name: SLOTS.headerMenuActions }))) : null));
200
- return (index.h(index.Host, null, index.h(interactive.InteractiveContainer, { disabled: this.disabled }, index.h("article", { "aria-busy": dom.toAriaBoolean(loading), class: {
201
- [CSS.container]: true,
202
- } }, headerNode, index.h("section", { "aria-labelledby": IDS.toggle, class: CSS.content, hidden: !open, id: IDS.content,
203
- // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
204
- ref: this.setTransitionEl }, this.renderScrim())))));
205
- }
206
- static get assetsDirs() { return ["assets"]; }
207
- get el() { return index.getElement(this); }
208
- static get watchers() { return {
209
- "open": ["openHandler"],
210
- "messageOverrides": ["onMessagesChange"],
211
- "effectiveLocale": ["effectiveLocaleChange"]
212
- }; }
213
- };
214
- Block.style = blockCss;
215
-
216
- /*!
217
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
218
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
219
- * v2.4.0
220
- */
221
- const HEADING_LEVEL = 2;
222
- const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };
223
-
224
- const datePickerCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:inline-block;inline-size:auto;overflow:visible;border-radius:0px;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-1);vertical-align:top}:host([scale=s]){inline-size:234px;min-inline-size:216px;max-inline-size:380px}:host([scale=m]){inline-size:304px;min-inline-size:272px;max-inline-size:480px}:host([scale=l]){inline-size:370px;min-inline-size:320px;max-inline-size:600px}:host([hidden]){display:none}[hidden]{display:none}";
225
-
226
- const DatePicker = class {
227
- constructor(hostRef) {
228
- index.registerInstance(this, hostRef);
229
- this.calciteDatePickerChange = index.createEvent(this, "calciteDatePickerChange", 6);
230
- this.calciteDatePickerRangeChange = index.createEvent(this, "calciteDatePickerRangeChange", 6);
231
- //--------------------------------------------------------------------------
232
- //
233
- // Private Methods
234
- //
235
- //--------------------------------------------------------------------------
236
- this.keyDownHandler = (event) => {
237
- if (event.key === "Escape") {
238
- this.resetActiveDates();
239
- }
240
- };
241
- this.monthHeaderSelectChange = (event) => {
242
- const date = new Date(event.detail);
243
- if (!this.range) {
244
- this.activeDate = date;
245
- }
246
- else {
247
- if (this.activeRange === "end") {
248
- this.activeEndDate = date;
249
- }
250
- else {
251
- this.activeStartDate = date;
252
- }
253
- this.mostRecentRangeValue = date;
254
- }
255
- };
256
- this.monthActiveDateChange = (event) => {
257
- const date = new Date(event.detail);
258
- if (!this.range) {
259
- this.activeDate = date;
260
- }
261
- else {
262
- if (this.activeRange === "end") {
263
- this.activeEndDate = date;
264
- }
265
- else {
266
- this.activeStartDate = date;
267
- }
268
- this.mostRecentRangeValue = date;
269
- }
270
- };
271
- this.monthHoverChange = (event) => {
272
- if (!this.range) {
273
- this.hoverRange = undefined;
274
- return;
275
- }
276
- const { valueAsDate } = this;
277
- const start = Array.isArray(valueAsDate) && valueAsDate[0];
278
- const end = Array.isArray(valueAsDate) && valueAsDate[1];
279
- const date$1 = new Date(event.detail);
280
- this.hoverRange = {
281
- focused: this.activeRange || "start",
282
- start,
283
- end,
284
- };
285
- if (!this.proximitySelectionDisabled) {
286
- if (start && end) {
287
- const startDiff = date.getDaysDiff(date$1, start);
288
- const endDiff = date.getDaysDiff(date$1, end);
289
- if (endDiff > 0) {
290
- this.hoverRange.end = date$1;
291
- this.hoverRange.focused = "end";
292
- }
293
- else if (startDiff < 0) {
294
- this.hoverRange.start = date$1;
295
- this.hoverRange.focused = "start";
296
- }
297
- else if (startDiff > endDiff) {
298
- this.hoverRange.start = date$1;
299
- this.hoverRange.focused = "start";
300
- }
301
- else {
302
- this.hoverRange.end = date$1;
303
- this.hoverRange.focused = "end";
304
- }
305
- }
306
- else {
307
- if (start) {
308
- if (date$1 < start) {
309
- this.hoverRange = {
310
- focused: "start",
311
- start: date$1,
312
- end: start,
313
- };
314
- }
315
- else {
316
- this.hoverRange.end = date$1;
317
- this.hoverRange.focused = "end";
318
- }
319
- }
320
- }
321
- }
322
- else {
323
- if (!end) {
324
- if (date$1 < start) {
325
- this.hoverRange = {
326
- focused: "start",
327
- start: date$1,
328
- end: start,
329
- };
330
- }
331
- else {
332
- this.hoverRange.end = date$1;
333
- this.hoverRange.focused = "end";
334
- }
335
- }
336
- else {
337
- this.hoverRange = undefined;
338
- }
339
- }
340
- event.stopPropagation();
341
- };
342
- this.monthMouseOutChange = () => {
343
- if (this.hoverRange) {
344
- this.hoverRange = undefined;
345
- }
346
- };
347
- this.resetActiveDates = () => {
348
- const { valueAsDate } = this;
349
- if (!Array.isArray(valueAsDate) && valueAsDate && valueAsDate !== this.activeDate) {
350
- this.activeDate = new Date(valueAsDate);
351
- }
352
- if (Array.isArray(valueAsDate)) {
353
- if (valueAsDate[0] && valueAsDate[0] !== this.activeStartDate) {
354
- this.activeStartDate = new Date(valueAsDate[0]);
355
- }
356
- if (valueAsDate[1] && valueAsDate[1] !== this.activeEndDate) {
357
- this.activeEndDate = new Date(valueAsDate[1]);
358
- }
359
- }
360
- };
361
- /**
362
- * Event handler for when the selected date changes
363
- *
364
- * @param event
365
- */
366
- this.monthDateChange = (event) => {
367
- const date$1 = new Date(event.detail);
368
- const isoDate = date.dateToISO(date$1);
369
- if (!this.range && isoDate === date.dateToISO(this.valueAsDate)) {
370
- return;
371
- }
372
- if (!this.range) {
373
- this.value = isoDate || "";
374
- this.valueAsDate = date$1 || null;
375
- this.activeDate = date$1 || null;
376
- this.calciteDatePickerChange.emit();
377
- return;
378
- }
379
- const start = this.getStartDate();
380
- const end = this.getEndDate();
381
- if (!start || (!end && date$1 < start)) {
382
- if (start) {
383
- this.setEndDate(new Date(start));
384
- }
385
- if (this.activeRange == "end") {
386
- this.setEndDate(date$1);
387
- }
388
- else {
389
- this.setStartDate(date$1);
390
- }
391
- }
392
- else if (!end) {
393
- this.setEndDate(date$1);
394
- }
395
- else {
396
- if (!this.proximitySelectionDisabled) {
397
- if (this.activeRange) {
398
- if (this.activeRange == "end") {
399
- this.setEndDate(date$1);
400
- }
401
- else {
402
- this.setStartDate(date$1);
403
- }
404
- }
405
- else {
406
- const startDiff = date.getDaysDiff(date$1, start);
407
- const endDiff = date.getDaysDiff(date$1, end);
408
- if (endDiff === 0 || startDiff < 0) {
409
- this.setStartDate(date$1);
410
- }
411
- else if (startDiff === 0 || endDiff < 0) {
412
- this.setEndDate(date$1);
413
- }
414
- else if (startDiff < endDiff) {
415
- this.setStartDate(date$1);
416
- }
417
- else {
418
- this.setEndDate(date$1);
419
- }
420
- }
421
- }
422
- else {
423
- this.setStartDate(date$1);
424
- }
425
- }
426
- this.calciteDatePickerChange.emit();
427
- };
428
- this.activeDate = undefined;
429
- this.activeRange = undefined;
430
- this.value = undefined;
431
- this.headingLevel = undefined;
432
- this.valueAsDate = undefined;
433
- this.minAsDate = undefined;
434
- this.maxAsDate = undefined;
435
- this.min = undefined;
436
- this.max = undefined;
437
- this.numberingSystem = undefined;
438
- this.scale = "m";
439
- this.range = false;
440
- this.proximitySelectionDisabled = false;
441
- this.messageOverrides = undefined;
442
- this.messages = undefined;
443
- this.activeEndDate = undefined;
444
- this.activeStartDate = undefined;
445
- this.dateTimeFormat = undefined;
446
- this.defaultMessages = undefined;
447
- this.effectiveLocale = "";
448
- this.endAsDate = undefined;
449
- this.hoverRange = undefined;
450
- this.localeData = undefined;
451
- this.mostRecentRangeValue = undefined;
452
- this.startAsDate = undefined;
453
- }
454
- activeDateWatcher(newActiveDate) {
455
- if (this.activeRange === "end") {
456
- this.activeEndDate = newActiveDate;
457
- }
458
- }
459
- valueAsDateWatcher(newValueAsDate) {
460
- if (this.range && Array.isArray(newValueAsDate)) {
461
- const { activeStartDate, activeEndDate } = this;
462
- const newActiveStartDate = newValueAsDate[0];
463
- const newActiveEndDate = newValueAsDate[1];
464
- this.activeStartDate = activeStartDate !== newActiveStartDate && newActiveStartDate;
465
- this.activeEndDate = activeEndDate !== newActiveEndDate && newActiveEndDate;
466
- }
467
- else if (newValueAsDate && newValueAsDate !== this.activeDate) {
468
- this.activeDate = newValueAsDate;
469
- }
470
- }
471
- onMinChanged(min) {
472
- if (min) {
473
- this.minAsDate = date.dateFromISO(min);
474
- }
475
- }
476
- onMaxChanged(max) {
477
- if (max) {
478
- this.maxAsDate = date.dateFromISO(max);
479
- }
480
- }
481
- onMessagesChange() {
482
- /* wired up by t9n util */
483
- }
484
- //--------------------------------------------------------------------------
485
- //
486
- // Public Methods
487
- //
488
- //--------------------------------------------------------------------------
489
- /** Sets focus on the component's first focusable element. */
490
- async setFocus() {
491
- await loadable.componentFocusable(this);
492
- this.el.focus();
493
- }
494
- /**
495
- * Resets active date state.
496
- * @internal
497
- */
498
- async reset() {
499
- this.resetActiveDates();
500
- this.mostRecentRangeValue = undefined;
501
- }
502
- // --------------------------------------------------------------------------
503
- //
504
- // Lifecycle
505
- //
506
- // --------------------------------------------------------------------------
507
- connectedCallback() {
508
- locale.connectLocalized(this);
509
- t9n.connectMessages(this);
510
- if (Array.isArray(this.value)) {
511
- this.valueAsDate = utils.getValueAsDateRange(this.value);
512
- }
513
- else if (this.value) {
514
- this.valueAsDate = date.dateFromISO(this.value);
515
- }
516
- if (this.min) {
517
- this.minAsDate = date.dateFromISO(this.min);
518
- }
519
- if (this.max) {
520
- this.maxAsDate = date.dateFromISO(this.max);
521
- }
522
- }
523
- disconnectedCallback() {
524
- locale.disconnectLocalized(this);
525
- t9n.disconnectMessages(this);
526
- }
527
- async componentWillLoad() {
528
- loadable.setUpLoadableComponent(this);
529
- await this.loadLocaleData();
530
- this.onMinChanged(this.min);
531
- this.onMaxChanged(this.max);
532
- await t9n.setUpMessages(this);
533
- }
534
- componentDidLoad() {
535
- loadable.setComponentLoaded(this);
536
- }
537
- render() {
538
- var _a;
539
- const date$1 = date.dateFromRange(this.range && Array.isArray(this.valueAsDate) ? this.valueAsDate[0] : this.valueAsDate, this.minAsDate, this.maxAsDate);
540
- let activeDate = this.getActiveDate(date$1, this.minAsDate, this.maxAsDate);
541
- const endDate = this.range && Array.isArray(this.valueAsDate)
542
- ? date.dateFromRange(this.valueAsDate[1], this.minAsDate, this.maxAsDate)
543
- : null;
544
- const activeEndDate = this.getActiveEndDate(endDate, this.minAsDate, this.maxAsDate);
545
- if ((this.activeRange === "end" ||
546
- (((_a = this.hoverRange) === null || _a === void 0 ? void 0 : _a.focused) === "end" && (!this.proximitySelectionDisabled || endDate))) &&
547
- activeEndDate) {
548
- activeDate = activeEndDate;
549
- }
550
- if (this.range && this.mostRecentRangeValue) {
551
- activeDate = this.mostRecentRangeValue;
552
- }
553
- const minDate = this.range && this.activeRange
554
- ? this.activeRange === "start"
555
- ? this.minAsDate
556
- : date$1 || this.minAsDate
557
- : this.minAsDate;
558
- const maxDate = this.range && this.activeRange
559
- ? this.activeRange === "start"
560
- ? endDate || this.maxAsDate
561
- : this.maxAsDate
562
- : this.maxAsDate;
563
- return (index.h(index.Host, { onBlur: this.resetActiveDates, onKeyDown: this.keyDownHandler }, this.renderCalendar(activeDate, maxDate, minDate, date$1, endDate)));
564
- }
565
- effectiveLocaleChange() {
566
- t9n.updateMessages(this, this.effectiveLocale);
567
- }
568
- valueHandler(value) {
569
- if (Array.isArray(value)) {
570
- this.valueAsDate = utils.getValueAsDateRange(value);
571
- }
572
- else if (value) {
573
- this.valueAsDate = date.dateFromISO(value);
574
- }
575
- }
576
- async loadLocaleData() {
577
- locale.numberStringFormatter.numberFormatOptions = {
578
- numberingSystem: this.numberingSystem,
579
- locale: this.effectiveLocale,
580
- useGrouping: false,
581
- };
582
- this.localeData = await utils.getLocaleData(this.effectiveLocale);
583
- this.dateTimeFormat = locale.getDateTimeFormat(this.effectiveLocale, DATE_PICKER_FORMAT_OPTIONS);
584
- }
585
- /**
586
- * Render calcite-date-picker-month-header and calcite-date-picker-month
587
- *
588
- * @param activeDate
589
- * @param maxDate
590
- * @param minDate
591
- * @param date
592
- * @param endDate
593
- */
594
- renderCalendar(activeDate, maxDate, minDate, date, endDate) {
595
- return (this.localeData && [
596
- index.h("calcite-date-picker-month-header", { activeDate: activeDate, headingLevel: this.headingLevel || HEADING_LEVEL, localeData: this.localeData, max: maxDate, messages: this.messages, min: minDate, onCalciteInternalDatePickerSelect: this.monthHeaderSelectChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date || new Date() }),
597
- index.h("calcite-date-picker-month", { activeDate: activeDate, dateTimeFormat: this.dateTimeFormat, endDate: this.range ? endDate : undefined, hoverRange: this.hoverRange, localeData: this.localeData, max: maxDate, min: minDate, onCalciteInternalDatePickerActiveDateChange: this.monthActiveDateChange, onCalciteInternalDatePickerHover: this.monthHoverChange, onCalciteInternalDatePickerMouseOut: this.monthMouseOutChange, onCalciteInternalDatePickerSelect: this.monthDateChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date, startDate: this.range ? date : undefined }),
598
- ]);
599
- }
600
- getEndDate() {
601
- return (Array.isArray(this.valueAsDate) && this.valueAsDate[1]) || undefined;
602
- }
603
- setEndDate(date$1) {
604
- const startDate = this.getStartDate();
605
- const newEndDate = date$1 ? date.setEndOfDay(date$1) : date$1;
606
- this.value = [date.dateToISO(startDate), date.dateToISO(date$1)];
607
- this.valueAsDate = [startDate, date$1];
608
- this.mostRecentRangeValue = newEndDate;
609
- this.calciteDatePickerRangeChange.emit();
610
- this.activeEndDate = date$1 || null;
611
- }
612
- getStartDate() {
613
- return Array.isArray(this.valueAsDate) && this.valueAsDate[0];
614
- }
615
- setStartDate(date$1) {
616
- const endDate = this.getEndDate();
617
- this.value = [date.dateToISO(date$1), date.dateToISO(endDate)];
618
- this.valueAsDate = [date$1, endDate];
619
- this.mostRecentRangeValue = date$1;
620
- this.calciteDatePickerRangeChange.emit();
621
- this.activeStartDate = date$1 || null;
622
- }
623
- /**
624
- * Get an active date using the value, or current date as default
625
- *
626
- * @param value
627
- * @param min
628
- * @param max
629
- */
630
- getActiveDate(value, min, max) {
631
- return date.dateFromRange(this.activeDate, min, max) || value || date.dateFromRange(new Date(), min, max);
632
- }
633
- getActiveEndDate(value, min, max) {
634
- return (date.dateFromRange(this.activeEndDate, min, max) || value || date.dateFromRange(new Date(), min, max));
635
- }
636
- static get delegatesFocus() { return true; }
637
- static get assetsDirs() { return ["assets"]; }
638
- get el() { return index.getElement(this); }
639
- static get watchers() { return {
640
- "activeDate": ["activeDateWatcher"],
641
- "valueAsDate": ["valueAsDateWatcher"],
642
- "min": ["onMinChanged"],
643
- "max": ["onMaxChanged"],
644
- "messageOverrides": ["onMessagesChange"],
645
- "effectiveLocale": ["effectiveLocaleChange", "loadLocaleData"],
646
- "value": ["valueHandler"]
647
- }; }
648
- };
649
- DatePicker.style = datePickerCss;
650
-
651
- exports.calcite_block = Block;
652
- exports.calcite_date_picker = DatePicker;