@aurodesignsystem/auro-formkit 4.0.1 → 5.0.0-rc-1002.1.1

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 (175) hide show
  1. package/CHANGELOG.md +193 -3
  2. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
  3. package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
  4. package/components/bibtemplate/dist/headerVersion.d.ts +1 -1
  5. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  6. package/components/bibtemplate/dist/index.js +1184 -105
  7. package/components/bibtemplate/dist/registered.js +1184 -105
  8. package/components/checkbox/README.md +1 -1
  9. package/components/checkbox/demo/api.html +16 -10
  10. package/components/checkbox/demo/api.md +54 -19
  11. package/components/checkbox/demo/api.min.js +81 -45
  12. package/components/checkbox/demo/index.html +16 -10
  13. package/components/checkbox/demo/index.md +2 -2
  14. package/components/checkbox/demo/index.min.js +81 -45
  15. package/components/checkbox/demo/readme.html +16 -9
  16. package/components/checkbox/demo/readme.md +1 -1
  17. package/components/checkbox/dist/auro-checkbox-group.d.ts +2 -2
  18. package/components/checkbox/dist/auro-checkbox.d.ts +10 -3
  19. package/components/checkbox/dist/index.js +80 -44
  20. package/components/checkbox/dist/registered.js +80 -44
  21. package/components/combobox/README.md +2 -0
  22. package/components/combobox/demo/api.html +16 -10
  23. package/components/combobox/demo/api.md +124 -7
  24. package/components/combobox/demo/api.min.js +4542 -1330
  25. package/components/combobox/demo/index.html +16 -10
  26. package/components/combobox/demo/index.md +108 -4
  27. package/components/combobox/demo/index.min.js +4542 -1330
  28. package/components/combobox/demo/readme.html +16 -9
  29. package/components/combobox/demo/readme.md +2 -0
  30. package/components/combobox/dist/auro-combobox.d.ts +81 -18
  31. package/components/combobox/dist/index.js +4588 -1520
  32. package/components/combobox/dist/registered.js +4588 -1520
  33. package/components/counter/demo/api.html +17 -10
  34. package/components/counter/demo/api.md +167 -21
  35. package/components/counter/demo/api.min.js +3621 -866
  36. package/components/counter/demo/index.html +17 -10
  37. package/components/counter/demo/index.md +191 -34
  38. package/components/counter/demo/index.min.js +3621 -866
  39. package/components/counter/demo/readme.html +16 -9
  40. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  41. package/components/counter/dist/auro-counter-group.d.ts +162 -11
  42. package/components/counter/dist/auro-counter.d.ts +16 -0
  43. package/components/counter/dist/helptextVersion.d.ts +2 -0
  44. package/components/counter/dist/iconVersion.d.ts +1 -1
  45. package/components/counter/dist/index.js +3619 -864
  46. package/components/counter/dist/registered.js +3619 -864
  47. package/components/datepicker/README.md +2 -1
  48. package/components/datepicker/demo/api.html +16 -10
  49. package/components/datepicker/demo/api.md +80 -30
  50. package/components/datepicker/demo/api.min.js +14795 -10365
  51. package/components/datepicker/demo/index.html +16 -10
  52. package/components/datepicker/demo/index.md +96 -4
  53. package/components/datepicker/demo/index.min.js +14795 -10365
  54. package/components/datepicker/demo/readme.html +16 -9
  55. package/components/datepicker/demo/readme.md +2 -1
  56. package/components/datepicker/dist/auro-datepicker.d.ts +163 -4
  57. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  58. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  59. package/components/datepicker/dist/index.js +14916 -10486
  60. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  61. package/components/datepicker/dist/registered.js +14916 -10486
  62. package/components/dropdown/demo/api.html +16 -10
  63. package/components/dropdown/demo/api.md +94 -262
  64. package/components/dropdown/demo/api.min.js +738 -259
  65. package/components/dropdown/demo/index.html +16 -10
  66. package/components/dropdown/demo/index.md +93 -266
  67. package/components/dropdown/demo/index.min.js +738 -259
  68. package/components/dropdown/demo/readme.html +16 -9
  69. package/components/dropdown/dist/auro-dropdown.d.ts +92 -73
  70. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  71. package/components/dropdown/dist/index.js +710 -231
  72. package/components/dropdown/dist/registered.js +710 -231
  73. package/components/dropdown/dist/styles/classic/style-css.d.ts +2 -0
  74. package/components/dropdown/dist/styles/emphasized/style-css.d.ts +2 -0
  75. package/components/dropdown/dist/styles/shapeSize-css.d.ts +2 -0
  76. package/components/dropdown/dist/styles/snowflake/style-css.d.ts +2 -0
  77. package/components/form/demo/api.html +16 -9
  78. package/components/form/demo/api.md +1 -1
  79. package/components/form/demo/api.min.js +3 -3
  80. package/components/form/demo/autocomplete.html +19 -3
  81. package/components/form/demo/index.html +16 -9
  82. package/components/form/demo/index.min.js +3 -3
  83. package/components/form/demo/readme.html +16 -9
  84. package/components/form/demo/working.html +19 -13
  85. package/components/form/dist/auro-form.d.ts +1 -1
  86. package/components/form/dist/index.js +2 -2
  87. package/components/form/dist/registered.js +2 -2
  88. package/components/helptext/dist/auro-helptext.d.ts +0 -2
  89. package/components/helptext/dist/index.js +2 -4
  90. package/components/helptext/dist/registered.js +2 -4
  91. package/components/input/README.md +6 -2
  92. package/components/input/demo/api.html +16 -10
  93. package/components/input/demo/api.md +258 -144
  94. package/components/input/demo/api.min.js +1550 -497
  95. package/components/input/demo/index.html +17 -11
  96. package/components/input/demo/index.md +95 -27
  97. package/components/input/demo/index.min.js +1549 -496
  98. package/components/input/demo/readme.html +16 -9
  99. package/components/input/demo/readme.md +6 -2
  100. package/components/input/dist/auro-input.d.ts +139 -3
  101. package/components/input/dist/base-input.d.ts +80 -26
  102. package/components/input/dist/buttonVersion.d.ts +1 -1
  103. package/components/input/dist/iconVersion.d.ts +1 -1
  104. package/components/input/dist/index.js +1504 -451
  105. package/components/input/dist/registered.js +1504 -451
  106. package/components/input/dist/styles/classic/color-css.d.ts +2 -0
  107. package/components/input/dist/styles/classic/style-css.d.ts +2 -0
  108. package/components/input/dist/styles/default/borders-css.d.ts +2 -0
  109. package/components/input/dist/styles/default/color-css.d.ts +2 -0
  110. package/components/input/dist/styles/default/mixins-css.d.ts +2 -0
  111. package/components/input/dist/styles/default/notificationIcons-css.d.ts +2 -0
  112. package/components/input/dist/styles/default/style-css.d.ts +2 -0
  113. package/components/input/dist/styles/emphasized/color-css.d.ts +2 -0
  114. package/components/input/dist/styles/emphasized/style-css.d.ts +2 -0
  115. package/components/input/dist/styles/shapeSize-css.d.ts +2 -0
  116. package/components/input/dist/styles/snowflake/style-css.d.ts +2 -0
  117. package/components/layoutElement/dist/auroElement.d.ts +34 -0
  118. package/components/layoutElement/dist/index.d.ts +2 -0
  119. package/components/layoutElement/dist/index.js +98 -0
  120. package/components/layoutElement/dist/registered.js +98 -0
  121. package/components/menu/demo/api.html +17 -10
  122. package/components/menu/demo/api.md +65 -8
  123. package/components/menu/demo/api.min.js +304 -65
  124. package/components/menu/demo/index.html +16 -10
  125. package/components/menu/demo/index.min.js +304 -65
  126. package/components/menu/demo/readme.html +16 -9
  127. package/components/menu/dist/auro-menu.d.ts +53 -7
  128. package/components/menu/dist/auro-menuoption.d.ts +21 -3
  129. package/components/menu/dist/iconVersion.d.ts +1 -1
  130. package/components/menu/dist/index.js +289 -50
  131. package/components/menu/dist/registered.js +289 -50
  132. package/components/menu/dist/styles/default/color-menu-css.d.ts +2 -0
  133. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  134. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  135. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  136. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  137. package/components/radio/demo/api.html +16 -10
  138. package/components/radio/demo/api.md +41 -9
  139. package/components/radio/demo/api.min.js +93 -95
  140. package/components/radio/demo/index.html +16 -10
  141. package/components/radio/demo/index.min.js +93 -95
  142. package/components/radio/demo/readme.html +16 -9
  143. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  144. package/components/radio/dist/auro-radio.d.ts +11 -12
  145. package/components/radio/dist/index.js +92 -94
  146. package/components/radio/dist/registered.js +92 -94
  147. package/components/select/README.md +1 -0
  148. package/components/select/demo/api.html +16 -10
  149. package/components/select/demo/api.js +0 -2
  150. package/components/select/demo/api.md +156 -114
  151. package/components/select/demo/api.min.js +3126 -657
  152. package/components/select/demo/index.html +17 -10
  153. package/components/select/demo/index.md +398 -62
  154. package/components/select/demo/index.min.js +3129 -648
  155. package/components/select/demo/readme.html +16 -9
  156. package/components/select/demo/readme.md +1 -0
  157. package/components/select/dist/auro-select.d.ts +173 -18
  158. package/components/select/dist/helptextVersion.d.ts +2 -0
  159. package/components/select/dist/index.js +3128 -791
  160. package/components/select/dist/registered.js +3128 -791
  161. package/components/select/dist/styles/shapeSize-css.d.ts +2 -0
  162. package/components/select/dist/styles/tokens-css.d.ts +2 -0
  163. package/package.json +33 -32
  164. package/packages/build-tools/src/postinstall.mjs +0 -12
  165. /package/components/{dropdown/dist/styles/bibColors-css.d.ts → combobox/dist/styles/emphasized/style-css.d.ts} +0 -0
  166. /package/components/{dropdown/dist/styles/bibStyles-css.d.ts → combobox/dist/styles/snowflake/style-css.d.ts} +0 -0
  167. /package/components/{input/dist/styles/borders-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  168. /package/components/{input/dist/styles/input-css.d.ts → datepicker/dist/styles/classic/color-css.d.ts} +0 -0
  169. /package/components/{input/dist/styles/label-css.d.ts → datepicker/dist/styles/classic/style-css.d.ts} +0 -0
  170. /package/components/{input/dist/styles/notificationIcons-css.d.ts → datepicker/dist/styles/shapeSize-css.d.ts} +0 -0
  171. /package/components/{menu/dist/styles/color-menu-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  172. /package/components/{menu/dist/styles/color-menuoption-css.d.ts → datepicker/dist/styles/snowflake/style-css.d.ts} +0 -0
  173. /package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/bibColors-css.d.ts} +0 -0
  174. /package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  175. /package/components/{menu/dist/styles/tokens-css.d.ts → dropdown/dist/styles/classic/color-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-datepicker 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-datepicker</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-datepicker'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
 
@@ -83,7 +83,8 @@ This configuration enables proper module resolution for the component's TypeScri
83
83
  <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
84
84
 
85
85
  ```html
86
- <auro-datepicker>
86
+ <auro-datepicker required="">
87
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
87
88
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
88
89
  <span slot="fromLabel">Choose a date</span>
89
90
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -1,5 +1,6 @@
1
1
  /**
2
2
  * @slot helpText - Defines the content of the helpText.
3
+ * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
3
4
  * @slot bib.fullscreen.headline - Defines the headline to display above bib.fullscreen.dateLabels in the mobile layout.
4
5
  * @slot bib.fullscreen.dateLabel - Defines the content to display above selected dates in the mobile layout.
5
6
  * @slot toLabel - Defines the label content for the second input when the `range` attribute is used.
@@ -19,7 +20,7 @@
19
20
  * @event auroFormElement-validated - Notifies that the component value(s) have been validated.
20
21
  * @event auroDatePicker-newSlotContent - Notifies that new slot content has been added to the datepicker.
21
22
  */
22
- export class AuroDatePicker extends LitElement {
23
+ export class AuroDatePicker extends AuroElement {
23
24
  static get properties(): {
24
25
  /**
25
26
  * If declared, bib's position will be automatically calculated where to appear.
@@ -70,6 +71,17 @@ export class AuroDatePicker extends LitElement {
70
71
  type: StringConstructor;
71
72
  reflect: boolean;
72
73
  };
74
+ hasFocus: {
75
+ type: BooleanConstructor;
76
+ reflect: boolean;
77
+ };
78
+ /**
79
+ * @private
80
+ */
81
+ hasValue: {
82
+ type: BooleanConstructor;
83
+ reflect: boolean;
84
+ };
73
85
  /**
74
86
  * Specifies the date format. The default is `mm/dd/yyyy`.
75
87
  */
@@ -160,6 +172,22 @@ export class AuroDatePicker extends LitElement {
160
172
  type: BooleanConstructor;
161
173
  reflect: boolean;
162
174
  };
175
+ /**
176
+ * Placeholder text to display in the input(s) when no value is set.
177
+ */
178
+ placeholder: {
179
+ type: StringConstructor;
180
+ reflect: boolean;
181
+ };
182
+ /**
183
+ * Optional placeholder text to display in the second input when using date range.
184
+ * By default, datepicker will use `placeholder` for both inputs if placeholder is
185
+ * specified, but placeholderendDate is not.
186
+ */
187
+ placeholderEndDate: {
188
+ type: StringConstructor;
189
+ reflect: boolean;
190
+ };
163
191
  /**
164
192
  * Position where the bib should appear relative to the trigger.
165
193
  * Accepted values:
@@ -286,7 +314,6 @@ export class AuroDatePicker extends LitElement {
286
314
  format: string;
287
315
  fullscreenBreakpoint: string;
288
316
  monthNames: string[];
289
- monthFirst: boolean;
290
317
  placement: string;
291
318
  offset: number;
292
319
  noFlip: boolean;
@@ -312,10 +339,32 @@ export class AuroDatePicker extends LitElement {
312
339
  * @private
313
340
  */
314
341
  private dropdownTag;
342
+ /**
343
+ * @private
344
+ */
345
+ private buttonTag;
346
+ /**
347
+ * @private
348
+ */
349
+ private iconTag;
315
350
  /**
316
351
  * @private
317
352
  */
318
353
  private inputTag;
354
+ /**
355
+ * @private
356
+ */
357
+ private helpTextTag;
358
+ /**
359
+ * Handles click events on the datepicker.
360
+ * @param {PointerEvent} event - The pointer event object.
361
+ * @private
362
+ * @returns {void}
363
+ */
364
+ private handleClick;
365
+ layout: string;
366
+ shape: string;
367
+ size: string;
319
368
  /**
320
369
  * A convenience wrapper for `value` and `valueEnd`, uses the new Auro "array value pattern".
321
370
  * @returns {string[]}
@@ -338,7 +387,8 @@ export class AuroDatePicker extends LitElement {
338
387
  * @param {String} focusInput - Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input.
339
388
  * @returns {void}
340
389
  */
341
- focus(focusInput: string): void;
390
+ focus(focusInput?: string): void;
391
+ hasFocus: boolean;
342
392
  /**
343
393
  * Converts valid time number to format used by wc-date-range API.
344
394
  * @private
@@ -407,6 +457,16 @@ export class AuroDatePicker extends LitElement {
407
457
  * @returns {void}
408
458
  */
409
459
  private configureDatepicker;
460
+ /**
461
+ * Hides the dropdown bib if its open.
462
+ * @returns {void}
463
+ */
464
+ hideBib(): void;
465
+ /**
466
+ * Shows the dropdown bib if there are options to show.
467
+ * @returns {void}
468
+ */
469
+ showBib(): void;
410
470
  /**
411
471
  * Sets the readonly attribute on the inputs based on the window width.
412
472
  * @private
@@ -434,17 +494,41 @@ export class AuroDatePicker extends LitElement {
434
494
  * @returns {void}
435
495
  */
436
496
  private pushSlotContent;
497
+ /**
498
+ * Handle enter/space keydown on the reset button.
499
+ * @private
500
+ * @param {KeyboardEvent} event - The keydown event.
501
+ */
502
+ private handleKeydownReset;
503
+ /**
504
+ * Resets values without resetting validation.
505
+ */
506
+ resetInputs(): void;
437
507
  /**
438
508
  * Resets component to initial state.
439
509
  * @returns {void}
440
510
  */
441
511
  reset(): void;
512
+ /**
513
+ * Clears the current value(s) of the datepicker.
514
+ * @returns {void}
515
+ */
516
+ clear(): void;
442
517
  /**
443
518
  * Validates value.
444
519
  * @param {boolean} [force=false] - Whether to force validation.
445
520
  */
446
521
  validate(force?: boolean): void;
522
+ /**
523
+ * Private method for interacting with the `hasValue` property.
524
+ * @private
525
+ */
526
+ private setHasValue;
527
+ hasValue: boolean;
528
+ get hasError(): boolean;
447
529
  updated(changedProperties: any): void;
530
+ monthFirst: boolean;
531
+ previousTabIndex: string;
448
532
  formattedFocusDate: boolean;
449
533
  formattedEndDate: boolean;
450
534
  formattedValue: boolean;
@@ -460,7 +544,82 @@ export class AuroDatePicker extends LitElement {
460
544
  * @throws {Error} Throws an error if the slot cannot be found or injected.
461
545
  */
462
546
  private handleSlotToSlot;
547
+ /**
548
+ * Set up click handling for the datepicker.
549
+ * @private
550
+ * @returns {void}
551
+ */
552
+ private configureClickHandler;
463
553
  firstUpdated(): void;
554
+ /**
555
+ * Renders the snowflake layout for the datepicker.
556
+ * @private
557
+ * @returns {import("lit").TemplateResult}
558
+ */
559
+ private renderSnowflakeLayout;
560
+ /**
561
+ * Renders the snowflake layout for the datepicker.
562
+ * @private
563
+ * @returns {import("lit").TemplateResult}
564
+ */
565
+ private renderClassicLayout;
566
+ /**
567
+ * Renders the layout based on the `layout` attribute.
568
+ * @private
569
+ * @returns {import('lit').TemplateResult}
570
+ */
571
+ private renderLayoutFromAttributes;
572
+ /**
573
+ * Simple formatter that ONLY WORKS FOR US DATES.
574
+ * Returns formatted date like Apr 21 or Dec 25.
575
+ * @private
576
+ * @param {string} date - Date format should be in a format Date constructor accepts, like '2023-04-21' or '2023/04/21'.
577
+ * @returns {string}
578
+ */
579
+ private formatShortDate;
580
+ /**
581
+ * Format and render the provided date value.
582
+ * @private
583
+ * @param {string} dateValue - The date value to format and render.
584
+ * @returns {import('lit').TemplateResult}
585
+ */
586
+ private renderDisplayTextDate;
587
+ /**
588
+ * Renders the HTML inputs for the datepicker.
589
+ * @private
590
+ * @returns {import('lit').TemplateResult}
591
+ */
592
+ private renderHtmlInputs;
593
+ /**
594
+ * Renders the clear action button.
595
+ * @private
596
+ * @returns {import('lit').TemplateResult}
597
+ */
598
+ private renderHtmlActionClear;
599
+ /**
600
+ * Renders the error icon.
601
+ * @private
602
+ * @returns {import('lit').TemplateResult}
603
+ */
604
+ private renderHtmlIconError;
605
+ /**
606
+ * Renders the calendar icon.
607
+ * @private
608
+ * @returns {import('lit').TemplateResult}
609
+ */
610
+ private renderHtmlIconCalendar;
611
+ /**
612
+ * Returns HTML for the help text and error message.
613
+ * @private
614
+ * @returns {import('lit').TemplateResult} - Returns HTML for the help text and error message.
615
+ */
616
+ private renderHtmlHelpText;
617
+ /**
618
+ * Separate method for rendering the calendar.
619
+ * @private
620
+ * @returns {import('lit').TemplateResult}
621
+ */
622
+ private renderCalendar;
464
623
  render(): import("lit-html").TemplateResult;
465
624
  }
466
- import { LitElement } from "lit";
625
+ import { AuroElement } from "@aurodesignsystem/auro-layout-element";
@@ -1,2 +1,2 @@
1
- declare const _default: "9.0.0";
1
+ declare const _default: "10.0.0";
2
2
  export default _default;
@@ -0,0 +1,2 @@
1
+ declare const _default: "8.0.1";
2
+ export default _default;