@polymer/iron-flex-layout - npm Package Compare versions

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

iron-flex-layout-classes.js

@@ -0,6 +1,44 @@
+/**
+@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
+*/
 import '@polymer/polymer/polymer-legacy.js';
-const $_documentContainer = document.createElement('template');
-$_documentContainer.setAttribute('style', 'display: none;');
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
 
-$_documentContainer.innerHTML = `<dom-module id="iron-flex">
+/*
+A set of layout classes that let you specify layout properties directly in
+markup. You must include this file in every element that needs to use them.
+
+Sample use:
+
+    import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';
+
+    const template = html`
+      <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+      <style>
+        .test { width: 100px; }
+      </style>
+      <div class="layout horizontal center-center">
+        <div class="test">horizontal layout center alignment</div>
+      </div>
+    `;
+    document.body.appendChild(template.content);
+
+The following imports are available:
+ - iron-flex
+ - iron-flex-reverse
+ - iron-flex-alignment
+ - iron-flex-factors
+ - iron-positioning
+*/
+
+const template = html`
+/* Most common used flex styles*/
+<dom-module id="iron-flex">
   <template>
@@ -80,3 +118,5 @@ <style>
   </template>
-</dom-module><dom-module id="iron-flex-reverse">
+</dom-module>
+/* Basic flexbox reverse styles */
+<dom-module id="iron-flex-reverse">
   <template>
@@ -110,3 +150,5 @@ <style>
   </template>
-</dom-module><dom-module id="iron-flex-alignment">
+</dom-module>
+/* Flexbox alignment */
+<dom-module id="iron-flex-alignment">
   <template>
@@ -248,3 +290,5 @@ <style>
   </template>
-</dom-module><dom-module id="iron-flex-factors">
+</dom-module>
+/* Non-flexbox positioning helper styles */
+<dom-module id="iron-flex-factors">
   <template>
@@ -328,3 +372,4 @@ <style>
   </template>
-</dom-module><dom-module id="iron-positioning">
+</dom-module>
+<dom-module id="iron-positioning">
   <template>
@@ -399,44 +444,5 @@ <style>
   </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
-
-/**
-@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
-*/
-/*
-A set of layout classes that let you specify layout properties directly in markup.
-You must include this file in every element that needs to use them.
-
-Sample use:
-
-    <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
-    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
-
-    <div class="layout horizontal layout-start">
-      <div>cross axis start alignment</div>
-    </div>
-
-The following imports are available:
- - iron-flex
- - iron-flex-reverse
- - iron-flex-alignment
- - iron-flex-factors
- - iron-positioning
-*/
-/* Most common used flex styles*/
-/* Basic flexbox reverse styles */
-/* Flexbox alignment */
-/* Non-flexbox positioning helper styles */
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-;
+</dom-module>
+`;
+template.setAttribute('style', 'display: none;');
+document.head.appendChild(template.content);

iron-flex-layout.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 {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
 /**
 The `<iron-flex-layout>` component provides simple ways to use
-[CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes),
-also known as flexbox. This component provides two different ways to use flexbox:
+[CSS flexible box
+layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes),
+also known as flexbox. Note that this is an old element, that was written
+before all modern browsers had non-prefixed flex styles. As such, nowadays you
+don't really need to use this element anymore, and can use CSS flex styles
+directly in your code.
 
-1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
-The layout class stylesheet provides a simple set of class-based flexbox rules, that
-let you specify layout properties directly in markup. You must include this file
-in every element that needs to use them.
+This component provides two different ways to use flexbox:
 
+1. [Layout
+classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
+The layout class stylesheet provides a simple set of class-based flexbox rules,
+that let you specify layout properties directly in markup. You must include this
+file in every element that needs to use them.
+
     Sample use:
@@ -31,25 +42,32 @@
 
-    ```html
-    <link rel="import" href="iron-flex-layout-classes.html">
-    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
-    <style>
-      .test { width: 100px; }
-    </style>
-    <div class="layout horizontal center-center">
-      <div class="test">horizontal layout center alignment</div>
-    </div>
+    ```js
+    import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+    import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';
+
+    const template = html`
+      <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+      <style>
+        .test { width: 100px; }
+      </style>
+      <div class="layout horizontal center-center">
+        <div class="test">horizontal layout center alignment</div>
+      </div>
+    `;
+    document.body.appendChild(template.content);
     ```
 
-2. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html).
-The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.
+2. [Custom CSS
+mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html).
+The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS
+rule using the `@apply` function.
 
-Please note that the old [/deep/ layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes)
+Please note that the old [/deep/ layout
+classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes)
 are deprecated, and should not be used. To continue using layout properties
 directly in markup, please switch to using the new `dom-module`-based
