dile-checkbox
Advanced tools
Comparing version
@@ -26,2 +26,4 @@ import { html, render } from 'lit-html'; | ||
<hr> | ||
<dile-checkbox></dile-checkbox> | ||
<hr> | ||
<style> | ||
@@ -28,0 +30,0 @@ .big { |
@@ -9,2 +9,3 @@ import { html, css, LitElement } from 'lit-element'; | ||
disabled: { type: Boolean }, | ||
hasInner: { type: Boolean }, | ||
}; | ||
@@ -41,3 +42,2 @@ } | ||
justify-content: center; | ||
margin-right: 10px; | ||
} | ||
@@ -62,2 +62,3 @@ .isUnchecked { | ||
.label { | ||
margin-left: 10px; | ||
font-weight: var(--dile-checkbox-font-weight, normal); | ||
@@ -68,3 +69,2 @@ color: var(--dile-checkbox-label-color, #303030); | ||
color: var(--dile-checkbox-label-disabled-color, #303030); | ||
} | ||
@@ -74,2 +74,5 @@ `; | ||
firstUpdated() { | ||
this.hasInner = (this.innerHTML.trim().length) ? true : false; | ||
} | ||
render() { | ||
@@ -84,5 +87,9 @@ return html` | ||
</span> | ||
<span class="label"> | ||
<slot></slot> | ||
</span> | ||
${this.hasInner | ||
? html ` | ||
<span class="label"> | ||
<slot></slot> | ||
</span>` | ||
: '' | ||
} | ||
</div> | ||
@@ -89,0 +96,0 @@ `; |
{ | ||
"name": "dile-checkbox", | ||
"version": "1.2.0", | ||
"version": "2.0.0", | ||
"description": "Webcomponent dile-checkbox following open-wc recommendations", | ||
@@ -5,0 +5,0 @@ "author": "@midesweb", |
11305
2.15%217
4.83%