@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
|
@@ -584,9 +584,9 @@ let AuroLibraryRuntimeUtils$8 = class AuroLibraryRuntimeUtils {
|
|
|
584
584
|
}
|
|
585
585
|
};
|
|
586
586
|
|
|
587
|
-
var styleCss$
|
|
587
|
+
var styleCss$b = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}: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}`;
|
|
588
588
|
|
|
589
|
-
var colorCss$9 = css`[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)}`;
|
|
589
|
+
var colorCss$a = css`[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)}`;
|
|
590
590
|
|
|
591
591
|
var tokensCss$7 = css`:host(:not([onDark])){--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-text-color:var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-tap-color:transparent}:host([onDark]){--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-text-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-tap-color:transparent}`;
|
|
592
592
|
|
|
@@ -662,9 +662,9 @@ let AuroLibraryRuntimeUtils$7 = class AuroLibraryRuntimeUtils {
|
|
|
662
662
|
}
|
|
663
663
|
};
|
|
664
664
|
|
|
665
|
-
var styleCss$
|
|
665
|
+
var styleCss$a = css`: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}}`;
|
|
666
666
|
|
|
667
|
-
var colorCss$
|
|
667
|
+
var colorCss$9 = css`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color:var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]){--ds-auro-loader-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color:transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color:currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color:currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
|
|
668
668
|
|
|
669
669
|
var tokensCss$6 = css`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
|
|
670
670
|
|
|
@@ -742,8 +742,8 @@ let AuroLoader$1 = class AuroLoader extends LitElement {
|
|
|
742
742
|
|
|
743
743
|
static get styles() {
|
|
744
744
|
return [
|
|
745
|
-
css`${styleCss$
|
|
746
|
-
css`${colorCss$
|
|
745
|
+
css`${styleCss$a}`,
|
|
746
|
+
css`${colorCss$9}`,
|
|
747
747
|
css`${tokensCss$6}`
|
|
748
748
|
];
|
|
749
749
|
}
|
|
@@ -896,8 +896,8 @@ let AuroButton$1 = class AuroButton extends AuroElement$5 {
|
|
|
896
896
|
static get styles() {
|
|
897
897
|
return [
|
|
898
898
|
tokensCss$7,
|
|
899
|
-
styleCss$
|
|
900
|
-
colorCss$
|
|
899
|
+
styleCss$b,
|
|
900
|
+
colorCss$a,
|
|
901
901
|
shapeSize$1
|
|
902
902
|
];
|
|
903
903
|
}
|
|
@@ -1268,7 +1268,7 @@ const cacheFetch$2 = (uri, options = {}) => {
|
|
|
1268
1268
|
return _fetchMap$2.get(uri);
|
|
1269
1269
|
};
|
|
1270
1270
|
|
|
1271
|
-
var styleCss$
|
|
1271
|
+
var styleCss$9 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 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}`;
|
|
1272
1272
|
|
|
1273
1273
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1274
1274
|
// See LICENSE in the project root for license information.
|
|
@@ -1311,7 +1311,7 @@ let BaseIcon$2 = class BaseIcon extends AuroElement$4 {
|
|
|
1311
1311
|
|
|
1312
1312
|
static get styles() {
|
|
1313
1313
|
return css`
|
|
1314
|
-
${styleCss$
|
|
1314
|
+
${styleCss$9}
|
|
1315
1315
|
`;
|
|
1316
1316
|
}
|
|
1317
1317
|
|
|
@@ -1354,7 +1354,7 @@ let BaseIcon$2 = class BaseIcon extends AuroElement$4 {
|
|
|
1354
1354
|
|
|
1355
1355
|
var tokensCss$5 = css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
|
|
1356
1356
|
|
|
1357
|
-
var colorCss$
|
|
1357
|
+
var colorCss$8 = css`: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)}`;
|
|
1358
1358
|
|
|
1359
1359
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1360
1360
|
// See LICENSE in the project root for license information.
|
|
@@ -1513,8 +1513,8 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
|
|
|
1513
1513
|
return [
|
|
1514
1514
|
super.styles,
|
|
1515
1515
|
css`${tokensCss$5}`,
|
|
1516
|
-
css`${styleCss$
|
|
1517
|
-
css`${colorCss$
|
|
1516
|
+
css`${styleCss$9}`,
|
|
1517
|
+
css`${colorCss$8}`
|
|
1518
1518
|
];
|
|
1519
1519
|
}
|
|
1520
1520
|
|
|
@@ -2403,9 +2403,217 @@ var plusIcon = {"role":"img","color":"currentColor","title":"","desc":"","width"
|
|
|
2403
2403
|
|
|
2404
2404
|
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>"};
|
|
2405
2405
|
|
|
2406
|
-
var colorCss$
|
|
2406
|
+
var colorCss$7 = css`.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)}`;
|
|
2407
|
+
|
|
2408
|
+
var styleCss$8 = css`.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}`;
|
|
2409
|
+
|
|
2410
|
+
var colorCss$6 = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
2411
|
+
|
|
2412
|
+
var styleCss$7 = css`.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}`;
|
|
2413
|
+
|
|
2414
|
+
var tokensCss$4 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
2415
|
+
|
|
2416
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
2417
|
+
// See LICENSE in the project root for license information.
|
|
2418
|
+
|
|
2419
|
+
// ---------------------------------------------------------------------
|
|
2420
|
+
|
|
2421
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
2422
|
+
|
|
2423
|
+
let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
|
|
2424
|
+
|
|
2425
|
+
/* eslint-disable jsdoc/require-param */
|
|
2426
|
+
|
|
2427
|
+
/**
|
|
2428
|
+
* This will register a new custom element with the browser.
|
|
2429
|
+
* @param {String} name - The name of the custom element.
|
|
2430
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
2431
|
+
* @returns {void}
|
|
2432
|
+
*/
|
|
2433
|
+
registerComponent(name, componentClass) {
|
|
2434
|
+
if (!customElements.get(name)) {
|
|
2435
|
+
customElements.define(name, class extends componentClass {});
|
|
2436
|
+
}
|
|
2437
|
+
}
|
|
2438
|
+
|
|
2439
|
+
/**
|
|
2440
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
2441
|
+
* @returns {void}
|
|
2442
|
+
*/
|
|
2443
|
+
closestElement(
|
|
2444
|
+
selector, // selector like in .closest()
|
|
2445
|
+
base = this, // extra functionality to skip a parent
|
|
2446
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
2447
|
+
!el || el === document || el === window
|
|
2448
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
2449
|
+
: found
|
|
2450
|
+
? found // found a selector INside this element
|
|
2451
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
2452
|
+
) {
|
|
2453
|
+
return __Closest(base);
|
|
2454
|
+
}
|
|
2455
|
+
/* eslint-enable jsdoc/require-param */
|
|
2456
|
+
|
|
2457
|
+
/**
|
|
2458
|
+
* 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.
|
|
2459
|
+
* @param {Object} elem - The element to check.
|
|
2460
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
2461
|
+
* @returns {void}
|
|
2462
|
+
*/
|
|
2463
|
+
handleComponentTagRename(elem, tagName) {
|
|
2464
|
+
const tag = tagName.toLowerCase();
|
|
2465
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
2466
|
+
|
|
2467
|
+
if (elemTag !== tag) {
|
|
2468
|
+
elem.setAttribute(tag, true);
|
|
2469
|
+
}
|
|
2470
|
+
}
|
|
2471
|
+
|
|
2472
|
+
/**
|
|
2473
|
+
* Validates if an element is a specific Auro component.
|
|
2474
|
+
* @param {Object} elem - The element to validate.
|
|
2475
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
2476
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
2477
|
+
*/
|
|
2478
|
+
elementMatch(elem, tagName) {
|
|
2479
|
+
const tag = tagName.toLowerCase();
|
|
2480
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
2481
|
+
|
|
2482
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
2483
|
+
}
|
|
2484
|
+
};
|
|
2485
|
+
|
|
2486
|
+
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
2487
|
+
// See LICENSE in the project root for license information.
|
|
2488
|
+
|
|
2489
|
+
|
|
2490
|
+
/**
|
|
2491
|
+
* Displays help text or error messages within form elements - Internal Use Only.
|
|
2492
|
+
*
|
|
2493
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
2494
|
+
*/
|
|
2495
|
+
let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
2496
|
+
|
|
2497
|
+
constructor() {
|
|
2498
|
+
super();
|
|
2499
|
+
|
|
2500
|
+
this.error = false;
|
|
2501
|
+
this.onDark = false;
|
|
2502
|
+
this.hasTextContent = false;
|
|
2503
|
+
|
|
2504
|
+
AuroLibraryRuntimeUtils$5.prototype.handleComponentTagRename(this, 'auro-helptext');
|
|
2505
|
+
}
|
|
2506
|
+
|
|
2507
|
+
static get styles() {
|
|
2508
|
+
return [
|
|
2509
|
+
colorCss$6,
|
|
2510
|
+
styleCss$7,
|
|
2511
|
+
tokensCss$4
|
|
2512
|
+
];
|
|
2513
|
+
}
|
|
2514
|
+
|
|
2515
|
+
// function to define props used within the scope of this component
|
|
2516
|
+
static get properties() {
|
|
2517
|
+
return {
|
|
2518
|
+
|
|
2519
|
+
/**
|
|
2520
|
+
* @private
|
|
2521
|
+
*/
|
|
2522
|
+
slotNodes: {
|
|
2523
|
+
type: Boolean,
|
|
2524
|
+
},
|
|
2525
|
+
|
|
2526
|
+
/**
|
|
2527
|
+
* @private
|
|
2528
|
+
*/
|
|
2529
|
+
hasTextContent: {
|
|
2530
|
+
type: Boolean,
|
|
2531
|
+
},
|
|
2532
|
+
|
|
2533
|
+
/**
|
|
2534
|
+
* If declared, make font color red.
|
|
2535
|
+
*/
|
|
2536
|
+
error: {
|
|
2537
|
+
type: Boolean,
|
|
2538
|
+
reflect: true,
|
|
2539
|
+
},
|
|
2540
|
+
|
|
2541
|
+
/**
|
|
2542
|
+
* If declared, will apply onDark styles.
|
|
2543
|
+
*/
|
|
2544
|
+
onDark: {
|
|
2545
|
+
type: Boolean,
|
|
2546
|
+
reflect: true
|
|
2547
|
+
}
|
|
2548
|
+
};
|
|
2549
|
+
}
|
|
2550
|
+
|
|
2551
|
+
/**
|
|
2552
|
+
* This will register this element with the browser.
|
|
2553
|
+
* @param {string} [name="auro-helptext"] - The name of element that you want to register to.
|
|
2554
|
+
*
|
|
2555
|
+
* @example
|
|
2556
|
+
* AuroCheckbox.register("custom-helptext") // this will register this element to <custom-helptext/>
|
|
2557
|
+
*
|
|
2558
|
+
*/
|
|
2559
|
+
static register(name = "auro-helptext") {
|
|
2560
|
+
AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroHelpText);
|
|
2561
|
+
}
|
|
2562
|
+
|
|
2563
|
+
updated() {
|
|
2564
|
+
this.handleSlotChange();
|
|
2565
|
+
}
|
|
2566
|
+
|
|
2567
|
+
handleSlotChange(event) {
|
|
2568
|
+
if (event) {
|
|
2569
|
+
this.slotNodes = event.target.assignedNodes();
|
|
2570
|
+
}
|
|
2571
|
+
|
|
2572
|
+
this.hasTextContent = this.checkSlotsForContent(this.slotNodes);
|
|
2573
|
+
}
|
|
2574
|
+
|
|
2575
|
+
/**
|
|
2576
|
+
* Checks if any of the provided nodes or their nested slot nodes contain non-empty text content.
|
|
2577
|
+
*
|
|
2578
|
+
* @param {NodeList|Array} nodes - The list of nodes to check for content.
|
|
2579
|
+
* @returns {boolean} - Returns true if any node or nested slot node contains non-empty text content, otherwise false.
|
|
2580
|
+
* @private
|
|
2581
|
+
*/
|
|
2582
|
+
checkSlotsForContent(nodes) {
|
|
2583
|
+
if (!nodes) {
|
|
2584
|
+
return false;
|
|
2585
|
+
}
|
|
2586
|
+
|
|
2587
|
+
return nodes.some((node) => {
|
|
2588
|
+
if (node.textContent.trim()) {
|
|
2589
|
+
return true;
|
|
2590
|
+
}
|
|
2591
|
+
|
|
2592
|
+
if (!node.querySelector) {
|
|
2593
|
+
return false;
|
|
2594
|
+
}
|
|
2595
|
+
|
|
2596
|
+
const nestedSlot = node.tagName === 'SLOT' ? node : node.querySelector('slot');
|
|
2597
|
+
if (!nestedSlot) {
|
|
2598
|
+
return false;
|
|
2599
|
+
}
|
|
2600
|
+
|
|
2601
|
+
const nestedSlotNodes = nestedSlot.assignedNodes();
|
|
2602
|
+
return this.checkSlotsForContent(nestedSlotNodes);
|
|
2603
|
+
});
|
|
2604
|
+
}
|
|
2605
|
+
|
|
2606
|
+
// function that renders the HTML and CSS into the scope of the component
|
|
2607
|
+
render() {
|
|
2608
|
+
return html`
|
|
2609
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
2610
|
+
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
2611
|
+
</div>
|
|
2612
|
+
`;
|
|
2613
|
+
}
|
|
2614
|
+
};
|
|
2407
2615
|
|
|
2408
|
-
var
|
|
2616
|
+
var helptextVersion = '1.0.0';
|
|
2409
2617
|
|
|
2410
2618
|
/* eslint-disable lit/binding-positions, lit/no-invalid-html, max-lines */
|
|
2411
2619
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
@@ -2455,6 +2663,11 @@ class AuroCounter extends LitElement {
|
|
|
2455
2663
|
*/
|
|
2456
2664
|
this.iconTag = versioning.generateTag("auro-formkit-counter-icon", iconVersion$2, AuroIcon$2);
|
|
2457
2665
|
|
|
2666
|
+
/**
|
|
2667
|
+
* @private
|
|
2668
|
+
*/
|
|
2669
|
+
this.helpTextTag = versioning.generateTag('auro-formkit-input-helptext', helptextVersion, AuroHelpText$1);
|
|
2670
|
+
|
|
2458
2671
|
/**
|
|
2459
2672
|
* @private
|
|
2460
2673
|
* @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
|
|
@@ -2515,6 +2728,15 @@ class AuroCounter extends LitElement {
|
|
|
2515
2728
|
type: Boolean,
|
|
2516
2729
|
},
|
|
2517
2730
|
|
|
2731
|
+
/**
|
|
2732
|
+
* Error state and message.
|
|
2733
|
+
* True if set, value is the error message.
|
|
2734
|
+
*/
|
|
2735
|
+
error: {
|
|
2736
|
+
type: String,
|
|
2737
|
+
reflect: false,
|
|
2738
|
+
},
|
|
2739
|
+
|
|
2518
2740
|
/**
|
|
2519
2741
|
* The maximum value for the counter.
|
|
2520
2742
|
*/
|
|
@@ -2569,8 +2791,8 @@ class AuroCounter extends LitElement {
|
|
|
2569
2791
|
static get styles() {
|
|
2570
2792
|
return [
|
|
2571
2793
|
tokens,
|
|
2572
|
-
colorCss$
|
|
2573
|
-
styleCss$
|
|
2794
|
+
colorCss$7,
|
|
2795
|
+
styleCss$8
|
|
2574
2796
|
];
|
|
2575
2797
|
}
|
|
2576
2798
|
|
|
@@ -2711,50 +2933,79 @@ class AuroCounter extends LitElement {
|
|
|
2711
2933
|
}
|
|
2712
2934
|
}
|
|
2713
2935
|
|
|
2714
|
-
|
|
2936
|
+
/**
|
|
2937
|
+
* Returns HTML for the help text and error message.
|
|
2938
|
+
* @private
|
|
2939
|
+
* @returns {html} - Returns HTML for the help text and error message.
|
|
2940
|
+
*/
|
|
2941
|
+
renderHelpText() {
|
|
2715
2942
|
return html$1`
|
|
2716
|
-
|
|
2717
|
-
|
|
2718
|
-
|
|
2719
|
-
|
|
2720
|
-
|
|
2721
|
-
|
|
2722
|
-
|
|
2723
|
-
|
|
2724
|
-
|
|
2725
|
-
|
|
2726
|
-
|
|
2727
|
-
|
|
2728
|
-
|
|
2729
|
-
|
|
2730
|
-
|
|
2731
|
-
|
|
2732
|
-
|
|
2733
|
-
|
|
2734
|
-
.tabindex="${'-1'}"
|
|
2735
|
-
part="controlMinus"
|
|
2736
|
-
@click="${() => this.decrement()}"
|
|
2737
|
-
?onDark="${this.onDark}"
|
|
2738
|
-
?disabled="${this.disabled || this.disableMin || this.isIncrementDisabled(this.min)}"
|
|
2739
|
-
>
|
|
2740
|
-
<${this.iconTag} class="controlIcon" customSvg> ${IconUtil.generateSvgHtml(minusIcon)} </${this.iconTag}>
|
|
2741
|
-
</auro-counter-button>
|
|
2943
|
+
${!this.validity || this.validity === undefined || this.validity === 'valid'
|
|
2944
|
+
? html$1`
|
|
2945
|
+
<${this.helpTextTag} ?onDark="${this.onDark}">
|
|
2946
|
+
<p id="${this.uniqueId}" part="helpText">
|
|
2947
|
+
<slot name="helptext"></slot>
|
|
2948
|
+
</p>
|
|
2949
|
+
</${this.helpTextTag}>
|
|
2950
|
+
`
|
|
2951
|
+
: html$1`
|
|
2952
|
+
<${this.helpTextTag} error ?onDark="${this.onDark}">
|
|
2953
|
+
<p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
|
|
2954
|
+
${this.errorMessage}
|
|
2955
|
+
</p>
|
|
2956
|
+
</${this.helpTextTag}>
|
|
2957
|
+
`
|
|
2958
|
+
}
|
|
2959
|
+
`;
|
|
2960
|
+
}
|
|
2742
2961
|
|
|
2743
|
-
|
|
2744
|
-
|
|
2962
|
+
render() {
|
|
2963
|
+
return html$1`
|
|
2964
|
+
<div class="counterWrapper">
|
|
2965
|
+
<div class="counter">
|
|
2966
|
+
<div class="content" >
|
|
2967
|
+
<label id="counter-label" class="label"><slot @slotchange="${this.onDefaultSlotChange}" ></slot></label>
|
|
2968
|
+
<slot id="counter-description" name="description"></slot>
|
|
2745
2969
|
</div>
|
|
2746
|
-
|
|
2747
|
-
|
|
2748
|
-
aria-
|
|
2749
|
-
|
|
2750
|
-
|
|
2751
|
-
|
|
2752
|
-
|
|
2753
|
-
|
|
2970
|
+
<div
|
|
2971
|
+
part="counterControl"
|
|
2972
|
+
aria-labelledby="counter-label"
|
|
2973
|
+
aria-describedby="counter-description"
|
|
2974
|
+
tabindex="${this.disabled ? '-1' : '0'}"
|
|
2975
|
+
role="spinbutton"
|
|
2976
|
+
aria-valuemin="${this.min}"
|
|
2977
|
+
aria-valuemax="${this.max}"
|
|
2978
|
+
aria-valuenow="${this.value}"
|
|
2979
|
+
aria-valuetext="${this.value !== undefined ? this.value : this.min}"
|
|
2754
2980
|
>
|
|
2755
|
-
|
|
2756
|
-
|
|
2981
|
+
<auro-counter-button
|
|
2982
|
+
aria-hidden="true"
|
|
2983
|
+
.tabindex="${'-1'}"
|
|
2984
|
+
part="controlMinus"
|
|
2985
|
+
@click="${() => this.decrement()}"
|
|
2986
|
+
?onDark="${this.onDark}"
|
|
2987
|
+
?disabled="${this.disabled || this.disableMin || this.isIncrementDisabled(this.min)}"
|
|
2988
|
+
>
|
|
2989
|
+
<${this.iconTag} class="controlIcon" customSvg> ${IconUtil.generateSvgHtml(minusIcon)} </${this.iconTag}>
|
|
2990
|
+
</auro-counter-button>
|
|
2991
|
+
|
|
2992
|
+
<div class="quantityWrapper">
|
|
2993
|
+
<div class="quantity">${this.value !== undefined ? this.value : this.min}</div>
|
|
2994
|
+
</div>
|
|
2995
|
+
|
|
2996
|
+
<auro-counter-button
|
|
2997
|
+
aria-hidden="true"
|
|
2998
|
+
.tabindex="${'-1'}"
|
|
2999
|
+
part="controlPlus"
|
|
3000
|
+
@click="${() => this.increment()}"
|
|
3001
|
+
?onDark="${this.onDark}"
|
|
3002
|
+
?disabled="${this.disabled || this.disableMax || this.isIncrementDisabled(this.max)}"
|
|
3003
|
+
>
|
|
3004
|
+
<${this.iconTag} class="controlIcon" customSvg> ${IconUtil.generateSvgHtml(plusIcon)} </${this.iconTag}>
|
|
3005
|
+
</auro-counter-button>
|
|
3006
|
+
</div>
|
|
2757
3007
|
</div>
|
|
3008
|
+
${this.renderHelpText()}
|
|
2758
3009
|
</div>
|
|
2759
3010
|
`;
|
|
2760
3011
|
}
|
|
@@ -5700,7 +5951,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
5700
5951
|
|
|
5701
5952
|
var iconVersion$1 = '6.1.2';
|
|
5702
5953
|
|
|
5703
|
-
var styleCss$1$
|
|
5954
|
+
var styleCss$1$1 = css`: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}`;
|
|
5704
5955
|
|
|
5705
5956
|
var colorCss$2$1 = css`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
5706
5957
|
|
|
@@ -5742,7 +5993,7 @@ class AuroDropdownBib extends LitElement {
|
|
|
5742
5993
|
|
|
5743
5994
|
static get styles() {
|
|
5744
5995
|
return [
|
|
5745
|
-
styleCss$1$
|
|
5996
|
+
styleCss$1$1,
|
|
5746
5997
|
colorCss$2$1,
|
|
5747
5998
|
tokensCss$1$1
|
|
5748
5999
|
];
|
|
@@ -5901,7 +6152,7 @@ var dropdownVersion$1 = '3.0.0';
|
|
|
5901
6152
|
|
|
5902
6153
|
var shapeSizeCss = css`.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}`;
|
|
5903
6154
|
|
|
5904
|
-
var colorCss$1$
|
|
6155
|
+
var colorCss$1$1 = css`: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)}`;
|
|
5905
6156
|
|
|
5906
6157
|
var classicColorCss = css``;
|
|
5907
6158
|
|
|
@@ -5915,7 +6166,7 @@ var colorCss$5 = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-col
|
|
|
5915
6166
|
|
|
5916
6167
|
var styleCss$6 = css`.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}`;
|
|
5917
6168
|
|
|
5918
|
-
var tokensCss$
|
|
6169
|
+
var tokensCss$3 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
5919
6170
|
|
|
5920
6171
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
5921
6172
|
// See LICENSE in the project root for license information.
|
|
@@ -5924,7 +6175,7 @@ var tokensCss$4 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texti
|
|
|
5924
6175
|
|
|
5925
6176
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
5926
6177
|
|
|
5927
|
-
let AuroLibraryRuntimeUtils$
|
|
6178
|
+
let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
|
|
5928
6179
|
|
|
5929
6180
|
/* eslint-disable jsdoc/require-param */
|
|
5930
6181
|
|
|
@@ -5996,7 +6247,7 @@ let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
|
|
|
5996
6247
|
*
|
|
5997
6248
|
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
5998
6249
|
*/
|
|
5999
|
-
|
|
6250
|
+
class AuroHelpText extends LitElement {
|
|
6000
6251
|
|
|
6001
6252
|
constructor() {
|
|
6002
6253
|
super();
|
|
@@ -6005,14 +6256,14 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
6005
6256
|
this.onDark = false;
|
|
6006
6257
|
this.hasTextContent = false;
|
|
6007
6258
|
|
|
6008
|
-
AuroLibraryRuntimeUtils$
|
|
6259
|
+
AuroLibraryRuntimeUtils$4.prototype.handleComponentTagRename(this, 'auro-helptext');
|
|
6009
6260
|
}
|
|
6010
6261
|
|
|
6011
6262
|
static get styles() {
|
|
6012
6263
|
return [
|
|
6013
6264
|
colorCss$5,
|
|
6014
6265
|
styleCss$6,
|
|
6015
|
-
tokensCss$
|
|
6266
|
+
tokensCss$3
|
|
6016
6267
|
];
|
|
6017
6268
|
}
|
|
6018
6269
|
|
|
@@ -6061,7 +6312,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
6061
6312
|
*
|
|
6062
6313
|
*/
|
|
6063
6314
|
static register(name = "auro-helptext") {
|
|
6064
|
-
AuroLibraryRuntimeUtils$
|
|
6315
|
+
AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroHelpText);
|
|
6065
6316
|
}
|
|
6066
6317
|
|
|
6067
6318
|
updated() {
|
|
@@ -6115,7 +6366,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
6115
6366
|
</div>
|
|
6116
6367
|
`;
|
|
6117
6368
|
}
|
|
6118
|
-
}
|
|
6369
|
+
}
|
|
6119
6370
|
|
|
6120
6371
|
var helpTextVersion = '1.0.0';
|
|
6121
6372
|
|
|
@@ -6336,7 +6587,7 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6336
6587
|
/**
|
|
6337
6588
|
* @private
|
|
6338
6589
|
*/
|
|
6339
|
-
this.helpTextTag = versioning.generateTag('auro-formkit-dropdown-helptext', helpTextVersion, AuroHelpText
|
|
6590
|
+
this.helpTextTag = versioning.generateTag('auro-formkit-dropdown-helptext', helpTextVersion, AuroHelpText);
|
|
6340
6591
|
|
|
6341
6592
|
/**
|
|
6342
6593
|
* @private
|
|
@@ -6656,7 +6907,7 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6656
6907
|
|
|
6657
6908
|
static get styles() {
|
|
6658
6909
|
return [
|
|
6659
|
-
colorCss$1$
|
|
6910
|
+
colorCss$1$1,
|
|
6660
6911
|
tokensCss$1$1,
|
|
6661
6912
|
|
|
6662
6913
|
// default layout
|
|
@@ -7850,7 +8101,7 @@ let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
|
7850
8101
|
|
|
7851
8102
|
var styleCss$2 = css`: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}}`;
|
|
7852
8103
|
|
|
7853
|
-
var colorCss$1
|
|
8104
|
+
var colorCss$1 = css`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color:var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]){--ds-auro-loader-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color:transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color:currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color:currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
|
|
7854
8105
|
|
|
7855
8106
|
var tokensCss$1 = css`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
|
|
7856
8107
|
|
|
@@ -7929,7 +8180,7 @@ class AuroLoader extends LitElement {
|
|
|
7929
8180
|
static get styles() {
|
|
7930
8181
|
return [
|
|
7931
8182
|
css`${styleCss$2}`,
|
|
7932
|
-
css`${colorCss$1
|
|
8183
|
+
css`${colorCss$1}`,
|
|
7933
8184
|
css`${tokensCss$1}`
|
|
7934
8185
|
];
|
|
7935
8186
|
}
|
|
@@ -8415,7 +8666,7 @@ const cacheFetch = (uri, options = {}) => {
|
|
|
8415
8666
|
return _fetchMap.get(uri);
|
|
8416
8667
|
};
|
|
8417
8668
|
|
|
8418
|
-
var styleCss$1
|
|
8669
|
+
var styleCss$1 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 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}`;
|
|
8419
8670
|
|
|
8420
8671
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
8421
8672
|
// See LICENSE in the project root for license information.
|
|
@@ -8458,7 +8709,7 @@ class BaseIcon extends AuroElement$2 {
|
|
|
8458
8709
|
|
|
8459
8710
|
static get styles() {
|
|
8460
8711
|
return css`
|
|
8461
|
-
${styleCss$1
|
|
8712
|
+
${styleCss$1}
|
|
8462
8713
|
`;
|
|
8463
8714
|
}
|
|
8464
8715
|
|
|
@@ -8499,7 +8750,7 @@ class BaseIcon extends AuroElement$2 {
|
|
|
8499
8750
|
}
|
|
8500
8751
|
}
|
|
8501
8752
|
|
|
8502
|
-
var tokensCss
|
|
8753
|
+
var tokensCss = css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
|
|
8503
8754
|
|
|
8504
8755
|
var colorCss$4 = css`: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)}`;
|
|
8505
8756
|
|
|
@@ -8659,8 +8910,8 @@ class AuroIcon extends BaseIcon {
|
|
|
8659
8910
|
static get styles() {
|
|
8660
8911
|
return [
|
|
8661
8912
|
super.styles,
|
|
8662
|
-
css`${tokensCss
|
|
8663
|
-
css`${styleCss$1
|
|
8913
|
+
css`${tokensCss}`,
|
|
8914
|
+
css`${styleCss$1}`,
|
|
8664
8915
|
css`${colorCss$4}`
|
|
8665
8916
|
];
|
|
8666
8917
|
}
|
|
@@ -8753,7 +9004,7 @@ var iconVersion = '8.0.4';
|
|
|
8753
9004
|
|
|
8754
9005
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
8755
9006
|
|
|
8756
|
-
|
|
9007
|
+
class AuroLibraryRuntimeUtils {
|
|
8757
9008
|
|
|
8758
9009
|
/* eslint-disable jsdoc/require-param */
|
|
8759
9010
|
|
|
@@ -8814,7 +9065,7 @@ let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
|
|
|
8814
9065
|
|
|
8815
9066
|
return elemTag === tag || elem.hasAttribute(tag);
|
|
8816
9067
|
}
|
|
8817
|
-
}
|
|
9068
|
+
}
|
|
8818
9069
|
|
|
8819
9070
|
var styleCss$5 = css`.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)}`;
|
|
8820
9071
|
|
|
@@ -8845,7 +9096,7 @@ class AuroHeader extends LitElement {
|
|
|
8845
9096
|
/**
|
|
8846
9097
|
* @private
|
|
8847
9098
|
*/
|
|
8848
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils
|
|
9099
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
8849
9100
|
}
|
|
8850
9101
|
|
|
8851
9102
|
// function to define props used within the scope of this component
|
|
@@ -8875,7 +9126,7 @@ class AuroHeader extends LitElement {
|
|
|
8875
9126
|
*
|
|
8876
9127
|
*/
|
|
8877
9128
|
static register(name = "auro-header") {
|
|
8878
|
-
AuroLibraryRuntimeUtils
|
|
9129
|
+
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroHeader);
|
|
8879
9130
|
}
|
|
8880
9131
|
|
|
8881
9132
|
firstUpdated() {
|
|
@@ -9107,219 +9358,11 @@ class AuroBibtemplate extends LitElement {
|
|
|
9107
9358
|
|
|
9108
9359
|
var bibTemplateVersion = '1.0.0';
|
|
9109
9360
|
|
|
9110
|
-
var
|
|
9111
|
-
|
|
9112
|
-
var styleCss$1 = css`.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}`;
|
|
9361
|
+
var styleCss = css`:host([isindropdown]) .wrapper{padding:var(--ds-size-300, 1.5rem)}`;
|
|
9113
9362
|
|
|
9114
|
-
var
|
|
9363
|
+
var colorCss = css`:host ::slotted(*:not(:first-child)){border-color:var(--ds-auro-counter-divider-color)}`;
|
|
9115
9364
|
|
|
9116
|
-
// Copyright (c) Alaska
|
|
9117
|
-
// See LICENSE in the project root for license information.
|
|
9118
|
-
|
|
9119
|
-
// ---------------------------------------------------------------------
|
|
9120
|
-
|
|
9121
|
-
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
9122
|
-
|
|
9123
|
-
class AuroLibraryRuntimeUtils {
|
|
9124
|
-
|
|
9125
|
-
/* eslint-disable jsdoc/require-param */
|
|
9126
|
-
|
|
9127
|
-
/**
|
|
9128
|
-
* This will register a new custom element with the browser.
|
|
9129
|
-
* @param {String} name - The name of the custom element.
|
|
9130
|
-
* @param {Object} componentClass - The class to register as a custom element.
|
|
9131
|
-
* @returns {void}
|
|
9132
|
-
*/
|
|
9133
|
-
registerComponent(name, componentClass) {
|
|
9134
|
-
if (!customElements.get(name)) {
|
|
9135
|
-
customElements.define(name, class extends componentClass {});
|
|
9136
|
-
}
|
|
9137
|
-
}
|
|
9138
|
-
|
|
9139
|
-
/**
|
|
9140
|
-
* Finds and returns the closest HTML Element based on a selector.
|
|
9141
|
-
* @returns {void}
|
|
9142
|
-
*/
|
|
9143
|
-
closestElement(
|
|
9144
|
-
selector, // selector like in .closest()
|
|
9145
|
-
base = this, // extra functionality to skip a parent
|
|
9146
|
-
__Closest = (el, found = el && el.closest(selector)) =>
|
|
9147
|
-
!el || el === document || el === window
|
|
9148
|
-
? null // standard .closest() returns null for non-found selectors also
|
|
9149
|
-
: found
|
|
9150
|
-
? found // found a selector INside this element
|
|
9151
|
-
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
9152
|
-
) {
|
|
9153
|
-
return __Closest(base);
|
|
9154
|
-
}
|
|
9155
|
-
/* eslint-enable jsdoc/require-param */
|
|
9156
|
-
|
|
9157
|
-
/**
|
|
9158
|
-
* 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.
|
|
9159
|
-
* @param {Object} elem - The element to check.
|
|
9160
|
-
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
9161
|
-
* @returns {void}
|
|
9162
|
-
*/
|
|
9163
|
-
handleComponentTagRename(elem, tagName) {
|
|
9164
|
-
const tag = tagName.toLowerCase();
|
|
9165
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
9166
|
-
|
|
9167
|
-
if (elemTag !== tag) {
|
|
9168
|
-
elem.setAttribute(tag, true);
|
|
9169
|
-
}
|
|
9170
|
-
}
|
|
9171
|
-
|
|
9172
|
-
/**
|
|
9173
|
-
* Validates if an element is a specific Auro component.
|
|
9174
|
-
* @param {Object} elem - The element to validate.
|
|
9175
|
-
* @param {String} tagName - The name of the Auro component to check against.
|
|
9176
|
-
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
9177
|
-
*/
|
|
9178
|
-
elementMatch(elem, tagName) {
|
|
9179
|
-
const tag = tagName.toLowerCase();
|
|
9180
|
-
const elemTag = elem.tagName.toLowerCase();
|
|
9181
|
-
|
|
9182
|
-
return elemTag === tag || elem.hasAttribute(tag);
|
|
9183
|
-
}
|
|
9184
|
-
}
|
|
9185
|
-
|
|
9186
|
-
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
9187
|
-
// See LICENSE in the project root for license information.
|
|
9188
|
-
|
|
9189
|
-
|
|
9190
|
-
/**
|
|
9191
|
-
* Displays help text or error messages within form elements - Internal Use Only.
|
|
9192
|
-
*
|
|
9193
|
-
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
9194
|
-
*/
|
|
9195
|
-
class AuroHelpText extends LitElement {
|
|
9196
|
-
|
|
9197
|
-
constructor() {
|
|
9198
|
-
super();
|
|
9199
|
-
|
|
9200
|
-
this.error = false;
|
|
9201
|
-
this.onDark = false;
|
|
9202
|
-
this.hasTextContent = false;
|
|
9203
|
-
|
|
9204
|
-
AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(this, 'auro-helptext');
|
|
9205
|
-
}
|
|
9206
|
-
|
|
9207
|
-
static get styles() {
|
|
9208
|
-
return [
|
|
9209
|
-
colorCss$1,
|
|
9210
|
-
styleCss$1,
|
|
9211
|
-
tokensCss
|
|
9212
|
-
];
|
|
9213
|
-
}
|
|
9214
|
-
|
|
9215
|
-
// function to define props used within the scope of this component
|
|
9216
|
-
static get properties() {
|
|
9217
|
-
return {
|
|
9218
|
-
|
|
9219
|
-
/**
|
|
9220
|
-
* @private
|
|
9221
|
-
*/
|
|
9222
|
-
slotNodes: {
|
|
9223
|
-
type: Boolean,
|
|
9224
|
-
},
|
|
9225
|
-
|
|
9226
|
-
/**
|
|
9227
|
-
* @private
|
|
9228
|
-
*/
|
|
9229
|
-
hasTextContent: {
|
|
9230
|
-
type: Boolean,
|
|
9231
|
-
},
|
|
9232
|
-
|
|
9233
|
-
/**
|
|
9234
|
-
* If declared, make font color red.
|
|
9235
|
-
*/
|
|
9236
|
-
error: {
|
|
9237
|
-
type: Boolean,
|
|
9238
|
-
reflect: true,
|
|
9239
|
-
},
|
|
9240
|
-
|
|
9241
|
-
/**
|
|
9242
|
-
* If declared, will apply onDark styles.
|
|
9243
|
-
*/
|
|
9244
|
-
onDark: {
|
|
9245
|
-
type: Boolean,
|
|
9246
|
-
reflect: true
|
|
9247
|
-
}
|
|
9248
|
-
};
|
|
9249
|
-
}
|
|
9250
|
-
|
|
9251
|
-
/**
|
|
9252
|
-
* This will register this element with the browser.
|
|
9253
|
-
* @param {string} [name="auro-helptext"] - The name of element that you want to register to.
|
|
9254
|
-
*
|
|
9255
|
-
* @example
|
|
9256
|
-
* AuroCheckbox.register("custom-helptext") // this will register this element to <custom-helptext/>
|
|
9257
|
-
*
|
|
9258
|
-
*/
|
|
9259
|
-
static register(name = "auro-helptext") {
|
|
9260
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroHelpText);
|
|
9261
|
-
}
|
|
9262
|
-
|
|
9263
|
-
updated() {
|
|
9264
|
-
this.handleSlotChange();
|
|
9265
|
-
}
|
|
9266
|
-
|
|
9267
|
-
handleSlotChange(event) {
|
|
9268
|
-
if (event) {
|
|
9269
|
-
this.slotNodes = event.target.assignedNodes();
|
|
9270
|
-
}
|
|
9271
|
-
|
|
9272
|
-
this.hasTextContent = this.checkSlotsForContent(this.slotNodes);
|
|
9273
|
-
}
|
|
9274
|
-
|
|
9275
|
-
/**
|
|
9276
|
-
* Checks if any of the provided nodes or their nested slot nodes contain non-empty text content.
|
|
9277
|
-
*
|
|
9278
|
-
* @param {NodeList|Array} nodes - The list of nodes to check for content.
|
|
9279
|
-
* @returns {boolean} - Returns true if any node or nested slot node contains non-empty text content, otherwise false.
|
|
9280
|
-
* @private
|
|
9281
|
-
*/
|
|
9282
|
-
checkSlotsForContent(nodes) {
|
|
9283
|
-
if (!nodes) {
|
|
9284
|
-
return false;
|
|
9285
|
-
}
|
|
9286
|
-
|
|
9287
|
-
return nodes.some((node) => {
|
|
9288
|
-
if (node.textContent.trim()) {
|
|
9289
|
-
return true;
|
|
9290
|
-
}
|
|
9291
|
-
|
|
9292
|
-
if (!node.querySelector) {
|
|
9293
|
-
return false;
|
|
9294
|
-
}
|
|
9295
|
-
|
|
9296
|
-
const nestedSlot = node.tagName === 'SLOT' ? node : node.querySelector('slot');
|
|
9297
|
-
if (!nestedSlot) {
|
|
9298
|
-
return false;
|
|
9299
|
-
}
|
|
9300
|
-
|
|
9301
|
-
const nestedSlotNodes = nestedSlot.assignedNodes();
|
|
9302
|
-
return this.checkSlotsForContent(nestedSlotNodes);
|
|
9303
|
-
});
|
|
9304
|
-
}
|
|
9305
|
-
|
|
9306
|
-
// function that renders the HTML and CSS into the scope of the component
|
|
9307
|
-
render() {
|
|
9308
|
-
return html`
|
|
9309
|
-
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
9310
|
-
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
9311
|
-
</div>
|
|
9312
|
-
`;
|
|
9313
|
-
}
|
|
9314
|
-
}
|
|
9315
|
-
|
|
9316
|
-
var helptextVersion = '1.0.0';
|
|
9317
|
-
|
|
9318
|
-
var styleCss = css`:host([isindropdown]) .wrapper{padding:var(--ds-size-300, 1.5rem)}`;
|
|
9319
|
-
|
|
9320
|
-
var colorCss = css`:host ::slotted(*:not(:first-child)){border-color:var(--ds-auro-counter-divider-color)}`;
|
|
9321
|
-
|
|
9322
|
-
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
9365
|
+
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
9323
9366
|
// See LICENSE in the project root for license information.
|
|
9324
9367
|
|
|
9325
9368
|
|
|
@@ -9460,7 +9503,19 @@ class AuroElement extends LitElement {
|
|
|
9460
9503
|
}
|
|
9461
9504
|
}
|
|
9462
9505
|
|
|
9463
|
-
/*
|
|
9506
|
+
/*
|
|
9507
|
+
eslint-disable
|
|
9508
|
+
lit/no-invalid-html,
|
|
9509
|
+
lit/binding-positions,
|
|
9510
|
+
max-lines,
|
|
9511
|
+
no-underscore-dangle,
|
|
9512
|
+
arrow-parens,
|
|
9513
|
+
no-confusing-arrow,
|
|
9514
|
+
curly,
|
|
9515
|
+
dot-location,
|
|
9516
|
+
no-inline-comments,
|
|
9517
|
+
line-comment-position,
|
|
9518
|
+
*/
|
|
9464
9519
|
|
|
9465
9520
|
|
|
9466
9521
|
/**
|
|
@@ -9519,6 +9574,12 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9519
9574
|
*/
|
|
9520
9575
|
this.validation = new AuroFormValidation();
|
|
9521
9576
|
|
|
9577
|
+
/** @private */
|
|
9578
|
+
this.updateValue = this.updateValue.bind(this);
|
|
9579
|
+
|
|
9580
|
+
/** @private */
|
|
9581
|
+
this.updateValidity = this.updateValidity.bind(this);
|
|
9582
|
+
|
|
9522
9583
|
/**
|
|
9523
9584
|
* Generate unique names for dependency components.
|
|
9524
9585
|
* @private
|
|
@@ -9544,7 +9605,12 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9544
9605
|
* @private
|
|
9545
9606
|
* @type {string}
|
|
9546
9607
|
*/
|
|
9547
|
-
this.helpTextTag = versioning.generateTag("auro-formkit-counter-helptext", helptextVersion, AuroHelpText);
|
|
9608
|
+
this.helpTextTag = versioning.generateTag("auro-formkit-counter-helptext", helptextVersion, AuroHelpText$1);
|
|
9609
|
+
|
|
9610
|
+
/**
|
|
9611
|
+
* @private
|
|
9612
|
+
*/
|
|
9613
|
+
this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$2, AuroIcon$2);
|
|
9548
9614
|
}
|
|
9549
9615
|
|
|
9550
9616
|
static get styles() {
|
|
@@ -9569,6 +9635,25 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9569
9635
|
reflect: true
|
|
9570
9636
|
},
|
|
9571
9637
|
|
|
9638
|
+
/**
|
|
9639
|
+
* The current error message to display when the component is invalid.
|
|
9640
|
+
*/
|
|
9641
|
+
error: {
|
|
9642
|
+
type: String,
|
|
9643
|
+
reflect: false
|
|
9644
|
+
},
|
|
9645
|
+
|
|
9646
|
+
/**
|
|
9647
|
+
* The current error message to display when the component is invalid.
|
|
9648
|
+
* This is set by validation and is not available to consumers.
|
|
9649
|
+
* @private
|
|
9650
|
+
*/
|
|
9651
|
+
errorMessage: {
|
|
9652
|
+
type: String,
|
|
9653
|
+
reflect: false,
|
|
9654
|
+
attribute: false
|
|
9655
|
+
},
|
|
9656
|
+
|
|
9572
9657
|
/**
|
|
9573
9658
|
* Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
|
|
9574
9659
|
* at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
|
|
@@ -9727,7 +9812,103 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9727
9812
|
this.counters = this.querySelectorAll("auro-counter, [auro-counter]");
|
|
9728
9813
|
this.counters.forEach((counter) => {
|
|
9729
9814
|
counter.onDark = this.onDark;
|
|
9730
|
-
counter.addEventListener("input",
|
|
9815
|
+
counter.addEventListener("input", this.updateValue);
|
|
9816
|
+
counter.addEventListener("auroFormElement-validated", this.updateValidity);
|
|
9817
|
+
});
|
|
9818
|
+
}
|
|
9819
|
+
|
|
9820
|
+
/**
|
|
9821
|
+
* Renders help text error messages.
|
|
9822
|
+
* @param {Array<string>} messages - The error messages to render.
|
|
9823
|
+
* @returns {TemplateResult[]} - The rendered error messages rendered in a TemplateResult.
|
|
9824
|
+
* @private
|
|
9825
|
+
*/
|
|
9826
|
+
renderHelpTextErrors(messages) {
|
|
9827
|
+
|
|
9828
|
+
// Return empty template if no messages are provided
|
|
9829
|
+
if (!messages || messages.length === 0) return html$1``;
|
|
9830
|
+
|
|
9831
|
+
// Return messages as a TemplateResult
|
|
9832
|
+
return messages.map((message, index) => html$1`
|
|
9833
|
+
${message}
|
|
9834
|
+
${index < messages.length - 1
|
|
9835
|
+
? html$1`<br>`
|
|
9836
|
+
: ''
|
|
9837
|
+
}
|
|
9838
|
+
`);
|
|
9839
|
+
}
|
|
9840
|
+
|
|
9841
|
+
/**
|
|
9842
|
+
* Gets and returns an array of counters in an invalid state.
|
|
9843
|
+
* @returns {Array<HTMLElement>} - Returns an array of invalid counters.
|
|
9844
|
+
* @param {NodeList} counters - The NodeList of counter elements to check.
|
|
9845
|
+
* @private
|
|
9846
|
+
*/
|
|
9847
|
+
getInvalidCounters(counters) {
|
|
9848
|
+
return Array.from(counters).filter(counter => counter.validity && counter.validity !== 'valid');
|
|
9849
|
+
}
|
|
9850
|
+
|
|
9851
|
+
/**
|
|
9852
|
+
* Gets all valid error messages from errored counters.
|
|
9853
|
+
* @param {NodeList} invalidCounters - The NodeList of counter elements to check.
|
|
9854
|
+
* @returns {Array<string>} - Returns an array of error messages from invalid counters.
|
|
9855
|
+
* @private
|
|
9856
|
+
*/
|
|
9857
|
+
getErrorMessages(invalidCounters) {
|
|
9858
|
+
return invalidCounters
|
|
9859
|
+
.map(counter => counter.errorMessage)
|
|
9860
|
+
.filter(message => message && message.length > 0);
|
|
9861
|
+
};
|
|
9862
|
+
|
|
9863
|
+
/**
|
|
9864
|
+
* Updates the validity of the counter group based on the validity of its counters.
|
|
9865
|
+
* This method checks all counters within the group, determines if any are invalid, and updates the group's validity state and error message accordingly.
|
|
9866
|
+
* If any counter is invalid, it generates a combined error message from all invalid counters.
|
|
9867
|
+
* @returns {void}
|
|
9868
|
+
* @private
|
|
9869
|
+
*/
|
|
9870
|
+
updateValidity () {
|
|
9871
|
+
|
|
9872
|
+
// We don't need to do anything if there are no counters
|
|
9873
|
+
if (!this.counters) return;
|
|
9874
|
+
|
|
9875
|
+
// Wait for initial validation to complete before updating validity and error message
|
|
9876
|
+
// This is necessary because we need the initial validation to know when to reset the validity and error message
|
|
9877
|
+
setTimeout(() => {
|
|
9878
|
+
|
|
9879
|
+
// Get any invalid counters
|
|
9880
|
+
const invalidCounters = this.getInvalidCounters(this.counters);
|
|
9881
|
+
|
|
9882
|
+
// Determine if we are in an invalid state based on the presence of invalid counters
|
|
9883
|
+
const isInvalid = invalidCounters.length > 0;
|
|
9884
|
+
|
|
9885
|
+
// If we are in an invalid state
|
|
9886
|
+
if (isInvalid) {
|
|
9887
|
+
|
|
9888
|
+
// Generate the error messages
|
|
9889
|
+
const errorMessages = this.getErrorMessages(invalidCounters);
|
|
9890
|
+
|
|
9891
|
+
const errorMessage = isInvalid ? this.renderHelpTextErrors(errorMessages) : this.errorMessage;
|
|
9892
|
+
|
|
9893
|
+
// Set the validity and error message
|
|
9894
|
+
// This needs to allow for the initial validation to come through
|
|
9895
|
+
this.validity =
|
|
9896
|
+
invalidCounters[0].validity || // The first invalid counter's validity
|
|
9897
|
+
this.validity || // incoming validity from validation
|
|
9898
|
+
undefined; // fallback
|
|
9899
|
+
|
|
9900
|
+
this.errorMessage =
|
|
9901
|
+
errorMessage || // our message
|
|
9902
|
+
this.errorMessage || // incoming message from validation
|
|
9903
|
+
undefined; // fallback
|
|
9904
|
+
}
|
|
9905
|
+
|
|
9906
|
+
if (!isInvalid && this.validity !== 'valid') {
|
|
9907
|
+
|
|
9908
|
+
// If there are no invalid counters, reset validity and error message
|
|
9909
|
+
this.validity = 'valid';
|
|
9910
|
+
this.errorMessage = undefined;
|
|
9911
|
+
}
|
|
9731
9912
|
});
|
|
9732
9913
|
}
|
|
9733
9914
|
|
|
@@ -9746,7 +9927,8 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9746
9927
|
this.counters = counterSlot.assignedElements().filter(el => el.tagName.toLowerCase() === 'auro-counter' || el.hasAttribute('auro-counter'));
|
|
9747
9928
|
|
|
9748
9929
|
this.counters.forEach((counter) => {
|
|
9749
|
-
counter.addEventListener("input",
|
|
9930
|
+
counter.addEventListener("input", this.updateValue);
|
|
9931
|
+
counter.addEventListener("auroFormElement-validated", this.updateValidity);
|
|
9750
9932
|
});
|
|
9751
9933
|
|
|
9752
9934
|
if (this.isDropdown) {
|
|
@@ -9896,6 +10078,57 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9896
10078
|
AuroLibraryRuntimeUtils$8.prototype.registerComponent(name, AuroCounterGroup);
|
|
9897
10079
|
}
|
|
9898
10080
|
|
|
10081
|
+
/**
|
|
10082
|
+
* Returns HTML for the help text and error message.
|
|
10083
|
+
* @private
|
|
10084
|
+
* @returns {html} - Returns HTML for the help text and error message.
|
|
10085
|
+
*/
|
|
10086
|
+
renderHelpText() {
|
|
10087
|
+
return !this.validity || this.validity === undefined || this.validity === 'valid'
|
|
10088
|
+
? html$1`
|
|
10089
|
+
<div slot="helpText">
|
|
10090
|
+
<${this.helpTextTag} ?onDark="${this.onDark}">
|
|
10091
|
+
<p id="${this.uniqueId}" part="helpText">
|
|
10092
|
+
<slot name="helpText"></slot>
|
|
10093
|
+
</p>
|
|
10094
|
+
</${this.helpTextTag}>
|
|
10095
|
+
</div>
|
|
10096
|
+
`
|
|
10097
|
+
: html$1`
|
|
10098
|
+
<div slot="helpText">
|
|
10099
|
+
<${this.helpTextTag} error ?onDark="${this.onDark}">
|
|
10100
|
+
<p id="${this.uniqueId}" part="helpText" role="alert" aria-live="assertive">
|
|
10101
|
+
${this.error || this.errorMessage}
|
|
10102
|
+
</p>
|
|
10103
|
+
</${this.helpTextTag}>
|
|
10104
|
+
</div>
|
|
10105
|
+
`;
|
|
10106
|
+
}
|
|
10107
|
+
|
|
10108
|
+
/**
|
|
10109
|
+
* Returns HTML for the validation error icon.
|
|
10110
|
+
* @private
|
|
10111
|
+
* @returns {html} - Returns HTML for the validation error icon.
|
|
10112
|
+
*/
|
|
10113
|
+
renderValidationErrorIcon() {
|
|
10114
|
+
|
|
10115
|
+
// Don't render in valid state
|
|
10116
|
+
if (!this.validity || this.validity === 'valid') return undefined;
|
|
10117
|
+
|
|
10118
|
+
return html$1`
|
|
10119
|
+
${this.validity && this.validity !== 'valid' ? html$1`
|
|
10120
|
+
<div class="notification alertNotification">
|
|
10121
|
+
<${this.iconTag}
|
|
10122
|
+
category="alert"
|
|
10123
|
+
name="error-stroke"
|
|
10124
|
+
variant="statusError"
|
|
10125
|
+
?ondark="${this.onDark}">
|
|
10126
|
+
</${this.iconTag}>
|
|
10127
|
+
</div>
|
|
10128
|
+
` : undefined}
|
|
10129
|
+
`;
|
|
10130
|
+
}
|
|
10131
|
+
|
|
9899
10132
|
/**
|
|
9900
10133
|
* Render the dropdown structure for the counter group.
|
|
9901
10134
|
* @returns {TemplateResult} The dropdown template.
|
|
@@ -9952,28 +10185,13 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9952
10185
|
${this.counters && Array.from(this.counters).map((counter, index) => html$1`${counter.value} ${counter.defaultSlot}${index !== this.counters.length - 1 ? ', ' : ''}`)}
|
|
9953
10186
|
</slot>
|
|
9954
10187
|
</div>
|
|
9955
|
-
<div class="accents right"
|
|
10188
|
+
<div class="accents right">
|
|
10189
|
+
${this.renderValidationErrorIcon()}
|
|
10190
|
+
</div>
|
|
9956
10191
|
</div>
|
|
9957
10192
|
`;
|
|
9958
10193
|
};
|
|
9959
10194
|
|
|
9960
|
-
/**
|
|
9961
|
-
* Render the help text for the counter group.
|
|
9962
|
-
* @returns {TemplateResult} The help text template.
|
|
9963
|
-
* @private
|
|
9964
|
-
*/
|
|
9965
|
-
renderHelpText() {
|
|
9966
|
-
return html$1`
|
|
9967
|
-
<div slot="helpText">
|
|
9968
|
-
<${this.helpTextTag} ?onDark="${this.onDark}">
|
|
9969
|
-
<p id="${this.uniqueId}" part="helpText">
|
|
9970
|
-
<slot name="helpText"></slot>
|
|
9971
|
-
</p>
|
|
9972
|
-
</${this.helpTextTag}>
|
|
9973
|
-
</div>
|
|
9974
|
-
`;
|
|
9975
|
-
}
|
|
9976
|
-
|
|
9977
10195
|
/**
|
|
9978
10196
|
* Render the dropdown bib template for the dropdown.
|
|
9979
10197
|
* @returns {TemplateResult} The bib template.
|