@aurodesignsystem-dev/auro-formkit 0.0.0-pr1413.2 → 0.0.0-pr1419.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.
- package/package.json +32 -31
- package/components/bibtemplate/dist/auro-bibtemplate.d.ts +0 -66
- package/components/bibtemplate/dist/buttonVersion.d.ts +0 -2
- package/components/bibtemplate/dist/headerVersion.d.ts +0 -2
- package/components/bibtemplate/dist/iconVersion.d.ts +0 -2
- package/components/bibtemplate/dist/index.d.ts +0 -2
- package/components/bibtemplate/dist/index.js +0 -395
- package/components/bibtemplate/dist/registered.js +0 -395
- package/components/bibtemplate/dist/styles/color-css.d.ts +0 -2
- package/components/bibtemplate/dist/styles/style-css.d.ts +0 -2
- package/components/bibtemplate/dist/styles/tokens-css.d.ts +0 -2
- package/components/checkbox/demo/api.md +0 -489
- package/components/checkbox/demo/api.min.js +0 -2133
- package/components/checkbox/demo/index.md +0 -55
- package/components/checkbox/demo/index.min.js +0 -2108
- package/components/checkbox/demo/keyboardBehavior.md +0 -0
- package/components/checkbox/demo/readme.md +0 -142
- package/components/checkbox/dist/auro-checkbox-group.d.ts +0 -176
- package/components/checkbox/dist/auro-checkbox.d.ts +0 -209
- package/components/checkbox/dist/index.d.ts +0 -3
- package/components/checkbox/dist/index.js +0 -2057
- package/components/checkbox/dist/registered.js +0 -2058
- package/components/checkbox/dist/styles/auro-checkbox-css.d.ts +0 -2
- package/components/checkbox/dist/styles/auro-checkbox-group-css.d.ts +0 -2
- package/components/checkbox/dist/styles/color-css.d.ts +0 -2
- package/components/checkbox/dist/styles/colorGroup-css.d.ts +0 -2
- package/components/checkbox/dist/styles/tokens-css.d.ts +0 -2
- package/components/combobox/demo/api.md +0 -2287
- package/components/combobox/demo/api.min.js +0 -17800
- package/components/combobox/demo/index.md +0 -196
- package/components/combobox/demo/index.min.js +0 -17705
- package/components/combobox/demo/keyboardBehavior.md +0 -281
- package/components/combobox/demo/readme.md +0 -158
- package/components/combobox/dist/auro-combobox.d.ts +0 -566
- package/components/combobox/dist/comboboxKeyboardStrategy.d.ts +0 -8
- package/components/combobox/dist/index.d.ts +0 -2
- package/components/combobox/dist/index.js +0 -15604
- package/components/combobox/dist/registered.js +0 -15606
- package/components/combobox/dist/styles/emphasized/style-css.d.ts +0 -2
- package/components/combobox/dist/styles/snowflake/style-css.d.ts +0 -2
- package/components/combobox/dist/styles/style-css.d.ts +0 -2
- package/components/counter/demo/api.md +0 -1285
- package/components/counter/demo/api.min.js +0 -8112
- package/components/counter/demo/index.md +0 -92
- package/components/counter/demo/index.min.js +0 -8093
- package/components/counter/demo/keyboardBehavior.md +0 -127
- package/components/counter/demo/readme.md +0 -161
- package/components/counter/dist/auro-counter-button.d.ts +0 -14
- package/components/counter/dist/auro-counter-group.d.ts +0 -390
- package/components/counter/dist/auro-counter-wrapper.d.ts +0 -17
- package/components/counter/dist/auro-counter.d.ts +0 -136
- package/components/counter/dist/buttonVersion.d.ts +0 -2
- package/components/counter/dist/iconVersion.d.ts +0 -2
- package/components/counter/dist/index.d.ts +0 -3
- package/components/counter/dist/index.js +0 -8015
- package/components/counter/dist/keyboardStrategy.d.ts +0 -4
- package/components/counter/dist/registered.js +0 -8016
- package/components/counter/dist/styles/color-css.d.ts +0 -2
- package/components/counter/dist/styles/counter-button-color-css.d.ts +0 -2
- package/components/counter/dist/styles/counter-button-css.d.ts +0 -2
- package/components/counter/dist/styles/counter-group-css.d.ts +0 -2
- package/components/counter/dist/styles/counter-wrapper-color-css.d.ts +0 -2
- package/components/counter/dist/styles/counter-wrapper-css.d.ts +0 -2
- package/components/counter/dist/styles/shapeSize-css.d.ts +0 -2
- package/components/counter/dist/styles/style-css.d.ts +0 -2
- package/components/counter/dist/styles/tokens-css.d.ts +0 -2
- package/components/datepicker/demo/api.md +0 -1824
- package/components/datepicker/demo/api.min.js +0 -24510
- package/components/datepicker/demo/index.md +0 -158
- package/components/datepicker/demo/index.min.js +0 -24231
- package/components/datepicker/demo/keyboardBehavior.md +0 -24
- package/components/datepicker/demo/readme.md +0 -137
- package/components/datepicker/dist/auro-calendar-cell.d.ts +0 -169
- package/components/datepicker/dist/auro-calendar-month.d.ts +0 -20
- package/components/datepicker/dist/auro-calendar.d.ts +0 -173
- package/components/datepicker/dist/auro-datepicker.d.ts +0 -715
- package/components/datepicker/dist/buttonVersion.d.ts +0 -2
- package/components/datepicker/dist/datepickerKeyboardStrategy.d.ts +0 -1
- package/components/datepicker/dist/iconVersion.d.ts +0 -2
- package/components/datepicker/dist/index.d.ts +0 -2
- package/components/datepicker/dist/index.js +0 -24146
- package/components/datepicker/dist/popoverVersion.d.ts +0 -2
- package/components/datepicker/dist/registered.js +0 -24146
- package/components/datepicker/dist/styles/classic/color-css.d.ts +0 -2
- package/components/datepicker/dist/styles/classic/style-css.d.ts +0 -2
- package/components/datepicker/dist/styles/color-calendar-css.d.ts +0 -2
- package/components/datepicker/dist/styles/color-cell-css.d.ts +0 -2
- package/components/datepicker/dist/styles/color-css.d.ts +0 -2
- package/components/datepicker/dist/styles/color-month-css.d.ts +0 -2
- package/components/datepicker/dist/styles/shapeSize-css.d.ts +0 -2
- package/components/datepicker/dist/styles/snowflake/color-css.d.ts +0 -2
- package/components/datepicker/dist/styles/snowflake/style-css.d.ts +0 -2
- package/components/datepicker/dist/styles/style-auro-calendar-cell-css.d.ts +0 -2
- package/components/datepicker/dist/styles/style-auro-calendar-css.d.ts +0 -2
- package/components/datepicker/dist/styles/style-auro-calendar-month-css.d.ts +0 -2
- package/components/datepicker/dist/styles/style-css.d.ts +0 -2
- package/components/datepicker/dist/styles/tokens-css.d.ts +0 -2
- package/components/datepicker/dist/utilities.d.ts +0 -78
- package/components/datepicker/dist/utilitiesCalendar.d.ts +0 -38
- package/components/datepicker/dist/utilitiesCalendarRender.d.ts +0 -50
- package/components/datepicker/dist/vendor/wc-range-datepicker/day.d.ts +0 -5
- package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-calendar.d.ts +0 -60
- package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-cell.d.ts +0 -1
- package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker.d.ts +0 -57
- package/components/dropdown/demo/api.md +0 -1358
- package/components/dropdown/demo/api.min.js +0 -4894
- package/components/dropdown/demo/index.md +0 -283
- package/components/dropdown/demo/index.min.js +0 -4829
- package/components/dropdown/demo/keyboardBehavior.md +0 -77
- package/components/dropdown/demo/readme.md +0 -160
- package/components/dropdown/dist/auro-dropdown.d.ts +0 -482
- package/components/dropdown/dist/auro-dropdownBib.d.ts +0 -128
- package/components/dropdown/dist/dropdownBibKeyboardStrategy.d.ts +0 -7
- package/components/dropdown/dist/iconVersion.d.ts +0 -2
- package/components/dropdown/dist/index.d.ts +0 -2
- package/components/dropdown/dist/index.js +0 -4722
- package/components/dropdown/dist/registered.js +0 -4722
- package/components/dropdown/dist/styles/classic/bibColors-css.d.ts +0 -2
- package/components/dropdown/dist/styles/classic/bibStyles-css.d.ts +0 -2
- package/components/dropdown/dist/styles/classic/color-css.d.ts +0 -2
- package/components/dropdown/dist/styles/classic/style-css.d.ts +0 -2
- package/components/dropdown/dist/styles/color-css.d.ts +0 -2
- package/components/dropdown/dist/styles/emphasized/style-css.d.ts +0 -2
- package/components/dropdown/dist/styles/shapeSize-css.d.ts +0 -2
- package/components/dropdown/dist/styles/snowflake/style-css.d.ts +0 -2
- package/components/dropdown/dist/styles/style-css.d.ts +0 -2
- package/components/dropdown/dist/styles/tokens-css.d.ts +0 -2
- package/components/form/demo/api.md +0 -319
- package/components/form/demo/api.min.js +0 -70505
- package/components/form/demo/index.md +0 -128
- package/components/form/demo/index.min.js +0 -70505
- package/components/form/demo/keyboardBehavior.md +0 -0
- package/components/form/demo/readme.md +0 -145
- package/components/form/dist/auro-form.d.ts +0 -280
- package/components/form/dist/index.d.ts +0 -2
- package/components/form/dist/index.js +0 -718
- package/components/form/dist/registered.d.ts +0 -1
- package/components/form/dist/registered.js +0 -718
- package/components/form/dist/styles/style-css.d.ts +0 -2
- package/components/helptext/dist/auro-helptext.d.ts +0 -69
- package/components/helptext/dist/index.d.ts +0 -2
- package/components/helptext/dist/index.js +0 -231
- package/components/helptext/dist/registered.js +0 -231
- package/components/helptext/dist/styles/color-css.d.ts +0 -2
- package/components/helptext/dist/styles/style-css.d.ts +0 -2
- package/components/helptext/dist/styles/tokens-css.d.ts +0 -2
- package/components/input/demo/api.md +0 -1397
- package/components/input/demo/api.min.js +0 -7460
- package/components/input/demo/index.md +0 -161
- package/components/input/demo/index.min.js +0 -7380
- package/components/input/demo/keyboardBehavior.md +0 -0
- package/components/input/demo/readme.md +0 -134
- package/components/input/dist/auro-input.d.ts +0 -206
- package/components/input/dist/base-input.d.ts +0 -629
- package/components/input/dist/buttonVersion.d.ts +0 -2
- package/components/input/dist/i18n.d.ts +0 -18
- package/components/input/dist/iconVersion.d.ts +0 -2
- package/components/input/dist/index.d.ts +0 -2
- package/components/input/dist/index.js +0 -7292
- package/components/input/dist/registered.js +0 -7292
- package/components/input/dist/styles/classic/color-css.d.ts +0 -2
- package/components/input/dist/styles/classic/style-css.d.ts +0 -2
- package/components/input/dist/styles/color-css.d.ts +0 -2
- package/components/input/dist/styles/default/borders-css.d.ts +0 -2
- package/components/input/dist/styles/default/color-css.d.ts +0 -2
- package/components/input/dist/styles/default/mixins-css.d.ts +0 -2
- package/components/input/dist/styles/default/notificationIcons-css.d.ts +0 -2
- package/components/input/dist/styles/default/style-css.d.ts +0 -2
- package/components/input/dist/styles/emphasized/color-css.d.ts +0 -2
- package/components/input/dist/styles/emphasized/style-css.d.ts +0 -2
- package/components/input/dist/styles/mixins-css.d.ts +0 -2
- package/components/input/dist/styles/shapeSize-css.d.ts +0 -2
- package/components/input/dist/styles/snowflake/style-css.d.ts +0 -2
- package/components/input/dist/styles/style-css.d.ts +0 -2
- package/components/input/dist/styles/tokens-css.d.ts +0 -2
- package/components/input/dist/utilities.d.ts +0 -25
- package/components/layoutElement/dist/auroElement.d.ts +0 -40
- package/components/layoutElement/dist/index.d.ts +0 -2
- package/components/layoutElement/dist/index.js +0 -107
- package/components/layoutElement/dist/registered.js +0 -107
- package/components/menu/demo/api.md +0 -1200
- package/components/menu/demo/api.min.js +0 -2413
- package/components/menu/demo/index.md +0 -72
- package/components/menu/demo/index.min.js +0 -2306
- package/components/menu/demo/keyboardBehavior.md +0 -0
- package/components/menu/demo/readme.md +0 -145
- package/components/menu/dist/auro-menu-utils.d.ts +0 -34
- package/components/menu/dist/auro-menu.context.d.ts +0 -239
- package/components/menu/dist/auro-menu.d.ts +0 -316
- package/components/menu/dist/auro-menuoption.d.ts +0 -210
- package/components/menu/dist/iconVersion.d.ts +0 -2
- package/components/menu/dist/index.d.ts +0 -4
- package/components/menu/dist/index.js +0 -2269
- package/components/menu/dist/registered.js +0 -2217
- package/components/menu/dist/styles/default/color-menu-css.d.ts +0 -2
- package/components/menu/dist/styles/default/color-menuoption-css.d.ts +0 -2
- package/components/menu/dist/styles/default/style-menu-css.d.ts +0 -2
- package/components/menu/dist/styles/default/style-menuoption-css.d.ts +0 -2
- package/components/menu/dist/styles/default/tokens-css.d.ts +0 -2
- package/components/radio/demo/api.md +0 -675
- package/components/radio/demo/api.min.js +0 -2210
- package/components/radio/demo/index.md +0 -73
- package/components/radio/demo/index.min.js +0 -2167
- package/components/radio/demo/keyboardBehavior.md +0 -0
- package/components/radio/demo/readme.md +0 -141
- package/components/radio/dist/auro-radio-group.d.ts +0 -250
- package/components/radio/dist/auro-radio.d.ts +0 -180
- package/components/radio/dist/index.d.ts +0 -3
- package/components/radio/dist/index.js +0 -2116
- package/components/radio/dist/registered.js +0 -2117
- package/components/radio/dist/styles/auro-radio-group-css.d.ts +0 -2
- package/components/radio/dist/styles/color-css.d.ts +0 -2
- package/components/radio/dist/styles/groupColor-css.d.ts +0 -2
- package/components/radio/dist/styles/style-css.d.ts +0 -2
- package/components/radio/dist/styles/tokens-css.d.ts +0 -2
- package/components/select/demo/api.md +0 -2378
- package/components/select/demo/api.min.js +0 -10400
- package/components/select/demo/index.md +0 -355
- package/components/select/demo/index.min.js +0 -10307
- package/components/select/demo/keyboardBehavior.md +0 -246
- package/components/select/demo/readme.md +0 -148
- package/components/select/dist/auro-select.d.ts +0 -545
- package/components/select/dist/index.d.ts +0 -2
- package/components/select/dist/index.js +0 -8218
- package/components/select/dist/registered.js +0 -8218
- package/components/select/dist/selectKeyboardStrategy.d.ts +0 -11
- package/components/select/dist/styles/emphasized/color-css.d.ts +0 -2
- package/components/select/dist/styles/shapeSize-css.d.ts +0 -2
- package/components/select/dist/styles/style-css.d.ts +0 -2
- package/components/select/dist/styles/tokens-css.d.ts +0 -2
- package/custom-elements.json +0 -18768
|
File without changes
|
|
@@ -1,145 +0,0 @@
|
|
|
1
|
-
<!--
|
|
2
|
-
The README.md file is a compiled document. No edits should be made directly to this file.
|
|
3
|
-
|
|
4
|
-
README.md is created by running `npm run build:docs`.
|
|
5
|
-
|
|
6
|
-
This file is generated based on a template fetched from
|
|
7
|
-
`../../docs/templates/componentReadmeTemplate.md`
|
|
8
|
-
and copied to `./componentDocs/README.md` each time the docs are compiled.
|
|
9
|
-
|
|
10
|
-
The following sections are editable by making changes to the following files:
|
|
11
|
-
|
|
12
|
-
| SECTION | DESCRIPTION | FILE LOCATION |
|
|
13
|
-
|------------------------|---------------------------------------------------|-------------------------------------|
|
|
14
|
-
| Description | Description of the component | `./docs/partials/description.md` |
|
|
15
|
-
| Use Cases | Examples for when to use this component | `./docs/partials/useCases.md` |
|
|
16
|
-
| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
|
|
17
|
-
| Component Example Code | HTML sample code of the components use | `./apiExamples/basic.html` |
|
|
18
|
-
-->
|
|
19
|
-
|
|
20
|
-
# Menu
|
|
21
|
-
|
|
22
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
|
|
23
|
-
<!-- The below content is automatically added from ./docs/partials/description.md -->
|
|
24
|
-
The `<auro-menu>` element provides a list of options for a user to select from.
|
|
25
|
-
|
|
26
|
-
A list of options is created within the `<slot>` of the `<auro-menu>` element by using the `<auro-menuoption>` element to define options. Use a standard `<hr>` element to create dividers within the list of options.
|
|
27
|
-
|
|
28
|
-
The `<auro-menu>` element is designed for contextual menus, e.g. a dropdown menus. They are not intended to be used for navigation menus which have a different semantic meaning. The `<auro-menu>` element does not support hide/show functionality within its scope. This functionality will be managed by a wrapping element such as a drop-down menu composite element.
|
|
29
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
30
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
|
|
31
|
-
<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
|
|
32
|
-
<!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
|
|
33
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
34
|
-
|
|
35
|
-
## Menu Use Cases
|
|
36
|
-
|
|
37
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
|
|
38
|
-
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
|
|
39
|
-
The `<auro-menu>` element should be used in situations where users may:
|
|
40
|
-
|
|
41
|
-
* A user needs to select one option from a list of options.
|
|
42
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
43
|
-
|
|
44
|
-
## Getting Started
|
|
45
|
-
|
|
46
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
|
|
47
|
-
<!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
|
|
48
|
-
|
|
49
|
-
#### NPM Installation
|
|
50
|
-
|
|
51
|
-
```shell
|
|
52
|
-
$ npm i @aurodesignsystem/auro-formkit
|
|
53
|
-
```
|
|
54
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
55
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
|
|
56
|
-
<!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
|
|
57
|
-
|
|
58
|
-
### TypeScript Module Resolution
|
|
59
|
-
|
|
60
|
-
When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
|
|
61
|
-
|
|
62
|
-
```json
|
|
63
|
-
{
|
|
64
|
-
"compilerOptions": {
|
|
65
|
-
"moduleResolution": "bundler"
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
This configuration enables proper module resolution for the component's TypeScript files.
|
|
71
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
72
|
-
|
|
73
|
-
## Install from CDN
|
|
74
|
-
|
|
75
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
|
|
76
|
-
<!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
|
|
77
|
-
In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
|
|
78
|
-
|
|
79
|
-
```html
|
|
80
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-menu/+esm"></script>
|
|
81
|
-
```
|
|
82
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
83
|
-
|
|
84
|
-
## Formkit Development
|
|
85
|
-
|
|
86
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
|
|
87
|
-
<!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
|
|
88
|
-
|
|
89
|
-
### Filtering
|
|
90
|
-
|
|
91
|
-
Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
|
|
92
|
-
|
|
93
|
-
To only develop a single component, use the `--filter` flag:
|
|
94
|
-
|
|
95
|
-
```shell
|
|
96
|
-
npx turbo dev --filter=@aurodesignsystem/auro-input
|
|
97
|
-
```
|
|
98
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
99
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
|
|
100
|
-
<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
|
|
101
|
-
|
|
102
|
-
## Custom Component Registration for Version Management
|
|
103
|
-
|
|
104
|
-
There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
|
|
105
|
-
|
|
106
|
-
When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
|
|
107
|
-
|
|
108
|
-
However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
|
|
109
|
-
|
|
110
|
-
You can do this by importing only the component class and using the `register(name)` method with a unique name:
|
|
111
|
-
|
|
112
|
-
```js
|
|
113
|
-
// Import the class only
|
|
114
|
-
import { AuroMenu, AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menu/class';
|
|
115
|
-
|
|
116
|
-
// Register with a custom name if desired
|
|
117
|
-
AuroMenu.register('custom-menu');
|
|
118
|
-
AuroMenuOption.register('custom-menu-option');
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
This will create a new custom element `<custom-menu>` and `<custom-menu-option>` that behaves exactly like `<auro-menu>` and `<auro-menu-option>`, allowing both to coexist on the same page without interfering with each other.
|
|
122
|
-
|
|
123
|
-
<div class="exampleWrapper exampleWrapper--flex">
|
|
124
|
-
<custom-menu>
|
|
125
|
-
<custom-menuoption value="stops">Stops</custom-menuoption>
|
|
126
|
-
<custom-menuoption value="price">Price</custom-menuoption>
|
|
127
|
-
<custom-menuoption value="duration">Duration</custom-menuoption>
|
|
128
|
-
<custom-menuoption value="departure">Departure</custom-menuoption>
|
|
129
|
-
<custom-menuoption value="arrival">Arrival</custom-menuoption>
|
|
130
|
-
</custom-menu>
|
|
131
|
-
</div>
|
|
132
|
-
<auro-accordion alignRight>
|
|
133
|
-
<span slot="trigger">See code</span>
|
|
134
|
-
|
|
135
|
-
```html
|
|
136
|
-
<custom-menu>
|
|
137
|
-
<custom-menuoption value="stops">Stops</custom-menuoption>
|
|
138
|
-
<custom-menuoption value="price">Price</custom-menuoption>
|
|
139
|
-
<custom-menuoption value="duration">Duration</custom-menuoption>
|
|
140
|
-
<custom-menuoption value="departure">Departure</custom-menuoption>
|
|
141
|
-
<custom-menuoption value="arrival">Arrival</custom-menuoption>
|
|
142
|
-
</custom-menu>
|
|
143
|
-
```
|
|
144
|
-
</auro-accordion>
|
|
145
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Converts value to an array.
|
|
3
|
-
* If the value is a JSON string representing an array, it will be parsed.
|
|
4
|
-
* If the value is already an array, it is returned.
|
|
5
|
-
* If the value is undefined, it returns undefined.
|
|
6
|
-
* @private
|
|
7
|
-
* @param {any} value - The value to be converted. Can be a string, array, or undefined.
|
|
8
|
-
* @returns {Array|undefined} - The converted array or undefined.
|
|
9
|
-
* @throws {Error} - Throws an error if the value is not an array, undefined,
|
|
10
|
-
* or if the value cannot be parsed into an array from a JSON string.
|
|
11
|
-
*/
|
|
12
|
-
export function arrayConverter(value: any): any[] | undefined;
|
|
13
|
-
/**
|
|
14
|
-
* Compare two arrays for equality.
|
|
15
|
-
* @private
|
|
16
|
-
* @param {Array} arr1 - First array to compare.
|
|
17
|
-
* @param {Array} arr2 - Second array to compare.
|
|
18
|
-
* @returns {boolean} True if arrays are equal.
|
|
19
|
-
*/
|
|
20
|
-
export function arraysAreEqual(arr1: any[], arr2: any[]): boolean;
|
|
21
|
-
/**
|
|
22
|
-
* Validates if an option can be interacted with.
|
|
23
|
-
* @private
|
|
24
|
-
* @param {HTMLElement} option - The option to check.
|
|
25
|
-
* @returns {boolean} True if option is interactive.
|
|
26
|
-
*/
|
|
27
|
-
export function isOptionInteractive(option: HTMLElement): boolean;
|
|
28
|
-
/**
|
|
29
|
-
* Helper method to dispatch custom events.
|
|
30
|
-
* @param {HTMLElement} element - Element to dispatch event from.
|
|
31
|
-
* @param {string} eventName - Name of the event to dispatch.
|
|
32
|
-
* @param {Object} [detail] - Optional detail object to include with the event.
|
|
33
|
-
*/
|
|
34
|
-
export function dispatchMenuEvent(element: HTMLElement, eventName: string, detail?: any): void;
|
|
@@ -1,239 +0,0 @@
|
|
|
1
|
-
export class MenuService {
|
|
2
|
-
/**
|
|
3
|
-
* CONSTRUCTOR
|
|
4
|
-
*/
|
|
5
|
-
/**
|
|
6
|
-
* Creates a new MenuService instance.
|
|
7
|
-
* @param {Object} options - The options object.
|
|
8
|
-
* @param {AuroMenu} options.host - The host element that this service will control. Required.
|
|
9
|
-
* @throws {Error} If the host is not provided.
|
|
10
|
-
*/
|
|
11
|
-
constructor({ host }?: {
|
|
12
|
-
host: AuroMenu;
|
|
13
|
-
});
|
|
14
|
-
/**
|
|
15
|
-
* PROPERTIES AND GETTERS
|
|
16
|
-
*/
|
|
17
|
-
/**
|
|
18
|
-
* Gets the list of registered menu options.
|
|
19
|
-
* @returns {AuroMenuOption[]}
|
|
20
|
-
*/
|
|
21
|
-
get menuOptions(): AuroMenuOption[];
|
|
22
|
-
/**
|
|
23
|
-
* Gets the currently highlighted option.
|
|
24
|
-
* @returns {AuroMenuOption|null}
|
|
25
|
-
*/
|
|
26
|
-
get highlightedOption(): AuroMenuOption | null;
|
|
27
|
-
/**
|
|
28
|
-
* Gets the current value(s) of the selected option(s).
|
|
29
|
-
* @returns {string|string[]|undefined}
|
|
30
|
-
*/
|
|
31
|
-
get currentValue(): string | string[] | undefined;
|
|
32
|
-
/**
|
|
33
|
-
* Gets the label(s) of the currently selected option(s).
|
|
34
|
-
* @returns {string}
|
|
35
|
-
*/
|
|
36
|
-
get currentLabel(): string;
|
|
37
|
-
/**
|
|
38
|
-
* Gets the string representation of the current value(s).
|
|
39
|
-
* For multi-select, this is a JSON stringified array.
|
|
40
|
-
* @returns {string|undefined}
|
|
41
|
-
*/
|
|
42
|
-
get stringValue(): string | undefined;
|
|
43
|
-
/**
|
|
44
|
-
* Gets the key(s) of the currently selected option(s).
|
|
45
|
-
* @returns {string|string[]|undefined}
|
|
46
|
-
*/
|
|
47
|
-
get currentKeys(): string | string[] | undefined;
|
|
48
|
-
host: AuroMenu;
|
|
49
|
-
size: any;
|
|
50
|
-
shape: any;
|
|
51
|
-
noCheckmark: any;
|
|
52
|
-
disabled: any;
|
|
53
|
-
matchWord: any;
|
|
54
|
-
multiSelect: any;
|
|
55
|
-
allowDeselect: any;
|
|
56
|
-
selectAllMatchingOptions: any;
|
|
57
|
-
highlightedIndex: number;
|
|
58
|
-
_menuOptions: any[];
|
|
59
|
-
_subscribers: any[];
|
|
60
|
-
internalUpdateInProgress: boolean;
|
|
61
|
-
selectedOptions: any[];
|
|
62
|
-
_pendingValue: string | number | (string | number)[];
|
|
63
|
-
_pendingRetryScheduled: boolean;
|
|
64
|
-
_pendingRetryCount: number;
|
|
65
|
-
/**
|
|
66
|
-
* PROPERTY SYNCING
|
|
67
|
-
*/
|
|
68
|
-
/**
|
|
69
|
-
* Handles host updates.
|
|
70
|
-
* This is a lit reactive lifecycle method.
|
|
71
|
-
* This comes from the Lit controller interface provided by adding this service as a controller to the host.
|
|
72
|
-
* See constructor for `this.host.addController(this)`
|
|
73
|
-
* You can read more about Lit reactive controllers here: https://lit.dev/docs/composition/controllers/
|
|
74
|
-
*/
|
|
75
|
-
hostUpdated(): void;
|
|
76
|
-
/**
|
|
77
|
-
* Handles host disconnection and memory cleanup.
|
|
78
|
-
*/
|
|
79
|
-
hostDisconnected(): void;
|
|
80
|
-
/**
|
|
81
|
-
* Sets a property value if it exists on the instance and the value has changed.
|
|
82
|
-
* @param {string} property
|
|
83
|
-
* @param {any} value
|
|
84
|
-
*/
|
|
85
|
-
setProperty(property: string, value: any): void;
|
|
86
|
-
/**
|
|
87
|
-
* Sets multiple properties on the instance.
|
|
88
|
-
* @param {Object} properties - Key-value pairs of properties to set.
|
|
89
|
-
*/
|
|
90
|
-
setProperties(properties: any): void;
|
|
91
|
-
/**
|
|
92
|
-
* MENU OPTION HIGHLIGHTING
|
|
93
|
-
*/
|
|
94
|
-
/**
|
|
95
|
-
* Highlights the next active option in the menu.
|
|
96
|
-
*/
|
|
97
|
-
highlightNext(): void;
|
|
98
|
-
/**
|
|
99
|
-
* Highlights the previous active option in the menu.
|
|
100
|
-
*/
|
|
101
|
-
highlightPrevious(): void;
|
|
102
|
-
/**
|
|
103
|
-
* Moves the highlighted option in the specified direction.
|
|
104
|
-
* @param {string} direction - The direction to move the highlight ("next" or "previous").
|
|
105
|
-
*/
|
|
106
|
-
moveHighlightedOption(direction: string): void;
|
|
107
|
-
/**
|
|
108
|
-
* Sets the highlighted index to the specified option.
|
|
109
|
-
* @param {AuroMenuOption} option - The option to highlight.
|
|
110
|
-
*/
|
|
111
|
-
setHighlightedOption(option: AuroMenuOption): void;
|
|
112
|
-
/**
|
|
113
|
-
* Sets the highlighted option to the option at the specified index if it exists.
|
|
114
|
-
* @param {number} index
|
|
115
|
-
*/
|
|
116
|
-
setHighlightedIndex(index: number): void;
|
|
117
|
-
/**
|
|
118
|
-
* Selects the currently highlighted option.
|
|
119
|
-
*/
|
|
120
|
-
selectHighlightedOption(): void;
|
|
121
|
-
/**
|
|
122
|
-
* SELECTION AND DESELECTION METHODS
|
|
123
|
-
*/
|
|
124
|
-
/**
|
|
125
|
-
* Selects one or more options in a batch operation
|
|
126
|
-
* @param {AuroMenuOption|AuroMenuOption[]} options - Single option or array of options to select
|
|
127
|
-
*/
|
|
128
|
-
selectOptions(options: AuroMenuOption | AuroMenuOption[]): void;
|
|
129
|
-
/**
|
|
130
|
-
* Deselects one or more options in a batch operation
|
|
131
|
-
* @param {AuroMenuOption|AuroMenuOption[]} options - Single option or array of options to deselect
|
|
132
|
-
*/
|
|
133
|
-
deselectOptions(options: AuroMenuOption | AuroMenuOption[]): void;
|
|
134
|
-
/**
|
|
135
|
-
* Selects a single option.
|
|
136
|
-
* @param {AuroMenuOption} option
|
|
137
|
-
*/
|
|
138
|
-
selectOption(option: AuroMenuOption): void;
|
|
139
|
-
/**
|
|
140
|
-
* Deselects a single option.
|
|
141
|
-
* @param {AuroMenuOption} option
|
|
142
|
-
*/
|
|
143
|
-
deselectOption(option: AuroMenuOption): void;
|
|
144
|
-
/**
|
|
145
|
-
* Toggles the selection state of a single option.
|
|
146
|
-
* @param {AuroMenuOption} option
|
|
147
|
-
*/
|
|
148
|
-
toggleOption(option: AuroMenuOption): void;
|
|
149
|
-
/**
|
|
150
|
-
* Selects options based on their value(s) when compared to a passed value or values.
|
|
151
|
-
* Value or values are normalized to an array of strings that can be matched to option keys.
|
|
152
|
-
* @param {string|number|Array<string|number>} value - The value(s) to select.
|
|
153
|
-
*/
|
|
154
|
-
selectByValue(value: string | number | Array<string | number>): void;
|
|
155
|
-
/**
|
|
156
|
-
* Queues a pending value and schedules a bounded retry.
|
|
157
|
-
* @param {string|number|Array<string|number>} value - The value to retry.
|
|
158
|
-
*/
|
|
159
|
-
queuePendingValue(value: string | number | Array<string | number>): void;
|
|
160
|
-
/**
|
|
161
|
-
* Clears pending retry state.
|
|
162
|
-
*/
|
|
163
|
-
clearPendingValue(): void;
|
|
164
|
-
/**
|
|
165
|
-
* Resets the selected options to an empty array.
|
|
166
|
-
*/
|
|
167
|
-
reset(): void;
|
|
168
|
-
/**
|
|
169
|
-
* SUBSCRIPTION, NOTIFICATION AND EVENT DISPATCH METHODS
|
|
170
|
-
*/
|
|
171
|
-
/**
|
|
172
|
-
* Subscribes a callback to menu service events.
|
|
173
|
-
* @param {Function} callback - The callback to invoke on events.
|
|
174
|
-
*/
|
|
175
|
-
subscribe(callback: Function): void;
|
|
176
|
-
/**
|
|
177
|
-
* Remove a previously subscribed callback from menu service events.
|
|
178
|
-
* @param {Function} callback
|
|
179
|
-
*/
|
|
180
|
-
unsubscribe(callback: Function): void;
|
|
181
|
-
/**
|
|
182
|
-
* Stages an update to notify subscribers of state and value changes.
|
|
183
|
-
*/
|
|
184
|
-
stageUpdate(meta?: {}): void;
|
|
185
|
-
/**
|
|
186
|
-
* Notifies subscribers of a menu service event.
|
|
187
|
-
* All notifications are sent to all subscribers.
|
|
188
|
-
* @param {string} event - The event to send to subscribers.
|
|
189
|
-
*/
|
|
190
|
-
notify(event: string): void;
|
|
191
|
-
/**
|
|
192
|
-
* Notifies subscribers of a state change (selected options has changed).
|
|
193
|
-
*/
|
|
194
|
-
notifyStateChange(meta?: {}): void;
|
|
195
|
-
/**
|
|
196
|
-
* Notifies subscribers of a value change (current value has changed).
|
|
197
|
-
*/
|
|
198
|
-
notifyValueChange(meta?: {}): void;
|
|
199
|
-
/**
|
|
200
|
-
* Dispatches a custom event from the host element.
|
|
201
|
-
* @param {string} eventName
|
|
202
|
-
* @param {any} detail
|
|
203
|
-
*/
|
|
204
|
-
dispatchChangeEvent(eventName: string, detail: any): void;
|
|
205
|
-
/**
|
|
206
|
-
* MENU OPTION MANAGEMENT METHODS
|
|
207
|
-
*/
|
|
208
|
-
/**
|
|
209
|
-
* Adds a menu option to the service's list.
|
|
210
|
-
* @param {AuroMenuOption} option - the option to track
|
|
211
|
-
*/
|
|
212
|
-
addMenuOption(option: AuroMenuOption): void;
|
|
213
|
-
/**
|
|
214
|
-
* Removes a menu option from the service's list.
|
|
215
|
-
* @param {AuroMenuOption} option - the option to remove
|
|
216
|
-
*/
|
|
217
|
-
removeMenuOption(option: AuroMenuOption): void;
|
|
218
|
-
/**
|
|
219
|
-
* UTILITIES
|
|
220
|
-
*/
|
|
221
|
-
/**
|
|
222
|
-
* Normalizes a value or array of values into an array of strings for option selection.
|
|
223
|
-
* This function ensures that input values are consistently formatted for matching menu options.
|
|
224
|
-
*
|
|
225
|
-
* @param {string|number|Array<string|number>} value - The value(s) to normalize.
|
|
226
|
-
* @returns {Array<string>} An array of string values suitable for option matching.
|
|
227
|
-
* @throws {Error} If any value is not a string or number.
|
|
228
|
-
*/
|
|
229
|
-
_getNormalizedValues(value: string | number | Array<string | number>): Array<string>;
|
|
230
|
-
/**
|
|
231
|
-
* Returns whether two arrays of options contain the same elements.
|
|
232
|
-
* @param {AuroMenuOption[]} arr1 - First array of options.
|
|
233
|
-
* @param {AuroMenuOption[]} arr2 - Second array of options.
|
|
234
|
-
* @returns {boolean} True if arrays match, false otherwise.
|
|
235
|
-
*/
|
|
236
|
-
optionsArraysMatch(arr1: AuroMenuOption[], arr2: AuroMenuOption[]): boolean;
|
|
237
|
-
}
|
|
238
|
-
export const MenuContext: import("@lit/context").Context<"menu-context", any>;
|
|
239
|
-
import { AuroMenuOption } from "./auro-menuoption";
|