vira 28.19.6 → 28.19.7

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 (188) hide show
  1. package/dist/elements/define-vira-element.d.ts +18 -0
  2. package/dist/elements/define-vira-element.js +19 -0
  3. package/dist/elements/form/vira-form-fields.d.ts +100 -0
  4. package/dist/elements/form/vira-form-fields.js +60 -0
  5. package/dist/elements/form/vira-form.element.d.ts +35 -0
  6. package/dist/elements/form/vira-form.element.js +151 -0
  7. package/dist/elements/index.js +25 -0
  8. package/dist/elements/pop-up/pop-up-helpers.d.ts +33 -0
  9. package/dist/elements/pop-up/pop-up-helpers.js +58 -0
  10. package/{src/elements/pop-up/pop-up-menu-item.ts → dist/elements/pop-up/pop-up-menu-item.d.ts} +3 -4
  11. package/dist/elements/pop-up/pop-up-menu-item.js +1 -0
  12. package/dist/elements/pop-up/vira-menu-item.element.d.ts +19 -0
  13. package/{src/elements/pop-up/vira-menu-item.element.ts → dist/elements/pop-up/vira-menu-item.element.js} +11 -28
  14. package/dist/elements/pop-up/vira-menu-trigger.element.d.ts +41 -0
  15. package/dist/elements/pop-up/vira-menu-trigger.element.js +121 -0
  16. package/dist/elements/pop-up/vira-menu.element.d.ts +38 -0
  17. package/{src/elements/pop-up/vira-menu.element.ts → dist/elements/pop-up/vira-menu.element.js} +49 -76
  18. package/dist/elements/pop-up/vira-pop-up-menu.element.d.ts +35 -0
  19. package/{src/elements/pop-up/vira-pop-up-menu.element.ts → dist/elements/pop-up/vira-pop-up-menu.element.js} +22 -34
  20. package/dist/elements/pop-up/vira-pop-up-trigger.element.d.ts +105 -0
  21. package/{src/elements/pop-up/vira-pop-up-trigger.element.ts → dist/elements/pop-up/vira-pop-up-trigger.element.js} +104 -199
  22. package/dist/elements/shared-text-input-logic.d.ts +63 -0
  23. package/dist/elements/shared-text-input-logic.js +101 -0
  24. package/dist/elements/vira-bold-text.element.d.ts +9 -0
  25. package/{src/elements/vira-bold-text.element.ts → dist/elements/vira-bold-text.element.js} +7 -8
  26. package/dist/elements/vira-button.element.d.ts +31 -0
  27. package/{src/elements/vira-button.element.ts → dist/elements/vira-button.element.js} +35 -66
  28. package/dist/elements/vira-card.element.d.ts +18 -0
  29. package/{src/elements/vira-card.element.ts → dist/elements/vira-card.element.js} +13 -16
  30. package/dist/elements/vira-checkbox.element.d.ts +34 -0
  31. package/{src/elements/vira-checkbox.element.ts → dist/elements/vira-checkbox.element.js} +28 -71
  32. package/dist/elements/vira-collapsible-wrapper.element.d.ts +14 -0
  33. package/{src/elements/vira-collapsible-wrapper.element.ts → dist/elements/vira-collapsible-wrapper.element.js} +16 -18
  34. package/dist/elements/vira-dropdown.element.d.ts +46 -0
  35. package/{src/elements/vira-dropdown.element.ts → dist/elements/vira-dropdown.element.js} +48 -94
  36. package/dist/elements/vira-error.element.d.ts +7 -0
  37. package/{src/elements/vira-error.element.ts → dist/elements/vira-error.element.js} +5 -6
  38. package/dist/elements/vira-icon.element.d.ts +13 -0
  39. package/{src/elements/vira-icon.element.ts → dist/elements/vira-icon.element.js} +6 -13
  40. package/dist/elements/vira-image.element.d.ts +45 -0
  41. package/{src/elements/vira-image.element.ts → dist/elements/vira-image.element.js} +43 -63
  42. package/dist/elements/vira-input.element.d.ts +62 -0
  43. package/{src/elements/vira-input.element.ts → dist/elements/vira-input.element.js} +85 -151
  44. package/dist/elements/vira-link.element.d.ts +73 -0
  45. package/{src/elements/vira-link.element.ts → dist/elements/vira-link.element.js} +11 -62
  46. package/dist/elements/vira-modal.element.d.ts +39 -0
  47. package/{src/elements/vira-modal.element.ts → dist/elements/vira-modal.element.js} +50 -89
  48. package/dist/elements/vira-overflow-switch.element.d.ts +21 -0
  49. package/dist/elements/vira-overflow-switch.element.js +110 -0
  50. package/dist/elements/vira-progress.element.d.ts +18 -0
  51. package/{src/elements/vira-progress.element.ts → dist/elements/vira-progress.element.js} +11 -26
  52. package/dist/elements/vira-select.element.d.ts +48 -0
  53. package/{src/elements/vira-select.element.ts → dist/elements/vira-select.element.js} +41 -96
  54. package/dist/icons/icon-color.test-helper.d.ts +6 -0
  55. package/dist/icons/icon-color.test-helper.js +9 -0
  56. package/dist/icons/icon-css-vars.d.ts +14 -0
  57. package/{src/icons/icon-css-vars.ts → dist/icons/icon-css-vars.js} +1 -2
  58. package/dist/icons/icon-svg.d.ts +27 -0
  59. package/dist/icons/icon-svg.js +48 -0
  60. package/dist/icons/icon-svgs/bell-24.icon.d.ts +8 -0
  61. package/{src/icons/icon-svgs/bell-24.icon.ts → dist/icons/icon-svgs/bell-24.icon.js} +4 -5
  62. package/dist/icons/icon-svgs/chat-24.icon.d.ts +8 -0
  63. package/{src/icons/icon-svgs/chat-24.icon.ts → dist/icons/icon-svgs/chat-24.icon.js} +4 -5
  64. package/dist/icons/icon-svgs/check-24.icon.d.ts +8 -0
  65. package/{src/icons/icon-svgs/check-24.icon.ts → dist/icons/icon-svgs/check-24.icon.js} +4 -5
  66. package/dist/icons/icon-svgs/chevron-down-24.icon.d.ts +8 -0
  67. package/{src/icons/icon-svgs/chevron-down-24.icon.ts → dist/icons/icon-svgs/chevron-down-24.icon.js} +4 -5
  68. package/dist/icons/icon-svgs/chevron-up-24.icon.d.ts +8 -0
  69. package/{src/icons/icon-svgs/chevron-up-24.icon.ts → dist/icons/icon-svgs/chevron-up-24.icon.js} +4 -5
  70. package/dist/icons/icon-svgs/close-x-24.icon.d.ts +8 -0
  71. package/{src/icons/icon-svgs/close-x-24.icon.ts → dist/icons/icon-svgs/close-x-24.icon.js} +4 -5
  72. package/dist/icons/icon-svgs/commit-24.icon.d.ts +8 -0
  73. package/{src/icons/icon-svgs/commit-24.icon.ts → dist/icons/icon-svgs/commit-24.icon.js} +4 -5
  74. package/dist/icons/icon-svgs/copy-24.icon.d.ts +8 -0
  75. package/{src/icons/icon-svgs/copy-24.icon.ts → dist/icons/icon-svgs/copy-24.icon.js} +4 -5
  76. package/dist/icons/icon-svgs/document-24.icon.d.ts +8 -0
  77. package/{src/icons/icon-svgs/document-24.icon.ts → dist/icons/icon-svgs/document-24.icon.js} +4 -5
  78. package/dist/icons/icon-svgs/document-search-24.icon.d.ts +8 -0
  79. package/{src/icons/icon-svgs/document-search-24.icon.ts → dist/icons/icon-svgs/document-search-24.icon.js} +4 -5
  80. package/dist/icons/icon-svgs/double-chevron-24.icon.d.ts +8 -0
  81. package/{src/icons/icon-svgs/double-chevron-24.icon.ts → dist/icons/icon-svgs/double-chevron-24.icon.js} +4 -5
  82. package/dist/icons/icon-svgs/element-16.icon.d.ts +8 -0
  83. package/{src/icons/icon-svgs/element-16.icon.ts → dist/icons/icon-svgs/element-16.icon.js} +4 -5
  84. package/dist/icons/icon-svgs/element-24.icon.d.ts +8 -0
  85. package/{src/icons/icon-svgs/element-24.icon.ts → dist/icons/icon-svgs/element-24.icon.js} +4 -5
  86. package/dist/icons/icon-svgs/external-link-24.icon.d.ts +8 -0
  87. package/{src/icons/icon-svgs/external-link-24.icon.ts → dist/icons/icon-svgs/external-link-24.icon.js} +4 -5
  88. package/dist/icons/icon-svgs/eye-closed-24.icon.d.ts +8 -0
  89. package/{src/icons/icon-svgs/eye-closed-24.icon.ts → dist/icons/icon-svgs/eye-closed-24.icon.js} +4 -5
  90. package/dist/icons/icon-svgs/eye-open-24.icon.d.ts +8 -0
  91. package/{src/icons/icon-svgs/eye-open-24.icon.ts → dist/icons/icon-svgs/eye-open-24.icon.js} +4 -5
  92. package/dist/icons/icon-svgs/filter-24.icon.d.ts +8 -0
  93. package/{src/icons/icon-svgs/filter-24.icon.ts → dist/icons/icon-svgs/filter-24.icon.js} +4 -5
  94. package/dist/icons/icon-svgs/link-24.icon.d.ts +8 -0
  95. package/{src/icons/icon-svgs/link-24.icon.ts → dist/icons/icon-svgs/link-24.icon.js} +4 -5
  96. package/dist/icons/icon-svgs/loader-24.icon.d.ts +8 -0
  97. package/{src/icons/icon-svgs/loader-24.icon.ts → dist/icons/icon-svgs/loader-24.icon.js} +4 -5
  98. package/dist/icons/icon-svgs/loader-animated-24.icon.d.ts +8 -0
  99. package/{src/icons/icon-svgs/loader-animated-24.icon.ts → dist/icons/icon-svgs/loader-animated-24.icon.js} +6 -8
  100. package/dist/icons/icon-svgs/lock-24.icon.d.ts +8 -0
  101. package/{src/icons/icon-svgs/lock-24.icon.ts → dist/icons/icon-svgs/lock-24.icon.js} +4 -5
  102. package/dist/icons/icon-svgs/options-24.icon.d.ts +8 -0
  103. package/{src/icons/icon-svgs/options-24.icon.ts → dist/icons/icon-svgs/options-24.icon.js} +4 -5
  104. package/dist/icons/icon-svgs/pencil-24.icon.d.ts +8 -0
  105. package/{src/icons/icon-svgs/pencil-24.icon.ts → dist/icons/icon-svgs/pencil-24.icon.js} +4 -5
  106. package/dist/icons/icon-svgs/shield-24.icon.d.ts +8 -0
  107. package/{src/icons/icon-svgs/shield-24.icon.ts → dist/icons/icon-svgs/shield-24.icon.js} +4 -5
  108. package/dist/icons/icon-svgs/sort-ascending-24.icon.d.ts +8 -0
  109. package/{src/icons/icon-svgs/sort-ascending-24.icon.ts → dist/icons/icon-svgs/sort-ascending-24.icon.js} +4 -5
  110. package/dist/icons/icon-svgs/sort-descending-24.icon.d.ts +8 -0
  111. package/{src/icons/icon-svgs/sort-descending-24.icon.ts → dist/icons/icon-svgs/sort-descending-24.icon.js} +4 -5
  112. package/dist/icons/icon-svgs/speaker-loud-24.icon.d.ts +8 -0
  113. package/{src/icons/icon-svgs/speaker-loud-24.icon.ts → dist/icons/icon-svgs/speaker-loud-24.icon.js} +4 -5
  114. package/dist/icons/icon-svgs/speaker-medium-24.icon.d.ts +8 -0
  115. package/{src/icons/icon-svgs/speaker-medium-24.icon.ts → dist/icons/icon-svgs/speaker-medium-24.icon.js} +4 -5
  116. package/dist/icons/icon-svgs/speaker-muted-24.icon.d.ts +8 -0
  117. package/{src/icons/icon-svgs/speaker-muted-24.icon.ts → dist/icons/icon-svgs/speaker-muted-24.icon.js} +4 -5
  118. package/dist/icons/icon-svgs/speaker-quiet-24.icon.d.ts +8 -0
  119. package/{src/icons/icon-svgs/speaker-quiet-24.icon.ts → dist/icons/icon-svgs/speaker-quiet-24.icon.js} +4 -5
  120. package/dist/icons/icon-svgs/star-24.icon.d.ts +8 -0
  121. package/{src/icons/icon-svgs/star-24.icon.ts → dist/icons/icon-svgs/star-24.icon.js} +4 -5
  122. package/dist/icons/icon-svgs/status-failure-24.icon.d.ts +8 -0
  123. package/{src/icons/icon-svgs/status-failure-24.icon.ts → dist/icons/icon-svgs/status-failure-24.icon.js} +4 -5
  124. package/dist/icons/icon-svgs/status-in-progress-24.icon.d.ts +8 -0
  125. package/{src/icons/icon-svgs/status-in-progress-24.icon.ts → dist/icons/icon-svgs/status-in-progress-24.icon.js} +4 -5
  126. package/dist/icons/icon-svgs/status-success-24.icon.d.ts +8 -0
  127. package/{src/icons/icon-svgs/status-success-24.icon.ts → dist/icons/icon-svgs/status-success-24.icon.js} +4 -5
  128. package/dist/icons/icon-svgs/status-unknown-24.icon.d.ts +8 -0
  129. package/{src/icons/icon-svgs/status-unknown-24.icon.ts → dist/icons/icon-svgs/status-unknown-24.icon.js} +4 -5
  130. package/dist/icons/icon-svgs/status-warning-24.icon.d.ts +8 -0
  131. package/{src/icons/icon-svgs/status-warning-24.icon.ts → dist/icons/icon-svgs/status-warning-24.icon.js} +4 -5
  132. package/dist/icons/icon-svgs/upload-24.icon.d.ts +8 -0
  133. package/{src/icons/icon-svgs/upload-24.icon.ts → dist/icons/icon-svgs/upload-24.icon.js} +4 -5
  134. package/dist/icons/icon-svgs/x-24.icon.d.ts +8 -0
  135. package/{src/icons/icon-svgs/x-24.icon.ts → dist/icons/icon-svgs/x-24.icon.js} +4 -5
  136. package/dist/icons/index.d.ts +86 -0
  137. package/{src/icons/index.ts → dist/icons/index.js} +39 -43
  138. package/dist/index.js +4 -0
  139. package/dist/styles/border.d.ts +9 -0
  140. package/{src/styles/border.ts → dist/styles/border.js} +1 -2
  141. package/dist/styles/disabled.d.ts +6 -0
  142. package/{src/styles/disabled.ts → dist/styles/disabled.js} +2 -3
  143. package/dist/styles/durations.d.ts +22 -0
  144. package/{src/styles/durations.ts → dist/styles/durations.js} +1 -2
  145. package/dist/styles/focus.d.ts +34 -0
  146. package/{src/styles/focus.ts → dist/styles/focus.js} +8 -29
  147. package/dist/styles/font.d.ts +9 -0
  148. package/{src/styles/font.ts → dist/styles/font.js} +1 -2
  149. package/dist/styles/form-styles.d.ts +20 -0
  150. package/{src/styles/form-styles.ts → dist/styles/form-styles.js} +1 -6
  151. package/{src/styles/index.ts → dist/styles/index.d.ts} +0 -1
  152. package/dist/styles/index.js +13 -0
  153. package/dist/styles/native-styles.d.ts +13 -0
  154. package/{src/styles/native-styles.ts → dist/styles/native-styles.js} +3 -5
  155. package/dist/styles/scrollbar.d.ts +6 -0
  156. package/{src/styles/scrollbar.ts → dist/styles/scrollbar.js} +3 -4
  157. package/dist/styles/shadows.d.ts +20 -0
  158. package/{src/styles/shadows.ts → dist/styles/shadows.js} +6 -8
  159. package/dist/styles/user-select.d.ts +6 -0
  160. package/{src/styles/user-select.ts → dist/styles/user-select.js} +2 -3
  161. package/dist/styles/vira-color-palette.d.ts +95 -0
  162. package/{src/styles/vira-color-palette.ts → dist/styles/vira-color-palette.js} +1 -11
  163. package/dist/styles/vira-color-theme.d.ts +1184 -0
  164. package/dist/styles/vira-color-theme.js +1138 -0
  165. package/dist/util/define-table.d.ts +110 -0
  166. package/dist/util/define-table.js +115 -0
  167. package/dist/util/dynamic-element.d.ts +63 -0
  168. package/dist/util/dynamic-element.js +61 -0
  169. package/dist/util/index.js +3 -0
  170. package/dist/util/pop-up-manager.d.ts +186 -0
  171. package/dist/util/pop-up-manager.js +214 -0
  172. package/package.json +6 -6
  173. package/src/elements/define-vira-element.ts +0 -29
  174. package/src/elements/form/vira-form-fields.ts +0 -140
  175. package/src/elements/form/vira-form.element.ts +0 -204
  176. package/src/elements/pop-up/pop-up-helpers.ts +0 -85
  177. package/src/elements/pop-up/vira-menu-trigger.element.ts +0 -158
  178. package/src/elements/shared-text-input-logic.ts +0 -173
  179. package/src/elements/vira-overflow-switch.element.ts +0 -137
  180. package/src/icons/icon-color.test-helper.ts +0 -9
  181. package/src/icons/icon-svg.ts +0 -71
  182. package/src/styles/vira-color-theme.ts +0 -1142
  183. package/src/util/define-table.ts +0 -279
  184. package/src/util/dynamic-element.ts +0 -129
  185. package/src/util/pop-up-manager.ts +0 -380
  186. /package/{src/elements/index.ts → dist/elements/index.d.ts} +0 -0
  187. /package/{src/index.ts → dist/index.d.ts} +0 -0
  188. /package/{src/util/index.ts → dist/util/index.d.ts} +0 -0
@@ -1,41 +1,14 @@
1
- import {randomString, type PartialWithUndefined} from '@augment-vir/common';
2
- import {extractEventTarget} from '@augment-vir/web';
3
- import {
4
- attributes,
5
- classMap,
6
- css,
7
- defineElementEvent,
8
- html,
9
- ifDefined,
10
- listen,
11
- nothing,
12
- type AttributeValues,
13
- } from 'element-vir';
14
- import {ChevronUp24Icon, type ViraIconSvg} from '../icons/index.js';
15
- import {viraDisabledStyles} from '../styles/disabled.js';
16
- import {createFocusStyles} from '../styles/focus.js';
17
- import {viraFormCssVars} from '../styles/form-styles.js';
18
- import {viraAnimationDurations, viraBorders} from '../styles/index.js';
19
- import {noNativeFormStyles} from '../styles/native-styles.js';
20
- import {defineViraElement} from './define-vira-element.js';
21
- import {ViraDropdown} from './vira-dropdown.element.js';
22
- import {ViraIcon} from './vira-icon.element.js';
23
-
24
- /**
25
- * Options for {@link ViraSelect}.
26
- *
27
- * @category Dropdown
28
- * @category Elements
29
- * @see https://electrovir.github.io/vira/book/elements/vira-select
30
- */
31
- export type ViraSelectOption = {
32
- /** A value or id, used to keep track of which option is selected. */
33
- value: string;
34
- label: string;
35
- } & PartialWithUndefined<{
36
- disabled: boolean;
37
- }>;
38
-
1
+ import { randomString } from '@augment-vir/common';
2
+ import { extractEventTarget } from '@augment-vir/web';
3
+ import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, nothing, } from 'element-vir';
4
+ import { ChevronUp24Icon } from '../icons/index.js';
5
+ import { viraDisabledStyles } from '../styles/disabled.js';
6
+ import { createFocusStyles } from '../styles/focus.js';
7
+ import { viraFormCssVars } from '../styles/form-styles.js';
8
+ import { viraAnimationDurations, viraBorders } from '../styles/index.js';
9
+ import { noNativeFormStyles } from '../styles/native-styles.js';
10
+ import { defineViraElement } from './define-vira-element.js';
11
+ import { ViraIcon } from './vira-icon.element.js';
39
12
  /**
40
13
  * Similar to {@link ViraDropdown} but is, instead, simply a wrapper for `<select>` and nothing more.
41
14
  *
@@ -43,28 +16,7 @@ export type ViraSelectOption = {
43
16
  * @category Elements
44
17
  * @see https://electrovir.github.io/vira/book/elements/vira-select
45
18
  */
46
- export const ViraSelect = defineViraElement<
47
- Readonly<
48
- {
49
- options: ReadonlyArray<Readonly<ViraSelectOption>>;
50
- /** The currently selected option value. */
51
- value: undefined | string;
52
- } & PartialWithUndefined<{
53
- icon: Readonly<ViraIconSvg>;
54
- placeholder: string;
55
- label: string;
56
- disabled: boolean;
57
- attributePassthrough: Readonly<
58
- PartialWithUndefined<{
59
- label: AttributeValues;
60
- select: AttributeValues;
61
- option: AttributeValues;
62
- }>
63
- >;
64
- hasError: boolean;
65
- }>
66
- >
67
- >()({
19
+ export const ViraSelect = defineViraElement()({
68
20
  tagName: 'vira-select',
69
21
  state() {
70
22
  return {
@@ -76,7 +28,7 @@ export const ViraSelect = defineViraElement<
76
28
  };
77
29
  },
78
30
  events: {
79
- valueChange: defineElementEvent<string>(),
31
+ valueChange: defineElementEvent(),
80
32
  },
81
33
  cssVars: {
82
34
  'vira-select-padding-horizontal': '10px',
@@ -84,10 +36,10 @@ export const ViraSelect = defineViraElement<
84
36
  'vira-select-icon-padding': '44px',
85
37
  },
86
38
  hostClasses: {
87
- 'vira-select-disabled': ({inputs}) => !!inputs.disabled,
88
- 'vira-select-error': ({inputs}) => !!inputs.hasError,
39
+ 'vira-select-disabled': ({ inputs }) => !!inputs.disabled,
40
+ 'vira-select-error': ({ inputs }) => !!inputs.hasError,
89
41
  },
90
- styles: ({hostClasses, cssVars}) => css`
42
+ styles: ({ hostClasses, cssVars }) => css `
91
43
  :host {
92
44
  position: relative;
93
45
  display: inline-flex;
@@ -132,9 +84,9 @@ export const ViraSelect = defineViraElement<
132
84
 
133
85
  &:focus:focus-visible:not([aria-disabled='true']) ~ .focus-border {
134
86
  ${createFocusStyles({
135
- elementBorderSize: 0,
136
- noNesting: true,
137
- })}
87
+ elementBorderSize: 0,
88
+ noNesting: true,
89
+ })}
138
90
  }
139
91
 
140
92
  &.placeholder {
@@ -217,47 +169,40 @@ export const ViraSelect = defineViraElement<
217
169
  }
218
170
  }
219
171
  `,
220
- render({inputs, state, dispatch, events}) {
172
+ render({ inputs, state, dispatch, events }) {
221
173
  const value = inputs.value || undefined;
222
-
223
- const placeholderOptionTemplate =
224
- inputs.placeholder || value == undefined
225
- ? html`
174
+ const placeholderOptionTemplate = inputs.placeholder || value == undefined
175
+ ? html `
226
176
  <option value="" disabled ?selected=${value == undefined}>
227
177
  ${inputs.placeholder}
228
178
  </option>
229
179
  `
230
- : nothing;
231
-
232
- const selectTemplate = html`
180
+ : nothing;
181
+ const selectTemplate = html `
233
182
  <span class="select-wrapper">
234
183
  <select
235
184
  .value=${ifDefined(value)}
236
185
  class=${classMap({
237
- placeholder: !value && !!inputs.placeholder,
238
- 'with-icon': !!inputs.icon,
239
- })}
186
+ placeholder: !value && !!inputs.placeholder,
187
+ 'with-icon': !!inputs.icon,
188
+ })}
240
189
  tabindex=${inputs.disabled ? -1 : 0}
