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

Various web components

import{WebComponentBaseClass as t}from"/third_party/web-component-base-class/dist/web-component-base-class.js";import"../vicowa-icon/vicowa-icon.js";import"../vicowa-string/vicowa-string.js";import o from"../utilities/translate.js";window.customElements.define("vicowa-button",class VicowaButton extends t{#t;constructor(){super(),this.#t={activeTranslator:null}}static get properties(){return{string:{type:String,value:"",observer:t=>{t.$.string.string=t.string}},parameters:{type:Array,value:[],observer:t=>{t.$.string.parameters=t.parameters}},pluralNumber:{type:Number,value:1,observer:t=>{t.$.string.pluralNumber=t.pluralNumber}},icon:{type:String,value:"",observer:t=>{t.$.icon.icon=t.icon}},ariaLabel:{type:String,value:"",observer:t=>{t.$.button.setAttribute("aria-label",t.ariaLabel)}},disabled:{type:Boolean,value:!1,reflectToAttribute:!0},tooltip:{type:String,value:"",reflectToAttribute:!0,observer:t=>{t.$.button.setAttribute("title",t.tooltip),t.updateTranslation()}}}}updateTranslation(){const t=this.#t;this.$.button.setAttribute("title",t.activeTranslator&&this.tooltip?t.activeTranslator.translate(this.tooltip).fetch():this.tooltip)}attached(){this.$.string.onTranslationUpdated=t=>{this.ariaLabel||this.$.button.setAttribute("aria-label",t)},this.$.button.setAttribute("aria-label",this.$.string.displayString),o.addTranslationUpdatedObserver((t=>{this.#t.activeTranslator=t,this.updateTranslation()}),this)}static get template(){return'\n\t\t\t<style>\n\t\t\t\t:host {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\tbackground: var(--vicowa-button-background, transparent);\n\t\t\t\t\tcolor: var(--vicowa-button-color);\n\t\t\t\t\tfont: var(--vicowa-button-font);\n\t\t\t\t\tcursor: var(--vicowa-button-cursor);\n\t\t\t\t\tbox-shadow: var(--vicowa-button-box-shadow);\n\t\t\t\t}\n\t\n\t\t\t\t:host(:hover) {\n\t\t\t\t\tbackground: var(--vicowa-button-background-hover, var(--vicowa-button-background));\n\t\t\t\t\tcolor: var(--vicowa-button-color-hover, var(--vicowa-button-color));\n\t\t\t\t\tfont: var(--vicowa-button-font-hover, var(--vicowa-button-font));\n\t\t\t\t\tcursor: var(--vicowa-button-cursor-hover, var(--vicowa-button-cursor));\n\t\t\t\t\tbox-shadow: var(--vicowa-button-box-shadow-hover, var(--vicowa-button-shadow));\n\t\t\t\t\tleft: var(--vicowa-button-left-hover);\n\t\t\t\t\ttop: var(--vicowa-button-top-hover);\n\t\t\t\t}\n\t\t\n\t\t\t\t:host(:active) {\n\t\t\t\t\tbackground: var(--vicowa-button-background-active, var(--vicowa-button-background));\n\t\t\t\t\tcolor: var(--vicowa-button-color-active, var(--vicowa-button-color));\n\t\t\t\t\tfont: var(--vicowa-button-font-active, var(--vicowa-button-font));\n\t\t\t\t\tcursor: var(--vicowa-button-cursor-active, var(--vicowa-button-cursor));\n\t\t\t\t\tbox-shadow: var(--vicowa-button-box-shadow-active, var(--vicowa-button-shadow));\n\t\t\t\t\tleft: var(--vicowa-button-left-active);\n\t\t\t\t\ttop: var(--vicowa-button-top-active);\n\t\t\t\t\tborder: var(--vicowa-button-border, none);\n\t\t\t\t}\n\t\n\t\t\t\tbutton {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tuser-select: none;\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-direction: row;\n\t\t\t\t\talign-content: stretch;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tborder: none;\n\t\t\t\t\tbackground: transparent;\n\t\t\t\t\tcolor: inherit;\n\t\t\t\t\tfont: inherit;\n\t\t\t\t\tcursor: inherit;\n\t\t\t\t\toutline: none;\n\t\t\t\t}\n\t\t\n\t\t\t\t#icon {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\theight: 24px;\n\t\t\t\t\tflex: 0 0 24px;\n\t\t\t\t}\n\t\t\n\t\t\t\t#icon[icon=""],\n\t\t\t\t\t#icon:not([icon]){\n\t\t\t\t\tflex: 0 0 var(--vicowa-button-min-icon-width, 0);\n\t\t\t\t\tmax-width: 0;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([disabled]) {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.5;\n\t\t\t\t\tcursor: default;\n\t\t\t\t}\n\t\t\n\t\t\t\t#container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-direction: row;\n\t\t\t\t\theight: 100%;\n\t\t\t\t}\n\t\t\n\t\t\t\tvicowa-string {\n\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t}\n\t\t\n\t\t\t</style>\n\t\t\t<div id="container">\n\t\t\t\t<button id="button"><slot name="custom-content"></slot><vicowa-icon id="icon"></vicowa-icon><vicowa-string id="string"></vicowa-string></button>\n\t\t\t</div>'}});
//# sourceMappingURL=vicowa-button.js.map