@operato/input 1.0.0-beta.12 → 1.0.0-beta.15
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 +40 -0
- package/demo/index-multiple-colors.html +4 -1
- package/demo/index-partition-keys.html +2 -5
- package/demo/index.html +4 -0
- package/dist/src/locales/en.d.ts +8 -0
- package/dist/src/locales/en.js +8 -0
- package/dist/src/locales/en.js.map +1 -1
- package/dist/src/locales/ko.d.ts +8 -0
- package/dist/src/locales/ko.js +8 -0
- package/dist/src/locales/ko.js.map +1 -1
- package/dist/src/locales/ms.d.ts +8 -0
- package/dist/src/locales/ms.js +8 -0
- package/dist/src/locales/ms.js.map +1 -1
- package/dist/src/locales/zh.d.ts +8 -0
- package/dist/src/locales/zh.js +8 -0
- package/dist/src/locales/zh.js.map +1 -1
- package/dist/src/ox-input-3dish.js +24 -8
- package/dist/src/ox-input-3dish.js.map +1 -1
- package/dist/src/ox-input-color.js +16 -11
- package/dist/src/ox-input-color.js.map +1 -1
- package/dist/src/ox-input-crontab.js +13 -10
- package/dist/src/ox-input-crontab.js.map +1 -1
- package/dist/src/ox-input-multiple-colors.d.ts +1 -0
- package/dist/src/ox-input-multiple-colors.js +29 -21
- package/dist/src/ox-input-multiple-colors.js.map +1 -1
- package/dist/src/ox-input-options.d.ts +1 -0
- package/dist/src/ox-input-options.js +54 -14
- package/dist/src/ox-input-options.js.map +1 -1
- package/dist/src/ox-input-partition-keys.d.ts +1 -0
- package/dist/src/ox-input-partition-keys.js +51 -23
- package/dist/src/ox-input-partition-keys.js.map +1 -1
- package/dist/src/ox-input-search.js +7 -2
- package/dist/src/ox-input-search.js.map +1 -1
- package/dist/src/ox-input-unit.d.ts +17 -0
- package/dist/src/ox-input-unit.js +112 -0
- package/dist/src/ox-input-unit.js.map +1 -0
- package/dist/src/ox-input-work-shift.js +19 -17
- package/dist/src/ox-input-work-shift.js.map +1 -1
- package/dist/stories/ox-input-3dish.stories.d.ts +26 -0
- package/dist/stories/ox-input-3dish.stories.js +59 -0
- package/dist/stories/ox-input-3dish.stories.js.map +1 -0
- package/dist/stories/ox-input-barcode.stories.d.ts +33 -0
- package/dist/stories/ox-input-barcode.stories.js +22 -0
- package/dist/stories/ox-input-barcode.stories.js.map +1 -0
- package/dist/stories/ox-input-conntab.stories.d.ts +26 -0
- package/dist/stories/ox-input-conntab.stories.js +37 -0
- package/dist/stories/ox-input-conntab.stories.js.map +1 -0
- package/dist/stories/ox-input-multiple-colors.stories.d.ts +20 -0
- package/dist/stories/ox-input-multiple-colors.stories.js +167 -0
- package/dist/stories/ox-input-multiple-colors.stories.js.map +1 -0
- package/dist/stories/ox-input-options.stories.d.ts +25 -0
- package/dist/stories/ox-input-options.stories.js +33 -0
- package/dist/stories/ox-input-options.stories.js.map +1 -0
- package/dist/stories/ox-input-partition-keys.stories.d.ts +27 -0
- package/dist/stories/ox-input-partition-keys.stories.js +55 -0
- package/dist/stories/ox-input-partition-keys.stories.js.map +1 -0
- package/dist/stories/ox-input-range.stories.d.ts +37 -0
- package/dist/stories/ox-input-range.stories.js +25 -0
- package/dist/stories/ox-input-range.stories.js.map +1 -0
- package/dist/stories/ox-input-search.stories.d.ts +29 -0
- package/dist/stories/ox-input-search.stories.js +28 -0
- package/dist/stories/ox-input-search.stories.js.map +1 -0
- package/dist/stories/ox-input-unit.stories.d.ts +40 -0
- package/dist/stories/ox-input-unit.stories.js +41 -0
- package/dist/stories/ox-input-unit.stories.js.map +1 -0
- package/dist/stories/ox-input-work-shift.stories.d.ts +26 -0
- package/dist/stories/ox-input-work-shift.stories.js +59 -0
- package/dist/stories/ox-input-work-shift.stories.js.map +1 -0
- package/dist/stories/ox-select.stories.d.ts +30 -0
- package/dist/stories/ox-select.stories.js +82 -0
- package/dist/stories/ox-select.stories.js.map +1 -0
- package/dist/themes/common-grist-styles.d.ts +1 -0
- package/dist/themes/common-grist-styles.js +110 -0
- package/dist/themes/common-grist-styles.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +10 -10
- package/src/locales/en.ts +8 -0
- package/src/locales/ko.ts +8 -0
- package/src/locales/ms.ts +8 -0
- package/src/locales/zh.ts +8 -0
- package/src/ox-input-3dish.ts +24 -8
- package/src/ox-input-color.ts +17 -11
- package/src/ox-input-crontab.ts +13 -10
- package/src/ox-input-multiple-colors.ts +29 -21
- package/src/ox-input-options.ts +53 -13
- package/src/ox-input-partition-keys.ts +51 -22
- package/src/ox-input-search.ts +7 -2
- package/src/ox-input-unit.ts +112 -0
- package/src/ox-input-work-shift.ts +20 -17
- package/stories/ox-input-3dish.stories.ts +73 -0
- package/stories/ox-input-barcode.stories.ts +38 -0
- package/stories/ox-input-code.stories.ts_ +71 -0
- package/stories/ox-input-conntab.stories.ts +51 -0
- package/stories/ox-input-multiple-colors.stories.ts +178 -0
- package/stories/ox-input-options.stories.ts +47 -0
- package/stories/ox-input-partition-keys.stories.ts +71 -0
- package/stories/ox-input-range.stories.ts +42 -0
- package/stories/ox-input-search.stories.ts +43 -0
- package/stories/ox-input-unit.stories.ts +65 -0
- package/stories/ox-input-work-shift.stories.ts +73 -0
- package/stories/ox-select.stories.ts +100 -0
- package/themes/app-theme.css +142 -0
- package/themes/common-grist-styles.ts +110 -0
- package/themes/input-theme.css +19 -0
- package/xliff/en.xlf +24 -0
- package/xliff/ko.xlf +32 -0
- package/xliff/ms.xlf +24 -0
- package/xliff/zh.xlf +24 -0
- package/stories/index.stories.ts_ +0 -52
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,46 @@
|
|
|
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
|
+
## [1.0.0-beta.15](https://github.com/hatiolab/operato/compare/v1.0.0-beta.14...v1.0.0-beta.15) (2022-05-20)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @operato/input
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [1.0.0-beta.14](https://github.com/hatiolab/operato/compare/v1.0.0-beta.13...v1.0.0-beta.14) (2022-05-19)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @operato/input
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## [1.0.0-beta.13](https://github.com/hatiolab/operato/compare/v1.0.0-beta.12...v1.0.0-beta.13) (2022-05-19)
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
### :rocket: New Features
|
|
26
|
+
|
|
27
|
+
* add ox-input-unit ([06f5f56](https://github.com/hatiolab/operato/commit/06f5f56fa0dd56fed973b399ac4dc42a383c8ad4))
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
### :bug: Bug Fix
|
|
31
|
+
|
|
32
|
+
* incorrect package.json scripts for storybooks ([8c8c405](https://github.com/hatiolab/operato/commit/8c8c405443247108b9c411b8161c008d9b6a2261))
|
|
33
|
+
* input partition keys style ([191bba8](https://github.com/hatiolab/operato/commit/191bba85a9f2d214f4bceaadde4e013cad50789a))
|
|
34
|
+
* input partition keys style ([393a59d](https://github.com/hatiolab/operato/commit/393a59d1229045067c06cd06285c92770a8631c1))
|
|
35
|
+
* multiple color style ([e558bb4](https://github.com/hatiolab/operato/commit/e558bb4470b6542a2562f9929575ef436f3d3a0f))
|
|
36
|
+
* ox input style ([989bdbb](https://github.com/hatiolab/operato/commit/989bdbb9bfd4ca7b4bdb1f3391bd96b75cbbffed))
|
|
37
|
+
* storyboard for inputs ([c38e6e7](https://github.com/hatiolab/operato/commit/c38e6e70b5351955a4d0571e6cb0fe3875d2f254))
|
|
38
|
+
* storybook & input multiple colors ([a7e4319](https://github.com/hatiolab/operato/commit/a7e431953479156979ae48c9bad0a213519bca2b))
|
|
39
|
+
* storybook for data-grist ([ae0ad52](https://github.com/hatiolab/operato/commit/ae0ad52d642454c70a4e27f262b8811f7e53f420))
|
|
40
|
+
* storybook for inputs ([72f7992](https://github.com/hatiolab/operato/commit/72f7992d902528e3a5ca0f3f0f3897902b6b13bd))
|
|
41
|
+
* storybook for ox-input-range ([4f3c44f](https://github.com/hatiolab/operato/commit/4f3c44ff285b4bfb61a03d93df3f73551b75b62a))
|
|
42
|
+
* upgrade @zxing/library ([b9749cb](https://github.com/hatiolab/operato/commit/b9749cb2986067ffa1c2d03e91d3eb18e6729f56))
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
6
46
|
## [1.0.0-beta.12](https://github.com/hatiolab/operato/compare/v1.0.0-beta.11...v1.0.0-beta.12) (2022-05-13)
|
|
7
47
|
|
|
8
48
|
|
|
@@ -7,13 +7,16 @@
|
|
|
7
7
|
background: #fafafa;
|
|
8
8
|
}
|
|
9
9
|
</style>
|
|
10
|
+
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
11
|
+
<link href="/themes/input-theme.css" rel="stylesheet" />
|
|
12
|
+
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
|
|
10
13
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
|
|
11
14
|
</head>
|
|
12
15
|
<body>
|
|
13
16
|
<form id="demo"></form>
|
|
14
17
|
|
|
15
18
|
<script type="module">
|
|
16
|
-
import { html, render } from 'lit'
|
|
19
|
+
import { html, css, render } from 'lit'
|
|
17
20
|
import '../dist/src/ox-input-multiple-colors.js'
|
|
18
21
|
|
|
19
22
|
const form = document.querySelector('#demo')
|
|
@@ -2,11 +2,8 @@
|
|
|
2
2
|
<html lang="en-GB">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
background: #fafafa;
|
|
8
|
-
}
|
|
9
|
-
</style>
|
|
5
|
+
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
6
|
+
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
|
|
10
7
|
</head>
|
|
11
8
|
<body>
|
|
12
9
|
<form id="demo"></form>
|
package/demo/index.html
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
<html lang="en-GB">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
|
|
5
6
|
<style>
|
|
6
7
|
body {
|
|
7
8
|
background: #fafafa;
|
|
@@ -11,6 +12,9 @@
|
|
|
11
12
|
display: block;
|
|
12
13
|
}
|
|
13
14
|
</style>
|
|
15
|
+
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
16
|
+
<link href="/themes/input-theme.css" rel="stylesheet" />
|
|
17
|
+
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
|
|
14
18
|
</head>
|
|
15
19
|
<body>
|
|
16
20
|
<a href="./index-3dish.html">3dish</a>
|
package/dist/src/locales/en.d.ts
CHANGED
|
@@ -6,4 +6,12 @@ export declare const templates: {
|
|
|
6
6
|
sf95fdd7da4fc2295: string;
|
|
7
7
|
s6aacb9fbb71a1d91: string;
|
|
8
8
|
s075cb2f53173bd8a: string;
|
|
9
|
+
sc4bcadba8e631b86: string;
|
|
10
|
+
s63c6e58ec805a9eb: string;
|
|
11
|
+
sfcc01216c601ec9e: string;
|
|
12
|
+
s685db98545dc9448: string;
|
|
13
|
+
s77c8560cf63a372d: string;
|
|
14
|
+
s42670fc325584e15: string;
|
|
15
|
+
s29ec9210c8a8222e: string;
|
|
16
|
+
scff69aa7239287b0: string;
|
|
9
17
|
};
|
package/dist/src/locales/en.js
CHANGED
|
@@ -10,5 +10,13 @@ export const templates = {
|
|
|
10
10
|
'sf95fdd7da4fc2295': `translate`,
|
|
11
11
|
's6aacb9fbb71a1d91': `scale`,
|
|
12
12
|
's075cb2f53173bd8a': `rotate`,
|
|
13
|
+
'sc4bcadba8e631b86': `name`,
|
|
14
|
+
's63c6e58ec805a9eb': `from date`,
|
|
15
|
+
'sfcc01216c601ec9e': `from time`,
|
|
16
|
+
's685db98545dc9448': `to date`,
|
|
17
|
+
's77c8560cf63a372d': `to time`,
|
|
18
|
+
's42670fc325584e15': `The day before`,
|
|
19
|
+
's29ec9210c8a8222e': `The day`,
|
|
20
|
+
'scff69aa7239287b0': `The day after`,
|
|
13
21
|
};
|
|
14
22
|
//# sourceMappingURL=en.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"en.js","sourceRoot":"","sources":["../../../src/locales/en.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,QAAQ;IACnC,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,OAAO;IAC5B,mBAAmB,EAAE,QAAQ;
|
|
1
|
+
{"version":3,"file":"en.js","sourceRoot":"","sources":["../../../src/locales/en.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,QAAQ;IACnC,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,OAAO;IAC5B,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,MAAM;IAC3B,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,gBAAgB;IACrC,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,eAAe;CAC/B,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 'sf9b52aece5aed0f7': `x-axes`,\n's9f41d726ecec72c2': `y-axes`,\n's31be7a0b4a5853dd': `z-axes`,\n'sd793f87f18747a63': `dimension`,\n'sf95fdd7da4fc2295': `translate`,\n's6aacb9fbb71a1d91': `scale`,\n's075cb2f53173bd8a': `rotate`,\n'sc4bcadba8e631b86': `name`,\n's63c6e58ec805a9eb': `from date`,\n'sfcc01216c601ec9e': `from time`,\n's685db98545dc9448': `to date`,\n's77c8560cf63a372d': `to time`,\n's42670fc325584e15': `The day before`,\n's29ec9210c8a8222e': `The day`,\n'scff69aa7239287b0': `The day after`,\n };\n "]}
|
package/dist/src/locales/ko.d.ts
CHANGED
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
export declare const templates: {
|
|
2
2
|
s075cb2f53173bd8a: string;
|
|
3
|
+
s29ec9210c8a8222e: string;
|
|
3
4
|
s31be7a0b4a5853dd: string;
|
|
5
|
+
s42670fc325584e15: string;
|
|
6
|
+
s63c6e58ec805a9eb: string;
|
|
7
|
+
s685db98545dc9448: string;
|
|
4
8
|
s6aacb9fbb71a1d91: string;
|
|
9
|
+
s77c8560cf63a372d: string;
|
|
5
10
|
s9f41d726ecec72c2: string;
|
|
11
|
+
sc4bcadba8e631b86: string;
|
|
12
|
+
scff69aa7239287b0: string;
|
|
6
13
|
sd793f87f18747a63: string;
|
|
7
14
|
sf95fdd7da4fc2295: string;
|
|
8
15
|
sf9b52aece5aed0f7: string;
|
|
16
|
+
sfcc01216c601ec9e: string;
|
|
9
17
|
};
|
package/dist/src/locales/ko.js
CHANGED
|
@@ -4,11 +4,19 @@
|
|
|
4
4
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
5
5
|
export const templates = {
|
|
6
6
|
's075cb2f53173bd8a': `회전`,
|
|
7
|
+
's29ec9210c8a8222e': `당일`,
|
|
7
8
|
's31be7a0b4a5853dd': `z 축`,
|
|
9
|
+
's42670fc325584e15': `전날`,
|
|
10
|
+
's63c6e58ec805a9eb': `시작일`,
|
|
11
|
+
's685db98545dc9448': `완료일`,
|
|
8
12
|
's6aacb9fbb71a1d91': `스케일`,
|
|
13
|
+
's77c8560cf63a372d': `완료시간`,
|
|
9
14
|
's9f41d726ecec72c2': `y 축`,
|
|
15
|
+
'sc4bcadba8e631b86': `이름`,
|
|
16
|
+
'scff69aa7239287b0': `다음날`,
|
|
10
17
|
'sd793f87f18747a63': `체적`,
|
|
11
18
|
'sf95fdd7da4fc2295': `변환`,
|
|
12
19
|
'sf9b52aece5aed0f7': `x 축`,
|
|
20
|
+
'sfcc01216c601ec9e': `시작시간`,
|
|
13
21
|
};
|
|
14
22
|
//# sourceMappingURL=ko.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ko.js","sourceRoot":"","sources":["../../../src/locales/ko.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,IAAI;IAC/B,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,KAAK;
|
|
1
|
+
{"version":3,"file":"ko.js","sourceRoot":"","sources":["../../../src/locales/ko.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,IAAI;IAC/B,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,MAAM;IAC3B,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,MAAM;CACtB,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 's075cb2f53173bd8a': `회전`,\n's29ec9210c8a8222e': `당일`,\n's31be7a0b4a5853dd': `z 축`,\n's42670fc325584e15': `전날`,\n's63c6e58ec805a9eb': `시작일`,\n's685db98545dc9448': `완료일`,\n's6aacb9fbb71a1d91': `스케일`,\n's77c8560cf63a372d': `완료시간`,\n's9f41d726ecec72c2': `y 축`,\n'sc4bcadba8e631b86': `이름`,\n'scff69aa7239287b0': `다음날`,\n'sd793f87f18747a63': `체적`,\n'sf95fdd7da4fc2295': `변환`,\n'sf9b52aece5aed0f7': `x 축`,\n'sfcc01216c601ec9e': `시작시간`,\n };\n "]}
|
package/dist/src/locales/ms.d.ts
CHANGED
|
@@ -6,4 +6,12 @@ export declare const templates: {
|
|
|
6
6
|
sf95fdd7da4fc2295: string;
|
|
7
7
|
s6aacb9fbb71a1d91: string;
|
|
8
8
|
s075cb2f53173bd8a: string;
|
|
9
|
+
sc4bcadba8e631b86: string;
|
|
10
|
+
s63c6e58ec805a9eb: string;
|
|
11
|
+
sfcc01216c601ec9e: string;
|
|
12
|
+
s685db98545dc9448: string;
|
|
13
|
+
s77c8560cf63a372d: string;
|
|
14
|
+
s42670fc325584e15: string;
|
|
15
|
+
s29ec9210c8a8222e: string;
|
|
16
|
+
scff69aa7239287b0: string;
|
|
9
17
|
};
|
package/dist/src/locales/ms.js
CHANGED
|
@@ -10,5 +10,13 @@ export const templates = {
|
|
|
10
10
|
'sf95fdd7da4fc2295': `translate`,
|
|
11
11
|
's6aacb9fbb71a1d91': `scale`,
|
|
12
12
|
's075cb2f53173bd8a': `rotate`,
|
|
13
|
+
'sc4bcadba8e631b86': `name`,
|
|
14
|
+
's63c6e58ec805a9eb': `from date`,
|
|
15
|
+
'sfcc01216c601ec9e': `from time`,
|
|
16
|
+
's685db98545dc9448': `to date`,
|
|
17
|
+
's77c8560cf63a372d': `to time`,
|
|
18
|
+
's42670fc325584e15': `The day before`,
|
|
19
|
+
's29ec9210c8a8222e': `The day`,
|
|
20
|
+
'scff69aa7239287b0': `The day after`,
|
|
13
21
|
};
|
|
14
22
|
//# sourceMappingURL=ms.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ms.js","sourceRoot":"","sources":["../../../src/locales/ms.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,QAAQ;IACnC,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,OAAO;IAC5B,mBAAmB,EAAE,QAAQ;
|
|
1
|
+
{"version":3,"file":"ms.js","sourceRoot":"","sources":["../../../src/locales/ms.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,QAAQ;IACnC,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,OAAO;IAC5B,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,MAAM;IAC3B,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,gBAAgB;IACrC,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,eAAe;CAC/B,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 'sf9b52aece5aed0f7': `x-axes`,\n's9f41d726ecec72c2': `y-axes`,\n's31be7a0b4a5853dd': `z-axes`,\n'sd793f87f18747a63': `dimension`,\n'sf95fdd7da4fc2295': `translate`,\n's6aacb9fbb71a1d91': `scale`,\n's075cb2f53173bd8a': `rotate`,\n'sc4bcadba8e631b86': `name`,\n's63c6e58ec805a9eb': `from date`,\n'sfcc01216c601ec9e': `from time`,\n's685db98545dc9448': `to date`,\n's77c8560cf63a372d': `to time`,\n's42670fc325584e15': `The day before`,\n's29ec9210c8a8222e': `The day`,\n'scff69aa7239287b0': `The day after`,\n };\n "]}
|
package/dist/src/locales/zh.d.ts
CHANGED
|
@@ -6,4 +6,12 @@ export declare const templates: {
|
|
|
6
6
|
sf95fdd7da4fc2295: string;
|
|
7
7
|
s6aacb9fbb71a1d91: string;
|
|
8
8
|
s075cb2f53173bd8a: string;
|
|
9
|
+
sc4bcadba8e631b86: string;
|
|
10
|
+
s63c6e58ec805a9eb: string;
|
|
11
|
+
sfcc01216c601ec9e: string;
|
|
12
|
+
s685db98545dc9448: string;
|
|
13
|
+
s77c8560cf63a372d: string;
|
|
14
|
+
s42670fc325584e15: string;
|
|
15
|
+
s29ec9210c8a8222e: string;
|
|
16
|
+
scff69aa7239287b0: string;
|
|
9
17
|
};
|
package/dist/src/locales/zh.js
CHANGED
|
@@ -10,5 +10,13 @@ export const templates = {
|
|
|
10
10
|
'sf95fdd7da4fc2295': `translate`,
|
|
11
11
|
's6aacb9fbb71a1d91': `scale`,
|
|
12
12
|
's075cb2f53173bd8a': `rotate`,
|
|
13
|
+
'sc4bcadba8e631b86': `name`,
|
|
14
|
+
's63c6e58ec805a9eb': `from date`,
|
|
15
|
+
'sfcc01216c601ec9e': `from time`,
|
|
16
|
+
's685db98545dc9448': `to date`,
|
|
17
|
+
's77c8560cf63a372d': `to time`,
|
|
18
|
+
's42670fc325584e15': `The day before`,
|
|
19
|
+
's29ec9210c8a8222e': `The day`,
|
|
20
|
+
'scff69aa7239287b0': `The day after`,
|
|
13
21
|
};
|
|
14
22
|
//# sourceMappingURL=zh.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zh.js","sourceRoot":"","sources":["../../../src/locales/zh.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,QAAQ;IACnC,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,OAAO;IAC5B,mBAAmB,EAAE,QAAQ;
|
|
1
|
+
{"version":3,"file":"zh.js","sourceRoot":"","sources":["../../../src/locales/zh.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,QAAQ;IACnC,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,OAAO;IAC5B,mBAAmB,EAAE,QAAQ;IAC7B,mBAAmB,EAAE,MAAM;IAC3B,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,gBAAgB;IACrC,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,eAAe;CAC/B,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 'sf9b52aece5aed0f7': `x-axes`,\n's9f41d726ecec72c2': `y-axes`,\n's31be7a0b4a5853dd': `z-axes`,\n'sd793f87f18747a63': `dimension`,\n'sf95fdd7da4fc2295': `translate`,\n's6aacb9fbb71a1d91': `scale`,\n's075cb2f53173bd8a': `rotate`,\n'sc4bcadba8e631b86': `name`,\n's63c6e58ec805a9eb': `from date`,\n'sfcc01216c601ec9e': `from time`,\n's685db98545dc9448': `to date`,\n's77c8560cf63a372d': `to time`,\n's42670fc325584e15': `The day before`,\n's29ec9210c8a8222e': `The day`,\n'scff69aa7239287b0': `The day after`,\n };\n "]}
|
|
@@ -11,21 +11,37 @@ let OxInput3Dish = class OxInput3Dish extends OxFormField {
|
|
|
11
11
|
css `
|
|
12
12
|
:host {
|
|
13
13
|
display: grid;
|
|
14
|
-
grid-template-columns: repeat(
|
|
15
|
-
grid-gap:
|
|
16
|
-
grid-auto-rows: minmax(24px, auto);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
:host > * {
|
|
20
|
-
grid-column: span 1;
|
|
14
|
+
grid-template-columns: repeat(7, minmax(50px, 1fr));
|
|
15
|
+
grid-gap: var(--margin-default);
|
|
21
16
|
}
|
|
22
17
|
|
|
23
18
|
label {
|
|
24
19
|
text-align: right;
|
|
20
|
+
align-self: center;
|
|
21
|
+
font: var(--label-font);
|
|
22
|
+
color: var(--label-color);
|
|
23
|
+
text-transform: var(--label-text-transform);
|
|
24
|
+
grid-column: span 1;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
span {
|
|
28
|
+
grid-column: span 2;
|
|
28
29
|
text-align: center;
|
|
30
|
+
font: var(--label-font);
|
|
31
|
+
color: var(--legend-color);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
input {
|
|
35
|
+
grid-column: span 2;
|
|
36
|
+
border: 0;
|
|
37
|
+
border-bottom: var(--border-dark-color);
|
|
38
|
+
padding: var(--input-padding);
|
|
39
|
+
font: var(--input-font);
|
|
40
|
+
color: var(--primary-text-color);
|
|
41
|
+
}
|
|
42
|
+
input:focus {
|
|
43
|
+
outline: none;
|
|
44
|
+
border-bottom: 1px solid var(--primary-color);
|
|
29
45
|
}
|
|
30
46
|
`
|
|
31
47
|
]; }
|
|
@@ -118,7 +134,7 @@ let OxInput3Dish = class OxInput3Dish extends OxFormField {
|
|
|
118
134
|
}
|
|
119
135
|
render() {
|
|
120
136
|
return html `
|
|
121
|
-
<
|
|
137
|
+
<label></label> <span>${msg('x-axes')}</span>
|
|
122
138
|
<span>${msg('y-axes')}</span>
|
|
123
139
|
<span>${msg('z-axes')}</span>
|
|
124
140
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-3dish.js","sourceRoot":"","sources":["../../src/ox-input-3dish.ts"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AAE9C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAK7C,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,WAAW;aACpC,WAAM,GAAG;QACd,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"ox-input-3dish.js","sourceRoot":"","sources":["../../src/ox-input-3dish.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { localized, msg } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field'\nimport { OxInputAngle } from './ox-input-angle'\n\n@localized()\n@customElement('ox-input-3dish')\nexport class OxInput3Dish extends OxFormField {\n static styles = [\n css`\n :host {\n display: grid;\n grid-template-columns: repeat(7, minmax(50px, 1fr));\n grid-gap: var(--margin-default);\n }\n\n label {\n text-align: right;\n align-self: center;\n font: var(--label-font);\n color: var(--label-color);\n text-transform: var(--label-text-transform);\n grid-column: span 1;\n }\n\n span {\n grid-column: span 2;\n text-align: center;\n font: var(--label-font);\n color: var(--legend-color);\n }\n\n input {\n grid-column: span 2;\n border: 0;\n border-bottom: var(--border-dark-color);\n padding: var(--input-padding);\n font: var(--input-font);\n color: var(--primary-text-color);\n }\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\n }\n `\n ]\n\n @property({ type: Object }) dimension?: { width?: number; height?: number; depth?: number }\n // translate는 고유한 html element의 attribute이므로, property는 translatex로 한다.\n @property({ type: Object }) translatex?: { x?: number; y?: number; z?: number }\n @property({ type: Object }) rotate?: { x?: number; y?: number; z?: number }\n @property({ type: Object }) scale?: { x?: number; y?: number; z?: number }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n _onChange(e: Event) {\n e.stopPropagation()\n e.preventDefault()\n\n var element = e.target as HTMLElement\n var id = element.id\n var prop = id.substr(1)\n var value = Number((element as HTMLInputElement).value)\n\n switch (element.tagName) {\n case 'PROPERTY-ANGLE':\n value = Number((element as OxInputAngle).value || 0)\n break\n }\n\n switch (id) {\n case 'tx':\n case 'ty':\n case 'tz':\n this.translatex = {\n ...this.translatex,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('translate-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.translatex\n }\n })\n )\n break\n\n case 'rx':\n case 'ry':\n case 'rz':\n this.rotate = {\n ...this.rotate,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('rotate-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.rotate\n }\n })\n )\n break\n\n case 'sx':\n case 'sy':\n case 'sz':\n this.scale = {\n ...this.scale,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('scale-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.scale\n }\n })\n )\n break\n\n default:\n // dimension\n this.dimension = {\n ...this.dimension,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('dimension-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.dimension\n }\n })\n )\n }\n\n this.value = {\n translate: this.translatex,\n rotate: this.rotate,\n scale: this.scale,\n dimension: this.dimension\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n\n render() {\n return html`\n <label></label> <span>${msg('x-axes')}</span>\n <span>${msg('y-axes')}</span>\n <span>${msg('z-axes')}</span>\n\n <label>${msg('dimension')}</label>\n <input type=\"number\" id=\"dwidth\" .value=${this.dimension?.width} />\n <input type=\"number\" id=\"dheight\" .value=${this.dimension?.height} />\n <input type=\"number\" id=\"ddepth\" .value=${this.dimension?.depth} />\n\n <label>${msg('translate')}</label>\n <input type=\"number\" id=\"tx\" .value=${this.translatex?.x} />\n <input type=\"number\" id=\"ty\" .value=${this.translatex?.y} />\n <input type=\"number\" id=\"tz\" .value=${this.translatex?.z} />\n\n <label>${msg('scale')}</label>\n <input type=\"number\" id=\"sx\" .value=${this.scale?.x} />\n <input type=\"number\" id=\"sy\" .value=${this.scale?.y} />\n <input type=\"number\" id=\"sz\" .value=${this.scale?.z} />\n\n <label>${msg('rotate')}</label>\n <ox-input-angle id=\"rx\" .value=${this.rotate?.x}></ox-input-angle>\n <ox-input-angle id=\"ry\" .value=${this.rotate?.y}></ox-input-angle>\n <ox-input-angle id=\"rz\" .value=${this.rotate?.z}></ox-input-angle>\n `\n }\n}\n"]}
|
|
@@ -5,8 +5,8 @@ import { __decorate } from "tslib";
|
|
|
5
5
|
import '@operato/color-picker/paper-color-picker.js';
|
|
6
6
|
import { css, html } from 'lit';
|
|
7
7
|
import { customElement, property } from 'lit/decorators.js';
|
|
8
|
-
import { OxFormField } from './ox-form-field';
|
|
9
8
|
import { tinycolor } from '@thebespokepixel/es-tinycolor';
|
|
9
|
+
import { OxFormField } from './ox-form-field';
|
|
10
10
|
/**
|
|
11
11
|
색상을 입력하는데 사용되는 입력 컴포넌트이다.
|
|
12
12
|
화면상에는 두개의 입력 필드가 보이며, 하나는 색상값을 키보드로 직접 입력하는 입력 픽드이며,
|
|
@@ -175,18 +175,24 @@ let OxInputColor = class OxInputColor extends OxFormField {
|
|
|
175
175
|
}
|
|
176
176
|
|
|
177
177
|
input[type='text'] {
|
|
178
|
-
padding-right: 24px;
|
|
179
178
|
width: 100%;
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
179
|
+
border: 0;
|
|
180
|
+
border-bottom: var(--border-dark-color);
|
|
181
|
+
padding: var(--input-padding);
|
|
182
|
+
font: var(--input-font);
|
|
183
|
+
color: var(--primary-text-color);
|
|
184
|
+
padding-right: 35px;
|
|
185
|
+
}
|
|
186
|
+
input:focus {
|
|
187
|
+
outline: none;
|
|
188
|
+
border-bottom: 1px solid var(--primary-color);
|
|
183
189
|
}
|
|
184
190
|
|
|
185
191
|
a {
|
|
186
192
|
-webkit-appearance: none;
|
|
187
193
|
display: flex;
|
|
188
194
|
position: absolute;
|
|
189
|
-
width:
|
|
195
|
+
width: 35px;
|
|
190
196
|
height: 100%;
|
|
191
197
|
box-sizing: border-box;
|
|
192
198
|
align-items: center;
|
|
@@ -194,11 +200,10 @@ let OxInputColor = class OxInputColor extends OxFormField {
|
|
|
194
200
|
}
|
|
195
201
|
|
|
196
202
|
span {
|
|
197
|
-
width:
|
|
198
|
-
height:
|
|
199
|
-
|
|
200
|
-
border-radius:
|
|
201
|
-
border: 1px solid #eee;
|
|
203
|
+
width: 80%;
|
|
204
|
+
height: 60%;
|
|
205
|
+
border: var(--border-dark-color);
|
|
206
|
+
border-radius: var(--border-radius);
|
|
202
207
|
}
|
|
203
208
|
|
|
204
209
|
span.transparent {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-color.js","sourceRoot":"","sources":["../../src/ox-input-color.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,6CAA6C,CAAA;AAEpD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAA;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6JE;AAGF,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,WAAW;aACpC,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0ClB,CAAA;IAKD,MAAM;QACJ,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,KAAK,IAAI,EAAE;kBACf,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;uBAChC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,EAAE;;;kBAG3C,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;8DACQ,IAAI,CAAC,UAAU,EAAE,WAAW,IAAI,CAAC,UAAU,EAAE;;KAEtG,CAAA;IACH,CAAC;IAED,IAAI,WAAW,CAAC,WAAmB;QACjC,IAAI,KAAK,GAAG,SAAS,CAAC,WAAW,EAAE,EAAE,CAAC,CAAA;QACtC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE,CAAA;QAEvD,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE;YACnB,IAAI,SAAS,IAAI,KAAK,IAAI,YAAY,EAAE;gBACtC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;aACtC;;gBAAM,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,WAAW,EAAE,CAAA;YAEvC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;SACjF;IACH,CAAC;IAED,UAAU;QACR,OAAO,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,aAAa,EAAE,EAAE,CAAC,CAAC,WAAW,EAAE,CAAA;IACjE,CAAC;IAED,eAAe,CAAC,CAAQ;QACtB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;QAEjD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED;;OAEG;IACH,UAAU;QACR,IAAI,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE,CAAA;QAE5C,IAAI,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAA;QAErC,IAAI,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAUvD,CAAA;QAED,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAA;QACvB,MAAM,CAAC,KAAK,GAAG,KAAK,CAAA;QACpB,MAAM,CAAC,aAAa,GAAG,KAAK,CAAC,WAAW,EAAE,CAAA;QAC1C,IAAI,CAAC,YAAY,EAAE;YACjB,MAAM,CAAC,UAAU,GAAG,IAAI,CAAA;YACxB,MAAM,CAAC,eAAe,GAAG,IAAI,CAAA;SAC9B;QACD,MAAM,CAAC,IAAI,GAAG,KAAK,CAAA;QAEnB,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE;YACnB,IAAI,GAAG,GAAG,KAAK,CAAC,KAAK,EAAyC,CAAA;YAC9D,IAAI,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAA;YAE5B,MAAM,CAAC,sBAAsB,GAAG,KAAK,CAAA;YAErC,MAAM,CAAC,GAAG,CAAC,oBAAoB,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;YACvC,MAAM,CAAC,GAAG,CAAC,sBAAsB,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;YACzC,MAAM,CAAC,GAAG,CAAC,qBAAqB,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;YAExC,IAAI,KAAK,IAAI,SAAS,EAAE;gBACtB,MAAM,CAAC,GAAG,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAA;aAC1C;SACF;QAED,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;QAEjC,IAAI,CAAC,GAAG,CAAC,CAAQ,EAAE,EAAE;YACnB,IAAI,CAAE,CAAiB,EAAE,MAAM,EAAE,SAAS,EAAE;gBAC1C,OAAM;aACP;YAED,IAAI,MAAM,CAAC,aAAa,EAAE;gBACxB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,aAAa,CAAA;aACxC;YAED,MAAM,CAAC,mBAAmB,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAA;YACpD,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;QACxC,CAAC,CAAA;QACD,MAAM,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAA;QAEjD,UAAU,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAA;IACjC,CAAC;CACF,CAAA;AAzG6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAgB;AA9ChC,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAsJxB;SAtJY,YAAY","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/color-picker/paper-color-picker.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\nimport { tinycolor } from '@thebespokepixel/es-tinycolor'\n\n/**\n색상을 입력하는데 사용되는 입력 컴포넌트이다.\n화면상에는 두개의 입력 필드가 보이며, 하나는 색상값을 키보드로 직접 입력하는 입력 픽드이며,\n다른 하나는 마우스로 클릭하여 컬러 파레트를 팝업 시키는 입력 필드이다.\n컬러 파레트를 팝업시키는 입력필드는 현재 입력된 색상으로 표시된다.\n\n색상값을 직접 입력하는 필드에서는 'white', 'red', 'yellow' 등 색상의미 단어를 사용할 수도 있고,\n#fff, #123456 와 같이 스타일에서 지정하는 방식의 3자리 및 6자리 숫자 표현도 가능하다.\n컬러 파레트를 팝업시키는 입력 필드에서 색상을 지정하게되면, 모두 6자리 숫자 표현방식만을 사용한다.\n\n의미 단어를 지원하는 색상은 다음과 같다.\n\naliceblue : #f0f8ff<br>\nantiquewhite : #faebd7<br>\naqua : #00ffff<br>\naquamarine : #7fffd4<br>\nazure : #f0ffff<br>\nbeige : #f5f5dc<br>\nbisque : #ffe4c4<br>\nblack : #000000<br>\nblanchedalmond : #ffebcd<br>\nblue : #0000ff<br>\nblueviolet : #8a2be2<br>\nbrown : #a52a2a<br>\nburlywood : #deb887<br>\ncadetblue : #5f9ea0<br>\nchartreuse : #7fff00<br>\nchocolate : #d2691e<br>\ncoral : #ff7f50<br>\ncornflowerblue : #6495ed<br>\ncornsilk : #fff8dc<br>\ncrimson : #dc143c<br>\ncyan : #00ffff<br>\ndarkblue : #00008b<br>\ndarkcyan : #008b8b<br>\ndarkgoldenrod : #b8860b<br>\ndarkgray : #a9a9a9<br>\ndarkgreen : #006400<br>\ndarkkhaki : #bdb76b<br>\ndarkmagenta : #8b008b<br>\ndarkolivegreen : #556b2f<br>\ndarkorange : #ff8c00<br>\ndarkorchid : #9932cc<br>\ndarkred : #8b0000<br>\ndarksalmon : #e9967a<br>\ndarkseagreen : #8fbc8f<br>\ndarkslateblue : #483d8b<br>\ndarkslategray : #2f4f4f<br>\ndarkturquoise : #00ced1<br>\ndarkviolet : #9400d3<br>\ndeeppink : #ff1493<br>\ndeepskyblue : #00bfff<br>\ndimgray : #696969<br>\ndodgerblue : #1e90ff<br>\nfirebrick : #b22222<br>\nfloralwhite : #fffaf0<br>\nforestgreen : #228b22<br>\nfuchsia : #ff00ff<br>\ngainsboro : #dcdcdc<br>\nghostwhite : #f8f8ff<br>\ngold : #ffd700<br>\ngoldenrod : #daa520<br>\ngray : #808080<br>\ngreen : #008000<br>\ngreenyellow : #adff2f<br>\nhoneydew : #f0fff0<br>\nhotpink : #ff69b4<br>\nindianred : #cd5c5c<br>\nindigo : #4b0082<br>\nivory : #fffff0<br>\nkhaki : #f0e68c<br>\nlavender : #e6e6fa<br>\nlavenderblush : #fff0f5<br>\nlawngreen : #7cfc00<br>\nlemonchiffon : #fffacd<br>\nlightblue : #add8e6<br>\nlightcoral : #f08080<br>\nlightcyan : #e0ffff<br>\nlightgoldenrodyellow : #fafad2<br>\nlightgrey : #d3d3d3<br>\nlightgreen : #90ee90<br>\nlightpink : #ffb6c1<br>\nlightsalmon : #ffa07a<br>\nlightseagreen : #20b2aa<br>\nlightskyblue : #87cefa<br>\nlightslategray : #778899<br>\nlightsteelblue : #b0c4de<br>\nlightyellow : #ffffe0<br>\nlime : #00ff00<br>\nlimegreen : #32cd32<br>\nlinen : #faf0e6<br>\nmagenta : #ff00ff<br>\nmaroon : #800000<br>\nmediumaquamarine : #66cdaa<br>\nmediumblue : #0000cd<br>\nmediumorchid : #ba55d3<br>\nmediumpurple : #9370d8<br>\nmediumseagreen : #3cb371<br>\nmediumslateblue : #7b68ee<br>\nmediumspringgreen : #00fa9a<br>\nmediumturquoise : #48d1cc<br>\nmediumvioletred : #c71585<br>\nmidnightblue : #191970<br>\nmintcream : #f5fffa<br>\nmistyrose : #ffe4e1<br>\nmoccasin : #ffe4b5<br>\nnavajowhite : #ffdead<br>\nnavy : #000080<br>\noldlace : #fdf5e6<br>\nolive : #808000<br>\nolivedrab : #6b8e23<br>\norange : #ffa500<br>\norangered : #ff4500<br>\norchid : #da70d6<br>\npalegoldenrod : #eee8aa<br>\npalegreen : #98fb98<br>\npaleturquoise : #afeeee<br>\npalevioletred : #d87093<br>\npapayawhip : #ffefd5<br>\npeachpuff : #ffdab9<br>\nperu : #cd853f<br>\npink : #ffc0cb<br>\nplum : #dda0dd<br>\npowderblue : #b0e0e6<br>\npurple : #800080<br>\nred : #ff0000<br>\nrosybrown : #bc8f8f<br>\nroyalblue : #4169e1<br>\nsaddlebrown : #8b4513<br>\nsalmon : #fa8072<br>\nsandybrown : #f4a460<br>\nseagreen : #2e8b57<br>\nseashell : #fff5ee<br>\nsienna : #a0522d<br>\nsilver : #c0c0c0<br>\nskyblue : #87ceeb<br>\nslateblue : #6a5acd<br>\nslategray : #708090<br>\nsnow : #fffafa<br>\nspringgreen : #00ff7f<br>\nsteelblue : #4682b4<br>\ntan : #d2b48c<br>\nteal : #008080<br>\nthistle : #d8bfd8<br>\ntomato : #ff6347<br>\nturquoise : #40e0d0<br>\nviolet : #ee82ee<br>\nwheat : #f5deb3<br>\nwhite : #ffffff<br>\nwhitesmoke : #f5f5f5<br>\nyellow : #ffff00<br>\nyellowgreen : #9acd32<br>\n\nExample:\n\n <ox-input-color .value=${color}>\n </ox-input-color>\n*/\n\n@customElement('ox-input-color')\nexport class OxInputColor extends OxFormField {\n static styles = css`\n :host {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: flex-end;\n }\n\n input[type='text'] {\n padding-right: 24px;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.2);\n }\n\n a {\n -webkit-appearance: none;\n display: flex;\n position: absolute;\n width: 24px;\n height: 100%;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n }\n\n span {\n width: 18px;\n height: 100%;\n max-height: 18px;\n border-radius: 10%;\n border: 1px solid #eee;\n }\n\n span.transparent {\n background-color: #fefefe;\n background-image: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),\n linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);\n background-position: 0 0, 9px 9px;\n background-size: 18px 18px;\n }\n `\n\n @property({ type: String }) value?: string\n @property({ type: Object }) properties: any\n\n render() {\n return html`\n <input\n id=\"text\"\n type=\"text\"\n .value=${this.value || ''}\n @change=${(e: Event) => this._onInputChanged(e)}\n .placeholder=${this.getAttribute('placeholder') || ''}\n />\n\n <a @click=${(e: MouseEvent) => this.showPicker()}>\n <span id=\"color-thumbnail\" .style=\"background-color:${this._thumbnail()}\" class=${this._thumbnail()}> </span>\n </a>\n `\n }\n\n set colorString(colorString: string) {\n var color = tinycolor(colorString, {})\n var { withoutAlpha, valueType } = this.properties || {}\n\n if (color.isValid()) {\n if (valueType == 'hex' || withoutAlpha) {\n this.value = color.toHexString(false)\n } else this.value = color.toRgbString()\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n }\n\n _thumbnail() {\n return tinycolor(this.value || 'transparent', {}).toRgbString()\n }\n\n _onInputChanged(e: Event) {\n e.stopPropagation()\n this.value = (e.target as HTMLInputElement).value\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n /**\n * 외부에서 호출 가능한 메쏘드임.\n */\n showPicker() {\n var { withoutAlpha } = this.properties || {}\n\n var color = tinycolor(this.value, {})\n\n var picker = document.createElement('paper-color-picker') as HTMLElement & {\n shape: string\n color: any\n colorAsString: string\n allowAlpha: boolean\n alwaysShowAlpha: boolean\n type: string\n _initialAlphaValueHack: number\n set: (name: string, value: number) => void\n open: () => void\n }\n\n picker.shape = 'huebox'\n picker.color = color\n picker.colorAsString = color.toRgbString()\n if (!withoutAlpha) {\n picker.allowAlpha = true\n picker.alwaysShowAlpha = true\n }\n picker.type = 'hsl'\n\n if (color.isValid()) {\n let rgb = color.toRgb() as { r: number; g: number; b: number }\n let alpha = color.getAlpha()\n\n picker._initialAlphaValueHack = alpha\n\n picker.set('immediateColor.red', rgb.r)\n picker.set('immediateColor.green', rgb.g)\n picker.set('immediateColor.blue', rgb.b)\n\n if (alpha != undefined) {\n picker.set('immediateColor.alpha', alpha)\n }\n }\n\n document.body.appendChild(picker)\n\n var _ = (e: Event) => {\n if (!(e as CustomEvent)?.detail?.confirmed) {\n return\n }\n\n if (picker.colorAsString) {\n this.colorString = picker.colorAsString\n }\n\n picker.removeEventListener('iron-overlay-closed', _)\n picker.parentNode?.removeChild(picker)\n }\n picker.addEventListener('iron-overlay-closed', _)\n\n setTimeout(() => picker.open())\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-input-color.js","sourceRoot":"","sources":["../../src/ox-input-color.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/color-picker/paper-color-picker.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { tinycolor } from '@thebespokepixel/es-tinycolor'\n\nimport { OxFormField } from './ox-form-field'\n\n/**\n색상을 입력하는데 사용되는 입력 컴포넌트이다.\n화면상에는 두개의 입력 필드가 보이며, 하나는 색상값을 키보드로 직접 입력하는 입력 픽드이며,\n다른 하나는 마우스로 클릭하여 컬러 파레트를 팝업 시키는 입력 필드이다.\n컬러 파레트를 팝업시키는 입력필드는 현재 입력된 색상으로 표시된다.\n\n색상값을 직접 입력하는 필드에서는 'white', 'red', 'yellow' 등 색상의미 단어를 사용할 수도 있고,\n#fff, #123456 와 같이 스타일에서 지정하는 방식의 3자리 및 6자리 숫자 표현도 가능하다.\n컬러 파레트를 팝업시키는 입력 필드에서 색상을 지정하게되면, 모두 6자리 숫자 표현방식만을 사용한다.\n\n의미 단어를 지원하는 색상은 다음과 같다.\n\naliceblue : #f0f8ff<br>\nantiquewhite : #faebd7<br>\naqua : #00ffff<br>\naquamarine : #7fffd4<br>\nazure : #f0ffff<br>\nbeige : #f5f5dc<br>\nbisque : #ffe4c4<br>\nblack : #000000<br>\nblanchedalmond : #ffebcd<br>\nblue : #0000ff<br>\nblueviolet : #8a2be2<br>\nbrown : #a52a2a<br>\nburlywood : #deb887<br>\ncadetblue : #5f9ea0<br>\nchartreuse : #7fff00<br>\nchocolate : #d2691e<br>\ncoral : #ff7f50<br>\ncornflowerblue : #6495ed<br>\ncornsilk : #fff8dc<br>\ncrimson : #dc143c<br>\ncyan : #00ffff<br>\ndarkblue : #00008b<br>\ndarkcyan : #008b8b<br>\ndarkgoldenrod : #b8860b<br>\ndarkgray : #a9a9a9<br>\ndarkgreen : #006400<br>\ndarkkhaki : #bdb76b<br>\ndarkmagenta : #8b008b<br>\ndarkolivegreen : #556b2f<br>\ndarkorange : #ff8c00<br>\ndarkorchid : #9932cc<br>\ndarkred : #8b0000<br>\ndarksalmon : #e9967a<br>\ndarkseagreen : #8fbc8f<br>\ndarkslateblue : #483d8b<br>\ndarkslategray : #2f4f4f<br>\ndarkturquoise : #00ced1<br>\ndarkviolet : #9400d3<br>\ndeeppink : #ff1493<br>\ndeepskyblue : #00bfff<br>\ndimgray : #696969<br>\ndodgerblue : #1e90ff<br>\nfirebrick : #b22222<br>\nfloralwhite : #fffaf0<br>\nforestgreen : #228b22<br>\nfuchsia : #ff00ff<br>\ngainsboro : #dcdcdc<br>\nghostwhite : #f8f8ff<br>\ngold : #ffd700<br>\ngoldenrod : #daa520<br>\ngray : #808080<br>\ngreen : #008000<br>\ngreenyellow : #adff2f<br>\nhoneydew : #f0fff0<br>\nhotpink : #ff69b4<br>\nindianred : #cd5c5c<br>\nindigo : #4b0082<br>\nivory : #fffff0<br>\nkhaki : #f0e68c<br>\nlavender : #e6e6fa<br>\nlavenderblush : #fff0f5<br>\nlawngreen : #7cfc00<br>\nlemonchiffon : #fffacd<br>\nlightblue : #add8e6<br>\nlightcoral : #f08080<br>\nlightcyan : #e0ffff<br>\nlightgoldenrodyellow : #fafad2<br>\nlightgrey : #d3d3d3<br>\nlightgreen : #90ee90<br>\nlightpink : #ffb6c1<br>\nlightsalmon : #ffa07a<br>\nlightseagreen : #20b2aa<br>\nlightskyblue : #87cefa<br>\nlightslategray : #778899<br>\nlightsteelblue : #b0c4de<br>\nlightyellow : #ffffe0<br>\nlime : #00ff00<br>\nlimegreen : #32cd32<br>\nlinen : #faf0e6<br>\nmagenta : #ff00ff<br>\nmaroon : #800000<br>\nmediumaquamarine : #66cdaa<br>\nmediumblue : #0000cd<br>\nmediumorchid : #ba55d3<br>\nmediumpurple : #9370d8<br>\nmediumseagreen : #3cb371<br>\nmediumslateblue : #7b68ee<br>\nmediumspringgreen : #00fa9a<br>\nmediumturquoise : #48d1cc<br>\nmediumvioletred : #c71585<br>\nmidnightblue : #191970<br>\nmintcream : #f5fffa<br>\nmistyrose : #ffe4e1<br>\nmoccasin : #ffe4b5<br>\nnavajowhite : #ffdead<br>\nnavy : #000080<br>\noldlace : #fdf5e6<br>\nolive : #808000<br>\nolivedrab : #6b8e23<br>\norange : #ffa500<br>\norangered : #ff4500<br>\norchid : #da70d6<br>\npalegoldenrod : #eee8aa<br>\npalegreen : #98fb98<br>\npaleturquoise : #afeeee<br>\npalevioletred : #d87093<br>\npapayawhip : #ffefd5<br>\npeachpuff : #ffdab9<br>\nperu : #cd853f<br>\npink : #ffc0cb<br>\nplum : #dda0dd<br>\npowderblue : #b0e0e6<br>\npurple : #800080<br>\nred : #ff0000<br>\nrosybrown : #bc8f8f<br>\nroyalblue : #4169e1<br>\nsaddlebrown : #8b4513<br>\nsalmon : #fa8072<br>\nsandybrown : #f4a460<br>\nseagreen : #2e8b57<br>\nseashell : #fff5ee<br>\nsienna : #a0522d<br>\nsilver : #c0c0c0<br>\nskyblue : #87ceeb<br>\nslateblue : #6a5acd<br>\nslategray : #708090<br>\nsnow : #fffafa<br>\nspringgreen : #00ff7f<br>\nsteelblue : #4682b4<br>\ntan : #d2b48c<br>\nteal : #008080<br>\nthistle : #d8bfd8<br>\ntomato : #ff6347<br>\nturquoise : #40e0d0<br>\nviolet : #ee82ee<br>\nwheat : #f5deb3<br>\nwhite : #ffffff<br>\nwhitesmoke : #f5f5f5<br>\nyellow : #ffff00<br>\nyellowgreen : #9acd32<br>\n\nExample:\n\n <ox-input-color .value=${color}>\n </ox-input-color>\n*/\n\n@customElement('ox-input-color')\nexport class OxInputColor extends OxFormField {\n static styles = css`\n :host {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: flex-end;\n }\n\n input[type='text'] {\n width: 100%;\n border: 0;\n border-bottom: var(--border-dark-color);\n padding: var(--input-padding);\n font: var(--input-font);\n color: var(--primary-text-color);\n padding-right: 35px;\n }\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\n }\n\n a {\n -webkit-appearance: none;\n display: flex;\n position: absolute;\n width: 35px;\n height: 100%;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n }\n\n span {\n width: 80%;\n height: 60%;\n border: var(--border-dark-color);\n border-radius: var(--border-radius);\n }\n\n span.transparent {\n background-color: #fefefe;\n background-image: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),\n linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);\n background-position: 0 0, 9px 9px;\n background-size: 18px 18px;\n }\n `\n\n @property({ type: String }) value?: string\n @property({ type: Object }) properties: any\n\n render() {\n return html`\n <input\n id=\"text\"\n type=\"text\"\n .value=${this.value || ''}\n @change=${(e: Event) => this._onInputChanged(e)}\n .placeholder=${this.getAttribute('placeholder') || ''}\n />\n\n <a @click=${(e: MouseEvent) => this.showPicker()}>\n <span id=\"color-thumbnail\" .style=\"background-color:${this._thumbnail()}\" class=${this._thumbnail()}> </span>\n </a>\n `\n }\n\n set colorString(colorString: string) {\n var color = tinycolor(colorString, {})\n var { withoutAlpha, valueType } = this.properties || {}\n\n if (color.isValid()) {\n if (valueType == 'hex' || withoutAlpha) {\n this.value = color.toHexString(false)\n } else this.value = color.toRgbString()\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n }\n\n _thumbnail() {\n return tinycolor(this.value || 'transparent', {}).toRgbString()\n }\n\n _onInputChanged(e: Event) {\n e.stopPropagation()\n this.value = (e.target as HTMLInputElement).value\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n /**\n * 외부에서 호출 가능한 메쏘드임.\n */\n showPicker() {\n var { withoutAlpha } = this.properties || {}\n\n var color = tinycolor(this.value, {})\n\n var picker = document.createElement('paper-color-picker') as HTMLElement & {\n shape: string\n color: any\n colorAsString: string\n allowAlpha: boolean\n alwaysShowAlpha: boolean\n type: string\n _initialAlphaValueHack: number\n set: (name: string, value: number) => void\n open: () => void\n }\n\n picker.shape = 'huebox'\n picker.color = color\n picker.colorAsString = color.toRgbString()\n if (!withoutAlpha) {\n picker.allowAlpha = true\n picker.alwaysShowAlpha = true\n }\n picker.type = 'hsl'\n\n if (color.isValid()) {\n let rgb = color.toRgb() as { r: number; g: number; b: number }\n let alpha = color.getAlpha()\n\n picker._initialAlphaValueHack = alpha\n\n picker.set('immediateColor.red', rgb.r)\n picker.set('immediateColor.green', rgb.g)\n picker.set('immediateColor.blue', rgb.b)\n\n if (alpha != undefined) {\n picker.set('immediateColor.alpha', alpha)\n }\n }\n\n document.body.appendChild(picker)\n\n var _ = (e: Event) => {\n if (!(e as CustomEvent)?.detail?.confirmed) {\n return\n }\n\n if (picker.colorAsString) {\n this.colorString = picker.colorAsString\n }\n\n picker.removeEventListener('iron-overlay-closed', _)\n picker.parentNode?.removeChild(picker)\n }\n picker.addEventListener('iron-overlay-closed', _)\n\n setTimeout(() => picker.open())\n }\n}\n"]}
|
|
@@ -79,7 +79,6 @@ let OxInputCrontab = class OxInputCrontab extends OxFormField {
|
|
|
79
79
|
width: 100%;
|
|
80
80
|
height: 100%;
|
|
81
81
|
border: 0;
|
|
82
|
-
background-color: var(--main-section-background-color);
|
|
83
82
|
}
|
|
84
83
|
|
|
85
84
|
:host * {
|
|
@@ -113,32 +112,36 @@ let OxInputCrontab = class OxInputCrontab extends OxFormField {
|
|
|
113
112
|
grid-column: 4 / span 3;
|
|
114
113
|
width: 100%;
|
|
115
114
|
height: 100%;
|
|
116
|
-
|
|
115
|
+
padding: var(--input-padding);
|
|
116
|
+
border: 0;
|
|
117
|
+
border-bottom: var(--border-dark-color);
|
|
117
118
|
text-transform: capitalize;
|
|
118
|
-
|
|
119
|
-
|
|
119
|
+
font: var(--label-font);
|
|
120
|
+
color: var(--label-color);
|
|
120
121
|
}
|
|
121
122
|
|
|
122
123
|
input {
|
|
123
124
|
width: 100%;
|
|
124
125
|
margin-top: var(--margin-default);
|
|
125
126
|
padding: 5px;
|
|
126
|
-
border
|
|
127
|
-
border: var(--border-dark-color);
|
|
128
|
-
|
|
127
|
+
border: 0;
|
|
128
|
+
border-bottom: var(--border-dark-color);
|
|
129
|
+
padding: var(--input-padding);
|
|
130
|
+
font: var(--input-font);
|
|
131
|
+
color: var(--primary-text-color);
|
|
129
132
|
}
|
|
130
133
|
input:focus {
|
|
131
|
-
|
|
134
|
+
outline: none;
|
|
135
|
+
border-bottom: 1px solid var(--primary-color);
|
|
132
136
|
}
|
|
133
137
|
|
|
134
138
|
input:invalid {
|
|
135
|
-
border: 1px solid var(--status-danger-color);
|
|
139
|
+
border-bottom: 1px solid var(--status-danger-color);
|
|
136
140
|
color: var(--status-danger-color);
|
|
137
141
|
}
|
|
138
142
|
|
|
139
143
|
label {
|
|
140
144
|
width: 100%;
|
|
141
|
-
height: 100%;
|
|
142
145
|
font: normal 0.8em var(--theme-font);
|
|
143
146
|
color: var(--primary-color);
|
|
144
147
|
}
|