@kelvininc/ui-components
Version:
Kelvin UI Components
79 lines (75 loc) • 4.75 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
const calendarDayCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--day-width:28px;--day-height:28px}.calendar-day{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none;width:var(--day-width);height:var(--day-height);display:flex;align-items:center;justify-content:center;background-color:transparent;color:var(--kv-neutral-4, #bebebe);user-select:none;cursor:pointer}.calendar-day:hover:not(.calendar-day--disabled):not(.calendar-day--active){background-color:rgba(var(--kv-info-rgb, 39, 110, 241), 0.16)}.calendar-day--today:not(.calendar-day--disabled){border:1px solid var(--kv-neutral-5, #707070);width:calc(var(--day-width) - 2px);height:calc(var(--day-height) - 2px)}.calendar-day--in-range:not(.calendar-day--disabled){background-color:rgba(var(--kv-info-rgb, 39, 110, 241), 0.16)}.calendar-day--active:not(.calendar-day--disabled){background-color:var(--kv-primary-dark, #103d73);color:var(--kv-neutral-2, #e5e5e5)}.calendar-day--active:not(.calendar-day--disabled):hover{background-color:rgba(var(--kv-info-rgb, 39, 110, 241), 0.16);color:var(--kv-neutral-4, #bebebe)}.calendar-day--range-start:not(.calendar-day--disabled){background-color:var(--kv-primary-dark, #103d73);color:var(--kv-neutral-2, #e5e5e5)}.calendar-day--range-end:not(.calendar-day--disabled){background-color:var(--kv-primary-dark, #103d73);color:var(--kv-neutral-2, #e5e5e5)}.calendar-day--between-dates:not(.calendar-day--disabled){background-color:rgba(var(--kv-info-rgb, 39, 110, 241), 0.16);color:var(--kv-neutral-4, #bebebe)}.calendar-day--disabled{cursor:not-allowed;color:var(--kv-neutral-5, #707070)}";
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: 'bbb19b4c68d581c0d89093b5b9d036cb981f72fd' }, h("div", { key: 'd011caf9477b14c259eb894408189c0cda9bb4b7', 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; }
}, [1, "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 };