@operato/input 7.1.30 → 7.1.32

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.
Files changed (119) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/tsconfig.tsbuildinfo +1 -1
  3. package/package.json +7 -7
  4. package/.editorconfig +0 -29
  5. package/.storybook/main.js +0 -3
  6. package/.storybook/preview.js +0 -52
  7. package/.storybook/server.mjs +0 -8
  8. package/demo/index-3dish.html +0 -38
  9. package/demo/index-angle.html +0 -36
  10. package/demo/index-barcode.html +0 -68
  11. package/demo/index-button-radio.html +0 -42
  12. package/demo/index-checkbox.html +0 -69
  13. package/demo/index-code.html +0 -61
  14. package/demo/index-color-gradient.html +0 -35
  15. package/demo/index-color-stops.html +0 -62
  16. package/demo/index-color.html +0 -35
  17. package/demo/index-crontab.html +0 -37
  18. package/demo/index-file.html +0 -41
  19. package/demo/index-image.html +0 -40
  20. package/demo/index-multiple-colors.html +0 -52
  21. package/demo/index-options.html +0 -43
  22. package/demo/index-partition-keys.html +0 -79
  23. package/demo/index-range.html +0 -40
  24. package/demo/index-select.html +0 -136
  25. package/demo/index-stack.html +0 -33
  26. package/demo/index-table.html +0 -50
  27. package/demo/index-value-map.html +0 -80
  28. package/demo/index-value-ranges.html +0 -80
  29. package/demo/index-work-shift.html +0 -59
  30. package/demo/index.html +0 -54
  31. package/src/index.ts +0 -34
  32. package/src/locale/locale-codes.ts +0 -18
  33. package/src/locale/locale-picker.ts +0 -43
  34. package/src/locale/localization.ts +0 -15
  35. package/src/locales/en.ts +0 -30
  36. package/src/locales/ko.ts +0 -30
  37. package/src/locales/ms.ts +0 -30
  38. package/src/locales/zh.ts +0 -30
  39. package/src/ox-buttons-radio.ts +0 -140
  40. package/src/ox-checkbox.ts +0 -181
  41. package/src/ox-form-field.ts +0 -53
  42. package/src/ox-input-3axis.ts +0 -77
  43. package/src/ox-input-3dish.ts +0 -211
  44. package/src/ox-input-angle.ts +0 -73
  45. package/src/ox-input-barcode.ts +0 -318
  46. package/src/ox-input-code.ts +0 -139
  47. package/src/ox-input-color-gradient.ts +0 -349
  48. package/src/ox-input-color-stops.ts +0 -525
  49. package/src/ox-input-color.ts +0 -338
  50. package/src/ox-input-container.ts +0 -32
  51. package/src/ox-input-crontab.ts +0 -595
  52. package/src/ox-input-data.ts +0 -219
  53. package/src/ox-input-direction.ts +0 -65
  54. package/src/ox-input-duration.ts +0 -175
  55. package/src/ox-input-file.ts +0 -209
  56. package/src/ox-input-hashtags.ts +0 -185
  57. package/src/ox-input-i18n-label.ts +0 -140
  58. package/src/ox-input-image.ts +0 -168
  59. package/src/ox-input-key-values.ts +0 -301
  60. package/src/ox-input-layout/ox-input-card-layout.ts +0 -58
  61. package/src/ox-input-layout/ox-input-grid-layout.ts +0 -64
  62. package/src/ox-input-layout/ox-input-layout.ts +0 -77
  63. package/src/ox-input-mass-fraction.ts +0 -437
  64. package/src/ox-input-multiple-colors.ts +0 -135
  65. package/src/ox-input-options.ts +0 -216
  66. package/src/ox-input-partition-keys.ts +0 -303
  67. package/src/ox-input-privilege.ts +0 -163
  68. package/src/ox-input-quantifier.ts +0 -62
  69. package/src/ox-input-range.ts +0 -146
  70. package/src/ox-input-scene-component-id.ts +0 -73
  71. package/src/ox-input-search.ts +0 -126
  72. package/src/ox-input-select-buttons.ts +0 -75
  73. package/src/ox-input-signature.ts +0 -180
  74. package/src/ox-input-stack.ts +0 -136
  75. package/src/ox-input-table-column-config.ts +0 -211
  76. package/src/ox-input-table.ts +0 -404
  77. package/src/ox-input-textarea.ts +0 -86
  78. package/src/ox-input-unit-number.ts +0 -354
  79. package/src/ox-input-value-map.ts +0 -342
  80. package/src/ox-input-value-ranges.ts +0 -363
  81. package/src/ox-input-work-shift.ts +0 -290
  82. package/src/ox-select.ts +0 -219
  83. package/src/ox-zoomable-image.ts +0 -75
  84. package/stories/ox-buttons-radio.stories.ts +0 -89
  85. package/stories/ox-checkbox.stories.ts +0 -111
  86. package/stories/ox-input-3axis.stories.ts +0 -77
  87. package/stories/ox-input-3dish.stories.ts +0 -106
  88. package/stories/ox-input-angle.stories.ts +0 -84
  89. package/stories/ox-input-barcode.stories.ts +0 -117
  90. package/stories/ox-input-code.stories.ts +0 -99
  91. package/stories/ox-input-crontab.stories.ts +0 -82
  92. package/stories/ox-input-data.stories.ts +0 -82
  93. package/stories/ox-input-direction.stories.ts +0 -80
  94. package/stories/ox-input-duration.stories.ts +0 -84
  95. package/stories/ox-input-file.stories.ts +0 -111
  96. package/stories/ox-input-hashtags.stories.ts +0 -82
  97. package/stories/ox-input-i18n-label.stories.ts +0 -103
  98. package/stories/ox-input-key-values.stories.ts +0 -97
  99. package/stories/ox-input-mass-fraction.stories.ts +0 -102
  100. package/stories/ox-input-multiple-colors.stories.ts +0 -72
  101. package/stories/ox-input-options.stories.ts +0 -80
  102. package/stories/ox-input-partition-keys.stories.ts +0 -84
  103. package/stories/ox-input-privilege.stories.ts +0 -108
  104. package/stories/ox-input-quantifier.stories.ts +0 -80
  105. package/stories/ox-input-range.stories.ts +0 -89
  106. package/stories/ox-input-search.stories.ts +0 -91
  107. package/stories/ox-input-select-buttons.stories.ts +0 -118
  108. package/stories/ox-input-signature.stories.ts +0 -75
  109. package/stories/ox-input-table-column-config.stories.ts +0 -109
  110. package/stories/ox-input-unit.stories.ts +0 -151
  111. package/stories/ox-input-value-map.stories.ts +0 -92
  112. package/stories/ox-input-value-ranges.stories.ts +0 -92
  113. package/stories/ox-input-work-shift.stories.ts +0 -106
  114. package/stories/ox-select-set-options.stories.ts +0 -208
  115. package/stories/ox-select.stories.ts +0 -181
  116. package/tsconfig.json +0 -25
  117. package/web-dev-server.config.mjs +0 -27
  118. package/web-test-runner.config.mjs +0 -41
  119. package/yarn-error.log +0 -17084
