@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.7 → 0.0.0-pr624.70
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/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
- package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
- package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
- package/components/bibtemplate/dist/index.js +1262 -81
- package/components/bibtemplate/dist/registered.js +1262 -81
- package/components/checkbox/README.md +1 -1
- package/components/checkbox/demo/api.html +16 -10
- package/components/checkbox/demo/api.md +47 -14
- package/components/checkbox/demo/api.min.js +65 -42
- package/components/checkbox/demo/index.html +16 -10
- package/components/checkbox/demo/index.md +2 -2
- package/components/checkbox/demo/index.min.js +65 -42
- package/components/checkbox/demo/readme.html +16 -9
- package/components/checkbox/demo/readme.md +1 -1
- package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
- package/components/checkbox/dist/auro-checkbox.d.ts +3 -3
- package/components/checkbox/dist/index.js +65 -42
- package/components/checkbox/dist/registered.js +65 -42
- package/components/combobox/demo/api.html +16 -10
- package/components/combobox/demo/api.md +113 -8
- package/components/combobox/demo/api.min.js +3096 -870
- package/components/combobox/demo/index.html +16 -10
- package/components/combobox/demo/index.md +6 -30
- package/components/combobox/demo/index.min.js +3096 -870
- package/components/combobox/demo/readme.html +16 -9
- package/components/combobox/dist/auro-combobox.d.ts +42 -8
- package/components/combobox/dist/index.js +2878 -748
- package/components/combobox/dist/registered.js +2878 -748
- package/components/counter/demo/api.html +17 -10
- package/components/counter/demo/api.md +156 -21
- package/components/counter/demo/api.min.js +3363 -652
- package/components/counter/demo/index.html +17 -10
- package/components/counter/demo/index.md +185 -34
- package/components/counter/demo/index.min.js +3363 -652
- package/components/counter/demo/readme.html +16 -9
- package/components/counter/dist/auro-counter-button.d.ts +2 -0
- package/components/counter/dist/auro-counter-group.d.ts +151 -11
- package/components/counter/dist/auro-counter.d.ts +16 -0
- package/components/counter/dist/helptextVersion.d.ts +2 -0
- package/components/counter/dist/iconVersion.d.ts +1 -1
- package/components/counter/dist/index.js +3364 -653
- package/components/counter/dist/registered.js +3364 -653
- package/components/datepicker/demo/api.html +16 -10
- package/components/datepicker/demo/api.md +25 -16
- package/components/datepicker/demo/api.min.js +11857 -8105
- package/components/datepicker/demo/index.html +16 -10
- package/components/datepicker/demo/index.md +71 -4
- package/components/datepicker/demo/index.min.js +11857 -8105
- package/components/datepicker/demo/readme.html +16 -9
- package/components/datepicker/dist/auro-datepicker.d.ts +89 -11
- package/components/datepicker/dist/buttonVersion.d.ts +1 -1
- package/components/datepicker/dist/iconVersion.d.ts +2 -0
- package/components/datepicker/dist/index.js +8691 -4939
- package/components/datepicker/dist/popoverVersion.d.ts +1 -1
- package/components/datepicker/dist/registered.js +8691 -4939
- package/components/dropdown/demo/api.html +16 -10
- package/components/dropdown/demo/api.md +81 -274
- package/components/dropdown/demo/api.min.js +429 -195
- package/components/dropdown/demo/index.html +16 -10
- package/components/dropdown/demo/index.md +92 -362
- package/components/dropdown/demo/index.min.js +429 -195
- package/components/dropdown/demo/readme.html +16 -9
- package/components/dropdown/dist/auro-dropdown.d.ts +41 -76
- package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
- package/components/dropdown/dist/index.js +429 -195
- package/components/dropdown/dist/registered.js +429 -195
- package/components/form/demo/api.html +16 -9
- package/components/form/demo/api.min.js +1 -1
- package/components/form/demo/autocomplete.html +19 -3
- package/components/form/demo/index.html +16 -9
- package/components/form/demo/index.min.js +1 -1
- package/components/form/demo/readme.html +16 -9
- package/components/form/demo/working.html +19 -13
- package/components/form/dist/index.js +1 -1
- package/components/form/dist/registered.js +1 -1
- package/components/helptext/dist/index.js +2 -2
- package/components/helptext/dist/registered.js +2 -2
- package/components/input/README.md +5 -2
- package/components/input/demo/api.html +16 -10
- package/components/input/demo/api.md +228 -130
- package/components/input/demo/api.min.js +908 -246
- package/components/input/demo/index.html +16 -10
- package/components/input/demo/index.md +48 -32
- package/components/input/demo/index.min.js +908 -246
- package/components/input/demo/readme.html +16 -9
- package/components/input/demo/readme.md +5 -2
- package/components/input/dist/auro-input.d.ts +3 -3
- package/components/input/dist/base-input.d.ts +38 -10
- package/components/input/dist/buttonVersion.d.ts +1 -1
- package/components/input/dist/iconVersion.d.ts +1 -1
- package/components/input/dist/index.js +908 -246
- package/components/input/dist/registered.js +908 -246
- package/components/layoutElement/dist/index.js +13 -10
- package/components/menu/demo/api.html +32 -10
- package/components/menu/demo/api.md +69 -8
- package/components/menu/demo/api.min.js +238 -47
- package/components/menu/demo/index.html +16 -10
- package/components/menu/demo/index.min.js +238 -47
- package/components/menu/demo/readme.html +16 -9
- package/components/menu/dist/auro-menu.d.ts +41 -7
- package/components/menu/dist/auro-menuoption.d.ts +15 -3
- package/components/menu/dist/iconVersion.d.ts +1 -1
- package/components/menu/dist/index.js +238 -47
- package/components/menu/dist/registered.js +238 -47
- package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
- package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
- package/components/radio/demo/api.html +16 -10
- package/components/radio/demo/api.md +7 -8
- package/components/radio/demo/api.min.js +88 -90
- package/components/radio/demo/index.html +16 -10
- package/components/radio/demo/index.min.js +88 -90
- package/components/radio/demo/readme.html +16 -9
- package/components/radio/dist/auro-radio-group.d.ts +1 -1
- package/components/radio/dist/auro-radio.d.ts +9 -12
- package/components/radio/dist/index.js +88 -90
- package/components/radio/dist/registered.js +88 -90
- package/components/select/demo/api.html +16 -10
- package/components/select/demo/api.js +0 -2
- package/components/select/demo/api.md +104 -57
- package/components/select/demo/api.min.js +2148 -635
- package/components/select/demo/index.html +17 -11
- package/components/select/demo/index.md +45 -158
- package/components/select/demo/index.min.js +2148 -623
- package/components/select/demo/readme.html +16 -9
- package/components/select/dist/auro-select.d.ts +49 -16
- package/components/select/dist/index.js +2078 -649
- package/components/select/dist/registered.js +2078 -649
- package/package.json +30 -27
- /package/components/{datepicker/dist/styles/emphasized/style-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
- /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/snowflake}/color-css.d.ts +0 -0
- /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/snowflake}/style-css.d.ts +0 -0
- /package/components/dropdown/dist/styles/{default → classic}/bibColors-css.d.ts +0 -0
- /package/components/dropdown/dist/styles/{default → classic}/bibStyles-css.d.ts +0 -0
- /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
- /package/components/{menu/dist/styles/color-menuoption-css.d.ts → dropdown/dist/styles/classic/style-css.d.ts} +0 -0
- /package/components/menu/dist/styles/{style-menu-css.d.ts → default/color-menu-css.d.ts} +0 -0
- /package/components/menu/dist/styles/{style-menuoption-css.d.ts → default/color-menuoption-css.d.ts} +0 -0
- /package/components/menu/dist/styles/{tokens-css.d.ts → default/style-menu-css.d.ts} +0 -0
|
@@ -16,18 +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
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css"
|
|
26
|
-
|
|
19
|
+
<title>Auro Web Component Demo | auro-counter</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-counter'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
|
-
|
|
30
|
-
</head>
|
|
36
|
+
</head>
|
|
31
37
|
<body class="auro-markdown">
|
|
32
38
|
<main></main>
|
|
33
39
|
|
|
@@ -50,5 +56,6 @@
|
|
|
50
56
|
<!-- If additional elements are needed for the demo, add them here. -->
|
|
51
57
|
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
|
|
52
58
|
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
|
|
59
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
|
|
53
60
|
</body>
|
|
54
61
|
</html>
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
| Property | Attribute | Type | Default | Description |
|
|
9
9
|
|------------|------------|-----------|-------------|--------------------------------------------------|
|
|
10
10
|
| [disabled](#disabled) | `disabled` | `boolean` | false | Indicates if the counter is disabled. |
|
|
11
|
+
| [error](#error) | `error` | `string` | | Error state and message.<br />True if set, value is the error message. |
|
|
11
12
|
| [max](#max) | `max` | `number` | 9 | The maximum value for the counter. |
|
|
12
13
|
| [min](#min) | `min` | `number` | 0 | The minimum value for the counter. |
|
|
13
14
|
| [onDark](#onDark) | `onDark` | `boolean` | false | If declared, the counter will be rendered with onDark styles. |
|
|
@@ -39,21 +40,24 @@
|
|
|
39
40
|
|
|
40
41
|
## Properties
|
|
41
42
|
|
|
42
|
-
| Property | Attribute | Type
|
|
43
|
-
|
|
44
|
-
| [autoPlacement](#autoPlacement) | `autoPlacement` | `boolean`
|
|
45
|
-
| [
|
|
46
|
-
| [
|
|
47
|
-
| [
|
|
48
|
-
| [
|
|
49
|
-
| [
|
|
50
|
-
| [
|
|
51
|
-
| [
|
|
52
|
-
| [
|
|
53
|
-
| [
|
|
54
|
-
| [
|
|
55
|
-
| [
|
|
56
|
-
| [
|
|
43
|
+
| Property | Attribute | Type | Default | Description |
|
|
44
|
+
|---------------------------|---------------------------|--------------------------|----------------|--------------------------------------------------|
|
|
45
|
+
| [autoPlacement](#autoPlacement) | `autoPlacement` | `boolean` | "false" | If declared, bib's position will be automatically calculated where to appear. |
|
|
46
|
+
| [error](#error) | `error` | `string` | | The current error message to display when the component is invalid. |
|
|
47
|
+
| [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | `string` | "sm" | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
|
|
48
|
+
| [isDropdown](#isDropdown) | `isDropdown` | `boolean` | false | Indicates if the counter group is displayed as a dropdown. |
|
|
49
|
+
| [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean` | false | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
|
|
50
|
+
| [layout](#layout) | | `'classic'\|'snowflake'` | | Determines the layout style of the counter group when it is a dropdown. Options are 'classic' or 'snowflake'. Default is 'classic'. |
|
|
51
|
+
| [matchWidth](#matchWidth) | `matchWidth` | `boolean` | false | If declared, the dropdown will expand to the width of its parent container.<br />Otherwise, the dropdown width will be determined by its content. |
|
|
52
|
+
| [max](#max) | `max` | `number` | "undefined" | The maximum value allowed for the whole group of counters. |
|
|
53
|
+
| [min](#min) | `min` | `number` | "undefined" | The minimum value allowed for the whole group of counters. |
|
|
54
|
+
| [noFlip](#noFlip) | `noFlip` | `boolean` | "false" | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
|
|
55
|
+
| [offset](#offset) | `offset` | `number` | "0" | Gap between the trigger element and bib. |
|
|
56
|
+
| [onDark](#onDark) | `onDark` | `boolean` | false | If declared, counters and dropdown will be rendered with onDark styles. |
|
|
57
|
+
| [placement](#placement) | `placement` | `string` | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end". |
|
|
58
|
+
| [total](#total) | `total` | `number` | "undefined" | The total value of the counters. |
|
|
59
|
+
| [validity](#validity) | `validity` | `string` | "undefined" | Reflects the validity state. |
|
|
60
|
+
| [value](#value) | `value` | `object` | "undefined" | The current individual values of the nested counters. |
|
|
57
61
|
|
|
58
62
|
## Methods
|
|
59
63
|
|
|
@@ -338,6 +342,131 @@ counter.addEventListener('input', (event) => {
|
|
|
338
342
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
339
343
|
</auro-accordion>
|
|
340
344
|
|
|
345
|
+
### Counter with Custom Error
|
|
346
|
+
|
|
347
|
+
A custom error can be set on the counter by adding the `error` attribute the desired message.
|
|
348
|
+
|
|
349
|
+
<div class="exampleWrapper">
|
|
350
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-error.html) -->
|
|
351
|
+
<!-- The below content is automatically added from ./../apiExamples/counter-error.html -->
|
|
352
|
+
<auro-counter error="There is an error with the counter">
|
|
353
|
+
Adults
|
|
354
|
+
</auro-counter>
|
|
355
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
356
|
+
</div>
|
|
357
|
+
<div class="exampleWrapper--ondark" aria-hidden>
|
|
358
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ondark-counter-error.html) -->
|
|
359
|
+
<!-- The below content is automatically added from ./../apiExamples/ondark-counter-error.html -->
|
|
360
|
+
<auro-counter ondark error="There is an error with the counter">
|
|
361
|
+
Adults
|
|
362
|
+
</auro-counter>
|
|
363
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
364
|
+
</div>
|
|
365
|
+
<auro-accordion alignRight>
|
|
366
|
+
<span slot="trigger">See code</span>
|
|
367
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/counter-error.html) -->
|
|
368
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/counter-error.html -->
|
|
369
|
+
|
|
370
|
+
```html
|
|
371
|
+
<auro-counter error="There is an error with the counter">
|
|
372
|
+
Adults
|
|
373
|
+
</auro-counter>
|
|
374
|
+
```
|
|
375
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
376
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ondark-counter-error.html) -->
|
|
377
|
+
<!-- The below content is automatically added from ./../apiExamples/ondark-counter-error.html -->
|
|
378
|
+
<auro-counter ondark error="There is an error with the counter">
|
|
379
|
+
Adults
|
|
380
|
+
</auro-counter>
|
|
381
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
382
|
+
</auro-accordion>
|
|
383
|
+
|
|
384
|
+
### Counter Dropdown with Errored Counters
|
|
385
|
+
|
|
386
|
+
A counter dropdown with counters in an errored state will display the errors for each errored counter by default
|
|
387
|
+
|
|
388
|
+
<div class="exampleWrapper">
|
|
389
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-error-basic.html) -->
|
|
390
|
+
<!-- The below content is automatically added from ./../apiExamples/dropdown-error-basic.html -->
|
|
391
|
+
<auro-counter-group isDropdown>
|
|
392
|
+
<div slot="bib.fullscreen.headline">Passengers</div>
|
|
393
|
+
<div slot="label">Passengers</div>
|
|
394
|
+
<auro-counter error="Cannot have less than 1 adult passenger">
|
|
395
|
+
Adults
|
|
396
|
+
<span slot="description">18 years or older</span>
|
|
397
|
+
</auro-counter>
|
|
398
|
+
<auro-counter error="Cannot have more than 2 child passengers">
|
|
399
|
+
Children
|
|
400
|
+
<span slot="description">2-17 years</span>
|
|
401
|
+
</auro-counter>
|
|
402
|
+
</auro-counter-group>
|
|
403
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
404
|
+
</div>
|
|
405
|
+
<auro-accordion alignRight>
|
|
406
|
+
<span slot="trigger">See code</span>
|
|
407
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-error-basic.html) -->
|
|
408
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-error-basic.html -->
|
|
409
|
+
|
|
410
|
+
```html
|
|
411
|
+
<auro-counter-group isDropdown>
|
|
412
|
+
<div slot="bib.fullscreen.headline">Passengers</div>
|
|
413
|
+
<div slot="label">Passengers</div>
|
|
414
|
+
<auro-counter error="Cannot have less than 1 adult passenger">
|
|
415
|
+
Adults
|
|
416
|
+
<span slot="description">18 years or older</span>
|
|
417
|
+
</auro-counter>
|
|
418
|
+
<auro-counter error="Cannot have more than 2 child passengers">
|
|
419
|
+
Children
|
|
420
|
+
<span slot="description">2-17 years</span>
|
|
421
|
+
</auro-counter>
|
|
422
|
+
</auro-counter-group>
|
|
423
|
+
```
|
|
424
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
425
|
+
</auro-accordion>
|
|
426
|
+
|
|
427
|
+
### Counter Dropdown with Custom Error
|
|
428
|
+
|
|
429
|
+
The error message for a dropdown counter with errored counters can also be overridden with the `error` attribute.
|
|
430
|
+
|
|
431
|
+
<div class="exampleWrapper">
|
|
432
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-error-custom.html) -->
|
|
433
|
+
<!-- The below content is automatically added from ./../apiExamples/dropdown-error-custom.html -->
|
|
434
|
+
<auro-counter-group error="Please select the appropriate number of passengers" isDropdown>
|
|
435
|
+
<div slot="bib.fullscreen.headline">Passengers</div>
|
|
436
|
+
<div slot="label">Passengers</div>
|
|
437
|
+
<auro-counter error="Cannot have less than 1 adult passenger">
|
|
438
|
+
Adults
|
|
439
|
+
<span slot="description">18 years or older</span>
|
|
440
|
+
</auro-counter>
|
|
441
|
+
<auro-counter error="Cannot have more than 2 child passengers">
|
|
442
|
+
Children
|
|
443
|
+
<span slot="description">2-17 years</span>
|
|
444
|
+
</auro-counter>
|
|
445
|
+
</auro-counter-group>
|
|
446
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
447
|
+
</div>
|
|
448
|
+
<auro-accordion alignRight>
|
|
449
|
+
<span slot="trigger">See code</span>
|
|
450
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-error-custom.html) -->
|
|
451
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-error-custom.html -->
|
|
452
|
+
|
|
453
|
+
```html
|
|
454
|
+
<auro-counter-group error="Please select the appropriate number of passengers" isDropdown>
|
|
455
|
+
<div slot="bib.fullscreen.headline">Passengers</div>
|
|
456
|
+
<div slot="label">Passengers</div>
|
|
457
|
+
<auro-counter error="Cannot have less than 1 adult passenger">
|
|
458
|
+
Adults
|
|
459
|
+
<span slot="description">18 years or older</span>
|
|
460
|
+
</auro-counter>
|
|
461
|
+
<auro-counter error="Cannot have more than 2 child passengers">
|
|
462
|
+
Children
|
|
463
|
+
<span slot="description">2-17 years</span>
|
|
464
|
+
</auro-counter>
|
|
465
|
+
</auro-counter-group>
|
|
466
|
+
```
|
|
467
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
468
|
+
</auro-accordion>
|
|
469
|
+
|
|
341
470
|
### Group Max/Min
|
|
342
471
|
|
|
343
472
|
The group counter max or min property sets the value for all counters in the group. If a counter has a max value set, the group max attribute will override it. All increment buttons as a result will be disabled to prevent the group of counters from exceeding the group max.
|
|
@@ -426,7 +555,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
|
|
|
426
555
|
<div style="width: 350px">
|
|
427
556
|
<auro-counter-group isDropdown offset="20" placement="bottom-end">
|
|
428
557
|
<div slot="bib.fullscreen.headline">Passengers</div>
|
|
429
|
-
<
|
|
558
|
+
<span slot="label">Label</span>
|
|
559
|
+
<span slot="helpText">bottom-end bib with 20px offset</span>
|
|
430
560
|
<auro-counter>
|
|
431
561
|
Adults
|
|
432
562
|
<span slot="description">18 years or older</span>
|
|
@@ -438,7 +568,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
|
|
|
438
568
|
</auro-counter-group>
|
|
439
569
|
<auro-counter-group isDropdown offset="20" placement="bottom-end" noFlip>
|
|
440
570
|
<div slot="bib.fullscreen.headline">Passengers</div>
|
|
441
|
-
<
|
|
571
|
+
<span slot="label">Label</span>
|
|
572
|
+
<span slot="helpText">bottom-end bib with 20px offset and noFlip</span>
|
|
442
573
|
<auro-counter>
|
|
443
574
|
Adults
|
|
444
575
|
<span slot="description">18 years or older</span>
|
|
@@ -450,7 +581,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
|
|
|
450
581
|
</auro-counter-group>
|
|
451
582
|
<auro-counter-group isDropdown offset="20" placement="right" noFlip autoPlacement>
|
|
452
583
|
<div slot="bib.fullscreen.headline">Passengers</div>
|
|
453
|
-
<
|
|
584
|
+
<span slot="label">Label</span>
|
|
585
|
+
<span slot="helpText">right bib with 20px offset, noFlip and autoPlacement</span>
|
|
454
586
|
<auro-counter>
|
|
455
587
|
Adults
|
|
456
588
|
<span slot="description">18 years or older</span>
|
|
@@ -472,7 +604,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
|
|
|
472
604
|
<div style="width: 350px">
|
|
473
605
|
<auro-counter-group isDropdown offset="20" placement="bottom-end">
|
|
474
606
|
<div slot="bib.fullscreen.headline">Passengers</div>
|
|
475
|
-
<
|
|
607
|
+
<span slot="label">Label</span>
|
|
608
|
+
<span slot="helpText">bottom-end bib with 20px offset</span>
|
|
476
609
|
<auro-counter>
|
|
477
610
|
Adults
|
|
478
611
|
<span slot="description">18 years or older</span>
|
|
@@ -484,7 +617,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
|
|
|
484
617
|
</auro-counter-group>
|
|
485
618
|
<auro-counter-group isDropdown offset="20" placement="bottom-end" noFlip>
|
|
486
619
|
<div slot="bib.fullscreen.headline">Passengers</div>
|
|
487
|
-
<
|
|
620
|
+
<span slot="label">Label</span>
|
|
621
|
+
<span slot="helpText">bottom-end bib with 20px offset and noFlip</span>
|
|
488
622
|
<auro-counter>
|
|
489
623
|
Adults
|
|
490
624
|
<span slot="description">18 years or older</span>
|
|
@@ -496,7 +630,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
|
|
|
496
630
|
</auro-counter-group>
|
|
497
631
|
<auro-counter-group isDropdown offset="20" placement="right" noFlip autoPlacement>
|
|
498
632
|
<div slot="bib.fullscreen.headline">Passengers</div>
|
|
499
|
-
<
|
|
633
|
+
<span slot="label">Label</span>
|
|
634
|
+
<span slot="helpText">right bib with 20px offset, noFlip and autoPlacement</span>
|
|
500
635
|
<auro-counter>
|
|
501
636
|
Adults
|
|
502
637
|
<span slot="description">18 years or older</span>
|