@aquera/nile-elements 0.0.74 → 0.0.75

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 (42) hide show
  1. package/README.md +6 -0
  2. package/dist/index.iife.js +157 -206
  3. package/dist/nile-calendar/nile-calendar.css.cjs.js +1 -1
  4. package/dist/nile-calendar/nile-calendar.css.cjs.js.map +1 -1
  5. package/dist/nile-calendar/nile-calendar.css.esm.js +8 -0
  6. package/dist/nile-card/nile-card.css.cjs.js +1 -1
  7. package/dist/nile-card/nile-card.css.cjs.js.map +1 -1
  8. package/dist/nile-card/nile-card.css.esm.js +4 -4
  9. package/dist/nile-checkbox/nile-checkbox.cjs.js +1 -1
  10. package/dist/nile-checkbox/nile-checkbox.cjs.js.map +1 -1
  11. package/dist/nile-checkbox/nile-checkbox.css.cjs.js +1 -1
  12. package/dist/nile-checkbox/nile-checkbox.css.cjs.js.map +1 -1
  13. package/dist/nile-checkbox/nile-checkbox.css.esm.js +30 -47
  14. package/dist/nile-checkbox/nile-checkbox.esm.js +56 -54
  15. package/dist/nile-tag/nile-tag.cjs.js +1 -1
  16. package/dist/nile-tag/nile-tag.cjs.js.map +1 -1
  17. package/dist/nile-tag/nile-tag.css.cjs.js +1 -1
  18. package/dist/nile-tag/nile-tag.css.cjs.js.map +1 -1
  19. package/dist/nile-tag/nile-tag.css.esm.js +50 -91
  20. package/dist/nile-tag/nile-tag.esm.js +13 -14
  21. package/dist/src/nile-calendar/nile-calendar.css.js +8 -0
  22. package/dist/src/nile-calendar/nile-calendar.css.js.map +1 -1
  23. package/dist/src/nile-card/nile-card.css.js +2 -2
  24. package/dist/src/nile-card/nile-card.css.js.map +1 -1
  25. package/dist/src/nile-checkbox/nile-checkbox.css.js +30 -47
  26. package/dist/src/nile-checkbox/nile-checkbox.css.js.map +1 -1
  27. package/dist/src/nile-checkbox/nile-checkbox.d.ts +2 -4
  28. package/dist/src/nile-checkbox/nile-checkbox.js +63 -67
  29. package/dist/src/nile-checkbox/nile-checkbox.js.map +1 -1
  30. package/dist/src/nile-tag/nile-tag.css.js +48 -89
  31. package/dist/src/nile-tag/nile-tag.css.js.map +1 -1
  32. package/dist/src/nile-tag/nile-tag.d.ts +2 -1
  33. package/dist/src/nile-tag/nile-tag.js +30 -13
  34. package/dist/src/nile-tag/nile-tag.js.map +1 -1
  35. package/dist/tsconfig.tsbuildinfo +1 -1
  36. package/package.json +1 -1
  37. package/src/nile-calendar/nile-calendar.css.ts +8 -0
  38. package/src/nile-card/nile-card.css.ts +2 -2
  39. package/src/nile-checkbox/nile-checkbox.css.ts +34 -51
  40. package/src/nile-checkbox/nile-checkbox.ts +111 -108
  41. package/src/nile-tag/nile-tag.css.ts +48 -89
  42. package/src/nile-tag/nile-tag.ts +34 -15
package/dist/src/nile-checkbox/nile-checkbox.css.js CHANGED
@@ -12,25 +12,26 @@ export const styles = css `
12
12
  :host {
13
13
  display: inline-block;
14
14
  }
15
-
15
+
16
16
  :host(.full-width) {
17
17
  width: 100%;
18
18
  }
19
-
19
+
20
20
  .checkbox {
21
21
  position: relative;
22
22
  display: inline-flex;
23
- align-items: stretch;
23
+ align-items: top;
24
24
  font-weight: 400;
25
25
  color: var(--nile-colors-dark-900);
26
26
  vertical-align: middle;
27
27
  cursor: pointer;
28
28
  }
29
-
30
- .checkbox--only__subtitle{
31
- align-items: center;
29
+
30
+ .checkbox--medium {
31
+ --toggle-size: var(--nile-type-scale-3);
32
+ font-size: var(--nile-type-scale-3);
32
33
  }
33
-
34
+
34
35
  .checkbox__control {
35
36
  flex: 0 0 auto;
36
37
  position: relative;
@@ -41,13 +42,13 @@ export const styles = css `
41
42
  height: var(--nile-type-scale-3);