package/demo/index-work-shift.html DELETED
@@ -1,59 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <style>
6
- body {
7
- background: #fafafa;
8
- }
9
- </style>
10
- </head>
11
- <body>
12
- <form id="demo"></form>
13
-
14
- <script type="module">
15
- import { html, render } from 'lit'
16
- import '../dist/src/ox-input-work-shift.js'
17
-
18
- const form = document.querySelector('#demo')
19
-
20
- const value = [
21
- {
22
- name: 'DAY',
23
- fromDate: -1,
24
- fromTime: '22:00',
25
- toDate: 0,
26
- toTime: '06:00'
27
- },
28
- {
29
- name: 'SWING',
30
- fromDate: 0,
31
- fromTime: '06:00',
32
- toDate: 0,
33
- toTime: '14:00'
34
- },
35
- {
36
- name: 'NIGHT',
37
- fromDate: 0,
38
- fromTime: '14:00',
39
- toDate: 0,
40
- toTime: '22:00'
41
- }
42
- ]
43
-
44
- render(
45
- html`
46
- <ox-input-work-shift
47
- name="work-shift"
48
- rangetype="number"
49
- .value=${value}
50
- @change=${e => {
51
- console.log(e.target.value)
52
- }}
53
- ></ox-input-work-shift>
54
- `,
55
- form
56
- )
57
- </script>
58
- </body>
59
- </html>
package/demo/index.html DELETED
@@ -1,54 +0,0 @@
1
- <!doctype html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
6
- <style>
7
- body {
8
- background: #fafafa;
9
- }
10
-
11
- a {
12
- display: block;
13
- }
14
- </style>
15
- <link href="/themes/app-theme.css" rel="stylesheet" />
16
- <link href="/themes/input-theme.css" rel="stylesheet" />
17
- <link
18
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
19
- rel="stylesheet"
20
- />
21
- <link
22
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
23
- rel="stylesheet"
24
- />
25
- <link
26
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
27
- rel="stylesheet"
28
- />
29
- </head>
30
- <body>
31
- <a href="./index-3dish.html">3dish</a>
32
- <a href="./index-options.html">options</a>
33
- <a href="./index-table.html">table</a>
34
- <a href="./index-angle.html">angle</a>
35
- <a href="./index-color.html">color</a>
36
- <a href="./index-multiple-colors.html">multiple-colors</a>
37
- <a href="./index-color-stops.html">color-stops</a>
38
- <a href="./index-color-gradient.html">color-gradient</a>
39
- <a href="./index-barcode.html">barcode</a>
40
- <a href="./index-button-radio.html">button-radio</a>
41
- <a href="./index-checkbox.html">checkbox</a>
42
- <a href="./index-code.html">code</a>
43
- <a href="./index-image.html">image</a>
44
- <a href="./index-file.html">file</a>
45
- <a href="./index-range.html">range</a>
46
- <a href="./index-select.html">select</a>
47
- <a href="./index-stack.html">stack</a>
48
- <a href="./index-value-map.html">value-map</a>
49
- <a href="./index-value-ranges.html">value-ranges</a>
50
- <a href="./index-crontab.html">crontab</a>
51
- <a href="./index-partition-keys.html">partition-keys</a>
52
- <a href="./index-work-shift.html">work-shift</a>
53
- </body>
54
- </html>
package/src/index.ts DELETED
@@ -1,34 +0,0 @@
1
- /**
2
- * @license Copyright © HatioLab Inc. All rights reserved.
3
- */
4
-
5
- export * from './ox-form-field.js'
6
- export * from './ox-buttons-radio.js'
7
- export * from './ox-checkbox.js'
8
- export * from './ox-select.js'
9
- export * from './ox-input-angle.js'
10
- export * from './ox-input-3dish.js'
11
- export * from './ox-input-3axis.js'
12
- export * from './ox-input-stack.js'
13
- export * from './ox-input-barcode.js'
14
- export * from './ox-input-code.js'
15
- export * from './ox-input-color.js'
16
- export * from './ox-input-multiple-colors.js'
17
- export * from './ox-input-color-stops.js'
18
- export * from './ox-input-color-gradient.js'
19
- export * from './ox-input-file.js'
20
- export * from './ox-input-image.js'
21
- export * from './ox-input-value-ranges.js'
22
- export * from './ox-input-value-map.js'
23
- export * from './ox-input-table.js'
24
- export * from './ox-input-scene-component-id.js'
25
- export * from './ox-input-crontab.js'
26
- export * from './ox-input-partition-keys.js'
27
- export * from './ox-input-duration.js'
28
- export * from './ox-input-quantifier.js'
29
- export * from './ox-input-select-buttons.js'
30
- export * from './ox-input-textarea.js'
31
- export * from './ox-input-direction.js'
32
- export * from './ox-input-table-column-config.js'
33
- export * from './ox-input-search.js'
34
- export * from './ox-input-signature.js'
package/src/locale/locale-codes.ts DELETED
@@ -1,18 +0,0 @@
1
- // Do not modify this file by hand!
2
- // Re-generate this file by running lit-localize.
3
-
4
- /**
5
- * The locale code that templates in this source code are written in.
6
- */
7
- export const sourceLocale = `en`
8
-
9
- /**
10
- * The other locale codes that this application is localized into. Sorted
11
- * lexicographically.
12
- */
13
- export const targetLocales = [`ko`, `zh`, `ms`] as const
14
-
15
- /**
16
- * All valid project locale codes. Sorted lexicographically.
17
- */
18
- export const allLocales = [`en`, `ko`, `zh`, `ms`] as const
package/src/locale/locale-picker.ts DELETED
@@ -1,43 +0,0 @@
1
- import { html, LitElement } from 'lit'
2
- import { customElement } from 'lit/decorators.js'
3
-
4
- import { localized } from '@lit/localize'
5
-
6
- import { allLocales } from './locale-codes.js'
7
- import { getLocale, setLocaleFromUrl } from './localization.js'
8
-
9
- const localeNames: {
10
- [L in typeof allLocales[number]]: string
11
- } = {
12
- en: 'English',
13
- ko: '한국어',
14
- zh: '中文 (简体)',
15
- ms: 'Malay'
16
- }
17
-
18
- // Note we use updateWhenLocaleChanges here so that we're always up to date with
19
- // the active locale (the result of getLocale()) when the locale changes via a
20
- // history navigation.
21
- @localized()
22
- @customElement('locale-picker')
23
- export class LocalePicker extends LitElement {
24
- render() {
25
- return html`
26
- <select @change=${this.localeChanged}>
27
- ${allLocales.map(
28
- locale => html`<option value=${locale} ?selected=${locale === getLocale()}>${localeNames[locale]}</option>`
29
- )}
30
- </select>
31
- `
32
- }
33
-
34
- localeChanged(event: Event) {
35
- const newLocale = (event.target as HTMLSelectElement).value
36
- if (newLocale !== getLocale()) {
37
- const url = new URL(window.location.href)
38
- url.searchParams.set('locale', newLocale)
39
- window.history.pushState(null, '', url.toString())
40
- setLocaleFromUrl()
41
- }
42
- }
43
- }
package/src/locale/localization.ts DELETED
@@ -1,15 +0,0 @@
1
- import { configureLocalization } from '@lit/localize'
2
-
3
- import { sourceLocale, targetLocales } from './locale-codes.js'
4
-
5
- export const { getLocale, setLocale } = configureLocalization({
6
- sourceLocale,
7
- targetLocales,
8
- loadLocale: (locale: string) => import(`../locales/${locale}.js`)
9
- })
10
-
11
- export const setLocaleFromUrl = async () => {
12
- const url = new URL(window.location.href)
13
- const locale = url.searchParams.get('locale') || sourceLocale
14
- await setLocale(locale)
15
- }
package/src/locales/en.ts DELETED
@@ -1,30 +0,0 @@
1
-
2
- // Do not modify this file by hand!
3
- // Re-generate this file by running lit-localize
4
-
5
-
6
-
7
-
8
- /* eslint-disable no-irregular-whitespace */
9
- /* eslint-disable @typescript-eslint/no-explicit-any */
10
-
11
- export const templates = {
12
- 'sf9b52aece5aed0f7': `x-axes`,
13
- 's9f41d726ecec72c2': `y-axes`,
14
- 's31be7a0b4a5853dd': `z-axes`,
15
- 'sd793f87f18747a63': `dimension`,
16
- 's4cbf3a26fca1d74a': `position`,
17
- 's6aacb9fbb71a1d91': `scale`,
18
- 's075cb2f53173bd8a': `rotate`,
19
- 'sb9874d345b5e590a': `tag duplicated`,
20
- 's5191b91c637d7da1': `special characters not allowed`,
21
- 'sc4bcadba8e631b86': `name`,
22
- 's63c6e58ec805a9eb': `from date`,
23
- 'sfcc01216c601ec9e': `from time`,
24
- 's685db98545dc9448': `to date`,
25
- 's77c8560cf63a372d': `to time`,
26
- 's42670fc325584e15': `The day before`,
27
- 's29ec9210c8a8222e': `The day`,
28
- 'scff69aa7239287b0': `The day after`,
29
- };
30
-
package/src/locales/ko.ts DELETED
@@ -1,30 +0,0 @@
1
-
2
- // Do not modify this file by hand!
3
- // Re-generate this file by running lit-localize
4
-
5
-
6
-
7
-
8
- /* eslint-disable no-irregular-whitespace */
9
- /* eslint-disable @typescript-eslint/no-explicit-any */
10
-
11
- export const templates = {
12
- 's075cb2f53173bd8a': `회전`,
13
- 's29ec9210c8a8222e': `당일`,
14
- 's31be7a0b4a5853dd': `z 축`,
15
- 's42670fc325584e15': `전날`,
16
- 's4cbf3a26fca1d74a': `위치`,
17
- 's5191b91c637d7da1': `특수문자는 허용되지 않습니다`,
18
- 's63c6e58ec805a9eb': `시작일`,
19
- 's685db98545dc9448': `완료일`,
20
- 's6aacb9fbb71a1d91': `스케일`,
21
- 's77c8560cf63a372d': `완료시간`,
22
- 's9f41d726ecec72c2': `y 축`,
23
- 'sb9874d345b5e590a': `태그가 중복되었습니다`,
24
- 'sc4bcadba8e631b86': `이름`,
25
- 'scff69aa7239287b0': `다음날`,
26
- 'sd793f87f18747a63': `체적`,
27
- 'sf9b52aece5aed0f7': `x 축`,
28
- 'sfcc01216c601ec9e': `시작시간`,
29
- };
30
-
package/src/locales/ms.ts DELETED
@@ -1,30 +0,0 @@
1
-
2
- // Do not modify this file by hand!
3
- // Re-generate this file by running lit-localize
4
-
5
-
6
-
7
-
8
- /* eslint-disable no-irregular-whitespace */
9
- /* eslint-disable @typescript-eslint/no-explicit-any */
10
-
11
- export const templates = {
12
- 'sf9b52aece5aed0f7': `x-axes`,
13
- 's9f41d726ecec72c2': `y-axes`,
14
- 's31be7a0b4a5853dd': `z-axes`,
15
- 'sd793f87f18747a63': `dimension`,
16
- 's4cbf3a26fca1d74a': `position`,
17
- 's6aacb9fbb71a1d91': `scale`,
18
- 's075cb2f53173bd8a': `rotate`,
19
- 'sb9874d345b5e590a': `tag duplicated`,
20
- 's5191b91c637d7da1': `special characters not allowed`,
21
- 'sc4bcadba8e631b86': `name`,
22
- 's63c6e58ec805a9eb': `from date`,
23
- 'sfcc01216c601ec9e': `from time`,
24
- 's685db98545dc9448': `to date`,
25
- 's77c8560cf63a372d': `to time`,
26
- 's42670fc325584e15': `The day before`,
27
- 's29ec9210c8a8222e': `The day`,
28
- 'scff69aa7239287b0': `The day after`,
29
- };
30
-
package/src/locales/zh.ts DELETED
@@ -1,30 +0,0 @@
1
-
2
- // Do not modify this file by hand!
3
- // Re-generate this file by running lit-localize
4
-
5
-
6
-
7
-
8
- /* eslint-disable no-irregular-whitespace */
9
- /* eslint-disable @typescript-eslint/no-explicit-any */
10
-
11
- export const templates = {
12
- 'sf9b52aece5aed0f7': `x-axes`,
13
- 's9f41d726ecec72c2': `y-axes`,
14
- 's31be7a0b4a5853dd': `z-axes`,
15
- 'sd793f87f18747a63': `dimension`,
16
- 's4cbf3a26fca1d74a': `position`,
17
- 's6aacb9fbb71a1d91': `scale`,
18
- 's075cb2f53173bd8a': `rotate`,
19
- 'sb9874d345b5e590a': `tag duplicated`,
20
- 's5191b91c637d7da1': `special characters not allowed`,
21
- 'sc4bcadba8e631b86': `name`,
22
- 's63c6e58ec805a9eb': `from date`,
23
- 'sfcc01216c601ec9e': `from time`,
24
- 's685db98545dc9448': `to date`,
25
- 's77c8560cf63a372d': `to time`,
26
- 's42670fc325584e15': `The day before`,
27
- 's29ec9210c8a8222e': `The day`,
28
- 'scff69aa7239287b0': `The day after`,
29
- };
30
-
package/src/ox-buttons-radio.ts DELETED
@@ -1,140 +0,0 @@
1
- /**
2
- * @license Copyright © HatioLab Inc. All rights reserved.
3
- */
4
-
5
- import { css, html, PropertyValues } from 'lit'
6
- import { customElement, property, state } from 'lit/decorators.js'
7
-
8
- import { OxFormField } from './ox-form-field'
9
-
10
- /**
11
- 여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.
12
-
13
- Example:
14
-
15
- <ox-buttons-radio
16
- class="light"
17
- @change=${(e: CustomEvent) => console.log(e.detail)}
18
- value="1"
19
- >
20
- <md-outlined-button data-value="1" ?active=${value == '1'}>Option 1</md-outlined-button>
21
- <md-outlined-button data-value="2" ?active=${value == '2'}>Option 2</md-outlined-button>
22
- <md-outlined-button data-value="3" ?active=${value == '3'}>Option 3</md-outlined-button>
23
- </ox-buttons-radio>
24
- */
25
- @customElement('ox-buttons-radio')
26
- export class OxButtonsRadio extends OxFormField {
27
- static styles = [
28
- css`
29
- :host {
30
- display: inline-block;
31
- background-color: var(--ox-buttons-radio-background-color, var(--md-sys-color-surface));
32
-
33
- --md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);
34
- --md-outlined-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);
35
- --md-outlined-button-container-height: var(--form-element-height-medium);
36
- --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);
37
- --md-outlined-button-leading-space: var(--spacing-large);
38
- --md-outlined-button-trailing-space: var(--spacing-large);
39
- --md-outlined-button-hover-label-text-color: var(--md-sys-color-primary);
40
- --md-outlined-button-pressed-outline-color: var(--md-sys-color-primary);
41
- --md-outlined-button-pressed-label-text-color: var(--md-sys-color-primary);
42
-
43
- --md-filled-button-container-color: var(--md-sys-color-primary);
44
- --md-filled-button-label-text-color: var(--md-sys-color-primary-container);
45
- --md-filled-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);
46
- --md-filled-button-container-height: var(--form-element-height-medium);
47
- --md-filled-button-container-shape: var(--md-sys-shape-corner-small);
48
- --md-filled-button-leading-space: var(--spacing-large);
49
- --md-filled-button-trailing-space: var(--spacing-large);
50
- --md-filled-button-hover-label-text-color: var(--md-sys-color-secondary-container);
51
- --md-filled-button-pressed-label-text-color: var(--md-sys-color-secondary-container);
52
- --md-filled-button-focus-label-text-color: var(--md-sys-color-secondary-container);
53
-
54
- --md-text-button-container-height: var(--form-element-height-medium);
55
- --md-text-button-container-shape: var(--md-sys-shape-corner-small);
56
-
57
- --md-elevated-button-container-height: var(--form-element-height-medium);
58
- --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);
59
- }
60
- `
61
- ]
62
-
63
- /**
64
- * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.
65
- */
66
- @property({ type: Object }) value: Object | null = null
67
- @property({ type: Boolean }) mandatory!: boolean
68
-
69
- @state() _slotObserver: MutationObserver = new MutationObserver(mutations => {
70
- this._onChanged()
71
- })
72
-
73
- render() {
74
- return html` <slot @click=${(e: Event) => this._onTapButton(e)}></slot> `
75
- }
76
-
77
- connectedCallback() {
78
- super.connectedCallback()
79
-
80
- this._slotObserver?.observe(this, { childList: true })
81
- }
82
-
83
- disconnectedCallback() {
84
- super.disconnectedCallback()
85
-
86
- this._slotObserver?.disconnect()
87
- }
88
-
89
- updated(changes: PropertyValues<this>) {
90
- changes.has('value') && this._onChanged()
91
- }
92
-
93
- get buttons() {
94
- return Array.from(this.querySelectorAll('*'))
95
- }
96
-
97
- _onChanged() {
98
- this.buttons.forEach(button => {
99
- if (this.value === button.getAttribute('data-value')) {
100
- button.setAttribute('active', '')
101
- } else {
102
- button.removeAttribute('active')
103
- }
104
- })
105
- }
106
-
107
- _onTapButton(e: Event) {
108
- var target = e.target as HTMLElement
109
- target = target.closest('[data-value]') as HTMLElement
110
-
111
- if (!target || target === this) {
112
- return
113
- }
114
-
115
- var old = this.value
116
-
117
- if (!this.mandatory) {
118
- if (!target.getAttribute('active')) {
119
- this.value = target.getAttribute('data-value')
120
- target.setAttribute('active', '')
121
- } else {
122
- this.value = null
123
- target.removeAttribute('active')
124
- }
125
- } else {
126
- this.value = target.getAttribute('data-value')
127
- target.setAttribute('active', '')
128
- }
129
-
130
- if (old !== this.value) {
131
- this.dispatchEvent(
132
- new CustomEvent('change', {
133
- bubbles: true,
134
- composed: true,
135
- detail: this.value
136
- })
137
- )
138
- }
139
- }
140
- }
package/src/ox-checkbox.ts DELETED
@@ -1,181 +0,0 @@
1
- /**
2
- * @license Copyright © HatioLab Inc. All rights reserved.
3
- */
4
-
5
- /*
6
- This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.
7
- */
8
-
9
- import { css, html } from 'lit'
10
- import { customElement, property, state } from 'lit/decorators.js'
11
-
12
- import { OxFormField } from './ox-form-field'
13
-
14
- @customElement('ox-checkbox')
15
- export class OxCheckbox extends OxFormField {
16
- static styles = [
17
- css`
18
- div {
19
- display: flex;
20
- gap: var(--input-intra-gap, 7px);
21
-
22
- align-items: center;
23
- cursor: pointer;
24
- }
25
-
26
- [disabled] {
27
- opacity: var(--ox-checkbox-disabled-opacity, 0.5);
28
- cursor: auto;
29
- }
30
-
31
- .checkbox {
32
- display: flex;
33
- border-radius: var(--ox-checkbox-border-radius, 4px);
34
- background-color: var(--ox-checkbox-unchecked-background-color, var(--md-sys-color-surface-container-lowest));
35
- border: var(--ox-checkbox-unchecked-border, 1px solid var(--md-sys-color-outline));
36
- width: var(--ox-checkbox-size, 15px);
37
- height: var(--ox-checkbox-size, 15px);
38
- align-items: center;
39
- justify-content: center;
40
- }
41
-
42
- :host([checked]) .checkbox {
43
- background-color: var(--ox-checkbox-checked-background-color, var(--md-sys-color-primary));
44
- }
45
-
46
- path {
47
- fill: var(--ox-checkbox-unchecked-color, var(--md-sys-color-surface-container-lowest));
48
- }
49
-
50
- :host([indeterminate]) line {
51
- stroke: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-outline));
52
- }
53
-
54
- :host([checked]) path {
55
- fill: var(--ox-checkbox-checked-color, var(--md-sys-color-on-primary));
56
- }
57
-
58
- svg {
59
- width: var(--ox-checkbox-size, 15px);
60
- height: var(--ox-checkbox-size, 15px);
61
- }
62
-
63
- .label {
64
- color: var(--ox-checkbox-label-color, var(--md-sys-color-on-surface));
65
- line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);
66
- }
67
-
68
- :host([checked]) .label {
69
- color: var(ox-checkbox-label-checked-color, var(--md-sys-color-on-surface));
70
- font-weight: 700;
71
- }
72
- `
73
- ]
74
-
75
- @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean | undefined = false
76
- @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false
77
- @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false
78
- @property({ type: Boolean, attribute: 'left-label' }) left: boolean = false
79
-
80
- @state() _hasInner: boolean = !!this.innerHTML.trim().length
81
-
82
- render() {
83
- return html`
84
- <div ?disabled=${this.disabled} @click=${this.onClick}>
85
- ${this._hasInner && this.left
86
- ? html` <span label>
87
- <slot></slot>
88
- </span>`
89
- : ''}
90
- <a href="#" @click=${(e: Event) => e.preventDefault()} class="checkbox">
91
- ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}
92
- </a>
93
- ${this._hasInner && !this.left
94
- ? html` <span class="label">
95
- <slot></slot>
96
- </span>`
97
- : ''}
98
- </div>
99
- `
100
- }
101
-
102
- connectedCallback(): void {
103
- super.connectedCallback()
104
-
105
- this.setAttribute('tabindex', '0')
106
- this.addEventListener('keydown', this.onKeyDown)
107
- }
108
-
109
- disconnectedCallback(): void {
110
- super.disconnectedCallback()
111
-
112
- this.setAttribute('tabindex', '-1')
113
- this.removeEventListener('keydown', this.onKeyDown)
114
- }
115
-
116
- onClick() {
117
- if (this.disabled) {
118
- return
119
- }
120
-
121
- if (!this.indeterminatable) {
122
- this.indeterminate = false
123
- this.checked = !this.checked
124
- } else {
125
- if (this.indeterminate) {
126
- this.indeterminate = false
127
- this.checked = true
128
- } else if (this.checked) {
129
- this.indeterminate = false
130
- this.checked = false
131
- } else {
132
- this.indeterminate = true
133
- this.checked = undefined
134
- }
135
- }
136
-
137
- this.dispatchEvent(
138
- new CustomEvent('change', {
139
- bubbles: true,
140
- composed: true,
141
- detail: this.checked
142
- })
143
- )
144
- }
145
-
146
- get checkedIcon() {
147
- return html`
148
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
149
- <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
150
- </svg>
151
- `
152
- }
153
-
154
- get uncheckedIcon() {
155
- return html`
156
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
157
- <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
158
- </svg>
159
- `
160
- }
161
-
162
- get indeterminateIcon() {
163
- return html`
164
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
165
- <line x1="4" x2="20" y1="12" y2="12" stroke-width="2" stroke-linecap="round" />
166
- </svg>
167
- `
168
- }
169
-
170
- onKeyDown(e: KeyboardEvent) {
171
- e.preventDefault()
172
-
173
- if (e.key === ' ' || e.key == 'Spacebar') {
174
- this.onClick()
175
- }
176
- }
177
-
178
- protected appendFormData({ formData }: FormDataEvent): void {
179
- this.name && !this.indeterminate && formData.append(this.name, this.checked ? 'true' : 'false')
180
- }
181
- }