@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.
Files changed (131) hide show
  1. package/dist/assets/t9n/solution-config-modal/resources.json +22 -0
  2. package/dist/assets/t9n/solution-config-modal/resources_en.json +22 -0
  3. package/dist/cjs/calcite-action-menu_2.cjs.entry.js +18 -401
  4. package/dist/cjs/calcite-action-menu_2.cjs.entry.js.map +1 -1
  5. package/dist/cjs/calcite-action_2.cjs.entry.js +423 -71
  6. package/dist/cjs/calcite-action_2.cjs.entry.js.map +1 -1
  7. package/dist/cjs/calcite-loader.cjs.entry.js +97 -0
  8. package/dist/cjs/calcite-loader.cjs.entry.js.map +1 -0
  9. package/dist/cjs/{solution-configuration.cjs.entry.js → calcite-modal_2.cjs.entry.js} +451 -13
  10. package/dist/cjs/calcite-modal_2.cjs.entry.js.map +1 -0
  11. package/dist/cjs/{calcite-shell-panel_14.cjs.entry.js → calcite-panel_12.cjs.entry.js} +455 -709
  12. package/dist/cjs/calcite-panel_12.cjs.entry.js.map +1 -0
  13. package/dist/cjs/loader.cjs.js +1 -1
  14. package/dist/cjs/solution-config-modal.cjs.entry.js +131 -0
  15. package/dist/cjs/solution-config-modal.cjs.entry.js.map +1 -0
  16. package/dist/cjs/{solution-contents_3.cjs.entry.js → solution-contents_7.cjs.entry.js} +664 -5
  17. package/dist/cjs/solution-contents_7.cjs.entry.js.map +1 -0
  18. package/dist/cjs/{solution-store-893499a5.js → solution-store-09b3fc53.js} +4 -6
  19. package/dist/cjs/solution-store-09b3fc53.js.map +1 -0
  20. package/dist/cjs/solutions-components.cjs.js +1 -1
  21. package/dist/collection/collection-manifest.json +1 -0
  22. package/dist/collection/components/solution-config-modal/solution-config-modal.css +91 -0
  23. package/dist/collection/components/solution-config-modal/solution-config-modal.js +245 -0
  24. package/dist/collection/components/solution-config-modal/solution-config-modal.js.map +1 -0
  25. package/dist/collection/components/solution-configuration/solution-configuration.js +23 -17
  26. package/dist/collection/components/solution-configuration/solution-configuration.js.map +1 -1
  27. package/dist/collection/components/solution-item/solution-item.js +0 -2
  28. package/dist/collection/components/solution-item/solution-item.js.map +1 -1
  29. package/dist/collection/components/solution-item-details/solution-item-details.js +0 -13
  30. package/dist/collection/components/solution-item-details/solution-item-details.js.map +1 -1
  31. package/dist/collection/utils/solution-store.js +3 -5
  32. package/dist/collection/utils/solution-store.js.map +1 -1
  33. package/dist/collection/utils/solution-store.ts +3 -5
  34. package/dist/esm/buffer-tools_6.entry.js +2 -2
  35. package/dist/esm/calcite-action-bar_6.entry.js +2 -2
  36. package/dist/esm/calcite-action-menu_2.entry.js +20 -403
  37. package/dist/esm/calcite-action-menu_2.entry.js.map +1 -1
  38. package/dist/esm/calcite-action_2.entry.js +424 -72
  39. package/dist/esm/calcite-action_2.entry.js.map +1 -1
  40. package/dist/esm/calcite-combobox_3.entry.js +2 -2
  41. package/dist/esm/calcite-loader.entry.js +93 -0
  42. package/dist/esm/calcite-loader.entry.js.map +1 -0
  43. package/dist/esm/{solution-configuration.entry.js → calcite-modal_2.entry.js} +453 -16
  44. package/dist/esm/calcite-modal_2.entry.js.map +1 -0
  45. package/dist/esm/{calcite-shell-panel_14.entry.js → calcite-panel_12.entry.js} +454 -706
  46. package/dist/esm/calcite-panel_12.entry.js.map +1 -0
  47. package/dist/esm/config-layer-picker.entry.js +2 -2
  48. package/dist/esm/{interfaces-e2a2064d.js → interfaces-1bdfc3a8.js} +2 -2
  49. package/dist/esm/{interfaces-e2a2064d.js.map → interfaces-1bdfc3a8.js.map} +1 -1
  50. package/dist/esm/loader.js +1 -1
  51. package/dist/esm/{mapViewUtils-09f1e7bd.js → mapViewUtils-809947c8.js} +2 -2
  52. package/dist/esm/{mapViewUtils-09f1e7bd.js.map → mapViewUtils-809947c8.js.map} +1 -1
  53. package/dist/esm/public-notification.entry.js +2 -2
  54. package/dist/esm/solution-config-modal.entry.js +127 -0
  55. package/dist/esm/solution-config-modal.entry.js.map +1 -0
  56. package/dist/esm/{solution-contents_3.entry.js → solution-contents_7.entry.js} +661 -6
  57. package/dist/esm/solution-contents_7.entry.js.map +1 -0
  58. package/dist/esm/{solution-store-0c58c852.js → solution-store-d8519c64.js} +5 -7
  59. package/dist/esm/solution-store-d8519c64.js.map +1 -0
  60. package/dist/esm/solutions-components.js +1 -1
  61. package/dist/solutions-components/{p-be1ed982.entry.js → p-11068040.entry.js} +3 -3
  62. package/dist/solutions-components/{p-be1ed982.entry.js.map → p-11068040.entry.js.map} +0 -0
  63. package/dist/solutions-components/{p-659edb14.js → p-2910dd9e.js} +5 -7
  64. package/dist/{cjs/solution-store-893499a5.js.map → solutions-components/p-2910dd9e.js.map} +1 -1
  65. package/dist/solutions-components/{p-291fd295.entry.js → p-30810b45.entry.js} +3 -3
  66. package/dist/solutions-components/{p-291fd295.entry.js.map → p-30810b45.entry.js.map} +0 -0
  67. package/dist/solutions-components/p-38ddadf2.entry.js +342 -0
  68. package/dist/solutions-components/p-38ddadf2.entry.js.map +1 -0
  69. package/dist/solutions-components/{p-77c75f3a.entry.js → p-5b20090f.entry.js} +661 -6
  70. package/dist/solutions-components/p-5b20090f.entry.js.map +1 -0
  71. package/dist/solutions-components/{p-9393631c.entry.js → p-9ef1328a.entry.js} +3 -3
  72. package/dist/solutions-components/{p-9393631c.entry.js.map → p-9ef1328a.entry.js.map} +0 -0
  73. package/dist/solutions-components/{p-984cb687.entry.js → p-a1786d11.entry.js} +454 -706
  74. package/dist/solutions-components/p-a1786d11.entry.js.map +1 -0
  75. package/dist/solutions-components/{p-fe0fdd8b.js → p-c20bd963.js} +2 -2
  76. package/dist/solutions-components/{p-fe0fdd8b.js.map → p-c20bd963.js.map} +1 -1
  77. package/dist/solutions-components/p-c5721b0f.entry.js +127 -0
  78. package/dist/solutions-components/p-c5721b0f.entry.js.map +1 -0
  79. package/dist/solutions-components/{p-24d75151.entry.js → p-c818e661.entry.js} +3 -3
  80. package/dist/solutions-components/{p-24d75151.entry.js.map → p-c818e661.entry.js.map} +0 -0
  81. package/dist/solutions-components/{p-90629c1d.entry.js → p-cf59eb16.entry.js} +453 -16
  82. package/dist/solutions-components/p-cf59eb16.entry.js.map +1 -0
  83. package/dist/solutions-components/p-e405ebe8.entry.js +93 -0
  84. package/dist/solutions-components/p-e405ebe8.entry.js.map +1 -0
  85. package/dist/solutions-components/{p-77e6b03c.entry.js → p-e6fb9cde.entry.js} +3 -3
  86. package/dist/solutions-components/{p-77e6b03c.entry.js.map → p-e6fb9cde.entry.js.map} +0 -0
  87. package/dist/solutions-components/{p-97c4a268.entry.js → p-ef6f9e24.entry.js} +113 -229
  88. package/dist/solutions-components/p-ef6f9e24.entry.js.map +1 -0
  89. package/dist/solutions-components/{p-6b9dc092.js → p-f04fdb9a.js} +2 -2
  90. package/dist/solutions-components/{p-6b9dc092.js.map → p-f04fdb9a.js.map} +1 -1
  91. package/dist/solutions-components/solutions-components.esm.js +1 -1
  92. package/dist/solutions-components/utils/solution-store.ts +3 -5
  93. package/dist/solutions-components_commit.txt +8 -8
  94. package/dist/types/components/solution-config-modal/solution-config-modal.d.ts +69 -0
  95. package/dist/types/components/solution-configuration/solution-configuration.d.ts +4 -2
  96. package/dist/types/components/solution-item-details/solution-item-details.d.ts +0 -1
  97. package/dist/types/components.d.ts +43 -5
  98. package/dist/types/preact.d.ts +4 -0
  99. package/package.json +1 -1
  100. package/dist/cjs/calcite-modal.cjs.entry.js +0 -449
  101. package/dist/cjs/calcite-modal.cjs.entry.js.map +0 -1
  102. package/dist/cjs/calcite-panel_2.cjs.entry.js +0 -439
  103. package/dist/cjs/calcite-panel_2.cjs.entry.js.map +0 -1
  104. package/dist/cjs/calcite-scrim.cjs.entry.js +0 -64
  105. package/dist/cjs/calcite-scrim.cjs.entry.js.map +0 -1
  106. package/dist/cjs/calcite-shell-panel_14.cjs.entry.js.map +0 -1
  107. package/dist/cjs/solution-configuration.cjs.entry.js.map +0 -1
  108. package/dist/cjs/solution-contents_3.cjs.entry.js.map +0 -1
  109. package/dist/esm/calcite-modal.entry.js +0 -445
  110. package/dist/esm/calcite-modal.entry.js.map +0 -1
  111. package/dist/esm/calcite-panel_2.entry.js +0 -434
  112. package/dist/esm/calcite-panel_2.entry.js.map +0 -1
  113. package/dist/esm/calcite-scrim.entry.js +0 -60
  114. package/dist/esm/calcite-scrim.entry.js.map +0 -1
  115. package/dist/esm/calcite-shell-panel_14.entry.js.map +0 -1
  116. package/dist/esm/solution-configuration.entry.js.map +0 -1
  117. package/dist/esm/solution-contents_3.entry.js.map +0 -1
  118. package/dist/esm/solution-store-0c58c852.js.map +0 -1
  119. package/dist/solutions-components/p-0fda7d9e.entry.js +0 -434
  120. package/dist/solutions-components/p-0fda7d9e.entry.js.map +0 -1
  121. package/dist/solutions-components/p-2ff754ce.entry.js +0 -257
  122. package/dist/solutions-components/p-2ff754ce.entry.js.map +0 -1
  123. package/dist/solutions-components/p-30a6199a.entry.js +0 -445
  124. package/dist/solutions-components/p-30a6199a.entry.js.map +0 -1
  125. package/dist/solutions-components/p-659edb14.js.map +0 -1
  126. package/dist/solutions-components/p-77c75f3a.entry.js.map +0 -1
  127. package/dist/solutions-components/p-90629c1d.entry.js.map +0 -1
  128. package/dist/solutions-components/p-97c4a268.entry.js.map +0 -1
  129. package/dist/solutions-components/p-984cb687.entry.js.map +0 -1
  130. package/dist/solutions-components/p-f5268b4f.entry.js +0 -60
  131. 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}