42
43
  border: solid 1px var(--nile-checkbox-color-border-standard);
43
44
  background-color: var(--nile-checkbox-color-background-standard);
44
- border-radius: 3px;
45
+ border-radius: 4px;
45
46
  transition: var(--nile-transition-duration-default border-color),
46
47
  var(--nile-transition-duration-default) background-color,
47
48
  var(--nile-transition-duration-default) color,
48
49
  var(--nile-transition-duration-default box-shadow);
49
50
  }
50
-
51
+
51
52
  .checkbox__input {
52
53
  position: absolute;
53
54
  opacity: 0;
@@ -55,11 +56,11 @@ export const styles = css `
55
56
  margin: 0;
56
57
  pointer-events: none;
57
58
  }
58
-
59
+
59
60
  /* svg {
60
61
  display:none !important;
61
62
  } */
62
-
63
+
63
64
  /* Hover */
64
65
  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
65
66
  .checkbox__control:hover {
@@ -67,7 +68,7 @@ export const styles = css `
67
68
  border: 1px solid var(--nile-checkbox-color-border-hover);
68
69
  border-radius: 4px;
69
70
  }
70
-
71
+
71
72
  /* Focus */
72
73
  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
73
74
  .checkbox__input:focus-visible
@@ -75,14 +76,14 @@ export const styles = css `
75
76
  outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
76
77
  outline-offset: 1px;
77
78
  }
78
-
79
+
79
80
  /* Checked/indeterminate */
80
81
  .checkbox--checked .checkbox__control,
81
82
  .checkbox--indeterminate .checkbox__control {
82
83
  border-color: var(--nile-checkbox-color-border-checked-standard);
83
84
  background-color: var(--nile-checkbox-color-background-checked-standard);
84
85
  }
85
-
86
+
86
87
  /* Checked/indeterminate + hover */
87
88
  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
88
89
  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
@@ -90,7 +91,7 @@ export const styles = css `
90
91
  background: var(--nile-checkbox-color-background-checked-hover);
91
92
  border: 1px solid var(--nile-checkbox-color-border-checked-hover);
92
93
  }
93
-
94
+
94
95
  /* Checked/indeterminate + focus */
95
96
  .checkbox.checkbox--checked:not(.checkbox--disabled)
96
97
  .checkbox__input:focus-visible
