@operato/font 2.0.0-alpha.7 → 2.0.0-alpha.71
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/CHANGELOG.md +356 -0
- package/dist/src/font-creation-card.d.ts +1 -1
- package/dist/src/font-creation-card.js +3 -2
- package/dist/src/font-creation-card.js.map +1 -1
- package/dist/src/font-selector.d.ts +3 -1
- package/dist/src/font-selector.js +19 -15
- package/dist/src/font-selector.js.map +1 -1
- package/dist/src/ox-file-selector.d.ts +2 -3
- package/dist/src/ox-file-selector.js +1 -2
- package/dist/src/ox-file-selector.js.map +1 -1
- package/dist/src/ox-font-selector.d.ts +2 -2
- package/dist/src/ox-font-selector.js +3 -3
- package/dist/src/ox-font-selector.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +22 -21
- package/src/font-creation-card.ts +3 -2
- package/src/font-selector.ts +19 -15
- package/src/ox-file-selector.ts +1 -2
- package/src/ox-font-selector.ts +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,362 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.0.0-alpha.71](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.70...v2.0.0-alpha.71) (2024-04-13)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @operato/font
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [2.0.0-alpha.70](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.69...v2.0.0-alpha.70) (2024-04-13)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @operato/font
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## [2.0.0-alpha.69](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.68...v2.0.0-alpha.69) (2024-04-13)
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
### :bug: Bug Fix
|
|
26
|
+
|
|
27
|
+
* mwc=>md for context ([972f5fd](https://github.com/hatiolab/operato/commit/972f5fd8da02820b6d6238cf1dd099591f97d8df))
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
## [2.0.0-alpha.68](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.67...v2.0.0-alpha.68) (2024-04-13)
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
### :bug: Bug Fix
|
|
35
|
+
|
|
36
|
+
* mwc=>md for context ([2bc13f2](https://github.com/hatiolab/operato/commit/2bc13f285f257782f73e5d7b5d1ddd197df85393))
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
## [2.0.0-alpha.64](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.63...v2.0.0-alpha.64) (2024-04-13)
|
|
41
|
+
|
|
42
|
+
**Note:** Version bump only for package @operato/font
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
## [2.0.0-alpha.63](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.62...v2.0.0-alpha.63) (2024-04-12)
|
|
49
|
+
|
|
50
|
+
**Note:** Version bump only for package @operato/font
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
## [2.0.0-alpha.62](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.61...v2.0.0-alpha.62) (2024-04-12)
|
|
57
|
+
|
|
58
|
+
**Note:** Version bump only for package @operato/font
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
## [2.0.0-alpha.61](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.60...v2.0.0-alpha.61) (2024-04-11)
|
|
65
|
+
|
|
66
|
+
**Note:** Version bump only for package @operato/font
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
## [2.0.0-alpha.60](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.59...v2.0.0-alpha.60) (2024-04-11)
|
|
73
|
+
|
|
74
|
+
**Note:** Version bump only for package @operato/font
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
## [2.0.0-alpha.59](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.58...v2.0.0-alpha.59) (2024-04-11)
|
|
81
|
+
|
|
82
|
+
**Note:** Version bump only for package @operato/font
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
## [2.0.0-alpha.58](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.57...v2.0.0-alpha.58) (2024-04-07)
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
### :bug: Bug Fix
|
|
92
|
+
|
|
93
|
+
* font selector ([38e79f5](https://github.com/hatiolab/operato/commit/38e79f54fc4cb6024d3249c1e8f3167618571fdc))
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
## [2.0.0-alpha.57](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.56...v2.0.0-alpha.57) (2024-04-07)
|
|
98
|
+
|
|
99
|
+
**Note:** Version bump only for package @operato/font
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
**Note:** Version bump only for package @operato/font
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
## [2.0.0-alpha.54](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.53...v2.0.0-alpha.54) (2024-04-01)
|
|
114
|
+
|
|
115
|
+
**Note:** Version bump only for package @operato/font
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
## [2.0.0-alpha.52](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.51...v2.0.0-alpha.52) (2024-03-29)
|
|
122
|
+
|
|
123
|
+
**Note:** Version bump only for package @operato/font
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
## [2.0.0-alpha.51](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.50...v2.0.0-alpha.51) (2024-03-29)
|
|
130
|
+
|
|
131
|
+
**Note:** Version bump only for package @operato/font
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
## [2.0.0-alpha.50](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.49...v2.0.0-alpha.50) (2024-03-28)
|
|
138
|
+
|
|
139
|
+
**Note:** Version bump only for package @operato/font
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
## [2.0.0-alpha.49](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.48...v2.0.0-alpha.49) (2024-03-28)
|
|
146
|
+
|
|
147
|
+
**Note:** Version bump only for package @operato/font
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
## [2.0.0-alpha.48](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.47...v2.0.0-alpha.48) (2024-03-28)
|
|
154
|
+
|
|
155
|
+
**Note:** Version bump only for package @operato/font
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
## [2.0.0-alpha.47](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.46...v2.0.0-alpha.47) (2024-03-27)
|
|
162
|
+
|
|
163
|
+
**Note:** Version bump only for package @operato/font
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
## [2.0.0-alpha.46](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.45...v2.0.0-alpha.46) (2024-03-26)
|
|
170
|
+
|
|
171
|
+
**Note:** Version bump only for package @operato/font
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
## [2.0.0-alpha.44](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.43...v2.0.0-alpha.44) (2024-03-24)
|
|
178
|
+
|
|
179
|
+
**Note:** Version bump only for package @operato/font
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
## [2.0.0-alpha.43](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.42...v2.0.0-alpha.43) (2024-03-24)
|
|
186
|
+
|
|
187
|
+
**Note:** Version bump only for package @operato/font
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
## [2.0.0-alpha.37](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.36...v2.0.0-alpha.37) (2024-03-18)
|
|
194
|
+
|
|
195
|
+
**Note:** Version bump only for package @operato/font
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
## [2.0.0-alpha.35](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.34...v2.0.0-alpha.35) (2024-03-13)
|
|
202
|
+
|
|
203
|
+
**Note:** Version bump only for package @operato/font
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
## [2.0.0-alpha.34](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.33...v2.0.0-alpha.34) (2024-03-12)
|
|
210
|
+
|
|
211
|
+
**Note:** Version bump only for package @operato/font
|
|
212
|
+
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
|
|
216
|
+
|
|
217
|
+
## [2.0.0-alpha.32](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.31...v2.0.0-alpha.32) (2024-03-12)
|
|
218
|
+
|
|
219
|
+
**Note:** Version bump only for package @operato/font
|
|
220
|
+
|
|
221
|
+
|
|
222
|
+
|
|
223
|
+
|
|
224
|
+
|
|
225
|
+
## [2.0.0-alpha.31](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.30...v2.0.0-alpha.31) (2024-03-03)
|
|
226
|
+
|
|
227
|
+
**Note:** Version bump only for package @operato/font
|
|
228
|
+
|
|
229
|
+
|
|
230
|
+
|
|
231
|
+
|
|
232
|
+
|
|
233
|
+
## [2.0.0-alpha.30](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.29...v2.0.0-alpha.30) (2024-03-03)
|
|
234
|
+
|
|
235
|
+
**Note:** Version bump only for package @operato/font
|
|
236
|
+
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
|
|
240
|
+
|
|
241
|
+
## [2.0.0-alpha.28](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.27...v2.0.0-alpha.28) (2024-02-20)
|
|
242
|
+
|
|
243
|
+
|
|
244
|
+
### :bug: Bug Fix
|
|
245
|
+
|
|
246
|
+
* upgrade devDependencies for webcomponents ([1489b8b](https://github.com/hatiolab/operato/commit/1489b8b790d9bcee779a070a630697f25c01728f))
|
|
247
|
+
|
|
248
|
+
|
|
249
|
+
|
|
250
|
+
## [2.0.0-alpha.27](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.26...v2.0.0-alpha.27) (2024-02-17)
|
|
251
|
+
|
|
252
|
+
**Note:** Version bump only for package @operato/font
|
|
253
|
+
|
|
254
|
+
|
|
255
|
+
|
|
256
|
+
|
|
257
|
+
|
|
258
|
+
## [2.0.0-alpha.23](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.22...v2.0.0-alpha.23) (2024-02-10)
|
|
259
|
+
|
|
260
|
+
**Note:** Version bump only for package @operato/font
|
|
261
|
+
|
|
262
|
+
|
|
263
|
+
|
|
264
|
+
|
|
265
|
+
|
|
266
|
+
## [2.0.0-alpha.22](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.21...v2.0.0-alpha.22) (2024-02-10)
|
|
267
|
+
|
|
268
|
+
**Note:** Version bump only for package @operato/font
|
|
269
|
+
|
|
270
|
+
|
|
271
|
+
|
|
272
|
+
|
|
273
|
+
|
|
274
|
+
## [2.0.0-alpha.21](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.20...v2.0.0-alpha.21) (2024-02-09)
|
|
275
|
+
|
|
276
|
+
**Note:** Version bump only for package @operato/font
|
|
277
|
+
|
|
278
|
+
|
|
279
|
+
|
|
280
|
+
|
|
281
|
+
|
|
282
|
+
## [2.0.0-alpha.20](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.19...v2.0.0-alpha.20) (2024-02-05)
|
|
283
|
+
|
|
284
|
+
**Note:** Version bump only for package @operato/font
|
|
285
|
+
|
|
286
|
+
|
|
287
|
+
|
|
288
|
+
|
|
289
|
+
|
|
290
|
+
## [2.0.0-alpha.19](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.18...v2.0.0-alpha.19) (2024-02-05)
|
|
291
|
+
|
|
292
|
+
**Note:** Version bump only for package @operato/font
|
|
293
|
+
|
|
294
|
+
|
|
295
|
+
|
|
296
|
+
|
|
297
|
+
|
|
298
|
+
## [2.0.0-alpha.17](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.16...v2.0.0-alpha.17) (2024-02-04)
|
|
299
|
+
|
|
300
|
+
**Note:** Version bump only for package @operato/font
|
|
301
|
+
|
|
302
|
+
|
|
303
|
+
|
|
304
|
+
|
|
305
|
+
|
|
306
|
+
## [2.0.0-alpha.16](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.15...v2.0.0-alpha.16) (2024-02-03)
|
|
307
|
+
|
|
308
|
+
**Note:** Version bump only for package @operato/font
|
|
309
|
+
|
|
310
|
+
|
|
311
|
+
|
|
312
|
+
|
|
313
|
+
|
|
314
|
+
## [2.0.0-alpha.13](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.12...v2.0.0-alpha.13) (2024-01-28)
|
|
315
|
+
|
|
316
|
+
**Note:** Version bump only for package @operato/font
|
|
317
|
+
|
|
318
|
+
|
|
319
|
+
|
|
320
|
+
|
|
321
|
+
|
|
322
|
+
## [2.0.0-alpha.12](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.11...v2.0.0-alpha.12) (2024-01-24)
|
|
323
|
+
|
|
324
|
+
**Note:** Version bump only for package @operato/font
|
|
325
|
+
|
|
326
|
+
|
|
327
|
+
|
|
328
|
+
|
|
329
|
+
|
|
330
|
+
## [2.0.0-alpha.11](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.10...v2.0.0-alpha.11) (2024-01-24)
|
|
331
|
+
|
|
332
|
+
**Note:** Version bump only for package @operato/font
|
|
333
|
+
|
|
334
|
+
|
|
335
|
+
|
|
336
|
+
|
|
337
|
+
|
|
338
|
+
## [2.0.0-alpha.10](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.9...v2.0.0-alpha.10) (2024-01-22)
|
|
339
|
+
|
|
340
|
+
**Note:** Version bump only for package @operato/font
|
|
341
|
+
|
|
342
|
+
|
|
343
|
+
|
|
344
|
+
|
|
345
|
+
|
|
346
|
+
## [2.0.0-alpha.9](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.8...v2.0.0-alpha.9) (2024-01-20)
|
|
347
|
+
|
|
348
|
+
**Note:** Version bump only for package @operato/font
|
|
349
|
+
|
|
350
|
+
|
|
351
|
+
|
|
352
|
+
|
|
353
|
+
|
|
354
|
+
## [2.0.0-alpha.8](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.7...v2.0.0-alpha.8) (2024-01-20)
|
|
355
|
+
|
|
356
|
+
**Note:** Version bump only for package @operato/font
|
|
357
|
+
|
|
358
|
+
|
|
359
|
+
|
|
360
|
+
|
|
361
|
+
|
|
6
362
|
## [2.0.0-alpha.7](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.6...v2.0.0-alpha.7) (2024-01-15)
|
|
7
363
|
|
|
8
364
|
**Note:** Version bump only for package @operato/font
|
|
@@ -10,7 +10,7 @@ export declare class FontCreationCard extends FontCreationCard_base {
|
|
|
10
10
|
value: string;
|
|
11
11
|
display: string;
|
|
12
12
|
}>;
|
|
13
|
-
render(): import("lit").TemplateResult<1>;
|
|
13
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
14
14
|
onClickFlip(e: Event): void;
|
|
15
15
|
onClickSubmit(e: Event): Promise<void>;
|
|
16
16
|
reset(): void;
|
|
@@ -19,7 +19,7 @@ let FontCreationCard = class FontCreationCard extends localize(i18next)(LitEleme
|
|
|
19
19
|
let isProviderGoogle = this.provider == 'google' && this.googleFonts.length > 0;
|
|
20
20
|
let isFileAttached = this.files && this.files.length > 0 ? true : false;
|
|
21
21
|
return html `
|
|
22
|
-
<div @click=${(e) => this.onClickFlip(e)} front><
|
|
22
|
+
<div @click=${(e) => this.onClickFlip(e)} front><md-icon>add_circle_outline</md-icon>create font</div>
|
|
23
23
|
|
|
24
24
|
<div @click=${(e) => this.onClickFlip(e)} back>
|
|
25
25
|
<form @submit=${(e) => this.onClickSubmit(e)}>
|
|
@@ -167,7 +167,8 @@ FontCreationCard.styles = [
|
|
|
167
167
|
text-transform: capitalize;
|
|
168
168
|
}
|
|
169
169
|
|
|
170
|
-
[front]
|
|
170
|
+
[front] md-icon {
|
|
171
|
+
--md-icon-size: 42px;
|
|
171
172
|
font-size: 3.5em;
|
|
172
173
|
color: var(--card-list-create-icon-color);
|
|
173
174
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"font-creation-card.js","sourceRoot":"","sources":["../../src/font-creation-card.ts"],"names":[],"mappings":"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","sourcesContent":["import './ox-file-selector'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { i18next, localize } from '@operato/i18n'\n\n@customElement('font-creation-card')\nexport class FontCreationCard extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n position: relative;\n\n padding: 0;\n margin: 0;\n height: 100%;\n\n -webkit-transform-style: preserve-3d;\n transform-style: preserve-3d;\n -webkit-transition: all 0.5s ease-in-out;\n transition: all 0.5s ease-in-out;\n }\n\n :host(.flipped) {\n -webkit-transform: var(--card-list-flip-transform);\n transform: var(--card-list-flip-transform);\n }\n\n [front],\n [back] {\n position: absolute;\n\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n\n border: var(--card-list-create-border);\n border-radius: var(--card-list-create-border-radius);\n\n background-color: #fff;\n\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n }\n\n [front] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n text-align: center;\n font-size: 0.8em;\n color: var(--card-list-create-color);\n text-transform: capitalize;\n }\n\n [front] mwc-icon {\n font-size: 3.5em;\n color: var(--card-list-create-icon-color);\n }\n\n [back] {\n -webkit-transform: var(--card-list-flip-transform);\n transform: var(--card-list-flip-transform);\n box-sizing: border-box;\n display: grid;\n }\n\n [back] form {\n padding: var(--card-list-create-form-padding);\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: auto 1fr auto;\n justify-content: center;\n align-items: center;\n }\n\n [back] form .props {\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n grid-row-gap: 7px;\n justify-content: center;\n align-items: center;\n }\n\n [back] form .props label {\n grid-column: span 4;\n font: var(--card-list-create-label-font);\n color: var(--card-list-create-label-color);\n }\n\n [back] form .props input,\n [back] form .props select {\n grid-column: span 6;\n background-color: #fff;\n border: var(--card-list-create-input-border);\n border-radius: var(--card-list-create-input-border-radius);\n font: var(--card-list-create-input-font);\n color: var(--card-list-create-input-color);\n width: -moz-available;\n }\n\n ox-file-selector {\n grid-column: span 6;\n font: var(--card-list-create-input-font);\n border: none;\n box-sizing: border-box;\n padding: 0;\n }\n\n [back] input[type='submit'] {\n background-color: var(--button-background-color) !important;\n font: var(--button-font);\n color: var(--button-color) !important;\n border-radius: var(--button-radius);\n border: var(--button-border);\n grid-column: span 10;\n grid-row: auto / -1;\n }\n\n .hidden {\n display: none !important;\n }\n `\n ]\n\n @property({ type: String }) provider: string = 'google'\n @property({ type: Array }) googleFonts: Array<string> = []\n @property({ type: Array }) files?: Array<any>\n\n providers: Array<{ value: string; display: string }> = [\n { value: 'google', display: 'Google' },\n // TODO 구글 외 폰트 서비스 구현\n // { value: 'typekit', display: 'Typekit' },\n { value: 'custom', display: 'Custom' }\n ]\n\n render() {\n let isProviderGoogle = this.provider == 'google' && this.googleFonts.length > 0\n let isFileAttached = this.files && this.files.length > 0 ? true : false\n\n return html`\n <div @click=${(e: Event) => this.onClickFlip(e)} front><mwc-icon>add_circle_outline</mwc-icon>create font</div>\n\n <div @click=${(e: Event) => this.onClickFlip(e)} back>\n <form @submit=${(e: Event) => this.onClickSubmit(e)}>\n <div class=\"props\">\n <label>${i18next.t('label.provider')}</label>\n <select\n name=\"provider\"\n @change=${(e: Event) => {\n this.provider = (e.target as HTMLInputElement).value\n if (this.provider === 'google') {\n fetch(`/all-google-fonts`).then(async response => {\n if (response.ok) this.googleFonts = await response.json()\n else {\n console.warn(\n `(${response.url}) ${response.status} ${response.statusText}. Could not load Google fonts.`\n )\n }\n })\n }\n }}\n >\n ${this.providers.map(\n p => html` <option value=${p.value} ?selected=${this.provider == p.value}>${p.display}</option> `\n )}\n </select>\n\n <label>${i18next.t('label.name')}</label>\n <input type=\"text\" name=\"${isProviderGoogle ? '' : 'name'}\" ?hidden=${isProviderGoogle} />\n <select name=\"${isProviderGoogle ? 'name' : ''}\" ?hidden=${!isProviderGoogle}>\n <option value=\"\"> </option>\n ${isProviderGoogle && this.googleFonts.map(f => html` <option value=${f}>${f}</option> `)}\n </select>\n\n <label ?hidden=${this.provider != 'custom'}>${i18next.t('label.uri')}</label>\n <input\n ?hidden=${this.provider != 'custom'}\n ?disabled=${isFileAttached}\n .value=${isFileAttached ? this.files![0].name : ''}\n type=\"text\"\n name=\"uri\"\n />\n <!-- display when attachment module is imported -->\n <label ?hidden=${this.provider != 'custom'}>${i18next.t('label.file')}</label>\n <ox-file-selector\n class=\"${this.provider != 'custom' ? 'hidden' : ''}\"\n name=\"file\"\n label=\"${i18next.t('label.select file')}\"\n accept=\".ttf,.otf,.woff,.woff2,.eot,.svg,.svgz\"\n multiple\n @file-change=${(e: CustomEvent) => {\n this.files = Array.from(e.detail.files)\n }}\n ></ox-file-selector>\n <!------------------------------------------------>\n\n <label for=\"checkbox-active\" @click=${(e: Event) => e.stopPropagation()}>\n ${i18next.t('label.active')}\n </label>\n <input id=\"checkbox-active\" type=\"checkbox\" name=\"active\" checked />\n </div>\n <div></div>\n <input type=\"submit\" value=${i18next.t('button.create')} />\n </form>\n </div>\n `\n }\n\n onClickFlip(e: Event) {\n const target = e.target as HTMLElement\n const currentTarget = e.currentTarget as HTMLElement\n\n if (!['INPUT', 'SELECT', 'OPTION'].find(tagName => tagName === target.tagName)) {\n if (currentTarget.hasAttribute('front')) this.reset() // 입력 폼으로 뒤집기 전에 한 번 리셋\n this.classList.toggle('flipped')\n }\n }\n\n async onClickSubmit(e: Event) {\n e.preventDefault()\n e.stopPropagation()\n\n var form = e.target as HTMLFormElement\n\n var detail = {} as any\n\n detail.name = (form.elements.namedItem('name') as HTMLInputElement).value\n detail.provider = (form.elements.namedItem('provider') as HTMLInputElement).value\n detail.active = (form.elements.namedItem('active') as HTMLInputElement).checked\n\n if (this.provider === 'custom') {\n detail.uri = (form.elements.namedItem('uri') as HTMLInputElement).value\n if (this.files && this.files.length > 0) {\n detail.files = this.files\n }\n }\n\n this.dispatchEvent(new CustomEvent('create-font', { detail }))\n }\n\n reset() {\n var form = this.renderRoot.querySelector('form')\n if (form) {\n form.reset()\n }\n\n this.files = []\n this.classList.remove('flipped')\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"font-creation-card.js","sourceRoot":"","sources":["../../src/font-creation-card.ts"],"names":[],"mappings":"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","sourcesContent":["import './ox-file-selector'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { i18next, localize } from '@operato/i18n'\n\n@customElement('font-creation-card')\nexport class FontCreationCard extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n position: relative;\n\n padding: 0;\n margin: 0;\n height: 100%;\n\n -webkit-transform-style: preserve-3d;\n transform-style: preserve-3d;\n -webkit-transition: all 0.5s ease-in-out;\n transition: all 0.5s ease-in-out;\n }\n\n :host(.flipped) {\n -webkit-transform: var(--card-list-flip-transform);\n transform: var(--card-list-flip-transform);\n }\n\n [front],\n [back] {\n position: absolute;\n\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n\n border: var(--card-list-create-border);\n border-radius: var(--card-list-create-border-radius);\n\n background-color: #fff;\n\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n }\n\n [front] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n text-align: center;\n font-size: 0.8em;\n color: var(--card-list-create-color);\n text-transform: capitalize;\n }\n\n [front] md-icon {\n --md-icon-size: 42px;\n font-size: 3.5em;\n color: var(--card-list-create-icon-color);\n }\n\n [back] {\n -webkit-transform: var(--card-list-flip-transform);\n transform: var(--card-list-flip-transform);\n box-sizing: border-box;\n display: grid;\n }\n\n [back] form {\n padding: var(--card-list-create-form-padding);\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: auto 1fr auto;\n justify-content: center;\n align-items: center;\n }\n\n [back] form .props {\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n grid-row-gap: 7px;\n justify-content: center;\n align-items: center;\n }\n\n [back] form .props label {\n grid-column: span 4;\n font: var(--card-list-create-label-font);\n color: var(--card-list-create-label-color);\n }\n\n [back] form .props input,\n [back] form .props select {\n grid-column: span 6;\n background-color: #fff;\n border: var(--card-list-create-input-border);\n border-radius: var(--card-list-create-input-border-radius);\n font: var(--card-list-create-input-font);\n color: var(--card-list-create-input-color);\n width: -moz-available;\n }\n\n ox-file-selector {\n grid-column: span 6;\n font: var(--card-list-create-input-font);\n border: none;\n box-sizing: border-box;\n padding: 0;\n }\n\n [back] input[type='submit'] {\n background-color: var(--button-background-color) !important;\n font: var(--button-font);\n color: var(--button-color) !important;\n border-radius: var(--button-radius);\n border: var(--button-border);\n grid-column: span 10;\n grid-row: auto / -1;\n }\n\n .hidden {\n display: none !important;\n }\n `\n ]\n\n @property({ type: String }) provider: string = 'google'\n @property({ type: Array }) googleFonts: Array<string> = []\n @property({ type: Array }) files?: Array<any>\n\n providers: Array<{ value: string; display: string }> = [\n { value: 'google', display: 'Google' },\n // TODO 구글 외 폰트 서비스 구현\n // { value: 'typekit', display: 'Typekit' },\n { value: 'custom', display: 'Custom' }\n ]\n\n render() {\n let isProviderGoogle = this.provider == 'google' && this.googleFonts.length > 0\n let isFileAttached = this.files && this.files.length > 0 ? true : false\n\n return html`\n <div @click=${(e: Event) => this.onClickFlip(e)} front><md-icon>add_circle_outline</md-icon>create font</div>\n\n <div @click=${(e: Event) => this.onClickFlip(e)} back>\n <form @submit=${(e: Event) => this.onClickSubmit(e)}>\n <div class=\"props\">\n <label>${i18next.t('label.provider')}</label>\n <select\n name=\"provider\"\n @change=${(e: Event) => {\n this.provider = (e.target as HTMLInputElement).value\n if (this.provider === 'google') {\n fetch(`/all-google-fonts`).then(async response => {\n if (response.ok) this.googleFonts = await response.json()\n else {\n console.warn(\n `(${response.url}) ${response.status} ${response.statusText}. Could not load Google fonts.`\n )\n }\n })\n }\n }}\n >\n ${this.providers.map(\n p => html` <option value=${p.value} ?selected=${this.provider == p.value}>${p.display}</option> `\n )}\n </select>\n\n <label>${i18next.t('label.name')}</label>\n <input type=\"text\" name=\"${isProviderGoogle ? '' : 'name'}\" ?hidden=${isProviderGoogle} />\n <select name=\"${isProviderGoogle ? 'name' : ''}\" ?hidden=${!isProviderGoogle}>\n <option value=\"\"> </option>\n ${isProviderGoogle && this.googleFonts.map(f => html` <option value=${f}>${f}</option> `)}\n </select>\n\n <label ?hidden=${this.provider != 'custom'}>${i18next.t('label.uri')}</label>\n <input\n ?hidden=${this.provider != 'custom'}\n ?disabled=${isFileAttached}\n .value=${isFileAttached ? this.files![0].name : ''}\n type=\"text\"\n name=\"uri\"\n />\n <!-- display when attachment module is imported -->\n <label ?hidden=${this.provider != 'custom'}>${i18next.t('label.file')}</label>\n <ox-file-selector\n class=\"${this.provider != 'custom' ? 'hidden' : ''}\"\n name=\"file\"\n label=\"${i18next.t('label.select file')}\"\n accept=\".ttf,.otf,.woff,.woff2,.eot,.svg,.svgz\"\n multiple\n @file-change=${(e: CustomEvent) => {\n this.files = Array.from(e.detail.files)\n }}\n ></ox-file-selector>\n <!------------------------------------------------>\n\n <label for=\"checkbox-active\" @click=${(e: Event) => e.stopPropagation()}>\n ${i18next.t('label.active')}\n </label>\n <input id=\"checkbox-active\" type=\"checkbox\" name=\"active\" checked />\n </div>\n <div></div>\n <input type=\"submit\" value=${i18next.t('button.create')} />\n </form>\n </div>\n `\n }\n\n onClickFlip(e: Event) {\n const target = e.target as HTMLElement\n const currentTarget = e.currentTarget as HTMLElement\n\n if (!['INPUT', 'SELECT', 'OPTION'].find(tagName => tagName === target.tagName)) {\n if (currentTarget.hasAttribute('front')) this.reset() // 입력 폼으로 뒤집기 전에 한 번 리셋\n this.classList.toggle('flipped')\n }\n }\n\n async onClickSubmit(e: Event) {\n e.preventDefault()\n e.stopPropagation()\n\n var form = e.target as HTMLFormElement\n\n var detail = {} as any\n\n detail.name = (form.elements.namedItem('name') as HTMLInputElement).value\n detail.provider = (form.elements.namedItem('provider') as HTMLInputElement).value\n detail.active = (form.elements.namedItem('active') as HTMLInputElement).checked\n\n if (this.provider === 'custom') {\n detail.uri = (form.elements.namedItem('uri') as HTMLInputElement).value\n if (this.files && this.files.length > 0) {\n detail.files = this.files\n }\n }\n\n this.dispatchEvent(new CustomEvent('create-font', { detail }))\n }\n\n reset() {\n var form = this.renderRoot.querySelector('form')\n if (form) {\n form.reset()\n }\n\n this.files = []\n this.classList.remove('flipped')\n }\n}\n"]}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import '@operato/input/ox-select.js';
|
|
2
|
+
import '@operato/popup/ox-popup-list.js';
|
|
1
3
|
import './font-creation-card';
|
|
2
4
|
import { LitElement, PropertyValues } from 'lit';
|
|
3
5
|
declare const FontSelector_base: (new (...args: any[]) => LitElement) & (new (...args: any[]) => {
|
|
@@ -18,7 +20,7 @@ export declare class FontSelector extends FontSelector_base {
|
|
|
18
20
|
reset: () => {};
|
|
19
21
|
};
|
|
20
22
|
showGotoTop: boolean;
|
|
21
|
-
render(): import("lit").TemplateResult<1>;
|
|
23
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
22
24
|
firstUpdated(): Promise<void>;
|
|
23
25
|
stateChanged(state: any): void;
|
|
24
26
|
updated(changes: PropertyValues<this>): void;
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
+
import '@operato/input/ox-select.js';
|
|
3
|
+
import '@operato/popup/ox-popup-list.js';
|
|
2
4
|
import './font-creation-card';
|
|
3
5
|
import { css, html, LitElement } from 'lit';
|
|
4
6
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
@@ -22,14 +24,17 @@ let FontSelector = class FontSelector extends localize(i18next)(connect(store)(L
|
|
|
22
24
|
var fonts = this.fonts || [];
|
|
23
25
|
return html `
|
|
24
26
|
<div id="filter">
|
|
25
|
-
<select
|
|
27
|
+
<ox-select
|
|
28
|
+
.placeholder=${i18next.t('text.please choose a provider')}
|
|
29
|
+
.value=${this.provider}
|
|
26
30
|
@change=${(e) => {
|
|
27
31
|
this.provider = e.currentTarget.value;
|
|
28
32
|
}}
|
|
29
33
|
>
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
34
|
+
<ox-popup-list>
|
|
35
|
+
${['', 'google', 'custom'].map(provider => html ` <div option value=${provider}>${provider} </div> `)}
|
|
36
|
+
</ox-popup-list>
|
|
37
|
+
</ox-select>
|
|
33
38
|
</div>
|
|
34
39
|
|
|
35
40
|
<div id="main">
|
|
@@ -52,19 +57,19 @@ let FontSelector = class FontSelector extends localize(i18next)(connect(store)(L
|
|
|
52
57
|
<div name>${font.name}</div>
|
|
53
58
|
<div provider>${font.provider}</div>
|
|
54
59
|
<div class="button-container">
|
|
55
|
-
<
|
|
60
|
+
<md-icon
|
|
56
61
|
@click=${(e) => {
|
|
57
62
|
e.stopPropagation();
|
|
58
63
|
this.toggleActive(font);
|
|
59
64
|
}}
|
|
60
|
-
>${font.active ? 'check_box' : 'check_box_outline_blank'}</
|
|
65
|
+
>${font.active ? 'check_box' : 'check_box_outline_blank'}</md-icon
|
|
61
66
|
>
|
|
62
|
-
<
|
|
67
|
+
<md-icon
|
|
63
68
|
@click=${(e) => {
|
|
64
69
|
e.stopPropagation();
|
|
65
70
|
this.deleteFont(font);
|
|
66
71
|
}}
|
|
67
|
-
>delete</
|
|
72
|
+
>delete</md-icon
|
|
68
73
|
>
|
|
69
74
|
</div>
|
|
70
75
|
</div>
|
|
@@ -157,12 +162,12 @@ FontSelector.styles = [
|
|
|
157
162
|
|
|
158
163
|
#main {
|
|
159
164
|
overflow: auto;
|
|
160
|
-
padding: var(--popup-content-padding);
|
|
161
165
|
display: grid;
|
|
162
166
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
163
167
|
grid-auto-rows: var(--card-list-rows-height);
|
|
164
168
|
grid-gap: 20px;
|
|
165
169
|
box-sizing: border-box;
|
|
170
|
+
padding: var(--popup-content-padding);
|
|
166
171
|
}
|
|
167
172
|
|
|
168
173
|
#main .card {
|
|
@@ -187,7 +192,7 @@ FontSelector.styles = [
|
|
|
187
192
|
flex-wrap: wrap;
|
|
188
193
|
}
|
|
189
194
|
|
|
190
|
-
.card .button-container >
|
|
195
|
+
.card .button-container > md-icon {
|
|
191
196
|
background-color: var(--font-selector-icon-background-color);
|
|
192
197
|
text-align: center;
|
|
193
198
|
width: var(--font-selector-icon-size);
|
|
@@ -196,12 +201,12 @@ FontSelector.styles = [
|
|
|
196
201
|
color: var(--font-selector-icon-color);
|
|
197
202
|
}
|
|
198
203
|
|
|
199
|
-
.card .button-container >
|
|
204
|
+
.card .button-container > md-icon:last-child {
|
|
200
205
|
border-bottom-left-radius: 12px;
|
|
201
206
|
}
|
|
202
207
|
|
|
203
|
-
.card .button-container >
|
|
204
|
-
.card .button-container >
|
|
208
|
+
.card .button-container > md-icon:hover,
|
|
209
|
+
.card .button-container > md-icon:active {
|
|
205
210
|
background-color: var(--primary-color);
|
|
206
211
|
color: #fff;
|
|
207
212
|
}
|
|
@@ -240,7 +245,6 @@ FontSelector.styles = [
|
|
|
240
245
|
}
|
|
241
246
|
|
|
242
247
|
#filter {
|
|
243
|
-
padding: var(--popup-content-padding);
|
|
244
248
|
background-color: var(--font-tools-background-color);
|
|
245
249
|
box-shadow: var(--box-shadow);
|
|
246
250
|
|
|
@@ -254,7 +258,7 @@ FontSelector.styles = [
|
|
|
254
258
|
font-size: 15px;
|
|
255
259
|
}
|
|
256
260
|
|
|
257
|
-
select {
|
|
261
|
+
ox-select {
|
|
258
262
|
text-transform: capitalize;
|
|
259
263
|
float: right;
|
|
260
264
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"font-selector.js","sourceRoot":"","sources":["../../src/font-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import './font-creation-card'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport Headroom from '@operato/headroom'\nimport { i18next, localize } from '@operato/i18n'\nimport { pulltorefresh } from '@operato/pull-to-refresh'\nimport { store } from '@operato/shell'\nimport { HeadroomStyles, ScrollbarStyles } from '@operato/styles'\n\nimport { createFont, deleteFont, updateFont } from './font-graphql-client'\nimport { actionUpdateFontList } from './redux-font-actions'\n\n@customElement('font-selector')\nexport class FontSelector extends localize(i18next)(connect(store)(LitElement)) {\n static styles = [\n ScrollbarStyles,\n HeadroomStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n background-color: var(--popup-content-background-color);\n\n position: relative;\n }\n\n #main {\n overflow: auto;\n padding: var(--popup-content-padding);\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n grid-auto-rows: var(--card-list-rows-height);\n grid-gap: 20px;\n box-sizing: border-box;\n }\n\n #main .card {\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n border-radius: var(--card-list-border-radius);\n border: var(--font-selector-border);\n background-color: var(--card-list-background-color);\n\n position: relative;\n }\n\n .card .button-container {\n position: absolute;\n right: 0;\n height: 100%;\n display: flex;\n direction: rtl;\n flex-direction: column;\n flex-wrap: wrap;\n }\n\n .card .button-container > mwc-icon {\n background-color: var(--font-selector-icon-background-color);\n text-align: center;\n width: var(--font-selector-icon-size);\n height: var(--font-selector-icon-size);\n font: var(--font-selector-icon-font);\n color: var(--font-selector-icon-color);\n }\n\n .card .button-container > mwc-icon:last-child {\n border-bottom-left-radius: 12px;\n }\n\n .card .button-container > mwc-icon:hover,\n .card .button-container > mwc-icon:active {\n background-color: var(--primary-color);\n color: #fff;\n }\n\n #main .card.create {\n overflow: visible;\n background-color: initial;\n }\n\n #main .card:hover {\n cursor: pointer;\n }\n\n [face] {\n flex: 1;\n }\n\n [name] {\n background-color: var(--board-renderer-name-background-color);\n opacity: 0.8;\n margin-top: -35px;\n width: 100%;\n color: #fff;\n font-weight: bolder;\n font-size: 13px;\n text-indent: 7px;\n }\n\n [provider] {\n background-color: rgba(0, 0, 0, 0.7);\n width: 100%;\n min-height: 15px;\n font-size: 0.6rem;\n color: #fff;\n text-indent: 7px;\n }\n\n #filter {\n padding: var(--popup-content-padding);\n background-color: var(--font-tools-background-color);\n box-shadow: var(--box-shadow);\n\n position: absolute;\n width: 100%;\n box-sizing: border-box;\n z-index: 1;\n }\n\n #filter * {\n font-size: 15px;\n }\n\n select {\n text-transform: capitalize;\n float: right;\n }\n `\n ]\n\n @property({ type: Array }) fonts: Array<any> = []\n @property({ type: Boolean }) creatable: boolean = false\n @property({ type: String }) provider: string = ''\n\n @query('#main') main!: HTMLElement\n @query('#filter') filter!: HTMLElement\n @query('font-creation-card') creationCard!: { reset: () => {} }\n\n showGotoTop: boolean = false\n\n render() {\n var fonts = this.fonts || []\n\n return html`\n <div id=\"filter\">\n <select\n @change=${(e: Event) => {\n this.provider = (e.currentTarget as HTMLInputElement).value\n }}\n >\n <option value=\"\">--${i18next.t('text.please choose a provider')}--</option>\n ${['google', 'custom'].map(provider => html` <option value=${provider}>${provider}</option> `)}\n </select>\n </div>\n\n <div id=\"main\">\n ${this.creatable\n ? html`\n <font-creation-card\n class=\"card create\"\n @create-font=${(e: CustomEvent) => this.onCreateFont(e)}\n ></font-creation-card>\n `\n : html``}\n ${fonts\n .filter(font => (this.provider ? font.provider === this.provider : true))\n .map(\n font => html`\n <div class=\"card\" @click=${(e: Event) => this.onClickSelect(font)}>\n <div face>\n <font .face=${font.name}>ABCDEFGHIJKLMN</font>\n <font .face=${font.name}>abcdefghijklmn</font>\n </div>\n <div name>${font.name}</div>\n <div provider>${font.provider}</div>\n <div class=\"button-container\">\n <mwc-icon\n @click=${(e: Event) => {\n e.stopPropagation()\n this.toggleActive(font)\n }}\n >${font.active ? 'check_box' : 'check_box_outline_blank'}</mwc-icon\n >\n <mwc-icon\n @click=${(e: Event) => {\n e.stopPropagation()\n this.deleteFont(font)\n }}\n >delete</mwc-icon\n >\n </div>\n </div>\n `\n )}\n </div>\n `\n }\n\n async firstUpdated() {\n var list = this.renderRoot.querySelector('#main')\n\n pulltorefresh({\n container: this.renderRoot,\n scrollable: list,\n refresh: () => {\n return this.refresh()\n }\n })\n\n /* for headroom */\n this.main.addEventListener('scroll', e => {\n const target = e.target as HTMLElement\n this.showGotoTop = target.scrollTop !== 0\n })\n\n await this.requestUpdate()\n\n var originPaddingTop = parseFloat(getComputedStyle(this.main, null).getPropertyValue('padding-top'))\n this.main.style.paddingTop = this.filter.clientHeight + originPaddingTop + 'px'\n var headroom = new Headroom(this.filter, {\n scroller: this.main\n })\n headroom.init()\n }\n\n stateChanged(state: any) {\n this.fonts = state.font\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('fonts')) {\n this.creationCard.reset()\n }\n }\n\n async refresh() {\n return store.dispatch(actionUpdateFontList() as any)\n }\n\n async toggleActive(font: { id: string; active: boolean }) {\n try {\n await updateFont({ id: font.id, active: !font.active })\n this.refresh()\n } catch (e) {\n console.error(e)\n }\n }\n\n async onCreateFont(e: CustomEvent) {\n try {\n await createFont(e.detail)\n this.refresh()\n } catch (e) {\n console.error(e)\n }\n }\n\n async deleteFont(font: { id: string }) {\n try {\n await deleteFont(font.id)\n this.refresh()\n } catch (e) {\n console.error(e)\n }\n }\n\n onClickSelect(font: any) {\n this.dispatchEvent(\n new CustomEvent('font-selected', {\n composed: true,\n bubbles: true,\n detail: {\n font\n }\n })\n )\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"font-selector.js","sourceRoot":"","sources":["../../src/font-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\nimport './font-creation-card'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport Headroom from '@operato/headroom'\nimport { i18next, localize } from '@operato/i18n'\nimport { pulltorefresh } from '@operato/pull-to-refresh'\nimport { store } from '@operato/shell'\nimport { HeadroomStyles, ScrollbarStyles } from '@operato/styles'\n\nimport { createFont, deleteFont, updateFont } from './font-graphql-client'\nimport { actionUpdateFontList } from './redux-font-actions'\n\n@customElement('font-selector')\nexport class FontSelector extends localize(i18next)(connect(store)(LitElement)) {\n static styles = [\n ScrollbarStyles,\n HeadroomStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n background-color: var(--popup-content-background-color);\n\n position: relative;\n }\n\n #main {\n overflow: auto;\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n grid-auto-rows: var(--card-list-rows-height);\n grid-gap: 20px;\n box-sizing: border-box;\n padding: var(--popup-content-padding);\n }\n\n #main .card {\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n border-radius: var(--card-list-border-radius);\n border: var(--font-selector-border);\n background-color: var(--card-list-background-color);\n\n position: relative;\n }\n\n .card .button-container {\n position: absolute;\n right: 0;\n height: 100%;\n display: flex;\n direction: rtl;\n flex-direction: column;\n flex-wrap: wrap;\n }\n\n .card .button-container > md-icon {\n background-color: var(--font-selector-icon-background-color);\n text-align: center;\n width: var(--font-selector-icon-size);\n height: var(--font-selector-icon-size);\n font: var(--font-selector-icon-font);\n color: var(--font-selector-icon-color);\n }\n\n .card .button-container > md-icon:last-child {\n border-bottom-left-radius: 12px;\n }\n\n .card .button-container > md-icon:hover,\n .card .button-container > md-icon:active {\n background-color: var(--primary-color);\n color: #fff;\n }\n\n #main .card.create {\n overflow: visible;\n background-color: initial;\n }\n\n #main .card:hover {\n cursor: pointer;\n }\n\n [face] {\n flex: 1;\n }\n\n [name] {\n background-color: var(--board-renderer-name-background-color);\n opacity: 0.8;\n margin-top: -35px;\n width: 100%;\n color: #fff;\n font-weight: bolder;\n font-size: 13px;\n text-indent: 7px;\n }\n\n [provider] {\n background-color: rgba(0, 0, 0, 0.7);\n width: 100%;\n min-height: 15px;\n font-size: 0.6rem;\n color: #fff;\n text-indent: 7px;\n }\n\n #filter {\n background-color: var(--font-tools-background-color);\n box-shadow: var(--box-shadow);\n\n position: absolute;\n width: 100%;\n box-sizing: border-box;\n z-index: 1;\n }\n\n #filter * {\n font-size: 15px;\n }\n\n ox-select {\n text-transform: capitalize;\n float: right;\n }\n `\n ]\n\n @property({ type: Array }) fonts: Array<any> = []\n @property({ type: Boolean }) creatable: boolean = false\n @property({ type: String }) provider: string = ''\n\n @query('#main') main!: HTMLElement\n @query('#filter') filter!: HTMLElement\n @query('font-creation-card') creationCard!: { reset: () => {} }\n\n showGotoTop: boolean = false\n\n render() {\n var fonts = this.fonts || []\n\n return html`\n <div id=\"filter\">\n <ox-select\n .placeholder=${i18next.t('text.please choose a provider')}\n .value=${this.provider}\n @change=${(e: Event) => {\n this.provider = (e.currentTarget as HTMLInputElement).value\n }}\n >\n <ox-popup-list>\n ${['', 'google', 'custom'].map(provider => html` <div option value=${provider}>${provider} </div> `)}\n </ox-popup-list>\n </ox-select>\n </div>\n\n <div id=\"main\">\n ${this.creatable\n ? html`\n <font-creation-card\n class=\"card create\"\n @create-font=${(e: CustomEvent) => this.onCreateFont(e)}\n ></font-creation-card>\n `\n : html``}\n ${fonts\n .filter(font => (this.provider ? font.provider === this.provider : true))\n .map(\n font => html`\n <div class=\"card\" @click=${(e: Event) => this.onClickSelect(font)}>\n <div face>\n <font .face=${font.name}>ABCDEFGHIJKLMN</font>\n <font .face=${font.name}>abcdefghijklmn</font>\n </div>\n <div name>${font.name}</div>\n <div provider>${font.provider}</div>\n <div class=\"button-container\">\n <md-icon\n @click=${(e: Event) => {\n e.stopPropagation()\n this.toggleActive(font)\n }}\n >${font.active ? 'check_box' : 'check_box_outline_blank'}</md-icon\n >\n <md-icon\n @click=${(e: Event) => {\n e.stopPropagation()\n this.deleteFont(font)\n }}\n >delete</md-icon\n >\n </div>\n </div>\n `\n )}\n </div>\n `\n }\n\n async firstUpdated() {\n var list = this.renderRoot.querySelector('#main')\n\n pulltorefresh({\n container: this.renderRoot,\n scrollable: list,\n refresh: () => {\n return this.refresh()\n }\n })\n\n /* for headroom */\n this.main.addEventListener('scroll', e => {\n const target = e.target as HTMLElement\n this.showGotoTop = target.scrollTop !== 0\n })\n\n await this.requestUpdate()\n\n var originPaddingTop = parseFloat(getComputedStyle(this.main, null).getPropertyValue('padding-top'))\n this.main.style.paddingTop = this.filter.clientHeight + originPaddingTop + 'px'\n var headroom = new Headroom(this.filter, {\n scroller: this.main\n })\n headroom.init()\n }\n\n stateChanged(state: any) {\n this.fonts = state.font\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('fonts')) {\n this.creationCard.reset()\n }\n }\n\n async refresh() {\n return store.dispatch(actionUpdateFontList() as any)\n }\n\n async toggleActive(font: { id: string; active: boolean }) {\n try {\n await updateFont({ id: font.id, active: !font.active })\n this.refresh()\n } catch (e) {\n console.error(e)\n }\n }\n\n async onCreateFont(e: CustomEvent) {\n try {\n await createFont(e.detail)\n this.refresh()\n } catch (e) {\n console.error(e)\n }\n }\n\n async deleteFont(font: { id: string }) {\n try {\n await deleteFont(font.id)\n this.refresh()\n } catch (e) {\n console.error(e)\n }\n }\n\n onClickSelect(font: any) {\n this.dispatchEvent(\n new CustomEvent('font-selected', {\n composed: true,\n bubbles: true,\n detail: {\n font\n }\n })\n )\n }\n}\n"]}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import '@material/
|
|
2
|
-
import '@material/mwc-icon-button';
|
|
1
|
+
import '@material/web/icon/icon.js';
|
|
3
2
|
import { LitElement } from 'lit';
|
|
4
3
|
export declare class OxFileSelector extends LitElement {
|
|
5
4
|
static styles: import("lit").CSSResult[];
|
|
@@ -8,5 +7,5 @@ export declare class OxFileSelector extends LitElement {
|
|
|
8
7
|
showFilename: boolean;
|
|
9
8
|
multiple: boolean;
|
|
10
9
|
_files: Array<any>;
|
|
11
|
-
render(): import("lit").TemplateResult<1>;
|
|
10
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
12
11
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import '@material/
|
|
3
|
-
import '@material/mwc-icon-button';
|
|
2
|
+
import '@material/web/icon/icon.js';
|
|
4
3
|
import { LitElement, css, html } from 'lit';
|
|
5
4
|
import { customElement, property } from 'lit/decorators.js';
|
|
6
5
|
let OxFileSelector = class OxFileSelector extends LitElement {
|