calcite-notice-BQXO4DEI.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  1. import {
  2. Build,
  3. H,
  4. Host,
  5. createEvent,
  6. forceUpdate,
  7. getAssetPath,
  8. h,
  9. proxyCustomElement
  10. } from "./chunk-P6MX663D.js";
  11. import "./chunk-A5ICIBVI.js";
  12. // node_modules/@esri/calcite-components/dist/components/interfaces.js
  13. var StatusIcons;
  14. (function(StatusIcons2) {
  15. StatusIcons2["green"] = "checkCircle";
  16. StatusIcons2["yellow"] = "exclamationMarkTriangle";
  17. StatusIcons2["red"] = "exclamationMarkTriangle";
  18. StatusIcons2["blue"] = "lightbulb";
  19. })(StatusIcons || (StatusIcons = {}));
  20. // node_modules/@esri/calcite-components/dist/components/dom.js
  21. function getElementDir(el) {
  22. const prop = "dir";
  23. const selector = `[${prop}]`;
  24. const closest = closestElementCrossShadowBoundary(el, selector);
  25. return closest ? closest.getAttribute(prop) : "ltr";
  26. }
  27. function getRootNode(el) {
  28. return el.getRootNode();
  29. }
  30. function getHost(root) {
  31. return root.host || null;
  32. }
  33. function closestElementCrossShadowBoundary(element, selector) {
  34. function closestFrom(el) {
  35. return el ? el.closest(selector) || closestFrom(getHost(getRootNode(el))) : null;
  36. }
  37. return closestFrom(element);
  38. }
  39. var defaultSlotSelector = ":not([slot])";
  40. function getSlotted(element, slotName, options) {
  41. if (slotName && !Array.isArray(slotName) && typeof slotName !== "string") {
  42. options = slotName;
  43. slotName = null;
  44. }
  45. const slotSelector = slotName ? Array.isArray(slotName) ? slotName.map((name) => `[slot="${name}"]`).join(",") : `[slot="${slotName}"]` : defaultSlotSelector;
  46. if (options === null || options === void 0 ? void 0 : options.all) {
  47. return queryMultiple(element, slotSelector, options);
  48. }
  49. return querySingle(element, slotSelector, options);
  50. }
  51. function getDirectChildren(el, selector) {
  52. return el ? Array.from(el.children || []).filter((child) => child === null || child === void 0 ? void 0 : child.matches(selector)) : [];
  53. }
  54. function queryMultiple(element, slotSelector, options) {
  55. let matches = slotSelector === defaultSlotSelector ? getDirectChildren(element, defaultSlotSelector) : Array.from(element.querySelectorAll(slotSelector));
  56. matches = options && options.direct === false ? matches : matches.filter((el) => el.parentElement === element);
  57. matches = (options === null || options === void 0 ? void 0 : options.matches) ? matches.filter((el) => el === null || el === void 0 ? void 0 : el.matches(options.matches)) : matches;
  58. const selector = options === null || options === void 0 ? void 0 : options.selector;
  59. return selector ? matches.map((item) => Array.from(item.querySelectorAll(selector))).reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []).filter((match) => !!match) : matches;
  60. }
  61. function querySingle(element, slotSelector, options) {
  62. let match = slotSelector === defaultSlotSelector ? getDirectChildren(element, defaultSlotSelector)[0] || null : element.querySelector(slotSelector);
  63. match = options && options.direct === false ? match : (match === null || match === void 0 ? void 0 : match.parentElement) === element ? match : null;
  64. match = (options === null || options === void 0 ? void 0 : options.matches) ? (match === null || match === void 0 ? void 0 : match.matches(options.matches)) ? match : null : match;
  65. const selector = options === null || options === void 0 ? void 0 : options.selector;
  66. return selector ? match === null || match === void 0 ? void 0 : match.querySelector(selector) : match;
  67. }
  68. function setRequestedIcon(iconObject, iconValue, matchedValue) {
  69. if (typeof iconValue === "string" && iconValue !== "") {
  70. return iconValue;
  71. } else if (iconValue === "") {
  72. return iconObject[matchedValue];
  73. }
  74. }
  75. function toAriaBoolean(value) {
  76. return (!!value).toString();
  77. }
  78. // node_modules/@esri/calcite-components/dist/components/observers.js
  79. function createObserver(type, callback, options) {
  80. const Observer = getObserver(type);
  81. return Build.isBrowser ? new Observer(callback, options) : void 0;
  82. }
  83. function getObserver(type) {
  84. return type === "intersection" ? window.IntersectionObserver : type === "mutation" ? window.MutationObserver : window.ResizeObserver;
  85. }
  86. // node_modules/@esri/calcite-components/dist/components/conditionalSlot.js
  87. var observed = new Set();
  88. var mutationObserver;
  89. var observerOptions = { childList: true };
  90. function connectConditionalSlotComponent(component) {
  91. if (!mutationObserver) {
  92. mutationObserver = createObserver("mutation", processMutations);
  93. }
  94. mutationObserver.observe(component.el, observerOptions);
  95. }
  96. function disconnectConditionalSlotComponent(component) {
  97. observed.delete(component.el);
  98. processMutations(mutationObserver.takeRecords());
  99. mutationObserver.disconnect();
  100. for (const [element] of observed.entries()) {
  101. mutationObserver.observe(element, observerOptions);
  102. }
  103. }
  104. function processMutations(mutations) {
  105. mutations.forEach(({ target }) => {
  106. forceUpdate(target);
  107. });
  108. }
  109. // node_modules/@esri/calcite-components/dist/components/icon.js
  110. var CSS = {
  111. icon: "icon",
  112. flipRtl: "flip-rtl"
  113. };
  114. var iconCache = {};
  115. var requestCache = {};
  116. var scaleToPx = {
  117. s: 16,
  118. m: 24,
  119. l: 32
  120. };
  121. async function fetchIcon({ icon, scale }) {
  122. const size = scaleToPx[scale];
  123. const name = normalizeIconName(icon);
  124. const filled = name.charAt(name.length - 1) === "F";
  125. const iconName = filled ? name.substring(0, name.length - 1) : name;
  126. const id = `${iconName}${size}${filled ? "F" : ""}`;
  127. if (iconCache[id]) {
  128. return iconCache[id];
  129. }
  130. if (!requestCache[id]) {
  131. requestCache[id] = fetch(getAssetPath(`./assets/icon/${id}.json`)).then((resp) => resp.json()).catch(() => {
  132. console.error(`"${id}" is not a valid calcite-ui-icon name`);
  133. return "";
  134. });
  135. }
  136. const path = await requestCache[id];
  137. iconCache[id] = path;
  138. return path;
  139. }
  140. function normalizeIconName(name) {
  141. const numberLeadingName = !isNaN(Number(name.charAt(0)));
  142. const parts = name.split("-");
  143. if (parts.length === 1) {
  144. return numberLeadingName ? `i${name}` : name;
  145. }
  146. return parts.map((part, index) => {
  147. if (index === 0) {
  148. return numberLeadingName ? `i${part.toUpperCase()}` : part;
  149. }
  150. return part.charAt(0).toUpperCase() + part.slice(1);
  151. }).join("");
  152. }
  153. var iconCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 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;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:-ms-inline-flexbox;display:inline-flex;color:var(--calcite-ui-icon-color)}:host([scale=s]){height:1rem;width:1rem;min-width:1rem;min-height:1rem}:host([scale=m]){height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}:host([scale=l]){height:2rem;width:2rem;min-width:2rem;min-height:2rem}.flip-rtl{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.svg{display:block}";
  154. var Icon = proxyCustomElement(class extends H {
  155. constructor() {
  156. super();
  157. this.__registerHost();
  158. this.__attachShadow();
  159. this.icon = null;
  160. this.flipRtl = false;
  161. this.scale = "m";
  162. this.visible = false;
  163. }
  164. connectedCallback() {
  165. this.waitUntilVisible(() => {
  166. this.visible = true;
  167. this.loadIconPathData();
  168. });
  169. }
  170. disconnectedCallback() {
  171. var _a;
  172. (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
  173. this.intersectionObserver = null;
  174. }
  175. async componentWillLoad() {
  176. this.loadIconPathData();
  177. }
  178. render() {
  179. const { el, flipRtl, pathData, scale, textLabel } = this;
  180. const dir = getElementDir(el);
  181. const size = scaleToPx[scale];
  182. const semantic = !!textLabel;
  183. const paths = [].concat(pathData || "");
  184. return h(Host, { "aria-hidden": toAriaBoolean(!semantic), "aria-label": semantic ? textLabel : null, role: semantic ? "img" : null }, h("svg", { class: {
  185. [CSS.flipRtl]: dir === "rtl" && flipRtl,
  186. svg: true
  187. }, fill: "currentColor", height: "100%", viewBox: `0 0 ${size} ${size}`, width: "100%", xmlns: "http://www.w3.org/2000/svg" }, paths.map((path) => typeof path === "string" ? h("path", { d: path }) : h("path", { d: path.d, opacity: "opacity" in path ? path.opacity : 1 }))));
  188. }
  189. async loadIconPathData() {
  190. const { icon, scale, visible } = this;
  191. if (!Build.isBrowser || !icon || !visible) {
  192. return;
  193. }
  194. this.pathData = await fetchIcon({ icon, scale });
  195. }
  196. waitUntilVisible(callback) {
  197. this.intersectionObserver = createObserver("intersection", (entries) => {
  198. entries.forEach((entry) => {
  199. if (entry.isIntersecting) {
  200. this.intersectionObserver.disconnect();
  201. this.intersectionObserver = null;
  202. callback();
  203. }
  204. });
  205. }, { rootMargin: "50px" });
  206. if (!this.intersectionObserver) {
  207. callback();
  208. return;
  209. }
  210. this.intersectionObserver.observe(this.el);
  211. }
  212. static get assetsDirs() {
  213. return ["assets"];
  214. }
  215. get el() {
  216. return this;
  217. }
  218. static get watchers() {
  219. return {
  220. "icon": ["loadIconPathData"],
  221. "scale": ["loadIconPathData"]
  222. };
  223. }
  224. static get style() {
  225. return iconCss;
  226. }
  227. }, [1, "calcite-icon", {
  228. "icon": [513],
  229. "flipRtl": [516, "flip-rtl"],
  230. "scale": [513],
  231. "textLabel": [1, "text-label"],
  232. "pathData": [32],
  233. "visible": [32]
  234. }]);
  235. function defineCustomElement() {
  236. if (typeof customElements === "undefined") {
  237. return;
  238. }
  239. const components = ["calcite-icon"];
  240. components.forEach((tagName) => {
  241. switch (tagName) {
  242. case "calcite-icon":
  243. if (!customElements.get(tagName)) {
  244. customElements.define(tagName, Icon);
  245. }
  246. break;
  247. }
  248. });
  249. }
  250. defineCustomElement();
  251. // node_modules/@esri/calcite-components/dist/components/calcite-notice.js
  252. var TEXT = {
  253. close: "Close"
  254. };
  255. var SLOTS = {
  256. title: "title",
  257. message: "message",
  258. link: "link",
  259. actionsEnd: "actions-end"
  260. };
  261. var CSS2 = {
  262. actionsEnd: "actions-end",
  263. close: "notice-close",
  264. container: "container",
  265. content: "notice-content",
  266. icon: "notice-icon"
  267. };
  268. var noticeCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 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;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([scale=s]){--calcite-notice-spacing-token-small:0.5rem;--calcite-notice-spacing-token-large:0.75rem}:host([scale=s]) .container slot[name=title]::slotted(*),:host([scale=s]) .container *::slotted([slot=title]){margin-top:0.125rem;margin-bottom:0.125rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) .container slot[name=message]::slotted(*),:host([scale=s]) .container *::slotted([slot=message]){margin-top:0.125rem;margin-bottom:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) ::slotted(calcite-link){margin-top:0.125rem;margin-bottom:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) .notice-close{padding:0.5rem}:host([scale=m]){--calcite-notice-spacing-token-small:0.75rem;--calcite-notice-spacing-token-large:1rem}:host([scale=m]) .container slot[name=title]::slotted(*),:host([scale=m]) .container *::slotted([slot=title]){margin-top:0.125rem;margin-bottom:0.125rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) .container slot[name=message]::slotted(*),:host([scale=m]) .container *::slotted([slot=message]){margin-top:0.125rem;margin-bottom:0.125rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) ::slotted(calcite-link){margin-top:0.125rem;margin-bottom:0.125rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=l]){--calcite-notice-spacing-token-small:1rem;--calcite-notice-spacing-token-large:1.25rem}:host([scale=l]) .container slot[name=title]::slotted(*),:host([scale=l]) .container *::slotted([slot=title]){margin-top:0.125rem;margin-bottom:0.125rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host([scale=l]) .container slot[name=message]::slotted(*),:host([scale=l]) .container *::slotted([slot=message]){margin-top:0.125rem;margin-bottom:0.125rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) ::slotted(calcite-link){margin-top:0.125rem;margin-bottom:0.125rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([width=auto]){--calcite-notice-width:auto}:host([width=half]){--calcite-notice-width:50%}:host([width=full]){--calcite-notice-width:100%}:host{margin-left:auto;margin-right:auto;display:none;max-width:100%;-ms-flex-align:center;align-items:center;width:var(--calcite-notice-width)}.container{pointer-events:none;margin-top:0px;margin-bottom:0px;-webkit-box-sizing:border-box;box-sizing:border-box;display:none;width:100%;background-color:var(--calcite-ui-foreground-1);opacity:0;max-height:0;text-align:start;-webkit-transition:var(--calcite-animation-timing);transition:var(--calcite-animation-timing);-webkit-border-start:0px solid;border-inline-start:0px solid;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent}.notice-close{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}.notice-close:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host{display:-ms-flexbox;display:flex}:host([active]) .container{pointer-events:auto;display:-ms-flexbox;display:flex;max-height:100%;-ms-flex-align:center;align-items:center;border-width:2px;opacity:1;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.container slot[name=title]::slotted(*),.container *::slotted([slot=title]){margin:0px;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}.container slot[name=message]::slotted(*),.container *::slotted([slot=message]){margin:0px;display:inline;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2);-webkit-margin-end:var(--calcite-notice-spacing-token-small);margin-inline-end:var(--calcite-notice-spacing-token-small)}.notice-content{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;padding:var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);-ms-flex:0 0 auto;flex:0 0 auto;display:-ms-flexbox;display:flex;min-width:0px;-ms-flex-direction:column;flex-direction:column;overflow-wrap:break-word;-ms-flex:1 1 0px;flex:1 1 0;padding-block:var(--calcite-notice-spacing-token-small);padding-inline:0 var(--calcite-notice-spacing-token-small)}.notice-content:first-of-type:not(:only-child){-webkit-padding-start:var(--calcite-notice-spacing-token-large);padding-inline-start:var(--calcite-notice-spacing-token-large)}.notice-content:only-of-type{padding:var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large)}.notice-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;padding:var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);-ms-flex:0 0 auto;flex:0 0 auto}.notice-close{display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;border-style:none;background-color:transparent;color:var(--calcite-ui-text-3);outline:2px solid transparent;outline-offset:2px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;padding:var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);-ms-flex:0 0 auto;flex:0 0 auto;-webkit-appearance:none}.notice-close:hover,.notice-close:focus{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}.notice-close:active{background-color:var(--calcite-ui-foreground-3)}.actions-end{display:-ms-flexbox;display:flex;-ms-flex-item-align:stretch;align-self:stretch}:host([color=blue]) .container{border-color:var(--calcite-ui-brand)}:host([color=blue]) .container .notice-icon{color:var(--calcite-ui-brand)}:host([color=red]) .container{border-color:var(--calcite-ui-danger)}:host([color=red]) .container .notice-icon{color:var(--calcite-ui-danger)}:host([color=yellow]) .container{border-color:var(--calcite-ui-warning)}:host([color=yellow]) .container .notice-icon{color:var(--calcite-ui-warning)}:host([color=green]) .container{border-color:var(--calcite-ui-success)}:host([color=green]) .container .notice-icon{color:var(--calcite-ui-success)}";
  269. var Notice = proxyCustomElement(class extends H {
  270. constructor() {
  271. super();
  272. this.__registerHost();
  273. this.__attachShadow();
  274. this.calciteNoticeClose = createEvent(this, "calciteNoticeClose", 7);
  275. this.calciteNoticeOpen = createEvent(this, "calciteNoticeOpen", 7);
  276. this.active = false;
  277. this.color = "blue";
  278. this.dismissible = false;
  279. this.intlClose = TEXT.close;
  280. this.scale = "m";
  281. this.width = "auto";
  282. this.close = () => {
  283. this.active = false;
  284. this.calciteNoticeClose.emit();
  285. };
  286. }
  287. updateRequestedIcon() {
  288. this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
  289. }
  290. connectedCallback() {
  291. connectConditionalSlotComponent(this);
  292. }
  293. disconnectedCallback() {
  294. disconnectConditionalSlotComponent(this);
  295. }
  296. componentWillLoad() {
  297. this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
  298. }
  299. render() {
  300. const { el } = this;
  301. const closeButton = h("button", { "aria-label": this.intlClose, class: CSS2.close, onClick: this.close, ref: (el2) => this.closeButton = el2 }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" }));
  302. const hasActionEnd = getSlotted(el, SLOTS.actionsEnd);
  303. return h("div", { class: CSS2.container }, this.requestedIcon ? h("div", { class: CSS2.icon }, h("calcite-icon", { icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" })) : null, h("div", { class: CSS2.content }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })), hasActionEnd ? h("div", { class: CSS2.actionsEnd }, h("slot", { name: SLOTS.actionsEnd })) : null, this.dismissible ? closeButton : null);
  304. }
  305. async setFocus() {
  306. const noticeLinkEl = this.el.querySelector("calcite-link");
  307. if (!this.closeButton && !noticeLinkEl) {
  308. return;
  309. }
  310. if (noticeLinkEl) {
  311. noticeLinkEl.setFocus();
  312. } else if (this.closeButton) {
  313. this.closeButton.focus();
  314. }
  315. }
  316. get el() {
  317. return this;
  318. }
  319. static get watchers() {
  320. return {
  321. "icon": ["updateRequestedIcon"],
  322. "color": ["updateRequestedIcon"]
  323. };
  324. }
  325. static get style() {
  326. return noticeCss;
  327. }
  328. }, [1, "calcite-notice", {
  329. "active": [1540],
  330. "color": [513],
  331. "dismissible": [516],
  332. "icon": [520],
  333. "intlClose": [1, "intl-close"],
  334. "scale": [513],
  335. "width": [513],
  336. "setFocus": [64]
  337. }]);
  338. function defineCustomElement$1() {
  339. if (typeof customElements === "undefined") {
  340. return;
  341. }
  342. const components = ["calcite-notice", "calcite-icon"];
  343. components.forEach((tagName) => {
  344. switch (tagName) {
  345. case "calcite-notice":
  346. if (!customElements.get(tagName)) {
  347. customElements.define(tagName, Notice);
  348. }
  349. break;
  350. case "calcite-icon":
  351. if (!customElements.get(tagName)) {
  352. defineCustomElement();
  353. }
  354. break;
  355. }
  356. });
  357. }
  358. defineCustomElement$1();
  359. var CalciteNotice = Notice;
  360. var defineCustomElement2 = defineCustomElement$1;
  361. export {
  362. CalciteNotice,
  363. defineCustomElement2 as defineCustomElement
  364. };
  365. /*!
  366. * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  367. * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  368. * v1.0.0-beta.82
  369. */
  370. //# sourceMappingURL=calcite-notice-BQXO4DEI.js.map