@operato/input 10.22.0 → 10.23.0
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 +16 -0
- package/dist/src/ox-input-angle.js +9 -6
- package/dist/src/ox-input-angle.js.map +1 -1
- package/dist/src/ox-input-code.d.ts +6 -0
- package/dist/src/ox-input-code.js +40 -3
- package/dist/src/ox-input-code.js.map +1 -1
- package/dist/src/ox-input-color.js +10 -5
- package/dist/src/ox-input-color.js.map +1 -1
- package/dist/src/ox-input-data.js +58 -10
- package/dist/src/ox-input-data.js.map +1 -1
- package/dist/src/ox-input-fill-style.js +36 -6
- package/dist/src/ox-input-fill-style.js.map +1 -1
- package/dist/src/ox-input-range.js +41 -25
- package/dist/src/ox-input-range.js.map +1 -1
- package/dist/src/ox-input-select-buttons.js +12 -7
- package/dist/src/ox-input-select-buttons.js.map +1 -1
- package/dist/src/ox-input-work-shift.js +1 -1
- package/dist/src/ox-input-work-shift.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -4
|
@@ -25,18 +25,32 @@ let OxInputRange = class OxInputRange extends OxFormField {
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
input[type='number'] {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
28
|
+
box-sizing: border-box;
|
|
29
|
+
width: 52px;
|
|
30
|
+
min-height: 24px;
|
|
31
|
+
padding: 2px 6px;
|
|
32
|
+
border: 1px solid transparent;
|
|
33
|
+
border-radius: 6px;
|
|
34
|
+
background-color: var(--property-input-background, var(--md-sys-color-surface-container-high));
|
|
33
35
|
font: var(--ox-input-font);
|
|
34
|
-
|
|
36
|
+
font-size: 0.76rem;
|
|
37
|
+
font-variant-numeric: tabular-nums;
|
|
38
|
+
color: var(--md-sys-color-on-surface);
|
|
39
|
+
text-align: right;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
input[type='number']::-webkit-inner-spin-button {
|
|
43
|
+
-webkit-appearance: none;
|
|
44
|
+
margin: 0;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
input[type='number']:hover {
|
|
48
|
+
border-color: var(--md-sys-color-outline-variant);
|
|
35
49
|
}
|
|
36
50
|
|
|
37
51
|
input[type='number']:focus {
|
|
38
52
|
outline: none;
|
|
39
|
-
border-
|
|
53
|
+
border-color: var(--md-sys-color-primary);
|
|
40
54
|
}
|
|
41
55
|
|
|
42
56
|
input[type='range'] {
|
|
@@ -48,22 +62,24 @@ let OxInputRange = class OxInputRange extends OxFormField {
|
|
|
48
62
|
height: 16px;
|
|
49
63
|
background-color: transparent;
|
|
50
64
|
}
|
|
65
|
+
/* A thin track and a small thumb: the slider is a control, not a bar chart. */
|
|
51
66
|
input[type='range']::-webkit-slider-runnable-track {
|
|
52
67
|
width: 100%;
|
|
53
|
-
height:
|
|
54
|
-
background-color: var(--ox-input-range-track-color, var(--md-sys-color-
|
|
55
|
-
border:
|
|
56
|
-
border-radius:
|
|
68
|
+
height: 3px;
|
|
69
|
+
background-color: var(--ox-input-range-track-color, var(--md-sys-color-outline-variant));
|
|
70
|
+
border: 0;
|
|
71
|
+
border-radius: 2px;
|
|
57
72
|
}
|
|
58
73
|
input[type='range']::-webkit-slider-thumb {
|
|
59
74
|
-webkit-appearance: none;
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
width: 16px;
|
|
75
|
+
height: 12px;
|
|
76
|
+
width: 12px;
|
|
63
77
|
border-radius: 50%;
|
|
78
|
+
border: 2px solid var(--ox-input-range-thumb-ring, var(--md-sys-color-surface));
|
|
79
|
+
box-sizing: border-box;
|
|
64
80
|
background: var(--ox-input-range-thumb-color, var(--md-sys-color-primary));
|
|
65
|
-
margin-top: -
|
|
66
|
-
box-shadow:
|
|
81
|
+
margin-top: -4.5px;
|
|
82
|
+
box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant);
|
|
67
83
|
}
|
|
68
84
|
input[type='range']:focus {
|
|
69
85
|
outline: none;
|
|
@@ -71,19 +87,19 @@ let OxInputRange = class OxInputRange extends OxFormField {
|
|
|
71
87
|
|
|
72
88
|
input[type='range']::-moz-range-track {
|
|
73
89
|
width: 100%;
|
|
74
|
-
height:
|
|
75
|
-
background-color: var(--ox-input-range-track-color, var(--md-sys-color-
|
|
76
|
-
border:
|
|
77
|
-
border-radius:
|
|
90
|
+
height: 3px;
|
|
91
|
+
background-color: var(--ox-input-range-track-color, var(--md-sys-color-outline-variant));
|
|
92
|
+
border: 0;
|
|
93
|
+
border-radius: 2px;
|
|
78
94
|
}
|
|
79
95
|
input[type='range']::-moz-range-thumb {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
width: 16px;
|
|
96
|
+
height: 12px;
|
|
97
|
+
width: 12px;
|
|
83
98
|
border-radius: 50%;
|
|
99
|
+
border: 2px solid var(--ox-input-range-thumb-ring, var(--md-sys-color-surface));
|
|
100
|
+
box-sizing: border-box;
|
|
84
101
|
background: var(--ox-input-range-thumb-color, var(--md-sys-color-primary));
|
|
85
|
-
|
|
86
|
-
box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);
|
|
102
|
+
box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant);
|
|
87
103
|
}
|
|
88
104
|
|
|
89
105
|
input[type='range']:-moz-focusring {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-range.js","sourceRoot":"","sources":["../../src/ox-input-range.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,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,oBAAoB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAG/C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAAtC;;
|
|
1
|
+
{"version":3,"file":"ox-input-range.js","sourceRoot":"","sources":["../../src/ox-input-range.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,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,oBAAoB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAG/C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAAtC;;QAqH8B,UAAK,GAAW,CAAC,CAAA;QACjB,SAAI,GAAW,CAAC,CAAA;QAChB,QAAG,GAAW,CAAC,GAAG,CAAA;QAClB,QAAG,GAAW,GAAG,CAAA;IAiC/C,CAAC;aAxJQ,WAAM,GAAG,CAAC,WAAW,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkHhC,CAAC,AAlHW,CAkHX;IAOF,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,KAAK;gBACX,IAAI,CAAC,IAAI;eACV,IAAI,CAAC,GAAG;eACR,IAAI,CAAC,GAAG;iBACN,CAAC,CAAa,EAAE,EAAE;YACzB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;YACzD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClF,CAAC;oBACW,IAAI,CAAC,QAAQ;;;;;iBAKhB,IAAI,CAAC,KAAK;gBACX,IAAI,CAAC,IAAI;eACV,IAAI,CAAC,GAAG;eACR,IAAI,CAAC,GAAG;kBACL,CAAC,CAAQ,EAAE,EAAE;YACrB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;YACzD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClF,CAAC;oBACW,IAAI,CAAC,QAAQ;;KAE5B,CAAA;IACH,CAAC;;AAnC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAkB;AAxHzC,YAAY;IADjB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,YAAY,CAyJjB","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 { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\n@customElement('ox-input-range')\nclass OxInputRange extends OxFormField {\n static styles = [InputStyles, css`\n :host {\n display: flex;\n gap: calc(var(--ox-input-gap) * 2);\n align-items: center;\n\n width: 100%;\n user-select: text;\n }\n\n input[type='number'] {\n box-sizing: border-box;\n width: 52px;\n min-height: 24px;\n padding: 2px 6px;\n border: 1px solid transparent;\n border-radius: 6px;\n background-color: var(--property-input-background, var(--md-sys-color-surface-container-high));\n font: var(--ox-input-font);\n font-size: 0.76rem;\n font-variant-numeric: tabular-nums;\n color: var(--md-sys-color-on-surface);\n text-align: right;\n }\n\n input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n input[type='number']:hover {\n border-color: var(--md-sys-color-outline-variant);\n }\n\n input[type='number']:focus {\n outline: none;\n border-color: var(--md-sys-color-primary);\n }\n\n input[type='range'] {\n -webkit-appearance: none;\n border: none;\n outline: none;\n width: 100%;\n flex: 1;\n height: 16px;\n background-color: transparent;\n }\n /* A thin track and a small thumb: the slider is a control, not a bar chart. */\n input[type='range']::-webkit-slider-runnable-track {\n width: 100%;\n height: 3px;\n background-color: var(--ox-input-range-track-color, var(--md-sys-color-outline-variant));\n border: 0;\n border-radius: 2px;\n }\n input[type='range']::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: 12px;\n width: 12px;\n border-radius: 50%;\n border: 2px solid var(--ox-input-range-thumb-ring, var(--md-sys-color-surface));\n box-sizing: border-box;\n background: var(--ox-input-range-thumb-color, var(--md-sys-color-primary));\n margin-top: -4.5px;\n box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant);\n }\n input[type='range']:focus {\n outline: none;\n }\n\n input[type='range']::-moz-range-track {\n width: 100%;\n height: 3px;\n background-color: var(--ox-input-range-track-color, var(--md-sys-color-outline-variant));\n border: 0;\n border-radius: 2px;\n }\n input[type='range']::-moz-range-thumb {\n height: 12px;\n width: 12px;\n border-radius: 50%;\n border: 2px solid var(--ox-input-range-thumb-ring, var(--md-sys-color-surface));\n box-sizing: border-box;\n background: var(--ox-input-range-thumb-color, var(--md-sys-color-primary));\n box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant);\n }\n\n input[type='range']:-moz-focusring {\n outline: 1px solid black;\n outline-offset: -1px;\n }\n\n input[type='range']::-ms-track {\n width: 100%;\n height: 7px;\n background-color: var(--ox-input-range-track-color, var(--md-sys-color-surface-container-highest));\n border: 1px solid var(--md-sys-color-outline-variant);\n border-radius: var(--ox-input-radius);\n }\n input[type='range']::-ms-thumb {\n border: none;\n height: 16px;\n width: 16px;\n border-radius: 50%;\n background: var(--ox-input-range-thumb-color, var(--md-sys-color-primary));\n margin-top: -6px;\n box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n }\n\n input:focus {\n outline: none;\n opacity: 1;\n }\n `]\n\n @property({ type: Number }) value: number = 0\n @property({ type: Number }) step: number = 1\n @property({ type: Number }) min: number = -100\n @property({ type: Number }) max: number = 100\n\n render() {\n return html`\n <input\n type=\"range\"\n .value=${this.value}\n .step=${this.step}\n .min=${this.min}\n .max=${this.max}\n @input=${(e: InputEvent) => {\n e.stopPropagation()\n this.value = Number((e.target as HTMLInputElement).value)\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }}\n ?disabled=${this.disabled}\n />\n\n <input\n type=\"number\"\n .value=${this.value}\n .step=${this.step}\n .min=${this.min}\n .max=${this.max}\n @change=${(e: Event) => {\n e.stopPropagation()\n this.value = Number((e.target as HTMLInputElement).value)\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }}\n ?disabled=${this.disabled}\n />\n `\n }\n}\n"]}
|
|
@@ -33,6 +33,10 @@ let OxInputSelectButtons = class OxInputSelectButtons extends OxFormField {
|
|
|
33
33
|
* md 칩을 갈아치우지 않고 그 토큰으로만 조정한다. 이 컴포넌트를 쓰는 화면이 많고, 자기 것으로
|
|
34
34
|
* 다시 만들면 그 화면들이 두 모양으로 갈린다.
|
|
35
35
|
*/
|
|
36
|
+
md-filter-chip {
|
|
37
|
+
text-transform: capitalize;
|
|
38
|
+
}
|
|
39
|
+
|
|
36
40
|
:host {
|
|
37
41
|
display: flex;
|
|
38
42
|
flex-flow: row;
|
|
@@ -57,14 +61,15 @@ let OxInputSelectButtons = class OxInputSelectButtons extends OxFormField {
|
|
|
57
61
|
--md-filter-chip-hover-state-layer-opacity: 0.06;
|
|
58
62
|
|
|
59
63
|
/* 켜진 상태 — 채워서 확실히 다르게. 켜졌는지 아닌지가 헷갈리면 필터는 쓸모가 없다. */
|
|
60
|
-
|
|
61
|
-
--md-filter-chip-selected-
|
|
64
|
+
/* A pressed filter is a state, not a call to action: the soft container, not the accent fill. */
|
|
65
|
+
--md-filter-chip-selected-container-color: var(--md-sys-color-secondary-container);
|
|
66
|
+
--md-filter-chip-selected-label-text-color: var(--md-sys-color-on-secondary-container);
|
|
62
67
|
--md-filter-chip-selected-outline-width: 0px;
|
|
63
|
-
--md-filter-chip-selected-focus-label-text-color: var(--md-sys-color-on-
|
|
64
|
-
--md-filter-chip-selected-hover-label-text-color: var(--md-sys-color-on-
|
|
65
|
-
--md-filter-chip-selected-pressed-label-text-color: var(--md-sys-color-on-
|
|
66
|
-
--md-filter-chip-selected-leading-icon-color: var(--md-sys-color-on-
|
|
67
|
-
--md-filter-chip-selected-hover-leading-icon-color: var(--md-sys-color-on-
|
|
68
|
+
--md-filter-chip-selected-focus-label-text-color: var(--md-sys-color-on-secondary-container);
|
|
69
|
+
--md-filter-chip-selected-hover-label-text-color: var(--md-sys-color-on-secondary-container);
|
|
70
|
+
--md-filter-chip-selected-pressed-label-text-color: var(--md-sys-color-on-secondary-container);
|
|
71
|
+
--md-filter-chip-selected-leading-icon-color: var(--md-sys-color-on-secondary-container);
|
|
72
|
+
--md-filter-chip-selected-hover-leading-icon-color: var(--md-sys-color-on-secondary-container);
|
|
68
73
|
}
|
|
69
74
|
`
|
|
70
75
|
]; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-select-buttons.js","sourceRoot":"","sources":["../../src/ox-input-select-buttons.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oCAAoC,CAAA;AAC3C,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD,OAAO,EAAE,uCAAuC,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAA;AAEzH,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAiBxC,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,WAAW;IAA9C;;
|
|
1
|
+
{"version":3,"file":"ox-input-select-buttons.js","sourceRoot":"","sources":["../../src/ox-input-select-buttons.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/chips/filter-chip.js'\nimport '@material/web/chips/chip-set.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { FORM_ELEMENT_HEIGHT_PLATFORM_EXCEPTIONS, suiteFormElementHeight } from '@operato/styles/form-element-heights.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\nimport { MdFilterChip } from '@material/web/chips/filter-chip.js'\n\ntype Option = {\n display: string\n value: string\n /**\n * 마우스를 올렸을 때 보이는 뜻.\n *\n * 칩의 이름은 짧아야 하는데, 이름만으로는 무엇이 걸러지는지 알 수 없는 것이 있다 — 「중요」가\n * 우선순위 몇 이상인지, 「만기」가 몇 시간 안인지. 그 값을 화면이 말하지 않으면 사용자는 눌러 보고\n * 결과를 되짚어야 한다.\n */\n hint?: string\n}\n\n@customElement('ox-input-select-buttons')\nexport class OxInputSelectButtons extends OxFormField {\n static styles = [\n InputStyles,\n css`\n /*\n * 필터는 **목록보다 조용해야 한다.**\n *\n * 확인해 보니 칩 글자가 16px 이었고 목록 본문은 14px 이었다. 걸러진 것이 하나도 없는 상태에서도 이\n * 줄이 화면에서 가장 크고 진했다. 테두리 색도 본문 글자와 같은 검정이라, 네 개가 나란히 서면\n * 그 선들이 제일 먼저 눈에 걸렸다.\n *\n * 그래서 꺼져 있을 때는 물러나고 켜져 있을 때만 나선다. 지금 무엇으로 걸렀는지가 이 줄에서\n * 바로 읽혀야 한다 — 목록이 짧아진 이유를 화면이 말해야 한다.\n *\n * md 칩을 갈아치우지 않고 그 토큰으로만 조정한다. 이 컴포넌트를 쓰는 화면이 많고, 자기 것으로\n * 다시 만들면 그 화면들이 두 모양으로 갈린다.\n */\n md-filter-chip {\n text-transform: capitalize;\n }\n\n :host {\n display: flex;\n flex-flow: row;\n flex-wrap: wrap;\n gap: 6px;\n\n /* Size: 26px on the platform, the small input height in the operato products. */\n --md-filter-chip-container-height: ${suiteFormElementHeight('--form-element-height-small', FORM_ELEMENT_HEIGHT_PLATFORM_EXCEPTIONS.selectButtonsChip)};\n --md-filter-chip-label-text-size: 12.5px;\n --md-filter-chip-label-text-weight: 560;\n --md-filter-chip-container-shape: calc(${suiteFormElementHeight('--form-element-height-small', FORM_ELEMENT_HEIGHT_PLATFORM_EXCEPTIONS.selectButtonsChip)} / 2);\n --md-filter-chip-leading-space: 11px;\n --md-filter-chip-trailing-space: 11px;\n --md-filter-chip-with-leading-icon-leading-space: 8px;\n --md-filter-chip-icon-size: 15px;\n\n /* 꺼진 상태 — 선은 흐리게, 글자는 보조 글자 색으로. */\n --md-filter-chip-outline-color: var(--md-sys-color-outline-variant);\n --md-filter-chip-outline-width: 1px;\n --md-filter-chip-label-text-color: var(--md-sys-color-on-surface-variant);\n --md-filter-chip-hover-label-text-color: var(--md-sys-color-on-surface);\n --md-filter-chip-hover-state-layer-opacity: 0.06;\n\n /* 켜진 상태 — 채워서 확실히 다르게. 켜졌는지 아닌지가 헷갈리면 필터는 쓸모가 없다. */\n /* A pressed filter is a state, not a call to action: the soft container, not the accent fill. */\n --md-filter-chip-selected-container-color: var(--md-sys-color-secondary-container);\n --md-filter-chip-selected-label-text-color: var(--md-sys-color-on-secondary-container);\n --md-filter-chip-selected-outline-width: 0px;\n --md-filter-chip-selected-focus-label-text-color: var(--md-sys-color-on-secondary-container);\n --md-filter-chip-selected-hover-label-text-color: var(--md-sys-color-on-secondary-container);\n --md-filter-chip-selected-pressed-label-text-color: var(--md-sys-color-on-secondary-container);\n --md-filter-chip-selected-leading-icon-color: var(--md-sys-color-on-secondary-container);\n --md-filter-chip-selected-hover-leading-icon-color: var(--md-sys-color-on-secondary-container);\n }\n `\n ]\n\n @property({ type: Array }) value: string[] | string | undefined = []\n @property({ type: Array }) options: Option[] = []\n @property({ type: Boolean }) multiple: boolean = false\n\n render() {\n const options = this.options.filter(option => !!option.value)\n const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []\n\n return html`\n <md-chip-set>\n ${(options || []).map(\n ({ display, value, hint }) => html`\n <md-filter-chip\n data-value=${value}\n label=${display}\n title=${ifDefined(hint)}\n ?selected=${values.includes(value)}\n @click=${(e: MouseEvent | TouchEvent) => !this.disabled && this.onClick(e)}\n ></md-filter-chip>\n `\n )}\n </md-chip-set>\n `\n }\n\n onClick(e: MouseEvent | TouchEvent) {\n e.stopPropagation()\n\n const target = e.target as MdFilterChip\n const value = target.getAttribute('data-value') as string\n\n if (this.multiple) {\n const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []\n\n const idx = (this.value || []).indexOf(value)\n if (idx != -1) {\n values.splice(idx, 1)\n } else {\n values.push(value)\n }\n this.value = [...values]\n } else {\n this.value = this.value === value ? undefined : value\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n}\n"]}
|
|
@@ -50,7 +50,7 @@ let OxInputWorkShift = class OxInputWorkShift extends OxFormField {
|
|
|
50
50
|
flex: 1;
|
|
51
51
|
}
|
|
52
52
|
[data-header] {
|
|
53
|
-
background-color:
|
|
53
|
+
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 5%, transparent);
|
|
54
54
|
padding: var(--ox-input-gap);
|
|
55
55
|
}
|
|
56
56
|
[data-header] span {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-work-shift.js","sourceRoot":"","sources":["../../src/ox-input-work-shift.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { localized, msg } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\ntype WorkShift = { name: string; fromDate: number; fromTime: string; toDate: number; toTime: string }\n\n/**\nwork-shift array value editor element\n\nExample:\n\n <ox-input-work-shift\n .value=${value}\n </ox-input-work-shift>\n*/\n\n@localized()\n@customElement('ox-input-work-shift')\nexport class OxInputWorkShift extends OxFormField {\n static styles = [InputStyles, css`\n :host {\n display: flex;\n flex-direction: column;\n\n width: 100%;\n overflow: hidden;\n\n --md-icon-size: var(--fontsize-default, 14px);\n }\n\n div {\n display: flex;\n flex-flow: row nowrap;\n gap: calc(var(--ox-input-gap) * 2);\n }\n\n empty-element {\n width: 34px;\n text-align: center;\n }\n\n input,\n select,\n span {\n flex: 1;\n }\n [data-header] {\n background-color: rgba(var(--md-sys-color-on-primary-container-rgb), 0.05);\n padding: var(--ox-input-gap);\n }\n [data-header] span {\n font: var(--label-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n text-transform: var(--label-text-transform);\n text-align: center;\n }\n [data-record] {\n margin-bottom: var(--ox-input-gap);\n }\n input,\n select {\n background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n color: var(--input-field-color, var(--md-sys-color-on-surface));\n border: 0;\n border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n padding: calc(var(--ox-input-gap) / 2);\n font: var(--ox-input-font);\n color: var(--md-sys-color-on-primary-container);\n\n max-height: 35px;\n }\n input:focus,\n select:focus {\n outline: none;\n border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n }\n\n input:required:invalid {\n border: 1px dashed red;\n }\n\n button {\n border: var(--button-border);\n border-radius: var(--ox-input-radius);\n background-color: var(--button-background-color);\n padding: var(--ox-input-gap) calc(var(--ox-input-gap) * 2);\n line-height: 0.8;\n color: var(--button-color);\n cursor: pointer;\n }\n button:focus,\n button:hover,\n button:active {\n border: var(--button-activ-border);\n background-color: var(--button-background-focus-color);\n color: var(--md-sys-color-primary-container);\n }\n\n [placeholder='value'] {\n flex: 2;\n }\n `]\n\n @property({ type: Array }) value: WorkShift[] = []\n\n private _changingNow: boolean = false\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n render() {\n const workshifts = this.value || []\n\n return html`\n <div data-header>\n <span>${msg('name')}</span>\n <span>${msg('from date')}</span>\n <span>${msg('from time')}</span>\n <span>${msg('to date')}</span>\n <span>${msg('to time')}</span>\n <empty-element></empty-element>\n </div>\n\n ${workshifts.map(\n item => html`\n <div data-record>\n <input type=\"text\" data-name .value=${item.name} required ?disabled=${this.disabled} />\n\n <select data-from-date .value=${String(item.fromDate || 0)} ?disabled=${this.disabled}>\n <option value=\"-1\">${msg('The day before')}</option>\n <option value=\"0\">${msg('The day')}</option>\n <option value=\"1\">${msg('The day after')}</option>\n </select>\n <input type=\"time\" data-from-time .value=${item.fromTime} step=\"1800\" required ?disabled=${this.disabled} />\n\n <select data-to-date .value=${String(item.toDate || 0)} ?disabled=${this.disabled}>\n <option value=\"-1\">${msg('The day before')}</option>\n <option value=\"0\">${msg('The day')}</option>\n <option value=\"1\">${msg('The day after')}</option>\n </select>\n <input type=\"time\" data-to-time .value=${item.toTime} step=\"1800\" required ?disabled=${this.disabled} />\n\n <button\n class=\"record-action\"\n @click=${(e: Event) => this._delete(e)}\n tabindex=\"-1\"\n ?disabled=${this.disabled}\n >\n <md-icon>remove</md-icon>\n </button>\n </div>\n `\n )}\n ${this.disabled\n ? nothing\n : html`\n <div data-record-new>\n <input type=\"text\" data-name />\n\n <select data-from-date>\n <option value=\"-1\">${msg('The day before')}</option>\n <option value=\"0\" selected>${msg('The day')}</option>\n <option value=\"+1\">${msg('The day after')}</option>\n </select>\n <input type=\"time\" data-from-time step=\"1800\" />\n\n <select data-to-date>\n <option value=\"-1\">${msg('The day before')}</option>\n <option value=\"0\" selected>${msg('The day')}</option>\n <option value=\"+1\">${msg('The day after')}</option>\n </select>\n <input type=\"time\" data-to-time step=\"1800\" />\n\n <button class=\"record-action\" @click=${(e: Event) => this._add()} tabindex=\"-1\">\n <md-icon>add</md-icon>\n </button>\n </div>\n `}\n `\n }\n\n _onChange(e: Event) {\n if (this._changingNow) {\n return\n }\n\n this._changingNow = true\n\n const input = e.target as HTMLInputElement\n\n const div = input.parentElement as HTMLDivElement\n\n if (div.hasAttribute('data-record')) {\n this._build()\n } else if (div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n this._add()\n }\n\n this._changingNow = false\n }\n\n _build(includeNewRecord?: boolean) {\n if (includeNewRecord) {\n var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]')\n } else {\n var records = this.renderRoot.querySelectorAll('[data-record]')\n }\n\n var value: WorkShift[] = []\n for (var i = 0; i < records.length; i++) {\n const record = records[i]\n\n const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n\n const fromDate = (record.querySelector('[data-from-date]') as HTMLSelectElement).value\n const fromTime = (record.querySelector('[data-from-time]') as HTMLInputElement).value\n const toDate = (record.querySelector('[data-to-date]') as HTMLSelectElement).value\n const toTime = (record.querySelector('[data-to-time]') as HTMLInputElement).value\n\n if (!name) {\n ;(record.querySelector('[data-name]') as HTMLInputElement).focus()\n return\n }\n\n if (!fromDate) {\n ;(record.querySelector('[data-from-date]') as HTMLInputElement).focus()\n return\n }\n\n if (!fromTime) {\n ;(record.querySelector('[data-from-time]') as HTMLInputElement).focus()\n return\n }\n\n if (!toDate) {\n ;(record.querySelector('[data-to-date]') as HTMLInputElement).focus()\n return\n }\n\n if (!toTime) {\n ;(record.querySelector('[data-to-time]') as HTMLInputElement).focus()\n return\n }\n\n if (name) {\n value.push({\n name,\n fromDate: Number(fromDate),\n fromTime,\n toDate: Number(toDate),\n toTime\n })\n }\n }\n\n this.value = value\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n\n _add() {\n this._build(true)\n\n const inputs = this.renderRoot.querySelectorAll(\n '[data-record-new] input:not([style*=\"display: none\"])'\n ) as NodeListOf<HTMLInputElement & { value: any; type: string }>\n\n for (var i = 0; i < inputs.length; i++) {\n let input = inputs[i]\n input.value = ''\n }\n\n inputs[0].focus()\n }\n\n _delete(e: Event) {\n const record = (e.target as Element).parentElement\n\n const dataName = record!.querySelector('[data-name]') as HTMLInputElement\n dataName.name = ''\n\n this._build()\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-input-work-shift.js","sourceRoot":"","sources":["../../src/ox-input-work-shift.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { localized, msg } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\ntype WorkShift = { name: string; fromDate: number; fromTime: string; toDate: number; toTime: string }\n\n/**\nwork-shift array value editor element\n\nExample:\n\n <ox-input-work-shift\n .value=${value}\n </ox-input-work-shift>\n*/\n\n@localized()\n@customElement('ox-input-work-shift')\nexport class OxInputWorkShift extends OxFormField {\n static styles = [InputStyles, css`\n :host {\n display: flex;\n flex-direction: column;\n\n width: 100%;\n overflow: hidden;\n\n --md-icon-size: var(--fontsize-default, 14px);\n }\n\n div {\n display: flex;\n flex-flow: row nowrap;\n gap: calc(var(--ox-input-gap) * 2);\n }\n\n empty-element {\n width: 34px;\n text-align: center;\n }\n\n input,\n select,\n span {\n flex: 1;\n }\n [data-header] {\n background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 5%, transparent);\n padding: var(--ox-input-gap);\n }\n [data-header] span {\n font: var(--label-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n text-transform: var(--label-text-transform);\n text-align: center;\n }\n [data-record] {\n margin-bottom: var(--ox-input-gap);\n }\n input,\n select {\n background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n color: var(--input-field-color, var(--md-sys-color-on-surface));\n border: 0;\n border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n padding: calc(var(--ox-input-gap) / 2);\n font: var(--ox-input-font);\n color: var(--md-sys-color-on-primary-container);\n\n max-height: 35px;\n }\n input:focus,\n select:focus {\n outline: none;\n border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n }\n\n input:required:invalid {\n border: 1px dashed red;\n }\n\n button {\n border: var(--button-border);\n border-radius: var(--ox-input-radius);\n background-color: var(--button-background-color);\n padding: var(--ox-input-gap) calc(var(--ox-input-gap) * 2);\n line-height: 0.8;\n color: var(--button-color);\n cursor: pointer;\n }\n button:focus,\n button:hover,\n button:active {\n border: var(--button-activ-border);\n background-color: var(--button-background-focus-color);\n color: var(--md-sys-color-primary-container);\n }\n\n [placeholder='value'] {\n flex: 2;\n }\n `]\n\n @property({ type: Array }) value: WorkShift[] = []\n\n private _changingNow: boolean = false\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n render() {\n const workshifts = this.value || []\n\n return html`\n <div data-header>\n <span>${msg('name')}</span>\n <span>${msg('from date')}</span>\n <span>${msg('from time')}</span>\n <span>${msg('to date')}</span>\n <span>${msg('to time')}</span>\n <empty-element></empty-element>\n </div>\n\n ${workshifts.map(\n item => html`\n <div data-record>\n <input type=\"text\" data-name .value=${item.name} required ?disabled=${this.disabled} />\n\n <select data-from-date .value=${String(item.fromDate || 0)} ?disabled=${this.disabled}>\n <option value=\"-1\">${msg('The day before')}</option>\n <option value=\"0\">${msg('The day')}</option>\n <option value=\"1\">${msg('The day after')}</option>\n </select>\n <input type=\"time\" data-from-time .value=${item.fromTime} step=\"1800\" required ?disabled=${this.disabled} />\n\n <select data-to-date .value=${String(item.toDate || 0)} ?disabled=${this.disabled}>\n <option value=\"-1\">${msg('The day before')}</option>\n <option value=\"0\">${msg('The day')}</option>\n <option value=\"1\">${msg('The day after')}</option>\n </select>\n <input type=\"time\" data-to-time .value=${item.toTime} step=\"1800\" required ?disabled=${this.disabled} />\n\n <button\n class=\"record-action\"\n @click=${(e: Event) => this._delete(e)}\n tabindex=\"-1\"\n ?disabled=${this.disabled}\n >\n <md-icon>remove</md-icon>\n </button>\n </div>\n `\n )}\n ${this.disabled\n ? nothing\n : html`\n <div data-record-new>\n <input type=\"text\" data-name />\n\n <select data-from-date>\n <option value=\"-1\">${msg('The day before')}</option>\n <option value=\"0\" selected>${msg('The day')}</option>\n <option value=\"+1\">${msg('The day after')}</option>\n </select>\n <input type=\"time\" data-from-time step=\"1800\" />\n\n <select data-to-date>\n <option value=\"-1\">${msg('The day before')}</option>\n <option value=\"0\" selected>${msg('The day')}</option>\n <option value=\"+1\">${msg('The day after')}</option>\n </select>\n <input type=\"time\" data-to-time step=\"1800\" />\n\n <button class=\"record-action\" @click=${(e: Event) => this._add()} tabindex=\"-1\">\n <md-icon>add</md-icon>\n </button>\n </div>\n `}\n `\n }\n\n _onChange(e: Event) {\n if (this._changingNow) {\n return\n }\n\n this._changingNow = true\n\n const input = e.target as HTMLInputElement\n\n const div = input.parentElement as HTMLDivElement\n\n if (div.hasAttribute('data-record')) {\n this._build()\n } else if (div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n this._add()\n }\n\n this._changingNow = false\n }\n\n _build(includeNewRecord?: boolean) {\n if (includeNewRecord) {\n var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]')\n } else {\n var records = this.renderRoot.querySelectorAll('[data-record]')\n }\n\n var value: WorkShift[] = []\n for (var i = 0; i < records.length; i++) {\n const record = records[i]\n\n const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n\n const fromDate = (record.querySelector('[data-from-date]') as HTMLSelectElement).value\n const fromTime = (record.querySelector('[data-from-time]') as HTMLInputElement).value\n const toDate = (record.querySelector('[data-to-date]') as HTMLSelectElement).value\n const toTime = (record.querySelector('[data-to-time]') as HTMLInputElement).value\n\n if (!name) {\n ;(record.querySelector('[data-name]') as HTMLInputElement).focus()\n return\n }\n\n if (!fromDate) {\n ;(record.querySelector('[data-from-date]') as HTMLInputElement).focus()\n return\n }\n\n if (!fromTime) {\n ;(record.querySelector('[data-from-time]') as HTMLInputElement).focus()\n return\n }\n\n if (!toDate) {\n ;(record.querySelector('[data-to-date]') as HTMLInputElement).focus()\n return\n }\n\n if (!toTime) {\n ;(record.querySelector('[data-to-time]') as HTMLInputElement).focus()\n return\n }\n\n if (name) {\n value.push({\n name,\n fromDate: Number(fromDate),\n fromTime,\n toDate: Number(toDate),\n toTime\n })\n }\n }\n\n this.value = value\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n\n _add() {\n this._build(true)\n\n const inputs = this.renderRoot.querySelectorAll(\n '[data-record-new] input:not([style*=\"display: none\"])'\n ) as NodeListOf<HTMLInputElement & { value: any; type: string }>\n\n for (var i = 0; i < inputs.length; i++) {\n let input = inputs[i]\n input.value = ''\n }\n\n inputs[0].focus()\n }\n\n _delete(e: Event) {\n const record = (e.target as Element).parentElement\n\n const dataName = record!.querySelector('[data-name]') as HTMLInputElement\n dataName.name = ''\n\n this._build()\n }\n}\n"]}
|