diff --git a/wc/components/Checkable/Checkable.js b/wc/components/Checkable/Checkable.js index 8253034..f9c6809 100644 --- a/wc/components/Checkable/Checkable.js +++ b/wc/components/Checkable/Checkable.js @@ -78,16 +78,26 @@ class Checkable extends WComponent{ this.shadowRoot.querySelector('input').addEventListener('change', this.inputChangeHandler); } + attributeChangedCallback(name, oldValue, newValue) { + const input = this.shadowRoot.querySelector('input'); + const parser = this.getAttributeParserByName(name); + const value = parser(newValue, this.attributes[name]); + if(input) { + input[name] = value; + if(!value) { + input.removeAttribute(name); + } + } + } render(){ const ctn = DOM.create('label', null, this.shadowRoot); - const inputProps = { type: this.type }; - const inputAttrs = {}; + const inputAttrs = { type: this.type }; if(this.checked) { inputAttrs.checked = true; } if(this.disabled) { inputAttrs.disabled = true; } if(this.value) { inputAttrs.value = this.value; } if(this.name) { inputAttrs.name = this.name; } - DOM.create('input', { props: inputProps, attrs: inputAttrs }, ctn); + DOM.create('input', { attrs: inputAttrs }, ctn); const iconProps = { className: 'icon' }; DOM.create('span', { props: iconProps }, ctn); @@ -95,18 +105,6 @@ class Checkable extends WComponent{ DOM.create('slot', {}, ctn); } - attributeChangedCallback(name, oldValue, newValue) { - const input = this.shadowRoot.querySelector('input'); - const parser = this.getAttributeParserByName(name); - const value = parser(newValue, this.attributes[name]); - if(input) { - input[name] = value; - if(!value) { - input.removeAttribute(name); - } - } - } - inputChangeHandler = e => { this.checked = e.target.checked; if(typeof this.onchange === 'function') { diff --git a/wc/components/checkable/Checkable.js b/wc/components/checkable/Checkable.js index 8253034..f9c6809 100644 --- a/wc/components/checkable/Checkable.js +++ b/wc/components/checkable/Checkable.js @@ -78,16 +78,26 @@ class Checkable extends WComponent{ this.shadowRoot.querySelector('input').addEventListener('change', this.inputChangeHandler); } + attributeChangedCallback(name, oldValue, newValue) { + const input = this.shadowRoot.querySelector('input'); + const parser = this.getAttributeParserByName(name); + const value = parser(newValue, this.attributes[name]); + if(input) { + input[name] = value; + if(!value) { + input.removeAttribute(name); + } + } + } render(){ const ctn = DOM.create('label', null, this.shadowRoot); - const inputProps = { type: this.type }; - const inputAttrs = {}; + const inputAttrs = { type: this.type }; if(this.checked) { inputAttrs.checked = true; } if(this.disabled) { inputAttrs.disabled = true; } if(this.value) { inputAttrs.value = this.value; } if(this.name) { inputAttrs.name = this.name; } - DOM.create('input', { props: inputProps, attrs: inputAttrs }, ctn); + DOM.create('input', { attrs: inputAttrs }, ctn); const iconProps = { className: 'icon' }; DOM.create('span', { props: iconProps }, ctn); @@ -95,18 +105,6 @@ class Checkable extends WComponent{ DOM.create('slot', {}, ctn); } - attributeChangedCallback(name, oldValue, newValue) { - const input = this.shadowRoot.querySelector('input'); - const parser = this.getAttributeParserByName(name); - const value = parser(newValue, this.attributes[name]); - if(input) { - input[name] = value; - if(!value) { - input.removeAttribute(name); - } - } - } - inputChangeHandler = e => { this.checked = e.target.checked; if(typeof this.onchange === 'function') {