@aurodesignsystem/auro-formkit 5.9.0 → 5.9.2
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/CHANGELOG.md +13 -4
- package/README.md +4 -4
- package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
- package/components/bibtemplate/dist/index.js +2 -2
- package/components/bibtemplate/dist/registered.js +2 -2
- package/components/checkbox/README.md +62 -62
- package/components/checkbox/demo/api.js +1 -1
- package/components/checkbox/demo/api.md +127 -84
- package/components/checkbox/demo/api.min.js +125 -42
- package/components/checkbox/demo/index.md +9 -281
- package/components/checkbox/demo/index.min.js +125 -42
- package/components/checkbox/demo/readme.html +3 -4
- package/components/checkbox/demo/readme.md +62 -62
- package/components/checkbox/dist/auro-checkbox-group.d.ts +7 -8
- package/components/checkbox/dist/auro-checkbox.d.ts +74 -20
- package/components/checkbox/dist/index.js +125 -42
- package/components/checkbox/dist/registered.js +125 -42
- package/components/combobox/README.md +76 -74
- package/components/combobox/demo/api.html +1 -0
- package/components/combobox/demo/api.js +11 -12
- package/components/combobox/demo/api.md +1302 -875
- package/components/combobox/demo/api.min.js +416 -492
- package/components/combobox/demo/index.html +1 -7
- package/components/combobox/demo/index.js +0 -19
- package/components/combobox/demo/index.md +43 -723
- package/components/combobox/demo/index.min.js +369 -302
- package/components/combobox/demo/readme.html +3 -4
- package/components/combobox/demo/readme.md +76 -74
- package/components/combobox/dist/auro-combobox.d.ts +42 -42
- package/components/combobox/dist/index.js +204 -210
- package/components/combobox/dist/registered.js +204 -210
- package/components/counter/README.md +81 -66
- package/components/counter/demo/api.html +1 -2
- package/components/counter/demo/api.js +2 -2
- package/components/counter/demo/api.md +777 -259
- package/components/counter/demo/api.min.js +119 -171
- package/components/counter/demo/index.html +0 -2
- package/components/counter/demo/index.md +20 -329
- package/components/counter/demo/index.min.js +117 -152
- package/components/counter/demo/readme.html +3 -4
- package/components/counter/demo/readme.md +81 -66
- package/components/counter/dist/auro-counter-group.d.ts +21 -36
- package/components/counter/dist/auro-counter-wrapper.d.ts +1 -6
- package/components/counter/dist/auro-counter.d.ts +5 -8
- package/components/counter/dist/index.js +117 -152
- package/components/counter/dist/registered.js +117 -152
- package/components/datepicker/README.md +57 -61
- package/components/datepicker/demo/api.js +8 -8
- package/components/datepicker/demo/api.md +720 -561
- package/components/datepicker/demo/api.min.js +678 -2769
- package/components/datepicker/demo/index.md +65 -117
- package/components/datepicker/demo/index.min.js +678 -2769
- package/components/datepicker/demo/readme.html +3 -4
- package/components/datepicker/demo/readme.md +57 -61
- package/components/datepicker/dist/auro-calendar.d.ts +60 -34
- package/components/datepicker/dist/auro-datepicker.d.ts +32 -32
- package/components/datepicker/dist/iconVersion.d.ts +1 -1
- package/components/datepicker/dist/index.js +505 -2596
- package/components/datepicker/dist/popoverVersion.d.ts +1 -1
- package/components/datepicker/dist/registered.js +505 -2596
- package/components/dropdown/README.md +78 -62
- package/components/dropdown/demo/api.js +4 -4
- package/components/dropdown/demo/api.md +520 -478
- package/components/dropdown/demo/api.min.js +80 -95
- package/components/dropdown/demo/index.md +65 -119
- package/components/dropdown/demo/index.min.js +70 -85
- package/components/dropdown/demo/readme.html +3 -4
- package/components/dropdown/demo/readme.md +78 -62
- package/components/dropdown/dist/auro-dropdown.d.ts +42 -33
- package/components/dropdown/dist/iconVersion.d.ts +1 -1
- package/components/dropdown/dist/index.js +70 -85
- package/components/dropdown/dist/registered.js +70 -85
- package/components/form/README.md +16 -58
- package/components/form/demo/api.md +16 -21
- package/components/form/demo/api.min.js +13 -8
- package/components/form/demo/index.md +38 -39
- package/components/form/demo/index.min.js +13 -8
- package/components/form/demo/readme.md +16 -58
- package/components/form/demo/working.html +1 -1
- package/components/form/dist/auro-form.d.ts +15 -3
- package/components/form/dist/index.js +13 -8
- package/components/form/dist/registered.js +13 -8
- package/components/input/README.md +55 -60
- package/components/input/demo/api.js +3 -5
- package/components/input/demo/api.md +558 -537
- package/components/input/demo/api.min.js +102 -115
- package/components/input/demo/index.js +0 -1
- package/components/input/demo/index.md +90 -203
- package/components/input/demo/index.min.js +87 -99
- package/components/input/demo/readme.html +3 -4
- package/components/input/demo/readme.md +55 -60
- package/components/input/dist/auro-input.d.ts +6 -5
- package/components/input/dist/base-input.d.ts +68 -69
- package/components/input/dist/iconVersion.d.ts +1 -1
- package/components/input/dist/index.js +87 -82
- package/components/input/dist/registered.js +87 -82
- package/components/menu/README.md +61 -61
- package/components/menu/demo/api.js +6 -8
- package/components/menu/demo/api.md +520 -577
- package/components/menu/demo/api.min.js +199 -97
- package/components/menu/demo/index.js +0 -5
- package/components/menu/demo/index.md +36 -119
- package/components/menu/demo/index.min.js +164 -101
- package/components/menu/demo/readme.html +3 -4
- package/components/menu/demo/readme.md +61 -61
- package/components/menu/dist/auro-menu.context.d.ts +5 -0
- package/components/menu/dist/auro-menu.d.ts +75 -37
- package/components/menu/dist/auro-menuoption.d.ts +38 -13
- package/components/menu/dist/index.js +164 -50
- package/components/menu/dist/registered.js +164 -50
- package/components/radio/README.md +61 -57
- package/components/radio/demo/api.js +2 -2
- package/components/radio/demo/api.md +241 -170
- package/components/radio/demo/api.min.js +154 -77
- package/components/radio/demo/index.md +22 -99
- package/components/radio/demo/index.min.js +145 -68
- package/components/radio/demo/readme.html +3 -4
- package/components/radio/demo/readme.md +61 -57
- package/components/radio/dist/auro-radio-group.d.ts +67 -35
- package/components/radio/dist/auro-radio.d.ts +56 -33
- package/components/radio/dist/index.js +145 -68
- package/components/radio/dist/registered.js +145 -68
- package/components/select/README.md +68 -65
- package/components/select/demo/api.html +1 -0
- package/components/select/demo/api.js +7 -7
- package/components/select/demo/api.md +1305 -625
- package/components/select/demo/api.min.js +357 -262
- package/components/select/demo/index.html +0 -2
- package/components/select/demo/index.md +25 -833
- package/components/select/demo/index.min.js +356 -230
- package/components/select/demo/readme.html +3 -4
- package/components/select/demo/readme.md +68 -65
- package/components/select/dist/auro-select.d.ts +99 -90
- package/components/select/dist/index.js +192 -180
- package/components/select/dist/registered.js +192 -180
- package/package.json +9 -4
|
@@ -1,20 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Function used for the lang switch demo
|
|
3
|
-
* @private
|
|
4
|
-
*/
|
|
5
|
-
const changeLang = () => {
|
|
6
|
-
const englishButton = document.getElementById("enButton");
|
|
7
|
-
const spanishButton = document.getElementById("esButton");
|
|
8
|
-
|
|
9
|
-
englishButton.addEventListener("click", () => {
|
|
10
|
-
document.documentElement.setAttribute("lang", "en");
|
|
11
|
-
});
|
|
12
|
-
|
|
13
|
-
spanishButton.addEventListener("click", () => {
|
|
14
|
-
document.documentElement.setAttribute("lang", "es");
|
|
15
|
-
});
|
|
16
|
-
};
|
|
17
|
-
|
|
18
1
|
/**
|
|
19
2
|
* @license
|
|
20
3
|
* Copyright 2019 Google LLC
|
|
@@ -59,7 +42,7 @@ var emphasizedStyleCss = i$5`:host([layout*=emphasized][shape*=pill]:not([layout
|
|
|
59
42
|
|
|
60
43
|
var emphasizedColorCss = i$5`.layout-emphasized:focus-within,.layout-emphasized-left:focus-within,.layout-emphasized-right:focus-within{--auro-input-border-color: var(--ds-auro-input-border-color)}`;
|
|
61
44
|
|
|
62
|
-
var snowflakeStyleCss = i$5`: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-dropdown-emphasized-background: #00274A1a;--ds-advanced-color-dropdown-emphasized-background-hover: #00274A33;--ds-advanced-color-expanded-widget-background: #00274a;--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: #676767;--ds-advanced-color-shared-emphasized-background: rgba(1, 66, 106, 0.1);--ds-advanced-color-shared-emphasized-background-hover: rgba(1, 66, 106, 0.2);--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: #ffffff;--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";--ds-basic-type-family-accent-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-body: "AS Circular";--ds-basic-type-family-body-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-display: "AS Circular";--ds-basic-type-family-display-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-heading: "AS Circular";--ds-basic-type-family-heading-fallback: 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.625rem;--ds-basic-type-line-height-body2: 1.5rem;--ds-basic-type-line-height-body3: 1.25rem;--ds-basic-type-line-height-body4: 1rem;--ds-basic-type-line-height-body5: 0.875rem;--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-200, 1rem)}:host([layout*=snowflake]) .rightIndent{margin-right:var(--ds-size-200, 1rem)}.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{transition:all 1ms linear;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.withValue:hover .alertNotification{display:none}.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-200, 1rem)}.layout-snowflake .accents.right{padding-right:var(--ds-size-200, 1rem)}:host([layout*=snowflake]) .helpTextWrapper{text-align:center}`;
|
|
45
|
+
var snowflakeStyleCss = i$5`: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-dropdown-emphasized-background: #00274A1a;--ds-advanced-color-dropdown-emphasized-background-hover: #00274A33;--ds-advanced-color-flightline-indicator: #00274a;--ds-advanced-color-flightline-line: #00274a;--ds-advanced-color-footer-background: #01426a;--ds-advanced-color-footer-foreground: #00274a;--ds-advanced-color-footer-pattern: #ffffff;--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: #676767;--ds-advanced-color-shared-emphasized-background: rgba(1, 66, 106, 0.1);--ds-advanced-color-shared-emphasized-background-hover: rgba(1, 66, 106, 0.2);--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: #ffffff;--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: #f2f2f2;--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";--ds-basic-type-family-accent-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-body: "AS Circular";--ds-basic-type-family-body-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-display: "AS Circular";--ds-basic-type-family-display-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-heading: "AS Circular";--ds-basic-type-family-heading-fallback: 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.625rem;--ds-basic-type-line-height-body2: 1.5rem;--ds-basic-type-line-height-body3: 1.25rem;--ds-basic-type-line-height-body4: 1rem;--ds-basic-type-line-height-body5: 0.875rem;--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-body2: 700;--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-200, 1rem)}:host([layout*=snowflake]) .rightIndent{margin-right:var(--ds-size-200, 1rem)}.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{transition:all 1ms linear;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.withValue:hover .alertNotification{display:none}.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-200, 1rem)}.layout-snowflake .accents.right{padding-right:var(--ds-size-200, 1rem)}:host([layout*=snowflake]) .helpTextWrapper{text-align:center}`;
|
|
63
46
|
|
|
64
47
|
/**
|
|
65
48
|
* @license
|
|
@@ -5130,19 +5113,16 @@ class AuroElement extends i$2 {
|
|
|
5130
5113
|
|
|
5131
5114
|
|
|
5132
5115
|
/**
|
|
5133
|
-
*
|
|
5134
|
-
*
|
|
5135
|
-
* @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
|
|
5136
|
-
* @attr id
|
|
5116
|
+
* The `auro-input` element provides users a way to enter data into a text field.
|
|
5117
|
+
* @customElement auro-input
|
|
5137
5118
|
*
|
|
5138
5119
|
* @slot ariaLabel.clear - Sets aria-label on clear button for screen reader to read
|
|
5139
5120
|
* @slot ariaLabel.password.show - Sets aria-label on password button to toggle on showing password
|
|
5140
5121
|
* @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
|
|
5141
5122
|
* @slot helpText - Sets the help text displayed below the input.
|
|
5142
5123
|
* @slot label - Sets the label text for the input.
|
|
5143
|
-
* @slot
|
|
5124
|
+
* @slot optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
|
|
5144
5125
|
* @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
|
|
5145
|
-
*
|
|
5146
5126
|
* @csspart wrapper - Use for customizing the style of the root element
|
|
5147
5127
|
* @csspart label - Use for customizing the style of the label element
|
|
5148
5128
|
* @csspart helpText - Use for customizing the style of the helpText element
|
|
@@ -5160,6 +5140,15 @@ class BaseInput extends AuroElement {
|
|
|
5160
5140
|
constructor() {
|
|
5161
5141
|
super();
|
|
5162
5142
|
|
|
5143
|
+
this._initializeDefaults();
|
|
5144
|
+
}
|
|
5145
|
+
|
|
5146
|
+
/**
|
|
5147
|
+
* Internal Defaults.
|
|
5148
|
+
* @private
|
|
5149
|
+
* @returns {void}
|
|
5150
|
+
*/
|
|
5151
|
+
_initializeDefaults() {
|
|
5163
5152
|
this.activeLabel = false;
|
|
5164
5153
|
this.appearance = "default";
|
|
5165
5154
|
this.icon = false;
|
|
@@ -5189,15 +5178,6 @@ class BaseInput extends AuroElement {
|
|
|
5189
5178
|
*/
|
|
5190
5179
|
this.size = 'lg';
|
|
5191
5180
|
|
|
5192
|
-
this.privateDefaults();
|
|
5193
|
-
}
|
|
5194
|
-
|
|
5195
|
-
/**
|
|
5196
|
-
* Internal Defaults.
|
|
5197
|
-
* @private
|
|
5198
|
-
* @returns {void}
|
|
5199
|
-
*/
|
|
5200
|
-
privateDefaults() {
|
|
5201
5181
|
this.touched = false;
|
|
5202
5182
|
this.util = new AuroInputUtilities();
|
|
5203
5183
|
this.validation = new AuroFormValidation();
|
|
@@ -5258,17 +5238,17 @@ class BaseInput extends AuroElement {
|
|
|
5258
5238
|
...super.properties,
|
|
5259
5239
|
|
|
5260
5240
|
/**
|
|
5261
|
-
*
|
|
5241
|
+
* The value for the role attribute.
|
|
5262
5242
|
*/
|
|
5263
|
-
|
|
5264
|
-
type:
|
|
5243
|
+
a11yRole: {
|
|
5244
|
+
type: String,
|
|
5265
5245
|
reflect: true
|
|
5266
5246
|
},
|
|
5267
5247
|
|
|
5268
5248
|
/**
|
|
5269
|
-
* The value for the
|
|
5249
|
+
* The value for the aria-controls attribute.
|
|
5270
5250
|
*/
|
|
5271
|
-
|
|
5251
|
+
a11yControls: {
|
|
5272
5252
|
type: String,
|
|
5273
5253
|
reflect: true
|
|
5274
5254
|
},
|
|
@@ -5281,14 +5261,6 @@ class BaseInput extends AuroElement {
|
|
|
5281
5261
|
reflect: true
|
|
5282
5262
|
},
|
|
5283
5263
|
|
|
5284
|
-
/**
|
|
5285
|
-
* The value for the aria-controls attribute.
|
|
5286
|
-
*/
|
|
5287
|
-
a11yControls: {
|
|
5288
|
-
type: String,
|
|
5289
|
-
reflect: true
|
|
5290
|
-
},
|
|
5291
|
-
|
|
5292
5264
|
/**
|
|
5293
5265
|
* If set, the label will remain fixed in the active position.
|
|
5294
5266
|
*/
|
|
@@ -5299,7 +5271,7 @@ class BaseInput extends AuroElement {
|
|
|
5299
5271
|
|
|
5300
5272
|
/**
|
|
5301
5273
|
* Defines whether the component will be on lighter or darker backgrounds.
|
|
5302
|
-
* @
|
|
5274
|
+
* @type {'default' | 'inverse'}
|
|
5303
5275
|
* @default 'default'
|
|
5304
5276
|
*/
|
|
5305
5277
|
appearance: {
|
|
@@ -5331,6 +5303,13 @@ class BaseInput extends AuroElement {
|
|
|
5331
5303
|
reflect: true
|
|
5332
5304
|
},
|
|
5333
5305
|
|
|
5306
|
+
/**
|
|
5307
|
+
* Custom help text message for email type validity.
|
|
5308
|
+
*/
|
|
5309
|
+
customValidityTypeEmail: {
|
|
5310
|
+
type: String
|
|
5311
|
+
},
|
|
5312
|
+
|
|
5334
5313
|
/**
|
|
5335
5314
|
* If set, disables the input.
|
|
5336
5315
|
*/
|
|
@@ -5339,6 +5318,14 @@ class BaseInput extends AuroElement {
|
|
|
5339
5318
|
reflect: true
|
|
5340
5319
|
},
|
|
5341
5320
|
|
|
5321
|
+
/**
|
|
5322
|
+
* If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked.
|
|
5323
|
+
*/
|
|
5324
|
+
dvInputOnly: {
|
|
5325
|
+
type: Boolean,
|
|
5326
|
+
reflect: true
|
|
5327
|
+
},
|
|
5328
|
+
|
|
5342
5329
|
/**
|
|
5343
5330
|
* When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
|
|
5344
5331
|
*/
|
|
@@ -5363,20 +5350,18 @@ class BaseInput extends AuroElement {
|
|
|
5363
5350
|
},
|
|
5364
5351
|
|
|
5365
5352
|
/**
|
|
5366
|
-
*
|
|
5367
|
-
* Flag to indicate if the input currently has value.
|
|
5353
|
+
* Flag to indicate if the input currently has focus.
|
|
5368
5354
|
*/
|
|
5369
|
-
|
|
5355
|
+
hasFocus: {
|
|
5370
5356
|
type: Boolean,
|
|
5371
5357
|
reflect: false,
|
|
5372
5358
|
attribute: false
|
|
5373
5359
|
},
|
|
5374
5360
|
|
|
5375
5361
|
/**
|
|
5376
|
-
*
|
|
5377
|
-
* Flag to indicate if the input currently has focus.
|
|
5362
|
+
* Flag to indicate if the input currently has value.
|
|
5378
5363
|
*/
|
|
5379
|
-
|
|
5364
|
+
hasValue: {
|
|
5380
5365
|
type: Boolean,
|
|
5381
5366
|
reflect: false,
|
|
5382
5367
|
attribute: false
|
|
@@ -5390,6 +5375,23 @@ class BaseInput extends AuroElement {
|
|
|
5390
5375
|
reflect: true
|
|
5391
5376
|
},
|
|
5392
5377
|
|
|
5378
|
+
/**
|
|
5379
|
+
* The id global attribute defines an identifier (ID) which must be unique in the whole document.
|
|
5380
|
+
*/
|
|
5381
|
+
id: {
|
|
5382
|
+
type: String
|
|
5383
|
+
},
|
|
5384
|
+
|
|
5385
|
+
/**
|
|
5386
|
+
* The id for input node.
|
|
5387
|
+
* @private
|
|
5388
|
+
*/
|
|
5389
|
+
inputId: {
|
|
5390
|
+
type: String,
|
|
5391
|
+
reflect: false,
|
|
5392
|
+
attribute: false
|
|
5393
|
+
},
|
|
5394
|
+
|
|
5393
5395
|
/** Exposes inputmode attribute for input. */
|
|
5394
5396
|
inputmode: {
|
|
5395
5397
|
type: String,
|
|
@@ -5460,7 +5462,7 @@ class BaseInput extends AuroElement {
|
|
|
5460
5462
|
},
|
|
5461
5463
|
|
|
5462
5464
|
/**
|
|
5463
|
-
* DEPRECATED - use `appearance` instead.
|
|
5465
|
+
* DEPRECATED - use `appearance="inverse"` instead.
|
|
5464
5466
|
*/
|
|
5465
5467
|
onDark: {
|
|
5466
5468
|
type: Boolean,
|
|
@@ -5499,13 +5501,6 @@ class BaseInput extends AuroElement {
|
|
|
5499
5501
|
reflect: true
|
|
5500
5502
|
},
|
|
5501
5503
|
|
|
5502
|
-
/**
|
|
5503
|
-
* @ignore
|
|
5504
|
-
*/
|
|
5505
|
-
showPassword: {
|
|
5506
|
-
state: true
|
|
5507
|
-
},
|
|
5508
|
-
|
|
5509
5504
|
/**
|
|
5510
5505
|
* Sets a custom help text message to display for all validityStates.
|
|
5511
5506
|
*/
|
|
@@ -5570,18 +5565,18 @@ class BaseInput extends AuroElement {
|
|
|
5570
5565
|
},
|
|
5571
5566
|
|
|
5572
5567
|
/**
|
|
5573
|
-
*
|
|
5568
|
+
* @ignore
|
|
5574
5569
|
*/
|
|
5575
|
-
|
|
5576
|
-
|
|
5577
|
-
reflect: true
|
|
5570
|
+
showPassword: {
|
|
5571
|
+
state: true
|
|
5578
5572
|
},
|
|
5579
5573
|
|
|
5580
5574
|
/**
|
|
5581
|
-
*
|
|
5575
|
+
* Simple makes the input render without a border.
|
|
5582
5576
|
*/
|
|
5583
|
-
|
|
5584
|
-
type:
|
|
5577
|
+
simple: {
|
|
5578
|
+
type: Boolean,
|
|
5579
|
+
reflect: true
|
|
5585
5580
|
},
|
|
5586
5581
|
|
|
5587
5582
|
/**
|
|
@@ -5593,18 +5588,23 @@ class BaseInput extends AuroElement {
|
|
|
5593
5588
|
},
|
|
5594
5589
|
|
|
5595
5590
|
/**
|
|
5596
|
-
*
|
|
5591
|
+
* Indicates whether the input is in a dirty state (has been interacted with).
|
|
5592
|
+
* @private
|
|
5597
5593
|
*/
|
|
5598
|
-
|
|
5599
|
-
type:
|
|
5600
|
-
reflect: true
|
|
5594
|
+
touched: {
|
|
5595
|
+
type: Boolean,
|
|
5596
|
+
reflect: true,
|
|
5597
|
+
attribute: false
|
|
5601
5598
|
},
|
|
5602
5599
|
|
|
5603
5600
|
/**
|
|
5604
|
-
* Populates the `
|
|
5601
|
+
* Populates the `type` attribute on the input.
|
|
5602
|
+
* @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number'}
|
|
5603
|
+
* @default 'text'
|
|
5605
5604
|
*/
|
|
5606
|
-
|
|
5607
|
-
type: String
|
|
5605
|
+
type: {
|
|
5606
|
+
type: String,
|
|
5607
|
+
reflect: true
|
|
5608
5608
|
},
|
|
5609
5609
|
|
|
5610
5610
|
/**
|
|
@@ -5623,25 +5623,10 @@ class BaseInput extends AuroElement {
|
|
|
5623
5623
|
},
|
|
5624
5624
|
|
|
5625
5625
|
/**
|
|
5626
|
-
*
|
|
5627
|
-
* @type {boolean}
|
|
5628
|
-
* @default false
|
|
5629
|
-
* @private
|
|
5630
|
-
*/
|
|
5631
|
-
touched: {
|
|
5632
|
-
type: Boolean,
|
|
5633
|
-
reflect: true,
|
|
5634
|
-
attribute: false
|
|
5635
|
-
},
|
|
5636
|
-
|
|
5637
|
-
/**
|
|
5638
|
-
* The id for input node.
|
|
5639
|
-
* @private
|
|
5626
|
+
* Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
|
|
5640
5627
|
*/
|
|
5641
|
-
|
|
5642
|
-
type: String
|
|
5643
|
-
reflect: false,
|
|
5644
|
-
attribute: false
|
|
5628
|
+
value: {
|
|
5629
|
+
type: String
|
|
5645
5630
|
}
|
|
5646
5631
|
};
|
|
5647
5632
|
}
|
|
@@ -5950,7 +5935,7 @@ class BaseInput extends AuroElement {
|
|
|
5950
5935
|
}
|
|
5951
5936
|
|
|
5952
5937
|
/**
|
|
5953
|
-
* @param {Event} event - The input event
|
|
5938
|
+
* @param {Event} event - The input event.
|
|
5954
5939
|
* @private
|
|
5955
5940
|
* @returns {void}
|
|
5956
5941
|
*/
|
|
@@ -6342,7 +6327,7 @@ class AuroDependencyVersioning {
|
|
|
6342
6327
|
}
|
|
6343
6328
|
}
|
|
6344
6329
|
|
|
6345
|
-
let p$1 = class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}};var u$1='<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>';let m$1 = class m extends i$2{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}};const g$1=new Map,f$1=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g$1.has(t)||g$1.set(t,fetch(t).then(e)),g$1.get(t)};var w$1=i$5`: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}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;
|
|
6330
|
+
let p$1 = class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}};var u$1='<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>';let m$1 = class m extends i$2{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}};const g$1=new Map,f$1=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g$1.has(t)||g$1.set(t,fetch(t).then(e)),g$1.get(t)};var w$1=i$5`: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}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
|
|
6346
6331
|
`;let z$1 = class z extends m$1{constructor(){super(),this.onDark=false,this.appearance="default";}static get properties(){return {...m$1.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return w$1}async fetchIcon(t,a){let e="";e="logos"===t?await f$1(`${this.uri}/${t}/${a}.svg`):await f$1(`${this.uri}/icons/${t}/${a}.svg`);return (new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=(new DOMParser).parseFromString(u$1,"text/html");this.svg=t.body.firstChild;}}}catch(t){this.svg=void 0;}}};i$5`.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}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
|
|
6347
6332
|
`;var y$1=i$5`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
|
|
6348
6333
|
`;var k$1=i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
|
|
@@ -6366,7 +6351,7 @@ let p$1 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
6366
6351
|
</div>
|
|
6367
6352
|
`}};
|
|
6368
6353
|
|
|
6369
|
-
var iconVersion = '9.1.
|
|
6354
|
+
var iconVersion = '9.1.1';
|
|
6370
6355
|
|
|
6371
6356
|
class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(o,s,a){const r=this.generateElementName(o,s),i=i$1`${s$1(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}}class d{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`);return (o?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}class h{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}}var c=i$5`: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}
|
|
6372
6357
|
`,u=i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.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.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.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, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.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, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, 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"),var(--wcss-display-xl-family-fallback, 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"),var(--wcss-display-lg-family-fallback, 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"),var(--wcss-display-md-family-fallback, 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"),var(--wcss-display-sm-family-fallback, 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"),var(--wcss-display-xs-family-fallback, 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"),var(--wcss-heading-xl-family-fallback, 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"),var(--wcss-heading-lg-family-fallback, 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"),var(--wcss-heading-md-family-fallback, 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"),var(--wcss-heading-sm-family-fallback, 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"),var(--wcss-heading-xs-family-fallback, 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"),var(--wcss-heading-2xs-family-fallback, 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"),var(--wcss-accent-2xl-family-fallback, 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, .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"),var(--wcss-accent-xl-family-fallback, 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, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, 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, .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"),var(--wcss-accent-md-family-fallback, 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, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, 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, .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"),var(--wcss-accent-xs-family-fallback, 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, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}: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: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .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:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.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(0)}to{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{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{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%}to{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}}
|
|
@@ -6655,13 +6640,12 @@ class AuroHelpText extends i$2 {
|
|
|
6655
6640
|
}
|
|
6656
6641
|
}
|
|
6657
6642
|
|
|
6658
|
-
var formkitVersion = '
|
|
6643
|
+
var formkitVersion = '202601271813';
|
|
6659
6644
|
|
|
6660
6645
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
6661
6646
|
// See LICENSE in the project root for license information.
|
|
6662
6647
|
|
|
6663
6648
|
|
|
6664
|
-
// build the component class
|
|
6665
6649
|
class AuroInput extends BaseInput {
|
|
6666
6650
|
|
|
6667
6651
|
constructor() {
|
|
@@ -6833,6 +6817,10 @@ class AuroInput extends BaseInput {
|
|
|
6833
6817
|
};
|
|
6834
6818
|
}
|
|
6835
6819
|
|
|
6820
|
+
/**
|
|
6821
|
+
* Common display value wrapper classes.
|
|
6822
|
+
* @private
|
|
6823
|
+
*/
|
|
6836
6824
|
get commonDisplayValueWrapperClasses() {
|
|
6837
6825
|
return {
|
|
6838
6826
|
'displayValueWrapper': true,
|
|
@@ -6880,7 +6868,7 @@ class AuroInput extends BaseInput {
|
|
|
6880
6868
|
|
|
6881
6869
|
/**
|
|
6882
6870
|
* This will register this element with the browser.
|
|
6883
|
-
* @param {string} [name="auro-input"] - The name of element that you want to register
|
|
6871
|
+
* @param {string} [name="auro-input"] - The name of the element that you want to register.
|
|
6884
6872
|
*
|
|
6885
6873
|
* @example
|
|
6886
6874
|
* AuroInput.register("custom-input") // this will register this element to <custom-input/>
|
|
@@ -48,10 +48,9 @@
|
|
|
48
48
|
Prism.highlightAll();
|
|
49
49
|
})
|
|
50
50
|
</script>
|
|
51
|
-
<script type="module">
|
|
52
|
-
import { initExamples } from "./index.min.js";
|
|
51
|
+
<script src="./index.min.js" data-demo-script="true" type="module"></script>
|
|
53
52
|
|
|
54
|
-
|
|
55
|
-
|
|
53
|
+
<!-- If additional elements are needed for the demo, add them here. -->
|
|
54
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
|
|
56
55
|
</body>
|
|
57
56
|
</html>
|
|
@@ -18,6 +18,7 @@ The following sections are editable by making changes to the following files:
|
|
|
18
18
|
-->
|
|
19
19
|
|
|
20
20
|
# Input
|
|
21
|
+
|
|
21
22
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
|
|
22
23
|
<!-- The below content is automatically added from ./docs/partials/description.md -->
|
|
23
24
|
Use the `<auro-input>` custom element to create basic single-line text fields. Supports type `text`, `password`, and `email` with validation, required input, error states and a secondary `bordered` theme. Use the slots `label` and `helpText` for additional content support.
|
|
@@ -26,7 +27,18 @@ Use the `<auro-input>` custom element to create basic single-line text fields. S
|
|
|
26
27
|
<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
|
|
27
28
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
28
29
|
|
|
30
|
+
## Input Use Cases
|
|
31
|
+
|
|
32
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
|
|
33
|
+
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
|
|
34
|
+
The `<auro-input>` element should be used in situations where users may:
|
|
35
|
+
|
|
36
|
+
* needs to enter information
|
|
37
|
+
* be filling out a form
|
|
38
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
39
|
+
|
|
29
40
|
## Getting Started
|
|
41
|
+
|
|
30
42
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
|
|
31
43
|
<!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
|
|
32
44
|
|
|
@@ -39,30 +51,7 @@ $ npm i @aurodesignsystem/auro-formkit
|
|
|
39
51
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
|
|
40
52
|
<!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
|
|
41
53
|
|
|
42
|
-
###
|
|
43
|
-
|
|
44
|
-
#### Automatic Registration
|
|
45
|
-
|
|
46
|
-
For automatic registration, simply import the component:
|
|
47
|
-
|
|
48
|
-
```javascript
|
|
49
|
-
// Registers <auro-input> automatically
|
|
50
|
-
import '@aurodesignsystem/auro-formkit/auro-input';
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
#### Custom Registration
|
|
54
|
-
|
|
55
|
-
To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroInput.register('custom-input')` method on the component class and pass in a unique name.
|
|
56
|
-
|
|
57
|
-
```javascript
|
|
58
|
-
// Import the class only
|
|
59
|
-
import { AuroInput } from '@aurodesignsystem/auro-formkit/auro-input/class';
|
|
60
|
-
|
|
61
|
-
// Register with a custom name if desired
|
|
62
|
-
AuroInput.register('custom-input');
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
#### TypeScript Module Resolution
|
|
54
|
+
### TypeScript Module Resolution
|
|
66
55
|
|
|
67
56
|
When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
|
|
68
57
|
|
|
@@ -75,29 +64,10 @@ When using TypeScript set `moduleResolution` to `bundler`, add the following to
|
|
|
75
64
|
```
|
|
76
65
|
|
|
77
66
|
This configuration enables proper module resolution for the component's TypeScript files.
|
|
78
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
79
|
-
**Reference component in HTML**
|
|
80
|
-
|
|
81
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
|
|
82
|
-
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
|
|
83
|
-
|
|
84
|
-
```html
|
|
85
|
-
<auro-input>
|
|
86
|
-
<span slot="ariaLabel.clear">Clear All</span>
|
|
87
|
-
<span slot="label">Label</span>
|
|
88
|
-
<span slot="helpText">Help Text</span>
|
|
89
|
-
</auro-input>
|
|
90
|
-
```
|
|
91
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
92
|
-
|
|
93
|
-
### Design Token CSS Custom Property dependency
|
|
94
|
-
|
|
95
|
-
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
|
|
96
|
-
The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
|
|
97
|
-
|
|
98
67
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
99
68
|
|
|
100
69
|
## Install from CDN
|
|
70
|
+
|
|
101
71
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
|
|
102
72
|
<!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
|
|
103
73
|
In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
|
|
@@ -107,22 +77,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
|
|
|
107
77
|
```
|
|
108
78
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
109
79
|
|
|
110
|
-
##
|
|
111
|
-
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
|
|
112
|
-
For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
|
|
113
|
-
|
|
114
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
115
|
-
|
|
116
|
-
## auro-input use cases
|
|
117
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
|
|
118
|
-
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
|
|
119
|
-
The `<auro-input>` element should be used in situations where users may:
|
|
120
|
-
|
|
121
|
-
* needs to enter information
|
|
122
|
-
* be filling out a form
|
|
123
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
124
|
-
|
|
125
|
-
## Formkit development
|
|
80
|
+
## Formkit Development
|
|
126
81
|
|
|
127
82
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
|
|
128
83
|
<!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
|
|
@@ -136,4 +91,44 @@ To only develop a single component, use the `--filter` flag:
|
|
|
136
91
|
```shell
|
|
137
92
|
npx turbo dev --filter=@aurodesignsystem/auro-input
|
|
138
93
|
```
|
|
94
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
95
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
|
|
96
|
+
<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
|
|
97
|
+
|
|
98
|
+
## Custom Component Registration for Version Management
|
|
99
|
+
|
|
100
|
+
There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
|
|
101
|
+
|
|
102
|
+
When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
|
|
103
|
+
|
|
104
|
+
However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
|
|
105
|
+
|
|
106
|
+
You can do this by importing only the component class and using the `register(name)` method with a unique name:
|
|
107
|
+
|
|
108
|
+
```js
|
|
109
|
+
// Import the class only
|
|
110
|
+
import { AuroInput } from '@aurodesignsystem/auro-formkit/auro-input/class';
|
|
111
|
+
|
|
112
|
+
// Register with a custom name if desired
|
|
113
|
+
AuroInput.register('custom-input');
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
This will create a new custom element `<custom-input>` that behaves exactly like `<auro-input>`, allowing both to coexist on the same page without interfering with each other.
|
|
117
|
+
|
|
118
|
+
<div class="exampleWrapper exampleWrapper--flex">
|
|
119
|
+
<custom-input>
|
|
120
|
+
<span slot="label">Label</span>
|
|
121
|
+
<span slot="helpText">Help Text</span>
|
|
122
|
+
</custom-input>
|
|
123
|
+
</div>
|
|
124
|
+
<auro-accordion alignRight>
|
|
125
|
+
<span slot="trigger">See code</span>
|
|
126
|
+
|
|
127
|
+
```html
|
|
128
|
+
<custom-input>
|
|
129
|
+
<span slot="label">Label</span>
|
|
130
|
+
<span slot="helpText">Help Text</span>
|
|
131
|
+
</custom-input>
|
|
132
|
+
```
|
|
133
|
+
</auro-accordion>
|
|
139
134
|
<!-- AURO-GENERATED-CONTENT:END -->
|