chunk-Y6WKYXWU.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. import {
  2. createObserver
  3. } from "./chunk-AVLPSIKF.js";
  4. import {
  5. getElementDir,
  6. toAriaBoolean
  7. } from "./chunk-2TTT3V5O.js";
  8. import {
  9. Build,
  10. H,
  11. Host,
  12. getAssetPath,
  13. h,
  14. proxyCustomElement
  15. } from "./chunk-IOZKU7B2.js";
  16. // node_modules/@esri/calcite-components/dist/components/icon.js
  17. var CSS = {
  18. icon: "icon",
  19. flipRtl: "flip-rtl"
  20. };
  21. var iconCache = {};
  22. var requestCache = {};
  23. var scaleToPx = {
  24. s: 16,
  25. m: 24,
  26. l: 32
  27. };
  28. async function fetchIcon({ icon, scale }) {
  29. const size = scaleToPx[scale];
  30. const name = normalizeIconName(icon);
  31. const filled = name.charAt(name.length - 1) === "F";
  32. const iconName = filled ? name.substring(0, name.length - 1) : name;
  33. const id = `${iconName}${size}${filled ? "F" : ""}`;
  34. if (iconCache[id]) {
  35. return iconCache[id];
  36. }
  37. if (!requestCache[id]) {
  38. requestCache[id] = fetch(getAssetPath(`./assets/icon/${id}.json`)).then((resp) => resp.json()).catch(() => {
  39. console.error(`"${id}" is not a valid calcite-ui-icon name`);
  40. return "";
  41. });
  42. }
  43. const path = await requestCache[id];
  44. iconCache[id] = path;
  45. return path;
  46. }
  47. function normalizeIconName(name) {
  48. const numberLeadingName = !isNaN(Number(name.charAt(0)));
  49. const parts = name.split("-");
  50. if (parts.length === 1) {
  51. return numberLeadingName ? `i${name}` : name;
  52. }
  53. return parts.map((part, index) => {
  54. if (index === 0) {
  55. return numberLeadingName ? `i${part.toUpperCase()}` : part;
  56. }
  57. return part.charAt(0).toUpperCase() + part.slice(1);
  58. }).join("");
  59. }
  60. var iconCss = "@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{display:inline-flex;color:var(--calcite-ui-icon-color)}:host([scale=s]){block-size:1rem;inline-size:1rem;min-inline-size:1rem;min-block-size:1rem}:host([scale=m]){block-size:1.5rem;inline-size:1.5rem;min-inline-size:1.5rem;min-block-size:1.5rem}:host([scale=l]){block-size:2rem;inline-size:2rem;min-inline-size:2rem;min-block-size:2rem}.flip-rtl{transform:scaleX(-1)}.svg{display:block}";
  61. var Icon = proxyCustomElement(class extends H {
  62. constructor() {
  63. super();
  64. this.__registerHost();
  65. this.__attachShadow();
  66. this.icon = null;
  67. this.flipRtl = false;
  68. this.scale = "m";
  69. this.visible = false;
  70. }
  71. connectedCallback() {
  72. this.waitUntilVisible(() => {
  73. this.visible = true;
  74. this.loadIconPathData();
  75. });
  76. }
  77. disconnectedCallback() {
  78. var _a;
  79. (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
  80. this.intersectionObserver = null;
  81. }
  82. async componentWillLoad() {
  83. this.loadIconPathData();
  84. }
  85. render() {
  86. const { el, flipRtl, pathData, scale, textLabel } = this;
  87. const dir = getElementDir(el);
  88. const size = scaleToPx[scale];
  89. const semantic = !!textLabel;
  90. const paths = [].concat(pathData || "");
  91. return h(Host, { "aria-hidden": toAriaBoolean(!semantic), "aria-label": semantic ? textLabel : null, role: semantic ? "img" : null }, h("svg", { class: {
  92. [CSS.flipRtl]: dir === "rtl" && flipRtl,
  93. svg: true
  94. }, 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 }))));
  95. }
  96. async loadIconPathData() {
  97. const { icon, scale, visible } = this;
  98. if (!Build.isBrowser || !icon || !visible) {
  99. return;
  100. }
  101. this.pathData = await fetchIcon({ icon, scale });
  102. }
  103. waitUntilVisible(callback) {
  104. this.intersectionObserver = createObserver("intersection", (entries) => {
  105. entries.forEach((entry) => {
  106. if (entry.isIntersecting) {
  107. this.intersectionObserver.disconnect();
  108. this.intersectionObserver = null;
  109. callback();
  110. }
  111. });
  112. }, { rootMargin: "50px" });
  113. if (!this.intersectionObserver) {
  114. callback();
  115. return;
  116. }
  117. this.intersectionObserver.observe(this.el);
  118. }
  119. static get assetsDirs() {
  120. return ["assets"];
  121. }
  122. get el() {
  123. return this;
  124. }
  125. static get watchers() {
  126. return {
  127. "icon": ["loadIconPathData"],
  128. "scale": ["loadIconPathData"]
  129. };
  130. }
  131. static get style() {
  132. return iconCss;
  133. }
  134. }, [1, "calcite-icon", {
  135. "icon": [513],
  136. "flipRtl": [516, "flip-rtl"],
  137. "scale": [513],
  138. "textLabel": [1, "text-label"],
  139. "pathData": [32],
  140. "visible": [32]
  141. }]);
  142. function defineCustomElement() {
  143. if (typeof customElements === "undefined") {
  144. return;
  145. }
  146. const components = ["calcite-icon"];
  147. components.forEach((tagName) => {
  148. switch (tagName) {
  149. case "calcite-icon":
  150. if (!customElements.get(tagName)) {
  151. customElements.define(tagName, Icon);
  152. }
  153. break;
  154. }
  155. });
  156. }
  157. defineCustomElement();
  158. export {
  159. Icon,
  160. defineCustomElement
  161. };
  162. /*!
  163. * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  164. * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  165. * v1.0.0-beta.97
  166. */
  167. //# sourceMappingURL=chunk-Y6WKYXWU.js.map