1import{LitElement,html,css}from"@hh/global.js";class HHCheckboxWrapper extends LitElement{static properties={checked:{reflect:!0},type:{type:String,reflect:!0}};constructor(){super()}connectedCallback(){super.connectedCallback(),this.checked=this.querySelector("input")?.checked,this.type=this.querySelector("input").getAttribute("type")}onChange(e){this.checked=e?.target?.checked}render(){return html` 2 <div> 3 <slot @change="${this.onChange}" name="input"></slot> 4 <slot name="label"></slot> 5 </div> 6 `}static styles=css` 7 ::slotted(input) { 8 width: var(--hh-input-width, --hh-width, 16px); 9 height: var(--hh-input-height, --hh-height, 16px); 10 position: absolute; 11 top: 0; 12 left: 0; 13 border: none; 14 appearance: none; 15 padding: 0; 16 margin: 0; 17 } 18 19 ::slotted(label) { 20 position: relative; 21 cursor: pointer; 22 } 23 24 ::slotted(label):before { 25 content: ''; 26 -webkit-appearance: none; 27 background-color: transparent; 28 border: 2px solid var(--hh-color, #000); 29 border-radius: 2px; 30 width: var(--hh-width, 16px); 31 height: var(--hh-height, 16px); 32 display: inline-block; 33 position: relative; 34 vertical-align: middle; 35 cursor: pointer; 36 margin-right: 8px; 37 box-sizing: border-box !important; 38 } 39 40 :host { 41 position: relative; 42 display: block; 43 } 44 45 :host([type='radio']) ::slotted(label):before { 46 border-radius: 50%; 47 } 48 49 :host([checked='true']) ::slotted(label):after { 50 content: ''; 51 display: block; 52 position: absolute; 53 } 54 55 :host([type='radio']) ::slotted(label):after { 56 top: 9px; 57 left: 10px; 58 width: var(--hh-radio-width, 12px); 59 height: var(--hh-radio-height, 12px); 60 background: var(--hh-color, #000); 61 border-radius: 50%; 62 transform: translate(-50%, -50%); 63 } 64 65 :host([type='checkbox']) ::slotted(label):after { 66 top: var(--hh-check-top, 2px); 67 left: var(--hh-check-left, 6px); 68 width: var(--hh-check-width, 3px); 69 height: var(--hh-check-height, 8px); 70 border: solid var(--hh-color, #000); 71 border-width: 0 var(--hh-check-border-width, 1px) 72 var(--hh-check-border-width, 1px) 0; 73 transform: rotate(45deg); 74 } 75 `}customElements.define("hh-checkbox-wrapper",HHCheckboxWrapper); 76//# sourceMappingURL=/cdn/shop/t/725/assets/component-checkbox-wrapper.js.map?v=178548992730280134551776706983
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.