vicowa-web-components/dist/vicowa-single-selection/vicowa-single-selection.js

Various web components

import{VicowaInputBaseClass as t}from"../vicowa-input-base/vicowa-input-base.js";import"../vicowa-string/vicowa-string.js";import{createQuickAccess as e}from"/third_party/web-component-base-class/dist/tools.js";window.customElements.define("vicowa-single-selection",class VicowaSingleSelection extends t{constructor(){super()}static get properties(){return Object.assign({},super.properties,{options:{type:Array,value:[],observer:t=>t.#t()},type:{type:String,value:"radio",reflectToAttribute:!0,observer:t=>t.#t()},opened:{type:Boolean,value:!1,reflectToAttribute:!0},hideLabel:{type:Boolean,value:!1,reflectToAttribute:!0}})}updateTranslation(){super.updateTranslation()}attached(){this.addAutoEventListener(this.$.dropdownControl,"click",(t=>{this.opened=!this.opened,this.opened&&(this.$.selectOptionContainer.style.width=`${this.$.dropdownControl.offsetWidth}px`),t.preventDefault(),t.cancelBubble=!0;const e=()=>{this.opened=!1,this.removeAutoEventListener(window,"click",e)};this.addAutoEventListener(window,"click",e)}))}_handleValueChange(){if(this.type)switch(this.type){case"radio":this.$$$('[name="option-container"] input').forEach((t=>{t.checked=this.value===t.id,this.value===t.id?t.parentNode.setAttribute("checked",""):t.parentNode.removeAttribute("checked")}));break;case"select":this.$$$('[name="option-container"]').forEach((t=>{this.value===t.id?t.setAttribute("checked",""):t.removeAttribute("checked")}));break;default:throw new Error("Invalid type specified")}}#e(t){this.value=t.id}#t(){if(this.$.radioOptionContainer.innerHTML="",this.$.selectOptionContainer.innerHTML="",this.type)switch(this.type){case"radio":(this.options||[]).forEach((t=>{const n=document.importNode(this.$.radioOption.content,!0),i=e(n,"name");i.optionLabelString.setAttribute("string",t.displayText||""),i.optionLabel.setAttribute("for",t.value),i.vicowaSelectionOption.id=t.value,this.value===t.value?i.optionContainer.setAttribute("checked",""):i.optionContainer.removeAttribute("checked"),i.vicowaSelectionOption.checked=this.value===t.value,i.vicowaSelectionOption.addEventListener("change",(()=>{this.#e(i.vicowaSelectionOption),this.$$$('[name="option-container"] input').forEach((t=>{t.checked=this.value===t.id,this.value===t.id?t.parentNode.setAttribute("checked",""):t.parentNode.removeAttribute("checked")}))}));const o=t.childElementName?document.createElement(t.childElementName):t.childElement||null;o&&i.childContainer.appendChild(o),this.$.radioOptionContainer.appendChild(n),t.childElementName&&o&&(o.onAttached=()=>{o.option=t})}));break;case"select":(this.options||[]).forEach((t=>{const n=document.importNode(this.$.selectOption.content,!0),i=e(n,"name");i.optionLabelString.setAttribute("string",t.displayText||""),i.optionContainer.id=t.value,this.value===t.value?i.optionContainer.setAttribute("checked",""):i.optionContainer.removeAttribute("checked"),i.optionContainer.addEventListener("click",(()=>{this.#e(i.optionContainer),this.$$$('[name="option-container"]').forEach((t=>{this.value===t.id?t.setAttribute("checked",""):t.removeAttribute("checked")}))}));const o=t.childElementName?document.createElement(t.childElementName):t.childElement||null;o&&i.childContainer.appendChild(o),this.$.selectOptionContainer.appendChild(n),t.childElementName&&o&&(o.onAttached=()=>{o.option=t})}));break;default:throw new Error("Invalid type specified")}}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\tdisplay: block;\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\twidth: var(--vicowa-single-selection-width, 150px);\n\t\t\t\t}\n\t\t\t\t:host([type="select"]) {\n\t\t\t\t}\n\t\t\t\t:host(:not([type="select"])) #dropdown-control {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\n\t\t\t\t#control-container {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-direction: row;\n\t\t\t\t}\n\t\t\n\t\t\t\t#arrow {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\ttop: 7px;\n\t\t\t\t\tright: 5px;\n\t\t\t\t\tborder-top: 8px solid var(--vicowa-single-selection-arrow-color, black);\n\t\t\t\t\tborder-bottom: 8px solid transparent;\n\t\t\t\t\tborder-left: 6px solid transparent;\n\t\t\t\t\tborder-right: 6px solid transparent;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([opened]) #arrow {\n\t\t\t\t\tz-index: 1000;\n\t\t\t\t}\n\t\t\n\t\t\t\tlabel {\n\t\t\t\t\tflex: 0 0 auto;\n\t\t\t\t}\n\t\t\n\t\t\t\t#label {\n\t\t\t\t\tmargin-right: 1em;\n\t\t\t\t}\n\t\t\n\t\t\t\t#input {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t}\n\t\t\n\t\t\t\t#dropdown-control {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tright: 0;\n\t\t\t\t\tbottom: 0;\n\t\t\t\t}\n\t\t\n\t\t\t\t#select-option-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\toverflow-x: hidden;\n\t\t\t\t\toverflow-y: auto;\n\t\t\t\t\tborder: var(--vicowa-single-selection-border, 1px solid #bbb);\n\t\t\t\t\tbackground: var(--vicowa-single-selection-background, white);\n\t\t\t\t}\n\t\t\n\t\t\t\t.option-container {\n\t\t\t\t\tpadding: 2px 5px;\n\t\t\t\t\tdisplay: none;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: var(--vicowa-single-selection-height, auto);\n\t\t\t\t}\n\t\t\t\t:host([opened]) .option-container,\n\t\t\t\t:host(:not([type="select"])) .option-container,\n\t\t\t\t.option-container[checked] {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([opened]) .option-container[checked],\n\t\t\t\t:host([opened]) .option-container:hover {\n\t\t\t\t\tbackground: var(--vicowa-single-selection-selected-background, blue);\n\t\t\t\t\tcolor: var(--vicowa-single-selection-selected-color, white);\n\t\t\t\t\t--vicowa-icon-fill-color: var(--vicowa-single-selection-selected-color, white);\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([opened]) #select-option-container {\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tposition: fixed;\n\t\t\t\t\tz-index: 1000;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([static][type="select"]) #arrow,\n\t\t\t\t:host([static]) .option-container:not([checked]),\n\t\t\t\t:host([static]) .option-container input {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t\t:host([static]) #select-option-container,\n\t\t\t\t:host([static]) #radio-option-container {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tborder: transparent;\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]) label[name="option-label"] {\n\t\t\t\t\tmax-width: 100%;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([hide-label]) #label {\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<div id="input">\n\t\t\t\t\t<div id="dropdown-control">\n\t\t\t\t\t\t<div id="select-option-container">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div id="arrow"></div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div id="radio-option-container"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<vicowa-string id="error"></vicowa-string>\n\t\t\t<template id="radio-option">\n\t\t\t\t<div name="option-container" class="option-container">\n\t\t\t\t\t<input name="vicowa-selection-option" type="radio">\n\t\t\t\t\t<label name="option-label"><vicowa-string name="option-label-string" string=""></vicowa-string></label>\n\t\t\t\t\t<div name="child-container"></div>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template id="select-option">\n\t\t\t\t<div name="option-container" class="option-container">\n\t\t\t\t\t<vicowa-string name="option-label-string" string=""></vicowa-string>\n\t\t\t\t\t<div name="child-container"></div>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t'}});
//# sourceMappingURL=vicowa-single-selection.js.map