@limetech/lime-elements 37.65.11 → 37.65.12
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 +9 -0
- package/dist/cjs/limel-flatpickr-adapter.cjs.entry.js +4 -25
- package/dist/cjs/limel-flatpickr-adapter.cjs.entry.js.map +1 -1
- package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.js +4 -25
- package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.js.map +1 -1
- package/dist/esm/limel-flatpickr-adapter.entry.js +4 -25
- 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-0c1a1843.entry.js} +3 -3
- package/dist/lime-elements/p-0c1a1843.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
|
@@ -59,28 +59,6 @@ export class DatePickerCalendar {
|
|
|
59
59
|
else if (!this.isOpen) {
|
|
60
60
|
this.picker.setValue(this.value);
|
|
61
61
|
}
|
|
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
62
|
}
|
|
85
63
|
createFlatpickr() {
|
|
86
64
|
if (!this.inputElement) {
|
|
@@ -88,14 +66,15 @@ export class DatePickerCalendar {
|
|
|
88
66
|
// after its been rendered.
|
|
89
67
|
return;
|
|
90
68
|
}
|
|
69
|
+
if (!this.isOpen || !this.container.checkVisibility()) {
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
91
72
|
this.picker.init(this.inputElement, this.container, this.value);
|
|
92
73
|
this.flatPickrCreated = true;
|
|
93
74
|
}
|
|
94
|
-
destroyFlatpickr() {
|
|
95
|
-
this.picker.destroy();
|
|
96
|
-
}
|
|
97
75
|
disconnectedCallback() {
|
|
98
76
|
this.picker.destroy();
|
|
77
|
+
this.flatPickrCreated = false;
|
|
99
78
|
}
|
|
100
79
|
render() {
|
|
101
80
|
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;EAC3C,CAAC;EAEM,kBAAkB;IACrB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;MACxB,IAAI,CAAC,eAAe,EAAE,CAAC;KAC1B;SAAM,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;MACrB,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACpC;
|
|
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 this.picker.formatter = this.formatter;\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"]}
|
|
@@ -7620,28 +7620,6 @@ const DatePickerCalendar = class {
|
|
|
7620
7620
|
else if (!this.isOpen) {
|
|
7621
7621
|
this.picker.setValue(this.value);
|
|
7622
7622
|
}
|
|
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
7623
|
}
|
|
7646
7624
|
createFlatpickr() {
|
|
7647
7625
|
if (!this.inputElement) {
|
|
@@ -7649,14 +7627,15 @@ const DatePickerCalendar = class {
|
|
|
7649
7627
|
// after its been rendered.
|
|
7650
7628
|
return;
|
|
7651
7629
|
}
|
|
7630
|
+
if (!this.isOpen || !this.container.checkVisibility()) {
|
|
7631
|
+
return;
|
|
7632
|
+
}
|
|
7652
7633
|
this.picker.init(this.inputElement, this.container, this.value);
|
|
7653
7634
|
this.flatPickrCreated = true;
|
|
7654
7635
|
}
|
|
7655
|
-
destroyFlatpickr() {
|
|
7656
|
-
this.picker.destroy();
|
|
7657
|
-
}
|
|
7658
7636
|
disconnectedCallback() {
|
|
7659
7637
|
this.picker.destroy();
|
|
7638
|
+
this.flatPickrCreated = false;
|
|
7660
7639
|
}
|
|
7661
7640
|
render() {
|
|
7662
7641
|
return (h("div", { class: "container", ref: (el) => (this.container = el), style: {
|