@limetech/lime-elements
Version:
294 lines (293 loc) • 10.4 kB
JavaScript
import { h } from "@stencil/core";
import translate from "../../../global/translations";
import { DatePicker as DateOnlyPicker } from "../pickers/date-picker";
import { DatetimePicker } from "../pickers/datetime-picker";
import { MonthPicker } from "../pickers/month-picker";
import { QuarterPicker } from "../pickers/quarter-picker";
import { TimePicker } from "../pickers/time-picker";
import { WeekPicker } from "../pickers/week-picker";
import { YearPicker } from "../pickers/year-picker";
/**
* This component is internal and only supposed to be used by
* the limel-date-picker. This component is needed in order for us
* to render the flatpickr calendar in a portal.
*
* @private
*/
export class DatePickerCalendar {
constructor() {
/**
* Type of date picker.
*/
this.type = 'datetime';
/**
* Defines the localisation for translations and date formatting.
* Property `format` customizes the localized date format.
*/
this.language = 'en';
this.flatPickrCreated = false;
}
componentWillLoad() {
switch (this.type) {
case 'date': {
this.picker = new DateOnlyPicker(this.language, this.change, this.format);
break;
}
case 'time': {
this.picker = new TimePicker(this.language, this.change, this.format);
break;
}
case 'week': {
this.picker = new WeekPicker(this.language, this.change, this.format);
break;
}
case 'month': {
this.picker = new MonthPicker(this.language, this.change, translate, this.format);
break;
}
case 'quarter': {
this.picker = new QuarterPicker(this.language, this.change, translate, this.format);
break;
}
case 'year': {
this.picker = new YearPicker(this.language, this.change, translate, this.format);
break;
}
default: {
this.picker = new DatetimePicker(this.language, this.change, this.format);
break;
}
}
if (this.formatter) {
this.picker.formatter = this.formatter;
}
}
componentDidUpdate() {
if (!this.flatPickrCreated) {
this.createFlatpickr();
}
else if (!this.isOpen) {
this.picker.setValue(this.value);
}
}
createFlatpickr() {
var _a, _b;
if (!this.inputElement) {
// The input element is programatically set on this element
// after its been rendered.
return;
}
if (!this.isOpen ||
((_b = (_a = this.container).checkVisibility) === null || _b === void 0 ? void 0 : _b.call(_a)) === false) {
return;
}
this.picker.init(this.inputElement, this.container, this.value);
this.flatPickrCreated = true;
}
disconnectedCallback() {
this.picker.destroy();
this.flatPickrCreated = false;
}
render() {
return (h("div", { key: '95bd84a535e4bcbf91a356e47b2fbaf440daf15d', class: "container", ref: (el) => (this.container = el), style: {
'--today-label': `"${translate.get('date-picker.today')}"`,
} }));
}
static get is() { return "limel-flatpickr-adapter"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["flatpickr-adapter.scss"]
};
}
static get styleUrls() {
return {
"$": ["flatpickr-adapter.css"]
};
}
static get properties() {
return {
"value": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Date",
"resolved": "Date",
"references": {
"Date": {
"location": "global",
"id": "global::Date"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The value of the field."
},
"getter": false,
"setter": false
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "DateType",
"resolved": "\"date\" | \"datetime\" | \"month\" | \"quarter\" | \"time\" | \"week\" | \"year\"",
"references": {
"DateType": {
"location": "import",
"path": "../../date-picker/date.types",
"id": "src/components/date-picker/date.types.ts::DateType",
"referenceLocation": "DateType"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Type of date picker."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "type",
"defaultValue": "'datetime'"
},
"format": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Format to display the selected date in."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "format"
},
"isOpen": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` if the calendar should be open."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "is-open"
},
"inputElement": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "HTMLElement",
"resolved": "HTMLElement",
"references": {
"HTMLElement": {
"location": "global",
"id": "global::HTMLElement"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The native input element to use with flatpickr."
},
"getter": false,
"setter": false
},
"language": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Languages",
"resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
"references": {
"Languages": {
"location": "import",
"path": "../../date-picker/date.types",
"id": "src/components/date-picker/date.types.ts::Languages",
"referenceLocation": "Languages"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the localisation for translations and date formatting.\nProperty `format` customizes the localized date format."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "language",
"defaultValue": "'en'"
},
"formatter": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "(date: Date) => string",
"resolved": "(date: Date) => string",
"references": {
"Date": {
"location": "global",
"id": "global::Date"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false
}
};
}
static get events() {
return [{
"method": "change",
"name": "change",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the date picker value is changed."
},
"complexType": {
"original": "Date",
"resolved": "Date",
"references": {
"Date": {
"location": "global",
"id": "global::Date"
}
}
}
}];
}
}