@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.
Files changed (31) hide show
  1. package/assets/melodic-components.js +4 -2
  2. package/assets/melodic-components.js.map +1 -1
  3. package/assets/melodic-components.min.js +4 -3
  4. package/lib/components/forms/date-picker/date-picker.styles.js +2 -2
  5. package/lib/components/forms/date-time-picker/date-time-picker.component.d.ts +61 -0
  6. package/lib/components/forms/date-time-picker/date-time-picker.component.d.ts.map +1 -0
  7. package/lib/components/forms/date-time-picker/date-time-picker.component.js +173 -0
  8. package/lib/components/forms/date-time-picker/date-time-picker.styles.d.ts +2 -0
  9. package/lib/components/forms/date-time-picker/date-time-picker.styles.d.ts.map +1 -0
  10. package/lib/components/forms/date-time-picker/date-time-picker.styles.js +90 -0
  11. package/lib/components/forms/date-time-picker/date-time-picker.template.d.ts +3 -0
  12. package/lib/components/forms/date-time-picker/date-time-picker.template.d.ts.map +1 -0
  13. package/lib/components/forms/date-time-picker/date-time-picker.template.js +45 -0
  14. package/lib/components/forms/date-time-picker/index.d.ts +2 -0
  15. package/lib/components/forms/date-time-picker/index.d.ts.map +1 -0
  16. package/lib/components/forms/date-time-picker/index.js +1 -0
  17. package/lib/components/forms/time-picker/index.d.ts +2 -0
  18. package/lib/components/forms/time-picker/index.d.ts.map +1 -0
  19. package/lib/components/forms/time-picker/index.js +1 -0
  20. package/lib/components/forms/time-picker/time-picker.component.d.ts +89 -0
  21. package/lib/components/forms/time-picker/time-picker.component.d.ts.map +1 -0
  22. package/lib/components/forms/time-picker/time-picker.component.js +369 -0
  23. package/lib/components/forms/time-picker/time-picker.styles.d.ts +2 -0
  24. package/lib/components/forms/time-picker/time-picker.styles.d.ts.map +1 -0
  25. package/lib/components/forms/time-picker/time-picker.styles.js +318 -0
  26. package/lib/components/forms/time-picker/time-picker.template.d.ts +3 -0
  27. package/lib/components/forms/time-picker/time-picker.template.d.ts.map +1 -0
  28. package/lib/components/forms/time-picker/time-picker.template.js +123 -0
  29. package/lib/components/foundation/card/card.styles.d.ts.map +1 -1
  30. package/lib/components/foundation/card/card.styles.js +1 -0
  31. 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,2 @@
1
+ export declare const dateTimePickerStyles: () => import("@melodicdev/core").TemplateResult;
2
+ //# sourceMappingURL=date-time-picker.styles.d.ts.map
@@ -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,3 @@
1
+ import type { DateTimePickerComponent } from './date-time-picker.component.js';
2
+ export declare function dateTimePickerTemplate(c: DateTimePickerComponent): import("@melodicdev/core").TemplateResult;
3
+ //# sourceMappingURL=date-time-picker.template.d.ts.map
@@ -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,2 @@
1
+ export { DateTimePickerComponent } from './date-time-picker.component.js';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -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,2 @@
1
+ export { TimePickerComponent } from './time-picker.component.js';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -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"}