@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.4 → 0.0.0-pr624.40

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 (114) hide show
  1. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +13 -2
  2. package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
  3. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  4. package/components/bibtemplate/dist/index.js +1292 -79
  5. package/components/bibtemplate/dist/registered.js +1292 -79
  6. package/components/checkbox/README.md +1 -1
  7. package/components/checkbox/demo/api.md +47 -14
  8. package/components/checkbox/demo/api.min.js +44 -31
  9. package/components/checkbox/demo/index.md +2 -2
  10. package/components/checkbox/demo/index.min.js +44 -31
  11. package/components/checkbox/demo/readme.md +1 -1
  12. package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
  13. package/components/checkbox/dist/auro-checkbox.d.ts +3 -3
  14. package/components/checkbox/dist/index.js +44 -31
  15. package/components/checkbox/dist/registered.js +44 -31
  16. package/components/combobox/demo/api.md +100 -2
  17. package/components/combobox/demo/api.min.js +3202 -759
  18. package/components/combobox/demo/index.md +6 -30
  19. package/components/combobox/demo/index.min.js +3202 -759
  20. package/components/combobox/dist/auro-combobox.d.ts +37 -16
  21. package/components/combobox/dist/index.js +3091 -789
  22. package/components/combobox/dist/registered.js +3091 -789
  23. package/components/counter/demo/api.html +1 -0
  24. package/components/counter/demo/api.md +21 -19
  25. package/components/counter/demo/api.min.js +3324 -614
  26. package/components/counter/demo/index.html +1 -0
  27. package/components/counter/demo/index.md +103 -34
  28. package/components/counter/demo/index.min.js +3324 -614
  29. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  30. package/components/counter/dist/auro-counter-group.d.ts +89 -6
  31. package/components/counter/dist/auro-counter.d.ts +6 -0
  32. package/components/counter/dist/helptextVersion.d.ts +2 -0
  33. package/components/counter/dist/iconVersion.d.ts +1 -1
  34. package/components/counter/dist/index.js +3324 -614
  35. package/components/counter/dist/registered.js +3324 -614
  36. package/components/datepicker/demo/api.md +36 -19
  37. package/components/datepicker/demo/api.min.js +11976 -8000
  38. package/components/datepicker/demo/index.md +80 -0
  39. package/components/datepicker/demo/index.min.js +11976 -8000
  40. package/components/datepicker/dist/auro-datepicker.d.ts +71 -3
  41. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  42. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  43. package/components/datepicker/dist/index.js +12238 -8262
  44. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  45. package/components/datepicker/dist/registered.js +12238 -8262
  46. package/components/dropdown/demo/api.md +8 -9
  47. package/components/dropdown/demo/api.min.js +551 -147
  48. package/components/dropdown/demo/index.md +57 -9
  49. package/components/dropdown/demo/index.min.js +551 -147
  50. package/components/dropdown/dist/auro-dropdown.d.ts +28 -9
  51. package/components/dropdown/dist/auro-dropdownBib.d.ts +22 -0
  52. package/components/dropdown/dist/index.js +551 -147
  53. package/components/dropdown/dist/registered.js +551 -147
  54. package/components/form/demo/api.min.js +1 -1
  55. package/components/form/demo/index.min.js +1 -1
  56. package/components/form/dist/index.js +1 -1
  57. package/components/form/dist/registered.js +1 -1
  58. package/components/helptext/dist/index.js +2 -2
  59. package/components/helptext/dist/registered.js +2 -2
  60. package/components/input/README.md +5 -2
  61. package/components/input/demo/api.md +271 -176
  62. package/components/input/demo/api.min.js +956 -270
  63. package/components/input/demo/index.md +48 -32
  64. package/components/input/demo/index.min.js +955 -269
  65. package/components/input/demo/readme.md +5 -2
  66. package/components/input/dist/auro-input.d.ts +23 -15
  67. package/components/input/dist/base-input.d.ts +32 -8
  68. package/components/input/dist/buttonVersion.d.ts +1 -1
  69. package/components/input/dist/iconVersion.d.ts +1 -1
  70. package/components/input/dist/index.js +955 -269
  71. package/components/input/dist/registered.js +955 -269
  72. package/components/layoutElement/dist/index.js +13 -10
  73. package/components/menu/demo/api.html +38 -0
  74. package/components/menu/demo/api.md +68 -7
  75. package/components/menu/demo/api.min.js +278 -42
  76. package/components/menu/demo/index.min.js +278 -42
  77. package/components/menu/dist/auro-menu.d.ts +28 -5
  78. package/components/menu/dist/auro-menuoption.d.ts +15 -3
  79. package/components/menu/dist/iconVersion.d.ts +1 -1
  80. package/components/menu/dist/index.js +278 -42
  81. package/components/menu/dist/registered.js +278 -42
  82. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  83. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  84. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  85. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  86. package/components/radio/demo/api.md +7 -8
  87. package/components/radio/demo/api.min.js +68 -80
  88. package/components/radio/demo/index.min.js +68 -80
  89. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  90. package/components/radio/dist/auro-radio.d.ts +9 -12
  91. package/components/radio/dist/index.js +68 -80
  92. package/components/radio/dist/registered.js +68 -80
  93. package/components/select/demo/api.md +123 -13
  94. package/components/select/demo/api.min.js +3045 -456
  95. package/components/select/demo/index.html +1 -0
  96. package/components/select/demo/index.md +323 -763
  97. package/components/select/demo/index.min.js +3045 -456
  98. package/components/select/dist/auro-select.d.ts +112 -11
  99. package/components/select/dist/helptextVersion.d.ts +2 -0
  100. package/components/select/dist/index.js +2925 -477
  101. package/components/select/dist/registered.js +2925 -477
  102. package/components/select/dist/styles/shapeSize-css.d.ts +2 -0
  103. package/components/select/dist/styles/tokens-css.d.ts +2 -0
  104. package/package.json +6 -4
  105. /package/components/{dropdown/dist/styles/default/bibColors-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  106. /package/components/{dropdown → datepicker}/dist/styles/default/color-css.d.ts +0 -0
  107. /package/components/{dropdown/dist/styles/default/bibStyles-css.d.ts → datepicker/dist/styles/shapeSize-css.d.ts} +0 -0
  108. /package/components/{dropdown/dist/styles/default/style-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  109. /package/components/{dropdown/dist/styles → datepicker/dist/styles/snowflake}/style-css.d.ts +0 -0
  110. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/classic/bibColors-css.d.ts} +0 -0
  111. /package/components/{menu/dist/styles/color-menuoption-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  112. /package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
  113. /package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/classic/style-css.d.ts} +0 -0
  114. /package/components/menu/dist/styles/{tokens-css.d.ts → default/color-menu-css.d.ts} +0 -0
package/components/layoutElement/dist/index.js CHANGED
@@ -35,18 +35,21 @@ class AuroElement extends LitElement {
35
35
  }
36
36
 
37
37
  resetShapeClasses() {
38
- if (this.shape && this.size) {
39
- const wrapper = this.shadowRoot.querySelector('.wrapper');
38
+ const wrapper = this.shadowRoot.querySelector('.wrapper');
40
39
 
41
- if (wrapper) {
42
- wrapper.classList.forEach((className) => {
43
- if (className.startsWith('shape-')) {
44
- wrapper.classList.remove(className);
45
- }
46
- });
40
+ if (wrapper) {
41
+ wrapper.classList.forEach((className) => {
42
+ if (className.startsWith('shape-')) {
43
+ wrapper.classList.remove(className);
44
+ }
45
+ });
47
46
 
48
- wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
49
- }
47
+ }
48
+
49
+ if (this.shape && this.size) {
50
+ wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
51
+ } else {
52
+ wrapper.classList.add('shape-none');
50
53
  }
51
54
  }
52
55
 
package/components/menu/demo/api.html CHANGED
@@ -27,8 +27,45 @@
27
27
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
28
28
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
29
29
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
30
+ <style>
31
+ header {
32
+ background: lightgray;
33
+ position: fixed;
34
+ bottom: 0;
35
+ right: 0;
36
+ z-index: 10;
37
+ }
38
+ </style>
39
+ <script>
40
+ function onRadioInput(event) {
41
+ if (event.constructor.name === 'CustomEvent') {
42
+ const group = event.target.getAttribute('name');
43
+ const menus = document.querySelectorAll('auro-menu');
44
+ if (menus) {
45
+ menus.forEach((menu) => {
46
+ menu.setAttribute(group, event.target.value);
47
+ });
48
+ }
49
+ };
50
+ }
51
+ </script>
30
52
  </head>
31
53
  <body class="auro-markdown">
54
+ <header oninput="onRadioInput(event)">
55
+ <auro-radio-group required horizontal name="shape">
56
+ <span slot="legend">Shape</span>
57
+ <auro-radio label="box" value="box" checked></auro-radio>
58
+ <auro-radio label="rounded" value="rounded"></auro-radio>
59
+ <auro-radio label="pill" value="pill"></auro-radio>
60
+ </auro-radio-group>
61
+ <auro-radio-group required horizontal name="size">
62
+ <span slot="legend">Size</span>
63
+ <auro-radio label="medium(default)" value="md" checked></auro-radio>
64
+ <auro-radio label="large" value="lg"></auro-radio>
65
+ <auro-radio label="xlarge" value="xl"></auro-radio>
66
+ </auro-radio-group>
67
+
68
+ </header>
32
69
  <main></main>
33
70
 
34
71
  <script type="module">
@@ -47,6 +84,7 @@
47
84
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-input@latest/dist/auro-input__bundled.js" type="module"></script>
48
85
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
49
86
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-loader@latest/dist/auro-loader__bundled.js" type="module"></script>
87
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-radio/+esm"></script>
50
88
  <script type="module" data-demo-script="true">
51
89
  import { initExamples } from "./api.min.js"
52
90
  initExamples();
package/components/menu/demo/api.md CHANGED
@@ -11,12 +11,15 @@ The auro-menu element provides users a way to select from a list of options.
11
11
  |-------------------------|------------------|-----------------------------------|-------------|--------------------------------------------------|
12
12
  | [disabled](#disabled) | `disabled` | `boolean` | | When true, the entire menu and all options are disabled; |
13
13
  | [hasLoadingPlaceholder](#hasLoadingPlaceholder) | | `boolean` | | Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state. |
14
+ | [layout](#layout) | | `string` | | |
14
15
  | [loading](#loading) | `loading` | `boolean` | false | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
15
16
  | [matchWord](#matchWord) | `matchword` | `string` | "undefined" | Specifies a string used to highlight matched string parts in options. |
16
17
  | [multiSelect](#multiSelect) | `multiselect` | `boolean` | false | When true, the selected option can be multiple options. |
17
18
  | [noCheckmark](#noCheckmark) | `nocheckmark` | `boolean` | false | When true, selected option will not show the checkmark. |
18
19
  | [optionActive](#optionActive) | `optionactive` | `object` | "undefined" | Specifies the current active menuOption. |
19
20
  | [optionSelected](#optionSelected) | `optionSelected` | `HTMLElement\|Array<HTMLElement>` | "undefined" | An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements. |
21
+ | [shape](#shape) | | `string` | "" | |
22
+ | [size](#size) | | `string` | "" | |
20
23
  | [value](#value) | `value` | `String\|Array<string>` | "undefined" | Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings. |
21
24
 
22
25
  ## Methods
@@ -60,8 +63,11 @@ The auro-menu element provides users a way to define a menu option.
60
63
  |---------------|---------------|-----------|---------|--------------------------------------------------|
61
64
  | [disabled](#disabled) | `disabled` | `Boolean` | false | When true specifies that the menuoption is disabled. |
62
65
  | [iconTag](#iconTag) | | `string` | | |
66
+ | [layout](#layout) | | `string` | | |
63
67
  | [nocheckmark](#nocheckmark) | `nocheckmark` | `boolean` | false | |
64
68
  | [selected](#selected) | `selected` | `Boolean` | false | Specifies that an option is selected. |
69
+ | [shape](#shape) | | `string` | "" | |
70
+ | [size](#size) | | `string` | "" | |
65
71
  | [value](#value) | `value` | `String` | | Specifies the value to be sent to a server. |
66
72
 
67
73
  ## Events
@@ -936,19 +942,74 @@ export function auroMenuResetExample() {
936
942
 
937
943
  The component may be restyled using the following code sample and changing the values of the following token(s).
938
944
 
939
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
940
- <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
945
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/default/tokens.scss) -->
946
+ <!-- The below code snippet is automatically added from ./../src/styles/default/tokens.scss -->
941
947
 
942
948
  ```scss
943
- @import "@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska";
949
+ @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
944
950
 
945
951
  :host {
946
- --ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, #{$ds-basic-color-border-divider});
947
- --ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #{$ds-basic-color-brand-primary});
948
- --ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
952
+ --ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
953
+ --ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #{v.$ds-basic-color-brand-primary});
954
+ --ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
949
955
  --ds-auro-menuoption-container-color: transparent;
956
+ --ds-auro-menuoption-container-border-color: var(--ds-auro-menuoption-container-color);
950
957
  --ds-auro-menuoption-icon-color: transparent;
951
- --ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
958
+ --ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
952
959
  }
953
960
  ```
954
961
  <!-- AURO-GENERATED-CONTENT:END -->
962
+ <div class="exampleWrapper">
963
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customColor.html) -->
964
+ <!-- The below content is automatically added from ./../apiExamples/customColor.html -->
965
+ <style>
966
+ #customColorMenu auro-menuoption[selected] {
967
+ --ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-subtle);
968
+ --ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default);
969
+ }
970
+ #customColorMenu auro-menuoption:hover {
971
+ --ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted);
972
+ }
973
+ #customColorMenu auro-menuoption:focus {
974
+ --ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand);
975
+ }
976
+
977
+ </style>
978
+ <auro-menu id="customColorMenu">
979
+ <auro-menuoption value="stops">Stops</auro-menuoption>
980
+ <auro-menuoption value="price">Price</auro-menuoption>
981
+ <auro-menuoption value="duration">Duration</auro-menuoption>
982
+ <auro-menuoption value="departure">Departure</auro-menuoption>
983
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
984
+ </auro-menu>
985
+ <!-- AURO-GENERATED-CONTENT:END -->
986
+ </div>
987
+ <auro-accordion alignRight>
988
+ <span slot="trigger">See code</span>
989
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/customColor.html) -->
990
+ <!-- The below code snippet is automatically added from ./../apiExamples/customColor.html -->
991
+
992
+ ```html
993
+ <style>
994
+ #customColorMenu auro-menuoption[selected] {
995
+ --ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-subtle);
996
+ --ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default);
997
+ }
998
+ #customColorMenu auro-menuoption:hover {
999
+ --ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted);
1000
+ }
1001
+ #customColorMenu auro-menuoption:focus {
1002
+ --ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand);
1003
+ }
1004
+
1005
+ </style>
1006
+ <auro-menu id="customColorMenu">
1007
+ <auro-menuoption value="stops">Stops</auro-menuoption>
1008
+ <auro-menuoption value="price">Price</auro-menuoption>
1009
+ <auro-menuoption value="duration">Duration</auro-menuoption>
1010
+ <auro-menuoption value="departure">Departure</auro-menuoption>
1011
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
1012
+ </auro-menu>
1013
+ ```
1014
+ <!-- AURO-GENERATED-CONTENT:END -->
1015
+ </auro-accordion>