Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/vaadin-item

Package Overview
Dependencies
Maintainers
16
Versions
243
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/vaadin-item - npm Package Compare versions

Comparing version 2.3.0 to 3.0.0-alpha1

82

package.json
{
"name": "@vaadin/vaadin-item",
"version": "3.0.0-alpha1",
"description": "vaadin-item",
"main": "vaadin-item.js",
"module": "vaadin-item.js",
"repository": "vaadin/vaadin-item",
"keywords": [

@@ -10,7 +15,2 @@ "Vaadin",

],
"repository": "vaadin/vaadin-item",
"homepage": "https://vaadin.com/components",
"name": "@vaadin/vaadin-item",
"version": "2.3.0",
"main": "vaadin-item.js",
"author": "Vaadin Ltd",

@@ -21,2 +21,3 @@ "license": "Apache-2.0",

},
"homepage": "https://vaadin.com/components",
"files": [

@@ -28,26 +29,65 @@ "vaadin-*.d.ts",

],
"resolutions": {
"inherits": "2.0.3",
"samsam": "1.1.3",
"supports-color": "3.1.2",
"type-detect": "1.0.0"
"scripts": {
"analyze": "polymer analyze vaadin-* > analysis.json",
"debug": "web-test-runner test/*.test.js --watch",
"dist": "rimraf dist && npm run analyze && rollup -c rollup.config.js && cp analysis.json dist",
"check-version": "magi check-version",
"lint": "npm run lint:js && npm run lint:css",
"lint:css": "stylelint src/*.js theme/**/*-styles.js",
"lint:js": "eslint src theme test",
"prestart": "npm run analyze",
"preversion": "magi update-version",
"screenshots": "hermione test/visual/test.js --update-refs",
"serve:dist": "web-dev-server --app-index dist/index.html --open",
"start": "web-dev-server --node-resolve --open",
"test": "web-test-runner test/*.test.js --coverage",
"test:sauce": "TEST_ENV=sauce npm test",
"test:visual": "hermione test/visual/test.js"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"eslint --fix",
"prettier --write"
]
},
"dependencies": {
"@polymer/polymer": "^3.0.0",
"@vaadin/vaadin-themable-mixin": "^1.6.1",
"@vaadin/vaadin-themable-mixin": "^1.6.2",
"@vaadin/vaadin-element-mixin": "^2.4.1",
"@vaadin/vaadin-lumo-styles": "^1.1.0",
"@vaadin/vaadin-material-styles": "^1.1.0"
"@vaadin/vaadin-lumo-styles": "^1.6.1",
"@vaadin/vaadin-material-styles": "^1.3.2"
},
"scripts": {
"generate-typings": "gen-typescript-declarations --outDir . --verify"
},
"devDependencies": {
"@esm-bundle/chai": "^4.1.5",
"@open-wc/rollup-plugin-html": "^1.2.5",
"@open-wc/testing-helpers": "^1.8.12",
"@polymer/iron-component-page": "^4.0.0",
"@polymer/iron-test-helpers": "^3.0.0",
"@polymer/iron-component-page": "^4.0.0",
"@polymer/iron-demo-helpers": "^3.0.0",
"@webcomponents/webcomponentsjs": "^2.0.0",
"wct-browser-legacy": "^1.0.1",
"@vaadin/vaadin-demo-helpers": "^3.0.0"
"@rollup/plugin-node-resolve": "^11.0.0",
"@web/dev-server": "~0.0.25",
"@web/test-runner": "^0.10.0",
"@web/test-runner-saucelabs": "^0.1.3",
"eslint": "^7.14.0",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-prettier": "^3.1.4",
"hermione": "^3.9.0",
"hermione-esm": "^0.4.0",
"hermione-sauce": "^0.1.0",
"husky": "^4.3.0",
"lint-staged": "^10.5.1",
"magi-cli": "^0.28.0",
"prettier": "^2.2.0",
"rimraf": "^3.0.2",
"rollup": "^2.34.1",
"rollup-plugin-terser": "^7.0.2",
"sinon": "^9.2.1",
"stylelint": "^13.8.0",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-vaadin": "^0.2.7"
}
}

