@vaadin/input-container
Advanced tools
Comparing version 22.0.0-alpha1 to 22.0.0-alpha10
{ | ||
"name": "@vaadin/input-container", | ||
"version": "22.0.0-alpha1", | ||
"version": "22.0.0-alpha10", | ||
"publishConfig": { | ||
"access": "public" | ||
}, | ||
"description": "vaadin-input-container", | ||
"license": "Apache-2.0", | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/vaadin/web-components.git", | ||
"directory": "packages/input-container" | ||
}, | ||
"author": "Vaadin Ltd", | ||
"homepage": "https://vaadin.com/components", | ||
"bugs": { | ||
"url": "https://github.com/vaadin/web-components/issues" | ||
}, | ||
"main": "vaadin-input-container.js", | ||
"module": "vaadin-input-container.js", | ||
"repository": "vaadin/web-components", | ||
"files": [ | ||
"src", | ||
"theme", | ||
"vaadin-*.d.ts", | ||
"vaadin-*.js" | ||
], | ||
"keywords": [ | ||
@@ -13,31 +32,16 @@ "Vaadin", | ||
], | ||
"author": "Vaadin Ltd", | ||
"license": "Apache-2.0", | ||
"bugs": { | ||
"url": "https://github.com/vaadin/web-components/issues" | ||
}, | ||
"homepage": "https://vaadin.com/components", | ||
"files": [ | ||
"vaadin-*.d.ts", | ||
"vaadin-*.js", | ||
"src", | ||
"theme" | ||
], | ||
"dependencies": { | ||
"@polymer/polymer": "^3.0.0", | ||
"@vaadin/vaadin-element-mixin": "^22.0.0-alpha1", | ||
"@vaadin/vaadin-lumo-styles": "^22.0.0-alpha1", | ||
"@vaadin/vaadin-material-styles": "^22.0.0-alpha1", | ||
"@vaadin/vaadin-themable-mixin": "^22.0.0-alpha1" | ||
"@vaadin/component-base": "22.0.0-alpha10", | ||
"@vaadin/vaadin-lumo-styles": "22.0.0-alpha10", | ||
"@vaadin/vaadin-material-styles": "22.0.0-alpha10", | ||
"@vaadin/vaadin-themable-mixin": "22.0.0-alpha10" | ||
}, | ||
"devDependencies": { | ||
"@esm-bundle/chai": "^4.1.5", | ||
"@vaadin/testing-helpers": "^0.2.1", | ||
"@vaadin/vaadin-icon": "^22.0.0-alpha1", | ||
"@vaadin/vaadin-icons": "^22.0.0-alpha1" | ||
"@esm-bundle/chai": "^4.3.4", | ||
"@vaadin/icon": "22.0.0-alpha10", | ||
"@vaadin/icons": "22.0.0-alpha10", | ||
"@vaadin/testing-helpers": "^0.3.0" | ||
}, | ||
"publishConfig": { | ||
"access": "public" | ||
}, | ||
"gitHead": "c9694d6549bff1f7fffb9ece26178e57fc228a51" | ||
"gitHead": "6d3055383b9c3c8306ea34c6f2e2087e63c49348" | ||
} |
@@ -7,4 +7,5 @@ /** | ||
import { PolymerElement, html } from '@polymer/polymer'; | ||
import { DirMixin } from '@vaadin/vaadin-element-mixin/vaadin-dir-mixin.js'; | ||
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js'; | ||
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
@@ -22,3 +23,3 @@ export class InputContainer extends ThemableMixin(DirMixin(PolymerElement)) { | ||
align-items: center; | ||
flex: auto; | ||
flex: 0 1 auto; | ||
} | ||
@@ -34,2 +35,7 @@ | ||
-moz-appearance: none; | ||
flex: auto; | ||
white-space: nowrap; | ||
overflow: hidden; | ||
width: 100%; | ||
height: 100%; | ||
outline: none; | ||
@@ -58,2 +64,12 @@ flex: auto; | ||
} | ||
::slotted(:is(input, textarea))::placeholder { | ||
/* Use ::slotted(input:placeholder-shown) in themes to style the placeholder. */ | ||
/* because ::slotted(...)::placeholder does not work in Safari. */ | ||
/* See the workaround at the end of this file. */ | ||
font: inherit; | ||
color: inherit; | ||
/* Override default opacity in Firefox */ | ||
opacity: 1; | ||
} | ||
</style> | ||
@@ -96,1 +112,13 @@ <slot name="prefix"></slot> | ||
customElements.define(InputContainer.is, InputContainer); | ||
const placeholderStyleWorkaround = css` | ||
/* Needed for Safari, where ::slotted(...)::placeholder does not work */ | ||
:is(input[slot='input'], textarea[slot='textarea'])::placeholder { | ||
font: inherit; | ||
color: inherit; | ||
} | ||
`; | ||
const $tpl = document.createElement('template'); | ||
$tpl.innerHTML = `<style>${placeholderStyleWorkaround.toString()}</style>`; | ||
document.head.appendChild($tpl.content); |
@@ -45,2 +45,3 @@ import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
--_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em); | ||
-webkit-mask-image: var(--_lumo-text-field-overflow-mask-image); | ||
mask-image: var(--_lumo-text-field-overflow-mask-image); | ||
@@ -82,2 +83,3 @@ } | ||
/* Slotted icons */ | ||
::slotted(iron-icon), | ||
::slotted(vaadin-icon) { | ||
@@ -90,2 +92,3 @@ color: var(--lumo-contrast-60pct); | ||
/* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */ | ||
::slotted(iron-icon[icon^='vaadin:']), | ||
::slotted(vaadin-icon[icon^='vaadin:']) { | ||
@@ -92,0 +95,0 @@ padding: 0.25em; |
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
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 repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
22955
323
0
+ Added@vaadin/component-base@22.0.0-alpha10(transitive)
+ Added@vaadin/icon@22.0.0-alpha10(transitive)
+ Added@vaadin/vaadin-lumo-styles@22.0.0-alpha10(transitive)
+ Added@vaadin/vaadin-material-styles@22.0.0-alpha10(transitive)
+ Added@vaadin/vaadin-themable-mixin@22.0.0-alpha10(transitive)
- Removed@open-wc/dedupe-mixin@1.4.0(transitive)
- Removed@vaadin/component-base@22.1.0(transitive)
- Removed@vaadin/icon@22.1.0(transitive)
- Removed@vaadin/vaadin-element-mixin@22.0.0-alpha6(transitive)
- Removed@vaadin/vaadin-lumo-styles@22.1.0(transitive)
- Removed@vaadin/vaadin-material-styles@22.1.0(transitive)
- Removed@vaadin/vaadin-themable-mixin@22.1.0(transitive)