@aurodesignsystem-dev/auro-formkit 0.0.0-pr1460.2 → 0.0.0-pr1464.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.
- package/components/checkbox/demo/api.html +4 -26
- package/components/checkbox/demo/getting-started.md +5 -6
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/api.html +4 -25
- package/components/combobox/demo/getting-started.md +76 -27
- package/components/combobox/demo/index.min.js +15 -1
- package/components/combobox/demo/registered.min.js +1517 -1509
- package/components/combobox/dist/auro-combobox.d.ts +1 -1
- package/components/combobox/dist/index.js +18 -11
- package/components/combobox/dist/registered.js +18 -11
- package/components/counter/demo/api.html +5 -29
- package/components/counter/demo/getting-started.md +4 -3
- package/components/counter/demo/index.min.js +8392 -1
- package/components/counter/dist/index.js +53 -5284
- package/components/counter/dist/registered.js +106 -5110
- package/components/datepicker/demo/accessibility.html +0 -1
- package/components/datepicker/demo/api.html +4 -29
- package/components/datepicker/demo/getting-started.md +25 -2
- package/components/datepicker/demo/index.min.js +24612 -1
- package/components/datepicker/demo/readme.html +2 -10
- package/components/datepicker/dist/index.js +10 -10
- package/components/datepicker/dist/registered.js +10 -10
- package/components/dropdown/demo/api.html +5 -31
- package/components/dropdown/demo/getting-started.md +34 -2
- package/components/dropdown/demo/index.min.js +5097 -1
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/demo/api.html +5 -27
- package/components/form/demo/getting-started.md +5 -6
- package/components/form/demo/index.min.js +719 -2
- package/components/form/demo/keyboard-behavior.md +38 -0
- package/components/form/demo/pages.json +1 -1
- package/components/form/demo/registerDemoDeps.min.js +11842 -60908
- package/components/input/demo/accessibility.md +1 -1
- package/components/input/demo/api.html +15 -26
- package/components/input/demo/auro-input.min.js +1 -1
- package/components/input/demo/getting-started.md +1 -1
- package/components/input/demo/readme.html +2 -10
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/menu/demo/api.html +5 -30
- package/components/menu/demo/api.md +1 -1
- package/components/menu/demo/getting-started.md +1 -1
- package/components/menu/demo/index.min.js +1574 -1573
- package/components/menu/dist/auro-menu.context.d.ts +0 -1
- package/components/menu/dist/auro-menu.d.ts +1 -1
- package/components/menu/dist/index.js +1609 -1608
- package/components/menu/dist/registered.js +1553 -1552
- package/components/radio/demo/api.html +7 -28
- package/components/radio/demo/getting-started.md +27 -2
- package/components/radio/demo/index.md +1 -3
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/demo/readme.md +0 -2
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/api.html +5 -42
- package/components/select/demo/getting-started.md +39 -5
- package/components/select/demo/registered.min.js +1503 -1502
- package/components/select/dist/index.js +2 -2
- package/components/select/dist/registered.js +2 -2
- package/custom-elements.json +1487 -1489
- package/package.json +37 -4
- package/components/combobox/demo/api.js +0 -39
- package/components/combobox/demo/api.min.js +0 -106
- package/components/combobox/demo/install.html +0 -50
- package/components/combobox/demo/styles.css +0 -974
- package/components/combobox/demo/swap-value.min.js +0 -16
- package/components/counter/demo/api.js +0 -24
- package/components/counter/demo/api.min.js +0 -52
- package/components/counter/demo/auro-counter-group.min.js +0 -8394
- package/components/datepicker/demo/api.js +0 -37
- package/components/datepicker/demo/api.min.js +0 -300
- package/components/datepicker/demo/auro-datepicker.min.js +0 -24614
- package/components/dropdown/demo/api.js +0 -26
- package/components/dropdown/demo/api.min.js +0 -109
- package/components/dropdown/demo/auro-dropdown.min.js +0 -5099
- package/components/form/demo/api.js +0 -5
- package/components/form/demo/api.min.js +0 -5
- package/components/form/demo/auro-form.min.js +0 -718
- package/components/form/demo/autocomplete.html +0 -31
- package/components/radio/demo/api.js +0 -19
- package/components/radio/demo/api.min.js +0 -44
- package/components/select/demo/keyboardBehavior.html +0 -48
|
@@ -3,11 +3,9 @@
|
|
|
3
3
|
See LICENSE in the project root for license information.
|
|
4
4
|
|
|
5
5
|
HTML in this document is standardized and NOT to be edited.
|
|
6
|
-
All demo code should be added/edited in ./demo/api.md
|
|
7
|
-
|
|
8
|
-
With the exception of adding custom elements if needed for the demo.
|
|
9
6
|
|
|
10
7
|
----------------------- DO NOT EDIT -----------------------------
|
|
8
|
+
|
|
11
9
|
-->
|
|
12
10
|
|
|
13
11
|
<!DOCTYPE html>
|
|
@@ -15,38 +13,19 @@
|
|
|
15
13
|
<head>
|
|
16
14
|
<meta charset="UTF-8" />
|
|
17
15
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
18
|
-
<title>Auro Web Component Demo | auro-radio
|
|
19
|
-
|
|
20
|
-
<!-- highlight.js Stylesheet -->
|
|
21
|
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
|
|
22
|
-
|
|
23
|
-
<!-- Legacy reference is still needed to support auro-radio's use of legacy token values at this time -->
|
|
16
|
+
<title>Auro Web Component Demo | auro-radio</title>
|
|
24
17
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
25
|
-
|
|
26
|
-
<!-- Design Token Alaska Theme -->
|
|
27
18
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
28
|
-
|
|
29
|
-
<!-- Webcore Stylesheet Alaska Theme -->
|
|
30
19
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
31
|
-
|
|
32
|
-
<!-- Demo Specific Styles -->
|
|
33
20
|
<link rel="stylesheet" type="text/css" href="./styles.min.css" />
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
<main></main>
|
|
37
|
-
|
|
21
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
|
|
22
|
+
<script src="./api.min.js" data-demo-script="true" type="module"></script>
|
|
38
23
|
<script type="module">
|
|
39
24
|
import { renderPage } from './demo-support.min.js';
|
|
40
25
|
await renderPage('./api.md');
|
|
41
26
|
</script>
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
<
|
|
45
|
-
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
|
|
46
|
-
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
|
|
47
|
-
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
|
|
48
|
-
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
|
|
49
|
-
|
|
50
|
-
<script src="./api.min.js" data-demo-script="true" type="module"></script>
|
|
27
|
+
</head>
|
|
28
|
+
<body class="auro-markdown">
|
|
29
|
+
<main></main>
|
|
51
30
|
</body>
|
|
52
31
|
</html>
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
<section>
|
|
33
33
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/install.md) -->
|
|
34
34
|
<!-- The below content is automatically added from ./../docs/partials/getting-started/install.md -->
|
|
35
|
-
<auro-header level="2" id="setup">Setup</auro-header>
|
|
35
|
+
<auro-header level="2" id="setup">Setup</auro-header>
|
|
36
36
|
<auro-accordion-group Emphasis>
|
|
37
37
|
<auro-accordion expanded class="section" id="recommendedAccordion">
|
|
38
38
|
<span slot="trigger">Recommended Installation and Implementation</span>
|
|
@@ -44,7 +44,31 @@
|
|
|
44
44
|
<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
|
|
45
45
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
46
46
|
<auro-header level="3">Implementation</auro-header>
|
|
47
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customRegistration.md) -->
|
|
47
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/customRegistration.md) -->
|
|
48
|
+
<!-- The below content is automatically added from ./../docs/partials/getting-started/customRegistration.md -->
|
|
49
|
+
<auro-header level="4" id="customRegistration">Custom Component Registration for Version Management</auro-header>
|
|
50
|
+
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.
|
|
51
|
+
|
|
52
|
+
You can do this by importing only the component class and using the `register(name)` method with a unique name:
|
|
53
|
+
|
|
54
|
+
<pre class="language-js"><code class="language-js">// Import the class only
|
|
55
|
+
import { AuroRadio, AuroRadioGroup } from '@aurodesignsystem/auro-formkit/auro-radio/class';
|
|
56
|
+
|
|
57
|
+
// Register with a custom name if desired
|
|
58
|
+
AuroRadio.register('custom-radio');
|
|
59
|
+
AuroRadioGroup.register('custom-radio-group');</code></pre>
|
|
60
|
+
|
|
61
|
+
This will create a new custom element `<custom-radio>` and `<custom-radio-group>` that behaves exactly like `<auro-radio>` and `<auro-radio-group>`, allowing both to coexist on the same page without interfering with each other.
|
|
62
|
+
|
|
63
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom.html) -->
|
|
64
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/custom.html -->
|
|
65
|
+
<pre class="language-html"><code class="language-html"><custom-radio-group>
|
|
66
|
+
<span slot="legend">Form label goes here</span>
|
|
67
|
+
<custom-radio id="customRadio1" label="Yes" name="radioDemo" value="yes"></custom-radio>
|
|
68
|
+
<custom-radio id="customRadio2" label="No" name="radioDemo" value="no"></custom-radio>
|
|
69
|
+
<custom-radio id="customRadio3" label="Maybe" name="radioDemo" value="maybe"></custom-radio>
|
|
70
|
+
</custom-radio-group></code></pre>
|
|
71
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
48
72
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
49
73
|
</div>
|
|
50
74
|
</auro-accordion>
|
|
@@ -79,6 +103,7 @@ Then use the elements in your HTML:
|
|
|
79
103
|
<auro-accordion class="section" id="cdnAccordion">
|
|
80
104
|
<span slot="trigger">CDN Installation</span>
|
|
81
105
|
<div class="accordion-content">
|
|
106
|
+
<p class="warning"><strong>Warning:</strong> CDN registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
|
|
82
107
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/cdnRegistration.md) -->
|
|
83
108
|
<!-- The below content is automatically added from ./../docs/partials/getting-started/cdnRegistration.md -->
|
|
84
109
|
The radio components can be loaded via CDN without a build step:
|
|
@@ -16,9 +16,7 @@
|
|
|
16
16
|
<auro-header level="2" id="description">Description</auro-header>
|
|
17
17
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
|
|
18
18
|
<!-- The below content is automatically added from ./../docs/partials/description.md -->
|
|
19
|
-
<code><auro-radio></code> is a <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements" target="_blank">HTML custom element</auro-hyperlink> that is rendered as a small circle, which is filled or highlighted when selected. Only one <code><auro-radio></code> component in a given <code><auro-radio-group></code> can be selected at the same time.
|
|
20
|
-
|
|
21
|
-
test
|
|
19
|
+
<code><auro-radio></code> is a <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements" target="_blank">HTML custom element</auro-hyperlink> that is rendered as a small circle, which is filled or highlighted when selected. Only one <code><auro-radio></code> component in a given <code><auro-radio-group></code> can be selected at the same time.
|
|
22
20
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
23
21
|
<div class="exampleWrapper">
|
|
24
22
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
@@ -1634,7 +1634,7 @@ class AuroHelpText extends i$2 {
|
|
|
1634
1634
|
}
|
|
1635
1635
|
}
|
|
1636
1636
|
|
|
1637
|
-
var formkitVersion = '
|
|
1637
|
+
var formkitVersion = '202605081752';
|
|
1638
1638
|
|
|
1639
1639
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1640
1640
|
// See LICENSE in the project root for license information.
|
|
@@ -21,8 +21,6 @@ The following sections are editable by making changes to the following files:
|
|
|
21
21
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
|
|
22
22
|
<!-- The below content is automatically added from ./docs/partials/description.md -->
|
|
23
23
|
<code><auro-radio></code> is a <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements" target="_blank">HTML custom element</auro-hyperlink> that is rendered as a small circle, which is filled or highlighted when selected. Only one <code><auro-radio></code> component in a given <code><auro-radio-group></code> can be selected at the same time.
|
|
24
|
-
|
|
25
|
-
test
|
|
26
24
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
27
25
|
|
|
28
26
|
## Radio Use Cases
|
|
@@ -1573,7 +1573,7 @@ class AuroHelpText extends LitElement {
|
|
|
1573
1573
|
}
|
|
1574
1574
|
}
|
|
1575
1575
|
|
|
1576
|
-
var formkitVersion = '
|
|
1576
|
+
var formkitVersion = '202605081752';
|
|
1577
1577
|
|
|
1578
1578
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1579
1579
|
// See LICENSE in the project root for license information.
|
|
@@ -1573,7 +1573,7 @@ class AuroHelpText extends LitElement {
|
|
|
1573
1573
|
}
|
|
1574
1574
|
}
|
|
1575
1575
|
|
|
1576
|
-
var formkitVersion = '
|
|
1576
|
+
var formkitVersion = '202605081752';
|
|
1577
1577
|
|
|
1578
1578
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1579
1579
|
// See LICENSE in the project root for license information.
|
|
@@ -3,9 +3,6 @@
|
|
|
3
3
|
See LICENSE in the project root for license information.
|
|
4
4
|
|
|
5
5
|
HTML in this document is standardized and NOT to be edited.
|
|
6
|
-
All demo code should be added/edited in ./demo/apiExamples.md
|
|
7
|
-
|
|
8
|
-
With the exception of adding custom elements if needed for the demo.
|
|
9
6
|
|
|
10
7
|
----------------------- DO NOT EDIT -----------------------------
|
|
11
8
|
|
|
@@ -17,52 +14,18 @@
|
|
|
17
14
|
<meta charset="UTF-8" />
|
|
18
15
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
16
|
<title>Auro Web Component Demo | auro-select</title>
|
|
20
|
-
|
|
21
|
-
<!-- highlight.js Stylesheet -->
|
|
22
|
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
|
|
23
|
-
|
|
24
|
-
<!-- Legacy reference is still needed to support auro-select's use of legacy token values at this time -->
|
|
25
17
|
<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
18
|
<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
19
|
<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 -->
|
|
34
20
|
<link rel="stylesheet" type="text/css" href="./styles.min.css" />
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
<main></main>
|
|
38
|
-
|
|
21
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
|
|
22
|
+
<script src="./api.min.js" data-demo-script="true" type="module"></script>
|
|
39
23
|
<script type="module">
|
|
40
24
|
import { renderPage } from './demo-support.min.js';
|
|
41
25
|
await renderPage('./api.md');
|
|
42
26
|
</script>
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
<
|
|
46
|
-
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
|
|
47
|
-
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
|
|
48
|
-
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/+esm" type="module"></script>
|
|
49
|
-
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-drawer@latest/+esm" type="module"></script>
|
|
50
|
-
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-loader@latest/+esm" type="module"></script>
|
|
51
|
-
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
|
|
52
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-input/+esm"></script>
|
|
53
|
-
|
|
54
|
-
<style>
|
|
55
|
-
.autofill-example-form .input-row {
|
|
56
|
-
display: flex;
|
|
57
|
-
flex-direction: row;
|
|
58
|
-
justify-content: space-between;
|
|
59
|
-
margin-bottom: 1rem;
|
|
60
|
-
gap: 15px;
|
|
61
|
-
}
|
|
62
|
-
.autofill-example-form .input-row auro-input,
|
|
63
|
-
.autofill-example-form .input-row auro-select {
|
|
64
|
-
flex: 1 0 auto;
|
|
65
|
-
}
|
|
66
|
-
</style>
|
|
27
|
+
</head>
|
|
28
|
+
<body class="auro-markdown">
|
|
29
|
+
<main></main>
|
|
67
30
|
</body>
|
|
68
31
|
</html>
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
<section>
|
|
43
43
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/install.md) -->
|
|
44
44
|
<!-- The below content is automatically added from ./../docs/partials/getting-started/install.md -->
|
|
45
|
-
<auro-header level="2" id="setup">Setup</auro-header>
|
|
45
|
+
<auro-header level="2" id="setup">Setup</auro-header>
|
|
46
46
|
<auro-accordion-group Emphasis>
|
|
47
47
|
<auro-accordion expanded class="section" id="recommendedAccordion">
|
|
48
48
|
<span slot="trigger">Recommended Installation and Implementation</span>
|
|
@@ -54,7 +54,42 @@
|
|
|
54
54
|
<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
|
|
55
55
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
56
56
|
<auro-header level="3">Implementation</auro-header>
|
|
57
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customRegistration.md) -->
|
|
57
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/customRegistration.md) -->
|
|
58
|
+
<!-- The below content is automatically added from ./../docs/partials/getting-started/customRegistration.md -->
|
|
59
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/partials/customRegistrationDescription.md) -->
|
|
60
|
+
<!-- The below content is automatically added from ./../../../docs/partials/customRegistrationDescription.md -->
|
|
61
|
+
<p>Every Auro component consists of a JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define">custom element registration</a>. The class defines the component's behavior, and the registration maps it to an HTML tag name so it can be used in markup.</p>
|
|
62
|
+
<p>The default import (shown above) handles both steps automatically, registering the component under its standard tag name.</p>
|
|
63
|
+
<p>If you need multiple versions of the same component on a single page — for example, when two projects depend on different versions — you can register the class under a custom tag name to avoid conflicts.</p>
|
|
64
|
+
<p>To do this, import the component class directly and call its <code>register(name)</code> method with a unique name:</p>
|
|
65
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
66
|
+
|
|
67
|
+
<pre class="language-js"><code class="language-js">// Import the classes
|
|
68
|
+
import { AuroSelect } from '@aurodesignsystem/auro-formkit/auro-select/class';
|
|
69
|
+
import { AuroMenu } from '@aurodesignsystem/auro-formkit/auro-menu/class';
|
|
70
|
+
import { AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menuoption/class';
|
|
71
|
+
|
|
72
|
+
// Register each component with a custom name
|
|
73
|
+
AuroSelect.register('[custom]-select');
|
|
74
|
+
AuroMenu.register('[custom]-menu');
|
|
75
|
+
AuroMenuOption.register('[custom]-menuoption');</code></pre>
|
|
76
|
+
|
|
77
|
+
The `<auro-menu>` and `<auro-menuoption>` components must also be custom registered when using a custom `<auro-select>` registration. All three components work together and need to be registered under the same custom naming convention.
|
|
78
|
+
|
|
79
|
+
This will create new custom elements that behave exactly like their standard counterparts, allowing both to coexist on the same page without interfering with each other.
|
|
80
|
+
|
|
81
|
+
<pre class="language-html"><code class="language-html"><custom-select placeholder="Placeholder Text" id="custom-select">
|
|
82
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
83
|
+
<span slot="label">Label</span>
|
|
84
|
+
<custom-menu>
|
|
85
|
+
<custom-menuoption value="stops">Stops</custom-menuoption>
|
|
86
|
+
<custom-menuoption value="price">Price</custom-menuoption>
|
|
87
|
+
<custom-menuoption value="duration">Duration</custom-menuoption>
|
|
88
|
+
<custom-menuoption value="departure">Departure</custom-menuoption>
|
|
89
|
+
<custom-menuoption value="arrival">Arrival</custom-menuoption>
|
|
90
|
+
<custom-menuoption value="prefer alaska">Prefer Alaska</custom-menuoption>
|
|
91
|
+
</custom-menu>
|
|
92
|
+
</custom-select></code></pre>
|
|
58
93
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
59
94
|
</div>
|
|
60
95
|
</auro-accordion>
|
|
@@ -87,10 +122,9 @@
|
|
|
87
122
|
</div>
|
|
88
123
|
</auro-accordion>
|
|
89
124
|
<auro-accordion class="section" id="cdnAccordion">
|
|
90
|
-
<span slot="trigger">CDN Installation
|
|
125
|
+
<span slot="trigger">CDN Installation</span>
|
|
91
126
|
<div class="accordion-content">
|
|
92
|
-
<p class="warning"><strong>Warning:</strong> CDN
|
|
93
|
-
<auro-header level="3">Install & Implementation</auro-header>
|
|
127
|
+
<p class="warning"><strong>Warning:</strong> CDN registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
|
|
94
128
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/cdnRegistration.md) -->
|
|
95
129
|
<!-- The below content is automatically added from ./../docs/partials/getting-started/cdnRegistration.md -->
|
|
96
130
|
<p>Add the following script tag to your HTML to load the component directly from a CDN:</p>
|