This repository has been archived by the owner on Aug 22, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: use new @esri/calcite-components-angular package (#270)
Change the angular example to use the new `@esri/calcite-components-angular` package once it is installed in Esri/calcite-design-system#8084 and published to NPM.
- Loading branch information
Showing
29 changed files
with
8,881 additions
and
16,517 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,101 +1,88 @@ | ||
| # Angular | ||
|
|
||
| This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.0. | ||
| This examples use [`@esri/calcite-components-angular`](https://www.npmjs.com/package/@esri/calcite-components-angular), which provides Angular wrappers for Calcite Components. | ||
|
|
||
| ## Installation | ||
| ## Usage | ||
|
|
||
| First, install dependencies with | ||
| ### Install the packages | ||
|
|
||
| ``` | ||
| npm install | ||
| Install the Angular components along with [`@esri/calcite-components`](https://www.npmjs.com/package/@esri/calcite-components): | ||
|
|
||
| ```sh | ||
| npm install @esri/calcite-components @esri/calcite-components-angular | ||
| ``` | ||
|
|
||
| After that, you can run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. | ||
| Make sure the versions of the two packages remain the same when updating your dependencies. | ||
|
|
||
| ## Calcite Components with Angular | ||
| ### Copy local assets | ||
|
|
||
| To install the calcite-components in an Angular project, run: | ||
| Calcite Components rely on assets being available at a particular path. If using assets locally, you'll need to copy these over to your `src` directory. This example has a `copy` npm script, which will automatically run after installing dependencies. | ||
|
|
||
| ```sh | ||
| cp -r node_modules/@esri/calcite-components/dist/calcite/assets/ ./src/assets/ | ||
| ``` | ||
| npm install --save @esri/calcite-components | ||
| ``` | ||
|
|
||
| ### Dependencies | ||
|
|
||
| #### sortablejs | ||
| ### Import the stylesheet | ||
|
|
||
| To install the sortablejs dependency in an Angular project, run: | ||
| Import the global stylesheet into your app (only do this once): | ||
|
|
||
| ```css | ||
| /* src/styles.css */ | ||
| @import '@esri/calcite-components/dist/calcite/calcite.css'; | ||
| ``` | ||
| npm install --save @types/sortablejs | ||
|
|
||
| ### Define the custom elements | ||
|
|
||
| The Angular wrapper components must use [Calcite Component's Distribution build](https://developers.arcgis.com/calcite-design-system/get-started/#distribution): | ||
|
|
||
| ```ts | ||
| // src/main.ts | ||
| import { defineCustomElements } from '@esri/calcite-components/dist/loader'; | ||
| defineCustomElements(window, { resourcesUrl: './assets' }); | ||
| ``` | ||
|
|
||
| ### Custom Components | ||
| ### Use the components | ||
|
|
||
| To use custom components in Angular, you have to tell the module to include the schema for custom elements. Fortunately, Angular makes this pretty easy. Add something like the following to your `app.module.ts` file: | ||
| Add `CalciteComponentsModule` to the imports of your Angular component's module file: | ||
|
|
||
| ```ts | ||
| // src/app/app.module.ts | ||
| import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; | ||
| import { NgModule } from '@angular/core'; | ||
| import { BrowserModule } from '@angular/platform-browser'; | ||
| import { CalciteComponentsModule } from '@esri/calcite-components-angular'; | ||
| import { AppComponent } from './app.component'; | ||
|
|
||
| @NgModule({ | ||
| schemas: [CUSTOM_ELEMENTS_SCHEMA] | ||
| declarations: [AppComponent], | ||
| imports: [BrowserModule, CalciteComponentsModule], | ||
| providers: [], | ||
| bootstrap: [AppComponent] | ||
| }) | ||
| export class AppModule {} | ||
| ``` | ||
|
|
||
| Next, import and call `setAssetPath`: | ||
|
|
||
| ```ts | ||
| // src/main.ts | ||
| import { setAssetPath } from '@esri/calcite-components/dist/components'; | ||
| setAssetPath(location.href); | ||
| ``` | ||
|
|
||
| ### Allow Synthetic Default Imports | ||
|
|
||
| Allow default imports from modules with no default export. This does not affect the code emit, just typechecking. | ||
|
|
||
| To enable set the `allowedSyntheticDefaultImports` property to `true` in the `compilerOptions` object. | ||
| Calcite Components can now be used in your application like any other Angular component! | ||
|
|
||
| ```html | ||
| <!-- app.component.html --> | ||
| <calcite-slider | ||
| min="1" | ||
| max="100" | ||
| [value]="sliderValue" | ||
| (calciteSliderInput)="onSliderInput($event)" | ||
| ></calcite-slider> | ||
| ``` | ||
| // tsconfig.json | ||
| "compilerOptions": { | ||
| ... | ||
| "allowSyntheticDefaultImports": true, | ||
| ... | ||
| } | ||
| ``` | ||
|
|
||
| ### Import Calcite Components | ||
|
|
||
| Now that everything is set up, you can import the components: | ||
|
|
||
| ```ts | ||
| // src/app/app.component.ts | ||
| import '@esri/calcite-components/dist/components/calcite-button'; | ||
| import '@esri/calcite-components/dist/components/calcite-icon'; | ||
| import '@esri/calcite-components/dist/components/calcite-date-picker'; | ||
| ``` | ||
| ## License | ||
|
|
||
| ## Adding the CSS | ||
| COPYRIGHT © 2023 Esri | ||
|
|
||
| Calcite Components has a single stylesheet which provides CSS variables for colors. You can import it as a CSS import in `styles.css`: | ||
| All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions. | ||
|
|
||
| ```css | ||
| /* styles.css */ | ||
| @import '@esri/calcite-components/dist/calcite/calcite.css'; | ||
| ``` | ||
| 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. | ||
|
|
||
| ## Adding the assets | ||
| See use restrictions at <http://www.esri.com/legal/pdfs/mla_e204_e300/english> | ||
|
|
||
| There are a few static assets (calendar nls data, icon paths) used by calcite components. You can add the following to `architect.build.options.assets` in the `angular.json` file to serve these assets directly from the calcite components library in `node_modules`: | ||
| For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA | ||
|
|
||
| ``` | ||
| // angular.json | ||
| { | ||
| "glob": "**/*.json", | ||
| "input": "./node_modules/@esri/calcite-components/dist/calcite/assets/", | ||
| "output": "./assets/" | ||
| } | ||
| ``` | ||
| email: <[email protected]> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.