@aurodesignsystem-dev/auro-formkit 0.0.0-pr1492.5 → 0.0.0-pr1493.0

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 (153) hide show
  1. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +7 -0
  2. package/components/bibtemplate/dist/index.js +9 -1
  3. package/components/bibtemplate/dist/registered.js +9 -1
  4. package/components/checkbox/demo/css-only.html +57 -0
  5. package/components/checkbox/demo/css-only.md +146 -0
  6. package/components/checkbox/demo/customize.min.js +2 -2
  7. package/components/checkbox/demo/getting-started.min.js +2 -2
  8. package/components/checkbox/demo/index.min.js +2 -2
  9. package/components/checkbox/demo/pages.json +1 -1
  10. package/components/checkbox/demo/styles.min.css +1 -1
  11. package/components/checkbox/demo/why-checkbox.html +57 -0
  12. package/components/checkbox/demo/why-checkbox.md +86 -0
  13. package/components/checkbox/dist/index.js +2 -2
  14. package/components/checkbox/dist/registered.js +2 -2
  15. package/components/combobox/demo/css-only.html +57 -0
  16. package/components/combobox/demo/css-only.md +209 -0
  17. package/components/combobox/demo/customize.md +7 -3
  18. package/components/combobox/demo/customize.min.js +1846 -1804
  19. package/components/combobox/demo/getting-started.min.js +1846 -1804
  20. package/components/combobox/demo/index.min.js +1846 -1804
  21. package/components/combobox/demo/pages.json +1 -1
  22. package/components/combobox/demo/styles.min.css +1 -1
  23. package/components/combobox/demo/why-combobox.html +57 -0
  24. package/components/combobox/demo/why-combobox.md +113 -0
  25. package/components/combobox/dist/auro-combobox.d.ts +5 -0
  26. package/components/combobox/dist/index.js +796 -179
  27. package/components/combobox/dist/registered.js +796 -179
  28. package/components/counter/demo/css-only.html +57 -0
  29. package/components/counter/demo/css-only.md +184 -0
  30. package/components/counter/demo/customize.min.js +276 -16
  31. package/components/counter/demo/index.min.js +276 -16
  32. package/components/counter/demo/keyboard-behavior.md +1 -0
  33. package/components/counter/demo/pages.json +1 -1
  34. package/components/counter/demo/styles.min.css +1 -1
  35. package/components/counter/demo/why-counter.html +57 -0
  36. package/components/counter/demo/why-counter.md +108 -0
  37. package/components/counter/dist/index.js +5457 -193
  38. package/components/counter/dist/registered.js +5457 -193
  39. package/components/datepicker/demo/accessibility.md +54 -3
  40. package/components/datepicker/demo/api.md +65 -55
  41. package/components/datepicker/demo/css-only.html +57 -0
  42. package/components/datepicker/demo/css-only.md +151 -0
  43. package/components/datepicker/demo/customize.html +2 -0
  44. package/components/datepicker/demo/customize.js +19 -0
  45. package/components/datepicker/demo/customize.md +474 -298
  46. package/components/datepicker/demo/customize.min.js +36243 -0
  47. package/components/datepicker/demo/design.md +5 -3
  48. package/components/datepicker/demo/getting-started.md +6 -6
  49. package/components/datepicker/demo/index.js +5 -1
  50. package/components/datepicker/demo/index.md +113 -16
  51. package/components/datepicker/demo/index.min.js +2735 -396
  52. package/components/datepicker/demo/keyboard-behavior.md +201 -2
  53. package/components/datepicker/demo/pages.json +1 -1
  54. package/components/datepicker/demo/styles.min.css +1 -1
  55. package/components/datepicker/demo/voiceover.md +21 -12
  56. package/components/datepicker/demo/why-datepicker.html +57 -0
  57. package/components/datepicker/demo/why-datepicker.md +133 -0
  58. package/components/datepicker/dist/index.js +2649 -397
  59. package/components/datepicker/dist/registered.js +2649 -397
  60. package/components/datepicker/dist/src/auro-calendar-cell.d.ts +116 -14
  61. package/components/datepicker/dist/src/auro-calendar-month.d.ts +54 -1
  62. package/components/datepicker/dist/src/auro-calendar.d.ts +264 -0
  63. package/components/datepicker/dist/src/auro-datepicker.d.ts +189 -53
  64. package/components/datepicker/dist/src/datepickerKeyboardStrategy.d.ts +5 -3
  65. package/components/datepicker/dist/src/utilities.d.ts +0 -14
  66. package/components/dropdown/demo/accessibility.md +11 -0
  67. package/components/dropdown/demo/api.md +1 -0
  68. package/components/dropdown/demo/css-only.html +57 -0
  69. package/components/dropdown/demo/css-only.md +219 -0
  70. package/components/dropdown/demo/customize.md +3 -0
  71. package/components/dropdown/demo/customize.min.js +265 -13
  72. package/components/dropdown/demo/getting-started.min.js +265 -13
  73. package/components/dropdown/demo/index.min.js +265 -13
  74. package/components/dropdown/demo/keyboard-behavior.md +1 -0
  75. package/components/dropdown/demo/pages.json +1 -1
  76. package/components/dropdown/demo/styles.min.css +1 -1
  77. package/components/dropdown/demo/why-dropdown.html +57 -0
  78. package/components/dropdown/demo/why-dropdown.md +97 -0
  79. package/components/dropdown/dist/auro-dropdown.d.ts +36 -1
  80. package/components/dropdown/dist/index.js +265 -13
  81. package/components/dropdown/dist/registered.js +265 -13
  82. package/components/form/demo/css-only.html +57 -0
  83. package/components/form/demo/css-only.md +156 -0
  84. package/components/form/demo/customize.min.js +11084 -8072
  85. package/components/form/demo/getting-started.min.js +11084 -8072
  86. package/components/form/demo/index.min.js +11084 -8072
  87. package/components/form/demo/pages.json +1 -1
  88. package/components/form/demo/registerDemoDeps.min.js +11083 -8071
  89. package/components/form/demo/styles.min.css +1 -1
  90. package/components/form/demo/why-form.html +57 -0
  91. package/components/form/demo/why-form.md +101 -0
  92. package/components/input/demo/css-only.html +57 -0
  93. package/components/input/demo/css-only.md +199 -0
  94. package/components/input/demo/customize.md +625 -636
  95. package/components/input/demo/customize.min.js +150 -75
  96. package/components/input/demo/getting-started.md +16 -6
  97. package/components/input/demo/getting-started.min.js +150 -75
  98. package/components/input/demo/index.min.js +150 -75
  99. package/components/input/demo/pages.json +1 -1
  100. package/components/input/demo/styles.min.css +1 -1
  101. package/components/input/demo/why-input.html +57 -0
  102. package/components/input/demo/why-input.md +121 -0
  103. package/components/input/dist/auro-input-util.d.ts +1 -1
  104. package/components/input/dist/base-input.d.ts +16 -0
  105. package/components/input/dist/index.js +150 -75
  106. package/components/input/dist/registered.js +150 -75
  107. package/components/input/dist/utilities.d.ts +1 -2
  108. package/components/menu/demo/api.md +41 -45
  109. package/components/menu/demo/css-only.html +57 -0
  110. package/components/menu/demo/css-only.md +166 -0
  111. package/components/menu/demo/customize.md +0 -28
  112. package/components/menu/demo/index.min.js +779 -1354
  113. package/components/menu/demo/pages.json +1 -1
  114. package/components/menu/demo/styles.min.css +1 -1
  115. package/components/menu/demo/why-menu.html +57 -0
  116. package/components/menu/demo/why-menu.md +104 -0
  117. package/components/menu/dist/auro-menu.d.ts +95 -110
  118. package/components/menu/dist/auro-menuoption.d.ts +32 -138
  119. package/components/menu/dist/index.js +753 -1308
  120. package/components/menu/dist/registered.js +765 -1308
  121. package/components/radio/demo/css-only.html +57 -0
  122. package/components/radio/demo/css-only.md +151 -0
  123. package/components/radio/demo/customize.min.js +1764 -0
  124. package/components/radio/demo/demo-support.min.js +55807 -0
  125. package/components/radio/demo/getting-started.js +1 -1
  126. package/components/radio/demo/getting-started.md +1 -1
  127. package/components/radio/demo/getting-started.min.js +1783 -0
  128. package/components/radio/demo/index.min.js +2 -2
  129. package/components/radio/demo/pages.json +1 -1
  130. package/components/radio/demo/styles.min.css +1 -1
  131. package/components/radio/demo/why-radio.html +57 -0
  132. package/components/radio/demo/why-radio.md +92 -0
  133. package/components/radio/dist/index.js +2 -2
  134. package/components/radio/dist/registered.js +2 -2
  135. package/components/select/demo/api.md +1 -0
  136. package/components/select/demo/css-only.html +57 -0
  137. package/components/select/demo/css-only.md +203 -0
  138. package/components/select/demo/customize.md +78 -3
  139. package/components/select/demo/customize.min.js +1341 -1533
  140. package/components/select/demo/getting-started.min.js +1341 -1533
  141. package/components/select/demo/index.min.js +1341 -1533
  142. package/components/select/demo/keyboard-behavior.md +19 -0
  143. package/components/select/demo/pages.json +1 -1
  144. package/components/select/demo/styles.min.css +1 -1
  145. package/components/select/demo/why-select.html +57 -0
  146. package/components/select/demo/why-select.md +128 -0
  147. package/components/select/dist/auro-select.d.ts +38 -2
  148. package/components/select/dist/index.js +435 -52
  149. package/components/select/dist/registered.js +435 -52
  150. package/components/select/dist/selectUtils.d.ts +12 -0
  151. package/custom-elements.json +4206 -3708
  152. package/package.json +8 -8
  153. package/components/menu/dist/auro-menu.context.d.ts +0 -238
