jsl-ui 9.28.7 → 10.0.0

package/lib/components/date/DateComponent.js

@@ -1,3 +1,4 @@
+import "../../ui/date-input.css";
 import { DatePicker } from "../../ui/date.picker";
 import { date } from "../../core/date";
 import { helper } from "../../core/helper";
@@ -5,12 +6,11 @@ import { EventHandler } from "../../interaction/eventhandler";
 export class DateComponent {
     constructor(options) {
         var _a;
-        this.options = { ...{ enabled: true, id: helper.newDomGuid(), bindMode: "toModel" }, ...options };
-        if (this.options.bindTo != null && this.options.property != null && this.options.value == null) {
-            this.options.value = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
-                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
-                this.options.bindTo[this.options.property]);
+        this.options = { enabled: true, id: helper.newDomGuid(), bindMode: "toModel", ...options };
+        if (this.hasBinding() && this.options.value == null) {
+            this.options.value = this.readModel();
         }
+        this.modelValue = (_a = this.options.value) === null || _a === void 0 ? void 0 : _a.getTime();
         this.options.onChange = EventHandler.Create(this.options.onChange);
     }
     get onChange() {
@@ -18,72 +18,120 @@ export class DateComponent {
     }
     render() {
         var _a;
-        let val = this.options.value;
-        if (this.options.bindMode !== "toModel" && this.options.bindTo != null && this.options.property != null) {
-            const current = this.getValue();
-            const newVal = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
-                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
-                this.options.bindTo[this.options.property]);
-            const newValStr = date.format(newVal);
-            val = newVal;
-            if (newValStr !== current) {
-                if (this.currentDom != null) {
-                    this.currentDom.value = newValStr;
-                }
+        if (this.options.bindMode !== "toModel" && this.hasBinding()) {
+            const value = this.readModel();
+            if ((value === null || value === void 0 ? void 0 : value.getTime()) !== this.modelValue) {
+                this.setValue(value);
+                this.modelValue = value === null || value === void 0 ? void 0 : value.getTime();
             }
         }
         return {
             tag: "input",
             attr: {
-                id: this.options.id,
-                class: this.options.class,
+                id: this.options.id, type: "text",
+                class: "jsl-date-input date-comp " + ((_a = this.options.class) !== null && _a !== void 0 ? _a : ""),
                 style: this.options.style,
                 disabled: !this.options.enabled ? "disabled" : undefined,
                 placeholder: this.options.placeholder,
-                value: date.format(val),
-                change: this.raiseEvent,
+                "aria-label": this.options.ariaLabel,
+                autocomplete: "off",
+                value: this.format(this.options.value),
+                change: this.raiseEvent
             }
         };
     }
     getValue() {
-        if (this.currentDom == null) {
-            return "";
-        }
-        return this.currentDom.value;
+        var _a, _b;
+        return (_b = (_a = this.currentDom) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.format(this.options.value);
     }
     getValueAsDate() {
-        if (this.currentDom == null) {
+        var _a;
+        try {
+            const text = this.getValue().trim();
+            const value = text ? ((_a = this.options.parse) !== null && _a !== void 0 ? _a : date.parse)(text) : null;
+            return value instanceof Date && !isNaN(value.getTime()) ? value : null;
+        }
+        catch (_b) {
             return null;
         }
-        if (this.options.parse) {
-            return this.options.parse(this.currentDom.value);
+    }
+    isValid() {
+        if (!this.getValue().trim()) {
+            return true;
+        }
+        const value = this.getValueAsDate();
+        if (!value) {
+            return false;
         }
-        return date.parse(this.currentDom.value);
+        const min = this.parseBoundary(this.options.min);
+        const max = this.parseBoundary(this.options.max);
+        const stamp = new Date(value.getFullYear(), value.getMonth(), value.getDate()).getTime();
+        return !(min && stamp < min.getTime()) && !(max && stamp > max.getTime()) &&
+            (!this.options.inRange || this.options.inRange(value));
     }
-    getRef() {
-        return this.ref;
+    /** Updates the input and calendar without raising onChange. */
+    setValue(value) {
+        var _a;
+        this.options.value = value ? new Date(value.getTime()) : null;
+        if (this.currentDom) {
+            this.currentDom.value = this.format(this.options.value);
+            this.currentDom.setCustomValidity("");
+            this.currentDom.removeAttribute("aria-invalid");
+        }
+        (_a = this.ref) === null || _a === void 0 ? void 0 : _a.setState({ selectedDate: this.options.value }, true);
     }
+    getRef() { return this.ref; }
     onCreate(node) {
         this.currentDom = node.dom;
         this.ref = DatePicker(this.currentDom, this.options);
     }
-    onUpdate(node) {
-        this.currentDom = node.dom;
+    onUpdate(node) { this.currentDom = node.dom; }
+    onRemove() { var _a; (_a = this.ref) === null || _a === void 0 ? void 0 : _a.destroy(); }
+    format(value) {
+        var _a;
+        return value ? ((_a = this.options.format) !== null && _a !== void 0 ? _a : date.format)(value) : "";
     }
-    onRemove() {
-        if (this.ref != null) {
-            this.ref.destroy();
-        }
+    hasBinding() {
+        return this.options.bindTo != null && this.options.property != null;
+    }
+    readModel() {
+        var _a;
+        const value = this.options.bindTo[this.options.property];
+        return ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ? this.options.converter.toUI(value) : value;
     }
     raiseEvent(e, node) {
         var _a;
-        if (this.options.enabled) {
-            const val = date.parse(node.dom.value);
-            if (this.options.bindTo && this.options.bindMode !== "fromModel" && this.options.property) {
-                this.options.bindTo[this.options.property] =
-                    ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(val) : val;
-            }
-            this.options.onChange.notify(val);
+        if (!this.options.enabled) {
+            return;
+        }
+        this.currentDom = node.dom;
+        const value = this.getValueAsDate();
+        const invalid = !this.isValid();
+        this.currentDom.setCustomValidity(invalid ? "Enter an available date." : "");
+        if (invalid) {
+            this.currentDom.setAttribute("aria-invalid", "true");
+            return false;
+        }
+        this.currentDom.removeAttribute("aria-invalid");
+        this.options.value = value;
+        if (this.hasBinding() && this.options.bindMode !== "fromModel") {
+            this.options.bindTo[this.options.property] =
+                ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(value) : value;
+            this.modelValue = value === null || value === void 0 ? void 0 : value.getTime();
+        }
+        this.onChange.notify(value);
+    }
+    parseBoundary(value) {
+        var _a;
+        if (value == null) {
+            return null;
+        }
+        try {
+            const parsed = typeof value === "string" ? ((_a = this.options.parse) !== null && _a !== void 0 ? _a : date.parse)(value) : value;
+            return parsed ? new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate()) : null;
+        }
+        catch (_b) {
+            return null;
         }
     }
 }

package/lib/components/date-range/DateRangeComponent.d.ts

@@ -14,22 +14,33 @@ export interface IDateRangeOptions {
     maxValue?: Date;
     increment: "days" | "weeks" | "month" | "years";
     onChange?: EventHandler<IDateRangeValue> | ((v?: IDateRangeValue) => void);
+    enabled?: boolean;
+    ariaLabel?: string;
+    startLabel?: string;
+    endLabel?: string;
 }
 export declare class DateRangeComponent implements IJSLComponent {
     State: {
-        currentMin: any;
-        currentMax: any;
+        currentMin: number;
+        currentMax: number;
     };
-    private manualChange;
     private minDate;
     private maxDate;
     private options;
     private slider;
+    private days;
+    private startId;
+    private endId;
     constructor(o: IDateRangeOptions);
     render(): IJSLVNode;
     onCreate(node: IJSLVNode): void;
     onRemove(): void;
     getMin(): Date;
     getMax(): Date;
+    private day;
+    private offset;
+    private at;
+    private syncFields;
+    private inputChange;
     private triggerChange;
 }

package/lib/components/date-range/DateRangeComponent.js

@@ -2,120 +2,130 @@ import "./DateRangeStyle.scss";
 import { noUiSlider } from "../slider/nouislider";
 import { DateComponent } from "../date/DateComponent";
 import { date } from "../../core/date";
+import { helper } from "../../core/helper";
 import { EventHandler } from "../../interaction/eventhandler";
 export class DateRangeComponent {
     constructor(o) {
+        var _a, _b;
         this.State = { currentMin: null, currentMax: null };
-        this.manualChange = false;
-        this.options = { ...o };
-        if (this.options.minValue == null) {
-            this.options.minValue = this.options.min;
+        this.startId = helper.newDomGuid();
+        this.endId = helper.newDomGuid();
+        this.options = { enabled: true, startLabel: "Start date", endLabel: "End date", ...o };
+        this.options.min = this.day(o.min);
+        this.options.max = this.day(o.max);
+        this.days = date.getDaysBetween(this.options.min, this.options.max);
+        if (!Number.isFinite(this.days) || this.days < 0) {
+            throw new Error("DateRangeComponent requires valid min and max dates in ascending order.");
         }
-        if (this.options.maxValue == null) {
-            this.options.maxValue = this.options.max;
-        }
-        this.options.onChange = EventHandler.Create(this.options.onChange);
+        const start = this.offset((_a = o.minValue) !== null && _a !== void 0 ? _a : o.min);
+        const end = Math.max(start, this.offset((_b = o.maxValue) !== null && _b !== void 0 ? _b : o.max));
+        this.State.currentMin = start;
+        this.State.currentMax = end;
+        this.options.onChange = EventHandler.Create(o.onChange);
+        const common = { min: this.options.min, max: this.options.max, enabled: this.options.enabled };
         this.minDate = new DateComponent({
-            min: this.options.min,
-            max: this.options.max,
-            value: this.options.minValue,
-            style: "width:6rem;",
-            onChange: (val) => {
-                if (this.manualChange) {
-                    return;
-                }
-                this.manualChange = true;
-                const min = this.minDate.getValueAsDate();
-                const max = this.maxDate.getValueAsDate();
-                this.slider.set([date.getDaysBetween(this.options.min, min), date.getDaysBetween(this.options.min, max)]);
-                this.manualChange = false;
-                this.triggerChange();
-            }
+            ...common, id: this.startId, value: this.at(start),
+            onChange: value => this.inputChange(value, 0)
         });
         this.maxDate = new DateComponent({
-            min: this.options.min,
-            max: this.options.max,
-            value: this.options.maxValue,
-            style: "width:6rem;text-align:right;",
-            onChange: (val) => {
-                if (this.manualChange) {
-                    return;
-                }
-                this.manualChange = true;
-                const min = this.minDate.getValueAsDate();
-                const max = this.maxDate.getValueAsDate();
-                this.slider.set([date.getDaysBetween(this.options.min, min), date.getDaysBetween(this.options.min, max)]);
-                this.manualChange = false;
-                this.triggerChange();
-            }
+            ...common, id: this.endId, value: this.at(end),
+            onChange: value => this.inputChange(value, 1)
         });
     }
     render() {
-        var _a;
+        var _a, _b;
+        this.syncFields();
+        const field = (id, label, control) => ({
+            tag: "div", attr: { class: "date-range-field" }, children: [
+                { tag: "label", attr: { for: id }, content: label }, control
+            ]
+        });
         return {
-            tag: "div", attr: { style: this.options.style, class: "date-range-comp " + ((_a = this.options.class) !== null && _a !== void 0 ? _a : "") }, children: [
-                {
-                    tag: "div", children: [
-                        this.minDate,
-                        { tag: "span", content: " - " },
-                        this.maxDate
-                    ]
-                }, {
-                    tag: "div", children: [
+            tag: "div", attr: {
+                style: this.options.style, class: "date-range-comp " + ((_a = this.options.class) !== null && _a !== void 0 ? _a : ""),
+                role: "group", "aria-label": (_b = this.options.ariaLabel) !== null && _b !== void 0 ? _b : "Date range"
+            },
+            children: [
+                { tag: "div", attr: { class: "date-range-fields" }, children: [
+                        field(this.startId, this.options.startLabel, this.minDate),
+                        { tag: "span", content: "–", attr: { class: "date-range-separator", "aria-hidden": "true" } },
+                        field(this.endId, this.options.endLabel, this.maxDate)
+                    ] },
+                { tag: "div", attr: { class: "date-range-track" }, children: [
                         { tag: "div", attr: { class: "slider-div" } }
-                    ]
-                }
+                    ] },
+                { tag: "div", attr: { class: "date-range-limits", "aria-hidden": "true" }, children: [
+                        { tag: "span", content: date.format(this.options.min) },
+                        { tag: "span", content: date.format(this.options.max) }
+                    ] }
             ]
         };
     }
     onCreate(node) {
-        const diffInDays = date.getDaysBetween(this.options.min, this.options.max);
         if (this.options.increment !== "days") {
-            console.warn(" only days as increments are currently supported");
+            console.warn("DateRangeComponent currently supports daily increments only.");
         }
-        const min = 0;
-        const max = diffInDays;
-        this.slider = noUiSlider.create(node.dom.querySelector(".slider-div"), {
-            start: [date.getDaysBetween(this.options.min, this.options.minValue),
-                date.getDaysBetween(this.options.min, this.options.maxValue)],
-            connect: true,
-            step: 1,
-            range: {
-                min,
-                max
-            },
+        const target = node.dom.querySelector(".slider-div");
+        if (!this.options.enabled || this.days === 0) {
+            target.setAttribute("disabled", "");
+        }
+        this.slider = noUiSlider.create(target, {
+            start: [this.State.currentMin, this.State.currentMax],
+            connect: true, step: 1,
+            range: { min: 0, max: Math.max(1, this.days) },
+            ariaFormat: { to: value => date.format(this.at(Math.round(value))), from: Number }
+        });
+        const handles = target.querySelectorAll("[role=slider]");
+        handles.forEach((handle, index) => {
+            handle.setAttribute("aria-label", index === 0 ? this.options.startLabel : this.options.endLabel);
+            if (!this.options.enabled || this.days === 0) {
+                handle.setAttribute("tabindex", "-1");
+                handle.setAttribute("aria-disabled", "true");
+            }
         });
-        this.slider.on("update", (values) => {
-            if (this.manualChange) {
-                return;
+        let initialized = false;
+        this.slider.on("update", values => {
+            const min = Math.min(this.days, Math.round(+values[0]));
+            const max = Math.min(this.days, Math.round(+values[1]));
+            const changed = min !== this.State.currentMin || max !== this.State.currentMax;
+            this.State.currentMin = min;
+            this.State.currentMax = max;
+            this.syncFields();
+            if (initialized && changed) {
+                this.triggerChange();
             }
-            this.manualChange = true;
-            this.State.currentMin = values[0];
-            this.State.currentMax = values[1];
-            const minVal = date.addDays(this.options.min, parseFloat(values[0]));
-            const maxVal = date.addDays(this.options.min, parseFloat(values[1]));
-            this.minDate.getRef().setState({ selectedDate: minVal });
-            this.maxDate.getRef().setState({ selectedDate: maxVal });
-            this.manualChange = false;
-            this.triggerChange();
         });
+        initialized = true;
     }
-    onRemove() {
-        if (this.slider != null) {
-            this.slider.destroy();
-            this.slider = null;
-        }
+    onRemove() { var _a; (_a = this.slider) === null || _a === void 0 ? void 0 : _a.destroy(); this.slider = null; }
+    getMin() { return this.at(this.State.currentMin); }
+    getMax() { return this.at(this.State.currentMax); }
+    day(value) {
+        return value instanceof Date ? new Date(value.getFullYear(), value.getMonth(), value.getDate()) : new Date(NaN);
     }
-    getMin() {
-        return this.minDate.getValueAsDate();
+    offset(value) {
+        const offset = date.getDaysBetween(this.options.min, this.day(value));
+        return Number.isFinite(offset) ? Math.max(0, Math.min(this.days, offset)) : 0;
     }
-    getMax() {
-        return this.maxDate.getValueAsDate();
+    at(offset) { return date.addDays(this.options.min, offset); }
+    syncFields() {
+        this.minDate.setValue(this.getMin());
+        this.maxDate.setValue(this.getMax());
+    }
+    inputChange(value, handle) {
+        if (!value || !this.slider) {
+            this.syncFields();
+            return;
+        }
+        const offset = handle === 0 ? Math.min(this.offset(value), this.State.currentMax) :
+            Math.max(this.offset(value), this.State.currentMin);
+        this.slider.set(handle === 0 ? [offset, this.State.currentMax] : [this.State.currentMin, offset]);
+        // Also restore the normalized value when a crossed handle could not move.
+        this.syncFields();
     }
     triggerChange() {
         this.options.onChange.notify({
-            minValue: this.getMin(),
-            maxValue: this.getMin()
+            minValue: this.getMin(), maxValue: this.getMax()
         });
     }
 }

package/lib/components/date-range/DateRangeStyle.scss

@@ -1,12 +1,36 @@
-.date-range-comp {
-    display: inline-block;
-
-    .slider-div {
-        margin: 0.5rem 0.9rem;
-    }
-
-    // .noUi-handle:before, .noUi-handle:after {
-    //     width: 1rem;
-    //     height: 1rem;
-    // }
+.date-range-comp {
+    display: inline-block;
+    width: 25rem;
+    max-width: 100%;
+    color: var(--jsl-color-text);
+}
+.date-range-fields {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    align-items: end;
+    gap: .625rem;
+}
+.date-range-field { min-width: 0; }
+.date-range-field label {
+    display: block;
+    margin-bottom: .375rem;
+    color: var(--jsl-color-text-secondary);
+    font: inherit;
+    font-size: .75rem;
+    font-weight: 500;
+}
+.date-range-field input { width: 100%; }
+.date-range-separator { line-height: 2.5rem; color: var(--jsl-color-text-muted); }
+.date-range-track { padding: 1.5rem .625rem .875rem; }
+.date-range-limits {
+    display: flex;
+    justify-content: space-between;
+    gap: .5rem;
+    color: var(--jsl-color-text-muted);
+    font-size: .6875rem;
+    font-variant-numeric: tabular-nums;
+}
+@media (max-width: 380px) {
+    .date-range-fields { gap: .375rem; }
+    .date-range-field input { font-size: .75rem; padding-left: .5rem; padding-right: 1.75rem; background-position: right .3rem center; background-size: 15px; }
 }

package/lib/components/date-time/DateTimeComponent.d.ts

@@ -3,13 +3,21 @@ import { IJSLComponent, IJSLVNode } from "jsl-render";
 import { IDateComponentOptions } from "../date/DateComponent";
 import { ITimeComponentOptions } from "../time/TimeComponent";
 export interface IDateTimeComponentOptions<T> extends IDateComponentOptions<T>, ITimeComponentOptions<T> {
+    dateAriaLabel?: string;
+    timeAriaLabel?: string;
 }
 export declare class DateTimeComponent<T = any> implements IJSLComponent {
     private options;
     private dateComp;
     private timeComp;
+    private modelValue;
     constructor(options: IDateTimeComponentOptions<T>);
     render(): IJSLVNode;
     getValue(): string;
     getValueAsDate(): Date;
+    /** Updates both fields without raising onChange. */
+    setValue(value: Date): void;
+    private hasBinding;
+    private readModel;
+    private raiseChange;
 }

package/lib/components/date-time/DateTimeComponent.js

@@ -1,39 +1,80 @@
 import "./DateTimeStyle.scss";
 import { EventHandler } from "../../interaction/eventhandler";
+import { helper } from "../../core/helper";
 import { DateComponent } from "../date/DateComponent";
 import { TimeComponent } from "../time/TimeComponent";
 export class DateTimeComponent {
     constructor(options) {
-        if (options.bindMode && options.bindMode !== "toModel") {
-            throw new Error("Currently DateTimeComponent only supports toModel as bindMode");
-        }
-        this.options = { ...options };
+        var _a, _b, _c, _d;
+        this.options = { bindMode: "toModel", ...options };
         this.options.onChange = EventHandler.Create(this.options.onChange);
-        const optionsCopy = { ...options };
-        optionsCopy.bindTo = null;
-        optionsCopy.property = null;
-        optionsCopy.converter = null;
-        optionsCopy.onChange = () => {
-            var _a;
-            const val = this.getValueAsDate();
-            if (this.options.bindTo && options.property) {
-                this.options.bindTo[options.property] =
-                    ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(val) : val;
-            }
-            this.options.onChange.notify(val);
+        const value = (_a = options.value) !== null && _a !== void 0 ? _a : (this.hasBinding() ? this.readModel() : null);
+        this.modelValue = value === null || value === void 0 ? void 0 : value.getTime();
+        const id = (_b = options.id) !== null && _b !== void 0 ? _b : helper.newDomGuid();
+        const childOptions = {
+            ...options, value, bindTo: null, property: null, converter: null,
+            bindMode: "toModel", class: undefined, style: undefined,
+            onChange: () => this.raiseChange()
         };
-        this.dateComp = new DateComponent(optionsCopy);
-        this.timeComp = new TimeComponent(optionsCopy);
+        this.dateComp = new DateComponent({
+            ...childOptions, id, ariaLabel: (_c = options.dateAriaLabel) !== null && _c !== void 0 ? _c : "Date"
+        });
+        this.timeComp = new TimeComponent({
+            ...childOptions, id: id + "-time", placeholder: options.inputMode === "HourMinuteSecond" ? "HH:MM:SS" : "HH:MM",
+            ariaLabel: (_d = options.timeAriaLabel) !== null && _d !== void 0 ? _d : "Time"
+        });
     }
     render() {
-        return { tag: "div", attr: { class: "date-time-comp" }, children: [
-                this.dateComp, this.timeComp
-            ] };
+        var _a, _b;
+        if (this.options.bindMode !== "toModel" && this.hasBinding()) {
+            const value = this.readModel();
+            if ((value === null || value === void 0 ? void 0 : value.getTime()) !== this.modelValue) {
+                this.setValue(value);
+                this.modelValue = value === null || value === void 0 ? void 0 : value.getTime();
+            }
+        }
+        return {
+            tag: "div", attr: {
+                class: "date-time-comp " + ((_a = this.options.class) !== null && _a !== void 0 ? _a : ""),
+                style: this.options.style, role: "group",
+                "aria-label": (_b = this.options.ariaLabel) !== null && _b !== void 0 ? _b : "Date and time"
+            },
+            children: [this.dateComp, this.timeComp]
+        };
     }
     getValue() {
-        return this.dateComp.getValue() + " " + this.timeComp.getValue();
+        return (this.dateComp.getValue() + " " + this.timeComp.getValue()).trim();
     }
     getValueAsDate() {
-        return this.timeComp.getValueAsDate(this.dateComp.getValueAsDate());
+        const date = this.dateComp.getValueAsDate();
+        return date && this.dateComp.isValid() ? this.timeComp.getValueAsDate(date) : null;
+    }
+    /** Updates both fields without raising onChange. */
+    setValue(value) {
+        this.dateComp.setValue(value);
+        this.timeComp.setValue(value);
+    }
+    hasBinding() {
+        return this.options.bindTo != null && this.options.property != null;
+    }
+    readModel() {
+        var _a;
+        const value = this.options.bindTo[this.options.property];
+        return ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ? this.options.converter.toUI(value) : value;
+    }
+    raiseChange() {
+        var _a;
+        const value = this.getValueAsDate();
+        // Do not publish an invalid draft in either field.
+        if (!this.dateComp.isValid() ||
+            (this.timeComp.getValue() && !this.timeComp.getValueAsDate(null))) {
+            return;
+        }
+        if (this.hasBinding() && this.options.bindMode !== "fromModel") {
+            this.options.bindTo[this.options.property] =
+                ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(value) : value;
+            this.modelValue = value === null || value === void 0 ? void 0 : value.getTime();
+        }
+        this.options.onChange.notify(value);
     }
 }

package/lib/components/date-time/DateTimeStyle.scss

@@ -1,7 +1,10 @@
-.date-time-comp {
-    display: inline-block;
-}
-
-.date-time-comp input:first-child {
-    width:6em;
-}
+.date-time-comp {
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .5rem;
+    max-width: 100%;
+}
+.date-time-comp .date-comp { flex: 1 1 10rem; }
+.date-time-comp .time-comp { flex: 0 0 6rem; }
+.date-time-comp .time-comp-seconds { flex-basis: 7.5rem; }