@aquera/nile-elements 0.1.14 → 0.1.16

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.
Files changed (44) hide show
  1. package/README.md +8 -0
  2. package/demo/index.html +4 -72
  3. package/demo/variables.css +19 -58
  4. package/demo/variables_v2.css +0 -2
  5. package/dist/nile-button/nile-button.css.cjs.js +1 -1
  6. package/dist/nile-button/nile-button.css.cjs.js.map +1 -1
  7. package/dist/nile-button/nile-button.css.esm.js +77 -83
  8. package/dist/nile-checkbox/nile-checkbox.cjs.js +1 -1
  9. package/dist/nile-checkbox/nile-checkbox.cjs.js.map +1 -1
  10. package/dist/nile-checkbox/nile-checkbox.esm.js +11 -18
  11. package/dist/nile-checkbox/nile-checkbox.test.cjs.js +1 -1
  12. package/dist/nile-checkbox/nile-checkbox.test.cjs.js.map +1 -1
  13. package/dist/nile-checkbox/nile-checkbox.test.esm.js +2 -2
  14. package/dist/nile-form-group/nile-form-group.css.cjs.js +1 -1
  15. package/dist/nile-form-group/nile-form-group.css.cjs.js.map +1 -1
  16. package/dist/nile-form-group/nile-form-group.css.esm.js +1 -1
  17. package/dist/nile-stepper-item/nile-stepper-item.css.cjs.js +1 -1
  18. package/dist/nile-stepper-item/nile-stepper-item.css.cjs.js.map +1 -1
  19. package/dist/nile-stepper-item/nile-stepper-item.css.esm.js +0 -1
  20. package/dist/nile-toast/nile-toast.cjs.js +1 -1
  21. package/dist/nile-toast/nile-toast.cjs.js.map +1 -1
  22. package/dist/nile-toast/nile-toast.esm.js +3 -3
  23. package/dist/src/nile-button/nile-button.css.js +77 -83
  24. package/dist/src/nile-button/nile-button.css.js.map +1 -1
  25. package/dist/src/nile-checkbox/nile-checkbox.js +5 -12
  26. package/dist/src/nile-checkbox/nile-checkbox.js.map +1 -1
  27. package/dist/src/nile-checkbox/nile-checkbox.test.js +5 -17
  28. package/dist/src/nile-checkbox/nile-checkbox.test.js.map +1 -1
  29. package/dist/src/nile-form-group/nile-form-group.css.js +1 -1
  30. package/dist/src/nile-form-group/nile-form-group.css.js.map +1 -1
  31. package/dist/src/nile-stepper-item/nile-stepper-item.css.js +0 -1
  32. package/dist/src/nile-stepper-item/nile-stepper-item.css.js.map +1 -1
  33. package/dist/src/nile-toast/nile-toast.d.ts +1 -0
  34. package/dist/src/nile-toast/nile-toast.js +5 -1
  35. package/dist/src/nile-toast/nile-toast.js.map +1 -1
  36. package/dist/tsconfig.tsbuildinfo +1 -1
  37. package/package.json +1 -1
  38. package/src/nile-button/nile-button.css.ts +77 -83
  39. package/src/nile-checkbox/nile-checkbox.test.ts +6 -21
  40. package/src/nile-checkbox/nile-checkbox.ts +5 -12
  41. package/src/nile-form-group/nile-form-group.css.ts +1 -1
  42. package/src/nile-stepper-item/nile-stepper-item.css.ts +0 -1
  43. package/src/nile-toast/nile-toast.ts +3 -1
  44. package/vscode-html-custom-data.json +5 -1
