New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@polymer/paper-card

Package Overview
Dependencies
Maintainers
9
Versions
32
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@polymer/paper-card - npm Package Compare versions

Comparing version

3.0.0-pre.21
to
3.0.0-pre.22

demo/.!25153!donuts.png
paper-card.d.ts

40

package.json

@@ -16,36 +16,28 @@ {

"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-collapse": "^3.0.0-pre.21",
"@polymer/iron-icons": "^3.0.0-pre.21",
"@polymer/iron-demo-helpers": "^3.0.0-pre.21",
"@polymer/paper-button": "^3.0.0-pre.21",
"@polymer/paper-checkbox": "^3.0.0-pre.21",
"@polymer/paper-icon-button": "^3.0.0-pre.21",
"@polymer/test-fixture": "^3.0.0-pre.21",
"@polymer/iron-collapse": "^3.0.0-pre.20",
"@polymer/iron-icons": "^3.0.0-pre.20",
"@polymer/iron-demo-helpers": "^3.0.0-pre.20",
"@polymer/paper-button": "^3.0.0-pre.20",
"@polymer/paper-checkbox": "^3.0.0-pre.20",
"@polymer/paper-icon-button": "^3.0.0-pre.20",
"@polymer/test-fixture": "^3.0.0-pre.20",
"wct-browser-legacy": "^1.0.1",
"@webcomponents/webcomponentsjs": "^2.0.0"
"@webcomponents/webcomponentsjs": "^2.0.0",
"@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": "paper-card.js",
"author": "The Polymer Authors",
"dependencies": {
"@polymer/iron-flex-layout": "^3.0.0-pre.21",
"@polymer/iron-image": "^3.0.0-pre.21",
"@polymer/paper-styles": "^3.0.0-pre.21",
"@polymer/iron-flex-layout": "^3.0.0-pre.20",
"@polymer/iron-image": "^3.0.0-pre.20",
"@polymer/paper-styles": "^3.0.0-pre.20",
"@polymer/polymer": "^3.0.0"
}
}

39

paper-card.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/iron-flex-layout/iron-flex-layout.js';
import '@polymer/iron-image/iron-image.js';
import '@polymer/paper-styles/element-styles/paper-material-styles.js';
import '@polymer/paper-styles/default-theme.js';
import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
/**
Material design: [Cards](https://www.google.com/design/spec/components/cards.html)
Material design:
[Cards](https://www.google.com/design/spec/components/cards.html)

@@ -32,3 +43,4 @@ `paper-card` is a container with a drop shadow.

By default, the `aria-label` will be set to the value of the `heading` attribute.
By default, the `aria-label` will be set to the value of the `heading`
attribute.

@@ -55,15 +67,2 @@ ### Styling

*/
/*
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';
import '@polymer/iron-flex-layout/iron-flex-layout.js';
import '@polymer/iron-image/iron-image.js';
import '@polymer/paper-styles/element-styles/paper-material-styles.js';
import '@polymer/paper-styles/default-theme.js';
import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
Polymer({

@@ -70,0 +69,0 @@ _template: html`

146

README.md

@@ -0,83 +1,85 @@

[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-card.svg)](https://www.npmjs.com/package/@polymer/paper-card)
[![Build status](https://travis-ci.org/PolymerElements/paper-card.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-card)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/PolymerElements/paper-card)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-card)
## <paper-card>
`paper-card` is a container with a drop shadow.
Material design: [Cards](https://www.google.com/design/spec/components/cards.html)
See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-card),
[Demo](https://www.webcomponents.org/element/@polymer/paper-card/demo/demo/index.html).
`paper-card` is a container with a drop shadow.
## Usage
<!---
```html
<custom-element-demo>
<template>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-icons/communication-icons.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-styles/typography.html">
<link rel="import" href="paper-card.html">
<custom-style>
<style is="custom-style">
body {
display: flex;
align-items: center;
justify-content: center;
}
paper-card {
max-width: 500px;
}
.cafe-header { @apply --paper-font-headline; }
.cafe-light { color: var(--paper-grey-600); }
.cafe-location {
float: right;
font-size: 15px;
vertical-align: middle;
}
.cafe-reserve { color: var(--google-blue-500); }
iron-icon.star {
--iron-icon-width: 16px;
--iron-icon-height: 16px;
color: var(--paper-amber-500);
}
iron-icon.star:last-of-type { color: var(--paper-grey-500); }
</style>
<custom-style>
<next-code-block></next-code-block>
</template>
</custom-element-demo>
### Installation
```
-->
npm install --save @polymer/paper-card
```
### In an html file
```html
<paper-card image="demo/donuts.png">
<div class="card-content">
<div class="cafe-header">Cafe Basilico
<div class="cafe-location cafe-light">
<iron-icon icon="communication:location-on"></iron-icon>
<span>250ft</span>
<html>
<head>
<script type="module">
import '@polymer/paper-card/paper-card.js';
import '@polymer/paper-button/paper-button.js';
</script>
</head>
<body>
<paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000" alt="Emmental">
<div class="card-content">
Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
</div>
</div>
<div class="cafe-rating">
<iron-icon class="star" icon="star"></iron-icon>
<iron-icon class="star" icon="star"></iron-icon>
<iron-icon class="star" icon="star"></iron-icon>
<iron-icon class="star" icon="star"></iron-icon>
<iron-icon class="star" icon="star"></iron-icon>
</div>
<p>$・Italian, Cafe</p>
<p class="cafe-light">Small plates, salads &amp; sandwiches in an intimate setting.</p>
</div>
<div class="card-actions">
<div class="horizontal justified">
<paper-icon-button icon="icons:event"></paper-icon-button>
<paper-button>5:30PM</paper-button>
<paper-button>7:30PM</paper-button>
<paper-button>9:00PM</paper-button>
<paper-button class="cafe-reserve">Reserve</paper-button>
</div>
</div>
</paper-card>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
</body>
</html>
```
### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-card/paper-card.js';
import '@polymer/paper-button/paper-button.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
<paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000" alt="Emmental">
<div class="card-content">
Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
`;
}
}
customElements.define('sample-element', SampleElement);
```
## 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/paper-card
cd paper-card
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
```
.github/CODEOWNERS
.github/ISSUE_TEMPLATE.md
.travis.yml
index.html
test/basic.html
test/index.html
wct.conf.json
demo/index.html

Sorry, the diff of this file is not supported yet