@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
|
@@ -22,7 +22,7 @@ var emphasizedStyleCss = css`:host([layout*=emphasized][shape*=pill]:not([layout
|
|
|
22
22
|
|
|
23
23
|
var emphasizedColorCss = css`.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`: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}`;
|
|
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-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}`;
|
|
26
26
|
|
|
27
27
|
const watchedItems = new Set();
|
|
28
28
|
|
|
@@ -5054,19 +5054,16 @@ class AuroElement extends LitElement {
|
|
|
5054
5054
|
|
|
5055
5055
|
|
|
5056
5056
|
/**
|
|
5057
|
-
*
|
|
5058
|
-
*
|
|
5059
|
-
* @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
|
|
5060
|
-
* @attr id
|
|
5057
|
+
* The `auro-input` element provides users a way to enter data into a text field.
|
|
5058
|
+
* @customElement auro-input
|
|
5061
5059
|
*
|
|
5062
5060
|
* @slot ariaLabel.clear - Sets aria-label on clear button for screen reader to read
|
|
5063
5061
|
* @slot ariaLabel.password.show - Sets aria-label on password button to toggle on showing password
|
|
5064
5062
|
* @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
|
|
5065
5063
|
* @slot helpText - Sets the help text displayed below the input.
|
|
5066
5064
|
* @slot label - Sets the label text for the input.
|
|
5067
|
-
* @slot
|
|
5065
|
+
* @slot optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
|
|
5068
5066
|
* @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
|
|
5069
|
-
*
|
|
5070
5067
|
* @csspart wrapper - Use for customizing the style of the root element
|
|
5071
5068
|
* @csspart label - Use for customizing the style of the label element
|
|
5072
5069
|
* @csspart helpText - Use for customizing the style of the helpText element
|
|
@@ -5084,6 +5081,15 @@ class BaseInput extends AuroElement {
|
|
|
5084
5081
|
constructor() {
|
|
5085
5082
|
super();
|
|
5086
5083
|
|
|
5084
|
+
this._initializeDefaults();
|
|
5085
|
+
}
|
|
5086
|
+
|
|
5087
|
+
/**
|
|
5088
|
+
* Internal Defaults.
|
|
5089
|
+
* @private
|
|
5090
|
+
* @returns {void}
|
|
5091
|
+
*/
|
|
5092
|
+
_initializeDefaults() {
|
|
5087
5093
|
this.activeLabel = false;
|
|
5088
5094
|
this.appearance = "default";
|
|
5089
5095
|
this.icon = false;
|
|
@@ -5113,15 +5119,6 @@ class BaseInput extends AuroElement {
|
|
|
5113
5119
|
*/
|
|
5114
5120
|
this.size = 'lg';
|
|
5115
5121
|
|
|
5116
|
-
this.privateDefaults();
|
|
5117
|
-
}
|
|
5118
|
-
|
|
5119
|
-
/**
|
|
5120
|
-
* Internal Defaults.
|
|
5121
|
-
* @private
|
|
5122
|
-
* @returns {void}
|
|
5123
|
-
*/
|
|
5124
|
-
privateDefaults() {
|
|
5125
5122
|
this.touched = false;
|
|
5126
5123
|
this.util = new AuroInputUtilities();
|
|
5127
5124
|
this.validation = new AuroFormValidation();
|
|
@@ -5182,17 +5179,17 @@ class BaseInput extends AuroElement {
|
|
|
5182
5179
|
...super.properties,
|
|
5183
5180
|
|
|
5184
5181
|
/**
|
|
5185
|
-
*
|
|
5182
|
+
* The value for the role attribute.
|
|
5186
5183
|
*/
|
|
5187
|
-
|
|
5188
|
-
type:
|
|
5184
|
+
a11yRole: {
|
|
5185
|
+
type: String,
|
|
5189
5186
|
reflect: true
|
|
5190
5187
|
},
|
|
5191
5188
|
|
|
5192
5189
|
/**
|
|
5193
|
-
* The value for the
|
|
5190
|
+
* The value for the aria-controls attribute.
|
|
5194
5191
|
*/
|
|
5195
|
-
|
|
5192
|
+
a11yControls: {
|
|
5196
5193
|
type: String,
|
|
5197
5194
|
reflect: true
|
|
5198
5195
|
},
|
|
@@ -5205,14 +5202,6 @@ class BaseInput extends AuroElement {
|
|
|
5205
5202
|
reflect: true
|
|
5206
5203
|
},
|
|
5207
5204
|
|
|
5208
|
-
/**
|
|
5209
|
-
* The value for the aria-controls attribute.
|
|
5210
|
-
*/
|
|
5211
|
-
a11yControls: {
|
|
5212
|
-
type: String,
|
|
5213
|
-
reflect: true
|
|
5214
|
-
},
|
|
5215
|
-
|
|
5216
5205
|
/**
|
|
5217
5206
|
* If set, the label will remain fixed in the active position.
|
|
5218
5207
|
*/
|
|
@@ -5223,7 +5212,7 @@ class BaseInput extends AuroElement {
|
|
|
5223
5212
|
|
|
5224
5213
|
/**
|
|
5225
5214
|
* Defines whether the component will be on lighter or darker backgrounds.
|
|
5226
|
-
* @
|
|
5215
|
+
* @type {'default' | 'inverse'}
|
|
5227
5216
|
* @default 'default'
|
|
5228
5217
|
*/
|
|
5229
5218
|
appearance: {
|
|
@@ -5255,6 +5244,13 @@ class BaseInput extends AuroElement {
|
|
|
5255
5244
|
reflect: true
|
|
5256
5245
|
},
|
|
5257
5246
|
|
|
5247
|
+
/**
|
|
5248
|
+
* Custom help text message for email type validity.
|
|
5249
|
+
*/
|
|
5250
|
+
customValidityTypeEmail: {
|
|
5251
|
+
type: String
|
|
5252
|
+
},
|
|
5253
|
+
|
|
5258
5254
|
/**
|
|
5259
5255
|
* If set, disables the input.
|
|
5260
5256
|
*/
|
|
@@ -5263,6 +5259,14 @@ class BaseInput extends AuroElement {
|
|
|
5263
5259
|
reflect: true
|
|
5264
5260
|
},
|
|
5265
5261
|
|
|
5262
|
+
/**
|
|
5263
|
+
* If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked.
|
|
5264
|
+
*/
|
|
5265
|
+
dvInputOnly: {
|
|
5266
|
+
type: Boolean,
|
|
5267
|
+
reflect: true
|
|
5268
|
+
},
|
|
5269
|
+
|
|
5266
5270
|
/**
|
|
5267
5271
|
* When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
|
|
5268
5272
|
*/
|
|
@@ -5287,20 +5291,18 @@ class BaseInput extends AuroElement {
|
|
|
5287
5291
|
},
|
|
5288
5292
|
|
|
5289
5293
|
/**
|
|
5290
|
-
*
|
|
5291
|
-
* Flag to indicate if the input currently has value.
|
|
5294
|
+
* Flag to indicate if the input currently has focus.
|
|
5292
5295
|
*/
|
|
5293
|
-
|
|
5296
|
+
hasFocus: {
|
|
5294
5297
|
type: Boolean,
|
|
5295
5298
|
reflect: false,
|
|
5296
5299
|
attribute: false
|
|
5297
5300
|
},
|
|
5298
5301
|
|
|
5299
5302
|
/**
|
|
5300
|
-
*
|
|
5301
|
-
* Flag to indicate if the input currently has focus.
|
|
5303
|
+
* Flag to indicate if the input currently has value.
|
|
5302
5304
|
*/
|
|
5303
|
-
|
|
5305
|
+
hasValue: {
|
|
5304
5306
|
type: Boolean,
|
|
5305
5307
|
reflect: false,
|
|
5306
5308
|
attribute: false
|
|
@@ -5314,6 +5316,23 @@ class BaseInput extends AuroElement {
|
|
|
5314
5316
|
reflect: true
|
|
5315
5317
|
},
|
|
5316
5318
|
|
|
5319
|
+
/**
|
|
5320
|
+
* The id global attribute defines an identifier (ID) which must be unique in the whole document.
|
|
5321
|
+
*/
|
|
5322
|
+
id: {
|
|
5323
|
+
type: String
|
|
5324
|
+
},
|
|
5325
|
+
|
|
5326
|
+
/**
|
|
5327
|
+
* The id for input node.
|
|
5328
|
+
* @private
|
|
5329
|
+
*/
|
|
5330
|
+
inputId: {
|
|
5331
|
+
type: String,
|
|
5332
|
+
reflect: false,
|
|
5333
|
+
attribute: false
|
|
5334
|
+
},
|
|
5335
|
+
|
|
5317
5336
|
/** Exposes inputmode attribute for input. */
|
|
5318
5337
|
inputmode: {
|
|
5319
5338
|
type: String,
|
|
@@ -5384,7 +5403,7 @@ class BaseInput extends AuroElement {
|
|
|
5384
5403
|
},
|
|
5385
5404
|
|
|
5386
5405
|
/**
|
|
5387
|
-
* DEPRECATED - use `appearance` instead.
|
|
5406
|
+
* DEPRECATED - use `appearance="inverse"` instead.
|
|
5388
5407
|
*/
|
|
5389
5408
|
onDark: {
|
|
5390
5409
|
type: Boolean,
|
|
@@ -5423,13 +5442,6 @@ class BaseInput extends AuroElement {
|
|
|
5423
5442
|
reflect: true
|
|
5424
5443
|
},
|
|
5425
5444
|
|
|
5426
|
-
/**
|
|
5427
|
-
* @ignore
|
|
5428
|
-
*/
|
|
5429
|
-
showPassword: {
|
|
5430
|
-
state: true
|
|
5431
|
-
},
|
|
5432
|
-
|
|
5433
5445
|
/**
|
|
5434
5446
|
* Sets a custom help text message to display for all validityStates.
|
|
5435
5447
|
*/
|
|
@@ -5494,18 +5506,18 @@ class BaseInput extends AuroElement {
|
|
|
5494
5506
|
},
|
|
5495
5507
|
|
|
5496
5508
|
/**
|
|
5497
|
-
*
|
|
5509
|
+
* @ignore
|
|
5498
5510
|
*/
|
|
5499
|
-
|
|
5500
|
-
|
|
5501
|
-
reflect: true
|
|
5511
|
+
showPassword: {
|
|
5512
|
+
state: true
|
|
5502
5513
|
},
|
|
5503
5514
|
|
|
5504
5515
|
/**
|
|
5505
|
-
*
|
|
5516
|
+
* Simple makes the input render without a border.
|
|
5506
5517
|
*/
|
|
5507
|
-
|
|
5508
|
-
type:
|
|
5518
|
+
simple: {
|
|
5519
|
+
type: Boolean,
|
|
5520
|
+
reflect: true
|
|
5509
5521
|
},
|
|
5510
5522
|
|
|
5511
5523
|
/**
|
|
@@ -5517,18 +5529,23 @@ class BaseInput extends AuroElement {
|
|
|
5517
5529
|
},
|
|
5518
5530
|
|
|
5519
5531
|
/**
|
|
5520
|
-
*
|
|
5532
|
+
* Indicates whether the input is in a dirty state (has been interacted with).
|
|
5533
|
+
* @private
|
|
5521
5534
|
*/
|
|
5522
|
-
|
|
5523
|
-
type:
|
|
5524
|
-
reflect: true
|
|
5535
|
+
touched: {
|
|
5536
|
+
type: Boolean,
|
|
5537
|
+
reflect: true,
|
|
5538
|
+
attribute: false
|
|
5525
5539
|
},
|
|
5526
5540
|
|
|
5527
5541
|
/**
|
|
5528
|
-
* Populates the `
|
|
5542
|
+
* Populates the `type` attribute on the input.
|
|
5543
|
+
* @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number'}
|
|
5544
|
+
* @default 'text'
|
|
5529
5545
|
*/
|
|
5530
|
-
|
|
5531
|
-
type: String
|
|
5546
|
+
type: {
|
|
5547
|
+
type: String,
|
|
5548
|
+
reflect: true
|
|
5532
5549
|
},
|
|
5533
5550
|
|
|
5534
5551
|
/**
|
|
@@ -5547,25 +5564,10 @@ class BaseInput extends AuroElement {
|
|
|
5547
5564
|
},
|
|
5548
5565
|
|
|
5549
5566
|
/**
|
|
5550
|
-
*
|
|
5551
|
-
* @type {boolean}
|
|
5552
|
-
* @default false
|
|
5553
|
-
* @private
|
|
5554
|
-
*/
|
|
5555
|
-
touched: {
|
|
5556
|
-
type: Boolean,
|
|
5557
|
-
reflect: true,
|
|
5558
|
-
attribute: false
|
|
5559
|
-
},
|
|
5560
|
-
|
|
5561
|
-
/**
|
|
5562
|
-
* The id for input node.
|
|
5563
|
-
* @private
|
|
5567
|
+
* Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
|
|
5564
5568
|
*/
|
|
5565
|
-
|
|
5566
|
-
type: String
|
|
5567
|
-
reflect: false,
|
|
5568
|
-
attribute: false
|
|
5569
|
+
value: {
|
|
5570
|
+
type: String
|
|
5569
5571
|
}
|
|
5570
5572
|
};
|
|
5571
5573
|
}
|
|
@@ -5874,7 +5876,7 @@ class BaseInput extends AuroElement {
|
|
|
5874
5876
|
}
|
|
5875
5877
|
|
|
5876
5878
|
/**
|
|
5877
|
-
* @param {Event} event - The input event
|
|
5879
|
+
* @param {Event} event - The input event.
|
|
5878
5880
|
* @private
|
|
5879
5881
|
* @returns {void}
|
|
5880
5882
|
*/
|
|
@@ -6266,7 +6268,7 @@ class AuroDependencyVersioning {
|
|
|
6266
6268
|
}
|
|
6267
6269
|
}
|
|
6268
6270
|
|
|
6269
|
-
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 LitElement{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=css`: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;
|
|
6271
|
+
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 LitElement{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=css`: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}
|
|
6270
6272
|
`;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;}}};css`.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}
|
|
6271
6273
|
`;var y$1=css`: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)}
|
|
6272
6274
|
`;var k$1=css`: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)}
|
|
@@ -6290,7 +6292,7 @@ let p$1 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
6290
6292
|
</div>
|
|
6291
6293
|
`}};
|
|
6292
6294
|
|
|
6293
|
-
var iconVersion = '9.1.
|
|
6295
|
+
var iconVersion = '9.1.1';
|
|
6294
6296
|
|
|
6295
6297
|
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=literal`${unsafeStatic(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=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}
|
|
6296
6298
|
`,u=css`.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}}
|
|
@@ -6579,13 +6581,12 @@ class AuroHelpText extends LitElement {
|
|
|
6579
6581
|
}
|
|
6580
6582
|
}
|
|
6581
6583
|
|
|
6582
|
-
var formkitVersion = '
|
|
6584
|
+
var formkitVersion = '202601271813';
|
|
6583
6585
|
|
|
6584
6586
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
6585
6587
|
// See LICENSE in the project root for license information.
|
|
6586
6588
|
|
|
6587
6589
|
|
|
6588
|
-
// build the component class
|
|
6589
6590
|
class AuroInput extends BaseInput {
|
|
6590
6591
|
|
|
6591
6592
|
constructor() {
|
|
@@ -6757,6 +6758,10 @@ class AuroInput extends BaseInput {
|
|
|
6757
6758
|
};
|
|
6758
6759
|
}
|
|
6759
6760
|
|
|
6761
|
+
/**
|
|
6762
|
+
* Common display value wrapper classes.
|
|
6763
|
+
* @private
|
|
6764
|
+
*/
|
|
6760
6765
|
get commonDisplayValueWrapperClasses() {
|
|
6761
6766
|
return {
|
|
6762
6767
|
'displayValueWrapper': true,
|
|
@@ -6804,7 +6809,7 @@ class AuroInput extends BaseInput {
|
|
|
6804
6809
|
|
|
6805
6810
|
/**
|
|
6806
6811
|
* This will register this element with the browser.
|
|
6807
|
-
* @param {string} [name="auro-input"] - The name of element that you want to register
|
|
6812
|
+
* @param {string} [name="auro-input"] - The name of the element that you want to register.
|
|
6808
6813
|
*
|
|
6809
6814
|
* @example
|
|
6810
6815
|
* AuroInput.register("custom-input") // this will register this element to <custom-input/>
|
|
@@ -18,6 +18,7 @@ The following sections are editable by making changes to the following files:
|
|
|
18
18
|
-->
|
|
19
19
|
|
|
20
20
|
# Menu
|
|
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
|
The `<auro-menu>` element provides a list of options for a user to select from.
|
|
@@ -31,7 +32,17 @@ The `<auro-menu>` element is designed for contextual menus, e.g. a dropdown menu
|
|
|
31
32
|
<!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
|
|
32
33
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
33
34
|
|
|
35
|
+
## Menu Use Cases
|
|
36
|
+
|
|
37
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
|
|
38
|
+
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
|
|
39
|
+
The `<auro-menu>` element should be used in situations where users may:
|
|
40
|
+
|
|
41
|
+
* A user needs to select one option from a list of options.
|
|
42
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
43
|
+
|
|
34
44
|
## Getting Started
|
|
45
|
+
|
|
35
46
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
|
|
36
47
|
<!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
|
|
37
48
|
|
|
@@ -44,30 +55,7 @@ $ npm i @aurodesignsystem/auro-formkit
|
|
|
44
55
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
|
|
45
56
|
<!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
|
|
46
57
|
|
|
47
|
-
###
|
|
48
|
-
|
|
49
|
-
#### Automatic Registration
|
|
50
|
-
|
|
51
|
-
For automatic registration, simply import the component:
|
|
52
|
-
|
|
53
|
-
```javascript
|
|
54
|
-
// Registers <auro-menu> automatically
|
|
55
|
-
import '@aurodesignsystem/auro-formkit/auro-menu';
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
#### Custom Registration
|
|
59
|
-
|
|
60
|
-
To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroMenu.register('custom-menu')` method on the component class and pass in a unique name.
|
|
61
|
-
|
|
62
|
-
```javascript
|
|
63
|
-
// Import the class only
|
|
64
|
-
import { AuroMenu } from '@aurodesignsystem/auro-formkit/auro-menu/class';
|
|
65
|
-
|
|
66
|
-
// Register with a custom name if desired
|
|
67
|
-
AuroMenu.register('custom-menu');
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
#### TypeScript Module Resolution
|
|
58
|
+
### TypeScript Module Resolution
|
|
71
59
|
|
|
72
60
|
When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
|
|
73
61
|
|
|
@@ -80,31 +68,10 @@ When using TypeScript set `moduleResolution` to `bundler`, add the following to
|
|
|
80
68
|
```
|
|
81
69
|
|
|
82
70
|
This configuration enables proper module resolution for the component's TypeScript files.
|
|
83
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
84
|
-
**Reference component in HTML**
|
|
85
|
-
|
|
86
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
|
|
87
|
-
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
|
|
88
|
-
|
|
89
|
-
```html
|
|
90
|
-
<auro-menu>
|
|
91
|
-
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
92
|
-
<auro-menuoption value="price">Price</auro-menuoption>
|
|
93
|
-
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
94
|
-
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
95
|
-
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
96
|
-
</auro-menu>
|
|
97
|
-
```
|
|
98
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
99
|
-
|
|
100
|
-
### Design Token CSS Custom Property dependency
|
|
101
|
-
|
|
102
|
-
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
|
|
103
|
-
The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
|
|
104
|
-
|
|
105
71
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
106
72
|
|
|
107
73
|
## Install from CDN
|
|
74
|
+
|
|
108
75
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
|
|
109
76
|
<!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
|
|
110
77
|
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.
|
|
@@ -114,21 +81,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
|
|
|
114
81
|
```
|
|
115
82
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
116
83
|
|
|
117
|
-
##
|
|
118
|
-
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
|
|
119
|
-
For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
|
|
120
|
-
|
|
121
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
122
|
-
|
|
123
|
-
## auro-menu use cases
|
|
124
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
|
|
125
|
-
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
|
|
126
|
-
The `<auro-menu>` element should be used in situations where users may:
|
|
127
|
-
|
|
128
|
-
* A user needs to select one option from a list of options.
|
|
129
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
130
|
-
|
|
131
|
-
## Formkit development
|
|
84
|
+
## Formkit Development
|
|
132
85
|
|
|
133
86
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
|
|
134
87
|
<!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
|
|
@@ -142,4 +95,51 @@ To only develop a single component, use the `--filter` flag:
|
|
|
142
95
|
```shell
|
|
143
96
|
npx turbo dev --filter=@aurodesignsystem/auro-input
|
|
144
97
|
```
|
|
98
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
99
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
|
|
100
|
+
<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
|
|
101
|
+
|
|
102
|
+
## Custom Component Registration for Version Management
|
|
103
|
+
|
|
104
|
+
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.
|
|
105
|
+
|
|
106
|
+
When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
|
|
107
|
+
|
|
108
|
+
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.
|
|
109
|
+
|
|
110
|
+
You can do this by importing only the component class and using the `register(name)` method with a unique name:
|
|
111
|
+
|
|
112
|
+
```js
|
|
113
|
+
// Import the class only
|
|
114
|
+
import { AuroMenu, AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menu/class';
|
|
115
|
+
|
|
116
|
+
// Register with a custom name if desired
|
|
117
|
+
AuroMenu.register('custom-menu');
|
|
118
|
+
AuroMenuOption.register('custom-menu-option');
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
This will create a new custom element `<custom-menu>` and `<custom-menu-option>` that behaves exactly like `<auro-menu>` and `<auro-menu-option>`, allowing both to coexist on the same page without interfering with each other.
|
|
122
|
+
|
|
123
|
+
<div class="exampleWrapper exampleWrapper--flex">
|
|
124
|
+
<custom-menu>
|
|
125
|
+
<custom-menuoption value="stops">Stops</custom-menuoption>
|
|
126
|
+
<custom-menuoption value="price">Price</custom-menuoption>
|
|
127
|
+
<custom-menuoption value="duration">Duration</custom-menuoption>
|
|
128
|
+
<custom-menuoption value="departure">Departure</custom-menuoption>
|
|
129
|
+
<custom-menuoption value="arrival">Arrival</custom-menuoption>
|
|
130
|
+
</custom-menu>
|
|
131
|
+
</div>
|
|
132
|
+
<auro-accordion alignRight>
|
|
133
|
+
<span slot="trigger">See code</span>
|
|
134
|
+
|
|
135
|
+
```html
|
|
136
|
+
<custom-menu>
|
|
137
|
+
<custom-menuoption value="stops">Stops</custom-menuoption>
|
|
138
|
+
<custom-menuoption value="price">Price</custom-menuoption>
|
|
139
|
+
<custom-menuoption value="duration">Duration</custom-menuoption>
|
|
140
|
+
<custom-menuoption value="departure">Departure</custom-menuoption>
|
|
141
|
+
<custom-menuoption value="arrival">Arrival</custom-menuoption>
|
|
142
|
+
</custom-menu>
|
|
143
|
+
```
|
|
144
|
+
</auro-accordion>
|
|
145
145
|
<!-- AURO-GENERATED-CONTENT:END -->
|