@operato/input 10.29.40 → 10.29.43
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 +17 -0
- package/dist/src/ox-input-select-buttons.js +2 -1
- package/dist/src/ox-input-select-buttons.js.map +1 -1
- package/dist/test/ox-input-select-buttons.test.d.ts +1 -0
- package/dist/test/ox-input-select-buttons.test.js +43 -0
- package/dist/test/ox-input-select-buttons.test.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -4
- package/test/ox-input-select-buttons.test.ts +51 -0
- package/coverage/lcov-report/base.css +0 -224
- package/coverage/lcov-report/block-navigation.js +0 -87
- package/coverage/lcov-report/favicon.png +0 -0
- package/coverage/lcov-report/index.html +0 -776
- package/coverage/lcov-report/prettify.css +0 -1
- package/coverage/lcov-report/prettify.js +0 -2
- package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
- package/coverage/lcov-report/sorter.js +0 -210
- package/coverage/lcov-report/webpack/bootstrap.html +0 -118
- package/coverage/lcov-report/webpack/index.html +0 -116
- package/coverage/lcov-report/webpack/runtime/define property getters.html +0 -118
- package/coverage/lcov-report/webpack/runtime/global.html +0 -118
- package/coverage/lcov-report/webpack/runtime/hasOwnProperty shorthand.html +0 -118
- package/coverage/lcov-report/webpack/runtime/index.html +0 -161
- package/coverage/lcov-report/webpack/runtime/make namespace object.html +0 -118
- package/coverage/lcov.info +0 -46907
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,23 @@
|
|
|
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
|
+
### [10.29.43](https://github.com/hatiolab/operato/compare/v10.29.42...v10.29.43) (2026-10-18)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @operato/input
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### [10.29.41](https://github.com/hatiolab/operato/compare/v10.29.40...v10.29.41) (2026-10-18)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### :rocket: New Features
|
|
18
|
+
|
|
19
|
+
* **input:** select-buttons chip labels can show as written ([bd42285](https://github.com/hatiolab/operato/commit/bd42285494eb18fad7126694f198eca531182588))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
6
23
|
### [10.29.40](https://github.com/hatiolab/operato/compare/v10.29.39...v10.29.40) (2026-10-17)
|
|
7
24
|
|
|
8
25
|
|
|
@@ -33,8 +33,9 @@ let OxInputSelectButtons = class OxInputSelectButtons extends OxFormField {
|
|
|
33
33
|
* md 칩을 갈아치우지 않고 그 토큰으로만 조정한다. 이 컴포넌트를 쓰는 화면이 많고, 자기 것으로
|
|
34
34
|
* 다시 만들면 그 화면들이 두 모양으로 갈린다.
|
|
35
35
|
*/
|
|
36
|
+
/* Labels that are identifiers (part names, codes) must show as written: set this to none. */
|
|
36
37
|
md-filter-chip {
|
|
37
|
-
text-transform: capitalize;
|
|
38
|
+
text-transform: var(--ox-input-select-buttons-label-text-transform, capitalize);
|
|
38
39
|
}
|
|
39
40
|
|
|
40
41
|
:host {
|
|
@@ -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 /* Labels that are identifiers (part names, codes) must show as written: set this to none. */\n md-filter-chip {\n text-transform: var(--ox-input-select-buttons-label-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"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '../src/ox-input-select-buttons.js';
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { expect, fixture } from '@open-wc/testing';
|
|
2
|
+
import { html } from 'lit';
|
|
3
|
+
import '../src/ox-input-select-buttons.js';
|
|
4
|
+
/**
|
|
5
|
+
* Chip labels.
|
|
6
|
+
*
|
|
7
|
+
* Most screens hand the chips words (`important`, `due`) and keep them capitalized. Some hand them
|
|
8
|
+
* identifiers — a part name `roller-row-1`, a code — and those must show as written. The caller says
|
|
9
|
+
* so with --ox-input-select-buttons-label-text-transform; a screen that sets nothing keeps capitalize.
|
|
10
|
+
*/
|
|
11
|
+
describe('ox-input-select-buttons', () => {
|
|
12
|
+
const options = [
|
|
13
|
+
{ display: 'frame', value: 'frame' },
|
|
14
|
+
{ display: 'roller-row-1', value: 'roller-row-1' }
|
|
15
|
+
];
|
|
16
|
+
const chips = (el) => [...el.renderRoot.querySelectorAll('md-filter-chip')];
|
|
17
|
+
it('capitalizes the chip labels by default', async () => {
|
|
18
|
+
const el = await fixture(html `<ox-input-select-buttons .options=${options}></ox-input-select-buttons>`);
|
|
19
|
+
expect(chips(el)).to.have.length(2);
|
|
20
|
+
chips(el).forEach(chip => expect(getComputedStyle(chip).textTransform).to.equal('capitalize'));
|
|
21
|
+
});
|
|
22
|
+
it('shows the labels as written when the caller sets the transform to none', async () => {
|
|
23
|
+
const el = await fixture(html `
|
|
24
|
+
<ox-input-select-buttons
|
|
25
|
+
style="--ox-input-select-buttons-label-text-transform: none"
|
|
26
|
+
.options=${options}
|
|
27
|
+
></ox-input-select-buttons>
|
|
28
|
+
`);
|
|
29
|
+
expect(chips(el)).to.have.length(2);
|
|
30
|
+
chips(el).forEach(chip => expect(getComputedStyle(chip).textTransform).to.equal('none'));
|
|
31
|
+
});
|
|
32
|
+
it('takes the transform from an ancestor, so a dialog can set it once', async () => {
|
|
33
|
+
const host = await fixture(html `
|
|
34
|
+
<div style="--ox-input-select-buttons-label-text-transform: none">
|
|
35
|
+
<ox-input-select-buttons .options=${options}></ox-input-select-buttons>
|
|
36
|
+
</div>
|
|
37
|
+
`);
|
|
38
|
+
const el = host.querySelector('ox-input-select-buttons');
|
|
39
|
+
await el.updateComplete;
|
|
40
|
+
chips(el).forEach(chip => expect(getComputedStyle(chip).textTransform).to.equal('none'));
|
|
41
|
+
});
|
|
42
|
+
});
|
|
43
|
+
//# sourceMappingURL=ox-input-select-buttons.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-input-select-buttons.test.js","sourceRoot":"","sources":["../../test/ox-input-select-buttons.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,OAAO,mCAAmC,CAAA;AAE1C;;;;;;GAMG;AACH,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACvC,MAAM,OAAO,GAAG;QACd,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;QACpC,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;KACnD,CAAA;IAED,MAAM,KAAK,GAAG,CAAC,EAAO,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAkB,CAAA;IAEjG,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;QACtD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA,qCAAqC,OAAO,6BAA6B,CAAC,CAAA;QAEvG,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;QACnC,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAA;IAChG,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,wEAAwE,EAAE,KAAK,IAAI,EAAE;QACtF,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA;;;mBAGd,OAAO;;KAErB,CAAC,CAAA;QAEF,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;QACnC,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAC1F,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,mEAAmE,EAAE,KAAK,IAAI,EAAE;QACjF,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA;;4CAES,OAAO;;KAE9C,CAAC,CAAA;QACF,MAAM,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,yBAAyB,CAAQ,CAAA;QAC/D,MAAM,EAAE,CAAC,cAAc,CAAA;QAEvB,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAC1F,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import { expect, fixture } from '@open-wc/testing'\nimport { html } from 'lit'\n\nimport '../src/ox-input-select-buttons.js'\n\n/**\n * Chip labels.\n *\n * Most screens hand the chips words (`important`, `due`) and keep them capitalized. Some hand them\n * identifiers — a part name `roller-row-1`, a code — and those must show as written. The caller says\n * so with --ox-input-select-buttons-label-text-transform; a screen that sets nothing keeps capitalize.\n */\ndescribe('ox-input-select-buttons', () => {\n const options = [\n { display: 'frame', value: 'frame' },\n { display: 'roller-row-1', value: 'roller-row-1' }\n ]\n\n const chips = (el: any) => [...el.renderRoot.querySelectorAll('md-filter-chip')] as HTMLElement[]\n\n it('capitalizes the chip labels by default', async () => {\n const el = await fixture(html`<ox-input-select-buttons .options=${options}></ox-input-select-buttons>`)\n\n expect(chips(el)).to.have.length(2)\n chips(el).forEach(chip => expect(getComputedStyle(chip).textTransform).to.equal('capitalize'))\n })\n\n it('shows the labels as written when the caller sets the transform to none', async () => {\n const el = await fixture(html`\n <ox-input-select-buttons\n style=\"--ox-input-select-buttons-label-text-transform: none\"\n .options=${options}\n ></ox-input-select-buttons>\n `)\n\n expect(chips(el)).to.have.length(2)\n chips(el).forEach(chip => expect(getComputedStyle(chip).textTransform).to.equal('none'))\n })\n\n it('takes the transform from an ancestor, so a dialog can set it once', async () => {\n const host = await fixture(html`\n <div style=\"--ox-input-select-buttons-label-text-transform: none\">\n <ox-input-select-buttons .options=${options}></ox-input-select-buttons>\n </div>\n `)\n const el = host.querySelector('ox-input-select-buttons') as any\n await el.updateComplete\n\n chips(el).forEach(chip => expect(getComputedStyle(chip).textTransform).to.equal('none'))\n })\n})\n"]}
|