@progressive-development/pd-calendar 0.0.18 → 0.1.1

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.
Files changed (3) hide show
  1. package/package.json +8 -7
  2. package/src/PdCalendar.js +24 -28
  3. 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.18",
6
+ "version": "0.1.1",
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.8",
33
+ "@progressive-development/pd-icon": "^0.1.10",
34
+ "@progressive-development/pd-shared-styles": "0.1.1",
34
35
  "fecha": "^4.2.0",
35
- "lit": "^2.0.2"
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.28",
42
+ "@web/dev-server": "^0.1.30",
42
43
  "@web/dev-server-storybook": "next",
43
- "@web/test-runner": "^0.13.21",
44
+ "@web/test-runner": "^0.13.27",
44
45
  "eslint": "^7.32.0",
45
- "eslint-config-prettier": "^8.3.0",
46
+ "eslint-config-prettier": "^8.4.0",
46
47
  "husky": "^4.3.8",
47
48
  "lint-staged": "^10.5.4",
48
- "prettier": "^2.4.1"
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 css`
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(--my-width);
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
- font-family: var(--my-primary-font);
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
- /* Nun über display flex in header und justify-content gelöst
103
- position: absolute;
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
- padding-top: 2px;
140
- background-color: var(--my-day-title-bg-color);
141
- text-align: center;
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: white;
145
- font-family: var(--my-primary-font);
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.5em;
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.5rem;
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 css`
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: #fdfbfb;
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(--my-cell-bg-color);
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(--my-cell-we-bg-color);
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(--my-info-cell-bg1-color);
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(--green, green); /*#1da692*/
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: rgb(247, 211, 8);
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
- /* center position https://www.w3.org/Style/Examples/007/center.en.html*/
113
- position: absolute;
114
- top: 50%;
115
- left: 35%;
116
- transform: translate(0, -50%);
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 black;
123
+ text-shadow: 1px 1px var(--pd-default-dark-col);
123
124
  pointer-events: none;
124
125
  }
125
126
 
126
- .cell-number {
127
- position: absolute;
128
- font-size: 0.9em;
129
- color: var(--my-cell-day-color);
130
- font-family: var(--my-primary-font);
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: 1px;
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(--my-info-cell-day-color);
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() {