Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@esri/calcite-components

Package Overview
Dependencies
Maintainers
38
Versions
1444
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@esri/calcite-components

Web Components for Esri's Calcite Design System.

  • 1.0.0-next.26
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
91K
decreased by-9.46%
Maintainers
38
Weekly downloads
 
Created
Source

Built With Stencil npm

Calcite Components

Shared Web Components for Esri's Calcite design framework. To see the components in action, view the documentation.

Sketch library

All of the Calcite Components are available in the calcite-sketch-library with all variations and sizes.

Installation

npm install --save @esri/calcite-components

Script tag

Calcite components can be loaded via two <script> tags in the head of your HTML document:

<script type="module" src="https://unpkg.com/@esri/calcite-components/dist/calcite/calcite.esm.js"></script>
<script nomodule="" src="https://unpkg.com/@esri/calcite-components/dist/calcite/calcite.js"></script>

Browsers that support modules will load the first, while older browsers will load the second, bundled version.

Once these script tags are added, components can be used just like any other HTML element. Only components that are actually used will be loaded.

Styles

You will also need to explicitly load the calcite.css file:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/@esri/calcite-components/dist/calcite/calcite.css" />

Webpack

If you already have a webpack build for your project, you can use @stencil/webpack to add calcite-components to your bundle.

After installing calcite-components, install the plugin as a dev dependency:

npm install --save-dev @stencil/webpack

Then import and call the plugin in webpack.config.js:

const stencil = require('@stencil/webpack');
module.exports = {
  ...
  plugins: [
    new stencil.StencilPlugin()
  ]
}

Lastly, add the import in your main bundle js (or ts) file:

import "@esri/calcite-components/dist/calcite.js";

This will add the initial stencil loader to your bundle, and copy over the actual component code to the output directory you've configured for Webpack. Components will still be lazy-loaded as they are needed. Note: you must use the .js file path for the Webpack plugin to work correctly, even if your bundle file is a TypeScript file.

TypeScript

Stencil provides a full set of typings for all the components in this repo. To make TypeScript aware of these components, just import the library:

import "@esri/calcite-components";

This will provide autocomplete of component names/properties, as well as additional HTML element types:

// created elements will implicitly have the correct type already
const loader = document.createElement("calcite-loader");
document.body.appendChild(loader);
loader.isActive = true;

// you can also explicitly type an element using the generated types
// the type name will always be formatted like HTML{CamelCaseComponentName}Element
const loader = document.querySelector(".my-loader-element") as HTMLCalciteLoaderElement;
loader.isActive = true;

TypeScript with Preact

For preact applications using TypeScript, you must add an additional file to your tsconfig.json:

"files": [
  "node_modules/@esri/calcite-components/dist/types/preact.d.ts"
],

This allows you to use custom tags and provides auto-complete for calcite-components. See the Preact + TypeScript example for more details.

Browser Support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
IE11, Edgelast 2 versionslast 2 versionslast 2 versions

Contributing

We welcome contributions to this project. See CONTRIBUTING.md for an overview of contribution guidelines.

License

COPYRIGHT © 2020 Esri

All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions.

This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice.

See use restrictions at http://www.esri.com/legal/pdfs/mla_e204_e300/english

For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA

email: contracts@esri.com

FAQs

Package last updated on 23 Oct 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc