@aurodesignsystem-dev/auro-formkit 0.0.0-pr753.0 → 0.0.0-pr754.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/checkbox/demo/api.html +10 -16
- package/components/checkbox/demo/api.min.js +2 -2
- package/components/checkbox/demo/index.html +10 -16
- package/components/checkbox/demo/index.min.js +2 -2
- package/components/checkbox/demo/readme.html +9 -16
- package/components/checkbox/dist/index.js +2 -2
- package/components/checkbox/dist/registered.js +2 -2
- package/components/combobox/demo/api.min.js +36 -12
- package/components/combobox/demo/index.min.js +36 -12
- package/components/combobox/dist/index.js +1 -1
- package/components/combobox/dist/registered.js +1 -1
- package/components/counter/demo/api.min.js +1 -1
- package/components/counter/demo/index.min.js +1 -1
- package/components/counter/dist/index.js +1 -1
- package/components/counter/dist/registered.js +1 -1
- package/components/datepicker/demo/api.min.js +1 -1
- package/components/datepicker/demo/index.min.js +1 -1
- package/components/datepicker/dist/index.js +1 -1
- package/components/datepicker/dist/registered.js +1 -1
- package/components/dropdown/demo/api.min.js +1 -1
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/menu/demo/api.md +15 -14
- package/components/menu/demo/api.min.js +35 -11
- package/components/menu/demo/index.min.js +35 -11
- package/components/menu/dist/auro-menu.d.ts +12 -2
- package/components/menu/dist/index.js +35 -11
- package/components/menu/dist/registered.js +35 -11
- package/components/select/demo/api.md +34 -36
- package/components/select/demo/api.min.js +75 -192
- package/components/select/demo/index.min.js +75 -192
- package/components/select/dist/auro-select.d.ts +24 -6
- package/components/select/dist/index.js +40 -181
- package/components/select/dist/registered.js +40 -181
- package/package.json +24 -24
|
@@ -225,7 +225,6 @@ function dispatchMenuEvent(element, eventName, detail = null) {
|
|
|
225
225
|
* @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
|
|
226
226
|
* @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
|
|
227
227
|
* @attr {boolean} multiselect - When true, the selected option can be multiple options.
|
|
228
|
-
* @attr {String|Array<string>} value - Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings.
|
|
229
228
|
* @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
|
|
230
229
|
* @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
|
|
231
230
|
* @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
|
|
@@ -338,9 +337,14 @@ class AuroMenu extends AuroElement$1 {
|
|
|
338
337
|
reflect: true,
|
|
339
338
|
attribute: 'multiselect'
|
|
340
339
|
},
|
|
340
|
+
|
|
341
|
+
/**
|
|
342
|
+
* Value selected for the component.
|
|
343
|
+
*/
|
|
341
344
|
value: {
|
|
342
|
-
|
|
343
|
-
|
|
345
|
+
type: String,
|
|
346
|
+
reflect: true,
|
|
347
|
+
attribute: 'value'
|
|
344
348
|
},
|
|
345
349
|
|
|
346
350
|
/**
|
|
@@ -375,6 +379,24 @@ class AuroMenu extends AuroElement$1 {
|
|
|
375
379
|
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroMenu);
|
|
376
380
|
}
|
|
377
381
|
|
|
382
|
+
/**
|
|
383
|
+
* Formatted value based on `multiSelect` state.
|
|
384
|
+
* Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
|
|
385
|
+
* @returns {String|Array<String>}
|
|
386
|
+
*/
|
|
387
|
+
get formattedValue() {
|
|
388
|
+
if (this.multiSelect) {
|
|
389
|
+
if (!this.value) {
|
|
390
|
+
return undefined;
|
|
391
|
+
}
|
|
392
|
+
if (this.value.startsWith("[")) {
|
|
393
|
+
return JSON.parse(this.value);
|
|
394
|
+
}
|
|
395
|
+
return [this.value];
|
|
396
|
+
}
|
|
397
|
+
return this.value;
|
|
398
|
+
}
|
|
399
|
+
|
|
378
400
|
// Lifecycle Methods
|
|
379
401
|
|
|
380
402
|
connectedCallback() {
|
|
@@ -417,7 +439,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
417
439
|
updated(changedProperties) {
|
|
418
440
|
super.updated(changedProperties);
|
|
419
441
|
|
|
420
|
-
if (changedProperties.has('multiSelect')) {
|
|
442
|
+
if (changedProperties.has('multiSelect') && !changedProperties.has("value")) {
|
|
421
443
|
// Reset selection if multiSelect mode changes
|
|
422
444
|
this.clearSelection();
|
|
423
445
|
}
|
|
@@ -431,7 +453,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
431
453
|
} else {
|
|
432
454
|
if (this.multiSelect) {
|
|
433
455
|
// In multiselect mode, this.value should be an array of strings
|
|
434
|
-
const valueArray =
|
|
456
|
+
const valueArray = this.formattedValue;
|
|
435
457
|
const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
|
|
436
458
|
|
|
437
459
|
this.optionSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
|
|
@@ -598,14 +620,14 @@ class AuroMenu extends AuroElement$1 {
|
|
|
598
620
|
*/
|
|
599
621
|
handleSelectState(option) {
|
|
600
622
|
if (this.multiSelect) {
|
|
601
|
-
const currentValue = this.
|
|
623
|
+
const currentValue = this.formattedValue || [];
|
|
602
624
|
const currentSelected = this.optionSelected || [];
|
|
603
625
|
|
|
604
626
|
if (!currentValue.includes(option.value)) {
|
|
605
|
-
this.value = [
|
|
627
|
+
this.value = JSON.stringify([
|
|
606
628
|
...currentValue,
|
|
607
629
|
option.value
|
|
608
|
-
];
|
|
630
|
+
]);
|
|
609
631
|
}
|
|
610
632
|
if (!currentSelected.includes(option)) {
|
|
611
633
|
this.optionSelected = [
|
|
@@ -628,13 +650,15 @@ class AuroMenu extends AuroElement$1 {
|
|
|
628
650
|
* @param {HTMLElement} option - The menuoption to be deselected.
|
|
629
651
|
*/
|
|
630
652
|
handleDeselectState(option) {
|
|
631
|
-
if (this.multiSelect
|
|
653
|
+
if (this.multiSelect) {
|
|
632
654
|
// Remove this option from array
|
|
633
|
-
|
|
655
|
+
const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
|
|
634
656
|
|
|
635
657
|
// If array is empty after removal, set back to undefined
|
|
636
|
-
if (
|
|
658
|
+
if (newFormattedValue && newFormattedValue.length === 0) {
|
|
637
659
|
this.value = undefined;
|
|
660
|
+
} else {
|
|
661
|
+
this.value = JSON.stringify(newFormattedValue);
|
|
638
662
|
}
|
|
639
663
|
|
|
640
664
|
this.optionSelected = this.optionSelected.filter((val) => val !== option);
|
|
@@ -14,44 +14,42 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
|
|
|
14
14
|
|
|
15
15
|
## Properties
|
|
16
16
|
|
|
17
|
-
| Property | Attribute | Type | Default | Description |
|
|
18
|
-
|
|
19
|
-
| [autoPlacement](#autoPlacement) | `autoPlacement` | `boolean` | "false" | If declared, bib's position will be automatically calculated where to appear. |
|
|
20
|
-
| [autocomplete](#autocomplete) | `autocomplete` | `string` | | If declared, sets the autocomplete attribute for the select element. |
|
|
21
|
-
| [disabled](#disabled) | `disabled` | `boolean` | | When attribute is present, element shows disabled state. |
|
|
22
|
-
| [error](#error) | `error` | `string` | | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
|
|
23
|
-
| [forceDisplayValue](#forceDisplayValue) | `forceDisplayValue` | `boolean` | false | If declared, the label and value will be visually hidden and the displayValue will render 100% of the time. |
|
|
24
|
-
| [
|
|
25
|
-
| [
|
|
26
|
-
| [
|
|
27
|
-
| [
|
|
28
|
-
| [
|
|
29
|
-
| [
|
|
30
|
-
| [
|
|
31
|
-
| [
|
|
32
|
-
| [
|
|
33
|
-
| [
|
|
34
|
-
| [
|
|
35
|
-
| [
|
|
36
|
-
| [
|
|
37
|
-
| [
|
|
38
|
-
| [
|
|
39
|
-
| [
|
|
40
|
-
| [
|
|
41
|
-
| [
|
|
42
|
-
| [
|
|
43
|
-
| [
|
|
44
|
-
| [
|
|
17
|
+
| Property | Attribute | Modifiers | Type | Default | Description |
|
|
18
|
+
|---------------------------------|---------------------------------|-----------|-----------------------------------|----------------|--------------------------------------------------|
|
|
19
|
+
| [autoPlacement](#autoPlacement) | `autoPlacement` | | `boolean` | "false" | If declared, bib's position will be automatically calculated where to appear. |
|
|
20
|
+
| [autocomplete](#autocomplete) | `autocomplete` | | `string` | | If declared, sets the autocomplete attribute for the select element. |
|
|
21
|
+
| [disabled](#disabled) | `disabled` | | `boolean` | | When attribute is present, element shows disabled state. |
|
|
22
|
+
| [error](#error) | `error` | | `string` | | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
|
|
23
|
+
| [forceDisplayValue](#forceDisplayValue) | `forceDisplayValue` | | `boolean` | false | If declared, the label and value will be visually hidden and the displayValue will render 100% of the time. |
|
|
24
|
+
| [formattedValue](#formattedValue) | | readonly | `string \| string[]` | | Formatted value based on `multiSelect` state.<br />Default type is `String`, changing to `Array<String>` when `multiSelect` is true. |
|
|
25
|
+
| [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | | `string` | "sm" | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
|
|
26
|
+
| [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | | `boolean` | | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
|
|
27
|
+
| [layout](#layout) | | | `string` | "snowflake" | |
|
|
28
|
+
| [matchWidth](#matchWidth) | `matchWidth` | | `boolean` | false | If declared, the popover and trigger will be set to the same width. |
|
|
29
|
+
| [multiSelect](#multiSelect) | `multiselect` | | `boolean` | | Sets multi-select mode, allowing multiple options to be selected at once. |
|
|
30
|
+
| [name](#name) | `name` | | `string` | | The name for the select element. |
|
|
31
|
+
| [noCheckmark](#noCheckmark) | `noCheckmark` | | `boolean` | | When true, checkmark on selected option will no longer be present. |
|
|
32
|
+
| [noFlip](#noFlip) | `noFlip` | | `boolean` | "false" | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
|
|
33
|
+
| [noValidate](#noValidate) | `noValidate` | | `boolean` | | If set, disables auto-validation on blur. |
|
|
34
|
+
| [offset](#offset) | `offset` | | `number` | "0" | Gap between the trigger element and bib. |
|
|
35
|
+
| [onDark](#onDark) | `onDark` | | `boolean` | | If declared, onDark styles will be applied to the trigger. |
|
|
36
|
+
| [optionSelected](#optionSelected) | `optionSelected` | | `HTMLElement\|Array<HTMLElement>` | | Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true. |
|
|
37
|
+
| [placement](#placement) | `placement` | | `string` | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end". |
|
|
38
|
+
| [required](#required) | `required` | | `boolean` | | Populates the `required` attribute on the element. Used for client-side validation. |
|
|
39
|
+
| [setCustomValidity](#setCustomValidity) | `setCustomValidity` | | `string` | | Sets a custom help text message to display for all validityStates. |
|
|
40
|
+
| [setCustomValidityCustomError](#setCustomValidityCustomError) | `setCustomValidityCustomError` | | `string` | | Custom help text message to display when validity = `customError`. |
|
|
41
|
+
| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | | `string` | | Custom help text message to display when validity = `valueMissing`. |
|
|
42
|
+
| [shape](#shape) | | | `string` | "snowflake" | |
|
|
43
|
+
| [size](#size) | | | `string` | "xl" | |
|
|
44
|
+
| [validity](#validity) | `validity` | | `string` | | Specifies the `validityState` this element is in. |
|
|
45
|
+
| [value](#value) | `value` | | `string` | | Value selected for the component. |
|
|
45
46
|
|
|
46
47
|
## Methods
|
|
47
48
|
|
|
48
|
-
| Method
|
|
49
|
-
|
|
50
|
-
| [
|
|
51
|
-
| [
|
|
52
|
-
| [renderNativeSelect](#renderNativeSelect) | `(): TemplateResult` | |
|
|
53
|
-
| [reset](#reset) | `(): void` | Resets component to initial state. |
|
|
54
|
-
| [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
|
|
49
|
+
| Method | Type | Description |
|
|
50
|
+
|------------|----------------------------------------|--------------------------------------------------|
|
|
51
|
+
| [reset](#reset) | `(): void` | Resets component to initial state. |
|
|
52
|
+
| [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
|
|
55
53
|
|
|
56
54
|
## Events
|
|
57
55
|
|
|
@@ -59,7 +57,7 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
|
|
|
59
57
|
|-----------------------------|--------------------------------------------------|--------------------------------------------------|
|
|
60
58
|
| `auroFormElement-validated` | | Notifies that the `validity` and `errorMessage` values have changed. |
|
|
61
59
|
| `auroSelect-valueSet` | `CustomEvent<any>` | Notifies that the component has a new value set. |
|
|
62
|
-
| [input](#input) | `CustomEvent<{ optionSelected: any; value:
|
|
60
|
+
| [input](#input) | `CustomEvent<{ optionSelected: any; value: string \| string[]; }>` | Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object. |
|
|
63
61
|
|
|
64
62
|
## Slots
|
|
65
63
|
|