@progressive-development/pd-calendar 0.0.18 → 0.1.0
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/package.json +8 -7
- package/src/PdCalendar.js +24 -28
- package/src/PdCalendarCell.js +30 -27
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "progressive development calendar web component",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"author": "PD Progressive Development",
|
|
6
|
-
"version": "0.0
|
|
6
|
+
"version": "0.1.0",
|
|
7
7
|
"main": "index.js",
|
|
8
8
|
"module": "index.js",
|
|
9
9
|
"scripts": {
|
|
@@ -30,22 +30,23 @@
|
|
|
30
30
|
"week"
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@progressive-development/pd-icon": "^0.1.
|
|
33
|
+
"@progressive-development/pd-icon": "^0.1.9",
|
|
34
|
+
"@progressive-development/pd-shared-styles": "0.1.1",
|
|
34
35
|
"fecha": "^4.2.0",
|
|
35
|
-
"lit": "^2.0
|
|
36
|
+
"lit": "^2.2.0"
|
|
36
37
|
},
|
|
37
38
|
"devDependencies": {
|
|
38
39
|
"@custom-elements-manifest/analyzer": "^0.4.17",
|
|
39
40
|
"@open-wc/eslint-config": "^4.3.0",
|
|
40
41
|
"@open-wc/testing": "next",
|
|
41
|
-
"@web/dev-server": "^0.1.
|
|
42
|
+
"@web/dev-server": "^0.1.30",
|
|
42
43
|
"@web/dev-server-storybook": "next",
|
|
43
|
-
"@web/test-runner": "^0.13.
|
|
44
|
+
"@web/test-runner": "^0.13.27",
|
|
44
45
|
"eslint": "^7.32.0",
|
|
45
|
-
"eslint-config-prettier": "^8.
|
|
46
|
+
"eslint-config-prettier": "^8.4.0",
|
|
46
47
|
"husky": "^4.3.8",
|
|
47
48
|
"lint-staged": "^10.5.4",
|
|
48
|
-
"prettier": "^2.
|
|
49
|
+
"prettier": "^2.5.1"
|
|
49
50
|
},
|
|
50
51
|
"customElements": "custom-elements.json",
|
|
51
52
|
"eslintConfig": {
|
package/src/PdCalendar.js
CHANGED
|
@@ -7,6 +7,8 @@ import { LitElement, html, css } from 'lit';
|
|
|
7
7
|
import { format } from 'fecha';
|
|
8
8
|
import '@progressive-development/pd-icon/pd-icon.js';
|
|
9
9
|
|
|
10
|
+
import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles'
|
|
11
|
+
|
|
10
12
|
import './PdCalendarCell.js';
|
|
11
13
|
|
|
12
14
|
// todo: use existing shortnames for locale here
|
|
@@ -53,16 +55,15 @@ export class PdCalendar extends LitElement {
|
|
|
53
55
|
}
|
|
54
56
|
|
|
55
57
|
static get styles() {
|
|
56
|
-
return
|
|
58
|
+
return [
|
|
59
|
+
PDColorStyles, PDFontStyles,
|
|
60
|
+
css`
|
|
57
61
|
:host {
|
|
58
62
|
|
|
59
63
|
/* Define custom properties for calendar element */
|
|
60
64
|
--my-title-color: var(--squi-title-color, #084c61);
|
|
61
|
-
--my-day-title-bg-color: var(--squi-title-color, #084c61);
|
|
62
|
-
|
|
63
|
-
--my-primary-font: var(--squi-primary-font, Oswald);
|
|
65
|
+
--my-day-title-bg-color: var(--squi-title-color, #084c61);
|
|
64
66
|
|
|
65
|
-
--my-width: var(--pd-calendar-width, 100%);
|
|
66
67
|
--my-cell-height: var(--pd-calendar-cell-height, 70px);
|
|
67
68
|
|
|
68
69
|
display: block;
|
|
@@ -73,7 +74,7 @@ export class PdCalendar extends LitElement {
|
|
|
73
74
|
|
|
74
75
|
/* Layout Grid for the Calendar Component => Not really needed at the moment, more a test */
|
|
75
76
|
.layout-container {
|
|
76
|
-
width: var(--
|
|
77
|
+
width: var(--pd-calendar-width, 100%);
|
|
77
78
|
min-width: 220px;
|
|
78
79
|
height: 100%;
|
|
79
80
|
display: grid;
|
|
@@ -89,21 +90,16 @@ export class PdCalendar extends LitElement {
|
|
|
89
90
|
.header {
|
|
90
91
|
grid-area: header;
|
|
91
92
|
position: relative;
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
color: var(--my-title-color);
|
|
95
|
-
|
|
93
|
+
font-family: var(--pd-default-font-title-family);
|
|
94
|
+
color: var(--pd-default-font-title-col);
|
|
96
95
|
display: flex;
|
|
97
96
|
justify-content: left;
|
|
98
97
|
}
|
|
99
98
|
|
|
100
99
|
.header-main {
|
|
101
100
|
display: flex;
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
top: 50%;
|
|
105
|
-
left: 30%;
|
|
106
|
-
transform: translate(0, -50%);*/
|
|
101
|
+
align-items: center;
|
|
102
|
+
justify-content: center;
|
|
107
103
|
}
|
|
108
104
|
|
|
109
105
|
.header-icons {
|
|
@@ -135,21 +131,24 @@ export class PdCalendar extends LitElement {
|
|
|
135
131
|
grid-template-rows: minmax(10px, 30px) repeat(5, minmax(var(--my-cell-height), 1fr));
|
|
136
132
|
}
|
|
137
133
|
|
|
138
|
-
.title-week-day {
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
134
|
+
.title-week-day {
|
|
135
|
+
display: flex;
|
|
136
|
+
align-items: center;
|
|
137
|
+
justify-content: center;
|
|
138
|
+
background-color: var(--pd-calendar-week-title-bg-col, var(--pd-default-dark-col));
|
|
142
139
|
font-size: 1em;
|
|
143
140
|
font-weight: bold;
|
|
144
|
-
color:
|
|
145
|
-
font-family: var(--
|
|
141
|
+
color: var(--pd-calendar-week-title-font-col, var(--pd-default-bg-col));
|
|
142
|
+
font-family: var(--pd-default-font-title-family);
|
|
146
143
|
}
|
|
147
144
|
|
|
148
145
|
span.content-title {
|
|
146
|
+
display: flex;
|
|
147
|
+
align-items: center;
|
|
148
|
+
justify-content: center;
|
|
149
149
|
font-weight: bold;
|
|
150
|
-
font-size: 1.
|
|
150
|
+
font-size: 1.4em;
|
|
151
151
|
width: 120px;
|
|
152
|
-
text-align: center;
|
|
153
152
|
}
|
|
154
153
|
|
|
155
154
|
span.content-sub-title {
|
|
@@ -161,13 +160,10 @@ export class PdCalendar extends LitElement {
|
|
|
161
160
|
}
|
|
162
161
|
|
|
163
162
|
.arrow {
|
|
164
|
-
/* Hack */
|
|
165
|
-
padding-top: 8px;
|
|
166
163
|
cursor: pointer;
|
|
167
|
-
--pd-icon-size: 1.
|
|
168
|
-
--my-fill-color: var(--my-title-color);
|
|
164
|
+
--pd-icon-size: 1.4rem;
|
|
169
165
|
}
|
|
170
|
-
|
|
166
|
+
`];
|
|
171
167
|
}
|
|
172
168
|
|
|
173
169
|
constructor() {
|
package/src/PdCalendarCell.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { LitElement, html, css } from 'lit';
|
|
2
2
|
import { parse } from 'fecha';
|
|
3
3
|
|
|
4
|
+
import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles'
|
|
5
|
+
|
|
4
6
|
class PdCalendarCell extends LitElement {
|
|
5
7
|
/**
|
|
6
8
|
* @event select-date - fires when user clicks on a selectable cell.
|
|
@@ -38,7 +40,9 @@ class PdCalendarCell extends LitElement {
|
|
|
38
40
|
}
|
|
39
41
|
|
|
40
42
|
static get styles() {
|
|
41
|
-
return
|
|
43
|
+
return [
|
|
44
|
+
PDColorStyles, PDFontStyles,
|
|
45
|
+
css`
|
|
42
46
|
:host {
|
|
43
47
|
display: block;
|
|
44
48
|
|
|
@@ -68,25 +72,25 @@ class PdCalendarCell extends LitElement {
|
|
|
68
72
|
}
|
|
69
73
|
|
|
70
74
|
.cell-empty {
|
|
71
|
-
background-color:
|
|
75
|
+
background-color: var(--pd-calendar-cell-empty-bg-col, var(--pd-default-bg));
|
|
72
76
|
}
|
|
73
77
|
|
|
74
78
|
.cell-day {
|
|
75
79
|
position: relative;
|
|
76
80
|
/*background-image: linear-gradient(to right, rgb(51, 101, 138) , rgb(38, 76, 104)); */
|
|
77
81
|
/*box-shadow: 2px 2px 3px;*/
|
|
78
|
-
background-color: var(--
|
|
82
|
+
background-color: var(--pd-calendar-cell-day-bg-col, var(--pd-default-light-col));
|
|
79
83
|
/*border-radius: 2px 2px 2px 2px;*/
|
|
80
84
|
}
|
|
81
85
|
|
|
82
86
|
.cell-day.we {
|
|
83
|
-
background-color: var(--
|
|
87
|
+
background-color: var(--pd-calendar-cell-day-we-bg-col, var(--pd-default-disabled-light-col));
|
|
84
88
|
}
|
|
85
89
|
|
|
86
90
|
.free {
|
|
87
91
|
/*background-image: linear-gradient(to right, green, darkgreen);
|
|
88
92
|
background-color: var(--my-info-cell-bg1-color);*/
|
|
89
|
-
background-color: var(--
|
|
93
|
+
background-color: var(--pd-calendar-cell-day-free-bg-col, var(--pd-default-col));
|
|
90
94
|
/*background-image: linear-gradient(to right, var(--my-info-cell-bg1-color), var(--my-info-cell-bg2-color));*/
|
|
91
95
|
box-shadow: 1px 2px 2px;
|
|
92
96
|
}
|
|
@@ -94,55 +98,54 @@ class PdCalendarCell extends LitElement {
|
|
|
94
98
|
.special {
|
|
95
99
|
/*background-image: linear-gradient(to right, green, darkgreen);
|
|
96
100
|
background-color: var(--my-info-cell-bg1-color);*/
|
|
97
|
-
background-color: var(--
|
|
101
|
+
background-color: var(--pd-calendar-cell-day-special-bg-col, var(--pd-default-success-col));
|
|
98
102
|
/*background-image: linear-gradient(to right, var(--my-info-cell-bg1-color), var(--my-info-cell-bg2-color));*/
|
|
99
103
|
box-shadow: 1px 2px 2px;
|
|
100
104
|
}
|
|
101
105
|
|
|
102
106
|
.special:hover,
|
|
103
107
|
.free:hover {
|
|
104
|
-
background-color:
|
|
108
|
+
background-color: var(--pd-calendar-cell-day-bg-col-hover, var(--pd-default-hover-col));
|
|
105
109
|
/*background-image: linear-gradient(to right, var(--my-info-cell-bg1-hover), var(--my-info-cell-bg2-hover));*/
|
|
106
110
|
cursor: pointer;
|
|
107
111
|
}
|
|
108
112
|
|
|
109
113
|
|
|
110
|
-
.cell-info {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
color: var(--my-info-txt-color);
|
|
119
|
-
font-family: var(--my-primary-font);
|
|
114
|
+
.cell-info {
|
|
115
|
+
display: flex;
|
|
116
|
+
align-items: center;
|
|
117
|
+
justify-content: center;
|
|
118
|
+
height: 100%;
|
|
119
|
+
color: var(--pd-calendar-cell-day-info-col, var(--pd-default-bg-col));
|
|
120
|
+
font-family: var(--pd-default-font-title-col);
|
|
120
121
|
font-weight: bold;
|
|
121
122
|
font-size: 1.5em;
|
|
122
|
-
text-shadow: 1px 1px
|
|
123
|
+
text-shadow: 1px 1px var(--pd-default-dark-col);
|
|
123
124
|
pointer-events: none;
|
|
124
125
|
}
|
|
125
126
|
|
|
126
|
-
.cell-number {
|
|
127
|
-
|
|
128
|
-
font-
|
|
129
|
-
color: var(--
|
|
130
|
-
font-family: var(--
|
|
127
|
+
.cell-number {
|
|
128
|
+
font-size: 1em;
|
|
129
|
+
font-weight: bold;
|
|
130
|
+
color: var(--pd-calendar-cell-day-info-col, var(--pd-default-bg-col));
|
|
131
|
+
font-family: var(--pd-default-font-title-col);
|
|
131
132
|
}
|
|
132
133
|
|
|
133
134
|
.cell-number.top-left {
|
|
135
|
+
position: absolute;
|
|
134
136
|
left: 3px;
|
|
135
|
-
top:
|
|
137
|
+
top: 2px;
|
|
136
138
|
}
|
|
137
139
|
|
|
140
|
+
/* Noch umstellen, passt nicht für alle größen (die anderen auf flex/center umgestellt) */
|
|
138
141
|
.cell-number.center {
|
|
139
142
|
top: 50%;
|
|
140
143
|
left: 30%;
|
|
141
144
|
transform: translate(0, -50%);
|
|
142
145
|
}
|
|
143
146
|
|
|
144
|
-
.free .cell-number {
|
|
145
|
-
color: var(--
|
|
147
|
+
.free .cell-number, .special .cell-number {
|
|
148
|
+
color: var(--pd-calendar-cell-day-info-free-col, var(--pd-default-bg-col));
|
|
146
149
|
}
|
|
147
150
|
|
|
148
151
|
/* ToDo: Dont work for calendars sized by custom properties. Needed to calculate from calendar size
|
|
@@ -163,7 +166,7 @@ class PdCalendarCell extends LitElement {
|
|
|
163
166
|
font-size: 1em;
|
|
164
167
|
}
|
|
165
168
|
}
|
|
166
|
-
|
|
169
|
+
`];
|
|
167
170
|
}
|
|
168
171
|
|
|
169
172
|
constructor() {
|