vicowa-web-components/dist/vicowa-input/vicowa-input.js

Various web components

import{VicowaInputBaseClass as t,validate as n}from"../vicowa-input-base/vicowa-input-base.js";import"../vicowa-string/vicowa-string.js";import i from"../utilities/translate.js";window.customElements.define("vicowa-input",class VicowaInput extends t{#t;constructor(){super()}static get properties(){return Object.assign({},super.properties,{placeholder:{type:String,value:"",reflectToAttribute:!0,observer:t=>t.#n()}})}updateTranslation(){super.updateTranslation(),this.$.input.placeholder=this.#t&&this.placeholder?this.#t.translate(this.placeholder).fetch():this.placeholder}attached(){super.attached();const t=()=>{n(this,this.value,!0),this.value=this.$.input.value};this.addAutoEventListener(this.$.input,"blur",t),this.addAutoEventListener(this.$.input,"change",t),this.addAutoEventListener(this.$.input,"input",(()=>{this.value=this.$.input.value,n(this,this.value,!1)})),this.$.input.placeholder=this.placeholder,i.addTranslationUpdatedObserver((t=>{this.#t=t,this.updateTranslation()}),this)}#n(){this.$.input.placeholder=this.placeholder,this.updateTranslation()}static get template(){return'\n\t\t\t<style>\n\t\t\t\t#label {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tmargin-right: 10px;\n\t\t\t\t\tfont-family: var(--vicowa-input-label-font-family, inherit);\n\t\t\t\t\tfont-size: var(--vicowa-input-label-font-size, inherit);\n\t\t\t\t\tfont-style: var(--vicowa-input-label-font-style, inherit);\n\t\t\t\t\tfont-weight: var(--vicowa-input-label-font-weight, inherit);\n\t\t\t\t\tcolor: var(--vicowa-input-label-color, inherit);\n\t\t\t\t\topacity: var(--vicowa-input-label-opacity, inherit);\n\t\t\t\t\twidth: var(--vicowa-input-label-width, auto);\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\t\tflex: var(--vicowa-input-label-flex, 1 1 auto);\n\t\t\t\t}\n\n\t\t\t\t:host {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t}\n\n\t\t\t\t:host([hide-label]) #label {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\n\t\t\t\t:host([disabled]) {\n\t\t\t\t\topacity: 0.5;\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t}\n\n\t\t\t\t#control-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-direction: row;\n\t\t\t\t}\n\n\t\t\t\t:host([top-label]) #control-container {\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t}\n\n\t\t\t\t#input {\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tborder: var(--vicowa-input-border, 1px solid gray);\n\t\t\t\t\tfont-family: var(--vicowa-input-control-font-family, inherit);\n\t\t\t\t\tfont-size: var(--vicowa-input-control-font-size, inherit);\n\t\t\t\t\tfont-style: var(--vicowa-input-control-font-style, inherit);\n\t\t\t\t\tfont-weight: var(--vicowa-input-control-font-weight, inherit);\n\t\t\t\t\tcolor: var(--vicowa-input-control-color, inherit);\n\t\t\t\t\tbackground: var(--vicowa-input-control-background, transparent);\n\t\t\t\t\theight: var(--vicowa-input-control-height, auto);\n\t\t\t\t\twidth: var(--vicowa-input-control-width, 100px);\n\t\t\t\t}\n\n\t\t\t\t:host([top-label]) #input {\n\t\t\t\t\twidth: var(--vicowa-input-control-width, 100%);\n\t\t\t\t}\n\n\t\t\t\t:host(.invalid) #input {\n\t\t\t\t\tbackground: var(--vicowa-input-control-error-background, red);\n\t\t\t\t\tcolor: var(--vicowa-input-control-error-color, white);\n\t\t\t\t}\n\n\t\t\t\t#error {\n\t\t\t\t\tfont-family: var(--vicowa-input-error-font-family, inherit);\n\t\t\t\t\tfont-size: var(--vicowa-input-error-font-size, 0.6em);\n\t\t\t\t\tfont-style: var(--vicowa-input-error-font-style, italic);\n\t\t\t\t\tfont-weight: var(--vicowa-input-error-font-weight, inherit);\n\t\t\t\t\tcolor: var(--vicowa-input-error-color, red);\n\t\t\t\t\topacity: var(--vicowa-input-error-opacity, 1);\n\t\t\t\t}\n\t\t\n\t\t\t\t#input::placeholder {\n\t\t\t\t\tfont-family: var(--vicowa-input-placeholder-font-family, inherit);\n\t\t\t\t\tfont-size: var(--vicowa-input-placeholder-font-size, 1em);\n\t\t\t\t\tfont-style: var(--vicowa-input-placeholder-font-style, italic);\n\t\t\t\t\tfont-weight: var(--vicowa-input-placeholder-font-weight, inherit);\n\t\t\t\t\tcolor: var(--vicowa-input-placeholder-color, black);\n\t\t\t\t\topacity: var(--vicowa-input-placeholder-opacity, 0.3);\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([static]) #input {\n\t\t\t\t\tbackground: transparent;\n\t\t\t\t\tborder-color: transparent;\n\t\t\t\t\toutline: none;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\t}\n\t\t\t\t:host([static]) #input::placeholder {\n\t\t\t\t\tcolor: transparent;\n\t\t\t\t}\n\n\t\t\t\t#error[string=\'\'],\n\t\t\t\t:host([static]) #error {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<div id="control-container">\n\t\t\t\t<label for="input"><vicowa-string id="label"></vicowa-string></label>\n\t\t\t\t<input name="input" id="input" title="">\n\t\t\t</div>\n\t\t\t<vicowa-string id="error"></vicowa-string>\n\t\t'}});
//# sourceMappingURL=vicowa-input.js.map