cnDefaultComponents.min.js

class CNCheckboxIn extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){const t=""===this.getAttribute("checked");this.shadowRoot.innerHTML=`\n\t\t${styles}\t\n\t\t<label  class="cn-cbx-label">\n        \t<input type="checkbox" id="cn-cbx"\n\t\t\t${t?"checked":""}/>\n\t\t\t<span class="cn-cbx-checkmark"><slot></slot></span>\n\t\t</label>\n\t\t`}isChecked(){const t=this.shadowRoot.getElementById("cn-cbx");return!!t&&t.checked}}customElements.define("cn-checkbox-in",CNCheckboxIn);class CNRadioButtonIn extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}renderRadioButtons(t){if(!t||0==t.length)return;let n="";t.forEach(({value:t,label:e,checked:r})=>{n+=this.createRadioButton(t,e,r)}),this.shadowRoot.innerHTML=`\n\t\t${styles}\n\t\t${n}\n\t\t`}createRadioButton(t,n,e){return`\n\t\t<label class="cn-radio-wrapper cn-radio-wrapper-before">\n        \t<span class="cn-radio-input">\n\t\t\t\t<input type="radio" value="${t}" ${e?"checked":""} name="cn-radio">\n\t\t\t\t<span class="cn-radio-control"></span>\n\t\t\t</span>\n\t\t\t<span class="cn-radio-label">${n}</span>\n\t\t</label>\n\t\t`}getSelected(){const t=this.shadowRoot.querySelectorAll("[name=cn-radio]"),n=Array.from(t).find(t=>t.checked);return n?n.value:null}unselectAll(){const t=this.shadowRoot.querySelectorAll("[name=cn-radio]");Array.from(t).forEach(t=>t.checked=!1)}}customElements.define("cn-radio-in",CNRadioButtonIn);const styles="\n\t<style>\n\t\t\t* {\n\t\t\t--cn-blue: #4682b4;\n\t\t\t--cn-blue-light: #4f8bbd;\n\t\t\t--cn-red: #b94941;\n\t\t\t--cn-yellow: #ffca28;\n\t\t\t--cn-medium-grey: #474747;\n\t\t\t--cn-dark-grey: #2c2c2c;\n\t\t\tfont-family: sans-serif;\n    \t\tfont-size: 1rem;\n\t\t}\n\n\t\t*,\n\t\t*:before,\n\t\t*:after {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\n\t\t.cn-div {\n\t\t\tpadding: 1rem;\n\t\t\tmargin: 1rem;\n\t\t\tbackground-color: var(--cn-medium-grey);\n\t\t\tborder-radius: 0.2rem;\n\t\t}\n\n\t\t.cn-warning-div {\n\t\t\tpadding: 1rem;\n\t\t\tmargin: 1rem;\n\t\t\tbackground-color: var(--cn-medium-grey);\n\t\t\tborder-radius: 0.2rem;\n\t\t\tbackground-color: var(--cn-red);\n\t\t}\n\n\t\t.cn-cbx-div{\n\t\t\tmargin: auto;\n\t\t}\n\n\t\t.cn-hide {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t.cn-show {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t.cn-button {\n\t\t\tbackground-color: var(--cn-blue);\n\t\t\tcolor: white;\n\t\t\tpadding: 1rem;\n\t\t\tborder-radius: 0.2rem;\n\t\t\tborder: none;\n\t\t}\n\n\t\t.cn-button:active {\n\t\t\tbackground-color: var(--cn-blue-light);\n\t\t}\n\n\t\t.cn-button:focus {\n\t\t\toutline: none;\n\t\t}\n\n\t\t.cn-cbx-label {\n\t\t\tdisplay: inline-flex;\n\t\t\tcursor: pointer;\n\t\t\tposition: relative;\n\t\t\t align-items: center;\n\t\t}\n\n\t\t.cn-cbx-label > span {\n\t\t\tpadding: 0.5rem 0.25rem;\n\t\t}\n\n\t\t.cn-cbx-label > input {\n\t\t\t-webkit-appearance: none;\n\t\t\t-moz-appearance: none;\n\t\t\t-o-appearance: none;\n\t\t\tappearance: none;\n\t\t\theight: 25px;\n\t\t\twidth: 25px;\n\t\t\tborder-radius: 0.2rem;\n\t\t\toutline: none;\n\t\t\ttransition-duration: 0.3s;\n\t\t\tbackground-color: #eee;\n\t\t\tcursors: pointer;\n\t\t\t\n\t\t}\n\n\t\t.cn-cbx-label > input:checked {\n\t\t\tbackground-color: var(--cn-blue);\n\t\t}\n\t\t\n\t\t.cn-cbx-label > input:checked + span::before {\n\t\t\tcontent: '\\2713';\n\t\t\tdisplay: block;\n\t\t\ttext-align: center;\n\t\t\tcolor: white;\n\t\t\tposition: absolute;\n\t\t\tleft: 0.6rem;\n\t\t\ttop: 0.4rem;\n\t\t}\n\n\t\t.cn-cbx-label > input:active {\n\t\t\tbackground-color: #ccc\n\t\t}\n\n\t\t.cn-radio-wrapper {\n\t\t\tdisplay: grid;\n\t\t\tgrid-template-columns: -webkit-min-content auto;\n\t\t\tgrid-template-columns: min-content auto;\n\t\t\tgrid-gap: 0.2em;\n\t\t\tfont-size: 2.25rem;\n\t\t\tpadding: 0.25rem 0;\n\t\t}\n\n\t\t.cn-radio-wrapper:focus-within .cn-radio-label {\n\t\t\tcolor: var(--cn-blue-light)\n\t\t\t\n\t\t}\n\n\t\t.cn-radio-label {\n\t\t\tline-height: 1;\n\t\t\ttransition: 180ms all ease-in-out;\n\t\t}\n\n\t\t.cn-radio-input {\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t.cn-radio-input input {\n\t\t\topacity: 0;\n\t\t\twidth: 0;\n\t\t\theight: 0;\n\t\t}\n\n\t\t.cn-radio-input input:focus + .cn-radio-control {\n\t\t\tbox-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em currentColor;\n\t\t}\n\n\t\t.radio-gradient input:checked + .cn-radio-control {\n\t\t\tbackground: radial-gradient(currentcolor 50%, rgba(255, 0, 0, 0) 51%);\n\t\t}\n\n\t\t.cn-radio-wrapper-before .cn-radio-control {\n\t\t\tdisplay: grid;\n\t\t\tplace-items: center;\n\t\t}\n\n\t\t.cn-radio-wrapper-before input + .cn-radio-control::before {\n\t\t\tcontent: \"\";\n\t\t\twidth: 0.5em;\n\t\t\theight: 0.5em;\n\t\t\tbox-shadow: inset 0.5em 0.5em currentColor;\n\t\t\tborder-radius: 50%;\n\t\t\ttransition: 180ms transform ease-in-out;\n\t\t\ttransform: scale(0);\n\t\t}\n\n\t\t.cn-radio-wrapper-before input:checked + .cn-radio-control::before {\n\t\t\ttransform: scale(1);\n\t\t}\n\n\t\t.cn-radio-control {\n\t\t\tdisplay: block;\n\t\t\twidth: 1em;\n\t\t\theight: 1em;\n\t\t\tborder-radius: 50%;\n\t\t\tborder: 0.1em solid currentColor;\n\t\t\t\n\t\t\tcolor: var(--cn-blue)\n\t\t}\n\t\t\n\t\n\t\t</style>\n\t";