@neovici/cosmoz-input 3.8.0 → 3.9.0

package/dist/cosmoz-input.js

@@ -5,6 +5,7 @@ import { component } from 'haunted';
 import { useInput } from './use-input';
 import { useAllowedPattern } from './use-allowed-pattern';
 import { render, attributes } from './render';
+import { getPlaceholder } from './util';
 const observedAttributes = [
     'type',
     'pattern',
@@ -16,7 +17,7 @@ const observedAttributes = [
     ...attributes,
 ];
 export const Input = (host) => {
-    const { type = 'text', pattern, allowedPattern, autocomplete, value, placeholder, readonly, disabled, min, max, step, maxlength, } = host, { onChange, onFocus, onInput } = useInput(host);
+    const { type = 'text', pattern, allowedPattern, autocomplete, value, readonly, disabled, min, max, step, maxlength, } = host, { onChange, onFocus, onInput } = useInput(host);
     const onBeforeInput = useAllowedPattern(allowedPattern);
     return render(html `
 			<input
@@ -26,7 +27,7 @@ export const Input = (host) => {
 				type=${type}
 				pattern=${ifDefined(pattern)}
 				autocomplete=${ifDefined(autocomplete)}
-				placeholder=${placeholder || ' '}
+				placeholder=${getPlaceholder(host)}
 				?readonly=${readonly}
 				?aria-disabled=${disabled}
 				?disabled=${disabled}

package/dist/styles.js

@@ -102,8 +102,10 @@ export const styles = css `
 		transform: translateY(calc(var(--label-scale) * -100%))
 			scale(var(--label-scale));
 	}
-	#input:not(:placeholder-shown):focus + label {
+	:host(:not(always-float-label):focus-within) #input::placeholder,
+	:host(:focus-within) label {
 		color: var(--focused-color);
+		opacity: 1;
 	}
 
 	.line {
@@ -137,7 +139,7 @@ export const styles = css `
 	}
 
 	:host([no-label-float]) .float,
-	:host([no-label-float]) #input:not(:placeholder-shown) + label {
+	:host([no-label-float]) label {
 		display: none;
 	}
 
@@ -190,7 +192,7 @@ export const styles = css `
 		width: var(--width);
 		min-width: calc(2ch + 0.25em);
 	}
-	:host([type="color"]) .line {
+	:host([type='color']) .line {
 		display: none;
 	}
 `;

package/dist/util.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    noLabelFloat?: boolean;
+    placeholder?: string;
+}
+export declare const getPlaceholder: ({ placeholder, noLabelFloat, label }: Props) => string;
+export {};

package/dist/util.js

@@ -0,0 +1,3 @@
+export const getPlaceholder = ({ placeholder, noLabelFloat, label }) => {
+    return (noLabelFloat ? label : undefined) || placeholder || ' ';
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-input",
-	"version": "3.8.0",
+	"version": "3.9.0",
 	"description": "A input web component",
 	"keywords": [
 		"lit-html",