@aqua-ds/web-components
Version:
AquaDS Web Components
52 lines (48 loc) • 3.04 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$1 } from './aq-time-picker2.js';
const aqRangeTimePickerCss = ".aq-range-time-picker-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;border-top:var(--spacing-size-basic) solid var(--color-paper-light);padding:var(--spacing-size-short) var(--spacing-size-large);background-color:var(--color-paper-lighter)}.aq-range-time-picker__item{width:100%;display:-ms-flexbox;display:flex}.aq-range-time-picker__item:first-child{-ms-flex-pack:end;justify-content:flex-end;padding-right:var(--spacing-size-short)}.aq-range-time-picker__item:last-child{-ms-flex-pack:start;justify-content:flex-start;padding-left:var(--spacing-size-moderate)}";
const AqRangeTimePicker = /*@__PURE__*/ proxyCustomElement(class AqRangeTimePicker extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.updateTime = createEvent(this, "updateTime", 7);
}
handleUpdate(value, type) {
const newValue = { ...this.value };
newValue[type] = value.detail.value;
this.updateTime.emit({
value: newValue,
type,
});
}
render() {
return (h(Host, { key: '7b565eb620315352bfa6297429e3229ca78178e0' }, h("div", { key: 'cc6894f85c1e2a168f937d92e6983d5a1baf25e8', class: "aq-range-time-picker-wrapper" }, h("div", { key: 'a6fc0c0d42b21b616e255179d6b511a60dcfd14d', class: "aq-range-time-picker__item" }, h("aq-time-picker", { key: '01e13627a31f0a48062f6cc547b3ac2b0a09b1bd', label: `${this.translations.timeWrapper.start}:`, value: this.value?.start, onChange: evt => this.handleUpdate(evt, 'start') })), h("div", { key: '00f96cf8dcb1231842464298057a362bab372ad0', class: "aq-range-time-picker__item" }, h("aq-time-picker", { key: '25116184dfee1615ca9ec95ec5d7641904c6f84b', label: `${this.translations.timeWrapper.end}:`, value: this.value?.end, onChange: evt => this.handleUpdate(evt, 'end') })))));
}
get el() { return this; }
static get style() { return aqRangeTimePickerCss; }
}, [256, "aq-range-time-picker", {
"value": [1040],
"translations": [16],
"isRange": [4, "is-range"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-range-time-picker", "aq-time-picker"];
components.forEach(tagName => { switch (tagName) {
case "aq-range-time-picker":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqRangeTimePicker);
}
break;
case "aq-time-picker":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { AqRangeTimePicker as A, defineCustomElement as d };