@operato/input 10.11.0 → 10.15.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 +18 -0
- package/coverage/lcov-report/index.html +96 -36
- package/coverage/lcov-report/webpack/bootstrap.html +1 -1
- package/coverage/lcov-report/webpack/index.html +1 -1
- package/coverage/lcov-report/webpack/runtime/define property getters.html +1 -1
- package/coverage/lcov-report/webpack/runtime/global.html +1 -1
- package/coverage/lcov-report/webpack/runtime/hasOwnProperty shorthand.html +1 -1
- package/coverage/lcov-report/webpack/runtime/index.html +1 -1
- package/coverage/lcov-report/webpack/runtime/make namespace object.html +1 -1
- package/coverage/lcov.info +10566 -550
- package/dist/src/input-styles.js +0 -1
- package/dist/src/input-styles.js.map +1 -1
- package/dist/src/ox-buttons-radio.js +5 -4
- package/dist/src/ox-buttons-radio.js.map +1 -1
- package/dist/src/ox-input-3axis.js +2 -1
- package/dist/src/ox-input-3axis.js.map +1 -1
- package/dist/src/ox-input-3dish.js +2 -1
- package/dist/src/ox-input-3dish.js.map +1 -1
- package/dist/src/ox-input-barcode.js +2 -1
- package/dist/src/ox-input-barcode.js.map +1 -1
- package/dist/src/ox-input-crontab.js +3 -2
- package/dist/src/ox-input-crontab.js.map +1 -1
- package/dist/src/ox-input-duration.js +3 -2
- package/dist/src/ox-input-duration.js.map +1 -1
- package/dist/src/ox-input-search.js +6 -0
- package/dist/src/ox-input-search.js.map +1 -1
- package/dist/src/ox-input-select-buttons.js +4 -3
- package/dist/src/ox-input-select-buttons.js.map +1 -1
- package/dist/test/form-element-height.test.d.ts +1 -0
- package/dist/test/form-element-height.test.js +37 -0
- package/dist/test/form-element-height.test.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +5 -5
- package/test/form-element-height.test.ts +43 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-duration.js","sourceRoot":"","sources":["../../src/ox-input-duration.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,OAAO,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-input-duration.js","sourceRoot":"","sources":["../../src/ox-input-duration.ts"],"names":[],"mappings":"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","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 { i18next } from '@operato/i18n'\nimport { formElementHeight } from '@operato/styles/form-element-heights.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\n@customElement('ox-input-duration')\nexport class OxInputDuration extends OxFormField {\n static styles = [InputStyles, css`\n :host {\n text-align: center;\n padding: 10px;\n --md-filled-icon-button-container-height: ${formElementHeight('--form-element-height-medium')};\n --md-filled-icon-button-container-shape: var(--md-sys-shape-corner-small);\n }\n\n :host * {\n box-sizing: border-box;\n }\n\n :host *:focus {\n outline: none;\n }\n\n form {\n display: flex;\n flex-direction: row;\n\n align-items: center;\n }\n\n [padding] {\n min-width: 100px;\n }\n\n input {\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 box-sizing: border-box;\n padding: 0 var(--ox-input-gap);\n height: ${formElementHeight('--form-element-height-medium')};\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--md-sys-shape-corner-small);\n max-width: 70px;\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n text-align: right;\n }\n\n input:focus {\n outline: none;\n border-color: var(--md-sys-color-secondary-fixed-dim);\n }\n\n input:invalid {\n border-bottom: 1px solid var(--md-sys-color-error);\n color: var(--md-sys-color-error);\n }\n\n label {\n width: 100%;\n margin-right: calc(var(--ox-input-gap) * 2);\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n `]\n\n @property({ type: Number }) value?: number = undefined\n\n render() {\n var d = Number(this.value || 0)\n\n const days = Math.floor(d / (3600 * 24))\n d -= days * 24 * 3600\n const hours = Math.floor(d / 3600)\n d -= hours * 3600\n const minutes = Math.floor(d / 60)\n const seconds = d - minutes * 60\n\n return html`\n <form @change=${this.onChange.bind(this)}>\n <div padding></div>\n <input id=\"days\" type=\"number\" .value=${String(days || 0)} pattern=\"\\\\d*\" ?disabled=${this.disabled} />\n <label for=\"days\">${i18next.t('label.days')}</label>\n\n <input\n id=\"hours\"\n type=\"number\"\n .value=${String(hours || 0)}\n pattern=\"[01]?\\\\d|2[0-3]\"\n ?disabled=${this.disabled}\n />\n <label for=\"hour\">${i18next.t('label.hours')}</label>\n\n <input\n id=\"minutes\"\n type=\"number\"\n .value=${String(minutes || 0)}\n pattern=\"[0-5]?\\\\d\"\n ?disabled=${this.disabled}\n />\n <label for=\"minute\">${i18next.t('label.minutes')}</label>\n\n <input\n id=\"seconds\"\n type=\"number\"\n .value=${String(seconds || 0)}\n pattern=\"[0-5]?\\\\d\"\n ?disabled=${this.disabled}\n />\n <label for=\"second\">${i18next.t('label.seconds')}</label>\n\n <md-filled-icon-button\n type=\"button\"\n @click=${(e: Event) => {\n e.preventDefault()\n e.stopPropagation()\n\n this.value = 0\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }}\n ?disabled=${this.disabled}\n >\n <md-icon>backspace</md-icon>\n </md-filled-icon-button>\n <div padding></div>\n </form>\n `\n }\n\n firstUpdated() {\n ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n }\n\n @query('#days') days!: HTMLInputElement\n @query('#hours') hours!: HTMLInputElement\n @query('#minutes') minutes!: HTMLInputElement\n @query('#seconds') seconds!: HTMLInputElement\n\n onChange(e: Event) {\n e.stopPropagation()\n\n var form = this.renderRoot.querySelector('form') as HTMLFormElement\n var valid = form.checkValidity()\n if (!valid) {\n form.reportValidity()\n return\n }\n\n const days = Number(this.days.value)\n const hours = Number(this.hours.value)\n const minutes = Number(this.minutes.value)\n const seconds = Number(this.seconds.value)\n\n this.value = (days || 0) * 24 * 60 * 60 + (hours || 0) * 60 * 60 + (minutes || 0) * 60 + (seconds || 0)\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n}\n"]}
|
|
@@ -28,6 +28,12 @@ let OxInputSearch = class OxInputSearch extends OxFormField {
|
|
|
28
28
|
[type='text'] {
|
|
29
29
|
flex: 1;
|
|
30
30
|
color: inherit;
|
|
31
|
+
/*
|
|
32
|
+
* body 에서 상속한 캐럿 색은 이 입력의 표면과 무관하다. 특히 어두운 테마에서
|
|
33
|
+
* 밝은 전역 on-surface 를 물고 오면 현재 글자색과 달라져 거의 보이지 않는다.
|
|
34
|
+
* 입력의 잉크와 같은 색을 쓰면 어떤 컨테이너가 이 컴포넌트를 감싸도 대비가 유지된다.
|
|
35
|
+
*/
|
|
36
|
+
caret-color: currentColor;
|
|
31
37
|
background-color: transparent;
|
|
32
38
|
border: 0;
|
|
33
39
|
padding: var(--input-search-padding, calc(var(--ox-input-gap) / 2));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-search.js","sourceRoot":"","sources":["../../src/ox-input-search.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AAEnC,+CAA+C;AAC/C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAGxC,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;aACrC,WAAM,GAAG;QACd,WAAW;QACX,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"ox-input-search.js","sourceRoot":"","sources":["../../src/ox-input-search.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\n// import debounce from 'lodash-es/debounce.js'\nimport { css, html } from 'lit'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\n@customElement('ox-input-search')\nexport class OxInputSearch extends OxFormField {\n static styles = [\n InputStyles,\n css`\n :host {\n display: flex;\n position: relative;\n align-items: center;\n\n color: var(--ox-input-search-color, var(--md-sys-color-on-surface-variant));\n background-color: var(--ox-input-search-background-color, var(--md-sys-color-surface-variant));\n\n --md-icon-size: 20px;\n }\n\n [type='text'] {\n flex: 1;\n color: inherit;\n /*\n * body 에서 상속한 캐럿 색은 이 입력의 표면과 무관하다. 특히 어두운 테마에서\n * 밝은 전역 on-surface 를 물고 오면 현재 글자색과 달라져 거의 보이지 않는다.\n * 입력의 잉크와 같은 색을 쓰면 어떤 컨테이너가 이 컴포넌트를 감싸도 대비가 유지된다.\n */\n caret-color: currentColor;\n background-color: transparent;\n border: 0;\n padding: var(--input-search-padding, calc(var(--ox-input-gap) / 2));\n padding-left: 25px;\n overflow: hidden;\n }\n\n [type='text']:focus {\n outline: none;\n }\n\n /*\n * 아이콘 색을 글자와 따로 받는다.\n *\n * 돋보기는 **장치**이고 입력한 글자는 **값**이다. 둘이 같은 색이면 장치가 값만큼 눈에 걸린다.\n * 기본은 물려받는 색이라 지금 쓰는 곳의 거동이 바뀌지 않고, 담는 화면이 필요할 때만 내린다.\n */\n md-icon {\n position: absolute;\n color: var(--ox-input-search-icon-color, inherit);\n }\n\n /*\n * Only width survives here — the other two declarations never applied.\n *\n * [type='text'] above matches the same element and sets background-color: transparent and\n * color: inherit. An attribute selector outweighs a type selector, so those won regardless\n * of order, and --input-field-background / --input-field-color did nothing at all. Measured\n * by the figure lane chasing an invisible caret: the input's own background read as\n * transparent in both themes, with the colour coming from the host.\n *\n * That is worse than an unsupported token, because the token name is one this repo uses in\n * twenty other input fields — so setting it here looks like it should work, silently.\n *\n * The field's surface and ink belong to :host, which is where they are, and where a caller\n * can reach them with --ox-input-search-background-color / --ox-input-search-color.\n */\n input {\n width: 100%;\n }\n `\n ]\n\n @property({ type: String }) placeholder?: string\n @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean\n @property({ type: Number, attribute: 'max-length' }) maxLength?: number\n\n @query('input') input!: HTMLInputElement\n\n // private dispatchChangeEventDebouncer = debounce((value: string) => this.dispatchChangeEvent(value), 100)\n\n render() {\n return html`\n <!--\n The magnifier runs the search on click, but md-icon takes no focus, so the keyboard never\n reaches it. Enter in the input does the same thing, so no function is blocked. Hiding it\n from assistive tech removes one more unnamed click target and costs nothing.\n -->\n <md-icon aria-hidden=\"true\" @click=${(e: Event) => !this.disabled && this._onClickSearch(e)}>search</md-icon>\n <!--\n Name the input. It had only a placeholder, and a placeholder is not a name: it disappears\n the moment you type, so there is no way to ask again what you were entering, and when the\n caller passes none — which most screens do — nothing is left.\n\n Use whatever the caller set, and fall back to \"search\".\n -->\n <input\n type=\"text\"\n aria-label=${this.placeholder || i18next.t('label.search', { defaultValue: 'search' })}\n .value=${this.value || ''}\n .placeholder=${this.placeholder || ''}\n maxlength=${ifDefined(this.maxLength)}\n @change=${(e: Event) => {\n e.stopPropagation()\n this.dispatchChangeEvent((e.target as HTMLInputElement).value)\n // this.dispatchChangeEventDebouncer((e.target as HTMLInputElement).value)\n }}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n if ((e.target as HTMLInputElement).value == this.value) {\n /* Even if the value has not changed, the enter key triggers a change event. */\n e.preventDefault() /* Prevent change event from occurring twice. */\n\n this.input.dispatchEvent(\n new CustomEvent('change', {\n detail: (e.target as HTMLInputElement).value\n })\n )\n }\n }\n }}\n ?disabled=${this.disabled}\n />\n `\n }\n\n firstUpdated() {\n if (this.autofocus) {\n this.input.focus()\n }\n }\n\n dispatchChangeEvent(value: string) {\n this.value = value\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: value\n })\n )\n\n if (this.selectAfterChange) {\n requestAnimationFrame(() => {\n this.input.select()\n })\n }\n }\n\n _onClickSearch(e: Event) {\n if (this._form) {\n e.stopPropagation()\n this._form.requestSubmit()\n } else {\n this.input.dispatchEvent(\n new CustomEvent('change', {\n detail: this.input.value\n })\n )\n }\n }\n}\n"]}
|
|
@@ -7,6 +7,7 @@ import '@material/web/chips/chip-set.js';
|
|
|
7
7
|
import { css, html } from 'lit';
|
|
8
8
|
import { customElement, property } from 'lit/decorators.js';
|
|
9
9
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
10
|
+
import { formElementHeight } from '@operato/styles/form-element-heights.js';
|
|
10
11
|
import { OxFormField } from './ox-form-field.js';
|
|
11
12
|
import { InputStyles } from './input-styles.js';
|
|
12
13
|
let OxInputSelectButtons = class OxInputSelectButtons extends OxFormField {
|
|
@@ -38,11 +39,11 @@ let OxInputSelectButtons = class OxInputSelectButtons extends OxFormField {
|
|
|
38
39
|
flex-wrap: wrap;
|
|
39
40
|
gap: 6px;
|
|
40
41
|
|
|
41
|
-
/*
|
|
42
|
-
--md-filter-chip-container-height:
|
|
42
|
+
/* Size: the small input height, one step below the list body. */
|
|
43
|
+
--md-filter-chip-container-height: ${formElementHeight('--form-element-height-small')};
|
|
43
44
|
--md-filter-chip-label-text-size: 12.5px;
|
|
44
45
|
--md-filter-chip-label-text-weight: 560;
|
|
45
|
-
--md-filter-chip-container-shape:
|
|
46
|
+
--md-filter-chip-container-shape: calc(${formElementHeight('--form-element-height-small')} / 2);
|
|
46
47
|
--md-filter-chip-leading-space: 11px;
|
|
47
48
|
--md-filter-chip-trailing-space: 11px;
|
|
48
49
|
--md-filter-chip-with-leading-icon-leading-space: 8px;
|
|
@@ -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,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAiBxC,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,WAAW;IAA9C;;QAqDsB,UAAK,GAAkC,EAAE,CAAA;QACzC,YAAO,GAAa,EAAE,CAAA;QACpB,aAAQ,GAAY,KAAK,CAAA;IA6CxD,CAAC;aAnGQ,WAAM,GAAG;QACd,WAAW;QACX,GAAG,CAAA
|
|
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 { formElementHeight } 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 :host {\n display: flex;\n flex-flow: row;\n flex-wrap: wrap;\n gap: 6px;\n\n /* Size: the small input height, one step below the list body. */\n --md-filter-chip-container-height: ${formElementHeight('--form-element-height-small')};\n --md-filter-chip-label-text-size: 12.5px;\n --md-filter-chip-label-text-weight: 560;\n --md-filter-chip-container-shape: calc(${formElementHeight('--form-element-height-small')} / 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 --md-filter-chip-selected-container-color: var(--md-sys-color-primary);\n --md-filter-chip-selected-label-text-color: var(--md-sys-color-on-primary);\n --md-filter-chip-selected-outline-width: 0px;\n --md-filter-chip-selected-focus-label-text-color: var(--md-sys-color-on-primary);\n --md-filter-chip-selected-hover-label-text-color: var(--md-sys-color-on-primary);\n --md-filter-chip-selected-pressed-label-text-color: var(--md-sys-color-on-primary);\n --md-filter-chip-selected-leading-icon-color: var(--md-sys-color-on-primary);\n --md-filter-chip-selected-hover-leading-icon-color: var(--md-sys-color-on-primary);\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
|
+
export {};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { expect } from '@open-wc/testing';
|
|
2
|
+
import { OxButtonsRadio } from '../src/ox-buttons-radio.js';
|
|
3
|
+
import { OxInputBarcode } from '../src/ox-input-barcode.js';
|
|
4
|
+
import { OxInputCrontab } from '../src/ox-input-crontab.js';
|
|
5
|
+
import { OxInputDuration } from '../src/ox-input-duration.js';
|
|
6
|
+
import { OxInputSelectButtons } from '../src/ox-input-select-buttons.js';
|
|
7
|
+
import { InputStyles } from '../src/input-styles.js';
|
|
8
|
+
/**
|
|
9
|
+
* Inputs read the medium input height, --form-element-height-medium (32px by default). The number
|
|
10
|
+
* comes from @operato/styles (FORM_ELEMENT_HEIGHT_TOKENS) so a component used without the shell theme
|
|
11
|
+
* still has a height, and no component writes its own number or keeps a private height variable.
|
|
12
|
+
*/
|
|
13
|
+
const text = (styles) => (Array.isArray(styles) ? styles.flat(Infinity) : [styles])
|
|
14
|
+
.map(s => String(s.cssText ?? s))
|
|
15
|
+
.join('\n');
|
|
16
|
+
describe('form element height', () => {
|
|
17
|
+
for (const [name, element] of [
|
|
18
|
+
['ox-buttons-radio', OxButtonsRadio],
|
|
19
|
+
['ox-input-barcode', OxInputBarcode],
|
|
20
|
+
['ox-input-crontab', OxInputCrontab],
|
|
21
|
+
['ox-input-duration', OxInputDuration]
|
|
22
|
+
]) {
|
|
23
|
+
it(`${name} reads the medium token with the shared default`, () => {
|
|
24
|
+
const css = text(element.styles);
|
|
25
|
+
expect(css).to.contain('var(--form-element-height-medium, 32px)');
|
|
26
|
+
expect(css).to.not.match(/var\(--form-element-height-medium\)/);
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
it('ox-input-select-buttons chips take the small token', () => {
|
|
30
|
+
const css = text(OxInputSelectButtons.styles);
|
|
31
|
+
expect(css).to.contain('--md-filter-chip-container-height: var(--form-element-height-small, 26px)');
|
|
32
|
+
});
|
|
33
|
+
it('InputStyles keeps no private input height', () => {
|
|
34
|
+
expect(text(InputStyles)).to.not.contain('--ox-input-height');
|
|
35
|
+
});
|
|
36
|
+
});
|
|
37
|
+
//# sourceMappingURL=form-element-height.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-element-height.test.js","sourceRoot":"","sources":["../../test/form-element-height.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAA;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEpD;;;;GAIG;AAEH,MAAM,IAAI,GAAG,CAAC,MAAe,EAAU,EAAE,CACvC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;KACvD,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAE,CAA0B,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;KAC1D,IAAI,CAAC,IAAI,CAAC,CAAA;AAEf,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,KAAK,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI;QAC5B,CAAC,kBAAkB,EAAE,cAAc,CAAC;QACpC,CAAC,kBAAkB,EAAE,cAAc,CAAC;QACpC,CAAC,kBAAkB,EAAE,cAAc,CAAC;QACpC,CAAC,mBAAmB,EAAE,eAAe,CAAC;KAC9B,EAAE,CAAC;QACX,EAAE,CAAC,GAAG,IAAI,iDAAiD,EAAE,GAAG,EAAE;YAChE,MAAM,GAAG,GAAG,IAAI,CAAE,OAA0C,CAAC,MAAM,CAAC,CAAA;YACpE,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,yCAAyC,CAAC,CAAA;YACjE,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,qCAAqC,CAAC,CAAA;QACjE,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,EAAE,CAAC,oDAAoD,EAAE,GAAG,EAAE;QAC5D,MAAM,GAAG,GAAG,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAA;QAC7C,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,2EAA2E,CAAC,CAAA;IACrG,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,2CAA2C,EAAE,GAAG,EAAE;QACnD,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAA;IAC/D,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import { expect } from '@open-wc/testing'\n\nimport { OxButtonsRadio } from '../src/ox-buttons-radio.js'\nimport { OxInputBarcode } from '../src/ox-input-barcode.js'\nimport { OxInputCrontab } from '../src/ox-input-crontab.js'\nimport { OxInputDuration } from '../src/ox-input-duration.js'\nimport { OxInputSelectButtons } from '../src/ox-input-select-buttons.js'\nimport { InputStyles } from '../src/input-styles.js'\n\n/**\n * Inputs read the medium input height, --form-element-height-medium (32px by default). The number\n * comes from @operato/styles (FORM_ELEMENT_HEIGHT_TOKENS) so a component used without the shell theme\n * still has a height, and no component writes its own number or keeps a private height variable.\n */\n\nconst text = (styles: unknown): string =>\n (Array.isArray(styles) ? styles.flat(Infinity) : [styles])\n .map(s => String((s as { cssText?: string }).cssText ?? s))\n .join('\\n')\n\ndescribe('form element height', () => {\n for (const [name, element] of [\n ['ox-buttons-radio', OxButtonsRadio],\n ['ox-input-barcode', OxInputBarcode],\n ['ox-input-crontab', OxInputCrontab],\n ['ox-input-duration', OxInputDuration]\n ] as const) {\n it(`${name} reads the medium token with the shared default`, () => {\n const css = text((element as unknown as { styles: unknown }).styles)\n expect(css).to.contain('var(--form-element-height-medium, 32px)')\n expect(css).to.not.match(/var\\(--form-element-height-medium\\)/)\n })\n }\n\n it('ox-input-select-buttons chips take the small token', () => {\n const css = text(OxInputSelectButtons.styles)\n expect(css).to.contain('--md-filter-chip-container-height: var(--form-element-height-small, 26px)')\n })\n\n it('InputStyles keeps no private input height', () => {\n expect(text(InputStyles)).to.not.contain('--ox-input-height')\n })\n})\n"]}
|