@esri/solutions-components 0.8.8 → 0.8.9

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