@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
168 lines (160 loc) • 7.06 kB
JavaScript
/*!
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
* v1.5.0-next.4
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-55f8a3b7.js');
const dom = require('./dom-18ca68ff.js');
const observers = require('./observers-83b3999d.js');
require('./guid-db20443e.js');
require('./resources-45d84c94.js');
const CSS = {
icon: "icon",
flipRtl: "flip-rtl"
};
/**
* Icon data cache.
* Exported for testing purposes.
*
* @private
*/
const iconCache = {};
/**
* Icon request cache.
* Exported for testing purposes.
*
* @private
*/
const requestCache = {};
const 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(index.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;
}
/**
* Normalize the icon name to match the path data module exports.
* Exported for testing purposes.
*
* @param name – an icon name that can be either kebab or camel-cased
* @private
*/
function normalizeIconName(name) {
const numberLeadingName = !isNaN(Number(name.charAt(0)));
const parts = name.split("-");
const kebabCased = parts.length > 0;
if (kebabCased) {
const firstNonDigitInPartPattern = /[a-z]/i;
name = parts
.map((part, partIndex) => {
return part.replace(firstNonDigitInPartPattern, function replacer(match, offset) {
const isFirstCharInName = partIndex === 0 && offset === 0;
if (isFirstCharInName) {
return match;
}
return match.toUpperCase();
});
})
.join("");
}
return numberLeadingName ? `i${name}` : name;
}
const 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-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 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-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.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);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}: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}";
const Icon = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.icon = null;
this.flipRtl = false;
this.scale = "m";
this.textLabel = undefined;
this.pathData = undefined;
this.visible = false;
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
connectedCallback() {
this.waitUntilVisible(() => {
this.visible = true;
this.loadIconPathData();
});
}
disconnectedCallback() {
this.intersectionObserver?.disconnect();
this.intersectionObserver = null;
}
async componentWillLoad() {
this.loadIconPathData();
}
render() {
const { el, flipRtl, pathData, scale, textLabel } = this;
const dir = dom.getElementDir(el);
const size = scaleToPx[scale];
const semantic = !!textLabel;
const paths = [].concat(pathData || "");
return (index.h(index.Host, { "aria-hidden": dom.toAriaBoolean(!semantic), "aria-label": semantic ? textLabel : null, role: semantic ? "img" : null }, index.h("svg", { "aria-hidden": "true", 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" ? (index.h("path", { d: path })) : (index.h("path", { d: path.d, opacity: "opacity" in path ? path.opacity : 1 }))))));
}
//--------------------------------------------------------------------------
//
// Private Methods
//
//--------------------------------------------------------------------------
async loadIconPathData() {
const { icon, scale, visible } = this;
if (!icon || !visible) {
return;
}
this.pathData = await fetchIcon({ icon, scale });
}
waitUntilVisible(callback) {
this.intersectionObserver = observers.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 index.getElement(this); }
static get watchers() { return {
"icon": ["loadIconPathData"],
"scale": ["loadIconPathData"]
}; }
};
Icon.style = iconCss;
exports.calcite_icon = Icon;