@easymais-ui/text-input - npm Package Compare versions

Comparing version 1.0.0-next.6 to 1.0.0-next.7

package.json

 {
   "name": "@easymais-ui/text-input",
-  "version": "1.0.0-next.6",
+  "version": "1.0.0-next.7",
   "publishConfig": {
@@ -32,3 +32,3 @@ "access": "public"
   "dependencies": {
-    "@easymais-ui-css/text-input": "0.1.0-next.17",
+    "@easymais-ui-css/text-input": "0.1.0-next.19",
     "imask": "^6.4.3",
@@ -35,0 +35,0 @@ "lit": "^2.6.1"

src/text-input.css.js

@@ -1,1 +0,1 @@
-import{css}from"lit";export default css`:host{--easymais-ui-text-input-help-text-gap:var(--easymais-ui-size-35);--easymais-ui-text-input-background-color:var(--easymais-ui-color-gray-0);--easymais-ui-text-input-font-family:var(--easymais-ui-font-family-sans);--easymais-ui-text-input-l-padding-right:var(--easymais-ui-component-l-padding-right);--easymais-ui-text-input-l-padding-left:var(--easymais-ui-component-l-padding-left);--easymais-ui-text-input-l-height:var(--easymais-ui-component-l-height);--easymais-ui-text-input-m-padding-right:var(--easymais-ui-component-m-padding-right);--easymais-ui-text-input-m-padding-left:var(--easymais-ui-component-m-padding-left);--easymais-ui-text-input-m-height:var(--easymais-ui-component-m-height);--easymais-ui-text-input-s-padding-right:var(--easymais-ui-component-s-padding-right);--easymais-ui-text-input-s-padding-left:var(--easymais-ui-component-s-padding-left);--easymais-ui-text-input-s-height:var(--easymais-ui-component-s-height);--easymais-ui-text-input-border-color-default:var(--easymais-ui-color-alias-border-default);--easymais-ui-text-input-l-text-size:var(--easymais-ui-component-l-text-size);--easymais-ui-text-input-m-text-size:var(--easymais-ui-component-m-text-size);--easymais-ui-text-input-s-text-size:var(--easymais-ui-component-s-text-size);--easymais-ui-text-input-padding-right:var(--easymais-ui-text-input-m-padding-right);--easymais-ui-text-input-padding-left:var(--easymais-ui-text-input-m-padding-left);--easymais-ui-text-input-border-color-invalid:var(--easymais-ui-color-alias-border-danger);--easymais-ui-text-input-border-color-focus:var(--easymais-ui-color-alias-border-emphasized);--easymais-ui-text-input-border-width:var(--easymais-ui-size-alias-border-default);--easymais-ui-text-input-height:var(--easymais-ui-text-input-m-height);--easymais-ui-text-input-l-border-radius:var(--easymais-ui-component-l-border-radius);--easymais-ui-text-input-m-border-radius:var(--easymais-ui-component-m-border-radius);--easymais-ui-text-input-s-border-radius:var(--easymais-ui-component-s-border-radius);--easymais-ui-text-input-text-size:var(--easymais-ui-text-input-m-text-size);--easymais-ui-text-input-border-radius:var(--easymais-ui-text-input-m-border-radius)}:host #text-input{background-color:var(--easymais-ui-text-input-background-color);border-color:var(--easymais-ui-text-input-border-color-default);border-style:solid;border-width:var(--easymais-ui-text-input-border-width)}:host(:focus-within) #text-input,:host([invalid]:focus-within) #text-input{border-color:var(--easymais-ui-text-input-border-color-focus);outline:1px solid var(--easymais-ui-text-input-border-color-focus)}:host([invalid]) #text-input{border-color:var(--easymais-ui-text-input-border-color-invalid)}:host .input{color:var(--easymais-ui-text-input-text-color-default)}:host{display:flex;flex-direction:column;width:100%}:host #text-input{align-items:center;border-radius:var(--easymais-ui-text-input-border-radius);box-sizing:border-box;display:inline-flex;font-family:var(--easymais-ui-text-input-font-family);font-size:var(--easymais-ui-text-input-text-size);height:var(--easymais-ui-text-input-height);transition:outline-width .2s ease-in;width:100%}:host .input{border:none;border-radius:var(--easymais-ui-text-input-border-radius);box-sizing:border-box;font-family:var(--easymais-ui-text-input-font-family);font-size:var(--easymais-ui-text-input-text-size);height:100%;outline:none;padding-left:var(--easymais-ui-text-input-padding-left);padding-right:var(--easymais-ui-text-input-padding-right);width:100%}:host ::slotted([slot=icon]){margin-right:var(--easymais-ui-text-input-padding-right)}:host ::slotted([slot=help-text]){padding-top:var(--easymais-ui-text-input-help-text-gap)}:host([size=s]) #text-input{--easymais-ui-text-input-height:var(--easymais-ui-text-input-s-height)}:host([size=s]) #text-input .input{--easymais-ui-text-input-padding-right:var(--easymais-ui-text-input-s-padding-right);--easymais-ui-text-input-padding-left:var(--easymais-ui-text-input-s-padding-left);--easymais-ui-text-input-text-size:var(--easymais-ui-text-input-s-text-size);--easymais-ui-text-input-border-radius:var(--easymais-ui-text-input-s-border-radius)}:host([size=m]) #text-input{--easymais-ui-text-input-height:var(--easymais-ui-text-input-m-height)}:host([size=m]) #text-input .input{--easymais-ui-text-input-padding-right:var(--easymais-ui-text-input-m-padding-right);--easymais-ui-text-input-padding-left:var(--easymais-ui-text-input-m-padding-left);--easymais-ui-text-input-text-size:var(--easymais-ui-text-input-m-text-size);--easymais-ui-text-input-border-radius:var(--easymais-ui-text-input-m-border-radius)}:host([size=l]) #text-input{--easymais-ui-text-input-height:var(--easymais-ui-text-input-l-height)}:host([size=l]) #text-input .input{--easymais-ui-text-input-padding-right:var(--easymais-ui-text-input-l-padding-right);--easymais-ui-text-input-padding-left:var(--easymais-ui-text-input-l-padding-left);--easymais-ui-text-input-text-size:var(--easymais-ui-text-input-l-text-size);--easymais-ui-text-input-border-radius:var(--easymais-ui-text-input-l-border-radius)}`;
+import{css}from"lit";export default css`:host{--easymais-ui-text-input-help-text-gap:var(--easymais-ui-size-35);--easymais-ui-text-input-background-color:var(--easymais-ui-color-gray-0);--easymais-ui-text-input-font-family:var(--easymais-ui-font-family-sans);--easymais-ui-text-input-l-padding-right:var(--easymais-ui-component-l-padding-right);--easymais-ui-text-input-l-padding-left:var(--easymais-ui-component-l-padding-left);--easymais-ui-text-input-l-height:var(--easymais-ui-component-l-height);--easymais-ui-text-input-m-padding-right:var(--easymais-ui-component-m-padding-right);--easymais-ui-text-input-m-padding-left:var(--easymais-ui-component-m-padding-left);--easymais-ui-text-input-m-height:var(--easymais-ui-component-m-height);--easymais-ui-text-input-s-padding-right:var(--easymais-ui-component-s-padding-right);--easymais-ui-text-input-s-padding-left:var(--easymais-ui-component-s-padding-left);--easymais-ui-text-input-s-height:var(--easymais-ui-component-s-height);--easymais-ui-text-input-border-color-default:var(--easymais-ui-color-alias-border-default);--easymais-ui-text-input-l-text-size:var(--easymais-ui-component-l-text-size);--easymais-ui-text-input-m-text-size:var(--easymais-ui-component-m-text-size);--easymais-ui-text-input-s-text-size:var(--easymais-ui-component-s-text-size);--easymais-ui-text-input-padding-right:var(--easymais-ui-text-input-m-padding-right);--easymais-ui-text-input-padding-left:var(--easymais-ui-text-input-m-padding-left);--easymais-ui-text-input-border-color-invalid:var(--easymais-ui-color-alias-border-danger);--easymais-ui-text-input-border-color-focus:var(--easymais-ui-color-alias-border-emphasized);--easymais-ui-text-input-border-width:var(--easymais-ui-size-alias-border-default);--easymais-ui-text-input-height:var(--easymais-ui-text-input-m-height);--easymais-ui-text-input-l-border-radius:var(--easymais-ui-component-l-border-radius);--easymais-ui-text-input-m-border-radius:var(--easymais-ui-component-m-border-radius);--easymais-ui-text-input-s-border-radius:var(--easymais-ui-component-s-border-radius);--easymais-ui-text-input-text-size:var(--easymais-ui-text-input-m-text-size);--easymais-ui-text-input-border-radius:var(--easymais-ui-text-input-m-border-radius)}:host #text-input{background-color:var(--easymais-ui-text-input-background-color);border-color:var(--easymais-ui-text-input-border-color-default);border-style:solid;border-width:var(--easymais-ui-text-input-border-width)}:host(:focus-within) #text-input,:host([invalid]:focus-within) #text-input{border-color:var(--easymais-ui-text-input-border-color-focus);outline:1px solid var(--easymais-ui-text-input-border-color-focus)}:host([invalid]) #text-input{border-color:var(--easymais-ui-text-input-border-color-invalid)}:host .input{color:var(--easymais-ui-text-input-text-color-default)}:host{display:flex;flex-direction:column;width:100%}:host #text-input{align-items:center;border-radius:var(--easymais-ui-text-input-border-radius);box-sizing:border-box;display:inline-flex;font-family:var(--easymais-ui-text-input-font-family);font-size:var(--easymais-ui-text-input-text-size);height:var(--easymais-ui-text-input-height);transition:outline-width .2s ease-in;width:100%}:host .input{border:none;border-radius:var(--easymais-ui-text-input-border-radius);box-sizing:border-box;font-family:var(--easymais-ui-text-input-font-family);font-size:var(--easymais-ui-text-input-text-size);height:100%;outline:none;padding-left:var(--easymais-ui-text-input-padding-left);padding-right:var(--easymais-ui-text-input-padding-right);width:100%}:host ::slotted([slot=icon]){margin-left:var(--easymais-ui-text-input-padding-right)}:host ::slotted([slot=action-icon]){margin-right:var(--easymais-ui-text-input-padding-right)}:host ::slotted([slot=help-text]){cursor:pointer;padding-top:var(--easymais-ui-text-input-help-text-gap)}:host([size=s]) #text-input{--easymais-ui-text-input-height:var(--easymais-ui-text-input-s-height)}:host([size=s]) #text-input .input{--easymais-ui-text-input-padding-right:var(--easymais-ui-text-input-s-padding-right);--easymais-ui-text-input-padding-left:var(--easymais-ui-text-input-s-padding-left);--easymais-ui-text-input-text-size:var(--easymais-ui-text-input-s-text-size);--easymais-ui-text-input-border-radius:var(--easymais-ui-text-input-s-border-radius)}:host([size=m]) #text-input{--easymais-ui-text-input-height:var(--easymais-ui-text-input-m-height)}:host([size=m]) #text-input .input{--easymais-ui-text-input-padding-right:var(--easymais-ui-text-input-m-padding-right);--easymais-ui-text-input-padding-left:var(--easymais-ui-text-input-m-padding-left);--easymais-ui-text-input-text-size:var(--easymais-ui-text-input-m-text-size);--easymais-ui-text-input-border-radius:var(--easymais-ui-text-input-m-border-radius)}:host([size=l]) #text-input{--easymais-ui-text-input-height:var(--easymais-ui-text-input-l-height)}:host([size=l]) #text-input .input{--easymais-ui-text-input-padding-right:var(--easymais-ui-text-input-l-padding-right);--easymais-ui-text-input-padding-left:var(--easymais-ui-text-input-l-padding-left);--easymais-ui-text-input-text-size:var(--easymais-ui-text-input-l-text-size);--easymais-ui-text-input-border-radius:var(--easymais-ui-text-input-l-border-radius)}`;

src/TextInput.js

@@ -1,7 +0,8 @@
-var __decorate=this&&this.__decorate||function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)if(d=decorators[i])r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r;return c>3&&r&&Object.defineProperty(target,key,r),r};import{html}from"lit";import{property}from"lit/decorators.js";import{TextInputBase}from"./TextInputBase.js";import style from"./text-input.css.js";export class TextInput extends TextInputBase{static get styles(){return[style]}set value(value){if(value===this.value){return}const oldValue=this._value;this._value=value;this.requestUpdate("value",oldValue)}get value(){return this._value}render(){return html`
+var __decorate=this&&this.__decorate||function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)if(d=decorators[i])r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r;return c>3&&r&&Object.defineProperty(target,key,r),r};import{html}from"lit";import{property}from"lit/decorators.js";import{TextInputBase}from"./TextInputBase.js";import style from"./text-input.css.js";export class TextInput extends TextInputBase{static get styles(){return[style]}set value(value){if(value===this.value){return}const oldValue=this._value;this._value=value;this.requestUpdate("value",oldValue)}get value(){return this._value}handleActionIconClick(){this.dispatchEvent(new Event("action-icon-click",{bubbles:true,composed:true}))}render(){return html`
       <div id="text-input">
+        <slot name="icon"></slot>
         ${super.render()}
-        <slot name="icon"></slot>
+        <slot name="action-icon" @click=${this.handleActionIconClick} @keydown=${this.handleActionIconClick}></slot>
       </div>
       <slot name="help-text"></slot>
     `}constructor(){super();this.type="text";this._value="";this.size="m"}}__decorate([property({type:String})],TextInput.prototype,"value",null);__decorate([property({type:String,reflect:true})],TextInput.prototype,"size",void 0);

stories/text-input.stories.js

@@ -21,3 +21,4 @@ import{html}from"lit";import{ifDefined}from"lit/directives/if-defined.js";import"@easymais-ui/text-input/emc-text-input.js";export default{title:"TextInput",component:"emc-text-input",argTypes:{placeholder:{name:"placeholder",description:"Texto curto que descreve o valor esperado pelo TextInput",type:{name:"string",required:false}},name:{name:"name",description:"Refer\xeancia utilizada ap\xf3s o envio de formul\xe1rios",type:{name:"string",required:false}},size:{name:"size",type:{name:"string",required:false},control:"inline-radio",options:["s","m","l"]},mask:{name:"mask",description:"M\xe1scara utilizada na formata\xe7\xe3o do valor do TextInput (ex.: 000.000.000-00)",type:{name:"string",required:false}},keepMask:{name:"keep-mask",description:"Define se a sa\xedda deve conter a m\xe1scara definida na propriedade `mask`",type:{name:"boolean",required:false}},invalid:{name:"invalid",type:{name:"boolean",required:false}}}};const Template=({name,placeholder,size,mask,keepMask,invalid})=>html`
   >
-    <emc-icon slot="icon" name="check"></emc-icon>
+    <emc-icon slot="icon" name="lock"></emc-icon>
+    <emc-icon slot="action-icon" name="eye"></emc-icon>
   </emc-text-input>
@@ -24,0 +25,0 @@ `;export const WithIcon=args=>TemplateWithIcon(args);const TemplateWithHelpText=({name,placeholder,size,mask,keepMask,invalid})=>html`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48102

increased by2.2%

Lines of code

735

increased by0.27%

Dependency changes

• + Added@easymais-ui-css/text-input@0.1.0-next.19(transitive)

• - Removed@easymais-ui-css/text-input@0.1.0-next.17(transitive)

• Updated@easymais-ui-css/text-input@0.1.0-next.19