@esri/solutions-components 0.2.2 → 0.2.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/assets/t9n/solution-config-modal/resources.json +22 -0
- package/dist/assets/t9n/solution-config-modal/resources_en.json +22 -0
- package/dist/cjs/calcite-action-menu_2.cjs.entry.js +18 -401
- package/dist/cjs/calcite-action-menu_2.cjs.entry.js.map +1 -1
- package/dist/cjs/calcite-action_2.cjs.entry.js +423 -71
- package/dist/cjs/calcite-action_2.cjs.entry.js.map +1 -1
- package/dist/cjs/calcite-loader.cjs.entry.js +97 -0
- package/dist/cjs/calcite-loader.cjs.entry.js.map +1 -0
- package/dist/cjs/{solution-configuration.cjs.entry.js → calcite-modal_2.cjs.entry.js} +451 -13
- package/dist/cjs/calcite-modal_2.cjs.entry.js.map +1 -0
- package/dist/cjs/{calcite-shell-panel_14.cjs.entry.js → calcite-panel_12.cjs.entry.js} +455 -709
- package/dist/cjs/calcite-panel_12.cjs.entry.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/solution-config-modal.cjs.entry.js +131 -0
- package/dist/cjs/solution-config-modal.cjs.entry.js.map +1 -0
- package/dist/cjs/{solution-contents_3.cjs.entry.js → solution-contents_7.cjs.entry.js} +664 -5
- package/dist/cjs/solution-contents_7.cjs.entry.js.map +1 -0
- package/dist/cjs/{solution-store-893499a5.js → solution-store-09b3fc53.js} +4 -6
- package/dist/cjs/solution-store-09b3fc53.js.map +1 -0
- package/dist/cjs/solutions-components.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/solution-config-modal/solution-config-modal.css +91 -0
- package/dist/collection/components/solution-config-modal/solution-config-modal.js +245 -0
- package/dist/collection/components/solution-config-modal/solution-config-modal.js.map +1 -0
- package/dist/collection/components/solution-configuration/solution-configuration.js +23 -17
- package/dist/collection/components/solution-configuration/solution-configuration.js.map +1 -1
- package/dist/collection/components/solution-item/solution-item.js +0 -2
- package/dist/collection/components/solution-item/solution-item.js.map +1 -1
- package/dist/collection/components/solution-item-details/solution-item-details.js +0 -13
- package/dist/collection/components/solution-item-details/solution-item-details.js.map +1 -1
- package/dist/collection/utils/solution-store.js +3 -5
- package/dist/collection/utils/solution-store.js.map +1 -1
- package/dist/collection/utils/solution-store.ts +3 -5
- package/dist/esm/buffer-tools_6.entry.js +2 -2
- package/dist/esm/calcite-action-bar_6.entry.js +2 -2
- package/dist/esm/calcite-action-menu_2.entry.js +20 -403
- package/dist/esm/calcite-action-menu_2.entry.js.map +1 -1
- package/dist/esm/calcite-action_2.entry.js +424 -72
- package/dist/esm/calcite-action_2.entry.js.map +1 -1
- package/dist/esm/calcite-combobox_3.entry.js +2 -2
- package/dist/esm/calcite-loader.entry.js +93 -0
- package/dist/esm/calcite-loader.entry.js.map +1 -0
- package/dist/esm/{solution-configuration.entry.js → calcite-modal_2.entry.js} +453 -16
- package/dist/esm/calcite-modal_2.entry.js.map +1 -0
- package/dist/esm/{calcite-shell-panel_14.entry.js → calcite-panel_12.entry.js} +454 -706
- package/dist/esm/calcite-panel_12.entry.js.map +1 -0
- package/dist/esm/config-layer-picker.entry.js +2 -2
- package/dist/esm/{interfaces-e2a2064d.js → interfaces-1bdfc3a8.js} +2 -2
- package/dist/esm/{interfaces-e2a2064d.js.map → interfaces-1bdfc3a8.js.map} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{mapViewUtils-09f1e7bd.js → mapViewUtils-809947c8.js} +2 -2
- package/dist/esm/{mapViewUtils-09f1e7bd.js.map → mapViewUtils-809947c8.js.map} +1 -1
- package/dist/esm/public-notification.entry.js +2 -2
- package/dist/esm/solution-config-modal.entry.js +127 -0
- package/dist/esm/solution-config-modal.entry.js.map +1 -0
- package/dist/esm/{solution-contents_3.entry.js → solution-contents_7.entry.js} +661 -6
- package/dist/esm/solution-contents_7.entry.js.map +1 -0
- package/dist/esm/{solution-store-0c58c852.js → solution-store-d8519c64.js} +5 -7
- package/dist/esm/solution-store-d8519c64.js.map +1 -0
- package/dist/esm/solutions-components.js +1 -1
- package/dist/solutions-components/{p-be1ed982.entry.js → p-11068040.entry.js} +3 -3
- package/dist/solutions-components/{p-be1ed982.entry.js.map → p-11068040.entry.js.map} +0 -0
- package/dist/solutions-components/{p-659edb14.js → p-2910dd9e.js} +5 -7
- package/dist/{cjs/solution-store-893499a5.js.map → solutions-components/p-2910dd9e.js.map} +1 -1
- package/dist/solutions-components/{p-291fd295.entry.js → p-30810b45.entry.js} +3 -3
- package/dist/solutions-components/{p-291fd295.entry.js.map → p-30810b45.entry.js.map} +0 -0
- package/dist/solutions-components/p-38ddadf2.entry.js +342 -0
- package/dist/solutions-components/p-38ddadf2.entry.js.map +1 -0
- package/dist/solutions-components/{p-77c75f3a.entry.js → p-5b20090f.entry.js} +661 -6
- package/dist/solutions-components/p-5b20090f.entry.js.map +1 -0
- package/dist/solutions-components/{p-9393631c.entry.js → p-9ef1328a.entry.js} +3 -3
- package/dist/solutions-components/{p-9393631c.entry.js.map → p-9ef1328a.entry.js.map} +0 -0
- package/dist/solutions-components/{p-984cb687.entry.js → p-a1786d11.entry.js} +454 -706
- package/dist/solutions-components/p-a1786d11.entry.js.map +1 -0
- package/dist/solutions-components/{p-fe0fdd8b.js → p-c20bd963.js} +2 -2
- package/dist/solutions-components/{p-fe0fdd8b.js.map → p-c20bd963.js.map} +1 -1
- package/dist/solutions-components/p-c5721b0f.entry.js +127 -0
- package/dist/solutions-components/p-c5721b0f.entry.js.map +1 -0
- package/dist/solutions-components/{p-24d75151.entry.js → p-c818e661.entry.js} +3 -3
- package/dist/solutions-components/{p-24d75151.entry.js.map → p-c818e661.entry.js.map} +0 -0
- package/dist/solutions-components/{p-90629c1d.entry.js → p-cf59eb16.entry.js} +453 -16
- package/dist/solutions-components/p-cf59eb16.entry.js.map +1 -0
- package/dist/solutions-components/p-e405ebe8.entry.js +93 -0
- package/dist/solutions-components/p-e405ebe8.entry.js.map +1 -0
- package/dist/solutions-components/{p-77e6b03c.entry.js → p-e6fb9cde.entry.js} +3 -3
- package/dist/solutions-components/{p-77e6b03c.entry.js.map → p-e6fb9cde.entry.js.map} +0 -0
- package/dist/solutions-components/{p-97c4a268.entry.js → p-ef6f9e24.entry.js} +113 -229
- package/dist/solutions-components/p-ef6f9e24.entry.js.map +1 -0
- package/dist/solutions-components/{p-6b9dc092.js → p-f04fdb9a.js} +2 -2
- package/dist/solutions-components/{p-6b9dc092.js.map → p-f04fdb9a.js.map} +1 -1
- package/dist/solutions-components/solutions-components.esm.js +1 -1
- package/dist/solutions-components/utils/solution-store.ts +3 -5
- package/dist/solutions-components_commit.txt +8 -8
- package/dist/types/components/solution-config-modal/solution-config-modal.d.ts +69 -0
- package/dist/types/components/solution-configuration/solution-configuration.d.ts +4 -2
- package/dist/types/components/solution-item-details/solution-item-details.d.ts +0 -1
- package/dist/types/components.d.ts +43 -5
- package/dist/types/preact.d.ts +4 -0
- package/package.json +1 -1
- package/dist/cjs/calcite-modal.cjs.entry.js +0 -449
- package/dist/cjs/calcite-modal.cjs.entry.js.map +0 -1
- package/dist/cjs/calcite-panel_2.cjs.entry.js +0 -439
- package/dist/cjs/calcite-panel_2.cjs.entry.js.map +0 -1
- package/dist/cjs/calcite-scrim.cjs.entry.js +0 -64
- package/dist/cjs/calcite-scrim.cjs.entry.js.map +0 -1
- package/dist/cjs/calcite-shell-panel_14.cjs.entry.js.map +0 -1
- package/dist/cjs/solution-configuration.cjs.entry.js.map +0 -1
- package/dist/cjs/solution-contents_3.cjs.entry.js.map +0 -1
- package/dist/esm/calcite-modal.entry.js +0 -445
- package/dist/esm/calcite-modal.entry.js.map +0 -1
- package/dist/esm/calcite-panel_2.entry.js +0 -434
- package/dist/esm/calcite-panel_2.entry.js.map +0 -1
- package/dist/esm/calcite-scrim.entry.js +0 -60
- package/dist/esm/calcite-scrim.entry.js.map +0 -1
- package/dist/esm/calcite-shell-panel_14.entry.js.map +0 -1
- package/dist/esm/solution-configuration.entry.js.map +0 -1
- package/dist/esm/solution-contents_3.entry.js.map +0 -1
- package/dist/esm/solution-store-0c58c852.js.map +0 -1
- package/dist/solutions-components/p-0fda7d9e.entry.js +0 -434
- package/dist/solutions-components/p-0fda7d9e.entry.js.map +0 -1
- package/dist/solutions-components/p-2ff754ce.entry.js +0 -257
- package/dist/solutions-components/p-2ff754ce.entry.js.map +0 -1
- package/dist/solutions-components/p-30a6199a.entry.js +0 -445
- package/dist/solutions-components/p-30a6199a.entry.js.map +0 -1
- package/dist/solutions-components/p-659edb14.js.map +0 -1
- package/dist/solutions-components/p-77c75f3a.entry.js.map +0 -1
- package/dist/solutions-components/p-90629c1d.entry.js.map +0 -1
- package/dist/solutions-components/p-97c4a268.entry.js.map +0 -1
- package/dist/solutions-components/p-984cb687.entry.js.map +0 -1
- package/dist/solutions-components/p-f5268b4f.entry.js +0 -60
- package/dist/solutions-components/p-f5268b4f.entry.js.map +0 -1
@@ -1,445 +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 './p-58c69df2.js';
|
7
|
-
import { f as focusElement, a as getSlotted, h as ensureId, j as isCalciteFocusable } from './p-32a67cb2.js';
|
8
|
-
import { c as createObserver } from './p-9a9955db.js';
|
9
|
-
import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './p-5cf33602.js';
|
10
|
-
import { c as connectOpenCloseComponent, d as disconnectOpenCloseComponent } from './p-2e9ed892.js';
|
11
|
-
import './p-729708a3.js';
|
12
|
-
import './p-a80b3880.js';
|
13
|
-
|
14
|
-
/**
|
15
|
-
* Traverses the slots of the open shadowroots and returns all children matching the query.
|
16
|
-
* @param {ShadowRoot | HTMLElement} root
|
17
|
-
* @param skipNode
|
18
|
-
* @param isMatch
|
19
|
-
* @param {number} maxDepth
|
20
|
-
* @param {number} depth
|
21
|
-
* @returns {HTMLElement[]}
|
22
|
-
*/
|
23
|
-
function queryShadowRoot(root, skipNode, isMatch, maxDepth = 20, depth = 0) {
|
24
|
-
let matches = [];
|
25
|
-
// If the depth is above the max depth, abort the searching here.
|
26
|
-
if (depth >= maxDepth) {
|
27
|
-
return matches;
|
28
|
-
}
|
29
|
-
// Traverses a slot element
|
30
|
-
const traverseSlot = ($slot) => {
|
31
|
-
// Only check nodes that are of the type Node.ELEMENT_NODE
|
32
|
-
// Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
|
33
|
-
const assignedNodes = $slot.assignedNodes().filter(node => node.nodeType === 1);
|
34
|
-
if (assignedNodes.length > 0) {
|
35
|
-
return queryShadowRoot(assignedNodes[0].parentElement, skipNode, isMatch, maxDepth, depth + 1);
|
36
|
-
}
|
37
|
-
return [];
|
38
|
-
};
|
39
|
-
// Go through each child and continue the traversing if necessary
|
40
|
-
// Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.
|
41
|
-
// Therefore we fallback to an empty array if it is undefined.
|
42
|
-
const children = Array.from(root.children || []);
|
43
|
-
for (const $child of children) {
|
44
|
-
// Check if the node and its descendants should be skipped
|
45
|
-
if (skipNode($child)) {
|
46
|
-
continue;
|
47
|
-
}
|
48
|
-
// If the child matches we always add it
|
49
|
-
if (isMatch($child)) {
|
50
|
-
matches.push($child);
|
51
|
-
}
|
52
|
-
if ($child.shadowRoot != null) {
|
53
|
-
matches.push(...queryShadowRoot($child.shadowRoot, skipNode, isMatch, maxDepth, depth + 1));
|
54
|
-
}
|
55
|
-
else if ($child.tagName === "SLOT") {
|
56
|
-
matches.push(...traverseSlot($child));
|
57
|
-
}
|
58
|
-
else {
|
59
|
-
matches.push(...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1));
|
60
|
-
}
|
61
|
-
}
|
62
|
-
return matches;
|
63
|
-
}
|
64
|
-
|
65
|
-
/**
|
66
|
-
* Returns whether the element is hidden.
|
67
|
-
* @param $elem
|
68
|
-
*/
|
69
|
-
function isHidden($elem) {
|
70
|
-
return $elem.hasAttribute("hidden")
|
71
|
-
|| ($elem.hasAttribute("aria-hidden") && $elem.getAttribute("aria-hidden") !== "false")
|
72
|
-
// A quick and dirty way to check whether the element is hidden.
|
73
|
-
// For a more fine-grained check we could use "window.getComputedStyle" but we don't because of bad performance.
|
74
|
-
// If the element has visibility set to "hidden" or "collapse", display set to "none" or opacity set to "0" through CSS
|
75
|
-
// we won't be able to catch it here. We accept it due to the huge performance benefits.
|
76
|
-
|| $elem.style.display === `none`
|
77
|
-
|| $elem.style.opacity === `0`
|
78
|
-
|| $elem.style.visibility === `hidden`
|
79
|
-
|| $elem.style.visibility === `collapse`;
|
80
|
-
// If offsetParent is null we can assume that the element is hidden
|
81
|
-
// https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null
|
82
|
-
//|| $elem.offsetParent == null;
|
83
|
-
}
|
84
|
-
/**
|
85
|
-
* Returns whether the element is disabled.
|
86
|
-
* @param $elem
|
87
|
-
*/
|
88
|
-
function isDisabled($elem) {
|
89
|
-
return $elem.hasAttribute("disabled")
|
90
|
-
|| ($elem.hasAttribute("aria-disabled") && $elem.getAttribute("aria-disabled") !== "false");
|
91
|
-
}
|
92
|
-
/**
|
93
|
-
* Determines whether an element is focusable.
|
94
|
-
* Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194
|
95
|
-
* Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable
|
96
|
-
* @param $elem
|
97
|
-
*/
|
98
|
-
function isFocusable($elem) {
|
99
|
-
// Discard elements that are removed from the tab order.
|
100
|
-
if ($elem.getAttribute("tabindex") === "-1" || isHidden($elem) || isDisabled($elem)) {
|
101
|
-
return false;
|
102
|
-
}
|
103
|
-
return (
|
104
|
-
// At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists
|
105
|
-
$elem.hasAttribute("tabindex")
|
106
|
-
// Anchor tags or area tags with a href set
|
107
|
-
|| ($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) && $elem.hasAttribute("href")
|
108
|
-
// Form elements which are not disabled
|
109
|
-
|| ($elem instanceof HTMLButtonElement
|
110
|
-
|| $elem instanceof HTMLInputElement
|
111
|
-
|| $elem instanceof HTMLTextAreaElement
|
112
|
-
|| $elem instanceof HTMLSelectElement)
|
113
|
-
// IFrames
|
114
|
-
|| $elem instanceof HTMLIFrameElement);
|
115
|
-
}
|
116
|
-
|
117
|
-
/*!
|
118
|
-
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
|
119
|
-
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
|
120
|
-
* v1.0.0-beta.97
|
121
|
-
*/
|
122
|
-
const CSS = {
|
123
|
-
modal: "modal",
|
124
|
-
modalOpen: "modal--open",
|
125
|
-
title: "title",
|
126
|
-
header: "header",
|
127
|
-
footer: "footer",
|
128
|
-
scrim: "scrim",
|
129
|
-
back: "back",
|
130
|
-
close: "close",
|
131
|
-
secondary: "secondary",
|
132
|
-
primary: "primary",
|
133
|
-
overflowHidden: "overflow-hidden",
|
134
|
-
// these classes help apply the animation in phases to only set transform on open/close
|
135
|
-
// this helps avoid a positioning issue for any floating-ui-owning children
|
136
|
-
openingIdle: "modal--opening-idle",
|
137
|
-
openingActive: "modal--opening-active",
|
138
|
-
closingIdle: "modal--closing-idle",
|
139
|
-
closingActive: "modal--closing-active"
|
140
|
-
};
|
141
|
-
const ICONS = {
|
142
|
-
close: "x"
|
143
|
-
};
|
144
|
-
const SLOTS = {
|
145
|
-
content: "content",
|
146
|
-
header: "header",
|
147
|
-
back: "back",
|
148
|
-
secondary: "secondary",
|
149
|
-
primary: "primary"
|
150
|
-
};
|
151
|
-
const TEXT = {
|
152
|
-
close: "Close"
|
153
|
-
};
|
154
|
-
|
155
|
-
const modalCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:fixed;inset:0px;z-index:700;display:flex;align-items:center;justify-content:center;overflow-y:hidden;color:var(--calcite-ui-text-2);opacity:0;visibility:hidden !important;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88)}:host([scale=s]){--calcite-modal-padding:0.75rem;--calcite-modal-padding-large:1rem;--calcite-modal-title-text:var(--calcite-font-size-1);--calcite-modal-content-text:var(--calcite-font-size--1);--calcite-modal-padding-internal:0.75rem;--calcite-modal-padding-large-internal:1rem;--calcite-modal-title-text-internal:var(--calcite-font-size-1);--calcite-modal-content-text-internal:var(--calcite-font-size--1)}:host([scale=m]){--calcite-modal-padding:1rem;--calcite-modal-padding-large:1.25rem;--calcite-modal-title-text:var(--calcite-font-size-2);--calcite-modal-content-text:var(--calcite-font-size-0);--calcite-modal-padding-internal:1rem;--calcite-modal-padding-large-internal:1.25rem;--calcite-modal-title-text-internal:var(--calcite-font-size-2);--calcite-modal-content-text-internal:var(--calcite-font-size-0)}:host([scale=l]){--calcite-modal-padding:1.25rem;--calcite-modal-padding-large:1.5rem;--calcite-modal-title-text:var(--calcite-font-size-3);--calcite-modal-content-text:var(--calcite-font-size-1);--calcite-modal-padding-internal:1.25rem;--calcite-modal-padding-large-internal:1.5rem;--calcite-modal-title-text-internal:var(--calcite-font-size-3);--calcite-modal-content-text-internal:var(--calcite-font-size-1)}.scrim{--calcite-scrim-background:rgba(0, 0, 0, 0.75);position:fixed;inset:0px;display:flex;overflow-y:hidden}.modal{pointer-events:none;z-index:800;float:none;margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;overflow:hidden;border-radius:0.25rem;background-color:var(--calcite-ui-foreground-1);opacity:0;--tw-shadow:0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);--tw-shadow-colored:0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-overflow-scrolling:touch;visibility:hidden;transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);--calcite-modal-hidden-position:translate3d(0, 20px, 0);--calcite-modal-shown-position:translate3d(0, 0, 0)}.modal--opening-idle{transform:var(--calcite-modal-hidden-position)}.modal--opening-active{transform:var(--calcite-modal-shown-position)}.modal--closing-idle{transform:var(--calcite-modal-shown-position)}.modal--closing-active{transform:var(--calcite-modal-hidden-position)}:host([open]){opacity:1;visibility:visible !important;transition-delay:0ms}:host([open]) .modal--open{pointer-events:auto;visibility:visible;opacity:1;transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition-delay:0ms}.header{z-index:400;display:flex;min-inline-size:0px;max-inline-size:100%;border-start-start-radius:0.25rem;border-start-end-radius:0.25rem;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1);flex:0 0 auto}.close{order:2;margin:0px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-style:none;background-color:transparent;color:var(--calcite-ui-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-start-end-radius:0.25rem;padding-block:var(--calcite-modal-padding, var(--calcite-modal-padding-internal));padding-inline:var(--calcite-modal-padding, var(--calcite-modal-padding-internal));flex:0 0 auto}.close calcite-icon{pointer-events:none;vertical-align:-2px}.close:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.close:hover,.close:focus,.close:active{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}.title{order:1;display:flex;min-inline-size:0px;align-items:center;flex:1 1 auto;padding-block:var(--calcite-modal-padding, var(--calcite-model-padding-internal));padding-inline:var(--calcite-modal-padding-large, var(--calcite-modal-padding-large-internal))}slot[name=header]::slotted(*),*::slotted([slot=header]){margin:0px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-1);font-size:var(--calcite-modal-title-text, var(--calcite-modal-title-text-internal))}.content{position:relative;box-sizing:border-box;display:block;block-size:100%;overflow:auto;background-color:var(--calcite-ui-foreground-1);padding:0px;max-block-size:calc(100vh - 12rem)}.content--spaced{padding:var(--calcite-modal-padding)}.content--no-footer{border-end-end-radius:0.25rem;border-end-start-radius:0.25rem}slot[name=content]::slotted(*),*::slotted([slot=content]){font-size:var(--calcite-modal-content-text, var(--calcite-modal-context-text-internal))}:host([background-color=grey]) .content{background-color:var(--calcite-ui-background)}.footer{z-index:400;-webkit-margin-before:auto;margin-block-start:auto;box-sizing:border-box;display:flex;inline-size:100%;justify-content:space-between;border-end-end-radius:0.25rem;border-end-start-radius:0.25rem;border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1);flex:0 0 auto;padding-block:var(--calcite-modal-padding, var(--calcite-modal-padding-internal));padding-inline:var(--calcite-modal-padding-large, var(--calcite-modal-padding-large-internal))}.footer--hide-back .back,.footer--hide-secondary .secondary{display:none}.back{display:block;-webkit-margin-end:auto;margin-inline-end:auto}.secondary{margin-inline:0.25rem;display:block}slot[name=primary]{display:block}:host([width=small]) .modal{inline-size:auto}:host([width=s]) .modal{max-inline-size:32rem}@media screen and (max-width: 35rem){:host([width=s]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}:host([width=s]) .content{flex:1 1 auto;max-block-size:unset}:host([width=s][docked]){align-items:flex-end}}:host([width=m]) .modal{max-inline-size:48rem}@media screen and (max-width: 51rem){:host([width=m]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}:host([width=m]) .content{flex:1 1 auto;max-block-size:unset}:host([width=m][docked]){align-items:flex-end}}:host([width=l]) .modal{max-inline-size:94rem}@media screen and (max-width: 97rem){:host([width=l]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}:host([width=l]) .content{flex:1 1 auto;max-block-size:unset}:host([width=l][docked]){align-items:flex-end}}:host([fullscreen]){background-color:transparent}:host([fullscreen]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;--calcite-modal-hidden-position:translate3D(0, 20px, 0) scale(0.95);--calcite-modal-shown-position:translate3D(0, 0, 0) scale(1)}:host([fullscreen]) .content{max-block-size:100%;flex:1 1 auto}:host([open][fullscreen]) .header{border-radius:0}:host([open][fullscreen]) .footer{border-radius:0}:host([docked]) .modal{block-size:auto}:host([docked]) .content{block-size:auto;flex:1 1 auto}@media screen and (max-width: 860px){:host([docked]) .modal{border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}:host([docked]) .close{border-start-end-radius:var(--calcite-border-radius)}}:host([color=red]) .modal{border-color:var(--calcite-ui-danger)}:host([color=blue]) .modal{border-color:var(--calcite-ui-info)}:host([color=red]) .modal,:host([color=blue]) .modal{border-width:0px;border-block-start-width:4px;border-style:solid}:host([color=red]) .header,:host([color=blue]) .header{border-radius:0.25rem;border-end-end-radius:0px;border-end-start-radius:0px}@media screen and (max-width: 860px){slot[name=header]::slotted(*),*::slotted([slot=header]){font-size:var(--calcite-font-size-1)}.footer{position:sticky;inset-block-end:0px}}@media screen and (max-width: 480px){.footer{flex-direction:column}.back,.secondary{margin:0px;-webkit-margin-after:0.25rem;margin-block-end:0.25rem}}";
|
156
|
-
|
157
|
-
const isFocusableExtended = (el) => {
|
158
|
-
return isCalciteFocusable(el) || isFocusable(el);
|
159
|
-
};
|
160
|
-
const getFocusableElements = (el) => {
|
161
|
-
return queryShadowRoot(el, isHidden, isFocusableExtended);
|
162
|
-
};
|
163
|
-
const Modal = class {
|
164
|
-
constructor(hostRef) {
|
165
|
-
registerInstance(this, hostRef);
|
166
|
-
this.calciteModalBeforeClose = createEvent(this, "calciteModalBeforeClose", 6);
|
167
|
-
this.calciteModalClose = createEvent(this, "calciteModalClose", 6);
|
168
|
-
this.calciteModalBeforeOpen = createEvent(this, "calciteModalBeforeOpen", 6);
|
169
|
-
this.calciteModalOpen = createEvent(this, "calciteModalOpen", 6);
|
170
|
-
//--------------------------------------------------------------------------
|
171
|
-
//
|
172
|
-
// Properties
|
173
|
-
//
|
174
|
-
//--------------------------------------------------------------------------
|
175
|
-
/**
|
176
|
-
* When `true`, the component is active.
|
177
|
-
*
|
178
|
-
* @deprecated use `open` instead.
|
179
|
-
*/
|
180
|
-
this.active = false;
|
181
|
-
/** When `true`, displays and positions the component. */
|
182
|
-
this.open = false;
|
183
|
-
/** Passes a function to run before the component closes. */
|
184
|
-
this.beforeClose = () => Promise.resolve();
|
185
|
-
/** When `true`, disables the component's close button. */
|
186
|
-
this.disableCloseButton = false;
|
187
|
-
/** When `true`, disables the closing of the component when clicked outside. */
|
188
|
-
this.disableOutsideClose = false;
|
189
|
-
/** Accessible name for the component's close button. */
|
190
|
-
this.intlClose = TEXT.close;
|
191
|
-
/** When `true`, disables the default close on escape behavior. */
|
192
|
-
this.disableEscape = false;
|
193
|
-
/** Specifies the size of the component. */
|
194
|
-
this.scale = "m";
|
195
|
-
/** Specifies the width of the component. Can use scale sizes or pass a number (displays in pixels). */
|
196
|
-
this.width = "m";
|
197
|
-
/** Sets the background color of the component's content. */
|
198
|
-
this.backgroundColor = "white";
|
199
|
-
/**
|
200
|
-
* When `true`, disables spacing to the content area slot.
|
201
|
-
*
|
202
|
-
* @deprecated Use `--calcite-modal-padding` CSS variable instead.
|
203
|
-
*/
|
204
|
-
this.noPadding = false;
|
205
|
-
//--------------------------------------------------------------------------
|
206
|
-
//
|
207
|
-
// Variables
|
208
|
-
//
|
209
|
-
//--------------------------------------------------------------------------
|
210
|
-
this.hasFooter = true;
|
211
|
-
/**
|
212
|
-
* We use internal variable to make sure initially open modal can transition from closed state when rendered
|
213
|
-
*
|
214
|
-
* @private
|
215
|
-
*/
|
216
|
-
this.isOpen = false;
|
217
|
-
this.mutationObserver = createObserver("mutation", () => this.updateFooterVisibility());
|
218
|
-
this.openTransitionProp = "opacity";
|
219
|
-
//--------------------------------------------------------------------------
|
220
|
-
//
|
221
|
-
// Private Methods
|
222
|
-
//
|
223
|
-
//--------------------------------------------------------------------------
|
224
|
-
this.setTransitionEl = (el) => {
|
225
|
-
this.transitionEl = el;
|
226
|
-
connectOpenCloseComponent(this);
|
227
|
-
};
|
228
|
-
this.openEnd = () => {
|
229
|
-
this.setFocus();
|
230
|
-
this.el.removeEventListener("calciteModalOpen", this.openEnd);
|
231
|
-
};
|
232
|
-
this.handleOutsideClose = () => {
|
233
|
-
if (this.disableOutsideClose) {
|
234
|
-
return;
|
235
|
-
}
|
236
|
-
this.close();
|
237
|
-
};
|
238
|
-
/** Close the modal, first running the `beforeClose` method */
|
239
|
-
this.close = () => {
|
240
|
-
return this.beforeClose(this.el).then(() => {
|
241
|
-
this.open = false;
|
242
|
-
this.isOpen = false;
|
243
|
-
focusElement(this.previousActiveElement);
|
244
|
-
this.removeOverflowHiddenClass();
|
245
|
-
});
|
246
|
-
};
|
247
|
-
this.focusFirstElement = () => {
|
248
|
-
focusElement(this.disableCloseButton ? getFocusableElements(this.el)[0] : this.closeButtonEl);
|
249
|
-
};
|
250
|
-
this.focusLastElement = () => {
|
251
|
-
const focusableElements = getFocusableElements(this.el).filter((el) => !el.getAttribute("data-focus-fence"));
|
252
|
-
if (focusableElements.length > 0) {
|
253
|
-
focusElement(focusableElements[focusableElements.length - 1]);
|
254
|
-
}
|
255
|
-
else {
|
256
|
-
focusElement(this.closeButtonEl);
|
257
|
-
}
|
258
|
-
};
|
259
|
-
this.updateFooterVisibility = () => {
|
260
|
-
this.hasFooter = !!getSlotted(this.el, [SLOTS.back, SLOTS.primary, SLOTS.secondary]);
|
261
|
-
};
|
262
|
-
}
|
263
|
-
//--------------------------------------------------------------------------
|
264
|
-
//
|
265
|
-
// Lifecycle
|
266
|
-
//
|
267
|
-
//--------------------------------------------------------------------------
|
268
|
-
componentWillLoad() {
|
269
|
-
// when modal initially renders, if active was set we need to open as watcher doesn't fire
|
270
|
-
if (this.open) {
|
271
|
-
requestAnimationFrame(() => this.openModal());
|
272
|
-
}
|
273
|
-
}
|
274
|
-
connectedCallback() {
|
275
|
-
var _a;
|
276
|
-
(_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
|
277
|
-
this.updateFooterVisibility();
|
278
|
-
connectConditionalSlotComponent(this);
|
279
|
-
connectOpenCloseComponent(this);
|
280
|
-
if (this.open) {
|
281
|
-
this.active = this.open;
|
282
|
-
}
|
283
|
-
if (this.active) {
|
284
|
-
this.activeHandler(this.active);
|
285
|
-
}
|
286
|
-
}
|
287
|
-
disconnectedCallback() {
|
288
|
-
var _a;
|
289
|
-
this.removeOverflowHiddenClass();
|
290
|
-
(_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
291
|
-
disconnectConditionalSlotComponent(this);
|
292
|
-
disconnectOpenCloseComponent(this);
|
293
|
-
}
|
294
|
-
render() {
|
295
|
-
return (h(Host, { "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" }, h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose }), this.renderStyle(), h("div", { class: {
|
296
|
-
[CSS.modal]: true,
|
297
|
-
[CSS.modalOpen]: this.isOpen
|
298
|
-
}, ref: this.setTransitionEl }, h("div", { "data-focus-fence": true, onFocus: this.focusLastElement, tabindex: "0" }), h("div", { class: CSS.header }, this.renderCloseButton(), h("header", { class: CSS.title }, h("slot", { name: CSS.header }))), h("div", { class: {
|
299
|
-
content: true,
|
300
|
-
"content--spaced": !this.noPadding,
|
301
|
-
"content--no-footer": !this.hasFooter
|
302
|
-
}, ref: (el) => (this.modalContent = el) }, h("slot", { name: SLOTS.content })), this.renderFooter(), h("div", { "data-focus-fence": true, onFocus: this.focusFirstElement, tabindex: "0" }))));
|
303
|
-
}
|
304
|
-
renderFooter() {
|
305
|
-
return this.hasFooter ? (h("div", { class: CSS.footer, key: "footer" }, h("span", { class: CSS.back }, h("slot", { name: SLOTS.back })), h("span", { class: CSS.secondary }, h("slot", { name: SLOTS.secondary })), h("span", { class: CSS.primary }, h("slot", { name: SLOTS.primary })))) : null;
|
306
|
-
}
|
307
|
-
renderCloseButton() {
|
308
|
-
return !this.disableCloseButton ? (h("button", { "aria-label": this.intlClose, class: CSS.close, key: "button", onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.intlClose }, h("calcite-icon", { icon: ICONS.close, scale: this.scale === "s" ? "s" : this.scale === "m" ? "m" : this.scale === "l" ? "l" : null }))) : null;
|
309
|
-
}
|
310
|
-
renderStyle() {
|
311
|
-
const hasCustomWidth = !isNaN(parseInt(`${this.width}`));
|
312
|
-
return hasCustomWidth ? (h("style", null, `
|
313
|
-
.${CSS.modal} {
|
314
|
-
max-width: ${this.width}px !important;
|
315
|
-
}
|
316
|
-
@media screen and (max-width: ${this.width}px) {
|
317
|
-
.${CSS.modal} {
|
318
|
-
height: 100% !important;
|
319
|
-
max-height: 100% !important;
|
320
|
-
width: 100% !important;
|
321
|
-
max-width: 100% !important;
|
322
|
-
margin: 0 !important;
|
323
|
-
border-radius: 0 !important;
|
324
|
-
}
|
325
|
-
.content {
|
326
|
-
flex: 1 1 auto !important;
|
327
|
-
max-height: unset !important;
|
328
|
-
}
|
329
|
-
}
|
330
|
-
`)) : null;
|
331
|
-
}
|
332
|
-
//--------------------------------------------------------------------------
|
333
|
-
//
|
334
|
-
// Event Listeners
|
335
|
-
//
|
336
|
-
//--------------------------------------------------------------------------
|
337
|
-
handleEscape(event) {
|
338
|
-
if (this.open && !this.disableEscape && event.key === "Escape" && !event.defaultPrevented) {
|
339
|
-
this.close();
|
340
|
-
event.preventDefault();
|
341
|
-
}
|
342
|
-
}
|
343
|
-
//--------------------------------------------------------------------------
|
344
|
-
//
|
345
|
-
// Public Methods
|
346
|
-
//
|
347
|
-
//--------------------------------------------------------------------------
|
348
|
-
/**
|
349
|
-
* Focus the first interactive element.
|
350
|
-
*
|
351
|
-
* @param el
|
352
|
-
* @deprecated use `setFocus` instead.
|
353
|
-
*/
|
354
|
-
async focusElement(el) {
|
355
|
-
if (el) {
|
356
|
-
el.focus();
|
357
|
-
}
|
358
|
-
return this.setFocus();
|
359
|
-
}
|
360
|
-
/**
|
361
|
-
* Sets focus on the component.
|
362
|
-
*
|
363
|
-
* By default, tries to focus on focusable content. If there is none, it will focus on the close button.
|
364
|
-
* To focus on the close button, use the `close-button` focus ID.
|
365
|
-
*
|
366
|
-
* @param focusId
|
367
|
-
*/
|
368
|
-
async setFocus(focusId) {
|
369
|
-
const closeButton = this.closeButtonEl;
|
370
|
-
return focusElement(focusId === "close-button" ? closeButton : getFocusableElements(this.el)[0] || closeButton);
|
371
|
-
}
|
372
|
-
/**
|
373
|
-
* Sets the scroll top of the component's content.
|
374
|
-
*
|
375
|
-
* @param top
|
376
|
-
* @param left
|
377
|
-
*/
|
378
|
-
async scrollContent(top = 0, left = 0) {
|
379
|
-
if (this.modalContent) {
|
380
|
-
if (this.modalContent.scrollTo) {
|
381
|
-
this.modalContent.scrollTo({ top, left, behavior: "smooth" });
|
382
|
-
}
|
383
|
-
else {
|
384
|
-
this.modalContent.scrollTop = top;
|
385
|
-
this.modalContent.scrollLeft = left;
|
386
|
-
}
|
387
|
-
}
|
388
|
-
}
|
389
|
-
onBeforeOpen() {
|
390
|
-
this.transitionEl.classList.add(CSS.openingActive);
|
391
|
-
this.calciteModalBeforeOpen.emit();
|
392
|
-
}
|
393
|
-
onOpen() {
|
394
|
-
this.transitionEl.classList.remove(CSS.openingIdle, CSS.openingActive);
|
395
|
-
this.calciteModalOpen.emit();
|
396
|
-
}
|
397
|
-
onBeforeClose() {
|
398
|
-
this.transitionEl.classList.add(CSS.closingActive);
|
399
|
-
this.calciteModalBeforeClose.emit();
|
400
|
-
}
|
401
|
-
onClose() {
|
402
|
-
this.transitionEl.classList.remove(CSS.closingIdle, CSS.closingActive);
|
403
|
-
this.calciteModalClose.emit();
|
404
|
-
}
|
405
|
-
activeHandler(value) {
|
406
|
-
this.open = value;
|
407
|
-
}
|
408
|
-
async toggleModal(value) {
|
409
|
-
var _a, _b;
|
410
|
-
this.active = value;
|
411
|
-
if (value) {
|
412
|
-
(_a = this.transitionEl) === null || _a === void 0 ? void 0 : _a.classList.add(CSS.openingIdle);
|
413
|
-
this.openModal();
|
414
|
-
}
|
415
|
-
else {
|
416
|
-
(_b = this.transitionEl) === null || _b === void 0 ? void 0 : _b.classList.add(CSS.closingIdle);
|
417
|
-
this.close();
|
418
|
-
}
|
419
|
-
}
|
420
|
-
/** Open the modal */
|
421
|
-
openModal() {
|
422
|
-
this.previousActiveElement = document.activeElement;
|
423
|
-
this.el.addEventListener("calciteModalOpen", this.openEnd);
|
424
|
-
this.open = true;
|
425
|
-
this.isOpen = true;
|
426
|
-
const titleEl = getSlotted(this.el, SLOTS.header);
|
427
|
-
const contentEl = getSlotted(this.el, SLOTS.content);
|
428
|
-
this.titleId = ensureId(titleEl);
|
429
|
-
this.contentId = ensureId(contentEl);
|
430
|
-
document.documentElement.classList.add(CSS.overflowHidden);
|
431
|
-
}
|
432
|
-
removeOverflowHiddenClass() {
|
433
|
-
document.documentElement.classList.remove(CSS.overflowHidden);
|
434
|
-
}
|
435
|
-
get el() { return getElement(this); }
|
436
|
-
static get watchers() { return {
|
437
|
-
"active": ["activeHandler"],
|
438
|
-
"open": ["toggleModal"]
|
439
|
-
}; }
|
440
|
-
};
|
441
|
-
Modal.style = modalCss;
|
442
|
-
|
443
|
-
export { Modal as calcite_modal };
|
444
|
-
|
445
|
-
//# sourceMappingURL=p-30a6199a.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"file":"calcite-modal.entry.esm.js","mappings":"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","names":[],"sources":["./node_modules/@a11y/focus-trap/shadow.js","./node_modules/@a11y/focus-trap/focusable.js","./node_modules/@esri/calcite-components/dist/collection/components/modal/resources.js","./node_modules/@esri/calcite-components/dist/collection/components/modal/modal.css?tag=calcite-modal&encapsulation=shadow","./node_modules/@esri/calcite-components/dist/collection/components/modal/modal.js"],"sourcesContent":["/**\n * Traverses the slots of the open shadowroots and returns all children matching the query.\n * @param {ShadowRoot | HTMLElement} root\n * @param skipNode\n * @param isMatch\n * @param {number} maxDepth\n * @param {number} depth\n * @returns {HTMLElement[]}\n */\nexport function queryShadowRoot(root, skipNode, isMatch, maxDepth = 20, depth = 0) {\n let matches = [];\n // If the depth is above the max depth, abort the searching here.\n if (depth >= maxDepth) {\n return matches;\n }\n // Traverses a slot element\n const traverseSlot = ($slot) => {\n // Only check nodes that are of the type Node.ELEMENT_NODE\n // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\n const assignedNodes = $slot.assignedNodes().filter(node => node.nodeType === 1);\n if (assignedNodes.length > 0) {\n return queryShadowRoot(assignedNodes[0].parentElement, skipNode, isMatch, maxDepth, depth + 1);\n }\n return [];\n };\n // Go through each child and continue the traversing if necessary\n // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.\n // Therefore we fallback to an empty array if it is undefined.\n const children = Array.from(root.children || []);\n for (const $child of children) {\n // Check if the node and its descendants should be skipped\n if (skipNode($child)) {\n continue;\n }\n // If the child matches we always add it\n if (isMatch($child)) {\n matches.push($child);\n }\n if ($child.shadowRoot != null) {\n matches.push(...queryShadowRoot($child.shadowRoot, skipNode, isMatch, maxDepth, depth + 1));\n }\n else if ($child.tagName === \"SLOT\") {\n matches.push(...traverseSlot($child));\n }\n else {\n matches.push(...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1));\n }\n }\n return matches;\n}\n//# sourceMappingURL=shadow.js.map","/**\n * Returns whether the element is hidden.\n * @param $elem\n */\nexport function isHidden($elem) {\n return $elem.hasAttribute(\"hidden\")\n || ($elem.hasAttribute(\"aria-hidden\") && $elem.getAttribute(\"aria-hidden\") !== \"false\")\n // A quick and dirty way to check whether the element is hidden.\n // For a more fine-grained check we could use \"window.getComputedStyle\" but we don't because of bad performance.\n // If the element has visibility set to \"hidden\" or \"collapse\", display set to \"none\" or opacity set to \"0\" through CSS\n // we won't be able to catch it here. We accept it due to the huge performance benefits.\n || $elem.style.display === `none`\n || $elem.style.opacity === `0`\n || $elem.style.visibility === `hidden`\n || $elem.style.visibility === `collapse`;\n // If offsetParent is null we can assume that the element is hidden\n // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null\n //|| $elem.offsetParent == null;\n}\n/**\n * Returns whether the element is disabled.\n * @param $elem\n */\nexport function isDisabled($elem) {\n return $elem.hasAttribute(\"disabled\")\n || ($elem.hasAttribute(\"aria-disabled\") && $elem.getAttribute(\"aria-disabled\") !== \"false\");\n}\n/**\n * Determines whether an element is focusable.\n * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194\n * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable\n * @param $elem\n */\nexport function isFocusable($elem) {\n // Discard elements that are removed from the tab order.\n if ($elem.getAttribute(\"tabindex\") === \"-1\" || isHidden($elem) || isDisabled($elem)) {\n return false;\n }\n return (\n // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists\n $elem.hasAttribute(\"tabindex\")\n // Anchor tags or area tags with a href set\n || ($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) && $elem.hasAttribute(\"href\")\n // Form elements which are not disabled\n || ($elem instanceof HTMLButtonElement\n || $elem instanceof HTMLInputElement\n || $elem instanceof HTMLTextAreaElement\n || $elem instanceof HTMLSelectElement)\n // IFrames\n || $elem instanceof HTMLIFrameElement);\n}\n//# sourceMappingURL=focusable.js.map","/*!\n * All material copyright ESRI, All Rights Reserved, unless otherwise specified.\n * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.\n * v1.0.0-beta.97\n */\nexport const CSS = {\n modal: \"modal\",\n modalOpen: \"modal--open\",\n title: \"title\",\n header: \"header\",\n footer: \"footer\",\n scrim: \"scrim\",\n back: \"back\",\n close: \"close\",\n secondary: \"secondary\",\n primary: \"primary\",\n overflowHidden: \"overflow-hidden\",\n // these classes help apply the animation in phases to only set transform on open/close\n // this helps avoid a positioning issue for any floating-ui-owning children\n openingIdle: \"modal--opening-idle\",\n openingActive: \"modal--opening-active\",\n closingIdle: \"modal--closing-idle\",\n closingActive: \"modal--closing-active\"\n};\nexport const ICONS = {\n close: \"x\"\n};\nexport const SLOTS = {\n content: \"content\",\n header: \"header\",\n back: \"back\",\n secondary: \"secondary\",\n primary: \"primary\"\n};\nexport const TEXT = {\n close: \"Close\"\n};\n","/* mixins & extensions */\n@keyframes in {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n@keyframes in-down {\n 0% {\n opacity: 0;\n transform: translate3D(0, -5px, 0);\n }\n 100% {\n opacity: 1;\n transform: translate3D(0, 0, 0);\n }\n}\n@keyframes in-up {\n 0% {\n opacity: 0;\n transform: translate3D(0, 5px, 0);\n }\n 100% {\n opacity: 1;\n transform: translate3D(0, 0, 0);\n }\n}\n@keyframes in-scale {\n 0% {\n opacity: 0;\n transform: scale3D(0.95, 0.95, 1);\n }\n 100% {\n opacity: 1;\n transform: scale3D(1, 1, 1);\n }\n}\n:root {\n --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));\n --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);\n --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));\n --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));\n --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));\n}\n\n.calcite-animate {\n opacity: 0;\n animation-fill-mode: both;\n animation-duration: var(--calcite-animation-timing);\n}\n\n.calcite-animate__in {\n animation-name: in;\n}\n\n.calcite-animate__in-down {\n animation-name: in-down;\n}\n\n.calcite-animate__in-up {\n animation-name: in-up;\n}\n\n.calcite-animate__in-scale {\n animation-name: in-scale;\n}\n\n@media (prefers-reduced-motion: reduce) {\n :root {\n --calcite-internal-duration-factor: 0.01;\n }\n}\n/**\n* Currently only used in Checkbox.\n*/\n:root {\n --calcite-floating-ui-transition: var(--calcite-animation-timing);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n/**\n* CSS Custom Properties\n*\n* These properties can be overridden using the component's tag as selector.\n*\n* @prop --calcite-modal-content-text: [Deprecated] The component content's font size.\n* @prop --calcite-modal-padding: [Deprecated] The padding around content area slot.\n* @prop --calcite-modal-padding-large: [Deprecated] The left/right padding around items within the component.\n* @prop --calcite-modal-title-text: [Deprecated] The component title's font size.\n* @prop --calcite-scrim-background: [Deprecated] The component's semi-transparent background color.\n*/\n:host {\n position: fixed;\n inset: 0px;\n z-index: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow-y: hidden;\n color: var(--calcite-ui-text-2);\n opacity: 0;\n visibility: hidden !important;\n transition: visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);\n}\n\n:host([scale=s]) {\n --calcite-modal-padding: 0.75rem;\n --calcite-modal-padding-large: 1rem;\n --calcite-modal-title-text: var(--calcite-font-size-1);\n --calcite-modal-content-text: var(--calcite-font-size--1);\n --calcite-modal-padding-internal: 0.75rem;\n --calcite-modal-padding-large-internal: 1rem;\n --calcite-modal-title-text-internal: var(--calcite-font-size-1);\n --calcite-modal-content-text-internal: var(--calcite-font-size--1);\n}\n\n:host([scale=m]) {\n --calcite-modal-padding: 1rem;\n --calcite-modal-padding-large: 1.25rem;\n --calcite-modal-title-text: var(--calcite-font-size-2);\n --calcite-modal-content-text: var(--calcite-font-size-0);\n --calcite-modal-padding-internal: 1rem;\n --calcite-modal-padding-large-internal: 1.25rem;\n --calcite-modal-title-text-internal: var(--calcite-font-size-2);\n --calcite-modal-content-text-internal: var(--calcite-font-size-0);\n}\n\n:host([scale=l]) {\n --calcite-modal-padding: 1.25rem;\n --calcite-modal-padding-large: 1.5rem;\n --calcite-modal-title-text: var(--calcite-font-size-3);\n --calcite-modal-content-text: var(--calcite-font-size-1);\n --calcite-modal-padding-internal: 1.25rem;\n --calcite-modal-padding-large-internal: 1.5rem;\n --calcite-modal-title-text-internal: var(--calcite-font-size-3);\n --calcite-modal-content-text-internal: var(--calcite-font-size-1);\n}\n\n.scrim {\n --calcite-scrim-background: rgba(0, 0, 0, 0.75);\n position: fixed;\n inset: 0px;\n display: flex;\n overflow-y: hidden;\n}\n\n.modal {\n pointer-events: none;\n z-index: 800;\n float: none;\n margin: 1.5rem;\n box-sizing: border-box;\n display: flex;\n inline-size: 100%;\n flex-direction: column;\n overflow: hidden;\n border-radius: 0.25rem;\n background-color: var(--calcite-ui-foreground-1);\n opacity: 0;\n --tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);\n --tw-shadow-colored: 0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n -webkit-overflow-scrolling: touch;\n visibility: hidden;\n transition: transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);\n --calcite-modal-hidden-position: translate3d(0, 20px, 0);\n --calcite-modal-shown-position: translate3d(0, 0, 0);\n}\n.modal--opening-idle {\n transform: var(--calcite-modal-hidden-position);\n}\n.modal--opening-active {\n transform: var(--calcite-modal-shown-position);\n}\n.modal--closing-idle {\n transform: var(--calcite-modal-shown-position);\n}\n.modal--closing-active {\n transform: var(--calcite-modal-hidden-position);\n}\n\n:host([open]) {\n opacity: 1;\n visibility: visible !important;\n transition-delay: 0ms;\n}\n:host([open]) .modal--open {\n pointer-events: auto;\n visibility: visible;\n opacity: 1;\n transition: transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);\n transition-delay: 0ms;\n}\n\n/**\n * Header\n */\n.header {\n z-index: 400;\n display: flex;\n min-inline-size: 0px;\n max-inline-size: 100%;\n border-start-start-radius: 0.25rem;\n border-start-end-radius: 0.25rem;\n border-width: 0px;\n border-block-end-width: 1px;\n border-style: solid;\n border-color: var(--calcite-ui-border-3);\n background-color: var(--calcite-ui-foreground-1);\n flex: 0 0 auto;\n}\n\n.close {\n order: 2;\n margin: 0px;\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n border-style: none;\n background-color: transparent;\n color: var(--calcite-ui-text-3);\n outline-color: transparent;\n transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;\n border-start-end-radius: 0.25rem;\n padding-block: var(--calcite-modal-padding, var(--calcite-modal-padding-internal));\n padding-inline: var(--calcite-modal-padding, var(--calcite-modal-padding-internal));\n flex: 0 0 auto;\n}\n.close calcite-icon {\n pointer-events: none;\n vertical-align: -2px;\n}\n.close:focus {\n outline: 2px solid var(--calcite-ui-brand);\n outline-offset: -2px;\n}\n.close:hover, .close:focus, .close:active {\n background-color: var(--calcite-ui-foreground-2);\n color: var(--calcite-ui-text-1);\n}\n\n.title {\n order: 1;\n display: flex;\n min-inline-size: 0px;\n align-items: center;\n flex: 1 1 auto;\n padding-block: var(--calcite-modal-padding, var(--calcite-model-padding-internal));\n padding-inline: var(--calcite-modal-padding-large, var(--calcite-modal-padding-large-internal));\n}\n\nslot[name=header]::slotted(*), \n*::slotted([slot=header]) {\n margin: 0px;\n font-weight: var(--calcite-font-weight-normal);\n color: var(--calcite-ui-text-1);\n font-size: var(--calcite-modal-title-text, var(--calcite-modal-title-text-internal));\n}\n\n/**\n * Content area\n */\n.content {\n position: relative;\n box-sizing: border-box;\n display: block;\n block-size: 100%;\n overflow: auto;\n background-color: var(--calcite-ui-foreground-1);\n padding: 0px;\n max-block-size: calc(100vh - 12rem);\n}\n\n.content--spaced {\n padding: var(--calcite-modal-padding);\n}\n\n.content--no-footer {\n border-end-end-radius: 0.25rem;\n border-end-start-radius: 0.25rem;\n}\n\nslot[name=content]::slotted(*),\n*::slotted([slot=content]) {\n font-size: var(--calcite-modal-content-text, var(--calcite-modal-context-text-internal));\n}\n\n:host([background-color=grey]) .content {\n background-color: var(--calcite-ui-background);\n}\n\n/**\n * Footer\n */\n.footer {\n z-index: 400;\n margin-block-start: auto;\n box-sizing: border-box;\n display: flex;\n inline-size: 100%;\n justify-content: space-between;\n border-end-end-radius: 0.25rem;\n border-end-start-radius: 0.25rem;\n border-width: 0px;\n border-block-start-width: 1px;\n border-style: solid;\n border-color: var(--calcite-ui-border-3);\n background-color: var(--calcite-ui-foreground-1);\n flex: 0 0 auto;\n padding-block: var(--calcite-modal-padding, var(--calcite-modal-padding-internal));\n padding-inline: var(--calcite-modal-padding-large, var(--calcite-modal-padding-large-internal));\n}\n\n.footer--hide-back .back, \n.footer--hide-secondary .secondary {\n display: none;\n}\n\n.back {\n display: block;\n margin-inline-end: auto;\n}\n\n.secondary {\n margin-inline: 0.25rem;\n display: block;\n}\n\nslot[name=primary] {\n display: block;\n}\n\n/**\n * Sizes\n */\n:host([width=small]) .modal {\n inline-size: auto;\n}\n\n:host([width=s]) .modal {\n max-inline-size: 32rem;\n}\n\n@media screen and (max-width: 35rem) {\n :host([width=s]) .modal {\n margin: 0px;\n block-size: 100%;\n max-block-size: 100%;\n inline-size: 100%;\n max-inline-size: 100%;\n border-radius: 0px;\n }\n :host([width=s]) .content {\n flex: 1 1 auto;\n max-block-size: unset;\n }\n\n :host([width=s][docked]) {\n align-items: flex-end;\n }\n}\n:host([width=m]) .modal {\n max-inline-size: 48rem;\n}\n\n@media screen and (max-width: 51rem) {\n :host([width=m]) .modal {\n margin: 0px;\n block-size: 100%;\n max-block-size: 100%;\n inline-size: 100%;\n max-inline-size: 100%;\n border-radius: 0px;\n }\n :host([width=m]) .content {\n flex: 1 1 auto;\n max-block-size: unset;\n }\n\n :host([width=m][docked]) {\n align-items: flex-end;\n }\n}\n:host([width=l]) .modal {\n max-inline-size: 94rem;\n}\n\n@media screen and (max-width: 97rem) {\n :host([width=l]) .modal {\n margin: 0px;\n block-size: 100%;\n max-block-size: 100%;\n inline-size: 100%;\n max-inline-size: 100%;\n border-radius: 0px;\n }\n :host([width=l]) .content {\n flex: 1 1 auto;\n max-block-size: unset;\n }\n\n :host([width=l][docked]) {\n align-items: flex-end;\n }\n}\n/**\n * Fullscreen\n */\n:host([fullscreen]) {\n background-color: transparent;\n}\n:host([fullscreen]) .modal {\n margin: 0px;\n block-size: 100%;\n max-block-size: 100%;\n inline-size: 100%;\n max-inline-size: 100%;\n --calcite-modal-hidden-position: translate3D(0, 20px, 0) scale(0.95);\n --calcite-modal-shown-position: translate3D(0, 0, 0) scale(1);\n}\n:host([fullscreen]) .content {\n max-block-size: 100%;\n flex: 1 1 auto;\n}\n\n:host([open][fullscreen]) .header {\n border-radius: 0;\n}\n:host([open][fullscreen]) .footer {\n border-radius: 0;\n}\n\n/**\n * Docked\n */\n:host([docked]) .modal {\n block-size: auto;\n}\n:host([docked]) .content {\n block-size: auto;\n flex: 1 1 auto;\n}\n@media screen and (max-width: 860px) {\n :host([docked]) .modal {\n border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0;\n }\n :host([docked]) .close {\n border-start-end-radius: var(--calcite-border-radius);\n }\n}\n\n/**\n * Colors\n */\n:host([color=red]) .modal {\n border-color: var(--calcite-ui-danger);\n}\n\n:host([color=blue]) .modal {\n border-color: var(--calcite-ui-info);\n}\n\n:host([color=red]) .modal, \n:host([color=blue]) .modal {\n border-width: 0px;\n border-block-start-width: 4px;\n border-style: solid;\n}\n:host([color=red]) .header, \n:host([color=blue]) .header {\n border-radius: 0.25rem;\n border-end-end-radius: 0px;\n border-end-start-radius: 0px;\n}\n\n/**\n * Tablet\n */\n@media screen and (max-width: 860px) {\n slot[name=header]::slotted(*), \n*::slotted([slot=header]) {\n font-size: var(--calcite-font-size-1);\n }\n\n .footer {\n position: sticky;\n inset-block-end: 0px;\n }\n}\n/**\n * Mobile\n */\n@media screen and (max-width: 480px) {\n .footer {\n flex-direction: column;\n }\n\n .back, \n.secondary {\n margin: 0px;\n margin-block-end: 0.25rem;\n }\n}","/*!\n * All material copyright ESRI, All Rights Reserved, unless otherwise specified.\n * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.\n * v1.0.0-beta.97\n */\nimport { h, Host } from \"@stencil/core\";\nimport { ensureId, focusElement, getSlotted, isCalciteFocusable } from \"../../utils/dom\";\nimport { queryShadowRoot } from \"@a11y/focus-trap/shadow\";\nimport { isFocusable, isHidden } from \"@a11y/focus-trap/focusable\";\nimport { CSS, ICONS, SLOTS, TEXT } from \"./resources\";\nimport { createObserver } from \"../../utils/observers\";\nimport { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from \"../../utils/conditionalSlot\";\nimport { connectOpenCloseComponent, disconnectOpenCloseComponent } from \"../../utils/openCloseComponent\";\nconst isFocusableExtended = (el) => {\n return isCalciteFocusable(el) || isFocusable(el);\n};\nconst getFocusableElements = (el) => {\n return queryShadowRoot(el, isHidden, isFocusableExtended);\n};\n/**\n * @slot header - A slot for adding header text.\n * @slot content - A slot for adding the component's content.\n * @slot primary - A slot for adding a primary button.\n * @slot secondary - A slot for adding a secondary button.\n * @slot back - A slot for adding a back button.\n */\nexport class Modal {\n constructor() {\n //--------------------------------------------------------------------------\n //\n // Properties\n //\n //--------------------------------------------------------------------------\n /**\n * When `true`, the component is active.\n *\n * @deprecated use `open` instead.\n */\n this.active = false;\n /** When `true`, displays and positions the component. */\n this.open = false;\n /** Passes a function to run before the component closes. */\n this.beforeClose = () => Promise.resolve();\n /** When `true`, disables the component's close button. */\n this.disableCloseButton = false;\n /** When `true`, disables the closing of the component when clicked outside. */\n this.disableOutsideClose = false;\n /** Accessible name for the component's close button. */\n this.intlClose = TEXT.close;\n /** When `true`, disables the default close on escape behavior. */\n this.disableEscape = false;\n /** Specifies the size of the component. */\n this.scale = \"m\";\n /** Specifies the width of the component. Can use scale sizes or pass a number (displays in pixels). */\n this.width = \"m\";\n /** Sets the background color of the component's content. */\n this.backgroundColor = \"white\";\n /**\n * When `true`, disables spacing to the content area slot.\n *\n * @deprecated Use `--calcite-modal-padding` CSS variable instead.\n */\n this.noPadding = false;\n //--------------------------------------------------------------------------\n //\n // Variables\n //\n //--------------------------------------------------------------------------\n this.hasFooter = true;\n /**\n * We use internal variable to make sure initially open modal can transition from closed state when rendered\n *\n * @private\n */\n this.isOpen = false;\n this.mutationObserver = createObserver(\"mutation\", () => this.updateFooterVisibility());\n this.openTransitionProp = \"opacity\";\n //--------------------------------------------------------------------------\n //\n // Private Methods\n //\n //--------------------------------------------------------------------------\n this.setTransitionEl = (el) => {\n this.transitionEl = el;\n connectOpenCloseComponent(this);\n };\n this.openEnd = () => {\n this.setFocus();\n this.el.removeEventListener(\"calciteModalOpen\", this.openEnd);\n };\n this.handleOutsideClose = () => {\n if (this.disableOutsideClose) {\n return;\n }\n this.close();\n };\n /** Close the modal, first running the `beforeClose` method */\n this.close = () => {\n return this.beforeClose(this.el).then(() => {\n this.open = false;\n this.isOpen = false;\n focusElement(this.previousActiveElement);\n this.removeOverflowHiddenClass();\n });\n };\n this.focusFirstElement = () => {\n focusElement(this.disableCloseButton ? getFocusableElements(this.el)[0] : this.closeButtonEl);\n };\n this.focusLastElement = () => {\n const focusableElements = getFocusableElements(this.el).filter((el) => !el.getAttribute(\"data-focus-fence\"));\n if (focusableElements.length > 0) {\n focusElement(focusableElements[focusableElements.length - 1]);\n }\n else {\n focusElement(this.closeButtonEl);\n }\n };\n this.updateFooterVisibility = () => {\n this.hasFooter = !!getSlotted(this.el, [SLOTS.back, SLOTS.primary, SLOTS.secondary]);\n };\n }\n //--------------------------------------------------------------------------\n //\n // Lifecycle\n //\n //--------------------------------------------------------------------------\n componentWillLoad() {\n // when modal initially renders, if active was set we need to open as watcher doesn't fire\n if (this.open) {\n requestAnimationFrame(() => this.openModal());\n }\n }\n connectedCallback() {\n var _a;\n (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });\n this.updateFooterVisibility();\n connectConditionalSlotComponent(this);\n connectOpenCloseComponent(this);\n if (this.open) {\n this.active = this.open;\n }\n if (this.active) {\n this.activeHandler(this.active);\n }\n }\n disconnectedCallback() {\n var _a;\n this.removeOverflowHiddenClass();\n (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();\n disconnectConditionalSlotComponent(this);\n disconnectOpenCloseComponent(this);\n }\n render() {\n return (h(Host, { \"aria-describedby\": this.contentId, \"aria-labelledby\": this.titleId, \"aria-modal\": \"true\", role: \"dialog\" }, h(\"calcite-scrim\", { class: CSS.scrim, onClick: this.handleOutsideClose }), this.renderStyle(), h(\"div\", { class: {\n [CSS.modal]: true,\n [CSS.modalOpen]: this.isOpen\n }, ref: this.setTransitionEl }, h(\"div\", { \"data-focus-fence\": true, onFocus: this.focusLastElement, tabindex: \"0\" }), h(\"div\", { class: CSS.header }, this.renderCloseButton(), h(\"header\", { class: CSS.title }, h(\"slot\", { name: CSS.header }))), h(\"div\", { class: {\n content: true,\n \"content--spaced\": !this.noPadding,\n \"content--no-footer\": !this.hasFooter\n }, ref: (el) => (this.modalContent = el) }, h(\"slot\", { name: SLOTS.content })), this.renderFooter(), h(\"div\", { \"data-focus-fence\": true, onFocus: this.focusFirstElement, tabindex: \"0\" }))));\n }\n renderFooter() {\n return this.hasFooter ? (h(\"div\", { class: CSS.footer, key: \"footer\" }, h(\"span\", { class: CSS.back }, h(\"slot\", { name: SLOTS.back })), h(\"span\", { class: CSS.secondary }, h(\"slot\", { name: SLOTS.secondary })), h(\"span\", { class: CSS.primary }, h(\"slot\", { name: SLOTS.primary })))) : null;\n }\n renderCloseButton() {\n return !this.disableCloseButton ? (h(\"button\", { \"aria-label\": this.intlClose, class: CSS.close, key: \"button\", onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.intlClose }, h(\"calcite-icon\", { icon: ICONS.close, scale: this.scale === \"s\" ? \"s\" : this.scale === \"m\" ? \"m\" : this.scale === \"l\" ? \"l\" : null }))) : null;\n }\n renderStyle() {\n const hasCustomWidth = !isNaN(parseInt(`${this.width}`));\n return hasCustomWidth ? (h(\"style\", null, `\n .${CSS.modal} {\n max-width: ${this.width}px !important;\n }\n @media screen and (max-width: ${this.width}px) {\n .${CSS.modal} {\n height: 100% !important;\n max-height: 100% !important;\n width: 100% !important;\n max-width: 100% !important;\n margin: 0 !important;\n border-radius: 0 !important;\n }\n .content {\n flex: 1 1 auto !important;\n max-height: unset !important;\n }\n }\n `)) : null;\n }\n //--------------------------------------------------------------------------\n //\n // Event Listeners\n //\n //--------------------------------------------------------------------------\n handleEscape(event) {\n if (this.open && !this.disableEscape && event.key === \"Escape\" && !event.defaultPrevented) {\n this.close();\n event.preventDefault();\n }\n }\n //--------------------------------------------------------------------------\n //\n // Public Methods\n //\n //--------------------------------------------------------------------------\n /**\n * Focus the first interactive element.\n *\n * @param el\n * @deprecated use `setFocus` instead.\n */\n async focusElement(el) {\n if (el) {\n el.focus();\n }\n return this.setFocus();\n }\n /**\n * Sets focus on the component.\n *\n * By default, tries to focus on focusable content. If there is none, it will focus on the close button.\n * To focus on the close button, use the `close-button` focus ID.\n *\n * @param focusId\n */\n async setFocus(focusId) {\n const closeButton = this.closeButtonEl;\n return focusElement(focusId === \"close-button\" ? closeButton : getFocusableElements(this.el)[0] || closeButton);\n }\n /**\n * Sets the scroll top of the component's content.\n *\n * @param top\n * @param left\n */\n async scrollContent(top = 0, left = 0) {\n if (this.modalContent) {\n if (this.modalContent.scrollTo) {\n this.modalContent.scrollTo({ top, left, behavior: \"smooth\" });\n }\n else {\n this.modalContent.scrollTop = top;\n this.modalContent.scrollLeft = left;\n }\n }\n }\n onBeforeOpen() {\n this.transitionEl.classList.add(CSS.openingActive);\n this.calciteModalBeforeOpen.emit();\n }\n onOpen() {\n this.transitionEl.classList.remove(CSS.openingIdle, CSS.openingActive);\n this.calciteModalOpen.emit();\n }\n onBeforeClose() {\n this.transitionEl.classList.add(CSS.closingActive);\n this.calciteModalBeforeClose.emit();\n }\n onClose() {\n this.transitionEl.classList.remove(CSS.closingIdle, CSS.closingActive);\n this.calciteModalClose.emit();\n }\n activeHandler(value) {\n this.open = value;\n }\n async toggleModal(value) {\n var _a, _b;\n this.active = value;\n if (value) {\n (_a = this.transitionEl) === null || _a === void 0 ? void 0 : _a.classList.add(CSS.openingIdle);\n this.openModal();\n }\n else {\n (_b = this.transitionEl) === null || _b === void 0 ? void 0 : _b.classList.add(CSS.closingIdle);\n this.close();\n }\n }\n /** Open the modal */\n openModal() {\n this.previousActiveElement = document.activeElement;\n this.el.addEventListener(\"calciteModalOpen\", this.openEnd);\n this.open = true;\n this.isOpen = true;\n const titleEl = getSlotted(this.el, SLOTS.header);\n const contentEl = getSlotted(this.el, SLOTS.content);\n this.titleId = ensureId(titleEl);\n this.contentId = ensureId(contentEl);\n document.documentElement.classList.add(CSS.overflowHidden);\n }\n removeOverflowHiddenClass() {\n document.documentElement.classList.remove(CSS.overflowHidden);\n }\n static get is() { return \"calcite-modal\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"modal.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"modal.css\"]\n };\n }\n static get properties() {\n return {\n \"active\": {\n \"type\": \"boolean\",\n \"mutable\": true,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [{\n \"name\": \"deprecated\",\n \"text\": \"use `open` instead.\"\n }],\n \"text\": \"When `true`, the component is active.\"\n },\n \"attribute\": \"active\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n },\n \"open\": {\n \"type\": \"boolean\",\n \"mutable\": true,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"When `true`, displays and positions the component.\"\n },\n \"attribute\": \"open\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n },\n \"beforeClose\": {\n \"type\": \"unknown\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"(el: HTMLElement) => Promise<void>\",\n \"resolved\": \"(el: HTMLElement) => Promise<void>\",\n \"references\": {\n \"HTMLElement\": {\n \"location\": \"global\"\n },\n \"Promise\": {\n \"location\": \"global\"\n }\n }\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Passes a function to run before the component closes.\"\n },\n \"defaultValue\": \"() => Promise.resolve()\"\n },\n \"disableCloseButton\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"When `true`, disables the component's close button.\"\n },\n \"attribute\": \"disable-close-button\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n },\n \"disableOutsideClose\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"When `true`, disables the closing of the component when clicked outside.\"\n },\n \"attribute\": \"disable-outside-close\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n },\n \"intlClose\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Accessible name for the component's close button.\"\n },\n \"attribute\": \"intl-close\",\n \"reflect\": false,\n \"defaultValue\": \"TEXT.close\"\n },\n \"docked\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"When `true`, prevents the component from expanding to the entire screen on mobile devices.\"\n },\n \"attribute\": \"docked\",\n \"reflect\": true\n },\n \"disableEscape\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"When `true`, disables the default close on escape behavior.\"\n },\n \"attribute\": \"disable-escape\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n },\n \"scale\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"Scale\",\n \"resolved\": \"\\\"l\\\" | \\\"m\\\" | \\\"s\\\"\",\n \"references\": {\n \"Scale\": {\n \"location\": \"import\",\n \"path\": \"../interfaces\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Specifies the size of the component.\"\n },\n \"attribute\": \"scale\",\n \"reflect\": true,\n \"defaultValue\": \"\\\"m\\\"\"\n },\n \"width\": {\n \"type\": \"any\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"Scale | number\",\n \"resolved\": \"\\\"l\\\" | \\\"m\\\" | \\\"s\\\" | number\",\n \"references\": {\n \"Scale\": {\n \"location\": \"import\",\n \"path\": \"../interfaces\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Specifies the width of the component. Can use scale sizes or pass a number (displays in pixels).\"\n },\n \"attribute\": \"width\",\n \"reflect\": true,\n \"defaultValue\": \"\\\"m\\\"\"\n },\n \"fullscreen\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Sets the component to always be fullscreen (overrides `width`).\"\n },\n \"attribute\": \"fullscreen\",\n \"reflect\": true\n },\n \"color\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"\\\"red\\\" | \\\"blue\\\"\",\n \"resolved\": \"\\\"blue\\\" | \\\"red\\\"\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Adds a color bar to the top of component for visual impact.\\nUse color to add importance to destructive or workflow dialogs.\"\n },\n \"attribute\": \"color\",\n \"reflect\": true\n },\n \"backgroundColor\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"ModalBackgroundColor\",\n \"resolved\": \"\\\"grey\\\" | \\\"white\\\"\",\n \"references\": {\n \"ModalBackgroundColor\": {\n \"location\": \"import\",\n \"path\": \"./interfaces\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Sets the background color of the component's content.\"\n },\n \"attribute\": \"background-color\",\n \"reflect\": true,\n \"defaultValue\": \"\\\"white\\\"\"\n },\n \"noPadding\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [{\n \"name\": \"deprecated\",\n \"text\": \"Use `--calcite-modal-padding` CSS variable instead.\"\n }],\n \"text\": \"When `true`, disables spacing to the content area slot.\"\n },\n \"attribute\": \"no-padding\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n }\n };\n }\n static get states() {\n return {\n \"hasFooter\": {},\n \"isOpen\": {}\n };\n }\n static get events() {\n return [{\n \"method\": \"calciteModalBeforeClose\",\n \"name\": \"calciteModalBeforeClose\",\n \"bubbles\": true,\n \"cancelable\": false,\n \"composed\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Fires when the component is requested to be closed and before the closing transition begins.\"\n },\n \"complexType\": {\n \"original\": \"void\",\n \"resolved\": \"void\",\n \"references\": {}\n }\n }, {\n \"method\": \"calciteModalClose\",\n \"name\": \"calciteModalClose\",\n \"bubbles\": true,\n \"cancelable\": false,\n \"composed\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Fires when the component is closed and animation is complete.\"\n },\n \"complexType\": {\n \"original\": \"void\",\n \"resolved\": \"void\",\n \"references\": {}\n }\n }, {\n \"method\": \"calciteModalBeforeOpen\",\n \"name\": \"calciteModalBeforeOpen\",\n \"bubbles\": true,\n \"cancelable\": false,\n \"composed\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\"\n },\n \"complexType\": {\n \"original\": \"void\",\n \"resolved\": \"void\",\n \"references\": {}\n }\n }, {\n \"method\": \"calciteModalOpen\",\n \"name\": \"calciteModalOpen\",\n \"bubbles\": true,\n \"cancelable\": false,\n \"composed\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Fires when the component is open and animation is complete.\"\n },\n \"complexType\": {\n \"original\": \"void\",\n \"resolved\": \"void\",\n \"references\": {}\n }\n }];\n }\n static get methods() {\n return {\n \"focusElement\": {\n \"complexType\": {\n \"signature\": \"(el?: HTMLElement) => Promise<void>\",\n \"parameters\": [{\n \"tags\": [{\n \"name\": \"param\",\n \"text\": \"el\"\n }],\n \"text\": \"\"\n }],\n \"references\": {\n \"Promise\": {\n \"location\": \"global\"\n },\n \"HTMLElement\": {\n \"location\": \"global\"\n }\n },\n \"return\": \"Promise<void>\"\n },\n \"docs\": {\n \"text\": \"Focus the first interactive element.\",\n \"tags\": [{\n \"name\": \"param\",\n \"text\": \"el\"\n }, {\n \"name\": \"deprecated\",\n \"text\": \"use `setFocus` instead.\"\n }]\n }\n },\n \"setFocus\": {\n \"complexType\": {\n \"signature\": \"(focusId?: \\\"close-button\\\") => Promise<void>\",\n \"parameters\": [{\n \"tags\": [{\n \"name\": \"param\",\n \"text\": \"focusId\"\n }],\n \"text\": \"\"\n }],\n \"references\": {\n \"Promise\": {\n \"location\": \"global\"\n }\n },\n \"return\": \"Promise<void>\"\n },\n \"docs\": {\n \"text\": \"Sets focus on the component.\\n\\nBy default, tries to focus on focusable content. If there is none, it will focus on the close button.\\nTo focus on the close button, use the `close-button` focus ID.\",\n \"tags\": [{\n \"name\": \"param\",\n \"text\": \"focusId\"\n }]\n }\n },\n \"scrollContent\": {\n \"complexType\": {\n \"signature\": \"(top?: number, left?: number) => Promise<void>\",\n \"parameters\": [{\n \"tags\": [{\n \"name\": \"param\",\n \"text\": \"top\"\n }],\n \"text\": \"\"\n }, {\n \"tags\": [{\n \"name\": \"param\",\n \"text\": \"left\"\n }],\n \"text\": \"\"\n }],\n \"references\": {\n \"Promise\": {\n \"location\": \"global\"\n }\n },\n \"return\": \"Promise<void>\"\n },\n \"docs\": {\n \"text\": \"Sets the scroll top of the component's content.\",\n \"tags\": [{\n \"name\": \"param\",\n \"text\": \"top\"\n }, {\n \"name\": \"param\",\n \"text\": \"left\"\n }]\n }\n }\n };\n }\n static get elementRef() { return \"el\"; }\n static get watchers() {\n return [{\n \"propName\": \"active\",\n \"methodName\": \"activeHandler\"\n }, {\n \"propName\": \"open\",\n \"methodName\": \"toggleModal\"\n }];\n }\n static get listeners() {\n return [{\n \"name\": \"keydown\",\n \"method\": \"handleEscape\",\n \"target\": \"window\",\n \"capture\": false,\n \"passive\": false\n }];\n }\n}\n"],"version":3}
|