Socket
Socket
Sign inDemoInstall

@fooloomanzoo/input-picker-pattern

Package Overview
Dependencies
6
Maintainers
1
Versions
32
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 3.0.5 to 3.0.6

150

dropdown-style.js

@@ -1,94 +0,92 @@

import '../../@polymer/polymer/lib/elements/dom-module.js';
import { html } from '../../@polymer/polymer/lib/utils/html-tag.js';/*
import { PolymerElement, html } from '../../@polymer/polymer/polymer-element.js';
/**
`dropdown-style`
styles for used for a inner dropdown
*/
const template = html`
<dom-module id="dropdown-style">
<template>
<style>
:host {
--computed-dropdown-background: var(--dropdown-background, var(--input-picker-background, transparent));
}
const styleElement = document.createElement('dom-module');
.dropdown {
margin: 0;
padding: 0;
position: absolute;
opacity: 0;
background: var(--computed-dropdown-background);
transition-duration: var(--dropdown-transition-duration, 250ms);
transition-timing-function: var(--dropdown-transition-timing-function, cubic-bezier(0.6, 1, 0.2, 1));
transition-property: opacity;
pointer-events: none;
z-index: 1;
}
styleElement.innerHTML =
`<template>
<style>
:host {
--computed-dropdown-background: var(--dropdown-background, var(--input-picker-background, transparent));
}
:host([opened]) .dropdown {
opacity: 1;
pointer-events: all;
}
.dropdown {
margin: 0;
padding: 0;
position: absolute;
opacity: 0;
background: var(--computed-dropdown-background);
transition-duration: var(--dropdown-transition-duration, 250ms);
transition-timing-function: var(--dropdown-transition-timing-function, cubic-bezier(0.6, 1, 0.2, 1));
transition-property: opacity;
pointer-events: none;
z-index: 1;
}
:host([vertical-align]) .dropdown,
:host([vertical-align="auto"]) .dropdown,
:host([vertical-align="top"]) .dropdown {
top: auto; bottom: 0;
}
:host([opened]) .dropdown {
opacity: 1;
pointer-events: all;
}
:host([vertical-align="bottom"]) .dropdown {
top: 0; bottom: auto;
}
:host([vertical-align]) .dropdown,
:host([vertical-align="auto"]) .dropdown,
:host([vertical-align="top"]) .dropdown {
top: auto; bottom: 0;
}
:host([vertical-align="middle"]) .dropdown {
top: auto; bottom: 50%;
}
:host([vertical-align="bottom"]) .dropdown {
top: 0; bottom: auto;
}
:host([horizontal-align]) .dropdown,
:host([horizontal-align="auto"]) .dropdown,
:host([horizontal-align="left"]) .dropdown {
left: 0; right: auto;
}
:host([vertical-align="middle"]) .dropdown {
top: auto; bottom: 50%;
}
:host([horizontal-align="right"]) .dropdown {
left: auto; right: 0;
}
:host([horizontal-align]) .dropdown,
:host([horizontal-align="auto"]) .dropdown,
:host([horizontal-align="left"]) .dropdown {
left: 0; right: auto;
}
:host([horizontal-align][vertical-align]) .dropdown {
transform: translateY(100%);
}
:host([horizontal-align="right"]) .dropdown {
left: auto; right: 0;
}
:host([horizontal-align="center"][vertical-align]) .dropdown {
left: 50%; right: auto;
transform: translate(-50%, 100%);
}
:host([horizontal-align][vertical-align]) .dropdown {
transform: translateY(100%);
}
:host([horizontal-align][vertical-align="bottom"]) .dropdown {
transform: translateY(-100%);
}
:host([horizontal-align="center"][vertical-align]) .dropdown {
left: 50%; right: auto;
transform: translate(-50%, 100%);
}
:host([horizontal-align="center"][vertical-align="bottom"]) .dropdown {
transform: translate(-50%, -100%);
}
:host([horizontal-align][vertical-align="bottom"]) .dropdown {
transform: translateY(-100%);
}
:host([horizontal-align][vertical-align="middle"]) .dropdown {
left: 0; right: auto;
transform: translate(-100%, 50%);
}
:host([horizontal-align="center"][vertical-align="bottom"]) .dropdown {
transform: translate(-50%, -100%);
}
:host([horizontal-align="left"][vertical-align="middle"]) .dropdown {
left: auto; right: 0;
transform: translate(100%, 50%);
}
:host([horizontal-align][vertical-align="middle"]) .dropdown {
left: 0; right: auto;
transform: translate(-100%, 50%);
}
:host([horizontal-align="center"][vertical-align="middle"]) .dropdown {
position: fixed;
top: 50%; left: 50%; bottom: auto; right: auto;
transform: translate(-50%, -50%);
}
</style>
</template>
</dom-module>
`;
:host([horizontal-align="left"][vertical-align="middle"]) .dropdown {
left: auto; right: 0;
transform: translate(100%, 50%);
}
template.setAttribute('style', 'display: none;');
document.head.appendChild(template.content);
:host([horizontal-align="center"][vertical-align="middle"]) .dropdown {
position: fixed;
top: 50%; left: 50%; bottom: auto; right: auto;
transform: translate(-50%, -50%);
}
</style>
</template>`;
styleElement.register('dropdown-style');

