@aurodesignsystem-dev/auro-formkit 0.0.0-pr687.2 → 0.0.0-pr687.4
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.
- package/components/checkbox/README.md +1 -1
- package/components/checkbox/demo/api.md +2 -2
- package/components/checkbox/demo/api.min.js +20 -17
- package/components/checkbox/demo/index.md +2 -2
- package/components/checkbox/demo/index.min.js +20 -17
- package/components/checkbox/demo/readme.md +1 -1
- package/components/checkbox/dist/auro-checkbox.d.ts +2 -2
- package/components/checkbox/dist/index.js +20 -17
- package/components/checkbox/dist/registered.js +20 -17
- package/components/combobox/demo/api.md +52 -0
- package/components/combobox/demo/api.min.js +34 -31
- package/components/combobox/demo/index.md +6 -0
- package/components/combobox/demo/index.min.js +34 -31
- package/components/combobox/dist/auro-combobox.d.ts +1 -0
- package/components/combobox/dist/index.js +34 -31
- package/components/combobox/dist/registered.js +34 -31
- package/components/counter/demo/api.md +21 -19
- package/components/counter/demo/api.min.js +1058 -299
- package/components/counter/demo/index.md +99 -34
- package/components/counter/demo/index.min.js +1058 -299
- package/components/counter/dist/auro-counter-group.d.ts +105 -6
- package/components/counter/dist/helptextVersion.d.ts +2 -0
- package/components/counter/dist/index.js +1058 -299
- package/components/counter/dist/registered.js +1058 -299
- package/components/counter/dist/styles/shapeSize-css.d.ts +2 -0
- package/components/datepicker/demo/api.min.js +4 -3
- package/components/datepicker/demo/index.md +37 -16
- package/components/datepicker/demo/index.min.js +4 -3
- package/components/datepicker/dist/index.js +4 -3
- package/components/datepicker/dist/registered.js +4 -3
- package/components/input/demo/api.md +5 -4
- package/components/input/demo/api.min.js +3 -2
- package/components/input/demo/index.min.js +3 -2
- package/components/input/dist/base-input.d.ts +1 -0
- package/components/input/dist/index.js +3 -2
- package/components/input/dist/registered.js +3 -2
- package/components/select/demo/api.md +1 -0
- package/components/select/demo/api.min.js +1 -0
- package/components/select/demo/index.min.js +1 -0
- package/components/select/dist/auro-select.d.ts +1 -0
- package/components/select/dist/index.js +1 -0
- package/components/select/dist/registered.js +1 -0
- package/package.json +2 -2
|
@@ -87,7 +87,7 @@ This configuration enables proper module resolution for the component's TypeScri
|
|
|
87
87
|
<span slot="legend">Form label goes here</span>
|
|
88
88
|
<auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
|
|
89
89
|
<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
|
|
90
|
-
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
|
|
90
|
+
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
|
|
91
91
|
<auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
|
|
92
92
|
</auro-checkbox-group>
|
|
93
93
|
```
|
|
@@ -92,7 +92,7 @@ Custom element for the purpose of allowing users to select one or more options o
|
|
|
92
92
|
<span slot="legend">Form label goes here</span>
|
|
93
93
|
<auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
|
|
94
94
|
<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
|
|
95
|
-
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
|
|
95
|
+
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
|
|
96
96
|
<auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
|
|
97
97
|
</auro-checkbox-group>
|
|
98
98
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -119,7 +119,7 @@ Custom element for the purpose of allowing users to select one or more options o
|
|
|
119
119
|
<span slot="legend">Form label goes here</span>
|
|
120
120
|
<auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
|
|
121
121
|
<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
|
|
122
|
-
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
|
|
122
|
+
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
|
|
123
123
|
<auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
|
|
124
124
|
</auro-checkbox-group>
|
|
125
125
|
```
|
|
@@ -51,9 +51,9 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = cl
|
|
|
51
51
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
52
52
|
*/const o$1=o=>o??E;
|
|
53
53
|
|
|
54
|
-
var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;--cbxLocation: var(--ds-size-50, 0.25rem)}fieldset{all:unset}@media screen and (min-width: 576px){.displayFlex slot{display:flex}}.cbxContainer{position:relative;padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbx--input:disabled+label:hover{cursor:auto}.label{margin-left:var(--ds-size-300, 1.5rem);display:block}.label:hover{cursor:pointer}.
|
|
54
|
+
var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;--cbxLocation: var(--ds-size-50, 0.25rem)}fieldset{all:unset}@media screen and (min-width: 576px){.displayFlex slot{display:flex}}.cbxContainer{position:relative;padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbx--input:disabled+label:hover{cursor:auto}.label{margin-left:var(--ds-size-300, 1.5rem);display:block}.label:hover{cursor:pointer}.inputContainer{position:relative}.inputContainer:after{-webkit-tap-highlight-color:transparent;display:block;content:"";align-items:center;justify-content:center;top:var(--ds-size-200, 1rem);left:var(--cbxLocation);width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));transform:translateY(-50%);border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);outline-style:solid;outline-width:1px;z-index:0}.svg--cbx{position:absolute;top:var(--ds-size-25, 0.125rem);left:var(--ds-size-25, 0.125rem);padding-top:3px;padding-bottom:3px;z-index:1;pointer-events:none}`;
|
|
55
55
|
|
|
56
|
-
var colorCss$2 = i$5`:host .label{color:var(--ds-auro-checkbox-label-color)}:host .
|
|
56
|
+
var colorCss$2 = i$5`:host(:not([checked])) .cbxContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-hover, #f2f2f2)}:host .label{color:var(--ds-auro-checkbox-label-color)}:host .inputContainer:after{background-color:var(--ds-auro-checkbox-container-color);border-color:var(--ds-auro-checkbox-border-color);outline-color:var(--ds-auro-checkbox-outline-color)}:host .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-hover, #f2f2f2)}:host .svg--cbx{color:var(--ds-auro-checkbox-checkmark-color)}:host(:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host([checked]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-istrue, #01426a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue, #01426a)}:host([checked]) .label--cbx:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-istrue-hover, #00274a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-hover, #00274a)}:host([checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-hover, #00274a)}:host([disabled]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-disabled, #dddddd);--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([disabled]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-disabled, #dddddd);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse, #ffffff)}:host([disabled][checked]){--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-disabled, #dddddd)}:host([disabled][checked]) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-disabled, #dddddd)}:host([error]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error, #e31f26)}:host([error]:not([checked]):focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host([error][checked]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error, #e31f26);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error, #e31f26)}:host([error][checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-hover, #b1161c);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-hover, #b1161c)}:host([error][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([error][checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-hover, #b1161c)}:host([onDark]){--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-checkbox-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-checkbox-container-color: transparent}:host([onDark]) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-inverse-hover, rgba(255, 255, 255, 0.2))}:host([onDark]:not([checked])) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-inverse-hover, rgba(255, 255, 255, 0.2))}:host([onDark]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][checked]){--ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator-inverse, #00274a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-inverse, #ffffff)}:host([onDark][checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: transparent;--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-inverse-hover, rgba(255, 255, 255, 0.7))}:host([onDark][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark][checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-inverse-hover, rgba(255, 255, 255, 0.7))}:host([onDark][disabled]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894);--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][disabled]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894);--ds-auro-checkbox-container-color: transparent}:host([onDark][disabled][checked]){--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark][disabled][checked]) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark][error]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][error]:not([checked]):focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][error][checked]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][error][checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse-hover, #f15f65);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-inverse-hover, #f15f65)}:host([onDark][error][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark][error][checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-inverse-hover, #f15f65)}`;
|
|
57
57
|
|
|
58
58
|
var tokensCss$1 = i$5`:host{--ds-auro-checkbox-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator, #ffffff);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse, #ffffff);--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-checkbox-outline-color: transparent;--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
|
|
59
59
|
|
|
@@ -239,8 +239,8 @@ class AuroCheckbox extends i$2 {
|
|
|
239
239
|
},
|
|
240
240
|
|
|
241
241
|
/**
|
|
242
|
+
* The id for input node.
|
|
242
243
|
* @private
|
|
243
|
-
* id for input node
|
|
244
244
|
*/
|
|
245
245
|
inputId: {
|
|
246
246
|
type: String,
|
|
@@ -265,7 +265,7 @@ class AuroCheckbox extends i$2 {
|
|
|
265
265
|
/**
|
|
266
266
|
* Handles the change event for the checkbox input.
|
|
267
267
|
* Updates the checked state and dispatches a corresponding custom event.
|
|
268
|
-
* This custom event is only for the purpose of supporting IE
|
|
268
|
+
* This custom event is only for the purpose of supporting IE.
|
|
269
269
|
* @private
|
|
270
270
|
* @param {Event} event - The change event from the checkbox input.
|
|
271
271
|
* @returns {void}
|
|
@@ -339,6 +339,7 @@ class AuroCheckbox extends i$2 {
|
|
|
339
339
|
this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
|
|
340
340
|
|
|
341
341
|
this.addEventListener('click', () => {
|
|
342
|
+
this.checked = !this.checked;
|
|
342
343
|
this.handleFocusin();
|
|
343
344
|
});
|
|
344
345
|
|
|
@@ -368,21 +369,23 @@ class AuroCheckbox extends i$2 {
|
|
|
368
369
|
|
|
369
370
|
return x`
|
|
370
371
|
<div class="cbxContainer" part="checkbox">
|
|
371
|
-
<
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
372
|
+
<div class="inputContainer">
|
|
373
|
+
<input
|
|
374
|
+
class="util_displayHiddenVisually cbx--input"
|
|
375
|
+
part="checkbox-input"
|
|
376
|
+
@change=${this.handleChange}
|
|
377
|
+
@input="${this.handleInput}"
|
|
378
|
+
?disabled="${this.disabled}"
|
|
379
|
+
.checked="${this.checked}"
|
|
380
|
+
id="${this.inputId}"
|
|
381
|
+
name="${o$1(this.name)}"
|
|
382
|
+
type="checkbox"
|
|
383
|
+
.value="${this.value}"
|
|
384
|
+
/>
|
|
385
|
+
${this.checked ? this.generateIconHtml() : undefined}
|
|
386
|
+
</div>
|
|
383
387
|
|
|
384
388
|
<label for="${this.inputId}" class="${e(labelClasses)}" part="checkbox-label">
|
|
385
|
-
${this.checked ? this.generateIconHtml() : undefined}
|
|
386
389
|
<slot></slot>
|
|
387
390
|
</label>
|
|
388
391
|
</div>
|
|
@@ -34,7 +34,7 @@ The `<auro-checkbox>` element should be used in situations where users may:
|
|
|
34
34
|
<span slot="legend">Form label goes here</span>
|
|
35
35
|
<auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
|
|
36
36
|
<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
|
|
37
|
-
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
|
|
37
|
+
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
|
|
38
38
|
<auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
|
|
39
39
|
</auro-checkbox-group>
|
|
40
40
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -61,7 +61,7 @@ The `<auro-checkbox>` element should be used in situations where users may:
|
|
|
61
61
|
<span slot="legend">Form label goes here</span>
|
|
62
62
|
<auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
|
|
63
63
|
<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
|
|
64
|
-
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
|
|
64
|
+
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
|
|
65
65
|
<auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
|
|
66
66
|
</auro-checkbox-group>
|
|
67
67
|
```
|
|
@@ -43,9 +43,9 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = cl
|
|
|
43
43
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
44
44
|
*/const o$1=o=>o??E;
|
|
45
45
|
|
|
46
|
-
var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;--cbxLocation: var(--ds-size-50, 0.25rem)}fieldset{all:unset}@media screen and (min-width: 576px){.displayFlex slot{display:flex}}.cbxContainer{position:relative;padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbx--input:disabled+label:hover{cursor:auto}.label{margin-left:var(--ds-size-300, 1.5rem);display:block}.label:hover{cursor:pointer}.
|
|
46
|
+
var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;--cbxLocation: var(--ds-size-50, 0.25rem)}fieldset{all:unset}@media screen and (min-width: 576px){.displayFlex slot{display:flex}}.cbxContainer{position:relative;padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbx--input:disabled+label:hover{cursor:auto}.label{margin-left:var(--ds-size-300, 1.5rem);display:block}.label:hover{cursor:pointer}.inputContainer{position:relative}.inputContainer:after{-webkit-tap-highlight-color:transparent;display:block;content:"";align-items:center;justify-content:center;top:var(--ds-size-200, 1rem);left:var(--cbxLocation);width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));transform:translateY(-50%);border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);outline-style:solid;outline-width:1px;z-index:0}.svg--cbx{position:absolute;top:var(--ds-size-25, 0.125rem);left:var(--ds-size-25, 0.125rem);padding-top:3px;padding-bottom:3px;z-index:1;pointer-events:none}`;
|
|
47
47
|
|
|
48
|
-
var colorCss$2 = i$5`:host .label{color:var(--ds-auro-checkbox-label-color)}:host .
|
|
48
|
+
var colorCss$2 = i$5`:host(:not([checked])) .cbxContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-hover, #f2f2f2)}:host .label{color:var(--ds-auro-checkbox-label-color)}:host .inputContainer:after{background-color:var(--ds-auro-checkbox-container-color);border-color:var(--ds-auro-checkbox-border-color);outline-color:var(--ds-auro-checkbox-outline-color)}:host .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-hover, #f2f2f2)}:host .svg--cbx{color:var(--ds-auro-checkbox-checkmark-color)}:host(:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host([checked]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-istrue, #01426a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue, #01426a)}:host([checked]) .label--cbx:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-istrue-hover, #00274a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-hover, #00274a)}:host([checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-hover, #00274a)}:host([disabled]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-disabled, #dddddd);--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([disabled]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-disabled, #dddddd);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse, #ffffff)}:host([disabled][checked]){--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-disabled, #dddddd)}:host([disabled][checked]) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-disabled, #dddddd)}:host([error]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error, #e31f26)}:host([error]:not([checked]):focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host([error][checked]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error, #e31f26);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error, #e31f26)}:host([error][checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-hover, #b1161c);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-hover, #b1161c)}:host([error][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([error][checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-hover, #b1161c)}:host([onDark]){--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-checkbox-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-checkbox-container-color: transparent}:host([onDark]) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-inverse-hover, rgba(255, 255, 255, 0.2))}:host([onDark]:not([checked])) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-inverse-hover, rgba(255, 255, 255, 0.2))}:host([onDark]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][checked]){--ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator-inverse, #00274a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-inverse, #ffffff)}:host([onDark][checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: transparent;--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-inverse-hover, rgba(255, 255, 255, 0.7))}:host([onDark][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark][checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-inverse-hover, rgba(255, 255, 255, 0.7))}:host([onDark][disabled]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894);--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][disabled]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894);--ds-auro-checkbox-container-color: transparent}:host([onDark][disabled][checked]){--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark][disabled][checked]) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark][error]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][error]:not([checked]):focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][error][checked]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][error][checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse-hover, #f15f65);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-inverse-hover, #f15f65)}:host([onDark][error][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark][error][checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-inverse-hover, #f15f65)}`;
|
|
49
49
|
|
|
50
50
|
var tokensCss$1 = i$5`:host{--ds-auro-checkbox-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator, #ffffff);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse, #ffffff);--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-checkbox-outline-color: transparent;--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
|
|
51
51
|
|
|
@@ -231,8 +231,8 @@ class AuroCheckbox extends i$2 {
|
|
|
231
231
|
},
|
|
232
232
|
|
|
233
233
|
/**
|
|
234
|
+
* The id for input node.
|
|
234
235
|
* @private
|
|
235
|
-
* id for input node
|
|
236
236
|
*/
|
|
237
237
|
inputId: {
|
|
238
238
|
type: String,
|
|
@@ -257,7 +257,7 @@ class AuroCheckbox extends i$2 {
|
|
|
257
257
|
/**
|
|
258
258
|
* Handles the change event for the checkbox input.
|
|
259
259
|
* Updates the checked state and dispatches a corresponding custom event.
|
|
260
|
-
* This custom event is only for the purpose of supporting IE
|
|
260
|
+
* This custom event is only for the purpose of supporting IE.
|
|
261
261
|
* @private
|
|
262
262
|
* @param {Event} event - The change event from the checkbox input.
|
|
263
263
|
* @returns {void}
|
|
@@ -331,6 +331,7 @@ class AuroCheckbox extends i$2 {
|
|
|
331
331
|
this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
|
|
332
332
|
|
|
333
333
|
this.addEventListener('click', () => {
|
|
334
|
+
this.checked = !this.checked;
|
|
334
335
|
this.handleFocusin();
|
|
335
336
|
});
|
|
336
337
|
|
|
@@ -360,21 +361,23 @@ class AuroCheckbox extends i$2 {
|
|
|
360
361
|
|
|
361
362
|
return x`
|
|
362
363
|
<div class="cbxContainer" part="checkbox">
|
|
363
|
-
<
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
364
|
+
<div class="inputContainer">
|
|
365
|
+
<input
|
|
366
|
+
class="util_displayHiddenVisually cbx--input"
|
|
367
|
+
part="checkbox-input"
|
|
368
|
+
@change=${this.handleChange}
|
|
369
|
+
@input="${this.handleInput}"
|
|
370
|
+
?disabled="${this.disabled}"
|
|
371
|
+
.checked="${this.checked}"
|
|
372
|
+
id="${this.inputId}"
|
|
373
|
+
name="${o$1(this.name)}"
|
|
374
|
+
type="checkbox"
|
|
375
|
+
.value="${this.value}"
|
|
376
|
+
/>
|
|
377
|
+
${this.checked ? this.generateIconHtml() : undefined}
|
|
378
|
+
</div>
|
|
375
379
|
|
|
376
380
|
<label for="${this.inputId}" class="${e(labelClasses)}" part="checkbox-label">
|
|
377
|
-
${this.checked ? this.generateIconHtml() : undefined}
|
|
378
381
|
<slot></slot>
|
|
379
382
|
</label>
|
|
380
383
|
</div>
|
|
@@ -87,7 +87,7 @@ This configuration enables proper module resolution for the component's TypeScri
|
|
|
87
87
|
<span slot="legend">Form label goes here</span>
|
|
88
88
|
<auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
|
|
89
89
|
<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
|
|
90
|
-
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
|
|
90
|
+
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
|
|
91
91
|
<auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
|
|
92
92
|
</auro-checkbox-group>
|
|
93
93
|
```
|
|
@@ -59,8 +59,8 @@ export class AuroCheckbox extends LitElement {
|
|
|
59
59
|
*/
|
|
60
60
|
touched: boolean;
|
|
61
61
|
/**
|
|
62
|
+
* The id for input node.
|
|
62
63
|
* @private
|
|
63
|
-
* id for input node
|
|
64
64
|
*/
|
|
65
65
|
inputId: {
|
|
66
66
|
type: StringConstructor;
|
|
@@ -89,7 +89,7 @@ export class AuroCheckbox extends LitElement {
|
|
|
89
89
|
/**
|
|
90
90
|
* Handles the change event for the checkbox input.
|
|
91
91
|
* Updates the checked state and dispatches a corresponding custom event.
|
|
92
|
-
* This custom event is only for the purpose of supporting IE
|
|
92
|
+
* This custom event is only for the purpose of supporting IE.
|
|
93
93
|
* @private
|
|
94
94
|
* @param {Event} event - The change event from the checkbox input.
|
|
95
95
|
* @returns {void}
|
|
@@ -3,9 +3,9 @@ import { classMap } from 'lit/directives/class-map.js';
|
|
|
3
3
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
4
4
|
import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
|
|
5
5
|
|
|
6
|
-
var styleCss$2 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;--cbxLocation: var(--ds-size-50, 0.25rem)}fieldset{all:unset}@media screen and (min-width: 576px){.displayFlex slot{display:flex}}.cbxContainer{position:relative;padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbx--input:disabled+label:hover{cursor:auto}.label{margin-left:var(--ds-size-300, 1.5rem);display:block}.label:hover{cursor:pointer}.
|
|
6
|
+
var styleCss$2 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;--cbxLocation: var(--ds-size-50, 0.25rem)}fieldset{all:unset}@media screen and (min-width: 576px){.displayFlex slot{display:flex}}.cbxContainer{position:relative;padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbx--input:disabled+label:hover{cursor:auto}.label{margin-left:var(--ds-size-300, 1.5rem);display:block}.label:hover{cursor:pointer}.inputContainer{position:relative}.inputContainer:after{-webkit-tap-highlight-color:transparent;display:block;content:"";align-items:center;justify-content:center;top:var(--ds-size-200, 1rem);left:var(--cbxLocation);width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));transform:translateY(-50%);border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);outline-style:solid;outline-width:1px;z-index:0}.svg--cbx{position:absolute;top:var(--ds-size-25, 0.125rem);left:var(--ds-size-25, 0.125rem);padding-top:3px;padding-bottom:3px;z-index:1;pointer-events:none}`;
|
|
7
7
|
|
|
8
|
-
var colorCss$2 = css`:host .label{color:var(--ds-auro-checkbox-label-color)}:host .
|
|
8
|
+
var colorCss$2 = css`:host(:not([checked])) .cbxContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-hover, #f2f2f2)}:host .label{color:var(--ds-auro-checkbox-label-color)}:host .inputContainer:after{background-color:var(--ds-auro-checkbox-container-color);border-color:var(--ds-auro-checkbox-border-color);outline-color:var(--ds-auro-checkbox-outline-color)}:host .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-hover, #f2f2f2)}:host .svg--cbx{color:var(--ds-auro-checkbox-checkmark-color)}:host(:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host([checked]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-istrue, #01426a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue, #01426a)}:host([checked]) .label--cbx:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-istrue-hover, #00274a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-hover, #00274a)}:host([checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-hover, #00274a)}:host([disabled]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-disabled, #dddddd);--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([disabled]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-disabled, #dddddd);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse, #ffffff)}:host([disabled][checked]){--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-disabled, #dddddd)}:host([disabled][checked]) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-disabled, #dddddd)}:host([error]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error, #e31f26)}:host([error]:not([checked]):focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host([error][checked]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error, #e31f26);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error, #e31f26)}:host([error][checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-hover, #b1161c);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-hover, #b1161c)}:host([error][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([error][checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-hover, #b1161c)}:host([onDark]){--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-checkbox-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-checkbox-container-color: transparent}:host([onDark]) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-inverse-hover, rgba(255, 255, 255, 0.2))}:host([onDark]:not([checked])) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-inverse-hover, rgba(255, 255, 255, 0.2))}:host([onDark]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][checked]){--ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator-inverse, #00274a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-inverse, #ffffff)}:host([onDark][checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: transparent;--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-inverse-hover, rgba(255, 255, 255, 0.7))}:host([onDark][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark][checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-inverse-hover, rgba(255, 255, 255, 0.7))}:host([onDark][disabled]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894);--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][disabled]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894);--ds-auro-checkbox-container-color: transparent}:host([onDark][disabled][checked]){--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark][disabled][checked]) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark][error]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][error]:not([checked]):focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][error][checked]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][error][checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse-hover, #f15f65);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-inverse-hover, #f15f65)}:host([onDark][error][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark][error][checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-inverse-hover, #f15f65)}`;
|
|
9
9
|
|
|
10
10
|
var tokensCss$1 = css`:host{--ds-auro-checkbox-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator, #ffffff);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse, #ffffff);--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-checkbox-outline-color: transparent;--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
|
|
11
11
|
|
|
@@ -191,8 +191,8 @@ class AuroCheckbox extends LitElement {
|
|
|
191
191
|
},
|
|
192
192
|
|
|
193
193
|
/**
|
|
194
|
+
* The id for input node.
|
|
194
195
|
* @private
|
|
195
|
-
* id for input node
|
|
196
196
|
*/
|
|
197
197
|
inputId: {
|
|
198
198
|
type: String,
|
|
@@ -217,7 +217,7 @@ class AuroCheckbox extends LitElement {
|
|
|
217
217
|
/**
|
|
218
218
|
* Handles the change event for the checkbox input.
|
|
219
219
|
* Updates the checked state and dispatches a corresponding custom event.
|
|
220
|
-
* This custom event is only for the purpose of supporting IE
|
|
220
|
+
* This custom event is only for the purpose of supporting IE.
|
|
221
221
|
* @private
|
|
222
222
|
* @param {Event} event - The change event from the checkbox input.
|
|
223
223
|
* @returns {void}
|
|
@@ -291,6 +291,7 @@ class AuroCheckbox extends LitElement {
|
|
|
291
291
|
this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
|
|
292
292
|
|
|
293
293
|
this.addEventListener('click', () => {
|
|
294
|
+
this.checked = !this.checked;
|
|
294
295
|
this.handleFocusin();
|
|
295
296
|
});
|
|
296
297
|
|
|
@@ -320,21 +321,23 @@ class AuroCheckbox extends LitElement {
|
|
|
320
321
|
|
|
321
322
|
return html`
|
|
322
323
|
<div class="cbxContainer" part="checkbox">
|
|
323
|
-
<
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
324
|
+
<div class="inputContainer">
|
|
325
|
+
<input
|
|
326
|
+
class="util_displayHiddenVisually cbx--input"
|
|
327
|
+
part="checkbox-input"
|
|
328
|
+
@change=${this.handleChange}
|
|
329
|
+
@input="${this.handleInput}"
|
|
330
|
+
?disabled="${this.disabled}"
|
|
331
|
+
.checked="${this.checked}"
|
|
332
|
+
id="${this.inputId}"
|
|
333
|
+
name="${ifDefined(this.name)}"
|
|
334
|
+
type="checkbox"
|
|
335
|
+
.value="${this.value}"
|
|
336
|
+
/>
|
|
337
|
+
${this.checked ? this.generateIconHtml() : undefined}
|
|
338
|
+
</div>
|
|
335
339
|
|
|
336
340
|
<label for="${this.inputId}" class="${classMap(labelClasses)}" part="checkbox-label">
|
|
337
|
-
${this.checked ? this.generateIconHtml() : undefined}
|
|
338
341
|
<slot></slot>
|
|
339
342
|
</label>
|
|
340
343
|
</div>
|
|
@@ -3,9 +3,9 @@ import { classMap } from 'lit/directives/class-map.js';
|
|
|
3
3
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
4
4
|
import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
|
|
5
5
|
|
|
6
|
-
var styleCss$2 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;--cbxLocation: var(--ds-size-50, 0.25rem)}fieldset{all:unset}@media screen and (min-width: 576px){.displayFlex slot{display:flex}}.cbxContainer{position:relative;padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbx--input:disabled+label:hover{cursor:auto}.label{margin-left:var(--ds-size-300, 1.5rem);display:block}.label:hover{cursor:pointer}.
|
|
6
|
+
var styleCss$2 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;--cbxLocation: var(--ds-size-50, 0.25rem)}fieldset{all:unset}@media screen and (min-width: 576px){.displayFlex slot{display:flex}}.cbxContainer{position:relative;padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbx--input:disabled+label:hover{cursor:auto}.label{margin-left:var(--ds-size-300, 1.5rem);display:block}.label:hover{cursor:pointer}.inputContainer{position:relative}.inputContainer:after{-webkit-tap-highlight-color:transparent;display:block;content:"";align-items:center;justify-content:center;top:var(--ds-size-200, 1rem);left:var(--cbxLocation);width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));transform:translateY(-50%);border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);outline-style:solid;outline-width:1px;z-index:0}.svg--cbx{position:absolute;top:var(--ds-size-25, 0.125rem);left:var(--ds-size-25, 0.125rem);padding-top:3px;padding-bottom:3px;z-index:1;pointer-events:none}`;
|
|
7
7
|
|
|
8
|
-
var colorCss$2 = css`:host .label{color:var(--ds-auro-checkbox-label-color)}:host .
|
|
8
|
+
var colorCss$2 = css`:host(:not([checked])) .cbxContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-hover, #f2f2f2)}:host .label{color:var(--ds-auro-checkbox-label-color)}:host .inputContainer:after{background-color:var(--ds-auro-checkbox-container-color);border-color:var(--ds-auro-checkbox-border-color);outline-color:var(--ds-auro-checkbox-outline-color)}:host .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-hover, #f2f2f2)}:host .svg--cbx{color:var(--ds-auro-checkbox-checkmark-color)}:host(:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host([checked]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-istrue, #01426a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue, #01426a)}:host([checked]) .label--cbx:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-istrue-hover, #00274a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-hover, #00274a)}:host([checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-hover, #00274a)}:host([disabled]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-disabled, #dddddd);--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([disabled]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-disabled, #dddddd);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse, #ffffff)}:host([disabled][checked]){--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-disabled, #dddddd)}:host([disabled][checked]) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-disabled, #dddddd)}:host([error]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error, #e31f26)}:host([error]:not([checked]):focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host([error][checked]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error, #e31f26);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error, #e31f26)}:host([error][checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-hover, #b1161c);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-hover, #b1161c)}:host([error][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([error][checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-hover, #b1161c)}:host([onDark]){--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-checkbox-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-checkbox-container-color: transparent}:host([onDark]) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-inverse-hover, rgba(255, 255, 255, 0.2))}:host([onDark]:not([checked])) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-inverse-hover, rgba(255, 255, 255, 0.2))}:host([onDark]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][checked]){--ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator-inverse, #00274a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-inverse, #ffffff)}:host([onDark][checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: transparent;--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-inverse-hover, rgba(255, 255, 255, 0.7))}:host([onDark][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark][checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-inverse-hover, rgba(255, 255, 255, 0.7))}:host([onDark][disabled]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894);--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][disabled]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894);--ds-auro-checkbox-container-color: transparent}:host([onDark][disabled][checked]){--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark][disabled][checked]) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark][error]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][error]:not([checked]):focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][error][checked]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][error][checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse-hover, #f15f65);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-inverse-hover, #f15f65)}:host([onDark][error][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark][error][checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-inverse-hover, #f15f65)}`;
|
|
9
9
|
|
|
10
10
|
var tokensCss$1 = css`:host{--ds-auro-checkbox-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator, #ffffff);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse, #ffffff);--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-checkbox-outline-color: transparent;--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
|
|
11
11
|
|
|
@@ -191,8 +191,8 @@ class AuroCheckbox extends LitElement {
|
|
|
191
191
|
},
|
|
192
192
|
|
|
193
193
|
/**
|
|
194
|
+
* The id for input node.
|
|
194
195
|
* @private
|
|
195
|
-
* id for input node
|
|
196
196
|
*/
|
|
197
197
|
inputId: {
|
|
198
198
|
type: String,
|
|
@@ -217,7 +217,7 @@ class AuroCheckbox extends LitElement {
|
|
|
217
217
|
/**
|
|
218
218
|
* Handles the change event for the checkbox input.
|
|
219
219
|
* Updates the checked state and dispatches a corresponding custom event.
|
|
220
|
-
* This custom event is only for the purpose of supporting IE
|
|
220
|
+
* This custom event is only for the purpose of supporting IE.
|
|
221
221
|
* @private
|
|
222
222
|
* @param {Event} event - The change event from the checkbox input.
|
|
223
223
|
* @returns {void}
|
|
@@ -291,6 +291,7 @@ class AuroCheckbox extends LitElement {
|
|
|
291
291
|
this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
|
|
292
292
|
|
|
293
293
|
this.addEventListener('click', () => {
|
|
294
|
+
this.checked = !this.checked;
|
|
294
295
|
this.handleFocusin();
|
|
295
296
|
});
|
|
296
297
|
|
|
@@ -320,21 +321,23 @@ class AuroCheckbox extends LitElement {
|
|
|
320
321
|
|
|
321
322
|
return html`
|
|
322
323
|
<div class="cbxContainer" part="checkbox">
|
|
323
|
-
<
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
324
|
+
<div class="inputContainer">
|
|
325
|
+
<input
|
|
326
|
+
class="util_displayHiddenVisually cbx--input"
|
|
327
|
+
part="checkbox-input"
|
|
328
|
+
@change=${this.handleChange}
|
|
329
|
+
@input="${this.handleInput}"
|
|
330
|
+
?disabled="${this.disabled}"
|
|
331
|
+
.checked="${this.checked}"
|
|
332
|
+
id="${this.inputId}"
|
|
333
|
+
name="${ifDefined(this.name)}"
|
|
334
|
+
type="checkbox"
|
|
335
|
+
.value="${this.value}"
|
|
336
|
+
/>
|
|
337
|
+
${this.checked ? this.generateIconHtml() : undefined}
|
|
338
|
+
</div>
|
|
335
339
|
|
|
336
340
|
<label for="${this.inputId}" class="${classMap(labelClasses)}" part="checkbox-label">
|
|
337
|
-
${this.checked ? this.generateIconHtml() : undefined}
|
|
338
341
|
<slot></slot>
|
|
339
342
|
</label>
|
|
340
343
|
</div>
|
|
@@ -56,6 +56,7 @@
|
|
|
56
56
|
|---------------------------|--------------------------------------------------|
|
|
57
57
|
| | Default slot for the menu content. |
|
|
58
58
|
| `bib.fullscreen.headline` | Defines the headline to display above menu-options |
|
|
59
|
+
| [displayValue](#displayValue) | Allows custom HTML content to display the selected value when the combobox is not focused. Only works with `snowflake` and `emphasized` layouts. |
|
|
59
60
|
| [helpText](#helpText) | Defines the content of the helpText. |
|
|
60
61
|
| [label](#label) | Defines the content of the label. |
|
|
61
62
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -1210,4 +1211,55 @@ export function inDialogExample() {
|
|
|
1210
1211
|
};
|
|
1211
1212
|
```
|
|
1212
1213
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1214
|
+
</auro-accordion>
|
|
1215
|
+
|
|
1216
|
+
#### Custom display value
|
|
1217
|
+
|
|
1218
|
+
You can fully customize how selected values appear by using the `displayValue` slot. This slot allows you to pass in any HTML content. Only the `snowflake` and `emphasized` layouts are supported.
|
|
1219
|
+
|
|
1220
|
+
<div class="exampleWrapper--ondark">
|
|
1221
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/displayValueSlot.html) -->
|
|
1222
|
+
<!-- The below content is automatically added from ./../apiExamples/displayValueSlot.html -->
|
|
1223
|
+
<auro-combobox layout="snowflake" shape="snowflake" size="xl" ondark value="Apples">
|
|
1224
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
1225
|
+
<span slot="label">Name</span>
|
|
1226
|
+
<auro-menu>
|
|
1227
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
1228
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
1229
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
1230
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
1231
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
1232
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
1233
|
+
</auro-menu>
|
|
1234
|
+
<div slot="displayValue">
|
|
1235
|
+
<div class="mainText">Custom display value</div>
|
|
1236
|
+
<div class="subText">Any html can be used</div>
|
|
1237
|
+
</div>
|
|
1238
|
+
</auro-combobox>
|
|
1239
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1240
|
+
</div>
|
|
1241
|
+
<auro-accordion alignRight>
|
|
1242
|
+
<span slot="trigger">See code</span>
|
|
1243
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/displayValueSlot.html) -->
|
|
1244
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/displayValueSlot.html -->
|
|
1245
|
+
|
|
1246
|
+
```html
|
|
1247
|
+
<auro-combobox layout="snowflake" shape="snowflake" size="xl" ondark value="Apples">
|
|
1248
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
1249
|
+
<span slot="label">Name</span>
|
|
1250
|
+
<auro-menu>
|
|
1251
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
1252
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
1253
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
1254
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
1255
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
1256
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
1257
|
+
</auro-menu>
|
|
1258
|
+
<div slot="displayValue">
|
|
1259
|
+
<div class="mainText">Custom display value</div>
|
|
1260
|
+
<div class="subText">Any html can be used</div>
|
|
1261
|
+
</div>
|
|
1262
|
+
</auro-combobox>
|
|
1263
|
+
```
|
|
1264
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1213
1265
|
</auro-accordion>
|