@melodicdev/components 1.0.21 → 1.1.0
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/assets/melodic-components.js +4 -2
- package/assets/melodic-components.js.map +1 -1
- package/assets/melodic-components.min.js +4 -3
- package/lib/components/forms/date-picker/date-picker.styles.js +2 -2
- package/lib/components/forms/date-time-picker/date-time-picker.component.d.ts +61 -0
- package/lib/components/forms/date-time-picker/date-time-picker.component.d.ts.map +1 -0
- package/lib/components/forms/date-time-picker/date-time-picker.component.js +173 -0
- package/lib/components/forms/date-time-picker/date-time-picker.styles.d.ts +2 -0
- package/lib/components/forms/date-time-picker/date-time-picker.styles.d.ts.map +1 -0
- package/lib/components/forms/date-time-picker/date-time-picker.styles.js +90 -0
- package/lib/components/forms/date-time-picker/date-time-picker.template.d.ts +3 -0
- package/lib/components/forms/date-time-picker/date-time-picker.template.d.ts.map +1 -0
- package/lib/components/forms/date-time-picker/date-time-picker.template.js +45 -0
- package/lib/components/forms/date-time-picker/index.d.ts +2 -0
- package/lib/components/forms/date-time-picker/index.d.ts.map +1 -0
- package/lib/components/forms/date-time-picker/index.js +1 -0
- package/lib/components/forms/time-picker/index.d.ts +2 -0
- package/lib/components/forms/time-picker/index.d.ts.map +1 -0
- package/lib/components/forms/time-picker/index.js +1 -0
- package/lib/components/forms/time-picker/time-picker.component.d.ts +89 -0
- package/lib/components/forms/time-picker/time-picker.component.d.ts.map +1 -0
- package/lib/components/forms/time-picker/time-picker.component.js +369 -0
- package/lib/components/forms/time-picker/time-picker.styles.d.ts +2 -0
- package/lib/components/forms/time-picker/time-picker.styles.d.ts.map +1 -0
- package/lib/components/forms/time-picker/time-picker.styles.js +318 -0
- package/lib/components/forms/time-picker/time-picker.template.d.ts +3 -0
- package/lib/components/forms/time-picker/time-picker.template.d.ts.map +1 -0
- package/lib/components/forms/time-picker/time-picker.template.js +123 -0
- package/lib/components/foundation/card/card.styles.d.ts.map +1 -1
- package/lib/components/foundation/card/card.styles.js +1 -0
- package/package.json +9 -1
|
@@ -1407,7 +1407,7 @@ var hl = class X {
|
|
|
1407
1407
|
clearRenderedNodes(t) {
|
|
1408
1408
|
if (!(!t.renderedNodes || t.renderedNodes.length === 0)) {
|
|
1409
1409
|
for (const r of t.renderedNodes) r.parentNode?.removeChild(r);
|
|
1410
|
-
t.renderedNodes = [], t.arrayState = void 0;
|
|
1410
|
+
t.renderedNodes = [], t.arrayState = void 0, t.nestedContainer = void 0;
|
|
1411
1411
|
}
|
|
1412
1412
|
}
|
|
1413
1413
|
cleanupParts(t) {
|
|
@@ -7767,12 +7767,12 @@ const Fa = () => y`
|
|
|
7767
7767
|
|
|
7768
7768
|
.ml-date-picker__trigger:focus-visible {
|
|
7769
7769
|
outline: none;
|
|
7770
|
-
border-color: var(--ml-color-primary);
|
|
7770
|
+
border-color: var(--ml-trigger-focus-border, var(--ml-color-primary));
|
|
7771
7771
|
box-shadow: var(--ml-shadow-focus-ring);
|
|
7772
7772
|
}
|
|
7773
7773
|
|
|
7774
7774
|
.ml-date-picker--open .ml-date-picker__trigger {
|
|
7775
|
-
border-color: var(--ml-color-primary);
|
|
7775
|
+
border-color: var(--ml-trigger-focus-border, var(--ml-color-primary));
|
|
7776
7776
|
box-shadow: var(--ml-shadow-focus-ring);
|
|
7777
7777
|
}
|
|
7778
7778
|
|
|
@@ -8948,6 +8948,7 @@ const ro = () => y`
|
|
|
8948
8948
|
background-color: var(--ml-color-surface);
|
|
8949
8949
|
border-radius: var(--ml-radius-lg);
|
|
8950
8950
|
overflow: hidden;
|
|
8951
|
+
height: 100%;
|
|
8951
8952
|
}
|
|
8952
8953
|
|
|
8953
8954
|
.ml-card--default {
|
|
@@ -43,12 +43,12 @@ export const datePickerStyles = () => css `
|
|
|
43
43
|
|
|
44
44
|
.ml-date-picker__trigger:focus-visible {
|
|
45
45
|
outline: none;
|
|
46
|
-
border-color: var(--ml-color-primary);
|
|
46
|
+
border-color: var(--ml-trigger-focus-border, var(--ml-color-primary));
|
|
47
47
|
box-shadow: var(--ml-shadow-focus-ring);
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
.ml-date-picker--open .ml-date-picker__trigger {
|
|
51
|
-
border-color: var(--ml-color-primary);
|
|
51
|
+
border-color: var(--ml-trigger-focus-border, var(--ml-color-primary));
|
|
52
52
|
box-shadow: var(--ml-shadow-focus-ring);
|
|
53
53
|
}
|
|
54
54
|
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import type { IElementRef, OnCreate, OnDestroy } from '@melodicdev/core';
|
|
2
|
+
import '../date-picker/date-picker.component.js';
|
|
3
|
+
import '../time-picker/time-picker.component.js';
|
|
4
|
+
/**
|
|
5
|
+
* ml-date-time-picker - Combined date and time picker
|
|
6
|
+
*
|
|
7
|
+
* Composes ml-date-picker and ml-time-picker into a single control.
|
|
8
|
+
* Value format: ISO datetime string (YYYY-MM-DDTHH:mm or YYYY-MM-DDTHH:mm:ss)
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```html
|
|
12
|
+
* <ml-date-time-picker label="Event start" value="2026-02-08T09:30"></ml-date-time-picker>
|
|
13
|
+
* <ml-date-time-picker label="Meeting" use-12-hour></ml-date-time-picker>
|
|
14
|
+
* ```
|
|
15
|
+
*
|
|
16
|
+
* @fires ml:change - Emitted when value changes. Detail: { value: string, date: string, time: string }
|
|
17
|
+
*/
|
|
18
|
+
export declare class DateTimePickerComponent implements IElementRef, OnCreate, OnDestroy {
|
|
19
|
+
elementRef: HTMLElement;
|
|
20
|
+
/** Selected datetime in ISO format (YYYY-MM-DDTHH:mm) */
|
|
21
|
+
value: string;
|
|
22
|
+
/** Placeholder text */
|
|
23
|
+
placeholder: string;
|
|
24
|
+
/** Field label */
|
|
25
|
+
label: string;
|
|
26
|
+
/** Hint text */
|
|
27
|
+
hint: string;
|
|
28
|
+
/** Error message */
|
|
29
|
+
error: string;
|
|
30
|
+
/** Input size */
|
|
31
|
+
size: 'sm' | 'md' | 'lg';
|
|
32
|
+
/** Disabled state */
|
|
33
|
+
disabled: boolean;
|
|
34
|
+
/** Required state */
|
|
35
|
+
required: boolean;
|
|
36
|
+
/** Minimum selectable date (YYYY-MM-DD) */
|
|
37
|
+
minDate: string;
|
|
38
|
+
/** Maximum selectable date (YYYY-MM-DD) */
|
|
39
|
+
maxDate: string;
|
|
40
|
+
/** Minimum selectable time (HH:mm) */
|
|
41
|
+
minTime: string;
|
|
42
|
+
/** Maximum selectable time (HH:mm) */
|
|
43
|
+
maxTime: string;
|
|
44
|
+
/** Time step in minutes */
|
|
45
|
+
step: number;
|
|
46
|
+
/** Use 12-hour format (default: true) */
|
|
47
|
+
twelveHour: boolean;
|
|
48
|
+
/** Internal date portion */
|
|
49
|
+
dateValue: string;
|
|
50
|
+
/** Internal time portion */
|
|
51
|
+
timeValue: string;
|
|
52
|
+
private _listeners;
|
|
53
|
+
get use12Hour(): boolean;
|
|
54
|
+
get displayValue(): string;
|
|
55
|
+
onCreate(): void;
|
|
56
|
+
onDestroy(): void;
|
|
57
|
+
private syncFromValue;
|
|
58
|
+
private attachChildListeners;
|
|
59
|
+
private emitChange;
|
|
60
|
+
}
|
|
61
|
+
//# sourceMappingURL=date-time-picker.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"date-time-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-time-picker/date-time-picker.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAKzE,OAAO,yCAAyC,CAAC;AACjD,OAAO,yCAAyC,CAAC;AAiCjD;;;;;;;;;;;;;GAaG;AACH,qBAMa,uBAAwB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IAC/E,UAAU,EAAG,WAAW,CAAC;IAEzB,yDAAyD;IACzD,KAAK,SAAM;IAEX,uBAAuB;IACvB,WAAW,SAA0B;IAErC,kBAAkB;IAClB,KAAK,SAAM;IAEX,gBAAgB;IAChB,IAAI,SAAM;IAEV,oBAAoB;IACpB,KAAK,SAAM;IAEX,iBAAiB;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC,qBAAqB;IACrB,QAAQ,UAAS;IAEjB,qBAAqB;IACrB,QAAQ,UAAS;IAEjB,2CAA2C;IAC3C,OAAO,SAAM;IAEb,2CAA2C;IAC3C,OAAO,SAAM;IAEb,sCAAsC;IACtC,OAAO,SAAM;IAEb,sCAAsC;IACtC,OAAO,SAAM;IAEb,2BAA2B;IAC3B,IAAI,SAAM;IAEV,yCAAyC;IACzC,UAAU,UAAQ;IAElB,4BAA4B;IAC5B,SAAS,SAAM;IAEf,4BAA4B;IAC5B,SAAS,SAAM;IAEf,OAAO,CAAC,UAAU,CAAyB;IAE3C,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED,QAAQ,IAAI,IAAI;IAKhB,SAAS,IAAI,IAAI;IAKjB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,oBAAoB;IA4B5B,OAAO,CAAC,UAAU;CAqBlB"}
|
|
@@ -0,0 +1,173 @@
|
|
|
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 { MelodicComponent } from '@melodicdev/core';
|
|
8
|
+
import { dateTimePickerTemplate } from './date-time-picker.template.js';
|
|
9
|
+
import { dateTimePickerStyles } from './date-time-picker.styles.js';
|
|
10
|
+
// Ensure sub-components are registered
|
|
11
|
+
import '../date-picker/date-picker.component.js';
|
|
12
|
+
import '../time-picker/time-picker.component.js';
|
|
13
|
+
const MONTH_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
14
|
+
function formatDateTimeDisplay(value, use12Hour) {
|
|
15
|
+
if (!value)
|
|
16
|
+
return '';
|
|
17
|
+
const [datePart, timePart] = value.split('T');
|
|
18
|
+
if (!datePart)
|
|
19
|
+
return '';
|
|
20
|
+
const dateParts = datePart.split('-');
|
|
21
|
+
if (dateParts.length !== 3)
|
|
22
|
+
return value;
|
|
23
|
+
const month = parseInt(dateParts[1], 10) - 1;
|
|
24
|
+
const day = parseInt(dateParts[2], 10);
|
|
25
|
+
const year = parseInt(dateParts[0], 10);
|
|
26
|
+
let display = `${MONTH_SHORT[month]} ${day}, ${year}`;
|
|
27
|
+
if (timePart) {
|
|
28
|
+
const timeParts = timePart.split(':');
|
|
29
|
+
let h = parseInt(timeParts[0], 10);
|
|
30
|
+
const m = timeParts[1];
|
|
31
|
+
if (use12Hour) {
|
|
32
|
+
const period = h >= 12 ? 'PM' : 'AM';
|
|
33
|
+
if (h === 0)
|
|
34
|
+
h = 12;
|
|
35
|
+
else if (h > 12)
|
|
36
|
+
h -= 12;
|
|
37
|
+
display += ` ${h}:${m} ${period}`;
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
display += ` ${String(h).padStart(2, '0')}:${m}`;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
return display;
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* ml-date-time-picker - Combined date and time picker
|
|
47
|
+
*
|
|
48
|
+
* Composes ml-date-picker and ml-time-picker into a single control.
|
|
49
|
+
* Value format: ISO datetime string (YYYY-MM-DDTHH:mm or YYYY-MM-DDTHH:mm:ss)
|
|
50
|
+
*
|
|
51
|
+
* @example
|
|
52
|
+
* ```html
|
|
53
|
+
* <ml-date-time-picker label="Event start" value="2026-02-08T09:30"></ml-date-time-picker>
|
|
54
|
+
* <ml-date-time-picker label="Meeting" use-12-hour></ml-date-time-picker>
|
|
55
|
+
* ```
|
|
56
|
+
*
|
|
57
|
+
* @fires ml:change - Emitted when value changes. Detail: { value: string, date: string, time: string }
|
|
58
|
+
*/
|
|
59
|
+
let DateTimePickerComponent = class DateTimePickerComponent {
|
|
60
|
+
constructor() {
|
|
61
|
+
/** Selected datetime in ISO format (YYYY-MM-DDTHH:mm) */
|
|
62
|
+
this.value = '';
|
|
63
|
+
/** Placeholder text */
|
|
64
|
+
this.placeholder = 'Select date and time';
|
|
65
|
+
/** Field label */
|
|
66
|
+
this.label = '';
|
|
67
|
+
/** Hint text */
|
|
68
|
+
this.hint = '';
|
|
69
|
+
/** Error message */
|
|
70
|
+
this.error = '';
|
|
71
|
+
/** Input size */
|
|
72
|
+
this.size = 'md';
|
|
73
|
+
/** Disabled state */
|
|
74
|
+
this.disabled = false;
|
|
75
|
+
/** Required state */
|
|
76
|
+
this.required = false;
|
|
77
|
+
/** Minimum selectable date (YYYY-MM-DD) */
|
|
78
|
+
this.minDate = '';
|
|
79
|
+
/** Maximum selectable date (YYYY-MM-DD) */
|
|
80
|
+
this.maxDate = '';
|
|
81
|
+
/** Minimum selectable time (HH:mm) */
|
|
82
|
+
this.minTime = '';
|
|
83
|
+
/** Maximum selectable time (HH:mm) */
|
|
84
|
+
this.maxTime = '';
|
|
85
|
+
/** Time step in minutes */
|
|
86
|
+
this.step = 15;
|
|
87
|
+
/** Use 12-hour format (default: true) */
|
|
88
|
+
this.twelveHour = true;
|
|
89
|
+
/** Internal date portion */
|
|
90
|
+
this.dateValue = '';
|
|
91
|
+
/** Internal time portion */
|
|
92
|
+
this.timeValue = '';
|
|
93
|
+
this._listeners = [];
|
|
94
|
+
}
|
|
95
|
+
get use12Hour() {
|
|
96
|
+
return this.twelveHour;
|
|
97
|
+
}
|
|
98
|
+
get displayValue() {
|
|
99
|
+
return formatDateTimeDisplay(this.value, this.use12Hour);
|
|
100
|
+
}
|
|
101
|
+
onCreate() {
|
|
102
|
+
this.syncFromValue();
|
|
103
|
+
this.attachChildListeners();
|
|
104
|
+
}
|
|
105
|
+
onDestroy() {
|
|
106
|
+
for (const cleanup of this._listeners)
|
|
107
|
+
cleanup();
|
|
108
|
+
this._listeners = [];
|
|
109
|
+
}
|
|
110
|
+
syncFromValue() {
|
|
111
|
+
if (!this.value)
|
|
112
|
+
return;
|
|
113
|
+
const [datePart, timePart] = this.value.split('T');
|
|
114
|
+
if (datePart)
|
|
115
|
+
this.dateValue = datePart;
|
|
116
|
+
if (timePart)
|
|
117
|
+
this.timeValue = timePart;
|
|
118
|
+
}
|
|
119
|
+
attachChildListeners() {
|
|
120
|
+
const shadow = this.elementRef.shadowRoot;
|
|
121
|
+
if (!shadow)
|
|
122
|
+
return;
|
|
123
|
+
const datePicker = shadow.querySelector('ml-date-picker');
|
|
124
|
+
const timePicker = shadow.querySelector('ml-time-picker');
|
|
125
|
+
if (datePicker) {
|
|
126
|
+
const handler = (e) => {
|
|
127
|
+
e.stopPropagation();
|
|
128
|
+
this.dateValue = e.detail.value;
|
|
129
|
+
this.emitChange();
|
|
130
|
+
};
|
|
131
|
+
datePicker.addEventListener('ml:change', handler);
|
|
132
|
+
this._listeners.push(() => datePicker.removeEventListener('ml:change', handler));
|
|
133
|
+
}
|
|
134
|
+
if (timePicker) {
|
|
135
|
+
const handler = (e) => {
|
|
136
|
+
e.stopPropagation();
|
|
137
|
+
this.timeValue = e.detail.value;
|
|
138
|
+
this.emitChange();
|
|
139
|
+
};
|
|
140
|
+
timePicker.addEventListener('ml:change', handler);
|
|
141
|
+
this._listeners.push(() => timePicker.removeEventListener('ml:change', handler));
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
emitChange() {
|
|
145
|
+
if (this.dateValue && this.timeValue) {
|
|
146
|
+
this.value = `${this.dateValue}T${this.timeValue}`;
|
|
147
|
+
}
|
|
148
|
+
else if (this.dateValue) {
|
|
149
|
+
this.value = this.dateValue;
|
|
150
|
+
}
|
|
151
|
+
else if (this.timeValue) {
|
|
152
|
+
this.value = this.timeValue;
|
|
153
|
+
}
|
|
154
|
+
this.elementRef.dispatchEvent(new CustomEvent('ml:change', {
|
|
155
|
+
bubbles: true,
|
|
156
|
+
composed: true,
|
|
157
|
+
detail: {
|
|
158
|
+
value: this.value,
|
|
159
|
+
date: this.dateValue,
|
|
160
|
+
time: this.timeValue
|
|
161
|
+
}
|
|
162
|
+
}));
|
|
163
|
+
}
|
|
164
|
+
};
|
|
165
|
+
DateTimePickerComponent = __decorate([
|
|
166
|
+
MelodicComponent({
|
|
167
|
+
selector: 'ml-date-time-picker',
|
|
168
|
+
template: dateTimePickerTemplate,
|
|
169
|
+
styles: dateTimePickerStyles,
|
|
170
|
+
attributes: ['value', 'placeholder', 'label', 'hint', 'error', 'size', 'disabled', 'required', 'min-date', 'max-date', 'min-time', 'max-time', 'step', 'twelve-hour']
|
|
171
|
+
})
|
|
172
|
+
], DateTimePickerComponent);
|
|
173
|
+
export { DateTimePickerComponent };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"date-time-picker.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-time-picker/date-time-picker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,iDAwFhC,CAAC"}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { css } from '@melodicdev/core';
|
|
2
|
+
export const dateTimePickerStyles = () => css `
|
|
3
|
+
:host {
|
|
4
|
+
display: block;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
/* Label */
|
|
8
|
+
.ml-date-time-picker__label {
|
|
9
|
+
display: block;
|
|
10
|
+
font-size: var(--ml-text-sm);
|
|
11
|
+
font-weight: var(--ml-font-medium);
|
|
12
|
+
color: var(--ml-color-text-secondary);
|
|
13
|
+
margin-bottom: var(--ml-space-1-5);
|
|
14
|
+
line-height: var(--ml-leading-tight);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.ml-date-time-picker__required {
|
|
18
|
+
color: var(--ml-color-danger);
|
|
19
|
+
margin-left: var(--ml-space-0-5);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/* Unified row — acts as the single input border */
|
|
23
|
+
.ml-date-time-picker__row {
|
|
24
|
+
display: flex;
|
|
25
|
+
align-items: stretch;
|
|
26
|
+
border: var(--ml-border) solid var(--ml-color-border);
|
|
27
|
+
border-radius: var(--ml-radius-md);
|
|
28
|
+
background-color: var(--ml-color-input-bg);
|
|
29
|
+
transition:
|
|
30
|
+
border-color var(--ml-duration-150) var(--ml-ease-in-out),
|
|
31
|
+
box-shadow var(--ml-duration-150) var(--ml-ease-in-out);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.ml-date-time-picker__row:focus-within {
|
|
35
|
+
border-color: var(--ml-color-primary);
|
|
36
|
+
box-shadow: var(--ml-shadow-focus-ring);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.ml-date-time-picker--error .ml-date-time-picker__row {
|
|
40
|
+
border-color: var(--ml-color-danger);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.ml-date-time-picker--error .ml-date-time-picker__row:focus-within {
|
|
44
|
+
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* Child pickers — strip their individual borders, hover borders & focus rings */
|
|
48
|
+
.ml-date-time-picker__row > ml-date-picker,
|
|
49
|
+
.ml-date-time-picker__row > ml-time-picker {
|
|
50
|
+
flex: 1;
|
|
51
|
+
min-width: 0;
|
|
52
|
+
--ml-color-border: transparent;
|
|
53
|
+
--ml-color-border-strong: transparent;
|
|
54
|
+
--ml-trigger-focus-border: transparent;
|
|
55
|
+
--ml-shadow-focus-ring: none;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Vertical divider between pickers */
|
|
59
|
+
.ml-date-time-picker__divider {
|
|
60
|
+
width: 1px;
|
|
61
|
+
align-self: stretch;
|
|
62
|
+
background-color: var(--ml-color-border);
|
|
63
|
+
margin: var(--ml-space-1-5) 0;
|
|
64
|
+
flex-shrink: 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Disabled */
|
|
68
|
+
.ml-date-time-picker--disabled .ml-date-time-picker__row {
|
|
69
|
+
opacity: 0.5;
|
|
70
|
+
pointer-events: none;
|
|
71
|
+
background-color: var(--ml-color-surface-sunken);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* Hint / Error */
|
|
75
|
+
.ml-date-time-picker__hint,
|
|
76
|
+
.ml-date-time-picker__error {
|
|
77
|
+
display: block;
|
|
78
|
+
margin-top: var(--ml-space-1-5);
|
|
79
|
+
font-size: var(--ml-text-sm);
|
|
80
|
+
line-height: var(--ml-leading-tight);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.ml-date-time-picker__hint {
|
|
84
|
+
color: var(--ml-color-text-muted);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.ml-date-time-picker__error {
|
|
88
|
+
color: var(--ml-color-danger);
|
|
89
|
+
}
|
|
90
|
+
`;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"date-time-picker.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-time-picker/date-time-picker.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAE/E,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,uBAAuB,6CA+ChE"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { html, classMap, when } from '@melodicdev/core';
|
|
2
|
+
export function dateTimePickerTemplate(c) {
|
|
3
|
+
return html `
|
|
4
|
+
<div class=${classMap({
|
|
5
|
+
'ml-date-time-picker': true,
|
|
6
|
+
[`ml-date-time-picker--${c.size}`]: true,
|
|
7
|
+
'ml-date-time-picker--error': !!c.error,
|
|
8
|
+
'ml-date-time-picker--disabled': c.disabled
|
|
9
|
+
})}>
|
|
10
|
+
${when(!!c.label, () => html `
|
|
11
|
+
<label class="ml-date-time-picker__label">
|
|
12
|
+
${c.label}
|
|
13
|
+
${when(c.required, () => html `<span class="ml-date-time-picker__required">*</span>`)}
|
|
14
|
+
</label>
|
|
15
|
+
`)}
|
|
16
|
+
|
|
17
|
+
<div class="ml-date-time-picker__row">
|
|
18
|
+
<ml-date-picker
|
|
19
|
+
value=${c.dateValue}
|
|
20
|
+
size=${c.size}
|
|
21
|
+
?disabled=${c.disabled}
|
|
22
|
+
?required=${c.required}
|
|
23
|
+
min=${c.minDate}
|
|
24
|
+
max=${c.maxDate}
|
|
25
|
+
placeholder="Select date"
|
|
26
|
+
></ml-date-picker>
|
|
27
|
+
|
|
28
|
+
<span class="ml-date-time-picker__divider"></span>
|
|
29
|
+
|
|
30
|
+
<ml-time-picker
|
|
31
|
+
value=${c.timeValue}
|
|
32
|
+
size=${c.size}
|
|
33
|
+
?disabled=${c.disabled}
|
|
34
|
+
min=${c.minTime}
|
|
35
|
+
max=${c.maxTime}
|
|
36
|
+
step=${c.step}
|
|
37
|
+
.twelveHour=${c.use12Hour}
|
|
38
|
+
placeholder="Select time"
|
|
39
|
+
></ml-time-picker>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
${when(!!c.error, () => html `<span class="ml-date-time-picker__error">${c.error}</span>`, () => html `${when(!!c.hint, () => html `<span class="ml-date-time-picker__hint">${c.hint}</span>`)}`)}
|
|
43
|
+
</div>
|
|
44
|
+
`;
|
|
45
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-time-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { DateTimePickerComponent } from './date-time-picker.component.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/time-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { TimePickerComponent } from './time-picker.component.js';
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import type { IElementRef, OnCreate, OnDestroy } from '@melodicdev/core';
|
|
2
|
+
/**
|
|
3
|
+
* ml-time-picker - Time input with dropdown selector
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
* ```html
|
|
7
|
+
* <ml-time-picker label="Start time" value="09:30"></ml-time-picker>
|
|
8
|
+
* <ml-time-picker label="Meeting" use-12-hour value="14:00"></ml-time-picker>
|
|
9
|
+
* <ml-time-picker label="Precise" step="1"></ml-time-picker>
|
|
10
|
+
* ```
|
|
11
|
+
*
|
|
12
|
+
* @fires ml:change - Emitted when the time changes. Detail: { value: string }
|
|
13
|
+
*/
|
|
14
|
+
export declare class TimePickerComponent implements IElementRef, OnCreate, OnDestroy {
|
|
15
|
+
elementRef: HTMLElement;
|
|
16
|
+
/** Selected time in HH:mm or HH:mm:ss format */
|
|
17
|
+
value: string;
|
|
18
|
+
/** Placeholder text */
|
|
19
|
+
placeholder: string;
|
|
20
|
+
/** Field label */
|
|
21
|
+
label: string;
|
|
22
|
+
/** Hint text */
|
|
23
|
+
hint: string;
|
|
24
|
+
/** Error message */
|
|
25
|
+
error: string;
|
|
26
|
+
/** Input size */
|
|
27
|
+
size: 'sm' | 'md' | 'lg';
|
|
28
|
+
/** Disabled state */
|
|
29
|
+
disabled: boolean;
|
|
30
|
+
/** Required state */
|
|
31
|
+
required: boolean;
|
|
32
|
+
/** Minimum selectable time (HH:mm) */
|
|
33
|
+
min: string;
|
|
34
|
+
/** Maximum selectable time (HH:mm) */
|
|
35
|
+
max: string;
|
|
36
|
+
/** Step in minutes (default 15) for the preset list. Use 1 to show seconds spinner. */
|
|
37
|
+
step: number;
|
|
38
|
+
/** Use 12-hour format with AM/PM (default: true) */
|
|
39
|
+
twelveHour: boolean;
|
|
40
|
+
/** Whether the popover is open */
|
|
41
|
+
isOpen: boolean;
|
|
42
|
+
/** Current editing hour */
|
|
43
|
+
editHour: number;
|
|
44
|
+
/** Current editing minute */
|
|
45
|
+
editMinute: number;
|
|
46
|
+
/** Current editing second */
|
|
47
|
+
editSecond: number;
|
|
48
|
+
/** AM or PM when in 12-hour mode */
|
|
49
|
+
editPeriod: 'AM' | 'PM';
|
|
50
|
+
private _cleanupAutoUpdate;
|
|
51
|
+
get use12Hour(): boolean;
|
|
52
|
+
get showSeconds(): boolean;
|
|
53
|
+
get displayValue(): string;
|
|
54
|
+
get displayHour(): string;
|
|
55
|
+
get displayMinute(): string;
|
|
56
|
+
get displaySecond(): string;
|
|
57
|
+
onCreate(): void;
|
|
58
|
+
onDestroy(): void;
|
|
59
|
+
togglePopover: () => void;
|
|
60
|
+
incrementHour: () => void;
|
|
61
|
+
decrementHour: () => void;
|
|
62
|
+
incrementMinute: () => void;
|
|
63
|
+
decrementMinute: () => void;
|
|
64
|
+
incrementSecond: () => void;
|
|
65
|
+
decrementSecond: () => void;
|
|
66
|
+
togglePeriod: () => void;
|
|
67
|
+
confirmSelection: () => void;
|
|
68
|
+
handleNowClick: () => void;
|
|
69
|
+
handleKeyDown: (event: KeyboardEvent) => void;
|
|
70
|
+
handleHourInput: (event: Event) => void;
|
|
71
|
+
handleMinuteInput: (event: Event) => void;
|
|
72
|
+
handleSecondInput: (event: Event) => void;
|
|
73
|
+
handleHourBlur: () => void;
|
|
74
|
+
handleMinuteBlur: () => void;
|
|
75
|
+
handleSecondBlur: () => void;
|
|
76
|
+
handleInputFocus: (event: Event) => void;
|
|
77
|
+
handleSpinnerKeyDown: (event: KeyboardEvent) => void;
|
|
78
|
+
private to24Hour;
|
|
79
|
+
private syncEditFromValue;
|
|
80
|
+
private commitValue;
|
|
81
|
+
private readonly _handleToggle;
|
|
82
|
+
private closePopover;
|
|
83
|
+
private startPositioning;
|
|
84
|
+
private updatePosition;
|
|
85
|
+
private returnFocus;
|
|
86
|
+
private getTriggerEl;
|
|
87
|
+
private getPopoverEl;
|
|
88
|
+
}
|
|
89
|
+
//# sourceMappingURL=time-picker.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"time-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/time-picker/time-picker.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AA8BzE;;;;;;;;;;;GAWG;AACH,qBAMa,mBAAoB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IAC3E,UAAU,EAAG,WAAW,CAAC;IAEzB,gDAAgD;IAChD,KAAK,SAAM;IAEX,uBAAuB;IACvB,WAAW,SAAiB;IAE5B,kBAAkB;IAClB,KAAK,SAAM;IAEX,gBAAgB;IAChB,IAAI,SAAM;IAEV,oBAAoB;IACpB,KAAK,SAAM;IAEX,iBAAiB;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC,qBAAqB;IACrB,QAAQ,UAAS;IAEjB,qBAAqB;IACrB,QAAQ,UAAS;IAEjB,sCAAsC;IACtC,GAAG,SAAM;IAET,sCAAsC;IACtC,GAAG,SAAM;IAET,uFAAuF;IACvF,IAAI,SAAM;IAEV,oDAAoD;IACpD,UAAU,UAAQ;IAElB,kCAAkC;IAClC,MAAM,UAAS;IAEf,2BAA2B;IAC3B,QAAQ,SAAK;IAEb,6BAA6B;IAC7B,UAAU,SAAK;IAEf,6BAA6B;IAC7B,UAAU,SAAK;IAEf,oCAAoC;IACpC,UAAU,EAAE,IAAI,GAAG,IAAI,CAAQ;IAE/B,OAAO,CAAC,kBAAkB,CAA6B;IAEvD,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED,IAAI,WAAW,IAAI,MAAM,CAQxB;IAED,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,QAAQ,IAAI,IAAI;IAOhB,SAAS,IAAI,IAAI;IAQjB,aAAa,QAAO,IAAI,CAMtB;IAEF,aAAa,QAAO,IAAI,CAStB;IAEF,aAAa,QAAO,IAAI,CAQtB;IAEF,eAAe,QAAO,IAAI,CAExB;IAEF,eAAe,QAAO,IAAI,CAExB;IAEF,eAAe,QAAO,IAAI,CAExB;IAEF,eAAe,QAAO,IAAI,CAExB;IAEF,YAAY,QAAO,IAAI,CAIrB;IAEF,gBAAgB,QAAO,IAAI,CAOzB;IAEF,cAAc,QAAO,IAAI,CAMvB;IAEF,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CAQ1C;IAEF,eAAe,GAAI,OAAO,KAAK,KAAG,IAAI,CAapC;IAEF,iBAAiB,GAAI,OAAO,KAAK,KAAG,IAAI,CAOtC;IAEF,iBAAiB,GAAI,OAAO,KAAK,KAAG,IAAI,CAOtC;IAEF,cAAc,QAAO,IAAI,CAKvB;IAEF,gBAAgB,QAAO,IAAI,CAEzB;IAEF,gBAAgB,QAAO,IAAI,CAEzB;IAEF,gBAAgB,GAAI,OAAO,KAAK,KAAG,IAAI,CAErC;IAEF,oBAAoB,GAAI,OAAO,aAAa,KAAG,IAAI,CAkBjD;IAEF,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAY5B;IAEF,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;CAGpB"}
|