# @api-components/api-url-editor
> An AMF powered url editor for the HTTP request editor
Latest version **4.0.3** (published 2020-04-25) · Apache-2.0 license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install @api-components/api-url-editor
pnpm add @api-components/api-url-editor
yarn add @api-components/api-url-editor
bun add @api-components/api-url-editor
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 4.0.3 |
| Published | 2020-04-25 |
| First published | 2018-05-21 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 57.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | jarrodek, lbauret, twoplustwoone |
## Links
- npm: https://www.npmjs.com/package/@api-components/api-url-editor
- Repository: https://github.com/advanced-rest-client/api-url-editor
- Homepage: https://github.com/advanced-rest-client/api-url-editor#readme
- Issues: https://github.com/advanced-rest-client/api-url-editor/issues
- npm.io page: https://npm.io/package/@api-components/api-url-editor
## Dependencies (6)
- [lit-html](https://npm.io/package/lit-html.md) ^1.1.2
- [lit-element](https://npm.io/package/lit-element.md) ^2.0.1
- [@anypoint-web-components/anypoint-input](https://npm.io/package/@anypoint-web-components/anypoint-input.md) ^0.2.6
- [@advanced-rest-client/events-target-mixin](https://npm.io/package/@advanced-rest-client/events-target-mixin.md) ^3.0.0
- [@anypoint-web-components/validatable-mixin](https://npm.io/package/@anypoint-web-components/validatable-mixin.md) ^1.0.2
- [@api-components/api-view-model-transformer](https://npm.io/package/@api-components/api-view-model-transformer.md) ^4.1.0
## Recent versions
- 4.0.3 (latest) — 2020-04-25
- 4.0.1 — 2019-11-08
- 4.0.0 — 2019-10-13
- 3.0.5 — 2019-10-10
- 3.0.4 — 2019-08-30
- 3.0.3 — 2019-08-25
- 3.0.2 — 2019-08-24
- 3.0.1 — 2019-08-24
- 3.0.0 — 2019-08-17
- 3.0.0-preview.2 — 2019-04-13
- 3.0.0-preview.1 — 2019-02-22
- 2.0.3 — 2018-06-26
- 2.0.0 — 2018-05-21
## README
[](https://www.npmjs.com/package/@api-components/api-url-editor)
[](https://travis-ci.org/advanced-rest-client/api-url-editor)
# api-url-editor
An AMF powered URL editor for the HTTP request editor.
It uses [api-url-data-model](https://github.com/advanced-rest-client/api-url-data-model) to transform AMF model to the view model recognized by this element.
```html
```
## Version compatibility
This version only works with AMF model version 2 (AMF parser >= 4.0.0).
For compatibility with previous model version use `3.x.x` version of the component.
## Usage
### Installation
```
npm install --save @api-components/api-url-editor
```
### In an html file
```html
```
### In a LitElement
```js
import { LitElement, html } from 'lit-element';
import '@api-components/api-url-editor/api-url-editor.js';
class SampleElement extends LitElement {
render() {
return html`
`;
}
_handleValue(e) {
this.urlValue = e.target.value;
}
}
customElements.define('sample-element', SampleElement);
```
### Passing AMF data model
The component does not directly interact with AMF model. It uses a view model generated by [api-url-data-model](https://github.com/advanced-rest-client/api-url-data-model). This element parses API spec to produce basic information about currently selected endpoint like path variables model, query parameters model, and base URI.
Your UI has to provide a way to select an endpoint. You can use [api-navigation](https://github.com/advanced-rest-client/api-navigation) element which renders API structure in a nav bar and dispatches selection event.
#### In an html file
```html
```
#### In a LitElement
```js
import { LitElement, html } from 'lit-element';
import '@api-components/api-url-editor/api-url-editor.js';
class SampleElement extends LitElement {
static get properties() {
return {
amfModel: { type: Object },
selectedShape: { type: String },
apiBaseUri: { type: String },
endpointPath: { type: String },
queryModel: { type: Array },
pathModel: { type: Array },
...
}
}
render() {
return html`
`;
}
_handleValue(e) {
this.urlValue = e.target.value;
}
_baseUrlChangeHandler(e) {
this.apiBaseUri = e.detail.value;
}
_endpointPathChangeHandler(e) {
this.endpointPath = e.detail.value;
}
_queryModelChangeHandler(e) {
this.queryModel = e.detail.value;
}
_pathModelChangeHandler(e) {
this.pathModel = e.detail.value;
}
}
customElements.define('sample-element', SampleElement);
```
## Development
```sh
git clone https://github.com/advanced-rest-client/api-url-editor
cd api-url-editor
npm install
```
### Running the demo locally
```sh
npm start
```
### Running the tests
```sh
npm test
```
### API components
This components is a part of [API components ecosystem](https://elements.advancedrestclient.com/)
---
_Source: https://npm.io/package/@api-components/api-url-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._