fancy-ui-ts 1.1.0 → 1.1.1
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/dist/index.js +33 -17
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,9 +1,20 @@
|
|
|
1
|
-
var styles = `\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n \tfont-family: var(--fc-font-family);\n\t\tmax-width: var(--fc-combobox-max-width);\n\t}\n\n\t/* only show invalid style if the user has touched the field (blurred). the :invalid pseudo-class comes from \n\tinternals.setValidity() logic. */\n\n\t:host([touched]:invalid) .fc-input {\n background-color: var(--fc-combobox-bg-error);\n border-color: var(--fc-combobox-border-error);\n }\n\n :host([touched]:invalid) .fc-input:focus {\n box-shadow: 0 0 0 2px var(--fc-combobox-focus-ring-error);\n }\n\n\t.fc-input {\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\n\t\tpadding: var(--fc-combobox-padding);\n\t\tborder-radius: var(--fc-combobox-radius);\n\t\tbackground: var(--fc-combobox-bg);\n\t\tcolor: var(--fc-combobox-fg);\n\n\t\tborder: var(--fc-combobox-border-width) solid var(--fc-combobox-border);\n\t\tfont-size: var(--fc-font-size-md);\n\n\t\tbox-shadow: var(--fc-combobox-shadow);\n\t\ttransition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n\t}\n\n\t.fc-input::placeholder {\n\t\tcolor: var(--fc-combobox-placeholder);\n\t}\n\n\t.fc-input:hover {\n\t\tborder-color: var(--fc-combobox-border-hover);\n\t}\n\n\t.fc-input:focus {\n\t\tborder-color: var(--fc-combobox-border-focus);\n\t\toutline: none;\n\t\tbox-shadow: var(--fc-combobox-focus-ring);\n\t}\n\n\t.fc-options {\n\t\tposition: absolute;\n\t\ttop: calc(100% + 6px);\n\t\tleft: 0;\n\t\tright: 0;\n\t\tz-index: 1000;\n\t\tbackground: var(--fc-combobox-dropdown-bg, var(--fc-combobox-bg));\n\t\tborder: var(--fc-combobox-border-width) solid var(--fc-combobox-border);\n\t\tborder-radius: var(--fc-combobox-dropdown-radius, var(--fc-combobox-radius));\n\t\tpadding: var(--fc-combobox-dropdown-padding, calc(var(--fc-combobox-padding) - 5px));\n\t\tbox-shadow: var(--fc-combobox-dropdown-shadow);\n\t\tmax-height: var(--fc-combobox-dropdown-max-height, 240px);\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 4px;\n\t}\n\t\n\t.fc-options[hidden] {\n display: none !important;\n }\n\n\t:host([disabled]) {\n cursor: not-allowed;\n }\n\n\t.fc-input:disabled {\n\t\tbackground: var(--fc-combobox-bg-disabled);\n cursor: not-allowed;\n\t\tbox-shadow: none;\n }\n\n\t.fc-input:disabled::placeholder {\n\t\tcolor: var(--fc-combobox-placeholder-disabled);\n }\n\n\t.fc-input:disabled:hover {\n\t\tborder-color: var(--fc-combobox-border);\n\t}\n\n\t.fc-input:disabled:focus {\n\t\tborder-color: var(--fc-combobox-border);\n\t}\n`;
|
|
1
|
+
var styles = `\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n \tfont-family: var(--fc-font-family);\n\t\tmax-width: var(--fc-combobox-max-width);\n\t}\n\n\t/* only show invalid style if the user has touched the field (blurred). the :invalid pseudo-class comes from \n\tinternals.setValidity() logic. */\n\n\t:host([touched]:invalid) .fc-input {\n background-color: var(--fc-combobox-bg-error);\n border-color: var(--fc-combobox-border-error);\n }\n\n :host([touched]:invalid) .fc-input:focus {\n box-shadow: 0 0 0 2px var(--fc-combobox-focus-ring-error);\n }\n\n\t.fc-input {\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\n\t\tpadding: var(--fc-combobox-padding);\n\t\tborder-radius: var(--fc-combobox-radius);\n\t\tbackground: var(--fc-combobox-bg);\n\t\tcolor: var(--fc-combobox-fg);\n\n\t\tborder: var(--fc-combobox-border-width) solid var(--fc-combobox-border);\n\t\tfont-size: var(--fc-font-size-md);\n\n\t\tbox-shadow: var(--fc-combobox-shadow);\n\t\ttransition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n\t}\n\n\t.fc-input::placeholder {\n\t\tcolor: var(--fc-combobox-placeholder);\n\t}\n\n\t.fc-input:hover {\n\t\tborder-color: var(--fc-combobox-border-hover);\n\t}\n\n\t.fc-input:focus {\n\t\tborder-color: var(--fc-combobox-border-focus);\n\t\toutline: none;\n\t\tbox-shadow: var(--fc-combobox-focus-ring);\n\t}\n\n\t.fc-options {\n\t\tposition: absolute;\n\t\ttop: calc(100% + 6px);\n\t\tleft: 0;\n\t\tright: 0;\n\t\tz-index: 1000;\n\t\tbackground: var(--fc-combobox-dropdown-bg, var(--fc-combobox-bg));\n\t\tborder: var(--fc-combobox-border-width) solid var(--fc-combobox-border);\n\t\tborder-radius: var(--fc-combobox-dropdown-radius, var(--fc-combobox-radius));\n\t\tpadding: var(--fc-combobox-dropdown-padding, calc(var(--fc-combobox-padding) - 5px));\n\t\tbox-shadow: var(--fc-combobox-dropdown-shadow);\n\t\tmax-height: var(--fc-combobox-dropdown-max-height, 240px);\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 4px;\n\t}\n\n\t.fc-options.opens-up {\n top: auto;\n bottom: calc(100% + 6px);\n }\n\t\n\t.fc-options[hidden] {\n display: none !important;\n }\n\n\t:host([disabled]) {\n cursor: not-allowed;\n }\n\n\t.fc-input:disabled {\n\t\tbackground: var(--fc-combobox-bg-disabled);\n cursor: not-allowed;\n\t\tbox-shadow: none;\n }\n\n\t.fc-input:disabled::placeholder {\n\t\tcolor: var(--fc-combobox-placeholder-disabled);\n }\n\n\t.fc-input:disabled:hover {\n\t\tborder-color: var(--fc-combobox-border);\n\t}\n\n\t.fc-input:disabled:focus {\n\t\tborder-color: var(--fc-combobox-border);\n\t}\n`;
|
|
2
2
|
|
|
3
3
|
var template = document.createElement("template");
|
|
4
4
|
|
|
5
5
|
template.innerHTML = `\n\t<style>${styles}</style>\n\n\t<input \n\t\tclass="fc-input"\n\t\ttype="text" \n\t\trole="combobox"\n\t\taria-autocomplete="list"\n\t\taria-expanded="false"\n\t\taria-haspopup="listbox"\n\t\taria-controls="fc-options"\n\t\tpart="input"\n\t\tautocomplete="off"\n\t/>\n\n\t<div \n\t\tpart="options" \n\t\tclass="fc-options" \n\t\trole="listbox"\n\t\thidden\n\t>\n\t\t<slot></slot>\n\t</div>\n\t\n`;
|
|
6
6
|
|
|
7
|
+
var calculateBottomAvaliableSpace = element => {
|
|
8
|
+
const rect = element.getBoundingClientRect();
|
|
9
|
+
const viewportHeight = window.innerHeight;
|
|
10
|
+
return viewportHeight - rect.bottom;
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
var calculateTopAvaliableSpace = element => {
|
|
14
|
+
const rect = element.getBoundingClientRect();
|
|
15
|
+
return rect.top;
|
|
16
|
+
};
|
|
17
|
+
|
|
7
18
|
var FcCombobox = class extends HTMLElement {
|
|
8
19
|
constructor() {
|
|
9
20
|
super();
|
|
@@ -89,19 +100,6 @@ var FcCombobox = class extends HTMLElement {
|
|
|
89
100
|
if (!this.inputEl) {
|
|
90
101
|
return;
|
|
91
102
|
}
|
|
92
|
-
const options = this.querySelectorAll("fc-option");
|
|
93
|
-
options.forEach(option => {
|
|
94
|
-
const selected = option.value === newValue;
|
|
95
|
-
option.selected = selected;
|
|
96
|
-
option.hidden = !selected;
|
|
97
|
-
option.active = false;
|
|
98
|
-
if (selected) {
|
|
99
|
-
this.inputEl.value = option.label;
|
|
100
|
-
}
|
|
101
|
-
});
|
|
102
|
-
if (this.inputEl.value === "") {
|
|
103
|
-
this.inputEl.value = newValue;
|
|
104
|
-
}
|
|
105
103
|
this.syncValidity();
|
|
106
104
|
}
|
|
107
105
|
get label() {
|
|
@@ -256,12 +254,23 @@ var FcCombobox = class extends HTMLElement {
|
|
|
256
254
|
this._value = restoredValue;
|
|
257
255
|
this.internals.setFormValue(restoredValue);
|
|
258
256
|
const options = this.querySelectorAll("fc-option");
|
|
257
|
+
let foundMatch = false;
|
|
259
258
|
options.forEach(option => {
|
|
260
|
-
|
|
259
|
+
const selected = option.value === this._value;
|
|
260
|
+
option.selected = selected;
|
|
261
|
+
option.hidden = !selected;
|
|
262
|
+
if (selected) {
|
|
261
263
|
this.inputEl.value = option.label;
|
|
262
|
-
|
|
264
|
+
foundMatch = true;
|
|
263
265
|
}
|
|
264
266
|
});
|
|
267
|
+
if (!foundMatch && this.inputEl.value === "") {
|
|
268
|
+
this.inputEl.value = this._value;
|
|
269
|
+
options.forEach(option => {
|
|
270
|
+
const match = option.label.includes(this._value);
|
|
271
|
+
option.hidden = !match;
|
|
272
|
+
});
|
|
273
|
+
}
|
|
265
274
|
this.syncValidity();
|
|
266
275
|
}
|
|
267
276
|
}
|
|
@@ -393,7 +402,6 @@ var FcCombobox = class extends HTMLElement {
|
|
|
393
402
|
const selected = option.value === this._value;
|
|
394
403
|
option.selected = selected;
|
|
395
404
|
option.hidden = !selected;
|
|
396
|
-
option.active = false;
|
|
397
405
|
if (selected) {
|
|
398
406
|
this.inputEl.value = option.label;
|
|
399
407
|
foundMatch = true;
|
|
@@ -401,6 +409,10 @@ var FcCombobox = class extends HTMLElement {
|
|
|
401
409
|
});
|
|
402
410
|
if (!foundMatch && this.inputEl.value === "") {
|
|
403
411
|
this.inputEl.value = this._value;
|
|
412
|
+
options.forEach(option => {
|
|
413
|
+
const match = option.label.includes(this._value);
|
|
414
|
+
option.hidden = !match;
|
|
415
|
+
});
|
|
404
416
|
}
|
|
405
417
|
this.syncValidity();
|
|
406
418
|
}
|
|
@@ -492,9 +504,13 @@ var FcCombobox = class extends HTMLElement {
|
|
|
492
504
|
}
|
|
493
505
|
const dropdown = this.dropdownEl;
|
|
494
506
|
if (show) {
|
|
507
|
+
const spaceBelow = calculateBottomAvaliableSpace(this.inputEl);
|
|
508
|
+
const spaceAbove = calculateTopAvaliableSpace(this.inputEl);
|
|
495
509
|
dropdown.hidden = false;
|
|
496
510
|
this.setAttribute("open", "true");
|
|
497
511
|
this.inputEl.setAttribute("aria-expanded", "true");
|
|
512
|
+
const shouldOpenUp = spaceBelow < dropdown.clientHeight && spaceAbove > spaceBelow;
|
|
513
|
+
dropdown.classList.toggle("opens-up", shouldOpenUp);
|
|
498
514
|
return;
|
|
499
515
|
}
|
|
500
516
|
this.dropdownEl.hidden = true;
|