@aurodesignsystem-dev/auro-formkit 0.0.0-pr750.1 → 0.0.0-pr753.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/bibtemplate/dist/index.js +1 -1
- package/components/bibtemplate/dist/registered.js +1 -1
- package/components/checkbox/demo/api.min.js +9 -9
- package/components/checkbox/demo/index.min.js +9 -9
- package/components/checkbox/dist/index.js +9 -9
- package/components/checkbox/dist/registered.js +9 -9
- package/components/combobox/demo/api.html +10 -16
- package/components/combobox/demo/api.md +6 -12
- package/components/combobox/demo/api.min.js +101 -84
- package/components/combobox/demo/index.html +10 -16
- package/components/combobox/demo/index.min.js +101 -84
- package/components/combobox/demo/readme.html +9 -16
- package/components/combobox/dist/index.js +89 -47
- package/components/combobox/dist/registered.js +89 -47
- package/components/counter/demo/api.html +10 -16
- package/components/counter/demo/api.md +7 -140
- package/components/counter/demo/api.min.js +387 -557
- package/components/counter/demo/index.html +10 -16
- package/components/counter/demo/index.md +0 -82
- package/components/counter/demo/index.min.js +387 -557
- package/components/counter/demo/readme.html +9 -16
- package/components/counter/dist/auro-counter-group.d.ts +14 -71
- package/components/counter/dist/auro-counter.d.ts +0 -10
- package/components/counter/dist/index.js +387 -557
- package/components/counter/dist/registered.js +387 -557
- package/components/datepicker/demo/api.html +10 -16
- package/components/datepicker/demo/api.min.js +95 -68
- package/components/datepicker/demo/index.html +10 -16
- package/components/datepicker/demo/index.min.js +95 -68
- package/components/datepicker/demo/readme.html +9 -16
- package/components/datepicker/dist/auro-datepicker.d.ts +0 -6
- package/components/datepicker/dist/index.js +95 -68
- package/components/datepicker/dist/registered.js +95 -68
- package/components/dropdown/demo/api.html +10 -16
- package/components/dropdown/demo/api.md +268 -76
- package/components/dropdown/demo/api.min.js +68 -26
- package/components/dropdown/demo/index.html +10 -16
- package/components/dropdown/demo/index.md +363 -45
- package/components/dropdown/demo/index.min.js +68 -26
- package/components/dropdown/demo/readme.html +9 -16
- package/components/dropdown/dist/auro-dropdown.d.ts +71 -21
- package/components/dropdown/dist/index.js +68 -26
- package/components/dropdown/dist/registered.js +68 -26
- package/components/form/demo/api.html +9 -16
- package/components/form/demo/autocomplete.html +3 -19
- package/components/form/demo/index.html +9 -16
- package/components/form/demo/readme.html +9 -16
- package/components/form/demo/working.html +13 -19
- package/components/helptext/dist/index.js +1 -1
- package/components/helptext/dist/registered.js +1 -1
- package/components/input/demo/api.html +10 -16
- package/components/input/demo/api.md +1 -1
- package/components/input/demo/api.min.js +14 -14
- package/components/input/demo/index.html +10 -16
- package/components/input/demo/index.min.js +14 -14
- package/components/input/demo/readme.html +9 -16
- package/components/input/dist/base-input.d.ts +1 -1
- package/components/input/dist/index.js +14 -14
- package/components/input/dist/registered.js +14 -14
- package/components/menu/demo/api.html +32 -16
- package/components/menu/demo/api.md +1 -1
- package/components/menu/demo/api.min.js +12 -37
- package/components/menu/demo/index.html +10 -16
- package/components/menu/demo/index.min.js +12 -37
- package/components/menu/demo/readme.html +9 -16
- package/components/menu/dist/auro-menu.d.ts +2 -13
- package/components/menu/dist/index.js +12 -37
- package/components/menu/dist/registered.js +12 -37
- package/components/radio/demo/api.html +10 -16
- package/components/radio/demo/api.min.js +10 -10
- package/components/radio/demo/index.html +10 -16
- package/components/radio/demo/index.min.js +10 -10
- package/components/radio/demo/readme.html +9 -16
- package/components/radio/dist/auro-radio.d.ts +1 -1
- package/components/radio/dist/index.js +10 -10
- package/components/radio/dist/registered.js +10 -10
- package/components/select/demo/api.html +10 -16
- package/components/select/demo/api.md +16 -19
- package/components/select/demo/api.min.js +295 -136
- package/components/select/demo/index.html +11 -16
- package/components/select/demo/index.md +1 -1
- package/components/select/demo/index.min.js +295 -136
- package/components/select/demo/readme.html +9 -16
- package/components/select/dist/auro-select.d.ts +7 -32
- package/components/select/dist/index.js +283 -99
- package/components/select/dist/registered.js +283 -99
- package/package.json +25 -26
|
@@ -584,9 +584,9 @@ let AuroLibraryRuntimeUtils$8 = class AuroLibraryRuntimeUtils {
|
|
|
584
584
|
}
|
|
585
585
|
};
|
|
586
586
|
|
|
587
|
-
var styleCss$
|
|
587
|
+
var styleCss$a = 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$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)}`;
|
|
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)}`;
|
|
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$9 = 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$8 = 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$9}`,
|
|
746
|
+
css`${colorCss$8}`,
|
|
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$a,
|
|
900
|
+
colorCss$9,
|
|
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$8 = 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$8}
|
|
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$7 = 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$8}`,
|
|
1517
|
+
css`${colorCss$7}`
|
|
1518
1518
|
];
|
|
1519
1519
|
}
|
|
1520
1520
|
|
|
@@ -2075,19 +2075,19 @@ class AuroFormValidation {
|
|
|
2075
2075
|
{
|
|
2076
2076
|
check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
|
|
2077
2077
|
validity: 'tooShort',
|
|
2078
|
-
message: e => e.
|
|
2078
|
+
message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
|
|
2079
2079
|
},
|
|
2080
2080
|
{
|
|
2081
2081
|
check: (e) => e.value?.length > e.maxLength,
|
|
2082
2082
|
validity: 'tooLong',
|
|
2083
|
-
message: e => e.
|
|
2083
|
+
message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
|
|
2084
2084
|
}
|
|
2085
2085
|
],
|
|
2086
2086
|
pattern: [
|
|
2087
2087
|
{
|
|
2088
2088
|
check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
|
|
2089
2089
|
validity: 'patternMismatch',
|
|
2090
|
-
message: e => e.
|
|
2090
|
+
message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
|
|
2091
2091
|
}
|
|
2092
2092
|
]
|
|
2093
2093
|
},
|
|
@@ -2282,10 +2282,10 @@ class AuroFormValidation {
|
|
|
2282
2282
|
if (!hasValue && elem.required && elem.touched) {
|
|
2283
2283
|
elem.validity = 'valueMissing';
|
|
2284
2284
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
2285
|
-
} else if (
|
|
2285
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
2286
2286
|
this.validateType(elem);
|
|
2287
2287
|
this.validateElementAttributes(elem);
|
|
2288
|
-
} else if (
|
|
2288
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
2289
2289
|
this.validateElementAttributes(elem);
|
|
2290
2290
|
}
|
|
2291
2291
|
}
|
|
@@ -2403,217 +2403,9 @@ 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$
|
|
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`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
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
|
-
};
|
|
2406
|
+
var colorCss$6 = 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)}`;
|
|
2615
2407
|
|
|
2616
|
-
var
|
|
2408
|
+
var styleCss$7 = 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}`;
|
|
2617
2409
|
|
|
2618
2410
|
/* eslint-disable lit/binding-positions, lit/no-invalid-html, max-lines */
|
|
2619
2411
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
@@ -2663,11 +2455,6 @@ class AuroCounter extends LitElement {
|
|
|
2663
2455
|
*/
|
|
2664
2456
|
this.iconTag = versioning.generateTag("auro-formkit-counter-icon", iconVersion$2, AuroIcon$2);
|
|
2665
2457
|
|
|
2666
|
-
/**
|
|
2667
|
-
* @private
|
|
2668
|
-
*/
|
|
2669
|
-
this.helpTextTag = versioning.generateTag('auro-formkit-input-helptext', helptextVersion, AuroHelpText$1);
|
|
2670
|
-
|
|
2671
2458
|
/**
|
|
2672
2459
|
* @private
|
|
2673
2460
|
* @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
|
|
@@ -2728,15 +2515,6 @@ class AuroCounter extends LitElement {
|
|
|
2728
2515
|
type: Boolean,
|
|
2729
2516
|
},
|
|
2730
2517
|
|
|
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
|
-
|
|
2740
2518
|
/**
|
|
2741
2519
|
* The maximum value for the counter.
|
|
2742
2520
|
*/
|
|
@@ -2791,8 +2569,8 @@ class AuroCounter extends LitElement {
|
|
|
2791
2569
|
static get styles() {
|
|
2792
2570
|
return [
|
|
2793
2571
|
tokens,
|
|
2794
|
-
colorCss$
|
|
2795
|
-
styleCss$
|
|
2572
|
+
colorCss$6,
|
|
2573
|
+
styleCss$7
|
|
2796
2574
|
];
|
|
2797
2575
|
}
|
|
2798
2576
|
|
|
@@ -2933,85 +2711,56 @@ class AuroCounter extends LitElement {
|
|
|
2933
2711
|
}
|
|
2934
2712
|
}
|
|
2935
2713
|
|
|
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() {
|
|
2942
|
-
return html$1`
|
|
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
|
-
}
|
|
2961
|
-
|
|
2962
2714
|
render() {
|
|
2963
2715
|
return html$1`
|
|
2964
|
-
<div class="
|
|
2965
|
-
<div class="
|
|
2966
|
-
<
|
|
2967
|
-
|
|
2968
|
-
|
|
2969
|
-
|
|
2970
|
-
|
|
2971
|
-
|
|
2972
|
-
|
|
2973
|
-
|
|
2974
|
-
|
|
2975
|
-
|
|
2976
|
-
|
|
2977
|
-
|
|
2978
|
-
|
|
2979
|
-
|
|
2716
|
+
<div class="counter">
|
|
2717
|
+
<div class="content" >
|
|
2718
|
+
<label id="counter-label" class="label"><slot @slotchange="${this.onDefaultSlotChange}" ></slot></label>
|
|
2719
|
+
<slot id="counter-description" name="description"></slot>
|
|
2720
|
+
</div>
|
|
2721
|
+
<div
|
|
2722
|
+
part="counterControl"
|
|
2723
|
+
aria-labelledby="counter-label"
|
|
2724
|
+
aria-describedby="counter-description"
|
|
2725
|
+
tabindex="${this.disabled ? '-1' : '0'}"
|
|
2726
|
+
role="spinbutton"
|
|
2727
|
+
aria-valuemin="${this.min}"
|
|
2728
|
+
aria-valuemax="${this.max}"
|
|
2729
|
+
aria-valuenow="${this.value}"
|
|
2730
|
+
aria-valuetext="${this.value !== undefined ? this.value : this.min}"
|
|
2731
|
+
>
|
|
2732
|
+
<auro-counter-button
|
|
2733
|
+
aria-hidden="true"
|
|
2734
|
+
.tabindex="${'-1'}"
|
|
2735
|
+
part="controlMinus"
|
|
2736
|
+
@click="${() => this.decrement()}"
|
|
2737
|
+
?onDark="${this.onDark}"
|
|
2738
|
+
?disabled="${this.disabled || this.disableMin || this.isIncrementDisabled(this.min)}"
|
|
2980
2739
|
>
|
|
2981
|
-
|
|
2982
|
-
|
|
2983
|
-
|
|
2984
|
-
|
|
2985
|
-
|
|
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>
|
|
2740
|
+
<${this.iconTag} class="controlIcon" customSvg> ${IconUtil.generateSvgHtml(minusIcon)} </${this.iconTag}>
|
|
2741
|
+
</auro-counter-button>
|
|
2742
|
+
|
|
2743
|
+
<div class="quantityWrapper">
|
|
2744
|
+
<div class="quantity">${this.value !== undefined ? this.value : this.min}</div>
|
|
3006
2745
|
</div>
|
|
2746
|
+
|
|
2747
|
+
<auro-counter-button
|
|
2748
|
+
aria-hidden="true"
|
|
2749
|
+
.tabindex="${'-1'}"
|
|
2750
|
+
part="controlPlus"
|
|
2751
|
+
@click="${() => this.increment()}"
|
|
2752
|
+
?onDark="${this.onDark}"
|
|
2753
|
+
?disabled="${this.disabled || this.disableMax || this.isIncrementDisabled(this.max)}"
|
|
2754
|
+
>
|
|
2755
|
+
<${this.iconTag} class="controlIcon" customSvg> ${IconUtil.generateSvgHtml(plusIcon)} </${this.iconTag}>
|
|
2756
|
+
</auro-counter-button>
|
|
3007
2757
|
</div>
|
|
3008
|
-
${this.renderHelpText()}
|
|
3009
2758
|
</div>
|
|
3010
2759
|
`;
|
|
3011
2760
|
}
|
|
3012
2761
|
}
|
|
3013
2762
|
|
|
3014
|
-
var counterGroupStyles = css`:host(:not([layout=classic])) .triggerContent{padding:0
|
|
2763
|
+
var counterGroupStyles = css`:host(:not([layout=classic])) .triggerContent{padding:0 8px 0 24px}:host([layout=snowflake]) [auro-dropdown] .mainContent{align-items:center}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}.mainContent{display:flex;width:100%;flex-direction:column;align-items:flex-start;justify-content:center}label{font-size:var(--ds-text-body-size-default, 1rem);line-height:20px}label.filled{font-size:var(--ds-text-body-size-xs, 0.75rem)}.accents ::slotted([slot=typeIcon]){margin-right:8px}.accents ::slotted(*):not(.util_displayHidden){display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}slot[name=valueText]{font-size:var(--ds-text-body-size-default, 1rem);overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.counters{display:flex;flex-direction:column;gap:var(--ds-size-300, 1.5rem)}.counters ::slotted(auro-counter:not(:first-of-type)){padding-top:var(--ds-size-300, 1.5rem);border-top-width:1px;border-top-style:solid}`;
|
|
3015
2764
|
|
|
3016
2765
|
var shapeSizeCss$1 = 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}`;
|
|
3017
2766
|
|
|
@@ -5951,7 +5700,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
5951
5700
|
|
|
5952
5701
|
var iconVersion$1 = '6.1.2';
|
|
5953
5702
|
|
|
5954
|
-
var styleCss$1$
|
|
5703
|
+
var styleCss$1$2 = 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}`;
|
|
5955
5704
|
|
|
5956
5705
|
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)}`;
|
|
5957
5706
|
|
|
@@ -5993,7 +5742,7 @@ class AuroDropdownBib extends LitElement {
|
|
|
5993
5742
|
|
|
5994
5743
|
static get styles() {
|
|
5995
5744
|
return [
|
|
5996
|
-
styleCss$1$
|
|
5745
|
+
styleCss$1$2,
|
|
5997
5746
|
colorCss$2$1,
|
|
5998
5747
|
tokensCss$1$1
|
|
5999
5748
|
];
|
|
@@ -6152,11 +5901,11 @@ var dropdownVersion$1 = '3.0.0';
|
|
|
6152
5901
|
|
|
6153
5902
|
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}`;
|
|
6154
5903
|
|
|
6155
|
-
var colorCss$1$
|
|
5904
|
+
var colorCss$1$2 = 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)}`;
|
|
6156
5905
|
|
|
6157
5906
|
var classicColorCss = css``;
|
|
6158
5907
|
|
|
6159
|
-
var classicLayoutCss = css`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) .label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}@media(hover: hover){:host([layout*=classic]) .wrapper:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}`;
|
|
5908
|
+
var classicLayoutCss = css`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) .label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}@media(hover: hover){:host([layout*=classic]) .wrapper:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([layout*=classic]:not([simple])) .triggerContentWrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}`;
|
|
6160
5909
|
|
|
6161
5910
|
var styleEmphasizedCss = css`:host{display:block}.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-right:var(--ds-size-300, 1.5rem)}`;
|
|
6162
5911
|
|
|
@@ -6164,9 +5913,9 @@ var styleSnowflakeCss = css`:host{display:block}.wrapper{display:flex;flex:1;fle
|
|
|
6164
5913
|
|
|
6165
5914
|
var colorCss$5 = 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)}`;
|
|
6166
5915
|
|
|
6167
|
-
var styleCss$6 = css
|
|
5916
|
+
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}`;
|
|
6168
5917
|
|
|
6169
|
-
var tokensCss$
|
|
5918
|
+
var tokensCss$4 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
6170
5919
|
|
|
6171
5920
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
6172
5921
|
// See LICENSE in the project root for license information.
|
|
@@ -6175,7 +5924,7 @@ var tokensCss$3 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texti
|
|
|
6175
5924
|
|
|
6176
5925
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
6177
5926
|
|
|
6178
|
-
let AuroLibraryRuntimeUtils$
|
|
5927
|
+
let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
|
|
6179
5928
|
|
|
6180
5929
|
/* eslint-disable jsdoc/require-param */
|
|
6181
5930
|
|
|
@@ -6247,7 +5996,7 @@ let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
|
|
|
6247
5996
|
*
|
|
6248
5997
|
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
6249
5998
|
*/
|
|
6250
|
-
class AuroHelpText extends LitElement {
|
|
5999
|
+
let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
6251
6000
|
|
|
6252
6001
|
constructor() {
|
|
6253
6002
|
super();
|
|
@@ -6256,14 +6005,14 @@ class AuroHelpText extends LitElement {
|
|
|
6256
6005
|
this.onDark = false;
|
|
6257
6006
|
this.hasTextContent = false;
|
|
6258
6007
|
|
|
6259
|
-
AuroLibraryRuntimeUtils$
|
|
6008
|
+
AuroLibraryRuntimeUtils$5.prototype.handleComponentTagRename(this, 'auro-helptext');
|
|
6260
6009
|
}
|
|
6261
6010
|
|
|
6262
6011
|
static get styles() {
|
|
6263
6012
|
return [
|
|
6264
6013
|
colorCss$5,
|
|
6265
6014
|
styleCss$6,
|
|
6266
|
-
tokensCss$
|
|
6015
|
+
tokensCss$4
|
|
6267
6016
|
];
|
|
6268
6017
|
}
|
|
6269
6018
|
|
|
@@ -6312,7 +6061,7 @@ class AuroHelpText extends LitElement {
|
|
|
6312
6061
|
*
|
|
6313
6062
|
*/
|
|
6314
6063
|
static register(name = "auro-helptext") {
|
|
6315
|
-
AuroLibraryRuntimeUtils$
|
|
6064
|
+
AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroHelpText);
|
|
6316
6065
|
}
|
|
6317
6066
|
|
|
6318
6067
|
updated() {
|
|
@@ -6366,7 +6115,7 @@ class AuroHelpText extends LitElement {
|
|
|
6366
6115
|
</div>
|
|
6367
6116
|
`;
|
|
6368
6117
|
}
|
|
6369
|
-
}
|
|
6118
|
+
};
|
|
6370
6119
|
|
|
6371
6120
|
var helpTextVersion = '1.0.0';
|
|
6372
6121
|
|
|
@@ -6469,8 +6218,10 @@ let AuroElement$3 = class AuroElement extends LitElement {
|
|
|
6469
6218
|
// See LICENSE in the project root for license information.
|
|
6470
6219
|
|
|
6471
6220
|
|
|
6472
|
-
|
|
6221
|
+
/**
|
|
6222
|
+
* @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
|
|
6473
6223
|
* @slot - Default slot for the popover content.
|
|
6224
|
+
* @slot label - Defines the content of the label.
|
|
6474
6225
|
* @slot helpText - Defines the content of the helpText.
|
|
6475
6226
|
* @slot trigger - Defines the content of the trigger.
|
|
6476
6227
|
* @csspart trigger - The trigger content container.
|
|
@@ -6489,22 +6240,18 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6489
6240
|
this.matchWidth = false;
|
|
6490
6241
|
this.noHideOnThisFocusLoss = false;
|
|
6491
6242
|
|
|
6492
|
-
this.errorMessage =
|
|
6243
|
+
this.errorMessage = ''; // TODO - check with Doug if there is still more to do here
|
|
6493
6244
|
|
|
6494
6245
|
// Layout Config
|
|
6495
|
-
this.layout =
|
|
6496
|
-
this.shape =
|
|
6497
|
-
this.size =
|
|
6246
|
+
this.layout = 'classic';
|
|
6247
|
+
this.shape = 'classic';
|
|
6248
|
+
this.size = 'xl';
|
|
6498
6249
|
|
|
6499
6250
|
this.parentBorder = false;
|
|
6500
6251
|
|
|
6501
6252
|
this.privateDefaults();
|
|
6502
6253
|
}
|
|
6503
6254
|
|
|
6504
|
-
/**
|
|
6505
|
-
* @private
|
|
6506
|
-
* @returns {object} Class definition for the wrapper element.
|
|
6507
|
-
*/
|
|
6508
6255
|
get commonWrapperClasses() {
|
|
6509
6256
|
return {
|
|
6510
6257
|
'trigger': true,
|
|
@@ -6524,8 +6271,12 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6524
6271
|
this.disabled = false;
|
|
6525
6272
|
this.disableFocusTrap = false;
|
|
6526
6273
|
this.error = false;
|
|
6274
|
+
this.inset = false;
|
|
6275
|
+
this.rounded = false;
|
|
6527
6276
|
this.tabIndex = 0;
|
|
6528
6277
|
this.noToggle = false;
|
|
6278
|
+
this.a11yAutocomplete = 'none';
|
|
6279
|
+
this.labeled = true;
|
|
6529
6280
|
this.a11yRole = 'button';
|
|
6530
6281
|
this.onDark = false;
|
|
6531
6282
|
this.showTriggerBorders = true;
|
|
@@ -6585,7 +6336,7 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6585
6336
|
/**
|
|
6586
6337
|
* @private
|
|
6587
6338
|
*/
|
|
6588
|
-
this.helpTextTag = versioning.generateTag('auro-formkit-dropdown-helptext', helpTextVersion, AuroHelpText);
|
|
6339
|
+
this.helpTextTag = versioning.generateTag('auro-formkit-dropdown-helptext', helpTextVersion, AuroHelpText$1);
|
|
6589
6340
|
|
|
6590
6341
|
/**
|
|
6591
6342
|
* @private
|
|
@@ -6646,15 +6397,6 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6646
6397
|
reflect: true
|
|
6647
6398
|
},
|
|
6648
6399
|
|
|
6649
|
-
/**
|
|
6650
|
-
* If declared, the dropdown will only show by calling the API .show() public method.
|
|
6651
|
-
* @default false
|
|
6652
|
-
*/
|
|
6653
|
-
disableEventShow: {
|
|
6654
|
-
type: Boolean,
|
|
6655
|
-
reflect: true
|
|
6656
|
-
},
|
|
6657
|
-
|
|
6658
6400
|
/**
|
|
6659
6401
|
* If declared, applies a border around the trigger slot.
|
|
6660
6402
|
*/
|
|
@@ -6673,15 +6415,23 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6673
6415
|
},
|
|
6674
6416
|
|
|
6675
6417
|
/**
|
|
6676
|
-
* If declared, the dropdown
|
|
6418
|
+
* If declared, the dropdown will be styled with the common theme.
|
|
6677
6419
|
*/
|
|
6678
|
-
|
|
6420
|
+
common: {
|
|
6679
6421
|
type: Boolean,
|
|
6680
6422
|
reflect: true
|
|
6681
6423
|
},
|
|
6682
6424
|
|
|
6683
6425
|
/**
|
|
6684
|
-
* If declared, the
|
|
6426
|
+
* If declared, the dropdown is not interactive.
|
|
6427
|
+
*/
|
|
6428
|
+
disabled: {
|
|
6429
|
+
type: Boolean,
|
|
6430
|
+
reflect: true
|
|
6431
|
+
},
|
|
6432
|
+
|
|
6433
|
+
/**
|
|
6434
|
+
* If declare, the focus trap inside of bib will be turned off.
|
|
6685
6435
|
*/
|
|
6686
6436
|
disableFocusTrap: {
|
|
6687
6437
|
type: Boolean,
|
|
@@ -6728,6 +6478,22 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6728
6478
|
reflect: true
|
|
6729
6479
|
},
|
|
6730
6480
|
|
|
6481
|
+
/**
|
|
6482
|
+
* Makes the trigger to be full width of its parent container.
|
|
6483
|
+
*/
|
|
6484
|
+
fluid: {
|
|
6485
|
+
type: Boolean,
|
|
6486
|
+
reflect: true
|
|
6487
|
+
},
|
|
6488
|
+
|
|
6489
|
+
/**
|
|
6490
|
+
* If declared, will apply padding around trigger slot content.
|
|
6491
|
+
*/
|
|
6492
|
+
inset: {
|
|
6493
|
+
type: Boolean,
|
|
6494
|
+
reflect: true
|
|
6495
|
+
},
|
|
6496
|
+
|
|
6731
6497
|
/**
|
|
6732
6498
|
* If true, the dropdown bib is displayed.
|
|
6733
6499
|
*/
|
|
@@ -6771,6 +6537,15 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6771
6537
|
reflect: true
|
|
6772
6538
|
},
|
|
6773
6539
|
|
|
6540
|
+
/**
|
|
6541
|
+
* Defines if there is a label preset.
|
|
6542
|
+
* @private
|
|
6543
|
+
*/
|
|
6544
|
+
labeled: {
|
|
6545
|
+
type: Boolean,
|
|
6546
|
+
reflect: true
|
|
6547
|
+
},
|
|
6548
|
+
|
|
6774
6549
|
/**
|
|
6775
6550
|
* Defines if the trigger should size based on the parent element providing the border UI.
|
|
6776
6551
|
* @private
|
|
@@ -6831,9 +6606,6 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6831
6606
|
reflect: true
|
|
6832
6607
|
},
|
|
6833
6608
|
|
|
6834
|
-
/**
|
|
6835
|
-
* If declared, and a function is set, that function will execute when the slot content is updated.
|
|
6836
|
-
*/
|
|
6837
6609
|
onSlotChange: {
|
|
6838
6610
|
type: Function,
|
|
6839
6611
|
reflect: false
|
|
@@ -6848,6 +6620,14 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6848
6620
|
reflect: true
|
|
6849
6621
|
},
|
|
6850
6622
|
|
|
6623
|
+
/**
|
|
6624
|
+
* If declared, will apply border-radius to trigger and default slots.
|
|
6625
|
+
*/
|
|
6626
|
+
rounded: {
|
|
6627
|
+
type: Boolean,
|
|
6628
|
+
reflect: true
|
|
6629
|
+
},
|
|
6630
|
+
|
|
6851
6631
|
/**
|
|
6852
6632
|
* @private
|
|
6853
6633
|
*/
|
|
@@ -6862,14 +6642,22 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6862
6642
|
type: String || undefined,
|
|
6863
6643
|
attribute: false,
|
|
6864
6644
|
reflect: false
|
|
6645
|
+
},
|
|
6646
|
+
|
|
6647
|
+
/**
|
|
6648
|
+
* The value for the aria-autocomplete attribute of the trigger element.
|
|
6649
|
+
*/
|
|
6650
|
+
a11yAutocomplete: {
|
|
6651
|
+
type: String,
|
|
6652
|
+
attribute: false,
|
|
6865
6653
|
}
|
|
6866
6654
|
};
|
|
6867
6655
|
}
|
|
6868
6656
|
|
|
6869
6657
|
static get styles() {
|
|
6870
6658
|
return [
|
|
6659
|
+
colorCss$1$2,
|
|
6871
6660
|
tokensCss$1$1,
|
|
6872
|
-
colorCss$1$1,
|
|
6873
6661
|
|
|
6874
6662
|
// default layout
|
|
6875
6663
|
classicColorCss,
|
|
@@ -7309,7 +7097,10 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
7309
7097
|
id="bib"
|
|
7310
7098
|
shape="${this.shape}"
|
|
7311
7099
|
?data-show="${this.isPopoverVisible}"
|
|
7312
|
-
?isfullscreen="${this.isBibFullscreen}"
|
|
7100
|
+
?isfullscreen="${this.isBibFullscreen}"
|
|
7101
|
+
?common="${this.common}"
|
|
7102
|
+
?rounded="${this.common || this.rounded}"
|
|
7103
|
+
?inset="${this.common || this.inset}">
|
|
7313
7104
|
<div class="slotContent">
|
|
7314
7105
|
<slot @slotchange="${this.handleDefaultSlot}"></slot>
|
|
7315
7106
|
</div>
|
|
@@ -8059,7 +7850,7 @@ let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
|
8059
7850
|
|
|
8060
7851
|
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}}`;
|
|
8061
7852
|
|
|
8062
|
-
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}`;
|
|
7853
|
+
var colorCss$1$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}`;
|
|
8063
7854
|
|
|
8064
7855
|
var tokensCss$1 = css`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
|
|
8065
7856
|
|
|
@@ -8138,7 +7929,7 @@ class AuroLoader extends LitElement {
|
|
|
8138
7929
|
static get styles() {
|
|
8139
7930
|
return [
|
|
8140
7931
|
css`${styleCss$2}`,
|
|
8141
|
-
css`${colorCss$1}`,
|
|
7932
|
+
css`${colorCss$1$1}`,
|
|
8142
7933
|
css`${tokensCss$1}`
|
|
8143
7934
|
];
|
|
8144
7935
|
}
|
|
@@ -8624,7 +8415,7 @@ const cacheFetch = (uri, options = {}) => {
|
|
|
8624
8415
|
return _fetchMap.get(uri);
|
|
8625
8416
|
};
|
|
8626
8417
|
|
|
8627
|
-
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}`;
|
|
8418
|
+
var styleCss$1$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}`;
|
|
8628
8419
|
|
|
8629
8420
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
8630
8421
|
// See LICENSE in the project root for license information.
|
|
@@ -8667,7 +8458,7 @@ class BaseIcon extends AuroElement$2 {
|
|
|
8667
8458
|
|
|
8668
8459
|
static get styles() {
|
|
8669
8460
|
return css`
|
|
8670
|
-
${styleCss$1}
|
|
8461
|
+
${styleCss$1$1}
|
|
8671
8462
|
`;
|
|
8672
8463
|
}
|
|
8673
8464
|
|
|
@@ -8708,7 +8499,7 @@ class BaseIcon extends AuroElement$2 {
|
|
|
8708
8499
|
}
|
|
8709
8500
|
}
|
|
8710
8501
|
|
|
8711
|
-
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)}`;
|
|
8502
|
+
var tokensCss$3 = 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)}`;
|
|
8712
8503
|
|
|
8713
8504
|
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)}`;
|
|
8714
8505
|
|
|
@@ -8868,8 +8659,8 @@ class AuroIcon extends BaseIcon {
|
|
|
8868
8659
|
static get styles() {
|
|
8869
8660
|
return [
|
|
8870
8661
|
super.styles,
|
|
8871
|
-
css`${tokensCss}`,
|
|
8872
|
-
css`${styleCss$1}`,
|
|
8662
|
+
css`${tokensCss$3}`,
|
|
8663
|
+
css`${styleCss$1$1}`,
|
|
8873
8664
|
css`${colorCss$4}`
|
|
8874
8665
|
];
|
|
8875
8666
|
}
|
|
@@ -8962,7 +8753,7 @@ var iconVersion = '8.0.4';
|
|
|
8962
8753
|
|
|
8963
8754
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
8964
8755
|
|
|
8965
|
-
class AuroLibraryRuntimeUtils {
|
|
8756
|
+
let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
|
|
8966
8757
|
|
|
8967
8758
|
/* eslint-disable jsdoc/require-param */
|
|
8968
8759
|
|
|
@@ -9023,7 +8814,7 @@ class AuroLibraryRuntimeUtils {
|
|
|
9023
8814
|
|
|
9024
8815
|
return elemTag === tag || elem.hasAttribute(tag);
|
|
9025
8816
|
}
|
|
9026
|
-
}
|
|
8817
|
+
};
|
|
9027
8818
|
|
|
9028
8819
|
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)}`;
|
|
9029
8820
|
|
|
@@ -9054,7 +8845,7 @@ class AuroHeader extends LitElement {
|
|
|
9054
8845
|
/**
|
|
9055
8846
|
* @private
|
|
9056
8847
|
*/
|
|
9057
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
8848
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
|
|
9058
8849
|
}
|
|
9059
8850
|
|
|
9060
8851
|
// function to define props used within the scope of this component
|
|
@@ -9084,7 +8875,7 @@ class AuroHeader extends LitElement {
|
|
|
9084
8875
|
*
|
|
9085
8876
|
*/
|
|
9086
8877
|
static register(name = "auro-header") {
|
|
9087
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroHeader);
|
|
8878
|
+
AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroHeader);
|
|
9088
8879
|
}
|
|
9089
8880
|
|
|
9090
8881
|
firstUpdated() {
|
|
@@ -9290,7 +9081,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
9290
9081
|
<div id="bibTemplate" part="bibtemplate">
|
|
9291
9082
|
${this.isFullscreen ? html$1`
|
|
9292
9083
|
<div id="headerContainer">
|
|
9293
|
-
<${this.buttonTag} id="closeButton"
|
|
9084
|
+
<${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
|
|
9294
9085
|
<${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
|
|
9295
9086
|
</${this.buttonTag}>
|
|
9296
9087
|
<${this.headerTag} display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
|
|
@@ -9316,6 +9107,214 @@ class AuroBibtemplate extends LitElement {
|
|
|
9316
9107
|
|
|
9317
9108
|
var bibTemplateVersion = '1.0.0';
|
|
9318
9109
|
|
|
9110
|
+
var colorCss$1 = 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)}`;
|
|
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}`;
|
|
9113
|
+
|
|
9114
|
+
var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
9115
|
+
|
|
9116
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
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
|
+
|
|
9319
9318
|
var styleCss = css`:host([isindropdown]) .wrapper{padding:var(--ds-size-300, 1.5rem)}`;
|
|
9320
9319
|
|
|
9321
9320
|
var colorCss = css`:host ::slotted(*:not(:first-child)){border-color:var(--ds-auro-counter-divider-color)}`;
|
|
@@ -9461,19 +9460,7 @@ class AuroElement extends LitElement {
|
|
|
9461
9460
|
}
|
|
9462
9461
|
}
|
|
9463
9462
|
|
|
9464
|
-
/*
|
|
9465
|
-
eslint-disable
|
|
9466
|
-
lit/no-invalid-html,
|
|
9467
|
-
lit/binding-positions,
|
|
9468
|
-
max-lines,
|
|
9469
|
-
no-underscore-dangle,
|
|
9470
|
-
arrow-parens,
|
|
9471
|
-
no-confusing-arrow,
|
|
9472
|
-
curly,
|
|
9473
|
-
dot-location,
|
|
9474
|
-
no-inline-comments,
|
|
9475
|
-
line-comment-position,
|
|
9476
|
-
*/
|
|
9463
|
+
/* eslint-disable lit/no-invalid-html, lit/binding-positions, max-lines, prefer-destructuring, no-underscore-dangle, arrow-parens, no-confusing-arrow, curly, no-unused-expressions */
|
|
9477
9464
|
|
|
9478
9465
|
|
|
9479
9466
|
/**
|
|
@@ -9532,12 +9519,6 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9532
9519
|
*/
|
|
9533
9520
|
this.validation = new AuroFormValidation();
|
|
9534
9521
|
|
|
9535
|
-
/** @private */
|
|
9536
|
-
this.updateValue = this.updateValue.bind(this);
|
|
9537
|
-
|
|
9538
|
-
/** @private */
|
|
9539
|
-
this.updateValidity = this.updateValidity.bind(this);
|
|
9540
|
-
|
|
9541
9522
|
/**
|
|
9542
9523
|
* Generate unique names for dependency components.
|
|
9543
9524
|
* @private
|
|
@@ -9563,12 +9544,7 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9563
9544
|
* @private
|
|
9564
9545
|
* @type {string}
|
|
9565
9546
|
*/
|
|
9566
|
-
this.helpTextTag = versioning.generateTag("auro-formkit-counter-helptext", helptextVersion, AuroHelpText
|
|
9567
|
-
|
|
9568
|
-
/**
|
|
9569
|
-
* @private
|
|
9570
|
-
*/
|
|
9571
|
-
this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$2, AuroIcon$2);
|
|
9547
|
+
this.helpTextTag = versioning.generateTag("auro-formkit-counter-helptext", helptextVersion, AuroHelpText);
|
|
9572
9548
|
}
|
|
9573
9549
|
|
|
9574
9550
|
static get styles() {
|
|
@@ -9593,25 +9569,6 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9593
9569
|
reflect: true
|
|
9594
9570
|
},
|
|
9595
9571
|
|
|
9596
|
-
/**
|
|
9597
|
-
* The current error message to display when the component is invalid.
|
|
9598
|
-
*/
|
|
9599
|
-
error: {
|
|
9600
|
-
type: String,
|
|
9601
|
-
reflect: false
|
|
9602
|
-
},
|
|
9603
|
-
|
|
9604
|
-
/**
|
|
9605
|
-
* The current error message to display when the component is invalid.
|
|
9606
|
-
* This is set by validation and is not available to consumers.
|
|
9607
|
-
* @private
|
|
9608
|
-
*/
|
|
9609
|
-
errorMessage: {
|
|
9610
|
-
type: String,
|
|
9611
|
-
reflect: false,
|
|
9612
|
-
attribute: false
|
|
9613
|
-
},
|
|
9614
|
-
|
|
9615
9572
|
/**
|
|
9616
9573
|
* Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
|
|
9617
9574
|
* at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
|
|
@@ -9699,7 +9656,7 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9699
9656
|
* "top" | "right" | "bottom" | "left" |
|
|
9700
9657
|
* "bottom-start" | "top-start" | "top-end" |
|
|
9701
9658
|
* "right-start" | "right-end" | "bottom-end" |
|
|
9702
|
-
* "left-start" | "left-end"
|
|
9659
|
+
* "left-start" | "left-end"
|
|
9703
9660
|
* @default bottom-start
|
|
9704
9661
|
*/
|
|
9705
9662
|
placement: {
|
|
@@ -9770,97 +9727,7 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9770
9727
|
this.counters = this.querySelectorAll("auro-counter, [auro-counter]");
|
|
9771
9728
|
this.counters.forEach((counter) => {
|
|
9772
9729
|
counter.onDark = this.onDark;
|
|
9773
|
-
counter.addEventListener("input", this.updateValue);
|
|
9774
|
-
counter.addEventListener("auroFormElement-validated", this.updateValidity);
|
|
9775
|
-
});
|
|
9776
|
-
}
|
|
9777
|
-
|
|
9778
|
-
/**
|
|
9779
|
-
* Renders help text error messages.
|
|
9780
|
-
* @param {Array<string>} messages - The error messages to render.
|
|
9781
|
-
* @returns {TemplateResult[]} - The rendered error messages rendered in a TemplateResult.
|
|
9782
|
-
* @private
|
|
9783
|
-
*/
|
|
9784
|
-
renderHelpTextErrors(messages) {
|
|
9785
|
-
|
|
9786
|
-
// Return empty template if no messages are provided
|
|
9787
|
-
if (!messages || messages.length === 0) return html$1``;
|
|
9788
|
-
|
|
9789
|
-
// Return messages as a TemplateResult
|
|
9790
|
-
return messages.map(message => html$1`<p>${message}</p>`);
|
|
9791
|
-
}
|
|
9792
|
-
|
|
9793
|
-
/**
|
|
9794
|
-
* Gets and returns an array of counters in an invalid state.
|
|
9795
|
-
* @returns {Array<HTMLElement>} - Returns an array of invalid counters.
|
|
9796
|
-
* @param {NodeList} counters - The NodeList of counter elements to check.
|
|
9797
|
-
* @private
|
|
9798
|
-
*/
|
|
9799
|
-
getInvalidCounters(counters) {
|
|
9800
|
-
return Array.from(counters).filter(counter => counter.validity && counter.validity !== 'valid');
|
|
9801
|
-
}
|
|
9802
|
-
|
|
9803
|
-
/**
|
|
9804
|
-
* Gets all valid error messages from errored counters.
|
|
9805
|
-
* @param {NodeList} invalidCounters - The NodeList of counter elements to check.
|
|
9806
|
-
* @returns {Array<string>} - Returns an array of error messages from invalid counters.
|
|
9807
|
-
* @private
|
|
9808
|
-
*/
|
|
9809
|
-
getErrorMessages(invalidCounters) {
|
|
9810
|
-
return invalidCounters
|
|
9811
|
-
.map(counter => counter.errorMessage)
|
|
9812
|
-
.filter(message => message && message.length > 0);
|
|
9813
|
-
};
|
|
9814
|
-
|
|
9815
|
-
/**
|
|
9816
|
-
* Updates the validity of the counter group based on the validity of its counters.
|
|
9817
|
-
* This method checks all counters within the group, determines if any are invalid, and updates the group's validity state and error message accordingly.
|
|
9818
|
-
* If any counter is invalid, it generates a combined error message from all invalid counters.
|
|
9819
|
-
* @returns {void}
|
|
9820
|
-
* @private
|
|
9821
|
-
*/
|
|
9822
|
-
updateValidity () {
|
|
9823
|
-
|
|
9824
|
-
// We don't need to do anything if there are no counters
|
|
9825
|
-
if (!this.counters) return;
|
|
9826
|
-
|
|
9827
|
-
// Wait for initial validation to complete before updating validity and error message
|
|
9828
|
-
// This is necessary because we need the initial validation to know when to reset the validity and error message
|
|
9829
|
-
setTimeout(() => {
|
|
9830
|
-
|
|
9831
|
-
// Get any invalid counters
|
|
9832
|
-
const invalidCounters = this.getInvalidCounters(this.counters);
|
|
9833
|
-
|
|
9834
|
-
// Determine if we are in an invalid state based on the presence of invalid counters
|
|
9835
|
-
const isInvalid = invalidCounters.length > 0;
|
|
9836
|
-
|
|
9837
|
-
// If we are in an invalid state
|
|
9838
|
-
if (isInvalid) {
|
|
9839
|
-
|
|
9840
|
-
// Generate the error messages
|
|
9841
|
-
const errorMessages = this.getErrorMessages(invalidCounters);
|
|
9842
|
-
|
|
9843
|
-
const errorMessage = isInvalid ? this.renderHelpTextErrors(errorMessages) : this.errorMessage;
|
|
9844
|
-
|
|
9845
|
-
// Set the validity and error message
|
|
9846
|
-
// This needs to allow for the initial validation to come through
|
|
9847
|
-
this.validity =
|
|
9848
|
-
invalidCounters[0].validity || // The first invalid counter's validity
|
|
9849
|
-
this.validity || // incoming validity from validation
|
|
9850
|
-
undefined; // fallback
|
|
9851
|
-
|
|
9852
|
-
this.errorMessage =
|
|
9853
|
-
errorMessage || // our message
|
|
9854
|
-
this.errorMessage || // incoming message from validation
|
|
9855
|
-
undefined; // fallback
|
|
9856
|
-
}
|
|
9857
|
-
|
|
9858
|
-
if (!isInvalid && this.validity !== 'valid') {
|
|
9859
|
-
|
|
9860
|
-
// If there are no invalid counters, reset validity and error message
|
|
9861
|
-
this.validity = 'valid';
|
|
9862
|
-
this.errorMessage = undefined;
|
|
9863
|
-
}
|
|
9730
|
+
counter.addEventListener("input", () => this.updateValue());
|
|
9864
9731
|
});
|
|
9865
9732
|
}
|
|
9866
9733
|
|
|
@@ -9879,8 +9746,7 @@ class AuroCounterGroup extends AuroElement {
|
|
|
9879
9746
|
this.counters = counterSlot.assignedElements().filter(el => el.tagName.toLowerCase() === 'auro-counter' || el.hasAttribute('auro-counter'));
|
|
9880
9747
|
|
|
9881
9748
|
this.counters.forEach((counter) => {
|
|
9882
|
-
counter.addEventListener("input", this.updateValue);
|
|
9883
|
-
counter.addEventListener("auroFormElement-validated", this.updateValidity);
|
|
9749
|
+
counter.addEventListener("input", () => this.updateValue());
|
|
9884
9750
|
});
|
|
9885
9751
|
|
|
9886
9752
|
if (this.isDropdown) {
|
|
@@ -10030,57 +9896,6 @@ class AuroCounterGroup extends AuroElement {
|
|
|
10030
9896
|
AuroLibraryRuntimeUtils$8.prototype.registerComponent(name, AuroCounterGroup);
|
|
10031
9897
|
}
|
|
10032
9898
|
|
|
10033
|
-
/**
|
|
10034
|
-
* Returns HTML for the help text and error message.
|
|
10035
|
-
* @private
|
|
10036
|
-
* @returns {html} - Returns HTML for the help text and error message.
|
|
10037
|
-
*/
|
|
10038
|
-
renderHelpText() {
|
|
10039
|
-
return !this.validity || this.validity === undefined || this.validity === 'valid'
|
|
10040
|
-
? html$1`
|
|
10041
|
-
<div slot="helpText">
|
|
10042
|
-
<${this.helpTextTag} ?onDark="${this.onDark}">
|
|
10043
|
-
<p id="${this.uniqueId}" part="helpText">
|
|
10044
|
-
<slot name="helpText"></slot>
|
|
10045
|
-
</p>
|
|
10046
|
-
</${this.helpTextTag}>
|
|
10047
|
-
</div>
|
|
10048
|
-
`
|
|
10049
|
-
: html$1`
|
|
10050
|
-
<div slot="helpText">
|
|
10051
|
-
<${this.helpTextTag} error ?onDark="${this.onDark}">
|
|
10052
|
-
<p id="${this.uniqueId}" part="helpText" role="alert" aria-live="assertive">
|
|
10053
|
-
${this.error || this.errorMessage}
|
|
10054
|
-
</p>
|
|
10055
|
-
</${this.helpTextTag}>
|
|
10056
|
-
</div>
|
|
10057
|
-
`;
|
|
10058
|
-
}
|
|
10059
|
-
|
|
10060
|
-
/**
|
|
10061
|
-
* Returns HTML for the validation error icon.
|
|
10062
|
-
* @private
|
|
10063
|
-
* @returns {html} - Returns HTML for the validation error icon.
|
|
10064
|
-
*/
|
|
10065
|
-
renderValidationErrorIcon() {
|
|
10066
|
-
|
|
10067
|
-
// Don't render in valid state
|
|
10068
|
-
if (!this.validity || this.validity === 'valid') return undefined;
|
|
10069
|
-
|
|
10070
|
-
return html$1`
|
|
10071
|
-
${this.validity && this.validity !== 'valid' ? html$1`
|
|
10072
|
-
<div class="notification alertNotification">
|
|
10073
|
-
<${this.iconTag}
|
|
10074
|
-
category="alert"
|
|
10075
|
-
name="error-stroke"
|
|
10076
|
-
variant="statusError"
|
|
10077
|
-
?ondark="${this.onDark}">
|
|
10078
|
-
</${this.iconTag}>
|
|
10079
|
-
</div>
|
|
10080
|
-
` : undefined}
|
|
10081
|
-
`;
|
|
10082
|
-
}
|
|
10083
|
-
|
|
10084
9899
|
/**
|
|
10085
9900
|
* Render the dropdown structure for the counter group.
|
|
10086
9901
|
* @returns {TemplateResult} The dropdown template.
|
|
@@ -10090,7 +9905,7 @@ class AuroCounterGroup extends AuroElement {
|
|
|
10090
9905
|
return html$1`
|
|
10091
9906
|
<${this.dropdownTag}
|
|
10092
9907
|
noHideOnThisFocusLoss
|
|
10093
|
-
chevron
|
|
9908
|
+
chevron common fluid
|
|
10094
9909
|
part="dropdown"
|
|
10095
9910
|
?autoPlacement="${this.autoPlacement}"
|
|
10096
9911
|
?error="${this.validity !== undefined && this.validity !== 'valid'}"
|
|
@@ -10137,13 +9952,28 @@ class AuroCounterGroup extends AuroElement {
|
|
|
10137
9952
|
${this.counters && Array.from(this.counters).map((counter, index) => html$1`${counter.value} ${counter.defaultSlot}${index !== this.counters.length - 1 ? ', ' : ''}`)}
|
|
10138
9953
|
</slot>
|
|
10139
9954
|
</div>
|
|
10140
|
-
<div class="accents right">
|
|
10141
|
-
${this.renderValidationErrorIcon()}
|
|
10142
|
-
</div>
|
|
9955
|
+
<div class="accents right"></div>
|
|
10143
9956
|
</div>
|
|
10144
9957
|
`;
|
|
10145
9958
|
};
|
|
10146
9959
|
|
|
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
|
+
|
|
10147
9977
|
/**
|
|
10148
9978
|
* Render the dropdown bib template for the dropdown.
|
|
10149
9979
|
* @returns {TemplateResult} The bib template.
|