@dile/utils 3.0.30 → 3.0.32
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.
|
@@ -17,7 +17,7 @@ describe('dile-datepicker', () => {
|
|
|
17
17
|
const el = await renderDatepicker('<dile-datepicker name="birthdate" label="Birthdate"></dile-datepicker>');
|
|
18
18
|
expect(el.shadowRoot.querySelector('input')).toBeTruthy();
|
|
19
19
|
expect(el.shadowRoot.querySelector('dile-menu-overlay')).toBeTruthy();
|
|
20
|
-
expect(el.shadowRoot.querySelector('dile-
|
|
20
|
+
expect(el.shadowRoot.querySelector('dile-iconlib')).toBeTruthy();
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
it('updates value when a date is selected from the calendar', async () => {
|
|
@@ -13,9 +13,11 @@ describe('dile-datetimepicker', () => {
|
|
|
13
13
|
return el;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
it('renders the text input, calendar and time picker inside the overlay', async () => {
|
|
16
|
+
it('renders the text input, trigger icon, calendar and time picker inside the overlay', async () => {
|
|
17
17
|
const el = await renderDatetimepicker('<dile-datetimepicker name="appointment"></dile-datetimepicker>');
|
|
18
18
|
expect(el.shadowRoot.querySelector('input')).toBeTruthy();
|
|
19
|
+
expect(el.shadowRoot.querySelector('dile-iconlib')).toBeTruthy();
|
|
20
|
+
expect(el.icon).toBe('lucide.calendar-clock');
|
|
19
21
|
expect(el.shadowRoot.querySelector('dile-calendar')).toBeTruthy();
|
|
20
22
|
expect(el.shadowRoot.querySelector('dile-time-picker')).toBeTruthy();
|
|
21
23
|
});
|
|
@@ -1,72 +1,64 @@
|
|
|
1
|
-
import { html, css
|
|
2
|
-
import {
|
|
3
|
-
import '@dile/
|
|
4
|
-
import { calendarIcon } from '@dile/icons/index.js';
|
|
1
|
+
import { html, css } from "lit";
|
|
2
|
+
import { DileInputIcon } from '@dile/ui/components/input/index.js';
|
|
3
|
+
import '@dile/iconlib/lucide-icons/calendar.js';
|
|
5
4
|
import '@dile/ui/components/menu-overlay/menu-overlay.js';
|
|
6
5
|
|
|
7
6
|
import {
|
|
8
7
|
formatDate,
|
|
9
8
|
} from '@lion/ui/localize.js';
|
|
10
9
|
|
|
11
|
-
export class DileDatepicker extends
|
|
10
|
+
export class DileDatepicker extends DileInputIcon {
|
|
12
11
|
static get styles() {
|
|
13
12
|
return [
|
|
14
13
|
super.styles,
|
|
15
14
|
css`
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
gap: 0.75rem;
|
|
20
|
-
}
|
|
21
|
-
section.input {
|
|
22
|
-
flex-grow: 1;
|
|
23
|
-
}
|
|
24
|
-
.icon-container {
|
|
25
|
-
margin-top: var(--icon-container-margin-top, 0.5rem);
|
|
26
|
-
}
|
|
27
|
-
dile-icon {
|
|
28
|
-
cursor: pointer;
|
|
29
|
-
--dile-icon-size: var(--dile-datepicker-trigger-size, 36px);
|
|
30
|
-
}
|
|
31
|
-
dile-calendar {
|
|
32
|
-
font-size: var(--dile-datepicker-font-size, 0.9rem);
|
|
33
|
-
}
|
|
34
|
-
dile-menu-overlay {
|
|
35
|
-
--dile-menu-overlay-width: var(--dile-datepicker-width, 280px);
|
|
36
|
-
}
|
|
37
|
-
dile-icon {
|
|
38
|
-
--dile-icon-color: var(--dile-datepicker-trigger-color, #39c);
|
|
39
|
-
}
|
|
40
|
-
dile-icon.trigger-disabled {
|
|
41
|
-
--dile-icon-color: var(--dile-datepicker-trigger-disabled-color, #ccc);
|
|
42
|
-
}
|
|
43
|
-
span {
|
|
44
|
-
display: flex;
|
|
45
|
-
margin-bottom: var(--dile-datepicker-trigger-margin-bottom, 0.2em);
|
|
46
|
-
}
|
|
47
|
-
@media(min-width: 350px) {
|
|
15
|
+
dile-calendar {
|
|
16
|
+
font-size: var(--dile-datepicker-font-size, 0.9rem);
|
|
17
|
+
}
|
|
48
18
|
dile-menu-overlay {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
--dile-
|
|
62
|
-
--dile-
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
--dile-menu-overlay-width: var(--dile-datepicker-width, 280px);
|
|
22
|
+
--dile-menu-overlay-max-width: var(--dile-datepicker-width, 280px);
|
|
23
|
+
}
|
|
24
|
+
.trigger-container {
|
|
25
|
+
display: flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
}
|
|
28
|
+
.input-icon-btn {
|
|
29
|
+
--dile-input-icon-color: var(--dile-datepicker-trigger-color, var(--dile-on-background-color, #303030));
|
|
30
|
+
--dile-input-icon-size: var(--dile-datepicker-trigger-size, 20px);
|
|
31
|
+
--dile-input-icon-background-color: var(--dile-datepicker-trigger-background-color, transparent);
|
|
32
|
+
--dile-input-icon-hover-background-color: var(--dile-datepicker-trigger-hover-background-color, var(--dile-input-icon-hover-bg, rgba(0, 0, 0, 0.05)));
|
|
33
|
+
}
|
|
34
|
+
.input-icon-btn:disabled {
|
|
35
|
+
--dile-input-icon-color: var(--dile-datepicker-trigger-disabled-color, #ccc);
|
|
36
|
+
}
|
|
37
|
+
@media(min-width: 350px) {
|
|
38
|
+
dile-menu-overlay {
|
|
39
|
+
--dile-menu-overlay-width: var(--dile-datepicker-width, 300px);
|
|
40
|
+
--dile-menu-overlay-max-width: var(--dile-datepicker-width, 300px);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
@media(min-width: 450px) {
|
|
44
|
+
dile-menu-overlay {
|
|
45
|
+
--dile-menu-overlay-width: var(--dile-datepicker-width, 320px);
|
|
46
|
+
--dile-menu-overlay-max-width: var(--dile-datepicker-width, 320px);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
@media(min-width: 500px) {
|
|
50
|
+
dile-menu-overlay {
|
|
51
|
+
--dile-menu-overlay-width: var(--dile-datepicker-width, 350px);
|
|
52
|
+
--dile-menu-overlay-max-width: var(--dile-datepicker-width, 350px);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
`
|
|
56
|
+
];
|
|
66
57
|
}
|
|
67
58
|
|
|
68
59
|
static get properties() {
|
|
69
60
|
return {
|
|
61
|
+
...super.properties,
|
|
70
62
|
firstDayOfWeek: { type: Number },
|
|
71
63
|
horizontalAlign: { type: String },
|
|
72
64
|
verticalAlign: { type: String },
|
|
@@ -77,6 +69,7 @@ export class DileDatepicker extends DileInput {
|
|
|
77
69
|
|
|
78
70
|
constructor() {
|
|
79
71
|
super();
|
|
72
|
+
this.icon = 'lucide.calendar';
|
|
80
73
|
this.firstDayOfWeek = 0;
|
|
81
74
|
this.horizontalAlign = 'under_right';
|
|
82
75
|
this.verticalAlign = 'center';
|
|
@@ -84,37 +77,25 @@ export class DileDatepicker extends DileInput {
|
|
|
84
77
|
this.moveLeft = 0;
|
|
85
78
|
}
|
|
86
79
|
|
|
87
|
-
|
|
88
|
-
|
|
80
|
+
renderIconButton() {
|
|
81
|
+
if (this.disabled) {
|
|
82
|
+
return super.renderIconButton();
|
|
83
|
+
}
|
|
89
84
|
return html`
|
|
90
|
-
<
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
}
|
|
103
|
-
<span class="icon-container">
|
|
104
|
-
${this.disabled
|
|
105
|
-
? html`<dile-icon class="trigger-disabled" .icon="${calendarIcon}"></dile-icon>`
|
|
106
|
-
: html`
|
|
107
|
-
<dile-menu-overlay moveTop="${this.moveTop}" moveLeft="${this.moveLeft}" verticalAlign="${this.verticalAlign}" horizontalAlign="${this.horizontalAlign}" id="menu">
|
|
108
|
-
${this.iconTemplate}
|
|
109
|
-
<div slot="content" class="calendar">
|
|
110
|
-
${this.contentTemplate}
|
|
111
|
-
</div>
|
|
112
|
-
</dile-menu-overlay>
|
|
113
|
-
`
|
|
114
|
-
}
|
|
115
|
-
</span>
|
|
85
|
+
<dile-menu-overlay
|
|
86
|
+
moveTop="${this.moveTop}"
|
|
87
|
+
moveLeft="${this.moveLeft}"
|
|
88
|
+
verticalAlign="${this.verticalAlign}"
|
|
89
|
+
horizontalAlign="${this.horizontalAlign}"
|
|
90
|
+
id="menu"
|
|
91
|
+
>
|
|
92
|
+
<div slot="trigger" class="trigger-container">
|
|
93
|
+
${super.renderIconButton()}
|
|
94
|
+
</div>
|
|
95
|
+
<div slot="content" class="calendar">
|
|
96
|
+
${this.contentTemplate}
|
|
116
97
|
</div>
|
|
117
|
-
</
|
|
98
|
+
</dile-menu-overlay>
|
|
118
99
|
`;
|
|
119
100
|
}
|
|
120
101
|
|
|
@@ -124,10 +105,6 @@ export class DileDatepicker extends DileInput {
|
|
|
124
105
|
this.shadowRoot.getElementById('menu').close();
|
|
125
106
|
}
|
|
126
107
|
|
|
127
|
-
get iconTemplate() {
|
|
128
|
-
return html`<dile-icon .icon="${calendarIcon}" slot="trigger"></dile-icon>`
|
|
129
|
-
}
|
|
130
|
-
|
|
131
108
|
get contentTemplate() {
|
|
132
109
|
return html`
|
|
133
110
|
<dile-calendar
|
|
@@ -135,6 +112,6 @@ export class DileDatepicker extends DileInput {
|
|
|
135
112
|
.firstDayOfWeek="${this.firstDayOfWeek}"
|
|
136
113
|
@user-selected-date-changed=${this.showDate}
|
|
137
114
|
></dile-calendar>
|
|
138
|
-
|
|
115
|
+
`;
|
|
139
116
|
}
|
|
140
117
|
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { html, css } from 'lit';
|
|
2
2
|
import { DileDatepicker } from './DileDatepicker.js';
|
|
3
|
-
import
|
|
3
|
+
import '@dile/iconlib/lucide-icons/calendar-clock.js';
|
|
4
4
|
import '@dile/ui/components/time-picker/time-picker.js';
|
|
5
|
+
import '@dile/ui/components/icon/icon.js';
|
|
5
6
|
import { doneIcon } from '@dile/icons';
|
|
6
7
|
|
|
7
8
|
function formatToIsoOnlyDate(date) {
|
|
@@ -61,8 +62,10 @@ export class DileDatetimepicker extends DileDatepicker {
|
|
|
61
62
|
}
|
|
62
63
|
`];
|
|
63
64
|
}
|
|
64
|
-
|
|
65
|
-
|
|
65
|
+
|
|
66
|
+
constructor() {
|
|
67
|
+
super();
|
|
68
|
+
this.icon = 'lucide.calendar-clock';
|
|
66
69
|
}
|
|
67
70
|
|
|
68
71
|
get contentTemplate() {
|
|
@@ -80,7 +83,7 @@ export class DileDatetimepicker extends DileDatepicker {
|
|
|
80
83
|
<dile-icon rounded .icon=${doneIcon} @click=${this.acceptTime}></dile-icon>
|
|
81
84
|
</div>
|
|
82
85
|
</div>
|
|
83
|
-
|
|
86
|
+
`;
|
|
84
87
|
}
|
|
85
88
|
|
|
86
89
|
get eltime() {
|
|
@@ -92,7 +95,7 @@ export class DileDatetimepicker extends DileDatepicker {
|
|
|
92
95
|
}
|
|
93
96
|
|
|
94
97
|
showDateHandler(e) {
|
|
95
|
-
this.showDate(e.detail.selectedDate)
|
|
98
|
+
this.showDate(e.detail.selectedDate);
|
|
96
99
|
}
|
|
97
100
|
|
|
98
101
|
showDate(selectedDate) {
|
|
@@ -101,6 +104,7 @@ export class DileDatetimepicker extends DileDatepicker {
|
|
|
101
104
|
this.value = `${date} ${time}`;
|
|
102
105
|
this.elmenu.close();
|
|
103
106
|
}
|
|
107
|
+
|
|
104
108
|
acceptTime() {
|
|
105
109
|
let date = this.shadowRoot.querySelector('dile-calendar').selectedDate;
|
|
106
110
|
if(!date) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dile/utils",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.32",
|
|
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": {
|
|
@@ -20,7 +20,8 @@
|
|
|
20
20
|
},
|
|
21
21
|
"homepage": "https://dile-components.com/",
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@dile/
|
|
23
|
+
"@dile/iconlib": "^1.8.1",
|
|
24
|
+
"@dile/ui": "^3.6.5",
|
|
24
25
|
"@lion/ui": "^0.11.2",
|
|
25
26
|
"linkify-string": "^4.1.3",
|
|
26
27
|
"linkifyjs": "^4.1.3",
|
|
@@ -29,5 +30,5 @@
|
|
|
29
30
|
"publishConfig": {
|
|
30
31
|
"access": "public"
|
|
31
32
|
},
|
|
32
|
-
"gitHead": "
|
|
33
|
+
"gitHead": "ee029c01956874746ff8c78f02f4868ef4ce4875"
|
|
33
34
|
}
|