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

@neovici/cosmoz-input

Package Overview
Dependencies
Maintainers
4
Versions
61
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@neovici/cosmoz-input - npm Package Compare versions

Comparing version 1.6.1 to 1.6.2

2

package.json
{
"name": "@neovici/cosmoz-input",
"version": "1.6.1",
"version": "1.6.2",
"description": "A input web component",

@@ -5,0 +5,0 @@ "keywords": [

@@ -5,3 +5,5 @@ import { html, nothing } from 'lit-html';

export const render = (control, { label, invalid, errorMessage }) => html`
<style>${ styles }</style>
<style>
${styles}
</style>
<div class="float" part="float">&nbsp;</div>

@@ -11,4 +13,6 @@ <div class="wrap" part="wrap">

<div class="control" part="control">
${ control }
${ label ? html`<label for="input" part="label">${ label }</label>` : nothing }
${control}
${label
? html`<label for="input" part="label">${label}</label>`
: nothing}
</div>

@@ -18,4 +22,6 @@ <slot name="suffix"></slot>

<div class="line" part="line"></div>
${ invalid && errorMessage ? html`<div class="error" part="error">${ errorMessage }</div>` : nothing }
`,
${invalid && errorMessage
? html`<div class="error" part="error">${errorMessage}</div>`
: nothing}
`,
attributes = [

@@ -27,3 +33,3 @@ 'autocomplete',

'no-label-float',
'always-float-label'
'always-float-label',
];

@@ -1,18 +0,41 @@

export const styles = `
import { tagged as css } from '@neovici/cosmoz-utils';
export const styles = css`
:host {
--font-family: var(--cosmoz-input-font-family, var(--paper-font-subhead_-_font-family, 'Roboto', 'Noto', sans-serif));
--font-size: var(--cosmoz-input-font-size, var(--paper-font-subhead_-_font-size, 16px));
--line-height: var(--cosmoz-input-line-height, var(--paper-font-subhead_-_line-height, 24px));
--font-family: var(
--cosmoz-input-font-family,
var(--paper-font-subhead_-_font-family, "Roboto", "Noto", sans-serif)
);
--font-size: var(
--cosmoz-input-font-size,
var(--paper-font-subhead_-_font-size, 16px)
);
--line-height: var(
--cosmoz-input-line-height,
var(--paper-font-subhead_-_line-height, 24px)
);
--label-scale: var(--cosmoz-input-label-scale, 0.75);
--disabled-opacity: var(--cosmoz-input-disabled-opacity, var(--paper-input-container-disabled_-_opacity, 0.33));
--disabled-line-opacity: var(--cosmoz-input-disabled-line-opacity, var(--paper-input-container-underline-disabled_-_opacity, 1));
--invalid-color: var(--cosmoz-input-invalid-color, var(--paper-input-container-invalid-color, var(--error-color, #fc5c5b)));
--disabled-opacity: var(
--cosmoz-input-disabled-opacity,
var(--paper-input-container-disabled_-_opacity, 0.33)
);
--disabled-line-opacity: var(
--cosmoz-input-disabled-line-opacity,
var(--paper-input-container-underline-disabled_-_opacity, 1)
);
--invalid-color: var(
--cosmoz-input-invalid-color,
var(--paper-input-container-invalid-color, var(--error-color, #fc5c5b))
);
--bg: var(--cosmoz-input-background);
--focused-bg: var(--cosmoz-input-focused-background, var(--bg));
--color: var(--cosmoz-input-color, var(--secondary-text-color, #737373));
--focused-color: var(--cosmoz-input-focused-color, var(--primary-color, #3f51b5));
--focused-color: var(
--cosmoz-input-focused-color,
var(--primary-color, #3f51b5)
);
display: block;
padding: 8px 0;
padding: var(--cosmoz-input-padding, 8px 0);
padding-top: var(--paper-input-container_-_padding-top, 8px);
padding-bottom: var(--paper-input-container_-_padding-bottom, 8px);
position: relative;

@@ -76,3 +99,4 @@

#input:not(:placeholder-shown) + label {
transform: translateY(calc(var(--label-scale) * -100%)) scale(var(--label-scale));
transform: translateY(calc(var(--label-scale) * -100%))
scale(var(--label-scale));
}

@@ -89,3 +113,3 @@ #input:not(:placeholder-shown):focus + label {

.line::before {
content: '';
content: "";
position: absolute;

@@ -98,3 +122,3 @@ display: block;

top: 0;
transform: scale3d(0,1,1);
transform: scale3d(0, 1, 1);
transform-origin: center center;

@@ -108,3 +132,3 @@ z-index: 1;

:host(:focus-within) .line {
border-bottom-color: var(--focused-color);
border-bottom-color: var(--focused-color);
}

@@ -117,3 +141,3 @@ :host([disabled]) .line {

:host([no-label-float]) .float,
:host([no-label-float]) #input:not(:placeholder-shown) + label {
:host([no-label-float]) #input:not(:placeholder-shown) + label {
display: none;

@@ -130,3 +154,4 @@ }

}
:host([invalid]) label, .error {
:host([invalid]) label,
.error {
color: var(--invalid-color);

@@ -133,0 +158,0 @@ }

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