@@ -5,103 +5,62 @@
5
5
  * @slot default - The default slot for the menu option text.
6
6
  *
7
7
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
8
+ * @event auroMenuOption-click - Notifies that this option has been clicked.
8
9
  */
9
10
  export class AuroMenuOption extends AuroElement {
10
- /**
11
- * This will register this element with the browser.
12
- * @param {string} [name="auro-menuoption"] - The name of the element that you want to register.
13
- *
14
- * @example
15
- * AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
16
- *
17
- */
18
- static register(name?: string): void;
19
11
  static get properties(): {
20
- /**
21
- * When true, disables the menu option.
22
- */
23
- disabled: {
12
+ noCheckmark: {
24
13
  type: BooleanConstructor;
25
14
  reflect: boolean;
26
15
  };
27
- /**
28
- * @private
29
- */
30
- event: {
31
- type: StringConstructor;
16
+ selected: {
17
+ type: BooleanConstructor;
32
18
  reflect: boolean;
33
19
  };
34
- /**
35
- * @private
36
- */
37
- layout: {
38
- type: StringConstructor;
20
+ disabled: {
21
+ type: BooleanConstructor;
22
+ reflect: boolean;
39
23
  };
40
- /**
41
- * Allows users to set a unique key for the menu option for specified option selection. If no key is provided, the value property will be used.
42
- */
43
- key: {
24
+ value: {
44
25
  type: StringConstructor;
45
26
  reflect: boolean;
46
27
  };
47
- /**
48
- * @private
49
- */
50
- menuService: {
51
- type: ObjectConstructor;
52
- state: boolean;
28
+ tabIndex: {
29
+ type: NumberConstructor;
30
+ reflect: boolean;
53
31
  };
54
32
  /**
55
33
  * @private
56
34
  */
57
- matchWord: {
35
+ event: {
58
36
  type: StringConstructor;
59
- state: boolean;
60
- };
61
- /**
62
- * @private
63
- */
64
- noCheckmark: {
65
- type: BooleanConstructor;
66
37
  reflect: boolean;
67
38
  };
68
39
  /**
69
- * When true, marks this option as the "no matching results" placeholder shown by combobox when the user's input does not match any available options. Enables distinct styling and prevents the option from being treated as a selectable match.
40
+ * When true, marks this option as the "no matching results" placeholder shown by combobox
41
+ * when the user's input does not match any available options.
70
42
  */
71
43
  noMatch: {
72
44
  type: BooleanConstructor;
73
45
  reflect: boolean;
74
46
  attribute: string;
75
47
  };
76
- /**
77
- * Specifies that an option is selected.
78
- */
79
- selected: {
80
- type: BooleanConstructor;
81
- reflect: boolean;
82
- };
83
- /**
84
- * Specifies the tab index of the menu option.
85
- */
86
- tabIndex: {
87
- type: NumberConstructor;
88
- reflect: boolean;
89
- };
90
- /**
91
- * Specifies the value to be sent to a server.
92
- */
93
- value: {
48
+ layout: {
94
49
  type: StringConstructor;
50
+ attribute: string;
95
51
  reflect: boolean;
96
52
  };
97
53
  };
98
54
  static get styles(): import("lit").CSSResult[];
99
55
  /**
100
- * Returns whether the menu option is currently active and selectable.
101
- * An option is considered active if it is not hidden, not disabled, and not static.
102
- * @returns {boolean} True if the option is active, false otherwise.
56
+ * This will register this element with the browser.
57
+ * @param {string} [name="auro-menuoption"] - The name of element that you want to register to.
58
+ *
59
+ * @example
60
+ * AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
61
+ *
103
62
  */
104
- get isActive(): boolean;
63
+ static register(name?: string): void;
105
64
  /**
106
65
  * @private
107
66
  */
@@ -119,87 +78,23 @@ export class AuroMenuOption extends AuroElement {
119
78
  * @private
120
79
  */
121
80
  private runtimeUtils;
122
- menuService: Object | null;
123
- unsubscribe: any;
124
81
  /**
125
- * Handles changes from the menu service and updates the option's state.
126
- * This function synchronizes the option's properties and selection/highlight state with menu events.
127
- * @param {Object} event - The event object from the menu service.
82
+ * Returns whether the menu option is currently active and selectable.
83
+ * @returns {boolean}
128
84
  */
129
- handleMenuChange(event: Object): void;
130
- _contextConsumer: ContextConsumer<import("@lit/context").Context<"menu-context", any>, this> | undefined;
131
- key: any;
85
+ get isActive(): boolean;
132
86
  firstUpdated(): void;
133
87
  updated(changedProperties: any): void;
88
+ handleMenuChange(): void;
89
+ setSelected(value: any): void;
90
+ updateActive(active: any): void;
91
+ active: any;
92
+ attachTo(): void;
134
93
  /**
135
- * Sets up event listeners for user interaction with the menu option.
136
- * This function enables click and mouse enter events to trigger selection and highlighting logic.
137
- */
138
- bindEvents(): void;
139
- /**
140
- * Attaches this menu option to a menu service and subscribes to its events.
141
- * This method enables the option to participate in menu selection and highlighting logic.
142
- * @param {Object} service - The menu service instance to attach to.
143
- */
144
- attachTo(service: Object): void;
145
- active: boolean | undefined;
146
- /**
147
- * Updates the internal selected state of the menu option bypassing 'updated' and triggers custom events if selected.
148
- * This function ensures the option's selection state is synchronized with menu logic and notifies listeners.
149
- * @param {boolean} isSelected - Whether the option should be marked as selected.
150
- */
151
- setInternalSelected(isSelected: boolean): void;
152
- internalUpdateInProgress: boolean | undefined;
153
- /**
154
- * Sets the selected state of the menu option.
155
- * This function updates whether the option is currently selected.
156
- * @param {boolean} isSelected - Whether the option should be marked as selected.
157
- * @deprecated Simply modify the `selected` property directly instead.
158
- */
159
- setSelected(isSelected: boolean): void;
160
- /**
161
- * Updates the active state and visual highlighting of the menu option.
162
- * This function toggles the option's active status and applies or removes the active CSS class.
163
- * @param {boolean} isActive - Whether the option should be marked as active.
164
- * @deprecated Simply modify the `active` property directly instead.
165
- */
166
- updateActive(isActive: boolean): void;
167
- /**
168
- * Updates the CSS class for the menu option based on its active state.
169
- * This function adds or removes the 'active' class to visually indicate the option's active status.
170
- * @private
171
- */
172
- private updateActiveClasses;
173
- /**
174
- * Updates the visual highlighting of text within the menu option based on the current match word.
175
- * This function highlights matching text segments and manages nested spacers for display formatting.
176
- * @private
177
- */
178
- private updateTextHighlight;
179
- /**
180
- * Handles click events on the menu option, toggling its selected state.
181
- * This function dispatches a click event and updates selection if the option is not disabled.
94
+ * Handles click events on the menu option.
182
95
  * @private
183
96
  */
184
97
  private handleClick;
185
- /**
186
- * Handles mouse enter events to highlight the menu option.
187
- * This function updates the menu service to set this option as the currently highlighted item if not disabled.
188
- * @private
189
- */
190
- private handleMouseEnter;
191
- /**
192
- * Dispatches custom events defined for this menu option.
193
- * This function notifies listeners when a custom event is triggered by the option.
194
- * @private
195
- */
196
- private handleCustomEvent;
197
- /**
198
- * Dispatches a click event for this menu option.
199
- * This function notifies listeners that the option has been clicked.
200
- * @private
201
- */
202
- private dispatchClickEvent;
203
98
  /**
204
99
  * Generates an HTML element containing an SVG icon based on the provided `svgContent`.
205
100
  *
@@ -216,4 +111,3 @@ export class AuroMenuOption extends AuroElement {
216
111
  protected renderLayout(): void;
217
112
  }
218
113
  import { AuroElement } from "../../layoutElement/src/auroElement.js";
219
- import { ContextConsumer } from '@lit/context';