@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.10 → 0.0.0-pr624.100

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 (148) 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 +1242 -94
  6. package/components/bibtemplate/dist/registered.js +1242 -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 +54 -19
  10. package/components/checkbox/demo/api.min.js +71 -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 +71 -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 +6 -3
  18. package/components/checkbox/dist/index.js +70 -45
  19. package/components/checkbox/dist/registered.js +70 -45
  20. package/components/combobox/README.md +2 -0
  21. package/components/combobox/demo/api.html +16 -10
  22. package/components/combobox/demo/api.md +121 -8
  23. package/components/combobox/demo/api.min.js +3314 -1013
  24. package/components/combobox/demo/index.html +16 -10
  25. package/components/combobox/demo/index.md +20 -34
  26. package/components/combobox/demo/index.min.js +3314 -1013
  27. package/components/combobox/demo/readme.html +16 -9
  28. package/components/combobox/demo/readme.md +2 -0
  29. package/components/combobox/dist/auro-combobox.d.ts +59 -14
  30. package/components/combobox/dist/index.js +3008 -850
  31. package/components/combobox/dist/registered.js +3008 -850
  32. package/components/counter/demo/api.html +17 -10
  33. package/components/counter/demo/api.md +167 -21
  34. package/components/counter/demo/api.min.js +3419 -773
  35. package/components/counter/demo/index.html +17 -10
  36. package/components/counter/demo/index.md +191 -34
  37. package/components/counter/demo/index.min.js +3419 -773
  38. package/components/counter/demo/readme.html +16 -9
  39. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  40. package/components/counter/dist/auro-counter-group.d.ts +162 -11
  41. package/components/counter/dist/auro-counter.d.ts +16 -0
  42. package/components/counter/dist/helptextVersion.d.ts +2 -0
  43. package/components/counter/dist/iconVersion.d.ts +1 -1
  44. package/components/counter/dist/index.js +3419 -773
  45. package/components/counter/dist/registered.js +3419 -773
  46. package/components/datepicker/README.md +2 -1
  47. package/components/datepicker/demo/api.html +16 -10
  48. package/components/datepicker/demo/api.md +70 -28
  49. package/components/datepicker/demo/api.min.js +11970 -8081
  50. package/components/datepicker/demo/index.html +16 -10
  51. package/components/datepicker/demo/index.md +87 -8
  52. package/components/datepicker/demo/index.min.js +11970 -8081
  53. package/components/datepicker/demo/readme.html +16 -9
  54. package/components/datepicker/demo/readme.md +2 -1
  55. package/components/datepicker/dist/auro-datepicker.d.ts +152 -12
  56. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  57. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  58. package/components/datepicker/dist/index.js +14577 -10688
  59. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  60. package/components/datepicker/dist/registered.js +14577 -10688
  61. package/components/dropdown/demo/api.html +16 -10
  62. package/components/dropdown/demo/api.md +89 -281
  63. package/components/dropdown/demo/api.min.js +451 -271
  64. package/components/dropdown/demo/index.html +16 -10
  65. package/components/dropdown/demo/index.md +92 -362
  66. package/components/dropdown/demo/index.min.js +451 -271
  67. package/components/dropdown/demo/readme.html +16 -9
  68. package/components/dropdown/dist/auro-dropdown.d.ts +43 -82
  69. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  70. package/components/dropdown/dist/index.js +450 -270
  71. package/components/dropdown/dist/registered.js +450 -270
  72. package/components/form/demo/api.html +16 -9
  73. package/components/form/demo/api.md +1 -1
  74. package/components/form/demo/api.min.js +3 -3
  75. package/components/form/demo/autocomplete.html +19 -3
  76. package/components/form/demo/index.html +16 -9
  77. package/components/form/demo/index.min.js +3 -3
  78. package/components/form/demo/readme.html +16 -9
  79. package/components/form/demo/working.html +19 -13
  80. package/components/form/dist/auro-form.d.ts +1 -1
  81. package/components/form/dist/index.js +2 -2
  82. package/components/form/dist/registered.js +2 -2
  83. package/components/helptext/dist/auro-helptext.d.ts +0 -2
  84. package/components/helptext/dist/index.js +3 -5
  85. package/components/helptext/dist/registered.js +3 -5
  86. package/components/input/README.md +6 -2
  87. package/components/input/demo/api.html +16 -10
  88. package/components/input/demo/api.md +235 -135
  89. package/components/input/demo/api.min.js +1046 -301
  90. package/components/input/demo/index.html +16 -10
  91. package/components/input/demo/index.md +55 -32
  92. package/components/input/demo/index.min.js +1062 -317
  93. package/components/input/demo/readme.html +16 -9
  94. package/components/input/demo/readme.md +6 -2
  95. package/components/input/dist/auro-input.d.ts +26 -2
  96. package/components/input/dist/base-input.d.ts +47 -11
  97. package/components/input/dist/buttonVersion.d.ts +1 -1
  98. package/components/input/dist/iconVersion.d.ts +1 -1
  99. package/components/input/dist/index.js +1061 -316
  100. package/components/input/dist/registered.js +1061 -316
  101. package/components/layoutElement/dist/index.js +11 -8
  102. package/components/layoutElement/dist/registered.js +97 -0
  103. package/components/menu/demo/api.html +17 -10
  104. package/components/menu/demo/api.md +65 -8
  105. package/components/menu/demo/api.min.js +301 -63
  106. package/components/menu/demo/index.html +16 -10
  107. package/components/menu/demo/index.min.js +301 -63
  108. package/components/menu/demo/readme.html +16 -9
  109. package/components/menu/dist/auro-menu.d.ts +53 -7
  110. package/components/menu/dist/auro-menuoption.d.ts +21 -3
  111. package/components/menu/dist/iconVersion.d.ts +1 -1
  112. package/components/menu/dist/index.js +286 -48
  113. package/components/menu/dist/registered.js +286 -48
  114. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  115. package/components/radio/demo/api.html +16 -10
  116. package/components/radio/demo/api.md +41 -9
  117. package/components/radio/demo/api.min.js +95 -97
  118. package/components/radio/demo/index.html +16 -10
  119. package/components/radio/demo/index.min.js +95 -97
  120. package/components/radio/demo/readme.html +16 -9
  121. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  122. package/components/radio/dist/auro-radio.d.ts +11 -12
  123. package/components/radio/dist/index.js +94 -96
  124. package/components/radio/dist/registered.js +94 -96
  125. package/components/select/README.md +1 -0
  126. package/components/select/demo/api.html +16 -10
  127. package/components/select/demo/api.js +0 -2
  128. package/components/select/demo/api.md +159 -125
  129. package/components/select/demo/api.min.js +2281 -730
  130. package/components/select/demo/index.html +17 -11
  131. package/components/select/demo/index.md +1074 -259
  132. package/components/select/demo/index.min.js +2283 -720
  133. package/components/select/demo/readme.html +16 -9
  134. package/components/select/demo/readme.md +1 -0
  135. package/components/select/dist/auro-select.d.ts +86 -25
  136. package/components/select/dist/index.js +2175 -755
  137. package/components/select/dist/registered.js +2175 -755
  138. package/package.json +31 -28
  139. /package/components/{datepicker/dist/styles/default/color-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  140. /package/components/datepicker/dist/styles/{emphasized/style-css.d.ts → classic/color-css.d.ts} +0 -0
  141. /package/components/{input/dist/styles/default/input-css.d.ts → datepicker/dist/styles/classic/style-css.d.ts} +0 -0
  142. /package/components/{input/dist/styles/default/label-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  143. /package/components/{input/dist/styles/input-css.d.ts → datepicker/dist/styles/snowflake/style-css.d.ts} +0 -0
  144. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/style-css.d.ts} +0 -0
  145. /package/components/menu/dist/styles/{color-menuoption-css.d.ts → default/color-menu-css.d.ts} +0 -0
  146. /package/components/menu/dist/styles/{style-menu-css.d.ts → default/color-menuoption-css.d.ts} +0 -0
  147. /package/components/menu/dist/styles/{style-menuoption-css.d.ts → default/style-menu-css.d.ts} +0 -0
  148. /package/components/menu/dist/styles/{tokens-css.d.ts → default/style-menuoption-css.d.ts} +0 -0
package/components/datepicker/demo/readme.html CHANGED
@@ -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
 
package/components/datepicker/demo/readme.md CHANGED
@@ -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>
package/components/datepicker/dist/auro-datepicker.d.ts CHANGED
@@ -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.
@@ -70,6 +71,17 @@ export class AuroDatePicker extends AuroElement {
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 AuroElement {
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 AuroElement {
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,29 @@ export class AuroDatePicker extends AuroElement {
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;
319
365
  layout: string;
320
366
  shape: string;
321
367
  size: string;
@@ -341,7 +387,8 @@ export class AuroDatePicker extends AuroElement {
341
387
  * @param {String} focusInput - Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input.
342
388
  * @returns {void}
343
389
  */
344
- focus(focusInput: string): void;
390
+ focus(focusInput?: string): void;
391
+ hasFocus: boolean;
345
392
  /**
346
393
  * Converts valid time number to format used by wc-date-range API.
347
394
  * @private
@@ -410,6 +457,16 @@ export class AuroDatePicker extends AuroElement {
410
457
  * @returns {void}
411
458
  */
412
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;
413
470
  /**
414
471
  * Sets the readonly attribute on the inputs based on the window width.
415
472
  * @private
@@ -437,17 +494,41 @@ export class AuroDatePicker extends AuroElement {
437
494
  * @returns {void}
438
495
  */
439
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
+ resetValues(): void;
440
507
  /**
441
508
  * Resets component to initial state.
442
509
  * @returns {void}
443
510
  */
444
511
  reset(): void;
512
+ /**
513
+ * Clears the current value(s) of the datepicker.
514
+ * @returns {void}
515
+ */
516
+ clear(): void;
445
517
  /**
446
518
  * Validates value.
447
519
  * @param {boolean} [force=false] - Whether to force validation.
448
520
  */
449
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;
450
529
  updated(changedProperties: any): void;
530
+ monthFirst: boolean;
531
+ previousTabIndex: string;
451
532
  formattedFocusDate: boolean;
452
533
  formattedEndDate: boolean;
453
534
  formattedValue: boolean;
@@ -463,23 +544,82 @@ export class AuroDatePicker extends AuroElement {
463
544
  * @throws {Error} Throws an error if the slot cannot be found or injected.
464
545
  */
465
546
  private handleSlotToSlot;
547
+ /**
548
+ * Set up click handling for the datepicker.
549
+ * @private
550
+ * @returns {void}
551
+ */
552
+ private configureClickHandler;
466
553
  firstUpdated(): void;
467
554
  /**
468
- * Base wrapper for the datepicker layout - every layout follows this same structure
469
- * with minor variations in DOM structure.
470
- * @param {import("lit").TemplateResult} content - The content to be rendered inside the base layout.
471
- * @return {import("lit").TemplateResult}
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.
472
613
  * @private
614
+ * @returns {import('lit').TemplateResult} - Returns HTML for the help text and error message.
473
615
  */
474
- private _renderBaseLayout;
616
+ private renderHtmlHelpText;
475
617
  /**
476
- * Renders the emphasized layout for the datepicker.
618
+ * Separate method for rendering the calendar.
477
619
  * @private
478
- * @return {import("lit").TemplateResult}
620
+ * @returns {import('lit').TemplateResult}
479
621
  */
480
- private renderEmphasizedLayout;
481
- renderLayoutFromAttributes(): import("lit-html").TemplateResult;
482
- renderTempInputs(): import("lit-html").TemplateResult;
622
+ private renderCalendar;
483
623
  render(): import("lit-html").TemplateResult;
484
624
  }
485
625
  import { AuroElement } from "@aurodesignsystem/auro-layout-element";
package/components/datepicker/dist/buttonVersion.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const _default: "9.0.0";
1
+ declare const _default: "10.0.0";
2
2
  export default _default;
package/components/datepicker/dist/iconVersion.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: "8.0.1";
2
+ export default _default;