80

README.md

@@ -1,11 +0,1 @@

[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-item)](https://www.npmjs.com/package/@vaadin/vaadin-item)
[![Bower version](https://badgen.net/github/release/vaadin/vaadin-item)](https://github.com/vaadin/vaadin-item/releases)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-item)
[![Build Status](https://travis-ci.org/vaadin/vaadin-item.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-item)
[![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-item/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-item?branch=master)
[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-item)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-item.svg)](https://vaadin.com/directory/component/vaadinvaadin-item)
# <vaadin-item>

@@ -17,16 +7,11 @@

[<vaadin-item>](https://vaadin.com/components/vaadin-item) is a Web Component providing a container for item elements, part of the [Vaadin components](https://vaadin.com/components).
<!--
```
<custom-element-demo>
<template>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="vaadin-item.html">
<next-code-block></next-code-block>
</template>
</custom-element-demo>
```
-->
[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-item)](https://www.npmjs.com/package/@vaadin/vaadin-item)
[![Build Status](https://travis-ci.org/vaadin/vaadin-item.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-item)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-item)
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-item)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-item.svg)](https://vaadin.com/directory/component/vaadinvaadin-item)
[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
```html

@@ -41,27 +26,5 @@ <vaadin-item>Simple Item</vaadin-item>

The Vaadin components are distributed as Bower and npm packages.
Please note that the version range is the same, as the API has not changed.
You should not mix Bower and npm versions in the same application, though.
Unlike the official Polymer Elements, the converted Polymer 3 compatible Vaadin components
are only published on npm, not pushed to GitHub repositories.
### Polymer 2 and HTML Imports Compatible Version
Install `vaadin-item`:
```sh
bower i vaadin/vaadin-item --save
```
Once installed, import it in your application:
```html
<link rel="import" href="bower_components/vaadin-item/vaadin-item.html">
```
### Polymer 3 and ES Modules Compatible Version
Install `vaadin-item`:
```sh
npm i @vaadin/vaadin-item --save

@@ -86,27 +49,28 @@ ```

`theme/lumo/vaadin-item.html`
`theme/lumo/vaadin-item.js`
- The component with the Material theme:
`theme/material/vaadin-item.html`
`theme/material/vaadin-item.js`
- Alias for `theme/lumo/vaadin-item.html`:
- Alias for `theme/lumo/vaadin-item.js`:
`vaadin-item.html`
`vaadin-item.js`
## Running demos and tests in a browser
## Running API docs and tests in a browser
1. Fork the `vaadin-item` repository and clone it locally.
1. Make sure you have [npm](https://www.npmjs.com/) and [Bower](https://bower.io) installed.
1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.
1. When in the `vaadin-item` directory, run `npm install` and then `bower install` to install dependencies.
1. Make sure you have [npm](https://www.npmjs.com/) installed.
1. When in the `vaadin-item` directory, run `npm install` to install dependencies.
1. Run `npm start`, browser will automatically open the component API documentation.
1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example:
1. You can also open visual tests, for example:
- http://127.0.0.1:3000/components/vaadin-item/demo
- http://127.0.0.1:3000/components/vaadin-item/test
- http://127.0.0.1:3000/test/visual/default.html

@@ -116,8 +80,12 @@

1. When in the `vaadin-item` directory, run `polymer test`
1. When in the `vaadin-item` directory, run `npm test`
## Debugging tests in the browser
1. Run `npm run debug`, then choose manual mode (M) and open the link in browser.
## Following the coding style
We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files as well as JavaScript snippets inside `.html` files.
We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files.

@@ -124,0 +92,0 @@

29

src/vaadin-item-mixin.d.ts
/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* src/vaadin-item-mixin.js
*/
// tslint:disable:variable-name Describing an API that's defined elsewhere.
// tslint:disable:no-any describes the API as best we are able today
export {ItemMixin};
/**
* A mixin providing `focused`, `focus-ring`, `active`, `disabled` and `selected`.

@@ -26,7 +9,5 @@ *

interface ItemMixinConstructor {
new(...args: any[]): ItemMixin;
new (...args: any[]): ItemMixin;
}
export {ItemMixinConstructor};
interface ItemMixin {

@@ -51,8 +32,12 @@ value: string;

selected: boolean;
ready(): void;
disconnectedCallback(): void;
_setFocused(focused: boolean): void;
_setActive(active: boolean): void;
_onKeydown(event: KeyboardEvent): void;
_onKeyup(event: KeyboardEvent): void;
}
export { ItemMixin, ItemMixinConstructor };

275

src/vaadin-item-mixin.js
/**
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
* @license
* Copyright (c) 2020 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
/**

@@ -12,158 +13,158 @@ * A mixin providing `focused`, `focus-ring`, `active`, `disabled` and `selected`.

*/
export const ItemMixin = superClass => class VaadinItemMixin extends superClass {
static get properties() {
return {
export const ItemMixin = (superClass) =>
class VaadinItemMixin extends superClass {
static get properties() {
return {
/**
* Used for mixin detection because `instanceof` does not work with mixins.
* e.g. in VaadinListMixin it filters items by using the
* `element._hasVaadinItemMixin` condition.
* @type {boolean}
*/
_hasVaadinItemMixin: {
value: true
},
/**
* Used for mixin detection because `instanceof` does not work with mixins.
* e.g. in VaadinListMixin it filters items by using the
* `element._hasVaadinItemMixin` condition.
* @type {boolean}
*/
_hasVaadinItemMixin: {
value: true
},
/**
* If true, the user cannot interact with this element.
* @type {boolean}
*/
disabled: {
type: Boolean,
value: false,
observer: '_disabledChanged',
reflectToAttribute: true
},
/**
* If true, the user cannot interact with this element.
* @type {boolean}
*/
disabled: {
type: Boolean,
value: false,
observer: '_disabledChanged',
reflectToAttribute: true
},
/**
* If true, the item is in selected state.
* @type {boolean}
*/
selected: {
type: Boolean,
value: false,
reflectToAttribute: true,
observer: '_selectedChanged'
},
/**
* If true, the item is in selected state.
* @type {boolean}
*/
selected: {
type: Boolean,
value: false,
reflectToAttribute: true,
observer: '_selectedChanged'
},
/** @private */
_value: String
};
}
/** @private */
_value: String
};
}
/**
* @return {string}
*/
get value() {
return this._value !== undefined ? this._value : this.textContent.trim();
}
/**
* @return {string}
*/
get value() {
return this._value !== undefined ? this._value : this.textContent.trim();
}
/**
* @param {string} value
*/
set value(value) {
this._value = value;
}
/**
* @param {string} value
*/
set value(value) {
this._value = value;
}
/** @protected */
ready() {
super.ready();
/** @protected */
ready() {
super.ready();
const attrValue = this.getAttribute('value');
if (attrValue !== null) {
this.value = attrValue;
}
const attrValue = this.getAttribute('value');
if (attrValue !== null) {
this.value = attrValue;
this.addEventListener('focus', () => this._setFocused(true), true);
this.addEventListener('blur', () => this._setFocused(false), true);
this.addEventListener('mousedown', () => {
this._setActive((this._mousedown = true));
const mouseUpListener = () => {
this._setActive((this._mousedown = false));
document.removeEventListener('mouseup', mouseUpListener);
};
document.addEventListener('mouseup', mouseUpListener);
});
this.addEventListener('keydown', (e) => this._onKeydown(e));
this.addEventListener('keyup', (e) => this._onKeyup(e));
}
this.addEventListener('focus', e => this._setFocused(true), true);
this.addEventListener('blur', e => this._setFocused(false), true);
this.addEventListener('mousedown', e => {
this._setActive(this._mousedown = true);
const mouseUpListener = () => {
this._setActive(this._mousedown = false);
document.removeEventListener('mouseup', mouseUpListener);
};
document.addEventListener('mouseup', mouseUpListener);
});
this.addEventListener('keydown', e => this._onKeydown(e));
this.addEventListener('keyup', e => this._onKeyup(e));
}
/** @protected */
disconnectedCallback() {
super.disconnectedCallback();
/** @protected */
disconnectedCallback() {
super.disconnectedCallback();
// in Firefox and Safari, blur does not fire on the element when it is removed,
// especially between keydown and keyup events, being active at the same time.
// reproducible in `<vaadin-select>` when closing overlay on select.
if (this.hasAttribute('active')) {
this._setFocused(false);
}
}
// in Firefox and Safari, blur does not fire on the element when it is removed,
// especially between keydown and keyup events, being active at the same time.
// reproducible in `<vaadin-select>` when closing overlay on select.
if (this.hasAttribute('active')) {
this._setFocused(false);
/** @private */
_selectedChanged(selected) {
this.setAttribute('aria-selected', selected);
}
}
/** @private */
_selectedChanged(selected) {
this.setAttribute('aria-selected', selected);
}
/** @private */
_disabledChanged(disabled) {
if (disabled) {
this.selected = false;
this.setAttribute('aria-disabled', 'true');
this.blur();
} else {
this.removeAttribute('aria-disabled');
/** @private */
_disabledChanged(disabled) {
if (disabled) {
this.selected = false;
this.setAttribute('aria-disabled', 'true');
this.blur();
} else {
this.removeAttribute('aria-disabled');
}
}
}
/**
* @param {boolean} focused
* @protected
*/
_setFocused(focused) {
if (focused) {
this.setAttribute('focused', '');
if (!this._mousedown) {
this.setAttribute('focus-ring', '');
/**
* @param {boolean} focused
* @protected
*/
_setFocused(focused) {
if (focused) {
this.setAttribute('focused', '');
if (!this._mousedown) {
this.setAttribute('focus-ring', '');
}
} else {
this.removeAttribute('focused');
this.removeAttribute('focus-ring');
this._setActive(false);
}
} else {
this.removeAttribute('focused');
this.removeAttribute('focus-ring');
this._setActive(false);
}
}
/**
* @param {boolean} active
* @protected
*/
_setActive(active) {
if (active) {
this.setAttribute('active', '');
} else {
this.removeAttribute('active');
/**
* @param {boolean} active
* @protected
*/
_setActive(active) {
if (active) {
this.setAttribute('active', '');
} else {
this.removeAttribute('active');
}
}
}
/**
* @param {!KeyboardEvent} event
* @protected
*/
_onKeydown(event) {
if (/^( |SpaceBar|Enter)$/.test(event.key) && !event.defaultPrevented) {
event.preventDefault();
this._setActive(true);
/**
* @param {!KeyboardEvent} event
* @protected
*/
_onKeydown(event) {
if (/^( |SpaceBar|Enter)$/.test(event.key) && !event.defaultPrevented) {
event.preventDefault();
this._setActive(true);
}
}
}
/**
* @param {!KeyboardEvent} event
* @protected
*/
_onKeyup(event) {
if (this.hasAttribute('active')) {
this._setActive(false);
this.click();
/**
* @param {!KeyboardEvent} event
* @protected
*/
_onKeyup() {
if (this.hasAttribute('active')) {
this._setActive(false);
this.click();
}
}
}
};
};

35

src/vaadin-item.d.ts

@@ -1,24 +0,7 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* src/vaadin-item.js
*/
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { DirMixin } from '@vaadin/vaadin-element-mixin/vaadin-dir-mixin.js';
// tslint:disable:variable-name Describing an API that's defined elsewhere.
import { ItemMixin } from './vaadin-item-mixin.js';
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import {DirMixin} from '@vaadin/vaadin-element-mixin/vaadin-dir-mixin.js';
import {ItemMixin} from './vaadin-item-mixin.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
/**

@@ -59,8 +42,3 @@ * `<vaadin-item>` is a Web Component providing layout for items in tabs and menus.

*/
declare class ItemElement extends
ItemMixin(
ThemableMixin(
DirMixin(
PolymerElement))) {
declare class ItemElement extends ItemMixin(ThemableMixin(DirMixin(HTMLElement))) {
/**

@@ -73,8 +51,7 @@ * Submittable string value. The default value is the trimmed text content of the element.

declare global {
interface HTMLElementTagNameMap {
"vaadin-item": ItemElement;
'vaadin-item': ItemElement;
}
}
export {ItemElement};
export { ItemElement };

41

src/vaadin-item.js
/**
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
* @license
* Copyright (c) 2020 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { DirMixin } from '@vaadin/vaadin-element-mixin/vaadin-dir-mixin.js';
import { ItemMixin } from './vaadin-item-mixin.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
/**

@@ -47,3 +46,3 @@ * `<vaadin-item>` is a Web Component providing layout for items in tabs and menus.

*
* @extends PolymerElement
* @extends HTMLElement
* @mixes ItemMixin

@@ -56,15 +55,15 @@ * @mixes ThemableMixin

return html`
<style>
:host {
display: inline-block;
}
<style>
:host {
display: inline-block;
}
:host([hidden]) {
display: none !important;
}
</style>
<div part="content">
<slot></slot>
</div>
`;
:host([hidden]) {
display: none !important;
}
</style>
<div part="content">
<slot></slot>
</div>
`;
}

@@ -77,3 +76,3 @@

static get version() {
return '2.3.0';
return '3.0.0-alpha1';
}

@@ -80,0 +79,0 @@

120

theme/lumo/vaadin-item-styles.js

@@ -0,1 +1,2 @@

import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-lumo-styles/font-icons.js';

@@ -6,70 +7,65 @@ import '@vaadin/vaadin-lumo-styles/sizing.js';

import '@vaadin/vaadin-lumo-styles/typography.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
const $_documentContainer = html`<dom-module id="lumo-item" theme-for="vaadin-item">
<template>
<style>
:host {
display: flex;
align-items: center;
box-sizing: border-box;
font-family: var(--lumo-font-family);
font-size: var(--lumo-font-size-m);
line-height: var(--lumo-line-height-xs);
padding: 0.5em 1em;
min-height: var(--lumo-size-m);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
}
registerStyles(
'vaadin-item',
css`
:host {
display: flex;
align-items: center;
box-sizing: border-box;
font-family: var(--lumo-font-family);
font-size: var(--lumo-font-size-m);
line-height: var(--lumo-line-height-xs);
padding: 0.5em 1em;
min-height: var(--lumo-size-m);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
}
/* Selectable items have a checkmark icon */
:host([tabindex])::before {
display: var(--_lumo-item-selected-icon-display, none);
content: var(--lumo-icons-checkmark);
font-family: lumo-icons;
font-size: var(--lumo-icon-size-m);
line-height: 1;
font-weight: normal;
width: 1em;
height: 1em;
margin: calc((1 - var(--lumo-line-height-xs)) * var(--lumo-font-size-m) / 2) 0;
color: var(--lumo-primary-text-color);
flex: none;
opacity: 0;
transition: transform 0.2s cubic-bezier(.12, .32, .54, 2), opacity 0.1s;
}
/* Checkmark */
:host([tabindex])::before {
display: var(--_lumo-item-selected-icon-display, none);
content: var(--lumo-icons-checkmark);
font-family: lumo-icons;
font-size: var(--lumo-icon-size-m);
line-height: 1;
font-weight: normal;
width: 1em;
height: 1em;
margin: calc((1 - var(--lumo-line-height-xs)) * var(--lumo-font-size-m) / 2) 0;
color: var(--lumo-primary-text-color);
flex: none;
opacity: 0;
transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), opacity 0.1s;
}
:host([selected])::before {
opacity: 1;
}
:host([selected])::before {
opacity: 1;
}
:host([active]:not([selected]))::before {
transform: scale(0.8);
opacity: 0;
transition-duration: 0s;
}
:host([active]:not([selected]))::before {
transform: scale(0.8);
opacity: 0;
transition-duration: 0s;
}
[part="content"] {
flex: auto;
}
[part='content'] {
flex: auto;
}
/* Disabled item */
/* Disabled */
:host([disabled]) {
color: var(--lumo-disabled-text-color);
cursor: default;
pointer-events: none;
}
:host([disabled]) {
color: var(--lumo-disabled-text-color);
cursor: default;
pointer-events: none;
}
/* Slotted icons */
:host ::slotted(iron-icon) {
width: var(--lumo-icon-size-m);
height: var(--lumo-icon-size-m);
}
</style>
</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);
/* Slotted icons */
:host ::slotted(iron-icon) {
width: var(--lumo-icon-size-m);
height: var(--lumo-icon-size-m);
}
`,
{ moduleId: 'lumo-item' }
);

103

theme/material/vaadin-item-styles.js

@@ -0,63 +1,58 @@

import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-material-styles/font-icons.js';
import '@vaadin/vaadin-material-styles/color.js';
import '@vaadin/vaadin-material-styles/typography.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
const $_documentContainer = html`<dom-module id="material-item" theme-for="vaadin-item">
<template>
<style>
:host {
display: flex;
align-items: center;
box-sizing: border-box;
overflow: hidden;
font-family: var(--material-font-family);
font-size: var(--material-body-font-size);
line-height: 24px;
padding: 4px 0;
}
registerStyles(
'vaadin-item',
css`
:host {
display: flex;
align-items: center;
box-sizing: border-box;
overflow: hidden;
font-family: var(--material-font-family);
font-size: var(--material-body-font-size);
line-height: 24px;
padding: 4px 0;
}
/* It's the list-box's responsibility to add the focus style */
:host([focused]) {
outline: none;
}
/* It's the list-box's responsibility to add the focus style */
:host([focused]) {
outline: none;
}
/* Selected item has an icon */
/* Checkmark */
:host::before {
display: var(--_material-item-selected-icon-display, none);
content: '';
font-family: material-icons;
font-size: 24px;
line-height: 1;
font-weight: 400;
width: 24px;
text-align: center;
margin-right: 10px;
color: var(--material-secondary-text-color);
flex: none;
}
:host::before {
display: var(--_material-item-selected-icon-display, none);
content: "";
font-family: material-icons;
font-size: 24px;
line-height: 1;
font-weight: 400;
width: 24px;
text-align: center;
margin-right: 10px;
color: var(--material-secondary-text-color);
flex: none;
}
:host([selected])::before {
content: var(--material-icons-check);
}
:host([selected])::before {
content: var(--material-icons-check);
}
/* Disabled */
:host([disabled]) {
color: var(--material-disabled-text-color);
cursor: default;
pointer-events: none;
}
/* Disabled item */
:host([disabled]) {
color: var(--material-disabled-text-color);
cursor: default;
pointer-events: none;
}
/* RTL specific styles */
:host([dir="rtl"])::before {
margin-right: 0;
margin-left: 10px;
}
</style>
</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);
/* RTL specific styles */
:host([dir='rtl'])::before {
margin-right: 0;
margin-left: 10px;
}
`,
{ moduleId: 'material-item' }
);

13

vaadin-item-mixin.d.ts

@@ -1,14 +0,1 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* vaadin-item-mixin.js
*/
// tslint:disable:variable-name Describing an API that's defined elsewhere.
export * from './src/vaadin-item-mixin.js';

13

vaadin-item.d.ts

@@ -1,14 +0,1 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* vaadin-item.js
*/
// tslint:disable:variable-name Describing an API that's defined elsewhere.
export * from './src/vaadin-item.js';
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc