@aurodesignsystem-dev/auro-formkit 0.0.0-pr1628.4 → 0.0.0-pr1628.6
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/customize.min.js +1 -1
- package/components/checkbox/demo/getting-started.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/customize.min.js +29 -14
- package/components/combobox/demo/getting-started.min.js +29 -14
- package/components/combobox/demo/index.min.js +29 -14
- package/components/combobox/dist/index.js +19 -5
- package/components/combobox/dist/registered.js +19 -5
- package/components/counter/demo/customize.min.js +2 -2
- package/components/counter/demo/getting-started.min.js +2 -2
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/dist/index.js +2 -2
- package/components/counter/dist/registered.js +2 -2
- package/components/datepicker/demo/customize.min.js +32 -5
- package/components/datepicker/demo/getting-started.min.js +32 -5
- package/components/datepicker/demo/index.min.js +32 -5
- package/components/datepicker/dist/index.js +32 -5
- package/components/datepicker/dist/registered.js +32 -5
- package/components/dropdown/demo/customize.min.js +1 -1
- package/components/dropdown/demo/getting-started.min.js +18 -4
- 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/form/demo/api.md +6 -6
- package/components/form/demo/customize.min.js +85 -29
- package/components/form/demo/getting-started.min.js +85 -29
- package/components/form/demo/index.md +2 -2
- package/components/form/demo/index.min.js +85 -29
- package/components/form/demo/registerDemoDeps.min.js +84 -28
- package/components/form/demo/voiceover.md +1 -1
- package/components/form/demo/why-form.md +1 -1
- package/components/form/dist/auro-form.d.ts +1 -1
- package/components/form/dist/index.js +1 -1
- package/components/form/dist/registered.js +1 -1
- package/components/input/demo/api.md +58 -58
- package/components/input/demo/customize.md +7 -7
- package/components/input/demo/customize.min.js +17 -3
- package/components/input/demo/getting-started.md +3 -3
- package/components/input/demo/getting-started.min.js +17 -3
- package/components/input/demo/index.min.js +17 -3
- package/components/input/demo/why-input.md +1 -1
- package/components/input/dist/base-input.d.ts +3 -2
- package/components/input/dist/index.js +17 -3
- package/components/input/dist/registered.js +17 -3
- package/components/input/dist/utilities.d.ts +11 -0
- package/components/menu/demo/accessibility.md +1 -1
- package/components/menu/demo/customize.md +1 -1
- package/components/menu/demo/design.md +1 -1
- package/components/menu/demo/getting-started.md +1 -1
- package/components/menu/demo/index.min.js +10 -9
- package/components/menu/demo/keyboard-behavior.md +1 -1
- package/components/menu/demo/voiceover.md +1 -1
- package/components/menu/dist/auro-menu.d.ts +9 -8
- package/components/menu/dist/auro-menuoption.d.ts +1 -1
- package/components/menu/dist/index.js +10 -9
- package/components/menu/dist/registered.js +10 -9
- package/components/radio/demo/customize.min.js +1 -1
- package/components/radio/demo/getting-started.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/customize.min.js +12 -11
- package/components/select/demo/getting-started.min.js +12 -11
- package/components/select/demo/index.min.js +12 -11
- package/components/select/dist/index.js +2 -2
- package/components/select/dist/registered.js +2 -2
- package/custom-elements.json +25 -16
- package/package.json +1 -1
|
@@ -20,64 +20,64 @@ A single-line text field that lets people type a value, such as a name, email ad
|
|
|
20
20
|
|
|
21
21
|
### Properties and attributes
|
|
22
22
|
|
|
23
|
-
| Properties | Attributes | Modifiers | Type | Default | Category | Relevant when | Description
|
|
24
|
-
| -------------------------------- | -------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------- | ----------- | -------- | ------------------------ |
|
|
25
|
-
| a11yActivedescendant | a11yactivedescendant | | string | | a11y | | Sets the ID of the option screen readers announce as active while focus stays in the input,<br>such as the highlighted option in a list (the inner `<input>` element's `aria-activedescendant`).
|
|
26
|
-
| a11yControls | a11ycontrols | | string | | a11y | | Sets the ID of the element the input controls, such as a combobox's list of options<br>(the inner `<input>` element's `aria-controls`).
|
|
27
|
-
| a11yExpanded | a11yexpanded | | boolean | | a11y | | Tells screen readers that the element the input controls, such as a list of options, is open<br>(the inner `<input>` element's `aria-expanded`).
|
|
28
|
-
| a11yRole | a11yrole | | string | | a11y | | Sets the role screen readers announce for the inner `<input>` element, such as `combobox`<br>when the input is part of `auro-combobox` (the input's `role`).
|
|
29
|
-
| activeLabel | activelabel | | boolean | `false` | ui | `layout === 'classic'` | Keeps the label raised above the value, even when the field is empty and doesn't have focus.<br>Applies only to the `classic` layout; the emphasized and snowflake layouts always show the label inside the field.
|
|
30
|
-
| appearance | appearance | | `default` \| `inverse` | `default` | ui | | Sets the color scheme. Use `inverse` on dark backgrounds and `default` on light backgrounds.
|
|
31
|
-
| disabled | disabled | | boolean | `false` | ui | | Turns the input off. A disabled input is shown in a muted style, can't be edited or reached<br>with the keyboard, and doesn't show the clear button.
|
|
32
|
-
| dvInputOnly | dvinputonly | | boolean | `false` | ui | | Keeps the label visible while `displayValue` slot content is shown in place of the value.<br>Without it, the `displayValue` content hides both the label and the value.
|
|
33
|
-
| icon | icon | | boolean | `false` | ui | `type === 'credit-card'` | Shows a card icon left of the value that changes to the detected card brand, such as Visa, as the user types.<br>Applies only when `type="credit-card"`, and the emphasized layouts don't show it.
|
|
34
|
-
| layout | layout | | `classic` \| `emphasized` \| `emphasized-left` \| `emphasized-right` \| `snowflake` \| `snowflake-left` \| `snowflake-right` | `classic` | ui | | Sets how the label and value are arranged. `classic` raises the label above the value<br>when the field has focus or a value; the `emphasized` and `snowflake` layouts always show the label inside the field.
|
|
35
|
-
| nested | nested | | boolean | | ui | | Marks the input as placed inside another component, such as the trigger of `auro-dropdown`.<br>Does not currently change how the input looks or behaves; use `simple` to remove the border.
|
|
36
|
-
| placeholder | placeholder | | string | | ui | | Sets hint text shown in the empty field, such as `John Doe`.<br>When not set and `type="date"`, the input shows the date format, such as `MM/DD/YYYY`.
|
|
37
|
-
| shape | shape | | `box` \| `classic` \| `pill` \| `pill-left` \| `pill-right` \| `rounded` \| `snowflake` | `classic` | ui | | Sets the shape of the field's border. The emphasized layouts support `pill`, `pill-left
|
|
38
|
-
| simple | simple | | boolean | | ui | | Removes the field's border and background, such as for an input placed inside another component.
|
|
39
|
-
| size | size | | `xs` \| `sm` \| `md` \| `lg` \| `xl` | `lg` | ui | | Sets the field's size. The `classic` shape is the same height at every size, and the<br>emphasized layouts support only `xl`.
|
|
40
|
-
| onDark | ondark | | boolean | `false` | ui | | Deprecated: Use `appearance="inverse"` instead.<br>Styles the input for a dark background.
|
|
41
|
-
| autocapitalize | autocapitalize | | `off` \| `none` \| `on` \| `sentences` \| `words` \| `characters` | | behavior | | Sets whether mobile keyboards capitalize text as the user types, such as `words` for names<br>(the input's `autocapitalize`). Does not currently apply: the input clears this value on every<br>update, unless `spellcheck="false"`, which sets it to `none`.
|
|
42
|
-
| autocomplete | autocomplete | | string | | behavior | | Sets what the browser can suggest when filling in the field, such as `off` to turn off<br>autofill suggestions (the input's `autocomplete`). Only `autocomplete="off"` is currently supported.
|
|
43
|
-
| autocorrect | autocorrect | | `on` \| `off` | | behavior | | Sets whether Safari on iOS corrects words as the user types. Use `off` for names, codes, and<br>other text that isn't made of dictionary words. Always `off` when `spellcheck="false"`.
|
|
44
|
-
| customValidityTypeEmail | customvaliditytypeemail | | string | | behavior | `!noValidate` | Does not currently change any message. To set the error message for an invalid email address,<br>use `setCustomValidityForType`.
|
|
45
|
-
| error | error | | string | | behavior | | Shows an error that stays until you remove the attribute, and sets `validity` to `customError`.<br>The attribute value is the error message, unless `setCustomValidityCustomError` or `setCustomValidity` is set.
|
|
46
|
-
| errorMessage | errormessage | | string | | behavior | | Holds the error message shown below the field for the current `validity`.<br>Validation sets it, so read it instead of setting it.
|
|
47
|
-
| format | format | | string | | behavior | | Sets the pattern the value is formatted to as the user types, such as `mm/dd/yyyy` for a date or<br>`+1 (000) 000-0000` for a phone number. Outside dates, `0` stands for a digit, `a` for a letter, and `*` for any character.<br>For `type="date"`, it replaces the format that `locale` would set.
|
|
48
|
-
| hasFocus | | | boolean | | behavior | | Reports whether the input currently has focus. The input updates it, so read it instead of setting it.
|
|
49
|
-
| hasValue | | | boolean | `false` | behavior | | Reports whether the input currently has a value. The input updates it, so read it instead of setting it.
|
|
50
|
-
| id | id | | string | | behavior | | Sets a unique ID for the element, such as `email`. The inner `<input>` element uses this ID<br>followed by `-input`, such as `email-input`.
|
|
51
|
-
| inputmode | inputmode | | string | | behavior | | Sets which on-screen keyboard mobile devices show, such as `numeric` for digits only or `email`<br>(the input's `inputmode`). Defaults to `numeric` when `type` is `number`, `tel`, `credit-card`, or `date`.
|
|
52
|
-
| lang | lang | | string | | behavior | | Sets the language of the input's built-in help text and error messages, such as `es` for Spanish.<br>Only `es` changes the text; other values use English. When not set, the input follows the page's `lang`.
|
|
53
|
-
| locale | locale | | string | `en-US` | behavior | | Sets the region whose date format `type="date"` uses, such as `en-GB` for `dd/mm/yyyy`.<br>When not set, the input uses the nearest ancestor's `data-locale` attribute, or `en-US`.
|
|
54
|
-
| max | max | | string | `undefined` | behavior | | Sets the largest value allowed, such as `10` for a number or `2025-12-31` for a date.<br>Applies only when `type` is `number`, or `date` with a full date format; write dates in ISO format (`YYYY-MM-DD`).
|
|
55
|
-
| maxLength | maxlength | | number | `undefined` | behavior | | Sets the most characters the user can enter, as a whole number `0` or higher.<br>Don't set it when `type` is `credit-card`, `tel`, or `date`, because those types set their own length.
|
|
56
|
-
| maxObject | | readonly | Date \| undefined | | behavior | | Gets `max` as a `Date` object, or `undefined` when `max` isn't a valid ISO date (`YYYY-MM-DD`).
|
|
57
|
-
| min | min | | string | `undefined` | behavior | | Sets the smallest value allowed, such as `1` for a number or `2024-01-01` for a date.<br>Applies only when `type` is `number`, or `date` with a full date format; write dates in ISO format (`YYYY-MM-DD`).
|
|
58
|
-
| minLength | minlength | | number | `undefined` | behavior | | Sets the fewest characters the value needs to be valid, as a whole number no larger than `maxlength`.<br>An empty value isn't checked against it; use `required` for that.
|
|
59
|
-
| minObject | | readonly | Date \| undefined | | behavior | | Gets `min` as a `Date` object, or `undefined` when `min` isn't a valid ISO date (`YYYY-MM-DD`).
|
|
60
|
-
| name | name | | string | | behavior | | Sets the field name `auro-form` uses for this input's value, such as `email`<br>(the inner `<input>` element's `name`).
|
|
61
|
-
| noValidate | novalidate | | boolean | `false` | behavior | | Turns off validation when the input loses focus. Validation still runs when code sets the value<br>or when `validateOnInput` is set.
|
|
62
|
-
| pattern | pattern | | string | | behavior | | Sets a regular expression the whole value must match to be valid, such as `[a-z]{1,15}`<br>(the input's `pattern`). Use `setCustomValidityPatternMismatch` to set the error message.
|
|
63
|
-
| readonly | readonly | | boolean | | behavior | | Stops the user from editing the value, while code can still set it.<br>A read-only input can still get focus, and doesn't show the clear button.
|
|
64
|
-
| required | required | | boolean | `false` | behavior | `!noValidate` | Makes the input invalid when it's left empty, and removes the " (optional)" text after the label.<br>Use `setCustomValidityValueMissing` to set the error message.
|
|
65
|
-
| setCustomValidity | setcustomvalidity | | string | | behavior | `!noValidate` | Sets one error message for every kind of validation error. When set, it replaces the messages from<br>`error` and every other `setCustomValidity*` property.
|
|
66
|
-
| setCustomValidityBadInput | setcustomvaliditybadinput | | string | | behavior | `!noValidate` | Sets the error message for `validity="badInput"`. Does not currently change any message,<br>because the input never reports `badInput`.
|
|
67
|
-
| setCustomValidityCustomError | setcustomvaliditycustomerror | | string | | behavior | `!noValidate` | Sets the error message shown while the `error` attribute is set, in place of the `error` value.
|
|
68
|
-
| setCustomValidityForType | setcustomvalidityfortype | | string | `undefined` | behavior | `!noValidate` | Sets the error message shown when the value doesn't fit its `type`, such as a badly formed email address,<br>an incomplete card number, or an incomplete date. When not set, `email`, `credit-card`, and most `date` inputs use a built-in message.
|
|
69
|
-
| setCustomValidityPatternMismatch | setcustomvaliditypatternmismatch | | string | | behavior | `!noValidate` | Sets the error message shown when the value doesn't match `pattern`, or when a date isn't a real calendar date.<br>For `pattern`, it does not currently work when set only as a property, so set the attribute instead.
|
|
70
|
-
| setCustomValidityRangeOverflow | setcustomvalidityrangeoverflow | | string | | behavior | `!noValidate` | Sets the error message shown when the value is above `max`.
|
|
71
|
-
| setCustomValidityRangeUnderflow | setcustomvalidityrangeunderflow | | string | | behavior | `!noValidate` | Sets the error message shown when the value is below `min`.
|
|
72
|
-
| setCustomValidityTooLong | setcustomvaliditytoolong | | string | | behavior | `!noValidate` | Sets the error message shown when the value is longer than `maxlength`.<br>Does not currently work when set only as a property, so set the attribute instead.
|
|
73
|
-
| setCustomValidityTooShort | setcustomvaliditytooshort | | string | | behavior | `!noValidate` | Sets the error message shown when the value is shorter than `minlength`.<br>Does not currently work when set only as a property, so set the attribute instead.
|
|
74
|
-
| setCustomValidityValueMissing | setcustomvalidityvaluemissing | | string | | behavior | `!noValidate` | Sets the error message shown when a `required` input is left empty.
|
|
75
|
-
| spellcheck | spellcheck | | `true` \| `false` | | behavior | | Sets whether the browser checks the value for spelling mistakes (the input's `spellcheck`).<br>Use `false` for codes, names, and other text that isn't made of dictionary words; it also sets `autocorrect` to `off`<br>and `autocapitalize` to `none`. Password inputs always use `false`.
|
|
76
|
-
| type | type | | `text` \| `password` \| `email` \| `credit-card` \| `tel` \| `number` \| `date` | `text` | behavior | | Sets the kind of value the input expects, which controls its formatting, validation, and mobile keyboard.<br>`credit-card`, `tel`, and `date` format the value as the user types, and `password` hides the text and adds a show/hide button.<br>The show/hide button appears only in the `classic` layout.
|
|
77
|
-
| validateOnInput | validateoninput | | boolean | | behavior | | Validates the value as the user types, instead of waiting until the input loses focus.<br>Use it with `pattern` when the user needs feedback before leaving the field.
|
|
78
|
-
| validity | validity | | string | | behavior | | Reports the result of the last validation, such as `valid`, `valueMissing`, or `patternMismatch`.<br>Validation sets it, so read it instead of setting it.
|
|
79
|
-
| value | value | | string | `undefined` | behavior | | Sets or gets the input's current value. For `type="date"` with a full date format, the value is an ISO date,<br>such as `2025-12-31`, whatever format the user sees; partial formats, such as `mm/yy`, use the text shown in the field.
|
|
80
|
-
| valueObject | | readonly | Date \| undefined | | behavior | | Gets `value` as a `Date` object, or `undefined` when `value` isn't a valid ISO date (`YYYY-MM-DD`).
|
|
23
|
+
| Properties | Attributes | Modifiers | Type | Default | Category | Relevant when | Description |
|
|
24
|
+
| -------------------------------- | -------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------- | ----------- | -------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
25
|
+
| a11yActivedescendant | a11yactivedescendant | | string | | a11y | | Sets the ID of the option screen readers announce as active while focus stays in the input,<br>such as the highlighted option in a list (the inner `<input>` element's `aria-activedescendant`). |
|
|
26
|
+
| a11yControls | a11ycontrols | | string | | a11y | | Sets the ID of the element the input controls, such as a combobox's list of options<br>(the inner `<input>` element's `aria-controls`). |
|
|
27
|
+
| a11yExpanded | a11yexpanded | | boolean | | a11y | | Tells screen readers that the element the input controls, such as a list of options, is open<br>(the inner `<input>` element's `aria-expanded`). |
|
|
28
|
+
| a11yRole | a11yrole | | string | | a11y | | Sets the role screen readers announce for the inner `<input>` element, such as `combobox`<br>when the input is part of `auro-combobox` (the input's `role`). |
|
|
29
|
+
| activeLabel | activelabel | | boolean | `false` | ui | `layout === 'classic'` | Keeps the label raised above the value, even when the field is empty and doesn't have focus.<br>Applies only to the `classic` layout; the emphasized and snowflake layouts always show the label inside the field. |
|
|
30
|
+
| appearance | appearance | | `default` \| `inverse` | `default` | ui | | Sets the color scheme. Use `inverse` on dark backgrounds and `default` on light backgrounds. |
|
|
31
|
+
| disabled | disabled | | boolean | `false` | ui | | Turns the input off. A disabled input is shown in a muted style, can't be edited or reached<br>with the keyboard, and doesn't show the clear button. |
|
|
32
|
+
| dvInputOnly | dvinputonly | | boolean | `false` | ui | | Keeps the label visible while `displayValue` slot content is shown in place of the value.<br>Without it, the `displayValue` content hides both the label and the value. |
|
|
33
|
+
| icon | icon | | boolean | `false` | ui | `type === 'credit-card'` | Shows a card icon left of the value that changes to the detected card brand, such as Visa, as the user types.<br>Applies only when `type="credit-card"`, and the emphasized layouts don't show it. |
|
|
34
|
+
| layout | layout | | `classic` \| `emphasized` \| `emphasized-left` \| `emphasized-right` \| `snowflake` \| `snowflake-left` \| `snowflake-right` | `classic` | ui | | Sets how the label and value are arranged. `classic` raises the label above the value<br>when the field has focus or a value; the `emphasized` and `snowflake` layouts always show the label inside the field. |
|
|
35
|
+
| nested | nested | | boolean | | ui | | Marks the input as placed inside another component, such as the trigger of `auro-dropdown`.<br>Does not currently change how the input looks or behaves; use `simple` to remove the border. |
|
|
36
|
+
| placeholder | placeholder | | string | | ui | | Sets hint text shown in the empty field, such as `John Doe`.<br>When not set and `type="date"`, the input shows the date format, such as `MM/DD/YYYY`. |
|
|
37
|
+
| shape | shape | | `box` \| `classic` \| `pill` \| `pill-left` \| `pill-right` \| `rounded` \| `snowflake` | `classic` | ui | | Sets the shape of the field's border. `classic` and `rounded` have slightly rounded corners, `box` has square corners,<br>and `pill` has fully rounded ends, or only the left or right end for `pill-left` and `pill-right`.<br>The emphasized layouts support `pill`, `pill-left`, and `pill-right`, and the snowflake layout uses `snowflake`. |
|
|
38
|
+
| simple | simple | | boolean | | ui | | Removes the field's border and background, such as for an input placed inside another component. |
|
|
39
|
+
| size | size | | `xs` \| `sm` \| `md` \| `lg` \| `xl` | `lg` | ui | | Sets the field's size. The `classic` shape is the same height at every size, and the<br>emphasized layouts support only `xl`. |
|
|
40
|
+
| onDark | ondark | | boolean | `false` | ui | | Deprecated: Use `appearance="inverse"` instead.<br>Styles the input for a dark background. |
|
|
41
|
+
| autocapitalize | autocapitalize | | `off` \| `none` \| `on` \| `sentences` \| `words` \| `characters` | | behavior | | Sets whether mobile keyboards capitalize text as the user types, such as `words` for names<br>(the input's `autocapitalize`). Does not currently apply: the input clears this value on every<br>update, unless `spellcheck="false"`, which sets it to `none`. |
|
|
42
|
+
| autocomplete | autocomplete | | string | | behavior | | Sets what the browser can suggest when filling in the field, such as `off` to turn off<br>autofill suggestions (the input's `autocomplete`). Only `autocomplete="off"` is currently supported. |
|
|
43
|
+
| autocorrect | autocorrect | | `on` \| `off` | | behavior | | Sets whether Safari on iOS corrects words as the user types. Use `off` for names, codes, and<br>other text that isn't made of dictionary words. Always `off` when `spellcheck="false"`. |
|
|
44
|
+
| customValidityTypeEmail | customvaliditytypeemail | | string | | behavior | `!noValidate` | Does not currently change any message. To set the error message for an invalid email address,<br>use `setCustomValidityForType`. |
|
|
45
|
+
| error | error | | string | | behavior | | Shows an error that stays until you remove the attribute, and sets `validity` to `customError`.<br>The attribute value is the error message, unless `setCustomValidityCustomError` or `setCustomValidity` is set. |
|
|
46
|
+
| errorMessage | errormessage | | string | | behavior | | Holds the error message shown below the field for the current `validity`.<br>Validation sets it, so read it instead of setting it. |
|
|
47
|
+
| format | format | | string | | behavior | | Sets the pattern the value is formatted to as the user types, such as `mm/dd/yyyy` for a date or<br>`+1 (000) 000-0000` for a phone number. Outside dates, `0` stands for a digit, `a` for a letter, and `*` for any character.<br>For `type="date"`, it replaces the format that `locale` would set. |
|
|
48
|
+
| hasFocus | | | boolean | | behavior | | Reports whether the input currently has focus. The input updates it, so read it instead of setting it. |
|
|
49
|
+
| hasValue | | | boolean | `false` | behavior | | Reports whether the input currently has a value. The input updates it, so read it instead of setting it. |
|
|
50
|
+
| id | id | | string | | behavior | | Sets a unique ID for the element, such as `email`. The inner `<input>` element uses this ID<br>followed by `-input`, such as `email-input`. |
|
|
51
|
+
| inputmode | inputmode | | string | | behavior | | Sets which on-screen keyboard mobile devices show, such as `numeric` for digits only or `email`<br>(the input's `inputmode`). Defaults to `numeric` when `type` is `number`, `tel`, `credit-card`, or `date`. |
|
|
52
|
+
| lang | lang | | string | | behavior | | Sets the language of the input's built-in help text and error messages, such as `es` for Spanish.<br>Only `es` changes the text; other values use English. When not set, the input follows the page's `lang`. |
|
|
53
|
+
| locale | locale | | string | `en-US` | behavior | | Sets the region whose date format `type="date"` uses, such as `en-GB` for `dd/mm/yyyy`.<br>When not set, the input uses the nearest ancestor's `data-locale` attribute, or `en-US`. |
|
|
54
|
+
| max | max | | string | `undefined` | behavior | | Sets the largest value allowed, such as `10` for a number or `2025-12-31` for a date.<br>Applies only when `type` is `number`, or `date` with a full date format; write dates in ISO format (`YYYY-MM-DD`). |
|
|
55
|
+
| maxLength | maxlength | | number | `undefined` | behavior | | Sets the most characters the user can enter, as a whole number `0` or higher.<br>Don't set it when `type` is `credit-card`, `tel`, or `date`, because those types set their own length. |
|
|
56
|
+
| maxObject | | readonly | Date \| undefined | | behavior | | Gets `max` as a `Date` object, or `undefined` when `max` isn't a valid ISO date (`YYYY-MM-DD`). |
|
|
57
|
+
| min | min | | string | `undefined` | behavior | | Sets the smallest value allowed, such as `1` for a number or `2024-01-01` for a date.<br>Applies only when `type` is `number`, or `date` with a full date format; write dates in ISO format (`YYYY-MM-DD`). |
|
|
58
|
+
| minLength | minlength | | number | `undefined` | behavior | | Sets the fewest characters the value needs to be valid, as a whole number no larger than `maxlength`.<br>An empty value isn't checked against it; use `required` for that. |
|
|
59
|
+
| minObject | | readonly | Date \| undefined | | behavior | | Gets `min` as a `Date` object, or `undefined` when `min` isn't a valid ISO date (`YYYY-MM-DD`). |
|
|
60
|
+
| name | name | | string | | behavior | | Sets the field name `auro-form` uses for this input's value, such as `email`<br>(the inner `<input>` element's `name`). |
|
|
61
|
+
| noValidate | novalidate | | boolean | `false` | behavior | | Turns off validation when the input loses focus. Validation still runs when code sets the value<br>or when `validateOnInput` is set. |
|
|
62
|
+
| pattern | pattern | | string | | behavior | | Sets a regular expression the whole value must match to be valid, such as `[a-z]{1,15}`<br>(the input's `pattern`). Use `setCustomValidityPatternMismatch` to set the error message. |
|
|
63
|
+
| readonly | readonly | | boolean | | behavior | | Stops the user from editing the value, while code can still set it.<br>A read-only input can still get focus, and doesn't show the clear button. |
|
|
64
|
+
| required | required | | boolean | `false` | behavior | `!noValidate` | Makes the input invalid when it's left empty, and removes the " (optional)" text after the label.<br>Use `setCustomValidityValueMissing` to set the error message. |
|
|
65
|
+
| setCustomValidity | setcustomvalidity | | string | | behavior | `!noValidate` | Sets one error message for every kind of validation error. When set, it replaces the messages from<br>`error` and every other `setCustomValidity*` property. |
|
|
66
|
+
| setCustomValidityBadInput | setcustomvaliditybadinput | | string | | behavior | `!noValidate` | Sets the error message for `validity="badInput"`. Does not currently change any message,<br>because the input never reports `badInput`. |
|
|
67
|
+
| setCustomValidityCustomError | setcustomvaliditycustomerror | | string | | behavior | `!noValidate` | Sets the error message shown while the `error` attribute is set, in place of the `error` value. |
|
|
68
|
+
| setCustomValidityForType | setcustomvalidityfortype | | string | `undefined` | behavior | `!noValidate` | Sets the error message shown when the value doesn't fit its `type`, such as a badly formed email address,<br>an incomplete card number, or an incomplete date. When not set, `email`, `credit-card`, and most `date` inputs use a built-in message. |
|
|
69
|
+
| setCustomValidityPatternMismatch | setcustomvaliditypatternmismatch | | string | | behavior | `!noValidate` | Sets the error message shown when the value doesn't match `pattern`, or when a date isn't a real calendar date.<br>For `pattern`, it does not currently work when set only as a property, so set the attribute instead. |
|
|
70
|
+
| setCustomValidityRangeOverflow | setcustomvalidityrangeoverflow | | string | | behavior | `!noValidate` | Sets the error message shown when the value is above `max`. |
|
|
71
|
+
| setCustomValidityRangeUnderflow | setcustomvalidityrangeunderflow | | string | | behavior | `!noValidate` | Sets the error message shown when the value is below `min`. |
|
|
72
|
+
| setCustomValidityTooLong | setcustomvaliditytoolong | | string | | behavior | `!noValidate` | Sets the error message shown when the value is longer than `maxlength`.<br>Does not currently work when set only as a property, so set the attribute instead. |
|
|
73
|
+
| setCustomValidityTooShort | setcustomvaliditytooshort | | string | | behavior | `!noValidate` | Sets the error message shown when the value is shorter than `minlength`.<br>Does not currently work when set only as a property, so set the attribute instead. |
|
|
74
|
+
| setCustomValidityValueMissing | setcustomvalidityvaluemissing | | string | | behavior | `!noValidate` | Sets the error message shown when a `required` input is left empty. |
|
|
75
|
+
| spellcheck | spellcheck | | `true` \| `false` | | behavior | | Sets whether the browser checks the value for spelling mistakes (the input's `spellcheck`).<br>Use `false` for codes, names, and other text that isn't made of dictionary words; it also sets `autocorrect` to `off`<br>and `autocapitalize` to `none`. Password inputs always use `false`. |
|
|
76
|
+
| type | type | | `text` \| `password` \| `email` \| `credit-card` \| `tel` \| `number` \| `date` | `text` | behavior | | Sets the kind of value the input expects, which controls its formatting, validation, and mobile keyboard.<br>`credit-card`, `tel`, and `date` format the value as the user types, and `password` hides the text and adds a show/hide button.<br>The show/hide button appears only in the `classic` layout. |
|
|
77
|
+
| validateOnInput | validateoninput | | boolean | | behavior | | Validates the value as the user types, instead of waiting until the input loses focus.<br>Use it with `pattern` when the user needs feedback before leaving the field. |
|
|
78
|
+
| validity | validity | | string | | behavior | | Reports the result of the last validation, such as `valid`, `valueMissing`, or `patternMismatch`.<br>Validation sets it, so read it instead of setting it. |
|
|
79
|
+
| value | value | | string | `undefined` | behavior | | Sets or gets the input's current value. For `type="date"` with a full date format, the value is an ISO date,<br>such as `2025-12-31`, whatever format the user sees; partial formats, such as `mm/yy`, use the text shown in the field. |
|
|
80
|
+
| valueObject | | readonly | Date \| undefined | | behavior | | Gets `value` as a `Date` object, or `undefined` when `value` isn't a valid ISO date (`YYYY-MM-DD`). |
|
|
81
81
|
|
|
82
82
|
### Methods
|
|
83
83
|
|
|
@@ -321,7 +321,7 @@
|
|
|
321
321
|
<div data-locale="de-DE">
|
|
322
322
|
<auro-input type="date">
|
|
323
323
|
<span slot="ariaLabel.clear">Datum löschen</span>
|
|
324
|
-
<span slot="label">Abreisedatum (geerbt aus
|
|
324
|
+
<span slot="label">Abreisedatum (geerbt aus <code>data-locale="de-DE"</code>)</span>
|
|
325
325
|
<span slot="helpText">Hilfetext</span>
|
|
326
326
|
<span slot="optionalLabel">(freiwillig)</span>
|
|
327
327
|
</auro-input>
|
|
@@ -361,7 +361,7 @@
|
|
|
361
361
|
<div data-locale="de-DE">
|
|
362
362
|
<auro-input type="date">
|
|
363
363
|
<span slot="ariaLabel.clear">Datum löschen</span>
|
|
364
|
-
<span slot="label">Abreisedatum (geerbt aus
|
|
364
|
+
<span slot="label">Abreisedatum (geerbt aus <code>data-locale="de-DE"</code>)</span>
|
|
365
365
|
<span slot="helpText">Hilfetext</span>
|
|
366
366
|
<span slot="optionalLabel">(freiwillig)</span>
|
|
367
367
|
</auro-input>
|
|
@@ -377,7 +377,7 @@
|
|
|
377
377
|
<!-- The below content is automatically added from ./../apiExamples/optional-label.html -->
|
|
378
378
|
<auro-input placeholder="John Doe">
|
|
379
379
|
<span slot="label">Full name</span>
|
|
380
|
-
<span slot="optionalLabel">
|
|
380
|
+
<span slot="optionalLabel"> (not required)</span>
|
|
381
381
|
<span slot="helpText">Please enter your full name.</span>
|
|
382
382
|
</auro-input>
|
|
383
383
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -388,7 +388,7 @@
|
|
|
388
388
|
<!-- The below code snippet is automatically added from ./../apiExamples/optional-label.html -->
|
|
389
389
|
<pre class="language-html"><code class="language-html"><auro-input placeholder="John Doe">
|
|
390
390
|
<span slot="label">Full name</span>
|
|
391
|
-
<span slot="optionalLabel">
|
|
391
|
+
<span slot="optionalLabel"> (not required)</span>
|
|
392
392
|
<span slot="helpText">Please enter your full name.</span>
|
|
393
393
|
</auro-input></code></pre>
|
|
394
394
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -529,7 +529,7 @@
|
|
|
529
529
|
<div class="exampleWrapper">
|
|
530
530
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/set-custom-validity.html) -->
|
|
531
531
|
<!-- The below content is automatically added from ../apiExamples/set-custom-validity.html -->
|
|
532
|
-
<auro-input required minlength="3" setCustomValidity="
|
|
532
|
+
<auro-input required minlength="3" setCustomValidity="Please enter your full name, with at least 3 characters.">
|
|
533
533
|
<span slot="label">Full name</span>
|
|
534
534
|
<span slot="helpText">Please enter your full name.</span>
|
|
535
535
|
</auro-input>
|
|
@@ -539,7 +539,7 @@
|
|
|
539
539
|
<span slot="trigger">See code</span>
|
|
540
540
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/set-custom-validity.html) -->
|
|
541
541
|
<!-- The below code snippet is automatically added from ../apiExamples/set-custom-validity.html -->
|
|
542
|
-
<pre class="language-html"><code class="language-html"><auro-input required minlength="3" setCustomValidity="
|
|
542
|
+
<pre class="language-html"><code class="language-html"><auro-input required minlength="3" setCustomValidity="Please enter your full name, with at least 3 characters.">
|
|
543
543
|
<span slot="label">Full name</span>
|
|
544
544
|
<span slot="helpText">Please enter your full name.</span>
|
|
545
545
|
</auro-input></code></pre>
|
|
@@ -945,7 +945,7 @@
|
|
|
945
945
|
</auro-input></code></pre>
|
|
946
946
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
947
947
|
</auro-accordion>
|
|
948
|
-
<auro-header level="3" id="noValidate">
|
|
948
|
+
<auro-header level="3" id="noValidate">No validation</auro-header>
|
|
949
949
|
<p>When a field is <code>required</code> but shouldn't be validated when it loses focus, use the <code>noValidate</code> attribute. Validation still runs when code sets the value or when <code>validateOnInput</code> is set.</p>
|
|
950
950
|
<div class="exampleWrapper">
|
|
951
951
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/no-validate.html) -->
|
|
@@ -10188,6 +10188,9 @@ function cleanEscapedString(input) {
|
|
|
10188
10188
|
return input.match(escapedStringRegExp)[1].replace(doubleQuoteRegExp, "'");
|
|
10189
10189
|
}
|
|
10190
10190
|
|
|
10191
|
+
/**
|
|
10192
|
+
* Helpers that set up input masks and convert between the text shown in the field, `Date` objects, and ISO date strings (`YYYY-MM-DD`), for one locale and date format.
|
|
10193
|
+
*/
|
|
10191
10194
|
class AuroInputUtilities {
|
|
10192
10195
|
|
|
10193
10196
|
/**
|
|
@@ -10207,7 +10210,17 @@ class AuroInputUtilities {
|
|
|
10207
10210
|
} else {
|
|
10208
10211
|
this.locale = 'en-US';
|
|
10209
10212
|
}
|
|
10213
|
+
|
|
10214
|
+
/**
|
|
10215
|
+
* Sets the date format to use instead of the locale's format, such as `mm/dd/yyyy`. `updateFormat()` also sets it.
|
|
10216
|
+
* @type {string|undefined}
|
|
10217
|
+
*/
|
|
10210
10218
|
this.overrideFormat = config.format;
|
|
10219
|
+
|
|
10220
|
+
/**
|
|
10221
|
+
* The `Intl.DateTimeFormat` date formatter for the helpers' locale. The helpers don't currently use it.
|
|
10222
|
+
* @type {Intl.DateTimeFormat}
|
|
10223
|
+
*/
|
|
10211
10224
|
this.formatter = new Intl.DateTimeFormat(this.locale);
|
|
10212
10225
|
|
|
10213
10226
|
// Bindings - many of these are passed into IMask callbacks,
|
|
@@ -10798,8 +10811,9 @@ class BaseInput extends AuroElement {
|
|
|
10798
10811
|
},
|
|
10799
10812
|
|
|
10800
10813
|
/**
|
|
10801
|
-
* Sets the shape of the field's border.
|
|
10802
|
-
* and `pill
|
|
10814
|
+
* Sets the shape of the field's border. `classic` and `rounded` have slightly rounded corners, `box` has square corners,
|
|
10815
|
+
* and `pill` has fully rounded ends, or only the left or right end for `pill-left` and `pill-right`.
|
|
10816
|
+
* The emphasized layouts support `pill`, `pill-left`, and `pill-right`, and the snowflake layout uses `snowflake`.
|
|
10803
10817
|
* @type {'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'}
|
|
10804
10818
|
* @default 'classic'
|
|
10805
10819
|
* @category ui
|
|
@@ -12608,7 +12622,7 @@ class AuroHelpText extends i$3 {
|
|
|
12608
12622
|
}
|
|
12609
12623
|
}
|
|
12610
12624
|
|
|
12611
|
-
var formkitVersion = '
|
|
12625
|
+
var formkitVersion = '202611082047';
|
|
12612
12626
|
|
|
12613
12627
|
/**
|
|
12614
12628
|
* @license
|
|
@@ -88,10 +88,10 @@ AuroInput.register('[custom]-input');</code></pre>
|
|
|
88
88
|
<auro-header level="3">Implementation</auro-header>
|
|
89
89
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/defaultRegistration.md) -->
|
|
90
90
|
<!-- The below content is automatically added from ./../docs/partials/getting-started/defaultRegistration.md -->
|
|
91
|
-
<p>
|
|
91
|
+
<p>After you install the package, import the component's registered module:</p>
|
|
92
92
|
|
|
93
93
|
<pre class="language-js"><code class="language-js">import '@aurodesignsystem/auro-formkit/auro-input';</code></pre>
|
|
94
|
-
<p>This import registers the <code><auro-input></code> custom element globally.
|
|
94
|
+
<p>This import registers the <code><auro-input></code> custom element globally. Then use it in your HTML:</p>
|
|
95
95
|
|
|
96
96
|
<pre class="language-html"><code class="language-html"><auro-input>
|
|
97
97
|
<span slot="label">Enter your name</span>
|
|
@@ -108,7 +108,7 @@ AuroInput.register('[custom]-input');</code></pre>
|
|
|
108
108
|
<p>Add the following script tag to your HTML to load the component directly from a CDN:</p>
|
|
109
109
|
|
|
110
110
|
<pre class="language-html"><code class="language-html"><script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-input/+esm"></script></code></pre>
|
|
111
|
-
<p>This script registers the <code><auro-input></code> custom element globally.
|
|
111
|
+
<p>This script registers the <code><auro-input></code> custom element globally. Then use it in your HTML:</p>
|
|
112
112
|
|
|
113
113
|
<pre class="language-html"><code class="language-html"><auro-input>
|
|
114
114
|
<span slot="label">Enter your name</span>
|
|
@@ -10188,6 +10188,9 @@ function cleanEscapedString(input) {
|
|
|
10188
10188
|
return input.match(escapedStringRegExp)[1].replace(doubleQuoteRegExp, "'");
|
|
10189
10189
|
}
|
|
10190
10190
|
|
|
10191
|
+
/**
|
|
10192
|
+
* Helpers that set up input masks and convert between the text shown in the field, `Date` objects, and ISO date strings (`YYYY-MM-DD`), for one locale and date format.
|
|
10193
|
+
*/
|
|
10191
10194
|
class AuroInputUtilities {
|
|
10192
10195
|
|
|
10193
10196
|
/**
|
|
@@ -10207,7 +10210,17 @@ class AuroInputUtilities {
|
|
|
10207
10210
|
} else {
|
|
10208
10211
|
this.locale = 'en-US';
|
|
10209
10212
|
}
|
|
10213
|
+
|
|
10214
|
+
/**
|
|
10215
|
+
* Sets the date format to use instead of the locale's format, such as `mm/dd/yyyy`. `updateFormat()` also sets it.
|
|
10216
|
+
* @type {string|undefined}
|
|
10217
|
+
*/
|
|
10210
10218
|
this.overrideFormat = config.format;
|
|
10219
|
+
|
|
10220
|
+
/**
|
|
10221
|
+
* The `Intl.DateTimeFormat` date formatter for the helpers' locale. The helpers don't currently use it.
|
|
10222
|
+
* @type {Intl.DateTimeFormat}
|
|
10223
|
+
*/
|
|
10211
10224
|
this.formatter = new Intl.DateTimeFormat(this.locale);
|
|
10212
10225
|
|
|
10213
10226
|
// Bindings - many of these are passed into IMask callbacks,
|
|
@@ -10798,8 +10811,9 @@ class BaseInput extends AuroElement {
|
|
|
10798
10811
|
},
|
|
10799
10812
|
|
|
10800
10813
|
/**
|
|
10801
|
-
* Sets the shape of the field's border.
|
|
10802
|
-
* and `pill
|
|
10814
|
+
* Sets the shape of the field's border. `classic` and `rounded` have slightly rounded corners, `box` has square corners,
|
|
10815
|
+
* and `pill` has fully rounded ends, or only the left or right end for `pill-left` and `pill-right`.
|
|
10816
|
+
* The emphasized layouts support `pill`, `pill-left`, and `pill-right`, and the snowflake layout uses `snowflake`.
|
|
10803
10817
|
* @type {'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'}
|
|
10804
10818
|
* @default 'classic'
|
|
10805
10819
|
* @category ui
|
|
@@ -12608,7 +12622,7 @@ class AuroHelpText extends i$3 {
|
|
|
12608
12622
|
}
|
|
12609
12623
|
}
|
|
12610
12624
|
|
|
12611
|
-
var formkitVersion = '
|
|
12625
|
+
var formkitVersion = '202611082047';
|
|
12612
12626
|
|
|
12613
12627
|
/**
|
|
12614
12628
|
* @license
|
|
@@ -10188,6 +10188,9 @@ function cleanEscapedString(input) {
|
|
|
10188
10188
|
return input.match(escapedStringRegExp)[1].replace(doubleQuoteRegExp, "'");
|
|
10189
10189
|
}
|
|
10190
10190
|
|
|
10191
|
+
/**
|
|
10192
|
+
* Helpers that set up input masks and convert between the text shown in the field, `Date` objects, and ISO date strings (`YYYY-MM-DD`), for one locale and date format.
|
|
10193
|
+
*/
|
|
10191
10194
|
class AuroInputUtilities {
|
|
10192
10195
|
|
|
10193
10196
|
/**
|
|
@@ -10207,7 +10210,17 @@ class AuroInputUtilities {
|
|
|
10207
10210
|
} else {
|
|
10208
10211
|
this.locale = 'en-US';
|
|
10209
10212
|
}
|
|
10213
|
+
|
|
10214
|
+
/**
|
|
10215
|
+
* Sets the date format to use instead of the locale's format, such as `mm/dd/yyyy`. `updateFormat()` also sets it.
|
|
10216
|
+
* @type {string|undefined}
|
|
10217
|
+
*/
|
|
10210
10218
|
this.overrideFormat = config.format;
|
|
10219
|
+
|
|
10220
|
+
/**
|
|
10221
|
+
* The `Intl.DateTimeFormat` date formatter for the helpers' locale. The helpers don't currently use it.
|
|
10222
|
+
* @type {Intl.DateTimeFormat}
|
|
10223
|
+
*/
|
|
10211
10224
|
this.formatter = new Intl.DateTimeFormat(this.locale);
|
|
10212
10225
|
|
|
10213
10226
|
// Bindings - many of these are passed into IMask callbacks,
|
|
@@ -10798,8 +10811,9 @@ class BaseInput extends AuroElement {
|
|
|
10798
10811
|
},
|
|
10799
10812
|
|
|
10800
10813
|
/**
|
|
10801
|
-
* Sets the shape of the field's border.
|
|
10802
|
-
* and `pill
|
|
10814
|
+
* Sets the shape of the field's border. `classic` and `rounded` have slightly rounded corners, `box` has square corners,
|
|
10815
|
+
* and `pill` has fully rounded ends, or only the left or right end for `pill-left` and `pill-right`.
|
|
10816
|
+
* The emphasized layouts support `pill`, `pill-left`, and `pill-right`, and the snowflake layout uses `snowflake`.
|
|
10803
10817
|
* @type {'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'}
|
|
10804
10818
|
* @default 'classic'
|
|
10805
10819
|
* @category ui
|
|
@@ -12608,7 +12622,7 @@ class AuroHelpText extends i$3 {
|
|
|
12608
12622
|
}
|
|
12609
12623
|
}
|
|
12610
12624
|
|
|
12611
|
-
var formkitVersion = '
|
|
12625
|
+
var formkitVersion = '202611082047';
|
|
12612
12626
|
|
|
12613
12627
|
/**
|
|
12614
12628
|
* @license
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<auro-header level="1" id="overview">Why auro-input?</auro-header>
|
|
2
|
-
<p>The native <code><input></code> element is the workhorse of HTML forms, but it has significant limitations in styling, validation messaging, input formatting, and accessibility. <code>auro-input</code> addresses these
|
|
2
|
+
<p>The native <code><input></code> element is the workhorse of HTML forms, but it has significant limitations in styling, validation messaging, input formatting, and accessibility. <code>auro-input</code> addresses these for common input types. To include its value in form data, place it inside <code>auro-form</code> and set <code>name</code>, because a native <code><form></code> doesn't include it.</p>
|
|
3
3
|
<auro-header level="2" id="accessibility">Accessibility</auro-header>
|
|
4
4
|
<p>Native inputs require manual <code><label></code> wiring, have no standard pattern for error announcements, and provide no built-in clear or show/hide password controls.</p>
|
|
5
5
|
<p><code>auro-input</code> provides:</p>
|
|
@@ -27,8 +27,9 @@ export default class BaseInput extends AuroElement {
|
|
|
27
27
|
*/
|
|
28
28
|
layout: "classic" | "emphasized" | "emphasized-left" | "emphasized-right" | "snowflake" | "snowflake-left" | "snowflake-right";
|
|
29
29
|
/**
|
|
30
|
-
* Sets the shape of the field's border.
|
|
31
|
-
* and `pill
|
|
30
|
+
* Sets the shape of the field's border. `classic` and `rounded` have slightly rounded corners, `box` has square corners,
|
|
31
|
+
* and `pill` has fully rounded ends, or only the left or right end for `pill-left` and `pill-right`.
|
|
32
|
+
* The emphasized layouts support `pill`, `pill-left`, and `pill-right`, and the snowflake layout uses `snowflake`.
|
|
32
33
|
* @type {'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'}
|
|
33
34
|
* @default 'classic'
|
|
34
35
|
* @category ui
|
|
@@ -10130,6 +10130,9 @@ function cleanEscapedString(input) {
|
|
|
10130
10130
|
return input.match(escapedStringRegExp)[1].replace(doubleQuoteRegExp, "'");
|
|
10131
10131
|
}
|
|
10132
10132
|
|
|
10133
|
+
/**
|
|
10134
|
+
* Helpers that set up input masks and convert between the text shown in the field, `Date` objects, and ISO date strings (`YYYY-MM-DD`), for one locale and date format.
|
|
10135
|
+
*/
|
|
10133
10136
|
class AuroInputUtilities {
|
|
10134
10137
|
|
|
10135
10138
|
/**
|
|
@@ -10149,7 +10152,17 @@ class AuroInputUtilities {
|
|
|
10149
10152
|
} else {
|
|
10150
10153
|
this.locale = 'en-US';
|
|
10151
10154
|
}
|
|
10155
|
+
|
|
10156
|
+
/**
|
|
10157
|
+
* Sets the date format to use instead of the locale's format, such as `mm/dd/yyyy`. `updateFormat()` also sets it.
|
|
10158
|
+
* @type {string|undefined}
|
|
10159
|
+
*/
|
|
10152
10160
|
this.overrideFormat = config.format;
|
|
10161
|
+
|
|
10162
|
+
/**
|
|
10163
|
+
* The `Intl.DateTimeFormat` date formatter for the helpers' locale. The helpers don't currently use it.
|
|
10164
|
+
* @type {Intl.DateTimeFormat}
|
|
10165
|
+
*/
|
|
10153
10166
|
this.formatter = new Intl.DateTimeFormat(this.locale);
|
|
10154
10167
|
|
|
10155
10168
|
// Bindings - many of these are passed into IMask callbacks,
|
|
@@ -10740,8 +10753,9 @@ class BaseInput extends AuroElement {
|
|
|
10740
10753
|
},
|
|
10741
10754
|
|
|
10742
10755
|
/**
|
|
10743
|
-
* Sets the shape of the field's border.
|
|
10744
|
-
* and `pill
|
|
10756
|
+
* Sets the shape of the field's border. `classic` and `rounded` have slightly rounded corners, `box` has square corners,
|
|
10757
|
+
* and `pill` has fully rounded ends, or only the left or right end for `pill-left` and `pill-right`.
|
|
10758
|
+
* The emphasized layouts support `pill`, `pill-left`, and `pill-right`, and the snowflake layout uses `snowflake`.
|
|
10745
10759
|
* @type {'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'}
|
|
10746
10760
|
* @default 'classic'
|
|
10747
10761
|
* @category ui
|
|
@@ -12550,7 +12564,7 @@ class AuroHelpText extends LitElement {
|
|
|
12550
12564
|
}
|
|
12551
12565
|
}
|
|
12552
12566
|
|
|
12553
|
-
var formkitVersion = '
|
|
12567
|
+
var formkitVersion = '202611082047';
|
|
12554
12568
|
|
|
12555
12569
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
12556
12570
|
// See LICENSE in the project root for license information.
|
|
@@ -10130,6 +10130,9 @@ function cleanEscapedString(input) {
|
|
|
10130
10130
|
return input.match(escapedStringRegExp)[1].replace(doubleQuoteRegExp, "'");
|
|
10131
10131
|
}
|
|
10132
10132
|
|
|
10133
|
+
/**
|
|
10134
|
+
* Helpers that set up input masks and convert between the text shown in the field, `Date` objects, and ISO date strings (`YYYY-MM-DD`), for one locale and date format.
|
|
10135
|
+
*/
|
|
10133
10136
|
class AuroInputUtilities {
|
|
10134
10137
|
|
|
10135
10138
|
/**
|
|
@@ -10149,7 +10152,17 @@ class AuroInputUtilities {
|
|
|
10149
10152
|
} else {
|
|
10150
10153
|
this.locale = 'en-US';
|
|
10151
10154
|
}
|
|
10155
|
+
|
|
10156
|
+
/**
|
|
10157
|
+
* Sets the date format to use instead of the locale's format, such as `mm/dd/yyyy`. `updateFormat()` also sets it.
|
|
10158
|
+
* @type {string|undefined}
|
|
10159
|
+
*/
|
|
10152
10160
|
this.overrideFormat = config.format;
|
|
10161
|
+
|
|
10162
|
+
/**
|
|
10163
|
+
* The `Intl.DateTimeFormat` date formatter for the helpers' locale. The helpers don't currently use it.
|
|
10164
|
+
* @type {Intl.DateTimeFormat}
|
|
10165
|
+
*/
|
|
10153
10166
|
this.formatter = new Intl.DateTimeFormat(this.locale);
|
|
10154
10167
|
|
|
10155
10168
|
// Bindings - many of these are passed into IMask callbacks,
|
|
@@ -10740,8 +10753,9 @@ class BaseInput extends AuroElement {
|
|
|
10740
10753
|
},
|
|
10741
10754
|
|
|
10742
10755
|
/**
|
|
10743
|
-
* Sets the shape of the field's border.
|
|
10744
|
-
* and `pill
|
|
10756
|
+
* Sets the shape of the field's border. `classic` and `rounded` have slightly rounded corners, `box` has square corners,
|
|
10757
|
+
* and `pill` has fully rounded ends, or only the left or right end for `pill-left` and `pill-right`.
|
|
10758
|
+
* The emphasized layouts support `pill`, `pill-left`, and `pill-right`, and the snowflake layout uses `snowflake`.
|
|
10745
10759
|
* @type {'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'}
|
|
10746
10760
|
* @default 'classic'
|
|
10747
10761
|
* @category ui
|
|
@@ -12550,7 +12564,7 @@ class AuroHelpText extends LitElement {
|
|
|
12550
12564
|
}
|
|
12551
12565
|
}
|
|
12552
12566
|
|
|
12553
|
-
var formkitVersion = '
|
|
12567
|
+
var formkitVersion = '202611082047';
|
|
12554
12568
|
|
|
12555
12569
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
12556
12570
|
// See LICENSE in the project root for license information.
|