@dile/ui 2.9.0 → 2.10.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { html, css, LitElement } from "lit";
|
|
2
2
|
import { DileEmmitChange } from '../../../mixins/form/index.js';
|
|
3
|
+
import { checkboxBlankIcon, checkboxCheckedIcon } from '@dile/icons';
|
|
4
|
+
import '../../icon/icon.js';
|
|
3
5
|
|
|
4
6
|
export class DileCheckbox extends DileEmmitChange(LitElement) {
|
|
5
7
|
static get properties() {
|
|
@@ -26,6 +28,7 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
|
|
|
26
28
|
return css`
|
|
27
29
|
:host {
|
|
28
30
|
display: inline-block;
|
|
31
|
+
--dile-icon-size: var(--dile-checkbox-size, 20px);
|
|
29
32
|
}
|
|
30
33
|
div {
|
|
31
34
|
display: flex;
|
|
@@ -38,34 +41,15 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
|
|
|
38
41
|
}
|
|
39
42
|
.checkbox {
|
|
40
43
|
display: flex;
|
|
41
|
-
|
|
42
|
-
border-radius: 4px;
|
|
43
|
-
width: var(--dile-checkbox-size, 20px);
|
|
44
|
-
height: var(--dile-checkbox-size, 20px);
|
|
45
|
-
line-height: 0;
|
|
44
|
+
--dile-icon-color: var(--dile-checkbox-checked-color, #30a030);
|
|
46
45
|
align-items: center;
|
|
47
46
|
justify-content: center;
|
|
48
47
|
}
|
|
49
48
|
.isUnchecked {
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
path[fill="none"],
|
|
53
|
-
.checked path[fill="none"] {
|
|
54
|
-
fill: transparent;
|
|
55
|
-
}
|
|
56
|
-
path {
|
|
57
|
-
fill: var(--dile-checkbox-fill-color, #fff);
|
|
58
|
-
}
|
|
59
|
-
.checked path {
|
|
60
|
-
fill: var(--dile-checkbox-unchecked-fill-color, #fff);
|
|
61
|
-
}
|
|
62
|
-
svg {
|
|
63
|
-
width: var(--dile-checkbox-size, 20px);
|
|
64
|
-
height: var(--dile-checkbox-size, 20px);
|
|
65
|
-
line-height: var(--dile-checkbox-size, 20px);
|
|
49
|
+
--dile-icon-color: var(--dile-checkbox-unchecked-color, #303030);
|
|
66
50
|
}
|
|
67
51
|
.label {
|
|
68
|
-
margin-left:
|
|
52
|
+
margin-left: var(--dile-checkbox-label-margin-left, 0.25rem);
|
|
69
53
|
font-weight: var(--dile-checkbox-font-weight, normal);
|
|
70
54
|
color: var(--dile-checkbox-label-color, var(--dile-on-background-color, #303030));
|
|
71
55
|
}
|
|
@@ -88,7 +72,7 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
|
|
|
88
72
|
}
|
|
89
73
|
|
|
90
74
|
updated(changedProperties) {
|
|
91
|
-
if (changedProperties.has(
|
|
75
|
+
if (changedProperties.has('checked')) {
|
|
92
76
|
this.emmitChange();
|
|
93
77
|
this.internals.setFormValue(this.checked ? 'true' : null);
|
|
94
78
|
}
|
|
@@ -134,20 +118,10 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
|
|
|
134
118
|
}
|
|
135
119
|
|
|
136
120
|
get checkedIcon() {
|
|
137
|
-
return html`<
|
|
138
|
-
<path d="M0 0h24v24H0z" fill="none" />
|
|
139
|
-
<path
|
|
140
|
-
d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
|
141
|
-
/>
|
|
142
|
-
</svg>`;
|
|
121
|
+
return html`<dile-icon .icon="${checkboxCheckedIcon}"></dile-icon>`;
|
|
143
122
|
}
|
|
144
123
|
get unCheckedIcon() {
|
|
145
|
-
return html`<
|
|
146
|
-
<path
|
|
147
|
-
d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
|
|
148
|
-
/>
|
|
149
|
-
<path d="M0 0h24v24H0z" fill="none" />
|
|
150
|
-
</svg>`;
|
|
124
|
+
return html`<dile-icon .icon="${checkboxBlankIcon}"></dile-icon>`;
|
|
151
125
|
}
|
|
152
126
|
|
|
153
127
|
doKeyPress(e) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dile/ui",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.10.2",
|
|
4
4
|
"description": "UI Core components from dile-components.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -26,5 +26,5 @@
|
|
|
26
26
|
"publishConfig": {
|
|
27
27
|
"access": "public"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "df4b4ac344a0b6ea594bb4cf9377369c9af9b637"
|
|
30
30
|
}
|