@neovici/cosmoz-input
Advanced tools
Comparing version 1.6.1 to 1.6.2
{ | ||
"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"> </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 @@ } |
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
12740
330