package/dist/nile-button/nile-button.css.esm.js CHANGED
@@ -59,158 +59,158 @@ import{css as o}from"lit";const t=o`
59
59
 
60
60
  /* Primary */
61
61
  .button--standard.button--primary {
62
- background-color: var(--nile-colors-button-primary);
63
- border-color: var(--nile-colors-button-primary-border);
64
- color: var(--nile-colors-button-primary-text);
62
+ background-color: var(--nile-colors-primary-600);
63
+ border-color: var(--nile-colors-primary-600);
64
+ color: var(--nile-colors-white-base);
65
65
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
66
66
  }
67
67
 
68
68
  .button--standard.button--primary:hover:not(.button--disabled) {
69
- background-color: var(--nile-colors-button-primary-hover);
70
- border-color: var(--nile-colors-button-primary-hover);
71
- color: var(--nile-colors-button-primary-text);
69
+ background-color: var(--nile-colors-primary-700);
70
+ border-color: var(--nile-colors-primary-700);
71
+ color: var(--nile-colors-white-base);
72
72
  }
73
73
 
74
74
  .button--standard.button--primary:active:not(.button--disabled) {
75
- background-color: var(--nile-colors-button-primary-pressed);
76
- border-color: var(--nile-colors-button-primary-pressed-border);
77
- color: var(--nile-colors-button-primary-text);
75
+ background-color: var(--nile-colors-primary-700);
76
+ border-color: var(--nile-colors-primary-900);
77
+ color: var(--nile-colors-white-base);
78
78
  box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),
79
79
  0px 0px 0px 4px rgba(0, 94, 166, 0.15);
80
80
  }
81
81
 
82
82
  .button--standard.button--primary.button--disabled {
83
- background-color: var(--nile-colors-button-primary-disabled);
84
- border-color: var(--nile-colors-button-primary-disabled);
85
- color: var(--nile-colors-button-primary-disabled-text);
83
+ background-color: var(--nile-colors-neutral-700);
84
+ border-color: var(--nile-colors-neutral-700);
85
+ color: var(--nile-colors-neutral-500);
86
86
  cursor: not-allowed;
87
87
  }
88
88
 
89
89
  .button--standard.button--primary.button--disabled:hover,
90
90
  .button--standard.button--primary.button--disabled:active {
91
- background-color: var(--nile-colors-button-primary-disabled);
92
- border-color: var(--nile-colors-button-primary-disabled);
93
- color: var(--nile-colors-button-primary-disabled-text);
91
+ background-color: var(--nile-colors-neutral-700);
92
+ border-color: var(--nile-colors-neutral-700);
93
+ color: var(--nile-colors-neutral-500);
94
94
  cursor: not-allowed;
95
95
  }
96
96
 
97
97
  /* Secondary */
98
98
  .button--standard.button--secondary {
99
- background-color: var(--nile-colors-button-secondary);
100
- border-color: var(--nile-colors-button-secondary-border);
101
- color: var(--nile-colors-button-secondary-text);
99
+ background-color: var(--nile-colors-neutral-400);
100
+ border-color: var(--nile-colors-neutral-400);
101
+ color: var(--nile-colors-dark-900);
102
102
  }
103
103
 
104
104
  .button--standard.button--secondary:hover:not(.button--disabled) {
105
- background-color: var(--nile-colors-button-secondary-hover);
106
- border-color: var(--nile-colors-button-secondary-border);
107
- color: var(--nile-colors-button-secondary-text);
105
+ background-color: var(--nile-colors-neutral-500);
106
+ border-color: var(--nile-colors-neutral-400);
107
+ color: var(--nile-colors-dark-900);
108
108
  }
109
109
 
110
110
  .button--standard.button--secondary:active:not(.button--disabled) {
111
- background-color: var(--nile-colors-button-secondary-pressed);
112
- border-color: var(--nile-colors-button-secondary-pressed-border);
113
- color: var(--nile-colors-button-secondary-text);
111
+ background-color: var(--nile-colors-neutral-500);
112
+ border-color: var(--nile-colors-neutral-700);
113
+ color: var(--nile-colors-dark-900);
114
114
  }
115
115
 
116
116
  .button--standard.button--secondary.button--disabled {
117
- background-color: var(--nile-colors-button-secondary-disabled);
118
- border-color: var(--nile-colors-button-secondary-disabled-border);
119
- color: var(--nile-colors-button-secondary-disabled-text);
117
+ background-color: var(--nile-colors-neutral-400);
118
+ border-color: var(--nile-colors-neutral-400);
119
+ color: var(--nile-colors-dark-500);
120
120
  cursor: not-allowed;
121
121
  }
122
122
 
123
123
  .button--standard.button--secondary.button--disabled:hover,
124
124
  .button--standard.button--secondary.button--disabled:active {
125
- background-color: var(--nile-colors-button-secondary-disabled);
126
- border-color: var(--nile-colors-button-secondary-disabled-border);
127
- color: var(--nile-colors-button-secondary-disabled-text);
125
+ background-color: var(--nile-colors-neutral-400);
126
+ border-color: var(--nile-colors-neutral-400);
127
+ color: var(--nile-colors-dark-500);
128
128
  cursor: not-allowed;
129
129
  }
130
130
 
131
131
  /* Tertiary */
132
132
  .button--standard.button--tertiary {
133
- background-color: var(--nile-colors-button-tertiary);
134
- border-color: var(--nile-colors-button-tertiary-border);
135
- color: var(--nile-colors-button-tertiary-text);
133
+ background-color: var(--nile-colors-white-base);
134
+ border-color: var(--nile-colors-neutral-500);
135
+ color: var(--nile-colors-dark-900);
136
136
  }
137
137
 
138
138
  .button--standard.button--tertiary:hover:not(.button--disabled) {
139
- background-color: var(--nile-colors-button-tertiary-hover);
139
+ background-color: var(--nile-colors-dark-200);
140
140
  border-color: var(--nile-colors-neutral-500);
141
- color: var(--nile-colors-button-tertiary-text);
141
+ color: var(--nile-colors-dark-900);
142
142
  }
143
143
 
144
144
  .button--standard.button--tertiary:active:not(.button--disabled) {
145
- background-color: var(--nile-colors-button-tertiary-pressed);
146
- border-color: var(--nile-colors-button-tertiary-pressed-border);
147
- color: var(--nile-colors-button-tertiary-text);
145
+ background-color: var(--nile-colors-neutral-400);
146
+ border-color: var(--nile-colors-neutral-700);
147
+ color: var(--nile-colors-dark-900);
148
148
  }
149
149
 
150
150
  .button--standard.button--tertiary.button--disabled,
151
151
  .button--standard.button--tertiary.button--disabled:hover,
152
152
  .button--standard.button--tertiary.button--disabled:active {
153
153
  border-color: var(--nile-colors-neutral-500);
154
- background-color: var(--nile-colors-button-tertiary-disabled);
155
- color: var(--nile-colors-button-tertiary-disabled-text);
154
+ background-color: var(--nile-colors-white-base);
155
+ color: var(--nile-colors-neutral-500);
156
156
  cursor: not-allowed;
157
157
  box-shadow: none;
158
158
  }
159
159
 
160
160
  /* ghost */
161
161
  .button--standard.button--ghost {
162
- background-color: var(--nile-colors-button-tertiary);
162
+ background-color: var(--nile-colors-white-base);
163
163
  border-color: transparent;
164
- color: var(--nile-colors-button-tertiary-text);
164
+ color: var(--nile-colors-dark-900);
165
165
  }
166
166
 
167
167
  .button--standard.button--ghost:hover:not(.button--disabled) {
168
- background-color: var(--nile-colors-button-tertiary-hover);
168
+ background-color: var(--nile-colors-dark-200);
169
169
  border-color: transparent;
170
- color: var(--nile-colors-button-tertiary-text);
170
+ color: var(--nile-colors-dark-900);
171
171
  }
172
172
 
173
173
  .button--standard.button--ghost:active:not(.button--disabled) {
174
- background-color: var(--nile-colors-button-tertiary-pressed);
174
+ background-color: var(--nile-colors-neutral-400);
175
175
  border-color: transparent;
176
- color: var(--nile-colors-button-tertiary-text);
176
+ color: var(--nile-colors-dark-900);
177
177
  }
178
178
 
179
179
  .button--standard.button--ghost.button--disabled,
180
180
  .button--standard.button--ghost.button--disabled:hover,
181
181
  .button--standard.button--ghost.button--disabled:active {
182
182
  border-color: transparent;
183
- background-color: var(--nile-colors-button-tertiary-disabled);
184
- color: var(--nile-colors-button-tertiary-disabled-text);
183
+ background-color: var(--nile-colors-white-base);
184
+ color: var(--nile-colors-neutral-500);
185
185
  cursor: not-allowed;
186
186
  box-shadow: none;
187
187
  }
188
188
 
189
189
  /* caution */
190
190
  .button--standard.button--caution {
191
- background-color: var(--nile-colors-button-caution);
192
- border-color: var(--nile-colors-button-caution);
193
- color: var(--nile-colors-button-caution-text);
191
+ background-color: var(--nile-colors-red-500);
192
+ border-color: var(--nile-colors-red-500);
193
+ color: var(--nile-colors-white-base);
194
194
  }
195
195
 
196
196
  .button--standard.button--caution:hover:not(.button--disabled) {
197
- background-color: var(--nile-colors-button-caution-hover);
198
- border-color: var(--nile-colors-button-caution-hover);
199
- color: var(--nile-colors-button-caution-text);
197
+ background-color: var(--nile-colors-red-700);
198
+ border-color: var(--nile-colors-red-700);
199
+ color: var(--nile-colors-white-base);
200
200
  }
201
201
 
202
202
  .button--standard.button--caution:active:not(.button--disabled) {
203
- background-color: var(--nile-colors-button-caution-pressed);
204
- border-color: var(--nile-colors-button-caution-pressed-border);
205
- color: var(--nile-colors-button-caution-text);
203
+ background-color: var(--nile-colors-red-700);
204
+ border-color: #820B0B;
205
+ color: var(--nile-colors-white-base);
206
206
  }
207
207
 
208
208
  .button--standard.button--caution.button--disabled,
209
209
  .button--standard.button--caution.button--disabled:hover,
210
210
  .button--standard.button--caution.button--disabled:active {
211
- background-color: var(--nile-colors-button-caution-disabled);
212
- border-color: var(--nile-colors-button-caution-disabled);
213
- color: var(--nile-colors-button-caution-disabled-text);
211
+ background-color: var(--nile-colors-neutral-500);
212
+ border-color: var(--nile-colors-neutral-500);
213
+ color: var(--nile-colors-neutral-400);
214
214
  }
215
215
 
216
216
  /* destructive */
@@ -282,7 +282,7 @@ import{css as o}from"lit";const t=o`
282
282
 
