@breadstone/mosaik-elements-foundation 0.0.264 → 0.0.265
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/Controls/Components/Inputs/Calendar/CalendarElement.d.ts +4 -12
- package/Controls/Components/Inputs/Calendar/CalendarElement.d.ts.map +1 -1
- package/Controls/Components/Inputs/Calendar/CalendarElement.js +3 -24
- package/Controls/Components/Inputs/Calendar/CalendarElement.js.map +1 -1
- package/Controls/Components/Inputs/Calendar/CalendarElementTemplate.d.ts.map +1 -1
- package/Controls/Components/Inputs/Calendar/CalendarElementTemplate.js +22 -23
- package/Controls/Components/Inputs/Calendar/CalendarElementTemplate.js.map +1 -1
- package/Controls/Components/Inputs/Calendar/ICalendarElementProps.d.ts +2 -5
- package/Controls/Components/Inputs/Calendar/ICalendarElementProps.d.ts.map +1 -1
- package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Cosmopolitan.d.ts.map +1 -1
- package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Cosmopolitan.js +15 -7
- package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Cosmopolitan.js.map +1 -1
- package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Joy.d.ts.map +1 -1
- package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Joy.js +15 -7
- package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Joy.js.map +1 -1
- package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Memphis.d.ts.map +1 -1
- package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Memphis.js +15 -7
- package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Memphis.js.map +1 -1
- package/Controls/Components/Inputs/DateBox/DateBoxElement.d.ts.map +1 -1
- package/Controls/Components/Inputs/DateBox/DateBoxElement.js +7 -2
- package/Controls/Components/Inputs/DateBox/DateBoxElement.js.map +1 -1
- package/Controls/Components/Inputs/DateTimeBox/DateTimeBoxElement.d.ts +90 -1
- package/Controls/Components/Inputs/DateTimeBox/DateTimeBoxElement.d.ts.map +1 -1
- package/Controls/Components/Inputs/DateTimeBox/DateTimeBoxElement.js +186 -9
- package/Controls/Components/Inputs/DateTimeBox/DateTimeBoxElement.js.map +1 -1
- package/Controls/Components/Inputs/DateTimeBox/DateTimeBoxElementTemplate.d.ts.map +1 -1
- package/Controls/Components/Inputs/DateTimeBox/DateTimeBoxElementTemplate.js +72 -37
- package/Controls/Components/Inputs/DateTimeBox/DateTimeBoxElementTemplate.js.map +1 -1
- package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Cosmopolitan.d.ts.map +1 -1
- package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Cosmopolitan.js +35 -0
- package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Cosmopolitan.js.map +1 -1
- package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Joy.d.ts.map +1 -1
- package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Joy.js +35 -0
- package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Joy.js.map +1 -1
- package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Memphis.d.ts.map +1 -1
- package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Memphis.js +35 -0
- package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Memphis.js.map +1 -1
- package/Controls/Components/Inputs/ToggleSwitch/Themes/ToggleSwitchElement.Joy.d.ts.map +1 -1
- package/Controls/Components/Inputs/ToggleSwitch/Themes/ToggleSwitchElement.Joy.js +8 -7
- package/Controls/Components/Inputs/ToggleSwitch/Themes/ToggleSwitchElement.Joy.js.map +1 -1
- package/Controls/Components/Overlays/Drawer/DrawerElement.d.ts +80 -0
- package/Controls/Components/Overlays/Drawer/DrawerElement.d.ts.map +1 -1
- package/Controls/Components/Overlays/Drawer/DrawerElement.js +147 -1
- package/Controls/Components/Overlays/Drawer/DrawerElement.js.map +1 -1
- package/Controls/Components/Overlays/Drawer/DrawerElementTemplate.d.ts.map +1 -1
- package/Controls/Components/Overlays/Drawer/DrawerElementTemplate.js +5 -37
- package/Controls/Components/Overlays/Drawer/DrawerElementTemplate.js.map +1 -1
- package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Cosmopolitan.d.ts.map +1 -1
- package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Cosmopolitan.js +1 -0
- package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Cosmopolitan.js.map +1 -1
- package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Joy.d.ts.map +1 -1
- package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Joy.js +1 -0
- package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Joy.js.map +1 -1
- package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Memphis.d.ts.map +1 -1
- package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Memphis.js +1 -0
- package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Memphis.js.map +1 -1
- package/Controls/Components/Primitives/WheelPicker/IWheelPickerElementProps.d.ts +20 -0
- package/Controls/Components/Primitives/WheelPicker/IWheelPickerElementProps.d.ts.map +1 -0
- package/Controls/Components/Primitives/WheelPicker/IWheelPickerElementProps.js +3 -0
- package/Controls/Components/Primitives/WheelPicker/IWheelPickerElementProps.js.map +1 -0
- package/Controls/Components/Primitives/WheelPicker/IWheelPickerItem.d.ts +16 -0
- package/Controls/Components/Primitives/WheelPicker/IWheelPickerItem.d.ts.map +1 -0
- package/Controls/Components/Primitives/WheelPicker/IWheelPickerItem.js +2 -0
- package/Controls/Components/Primitives/WheelPicker/IWheelPickerItem.js.map +1 -0
- package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Cosmopolitan.d.ts +6 -0
- package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Cosmopolitan.d.ts.map +1 -0
- package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Cosmopolitan.js +179 -0
- package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Cosmopolitan.js.map +1 -0
- package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Joy.d.ts +6 -0
- package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Joy.d.ts.map +1 -0
- package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Joy.js +179 -0
- package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Joy.js.map +1 -0
- package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Memphis.d.ts +6 -0
- package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Memphis.d.ts.map +1 -0
- package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Memphis.js +179 -0
- package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Memphis.js.map +1 -0
- package/Controls/Components/Primitives/WheelPicker/WheelPickerElement.d.ts +140 -0
- package/Controls/Components/Primitives/WheelPicker/WheelPickerElement.d.ts.map +1 -0
- package/Controls/Components/Primitives/WheelPicker/WheelPickerElement.js +213 -0
- package/Controls/Components/Primitives/WheelPicker/WheelPickerElement.js.map +1 -0
- package/Controls/Components/Primitives/WheelPicker/WheelPickerElementTemplate.d.ts +9 -0
- package/Controls/Components/Primitives/WheelPicker/WheelPickerElementTemplate.d.ts.map +1 -0
- package/Controls/Components/Primitives/WheelPicker/WheelPickerElementTemplate.js +29 -0
- package/Controls/Components/Primitives/WheelPicker/WheelPickerElementTemplate.js.map +1 -0
- package/Controls/Components/Shell/Themes/AppElement.Cosmopolitan.d.ts.map +1 -1
- package/Controls/Components/Shell/Themes/AppElement.Cosmopolitan.js +1 -0
- package/Controls/Components/Shell/Themes/AppElement.Cosmopolitan.js.map +1 -1
- package/Controls/Components/Shell/Themes/AppElement.Joy.d.ts.map +1 -1
- package/Controls/Components/Shell/Themes/AppElement.Joy.js +1 -0
- package/Controls/Components/Shell/Themes/AppElement.Joy.js.map +1 -1
- package/Controls/Components/Shell/Themes/AppElement.Memphis.d.ts.map +1 -1
- package/Controls/Components/Shell/Themes/AppElement.Memphis.js +1 -0
- package/Controls/Components/Shell/Themes/AppElement.Memphis.js.map +1 -1
- package/Controls/events/WheelPickerEvents.d.ts +24 -0
- package/Controls/events/WheelPickerEvents.d.ts.map +1 -0
- package/Controls/events/WheelPickerEvents.js +3 -0
- package/Controls/events/WheelPickerEvents.js.map +1 -0
- package/Controls/events/index.d.ts +1 -0
- package/Controls/events/index.d.ts.map +1 -1
- package/Index.d.ts +3 -0
- package/Index.d.ts.map +1 -1
- package/Index.js +1 -0
- package/Index.js.map +1 -1
- package/Intl/Formatters/DateTimeFormatter.d.ts +16 -0
- package/Intl/Formatters/DateTimeFormatter.d.ts.map +1 -1
- package/Intl/Formatters/DateTimeFormatter.js +62 -9
- package/Intl/Formatters/DateTimeFormatter.js.map +1 -1
- package/Intl/Formatters/TimeFormatter.d.ts +6 -4
- package/Intl/Formatters/TimeFormatter.d.ts.map +1 -1
- package/Intl/Formatters/TimeFormatter.js +6 -4
- package/Intl/Formatters/TimeFormatter.js.map +1 -1
- package/Intl/parsers/DateParser.d.ts +63 -0
- package/Intl/parsers/DateParser.d.ts.map +1 -0
- package/Intl/parsers/DateParser.js +139 -0
- package/Intl/parsers/DateParser.js.map +1 -0
- package/Intl/parsers/DateTimeParser.d.ts +85 -0
- package/Intl/parsers/DateTimeParser.d.ts.map +1 -0
- package/Intl/parsers/DateTimeParser.js +223 -0
- package/Intl/parsers/DateTimeParser.js.map +1 -0
- package/Routing/PathToRegexp.d.ts +1 -1
- package/custom-elements.json +770 -22
- package/package.json +3 -3
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
// ------------------------------------------------------------------------------
|
|
2
|
+
// <auto-generated>
|
|
3
|
+
// This code was generated by a tool.
|
|
4
|
+
// Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
|
|
5
|
+
// </auto-generated>
|
|
6
|
+
// ------------------------------------------------------------------------------
|
|
7
|
+
// #region Imports
|
|
8
|
+
import { css } from '../../../../../Dom/Css';
|
|
9
|
+
// #endregion
|
|
10
|
+
/**
|
|
11
|
+
* @public
|
|
12
|
+
*/
|
|
13
|
+
export function wheelPickerElementJoyStyle() {
|
|
14
|
+
return css `
|
|
15
|
+
:host {
|
|
16
|
+
--wheel-picker-background-color: var(--joy-scheme-background);
|
|
17
|
+
--wheel-picker-border-color: var(--joy-scheme-highlight);
|
|
18
|
+
--wheel-picker-border-radius: var(--joy-layout-radius);
|
|
19
|
+
--wheel-picker-border-style: none;
|
|
20
|
+
--wheel-picker-border-width: 0px;
|
|
21
|
+
--wheel-picker-font-family: var(--joy-font-family);
|
|
22
|
+
--wheel-picker-font-letter-spacing: unset;
|
|
23
|
+
--wheel-picker-font-line-height: unset;
|
|
24
|
+
--wheel-picker-font-size: 14px;
|
|
25
|
+
--wheel-picker-font-text-decoration: unset;
|
|
26
|
+
--wheel-picker-font-text-transform: unset;
|
|
27
|
+
--wheel-picker-font-weight: var(--joy-typography-body2-font-weight);
|
|
28
|
+
--wheel-picker-foreground-color: var(--joy-scheme-foreground);
|
|
29
|
+
--wheel-picker-gap: 0px;
|
|
30
|
+
--wheel-picker-item-height: 36px;
|
|
31
|
+
--wheel-picker-padding-bottom: 0px;
|
|
32
|
+
--wheel-picker-padding-left: 4px;
|
|
33
|
+
--wheel-picker-padding-right: 4px;
|
|
34
|
+
--wheel-picker-padding-top: 0px;
|
|
35
|
+
--wheel-picker-shadow: unset unset unset unset unset;
|
|
36
|
+
--wheel-picker-shadow-blur: unset;
|
|
37
|
+
--wheel-picker-shadow-color: unset;
|
|
38
|
+
--wheel-picker-shadow-offset-x: unset;
|
|
39
|
+
--wheel-picker-shadow-offset-y: unset;
|
|
40
|
+
--wheel-picker-shadow-spread: unset;
|
|
41
|
+
--wheel-picker-transition-duration: var(--joy-duration-short);
|
|
42
|
+
--wheel-picker-transition-mode: ease;
|
|
43
|
+
--wheel-picker-transition-property: background-color, color;
|
|
44
|
+
--wheel-picker-translate: none;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@media screen and (prefers-reduced-motion: reduce) {
|
|
48
|
+
:host {
|
|
49
|
+
transition-duration: .01ms;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
:host {
|
|
54
|
+
box-sizing: border-box;
|
|
55
|
+
display: block;
|
|
56
|
+
position: relative;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
:host *, :host :before, :host :after {
|
|
60
|
+
box-sizing: border-box;
|
|
61
|
+
background-repeat: no-repeat;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
:host :before, :host :after {
|
|
65
|
+
text-decoration: inherit;
|
|
66
|
+
vertical-align: inherit;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
:host([hidden]) {
|
|
70
|
+
display: none !important;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
:host {
|
|
74
|
+
font-family: var(--wheel-picker-font-family);
|
|
75
|
+
font-size: var(--wheel-picker-font-size);
|
|
76
|
+
font-weight: var(--wheel-picker-font-weight);
|
|
77
|
+
color: var(--wheel-picker-foreground-color);
|
|
78
|
+
transition-duration: var(--wheel-picker-transition-duration);
|
|
79
|
+
transition-timing-function: var(--wheel-picker-transition-mode);
|
|
80
|
+
transition-property: var(--wheel-picker-transition-property);
|
|
81
|
+
translate: var(--wheel-picker-translate);
|
|
82
|
+
padding-top: var(--wheel-picker-padding-top);
|
|
83
|
+
padding-right: var(--wheel-picker-padding-right);
|
|
84
|
+
padding-bottom: var(--wheel-picker-padding-bottom);
|
|
85
|
+
padding-left: var(--wheel-picker-padding-left);
|
|
86
|
+
flex-direction: column;
|
|
87
|
+
flex: 1;
|
|
88
|
+
display: flex;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
:host [part="column"] {
|
|
92
|
+
max-height: var(--wheel-picker-column-max-height, 240px);
|
|
93
|
+
scroll-snap-type: y mandatory;
|
|
94
|
+
overscroll-behavior: contain;
|
|
95
|
+
scrollbar-width: thin;
|
|
96
|
+
flex: 1;
|
|
97
|
+
overflow-y: auto;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
:host [part="column"]:focus {
|
|
101
|
+
outline: none;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
:host [part~="item"] {
|
|
105
|
+
height: var(--wheel-picker-item-height);
|
|
106
|
+
cursor: pointer;
|
|
107
|
+
-webkit-user-select: none;
|
|
108
|
+
-moz-user-select: none;
|
|
109
|
+
user-select: none;
|
|
110
|
+
scroll-snap-align: start;
|
|
111
|
+
border-radius: var(--wheel-picker-border-radius);
|
|
112
|
+
margin: 0 var(--wheel-picker-padding-left);
|
|
113
|
+
justify-content: center;
|
|
114
|
+
align-items: center;
|
|
115
|
+
transition: background-color .15s;
|
|
116
|
+
display: flex;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
:host [part~="item"]:hover:not([part~="selected"]) {
|
|
120
|
+
opacity: .7;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
:host [part~="item"][part~="selected"] {
|
|
124
|
+
font-weight: 600;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
:host([disabled]:not([disabled="false"])) {
|
|
128
|
+
pointer-events: none;
|
|
129
|
+
opacity: .5;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
:host([variant="primary"]) [part~="item"][part~="selected"] {
|
|
133
|
+
background-color: var(--joy-color-primary-500);
|
|
134
|
+
color: var(--joy-scheme-background);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
:host([variant="secondary"]) [part~="item"][part~="selected"] {
|
|
138
|
+
background-color: var(--joy-color-secondary-500);
|
|
139
|
+
color: var(--joy-scheme-background);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
:host([variant="tertiary"]) [part~="item"][part~="selected"] {
|
|
143
|
+
background-color: var(--joy-color-tertiary-500);
|
|
144
|
+
color: var(--joy-scheme-background);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
:host([variant="danger"]) [part~="item"][part~="selected"] {
|
|
148
|
+
background-color: var(--joy-color-danger-500);
|
|
149
|
+
color: var(--joy-scheme-background);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
:host([variant="warning"]) [part~="item"][part~="selected"] {
|
|
153
|
+
background-color: var(--joy-color-warning-500);
|
|
154
|
+
color: var(--joy-scheme-background);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
:host([variant="success"]) [part~="item"][part~="selected"] {
|
|
158
|
+
background-color: var(--joy-color-success-500);
|
|
159
|
+
color: var(--joy-scheme-background);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
:host([variant="info"]) [part~="item"][part~="selected"] {
|
|
163
|
+
background-color: var(--joy-color-info-500);
|
|
164
|
+
color: var(--joy-scheme-background);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
:host([variant="highlight"]) [part~="item"][part~="selected"] {
|
|
168
|
+
background-color: var(--joy-color-highlight-500);
|
|
169
|
+
color: var(--joy-scheme-background);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
:host([variant="neutral"]) [part~="item"][part~="selected"] {
|
|
173
|
+
background-color: var(--joy-color-neutral-500);
|
|
174
|
+
color: var(--joy-scheme-background);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
`;
|
|
178
|
+
}
|
|
179
|
+
//# sourceMappingURL=WheelPickerElement.Joy.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WheelPickerElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,0BAA0B;IACtC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmKT,CAAC;AACN,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WheelPickerElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,8BAA8B,IAAI,SAAS,CAqK1D"}
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
// ------------------------------------------------------------------------------
|
|
2
|
+
// <auto-generated>
|
|
3
|
+
// This code was generated by a tool.
|
|
4
|
+
// Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
|
|
5
|
+
// </auto-generated>
|
|
6
|
+
// ------------------------------------------------------------------------------
|
|
7
|
+
// #region Imports
|
|
8
|
+
import { css } from '../../../../../Dom/Css';
|
|
9
|
+
// #endregion
|
|
10
|
+
/**
|
|
11
|
+
* @public
|
|
12
|
+
*/
|
|
13
|
+
export function wheelPickerElementMemphisStyle() {
|
|
14
|
+
return css `
|
|
15
|
+
:host {
|
|
16
|
+
--wheel-picker-background-color: unset;
|
|
17
|
+
--wheel-picker-border-color: unset;
|
|
18
|
+
--wheel-picker-border-radius: var(--memphis-layout-radius);
|
|
19
|
+
--wheel-picker-border-style: none;
|
|
20
|
+
--wheel-picker-border-width: 0px;
|
|
21
|
+
--wheel-picker-font-family: var(--memphis-font-family);
|
|
22
|
+
--wheel-picker-font-letter-spacing: unset;
|
|
23
|
+
--wheel-picker-font-line-height: unset;
|
|
24
|
+
--wheel-picker-font-size: 14px;
|
|
25
|
+
--wheel-picker-font-text-decoration: unset;
|
|
26
|
+
--wheel-picker-font-text-transform: unset;
|
|
27
|
+
--wheel-picker-font-weight: var(--memphis-typography-body2-font-weight);
|
|
28
|
+
--wheel-picker-foreground-color: var(--memphis-scheme-foreground);
|
|
29
|
+
--wheel-picker-gap: 0px;
|
|
30
|
+
--wheel-picker-item-height: 36px;
|
|
31
|
+
--wheel-picker-padding-bottom: 0px;
|
|
32
|
+
--wheel-picker-padding-left: 4px;
|
|
33
|
+
--wheel-picker-padding-right: 4px;
|
|
34
|
+
--wheel-picker-padding-top: 0px;
|
|
35
|
+
--wheel-picker-shadow: unset unset unset unset unset;
|
|
36
|
+
--wheel-picker-shadow-blur: unset;
|
|
37
|
+
--wheel-picker-shadow-color: unset;
|
|
38
|
+
--wheel-picker-shadow-offset-x: unset;
|
|
39
|
+
--wheel-picker-shadow-offset-y: unset;
|
|
40
|
+
--wheel-picker-shadow-spread: unset;
|
|
41
|
+
--wheel-picker-transition-duration: var(--memphis-duration-short);
|
|
42
|
+
--wheel-picker-transition-mode: ease;
|
|
43
|
+
--wheel-picker-transition-property: background-color, color;
|
|
44
|
+
--wheel-picker-translate: none;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@media screen and (prefers-reduced-motion: reduce) {
|
|
48
|
+
:host {
|
|
49
|
+
transition-duration: .01ms;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
:host {
|
|
54
|
+
box-sizing: border-box;
|
|
55
|
+
display: block;
|
|
56
|
+
position: relative;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
:host *, :host :before, :host :after {
|
|
60
|
+
box-sizing: border-box;
|
|
61
|
+
background-repeat: no-repeat;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
:host :before, :host :after {
|
|
65
|
+
text-decoration: inherit;
|
|
66
|
+
vertical-align: inherit;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
:host([hidden]) {
|
|
70
|
+
display: none !important;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
:host {
|
|
74
|
+
font-family: var(--wheel-picker-font-family);
|
|
75
|
+
font-size: var(--wheel-picker-font-size);
|
|
76
|
+
font-weight: var(--wheel-picker-font-weight);
|
|
77
|
+
color: var(--wheel-picker-foreground-color);
|
|
78
|
+
transition-duration: var(--wheel-picker-transition-duration);
|
|
79
|
+
transition-timing-function: var(--wheel-picker-transition-mode);
|
|
80
|
+
transition-property: var(--wheel-picker-transition-property);
|
|
81
|
+
translate: var(--wheel-picker-translate);
|
|
82
|
+
padding-top: var(--wheel-picker-padding-top);
|
|
83
|
+
padding-right: var(--wheel-picker-padding-right);
|
|
84
|
+
padding-bottom: var(--wheel-picker-padding-bottom);
|
|
85
|
+
padding-left: var(--wheel-picker-padding-left);
|
|
86
|
+
flex-direction: column;
|
|
87
|
+
flex: 1;
|
|
88
|
+
display: flex;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
:host [part="column"] {
|
|
92
|
+
max-height: var(--wheel-picker-column-max-height, 240px);
|
|
93
|
+
scroll-snap-type: y mandatory;
|
|
94
|
+
overscroll-behavior: contain;
|
|
95
|
+
scrollbar-width: thin;
|
|
96
|
+
flex: 1;
|
|
97
|
+
overflow-y: auto;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
:host [part="column"]:focus {
|
|
101
|
+
outline: none;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
:host [part~="item"] {
|
|
105
|
+
height: var(--wheel-picker-item-height);
|
|
106
|
+
cursor: pointer;
|
|
107
|
+
-webkit-user-select: none;
|
|
108
|
+
-moz-user-select: none;
|
|
109
|
+
user-select: none;
|
|
110
|
+
scroll-snap-align: start;
|
|
111
|
+
border-radius: var(--wheel-picker-border-radius);
|
|
112
|
+
margin: 0 var(--wheel-picker-padding-left);
|
|
113
|
+
justify-content: center;
|
|
114
|
+
align-items: center;
|
|
115
|
+
transition: background-color .15s;
|
|
116
|
+
display: flex;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
:host [part~="item"]:hover:not([part~="selected"]) {
|
|
120
|
+
opacity: .7;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
:host [part~="item"][part~="selected"] {
|
|
124
|
+
font-weight: 600;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
:host([disabled]:not([disabled="false"])) {
|
|
128
|
+
pointer-events: none;
|
|
129
|
+
opacity: .5;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
:host([variant="primary"]) [part~="item"][part~="selected"] {
|
|
133
|
+
background-color: var(--memphis-color-primary-500);
|
|
134
|
+
color: var(--memphis-scheme-background);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
:host([variant="secondary"]) [part~="item"][part~="selected"] {
|
|
138
|
+
background-color: var(--memphis-color-secondary-500);
|
|
139
|
+
color: var(--memphis-scheme-background);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
:host([variant="tertiary"]) [part~="item"][part~="selected"] {
|
|
143
|
+
background-color: var(--memphis-color-tertiary-500);
|
|
144
|
+
color: var(--memphis-scheme-background);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
:host([variant="danger"]) [part~="item"][part~="selected"] {
|
|
148
|
+
background-color: var(--memphis-color-danger-500);
|
|
149
|
+
color: var(--memphis-scheme-background);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
:host([variant="warning"]) [part~="item"][part~="selected"] {
|
|
153
|
+
background-color: var(--memphis-color-warning-500);
|
|
154
|
+
color: var(--memphis-scheme-background);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
:host([variant="success"]) [part~="item"][part~="selected"] {
|
|
158
|
+
background-color: var(--memphis-color-success-500);
|
|
159
|
+
color: var(--memphis-scheme-background);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
:host([variant="info"]) [part~="item"][part~="selected"] {
|
|
163
|
+
background-color: var(--memphis-color-info-500);
|
|
164
|
+
color: var(--memphis-scheme-background);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
:host([variant="highlight"]) [part~="item"][part~="selected"] {
|
|
168
|
+
background-color: var(--memphis-color-highlight-500);
|
|
169
|
+
color: var(--memphis-scheme-background);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
:host([variant="neutral"]) [part~="item"][part~="selected"] {
|
|
173
|
+
background-color: var(--memphis-color-neutral-500);
|
|
174
|
+
color: var(--memphis-scheme-background);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
`;
|
|
178
|
+
}
|
|
179
|
+
//# sourceMappingURL=WheelPickerElement.Memphis.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WheelPickerElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,8BAA8B;IAC1C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmKT,CAAC;AACN,CAAC"}
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
import { IEventEmitter } from '@breadstone/mosaik-elements';
|
|
2
|
+
import type { IWheelPickerChangeEventDetail } from '../../../events';
|
|
3
|
+
import { CustomElement } from '../../Abstracts/CustomElement';
|
|
4
|
+
import type { IWheelPickerElementProps } from './IWheelPickerElementProps';
|
|
5
|
+
import type { IWheelPickerItem } from './IWheelPickerItem';
|
|
6
|
+
declare const WheelPickerElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
|
|
7
|
+
/**
|
|
8
|
+
* WheelPicker - A scrollable column of items for value selection.
|
|
9
|
+
*
|
|
10
|
+
* @description
|
|
11
|
+
* The WheelPicker element renders a vertical scrollable list of items where
|
|
12
|
+
* one item can be selected at a time. It supports generic items (not just numbers)
|
|
13
|
+
* via the `IWheelPickerItem` interface with `value` and `label` properties.
|
|
14
|
+
* Commonly used as a building block inside composite pickers such as DateTimeBox.
|
|
15
|
+
*
|
|
16
|
+
* @name WheelPicker
|
|
17
|
+
* @element mosaik-wheel-picker
|
|
18
|
+
* @category Primitives
|
|
19
|
+
*
|
|
20
|
+
* @csspart column - The scrollable column container.
|
|
21
|
+
* @csspart item - An individual item in the wheel.
|
|
22
|
+
*
|
|
23
|
+
* @cssprop {String} --wheel-picker-background-color - The wheel picker background color CSS custom property.
|
|
24
|
+
* @cssprop {String} --wheel-picker-border-color - The wheel picker border color CSS custom property.
|
|
25
|
+
* @cssprop {String} --wheel-picker-border-radius - The wheel picker border radius CSS custom property.
|
|
26
|
+
* @cssprop {String} --wheel-picker-border-style - The wheel picker border style CSS custom property.
|
|
27
|
+
* @cssprop {String} --wheel-picker-border-width - The wheel picker border width CSS custom property.
|
|
28
|
+
* @cssprop {String} --wheel-picker-font-family - The wheel picker font family CSS custom property.
|
|
29
|
+
* @cssprop {String} --wheel-picker-font-letter-spacing - The wheel picker font letter spacing CSS custom property.
|
|
30
|
+
* @cssprop {String} --wheel-picker-font-line-height - The wheel picker font line height CSS custom property.
|
|
31
|
+
* @cssprop {String} --wheel-picker-font-size - The wheel picker font size CSS custom property.
|
|
32
|
+
* @cssprop {String} --wheel-picker-font-text-decoration - The wheel picker font text decoration CSS custom property.
|
|
33
|
+
* @cssprop {String} --wheel-picker-font-text-transform - The wheel picker font text transform CSS custom property.
|
|
34
|
+
* @cssprop {String} --wheel-picker-font-weight - The wheel picker font weight CSS custom property.
|
|
35
|
+
* @cssprop {String} --wheel-picker-foreground-color - The wheel picker foreground color CSS custom property.
|
|
36
|
+
* @cssprop {String} --wheel-picker-gap - The wheel picker gap CSS custom property.
|
|
37
|
+
* @cssprop {String} --wheel-picker-item-height - The wheel picker item height CSS custom property.
|
|
38
|
+
* @cssprop {String} --wheel-picker-padding-bottom - The wheel picker padding bottom CSS custom property.
|
|
39
|
+
* @cssprop {String} --wheel-picker-padding-left - The wheel picker padding left CSS custom property.
|
|
40
|
+
* @cssprop {String} --wheel-picker-padding-right - The wheel picker padding right CSS custom property.
|
|
41
|
+
* @cssprop {String} --wheel-picker-padding-top - The wheel picker padding top CSS custom property.
|
|
42
|
+
* @cssprop {String} --wheel-picker-shadow - The wheel picker shadow CSS custom property.
|
|
43
|
+
* @cssprop {String} --wheel-picker-shadow-blur - The wheel picker shadow blur CSS custom property.
|
|
44
|
+
* @cssprop {String} --wheel-picker-shadow-color - The wheel picker shadow color CSS custom property.
|
|
45
|
+
* @cssprop {String} --wheel-picker-shadow-offset-x - The wheel picker shadow offset x CSS custom property.
|
|
46
|
+
* @cssprop {String} --wheel-picker-shadow-offset-y - The wheel picker shadow offset y CSS custom property.
|
|
47
|
+
* @cssprop {String} --wheel-picker-shadow-spread - The wheel picker shadow spread CSS custom property.
|
|
48
|
+
* @cssprop {String} --wheel-picker-transition-duration - The wheel picker transition duration CSS custom property.
|
|
49
|
+
* @cssprop {String} --wheel-picker-transition-mode - The wheel picker transition mode CSS custom property.
|
|
50
|
+
* @cssprop {String} --wheel-picker-transition-property - The wheel picker transition property CSS custom property.
|
|
51
|
+
* @cssprop {String} --wheel-picker-translate - The wheel picker translate CSS custom property.
|
|
52
|
+
*
|
|
53
|
+
* @fires wheelPickerChange {WheelPickerChangeEvent} - Fired when the selected item changes.
|
|
54
|
+
*
|
|
55
|
+
* @example
|
|
56
|
+
* Basic wheel picker with hour values:
|
|
57
|
+
* ```html
|
|
58
|
+
* <mosaik-wheel-picker id="hourPicker"></mosaik-wheel-picker>
|
|
59
|
+
*
|
|
60
|
+
* <script>
|
|
61
|
+
* const picker = document.getElementById('hourPicker');
|
|
62
|
+
* picker.items = Array.from({ length: 24 }, (_, i) => ({
|
|
63
|
+
* value: String(i),
|
|
64
|
+
* label: String(i).padStart(2, '0')
|
|
65
|
+
* }));
|
|
66
|
+
* picker.value = '12';
|
|
67
|
+
* picker.addEventListener('wheelPickerChange', (e) => {
|
|
68
|
+
* console.log('Selected:', e.detail.value);
|
|
69
|
+
* });
|
|
70
|
+
* </script>
|
|
71
|
+
* ```
|
|
72
|
+
*
|
|
73
|
+
* @public
|
|
74
|
+
*/
|
|
75
|
+
export declare class WheelPickerElement extends WheelPickerElement_base implements IWheelPickerElementProps {
|
|
76
|
+
private readonly _wheelPickerChanged;
|
|
77
|
+
private _items;
|
|
78
|
+
private _value;
|
|
79
|
+
/**
|
|
80
|
+
* @public
|
|
81
|
+
*/
|
|
82
|
+
constructor();
|
|
83
|
+
/**
|
|
84
|
+
* Returns the `is` property.
|
|
85
|
+
* The `is` property represents natural name of this element.
|
|
86
|
+
*
|
|
87
|
+
* @public
|
|
88
|
+
* @static
|
|
89
|
+
* @readonly
|
|
90
|
+
*/
|
|
91
|
+
static get is(): string;
|
|
92
|
+
/**
|
|
93
|
+
* Gets or sets the `items` property.
|
|
94
|
+
* The list of items to display in the wheel.
|
|
95
|
+
*
|
|
96
|
+
* @public
|
|
97
|
+
*/
|
|
98
|
+
get items(): Array<IWheelPickerItem>;
|
|
99
|
+
set items(value: Array<IWheelPickerItem>);
|
|
100
|
+
/**
|
|
101
|
+
* Gets or sets the `value` property.
|
|
102
|
+
* The currently selected item value.
|
|
103
|
+
*
|
|
104
|
+
* @public
|
|
105
|
+
*/
|
|
106
|
+
get value(): string | null;
|
|
107
|
+
set value(value: string | null);
|
|
108
|
+
/**
|
|
109
|
+
* The `wheelPickerChange` event emitter.
|
|
110
|
+
*
|
|
111
|
+
* @public
|
|
112
|
+
* @readonly
|
|
113
|
+
* @eventProperty
|
|
114
|
+
*/
|
|
115
|
+
get wheelPickerChange(): IEventEmitter<IWheelPickerChangeEventDetail>;
|
|
116
|
+
/**
|
|
117
|
+
* Handles click events on items via event delegation.
|
|
118
|
+
*
|
|
119
|
+
* @param event - The click event.
|
|
120
|
+
* @public
|
|
121
|
+
* @template
|
|
122
|
+
*/
|
|
123
|
+
onItemClick(event: Event): void;
|
|
124
|
+
}
|
|
125
|
+
/**
|
|
126
|
+
* @public
|
|
127
|
+
*/
|
|
128
|
+
export declare namespace WheelPickerElement {
|
|
129
|
+
type Props = IWheelPickerElementProps;
|
|
130
|
+
}
|
|
131
|
+
/**
|
|
132
|
+
* @public
|
|
133
|
+
*/
|
|
134
|
+
declare global {
|
|
135
|
+
interface HTMLElementTagNameMap {
|
|
136
|
+
'mosaik-wheel-picker': WheelPickerElement;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
export {};
|
|
140
|
+
//# sourceMappingURL=WheelPickerElement.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WheelPickerElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/WheelPicker/WheelPickerElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAA2B,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAQrF,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;;AAQ3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBASa,kBACT,SAAQ,uBACR,YAAW,wBAAwB;IAInC,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAA+C;IACnF,OAAO,CAAC,MAAM,CAA0B;IACxC,OAAO,CAAC,MAAM,CAAgB;IAM9B;;OAEG;;IAaH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,KAAK,IAAI,KAAK,CAAC,gBAAgB,CAAC,CAE1C;IACD,IAAW,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,gBAAgB,CAAC,EAK9C;IAED;;;;;OAKG;IACH,IACW,KAAK,IAAI,MAAM,GAAG,IAAI,CAEhC;IACD,IAAW,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAKpC;IAED;;;;;;OAMG;IACH,IACW,iBAAiB,IAAI,aAAa,CAAC,6BAA6B,CAAC,CAE3E;IAMD;;;;;;OAMG;IACI,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;CAoBzC;AAED;;GAEG;AACH,yBAAiB,kBAAkB,CAAC;IAChC,KAAY,KAAK,GAAG,wBAAwB,CAAC;CAChD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEX,UAAU,qBAAqB;QAE3B,qBAAqB,EAAE,kBAAkB,CAAC;KAC7C;CACJ"}
|