241
190
  id=${ifDefined(inputs.label ? state.randomId : undefined)}
242
191
  aria-label=${ifDefined(inputs.label || undefined)}
243
192
  aria-disabled=${ifDefined(inputs.disabled ? 'true' : undefined)}
244
193
  ${listen('input', (event) => {
245
- const selectElement = extractEventTarget(event, HTMLSelectElement);
246
- const newValue = selectElement.value;
247
-
248
- if (selectElement.value !== value) {
249
- selectElement.selectedIndex = inputs.options.findIndex(
250
- (option) => option.value === value,
251
- );
252
- }
253
-
254
- dispatch(new events.valueChange(newValue));
255
- })}
194
+ const selectElement = extractEventTarget(event, HTMLSelectElement);
195
+ const newValue = selectElement.value;
196
+ if (selectElement.value !== value) {
197
+ selectElement.selectedIndex = inputs.options.findIndex((option) => option.value === value);
198
+ }
199
+ dispatch(new events.valueChange(newValue));
200
+ })}
256
201
  ${attributes(inputs.attributePassthrough?.select)}
257
202
  >
258
203
  ${placeholderOptionTemplate}
259
204
  ${inputs.options.map((option) => {
260
- return html`
205
+ return html `
261
206
  <option
262
207
  ?selected=${option.value === value}
263
208
  aria-label=${option.label}
@@ -267,7 +212,7 @@ export const ViraSelect = defineViraElement<
267
212
  ${option.label}
268
213
  </option>
269
214
  `;
270
- })}
215
+ })}
271
216
  </select>
272
217
  <!--
273
218
  These separate style elements are necessary so that we can select them as
@@ -278,19 +223,19 @@ export const ViraSelect = defineViraElement<
278
223
 
279
224
  <div class="border-style wrapper-border"></div>
280
225
 
281
- <${ViraIcon.assign({icon: inputs.icon})} class="input-icon"></${ViraIcon}>
282
- <${ViraIcon.assign({icon: ChevronUp24Icon})} class="trigger-icon"></${ViraIcon}>
226
+ <${ViraIcon.assign({ icon: inputs.icon })} class="input-icon"></${ViraIcon}>
227
+ <${ViraIcon.assign({ icon: ChevronUp24Icon })} class="trigger-icon"></${ViraIcon}>
283
228
  </span>
284
229
  `;
285
-
286
230
  if (inputs.label) {
287
- return html`
231
+ return html `
288
232
  <label for=${state.randomId} ${attributes(inputs.attributePassthrough?.label)}>
289
233
  <span class="select-label">${inputs.label}</span>
290
234
  ${selectTemplate}
291
235
  </label>
292
236
  `;
293
- } else {
237
+ }
238
+ else {
294
239
  return selectTemplate;
295
240
  }
296
241
  },
@@ -0,0 +1,6 @@
1
+ export declare enum ColorType {
2
+ Color = "color",
3
+ Fill = "fill",
4
+ Stroke = "stroke"
5
+ }
6
+ export declare function extractIconColor(element: Element, colorType: ColorType): string;
@@ -0,0 +1,9 @@
1
+ export var ColorType;
2
+ (function (ColorType) {
3
+ ColorType["Color"] = "color";
4
+ ColorType["Fill"] = "fill";
5
+ ColorType["Stroke"] = "stroke";
6
+ })(ColorType || (ColorType = {}));
7
+ export function extractIconColor(element, colorType) {
8
+ return window.getComputedStyle(element).getPropertyValue(colorType);
9
+ }
@@ -0,0 +1,14 @@
1
+ /**
2
+ * CSS vars that are supported by all Vira SVG icons.
3
+ *
4
+ * @category Icon
5
+ * @category CSS Vars
6
+ * @category Styles
7
+ */
8
+ export declare const viraIconCssVars: import("lit-css-vars").CssVarDefinitions<{
9
+ /** To be used for coloring an icon's stroke. */
10
+ readonly 'vira-icon-stroke-color': "currentColor";
11
+ /** To be used for coloring an icon's fill. */
12
+ readonly 'vira-icon-fill-color': "none";
13
+ readonly 'vira-icon-stroke-width': "1.5px";
14
+ }>;
@@ -1,5 +1,4 @@
1
- import {defineCssVars} from 'lit-css-vars';
2
-
1
+ import { defineCssVars } from 'lit-css-vars';
3
2
  /**
4
3
  * CSS vars that are supported by all Vira SVG icons.
5
4
  *
@@ -0,0 +1,27 @@
1
+ import { type TemplateResult } from 'element-vir';
2
+ import { viraIconCssVars } from './icon-css-vars.js';
3
+ /**
4
+ * An individual Vira icon SVG definition.
5
+ *
6
+ * @category Icon
7
+ */
8
+ export type ViraIconSvg = {
9
+ name: string;
10
+ svgTemplate: TemplateResult;
11
+ };
12
+ /**
13
+ * A function used to define an individual Vira icon SVG.
14
+ *
15
+ * @category Icon
16
+ */
17
+ export declare function defineIcon({ name, svgTemplate, }: {
18
+ name: string;
19
+ svgTemplate: TemplateResult;
20
+ }): ViraIconSvg;
21
+ /**
22
+ * Wraps an existing icon with a specific color and outputs another icon that can be used anywhere
23
+ * the original icon can be used.
24
+ *
25
+ * @category Icon
26
+ */
27
+ export declare function createColoredIcon(icon: ViraIconSvg, colors: Partial<Record<keyof typeof viraIconCssVars, string>>): ViraIconSvg;
@@ -0,0 +1,48 @@
1
+ import { getObjectTypedKeys, stringify } from '@augment-vir/common';
2
+ import Color from 'colorjs.io';
3
+ import { html } from 'element-vir';
4
+ import { viraIconCssVars } from './icon-css-vars.js';
5
+ /**
6
+ * A function used to define an individual Vira icon SVG.
7
+ *
8
+ * @category Icon
9
+ */
10
+ export function defineIcon({ name, svgTemplate, }) {
11
+ const iconSvg = {
12
+ name,
13
+ svgTemplate,
14
+ };
15
+ return iconSvg;
16
+ }
17
+ function getAssertedValidColor(input) {
18
+ try {
19
+ if (!input) {
20
+ throw new Error('invalid empty color');
21
+ }
22
+ return new Color(input);
23
+ }
24
+ catch {
25
+ throw new Error(`Invalid color: ${stringify(input)}`);
26
+ }
27
+ }
28
+ /**
29
+ * Wraps an existing icon with a specific color and outputs another icon that can be used anywhere
30
+ * the original icon can be used.
31
+ *
32
+ * @category Icon
33
+ */
34
+ export function createColoredIcon(icon, colors) {
35
+ const colorStyles = getObjectTypedKeys(colors)
36
+ .map((cssVarName) => {
37
+ const colorValue = colors[cssVarName];
38
+ const color = getAssertedValidColor(colorValue);
39
+ return `${viraIconCssVars[cssVarName].name}: ${color.toString()};`;
40
+ })
41
+ .join(' ');
42
+ return defineIcon({
43
+ name: icon.name,
44
+ svgTemplate: html `
45
+ <div style=${colorStyles}>${icon.svgTemplate}</div>
46
+ `,
47
+ });
48
+ }
@@ -0,0 +1,8 @@
1
+ /**
2
+ * A bell icon.
3
+ *
4
+ * @category Icon
5
+ * @category SVG
6
+ * @see https://electrovir.github.io/vira/book/icons/bell24icon
7
+ */
8
+ export declare const Bell24Icon: import("../icon-svg.js").ViraIconSvg;
@@ -1,7 +1,6 @@
1
- import {html} from 'element-vir';
2
- import {viraIconCssVars} from '../icon-css-vars.js';
3
- import {defineIcon} from '../icon-svg.js';
4
-
1
+ import { html } from 'element-vir';
2
+ import { viraIconCssVars } from '../icon-css-vars.js';
3
+ import { defineIcon } from '../icon-svg.js';
5
4
  /**
6
5
  * A bell icon.
7
6
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
11
10
  */
12
11
  export const Bell24Icon = defineIcon({
13
12
  name: 'Bell24Icon',
14
- svgTemplate: html`
13
+ svgTemplate: html `
15
14
  <svg
16
15
  xmlns="http://www.w3.org/2000/svg"
17
16
  xml:space="preserve"
@@ -0,0 +1,8 @@
1
+ /**
2
+ * A chat bubble icon.
3
+ *
4
+ * @category Icon
5
+ * @category SVG
6
+ * @see https://electrovir.github.io/vira/book/icons/chat24icon
7
+ */
8
+ export declare const Chat24Icon: import("../icon-svg.js").ViraIconSvg;
@@ -1,7 +1,6 @@
1
- import {html} from 'element-vir';
2
- import {viraIconCssVars} from '../icon-css-vars.js';
3
- import {defineIcon} from '../icon-svg.js';
4
-
1
+ import { html } from 'element-vir';
2
+ import { viraIconCssVars } from '../icon-css-vars.js';
3
+ import { defineIcon } from '../icon-svg.js';
5
4
  /**
6
5
  * A chat bubble icon.
7
6
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
11
10
  */
12
11
  export const Chat24Icon = defineIcon({
13
12
  name: 'Chat24Icon',
14
- svgTemplate: html`
13
+ svgTemplate: html `
15
14
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
16
15
  <path
17
16
  d="M5 15.4c-1.6-1.2-2.6-2.7-2.6-4.4 0-3.5 4.3-6.3 9.6-6.3s9.6 2.8 9.6 6.3-4.3 6.4-9.6 6.4L9 17l-5 3.8 1-5.5Z"
@@ -0,0 +1,8 @@
1
+ /**
2
+ * A checkmark.
3
+ *
4
+ * @category Icon
5
+ * @category SVG
6
+ * @see https://electrovir.github.io/vira/book/icons/check24icon
7
+ */
8
+ export declare const Check24Icon: import("../icon-svg.js").ViraIconSvg;
@@ -1,7 +1,6 @@
1
- import {html} from 'element-vir';
2
- import {viraIconCssVars} from '../icon-css-vars.js';
3
- import {defineIcon} from '../icon-svg.js';
4
-
1
+ import { html } from 'element-vir';
2
+ import { viraIconCssVars } from '../icon-css-vars.js';
3
+ import { defineIcon } from '../icon-svg.js';
5
4
  /**
6
5
  * A checkmark.
7
6
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
11
10
  */
12
11
  export const Check24Icon = defineIcon({
13
12
  name: 'Check24Icon',
14
- svgTemplate: html`
13
+ svgTemplate: html `
15
14
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
16
15
  <path
17
16
  d="m17 8.5-7 8-3-3"
@@ -0,0 +1,8 @@
1
+ /**
2
+ * A chevron that points upwards. See ChevronUp24Icon or one pointing upwards.
3
+ *
4
+ * @category Icon
5
+ * @category SVG
6
+ * @see https://electrovir.github.io/vira/book/icons/chevrondown24icon
7
+ */
8
+ export declare const ChevronDown24Icon: import("../icon-svg.js").ViraIconSvg;
@@ -1,7 +1,6 @@
1
- import {html} from 'element-vir';
2
- import {viraIconCssVars} from '../icon-css-vars.js';
3
- import {defineIcon} from '../icon-svg.js';
4
-
1
+ import { html } from 'element-vir';
2
+ import { viraIconCssVars } from '../icon-css-vars.js';
3
+ import { defineIcon } from '../icon-svg.js';
5
4
  /**
6
5
  * A chevron that points upwards. See ChevronUp24Icon or one pointing upwards.
7
6
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
11
10
  */
12
11
  export const ChevronDown24Icon = defineIcon({
13
12
  name: 'ChevronDown24Icon',
14
- svgTemplate: html`
13
+ svgTemplate: html `
15
14
  <svg
16
15
  xmlns="http://www.w3.org/2000/svg"
17
16
  stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
@@ -0,0 +1,8 @@
1
+ /**
2
+ * A chevron that points upwards. See ChevronDown24Icon for one pointing downloads.
3
+ *
4
+ * @category Icon
5
+ * @category SVG
6
+ * @see https://electrovir.github.io/vira/book/icons/chevronup24icon
7
+ */
8
+ export declare const ChevronUp24Icon: import("../icon-svg.js").ViraIconSvg;
@@ -1,7 +1,6 @@
1
- import {html} from 'element-vir';
2
- import {viraIconCssVars} from '../icon-css-vars.js';
3
- import {defineIcon} from '../icon-svg.js';
4
-
1
+ import { html } from 'element-vir';
2
+ import { viraIconCssVars } from '../icon-css-vars.js';
3
+ import { defineIcon } from '../icon-svg.js';
5
4
  /**
6
5
  * A chevron that points upwards. See ChevronDown24Icon for one pointing downloads.
7
6
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
11
10
  */
12
11
  export const ChevronUp24Icon = defineIcon({
13
12
  name: 'ChevronUp24Icon',
14
- svgTemplate: html`
13
+ svgTemplate: html `
15
14
  <svg
16
15
  xmlns="http://www.w3.org/2000/svg"
17
16
  stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
@@ -0,0 +1,8 @@
1
+ /**
2
+ * An x icon meant to be used as a "close" button.
3
+ *
4
+ * @category Icon
5
+ * @category SVG
6
+ * @see https://electrovir.github.io/vira/book/icons/closex24icon
7
+ */
8
+ export declare const CloseX24Icon: import("../icon-svg.js").ViraIconSvg;
@@ -1,7 +1,6 @@
1
- import {html} from 'element-vir';
2
- import {viraIconCssVars} from '../icon-css-vars.js';
3
- import {defineIcon} from '../icon-svg.js';
4
-
1
+ import { html } from 'element-vir';
2
+ import { viraIconCssVars } from '../icon-css-vars.js';
3
+ import { defineIcon } from '../icon-svg.js';
5
4
  /**
6
5
  * An x icon meant to be used as a "close" button.
7
6
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
11
10
  */
12
11
  export const CloseX24Icon = defineIcon({
13
12
  name: 'CloseX24Icon',
14
- svgTemplate: html`
13
+ svgTemplate: html `
15
14
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
16
15
  <circle
17
16
  cx="12"
@@ -0,0 +1,8 @@
1
+ /**
2
+ * An icon that represents a single commit in git.
3
+ *
4
+ * @category Icon
5
+ * @category SVG
6
+ * @see https://electrovir.github.io/vira/book/icons/commit24icon
7
+ */
8
+ export declare const Commit24Icon: import("../icon-svg.js").ViraIconSvg;
@@ -1,7 +1,6 @@
1
- import {html} from 'element-vir';
2
- import {viraIconCssVars} from '../icon-css-vars.js';
3
- import {defineIcon} from '../icon-svg.js';
4
-
1
+ import { html } from 'element-vir';
2
+ import { viraIconCssVars } from '../icon-css-vars.js';
3
+ import { defineIcon } from '../icon-svg.js';
5
4
  /**
6
5
  * An icon that represents a single commit in git.
7
6
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
11
10
  */
12
11
  export const Commit24Icon = defineIcon({
13
12
  name: 'Commit24Icon',
14
- svgTemplate: html`
13
+ svgTemplate: html `
15
14
  <svg
16
15
  xmlns="http://www.w3.org/2000/svg"
17
16
  xml:space="preserve"
@@ -0,0 +1,8 @@
1
+ /**
2
+ * An icon that represents copying something.
3
+ *
4
+ * @category Icon
5
+ * @category SVG
6
+ * @see https://electrovir.github.io/vira/book/icons/copy24icon
7
+ */
8
+ export declare const Copy24Icon: import("../icon-svg.js").ViraIconSvg;
@@ -1,7 +1,6 @@
1
- import {html} from 'element-vir';
2
- import {viraIconCssVars} from '../icon-css-vars.js';
3
- import {defineIcon} from '../icon-svg.js';
4
-
1
+ import { html } from 'element-vir';
2
+ import { viraIconCssVars } from '../icon-css-vars.js';
3
+ import { defineIcon } from '../icon-svg.js';
5
4
  /**
6
5
  * An icon that represents copying something.
7
6
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
11
10
  */
12
11
  export const Copy24Icon = defineIcon({
13
12
  name: 'Copy24Icon',
14
- svgTemplate: html`
13
+ svgTemplate: html `
15
14
  <svg
16
15
  xmlns="http://www.w3.org/2000/svg"
17
16
  xml:space="preserve"
@@ -0,0 +1,8 @@
1
+ /**
2
+ * An icon that represents a single document file on a computer file system.
3
+ *
4
+ * @category Icon
5
+ * @category SVG
6
+ * @see https://electrovir.github.io/vira/book/icons/document24icon
7
+ */
8
+ export declare const Document24Icon: import("../icon-svg.js").ViraIconSvg;
@@ -1,7 +1,6 @@
1
- import {html} from 'element-vir';
2
- import {viraIconCssVars} from '../icon-css-vars.js';
3
- import {defineIcon} from '../icon-svg.js';
4
-
1
+ import { html } from 'element-vir';
2
+ import { viraIconCssVars } from '../icon-css-vars.js';
3
+ import { defineIcon } from '../icon-svg.js';
5
4
  /**
6
5
  * An icon that represents a single document file on a computer file system.
7
6
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
11
10
  */
12
11
  export const Document24Icon = defineIcon({
13
12
  name: 'Document24Icon',
14
- svgTemplate: html`
13
+ svgTemplate: html `
15
14
  <svg
16
15
  xmlns="http://www.w3.org/2000/svg"
17
16
  xml:space="preserve"
@@ -0,0 +1,8 @@
1
+ /**
2
+ * An icon that represents searching on a document or searching for a document.
3
+ *
4
+ * @category Icon
5
+ * @category SVG
6
+ * @see https://electrovir.github.io/vira/book/icons/documentsearch24icon
7
+ */
8
+ export declare const DocumentSearch24Icon: import("../icon-svg.js").ViraIconSvg;
@@ -1,7 +1,6 @@
1
- import {html} from 'element-vir';
2
- import {viraIconCssVars} from '../icon-css-vars.js';
3
- import {defineIcon} from '../icon-svg.js';
4
-
1
+ import { html } from 'element-vir';
2
+ import { viraIconCssVars } from '../icon-css-vars.js';
3
+ import { defineIcon } from '../icon-svg.js';
5
4
  /**
6
5
  * An icon that represents searching on a document or searching for a document.
7
6
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
11
10
  */
12
11
  export const DocumentSearch24Icon = defineIcon({
13
12
  name: 'DocumentSearch24Icon',
14
- svgTemplate: html`
13
+ svgTemplate: html `
15
14
  <svg
16
15
  xmlns="http://www.w3.org/2000/svg"
17
16
  xml:space="preserve"
@@ -0,0 +1,8 @@
1
+ /**
2
+ * A icon with two opposing chevrons.
3
+ *
4
+ * @category Icon
5
+ * @category SVG
6
+ * @see https://electrovir.github.io/vira/book/icons/doublechevron24icon
7
+ */
8
+ export declare const DoubleChevron24Icon: import("../icon-svg.js").ViraIconSvg;