# @advanced-rest-client/arc-fit-mixin

> arc-fit-mixin is a port of iron-fit-behavior that works with web components

Latest version **1.2.3** (published 2021-10-16) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @advanced-rest-client/arc-fit-mixin
pnpm add @advanced-rest-client/arc-fit-mixin
yarn add @advanced-rest-client/arc-fit-mixin
bun add @advanced-rest-client/arc-fit-mixin
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.3 |
| Published | 2021-10-16 |
| First published | 2019-06-07 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 43.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | jarrodek, twoplustwoone, lbauret, carowright |
| Keywords | api-components, arc-components, mixins, web-components, positioning |

## Links

- npm: https://www.npmjs.com/package/@advanced-rest-client/arc-fit-mixin
- Repository: https://github.com/advanced-rest-client/arc-fit-mixin
- Issues: https://github.com/advanced-rest-client/arc-fit-mixin/issues
- npm.io page: https://npm.io/package/@advanced-rest-client/arc-fit-mixin

## Dependencies (1)

- [@open-wc/dedupe-mixin](https://npm.io/package/@open-wc/dedupe-mixin.md) ^1.3.0

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 1.2.3 (latest) — 2021-10-16
- 1.2.2 — 2021-03-12
- 1.2.1 — 2020-10-02
- 1.2.0 — 2020-07-02
- 1.1.0 — 2020-06-08
- 1.0.3 — 2019-12-10
- 1.0.2 — 2019-07-25
- 1.0.1 — 2019-06-10
- 1.0.0 — 2019-06-07

## README

# DEPRECATED

Use the `@anypoint-web-components/awc` module instead.

-----

[![Published on NPM](https://img.shields.io/npm/v/@advanced-rest-client/arc-fit-mixin.svg)](https://www.npmjs.com/package/@advanced-rest-client/arc-fit-mixin)

[![Tests and publishing](https://github.com/advanced-rest-client/arc-fit-mixin/actions/workflows/deployment.yml/badge.svg)](https://github.com/advanced-rest-client/arc-fit-mixin/actions/workflows/deployment.yml)

This mixin is a port of [iron-fit-behavior](https://github.com/PolymerElements/iron-fit-behavior) that works with LitElement.

`ArcFitMixin` fits an element in another element using `max-height` and `max-width`, and optionally centers it in the window or another element. The element will only be sized and/or positioned if it has not already been sized and/or positioned by CSS.

|CSS properties|Action|
|----------------------|---------------------------------------------------|
|`position` set|Element is not centered horizontally or vertically|
|`top` or `bottom` set|Element is not vertically centered|
|`left` or `right` set|Element is not horizontally centered|
|`max-height` set|Element respects `max-height`|
|`max-width` set|Element respects `max-width`|

`ArcFitMixin` can position an element into another element using `verticalAlign` and `horizontalAlign`. This will override the element's css position.

```html
<div class="container">
  <arc-fit-impl verticalalign="top" horizontalalign="auto">
    Positioned into the container
  </arc-fit-impl>
</div>
```

Use `noOverlap` to position the element around another element without overlapping it.

```html
<div class="container">
  <arc-fit-impl nooverlap verticalalign="auto" horizontalalign="auto">
    Positioned around the container
  </arc-fit-impl>
</div>
```

Use `horizontalOffset, verticalOffset` to offset the element from its
`positionTarget`; `ArcFitMixin` will collapse these in order to
keep the element within `fitInto` boundaries, while preserving the element's
CSS margin values.

```html
<div class="container">
  <arc-fit-impl verticalalign="top" verticaloffset="20">
    With vertical offset
  </arc-fit-impl>
</div>
```

## Deprecation notice

The following attributes are supported for compatibility with older and Polymer elements but eventually will be removed and replaced wit  the corresponding new attribute.

-   `sizing-target` > `sizingtarget`
-   `fit-into` > `fitinto`
-   `no-overlap` > `nooverlap`
-   `position-target` > `positiontarget`
-   `horizontal-align` > `horizontalalign`
-   `vertical-align` > `verticalalign`
-   `dynamic-align` > `dynamicalign`
-   `horizontal-offset` > `horizontaloffset`
-   `vertical-offset` > `verticaloffset`
-   `auto-fit-on-attach` > `autofitonattach`


## Installation

```bash
npm i @advanced-rest-client/arc-fit-mixin
```

## Usage

```javascript
import { LitElement } from 'lit-element';
import { ArcFitMixin } from '@advanced-rest-client/arc-fit-mixin';

class ArcFitImpl extends ArcFitMixin(LitElement) {
  static get properties() {
    return {
      myProp: { type: Object, attribute: 'my-prop' },
    };
  }
}
```

## Testing

```bash
npm run test
```

## Testing with Sauce Labs

```bash
npm run test:sl
```

## Demo

```bash
npm start
```

---
_Source: https://npm.io/package/@advanced-rest-client/arc-fit-mixin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._