@aurodesignsystem-dev/auro-formkit 0.0.0-pr754.1 → 0.0.0-pr755.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/checkbox/demo/api.html +16 -10
- package/components/checkbox/demo/api.min.js +2 -2
- package/components/checkbox/demo/index.html +16 -10
- package/components/checkbox/demo/index.min.js +2 -2
- package/components/checkbox/demo/readme.html +16 -9
- package/components/checkbox/dist/index.js +2 -2
- package/components/checkbox/dist/registered.js +2 -2
- package/components/combobox/demo/api.html +16 -10
- package/components/combobox/demo/api.min.js +11 -35
- package/components/combobox/demo/index.html +16 -10
- package/components/combobox/demo/index.min.js +11 -35
- package/components/combobox/demo/readme.html +16 -9
- package/components/counter/demo/api.html +16 -10
- package/components/counter/demo/index.html +16 -10
- package/components/counter/demo/readme.html +16 -9
- package/components/datepicker/demo/api.html +16 -10
- package/components/datepicker/demo/index.html +16 -10
- package/components/datepicker/demo/readme.html +16 -9
- package/components/dropdown/demo/api.html +16 -10
- package/components/dropdown/demo/index.html +16 -10
- package/components/dropdown/demo/readme.html +16 -9
- package/components/form/demo/api.html +16 -9
- package/components/form/demo/autocomplete.html +19 -3
- package/components/form/demo/index.html +16 -9
- package/components/form/demo/readme.html +16 -9
- package/components/form/demo/working.html +19 -13
- package/components/input/demo/api.html +16 -10
- package/components/input/demo/index.html +16 -10
- package/components/input/demo/readme.html +16 -9
- package/components/menu/demo/api.html +16 -32
- package/components/menu/demo/api.md +14 -15
- package/components/menu/demo/api.min.js +11 -35
- package/components/menu/demo/index.html +16 -10
- package/components/menu/demo/index.min.js +11 -35
- package/components/menu/demo/readme.html +16 -9
- package/components/menu/dist/auro-menu.d.ts +2 -12
- package/components/menu/dist/index.js +11 -35
- package/components/menu/dist/registered.js +11 -35
- package/components/radio/demo/api.html +16 -10
- package/components/radio/demo/index.html +16 -10
- package/components/radio/demo/readme.html +16 -9
- package/components/select/demo/api.html +16 -10
- package/components/select/demo/api.md +29 -30
- package/components/select/demo/api.min.js +91 -64
- package/components/select/demo/index.html +16 -11
- package/components/select/demo/index.min.js +91 -64
- package/components/select/demo/readme.html +16 -9
- package/components/select/dist/auro-select.d.ts +3 -12
- package/components/select/dist/index.js +80 -29
- package/components/select/dist/registered.js +80 -29
- package/package.json +4 -4
|
@@ -16,17 +16,24 @@
|
|
|
16
16
|
<head>
|
|
17
17
|
<meta charset="UTF-8" />
|
|
18
18
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
-
<title>Auro Web Component
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css"
|
|
26
|
-
|
|
19
|
+
<title>Auro Web Component Demo | auro-select</title>
|
|
20
|
+
|
|
21
|
+
<!-- Prism.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-select's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
27
34
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
28
35
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
29
|
-
|
|
36
|
+
</head>
|
|
30
37
|
<body class="auro-markdown">
|
|
31
38
|
<main></main>
|
|
32
39
|
|
|
@@ -194,13 +194,10 @@ export class AuroSelect extends AuroElement {
|
|
|
194
194
|
reflect: boolean;
|
|
195
195
|
};
|
|
196
196
|
/**
|
|
197
|
-
* Value selected for the component.
|
|
197
|
+
* Value selected for the component. Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
|
|
198
|
+
* @type {String|Array<String>}
|
|
198
199
|
*/
|
|
199
|
-
value:
|
|
200
|
-
type: StringConstructor;
|
|
201
|
-
reflect: boolean;
|
|
202
|
-
attribute: string;
|
|
203
|
-
};
|
|
200
|
+
value: string | Array<string>;
|
|
204
201
|
/**
|
|
205
202
|
* Sets multi-select mode, allowing multiple options to be selected at once.
|
|
206
203
|
*/
|
|
@@ -299,12 +296,6 @@ export class AuroSelect extends AuroElement {
|
|
|
299
296
|
fullscreenBreakpoint: string;
|
|
300
297
|
onDark: boolean;
|
|
301
298
|
isPopoverVisible: any;
|
|
302
|
-
/**
|
|
303
|
-
* Formatted value based on `multiSelect` state.
|
|
304
|
-
* Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
|
|
305
|
-
* @returns {String|Array<String>}
|
|
306
|
-
*/
|
|
307
|
-
get formattedValue(): string | Array<string>;
|
|
308
299
|
/**
|
|
309
300
|
* Returns classmap configuration for html5 input labels in all layouts.
|
|
310
301
|
* @private
|
|
@@ -7541,6 +7541,67 @@ class AuroHelpText extends LitElement {
|
|
|
7541
7541
|
|
|
7542
7542
|
var helpTextVersion = '1.0.0';
|
|
7543
7543
|
|
|
7544
|
+
css`:focus:not(:focus-visible){outline:3px solid transparent}:host{display:block;vertical-align:middle}:host .wrapper{box-sizing:border-box;display:inline-block;width:100%;margin:0;padding:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host [loadingplaceholder].empty{opacity:0;position:absolute}:host [loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}:host [loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}:host([root]){overflow-y:auto}:host([root]) .wrapper[class*=-lg]{padding:var(--ds-size-150, 0.75rem)}:host([root]) .wrapper[class*=-xl]{padding:var(--ds-size-200, 1rem)}`;
|
|
7545
|
+
|
|
7546
|
+
css`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color)}[loadingplaceholder] slot[name=loadingIcon]{color:var(--ds-auro-menu-loader-color)}[loadingplaceholder] slot[name=loadingText]{color:var(--ds-auro-menu-loader-text-color)}`;
|
|
7547
|
+
|
|
7548
|
+
css`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-container-border-color: var(--ds-auro-menuoption-container-color);--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
|
|
7549
|
+
|
|
7550
|
+
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
7551
|
+
// See LICENSE in the project root for license information.
|
|
7552
|
+
|
|
7553
|
+
// ---------------------------------------------------------------------
|
|
7554
|
+
|
|
7555
|
+
/**
|
|
7556
|
+
* Converts value to an array.
|
|
7557
|
+
* If the value is a JSON string representing an array, it will be parsed.
|
|
7558
|
+
* If the value is already an array, it is returned.
|
|
7559
|
+
* If the value is undefined, it returns undefined.
|
|
7560
|
+
* @private
|
|
7561
|
+
* @param {any} value - The value to be converted. Can be a string, array, or undefined.
|
|
7562
|
+
* @returns {Array|undefined} - The converted array or undefined.
|
|
7563
|
+
* @throws {Error} - Throws an error if the value is not an array, undefined,
|
|
7564
|
+
* or if the value cannot be parsed into an array from a JSON string.
|
|
7565
|
+
*/
|
|
7566
|
+
function arrayConverter(value) {
|
|
7567
|
+
// Allow undefined
|
|
7568
|
+
if (value === undefined) {
|
|
7569
|
+
return undefined;
|
|
7570
|
+
}
|
|
7571
|
+
|
|
7572
|
+
// Return the value if it is already an array
|
|
7573
|
+
if (Array.isArray(value)) {
|
|
7574
|
+
return value;
|
|
7575
|
+
}
|
|
7576
|
+
|
|
7577
|
+
try {
|
|
7578
|
+
// If value is a JSON string, parse it
|
|
7579
|
+
const parsed = typeof value === 'string' ? JSON.parse(value) : value;
|
|
7580
|
+
|
|
7581
|
+
// Check if the parsed value is an array
|
|
7582
|
+
if (Array.isArray(parsed)) {
|
|
7583
|
+
return parsed;
|
|
7584
|
+
}
|
|
7585
|
+
} catch (error) {
|
|
7586
|
+
// If JSON parsing fails, continue to throw an error below
|
|
7587
|
+
/* eslint-disable no-console */
|
|
7588
|
+
console.error('JSON parsing failed:', error);
|
|
7589
|
+
}
|
|
7590
|
+
|
|
7591
|
+
// Throw error if the input is not an array or undefined
|
|
7592
|
+
throw new Error('Invalid value: Input must be an array or undefined');
|
|
7593
|
+
}
|
|
7594
|
+
|
|
7595
|
+
css`:host{cursor:pointer;user-select:none}:host .wrapper{display:flex;align-items:center;padding-right:var(--ds-size-200, 1rem);padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem));padding-top:var(--ds-size-50, 0.25rem);padding-bottom:var(--ds-size-50, 0.25rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box],:host .wrapper[class*=shape-snowflake]{border-radius:unset}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem)}:host .wrapper[class*=-lg]:not(:last-child){margin-bottom:var(--ds-size-50, 0.25rem)}:host .wrapper[class*=-xl]{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem)}:host .wrapper[class*=-xl]:not(:last-child){margin-bottom:var(--ds-size-100, 0.5rem)}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host([selected]) .wrapper{padding-left:0}:host([nocheckmark]) .wrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-lg]{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-xl]{padding-left:var(--ds-size-200, 1rem)}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
|
|
7596
|
+
|
|
7597
|
+
css`:host .wrapper{border:1px solid var(--ds-auro-menuoption-container-border-color);background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-neutral-subtle, #f7f7f7)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([selected]):host(:hover),:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected-hover, #00274a)}`;
|
|
7598
|
+
|
|
7599
|
+
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}`;
|
|
7600
|
+
|
|
7601
|
+
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)}`;
|
|
7602
|
+
|
|
7603
|
+
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)}`;
|
|
7604
|
+
|
|
7544
7605
|
var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color)}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}.mainContent{position:relative;display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:8px}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent,:host([layout*=snowflake]) .triggerContent{padding:0 8px 0 24px}:host([layout*=snowflake]) [auro-dropdown] label.withValue{font-size:var(--ds-text-body-size-xs);line-height:20px}:host([layout*=emphasized]) [auro-dropdown] label.withValue{font-size:var(--ds-text-body-size-xs);line-height:20px}:host([layout*=classic]) .triggerContent{padding:0 8px}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{cursor:text;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}:host([layout*=classic]) label.withValue{font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([layout*=classic]) .value{height:auto;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([disabled]) *{user-select:none}`;
|
|
7545
7606
|
|
|
7546
7607
|
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
@@ -7872,12 +7933,11 @@ class AuroSelect extends AuroElement$3 {
|
|
|
7872
7933
|
},
|
|
7873
7934
|
|
|
7874
7935
|
/**
|
|
7875
|
-
* Value selected for the component.
|
|
7936
|
+
* Value selected for the component. Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
|
|
7937
|
+
* @type {String|Array<String>}
|
|
7876
7938
|
*/
|
|
7877
7939
|
value: {
|
|
7878
|
-
type:
|
|
7879
|
-
reflect: true,
|
|
7880
|
-
attribute: 'value'
|
|
7940
|
+
type: Object
|
|
7881
7941
|
},
|
|
7882
7942
|
|
|
7883
7943
|
/**
|
|
@@ -7929,24 +7989,6 @@ class AuroSelect extends AuroElement$3 {
|
|
|
7929
7989
|
];
|
|
7930
7990
|
}
|
|
7931
7991
|
|
|
7932
|
-
/**
|
|
7933
|
-
* Formatted value based on `multiSelect` state.
|
|
7934
|
-
* Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
|
|
7935
|
-
* @returns {String|Array<String>}
|
|
7936
|
-
*/
|
|
7937
|
-
get formattedValue() {
|
|
7938
|
-
if (this.multiSelect) {
|
|
7939
|
-
if (!this.value) {
|
|
7940
|
-
return undefined;
|
|
7941
|
-
}
|
|
7942
|
-
if (this.value.startsWith("[")) {
|
|
7943
|
-
return JSON.parse(this.value);
|
|
7944
|
-
}
|
|
7945
|
-
return [this.value];
|
|
7946
|
-
}
|
|
7947
|
-
return this.value;
|
|
7948
|
-
}
|
|
7949
|
-
|
|
7950
7992
|
/**
|
|
7951
7993
|
* Returns classmap configuration for html5 input labels in all layouts.
|
|
7952
7994
|
* @private
|
|
@@ -8365,6 +8407,14 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8365
8407
|
this.configureDropdown();
|
|
8366
8408
|
this.configureMenu();
|
|
8367
8409
|
this.configureSelect();
|
|
8410
|
+
|
|
8411
|
+
// Set the initial value in auro-menu if defined
|
|
8412
|
+
if (this.hasAttribute('value') && this.getAttribute('value').length > 0) {
|
|
8413
|
+
this.value = this.multiSelect ? arrayConverter(this.getAttribute('value')) : this.getAttribute('value');
|
|
8414
|
+
if (this.menu) {
|
|
8415
|
+
this.menu.value = this.value;
|
|
8416
|
+
}
|
|
8417
|
+
}
|
|
8368
8418
|
}
|
|
8369
8419
|
|
|
8370
8420
|
/**
|
|
@@ -8376,18 +8426,19 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8376
8426
|
async updateMenuValue(value) {
|
|
8377
8427
|
if (!this.menu) return;
|
|
8378
8428
|
|
|
8379
|
-
this.menu.setAttribute('value', value);
|
|
8380
8429
|
this.menu.value = value;
|
|
8381
8430
|
await this.menu.updateComplete;
|
|
8382
8431
|
}
|
|
8383
8432
|
|
|
8384
8433
|
async updated(changedProperties) {
|
|
8385
|
-
if (changedProperties.has('multiSelect')
|
|
8434
|
+
if (changedProperties.has('multiSelect')) {
|
|
8386
8435
|
this.clearSelection();
|
|
8387
8436
|
}
|
|
8388
8437
|
|
|
8389
8438
|
if (changedProperties.has('value')) {
|
|
8390
8439
|
if (this.value) {
|
|
8440
|
+
this.value = this.multiSelect ? arrayConverter(this.value) : this.value;
|
|
8441
|
+
|
|
8391
8442
|
await this.updateMenuValue(this.value);
|
|
8392
8443
|
|
|
8393
8444
|
if (this.menu) {
|
|
@@ -8413,7 +8464,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8413
8464
|
composed: true,
|
|
8414
8465
|
detail: {
|
|
8415
8466
|
optionSelected: this.optionSelected,
|
|
8416
|
-
value: this.
|
|
8467
|
+
value: this.value
|
|
8417
8468
|
}
|
|
8418
8469
|
}));
|
|
8419
8470
|
}
|
|
@@ -8472,13 +8523,13 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8472
8523
|
const selectedValue = selectedOption.value;
|
|
8473
8524
|
|
|
8474
8525
|
if (this.multiSelect) {
|
|
8475
|
-
const currentArray = this.
|
|
8526
|
+
const currentArray = Array.isArray(this.value) ? this.value : [];
|
|
8476
8527
|
|
|
8477
8528
|
if (!currentArray.includes(selectedValue)) {
|
|
8478
|
-
this.value =
|
|
8529
|
+
this.value = [
|
|
8479
8530
|
...currentArray,
|
|
8480
8531
|
selectedValue
|
|
8481
|
-
]
|
|
8532
|
+
];
|
|
8482
8533
|
}
|
|
8483
8534
|
} else {
|
|
8484
8535
|
const currentValue = this.value;
|
|
@@ -8501,7 +8552,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8501
8552
|
}
|
|
8502
8553
|
|
|
8503
8554
|
if (this.multiSelect) {
|
|
8504
|
-
nativeSelect.value = this.
|
|
8555
|
+
nativeSelect.value = this.value ? this.value[0] : '';
|
|
8505
8556
|
} else {
|
|
8506
8557
|
nativeSelect.value = this.value || '';
|
|
8507
8558
|
}
|
|
@@ -7541,6 +7541,67 @@ class AuroHelpText extends LitElement {
|
|
|
7541
7541
|
|
|
7542
7542
|
var helpTextVersion = '1.0.0';
|
|
7543
7543
|
|
|
7544
|
+
css`:focus:not(:focus-visible){outline:3px solid transparent}:host{display:block;vertical-align:middle}:host .wrapper{box-sizing:border-box;display:inline-block;width:100%;margin:0;padding:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host [loadingplaceholder].empty{opacity:0;position:absolute}:host [loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}:host [loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}:host([root]){overflow-y:auto}:host([root]) .wrapper[class*=-lg]{padding:var(--ds-size-150, 0.75rem)}:host([root]) .wrapper[class*=-xl]{padding:var(--ds-size-200, 1rem)}`;
|
|
7545
|
+
|
|
7546
|
+
css`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color)}[loadingplaceholder] slot[name=loadingIcon]{color:var(--ds-auro-menu-loader-color)}[loadingplaceholder] slot[name=loadingText]{color:var(--ds-auro-menu-loader-text-color)}`;
|
|
7547
|
+
|
|
7548
|
+
css`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-container-border-color: var(--ds-auro-menuoption-container-color);--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
|
|
7549
|
+
|
|
7550
|
+
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
7551
|
+
// See LICENSE in the project root for license information.
|
|
7552
|
+
|
|
7553
|
+
// ---------------------------------------------------------------------
|
|
7554
|
+
|
|
7555
|
+
/**
|
|
7556
|
+
* Converts value to an array.
|
|
7557
|
+
* If the value is a JSON string representing an array, it will be parsed.
|
|
7558
|
+
* If the value is already an array, it is returned.
|
|
7559
|
+
* If the value is undefined, it returns undefined.
|
|
7560
|
+
* @private
|
|
7561
|
+
* @param {any} value - The value to be converted. Can be a string, array, or undefined.
|
|
7562
|
+
* @returns {Array|undefined} - The converted array or undefined.
|
|
7563
|
+
* @throws {Error} - Throws an error if the value is not an array, undefined,
|
|
7564
|
+
* or if the value cannot be parsed into an array from a JSON string.
|
|
7565
|
+
*/
|
|
7566
|
+
function arrayConverter(value) {
|
|
7567
|
+
// Allow undefined
|
|
7568
|
+
if (value === undefined) {
|
|
7569
|
+
return undefined;
|
|
7570
|
+
}
|
|
7571
|
+
|
|
7572
|
+
// Return the value if it is already an array
|
|
7573
|
+
if (Array.isArray(value)) {
|
|
7574
|
+
return value;
|
|
7575
|
+
}
|
|
7576
|
+
|
|
7577
|
+
try {
|
|
7578
|
+
// If value is a JSON string, parse it
|
|
7579
|
+
const parsed = typeof value === 'string' ? JSON.parse(value) : value;
|
|
7580
|
+
|
|
7581
|
+
// Check if the parsed value is an array
|
|
7582
|
+
if (Array.isArray(parsed)) {
|
|
7583
|
+
return parsed;
|
|
7584
|
+
}
|
|
7585
|
+
} catch (error) {
|
|
7586
|
+
// If JSON parsing fails, continue to throw an error below
|
|
7587
|
+
/* eslint-disable no-console */
|
|
7588
|
+
console.error('JSON parsing failed:', error);
|
|
7589
|
+
}
|
|
7590
|
+
|
|
7591
|
+
// Throw error if the input is not an array or undefined
|
|
7592
|
+
throw new Error('Invalid value: Input must be an array or undefined');
|
|
7593
|
+
}
|
|
7594
|
+
|
|
7595
|
+
css`:host{cursor:pointer;user-select:none}:host .wrapper{display:flex;align-items:center;padding-right:var(--ds-size-200, 1rem);padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem));padding-top:var(--ds-size-50, 0.25rem);padding-bottom:var(--ds-size-50, 0.25rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box],:host .wrapper[class*=shape-snowflake]{border-radius:unset}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem)}:host .wrapper[class*=-lg]:not(:last-child){margin-bottom:var(--ds-size-50, 0.25rem)}:host .wrapper[class*=-xl]{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem)}:host .wrapper[class*=-xl]:not(:last-child){margin-bottom:var(--ds-size-100, 0.5rem)}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host([selected]) .wrapper{padding-left:0}:host([nocheckmark]) .wrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-lg]{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-xl]{padding-left:var(--ds-size-200, 1rem)}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
|
|
7596
|
+
|
|
7597
|
+
css`:host .wrapper{border:1px solid var(--ds-auro-menuoption-container-border-color);background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-neutral-subtle, #f7f7f7)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([selected]):host(:hover),:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected-hover, #00274a)}`;
|
|
7598
|
+
|
|
7599
|
+
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}`;
|
|
7600
|
+
|
|
7601
|
+
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)}`;
|
|
7602
|
+
|
|
7603
|
+
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)}`;
|
|
7604
|
+
|
|
7544
7605
|
var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color)}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}.mainContent{position:relative;display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:8px}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent,:host([layout*=snowflake]) .triggerContent{padding:0 8px 0 24px}:host([layout*=snowflake]) [auro-dropdown] label.withValue{font-size:var(--ds-text-body-size-xs);line-height:20px}:host([layout*=emphasized]) [auro-dropdown] label.withValue{font-size:var(--ds-text-body-size-xs);line-height:20px}:host([layout*=classic]) .triggerContent{padding:0 8px}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{cursor:text;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}:host([layout*=classic]) label.withValue{font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([layout*=classic]) .value{height:auto;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([disabled]) *{user-select:none}`;
|
|
7545
7606
|
|
|
7546
7607
|
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
@@ -7872,12 +7933,11 @@ class AuroSelect extends AuroElement$3 {
|
|
|
7872
7933
|
},
|
|
7873
7934
|
|
|
7874
7935
|
/**
|
|
7875
|
-
* Value selected for the component.
|
|
7936
|
+
* Value selected for the component. Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
|
|
7937
|
+
* @type {String|Array<String>}
|
|
7876
7938
|
*/
|
|
7877
7939
|
value: {
|
|
7878
|
-
type:
|
|
7879
|
-
reflect: true,
|
|
7880
|
-
attribute: 'value'
|
|
7940
|
+
type: Object
|
|
7881
7941
|
},
|
|
7882
7942
|
|
|
7883
7943
|
/**
|
|
@@ -7929,24 +7989,6 @@ class AuroSelect extends AuroElement$3 {
|
|
|
7929
7989
|
];
|
|
7930
7990
|
}
|
|
7931
7991
|
|
|
7932
|
-
/**
|
|
7933
|
-
* Formatted value based on `multiSelect` state.
|
|
7934
|
-
* Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
|
|
7935
|
-
* @returns {String|Array<String>}
|
|
7936
|
-
*/
|
|
7937
|
-
get formattedValue() {
|
|
7938
|
-
if (this.multiSelect) {
|
|
7939
|
-
if (!this.value) {
|
|
7940
|
-
return undefined;
|
|
7941
|
-
}
|
|
7942
|
-
if (this.value.startsWith("[")) {
|
|
7943
|
-
return JSON.parse(this.value);
|
|
7944
|
-
}
|
|
7945
|
-
return [this.value];
|
|
7946
|
-
}
|
|
7947
|
-
return this.value;
|
|
7948
|
-
}
|
|
7949
|
-
|
|
7950
7992
|
/**
|
|
7951
7993
|
* Returns classmap configuration for html5 input labels in all layouts.
|
|
7952
7994
|
* @private
|
|
@@ -8365,6 +8407,14 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8365
8407
|
this.configureDropdown();
|
|
8366
8408
|
this.configureMenu();
|
|
8367
8409
|
this.configureSelect();
|
|
8410
|
+
|
|
8411
|
+
// Set the initial value in auro-menu if defined
|
|
8412
|
+
if (this.hasAttribute('value') && this.getAttribute('value').length > 0) {
|
|
8413
|
+
this.value = this.multiSelect ? arrayConverter(this.getAttribute('value')) : this.getAttribute('value');
|
|
8414
|
+
if (this.menu) {
|
|
8415
|
+
this.menu.value = this.value;
|
|
8416
|
+
}
|
|
8417
|
+
}
|
|
8368
8418
|
}
|
|
8369
8419
|
|
|
8370
8420
|
/**
|
|
@@ -8376,18 +8426,19 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8376
8426
|
async updateMenuValue(value) {
|
|
8377
8427
|
if (!this.menu) return;
|
|
8378
8428
|
|
|
8379
|
-
this.menu.setAttribute('value', value);
|
|
8380
8429
|
this.menu.value = value;
|
|
8381
8430
|
await this.menu.updateComplete;
|
|
8382
8431
|
}
|
|
8383
8432
|
|
|
8384
8433
|
async updated(changedProperties) {
|
|
8385
|
-
if (changedProperties.has('multiSelect')
|
|
8434
|
+
if (changedProperties.has('multiSelect')) {
|
|
8386
8435
|
this.clearSelection();
|
|
8387
8436
|
}
|
|
8388
8437
|
|
|
8389
8438
|
if (changedProperties.has('value')) {
|
|
8390
8439
|
if (this.value) {
|
|
8440
|
+
this.value = this.multiSelect ? arrayConverter(this.value) : this.value;
|
|
8441
|
+
|
|
8391
8442
|
await this.updateMenuValue(this.value);
|
|
8392
8443
|
|
|
8393
8444
|
if (this.menu) {
|
|
@@ -8413,7 +8464,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8413
8464
|
composed: true,
|
|
8414
8465
|
detail: {
|
|
8415
8466
|
optionSelected: this.optionSelected,
|
|
8416
|
-
value: this.
|
|
8467
|
+
value: this.value
|
|
8417
8468
|
}
|
|
8418
8469
|
}));
|
|
8419
8470
|
}
|
|
@@ -8472,13 +8523,13 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8472
8523
|
const selectedValue = selectedOption.value;
|
|
8473
8524
|
|
|
8474
8525
|
if (this.multiSelect) {
|
|
8475
|
-
const currentArray = this.
|
|
8526
|
+
const currentArray = Array.isArray(this.value) ? this.value : [];
|
|
8476
8527
|
|
|
8477
8528
|
if (!currentArray.includes(selectedValue)) {
|
|
8478
|
-
this.value =
|
|
8529
|
+
this.value = [
|
|
8479
8530
|
...currentArray,
|
|
8480
8531
|
selectedValue
|
|
8481
|
-
]
|
|
8532
|
+
];
|
|
8482
8533
|
}
|
|
8483
8534
|
} else {
|
|
8484
8535
|
const currentValue = this.value;
|
|
@@ -8501,7 +8552,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8501
8552
|
}
|
|
8502
8553
|
|
|
8503
8554
|
if (this.multiSelect) {
|
|
8504
|
-
nativeSelect.value = this.
|
|
8555
|
+
nativeSelect.value = this.value ? this.value[0] : '';
|
|
8505
8556
|
} else {
|
|
8506
8557
|
nativeSelect.value = this.value || '';
|
|
8507
8558
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aurodesignsystem-dev/auro-formkit",
|
|
3
|
-
"version": "0.0.0-
|
|
3
|
+
"version": "0.0.0-pr755.0",
|
|
4
4
|
"description": "A collection of web components used to build forms.",
|
|
5
5
|
"homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
|
|
6
6
|
"bugs": {
|
|
@@ -62,9 +62,9 @@
|
|
|
62
62
|
"devDependencies": {
|
|
63
63
|
"@aurodesignsystem/design-tokens": "^8.2.1",
|
|
64
64
|
"@aurodesignsystem/eslint-config": "^1.3.4",
|
|
65
|
-
"@aurodesignsystem/webcorestylesheets": "^
|
|
66
|
-
"@commitlint/cli": "^19.8.
|
|
67
|
-
"@commitlint/config-conventional": "^19.8.
|
|
65
|
+
"@aurodesignsystem/webcorestylesheets": "^10.0.0",
|
|
66
|
+
"@commitlint/cli": "^19.8.0",
|
|
67
|
+
"@commitlint/config-conventional": "^19.8.0",
|
|
68
68
|
"@open-wc/testing": "^4.0.0",
|
|
69
69
|
"@semantic-release/changelog": "^6.0.3",
|
|
70
70
|
"@semantic-release/git": "^10.0.1",
|