149

dropdown-tip-style.js

@@ -1,3 +0,2 @@

import '../../@polymer/polymer/lib/elements/dom-module.js';
import { html } from '../../@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement, html } from '../../@polymer/polymer/polymer-element.js';
/*

@@ -7,84 +6,82 @@ `dropdown-style`

*/
const template = html`
<dom-module id="dropdown-tip-style">
<template>
<style>
:host {
--computed-dropdown-tip-size: var(--dropdown-tip-size, 6px);
--computed-dropdown-tip-gap: var(--dropdown-tip-gap, 12px);
--computed-dropdown-background: var(--dropdown-background, var(--input-picker-background, transparent));
}
.dropdown:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-width: var(--computed-dropdown-tip-size);
border-style: solid;
border-color: transparent transparent transparent transparent;
left: auto;
top: auto;
bottom: auto;
right: auto;
}
const styleElement = document.createElement('dom-module');
:host([dynamic-align]) .dropdown:after,
:host([no-tip]) .dropdown:after {
display: none !important;
}
styleElement.innerHTML =
`<template>
<style>
:host {
--computed-dropdown-tip-size: var(--dropdown-tip-size, 6px);
--computed-dropdown-tip-gap: var(--dropdown-tip-gap, 12px);
--computed-dropdown-background: var(--dropdown-background, var(--input-picker-background, transparent));
}
.dropdown:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-width: var(--computed-dropdown-tip-size);
border-style: solid;
border-color: transparent transparent transparent transparent;
left: auto;
top: auto;
bottom: auto;
right: auto;
}
:host([vertical-align]) .dropdown:after,
:host([vertical-align="auto"]) .dropdown:after,
:host([vertical-align="top"]) .dropdown:after,
:host([horizontal-align]) .dropdown:after,
:host([horizontal-align="auto"]) .dropdown:after,
:host([horizontal-align="left"]) .dropdown:after {
top: 0;
left: var(--computed-dropdown-tip-gap);
border-bottom-color: var(--computed-dropdown-background);
transform: translateY(-100%);
}
:host([dynamic-align]) .dropdown:after,
:host([no-tip]) .dropdown:after {
display: none !important;
}
:host([horizontal-align="right"][vertical-align]) .dropdown:after {
left: auto;
right: var(--computed-dropdown-tip-gap);
}
:host([vertical-align]) .dropdown:after,
:host([vertical-align="auto"]) .dropdown:after,
:host([vertical-align="top"]) .dropdown:after,
:host([horizontal-align]) .dropdown:after,
:host([horizontal-align="auto"]) .dropdown:after,
:host([horizontal-align="left"]) .dropdown:after {
top: 0;
left: var(--computed-dropdown-tip-gap);
border-bottom-color: var(--computed-dropdown-background);
transform: translateY(-100%);
}
:host([horizontal-align="center"][vertical-align]) .dropdown:after {
left: 50%; right: auto;
transform: translate(-50%, -100%);
}
:host([horizontal-align="right"][vertical-align]) .dropdown:after {
left: auto;
right: var(--computed-dropdown-tip-gap);
}
:host([horizontal-align][vertical-align="bottom"]) .dropdown:after {
top: auto; bottom: 0;
border-bottom-color: transparent;
border-top-color: var(--computed-dropdown-background);
transform: translateY(100%);
}
:host([horizontal-align="center"][vertical-align]) .dropdown:after {
left: 50%; right: auto;
transform: translate(-50%, -100%);
}
:host([horizontal-align][vertical-align="middle"]) .dropdown:after {
top: auto; bottom: 50%; right: 0; left: auto;
transform: translate(100%, 50%);
border-top-color: transparent;
border-bottom-color: transparent;
border-right-color: transparent;
border-left-color: var(--computed-dropdown-background);
}
:host([horizontal-align][vertical-align="bottom"]) .dropdown:after {
top: auto; bottom: 0;
border-bottom-color: transparent;
border-top-color: var(--computed-dropdown-background);
transform: translateY(100%);
}
:host([horizontal-align="left"][vertical-align="middle"]) .dropdown:after {
right: auto; left: 0;
transform: translate(-100%, 50%);
border-left-color: transparent;
border-right-color: var(--computed-dropdown-background);
}
:host([horizontal-align][vertical-align="middle"]) .dropdown:after {
top: auto; bottom: 50%; right: 0; left: auto;
transform: translate(100%, 50%);
border-top-color: transparent;
border-bottom-color: transparent;
border-right-color: transparent;
border-left-color: var(--computed-dropdown-background);
}
:host([horizontal-align="center"][vertical-align="middle"]) .dropdown:after {
border: none;
}
</style>
</template>
</dom-module>
`;
:host([horizontal-align="left"][vertical-align="middle"]) .dropdown:after {
right: auto; left: 0;
transform: translate(-100%, 50%);
border-left-color: transparent;
border-right-color: var(--computed-dropdown-background);
}
template.setAttribute('style', 'display: none;');
document.head.appendChild(template.content);
:host([horizontal-align="center"][vertical-align="middle"]) .dropdown:after {
border: none;
}
</style>
</template>`;
styleElement.register('dropdown-tip-style');