283
283
  .button--standard.button--secondary-grey.button--disabled {
284
284
  background-color: #eaecf0;
285
- border-color: var(--nile-colors-button-primary-disabled);
285
+ border-color: var(--nile-colors-neutral-700);
286
286
  color: #98a2b3;
287
287
  cursor: not-allowed;
288
288
  }
@@ -290,7 +290,7 @@ import{css as o}from"lit";const t=o`
290
290
  .button--standard.button--secondary-grey.button--disabled:hover,
291
291
  .button--standard.button--secondary-grey.button--disabled:active {
292
292
  background-color: #eaecf0;
293
- border-color: var(--nile-colors-button-primary-disabled);
293
+ border-color: var(--nile-colors-neutral-700);
294
294
  color: #98a2b3;
295
295
  cursor: not-allowed;
296
296
  }
@@ -335,78 +335,72 @@ import{css as o}from"lit";const t=o`
335
335
 
336
336
  /* Primary Variant - Nile Icon Fill */
337
337
  .button--standard.button--primary ::slotted(nile-icon:not([color])) {
338
- --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
338
+ --nile-svg-fill: var(--nile-colors-white-base) !important;
339
339
  }
340
340
  .button--standard.button--primary:hover:not(.button--disabled)
341
341
  ::slotted(nile-icon:not([color])),
342
342
  .button--standard.button--primary:active:not(.button--disabled)
343
343
  ::slotted(nile-icon:not([color])) {
344
- --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
344
+ --nile-svg-fill: var(--nile-colors-white-base) !important;
345
345
  }
346
346
  .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {
347
- --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;
347
+ --nile-svg-fill: var(--nile-colors-neutral-500) !important;
348
348
  }
349
349
 
350
350
  /* Secondary Variant */
351
351
  .button--standard.button--secondary ::slotted(nile-icon:not([color])) {
352
- --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
352
+ --nile-svg-fill: var(--nile-colors-dark-900) !important;
353
353
  }
354
354
  .button--standard.button--secondary:hover:not(.button--disabled)
355
355
  ::slotted(nile-icon:not([color])),
356
356
  .button--standard.button--secondary:active:not(.button--disabled)
357
357
  ::slotted(nile-icon:not([color])) {
358
- --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
358
+ --nile-svg-fill: var(--nile-colors-dark-900) !important;
359
359
  }
360
360
  .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {
361
- --nile-svg-fill: var(
362
- --nile-colors-button-secondary-disabled-text
363
- ) !important;
361
+ --nile-svg-fill: var(--nile-colors-dark-500) !important;
364
362
  }
365
363
 
366
364
  /* Tertiary Variant */
367
365
  .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {
368
- --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
366
+ --nile-svg-fill: var(--nile-colors-dark-900) !important;
369
367
  }
370
368
  .button--standard.button--tertiary:hover:not(.button--disabled)
371
369
  ::slotted(nile-icon:not([color])),
372
370
  .button--standard.button--tertiary:active:not(.button--disabled)
373
371
  ::slotted(nile-icon:not([color])) {
374
- --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
372
+ --nile-svg-fill: var(--nile-colors-dark-900) !important;
375
373
  }
376
374
  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {
377
- --nile-svg-fill: var(
378
- --nile-colors-button-tertiary-disabled-text
379
- ) !important;
375
+ --nile-svg-fill: var(--nile-colors-neutral-500) !important;
380
376
  }
381
377
 
382
378
  /* Ghost Variant */
383
379
  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {
384
- --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
380
+ --nile-svg-fill: var(--nile-colors-dark-900) !important;
385
381
  }
386
382
  .button--standard.button--ghost:hover:not(.button--disabled)
387
383
  ::slotted(nile-icon:not([color])),
388
384
  .button--standard.button--ghost:active:not(.button--disabled)
389
385
  ::slotted(nile-icon:not([color])) {
390
- --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
386
+ --nile-svg-fill: var(--nile-colors-dark-900) !important;
391
387
  }
392
388
  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {
393
- --nile-svg-fill: var(
394
- --nile-colors-button-tertiary-disabled-text
395
- ) !important;
389
+ --nile-svg-fill: var(--nile-colors-neutral-500) !important;
396
390
  }
397
391
 
398
392
  /* Caution Variant */
399
393
  .button--standard.button--caution ::slotted(nile-icon:not([color])) {
400
- --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
394
+ --nile-svg-fill: var(--nile-colors-white-base) !important;
401
395
  }
402
396
  .button--standard.button--caution:hover:not(.button--disabled)
403
397
  ::slotted(nile-icon:not([color])),
404
398
  .button--standard.button--caution:active:not(.button--disabled)
405
399
  ::slotted(nile-icon:not([color])) {
406
- --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
400
+ --nile-svg-fill: var(--nile-colors-white-base) !important;
407
401
  }
408
402
  .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {
409
- --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;
403
+ --nile-svg-fill: var(--nile-colors-neutral-400) !important;
410
404
  }
411
405
 
412
406
  /* destructive */
