@kelvininc/ui-components
Version:
Kelvin UI Components
79 lines (75 loc) • 4.84 kB
JavaScript
import { H as proxyCustomElement, I as H, J as createEvent, K as h, L as Host } from './p-BP5CxQcH.js';
const calendarDayCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--day-width:28px;--day-height:28px}.calendar-day{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;width:var(--day-width);height:var(--day-height);display:flex;align-items:center;justify-content:center;background-color:transparent;color:var(--text-container-neutral-subtle);user-select:none;cursor:pointer}.calendar-day:hover:not(.calendar-day--disabled):not(.calendar-day--active){background-color:var(--background-interactive-calendar-hover)}.calendar-day--today:not(.calendar-day--disabled){border:1px solid var(--border-container-neutral-subtlest);width:calc(var(--day-width) - 2px);height:calc(var(--day-height) - 2px)}.calendar-day--in-range:not(.calendar-day--disabled){background-color:var(--background-interactive-calendar-selected-middle)}.calendar-day--active:not(.calendar-day--disabled){background-color:var(--background-interactive-calendar-selected);color:var(--text-container-neutral-default)}.calendar-day--active:not(.calendar-day--disabled):hover{background-color:var(--background-interactive-calendar-hover);color:var(--text-container-neutral-subtle)}.calendar-day--range-start:not(.calendar-day--disabled){background-color:var(--background-interactive-calendar-selected);color:var(--text-container-neutral-default)}.calendar-day--range-end:not(.calendar-day--disabled){background-color:var(--background-interactive-calendar-selected);color:var(--text-container-neutral-default)}.calendar-day--between-dates:not(.calendar-day--disabled){background-color:var(--background-interactive-calendar-hover);color:var(--text-container-neutral-subtle)}.calendar-day--disabled{cursor:not-allowed;color:var(--text-container-neutral-disabled)}";
const KvCalendarDay = /*@__PURE__*/ proxyCustomElement(class KvCalendarDay extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.clickDay = createEvent(this, "clickDay", 7);
this.mouseEnterDay = createEvent(this, "mouseEnterDay", 7);
this.mouseLeaveDay = createEvent(this, "mouseLeaveDay", 7);
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.active = false;
/** @inheritdoc */
this.inRange = false;
/** @inheritdoc */
this.isRangeStartDate = false;
/** @inheritdoc */
this.isRangeEndDate = false;
/** @inheritdoc */
this.isToday = false;
/** @inheritdoc */
this.isBetweenSelectedDates = false;
this.onClickDay = () => {
if (this.disabled) {
return;
}
this.clickDay.emit(this.day);
};
this.onMouseEnterDay = () => {
this.mouseEnterDay.emit(this.day);
};
this.onMouseLeaveDay = () => {
this.mouseLeaveDay.emit(this.day);
};
}
render() {
return (h(Host, { key: '6074d9d6678ce58f1e7f60188e3b51d737c2730e' }, h("div", { key: '8447c6c1d26da0d615acacb18a79db21c343d18a', onClick: this.onClickDay, class: {
'calendar-day': true,
'calendar-day--disabled': this.disabled,
'calendar-day--active': this.active,
'calendar-day--in-range': this.inRange,
'calendar-day--today': this.isToday,
'calendar-day--range-start': this.isRangeStartDate,
'calendar-day--range-end': this.isRangeEndDate,
'calendar-day--between-dates': this.isBetweenSelectedDates
}, onMouseEnter: this.onMouseEnterDay, onMouseLeave: this.onMouseLeaveDay, part: "day-container" }, this.day)));
}
static get style() { return calendarDayCss; }
}, [257, "kv-calendar-day", {
"day": [514],
"disabled": [516],
"active": [516],
"inRange": [4, "in-range"],
"isRangeStartDate": [4, "is-range-start-date"],
"isRangeEndDate": [4, "is-range-end-date"],
"isToday": [4, "is-today"],
"isBetweenSelectedDates": [4, "is-between-selected-dates"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-calendar-day"];
components.forEach(tagName => { switch (tagName) {
case "kv-calendar-day":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvCalendarDay);
}
break;
} });
}
defineCustomElement();
export { KvCalendarDay as K, defineCustomElement as d };