Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@vaadin/vaadin-list-box
Advanced tools
@vaadin/vaadin-list-box - npm Package Compare versions
Comparing version 1.4.0 to 2.0.0-alpha1
| { | ||
| "name": "@vaadin/vaadin-list-box", | ||
| "version": "2.0.0-alpha1", | ||
| "description": "vaadin-list-box", | ||
| "main": "vaadin-list-box.js", | ||
| "module": "vaadin-list-box.js", | ||
| "repository": "vaadin/vaadin-list-box", | ||
| "keywords": [ | ||
@@ -10,7 +15,2 @@ "Vaadin", | ||
| ], | ||
| "repository": "vaadin/vaadin-list-box", | ||
| "homepage": "https://vaadin.com/components", | ||
| "name": "@vaadin/vaadin-list-box", | ||
| "version": "1.4.0", | ||
| "main": "vaadin-list-box.js", | ||
| "author": "Vaadin Ltd", | ||
@@ -21,2 +21,3 @@ "license": "Apache-2.0", | ||
| }, | ||
| "homepage": "https://vaadin.com/components", | ||
| "files": [ | ||
@@ -28,26 +29,68 @@ "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", | ||
| "check-version": "magi check-version", | ||
| "debug": "web-test-runner test/*.test.js --watch", | ||
| "dist": "rimraf dist && npm run analyze && rollup -c rollup.config.js && cp analysis.json dist", | ||
| "lint": "npm run lint:js && npm run lint:css && npm run lint:types", | ||
| "lint:css": "stylelint src/*.js theme/**/*-styles.js", | ||
| "lint:js": "eslint src theme test", | ||
| "lint:types": "tsc", | ||
| "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-item": "^2.3.0", | ||
| "@vaadin/vaadin-item": "^3.0.0-alpha1", | ||
| "@vaadin/vaadin-list-mixin": "^2.5.0", | ||
| "@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", | ||
| "@vaadin/vaadin-element-mixin": "^2.4.1" | ||
| }, | ||
| "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", | ||
| "@webcomponents/webcomponentsjs": "^2.0.0", | ||
| "wct-browser-legacy": "^1.0.1", | ||
| "@vaadin/vaadin-demo-helpers": "^3.1.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.13.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", | ||
| "typescript": "^4.1.2" | ||
| } | ||
| } |
@@ -1,11 +0,1 @@ | ||
| [](https://www.npmjs.com/package/@vaadin/vaadin-list-box) | ||
| [](https://github.com/vaadin/vaadin-list-box/releases) | ||
| [](https://www.webcomponents.org/element/vaadin/vaadin-list-box) | ||
| [](https://travis-ci.org/vaadin/vaadin-list-box) | ||
| [](https://coveralls.io/github/vaadin/vaadin-list-box?branch=master) | ||
| [](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-list-box) | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-list-box) | ||
| # <vaadin-list-box> | ||
@@ -17,16 +7,11 @@ | ||
| [<vaadin-list-box>](https://vaadin.com/components/vaadin-list-box) is a Web Component providing reusable list boxes, 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-list-box.html"> | ||
| <next-code-block></next-code-block> | ||
| </template> | ||
| </custom-element-demo> | ||
| ``` | ||
| --> | ||
| [](https://www.npmjs.com/package/@vaadin/vaadin-list-box) | ||
| [](https://www.webcomponents.org/element/vaadin/vaadin-list-box) | ||
| [](https://travis-ci.org/vaadin/vaadin-list-box) | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-list-box) | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-list-box) | ||
| [](https://discord.gg/PHmkCKC) | ||
| ```html | ||
@@ -47,27 +32,5 @@ <vaadin-list-box selected="2"> | ||
| 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-list-box`: | ||
| ```sh | ||
| bower i vaadin/vaadin-list-box --save | ||
| ``` | ||
| Once installed, import it in your application: | ||
| ```html | ||
| <link rel="import" href="bower_components/vaadin-list-box/vaadin-list-box.html"> | ||
| ``` | ||
| ### Polymer 3 and ES Modules Compatible Version | ||
| Install `vaadin-list-box`: | ||
| ```sh | ||
| npm i @vaadin/vaadin-list-box --save | ||
@@ -92,27 +55,28 @@ ``` | ||
| `theme/lumo/vaadin-list-box.html` | ||
| `theme/lumo/vaadin-list-box.js` | ||
| - The component with the Material theme: | ||
| `theme/material/vaadin-list-box.html` | ||
| `theme/material/vaadin-list-box.js` | ||
| - Alias for `theme/lumo/vaadin-list-box.html`: | ||
| - Alias for `theme/lumo/vaadin-list-box.js`: | ||
| `vaadin-list-box.html` | ||
| `vaadin-list-box.js` | ||
| ## Running demos and tests in a browser | ||
| ## Running API docs and tests in a browser | ||
| 1. Fork the `vaadin-list-box` 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-list-box` 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-list-box` 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-list-box/demo | ||
| - http://127.0.0.1:3000/components/vaadin-list-box/test | ||
| - http://127.0.0.1:3000/test/visual/list-box.html | ||
@@ -122,8 +86,11 @@ | ||
| 1. When in the `vaadin-list-box` directory, run `polymer test` | ||
| 1. When in the `vaadin-list-box` 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. | ||
@@ -130,0 +97,0 @@ |
@@ -0,24 +1,32 @@ | ||
| import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { MultiSelectListMixin } from '@vaadin/vaadin-list-mixin/vaadin-multi-select-list-mixin.js'; | ||
| import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js'; | ||
| /** | ||
| * 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-list-box.js | ||
| * Fired when the `items` property changes. | ||
| */ | ||
| export type ListBoxItemsChanged = CustomEvent<{ value: Array<Element> }>; | ||
| /** | ||
| * Fired when the `selected` property changes. | ||
| */ | ||
| export type ListBoxSelectedChanged = CustomEvent<{ value: number }>; | ||
| // tslint:disable:variable-name Describing an API that's defined elsewhere. | ||
| /** | ||
| * Fired when the `selectedValues` property changes. | ||
| */ | ||
| export type ListBoxSelectedValuesChanged = CustomEvent<{ value: Array<string> }>; | ||
| import {PolymerElement} from '@polymer/polymer/polymer-element.js'; | ||
| export interface ListBoxElementEventMap { | ||
| 'items-changed': ListBoxItemsChanged; | ||
| import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| 'selected-changed': ListBoxSelectedChanged; | ||
| import {MultiSelectListMixin} from '@vaadin/vaadin-list-mixin/vaadin-multi-select-list-mixin.js'; | ||
| 'selected-values-changed': ListBoxSelectedValuesChanged; | ||
| } | ||
| import {ElementMixin} from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js'; | ||
| export interface ListBoxEventMap extends HTMLElementEventMap, ListBoxElementEventMap {} | ||
| import {html} from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| /** | ||
@@ -45,20 +53,31 @@ * `<vaadin-list-box>` is a Web Component for creating menus. | ||
| * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki) | ||
| * | ||
| * @fires {CustomEvent<Array<Element>>} items-changed | ||
| * @fires {CustomEvent<number>} selected-changed | ||
| * @fires {CustomEvent<Array<string>>} selected-values-changed | ||
| */ | ||
| declare class ListBoxElement extends | ||
| MultiSelectListMixin( | ||
| ThemableMixin( | ||
| ElementMixin( | ||
| PolymerElement))) { | ||
| focused: Element|null; | ||
| declare class ListBoxElement extends MultiSelectListMixin(ThemableMixin(ElementMixin(HTMLElement))) { | ||
| focused: Element | null; | ||
| readonly _scrollerElement: HTMLElement; | ||
| ready(): void; | ||
| addEventListener<K extends keyof ListBoxEventMap>( | ||
| type: K, | ||
| listener: (this: ListBoxElement, ev: ListBoxEventMap[K]) => void, | ||
| options?: boolean | AddEventListenerOptions | ||
| ): void; | ||
| removeEventListener<K extends keyof ListBoxEventMap>( | ||
| type: K, | ||
| listener: (this: ListBoxElement, ev: ListBoxEventMap[K]) => void, | ||
| options?: boolean | EventListenerOptions | ||
| ): void; | ||
| } | ||
| declare global { | ||
| interface HTMLElementTagNameMap { | ||
| "vaadin-list-box": ListBoxElement; | ||
| 'vaadin-list-box': ListBoxElement; | ||
| } | ||
| } | ||
| export {ListBoxElement}; | ||
| export { ListBoxElement }; |
| /** | ||
| @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 { MultiSelectListMixin } from '@vaadin/vaadin-list-mixin/vaadin-multi-select-list-mixin.js'; | ||
| import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| /** | ||
@@ -34,7 +33,10 @@ * `<vaadin-list-box>` is a Web Component for creating menus. | ||
| * | ||
| * @extends PolymerElement | ||
| * @fires {CustomEvent<Array<Element>>} items-changed | ||
| * @fires {CustomEvent<number>} selected-changed | ||
| * @fires {CustomEvent<Array<string>>} selected-values-changed | ||
| * | ||
| * @extends HTMLElement | ||
| * @mixes MultiSelectListMixin | ||
| * @mixes ThemableMixin | ||
| * @mixes ElementMixin | ||
| * @demo demo/index.html | ||
| */ | ||
@@ -44,22 +46,22 @@ class ListBoxElement extends ElementMixin(MultiSelectListMixin(ThemableMixin(PolymerElement))) { | ||
| return html` | ||
| <style> | ||
| :host { | ||
| display: flex; | ||
| } | ||
| <style> | ||
| :host { | ||
| display: flex; | ||
| } | ||
| :host([hidden]) { | ||
| display: none !important; | ||
| } | ||
| :host([hidden]) { | ||
| display: none !important; | ||
| } | ||
| [part="items"] { | ||
| height: 100%; | ||
| width: 100%; | ||
| overflow-y: auto; | ||
| -webkit-overflow-scrolling: touch; | ||
| } | ||
| </style> | ||
| <div part="items"> | ||
| <slot></slot> | ||
| </div> | ||
| `; | ||
| [part='items'] { | ||
| height: 100%; | ||
| width: 100%; | ||
| overflow-y: auto; | ||
| -webkit-overflow-scrolling: touch; | ||
| } | ||
| </style> | ||
| <div part="items"> | ||
| <slot></slot> | ||
| </div> | ||
| `; | ||
| } | ||
@@ -72,3 +74,3 @@ | ||
| static get version() { | ||
| return '1.4.0'; | ||
| return '2.0.0-alpha1'; | ||
| } | ||
@@ -75,0 +77,0 @@ |
@@ -0,86 +1,69 @@ | ||
| import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
| import '@vaadin/vaadin-lumo-styles/color.js'; | ||
| import '@vaadin/vaadin-lumo-styles/spacing.js'; | ||
| import '@vaadin/vaadin-lumo-styles/style.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| const $_documentContainer = html`<dom-module id="lumo-list-box" theme-for="vaadin-list-box"> | ||
| <template> | ||
| <style> | ||
| :host { | ||
| -webkit-tap-highlight-color: transparent; | ||
| --_lumo-item-selected-icon-display: var(--_lumo-list-box-item-selected-icon-display, block); | ||
| } | ||
| registerStyles( | ||
| 'vaadin-list-box', | ||
| css` | ||
| :host { | ||
| -webkit-tap-highlight-color: transparent; | ||
| --_lumo-item-selected-icon-display: var(--_lumo-list-box-item-selected-icon-display, block); | ||
| } | ||
| /* IE11 flexbox issue workaround (vaadin-items are flex containers with min-height) */ | ||
| [part="items"] { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
| /* Normal item */ | ||
| [part='items'] ::slotted(vaadin-item) { | ||
| -webkit-tap-highlight-color: var(--lumo-primary-color-10pct); | ||
| cursor: default; | ||
| } | ||
| [part="items"] ::slotted(*) { | ||
| flex: none; | ||
| } | ||
| [part='items'] ::slotted(vaadin-item) { | ||
| outline: none; | ||
| border-radius: var(--lumo-border-radius); | ||
| padding-left: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius) / 4)); | ||
| padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4); | ||
| } | ||
| /* Normal item */ | ||
| /* Workaround to display checkmark in IE11 when list-box is not used in dropdown-menu */ | ||
| [part='items'] ::slotted(vaadin-item)::before { | ||
| display: var(--_lumo-item-selected-icon-display); | ||
| } | ||
| [part="items"] ::slotted(vaadin-item) { | ||
| -webkit-tap-highlight-color: var(--lumo-primary-color-10pct); | ||
| cursor: default; | ||
| } | ||
| /* Hovered item */ | ||
| /* TODO a workaround until we have "focus-follows-mouse". After that, use the hover style for focus-ring as well */ | ||
| [part='items'] ::slotted(vaadin-item:hover:not([disabled])) { | ||
| background-color: var(--lumo-primary-color-10pct); | ||
| } | ||
| [part="items"] ::slotted(vaadin-item) { | ||
| outline: none; | ||
| border-radius: var(--lumo-border-radius); | ||
| padding-left: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius) / 4)); | ||
| padding-right: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4); | ||
| } | ||
| /* Focused item */ | ||
| [part='items'] ::slotted([focus-ring]:not([disabled])) { | ||
| box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct); | ||
| } | ||
| /* Workaround to display checkmark in IE11 when list-box is not used in dropdown-menu */ | ||
| [part="items"] ::slotted(vaadin-item)::before { | ||
| display: var(--_lumo-item-selected-icon-display); | ||
| @media (pointer: coarse) { | ||
| [part='items'] ::slotted(vaadin-item:hover:not([disabled])) { | ||
| background-color: transparent; | ||
| } | ||
| /* Hovered item */ | ||
| /* TODO a workaround until we have "focus-follows-mouse". After that, use the hover style for focus-ring as well */ | ||
| [part="items"] ::slotted(vaadin-item:hover:not([disabled])) { | ||
| background-color: var(--lumo-primary-color-10pct); | ||
| [part='items'] ::slotted([focus-ring]:not([disabled])) { | ||
| box-shadow: none; | ||
| } | ||
| } | ||
| /* Focused item */ | ||
| /* Dividers */ | ||
| [part='items'] ::slotted(hr) { | ||
| height: 1px; | ||
| border: 0; | ||
| padding: 0; | ||
| margin: var(--lumo-space-s) var(--lumo-border-radius); | ||
| background-color: var(--lumo-contrast-10pct); | ||
| } | ||
| [part="items"] ::slotted([focus-ring]:not([disabled])) { | ||
| box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct); | ||
| } | ||
| @media (pointer: coarse) { | ||
| [part="items"] ::slotted(vaadin-item:hover:not([disabled])) { | ||
| background-color: transparent; | ||
| } | ||
| [part="items"] ::slotted([focus-ring]:not([disabled])) { | ||
| box-shadow: none; | ||
| } | ||
| } | ||
| /* Easily add section dividers */ | ||
| [part="items"] ::slotted(hr) { | ||
| height: 1px; | ||
| border: 0; | ||
| padding: 0; | ||
| margin: var(--lumo-space-s) var(--lumo-border-radius); | ||
| background-color: var(--lumo-contrast-10pct); | ||
| } | ||
| /* RTL specific styles */ | ||
| :host([dir="rtl"]) [part="items"] ::slotted(vaadin-item) { | ||
| padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4); | ||
| padding-right: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius) / 4)); | ||
| } | ||
| </style> | ||
| </template> | ||
| </dom-module>`; | ||
| document.head.appendChild($_documentContainer.content); | ||
| /* RTL specific styles */ | ||
| :host([dir='rtl']) [part='items'] ::slotted(vaadin-item) { | ||
| padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4); | ||
| padding-right: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius) / 4)); | ||
| } | ||
| `, | ||
| { moduleId: 'lumo-list-box' } | ||
| ); |
@@ -0,70 +1,54 @@ | ||
| 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 { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| const $_documentContainer = html`<dom-module id="material-list-box" theme-for="vaadin-list-box"> | ||
| <template> | ||
| <style> | ||
| :host { | ||
| -webkit-tap-highlight-color: transparent; | ||
| --_material-item-selected-icon-display: block; | ||
| } | ||
| registerStyles( | ||
| 'vaadin-list-box', | ||
| css` | ||
| :host { | ||
| -webkit-tap-highlight-color: transparent; | ||
| --_material-item-selected-icon-display: block; | ||
| } | ||
| /* ShadyCSS workaround */ | ||
| [part="items"] ::slotted(vaadin-item)::before { | ||
| display: block; | ||
| } | ||
| [part='items'] ::slotted(*) { | ||
| cursor: default; | ||
| } | ||
| /* IE11 flexbox fix (https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) */ | ||
| [part="items"] { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: stretch; | ||
| } | ||
| [part='items'] ::slotted(vaadin-item) { | ||
| min-height: 36px; | ||
| padding: 8px 32px 8px 10px; | ||
| font-size: var(--material-small-font-size); | ||
| line-height: 24px; | ||
| } | ||
| [part="items"] ::slotted(*) { | ||
| cursor: default; | ||
| } | ||
| [part='items'] ::slotted(vaadin-item:hover:not([disabled])) { | ||
| background-color: var(--material-secondary-background-color); | ||
| } | ||
| [part="items"] ::slotted(vaadin-item) { | ||
| min-height: 36px; | ||
| padding: 8px 32px 8px 10px; | ||
| font-size: var(--material-small-font-size); | ||
| line-height: 24px; | ||
| } | ||
| [part='items'] ::slotted(vaadin-item[focused]:not([disabled])) { | ||
| background-color: var(--material-divider-color); | ||
| } | ||
| [part="items"] ::slotted(vaadin-item:hover:not([disabled])) { | ||
| background-color: var(--material-secondary-background-color); | ||
| @media (pointer: coarse) { | ||
| [part='items'] ::slotted(vaadin-item:hover:not([disabled])), | ||
| [part='items'] ::slotted(vaadin-item[focused]:not([disabled])) { | ||
| background-color: transparent; | ||
| } | ||
| } | ||
| [part="items"] ::slotted(vaadin-item[focused]:not([disabled])) { | ||
| background-color: var(--material-divider-color); | ||
| } | ||
| /* Dividers */ | ||
| [part='items'] ::slotted(hr) { | ||
| height: 1px; | ||
| border: 0; | ||
| padding: 0; | ||
| margin: 8px 0; | ||
| background-color: var(--material-divider-color); | ||
| } | ||
| @media (pointer: coarse) { | ||
| [part="items"] ::slotted(vaadin-item:hover:not([disabled])), | ||
| [part="items"] ::slotted(vaadin-item[focused]:not([disabled])) { | ||
| background-color: transparent; | ||
| } | ||
| } | ||
| /* Easily add section dividers */ | ||
| [part="items"] ::slotted(hr) { | ||
| height: 1px; | ||
| border: 0; | ||
| padding: 0; | ||
| margin: 8px 0; | ||
| background-color: var(--material-divider-color); | ||
| } | ||
| /* RTL specific styles */ | ||
| :host([dir="rtl"]) [part="items"] ::slotted(vaadin-item) { | ||
| padding: 8px 10px 8px 32px; | ||
| } | ||
| </style> | ||
| </template> | ||
| </dom-module>`; | ||
| document.head.appendChild($_documentContainer.content); | ||
| /* RTL specific styles */ | ||
| :host([dir='rtl']) [part='items'] ::slotted(vaadin-item) { | ||
| padding: 8px 10px 8px 32px; | ||
| } | ||
| `, | ||
| { moduleId: 'material-list-box' } | ||
| ); |
@@ -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-list-box.js | ||
| */ | ||
| // tslint:disable:variable-name Describing an API that's defined elsewhere. | ||
| export * from './src/vaadin-list-box.js'; |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.77%
26953
- Dev dependency count
- increased by550%
26
- Lines of code
- decreased by-4.33%
287
- Number of low quality alerts
- increased byInfinity%
1
- Number of lines in readme file
- decreased by-23.24%
109
Dependency changes
+ Added@vaadin/vaadin-item@3.0.0(transitive)
- Removed@vaadin/vaadin-item@2.3.0(transitive)