@@ -101,59 +102,41 @@ export const styles = css `
101
102
  outline: solid 3px var(--nile-checkbox-color-outline-standard);
102
103
  outline-offset: 1px;
103
104
  }
104
-
105
+
105
106
  /* Disabled */
106
107
  .checkbox--disabled {
107
108
  opacity: 0.3;
108
109
  cursor: not-allowed;
109
110
  }
110
-
111
+
112
+
111
113
  .checkbox__label {
112
- display: flex;
113
- flex-direction: column;
114
- justify-content: flex-start;
115
- font-family: var(--nile-font-family-serif);
116
- margin-left: 8px;
114
+ display: inline-block;
115
+ line-height: 14px;
116
+ font-size: 14px;
117
+ margin-inline-start: 0.5em;
117
118
  user-select: none;
119
+ margin-top: 2px;
118
120
  color: var(--nile-colors-dark-900);
121
+ font-family: Colfax-regular;
119
122
  font-style: normal;
120
- letter-spacing: 0.2px;
121
- box-sizing: border-box;
122
- }
123
-
124
- .checkbox__icon__container{
125
- display:flex;
126
- align-items:center;
127
- }
128
-
129
- .checkbox__label__text {
130
- display: block;
131
- font-size: 14px;
132
- font-weight: 500;
133
- color: #344054;
134
- }
135
-
136
- .checkbox__sublabel__text {
137
- display: block;
138
- font-size: 14px;
139
123
  font-weight: 400;
140
- line-height: 20px;
141
- color: #475467;
124
+ letter-spacing: 0.2px;
142
125
  }
143
-
126
+
144
127
  :host([required]) .checkbox__label::after {
145
128
  content: '*';
146
129
  margin-inline-start: -2px;
147
130
  }
148
-
131
+
149
132
  .checkbox__checked-icon {
150
133
  --nile-svg-stroke: white;
151
134
  }
152
-
135
+
153
136
  .checkbox__indeterminate-icon {
154
137
  --nile-svg-stroke: white;
155
138
  }
156
-
139
+
157
140
  .checkbox__helptext-icon {
158
141
  float: right;
159
142
  cursor: pointer;
package/dist/src/nile-checkbox/nile-checkbox.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-checkbox.css.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuJxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 { css } from 'lit-element';\n\n/**\n * Checkbox CSS\n */\nexport const styles = css`\n :host {\n display: inline-block;\n }\n\n :host(.full-width) {\n width: 100%;\n }\n\n .checkbox {\n position: relative;\n display: inline-flex;\n align-items: stretch;\n font-weight: 400;\n color: var(--nile-colors-dark-900);\n vertical-align: middle;\n cursor: pointer;\n }\n\n .checkbox--only__subtitle{\n align-items: center;\n }\n\n .checkbox__control {\n flex: 0 0 auto;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--nile-type-scale-3);\n height: var(--nile-type-scale-3);\n border: solid 1px var(--nile-checkbox-color-border-standard);\n background-color: var(--nile-checkbox-color-background-standard);\n border-radius: 3px;\n transition: var(--nile-transition-duration-default border-color),\n var(--nile-transition-duration-default) background-color,\n var(--nile-transition-duration-default) color,\n var(--nile-transition-duration-default box-shadow);\n }\n\n .checkbox__input {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n\n /* svg {\n display:none !important;\n } */\n\n /* Hover */\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(--nile-checkbox-color-background-hover);\n border: 1px solid var(--nile-checkbox-color-border-hover);\n border-radius: 4px;\n }\n\n /* Focus */\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control {\n outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n outline-offset: 1px;\n }\n\n /* Checked/indeterminate */\n .checkbox--checked .checkbox__control,\n .checkbox--indeterminate .checkbox__control {\n border-color: var(--nile-checkbox-color-border-checked-standard);\n background-color: var(--nile-checkbox-color-background-checked-standard);\n }\n\n /* Checked/indeterminate + hover */\n .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(--nile-checkbox-color-background-checked-hover);\n border: 1px solid var(--nile-checkbox-color-border-checked-hover);\n }\n\n /* Checked/indeterminate + focus */\n .checkbox.checkbox--checked:not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control {\n outline: solid 3px var(--nile-checkbox-color-outline-standard);\n outline-offset: 1px;\n }\n\n /* Disabled */\n .checkbox--disabled {\n opacity: 0.3;\n cursor: not-allowed;\n }\n\n .checkbox__label {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n font-family: var(--nile-font-family-serif);\n margin-left: 8px;\n user-select: none;\n color: var(--nile-colors-dark-900);\n font-style: normal;\n letter-spacing: 0.2px;\n box-sizing: border-box;\n }\n\n .checkbox__icon__container{\n display:flex;\n align-items:center;\n }\n\n .checkbox__label__text {\n display: block;\n font-size: 14px;\n font-weight: 500;\n color: #344054;\n }\n\n .checkbox__sublabel__text {\n display: block;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n color: #475467;\n }\n\n :host([required]) .checkbox__label::after {\n content: '*';\n margin-inline-start: -2px;\n }\n\n .checkbox__checked-icon {\n --nile-svg-stroke: white;\n }\n\n .checkbox__indeterminate-icon {\n --nile-svg-stroke: white;\n }\n\n .checkbox__helptext-icon {\n float: right;\n cursor: pointer;\n margin-right: 12px;\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-checkbox.css.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsIxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 { css } from 'lit-element';\n \n/**\n * Checkbox CSS\n */\nexport const styles = css`\n :host {\n display: inline-block;\n }\n \n :host(.full-width) {\n width: 100%;\n }\n \n .checkbox {\n position: relative;\n display: inline-flex;\n align-items: top;\n font-weight: 400;\n color: var(--nile-colors-dark-900);\n vertical-align: middle;\n cursor: pointer;\n }\n \n .checkbox--medium {\n --toggle-size: var(--nile-type-scale-3);\n font-size: var(--nile-type-scale-3);\n }\n \n .checkbox__control {\n flex: 0 0 auto;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--nile-type-scale-3);\n height: var(--nile-type-scale-3);\n border: solid 1px var(--nile-checkbox-color-border-standard);\n background-color: var(--nile-checkbox-color-background-standard);\n border-radius: 4px;\n transition: var(--nile-transition-duration-default border-color),\n var(--nile-transition-duration-default) background-color,\n var(--nile-transition-duration-default) color,\n var(--nile-transition-duration-default box-shadow);\n }\n \n .checkbox__input {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n \n /* svg {\n display:none !important;\n } */\n \n /* Hover */\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(--nile-checkbox-color-background-hover);\n border: 1px solid var(--nile-checkbox-color-border-hover);\n border-radius: 4px;\n }\n \n /* Focus */\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control {\n outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n outline-offset: 1px;\n }\n \n /* Checked/indeterminate */\n .checkbox--checked .checkbox__control,\n .checkbox--indeterminate .checkbox__control {\n border-color: var(--nile-checkbox-color-border-checked-standard);\n background-color: var(--nile-checkbox-color-background-checked-standard);\n }\n \n /* Checked/indeterminate + hover */\n .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(--nile-checkbox-color-background-checked-hover);\n border: 1px solid var(--nile-checkbox-color-border-checked-hover);\n }\n \n /* Checked/indeterminate + focus */\n .checkbox.checkbox--checked:not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control {\n outline: solid 3px var(--nile-checkbox-color-outline-standard);\n outline-offset: 1px;\n }\n \n /* Disabled */\n .checkbox--disabled {\n opacity: 0.3;\n cursor: not-allowed;\n }\n \n \n .checkbox__label {\n display: inline-block;\n line-height: 14px;\n font-size: 14px;\n margin-inline-start: 0.5em;\n user-select: none;\n margin-top: 2px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-style: normal;\n font-weight: 400;\n letter-spacing: 0.2px;\n }\n \n :host([required]) .checkbox__label::after {\n content: '*';\n margin-inline-start: -2px;\n }\n \n .checkbox__checked-icon {\n --nile-svg-stroke: white;\n }\n \n .checkbox__indeterminate-icon {\n --nile-svg-stroke: white;\n }\n \n .checkbox__helptext-icon {\n float: right;\n cursor: pointer;\n margin-right: 12px;\n }\n`;\n \nexport default [styles];"]}
package/dist/src/nile-checkbox/nile-checkbox.d.ts CHANGED
@@ -18,6 +18,7 @@ import type { CSSResultGroup } from 'lit';
18
18
  * @event nile-change - Emitted when the checked state changes.
19
19
  * @event nile-focus - Emitted when the checkbox gains focus.
20
20
  * @event nile-input - Emitted when the checkbox receives input.
21
+ * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
21
22
  *
22
23
  * @csspart base - The component's base wrapper.
23
24
  * @csspart control - The square container that wraps the checkbox's checked state.
@@ -51,8 +52,6 @@ export declare class NileCheckbox extends NileElement {
51
52
  checked: boolean;
52
53
  /** Label, declared this property for backward compatibility of old component */
53
54
  label: string;
54
- /** Sublabel, declared this property for backward compatibility of old component */
55
- subLabel: string;
56
55
  /**
57
56
  * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
58
57
  * all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
@@ -71,8 +70,7 @@ export declare class NileCheckbox extends NileElement {
71
70
  form: string;
72
71
  /** Makes the checkbox a required field. */
73
72
  required: boolean;
74
- labelContainer: HTMLElement;
75
- checkboxIconContainer: HTMLElement;
73
+ private toggleHelpText;
76
74
  private handleClick;
77
75
  private handleBlur;
78
76
  private handleInput;
package/dist/src/nile-checkbox/nile-checkbox.js CHANGED
@@ -5,7 +5,7 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  import { __decorate } from "tslib";
8
- import { html, property, nothing, } from 'lit-element';
8
+ import { html, property, } from 'lit-element';
9
9
  import { customElement } from 'lit/decorators.js';
10
10
  import { styles } from './nile-checkbox.css';
11
11
  import { classMap } from 'lit/directives/class-map.js';
@@ -26,6 +26,7 @@ import NileElement from '../internal/nile-element';
26
26
  * @event nile-change - Emitted when the checked state changes.
27
27
  * @event nile-focus - Emitted when the checkbox gains focus.
28
28
  * @event nile-input - Emitted when the checkbox receives input.
29
+ * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
29
30
  *
30
31
  * @csspart base - The component's base wrapper.
31
32
  * @csspart control - The square container that wraps the checkbox's checked state.
@@ -56,8 +57,6 @@ let NileCheckbox = class NileCheckbox extends NileElement {
56
57
  this.checked = false;
57
58
  /** Label, declared this property for backward compatibility of old component */
58
59
  this.label = '';
59
- /** Sublabel, declared this property for backward compatibility of old component */
60
- this.subLabel = '';
61
60
  /**
62
61
  * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
63
62
  * all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
@@ -77,6 +76,9 @@ let NileCheckbox = class NileCheckbox extends NileElement {
77
76
  /** Makes the checkbox a required field. */
78
77
  this.required = false;
79
78
  }
79
+ toggleHelpText() {
80
+ this.showHelpText = !this.showHelpText;
81
+ }
80
82
  handleClick() {
81
83
  this.checked = !this.checked;
82
84
  this.indeterminate = false;
@@ -129,7 +131,6 @@ let NileCheckbox = class NileCheckbox extends NileElement {
129
131
  if (changedProperties.has('helpText')) {
130
132
  this.updateHostClass();
131
133
  }
132
- this.checkboxIconContainer.style.height = this.labelContainer.scrollHeight + 'px';
133
134
  }
134
135
  updateHostClass() {
135
136
  if (this.helpText) {
@@ -150,68 +151,67 @@ let NileCheckbox = class NileCheckbox extends NileElement {
150
151
  'checkbox--checked': this.checked,
151
152
  'checkbox--disabled': this.disabled,
152
153
  'checkbox--focused': this.hasFocus,
153
- 'checkbox--indeterminate': this.indeterminate
154
- })}
154
+ 'checkbox--indeterminate': this.indeterminate,
155
+ 'checkbox--medium': this.size === 'medium',
156
+ })}
155
157
  >
