@navelpluisje/pcb-components
Version:
A library with native components. They are all pcb components, like a dip-switch, resitor etc.
1 lines • 33.2 kB
JavaScript
exports.npComponents=function(t){var n={};function e(r){if(n[r])return n[r].exports;var s=n[r]={i:r,l:!1,exports:{}};return t[r].call(s.exports,s,s.exports,e),s.l=!0,s.exports}return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:r})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,n){if(1&n&&(t=e(t)),8&n)return t;if(4&n&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(e.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var s in t)e.d(r,s,function(n){return t[n]}.bind(null,s));return r},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},e.p="",e(e.s=11)}([function(t,n){t.exports=function(t){var n=[];return n.toString=function(){return this.map(function(n){var e=function(t,n){var e=t[1]||"",r=t[3];if(!r)return e;if(n&&"function"==typeof btoa){var s=function(t){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t))))+" */"}(r),i=r.sources.map(function(t){return"/*# sourceURL="+r.sourceRoot+t+" */"});return[e].concat(i).concat([s]).join("\n")}return[e].join("\n")}(n,t);return n[2]?"@media "+n[2]+"{"+e+"}":e}).join("")},n.i=function(t,e){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},s=0;s<this.length;s++){var i=this[s][0];"number"==typeof i&&(r[i]=!0)}for(s=0;s<t.length;s++){var o=t[s];"number"==typeof o[0]&&r[o[0]]||(e&&!o[2]?o[2]=e:e&&(o[2]="("+o[2]+") and ("+e+")"),n.push(o))}},n}},function(t,n){t.exports='<div class="dip-switch">\n <div class="dip-switch-label">On</div>\n <div class="dip-switch-value"></div>\n <div class="dip-switch-chip"></div>\n <ul class="dip-switch-switches">\n \x3c!-- Switches over here --\x3e\n </ul>\n</div>\n\n<li class="dip-switch-item">\n <input class="dip-switch-switch" id="dip-2" name="dip-2" type="checkbox" />\n <label for="dip-2"></label>\n <div class="dip-switch-switch-id">1</div>\n</li>\n'},function(t,n,e){(t.exports=e(0)(!1)).push([t.i,".dip-switch {\n --background: hsl(0, 0%, 100%);\n --switch-bg: hsl(var(--switch-color), var(--switch-saturation), 50%);\n --switch-shadow: hsl(var(--switch-color), var(--switch-saturation), 35%);\n --switch-shadow-fine: hsl(var(--switch-color), var(--switch-saturation), 45%);\n --switch-text-color: hsl(0, 0%, 100%);\n --switch-switch-color: hsl(var(--switch-color), 0%, 100%);\n --switch-switch-shadow: hsl(var(--switch-color), 0%, 67%);\n --switch-switch-shadow-fine: hsla(var(--switch-color), 0%, 67%, .45);\n\n background-color: var(--switch-bg);\n display: inline-flex;\n padding: 1.25rem .5rem .125rem;\n position: relative;\n}\n\n.dip-switch::before {\n background-color: var(--switch-shadow);\n content: '';\n display: block;\n height: 100%;\n left: 100%;\n position: absolute;\n top: 0;\n transform: skewY(60deg);\n transform-origin: top left;\n width: .15rem;\n}\n\n.dip-switch::after {\n background-color: var(--switch-shadow);\n content: '';\n display: block;\n height: .25rem;\n left: 0;\n position: absolute;\n top: 100%;\n transform: skewX(30deg);\n transform-origin: top left;\n width: 100%;\n}\n\n.dip-switch-switches {\n display: inline-flex;\n list-style: none;\n margin: 0;\n padding: 0;\n position: relative;\n}\n\n.dip-switch-chip {\n background-color: var(--switch-shadow-fine);\n border-color: var(--switch-shadow) transparent transparent var(--background);\n border-style: solid;\n border-width: .125rem 0 0 .0625rem;\n content: '';\n display: block;\n height: 33.33333%;\n left: 0;\n position: absolute;\n top: 33.33333%;\n width: .25rem;\n}\n\n.dip-switch-label,\n.dip-switch-value {\n color: var(--switch-text-color);\n font-family: monospace;\n position: absolute;\n text-transform: uppercase;\n top: .25rem;\n}\n\n.dip-switch-value {\n left: .5rem;\n right: .5rem;\n text-align: right;\n}\n\n.dip-switch-switch {\n clip: rect(0, 0, 0, 0);\n display: block;\n position: absolute;\n}\n\n.dip-switch-switch + label {\n background-color: var(--switch-switch-color);\n border-color: var(--switch-shadow);\n border-style: solid;\n border-width: .0625rem 0 0 .0625rem;\n box-shadow: .0625rem .0625rem 0 0 var(--switch-switch-shadow-fine) inset;\n display: block;\n height: 1.5rem;\n margin: 0 .25rem;\n position: relative;\n width: .7rem;\n}\n\n.dip-switch-switch:focus + label {\n box-shadow: 0 0 2px 2px white;\n}\n\n.dip-switch-switch + label::after {\n background-image: linear-gradient(\n 180deg,\n var(--switch-switch-color) 20%,\n var(--switch-switch-shadow) 20%,\n var(--switch-switch-shadow) 40%,\n var(--switch-switch-color) 40%,\n var(--switch-switch-color) 60%,\n var(--switch-switch-shadow) 60%,\n var(--switch-switch-shadow) 80%,\n var(--switch-switch-color) 80%\n );\n background-position: top;\n border: .0625rem solid var(--switch-switch-shadow);\n box-shadow: .0625rem 0 0 0 var(--switch-switch-shadow);\n box-sizing: border-box;\n content: '';\n display: block;\n height: .6rem;\n left: -.0625rem;\n position: absolute;\n top: calc(100% - .7rem + .125rem);\n transition:\n top .25s ease,\n box-shadow .25s ease;\n width: .7rem;\n}\n\n.dip-switch-switch:checked + label::after {\n box-shadow:\n .0625rem .125rem 0 0 var(--switch-switch-shadow),\n .0625rem 0 0 0 var(--switch-switch-shadow-fine),\n 0 .0625rem 0 0 var(--switch-switch-shadow-fine);\n top: -.0625rem;\n}\n\n.dip-switch-switch-id {\n color: var(--switch-text-color);\n font-family: monospace;\n padding-top: .125rem;\n text-align: center;\n}",""])},function(t,n){t.exports='<div class="trimmer" tabindex="0">\n <div class="trimmer-ring"></div>\n <div class="trimmer-chip"></div>\n <section class="trimmer-knob" style="transform: rotate(56deg);">\n <span class="pointer"></span>\n </section>\n <div class="value"></div>\n</div>\n'},function(t,n,e){(t.exports=e(0)(!1)).push([t.i,".trimmer {\n --background: hsl(0, 0%, 100%);\n --knob-size: 4rem;\n --switch-bg: hsl(var(--switch-color), var(--switch-saturation), 50%);\n --switch-shadow: hsl(var(--switch-color), var(--switch-saturation), 35%);\n --switch-shadow-fine: hsl(var(--switch-color), var(--switch-saturation), 45%);\n --switch-text-color: hsl(0, 0%, 100%);\n --switch-switch-color: hsl(var(--switch-color), 0%, 100%);\n --switch-switch-shadow: hsl(var(--switch-color), 0%, 67%);\n --switch-switch-shadow-fine: hsla(var(--switch-color), 0%, 27%);\n\n background-color: var(--switch-bg);\n display: inline-block;\n height: calc(var(--knob-size) * 1.1);\n margin-bottom: 1rem;\n position: relative;\n width: var(--knob-size);\n}\n\n.trimmer:focus {\n background-color: hsl(var(--switch-color), var(--switch-saturation), 60%);\n outline: none;\n}\n\n.trimmer::before,\n.trimmer::after {\n background-color: var(--switch-shadow);\n content: '';\n display: block;\n position: absolute;\n transform-origin: top left;\n}\n\n.trimmer::before {\n height: 100%;\n left: 100%;\n top: 0;\n transform: skewY(60deg);\n width: .15rem;\n}\n\n.trimmer::after {\n height: .25rem;\n left: 0;\n top: 100%;\n transform: skewX(30deg);\n width: 100%;\n}\n\n.trimmer:focus::before,\n.trimmer:focus::after {\n background-color: hsl(var(--switch-color), var(--switch-saturation), 45%);\n}\n\n.trimmer-chip {\n background-color: var(--switch-shadow-fine);\n border-color: var(--switch-shadow) transparent transparent var(--switch-shadow);\n border-style: solid;\n border-width: .125rem 0 0 .0625rem;\n bottom: 0;\n content: '';\n display: block;\n height: .25rem;\n left: calc(25% - .0625rem);\n position: absolute;\n width: calc(50% + .0625rem);\n}\n\n.trimmer:focus .trimmer-chip {\n background-color: var(--switch-bg);\n border-color:\n hsl(var(--switch-color), var(--switch-saturation), 45%)\n transparent\n transparent\n hsl(var(--switch-color), var(--switch-saturation), 45%);\n}\n\n.trimmer-chip::before {\n background-color: inherit;\n content: '';\n display: block;\n height: .125rem;\n left: 0;\n position: absolute;\n top: 100%;\n transform: skewX(30deg);\n transform-origin: top left;\n width: 100%;\n z-index: 1;\n}\n\n.trimmer-ring {\n background-color: var(--switch-bg);\n background-image:\n radial-gradient( var(--switch-bg) 55.7%, transparent 55.7%, transparent 70.7%, var(--switch-bg) 70.7%),\n linear-gradient(0deg, transparent 48.5%, var(--switch-shadow) 48.5%, var(--switch-shadow) 51.5%, transparent 51.5%),\n linear-gradient(15deg, transparent 49.5%, var(--switch-shadow) 49.5%, var(--switch-shadow) 50.5%, transparent 50.5%),\n linear-gradient(30deg, transparent 49.5%, var(--switch-shadow) 49.5%, var(--switch-shadow) 50.5%, transparent 50.5%),\n linear-gradient(45deg, transparent 48.5%, var(--switch-shadow) 48.5%, var(--switch-shadow) 51.5%, transparent 51.5%),\n linear-gradient(60deg, transparent 49.5%, var(--switch-shadow) 49.5%, var(--switch-shadow) 50.5%, transparent 50.5%),\n linear-gradient(75deg, transparent 49.5%, var(--switch-shadow) 49.5%, var(--switch-shadow) 50.5%, transparent 50.5%),\n linear-gradient(90deg, transparent 48.5%, var(--switch-shadow) 48.5%, var(--switch-shadow) 51.5%, transparent 51.5%),\n linear-gradient(105deg, transparent 49.5%, var(--switch-shadow) 49.5%, var(--switch-shadow) 50.5%, transparent 50.5%),\n linear-gradient(120deg, transparent 49.5%, var(--switch-shadow) 49.5%, var(--switch-shadow) 50.5%, transparent 50.5%),\n linear-gradient(135deg, transparent 48.5%, var(--switch-shadow) 48.5%, var(--switch-shadow) 51.5%, transparent 51.5%),\n linear-gradient(150deg, transparent 49.5%, var(--switch-shadow) 49.5%, var(--switch-shadow) 50.5%, transparent 50.5%),\n linear-gradient(165deg, transparent 49.5%, var(--switch-shadow) 49.5%, var(--switch-shadow) 50.5%, transparent 50.5%);\n background-position: left top;\n background-repeat: no-repeat;\n background-size: calc(var(--knob-size) * .75);\n border-radius: 50%;\n height: calc(var(--knob-size) * .75);\n left: calc(var(--knob-size) * .125);\n margin-bottom: 1rem;\n position: absolute;\n top: calc(var(--knob-size) * .125);\n width: calc(var(--knob-size) * .75);\n\n}\n\n.trimmer-ring::before,\n.trimmer-ring::after {\n content: '';\n display: block;\n position: absolute;\n}\n\n.trimmer-ring::before {\n border-color: transparent transparent var(--switch-bg);\n border-style: solid;\n border-width: 0 calc(var(--knob-size) * .75 / 2 - 3px) calc(var(--knob-size) * .75 / 2 - 3px);\n bottom: 0;\n height: 0;\n left: 3px;\n width: 0;\n z-index: 0;\n}\n\n.trimmer:focus .trimmer-ring::before {\n border-color: transparent transparent hsl(var(--switch-color), var(--switch-saturation), 60%);\n}\n\n.trimmer-ring::after {\n color: var(--switch-shadow);\n content: attr(data-label);\n font-family: monospace;\n font-size: .5rem;\n right: -.375rem;\n text-shadow: 1px 1px 0 var(--switch-shadow-fine);\n text-transform: uppercase;\n top: -.375rem;\n}\n\n.trimmer-knob {\n background-clip: content-box;\n background-color: #eee;\n border-radius: 50%;\n box-sizing: border-box;\n display: block;\n height: var(--knob-size);\n padding: 1rem;\n position: relative;\n transition: transform .15s ease;\n width: var(--knob-size);\n}\n\n.trimmer-knob::before,\n.trimmer-knob::after {\n content: '';\n display: block;\n left: 50%;\n position: absolute;\n transform: translateX(-50%);\n}\n\n.trimmer-knob::after {\n border-color: transparent transparent var(--switch-switch-shadow);\n border-style: solid;\n border-width: 0 .5rem .6rem;\n height: 0;\n top: 1rem;\n width: 0;\n}\n\n.trimmer-knob::before {\n background-color: var(--switch-switch-shadow);\n box-shadow: -.05rem -.05rem 0 0 hsla(0, 0%, 0%, 0.3) inset;\n height: 1.75rem;\n top: 1.25rem;\n width: .4rem;\n}\n\n.value {\n bottom: .4rem;\n color: white;\n font-family: monospace;\n font-size: .8rem;\n position: absolute;\n text-align: center;\n width: 100%;\n}\n",""])},function(t,n){t.exports='<div class="resistor">\n <section class="resistor-heads">\n <div class="resistor-body">\n <div class="band color-7"></div>\n <div class="band color-6"></div>\n <div class="band color-4"></div>\n <div class="band"></div>\n </div>\n </section>\n <input type="text" class="value">\n</div>'},function(t,n,e){(t.exports=e(0)(!1)).push([t.i,".resistor {\n --background: hsl(0, 0%, 100%);\n --knob-size: 4rem;\n\n background-image: linear-gradient(\n 90deg,\n hsl(0, 0%, 85%) 65%,\n hsl(0, 0%, 80%) 65%\n );\n background-position: left 1rem center;\n background-repeat: repeat-y;\n background-size: .3125rem 1px;\n display: inline-block;\n height: calc(var(--knob-size) * 1.5);\n margin-bottom: 1rem;\n position: relative;\n width: var(--knob-size);\n}\n\n.resistor-heads {\n height: 3rem;\n left: 1.15rem;\n position: relative;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 1.5rem;\n}\n\n.resistor-heads::before,\n.resistor-heads::after {\n background-color: hsl(38, 30%, 75%);\n background-image: radial-gradient(\n circle,\n hsl(38, 30%, 75%) 65%,\n hsl(38, 30%, 70%) 65%\n );\n background-position: right .25rem center;\n background-size: 100% 100%;\n border-radius: .25rem;\n box-sizing: border-box;\n content: '';\n display: block;\n height: .5rem;\n left: 0;\n position: absolute;\n width: 100%;\n}\n\n.resistor-heads::before {\n top: 0;\n}\n\n.resistor-heads::after {\n bottom: 0;\n}\n\n.resistor-body {\n background-color: hsl(38, 30%, 75%);\n background-image: linear-gradient(\n 90deg,\n hsl(38, 30%, 75%) 65%,\n hsl(38, 30%, 70%) 65%\n );\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n height: 2.2rem;\n justify-content: space-around;\n margin-left: .1rem;\n position: relative;\n top: .4rem;\n width: 1.3rem;\n z-index: 1;\n}\n\n.band {\n background-color: green;\n background-image: linear-gradient(\n 90deg,\n hsla(0, 0%, 0%, 0) 65%,\n hsla(0, 0%, 0%, .3) 65%\n );\n height: 10%;\n}\n\n.band:last-of-type {\n background-color: hsl(46, 100%, 64%);\n}\n\n.band.color-0 { background-color: hsl(0, 0%, 10%); }\n.band.color-1 { background-color: hsl(22, 50%, 25%); }\n.band.color-2 { background-color: hsl(0, 50%, 50%); }\n.band.color-3 { background-color: hsl(30, 50%, 50%); }\n.band.color-4 { background-color: hsl(60, 80%, 60%); }\n.band.color-5 { background-color: hsl(120, 50%, 50%); }\n.band.color-6 { background-color: hsl(240, 50%, 50%); }\n.band.color-7 { background-color: hsl(300, 50%, 50%); }\n.band.color-8 { background-color: hsl(0, 0%, 50%); }\n.band.color-9 { background-color: hsl(0, 0%, 100%); }\n.band.color--1 { background-color: hsl(46, 100%, 64%); }\n.band.color--2 { background-color: hsl(0, 0%, 80%); }\n\n.value {\n background-color: transparent;\n border: none;\n color: hsl(0, 0%, 30%);\n font-weight: 600;\n padding: .25rem;\n font-family: monospace;\n text-align: center;\n transform: rotate(-90deg);\n transform-origin: center;\n transition: all .3s ease;\n width: 100%;\n}\n\n.value::after {\n content: '\\2126';\n}\n\n.value:focus,\n.resistor:focus .value,\n.resistor.focus .value {\n background-color: white;\n border: 1px solid gray;\n border-radius: .25rem;\n transform: rotate(0deg);\n}\n",""])},function(t,n){t.exports='<div class="ic">\n <section class="ic-wrapper">\n <div class="ic-start">\n <div class="pin pin-top"></div>\n <div class="ic-body"></div>\n <div class="pin pin-bottom"></div>\n </div>\n <div class="ic-end">\n <div class="pin pin-top"></div>\n <div class="ic-body"></div>\n <div class="pin pin-bottom"></div>\n </div>\n <input type="text" class="value">\n </section>\n <span class="label"></span>\n</div>\n\n<div class="ic-step">\n <div class="pin pin-top"></div>\n <div class="ic-body"></div>\n <div class="pin pin-bottom"></div>\n</div>\n'},function(t,n,e){(t.exports=e(0)(!1)).push([t.i,".ic {\n --background: hsl(0, 0%, 100%);\n --knob-size: 4rem;\n display: inline-block;\n height: calc(var(--knob-size) * 1.1);\n position: relative;\n}\n\n.ic-wrapper {\n display: flex;\n width: auto;\n}\n\n.ic-start,\n.ic-end,\n.ic-step {\n align-items: center;\n display: flex;\n flex-direction: column;\n height: 5rem;\n position: relative;\n width: 1rem;\n}\n\n.ic-body {\n background-color: #434343;\n border-width: .25rem 0;\n border-style: solid;\n border-color: #636363 transparent #232323;\n flex: 1;\n width: 100%;\n}\n\n.ic-start .ic-body {\n border-width: .25rem 0 .25rem .15rem;\n border-color: #636363 transparent #232323 #636363;\n}\n\n.ic-start .ic-body::before {\n background: #333;\n border-radius: 0 .6rem .6rem 0;\n box-shadow:\n -1px 1px 0 0 #232323 inset,\n -1px -1px 0 0 #636363 inset;\n content: '';\n display: block;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n height: 1.2rem;\n width: .6rem;\n}\n\n.ic-end .ic-body {\n border-width: .25rem .15rem .25rem 0;\n border-color: #636363 #232323 #232323 transparent;\n}\n\n.pin {\n background: gold;\n height: .65rem;\n width: .25rem;\n position: relative;\n}\n\n.pin::before {\n background: inherit;\n content: '';\n display: block;\n width: .5rem;\n height: .4rem;\n left: -.125rem;\n position: absolute;\n}\n\n.pin-bottom::before {\n top: -.1rem;\n}\n\n.pin-top::before {\n bottom: -.1rem;\n}\n\n.label {\n color: lightgray;\n font-family: monospace;\n font-size: .8rem;\n left: 1rem;\n position: absolute;\n top: 1.2rem;\n}\n\n.value {\n background-color: transparent;\n border: none;\n color: hsl(0, 0%, 90%);\n font-weight: 600;\n font-family: monospace;\n font-size: 1rem;\n left: 1rem;\n padding: .25rem;\n position: absolute;\n top: 2.2rem;\n transition: all .3s ease;\n width: auto;\n}\n\n.value:focus {\n background-color: white;\n border: 1px solid gray;\n border-radius: .25rem;\n color: hsl(0, 0%, 30%);\n}\n",""])},function(t,n){t.exports='<div class="led">\n <section class="led-wrapper">\n <div class="bulp"></div>\n <div class="bulp-foot"></div>\n <div class="bulp-pins"></div>\n </section>\n <input type="color" />\n <span class="label"></span>\n</div>\n'},function(t,n,e){(t.exports=e(0)(!1)).push([t.i,".led {\n --background: hsl(0, 0%, 100%);\n --knob-size: 4rem;\n --led-color: green;\n display: inline-block;\n position: relative;\n}\n\n.led-wrapper {\n align-items: center;\n display: flex;\n flex-direction: column;\n width: 3rem;\n}\n\n.bulp {\n background: var(--led-color);\n border-radius: 1rem 1rem 0 0;\n box-shadow: 0 0 .5rem 0 var(--led-color);\n height: 2.5rem;\n position: relative;\n width: 2rem;\n}\n\n.bulp::after {\n border-radius: 1rem 1rem 0 0;\n border-color: transparent hsla(0, 0%, 30%, .2) transparent hsla(0, 0%, 100%, .3);\n border-style: solid;\n border-width: 0 .4rem 0 .6rem;\n box-sizing: border-box;\n content: '';\n display: block;\n height: 100%;\n position: absolute;\n width: 100%;\n}\n\n.bulp-foot {\n background: var(--led-color);\n box-shadow: 0 0 .5rem 0 var(--led-color);\n height: .3rem;\n position: relative;\n width: 2.25rem;\n}\n\n.bulp-foot::after {\n border-color: transparent hsla(0, 0%, 30%, .2) transparent hsla(0, 0%, 100%, .3);\n border-style: solid;\n border-width: 0 .6rem 0 .6rem;\n box-sizing: border-box;\n content: '';\n display: block;\n height: 100%;\n position: absolute;\n right: 0;\n width: 100%;\n}\n\n.bulp-pins {\n border-color: transparent silver;\n border-style: solid;\n border-width: 0 .25rem .25rem;\n height: 4rem;\n width: .75rem;\n}\n\ninput {\n clip: rect(0, 0, 0, 0);\n display: block;\n height: 0;\n position: absolute;\n}\n",""])},function(t,n,e){"use strict";e.r(n);var r=e(1),s=e.n(r),i=e(2),o=e.n(i);const a=()=>customElements.define("np-dipswitch",class extends HTMLElement{constructor(){super(),this.currentDocument=document.currentScript.ownerDocument;const t=document.createElement("div");t.innerHTML=s.a;const n=t.querySelector(".dip-switch");this.dipSwitchContent=t.querySelector(".dip-switch-item");const e=document.createElement("style");e.innerHTML=o.a;const r=this.attachShadow({mode:"open"});r.appendChild(n.cloneNode(!0)),r.appendChild(e.cloneNode(!0)),this.changeEvent=new CustomEvent("change",{bubbles:!0,cancelable:!1})}connectedCallback(){this.value=0,this.dips=parseInt(this.getAttribute("dips"),10)||1,this.color=parseInt(this.getAttribute("color"),10)||null,this.saturation=parseInt(this.getAttribute("saturation"),10)||null,this.showValue="string"==typeof this.getAttribute("show-value"),this.appendDips(),this.setSwitchValue(),this.setColor()}appendDips(){const t=this.shadowRoot.querySelector("ul");Array(parseInt(this.dips,10)).fill().forEach((n,e)=>{t.appendChild(this.createDipSwitchItem(this.dipSwitchContent.cloneNode(!0),e))})}createDipSwitchItem(t,n){const e=t.querySelector("input"),r=t.querySelector("label"),s=t.querySelector("div");return e.id=`dip-${n.toString()}`,e.name=e.id,r.setAttribute("for",e.id),s.textContent=(n+1).toString(),e.addEventListener("change",this.setValue.bind(this)),t}setColor(){const t=document.querySelector("html"),n=this.shadowRoot.querySelector(".dip-switch");null!==this.color?n.style.setProperty("--switch-color",this.color):""===getComputedStyle(t).getPropertyValue("--switch-color")&&n.style.setProperty("--switch-color","0"),null!==this.saturation?n.style.setProperty("--switch-saturation",`${this.saturation}%`):""===getComputedStyle(t).getPropertyValue("--switch-saturation")&&n.style.setProperty("--switch-saturation","50%")}setValue(){const t=[];this.shadowRoot.querySelectorAll("input").forEach(n=>{t.push(Number(n.checked))}),this.value=parseInt(t.join(""),2),this.setSwitchValue(),this.dispatchEvent(this.changeEvent)}setSwitchValue(){if(this.showValue){this.shadowRoot.querySelector(".dip-switch-value").textContent=this.value}}});var l=e(3),c=e.n(l),h=e(4),d=e.n(h);const u=()=>customElements.define("np-trimmer",class extends HTMLElement{constructor(){super(),this.currentDocument=document.currentScript.ownerDocument;const t=document.createElement("div");t.innerHTML=c.a;const n=t.querySelector(".trimmer"),e=document.createElement("style");e.innerHTML=d.a;const r=this.attachShadow({mode:"open"});r.appendChild(n.cloneNode(!0)),r.appendChild(e.cloneNode(!0)),this.rotateKnob=this.handleMouseMove.bind(this),this.changeEvent=new CustomEvent("change",{bubbles:!0,cancelable:!1})}connectedCallback(){this.trimmer=this.shadowRoot.querySelector(".trimmer"),this.knob=this.shadowRoot.querySelector(".trimmer-knob"),this.valueField=this.shadowRoot.querySelector(".value"),this.body=document.body,this.min=parseFloat(this.getAttribute("min"))||0,this.max=parseFloat(this.getAttribute("max"))||10,this.step=parseFloat(this.getAttribute("step"))||.5,this.label=this.getAttribute("label")||"trimmer",this.shadowRoot.querySelector(".trimmer-ring").dataset.label=this.label,this.color=parseInt(this.getAttribute("color"),10)||null,this.saturation=parseInt(this.getAttribute("saturation"),10)||null,this.setValue(parseFloat(this.getAttribute("value"))||0),this.setEventBindings(),this.setColor(),this.setKnobValue()}setEventBindings(){this.trimmer.addEventListener("mousedown",this.handleMouseDown.bind(this),!1),this.trimmer.addEventListener("click",this.handleKnobClick.bind(this)),this.trimmer.addEventListener("keyup",this.handleKeyClick.bind(this)),document.body.addEventListener("mouseup",this.handleMouseUp.bind(this),!1)}handleKeyClick(t){switch(t.key){case"ArrowUp":this.setValue(this.value+this.step);break;case"ArrowDown":this.setValue(this.value-this.step)}}handleMouseDown(t){this.click=!0,this.startY=t.screenY,this.setKnobActive(),this.start=parseFloat(this.knob.style.transform.substring(7))||0,this.body.addEventListener("mousemove",this.rotateKnob,!1)}handleMouseMove(t){let n=t.screenY-this.startY-this.start;n>140&&(n=140),n<-140&&(n=-140),this.click=!1,this.knob.style.transform=`rotate(${-1*n}deg)`,this.setValue(this.getValueByCorner(-1*n))}handleMouseUp(){this.setKnobInActive(),this.body.removeEventListener("mousemove",this.rotateKnob,!1)}handleKnobClick(t){let n;const e=this.trimmer.offsetWidth/2,r=this.trimmer.offsetHeight/2,s=t.pageX-this.trimmer.offsetLeft,i=t.pageY-this.trimmer.offsetTop,o=Math.abs(e-s),a=Math.abs(r-i),l=Math.sqrt(o**2+a**2);this.click&&((n=i>r?90+360/(2*Math.PI)*Math.acos(o/l):360/(2*Math.PI)*Math.asin(o/l))>140&&(n=140),s<e&&(n*=-1),this.setValue(this.getValueByCorner(n)))}setKnobValue(t){const n=t||280/(this.max-this.min)*(this.value-this.min)-140;this.knob.style.transform=`rotate(${n}deg)`}getValueByCorner(t){const n=t||parseFloat(this.knob.style.transform.substring(7))||0;return((t,n)=>{const e=n.toString().split(".")[1].length,r=Math.round(t/n)*n;return parseFloat(r.toFixed(e))})(+this.min+(n+140)/280*(this.max-this.min),this.step)}setValue(t){return this.value!==t&&(t>this.max?this.value=this.max:t<=this.min?this.value=this.min:this.value=t,this.dispatchEvent(this.changeEvent),this.setKnobValue(),this.valueField.textContent=this.value,!0)}setKnobActive(){this.knob.classList.add("active")}setKnobInActive(){this.knob.classList.remove("active")}setColor(){const t=document.querySelector("html");null!==this.color?this.trimmer.style.setProperty("--switch-color",this.color):""===getComputedStyle(t).getPropertyValue("--switch-color")&&this.trimmer.style.setProperty("--switch-color","0"),null!==this.saturation?this.trimmer.style.setProperty("--switch-saturation",`${this.saturation}%`):""===getComputedStyle(t).getPropertyValue("--switch-saturation")&&this.trimmer.style.setProperty("--switch-saturation","50%")}});var p=e(5),b=e.n(p),m=e(6),w=e.n(m);const v=()=>customElements.define("np-resistor",class extends HTMLElement{constructor(){super(),this.currentDocument=document.currentScript.ownerDocument;const t=document.createElement("div");t.innerHTML=b.a;const n=t.querySelector(".resistor"),e=document.createElement("style");e.innerHTML=w.a;const r=this.attachShadow({mode:"open"});r.appendChild(n.cloneNode(!0)),r.appendChild(e.cloneNode(!0)),this.changeEvent=new CustomEvent("change",{bubbles:!0,cancelable:!1})}connectedCallback(){this.resistor=this.shadowRoot.querySelector(".resistor"),this.valueField=this.shadowRoot.querySelector(".value"),this.value=this.getAttribute("value")||"0",this.min=parseFloat(this.getAttribute("min"))||0,this.max=parseFloat(this.getAttribute("max"))||10,this.step=parseFloat(this.getAttribute("step"))||.5,this.label=this.getAttribute("label"),this.color=parseInt(this.getAttribute("color"),10)||null,this.saturation=parseInt(this.getAttribute("saturation"),10)||null,this.valueField.value=this.value,this.setEventBindings(),this.setColorBands()}setEventBindings(){this.resistor.addEventListener("focus",this.handleResistorFocus.bind(this),!1),this.valueField.addEventListener("focus",this.handleResistorFocus.bind(this),!1)}handleResistorFocus(t){t.target.classList.add("focus"),this.valueField.contentEditable="true",this.valueField.focus(),this.valueField.addEventListener("blur",this.handleValueBlur.bind(this),!1)}handleValueBlur(){this.valueField.contentEditable="false",this.resistor.classList.remove("focus"),this.valueField.removeEventListener("blur",this.handleValueBlur.bind(this)),this.setValue(this.valueField.value)}setColorBands(){let t,n;t=this.value.includes("M")?1e6*parseFloat(this.value):this.value.includes("k")?1e3*parseFloat(this.value):parseFloat(this.value),this.setBandColor(0,t.toString()[0]),this.setBandColor(1,t.toString()[1]||"0");for(let e=-2;e<10;e+=1)if(10**e>t/100){n=e;break}this.setBandColor(2,n)}setBandColor(t,n){this.shadowRoot.querySelectorAll(".band")[t].classList=[`band color-${n}`]}setValue(t){return this.value!==t&&(this.value=t,this.setColorBands(),this.dispatchEvent(this.changeEvent),!0)}});var g=e(7),f=e.n(g),y=e(8),k=e.n(y);const x=()=>customElements.define("np-ic",class extends HTMLElement{constructor(){super(),this.currentDocument=document.currentScript.ownerDocument;const t=document.createElement("div");t.innerHTML=f.a;const n=t.querySelector(".ic");this.pins=t.querySelector(".ic-step");const e=document.createElement("style");e.innerHTML=k.a;const r=this.attachShadow({mode:"open"});r.appendChild(n.cloneNode(!0)),r.appendChild(e.cloneNode(!0)),this.changeEvent=new CustomEvent("change",{bubbles:!0,cancelable:!1})}connectedCallback(){this.ic=this.shadowRoot.querySelector(".ic-wrapper"),this.labelField=this.shadowRoot.querySelector(".label"),this.valueField=this.shadowRoot.querySelector(".value"),this.endPins=this.shadowRoot.querySelector(".ic-end"),this.label=this.getAttribute("label")||"Label",this.value=this.getAttribute("value"),this.pinCount=parseInt(this.getAttribute("pins"),10)||8,this.valueField.setAttribute("placeholder",this.getAttribute("placeholder")||"Value"),this.valueField.value=this.value,this.labelField.textContent=this.label,this.setEventBindings(),this.addPins()}setEventBindings(){this.valueField.addEventListener("blur",this.handleValueBlur.bind(this))}handleValueBlur(){this.setValue(this.valueField.value)}addPins(){const t=Math.floor(this.pinCount/2)-2;new Array(t).fill(null).forEach(()=>{this.ic.insertBefore(this.pins.cloneNode(!0),this.endPins)})}setValue(t){return this.value!==t&&(this.value=t,this.dispatchEvent(this.changeEvent),!0)}});const E=/rgb[a]?\(\s*[0-9]{1,3},\s*[0-9]{1,3},\s*[0-9]{1,3}(,\s*(0)?\.[0-9]{1,2})?\s*\)/i,C=/hsl[a]?\(\s*([0-9]{1,2}|[1-2][0-9]{2}|[3][0-5][0-9]|360),\s*[0-9]{1,3}%,\s*[0-9]{1,3}%(,\s*(0)?\.[0-9]{1,2})?\s*\)/i,S=/(^(#?[0-9a-fA-F]{2}){3,4}|^(#?[0-9a-fA-F]){3})$/,M=/^[a-z]{2,}$/i;class F{constructor(t){this.red=0,this.green=0,this.blue=0,this.alpha=1,this.getRgbValues(t)}getRgbValues(t){E.test(t)?this.rgbToRGB(t):C.test(t)?this.hslToRGB(t):S.test(t)?this.hexToRGB(t):M.test(t)?this.nameToRGB(t):console.error("No valid color provided")}rgbToRGB(t){const n=t.replace(/([rgb|rgba]|\(|\s|\))/g,"").split(",").map(t=>parseFloat(t));this.red=n[0]/255,this.green=n[1]/255,this.blue=n[2]/255,this.alpha=n[3]||1}hexToRGB(t="#000"){let n=t;n.includes("#")&&(n=n.replace("#","")),3!==n.length&&4!==n.length||(n=n.split("").map(t=>`${t}${t}`).join("")),this.red=parseInt(n.substr(0,2),16)/255,this.green=parseInt(n.substr(2,2),16)/255,this.blue=parseInt(n.substr(4,2),16)/255,this.alpha=+(parseInt(n.substr(6,2),16)/255||1).toPrecision(2)}hslToRGB(t){const n=t.replace(/([hsl|hsla]|\(|\s|\)|%)/g,"").split(",").map(t=>parseFloat(t)),e=n[0]/360,r=n[1]/100,s=n[2]/100;if(this.alpha=n[3]||1,0===r)this.red=s,this.green=s,this.blue=s;else{const t=(t,n,e)=>{let r=e;return r<0&&(r+=1),r>1&&(r-=1),r<1/6?t+6*(n-t)*r:r<.5?n:r<2/3?t+(n-t)*(2/3-r)*6:t},n=s<.5?s*(1+r):s+r-s*r,i=2*s-n;this.red=t(i,n,e+1/3),this.green=t(i,n,e),this.blue=t(i,n,e-1/3)}}nameToRGB(t){const n=document.createElement("span"),e=document.querySelector("body");n.style.color=t,e.appendChild(n);const r=window.getComputedStyle(n).color;e.removeChild(n),this.rgbToRGB(r)}getHsl(){const t=Math.min(this.red,this.green,this.blue),n=Math.max(this.red,this.green,this.blue),e=n-t,r=(t+n)/2;let s=0,i=0;if(t===n)return this.createHslOutput(i,s,r);if(s=r<.5?e/(n+t):e/(2-(n+t)),this.red===n)(i=(this.green-this.blue)/e)<0&&(i+=6);else if(this.green===n)i=2+(this.blue-this.red)/e;else{if(this.blue!==n)return this.createHslOutput(i,s,r);i=4+(this.red-this.green)/e}return i*=60,this.createHslOutput(i,s,r)}createHslOutput(t,n,e){const r=parseInt(100*n,10),s=parseInt(100*e,10);return 1!==this.alpha?`hsla(${t}, ${r}%, ${s}%, ${this.alpha})`:`hsl(${t}, ${r}%, ${s}%)`}}var L=e(9),A=e.n(L),V=e(10),z=e.n(V);const R=()=>customElements.define("np-led",class extends HTMLElement{constructor(){super(),this.currentDocument=document.currentScript.ownerDocument;const t=document.createElement("div");t.innerHTML=A.a;const n=t.querySelector(".led"),e=document.createElement("style");e.innerHTML=z.a;const r=this.attachShadow({mode:"open"});r.appendChild(n.cloneNode(!0)),r.appendChild(e.cloneNode(!0)),this.changeEvent=new CustomEvent("change",{bubbles:!0,cancelable:!1})}connectedCallback(){this.led=this.shadowRoot.querySelector(".led-wrapper"),this.colorPicker=this.shadowRoot.querySelector("input"),this.initColor(this.getAttribute("value")||"#f00"),this.setEventBindings()}setEventBindings(){this.led.addEventListener("click",this.openColorPicker.bind(this)),this.colorPicker.addEventListener("input",this.changeColor.bind(this))}openColorPicker(){this.colorPicker.click()}initColor(t){this.color=new F(t),this.setColor()}changeColor(t){this.color=new F(t.target.value),this.setColor()}setColor(){const t=this.color.getHsl();this.led.style.setProperty("--led-color",t),this.setValue(t)}setValue(t){return this.value!==t&&(this.value=t,this.dispatchEvent(this.changeEvent),!0)}});e.d(n,"dipswitch",function(){return a}),e.d(n,"trimmer",function(){return u}),e.d(n,"resistor",function(){return v}),e.d(n,"ic",function(){return x}),e.d(n,"led",function(){return R});n.default=null}]);