package/dist/nile-checkbox/nile-checkbox.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-checkbox.css.cjs.js","lit/directives/class-map.js","../internal/default-value.cjs.js","lit/directives/if-defined.js","lit/directives/live.js","../internal/watch.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var e,t,i,s,c,o,h,l,n,r,a,d,m,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,p;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,_toPropertyKey(descriptor.key),descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _get(){if(typeof Reflect!=="undefined"&&Reflect.get){_get=Reflect.get.bind();}else{_get=function _get(target,property,receiver){var base=_superPropBase(target,property);if(!base)return;var desc=Object.getOwnPropertyDescriptor(base,property);if(desc.get){return desc.get.call(arguments.length<3?target:receiver);}return desc.value;};}return _get.apply(this,arguments);}function _superPropBase(object,property){while(!Object.prototype.hasOwnProperty.call(object,property)){object=_getPrototypeOf(object);if(object===null)break;}return object;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}return{setters:[function(_tslib){e=_tslib.__decorate;},function(_lit){t=_lit.html;},function(_litDecoratorsJs){i=_litDecoratorsJs.query;s=_litDecoratorsJs.state;c=_litDecoratorsJs.property;o=_litDecoratorsJs.customElement;},function(_nileCheckboxCssCjsJs){h=_nileCheckboxCssCjsJs.s;},function(_litDirectivesClassMapJs){l=_litDirectivesClassMapJs.classMap;},function(_internalDefaultValueCjsJs){n=_internalDefaultValueCjsJs.d;},function(_litDirectivesIfDefinedJs){r=_litDirectivesIfDefinedJs.ifDefined;},function(_litDirectivesLiveJs){a=_litDirectivesLiveJs.live;},function(_internalWatchCjsJs){d=_internalWatchCjsJs.w;},function(_internalNileElementCjsJs){m=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",p=/*#__PURE__*/function(_m){function p(){var _this;_classCallCheck(this,p);_this=_callSuper(this,p),_this.hasFocus=!1,_this.title="",_this.name="",_this.size="medium",_this.disabled=!1,_this.checked=!1,_this.label="",_this.indeterminate=!1,_this.defaultChecked=!1,_this.helpText="",_this.errorMessage="",_this.showHelpText=!1,_this.form="",_this.required=!1;return _this;}_inherits(p,_m);return _createClass(p,[{key:"toggleHelpText",value:function toggleHelpText(){this.showHelpText=!this.showHelpText;}},{key:"handleClick",value:function handleClick(){this.checked=!this.checked,this.indeterminate=!1,this.emit("nile-change",{checked:this.checked}),this.emit("valueChange",{checked:this.checked});}},{key:"handleBlur",value:function handleBlur(){this.hasFocus=!1,this.emit("blur");}},{key:"handleInput",value:function handleInput(){this.emit("input");}},{key:"handleFocus",value:function handleFocus(){this.hasFocus=!0,this.emit("focus");}},{key:"handleStateChange",value:function handleStateChange(){this.input.checked=this.checked,this.input.indeterminate=this.indeterminate;}},{key:"click",value:function click(){this.input.click();}},{key:"focus",value:function focus(e){this.input.focus(e);}},{key:"blur",value:function blur(){this.input.blur();}},{key:"connectedCallback",value:function connectedCallback(){_get(_getPrototypeOf(p.prototype),"connectedCallback",this).call(this),this.updateHostClass(),this.emit("nile-init");}},{key:"disconnectedCallback",value:function disconnectedCallback(){_get(_getPrototypeOf(p.prototype),"disconnectedCallback",this).call(this),this.emit("nile-destroy");}},{key:"updated",value:function updated(e){_get(_getPrototypeOf(p.prototype),"updated",this).call(this,e),e.has("helpText")&&this.updateHostClass();}},{key:"updateHostClass",value:function updateHostClass(){this.helpText?this.classList.add("full-width"):this.classList.remove("full-width");}},{key:"render",value:function render(){var e=!!this.helpText,i=!!this.errorMessage;return t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <label\n part=\"base\"\n class=","\n >\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n title=","\n name=","\n value=","\n .indeterminate=","\n .checked=","\n .disabled=","\n .required=","\n aria-checked=","\n @click=","\n @input=","\n @blur=","\n @focus=","\n />\n \n <span\n part=\"control","","\"\n class=\"checkbox__control\"\n >\n ","\n ","\n </span>\n \n <div part=\"label\" class=\"checkbox__label\">\n ","\n <slot></slot>\n </div>\n </label>\n \n ","\n \n ","\n "])),l({checkbox:!0,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--indeterminate":this.indeterminate,"checkbox--medium":"medium"===this.size}),this.title,this.name,r(this.value),a(this.indeterminate),a(this.checked),this.disabled,this.required,this.checked?"true":"false",this.handleClick,this.handleInput,this.handleBlur,this.handleFocus,this.checked?" control--checked":"",this.indeterminate?" control--indeterminate":"",this.checked?t(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n <nile-icon\n part=\"checked-icon\"\n class=\"checkbox__checked-icon\"\n color=\"white\"\n library=\"system\"\n name=\"tick\"\n size=\"12\"\n ></nile-icon>\n "]))):"",!this.checked&&this.indeterminate?t(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n <nile-icon\n part=\"indeterminate-icon\"\n class=\"checkbox__indeterminate-icon\"\n library=\"system\"\n color=\"white\"\n name=\"minus\"\n size=\"12\"\n ></nile-icon>\n "]))):"","boolean"==typeof this.label?"":this.label,e?t(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n <nile-tooltip content=\"","\" placement=\"bottom\">\n <nile-icon\n name=\"question\"\n class=\"checkbox__helptext-icon\"\n ></nile-icon>\n </nile-tooltip>\n "])),this.helpText):"",i?t(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n <nile-form-error-message\n >","</nile-form-error-message\n >\n "])),this.errorMessage):"");}}]);}(m));p.styles=h,e([i('input[type="checkbox"]')],p.prototype,"input",void 0),e([s()],p.prototype,"hasFocus",void 0),e([c()],p.prototype,"title",void 0),e([c()],p.prototype,"name",void 0),e([c()],p.prototype,"value",void 0),e([c({reflect:!0})],p.prototype,"size",void 0),e([c({type:Boolean,reflect:!0})],p.prototype,"disabled",void 0),e([c({type:Boolean,reflect:!0})],p.prototype,"checked",void 0),e([c({type:String,reflect:!0})],p.prototype,"label",void 0),e([c({type:Boolean,reflect:!0})],p.prototype,"indeterminate",void 0),e([n("checked")],p.prototype,"defaultChecked",void 0),e([c({attribute:"help-text",reflect:!0})],p.prototype,"helpText",void 0),e([c({attribute:"error-message",reflect:!0})],p.prototype,"errorMessage",void 0),e([c({type:Boolean})],p.prototype,"showHelpText",void 0),e([c({reflect:!0})],p.prototype,"form",void 0),e([c({type:Boolean,reflect:!0})],p.prototype,"required",void 0),e([d(["checked","indeterminate"],{waitUntilFirstUpdate:!0})],p.prototype,"handleStateChange",null),_export("N",p=e([o("nile-checkbox")],p));}};});
1
+ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-checkbox.css.cjs.js","lit/directives/class-map.js","../internal/default-value.cjs.js","lit/directives/if-defined.js","lit/directives/live.js","../internal/watch.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var e,t,i,s,h,c,l,o,r,a,n,d,m,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,p;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,_toPropertyKey(descriptor.key),descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _get(){if(typeof Reflect!=="undefined"&&Reflect.get){_get=Reflect.get.bind();}else{_get=function _get(target,property,receiver){var base=_superPropBase(target,property);if(!base)return;var desc=Object.getOwnPropertyDescriptor(base,property);if(desc.get){return desc.get.call(arguments.length<3?target:receiver);}return desc.value;};}return _get.apply(this,arguments);}function _superPropBase(object,property){while(!Object.prototype.hasOwnProperty.call(object,property)){object=_getPrototypeOf(object);if(object===null)break;}return object;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}return{setters:[function(_tslib){e=_tslib.__decorate;},function(_lit){t=_lit.html;},function(_litDecoratorsJs){i=_litDecoratorsJs.query;s=_litDecoratorsJs.state;h=_litDecoratorsJs.property;c=_litDecoratorsJs.customElement;},function(_nileCheckboxCssCjsJs){l=_nileCheckboxCssCjsJs.s;},function(_litDirectivesClassMapJs){o=_litDirectivesClassMapJs.classMap;},function(_internalDefaultValueCjsJs){r=_internalDefaultValueCjsJs.d;},function(_litDirectivesIfDefinedJs){a=_litDirectivesIfDefinedJs.ifDefined;},function(_litDirectivesLiveJs){n=_litDirectivesLiveJs.live;},function(_internalWatchCjsJs){d=_internalWatchCjsJs.w;},function(_internalNileElementCjsJs){m=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",p=/*#__PURE__*/function(_m){function p(){var _this;_classCallCheck(this,p);_this=_callSuper(this,p),_this.hasFocus=!1,_this.title="",_this.name="",_this.size="medium",_this.disabled=!1,_this.checked=!1,_this.label="",_this.indeterminate=!1,_this.defaultChecked=!1,_this.helpText="",_this.errorMessage="",_this.showHelpText=!1,_this.form="",_this.required=!1;return _this;}_inherits(p,_m);return _createClass(p,[{key:"toggleHelpText",value:function toggleHelpText(){this.showHelpText=!this.showHelpText;}},{key:"handleClick",value:function handleClick(){this.checked=!this.checked,this.indeterminate=!1,this.emit("nile-change",{checked:this.checked}),this.emit("valueChange",{checked:this.checked});}},{key:"handleBlur",value:function handleBlur(){this.hasFocus=!1,this.emit("blur");}},{key:"handleInput",value:function handleInput(){this.emit("input");}},{key:"handleFocus",value:function handleFocus(){this.hasFocus=!0,this.emit("focus");}},{key:"handleStateChange",value:function handleStateChange(){this.input.checked=this.checked,this.input.indeterminate=this.indeterminate;}},{key:"click",value:function click(){this.input.click();}},{key:"focus",value:function focus(e){this.input.focus(e);}},{key:"blur",value:function blur(){this.input.blur();}},{key:"connectedCallback",value:function connectedCallback(){_get(_getPrototypeOf(p.prototype),"connectedCallback",this).call(this),this.updateHostClass(),this.emit("nile-init");}},{key:"disconnectedCallback",value:function disconnectedCallback(){_get(_getPrototypeOf(p.prototype),"disconnectedCallback",this).call(this),this.emit("nile-destroy");}},{key:"updated",value:function updated(e){_get(_getPrototypeOf(p.prototype),"updated",this).call(this,e),e.has("helpText")&&this.updateHostClass();}},{key:"updateHostClass",value:function updateHostClass(){this.helpText?this.classList.add("full-width"):this.classList.remove("full-width");}},{key:"render",value:function render(){var e=!!this.helpText,i=!!this.errorMessage;return t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <label\n part=\"base\"\n class=","\n >\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n title=","\n name=","\n value=","\n .indeterminate=","\n .checked=","\n .disabled=","\n .required=","\n aria-checked=","\n @click=","\n @input=","\n @blur=","\n @focus=","\n />\n\n <span\n part=\"control","","\"\n class=\"checkbox__control\"\n >\n ","\n ","\n </span>\n\n <div part=\"label\" class=\"checkbox__label\">\n ","\n <slot></slot>\n </div>\n </label>\n\n ","\n \n ","\n "])),o({checkbox:!0,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--indeterminate":this.indeterminate,"checkbox--medium":"medium"===this.size}),this.title,this.name,a(this.value),n(this.indeterminate),n(this.checked),this.disabled,this.required,this.checked?"true":"false",this.handleClick,this.handleInput,this.handleBlur,this.handleFocus,this.checked?" control--checked":"",this.indeterminate?" control--indeterminate":"",this.checked?t(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n <nile-icon\n part=\"checked-icon\"\n class=\"checkbox__checked-icon\"\n color=\"white\"\n library=\"system\"\n name=\"tick\"\n size=\"12\"\n ></nile-icon>\n "]))):"",!this.checked&&this.indeterminate?t(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n <nile-icon\n part=\"indeterminate-icon\"\n class=\"checkbox__indeterminate-icon\"\n library=\"system\"\n color=\"white\"\n name=\"minus\"\n size=\"12\"\n ></nile-icon>\n "]))):"","boolean"==typeof this.label?"":this.label,e?t(_templateObject4||(_templateObject4=_taggedTemplateLiteral([" <nile-form-help-text>","</nile-form-help-text> "])),this.helpText):"",i?t(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n <nile-form-error-message\n >","</nile-form-error-message\n >\n "])),this.errorMessage):"");}}]);}(m));p.styles=l,e([i('input[type="checkbox"]')],p.prototype,"input",void 0),e([s()],p.prototype,"hasFocus",void 0),e([h()],p.prototype,"title",void 0),e([h()],p.prototype,"name",void 0),e([h()],p.prototype,"value",void 0),e([h({reflect:!0})],p.prototype,"size",void 0),e([h({type:Boolean,reflect:!0})],p.prototype,"disabled",void 0),e([h({type:Boolean,reflect:!0})],p.prototype,"checked",void 0),e([h({type:String,reflect:!0})],p.prototype,"label",void 0),e([h({type:Boolean,reflect:!0})],p.prototype,"indeterminate",void 0),e([r("checked")],p.prototype,"defaultChecked",void 0),e([h({attribute:"help-text",reflect:!0})],p.prototype,"helpText",void 0),e([h({attribute:"error-message",reflect:!0})],p.prototype,"errorMessage",void 0),e([h({type:Boolean})],p.prototype,"showHelpText",void 0),e([h({reflect:!0})],p.prototype,"form",void 0),e([h({type:Boolean,reflect:!0})],p.prototype,"required",void 0),e([d(["checked","indeterminate"],{waitUntilFirstUpdate:!0})],p.prototype,"handleStateChange",null),_export("N",p=e([c("nile-checkbox")],p));}};});
2
2
  //# sourceMappingURL=nile-checkbox.cjs.js.map
package/dist/nile-checkbox/nile-checkbox.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-checkbox.cjs.js","sources":["../../../src/nile-checkbox/nile-checkbox.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n \nimport {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-checkbox.css';\n \nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { defaultValue } from '../internal/default-value';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n \n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n *\n * @dependency nile-icon\n *\n * @slot - The checkbox's label.\n *\n * @event nile-blur - Emitted when the checkbox loses focus.\n * @event nile-change - Emitted when the checked state changes.\n * @event nile-focus - Emitted when the checkbox gains focus.\n * @event nile-input - Emitted when the checkbox receives input.\n * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<nile-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n */\n \n/**\n * Nile icon component.\n *\n * @tag nile-checkbox\n *\n */\n@customElement('nile-checkbox')\nexport class NileCheckbox extends NileElement {\n constructor() {\n super();\n }\n \n static styles: CSSResultGroup = styles;\n \n @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n \n @state() private hasFocus = false;\n \n @property() title = ''; // make reactive to pass through\n \n /** The name of the checkbox, submitted as a name/value pair with form data. */\n @property() name = '';\n \n /** The current value of the checkbox, submitted as a name/value pair with form data. */\n @property() value: boolean;\n \n /** The checkbox's size. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n \n /** Disables the checkbox. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n \n /** Draws the checkbox in a checked state. */\n @property({ type: Boolean, reflect: true }) checked = false;\n \n /** Label, declared this property for backward compatibility of old component */\n @property({ type: String, reflect: true }) label = '';\n \n /**\n * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n */\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n \n /** The default value of the form control. Primarily used for resetting the form control. */\n @defaultValue('checked') defaultChecked = false;\n \n @property({ attribute: 'help-text', reflect: true }) helpText = '';\n \n @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n \n @property({ type: Boolean }) showHelpText = false;\n \n \n /**\n * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n * the same document or shadow root for this to work.\n */\n @property({ reflect: true }) form = '';\n \n /** Makes the checkbox a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n \n private toggleHelpText() {\n this.showHelpText = !this.showHelpText;\n }\n \n private handleClick() {\n this.checked = !this.checked;\n this.indeterminate = false;\n this.emit('nile-change',{checked: this.checked})\n this.emit('valueChange',{checked: this.checked})\n }\n \n private handleBlur() {\n this.hasFocus = false;\n this.emit('blur');\n }\n \n private handleInput() {\n this.emit('input');\n }\n \n private handleFocus() {\n this.hasFocus = true;\n this.emit('focus');\n }\n \n @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n handleStateChange() {\n this.input.checked = this.checked; // force a sync update\n this.input.indeterminate = this.indeterminate; // force a sync update\n }\n \n /** Simulates a click on the checkbox. */\n click() {\n this.input.click();\n }\n \n /** Sets focus on the checkbox. */\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n \n /** Removes focus from the checkbox. */\n blur() {\n this.input.blur();\n }\n \n connectedCallback() {\n super.connectedCallback();\n this.updateHostClass();\n this.emit('nile-init');\n }\n \n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n \n updated(changedProperties: Map<string | number | symbol, unknown>) {\n super.updated(changedProperties);\n if (changedProperties.has('helpText')) {\n this.updateHostClass();\n }\n }\n \n private updateHostClass() {\n if (this.helpText) {\n this.classList.add('full-width');\n } else {\n this.classList.remove('full-width');\n }\n }\n \n render() {\n const hasHelpText = this.helpText ? true : false;\n const hasErrorMessage = this.errorMessage ? true : false;\n \n return html`\n <label\n part=\"base\"\n class=${classMap({\n checkbox: true,\n 'checkbox--checked': this.checked,\n 'checkbox--disabled': this.disabled,\n 'checkbox--focused': this.hasFocus,\n 'checkbox--indeterminate': this.indeterminate,\n 'checkbox--medium': this.size === 'medium',\n })}\n >\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n title=${\n this\n .title /* An empty title prevents browser validation tooltips from appearing on hover */\n }\n name=${this.name}\n value=${ifDefined(this.value)}\n .indeterminate=${live(this.indeterminate)}\n .checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n aria-checked=${this.checked ? 'true' : 'false'}\n @click=${this.handleClick}\n @input=${this.handleInput}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n />\n \n <span\n part=\"control${this.checked ? ' control--checked' : ''}${this\n .indeterminate\n ? ' control--indeterminate'\n : ''}\"\n class=\"checkbox__control\"\n >\n ${this.checked\n ? html`\n <nile-icon\n part=\"checked-icon\"\n class=\"checkbox__checked-icon\"\n color=\"white\"\n library=\"system\"\n name=\"tick\"\n size=\"12\"\n ></nile-icon>\n `\n : ''}\n ${!this.checked && this.indeterminate\n ? html`\n <nile-icon\n part=\"indeterminate-icon\"\n class=\"checkbox__indeterminate-icon\"\n library=\"system\"\n color=\"white\"\n name=\"minus\"\n size=\"12\"\n ></nile-icon>\n `\n : ''}\n </span>\n \n <div part=\"label\" class=\"checkbox__label\">\n ${typeof this.label === 'boolean' ? '' : this.label}\n <slot></slot>\n </div>\n </label>\n \n ${hasHelpText\n ? html`\n <nile-tooltip content=\"${this.helpText}\" placement=\"bottom\">\n <nile-icon\n name=\"question\"\n class=\"checkbox__helptext-icon\"\n ></nile-icon>\n </nile-tooltip>\n `\n : ``}\n \n ${hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``}\n `;\n }\n}\n \nexport default NileCheckbox;\n \ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-checkbox': NileCheckbox;\n }\n}"],"names":["NileCheckbox","_m","p","constructor","super","this","hasFocus","title","name","size","disabled","checked","label","indeterminate","defaultChecked","helpText","errorMessage","showHelpText","form","required","_this","_inherits","_createClass","key","value","toggleHelpText","handleClick","emit","handleBlur","handleInput","handleFocus","handleStateChange","input","click","focus","options","blur","connectedCallback","updateHostClass","disconnectedCallback","updated","changedProperties","has","classList","add","remove","render","hasHelpText","hasErrorMessage","html","_templateObject","_taggedTemplateLiteral","classMap","checkbox","ifDefined","live","_templateObject2","_templateObject3","_templateObject4","_templateObject5","NileElement","styles","__decorate","query","prototype","state","property","reflect","type","Boolean","String","defaultValue","attribute","watch","waitUntilFirstUpdate","customElement"],"mappings":"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"}
1
+ {"version":3,"file":"nile-checkbox.cjs.js","sources":["../../../src/nile-checkbox/nile-checkbox.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n \nimport {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-checkbox.css';\n \nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { defaultValue } from '../internal/default-value';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n \n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n *\n * @dependency nile-icon\n *\n * @slot - The checkbox's label.\n *\n * @event nile-blur - Emitted when the checkbox loses focus.\n * @event nile-change - Emitted when the checked state changes.\n * @event nile-focus - Emitted when the checkbox gains focus.\n * @event nile-input - Emitted when the checkbox receives input.\n * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<nile-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n */\n \n/**\n * Nile icon component.\n *\n * @tag nile-checkbox\n *\n */\n@customElement('nile-checkbox')\nexport class NileCheckbox extends NileElement {\n constructor() {\n super();\n }\n \n static styles: CSSResultGroup = styles;\n \n @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n \n @state() private hasFocus = false;\n \n @property() title = ''; // make reactive to pass through\n \n /** The name of the checkbox, submitted as a name/value pair with form data. */\n @property() name = '';\n \n /** The current value of the checkbox, submitted as a name/value pair with form data. */\n @property() value: boolean;\n \n /** The checkbox's size. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n \n /** Disables the checkbox. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n \n /** Draws the checkbox in a checked state. */\n @property({ type: Boolean, reflect: true }) checked = false;\n \n /** Label, declared this property for backward compatibility of old component */\n @property({ type: String, reflect: true }) label = '';\n \n /**\n * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n */\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n \n /** The default value of the form control. Primarily used for resetting the form control. */\n @defaultValue('checked') defaultChecked = false;\n \n @property({ attribute: 'help-text', reflect: true }) helpText = '';\n \n @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n \n @property({ type: Boolean }) showHelpText = false;\n \n \n /**\n * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n * the same document or shadow root for this to work.\n */\n @property({ reflect: true }) form = '';\n \n /** Makes the checkbox a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n \n private toggleHelpText() {\n this.showHelpText = !this.showHelpText;\n }\n \n private handleClick() {\n this.checked = !this.checked;\n this.indeterminate = false;\n this.emit('nile-change',{checked: this.checked})\n this.emit('valueChange',{checked: this.checked})\n }\n \n private handleBlur() {\n this.hasFocus = false;\n this.emit('blur');\n }\n \n private handleInput() {\n this.emit('input');\n }\n \n private handleFocus() {\n this.hasFocus = true;\n this.emit('focus');\n }\n \n @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n handleStateChange() {\n this.input.checked = this.checked; // force a sync update\n this.input.indeterminate = this.indeterminate; // force a sync update\n }\n \n /** Simulates a click on the checkbox. */\n click() {\n this.input.click();\n }\n \n /** Sets focus on the checkbox. */\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n \n /** Removes focus from the checkbox. */\n blur() {\n this.input.blur();\n }\n \n connectedCallback() {\n super.connectedCallback();\n this.updateHostClass();\n this.emit('nile-init');\n }\n \n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n \n updated(changedProperties: Map<string | number | symbol, unknown>) {\n super.updated(changedProperties);\n if (changedProperties.has('helpText')) {\n this.updateHostClass();\n }\n }\n \n private updateHostClass() {\n if (this.helpText) {\n this.classList.add('full-width');\n } else {\n this.classList.remove('full-width');\n }\n }\n \n render() {\n const hasHelpText = this.helpText ? true : false;\n const hasErrorMessage = this.errorMessage ? true : false;\n \n return html`\n <label\n part=\"base\"\n class=${classMap({\n checkbox: true,\n 'checkbox--checked': this.checked,\n 'checkbox--disabled': this.disabled,\n 'checkbox--focused': this.hasFocus,\n 'checkbox--indeterminate': this.indeterminate,\n 'checkbox--medium': this.size === 'medium',\n })}\n >\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n title=${\n this\n .title /* An empty title prevents browser validation tooltips from appearing on hover */\n }\n name=${this.name}\n value=${ifDefined(this.value)}\n .indeterminate=${live(this.indeterminate)}\n .checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n aria-checked=${this.checked ? 'true' : 'false'}\n @click=${this.handleClick}\n @input=${this.handleInput}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n />\n\n <span\n part=\"control${this.checked ? ' control--checked' : ''}${this\n .indeterminate\n ? ' control--indeterminate'\n : ''}\"\n class=\"checkbox__control\"\n >\n ${this.checked\n ? html`\n <nile-icon\n part=\"checked-icon\"\n class=\"checkbox__checked-icon\"\n color=\"white\"\n library=\"system\"\n name=\"tick\"\n size=\"12\"\n ></nile-icon>\n `\n : ''}\n ${!this.checked && this.indeterminate\n ? html`\n <nile-icon\n part=\"indeterminate-icon\"\n class=\"checkbox__indeterminate-icon\"\n library=\"system\"\n color=\"white\"\n name=\"minus\"\n size=\"12\"\n ></nile-icon>\n `\n : ''}\n </span>\n\n <div part=\"label\" class=\"checkbox__label\">\n ${typeof this.label === 'boolean' ? '' : this.label}\n <slot></slot>\n </div>\n </label>\n\n ${hasHelpText\n ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `\n : ``}\n \n ${hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``}\n `;\n }\n}\n \nexport default NileCheckbox;\n \ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-checkbox': NileCheckbox;\n }\n}"],"names":["NileCheckbox","_m","p","constructor","super","this","hasFocus","title","name","size","disabled","checked","label","indeterminate","defaultChecked","helpText","errorMessage","showHelpText","form","required","_this","_inherits","_createClass","key","value","toggleHelpText","handleClick","emit","handleBlur","handleInput","handleFocus","handleStateChange","input","click","focus","options","blur","connectedCallback","updateHostClass","disconnectedCallback","updated","changedProperties","has","classList","add","remove","render","hasHelpText","hasErrorMessage","html","_templateObject","_taggedTemplateLiteral","classMap","checkbox","ifDefined","live","_templateObject2","_templateObject3","_templateObject4","_templateObject5","NileElement","styles","__decorate","query","prototype","state","property","reflect","type","Boolean","String","defaultValue","attribute","watch","waitUntilFirstUpdate","customElement"],"mappings":"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"}
package/dist/nile-checkbox/nile-checkbox.esm.js CHANGED
@@ -1,16 +1,16 @@
1
- import{__decorate as e}from"tslib";import{html as t}from"lit";import{query as i,state as s,property as o,customElement as c}from"lit/decorators.js";import{s as h}from"./nile-checkbox.css.esm.js";import{classMap as l}from"lit/directives/class-map.js";import{d as n}from"../internal/default-value.esm.js";import{ifDefined as r}from"lit/directives/if-defined.js";import{live as a}from"lit/directives/live.js";import{w as d}from"../internal/watch.esm.js";import{N as m}from"../internal/nile-element.esm.js";let p=class extends m{constructor(){super(),this.hasFocus=!1,this.title="",this.name="",this.size="medium",this.disabled=!1,this.checked=!1,this.label="",this.indeterminate=!1,this.defaultChecked=!1,this.helpText="",this.errorMessage="",this.showHelpText=!1,this.form="",this.required=!1}toggleHelpText(){this.showHelpText=!this.showHelpText}handleClick(){this.checked=!this.checked,this.indeterminate=!1,this.emit("nile-change",{checked:this.checked}),this.emit("valueChange",{checked:this.checked})}handleBlur(){this.hasFocus=!1,this.emit("blur")}handleInput(){this.emit("input")}handleFocus(){this.hasFocus=!0,this.emit("focus")}handleStateChange(){this.input.checked=this.checked,this.input.indeterminate=this.indeterminate}click(){this.input.click()}focus(e){this.input.focus(e)}blur(){this.input.blur()}connectedCallback(){super.connectedCallback(),this.updateHostClass(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}updated(e){super.updated(e),e.has("helpText")&&this.updateHostClass()}updateHostClass(){this.helpText?this.classList.add("full-width"):this.classList.remove("full-width")}render(){const e=!!this.helpText,i=!!this.errorMessage;return t`
1
+ import{__decorate as e}from"tslib";import{html as t}from"lit";import{query as i,state as s,property as h,customElement as l}from"lit/decorators.js";import{s as o}from"./nile-checkbox.css.esm.js";import{classMap as c}from"lit/directives/class-map.js";import{d as r}from"../internal/default-value.esm.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{live as n}from"lit/directives/live.js";import{w as d}from"../internal/watch.esm.js";import{N as m}from"../internal/nile-element.esm.js";let p=class extends m{constructor(){super(),this.hasFocus=!1,this.title="",this.name="",this.size="medium",this.disabled=!1,this.checked=!1,this.label="",this.indeterminate=!1,this.defaultChecked=!1,this.helpText="",this.errorMessage="",this.showHelpText=!1,this.form="",this.required=!1}toggleHelpText(){this.showHelpText=!this.showHelpText}handleClick(){this.checked=!this.checked,this.indeterminate=!1,this.emit("nile-change",{checked:this.checked}),this.emit("valueChange",{checked:this.checked})}handleBlur(){this.hasFocus=!1,this.emit("blur")}handleInput(){this.emit("input")}handleFocus(){this.hasFocus=!0,this.emit("focus")}handleStateChange(){this.input.checked=this.checked,this.input.indeterminate=this.indeterminate}click(){this.input.click()}focus(e){this.input.focus(e)}blur(){this.input.blur()}connectedCallback(){super.connectedCallback(),this.updateHostClass(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}updated(e){super.updated(e),e.has("helpText")&&this.updateHostClass()}updateHostClass(){this.helpText?this.classList.add("full-width"):this.classList.remove("full-width")}render(){const e=!!this.helpText,i=!!this.errorMessage;return t`
2
2
  <label
3
3
  part="base"
4
- class=${l({checkbox:!0,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--indeterminate":this.indeterminate,"checkbox--medium":"medium"===this.size})}
4
+ class=${c({checkbox:!0,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--indeterminate":this.indeterminate,"checkbox--medium":"medium"===this.size})}
5
5
  >
6
6
  <input
7
7
  class="checkbox__input"
8
8
  type="checkbox"
9
9
  title=${this.title}
10
10
  name=${this.name}
11
- value=${r(this.value)}
12
- .indeterminate=${a(this.indeterminate)}
13
- .checked=${a(this.checked)}
11
+ value=${a(this.value)}
12
+ .indeterminate=${n(this.indeterminate)}
13
+ .checked=${n(this.checked)}
14
14
  .disabled=${this.disabled}
15
15
  .required=${this.required}
16
16
  aria-checked=${this.checked?"true":"false"}
@@ -19,7 +19,7 @@ import{__decorate as e}from"tslib";import{html as t}from"lit";import{query as i,
19
19
  @blur=${this.handleBlur}
20
20
  @focus=${this.handleFocus}
21
21
  />
22
-
22
+
23
23
  <span
24
24
  part="control${this.checked?" control--checked":""}${this.indeterminate?" control--indeterminate":""}"
25
25
  class="checkbox__control"
@@ -45,25 +45,18 @@ import{__decorate as e}from"tslib";import{html as t}from"lit";import{query as i,
45
45
  ></nile-icon>
46
46
  `:""}
47
47
  </span>
48
-
48
+
49
49
  <div part="label" class="checkbox__label">
50
50
  ${"boolean"==typeof this.label?"":this.label}
51
51
  <slot></slot>
52
52
  </div>
53
53
  </label>
54
-
55
- ${e?t`
56
- <nile-tooltip content="${this.helpText}" placement="bottom">
57
- <nile-icon
58
- name="question"
59
- class="checkbox__helptext-icon"
60
- ></nile-icon>
61
- </nile-tooltip>
62
- `:""}
63
-
54
+
55
+ ${e?t` <nile-form-help-text>${this.helpText}</nile-form-help-text> `:""}
56
+
64
57
  ${i?t`
65
58
  <nile-form-error-message
66
59
  >${this.errorMessage}</nile-form-error-message
67
60
  >
68
61
  `:""}
69
- `}};p.styles=h,e([i('input[type="checkbox"]')],p.prototype,"input",void 0),e([s()],p.prototype,"hasFocus",void 0),e([o()],p.prototype,"title",void 0),e([o()],p.prototype,"name",void 0),e([o()],p.prototype,"value",void 0),e([o({reflect:!0})],p.prototype,"size",void 0),e([o({type:Boolean,reflect:!0})],p.prototype,"disabled",void 0),e([o({type:Boolean,reflect:!0})],p.prototype,"checked",void 0),e([o({type:String,reflect:!0})],p.prototype,"label",void 0),e([o({type:Boolean,reflect:!0})],p.prototype,"indeterminate",void 0),e([n("checked")],p.prototype,"defaultChecked",void 0),e([o({attribute:"help-text",reflect:!0})],p.prototype,"helpText",void 0),e([o({attribute:"error-message",reflect:!0})],p.prototype,"errorMessage",void 0),e([o({type:Boolean})],p.prototype,"showHelpText",void 0),e([o({reflect:!0})],p.prototype,"form",void 0),e([o({type:Boolean,reflect:!0})],p.prototype,"required",void 0),e([d(["checked","indeterminate"],{waitUntilFirstUpdate:!0})],p.prototype,"handleStateChange",null),p=e([c("nile-checkbox")],p);export{p as N};
62
+ `}};p.styles=o,e([i('input[type="checkbox"]')],p.prototype,"input",void 0),e([s()],p.prototype,"hasFocus",void 0),e([h()],p.prototype,"title",void 0),e([h()],p.prototype,"name",void 0),e([h()],p.prototype,"value",void 0),e([h({reflect:!0})],p.prototype,"size",void 0),e([h({type:Boolean,reflect:!0})],p.prototype,"disabled",void 0),e([h({type:Boolean,reflect:!0})],p.prototype,"checked",void 0),e([h({type:String,reflect:!0})],p.prototype,"label",void 0),e([h({type:Boolean,reflect:!0})],p.prototype,"indeterminate",void 0),e([r("checked")],p.prototype,"defaultChecked",void 0),e([h({attribute:"help-text",reflect:!0})],p.prototype,"helpText",void 0),e([h({attribute:"error-message",reflect:!0})],p.prototype,"errorMessage",void 0),e([h({type:Boolean})],p.prototype,"showHelpText",void 0),e([h({reflect:!0})],p.prototype,"form",void 0),e([h({type:Boolean,reflect:!0})],p.prototype,"required",void 0),e([d(["checked","indeterminate"],{waitUntilFirstUpdate:!0})],p.prototype,"handleStateChange",null),p=e([l("nile-checkbox")],p);export{p as N};