@progressive-development/pd-content 0.0.1 → 0.0.2
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 +1 -1
- package/pd-edit-content.js +3 -0
- package/src/PdEditContent.js +211 -0
package/package.json
CHANGED
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
/* eslint-disable lit-a11y/click-events-have-key-events */
|
|
2
|
+
/* eslint-disable lit-a11y/anchor-is-valid */
|
|
3
|
+
/**
|
|
4
|
+
* @license
|
|
5
|
+
* Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import { LitElement, html, css } from 'lit';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* An example element.
|
|
12
|
+
*
|
|
13
|
+
* @slot - This element has a slot
|
|
14
|
+
* @csspart button - The button
|
|
15
|
+
*/
|
|
16
|
+
export class PdEditContent extends LitElement {
|
|
17
|
+
/**
|
|
18
|
+
* @event edit-content
|
|
19
|
+
*/
|
|
20
|
+
|
|
21
|
+
static get styles() {
|
|
22
|
+
return css`
|
|
23
|
+
:host {
|
|
24
|
+
--my-header-background-color: var(--squi-background-color, #177e89);
|
|
25
|
+
--my-header-border-color: var(--squi-background-hover-color, lightgrey);
|
|
26
|
+
|
|
27
|
+
display: block;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
h1,
|
|
31
|
+
h2,
|
|
32
|
+
h3,
|
|
33
|
+
h4 {
|
|
34
|
+
color: var(--my-text-color, #084c61);
|
|
35
|
+
font-family: var(--my-font, Oswald);
|
|
36
|
+
/*
|
|
37
|
+
font-weight: bold;
|
|
38
|
+
font-size: 2em;
|
|
39
|
+
*/
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* TODO: Temporär, remove here... */
|
|
43
|
+
h4 {
|
|
44
|
+
font-size: 1.2em;
|
|
45
|
+
margin-top: 0px;
|
|
46
|
+
margin-bottom: 2px;
|
|
47
|
+
line-height: 40px;
|
|
48
|
+
color: white;
|
|
49
|
+
padding-left: 5px;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.header {
|
|
53
|
+
display: flex;
|
|
54
|
+
gap: 5px;
|
|
55
|
+
background-color: var(--my-header-background-color);
|
|
56
|
+
align-items: center;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.circle {
|
|
60
|
+
margin-left: 5px;
|
|
61
|
+
width: 25px; /* Or whatever */
|
|
62
|
+
height: 25px; /* Or whatever */
|
|
63
|
+
border-radius: 50%;
|
|
64
|
+
background-color: white;
|
|
65
|
+
text-align: center;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.step-number {
|
|
69
|
+
font-family: var(--my-font, Oswald);
|
|
70
|
+
color: #177e89;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* Temporär? Hier noch sehr aufwendig mit div/span? */
|
|
74
|
+
|
|
75
|
+
.label {
|
|
76
|
+
display: inline-block;
|
|
77
|
+
font-weight: bold;
|
|
78
|
+
width: 200px;
|
|
79
|
+
padding-top: 10px;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* Temporär */
|
|
83
|
+
a {
|
|
84
|
+
font-size: 0.8em;
|
|
85
|
+
color: blue;
|
|
86
|
+
}
|
|
87
|
+
a:hover {
|
|
88
|
+
color: purple;
|
|
89
|
+
cursor: pointer;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.edit {
|
|
93
|
+
width: 1em;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.editLink {
|
|
97
|
+
padding-right: 10px;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
@media (max-width: 360px) {
|
|
101
|
+
.label {
|
|
102
|
+
width: 130px;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
`;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
static get properties() {
|
|
109
|
+
return {
|
|
110
|
+
stepNumber: { type: Number },
|
|
111
|
+
contentTitle: { type: String },
|
|
112
|
+
data: { type: Array },
|
|
113
|
+
editLinks: { type: Array }, // TODO: [TIM-37] Put together with edit icon/editDisabled
|
|
114
|
+
editDisabled: { type: Boolean },
|
|
115
|
+
};
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
constructor() {
|
|
119
|
+
super();
|
|
120
|
+
this.stepNumber = undefined;
|
|
121
|
+
this.contentTitle = '';
|
|
122
|
+
this.data = [];
|
|
123
|
+
this.editLinks = [];
|
|
124
|
+
this.editDisabled = false;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
render() {
|
|
128
|
+
return html`
|
|
129
|
+
<div class="header">
|
|
130
|
+
${this.stepNumber
|
|
131
|
+
? html`
|
|
132
|
+
<div class="circle">
|
|
133
|
+
<span class="step-number">${this.stepNumber}</span>
|
|
134
|
+
</div>
|
|
135
|
+
`
|
|
136
|
+
: ''}
|
|
137
|
+
<h4>${this.contentTitle}</h4>
|
|
138
|
+
</div>
|
|
139
|
+
<div>
|
|
140
|
+
${this.data
|
|
141
|
+
? this.data.map(
|
|
142
|
+
dataEntry => html`
|
|
143
|
+
<div>
|
|
144
|
+
<span class="label">${dataEntry.name}</span>
|
|
145
|
+
<span class="value">${dataEntry.val}</span>
|
|
146
|
+
</div>
|
|
147
|
+
`
|
|
148
|
+
)
|
|
149
|
+
: ''}
|
|
150
|
+
<slot></slot>
|
|
151
|
+
<p>
|
|
152
|
+
${this.editDisabled
|
|
153
|
+
? ''
|
|
154
|
+
: html`
|
|
155
|
+
<a @click="${this._editContent}">
|
|
156
|
+
<svg
|
|
157
|
+
class="edit"
|
|
158
|
+
id="Layer_1"
|
|
159
|
+
version="1.1"
|
|
160
|
+
viewBox="0 0 19 19"
|
|
161
|
+
xml:space="preserve"
|
|
162
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
163
|
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
164
|
+
>
|
|
165
|
+
<g>
|
|
166
|
+
<path
|
|
167
|
+
d="M8.44,7.25C8.348,7.342,8.277,7.447,8.215,7.557L8.174,7.516L8.149,7.69 C8.049,7.925,8.014,8.183,8.042,8.442l-0.399,2.796l2.797-0.399c0.259,0.028,0.517-0.007,0.752-0.107l0.174-0.024l-0.041-0.041 c0.109-0.062,0.215-0.133,0.307-0.225l5.053-5.053l-3.191-3.191L8.44,7.25z"
|
|
168
|
+
fill="blue"
|
|
169
|
+
/>
|
|
170
|
+
<path
|
|
171
|
+
d="M18.183,1.568l-0.87-0.87c-0.641-0.641-1.637-0.684-2.225-0.097l-0.797,0.797l3.191,3.191l0.797-0.798 C18.867,3.205,18.824,2.209,18.183,1.568z"
|
|
172
|
+
fill="blue"
|
|
173
|
+
/>
|
|
174
|
+
<path
|
|
175
|
+
d="M15,9.696V17H2V2h8.953l1.523-1.42c0.162-0.161,0.353-0.221,0.555-0.293 c0.043-0.119,0.104-0.18,0.176-0.287H0v19h17V7.928L15,9.696z"
|
|
176
|
+
fill="blue"
|
|
177
|
+
/>
|
|
178
|
+
</g>
|
|
179
|
+
</svg>
|
|
180
|
+
Bewerk ${this.contentTitle}
|
|
181
|
+
</a>
|
|
182
|
+
`}
|
|
183
|
+
${this.editLinks.map(
|
|
184
|
+
link => html` <a
|
|
185
|
+
class="editLink"
|
|
186
|
+
data-link="${link.key}"
|
|
187
|
+
@click="${this._editContent}"
|
|
188
|
+
>
|
|
189
|
+
${link.logo ? html`${link.logo}` : ''} ${link.txt}
|
|
190
|
+
</a>`
|
|
191
|
+
)}
|
|
192
|
+
</p>
|
|
193
|
+
</div>
|
|
194
|
+
`;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
_editContent(e) {
|
|
198
|
+
const { link } = e.target.dataset;
|
|
199
|
+
this.dispatchEvent(
|
|
200
|
+
new CustomEvent('edit-content', {
|
|
201
|
+
detail: {
|
|
202
|
+
step: this.stepNumber,
|
|
203
|
+
link,
|
|
204
|
+
},
|
|
205
|
+
bubbles: true,
|
|
206
|
+
composed: true,
|
|
207
|
+
})
|
|
208
|
+
);
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
|