@neovici/cosmoz-input 3.7.0 → 3.9.0

package/dist/cosmoz-input.d.ts

@@ -1,6 +1,6 @@
 import { BaseInput } from './use-input';
 import { Render, ObjectFromList } from './render';
 declare const observedAttributes: string[];
-declare type CosmozInput = HTMLElement & ObjectFromList<typeof observedAttributes> & BaseInput & Render;
+type CosmozInput = HTMLElement & ObjectFromList<typeof observedAttributes> & BaseInput & Render;
 export declare const Input: (host: CosmozInput) => import("lit-html").TemplateResult<1>;
 export {};

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/cosmoz-textarea.d.ts

@@ -1,6 +1,6 @@
 import { BaseInput } from './use-input';
 import { Render, ObjectFromList } from './render';
 declare const observedAttributes: string[];
-declare type CosmozInput = HTMLElement & ObjectFromList<typeof observedAttributes> & BaseInput & Render;
+type CosmozInput = HTMLElement & ObjectFromList<typeof observedAttributes> & BaseInput & Render;
 export declare const Textarea: (host: CosmozInput) => import("lit-html").TemplateResult<1>;
 export {};

package/dist/render.d.ts

@@ -1,4 +1,4 @@
-export declare type ObjectFromList<T extends ReadonlyArray<string>, V = string> = {
+export type ObjectFromList<T extends ReadonlyArray<string>, V = string> = {
     [K in T extends ReadonlyArray<infer U> ? U : never]: V;
 };
 export interface Render {

package/dist/render.js

@@ -9,6 +9,7 @@ export const render = (control, { label, invalid, errorMessage }) => html `
 		<div class="wrap" part="wrap">
 			<slot name="prefix"></slot>
 			<div class="control" part="control">
+				<slot name="control"></slot>
 				${control}
 				${when(label, () => html `<label for="input" part="label">${label}</label>`)}
 			</div>

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.7.0",
+	"version": "3.9.0",
 	"description": "A input web component",
 	"keywords": [
 		"lit-html",
@@ -79,10 +79,9 @@
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
 		"@storybook/storybook-deployer": "^2.8.5",
-		"@web/dev-server-storybook": "^0.5.1",
+		"@web/dev-server-storybook": "^0.7.0",
 		"husky": "^8.0.0",
-		"semantic-release": "^19.0.0",
-		"sinon": "^14.0.0",
-		"typescript": "^4.6.0"
+		"semantic-release": "^21.0.1",
+		"sinon": "^15.0.0"
 	}
 }