Socket
Socket
Sign inDemoInstall

@vaadin/input-container

Package Overview
Dependencies
Maintainers
19
Versions
371
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/input-container - npm Package Compare versions

Comparing version 22.0.0-alpha1 to 22.0.0-alpha10

56

package.json
{
"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;

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc