equinox-web-components
Version:
Equinox design for the web using StencilJS
1 lines • 2 kB
JavaScript
System.register(["./p-33ebdb75.system.js"],(function(e){"use strict";var r,t,n,p;return{setters:[function(e){r=e.r;t=e.c;n=e.h;p=e.H}],execute:function(){var a=":host{display:-ms-flexbox;display:flex}.input-wrapper{-webkit-transition:all .3s ease;transition:all .3s ease;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:12px;padding:0 22px;background:var(--gray-100);border-radius:3px}.input-wrapper input{color:var(--gray-500)}.input-wrapper.outlined{background:none;-webkit-box-shadow:0 0 0 1px var(--gray-300);box-shadow:0 0 0 1px var(--gray-300)}.input-wrapper.ghost{background:none}.input-wrapper:hover{-webkit-box-shadow:0 0 0 1px var(--gray-400);box-shadow:0 0 0 1px var(--gray-400)}.input-wrapper:focus-within{-webkit-box-shadow:0 0 0 1px var(--primary);box-shadow:0 0 0 1px var(--primary)}.input-wrapper:focus-within input{color:var(--primary)}.input-wrapper.rounded{border-radius:100px}.input-wrapper.xs{height:26px}.input-wrapper.sm{height:32px}.input-wrapper.md{height:38px}.input-wrapper.lg{height:42px}.input-wrapper.xl{height:46px}.input-wrapper.xxl{height:56px}.input-wrapper input{background:transparent;outline:none;border:none}";var i=e("e_input",function(){function e(e){var p=this;r(this,e);this.valueChanged=t(this,"valueChanged",7);this.size="md";this.type="text";this.classes=function(){var e;return e={outlined:p.outlined,ghost:p.ghost,rounded:p.rounded},e[p.size]=true,e["input-wrapper"]=true,e};this.renderIcon=function(e){return e&&n("e-icon",{size:"18px",icon:e})}}e.prototype.valueChangedHandler=function(e){this.value=e.target?e.target.value:null;this.valueChanged.emit(this.value)};e.prototype.render=function(){var e=this;return n(p,null,n("div",{class:this.classes()},n("slot",{name:"prepend-icon"},this.renderIcon(this.prependIcon)),n("input",{placeholder:this.placeholder,value:this.value,onInput:function(r){return e.valueChangedHandler(r)}}),n("slot",{name:"append-icon"},this.renderIcon(this.appendIcon))))};return e}());i.style=a}}}));