The calcite-components are a set of web components that are used in various Esri apps. The idea is that non-GIS components, like the color picker will become part of this library. Web components make reusability much simpler for these components.
Here is a demo using the loader component with an ArcGIS JSAPI app.
jsapi with calcite-components
I can do something like this.
<!DOCTYPE html>
<html>
<head>
...
<style>
...
calcite-loader {
position: absolute;
top: 40%;
left: 50%;
}
</style>
...
<script src="https://unpkg.com/@esri/calcite-components@1.0.0-beta.2/dist/calcite/calcite.js"></script>
<script src="https://js.arcgis.com/4.13/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer"
], function(Map, MapView, FeatureLayer) {
const loader = document.querySelector("calcite-loader");
...
view.when(() => {
loader.isActive = false;
});
...
function queryFeatures(screenPoint) {
loader.isActive = true;
...
layer
.queryObjectIds({
...
})
.then(function(objectIds) {
...
})
.then(function(attachmentsByFeatureId) {
...
loader.isActive = false;
})
.catch(function(error) {
...
});
}
...
</script>
</head>
<body>
...
<div id="viewDiv">
<calcite-loader text="Fetching data..." is-active></calcite-loader>
</div>
</body>
</html>
You can treat these components like any other DOM element, but they can have properties and even methods that you can interact with.
Doesn't look like there is a set date for the color picker as of yet though, but it is in development.