@aurodesignsystem-dev/auro-formkit 0.0.0-pr699.0 → 0.0.0-pr700.0
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 +2 -2
- package/components/checkbox/demo/index.min.js +2 -2
- package/components/checkbox/dist/index.js +2 -2
- package/components/checkbox/dist/registered.js +2 -2
- package/components/combobox/demo/api.min.js +30 -13
- package/components/combobox/demo/index.min.js +30 -13
- package/components/combobox/dist/index.js +30 -13
- package/components/combobox/dist/registered.js +30 -13
- package/components/datepicker/demo/api.md +9 -1
- package/components/datepicker/demo/api.min.js +680 -381
- package/components/datepicker/demo/index.md +68 -6
- package/components/datepicker/demo/index.min.js +680 -381
- package/components/datepicker/dist/auro-datepicker.d.ts +50 -11
- package/components/datepicker/dist/buttonVersion.d.ts +1 -1
- package/components/datepicker/dist/index.js +516 -217
- package/components/datepicker/dist/popoverVersion.d.ts +1 -1
- package/components/datepicker/dist/registered.js +516 -217
- package/components/datepicker/dist/styles/snowflake/style-css.d.ts +2 -0
- package/components/input/demo/api.md +1 -0
- package/components/input/demo/api.min.js +30 -13
- package/components/input/demo/index.min.js +30 -13
- package/components/input/dist/auro-input.d.ts +174 -0
- package/components/input/dist/index.js +30 -13
- package/components/input/dist/registered.js +30 -13
- package/package.json +1 -1
- /package/components/datepicker/dist/styles/{emphasized/style-css.d.ts → snowflake/color-css.d.ts} +0 -0
|
@@ -51,9 +51,9 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = cl
|
|
|
51
51
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
52
52
|
*/const o$1=o=>o??E;
|
|
53
53
|
|
|
54
|
-
var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;--cbxLocation: var(--ds-size-50, 0.25rem)}fieldset{all:unset}@media screen and (min-width: 576px){.displayFlex slot{display:flex}}.cbxContainer{position:relative;padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbx--input:disabled+label:hover{cursor:auto}.label{margin-left:var(--ds-size-300, 1.5rem);display:block}.label:hover{cursor:pointer}.inputContainer{position:relative}.inputContainer:after{-webkit-tap-highlight-color:transparent;display:block;content:"";align-items:center;justify-content:center;top:var(--
|
|
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;padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbx--input:disabled+label:hover{cursor:auto}.label{margin-left:var(--ds-size-300, 1.5rem);display:block}.label:hover{cursor:pointer}.inputContainer{position:relative}.inputContainer:after{-webkit-tap-highlight-color:transparent;display:block;content:"";align-items:center;justify-content:center;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]) .
|
|
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)}`;
|
|
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
|
|
|
@@ -43,9 +43,9 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = cl
|
|
|
43
43
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
44
44
|
*/const o$1=o=>o??E;
|
|
45
45
|
|
|
46
|
-
var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;--cbxLocation: var(--ds-size-50, 0.25rem)}fieldset{all:unset}@media screen and (min-width: 576px){.displayFlex slot{display:flex}}.cbxContainer{position:relative;padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbx--input:disabled+label:hover{cursor:auto}.label{margin-left:var(--ds-size-300, 1.5rem);display:block}.label:hover{cursor:pointer}.inputContainer{position:relative}.inputContainer:after{-webkit-tap-highlight-color:transparent;display:block;content:"";align-items:center;justify-content:center;top:var(--
|
|
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;padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbx--input:disabled+label:hover{cursor:auto}.label{margin-left:var(--ds-size-300, 1.5rem);display:block}.label:hover{cursor:pointer}.inputContainer{position:relative}.inputContainer:after{-webkit-tap-highlight-color:transparent;display:block;content:"";align-items:center;justify-content:center;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]) .
|
|
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)}`;
|
|
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
|
|
|
@@ -3,9 +3,9 @@ import { classMap } from 'lit/directives/class-map.js';
|
|
|
3
3
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
4
4
|
import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
|
|
5
5
|
|
|
6
|
-
var styleCss$2 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;--cbxLocation: var(--ds-size-50, 0.25rem)}fieldset{all:unset}@media screen and (min-width: 576px){.displayFlex slot{display:flex}}.cbxContainer{position:relative;padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbx--input:disabled+label:hover{cursor:auto}.label{margin-left:var(--ds-size-300, 1.5rem);display:block}.label:hover{cursor:pointer}.inputContainer{position:relative}.inputContainer:after{-webkit-tap-highlight-color:transparent;display:block;content:"";align-items:center;justify-content:center;top:var(--
|
|
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;padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbx--input:disabled+label:hover{cursor:auto}.label{margin-left:var(--ds-size-300, 1.5rem);display:block}.label:hover{cursor:pointer}.inputContainer{position:relative}.inputContainer:after{-webkit-tap-highlight-color:transparent;display:block;content:"";align-items:center;justify-content:center;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]) .
|
|
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)}`;
|
|
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
|
|
|
@@ -3,9 +3,9 @@ import { classMap } from 'lit/directives/class-map.js';
|
|
|
3
3
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
4
4
|
import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
|
|
5
5
|
|
|
6
|
-
var styleCss$2 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;--cbxLocation: var(--ds-size-50, 0.25rem)}fieldset{all:unset}@media screen and (min-width: 576px){.displayFlex slot{display:flex}}.cbxContainer{position:relative;padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbx--input:disabled+label:hover{cursor:auto}.label{margin-left:var(--ds-size-300, 1.5rem);display:block}.label:hover{cursor:pointer}.inputContainer{position:relative}.inputContainer:after{-webkit-tap-highlight-color:transparent;display:block;content:"";align-items:center;justify-content:center;top:var(--
|
|
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;padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbx--input:disabled+label:hover{cursor:auto}.label{margin-left:var(--ds-size-300, 1.5rem);display:block}.label:hover{cursor:pointer}.inputContainer{position:relative}.inputContainer:after{-webkit-tap-highlight-color:transparent;display:block;content:"";align-items:center;justify-content:center;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]) .
|
|
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)}`;
|
|
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
|
|
|
@@ -11060,22 +11060,17 @@ class BaseInput extends AuroElement$2$1 {
|
|
|
11060
11060
|
* @returns {void}
|
|
11061
11061
|
*/
|
|
11062
11062
|
getPlaceholder() {
|
|
11063
|
-
|
|
11063
|
+
this.inputElement === this.getActiveElement();
|
|
11064
11064
|
|
|
11065
11065
|
// console.warn('isFocused', isFocused);
|
|
11066
11066
|
// console.warn(this.inputElement);
|
|
11067
11067
|
// console.warn(this.getActiveElement());
|
|
11068
11068
|
|
|
11069
|
-
if (!isFocused) {
|
|
11070
|
-
|
|
11071
|
-
|
|
11072
|
-
|
|
11073
|
-
|
|
11074
|
-
this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
11075
|
-
// return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
11076
|
-
}
|
|
11077
|
-
} else {
|
|
11078
|
-
this.placeholderStr = '';
|
|
11069
|
+
// if (!isFocused) {
|
|
11070
|
+
if (this.placeholder) {
|
|
11071
|
+
this.placeholderStr = this.placeholder;
|
|
11072
|
+
} else if (this.type === 'date') {
|
|
11073
|
+
this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
11079
11074
|
}
|
|
11080
11075
|
|
|
11081
11076
|
this.requestUpdate();
|
|
@@ -12968,6 +12963,20 @@ class AuroInput extends BaseInput {
|
|
|
12968
12963
|
this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$2, AuroIcon$2);
|
|
12969
12964
|
}
|
|
12970
12965
|
|
|
12966
|
+
static get properties() {
|
|
12967
|
+
return {
|
|
12968
|
+
...super.properties,
|
|
12969
|
+
|
|
12970
|
+
/**
|
|
12971
|
+
* @type {boolean}
|
|
12972
|
+
*/
|
|
12973
|
+
hideInputVisually: {
|
|
12974
|
+
type: Boolean,
|
|
12975
|
+
reflect: true,
|
|
12976
|
+
}
|
|
12977
|
+
};
|
|
12978
|
+
}
|
|
12979
|
+
|
|
12971
12980
|
static get styles() {
|
|
12972
12981
|
return [
|
|
12973
12982
|
i$5`${classicStyleCss}`,
|
|
@@ -13002,8 +13011,13 @@ class AuroInput extends BaseInput {
|
|
|
13002
13011
|
* @returns {object} - Returns classmap.
|
|
13003
13012
|
*/
|
|
13004
13013
|
get commonInputClasses() {
|
|
13014
|
+
console.log(`hideInputVisually: ${JSON.stringify(this.hideInputVisually)}`);
|
|
13005
13015
|
return {
|
|
13006
|
-
'util_displayHiddenVisually': this.
|
|
13016
|
+
'util_displayHiddenVisually': this.hideInputVisually !== undefined
|
|
13017
|
+
? this.hideInputVisually
|
|
13018
|
+
// eslint-disable-next-line no-warning-comments
|
|
13019
|
+
// TODO: refactor this to use a less brittle/forced solution.
|
|
13020
|
+
: this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
13007
13021
|
};
|
|
13008
13022
|
}
|
|
13009
13023
|
|
|
@@ -13015,7 +13029,10 @@ class AuroInput extends BaseInput {
|
|
|
13015
13029
|
get legacyInputClasses() {
|
|
13016
13030
|
return {
|
|
13017
13031
|
...this.commonInputClasses,
|
|
13018
|
-
'util_displayHiddenVisually':
|
|
13032
|
+
'util_displayHiddenVisually':
|
|
13033
|
+
this.hideInputVisually !== undefined
|
|
13034
|
+
? this.hideInputVisually
|
|
13035
|
+
: !this.hasFocus && !this.value
|
|
13019
13036
|
};
|
|
13020
13037
|
}
|
|
13021
13038
|
|
|
@@ -10918,22 +10918,17 @@ class BaseInput extends AuroElement$2$1 {
|
|
|
10918
10918
|
* @returns {void}
|
|
10919
10919
|
*/
|
|
10920
10920
|
getPlaceholder() {
|
|
10921
|
-
|
|
10921
|
+
this.inputElement === this.getActiveElement();
|
|
10922
10922
|
|
|
10923
10923
|
// console.warn('isFocused', isFocused);
|
|
10924
10924
|
// console.warn(this.inputElement);
|
|
10925
10925
|
// console.warn(this.getActiveElement());
|
|
10926
10926
|
|
|
10927
|
-
if (!isFocused) {
|
|
10928
|
-
|
|
10929
|
-
|
|
10930
|
-
|
|
10931
|
-
|
|
10932
|
-
this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
10933
|
-
// return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
10934
|
-
}
|
|
10935
|
-
} else {
|
|
10936
|
-
this.placeholderStr = '';
|
|
10927
|
+
// if (!isFocused) {
|
|
10928
|
+
if (this.placeholder) {
|
|
10929
|
+
this.placeholderStr = this.placeholder;
|
|
10930
|
+
} else if (this.type === 'date') {
|
|
10931
|
+
this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
10937
10932
|
}
|
|
10938
10933
|
|
|
10939
10934
|
this.requestUpdate();
|
|
@@ -12826,6 +12821,20 @@ class AuroInput extends BaseInput {
|
|
|
12826
12821
|
this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$2, AuroIcon$2);
|
|
12827
12822
|
}
|
|
12828
12823
|
|
|
12824
|
+
static get properties() {
|
|
12825
|
+
return {
|
|
12826
|
+
...super.properties,
|
|
12827
|
+
|
|
12828
|
+
/**
|
|
12829
|
+
* @type {boolean}
|
|
12830
|
+
*/
|
|
12831
|
+
hideInputVisually: {
|
|
12832
|
+
type: Boolean,
|
|
12833
|
+
reflect: true,
|
|
12834
|
+
}
|
|
12835
|
+
};
|
|
12836
|
+
}
|
|
12837
|
+
|
|
12829
12838
|
static get styles() {
|
|
12830
12839
|
return [
|
|
12831
12840
|
i$5`${classicStyleCss}`,
|
|
@@ -12860,8 +12869,13 @@ class AuroInput extends BaseInput {
|
|
|
12860
12869
|
* @returns {object} - Returns classmap.
|
|
12861
12870
|
*/
|
|
12862
12871
|
get commonInputClasses() {
|
|
12872
|
+
console.log(`hideInputVisually: ${JSON.stringify(this.hideInputVisually)}`);
|
|
12863
12873
|
return {
|
|
12864
|
-
'util_displayHiddenVisually': this.
|
|
12874
|
+
'util_displayHiddenVisually': this.hideInputVisually !== undefined
|
|
12875
|
+
? this.hideInputVisually
|
|
12876
|
+
// eslint-disable-next-line no-warning-comments
|
|
12877
|
+
// TODO: refactor this to use a less brittle/forced solution.
|
|
12878
|
+
: this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
12865
12879
|
};
|
|
12866
12880
|
}
|
|
12867
12881
|
|
|
@@ -12873,7 +12887,10 @@ class AuroInput extends BaseInput {
|
|
|
12873
12887
|
get legacyInputClasses() {
|
|
12874
12888
|
return {
|
|
12875
12889
|
...this.commonInputClasses,
|
|
12876
|
-
'util_displayHiddenVisually':
|
|
12890
|
+
'util_displayHiddenVisually':
|
|
12891
|
+
this.hideInputVisually !== undefined
|
|
12892
|
+
? this.hideInputVisually
|
|
12893
|
+
: !this.hasFocus && !this.value
|
|
12877
12894
|
};
|
|
12878
12895
|
}
|
|
12879
12896
|
|
|
@@ -10836,22 +10836,17 @@ class BaseInput extends AuroElement$2$1 {
|
|
|
10836
10836
|
* @returns {void}
|
|
10837
10837
|
*/
|
|
10838
10838
|
getPlaceholder() {
|
|
10839
|
-
|
|
10839
|
+
this.inputElement === this.getActiveElement();
|
|
10840
10840
|
|
|
10841
10841
|
// console.warn('isFocused', isFocused);
|
|
10842
10842
|
// console.warn(this.inputElement);
|
|
10843
10843
|
// console.warn(this.getActiveElement());
|
|
10844
10844
|
|
|
10845
|
-
if (!isFocused) {
|
|
10846
|
-
|
|
10847
|
-
|
|
10848
|
-
|
|
10849
|
-
|
|
10850
|
-
this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
10851
|
-
// return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
10852
|
-
}
|
|
10853
|
-
} else {
|
|
10854
|
-
this.placeholderStr = '';
|
|
10845
|
+
// if (!isFocused) {
|
|
10846
|
+
if (this.placeholder) {
|
|
10847
|
+
this.placeholderStr = this.placeholder;
|
|
10848
|
+
} else if (this.type === 'date') {
|
|
10849
|
+
this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
10855
10850
|
}
|
|
10856
10851
|
|
|
10857
10852
|
this.requestUpdate();
|
|
@@ -12744,6 +12739,20 @@ class AuroInput extends BaseInput {
|
|
|
12744
12739
|
this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$1, AuroIcon$1);
|
|
12745
12740
|
}
|
|
12746
12741
|
|
|
12742
|
+
static get properties() {
|
|
12743
|
+
return {
|
|
12744
|
+
...super.properties,
|
|
12745
|
+
|
|
12746
|
+
/**
|
|
12747
|
+
* @type {boolean}
|
|
12748
|
+
*/
|
|
12749
|
+
hideInputVisually: {
|
|
12750
|
+
type: Boolean,
|
|
12751
|
+
reflect: true,
|
|
12752
|
+
}
|
|
12753
|
+
};
|
|
12754
|
+
}
|
|
12755
|
+
|
|
12747
12756
|
static get styles() {
|
|
12748
12757
|
return [
|
|
12749
12758
|
css`${classicStyleCss}`,
|
|
@@ -12778,8 +12787,13 @@ class AuroInput extends BaseInput {
|
|
|
12778
12787
|
* @returns {object} - Returns classmap.
|
|
12779
12788
|
*/
|
|
12780
12789
|
get commonInputClasses() {
|
|
12790
|
+
console.log(`hideInputVisually: ${JSON.stringify(this.hideInputVisually)}`);
|
|
12781
12791
|
return {
|
|
12782
|
-
'util_displayHiddenVisually': this.
|
|
12792
|
+
'util_displayHiddenVisually': this.hideInputVisually !== undefined
|
|
12793
|
+
? this.hideInputVisually
|
|
12794
|
+
// eslint-disable-next-line no-warning-comments
|
|
12795
|
+
// TODO: refactor this to use a less brittle/forced solution.
|
|
12796
|
+
: this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
12783
12797
|
};
|
|
12784
12798
|
}
|
|
12785
12799
|
|
|
@@ -12791,7 +12805,10 @@ class AuroInput extends BaseInput {
|
|
|
12791
12805
|
get legacyInputClasses() {
|
|
12792
12806
|
return {
|
|
12793
12807
|
...this.commonInputClasses,
|
|
12794
|
-
'util_displayHiddenVisually':
|
|
12808
|
+
'util_displayHiddenVisually':
|
|
12809
|
+
this.hideInputVisually !== undefined
|
|
12810
|
+
? this.hideInputVisually
|
|
12811
|
+
: !this.hasFocus && !this.value
|
|
12795
12812
|
};
|
|
12796
12813
|
}
|
|
12797
12814
|
|
|
@@ -10836,22 +10836,17 @@ class BaseInput extends AuroElement$2$1 {
|
|
|
10836
10836
|
* @returns {void}
|
|
10837
10837
|
*/
|
|
10838
10838
|
getPlaceholder() {
|
|
10839
|
-
|
|
10839
|
+
this.inputElement === this.getActiveElement();
|
|
10840
10840
|
|
|
10841
10841
|
// console.warn('isFocused', isFocused);
|
|
10842
10842
|
// console.warn(this.inputElement);
|
|
10843
10843
|
// console.warn(this.getActiveElement());
|
|
10844
10844
|
|
|
10845
|
-
if (!isFocused) {
|
|
10846
|
-
|
|
10847
|
-
|
|
10848
|
-
|
|
10849
|
-
|
|
10850
|
-
this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
10851
|
-
// return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
10852
|
-
}
|
|
10853
|
-
} else {
|
|
10854
|
-
this.placeholderStr = '';
|
|
10845
|
+
// if (!isFocused) {
|
|
10846
|
+
if (this.placeholder) {
|
|
10847
|
+
this.placeholderStr = this.placeholder;
|
|
10848
|
+
} else if (this.type === 'date') {
|
|
10849
|
+
this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
10855
10850
|
}
|
|
10856
10851
|
|
|
10857
10852
|
this.requestUpdate();
|
|
@@ -12744,6 +12739,20 @@ class AuroInput extends BaseInput {
|
|
|
12744
12739
|
this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$1, AuroIcon$1);
|
|
12745
12740
|
}
|
|
12746
12741
|
|
|
12742
|
+
static get properties() {
|
|
12743
|
+
return {
|
|
12744
|
+
...super.properties,
|
|
12745
|
+
|
|
12746
|
+
/**
|
|
12747
|
+
* @type {boolean}
|
|
12748
|
+
*/
|
|
12749
|
+
hideInputVisually: {
|
|
12750
|
+
type: Boolean,
|
|
12751
|
+
reflect: true,
|
|
12752
|
+
}
|
|
12753
|
+
};
|
|
12754
|
+
}
|
|
12755
|
+
|
|
12747
12756
|
static get styles() {
|
|
12748
12757
|
return [
|
|
12749
12758
|
css`${classicStyleCss}`,
|
|
@@ -12778,8 +12787,13 @@ class AuroInput extends BaseInput {
|
|
|
12778
12787
|
* @returns {object} - Returns classmap.
|
|
12779
12788
|
*/
|
|
12780
12789
|
get commonInputClasses() {
|
|
12790
|
+
console.log(`hideInputVisually: ${JSON.stringify(this.hideInputVisually)}`);
|
|
12781
12791
|
return {
|
|
12782
|
-
'util_displayHiddenVisually': this.
|
|
12792
|
+
'util_displayHiddenVisually': this.hideInputVisually !== undefined
|
|
12793
|
+
? this.hideInputVisually
|
|
12794
|
+
// eslint-disable-next-line no-warning-comments
|
|
12795
|
+
// TODO: refactor this to use a less brittle/forced solution.
|
|
12796
|
+
: this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
12783
12797
|
};
|
|
12784
12798
|
}
|
|
12785
12799
|
|
|
@@ -12791,7 +12805,10 @@ class AuroInput extends BaseInput {
|
|
|
12791
12805
|
get legacyInputClasses() {
|
|
12792
12806
|
return {
|
|
12793
12807
|
...this.commonInputClasses,
|
|
12794
|
-
'util_displayHiddenVisually':
|
|
12808
|
+
'util_displayHiddenVisually':
|
|
12809
|
+
this.hideInputVisually !== undefined
|
|
12810
|
+
? this.hideInputVisually
|
|
12811
|
+
: !this.hasFocus && !this.value
|
|
12795
12812
|
};
|
|
12796
12813
|
}
|
|
12797
12814
|
|
|
@@ -16,6 +16,8 @@
|
|
|
16
16
|
| [error](#error) | `error` | | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
|
|
17
17
|
| [format](#format) | `format` | | `string` | "mm/dd/yyyy" | Specifies the date format. The default is `mm/dd/yyyy`. |
|
|
18
18
|
| [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | | `string` | "sm" | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
|
|
19
|
+
| [hasError](#hasError) | | readonly | `boolean` | | |
|
|
20
|
+
| [hasFocus](#hasFocus) | `hasFocus` | | `boolean` | | |
|
|
19
21
|
| [inputmode](#inputmode) | `inputmode` | | `string` | | Exposes inputmode attribute for input. |
|
|
20
22
|
| [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | | `boolean` | false | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
|
|
21
23
|
| [layout](#layout) | | | `string` | "classic" | |
|
|
@@ -26,6 +28,8 @@
|
|
|
26
28
|
| [noValidate](#noValidate) | `noValidate` | | `boolean` | false | If set, disables auto-validation on blur. |
|
|
27
29
|
| [offset](#offset) | `offset` | | `number` | "0" | Gap between the trigger element and bib. |
|
|
28
30
|
| [onDark](#onDark) | `onDark` | | `boolean` | false | If declared, onDark styles will be applied to the trigger. |
|
|
31
|
+
| [placeholder](#placeholder) | `placeholder` | | `string` | | Placeholder text to display in the input(s) when no value is set. |
|
|
32
|
+
| [placeholderEndDate](#placeholderEndDate) | `placeholderEndDate` | | `string` | | Optional placeholder text to display in the second input when using date range.<br />By default, datepicker will use `placeholder` for both inputs if placeholder is<br />specified, but placeholderendDate is not. |
|
|
29
33
|
| [placement](#placement) | `placement` | | `string` | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
|
|
30
34
|
| [range](#range) | `range` | | `boolean` | false | If set, turns on date range functionality in auro-calendar. |
|
|
31
35
|
| [required](#required) | `required` | | `boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. |
|
|
@@ -49,11 +53,15 @@
|
|
|
49
53
|
| [focus](#focus) | `(focusInput: string): void` | Focuses the datepicker trigger input.<br /><br />**focusInput**: Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input. |
|
|
50
54
|
| [renderHtmlActionClear](#renderHtmlActionClear) | `(): TemplateResult` | |
|
|
51
55
|
| [renderHtmlIconCalendar](#renderHtmlIconCalendar) | `(): TemplateResult` | |
|
|
56
|
+
| [renderHtmlIconError](#renderHtmlIconError) | `(): TemplateResult` | |
|
|
57
|
+
| [renderHtmlInputs](#renderHtmlInputs) | `(): TemplateResult` | |
|
|
52
58
|
| [renderLayoutFromAttributes](#renderLayoutFromAttributes) | `(): TemplateResult` | |
|
|
53
|
-
| [renderTempInputs](#renderTempInputs) | `(): TemplateResult` | |
|
|
54
59
|
| [reset](#reset) | `(): void` | Resets component to initial state. |
|
|
55
60
|
| [resetLayoutClasses](#resetLayoutClasses) | `(): void` | |
|
|
56
61
|
| [resetShapeClasses](#resetShapeClasses) | `(): void` | |
|
|
62
|
+
| [resetValues](#resetValues) | `(): void` | Resets values without resetting validation. |
|
|
63
|
+
| [setHasFocus](#setHasFocus) | `(): void` | |
|
|
64
|
+
| [setHasValue](#setHasValue) | `(): void` | |
|
|
57
65
|
| [updateComponentArchitecture](#updateComponentArchitecture) | `(): void` | |
|
|
58
66
|
| [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
|
|
59
67
|
|