@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.
Files changed (122) hide show
  1. package/Controls/Components/Inputs/Calendar/CalendarElement.d.ts +4 -12
  2. package/Controls/Components/Inputs/Calendar/CalendarElement.d.ts.map +1 -1
  3. package/Controls/Components/Inputs/Calendar/CalendarElement.js +3 -24
  4. package/Controls/Components/Inputs/Calendar/CalendarElement.js.map +1 -1
  5. package/Controls/Components/Inputs/Calendar/CalendarElementTemplate.d.ts.map +1 -1
  6. package/Controls/Components/Inputs/Calendar/CalendarElementTemplate.js +22 -23
  7. package/Controls/Components/Inputs/Calendar/CalendarElementTemplate.js.map +1 -1
  8. package/Controls/Components/Inputs/Calendar/ICalendarElementProps.d.ts +2 -5
  9. package/Controls/Components/Inputs/Calendar/ICalendarElementProps.d.ts.map +1 -1
  10. package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Cosmopolitan.d.ts.map +1 -1
  11. package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Cosmopolitan.js +15 -7
  12. package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Cosmopolitan.js.map +1 -1
  13. package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Joy.d.ts.map +1 -1
  14. package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Joy.js +15 -7
  15. package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Joy.js.map +1 -1
  16. package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Memphis.d.ts.map +1 -1
  17. package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Memphis.js +15 -7
  18. package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Memphis.js.map +1 -1
  19. package/Controls/Components/Inputs/DateBox/DateBoxElement.d.ts.map +1 -1
  20. package/Controls/Components/Inputs/DateBox/DateBoxElement.js +7 -2
  21. package/Controls/Components/Inputs/DateBox/DateBoxElement.js.map +1 -1
  22. package/Controls/Components/Inputs/DateTimeBox/DateTimeBoxElement.d.ts +90 -1
  23. package/Controls/Components/Inputs/DateTimeBox/DateTimeBoxElement.d.ts.map +1 -1
  24. package/Controls/Components/Inputs/DateTimeBox/DateTimeBoxElement.js +186 -9
  25. package/Controls/Components/Inputs/DateTimeBox/DateTimeBoxElement.js.map +1 -1
  26. package/Controls/Components/Inputs/DateTimeBox/DateTimeBoxElementTemplate.d.ts.map +1 -1
  27. package/Controls/Components/Inputs/DateTimeBox/DateTimeBoxElementTemplate.js +72 -37
  28. package/Controls/Components/Inputs/DateTimeBox/DateTimeBoxElementTemplate.js.map +1 -1
  29. package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Cosmopolitan.d.ts.map +1 -1
  30. package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Cosmopolitan.js +35 -0
  31. package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Cosmopolitan.js.map +1 -1
  32. package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Joy.d.ts.map +1 -1
  33. package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Joy.js +35 -0
  34. package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Joy.js.map +1 -1
  35. package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Memphis.d.ts.map +1 -1
  36. package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Memphis.js +35 -0
  37. package/Controls/Components/Inputs/DateTimeBox/Themes/DateTimeBoxElement.Memphis.js.map +1 -1
  38. package/Controls/Components/Inputs/ToggleSwitch/Themes/ToggleSwitchElement.Joy.d.ts.map +1 -1
  39. package/Controls/Components/Inputs/ToggleSwitch/Themes/ToggleSwitchElement.Joy.js +8 -7
  40. package/Controls/Components/Inputs/ToggleSwitch/Themes/ToggleSwitchElement.Joy.js.map +1 -1
  41. package/Controls/Components/Overlays/Drawer/DrawerElement.d.ts +80 -0
  42. package/Controls/Components/Overlays/Drawer/DrawerElement.d.ts.map +1 -1
  43. package/Controls/Components/Overlays/Drawer/DrawerElement.js +147 -1
  44. package/Controls/Components/Overlays/Drawer/DrawerElement.js.map +1 -1
  45. package/Controls/Components/Overlays/Drawer/DrawerElementTemplate.d.ts.map +1 -1
  46. package/Controls/Components/Overlays/Drawer/DrawerElementTemplate.js +5 -37
  47. package/Controls/Components/Overlays/Drawer/DrawerElementTemplate.js.map +1 -1
  48. package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Cosmopolitan.d.ts.map +1 -1
  49. package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Cosmopolitan.js +1 -0
  50. package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Cosmopolitan.js.map +1 -1
  51. package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Joy.d.ts.map +1 -1
  52. package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Joy.js +1 -0
  53. package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Joy.js.map +1 -1
  54. package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Memphis.d.ts.map +1 -1
  55. package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Memphis.js +1 -0
  56. package/Controls/Components/Overlays/Drawer/Themes/DrawerElement.Memphis.js.map +1 -1
  57. package/Controls/Components/Primitives/WheelPicker/IWheelPickerElementProps.d.ts +20 -0
  58. package/Controls/Components/Primitives/WheelPicker/IWheelPickerElementProps.d.ts.map +1 -0
  59. package/Controls/Components/Primitives/WheelPicker/IWheelPickerElementProps.js +3 -0
  60. package/Controls/Components/Primitives/WheelPicker/IWheelPickerElementProps.js.map +1 -0
  61. package/Controls/Components/Primitives/WheelPicker/IWheelPickerItem.d.ts +16 -0
  62. package/Controls/Components/Primitives/WheelPicker/IWheelPickerItem.d.ts.map +1 -0
  63. package/Controls/Components/Primitives/WheelPicker/IWheelPickerItem.js +2 -0
  64. package/Controls/Components/Primitives/WheelPicker/IWheelPickerItem.js.map +1 -0
  65. package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Cosmopolitan.d.ts +6 -0
  66. package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Cosmopolitan.d.ts.map +1 -0
  67. package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Cosmopolitan.js +179 -0
  68. package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Cosmopolitan.js.map +1 -0
  69. package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Joy.d.ts +6 -0
  70. package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Joy.d.ts.map +1 -0
  71. package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Joy.js +179 -0
  72. package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Joy.js.map +1 -0
  73. package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Memphis.d.ts +6 -0
  74. package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Memphis.d.ts.map +1 -0
  75. package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Memphis.js +179 -0
  76. package/Controls/Components/Primitives/WheelPicker/Themes/WheelPickerElement.Memphis.js.map +1 -0
  77. package/Controls/Components/Primitives/WheelPicker/WheelPickerElement.d.ts +140 -0
  78. package/Controls/Components/Primitives/WheelPicker/WheelPickerElement.d.ts.map +1 -0
  79. package/Controls/Components/Primitives/WheelPicker/WheelPickerElement.js +213 -0
  80. package/Controls/Components/Primitives/WheelPicker/WheelPickerElement.js.map +1 -0
  81. package/Controls/Components/Primitives/WheelPicker/WheelPickerElementTemplate.d.ts +9 -0
  82. package/Controls/Components/Primitives/WheelPicker/WheelPickerElementTemplate.d.ts.map +1 -0
  83. package/Controls/Components/Primitives/WheelPicker/WheelPickerElementTemplate.js +29 -0
  84. package/Controls/Components/Primitives/WheelPicker/WheelPickerElementTemplate.js.map +1 -0
  85. package/Controls/Components/Shell/Themes/AppElement.Cosmopolitan.d.ts.map +1 -1
  86. package/Controls/Components/Shell/Themes/AppElement.Cosmopolitan.js +1 -0
  87. package/Controls/Components/Shell/Themes/AppElement.Cosmopolitan.js.map +1 -1
  88. package/Controls/Components/Shell/Themes/AppElement.Joy.d.ts.map +1 -1
  89. package/Controls/Components/Shell/Themes/AppElement.Joy.js +1 -0
  90. package/Controls/Components/Shell/Themes/AppElement.Joy.js.map +1 -1
  91. package/Controls/Components/Shell/Themes/AppElement.Memphis.d.ts.map +1 -1
  92. package/Controls/Components/Shell/Themes/AppElement.Memphis.js +1 -0
  93. package/Controls/Components/Shell/Themes/AppElement.Memphis.js.map +1 -1
  94. package/Controls/events/WheelPickerEvents.d.ts +24 -0
  95. package/Controls/events/WheelPickerEvents.d.ts.map +1 -0
  96. package/Controls/events/WheelPickerEvents.js +3 -0
  97. package/Controls/events/WheelPickerEvents.js.map +1 -0
  98. package/Controls/events/index.d.ts +1 -0
  99. package/Controls/events/index.d.ts.map +1 -1
  100. package/Index.d.ts +3 -0
  101. package/Index.d.ts.map +1 -1
  102. package/Index.js +1 -0
  103. package/Index.js.map +1 -1
  104. package/Intl/Formatters/DateTimeFormatter.d.ts +16 -0
  105. package/Intl/Formatters/DateTimeFormatter.d.ts.map +1 -1
  106. package/Intl/Formatters/DateTimeFormatter.js +62 -9
  107. package/Intl/Formatters/DateTimeFormatter.js.map +1 -1
  108. package/Intl/Formatters/TimeFormatter.d.ts +6 -4
  109. package/Intl/Formatters/TimeFormatter.d.ts.map +1 -1
  110. package/Intl/Formatters/TimeFormatter.js +6 -4
  111. package/Intl/Formatters/TimeFormatter.js.map +1 -1
  112. package/Intl/parsers/DateParser.d.ts +63 -0
  113. package/Intl/parsers/DateParser.d.ts.map +1 -0
  114. package/Intl/parsers/DateParser.js +139 -0
  115. package/Intl/parsers/DateParser.js.map +1 -0
  116. package/Intl/parsers/DateTimeParser.d.ts +85 -0
  117. package/Intl/parsers/DateTimeParser.d.ts.map +1 -0
  118. package/Intl/parsers/DateTimeParser.js +223 -0
  119. package/Intl/parsers/DateTimeParser.js.map +1 -0
  120. package/Routing/PathToRegexp.d.ts +1 -1
  121. package/custom-elements.json +770 -22
  122. 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,6 @@
1
+ import { type CSSResult } from '../../../../../Dom/Css';
2
+ /**
3
+ * @public
4
+ */
5
+ export declare function wheelPickerElementMemphisStyle(): CSSResult;
6
+ //# sourceMappingURL=WheelPickerElement.Memphis.d.ts.map
@@ -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"}