@scania/tegel
Version:
Tegel Design System
203 lines (199 loc) • 20.4 kB
JavaScript
import { r as registerInstance, c as createEvent, h } from './index-9xxNGlso.js';
import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.js';
const datetimeCss = () => ` selector(input::-webkit-datetime-edit){.tds-datetime-input.sc-tds-datetime:not(:focus)::-webkit-datetime-edit,.tds-datetime-input-md.sc-tds-datetime:not(:focus)::-webkit-datetime-edit,.tds-datetime-input-sm.sc-tds-datetime:not(:focus)::-webkit-datetime-edit{color:var(--tds-datetime-placeholder-color)}}.tds-datetime-input[type=datetime-local].sc-tds-datetime~.icon-time.sc-tds-datetime,.tds-datetime-input-md[type=datetime-local].sc-tds-datetime~.icon-time.sc-tds-datetime,.tds-datetime-input-sm[type=datetime-local].sc-tds-datetime~.icon-time.sc-tds-datetime{display:none}.tds-datetime-input[type=date].sc-tds-datetime~.icon-time.sc-tds-datetime,.tds-datetime-input-md[type=date].sc-tds-datetime~.icon-time.sc-tds-datetime,.tds-datetime-input-sm[type=date].sc-tds-datetime~.icon-time.sc-tds-datetime{display:none}.tds-datetime-input[type=month].sc-tds-datetime~.icon-time.sc-tds-datetime,.tds-datetime-input-md[type=month].sc-tds-datetime~.icon-time.sc-tds-datetime,.tds-datetime-input-sm[type=month].sc-tds-datetime~.icon-time.sc-tds-datetime{display:none}.tds-datetime-input[type=week].sc-tds-datetime~.icon-time.sc-tds-datetime,.tds-datetime-input-md[type=week].sc-tds-datetime~.icon-time.sc-tds-datetime,.tds-datetime-input-sm[type=week].sc-tds-datetime~.icon-time.sc-tds-datetime{display:none}.tds-datetime-input[type=time].sc-tds-datetime~.icon-datetime-local.sc-tds-datetime,.tds-datetime-input-md[type=time].sc-tds-datetime~.icon-datetime-local.sc-tds-datetime,.tds-datetime-input-sm[type=time].sc-tds-datetime~.icon-datetime-local.sc-tds-datetime{display:none}.tds-datetime-input.sc-tds-datetime{box-sizing:border-box;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-datetime-color);background-color:var(--tds-datetime-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16)}.tds-datetime-input.sc-tds-datetime *.sc-tds-datetime{box-sizing:border-box}.tds-datetime-input.sc-tds-datetime:disabled{background-color:var(--tds-datetime-background-disabled);color:var(--tds-datetime-color-disabled);cursor:not-allowed}.tds-datetime-input.sc-tds-datetime:disabled~.tds-datetime-label-inside.sc-tds-datetime{color:var(--tds-datetime-label-disabled)}.tds-datetime-input.iphone.sc-tds-datetime{padding:0}.tds-datetime-input-md.sc-tds-datetime,.tds-datetime-input-sm.sc-tds-datetime{box-sizing:border-box;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-datetime-color);background-color:var(--tds-datetime-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.tds-datetime-input-md.sc-tds-datetime *.sc-tds-datetime,.tds-datetime-input-sm.sc-tds-datetime *.sc-tds-datetime{box-sizing:border-box}.tds-datetime-input-md.sc-tds-datetime:disabled,.tds-datetime-input-sm.sc-tds-datetime:disabled{background-color:var(--tds-datetime-background-disabled);color:var(--tds-datetime-color-disabled);cursor:not-allowed}.tds-datetime-input-md.sc-tds-datetime:disabled~.tds-datetime-label-inside.sc-tds-datetime,.tds-datetime-input-sm.sc-tds-datetime:disabled~.tds-datetime-label-inside.sc-tds-datetime{color:var(--tds-datetime-label-disabled)}.tds-datetime-input-md.iphone.sc-tds-datetime,.tds-datetime-input-sm.iphone.sc-tds-datetime{padding:0}.tds-datetime-container.sc-tds-datetime{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--tds-datetime-background);border-bottom:1px solid var(--tds-datetime-border-bottom);transition:border-bottom-color 200ms ease}.tds-datetime-container.sc-tds-datetime:hover{border-bottom-color:var(--tds-datetime-border-bottom-hover)}.tds-form-datetime-md.sc-tds-datetime .tds-datetime-container.sc-tds-datetime{height:48px}.tds-form-datetime-sm.sc-tds-datetime .tds-datetime-container.sc-tds-datetime{height:40px}.tds-datetime-input-container.sc-tds-datetime{position:relative;width:100%}.tds-datetime-input-container.sc-tds-datetime .datetime-icon.sc-tds-datetime{height:20px;width:20px;position:absolute;top:50%;transform:translateY(-50%);right:18px;pointer-events:none;color:var(--tds-datetime-icon)}.tds-datetime-label.sc-tds-datetime{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-datetime-label-color)}.tds-datetime-label-inside.sc-tds-datetime{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);position:absolute;pointer-events:none;color:var(--tds-datetime-label-inside-color);left:16px}.tds-form-datetime.sc-tds-datetime{display:block;min-width:208px;background:unset}.tds-form-datetime-nomin.sc-tds-datetime{min-width:auto}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input.sc-tds-datetime{padding-top:var(--tds-spacing-element-24);padding-bottom:15px}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime{top:20px}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input.iphone.sc-tds-datetime{padding:0}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-md.sc-tds-datetime,.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-sm.sc-tds-datetime{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-md.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime,.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-sm.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime{top:16px}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-md.iphone.sc-tds-datetime,.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-sm.iphone.sc-tds-datetime{padding:0}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-sm.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime,.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-md.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:12px}.tds-datetime-focus.sc-tds-datetime .tds-datetime-input.sc-tds-datetime,.tds-datetime-focus.sc-tds-datetime .tds-datetime-input-md.sc-tds-datetime,.tds-datetime-focus.sc-tds-datetime .tds-datetime-input-sm.sc-tds-datetime{border-radius:0;outline:2px solid var(--tds-focus-outline-color);box-shadow:inset 0 0 0 3px var(--tds-white);outline-offset:-2px;z-index:1}.tds-datetime-focus.sc-tds-datetime .tds-datetime-container.sc-tds-datetime{border-bottom:none}.tds-datetime-helper.sc-tds-datetime{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;flex-basis:100%;padding:var(--tds-spacing-element-4) 0;color:var(--tds-datetime-helper)}.tds-datetime-helper.sc-tds-datetime .tds-helper.sc-tds-datetime{display:inline-flex;gap:8px}.tds-form-datetime-disabled.sc-tds-datetime .tds-datetime-container.sc-tds-datetime{border-bottom-color:transparent}.tds-form-datetime-disabled.sc-tds-datetime .datetime-icon.sc-tds-datetime tds-icon.sc-tds-datetime{color:var(--tds-datetime-icon-disabled)}.tds-form-datetime-disabled.sc-tds-datetime .tds-datetime-label.sc-tds-datetime{color:var(--tds-datetime-label-disabled);cursor:not-allowed}.tds-form-datetime-disabled.sc-tds-datetime .tds-datetime-helper.sc-tds-datetime{color:var(--tds-datetime-helper-disabled)}.tds-form-datetime-success.sc-tds-datetime .tds-datetime-container.sc-tds-datetime{border-bottom-color:var(--tds-datetime-border-bottom-success);color:var(--tds-datetime-color-success)}.tds-form-datetime-error.sc-tds-datetime .tds-datetime-helper.sc-tds-datetime{color:var(--tds-datetime-helper-error)}.tds-form-datetime-error.sc-tds-datetime .tds-datetime-helper.sc-tds-datetime .tds-helper.sc-tds-datetime{display:flex;gap:var(--tds-spacing-element-8);flex-wrap:nowrap}.tds-form-datetime-error.sc-tds-datetime .tds-datetime-container.sc-tds-datetime{border-bottom-color:var(--tds-datetime-border-bottom-error)}.tds-datetime-textcounter.sc-tds-datetime{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-datetime-textcounter);float:right}.tds-datetime-textcounter.sc-tds-datetime .tds-datetime-textcounter-divider.sc-tds-datetime{letter-spacing:var(--tds-detail-05-ls);color:var(--tds-datetime-textcounter-divider)}input[type=datetime-local].sc-tds-datetime::-webkit-inner-spin-button,input[type=datetime-local].sc-tds-datetime::-webkit-calendar-picker-indicator{opacity:0}input[type=date].sc-tds-datetime::-webkit-inner-spin-button,input[type=date].sc-tds-datetime::-webkit-calendar-picker-indicator{opacity:0}input[type=month].sc-tds-datetime::-webkit-inner-spin-button,input[type=month].sc-tds-datetime::-webkit-calendar-picker-indicator{opacity:0}input[type=week].sc-tds-datetime::-webkit-inner-spin-button,input[type=week].sc-tds-datetime::-webkit-calendar-picker-indicator{opacity:0}input[type=time].sc-tds-datetime::-webkit-inner-spin-button,input[type=time].sc-tds-datetime::-webkit-calendar-picker-indicator{opacity:0} (-moz-appearance: none){.type-datetime-local.sc-tds-datetime .icon-datetime-local.sc-tds-datetime,.type-date.sc-tds-datetime .icon-datetime-local.sc-tds-datetime{display:none}}`;
const TdsDatetime = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.tdsChange = createEvent(this, "tdsChange", 6);
this.tdsBlur = createEvent(this, "tdsBlur", 6);
this.tdsFocus = createEvent(this, "tdsFocus", 6);
this.tdsInput = createEvent(this, "tdsInput", 6);
/** Boolean indicator to trigger input validation */
this.shouldValidate = false;
/** Sets an input type */
this.type = 'datetime-local';
/** Value of the input text */
this.value = '';
/** Default value of the component.<br/>Format for date-time: yyyy-MM-ddTHH:mm.<br/>Format for date: yyyy-MM-dd.<br/>Format for month: yyyy-MM.<br/>Format for week: yyyy-Www.<br/>Format for time: HH:mm. */
this.defaultValue = 'none';
/** Set input in disabled state */
this.disabled = false;
/** Size of the input */
this.size = 'lg';
/** Resets min width rule */
this.noMinWidth = false;
/** Set the variant of the Datetime component. */
this.modeVariant = null;
/** Name property. Uses a unique ID as fallback if not specified. */
this.name = `datetime-${generateUniqueId()}`;
/** Autofocus for input */
this.autofocus = false;
/** Label text for the component */
this.label = '';
/** Position of the label */
this.labelPosition = 'no-label';
/** Default contextual helper text for the component for states = success or none */
this.helper = '';
/** Contextual helper text for the component when input is invalid */
this.helperErrorInvalid = 'Invalid input';
/** Listen to the focus state of the input */
this.focusInput = false;
this.nativeValidation = () => {
return !((this.min && this.textInput.validity.rangeUnderflow) ||
(this.max && this.textInput.validity.rangeOverflow) ||
this.textInput.validity.badInput);
};
this.getDefaultValue = () => {
const dateTimeObj = {
year: this.defaultValue.slice(0, 4),
month: this.defaultValue.slice(5, 7),
week: this.defaultValue.slice(6, 8),
day: this.defaultValue.slice(8, 10),
hours: this.defaultValue.slice(11, 13),
minutes: this.defaultValue.slice(14, 16),
};
switch (this.type) {
case 'datetime-local':
return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}T${dateTimeObj.hours}:${dateTimeObj.minutes}`;
case 'date':
return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}`;
case 'month':
return `${dateTimeObj.year}-${dateTimeObj.month}`;
case 'week':
return `${dateTimeObj.year}-W${dateTimeObj.week}`;
case 'time':
return `${this.defaultValue.slice(0, 2)}:${this.defaultValue.slice(3, 5)}`;
default:
throw new Error('Invalid type.');
}
};
}
/** Method that resets the value of the Datetime, using defaultValue if is not 'none' */
async reset() {
this.internalReset();
this.tdsChange.emit({
name: this.name,
value: this.value,
});
}
/** Method that sets the value of the datetime element */
async setValue(newValue) {
this.value = newValue;
}
/** Method to programmatically focus the datetime element */
async focusElement() {
if (this.textInput) {
this.textInput.focus();
this.focusInput = true;
}
}
componentWillLoad() {
if (this.defaultValue !== 'none') {
this.value = this.getDefaultValue();
}
}
componentDidRender() {
if (!this.shouldValidate)
return;
this.shouldValidate = false;
this.validateDate();
}
// Listener if input enters focus state
handleFocusIn() {
this.focusInput = true;
}
// Listener if input leaves focus state
handleFocusOut() {
this.validateDate();
this.focusInput = false;
}
// Decorator to activate validation when input value changes
onValueChanged() {
this.shouldValidate = true;
}
validateDate() {
this.state = 'none';
if (!this.nativeValidation() ||
(this.customValidator && !this.customValidator(this.textInput.value))) {
this.state = 'error';
}
else if (this.textInput.value) {
this.state = 'success';
}
}
// Data input event in value prop
handleInput(e) {
this.value = e.target.value;
this.tdsInput.emit(e);
}
// Change event isn't a composed:true by default in for input
handleChange(e) {
this.tdsChange.emit(e);
}
/** Set the input as focus when clicking the whole Datetime with suffix/prefix */
handleFocusClick(e) {
this.textInput.focus();
this.tdsFocus.emit(e);
}
/** Set the input as focus when clicking the whole Datetime with suffix/prefix */
handleBlur(e) {
this.textInput.blur();
this.tdsBlur.emit(e);
}
/** Method that resets the dateteime without emitting an event. */
internalReset() {
const value = '';
if (this.defaultValue !== 'none') {
this.value = this.getDefaultValue();
}
this.value = value;
}
// iOS native date picker doesn't support min/max in the UI; we rely on validation + error message.
// The .iphone class enables iOS-specific styling for error/success states.
render() {
var _a, _b;
const iphone = navigator.userAgent.toLowerCase().includes('iphone');
let className = ' tds-datetime-input';
if (this.size === 'md') {
className += `${className}-md`;
}
if (this.size === 'sm') {
className += `${className}-sm`;
}
if (iphone) {
className += ' iphone';
}
const classNames = {
'tds-form-datetime-nomin': this.noMinWidth,
'tds-form-datetime': true,
'tds-datetime-focus': this.focusInput,
'tds-datetime-data': this.value.length > 0,
'tds-form-datetime-disabled': this.disabled,
[`tds-form-datetime-${this.size}`]: ['md', 'sm'].includes(this.size),
[`tds-form-datetime-${this.state}`]: ['error', 'success'].includes(`${this.state}`),
[`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
'tds-datetime-container-label-inside': !!(this.label &&
this.labelPosition === 'inside' &&
this.size !== 'sm'),
};
return (h("div", { key: 'a55d784701c35fda184c9e17fbe8466854f9140d', class: classNames, onKeyDown: (e) => {
if (e.key === 'Enter') {
const browserIsChrome = navigator.userAgent.toLowerCase().includes('chrome');
if (browserIsChrome) {
// showPicker currently only works reliably for date inputs in Chrome and Chromium-based browsers:
this.textInput.showPicker();
}
}
} }, this.labelPosition === 'outside' && this.label && (h("label", { key: 'ff47d44b79345c816cf9b22bd913b6a595299dce', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: '013669e9b4f3421e96b9239a187515967baf7619', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: 'f06de994b6b1c8fe1db77f914be22797db14018d', class: `tds-datetime-input-container type-${this.type}` }, h("input", { key: 'c003adf22a66a2a04f13abd636c924bd1ad1c6c9', ref: (inputEl) => {
if (inputEl)
this.textInput = inputEl;
}, class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, id: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label }), this.labelPosition === 'inside' && this.size !== 'sm' && this.label && (h("label", { key: '128a8b90a28b6c1c9c2eacc292603b3d1f8e5f10', class: "tds-datetime-label-inside", htmlFor: this.name }, this.label)), h("div", { key: '21331931956e4abf045a01a4af7f5fcf602990bd', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '77c1f611eae6c6ff3d102681b28ce42e0709ff84', size: "20px", name: "calendar", svgTitle: "Calendar" })), h("div", { key: '36f01c633df5181ad6107aa158de499fafa2569f', class: "datetime-icon icon-time" }, h("tds-icon", { key: '03bb2f56e70a68c8d882bdfdce747a15d1b4cfdc', size: "20px", name: "clock", svgTitle: "Clock" })))), this.state === 'error' && (h("div", { key: '40fbf2006d5709b84468e0e05b5b51804c141923', class: "tds-datetime-helper" }, !((_b = (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.validity) === null || _b === void 0 ? void 0 : _b.badInput) && (h("div", { key: '7f2990d54c62fbef3743662b944a09aab28a8a56', class: "tds-helper" }, h("tds-icon", { key: 'cdcb11a48a1d1fc3298711ed9f3b96b6a7ecef0d', name: "error", size: "16px", svgTitle: "error" }), " ", this.helperError)), this.textInput && this.textInput.validity.badInput && (h("div", { key: '51489ac6f3dbcb31f8ff89c1544a6a17c19ab239', class: "tds-helper" }, h("tds-icon", { key: '6fb19117b7f191564ed2b1c4071500a16ea40219', name: "error", size: "16px", svgTitle: "error" }), " ", this.helperErrorInvalid)))), this.helper && this.state !== 'error' && (h("div", { key: 'a6766afd774a6219e783ec1b5e79c250b94bace2', class: "tds-datetime-helper" }, h("div", { key: 'bba762fea80aca3e14da8ac9f9f210234edd9c70', class: "tds-helper" }, this.helper)))));
}
static get watchers() { return {
"value": [{
"onValueChanged": 0
}]
}; }
};
TdsDatetime.style = datetimeCss();
export { TdsDatetime as tds_datetime };