@neovici/cosmoz-input 3.18.0 → 4.1.0

package/dist/cosmoz-input.js

@@ -2,7 +2,7 @@ import { html } from 'lit-html';
 import { live } from 'lit-html/directives/live.js';
 import { ref } from 'lit-html/directives/ref.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { component } from 'haunted';
+import { component } from '@pionjs/pion';
 import { useInput } from './use-input';
 import { useAllowedPattern } from './use-allowed-pattern';
 import { render, attributes } from './render';

package/dist/cosmoz-textarea.js

@@ -2,7 +2,7 @@ import { html } from 'lit-html'; // eslint-disable-line object-curly-newline
 import { live } from 'lit-html/directives/live.js';
 import { ref } from 'lit-html/directives/ref.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { component } from 'haunted';
+import { component } from '@pionjs/pion';
 import { useInput } from './use-input';
 import { useAutoHeight } from './use-auto-height';
 import { render, attributes } from './render';

package/dist/styles.js

@@ -34,13 +34,17 @@ export const styles = css `
 			--cosmoz-input-focused-color,
 			var(--primary-color, #3f51b5)
 		);
-
+		--contour-color: var(--line-color);
+		--contour-size: var(--cosmoz-input-contour-size);
 		display: block;
 		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;
-
+		transition:
+			transform 0.25s,
+			width 0.25s;
+		transform-origin: left top;
 		max-height: var(--cosmoz-input-max-height);
 		font-size: var(--font-size);
 		line-height: var(--line-height);
@@ -62,8 +66,8 @@ export const styles = css `
 		align-items: center;
 		position: relative;
 		background: var(--bg);
-		border: var(--cosmoz-input-border, none);
-		border-radius: var(--cosmoz-input-border-radius, 0px);
+		border-radius: var(--cosmoz-input-border-radius);
+		box-shadow: 0 0 0 var(--contour-size) var(--contour-color);
 	}
 
 	.control {
@@ -95,7 +99,9 @@ export const styles = css `
 		top: 0;
 		left: 0;
 		width: var(--cosmoz-input-label-width, 100%);
-		transition: transform 0.25s, width 0.25s;
+		transition:
+			transform 0.25s,
+			width 0.25s;
 		transform-origin: left top;
 		color: var(--color);
 		white-space: nowrap;
@@ -103,13 +109,15 @@ export const styles = css `
 		text-overflow: ellipsis;
 		text-transform: var(--cosmoz-input-label-text-transform);
 		font-weight: var(--cosmoz-input-label-font-weight);
+		padding: var(--cosmoz-input-label-padding);
 	}
 
 	:host([always-float-label]) label,
 	#input:not(:placeholder-shown) + label {
+		--cosmoz-input-label-padding: 0 1px;
 		transform: translateY(calc(var(--label-scale) * -100%))
 			scale(var(--label-scale));
-		background-color: var(--cosmoz-input-no-placeholder-label-bg, transparent);
+		background-color: var(--cosmoz-input-floating-label-bg, transparent);
 	}
 	:host(:not(always-float-label):focus-within) #input::placeholder,
 	:host(:focus-within) label {
@@ -121,11 +129,11 @@ export const styles = css `
 		padding-top: 1px;
 		border-bottom: 1px solid var(--line-color);
 		position: relative;
+		display: var(--cosmoz-input-line-display, block);
 	}
 	.line::before {
 		content: '';
 		position: absolute;
-		display: var(--cosmoz-input-line-display, block);
 		border-bottom: 2px solid transparent;
 		border-bottom-color: inherit;
 		left: 0;
@@ -144,7 +152,8 @@ export const styles = css `
 	}
 
 	:host(:focus-within) {
-		border-color: var(--focused-color);
+		--contour-color: var(--focused-color);
+		caret-color: var(--focused-color);
 	}
 
 	:host([disabled]) .line {
@@ -165,6 +174,12 @@ export const styles = css `
 		position: absolute;
 		max-width: 100%;
 	}
+
+	:host([invalid]) {
+		--contour-color: var(--invalid-color);
+		caret-color: var(--invalid-color);
+	}
+
 	:host([invalid]) label,
 	.error {
 		color: var(--invalid-color);

package/dist/use-allowed-pattern.js

@@ -1,4 +1,4 @@
-import { useMemo } from 'haunted';
+import { useMemo } from '@pionjs/pion';
 export const useAllowedPattern = (allowedPattern) => useMemo(() => {
     if (allowedPattern == null) {
         return;

package/dist/use-auto-height.js

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'haunted';
+import { useEffect, useMemo } from '@pionjs/pion';
 const autoheight = (input) => {
     input.style.height = '';
     input.style.height = `${input.scrollHeight}px`;

package/dist/use-input.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'haunted';
+import { useCallback, useEffect, useRef } from '@pionjs/pion';
 import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api';
 import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
 export const useInput = (host) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-input",
-	"version": "3.18.0",
+	"version": "4.1.0",
 	"description": "A input web component",
 	"keywords": [
 		"lit-html",
@@ -67,20 +67,20 @@
 		"./textarea": "./dist/cosmoz-textarea.js"
 	},
 	"dependencies": {
-		"@neovici/cosmoz-utils": "^5.1.0",
-		"haunted": "^5.0.0",
+		"@neovici/cosmoz-utils": "^6.0.0",
+		"@pionjs/pion": "^2.0.0",
 		"lit-html": "^2.0.0 || ^3.0.0"
 	},
 	"devDependencies": {
 		"@commitlint/cli": "^18.0.0",
 		"@commitlint/config-conventional": "^18.0.0",
 		"@neovici/cfg": "^1.13.1",
-		"@open-wc/testing": "^3.0.0",
+		"@open-wc/testing": "^4.0.0",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
 		"@storybook/storybook-deployer": "^2.8.5",
 		"@types/mocha": "^10.0.3",
-		"@web/dev-server-storybook": "^1.0.0",
+		"@web/dev-server-storybook": "^2.0.0",
 		"husky": "^8.0.0",
 		"semantic-release": "^22.0.0",
 		"sinon": "^17.0.0"