@operato/form 10.13.0 → 10.16.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.
@@ -0,0 +1,210 @@
1
+ /* eslint-disable */
2
+ var addSorting = (function() {
3
+ 'use strict';
4
+ var cols,
5
+ currentSort = {
6
+ index: 0,
7
+ desc: false
8
+ };
9
+
10
+ // returns the summary table element
11
+ function getTable() {
12
+ return document.querySelector('.coverage-summary');
13
+ }
14
+ // returns the thead element of the summary table
15
+ function getTableHeader() {
16
+ return getTable().querySelector('thead tr');
17
+ }
18
+ // returns the tbody element of the summary table
19
+ function getTableBody() {
20
+ return getTable().querySelector('tbody');
21
+ }
22
+ // returns the th element for nth column
23
+ function getNthColumn(n) {
24
+ return getTableHeader().querySelectorAll('th')[n];
25
+ }
26
+
27
+ function onFilterInput() {
28
+ const searchValue = document.getElementById('fileSearch').value;
29
+ const rows = document.getElementsByTagName('tbody')[0].children;
30
+
31
+ // Try to create a RegExp from the searchValue. If it fails (invalid regex),
32
+ // it will be treated as a plain text search
33
+ let searchRegex;
34
+ try {
35
+ searchRegex = new RegExp(searchValue, 'i'); // 'i' for case-insensitive
36
+ } catch (error) {
37
+ searchRegex = null;
38
+ }
39
+
40
+ for (let i = 0; i < rows.length; i++) {
41
+ const row = rows[i];
42
+ let isMatch = false;
43
+
44
+ if (searchRegex) {
45
+ // If a valid regex was created, use it for matching
46
+ isMatch = searchRegex.test(row.textContent);
47
+ } else {
48
+ // Otherwise, fall back to the original plain text search
49
+ isMatch = row.textContent
50
+ .toLowerCase()
51
+ .includes(searchValue.toLowerCase());
52
+ }
53
+
54
+ row.style.display = isMatch ? '' : 'none';
55
+ }
56
+ }
57
+
58
+ // loads the search box
59
+ function addSearchBox() {
60
+ var template = document.getElementById('filterTemplate');
61
+ var templateClone = template.content.cloneNode(true);
62
+ templateClone.getElementById('fileSearch').oninput = onFilterInput;
63
+ template.parentElement.appendChild(templateClone);
64
+ }
65
+
66
+ // loads all columns
67
+ function loadColumns() {
68
+ var colNodes = getTableHeader().querySelectorAll('th'),
69
+ colNode,
70
+ cols = [],
71
+ col,
72
+ i;
73
+
74
+ for (i = 0; i < colNodes.length; i += 1) {
75
+ colNode = colNodes[i];
76
+ col = {
77
+ key: colNode.getAttribute('data-col'),
78
+ sortable: !colNode.getAttribute('data-nosort'),
79
+ type: colNode.getAttribute('data-type') || 'string'
80
+ };
81
+ cols.push(col);
82
+ if (col.sortable) {
83
+ col.defaultDescSort = col.type === 'number';
84
+ colNode.innerHTML =
85
+ colNode.innerHTML + '<span class="sorter"></span>';
86
+ }
87
+ }
88
+ return cols;
89
+ }
90
+ // attaches a data attribute to every tr element with an object
91
+ // of data values keyed by column name
92
+ function loadRowData(tableRow) {
93
+ var tableCols = tableRow.querySelectorAll('td'),
94
+ colNode,
95
+ col,
96
+ data = {},
97
+ i,
98
+ val;
99
+ for (i = 0; i < tableCols.length; i += 1) {
100
+ colNode = tableCols[i];
101
+ col = cols[i];
102
+ val = colNode.getAttribute('data-value');
103
+ if (col.type === 'number') {
104
+ val = Number(val);
105
+ }
106
+ data[col.key] = val;
107
+ }
108
+ return data;
109
+ }
110
+ // loads all row data
111
+ function loadData() {
112
+ var rows = getTableBody().querySelectorAll('tr'),
113
+ i;
114
+
115
+ for (i = 0; i < rows.length; i += 1) {
116
+ rows[i].data = loadRowData(rows[i]);
117
+ }
118
+ }
119
+ // sorts the table using the data for the ith column
120
+ function sortByIndex(index, desc) {
121
+ var key = cols[index].key,
122
+ sorter = function(a, b) {
123
+ a = a.data[key];
124
+ b = b.data[key];
125
+ return a < b ? -1 : a > b ? 1 : 0;
126
+ },
127
+ finalSorter = sorter,
128
+ tableBody = document.querySelector('.coverage-summary tbody'),
129
+ rowNodes = tableBody.querySelectorAll('tr'),
130
+ rows = [],
131
+ i;
132
+
133
+ if (desc) {
134
+ finalSorter = function(a, b) {
135
+ return -1 * sorter(a, b);
136
+ };
137
+ }
138
+
139
+ for (i = 0; i < rowNodes.length; i += 1) {
140
+ rows.push(rowNodes[i]);
141
+ tableBody.removeChild(rowNodes[i]);
142
+ }
143
+
144
+ rows.sort(finalSorter);
145
+
146
+ for (i = 0; i < rows.length; i += 1) {
147
+ tableBody.appendChild(rows[i]);
148
+ }
149
+ }
150
+ // removes sort indicators for current column being sorted
151
+ function removeSortIndicators() {
152
+ var col = getNthColumn(currentSort.index),
153
+ cls = col.className;
154
+
155
+ cls = cls.replace(/ sorted$/, '').replace(/ sorted-desc$/, '');
156
+ col.className = cls;
157
+ }
158
+ // adds sort indicators for current column being sorted
159
+ function addSortIndicators() {
160
+ getNthColumn(currentSort.index).className += currentSort.desc
161
+ ? ' sorted-desc'
162
+ : ' sorted';
163
+ }
164
+ // adds event listeners for all sorter widgets
165
+ function enableUI() {
166
+ var i,
167
+ el,
168
+ ithSorter = function ithSorter(i) {
169
+ var col = cols[i];
170
+
171
+ return function() {
172
+ var desc = col.defaultDescSort;
173
+
174
+ if (currentSort.index === i) {
175
+ desc = !currentSort.desc;
176
+ }
177
+ sortByIndex(i, desc);
178
+ removeSortIndicators();
179
+ currentSort.index = i;
180
+ currentSort.desc = desc;
181
+ addSortIndicators();
182
+ };
183
+ };
184
+ for (i = 0; i < cols.length; i += 1) {
185
+ if (cols[i].sortable) {
186
+ // add the click event handler on the th so users
187
+ // dont have to click on those tiny arrows
188
+ el = getNthColumn(i).querySelector('.sorter').parentElement;
189
+ if (el.addEventListener) {
190
+ el.addEventListener('click', ithSorter(i));
191
+ } else {
192
+ el.attachEvent('onclick', ithSorter(i));
193
+ }
194
+ }
195
+ }
196
+ }
197
+ // adds sorting functionality to the UI
198
+ return function() {
199
+ if (!getTable()) {
200
+ return;
201
+ }
202
+ cols = loadColumns();
203
+ loadData();
204
+ addSearchBox();
205
+ addSortIndicators();
206
+ enableUI();
207
+ };
208
+ })();
209
+
210
+ window.addEventListener('load', addSorting);
@@ -0,0 +1,336 @@
1
+ TN:
2
+ SF:__wds-outside-root__/1/styles/src/form-element-heights.ts
3
+ FN:36,formElementHeight
4
+ FN:44,suiteFormElementHeight
5
+ FNF:2
6
+ FNH:1
7
+ FNDA:3,formElementHeight
8
+ FNDA:0,suiteFormElementHeight
9
+ DA:1,1
10
+ DA:2,1
11
+ DA:3,1
12
+ DA:4,1
13
+ DA:5,1
14
+ DA:6,1
15
+ DA:7,1
16
+ DA:8,1
17
+ DA:9,1
18
+ DA:10,1
19
+ DA:11,1
20
+ DA:12,1
21
+ DA:13,1
22
+ DA:14,1
23
+ DA:15,1
24
+ DA:16,1
25
+ DA:17,1
26
+ DA:18,1
27
+ DA:19,1
28
+ DA:20,1
29
+ DA:21,1
30
+ DA:22,1
31
+ DA:23,1
32
+ DA:24,1
33
+ DA:25,1
34
+ DA:26,1
35
+ DA:27,1
36
+ DA:28,1
37
+ DA:29,1
38
+ DA:30,1
39
+ DA:31,1
40
+ DA:32,1
41
+ DA:33,1
42
+ DA:34,1
43
+ DA:35,1
44
+ DA:36,1
45
+ DA:37,3
46
+ DA:38,3
47
+ DA:39,1
48
+ DA:40,1
49
+ DA:41,1
50
+ DA:42,1
51
+ DA:43,1
52
+ DA:44,1
53
+ DA:45,0
54
+ DA:46,0
55
+ DA:47,0
56
+ LF:47
57
+ LH:44
58
+ BRDA:36,0,0,3
59
+ BRF:1
60
+ BRH:1
61
+ end_of_record
62
+ TN:
63
+ SF:src/components/ox-custom-input.ts
64
+ FN:7,CustomInput
65
+ FN:33,render
66
+ FN:46,get checked
67
+ FN:50,set checked
68
+ FN:54,firstUpdated
69
+ FN:58,updated
70
+ FN:85,_isObject
71
+ FN:89,focus
72
+ FN:93,select
73
+ FN:97,blur
74
+ FN:101,checkValidity
75
+ FNF:11
76
+ FNH:0
77
+ FNDA:0,CustomInput
78
+ FNDA:0,render
79
+ FNDA:0,get checked
80
+ FNDA:0,set checked
81
+ FNDA:0,firstUpdated
82
+ FNDA:0,updated
83
+ FNDA:0,_isObject
84
+ FNDA:0,focus
85
+ FNDA:0,select
86
+ FNDA:0,blur
87
+ FNDA:0,checkValidity
88
+ DA:1,1
89
+ DA:2,1
90
+ DA:3,1
91
+ DA:4,1
92
+ DA:5,1
93
+ DA:6,1
94
+ DA:7,1
95
+ DA:8,0
96
+ DA:9,0
97
+ DA:10,0
98
+ DA:11,0
99
+ DA:12,0
100
+ DA:13,0
101
+ DA:14,0
102
+ DA:15,0
103
+ DA:16,0
104
+ DA:17,0
105
+ DA:18,0
106
+ DA:19,0
107
+ DA:20,0
108
+ DA:21,0
109
+ DA:22,0
110
+ DA:23,0
111
+ DA:24,0
112
+ DA:25,0
113
+ DA:26,0
114
+ DA:27,0
115
+ DA:28,0
116
+ DA:29,0
117
+ DA:30,0
118
+ DA:31,0
119
+ DA:32,0
120
+ DA:33,0
121
+ DA:34,0
122
+ DA:35,0
123
+ DA:36,0
124
+ DA:37,0
125
+ DA:38,0
126
+ DA:39,0
127
+ DA:40,0
128
+ DA:41,0
129
+ DA:42,0
130
+ DA:43,0
131
+ DA:44,0
132
+ DA:45,0
133
+ DA:46,0
134
+ DA:47,0
135
+ DA:48,0
136
+ DA:49,0
137
+ DA:50,0
138
+ DA:51,0
139
+ DA:52,0
140
+ DA:53,0
141
+ DA:54,0
142
+ DA:55,0
143
+ DA:56,0
144
+ DA:57,0
145
+ DA:58,0
146
+ DA:59,0
147
+ DA:60,0
148
+ DA:61,0
149
+ DA:62,0
150
+ DA:63,0
151
+ DA:64,0
152
+ DA:65,0
153
+ DA:66,0
154
+ DA:67,0
155
+ DA:68,0
156
+ DA:69,0
157
+ DA:70,0
158
+ DA:71,0
159
+ DA:72,0
160
+ DA:73,0
161
+ DA:74,0
162
+ DA:75,0
163
+ DA:76,0
164
+ DA:77,0
165
+ DA:78,0
166
+ DA:79,0
167
+ DA:80,0
168
+ DA:81,0
169
+ DA:82,0
170
+ DA:83,0
171
+ DA:84,0
172
+ DA:85,0
173
+ DA:86,0
174
+ DA:87,0
175
+ DA:88,0
176
+ DA:89,0
177
+ DA:90,0
178
+ DA:91,0
179
+ DA:92,0
180
+ DA:93,0
181
+ DA:94,0
182
+ DA:95,0
183
+ DA:96,0
184
+ DA:97,0
185
+ DA:98,0
186
+ DA:99,0
187
+ DA:100,0
188
+ DA:101,0
189
+ DA:102,0
190
+ DA:103,0
191
+ DA:104,0
192
+ LF:104
193
+ LH:7
194
+ BRF:0
195
+ BRH:0
196
+ end_of_record
197
+ TN:
198
+ SF:src/filters/filter-styles.ts
199
+ FNF:0
200
+ FNH:0
201
+ DA:1,1
202
+ DA:2,1
203
+ DA:3,1
204
+ DA:4,1
205
+ DA:5,1
206
+ DA:6,1
207
+ DA:7,1
208
+ DA:8,1
209
+ DA:9,1
210
+ DA:10,1
211
+ DA:11,1
212
+ DA:12,1
213
+ DA:13,1
214
+ DA:14,1
215
+ DA:15,1
216
+ DA:16,1
217
+ DA:17,1
218
+ DA:18,1
219
+ DA:19,1
220
+ DA:20,1
221
+ DA:21,1
222
+ DA:22,1
223
+ DA:23,1
224
+ DA:24,1
225
+ DA:25,1
226
+ DA:26,1
227
+ DA:27,1
228
+ DA:28,1
229
+ DA:29,1
230
+ DA:30,1
231
+ DA:31,1
232
+ DA:32,1
233
+ DA:33,1
234
+ DA:34,1
235
+ DA:35,1
236
+ DA:36,1
237
+ DA:37,1
238
+ DA:38,1
239
+ DA:39,1
240
+ DA:40,1
241
+ DA:41,1
242
+ DA:42,1
243
+ DA:43,1
244
+ DA:44,1
245
+ DA:45,1
246
+ DA:46,1
247
+ DA:47,1
248
+ DA:48,1
249
+ DA:49,1
250
+ DA:50,1
251
+ DA:51,1
252
+ DA:52,1
253
+ DA:53,1
254
+ DA:54,1
255
+ DA:55,1
256
+ DA:56,1
257
+ DA:57,1
258
+ DA:58,1
259
+ DA:59,1
260
+ DA:60,1
261
+ DA:61,1
262
+ DA:62,1
263
+ DA:63,1
264
+ DA:64,1
265
+ DA:65,1
266
+ DA:66,1
267
+ DA:67,1
268
+ DA:68,1
269
+ DA:69,1
270
+ DA:70,1
271
+ DA:71,1
272
+ DA:72,1
273
+ DA:73,1
274
+ DA:74,1
275
+ DA:75,1
276
+ DA:76,1
277
+ DA:77,1
278
+ DA:78,1
279
+ DA:79,1
280
+ DA:80,1
281
+ DA:81,1
282
+ DA:82,1
283
+ DA:83,1
284
+ DA:84,1
285
+ DA:85,1
286
+ DA:86,1
287
+ DA:87,1
288
+ DA:88,1
289
+ DA:89,1
290
+ DA:90,1
291
+ DA:91,1
292
+ DA:92,1
293
+ DA:93,1
294
+ DA:94,1
295
+ DA:95,1
296
+ DA:96,1
297
+ DA:97,1
298
+ DA:98,1
299
+ DA:99,1
300
+ DA:100,1
301
+ DA:101,1
302
+ DA:102,1
303
+ DA:103,1
304
+ DA:104,1
305
+ DA:105,1
306
+ DA:106,1
307
+ DA:107,1
308
+ DA:108,1
309
+ DA:109,1
310
+ DA:110,1
311
+ DA:111,1
312
+ DA:112,1
313
+ DA:113,1
314
+ DA:114,1
315
+ DA:115,1
316
+ DA:116,1
317
+ DA:117,1
318
+ DA:118,1
319
+ DA:119,1
320
+ DA:120,1
321
+ DA:121,1
322
+ DA:122,1
323
+ DA:123,1
324
+ DA:124,1
325
+ DA:125,1
326
+ DA:126,1
327
+ DA:127,1
328
+ DA:128,1
329
+ DA:129,1
330
+ DA:130,1
331
+ DA:131,1
332
+ LF:131
333
+ LH:131
334
+ BRF:0
335
+ BRH:0
336
+ end_of_record
@@ -1,6 +1,7 @@
1
1
  import { __decorate } from "tslib";
