@dile/utils 3.0.34 → 3.0.36
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.
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { html, css } from "lit";
|
|
2
2
|
import { DileInputIcon } from '@dile/ui/components/input/index.js';
|
|
3
|
+
import { DileCloseOnEscPressed } from '@dile/ui/mixins/close-on-esc-pressed';
|
|
3
4
|
import '@dile/iconlib/lucide-icons/calendar.js';
|
|
4
5
|
import '@dile/ui/components/menu-overlay/menu-overlay.js';
|
|
5
6
|
|
|
@@ -7,7 +8,7 @@ import {
|
|
|
7
8
|
formatDate,
|
|
8
9
|
} from '@lion/ui/localize.js';
|
|
9
10
|
|
|
10
|
-
export class DileDatepicker extends DileInputIcon {
|
|
11
|
+
export class DileDatepicker extends DileCloseOnEscPressed(DileInputIcon) {
|
|
11
12
|
static get styles() {
|
|
12
13
|
return [
|
|
13
14
|
super.styles,
|
|
@@ -64,6 +65,7 @@ export class DileDatepicker extends DileInputIcon {
|
|
|
64
65
|
verticalAlign: { type: String },
|
|
65
66
|
moveTop: { type: Number },
|
|
66
67
|
moveLeft: { type: Number },
|
|
68
|
+
opened: { type: Boolean },
|
|
67
69
|
};
|
|
68
70
|
}
|
|
69
71
|
|
|
@@ -75,6 +77,7 @@ export class DileDatepicker extends DileInputIcon {
|
|
|
75
77
|
this.verticalAlign = 'center';
|
|
76
78
|
this.moveTop = 0;
|
|
77
79
|
this.moveLeft = 0;
|
|
80
|
+
this.opened = false;
|
|
78
81
|
}
|
|
79
82
|
|
|
80
83
|
renderIconButton() {
|
|
@@ -88,6 +91,8 @@ export class DileDatepicker extends DileInputIcon {
|
|
|
88
91
|
verticalAlign="${this.verticalAlign}"
|
|
89
92
|
horizontalAlign="${this.horizontalAlign}"
|
|
90
93
|
id="menu"
|
|
94
|
+
@overlay-opened="${this.overlayOpenedHandler}"
|
|
95
|
+
@overlay-closed="${this.overlayClosedHandler}"
|
|
91
96
|
>
|
|
92
97
|
<div slot="trigger" class="trigger-container">
|
|
93
98
|
${super.renderIconButton()}
|
|
@@ -99,11 +104,40 @@ export class DileDatepicker extends DileInputIcon {
|
|
|
99
104
|
`;
|
|
100
105
|
}
|
|
101
106
|
|
|
107
|
+
overlayOpenedHandler() {
|
|
108
|
+
this.opened = true;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
overlayClosedHandler() {
|
|
112
|
+
this.opened = false;
|
|
113
|
+
}
|
|
114
|
+
|
|
102
115
|
showDate(e) {
|
|
103
116
|
let date = formatDate(e.detail.selectedDate);
|
|
104
117
|
this.value = date;
|
|
105
|
-
this.shadowRoot.getElementById('menu')
|
|
106
|
-
|
|
118
|
+
const menu = this.shadowRoot.getElementById('menu');
|
|
119
|
+
if (menu) {
|
|
120
|
+
menu.close();
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
close() {
|
|
125
|
+
const menu = this.shadowRoot.getElementById('menu');
|
|
126
|
+
if (menu) {
|
|
127
|
+
menu.close();
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
openDatepicker() {
|
|
132
|
+
const menu = this.shadowRoot.getElementById('menu');
|
|
133
|
+
if (menu) {
|
|
134
|
+
menu.open();
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
closeDatepicker() {
|
|
139
|
+
this.close();
|
|
140
|
+
}
|
|
107
141
|
|
|
108
142
|
get contentTemplate() {
|
|
109
143
|
return html`
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dile/utils",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.36",
|
|
4
4
|
"description": "Utility Components of Diverse Uses Based on the Lit Library and Web Components Standard.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"homepage": "https://dile-components.com/",
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@dile/iconlib": "^1.8.1",
|
|
24
|
-
"@dile/ui": "^3.
|
|
24
|
+
"@dile/ui": "^3.7.0",
|
|
25
25
|
"@lion/ui": "^0.21.0",
|
|
26
26
|
"linkify-string": "^4.1.3",
|
|
27
27
|
"linkifyjs": "^4.1.3",
|
|
@@ -30,5 +30,5 @@
|
|
|
30
30
|
"publishConfig": {
|
|
31
31
|
"access": "public"
|
|
32
32
|
},
|
|
33
|
-
"gitHead": "
|
|
33
|
+
"gitHead": "62016dd8f5a9bd165131bc2058be322eb3aea339"
|
|
34
34
|
}
|