@limetech/lime-elements 37.65.11 → 37.65.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/dist/cjs/limel-flatpickr-adapter.cjs.entry.js +8 -26
- package/dist/cjs/limel-flatpickr-adapter.cjs.entry.js.map +1 -1
- package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.js +7 -26
- package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.js.map +1 -1
- package/dist/collection/components/date-picker/pickers/Picker.js +1 -0
- package/dist/collection/components/date-picker/pickers/Picker.js.map +1 -1
- package/dist/esm/limel-flatpickr-adapter.entry.js +8 -26
- package/dist/esm/limel-flatpickr-adapter.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-9c92c1db.entry.js → p-adfa2c05.entry.js} +3 -3
- package/dist/lime-elements/p-adfa2c05.entry.js.map +1 -0
- package/dist/types/components/date-picker/flatpickr-adapter/flatpickr-adapter.d.ts +0 -2
- package/package.json +3 -3
- package/dist/lime-elements/p-9c92c1db.entry.js.map +0 -1
|
@@ -50,7 +50,9 @@ export class DatePickerCalendar {
|
|
|
50
50
|
this.picker = new DatetimePicker(this.format, this.language, this.change);
|
|
51
51
|
break;
|
|
52
52
|
}
|
|
53
|
-
this.
|
|
53
|
+
if (this.formatter) {
|
|
54
|
+
this.picker.formatter = this.formatter;
|
|
55
|
+
}
|
|
54
56
|
}
|
|
55
57
|
componentDidUpdate() {
|
|
56
58
|
if (!this.flatPickrCreated) {
|
|
@@ -59,28 +61,6 @@ export class DatePickerCalendar {
|
|
|
59
61
|
else if (!this.isOpen) {
|
|
60
62
|
this.picker.setValue(this.value);
|
|
61
63
|
}
|
|
62
|
-
this.tryFixConfusingWidthBug();
|
|
63
|
-
}
|
|
64
|
-
tryFixConfusingWidthBug() {
|
|
65
|
-
// Sometimes the datepickr renders with the width set to 1px.
|
|
66
|
-
// We've not been able to understand why but believe it has
|
|
67
|
-
// to do with the internal implementation of flatpickr.
|
|
68
|
-
// The fix below is an ugly fix that seems to solve this
|
|
69
|
-
// issue for us.
|
|
70
|
-
const ONE_SECOND = 1000;
|
|
71
|
-
const TEN_PIXELS = 10;
|
|
72
|
-
if (this.isOpen) {
|
|
73
|
-
setTimeout(() => {
|
|
74
|
-
if (this.isOpen) {
|
|
75
|
-
const flatpickrElement = this.container.querySelector('div.flatpickr-calendar');
|
|
76
|
-
const { width } = flatpickrElement.getBoundingClientRect();
|
|
77
|
-
if (width < TEN_PIXELS) {
|
|
78
|
-
this.destroyFlatpickr();
|
|
79
|
-
this.createFlatpickr();
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
}, ONE_SECOND);
|
|
83
|
-
}
|
|
84
64
|
}
|
|
85
65
|
createFlatpickr() {
|
|
86
66
|
if (!this.inputElement) {
|
|
@@ -88,14 +68,15 @@ export class DatePickerCalendar {
|
|
|
88
68
|
// after its been rendered.
|
|
89
69
|
return;
|
|
90
70
|
}
|
|
71
|
+
if (!this.isOpen || !this.container.checkVisibility()) {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
91
74
|
this.picker.init(this.inputElement, this.container, this.value);
|
|
92
75
|
this.flatPickrCreated = true;
|
|
93
76
|
}
|
|
94
|
-
destroyFlatpickr() {
|
|
95
|
-
this.picker.destroy();
|
|
96
|
-
}
|
|
97
77
|
disconnectedCallback() {
|
|
98
78
|
this.picker.destroy();
|
|
79
|
+
this.flatPickrCreated = false;
|
|
99
80
|
}
|
|
100
81
|
render() {
|
|
101
82
|
return (h("div", { class: "container", ref: (el) => (this.container = el), style: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flatpickr-adapter.js","sourceRoot":"","sources":["../../../../src/components/date-picker/flatpickr-adapter/flatpickr-adapter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAExE,OAAO,SAAS,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD;;;;;;GAMG;AAMH,MAAM,OAAO,kBAAkB;;IAgDnB,qBAAgB,GAAY,KAAK,CAAC;;gBArClB,UAAU;;;;oBAyBL,IAAI;;;EAgB1B,iBAAiB;IACpB,QAAQ,IAAI,CAAC,IAAI,EAAE;MACf,KAAK,MAAM;QACP,IAAI,CAAC,MAAM,GAAG,IAAI,cAAc,CAC5B,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,MAAM,CACd,CAAC;QACF,MAAM;MAEV,KAAK,MAAM;QACP,IAAI,CAAC,MAAM,GAAG,IAAI,UAAU,CACxB,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,MAAM,CACd,CAAC;QACF,MAAM;MAEV,KAAK,MAAM;QACP,IAAI,CAAC,MAAM,GAAG,IAAI,UAAU,CACxB,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,MAAM,CACd,CAAC;QACF,MAAM;MAEV,KAAK,OAAO;QACR,IAAI,CAAC,MAAM,GAAG,IAAI,WAAW,CACzB,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,MAAM,EACX,SAAS,CACZ,CAAC;QACF,MAAM;MAEV,KAAK,SAAS;QACV,IAAI,CAAC,MAAM,GAAG,IAAI,aAAa,CAC3B,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,MAAM,EACX,SAAS,CACZ,CAAC;QACF,MAAM;MACV,KAAK,MAAM;QACP,IAAI,CAAC,MAAM,GAAG,IAAI,UAAU,CACxB,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,MAAM,EACX,SAAS,CACZ,CAAC;QACF,MAAM;MAEV,KAAK,UAAU,CAAC;MAChB;QACI,IAAI,CAAC,MAAM,GAAG,IAAI,cAAc,CAC5B,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,MAAM,CACd,CAAC;QACF,MAAM;KACb;IAED,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"flatpickr-adapter.js","sourceRoot":"","sources":["../../../../src/components/date-picker/flatpickr-adapter/flatpickr-adapter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { DateType, Languages } from '../../date-picker/date.types';\nimport translate from '../../../global/translations';\nimport { DatePicker as DateOnlyPicker } from '../pickers/DatePicker';\nimport { DatetimePicker } from '../pickers/DatetimePicker';\nimport { MonthPicker } from '../pickers/MonthPicker';\nimport { Picker } from '../pickers/Picker';\nimport { QuarterPicker } from '../pickers/QuarterPicker';\nimport { TimePicker } from '../pickers/TimePicker';\nimport { WeekPicker } from '../pickers/WeekPicker';\nimport { YearPicker } from '../pickers/YearPicker';\n\n/**\n * This component is internal and only supposed to be used by\n * the limel-date-picker. This component is needed in order for us\n * to render the flatpickr calendar in a portal.\n *\n * @private\n */\n@Component({\n tag: 'limel-flatpickr-adapter',\n shadow: true,\n styleUrl: 'flatpickr-adapter.scss',\n})\nexport class DatePickerCalendar {\n /**\n * The value of the field.\n */\n @Prop()\n public value: Date;\n\n /**\n * Type of date picker.\n */\n @Prop()\n public type: DateType = 'datetime';\n\n /**\n * Format to display the selected date in.\n */\n @Prop()\n public format: string;\n\n /**\n * Set to `true` if the calendar should be open.\n */\n @Prop()\n public isOpen: boolean;\n\n /**\n * The native input element to use with flatpickr.\n */\n @Prop()\n public inputElement: HTMLElement;\n\n /**\n * Defines the localisation for translations and date formatting.\n * Property `format` customizes the localized date format.\n */\n @Prop()\n public language: Languages = 'en';\n\n @Prop()\n public formatter!: (date: Date) => string;\n\n /**\n * Emitted when the date picker value is changed.\n */\n @Event()\n public change: EventEmitter<Date>;\n\n private picker: Picker;\n private flatPickrCreated: boolean = false;\n\n private container: HTMLElement;\n\n public componentWillLoad() {\n switch (this.type) {\n case 'date':\n this.picker = new DateOnlyPicker(\n this.format,\n this.language,\n this.change,\n );\n break;\n\n case 'time':\n this.picker = new TimePicker(\n this.format,\n this.language,\n this.change,\n );\n break;\n\n case 'week':\n this.picker = new WeekPicker(\n this.format,\n this.language,\n this.change,\n );\n break;\n\n case 'month':\n this.picker = new MonthPicker(\n this.format,\n this.language,\n this.change,\n translate,\n );\n break;\n\n case 'quarter':\n this.picker = new QuarterPicker(\n this.format,\n this.language,\n this.change,\n translate,\n );\n break;\n case 'year':\n this.picker = new YearPicker(\n this.format,\n this.language,\n this.change,\n translate,\n );\n break;\n\n case 'datetime':\n default:\n this.picker = new DatetimePicker(\n this.format,\n this.language,\n this.change,\n );\n break;\n }\n\n if (this.formatter) {\n this.picker.formatter = this.formatter;\n }\n }\n\n public componentDidUpdate() {\n if (!this.flatPickrCreated) {\n this.createFlatpickr();\n } else if (!this.isOpen) {\n this.picker.setValue(this.value);\n }\n }\n\n private createFlatpickr() {\n if (!this.inputElement) {\n // The input element is programatically set on this element\n // after its been rendered.\n return;\n }\n\n if (!this.isOpen || !this.container.checkVisibility()) {\n return;\n }\n\n this.picker.init(this.inputElement, this.container, this.value);\n this.flatPickrCreated = true;\n }\n\n public disconnectedCallback() {\n this.picker.destroy();\n this.flatPickrCreated = false;\n }\n\n public render() {\n return (\n <div\n class=\"container\"\n ref={(el) => (this.container = el)}\n style={{\n '--today-label': `\"${translate.get('date-picker.today')}\"`,\n }}\n />\n );\n }\n}\n"]}
|
|
@@ -13,6 +13,7 @@ const ARIA_DATE_FORMAT = 'F j, Y';
|
|
|
13
13
|
export class Picker {
|
|
14
14
|
constructor(dateFormat, language, change) {
|
|
15
15
|
this.change = change;
|
|
16
|
+
this.formatter = (date) => moment(date).locale(this.getMomentLang()).format(this.dateFormat);
|
|
16
17
|
this.language = 'en';
|
|
17
18
|
this.language = language;
|
|
18
19
|
const isMobile = isIOSDevice() || isAndroidDevice();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../../../src/components/date-picker/pickers/Picker.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,WAAW,CAAC;AAClC,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AAErD,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,MAAM,MAAM,eAAe,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEpE,MAAM,gBAAgB,GAAG,QAAQ,CAAC;AAElC,MAAM,OAAgB,MAAM;
|
|
1
|
+
{"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../../../src/components/date-picker/pickers/Picker.ts"],"names":[],"mappings":"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","sourcesContent":["import flatpickr from 'flatpickr';\nimport FlatpickrLanguages from 'flatpickr/dist/l10n';\nimport { EventEmitter } from '@stencil/core';\nimport 'moment/locale/da';\nimport 'moment/locale/de';\nimport 'moment/locale/fi';\nimport 'moment/locale/fr';\nimport 'moment/locale/nb';\nimport 'moment/locale/nl';\nimport 'moment/locale/sv';\nimport moment from 'moment/moment';\nimport { isAndroidDevice, isIOSDevice } from '../../../util/device';\n\nconst ARIA_DATE_FORMAT = 'F j, Y';\n\nexport abstract class Picker {\n public formatter = (date: Date) =>\n moment(date).locale(this.getMomentLang()).format(this.dateFormat);\n\n protected dateFormat: string;\n protected language: string = 'en';\n\n protected flatpickr: flatpickr.Instance;\n protected nativePicker: boolean;\n\n public constructor(\n dateFormat: string,\n language: string,\n protected change: EventEmitter<Date>,\n ) {\n this.language = language;\n const isMobile = isIOSDevice() || isAndroidDevice();\n this.nativePicker = isMobile;\n if (dateFormat) {\n this.dateFormat = dateFormat;\n }\n\n this.getWeek = this.getWeek.bind(this);\n this.handleClose = this.handleClose.bind(this);\n this.handleOnClose = this.handleOnClose.bind(this);\n this.getFlatpickrLang = this.getFlatpickrLang.bind(this);\n }\n\n public init(element: HTMLElement, container: HTMLElement, value?: Date) {\n const config: flatpickr.Options.Options = {\n clickOpens: this.nativePicker,\n disableMobile: !this.nativePicker,\n formatDate: this.nativePicker ? undefined : this.formatDate,\n appendTo: container,\n onClose: this.handleOnClose,\n defaultDate: value,\n onValueUpdate: this.handleClose,\n inline: !this.nativePicker,\n locale:\n FlatpickrLanguages[this.getFlatpickrLang()] ||\n FlatpickrLanguages.en,\n getWeek: this.getWeek,\n ...this.getConfig(this.nativePicker),\n };\n\n // Week numbers designate weeks as starting with Monday and\n // ending with Sunday. To make the week numbers make sense,\n // the calendar has to show weeks in the same way.\n (config.locale as flatpickr.CustomLocale).firstDayOfWeek = 1;\n\n this.flatpickr = flatpickr(element, config) as flatpickr.Instance;\n }\n\n public setValue(value: Date) {\n this.flatpickr.setDate(value, false);\n }\n\n public redraw() {\n this.flatpickr.redraw();\n }\n\n public destroy() {\n if (!this.flatpickr) {\n return;\n }\n\n this.flatpickr.destroy();\n }\n\n public abstract getConfig(\n useNativePicker: boolean,\n ): flatpickr.Options.Options;\n\n protected handleClose(selectedDates): Promise<any> {\n return new Promise((resolve) => {\n setTimeout(() => {\n const pickerDate = this.getPickerDate(selectedDates);\n this.change.emit(pickerDate);\n resolve(pickerDate);\n }, 0);\n });\n }\n\n protected getFlatpickrLang() {\n if (this.language === 'nb') {\n return 'no';\n }\n\n return this.language;\n }\n\n protected getMomentLang() {\n if (this.language === 'no') {\n return 'nb';\n }\n\n return this.language;\n }\n\n private getPickerDate(selectedDates) {\n return selectedDates[0] ? new Date(selectedDates[0].toJSON()) : null;\n }\n\n private get formatDate() {\n const longDateFormat = new Intl.DateTimeFormat(this.language, {\n dateStyle: 'long',\n });\n\n return (date: Date | null, format: string): string => {\n if (!date) {\n return '';\n }\n\n if (format === ARIA_DATE_FORMAT) {\n return longDateFormat.format(date);\n }\n\n return this.formatter(date);\n };\n }\n\n private getWeek(date) {\n return moment(date).isoWeek();\n }\n\n private handleOnClose() {\n this.flatpickr.element.focus();\n }\n}\n"]}
|
|
@@ -6465,6 +6465,7 @@ const ARIA_DATE_FORMAT = 'F j, Y';
|
|
|
6465
6465
|
class Picker {
|
|
6466
6466
|
constructor(dateFormat, language, change) {
|
|
6467
6467
|
this.change = change;
|
|
6468
|
+
this.formatter = (date) => moment(date).locale(this.getMomentLang()).format(this.dateFormat);
|
|
6468
6469
|
this.language = 'en';
|
|
6469
6470
|
this.language = language;
|
|
6470
6471
|
const isMobile = isIOSDevice() || isAndroidDevice();
|
|
@@ -7611,7 +7612,9 @@ const DatePickerCalendar = class {
|
|
|
7611
7612
|
this.picker = new DatetimePicker(this.format, this.language, this.change);
|
|
7612
7613
|
break;
|
|
7613
7614
|
}
|
|
7614
|
-
this.
|
|
7615
|
+
if (this.formatter) {
|
|
7616
|
+
this.picker.formatter = this.formatter;
|
|
7617
|
+
}
|
|
7615
7618
|
}
|
|
7616
7619
|
componentDidUpdate() {
|
|
7617
7620
|
if (!this.flatPickrCreated) {
|
|
@@ -7620,28 +7623,6 @@ const DatePickerCalendar = class {
|
|
|
7620
7623
|
else if (!this.isOpen) {
|
|
7621
7624
|
this.picker.setValue(this.value);
|
|
7622
7625
|
}
|
|
7623
|
-
this.tryFixConfusingWidthBug();
|
|
7624
|
-
}
|
|
7625
|
-
tryFixConfusingWidthBug() {
|
|
7626
|
-
// Sometimes the datepickr renders with the width set to 1px.
|
|
7627
|
-
// We've not been able to understand why but believe it has
|
|
7628
|
-
// to do with the internal implementation of flatpickr.
|
|
7629
|
-
// The fix below is an ugly fix that seems to solve this
|
|
7630
|
-
// issue for us.
|
|
7631
|
-
const ONE_SECOND = 1000;
|
|
7632
|
-
const TEN_PIXELS = 10;
|
|
7633
|
-
if (this.isOpen) {
|
|
7634
|
-
setTimeout(() => {
|
|
7635
|
-
if (this.isOpen) {
|
|
7636
|
-
const flatpickrElement = this.container.querySelector('div.flatpickr-calendar');
|
|
7637
|
-
const { width } = flatpickrElement.getBoundingClientRect();
|
|
7638
|
-
if (width < TEN_PIXELS) {
|
|
7639
|
-
this.destroyFlatpickr();
|
|
7640
|
-
this.createFlatpickr();
|
|
7641
|
-
}
|
|
7642
|
-
}
|
|
7643
|
-
}, ONE_SECOND);
|
|
7644
|
-
}
|
|
7645
7626
|
}
|
|
7646
7627
|
createFlatpickr() {
|
|
7647
7628
|
if (!this.inputElement) {
|
|
@@ -7649,14 +7630,15 @@ const DatePickerCalendar = class {
|
|
|
7649
7630
|
// after its been rendered.
|
|
7650
7631
|
return;
|
|
7651
7632
|
}
|
|
7633
|
+
if (!this.isOpen || !this.container.checkVisibility()) {
|
|
7634
|
+
return;
|
|
7635
|
+
}
|
|
7652
7636
|
this.picker.init(this.inputElement, this.container, this.value);
|
|
7653
7637
|
this.flatPickrCreated = true;
|
|
7654
7638
|
}
|
|
7655
|
-
destroyFlatpickr() {
|
|
7656
|
-
this.picker.destroy();
|
|
7657
|
-
}
|
|
7658
7639
|
disconnectedCallback() {
|
|
7659
7640
|
this.picker.destroy();
|
|
7641
|
+
this.flatPickrCreated = false;
|
|
7660
7642
|
}
|
|
7661
7643
|
render() {
|
|
7662
7644
|
return (h("div", { class: "container", ref: (el) => (this.container = el), style: {
|