@aurodesignsystem-dev/auro-formkit 0.0.0-pr755.0 → 0.0.0-pr756.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/checkbox/demo/api.html +10 -16
- package/components/checkbox/demo/api.min.js +2 -2
- package/components/checkbox/demo/index.html +10 -16
- package/components/checkbox/demo/index.min.js +2 -2
- package/components/checkbox/demo/readme.html +9 -16
- package/components/checkbox/dist/index.js +2 -2
- package/components/checkbox/dist/registered.js +2 -2
- package/components/combobox/demo/api.html +10 -16
- package/components/combobox/demo/index.html +10 -16
- package/components/combobox/demo/readme.html +9 -16
- package/components/counter/demo/api.html +10 -16
- package/components/counter/demo/api.md +127 -0
- package/components/counter/demo/api.min.js +530 -312
- package/components/counter/demo/index.html +10 -16
- package/components/counter/demo/index.md +82 -0
- package/components/counter/demo/index.min.js +530 -312
- package/components/counter/demo/readme.html +9 -16
- package/components/counter/dist/auro-counter-group.d.ts +70 -13
- package/components/counter/dist/auro-counter.d.ts +10 -0
- package/components/counter/dist/index.js +530 -312
- package/components/counter/dist/registered.js +530 -312
- package/components/datepicker/demo/api.html +10 -16
- package/components/datepicker/demo/index.html +10 -16
- package/components/datepicker/demo/readme.html +9 -16
- package/components/dropdown/demo/api.html +10 -16
- package/components/dropdown/demo/index.html +10 -16
- package/components/dropdown/demo/readme.html +9 -16
- 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/input/demo/api.html +10 -16
- package/components/input/demo/index.html +10 -16
- package/components/input/demo/readme.html +9 -16
- package/components/menu/demo/api.html +32 -16
- package/components/menu/demo/index.html +10 -16
- package/components/menu/demo/readme.html +9 -16
- package/components/radio/demo/api.html +10 -16
- package/components/radio/demo/index.html +10 -16
- package/components/radio/demo/readme.html +9 -16
- package/components/select/demo/api.html +10 -16
- package/components/select/demo/index.html +11 -16
- package/components/select/demo/readme.html +9 -16
- package/package.json +4 -4
|
@@ -631,9 +631,9 @@ let AuroLibraryRuntimeUtils$8 = class AuroLibraryRuntimeUtils {
|
|
|
631
631
|
}
|
|
632
632
|
};
|
|
633
633
|
|
|
634
|
-
var styleCss$
|
|
634
|
+
var styleCss$b = 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$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)}`;
|
|
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)}`;
|
|
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$a = 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$9 = 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$a}`,
|
|
793
|
+
i$5`${colorCss$9}`,
|
|
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$b,
|
|
947
|
+
colorCss$a,
|
|
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$9 = 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$9}
|
|
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$8 = 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$9}`,
|
|
1564
|
+
i$5`${colorCss$8}`
|
|
1565
1565
|
];
|
|
1566
1566
|
}
|
|
1567
1567
|
|
|
@@ -2450,9 +2450,217 @@ 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$
|
|
2453
|
+
var colorCss$7 = 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)}`;
|
|
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`.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
|
+
};
|
|
2454
2662
|
|
|
2455
|
-
var
|
|
2663
|
+
var helptextVersion = '1.0.0';
|
|
2456
2664
|
|
|
2457
2665
|
/* eslint-disable lit/binding-positions, lit/no-invalid-html, max-lines */
|
|
2458
2666
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
@@ -2502,6 +2710,11 @@ class AuroCounter extends i$2 {
|
|
|
2502
2710
|
*/
|
|
2503
2711
|
this.iconTag = versioning.generateTag("auro-formkit-counter-icon", iconVersion$2, AuroIcon$2);
|
|
2504
2712
|
|
|
2713
|
+
/**
|
|
2714
|
+
* @private
|
|
2715
|
+
*/
|
|
2716
|
+
this.helpTextTag = versioning.generateTag('auro-formkit-input-helptext', helptextVersion, AuroHelpText$1);
|
|
2717
|
+
|
|
2505
2718
|
/**
|
|
2506
2719
|
* @private
|
|
2507
2720
|
* @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
|
|
@@ -2562,6 +2775,15 @@ class AuroCounter extends i$2 {
|
|
|
2562
2775
|
type: Boolean,
|
|
2563
2776
|
},
|
|
2564
2777
|
|
|
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
|
+
|
|
2565
2787
|
/**
|
|
2566
2788
|
* The maximum value for the counter.
|
|
2567
2789
|
*/
|
|
@@ -2616,8 +2838,8 @@ class AuroCounter extends i$2 {
|
|
|
2616
2838
|
static get styles() {
|
|
2617
2839
|
return [
|
|
2618
2840
|
tokens,
|
|
2619
|
-
colorCss$
|
|
2620
|
-
styleCss$
|
|
2841
|
+
colorCss$7,
|
|
2842
|
+
styleCss$8
|
|
2621
2843
|
];
|
|
2622
2844
|
}
|
|
2623
2845
|
|
|
@@ -2758,50 +2980,79 @@ class AuroCounter extends i$2 {
|
|
|
2758
2980
|
}
|
|
2759
2981
|
}
|
|
2760
2982
|
|
|
2761
|
-
|
|
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() {
|
|
2762
2989
|
return u`
|
|
2763
|
-
|
|
2764
|
-
|
|
2765
|
-
|
|
2766
|
-
|
|
2767
|
-
|
|
2768
|
-
|
|
2769
|
-
|
|
2770
|
-
|
|
2771
|
-
|
|
2772
|
-
|
|
2773
|
-
|
|
2774
|
-
|
|
2775
|
-
|
|
2776
|
-
|
|
2777
|
-
|
|
2778
|
-
|
|
2779
|
-
|
|
2780
|
-
|
|
2781
|
-
.tabindex="${'-1'}"
|
|
2782
|
-
part="controlMinus"
|
|
2783
|
-
@click="${() => this.decrement()}"
|
|
2784
|
-
?onDark="${this.onDark}"
|
|
2785
|
-
?disabled="${this.disabled || this.disableMin || this.isIncrementDisabled(this.min)}"
|
|
2786
|
-
>
|
|
2787
|
-
<${this.iconTag} class="controlIcon" customSvg> ${IconUtil.generateSvgHtml(minusIcon)} </${this.iconTag}>
|
|
2788
|
-
</auro-counter-button>
|
|
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
|
+
}
|
|
2789
3008
|
|
|
2790
|
-
|
|
2791
|
-
|
|
3009
|
+
render() {
|
|
3010
|
+
return u`
|
|
3011
|
+
<div class="counterWrapper">
|
|
3012
|
+
<div class="counter">
|
|
3013
|
+
<div class="content" >
|
|
3014
|
+
<label id="counter-label" class="label"><slot @slotchange="${this.onDefaultSlotChange}" ></slot></label>
|
|
3015
|
+
<slot id="counter-description" name="description"></slot>
|
|
2792
3016
|
</div>
|
|
2793
|
-
|
|
2794
|
-
|
|
2795
|
-
aria-
|
|
2796
|
-
|
|
2797
|
-
|
|
2798
|
-
|
|
2799
|
-
|
|
2800
|
-
|
|
3017
|
+
<div
|
|
3018
|
+
part="counterControl"
|
|
3019
|
+
aria-labelledby="counter-label"
|
|
3020
|
+
aria-describedby="counter-description"
|
|
3021
|
+
tabindex="${this.disabled ? '-1' : '0'}"
|
|
3022
|
+
role="spinbutton"
|
|
3023
|
+
aria-valuemin="${this.min}"
|
|
3024
|
+
aria-valuemax="${this.max}"
|
|
3025
|
+
aria-valuenow="${this.value}"
|
|
3026
|
+
aria-valuetext="${this.value !== undefined ? this.value : this.min}"
|
|
2801
3027
|
>
|
|
2802
|
-
|
|
2803
|
-
|
|
3028
|
+
<auro-counter-button
|
|
3029
|
+
aria-hidden="true"
|
|
3030
|
+
.tabindex="${'-1'}"
|
|
3031
|
+
part="controlMinus"
|
|
3032
|
+
@click="${() => this.decrement()}"
|
|
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>
|
|
3053
|
+
</div>
|
|
2804
3054
|
</div>
|
|
3055
|
+
${this.renderHelpText()}
|
|
2805
3056
|
</div>
|
|
2806
3057
|
`;
|
|
2807
3058
|
}
|
|
@@ -5747,7 +5998,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
5747
5998
|
|
|
5748
5999
|
var iconVersion$1 = '6.1.2';
|
|
5749
6000
|
|
|
5750
|
-
var styleCss$1$
|
|
6001
|
+
var styleCss$1$1 = 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}`;
|
|
5751
6002
|
|
|
5752
6003
|
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)}`;
|
|
5753
6004
|
|
|
@@ -5789,7 +6040,7 @@ class AuroDropdownBib extends i$2 {
|
|
|
5789
6040
|
|
|
5790
6041
|
static get styles() {
|
|
5791
6042
|
return [
|
|
5792
|
-
styleCss$1$
|
|
6043
|
+
styleCss$1$1,
|
|
5793
6044
|
colorCss$2$1,
|
|
5794
6045
|
tokensCss$1$1
|
|
5795
6046
|
];
|
|
@@ -5948,7 +6199,7 @@ var dropdownVersion$1 = '3.0.0';
|
|
|
5948
6199
|
|
|
5949
6200
|
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}`;
|
|
5950
6201
|
|
|
5951
|
-
var colorCss$1$
|
|
6202
|
+
var colorCss$1$1 = 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)}`;
|
|
5952
6203
|
|
|
5953
6204
|
var classicColorCss = i$5``;
|
|
5954
6205
|
|
|
@@ -5962,7 +6213,7 @@ var colorCss$5 = i$5`:host([error]){--ds-auro-helptext-color: var(--ds-basic-col
|
|
|
5962
6213
|
|
|
5963
6214
|
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}`;
|
|
5964
6215
|
|
|
5965
|
-
var tokensCss$
|
|
6216
|
+
var tokensCss$3 = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
5966
6217
|
|
|
5967
6218
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
5968
6219
|
// See LICENSE in the project root for license information.
|
|
@@ -5971,7 +6222,7 @@ var tokensCss$4 = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texti
|
|
|
5971
6222
|
|
|
5972
6223
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
5973
6224
|
|
|
5974
|
-
let AuroLibraryRuntimeUtils$
|
|
6225
|
+
let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
|
|
5975
6226
|
|
|
5976
6227
|
/* eslint-disable jsdoc/require-param */
|
|
5977
6228
|
|
|
@@ -6043,7 +6294,7 @@ let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
|
|
|
6043
6294
|
*
|
|
6044
6295
|
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
6045
6296
|
*/
|
|
6046
|
-
|
|
6297
|
+
class AuroHelpText extends i$2 {
|
|
6047
6298
|
|
|
6048
6299
|
constructor() {
|
|
6049
6300
|
super();
|
|
@@ -6052,14 +6303,14 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
6052
6303
|
this.onDark = false;
|
|
6053
6304
|
this.hasTextContent = false;
|
|
6054
6305
|
|
|
6055
|
-
AuroLibraryRuntimeUtils$
|
|
6306
|
+
AuroLibraryRuntimeUtils$4.prototype.handleComponentTagRename(this, 'auro-helptext');
|
|
6056
6307
|
}
|
|
6057
6308
|
|
|
6058
6309
|
static get styles() {
|
|
6059
6310
|
return [
|
|
6060
6311
|
colorCss$5,
|
|
6061
6312
|
styleCss$6,
|
|
6062
|
-
tokensCss$
|
|
6313
|
+
tokensCss$3
|
|
6063
6314
|
];
|
|
6064
6315
|
}
|
|
6065
6316
|
|
|
@@ -6108,7 +6359,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
6108
6359
|
*
|
|
6109
6360
|
*/
|
|
6110
6361
|
static register(name = "auro-helptext") {
|
|
6111
|
-
AuroLibraryRuntimeUtils$
|
|
6362
|
+
AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroHelpText);
|
|
6112
6363
|
}
|
|
6113
6364
|
|
|
6114
6365
|
updated() {
|
|
@@ -6162,7 +6413,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
6162
6413
|
</div>
|
|
6163
6414
|
`;
|
|
6164
6415
|
}
|
|
6165
|
-
}
|
|
6416
|
+
}
|
|
6166
6417
|
|
|
6167
6418
|
var helpTextVersion = '1.0.0';
|
|
6168
6419
|
|
|
@@ -6383,7 +6634,7 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6383
6634
|
/**
|
|
6384
6635
|
* @private
|
|
6385
6636
|
*/
|
|
6386
|
-
this.helpTextTag = versioning.generateTag('auro-formkit-dropdown-helptext', helpTextVersion, AuroHelpText
|
|
6637
|
+
this.helpTextTag = versioning.generateTag('auro-formkit-dropdown-helptext', helpTextVersion, AuroHelpText);
|
|
6387
6638
|
|
|
6388
6639
|
/**
|
|
6389
6640
|
* @private
|
|
@@ -6703,7 +6954,7 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6703
6954
|
|
|
6704
6955
|
static get styles() {
|
|
6705
6956
|
return [
|
|
6706
|
-
colorCss$1$
|
|
6957
|
+
colorCss$1$1,
|
|
6707
6958
|
tokensCss$1$1,
|
|
6708
6959
|
|
|
6709
6960
|
// default layout
|
|
@@ -7897,7 +8148,7 @@ let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
|
7897
8148
|
|
|
7898
8149
|
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}}`;
|
|
7899
8150
|
|
|
7900
|
-
var colorCss$1
|
|
8151
|
+
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}`;
|
|
7901
8152
|
|
|
7902
8153
|
var tokensCss$1 = i$5`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
|
|
7903
8154
|
|
|
@@ -7976,7 +8227,7 @@ class AuroLoader extends i$2 {
|
|
|
7976
8227
|
static get styles() {
|
|
7977
8228
|
return [
|
|
7978
8229
|
i$5`${styleCss$2}`,
|
|
7979
|
-
i$5`${colorCss$1
|
|
8230
|
+
i$5`${colorCss$1}`,
|
|
7980
8231
|
i$5`${tokensCss$1}`
|
|
7981
8232
|
];
|
|
7982
8233
|
}
|
|
@@ -8462,7 +8713,7 @@ const cacheFetch = (uri, options = {}) => {
|
|
|
8462
8713
|
return _fetchMap.get(uri);
|
|
8463
8714
|
};
|
|
8464
8715
|
|
|
8465
|
-
var styleCss$1
|
|
8716
|
+
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}`;
|
|
8466
8717
|
|
|
8467
8718
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
8468
8719
|
// See LICENSE in the project root for license information.
|
|
@@ -8505,7 +8756,7 @@ class BaseIcon extends AuroElement$2 {
|
|
|
8505
8756
|
|
|
8506
8757
|
static get styles() {
|
|
8507
8758
|
return i$5`
|
|
8508
|
-
${styleCss$1
|
|
8759
|
+
${styleCss$1}
|
|
8509
8760
|
`;
|
|
8510
8761
|
}
|
|
8511
8762
|
|
|
@@ -8546,7 +8797,7 @@ class BaseIcon extends AuroElement$2 {
|
|
|
8546
8797
|
}
|
|
8547
8798
|
}
|
|
8548
8799
|
|
|
8549
|
-
var tokensCss
|
|
8800
|
+
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)}`;
|
|
8550
8801
|
|
|
8551
8802
|
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)}`;
|
|
8552
8803
|
|
|
@@ -8706,8 +8957,8 @@ class AuroIcon extends BaseIcon {
|
|
|
8706
8957
|
static get styles() {
|
|
8707
8958
|
return [
|
|
8708
8959
|
super.styles,
|
|
8709
|
-
i$5`${tokensCss
|
|
8710
|
-
i$5`${styleCss$1
|
|
8960
|
+
i$5`${tokensCss}`,
|
|
8961
|
+
i$5`${styleCss$1}`,
|
|
8711
8962
|
i$5`${colorCss$4}`
|
|
8712
8963
|
];
|
|
8713
8964
|
}
|
|
@@ -8800,7 +9051,7 @@ var iconVersion = '8.0.4';
|
|
|
8800
9051
|
|
|
8801
9052
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
8802
9053
|
|
|
8803
|
-
|
|
9054
|
+
class AuroLibraryRuntimeUtils {
|
|
8804
9055
|
|
|
8805
9056
|
/* eslint-disable jsdoc/require-param */
|
|
8806
9057
|
|
|
@@ -8861,7 +9112,7 @@ let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
|
|
|
8861
9112
|
|
|
8862
9113
|
return elemTag === tag || elem.hasAttribute(tag);
|
|
8863
9114
|
}
|
|
8864
|
-
}
|
|
9115
|
+
}
|
|
8865
9116
|
|
|
8866
9117
|
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)}`;
|
|
8867
9118
|
|
|
@@ -8892,7 +9143,7 @@ class AuroHeader extends i$2 {
|
|
|
8892
9143
|
/**
|
|
8893
9144
|
* @private
|
|
8894
9145
|
*/
|
|
8895
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils
|
|
9146
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
8896
9147
|
}
|
|
8897
9148
|
|
|
8898
9149
|
// function to define props used within the scope of this component
|
|
@@ -8922,7 +9173,7 @@ class AuroHeader extends i$2 {
|
|
|
8922
9173
|
*
|
|
8923
9174
|
*/
|
|
8924
9175
|
static register(name = "auro-header") {
|
|
8925
|
-
AuroLibraryRuntimeUtils
|
|
9176
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroHeader);
|
|
8926
9177
|
}
|
|
8927
9178
|
|
|
8928
9179
|
firstUpdated() {
|
|
@@ -9154,219 +9405,11 @@ class AuroBibtemplate extends i$2 {
|
|
|
9154
9405
|
|
|
9155
9406
|
var bibTemplateVersion = '1.0.0';
|
|
9156
9407
|
|
|
9157
|
-
var
|
|
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}`;
|
|
9408
|
+
var styleCss = i$5`:host([isindropdown]) .wrapper{padding:var(--ds-size-300, 1.5rem)}`;
|
|
9160
9409
|
|
|
9161
|
-
var
|
|
9410
|
+
var colorCss = i$5`:host ::slotted(*:not(:first-child)){border-color:var(--ds-auro-counter-divider-color)}`;
|
|
9162
9411
|
|
|
9163
|
-
// Copyright (c) Alaska
|
|
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
|
-
|
|
9365
|
-
var styleCss = i$5`:host([isindropdown]) .wrapper{padding:var(--ds-size-300, 1.5rem)}`;
|
|
9366
|
-
|
|
9367
|
-
var colorCss = i$5`:host ::slotted(*:not(:first-child)){border-color:var(--ds-auro-counter-divider-color)}`;
|
|
9368
|
-
|
|
9369
|
-
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
9412
|
+
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
9370
9413
|
// See LICENSE in the project root for license information.
|
|
9371
9414
|
|
|
9372
9415
|
|
|
@@ -9507,7 +9550,19 @@ class AuroElement extends i$2 {
|
|
|
9507
9550
|
}
|
|
9508
9551
|
}
|
|
9509
9552
|
|
|
9510
|
-
/*
|
|
9553
|
+
/*
|
|
9554
|
+
eslint-disable
|
|
9555
|
+
lit/no-invalid-html,
|
|
9556
|
+
lit/binding-positions,
|
|
9557
|
+
max-lines,
|
|
9558
|
+
no-underscore-dangle,
|
|
9559
|
+
arrow-parens,
|
|
9560
|
+
no-confusing-arrow,
|
|
9561
|
+
curly,
|
|
9562
|
+
dot-location,
|
|
9563
|
+
no-inline-comments,
|
|
9564
|
+
line-comment-position,
|
|
9565
|
+
*/
|
|
9511
9566
|
|
|
9512
9567
|
|
|
9513
9568
|
/**
|
|
@@ -9566,6 +9621,12 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9566
9621
|
*/
|
|
9567
9622
|
this.validation = new AuroFormValidation();
|
|
9568
9623
|
|
|
9624
|
+
/** @private */
|
|
9625
|
+
this.updateValue = this.updateValue.bind(this);
|
|
9626
|
+
|
|
9627
|
+
/** @private */
|
|
9628
|
+
this.updateValidity = this.updateValidity.bind(this);
|
|
9629
|
+
|
|
9569
9630
|
/**
|
|
9570
9631
|
* Generate unique names for dependency components.
|
|
9571
9632
|
* @private
|
|
@@ -9591,7 +9652,12 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9591
9652
|
* @private
|
|
9592
9653
|
* @type {string}
|
|
9593
9654
|
*/
|
|
9594
|
-
this.helpTextTag = versioning.generateTag("auro-formkit-counter-helptext", helptextVersion, AuroHelpText);
|
|
9655
|
+
this.helpTextTag = versioning.generateTag("auro-formkit-counter-helptext", helptextVersion, AuroHelpText$1);
|
|
9656
|
+
|
|
9657
|
+
/**
|
|
9658
|
+
* @private
|
|
9659
|
+
*/
|
|
9660
|
+
this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$2, AuroIcon$2);
|
|
9595
9661
|
}
|
|
9596
9662
|
|
|
9597
9663
|
static get styles() {
|
|
@@ -9616,6 +9682,25 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9616
9682
|
reflect: true
|
|
9617
9683
|
},
|
|
9618
9684
|
|
|
9685
|
+
/**
|
|
9686
|
+
* The current error message to display when the component is invalid.
|
|
9687
|
+
*/
|
|
9688
|
+
error: {
|
|
9689
|
+
type: String,
|
|
9690
|
+
reflect: false
|
|
9691
|
+
},
|
|
9692
|
+
|
|
9693
|
+
/**
|
|
9694
|
+
* The current error message to display when the component is invalid.
|
|
9695
|
+
* This is set by validation and is not available to consumers.
|
|
9696
|
+
* @private
|
|
9697
|
+
*/
|
|
9698
|
+
errorMessage: {
|
|
9699
|
+
type: String,
|
|
9700
|
+
reflect: false,
|
|
9701
|
+
attribute: false
|
|
9702
|
+
},
|
|
9703
|
+
|
|
9619
9704
|
/**
|
|
9620
9705
|
* Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
|
|
9621
9706
|
* at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
|
|
@@ -9774,7 +9859,103 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9774
9859
|
this.counters = this.querySelectorAll("auro-counter, [auro-counter]");
|
|
9775
9860
|
this.counters.forEach((counter) => {
|
|
9776
9861
|
counter.onDark = this.onDark;
|
|
9777
|
-
counter.addEventListener("input",
|
|
9862
|
+
counter.addEventListener("input", this.updateValue);
|
|
9863
|
+
counter.addEventListener("auroFormElement-validated", this.updateValidity);
|
|
9864
|
+
});
|
|
9865
|
+
}
|
|
9866
|
+
|
|
9867
|
+
/**
|
|
9868
|
+
* Renders help text error messages.
|
|
9869
|
+
* @param {Array<string>} messages - The error messages to render.
|
|
9870
|
+
* @returns {TemplateResult[]} - The rendered error messages rendered in a TemplateResult.
|
|
9871
|
+
* @private
|
|
9872
|
+
*/
|
|
9873
|
+
renderHelpTextErrors(messages) {
|
|
9874
|
+
|
|
9875
|
+
// Return empty template if no messages are provided
|
|
9876
|
+
if (!messages || messages.length === 0) return u``;
|
|
9877
|
+
|
|
9878
|
+
// Return messages as a TemplateResult
|
|
9879
|
+
return messages.map((message, index) => u`
|
|
9880
|
+
${message}
|
|
9881
|
+
${index < messages.length - 1
|
|
9882
|
+
? u`<br>`
|
|
9883
|
+
: ''
|
|
9884
|
+
}
|
|
9885
|
+
`);
|
|
9886
|
+
}
|
|
9887
|
+
|
|
9888
|
+
/**
|
|
9889
|
+
* Gets and returns an array of counters in an invalid state.
|
|
9890
|
+
* @returns {Array<HTMLElement>} - Returns an array of invalid counters.
|
|
9891
|
+
* @param {NodeList} counters - The NodeList of counter elements to check.
|
|
9892
|
+
* @private
|
|
9893
|
+
*/
|
|
9894
|
+
getInvalidCounters(counters) {
|
|
9895
|
+
return Array.from(counters).filter(counter => counter.validity && counter.validity !== 'valid');
|
|
9896
|
+
}
|
|
9897
|
+
|
|
9898
|
+
/**
|
|
9899
|
+
* Gets all valid error messages from errored counters.
|
|
9900
|
+
* @param {NodeList} invalidCounters - The NodeList of counter elements to check.
|
|
9901
|
+
* @returns {Array<string>} - Returns an array of error messages from invalid counters.
|
|
9902
|
+
* @private
|
|
9903
|
+
*/
|
|
9904
|
+
getErrorMessages(invalidCounters) {
|
|
9905
|
+
return invalidCounters
|
|
9906
|
+
.map(counter => counter.errorMessage)
|
|
9907
|
+
.filter(message => message && message.length > 0);
|
|
9908
|
+
};
|
|
9909
|
+
|
|
9910
|
+
/**
|
|
9911
|
+
* Updates the validity of the counter group based on the validity of its counters.
|
|
9912
|
+
* This method checks all counters within the group, determines if any are invalid, and updates the group's validity state and error message accordingly.
|
|
9913
|
+
* If any counter is invalid, it generates a combined error message from all invalid counters.
|
|
9914
|
+
* @returns {void}
|
|
9915
|
+
* @private
|
|
9916
|
+
*/
|
|
9917
|
+
updateValidity () {
|
|
9918
|
+
|
|
9919
|
+
// We don't need to do anything if there are no counters
|
|
9920
|
+
if (!this.counters) return;
|
|
9921
|
+
|
|
9922
|
+
// Wait for initial validation to complete before updating validity and error message
|
|
9923
|
+
// This is necessary because we need the initial validation to know when to reset the validity and error message
|
|
9924
|
+
setTimeout(() => {
|
|
9925
|
+
|
|
9926
|
+
// Get any invalid counters
|
|
9927
|
+
const invalidCounters = this.getInvalidCounters(this.counters);
|
|
9928
|
+
|
|
9929
|
+
// Determine if we are in an invalid state based on the presence of invalid counters
|
|
9930
|
+
const isInvalid = invalidCounters.length > 0;
|
|
9931
|
+
|
|
9932
|
+
// If we are in an invalid state
|
|
9933
|
+
if (isInvalid) {
|
|
9934
|
+
|
|
9935
|
+
// Generate the error messages
|
|
9936
|
+
const errorMessages = this.getErrorMessages(invalidCounters);
|
|
9937
|
+
|
|
9938
|
+
const errorMessage = isInvalid ? this.renderHelpTextErrors(errorMessages) : this.errorMessage;
|
|
9939
|
+
|
|
9940
|
+
// Set the validity and error message
|
|
9941
|
+
// This needs to allow for the initial validation to come through
|
|
9942
|
+
this.validity =
|
|
9943
|
+
invalidCounters[0].validity || // The first invalid counter's validity
|
|
9944
|
+
this.validity || // incoming validity from validation
|
|
9945
|
+
undefined; // fallback
|
|
9946
|
+
|
|
9947
|
+
this.errorMessage =
|
|
9948
|
+
errorMessage || // our message
|
|
9949
|
+
this.errorMessage || // incoming message from validation
|
|
9950
|
+
undefined; // fallback
|
|
9951
|
+
}
|
|
9952
|
+
|
|
9953
|
+
if (!isInvalid && this.validity !== 'valid') {
|
|
9954
|
+
|
|
9955
|
+
// If there are no invalid counters, reset validity and error message
|
|
9956
|
+
this.validity = 'valid';
|
|
9957
|
+
this.errorMessage = undefined;
|
|
9958
|
+
}
|
|
9778
9959
|
});
|
|
9779
9960
|
}
|
|
9780
9961
|
|
|
@@ -9793,7 +9974,8 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9793
9974
|
this.counters = counterSlot.assignedElements().filter(el => el.tagName.toLowerCase() === 'auro-counter' || el.hasAttribute('auro-counter'));
|
|
9794
9975
|
|
|
9795
9976
|
this.counters.forEach((counter) => {
|
|
9796
|
-
counter.addEventListener("input",
|
|
9977
|
+
counter.addEventListener("input", this.updateValue);
|
|
9978
|
+
counter.addEventListener("auroFormElement-validated", this.updateValidity);
|
|
9797
9979
|
});
|
|
9798
9980
|
|
|
9799
9981
|
if (this.isDropdown) {
|
|
@@ -9943,6 +10125,57 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9943
10125
|
AuroLibraryRuntimeUtils$8.prototype.registerComponent(name, AuroCounterGroup);
|
|
9944
10126
|
}
|
|
9945
10127
|
|
|
10128
|
+
/**
|
|
10129
|
+
* Returns HTML for the help text and error message.
|
|
10130
|
+
* @private
|
|
10131
|
+
* @returns {html} - Returns HTML for the help text and error message.
|
|
10132
|
+
*/
|
|
10133
|
+
renderHelpText() {
|
|
10134
|
+
return !this.validity || this.validity === undefined || this.validity === 'valid'
|
|
10135
|
+
? u`
|
|
10136
|
+
<div slot="helpText">
|
|
10137
|
+
<${this.helpTextTag} ?onDark="${this.onDark}">
|
|
10138
|
+
<p id="${this.uniqueId}" part="helpText">
|
|
10139
|
+
<slot name="helpText"></slot>
|
|
10140
|
+
</p>
|
|
10141
|
+
</${this.helpTextTag}>
|
|
10142
|
+
</div>
|
|
10143
|
+
`
|
|
10144
|
+
: u`
|
|
10145
|
+
<div slot="helpText">
|
|
10146
|
+
<${this.helpTextTag} error ?onDark="${this.onDark}">
|
|
10147
|
+
<p id="${this.uniqueId}" part="helpText" role="alert" aria-live="assertive">
|
|
10148
|
+
${this.error || this.errorMessage}
|
|
10149
|
+
</p>
|
|
10150
|
+
</${this.helpTextTag}>
|
|
10151
|
+
</div>
|
|
10152
|
+
`;
|
|
10153
|
+
}
|
|
10154
|
+
|
|
10155
|
+
/**
|
|
10156
|
+
* Returns HTML for the validation error icon.
|
|
10157
|
+
* @private
|
|
10158
|
+
* @returns {html} - Returns HTML for the validation error icon.
|
|
10159
|
+
*/
|
|
10160
|
+
renderValidationErrorIcon() {
|
|
10161
|
+
|
|
10162
|
+
// Don't render in valid state
|
|
10163
|
+
if (!this.validity || this.validity === 'valid') return undefined;
|
|
10164
|
+
|
|
10165
|
+
return u`
|
|
10166
|
+
${this.validity && this.validity !== 'valid' ? u`
|
|
10167
|
+
<div class="notification alertNotification">
|
|
10168
|
+
<${this.iconTag}
|
|
10169
|
+
category="alert"
|
|
10170
|
+
name="error-stroke"
|
|
10171
|
+
variant="statusError"
|
|
10172
|
+
?ondark="${this.onDark}">
|
|
10173
|
+
</${this.iconTag}>
|
|
10174
|
+
</div>
|
|
10175
|
+
` : undefined}
|
|
10176
|
+
`;
|
|
10177
|
+
}
|
|
10178
|
+
|
|
9946
10179
|
/**
|
|
9947
10180
|
* Render the dropdown structure for the counter group.
|
|
9948
10181
|
* @returns {TemplateResult} The dropdown template.
|
|
@@ -9999,28 +10232,13 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9999
10232
|
${this.counters && Array.from(this.counters).map((counter, index) => u`${counter.value} ${counter.defaultSlot}${index !== this.counters.length - 1 ? ', ' : ''}`)}
|
|
10000
10233
|
</slot>
|
|
10001
10234
|
</div>
|
|
10002
|
-
<div class="accents right"
|
|
10235
|
+
<div class="accents right">
|
|
10236
|
+
${this.renderValidationErrorIcon()}
|
|
10237
|
+
</div>
|
|
10003
10238
|
</div>
|
|
10004
10239
|
`;
|
|
10005
10240
|
};
|
|
10006
10241
|
|
|
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
|
-
|
|
10024
10242
|
/**
|
|
10025
10243
|
* Render the dropdown bib template for the dropdown.
|
|
10026
10244
|
* @returns {TemplateResult} The bib template.
|