@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.37 → 0.0.0-pr624.39
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/demo/api.min.js +13 -6
- package/components/checkbox/demo/index.min.js +13 -6
- package/components/checkbox/dist/index.js +13 -6
- package/components/checkbox/dist/registered.js +13 -6
- package/components/radio/demo/api.md +0 -1
- package/components/radio/demo/api.min.js +52 -67
- package/components/radio/demo/index.min.js +52 -67
- package/components/radio/dist/auro-radio.d.ts +8 -11
- package/components/radio/dist/index.js +52 -67
- package/components/radio/dist/registered.js +52 -67
- package/package.json +1 -1
|
@@ -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;display:flex;flex-direction:row;gap:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.
|
|
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;display:flex;flex-direction:row;gap:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbxContainer:hover{cursor:pointer}.label{display:block}.label:hover{cursor:pointer}:host([disabled]) .cbxContainer{pointer-events:none;cursor:default}.inputContainer{position:relative}.inputContainer:after{-webkit-tap-highlight-color:transparent;display:block;content:"";align-items:center;justify-content:center;margin-top: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));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;padding-top:3px;padding-bottom:3px;z-index:1;pointer-events:none}`;
|
|
55
55
|
|
|
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]) .inputContainer: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)}`;
|
|
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]) .cbxContainer:hover,:host([checked]) .inputContainer: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) .cbxContainer:hover,: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]) .cbxContainer:hover,: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]) .cbxContainer:hover,: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]) .cbxContainer:hover,: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) .cbxContainer:hover,: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]) .cbxContainer:hover,: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])) .cbxContainer:hover,: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]) .cbxContainer:hover,: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) .cbxContainer:hover,: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]) .cbxContainer:hover,: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]) .cbxContainer:hover,: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]) .cbxContainer:hover,: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) .cbxContainer:hover,: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
|
|
|
@@ -338,9 +338,16 @@ class AuroCheckbox extends i$2 {
|
|
|
338
338
|
|
|
339
339
|
this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
|
|
340
340
|
|
|
341
|
-
this.addEventListener('click', () => {
|
|
342
|
-
|
|
343
|
-
|
|
341
|
+
this.addEventListener('click', (evt) => {
|
|
342
|
+
// Only prevent default for real user events, not tests or programmatic calls
|
|
343
|
+
if (evt.isTrusted) {
|
|
344
|
+
evt.preventDefault();
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
if (!this.disabled) {
|
|
348
|
+
this.checked = !this.checked;
|
|
349
|
+
this.handleFocusin();
|
|
350
|
+
}
|
|
344
351
|
});
|
|
345
352
|
|
|
346
353
|
this.addEventListener('focusin', () => {
|
|
@@ -373,7 +380,7 @@ class AuroCheckbox extends i$2 {
|
|
|
373
380
|
<input
|
|
374
381
|
class="util_displayHiddenVisually cbx--input"
|
|
375
382
|
part="checkbox-input"
|
|
376
|
-
@change
|
|
383
|
+
@change="${this.handleChange}"
|
|
377
384
|
@input="${this.handleInput}"
|
|
378
385
|
?disabled="${this.disabled}"
|
|
379
386
|
.checked="${this.checked}"
|
|
@@ -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;display:flex;flex-direction:row;gap:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.
|
|
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;display:flex;flex-direction:row;gap:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbxContainer:hover{cursor:pointer}.label{display:block}.label:hover{cursor:pointer}:host([disabled]) .cbxContainer{pointer-events:none;cursor:default}.inputContainer{position:relative}.inputContainer:after{-webkit-tap-highlight-color:transparent;display:block;content:"";align-items:center;justify-content:center;margin-top: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));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;padding-top:3px;padding-bottom:3px;z-index:1;pointer-events:none}`;
|
|
47
47
|
|
|
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]) .inputContainer: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)}`;
|
|
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]) .cbxContainer:hover,:host([checked]) .inputContainer: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) .cbxContainer:hover,: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]) .cbxContainer:hover,: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]) .cbxContainer:hover,: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]) .cbxContainer:hover,: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) .cbxContainer:hover,: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]) .cbxContainer:hover,: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])) .cbxContainer:hover,: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]) .cbxContainer:hover,: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) .cbxContainer:hover,: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]) .cbxContainer:hover,: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]) .cbxContainer:hover,: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]) .cbxContainer:hover,: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) .cbxContainer:hover,: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
|
|
|
@@ -330,9 +330,16 @@ class AuroCheckbox extends i$2 {
|
|
|
330
330
|
|
|
331
331
|
this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
|
|
332
332
|
|
|
333
|
-
this.addEventListener('click', () => {
|
|
334
|
-
|
|
335
|
-
|
|
333
|
+
this.addEventListener('click', (evt) => {
|
|
334
|
+
// Only prevent default for real user events, not tests or programmatic calls
|
|
335
|
+
if (evt.isTrusted) {
|
|
336
|
+
evt.preventDefault();
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
if (!this.disabled) {
|
|
340
|
+
this.checked = !this.checked;
|
|
341
|
+
this.handleFocusin();
|
|
342
|
+
}
|
|
336
343
|
});
|
|
337
344
|
|
|
338
345
|
this.addEventListener('focusin', () => {
|
|
@@ -365,7 +372,7 @@ class AuroCheckbox extends i$2 {
|
|
|
365
372
|
<input
|
|
366
373
|
class="util_displayHiddenVisually cbx--input"
|
|
367
374
|
part="checkbox-input"
|
|
368
|
-
@change
|
|
375
|
+
@change="${this.handleChange}"
|
|
369
376
|
@input="${this.handleInput}"
|
|
370
377
|
?disabled="${this.disabled}"
|
|
371
378
|
.checked="${this.checked}"
|
|
@@ -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;display:flex;flex-direction:row;gap:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.
|
|
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;display:flex;flex-direction:row;gap:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbxContainer:hover{cursor:pointer}.label{display:block}.label:hover{cursor:pointer}:host([disabled]) .cbxContainer{pointer-events:none;cursor:default}.inputContainer{position:relative}.inputContainer:after{-webkit-tap-highlight-color:transparent;display:block;content:"";align-items:center;justify-content:center;margin-top: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));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;padding-top:3px;padding-bottom:3px;z-index:1;pointer-events:none}`;
|
|
7
7
|
|
|
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]) .inputContainer: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)}`;
|
|
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]) .cbxContainer:hover,:host([checked]) .inputContainer: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) .cbxContainer:hover,: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]) .cbxContainer:hover,: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]) .cbxContainer:hover,: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]) .cbxContainer:hover,: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) .cbxContainer:hover,: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]) .cbxContainer:hover,: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])) .cbxContainer:hover,: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]) .cbxContainer:hover,: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) .cbxContainer:hover,: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]) .cbxContainer:hover,: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]) .cbxContainer:hover,: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]) .cbxContainer:hover,: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) .cbxContainer:hover,: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
|
|
|
@@ -290,9 +290,16 @@ class AuroCheckbox extends LitElement {
|
|
|
290
290
|
|
|
291
291
|
this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
|
|
292
292
|
|
|
293
|
-
this.addEventListener('click', () => {
|
|
294
|
-
|
|
295
|
-
|
|
293
|
+
this.addEventListener('click', (evt) => {
|
|
294
|
+
// Only prevent default for real user events, not tests or programmatic calls
|
|
295
|
+
if (evt.isTrusted) {
|
|
296
|
+
evt.preventDefault();
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
if (!this.disabled) {
|
|
300
|
+
this.checked = !this.checked;
|
|
301
|
+
this.handleFocusin();
|
|
302
|
+
}
|
|
296
303
|
});
|
|
297
304
|
|
|
298
305
|
this.addEventListener('focusin', () => {
|
|
@@ -325,7 +332,7 @@ class AuroCheckbox extends LitElement {
|
|
|
325
332
|
<input
|
|
326
333
|
class="util_displayHiddenVisually cbx--input"
|
|
327
334
|
part="checkbox-input"
|
|
328
|
-
@change
|
|
335
|
+
@change="${this.handleChange}"
|
|
329
336
|
@input="${this.handleInput}"
|
|
330
337
|
?disabled="${this.disabled}"
|
|
331
338
|
.checked="${this.checked}"
|
|
@@ -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;display:flex;flex-direction:row;gap:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.
|
|
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;display:flex;flex-direction:row;gap:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbxContainer:hover{cursor:pointer}.label{display:block}.label:hover{cursor:pointer}:host([disabled]) .cbxContainer{pointer-events:none;cursor:default}.inputContainer{position:relative}.inputContainer:after{-webkit-tap-highlight-color:transparent;display:block;content:"";align-items:center;justify-content:center;margin-top: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));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;padding-top:3px;padding-bottom:3px;z-index:1;pointer-events:none}`;
|
|
7
7
|
|
|
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]) .inputContainer: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)}`;
|
|
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]) .cbxContainer:hover,:host([checked]) .inputContainer: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) .cbxContainer:hover,: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]) .cbxContainer:hover,: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]) .cbxContainer:hover,: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]) .cbxContainer:hover,: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) .cbxContainer:hover,: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]) .cbxContainer:hover,: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])) .cbxContainer:hover,: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]) .cbxContainer:hover,: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) .cbxContainer:hover,: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]) .cbxContainer:hover,: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]) .cbxContainer:hover,: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]) .cbxContainer:hover,: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) .cbxContainer:hover,: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
|
|
|
@@ -290,9 +290,16 @@ class AuroCheckbox extends LitElement {
|
|
|
290
290
|
|
|
291
291
|
this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
|
|
292
292
|
|
|
293
|
-
this.addEventListener('click', () => {
|
|
294
|
-
|
|
295
|
-
|
|
293
|
+
this.addEventListener('click', (evt) => {
|
|
294
|
+
// Only prevent default for real user events, not tests or programmatic calls
|
|
295
|
+
if (evt.isTrusted) {
|
|
296
|
+
evt.preventDefault();
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
if (!this.disabled) {
|
|
300
|
+
this.checked = !this.checked;
|
|
301
|
+
this.handleFocusin();
|
|
302
|
+
}
|
|
296
303
|
});
|
|
297
304
|
|
|
298
305
|
this.addEventListener('focusin', () => {
|
|
@@ -325,7 +332,7 @@ class AuroCheckbox extends LitElement {
|
|
|
325
332
|
<input
|
|
326
333
|
class="util_displayHiddenVisually cbx--input"
|
|
327
334
|
part="checkbox-input"
|
|
328
|
-
@change
|
|
335
|
+
@change="${this.handleChange}"
|
|
329
336
|
@input="${this.handleInput}"
|
|
330
337
|
?disabled="${this.disabled}"
|
|
331
338
|
.checked="${this.checked}"
|
|
@@ -62,7 +62,6 @@
|
|
|
62
62
|
| [name](#name) | `name` | `string` | | |
|
|
63
63
|
| [onDark](#onDark) | `onDark` | `Boolean` | false | If set to true, the component will render with a dark theme. |
|
|
64
64
|
| [required](#required) | `required` | `Boolean` | false | Defines element as required. |
|
|
65
|
-
| [tabIndex](#tabIndex) | `tabIndex` | `number` | -1 | |
|
|
66
65
|
| [value](#value) | `value` | `string` | | |
|
|
67
66
|
|
|
68
67
|
## Methods
|
|
@@ -146,6 +146,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
|
146
146
|
}
|
|
147
147
|
};
|
|
148
148
|
|
|
149
|
+
/* eslint-disable max-lines */
|
|
149
150
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
150
151
|
// See LICENSE in the project root for license information.
|
|
151
152
|
|
|
@@ -180,8 +181,8 @@ class AuroRadio extends i$2 {
|
|
|
180
181
|
this.required = false;
|
|
181
182
|
this.error = false;
|
|
182
183
|
this.onDark = false;
|
|
183
|
-
this.tabIndex = -1;
|
|
184
184
|
this.touched = false;
|
|
185
|
+
this.role = 'radio';
|
|
185
186
|
|
|
186
187
|
/**
|
|
187
188
|
* @private
|
|
@@ -223,10 +224,6 @@ class AuroRadio extends i$2 {
|
|
|
223
224
|
label: { type: String },
|
|
224
225
|
name: { type: String },
|
|
225
226
|
value: { type: String },
|
|
226
|
-
tabIndex: {
|
|
227
|
-
type: Number,
|
|
228
|
-
reflect: true
|
|
229
|
-
},
|
|
230
227
|
|
|
231
228
|
/**
|
|
232
229
|
* Whether or not the radio button has been touched by the user.
|
|
@@ -246,6 +243,15 @@ class AuroRadio extends i$2 {
|
|
|
246
243
|
type: String,
|
|
247
244
|
reflect: false,
|
|
248
245
|
attribute: false
|
|
246
|
+
},
|
|
247
|
+
|
|
248
|
+
/**
|
|
249
|
+
* @private
|
|
250
|
+
* not to add to api.md since changing of this can easily break a11y.
|
|
251
|
+
*/
|
|
252
|
+
role: {
|
|
253
|
+
type: String,
|
|
254
|
+
reflect: true
|
|
249
255
|
}
|
|
250
256
|
};
|
|
251
257
|
}
|
|
@@ -271,7 +277,6 @@ class AuroRadio extends i$2 {
|
|
|
271
277
|
handleChange(event) {
|
|
272
278
|
this.checked = event.target.checked;
|
|
273
279
|
const customEvent = new CustomEvent(event.type, event);
|
|
274
|
-
|
|
275
280
|
this.dispatchEvent(customEvent);
|
|
276
281
|
}
|
|
277
282
|
|
|
@@ -330,7 +335,27 @@ class AuroRadio extends i$2 {
|
|
|
330
335
|
}
|
|
331
336
|
|
|
332
337
|
updated(changedProperties) {
|
|
338
|
+
if (changedProperties.has('error') || changedProperties.has('validity')) {
|
|
339
|
+
this.setAttribute('aria-invalid', this.error || this.validity !== 'valid' ? 'true' : 'false');
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
if (changedProperties.has('required')) {
|
|
343
|
+
this.setAttribute('aria-required', this.isRequired(this.required));
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
if (changedProperties.has('disabled')) {
|
|
347
|
+
if (this.disabled) {
|
|
348
|
+
this.setAttribute('aria-disabled', '');
|
|
349
|
+
} else {
|
|
350
|
+
this.removeAttribute('aria-disabled');
|
|
351
|
+
}
|
|
352
|
+
}
|
|
353
|
+
|
|
333
354
|
if (changedProperties.has('checked')) {
|
|
355
|
+
this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
|
|
356
|
+
// eslint-disable-next-line no-magic-numbers
|
|
357
|
+
this.setAttribute('tabindex', this.checked ? 0 : -1);
|
|
358
|
+
|
|
334
359
|
this.dispatchEvent(new CustomEvent('resetRadio', {
|
|
335
360
|
bubbles: true,
|
|
336
361
|
composed: true
|
|
@@ -345,20 +370,6 @@ class AuroRadio extends i$2 {
|
|
|
345
370
|
}
|
|
346
371
|
}
|
|
347
372
|
|
|
348
|
-
/**
|
|
349
|
-
* Method for handling content when it is invalid accessibility wise.
|
|
350
|
-
* @private
|
|
351
|
-
* @param {Boolean} error - The element's error attribute.
|
|
352
|
-
* @returns {void}
|
|
353
|
-
*/
|
|
354
|
-
invalid(error) {
|
|
355
|
-
if (error) {
|
|
356
|
-
return 'true';
|
|
357
|
-
}
|
|
358
|
-
|
|
359
|
-
return 'false';
|
|
360
|
-
}
|
|
361
|
-
|
|
362
373
|
/**
|
|
363
374
|
* Method for handling passing the required status to aria.
|
|
364
375
|
* @private
|
|
@@ -377,6 +388,7 @@ class AuroRadio extends i$2 {
|
|
|
377
388
|
// Add the tag name as an attribute if it is different than the component name
|
|
378
389
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-radio');
|
|
379
390
|
|
|
391
|
+
this.addEventListener('focus', this.handleFocus);
|
|
380
392
|
this.addEventListener('blur', this.handleBlur);
|
|
381
393
|
|
|
382
394
|
this.input = this.shadowRoot.querySelector('input');
|
|
@@ -401,27 +413,21 @@ class AuroRadio extends i$2 {
|
|
|
401
413
|
return x`
|
|
402
414
|
<div class="ods-inputGroup rdoGroup" part="radio">
|
|
403
415
|
<input
|
|
404
|
-
class="
|
|
416
|
+
class="util_displayHidden ods-inputOption rdo--input"
|
|
405
417
|
part="radio-input"
|
|
406
|
-
@focus="${this.handleFocus}"
|
|
407
418
|
@input="${this.handleInput}"
|
|
408
419
|
@change="${this.handleChange}"
|
|
409
420
|
?disabled="${this.disabled}"
|
|
410
|
-
aria-invalid="${this.invalid(this.error)}"
|
|
411
|
-
aria-required="${this.isRequired(this.required)}"
|
|
412
421
|
.checked="${this.checked}"
|
|
413
422
|
id="${this.inputId}"
|
|
414
423
|
name="${o$1(this.name)}"
|
|
415
424
|
type="radio"
|
|
416
425
|
.value="${this.value}"
|
|
426
|
+
aria-hidden="true"
|
|
417
427
|
tabindex="-1"
|
|
418
428
|
/>
|
|
419
429
|
|
|
420
|
-
<label
|
|
421
|
-
for="${this.inputId}"
|
|
422
|
-
class="${e(labelClasses)}"
|
|
423
|
-
part="radio-label"
|
|
424
|
-
>
|
|
430
|
+
<label for="${this.inputId}" class="${e(labelClasses)}" part="radio-label">
|
|
425
431
|
<slot>${this.label}</slot>
|
|
426
432
|
</label>
|
|
427
433
|
</div>
|
|
@@ -1741,15 +1747,6 @@ class AuroRadioGroup extends i$2 {
|
|
|
1741
1747
|
if (this.items.length === 0) {
|
|
1742
1748
|
this.handleItems();
|
|
1743
1749
|
}
|
|
1744
|
-
|
|
1745
|
-
// handle tab index
|
|
1746
|
-
this.items.forEach((item) => {
|
|
1747
|
-
item.tabIndex = -1;
|
|
1748
|
-
});
|
|
1749
|
-
|
|
1750
|
-
if (!this.disabled) {
|
|
1751
|
-
this.items[this.index].tabIndex = 0;
|
|
1752
|
-
}
|
|
1753
1750
|
}
|
|
1754
1751
|
|
|
1755
1752
|
/**
|
|
@@ -1793,10 +1790,7 @@ class AuroRadioGroup extends i$2 {
|
|
|
1793
1790
|
const nextEnabledIndex = this.items.findIndex((item) => !item.hasAttribute('disabled'));
|
|
1794
1791
|
|
|
1795
1792
|
this.index = index >= 0 ? index : nextEnabledIndex;
|
|
1796
|
-
|
|
1797
|
-
if (this.index >= 0) {
|
|
1798
|
-
this.items[this.index].tabIndex = 0;
|
|
1799
|
-
}
|
|
1793
|
+
this.items[this.index].setAttribute('tabindex', 0);
|
|
1800
1794
|
}
|
|
1801
1795
|
}
|
|
1802
1796
|
|
|
@@ -1810,20 +1804,10 @@ class AuroRadioGroup extends i$2 {
|
|
|
1810
1804
|
this.index = this.items.indexOf(event.target);
|
|
1811
1805
|
|
|
1812
1806
|
this.items.forEach((item) => {
|
|
1813
|
-
|
|
1814
|
-
item.tabIndex = 0;
|
|
1815
|
-
if (event.target.value) {
|
|
1816
|
-
this.value = event.target.value;
|
|
1817
|
-
}
|
|
1818
|
-
} else {
|
|
1819
|
-
const sdInput = item.shadowRoot.querySelector('input');
|
|
1820
|
-
|
|
1821
|
-
sdInput.checked = false;
|
|
1822
|
-
item.checked = false;
|
|
1823
|
-
item.tabIndex = -1;
|
|
1824
|
-
}
|
|
1807
|
+
item.checked = item === event.target;
|
|
1825
1808
|
});
|
|
1826
1809
|
|
|
1810
|
+
this.value = event.target.value;
|
|
1827
1811
|
this.optionSelected = event.target;
|
|
1828
1812
|
|
|
1829
1813
|
this.validation.validate(this);
|
|
@@ -1836,7 +1820,7 @@ class AuroRadioGroup extends i$2 {
|
|
|
1836
1820
|
* @returns {void}
|
|
1837
1821
|
*/
|
|
1838
1822
|
selectItem(index) {
|
|
1839
|
-
const sdItem = this.items[index]
|
|
1823
|
+
const sdItem = this.items[index];
|
|
1840
1824
|
|
|
1841
1825
|
sdItem.click();
|
|
1842
1826
|
sdItem.focus();
|
|
@@ -1855,17 +1839,18 @@ class AuroRadioGroup extends i$2 {
|
|
|
1855
1839
|
|
|
1856
1840
|
for (currIndex; currIndex < this.items.length; moveDirection === "Down" ? currIndex += 1 : currIndex -= 1) {
|
|
1857
1841
|
currIndex = currIndex === -1 ? this.items.length - 1 : currIndex;
|
|
1858
|
-
const sdItem = this.items[currIndex]
|
|
1859
|
-
|
|
1860
|
-
|
|
1861
|
-
|
|
1862
|
-
|
|
1863
|
-
|
|
1864
|
-
|
|
1865
|
-
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
|
|
1842
|
+
const sdItem = this.items[currIndex];
|
|
1843
|
+
if (sdItem) {
|
|
1844
|
+
if (this.disabled || this.items.every((item) => item.disabled === true)) {
|
|
1845
|
+
sdItem.focus();
|
|
1846
|
+
break;
|
|
1847
|
+
}
|
|
1848
|
+
if (!sdItem.disabled) {
|
|
1849
|
+
sdItem.click();
|
|
1850
|
+
sdItem.focus();
|
|
1851
|
+
this.index = currIndex;
|
|
1852
|
+
break;
|
|
1853
|
+
}
|
|
1869
1854
|
}
|
|
1870
1855
|
}
|
|
1871
1856
|
}
|
|
@@ -1908,7 +1893,7 @@ class AuroRadioGroup extends i$2 {
|
|
|
1908
1893
|
};
|
|
1909
1894
|
|
|
1910
1895
|
return u`
|
|
1911
|
-
<fieldset class="${e(groupClasses)}" part="radio-group">
|
|
1896
|
+
<fieldset class="${e(groupClasses)}" part="radio-group" role="radiogroup">
|
|
1912
1897
|
<legend>
|
|
1913
1898
|
<slot name="legend"></slot>
|
|
1914
1899
|
${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
|
|
@@ -121,6 +121,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
|
121
121
|
}
|
|
122
122
|
};
|
|
123
123
|
|
|
124
|
+
/* eslint-disable max-lines */
|
|
124
125
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
125
126
|
// See LICENSE in the project root for license information.
|
|
126
127
|
|
|
@@ -155,8 +156,8 @@ class AuroRadio extends i$2 {
|
|
|
155
156
|
this.required = false;
|
|
156
157
|
this.error = false;
|
|
157
158
|
this.onDark = false;
|
|
158
|
-
this.tabIndex = -1;
|
|
159
159
|
this.touched = false;
|
|
160
|
+
this.role = 'radio';
|
|
160
161
|
|
|
161
162
|
/**
|
|
162
163
|
* @private
|
|
@@ -198,10 +199,6 @@ class AuroRadio extends i$2 {
|
|
|
198
199
|
label: { type: String },
|
|
199
200
|
name: { type: String },
|
|
200
201
|
value: { type: String },
|
|
201
|
-
tabIndex: {
|
|
202
|
-
type: Number,
|
|
203
|
-
reflect: true
|
|
204
|
-
},
|
|
205
202
|
|
|
206
203
|
/**
|
|
207
204
|
* Whether or not the radio button has been touched by the user.
|
|
@@ -221,6 +218,15 @@ class AuroRadio extends i$2 {
|
|
|
221
218
|
type: String,
|
|
222
219
|
reflect: false,
|
|
223
220
|
attribute: false
|
|
221
|
+
},
|
|
222
|
+
|
|
223
|
+
/**
|
|
224
|
+
* @private
|
|
225
|
+
* not to add to api.md since changing of this can easily break a11y.
|
|
226
|
+
*/
|
|
227
|
+
role: {
|
|
228
|
+
type: String,
|
|
229
|
+
reflect: true
|
|
224
230
|
}
|
|
225
231
|
};
|
|
226
232
|
}
|
|
@@ -246,7 +252,6 @@ class AuroRadio extends i$2 {
|
|
|
246
252
|
handleChange(event) {
|
|
247
253
|
this.checked = event.target.checked;
|
|
248
254
|
const customEvent = new CustomEvent(event.type, event);
|
|
249
|
-
|
|
250
255
|
this.dispatchEvent(customEvent);
|
|
251
256
|
}
|
|
252
257
|
|
|
@@ -305,7 +310,27 @@ class AuroRadio extends i$2 {
|
|
|
305
310
|
}
|
|
306
311
|
|
|
307
312
|
updated(changedProperties) {
|
|
313
|
+
if (changedProperties.has('error') || changedProperties.has('validity')) {
|
|
314
|
+
this.setAttribute('aria-invalid', this.error || this.validity !== 'valid' ? 'true' : 'false');
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
if (changedProperties.has('required')) {
|
|
318
|
+
this.setAttribute('aria-required', this.isRequired(this.required));
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
if (changedProperties.has('disabled')) {
|
|
322
|
+
if (this.disabled) {
|
|
323
|
+
this.setAttribute('aria-disabled', '');
|
|
324
|
+
} else {
|
|
325
|
+
this.removeAttribute('aria-disabled');
|
|
326
|
+
}
|
|
327
|
+
}
|
|
328
|
+
|
|
308
329
|
if (changedProperties.has('checked')) {
|
|
330
|
+
this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
|
|
331
|
+
// eslint-disable-next-line no-magic-numbers
|
|
332
|
+
this.setAttribute('tabindex', this.checked ? 0 : -1);
|
|
333
|
+
|
|
309
334
|
this.dispatchEvent(new CustomEvent('resetRadio', {
|
|
310
335
|
bubbles: true,
|
|
311
336
|
composed: true
|
|
@@ -320,20 +345,6 @@ class AuroRadio extends i$2 {
|
|
|
320
345
|
}
|
|
321
346
|
}
|
|
322
347
|
|
|
323
|
-
/**
|
|
324
|
-
* Method for handling content when it is invalid accessibility wise.
|
|
325
|
-
* @private
|
|
326
|
-
* @param {Boolean} error - The element's error attribute.
|
|
327
|
-
* @returns {void}
|
|
328
|
-
*/
|
|
329
|
-
invalid(error) {
|
|
330
|
-
if (error) {
|
|
331
|
-
return 'true';
|
|
332
|
-
}
|
|
333
|
-
|
|
334
|
-
return 'false';
|
|
335
|
-
}
|
|
336
|
-
|
|
337
348
|
/**
|
|
338
349
|
* Method for handling passing the required status to aria.
|
|
339
350
|
* @private
|
|
@@ -352,6 +363,7 @@ class AuroRadio extends i$2 {
|
|
|
352
363
|
// Add the tag name as an attribute if it is different than the component name
|
|
353
364
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-radio');
|
|
354
365
|
|
|
366
|
+
this.addEventListener('focus', this.handleFocus);
|
|
355
367
|
this.addEventListener('blur', this.handleBlur);
|
|
356
368
|
|
|
357
369
|
this.input = this.shadowRoot.querySelector('input');
|
|
@@ -376,27 +388,21 @@ class AuroRadio extends i$2 {
|
|
|
376
388
|
return x`
|
|
377
389
|
<div class="ods-inputGroup rdoGroup" part="radio">
|
|
378
390
|
<input
|
|
379
|
-
class="
|
|
391
|
+
class="util_displayHidden ods-inputOption rdo--input"
|
|
380
392
|
part="radio-input"
|
|
381
|
-
@focus="${this.handleFocus}"
|
|
382
393
|
@input="${this.handleInput}"
|
|
383
394
|
@change="${this.handleChange}"
|
|
384
395
|
?disabled="${this.disabled}"
|
|
385
|
-
aria-invalid="${this.invalid(this.error)}"
|
|
386
|
-
aria-required="${this.isRequired(this.required)}"
|
|
387
396
|
.checked="${this.checked}"
|
|
388
397
|
id="${this.inputId}"
|
|
389
398
|
name="${o$1(this.name)}"
|
|
390
399
|
type="radio"
|
|
391
400
|
.value="${this.value}"
|
|
401
|
+
aria-hidden="true"
|
|
392
402
|
tabindex="-1"
|
|
393
403
|
/>
|
|
394
404
|
|
|
395
|
-
<label
|
|
396
|
-
for="${this.inputId}"
|
|
397
|
-
class="${e(labelClasses)}"
|
|
398
|
-
part="radio-label"
|
|
399
|
-
>
|
|
405
|
+
<label for="${this.inputId}" class="${e(labelClasses)}" part="radio-label">
|
|
400
406
|
<slot>${this.label}</slot>
|
|
401
407
|
</label>
|
|
402
408
|
</div>
|
|
@@ -1716,15 +1722,6 @@ class AuroRadioGroup extends i$2 {
|
|
|
1716
1722
|
if (this.items.length === 0) {
|
|
1717
1723
|
this.handleItems();
|
|
1718
1724
|
}
|
|
1719
|
-
|
|
1720
|
-
// handle tab index
|
|
1721
|
-
this.items.forEach((item) => {
|
|
1722
|
-
item.tabIndex = -1;
|
|
1723
|
-
});
|
|
1724
|
-
|
|
1725
|
-
if (!this.disabled) {
|
|
1726
|
-
this.items[this.index].tabIndex = 0;
|
|
1727
|
-
}
|
|
1728
1725
|
}
|
|
1729
1726
|
|
|
1730
1727
|
/**
|
|
@@ -1768,10 +1765,7 @@ class AuroRadioGroup extends i$2 {
|
|
|
1768
1765
|
const nextEnabledIndex = this.items.findIndex((item) => !item.hasAttribute('disabled'));
|
|
1769
1766
|
|
|
1770
1767
|
this.index = index >= 0 ? index : nextEnabledIndex;
|
|
1771
|
-
|
|
1772
|
-
if (this.index >= 0) {
|
|
1773
|
-
this.items[this.index].tabIndex = 0;
|
|
1774
|
-
}
|
|
1768
|
+
this.items[this.index].setAttribute('tabindex', 0);
|
|
1775
1769
|
}
|
|
1776
1770
|
}
|
|
1777
1771
|
|
|
@@ -1785,20 +1779,10 @@ class AuroRadioGroup extends i$2 {
|
|
|
1785
1779
|
this.index = this.items.indexOf(event.target);
|
|
1786
1780
|
|
|
1787
1781
|
this.items.forEach((item) => {
|
|
1788
|
-
|
|
1789
|
-
item.tabIndex = 0;
|
|
1790
|
-
if (event.target.value) {
|
|
1791
|
-
this.value = event.target.value;
|
|
1792
|
-
}
|
|
1793
|
-
} else {
|
|
1794
|
-
const sdInput = item.shadowRoot.querySelector('input');
|
|
1795
|
-
|
|
1796
|
-
sdInput.checked = false;
|
|
1797
|
-
item.checked = false;
|
|
1798
|
-
item.tabIndex = -1;
|
|
1799
|
-
}
|
|
1782
|
+
item.checked = item === event.target;
|
|
1800
1783
|
});
|
|
1801
1784
|
|
|
1785
|
+
this.value = event.target.value;
|
|
1802
1786
|
this.optionSelected = event.target;
|
|
1803
1787
|
|
|
1804
1788
|
this.validation.validate(this);
|
|
@@ -1811,7 +1795,7 @@ class AuroRadioGroup extends i$2 {
|
|
|
1811
1795
|
* @returns {void}
|
|
1812
1796
|
*/
|
|
1813
1797
|
selectItem(index) {
|
|
1814
|
-
const sdItem = this.items[index]
|
|
1798
|
+
const sdItem = this.items[index];
|
|
1815
1799
|
|
|
1816
1800
|
sdItem.click();
|
|
1817
1801
|
sdItem.focus();
|
|
@@ -1830,17 +1814,18 @@ class AuroRadioGroup extends i$2 {
|
|
|
1830
1814
|
|
|
1831
1815
|
for (currIndex; currIndex < this.items.length; moveDirection === "Down" ? currIndex += 1 : currIndex -= 1) {
|
|
1832
1816
|
currIndex = currIndex === -1 ? this.items.length - 1 : currIndex;
|
|
1833
|
-
const sdItem = this.items[currIndex]
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
|
|
1837
|
-
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
|
|
1817
|
+
const sdItem = this.items[currIndex];
|
|
1818
|
+
if (sdItem) {
|
|
1819
|
+
if (this.disabled || this.items.every((item) => item.disabled === true)) {
|
|
1820
|
+
sdItem.focus();
|
|
1821
|
+
break;
|
|
1822
|
+
}
|
|
1823
|
+
if (!sdItem.disabled) {
|
|
1824
|
+
sdItem.click();
|
|
1825
|
+
sdItem.focus();
|
|
1826
|
+
this.index = currIndex;
|
|
1827
|
+
break;
|
|
1828
|
+
}
|
|
1844
1829
|
}
|
|
1845
1830
|
}
|
|
1846
1831
|
}
|
|
@@ -1883,7 +1868,7 @@ class AuroRadioGroup extends i$2 {
|
|
|
1883
1868
|
};
|
|
1884
1869
|
|
|
1885
1870
|
return u`
|
|
1886
|
-
<fieldset class="${e(groupClasses)}" part="radio-group">
|
|
1871
|
+
<fieldset class="${e(groupClasses)}" part="radio-group" role="radiogroup">
|
|
1887
1872
|
<legend>
|
|
1888
1873
|
<slot name="legend"></slot>
|
|
1889
1874
|
${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
|
|
@@ -50,10 +50,6 @@ export class AuroRadio extends LitElement {
|
|
|
50
50
|
value: {
|
|
51
51
|
type: StringConstructor;
|
|
52
52
|
};
|
|
53
|
-
tabIndex: {
|
|
54
|
-
type: NumberConstructor;
|
|
55
|
-
reflect: boolean;
|
|
56
|
-
};
|
|
57
53
|
/**
|
|
58
54
|
* Whether or not the radio button has been touched by the user.
|
|
59
55
|
* @private
|
|
@@ -72,6 +68,14 @@ export class AuroRadio extends LitElement {
|
|
|
72
68
|
reflect: boolean;
|
|
73
69
|
attribute: boolean;
|
|
74
70
|
};
|
|
71
|
+
/**
|
|
72
|
+
* @private
|
|
73
|
+
* not to add to api.md since changing of this can easily break a11y.
|
|
74
|
+
*/
|
|
75
|
+
role: {
|
|
76
|
+
type: StringConstructor;
|
|
77
|
+
reflect: boolean;
|
|
78
|
+
};
|
|
75
79
|
};
|
|
76
80
|
/**
|
|
77
81
|
* This will register this element with the browser.
|
|
@@ -126,13 +130,6 @@ export class AuroRadio extends LitElement {
|
|
|
126
130
|
*/
|
|
127
131
|
reset(): void;
|
|
128
132
|
updated(changedProperties: any): void;
|
|
129
|
-
/**
|
|
130
|
-
* Method for handling content when it is invalid accessibility wise.
|
|
131
|
-
* @private
|
|
132
|
-
* @param {Boolean} error - The element's error attribute.
|
|
133
|
-
* @returns {void}
|
|
134
|
-
*/
|
|
135
|
-
private invalid;
|
|
136
133
|
/**
|
|
137
134
|
* Method for handling passing the required status to aria.
|
|
138
135
|
* @private
|
|
@@ -81,6 +81,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
|
81
81
|
}
|
|
82
82
|
};
|
|
83
83
|
|
|
84
|
+
/* eslint-disable max-lines */
|
|
84
85
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
85
86
|
// See LICENSE in the project root for license information.
|
|
86
87
|
|
|
@@ -115,8 +116,8 @@ class AuroRadio extends LitElement {
|
|
|
115
116
|
this.required = false;
|
|
116
117
|
this.error = false;
|
|
117
118
|
this.onDark = false;
|
|
118
|
-
this.tabIndex = -1;
|
|
119
119
|
this.touched = false;
|
|
120
|
+
this.role = 'radio';
|
|
120
121
|
|
|
121
122
|
/**
|
|
122
123
|
* @private
|
|
@@ -158,10 +159,6 @@ class AuroRadio extends LitElement {
|
|
|
158
159
|
label: { type: String },
|
|
159
160
|
name: { type: String },
|
|
160
161
|
value: { type: String },
|
|
161
|
-
tabIndex: {
|
|
162
|
-
type: Number,
|
|
163
|
-
reflect: true
|
|
164
|
-
},
|
|
165
162
|
|
|
166
163
|
/**
|
|
167
164
|
* Whether or not the radio button has been touched by the user.
|
|
@@ -181,6 +178,15 @@ class AuroRadio extends LitElement {
|
|
|
181
178
|
type: String,
|
|
182
179
|
reflect: false,
|
|
183
180
|
attribute: false
|
|
181
|
+
},
|
|
182
|
+
|
|
183
|
+
/**
|
|
184
|
+
* @private
|
|
185
|
+
* not to add to api.md since changing of this can easily break a11y.
|
|
186
|
+
*/
|
|
187
|
+
role: {
|
|
188
|
+
type: String,
|
|
189
|
+
reflect: true
|
|
184
190
|
}
|
|
185
191
|
};
|
|
186
192
|
}
|
|
@@ -206,7 +212,6 @@ class AuroRadio extends LitElement {
|
|
|
206
212
|
handleChange(event) {
|
|
207
213
|
this.checked = event.target.checked;
|
|
208
214
|
const customEvent = new CustomEvent(event.type, event);
|
|
209
|
-
|
|
210
215
|
this.dispatchEvent(customEvent);
|
|
211
216
|
}
|
|
212
217
|
|
|
@@ -265,7 +270,27 @@ class AuroRadio extends LitElement {
|
|
|
265
270
|
}
|
|
266
271
|
|
|
267
272
|
updated(changedProperties) {
|
|
273
|
+
if (changedProperties.has('error') || changedProperties.has('validity')) {
|
|
274
|
+
this.setAttribute('aria-invalid', this.error || this.validity !== 'valid' ? 'true' : 'false');
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
if (changedProperties.has('required')) {
|
|
278
|
+
this.setAttribute('aria-required', this.isRequired(this.required));
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
if (changedProperties.has('disabled')) {
|
|
282
|
+
if (this.disabled) {
|
|
283
|
+
this.setAttribute('aria-disabled', '');
|
|
284
|
+
} else {
|
|
285
|
+
this.removeAttribute('aria-disabled');
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
|
|
268
289
|
if (changedProperties.has('checked')) {
|
|
290
|
+
this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
|
|
291
|
+
// eslint-disable-next-line no-magic-numbers
|
|
292
|
+
this.setAttribute('tabindex', this.checked ? 0 : -1);
|
|
293
|
+
|
|
269
294
|
this.dispatchEvent(new CustomEvent('resetRadio', {
|
|
270
295
|
bubbles: true,
|
|
271
296
|
composed: true
|
|
@@ -280,20 +305,6 @@ class AuroRadio extends LitElement {
|
|
|
280
305
|
}
|
|
281
306
|
}
|
|
282
307
|
|
|
283
|
-
/**
|
|
284
|
-
* Method for handling content when it is invalid accessibility wise.
|
|
285
|
-
* @private
|
|
286
|
-
* @param {Boolean} error - The element's error attribute.
|
|
287
|
-
* @returns {void}
|
|
288
|
-
*/
|
|
289
|
-
invalid(error) {
|
|
290
|
-
if (error) {
|
|
291
|
-
return 'true';
|
|
292
|
-
}
|
|
293
|
-
|
|
294
|
-
return 'false';
|
|
295
|
-
}
|
|
296
|
-
|
|
297
308
|
/**
|
|
298
309
|
* Method for handling passing the required status to aria.
|
|
299
310
|
* @private
|
|
@@ -312,6 +323,7 @@ class AuroRadio extends LitElement {
|
|
|
312
323
|
// Add the tag name as an attribute if it is different than the component name
|
|
313
324
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-radio');
|
|
314
325
|
|
|
326
|
+
this.addEventListener('focus', this.handleFocus);
|
|
315
327
|
this.addEventListener('blur', this.handleBlur);
|
|
316
328
|
|
|
317
329
|
this.input = this.shadowRoot.querySelector('input');
|
|
@@ -336,27 +348,21 @@ class AuroRadio extends LitElement {
|
|
|
336
348
|
return html`
|
|
337
349
|
<div class="ods-inputGroup rdoGroup" part="radio">
|
|
338
350
|
<input
|
|
339
|
-
class="
|
|
351
|
+
class="util_displayHidden ods-inputOption rdo--input"
|
|
340
352
|
part="radio-input"
|
|
341
|
-
@focus="${this.handleFocus}"
|
|
342
353
|
@input="${this.handleInput}"
|
|
343
354
|
@change="${this.handleChange}"
|
|
344
355
|
?disabled="${this.disabled}"
|
|
345
|
-
aria-invalid="${this.invalid(this.error)}"
|
|
346
|
-
aria-required="${this.isRequired(this.required)}"
|
|
347
356
|
.checked="${this.checked}"
|
|
348
357
|
id="${this.inputId}"
|
|
349
358
|
name="${ifDefined(this.name)}"
|
|
350
359
|
type="radio"
|
|
351
360
|
.value="${this.value}"
|
|
361
|
+
aria-hidden="true"
|
|
352
362
|
tabindex="-1"
|
|
353
363
|
/>
|
|
354
364
|
|
|
355
|
-
<label
|
|
356
|
-
for="${this.inputId}"
|
|
357
|
-
class="${classMap(labelClasses)}"
|
|
358
|
-
part="radio-label"
|
|
359
|
-
>
|
|
365
|
+
<label for="${this.inputId}" class="${classMap(labelClasses)}" part="radio-label">
|
|
360
366
|
<slot>${this.label}</slot>
|
|
361
367
|
</label>
|
|
362
368
|
</div>
|
|
@@ -1669,15 +1675,6 @@ class AuroRadioGroup extends LitElement {
|
|
|
1669
1675
|
if (this.items.length === 0) {
|
|
1670
1676
|
this.handleItems();
|
|
1671
1677
|
}
|
|
1672
|
-
|
|
1673
|
-
// handle tab index
|
|
1674
|
-
this.items.forEach((item) => {
|
|
1675
|
-
item.tabIndex = -1;
|
|
1676
|
-
});
|
|
1677
|
-
|
|
1678
|
-
if (!this.disabled) {
|
|
1679
|
-
this.items[this.index].tabIndex = 0;
|
|
1680
|
-
}
|
|
1681
1678
|
}
|
|
1682
1679
|
|
|
1683
1680
|
/**
|
|
@@ -1721,10 +1718,7 @@ class AuroRadioGroup extends LitElement {
|
|
|
1721
1718
|
const nextEnabledIndex = this.items.findIndex((item) => !item.hasAttribute('disabled'));
|
|
1722
1719
|
|
|
1723
1720
|
this.index = index >= 0 ? index : nextEnabledIndex;
|
|
1724
|
-
|
|
1725
|
-
if (this.index >= 0) {
|
|
1726
|
-
this.items[this.index].tabIndex = 0;
|
|
1727
|
-
}
|
|
1721
|
+
this.items[this.index].setAttribute('tabindex', 0);
|
|
1728
1722
|
}
|
|
1729
1723
|
}
|
|
1730
1724
|
|
|
@@ -1738,20 +1732,10 @@ class AuroRadioGroup extends LitElement {
|
|
|
1738
1732
|
this.index = this.items.indexOf(event.target);
|
|
1739
1733
|
|
|
1740
1734
|
this.items.forEach((item) => {
|
|
1741
|
-
|
|
1742
|
-
item.tabIndex = 0;
|
|
1743
|
-
if (event.target.value) {
|
|
1744
|
-
this.value = event.target.value;
|
|
1745
|
-
}
|
|
1746
|
-
} else {
|
|
1747
|
-
const sdInput = item.shadowRoot.querySelector('input');
|
|
1748
|
-
|
|
1749
|
-
sdInput.checked = false;
|
|
1750
|
-
item.checked = false;
|
|
1751
|
-
item.tabIndex = -1;
|
|
1752
|
-
}
|
|
1735
|
+
item.checked = item === event.target;
|
|
1753
1736
|
});
|
|
1754
1737
|
|
|
1738
|
+
this.value = event.target.value;
|
|
1755
1739
|
this.optionSelected = event.target;
|
|
1756
1740
|
|
|
1757
1741
|
this.validation.validate(this);
|
|
@@ -1764,7 +1748,7 @@ class AuroRadioGroup extends LitElement {
|
|
|
1764
1748
|
* @returns {void}
|
|
1765
1749
|
*/
|
|
1766
1750
|
selectItem(index) {
|
|
1767
|
-
const sdItem = this.items[index]
|
|
1751
|
+
const sdItem = this.items[index];
|
|
1768
1752
|
|
|
1769
1753
|
sdItem.click();
|
|
1770
1754
|
sdItem.focus();
|
|
@@ -1783,17 +1767,18 @@ class AuroRadioGroup extends LitElement {
|
|
|
1783
1767
|
|
|
1784
1768
|
for (currIndex; currIndex < this.items.length; moveDirection === "Down" ? currIndex += 1 : currIndex -= 1) {
|
|
1785
1769
|
currIndex = currIndex === -1 ? this.items.length - 1 : currIndex;
|
|
1786
|
-
const sdItem = this.items[currIndex]
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
|
|
1794
|
-
|
|
1795
|
-
|
|
1796
|
-
|
|
1770
|
+
const sdItem = this.items[currIndex];
|
|
1771
|
+
if (sdItem) {
|
|
1772
|
+
if (this.disabled || this.items.every((item) => item.disabled === true)) {
|
|
1773
|
+
sdItem.focus();
|
|
1774
|
+
break;
|
|
1775
|
+
}
|
|
1776
|
+
if (!sdItem.disabled) {
|
|
1777
|
+
sdItem.click();
|
|
1778
|
+
sdItem.focus();
|
|
1779
|
+
this.index = currIndex;
|
|
1780
|
+
break;
|
|
1781
|
+
}
|
|
1797
1782
|
}
|
|
1798
1783
|
}
|
|
1799
1784
|
}
|
|
@@ -1836,7 +1821,7 @@ class AuroRadioGroup extends LitElement {
|
|
|
1836
1821
|
};
|
|
1837
1822
|
|
|
1838
1823
|
return html$1`
|
|
1839
|
-
<fieldset class="${classMap(groupClasses)}" part="radio-group">
|
|
1824
|
+
<fieldset class="${classMap(groupClasses)}" part="radio-group" role="radiogroup">
|
|
1840
1825
|
<legend>
|
|
1841
1826
|
<slot name="legend"></slot>
|
|
1842
1827
|
${this.required ? undefined : html$1`<slot name="optionalLabel"> (optional)</slot>`}
|
|
@@ -81,6 +81,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
|
81
81
|
}
|
|
82
82
|
};
|
|
83
83
|
|
|
84
|
+
/* eslint-disable max-lines */
|
|
84
85
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
85
86
|
// See LICENSE in the project root for license information.
|
|
86
87
|
|
|
@@ -115,8 +116,8 @@ class AuroRadio extends LitElement {
|
|
|
115
116
|
this.required = false;
|
|
116
117
|
this.error = false;
|
|
117
118
|
this.onDark = false;
|
|
118
|
-
this.tabIndex = -1;
|
|
119
119
|
this.touched = false;
|
|
120
|
+
this.role = 'radio';
|
|
120
121
|
|
|
121
122
|
/**
|
|
122
123
|
* @private
|
|
@@ -158,10 +159,6 @@ class AuroRadio extends LitElement {
|
|
|
158
159
|
label: { type: String },
|
|
159
160
|
name: { type: String },
|
|
160
161
|
value: { type: String },
|
|
161
|
-
tabIndex: {
|
|
162
|
-
type: Number,
|
|
163
|
-
reflect: true
|
|
164
|
-
},
|
|
165
162
|
|
|
166
163
|
/**
|
|
167
164
|
* Whether or not the radio button has been touched by the user.
|
|
@@ -181,6 +178,15 @@ class AuroRadio extends LitElement {
|
|
|
181
178
|
type: String,
|
|
182
179
|
reflect: false,
|
|
183
180
|
attribute: false
|
|
181
|
+
},
|
|
182
|
+
|
|
183
|
+
/**
|
|
184
|
+
* @private
|
|
185
|
+
* not to add to api.md since changing of this can easily break a11y.
|
|
186
|
+
*/
|
|
187
|
+
role: {
|
|
188
|
+
type: String,
|
|
189
|
+
reflect: true
|
|
184
190
|
}
|
|
185
191
|
};
|
|
186
192
|
}
|
|
@@ -206,7 +212,6 @@ class AuroRadio extends LitElement {
|
|
|
206
212
|
handleChange(event) {
|
|
207
213
|
this.checked = event.target.checked;
|
|
208
214
|
const customEvent = new CustomEvent(event.type, event);
|
|
209
|
-
|
|
210
215
|
this.dispatchEvent(customEvent);
|
|
211
216
|
}
|
|
212
217
|
|
|
@@ -265,7 +270,27 @@ class AuroRadio extends LitElement {
|
|
|
265
270
|
}
|
|
266
271
|
|
|
267
272
|
updated(changedProperties) {
|
|
273
|
+
if (changedProperties.has('error') || changedProperties.has('validity')) {
|
|
274
|
+
this.setAttribute('aria-invalid', this.error || this.validity !== 'valid' ? 'true' : 'false');
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
if (changedProperties.has('required')) {
|
|
278
|
+
this.setAttribute('aria-required', this.isRequired(this.required));
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
if (changedProperties.has('disabled')) {
|
|
282
|
+
if (this.disabled) {
|
|
283
|
+
this.setAttribute('aria-disabled', '');
|
|
284
|
+
} else {
|
|
285
|
+
this.removeAttribute('aria-disabled');
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
|
|
268
289
|
if (changedProperties.has('checked')) {
|
|
290
|
+
this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
|
|
291
|
+
// eslint-disable-next-line no-magic-numbers
|
|
292
|
+
this.setAttribute('tabindex', this.checked ? 0 : -1);
|
|
293
|
+
|
|
269
294
|
this.dispatchEvent(new CustomEvent('resetRadio', {
|
|
270
295
|
bubbles: true,
|
|
271
296
|
composed: true
|
|
@@ -280,20 +305,6 @@ class AuroRadio extends LitElement {
|
|
|
280
305
|
}
|
|
281
306
|
}
|
|
282
307
|
|
|
283
|
-
/**
|
|
284
|
-
* Method for handling content when it is invalid accessibility wise.
|
|
285
|
-
* @private
|
|
286
|
-
* @param {Boolean} error - The element's error attribute.
|
|
287
|
-
* @returns {void}
|
|
288
|
-
*/
|
|
289
|
-
invalid(error) {
|
|
290
|
-
if (error) {
|
|
291
|
-
return 'true';
|
|
292
|
-
}
|
|
293
|
-
|
|
294
|
-
return 'false';
|
|
295
|
-
}
|
|
296
|
-
|
|
297
308
|
/**
|
|
298
309
|
* Method for handling passing the required status to aria.
|
|
299
310
|
* @private
|
|
@@ -312,6 +323,7 @@ class AuroRadio extends LitElement {
|
|
|
312
323
|
// Add the tag name as an attribute if it is different than the component name
|
|
313
324
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-radio');
|
|
314
325
|
|
|
326
|
+
this.addEventListener('focus', this.handleFocus);
|
|
315
327
|
this.addEventListener('blur', this.handleBlur);
|
|
316
328
|
|
|
317
329
|
this.input = this.shadowRoot.querySelector('input');
|
|
@@ -336,27 +348,21 @@ class AuroRadio extends LitElement {
|
|
|
336
348
|
return html`
|
|
337
349
|
<div class="ods-inputGroup rdoGroup" part="radio">
|
|
338
350
|
<input
|
|
339
|
-
class="
|
|
351
|
+
class="util_displayHidden ods-inputOption rdo--input"
|
|
340
352
|
part="radio-input"
|
|
341
|
-
@focus="${this.handleFocus}"
|
|
342
353
|
@input="${this.handleInput}"
|
|
343
354
|
@change="${this.handleChange}"
|
|
344
355
|
?disabled="${this.disabled}"
|
|
345
|
-
aria-invalid="${this.invalid(this.error)}"
|
|
346
|
-
aria-required="${this.isRequired(this.required)}"
|
|
347
356
|
.checked="${this.checked}"
|
|
348
357
|
id="${this.inputId}"
|
|
349
358
|
name="${ifDefined(this.name)}"
|
|
350
359
|
type="radio"
|
|
351
360
|
.value="${this.value}"
|
|
361
|
+
aria-hidden="true"
|
|
352
362
|
tabindex="-1"
|
|
353
363
|
/>
|
|
354
364
|
|
|
355
|
-
<label
|
|
356
|
-
for="${this.inputId}"
|
|
357
|
-
class="${classMap(labelClasses)}"
|
|
358
|
-
part="radio-label"
|
|
359
|
-
>
|
|
365
|
+
<label for="${this.inputId}" class="${classMap(labelClasses)}" part="radio-label">
|
|
360
366
|
<slot>${this.label}</slot>
|
|
361
367
|
</label>
|
|
362
368
|
</div>
|
|
@@ -1669,15 +1675,6 @@ class AuroRadioGroup extends LitElement {
|
|
|
1669
1675
|
if (this.items.length === 0) {
|
|
1670
1676
|
this.handleItems();
|
|
1671
1677
|
}
|
|
1672
|
-
|
|
1673
|
-
// handle tab index
|
|
1674
|
-
this.items.forEach((item) => {
|
|
1675
|
-
item.tabIndex = -1;
|
|
1676
|
-
});
|
|
1677
|
-
|
|
1678
|
-
if (!this.disabled) {
|
|
1679
|
-
this.items[this.index].tabIndex = 0;
|
|
1680
|
-
}
|
|
1681
1678
|
}
|
|
1682
1679
|
|
|
1683
1680
|
/**
|
|
@@ -1721,10 +1718,7 @@ class AuroRadioGroup extends LitElement {
|
|
|
1721
1718
|
const nextEnabledIndex = this.items.findIndex((item) => !item.hasAttribute('disabled'));
|
|
1722
1719
|
|
|
1723
1720
|
this.index = index >= 0 ? index : nextEnabledIndex;
|
|
1724
|
-
|
|
1725
|
-
if (this.index >= 0) {
|
|
1726
|
-
this.items[this.index].tabIndex = 0;
|
|
1727
|
-
}
|
|
1721
|
+
this.items[this.index].setAttribute('tabindex', 0);
|
|
1728
1722
|
}
|
|
1729
1723
|
}
|
|
1730
1724
|
|
|
@@ -1738,20 +1732,10 @@ class AuroRadioGroup extends LitElement {
|
|
|
1738
1732
|
this.index = this.items.indexOf(event.target);
|
|
1739
1733
|
|
|
1740
1734
|
this.items.forEach((item) => {
|
|
1741
|
-
|
|
1742
|
-
item.tabIndex = 0;
|
|
1743
|
-
if (event.target.value) {
|
|
1744
|
-
this.value = event.target.value;
|
|
1745
|
-
}
|
|
1746
|
-
} else {
|
|
1747
|
-
const sdInput = item.shadowRoot.querySelector('input');
|
|
1748
|
-
|
|
1749
|
-
sdInput.checked = false;
|
|
1750
|
-
item.checked = false;
|
|
1751
|
-
item.tabIndex = -1;
|
|
1752
|
-
}
|
|
1735
|
+
item.checked = item === event.target;
|
|
1753
1736
|
});
|
|
1754
1737
|
|
|
1738
|
+
this.value = event.target.value;
|
|
1755
1739
|
this.optionSelected = event.target;
|
|
1756
1740
|
|
|
1757
1741
|
this.validation.validate(this);
|
|
@@ -1764,7 +1748,7 @@ class AuroRadioGroup extends LitElement {
|
|
|
1764
1748
|
* @returns {void}
|
|
1765
1749
|
*/
|
|
1766
1750
|
selectItem(index) {
|
|
1767
|
-
const sdItem = this.items[index]
|
|
1751
|
+
const sdItem = this.items[index];
|
|
1768
1752
|
|
|
1769
1753
|
sdItem.click();
|
|
1770
1754
|
sdItem.focus();
|
|
@@ -1783,17 +1767,18 @@ class AuroRadioGroup extends LitElement {
|
|
|
1783
1767
|
|
|
1784
1768
|
for (currIndex; currIndex < this.items.length; moveDirection === "Down" ? currIndex += 1 : currIndex -= 1) {
|
|
1785
1769
|
currIndex = currIndex === -1 ? this.items.length - 1 : currIndex;
|
|
1786
|
-
const sdItem = this.items[currIndex]
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
|
|
1794
|
-
|
|
1795
|
-
|
|
1796
|
-
|
|
1770
|
+
const sdItem = this.items[currIndex];
|
|
1771
|
+
if (sdItem) {
|
|
1772
|
+
if (this.disabled || this.items.every((item) => item.disabled === true)) {
|
|
1773
|
+
sdItem.focus();
|
|
1774
|
+
break;
|
|
1775
|
+
}
|
|
1776
|
+
if (!sdItem.disabled) {
|
|
1777
|
+
sdItem.click();
|
|
1778
|
+
sdItem.focus();
|
|
1779
|
+
this.index = currIndex;
|
|
1780
|
+
break;
|
|
1781
|
+
}
|
|
1797
1782
|
}
|
|
1798
1783
|
}
|
|
1799
1784
|
}
|
|
@@ -1836,7 +1821,7 @@ class AuroRadioGroup extends LitElement {
|
|
|
1836
1821
|
};
|
|
1837
1822
|
|
|
1838
1823
|
return html$1`
|
|
1839
|
-
<fieldset class="${classMap(groupClasses)}" part="radio-group">
|
|
1824
|
+
<fieldset class="${classMap(groupClasses)}" part="radio-group" role="radiogroup">
|
|
1840
1825
|
<legend>
|
|
1841
1826
|
<slot name="legend"></slot>
|
|
1842
1827
|
${this.required ? undefined : html$1`<slot name="optionalLabel"> (optional)</slot>`}
|
package/package.json
CHANGED