@kyndryl-design-system/shidoka-applications 2.59.1 → 2.59.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,4 +1,4 @@
|
|
|
1
|
-
import{_ as e,a,b as t,c as
|
|
1
|
+
import{_ as e,a,b as t,c as i,d as r}from"../../../vendor/tslib-Ac8XvvSX.js";import{i as o,t as n,r as d,n as s}from"../../../vendor/@lit/reactive-element-f91Vet7N.js";import{e as c,x as l}from"../../../vendor/lit-html-BRBT5o_V.js";import{i as b}from"../../../vendor/lit-element-m-OqzV5s.js";var u=o`*,
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -43,7 +43,7 @@ input {
|
|
|
43
43
|
margin-top: 4px;
|
|
44
44
|
width: 16px;
|
|
45
45
|
height: 16px;
|
|
46
|
-
border: 2px solid var(--kd-color-
|
|
46
|
+
border: 2px solid var(--kd-color-icon-primary);
|
|
47
47
|
border-radius: 2px;
|
|
48
48
|
background: var(--kd-color-background-ui-hollow-default);
|
|
49
49
|
outline: 2px solid transparent;
|
|
@@ -58,26 +58,26 @@ input::before {
|
|
|
58
58
|
transform: scale(0);
|
|
59
59
|
}
|
|
60
60
|
input:not(.disabled):active {
|
|
61
|
-
background: var(--kd-color-background-
|
|
62
|
-
border-color: var(--kd-color-
|
|
61
|
+
background: var(--kd-color-background-ui-hollow-default);
|
|
62
|
+
border-color: var(--kd-color-icon-primary);
|
|
63
63
|
}
|
|
64
64
|
input:not(.disabled):hover {
|
|
65
65
|
background: var(--kd-color-background-ui-hollow-hover);
|
|
66
66
|
border-color: var(--kd-color-border-ui-hover);
|
|
67
67
|
}
|
|
68
68
|
input:not(.disabled):focus-visible {
|
|
69
|
-
border-color: var(--kd-color-
|
|
69
|
+
border-color: var(--kd-color-icon-primary);
|
|
70
70
|
outline-color: var(--kd-color-border-variants-focus);
|
|
71
71
|
background: var(--kd-color-background-ui-hollow-default);
|
|
72
72
|
outline-offset: 2px;
|
|
73
73
|
}
|
|
74
74
|
input:not(.disabled):active {
|
|
75
|
-
background: var(--kd-color-background-ui-hollow-
|
|
76
|
-
border-color: var(--kd-color-
|
|
75
|
+
background: var(--kd-color-background-ui-hollow-default);
|
|
76
|
+
border-color: var(--kd-color-icon-primary);
|
|
77
77
|
outline-color: transparent;
|
|
78
78
|
}
|
|
79
79
|
input:not(.disabled):checked {
|
|
80
|
-
background: var(--kd-color-
|
|
80
|
+
background: var(--kd-color-icon-primary);
|
|
81
81
|
border-color: transparent;
|
|
82
82
|
}
|
|
83
83
|
input:not(.disabled):checked::before {
|
|
@@ -93,10 +93,11 @@ input:not(.disabled):checked::before {
|
|
|
93
93
|
-webkit-mask-position: center;
|
|
94
94
|
}
|
|
95
95
|
input:not(.disabled):checked:hover {
|
|
96
|
+
background: var(--kd-color-background-ui-default-hover);
|
|
96
97
|
outline-color: transparent;
|
|
97
98
|
}
|
|
98
99
|
input:not(.disabled):checked:hover::before {
|
|
99
|
-
background: var(--kd-color-background-
|
|
100
|
+
background: var(--kd-color-background-container-default);
|
|
100
101
|
}
|
|
101
102
|
input:not(.disabled):checked:focus-visible {
|
|
102
103
|
border-color: transparent;
|
|
@@ -106,19 +107,19 @@ input:not(.disabled):checked:active {
|
|
|
106
107
|
border-color: transparent;
|
|
107
108
|
}
|
|
108
109
|
input:not(.disabled):checked:active::before {
|
|
109
|
-
background: var(--kd-color-background-
|
|
110
|
+
background: var(--kd-color-background-container-default);
|
|
110
111
|
}
|
|
111
112
|
input.disabled {
|
|
112
|
-
background: var(--kd-color-
|
|
113
|
-
border-color: var(--kd-color-
|
|
113
|
+
background: var(--kd-color-icon-disabled);
|
|
114
|
+
border-color: var(--kd-color-icon-disabled);
|
|
114
115
|
}
|
|
115
116
|
input.disabled:checked {
|
|
116
|
-
background: var(--kd-color-
|
|
117
|
+
background: var(--kd-color-icon-disabled);
|
|
117
118
|
border-color: transparent;
|
|
118
119
|
}
|
|
119
120
|
input.disabled:checked::before {
|
|
120
121
|
transform: scale(1);
|
|
121
|
-
background: var(--kd-color-
|
|
122
|
+
background: var(--kd-color-background-container-default);
|
|
122
123
|
mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNSA1Ljg1NTQ3TDkgLTIuMDMwNjNlLTA2TDEwIDEuMDY0NjNMMy40ODU2NiA4TDAgNC4yODkwNkwxLjAxNDM0IDMuMjA5MTZMMy41IDUuODU1NDdaIiBmaWxsPSIjMDAwIi8+DQo8L3N2Zz4=");
|
|
123
124
|
-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNSA1Ljg1NTQ3TDkgLTIuMDMwNjNlLTA2TDEwIDEuMDY0NjNMMy40ODU2NiA4TDAgNC4yODkwNkwxLjAxNDM0IDMuMjA5MTZMMy41IDUuODU1NDdaIiBmaWxsPSIjMDAwIi8+DQo8L3N2Zz4=");
|
|
124
125
|
mask-size: contain;
|
|
@@ -130,7 +131,7 @@ input.disabled:checked::before {
|
|
|
130
131
|
}
|
|
131
132
|
|
|
132
133
|
input[type=checkbox]:indeterminate:not(.disabled) {
|
|
133
|
-
background: var(--kd-color-
|
|
134
|
+
background: var(--kd-color-icon-primary);
|
|
134
135
|
border-color: transparent;
|
|
135
136
|
}
|
|
136
137
|
input[type=checkbox]:indeterminate:not(.disabled)::before {
|
|
@@ -144,22 +145,22 @@ input[type=checkbox]:indeterminate:not(.disabled)::before {
|
|
|
144
145
|
-webkit-mask: linear-gradient(transparent 3px, #000 3px 5px, transparent 5px);
|
|
145
146
|
}
|
|
146
147
|
input[type=checkbox]:indeterminate:not(.disabled):hover {
|
|
147
|
-
background: var(--kd-color-background-ui-default-
|
|
148
|
-
|
|
148
|
+
background: var(--kd-color-background-ui-default-hover);
|
|
149
|
+
outline-color: transparent;
|
|
149
150
|
}
|
|
150
151
|
input[type=checkbox]:indeterminate:not(.disabled):hover::before {
|
|
151
|
-
background: var(--kd-color-background-
|
|
152
|
+
background: var(--kd-color-background-container-default);
|
|
152
153
|
}
|
|
153
154
|
input[type=checkbox]:indeterminate:not(.disabled):active {
|
|
154
|
-
background: var(--kd-color-
|
|
155
|
+
background: var(--kd-color-icon-primary);
|
|
155
156
|
border-color: transparent;
|
|
156
157
|
}
|
|
157
158
|
input[type=checkbox]:indeterminate:not(.disabled):active::before {
|
|
158
|
-
background: var(--kd-color-background-
|
|
159
|
+
background: var(--kd-color-background-container-default);
|
|
159
160
|
}
|
|
160
161
|
|
|
161
162
|
input[type=checkbox]:indeterminate.disabled {
|
|
162
|
-
background: var(--kd-color-
|
|
163
|
+
background: var(--kd-color-icon-disabled);
|
|
163
164
|
border-color: transparent;
|
|
164
165
|
}
|
|
165
166
|
input[type=checkbox]:indeterminate.disabled::before {
|
|
@@ -168,16 +169,16 @@ input[type=checkbox]:indeterminate.disabled::before {
|
|
|
168
169
|
width: 10px;
|
|
169
170
|
height: 8px;
|
|
170
171
|
transform: scale(1);
|
|
171
|
-
background: var(--kd-color-
|
|
172
|
+
background: var(--kd-color-background-container-default);
|
|
172
173
|
mask: linear-gradient(transparent 3px, #000 3px 5px, transparent 5px);
|
|
173
174
|
-webkit-mask: linear-gradient(transparent 3px, #000 3px 5px, transparent 5px);
|
|
174
175
|
}
|
|
175
176
|
|
|
176
177
|
input[type=checkbox][invalid] {
|
|
177
|
-
border-color: var(--kd-color-
|
|
178
|
+
border-color: var(--kd-color-icon-destructive);
|
|
178
179
|
}
|
|
179
180
|
input[type=checkbox][invalid]:not(.disabled):checked, input[type=checkbox][invalid]:not(.disabled):indeterminate {
|
|
180
|
-
background: var(--kd-color-
|
|
181
|
+
background: var(--kd-color-icon-destructive);
|
|
181
182
|
border-color: transparent;
|
|
182
183
|
}
|
|
183
184
|
input[type=checkbox][invalid]:not(.disabled):checked:hover, input[type=checkbox][invalid]:not(.disabled):indeterminate:hover {
|
|
@@ -195,25 +196,18 @@ input[type=checkbox][invalid].disabled {
|
|
|
195
196
|
input[type=checkbox][invalid].disabled:hover {
|
|
196
197
|
border-color: var(--kd-color-border-ui-disabled);
|
|
197
198
|
}
|
|
198
|
-
input[type=checkbox][invalid].disabled[checked] {
|
|
199
|
-
border-color: transparent;
|
|
200
|
-
}
|
|
201
|
-
input[type=checkbox][invalid].disabled[checked]:hover {
|
|
202
|
-
border-color: transparent;
|
|
203
|
-
background: var(--kd-color-background-ui-default-disabled);
|
|
204
|
-
}
|
|
205
199
|
input[type=checkbox][invalid].disabled:active, input[type=checkbox][invalid].disabled:focus-visible {
|
|
206
200
|
background-color: transparent;
|
|
207
201
|
border-color: var(--kd-color-border-ui-disabled);
|
|
208
202
|
outline-color: transparent;
|
|
209
203
|
}
|
|
210
|
-
input[type=checkbox][invalid]:hover {
|
|
204
|
+
input[type=checkbox][invalid]:not(.disabled):hover {
|
|
211
205
|
background: transparent;
|
|
212
206
|
border-color: var(--kd-color-background-button-primary-destructive-hover);
|
|
213
207
|
}
|
|
214
208
|
input[type=checkbox][invalid]:focus-visible {
|
|
215
|
-
border-color: var(--kd-color-
|
|
216
|
-
outline-color: var(--kd-color-
|
|
209
|
+
border-color: var(--kd-color-icon-destructive);
|
|
210
|
+
outline-color: var(--kd-color-icon-destructive);
|
|
217
211
|
}
|
|
218
212
|
input[type=checkbox][invalid]:active {
|
|
219
213
|
background: var(--kd-color-background-button-primary-destructive-pressed);
|
|
@@ -229,7 +223,7 @@ input[type=checkbox][invalid]:active {
|
|
|
229
223
|
position: absolute;
|
|
230
224
|
white-space: nowrap;
|
|
231
225
|
width: 1px;
|
|
232
|
-
}`;let k=(()=>{var o,k,p,h,v,m,g,y,D;let x,w,f,M,I,N,Z,A,T,L,G,j=[
|
|
226
|
+
}`;let k=(()=>{var o,k,p,h,v,m,g,y,D;let x,w,f,M,I,N,Z,A,T,L,G,j=[n("kyn-checkbox")],W=[],C=b,O=[],H=[],U=[],B=[],S=[],z=[],Q=[],E=[],$=[],P=[],F=[],J=[],X=[],R=[],q=[],V=[],Y=[],_=[];return w=class extends C{get value(){return i(this,o,"f")}set value(e){r(this,o,e,"f")}get name(){return i(this,k,"f")}set name(e){r(this,k,e,"f")}get checked(){return i(this,p,"f")}set checked(e){r(this,p,e,"f")}get required(){return i(this,h,"f")}set required(e){r(this,h,e,"f")}get disabled(){return i(this,v,"f")}set disabled(e){r(this,v,e,"f")}get notFocusable(){return i(this,m,"f")}set notFocusable(e){r(this,m,e,"f")}get invalid(){return i(this,g,"f")}set invalid(e){r(this,g,e,"f")}get visiblyHidden(){return i(this,y,"f")}set visiblyHidden(e){r(this,y,e,"f")}get indeterminate(){return i(this,D,"f")}set indeterminate(e){r(this,D,e,"f")}render(){return l`
|
|
233
227
|
<label
|
|
234
228
|
?disabled=${this.disabled}
|
|
235
229
|
?invalid=${this.invalid}
|
|
@@ -253,5 +247,5 @@ input[type=checkbox][invalid]:active {
|
|
|
253
247
|
.indeterminate=${this.indeterminate}
|
|
254
248
|
/>
|
|
255
249
|
</label>
|
|
256
|
-
`}handleChange(e){const a=new CustomEvent("on-checkbox-change",{bubbles:!0,composed:!0,detail:{checked:e.target.checked,value:e.target.value,origEvent:e}});this.dispatchEvent(a)}constructor(){super(...arguments),o.set(this,t(this,O,"")),k.set(this,(t(this,H),t(this,U,""))),p.set(this,(t(this,B),t(this,S,!1))),h.set(this,(t(this,z),t(this,Q,!1))),v.set(this,(t(this,E),t(this,$,!1))),m.set(this,(t(this,P),t(this,F,!1))),g.set(this,(t(this,J),t(this,X,!1))),y.set(this,(t(this,R),t(this,q,!1))),D.set(this,(t(this,V),t(this,Y,!1))),t(this,_)}},o=new WeakMap,k=new WeakMap,p=new WeakMap,h=new WeakMap,v=new WeakMap,m=new WeakMap,g=new WeakMap,y=new WeakMap,D=new WeakMap,e(w,"Checkbox"),(()=>{var e;const t="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=C[Symbol.metadata])&&void 0!==e?e:null):void 0;f=[s({type:String})],M=[s({type:String})],I=[s({type:Boolean,reflect:!0})],N=[s({type:Boolean})],Z=[s({type:Boolean})],A=[s({type:Boolean})],T=[s({type:Boolean})],L=[s({type:Boolean})],G=[s({type:Boolean})],a(w,null,f,{kind:"accessor",name:"value",static:!1,private:!1,access:{has:e=>"value"in e,get:e=>e.value,set:(e,a)=>{e.value=a}},metadata:t},O,H),a(w,null,M,{kind:"accessor",name:"name",static:!1,private:!1,access:{has:e=>"name"in e,get:e=>e.name,set:(e,a)=>{e.name=a}},metadata:t},U,B),a(w,null,I,{kind:"accessor",name:"checked",static:!1,private:!1,access:{has:e=>"checked"in e,get:e=>e.checked,set:(e,a)=>{e.checked=a}},metadata:t},S,z),a(w,null,N,{kind:"accessor",name:"required",static:!1,private:!1,access:{has:e=>"required"in e,get:e=>e.required,set:(e,a)=>{e.required=a}},metadata:t},Q,E),a(w,null,Z,{kind:"accessor",name:"disabled",static:!1,private:!1,access:{has:e=>"disabled"in e,get:e=>e.disabled,set:(e,a)=>{e.disabled=a}},metadata:t},$,P),a(w,null,A,{kind:"accessor",name:"notFocusable",static:!1,private:!1,access:{has:e=>"notFocusable"in e,get:e=>e.notFocusable,set:(e,a)=>{e.notFocusable=a}},metadata:t},F,J),a(w,null,T,{kind:"accessor",name:"invalid",static:!1,private:!1,access:{has:e=>"invalid"in e,get:e=>e.invalid,set:(e,a)=>{e.invalid=a}},metadata:t},X,R),a(w,null,L,{kind:"accessor",name:"visiblyHidden",static:!1,private:!1,access:{has:e=>"visiblyHidden"in e,get:e=>e.visiblyHidden,set:(e,a)=>{e.visiblyHidden=a}},metadata:t},q,V),a(w,null,G,{kind:"accessor",name:"indeterminate",static:!1,private:!1,access:{has:e=>"indeterminate"in e,get:e=>e.indeterminate,set:(e,a)=>{e.indeterminate=a}},metadata:t},Y,_),a(null,x={value:w},j,{kind:"class",name:w.name,metadata:t},null,W),w=x.value,t&&Object.defineProperty(w,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})})(),w.styles=
|
|
250
|
+
`}handleChange(e){const a=new CustomEvent("on-checkbox-change",{bubbles:!0,composed:!0,detail:{checked:e.target.checked,value:e.target.value,origEvent:e}});this.dispatchEvent(a)}constructor(){super(...arguments),o.set(this,t(this,O,"")),k.set(this,(t(this,H),t(this,U,""))),p.set(this,(t(this,B),t(this,S,!1))),h.set(this,(t(this,z),t(this,Q,!1))),v.set(this,(t(this,E),t(this,$,!1))),m.set(this,(t(this,P),t(this,F,!1))),g.set(this,(t(this,J),t(this,X,!1))),y.set(this,(t(this,R),t(this,q,!1))),D.set(this,(t(this,V),t(this,Y,!1))),t(this,_)}},o=new WeakMap,k=new WeakMap,p=new WeakMap,h=new WeakMap,v=new WeakMap,m=new WeakMap,g=new WeakMap,y=new WeakMap,D=new WeakMap,e(w,"Checkbox"),(()=>{var e;const t="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(e=C[Symbol.metadata])&&void 0!==e?e:null):void 0;f=[s({type:String})],M=[s({type:String})],I=[s({type:Boolean,reflect:!0})],N=[s({type:Boolean})],Z=[s({type:Boolean})],A=[s({type:Boolean})],T=[s({type:Boolean})],L=[s({type:Boolean})],G=[s({type:Boolean})],a(w,null,f,{kind:"accessor",name:"value",static:!1,private:!1,access:{has:e=>"value"in e,get:e=>e.value,set:(e,a)=>{e.value=a}},metadata:t},O,H),a(w,null,M,{kind:"accessor",name:"name",static:!1,private:!1,access:{has:e=>"name"in e,get:e=>e.name,set:(e,a)=>{e.name=a}},metadata:t},U,B),a(w,null,I,{kind:"accessor",name:"checked",static:!1,private:!1,access:{has:e=>"checked"in e,get:e=>e.checked,set:(e,a)=>{e.checked=a}},metadata:t},S,z),a(w,null,N,{kind:"accessor",name:"required",static:!1,private:!1,access:{has:e=>"required"in e,get:e=>e.required,set:(e,a)=>{e.required=a}},metadata:t},Q,E),a(w,null,Z,{kind:"accessor",name:"disabled",static:!1,private:!1,access:{has:e=>"disabled"in e,get:e=>e.disabled,set:(e,a)=>{e.disabled=a}},metadata:t},$,P),a(w,null,A,{kind:"accessor",name:"notFocusable",static:!1,private:!1,access:{has:e=>"notFocusable"in e,get:e=>e.notFocusable,set:(e,a)=>{e.notFocusable=a}},metadata:t},F,J),a(w,null,T,{kind:"accessor",name:"invalid",static:!1,private:!1,access:{has:e=>"invalid"in e,get:e=>e.invalid,set:(e,a)=>{e.invalid=a}},metadata:t},X,R),a(w,null,L,{kind:"accessor",name:"visiblyHidden",static:!1,private:!1,access:{has:e=>"visiblyHidden"in e,get:e=>e.visiblyHidden,set:(e,a)=>{e.visiblyHidden=a}},metadata:t},q,V),a(w,null,G,{kind:"accessor",name:"indeterminate",static:!1,private:!1,access:{has:e=>"indeterminate"in e,get:e=>e.indeterminate,set:(e,a)=>{e.indeterminate=a}},metadata:t},Y,_),a(null,x={value:w},j,{kind:"class",name:w.name,metadata:t},null,W),w=x.value,t&&Object.defineProperty(w,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})})(),w.styles=d(u),w.shadowRootOptions={...b.shadowRootOptions,delegatesFocus:!0},t(w,W),w})();export{k as Checkbox};
|
|
257
251
|
//# sourceMappingURL=checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sources":["../../../../src/components/reusable/checkbox/checkbox.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport CheckboxScss from './checkbox.scss?inline';\n\n/**\n * Checkbox.\n * @fires on-checkbox-change - Captures the change event and emits the selected value and original event details.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-checkbox')\nexport class Checkbox extends LitElement {\n static override styles = unsafeCSS(CheckboxScss);\n\n /** @ignore */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /** Checkbox value. */\n @property({ type: String })\n accessor value = '';\n\n /**\n * Checkbox name, inherited from the parent group.\n * @ignore\n */\n @property({ type: String })\n accessor name = '';\n\n /**\n * Checkbox checked state, inherited from the parent group if value matches.\n * @internal\n */\n @property({ type: Boolean, reflect: true })\n accessor checked = false;\n\n /**\n * Makes the input required, inherited from the parent group.\n * @internal\n */\n @property({ type: Boolean })\n accessor required = false;\n\n /**\n * Checkbox disabled state, inherited from the parent group.\n */\n @property({ type: Boolean })\n accessor disabled = false;\n\n /**\n * Prevent checkbox from being focusable. Disables it functionally but not visually.\n */\n @property({ type: Boolean })\n accessor notFocusable = false;\n\n /**\n * Checkbox group invalid state, inherited from the parent group.\n * @internal\n */\n @property({ type: Boolean })\n accessor invalid = false;\n\n /**\n * Determines whether the label should be hidden from visual view but remain accessible\n * to screen readers for accessibility purposes.\n */\n @property({ type: Boolean })\n accessor visiblyHidden = false;\n\n /** Determines whether the checkbox is in an indeterminate state. */\n @property({ type: Boolean })\n accessor indeterminate = false;\n\n override render() {\n return html`\n <label\n ?disabled=${this.disabled}\n ?invalid=${this.invalid}\n class=\"${this.visiblyHidden ? 'label-hidden' : ''}\"\n >\n <span class=${classMap({ 'sr-only': this.visiblyHidden })}>\n <slot></slot>\n </span>\n\n <input\n class=${this.disabled ? 'disabled' : ''}\n type=\"checkbox\"\n name=${this.name}\n value=${this.value}\n .checked=${this.checked}\n ?checked=${this.checked}\n ?required=${this.required}\n ?disabled=${this.disabled || this.notFocusable}\n ?invalid=${this.invalid}\n @change=${(e: any) => this.handleChange(e)}\n .indeterminate=${this.indeterminate}\n />\n </label>\n `;\n }\n\n private handleChange(e: any) {\n // emit selected value, bubble so it can be captured by the checkbox group\n const event = new CustomEvent('on-checkbox-change', {\n bubbles: true,\n composed: true,\n detail: {\n checked: e.target.checked,\n value: e.target.value,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-checkbox': Checkbox;\n }\n}\n"],"names":["Checkbox","customElement","LitElement","_classThis","_classSuper","value","__classPrivateFieldGet","this","_Checkbox_value_accessor_storage","__classPrivateFieldSet","name","_Checkbox_name_accessor_storage","checked","_Checkbox_checked_accessor_storage","required","_Checkbox_required_accessor_storage","disabled","_Checkbox_disabled_accessor_storage","notFocusable","_Checkbox_notFocusable_accessor_storage","invalid","_Checkbox_invalid_accessor_storage","visiblyHidden","_Checkbox_visiblyHidden_accessor_storage","indeterminate","_Checkbox_indeterminate_accessor_storage","render","html","classMap","e","handleChange","event","CustomEvent","bubbles","composed","detail","target","origEvent","dispatchEvent","set","__runInitializers","_value_initializers","_value_extraInitializers","_name_initializers","_name_extraInitializers","_checked_initializers","_checked_extraInitializers","_required_initializers","_required_extraInitializers","_disabled_initializers","_disabled_extraInitializers","_notFocusable_initializers","_notFocusable_extraInitializers","_invalid_initializers","_invalid_extraInitializers","_visiblyHidden_initializers","_visiblyHidden_extraInitializers","_indeterminate_initializers","_value_decorators","property","type","String","_name_decorators","Boolean","reflect","_required_decorators","_disabled_decorators","_notFocusable_decorators","_invalid_decorators","_visiblyHidden_decorators","_indeterminate_decorators","__esDecorate","kind","static","private","access","has","obj","get","metadata","_metadata","_checked_decorators","_indeterminate_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","CheckboxScss","shadowRootOptions","delegatesFocus"],"mappings":"
|
|
1
|
+
{"version":3,"file":"checkbox.js","sources":["../../../../src/components/reusable/checkbox/checkbox.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport CheckboxScss from './checkbox.scss?inline';\n\n/**\n * Checkbox.\n * @fires on-checkbox-change - Captures the change event and emits the selected value and original event details.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-checkbox')\nexport class Checkbox extends LitElement {\n static override styles = unsafeCSS(CheckboxScss);\n\n /** @ignore */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /** Checkbox value. */\n @property({ type: String })\n accessor value = '';\n\n /**\n * Checkbox name, inherited from the parent group.\n * @ignore\n */\n @property({ type: String })\n accessor name = '';\n\n /**\n * Checkbox checked state, inherited from the parent group if value matches.\n * @internal\n */\n @property({ type: Boolean, reflect: true })\n accessor checked = false;\n\n /**\n * Makes the input required, inherited from the parent group.\n * @internal\n */\n @property({ type: Boolean })\n accessor required = false;\n\n /**\n * Checkbox disabled state, inherited from the parent group.\n */\n @property({ type: Boolean })\n accessor disabled = false;\n\n /**\n * Prevent checkbox from being focusable. Disables it functionally but not visually.\n */\n @property({ type: Boolean })\n accessor notFocusable = false;\n\n /**\n * Checkbox group invalid state, inherited from the parent group.\n * @internal\n */\n @property({ type: Boolean })\n accessor invalid = false;\n\n /**\n * Determines whether the label should be hidden from visual view but remain accessible\n * to screen readers for accessibility purposes.\n */\n @property({ type: Boolean })\n accessor visiblyHidden = false;\n\n /** Determines whether the checkbox is in an indeterminate state. */\n @property({ type: Boolean })\n accessor indeterminate = false;\n\n override render() {\n return html`\n <label\n ?disabled=${this.disabled}\n ?invalid=${this.invalid}\n class=\"${this.visiblyHidden ? 'label-hidden' : ''}\"\n >\n <span class=${classMap({ 'sr-only': this.visiblyHidden })}>\n <slot></slot>\n </span>\n\n <input\n class=${this.disabled ? 'disabled' : ''}\n type=\"checkbox\"\n name=${this.name}\n value=${this.value}\n .checked=${this.checked}\n ?checked=${this.checked}\n ?required=${this.required}\n ?disabled=${this.disabled || this.notFocusable}\n ?invalid=${this.invalid}\n @change=${(e: any) => this.handleChange(e)}\n .indeterminate=${this.indeterminate}\n />\n </label>\n `;\n }\n\n private handleChange(e: any) {\n // emit selected value, bubble so it can be captured by the checkbox group\n const event = new CustomEvent('on-checkbox-change', {\n bubbles: true,\n composed: true,\n detail: {\n checked: e.target.checked,\n value: e.target.value,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-checkbox': Checkbox;\n }\n}\n"],"names":["Checkbox","customElement","LitElement","_classThis","_classSuper","value","__classPrivateFieldGet","this","_Checkbox_value_accessor_storage","__classPrivateFieldSet","name","_Checkbox_name_accessor_storage","checked","_Checkbox_checked_accessor_storage","required","_Checkbox_required_accessor_storage","disabled","_Checkbox_disabled_accessor_storage","notFocusable","_Checkbox_notFocusable_accessor_storage","invalid","_Checkbox_invalid_accessor_storage","visiblyHidden","_Checkbox_visiblyHidden_accessor_storage","indeterminate","_Checkbox_indeterminate_accessor_storage","render","html","classMap","e","handleChange","event","CustomEvent","bubbles","composed","detail","target","origEvent","dispatchEvent","set","__runInitializers","_value_initializers","_value_extraInitializers","_name_initializers","_name_extraInitializers","_checked_initializers","_checked_extraInitializers","_required_initializers","_required_extraInitializers","_disabled_initializers","_disabled_extraInitializers","_notFocusable_initializers","_notFocusable_extraInitializers","_invalid_initializers","_invalid_extraInitializers","_visiblyHidden_initializers","_visiblyHidden_extraInitializers","_indeterminate_initializers","_value_decorators","property","type","String","_name_decorators","Boolean","reflect","_required_decorators","_disabled_decorators","_notFocusable_decorators","_invalid_decorators","_visiblyHidden_decorators","_indeterminate_decorators","__esDecorate","kind","static","private","access","has","obj","get","metadata","_metadata","_checked_decorators","_indeterminate_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","CheckboxScss","shadowRootOptions","delegatesFocus"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kyndryl-design-system/shidoka-applications",
|
|
3
|
-
"version": "2.59.
|
|
3
|
+
"version": "2.59.2",
|
|
4
4
|
"description": "Shidoka Web Components for Applications",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "index.js",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"@typescript-eslint/parser": "^5.48.1",
|
|
70
70
|
"@vitest/browser": "^3.2.4",
|
|
71
71
|
"@vitest/coverage-v8": "^3.2.4",
|
|
72
|
-
"axe-playwright": "^2.
|
|
72
|
+
"axe-playwright": "^2.2.2",
|
|
73
73
|
"chromatic": "^11.2.0",
|
|
74
74
|
"eslint": "^8.57.0",
|
|
75
75
|
"eslint-plugin-lit-a11y": "^1.1.0-next.1",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"husky": "^8.0.3",
|
|
78
78
|
"lint-staged": "^15.4.3",
|
|
79
79
|
"lit-analyzer": "^2.0.3",
|
|
80
|
-
"playwright": "^1.55.
|
|
80
|
+
"playwright": "^1.55.1",
|
|
81
81
|
"postcss": "^8.4.21",
|
|
82
82
|
"prettier": "^2.8.2",
|
|
83
83
|
"prismjs-components-importer": "^0.2.0",
|