2
2
  import { LitElement, css, html } from 'lit';
3
3
  import { customElement, property, query } from 'lit/decorators.js';
4
+ import { formElementHeight } from '@operato/styles/form-element-heights.js';
4
5
  let CustomInput = class CustomInput extends LitElement {
5
6
  constructor() {
6
7
  super(...arguments);
@@ -74,7 +75,7 @@ CustomInput.styles = css `
74
75
  padding: 0 var(--spacing-small);
75
76
  min-width: var(--form-input-width, 300px);
76
77
  max-width: var(--form-input-width, 300px);
77
- height: var(--form-element-height-medium);
78
+ height: ${formElementHeight('--form-element-height-medium')};
78
79
  outline: var(--form-input-outline, none);
79
80
  color: var(--form-input-background-color, var(--md-sys-color-on-surface-variant));
80
81
  background-color: var(--form-input-background-color, var(--md-sys-color-surface-variant));
@@ -1 +1 @@
1
- {"version":3,"file":"ox-custom-input.js","sourceRoot":"","sources":["../../../src/components/ox-custom-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\n@customElement('ox-custom-input')\nexport class CustomInput extends LitElement {\n static styles = css`\n input {\n margin: auto 0;\n border: 1px solid var(--md-sys-color-outline);\n padding: 0 var(--spacing-small);\n min-width: var(--form-input-width, 300px);\n max-width: var(--form-input-width, 300px);\n height: var(--form-element-height-medium);\n outline: var(--form-input-outline, none);\n color: var(--form-input-background-color, var(--md-sys-color-on-surface-variant));\n background-color: var(--form-input-background-color, var(--md-sys-color-surface-variant));\n }\n `\n\n @property({ type: String }) name?: string\n @property({ type: String }) placeholder?: string\n @property({ type: String }) type?: string\n @property({ type: Object }) props: any\n @property({ type: Array }) attrs: any\n @property({ type: String }) valueField?: string\n @property({ type: Object }) value: any\n @property({ type: Boolean }) autofocus: boolean = false\n\n @query('input') input!: HTMLInputElement\n\n render() {\n return html`\n <input\n name=${this.name}\n placeholder=${this.placeholder}\n type=${this.type || 'text'}\n value=${this.value || ''}\n @input=${(e: InputEvent) => (this.value = (e.currentTarget as HTMLInputElement).value)}\n ?autofocus=${this.autofocus}\n />\n `\n }\n\n get checked() {\n return this.input.checked\n }\n\n set checked(checked) {\n this.input.checked = checked\n }\n\n firstUpdated() {\n this.dispatchEvent(new CustomEvent('load'))\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('props')) {\n if (this._isObject(this.props)) {\n for (let prop in this.props) {\n if (this.props[prop]) {\n this.input.setAttribute(prop, this.props[prop])\n this.setAttribute(prop, this.props[prop])\n }\n }\n }\n }\n\n if (changes.has('attrs')) {\n if (this.attrs && Array.isArray(this.attrs)) {\n this.attrs.forEach(attr => {\n this.input.setAttribute(attr, '')\n this.setAttribute(attr, '')\n })\n }\n }\n\n if (changes.has('value') && this._isObject(this.value)) {\n let value = this.value\n this.value = (this.valueField && value[this.valueField]) || value[Object.keys(value)[0]]\n }\n }\n\n _isObject(v: any) {\n return v instanceof Object && !Array.isArray(v)\n }\n\n focus() {\n this.input.focus()\n }\n\n select() {\n this.input.select()\n }\n\n blur() {\n this.input.blur()\n }\n\n checkValidity() {\n return this.input.checkValidity()\n }\n}\n"]}
1
+ {"version":3,"file":"ox-custom-input.js","sourceRoot":"","sources":["../../../src/components/ox-custom-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { formElementHeight } from '@operato/styles/form-element-heights.js'\n\n@customElement('ox-custom-input')\nexport class CustomInput extends LitElement {\n static styles = css`\n input {\n margin: auto 0;\n border: 1px solid var(--md-sys-color-outline);\n padding: 0 var(--spacing-small);\n min-width: var(--form-input-width, 300px);\n max-width: var(--form-input-width, 300px);\n height: ${formElementHeight('--form-element-height-medium')};\n outline: var(--form-input-outline, none);\n color: var(--form-input-background-color, var(--md-sys-color-on-surface-variant));\n background-color: var(--form-input-background-color, var(--md-sys-color-surface-variant));\n }\n `\n\n @property({ type: String }) name?: string\n @property({ type: String }) placeholder?: string\n @property({ type: String }) type?: string\n @property({ type: Object }) props: any\n @property({ type: Array }) attrs: any\n @property({ type: String }) valueField?: string\n @property({ type: Object }) value: any\n @property({ type: Boolean }) autofocus: boolean = false\n\n @query('input') input!: HTMLInputElement\n\n render() {\n return html`\n <input\n name=${this.name}\n placeholder=${this.placeholder}\n type=${this.type || 'text'}\n value=${this.value || ''}\n @input=${(e: InputEvent) => (this.value = (e.currentTarget as HTMLInputElement).value)}\n ?autofocus=${this.autofocus}\n />\n `\n }\n\n get checked() {\n return this.input.checked\n }\n\n set checked(checked) {\n this.input.checked = checked\n }\n\n firstUpdated() {\n this.dispatchEvent(new CustomEvent('load'))\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('props')) {\n if (this._isObject(this.props)) {\n for (let prop in this.props) {\n if (this.props[prop]) {\n this.input.setAttribute(prop, this.props[prop])\n this.setAttribute(prop, this.props[prop])\n }\n }\n }\n }\n\n if (changes.has('attrs')) {\n if (this.attrs && Array.isArray(this.attrs)) {\n this.attrs.forEach(attr => {\n this.input.setAttribute(attr, '')\n this.setAttribute(attr, '')\n })\n }\n }\n\n if (changes.has('value') && this._isObject(this.value)) {\n let value = this.value\n this.value = (this.valueField && value[this.valueField]) || value[Object.keys(value)[0]]\n }\n }\n\n _isObject(v: any) {\n return v instanceof Object && !Array.isArray(v)\n }\n\n focus() {\n this.input.focus()\n }\n\n select() {\n this.input.select()\n }\n\n blur() {\n this.input.blur()\n }\n\n checkValidity() {\n return this.input.checkValidity()\n }\n}\n"]}
@@ -1,4 +1,5 @@
1
1
  import { css } from 'lit';
2
+ import { formElementHeight } from '@operato/styles/form-element-heights.js';
2
3
  export const FilterStyles = css `
3
4
  :host {
4
5
  --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--md-sys-color-on-surface-variant));
@@ -19,7 +20,7 @@ export const FilterStyles = css `
19
20
  --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);
20
21
 
21
22
  --md-sys-color-on-primary: transparent;
22
- --form-element-height-medium: var(--form-element-height-small);
23
+ --form-element-height-medium: ${formElementHeight('--form-element-height-small')};
23
24
  }
24
25
 
25
26
  label {
@@ -40,7 +41,7 @@ export const FilterStyles = css `
40
41
  ox-input-search,
41
42
  [filter-input] {
42
43
  padding: var(--ox-filters-input-padding);
43
- height: var(--form-element-height-medium);
44
+ height: ${formElementHeight('--form-element-height-medium')};
44
45
  }
45
46
 
46
47
  ox-select,
@@ -1 +1 @@
1
- {"version":3,"file":"filter-styles.js","sourceRoot":"","sources":["../../../src/filters/filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8H9B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const FilterStyles = css`\n :host {\n --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--md-sys-color-on-surface-variant));\n\n --ox-filters-input-border: var(--input-border, 1px solid var(--md-sys-color-outline));\n --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--md-sys-color-primary));\n --ox-filters-input-font: var(--input-font, normal 14px var(--theme-font));\n --ox-filters-input-color: var(--input-color, var(--md-sys-color-on-surface));\n --ox-filters-input-focus-color: var(--input-focus-color, var(--md-sys-color-on-surface-variant));\n --ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));\n --ox-filters-label-color: var(--label-color, var(--md-sys-color-on-surface));\n --ox-filters-input-background-color: transparent;\n\n --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n --ox-filters-input-padding: 0 var(--spacing-small);\n\n --ox-select-padding: var(--ox-filters-input-padding);\n --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);\n\n --md-sys-color-on-primary: transparent;\n --form-element-height-medium: var(--form-element-height-small);\n }\n\n label {\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-primary);\n }\n\n span {\n text-transform: capitalize;\n }\n\n input::placeholder {\n color: var(--ox-filters-input-placeholder-color, var(--md-sys-color-on-surface-variant));\n opacity: 0.7;\n }\n\n input,\n ox-input-search,\n [filter-input] {\n padding: var(--ox-filters-input-padding);\n height: var(--form-element-height-medium);\n }\n\n ox-select,\n ox-input-search,\n input,\n [filter-input] {\n border: none;\n border-bottom: var(--ox-filters-input-border, var(--md-sys-color-outline));\n font: var(--ox-filters-input-font);\n color: var(--ox-filters-input-color, var(--md-sys-color-on-surface-variant));\n background-color: var(--ox-filters-input-background-color, transparent);\n vertical-align: middle;\n }\n\n ox-select:focus,\n input:focus,\n [filter-input]:focus {\n outline: none;\n border-bottom: var(--ox-filters-input-focus-border);\n color: var(--ox-filters-input-focus-color, var(--md-sys-color-primary));\n }\n\n ox-select {\n min-width: 90px;\n max-width: 170px;\n }\n\n ox-input-search {\n max-width: 150px;\n }\n\n input[type='number'] {\n max-width: 90px;\n }\n\n input[type*='date'],\n input[type*='time'],\n input[type='week'],\n input[type='month'] {\n max-width: 170px;\n }\n\n [filter-input] {\n min-width: 140px;\n max-width: 170px;\n }\n\n @media only screen and (max-width: 460px) {\n :host {\n --ox-filters-form-label-font: bold 13px var(--theme-font);\n --ox-filters-input-font: normal 16px var(--theme-font);\n }\n\n ox-input-barcode {\n max-width: unset;\n flex: 1;\n }\n\n ox-input-search {\n max-width: unset;\n }\n\n ox-select {\n max-width: unset;\n }\n\n ox-checkbox {\n max-width: unset;\n }\n\n input[type='number'] {\n max-width: unset;\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 flex: 1;\n }\n\n [readonly] {\n background-color: #f0f0f0;\n }\n }\n`\n"]}
1
+ {"version":3,"file":"filter-styles.js","sourceRoot":"","sources":["../../../src/filters/filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAA;AAE3E,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;oCAoBK,iBAAiB,CAAC,6BAA6B,CAAC;;;;;;;;;;;;;;;;;;;;;cAqBtE,iBAAiB,CAAC,8BAA8B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqF9D,CAAA","sourcesContent":["import { css } from 'lit'\n\nimport { formElementHeight } from '@operato/styles/form-element-heights.js'\n\nexport const FilterStyles = css`\n :host {\n --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--md-sys-color-on-surface-variant));\n\n --ox-filters-input-border: var(--input-border, 1px solid var(--md-sys-color-outline));\n --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--md-sys-color-primary));\n --ox-filters-input-font: var(--input-font, normal 14px var(--theme-font));\n --ox-filters-input-color: var(--input-color, var(--md-sys-color-on-surface));\n --ox-filters-input-focus-color: var(--input-focus-color, var(--md-sys-color-on-surface-variant));\n --ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));\n --ox-filters-label-color: var(--label-color, var(--md-sys-color-on-surface));\n --ox-filters-input-background-color: transparent;\n\n --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n --ox-filters-input-padding: 0 var(--spacing-small);\n\n --ox-select-padding: var(--ox-filters-input-padding);\n --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);\n\n --md-sys-color-on-primary: transparent;\n --form-element-height-medium: ${formElementHeight('--form-element-height-small')};\n }\n\n label {\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-primary);\n }\n\n span {\n text-transform: capitalize;\n }\n\n input::placeholder {\n color: var(--ox-filters-input-placeholder-color, var(--md-sys-color-on-surface-variant));\n opacity: 0.7;\n }\n\n input,\n ox-input-search,\n [filter-input] {\n padding: var(--ox-filters-input-padding);\n height: ${formElementHeight('--form-element-height-medium')};\n }\n\n ox-select,\n ox-input-search,\n input,\n [filter-input] {\n border: none;\n border-bottom: var(--ox-filters-input-border, var(--md-sys-color-outline));\n font: var(--ox-filters-input-font);\n color: var(--ox-filters-input-color, var(--md-sys-color-on-surface-variant));\n background-color: var(--ox-filters-input-background-color, transparent);\n vertical-align: middle;\n }\n\n ox-select:focus,\n input:focus,\n [filter-input]:focus {\n outline: none;\n border-bottom: var(--ox-filters-input-focus-border);\n color: var(--ox-filters-input-focus-color, var(--md-sys-color-primary));\n }\n\n ox-select {\n min-width: 90px;\n max-width: 170px;\n }\n\n ox-input-search {\n max-width: 150px;\n }\n\n input[type='number'] {\n max-width: 90px;\n }\n\n input[type*='date'],\n input[type*='time'],\n input[type='week'],\n input[type='month'] {\n max-width: 170px;\n }\n\n [filter-input] {\n min-width: 140px;\n max-width: 170px;\n }\n\n @media only screen and (max-width: 460px) {\n :host {\n --ox-filters-form-label-font: bold 13px var(--theme-font);\n --ox-filters-input-font: normal 16px var(--theme-font);\n }\n\n ox-input-barcode {\n max-width: unset;\n flex: 1;\n }\n\n ox-input-search {\n max-width: unset;\n }\n\n ox-select {\n max-width: unset;\n }\n\n ox-checkbox {\n max-width: unset;\n }\n\n input[type='number'] {\n max-width: unset;\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 flex: 1;\n }\n\n [readonly] {\n background-color: #f0f0f0;\n }\n }\n`\n"]}
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,25 @@
1
+ import { expect } from '@open-wc/testing';
2
+ import { CustomInput } from '../src/components/ox-custom-input.js';
3
+ import { FilterStyles } from '../src/filters/filter-styles.js';
4
+ /**
5
+ * Form inputs read the input height tokens with the @operato/styles default. Without a default, a
6
+ * page that does not load the shell theme would drop the whole declaration and the input would size
7
+ * itself.
8
+ */
9
+ const text = (styles) => (Array.isArray(styles) ? styles.flat(Infinity) : [styles])
10
+ .map(s => { var _a; return String((_a = s.cssText) !== null && _a !== void 0 ? _a : s); })
11
+ .join('\n');
12
+ describe('form element height', () => {
13
+ it('the filter form is a dense row: medium is re-pointed at small, both with defaults', () => {
14
+ const css = text(FilterStyles);
15
+ expect(css).to.contain('--form-element-height-medium: var(--form-element-height-small, 24px)');
16
+ expect(css).to.contain('height: var(--form-element-height-medium, 30px)');
17
+ expect(css).to.not.match(/var\(--form-element-height-[a-z]+\)/);
18
+ });
19
+ it('ox-custom-input reads the medium token with its default', () => {
20
+ const css = text(CustomInput.styles);
21
+ expect(css).to.contain('height: var(--form-element-height-medium, 30px)');
22
+ expect(css).to.not.match(/var\(--form-element-height-[a-z]+\)/);
23
+ });
24
+ });
25
+ //# 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,WAAW,EAAE,MAAM,sCAAsC,CAAA;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAE9D;;;;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,WAAC,OAAA,MAAM,CAAC,MAAC,CAA0B,CAAC,OAAO,mCAAI,CAAC,CAAC,CAAA,EAAA,CAAC;KAC1D,IAAI,CAAC,IAAI,CAAC,CAAA;AAEf,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,mFAAmF,EAAE,GAAG,EAAE;QAC3F,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,CAAA;QAC9B,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,sEAAsE,CAAC,CAAA;QAC9F,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,iDAAiD,CAAC,CAAA;QACzE,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,qCAAqC,CAAC,CAAA;IACjE,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,yDAAyD,EAAE,GAAG,EAAE;QACjE,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;QACpC,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,iDAAiD,CAAC,CAAA;QACzE,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,qCAAqC,CAAC,CAAA;IACjE,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import { expect } from '@open-wc/testing'\n\nimport { CustomInput } from '../src/components/ox-custom-input.js'\nimport { FilterStyles } from '../src/filters/filter-styles.js'\n\n/**\n * Form inputs read the input height tokens with the @operato/styles default. Without a default, a\n * page that does not load the shell theme would drop the whole declaration and the input would size\n * itself.\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 it('the filter form is a dense row: medium is re-pointed at small, both with defaults', () => {\n const css = text(FilterStyles)\n expect(css).to.contain('--form-element-height-medium: var(--form-element-height-small, 24px)')\n expect(css).to.contain('height: var(--form-element-height-medium, 30px)')\n expect(css).to.not.match(/var\\(--form-element-height-[a-z]+\\)/)\n })\n\n it('ox-custom-input reads the medium token with its default', () => {\n const css = text(CustomInput.styles)\n expect(css).to.contain('height: var(--form-element-height-medium, 30px)')\n expect(css).to.not.match(/var\\(--form-element-height-[a-z]+\\)/)\n })\n})\n"]}