271

input-picker-shared-style.js

@@ -1,153 +0,150 @@

import '../../@polymer/polymer/lib/elements/dom-module.js';
import { html } from '../../@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement, html } from '../../@polymer/polymer/polymer-element.js';
const template = html`
<dom-module id="input-picker-shared-style">
<template>
<style>
:host {
font-family: inherit;
font-size: inherit;
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent;
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
position: relative;
box-sizing: content-box;
--input-picker-color: #dfdfdf;
--input-picker-background: #222;
--input-picker-border-radius: 0.5em;
--input-picker-padding: 0.3em;
--input-picker-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4);
--input-icon-border-radius: 0.3em;
--input-icon-padding: 0.5em;
--input-icon-height: 1em;
--input-icon-width: 1em;
--input-icon-background: transparent;
--input-cursor: pointer;
--inner-input-border-width: thin;
--inner-input-padding: 0;
--inner-input-border-radius: 0.2em;
--inner-input-focus-color: #f1f1f1;
--inner-input-focus-background: var(--primary-color, #394FE8);
--input-disabled: {
font-weight: lighter;
};
}
const styleElement = document.createElement('dom-module');
button,
select {
-moz-appearance: none;
-webkit-appearance: none;
text-align-last: var(--input-align, center);
background-image: none;
border-width: var(--inner-input-border-width, thin);
border-style: solid;
border-color: var(--inner-input-border-color, transparent);
}
styleElement.innerHTML =
`<template>
<style>
:host {
font-family: inherit;
font-size: inherit;
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent;
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
position: relative;
box-sizing: content-box;
--input-picker-color: #dfdfdf;
--input-picker-background: #222;
--input-picker-border-radius: 0.5em;
--input-picker-padding: 0.3em;
--input-picker-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4);
--input-icon-border-radius: 0.3em;
--input-icon-padding: 0.5em;
--input-icon-height: 1em;
--input-icon-width: 1em;
--input-icon-background: transparent;
--input-cursor: pointer;
--inner-input-border-width: thin;
--inner-input-padding: 0;
--inner-input-border-radius: 0.2em;
--inner-input-focus-color: #f1f1f1;
--inner-input-focus-background: var(--primary-color, #394FE8);
--input-disabled: {
font-weight: lighter;
};
}
button:focus,
button:hover,
select:focus,
select:hover {
border-width: var(--inner-input-border-width, thin);
color: var(--inner-input-focus-color, inherit);
background-color: var(--inner-input-focus-background, rgba(0,0,0,0.1));
outline: none;
@apply --input-focus;
}
button,
select {
-moz-appearance: none;
-webkit-appearance: none;
text-align-last: var(--input-align, center);
background-image: none;
border-width: var(--inner-input-border-width, thin);
border-style: solid;
border-color: var(--inner-input-border-color, transparent);
}
select:focus option,
select option {
color: var(--input-color, inherit);
background-color: var(--input-background, transparent);
outline: none;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
button:focus,
button:hover,
select:focus,
select:hover {
border-width: var(--inner-input-border-width, thin);
color: var(--inner-input-focus-color, inherit);
background-color: var(--inner-input-focus-background, rgba(0,0,0,0.1));
outline: none;
@apply --input-focus;
}
button > * {
pointer-events: none;
}
select:focus option,
select option {
color: var(--input-color, inherit);
background-color: var(--input-background, transparent);
outline: none;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
.icon {
color: inherit;
border-radius: var(--input-icon-border-radius);
padding: var(--input-icon-padding);
height: var(--input-icon-height);
width: var(--input-icon-width);
border: var(--inner-input-border-width, thin) solid transparent;
background: var(--input-icon-background);
transition-duration: var(--input-transition-duration, 250ms);
transition-timing-function: var(--input-transition-timing-function, cubic-bezier(0.6, 1, 0.2, 1));
@apply --input-icon;
box-sizing: content-box;
flex-shrink: 0;
transition-property: background-color, border-color;
}
button > * {
pointer-events: none;
}
.icon > svg {
height: 100%;
width: 100%;
fill: currentColor;
}
.icon {
color: inherit;
border-radius: var(--input-icon-border-radius);
padding: var(--input-icon-padding);
height: var(--input-icon-height);
width: var(--input-icon-width);
border: var(--inner-input-border-width, thin) solid transparent;
background: var(--input-icon-background);
transition-duration: var(--input-transition-duration, 250ms);
transition-timing-function: var(--input-transition-timing-function, cubic-bezier(0.6, 1, 0.2, 1));
@apply --input-icon;
box-sizing: content-box;
flex-shrink: 0;
transition-property: background-color, border-color;
}
.icon:focus {
border-color: var(--inner-input-focus-background);
background: transparent;
outline: none;
}
.icon > svg {
height: 100%;
width: 100%;
fill: currentColor;
}
:host(:hover) .icon:focus,
.icon:hover:focus,
.icon:active,
.icon[active] {
color: var(--inner-input-focus-color);
background-color: var(--inner-input-focus-background);
border-color: transparent !important;
@apply --input-focus;
outline: none;
}
.icon:focus {
border-color: var(--inner-input-focus-background);
background: transparent;
outline: none;
}
.icon[disabled] {
pointer-events: none;
opacity: var(--input-disabled-opacity, 0.75);
}
:host(:hover) .icon:focus,
.icon:hover:focus,
.icon:active,
.icon[active] {
color: var(--inner-input-focus-color);
background-color: var(--inner-input-focus-background);
border-color: transparent !important;
@apply --input-focus;
outline: none;
}
#picker,
#picker > * {
color: var(--input-picker-color);
background-color: var(--input-picker-background);
border-radius: var(--input-picker-border-radius);
}
.icon[disabled] {
pointer-events: none;
opacity: var(--input-disabled-opacity, 0.75);
}
#picker {
box-shadow: var(--input-picker-box-shadow);
@apply --input-picker;
display: inline-flex;
flex-flow: column nowrap;
padding: 0;
margin: 0;
}
#picker,
#picker > * {
color: var(--input-picker-color);
background-color: var(--input-picker-background);
border-radius: var(--input-picker-border-radius);
}
#picker[horizontal] {
flex-flow: row nowrap;
}
#picker {
box-shadow: var(--input-picker-box-shadow);
@apply --input-picker;
display: inline-flex;
flex-flow: column nowrap;
padding: 0;
margin: 0;
}
#picker > * {
padding: var(--input-picker-padding);
box-shadow: none !important;
box-sizing: border-box;
flex-shrink: 0;
}
#picker[horizontal] {
flex-flow: row nowrap;
}
[hidden] {
display: none !important;
}
</style>
</template>
</dom-module>
`;
#picker > * {
padding: var(--input-picker-padding);
box-shadow: none !important;
box-sizing: border-box;
flex-shrink: 0;
}
template.setAttribute('style', 'display: none;');
document.head.appendChild(template.content);
[hidden] {
display: none !important;
}
</style>
</template>`;
styleElement.register('input-picker-shared-style');

