@operato/input 2.0.0-alpha.146 → 2.0.0-alpha.149
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 +38 -0
- package/demo/index-barcode.html +4 -4
- package/demo/index-checkbox.html +4 -4
- package/demo/index-code.html +4 -4
- package/demo/index-options.html +2 -2
- package/dist/src/ox-buttons-radio.d.ts +9 -5
- package/dist/src/ox-buttons-radio.js +43 -11
- package/dist/src/ox-buttons-radio.js.map +1 -1
- package/dist/src/ox-checkbox.js +23 -19
- package/dist/src/ox-checkbox.js.map +1 -1
- package/dist/src/ox-input-3axis.js +12 -1
- package/dist/src/ox-input-3axis.js.map +1 -1
- package/dist/src/ox-input-3dish.js +16 -11
- package/dist/src/ox-input-3dish.js.map +1 -1
- package/dist/src/ox-input-angle.js +8 -1
- package/dist/src/ox-input-angle.js.map +1 -1
- package/dist/src/ox-input-barcode.js +12 -8
- package/dist/src/ox-input-barcode.js.map +1 -1
- package/dist/src/ox-input-code.js +3 -0
- package/dist/src/ox-input-code.js.map +1 -1
- package/dist/src/ox-input-color.js +8 -6
- package/dist/src/ox-input-color.js.map +1 -1
- package/dist/src/ox-input-crontab.js +29 -25
- package/dist/src/ox-input-crontab.js.map +1 -1
- package/dist/src/ox-input-data.js +15 -6
- package/dist/src/ox-input-data.js.map +1 -1
- package/dist/src/ox-input-duration.js +15 -34
- package/dist/src/ox-input-duration.js.map +1 -1
- package/dist/src/ox-input-file.js +18 -14
- package/dist/src/ox-input-file.js.map +1 -1
- package/dist/src/ox-input-hashtags.js +13 -14
- package/dist/src/ox-input-hashtags.js.map +1 -1
- package/dist/src/ox-input-i18n-label.js +4 -4
- package/dist/src/ox-input-i18n-label.js.map +1 -1
- package/dist/src/ox-input-image.js +1 -1
- package/dist/src/ox-input-image.js.map +1 -1
- package/dist/src/ox-input-key-values.js +6 -6
- package/dist/src/ox-input-key-values.js.map +1 -1
- package/dist/src/ox-input-mass-fraction.js +5 -5
- package/dist/src/ox-input-mass-fraction.js.map +1 -1
- package/dist/src/ox-input-multiple-colors.js +2 -2
- package/dist/src/ox-input-multiple-colors.js.map +1 -1
- package/dist/src/ox-input-options.js +6 -6
- package/dist/src/ox-input-options.js.map +1 -1
- package/dist/src/ox-input-partition-keys.js +6 -6
- package/dist/src/ox-input-partition-keys.js.map +1 -1
- package/dist/src/ox-input-privilege.js +13 -16
- package/dist/src/ox-input-privilege.js.map +1 -1
- package/dist/src/ox-input-quantifier.js +5 -5
- package/dist/src/ox-input-quantifier.js.map +1 -1
- package/dist/src/ox-input-range.js +8 -8
- package/dist/src/ox-input-range.js.map +1 -1
- package/dist/src/ox-input-search.js +3 -5
- package/dist/src/ox-input-search.js.map +1 -1
- package/dist/src/ox-input-select-buttons.js +1 -1
- package/dist/src/ox-input-select-buttons.js.map +1 -1
- package/dist/src/ox-input-table.js +1 -1
- package/dist/src/ox-input-table.js.map +1 -1
- package/dist/src/ox-input-unit-number.js +5 -5
- package/dist/src/ox-input-unit-number.js.map +1 -1
- package/dist/src/ox-input-value-map.js +6 -6
- package/dist/src/ox-input-value-map.js.map +1 -1
- package/dist/src/ox-input-value-ranges.js +7 -7
- package/dist/src/ox-input-value-ranges.js.map +1 -1
- package/dist/src/ox-input-work-shift.js +7 -7
- package/dist/src/ox-input-work-shift.js.map +1 -1
- package/dist/src/ox-select.js +4 -4
- package/dist/src/ox-select.js.map +1 -1
- package/dist/stories/ox-buttons-radio.stories.d.ts +31 -0
- package/dist/stories/ox-buttons-radio.stories.js +81 -0
- package/dist/stories/ox-buttons-radio.stories.js.map +1 -0
- package/dist/stories/ox-checkbox.stories.d.ts +6 -0
- package/dist/stories/ox-checkbox.stories.js +57 -13
- package/dist/stories/ox-checkbox.stories.js.map +1 -1
- package/dist/stories/ox-input-3axis.stories.d.ts +5 -0
- package/dist/stories/ox-input-3axis.stories.js +32 -10
- package/dist/stories/ox-input-3axis.stories.js.map +1 -1
- package/dist/stories/ox-input-3dish.stories.d.ts +5 -0
- package/dist/stories/ox-input-3dish.stories.js +35 -13
- package/dist/stories/ox-input-3dish.stories.js.map +1 -1
- package/dist/stories/ox-input-angle.stories.d.ts +5 -0
- package/dist/stories/ox-input-angle.stories.js +36 -13
- package/dist/stories/ox-input-angle.stories.js.map +1 -1
- package/dist/stories/ox-input-barcode.stories.d.ts +5 -0
- package/dist/stories/ox-input-barcode.stories.js +35 -18
- package/dist/stories/ox-input-barcode.stories.js.map +1 -1
- package/dist/stories/ox-input-code.stories.d.ts +5 -0
- package/dist/stories/ox-input-code.stories.js +38 -13
- package/dist/stories/ox-input-code.stories.js.map +1 -1
- package/dist/stories/ox-input-crontab.stories.d.ts +5 -0
- package/dist/stories/ox-input-crontab.stories.js +35 -12
- package/dist/stories/ox-input-crontab.stories.js.map +1 -1
- package/dist/stories/ox-input-data.stories.d.ts +5 -0
- package/dist/stories/ox-input-data.stories.js +34 -11
- package/dist/stories/ox-input-data.stories.js.map +1 -1
- package/dist/stories/ox-input-duration.stories.d.ts +5 -0
- package/dist/stories/ox-input-duration.stories.js +36 -13
- package/dist/stories/ox-input-duration.stories.js.map +1 -1
- package/dist/stories/ox-input-file.stories.d.ts +5 -0
- package/dist/stories/ox-input-file.stories.js +39 -16
- package/dist/stories/ox-input-file.stories.js.map +1 -1
- package/dist/stories/ox-input-hashtags.stories.d.ts +5 -0
- package/dist/stories/ox-input-hashtags.stories.js +35 -12
- package/dist/stories/ox-input-hashtags.stories.js.map +1 -1
- package/dist/stories/ox-input-i18n-label.stories.d.ts +5 -0
- package/dist/stories/ox-input-i18n-label.stories.js +35 -12
- package/dist/stories/ox-input-i18n-label.stories.js.map +1 -1
- package/dist/stories/ox-input-key-values.stories.d.ts +5 -0
- package/dist/stories/ox-input-key-values.stories.js +35 -12
- package/dist/stories/ox-input-key-values.stories.js.map +1 -1
- package/dist/stories/ox-input-mass-fraction.stories.d.ts +5 -0
- package/dist/stories/ox-input-mass-fraction.stories.js +36 -13
- package/dist/stories/ox-input-mass-fraction.stories.js.map +1 -1
- package/dist/stories/ox-input-multiple-colors.stories.d.ts +5 -0
- package/dist/stories/ox-input-multiple-colors.stories.js +31 -149
- package/dist/stories/ox-input-multiple-colors.stories.js.map +1 -1
- package/dist/stories/ox-input-options.stories.d.ts +5 -0
- package/dist/stories/ox-input-options.stories.js +34 -11
- package/dist/stories/ox-input-options.stories.js.map +1 -1
- package/dist/stories/ox-input-partition-keys.stories.d.ts +5 -0
- package/dist/stories/ox-input-partition-keys.stories.js +34 -11
- package/dist/stories/ox-input-partition-keys.stories.js.map +1 -1
- package/dist/stories/ox-input-privilege.stories.d.ts +5 -0
- package/dist/stories/ox-input-privilege.stories.js +36 -18
- package/dist/stories/ox-input-privilege.stories.js.map +1 -1
- package/dist/stories/ox-input-quantifier.stories.d.ts +5 -0
- package/dist/stories/ox-input-quantifier.stories.js +37 -10
- package/dist/stories/ox-input-quantifier.stories.js.map +1 -1
- package/dist/stories/ox-input-range.stories.d.ts +5 -0
- package/dist/stories/ox-input-range.stories.js +32 -5
- package/dist/stories/ox-input-range.stories.js.map +1 -1
- package/dist/stories/ox-input-search.stories.d.ts +5 -0
- package/dist/stories/ox-input-search.stories.js +35 -12
- package/dist/stories/ox-input-search.stories.js.map +1 -1
- package/dist/stories/ox-input-select-buttons.stories.d.ts +5 -0
- package/dist/stories/ox-input-select-buttons.stories.js +36 -14
- package/dist/stories/ox-input-select-buttons.stories.js.map +1 -1
- package/dist/stories/ox-input-unit.stories.d.ts +5 -0
- package/dist/stories/ox-input-unit.stories.js +40 -13
- package/dist/stories/ox-input-unit.stories.js.map +1 -1
- package/dist/stories/ox-input-value-map.stories.d.ts +5 -0
- package/dist/stories/ox-input-value-map.stories.js +36 -13
- package/dist/stories/ox-input-value-map.stories.js.map +1 -1
- package/dist/stories/ox-input-value-ranges.stories.d.ts +5 -0
- package/dist/stories/ox-input-value-ranges.stories.js +36 -13
- package/dist/stories/ox-input-value-ranges.stories.js.map +1 -1
- package/dist/stories/ox-input-work-shift.stories.d.ts +5 -0
- package/dist/stories/ox-input-work-shift.stories.js +36 -13
- package/dist/stories/ox-input-work-shift.stories.js.map +1 -1
- package/dist/stories/ox-select-set-options.stories.d.ts +5 -0
- package/dist/stories/ox-select-set-options.stories.js +29 -4
- package/dist/stories/ox-select-set-options.stories.js.map +1 -1
- package/dist/stories/ox-select.stories.d.ts +5 -0
- package/dist/stories/ox-select.stories.js +29 -5
- package/dist/stories/ox-select.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +5 -5
- package/src/ox-buttons-radio.ts +37 -5
- package/src/ox-checkbox.ts +23 -19
- package/src/ox-input-3axis.ts +12 -1
- package/src/ox-input-3dish.ts +16 -11
- package/src/ox-input-angle.ts +8 -1
- package/src/ox-input-barcode.ts +12 -8
- package/src/ox-input-code.ts +3 -0
- package/src/ox-input-color.ts +8 -6
- package/src/ox-input-crontab.ts +29 -25
- package/src/ox-input-data.ts +15 -6
- package/src/ox-input-duration.ts +15 -34
- package/src/ox-input-file.ts +18 -14
- package/src/ox-input-hashtags.ts +14 -16
- package/src/ox-input-i18n-label.ts +4 -4
- package/src/ox-input-image.ts +1 -1
- package/src/ox-input-key-values.ts +6 -6
- package/src/ox-input-mass-fraction.ts +5 -5
- package/src/ox-input-multiple-colors.ts +2 -2
- package/src/ox-input-options.ts +6 -6
- package/src/ox-input-partition-keys.ts +6 -6
- package/src/ox-input-privilege.ts +13 -16
- package/src/ox-input-quantifier.ts +5 -5
- package/src/ox-input-range.ts +8 -8
- package/src/ox-input-search.ts +3 -5
- package/src/ox-input-select-buttons.ts +1 -1
- package/src/ox-input-table.ts +1 -1
- package/src/ox-input-unit-number.ts +5 -5
- package/src/ox-input-value-map.ts +6 -6
- package/src/ox-input-value-ranges.ts +7 -7
- package/src/ox-input-work-shift.ts +7 -7
- package/src/ox-select.ts +4 -4
- package/stories/ox-buttons-radio.stories.ts +96 -0
- package/stories/ox-checkbox.stories.ts +61 -14
- package/stories/ox-input-3axis.stories.ts +35 -12
- package/stories/ox-input-3dish.stories.ts +38 -15
- package/stories/ox-input-angle.stories.ts +39 -15
- package/stories/ox-input-barcode.stories.ts +37 -18
- package/stories/ox-input-code.stories.ts +42 -15
- package/stories/ox-input-crontab.stories.ts +43 -14
- package/stories/ox-input-data.stories.ts +38 -14
- package/stories/ox-input-duration.stories.ts +39 -15
- package/stories/ox-input-file.stories.ts +41 -16
- package/stories/ox-input-hashtags.stories.ts +42 -12
- package/stories/ox-input-i18n-label.stories.ts +55 -31
- package/stories/ox-input-key-values.stories.ts +44 -14
- package/stories/ox-input-mass-fraction.stories.ts +40 -15
- package/stories/ox-input-multiple-colors.stories.ts +34 -151
- package/stories/ox-input-options.stories.ts +37 -13
- package/stories/ox-input-partition-keys.stories.ts +42 -13
- package/stories/ox-input-privilege.stories.ts +45 -20
- package/stories/ox-input-quantifier.stories.ts +38 -10
- package/stories/ox-input-range.stories.ts +34 -5
- package/stories/ox-input-search.stories.ts +37 -12
- package/stories/ox-input-select-buttons.stories.ts +40 -16
- package/stories/ox-input-unit.stories.ts +43 -14
- package/stories/ox-input-value-map.stories.ts +40 -15
- package/stories/ox-input-value-ranges.stories.ts +40 -15
- package/stories/ox-input-work-shift.stories.ts +39 -15
- package/stories/ox-select-set-options.stories.ts +31 -4
- package/stories/ox-select.stories.ts +31 -5
- package/themes/dark-hc.css +151 -0
- package/themes/dark-mc.css +151 -0
- package/themes/dark.css +151 -0
- package/themes/grist-theme.css +169 -0
- package/themes/light-hc.css +151 -0
- package/themes/light-mc.css +151 -0
- package/themes/light.css +151 -0
- package/themes/md-typescale-styles.css +100 -0
- package/themes/spacing.css +43 -0
- package/themes/state-color.css +6 -0
- package/themes/app-theme.css +0 -145
- package/themes/input-theme.css +0 -32
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,44 @@
|
|
|
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.149](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.148...v2.0.0-alpha.149) (2024-05-30)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* styles ([9ec269b](https://github.com/hatiolab/operato/commit/9ec269b18bc82a931083137214fb6e3017201107))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [2.0.0-alpha.148](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.147...v2.0.0-alpha.148) (2024-05-30)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :rocket: New Features
|
|
19
|
+
|
|
20
|
+
* md3 ([2d85145](https://github.com/hatiolab/operato/commit/2d8514510e4dd88d3ff0652e0b22c9992cabce5c))
|
|
21
|
+
* md3 ([55b7496](https://github.com/hatiolab/operato/commit/55b7496ea46a6b65ac6ab71bc1be7c89d1ba91e5))
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
### :sparkles: Styling
|
|
25
|
+
|
|
26
|
+
* input ([b44bf8d](https://github.com/hatiolab/operato/commit/b44bf8d0a100fc59ecf79f0a832a445f90d2f4ee))
|
|
27
|
+
* list, grid, card ([773b57c](https://github.com/hatiolab/operato/commit/773b57c8f85536ddfc2bd883f0209341c0ff2a0b))
|
|
28
|
+
* popup ([f881e3b](https://github.com/hatiolab/operato/commit/f881e3b1b70acd957a4ba5565bc0b90f0ef18d00))
|
|
29
|
+
* themes update, ox-buttons-radio, ox-checkbo ([0da66c4](https://github.com/hatiolab/operato/commit/0da66c47f053ee6675a247d6968ceaf818f06ad3))
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
### :bug: Bug Fix
|
|
33
|
+
|
|
34
|
+
* color theme ([8498761](https://github.com/hatiolab/operato/commit/8498761842ba6c53b98f14ec1ba061d090a997c8))
|
|
35
|
+
* dark theme for event-view ([0480a3d](https://github.com/hatiolab/operato/commit/0480a3d970a488e9f0cd93a1af66b4516c44b4bb))
|
|
36
|
+
* input button style on dark theme ([b8d1a3f](https://github.com/hatiolab/operato/commit/b8d1a3f68c490fd9d1f38b3bbaba40292dd6b88c))
|
|
37
|
+
* missing code from ox-select stories ([bd229bb](https://github.com/hatiolab/operato/commit/bd229bb4fdb1d0b6db61977fb2452bdfe8c98950))
|
|
38
|
+
* ox-buttons-radio ([339e0bc](https://github.com/hatiolab/operato/commit/339e0bcfee9288e1144189ed2f0ac27935c7a6d8))
|
|
39
|
+
* ox-input-select-buttons story ([8efa3c6](https://github.com/hatiolab/operato/commit/8efa3c6e7428eef23cfe10757c155b62a9d59ab4))
|
|
40
|
+
* revoke ox-input-barcode ([db50995](https://github.com/hatiolab/operato/commit/db50995c0685f0ca81e5d26025ebe502f83ec077))
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
6
44
|
## [2.0.0-alpha.146](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.145...v2.0.0-alpha.146) (2024-05-29)
|
|
7
45
|
|
|
8
46
|
|
package/demo/index-barcode.html
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html lang="en-GB">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
@@ -13,13 +13,13 @@
|
|
|
13
13
|
--ox-checkbox-border: 1px solid rgba(0, 0, 0, 0.3);
|
|
14
14
|
--ox-checkbox-border-radius: var(--border-radius, 4px);
|
|
15
15
|
--ox-checkbox-size: 15px;
|
|
16
|
-
--ox-checkbox-background-color: var(--
|
|
17
|
-
--ox-checkbox-label-color: var(--
|
|
16
|
+
--ox-checkbox-background-color: var(--md-sys-color-surface, #fff);
|
|
17
|
+
--ox-checkbox-label-color: var(--md-sys-color-on-primary-container, #3a5877);
|
|
18
18
|
--ox-checkbox-label-margin: 0 0 0 7px;
|
|
19
19
|
|
|
20
20
|
/* checkbox checked */
|
|
21
21
|
--ox-checkbox-checked-background-color: var(--ox-checkbox-background-color);
|
|
22
|
-
--ox-checkbox-checked-color: var(--primary-
|
|
22
|
+
--ox-checkbox-checked-color: var(--md-sys-color-on-primary-container, #38a25b);
|
|
23
23
|
--ox-checkbox-checked-border: 1px solid var(--ox-checkbox-checked-color);
|
|
24
24
|
--ox-checkbox-checked-font-weight: bold;
|
|
25
25
|
|
package/demo/index-checkbox.html
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html lang="en-GB">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
@@ -13,13 +13,13 @@
|
|
|
13
13
|
--ox-checkbox-border: 1px solid rgba(0, 0, 0, 0.3);
|
|
14
14
|
--ox-checkbox-border-radius: var(--border-radius, 4px);
|
|
15
15
|
--ox-checkbox-size: 15px;
|
|
16
|
-
--ox-checkbox-background-color: var(--
|
|
17
|
-
--ox-checkbox-label-color: var(--
|
|
16
|
+
--ox-checkbox-background-color: var(--md-sys-color-surface, #fff);
|
|
17
|
+
--ox-checkbox-label-color: var(--md-sys-color-on-primary-container, #3a5877);
|
|
18
18
|
--ox-checkbox-label-margin: 0 0 0 7px;
|
|
19
19
|
|
|
20
20
|
/* checkbox checked */
|
|
21
21
|
--ox-checkbox-checked-background-color: var(--ox-checkbox-background-color);
|
|
22
|
-
--ox-checkbox-checked-color: var(--primary-
|
|
22
|
+
--ox-checkbox-checked-color: var(--md-sys-color-on-primary-container, #38a25b);
|
|
23
23
|
--ox-checkbox-checked-border: 1px solid var(--ox-checkbox-checked-color);
|
|
24
24
|
--ox-checkbox-checked-font-weight: bold;
|
|
25
25
|
|
package/demo/index-code.html
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html lang="en-GB">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
@@ -13,13 +13,13 @@
|
|
|
13
13
|
--ox-checkbox-border: 1px solid rgba(0, 0, 0, 0.3);
|
|
14
14
|
--ox-checkbox-border-radius: var(--border-radius, 4px);
|
|
15
15
|
--ox-checkbox-size: 15px;
|
|
16
|
-
--ox-checkbox-background-color: var(--
|
|
17
|
-
--ox-checkbox-label-color: var(--
|
|
16
|
+
--ox-checkbox-background-color: var(--md-sys-color-surface, #fff);
|
|
17
|
+
--ox-checkbox-label-color: var(--md-sys-color-on-primary-container, #3a5877);
|
|
18
18
|
--ox-checkbox-label-margin: 0 0 0 7px;
|
|
19
19
|
|
|
20
20
|
/* checkbox checked */
|
|
21
21
|
--ox-checkbox-checked-background-color: var(--ox-checkbox-background-color);
|
|
22
|
-
--ox-checkbox-checked-color: var(--primary-
|
|
22
|
+
--ox-checkbox-checked-color: var(--md-sys-color-on-primary-container, #38a25b);
|
|
23
23
|
--ox-checkbox-checked-border: 1px solid var(--ox-checkbox-checked-color);
|
|
24
24
|
--ox-checkbox-checked-font-weight: bold;
|
|
25
25
|
|
package/demo/index-options.html
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html lang="en-GB">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
console.log('form value', new FormData(form).get('options'))
|
|
35
35
|
}}
|
|
36
36
|
></ox-input-options>
|
|
37
|
-
<input type="button" value="Sort" @click=${e => sort()}
|
|
37
|
+
<input type="button" value="Sort" @click=${e => sort()} />
|
|
38
38
|
`,
|
|
39
39
|
form
|
|
40
40
|
)
|
|
@@ -8,13 +8,17 @@ import { OxFormField } from './ox-form-field';
|
|
|
8
8
|
|
|
9
9
|
Example:
|
|
10
10
|
|
|
11
|
-
<ox-buttons-radio
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
<ox-buttons-radio
|
|
12
|
+
class="light"
|
|
13
|
+
@change=${(e: CustomEvent) => console.log(e.detail)}
|
|
14
|
+
value="1"
|
|
15
|
+
>
|
|
16
|
+
<md-outlined-button data-value="1" ?active=${value == '1'}>Option 1</md-outlined-button>
|
|
17
|
+
<md-outlined-button data-value="2" ?active=${value == '2'}>Option 2</md-outlined-button>
|
|
18
|
+
<md-outlined-button data-value="3" ?active=${value == '3'}>Option 3</md-outlined-button>
|
|
15
19
|
</ox-buttons-radio>
|
|
16
20
|
*/
|
|
17
|
-
export declare class
|
|
21
|
+
export declare class OxButtonsRadio extends OxFormField {
|
|
18
22
|
static styles: import("lit").CSSResult[];
|
|
19
23
|
/**
|
|
20
24
|
* `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.
|
|
@@ -10,13 +10,17 @@ import { OxFormField } from './ox-form-field';
|
|
|
10
10
|
|
|
11
11
|
Example:
|
|
12
12
|
|
|
13
|
-
<ox-buttons-radio
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
<ox-buttons-radio
|
|
14
|
+
class="light"
|
|
15
|
+
@change=${(e: CustomEvent) => console.log(e.detail)}
|
|
16
|
+
value="1"
|
|
17
|
+
>
|
|
18
|
+
<md-outlined-button data-value="1" ?active=${value == '1'}>Option 1</md-outlined-button>
|
|
19
|
+
<md-outlined-button data-value="2" ?active=${value == '2'}>Option 2</md-outlined-button>
|
|
20
|
+
<md-outlined-button data-value="3" ?active=${value == '3'}>Option 3</md-outlined-button>
|
|
17
21
|
</ox-buttons-radio>
|
|
18
22
|
*/
|
|
19
|
-
let
|
|
23
|
+
let OxButtonsRadio = class OxButtonsRadio extends OxFormField {
|
|
20
24
|
constructor() {
|
|
21
25
|
super(...arguments);
|
|
22
26
|
/**
|
|
@@ -31,6 +35,34 @@ let PropertyButtonsRadio = class PropertyButtonsRadio extends OxFormField {
|
|
|
31
35
|
css `
|
|
32
36
|
:host {
|
|
33
37
|
display: inline-block;
|
|
38
|
+
background-color: var(--ox-buttons-radio-background-color, var(--md-sys-color-surface));
|
|
39
|
+
|
|
40
|
+
--md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);
|
|
41
|
+
--md-outlined-button-label-text-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
|
|
42
|
+
--md-outlined-button-container-height: var(--form-element-height-medium);
|
|
43
|
+
--md-outlined-button-container-shape: var(--md-sys-shape-corner-small);
|
|
44
|
+
--md-outlined-button-leading-space: var(--spacing-large);
|
|
45
|
+
--md-outlined-button-trailing-space: var(--spacing-large);
|
|
46
|
+
--md-outlined-button-hover-label-text-color: var(--md-sys-color-primary);
|
|
47
|
+
--md-outlined-button-pressed-outline-color: var(--md-sys-color-primary);
|
|
48
|
+
--md-outlined-button-pressed-label-text-color: var(--md-sys-color-primary);
|
|
49
|
+
|
|
50
|
+
--md-filled-button-container-color: var(--md-sys-color-primary);
|
|
51
|
+
--md-filled-button-label-text-color: var(--md-sys-color-primary-container);
|
|
52
|
+
--md-filled-button-label-text-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
|
|
53
|
+
--md-filled-button-container-height: var(--form-element-height-medium);
|
|
54
|
+
--md-filled-button-container-shape: var(--md-sys-shape-corner-small);
|
|
55
|
+
--md-filled-button-leading-space: var(--spacing-large);
|
|
56
|
+
--md-filled-button-trailing-space: var(--spacing-large);
|
|
57
|
+
--md-filled-button-hover-label-text-color: var(--md-sys-color-secondary-container);
|
|
58
|
+
--md-filled-button-pressed-label-text-color: var(--md-sys-color-secondary-container);
|
|
59
|
+
--md-filled-button-focus-label-text-color: var(--md-sys-color-secondary-container);
|
|
60
|
+
|
|
61
|
+
--md-text-button-container-height: var(--form-element-height-medium);
|
|
62
|
+
--md-text-button-container-shape: var(--md-sys-shape-corner-small);
|
|
63
|
+
|
|
64
|
+
--md-elevated-button-container-height: var(--form-element-height-medium);
|
|
65
|
+
--md-elevated-button-container-shape: var(--md-sys-shape-corner-small);
|
|
34
66
|
}
|
|
35
67
|
`
|
|
36
68
|
]; }
|
|
@@ -93,15 +125,15 @@ let PropertyButtonsRadio = class PropertyButtonsRadio extends OxFormField {
|
|
|
93
125
|
};
|
|
94
126
|
__decorate([
|
|
95
127
|
property({ type: Object })
|
|
96
|
-
],
|
|
128
|
+
], OxButtonsRadio.prototype, "value", void 0);
|
|
97
129
|
__decorate([
|
|
98
130
|
property({ type: Boolean })
|
|
99
|
-
],
|
|
131
|
+
], OxButtonsRadio.prototype, "mandatory", void 0);
|
|
100
132
|
__decorate([
|
|
101
133
|
state()
|
|
102
|
-
],
|
|
103
|
-
|
|
134
|
+
], OxButtonsRadio.prototype, "_slotObserver", void 0);
|
|
135
|
+
OxButtonsRadio = __decorate([
|
|
104
136
|
customElement('ox-buttons-radio')
|
|
105
|
-
],
|
|
106
|
-
export {
|
|
137
|
+
], OxButtonsRadio);
|
|
138
|
+
export { OxButtonsRadio };
|
|
107
139
|
//# sourceMappingURL=ox-buttons-radio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-buttons-radio.js","sourceRoot":"","sources":["../../src/ox-buttons-radio.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE7C
|
|
1
|
+
{"version":3,"file":"ox-buttons-radio.js","sourceRoot":"","sources":["../../src/ox-buttons-radio.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n/**\n여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.\n\nExample:\n\n <ox-buttons-radio\n class=\"light\"\n @change=${(e: CustomEvent) => console.log(e.detail)}\n value=\"1\"\n >\n <md-outlined-button data-value=\"1\" ?active=${value == '1'}>Option 1</md-outlined-button>\n <md-outlined-button data-value=\"2\" ?active=${value == '2'}>Option 2</md-outlined-button>\n <md-outlined-button data-value=\"3\" ?active=${value == '3'}>Option 3</md-outlined-button>\n </ox-buttons-radio>\n*/\n@customElement('ox-buttons-radio')\nexport class OxButtonsRadio extends OxFormField {\n static styles = [\n css`\n :host {\n display: inline-block;\n background-color: var(--ox-buttons-radio-background-color, var(--md-sys-color-surface));\n\n --md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);\n --md-outlined-button-label-text-size: var(--md-sys-typescale-label-medium-size, 0.75rem);\n --md-outlined-button-container-height: var(--form-element-height-medium);\n --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);\n --md-outlined-button-leading-space: var(--spacing-large);\n --md-outlined-button-trailing-space: var(--spacing-large);\n --md-outlined-button-hover-label-text-color: var(--md-sys-color-primary);\n --md-outlined-button-pressed-outline-color: var(--md-sys-color-primary);\n --md-outlined-button-pressed-label-text-color: var(--md-sys-color-primary);\n\n --md-filled-button-container-color: var(--md-sys-color-primary);\n --md-filled-button-label-text-color: var(--md-sys-color-primary-container);\n --md-filled-button-label-text-size: var(--md-sys-typescale-label-medium-size, 0.75rem);\n --md-filled-button-container-height: var(--form-element-height-medium);\n --md-filled-button-container-shape: var(--md-sys-shape-corner-small);\n --md-filled-button-leading-space: var(--spacing-large);\n --md-filled-button-trailing-space: var(--spacing-large);\n --md-filled-button-hover-label-text-color: var(--md-sys-color-secondary-container);\n --md-filled-button-pressed-label-text-color: var(--md-sys-color-secondary-container);\n --md-filled-button-focus-label-text-color: var(--md-sys-color-secondary-container);\n\n --md-text-button-container-height: var(--form-element-height-medium);\n --md-text-button-container-shape: var(--md-sys-shape-corner-small);\n\n --md-elevated-button-container-height: var(--form-element-height-medium);\n --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);\n }\n `\n ]\n\n /**\n * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.\n */\n @property({ type: Object }) value: Object | null = null\n @property({ type: Boolean }) mandatory!: boolean\n\n @state() _slotObserver: MutationObserver = new MutationObserver(mutations => {\n this._onChanged()\n })\n\n render() {\n return html` <slot @click=${(e: Event) => this._onTapButton(e)}></slot> `\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this._slotObserver?.observe(this, { childList: true })\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n this._slotObserver?.disconnect()\n }\n\n updated(changes: PropertyValues<this>) {\n changes.has('value') && this._onChanged()\n }\n\n get buttons() {\n return Array.from(this.querySelectorAll('*'))\n }\n\n _onChanged() {\n this.buttons.forEach(button => {\n if (this.value === button.getAttribute('data-value')) {\n button.setAttribute('active', '')\n } else {\n button.removeAttribute('active')\n }\n })\n }\n\n _onTapButton(e: Event) {\n var target = e.target as HTMLElement\n target = target.closest('[data-value]') as HTMLElement\n\n if (!target || target === this) {\n return\n }\n\n var old = this.value\n\n if (!this.mandatory) {\n if (!target.getAttribute('active')) {\n this.value = target.getAttribute('data-value')\n target.setAttribute('active', '')\n } else {\n this.value = null\n target.removeAttribute('active')\n }\n } else {\n this.value = target.getAttribute('data-value')\n target.setAttribute('active', '')\n }\n\n if (old !== this.value) {\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n }\n}\n"]}
|
package/dist/src/ox-checkbox.js
CHANGED
|
@@ -32,33 +32,36 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
|
|
|
32
32
|
cursor: auto;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
.checkbox {
|
|
36
36
|
display: flex;
|
|
37
37
|
border-radius: var(--ox-checkbox-border-radius, 4px);
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
background-color: var(--ox-checkbox-unchecked-background-color, var(--md-sys-color-surface-container-lowest));
|
|
39
|
+
border: var(--ox-checkbox-unchecked-border, 1px solid var(--md-sys-color-outline));
|
|
40
40
|
width: var(--ox-checkbox-size, 15px);
|
|
41
41
|
height: var(--ox-checkbox-size, 15px);
|
|
42
42
|
align-items: center;
|
|
43
43
|
justify-content: center;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
|
|
47
|
-
background-color: var(--ox-checkbox-unchecked-background-color,
|
|
48
|
-
border: var(--ox-checkbox-unchecked-border, 1px solid rgba(0, 0, 0, 0.3));
|
|
46
|
+
:host([indeterminate]) .checkbox {
|
|
47
|
+
background-color: var(--ox-checkbox-unchecked-background-color, var(--md-ref-palette-primary80));
|
|
49
48
|
}
|
|
50
49
|
|
|
51
|
-
:host([checked])
|
|
52
|
-
background-color: var(--ox-checkbox-checked-background-color,
|
|
53
|
-
border: var(--ox-checkbox-checked-border, 1px solid #38a25b);
|
|
50
|
+
:host([checked]) .checkbox {
|
|
51
|
+
background-color: var(--ox-checkbox-checked-background-color, var(--md-ref-palette-primary60));
|
|
54
52
|
}
|
|
55
53
|
|
|
56
54
|
path {
|
|
57
|
-
fill: var(--ox-checkbox-
|
|
55
|
+
fill: var(--ox-checkbox-unchecked-color, var(--md-sys-color-surface-container-lowest));
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
:host([indeterminate]) line {
|
|
59
|
+
fill: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-on-surface-variant));
|
|
60
|
+
stroke: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-outline));
|
|
58
61
|
}
|
|
59
62
|
|
|
60
63
|
:host([checked]) path {
|
|
61
|
-
fill: var(--ox-checkbox-checked-color,
|
|
64
|
+
fill: var(--ox-checkbox-checked-color, var(--md-sys-color-on-primary));
|
|
62
65
|
}
|
|
63
66
|
|
|
64
67
|
svg {
|
|
@@ -66,12 +69,13 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
|
|
|
66
69
|
height: var(--ox-checkbox-size, 15px);
|
|
67
70
|
}
|
|
68
71
|
|
|
69
|
-
|
|
70
|
-
color: var(--ox-checkbox-label-color,
|
|
72
|
+
.label {
|
|
73
|
+
color: var(--ox-checkbox-label-color, var(--md-sys-color-on-surface-variant));
|
|
74
|
+
font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
|
|
75
|
+
line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);
|
|
71
76
|
}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
font-weight: var(--ox-checkbox-checked-font-weight, bold);
|
|
77
|
+
:host([checked]) .label {
|
|
78
|
+
font-weight: 700;
|
|
75
79
|
}
|
|
76
80
|
`
|
|
77
81
|
]; }
|
|
@@ -83,11 +87,11 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
|
|
|
83
87
|
<slot></slot>
|
|
84
88
|
</span>`
|
|
85
89
|
: ''}
|
|
86
|
-
<a href="#" @click=${(e) => e.preventDefault()} checkbox>
|
|
90
|
+
<a href="#" @click=${(e) => e.preventDefault()} class="checkbox">
|
|
87
91
|
${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}
|
|
88
92
|
</a>
|
|
89
93
|
${this._hasInner && !this.left
|
|
90
|
-
? html ` <span label>
|
|
94
|
+
? html ` <span class="label">
|
|
91
95
|
<slot></slot>
|
|
92
96
|
</span>`
|
|
93
97
|
: ''}
|
|
@@ -144,7 +148,7 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
|
|
|
144
148
|
get indeterminateIcon() {
|
|
145
149
|
return html `
|
|
146
150
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
147
|
-
<line x1="4" x2="20" y1="12" y2="12" stroke
|
|
151
|
+
<line x1="4" x2="20" y1="12" y2="12" stroke-width="2" stroke-linecap="round" />
|
|
148
152
|
</svg>
|
|
149
153
|
`;
|
|
150
154
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH;;EAEE;AAEF,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGtC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,WAAW;IAApC;;
|
|
1
|
+
{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\n/*\n This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.\n*/\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-checkbox')\nexport class OxCheckbox extends OxFormField {\n static styles = [\n css`\n div {\n display: flex;\n gap: var(--input-intra-gap, 7px);\n\n align-items: center;\n cursor: pointer;\n }\n\n [disabled] {\n opacity: var(--ox-checkbox-disabled-opacity, 0.5);\n cursor: auto;\n }\n\n .checkbox {\n display: flex;\n border-radius: var(--ox-checkbox-border-radius, 4px);\n background-color: var(--ox-checkbox-unchecked-background-color, var(--md-sys-color-surface-container-lowest));\n border: var(--ox-checkbox-unchecked-border, 1px solid var(--md-sys-color-outline));\n width: var(--ox-checkbox-size, 15px);\n height: var(--ox-checkbox-size, 15px);\n align-items: center;\n justify-content: center;\n }\n\n :host([indeterminate]) .checkbox {\n background-color: var(--ox-checkbox-unchecked-background-color, var(--md-ref-palette-primary80));\n }\n\n :host([checked]) .checkbox {\n background-color: var(--ox-checkbox-checked-background-color, var(--md-ref-palette-primary60));\n }\n\n path {\n fill: var(--ox-checkbox-unchecked-color, var(--md-sys-color-surface-container-lowest));\n }\n\n :host([indeterminate]) line {\n fill: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-on-surface-variant));\n stroke: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-outline));\n }\n\n :host([checked]) path {\n fill: var(--ox-checkbox-checked-color, var(--md-sys-color-on-primary));\n }\n\n svg {\n width: var(--ox-checkbox-size, 15px);\n height: var(--ox-checkbox-size, 15px);\n }\n\n .label {\n color: var(--ox-checkbox-label-color, var(--md-sys-color-on-surface-variant));\n font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);\n line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);\n }\n :host([checked]) .label {\n font-weight: 700;\n }\n `\n ]\n\n @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean | undefined = false\n @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false\n @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false\n @property({ type: Boolean, attribute: 'left-label' }) left: boolean = false\n\n @state() _hasInner: boolean = !!this.innerHTML.trim().length\n\n render() {\n return html`\n <div @click=${this.onClick} ?disabled=${this.disabled}>\n ${this._hasInner && this.left\n ? html` <span label>\n <slot></slot>\n </span>`\n : ''}\n <a href=\"#\" @click=${(e: Event) => e.preventDefault()} class=\"checkbox\">\n ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}\n </a>\n ${this._hasInner && !this.left\n ? html` <span class=\"label\">\n <slot></slot>\n </span>`\n : ''}\n </div>\n `\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.setAttribute('tabindex', '0')\n this.addEventListener('keydown', this.onKeyDown.bind(this))\n }\n\n onClick() {\n if (this.disabled) {\n return\n }\n\n if (!this.indeterminatable) {\n this.indeterminate = false\n this.checked = !this.checked\n } else {\n if (this.indeterminate) {\n this.indeterminate = false\n this.checked = true\n } else if (this.checked) {\n this.indeterminate = false\n this.checked = false\n } else {\n this.indeterminate = true\n this.checked = undefined\n }\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.checked\n })\n )\n }\n\n get checkedIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n `\n }\n\n get uncheckedIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n `\n }\n\n get indeterminateIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n `\n }\n\n onKeyDown(e: KeyboardEvent) {\n e.preventDefault()\n\n if (e.key === ' ' || e.key == 'Spacebar') {\n this.onClick()\n }\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n this.name && !this.indeterminate && formData.append(this.name, this.checked ? 'true' : 'false')\n }\n}\n"]}
|
|
@@ -13,13 +13,24 @@ let OxInput3Axis = class OxInput3Axis extends OxFormField {
|
|
|
13
13
|
display: flex;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
input {
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
padding: 0 var(--spacing-small);
|
|
19
|
+
height: var(--form-element-height-medium);
|
|
20
|
+
border: 1px solid var(--md-sys-color-outline);
|
|
21
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
22
|
+
background-color: var(--md-sys-color-on-primary);
|
|
23
|
+
font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
|
|
24
|
+
color: var(--md-sys-color-on-primary-container);
|
|
25
|
+
}
|
|
26
|
+
|
|
16
27
|
input:not(:last-child) {
|
|
17
28
|
margin-right: var(--margin-default, 2px);
|
|
18
29
|
}
|
|
19
30
|
|
|
20
31
|
input:focus {
|
|
21
32
|
outline: none;
|
|
22
|
-
border-
|
|
33
|
+
border-color: var(--md-sys-color-secondary-fixed-dim);
|
|
23
34
|
}
|
|
24
35
|
`
|
|
25
36
|
]; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-3axis.js","sourceRoot":"","sources":["../../src/ox-input-3axis.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAItC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;aACpC,WAAM,GAAG;QACd,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"ox-input-3axis.js","sourceRoot":"","sources":["../../src/ox-input-3axis.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAItC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;aACpC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;KAwBF;KACF,AA1BY,CA0BZ;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACvE,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,EAAE,GAAG,OAAO,CAAC,EAAqB,CAAA;QACtC,IAAI,KAAK,GAAG,MAAM,CAAE,OAA4B,CAAC,KAAK,CAAC,CAAA;QAEvD,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,EAAE,CAAC,EAAE,KAAK;SACZ,CAAA;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAC9B,OAAO,IAAI,CAAA;2DAC4C,MAAM,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;2DACpC,MAAM,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;2DACpC,MAAM,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;KAC1F,CAAA;IACH,CAAC;;AA9DU,YAAY;IAFxB,SAAS,EAAE;IACX,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA+DxB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { localized } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field'\n\n@localized()\n@customElement('ox-input-3axis')\nexport class OxInput3Axis extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n }\n\n input {\n box-sizing: border-box;\n padding: 0 var(--spacing-small);\n height: var(--form-element-height-medium);\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--md-sys-shape-corner-small);\n background-color: var(--md-sys-color-on-primary);\n font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n input:not(:last-child) {\n margin-right: var(--margin-default, 2px);\n }\n\n input:focus {\n outline: none;\n border-color: var(--md-sys-color-secondary-fixed-dim);\n }\n `\n ]\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 as 'x' | 'y' | 'z'\n var value = Number((element as HTMLInputElement).value)\n\n this.value = {\n ...this.value,\n [id]: value\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 const { x, y, z } = this.value\n return html`\n <input type=\"number\" id=\"x\" placeholder=\"X\" .value=${String(x)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"y\" placeholder=\"Y\" .value=${String(y)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"z\" placeholder=\"Z\" .value=${String(z)} ?disabled=${this.disabled} />\n `\n }\n}\n"]}
|
|
@@ -13,14 +13,14 @@ let OxInput3Dish = class OxInput3Dish extends OxFormField {
|
|
|
13
13
|
:host {
|
|
14
14
|
display: grid;
|
|
15
15
|
grid-template-columns: repeat(7, minmax(50px, 1fr));
|
|
16
|
-
grid-gap: var(--
|
|
16
|
+
grid-gap: var(--spacing-medium);
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
label {
|
|
20
20
|
text-align: right;
|
|
21
21
|
align-self: center;
|
|
22
|
-
font: var(--label-
|
|
23
|
-
color: var(--
|
|
22
|
+
font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
|
|
23
|
+
color: var(--md-sys-color-on-primary-container);
|
|
24
24
|
text-transform: var(--label-text-transform);
|
|
25
25
|
grid-column: span 1;
|
|
26
26
|
}
|
|
@@ -28,18 +28,23 @@ let OxInput3Dish = class OxInput3Dish extends OxFormField {
|
|
|
28
28
|
span {
|
|
29
29
|
grid-column: span 2;
|
|
30
30
|
text-align: center;
|
|
31
|
-
font: var(--label-
|
|
32
|
-
color: var(--
|
|
31
|
+
font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
|
|
32
|
+
color: var(--md-sys-color-surface-tint);
|
|
33
|
+
font-weight: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500));
|
|
33
34
|
}
|
|
34
35
|
|
|
35
36
|
input,
|
|
36
37
|
ox-input-angle {
|
|
37
38
|
grid-column: span 2;
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
39
|
+
box-sizing: border-box;
|
|
40
|
+
padding: 0 var(--spacing-small);
|
|
41
|
+
height: var(--form-element-height-medium);
|
|
42
|
+
border: 1px solid var(--md-sys-color-outline);
|
|
43
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
44
|
+
overflow: hidden;
|
|
45
|
+
background-color: var(--md-sys-color-on-primary);
|
|
46
|
+
font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
|
|
47
|
+
color: var(--md-sys-color-on-primary-container);
|
|
43
48
|
}
|
|
44
49
|
|
|
45
50
|
ox-input-angle {
|
|
@@ -48,7 +53,7 @@ let OxInput3Dish = class OxInput3Dish extends OxFormField {
|
|
|
48
53
|
|
|
49
54
|
input:focus {
|
|
50
55
|
outline: none;
|
|
51
|
-
border-
|
|
56
|
+
border-color: var(--md-sys-color-secondary-fixed-dim);
|
|
52
57
|
}
|
|
53
58
|
`
|
|
54
59
|
]; }
|
|
@@ -1 +1 @@
|
|
|
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 */\n\nimport './ox-input-angle'\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 ox-input-angle {\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\n ox-input-angle {\n --input-border: 0;\n }\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 @property({ type: Object }) position?: { 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.position = {\n ...this.position,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('position-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.position\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 position: this.position,\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=${String(this.dimension?.width)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"dheight\" .value=${String(this.dimension?.height)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"ddepth\" .value=${String(this.dimension?.depth)} ?disabled=${this.disabled} />\n\n <label>${msg('position')}</label>\n <input type=\"number\" id=\"tx\" .value=${String(this.position?.x)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"ty\" .value=${String(this.position?.y)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"tz\" .value=${String(this.position?.z)} ?disabled=${this.disabled} />\n\n <label>${msg('scale')}</label>\n <input type=\"number\" id=\"sx\" .value=${String(this.scale?.x)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"sy\" .value=${String(this.scale?.y)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"sz\" .value=${String(this.scale?.z)} ?disabled=${this.disabled} />\n\n <label>${msg('rotate')}</label>\n <ox-input-angle id=\"rx\" .value=${String(this.rotate?.x)} ?disabled=${this.disabled}></ox-input-angle>\n <ox-input-angle id=\"ry\" .value=${String(this.rotate?.y)} ?disabled=${this.disabled}></ox-input-angle>\n <ox-input-angle id=\"rz\" .value=${String(this.rotate?.z)} ?disabled=${this.disabled}></ox-input-angle>\n `\n }\n}\n"]}
|
|
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 */\n\nimport './ox-input-angle'\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(--spacing-medium);\n }\n\n label {\n text-align: right;\n align-self: center;\n font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);\n color: var(--md-sys-color-on-primary-container);\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-size: var(--md-sys-typescale-label-medium-size, 0.75rem);\n color: var(--md-sys-color-surface-tint);\n font-weight: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500));\n }\n\n input,\n ox-input-angle {\n grid-column: span 2;\n box-sizing: border-box;\n padding: 0 var(--spacing-small);\n height: var(--form-element-height-medium);\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--md-sys-shape-corner-small);\n overflow: hidden;\n background-color: var(--md-sys-color-on-primary);\n font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n ox-input-angle {\n --input-border: 0;\n }\n\n input:focus {\n outline: none;\n border-color: var(--md-sys-color-secondary-fixed-dim);\n }\n `\n ]\n\n @property({ type: Object }) dimension?: { width?: number; height?: number; depth?: number }\n @property({ type: Object }) position?: { 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.position = {\n ...this.position,\n [prop]: value\n }\n\n this.dispatchEvent(\n new CustomEvent('position-changed', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.position\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 position: this.position,\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=${String(this.dimension?.width)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"dheight\" .value=${String(this.dimension?.height)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"ddepth\" .value=${String(this.dimension?.depth)} ?disabled=${this.disabled} />\n\n <label>${msg('position')}</label>\n <input type=\"number\" id=\"tx\" .value=${String(this.position?.x)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"ty\" .value=${String(this.position?.y)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"tz\" .value=${String(this.position?.z)} ?disabled=${this.disabled} />\n\n <label>${msg('scale')}</label>\n <input type=\"number\" id=\"sx\" .value=${String(this.scale?.x)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"sy\" .value=${String(this.scale?.y)} ?disabled=${this.disabled} />\n <input type=\"number\" id=\"sz\" .value=${String(this.scale?.z)} ?disabled=${this.disabled} />\n\n <label>${msg('rotate')}</label>\n <ox-input-angle id=\"rx\" .value=${String(this.rotate?.x)} ?disabled=${this.disabled}></ox-input-angle>\n <ox-input-angle id=\"ry\" .value=${String(this.rotate?.y)} ?disabled=${this.disabled}></ox-input-angle>\n <ox-input-angle id=\"rz\" .value=${String(this.rotate?.z)} ?disabled=${this.disabled}></ox-input-angle>\n `\n }\n}\n"]}
|
|
@@ -15,12 +15,19 @@ let OxInputAngle = class OxInputAngle extends OxFormField {
|
|
|
15
15
|
input {
|
|
16
16
|
width: 100%;
|
|
17
17
|
height: 100%;
|
|
18
|
+
min-height: var(--form-element-height-medium);
|
|
19
|
+
padding: 0 var(--spacing-small);
|
|
18
20
|
box-sizing: border-box;
|
|
19
|
-
border: var(--input-border, 1px solid
|
|
21
|
+
border: var(--input-border, 1px solid var(--md-sys-color-outline));
|
|
22
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
23
|
+
background-color: var(--md-sys-color-on-primary);
|
|
24
|
+
font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
|
|
25
|
+
color: var(--md-sys-color-on-primary-container);
|
|
20
26
|
}
|
|
21
27
|
|
|
22
28
|
input:focus {
|
|
23
29
|
outline: var(--input-focus-outline, inherit);
|
|
30
|
+
border-color: var(--md-sys-color-secondary-fixed-dim);
|
|
24
31
|
}
|
|
25
32
|
`
|
|
26
33
|
]; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-angle.js","sourceRoot":"","sources":["../../src/ox-input-angle.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGtC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;aACpC,WAAM,GAAG;QACd,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"ox-input-angle.js","sourceRoot":"","sources":["../../src/ox-input-angle.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGtC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;aACpC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;KAsBF;KACF,AAxBY,CAwBZ;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;uBAC5B,IAAI,CAAC,WAAW,IAAI,IAAI;kBAC7B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;oBAClC,IAAI,CAAC,QAAQ;;KAE5B,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAE7C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;IAED,SAAS,CAAC,KAAkC;QAC1C,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAED,SAAS,CAAC,MAAmC;QAC3C,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,CAAA;IAC7E,CAAC;;AAlC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAqB;AAEhC;IAAf,KAAK,CAAC,OAAO,CAAC;2CAAyB;AA7B7B,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA8DxB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-angle')\nexport class OxInputAngle extends OxFormField {\n static styles = [\n css`\n :host {\n display: inline-block;\n }\n\n input {\n width: 100%;\n height: 100%;\n min-height: var(--form-element-height-medium);\n padding: 0 var(--spacing-small);\n box-sizing: border-box;\n border: var(--input-border, 1px solid var(--md-sys-color-outline));\n border-radius: var(--md-sys-shape-corner-small);\n background-color: var(--md-sys-color-on-primary);\n font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n input:focus {\n outline: var(--input-focus-outline, inherit);\n border-color: var(--md-sys-color-secondary-fixed-dim);\n }\n `\n ]\n\n @property({ type: String }) placeholder?: string\n\n @query('input') input!: HTMLInputElement\n\n render() {\n return html`\n <input\n type=\"number\"\n .value=${String(this._toDegree(this.value))}\n .placeholder=${this.placeholder || '0°'}\n @change=${(e: Event) => this._onChangeValue(e)}\n ?disabled=${this.disabled}\n />\n `\n }\n\n _onChangeValue(e: Event) {\n this.value = this._toRadian(this.input.value)\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n\n _toDegree(value: string | number | undefined) {\n return Math.round(((Number(value) || 0) * 180) / Math.PI)\n }\n\n _toRadian(degree: string | number | undefined) {\n return isNaN(Number(degree)) ? undefined : Number(degree) * (Math.PI / 180)\n }\n}\n"]}
|