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.
- package/dist/elements/define-vira-element.d.ts +18 -0
- package/dist/elements/define-vira-element.js +19 -0
- package/dist/elements/form/vira-form-fields.d.ts +100 -0
- package/dist/elements/form/vira-form-fields.js +60 -0
- package/dist/elements/form/vira-form.element.d.ts +35 -0
- package/dist/elements/form/vira-form.element.js +151 -0
- package/dist/elements/index.js +25 -0
- package/dist/elements/pop-up/pop-up-helpers.d.ts +33 -0
- package/dist/elements/pop-up/pop-up-helpers.js +58 -0
- package/{src/elements/pop-up/pop-up-menu-item.ts → dist/elements/pop-up/pop-up-menu-item.d.ts} +3 -4
- package/dist/elements/pop-up/pop-up-menu-item.js +1 -0
- package/dist/elements/pop-up/vira-menu-item.element.d.ts +19 -0
- package/{src/elements/pop-up/vira-menu-item.element.ts → dist/elements/pop-up/vira-menu-item.element.js} +11 -28
- package/dist/elements/pop-up/vira-menu-trigger.element.d.ts +41 -0
- package/dist/elements/pop-up/vira-menu-trigger.element.js +121 -0
- package/dist/elements/pop-up/vira-menu.element.d.ts +38 -0
- package/{src/elements/pop-up/vira-menu.element.ts → dist/elements/pop-up/vira-menu.element.js} +49 -76
- package/dist/elements/pop-up/vira-pop-up-menu.element.d.ts +35 -0
- package/{src/elements/pop-up/vira-pop-up-menu.element.ts → dist/elements/pop-up/vira-pop-up-menu.element.js} +22 -34
- package/dist/elements/pop-up/vira-pop-up-trigger.element.d.ts +105 -0
- package/{src/elements/pop-up/vira-pop-up-trigger.element.ts → dist/elements/pop-up/vira-pop-up-trigger.element.js} +104 -199
- package/dist/elements/shared-text-input-logic.d.ts +63 -0
- package/dist/elements/shared-text-input-logic.js +101 -0
- package/dist/elements/vira-bold-text.element.d.ts +9 -0
- package/{src/elements/vira-bold-text.element.ts → dist/elements/vira-bold-text.element.js} +7 -8
- package/dist/elements/vira-button.element.d.ts +31 -0
- package/{src/elements/vira-button.element.ts → dist/elements/vira-button.element.js} +35 -66
- package/dist/elements/vira-card.element.d.ts +18 -0
- package/{src/elements/vira-card.element.ts → dist/elements/vira-card.element.js} +13 -16
- package/dist/elements/vira-checkbox.element.d.ts +34 -0
- package/{src/elements/vira-checkbox.element.ts → dist/elements/vira-checkbox.element.js} +28 -71
- package/dist/elements/vira-collapsible-wrapper.element.d.ts +14 -0
- package/{src/elements/vira-collapsible-wrapper.element.ts → dist/elements/vira-collapsible-wrapper.element.js} +16 -18
- package/dist/elements/vira-dropdown.element.d.ts +46 -0
- package/{src/elements/vira-dropdown.element.ts → dist/elements/vira-dropdown.element.js} +48 -94
- package/dist/elements/vira-error.element.d.ts +7 -0
- package/{src/elements/vira-error.element.ts → dist/elements/vira-error.element.js} +5 -6
- package/dist/elements/vira-icon.element.d.ts +13 -0
- package/{src/elements/vira-icon.element.ts → dist/elements/vira-icon.element.js} +6 -13
- package/dist/elements/vira-image.element.d.ts +45 -0
- package/{src/elements/vira-image.element.ts → dist/elements/vira-image.element.js} +43 -63
- package/dist/elements/vira-input.element.d.ts +62 -0
- package/{src/elements/vira-input.element.ts → dist/elements/vira-input.element.js} +85 -151
- package/dist/elements/vira-link.element.d.ts +73 -0
- package/{src/elements/vira-link.element.ts → dist/elements/vira-link.element.js} +11 -62
- package/dist/elements/vira-modal.element.d.ts +39 -0
- package/{src/elements/vira-modal.element.ts → dist/elements/vira-modal.element.js} +50 -89
- package/dist/elements/vira-overflow-switch.element.d.ts +21 -0
- package/dist/elements/vira-overflow-switch.element.js +110 -0
- package/dist/elements/vira-progress.element.d.ts +18 -0
- package/{src/elements/vira-progress.element.ts → dist/elements/vira-progress.element.js} +11 -26
- package/dist/elements/vira-select.element.d.ts +48 -0
- package/{src/elements/vira-select.element.ts → dist/elements/vira-select.element.js} +41 -96
- package/dist/icons/icon-color.test-helper.d.ts +6 -0
- package/dist/icons/icon-color.test-helper.js +9 -0
- package/dist/icons/icon-css-vars.d.ts +14 -0
- package/{src/icons/icon-css-vars.ts → dist/icons/icon-css-vars.js} +1 -2
- package/dist/icons/icon-svg.d.ts +27 -0
- package/dist/icons/icon-svg.js +48 -0
- package/dist/icons/icon-svgs/bell-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/bell-24.icon.ts → dist/icons/icon-svgs/bell-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/chat-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/chat-24.icon.ts → dist/icons/icon-svgs/chat-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/check-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/check-24.icon.ts → dist/icons/icon-svgs/check-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/chevron-down-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/chevron-down-24.icon.ts → dist/icons/icon-svgs/chevron-down-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/chevron-up-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/chevron-up-24.icon.ts → dist/icons/icon-svgs/chevron-up-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/close-x-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/close-x-24.icon.ts → dist/icons/icon-svgs/close-x-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/commit-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/commit-24.icon.ts → dist/icons/icon-svgs/commit-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/copy-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/copy-24.icon.ts → dist/icons/icon-svgs/copy-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/document-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/document-24.icon.ts → dist/icons/icon-svgs/document-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/document-search-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/document-search-24.icon.ts → dist/icons/icon-svgs/document-search-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/double-chevron-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/double-chevron-24.icon.ts → dist/icons/icon-svgs/double-chevron-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/element-16.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/element-16.icon.ts → dist/icons/icon-svgs/element-16.icon.js} +4 -5
- package/dist/icons/icon-svgs/element-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/element-24.icon.ts → dist/icons/icon-svgs/element-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/external-link-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/external-link-24.icon.ts → dist/icons/icon-svgs/external-link-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/eye-closed-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/eye-closed-24.icon.ts → dist/icons/icon-svgs/eye-closed-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/eye-open-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/eye-open-24.icon.ts → dist/icons/icon-svgs/eye-open-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/filter-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/filter-24.icon.ts → dist/icons/icon-svgs/filter-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/link-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/link-24.icon.ts → dist/icons/icon-svgs/link-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/loader-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/loader-24.icon.ts → dist/icons/icon-svgs/loader-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/loader-animated-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/loader-animated-24.icon.ts → dist/icons/icon-svgs/loader-animated-24.icon.js} +6 -8
- package/dist/icons/icon-svgs/lock-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/lock-24.icon.ts → dist/icons/icon-svgs/lock-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/options-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/options-24.icon.ts → dist/icons/icon-svgs/options-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/pencil-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/pencil-24.icon.ts → dist/icons/icon-svgs/pencil-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/shield-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/shield-24.icon.ts → dist/icons/icon-svgs/shield-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/sort-ascending-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/sort-ascending-24.icon.ts → dist/icons/icon-svgs/sort-ascending-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/sort-descending-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/sort-descending-24.icon.ts → dist/icons/icon-svgs/sort-descending-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/speaker-loud-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/speaker-loud-24.icon.ts → dist/icons/icon-svgs/speaker-loud-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/speaker-medium-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/speaker-medium-24.icon.ts → dist/icons/icon-svgs/speaker-medium-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/speaker-muted-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/speaker-muted-24.icon.ts → dist/icons/icon-svgs/speaker-muted-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/speaker-quiet-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/speaker-quiet-24.icon.ts → dist/icons/icon-svgs/speaker-quiet-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/star-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/star-24.icon.ts → dist/icons/icon-svgs/star-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/status-failure-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/status-failure-24.icon.ts → dist/icons/icon-svgs/status-failure-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/status-in-progress-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/status-in-progress-24.icon.ts → dist/icons/icon-svgs/status-in-progress-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/status-success-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/status-success-24.icon.ts → dist/icons/icon-svgs/status-success-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/status-unknown-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/status-unknown-24.icon.ts → dist/icons/icon-svgs/status-unknown-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/status-warning-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/status-warning-24.icon.ts → dist/icons/icon-svgs/status-warning-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/upload-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/upload-24.icon.ts → dist/icons/icon-svgs/upload-24.icon.js} +4 -5
- package/dist/icons/icon-svgs/x-24.icon.d.ts +8 -0
- package/{src/icons/icon-svgs/x-24.icon.ts → dist/icons/icon-svgs/x-24.icon.js} +4 -5
- package/dist/icons/index.d.ts +86 -0
- package/{src/icons/index.ts → dist/icons/index.js} +39 -43
- package/dist/index.js +4 -0
- package/dist/styles/border.d.ts +9 -0
- package/{src/styles/border.ts → dist/styles/border.js} +1 -2
- package/dist/styles/disabled.d.ts +6 -0
- package/{src/styles/disabled.ts → dist/styles/disabled.js} +2 -3
- package/dist/styles/durations.d.ts +22 -0
- package/{src/styles/durations.ts → dist/styles/durations.js} +1 -2
- package/dist/styles/focus.d.ts +34 -0
- package/{src/styles/focus.ts → dist/styles/focus.js} +8 -29
- package/dist/styles/font.d.ts +9 -0
- package/{src/styles/font.ts → dist/styles/font.js} +1 -2
- package/dist/styles/form-styles.d.ts +20 -0
- package/{src/styles/form-styles.ts → dist/styles/form-styles.js} +1 -6
- package/{src/styles/index.ts → dist/styles/index.d.ts} +0 -1
- package/dist/styles/index.js +13 -0
- package/dist/styles/native-styles.d.ts +13 -0
- package/{src/styles/native-styles.ts → dist/styles/native-styles.js} +3 -5
- package/dist/styles/scrollbar.d.ts +6 -0
- package/{src/styles/scrollbar.ts → dist/styles/scrollbar.js} +3 -4
- package/dist/styles/shadows.d.ts +20 -0
- package/{src/styles/shadows.ts → dist/styles/shadows.js} +6 -8
- package/dist/styles/user-select.d.ts +6 -0
- package/{src/styles/user-select.ts → dist/styles/user-select.js} +2 -3
- package/dist/styles/vira-color-palette.d.ts +95 -0
- package/{src/styles/vira-color-palette.ts → dist/styles/vira-color-palette.js} +1 -11
- package/dist/styles/vira-color-theme.d.ts +1184 -0
- package/dist/styles/vira-color-theme.js +1138 -0
- package/dist/util/define-table.d.ts +110 -0
- package/dist/util/define-table.js +115 -0
- package/dist/util/dynamic-element.d.ts +63 -0
- package/dist/util/dynamic-element.js +61 -0
- package/dist/util/index.js +3 -0
- package/dist/util/pop-up-manager.d.ts +186 -0
- package/dist/util/pop-up-manager.js +214 -0
- package/package.json +6 -6
- package/src/elements/define-vira-element.ts +0 -29
- package/src/elements/form/vira-form-fields.ts +0 -140
- package/src/elements/form/vira-form.element.ts +0 -204
- package/src/elements/pop-up/pop-up-helpers.ts +0 -85
- package/src/elements/pop-up/vira-menu-trigger.element.ts +0 -158
- package/src/elements/shared-text-input-logic.ts +0 -173
- package/src/elements/vira-overflow-switch.element.ts +0 -137
- package/src/icons/icon-color.test-helper.ts +0 -9
- package/src/icons/icon-svg.ts +0 -71
- package/src/styles/vira-color-theme.ts +0 -1142
- package/src/util/define-table.ts +0 -279
- package/src/util/dynamic-element.ts +0 -129
- package/src/util/pop-up-manager.ts +0 -380
- /package/{src/elements/index.ts → dist/elements/index.d.ts} +0 -0
- /package/{src/index.ts → dist/index.d.ts} +0 -0
- /package/{src/util/index.ts → dist/util/index.d.ts} +0 -0
|
@@ -1,41 +1,14 @@
|
|
|
1
|
-
import {randomString
|
|
2
|
-
import {extractEventTarget} from '@augment-vir/web';
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
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
|
|
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
|
-
|
|
136
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
238
|
-
|
|
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
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
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
|
-
|
|
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
|
-
}
|
|
237
|
+
}
|
|
238
|
+
else {
|
|
294
239
|
return selectTemplate;
|
|
295
240
|
}
|
|
296
241
|
},
|
|
@@ -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
|
+
}>;
|
|
@@ -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
|
+
}
|
|
@@ -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"
|
|
@@ -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"
|
|
@@ -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;
|
package/{src/icons/icon-svgs/chevron-down-24.icon.ts → dist/icons/icon-svgs/chevron-down-24.icon.js}
RENAMED
|
@@ -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;
|
package/{src/icons/icon-svgs/chevron-up-24.icon.ts → dist/icons/icon-svgs/chevron-up-24.icon.js}
RENAMED
|
@@ -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}
|
|
@@ -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"
|
|
@@ -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"
|
|
@@ -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;
|
package/{src/icons/icon-svgs/document-24.icon.ts → dist/icons/icon-svgs/document-24.icon.js}
RENAMED
|
@@ -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"
|