@kelvininc/ui-components
Version:
Kelvin UI Components
303 lines (302 loc) • 10.6 kB
JavaScript
import { Host, h } from "@stencil/core";
/**
* @part day-container - The day button container.
*/
export class KvCalendarDay {
constructor() {
/** @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 is() { return "kv-calendar-day"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["calendar-day.scss"]
};
}
static get styleUrls() {
return {
"$": ["calendar-day.css"]
};
}
static get properties() {
return {
"day": {
"type": "number",
"attribute": "day",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) Calendar day"
},
"getter": false,
"setter": false,
"reflect": true
},
"disabled": {
"type": "boolean",
"attribute": "disabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true`, the day is disabled"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"active": {
"type": "boolean",
"attribute": "active",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true`, the day is with active"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"inRange": {
"type": "boolean",
"attribute": "in-range",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true`, the day is in range from a start date to the current hovered day"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"isRangeStartDate": {
"type": "boolean",
"attribute": "is-range-start-date",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the day is the start of the range"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"isRangeEndDate": {
"type": "boolean",
"attribute": "is-range-end-date",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the day is the end of the range"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"isToday": {
"type": "boolean",
"attribute": "is-today",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true`, the day is the day of `today`date"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"isBetweenSelectedDates": {
"type": "boolean",
"attribute": "is-between-selected-dates",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true`, the day is between to selected dates"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
}
};
}
static get events() {
return [{
"method": "clickDay",
"name": "clickDay",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when day button is clicked"
},
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
}
}, {
"method": "mouseEnterDay",
"name": "mouseEnterDay",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when day button is mouse enter"
},
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
}
}, {
"method": "mouseLeaveDay",
"name": "mouseLeaveDay",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when day button is mouse leave"
},
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
}
}];
}
}