@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.10 → 0.0.0-pr624.100
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/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
- package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
- package/components/bibtemplate/dist/headerVersion.d.ts +1 -1
- package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
- package/components/bibtemplate/dist/index.js +1242 -94
- package/components/bibtemplate/dist/registered.js +1242 -94
- package/components/checkbox/README.md +1 -1
- package/components/checkbox/demo/api.html +16 -10
- package/components/checkbox/demo/api.md +54 -19
- package/components/checkbox/demo/api.min.js +71 -46
- package/components/checkbox/demo/index.html +16 -10
- package/components/checkbox/demo/index.md +2 -2
- package/components/checkbox/demo/index.min.js +71 -46
- package/components/checkbox/demo/readme.html +16 -9
- package/components/checkbox/demo/readme.md +1 -1
- package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
- package/components/checkbox/dist/auro-checkbox.d.ts +6 -3
- package/components/checkbox/dist/index.js +70 -45
- package/components/checkbox/dist/registered.js +70 -45
- package/components/combobox/README.md +2 -0
- package/components/combobox/demo/api.html +16 -10
- package/components/combobox/demo/api.md +121 -8
- package/components/combobox/demo/api.min.js +3314 -1013
- package/components/combobox/demo/index.html +16 -10
- package/components/combobox/demo/index.md +20 -34
- package/components/combobox/demo/index.min.js +3314 -1013
- package/components/combobox/demo/readme.html +16 -9
- package/components/combobox/demo/readme.md +2 -0
- package/components/combobox/dist/auro-combobox.d.ts +59 -14
- package/components/combobox/dist/index.js +3008 -850
- package/components/combobox/dist/registered.js +3008 -850
- package/components/counter/demo/api.html +17 -10
- package/components/counter/demo/api.md +167 -21
- package/components/counter/demo/api.min.js +3419 -773
- package/components/counter/demo/index.html +17 -10
- package/components/counter/demo/index.md +191 -34
- package/components/counter/demo/index.min.js +3419 -773
- package/components/counter/demo/readme.html +16 -9
- package/components/counter/dist/auro-counter-button.d.ts +2 -0
- package/components/counter/dist/auro-counter-group.d.ts +162 -11
- package/components/counter/dist/auro-counter.d.ts +16 -0
- package/components/counter/dist/helptextVersion.d.ts +2 -0
- package/components/counter/dist/iconVersion.d.ts +1 -1
- package/components/counter/dist/index.js +3419 -773
- package/components/counter/dist/registered.js +3419 -773
- package/components/datepicker/README.md +2 -1
- package/components/datepicker/demo/api.html +16 -10
- package/components/datepicker/demo/api.md +70 -28
- package/components/datepicker/demo/api.min.js +11970 -8081
- package/components/datepicker/demo/index.html +16 -10
- package/components/datepicker/demo/index.md +87 -8
- package/components/datepicker/demo/index.min.js +11970 -8081
- package/components/datepicker/demo/readme.html +16 -9
- package/components/datepicker/demo/readme.md +2 -1
- package/components/datepicker/dist/auro-datepicker.d.ts +152 -12
- package/components/datepicker/dist/buttonVersion.d.ts +1 -1
- package/components/datepicker/dist/iconVersion.d.ts +2 -0
- package/components/datepicker/dist/index.js +14577 -10688
- package/components/datepicker/dist/popoverVersion.d.ts +1 -1
- package/components/datepicker/dist/registered.js +14577 -10688
- package/components/dropdown/demo/api.html +16 -10
- package/components/dropdown/demo/api.md +89 -281
- package/components/dropdown/demo/api.min.js +451 -271
- package/components/dropdown/demo/index.html +16 -10
- package/components/dropdown/demo/index.md +92 -362
- package/components/dropdown/demo/index.min.js +451 -271
- package/components/dropdown/demo/readme.html +16 -9
- package/components/dropdown/dist/auro-dropdown.d.ts +43 -82
- package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
- package/components/dropdown/dist/index.js +450 -270
- package/components/dropdown/dist/registered.js +450 -270
- package/components/form/demo/api.html +16 -9
- package/components/form/demo/api.md +1 -1
- package/components/form/demo/api.min.js +3 -3
- package/components/form/demo/autocomplete.html +19 -3
- package/components/form/demo/index.html +16 -9
- package/components/form/demo/index.min.js +3 -3
- package/components/form/demo/readme.html +16 -9
- package/components/form/demo/working.html +19 -13
- package/components/form/dist/auro-form.d.ts +1 -1
- package/components/form/dist/index.js +2 -2
- package/components/form/dist/registered.js +2 -2
- package/components/helptext/dist/auro-helptext.d.ts +0 -2
- package/components/helptext/dist/index.js +3 -5
- package/components/helptext/dist/registered.js +3 -5
- package/components/input/README.md +6 -2
- package/components/input/demo/api.html +16 -10
- package/components/input/demo/api.md +235 -135
- package/components/input/demo/api.min.js +1046 -301
- package/components/input/demo/index.html +16 -10
- package/components/input/demo/index.md +55 -32
- package/components/input/demo/index.min.js +1062 -317
- package/components/input/demo/readme.html +16 -9
- package/components/input/demo/readme.md +6 -2
- package/components/input/dist/auro-input.d.ts +26 -2
- package/components/input/dist/base-input.d.ts +47 -11
- package/components/input/dist/buttonVersion.d.ts +1 -1
- package/components/input/dist/iconVersion.d.ts +1 -1
- package/components/input/dist/index.js +1061 -316
- package/components/input/dist/registered.js +1061 -316
- package/components/layoutElement/dist/index.js +11 -8
- package/components/layoutElement/dist/registered.js +97 -0
- package/components/menu/demo/api.html +17 -10
- package/components/menu/demo/api.md +65 -8
- package/components/menu/demo/api.min.js +301 -63
- package/components/menu/demo/index.html +16 -10
- package/components/menu/demo/index.min.js +301 -63
- package/components/menu/demo/readme.html +16 -9
- package/components/menu/dist/auro-menu.d.ts +53 -7
- package/components/menu/dist/auro-menuoption.d.ts +21 -3
- package/components/menu/dist/iconVersion.d.ts +1 -1
- package/components/menu/dist/index.js +286 -48
- package/components/menu/dist/registered.js +286 -48
- package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
- package/components/radio/demo/api.html +16 -10
- package/components/radio/demo/api.md +41 -9
- package/components/radio/demo/api.min.js +95 -97
- package/components/radio/demo/index.html +16 -10
- package/components/radio/demo/index.min.js +95 -97
- package/components/radio/demo/readme.html +16 -9
- package/components/radio/dist/auro-radio-group.d.ts +1 -1
- package/components/radio/dist/auro-radio.d.ts +11 -12
- package/components/radio/dist/index.js +94 -96
- package/components/radio/dist/registered.js +94 -96
- package/components/select/README.md +1 -0
- package/components/select/demo/api.html +16 -10
- package/components/select/demo/api.js +0 -2
- package/components/select/demo/api.md +159 -125
- package/components/select/demo/api.min.js +2281 -730
- package/components/select/demo/index.html +17 -11
- package/components/select/demo/index.md +1074 -259
- package/components/select/demo/index.min.js +2283 -720
- package/components/select/demo/readme.html +16 -9
- package/components/select/demo/readme.md +1 -0
- package/components/select/dist/auro-select.d.ts +86 -25
- package/components/select/dist/index.js +2175 -755
- package/components/select/dist/registered.js +2175 -755
- package/package.json +31 -28
- /package/components/{datepicker/dist/styles/default/color-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
- /package/components/datepicker/dist/styles/{emphasized/style-css.d.ts → classic/color-css.d.ts} +0 -0
- /package/components/{input/dist/styles/default/input-css.d.ts → datepicker/dist/styles/classic/style-css.d.ts} +0 -0
- /package/components/{input/dist/styles/default/label-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
- /package/components/{input/dist/styles/input-css.d.ts → datepicker/dist/styles/snowflake/style-css.d.ts} +0 -0
- /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/style-css.d.ts} +0 -0
- /package/components/menu/dist/styles/{color-menuoption-css.d.ts → default/color-menu-css.d.ts} +0 -0
- /package/components/menu/dist/styles/{style-menu-css.d.ts → default/color-menuoption-css.d.ts} +0 -0
- /package/components/menu/dist/styles/{style-menuoption-css.d.ts → default/style-menu-css.d.ts} +0 -0
- /package/components/menu/dist/styles/{tokens-css.d.ts → default/style-menuoption-css.d.ts} +0 -0
|
@@ -4,25 +4,25 @@ import { repeat } from 'lit/directives/repeat.js';
|
|
|
4
4
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
5
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
6
6
|
|
|
7
|
-
var shapeSizeCss = css`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:
|
|
7
|
+
var shapeSizeCss = css`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:56px;max-height:56px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:58px;max-height:58px;background-color:unset;box-shadow:none}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:56px;max-height:56px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;box-shadow:unset;min-height:54px;max-height:54px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-box-lg{min-height:52px;max-height:52px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-box-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-box-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-box-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-box-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-box-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-box-sm{min-height:32px;max-height:32px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-box-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-box-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-box-xs{min-height:20px;max-height:20px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-box-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-box-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}`;
|
|
8
8
|
|
|
9
|
-
var styleCss$4 = css`.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}`;
|
|
9
|
+
var styleCss$4 = css`.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}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.63)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.88)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{display:block}.wrapper{cursor:text}.helpTextClasses{cursor:default}input{overflow:clip !important;width:100%;padding:0;border:0;background:unset;outline:none;overflow-clip-margin:0 !important;text-overflow:ellipsis}input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.displayValue{display:none}.displayValue.hasContent:is(.withValue):not(.hasFocus){display:flex;align-items:center}.accents:not(.util_displayHidden){display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}.notification{display:flex;align-items:center;justify-content:center}`;
|
|
10
10
|
|
|
11
|
-
var styleDefaultCss = css`.layoutDefault .typeIcon,:host(:not([layout])) .typeIcon{display:flex;flex-direction:row;align-items:center}.layoutDefault .typeIcon [auro-icon],:host(:not([layout])) .typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.layoutDefault .notificationIcons,:host(:not([layout])) .notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .typeIcon,:host(:not([layout])[bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .notificationIcons,:host(:not([layout])[bordered]) .notificationIcons{align-items:center}:host([class=layoutDefault][bordered]) .notification:not(:first-of-type),:host(:not([layout])[bordered]) .notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .alertNotification,:host(:not([layout])[bordered]) .alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}:host([class=layoutDefault][bordered]) .passwordBtn,:host(:not([layout])[bordered]) .passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}:host([class=layoutDefault][bordered]) .notificationBtn,:host(:not([layout])[bordered]) .notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon],:host(:not([layout])[bordered]) .notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon][hidden],:host(:not([layout])[bordered]) .notificationBtn [auro-icon][hidden]{display:none}:host([class=layoutDefault]:not([bordered])) .typeIcon,:host([class=layoutDefault]:not([bordered])) .notificationIcons,:host(:not([layout]):not([bordered])) .typeIcon,:host(:not([layout]):not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host([class=layoutDefault]:not([bordered])) .clearBtn,:host(:not([layout]):not([bordered])) .clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}.layoutDefault .wrapper:hover .clearBtn,.layoutDefault .wrapper:focus-within .clearBtn,:host(:not([layout])) .wrapper:hover .clearBtn,:host(:not([layout])) .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host([class=layoutDefault]:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification,:host(:not([layout]):focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.layoutDefault input,:host(:not([layout])) input{border:unset}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{position:relative;overflow:hidden;border-style:solid}:host([class=layoutDefault]:not([bordered],[borderless])) .wrapper,:host(:not([layout]):not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([class=layoutDefault][bordered]) .wrapper,:host(:not([layout])[bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host([class=layoutDefault]:not([borderless])) .wrapper:focus-within:before,:host(:not([layout]):not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([class=layoutDefault][validity]:not([validity=valid])) .wrapper:before,:host(:not([layout])[validity]:not([validity=valid])) .wrapper:before{border-bottom:0}
|
|
11
|
+
var styleDefaultCss = css`.layoutDefault .typeIcon,:host(:not([layout])) .typeIcon{display:flex;flex-direction:row;align-items:center}.layoutDefault .typeIcon [auro-icon],:host(:not([layout])) .typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.layoutDefault .notificationIcons,:host(:not([layout])) .notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .typeIcon,:host(:not([layout])[bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .notificationIcons,:host(:not([layout])[bordered]) .notificationIcons{align-items:center}:host([class=layoutDefault][bordered]) .notification:not(:first-of-type),:host(:not([layout])[bordered]) .notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .alertNotification,:host(:not([layout])[bordered]) .alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}:host([class=layoutDefault][bordered]) .passwordBtn,:host(:not([layout])[bordered]) .passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}:host([class=layoutDefault][bordered]) .notificationBtn,:host(:not([layout])[bordered]) .notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon],:host(:not([layout])[bordered]) .notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon][hidden],:host(:not([layout])[bordered]) .notificationBtn [auro-icon][hidden]{display:none}:host([class=layoutDefault]:not([bordered])) .typeIcon,:host([class=layoutDefault]:not([bordered])) .notificationIcons,:host(:not([layout]):not([bordered])) .typeIcon,:host(:not([layout]):not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host([class=layoutDefault]:not([bordered])) .clearBtn,:host(:not([layout]):not([bordered])) .clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}.layoutDefault .wrapper:hover .clearBtn,.layoutDefault .wrapper:focus-within .clearBtn,:host(:not([layout])) .wrapper:hover .clearBtn,:host(:not([layout])) .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host([class=layoutDefault]:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification,:host(:not([layout]):focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.layoutDefault input,:host(:not([layout])) input{border:unset}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{position:relative;overflow:hidden;border-style:solid}:host([class=layoutDefault]:not([bordered],[borderless])) .wrapper,:host(:not([layout]):not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([class=layoutDefault][bordered]) .wrapper,:host(:not([layout])[bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host([class=layoutDefault]:not([borderless])) .wrapper:focus-within:before,:host(:not([layout]):not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([class=layoutDefault][validity]:not([validity=valid])) .wrapper:before,:host(:not([layout])[validity]:not([validity=valid])) .wrapper:before{border-bottom:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.layoutDefault :host,:host(:not([layout])) :host{position:relative;display:block}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{display:flex;flex-direction:row}.layoutDefault .main,:host(:not([layout])) .main{display:flex;flex-direction:row;position:relative;flex:1}`;
|
|
12
12
|
|
|
13
|
-
var colorBaseCss = css`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-background-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}
|
|
13
|
+
var colorBaseCss = css`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-background-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}:host(:not([ondark])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([ondark])[disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]){--ds-auro-input-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
|
|
14
14
|
|
|
15
|
-
var tokensCss$4 = css`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse, #
|
|
15
|
+
var tokensCss$4 = css`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: transparent}`;
|
|
16
16
|
|
|
17
|
-
var classicStyleCss = css
|
|
17
|
+
var classicStyleCss = css`:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}:host([layout*=classic]) .mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;justify-content:center;cursor:text}:host([layout*=classic]) .mainContent label{overflow:hidden;cursor:text;padding-block:var(--ds-size-50, 0.25rem);text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host([layout*=classic]) .mainContent input{height:auto;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) label{justify-self:flex-start}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0}:host([layout*=classic]) .accents .typeIcon>*{margin-left:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.left{padding-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.right{padding-left:var(--ds-size-100, 0.5rem);margin-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]).withValue{justify-content:flex-start}:host([layout*=classic]):focus-within{justify-content:flex-start}`;
|
|
18
18
|
|
|
19
|
-
var classicColorCss = css`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-
|
|
19
|
+
var classicColorCss = css`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host(:not([ondark])) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-outline-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-outline-color: var(--ds-basic-color-border-inverse, #ffffff)}`;
|
|
20
20
|
|
|
21
|
-
var emphasizedStyleCss = css`:host
|
|
21
|
+
var emphasizedStyleCss = css`:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{margin-left:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{margin-right:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{margin-right:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}.layout-emphasized,.layout-emphasized-left,.layout-emphasized-right{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-emphasized label,.layout-emphasized-left label,.layout-emphasized-right label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.layout-emphasized input,.layout-emphasized-left input,.layout-emphasized-right input{text-align:center}.layout-emphasized .mainContent,.layout-emphasized-left .mainContent,.layout-emphasized-right .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;overflow:hidden}.layout-emphasized .displayValue,.layout-emphasized-left .displayValue,.layout-emphasized-right .displayValue{display:none;width:100%}.layout-emphasized .displayValue.hasContent:is(.withValue):not(.hasFocus),.layout-emphasized-left .displayValue.hasContent:is(.withValue):not(.hasFocus),.layout-emphasized-right .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-emphasized.withValue,.layout-emphasized-left.withValue,.layout-emphasized-right.withValue{justify-content:flex-start}.layout-emphasized.withValue label,.layout-emphasized-left.withValue label,.layout-emphasized-right.withValue label{display:block;width:100%;text-align:left}.layout-emphasized.withValue input,.layout-emphasized-left.withValue input,.layout-emphasized-right.withValue input{text-align:left;width:100%}.layout-emphasized:not(:focus-within):not(:is([validity]:not([validity=valid]))),.layout-emphasized-left:not(:focus-within):not(:is([validity]:not([validity=valid]))),.layout-emphasized-right:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-emphasized:focus-within,.layout-emphasized-left:focus-within,.layout-emphasized-right:focus-within{justify-content:flex-start}.layout-emphasized:focus-within label,.layout-emphasized-left:focus-within label,.layout-emphasized-right:focus-within label{display:block;width:100%;text-align:left}.layout-emphasized:focus-within input,.layout-emphasized-left:focus-within input,.layout-emphasized-right:focus-within input{text-align:left;width:100%}.layout-emphasized:focus-within .alertNotification,.layout-emphasized-left:focus-within .alertNotification,.layout-emphasized-right:focus-within .alertNotification{display:none}.layout-emphasized .accents.left,.layout-emphasized-left .accents.left,.layout-emphasized-right .accents.left{padding-left:var(--ds-size-300, 1.5rem)}.layout-emphasized .accents.right,.layout-emphasized-left .accents.right,.layout-emphasized-right .accents.right{padding-right:var(--ds-size-300, 1.5rem)}`;
|
|
22
22
|
|
|
23
23
|
var emphasizedColorCss = css`.layout-emphasized:focus-within,.layout-emphasized.withValue,.layout-emphasized-left:focus-within,.layout-emphasized-left.withValue,.layout-emphasized-right:focus-within,.layout-emphasized-right.withValue{--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}.layout-emphasized:focus-within,.layout-emphasized-left:focus-within,.layout-emphasized-right:focus-within{--auro-input-border-color: var(--ds-auro-input-border-color)}`;
|
|
24
24
|
|
|
25
|
-
var snowflakeStyleCss = css`:host([layout*=snowflake]) .leftIndent{margin-left:24px;width:calc(100% - 48px)}:host([layout*=snowflake]) .rightIndent{margin-right:24px;width:calc(100% - 48px)}.layout-snowflake{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-snowflake label{font-size:var(--ds-text-body-size-xs);line-height:20px}.layout-snowflake input{text-align:center;font-size:18px;line-height:26px}.layout-snowflake .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}.layout-snowflake .displayValue{position:absolute;top:0;right:0;bottom:0;left:0;display:none}.layout-snowflake .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-snowflake .displayValueWrapper{transform:translateY(-50%)}.layout-snowflake .accents{display:flex;flex-direction:row;justify-content:center;align-items:center}.layout-snowflake.withValue{justify-content:flex-start}.layout-snowflake:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-snowflake:focus-within{justify-content:flex-start}.layout-snowflake:focus-within .alertNotification{display:none}.layout-snowflake .accents{width:24px}.layout-snowflake .accents.left{padding-left:24px}.layout-snowflake .accents.right{padding-right:24px}.helpTextWrapper{text-align:center}`;
|
|
25
|
+
var snowflakeStyleCss = css`:root{--ds-advanced-color-button-flat-text: #676767;--ds-advanced-color-button-flat-text-disabled: #d0d0d0;--ds-advanced-color-button-flat-text-hover: #525252;--ds-advanced-color-button-flat-text-inverse: #ffffff;--ds-advanced-color-button-flat-text-inverse-disabled: #7e8894;--ds-advanced-color-button-flat-text-inverse-hover: #adadad;--ds-advanced-color-button-ghost-background-hover: rgba(0, 0, 0, 0.05);--ds-advanced-color-button-ghost-background-inverse-hover: rgba(255, 255, 255, 0.05);--ds-advanced-color-button-ghost-text: #01426a;--ds-advanced-color-button-ghost-text-disabled: #d0d0d0;--ds-advanced-color-button-ghost-text-inverse: #ffffff;--ds-advanced-color-button-ghost-text-inverse-disabled: #7e8894;--ds-advanced-color-button-primary-background: #01426a;--ds-advanced-color-button-primary-background-disabled: #acc9e2;--ds-advanced-color-button-primary-background-hover: #00274a;--ds-advanced-color-button-primary-background-inactive: #cfe0ef;--ds-advanced-color-button-primary-background-inactive-hover: #89b2d4;--ds-advanced-color-button-primary-background-inverse: #ffffff;--ds-advanced-color-button-primary-background-inverse-disabled: rgba(255, 255, 255, 0.75);--ds-advanced-color-button-primary-background-inverse-hover: #ebf3f9;--ds-advanced-color-button-primary-border: #01426a;--ds-advanced-color-button-primary-border-disabled: #acc9e2;--ds-advanced-color-button-primary-border-hover: #00274a;--ds-advanced-color-button-primary-border-inverse: #ffffff;--ds-advanced-color-button-primary-border-inverse-disabled: rgba(255, 255, 255, 0.75);--ds-advanced-color-button-primary-border-inverse-hover: #ebf3f9;--ds-advanced-color-button-primary-text: #ffffff;--ds-advanced-color-button-primary-text-disabled: #ffffff;--ds-advanced-color-button-primary-text-inverse: #01426a;--ds-advanced-color-button-secondary-background: #ffffff;--ds-advanced-color-button-secondary-background-disabled: #f7f7f7;--ds-advanced-color-button-secondary-background-hover: #f2f2f2;--ds-advanced-color-button-secondary-background-inverse-hover: rgba(255, 255, 255, 0.1);--ds-advanced-color-button-secondary-border: #01426a;--ds-advanced-color-button-secondary-border-hover: #00274a;--ds-advanced-color-button-secondary-border-disabled: #cfe0ef;--ds-advanced-color-button-secondary-border-inverse: #ffffff;--ds-advanced-color-button-secondary-border-inverse-disabled: #dddddd;--ds-advanced-color-button-secondary-text: #01426a;--ds-advanced-color-button-secondary-text-hover: #00274a;--ds-advanced-color-button-secondary-text-inverse: #ffffff;--ds-advanced-color-button-tertiary-background: rgba(0, 0, 0, 0.05);--ds-advanced-color-button-tertiary-background-hover: rgba(0, 0, 0, 0.1);--ds-advanced-color-button-tertiary-background-inverse: rgba(255, 255, 255, 0.05);--ds-advanced-color-button-tertiary-background-inverse-hover: rgba(255, 255, 255, 0.1);--ds-advanced-color-button-tertiary-text: #01426a;--ds-advanced-color-button-tertiary-text-hover: #00274a;--ds-advanced-color-button-tertiary-text-inverse: #ffffff;--ds-advanced-color-accents-accent1: #b2d583;--ds-advanced-color-accents-accent1-bold: #92c450;--ds-advanced-color-accents-accent1-muted: #deedca;--ds-advanced-color-accents-accent2: #fad362;--ds-advanced-color-accents-accent2-bold: #f2ba14;--ds-advanced-color-accents-accent2-muted: #fde398;--ds-advanced-color-accents-accent3: #63beff;--ds-advanced-color-accents-accent3-bold: #0074ca;--ds-advanced-color-accents-accent3-muted: #aedeff;--ds-advanced-color-accents-accent4: #feb17a;--ds-advanced-color-accents-accent4-bold: #fb7f24;--ds-advanced-color-accents-accent4-muted: #ffe2cf;--ds-advanced-color-accents-transparency: rgba(0, 0, 0, 0.1);--ds-advanced-color-accents-transparency-inverse: rgba(255, 255, 255, 0.2);--ds-advanced-color-avatar-gradient-bottom: #cfe0ef;--ds-advanced-color-avatar-gradient-top: #6899c6;--ds-advanced-color-boolean-disabled-inverse: #7e8894;--ds-advanced-color-boolean-error: #e31f26;--ds-advanced-color-boolean-error-hover: #b1161c;--ds-advanced-color-boolean-error-inverse: #f9a4a8;--ds-advanced-color-boolean-error-inverse-hover: #f15f65;--ds-advanced-color-boolean-indicator: #ffffff;--ds-advanced-color-boolean-indicator-inverse: #00274a;--ds-advanced-color-boolean-isfalse: #ffffff;--ds-advanced-color-boolean-isfalse-border: #585e67;--ds-advanced-color-boolean-isfalse-border-inverse: #ffffff;--ds-advanced-color-boolean-isfalse-hover: #f2f2f2;--ds-advanced-color-boolean-isfalse-inverse: rgba(255, 255, 255, 0.15);--ds-advanced-color-boolean-isfalse-inverse-hover: rgba(255, 255, 255, 0.2);--ds-advanced-color-boolean-istrue: #01426a;--ds-advanced-color-boolean-istrue-hover: #00274a;--ds-advanced-color-boolean-istrue-inverse: #ffffff;--ds-advanced-color-boolean-istrue-inverse-hover: rgba(255, 255, 255, 0.7);--ds-advanced-color-flightline-indicator: #00274a;--ds-advanced-color-flightline-line: #00274a;--ds-advanced-color-hyperlink-text: #2875b5;--ds-advanced-color-hyperlink-text-hover: #01426a;--ds-advanced-color-hyperlink-text-inverse: #ffffff;--ds-advanced-color-hyperlink-text-inverse-hover: #ebf3f9;--ds-advanced-color-shared-background: #ffffff;--ds-advanced-color-shared-background-inverse: rgba(255, 255, 255, 0.15);--ds-advanced-color-shared-background-inverse-disabled: rgba(255, 255, 255, 0.1);--ds-advanced-color-shared-background-inverse-hover: rgba(255, 255, 255, 0.2);--ds-advanced-color-shared-background-muted: #f7f7f7;--ds-advanced-color-shared-background-strong: #7e7e7e;--ds-advanced-color-shared-scrim: rgba(0, 0, 0, 0.5);--ds-advanced-color-shared-text-accent: #2875b5;--ds-advanced-color-skeleton-background: #f7f8fa;--ds-advanced-color-skeleton-wave: #e4e8ec;--ds-advanced-color-state-background-disabled: #dddddd;--ds-advanced-color-state-background-hover: #f2f2f2;--ds-advanced-color-state-background-inverse-disabled: #7e8894;--ds-advanced-color-state-error-inverse: #f9a4a8;--ds-advanced-color-state-focused: #01426a;--ds-advanced-color-state-focused-inverse: #ffffff;--ds-advanced-color-state-selected: #01426a;--ds-advanced-color-state-selected-hover: #00274a;--ds-basic-color-border-bold: #585e67;--ds-basic-color-border-brand: #00274a;--ds-basic-color-border-default: #959595;--ds-basic-color-border-divider: rgba(0, 0, 0, 0.15);--ds-basic-color-border-divider-inverse: rgba(255, 255, 255, 0.4);--ds-basic-color-border-inverse: #ffffff;--ds-basic-color-border-subtle: #dddddd;--ds-basic-color-brand-primary: #01426a;--ds-basic-color-brand-primary-bold: #00274a;--ds-basic-color-brand-primary-muted: #ebf3f9;--ds-basic-color-brand-primary-subtle: #2875b5;--ds-basic-color-brand-secondary: #5de3f7;--ds-basic-color-brand-secondary-bold: #18c3dd;--ds-basic-color-brand-secondary-muted: #ebfafd;--ds-basic-color-brand-secondary-subtle: #b4eff9;--ds-basic-color-brand-tertiary: #a3cd6a;--ds-basic-color-brand-tertiary-bold: #7daf3b;--ds-basic-color-brand-tertiary-muted: #eaf3dd;--ds-basic-color-brand-tertiary-subtle: #c9e1a7;--ds-basic-color-fare-basiceconomy: #97eaf8;--ds-basic-color-fare-business: #01426a;--ds-basic-color-fare-economy: #0074ca;--ds-basic-color-fare-first: #00274a;--ds-basic-color-fare-premiumeconomy: #005154;--ds-basic-color-page-background-default: #ebfafd;--ds-basic-color-page-background-utility: #ffffff;--ds-basic-color-status-default: #afb9c6;--ds-basic-color-status-error: #e31f26;--ds-basic-color-status-error-subtle: #fbc6c6;--ds-basic-color-status-info: #01426a;--ds-basic-color-status-info-subtle: #ebf3f9;--ds-basic-color-status-success: #447a1f;--ds-basic-color-status-success-subtle: #d6eac7;--ds-basic-color-status-warning: #fac200;--ds-basic-color-status-warning-subtle: #fff0b2;--ds-basic-color-surface-accent1: #5de3f7;--ds-basic-color-surface-accent1-muted: #ebfafd;--ds-basic-color-surface-accent1-subtle: #b4eff9;--ds-basic-color-surface-accent2: #a3cd6a;--ds-basic-color-surface-accent2-muted: #eaf3dd;--ds-basic-color-surface-default: #ffffff;--ds-basic-color-surface-inverse: #00274a;--ds-basic-color-surface-inverse-subtle: #2875b5;--ds-basic-color-surface-neutral-medium: #c5c5c5;--ds-basic-color-surface-neutral-subtle: #f7f7f7;--ds-basic-color-texticon-accent1: #265688;--ds-basic-color-texticon-default: #2a2a2a;--ds-basic-color-texticon-disabled: #d0d0d0;--ds-basic-color-texticon-inverse: #ffffff;--ds-basic-color-texticon-inverse-disabled: #7e8894;--ds-basic-color-texticon-inverse-muted: #ccd2db;--ds-basic-color-texticon-muted: #676767;--ds-basic-color-tier-program-loungetier-lounge: #01426a;--ds-basic-color-tier-program-loungetier-loungeplus: #53b390;--ds-basic-color-tier-program-loyaltytier-bronze: #d99f6d;--ds-basic-color-tier-program-loyaltytier-bronze-muted: #eed4be;--ds-basic-color-tier-program-loyaltytier-cobalt: #030772;--ds-basic-color-tier-program-loyaltytier-cobalt-muted: #a9b6d6;--ds-basic-color-tier-program-loyaltytier-copper: #cb7457;--ds-basic-color-tier-program-loyaltytier-copper-muted: #e7bfb1;--ds-basic-color-tier-program-loyaltytier-gold: #fbdc7a;--ds-basic-color-tier-program-loyaltytier-gold-muted: #fdefc4;--ds-basic-color-tier-program-loyaltytier-nickel: #abaab1;--ds-basic-color-tier-program-loyaltytier-nickel-muted: #e5e4e7;--ds-basic-color-tier-program-loyaltytier-platinum: #bcb8a4;--ds-basic-color-tier-program-loyaltytier-platinum-muted: #dad8cd;--ds-basic-color-tier-program-loyaltytier-silver: #e4e9ec;--ds-basic-color-tier-program-loyaltytier-silver-muted: #f9fafb;--ds-basic-color-tier-program-loyaltytier-titanium: #282828;--ds-basic-color-tier-program-loyaltytier-titanium-muted: #545454;--ds-basic-color-tier-program-oneworld-emerald: #139142;--ds-basic-color-tier-program-oneworld-ruby: #a41d4a;--ds-basic-color-tier-program-oneworld-sapphire: #015daa;--ds-basic-type-brand-family-primary: "AS Circular";--ds-basic-type-brand-family-secondary: "Good OT";--ds-basic-type-brand-line-height-primary: 1.3;--ds-basic-type-brand-line-height-secondary: 1;--ds-basic-type-brand-letter-spacing-primary: 0;--ds-basic-type-brand-letter-spacing-secondary: 0.05em;--ds-basic-type-brand-letter-spacing-tertiary: 0.10em;--ds-basic-type-family-accent: "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-body: "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-display: "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-heading: "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-letter-spacing-accent: 0.05em;--ds-basic-type-letter-spacing-accent2: 0.10em;--ds-basic-type-letter-spacing-body: 0;--ds-basic-type-letter-spacing-display: 0;--ds-basic-type-letter-spacing-heading: 0;--ds-basic-type-line-height-accent: 1.3;--ds-basic-type-line-height-accent2: 1;--ds-basic-type-line-height-body: 1.63;--ds-basic-type-line-height-body2: 1.5;--ds-basic-type-line-height-body3: 1.25;--ds-basic-type-line-height-body4: 1;--ds-basic-type-line-height-body5: 0.88;--ds-basic-type-line-height-display: 1.3;--ds-basic-type-line-height-heading: 1.3;--ds-basic-type-weight-accent: 450;--ds-basic-type-weight-accent2: 500;--ds-basic-type-weight-body: 450;--ds-basic-type-weight-display: 300;--ds-basic-type-weight-heading: 300;--ds-basic-type-weight-heading2: 450}:host([layout*=snowflake]) .leftIndent{margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .rightIndent{margin-right:var(--ds-size-300, 1.5rem)}.layout-snowflake{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-snowflake label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-block-start:var(--ds-size-50, 0.25rem)}.layout-snowflake input{text-align:center}.layout-snowflake .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;overflow:hidden}.layout-snowflake .displayValue{display:none;width:100%}.layout-snowflake .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-snowflake .displayValueWrapper{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}.layout-snowflake.withValue{justify-content:flex-start}.layout-snowflake:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-snowflake:focus-within{justify-content:flex-start}.layout-snowflake:focus-within .alertNotification{display:none}.layout-snowflake .accents{width:var(--ds-size-300, 1.5rem)}.layout-snowflake .accents.left{padding-left:var(--ds-size-300, 1.5rem)}.layout-snowflake .accents.right{padding-right:var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .helpTextWrapper{text-align:center}`;
|
|
26
26
|
|
|
27
27
|
const watchedItems = new Set();
|
|
28
28
|
|
|
@@ -85,6 +85,8 @@ const stringsES = {
|
|
|
85
85
|
'dateMM': 'Ingrese una fecha completa en el formato MM',
|
|
86
86
|
'dateDD': 'Ingrese una fecha completa en el formato DD',
|
|
87
87
|
'clearInput': 'Borrar campo de entrada',
|
|
88
|
+
'showPassword': 'Mostrar contraseña',
|
|
89
|
+
'hidePassword': 'Ocultar contraseña'
|
|
88
90
|
};
|
|
89
91
|
|
|
90
92
|
const stringsEN = {
|
|
@@ -109,6 +111,8 @@ const stringsEN = {
|
|
|
109
111
|
'dateMM': 'Please enter a complete date in the format MM',
|
|
110
112
|
'dateDD': 'Please enter a complete date in the format DD',
|
|
111
113
|
'clearInput': 'Clear input field',
|
|
114
|
+
'showPassword': 'Show password',
|
|
115
|
+
'hidePassword': 'Hide password'
|
|
112
116
|
};
|
|
113
117
|
|
|
114
118
|
/**
|
|
@@ -4403,7 +4407,7 @@ const {
|
|
|
4403
4407
|
|
|
4404
4408
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
4405
4409
|
|
|
4406
|
-
let AuroLibraryRuntimeUtils$
|
|
4410
|
+
let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
|
|
4407
4411
|
|
|
4408
4412
|
/* eslint-disable jsdoc/require-param */
|
|
4409
4413
|
|
|
@@ -4473,7 +4477,7 @@ let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
|
4473
4477
|
class AuroFormValidation {
|
|
4474
4478
|
|
|
4475
4479
|
constructor() {
|
|
4476
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
4480
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
|
|
4477
4481
|
}
|
|
4478
4482
|
|
|
4479
4483
|
/**
|
|
@@ -4533,19 +4537,19 @@ class AuroFormValidation {
|
|
|
4533
4537
|
{
|
|
4534
4538
|
check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
|
|
4535
4539
|
validity: 'tooShort',
|
|
4536
|
-
message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
|
|
4540
|
+
message: e => e.getAttribute('setCustomValidityTooShort') || e.setCustomValidity || ''
|
|
4537
4541
|
},
|
|
4538
4542
|
{
|
|
4539
4543
|
check: (e) => e.value?.length > e.maxLength,
|
|
4540
4544
|
validity: 'tooLong',
|
|
4541
|
-
message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
|
|
4545
|
+
message: e => e.getAttribute('setCustomValidityTooLong') || e.setCustomValidity || ''
|
|
4542
4546
|
}
|
|
4543
4547
|
],
|
|
4544
4548
|
pattern: [
|
|
4545
4549
|
{
|
|
4546
4550
|
check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
|
|
4547
4551
|
validity: 'patternMismatch',
|
|
4548
|
-
message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
|
|
4552
|
+
message: e => e.getAttribute('setCustomValidityPatternMismatch') || e.setCustomValidity || ''
|
|
4549
4553
|
}
|
|
4550
4554
|
]
|
|
4551
4555
|
},
|
|
@@ -4692,13 +4696,24 @@ class AuroFormValidation {
|
|
|
4692
4696
|
this.getInputElements(elem);
|
|
4693
4697
|
this.getAuroInputs(elem);
|
|
4694
4698
|
|
|
4695
|
-
//
|
|
4699
|
+
// Check if validation should run
|
|
4696
4700
|
let validationShouldRun =
|
|
4701
|
+
|
|
4702
|
+
// If the validation was forced
|
|
4697
4703
|
force ||
|
|
4698
|
-
|
|
4699
|
-
|
|
4700
|
-
|
|
4701
|
-
|
|
4704
|
+
|
|
4705
|
+
// If the validation should run on input
|
|
4706
|
+
elem.validateOnInput ||
|
|
4707
|
+
|
|
4708
|
+
// State-based checks
|
|
4709
|
+
(
|
|
4710
|
+
// Element is not currently focused
|
|
4711
|
+
!elem.contains(document.activeElement) && // native input is not focused directly
|
|
4712
|
+
!document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
|
|
4713
|
+
|
|
4714
|
+
// And element has been touched or is untouched but has a value
|
|
4715
|
+
( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
|
|
4716
|
+
);
|
|
4702
4717
|
|
|
4703
4718
|
if (elem.hasAttribute('error')) {
|
|
4704
4719
|
elem.validity = 'customError';
|
|
@@ -4740,10 +4755,10 @@ class AuroFormValidation {
|
|
|
4740
4755
|
if (!hasValue && elem.required && elem.touched) {
|
|
4741
4756
|
elem.validity = 'valueMissing';
|
|
4742
4757
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
4743
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
4758
|
+
} else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
4744
4759
|
this.validateType(elem);
|
|
4745
4760
|
this.validateElementAttributes(elem);
|
|
4746
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
4761
|
+
} else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
|
|
4747
4762
|
this.validateElementAttributes(elem);
|
|
4748
4763
|
}
|
|
4749
4764
|
}
|
|
@@ -4752,7 +4767,9 @@ class AuroFormValidation {
|
|
|
4752
4767
|
elem.validity = this.auroInputElements[0].validity;
|
|
4753
4768
|
elem.errorMessage = this.auroInputElements[0].errorMessage;
|
|
4754
4769
|
|
|
4755
|
-
|
|
4770
|
+
// combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib.
|
|
4771
|
+
// combobox's 2nd input will have noValidate set true.
|
|
4772
|
+
if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
|
|
4756
4773
|
elem.validity = this.auroInputElements[1].validity;
|
|
4757
4774
|
elem.errorMessage = this.auroInputElements[1].errorMessage;
|
|
4758
4775
|
}
|
|
@@ -4832,7 +4849,7 @@ class AuroFormValidation {
|
|
|
4832
4849
|
}
|
|
4833
4850
|
}
|
|
4834
4851
|
|
|
4835
|
-
let AuroElement$
|
|
4852
|
+
let AuroElement$2 = class AuroElement extends LitElement {
|
|
4836
4853
|
static get properties() {
|
|
4837
4854
|
return {
|
|
4838
4855
|
|
|
@@ -4867,19 +4884,22 @@ let AuroElement$1 = class AuroElement extends LitElement {
|
|
|
4867
4884
|
}
|
|
4868
4885
|
|
|
4869
4886
|
resetShapeClasses() {
|
|
4870
|
-
|
|
4871
|
-
const wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
4887
|
+
const wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
4872
4888
|
|
|
4873
|
-
|
|
4874
|
-
|
|
4875
|
-
|
|
4876
|
-
|
|
4877
|
-
|
|
4878
|
-
|
|
4889
|
+
if (wrapper) {
|
|
4890
|
+
wrapper.classList.forEach((className) => {
|
|
4891
|
+
if (className.startsWith('shape-')) {
|
|
4892
|
+
wrapper.classList.remove(className);
|
|
4893
|
+
}
|
|
4894
|
+
});
|
|
4879
4895
|
|
|
4896
|
+
if (this.shape && this.size) {
|
|
4880
4897
|
wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
|
|
4898
|
+
} else {
|
|
4899
|
+
wrapper.classList.add('shape-none');
|
|
4881
4900
|
}
|
|
4882
4901
|
}
|
|
4902
|
+
|
|
4883
4903
|
}
|
|
4884
4904
|
|
|
4885
4905
|
resetLayoutClasses() {
|
|
@@ -4934,19 +4954,27 @@ let AuroElement$1 = class AuroElement extends LitElement {
|
|
|
4934
4954
|
* @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
|
|
4935
4955
|
* @attr id
|
|
4936
4956
|
*
|
|
4937
|
-
* @slot
|
|
4957
|
+
* @slot ariaLabel.clear - Sets aria-label on clear button for screenreader to read
|
|
4958
|
+
* @slot ariaLabel.password.show - Sets aria-label on password button to toggle on showing password
|
|
4959
|
+
* @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
|
|
4960
|
+
* @slot helpText - Sets the help text displayed below the input.
|
|
4938
4961
|
* @slot label - Sets the label text for the input.
|
|
4962
|
+
* @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
|
|
4963
|
+
* @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
|
|
4939
4964
|
*
|
|
4940
4965
|
* @csspart wrapper - Use for customizing the style of the root element
|
|
4941
4966
|
* @csspart label - Use for customizing the style of the label element
|
|
4942
4967
|
* @csspart helpText - Use for customizing the style of the helpText element
|
|
4968
|
+
* @csspart input - Use for customizing the style of the input element
|
|
4943
4969
|
* @csspart accentIcon - Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon)
|
|
4944
4970
|
* @csspart iconContainer - Use for customizing the style of the iconContainer (e.g. X icon for clearing input value)
|
|
4971
|
+
* @csspart accent-left - Use for customizing the style of the left accent element (e.g. padding, margin)
|
|
4972
|
+
* @csspart accent-right - Use for customizing the style of the right accent element (e.g. padding, margin)
|
|
4945
4973
|
* @event input - Event fires when the value of an `auro-input` has been changed.
|
|
4946
4974
|
* @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed.
|
|
4947
4975
|
*/
|
|
4948
4976
|
|
|
4949
|
-
class BaseInput extends AuroElement$
|
|
4977
|
+
class BaseInput extends AuroElement$2 {
|
|
4950
4978
|
|
|
4951
4979
|
constructor() {
|
|
4952
4980
|
super();
|
|
@@ -4963,9 +4991,22 @@ class BaseInput extends AuroElement$1 {
|
|
|
4963
4991
|
this.required = false;
|
|
4964
4992
|
this.setCustomValidityForType = undefined;
|
|
4965
4993
|
|
|
4994
|
+
/**
|
|
4995
|
+
* @private
|
|
4996
|
+
*/
|
|
4966
4997
|
this.layout = 'classic';
|
|
4998
|
+
|
|
4999
|
+
/**
|
|
5000
|
+
* @private
|
|
5001
|
+
*/
|
|
4967
5002
|
this.shape = 'classic';
|
|
5003
|
+
|
|
5004
|
+
/**
|
|
5005
|
+
* @private
|
|
5006
|
+
*/
|
|
4968
5007
|
this.size = 'lg';
|
|
5008
|
+
|
|
5009
|
+
this.privateDefaults();
|
|
4969
5010
|
}
|
|
4970
5011
|
|
|
4971
5012
|
/**
|
|
@@ -5039,7 +5080,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5039
5080
|
*/
|
|
5040
5081
|
a11yRole: {
|
|
5041
5082
|
type: String,
|
|
5042
|
-
attribute: true,
|
|
5043
5083
|
reflect: true
|
|
5044
5084
|
},
|
|
5045
5085
|
|
|
@@ -5048,7 +5088,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5048
5088
|
*/
|
|
5049
5089
|
a11yExpanded: {
|
|
5050
5090
|
type: Boolean,
|
|
5051
|
-
attribute: true,
|
|
5052
5091
|
reflect: true
|
|
5053
5092
|
},
|
|
5054
5093
|
|
|
@@ -5057,7 +5096,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5057
5096
|
*/
|
|
5058
5097
|
a11yControls: {
|
|
5059
5098
|
type: String,
|
|
5060
|
-
attribute: true,
|
|
5061
5099
|
reflect: true
|
|
5062
5100
|
},
|
|
5063
5101
|
|
|
@@ -5073,7 +5111,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5073
5111
|
* An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters].
|
|
5074
5112
|
*/
|
|
5075
5113
|
autocapitalize: {
|
|
5076
|
-
type: String
|
|
5114
|
+
type: String,
|
|
5115
|
+
reflect: true
|
|
5077
5116
|
},
|
|
5078
5117
|
|
|
5079
5118
|
/**
|
|
@@ -5088,7 +5127,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5088
5127
|
* When set to `off`, stops iOS from auto-correcting words when typed into a text box.
|
|
5089
5128
|
*/
|
|
5090
5129
|
autocorrect: {
|
|
5091
|
-
type: String
|
|
5130
|
+
type: String,
|
|
5131
|
+
reflect: true
|
|
5092
5132
|
},
|
|
5093
5133
|
|
|
5094
5134
|
/**
|
|
@@ -5133,7 +5173,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5133
5173
|
/** Exposes inputmode attribute for input. */
|
|
5134
5174
|
inputmode: {
|
|
5135
5175
|
type: String,
|
|
5136
|
-
attribute: true,
|
|
5137
5176
|
reflect: true
|
|
5138
5177
|
},
|
|
5139
5178
|
|
|
@@ -5141,7 +5180,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5141
5180
|
* Defines the language of an element.
|
|
5142
5181
|
*/
|
|
5143
5182
|
lang: {
|
|
5144
|
-
type: String
|
|
5183
|
+
type: String,
|
|
5184
|
+
reflect: true
|
|
5145
5185
|
},
|
|
5146
5186
|
|
|
5147
5187
|
/**
|
|
@@ -5155,7 +5195,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5155
5195
|
* The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
|
|
5156
5196
|
*/
|
|
5157
5197
|
maxLength: {
|
|
5158
|
-
type: Number
|
|
5198
|
+
type: Number,
|
|
5199
|
+
reflect: true
|
|
5159
5200
|
},
|
|
5160
5201
|
|
|
5161
5202
|
/**
|
|
@@ -5169,14 +5210,25 @@ class BaseInput extends AuroElement$1 {
|
|
|
5169
5210
|
* The minimum number of characters the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by `maxlength`.
|
|
5170
5211
|
*/
|
|
5171
5212
|
minLength: {
|
|
5172
|
-
type: Number
|
|
5213
|
+
type: Number,
|
|
5214
|
+
reflect: true
|
|
5173
5215
|
},
|
|
5174
5216
|
|
|
5175
5217
|
/**
|
|
5176
5218
|
* Populates the `name` attribute on the input.
|
|
5177
5219
|
*/
|
|
5178
5220
|
name: {
|
|
5179
|
-
type: String
|
|
5221
|
+
type: String,
|
|
5222
|
+
reflect: true
|
|
5223
|
+
},
|
|
5224
|
+
|
|
5225
|
+
/**
|
|
5226
|
+
* Sets styles for nested operation - removes borders, hides help + error text, and
|
|
5227
|
+
* hides accents.
|
|
5228
|
+
*/
|
|
5229
|
+
nested: {
|
|
5230
|
+
type: Boolean,
|
|
5231
|
+
reflect: true
|
|
5180
5232
|
},
|
|
5181
5233
|
|
|
5182
5234
|
/**
|
|
@@ -5204,10 +5256,11 @@ class BaseInput extends AuroElement$1 {
|
|
|
5204
5256
|
},
|
|
5205
5257
|
|
|
5206
5258
|
/**
|
|
5207
|
-
* Define custom placeholder text
|
|
5259
|
+
* Define custom placeholder text.
|
|
5208
5260
|
*/
|
|
5209
5261
|
placeholder: {
|
|
5210
|
-
type: String
|
|
5262
|
+
type: String,
|
|
5263
|
+
reflect: true
|
|
5211
5264
|
},
|
|
5212
5265
|
|
|
5213
5266
|
/**
|
|
@@ -5296,6 +5349,14 @@ class BaseInput extends AuroElement$1 {
|
|
|
5296
5349
|
type: String
|
|
5297
5350
|
},
|
|
5298
5351
|
|
|
5352
|
+
/**
|
|
5353
|
+
* Simple makes the input render without a border.
|
|
5354
|
+
*/
|
|
5355
|
+
simple: {
|
|
5356
|
+
type: Boolean,
|
|
5357
|
+
reflect: true
|
|
5358
|
+
},
|
|
5359
|
+
|
|
5299
5360
|
/**
|
|
5300
5361
|
* Custom help text message for email type validity.
|
|
5301
5362
|
*/
|
|
@@ -5307,7 +5368,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5307
5368
|
* An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`.
|
|
5308
5369
|
*/
|
|
5309
5370
|
spellcheck: {
|
|
5310
|
-
type: String
|
|
5371
|
+
type: String,
|
|
5372
|
+
reflect: true
|
|
5311
5373
|
},
|
|
5312
5374
|
|
|
5313
5375
|
/**
|
|
@@ -5367,8 +5429,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5367
5429
|
connectedCallback() {
|
|
5368
5430
|
super.connectedCallback();
|
|
5369
5431
|
|
|
5370
|
-
this.privateDefaults();
|
|
5371
|
-
|
|
5372
5432
|
notifyOnLangChange(this);
|
|
5373
5433
|
}
|
|
5374
5434
|
|
|
@@ -5378,7 +5438,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
5378
5438
|
}
|
|
5379
5439
|
|
|
5380
5440
|
firstUpdated() {
|
|
5381
|
-
// clicking anywhere in the main wrapper will focus the input. Clicking the
|
|
5441
|
+
// clicking anywhere in the main wrapper will focus the input. Clicking the helpText or label will not focus the input.
|
|
5382
5442
|
this.wrapperElement = this.shadowRoot.querySelector('.wrapper');
|
|
5383
5443
|
this.inputElement = this.renderRoot.querySelector('input');
|
|
5384
5444
|
this.labelElement = this.shadowRoot.querySelector('label');
|
|
@@ -5490,9 +5550,9 @@ class BaseInput extends AuroElement$1 {
|
|
|
5490
5550
|
if (!this.shadowRoot.contains(this.getActiveElement())) {
|
|
5491
5551
|
this.validation.validate(this);
|
|
5492
5552
|
}
|
|
5493
|
-
|
|
5494
|
-
this.notifyValueChanged();
|
|
5495
5553
|
}
|
|
5554
|
+
|
|
5555
|
+
this.notifyValueChanged();
|
|
5496
5556
|
}
|
|
5497
5557
|
|
|
5498
5558
|
if (changedProperties.has('error')) {
|
|
@@ -5602,7 +5662,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5602
5662
|
|
|
5603
5663
|
/**
|
|
5604
5664
|
* Function to set element focus.
|
|
5605
|
-
* @private
|
|
5606
5665
|
* @return {void}
|
|
5607
5666
|
*/
|
|
5608
5667
|
focus() {
|
|
@@ -5618,9 +5677,9 @@ class BaseInput extends AuroElement$1 {
|
|
|
5618
5677
|
this.inputElement.value = "";
|
|
5619
5678
|
this.value = "";
|
|
5620
5679
|
this.labelElement.classList.remove('inputElement-label--sticky');
|
|
5680
|
+
this.notifyValueChanged();
|
|
5621
5681
|
this.focus();
|
|
5622
5682
|
this.validation.validate(this);
|
|
5623
|
-
this.notifyValueChanged();
|
|
5624
5683
|
}
|
|
5625
5684
|
|
|
5626
5685
|
/**
|
|
@@ -5715,13 +5774,20 @@ class BaseInput extends AuroElement$1 {
|
|
|
5715
5774
|
}
|
|
5716
5775
|
|
|
5717
5776
|
/**
|
|
5718
|
-
* Resets component to initial state.
|
|
5777
|
+
* Resets component to initial state, including resetting the touched state and validity.
|
|
5719
5778
|
* @returns {void}
|
|
5720
5779
|
*/
|
|
5721
5780
|
reset() {
|
|
5722
5781
|
this.validation.reset(this);
|
|
5723
5782
|
}
|
|
5724
5783
|
|
|
5784
|
+
/**
|
|
5785
|
+
* Clears the input value.
|
|
5786
|
+
*/
|
|
5787
|
+
clear() {
|
|
5788
|
+
this.value = undefined;
|
|
5789
|
+
}
|
|
5790
|
+
|
|
5725
5791
|
/**
|
|
5726
5792
|
* Sets configuration data used elsewhere based on the `type` attribute.
|
|
5727
5793
|
* @private
|
|
@@ -5800,28 +5866,15 @@ class BaseInput extends AuroElement$1 {
|
|
|
5800
5866
|
* @returns {void}
|
|
5801
5867
|
*/
|
|
5802
5868
|
getPlaceholder() {
|
|
5803
|
-
|
|
5804
|
-
|
|
5805
|
-
|
|
5806
|
-
|
|
5807
|
-
// console.warn(this.getActiveElement());
|
|
5808
|
-
|
|
5809
|
-
if (!isFocused) {
|
|
5810
|
-
if (this.placeholder) {
|
|
5811
|
-
this.placeholderStr = this.placeholder;
|
|
5812
|
-
// return this.placeholder;
|
|
5813
|
-
} else if (this.type === 'date') {
|
|
5814
|
-
this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
5815
|
-
// return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
5816
|
-
}
|
|
5817
|
-
} else {
|
|
5818
|
-
this.placeholderStr = '';
|
|
5869
|
+
if (this.placeholder) {
|
|
5870
|
+
this.placeholderStr = this.placeholder;
|
|
5871
|
+
} else if (this.type === 'date') {
|
|
5872
|
+
this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
5819
5873
|
}
|
|
5820
5874
|
|
|
5821
5875
|
this.requestUpdate();
|
|
5822
5876
|
|
|
5823
|
-
|
|
5824
|
-
// return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
5877
|
+
return this.placeholderStr;
|
|
5825
5878
|
}
|
|
5826
5879
|
|
|
5827
5880
|
/**
|
|
@@ -6034,7 +6087,7 @@ class AuroDependencyVersioning {
|
|
|
6034
6087
|
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
6035
6088
|
*/
|
|
6036
6089
|
|
|
6037
|
-
class AuroElement extends LitElement {
|
|
6090
|
+
let AuroElement$1 = class AuroElement extends LitElement {
|
|
6038
6091
|
|
|
6039
6092
|
// function to define props used within the scope of this component
|
|
6040
6093
|
static get properties() {
|
|
@@ -6058,7 +6111,7 @@ class AuroElement extends LitElement {
|
|
|
6058
6111
|
|
|
6059
6112
|
return 'false'
|
|
6060
6113
|
}
|
|
6061
|
-
}
|
|
6114
|
+
};
|
|
6062
6115
|
|
|
6063
6116
|
var error = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
|
|
6064
6117
|
|
|
@@ -6102,7 +6155,7 @@ var styleCss$3 = css`:focus:not(:focus-visible){outline:3px solid transparent}.u
|
|
|
6102
6155
|
*/
|
|
6103
6156
|
|
|
6104
6157
|
// build the component class
|
|
6105
|
-
class BaseIcon extends AuroElement {
|
|
6158
|
+
class BaseIcon extends AuroElement$1 {
|
|
6106
6159
|
constructor() {
|
|
6107
6160
|
super();
|
|
6108
6161
|
this.onDark = false;
|
|
@@ -6185,7 +6238,7 @@ var colorCss$3 = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){
|
|
|
6185
6238
|
|
|
6186
6239
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
6187
6240
|
|
|
6188
|
-
let AuroLibraryRuntimeUtils$
|
|
6241
|
+
let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
6189
6242
|
|
|
6190
6243
|
/* eslint-disable jsdoc/require-param */
|
|
6191
6244
|
|
|
@@ -6267,7 +6320,7 @@ class AuroIcon extends BaseIcon {
|
|
|
6267
6320
|
*/
|
|
6268
6321
|
privateDefaults() {
|
|
6269
6322
|
this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
|
|
6270
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
6323
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
6271
6324
|
}
|
|
6272
6325
|
|
|
6273
6326
|
// function to define props used within the scope of this component
|
|
@@ -6349,7 +6402,7 @@ class AuroIcon extends BaseIcon {
|
|
|
6349
6402
|
*
|
|
6350
6403
|
*/
|
|
6351
6404
|
static register(name = "auro-icon") {
|
|
6352
|
-
AuroLibraryRuntimeUtils$
|
|
6405
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroIcon);
|
|
6353
6406
|
}
|
|
6354
6407
|
|
|
6355
6408
|
connectedCallback() {
|
|
@@ -6370,8 +6423,12 @@ class AuroIcon extends BaseIcon {
|
|
|
6370
6423
|
async firstUpdated() {
|
|
6371
6424
|
await super.firstUpdated();
|
|
6372
6425
|
|
|
6373
|
-
|
|
6374
|
-
|
|
6426
|
+
/**
|
|
6427
|
+
* icons provide a description for screen readers. Icon only instances Auro-button
|
|
6428
|
+
* depend on this description to provide context for the user using a screen reader.
|
|
6429
|
+
* Removes the SVG description for screen reader if ariaHidden is set to true.
|
|
6430
|
+
*/
|
|
6431
|
+
if (this.hasAttribute('ariaHidden') && this.svg) {
|
|
6375
6432
|
const svgDesc = this.svg.querySelector('desc');
|
|
6376
6433
|
|
|
6377
6434
|
if (svgDesc) {
|
|
@@ -6415,123 +6472,660 @@ class AuroIcon extends BaseIcon {
|
|
|
6415
6472
|
}
|
|
6416
6473
|
}
|
|
6417
6474
|
|
|
6418
|
-
var iconVersion = '8.0.
|
|
6475
|
+
var iconVersion = '8.0.4';
|
|
6419
6476
|
|
|
6420
|
-
|
|
6477
|
+
/**
|
|
6478
|
+
* Private module-level WeakMap to hold MutationObservers for each host element.
|
|
6479
|
+
*/
|
|
6480
|
+
const _observers = new WeakMap();
|
|
6421
6481
|
|
|
6422
|
-
|
|
6482
|
+
/**
|
|
6483
|
+
* Private module-level WeakMap to hold attribute matchers and targets for each host element.
|
|
6484
|
+
* Structure: {
|
|
6485
|
+
* host: {
|
|
6486
|
+
* matchers: Set<Function>,
|
|
6487
|
+
* targets: Map<HTMLElement, Map<Function, {removeOriginal: boolean, currentAttributes: Map<string, string>}>>
|
|
6488
|
+
* }
|
|
6489
|
+
* }
|
|
6490
|
+
*/
|
|
6491
|
+
const _transportConfig = new WeakMap();
|
|
6423
6492
|
|
|
6424
|
-
|
|
6493
|
+
/**
|
|
6494
|
+
* Transfers all matching attributes from a host element to a target element and observes for future changes.
|
|
6495
|
+
*
|
|
6496
|
+
* @param {Object} params - The parameters for the function.
|
|
6497
|
+
* @param {HTMLElement} params.host - The host element from which attributes will be transported.
|
|
6498
|
+
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
6499
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove the attributes from the host element.
|
|
6500
|
+
* @param {boolean} [params.observe=true] - Whether to attach a MutationObserver to the host element.
|
|
6501
|
+
* @returns {Function} A function to detach the observer when no longer needed.
|
|
6502
|
+
* @throws {TypeError} If the host or target parameters are not instances of HTMLElement.
|
|
6503
|
+
*/
|
|
6504
|
+
const transportAttributes = ({ host, target, match, removeOriginal = true }) => {
|
|
6505
|
+
// Guard Clause: Ensure host is valid HTMLElement instance
|
|
6506
|
+
if (typeof host !== 'object' || !(host instanceof HTMLElement)) {
|
|
6507
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');
|
|
6508
|
+
}
|
|
6425
6509
|
|
|
6426
|
-
|
|
6510
|
+
// Guard Clause: Ensure target is valid HTMLElement instance
|
|
6511
|
+
if (typeof target !== 'object' || !(target instanceof HTMLElement)) {
|
|
6512
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');
|
|
6513
|
+
}
|
|
6427
6514
|
|
|
6428
|
-
|
|
6515
|
+
// Guard Clause: Ensure match is a function
|
|
6516
|
+
if (typeof match !== 'function') {
|
|
6517
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');
|
|
6518
|
+
}
|
|
6429
6519
|
|
|
6430
|
-
|
|
6520
|
+
// Guard Clause: Ensure removeOriginal is a boolean
|
|
6521
|
+
if (typeof removeOriginal !== 'boolean') {
|
|
6522
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');
|
|
6523
|
+
}
|
|
6524
|
+
|
|
6525
|
+
// Register this transport and get cleanup function
|
|
6526
|
+
return _registerTransport({
|
|
6527
|
+
host,
|
|
6528
|
+
target,
|
|
6529
|
+
matcher: match,
|
|
6530
|
+
removeOriginal
|
|
6531
|
+
});
|
|
6532
|
+
};
|
|
6431
6533
|
|
|
6432
|
-
|
|
6433
|
-
|
|
6534
|
+
/**
|
|
6535
|
+
* Registers a matcher and target for a host element and attaches an observer if needed.
|
|
6536
|
+
*
|
|
6537
|
+
* @param {Object} params - The parameters object.
|
|
6538
|
+
* @param {HTMLElement} params.host - The host element to observe.
|
|
6539
|
+
* @param {HTMLElement} params.target - The target element to receive attributes.
|
|
6540
|
+
* @param {Function} params.matcher - Function that determines which attributes to transport.
|
|
6541
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes.
|
|
6542
|
+
* @param {boolean} [params.observe=true] - Whether to observe for attribute changes.
|
|
6543
|
+
* @returns {Function} Function to detach the specific matcher and target pairing.
|
|
6544
|
+
* @private
|
|
6545
|
+
*/
|
|
6546
|
+
const _registerTransport = ({ host, target, matcher, removeOriginal = true }) => {
|
|
6547
|
+
// Initialize config for this host if it doesn't exist
|
|
6548
|
+
if (!_transportConfig.has(host)) {
|
|
6549
|
+
_transportConfig.set(host, {
|
|
6550
|
+
matchers: new Set(),
|
|
6551
|
+
targets: new Map()
|
|
6552
|
+
});
|
|
6553
|
+
}
|
|
6434
6554
|
|
|
6555
|
+
const config = _transportConfig.get(host);
|
|
6556
|
+
|
|
6557
|
+
// Add the matcher to the set of matchers for this host
|
|
6558
|
+
config.matchers.add(matcher);
|
|
6559
|
+
|
|
6560
|
+
// Initialize target entry if it doesn't exist
|
|
6561
|
+
if (!config.targets.has(target)) {
|
|
6562
|
+
config.targets.set(target, new Map());
|
|
6563
|
+
}
|
|
6564
|
+
|
|
6565
|
+
// Store the matcher with its removeOriginal setting for this target
|
|
6566
|
+
config.targets.get(target).set(matcher, {
|
|
6567
|
+
removeOriginal,
|
|
6568
|
+
currentAttributes: new Map()
|
|
6569
|
+
});
|
|
6570
|
+
|
|
6571
|
+
// Perform initial attribute transport
|
|
6572
|
+
_transportAttributes({ host, target, matcher, removeOriginal });
|
|
6573
|
+
|
|
6574
|
+
// Attach observer
|
|
6575
|
+
_attachObserver(host);
|
|
6576
|
+
|
|
6577
|
+
// Return cleanup function and utility functions
|
|
6578
|
+
return {
|
|
6579
|
+
cleanup: () => _cleanupTransport(host, target, matcher),
|
|
6580
|
+
getObservedAttributes: () => _getObservedAttributes(host, target, matcher),
|
|
6581
|
+
getObservedAttribute: (attr) => _getObservedAttribute(host, target, matcher, attr),
|
|
6582
|
+
}
|
|
6583
|
+
};
|
|
6435
6584
|
|
|
6436
|
-
|
|
6437
|
-
|
|
6438
|
-
|
|
6585
|
+
/**
|
|
6586
|
+
* Cleans up resources associated with a specific matcher and target for a host element.
|
|
6587
|
+
*
|
|
6588
|
+
* @param {HTMLElement} host - The host element
|
|
6589
|
+
* @param {HTMLElement} target - The target element
|
|
6590
|
+
* @param {Function} matcher - The matcher function
|
|
6591
|
+
* @private
|
|
6592
|
+
*/
|
|
6593
|
+
const _cleanupTransport = (host, target, matcher) => {
|
|
6594
|
+
const config = _transportConfig.get(host);
|
|
6595
|
+
if (!config) return;
|
|
6596
|
+
|
|
6597
|
+
// Remove this matcher from this target
|
|
6598
|
+
const targetMatchers = config.targets.get(target);
|
|
6599
|
+
if (targetMatchers) {
|
|
6600
|
+
targetMatchers.delete(matcher);
|
|
6601
|
+
|
|
6602
|
+
// If this target has no more matchers, remove it
|
|
6603
|
+
if (targetMatchers.size === 0) {
|
|
6604
|
+
config.targets.delete(target);
|
|
6605
|
+
}
|
|
6606
|
+
}
|
|
6607
|
+
|
|
6608
|
+
// Check if this matcher is still used by any target
|
|
6609
|
+
let matcherStillUsed = false;
|
|
6610
|
+
for (const matcherMap of config.targets.values()) {
|
|
6611
|
+
if (matcherMap.has(matcher)) {
|
|
6612
|
+
matcherStillUsed = true;
|
|
6613
|
+
break;
|
|
6614
|
+
}
|
|
6615
|
+
}
|
|
6616
|
+
|
|
6617
|
+
// If not used anymore, remove from matchers set
|
|
6618
|
+
if (!matcherStillUsed) {
|
|
6619
|
+
config.matchers.delete(matcher);
|
|
6620
|
+
}
|
|
6621
|
+
|
|
6622
|
+
// If no more targets or matchers, detach observer
|
|
6623
|
+
if (config.targets.size === 0 || config.matchers.size === 0) {
|
|
6624
|
+
_detachObserver(host);
|
|
6625
|
+
}
|
|
6626
|
+
};
|
|
6439
6627
|
|
|
6440
|
-
|
|
6441
|
-
|
|
6442
|
-
|
|
6443
|
-
|
|
6628
|
+
/**
|
|
6629
|
+
* Generic function to transport attributes from a host element to a target element.
|
|
6630
|
+
*
|
|
6631
|
+
* @param {Object} params - The parameters object.
|
|
6632
|
+
* @param {HTMLElement} params.host - The host element from which to transport attributes.
|
|
6633
|
+
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
6634
|
+
* @param {Function} params.matcher - Function that takes an attribute name and returns true if it should be transported.
|
|
6635
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes from host.
|
|
6636
|
+
* @returns {void}
|
|
6637
|
+
* @private
|
|
6638
|
+
*/
|
|
6639
|
+
const _transportAttributes = ({ host, target, matcher, removeOriginal = true }) => {
|
|
6640
|
+
// Get a list of all matching attributes on the host element and their values
|
|
6641
|
+
const matchingAttributes = host.getAttributeNames()
|
|
6642
|
+
.filter(attr => matcher(attr))
|
|
6643
|
+
.reduce((acc, attr) => {
|
|
6644
|
+
acc[attr] = host.getAttribute(attr);
|
|
6645
|
+
return acc;
|
|
6646
|
+
}, {});
|
|
6647
|
+
|
|
6648
|
+
// Move matching attributes to the target element, removing them from the host if removeOriginal is true
|
|
6649
|
+
Object.entries(matchingAttributes).forEach(([key, value]) => {
|
|
6650
|
+
_setObservedAttribute(host, target, matcher, key, value);
|
|
6651
|
+
target.setAttribute(key, value);
|
|
6652
|
+
if (removeOriginal) {
|
|
6653
|
+
host.removeAttribute(key);
|
|
6654
|
+
}
|
|
6655
|
+
});
|
|
6656
|
+
};
|
|
6444
6657
|
|
|
6445
|
-
|
|
6446
|
-
|
|
6447
|
-
|
|
6448
|
-
|
|
6658
|
+
/**
|
|
6659
|
+
* Attaches a MutationObserver to the host element to monitor attribute changes.
|
|
6660
|
+
*
|
|
6661
|
+
* @param {HTMLElement} host - The element to observe for attribute changes.
|
|
6662
|
+
* @returns {MutationObserver} The observer instance.
|
|
6663
|
+
* @private
|
|
6664
|
+
*/
|
|
6665
|
+
const _attachObserver = (host) => {
|
|
6666
|
+
// If an observer for this host already exists, return it
|
|
6667
|
+
if (_observers.has(host)) {
|
|
6668
|
+
return _observers.get(host);
|
|
6669
|
+
}
|
|
6670
|
+
|
|
6671
|
+
// Create a new MutationObserver
|
|
6672
|
+
const observer = new MutationObserver((mutations) => {
|
|
6673
|
+
const config = _transportConfig.get(host);
|
|
6674
|
+
if (!config) return;
|
|
6675
|
+
|
|
6676
|
+
// For each mutation affecting attributes
|
|
6677
|
+
mutations
|
|
6678
|
+
.filter(mutation => mutation.type === 'attributes')
|
|
6679
|
+
.forEach(mutation => {
|
|
6680
|
+
const attributeName = mutation.attributeName;
|
|
6681
|
+
|
|
6682
|
+
// Find matchers that care about this attribute
|
|
6683
|
+
for (const matcher of config.matchers) {
|
|
6684
|
+
if (matcher(attributeName)) {
|
|
6685
|
+
// For each target that uses this matcher
|
|
6686
|
+
for (const [target, matcherConfigs] of config.targets.entries()) {
|
|
6687
|
+
if (matcherConfigs.has(matcher)) {
|
|
6688
|
+
const { removeOriginal } = matcherConfigs.get(matcher);
|
|
6689
|
+
_transportAttributes({
|
|
6690
|
+
host,
|
|
6691
|
+
target,
|
|
6692
|
+
matcher,
|
|
6693
|
+
removeOriginal
|
|
6694
|
+
});
|
|
6695
|
+
}
|
|
6696
|
+
}
|
|
6697
|
+
}
|
|
6698
|
+
}
|
|
6699
|
+
});
|
|
6700
|
+
});
|
|
6449
6701
|
|
|
6450
|
-
|
|
6451
|
-
|
|
6452
|
-
|
|
6453
|
-
|
|
6702
|
+
// Start observing attribute changes
|
|
6703
|
+
observer.observe(host, { attributes: true });
|
|
6704
|
+
|
|
6705
|
+
// Store the observer
|
|
6706
|
+
_observers.set(host, observer);
|
|
6707
|
+
|
|
6708
|
+
return observer;
|
|
6709
|
+
};
|
|
6454
6710
|
|
|
6455
|
-
|
|
6456
|
-
|
|
6457
|
-
|
|
6458
|
-
|
|
6711
|
+
/**
|
|
6712
|
+
* Detaches and cleans up the MutationObserver for a given host element.
|
|
6713
|
+
*
|
|
6714
|
+
* @param {HTMLElement} host - The element whose observer should be detached.
|
|
6715
|
+
* @private
|
|
6716
|
+
*/
|
|
6717
|
+
const _detachObserver = (host) => {
|
|
6718
|
+
if (_observers.has(host)) {
|
|
6719
|
+
const observer = _observers.get(host);
|
|
6720
|
+
observer.disconnect();
|
|
6721
|
+
_observers.delete(host);
|
|
6722
|
+
}
|
|
6723
|
+
|
|
6724
|
+
// Clean up the transport config as well
|
|
6725
|
+
if (_transportConfig.has(host)) {
|
|
6726
|
+
_transportConfig.delete(host);
|
|
6727
|
+
}
|
|
6728
|
+
};
|
|
6459
6729
|
|
|
6460
|
-
|
|
6461
|
-
|
|
6462
|
-
|
|
6463
|
-
|
|
6730
|
+
/**
|
|
6731
|
+
* Gets the matcher configuration for a specific host, target, and matcher
|
|
6732
|
+
* @param {HTMLElement} host - The host element
|
|
6733
|
+
* @param {HTMLElement} target - The target element
|
|
6734
|
+
* @param {Function} matcher - The matcher function
|
|
6735
|
+
* @returns {Object|undefined} The matcher configuration if found
|
|
6736
|
+
* @private
|
|
6737
|
+
*/
|
|
6738
|
+
const _getMatcherConfig = (host, target, matcher) => {
|
|
6739
|
+
const config = _transportConfig.get(host);
|
|
6740
|
+
if (!config) return undefined;
|
|
6741
|
+
|
|
6742
|
+
const targetMatchers = config.targets.get(target);
|
|
6743
|
+
if (!targetMatchers) return undefined;
|
|
6744
|
+
|
|
6745
|
+
return targetMatchers.get(matcher);
|
|
6746
|
+
};
|
|
6747
|
+
|
|
6748
|
+
/**
|
|
6749
|
+
* Sets an observed attribute value
|
|
6750
|
+
* @param {HTMLElement} host - The host element
|
|
6751
|
+
* @param {HTMLElement} target - The target element
|
|
6752
|
+
* @param {Function} matcher - The matcher function
|
|
6753
|
+
* @param {string} key - The attribute name
|
|
6754
|
+
* @param {string} value - The attribute value
|
|
6755
|
+
* @private
|
|
6756
|
+
*/
|
|
6757
|
+
const _setObservedAttribute = (host, target, matcher, key, value) => {
|
|
6758
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
6759
|
+
if (matcherConfig) {
|
|
6760
|
+
matcherConfig.currentAttributes.set(key, value);
|
|
6464
6761
|
}
|
|
6762
|
+
};
|
|
6763
|
+
|
|
6764
|
+
const _getObservedAttribute = (host, target, matcher, attr) => {
|
|
6765
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
6766
|
+
if (matcherConfig) return matcherConfig.currentAttributes.get(attr);
|
|
6767
|
+
return undefined;
|
|
6768
|
+
};
|
|
6769
|
+
|
|
6770
|
+
const _getObservedAttributes = (host, target, matcher) => {
|
|
6771
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
6772
|
+
if (matcherConfig) return Array.from(matcherConfig.currentAttributes.entries());
|
|
6773
|
+
return [];
|
|
6774
|
+
};
|
|
6775
|
+
|
|
6776
|
+
const _matchers = {
|
|
6777
|
+
'aria-': attr => attr.startsWith('aria-'),
|
|
6778
|
+
'role': attr => attr.match(/^role$/)
|
|
6779
|
+
};
|
|
6780
|
+
|
|
6781
|
+
const transportAllA11yAttributes = ({ host, target, removeOriginal = true }) => {
|
|
6782
|
+
return transportAttributes({
|
|
6783
|
+
host,
|
|
6784
|
+
target,
|
|
6785
|
+
match: attr => {
|
|
6786
|
+
for (const key in _matchers) {
|
|
6787
|
+
if (_matchers[key](attr)) return true;
|
|
6788
|
+
}
|
|
6789
|
+
return false;
|
|
6790
|
+
},
|
|
6791
|
+
removeOriginal
|
|
6792
|
+
});
|
|
6793
|
+
};
|
|
6794
|
+
|
|
6795
|
+
class AuroElement extends LitElement {
|
|
6796
|
+
|
|
6797
|
+
/**
|
|
6798
|
+
* @type {Object} return object from transportAttributes via a11yUtilities
|
|
6799
|
+
* @property {Function} cleanup - Function to clean up the attribute watcher.
|
|
6800
|
+
* @property {Function} getCurrentAttributes - Function to get the current attributes being watched and their values.
|
|
6801
|
+
* @property {Function} getObservedAttribute - Function to get the value of a specific observed attribute by name.
|
|
6802
|
+
* @private
|
|
6803
|
+
*/
|
|
6804
|
+
attributeWatcher;
|
|
6465
6805
|
|
|
6466
|
-
// function to define props used within the scope of this component
|
|
6467
6806
|
static get properties() {
|
|
6468
6807
|
return {
|
|
6469
6808
|
|
|
6470
6809
|
/**
|
|
6471
|
-
*
|
|
6810
|
+
* Defines the layout of an element.
|
|
6811
|
+
* @default {'default'}
|
|
6472
6812
|
*/
|
|
6473
|
-
|
|
6474
|
-
type:
|
|
6813
|
+
layout: {
|
|
6814
|
+
type: String,
|
|
6815
|
+
attribute: "layout",
|
|
6475
6816
|
reflect: true
|
|
6476
6817
|
},
|
|
6477
|
-
|
|
6818
|
+
|
|
6478
6819
|
/**
|
|
6479
|
-
*
|
|
6820
|
+
* Defines the shape of an element.
|
|
6821
|
+
* @property {'default', 'rounded', 'pill', 'circle'}
|
|
6822
|
+
* @default {'default'}
|
|
6480
6823
|
*/
|
|
6481
|
-
|
|
6482
|
-
type:
|
|
6824
|
+
shape: {
|
|
6825
|
+
type: String,
|
|
6826
|
+
attribute: "shape",
|
|
6483
6827
|
reflect: true
|
|
6484
6828
|
},
|
|
6485
6829
|
|
|
6486
6830
|
/**
|
|
6487
|
-
*
|
|
6831
|
+
* Defines the size of an element.
|
|
6832
|
+
* @property {'xs', 'sm', 'md', 'lg', 'xl'}
|
|
6833
|
+
* @default {'md'}
|
|
6488
6834
|
*/
|
|
6489
|
-
|
|
6490
|
-
type:
|
|
6835
|
+
size: {
|
|
6836
|
+
type: String,
|
|
6837
|
+
attribute: "size",
|
|
6491
6838
|
reflect: true
|
|
6492
6839
|
},
|
|
6493
6840
|
|
|
6494
|
-
/**
|
|
6495
|
-
*
|
|
6841
|
+
/**
|
|
6842
|
+
* This Boolean attribute lets you specify that the element should be rendered in dark mode.
|
|
6843
|
+
* @default {false}
|
|
6496
6844
|
*/
|
|
6497
|
-
|
|
6845
|
+
onDark: {
|
|
6498
6846
|
type: Boolean,
|
|
6847
|
+
attribute: "ondark",
|
|
6499
6848
|
reflect: true
|
|
6849
|
+
},
|
|
6850
|
+
|
|
6851
|
+
/**
|
|
6852
|
+
* A reference to the wrapper element in the shadow DOM.
|
|
6853
|
+
* This is used to apply layout and shape classes dynamically.
|
|
6854
|
+
* @type {HTMLElement|null}
|
|
6855
|
+
* @default {null}
|
|
6856
|
+
* @private
|
|
6857
|
+
*/
|
|
6858
|
+
wrapper: {
|
|
6859
|
+
attribute: false,
|
|
6860
|
+
reflect: false
|
|
6500
6861
|
}
|
|
6501
6862
|
};
|
|
6502
6863
|
}
|
|
6503
6864
|
|
|
6504
|
-
|
|
6505
|
-
return [
|
|
6506
|
-
css`${styleCss$1}`,
|
|
6507
|
-
css`${colorCss$1}`,
|
|
6508
|
-
css`${tokensCss$1}`
|
|
6509
|
-
];
|
|
6510
|
-
}
|
|
6865
|
+
|
|
6511
6866
|
|
|
6512
|
-
|
|
6513
|
-
|
|
6514
|
-
* @param {string} [name="auro-loader"] - The name of element that you want to register to.
|
|
6515
|
-
*
|
|
6516
|
-
* @example
|
|
6517
|
-
* AuroLoader.register("custom-loader") // this will register this element to <custom-loader/>
|
|
6518
|
-
*
|
|
6519
|
-
*/
|
|
6520
|
-
static register(name = "auro-loader") {
|
|
6521
|
-
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroLoader);
|
|
6522
|
-
}
|
|
6867
|
+
resetShapeClasses() {
|
|
6868
|
+
if (this.shape && this.size) {
|
|
6523
6869
|
|
|
6524
|
-
|
|
6525
|
-
|
|
6526
|
-
|
|
6527
|
-
|
|
6870
|
+
if (this.wrapper) {
|
|
6871
|
+
this.wrapper.classList.forEach((className) => {
|
|
6872
|
+
if (className.startsWith('shape-')) {
|
|
6873
|
+
this.wrapper.classList.remove(className);
|
|
6874
|
+
}
|
|
6875
|
+
});
|
|
6528
6876
|
|
|
6529
|
-
|
|
6530
|
-
|
|
6877
|
+
this.wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
|
|
6878
|
+
}
|
|
6879
|
+
}
|
|
6531
6880
|
}
|
|
6532
6881
|
|
|
6533
|
-
|
|
6534
|
-
|
|
6882
|
+
resetLayoutClasses() {
|
|
6883
|
+
if (this.layout) {
|
|
6884
|
+
if (this.wrapper) {
|
|
6885
|
+
this.wrapper.classList.forEach((className) => {
|
|
6886
|
+
if (className.startsWith('layout-')) {
|
|
6887
|
+
this.wrapper.classList.remove(className);
|
|
6888
|
+
}
|
|
6889
|
+
});
|
|
6890
|
+
|
|
6891
|
+
this.wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
|
|
6892
|
+
}
|
|
6893
|
+
}
|
|
6894
|
+
}
|
|
6895
|
+
|
|
6896
|
+
updateComponentArchitecture() {
|
|
6897
|
+
this.resetLayoutClasses();
|
|
6898
|
+
this.resetShapeClasses();
|
|
6899
|
+
}
|
|
6900
|
+
|
|
6901
|
+
updated(changedProperties) {
|
|
6902
|
+
if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
|
|
6903
|
+
this.updateComponentArchitecture();
|
|
6904
|
+
}
|
|
6905
|
+
}
|
|
6906
|
+
|
|
6907
|
+
firstUpdated() {
|
|
6908
|
+
super.firstUpdated();
|
|
6909
|
+
|
|
6910
|
+
// Set a reference to the wrapper element in the shadow DOM
|
|
6911
|
+
this.wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
6912
|
+
|
|
6913
|
+
// Initialize the transportation of ARIA attributes to the target element and get the disconnect function for cleanup
|
|
6914
|
+
this.attributeWatcher = transportAllA11yAttributes({ host: this, target: this.shadowRoot.querySelector('.wrapper') });
|
|
6915
|
+
}
|
|
6916
|
+
|
|
6917
|
+
disconnectedCallback() {
|
|
6918
|
+
super.disconnectedCallback();
|
|
6919
|
+
|
|
6920
|
+
// Cleanup the ARIA observer if it exists
|
|
6921
|
+
if (this.attributeWatcher) {
|
|
6922
|
+
this.attributeWatcher.cleanup();
|
|
6923
|
+
this.attributeWatcher = null;
|
|
6924
|
+
}
|
|
6925
|
+
}
|
|
6926
|
+
|
|
6927
|
+
// Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
|
|
6928
|
+
// This will catch if an invalid layout value is passed in and render the default layout if so.
|
|
6929
|
+
render() {
|
|
6930
|
+
try {
|
|
6931
|
+
return this.renderLayout();
|
|
6932
|
+
} catch (error) {
|
|
6933
|
+
// failed to get the defined layout
|
|
6934
|
+
console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
|
|
6935
|
+
|
|
6936
|
+
// fallback to the default layout
|
|
6937
|
+
return this.getLayout('default');
|
|
6938
|
+
}
|
|
6939
|
+
}
|
|
6940
|
+
}
|
|
6941
|
+
|
|
6942
|
+
var styleCss$2 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.63)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.88)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3)}.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([size=xs][shape=rounded]) ::slotted(auro-icon),:host([size=xs][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=xs][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill]) ::slotted(auro-icon),:host([size=xs][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left]) ::slotted(auro-icon),:host([size=xs][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right]) ::slotted(auro-icon),:host([size=xs][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle]) ::slotted(auro-icon),:host([size=xs][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xs][shape=circle][variant=primary]) .auro-button:focus,:host([size=xs][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=circle][variant=secondary]) .auro-button:focus,:host([size=xs][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=flat]) .auro-button:focus,:host([size=xs][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=ghost]) .auro-button:focus,:host([size=xs][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square]) ::slotted(auro-icon),:host([size=xs][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xs][shape=square][variant=primary]) .auro-button:focus,:host([size=xs][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=square][variant=secondary]) .auro-button:focus,:host([size=xs][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=flat]) .auro-button:focus,:host([size=xs][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=ghost]) .auro-button:focus,:host([size=xs][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded]) ::slotted(auro-icon),:host([size=sm][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=sm][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill]) ::slotted(auro-icon),:host([size=sm][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left]) ::slotted(auro-icon),:host([size=sm][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right]) ::slotted(auro-icon),:host([size=sm][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle]) ::slotted(auro-icon),:host([size=sm][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=circle][variant=primary]) .auro-button:focus,:host([size=sm][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=circle][variant=secondary]) .auro-button:focus,:host([size=sm][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=flat]) .auro-button:focus,:host([size=sm][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=ghost]) .auro-button:focus,:host([size=sm][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square]) ::slotted(auro-icon),:host([size=sm][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=square][variant=primary]) .auro-button:focus,:host([size=sm][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=square][variant=secondary]) .auro-button:focus,:host([size=sm][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=flat]) .auro-button:focus,:host([size=sm][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=ghost]) .auro-button:focus,:host([size=sm][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded]) ::slotted(auro-icon),:host([size=md][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=rounded][variant=primary]) .auro-button:focus,:host([size=md][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=md][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=md][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=md][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=md][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill]) ::slotted(auro-icon),:host([size=md][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill][variant=primary]) .auro-button:focus,:host([size=md][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left]) ::slotted(auro-icon),:host([size=md][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right]) ::slotted(auro-icon),:host([size=md][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle]) ::slotted(auro-icon),:host([size=md][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=circle][variant=primary]) .auro-button:focus,:host([size=md][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=md][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=circle][variant=secondary]) .auro-button:focus,:host([size=md][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=md][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=flat]) .auro-button:focus,:host([size=md][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=ghost]) .auro-button:focus,:host([size=md][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square]) ::slotted(auro-icon),:host([size=md][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=square][variant=primary]) .auro-button:focus,:host([size=md][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=primary]) .auro-button:focus:after,:host([size=md][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=square][variant=secondary]) .auro-button:focus,:host([size=md][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=tertiary]) .auro-button:focus,:host([size=md][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=flat]) .auro-button:focus,:host([size=md][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=ghost]) .auro-button:focus,:host([size=md][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded]) ::slotted(auro-icon),:host([size=lg][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=lg][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill]) ::slotted(auro-icon),:host([size=lg][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left]) ::slotted(auro-icon),:host([size=lg][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right]) ::slotted(auro-icon),:host([size=lg][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle]) ::slotted(auro-icon),:host([size=lg][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}:host([size=lg][shape=circle][variant=primary]) .auro-button:focus,:host([size=lg][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4.33px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=circle][variant=secondary]) .auro-button:focus,:host([size=lg][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=flat]) .auro-button:focus,:host([size=lg][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=ghost]) .auro-button:focus,:host([size=lg][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square]) ::slotted(auro-icon),:host([size=lg][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}:host([size=lg][shape=square][variant=primary]) .auro-button:focus,:host([size=lg][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4.33px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=square][variant=secondary]) .auro-button:focus,:host([size=lg][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=flat]) .auro-button:focus,:host([size=lg][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=ghost]) .auro-button:focus,:host([size=lg][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded]) ::slotted(auro-icon),:host([size=xl][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=xl][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill]) ::slotted(auro-icon),:host([size=xl][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left]) ::slotted(auro-icon),:host([size=xl][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right]) ::slotted(auro-icon),:host([size=xl][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle]) ::slotted(auro-icon),:host([size=xl][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem))}:host([size=xl][shape=circle][variant=primary]) .auro-button:focus,:host([size=xl][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=circle][variant=secondary]) .auro-button:focus,:host([size=xl][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=flat]) .auro-button:focus,:host([size=xl][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=ghost]) .auro-button:focus,:host([size=xl][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square]) ::slotted(auro-icon),:host([size=xl][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem))}:host([size=xl][shape=square][variant=primary]) .auro-button:focus,:host([size=xl][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=square][variant=secondary]) .auro-button:focus,:host([size=xl][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=flat]) .auro-button:focus,:host([size=xl][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=ghost]) .auro-button:focus,:host([size=xl][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs]) .inset{padding-inline:var(--ds-size-150, 0.75rem)}:host([fluid]){display:block}:host([fluid]) .auro-button{width:calc(100% - var(--ds-size-150, 0.75rem)*2)}:host([size=sm]) .inset{padding-inline:var(--ds-size-200, 1rem)}:host([fluid]){display:block}:host([fluid]) .auro-button{width:calc(100% - var(--ds-size-200, 1rem)*2)}:host([size=md]) .inset{padding-inline:var(--ds-size-300, 1.5rem)}:host([fluid]){display:block}:host([fluid]) .auro-button{width:calc(100% - var(--ds-size-300, 1.5rem)*2)}:host([size=lg]) .inset{padding-inline:var(--ds-size-400, 2rem)}:host([fluid]){display:block}:host([fluid]) .auro-button{width:calc(100% - var(--ds-size-400, 2rem)*2)}:host([size=xl]) .inset{padding-inline:var(--ds-size-500, 2.5rem)}:host([fluid]){display:block}:host([fluid]) .auro-button{width:calc(100% - var(--ds-size-500, 2.5rem)*2)}:host([shape=circle]) ::slotted(:not(auro-icon):not([auro-icon])){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host([shape=square]) ::slotted(:not(auro-icon):not([auro-icon])){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host([variant=flat]){display:inline-block}::slotted(svg){vertical-align:middle}slot{pointer-events:none}:host{display:inline-block;overflow:hidden}.auro-button{position:relative;cursor:pointer;padding:0 var(--ds-size-300, 1.5rem);padding-inline:unset;padding-block:unset;box-sizing:content-box;overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;outline:none;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none;transition:padding 300ms ease-out}.auro-button:focus,.auro-button:focus-visible{outline:none}.auro-button:active{transform:scale(0.95)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}`;
|
|
6943
|
+
|
|
6944
|
+
var colorCss$2 = css`[auro-loader]{color:var(--ds-auro-button-loader-color, #ffffff)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible{outline-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-hover, #00274a)}.auro-button:not([ondark]):disabled{--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-disabled, #acc9e2)}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border, #01426a);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-secondary-text, #01426a)}.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-hover, #00274a);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-hover, #00274a)}.auro-button:not([ondark])[variant=secondary]:focus,.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-disabled, #cfe0ef);--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-tertiary-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-tertiary-text, #01426a)}.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-border-color: transparent}.auro-button:not([ondark])[variant=tertiary]:focus,.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=ghost]{--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-ghost-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-ghost-text, #01426a)}.auro-button:not([ondark])[variant=ghost]:active:not(:disabled),.auro-button:not([ondark])[variant=ghost]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, 0.05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, 0.05));--ds-auro-button-border-color: transparent}.auro-button:not([ondark])[variant=ghost]:focus,.auro-button:not([ondark])[variant=ghost]:focus-visible{border-color:transparent;--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=ghost]:disabled{--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-advanced-color-button-flat-text, #676767);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-hover, #525252);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-advanced-color-button-flat-text-disabled, #d0d0d0);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:focus,.auro-button:not([ondark])[variant=flat]:focus-visible{--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}.auro-button[ondark]{--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a)}.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-hover, #ebf3f9);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9)}.auro-button[ondark]:focus,.auro-button[ondark]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}.auro-button[ondark]:disabled{--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-inverse, #ffffff);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff)}.auro-button[ondark][variant=secondary]:active:not(:disabled),.auro-button[ondark][variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, 0.1));--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, 0.1))}.auro-button[ondark][variant=secondary]:focus,.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-inverse-disabled, #dddddd)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff)}.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1))}.auro-button[ondark][variant=tertiary]:focus,.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=ghost]{--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-ghost-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-ghost-text-inverse, #ffffff)}.auro-button[ondark][variant=ghost]:active:not(:disabled),.auro-button[ondark][variant=ghost]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, 0.05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, 0.05));--ds-auro-button-border-color: transparent}.auro-button[ondark][variant=ghost]:focus,.auro-button[ondark][variant=ghost]:focus-visible{border-color:transparent;--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=ghost]:disabled{--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=flat]{color:var(--ds-advanced-color-button-flat-text-inverse, #ffffff);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-inverse-hover, #adadad);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-advanced-color-button-flat-text-inverse-disabled, #7e8894);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:focus,.auro-button[ondark][variant=flat]:focus-visible{--ds-auro-button-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}`;
|
|
6945
|
+
|
|
6946
|
+
var tokensCss$2 = css`:host(:not([onDark])){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-tap-color: transparent}:host([onDark]){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-tap-color: transparent}`;
|
|
6947
|
+
|
|
6948
|
+
var shapeSize = css`.shape-rounded-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-rounded-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-rounded-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-circle-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:50%;min-width:72px;max-width:72px;padding:0}.shape-circle-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-circle-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-circle-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-square-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:6px;min-width:72px;max-width:72px;padding:0}.shape-square-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-square-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-square-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:28px}.shape-pill-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-left-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:28px 0 0 28px}.shape-pill-left-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-left-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-left-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-right-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:0 28px 28px 0}.shape-pill-right-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-right-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-right-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-circle-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:50%;min-width:56px;max-width:56px;padding:0}.shape-circle-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-circle-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-circle-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-square-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:6px;min-width:56px;max-width:56px;padding:0}.shape-square-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-square-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-square-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-rounded-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-rounded-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-rounded-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:24px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:24px 0 0 24px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:0 24px 24px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-circle-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:50%;min-width:48px;max-width:48px;padding:0}.shape-circle-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-circle-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-circle-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-square-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:6px;min-width:48px;max-width:48px;padding:0}.shape-square-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-square-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-square-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-rounded-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-rounded-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-rounded-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:18px}.shape-pill-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-left-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:18px 0 0 18px}.shape-pill-left-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-left-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-left-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-right-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:0 18px 18px 0}.shape-pill-right-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-right-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-right-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-circle-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:50%;min-width:36px;max-width:36px;padding:0}.shape-circle-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-circle-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-circle-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-square-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:6px;min-width:36px;max-width:36px;padding:0}.shape-square-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-square-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-square-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-rounded-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:4px}.shape-rounded-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-rounded-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-rounded-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:12px}.shape-pill-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-left-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:12px 0 0 12px}.shape-pill-left-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-left-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-left-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-right-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:0 12px 12px 0}.shape-pill-right-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-right-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-right-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-circle-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:50%;min-width:24px;max-width:24px;padding:0}.shape-circle-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-circle-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-circle-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-square-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:6px;min-width:24px;max-width:24px;padding:0}.shape-square-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-square-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-square-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}`;
|
|
6949
|
+
|
|
6950
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
6951
|
+
// See LICENSE in the project root for license information.
|
|
6952
|
+
|
|
6953
|
+
// ---------------------------------------------------------------------
|
|
6954
|
+
|
|
6955
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
6956
|
+
|
|
6957
|
+
let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
6958
|
+
|
|
6959
|
+
/* eslint-disable jsdoc/require-param */
|
|
6960
|
+
|
|
6961
|
+
/**
|
|
6962
|
+
* This will register a new custom element with the browser.
|
|
6963
|
+
* @param {String} name - The name of the custom element.
|
|
6964
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
6965
|
+
* @returns {void}
|
|
6966
|
+
*/
|
|
6967
|
+
registerComponent(name, componentClass) {
|
|
6968
|
+
if (!customElements.get(name)) {
|
|
6969
|
+
customElements.define(name, class extends componentClass {});
|
|
6970
|
+
}
|
|
6971
|
+
}
|
|
6972
|
+
|
|
6973
|
+
/**
|
|
6974
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
6975
|
+
* @returns {void}
|
|
6976
|
+
*/
|
|
6977
|
+
closestElement(
|
|
6978
|
+
selector, // selector like in .closest()
|
|
6979
|
+
base = this, // extra functionality to skip a parent
|
|
6980
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
6981
|
+
!el || el === document || el === window
|
|
6982
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
6983
|
+
: found
|
|
6984
|
+
? found // found a selector INside this element
|
|
6985
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
6986
|
+
) {
|
|
6987
|
+
return __Closest(base);
|
|
6988
|
+
}
|
|
6989
|
+
/* eslint-enable jsdoc/require-param */
|
|
6990
|
+
|
|
6991
|
+
/**
|
|
6992
|
+
* If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
|
|
6993
|
+
* @param {Object} elem - The element to check.
|
|
6994
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
6995
|
+
* @returns {void}
|
|
6996
|
+
*/
|
|
6997
|
+
handleComponentTagRename(elem, tagName) {
|
|
6998
|
+
const tag = tagName.toLowerCase();
|
|
6999
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
7000
|
+
|
|
7001
|
+
if (elemTag !== tag) {
|
|
7002
|
+
elem.setAttribute(tag, true);
|
|
7003
|
+
}
|
|
7004
|
+
}
|
|
7005
|
+
|
|
7006
|
+
/**
|
|
7007
|
+
* Validates if an element is a specific Auro component.
|
|
7008
|
+
* @param {Object} elem - The element to validate.
|
|
7009
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
7010
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
7011
|
+
*/
|
|
7012
|
+
elementMatch(elem, tagName) {
|
|
7013
|
+
const tag = tagName.toLowerCase();
|
|
7014
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
7015
|
+
|
|
7016
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
7017
|
+
}
|
|
7018
|
+
};
|
|
7019
|
+
|
|
7020
|
+
var styleCss$1 = css`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.63)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.88)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3)}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin:0.375rem;--margin-xs:0.2rem;--margin-sm:0.5rem;--margin-md:0.75rem;--margin-lg:1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}`;
|
|
7021
|
+
|
|
7022
|
+
var colorCss$1 = css`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color:var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]){--ds-auro-loader-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color:transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color:currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color:currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
|
|
7023
|
+
|
|
7024
|
+
var tokensCss$1 = css`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
|
|
7025
|
+
|
|
7026
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
7027
|
+
// See LICENSE in the project root for license information.
|
|
7028
|
+
|
|
7029
|
+
|
|
7030
|
+
class AuroLoader extends LitElement {
|
|
7031
|
+
constructor() {
|
|
7032
|
+
super();
|
|
7033
|
+
|
|
7034
|
+
/**
|
|
7035
|
+
* @private
|
|
7036
|
+
*/
|
|
7037
|
+
this.keys = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
|
|
7038
|
+
|
|
7039
|
+
/**
|
|
7040
|
+
* @private
|
|
7041
|
+
*/
|
|
7042
|
+
this.mdCount = 3;
|
|
7043
|
+
|
|
7044
|
+
/**
|
|
7045
|
+
* @private
|
|
7046
|
+
*/
|
|
7047
|
+
this.smCount = 2;
|
|
7048
|
+
|
|
7049
|
+
/**
|
|
7050
|
+
* @private
|
|
7051
|
+
*/
|
|
7052
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
|
|
7053
|
+
|
|
7054
|
+
this.orbit = false;
|
|
7055
|
+
this.ringworm = false;
|
|
7056
|
+
this.laser = false;
|
|
7057
|
+
this.pulse = false;
|
|
7058
|
+
}
|
|
7059
|
+
|
|
7060
|
+
// function to define props used within the scope of this component
|
|
7061
|
+
static get properties() {
|
|
7062
|
+
return {
|
|
7063
|
+
|
|
7064
|
+
/**
|
|
7065
|
+
* Sets loader to laser type.
|
|
7066
|
+
*/
|
|
7067
|
+
laser: {
|
|
7068
|
+
type: Boolean,
|
|
7069
|
+
reflect: true
|
|
7070
|
+
},
|
|
7071
|
+
|
|
7072
|
+
/**
|
|
7073
|
+
* Sets loader to orbit type.
|
|
7074
|
+
*/
|
|
7075
|
+
orbit: {
|
|
7076
|
+
type: Boolean,
|
|
7077
|
+
reflect: true
|
|
7078
|
+
},
|
|
7079
|
+
|
|
7080
|
+
/**
|
|
7081
|
+
* Sets loader to pulse type.
|
|
7082
|
+
*/
|
|
7083
|
+
pulse: {
|
|
7084
|
+
type: Boolean,
|
|
7085
|
+
reflect: true
|
|
7086
|
+
},
|
|
7087
|
+
|
|
7088
|
+
/**
|
|
7089
|
+
* Sets loader to ringworm type.
|
|
7090
|
+
*/
|
|
7091
|
+
ringworm: {
|
|
7092
|
+
type: Boolean,
|
|
7093
|
+
reflect: true
|
|
7094
|
+
}
|
|
7095
|
+
};
|
|
7096
|
+
}
|
|
7097
|
+
|
|
7098
|
+
static get styles() {
|
|
7099
|
+
return [
|
|
7100
|
+
css`${styleCss$1}`,
|
|
7101
|
+
css`${colorCss$1}`,
|
|
7102
|
+
css`${tokensCss$1}`
|
|
7103
|
+
];
|
|
7104
|
+
}
|
|
7105
|
+
|
|
7106
|
+
/**
|
|
7107
|
+
* This will register this element with the browser.
|
|
7108
|
+
* @param {string} [name="auro-loader"] - The name of element that you want to register to.
|
|
7109
|
+
*
|
|
7110
|
+
* @example
|
|
7111
|
+
* AuroLoader.register("custom-loader") // this will register this element to <custom-loader/>
|
|
7112
|
+
*
|
|
7113
|
+
*/
|
|
7114
|
+
static register(name = "auro-loader") {
|
|
7115
|
+
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroLoader);
|
|
7116
|
+
}
|
|
7117
|
+
|
|
7118
|
+
firstUpdated() {
|
|
7119
|
+
// Add the tag name as an attribute if it is different than the component name
|
|
7120
|
+
this.runtimeUtils.handleComponentTagRename(this, 'auro-loader');
|
|
7121
|
+
}
|
|
7122
|
+
|
|
7123
|
+
connectedCallback() {
|
|
7124
|
+
super.connectedCallback();
|
|
7125
|
+
}
|
|
7126
|
+
|
|
7127
|
+
/**
|
|
7128
|
+
* @private
|
|
6535
7129
|
* @returns {Array} Numbered array for template map.
|
|
6536
7130
|
*/
|
|
6537
7131
|
defineTemplate() {
|
|
@@ -6556,7 +7150,7 @@ class AuroLoader extends LitElement {
|
|
|
6556
7150
|
<span part="element" class="loader node-${idx}"></span>
|
|
6557
7151
|
`)}
|
|
6558
7152
|
|
|
6559
|
-
<div class="no-animation">Loading...</div>
|
|
7153
|
+
<div class="no-animation body-default">Loading...</div>
|
|
6560
7154
|
|
|
6561
7155
|
${this.ringworm ? html`
|
|
6562
7156
|
<svg part="element" class="circular" viewBox="25 25 50 50">
|
|
@@ -6568,25 +7162,32 @@ class AuroLoader extends LitElement {
|
|
|
6568
7162
|
}
|
|
6569
7163
|
}
|
|
6570
7164
|
|
|
6571
|
-
var loaderVersion = '5.
|
|
7165
|
+
var loaderVersion = '5.1.0';
|
|
6572
7166
|
|
|
6573
|
-
/* eslint-disable max-lines */
|
|
6574
7167
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
6575
7168
|
// See LICENSE in the project root for license information.
|
|
6576
7169
|
|
|
6577
7170
|
|
|
6578
7171
|
/**
|
|
6579
7172
|
* @slot - Default slot for the text of the button.
|
|
6580
|
-
* @slot icon - Slot to provide auro-icon for the button.
|
|
6581
7173
|
* @csspart button - Apply CSS to HTML5 button.
|
|
6582
7174
|
* @csspart loader - Apply CSS to auro-loader.
|
|
6583
7175
|
* @csspart text - Apply CSS to text slot.
|
|
6584
7176
|
* @csspart icon - Apply CSS to icon slot.
|
|
6585
7177
|
*/
|
|
6586
7178
|
|
|
6587
|
-
|
|
7179
|
+
const ICON_ONLY_SHAPES = ['circle', 'square'];
|
|
6588
7180
|
|
|
6589
|
-
|
|
7181
|
+
/**
|
|
7182
|
+
* AuroButton is a custom element that provides a styled, accessible button with support for various states and form association.
|
|
7183
|
+
* It is designed to be flexible, supporting loading states, icon slots, and integration with HTML5 forms.
|
|
7184
|
+
* @property {'default', 'rounded', 'pill', 'circle', 'square'} shape - Defines the shape of the button.
|
|
7185
|
+
* @property {'xs', 'sm', 'md', 'lg', 'xl'} size - Defines the size of the button.
|
|
7186
|
+
* @property {'primary', 'secondary', 'tertiary', 'ghost', 'flat'} variant - Sets the button variant.
|
|
7187
|
+
* @property {'submit', 'reset', 'button'} type - The type of button. Matches HTML5 Button Spec.
|
|
7188
|
+
* @property {boolean} onDark - Indicates if the button is rendered in dark mode.
|
|
7189
|
+
*/
|
|
7190
|
+
class AuroButton extends AuroElement {
|
|
6590
7191
|
|
|
6591
7192
|
/**
|
|
6592
7193
|
* Enables form association for this element.
|
|
@@ -6601,15 +7202,13 @@ class AuroButton extends LitElement {
|
|
|
6601
7202
|
super();
|
|
6602
7203
|
this.autofocus = false;
|
|
6603
7204
|
this.disabled = false;
|
|
6604
|
-
this.iconOnly = false;
|
|
6605
7205
|
this.loading = false;
|
|
7206
|
+
this.size = "md";
|
|
7207
|
+
this.shape = "rounded";
|
|
6606
7208
|
this.onDark = false;
|
|
6607
|
-
this.secondary = false;
|
|
6608
|
-
this.tertiary = false;
|
|
6609
|
-
this.rounded = false;
|
|
6610
|
-
this.slim = false;
|
|
6611
7209
|
this.fluid = false;
|
|
6612
7210
|
this.loadingText = this.loadingText || 'Loading...';
|
|
7211
|
+
this.variant = 'primary';
|
|
6613
7212
|
|
|
6614
7213
|
// Support for HTML5 forms
|
|
6615
7214
|
if (typeof this.attachInternals === 'function') {
|
|
@@ -6630,49 +7229,59 @@ class AuroButton extends LitElement {
|
|
|
6630
7229
|
* @private
|
|
6631
7230
|
*/
|
|
6632
7231
|
this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
|
|
7232
|
+
|
|
7233
|
+
/**
|
|
7234
|
+
* @private
|
|
7235
|
+
*/
|
|
7236
|
+
this.buttonHref = undefined;
|
|
7237
|
+
|
|
7238
|
+
/**
|
|
7239
|
+
* @private
|
|
7240
|
+
*/
|
|
7241
|
+
this.buttonTarget = undefined;
|
|
7242
|
+
|
|
7243
|
+
/**
|
|
7244
|
+
* @private
|
|
7245
|
+
*/
|
|
7246
|
+
this.buttonRel = undefined;
|
|
6633
7247
|
}
|
|
6634
7248
|
|
|
6635
7249
|
static get styles() {
|
|
6636
7250
|
return [
|
|
6637
7251
|
tokensCss$2,
|
|
6638
7252
|
styleCss$2,
|
|
6639
|
-
colorCss$2
|
|
7253
|
+
colorCss$2,
|
|
7254
|
+
shapeSize
|
|
6640
7255
|
];
|
|
6641
7256
|
}
|
|
6642
7257
|
|
|
6643
7258
|
static get properties() {
|
|
6644
7259
|
return {
|
|
6645
7260
|
|
|
6646
|
-
|
|
6647
|
-
* This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
|
|
6648
|
-
*/
|
|
6649
|
-
autofocus: {
|
|
6650
|
-
type: Boolean,
|
|
6651
|
-
reflect: true
|
|
6652
|
-
},
|
|
7261
|
+
...super.properties,
|
|
6653
7262
|
|
|
6654
7263
|
/**
|
|
6655
|
-
*
|
|
7264
|
+
* Override layout since it isn't used in this component.
|
|
7265
|
+
* @private
|
|
6656
7266
|
*/
|
|
6657
|
-
|
|
7267
|
+
layout: {
|
|
6658
7268
|
type: Boolean,
|
|
6659
|
-
|
|
7269
|
+
attribute: false,
|
|
7270
|
+
reflect: false
|
|
6660
7271
|
},
|
|
6661
7272
|
|
|
6662
7273
|
/**
|
|
6663
|
-
*
|
|
6664
|
-
* @deprecated
|
|
7274
|
+
* This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
|
|
6665
7275
|
*/
|
|
6666
|
-
|
|
7276
|
+
autofocus: {
|
|
6667
7277
|
type: Boolean,
|
|
6668
7278
|
reflect: true
|
|
6669
7279
|
},
|
|
6670
7280
|
|
|
6671
7281
|
/**
|
|
6672
|
-
*
|
|
6673
|
-
* @deprecated
|
|
7282
|
+
* If set to true, button will become disabled and not allow for interactions.
|
|
6674
7283
|
*/
|
|
6675
|
-
|
|
7284
|
+
disabled: {
|
|
6676
7285
|
type: Boolean,
|
|
6677
7286
|
reflect: true
|
|
6678
7287
|
},
|
|
@@ -6680,15 +7289,7 @@ class AuroButton extends LitElement {
|
|
|
6680
7289
|
/**
|
|
6681
7290
|
* Alters the shape of the button to be full width of its parent container.
|
|
6682
7291
|
*/
|
|
6683
|
-
fluid:
|
|
6684
|
-
type: Boolean,
|
|
6685
|
-
reflect: true
|
|
6686
|
-
},
|
|
6687
|
-
|
|
6688
|
-
/**
|
|
6689
|
-
* If set to true, the button will contain an icon with no additional content.
|
|
6690
|
-
*/
|
|
6691
|
-
iconOnly: {
|
|
7292
|
+
fluid: {
|
|
6692
7293
|
type: Boolean,
|
|
6693
7294
|
reflect: true
|
|
6694
7295
|
},
|
|
@@ -6696,7 +7297,7 @@ class AuroButton extends LitElement {
|
|
|
6696
7297
|
/**
|
|
6697
7298
|
* If set to true button text will be replaced with `auro-loader` and become disabled.
|
|
6698
7299
|
*/
|
|
6699
|
-
loading:
|
|
7300
|
+
loading: {
|
|
6700
7301
|
type: Boolean,
|
|
6701
7302
|
reflect: true
|
|
6702
7303
|
},
|
|
@@ -6704,36 +7305,12 @@ class AuroButton extends LitElement {
|
|
|
6704
7305
|
/**
|
|
6705
7306
|
* Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used.
|
|
6706
7307
|
*/
|
|
6707
|
-
loadingText:
|
|
7308
|
+
loadingText: {
|
|
6708
7309
|
type: String
|
|
6709
7310
|
},
|
|
6710
7311
|
|
|
6711
7312
|
/**
|
|
6712
|
-
*
|
|
6713
|
-
*/
|
|
6714
|
-
onDark: {
|
|
6715
|
-
type: Boolean,
|
|
6716
|
-
reflect: true
|
|
6717
|
-
},
|
|
6718
|
-
|
|
6719
|
-
/**
|
|
6720
|
-
* If set to true, the button will have a rounded shape.
|
|
6721
|
-
*/
|
|
6722
|
-
rounded: {
|
|
6723
|
-
type: Boolean,
|
|
6724
|
-
reflect: true
|
|
6725
|
-
},
|
|
6726
|
-
|
|
6727
|
-
/**
|
|
6728
|
-
* Set value for slim version of auro-button.
|
|
6729
|
-
*/
|
|
6730
|
-
slim: {
|
|
6731
|
-
type: Boolean,
|
|
6732
|
-
reflect: true
|
|
6733
|
-
},
|
|
6734
|
-
|
|
6735
|
-
/**
|
|
6736
|
-
* Populates `tabIndex` to define the focusable sequence in keyboard navigation.
|
|
7313
|
+
* Populates `tabindex` to define the focusable sequence in keyboard navigation.
|
|
6737
7314
|
*/
|
|
6738
7315
|
tIndex: {
|
|
6739
7316
|
type: String,
|
|
@@ -6741,75 +7318,68 @@ class AuroButton extends LitElement {
|
|
|
6741
7318
|
},
|
|
6742
7319
|
|
|
6743
7320
|
/**
|
|
6744
|
-
* Populates
|
|
7321
|
+
* Populates `tabindex` to define the focusable sequence in keyboard navigation.
|
|
7322
|
+
* Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
|
|
7323
|
+
* Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`.
|
|
6745
7324
|
*/
|
|
6746
|
-
|
|
7325
|
+
tabindex: {
|
|
6747
7326
|
type: String,
|
|
6748
|
-
reflect:
|
|
7327
|
+
reflect: false
|
|
6749
7328
|
},
|
|
6750
7329
|
|
|
6751
7330
|
/**
|
|
6752
|
-
*
|
|
6753
|
-
* Use it in cases where a text label is not visible on the screen.
|
|
6754
|
-
* If there is visible text labeling the element, use `aria-labelledby` instead.
|
|
7331
|
+
* Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
|
|
6755
7332
|
*/
|
|
6756
|
-
|
|
7333
|
+
title: {
|
|
6757
7334
|
type: String,
|
|
6758
7335
|
reflect: true
|
|
6759
7336
|
},
|
|
6760
7337
|
|
|
6761
7338
|
/**
|
|
6762
|
-
*
|
|
6763
|
-
* and its value should be one or more element IDs, which refer to elements that have the text needed for labeling.
|
|
6764
|
-
* List multiple element IDs in a space delimited fashion.
|
|
7339
|
+
* The type of the button. Possible values are: `submit`, `reset`, `button`.
|
|
6765
7340
|
*/
|
|
6766
|
-
|
|
7341
|
+
type: {
|
|
6767
7342
|
type: String,
|
|
6768
7343
|
reflect: true
|
|
6769
7344
|
},
|
|
6770
7345
|
|
|
6771
7346
|
/**
|
|
6772
|
-
*
|
|
6773
|
-
* or another grouping element it controls, is currently expanded or collapsed.
|
|
6774
|
-
* This is an optional attribute for buttons.
|
|
7347
|
+
* Defines the value associated with the button which is submitted with the form data.
|
|
6775
7348
|
*/
|
|
6776
|
-
|
|
6777
|
-
type:
|
|
7349
|
+
value: {
|
|
7350
|
+
type: String,
|
|
6778
7351
|
reflect: true
|
|
6779
7352
|
},
|
|
6780
7353
|
|
|
6781
7354
|
/**
|
|
6782
|
-
* Sets
|
|
7355
|
+
* Sets button variant option.
|
|
7356
|
+
* @default primary
|
|
6783
7357
|
*/
|
|
6784
|
-
|
|
7358
|
+
variant: {
|
|
6785
7359
|
type: String,
|
|
6786
7360
|
reflect: true
|
|
6787
7361
|
},
|
|
6788
7362
|
|
|
6789
7363
|
/**
|
|
6790
|
-
*
|
|
7364
|
+
* @private
|
|
6791
7365
|
*/
|
|
6792
|
-
|
|
7366
|
+
buttonHref: {
|
|
6793
7367
|
type: String,
|
|
6794
|
-
reflect: true
|
|
6795
7368
|
},
|
|
6796
7369
|
|
|
6797
7370
|
/**
|
|
6798
|
-
*
|
|
7371
|
+
* @private
|
|
6799
7372
|
*/
|
|
6800
|
-
|
|
7373
|
+
buttonTarget: {
|
|
6801
7374
|
type: String,
|
|
6802
|
-
reflect: true
|
|
6803
7375
|
},
|
|
6804
7376
|
|
|
6805
7377
|
/**
|
|
6806
|
-
*
|
|
7378
|
+
* @private
|
|
6807
7379
|
*/
|
|
6808
|
-
|
|
7380
|
+
buttonRel: {
|
|
6809
7381
|
type: String,
|
|
6810
|
-
reflect: true
|
|
6811
7382
|
},
|
|
6812
|
-
ready: { type: Boolean },
|
|
6813
7383
|
};
|
|
6814
7384
|
}
|
|
6815
7385
|
|
|
@@ -6822,7 +7392,7 @@ class AuroButton extends LitElement {
|
|
|
6822
7392
|
*
|
|
6823
7393
|
*/
|
|
6824
7394
|
static register(name = "auro-button") {
|
|
6825
|
-
AuroLibraryRuntimeUtils$
|
|
7395
|
+
AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroButton);
|
|
6826
7396
|
}
|
|
6827
7397
|
|
|
6828
7398
|
/**
|
|
@@ -6834,17 +7404,6 @@ class AuroButton extends LitElement {
|
|
|
6834
7404
|
this.renderRoot.querySelector('button').focus();
|
|
6835
7405
|
}
|
|
6836
7406
|
|
|
6837
|
-
updated() {
|
|
6838
|
-
// support the old `secondary` and `tertiary` attributes` that are deprecated
|
|
6839
|
-
if (this.secondary) {
|
|
6840
|
-
this.setAttribute('variant', 'secondary');
|
|
6841
|
-
}
|
|
6842
|
-
|
|
6843
|
-
if (this.tertiary) {
|
|
6844
|
-
this.setAttribute('variant', 'tertiary');
|
|
6845
|
-
}
|
|
6846
|
-
}
|
|
6847
|
-
|
|
6848
7407
|
/**
|
|
6849
7408
|
* Submits the form that this button is associated with.
|
|
6850
7409
|
* @private
|
|
@@ -6865,28 +7424,115 @@ class AuroButton extends LitElement {
|
|
|
6865
7424
|
return this.internals ? this.internals.form : null;
|
|
6866
7425
|
}
|
|
6867
7426
|
|
|
6868
|
-
|
|
7427
|
+
/**
|
|
7428
|
+
* @private
|
|
7429
|
+
* @returns {Boolean}
|
|
7430
|
+
*/
|
|
7431
|
+
get showText() {
|
|
7432
|
+
return !ICON_ONLY_SHAPES.includes(this.shape);
|
|
7433
|
+
}
|
|
7434
|
+
|
|
7435
|
+
/**
|
|
7436
|
+
* Returns the current value of the projected `aria-label` attribute or undefined if not set.
|
|
7437
|
+
* @returns {string | undefined}
|
|
7438
|
+
* @private
|
|
7439
|
+
*/
|
|
7440
|
+
get currentAriaLabel() {
|
|
7441
|
+
if (!this.attributeWatcher) return undefined;
|
|
7442
|
+
|
|
7443
|
+
const ariaLabel = this.attributeWatcher.getObservedAttribute("aria-label");
|
|
7444
|
+
return ariaLabel || undefined;
|
|
7445
|
+
}
|
|
7446
|
+
|
|
7447
|
+
/**
|
|
7448
|
+
* Returns the current value of the projected `aria-labelledby` attribute or undefined if not set.
|
|
7449
|
+
* @returns {string | undefined}
|
|
7450
|
+
* @private
|
|
7451
|
+
*/
|
|
7452
|
+
get currentAriaLabelledBy() {
|
|
7453
|
+
if (!this.attributeWatcher) return undefined;
|
|
7454
|
+
|
|
7455
|
+
const ariaLabelledBy = this.attributeWatcher.getObservedAttribute("aria-labelledby");
|
|
7456
|
+
return ariaLabelledBy || undefined;
|
|
7457
|
+
}
|
|
7458
|
+
|
|
7459
|
+
/**
|
|
7460
|
+
* Whether or not the button is set to an icon-only shape.
|
|
7461
|
+
* @returns {boolean} - True if the button is icon-only, false otherwise.
|
|
7462
|
+
* @private
|
|
7463
|
+
*/
|
|
7464
|
+
get iconOnly() {
|
|
7465
|
+
return ICON_ONLY_SHAPES.includes(this.shape);
|
|
7466
|
+
}
|
|
7467
|
+
|
|
7468
|
+
/**
|
|
7469
|
+
* Gets a class name for the font size based on the button's size and shape.
|
|
7470
|
+
* @returns {string} - The font size class name.
|
|
7471
|
+
* @private
|
|
7472
|
+
*/
|
|
7473
|
+
getFontSize() {
|
|
7474
|
+
|
|
7475
|
+
// Size map for standard buttons
|
|
7476
|
+
const standardButtonSizeMap = {
|
|
7477
|
+
xs: 'body-xs',
|
|
7478
|
+
sm: 'body-sm',
|
|
7479
|
+
md: 'body-default',
|
|
7480
|
+
lg: 'body-lg',
|
|
7481
|
+
xl: 'body-lg'
|
|
7482
|
+
};
|
|
7483
|
+
|
|
7484
|
+
// Size map for icon-only buttons
|
|
7485
|
+
const iconOnlyButtonSizeMap = {
|
|
7486
|
+
xs: 'heading-xs',
|
|
7487
|
+
sm: 'heading-sm',
|
|
7488
|
+
md: 'heading-sm',
|
|
7489
|
+
lg: 'heading-md',
|
|
7490
|
+
xl: 'heading-lg'
|
|
7491
|
+
};
|
|
7492
|
+
|
|
7493
|
+
// Determine which map to use based on the shape
|
|
7494
|
+
const sizeMap = this.iconOnly ? iconOnlyButtonSizeMap : standardButtonSizeMap;
|
|
7495
|
+
|
|
7496
|
+
// Return the font size based on the button size and shape
|
|
7497
|
+
return sizeMap[this.size] || 'body-default';
|
|
7498
|
+
}
|
|
7499
|
+
|
|
7500
|
+
/**
|
|
7501
|
+
* Renders the default layout for the button.
|
|
7502
|
+
* @returns {TemplateResult}
|
|
7503
|
+
* @private
|
|
7504
|
+
*/
|
|
7505
|
+
renderLayoutDefault() {
|
|
7506
|
+
|
|
7507
|
+
const fontSize = this.getFontSize();
|
|
7508
|
+
const tag = this.buttonHref ? literal`a` : literal`button`;
|
|
7509
|
+
const part = this.buttonHref ? 'link' : 'button';
|
|
7510
|
+
|
|
6869
7511
|
const classes = {
|
|
6870
|
-
|
|
6871
|
-
|
|
6872
|
-
|
|
6873
|
-
|
|
6874
|
-
|
|
6875
|
-
|
|
6876
|
-
|
|
6877
|
-
'
|
|
7512
|
+
"auro-button": true,
|
|
7513
|
+
"inset": this.showText,
|
|
7514
|
+
wrapper: true,
|
|
7515
|
+
loading: this.loading,
|
|
7516
|
+
[`${fontSize}`]: true,
|
|
7517
|
+
|
|
7518
|
+
// These remove the default borders so we can handle focus borders ourselves
|
|
7519
|
+
'simple': !['secondary'].includes(this.variant),
|
|
7520
|
+
'thin': ['secondary'].includes(this.variant),
|
|
7521
|
+
};
|
|
7522
|
+
|
|
7523
|
+
const contentClasses = {
|
|
7524
|
+
"contentWrapper": true,
|
|
7525
|
+
"util_displayHiddenVisually": this.loading
|
|
6878
7526
|
};
|
|
6879
7527
|
|
|
6880
7528
|
return html$1`
|
|
6881
|
-
|
|
6882
|
-
part="
|
|
6883
|
-
aria-
|
|
6884
|
-
aria-
|
|
6885
|
-
|
|
6886
|
-
aria-expanded="${ifDefined(this.ariaexpanded)}"
|
|
6887
|
-
tabIndex="${ifDefined(this.tIndex)}"
|
|
7529
|
+
<${tag}
|
|
7530
|
+
part="${part}"
|
|
7531
|
+
aria-label="${ifDefined(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
|
|
7532
|
+
aria-labelledby="${ifDefined(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
|
|
7533
|
+
tabindex="${ifDefined(this.tIndex || this.tabindex)}"
|
|
6888
7534
|
?autofocus="${this.autofocus}"
|
|
6889
|
-
class
|
|
7535
|
+
class=${classMap(classes)}
|
|
6890
7536
|
?disabled="${this.disabled || this.loading}"
|
|
6891
7537
|
?onDark="${this.onDark}"
|
|
6892
7538
|
title="${ifDefined(this.title ? this.title : undefined)}"
|
|
@@ -6895,28 +7541,36 @@ class AuroButton extends LitElement {
|
|
|
6895
7541
|
variant="${ifDefined(this.variant ? this.variant : undefined)}"
|
|
6896
7542
|
.value="${ifDefined(this.value ? this.value : undefined)}"
|
|
6897
7543
|
@click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
|
|
7544
|
+
href="${ifDefined(this.buttonHref || undefined)}"
|
|
7545
|
+
target="${ifDefined(this.buttonTarget || undefined)}"
|
|
7546
|
+
rel="${ifDefined(this.buttonRel || undefined)}"
|
|
6898
7547
|
>
|
|
6899
7548
|
${ifDefined(this.loading ? html$1`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
|
|
6900
7549
|
|
|
6901
|
-
<span class="
|
|
7550
|
+
<span class="${classMap(contentClasses)}">
|
|
6902
7551
|
<span class="textSlot" part="text">
|
|
6903
|
-
|
|
6904
|
-
</span>
|
|
6905
|
-
|
|
6906
|
-
<span part="icon">
|
|
6907
|
-
<slot name="icon"></slot>
|
|
7552
|
+
<slot></slot>
|
|
6908
7553
|
</span>
|
|
6909
7554
|
</span>
|
|
6910
|
-
|
|
7555
|
+
</${tag}>
|
|
6911
7556
|
`;
|
|
6912
7557
|
}
|
|
7558
|
+
|
|
7559
|
+
/**
|
|
7560
|
+
* Renders the layout of the button.
|
|
7561
|
+
* @returns {TemplateResult}
|
|
7562
|
+
* @private
|
|
7563
|
+
*/
|
|
7564
|
+
renderLayout() {
|
|
7565
|
+
return this.renderLayoutDefault();
|
|
7566
|
+
}
|
|
6913
7567
|
}
|
|
6914
7568
|
|
|
6915
|
-
var buttonVersion = '
|
|
7569
|
+
var buttonVersion = '11.0.0';
|
|
6916
7570
|
|
|
6917
|
-
var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-
|
|
7571
|
+
var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
6918
7572
|
|
|
6919
|
-
var styleCss = css`.
|
|
7573
|
+
var styleCss = css`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.63)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.88)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{position:relative;display:block}.helptext-wrapper{display:none}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
6920
7574
|
|
|
6921
7575
|
var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
6922
7576
|
|
|
@@ -6996,8 +7650,6 @@ class AuroLibraryRuntimeUtils {
|
|
|
6996
7650
|
|
|
6997
7651
|
/**
|
|
6998
7652
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
6999
|
-
*
|
|
7000
|
-
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
7001
7653
|
*/
|
|
7002
7654
|
class AuroHelpText extends LitElement {
|
|
7003
7655
|
|
|
@@ -7113,7 +7765,7 @@ class AuroHelpText extends LitElement {
|
|
|
7113
7765
|
// function that renders the HTML and CSS into the scope of the component
|
|
7114
7766
|
render() {
|
|
7115
7767
|
return html`
|
|
7116
|
-
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
7768
|
+
<div class="helptext-wrapper body-xs" ?visible="${this.hasTextContent}">
|
|
7117
7769
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
7118
7770
|
</div>
|
|
7119
7771
|
`;
|
|
@@ -7173,26 +7825,93 @@ class AuroInput extends BaseInput {
|
|
|
7173
7825
|
];
|
|
7174
7826
|
}
|
|
7175
7827
|
|
|
7828
|
+
/**
|
|
7829
|
+
* Whether the input is being hidden currently based on state.
|
|
7830
|
+
* @returns {boolean} - Returns true if the input is hidden.
|
|
7831
|
+
* @private
|
|
7832
|
+
*/
|
|
7833
|
+
get inputHidden() {
|
|
7834
|
+
return (this.hasDisplayValueContent && !this.hasFocus && this.hasValue) || ((!this.value || this.value.length === 0) && !this.hasFocus && (!this.placeholder || this.placeholder === ''));
|
|
7835
|
+
}
|
|
7836
|
+
|
|
7837
|
+
/**
|
|
7838
|
+
* Whether the label is being hidden currently based on state.
|
|
7839
|
+
* @returns {boolean} - Returns true if the label is hidden.
|
|
7840
|
+
* @private
|
|
7841
|
+
*/
|
|
7842
|
+
get labelHidden() {
|
|
7843
|
+
return this.hasDisplayValueContent && !this.hasFocus && this.hasValue;
|
|
7844
|
+
}
|
|
7845
|
+
|
|
7846
|
+
/**
|
|
7847
|
+
* Returns the label font class based on layout and visibility state.
|
|
7848
|
+
* @private
|
|
7849
|
+
* @returns {string} - The font class for the label.
|
|
7850
|
+
*/
|
|
7851
|
+
get labelFontClass() {
|
|
7852
|
+
const isHidden = this.inputHidden;
|
|
7853
|
+
|
|
7854
|
+
if (this.layout.startsWith('emphasized')) {
|
|
7855
|
+
return isHidden ? 'accent-xl' : 'body-sm';
|
|
7856
|
+
}
|
|
7857
|
+
|
|
7858
|
+
if (this.layout === 'snowflake') {
|
|
7859
|
+
return isHidden ? 'body-lg' : 'body-xs';
|
|
7860
|
+
}
|
|
7861
|
+
|
|
7862
|
+
// classic layout (default)
|
|
7863
|
+
return isHidden ? 'body-default' : 'body-xs';
|
|
7864
|
+
}
|
|
7865
|
+
|
|
7866
|
+
/**
|
|
7867
|
+
* Returns the input font class based on layout and visibility state.
|
|
7868
|
+
* @private
|
|
7869
|
+
* @returns {string} - The font class for the input.
|
|
7870
|
+
*/
|
|
7871
|
+
get inputFontClass() {
|
|
7872
|
+
const isHidden = this.inputHidden;
|
|
7873
|
+
|
|
7874
|
+
if (this.layout.startsWith('emphasized')) {
|
|
7875
|
+
return isHidden ? 'body-sm' : 'accent-xl';
|
|
7876
|
+
}
|
|
7877
|
+
|
|
7878
|
+
if (this.layout === 'snowflake') {
|
|
7879
|
+
// same for both hidden and visible
|
|
7880
|
+
return 'body-lg';
|
|
7881
|
+
}
|
|
7882
|
+
|
|
7883
|
+
// edge case for enabling visual overrides in datepicker
|
|
7884
|
+
if (this.layout === 'classic' && this.shape === 'snowflake') {
|
|
7885
|
+
return 'body-lg';
|
|
7886
|
+
}
|
|
7887
|
+
|
|
7888
|
+
// classic layout (default) - same for both hidden and visible
|
|
7889
|
+
return 'body-default';
|
|
7890
|
+
}
|
|
7891
|
+
|
|
7176
7892
|
/**
|
|
7177
7893
|
* Returns classmap configuration for html5 input labels in all layouts.
|
|
7178
7894
|
* @private
|
|
7179
|
-
* @returns {
|
|
7895
|
+
* @returns {Record<string, boolean>}
|
|
7180
7896
|
*/
|
|
7181
7897
|
get commonLabelClasses() {
|
|
7182
7898
|
return {
|
|
7183
|
-
'
|
|
7184
|
-
'
|
|
7899
|
+
'is-disabled': this.disabled,
|
|
7900
|
+
'withValue': this.hasValue,
|
|
7901
|
+
'util_displayHiddenVisually': this.labelHidden,
|
|
7902
|
+
[this.labelFontClass]: true,
|
|
7185
7903
|
};
|
|
7186
7904
|
}
|
|
7187
7905
|
|
|
7188
7906
|
/**
|
|
7189
7907
|
* Returns classmap configuration for html5 inputs in all layouts.
|
|
7190
7908
|
* @private
|
|
7191
|
-
* @returns {
|
|
7909
|
+
* @returns {Record<string, boolean>} - Returns classmap.
|
|
7192
7910
|
*/
|
|
7193
7911
|
get commonInputClasses() {
|
|
7194
7912
|
return {
|
|
7195
|
-
'util_displayHiddenVisually': this.
|
|
7913
|
+
'util_displayHiddenVisually': this.inputHidden,
|
|
7914
|
+
[this.inputFontClass]: true,
|
|
7196
7915
|
};
|
|
7197
7916
|
}
|
|
7198
7917
|
|
|
@@ -7203,8 +7922,7 @@ class AuroInput extends BaseInput {
|
|
|
7203
7922
|
*/
|
|
7204
7923
|
get legacyInputClasses() {
|
|
7205
7924
|
return {
|
|
7206
|
-
...this.commonInputClasses
|
|
7207
|
-
'util_displayHiddenVisually': !this.hasFocus && !this.value
|
|
7925
|
+
...this.commonInputClasses
|
|
7208
7926
|
};
|
|
7209
7927
|
}
|
|
7210
7928
|
|
|
@@ -7216,7 +7934,8 @@ class AuroInput extends BaseInput {
|
|
|
7216
7934
|
get commonWrapperClasses() {
|
|
7217
7935
|
return {
|
|
7218
7936
|
'wrapper': true,
|
|
7219
|
-
'
|
|
7937
|
+
'simple': this.simple,
|
|
7938
|
+
'withValue': this.hasValue,
|
|
7220
7939
|
'hasFocus': this.hasFocus
|
|
7221
7940
|
};
|
|
7222
7941
|
}
|
|
@@ -7243,7 +7962,7 @@ class AuroInput extends BaseInput {
|
|
|
7243
7962
|
*
|
|
7244
7963
|
*/
|
|
7245
7964
|
static register(name = "auro-input") {
|
|
7246
|
-
AuroLibraryRuntimeUtils$
|
|
7965
|
+
AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroInput);
|
|
7247
7966
|
}
|
|
7248
7967
|
|
|
7249
7968
|
/**
|
|
@@ -7265,7 +7984,12 @@ class AuroInput extends BaseInput {
|
|
|
7265
7984
|
* @returns {void}
|
|
7266
7985
|
*/
|
|
7267
7986
|
checkDisplayValueSlotChange() {
|
|
7268
|
-
|
|
7987
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
7988
|
+
|
|
7989
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
7990
|
+
if (nodes[0].tagName === 'SLOT') {
|
|
7991
|
+
nodes = nodes[0].assignedNodes();
|
|
7992
|
+
}
|
|
7269
7993
|
|
|
7270
7994
|
let hasContent = false;
|
|
7271
7995
|
|
|
@@ -7307,7 +8031,7 @@ class AuroInput extends BaseInput {
|
|
|
7307
8031
|
'displayValue': true,
|
|
7308
8032
|
'hasContent': this.hasDisplayValueContent,
|
|
7309
8033
|
'hasFocus': this.hasFocus,
|
|
7310
|
-
'withValue': this.
|
|
8034
|
+
'withValue': this.hasValue,
|
|
7311
8035
|
};
|
|
7312
8036
|
|
|
7313
8037
|
// Remove this when the classic layout is sunset.
|
|
@@ -7316,28 +8040,34 @@ class AuroInput extends BaseInput {
|
|
|
7316
8040
|
: this.commonInputClasses;
|
|
7317
8041
|
|
|
7318
8042
|
return html$1`
|
|
7319
|
-
<label for=${this.
|
|
8043
|
+
<label for=${this.inputId} class="${classMap(this.commonLabelClasses)}" part="label">
|
|
7320
8044
|
<slot name="label">
|
|
7321
8045
|
${this.label}
|
|
7322
8046
|
</slot>
|
|
8047
|
+
${this.required ? undefined : html$1`<slot name="optionalLabel"> (optional)</slot>`}
|
|
7323
8048
|
</label>
|
|
8049
|
+
|
|
8050
|
+
<!-- Attributes are grouped into: basic attributes, event handlers, ARIA attributes, and input-specific attributes -->
|
|
7324
8051
|
<input
|
|
7325
8052
|
@blur="${this.handleBlur}"
|
|
7326
8053
|
@focusin="${this.handleFocusin}"
|
|
7327
8054
|
@focusout="${this.handleFocusout}"
|
|
7328
8055
|
@input="${this.handleInput}"
|
|
8056
|
+
.placeholder=${this.placeholderStr}
|
|
8057
|
+
.role=${this.a11yRole}
|
|
7329
8058
|
?activeLabel="${this.activeLabel}"
|
|
7330
8059
|
?disabled="${this.disabled}"
|
|
7331
8060
|
?required="${this.required}"
|
|
7332
|
-
|
|
8061
|
+
aria-controls=${ifDefined(this.a11yControls)}
|
|
7333
8062
|
aria-describedby="${this.uniqueId}"
|
|
8063
|
+
aria-expanded=${ifDefined(this.a11yExpanded)}
|
|
7334
8064
|
aria-invalid="${this.validity !== 'valid'}"
|
|
7335
|
-
autocapitalize="${ifDefined(this.autocapitalize ? this.autocapitalize : undefined)}"
|
|
7336
8065
|
autocomplete="${ifDefined(this.autocomplete ? this.autocomplete : undefined)}"
|
|
8066
|
+
autocapitalize="${ifDefined(this.autocapitalize ? this.autocapitalize : undefined)}"
|
|
7337
8067
|
autocorrect="${ifDefined(this.autocorrect ? this.autocorrect : undefined)}"
|
|
7338
8068
|
class="${classMap(inputOverrideClasses)}"
|
|
7339
8069
|
id="${this.inputId}"
|
|
7340
|
-
|
|
8070
|
+
inputmode="${ifDefined(this.inputmode ? this.inputmode : undefined)}"
|
|
7341
8071
|
lang="${ifDefined(this.lang)}"
|
|
7342
8072
|
maxlength="${ifDefined(this.maxLength ? this.maxLength : undefined)}"
|
|
7343
8073
|
minlength="${ifDefined(this.minLength ? this.minLength : undefined)}"
|
|
@@ -7345,7 +8075,8 @@ class AuroInput extends BaseInput {
|
|
|
7345
8075
|
part="input"
|
|
7346
8076
|
pattern="${ifDefined(this.definePattern())}"
|
|
7347
8077
|
spellcheck="${ifDefined(this.spellcheck ? this.spellcheck : undefined)}"
|
|
7348
|
-
type="${this.type ===
|
|
8078
|
+
type="${this.type === "password" && this.showPassword ? "text" : this.getInputType(this.type)}"
|
|
8079
|
+
/>
|
|
7349
8080
|
<div class="${classMap(displayValueClasses)}" aria-hidden="true" part="displayValue">
|
|
7350
8081
|
<div class="displayValueWrapper">
|
|
7351
8082
|
<slot name="displayValue" @slotchange=${this.checkDisplayValueSlotChange}></slot>
|
|
@@ -7365,13 +8096,15 @@ class AuroInput extends BaseInput {
|
|
|
7365
8096
|
<${this.buttonTag}
|
|
7366
8097
|
@click="${this.handleClickClear}"
|
|
7367
8098
|
?onDark="${this.onDark}"
|
|
7368
|
-
aria-label="${i18n(this.lang, 'clearInput')}"
|
|
7369
8099
|
class="notificationBtn clearBtn"
|
|
7370
|
-
|
|
7371
|
-
|
|
8100
|
+
shape="circle"
|
|
8101
|
+
size="sm"
|
|
8102
|
+
variant="ghost">
|
|
8103
|
+
<span><slot name="ariaLabel.clear">Clear Input</slot></span>
|
|
7372
8104
|
<${this.iconTag}
|
|
8105
|
+
aria-hidden="true"
|
|
8106
|
+
?customColor="${this.onDark}"
|
|
7373
8107
|
category="interface"
|
|
7374
|
-
customColor
|
|
7375
8108
|
name="x-lg"
|
|
7376
8109
|
>
|
|
7377
8110
|
</${this.iconTag}>
|
|
@@ -7389,22 +8122,28 @@ class AuroInput extends BaseInput {
|
|
|
7389
8122
|
return html$1`
|
|
7390
8123
|
<div class="notification">
|
|
7391
8124
|
<${this.buttonTag}
|
|
7392
|
-
@click="${this.handleClickShowPassword}
|
|
8125
|
+
@click="${this.handleClickShowPassword}"
|
|
7393
8126
|
?onDark="${this.onDark}"
|
|
7394
|
-
aria-hidden="true"
|
|
7395
8127
|
class="notificationBtn passwordBtn"
|
|
7396
|
-
|
|
7397
|
-
|
|
8128
|
+
shape="circle"
|
|
8129
|
+
size="sm"
|
|
8130
|
+
variant="ghost">
|
|
8131
|
+
<span>
|
|
8132
|
+
${this.showPassword ? html$1`<slot name="ariaLabel.password.hide">Hide Password</slot>`
|
|
8133
|
+
: html$1`<slot name="ariaLabel.password.show">Show Password</slot>`}
|
|
8134
|
+
</span>
|
|
7398
8135
|
<${this.iconTag}
|
|
8136
|
+
?customColor="${this.onDark}"
|
|
8137
|
+
aria-hidden="true"
|
|
7399
8138
|
?hidden=${!this.showPassword}
|
|
7400
8139
|
category="interface"
|
|
7401
|
-
customColor
|
|
7402
8140
|
name="hide-password-stroke">
|
|
7403
8141
|
</${this.iconTag}>
|
|
7404
8142
|
<${this.iconTag}
|
|
8143
|
+
?customColor="${this.onDark}"
|
|
8144
|
+
aria-hidden="true"
|
|
7405
8145
|
?hidden=${this.showPassword}
|
|
7406
8146
|
category="interface"
|
|
7407
|
-
customColor
|
|
7408
8147
|
name="view-password-stroke">
|
|
7409
8148
|
</${this.iconTag}>
|
|
7410
8149
|
</${this.buttonTag}>
|
|
@@ -7463,7 +8202,7 @@ class AuroInput extends BaseInput {
|
|
|
7463
8202
|
? html$1`
|
|
7464
8203
|
<${this.helpTextTag} ?onDark="${this.onDark}">
|
|
7465
8204
|
<p id="${this.uniqueId}" part="helpText">
|
|
7466
|
-
<slot name="
|
|
8205
|
+
<slot name="helpText">${this.getHelpText()}</slot>
|
|
7467
8206
|
</p>
|
|
7468
8207
|
</${this.helpTextTag}>
|
|
7469
8208
|
`
|
|
@@ -7484,19 +8223,25 @@ class AuroInput extends BaseInput {
|
|
|
7484
8223
|
* @returns {import("lit").TemplateResult} - Returns HTML for the classic layout.
|
|
7485
8224
|
*/
|
|
7486
8225
|
renderLayoutClassic() {
|
|
8226
|
+
const classicClassMap = {
|
|
8227
|
+
...this.commonWrapperClasses,
|
|
8228
|
+
'thin': !this.simple
|
|
8229
|
+
};
|
|
8230
|
+
|
|
7487
8231
|
return html$1`
|
|
7488
8232
|
<div
|
|
7489
8233
|
@click="${this.handleClick}"
|
|
7490
|
-
class="${classMap(
|
|
8234
|
+
class="${classMap(classicClassMap)}"
|
|
7491
8235
|
part="wrapper">
|
|
7492
|
-
<div class="accents left">
|
|
8236
|
+
<div part="accent-left" class="accents left">
|
|
7493
8237
|
${this.renderHtmlTypeIcon()}
|
|
7494
8238
|
</div>
|
|
7495
8239
|
<div class="mainContent">
|
|
7496
8240
|
${this.renderHtmlInput(true)}
|
|
7497
8241
|
</div>
|
|
7498
|
-
<div class="accents right">
|
|
8242
|
+
<div part="accent-right" class="accents right">
|
|
7499
8243
|
${this.renderValidationErrorIconHtml()}
|
|
8244
|
+
${this.hasValue && this.type === 'password' ? this.renderHtmlNotificationPassword() : undefined}
|
|
7500
8245
|
${this.hasValue ? html$1`
|
|
7501
8246
|
${!this.disabled && !this.readonly ? html$1`
|
|
7502
8247
|
${this.renderHtmlActionClear()}
|