156
- <div class="checkbox__icon__container">
157
- <span
158
- part="control${this.checked ? ' control--checked' : ''}${this
158
+ <input
159
+ class="checkbox__input"
160
+ type="checkbox"
161
+ title=${this
162
+ .title /* An empty title prevents browser validation tooltips from appearing on hover */}
163
+ name=${this.name}
164
+ value=${ifDefined(this.value)}
165
+ .indeterminate=${live(this.indeterminate)}
166
+ .checked=${live(this.checked)}
167
+ .disabled=${this.disabled}
168
+ .required=${this.required}
169
+ aria-checked=${this.checked ? 'true' : 'false'}
170
+ @click=${this.handleClick}
171
+ @input=${this.handleInput}
172
+ @blur=${this.handleBlur}
173
+ @focus=${this.handleFocus}
174
+ />
175
+
176
+ <span
177
+ part="control${this.checked ? ' control--checked' : ''}${this
159
178
  .indeterminate
160
179
  ? ' control--indeterminate'
161
180
  : ''}"
162
- class="checkbox__control"
163
- >
164
- <!-- An empty title prevents browser validation tooltips from appearing on hover -->
165
- <input
166
- class="checkbox__input"
167
- type="checkbox"
168
- title=${this.title}
169
- name=${this.name}
170
- value=${ifDefined(this.value)}
171
- .indeterminate=${live(this.indeterminate)}
172
- .checked=${live(this.checked)}
173
- .disabled=${this.disabled}
174
- .required=${this.required}
175
- aria-checked=${this.checked ? 'true' : 'false'}
176
- @click=${this.handleClick}
177
- @input=${this.handleInput}
178
- @blur=${this.handleBlur}
179
- @focus=${this.handleFocus}
180
- />
181
- ${this.checked
181
+ class="checkbox__control"
182
+ >
183
+ ${this.checked
182
184
  ? html `
183
- <nile-icon
184
- part="checked-icon"
185
- class="checkbox__checked-icon"
186
- color="white"
187
- library="system"
188
- name="tick"
189
- size="12"
190
- ></nile-icon>
191
- `
185
+ <nile-icon
186
+ part="checked-icon"
187
+ class="checkbox__checked-icon"
188
+ color="white"
189
+ library="system"
190
+ name="tick"
191
+ size="12"
192
+ ></nile-icon>
193
+ `
192
194
  : ''}
193
- ${!this.checked && this.indeterminate
195
+ ${!this.checked && this.indeterminate
194
196
  ? html `
195
- <nile-icon
196
- part="indeterminate-icon"
197
- class="checkbox__indeterminate-icon"
198
- library="system"
199
- color="white"
200
- name="minus"
201
- size="12"
202
- ></nile-icon>
203
- `
197
+ <nile-icon
198
+ part="indeterminate-icon"
199
+ class="checkbox__indeterminate-icon"
200
+ library="system"
201
+ color="white"
202
+ name="minus"
203
+ size="12"
204
+ ></nile-icon>
205
+ `
204
206
  : ''}
205
- </span>
206
- </div>
207
-
208
- <div part="label" class="checkbox__label" style="${!this.label && !this.subLabel ? 'margin-left:0;' : ''}">
209
- ${this.label ? html `<span class="checkbox__label__text">${this.label}</span>` : ``}
210
- ${this.subLabel ? html `<span class="checkbox__sublabel__text">${this.subLabel}</span>` : ``}
207
+ </span>
208
+
209
+ <div part="label" class="checkbox__label">
210
+ ${typeof this.label === 'boolean' ? '' : this.label}
211
211
  <slot></slot>
212
212
  </div>
213
213
  </label>
214
-
214
+
215
215
  ${hasHelpText
216
216
  ? html `
217
217
  <nile-tooltip content="${this.helpText}" placement="bottom">
@@ -221,10 +221,15 @@ let NileCheckbox = class NileCheckbox extends NileElement {
221
221
  ></nile-icon>
222
222
  </nile-tooltip>
223
223
  `
224
- : nothing}
224
+ : ``}
225
+
225
226
  ${hasErrorMessage
226
- ? html `<nile-form-error-message>${this.errorMessage}</nile-form-error-message>`
227
- : nothing}
227
+ ? html `
228
+ <nile-form-error-message
229
+ >${this.errorMessage}</nile-form-error-message
230
+ >
231
+ `
232
+ : ``}
228
233
  `;
229
234
  }
230
235
  };
@@ -256,9 +261,6 @@ __decorate([
256
261
  __decorate([
257
262
  property({ type: String, reflect: true })
258
263
  ], NileCheckbox.prototype, "label", void 0);
259
- __decorate([
260
- property({ type: String, reflect: true, attribute: 'sub-label' })
261
- ], NileCheckbox.prototype, "subLabel", void 0);
262
264
  __decorate([
263
265
  property({ type: Boolean, reflect: true })
264
266
  ], NileCheckbox.prototype, "indeterminate", void 0);
@@ -280,12 +282,6 @@ __decorate([
280
282
  __decorate([
281
283
  property({ type: Boolean, reflect: true })
282
284
  ], NileCheckbox.prototype, "required", void 0);
283
- __decorate([
284
- query('.checkbox__label__text')
285
- ], NileCheckbox.prototype, "labelContainer", void 0);
286
- __decorate([
287
- query('div.checkbox__icon__container')
288
- ], NileCheckbox.prototype, "checkboxIconContainer", void 0);
289
285
  __decorate([
290
286
  watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })
291
287
  ], NileCheckbox.prototype, "handleStateChange", null);
package/dist/src/nile-checkbox/nile-checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-checkbox.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.ts"],"names":[],"mappings":"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","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 property,\n nothing,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { customElement } 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 *\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 /** Sublabel, declared this property for backward compatibility of old component */\n @property({ type: String, reflect: true, attribute: 'sub-label' }) subLabel = '';\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 * 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 @query('.checkbox__label__text') labelContainer:HTMLElement;\n\n @query('div.checkbox__icon__container') checkboxIconContainer:HTMLElement;\n\n private handleClick() {\n this.checked = !this.checked;\n this.indeterminate = false;\n this.dispatchEvent(\n new CustomEvent('valueChange', {\n composed: true,\n bubbles: true,\n detail: {\n checked: this.checked,\n },\n })\n );\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 this.checkboxIconContainer.style.height=this.labelContainer.scrollHeight+'px';\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 })} \n >\n <div class=\"checkbox__icon__container\">\n <span\n part=\"control${this.checked ? ' control--checked' : ''}${this\n .indeterminate\n ? ' control--indeterminate'\n : ''}\"\n class=\"checkbox__control\"\n >\n <!-- An empty title prevents browser validation tooltips from appearing on hover -->\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n title=${ this.title }\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 ${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 </div>\n\n <div part=\"label\" class=\"checkbox__label\" style=\"${!this.label && !this.subLabel?'margin-left:0;':''}\">\n ${this.label ? html`<span class=\"checkbox__label__text\">${this.label}</span>` : ``}\n ${this.subLabel ? html`<span class=\"checkbox__sublabel__text\">${this.subLabel}</span>` : ``}\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 : nothing}\n ${hasErrorMessage\n ? html`<nile-form-error-message>${this.errorMessage}</nile-form-error-message>`\n : nothing}\n `;\n }\n}\n\nexport default NileCheckbox;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-checkbox': NileCheckbox;\n }\n}\n"]}
1
+ {"version":3,"file":"nile-checkbox.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.ts"],"names":[],"mappings":"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","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 property,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { customElement } 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.dispatchEvent(\n new CustomEvent('valueChange', {\n composed: true,\n bubbles: true,\n detail: {\n checked: this.checked,\n },\n })\n );\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}"]}