@openremote/or-timeline 1.0.3 → 1.2.0-snapshot.20240512155407

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 (12) hide show
  1. package/dist/umd/index.bundle.js +6 -432
  2. package/dist/umd/index.bundle.js.LICENSE.txt +21 -0
  3. package/dist/umd/index.js +9 -169
  4. package/dist/umd/index.js.LICENSE.txt +17 -0
  5. package/dist/umd/index.orbundle.js +6 -432
  6. package/dist/umd/index.orbundle.js.LICENSE.txt +21 -0
  7. package/package.json +13 -13
  8. package/.project +0 -17
  9. package/.settings/org.eclipse.buildship.core.prefs +0 -2
  10. package/LICENSE.txt +0 -2359
  11. package/dist/index.js +0 -287
  12. /package/{dist → lib}/index.d.ts +0 -0
package/dist/index.js DELETED
@@ -1,287 +0,0 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- import { html, LitElement, property, customElement } from "lit-element";
8
- import moment from "moment";
9
- let OrTimeline = class OrTimeline extends LitElement {
10
- constructor() {
11
- super();
12
- // default value in minutes
13
- this.current = 0;
14
- // default value in minutes
15
- this.value = 0;
16
- // maxRange in minutes
17
- this.maxRange = 360;
18
- // minRange in minutes
19
- this.minRange = 0;
20
- // Steps in minutes
21
- this.step = 5;
22
- }
23
- moveBubble(e = null, value = null) {
24
- let el;
25
- if (e) {
26
- el = e.target;
27
- }
28
- else {
29
- if (this.shadowRoot) {
30
- el = this.shadowRoot.getElementById("or-timeline-slider");
31
- }
32
- }
33
- if (el) {
34
- if (value) {
35
- this.current = parseInt(value);
36
- }
37
- else {
38
- this.current = parseInt(el.value);
39
- }
40
- // Measure width of range input
41
- const width = el.offsetWidth;
42
- const v = this.current;
43
- // Figure out placement percentage between left and right of input
44
- const newPoint = v / this.maxRange;
45
- // Janky value to get pointer to line up better
46
- const offset = 15;
47
- let newPlace;
48
- // Prevent bubble from going beyond left or right (unsupported browsers)
49
- if (newPoint < 0) {
50
- newPlace = 0;
51
- }
52
- else if (newPoint > 1) {
53
- newPlace = width - offset;
54
- }
55
- else {
56
- newPlace = (width - offset) * newPoint;
57
- if (newPlace < 0) {
58
- newPlace = 0;
59
- }
60
- }
61
- // Move bubble
62
- if (this.shadowRoot) {
63
- const range = this.shadowRoot.getElementById("range-value");
64
- if (range) {
65
- range.style.left = newPlace + "px";
66
- }
67
- }
68
- }
69
- }
70
- valueChange(e) {
71
- this.moveBubble(e);
72
- this.onChange();
73
- }
74
- render() {
75
- return html `
76
- <style>
77
- :host {
78
- position: relative;
79
- }
80
- .timeline-container {
81
- display: block;
82
- height: 52px;
83
- background-color: var(--app-white, #FFFFFF);
84
-
85
- -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.28);
86
- -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.28);
87
- box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.28);
88
-
89
- padding-top: 20px;
90
- }
91
- .slidecontainer {
92
- position: relative;
93
- margin: -5px 44px 0 19px;
94
- }
95
-
96
- /* The slider itself */
97
- .slider {
98
- color: var(--timeline-accent, #1D5632);
99
- box-sizing: border-box;
100
- -webkit-appearance: none;
101
- outline: none;
102
- width: 100%;
103
- }
104
- .slider::-webkit-slider-runnable-track {
105
- cursor: pointer;
106
- border: transparent;
107
- background: #bdbdbd;
108
- border-radius: 6px;
109
- height: 12px;
110
- }
111
- .slider::-webkit-slider-thumb {
112
- height: 18px;
113
- width: 18px;
114
- border-radius: 50%;
115
- cursor: pointer;
116
- -webkit-appearance: none;
117
- background-color: var(--timeline-accent, #1D5632); /* Green background */
118
- pointer-events: all;
119
- margin-top: -2px;
120
- }
121
-
122
- .slider::-moz-range-track {
123
- cursor: pointer;
124
- border: transparent;
125
- background: #bdbdbd;
126
- border-radius: 6px;
127
- height: 12px;
128
- }
129
- .slider::-moz-range-thumb {
130
- border: 0 none;
131
- height: 18px;
132
- width: 18px;
133
- border-radius: 50%;
134
- cursor: pointer;
135
- -webkit-appearance: none;
136
- background-color: var(--timeline-accent, #1D5632); /* Green background */
137
- pointer-events: all;
138
- margin-top: -2px;
139
- }
140
- .slider::-moz-range-progress {
141
- background-color: var(--timeline-accent, #1D5632);
142
- height: 12px;
143
- border-radius: 6px;
144
- }
145
-
146
- .slider::-ms-track {
147
- cursor: pointer;
148
- border: transparent;
149
- background: #bdbdbd;
150
- border-radius: 6px;
151
- height: 12px;
152
- }
153
- .slider::-ms-thumb {
154
- border: 0 none;
155
- height: 18px;
156
- width: 18px;
157
- border-radius: 50%;
158
- cursor: pointer;
159
- -webkit-appearance: none;
160
- background-color: var(--timeline-accent, currentColor); /* Bug in Edge set colour on slider itself */
161
- pointer-events: all;
162
- margin-top: -2px;
163
- }
164
-
165
- .slider::-ms-fill-lower {
166
- background-color: var(--timeline-accent, currentColor);
167
- border: 0 none;
168
- border-radius: 6px;
169
- }
170
-
171
- .slider::-ms-fill-upper {
172
- background: transparent;
173
- border: 0 none;
174
- }
175
-
176
- #timelineHourMarkers {
177
- position: relative;
178
- display: -webkit-box;
179
- display: -moz-box;
180
- display: -ms-flexbox;
181
- display: -webkit-flex;
182
- display: flex;
183
- -webkit-box-orient: horizontal;
184
- -moz-box-orient: horizontal;
185
- -webkit-box-direction: normal;
186
- -moz-box-direction: normal;
187
- -webkit-flex-direction: row;
188
- -ms-flex-direction: row;
189
- flex-direction: row;
190
-
191
- margin: 0 50px 0 30px;
192
- }
193
-
194
- #timelineHourMarkers > .timelineHourMark{
195
- display: flex;
196
- flex: 1 100%;
197
- flex-grow: 1;
198
- flex-shrink: 1;
199
- flex-basis: 100%;
200
-
201
- overflow: visible;
202
- color: var(--timeline-grey, darkgrey);
203
- border-left: 1px solid var(--timeline-grey, darkgrey);
204
- font-size: 12px;
205
- -webkit-user-select: none;
206
- -moz-user-select: none;
207
- -ms-user-select: none;
208
- user-select: none;
209
- padding-left: 4px;
210
- padding-bottom: 4px;
211
- }
212
- #timelineHourMarkers .timelineHourMark:last-child {
213
- position: absolute;
214
- right: -25px;
215
- }
216
-
217
- #range-value {
218
- position: absolute;
219
- background-color: var(--timeline-accent, #1D5632);
220
- height: 30px;
221
- width: 60px;
222
- margin-left: -30px;
223
- text-align: center;
224
- color: white;
225
- display: inline-block;
226
- left: 0;
227
- font-size: 12px;
228
- font-weight: bold;
229
- line-height: 30px;
230
- }
231
-
232
- .time-value-container {
233
- width: calc(100% - 80px);
234
- display: block;
235
- position: relative;
236
- height: 30px;
237
- margin: 0 50px 0 30px;
238
- }
239
- </style>
240
-
241
-
242
- <div class="time-value-container">
243
- <div id="range-value">${this.current === 0 ? "LIVE" : moment().add(this.current, "minutes").format("HH:mm")}</div>
244
- </div>
245
- <div class="timeline-container">
246
- <div id="timelineHourMarkers" class="layout horizontal justified style-scope controller-timeline">
247
- ${new Array((this.maxRange / 60) + 1).fill(0).map((_, idx) => {
248
- return html `
249
- ${idx === 0 ? html `
250
- <div class="timelineHourMark style-scope controller-timeline">Nu</div>
251
- ` : html `
252
- <div class="timelineHourMark style-scope controller-timeline">+${idx}u</div>
253
- `}
254
- `;
255
- })}
256
- </div>
257
-
258
- <div class="slidecontainer">
259
- <input id="or-timeline-slider" class="slider" type="range" @input="${this.moveBubble}" @change="${this.valueChange}" value="${this.current}" min="${this.minRange}" max="${this.maxRange}" step="${this.step}">
260
- </div>
261
- </div>
262
-
263
- `;
264
- }
265
- };
266
- __decorate([
267
- property({ type: Number })
268
- ], OrTimeline.prototype, "current", void 0);
269
- __decorate([
270
- property({ type: Function })
271
- ], OrTimeline.prototype, "onChange", void 0);
272
- __decorate([
273
- property({ type: Number })
274
- ], OrTimeline.prototype, "value", void 0);
275
- __decorate([
276
- property({ type: Number })
277
- ], OrTimeline.prototype, "maxRange", void 0);
278
- __decorate([
279
- property({ type: Number })
280
- ], OrTimeline.prototype, "minRange", void 0);
281
- __decorate([
282
- property({ type: Number })
283
- ], OrTimeline.prototype, "step", void 0);
284
- OrTimeline = __decorate([
285
- customElement("or-timeline")
286
- ], OrTimeline);
287
- //# sourceMappingURL=index.js.map
/package/{dist → lib}/index.d.ts RENAMED
File without changes