@aurodesignsystem-dev/auro-formkit 0.0.0-pr802.0 → 0.0.0-pr806.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.md +2 -1
- package/components/checkbox/demo/api.min.js +8 -1
- package/components/checkbox/demo/index.min.js +8 -1
- package/components/checkbox/dist/index.js +8 -1
- package/components/checkbox/dist/registered.js +8 -1
- package/components/combobox/demo/api.md +2 -0
- package/components/combobox/demo/api.min.js +87 -73
- package/components/combobox/demo/index.min.js +87 -73
- package/components/combobox/dist/auro-combobox.d.ts +2 -4
- package/components/combobox/dist/index.js +86 -72
- package/components/combobox/dist/registered.js +86 -72
- package/components/counter/demo/api.md +2 -0
- package/components/counter/demo/api.min.js +31 -61
- package/components/counter/demo/index.min.js +31 -61
- package/components/counter/dist/auro-counter-group.d.ts +10 -0
- package/components/counter/dist/index.js +31 -61
- package/components/counter/dist/registered.js +31 -61
- package/components/datepicker/README.md +1 -1
- package/components/datepicker/demo/api.md +41 -19
- package/components/datepicker/demo/api.min.js +341 -188
- package/components/datepicker/demo/index.md +4 -4
- package/components/datepicker/demo/index.min.js +341 -188
- package/components/datepicker/demo/readme.md +1 -1
- package/components/datepicker/dist/auro-datepicker.d.ts +73 -12
- package/components/datepicker/dist/index.js +341 -188
- package/components/datepicker/dist/registered.js +341 -188
- package/components/datepicker/dist/styles/classic/style-css.d.ts +2 -0
- package/components/dropdown/demo/api.md +1 -1
- package/components/dropdown/demo/api.min.js +10 -60
- package/components/dropdown/demo/index.min.js +10 -60
- package/components/dropdown/dist/auro-dropdown.d.ts +0 -7
- package/components/dropdown/dist/index.js +10 -60
- package/components/dropdown/dist/registered.js +10 -60
- package/components/input/demo/api.min.js +75 -9
- package/components/input/demo/index.min.js +75 -9
- package/components/input/dist/auro-input.d.ts +24 -0
- package/components/input/dist/index.js +75 -9
- package/components/input/dist/registered.js +75 -9
- package/components/menu/demo/api.min.js +1 -1
- package/components/menu/demo/index.min.js +1 -1
- package/components/menu/dist/index.js +1 -1
- package/components/menu/dist/registered.js +1 -1
- package/components/radio/demo/api.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/api.md +46 -64
- package/components/select/demo/api.min.js +61 -76
- package/components/select/demo/index.md +1057 -137
- package/components/select/demo/index.min.js +61 -76
- package/components/select/dist/auro-select.d.ts +22 -5
- package/components/select/dist/index.js +60 -75
- package/components/select/dist/registered.js +60 -75
- package/package.json +2 -2
- /package/components/datepicker/dist/styles/{default → classic}/color-css.d.ts +0 -0
|
@@ -4461,6 +4461,7 @@ let AuroElement$2 = class AuroElement extends LitElement {
|
|
|
4461
4461
|
// See LICENSE in the project root for license information.
|
|
4462
4462
|
|
|
4463
4463
|
|
|
4464
|
+
|
|
4464
4465
|
/*
|
|
4465
4466
|
* @slot - Default slot for the popover content.
|
|
4466
4467
|
* @slot helpText - Defines the content of the helpText.
|
|
@@ -4964,6 +4965,13 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
4964
4965
|
|
|
4965
4966
|
// Add the tag name as an attribute if it is different than the component name
|
|
4966
4967
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
|
|
4968
|
+
|
|
4969
|
+
this.trigger.addEventListener('click', () => {
|
|
4970
|
+
this.dispatchEvent(new CustomEvent('auroDropdown-triggerClick', {
|
|
4971
|
+
bubbles: true,
|
|
4972
|
+
composed: true
|
|
4973
|
+
}));
|
|
4974
|
+
});
|
|
4967
4975
|
}
|
|
4968
4976
|
|
|
4969
4977
|
/**
|
|
@@ -5036,64 +5044,6 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5036
5044
|
this.hasFocus = false;
|
|
5037
5045
|
}
|
|
5038
5046
|
|
|
5039
|
-
/**
|
|
5040
|
-
* Determines if the element or any children are focusable.
|
|
5041
|
-
* @private
|
|
5042
|
-
* @param {HTMLElement} element - Element to check.
|
|
5043
|
-
* @returns {Boolean} - True if the element or any children are focusable.
|
|
5044
|
-
*/
|
|
5045
|
-
containsFocusableElement(element) {
|
|
5046
|
-
this.showTriggerBorders = true;
|
|
5047
|
-
|
|
5048
|
-
const nodes = [
|
|
5049
|
-
element,
|
|
5050
|
-
...element.children
|
|
5051
|
-
];
|
|
5052
|
-
|
|
5053
|
-
const focusableElements = [
|
|
5054
|
-
'a',
|
|
5055
|
-
'auro-hyperlink',
|
|
5056
|
-
'button',
|
|
5057
|
-
'auro-button',
|
|
5058
|
-
'input',
|
|
5059
|
-
'auro-input',
|
|
5060
|
-
];
|
|
5061
|
-
|
|
5062
|
-
const focusableElementsThatNeedBorders = ['auro-input'];
|
|
5063
|
-
|
|
5064
|
-
const result = nodes.some((node) => {
|
|
5065
|
-
const tagName = node.tagName.toLowerCase();
|
|
5066
|
-
|
|
5067
|
-
if (node.tabIndex > -1) {
|
|
5068
|
-
return true;
|
|
5069
|
-
}
|
|
5070
|
-
|
|
5071
|
-
if (focusableElements.includes(tagName)) {
|
|
5072
|
-
if ((tagName === 'a' || tagName === 'auro-hyperlink' || node.hasAttribute('auro-hyperlink')) && node.hasAttribute('href')) {
|
|
5073
|
-
return true;
|
|
5074
|
-
}
|
|
5075
|
-
if (!node.hasAttribute('disabled')) {
|
|
5076
|
-
return true;
|
|
5077
|
-
}
|
|
5078
|
-
}
|
|
5079
|
-
|
|
5080
|
-
if (focusableElements.some((focusableElement) => focusableElement.startsWith('auro-') && (focusableElement === tagName || node.hasAttribute(focusableElement)))) {
|
|
5081
|
-
return true;
|
|
5082
|
-
}
|
|
5083
|
-
|
|
5084
|
-
return false;
|
|
5085
|
-
});
|
|
5086
|
-
|
|
5087
|
-
if (result) {
|
|
5088
|
-
this.showTriggerBorders = !nodes.some((node) => {
|
|
5089
|
-
const tagName = node.tagName.toLowerCase();
|
|
5090
|
-
return focusableElements.includes(tagName) && !focusableElementsThatNeedBorders.includes(tagName);
|
|
5091
|
-
});
|
|
5092
|
-
}
|
|
5093
|
-
|
|
5094
|
-
return result;
|
|
5095
|
-
}
|
|
5096
|
-
|
|
5097
5047
|
/**
|
|
5098
5048
|
* Creates and dispatches a duplicate focus event on the trigger element.
|
|
5099
5049
|
* @private
|
|
@@ -5205,7 +5155,7 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5205
5155
|
if (triggerContentNodes) {
|
|
5206
5156
|
|
|
5207
5157
|
// See if any of them are focusable elements
|
|
5208
|
-
this.triggerContentFocusable = triggerContentNodes.some((node) =>
|
|
5158
|
+
this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements(node).length > 0);
|
|
5209
5159
|
|
|
5210
5160
|
// If any of them are focusable elements
|
|
5211
5161
|
if (this.triggerContentFocusable) {
|
|
@@ -5277,7 +5227,7 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5277
5227
|
<div
|
|
5278
5228
|
id="trigger"
|
|
5279
5229
|
class="${classMap(this.commonWrapperClasses)}" part="wrapper"
|
|
5280
|
-
tabindex="${this.tabIndex}"
|
|
5230
|
+
tabindex="${ifDefined(this.triggerContentFocusable ? undefined : this.tabIndex)}"
|
|
5281
5231
|
role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
5282
5232
|
aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
5283
5233
|
aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
@@ -7250,7 +7200,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
7250
7200
|
/**
|
|
7251
7201
|
* @private
|
|
7252
7202
|
*/
|
|
7253
|
-
this.buttonTag = versioning.generateTag('auro-formkit-
|
|
7203
|
+
this.buttonTag = versioning.generateTag('auro-formkit-bibtemplate-button', buttonVersion, AuroButton);
|
|
7254
7204
|
}
|
|
7255
7205
|
|
|
7256
7206
|
static get styles() {
|
|
@@ -7577,7 +7527,7 @@ class AuroHelpText extends LitElement {
|
|
|
7577
7527
|
|
|
7578
7528
|
var helpTextVersion = '1.0.0';
|
|
7579
7529
|
|
|
7580
|
-
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;overflow:hidden;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:var(--ds-size-100, 0.5rem)}.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 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}: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 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px;text-overflow:ellipsis;white-space:nowrap}: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]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
|
|
7530
|
+
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}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.63)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.88)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[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{display:inline-block}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;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:var(--ds-size-100, 0.5rem)}.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 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) [auro-dropdown] label.withValue{line-height:20px}:host([layout*=emphasized]) [auro-dropdown] label.withValue{line-height:20px}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;font-weight:450;letter-spacing:0;line-height:24px;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) label.withValue{font-weight:450;letter-spacing:0;line-height:16px}:host([layout*=classic]) .value{height:auto;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]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
|
|
7581
7531
|
|
|
7582
7532
|
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
7583
7533
|
// See LICENSE in the project root for license information.
|
|
@@ -7999,11 +7949,31 @@ class AuroSelect extends AuroElement$3 {
|
|
|
7999
7949
|
get commonLabelClasses() {
|
|
8000
7950
|
return {
|
|
8001
7951
|
'is-disabled': this.disabled,
|
|
8002
|
-
'withValue': this.
|
|
8003
|
-
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
7952
|
+
'withValue': this.hasValue,
|
|
7953
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0,
|
|
7954
|
+
[this.labelFontClass]: true
|
|
8004
7955
|
};
|
|
8005
7956
|
}
|
|
8006
7957
|
|
|
7958
|
+
/**
|
|
7959
|
+
* Returns the font class for the label based on state.
|
|
7960
|
+
* @returns {string} - Returns the font class for the label.
|
|
7961
|
+
* @private
|
|
7962
|
+
*/
|
|
7963
|
+
get labelFontClass() {
|
|
7964
|
+
if (this.hasValue) return 'body-xs';
|
|
7965
|
+
return 'body-default';
|
|
7966
|
+
}
|
|
7967
|
+
|
|
7968
|
+
/**
|
|
7969
|
+
* Whether or not the component has a value.
|
|
7970
|
+
* @returns {boolean} - Returns true if the component has a value or placeholder.
|
|
7971
|
+
* @private
|
|
7972
|
+
*/
|
|
7973
|
+
get hasValue() {
|
|
7974
|
+
return this.placeholder || (this.value && this.value.length > 0); // eslint-disable-line no-extra-parens
|
|
7975
|
+
}
|
|
7976
|
+
|
|
8007
7977
|
/**
|
|
8008
7978
|
* Returns classmap configuration for wrapper elements in each layout.
|
|
8009
7979
|
* @private
|
|
@@ -8322,6 +8292,26 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8322
8292
|
}
|
|
8323
8293
|
}
|
|
8324
8294
|
|
|
8295
|
+
/**
|
|
8296
|
+
* Hides the dropdown bib if its open.
|
|
8297
|
+
* @returns {void}
|
|
8298
|
+
*/
|
|
8299
|
+
hideBib() {
|
|
8300
|
+
if (this.dropdown && this.dropdown.isPopoverVisible) {
|
|
8301
|
+
this.dropdown.hide();
|
|
8302
|
+
}
|
|
8303
|
+
}
|
|
8304
|
+
|
|
8305
|
+
/**
|
|
8306
|
+
* Shows the dropdown bib if there are options to show.
|
|
8307
|
+
* @returns {void}
|
|
8308
|
+
*/
|
|
8309
|
+
showBib() {
|
|
8310
|
+
if (this.dropdown && !this.dropdown.isPopoverVisible) {
|
|
8311
|
+
this.dropdown.show();
|
|
8312
|
+
}
|
|
8313
|
+
}
|
|
8314
|
+
|
|
8325
8315
|
/**
|
|
8326
8316
|
* Function to support @focusin event.
|
|
8327
8317
|
* @private
|
|
@@ -8487,16 +8477,6 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8487
8477
|
this.validation.reset(this);
|
|
8488
8478
|
}
|
|
8489
8479
|
|
|
8490
|
-
/**
|
|
8491
|
-
* Hide dropdownbib.
|
|
8492
|
-
* @private
|
|
8493
|
-
*/
|
|
8494
|
-
hideBib() {
|
|
8495
|
-
if (this.dropdown) {
|
|
8496
|
-
this.dropdown.hide();
|
|
8497
|
-
}
|
|
8498
|
-
}
|
|
8499
|
-
|
|
8500
8480
|
/**
|
|
8501
8481
|
* Validates value.
|
|
8502
8482
|
* @param {boolean} [force=false] - Whether to force validation.
|
|
@@ -8816,6 +8796,11 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8816
8796
|
'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
|
|
8817
8797
|
};
|
|
8818
8798
|
|
|
8799
|
+
const valueClasses = {
|
|
8800
|
+
'value': true,
|
|
8801
|
+
'body-default': true
|
|
8802
|
+
};
|
|
8803
|
+
|
|
8819
8804
|
return html`
|
|
8820
8805
|
<div
|
|
8821
8806
|
class="${classMap(this.commonWrapperClasses)}"
|
|
@@ -8848,7 +8833,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8848
8833
|
<slot name="label"></slot>
|
|
8849
8834
|
${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
|
|
8850
8835
|
</label>
|
|
8851
|
-
<div class="
|
|
8836
|
+
<div class="${classMap(valueClasses)}" id="value"></div>
|
|
8852
8837
|
<div id="placeholder" class="${classMap(placeholderClass)}">
|
|
8853
8838
|
${this.placeholder}
|
|
8854
8839
|
</div>
|
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-pr806.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": {
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"devDependencies": {
|
|
64
64
|
"@aurodesignsystem/design-tokens": "^8.2.1",
|
|
65
65
|
"@aurodesignsystem/eslint-config": "^1.3.5",
|
|
66
|
-
"@aurodesignsystem/webcorestylesheets": "^10.0.
|
|
66
|
+
"@aurodesignsystem/webcorestylesheets": "^10.0.1",
|
|
67
67
|
"@commitlint/cli": "^19.8.1",
|
|
68
68
|
"@commitlint/config-conventional": "^19.8.1",
|
|
69
69
|
"@open-wc/testing": "^4.0.0",
|
|
File without changes
|