643

input-shared-style.js

@@ -1,350 +0,347 @@

import '../../@polymer/polymer/lib/elements/dom-module.js';
import { html } from '../../@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement, html } from '../../@polymer/polymer/polymer-element.js';
const template = html`
<dom-module id="input-shared-style">
<template>
<style>
:host {
display: inline-flex;
box-sizing: content-box;
}
:host([hidden]),
[hidden] {
display: none !important;
}
:host([disabled]),
[disabled] {
pointer-events: none;
}
:host(:focus),
:focus {
outline: none;
}
const styleElement = document.createElement('dom-module');
/**
* inner inputs
*/
integer-input,
number-input,
text-input {
--input-color: var(--inner-input-color, inherit);
--input-background: var(--inner-input-background, transparent);
--input-border-width: var(--inner-input-border-width, thin);
--input-border-color: var(--inner-input-border-color, transparent);
--input-border-style: var(--inner-input-border-style, dotted);
--input-padding: var(--inner-input-padding, 0);
--input-border-radius: var(--inner-input-border-radius, 0.1em);
--input-focus-color: var(--inner-input-focus-color, inherit);
--input-focus-background: var(--inner-input-focus-background, rgba(0,0,0,0.1));
--input-focus-border-color: var(--inner-input-focus-border-color, rgba(0,0,0,0.15));
--input-focus-border-style: var(--inner-input-focus-border-style, dotted);
--input-invalid-color: var(--inner-input-invalid-color, inherit);
--input-invalid-background: var(--inner-input-invalid-background, rgba(255,255,255,0.5));
--input-invalid-border-style: var(--inner-input-invalid-border-style, dotted);
--input-invalid-border-color: var(--inner-input-invalid-border-color, rgba(255,0,0,0.25));
}
styleElement.innerHTML =
`<template>
<style>
:host {
display: inline-flex;
box-sizing: content-box;
}
:host([hidden]),
[hidden] {
display: none !important;
}
:host([disabled]),
[disabled] {
pointer-events: none;
}
:host(:focus),
:focus {
outline: none;
}
/**
* general input style
*/
button,
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
color: inherit;
background: transparent;
border: var(--inner-input-border-width, thin) solid transparent;
box-sizing: border-box;
}
/**
* inner inputs
*/
integer-input,
number-input,
text-input {
--input-color: var(--inner-input-color, inherit);
--input-background: var(--inner-input-background, transparent);
--input-border-width: var(--inner-input-border-width, thin);
--input-border-color: var(--inner-input-border-color, transparent);
--input-border-style: var(--inner-input-border-style, dotted);
--input-padding: var(--inner-input-padding, 0);
--input-border-radius: var(--inner-input-border-radius, 0.1em);
--input-focus-color: var(--inner-input-focus-color, inherit);
--input-focus-background: var(--inner-input-focus-background, rgba(0,0,0,0.1));
--input-focus-border-color: var(--inner-input-focus-border-color, rgba(0,0,0,0.15));
--input-focus-border-style: var(--inner-input-focus-border-style, dotted);
--input-invalid-color: var(--inner-input-invalid-color, inherit);
--input-invalid-background: var(--inner-input-invalid-background, rgba(255,255,255,0.5));
--input-invalid-border-style: var(--inner-input-invalid-border-style, dotted);
--input-invalid-border-color: var(--inner-input-invalid-border-color, rgba(255,0,0,0.25));
}
input,
#input {
display: inline-flex;
flex-direction: row;
align-items: baseline;
color: inherit;
min-width: inherit;
max-width: inherit;
box-sizing: content-box;
border-style: var(--input-border-style, dotted);
border-width: var(--input-border-width, thin);
border-color: var(--input-border-color, rgba(0,0,0,0.25));
}
/**
* general input style
*/
button,
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
color: inherit;
background: transparent;
border: var(--inner-input-border-width, thin) solid transparent;
box-sizing: border-box;
}
button,
input,
select,
#input {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
font-style: inherit;
outline: none;
line-height: normal;
cursor: var(--input-cursor, initial);
text-align: var(--input-align, center);
transition-duration: var(--input-transition-duration, 250ms);
transition-timing-function: var(--input-transition-timing-function, cubic-bezier(0.6, 1, 0.2, 1));
transition-property: var(--input-transition-property, background-color);
padding: var(--input-padding, 0.25em);
color: var(--input-color, inherit);
background-color: var(--input-background, transparent);
border-radius: var(--input-border-radius, 0.25em);
@apply --input-style;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-backface-visibility: hidden;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);
margin: 0;
letter-spacing: inherit;
}
input,
#input {
display: inline-flex;
flex-direction: row;
align-items: baseline;
color: inherit;
min-width: inherit;
max-width: inherit;
box-sizing: content-box;
border-style: var(--input-border-style, dotted);
border-width: var(--input-border-width, thin);
border-color: var(--input-border-color, rgba(0,0,0,0.25));
}
select {
color: var(--inner-input-color, inherit);
background-color: var(--inner-input-background, transparent);
border-width: var(--inner-input-border-width, thin);
border-color: var(--inner-input-border-color, transparent);
border-style: var(--inner-input-border-style, dotted);
border-radius: var(--inner-input-border-radius, 0.1em);
}
button,
input,
select,
#input {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
font-style: inherit;
outline: none;
line-height: normal;
cursor: var(--input-cursor, initial);
text-align: var(--input-align, center);
transition-duration: var(--input-transition-duration, 250ms);
transition-timing-function: var(--input-transition-timing-function, cubic-bezier(0.6, 1, 0.2, 1));
transition-property: var(--input-transition-property, background-color);
padding: var(--input-padding, 0.25em);
color: var(--input-color, inherit);
background-color: var(--input-background, transparent);
border-radius: var(--input-border-radius, 0.25em);
@apply --input-style;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-backface-visibility: hidden;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);
margin: 0;
letter-spacing: inherit;
}
/**
* focus & hover
*/
:host(:focus) #input,
:host(:hover) #input,
#input:hover,
#input:focus,
input:focus,
input:hover {
color: var(--input-focus-color, inherit);
background-color: var(--input-focus-background, rgba(0,0,0,0.1));
border-style: var(--input-focus-border-style, dotted);
border-color: var(--input-focus-border-color, rgba(0,0,0,0.5));
border-width: var(--input-border-width, thin);
outline: none;
@apply --input-focus;
}
select {
color: var(--inner-input-color, inherit);
background-color: var(--inner-input-background, transparent);
border-width: var(--inner-input-border-width, thin);
border-color: var(--inner-input-border-color, transparent);
border-style: var(--inner-input-border-style, dotted);
border-radius: var(--inner-input-border-radius, 0.1em);
}
select:focus,
select:hover,
button:focus,
button:hover {
color: var(--inner-input-focus-color, inherit);
background-color: var(--inner-input-focus-background, rgba(0,0,0,0.1));
border-style: var(--inner-input-focus-border-style, dotted);
border-color: var(--inner-input-focus-border-color, rgba(0,0,0,0.2));
border-width: var(--inner-input-border-width, thin);
outline: none;
@apply --input-focus;
}
/**
* focus & hover
*/
:host(:focus) #input,
:host(:hover) #input,
#input:hover,
#input:focus,
input:focus,
input:hover {
color: var(--input-focus-color, inherit);
background-color: var(--input-focus-background, rgba(0,0,0,0.1));
border-style: var(--input-focus-border-style, dotted);
border-color: var(--input-focus-border-color, rgba(0,0,0,0.5));
border-width: var(--input-border-width, thin);
outline: none;
@apply --input-focus;
}
/**
* invalid
*/
:host([invalid]) #input,
:host([invalid]:hover) #input,
:host([invalid]:focus) #input,
#input:invalid,
#input:invalid:hover,
#input:invalid:focus {
color: var(--input-invalid-color, inherit);
background-color: var(--input-invalid-background, rgba(255,0,0,0.25));
border-width: var(--input-border-width, thin);
border-style: var(--input-invalid-border-style, dotted);
border-color: var(--input-invalid-border-color, rgba(255,0,0,0.25));
@apply --input-invalid;
}
select:focus,
select:hover,
button:focus,
button:hover {
color: var(--inner-input-focus-color, inherit);
background-color: var(--inner-input-focus-background, rgba(0,0,0,0.1));
border-style: var(--inner-input-focus-border-style, dotted);
border-color: var(--inner-input-focus-border-color, rgba(0,0,0,0.2));
border-width: var(--inner-input-border-width, thin);
outline: none;
@apply --input-focus;
}
/**
* disabled
*/
:host([disabled]) #input {
color: var(--input-disabled-color, inherit);
background-color: var(--input-disabled-background, transparent);
font-style: var(--input-disabled-font-style, oblique);
opacity: var(--input-disabled-opacity, 0.75);
@apply --input-disabled;
--input-placeholder-opacity: 1;
pointer-events: none;
}
/**
* invalid
*/
:host([invalid]) #input,
:host([invalid]:hover) #input,
:host([invalid]:focus) #input,
#input:invalid,
#input:invalid:hover,
#input:invalid:focus {
color: var(--input-invalid-color, inherit);
background-color: var(--input-invalid-background, rgba(255,0,0,0.25));
border-width: var(--input-border-width, thin);
border-style: var(--input-invalid-border-style, dotted);
border-color: var(--input-invalid-border-color, rgba(255,0,0,0.25));
@apply --input-invalid;
}
/**
* reset button
*/
#input .reset {
display: block;
cursor: pointer;
border-width: var(--inner-input-border-width, thin);
border-style: var(--inner-input-border-style, dotted);
border-color: var(--inner-input-border-color, transparent);
box-sizing: content-box;
opacity: 0;
color: inherit;
background-color: transparent;
transition-property: background, opacity;
height: 1em;
width: 1em;
border-radius: 50%;
padding: 0.15em;
margin: 0 2px;
align-self: center;
}
#input .reset > svg {
height: 100%;
width: 100%;
fill: currentColor;
}
#input .reset:focus,
#input .reset:hover {
border-style: var(--inner-input-focus-border-style, dotted);
outline: none;
}
#input .reset:focus,
#input:hover .reset {
opacity: 0.5;
}
#input .reset:hover {
opacity: 1;
color: var(--inner-input-focus-color, inherit);
background-color: var(--inner-input-focus-background, rgba(0,0,0,0.1));
}
#input .reset:focus {
border-color: var(--inner-input-focus-border-color, var(--inner-input-focus-background, rgba(0,0,0,0.2)));
}
:host([hide-reset-button]) #input .reset {
display: none;
}
/**
* placeholder
*/
::-webkit-input-placeholder,
::-moz-placeholder,
:-moz-placeholder,
::placeholder {
color: currentColor;
opacity: var(--input-placeholder-opacity, 0.5);
text-align: var(--input-placeholder-align, center);
}
/**
* disabled
*/
:host([disabled]) #input {
color: var(--input-disabled-color, inherit);
background-color: var(--input-disabled-background, transparent);
font-style: var(--input-disabled-font-style, oblique);
opacity: var(--input-disabled-opacity, 0.75);
@apply --input-disabled;
--input-placeholder-opacity: 1;
pointer-events: none;
}
:-ms-input-placeholder {
color: currentColor !important;
opacity: var(--input-placeholder-opacity, 0.5) !important;
}
/**
* reset button
*/
#input .reset {
display: block;
cursor: pointer;
border-width: var(--inner-input-border-width, thin);
border-style: var(--inner-input-border-style, dotted);
border-color: var(--inner-input-border-color, transparent);
box-sizing: content-box;
opacity: 0;
color: inherit;
background-color: transparent;
transition-property: background, opacity;
height: 1em;
width: 1em;
border-radius: 50%;
padding: 0.15em;
margin: 0 2px;
align-self: center;
}
#input .reset > svg {
height: 100%;
width: 100%;
fill: currentColor;
}
#input .reset:focus,
#input .reset:hover {
border-style: var(--inner-input-focus-border-style, dotted);
outline: none;
}
#input .reset:focus,
#input:hover .reset {
opacity: 0.5;
}
#input .reset:hover {
opacity: 1;
color: var(--inner-input-focus-color, inherit);
background-color: var(--inner-input-focus-background, rgba(0,0,0,0.1));
}
#input .reset:focus {
border-color: var(--inner-input-focus-border-color, var(--inner-input-focus-background, rgba(0,0,0,0.2)));
}
:host([hide-reset-button]) #input .reset {
display: none;
}
/**
* placeholder
*/
::-webkit-input-placeholder,
::-moz-placeholder,
:-moz-placeholder,
::placeholder {
color: currentColor;
opacity: var(--input-placeholder-opacity, 0.5);
text-align: var(--input-placeholder-align, center);
}
::-ms-input-placeholder {
color: currentColor !important;
opacity: var(--input-placeholder-opacity, 0.5) !important;
}
:-ms-input-placeholder {
color: currentColor !important;
opacity: var(--input-placeholder-opacity, 0.5) !important;
}
::placeholder {
@apply --input-placeholder;
}
::-ms-input-placeholder {
color: currentColor !important;
opacity: var(--input-placeholder-opacity, 0.5) !important;
}
:host([invalid]) ::-webkit-input-placeholder,
:host([invalid]) ::-moz-placeholder,
:host([invalid]) :-moz-placeholder,
:host([invalid]) ::placeholder {
color: var(--input-invalid-color, currentColor);
}
::placeholder {
@apply --input-placeholder;
}
:host([invalid]) :-ms-input-placeholder {
color: var(--input-invalid-color, currentColor) !important;
}
:host([invalid]) ::-webkit-input-placeholder,
:host([invalid]) ::-moz-placeholder,
:host([invalid]) :-moz-placeholder,
:host([invalid]) ::placeholder {
color: var(--input-invalid-color, currentColor);
}
/**
* selection
*/
::-moz-selection {
color: inherit;
background-color: transparent;
}
:hover::-moz-selection {
color: var(--input-selection-color, inherit);
background-color: var(--input-selection-background, rgba(255,255,255,0.5));
}
::selection {
color: inherit;
background-color: transparent;
}
:hover::selection {
color: var(--input-selection-color, inherit);
background-color: var(--input-selection-background, rgba(255,255,255,0.5));
}
:host([invalid]) :-ms-input-placeholder {
color: var(--input-invalid-color, currentColor) !important;
}
/**
* browser specific style fixes
*/
::-moz-focus-inner {
border-width: 0;
border-style: none;
padding: 0;
}
::-moz-focusring {
border-width: 0;
border-style: none;
color: transparent !important;
text-shadow: 0 0 0 var(--input-focus-color, #000);
}
/**
* selection
*/
::-moz-selection {
color: inherit;
background-color: transparent;
}
:hover::-moz-selection {
color: var(--input-selection-color, inherit);
background-color: var(--input-selection-background, rgba(255,255,255,0.5));
}
::selection {
color: inherit;
background-color: transparent;
}
:hover::selection {
color: var(--input-selection-color, inherit);
background-color: var(--input-selection-background, rgba(255,255,255,0.5));
}
select:focus::-ms-value {
background: transparent;
}
/**
* browser specific style fixes
*/
::-moz-focus-inner {
border-width: 0;
border-style: none;
padding: 0;
}
::-moz-focusring {
border-width: 0;
border-style: none;
color: transparent !important;
text-shadow: 0 0 0 var(--input-focus-color, #000);
}
::-ms-clear,
::-ms-expand {
display: none;
}
select:focus::-ms-value {
background: transparent;
}
::-webkit-input-edit-text,
::-webkit-inner-spin-button,
::-webkit-outer-spin-button,
::-webkit-search-cancel-button,
::-webkit-clear-button {
color: currentColor;
align-self: center;
vertical-align: middle;
cursor: pointer;
}
::-ms-clear,
::-ms-expand {
display: none;
}
::-webkit-search-cancel-button,
::-webkit-clear-button {
-webkit-appearance: none;
height: 1em;
width: 1em;
opacity: 0;
transition-property: opacity;
transition-duration: var(--input-transition-duration, 250ms);
transition-timing-function: var(--input-transition-timing-function, cubic-bezier(0.6, 1, 0.2, 1));
background-image: url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20style%3D%22height%3A100%25%3B%22%3E%3Cg%3E%3Cpath%20d%3D%22M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
::-webkit-input-edit-text,
::-webkit-inner-spin-button,
::-webkit-outer-spin-button,
::-webkit-search-cancel-button,
::-webkit-clear-button {
color: currentColor;
align-self: center;
vertical-align: middle;
cursor: pointer;
}
input:hover ::-webkit-search-cancel-button,
input:hover ::-webkit-clear-button {
opacity: 0.5;
}
::-webkit-search-cancel-button,
::-webkit-clear-button {
-webkit-appearance: none;
height: 1em;
width: 1em;
opacity: 0;
transition-property: opacity;
transition-duration: var(--input-transition-duration, 250ms);
transition-timing-function: var(--input-transition-timing-function, cubic-bezier(0.6, 1, 0.2, 1));
background-image: url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20style%3D%22height%3A100%25%3B%22%3E%3Cg%3E%3Cpath%20d%3D%22M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
::-webkit-search-cancel-button:hover,
::-webkit-clear-button:hover {
opacity: 1;
}
input:hover ::-webkit-search-cancel-button,
input:hover ::-webkit-clear-button {
opacity: 0.5;
}
:host([hide-reset-button]) ::-webkit-search-cancel-button,
:host([hide-reset-button]) ::-webkit-clear-button {
display: none;
}
::-webkit-search-cancel-button:hover,
::-webkit-clear-button:hover {
opacity: 1;
}
[invisible] {
visibility: hidden;
}
</style>
</template>
</dom-module>
`;
:host([hide-reset-button]) ::-webkit-search-cancel-button,
:host([hide-reset-button]) ::-webkit-clear-button {
display: none;
}
template.setAttribute('style', 'display: none;');
document.head.appendChild(template.content);
[invisible] {
visibility: hidden;
}
</style>
</template>`;
styleElement.register('input-shared-style');

2

package.json

@@ -17,3 +17,3 @@ {

"name": "@fooloomanzoo/input-picker-pattern",
"version": "3.0.5",
"version": "3.0.6",
"authors": [

@@ -20,0 +20,0 @@ "Johannes Brautzsch <fooloomanzoo>"

SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc