@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.
- package/dist/assets/t9n/crowdsource-reporter/resources.json +3 -1
- package/dist/assets/t9n/crowdsource-reporter/resources_en.json +3 -1
- package/dist/cjs/{calcite-action-menu_2.cjs.entry.js → calcite-action-menu_3.cjs.entry.js} +114 -7
- package/dist/cjs/calcite-alert_4.cjs.entry.js +46 -5
- package/dist/cjs/{calcite-input-date-picker_3.cjs.entry.js → calcite-block_5.cjs.entry.js} +691 -13
- package/dist/cjs/{calcite-combobox_5.cjs.entry.js → calcite-combobox_3.cjs.entry.js} +876 -844
- package/dist/cjs/calcite-dropdown_4.cjs.entry.js +1023 -0
- package/dist/cjs/{calcite-flow_5.cjs.entry.js → calcite-flow_6.cjs.entry.js} +327 -2
- package/dist/cjs/card-manager_3.cjs.entry.js +5 -5
- package/dist/cjs/crowdsource-manager.cjs.entry.js +1 -1
- package/dist/cjs/crowdsource-reporter.cjs.entry.js +122 -21
- package/dist/cjs/{downloadUtils-8b05d7cc.js → downloadUtils-dc349b1a.js} +2 -2
- package/dist/cjs/{index.es-e7587227.js → index.es-1830a1e6.js} +2 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/map-select-tools_3.cjs.entry.js +8 -8
- package/dist/cjs/{mapViewUtils-3e0fa457.js → mapViewUtils-9dc05308.js} +11 -5
- package/dist/cjs/public-notification.cjs.entry.js +2 -2
- package/dist/cjs/solutions-components.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/create-feature/create-feature.js +18 -0
- package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.css +16 -0
- package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.js +155 -35
- package/dist/collection/components/feature-details/feature-details.css +18 -0
- package/dist/collection/components/feature-details/feature-details.js +500 -0
- package/dist/collection/components/feature-details/test/feature-details.e2e.js +14 -0
- package/dist/collection/components/feature-details/test/feature-details.spec.js +22 -0
- package/dist/collection/components/feature-list/feature-list.js +14 -1
- package/dist/collection/components/info-card/info-card.css +15 -5
- package/dist/collection/components/info-card/info-card.js +178 -5
- package/dist/collection/components/layer-table/layer-table.js +2 -2
- package/dist/collection/components/map-card/map-card.js +1 -1
- package/dist/collection/components/map-select-tools/map-select-tools.js +5 -5
- package/dist/collection/components/refine-selection/refine-selection.js +1 -1
- package/dist/collection/demos/crowdsource-reporter.html +115 -1
- package/dist/collection/utils/mapViewUtils.js +11 -5
- package/dist/collection/utils/mapViewUtils.ts +13 -5
- package/dist/components/create-feature2.js +4 -0
- package/dist/components/crowdsource-reporter.js +270 -81
- package/dist/components/feature-details.d.ts +11 -0
- package/dist/components/feature-details.js +11 -0
- package/dist/components/feature-details2.js +449 -0
- package/dist/components/feature-list2.js +14 -1
- package/dist/components/info-card2.js +53 -5
- package/dist/components/layer-table2.js +2 -2
- package/dist/components/map-card2.js +1 -1
- package/dist/components/map-select-tools2.js +5 -5
- package/dist/components/mapViewUtils.js +11 -5
- package/dist/components/refine-selection2.js +1 -1
- package/dist/esm/{calcite-action-menu_2.entry.js → calcite-action-menu_3.entry.js} +118 -12
- package/dist/esm/calcite-alert_4.entry.js +46 -5
- package/dist/esm/{calcite-input-date-picker_3.entry.js → calcite-block_5.entry.js} +688 -12
- package/dist/esm/{calcite-combobox_5.entry.js → calcite-combobox_3.entry.js} +878 -844
- package/dist/esm/calcite-date-picker-day_3.entry.js +1 -1
- package/dist/esm/calcite-dropdown_4.entry.js +1016 -0
- package/dist/esm/{calcite-flow_5.entry.js → calcite-flow_6.entry.js} +327 -3
- package/dist/esm/card-manager_3.entry.js +5 -5
- package/dist/esm/crowdsource-manager.entry.js +1 -1
- package/dist/esm/crowdsource-reporter.entry.js +122 -21
- package/dist/esm/{date-5630530d.js → date-0c026a8b.js} +1 -1
- package/dist/esm/{downloadUtils-0c1e4d7b.js → downloadUtils-df4f21f6.js} +2 -2
- package/dist/esm/{index.es-286e3cfa.js → index.es-904fb846.js} +2 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/map-select-tools_3.entry.js +8 -8
- package/dist/esm/{mapViewUtils-253178f1.js → mapViewUtils-2ec19fb0.js} +11 -5
- package/dist/esm/public-notification.entry.js +2 -2
- package/dist/esm/solutions-components.js +1 -1
- package/dist/solutions-components/demos/crowdsource-reporter.html +115 -1
- package/dist/solutions-components/{p-813fd8a4.entry.js → p-29f518fd.entry.js} +2 -2
- package/dist/solutions-components/{p-13ca3b00.entry.js → p-452fd697.entry.js} +1 -1
- package/dist/solutions-components/p-511b1c91.entry.js +23 -0
- package/dist/solutions-components/p-577efb16.js +36 -0
- package/dist/solutions-components/{p-94de9279.js → p-5817d78c.js} +1 -1
- package/dist/solutions-components/p-602cd811.entry.js +17 -0
- package/dist/solutions-components/{p-15f9624a.entry.js → p-6557b703.entry.js} +1 -1
- package/dist/solutions-components/p-7269c49b.entry.js +6 -0
- package/dist/solutions-components/p-760bd17e.entry.js +6 -0
- package/dist/solutions-components/p-95fea07a.entry.js +17 -0
- package/dist/solutions-components/{p-212b02e7.js → p-ae4d86e8.js} +1 -1
- package/dist/solutions-components/{p-038fcd93.entry.js → p-c273ab7a.entry.js} +1 -1
- package/dist/solutions-components/p-d742b915.entry.js +29 -0
- package/dist/solutions-components/p-dfad61a8.entry.js +24 -0
- package/dist/solutions-components/{p-331b5d1e.js → p-fca434c8.js} +2 -2
- package/dist/solutions-components/p-fd82a00f.entry.js +6 -0
- package/dist/solutions-components/solutions-components.esm.js +1 -1
- package/dist/solutions-components/utils/mapViewUtils.ts +13 -5
- package/dist/types/components/create-feature/create-feature.d.ts +4 -4
- package/dist/types/components/crowdsource-reporter/crowdsource-reporter.d.ts +91 -10
- package/dist/types/components/feature-details/feature-details.d.ts +151 -0
- package/dist/types/components/feature-list/feature-list.d.ts +6 -0
- package/dist/types/components/info-card/info-card.d.ts +33 -1
- package/dist/types/components.d.ts +129 -12
- package/dist/types/preact.d.ts +6 -1
- package/dist/types/utils/mapViewUtils.d.ts +5 -3
- package/package.json +1 -1
- package/dist/cjs/calcite-block_2.cjs.entry.js +0 -652
- package/dist/cjs/calcite-graph_2.cjs.entry.js +0 -1055
- package/dist/cjs/calcite-scrim.cjs.entry.js +0 -125
- package/dist/cjs/utils-7bc7f595.js +0 -64
- package/dist/esm/calcite-block_2.entry.js +0 -647
- package/dist/esm/calcite-graph_2.entry.js +0 -1050
- package/dist/esm/calcite-scrim.entry.js +0 -121
- package/dist/esm/utils-9fb4104a.js +0 -61
- package/dist/solutions-components/p-04c37d69.entry.js +0 -17
- package/dist/solutions-components/p-0b92e4b1.entry.js +0 -11
- package/dist/solutions-components/p-238d3b5f.entry.js +0 -6
- package/dist/solutions-components/p-3af79063.js +0 -36
- package/dist/solutions-components/p-80b11ec1.entry.js +0 -17
- package/dist/solutions-components/p-a3a11749.entry.js +0 -6
- package/dist/solutions-components/p-aec06ce4.entry.js +0 -18
- package/dist/solutions-components/p-bfdf89c2.js +0 -11
- package/dist/solutions-components/p-c4ff3b52.entry.js +0 -17
- package/dist/solutions-components/p-ced067bd.entry.js +0 -17
- package/dist/solutions-components/p-d136eab0.entry.js +0 -23
- 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 };
|