@operato/font 2.0.0-alpha.9 → 2.0.0-alpha.92

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 CHANGED
@@ -3,6 +3,435 @@
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.92](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.91...v2.0.0-alpha.92) (2024-04-19)
7
+
8
+ **Note:** Version bump only for package @operato/font
9
+
10
+
11
+
12
+
13
+
14
+ ## [2.0.0-alpha.90](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.89...v2.0.0-alpha.90) (2024-04-18)
15
+
16
+ **Note:** Version bump only for package @operato/font
17
+
18
+
19
+
20
+
21
+
22
+ ## [2.0.0-alpha.89](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.88...v2.0.0-alpha.89) (2024-04-18)
23
+
24
+ **Note:** Version bump only for package @operato/font
25
+
26
+
27
+
28
+
29
+
30
+ ## [2.0.0-alpha.88](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.87...v2.0.0-alpha.88) (2024-04-18)
31
+
32
+ **Note:** Version bump only for package @operato/font
33
+
34
+
35
+
36
+
37
+
38
+ ## [2.0.0-alpha.87](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.86...v2.0.0-alpha.87) (2024-04-17)
39
+
40
+ **Note:** Version bump only for package @operato/font
41
+
42
+
43
+
44
+
45
+
46
+ ## [2.0.0-alpha.86](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.85...v2.0.0-alpha.86) (2024-04-16)
47
+
48
+ **Note:** Version bump only for package @operato/font
49
+
50
+
51
+
52
+
53
+
54
+ ## [2.0.0-alpha.85](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.84...v2.0.0-alpha.85) (2024-04-16)
55
+
56
+ **Note:** Version bump only for package @operato/font
57
+
58
+
59
+
60
+
61
+
62
+ ## [2.0.0-alpha.82](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.81...v2.0.0-alpha.82) (2024-04-15)
63
+
64
+
65
+ ### :bug: Bug Fix
66
+
67
+ * correct import ([a3587dd](https://github.com/hatiolab/operato/commit/a3587dd65903a0acaa7b25aa4ef15b2d85aaf418))
68
+
69
+
70
+
71
+ ## [2.0.0-alpha.81](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.80...v2.0.0-alpha.81) (2024-04-15)
72
+
73
+ **Note:** Version bump only for package @operato/font
74
+
75
+
76
+
77
+
78
+
79
+ ## [2.0.0-alpha.80](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.79...v2.0.0-alpha.80) (2024-04-15)
80
+
81
+ **Note:** Version bump only for package @operato/font
82
+
83
+
84
+
85
+
86
+
87
+ ## [2.0.0-alpha.77](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.76...v2.0.0-alpha.77) (2024-04-14)
88
+
89
+ **Note:** Version bump only for package @operato/font
90
+
91
+
92
+
93
+
94
+
95
+ ## [2.0.0-alpha.71](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.70...v2.0.0-alpha.71) (2024-04-13)
96
+
97
+ **Note:** Version bump only for package @operato/font
98
+
99
+
100
+
101
+
102
+
103
+ ## [2.0.0-alpha.70](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.69...v2.0.0-alpha.70) (2024-04-13)
104
+
105
+ **Note:** Version bump only for package @operato/font
106
+
107
+
108
+
109
+
110
+
111
+ ## [2.0.0-alpha.69](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.68...v2.0.0-alpha.69) (2024-04-13)
112
+
113
+
114
+ ### :bug: Bug Fix
115
+
116
+ * mwc=>md for context ([972f5fd](https://github.com/hatiolab/operato/commit/972f5fd8da02820b6d6238cf1dd099591f97d8df))
117
+
118
+
119
+
120
+ ## [2.0.0-alpha.68](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.67...v2.0.0-alpha.68) (2024-04-13)
121
+
122
+
123
+ ### :bug: Bug Fix
124
+
125
+ * mwc=>md for context ([2bc13f2](https://github.com/hatiolab/operato/commit/2bc13f285f257782f73e5d7b5d1ddd197df85393))
126
+
127
+
128
+
129
+ ## [2.0.0-alpha.64](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.63...v2.0.0-alpha.64) (2024-04-13)
130
+
131
+ **Note:** Version bump only for package @operato/font
132
+
133
+
134
+
135
+
136
+
137
+ ## [2.0.0-alpha.63](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.62...v2.0.0-alpha.63) (2024-04-12)
138
+
139
+ **Note:** Version bump only for package @operato/font
140
+
141
+
142
+
143
+
144
+
145
+ ## [2.0.0-alpha.62](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.61...v2.0.0-alpha.62) (2024-04-12)
146
+
147
+ **Note:** Version bump only for package @operato/font
148
+
149
+
150
+
151
+
152
+
153
+ ## [2.0.0-alpha.61](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.60...v2.0.0-alpha.61) (2024-04-11)
154
+
155
+ **Note:** Version bump only for package @operato/font
156
+
157
+
158
+
159
+
160
+
161
+ ## [2.0.0-alpha.60](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.59...v2.0.0-alpha.60) (2024-04-11)
162
+
163
+ **Note:** Version bump only for package @operato/font
164
+
165
+
166
+
167
+
168
+
169
+ ## [2.0.0-alpha.59](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.58...v2.0.0-alpha.59) (2024-04-11)
170
+
171
+ **Note:** Version bump only for package @operato/font
172
+
173
+
174
+
175
+
176
+
177
+ ## [2.0.0-alpha.58](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.57...v2.0.0-alpha.58) (2024-04-07)
178
+
179
+
180
+ ### :bug: Bug Fix
181
+
182
+ * font selector ([38e79f5](https://github.com/hatiolab/operato/commit/38e79f54fc4cb6024d3249c1e8f3167618571fdc))
183
+
184
+
185
+
186
+ ## [2.0.0-alpha.57](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.56...v2.0.0-alpha.57) (2024-04-07)
187
+
188
+ **Note:** Version bump only for package @operato/font
189
+
190
+
191
+
192
+
193
+
194
+
195
+
196
+ **Note:** Version bump only for package @operato/font
197
+
198
+
199
+
200
+
201
+
202
+ ## [2.0.0-alpha.54](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.53...v2.0.0-alpha.54) (2024-04-01)
203
+
204
+ **Note:** Version bump only for package @operato/font
205
+
206
+
207
+
208
+
209
+
210
+ ## [2.0.0-alpha.52](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.51...v2.0.0-alpha.52) (2024-03-29)
211
+
212
+ **Note:** Version bump only for package @operato/font
213
+
214
+
215
+
216
+
217
+
218
+ ## [2.0.0-alpha.51](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.50...v2.0.0-alpha.51) (2024-03-29)
219
+
220
+ **Note:** Version bump only for package @operato/font
221
+
222
+
223
+
224
+
225
+
226
+ ## [2.0.0-alpha.50](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.49...v2.0.0-alpha.50) (2024-03-28)
227
+
228
+ **Note:** Version bump only for package @operato/font
229
+
230
+
231
+
232
+
233
+
234
+ ## [2.0.0-alpha.49](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.48...v2.0.0-alpha.49) (2024-03-28)
235
+
236
+ **Note:** Version bump only for package @operato/font
237
+
238
+
239
+
240
+
241
+
242
+ ## [2.0.0-alpha.48](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.47...v2.0.0-alpha.48) (2024-03-28)
243
+
244
+ **Note:** Version bump only for package @operato/font
245
+
246
+
247
+
248
+
249
+
250
+ ## [2.0.0-alpha.47](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.46...v2.0.0-alpha.47) (2024-03-27)
251
+
252
+ **Note:** Version bump only for package @operato/font
253
+
254
+
255
+
256
+
257
+
258
+ ## [2.0.0-alpha.46](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.45...v2.0.0-alpha.46) (2024-03-26)
259
+
260
+ **Note:** Version bump only for package @operato/font
261
+
262
+
263
+
264
+
265
+
266
+ ## [2.0.0-alpha.44](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.43...v2.0.0-alpha.44) (2024-03-24)
267
+
268
+ **Note:** Version bump only for package @operato/font
269
+
270
+
271
+
272
+
273
+
274
+ ## [2.0.0-alpha.43](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.42...v2.0.0-alpha.43) (2024-03-24)
275
+
276
+ **Note:** Version bump only for package @operato/font
277
+
278
+
279
+
280
+
281
+
282
+ ## [2.0.0-alpha.37](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.36...v2.0.0-alpha.37) (2024-03-18)
283
+
284
+ **Note:** Version bump only for package @operato/font
285
+
286
+
287
+
288
+
289
+
290
+ ## [2.0.0-alpha.35](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.34...v2.0.0-alpha.35) (2024-03-13)
291
+
292
+ **Note:** Version bump only for package @operato/font
293
+
294
+
295
+
296
+
297
+
298
+ ## [2.0.0-alpha.34](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.33...v2.0.0-alpha.34) (2024-03-12)
299
+
300
+ **Note:** Version bump only for package @operato/font
301
+
302
+
303
+
304
+
305
+
306
+ ## [2.0.0-alpha.32](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.31...v2.0.0-alpha.32) (2024-03-12)
307
+
308
+ **Note:** Version bump only for package @operato/font
309
+
310
+
311
+
312
+
313
+
314
+ ## [2.0.0-alpha.31](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.30...v2.0.0-alpha.31) (2024-03-03)
315
+
316
+ **Note:** Version bump only for package @operato/font
317
+
318
+
319
+
320
+
321
+
322
+ ## [2.0.0-alpha.30](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.29...v2.0.0-alpha.30) (2024-03-03)
323
+
324
+ **Note:** Version bump only for package @operato/font
325
+
326
+
327
+
328
+
329
+
330
+ ## [2.0.0-alpha.28](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.27...v2.0.0-alpha.28) (2024-02-20)
331
+
332
+
333
+ ### :bug: Bug Fix
334
+
335
+ * upgrade devDependencies for webcomponents ([1489b8b](https://github.com/hatiolab/operato/commit/1489b8b790d9bcee779a070a630697f25c01728f))
336
+
337
+
338
+
339
+ ## [2.0.0-alpha.27](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.26...v2.0.0-alpha.27) (2024-02-17)
340
+
341
+ **Note:** Version bump only for package @operato/font
342
+
343
+
344
+
345
+
346
+
347
+ ## [2.0.0-alpha.23](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.22...v2.0.0-alpha.23) (2024-02-10)
348
+
349
+ **Note:** Version bump only for package @operato/font
350
+
351
+
352
+
353
+
354
+
355
+ ## [2.0.0-alpha.22](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.21...v2.0.0-alpha.22) (2024-02-10)
356
+
357
+ **Note:** Version bump only for package @operato/font
358
+
359
+
360
+
361
+
362
+
363
+ ## [2.0.0-alpha.21](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.20...v2.0.0-alpha.21) (2024-02-09)
364
+
365
+ **Note:** Version bump only for package @operato/font
366
+
367
+
368
+
369
+
370
+
371
+ ## [2.0.0-alpha.20](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.19...v2.0.0-alpha.20) (2024-02-05)
372
+
373
+ **Note:** Version bump only for package @operato/font
374
+
375
+
376
+
377
+
378
+
379
+ ## [2.0.0-alpha.19](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.18...v2.0.0-alpha.19) (2024-02-05)
380
+
381
+ **Note:** Version bump only for package @operato/font
382
+
383
+
384
+
385
+
386
+
387
+ ## [2.0.0-alpha.17](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.16...v2.0.0-alpha.17) (2024-02-04)
388
+
389
+ **Note:** Version bump only for package @operato/font
390
+
391
+
392
+
393
+
394
+
395
+ ## [2.0.0-alpha.16](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.15...v2.0.0-alpha.16) (2024-02-03)
396
+
397
+ **Note:** Version bump only for package @operato/font
398
+
399
+
400
+
401
+
402
+
403
+ ## [2.0.0-alpha.13](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.12...v2.0.0-alpha.13) (2024-01-28)
404
+
405
+ **Note:** Version bump only for package @operato/font
406
+
407
+
408
+
409
+
410
+
411
+ ## [2.0.0-alpha.12](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.11...v2.0.0-alpha.12) (2024-01-24)
412
+
413
+ **Note:** Version bump only for package @operato/font
414
+
415
+
416
+
417
+
418
+
419
+ ## [2.0.0-alpha.11](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.10...v2.0.0-alpha.11) (2024-01-24)
420
+
421
+ **Note:** Version bump only for package @operato/font
422
+
423
+
424
+
425
+
426
+
427
+ ## [2.0.0-alpha.10](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.9...v2.0.0-alpha.10) (2024-01-22)
428
+
429
+ **Note:** Version bump only for package @operato/font
430
+
431
+
432
+
433
+
434
+
6
435
  ## [2.0.0-alpha.9](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.8...v2.0.0-alpha.9) (2024-01-20)
7
436
 
8
437
  **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><mwc-icon>add_circle_outline</mwc-icon>create font</div>
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] mwc-icon {
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=\"\">&nbsp;</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=\"\">&nbsp;</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,6 @@
1
+ import '@material/web/icon/icon.js';
2
+ import '@operato/input/ox-select.js';
3
+ import '@operato/popup/ox-popup-list.js';
1
4
  import './font-creation-card';
2
5
  import { LitElement, PropertyValues } from 'lit';
3
6
  declare const FontSelector_base: (new (...args: any[]) => LitElement) & (new (...args: any[]) => {
@@ -18,7 +21,7 @@ export declare class FontSelector extends FontSelector_base {
18
21
  reset: () => {};
19
22
  };
20
23
  showGotoTop: boolean;
21
- render(): import("lit").TemplateResult<1>;
24
+ render(): import("lit-html").TemplateResult<1>;
22
25
  firstUpdated(): Promise<void>;
23
26
  stateChanged(state: any): void;
24
27
  updated(changes: PropertyValues<this>): void;
@@ -1,4 +1,7 @@
1
1
  import { __decorate } from "tslib";
2
+ import '@material/web/icon/icon.js';
3
+ import '@operato/input/ox-select.js';
4
+ import '@operato/popup/ox-popup-list.js';
2
5
  import './font-creation-card';
3
6
  import { css, html, LitElement } from 'lit';
4
7
  import { customElement, property, query } from 'lit/decorators.js';
@@ -22,14 +25,17 @@ let FontSelector = class FontSelector extends localize(i18next)(connect(store)(L
22
25
  var fonts = this.fonts || [];
23
26
  return html `
24
27
  <div id="filter">
25
- <select
28
+ <ox-select
29
+ .placeholder=${i18next.t('text.please choose a provider')}
30
+ .value=${this.provider}
26
31
  @change=${(e) => {
27
32
  this.provider = e.currentTarget.value;
28
33
  }}
29
34
  >
30
- <option value="">--${i18next.t('text.please choose a provider')}--</option>
31
- ${['google', 'custom'].map(provider => html ` <option value=${provider}>${provider}</option> `)}
32
- </select>
35
+ <ox-popup-list>
36
+ ${['', 'google', 'custom'].map(provider => html ` <div option value=${provider}>${provider}&nbsp;</div> `)}
37
+ </ox-popup-list>
38
+ </ox-select>
33
39
  </div>
34
40
 
35
41
  <div id="main">
@@ -52,19 +58,19 @@ let FontSelector = class FontSelector extends localize(i18next)(connect(store)(L
52
58
  <div name>${font.name}</div>
53
59
  <div provider>${font.provider}</div>
54
60
  <div class="button-container">
55
- <mwc-icon
61
+ <md-icon
56
62
  @click=${(e) => {
57
63
  e.stopPropagation();
58
64
  this.toggleActive(font);
59
65
  }}
60
- >${font.active ? 'check_box' : 'check_box_outline_blank'}</mwc-icon
66
+ >${font.active ? 'check_box' : 'check_box_outline_blank'}</md-icon
61
67
  >
62
- <mwc-icon
68
+ <md-icon
63
69
  @click=${(e) => {
64
70
  e.stopPropagation();
65
71
  this.deleteFont(font);
66
72
  }}
67
- >delete</mwc-icon
73
+ >delete</md-icon
68
74
  >
69
75
  </div>
70
76
  </div>
@@ -157,12 +163,12 @@ FontSelector.styles = [
157
163
 
158
164
  #main {
159
165
  overflow: auto;
160
- padding: var(--popup-content-padding);
161
166
  display: grid;
162
167
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
163
168
  grid-auto-rows: var(--card-list-rows-height);
164
169
  grid-gap: 20px;
165
170
  box-sizing: border-box;
171
+ padding: var(--popup-content-padding);
166
172
  }
167
173
 
168
174
  #main .card {
@@ -187,7 +193,7 @@ FontSelector.styles = [
187
193
  flex-wrap: wrap;
188
194
  }
189
195
 
190
- .card .button-container > mwc-icon {
196
+ .card .button-container > md-icon {
191
197
  background-color: var(--font-selector-icon-background-color);
192
198
  text-align: center;
193
199
  width: var(--font-selector-icon-size);
@@ -196,12 +202,12 @@ FontSelector.styles = [
196
202
  color: var(--font-selector-icon-color);
197
203
  }
198
204
 
199
- .card .button-container > mwc-icon:last-child {
205
+ .card .button-container > md-icon:last-child {
200
206
  border-bottom-left-radius: 12px;
201
207
  }
202
208
 
203
- .card .button-container > mwc-icon:hover,
204
- .card .button-container > mwc-icon:active {
209
+ .card .button-container > md-icon:hover,
210
+ .card .button-container > md-icon:active {
205
211
  background-color: var(--primary-color);
206
212
  color: #fff;
207
213
  }
@@ -240,7 +246,6 @@ FontSelector.styles = [
240
246
  }
241
247
 
242
248
  #filter {
243
- padding: var(--popup-content-padding);
244
249
  background-color: var(--font-tools-background-color);
245
250
  box-shadow: var(--box-shadow);
246
251
 
@@ -254,7 +259,7 @@ FontSelector.styles = [
254
259
  font-size: 15px;
255
260
  }
256
261
 
257
- select {
262
+ ox-select {
258
263
  text-transform: capitalize;
259
264
  float: right;
260
265
  }