-[layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
-Please note that the new version does not use `/deep/`, and therefore requires you
-to import the `dom-modules` in every element that needs to use them.
+[layout
+classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
+Please note that the new version does not use `/deep/`, and therefore requires
+you to import the `dom-modules` in every element that needs to use them.
 
-A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `<iron-flex-layout>` is available.
-
 @group Iron Elements
@@ -59,13 +77,4 @@ @pseudoElement iron-flex-layout
 */
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-import '@polymer/polymer/polymer-legacy.js';
-
-const $_documentContainer = document.createElement('template');
-$_documentContainer.setAttribute('style', 'display: none;');
-
-$_documentContainer.innerHTML = `<custom-style>
+const template = html`
+<custom-style>
   <style is="custom-style">
@@ -76,3 +85,4 @@ [hidden] {
   </style>
-</custom-style><custom-style>
+</custom-style>
+<custom-style>
   <style is="custom-style">
@@ -423,5 +433,7 @@ html {
 
-document.head.appendChild($_documentContainer.content);
+template.setAttribute('style', 'display: none;');
+document.head.appendChild(template.content);
+
 var style = document.createElement('style');
 style.textContent = '[hidden] { display: none !important; }';
 document.head.appendChild(style);

package.json

@@ -15,23 +15,15 @@ {
   "devDependencies": {
-    "@polymer/gen-typescript-declarations": "^1.2.2",
-    "bower": "^1.8.0",
     "webmat": "^0.2.0",
-    "@polymer/test-fixture": "^3.0.0-pre.21",
+    "@polymer/test-fixture": "^3.0.0-pre.20",
     "wct-browser-legacy": "^1.0.1",
     "@webcomponents/webcomponentsjs": "^2.0.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/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",
   "author": "The Polymer Authors",
@@ -38,0 +30,0 @@ "dependencies": {

README.md

@@ -0,10 +1,18 @@
+[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-flex-layout.svg)](https://www.npmjs.com/package/@polymer/iron-flex-layout)
 [![Build status](https://travis-ci.org/PolymerElements/iron-flex-layout.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-flex-layout)
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/PolymerElements/iron-flex-layout)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-flex-layout)
 
 ## <iron-flex-layout>
-
 The `<iron-flex-layout>` component provides simple ways to use
 [CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes),
-also known as flexbox. This component provides two different ways to use flexbox:
+also known as flexbox. Note that this is an old element, that was written
+before all modern browsers had non-prefixed flex styles. As such, nowadays you
+don't really need to use this element anymore, and can use CSS flex styles
+directly in your code.
 
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-flex-layout),
+  [Demo](https://www.webcomponents.org/element/@polymer/iron-flex-layout/demo/demo/index.html).
+
+This component provides two different ways to use flexbox:
+
 1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
@@ -15,48 +23,54 @@ The layout class stylesheet provides a simple set of class-based flexbox rules, that
 
-Sample use:
+1. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html).
+The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.
 
-<!--
+## Usage
+
+### Installation
 ```
-<custom-element-demo>
-  <template>
-    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
-    <link rel="import" href="iron-flex-layout-classes.html">
-    <dom-module id="demo-element">
-      <template>
-        <custom-style>
-          <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
-        </custom-style>
-        <style>
-          .container, .layout {
-            background-color: #ccc;
-            padding: 4px;
-          }
-          .container div, .layout div {
-            background-color: white;
-            padding: 12px;
-            margin: 4px;
-          }
-        </style>
-        <next-code-block></next-code-block>
-      </template>
-      <script>Polymer({is: "demo-element"});</script>
-    </dom-module>
-    <demo-element></demo-element>
-  </template>
-</custom-element-demo>
+npm install --save @polymer/iron-flex-layout
 ```
--->
-```html
-<div class="layout horizontal layout-start" style="height: 154px">
-  <div>cross axis start alignment</div>
-</div>
+
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';
+
+class SampleElement extends PolymerElement {
+  static get template() {
+    return html`
+      <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+      <style>
+        .test { width: 100px; }
+      </style>
+      <div class="layout horizontal center-center">
+        <div class="test">horizontal layout center alignment</div>
+      </div>
+    `;
+  }
+}
+customElements.define('sample-element', SampleElement);
 ```
 
-1. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html).
-The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
 
-A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `<iron-flex-layout>` is available.
+### Installation
+```sh
+git clone https://github.com/PolymerElements/iron-flex-layout
+cd iron-flex-layout
+npm install
+npm install -g polymer-cli
+```
 
-## Changes in 2.0
-- removed the deprecated `/deep/` classes -- files removed: `classes/iron-flex-layout.html`, `classes/iron-shadow-flex-layout` 
+### 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

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

6

decreased by-25%

Lines of code

796

increased by2.31%

Number of lines in readme file

76

increased by22.58%

Worsened metrics

Total package byte prevSize

40379

decreased by-65.14%

Number of package files

9

decreased by-47.06%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes