@polymer/iron-fit-behavior - npm Package Compare versions

Comparing version 3.0.0-pre.21 to 3.0.0-pre.22

demo/simple-fit.js

 /**
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
 */
 import '@polymer/polymer/polymer-legacy.js';
+import '@polymer/paper-styles/color.js';
 
-import { IronFitBehavior } from '../iron-fit-behavior.js';
-import '@polymer/paper-styles/color.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+import {IronFitBehavior} from '../iron-fit-behavior.js';
+
 Polymer({
@@ -17,0 +20,0 @@ _template: html`

iron-fit-behavior.js

 /**
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
 */
 import '@polymer/polymer/polymer-legacy.js';
 
-import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
+import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
 
 /**
-  `Polymer.IronFitBehavior` fits an element in another element using `max-height`
-  and `max-width`, and optionally centers it in the window or another element.
+`Polymer.IronFitBehavior` 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.
+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`
+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`
 
-  `Polymer.IronFitBehavior` can position an element into another element using
-  `verticalAlign` and `horizontalAlign`. This will override the element's css
-  position.
+`Polymer.IronFitBehavior` can position an element into another element using
+`verticalAlign` and `horizontalAlign`. This will override the element's css
+position.
 
-        <div class="container">
-          <iron-fit-impl vertical-align="top" horizontal-align="auto">
-            Positioned into the container
-          </iron-fit-impl>
-        </div>
+    <div class="container">
+      <iron-fit-impl vertical-align="top" horizontal-align="auto">
+        Positioned into the container
+      </iron-fit-impl>
+    </div>
 
-  Use `noOverlap` to position the element around another element without
-  overlapping it.
+Use `noOverlap` to position the element around another element without
+overlapping it.
 
-        <div class="container">
-          <iron-fit-impl no-overlap vertical-align="auto" horizontal-align="auto">
-            Positioned around the container
-          </iron-fit-impl>
-        </div>
+    <div class="container">
+      <iron-fit-impl no-overlap vertical-align="auto" horizontal-align="auto">
+        Positioned around the container
+      </iron-fit-impl>
+    </div>
 
-  Use `horizontalOffset, verticalOffset` to offset the element from its
-  `positionTarget`; `Polymer.IronFitBehavior` will collapse these in order to keep
-  the element within `fitInto` boundaries, while preserving the element's CSS
-  margin values.
+Use `horizontalOffset, verticalOffset` to offset the element from its
+`positionTarget`; `Polymer.IronFitBehavior` will collapse these in order to
+keep the element within `fitInto` boundaries, while preserving the element's
+CSS margin values.
 
-        <div class="container">
-          <iron-fit-impl vertical-align="top" vertical-offset="20">
-            With vertical offset
-          </iron-fit-impl>
-        </div>
+    <div class="container">
+      <iron-fit-impl vertical-align="top" vertical-offset="20">
+        With vertical offset
+      </iron-fit-impl>
+    </div>
 
-
-  @demo demo/index.html
-  @polymerBehavior
- */
+@demo demo/index.html
+@polymerBehavior
+*/
 export const IronFitBehavior = {
@@ -64,0 +64,0 @@

manifest.json

@@ -9,6 +9,3 @@ {
     },
-    "index.html": {
-      "convertedUrl": "index.html",
-      "exports": {}
-    },
+    "index.html": null,
     "demo/index.html": {
@@ -15,0 +12,0 @@ "convertedUrl": "demo/index.html",

package.json

@@ -15,22 +15,15 @@ {
   "devDependencies": {
-    "@polymer/gen-typescript-declarations": "^1.2.2",
-    "bower": "^1.8.0",
-    "webmat": "^0.2.0",
-    "@polymer/iron-component-page": "^3.0.0-pre.21",
-    "@polymer/iron-demo-helpers": "^3.0.0-pre.21",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.20",
+    "@polymer/paper-styles": "^3.0.0-pre.21",
+    "@webcomponents/webcomponentsjs": "^2.0.0",
     "wct-browser-legacy": "^1.0.1",
-    "@webcomponents/webcomponentsjs": "^2.0.0"
+    "webmat": "^0.2.2",
+    "@polymer/gen-typescript-declarations": "^1.5.0"
   },
   "scripts": {
-    "update-types": "bower install && gen-typescript-declarations --deleteExisting --outDir .",
-    "format": "webmat && npm run update-types"
+    "format": "webmat",
+    "generate-types": "gen-typescript-declarations --deleteExisting --outDir .",
+    "prepack": "npm run generate-types"
   },
-  "version": "3.0.0-pre.21",
-  "resolutions": {
-    "inherits": "2.0.3",
-    "samsam": "1.1.3",
-    "supports-color": "3.1.2",
-    "type-detect": "1.0.0",
-    "@webcomponents/webcomponentsjs": "2.0.0-beta.2"
-  },
+  "version": "3.0.0-pre.22",
   "main": "iron-fit-behavior.js",
@@ -37,0 +30,0 @@ "author": "The Polymer Authors",

README.md

@@ -0,43 +1,95 @@
+[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-fit-behavior.svg)](https://www.npmjs.com/package/@polymer/iron-fit-behavior)
 [![Build status](https://travis-ci.org/PolymerElements/iron-fit-behavior.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-fit-behavior)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-fit-behavior)
 
-_[Demo and API docs](https://elements.polymer-project.org/elements/iron-fit-behavior)_
+## IronFitBehavior
 
+`IronFitBehavior` positions and fits an element in the bounds of another
+element and optionally centers it in the window or the other element.
 
-## Polymer.IronFitBehavior
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-fit-behavior),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-fit-behavior/demo/demo/index.html).
 
-`Polymer.IronFitBehavior` fits an element in another element using `max-height` and `max-width`, and
-optionally centers it in the window or another element.
+## Usage
 
-The element will only be sized and/or positioned if it has not already been sized and/or positioned
-by CSS.
+### Installation
 
-| 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` |
+```
+npm install --save @polymer/iron-fit-behavior
+```
 
-`Polymer.IronFitBehavior` can position an element into another element using
-`verticalAlign` and `horizontalAlign`. This will override the element's css position.
+### In a Polymer 3 element
 
-```html
-  <div class="container">
-    <iron-fit-impl vertical-align="top" horizontal-align="auto">
-      Positioned into the container
-    </iron-fit-impl>
-  </div>
+```js
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+import {IronFitBehavior} from '@polymer/iron-fit-behavior/iron-fit-behavior.js';
+
+class SimpleFit extends mixinBehaviors(IronFitBehavior, PolymerElement) {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          background: lightblue;
+          padding: 2px;
+        }
+      </style>
+      verticalAlign: [[verticalAlign]], horizontalAlign: [[horizontalAlign]]
+    `;
+  }
+}
+
+customElements.define('simple-fit', SimpleFit);
 ```
 
-Use `noOverlap` to position the element around another element without overlapping it.
+Then, in your HTML:
 
 ```html
-  <div class="container">
-    <iron-fit-impl no-overlap vertical-align="auto" horizontal-align="auto">
-      Positioned around the container
-    </iron-fit-impl>
-  </div>
+<script type="module" src="./simple-fit.js"></script>
+
+<style>
+#container {
+  margin: 3em;
+  border: 2px dashed gray;
+  padding: 3em;
+}
+</style>
+
+<div id="container">
+  The <code>&lt;simple-fit&gt;</code> below will be positioned within this div.
+  <simple-fit id="simpleFitElement"
+    vertical-align="bottom"
+    horizontal-align="left"
+    auto-fit-on-attach
+  ></simple-fit>
+</div>
 ```
 
+## Contributing
 
+If you want to send a PR to this element, here are the instructions for running
+the tests and demo locally:
+
+### Installation
+
+```sh
+git clone https://github.com/PolymerElements/iron-fit-behavior
+cd iron-fit-behavior
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+
+```sh
+polymer serve --npm
+open http://127.0.0.1:<port>/demo/
+```
+
+### Running the tests
+
+```sh
+polymer test --npm
+```

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

6

decreased by-14.29%

Lines of code

858

increased by19.5%

Number of lines in readme file

96

increased by118.18%

Worsened metrics

Total package byte prevSize

44938

decreased by-50.57%

Number of package files

8

decreased by-46.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes