@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.9 → 0.0.0-pr624.90

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 (149) hide show
  1. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
  2. package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
  3. package/components/bibtemplate/dist/headerVersion.d.ts +1 -1
  4. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  5. package/components/bibtemplate/dist/index.js +1241 -94
  6. package/components/bibtemplate/dist/registered.js +1241 -94
  7. package/components/checkbox/README.md +1 -1
  8. package/components/checkbox/demo/api.html +16 -10
  9. package/components/checkbox/demo/api.md +49 -15
  10. package/components/checkbox/demo/api.min.js +74 -46
  11. package/components/checkbox/demo/index.html +16 -10
  12. package/components/checkbox/demo/index.md +2 -2
  13. package/components/checkbox/demo/index.min.js +74 -46
  14. package/components/checkbox/demo/readme.html +16 -9
  15. package/components/checkbox/demo/readme.md +1 -1
  16. package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
  17. package/components/checkbox/dist/auro-checkbox.d.ts +3 -3
  18. package/components/checkbox/dist/index.js +73 -45
  19. package/components/checkbox/dist/registered.js +73 -45
  20. package/components/combobox/demo/api.html +16 -10
  21. package/components/combobox/demo/api.md +115 -8
  22. package/components/combobox/demo/api.min.js +3305 -1002
  23. package/components/combobox/demo/index.html +16 -10
  24. package/components/combobox/demo/index.md +8 -34
  25. package/components/combobox/demo/index.min.js +3305 -1002
  26. package/components/combobox/demo/readme.html +16 -9
  27. package/components/combobox/dist/auro-combobox.d.ts +57 -14
  28. package/components/combobox/dist/index.js +2992 -836
  29. package/components/combobox/dist/registered.js +2992 -836
  30. package/components/counter/demo/api.html +17 -10
  31. package/components/counter/demo/api.md +158 -21
  32. package/components/counter/demo/api.min.js +3417 -765
  33. package/components/counter/demo/index.html +17 -10
  34. package/components/counter/demo/index.md +185 -34
  35. package/components/counter/demo/index.min.js +3417 -765
  36. package/components/counter/demo/readme.html +16 -9
  37. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  38. package/components/counter/dist/auro-counter-group.d.ts +161 -11
  39. package/components/counter/dist/auro-counter.d.ts +16 -0
  40. package/components/counter/dist/helptextVersion.d.ts +2 -0
  41. package/components/counter/dist/iconVersion.d.ts +1 -1
  42. package/components/counter/dist/index.js +3420 -768
  43. package/components/counter/dist/registered.js +3420 -768
  44. package/components/datepicker/README.md +1 -1
  45. package/components/datepicker/demo/api.html +16 -10
  46. package/components/datepicker/demo/api.md +59 -28
  47. package/components/datepicker/demo/api.min.js +11956 -8070
  48. package/components/datepicker/demo/index.html +16 -10
  49. package/components/datepicker/demo/index.md +75 -8
  50. package/components/datepicker/demo/index.min.js +11956 -8070
  51. package/components/datepicker/demo/readme.html +16 -9
  52. package/components/datepicker/demo/readme.md +1 -1
  53. package/components/datepicker/dist/auro-datepicker.d.ts +151 -12
  54. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  55. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  56. package/components/datepicker/dist/index.js +13802 -9916
  57. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  58. package/components/datepicker/dist/registered.js +13802 -9916
  59. package/components/dropdown/demo/api.html +16 -10
  60. package/components/dropdown/demo/api.md +82 -275
  61. package/components/dropdown/demo/api.min.js +450 -261
  62. package/components/dropdown/demo/index.html +16 -10
  63. package/components/dropdown/demo/index.md +92 -362
  64. package/components/dropdown/demo/index.min.js +450 -261
  65. package/components/dropdown/demo/readme.html +16 -9
  66. package/components/dropdown/dist/auro-dropdown.d.ts +43 -83
  67. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  68. package/components/dropdown/dist/index.js +449 -260
  69. package/components/dropdown/dist/registered.js +449 -260
  70. package/components/form/demo/api.html +16 -9
  71. package/components/form/demo/api.md +1 -1
  72. package/components/form/demo/api.min.js +3 -3
  73. package/components/form/demo/autocomplete.html +19 -3
  74. package/components/form/demo/index.html +16 -9
  75. package/components/form/demo/index.min.js +3 -3
  76. package/components/form/demo/readme.html +16 -9
  77. package/components/form/demo/working.html +19 -13
  78. package/components/form/dist/auro-form.d.ts +1 -1
  79. package/components/form/dist/index.js +2 -2
  80. package/components/form/dist/registered.js +2 -2
  81. package/components/helptext/dist/auro-helptext.d.ts +0 -2
  82. package/components/helptext/dist/index.js +3 -5
  83. package/components/helptext/dist/registered.js +3 -5
  84. package/components/input/README.md +5 -2
  85. package/components/input/demo/api.html +16 -10
  86. package/components/input/demo/api.md +226 -132
  87. package/components/input/demo/api.min.js +1034 -297
  88. package/components/input/demo/index.html +16 -10
  89. package/components/input/demo/index.md +48 -32
  90. package/components/input/demo/index.min.js +1048 -311
  91. package/components/input/demo/readme.html +16 -9
  92. package/components/input/demo/readme.md +5 -2
  93. package/components/input/dist/auro-input.d.ts +24 -0
  94. package/components/input/dist/base-input.d.ts +45 -11
  95. package/components/input/dist/buttonVersion.d.ts +1 -1
  96. package/components/input/dist/iconVersion.d.ts +1 -1
  97. package/components/input/dist/index.js +1047 -310
  98. package/components/input/dist/registered.js +1047 -310
  99. package/components/layoutElement/dist/index.js +11 -8
  100. package/components/layoutElement/dist/registered.js +97 -0
  101. package/components/menu/demo/api.html +17 -10
  102. package/components/menu/demo/api.md +65 -8
  103. package/components/menu/demo/api.min.js +305 -63
  104. package/components/menu/demo/index.html +16 -10
  105. package/components/menu/demo/index.min.js +305 -63
  106. package/components/menu/demo/readme.html +16 -9
  107. package/components/menu/dist/auro-menu.d.ts +53 -7
  108. package/components/menu/dist/auro-menuoption.d.ts +21 -3
  109. package/components/menu/dist/iconVersion.d.ts +1 -1
  110. package/components/menu/dist/index.js +290 -48
  111. package/components/menu/dist/registered.js +290 -48
  112. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  113. package/components/menu/dist/styles/shapeSize-css.d.ts +2 -0
  114. package/components/radio/demo/api.html +16 -10
  115. package/components/radio/demo/api.md +39 -9
  116. package/components/radio/demo/api.min.js +92 -96
  117. package/components/radio/demo/index.html +16 -10
  118. package/components/radio/demo/index.min.js +92 -96
  119. package/components/radio/demo/readme.html +16 -9
  120. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  121. package/components/radio/dist/auro-radio.d.ts +9 -12
  122. package/components/radio/dist/index.js +91 -95
  123. package/components/radio/dist/registered.js +91 -95
  124. package/components/select/demo/api.html +16 -10
  125. package/components/select/demo/api.js +0 -2
  126. package/components/select/demo/api.md +149 -122
  127. package/components/select/demo/api.min.js +2283 -736
  128. package/components/select/demo/index.html +17 -11
  129. package/components/select/demo/index.md +1066 -259
  130. package/components/select/demo/index.min.js +2284 -725
  131. package/components/select/demo/readme.html +16 -9
  132. package/components/select/dist/auro-select.d.ts +74 -25
  133. package/components/select/dist/index.js +2165 -753
  134. package/components/select/dist/registered.js +2165 -753
  135. package/package.json +31 -28
  136. /package/components/{datepicker/dist/styles/default/color-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  137. /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/classic}/color-css.d.ts +0 -0
  138. /package/components/datepicker/dist/styles/{emphasized → classic}/style-css.d.ts +0 -0
  139. /package/components/{dropdown/dist/styles/default/bibColors-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  140. /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/snowflake}/style-css.d.ts +0 -0
  141. /package/components/dropdown/dist/styles/{default/bibStyles-css.d.ts → classic/bibColors-css.d.ts} +0 -0
  142. /package/components/{input/dist/styles/default/input-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  143. /package/components/{input/dist/styles/default/label-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
  144. /package/components/{input/dist/styles/input-css.d.ts → dropdown/dist/styles/classic/style-css.d.ts} +0 -0
  145. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/style-css.d.ts} +0 -0
  146. /package/components/menu/dist/styles/{color-menuoption-css.d.ts → default/color-menu-css.d.ts} +0 -0
  147. /package/components/menu/dist/styles/{style-menu-css.d.ts → default/color-menuoption-css.d.ts} +0 -0
  148. /package/components/menu/dist/styles/{style-menuoption-css.d.ts → default/style-menu-css.d.ts} +0 -0
  149. /package/components/menu/dist/styles/{tokens-css.d.ts → default/style-menuoption-css.d.ts} +0 -0
@@ -16,17 +16,24 @@
16
16
  <head>
17
17
  <meta charset="UTF-8" />
18
18
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
- <title>Auro Web Component Generator | auro-combobox custom element</title>
20
- <link
21
- rel="stylesheet"
22
- type="text/css"
23
- href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
24
- />
25
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
26
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
19
+ <title>Auro Web Component Demo | auro-combobox</title>
20
+
21
+ <!-- Prism.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-combobox's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
27
34
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
28
35
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
29
- </head>
36
+ </head>
30
37
  <body class="auro-markdown">
31
38
  <main></main>
32
39
 
@@ -1,8 +1,10 @@
1
1
  /**
2
2
  * @slot - Default slot for the menu content.
3
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
3
4
  * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
4
5
  * @slot label - Defines the content of the label.
5
6
  * @slot helpText - Defines the content of the helpText.
7
+ * @slot displayValue - Allows custom HTML content to display the selected value when the combobox is not focused. Only works with `snowflake` and `emphasized` layouts.
6
8
  * @event auroCombobox-valueSet - Notifies that the component has a new value set.
7
9
  * @event auroFormElement-validated - Notifies that the component value(s) have been validated.
8
10
  */
@@ -62,6 +64,13 @@ export class AuroCombobox extends AuroElement {
62
64
  type: StringConstructor;
63
65
  reflect: boolean;
64
66
  };
67
+ /**
68
+ * Specifies the input mask format.
69
+ */
70
+ format: {
71
+ type: StringConstructor;
72
+ reflect: boolean;
73
+ };
65
74
  /** Exposes inputmode attribute for input. */
66
75
  inputmode: {
67
76
  type: StringConstructor;
@@ -186,9 +195,10 @@ export class AuroCombobox extends AuroElement {
186
195
  };
187
196
  /**
188
197
  * Value selected for the dropdown menu.
189
- * @type {string}
190
198
  */
191
- value: string;
199
+ value: {
200
+ type: StringConstructor;
201
+ };
192
202
  /**
193
203
  * If declared, make bib.fullscreen.headline in HeadingDisplay.
194
204
  * Otherwise, Heading 600
@@ -256,8 +266,14 @@ export class AuroCombobox extends AuroElement {
256
266
  runtimeUtils: any;
257
267
  isHiddenWhileLoading: boolean;
258
268
  errorMessage: any;
259
- shape: string;
260
- size: string;
269
+ /**
270
+ * @private
271
+ */
272
+ private shape;
273
+ /**
274
+ * @private
275
+ */
276
+ private size;
261
277
  placement: string;
262
278
  offset: number;
263
279
  noFlip: boolean;
@@ -266,14 +282,34 @@ export class AuroCombobox extends AuroElement {
266
282
  bibtemplateTag: any;
267
283
  inputTag: any;
268
284
  helpTextTag: any;
285
+ /**
286
+ * Checks if the element is valid.
287
+ * @returns {boolean} - Returns true if the element is valid, false otherwise.
288
+ */
269
289
  isValid(): boolean;
290
+ /**
291
+ * Updates the filter for the available options based on the input value.
292
+ * @private
293
+ */
294
+ private updateFilter;
295
+ noMatchOption: any;
296
+ /**
297
+ * Syncs the values and states of this component, the input, and the menu, including this.optionSelected and this.menu.optionSelected.
298
+ * @private
299
+ * @returns {void}
300
+ */
301
+ private syncValuesAndStates;
302
+ /**
303
+ * Resets the menu matchWord to true.
304
+ * @private
305
+ */
306
+ private resetMenuMatchword;
270
307
  /**
271
308
  * Processes hidden state of all menu options and determines if there are any available options not hidden.
272
309
  * @private
273
310
  * @returns {void}
274
311
  */
275
312
  private handleMenuOptions;
276
- noMatchOption: any;
277
313
  /**
278
314
  * Determines the element error state based on the `required` attribute and input value.
279
315
  * @private
@@ -283,16 +319,14 @@ export class AuroCombobox extends AuroElement {
283
319
  options: any[] | NodeListOf<Element>;
284
320
  /**
285
321
  * Hides the dropdown bib if its open.
286
- * @private
287
322
  * @returns {void}
288
323
  */
289
- private hideBib;
324
+ hideBib(): void;
290
325
  /**
291
326
  * Shows the dropdown bib if there are options to show.
292
- * @private
293
327
  * @returns {void}
294
328
  */
295
- private showBib;
329
+ showBib(): void;
296
330
  /**
297
331
  * Binds all behavior needed to the dropdown after rendering.
298
332
  * @private
@@ -300,13 +334,16 @@ export class AuroCombobox extends AuroElement {
300
334
  */
301
335
  private configureDropdown;
302
336
  bibtemplate: any;
337
+ inputInBib: any;
303
338
  /**
304
- * When the dropdown is visible in fullscreen mode, the input is moved to the subheader slot of bibtemplate.
305
- * Otherwise, it's moved back to the trigger slot.
306
339
  * @private
307
- * @returns {void}
308
340
  */
309
- private transportInput;
341
+ private setInputFocus;
342
+ /**
343
+ * Update menu to default for fullscreen bib, otherwise to this.size and this.shape.
344
+ * @private
345
+ */
346
+ private updateMenuShapeSize;
310
347
  /**
311
348
  * Binds all behavior needed to the menu after rendering.
312
349
  * @private
@@ -338,6 +375,7 @@ export class AuroCombobox extends AuroElement {
338
375
  /**
339
376
  * Handle changes to the input value and trigger changes that should result.
340
377
  * @private
378
+ * @param {Event} event - The input event triggered by the input element.
341
379
  * @returns {void}
342
380
  */
343
381
  private handleInputValueChange;
@@ -361,12 +399,17 @@ export class AuroCombobox extends AuroElement {
361
399
  * @returns {void}
362
400
  */
363
401
  reset(): void;
402
+ /**
403
+ * Clears the current value of the combobox.
404
+ * @returns {void}
405
+ */
406
+ clear(): void;
364
407
  /**
365
408
  * Validates value.
366
409
  * @param {boolean} [force=false] - Whether to force validation.
367
410
  */
368
411
  validate(force?: boolean): void;
369
- updated(changedProperties: any): void;
412
+ updated(changedProperties: any): Promise<void>;
370
413
  /**
371
414
  * Applies slotted nodes to a target element with a new slot name.
372
415
  * @private