@aurodesignsystem-dev/auro-formkit 0.0.0-pr750.0 → 0.0.0-pr753.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/bibtemplate/dist/index.js +1 -1
- package/components/bibtemplate/dist/registered.js +1 -1
- package/components/checkbox/demo/api.min.js +9 -9
- package/components/checkbox/demo/index.min.js +9 -9
- package/components/checkbox/dist/index.js +9 -9
- package/components/checkbox/dist/registered.js +9 -9
- package/components/combobox/demo/api.html +10 -16
- package/components/combobox/demo/api.md +6 -12
- package/components/combobox/demo/api.min.js +101 -84
- package/components/combobox/demo/index.html +10 -16
- package/components/combobox/demo/index.min.js +101 -84
- package/components/combobox/demo/readme.html +9 -16
- package/components/combobox/dist/index.js +89 -47
- package/components/combobox/dist/registered.js +89 -47
- package/components/counter/demo/api.html +10 -16
- package/components/counter/demo/api.md +7 -140
- package/components/counter/demo/api.min.js +387 -557
- package/components/counter/demo/index.html +10 -16
- package/components/counter/demo/index.md +0 -82
- package/components/counter/demo/index.min.js +387 -557
- package/components/counter/demo/readme.html +9 -16
- package/components/counter/dist/auro-counter-group.d.ts +14 -71
- package/components/counter/dist/auro-counter.d.ts +0 -10
- package/components/counter/dist/index.js +387 -557
- package/components/counter/dist/registered.js +387 -557
- package/components/datepicker/demo/api.html +10 -16
- package/components/datepicker/demo/api.min.js +95 -68
- package/components/datepicker/demo/index.html +10 -16
- package/components/datepicker/demo/index.min.js +95 -68
- package/components/datepicker/demo/readme.html +9 -16
- package/components/datepicker/dist/auro-datepicker.d.ts +0 -6
- package/components/datepicker/dist/index.js +95 -68
- package/components/datepicker/dist/registered.js +95 -68
- package/components/dropdown/demo/api.html +10 -16
- package/components/dropdown/demo/api.md +268 -76
- package/components/dropdown/demo/api.min.js +68 -26
- package/components/dropdown/demo/index.html +10 -16
- package/components/dropdown/demo/index.md +363 -45
- package/components/dropdown/demo/index.min.js +68 -26
- package/components/dropdown/demo/readme.html +9 -16
- package/components/dropdown/dist/auro-dropdown.d.ts +71 -21
- package/components/dropdown/dist/index.js +68 -26
- package/components/dropdown/dist/registered.js +68 -26
- package/components/form/demo/api.html +9 -16
- package/components/form/demo/autocomplete.html +3 -19
- package/components/form/demo/index.html +9 -16
- package/components/form/demo/readme.html +9 -16
- package/components/form/demo/working.html +13 -19
- package/components/helptext/dist/index.js +1 -1
- package/components/helptext/dist/registered.js +1 -1
- package/components/input/demo/api.html +10 -16
- package/components/input/demo/api.md +1 -1
- package/components/input/demo/api.min.js +14 -14
- package/components/input/demo/index.html +10 -16
- package/components/input/demo/index.min.js +14 -14
- package/components/input/demo/readme.html +9 -16
- package/components/input/dist/base-input.d.ts +1 -1
- package/components/input/dist/index.js +14 -14
- package/components/input/dist/registered.js +14 -14
- package/components/menu/demo/api.html +32 -16
- package/components/menu/demo/api.md +1 -1
- package/components/menu/demo/api.min.js +12 -37
- package/components/menu/demo/index.html +10 -16
- package/components/menu/demo/index.min.js +12 -37
- package/components/menu/demo/readme.html +9 -16
- package/components/menu/dist/auro-menu.d.ts +2 -13
- package/components/menu/dist/index.js +12 -37
- package/components/menu/dist/registered.js +12 -37
- package/components/radio/demo/api.html +10 -16
- package/components/radio/demo/api.min.js +10 -10
- package/components/radio/demo/index.html +10 -16
- package/components/radio/demo/index.min.js +10 -10
- package/components/radio/demo/readme.html +9 -16
- package/components/radio/dist/auro-radio.d.ts +1 -1
- package/components/radio/dist/index.js +10 -10
- package/components/radio/dist/registered.js +10 -10
- package/components/select/demo/api.html +10 -16
- package/components/select/demo/api.md +16 -19
- package/components/select/demo/api.min.js +295 -136
- package/components/select/demo/index.html +11 -16
- package/components/select/demo/index.md +1 -1
- package/components/select/demo/index.min.js +295 -136
- package/components/select/demo/readme.html +9 -16
- package/components/select/dist/auro-select.d.ts +7 -32
- package/components/select/dist/index.js +283 -99
- package/components/select/dist/registered.js +283 -99
- package/package.json +25 -26
|
@@ -631,9 +631,9 @@ let AuroLibraryRuntimeUtils$8 = class AuroLibraryRuntimeUtils {
|
|
|
631
631
|
}
|
|
632
632
|
};
|
|
633
633
|
|
|
634
|
-
var styleCss$
|
|
634
|
+
var styleCss$a = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none;transition:padding 300ms ease-out}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible,.auro-button:focus{outline:none;outline-style:solid;outline-width:var(--ds-size-50, 0.25rem);outline-offset:calc(var(--ds-size-50, 0.25rem)*-1)}.auro-button:focus-visible:not([variant=secondary]):not([variant=tertiary]),.auro-button:focus:not([variant=secondary]):not([variant=tertiary]){outline-width:calc(var(--ds-size-50, 0.25rem) - 1px)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=ghost]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button.icon-only ::slotted(:not(auro-icon):not([auro-icon])){display:none}.auro-button--slim{min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon),.auro-button--iconOnly ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}.auro-button--iconOnly:not(.auro-button--rounded):focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]),.auro-button--iconOnly:not(.auro-button--rounded):focus:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]){outline-width:1px;outline-offset:-2px}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon),.auro-button--iconOnlySlim ::slotted([auro-icon]){--ds-auro-icon-size:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:padding 300ms ease-out,outline 0ms,outline-offset 0ms}.auro-button--rounded ::slotted(auro-icon),.auro-button--rounded ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}.auro-button--rounded:focus-visible:not([variant=flat]):after,.auro-button--rounded:focus:not([variant=flat]):after{border-radius:100px}:host([size=xs]) .wrapper:focus-visible,:host([size=xs]) .wrapper:focus{outline-width:1px;outline-offset:-2px}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`;
|
|
635
635
|
|
|
636
|
-
var colorCss$a = i$5`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible{outline-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-hover, #00274a)}.auro-button:not([ondark]):disabled{--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-disabled, #acc9e2)}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border, #01426a);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-secondary-text, #01426a)}.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-hover, #00274a);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text-hover, #00274a)}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-disabled, #cfe0ef);--ds-auro-button-text-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-tertiary-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-tertiary-text, #01426a)}.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-border-color:transparent}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=ghost]{--ds-auro-button-container-color:transparent;--ds-auro-button-container-image:transparent;--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-ghost-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-ghost-text, #01426a)}.auro-button:not([ondark])[variant=ghost]:active:not(:disabled),.auro-button:not([ondark])[variant=ghost]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, 0.05));--ds-auro-button-border-color:transparent}.auro-button:not([ondark])[variant=ghost]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=ghost]:disabled{--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-advanced-color-button-flat-text, #676767);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-hover, #525252);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-advanced-color-button-flat-text-disabled, #d0d0d0);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button[ondark]{--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-text-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a)}.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse-hover, #ebf3f9);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9)}.auro-button[ondark]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button[ondark]:disabled{--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color:transparent;--ds-auro-button-container-image:transparent;--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-inverse, #ffffff);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-secondary-text-inverse, #ffffff)}.auro-button[ondark][variant=secondary]:active:not(:disabled),.auro-button[ondark][variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, 0.1))}.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-inverse-disabled, #dddddd)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff)}.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1))}.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=ghost]{--ds-auro-button-container-color:transparent;--ds-auro-button-container-image:transparent;--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-ghost-text-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-ghost-text-inverse, #ffffff)}.auro-button[ondark][variant=ghost]:active:not(:disabled),.auro-button[ondark][variant=ghost]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, 0.05))}.auro-button[ondark][variant=ghost]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=ghost]:disabled{--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=flat]{color:var(--ds-advanced-color-button-flat-text-inverse, #ffffff);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-inverse-hover, #adadad);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-advanced-color-button-flat-text-inverse-disabled, #7e8894);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}`;
|
|
636
|
+
var colorCss$9 = i$5`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible{outline-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-hover, #00274a)}.auro-button:not([ondark]):disabled{--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-disabled, #acc9e2)}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border, #01426a);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-secondary-text, #01426a)}.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-hover, #00274a);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text-hover, #00274a)}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-disabled, #cfe0ef);--ds-auro-button-text-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-tertiary-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-tertiary-text, #01426a)}.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-border-color:transparent}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=ghost]{--ds-auro-button-container-color:transparent;--ds-auro-button-container-image:transparent;--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-ghost-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-ghost-text, #01426a)}.auro-button:not([ondark])[variant=ghost]:active:not(:disabled),.auro-button:not([ondark])[variant=ghost]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, 0.05));--ds-auro-button-border-color:transparent}.auro-button:not([ondark])[variant=ghost]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=ghost]:disabled{--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-advanced-color-button-flat-text, #676767);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-hover, #525252);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-advanced-color-button-flat-text-disabled, #d0d0d0);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button[ondark]{--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-text-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a)}.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse-hover, #ebf3f9);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9)}.auro-button[ondark]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button[ondark]:disabled{--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color:transparent;--ds-auro-button-container-image:transparent;--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-inverse, #ffffff);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-secondary-text-inverse, #ffffff)}.auro-button[ondark][variant=secondary]:active:not(:disabled),.auro-button[ondark][variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, 0.1))}.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-inverse-disabled, #dddddd)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff)}.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1))}.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=ghost]{--ds-auro-button-container-color:transparent;--ds-auro-button-container-image:transparent;--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-ghost-text-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-ghost-text-inverse, #ffffff)}.auro-button[ondark][variant=ghost]:active:not(:disabled),.auro-button[ondark][variant=ghost]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, 0.05))}.auro-button[ondark][variant=ghost]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=ghost]:disabled{--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=flat]{color:var(--ds-advanced-color-button-flat-text-inverse, #ffffff);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-inverse-hover, #adadad);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-advanced-color-button-flat-text-inverse-disabled, #7e8894);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}`;
|
|
637
637
|
|
|
638
638
|
var tokensCss$7 = i$5`:host(:not([onDark])){--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-text-color:var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-tap-color:transparent}:host([onDark]){--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-text-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-tap-color:transparent}`;
|
|
639
639
|
|
|
@@ -709,9 +709,9 @@ let AuroLibraryRuntimeUtils$7 = class AuroLibraryRuntimeUtils {
|
|
|
709
709
|
}
|
|
710
710
|
};
|
|
711
711
|
|
|
712
|
-
var styleCss$
|
|
712
|
+
var styleCss$9 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin:0.375rem;--margin-xs:0.2rem;--margin-sm:0.5rem;--margin-md:0.75rem;--margin-lg:1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;
|
|
713
713
|
|
|
714
|
-
var colorCss$
|
|
714
|
+
var colorCss$8 = 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}`;
|
|
715
715
|
|
|
716
716
|
var tokensCss$6 = i$5`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
|
|
717
717
|
|
|
@@ -789,8 +789,8 @@ let AuroLoader$1 = class AuroLoader extends i$2 {
|
|
|
789
789
|
|
|
790
790
|
static get styles() {
|
|
791
791
|
return [
|
|
792
|
-
i$5`${styleCss$
|
|
793
|
-
i$5`${colorCss$
|
|
792
|
+
i$5`${styleCss$9}`,
|
|
793
|
+
i$5`${colorCss$8}`,
|
|
794
794
|
i$5`${tokensCss$6}`
|
|
795
795
|
];
|
|
796
796
|
}
|
|
@@ -943,8 +943,8 @@ let AuroButton$1 = class AuroButton extends AuroElement$5 {
|
|
|
943
943
|
static get styles() {
|
|
944
944
|
return [
|
|
945
945
|
tokensCss$7,
|
|
946
|
-
styleCss$
|
|
947
|
-
colorCss$
|
|
946
|
+
styleCss$a,
|
|
947
|
+
colorCss$9,
|
|
948
948
|
shapeSize$1
|
|
949
949
|
];
|
|
950
950
|
}
|
|
@@ -1315,7 +1315,7 @@ const cacheFetch$2 = (uri, options = {}) => {
|
|
|
1315
1315
|
return _fetchMap$2.get(uri);
|
|
1316
1316
|
};
|
|
1317
1317
|
|
|
1318
|
-
var styleCss$
|
|
1318
|
+
var styleCss$8 = 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, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;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}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
|
|
1319
1319
|
|
|
1320
1320
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1321
1321
|
// See LICENSE in the project root for license information.
|
|
@@ -1358,7 +1358,7 @@ let BaseIcon$2 = class BaseIcon extends AuroElement$4 {
|
|
|
1358
1358
|
|
|
1359
1359
|
static get styles() {
|
|
1360
1360
|
return i$5`
|
|
1361
|
-
${styleCss$
|
|
1361
|
+
${styleCss$8}
|
|
1362
1362
|
`;
|
|
1363
1363
|
}
|
|
1364
1364
|
|
|
@@ -1401,7 +1401,7 @@ let BaseIcon$2 = class BaseIcon extends AuroElement$4 {
|
|
|
1401
1401
|
|
|
1402
1402
|
var tokensCss$5 = 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)}`;
|
|
1403
1403
|
|
|
1404
|
-
var colorCss$
|
|
1404
|
+
var colorCss$7 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
|
|
1405
1405
|
|
|
1406
1406
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1407
1407
|
// See LICENSE in the project root for license information.
|
|
@@ -1560,8 +1560,8 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
|
|
|
1560
1560
|
return [
|
|
1561
1561
|
super.styles,
|
|
1562
1562
|
i$5`${tokensCss$5}`,
|
|
1563
|
-
i$5`${styleCss$
|
|
1564
|
-
i$5`${colorCss$
|
|
1563
|
+
i$5`${styleCss$8}`,
|
|
1564
|
+
i$5`${colorCss$7}`
|
|
1565
1565
|
];
|
|
1566
1566
|
}
|
|
1567
1567
|
|
|
@@ -2122,19 +2122,19 @@ class AuroFormValidation {
|
|
|
2122
2122
|
{
|
|
2123
2123
|
check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
|
|
2124
2124
|
validity: 'tooShort',
|
|
2125
|
-
message: e => e.
|
|
2125
|
+
message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
|
|
2126
2126
|
},
|
|
2127
2127
|
{
|
|
2128
2128
|
check: (e) => e.value?.length > e.maxLength,
|
|
2129
2129
|
validity: 'tooLong',
|
|
2130
|
-
message: e => e.
|
|
2130
|
+
message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
|
|
2131
2131
|
}
|
|
2132
2132
|
],
|
|
2133
2133
|
pattern: [
|
|
2134
2134
|
{
|
|
2135
2135
|
check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
|
|
2136
2136
|
validity: 'patternMismatch',
|
|
2137
|
-
message: e => e.
|
|
2137
|
+
message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
|
|
2138
2138
|
}
|
|
2139
2139
|
]
|
|
2140
2140
|
},
|
|
@@ -2329,10 +2329,10 @@ class AuroFormValidation {
|
|
|
2329
2329
|
if (!hasValue && elem.required && elem.touched) {
|
|
2330
2330
|
elem.validity = 'valueMissing';
|
|
2331
2331
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
2332
|
-
} else if (
|
|
2332
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
2333
2333
|
this.validateType(elem);
|
|
2334
2334
|
this.validateElementAttributes(elem);
|
|
2335
|
-
} else if (
|
|
2335
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
2336
2336
|
this.validateElementAttributes(elem);
|
|
2337
2337
|
}
|
|
2338
2338
|
}
|
|
@@ -2450,217 +2450,9 @@ var plusIcon = {"role":"img","color":"currentColor","title":"","desc":"","width"
|
|
|
2450
2450
|
|
|
2451
2451
|
var minusIcon = {"role":"img","color":"currentColor","title":"","desc":"","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"minus-lg","category":"interface","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" 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/><path d=\"M5.75 12.75h12.5a.75.75 0 1 0 0-1.5H5.75a.75.75 0 1 0 0 1.5\"/></svg>"};
|
|
2452
2452
|
|
|
2453
|
-
var colorCss$
|
|
2454
|
-
|
|
2455
|
-
var styleCss$8 = i$5`.counter{display:flex;align-items:center;justify-content:space-between;column-gap:var(--ds-size-150, 0.75rem)}.content{display:flex;flex-flow:column}[name=description]::slotted(*){display:block;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}.quantityWrapper{width:var(--ds-size-400, 2rem);height:calc(var(--ds-size-25, 0.125rem) + var(--ds-size-400, 2rem));align-content:center;cursor:default;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px;text-align:center}:host{position:relative}:host::part(counterControl){display:flex;border-radius:var(--ds-size-500, 2.5rem);line-height:0;touch-action:manipulation}:host::part(counterControl):focus-visible{outline-offset:0;outline-style:solid;outline-width:var(--ds-size-25, 0.125rem)}:host::part(controlMinus){--ds-auro-counter-control-border-radius: var(--ds-size-500, 2.5rem) 0 0 var(--ds-size-500, 2.5rem);--ds-auro-counter-control-padding: var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host::part(controlPlus){--ds-auro-counter-control-border-radius: 0 var(--ds-size-500, 2.5rem) var(--ds-size-500, 2.5rem) 0;--ds-auro-counter-control-padding: var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem) var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem)}auro-counter-button{display:flex}`;
|
|
2456
|
-
|
|
2457
|
-
var colorCss$6 = i$5`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
2458
|
-
|
|
2459
|
-
var styleCss$7 = i$5`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
2460
|
-
|
|
2461
|
-
var tokensCss$4 = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
2462
|
-
|
|
2463
|
-
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
2464
|
-
// See LICENSE in the project root for license information.
|
|
2465
|
-
|
|
2466
|
-
// ---------------------------------------------------------------------
|
|
2467
|
-
|
|
2468
|
-
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
2469
|
-
|
|
2470
|
-
let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
|
|
2471
|
-
|
|
2472
|
-
/* eslint-disable jsdoc/require-param */
|
|
2473
|
-
|
|
2474
|
-
/**
|
|
2475
|
-
* This will register a new custom element with the browser.
|
|
2476
|
-
* @param {String} name - The name of the custom element.
|
|
2477
|
-
* @param {Object} componentClass - The class to register as a custom element.
|
|
2478
|
-
* @returns {void}
|
|
2479
|
-
*/
|
|
2480
|
-
registerComponent(name, componentClass) {
|
|
2481
|
-
if (!customElements.get(name)) {
|
|
2482
|
-
customElements.define(name, class extends componentClass {});
|
|
2483
|
-
}
|
|
2484
|
-
}
|
|
2485
|
-
|
|
2486
|
-
/**
|
|
2487
|
-
* Finds and returns the closest HTML Element based on a selector.
|
|
2488
|
-
* @returns {void}
|
|
2489
|
-
*/
|
|
2490
|
-
closestElement(
|
|
2491
|
-
selector, // selector like in .closest()
|
|
2492
|
-
base = this, // extra functionality to skip a parent
|
|
2493
|
-
__Closest = (el, found = el && el.closest(selector)) =>
|
|
2494
|
-
!el || el === document || el === window
|
|
2495
|
-
? null // standard .closest() returns null for non-found selectors also
|
|
2496
|
-
: found
|
|
2497
|
-
? found // found a selector INside this element
|
|
2498
|
-
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
2499
|
-
) {
|
|
2500
|
-
return __Closest(base);
|
|
2501
|
-
}
|
|
2502
|
-
/* eslint-enable jsdoc/require-param */
|
|
2503
|
-
|
|
2504
|
-
/**
|
|
2505
|
-
* If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
|
|
2506
|
-
* @param {Object} elem - The element to check.
|
|
2507
|
-
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
2508
|
-
* @returns {void}
|
|
2509
|
-
*/
|
|
2510
|
-
handleComponentTagRename(elem, tagName) {
|
|
2511
|
-
const tag = tagName.toLowerCase();
|
|
2512
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
2513
|
-
|
|
2514
|
-
if (elemTag !== tag) {
|
|
2515
|
-
elem.setAttribute(tag, true);
|
|
2516
|
-
}
|
|
2517
|
-
}
|
|
2518
|
-
|
|
2519
|
-
/**
|
|
2520
|
-
* Validates if an element is a specific Auro component.
|
|
2521
|
-
* @param {Object} elem - The element to validate.
|
|
2522
|
-
* @param {String} tagName - The name of the Auro component to check against.
|
|
2523
|
-
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
2524
|
-
*/
|
|
2525
|
-
elementMatch(elem, tagName) {
|
|
2526
|
-
const tag = tagName.toLowerCase();
|
|
2527
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
2528
|
-
|
|
2529
|
-
return elemTag === tag || elem.hasAttribute(tag);
|
|
2530
|
-
}
|
|
2531
|
-
};
|
|
2532
|
-
|
|
2533
|
-
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
2534
|
-
// See LICENSE in the project root for license information.
|
|
2535
|
-
|
|
2536
|
-
|
|
2537
|
-
/**
|
|
2538
|
-
* Displays help text or error messages within form elements - Internal Use Only.
|
|
2539
|
-
*
|
|
2540
|
-
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
2541
|
-
*/
|
|
2542
|
-
let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
2543
|
-
|
|
2544
|
-
constructor() {
|
|
2545
|
-
super();
|
|
2546
|
-
|
|
2547
|
-
this.error = false;
|
|
2548
|
-
this.onDark = false;
|
|
2549
|
-
this.hasTextContent = false;
|
|
2550
|
-
|
|
2551
|
-
AuroLibraryRuntimeUtils$5.prototype.handleComponentTagRename(this, 'auro-helptext');
|
|
2552
|
-
}
|
|
2553
|
-
|
|
2554
|
-
static get styles() {
|
|
2555
|
-
return [
|
|
2556
|
-
colorCss$6,
|
|
2557
|
-
styleCss$7,
|
|
2558
|
-
tokensCss$4
|
|
2559
|
-
];
|
|
2560
|
-
}
|
|
2561
|
-
|
|
2562
|
-
// function to define props used within the scope of this component
|
|
2563
|
-
static get properties() {
|
|
2564
|
-
return {
|
|
2565
|
-
|
|
2566
|
-
/**
|
|
2567
|
-
* @private
|
|
2568
|
-
*/
|
|
2569
|
-
slotNodes: {
|
|
2570
|
-
type: Boolean,
|
|
2571
|
-
},
|
|
2572
|
-
|
|
2573
|
-
/**
|
|
2574
|
-
* @private
|
|
2575
|
-
*/
|
|
2576
|
-
hasTextContent: {
|
|
2577
|
-
type: Boolean,
|
|
2578
|
-
},
|
|
2579
|
-
|
|
2580
|
-
/**
|
|
2581
|
-
* If declared, make font color red.
|
|
2582
|
-
*/
|
|
2583
|
-
error: {
|
|
2584
|
-
type: Boolean,
|
|
2585
|
-
reflect: true,
|
|
2586
|
-
},
|
|
2587
|
-
|
|
2588
|
-
/**
|
|
2589
|
-
* If declared, will apply onDark styles.
|
|
2590
|
-
*/
|
|
2591
|
-
onDark: {
|
|
2592
|
-
type: Boolean,
|
|
2593
|
-
reflect: true
|
|
2594
|
-
}
|
|
2595
|
-
};
|
|
2596
|
-
}
|
|
2597
|
-
|
|
2598
|
-
/**
|
|
2599
|
-
* This will register this element with the browser.
|
|
2600
|
-
* @param {string} [name="auro-helptext"] - The name of element that you want to register to.
|
|
2601
|
-
*
|
|
2602
|
-
* @example
|
|
2603
|
-
* AuroCheckbox.register("custom-helptext") // this will register this element to <custom-helptext/>
|
|
2604
|
-
*
|
|
2605
|
-
*/
|
|
2606
|
-
static register(name = "auro-helptext") {
|
|
2607
|
-
AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroHelpText);
|
|
2608
|
-
}
|
|
2609
|
-
|
|
2610
|
-
updated() {
|
|
2611
|
-
this.handleSlotChange();
|
|
2612
|
-
}
|
|
2613
|
-
|
|
2614
|
-
handleSlotChange(event) {
|
|
2615
|
-
if (event) {
|
|
2616
|
-
this.slotNodes = event.target.assignedNodes();
|
|
2617
|
-
}
|
|
2618
|
-
|
|
2619
|
-
this.hasTextContent = this.checkSlotsForContent(this.slotNodes);
|
|
2620
|
-
}
|
|
2621
|
-
|
|
2622
|
-
/**
|
|
2623
|
-
* Checks if any of the provided nodes or their nested slot nodes contain non-empty text content.
|
|
2624
|
-
*
|
|
2625
|
-
* @param {NodeList|Array} nodes - The list of nodes to check for content.
|
|
2626
|
-
* @returns {boolean} - Returns true if any node or nested slot node contains non-empty text content, otherwise false.
|
|
2627
|
-
* @private
|
|
2628
|
-
*/
|
|
2629
|
-
checkSlotsForContent(nodes) {
|
|
2630
|
-
if (!nodes) {
|
|
2631
|
-
return false;
|
|
2632
|
-
}
|
|
2633
|
-
|
|
2634
|
-
return nodes.some((node) => {
|
|
2635
|
-
if (node.textContent.trim()) {
|
|
2636
|
-
return true;
|
|
2637
|
-
}
|
|
2638
|
-
|
|
2639
|
-
if (!node.querySelector) {
|
|
2640
|
-
return false;
|
|
2641
|
-
}
|
|
2642
|
-
|
|
2643
|
-
const nestedSlot = node.tagName === 'SLOT' ? node : node.querySelector('slot');
|
|
2644
|
-
if (!nestedSlot) {
|
|
2645
|
-
return false;
|
|
2646
|
-
}
|
|
2647
|
-
|
|
2648
|
-
const nestedSlotNodes = nestedSlot.assignedNodes();
|
|
2649
|
-
return this.checkSlotsForContent(nestedSlotNodes);
|
|
2650
|
-
});
|
|
2651
|
-
}
|
|
2652
|
-
|
|
2653
|
-
// function that renders the HTML and CSS into the scope of the component
|
|
2654
|
-
render() {
|
|
2655
|
-
return x`
|
|
2656
|
-
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
2657
|
-
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
2658
|
-
</div>
|
|
2659
|
-
`;
|
|
2660
|
-
}
|
|
2661
|
-
};
|
|
2453
|
+
var colorCss$6 = i$5`.label{color:var(--ds-auro-counter-label-text-color)}[name=description]::slotted(*){color:var(--ds-auro-counter-description-text-color)}.controlIcon{color:var(--ds-auro-counter-icon-color)}.quantityWrapper{background-color:var(--ds-auro-counter-control-background-color);color:var(--ds-auro-counter-quantity-text-color)}:host::part(counterControl):focus-visible{outline-color:var(--ds-auro-counter-control-border-color)}[disabled],:host([disabled]){--ds-auro-counter-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-counter-description-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-counter-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-counter-quantity-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}[onDark],:host([onDark]){--ds-auro-counter-description-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-counter-label-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-counter-quantity-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-counter-control-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-counter-control-background-color: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-counter-icon-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff)}[onDark][disabled],:host([onDark][disabled]){--ds-auro-counter-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-counter-quantity-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-counter-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
|
|
2662
2454
|
|
|
2663
|
-
var
|
|
2455
|
+
var styleCss$7 = i$5`.counter{display:flex;align-items:center;justify-content:space-between;column-gap:var(--ds-size-150, 0.75rem)}.content{display:flex;flex-flow:column}[name=description]::slotted(*){display:block;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}.quantityWrapper{width:var(--ds-size-400, 2rem);height:calc(var(--ds-size-25, 0.125rem) + var(--ds-size-400, 2rem));align-content:center;cursor:default;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px;text-align:center}:host{position:relative}:host::part(counterControl){display:flex;border-radius:var(--ds-size-500, 2.5rem);line-height:0;touch-action:manipulation}:host::part(counterControl):focus-visible{outline-offset:0;outline-style:solid;outline-width:var(--ds-size-25, 0.125rem)}:host::part(controlMinus){--ds-auro-counter-control-border-radius: var(--ds-size-500, 2.5rem) 0 0 var(--ds-size-500, 2.5rem);--ds-auro-counter-control-padding: var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host::part(controlPlus){--ds-auro-counter-control-border-radius: 0 var(--ds-size-500, 2.5rem) var(--ds-size-500, 2.5rem) 0;--ds-auro-counter-control-padding: var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem) var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem)}auro-counter-button{display:flex}`;
|
|
2664
2456
|
|
|
2665
2457
|
/* eslint-disable lit/binding-positions, lit/no-invalid-html, max-lines */
|
|
2666
2458
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
@@ -2710,11 +2502,6 @@ class AuroCounter extends i$2 {
|
|
|
2710
2502
|
*/
|
|
2711
2503
|
this.iconTag = versioning.generateTag("auro-formkit-counter-icon", iconVersion$2, AuroIcon$2);
|
|
2712
2504
|
|
|
2713
|
-
/**
|
|
2714
|
-
* @private
|
|
2715
|
-
*/
|
|
2716
|
-
this.helpTextTag = versioning.generateTag('auro-formkit-input-helptext', helptextVersion, AuroHelpText$1);
|
|
2717
|
-
|
|
2718
2505
|
/**
|
|
2719
2506
|
* @private
|
|
2720
2507
|
* @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
|
|
@@ -2775,15 +2562,6 @@ class AuroCounter extends i$2 {
|
|
|
2775
2562
|
type: Boolean,
|
|
2776
2563
|
},
|
|
2777
2564
|
|
|
2778
|
-
/**
|
|
2779
|
-
* Error state and message.
|
|
2780
|
-
* True if set, value is the error message.
|
|
2781
|
-
*/
|
|
2782
|
-
error: {
|
|
2783
|
-
type: String,
|
|
2784
|
-
reflect: false,
|
|
2785
|
-
},
|
|
2786
|
-
|
|
2787
2565
|
/**
|
|
2788
2566
|
* The maximum value for the counter.
|
|
2789
2567
|
*/
|
|
@@ -2838,8 +2616,8 @@ class AuroCounter extends i$2 {
|
|
|
2838
2616
|
static get styles() {
|
|
2839
2617
|
return [
|
|
2840
2618
|
tokens,
|
|
2841
|
-
colorCss$
|
|
2842
|
-
styleCss$
|
|
2619
|
+
colorCss$6,
|
|
2620
|
+
styleCss$7
|
|
2843
2621
|
];
|
|
2844
2622
|
}
|
|
2845
2623
|
|
|
@@ -2980,85 +2758,56 @@ class AuroCounter extends i$2 {
|
|
|
2980
2758
|
}
|
|
2981
2759
|
}
|
|
2982
2760
|
|
|
2983
|
-
/**
|
|
2984
|
-
* Returns HTML for the help text and error message.
|
|
2985
|
-
* @private
|
|
2986
|
-
* @returns {html} - Returns HTML for the help text and error message.
|
|
2987
|
-
*/
|
|
2988
|
-
renderHelpText() {
|
|
2989
|
-
return u`
|
|
2990
|
-
${!this.validity || this.validity === undefined || this.validity === 'valid'
|
|
2991
|
-
? u`
|
|
2992
|
-
<${this.helpTextTag} ?onDark="${this.onDark}">
|
|
2993
|
-
<p id="${this.uniqueId}" part="helpText">
|
|
2994
|
-
<slot name="helptext"></slot>
|
|
2995
|
-
</p>
|
|
2996
|
-
</${this.helpTextTag}>
|
|
2997
|
-
`
|
|
2998
|
-
: u`
|
|
2999
|
-
<${this.helpTextTag} error ?onDark="${this.onDark}">
|
|
3000
|
-
<p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
|
|
3001
|
-
${this.errorMessage}
|
|
3002
|
-
</p>
|
|
3003
|
-
</${this.helpTextTag}>
|
|
3004
|
-
`
|
|
3005
|
-
}
|
|
3006
|
-
`;
|
|
3007
|
-
}
|
|
3008
|
-
|
|
3009
2761
|
render() {
|
|
3010
2762
|
return u`
|
|
3011
|
-
<div class="
|
|
3012
|
-
<div class="
|
|
3013
|
-
<
|
|
3014
|
-
|
|
3015
|
-
|
|
3016
|
-
|
|
3017
|
-
|
|
3018
|
-
|
|
3019
|
-
|
|
3020
|
-
|
|
3021
|
-
|
|
3022
|
-
|
|
3023
|
-
|
|
3024
|
-
|
|
3025
|
-
|
|
3026
|
-
|
|
2763
|
+
<div class="counter">
|
|
2764
|
+
<div class="content" >
|
|
2765
|
+
<label id="counter-label" class="label"><slot @slotchange="${this.onDefaultSlotChange}" ></slot></label>
|
|
2766
|
+
<slot id="counter-description" name="description"></slot>
|
|
2767
|
+
</div>
|
|
2768
|
+
<div
|
|
2769
|
+
part="counterControl"
|
|
2770
|
+
aria-labelledby="counter-label"
|
|
2771
|
+
aria-describedby="counter-description"
|
|
2772
|
+
tabindex="${this.disabled ? '-1' : '0'}"
|
|
2773
|
+
role="spinbutton"
|
|
2774
|
+
aria-valuemin="${this.min}"
|
|
2775
|
+
aria-valuemax="${this.max}"
|
|
2776
|
+
aria-valuenow="${this.value}"
|
|
2777
|
+
aria-valuetext="${this.value !== undefined ? this.value : this.min}"
|
|
2778
|
+
>
|
|
2779
|
+
<auro-counter-button
|
|
2780
|
+
aria-hidden="true"
|
|
2781
|
+
.tabindex="${'-1'}"
|
|
2782
|
+
part="controlMinus"
|
|
2783
|
+
@click="${() => this.decrement()}"
|
|
2784
|
+
?onDark="${this.onDark}"
|
|
2785
|
+
?disabled="${this.disabled || this.disableMin || this.isIncrementDisabled(this.min)}"
|
|
3027
2786
|
>
|
|
3028
|
-
|
|
3029
|
-
|
|
3030
|
-
|
|
3031
|
-
|
|
3032
|
-
|
|
3033
|
-
?onDark="${this.onDark}"
|
|
3034
|
-
?disabled="${this.disabled || this.disableMin || this.isIncrementDisabled(this.min)}"
|
|
3035
|
-
>
|
|
3036
|
-
<${this.iconTag} class="controlIcon" customSvg> ${IconUtil.generateSvgHtml(minusIcon)} </${this.iconTag}>
|
|
3037
|
-
</auro-counter-button>
|
|
3038
|
-
|
|
3039
|
-
<div class="quantityWrapper">
|
|
3040
|
-
<div class="quantity">${this.value !== undefined ? this.value : this.min}</div>
|
|
3041
|
-
</div>
|
|
3042
|
-
|
|
3043
|
-
<auro-counter-button
|
|
3044
|
-
aria-hidden="true"
|
|
3045
|
-
.tabindex="${'-1'}"
|
|
3046
|
-
part="controlPlus"
|
|
3047
|
-
@click="${() => this.increment()}"
|
|
3048
|
-
?onDark="${this.onDark}"
|
|
3049
|
-
?disabled="${this.disabled || this.disableMax || this.isIncrementDisabled(this.max)}"
|
|
3050
|
-
>
|
|
3051
|
-
<${this.iconTag} class="controlIcon" customSvg> ${IconUtil.generateSvgHtml(plusIcon)} </${this.iconTag}>
|
|
3052
|
-
</auro-counter-button>
|
|
2787
|
+
<${this.iconTag} class="controlIcon" customSvg> ${IconUtil.generateSvgHtml(minusIcon)} </${this.iconTag}>
|
|
2788
|
+
</auro-counter-button>
|
|
2789
|
+
|
|
2790
|
+
<div class="quantityWrapper">
|
|
2791
|
+
<div class="quantity">${this.value !== undefined ? this.value : this.min}</div>
|
|
3053
2792
|
</div>
|
|
2793
|
+
|
|
2794
|
+
<auro-counter-button
|
|
2795
|
+
aria-hidden="true"
|
|
2796
|
+
.tabindex="${'-1'}"
|
|
2797
|
+
part="controlPlus"
|
|
2798
|
+
@click="${() => this.increment()}"
|
|
2799
|
+
?onDark="${this.onDark}"
|
|
2800
|
+
?disabled="${this.disabled || this.disableMax || this.isIncrementDisabled(this.max)}"
|
|
2801
|
+
>
|
|
2802
|
+
<${this.iconTag} class="controlIcon" customSvg> ${IconUtil.generateSvgHtml(plusIcon)} </${this.iconTag}>
|
|
2803
|
+
</auro-counter-button>
|
|
3054
2804
|
</div>
|
|
3055
|
-
${this.renderHelpText()}
|
|
3056
2805
|
</div>
|
|
3057
2806
|
`;
|
|
3058
2807
|
}
|
|
3059
2808
|
}
|
|
3060
2809
|
|
|
3061
|
-
var counterGroupStyles = i$5`:host(:not([layout=classic])) .triggerContent{padding:0
|
|
2810
|
+
var counterGroupStyles = i$5`:host(:not([layout=classic])) .triggerContent{padding:0 8px 0 24px}:host([layout=snowflake]) [auro-dropdown] .mainContent{align-items:center}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}.mainContent{display:flex;width:100%;flex-direction:column;align-items:flex-start;justify-content:center}label{font-size:var(--ds-text-body-size-default, 1rem);line-height:20px}label.filled{font-size:var(--ds-text-body-size-xs, 0.75rem)}.accents ::slotted([slot=typeIcon]){margin-right:8px}.accents ::slotted(*):not(.util_displayHidden){display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}slot[name=valueText]{font-size:var(--ds-text-body-size-default, 1rem);overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.counters{display:flex;flex-direction:column;gap:var(--ds-size-300, 1.5rem)}.counters ::slotted(auro-counter:not(:first-of-type)){padding-top:var(--ds-size-300, 1.5rem);border-top-width:1px;border-top-style:solid}`;
|
|
3062
2811
|
|
|
3063
2812
|
var shapeSizeCss$1 = i$5`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:58px;max-height:58px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}`;
|
|
3064
2813
|
|
|
@@ -5998,7 +5747,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
5998
5747
|
|
|
5999
5748
|
var iconVersion$1 = '6.1.2';
|
|
6000
5749
|
|
|
6001
|
-
var styleCss$1$
|
|
5750
|
+
var styleCss$1$2 = i$5`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}`;
|
|
6002
5751
|
|
|
6003
5752
|
var colorCss$2$1 = i$5`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
6004
5753
|
|
|
@@ -6040,7 +5789,7 @@ class AuroDropdownBib extends i$2 {
|
|
|
6040
5789
|
|
|
6041
5790
|
static get styles() {
|
|
6042
5791
|
return [
|
|
6043
|
-
styleCss$1$
|
|
5792
|
+
styleCss$1$2,
|
|
6044
5793
|
colorCss$2$1,
|
|
6045
5794
|
tokensCss$1$1
|
|
6046
5795
|
];
|
|
@@ -6199,11 +5948,11 @@ var dropdownVersion$1 = '3.0.0';
|
|
|
6199
5948
|
|
|
6200
5949
|
var shapeSizeCss = i$5`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:58px;max-height:58px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}`;
|
|
6201
5950
|
|
|
6202
|
-
var colorCss$1$
|
|
5951
|
+
var colorCss$1$2 = i$5`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([ondark])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([onDark])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([ondark])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]) .label{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark]) .wrapper:focus-within,:host([onDark]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([ondark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
|
|
6203
5952
|
|
|
6204
5953
|
var classicColorCss = i$5``;
|
|
6205
5954
|
|
|
6206
|
-
var classicLayoutCss = i$5`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) .label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}@media(hover: hover){:host([layout*=classic]) .wrapper:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}`;
|
|
5955
|
+
var classicLayoutCss = i$5`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) .label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}@media(hover: hover){:host([layout*=classic]) .wrapper:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
|
|
6207
5956
|
|
|
6208
5957
|
var styleEmphasizedCss = i$5`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-right:var(--ds-size-300, 1.5rem)}`;
|
|
6209
5958
|
|
|
@@ -6211,9 +5960,9 @@ var styleSnowflakeCss = i$5`:host{display:block}.wrapper{display:flex;flex:1;fle
|
|
|
6211
5960
|
|
|
6212
5961
|
var colorCss$5 = i$5`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
6213
5962
|
|
|
6214
|
-
var styleCss$6 = i$5
|
|
5963
|
+
var styleCss$6 = i$5`.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
6215
5964
|
|
|
6216
|
-
var tokensCss$
|
|
5965
|
+
var tokensCss$4 = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
6217
5966
|
|
|
6218
5967
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
6219
5968
|
// See LICENSE in the project root for license information.
|
|
@@ -6222,7 +5971,7 @@ var tokensCss$3 = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texti
|
|
|
6222
5971
|
|
|
6223
5972
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
6224
5973
|
|
|
6225
|
-
let AuroLibraryRuntimeUtils$
|
|
5974
|
+
let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
|
|
6226
5975
|
|
|
6227
5976
|
/* eslint-disable jsdoc/require-param */
|
|
6228
5977
|
|
|
@@ -6294,7 +6043,7 @@ let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
|
|
|
6294
6043
|
*
|
|
6295
6044
|
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
6296
6045
|
*/
|
|
6297
|
-
class AuroHelpText extends i$2 {
|
|
6046
|
+
let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
6298
6047
|
|
|
6299
6048
|
constructor() {
|
|
6300
6049
|
super();
|
|
@@ -6303,14 +6052,14 @@ class AuroHelpText extends i$2 {
|
|
|
6303
6052
|
this.onDark = false;
|
|
6304
6053
|
this.hasTextContent = false;
|
|
6305
6054
|
|
|
6306
|
-
AuroLibraryRuntimeUtils$
|
|
6055
|
+
AuroLibraryRuntimeUtils$5.prototype.handleComponentTagRename(this, 'auro-helptext');
|
|
6307
6056
|
}
|
|
6308
6057
|
|
|
6309
6058
|
static get styles() {
|
|
6310
6059
|
return [
|
|
6311
6060
|
colorCss$5,
|
|
6312
6061
|
styleCss$6,
|
|
6313
|
-
tokensCss$
|
|
6062
|
+
tokensCss$4
|
|
6314
6063
|
];
|
|
6315
6064
|
}
|
|
6316
6065
|
|
|
@@ -6359,7 +6108,7 @@ class AuroHelpText extends i$2 {
|
|
|
6359
6108
|
*
|
|
6360
6109
|
*/
|
|
6361
6110
|
static register(name = "auro-helptext") {
|
|
6362
|
-
AuroLibraryRuntimeUtils$
|
|
6111
|
+
AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroHelpText);
|
|
6363
6112
|
}
|
|
6364
6113
|
|
|
6365
6114
|
updated() {
|
|
@@ -6413,7 +6162,7 @@ class AuroHelpText extends i$2 {
|
|
|
6413
6162
|
</div>
|
|
6414
6163
|
`;
|
|
6415
6164
|
}
|
|
6416
|
-
}
|
|
6165
|
+
};
|
|
6417
6166
|
|
|
6418
6167
|
var helpTextVersion = '1.0.0';
|
|
6419
6168
|
|
|
@@ -6516,8 +6265,10 @@ let AuroElement$3 = class AuroElement extends i$2 {
|
|
|
6516
6265
|
// See LICENSE in the project root for license information.
|
|
6517
6266
|
|
|
6518
6267
|
|
|
6519
|
-
|
|
6268
|
+
/**
|
|
6269
|
+
* @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
|
|
6520
6270
|
* @slot - Default slot for the popover content.
|
|
6271
|
+
* @slot label - Defines the content of the label.
|
|
6521
6272
|
* @slot helpText - Defines the content of the helpText.
|
|
6522
6273
|
* @slot trigger - Defines the content of the trigger.
|
|
6523
6274
|
* @csspart trigger - The trigger content container.
|
|
@@ -6536,22 +6287,18 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6536
6287
|
this.matchWidth = false;
|
|
6537
6288
|
this.noHideOnThisFocusLoss = false;
|
|
6538
6289
|
|
|
6539
|
-
this.errorMessage =
|
|
6290
|
+
this.errorMessage = ''; // TODO - check with Doug if there is still more to do here
|
|
6540
6291
|
|
|
6541
6292
|
// Layout Config
|
|
6542
|
-
this.layout =
|
|
6543
|
-
this.shape =
|
|
6544
|
-
this.size =
|
|
6293
|
+
this.layout = 'classic';
|
|
6294
|
+
this.shape = 'classic';
|
|
6295
|
+
this.size = 'xl';
|
|
6545
6296
|
|
|
6546
6297
|
this.parentBorder = false;
|
|
6547
6298
|
|
|
6548
6299
|
this.privateDefaults();
|
|
6549
6300
|
}
|
|
6550
6301
|
|
|
6551
|
-
/**
|
|
6552
|
-
* @private
|
|
6553
|
-
* @returns {object} Class definition for the wrapper element.
|
|
6554
|
-
*/
|
|
6555
6302
|
get commonWrapperClasses() {
|
|
6556
6303
|
return {
|
|
6557
6304
|
'trigger': true,
|
|
@@ -6571,8 +6318,12 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6571
6318
|
this.disabled = false;
|
|
6572
6319
|
this.disableFocusTrap = false;
|
|
6573
6320
|
this.error = false;
|
|
6321
|
+
this.inset = false;
|
|
6322
|
+
this.rounded = false;
|
|
6574
6323
|
this.tabIndex = 0;
|
|
6575
6324
|
this.noToggle = false;
|
|
6325
|
+
this.a11yAutocomplete = 'none';
|
|
6326
|
+
this.labeled = true;
|
|
6576
6327
|
this.a11yRole = 'button';
|
|
6577
6328
|
this.onDark = false;
|
|
6578
6329
|
this.showTriggerBorders = true;
|
|
@@ -6632,7 +6383,7 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6632
6383
|
/**
|
|
6633
6384
|
* @private
|
|
6634
6385
|
*/
|
|
6635
|
-
this.helpTextTag = versioning.generateTag('auro-formkit-dropdown-helptext', helpTextVersion, AuroHelpText);
|
|
6386
|
+
this.helpTextTag = versioning.generateTag('auro-formkit-dropdown-helptext', helpTextVersion, AuroHelpText$1);
|
|
6636
6387
|
|
|
6637
6388
|
/**
|
|
6638
6389
|
* @private
|
|
@@ -6693,15 +6444,6 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6693
6444
|
reflect: true
|
|
6694
6445
|
},
|
|
6695
6446
|
|
|
6696
|
-
/**
|
|
6697
|
-
* If declared, the dropdown will only show by calling the API .show() public method.
|
|
6698
|
-
* @default false
|
|
6699
|
-
*/
|
|
6700
|
-
disableEventShow: {
|
|
6701
|
-
type: Boolean,
|
|
6702
|
-
reflect: true
|
|
6703
|
-
},
|
|
6704
|
-
|
|
6705
6447
|
/**
|
|
6706
6448
|
* If declared, applies a border around the trigger slot.
|
|
6707
6449
|
*/
|
|
@@ -6720,15 +6462,23 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6720
6462
|
},
|
|
6721
6463
|
|
|
6722
6464
|
/**
|
|
6723
|
-
* If declared, the dropdown
|
|
6465
|
+
* If declared, the dropdown will be styled with the common theme.
|
|
6724
6466
|
*/
|
|
6725
|
-
|
|
6467
|
+
common: {
|
|
6726
6468
|
type: Boolean,
|
|
6727
6469
|
reflect: true
|
|
6728
6470
|
},
|
|
6729
6471
|
|
|
6730
6472
|
/**
|
|
6731
|
-
* If declared, the
|
|
6473
|
+
* If declared, the dropdown is not interactive.
|
|
6474
|
+
*/
|
|
6475
|
+
disabled: {
|
|
6476
|
+
type: Boolean,
|
|
6477
|
+
reflect: true
|
|
6478
|
+
},
|
|
6479
|
+
|
|
6480
|
+
/**
|
|
6481
|
+
* If declare, the focus trap inside of bib will be turned off.
|
|
6732
6482
|
*/
|
|
6733
6483
|
disableFocusTrap: {
|
|
6734
6484
|
type: Boolean,
|
|
@@ -6775,6 +6525,22 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6775
6525
|
reflect: true
|
|
6776
6526
|
},
|
|
6777
6527
|
|
|
6528
|
+
/**
|
|
6529
|
+
* Makes the trigger to be full width of its parent container.
|
|
6530
|
+
*/
|
|
6531
|
+
fluid: {
|
|
6532
|
+
type: Boolean,
|
|
6533
|
+
reflect: true
|
|
6534
|
+
},
|
|
6535
|
+
|
|
6536
|
+
/**
|
|
6537
|
+
* If declared, will apply padding around trigger slot content.
|
|
6538
|
+
*/
|
|
6539
|
+
inset: {
|
|
6540
|
+
type: Boolean,
|
|
6541
|
+
reflect: true
|
|
6542
|
+
},
|
|
6543
|
+
|
|
6778
6544
|
/**
|
|
6779
6545
|
* If true, the dropdown bib is displayed.
|
|
6780
6546
|
*/
|
|
@@ -6818,6 +6584,15 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6818
6584
|
reflect: true
|
|
6819
6585
|
},
|
|
6820
6586
|
|
|
6587
|
+
/**
|
|
6588
|
+
* Defines if there is a label preset.
|
|
6589
|
+
* @private
|
|
6590
|
+
*/
|
|
6591
|
+
labeled: {
|
|
6592
|
+
type: Boolean,
|
|
6593
|
+
reflect: true
|
|
6594
|
+
},
|
|
6595
|
+
|
|
6821
6596
|
/**
|
|
6822
6597
|
* Defines if the trigger should size based on the parent element providing the border UI.
|
|
6823
6598
|
* @private
|
|
@@ -6878,9 +6653,6 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6878
6653
|
reflect: true
|
|
6879
6654
|
},
|
|
6880
6655
|
|
|
6881
|
-
/**
|
|
6882
|
-
* If declared, and a function is set, that function will execute when the slot content is updated.
|
|
6883
|
-
*/
|
|
6884
6656
|
onSlotChange: {
|
|
6885
6657
|
type: Function,
|
|
6886
6658
|
reflect: false
|
|
@@ -6895,6 +6667,14 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6895
6667
|
reflect: true
|
|
6896
6668
|
},
|
|
6897
6669
|
|
|
6670
|
+
/**
|
|
6671
|
+
* If declared, will apply border-radius to trigger and default slots.
|
|
6672
|
+
*/
|
|
6673
|
+
rounded: {
|
|
6674
|
+
type: Boolean,
|
|
6675
|
+
reflect: true
|
|
6676
|
+
},
|
|
6677
|
+
|
|
6898
6678
|
/**
|
|
6899
6679
|
* @private
|
|
6900
6680
|
*/
|
|
@@ -6909,14 +6689,22 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6909
6689
|
type: String || undefined,
|
|
6910
6690
|
attribute: false,
|
|
6911
6691
|
reflect: false
|
|
6692
|
+
},
|
|
6693
|
+
|
|
6694
|
+
/**
|
|
6695
|
+
* The value for the aria-autocomplete attribute of the trigger element.
|
|
6696
|
+
*/
|
|
6697
|
+
a11yAutocomplete: {
|
|
6698
|
+
type: String,
|
|
6699
|
+
attribute: false,
|
|
6912
6700
|
}
|
|
6913
6701
|
};
|
|
6914
6702
|
}
|
|
6915
6703
|
|
|
6916
6704
|
static get styles() {
|
|
6917
6705
|
return [
|
|
6706
|
+
colorCss$1$2,
|
|
6918
6707
|
tokensCss$1$1,
|
|
6919
|
-
colorCss$1$1,
|
|
6920
6708
|
|
|
6921
6709
|
// default layout
|
|
6922
6710
|
classicColorCss,
|
|
@@ -7356,7 +7144,10 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
7356
7144
|
id="bib"
|
|
7357
7145
|
shape="${this.shape}"
|
|
7358
7146
|
?data-show="${this.isPopoverVisible}"
|
|
7359
|
-
?isfullscreen="${this.isBibFullscreen}"
|
|
7147
|
+
?isfullscreen="${this.isBibFullscreen}"
|
|
7148
|
+
?common="${this.common}"
|
|
7149
|
+
?rounded="${this.common || this.rounded}"
|
|
7150
|
+
?inset="${this.common || this.inset}">
|
|
7360
7151
|
<div class="slotContent">
|
|
7361
7152
|
<slot @slotchange="${this.handleDefaultSlot}"></slot>
|
|
7362
7153
|
</div>
|
|
@@ -8106,7 +7897,7 @@ let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
|
8106
7897
|
|
|
8107
7898
|
var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin:0.375rem;--margin-xs:0.2rem;--margin-sm:0.5rem;--margin-md:0.75rem;--margin-lg:1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;
|
|
8108
7899
|
|
|
8109
|
-
var colorCss$1 = 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}`;
|
|
7900
|
+
var colorCss$1$1 = 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}`;
|
|
8110
7901
|
|
|
8111
7902
|
var tokensCss$1 = i$5`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
|
|
8112
7903
|
|
|
@@ -8185,7 +7976,7 @@ class AuroLoader extends i$2 {
|
|
|
8185
7976
|
static get styles() {
|
|
8186
7977
|
return [
|
|
8187
7978
|
i$5`${styleCss$2}`,
|
|
8188
|
-
i$5`${colorCss$1}`,
|
|
7979
|
+
i$5`${colorCss$1$1}`,
|
|
8189
7980
|
i$5`${tokensCss$1}`
|
|
8190
7981
|
];
|
|
8191
7982
|
}
|
|
@@ -8671,7 +8462,7 @@ const cacheFetch = (uri, options = {}) => {
|
|
|
8671
8462
|
return _fetchMap.get(uri);
|
|
8672
8463
|
};
|
|
8673
8464
|
|
|
8674
|
-
var styleCss$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, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;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}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
|
|
8465
|
+
var styleCss$1$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, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;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}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
|
|
8675
8466
|
|
|
8676
8467
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
8677
8468
|
// See LICENSE in the project root for license information.
|
|
@@ -8714,7 +8505,7 @@ class BaseIcon extends AuroElement$2 {
|
|
|
8714
8505
|
|
|
8715
8506
|
static get styles() {
|
|
8716
8507
|
return i$5`
|
|
8717
|
-
${styleCss$1}
|
|
8508
|
+
${styleCss$1$1}
|
|
8718
8509
|
`;
|
|
8719
8510
|
}
|
|
8720
8511
|
|
|
@@ -8755,7 +8546,7 @@ class BaseIcon extends AuroElement$2 {
|
|
|
8755
8546
|
}
|
|
8756
8547
|
}
|
|
8757
8548
|
|
|
8758
|
-
var tokensCss = 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)}`;
|
|
8549
|
+
var tokensCss$3 = 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)}`;
|
|
8759
8550
|
|
|
8760
8551
|
var colorCss$4 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
|
|
8761
8552
|
|
|
@@ -8915,8 +8706,8 @@ class AuroIcon extends BaseIcon {
|
|
|
8915
8706
|
static get styles() {
|
|
8916
8707
|
return [
|
|
8917
8708
|
super.styles,
|
|
8918
|
-
i$5`${tokensCss}`,
|
|
8919
|
-
i$5`${styleCss$1}`,
|
|
8709
|
+
i$5`${tokensCss$3}`,
|
|
8710
|
+
i$5`${styleCss$1$1}`,
|
|
8920
8711
|
i$5`${colorCss$4}`
|
|
8921
8712
|
];
|
|
8922
8713
|
}
|
|
@@ -9009,7 +8800,7 @@ var iconVersion = '8.0.4';
|
|
|
9009
8800
|
|
|
9010
8801
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
9011
8802
|
|
|
9012
|
-
class AuroLibraryRuntimeUtils {
|
|
8803
|
+
let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
|
|
9013
8804
|
|
|
9014
8805
|
/* eslint-disable jsdoc/require-param */
|
|
9015
8806
|
|
|
@@ -9070,7 +8861,7 @@ class AuroLibraryRuntimeUtils {
|
|
|
9070
8861
|
|
|
9071
8862
|
return elemTag === tag || elem.hasAttribute(tag);
|
|
9072
8863
|
}
|
|
9073
|
-
}
|
|
8864
|
+
};
|
|
9074
8865
|
|
|
9075
8866
|
var styleCss$5 = i$5`.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}:host([no-margin-block]) .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, 0.125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, 0.25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, 0.5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, 0.75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, 0.125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, 0.25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, 0.5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, 0.75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}`;
|
|
9076
8867
|
|
|
@@ -9101,7 +8892,7 @@ class AuroHeader extends i$2 {
|
|
|
9101
8892
|
/**
|
|
9102
8893
|
* @private
|
|
9103
8894
|
*/
|
|
9104
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
8895
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
|
|
9105
8896
|
}
|
|
9106
8897
|
|
|
9107
8898
|
// function to define props used within the scope of this component
|
|
@@ -9131,7 +8922,7 @@ class AuroHeader extends i$2 {
|
|
|
9131
8922
|
*
|
|
9132
8923
|
*/
|
|
9133
8924
|
static register(name = "auro-header") {
|
|
9134
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroHeader);
|
|
8925
|
+
AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroHeader);
|
|
9135
8926
|
}
|
|
9136
8927
|
|
|
9137
8928
|
firstUpdated() {
|
|
@@ -9337,7 +9128,7 @@ class AuroBibtemplate extends i$2 {
|
|
|
9337
9128
|
<div id="bibTemplate" part="bibtemplate">
|
|
9338
9129
|
${this.isFullscreen ? u`
|
|
9339
9130
|
<div id="headerContainer">
|
|
9340
|
-
<${this.buttonTag} id="closeButton"
|
|
9131
|
+
<${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
|
|
9341
9132
|
<${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
|
|
9342
9133
|
</${this.buttonTag}>
|
|
9343
9134
|
<${this.headerTag} display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
|
|
@@ -9363,6 +9154,214 @@ class AuroBibtemplate extends i$2 {
|
|
|
9363
9154
|
|
|
9364
9155
|
var bibTemplateVersion = '1.0.0';
|
|
9365
9156
|
|
|
9157
|
+
var colorCss$1 = i$5`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
9158
|
+
|
|
9159
|
+
var styleCss$1 = i$5`.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
9160
|
+
|
|
9161
|
+
var tokensCss = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
9162
|
+
|
|
9163
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
9164
|
+
// See LICENSE in the project root for license information.
|
|
9165
|
+
|
|
9166
|
+
// ---------------------------------------------------------------------
|
|
9167
|
+
|
|
9168
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
9169
|
+
|
|
9170
|
+
class AuroLibraryRuntimeUtils {
|
|
9171
|
+
|
|
9172
|
+
/* eslint-disable jsdoc/require-param */
|
|
9173
|
+
|
|
9174
|
+
/**
|
|
9175
|
+
* This will register a new custom element with the browser.
|
|
9176
|
+
* @param {String} name - The name of the custom element.
|
|
9177
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
9178
|
+
* @returns {void}
|
|
9179
|
+
*/
|
|
9180
|
+
registerComponent(name, componentClass) {
|
|
9181
|
+
if (!customElements.get(name)) {
|
|
9182
|
+
customElements.define(name, class extends componentClass {});
|
|
9183
|
+
}
|
|
9184
|
+
}
|
|
9185
|
+
|
|
9186
|
+
/**
|
|
9187
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
9188
|
+
* @returns {void}
|
|
9189
|
+
*/
|
|
9190
|
+
closestElement(
|
|
9191
|
+
selector, // selector like in .closest()
|
|
9192
|
+
base = this, // extra functionality to skip a parent
|
|
9193
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
9194
|
+
!el || el === document || el === window
|
|
9195
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
9196
|
+
: found
|
|
9197
|
+
? found // found a selector INside this element
|
|
9198
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
9199
|
+
) {
|
|
9200
|
+
return __Closest(base);
|
|
9201
|
+
}
|
|
9202
|
+
/* eslint-enable jsdoc/require-param */
|
|
9203
|
+
|
|
9204
|
+
/**
|
|
9205
|
+
* If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
|
|
9206
|
+
* @param {Object} elem - The element to check.
|
|
9207
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
9208
|
+
* @returns {void}
|
|
9209
|
+
*/
|
|
9210
|
+
handleComponentTagRename(elem, tagName) {
|
|
9211
|
+
const tag = tagName.toLowerCase();
|
|
9212
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
9213
|
+
|
|
9214
|
+
if (elemTag !== tag) {
|
|
9215
|
+
elem.setAttribute(tag, true);
|
|
9216
|
+
}
|
|
9217
|
+
}
|
|
9218
|
+
|
|
9219
|
+
/**
|
|
9220
|
+
* Validates if an element is a specific Auro component.
|
|
9221
|
+
* @param {Object} elem - The element to validate.
|
|
9222
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
9223
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
9224
|
+
*/
|
|
9225
|
+
elementMatch(elem, tagName) {
|
|
9226
|
+
const tag = tagName.toLowerCase();
|
|
9227
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
9228
|
+
|
|
9229
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
9230
|
+
}
|
|
9231
|
+
}
|
|
9232
|
+
|
|
9233
|
+
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
9234
|
+
// See LICENSE in the project root for license information.
|
|
9235
|
+
|
|
9236
|
+
|
|
9237
|
+
/**
|
|
9238
|
+
* Displays help text or error messages within form elements - Internal Use Only.
|
|
9239
|
+
*
|
|
9240
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
9241
|
+
*/
|
|
9242
|
+
class AuroHelpText extends i$2 {
|
|
9243
|
+
|
|
9244
|
+
constructor() {
|
|
9245
|
+
super();
|
|
9246
|
+
|
|
9247
|
+
this.error = false;
|
|
9248
|
+
this.onDark = false;
|
|
9249
|
+
this.hasTextContent = false;
|
|
9250
|
+
|
|
9251
|
+
AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(this, 'auro-helptext');
|
|
9252
|
+
}
|
|
9253
|
+
|
|
9254
|
+
static get styles() {
|
|
9255
|
+
return [
|
|
9256
|
+
colorCss$1,
|
|
9257
|
+
styleCss$1,
|
|
9258
|
+
tokensCss
|
|
9259
|
+
];
|
|
9260
|
+
}
|
|
9261
|
+
|
|
9262
|
+
// function to define props used within the scope of this component
|
|
9263
|
+
static get properties() {
|
|
9264
|
+
return {
|
|
9265
|
+
|
|
9266
|
+
/**
|
|
9267
|
+
* @private
|
|
9268
|
+
*/
|
|
9269
|
+
slotNodes: {
|
|
9270
|
+
type: Boolean,
|
|
9271
|
+
},
|
|
9272
|
+
|
|
9273
|
+
/**
|
|
9274
|
+
* @private
|
|
9275
|
+
*/
|
|
9276
|
+
hasTextContent: {
|
|
9277
|
+
type: Boolean,
|
|
9278
|
+
},
|
|
9279
|
+
|
|
9280
|
+
/**
|
|
9281
|
+
* If declared, make font color red.
|
|
9282
|
+
*/
|
|
9283
|
+
error: {
|
|
9284
|
+
type: Boolean,
|
|
9285
|
+
reflect: true,
|
|
9286
|
+
},
|
|
9287
|
+
|
|
9288
|
+
/**
|
|
9289
|
+
* If declared, will apply onDark styles.
|
|
9290
|
+
*/
|
|
9291
|
+
onDark: {
|
|
9292
|
+
type: Boolean,
|
|
9293
|
+
reflect: true
|
|
9294
|
+
}
|
|
9295
|
+
};
|
|
9296
|
+
}
|
|
9297
|
+
|
|
9298
|
+
/**
|
|
9299
|
+
* This will register this element with the browser.
|
|
9300
|
+
* @param {string} [name="auro-helptext"] - The name of element that you want to register to.
|
|
9301
|
+
*
|
|
9302
|
+
* @example
|
|
9303
|
+
* AuroCheckbox.register("custom-helptext") // this will register this element to <custom-helptext/>
|
|
9304
|
+
*
|
|
9305
|
+
*/
|
|
9306
|
+
static register(name = "auro-helptext") {
|
|
9307
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroHelpText);
|
|
9308
|
+
}
|
|
9309
|
+
|
|
9310
|
+
updated() {
|
|
9311
|
+
this.handleSlotChange();
|
|
9312
|
+
}
|
|
9313
|
+
|
|
9314
|
+
handleSlotChange(event) {
|
|
9315
|
+
if (event) {
|
|
9316
|
+
this.slotNodes = event.target.assignedNodes();
|
|
9317
|
+
}
|
|
9318
|
+
|
|
9319
|
+
this.hasTextContent = this.checkSlotsForContent(this.slotNodes);
|
|
9320
|
+
}
|
|
9321
|
+
|
|
9322
|
+
/**
|
|
9323
|
+
* Checks if any of the provided nodes or their nested slot nodes contain non-empty text content.
|
|
9324
|
+
*
|
|
9325
|
+
* @param {NodeList|Array} nodes - The list of nodes to check for content.
|
|
9326
|
+
* @returns {boolean} - Returns true if any node or nested slot node contains non-empty text content, otherwise false.
|
|
9327
|
+
* @private
|
|
9328
|
+
*/
|
|
9329
|
+
checkSlotsForContent(nodes) {
|
|
9330
|
+
if (!nodes) {
|
|
9331
|
+
return false;
|
|
9332
|
+
}
|
|
9333
|
+
|
|
9334
|
+
return nodes.some((node) => {
|
|
9335
|
+
if (node.textContent.trim()) {
|
|
9336
|
+
return true;
|
|
9337
|
+
}
|
|
9338
|
+
|
|
9339
|
+
if (!node.querySelector) {
|
|
9340
|
+
return false;
|
|
9341
|
+
}
|
|
9342
|
+
|
|
9343
|
+
const nestedSlot = node.tagName === 'SLOT' ? node : node.querySelector('slot');
|
|
9344
|
+
if (!nestedSlot) {
|
|
9345
|
+
return false;
|
|
9346
|
+
}
|
|
9347
|
+
|
|
9348
|
+
const nestedSlotNodes = nestedSlot.assignedNodes();
|
|
9349
|
+
return this.checkSlotsForContent(nestedSlotNodes);
|
|
9350
|
+
});
|
|
9351
|
+
}
|
|
9352
|
+
|
|
9353
|
+
// function that renders the HTML and CSS into the scope of the component
|
|
9354
|
+
render() {
|
|
9355
|
+
return x`
|
|
9356
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
9357
|
+
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
9358
|
+
</div>
|
|
9359
|
+
`;
|
|
9360
|
+
}
|
|
9361
|
+
}
|
|
9362
|
+
|
|
9363
|
+
var helptextVersion = '1.0.0';
|
|
9364
|
+
|
|
9366
9365
|
var styleCss = i$5`:host([isindropdown]) .wrapper{padding:var(--ds-size-300, 1.5rem)}`;
|
|
9367
9366
|
|
|
9368
9367
|
var colorCss = i$5`:host ::slotted(*:not(:first-child)){border-color:var(--ds-auro-counter-divider-color)}`;
|
|
@@ -9508,19 +9507,7 @@ class AuroElement extends i$2 {
|
|
|
9508
9507
|
}
|
|
9509
9508
|
}
|
|
9510
9509
|
|
|
9511
|
-
/*
|
|
9512
|
-
eslint-disable
|
|
9513
|
-
lit/no-invalid-html,
|
|
9514
|
-
lit/binding-positions,
|
|
9515
|
-
max-lines,
|
|
9516
|
-
no-underscore-dangle,
|
|
9517
|
-
arrow-parens,
|
|
9518
|
-
no-confusing-arrow,
|
|
9519
|
-
curly,
|
|
9520
|
-
dot-location,
|
|
9521
|
-
no-inline-comments,
|
|
9522
|
-
line-comment-position,
|
|
9523
|
-
*/
|
|
9510
|
+
/* eslint-disable lit/no-invalid-html, lit/binding-positions, max-lines, prefer-destructuring, no-underscore-dangle, arrow-parens, no-confusing-arrow, curly, no-unused-expressions */
|
|
9524
9511
|
|
|
9525
9512
|
|
|
9526
9513
|
/**
|
|
@@ -9579,12 +9566,6 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9579
9566
|
*/
|
|
9580
9567
|
this.validation = new AuroFormValidation();
|
|
9581
9568
|
|
|
9582
|
-
/** @private */
|
|
9583
|
-
this.updateValue = this.updateValue.bind(this);
|
|
9584
|
-
|
|
9585
|
-
/** @private */
|
|
9586
|
-
this.updateValidity = this.updateValidity.bind(this);
|
|
9587
|
-
|
|
9588
9569
|
/**
|
|
9589
9570
|
* Generate unique names for dependency components.
|
|
9590
9571
|
* @private
|
|
@@ -9610,12 +9591,7 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9610
9591
|
* @private
|
|
9611
9592
|
* @type {string}
|
|
9612
9593
|
*/
|
|
9613
|
-
this.helpTextTag = versioning.generateTag("auro-formkit-counter-helptext", helptextVersion, AuroHelpText
|
|
9614
|
-
|
|
9615
|
-
/**
|
|
9616
|
-
* @private
|
|
9617
|
-
*/
|
|
9618
|
-
this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$2, AuroIcon$2);
|
|
9594
|
+
this.helpTextTag = versioning.generateTag("auro-formkit-counter-helptext", helptextVersion, AuroHelpText);
|
|
9619
9595
|
}
|
|
9620
9596
|
|
|
9621
9597
|
static get styles() {
|
|
@@ -9640,25 +9616,6 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9640
9616
|
reflect: true
|
|
9641
9617
|
},
|
|
9642
9618
|
|
|
9643
|
-
/**
|
|
9644
|
-
* The current error message to display when the component is invalid.
|
|
9645
|
-
*/
|
|
9646
|
-
error: {
|
|
9647
|
-
type: String,
|
|
9648
|
-
reflect: false
|
|
9649
|
-
},
|
|
9650
|
-
|
|
9651
|
-
/**
|
|
9652
|
-
* The current error message to display when the component is invalid.
|
|
9653
|
-
* This is set by validation and is not available to consumers.
|
|
9654
|
-
* @private
|
|
9655
|
-
*/
|
|
9656
|
-
errorMessage: {
|
|
9657
|
-
type: String,
|
|
9658
|
-
reflect: false,
|
|
9659
|
-
attribute: false
|
|
9660
|
-
},
|
|
9661
|
-
|
|
9662
9619
|
/**
|
|
9663
9620
|
* Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
|
|
9664
9621
|
* at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
|
|
@@ -9746,7 +9703,7 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9746
9703
|
* "top" | "right" | "bottom" | "left" |
|
|
9747
9704
|
* "bottom-start" | "top-start" | "top-end" |
|
|
9748
9705
|
* "right-start" | "right-end" | "bottom-end" |
|
|
9749
|
-
* "left-start" | "left-end"
|
|
9706
|
+
* "left-start" | "left-end"
|
|
9750
9707
|
* @default bottom-start
|
|
9751
9708
|
*/
|
|
9752
9709
|
placement: {
|
|
@@ -9817,97 +9774,7 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9817
9774
|
this.counters = this.querySelectorAll("auro-counter, [auro-counter]");
|
|
9818
9775
|
this.counters.forEach((counter) => {
|
|
9819
9776
|
counter.onDark = this.onDark;
|
|
9820
|
-
counter.addEventListener("input", this.updateValue);
|
|
9821
|
-
counter.addEventListener("auroFormElement-validated", this.updateValidity);
|
|
9822
|
-
});
|
|
9823
|
-
}
|
|
9824
|
-
|
|
9825
|
-
/**
|
|
9826
|
-
* Renders help text error messages.
|
|
9827
|
-
* @param {Array<string>} messages - The error messages to render.
|
|
9828
|
-
* @returns {TemplateResult[]} - The rendered error messages rendered in a TemplateResult.
|
|
9829
|
-
* @private
|
|
9830
|
-
*/
|
|
9831
|
-
renderHelpTextErrors(messages) {
|
|
9832
|
-
|
|
9833
|
-
// Return empty template if no messages are provided
|
|
9834
|
-
if (!messages || messages.length === 0) return u``;
|
|
9835
|
-
|
|
9836
|
-
// Return messages as a TemplateResult
|
|
9837
|
-
return messages.map(message => u`<p>${message}</p>`);
|
|
9838
|
-
}
|
|
9839
|
-
|
|
9840
|
-
/**
|
|
9841
|
-
* Gets and returns an array of counters in an invalid state.
|
|
9842
|
-
* @returns {Array<HTMLElement>} - Returns an array of invalid counters.
|
|
9843
|
-
* @param {NodeList} counters - The NodeList of counter elements to check.
|
|
9844
|
-
* @private
|
|
9845
|
-
*/
|
|
9846
|
-
getInvalidCounters(counters) {
|
|
9847
|
-
return Array.from(counters).filter(counter => counter.validity && counter.validity !== 'valid');
|
|
9848
|
-
}
|
|
9849
|
-
|
|
9850
|
-
/**
|
|
9851
|
-
* Gets all valid error messages from errored counters.
|
|
9852
|
-
* @param {NodeList} invalidCounters - The NodeList of counter elements to check.
|
|
9853
|
-
* @returns {Array<string>} - Returns an array of error messages from invalid counters.
|
|
9854
|
-
* @private
|
|
9855
|
-
*/
|
|
9856
|
-
getErrorMessages(invalidCounters) {
|
|
9857
|
-
return invalidCounters
|
|
9858
|
-
.map(counter => counter.errorMessage)
|
|
9859
|
-
.filter(message => message && message.length > 0);
|
|
9860
|
-
};
|
|
9861
|
-
|
|
9862
|
-
/**
|
|
9863
|
-
* Updates the validity of the counter group based on the validity of its counters.
|
|
9864
|
-
* This method checks all counters within the group, determines if any are invalid, and updates the group's validity state and error message accordingly.
|
|
9865
|
-
* If any counter is invalid, it generates a combined error message from all invalid counters.
|
|
9866
|
-
* @returns {void}
|
|
9867
|
-
* @private
|
|
9868
|
-
*/
|
|
9869
|
-
updateValidity () {
|
|
9870
|
-
|
|
9871
|
-
// We don't need to do anything if there are no counters
|
|
9872
|
-
if (!this.counters) return;
|
|
9873
|
-
|
|
9874
|
-
// Wait for initial validation to complete before updating validity and error message
|
|
9875
|
-
// This is necessary because we need the initial validation to know when to reset the validity and error message
|
|
9876
|
-
setTimeout(() => {
|
|
9877
|
-
|
|
9878
|
-
// Get any invalid counters
|
|
9879
|
-
const invalidCounters = this.getInvalidCounters(this.counters);
|
|
9880
|
-
|
|
9881
|
-
// Determine if we are in an invalid state based on the presence of invalid counters
|
|
9882
|
-
const isInvalid = invalidCounters.length > 0;
|
|
9883
|
-
|
|
9884
|
-
// If we are in an invalid state
|
|
9885
|
-
if (isInvalid) {
|
|
9886
|
-
|
|
9887
|
-
// Generate the error messages
|
|
9888
|
-
const errorMessages = this.getErrorMessages(invalidCounters);
|
|
9889
|
-
|
|
9890
|
-
const errorMessage = isInvalid ? this.renderHelpTextErrors(errorMessages) : this.errorMessage;
|
|
9891
|
-
|
|
9892
|
-
// Set the validity and error message
|
|
9893
|
-
// This needs to allow for the initial validation to come through
|
|
9894
|
-
this.validity =
|
|
9895
|
-
invalidCounters[0].validity || // The first invalid counter's validity
|
|
9896
|
-
this.validity || // incoming validity from validation
|
|
9897
|
-
undefined; // fallback
|
|
9898
|
-
|
|
9899
|
-
this.errorMessage =
|
|
9900
|
-
errorMessage || // our message
|
|
9901
|
-
this.errorMessage || // incoming message from validation
|
|
9902
|
-
undefined; // fallback
|
|
9903
|
-
}
|
|
9904
|
-
|
|
9905
|
-
if (!isInvalid && this.validity !== 'valid') {
|
|
9906
|
-
|
|
9907
|
-
// If there are no invalid counters, reset validity and error message
|
|
9908
|
-
this.validity = 'valid';
|
|
9909
|
-
this.errorMessage = undefined;
|
|
9910
|
-
}
|
|
9777
|
+
counter.addEventListener("input", () => this.updateValue());
|
|
9911
9778
|
});
|
|
9912
9779
|
}
|
|
9913
9780
|
|
|
@@ -9926,8 +9793,7 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9926
9793
|
this.counters = counterSlot.assignedElements().filter(el => el.tagName.toLowerCase() === 'auro-counter' || el.hasAttribute('auro-counter'));
|
|
9927
9794
|
|
|
9928
9795
|
this.counters.forEach((counter) => {
|
|
9929
|
-
counter.addEventListener("input", this.updateValue);
|
|
9930
|
-
counter.addEventListener("auroFormElement-validated", this.updateValidity);
|
|
9796
|
+
counter.addEventListener("input", () => this.updateValue());
|
|
9931
9797
|
});
|
|
9932
9798
|
|
|
9933
9799
|
if (this.isDropdown) {
|
|
@@ -10077,57 +9943,6 @@ class AuroCounterGroup extends AuroElement {
|
|
|
10077
9943
|
AuroLibraryRuntimeUtils$8.prototype.registerComponent(name, AuroCounterGroup);
|
|
10078
9944
|
}
|
|
10079
9945
|
|
|
10080
|
-
/**
|
|
10081
|
-
* Returns HTML for the help text and error message.
|
|
10082
|
-
* @private
|
|
10083
|
-
* @returns {html} - Returns HTML for the help text and error message.
|
|
10084
|
-
*/
|
|
10085
|
-
renderHelpText() {
|
|
10086
|
-
return !this.validity || this.validity === undefined || this.validity === 'valid'
|
|
10087
|
-
? u`
|
|
10088
|
-
<div slot="helpText">
|
|
10089
|
-
<${this.helpTextTag} ?onDark="${this.onDark}">
|
|
10090
|
-
<p id="${this.uniqueId}" part="helpText">
|
|
10091
|
-
<slot name="helpText"></slot>
|
|
10092
|
-
</p>
|
|
10093
|
-
</${this.helpTextTag}>
|
|
10094
|
-
</div>
|
|
10095
|
-
`
|
|
10096
|
-
: u`
|
|
10097
|
-
<div slot="helpText">
|
|
10098
|
-
<${this.helpTextTag} error ?onDark="${this.onDark}">
|
|
10099
|
-
<p id="${this.uniqueId}" part="helpText" role="alert" aria-live="assertive">
|
|
10100
|
-
${this.error || this.errorMessage}
|
|
10101
|
-
</p>
|
|
10102
|
-
</${this.helpTextTag}>
|
|
10103
|
-
</div>
|
|
10104
|
-
`;
|
|
10105
|
-
}
|
|
10106
|
-
|
|
10107
|
-
/**
|
|
10108
|
-
* Returns HTML for the validation error icon.
|
|
10109
|
-
* @private
|
|
10110
|
-
* @returns {html} - Returns HTML for the validation error icon.
|
|
10111
|
-
*/
|
|
10112
|
-
renderValidationErrorIcon() {
|
|
10113
|
-
|
|
10114
|
-
// Don't render in valid state
|
|
10115
|
-
if (!this.validity || this.validity === 'valid') return undefined;
|
|
10116
|
-
|
|
10117
|
-
return u`
|
|
10118
|
-
${this.validity && this.validity !== 'valid' ? u`
|
|
10119
|
-
<div class="notification alertNotification">
|
|
10120
|
-
<${this.iconTag}
|
|
10121
|
-
category="alert"
|
|
10122
|
-
name="error-stroke"
|
|
10123
|
-
variant="statusError"
|
|
10124
|
-
?ondark="${this.onDark}">
|
|
10125
|
-
</${this.iconTag}>
|
|
10126
|
-
</div>
|
|
10127
|
-
` : undefined}
|
|
10128
|
-
`;
|
|
10129
|
-
}
|
|
10130
|
-
|
|
10131
9946
|
/**
|
|
10132
9947
|
* Render the dropdown structure for the counter group.
|
|
10133
9948
|
* @returns {TemplateResult} The dropdown template.
|
|
@@ -10137,7 +9952,7 @@ class AuroCounterGroup extends AuroElement {
|
|
|
10137
9952
|
return u`
|
|
10138
9953
|
<${this.dropdownTag}
|
|
10139
9954
|
noHideOnThisFocusLoss
|
|
10140
|
-
chevron
|
|
9955
|
+
chevron common fluid
|
|
10141
9956
|
part="dropdown"
|
|
10142
9957
|
?autoPlacement="${this.autoPlacement}"
|
|
10143
9958
|
?error="${this.validity !== undefined && this.validity !== 'valid'}"
|
|
@@ -10184,13 +9999,28 @@ class AuroCounterGroup extends AuroElement {
|
|
|
10184
9999
|
${this.counters && Array.from(this.counters).map((counter, index) => u`${counter.value} ${counter.defaultSlot}${index !== this.counters.length - 1 ? ', ' : ''}`)}
|
|
10185
10000
|
</slot>
|
|
10186
10001
|
</div>
|
|
10187
|
-
<div class="accents right">
|
|
10188
|
-
${this.renderValidationErrorIcon()}
|
|
10189
|
-
</div>
|
|
10002
|
+
<div class="accents right"></div>
|
|
10190
10003
|
</div>
|
|
10191
10004
|
`;
|
|
10192
10005
|
};
|
|
10193
10006
|
|
|
10007
|
+
/**
|
|
10008
|
+
* Render the help text for the counter group.
|
|
10009
|
+
* @returns {TemplateResult} The help text template.
|
|
10010
|
+
* @private
|
|
10011
|
+
*/
|
|
10012
|
+
renderHelpText() {
|
|
10013
|
+
return u`
|
|
10014
|
+
<div slot="helpText">
|
|
10015
|
+
<${this.helpTextTag} ?onDark="${this.onDark}">
|
|
10016
|
+
<p id="${this.uniqueId}" part="helpText">
|
|
10017
|
+
<slot name="helpText"></slot>
|
|
10018
|
+
</p>
|
|
10019
|
+
</${this.helpTextTag}>
|
|
10020
|
+
</div>
|
|
10021
|
+
`;
|
|
10022
|
+
}
|
|
10023
|
+
|
|
10194
10024
|
/**
|
|
10195
10025
|
* Render the dropdown bib template for the dropdown.
|
|
10196
10026
|
* @returns {TemplateResult} The bib template.
|