@aurodesignsystem-dev/auro-formkit 0.0.0-pr1052.7 → 0.0.0-pr1052.9

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.
Files changed (7) hide show
  1. package/components/combobox/demo/api.md +36 -35
  2. package/components/combobox/demo/api.min.js +17 -6
  3. package/components/combobox/demo/index.min.js +17 -6
  4. package/components/combobox/dist/auro-combobox.d.ts +8 -4
  5. package/components/combobox/dist/index.js +17 -6
  6. package/components/combobox/dist/registered.js +17 -6
  7. package/package.json +1 -1
package/components/combobox/demo/api.md CHANGED
@@ -5,41 +5,42 @@
5
5
 
6
6
  ## Properties
7
7
 
8
- | Property | Attribute | Type | Default | Description |
9
- |---------------------------------|---------------------------------|-----------------------|----------------------------|--------------------------------------------------|
10
- | [autoPlacement](#autoPlacement) | `autoPlacement` | `boolean` | false | If declared, bib's position will be automatically calculated where to appear. |
11
- | [autocomplete](#autocomplete) | `autocomplete` | `string` | "false" | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
12
- | [checkmark](#checkmark) | `checkmark` | `boolean` | false | When attribute is present auro-menu will apply check marks to selected options. |
13
- | [disabled](#disabled) | `disabled` | `boolean` | false | If set, disables the combobox. |
14
- | [dvInputOnly](#dvInputOnly) | `dvInputOnly` | `boolean` | false | If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked. |
15
- | [error](#error) | `error` | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
16
- | [format](#format) | `format` | `string` | | Specifies the input mask format. |
17
- | [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. |
18
- | [inputValue](#inputValue) | | `string \| undefined` | | Returns the current value of the input element within the combobox. |
19
- | [inputmode](#inputmode) | `inputmode` | `string` | | Exposes inputmode attribute for input. |
20
- | [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean` | | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
21
- | [layout](#layout) | | `string` | "classic" | |
22
- | [matchWidth](#matchWidth) | `matchWidth` | `boolean` | true | If declared, the popover and trigger will be set to the same width. |
23
- | [msgSelectionMissing](#msgSelectionMissing) | | `string` | "Please select an option." | |
24
- | [noFilter](#noFilter) | `noFilter` | `boolean` | false | If set, combobox will not filter menuoptions based in input. |
25
- | [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`. |
26
- | [noValidate](#noValidate) | `noValidate` | `boolean` | false | If set, disables auto-validation on blur. |
27
- | [offset](#offset) | `offset` | `number` | "0" | Gap between the trigger element and bib. |
28
- | [onDark](#onDark) | `onDark` | `boolean` | | If declared, onDark styles will be applied to the trigger. |
29
- | [optionSelected](#optionSelected) | `optionSelected` | `HTMLElement` | | Specifies the current selected option. |
30
- | [persistInput](#persistInput) | `persistInput` | `Boolean` | false | If declared, selecting a menu option will not change the input value. By doing so,<br />the current menu filter will be preserved and the user can continue from their last<br />filter state. It is recommended to use this in combination with the `displayValue` slot. |
31
- | [placeholder](#placeholder) | `placeholder` | `string` | | Define custom placeholder text, only supported by date input formats. |
32
- | [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" |
33
- | [required](#required) | `required` | `boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. |
34
- | [setCustomValidity](#setCustomValidity) | `setCustomValidity` | `string` | | Sets a custom help text message to display for all validityStates. |
35
- | [setCustomValidityCustomError](#setCustomValidityCustomError) | `setCustomValidityCustomError` | `string` | | Custom help text message to display when validity = `customError`. |
36
- | [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `string` | | Custom help text message to display when validity = `valueMissing`. |
37
- | [shape](#shape) | | `string` | "classic" | |
38
- | [size](#size) | | `string` | "xl" | |
39
- | [triggerIcon](#triggerIcon) | `triggerIcon` | `boolean` | false | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
40
- | [type](#type) | `type` | `string` | | Applies the defined value as the type attribute on auro-input. |
41
- | [validity](#validity) | `validity` | `string` | | Specifies the `validityState` this element is in. |
42
- | [value](#value) | `value` | `string` | "undefined" | Value selected for the dropdown menu. |
8
+ | Property | Attribute | Modifiers | Type | Default | Description |
9
+ |---------------------------------|---------------------------------|-----------|-----------------------|----------------------------|--------------------------------------------------|
10
+ | [autoPlacement](#autoPlacement) | `autoPlacement` | | `boolean` | false | If declared, bib's position will be automatically calculated where to appear. |
11
+ | [autocomplete](#autocomplete) | `autocomplete` | | `string` | "false" | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
12
+ | [checkmark](#checkmark) | `checkmark` | | `boolean` | false | When attribute is present auro-menu will apply check marks to selected options. |
13
+ | [disabled](#disabled) | `disabled` | | `boolean` | false | If set, disables the combobox. |
14
+ | [dvInputOnly](#dvInputOnly) | `dvInputOnly` | | `boolean` | false | If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked. |
15
+ | [error](#error) | `error` | | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
16
+ | [format](#format) | `format` | | `string` | | Specifies the input mask format. |
17
+ | [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. |
18
+ | [inputValue](#inputValue) | | readonly | `string \| undefined` | | Returns the current value of the input element within the combobox. |
19
+ | [inputmode](#inputmode) | `inputmode` | | `string` | | Exposes inputmode attribute for input. |
20
+ | [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | | `boolean` | | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
21
+ | [layout](#layout) | | | `string` | "classic" | |
22
+ | [matchWidth](#matchWidth) | `matchWidth` | | `boolean` | true | If declared, the popover and trigger will be set to the same width. |
23
+ | [msgSelectionMissing](#msgSelectionMissing) | | | `string` | "Please select an option." | |
24
+ | [noFilter](#noFilter) | `noFilter` | | `boolean` | false | If set, combobox will not filter menuoptions based in input. |
25
+ | [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`. |
26
+ | [noValidate](#noValidate) | `noValidate` | | `boolean` | false | If set, disables auto-validation on blur. |
27
+ | [offset](#offset) | `offset` | | `number` | "0" | Gap between the trigger element and bib. |
28
+ | [onDark](#onDark) | `onDark` | | `boolean` | | If declared, onDark styles will be applied to the trigger. |
29
+ | [optionSelected](#optionSelected) | `optionSelected` | | `HTMLElement` | | Specifies the current selected option. |
30
+ | [persistInput](#persistInput) | `persistInput` | | `Boolean` | false | If declared, selecting a menu option will not change the input value. By doing so,<br />the current menu filter will be preserved and the user can continue from their last<br />filter state. It is recommended to use this in combination with the `displayValue` slot. |
31
+ | [placeholder](#placeholder) | `placeholder` | | `string` | | Define custom placeholder text, only supported by date input formats. |
32
+ | [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" |
33
+ | [required](#required) | `required` | | `boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. |
34
+ | [setCustomValidity](#setCustomValidity) | `setCustomValidity` | | `string` | | Sets a custom help text message to display for all validityStates. |
35
+ | [setCustomValidityCustomError](#setCustomValidityCustomError) | `setCustomValidityCustomError` | | `string` | | Custom help text message to display when validity = `customError`. |
36
+ | [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | | `string` | | Custom help text message to display when validity = `valueMissing`. |
37
+ | [shape](#shape) | | | `string` | "classic" | |
38
+ | [size](#size) | | | `string` | "xl" | |
39
+ | [triggerIcon](#triggerIcon) | `triggerIcon` | | `boolean` | false | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
40
+ | [type](#type) | `type` | | `string` | | Applies the defined value as the type attribute on auro-input. |
41
+ | [typedValue](#typedValue) | `typedValue` | | `string` | "undefined" | Specifies the value of the input element within the combobox. |
42
+ | [validity](#validity) | `validity` | | `string` | | Specifies the `validityState` this element is in. |
43
+ | [value](#value) | `value` | | `string` | "undefined" | Value selected for the dropdown menu. |
43
44
 
44
45
  ## Methods
45
46
 
package/components/combobox/demo/api.min.js CHANGED
@@ -16202,6 +16202,7 @@ class AuroCombobox extends AuroElement$1 {
16202
16202
  this.persistInput = false;
16203
16203
  this.required = false;
16204
16204
  this.value = undefined;
16205
+ this.typedValue = undefined;
16205
16206
 
16206
16207
  // Defaults that effect the overall layout of the combobox
16207
16208
  this.checkmark = false;
@@ -16500,6 +16501,14 @@ class AuroCombobox extends AuroElement$1 {
16500
16501
  reflect: true
16501
16502
  },
16502
16503
 
16504
+ /**
16505
+ * Specifies the value of the input element within the combobox.
16506
+ */
16507
+ typedValue: {
16508
+ type: String,
16509
+ reflect: true
16510
+ },
16511
+
16503
16512
  /**
16504
16513
  * Specifies the `validityState` this element is in.
16505
16514
  */
@@ -16570,12 +16579,12 @@ class AuroCombobox extends AuroElement$1 {
16570
16579
  return this.input.value;
16571
16580
  }
16572
16581
 
16573
- /**
16574
- * Sets the value of the input element within the combobox.
16575
- */
16576
- set inputValue(value) {
16577
- this.input.value = value;
16578
- }
16582
+ // /**
16583
+ // * Sets the value of the input element within the combobox.
16584
+ // */
16585
+ // set inputValue(value) {
16586
+ // this.input.value = value;
16587
+ // }
16579
16588
 
16580
16589
  /**
16581
16590
  * Checks if the element is valid.
@@ -17381,6 +17390,7 @@ class AuroCombobox extends AuroElement$1 {
17381
17390
  .inputmode="${this.inputmode}"
17382
17391
  .placeholder="${this.placeholder}"
17383
17392
  .type="${this.type}"
17393
+ .value="${this.typedValue}"
17384
17394
  ?disabled="${this.disabled}"
17385
17395
  ?icon="${this.triggerIcon}"
17386
17396
  ?dvInputOnly="${this.dvInputOnly}"
@@ -17415,6 +17425,7 @@ class AuroCombobox extends AuroElement$1 {
17415
17425
  .inputmode="${this.inputmode}"
17416
17426
  .placeholder="${this.placeholder}"
17417
17427
  .type="${this.type}"
17428
+ .value="${this.typedValue}"
17418
17429
  ?disabled="${this.disabled}"
17419
17430
  ?icon="${this.triggerIcon}"
17420
17431
  ?required="${this.required}"
package/components/combobox/demo/index.min.js CHANGED
@@ -16050,6 +16050,7 @@ class AuroCombobox extends AuroElement$1 {
16050
16050
  this.persistInput = false;
16051
16051
  this.required = false;
16052
16052
  this.value = undefined;
16053
+ this.typedValue = undefined;
16053
16054
 
16054
16055
  // Defaults that effect the overall layout of the combobox
16055
16056
  this.checkmark = false;
@@ -16348,6 +16349,14 @@ class AuroCombobox extends AuroElement$1 {
16348
16349
  reflect: true
16349
16350
  },
16350
16351
 
16352
+ /**
16353
+ * Specifies the value of the input element within the combobox.
16354
+ */
16355
+ typedValue: {
16356
+ type: String,
16357
+ reflect: true
16358
+ },
16359
+
16351
16360
  /**
16352
16361
  * Specifies the `validityState` this element is in.
16353
16362
  */
@@ -16418,12 +16427,12 @@ class AuroCombobox extends AuroElement$1 {
16418
16427
  return this.input.value;
16419
16428
  }
16420
16429
 
16421
- /**
16422
- * Sets the value of the input element within the combobox.
16423
- */
16424
- set inputValue(value) {
16425
- this.input.value = value;
16426
- }
16430
+ // /**
16431
+ // * Sets the value of the input element within the combobox.
16432
+ // */
16433
+ // set inputValue(value) {
16434
+ // this.input.value = value;
16435
+ // }
16427
16436
 
16428
16437
  /**
16429
16438
  * Checks if the element is valid.
@@ -17229,6 +17238,7 @@ class AuroCombobox extends AuroElement$1 {
17229
17238
  .inputmode="${this.inputmode}"
17230
17239
  .placeholder="${this.placeholder}"
17231
17240
  .type="${this.type}"
17241
+ .value="${this.typedValue}"
17232
17242
  ?disabled="${this.disabled}"
17233
17243
  ?icon="${this.triggerIcon}"
17234
17244
  ?dvInputOnly="${this.dvInputOnly}"
@@ -17263,6 +17273,7 @@ class AuroCombobox extends AuroElement$1 {
17263
17273
  .inputmode="${this.inputmode}"
17264
17274
  .placeholder="${this.placeholder}"
17265
17275
  .type="${this.type}"
17276
+ .value="${this.typedValue}"
17266
17277
  ?disabled="${this.disabled}"
17267
17278
  ?icon="${this.triggerIcon}"
17268
17279
  ?required="${this.required}"
package/components/combobox/dist/auro-combobox.d.ts CHANGED
@@ -220,6 +220,13 @@ export class AuroCombobox extends AuroElement {
220
220
  type: StringConstructor;
221
221
  reflect: boolean;
222
222
  };
223
+ /**
224
+ * Specifies the value of the input element within the combobox.
225
+ */
226
+ typedValue: {
227
+ type: StringConstructor;
228
+ reflect: boolean;
229
+ };
223
230
  /**
224
231
  * Specifies the `validityState` this element is in.
225
232
  */
@@ -281,6 +288,7 @@ export class AuroCombobox extends AuroElement {
281
288
  persistInput: boolean;
282
289
  required: boolean;
283
290
  value: any;
291
+ typedValue: any;
284
292
  checkmark: boolean;
285
293
  dvInputOnly: boolean;
286
294
  fullscreenBreakpoint: string;
@@ -313,10 +321,6 @@ export class AuroCombobox extends AuroElement {
313
321
  touched: boolean;
314
322
  validation: AuroFormValidation;
315
323
  validity: any;
316
- /**
317
- * Sets the value of the input element within the combobox.
318
- */
319
- set inputValue(value: string | undefined);
320
324
  /**
321
325
  * Returns the current value of the input element within the combobox.
322
326
  * @returns {string|undefined} The value of the input element, or undefined if the input is not present.
package/components/combobox/dist/index.js CHANGED
@@ -15968,6 +15968,7 @@ class AuroCombobox extends AuroElement {
15968
15968
  this.persistInput = false;
15969
15969
  this.required = false;
15970
15970
  this.value = undefined;
15971
+ this.typedValue = undefined;
15971
15972
 
15972
15973
  // Defaults that effect the overall layout of the combobox
15973
15974
  this.checkmark = false;
@@ -16266,6 +16267,14 @@ class AuroCombobox extends AuroElement {
16266
16267
  reflect: true
16267
16268
  },
16268
16269
 
16270
+ /**
16271
+ * Specifies the value of the input element within the combobox.
16272
+ */
16273
+ typedValue: {
16274
+ type: String,
16275
+ reflect: true
16276
+ },
16277
+
16269
16278
  /**
16270
16279
  * Specifies the `validityState` this element is in.
16271
16280
  */
@@ -16336,12 +16345,12 @@ class AuroCombobox extends AuroElement {
16336
16345
  return this.input.value;
16337
16346
  }
16338
16347
 
16339
- /**
16340
- * Sets the value of the input element within the combobox.
16341
- */
16342
- set inputValue(value) {
16343
- this.input.value = value;
16344
- }
16348
+ // /**
16349
+ // * Sets the value of the input element within the combobox.
16350
+ // */
16351
+ // set inputValue(value) {
16352
+ // this.input.value = value;
16353
+ // }
16345
16354
 
16346
16355
  /**
16347
16356
  * Checks if the element is valid.
@@ -17147,6 +17156,7 @@ class AuroCombobox extends AuroElement {
17147
17156
  .inputmode="${this.inputmode}"
17148
17157
  .placeholder="${this.placeholder}"
17149
17158
  .type="${this.type}"
17159
+ .value="${this.typedValue}"
17150
17160
  ?disabled="${this.disabled}"
17151
17161
  ?icon="${this.triggerIcon}"
17152
17162
  ?dvInputOnly="${this.dvInputOnly}"
@@ -17181,6 +17191,7 @@ class AuroCombobox extends AuroElement {
17181
17191
  .inputmode="${this.inputmode}"
17182
17192
  .placeholder="${this.placeholder}"
17183
17193
  .type="${this.type}"
17194
+ .value="${this.typedValue}"
17184
17195
  ?disabled="${this.disabled}"
17185
17196
  ?icon="${this.triggerIcon}"
17186
17197
  ?required="${this.required}"
package/components/combobox/dist/registered.js CHANGED
@@ -15968,6 +15968,7 @@ class AuroCombobox extends AuroElement {
15968
15968
  this.persistInput = false;
15969
15969
  this.required = false;
15970
15970
  this.value = undefined;
15971
+ this.typedValue = undefined;
15971
15972
 
15972
15973
  // Defaults that effect the overall layout of the combobox
15973
15974
  this.checkmark = false;
@@ -16266,6 +16267,14 @@ class AuroCombobox extends AuroElement {
16266
16267
  reflect: true
16267
16268
  },
16268
16269
 
16270
+ /**
16271
+ * Specifies the value of the input element within the combobox.
16272
+ */
16273
+ typedValue: {
16274
+ type: String,
16275
+ reflect: true
16276
+ },
16277
+
16269
16278
  /**
16270
16279
  * Specifies the `validityState` this element is in.
16271
16280
  */
@@ -16336,12 +16345,12 @@ class AuroCombobox extends AuroElement {
16336
16345
  return this.input.value;
16337
16346
  }
16338
16347
 
16339
- /**
16340
- * Sets the value of the input element within the combobox.
16341
- */
16342
- set inputValue(value) {
16343
- this.input.value = value;
16344
- }
16348
+ // /**
16349
+ // * Sets the value of the input element within the combobox.
16350
+ // */
16351
+ // set inputValue(value) {
16352
+ // this.input.value = value;
16353
+ // }
16345
16354
 
16346
16355
  /**
16347
16356
  * Checks if the element is valid.
@@ -17147,6 +17156,7 @@ class AuroCombobox extends AuroElement {
17147
17156
  .inputmode="${this.inputmode}"
17148
17157
  .placeholder="${this.placeholder}"
17149
17158
  .type="${this.type}"
17159
+ .value="${this.typedValue}"
17150
17160
  ?disabled="${this.disabled}"
17151
17161
  ?icon="${this.triggerIcon}"
17152
17162
  ?dvInputOnly="${this.dvInputOnly}"
@@ -17181,6 +17191,7 @@ class AuroCombobox extends AuroElement {
17181
17191
  .inputmode="${this.inputmode}"
17182
17192
  .placeholder="${this.placeholder}"
17183
17193
  .type="${this.type}"
17194
+ .value="${this.typedValue}"
17184
17195
  ?disabled="${this.disabled}"
17185
17196
  ?icon="${this.triggerIcon}"
17186
17197
  ?required="${this.required}"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aurodesignsystem-dev/auro-formkit",
3
- "version": "0.0.0-pr1052.7",
3
+ "version": "0.0.0-pr1052.9",
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": {