@operato/input 10.12.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 +9 -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-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"]}
|
|
@@ -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"]}
|