123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169 |
- import {
- createObserver
- } from "./chunk-AVLPSIKF.js";
- import {
- getElementDir,
- toAriaBoolean
- } from "./chunk-2TTT3V5O.js";
- import {
- Build,
- H,
- Host,
- getAssetPath,
- h,
- proxyCustomElement
- } from "./chunk-IOZKU7B2.js";
- // node_modules/@esri/calcite-components/dist/components/icon.js
- var CSS = {
- icon: "icon",
- flipRtl: "flip-rtl"
- };
- var iconCache = {};
- var requestCache = {};
- var scaleToPx = {
- s: 16,
- m: 24,
- l: 32
- };
- async function fetchIcon({ icon, scale }) {
- const size = scaleToPx[scale];
- const name = normalizeIconName(icon);
- const filled = name.charAt(name.length - 1) === "F";
- const iconName = filled ? name.substring(0, name.length - 1) : name;
- const id = `${iconName}${size}${filled ? "F" : ""}`;
- if (iconCache[id]) {
- return iconCache[id];
- }
- if (!requestCache[id]) {
- requestCache[id] = fetch(getAssetPath(`./assets/icon/${id}.json`)).then((resp) => resp.json()).catch(() => {
- console.error(`"${id}" is not a valid calcite-ui-icon name`);
- return "";
- });
- }
- const path = await requestCache[id];
- iconCache[id] = path;
- return path;
- }
- function normalizeIconName(name) {
- const numberLeadingName = !isNaN(Number(name.charAt(0)));
- const parts = name.split("-");
- if (parts.length === 1) {
- return numberLeadingName ? `i${name}` : name;
- }
- return parts.map((part, index) => {
- if (index === 0) {
- return numberLeadingName ? `i${part.toUpperCase()}` : part;
- }
- return part.charAt(0).toUpperCase() + part.slice(1);
- }).join("");
- }
- 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}";
- var Icon = proxyCustomElement(class extends H {
- constructor() {
- super();
- this.__registerHost();
- this.__attachShadow();
- this.icon = null;
- this.flipRtl = false;
- this.scale = "m";
- this.visible = false;
- }
- connectedCallback() {
- this.waitUntilVisible(() => {
- this.visible = true;
- this.loadIconPathData();
- });
- }
- disconnectedCallback() {
- var _a;
- (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
- this.intersectionObserver = null;
- }
- async componentWillLoad() {
- this.loadIconPathData();
- }
- render() {
- const { el, flipRtl, pathData, scale, textLabel } = this;
- const dir = getElementDir(el);
- const size = scaleToPx[scale];
- const semantic = !!textLabel;
- const paths = [].concat(pathData || "");
- return h(Host, { "aria-hidden": toAriaBoolean(!semantic), "aria-label": semantic ? textLabel : null, role: semantic ? "img" : null }, h("svg", { class: {
- [CSS.flipRtl]: dir === "rtl" && flipRtl,
- svg: true
- }, 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 }))));
- }
- async loadIconPathData() {
- const { icon, scale, visible } = this;
- if (!Build.isBrowser || !icon || !visible) {
- return;
- }
- this.pathData = await fetchIcon({ icon, scale });
- }
- waitUntilVisible(callback) {
- this.intersectionObserver = createObserver("intersection", (entries) => {
- entries.forEach((entry) => {
- if (entry.isIntersecting) {
- this.intersectionObserver.disconnect();
- this.intersectionObserver = null;
- callback();
- }
- });
- }, { rootMargin: "50px" });
- if (!this.intersectionObserver) {
- callback();
- return;
- }
- this.intersectionObserver.observe(this.el);
- }
- static get assetsDirs() {
- return ["assets"];
- }
- get el() {
- return this;
- }
- static get watchers() {
- return {
- "icon": ["loadIconPathData"],
- "scale": ["loadIconPathData"]
- };
- }
- static get style() {
- return iconCss;
- }
- }, [1, "calcite-icon", {
- "icon": [513],
- "flipRtl": [516, "flip-rtl"],
- "scale": [513],
- "textLabel": [1, "text-label"],
- "pathData": [32],
- "visible": [32]
- }]);
- function defineCustomElement() {
- if (typeof customElements === "undefined") {
- return;
- }
- const components = ["calcite-icon"];
- components.forEach((tagName) => {
- switch (tagName) {
- case "calcite-icon":
- if (!customElements.get(tagName)) {
- customElements.define(tagName, Icon);
- }
- break;
- }
- });
- }
- defineCustomElement();
- export {
- Icon,
- defineCustomElement
- };
- /*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.97
- */
- //# sourceMappingURL=chunk-Y6WKYXWU.js.map
|