@dnncommunity/dnn-elements 0.24.2-beta.1 → 0.24.3-beta.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/cjs/dnn-autocomplete.cjs.entry.js +12 -4
- package/dist/cjs/dnn-autocomplete.cjs.entry.js.map +1 -1
- package/dist/cjs/dnn.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/dnn-autocomplete/dnn-autocomplete.js +15 -4
- package/dist/collection/components/dnn-autocomplete/dnn-autocomplete.js.map +1 -1
- package/dist/dnn/dnn.esm.js +1 -1
- package/dist/dnn/dnn.esm.js.map +1 -1
- package/dist/dnn/p-a9d8a942.entry.js +2 -0
- package/dist/dnn/p-a9d8a942.entry.js.map +1 -0
- package/dist/esm/dnn-autocomplete.entry.js +12 -4
- package/dist/esm/dnn-autocomplete.entry.js.map +1 -1
- package/dist/esm/dnn.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/dnn-autocomplete/dnn-autocomplete.d.ts +1 -0
- package/package.json +4 -4
- package/dist/dnn/p-f317208f.entry.js +0 -2
- package/dist/dnn/p-f317208f.entry.js.map +0 -1
|
@@ -98,6 +98,11 @@ const DnnAutocomplete = class {
|
|
|
98
98
|
this.valid = false;
|
|
99
99
|
this.fieldset.setValidity(false, message);
|
|
100
100
|
}
|
|
101
|
+
handleValueChange(newValue) {
|
|
102
|
+
this.displayValue = newValue;
|
|
103
|
+
// Find the index of the selected item
|
|
104
|
+
this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);
|
|
105
|
+
}
|
|
101
106
|
/** Listener for mouse down event */
|
|
102
107
|
handleClick(e) {
|
|
103
108
|
const path = e.composedPath();
|
|
@@ -262,15 +267,18 @@ const DnnAutocomplete = class {
|
|
|
262
267
|
}
|
|
263
268
|
render() {
|
|
264
269
|
var _a;
|
|
265
|
-
return (index.h(index.Host, { key: '
|
|
270
|
+
return (index.h(index.Host, { key: 'e4721cc0e2110853787b552f1353c94d8483287b', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, index.h("dnn-fieldset", { key: '0881da2521817503d78f15cd1fd9b777654b108d', ref: el => this.fieldset = el, invalid: !this.valid, focused: this.focused, label: `${(_a = this.label) !== null && _a !== void 0 ? _a : ""}${this.required ? " *" : ""}`, helpText: this.helpText, id: this.labelId, disabled: this.disabled, floatLabel: this.shouldLabelFloat() }, index.h("div", { key: 'ac5590e129b624f1ba1c012448897515017db086', class: "inner-container" }, index.h("input", { key: '779f3a6e00dff6319b2d94c6bb903e9b495d1746', ref: (el) => this.inputField = el, name: this.name, type: "search", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.focused.toString(), "aria-activedescendant": this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined, disabled: this.disabled, required: this.required, autoComplete: this.autocomplete, value: this.displayValue, onFocus: () => {
|
|
266
271
|
this.searchQueryChanged.emit(this.value || "");
|
|
267
272
|
this.focused = true;
|
|
268
|
-
}, onBlur: () => this.handleBlur(), onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId, onKeyDown: e => this.handleKeyDown(e) }), index.h("ul", { key: '
|
|
269
|
-
index.h("div", { key: '
|
|
270
|
-
index.h("div", { key: '
|
|
273
|
+
}, onBlur: () => this.handleBlur(), onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId, onKeyDown: e => this.handleKeyDown(e) }), index.h("ul", { key: '32448159bf989944d974bdba2ca42cf30f089272', class: this.focused && this.suggestions.length > 0 ? "show" : "", role: "listbox", ref: el => this.suggestionsContainer = el, onScroll: () => this.handleSuggestionsScroll() }, this.suggestions.map((suggestion, index$1) => (index.h("li", { id: `option-${index$1}`, role: "option", "aria-selected": this.selectedIndex == index$1, class: this.selectedIndex == index$1 ? "selected" : "", onClick: e => this.selectItem(e, index$1) }, this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label))), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&
|
|
274
|
+
index.h("div", { key: 'd4bee8ab76bb9058740f1fb6a0faf06e9446f859', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
|
|
275
|
+
index.h("div", { key: '54539c1e08aa3cd521306a942df62835099f3560', style: { height: `${this.getVirtualScrollHeight()}px` } })), index.h("svg", { key: '43a4b159fcd84253003375dbf5cf95818539b410', onClick: () => this.handleDropdownClick(), class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, index.h("path", { key: 'c752ed998df5b38322b13f8636f172c645f2ca8a', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
|
|
271
276
|
}
|
|
272
277
|
static get formAssociated() { return true; }
|
|
273
278
|
get element() { return index.getElement(this); }
|
|
279
|
+
static get watchers() { return {
|
|
280
|
+
"value": ["handleValueChange"]
|
|
281
|
+
}; }
|
|
274
282
|
};
|
|
275
283
|
__decorate([
|
|
276
284
|
debounce.Debounce(300)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dnn-autocomplete.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,kBAAkB,GAAG,klDAAklD,CAAC;AAC9mD,8BAAe,kBAAkB;;;;;;;;;;;;MCSpB,eAAe;;;;;;;;;;;;;;;QAwLT,2BAAsB,GAAG;YACxC,IAAI,UAAU,GAAG,IAAI,CAAC,2BAA2B,EAAE,CAAC;YACpD,qBAAqB,CAAC;gBACpB,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;aACjC,CAAC,CAAC;;;YAIH,IAAI,UAAU,GAAG,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;YACrF,MAAM,GAAG,GAAG,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,CAAC;YAC5E,MAAM,QAAQ,GAAG,UAAU,GAAG,CAAC,GAAG,UAAU,GAAG,CAAC,GAAG,GAAG,CAAC;YACvD,IAAI,QAAQ,EAAE;gBACZ,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC;aAChD;iBACI;gBACH,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC;aACnD;;YAGD,IAAI,QAAQ,EAAC;gBACX,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,UAAU,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC;aACzE;iBACI;gBACH,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC;aAC1G;YAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;SAC/B,CAAA;;;;;;;2BA9LkD,EAAE;;;sCAeZ,IAAI;4BAKd,KAAK;uBAiDjB,KAAK;qBACP,IAAI;;;mCAGU,KAAK;6BACX,CAAC;4BACM,EAAE;;;IA9BlC,MAAM,aAAa;QACjB,IAAI,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;QAC/C,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;SACrE;QACD,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACpC,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;KACjC;;IAID,MAAM,iBAAiB,CAAC,OAAe;QACrC,IAAI,OAAO,IAAI,SAAS,IAAI,OAAO,IAAI,EAAE,EAAE;YACzC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;YACtC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAChC,OAAO;SACR;QAED,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;KAC3C;;IAeD,WAAW,CAAC,CAAa;QACvB,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC;QAC9B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAChC;YACE,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAC;YAC3E,IAAI,CAAC,sBAAsB,EAAE,CAAC;SAC/B;KACF;;IAQD,iBAAiB;QACf,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;QACtC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;KACjC;IAEO,WAAW,CAAC,CAAQ;QAC1B,MAAM,UAAU,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;QACxD,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;QAC/B,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC;QACxB,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;QAC5C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACjC,IAAI,CAAC,wBAAwB,CAAC,UAAU,CAAC,CAAC;KAC3C;IAGO,wBAAwB,CAAC,KAAa;QAC5C,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACrC;IAEO,aAAa;QACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,IAAI,CAAC,qBAAqB,IAAI,SAAS,EAAE;YAC3C,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC;SAChE;KACF;IAEO,YAAY;QAClB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClC,IAAI,IAAI,CAAC,IAAI,IAAI,SAAS,EAAE;YAC1B,IAAI,IAAI,GAAG,IAAI,QAAQ,EAAE,CAAC;YAC1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC9C,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;SACnC;KACF;;IAGO,gBAAgB;QACtB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,KAAK,CAAC;SACd;QAED,IAAI,IAAI,CAAC,KAAK,IAAI,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE;YAC/C,OAAO,KAAK,CAAC;SACd;QAED,OAAO,IAAI,CAAC;KACb;IAEO,2BAA2B;QACjC,MAAM,eAAe,GAAG,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACzE,IAAI,WAAW,GAAG,CAAC,CAAC;QACpB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,eAAe,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC/C,WAAW,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;SAChD;QACD,OAAO,WAAW,GAAG,eAAe,CAAC,MAAM,CAAC;KAC7C;IA+BO,aAAa,CAAC,CAAgB;;QACpC,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE;YACzB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,aAAa,IAAI,SAAS,EAAE;gBACnC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;aACxB;iBAAM;gBACL,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;aACpF;SACF;QACD,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,EAAE;YACvB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,aAAa,IAAI,SAAS,EAAE;gBACnC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;aAClD;iBAAM;gBACL,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;aAC1D;SACF;QACD,IAAI,CAAC,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,0CAAE,KAAK,KAAI,IAAI,CAAC,KAAK,CAAC;QACvE,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACrB,IAAI,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACxD,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC;YAChC,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC;YAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;YAC3C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;QACD,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAC;YAClB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAEO,UAAU,CAAC,CAAQ,EAAE,KAAa;QACxC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC;QACxD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC;QAC/D,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAC1C,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,CAAA;KACnE;IAEO,sBAAsB;QAC5B,MAAM,UAAU,GAAG,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACtD,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;QACtE,OAAO,UAAU,GAAG,aAAa,CAAC;KACnC;IAEO,mBAAmB;QACzB,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3C;IAGO,uBAAuB;QAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,CAAC;QAC5C,MAAM,gBAAgB,GAAG,SAAS,CAAC,SAAS,CAAC;;QAG7C,IAAI,gBAAgB,GAAG,IAAI,CAAC,aAAa,EAAE;YACzC,MAAM,UAAU,GAAG,SAAS,CAAC,aAAa,CAAC,UAAU,CAAmB,CAAC;YAEzE,IAAI,UAAU,IAAI,SAAS,EAAE;gBAC3B,IAAI,CAAC,aAAa,GAAG,gBAAgB,CAAC;gBACtC,OAAO;aACR;YAED,MAAM,kBAAkB,GAAG,UAAU,CAAC,SAAS,CAAC;YAChD,MAAM,gBAAgB,GAAG,UAAU,CAAC,YAAY,CAAC;YACjD,MAAM,gBAAgB,GAAG,kBAAkB,GAAG,gBAAgB,CAAC;;YAG/D,MAAM,aAAa,GAAG,gBAAgB,GAAG,SAAS,CAAC,YAAY,CAAC;;YAGhE,IAAI,aAAa,GAAG,gBAAgB,EAAE;;gBAEpC,SAAS,CAAC,SAAS,GAAG,gBAAgB,GAAG,SAAS,CAAC,YAAY,CAAC;aACjE;;YAGD,IAAI,CAAC,sBAAsB,EAAE,CAAC;SAC/B;;QAGD,IAAI,CAAC,aAAa,GAAG,gBAAgB,CAAC;KACvC;IAGO,sBAAsB;QAC5B,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,CAAC;QAE5C,MAAM,UAAU,GAAG,SAAS,CAAC,aAAa,CAAC,UAAU,CAAmB,CAAC;QACzE,IAAI,UAAU,IAAI,SAAS;YAAE,OAAO;QAEpC,MAAM,cAAc,GAAG,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,YAAY,CAAC;QACpE,MAAM,kBAAkB,GAAG,UAAU,CAAC,SAAS,CAAC;;QAGhD,IAAI,kBAAkB,GAAG,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE;YACrE,MAAM,SAAS,GAA2B;gBACxC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK;aAClC,CAAC;YACF,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACpC;KACF;IAED,UAAU;QACR,IAAI,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;QAC/C,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;QACvE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;KACzF;IAED,MAAM;;QACJ,QACEA,QAACC,UAAI,qDACH,QAAQ,EAAE,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAC,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,EACtC,MAAM,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,IAEpCD,2EACE,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,EAC7B,OAAO,EAAE,CAAC,IAAI,CAAC,KAAK,EACpB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,EAAE,EAAE,EACxD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAEnCA,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,oEACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAE,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,mBACD,SAAS,mBACR,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,2BACf,IAAI,CAAC,aAAa,KAAK,SAAS,GAAG,UAAU,IAAI,CAAC,aAAa,EAAE,GAAG,SAAS,EACpG,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,OAAO,EAAE;gBACP,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;gBAC/C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;aACrB,EACD,MAAM,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAC/B,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,SAAS,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,EACrC,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,qBAClB,IAAI,CAAC,OAAO,EAC7B,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GACrC,EACFA,iEACE,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,MAAM,GAAG,EAAE,EAChE,IAAI,EAAC,SAAS,EACd,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,oBAAoB,GAAG,EAAE,EACzC,QAAQ,EAAE,MAAM,IAAI,CAAC,uBAAuB,EAAE,IAE7C,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAEE,OAAK,MACtCF,gBACE,EAAE,EAAE,UAAUE,OAAK,EAAE,EACrB,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,aAAa,IAAIA,OAAK,EAC1C,KAAK,EAAE,IAAI,CAAC,aAAa,IAAIA,OAAK,GAAG,UAAU,GAAG,EAAE,EACpD,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,EAAEA,OAAK,CAAC,IAEtC,IAAI,CAAC,gBAAgB,IAAI,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC,KAAK,CACvF,CACN,CAAC,EACD,IAAI,CAAC,gBAAgB,IAAI,SAAS,IAAI,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM;YACpFF,kEAAK,KAAK,EAAC,SAAS,GACd,EAEP,IAAI,CAAC,gBAAgB,IAAI,SAAS,IAAI,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,IAAI,IAAI,CAAC,mBAAmB;YAChHA,kEAAK,KAAK,EAAE,EAAC,MAAM,EAAE,GAAG,IAAI,CAAC,sBAAsB,EAAE,IAAI,EAAC,GACpD,CAEL,EACLA,kEACE,OAAO,EAAE,MAAM,IAAI,CAAC,mBAAmB,EAAE,EACzC,KAAK,EAAC,cAAc,EACpB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,gBAAgB,IACxBA,mEAAM,CAAC,EAAC,uDAAuD,GAAE,CAC7D,CACF,CACO,CACV,EACP;KACH;;;;AAtQO;IADPG,iBAAQ,CAAC,GAAG,CAAC;+DAGb;AA0HO;IADPA,iBAAQ,CAAC,GAAG,CAAC;8DAiCb;AAGO;IADPA,iBAAQ,EAAE;6DAiBV;;;;;","names":["h","Host","index","Debounce"],"sources":["src/components/dnn-autocomplete/dnn-autocomplete.scss?tag=dnn-autocomplete&encapsulation=shadow","src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n /** @prop --foreground-color: Defines the foreground color. */\n --foreground-color: var(--dnn-color-foreground, #000);\n\n /** @prop --background-color: Defines the background color. */\n --background-color: var(--dnn-color-background, #fff);\n\n /** @prop --focus-color: Defines the color when the component is focused. */\n --focus-color: var(--dnn-color-primary, #3792ED);\n\n /** @prop --danger-color: Defines the danger color used for invalid data. */\n --danger-color: var(--dnn-color-danger, #900);\n\n /** @prop --control-radius: Defines the radius for the control corners. */\n --control-radius: var(--dnn-controls-radius, 3px);\n}\n\ndnn-fieldset{\n width: 100%;\n}\n\n@keyframes shift {\n 0% {\n background-position: 0% 0;\n }\n 50% {\n background-position: 100% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n.inner-container{\n display: flex;\n justify-content: space-between;\n position: relative;\n width: 100%;\n\n input {\n border: none;\n outline: none;\n background-color: transparent;\n color: var(--foreground-color);\n text-align: var(--input-text-align);\n width: 100%;\n }\n\n svg.chevron-down{\n height: 1rem;\n width: auto;\n transform: scale(1.2);\n cursor: pointer;\n }\n\n ul{\n position: absolute;\n border: 1px solid lightgray;\n margin: 0;\n padding: var(--dnn-controls-radius, 3px) 0;\n overflow-y: auto;\n width: 100%;\n box-shadow: 2px 2px 6px 1px rgb(0 0 0 / 30%);\n background-color: var(--dnn-color-background, white);\n border-radius: var(--dnn-controls-radius, 3px);\n z-index: 2;\n display: none;\n scroll-behavior: smooth;\n &.show{\n display: block;\n }\n li {\n display: block;\n list-style-type: none;\n cursor: pointer;\n padding: 0 0.5rem;\n &.selected {\n background-color: lightgray;\n }\n &:hover {\n background-color: lightgray;\n }\n }\n .loading {\n width: 100%;\n height: 0.5rem;\n border-radius: 0.5rem;\n background: linear-gradient(\n to right,\n var(--background-color) 0%,\n var(--foreground-color) 50%,\n var(--background-color) 100%);\n background-size: 200% 100%;\n animation: shift 2s linear infinite;\n width: 75%;\n margin: 0 auto;\n opacity: 0.5;\n }\n }\n}\n","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n \n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions: number;\n \n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n /** Defines the type of automatic completion the browser could use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete: string = \"off\";\n\n @Element() element: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n this.fieldset.setValidity(true, \"\");\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n @State() selectedIndex: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n @State() displayValue: string = \"\";\n \n /** attacth the internals for form validation */\n @AttachInternals() internals: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n \n componentDidRender(){\n if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n this.adjustDropdownPosition();\n }\n }\n\n private inputField!: HTMLInputElement;\n private suggestionsContainer: HTMLUListElement;\n private labelId: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n \n private handleInput(e: Event) {\n const inputValue = (e.target as HTMLInputElement).value;\n this.displayValue = inputValue;\n this.value = inputValue;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(inputValue);\n this.handleSearchQueryChanged(inputValue);\n }\n\n @Debounce(300)\n private handleSearchQueryChanged(value: string) {\n this.searchQueryChanged.emit(value);\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined) {\n this.customValidityMessage = this.inputField.validationMessage;\n }\n }\n\n private handleChange() {\n this.valueChange.emit(this.value);\n if (this.name != undefined) {\n var data = new FormData();\n data.append(this.name, this.value.toString());\n this.internals.setFormValue(data);\n }\n }\n\n /** Check if the label should float */\n private shouldLabelFloat(): boolean {\n if (this.focused) {\n return false;\n }\n\n if (this.value != undefined && this.value != \"\") {\n return false;\n }\n\n return true;\n }\n\n private findAverageSuggestionHeight(): number {\n const suggestionItems = this.suggestionsContainer.querySelectorAll(\"li\");\n var totalHeight = 0;\n for (let i = 0; i < suggestionItems.length; i++) {\n totalHeight += suggestionItems[i].clientHeight;\n }\n return totalHeight / suggestionItems.length;\n }\n\n private readonly adjustDropdownPosition = () => {\n var itemHeight = this.findAverageSuggestionHeight();\n requestAnimationFrame(() => {\n this.positionInitialized = true;\n });\n\n // If we can fit 3 items below the input and there is still 3em left, we show the dropdown under.\n // Otherwise, we show it above.\n var spaceBelow = window.innerHeight - this.inputField.getBoundingClientRect().bottom;\n const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);\n const fitsDown = spaceBelow > 3 * itemHeight + 3 * rem;\n if (fitsDown) {\n this.suggestionsContainer.style.top = \"1.2rem\";\n }\n else {\n this.suggestionsContainer.style.bottom = \"1.2rem\";\n }\n\n // Set the max height to not overflow the screen.\n if (fitsDown){\n this.suggestionsContainer.style.maxHeight = `${spaceBelow - 3 * rem}px`;\n }\n else {\n this.suggestionsContainer.style.maxHeight = `${this.inputField.getBoundingClientRect().top - 3 * rem}px`;\n }\n\n this.checkIfMoreItemsNeeded();\n }\n\n private handleKeyDown(e: KeyboardEvent): void {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = 0;\n } else {\n this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n }\n }\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = this.suggestions.length - 1;\n } else {\n this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n }\n }\n this.value = this.suggestions[this.selectedIndex]?.value || this.value;\n if (e.key === \"Enter\") {\n var selectedItem = this.suggestions[this.selectedIndex];\n this.value = selectedItem.value;\n this.inputField.value = selectedItem.label;\n this.itemSelected.emit(selectedItem.value);\n this.focused = false;\n }\n if (e.key === \"Tab\"){\n this.focused = false;\n }\n }\n\n private selectItem(e: Event, index: number): void {\n e.preventDefault();\n e.stopPropagation();\n this.selectedIndex = index;\n this.value = this.suggestions[this.selectedIndex].value;\n this.displayValue = this.suggestions[this.selectedIndex].label;\n this.inputField.value = this.displayValue;\n this.checkValidity();\n this.focused = false;\n this.itemSelected.emit(this.suggestions[this.selectedIndex].value)\n }\n\n private getVirtualScrollHeight(): number {\n const itemHeight = this.findAverageSuggestionHeight();\n const upcomingItems = this.totalSuggestions - this.suggestions.length;\n return itemHeight * upcomingItems;\n }\n\n private handleDropdownClick(): void {\n this.handleSearchQueryChanged(this.value);\n }\n\n @Debounce(100)\n private handleSuggestionsScroll(): void {\n const container = this.suggestionsContainer;\n const currentScrollTop = container.scrollTop;\n\n // Only act if we are scrolling down\n if (currentScrollTop > this.lastScrollTop) {\n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n if (loadingDiv == undefined) {\n this.lastScrollTop = currentScrollTop;\n return;\n }\n\n const loadingDivPosition = loadingDiv.offsetTop;\n const loadingDivHeight = loadingDiv.offsetHeight;\n const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n // Calculate the visible bottom of the scroll container\n const visibleBottom = currentScrollTop + container.clientHeight;\n\n // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n if (visibleBottom > loadingDivBottom) {\n // Adjust scrollTop so it doesn't scroll past the loading div\n container.scrollTop = loadingDivBottom - container.clientHeight;\n }\n\n // Check if more items are needed based on the position of the loading div\n this.checkIfMoreItemsNeeded();\n }\n\n // Update the last scroll position\n this.lastScrollTop = currentScrollTop;\n }\n\n @Debounce()\n private checkIfMoreItemsNeeded() {\n const container = this.suggestionsContainer;\n \n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n if (loadingDiv == undefined) return; // Exit if there's no loading div\n \n const scrollPosition = container.scrollTop + container.clientHeight;\n const loadingDivPosition = loadingDiv.offsetTop;\n \n // Check if the loading div is within the threshold of becoming visible\n if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n const eventArgs: NeedMoreItemsEventArgs = {\n searchTerm: this.inputField.value,\n };\n this.needMoreItems.emit(eventArgs);\n }\n }\n\n handleBlur(): void {\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n value={this.displayValue}\n onFocus={() => {\n this.searchQueryChanged.emit(this.value || \"\");\n this.focused = true;\n }}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n <ul\n class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n role=\"listbox\"\n ref={el => this.suggestionsContainer = el}\n onScroll={() => this.handleSuggestionsScroll()}\n >\n {this.suggestions.map((suggestion, index) => (\n <li\n id={`option-${index}`}\n role=\"option\"\n aria-selected={this.selectedIndex == index}\n class={this.selectedIndex == index ? \"selected\" : \"\"}\n onClick={e => this.selectItem(e, index)}\n >\n {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n </li>\n ))}\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n <div class=\"loading\">\n </div>\n }\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n </div>\n }\n </ul>\n <svg\n onClick={() => this.handleDropdownClick()}\n class=\"chevron-down\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -960 960 960\">\n <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n </svg>\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n}"],"version":3}
|
|
1
|
+
{"file":"dnn-autocomplete.entry.cjs.js","mappings":"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","names":["h","Host","index","Debounce"],"sources":["src/components/dnn-autocomplete/dnn-autocomplete.scss?tag=dnn-autocomplete&encapsulation=shadow","src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n /** @prop --foreground-color: Defines the foreground color. */\n --foreground-color: var(--dnn-color-foreground, #000);\n\n /** @prop --background-color: Defines the background color. */\n --background-color: var(--dnn-color-background, #fff);\n\n /** @prop --focus-color: Defines the color when the component is focused. */\n --focus-color: var(--dnn-color-primary, #3792ED);\n\n /** @prop --danger-color: Defines the danger color used for invalid data. */\n --danger-color: var(--dnn-color-danger, #900);\n\n /** @prop --control-radius: Defines the radius for the control corners. */\n --control-radius: var(--dnn-controls-radius, 3px);\n}\n\ndnn-fieldset{\n width: 100%;\n}\n\n@keyframes shift {\n 0% {\n background-position: 0% 0;\n }\n 50% {\n background-position: 100% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n.inner-container{\n display: flex;\n justify-content: space-between;\n position: relative;\n width: 100%;\n\n input {\n border: none;\n outline: none;\n background-color: transparent;\n color: var(--foreground-color);\n text-align: var(--input-text-align);\n width: 100%;\n }\n\n svg.chevron-down{\n height: 1rem;\n width: auto;\n transform: scale(1.2);\n cursor: pointer;\n }\n\n ul{\n position: absolute;\n border: 1px solid lightgray;\n margin: 0;\n padding: var(--dnn-controls-radius, 3px) 0;\n overflow-y: auto;\n width: 100%;\n box-shadow: 2px 2px 6px 1px rgb(0 0 0 / 30%);\n background-color: var(--dnn-color-background, white);\n border-radius: var(--dnn-controls-radius, 3px);\n z-index: 2;\n display: none;\n scroll-behavior: smooth;\n &.show{\n display: block;\n }\n li {\n display: block;\n list-style-type: none;\n cursor: pointer;\n padding: 0 0.5rem;\n &.selected {\n background-color: lightgray;\n }\n &:hover {\n background-color: lightgray;\n }\n }\n .loading {\n width: 100%;\n height: 0.5rem;\n border-radius: 0.5rem;\n background: linear-gradient(\n to right,\n var(--background-color) 0%,\n var(--foreground-color) 50%,\n var(--background-color) 100%);\n background-size: 200% 100%;\n animation: shift 2s linear infinite;\n width: 75%;\n margin: 0 auto;\n opacity: 0.5;\n }\n }\n}\n","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen, Watch } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n \n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions: number;\n \n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n /** Defines the type of automatic completion the browser could use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete: string = \"off\";\n\n @Element() element: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n this.fieldset.setValidity(true, \"\");\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n @State() selectedIndex: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n @State() displayValue: string = \"\";\n\n @Watch(\"value\")\n handleValueChange(newValue: string) {\n this.displayValue = newValue;\n\n // Find the index of the selected item\n this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);\n }\n \n /** attacth the internals for form validation */\n @AttachInternals() internals: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n \n componentDidRender(){\n if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n this.adjustDropdownPosition();\n }\n }\n\n private inputField!: HTMLInputElement;\n private suggestionsContainer: HTMLUListElement;\n private labelId: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n \n private handleInput(e: Event) {\n const inputValue = (e.target as HTMLInputElement).value;\n this.displayValue = inputValue;\n this.value = inputValue;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(inputValue);\n this.handleSearchQueryChanged(inputValue);\n }\n\n @Debounce(300)\n private handleSearchQueryChanged(value: string) {\n this.searchQueryChanged.emit(value);\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined) {\n this.customValidityMessage = this.inputField.validationMessage;\n }\n }\n\n private handleChange() {\n this.valueChange.emit(this.value);\n if (this.name != undefined) {\n var data = new FormData();\n data.append(this.name, this.value.toString());\n this.internals.setFormValue(data);\n }\n }\n\n /** Check if the label should float */\n private shouldLabelFloat(): boolean {\n if (this.focused) {\n return false;\n }\n\n if (this.value != undefined && this.value != \"\") {\n return false;\n }\n\n return true;\n }\n\n private findAverageSuggestionHeight(): number {\n const suggestionItems = this.suggestionsContainer.querySelectorAll(\"li\");\n var totalHeight = 0;\n for (let i = 0; i < suggestionItems.length; i++) {\n totalHeight += suggestionItems[i].clientHeight;\n }\n return totalHeight / suggestionItems.length;\n }\n\n private readonly adjustDropdownPosition = () => {\n var itemHeight = this.findAverageSuggestionHeight();\n requestAnimationFrame(() => {\n this.positionInitialized = true;\n });\n\n // If we can fit 3 items below the input and there is still 3em left, we show the dropdown under.\n // Otherwise, we show it above.\n var spaceBelow = window.innerHeight - this.inputField.getBoundingClientRect().bottom;\n const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);\n const fitsDown = spaceBelow > 3 * itemHeight + 3 * rem;\n if (fitsDown) {\n this.suggestionsContainer.style.top = \"1.2rem\";\n }\n else {\n this.suggestionsContainer.style.bottom = \"1.2rem\";\n }\n\n // Set the max height to not overflow the screen.\n if (fitsDown){\n this.suggestionsContainer.style.maxHeight = `${spaceBelow - 3 * rem}px`;\n }\n else {\n this.suggestionsContainer.style.maxHeight = `${this.inputField.getBoundingClientRect().top - 3 * rem}px`;\n }\n\n this.checkIfMoreItemsNeeded();\n }\n\n private handleKeyDown(e: KeyboardEvent): void {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = 0;\n } else {\n this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n }\n }\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = this.suggestions.length - 1;\n } else {\n this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n }\n }\n this.value = this.suggestions[this.selectedIndex]?.value || this.value;\n if (e.key === \"Enter\") {\n var selectedItem = this.suggestions[this.selectedIndex];\n this.value = selectedItem.value;\n this.inputField.value = selectedItem.label;\n this.itemSelected.emit(selectedItem.value);\n this.focused = false;\n }\n if (e.key === \"Tab\"){\n this.focused = false;\n }\n }\n\n private selectItem(e: Event, index: number): void {\n e.preventDefault();\n e.stopPropagation();\n this.selectedIndex = index;\n this.value = this.suggestions[this.selectedIndex].value;\n this.displayValue = this.suggestions[this.selectedIndex].label;\n this.inputField.value = this.displayValue;\n this.checkValidity();\n this.focused = false;\n this.itemSelected.emit(this.suggestions[this.selectedIndex].value)\n }\n\n private getVirtualScrollHeight(): number {\n const itemHeight = this.findAverageSuggestionHeight();\n const upcomingItems = this.totalSuggestions - this.suggestions.length;\n return itemHeight * upcomingItems;\n }\n\n private handleDropdownClick(): void {\n this.handleSearchQueryChanged(this.value);\n }\n\n @Debounce(100)\n private handleSuggestionsScroll(): void {\n const container = this.suggestionsContainer;\n const currentScrollTop = container.scrollTop;\n\n // Only act if we are scrolling down\n if (currentScrollTop > this.lastScrollTop) {\n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n if (loadingDiv == undefined) {\n this.lastScrollTop = currentScrollTop;\n return;\n }\n\n const loadingDivPosition = loadingDiv.offsetTop;\n const loadingDivHeight = loadingDiv.offsetHeight;\n const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n // Calculate the visible bottom of the scroll container\n const visibleBottom = currentScrollTop + container.clientHeight;\n\n // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n if (visibleBottom > loadingDivBottom) {\n // Adjust scrollTop so it doesn't scroll past the loading div\n container.scrollTop = loadingDivBottom - container.clientHeight;\n }\n\n // Check if more items are needed based on the position of the loading div\n this.checkIfMoreItemsNeeded();\n }\n\n // Update the last scroll position\n this.lastScrollTop = currentScrollTop;\n }\n\n @Debounce()\n private checkIfMoreItemsNeeded() {\n const container = this.suggestionsContainer;\n \n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n if (loadingDiv == undefined) return; // Exit if there's no loading div\n \n const scrollPosition = container.scrollTop + container.clientHeight;\n const loadingDivPosition = loadingDiv.offsetTop;\n \n // Check if the loading div is within the threshold of becoming visible\n if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n const eventArgs: NeedMoreItemsEventArgs = {\n searchTerm: this.inputField.value,\n };\n this.needMoreItems.emit(eventArgs);\n }\n }\n\n handleBlur(): void {\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n value={this.displayValue}\n onFocus={() => {\n this.searchQueryChanged.emit(this.value || \"\");\n this.focused = true;\n }}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n <ul\n class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n role=\"listbox\"\n ref={el => this.suggestionsContainer = el}\n onScroll={() => this.handleSuggestionsScroll()}\n >\n {this.suggestions.map((suggestion, index) => (\n <li\n id={`option-${index}`}\n role=\"option\"\n aria-selected={this.selectedIndex == index}\n class={this.selectedIndex == index ? \"selected\" : \"\"}\n onClick={e => this.selectItem(e, index)}\n >\n {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n </li>\n ))}\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n <div class=\"loading\">\n </div>\n }\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n </div>\n }\n </ul>\n <svg\n onClick={() => this.handleDropdownClick()}\n class=\"chevron-down\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -960 960 960\">\n <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n </svg>\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n}"],"version":3}
|
package/dist/cjs/dnn.cjs.js
CHANGED
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["dnn-color-input.cjs",[[65,"dnn-color-input",{"color":[1025],"contrastColor":[1025,"contrast-color"],"lightColor":[1025,"light-color"],"darkColor":[1025,"dark-color"],"label":[1],"readonly":[4],"localization":[16],"name":[1],"helpText":[1,"help-text"],"useContrastColor":[4,"use-contrast-color"],"useLightColor":[4,"use-light-color"],"useDarkColor":[4,"use-dark-color"],"currentColor":[32],"focused":[32]},null,{"currentColor":["currentColorChanged"]}]]],["dnn-image-cropper.cjs",[[65,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"name":[1],"view":[32],"localResx":[32],"fileName":[32],"focused":[32],"clear":[64]},null,{"resx":["resxChanged"]}]]],["dnn-autocomplete.cjs",[[65,"dnn-autocomplete",{"label":[1],"name":[1],"helpText":[1,"help-text"],"value":[1537],"required":[4],"disabled":[4],"suggestions":[16],"renderSuggestion":[16],"totalSuggestions":[2,"total-suggestions"],"preloadThresholdPixels":[2,"preload-threshold-pixels"],"autocomplete":[1],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"displayValue":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","handleClick"]]]]],["dnn-input.cjs",[[65,"dnn-input",{"type":[1025],"label":[1],"name":[1],"value":[1544],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"min":[8],"max":[8],"minlength":[2],"maxlength":[2],"multiple":[4],"pattern":[1],"readonly":[4],"step":[8],"disableValidityReporting":[4,"disable-validity-reporting"],"allowShowPassword":[4,"allow-show-password"],"inputmode":[1],"focused":[32],"valid":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-select.cjs",[[65,"dnn-select",{"label":[1],"name":[1],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"disableValidityReporting":[4,"disable-validity-reporting"],"autocomplete":[1],"value":[1537],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64]}]]],["dnn-textarea.cjs",[[65,"dnn-textarea",{"resizable":[1],"value":[1025],"label":[1],"name":[1],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"minlength":[2],"maxlength":[2],"readonly":[4],"rows":[2],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-treeview-item.cjs",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32],"focused":[32]},null,{"expanded":["watchExpanded"]}]]],["dnn-chevron.cjs",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540],"focused":[32]},null,{"expanded":["handleExpandedChanged"]}]]],["dnn-monaco-editor.cjs",[[66,"dnn-monaco-editor",{"language":[1],"value":[1025],"name":[1],"focused":[32]},null,{"language":["languageChanged"],"value":["valueChanged"]}]]],["dnn-progress-bar.cjs",[[1,"dnn-progress-bar",{"value":[2],"max":[2],"useGradient":[4,"use-gradient"]}]]],["dnn-richtext.cjs",[[65,"dnn-richtext",{"options":[16],"value":[1],"name":[1],"focused":[32]},null,{"value":["watchValueChanged"]}]]],["dnn-sort-icon.cjs",[[1,"dnn-sort-icon",{"sortDirection":[1025,"sort-direction"],"focused":[32]}]]],["dnn-toggle.cjs",[[65,"dnn-toggle",{"checked":[1028],"disabled":[4],"name":[1],"value":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["checkedChanged"]}]]],["dnn-vertical-overflow-menu.cjs",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview.cjs",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-checkbox.cjs",[[65,"dnn-checkbox",{"checked":[1025],"useIntermediate":[4,"use-intermediate"],"value":[1],"name":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["handleCheckedChange"]}]]],["dnn-color-picker.cjs",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32],"focused":[32]},null,{"currentColor":["handeCurrentColorChanged"]}]]],["dnn-dropzone.cjs",[[65,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"maxFileSize":[2,"max-file-size"],"name":[1],"canTakeSnapshots":[32],"takingPicture":[32],"fileTooLarge":[32],"invalidExtension":[32],"localResx":[32],"focused":[32]},null,{"resx":["resxChanged"]}]]],["dnn-searchbox.cjs",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"debounceTime":[2,"debounce-time"],"query":[1025],"focused":[32]},null,{"query":["handleQueryChanged"]}]]],["dnn-tab_2.cjs",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}],[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-collapsible.cjs",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{"expanded":["handledExpandedChanged"]}]]],["dnn-modal.cjs",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"resizable":[4],"showCloseButton":[4,"show-close-button"],"visible":[1540],"show":[64],"hide":[64]}]]],["dnn-button.cjs",[[65,"dnn-button",{"type":[1],"appearance":[1],"formButtonType":[1,"form-button-type"],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"focused":[32],"modalVisible":[32]}]]],["dnn-permissions-grid.cjs",[[1,"dnn-permissions-grid",{"permissions":[1040],"roleGroups":[16],"roles":[16],"resx":[16],"foundUsers":[16],"selectedRoleGroupId":[32],"userQuery":[32],"pickedUser":[32],"localResx":[32],"focused":[32]},null,{"foundUsers":["handleFoundUsersChanged"],"resx":["resxChanged"]}]]],["dnn-fieldset.cjs",[[1,"dnn-fieldset",{"focused":[1540],"disabled":[1540],"invalid":[1540],"label":[1],"floatLabel":[1540,"float-label"],"helpText":[1,"help-text"],"resizable":[1],"customValidityMessage":[32],"setFocused":[64],"setBlurred":[64],"disable":[64],"enable":[64],"pinLabel":[64],"unpinLabel":[64],"setValidity":[64]}]]]], options);
|
|
22
|
+
return index.bootstrapLazy([["dnn-color-input.cjs",[[65,"dnn-color-input",{"color":[1025],"contrastColor":[1025,"contrast-color"],"lightColor":[1025,"light-color"],"darkColor":[1025,"dark-color"],"label":[1],"readonly":[4],"localization":[16],"name":[1],"helpText":[1,"help-text"],"useContrastColor":[4,"use-contrast-color"],"useLightColor":[4,"use-light-color"],"useDarkColor":[4,"use-dark-color"],"currentColor":[32],"focused":[32]},null,{"currentColor":["currentColorChanged"]}]]],["dnn-image-cropper.cjs",[[65,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"name":[1],"view":[32],"localResx":[32],"fileName":[32],"focused":[32],"clear":[64]},null,{"resx":["resxChanged"]}]]],["dnn-autocomplete.cjs",[[65,"dnn-autocomplete",{"label":[1],"name":[1],"helpText":[1,"help-text"],"value":[1537],"required":[4],"disabled":[4],"suggestions":[16],"renderSuggestion":[16],"totalSuggestions":[2,"total-suggestions"],"preloadThresholdPixels":[2,"preload-threshold-pixels"],"autocomplete":[1],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"displayValue":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","handleClick"]],{"value":["handleValueChange"]}]]],["dnn-input.cjs",[[65,"dnn-input",{"type":[1025],"label":[1],"name":[1],"value":[1544],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"min":[8],"max":[8],"minlength":[2],"maxlength":[2],"multiple":[4],"pattern":[1],"readonly":[4],"step":[8],"disableValidityReporting":[4,"disable-validity-reporting"],"allowShowPassword":[4,"allow-show-password"],"inputmode":[1],"focused":[32],"valid":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-select.cjs",[[65,"dnn-select",{"label":[1],"name":[1],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"disableValidityReporting":[4,"disable-validity-reporting"],"autocomplete":[1],"value":[1537],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64]}]]],["dnn-textarea.cjs",[[65,"dnn-textarea",{"resizable":[1],"value":[1025],"label":[1],"name":[1],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"minlength":[2],"maxlength":[2],"readonly":[4],"rows":[2],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-treeview-item.cjs",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32],"focused":[32]},null,{"expanded":["watchExpanded"]}]]],["dnn-chevron.cjs",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540],"focused":[32]},null,{"expanded":["handleExpandedChanged"]}]]],["dnn-monaco-editor.cjs",[[66,"dnn-monaco-editor",{"language":[1],"value":[1025],"name":[1],"focused":[32]},null,{"language":["languageChanged"],"value":["valueChanged"]}]]],["dnn-progress-bar.cjs",[[1,"dnn-progress-bar",{"value":[2],"max":[2],"useGradient":[4,"use-gradient"]}]]],["dnn-richtext.cjs",[[65,"dnn-richtext",{"options":[16],"value":[1],"name":[1],"focused":[32]},null,{"value":["watchValueChanged"]}]]],["dnn-sort-icon.cjs",[[1,"dnn-sort-icon",{"sortDirection":[1025,"sort-direction"],"focused":[32]}]]],["dnn-toggle.cjs",[[65,"dnn-toggle",{"checked":[1028],"disabled":[4],"name":[1],"value":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["checkedChanged"]}]]],["dnn-vertical-overflow-menu.cjs",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview.cjs",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-checkbox.cjs",[[65,"dnn-checkbox",{"checked":[1025],"useIntermediate":[4,"use-intermediate"],"value":[1],"name":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["handleCheckedChange"]}]]],["dnn-color-picker.cjs",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32],"focused":[32]},null,{"currentColor":["handeCurrentColorChanged"]}]]],["dnn-dropzone.cjs",[[65,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"maxFileSize":[2,"max-file-size"],"name":[1],"canTakeSnapshots":[32],"takingPicture":[32],"fileTooLarge":[32],"invalidExtension":[32],"localResx":[32],"focused":[32]},null,{"resx":["resxChanged"]}]]],["dnn-searchbox.cjs",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"debounceTime":[2,"debounce-time"],"query":[1025],"focused":[32]},null,{"query":["handleQueryChanged"]}]]],["dnn-tab_2.cjs",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}],[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-collapsible.cjs",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{"expanded":["handledExpandedChanged"]}]]],["dnn-modal.cjs",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"resizable":[4],"showCloseButton":[4,"show-close-button"],"visible":[1540],"show":[64],"hide":[64]}]]],["dnn-button.cjs",[[65,"dnn-button",{"type":[1],"appearance":[1],"formButtonType":[1,"form-button-type"],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"focused":[32],"modalVisible":[32]}]]],["dnn-permissions-grid.cjs",[[1,"dnn-permissions-grid",{"permissions":[1040],"roleGroups":[16],"roles":[16],"resx":[16],"foundUsers":[16],"selectedRoleGroupId":[32],"userQuery":[32],"pickedUser":[32],"localResx":[32],"focused":[32]},null,{"foundUsers":["handleFoundUsersChanged"],"resx":["resxChanged"]}]]],["dnn-fieldset.cjs",[[1,"dnn-fieldset",{"focused":[1540],"disabled":[1540],"invalid":[1540],"label":[1],"floatLabel":[1540,"float-label"],"helpText":[1,"help-text"],"resizable":[1],"customValidityMessage":[32],"setFocused":[64],"setBlurred":[64],"disable":[64],"enable":[64],"pinLabel":[64],"unpinLabel":[64],"setValidity":[64]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
|
10
10
|
await appGlobals.globalScripts();
|
|
11
|
-
return index.bootstrapLazy([["dnn-color-input.cjs",[[65,"dnn-color-input",{"color":[1025],"contrastColor":[1025,"contrast-color"],"lightColor":[1025,"light-color"],"darkColor":[1025,"dark-color"],"label":[1],"readonly":[4],"localization":[16],"name":[1],"helpText":[1,"help-text"],"useContrastColor":[4,"use-contrast-color"],"useLightColor":[4,"use-light-color"],"useDarkColor":[4,"use-dark-color"],"currentColor":[32],"focused":[32]},null,{"currentColor":["currentColorChanged"]}]]],["dnn-image-cropper.cjs",[[65,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"name":[1],"view":[32],"localResx":[32],"fileName":[32],"focused":[32],"clear":[64]},null,{"resx":["resxChanged"]}]]],["dnn-autocomplete.cjs",[[65,"dnn-autocomplete",{"label":[1],"name":[1],"helpText":[1,"help-text"],"value":[1537],"required":[4],"disabled":[4],"suggestions":[16],"renderSuggestion":[16],"totalSuggestions":[2,"total-suggestions"],"preloadThresholdPixels":[2,"preload-threshold-pixels"],"autocomplete":[1],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"displayValue":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","handleClick"]]]]],["dnn-input.cjs",[[65,"dnn-input",{"type":[1025],"label":[1],"name":[1],"value":[1544],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"min":[8],"max":[8],"minlength":[2],"maxlength":[2],"multiple":[4],"pattern":[1],"readonly":[4],"step":[8],"disableValidityReporting":[4,"disable-validity-reporting"],"allowShowPassword":[4,"allow-show-password"],"inputmode":[1],"focused":[32],"valid":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-select.cjs",[[65,"dnn-select",{"label":[1],"name":[1],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"disableValidityReporting":[4,"disable-validity-reporting"],"autocomplete":[1],"value":[1537],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64]}]]],["dnn-textarea.cjs",[[65,"dnn-textarea",{"resizable":[1],"value":[1025],"label":[1],"name":[1],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"minlength":[2],"maxlength":[2],"readonly":[4],"rows":[2],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-treeview-item.cjs",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32],"focused":[32]},null,{"expanded":["watchExpanded"]}]]],["dnn-chevron.cjs",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540],"focused":[32]},null,{"expanded":["handleExpandedChanged"]}]]],["dnn-monaco-editor.cjs",[[66,"dnn-monaco-editor",{"language":[1],"value":[1025],"name":[1],"focused":[32]},null,{"language":["languageChanged"],"value":["valueChanged"]}]]],["dnn-progress-bar.cjs",[[1,"dnn-progress-bar",{"value":[2],"max":[2],"useGradient":[4,"use-gradient"]}]]],["dnn-richtext.cjs",[[65,"dnn-richtext",{"options":[16],"value":[1],"name":[1],"focused":[32]},null,{"value":["watchValueChanged"]}]]],["dnn-sort-icon.cjs",[[1,"dnn-sort-icon",{"sortDirection":[1025,"sort-direction"],"focused":[32]}]]],["dnn-toggle.cjs",[[65,"dnn-toggle",{"checked":[1028],"disabled":[4],"name":[1],"value":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["checkedChanged"]}]]],["dnn-vertical-overflow-menu.cjs",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview.cjs",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-checkbox.cjs",[[65,"dnn-checkbox",{"checked":[1025],"useIntermediate":[4,"use-intermediate"],"value":[1],"name":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["handleCheckedChange"]}]]],["dnn-color-picker.cjs",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32],"focused":[32]},null,{"currentColor":["handeCurrentColorChanged"]}]]],["dnn-dropzone.cjs",[[65,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"maxFileSize":[2,"max-file-size"],"name":[1],"canTakeSnapshots":[32],"takingPicture":[32],"fileTooLarge":[32],"invalidExtension":[32],"localResx":[32],"focused":[32]},null,{"resx":["resxChanged"]}]]],["dnn-searchbox.cjs",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"debounceTime":[2,"debounce-time"],"query":[1025],"focused":[32]},null,{"query":["handleQueryChanged"]}]]],["dnn-tab_2.cjs",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}],[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-collapsible.cjs",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{"expanded":["handledExpandedChanged"]}]]],["dnn-modal.cjs",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"resizable":[4],"showCloseButton":[4,"show-close-button"],"visible":[1540],"show":[64],"hide":[64]}]]],["dnn-button.cjs",[[65,"dnn-button",{"type":[1],"appearance":[1],"formButtonType":[1,"form-button-type"],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"focused":[32],"modalVisible":[32]}]]],["dnn-permissions-grid.cjs",[[1,"dnn-permissions-grid",{"permissions":[1040],"roleGroups":[16],"roles":[16],"resx":[16],"foundUsers":[16],"selectedRoleGroupId":[32],"userQuery":[32],"pickedUser":[32],"localResx":[32],"focused":[32]},null,{"foundUsers":["handleFoundUsersChanged"],"resx":["resxChanged"]}]]],["dnn-fieldset.cjs",[[1,"dnn-fieldset",{"focused":[1540],"disabled":[1540],"invalid":[1540],"label":[1],"floatLabel":[1540,"float-label"],"helpText":[1,"help-text"],"resizable":[1],"customValidityMessage":[32],"setFocused":[64],"setBlurred":[64],"disable":[64],"enable":[64],"pinLabel":[64],"unpinLabel":[64],"setValidity":[64]}]]]], options);
|
|
11
|
+
return index.bootstrapLazy([["dnn-color-input.cjs",[[65,"dnn-color-input",{"color":[1025],"contrastColor":[1025,"contrast-color"],"lightColor":[1025,"light-color"],"darkColor":[1025,"dark-color"],"label":[1],"readonly":[4],"localization":[16],"name":[1],"helpText":[1,"help-text"],"useContrastColor":[4,"use-contrast-color"],"useLightColor":[4,"use-light-color"],"useDarkColor":[4,"use-dark-color"],"currentColor":[32],"focused":[32]},null,{"currentColor":["currentColorChanged"]}]]],["dnn-image-cropper.cjs",[[65,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"name":[1],"view":[32],"localResx":[32],"fileName":[32],"focused":[32],"clear":[64]},null,{"resx":["resxChanged"]}]]],["dnn-autocomplete.cjs",[[65,"dnn-autocomplete",{"label":[1],"name":[1],"helpText":[1,"help-text"],"value":[1537],"required":[4],"disabled":[4],"suggestions":[16],"renderSuggestion":[16],"totalSuggestions":[2,"total-suggestions"],"preloadThresholdPixels":[2,"preload-threshold-pixels"],"autocomplete":[1],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"displayValue":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","handleClick"]],{"value":["handleValueChange"]}]]],["dnn-input.cjs",[[65,"dnn-input",{"type":[1025],"label":[1],"name":[1],"value":[1544],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"min":[8],"max":[8],"minlength":[2],"maxlength":[2],"multiple":[4],"pattern":[1],"readonly":[4],"step":[8],"disableValidityReporting":[4,"disable-validity-reporting"],"allowShowPassword":[4,"allow-show-password"],"inputmode":[1],"focused":[32],"valid":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-select.cjs",[[65,"dnn-select",{"label":[1],"name":[1],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"disableValidityReporting":[4,"disable-validity-reporting"],"autocomplete":[1],"value":[1537],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64]}]]],["dnn-textarea.cjs",[[65,"dnn-textarea",{"resizable":[1],"value":[1025],"label":[1],"name":[1],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"minlength":[2],"maxlength":[2],"readonly":[4],"rows":[2],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-treeview-item.cjs",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32],"focused":[32]},null,{"expanded":["watchExpanded"]}]]],["dnn-chevron.cjs",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540],"focused":[32]},null,{"expanded":["handleExpandedChanged"]}]]],["dnn-monaco-editor.cjs",[[66,"dnn-monaco-editor",{"language":[1],"value":[1025],"name":[1],"focused":[32]},null,{"language":["languageChanged"],"value":["valueChanged"]}]]],["dnn-progress-bar.cjs",[[1,"dnn-progress-bar",{"value":[2],"max":[2],"useGradient":[4,"use-gradient"]}]]],["dnn-richtext.cjs",[[65,"dnn-richtext",{"options":[16],"value":[1],"name":[1],"focused":[32]},null,{"value":["watchValueChanged"]}]]],["dnn-sort-icon.cjs",[[1,"dnn-sort-icon",{"sortDirection":[1025,"sort-direction"],"focused":[32]}]]],["dnn-toggle.cjs",[[65,"dnn-toggle",{"checked":[1028],"disabled":[4],"name":[1],"value":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["checkedChanged"]}]]],["dnn-vertical-overflow-menu.cjs",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview.cjs",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-checkbox.cjs",[[65,"dnn-checkbox",{"checked":[1025],"useIntermediate":[4,"use-intermediate"],"value":[1],"name":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["handleCheckedChange"]}]]],["dnn-color-picker.cjs",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32],"focused":[32]},null,{"currentColor":["handeCurrentColorChanged"]}]]],["dnn-dropzone.cjs",[[65,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"maxFileSize":[2,"max-file-size"],"name":[1],"canTakeSnapshots":[32],"takingPicture":[32],"fileTooLarge":[32],"invalidExtension":[32],"localResx":[32],"focused":[32]},null,{"resx":["resxChanged"]}]]],["dnn-searchbox.cjs",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"debounceTime":[2,"debounce-time"],"query":[1025],"focused":[32]},null,{"query":["handleQueryChanged"]}]]],["dnn-tab_2.cjs",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}],[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-collapsible.cjs",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{"expanded":["handledExpandedChanged"]}]]],["dnn-modal.cjs",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"resizable":[4],"showCloseButton":[4,"show-close-button"],"visible":[1540],"show":[64],"hide":[64]}]]],["dnn-button.cjs",[[65,"dnn-button",{"type":[1],"appearance":[1],"formButtonType":[1,"form-button-type"],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"focused":[32],"modalVisible":[32]}]]],["dnn-permissions-grid.cjs",[[1,"dnn-permissions-grid",{"permissions":[1040],"roleGroups":[16],"roles":[16],"resx":[16],"foundUsers":[16],"selectedRoleGroupId":[32],"userQuery":[32],"pickedUser":[32],"localResx":[32],"focused":[32]},null,{"foundUsers":["handleFoundUsersChanged"],"resx":["resxChanged"]}]]],["dnn-fieldset.cjs",[[1,"dnn-fieldset",{"focused":[1540],"disabled":[1540],"invalid":[1540],"label":[1],"floatLabel":[1540,"float-label"],"helpText":[1,"help-text"],"resizable":[1],"customValidityMessage":[32],"setFocused":[64],"setBlurred":[64],"disable":[64],"enable":[64],"pinLabel":[64],"unpinLabel":[64],"setValidity":[64]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -77,6 +77,11 @@ export class DnnAutocomplete {
|
|
|
77
77
|
this.valid = false;
|
|
78
78
|
this.fieldset.setValidity(false, message);
|
|
79
79
|
}
|
|
80
|
+
handleValueChange(newValue) {
|
|
81
|
+
this.displayValue = newValue;
|
|
82
|
+
// Find the index of the selected item
|
|
83
|
+
this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);
|
|
84
|
+
}
|
|
80
85
|
/** Listener for mouse down event */
|
|
81
86
|
handleClick(e) {
|
|
82
87
|
const path = e.composedPath();
|
|
@@ -241,12 +246,12 @@ export class DnnAutocomplete {
|
|
|
241
246
|
}
|
|
242
247
|
render() {
|
|
243
248
|
var _a;
|
|
244
|
-
return (h(Host, { key: '
|
|
249
|
+
return (h(Host, { key: 'e4721cc0e2110853787b552f1353c94d8483287b', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("dnn-fieldset", { key: '0881da2521817503d78f15cd1fd9b777654b108d', ref: el => this.fieldset = el, invalid: !this.valid, focused: this.focused, label: `${(_a = this.label) !== null && _a !== void 0 ? _a : ""}${this.required ? " *" : ""}`, helpText: this.helpText, id: this.labelId, disabled: this.disabled, floatLabel: this.shouldLabelFloat() }, h("div", { key: 'ac5590e129b624f1ba1c012448897515017db086', class: "inner-container" }, h("input", { key: '779f3a6e00dff6319b2d94c6bb903e9b495d1746', ref: (el) => this.inputField = el, name: this.name, type: "search", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.focused.toString(), "aria-activedescendant": this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined, disabled: this.disabled, required: this.required, autoComplete: this.autocomplete, value: this.displayValue, onFocus: () => {
|
|
245
250
|
this.searchQueryChanged.emit(this.value || "");
|
|
246
251
|
this.focused = true;
|
|
247
|
-
}, onBlur: () => this.handleBlur(), onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId, onKeyDown: e => this.handleKeyDown(e) }), h("ul", { key: '
|
|
248
|
-
h("div", { key: '
|
|
249
|
-
h("div", { key: '
|
|
252
|
+
}, onBlur: () => this.handleBlur(), onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId, onKeyDown: e => this.handleKeyDown(e) }), h("ul", { key: '32448159bf989944d974bdba2ca42cf30f089272', class: this.focused && this.suggestions.length > 0 ? "show" : "", role: "listbox", ref: el => this.suggestionsContainer = el, onScroll: () => this.handleSuggestionsScroll() }, this.suggestions.map((suggestion, index) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": this.selectedIndex == index, class: this.selectedIndex == index ? "selected" : "", onClick: e => this.selectItem(e, index) }, this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label))), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&
|
|
253
|
+
h("div", { key: 'd4bee8ab76bb9058740f1fb6a0faf06e9446f859', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
|
|
254
|
+
h("div", { key: '54539c1e08aa3cd521306a942df62835099f3560', style: { height: `${this.getVirtualScrollHeight()}px` } })), h("svg", { key: '43a4b159fcd84253003375dbf5cf95818539b410', onClick: () => this.handleDropdownClick(), class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: 'c752ed998df5b38322b13f8636f172c645f2ca8a', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
|
|
250
255
|
}
|
|
251
256
|
static get is() { return "dnn-autocomplete"; }
|
|
252
257
|
static get encapsulation() { return "shadow"; }
|
|
@@ -609,6 +614,12 @@ export class DnnAutocomplete {
|
|
|
609
614
|
};
|
|
610
615
|
}
|
|
611
616
|
static get elementRef() { return "element"; }
|
|
617
|
+
static get watchers() {
|
|
618
|
+
return [{
|
|
619
|
+
"propName": "value",
|
|
620
|
+
"methodName": "handleValueChange"
|
|
621
|
+
}];
|
|
622
|
+
}
|
|
612
623
|
static get listeners() {
|
|
613
624
|
return [{
|
|
614
625
|
"name": "click",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dnn-autocomplete.js","sourceRoot":"","sources":["../../../src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n \n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions: number;\n \n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n /** Defines the type of automatic completion the browser could use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete: string = \"off\";\n\n @Element() element: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n this.fieldset.setValidity(true, \"\");\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n @State() selectedIndex: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n @State() displayValue: string = \"\";\n \n /** attacth the internals for form validation */\n @AttachInternals() internals: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n \n componentDidRender(){\n if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n this.adjustDropdownPosition();\n }\n }\n\n private inputField!: HTMLInputElement;\n private suggestionsContainer: HTMLUListElement;\n private labelId: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n \n private handleInput(e: Event) {\n const inputValue = (e.target as HTMLInputElement).value;\n this.displayValue = inputValue;\n this.value = inputValue;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(inputValue);\n this.handleSearchQueryChanged(inputValue);\n }\n\n @Debounce(300)\n private handleSearchQueryChanged(value: string) {\n this.searchQueryChanged.emit(value);\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined) {\n this.customValidityMessage = this.inputField.validationMessage;\n }\n }\n\n private handleChange() {\n this.valueChange.emit(this.value);\n if (this.name != undefined) {\n var data = new FormData();\n data.append(this.name, this.value.toString());\n this.internals.setFormValue(data);\n }\n }\n\n /** Check if the label should float */\n private shouldLabelFloat(): boolean {\n if (this.focused) {\n return false;\n }\n\n if (this.value != undefined && this.value != \"\") {\n return false;\n }\n\n return true;\n }\n\n private findAverageSuggestionHeight(): number {\n const suggestionItems = this.suggestionsContainer.querySelectorAll(\"li\");\n var totalHeight = 0;\n for (let i = 0; i < suggestionItems.length; i++) {\n totalHeight += suggestionItems[i].clientHeight;\n }\n return totalHeight / suggestionItems.length;\n }\n\n private readonly adjustDropdownPosition = () => {\n var itemHeight = this.findAverageSuggestionHeight();\n requestAnimationFrame(() => {\n this.positionInitialized = true;\n });\n\n // If we can fit 3 items below the input and there is still 3em left, we show the dropdown under.\n // Otherwise, we show it above.\n var spaceBelow = window.innerHeight - this.inputField.getBoundingClientRect().bottom;\n const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);\n const fitsDown = spaceBelow > 3 * itemHeight + 3 * rem;\n if (fitsDown) {\n this.suggestionsContainer.style.top = \"1.2rem\";\n }\n else {\n this.suggestionsContainer.style.bottom = \"1.2rem\";\n }\n\n // Set the max height to not overflow the screen.\n if (fitsDown){\n this.suggestionsContainer.style.maxHeight = `${spaceBelow - 3 * rem}px`;\n }\n else {\n this.suggestionsContainer.style.maxHeight = `${this.inputField.getBoundingClientRect().top - 3 * rem}px`;\n }\n\n this.checkIfMoreItemsNeeded();\n }\n\n private handleKeyDown(e: KeyboardEvent): void {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = 0;\n } else {\n this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n }\n }\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = this.suggestions.length - 1;\n } else {\n this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n }\n }\n this.value = this.suggestions[this.selectedIndex]?.value || this.value;\n if (e.key === \"Enter\") {\n var selectedItem = this.suggestions[this.selectedIndex];\n this.value = selectedItem.value;\n this.inputField.value = selectedItem.label;\n this.itemSelected.emit(selectedItem.value);\n this.focused = false;\n }\n if (e.key === \"Tab\"){\n this.focused = false;\n }\n }\n\n private selectItem(e: Event, index: number): void {\n e.preventDefault();\n e.stopPropagation();\n this.selectedIndex = index;\n this.value = this.suggestions[this.selectedIndex].value;\n this.displayValue = this.suggestions[this.selectedIndex].label;\n this.inputField.value = this.displayValue;\n this.checkValidity();\n this.focused = false;\n this.itemSelected.emit(this.suggestions[this.selectedIndex].value)\n }\n\n private getVirtualScrollHeight(): number {\n const itemHeight = this.findAverageSuggestionHeight();\n const upcomingItems = this.totalSuggestions - this.suggestions.length;\n return itemHeight * upcomingItems;\n }\n\n private handleDropdownClick(): void {\n this.handleSearchQueryChanged(this.value);\n }\n\n @Debounce(100)\n private handleSuggestionsScroll(): void {\n const container = this.suggestionsContainer;\n const currentScrollTop = container.scrollTop;\n\n // Only act if we are scrolling down\n if (currentScrollTop > this.lastScrollTop) {\n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n if (loadingDiv == undefined) {\n this.lastScrollTop = currentScrollTop;\n return;\n }\n\n const loadingDivPosition = loadingDiv.offsetTop;\n const loadingDivHeight = loadingDiv.offsetHeight;\n const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n // Calculate the visible bottom of the scroll container\n const visibleBottom = currentScrollTop + container.clientHeight;\n\n // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n if (visibleBottom > loadingDivBottom) {\n // Adjust scrollTop so it doesn't scroll past the loading div\n container.scrollTop = loadingDivBottom - container.clientHeight;\n }\n\n // Check if more items are needed based on the position of the loading div\n this.checkIfMoreItemsNeeded();\n }\n\n // Update the last scroll position\n this.lastScrollTop = currentScrollTop;\n }\n\n @Debounce()\n private checkIfMoreItemsNeeded() {\n const container = this.suggestionsContainer;\n \n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n if (loadingDiv == undefined) return; // Exit if there's no loading div\n \n const scrollPosition = container.scrollTop + container.clientHeight;\n const loadingDivPosition = loadingDiv.offsetTop;\n \n // Check if the loading div is within the threshold of becoming visible\n if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n const eventArgs: NeedMoreItemsEventArgs = {\n searchTerm: this.inputField.value,\n };\n this.needMoreItems.emit(eventArgs);\n }\n }\n\n handleBlur(): void {\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n value={this.displayValue}\n onFocus={() => {\n this.searchQueryChanged.emit(this.value || \"\");\n this.focused = true;\n }}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n <ul\n class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n role=\"listbox\"\n ref={el => this.suggestionsContainer = el}\n onScroll={() => this.handleSuggestionsScroll()}\n >\n {this.suggestions.map((suggestion, index) => (\n <li\n id={`option-${index}`}\n role=\"option\"\n aria-selected={this.selectedIndex == index}\n class={this.selectedIndex == index ? \"selected\" : \"\"}\n onClick={e => this.selectItem(e, index)}\n >\n {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n </li>\n ))}\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n <div class=\"loading\">\n </div>\n }\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n </div>\n }\n </ul>\n <svg\n onClick={() => this.handleDropdownClick()}\n class=\"chevron-down\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -960 960 960\">\n <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n </svg>\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n}"]}
|
|
1
|
+
{"version":3,"file":"dnn-autocomplete.js","sourceRoot":"","sources":["../../../src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen, Watch } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n \n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions: number;\n \n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n /** Defines the type of automatic completion the browser could use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete: string = \"off\";\n\n @Element() element: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n this.fieldset.setValidity(true, \"\");\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n @State() selectedIndex: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n @State() displayValue: string = \"\";\n\n @Watch(\"value\")\n handleValueChange(newValue: string) {\n this.displayValue = newValue;\n\n // Find the index of the selected item\n this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);\n }\n \n /** attacth the internals for form validation */\n @AttachInternals() internals: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n \n componentDidRender(){\n if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n this.adjustDropdownPosition();\n }\n }\n\n private inputField!: HTMLInputElement;\n private suggestionsContainer: HTMLUListElement;\n private labelId: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n \n private handleInput(e: Event) {\n const inputValue = (e.target as HTMLInputElement).value;\n this.displayValue = inputValue;\n this.value = inputValue;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(inputValue);\n this.handleSearchQueryChanged(inputValue);\n }\n\n @Debounce(300)\n private handleSearchQueryChanged(value: string) {\n this.searchQueryChanged.emit(value);\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined) {\n this.customValidityMessage = this.inputField.validationMessage;\n }\n }\n\n private handleChange() {\n this.valueChange.emit(this.value);\n if (this.name != undefined) {\n var data = new FormData();\n data.append(this.name, this.value.toString());\n this.internals.setFormValue(data);\n }\n }\n\n /** Check if the label should float */\n private shouldLabelFloat(): boolean {\n if (this.focused) {\n return false;\n }\n\n if (this.value != undefined && this.value != \"\") {\n return false;\n }\n\n return true;\n }\n\n private findAverageSuggestionHeight(): number {\n const suggestionItems = this.suggestionsContainer.querySelectorAll(\"li\");\n var totalHeight = 0;\n for (let i = 0; i < suggestionItems.length; i++) {\n totalHeight += suggestionItems[i].clientHeight;\n }\n return totalHeight / suggestionItems.length;\n }\n\n private readonly adjustDropdownPosition = () => {\n var itemHeight = this.findAverageSuggestionHeight();\n requestAnimationFrame(() => {\n this.positionInitialized = true;\n });\n\n // If we can fit 3 items below the input and there is still 3em left, we show the dropdown under.\n // Otherwise, we show it above.\n var spaceBelow = window.innerHeight - this.inputField.getBoundingClientRect().bottom;\n const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);\n const fitsDown = spaceBelow > 3 * itemHeight + 3 * rem;\n if (fitsDown) {\n this.suggestionsContainer.style.top = \"1.2rem\";\n }\n else {\n this.suggestionsContainer.style.bottom = \"1.2rem\";\n }\n\n // Set the max height to not overflow the screen.\n if (fitsDown){\n this.suggestionsContainer.style.maxHeight = `${spaceBelow - 3 * rem}px`;\n }\n else {\n this.suggestionsContainer.style.maxHeight = `${this.inputField.getBoundingClientRect().top - 3 * rem}px`;\n }\n\n this.checkIfMoreItemsNeeded();\n }\n\n private handleKeyDown(e: KeyboardEvent): void {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = 0;\n } else {\n this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n }\n }\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = this.suggestions.length - 1;\n } else {\n this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n }\n }\n this.value = this.suggestions[this.selectedIndex]?.value || this.value;\n if (e.key === \"Enter\") {\n var selectedItem = this.suggestions[this.selectedIndex];\n this.value = selectedItem.value;\n this.inputField.value = selectedItem.label;\n this.itemSelected.emit(selectedItem.value);\n this.focused = false;\n }\n if (e.key === \"Tab\"){\n this.focused = false;\n }\n }\n\n private selectItem(e: Event, index: number): void {\n e.preventDefault();\n e.stopPropagation();\n this.selectedIndex = index;\n this.value = this.suggestions[this.selectedIndex].value;\n this.displayValue = this.suggestions[this.selectedIndex].label;\n this.inputField.value = this.displayValue;\n this.checkValidity();\n this.focused = false;\n this.itemSelected.emit(this.suggestions[this.selectedIndex].value)\n }\n\n private getVirtualScrollHeight(): number {\n const itemHeight = this.findAverageSuggestionHeight();\n const upcomingItems = this.totalSuggestions - this.suggestions.length;\n return itemHeight * upcomingItems;\n }\n\n private handleDropdownClick(): void {\n this.handleSearchQueryChanged(this.value);\n }\n\n @Debounce(100)\n private handleSuggestionsScroll(): void {\n const container = this.suggestionsContainer;\n const currentScrollTop = container.scrollTop;\n\n // Only act if we are scrolling down\n if (currentScrollTop > this.lastScrollTop) {\n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n if (loadingDiv == undefined) {\n this.lastScrollTop = currentScrollTop;\n return;\n }\n\n const loadingDivPosition = loadingDiv.offsetTop;\n const loadingDivHeight = loadingDiv.offsetHeight;\n const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n // Calculate the visible bottom of the scroll container\n const visibleBottom = currentScrollTop + container.clientHeight;\n\n // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n if (visibleBottom > loadingDivBottom) {\n // Adjust scrollTop so it doesn't scroll past the loading div\n container.scrollTop = loadingDivBottom - container.clientHeight;\n }\n\n // Check if more items are needed based on the position of the loading div\n this.checkIfMoreItemsNeeded();\n }\n\n // Update the last scroll position\n this.lastScrollTop = currentScrollTop;\n }\n\n @Debounce()\n private checkIfMoreItemsNeeded() {\n const container = this.suggestionsContainer;\n \n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n if (loadingDiv == undefined) return; // Exit if there's no loading div\n \n const scrollPosition = container.scrollTop + container.clientHeight;\n const loadingDivPosition = loadingDiv.offsetTop;\n \n // Check if the loading div is within the threshold of becoming visible\n if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n const eventArgs: NeedMoreItemsEventArgs = {\n searchTerm: this.inputField.value,\n };\n this.needMoreItems.emit(eventArgs);\n }\n }\n\n handleBlur(): void {\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n value={this.displayValue}\n onFocus={() => {\n this.searchQueryChanged.emit(this.value || \"\");\n this.focused = true;\n }}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n <ul\n class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n role=\"listbox\"\n ref={el => this.suggestionsContainer = el}\n onScroll={() => this.handleSuggestionsScroll()}\n >\n {this.suggestions.map((suggestion, index) => (\n <li\n id={`option-${index}`}\n role=\"option\"\n aria-selected={this.selectedIndex == index}\n class={this.selectedIndex == index ? \"selected\" : \"\"}\n onClick={e => this.selectItem(e, index)}\n >\n {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n </li>\n ))}\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n <div class=\"loading\">\n </div>\n }\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n </div>\n }\n </ul>\n <svg\n onClick={() => this.handleDropdownClick()}\n class=\"chevron-down\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -960 960 960\">\n <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n </svg>\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n}"]}
|
package/dist/dnn/dnn.esm.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as
|
|
1
|
+
import{p as e,b as a}from"./p-91d08ab2.js";export{s as setNonce}from"./p-91d08ab2.js";import{g as l}from"./p-e1255160.js";var t=()=>{const a=import.meta.url;const l={};if(a!==""){l.resourcesUrl=new URL(".",a).href}return e(l)};t().then((async e=>{await l();return a([["p-107bd5a8",[[65,"dnn-color-input",{color:[1025],contrastColor:[1025,"contrast-color"],lightColor:[1025,"light-color"],darkColor:[1025,"dark-color"],label:[1],readonly:[4],localization:[16],name:[1],helpText:[1,"help-text"],useContrastColor:[4,"use-contrast-color"],useLightColor:[4,"use-light-color"],useDarkColor:[4,"use-dark-color"],currentColor:[32],focused:[32]},null,{currentColor:["currentColorChanged"]}]]],["p-ef6a902d",[[65,"dnn-image-cropper",{width:[2],height:[2],resx:[16],quality:[2],preventUndersized:[4,"prevent-undersized"],name:[1],view:[32],localResx:[32],fileName:[32],focused:[32],clear:[64]},null,{resx:["resxChanged"]}]]],["p-a9d8a942",[[65,"dnn-autocomplete",{label:[1],name:[1],helpText:[1,"help-text"],value:[1537],required:[4],disabled:[4],suggestions:[16],renderSuggestion:[16],totalSuggestions:[2,"total-suggestions"],preloadThresholdPixels:[2,"preload-threshold-pixels"],autocomplete:[1],focused:[32],valid:[32],customValidityMessage:[32],selectedIndex:[32],positionInitialized:[32],lastScrollTop:[32],displayValue:[32],checkValidity:[64],setCustomValidity:[64]},[[4,"click","handleClick"]],{value:["handleValueChange"]}]]],["p-e6bd0f5b",[[65,"dnn-input",{type:[1025],label:[1],name:[1],value:[1544],helpText:[1,"help-text"],required:[4],disabled:[4],autocomplete:[1],min:[8],max:[8],minlength:[2],maxlength:[2],multiple:[4],pattern:[1],readonly:[4],step:[8],disableValidityReporting:[4,"disable-validity-reporting"],allowShowPassword:[4,"allow-show-password"],inputmode:[1],focused:[32],valid:[32],checkValidity:[64],setCustomValidity:[64]}]]],["p-d55632fe",[[65,"dnn-select",{label:[1],name:[1],required:[4],helpText:[1,"help-text"],disabled:[4],disableValidityReporting:[4,"disable-validity-reporting"],autocomplete:[1],value:[1537],focused:[32],valid:[32],customValidityMessage:[32],checkValidity:[64]}]]],["p-88a928f2",[[65,"dnn-textarea",{resizable:[1],value:[1025],label:[1],name:[1],helpText:[1,"help-text"],required:[4],disabled:[4],autocomplete:[1],minlength:[2],maxlength:[2],readonly:[4],rows:[2],focused:[32],valid:[32],customValidityMessage:[32],checkValidity:[64],setCustomValidity:[64]}]]],["p-c12c6683",[[1,"dnn-treeview-item",{expanded:[1540],hasChildren:[32],focused:[32]},null,{expanded:["watchExpanded"]}]]],["p-2b3d9bc1",[[1,"dnn-chevron",{expandText:[1,"expand-text"],collapseText:[1,"collapse-text"],expanded:[1540],focused:[32]},null,{expanded:["handleExpandedChanged"]}]]],["p-c15dfb8b",[[66,"dnn-monaco-editor",{language:[1],value:[1025],name:[1],focused:[32]},null,{language:["languageChanged"],value:["valueChanged"]}]]],["p-b0239140",[[1,"dnn-progress-bar",{value:[2],max:[2],useGradient:[4,"use-gradient"]}]]],["p-e7a44eb3",[[65,"dnn-richtext",{options:[16],value:[1],name:[1],focused:[32]},null,{value:["watchValueChanged"]}]]],["p-a645d829",[[1,"dnn-sort-icon",{sortDirection:[1025,"sort-direction"],focused:[32]}]]],["p-8056c270",[[65,"dnn-toggle",{checked:[1028],disabled:[4],name:[1],value:[1],focused:[32]},[[2,"click","handleClick"]],{checked:["checkedChanged"]}]]],["p-cf2aa06f",[[1,"dnn-vertical-overflow-menu",{showDropdownButton:[32],showDropdownMenu:[32]}]]],["p-b8ec5d70",[[1,"dnn-vertical-splitview",{splitterWidth:[2,"splitter-width"],splitWidthPercentage:[1026,"split-width-percentage"],leftWidth:[32],rightWidth:[32],setSplitWidthPercentage:[64],getSplitWidthPercentage:[64]}]]],["p-2b0a6053",[[65,"dnn-checkbox",{checked:[1025],useIntermediate:[4,"use-intermediate"],value:[1],name:[1],focused:[32]},[[2,"click","handleClick"]],{checked:["handleCheckedChange"]}]]],["p-f4b5a8e5",[[1,"dnn-color-picker",{color:[1],colorBoxHeight:[1,"color-box-height"],currentColor:[32],rgbDisplay:[32],hslDisplay:[32],hexDisplay:[32],focused:[32]},null,{currentColor:["handeCurrentColorChanged"]}]]],["p-00fccd70",[[65,"dnn-dropzone",{resx:[16],allowedExtensions:[16],allowCameraMode:[4,"allow-camera-mode"],captureQuality:[2,"capture-quality"],maxFileSize:[2,"max-file-size"],name:[1],canTakeSnapshots:[32],takingPicture:[32],fileTooLarge:[32],invalidExtension:[32],localResx:[32],focused:[32]},null,{resx:["resxChanged"]}]]],["p-678c5a33",[[1,"dnn-searchbox",{placeholder:[1],debounced:[4],debounceTime:[2,"debounce-time"],query:[1025],focused:[32]},null,{query:["handleQueryChanged"]}]]],["p-3279942a",[[1,"dnn-tab",{tabTitle:[1,"tab-title"],visible:[32],show:[64],hide:[64]}],[1,"dnn-tabs",{tabTitles:[32],selectedTabTitle:[32]}]]],["p-5aa5dc7b",[[1,"dnn-collapsible",{expanded:[516],transitionDuration:[2,"transition-duration"],updateSize:[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{expanded:["handledExpandedChanged"]}]]],["p-507074b5",[[1,"dnn-modal",{backdropDismiss:[4,"backdrop-dismiss"],closeText:[1,"close-text"],resizable:[4],showCloseButton:[4,"show-close-button"],visible:[1540],show:[64],hide:[64]}]]],["p-36dc982d",[[65,"dnn-button",{type:[1],appearance:[1],formButtonType:[1,"form-button-type"],reversed:[4],size:[1],confirm:[4],confirmYesText:[1,"confirm-yes-text"],confirmNoText:[1,"confirm-no-text"],confirmMessage:[1,"confirm-message"],disabled:[4],focused:[32],modalVisible:[32]}]]],["p-bd6d200f",[[1,"dnn-permissions-grid",{permissions:[1040],roleGroups:[16],roles:[16],resx:[16],foundUsers:[16],selectedRoleGroupId:[32],userQuery:[32],pickedUser:[32],localResx:[32],focused:[32]},null,{foundUsers:["handleFoundUsersChanged"],resx:["resxChanged"]}]]],["p-bc2d2d54",[[1,"dnn-fieldset",{focused:[1540],disabled:[1540],invalid:[1540],label:[1],floatLabel:[1540,"float-label"],helpText:[1,"help-text"],resizable:[1],customValidityMessage:[32],setFocused:[64],setBlurred:[64],disable:[64],enable:[64],pinLabel:[64],unpinLabel:[64],setValidity:[64]}]]]],e)}));
|
|
2
2
|
//# sourceMappingURL=dnn.esm.js.map
|
package/dist/dnn/dnn.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","color","contrastColor","lightColor","darkColor","label","readonly","localization","name","helpText","useContrastColor","useLightColor","useDarkColor","currentColor","focused","width","height","resx","quality","preventUndersized","view","localResx","fileName","clear","value","required","disabled","suggestions","renderSuggestion","totalSuggestions","preloadThresholdPixels","autocomplete","valid","customValidityMessage","selectedIndex","positionInitialized","lastScrollTop","displayValue","checkValidity","setCustomValidity","type","min","max","minlength","maxlength","multiple","pattern","step","disableValidityReporting","allowShowPassword","inputmode","resizable","rows","expanded","hasChildren","expandText","collapseText","language","useGradient","sortDirection","checked","showDropdownButton","showDropdownMenu","splitterWidth","splitWidthPercentage","leftWidth","rightWidth","setSplitWidthPercentage","getSplitWidthPercentage","useIntermediate","colorBoxHeight","rgbDisplay","hslDisplay","hexDisplay","allowedExtensions","allowCameraMode","captureQuality","maxFileSize","canTakeSnapshots","takingPicture","fileTooLarge","invalidExtension","placeholder","debounced","debounceTime","query","tabTitle","visible","show","hide","tabTitles","selectedTabTitle","transitionDuration","updateSize","backdropDismiss","closeText","showCloseButton","appearance","formButtonType","reversed","size","confirm","confirmYesText","confirmNoText","confirmMessage","modalVisible","permissions","roleGroups","roles","foundUsers","selectedRoleGroupId","userQuery","pickedUser","invalid","floatLabel","setFocused","setBlurred","disable","enable","pinLabel","unpinLabel","setValidity"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.22.2 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"0HAOA,IAAIA,EAAe,KAUjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACrBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACjD,CACE,OAAOC,EAAeJ,EAAK,EClB7BH,IAAeQ,MAAKC,MAAOC,UACnBC,IACN,OAAOC,EAAc,sCAAsC,CAACC,MAAA,OAAAC,cAAA,wBAAAC,WAAA,qBAAAC,UAAA,oBAAAC,MAAA,IAAAC,SAAA,IAAAC,aAAA,KAAAC,KAAA,IAAAC,SAAA,gBAAAC,iBAAA,yBAAAC,cAAA,sBAAAC,aAAA,qBAAAC,aAAA,KAAAC,QAAA,YAAAD,aAAA,oEAAAE,MAAA,IAAAC,OAAA,IAAAC,KAAA,KAAAC,QAAA,IAAAC,kBAAA,yBAAAX,KAAA,IAAAY,KAAA,KAAAC,UAAA,KAAAC,SAAA,KAAAR,QAAA,KAAAS,MAAA,YAAAN,KAAA,2DAAAZ,MAAA,IAAAG,KAAA,IAAAC,SAAA,gBAAAe,MAAA,OAAAC,SAAA,IAAAC,SAAA,IAAAC,YAAA,KAAAC,iBAAA,KAAAC,iBAAA,wBAAAC,uBAAA,+BAAAC,aAAA,IAAAjB,QAAA,KAAAkB,MAAA,KAAAC,sBAAA,KAAAC,cAAA,KAAAC,oBAAA,KAAAC,cAAA,KAAAC,aAAA,KAAAC,cAAA,KAAAC,kBAAA,
|
|
1
|
+
{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","color","contrastColor","lightColor","darkColor","label","readonly","localization","name","helpText","useContrastColor","useLightColor","useDarkColor","currentColor","focused","width","height","resx","quality","preventUndersized","view","localResx","fileName","clear","value","required","disabled","suggestions","renderSuggestion","totalSuggestions","preloadThresholdPixels","autocomplete","valid","customValidityMessage","selectedIndex","positionInitialized","lastScrollTop","displayValue","checkValidity","setCustomValidity","type","min","max","minlength","maxlength","multiple","pattern","step","disableValidityReporting","allowShowPassword","inputmode","resizable","rows","expanded","hasChildren","expandText","collapseText","language","useGradient","sortDirection","checked","showDropdownButton","showDropdownMenu","splitterWidth","splitWidthPercentage","leftWidth","rightWidth","setSplitWidthPercentage","getSplitWidthPercentage","useIntermediate","colorBoxHeight","rgbDisplay","hslDisplay","hexDisplay","allowedExtensions","allowCameraMode","captureQuality","maxFileSize","canTakeSnapshots","takingPicture","fileTooLarge","invalidExtension","placeholder","debounced","debounceTime","query","tabTitle","visible","show","hide","tabTitles","selectedTabTitle","transitionDuration","updateSize","backdropDismiss","closeText","showCloseButton","appearance","formButtonType","reversed","size","confirm","confirmYesText","confirmNoText","confirmMessage","modalVisible","permissions","roleGroups","roles","foundUsers","selectedRoleGroupId","userQuery","pickedUser","invalid","floatLabel","setFocused","setBlurred","disable","enable","pinLabel","unpinLabel","setValidity"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.22.2 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as i,c as t,h as e,H as s,g as n}from"./p-91d08ab2.js";import{D as h}from"./p-78c57746.js";const o=":host{display:inline-block;--foreground-color:var(--dnn-color-foreground, #000);--background-color:var(--dnn-color-background, #fff);--focus-color:var(--dnn-color-primary, #3792ED);--danger-color:var(--dnn-color-danger, #900);--control-radius:var(--dnn-controls-radius, 3px)}dnn-fieldset{width:100%}@keyframes shift{0%{background-position:0% 0}50%{background-position:100% 0}100%{background-position:200% 0}}.inner-container{display:flex;justify-content:space-between;position:relative;width:100%}.inner-container input{border:none;outline:none;background-color:transparent;color:var(--foreground-color);text-align:var(--input-text-align);width:100%}.inner-container svg.chevron-down{height:1rem;width:auto;transform:scale(1.2);cursor:pointer}.inner-container ul{position:absolute;border:1px solid lightgray;margin:0;padding:var(--dnn-controls-radius, 3px) 0;overflow-y:auto;width:100%;box-shadow:2px 2px 6px 1px rgba(0, 0, 0, 0.3);background-color:var(--dnn-color-background, white);border-radius:var(--dnn-controls-radius, 3px);z-index:2;display:none;scroll-behavior:smooth}.inner-container ul.show{display:block}.inner-container ul li{display:block;list-style-type:none;cursor:pointer;padding:0 0.5rem}.inner-container ul li.selected{background-color:lightgray}.inner-container ul li:hover{background-color:lightgray}.inner-container ul .loading{width:100%;height:0.5rem;border-radius:0.5rem;background:linear-gradient(to right, var(--background-color) 0%, var(--foreground-color) 50%, var(--background-color) 100%);background-size:200% 100%;animation:shift 2s linear infinite;width:75%;margin:0 auto;opacity:0.5}";const r=o;var a=undefined&&undefined.__decorate||function(i,t,e,s){var n=arguments.length,h=n<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,e):s,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")h=Reflect.decorate(i,t,e,s);else for(var r=i.length-1;r>=0;r--)if(o=i[r])h=(n<3?o(h):n>3?o(t,e,h):o(t,e))||h;return n>3&&h&&Object.defineProperty(t,e,h),h};const d=class{constructor(e){i(this,e);this.valueChange=t(this,"valueChange",7);this.valueInput=t(this,"valueInput",7);this.needMoreItems=t(this,"needMoreItems",7);this.searchQueryChanged=t(this,"searchQueryChanged",7);this.itemSelected=t(this,"itemSelected",7);if(e.$hostElement$["s-ei"]){this.internals=e.$hostElement$["s-ei"]}else{this.internals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.internals}this.adjustDropdownPosition=()=>{var i=this.findAverageSuggestionHeight();requestAnimationFrame((()=>{this.positionInitialized=true}));var t=window.innerHeight-this.inputField.getBoundingClientRect().bottom;const e=parseFloat(getComputedStyle(document.documentElement).fontSize);const s=t>3*i+3*e;if(s){this.suggestionsContainer.style.top="1.2rem"}else{this.suggestionsContainer.style.bottom="1.2rem"}if(s){this.suggestionsContainer.style.maxHeight=`${t-3*e}px`}else{this.suggestionsContainer.style.maxHeight=`${this.inputField.getBoundingClientRect().top-3*e}px`}this.checkIfMoreItemsNeeded()};this.label=undefined;this.name=undefined;this.helpText=undefined;this.value=undefined;this.required=undefined;this.disabled=undefined;this.suggestions=[];this.renderSuggestion=undefined;this.totalSuggestions=undefined;this.preloadThresholdPixels=1e3;this.autocomplete="off";this.focused=false;this.valid=true;this.customValidityMessage=undefined;this.selectedIndex=undefined;this.positionInitialized=false;this.lastScrollTop=0;this.displayValue=""}async checkValidity(){var i=this.inputField.checkValidity();if(!i){this.fieldset.setValidity(false,this.inputField.validationMessage)}this.fieldset.setValidity(true,"");return this.inputField.validity}async setCustomValidity(i){if(i==undefined||i==""){this.inputField.setCustomValidity("");this.valid=true;this.fieldset.setValidity(true);return}this.inputField.setCustomValidity(i);this.valid=false;this.fieldset.setValidity(false,i)}handleValueChange(i){this.displayValue=i;this.selectedIndex=this.suggestions.findIndex((t=>t.value===i))}handleClick(i){const t=i.composedPath();if(!t.includes(this.element)){this.focused=false}}componentDidRender(){if(this.focused&&this.suggestions.length>0&&!this.positionInitialized){this.adjustDropdownPosition()}}formResetCallback(){this.inputField.setCustomValidity("");this.valid=true;this.value="";this.internals.setValidity({});this.internals.setFormValue("")}handleInput(i){const t=i.target.value;this.displayValue=t;this.value=t;var e=this.inputField.checkValidity();this.valid=e;this.valueInput.emit(t);this.handleSearchQueryChanged(t)}handleSearchQueryChanged(i){this.searchQueryChanged.emit(i)}handleInvalid(){this.valid=false;if(this.customValidityMessage==undefined){this.customValidityMessage=this.inputField.validationMessage}}handleChange(){this.valueChange.emit(this.value);if(this.name!=undefined){var i=new FormData;i.append(this.name,this.value.toString());this.internals.setFormValue(i)}}shouldLabelFloat(){if(this.focused){return false}if(this.value!=undefined&&this.value!=""){return false}return true}findAverageSuggestionHeight(){const i=this.suggestionsContainer.querySelectorAll("li");var t=0;for(let e=0;e<i.length;e++){t+=i[e].clientHeight}return t/i.length}handleKeyDown(i){var t;if(i.key==="ArrowDown"){i.preventDefault();if(this.selectedIndex==undefined){this.selectedIndex=0}else{this.selectedIndex=Math.min(this.selectedIndex+1,this.suggestions.length-1)}}if(i.key==="ArrowUp"){i.preventDefault();if(this.selectedIndex==undefined){this.selectedIndex=this.suggestions.length-1}else{this.selectedIndex=Math.max(this.selectedIndex-1,0)}}this.value=((t=this.suggestions[this.selectedIndex])===null||t===void 0?void 0:t.value)||this.value;if(i.key==="Enter"){var e=this.suggestions[this.selectedIndex];this.value=e.value;this.inputField.value=e.label;this.itemSelected.emit(e.value);this.focused=false}if(i.key==="Tab"){this.focused=false}}selectItem(i,t){i.preventDefault();i.stopPropagation();this.selectedIndex=t;this.value=this.suggestions[this.selectedIndex].value;this.displayValue=this.suggestions[this.selectedIndex].label;this.inputField.value=this.displayValue;this.checkValidity();this.focused=false;this.itemSelected.emit(this.suggestions[this.selectedIndex].value)}getVirtualScrollHeight(){const i=this.findAverageSuggestionHeight();const t=this.totalSuggestions-this.suggestions.length;return i*t}handleDropdownClick(){this.handleSearchQueryChanged(this.value)}handleSuggestionsScroll(){const i=this.suggestionsContainer;const t=i.scrollTop;if(t>this.lastScrollTop){const e=i.querySelector(".loading");if(e==undefined){this.lastScrollTop=t;return}const s=e.offsetTop;const n=e.offsetHeight;const h=s+n;const o=t+i.clientHeight;if(o>h){i.scrollTop=h-i.clientHeight}this.checkIfMoreItemsNeeded()}this.lastScrollTop=t}checkIfMoreItemsNeeded(){const i=this.suggestionsContainer;const t=i.querySelector(".loading");if(t==undefined)return;const e=i.scrollTop+i.clientHeight;const s=t.offsetTop;if(s-e<this.preloadThresholdPixels){const i={searchTerm:this.inputField.value};this.needMoreItems.emit(i)}}handleBlur(){var i=this.inputField.checkValidity();this.valid=i;this.fieldset.setValidity(i,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}render(){var i;return e(s,{key:"e4721cc0e2110853787b552f1353c94d8483287b",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},e("dnn-fieldset",{key:"0881da2521817503d78f15cd1fd9b777654b108d",ref:i=>this.fieldset=i,invalid:!this.valid,focused:this.focused,label:`${(i=this.label)!==null&&i!==void 0?i:""}${this.required?" *":""}`,helpText:this.helpText,id:this.labelId,disabled:this.disabled,floatLabel:this.shouldLabelFloat()},e("div",{key:"ac5590e129b624f1ba1c012448897515017db086",class:"inner-container"},e("input",{key:"779f3a6e00dff6319b2d94c6bb903e9b495d1746",ref:i=>this.inputField=i,name:this.name,type:"search",role:"combobox","aria-haspopup":"listbox","aria-expanded":this.focused.toString(),"aria-activedescendant":this.selectedIndex!==undefined?`option-${this.selectedIndex}`:undefined,disabled:this.disabled,required:this.required,autoComplete:this.autocomplete,value:this.displayValue,onFocus:()=>{this.searchQueryChanged.emit(this.value||"");this.focused=true},onBlur:()=>this.handleBlur(),onInput:i=>this.handleInput(i),onInvalid:()=>this.handleInvalid(),onChange:()=>this.handleChange(),"aria-labelledby":this.labelId,onKeyDown:i=>this.handleKeyDown(i)}),e("ul",{key:"32448159bf989944d974bdba2ca42cf30f089272",class:this.focused&&this.suggestions.length>0?"show":"",role:"listbox",ref:i=>this.suggestionsContainer=i,onScroll:()=>this.handleSuggestionsScroll()},this.suggestions.map(((i,t)=>e("li",{id:`option-${t}`,role:"option","aria-selected":this.selectedIndex==t,class:this.selectedIndex==t?"selected":"",onClick:i=>this.selectItem(i,t)},this.renderSuggestion!=undefined?this.renderSuggestion(i):i.label))),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&e("div",{key:"d4bee8ab76bb9058740f1fb6a0faf06e9446f859",class:"loading"}),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&this.positionInitialized&&e("div",{key:"54539c1e08aa3cd521306a942df62835099f3560",style:{height:`${this.getVirtualScrollHeight()}px`}})),e("svg",{key:"43a4b159fcd84253003375dbf5cf95818539b410",onClick:()=>this.handleDropdownClick(),class:"chevron-down",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},e("path",{key:"c752ed998df5b38322b13f8636f172c645f2ca8a",d:"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z"})))))}static get formAssociated(){return true}get element(){return n(this)}static get watchers(){return{value:["handleValueChange"]}}};a([h(300)],d.prototype,"handleSearchQueryChanged",null);a([h(100)],d.prototype,"handleSuggestionsScroll",null);a([h()],d.prototype,"checkIfMoreItemsNeeded",null);d.style=r;export{d as dnn_autocomplete};
|
|
2
|
+
//# sourceMappingURL=p-a9d8a942.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["dnnAutocompleteCss","DnnAutocompleteStyle0","DnnAutocomplete","this","adjustDropdownPosition","itemHeight","findAverageSuggestionHeight","requestAnimationFrame","positionInitialized","spaceBelow","window","innerHeight","inputField","getBoundingClientRect","bottom","rem","parseFloat","getComputedStyle","document","documentElement","fontSize","fitsDown","suggestionsContainer","style","top","maxHeight","checkIfMoreItemsNeeded","checkValidity","validity","fieldset","setValidity","validationMessage","setCustomValidity","message","undefined","valid","handleValueChange","newValue","displayValue","selectedIndex","suggestions","findIndex","s","value","handleClick","e","path","composedPath","includes","element","focused","componentDidRender","length","formResetCallback","internals","setFormValue","handleInput","inputValue","target","valueInput","emit","handleSearchQueryChanged","searchQueryChanged","handleInvalid","customValidityMessage","handleChange","valueChange","name","data","FormData","append","toString","shouldLabelFloat","suggestionItems","querySelectorAll","totalHeight","i","clientHeight","handleKeyDown","key","preventDefault","Math","min","max","_a","selectedItem","label","itemSelected","selectItem","index","stopPropagation","getVirtualScrollHeight","upcomingItems","totalSuggestions","handleDropdownClick","handleSuggestionsScroll","container","currentScrollTop","scrollTop","lastScrollTop","loadingDiv","querySelector","loadingDivPosition","offsetTop","loadingDivHeight","offsetHeight","loadingDivBottom","visibleBottom","scrollPosition","preloadThresholdPixels","eventArgs","searchTerm","needMoreItems","handleBlur","render","h","Host","tabIndex","onFocus","focus","onBlur","blur","ref","el","invalid","required","helpText","id","labelId","disabled","floatLabel","class","type","role","autoComplete","autocomplete","onInput","onInvalid","onChange","onKeyDown","onScroll","map","suggestion","onClick","renderSuggestion","height","xmlns","viewBox","d","__decorate","Debounce"],"sources":["src/components/dnn-autocomplete/dnn-autocomplete.scss?tag=dnn-autocomplete&encapsulation=shadow","src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n /** @prop --foreground-color: Defines the foreground color. */\n --foreground-color: var(--dnn-color-foreground, #000);\n\n /** @prop --background-color: Defines the background color. */\n --background-color: var(--dnn-color-background, #fff);\n\n /** @prop --focus-color: Defines the color when the component is focused. */\n --focus-color: var(--dnn-color-primary, #3792ED);\n\n /** @prop --danger-color: Defines the danger color used for invalid data. */\n --danger-color: var(--dnn-color-danger, #900);\n\n /** @prop --control-radius: Defines the radius for the control corners. */\n --control-radius: var(--dnn-controls-radius, 3px);\n}\n\ndnn-fieldset{\n width: 100%;\n}\n\n@keyframes shift {\n 0% {\n background-position: 0% 0;\n }\n 50% {\n background-position: 100% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n.inner-container{\n display: flex;\n justify-content: space-between;\n position: relative;\n width: 100%;\n\n input {\n border: none;\n outline: none;\n background-color: transparent;\n color: var(--foreground-color);\n text-align: var(--input-text-align);\n width: 100%;\n }\n\n svg.chevron-down{\n height: 1rem;\n width: auto;\n transform: scale(1.2);\n cursor: pointer;\n }\n\n ul{\n position: absolute;\n border: 1px solid lightgray;\n margin: 0;\n padding: var(--dnn-controls-radius, 3px) 0;\n overflow-y: auto;\n width: 100%;\n box-shadow: 2px 2px 6px 1px rgb(0 0 0 / 30%);\n background-color: var(--dnn-color-background, white);\n border-radius: var(--dnn-controls-radius, 3px);\n z-index: 2;\n display: none;\n scroll-behavior: smooth;\n &.show{\n display: block;\n }\n li {\n display: block;\n list-style-type: none;\n cursor: pointer;\n padding: 0 0.5rem;\n &.selected {\n background-color: lightgray;\n }\n &:hover {\n background-color: lightgray;\n }\n }\n .loading {\n width: 100%;\n height: 0.5rem;\n border-radius: 0.5rem;\n background: linear-gradient(\n to right,\n var(--background-color) 0%,\n var(--foreground-color) 50%,\n var(--background-color) 100%);\n background-size: 200% 100%;\n animation: shift 2s linear infinite;\n width: 75%;\n margin: 0 auto;\n opacity: 0.5;\n }\n }\n}\n","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen, Watch } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n \n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions: number;\n \n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n /** Defines the type of automatic completion the browser could use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete: string = \"off\";\n\n @Element() element: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n this.fieldset.setValidity(true, \"\");\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n @State() selectedIndex: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n @State() displayValue: string = \"\";\n\n @Watch(\"value\")\n handleValueChange(newValue: string) {\n this.displayValue = newValue;\n\n // Find the index of the selected item\n this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);\n }\n \n /** attacth the internals for form validation */\n @AttachInternals() internals: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n \n componentDidRender(){\n if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n this.adjustDropdownPosition();\n }\n }\n\n private inputField!: HTMLInputElement;\n private suggestionsContainer: HTMLUListElement;\n private labelId: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n \n private handleInput(e: Event) {\n const inputValue = (e.target as HTMLInputElement).value;\n this.displayValue = inputValue;\n this.value = inputValue;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(inputValue);\n this.handleSearchQueryChanged(inputValue);\n }\n\n @Debounce(300)\n private handleSearchQueryChanged(value: string) {\n this.searchQueryChanged.emit(value);\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined) {\n this.customValidityMessage = this.inputField.validationMessage;\n }\n }\n\n private handleChange() {\n this.valueChange.emit(this.value);\n if (this.name != undefined) {\n var data = new FormData();\n data.append(this.name, this.value.toString());\n this.internals.setFormValue(data);\n }\n }\n\n /** Check if the label should float */\n private shouldLabelFloat(): boolean {\n if (this.focused) {\n return false;\n }\n\n if (this.value != undefined && this.value != \"\") {\n return false;\n }\n\n return true;\n }\n\n private findAverageSuggestionHeight(): number {\n const suggestionItems = this.suggestionsContainer.querySelectorAll(\"li\");\n var totalHeight = 0;\n for (let i = 0; i < suggestionItems.length; i++) {\n totalHeight += suggestionItems[i].clientHeight;\n }\n return totalHeight / suggestionItems.length;\n }\n\n private readonly adjustDropdownPosition = () => {\n var itemHeight = this.findAverageSuggestionHeight();\n requestAnimationFrame(() => {\n this.positionInitialized = true;\n });\n\n // If we can fit 3 items below the input and there is still 3em left, we show the dropdown under.\n // Otherwise, we show it above.\n var spaceBelow = window.innerHeight - this.inputField.getBoundingClientRect().bottom;\n const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);\n const fitsDown = spaceBelow > 3 * itemHeight + 3 * rem;\n if (fitsDown) {\n this.suggestionsContainer.style.top = \"1.2rem\";\n }\n else {\n this.suggestionsContainer.style.bottom = \"1.2rem\";\n }\n\n // Set the max height to not overflow the screen.\n if (fitsDown){\n this.suggestionsContainer.style.maxHeight = `${spaceBelow - 3 * rem}px`;\n }\n else {\n this.suggestionsContainer.style.maxHeight = `${this.inputField.getBoundingClientRect().top - 3 * rem}px`;\n }\n\n this.checkIfMoreItemsNeeded();\n }\n\n private handleKeyDown(e: KeyboardEvent): void {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = 0;\n } else {\n this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n }\n }\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = this.suggestions.length - 1;\n } else {\n this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n }\n }\n this.value = this.suggestions[this.selectedIndex]?.value || this.value;\n if (e.key === \"Enter\") {\n var selectedItem = this.suggestions[this.selectedIndex];\n this.value = selectedItem.value;\n this.inputField.value = selectedItem.label;\n this.itemSelected.emit(selectedItem.value);\n this.focused = false;\n }\n if (e.key === \"Tab\"){\n this.focused = false;\n }\n }\n\n private selectItem(e: Event, index: number): void {\n e.preventDefault();\n e.stopPropagation();\n this.selectedIndex = index;\n this.value = this.suggestions[this.selectedIndex].value;\n this.displayValue = this.suggestions[this.selectedIndex].label;\n this.inputField.value = this.displayValue;\n this.checkValidity();\n this.focused = false;\n this.itemSelected.emit(this.suggestions[this.selectedIndex].value)\n }\n\n private getVirtualScrollHeight(): number {\n const itemHeight = this.findAverageSuggestionHeight();\n const upcomingItems = this.totalSuggestions - this.suggestions.length;\n return itemHeight * upcomingItems;\n }\n\n private handleDropdownClick(): void {\n this.handleSearchQueryChanged(this.value);\n }\n\n @Debounce(100)\n private handleSuggestionsScroll(): void {\n const container = this.suggestionsContainer;\n const currentScrollTop = container.scrollTop;\n\n // Only act if we are scrolling down\n if (currentScrollTop > this.lastScrollTop) {\n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n if (loadingDiv == undefined) {\n this.lastScrollTop = currentScrollTop;\n return;\n }\n\n const loadingDivPosition = loadingDiv.offsetTop;\n const loadingDivHeight = loadingDiv.offsetHeight;\n const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n // Calculate the visible bottom of the scroll container\n const visibleBottom = currentScrollTop + container.clientHeight;\n\n // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n if (visibleBottom > loadingDivBottom) {\n // Adjust scrollTop so it doesn't scroll past the loading div\n container.scrollTop = loadingDivBottom - container.clientHeight;\n }\n\n // Check if more items are needed based on the position of the loading div\n this.checkIfMoreItemsNeeded();\n }\n\n // Update the last scroll position\n this.lastScrollTop = currentScrollTop;\n }\n\n @Debounce()\n private checkIfMoreItemsNeeded() {\n const container = this.suggestionsContainer;\n \n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n if (loadingDiv == undefined) return; // Exit if there's no loading div\n \n const scrollPosition = container.scrollTop + container.clientHeight;\n const loadingDivPosition = loadingDiv.offsetTop;\n \n // Check if the loading div is within the threshold of becoming visible\n if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n const eventArgs: NeedMoreItemsEventArgs = {\n searchTerm: this.inputField.value,\n };\n this.needMoreItems.emit(eventArgs);\n }\n }\n\n handleBlur(): void {\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n value={this.displayValue}\n onFocus={() => {\n this.searchQueryChanged.emit(this.value || \"\");\n this.focused = true;\n }}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n <ul\n class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n role=\"listbox\"\n ref={el => this.suggestionsContainer = el}\n onScroll={() => this.handleSuggestionsScroll()}\n >\n {this.suggestions.map((suggestion, index) => (\n <li\n id={`option-${index}`}\n role=\"option\"\n aria-selected={this.selectedIndex == index}\n class={this.selectedIndex == index ? \"selected\" : \"\"}\n onClick={e => this.selectItem(e, index)}\n >\n {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n </li>\n ))}\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n <div class=\"loading\">\n </div>\n }\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n </div>\n }\n </ul>\n <svg\n onClick={() => this.handleDropdownClick()}\n class=\"chevron-down\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -960 960 960\">\n <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n </svg>\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n}"],"mappings":"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","ignoreList":[]}
|
|
@@ -94,6 +94,11 @@ const DnnAutocomplete = class {
|
|
|
94
94
|
this.valid = false;
|
|
95
95
|
this.fieldset.setValidity(false, message);
|
|
96
96
|
}
|
|
97
|
+
handleValueChange(newValue) {
|
|
98
|
+
this.displayValue = newValue;
|
|
99
|
+
// Find the index of the selected item
|
|
100
|
+
this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);
|
|
101
|
+
}
|
|
97
102
|
/** Listener for mouse down event */
|
|
98
103
|
handleClick(e) {
|
|
99
104
|
const path = e.composedPath();
|
|
@@ -258,15 +263,18 @@ const DnnAutocomplete = class {
|
|
|
258
263
|
}
|
|
259
264
|
render() {
|
|
260
265
|
var _a;
|
|
261
|
-
return (h(Host, { key: '
|
|
266
|
+
return (h(Host, { key: 'e4721cc0e2110853787b552f1353c94d8483287b', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("dnn-fieldset", { key: '0881da2521817503d78f15cd1fd9b777654b108d', ref: el => this.fieldset = el, invalid: !this.valid, focused: this.focused, label: `${(_a = this.label) !== null && _a !== void 0 ? _a : ""}${this.required ? " *" : ""}`, helpText: this.helpText, id: this.labelId, disabled: this.disabled, floatLabel: this.shouldLabelFloat() }, h("div", { key: 'ac5590e129b624f1ba1c012448897515017db086', class: "inner-container" }, h("input", { key: '779f3a6e00dff6319b2d94c6bb903e9b495d1746', ref: (el) => this.inputField = el, name: this.name, type: "search", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.focused.toString(), "aria-activedescendant": this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined, disabled: this.disabled, required: this.required, autoComplete: this.autocomplete, value: this.displayValue, onFocus: () => {
|
|
262
267
|
this.searchQueryChanged.emit(this.value || "");
|
|
263
268
|
this.focused = true;
|
|
264
|
-
}, onBlur: () => this.handleBlur(), onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId, onKeyDown: e => this.handleKeyDown(e) }), h("ul", { key: '
|
|
265
|
-
h("div", { key: '
|
|
266
|
-
h("div", { key: '
|
|
269
|
+
}, onBlur: () => this.handleBlur(), onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId, onKeyDown: e => this.handleKeyDown(e) }), h("ul", { key: '32448159bf989944d974bdba2ca42cf30f089272', class: this.focused && this.suggestions.length > 0 ? "show" : "", role: "listbox", ref: el => this.suggestionsContainer = el, onScroll: () => this.handleSuggestionsScroll() }, this.suggestions.map((suggestion, index) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": this.selectedIndex == index, class: this.selectedIndex == index ? "selected" : "", onClick: e => this.selectItem(e, index) }, this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label))), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&
|
|
270
|
+
h("div", { key: 'd4bee8ab76bb9058740f1fb6a0faf06e9446f859', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
|
|
271
|
+
h("div", { key: '54539c1e08aa3cd521306a942df62835099f3560', style: { height: `${this.getVirtualScrollHeight()}px` } })), h("svg", { key: '43a4b159fcd84253003375dbf5cf95818539b410', onClick: () => this.handleDropdownClick(), class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: 'c752ed998df5b38322b13f8636f172c645f2ca8a', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
|
|
267
272
|
}
|
|
268
273
|
static get formAssociated() { return true; }
|
|
269
274
|
get element() { return getElement(this); }
|
|
275
|
+
static get watchers() { return {
|
|
276
|
+
"value": ["handleValueChange"]
|
|
277
|
+
}; }
|
|
270
278
|
};
|
|
271
279
|
__decorate([
|
|
272
280
|
Debounce(300)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dnn-autocomplete.entry.js","mappings":"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","names":[],"sources":["src/components/dnn-autocomplete/dnn-autocomplete.scss?tag=dnn-autocomplete&encapsulation=shadow","src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n /** @prop --foreground-color: Defines the foreground color. */\n --foreground-color: var(--dnn-color-foreground, #000);\n\n /** @prop --background-color: Defines the background color. */\n --background-color: var(--dnn-color-background, #fff);\n\n /** @prop --focus-color: Defines the color when the component is focused. */\n --focus-color: var(--dnn-color-primary, #3792ED);\n\n /** @prop --danger-color: Defines the danger color used for invalid data. */\n --danger-color: var(--dnn-color-danger, #900);\n\n /** @prop --control-radius: Defines the radius for the control corners. */\n --control-radius: var(--dnn-controls-radius, 3px);\n}\n\ndnn-fieldset{\n width: 100%;\n}\n\n@keyframes shift {\n 0% {\n background-position: 0% 0;\n }\n 50% {\n background-position: 100% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n.inner-container{\n display: flex;\n justify-content: space-between;\n position: relative;\n width: 100%;\n\n input {\n border: none;\n outline: none;\n background-color: transparent;\n color: var(--foreground-color);\n text-align: var(--input-text-align);\n width: 100%;\n }\n\n svg.chevron-down{\n height: 1rem;\n width: auto;\n transform: scale(1.2);\n cursor: pointer;\n }\n\n ul{\n position: absolute;\n border: 1px solid lightgray;\n margin: 0;\n padding: var(--dnn-controls-radius, 3px) 0;\n overflow-y: auto;\n width: 100%;\n box-shadow: 2px 2px 6px 1px rgb(0 0 0 / 30%);\n background-color: var(--dnn-color-background, white);\n border-radius: var(--dnn-controls-radius, 3px);\n z-index: 2;\n display: none;\n scroll-behavior: smooth;\n &.show{\n display: block;\n }\n li {\n display: block;\n list-style-type: none;\n cursor: pointer;\n padding: 0 0.5rem;\n &.selected {\n background-color: lightgray;\n }\n &:hover {\n background-color: lightgray;\n }\n }\n .loading {\n width: 100%;\n height: 0.5rem;\n border-radius: 0.5rem;\n background: linear-gradient(\n to right,\n var(--background-color) 0%,\n var(--foreground-color) 50%,\n var(--background-color) 100%);\n background-size: 200% 100%;\n animation: shift 2s linear infinite;\n width: 75%;\n margin: 0 auto;\n opacity: 0.5;\n }\n }\n}\n","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n \n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions: number;\n \n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n /** Defines the type of automatic completion the browser could use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete: string = \"off\";\n\n @Element() element: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n this.fieldset.setValidity(true, \"\");\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n @State() selectedIndex: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n @State() displayValue: string = \"\";\n \n /** attacth the internals for form validation */\n @AttachInternals() internals: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n \n componentDidRender(){\n if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n this.adjustDropdownPosition();\n }\n }\n\n private inputField!: HTMLInputElement;\n private suggestionsContainer: HTMLUListElement;\n private labelId: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n \n private handleInput(e: Event) {\n const inputValue = (e.target as HTMLInputElement).value;\n this.displayValue = inputValue;\n this.value = inputValue;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(inputValue);\n this.handleSearchQueryChanged(inputValue);\n }\n\n @Debounce(300)\n private handleSearchQueryChanged(value: string) {\n this.searchQueryChanged.emit(value);\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined) {\n this.customValidityMessage = this.inputField.validationMessage;\n }\n }\n\n private handleChange() {\n this.valueChange.emit(this.value);\n if (this.name != undefined) {\n var data = new FormData();\n data.append(this.name, this.value.toString());\n this.internals.setFormValue(data);\n }\n }\n\n /** Check if the label should float */\n private shouldLabelFloat(): boolean {\n if (this.focused) {\n return false;\n }\n\n if (this.value != undefined && this.value != \"\") {\n return false;\n }\n\n return true;\n }\n\n private findAverageSuggestionHeight(): number {\n const suggestionItems = this.suggestionsContainer.querySelectorAll(\"li\");\n var totalHeight = 0;\n for (let i = 0; i < suggestionItems.length; i++) {\n totalHeight += suggestionItems[i].clientHeight;\n }\n return totalHeight / suggestionItems.length;\n }\n\n private readonly adjustDropdownPosition = () => {\n var itemHeight = this.findAverageSuggestionHeight();\n requestAnimationFrame(() => {\n this.positionInitialized = true;\n });\n\n // If we can fit 3 items below the input and there is still 3em left, we show the dropdown under.\n // Otherwise, we show it above.\n var spaceBelow = window.innerHeight - this.inputField.getBoundingClientRect().bottom;\n const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);\n const fitsDown = spaceBelow > 3 * itemHeight + 3 * rem;\n if (fitsDown) {\n this.suggestionsContainer.style.top = \"1.2rem\";\n }\n else {\n this.suggestionsContainer.style.bottom = \"1.2rem\";\n }\n\n // Set the max height to not overflow the screen.\n if (fitsDown){\n this.suggestionsContainer.style.maxHeight = `${spaceBelow - 3 * rem}px`;\n }\n else {\n this.suggestionsContainer.style.maxHeight = `${this.inputField.getBoundingClientRect().top - 3 * rem}px`;\n }\n\n this.checkIfMoreItemsNeeded();\n }\n\n private handleKeyDown(e: KeyboardEvent): void {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = 0;\n } else {\n this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n }\n }\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = this.suggestions.length - 1;\n } else {\n this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n }\n }\n this.value = this.suggestions[this.selectedIndex]?.value || this.value;\n if (e.key === \"Enter\") {\n var selectedItem = this.suggestions[this.selectedIndex];\n this.value = selectedItem.value;\n this.inputField.value = selectedItem.label;\n this.itemSelected.emit(selectedItem.value);\n this.focused = false;\n }\n if (e.key === \"Tab\"){\n this.focused = false;\n }\n }\n\n private selectItem(e: Event, index: number): void {\n e.preventDefault();\n e.stopPropagation();\n this.selectedIndex = index;\n this.value = this.suggestions[this.selectedIndex].value;\n this.displayValue = this.suggestions[this.selectedIndex].label;\n this.inputField.value = this.displayValue;\n this.checkValidity();\n this.focused = false;\n this.itemSelected.emit(this.suggestions[this.selectedIndex].value)\n }\n\n private getVirtualScrollHeight(): number {\n const itemHeight = this.findAverageSuggestionHeight();\n const upcomingItems = this.totalSuggestions - this.suggestions.length;\n return itemHeight * upcomingItems;\n }\n\n private handleDropdownClick(): void {\n this.handleSearchQueryChanged(this.value);\n }\n\n @Debounce(100)\n private handleSuggestionsScroll(): void {\n const container = this.suggestionsContainer;\n const currentScrollTop = container.scrollTop;\n\n // Only act if we are scrolling down\n if (currentScrollTop > this.lastScrollTop) {\n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n if (loadingDiv == undefined) {\n this.lastScrollTop = currentScrollTop;\n return;\n }\n\n const loadingDivPosition = loadingDiv.offsetTop;\n const loadingDivHeight = loadingDiv.offsetHeight;\n const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n // Calculate the visible bottom of the scroll container\n const visibleBottom = currentScrollTop + container.clientHeight;\n\n // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n if (visibleBottom > loadingDivBottom) {\n // Adjust scrollTop so it doesn't scroll past the loading div\n container.scrollTop = loadingDivBottom - container.clientHeight;\n }\n\n // Check if more items are needed based on the position of the loading div\n this.checkIfMoreItemsNeeded();\n }\n\n // Update the last scroll position\n this.lastScrollTop = currentScrollTop;\n }\n\n @Debounce()\n private checkIfMoreItemsNeeded() {\n const container = this.suggestionsContainer;\n \n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n if (loadingDiv == undefined) return; // Exit if there's no loading div\n \n const scrollPosition = container.scrollTop + container.clientHeight;\n const loadingDivPosition = loadingDiv.offsetTop;\n \n // Check if the loading div is within the threshold of becoming visible\n if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n const eventArgs: NeedMoreItemsEventArgs = {\n searchTerm: this.inputField.value,\n };\n this.needMoreItems.emit(eventArgs);\n }\n }\n\n handleBlur(): void {\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n value={this.displayValue}\n onFocus={() => {\n this.searchQueryChanged.emit(this.value || \"\");\n this.focused = true;\n }}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n <ul\n class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n role=\"listbox\"\n ref={el => this.suggestionsContainer = el}\n onScroll={() => this.handleSuggestionsScroll()}\n >\n {this.suggestions.map((suggestion, index) => (\n <li\n id={`option-${index}`}\n role=\"option\"\n aria-selected={this.selectedIndex == index}\n class={this.selectedIndex == index ? \"selected\" : \"\"}\n onClick={e => this.selectItem(e, index)}\n >\n {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n </li>\n ))}\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n <div class=\"loading\">\n </div>\n }\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n </div>\n }\n </ul>\n <svg\n onClick={() => this.handleDropdownClick()}\n class=\"chevron-down\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -960 960 960\">\n <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n </svg>\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n}"],"version":3}
|
|
1
|
+
{"file":"dnn-autocomplete.entry.js","mappings":"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","names":[],"sources":["src/components/dnn-autocomplete/dnn-autocomplete.scss?tag=dnn-autocomplete&encapsulation=shadow","src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n /** @prop --foreground-color: Defines the foreground color. */\n --foreground-color: var(--dnn-color-foreground, #000);\n\n /** @prop --background-color: Defines the background color. */\n --background-color: var(--dnn-color-background, #fff);\n\n /** @prop --focus-color: Defines the color when the component is focused. */\n --focus-color: var(--dnn-color-primary, #3792ED);\n\n /** @prop --danger-color: Defines the danger color used for invalid data. */\n --danger-color: var(--dnn-color-danger, #900);\n\n /** @prop --control-radius: Defines the radius for the control corners. */\n --control-radius: var(--dnn-controls-radius, 3px);\n}\n\ndnn-fieldset{\n width: 100%;\n}\n\n@keyframes shift {\n 0% {\n background-position: 0% 0;\n }\n 50% {\n background-position: 100% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n.inner-container{\n display: flex;\n justify-content: space-between;\n position: relative;\n width: 100%;\n\n input {\n border: none;\n outline: none;\n background-color: transparent;\n color: var(--foreground-color);\n text-align: var(--input-text-align);\n width: 100%;\n }\n\n svg.chevron-down{\n height: 1rem;\n width: auto;\n transform: scale(1.2);\n cursor: pointer;\n }\n\n ul{\n position: absolute;\n border: 1px solid lightgray;\n margin: 0;\n padding: var(--dnn-controls-radius, 3px) 0;\n overflow-y: auto;\n width: 100%;\n box-shadow: 2px 2px 6px 1px rgb(0 0 0 / 30%);\n background-color: var(--dnn-color-background, white);\n border-radius: var(--dnn-controls-radius, 3px);\n z-index: 2;\n display: none;\n scroll-behavior: smooth;\n &.show{\n display: block;\n }\n li {\n display: block;\n list-style-type: none;\n cursor: pointer;\n padding: 0 0.5rem;\n &.selected {\n background-color: lightgray;\n }\n &:hover {\n background-color: lightgray;\n }\n }\n .loading {\n width: 100%;\n height: 0.5rem;\n border-radius: 0.5rem;\n background: linear-gradient(\n to right,\n var(--background-color) 0%,\n var(--foreground-color) 50%,\n var(--background-color) 100%);\n background-size: 200% 100%;\n animation: shift 2s linear infinite;\n width: 75%;\n margin: 0 auto;\n opacity: 0.5;\n }\n }\n}\n","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen, Watch } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n \n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions: number;\n \n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n /** Defines the type of automatic completion the browser could use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete: string = \"off\";\n\n @Element() element: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n this.fieldset.setValidity(true, \"\");\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n @State() selectedIndex: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n @State() displayValue: string = \"\";\n\n @Watch(\"value\")\n handleValueChange(newValue: string) {\n this.displayValue = newValue;\n\n // Find the index of the selected item\n this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);\n }\n \n /** attacth the internals for form validation */\n @AttachInternals() internals: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n \n componentDidRender(){\n if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n this.adjustDropdownPosition();\n }\n }\n\n private inputField!: HTMLInputElement;\n private suggestionsContainer: HTMLUListElement;\n private labelId: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n \n private handleInput(e: Event) {\n const inputValue = (e.target as HTMLInputElement).value;\n this.displayValue = inputValue;\n this.value = inputValue;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(inputValue);\n this.handleSearchQueryChanged(inputValue);\n }\n\n @Debounce(300)\n private handleSearchQueryChanged(value: string) {\n this.searchQueryChanged.emit(value);\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined) {\n this.customValidityMessage = this.inputField.validationMessage;\n }\n }\n\n private handleChange() {\n this.valueChange.emit(this.value);\n if (this.name != undefined) {\n var data = new FormData();\n data.append(this.name, this.value.toString());\n this.internals.setFormValue(data);\n }\n }\n\n /** Check if the label should float */\n private shouldLabelFloat(): boolean {\n if (this.focused) {\n return false;\n }\n\n if (this.value != undefined && this.value != \"\") {\n return false;\n }\n\n return true;\n }\n\n private findAverageSuggestionHeight(): number {\n const suggestionItems = this.suggestionsContainer.querySelectorAll(\"li\");\n var totalHeight = 0;\n for (let i = 0; i < suggestionItems.length; i++) {\n totalHeight += suggestionItems[i].clientHeight;\n }\n return totalHeight / suggestionItems.length;\n }\n\n private readonly adjustDropdownPosition = () => {\n var itemHeight = this.findAverageSuggestionHeight();\n requestAnimationFrame(() => {\n this.positionInitialized = true;\n });\n\n // If we can fit 3 items below the input and there is still 3em left, we show the dropdown under.\n // Otherwise, we show it above.\n var spaceBelow = window.innerHeight - this.inputField.getBoundingClientRect().bottom;\n const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);\n const fitsDown = spaceBelow > 3 * itemHeight + 3 * rem;\n if (fitsDown) {\n this.suggestionsContainer.style.top = \"1.2rem\";\n }\n else {\n this.suggestionsContainer.style.bottom = \"1.2rem\";\n }\n\n // Set the max height to not overflow the screen.\n if (fitsDown){\n this.suggestionsContainer.style.maxHeight = `${spaceBelow - 3 * rem}px`;\n }\n else {\n this.suggestionsContainer.style.maxHeight = `${this.inputField.getBoundingClientRect().top - 3 * rem}px`;\n }\n\n this.checkIfMoreItemsNeeded();\n }\n\n private handleKeyDown(e: KeyboardEvent): void {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = 0;\n } else {\n this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n }\n }\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = this.suggestions.length - 1;\n } else {\n this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n }\n }\n this.value = this.suggestions[this.selectedIndex]?.value || this.value;\n if (e.key === \"Enter\") {\n var selectedItem = this.suggestions[this.selectedIndex];\n this.value = selectedItem.value;\n this.inputField.value = selectedItem.label;\n this.itemSelected.emit(selectedItem.value);\n this.focused = false;\n }\n if (e.key === \"Tab\"){\n this.focused = false;\n }\n }\n\n private selectItem(e: Event, index: number): void {\n e.preventDefault();\n e.stopPropagation();\n this.selectedIndex = index;\n this.value = this.suggestions[this.selectedIndex].value;\n this.displayValue = this.suggestions[this.selectedIndex].label;\n this.inputField.value = this.displayValue;\n this.checkValidity();\n this.focused = false;\n this.itemSelected.emit(this.suggestions[this.selectedIndex].value)\n }\n\n private getVirtualScrollHeight(): number {\n const itemHeight = this.findAverageSuggestionHeight();\n const upcomingItems = this.totalSuggestions - this.suggestions.length;\n return itemHeight * upcomingItems;\n }\n\n private handleDropdownClick(): void {\n this.handleSearchQueryChanged(this.value);\n }\n\n @Debounce(100)\n private handleSuggestionsScroll(): void {\n const container = this.suggestionsContainer;\n const currentScrollTop = container.scrollTop;\n\n // Only act if we are scrolling down\n if (currentScrollTop > this.lastScrollTop) {\n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n if (loadingDiv == undefined) {\n this.lastScrollTop = currentScrollTop;\n return;\n }\n\n const loadingDivPosition = loadingDiv.offsetTop;\n const loadingDivHeight = loadingDiv.offsetHeight;\n const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n // Calculate the visible bottom of the scroll container\n const visibleBottom = currentScrollTop + container.clientHeight;\n\n // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n if (visibleBottom > loadingDivBottom) {\n // Adjust scrollTop so it doesn't scroll past the loading div\n container.scrollTop = loadingDivBottom - container.clientHeight;\n }\n\n // Check if more items are needed based on the position of the loading div\n this.checkIfMoreItemsNeeded();\n }\n\n // Update the last scroll position\n this.lastScrollTop = currentScrollTop;\n }\n\n @Debounce()\n private checkIfMoreItemsNeeded() {\n const container = this.suggestionsContainer;\n \n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n if (loadingDiv == undefined) return; // Exit if there's no loading div\n \n const scrollPosition = container.scrollTop + container.clientHeight;\n const loadingDivPosition = loadingDiv.offsetTop;\n \n // Check if the loading div is within the threshold of becoming visible\n if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n const eventArgs: NeedMoreItemsEventArgs = {\n searchTerm: this.inputField.value,\n };\n this.needMoreItems.emit(eventArgs);\n }\n }\n\n handleBlur(): void {\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n value={this.displayValue}\n onFocus={() => {\n this.searchQueryChanged.emit(this.value || \"\");\n this.focused = true;\n }}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n <ul\n class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n role=\"listbox\"\n ref={el => this.suggestionsContainer = el}\n onScroll={() => this.handleSuggestionsScroll()}\n >\n {this.suggestions.map((suggestion, index) => (\n <li\n id={`option-${index}`}\n role=\"option\"\n aria-selected={this.selectedIndex == index}\n class={this.selectedIndex == index ? \"selected\" : \"\"}\n onClick={e => this.selectItem(e, index)}\n >\n {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n </li>\n ))}\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n <div class=\"loading\">\n </div>\n }\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n </div>\n }\n </ul>\n <svg\n onClick={() => this.handleDropdownClick()}\n class=\"chevron-down\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -960 960 960\">\n <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n </svg>\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n}"],"version":3}
|
package/dist/esm/dnn.js
CHANGED
|
@@ -16,7 +16,7 @@ var patchBrowser = () => {
|
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(async (options) => {
|
|
18
18
|
await globalScripts();
|
|
19
|
-
return bootstrapLazy([["dnn-color-input",[[65,"dnn-color-input",{"color":[1025],"contrastColor":[1025,"contrast-color"],"lightColor":[1025,"light-color"],"darkColor":[1025,"dark-color"],"label":[1],"readonly":[4],"localization":[16],"name":[1],"helpText":[1,"help-text"],"useContrastColor":[4,"use-contrast-color"],"useLightColor":[4,"use-light-color"],"useDarkColor":[4,"use-dark-color"],"currentColor":[32],"focused":[32]},null,{"currentColor":["currentColorChanged"]}]]],["dnn-image-cropper",[[65,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"name":[1],"view":[32],"localResx":[32],"fileName":[32],"focused":[32],"clear":[64]},null,{"resx":["resxChanged"]}]]],["dnn-autocomplete",[[65,"dnn-autocomplete",{"label":[1],"name":[1],"helpText":[1,"help-text"],"value":[1537],"required":[4],"disabled":[4],"suggestions":[16],"renderSuggestion":[16],"totalSuggestions":[2,"total-suggestions"],"preloadThresholdPixels":[2,"preload-threshold-pixels"],"autocomplete":[1],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"displayValue":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","handleClick"]]]]],["dnn-input",[[65,"dnn-input",{"type":[1025],"label":[1],"name":[1],"value":[1544],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"min":[8],"max":[8],"minlength":[2],"maxlength":[2],"multiple":[4],"pattern":[1],"readonly":[4],"step":[8],"disableValidityReporting":[4,"disable-validity-reporting"],"allowShowPassword":[4,"allow-show-password"],"inputmode":[1],"focused":[32],"valid":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-select",[[65,"dnn-select",{"label":[1],"name":[1],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"disableValidityReporting":[4,"disable-validity-reporting"],"autocomplete":[1],"value":[1537],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64]}]]],["dnn-textarea",[[65,"dnn-textarea",{"resizable":[1],"value":[1025],"label":[1],"name":[1],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"minlength":[2],"maxlength":[2],"readonly":[4],"rows":[2],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-treeview-item",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32],"focused":[32]},null,{"expanded":["watchExpanded"]}]]],["dnn-chevron",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540],"focused":[32]},null,{"expanded":["handleExpandedChanged"]}]]],["dnn-monaco-editor",[[66,"dnn-monaco-editor",{"language":[1],"value":[1025],"name":[1],"focused":[32]},null,{"language":["languageChanged"],"value":["valueChanged"]}]]],["dnn-progress-bar",[[1,"dnn-progress-bar",{"value":[2],"max":[2],"useGradient":[4,"use-gradient"]}]]],["dnn-richtext",[[65,"dnn-richtext",{"options":[16],"value":[1],"name":[1],"focused":[32]},null,{"value":["watchValueChanged"]}]]],["dnn-sort-icon",[[1,"dnn-sort-icon",{"sortDirection":[1025,"sort-direction"],"focused":[32]}]]],["dnn-toggle",[[65,"dnn-toggle",{"checked":[1028],"disabled":[4],"name":[1],"value":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["checkedChanged"]}]]],["dnn-vertical-overflow-menu",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-checkbox",[[65,"dnn-checkbox",{"checked":[1025],"useIntermediate":[4,"use-intermediate"],"value":[1],"name":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["handleCheckedChange"]}]]],["dnn-color-picker",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32],"focused":[32]},null,{"currentColor":["handeCurrentColorChanged"]}]]],["dnn-dropzone",[[65,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"maxFileSize":[2,"max-file-size"],"name":[1],"canTakeSnapshots":[32],"takingPicture":[32],"fileTooLarge":[32],"invalidExtension":[32],"localResx":[32],"focused":[32]},null,{"resx":["resxChanged"]}]]],["dnn-searchbox",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"debounceTime":[2,"debounce-time"],"query":[1025],"focused":[32]},null,{"query":["handleQueryChanged"]}]]],["dnn-tab_2",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}],[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-collapsible",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{"expanded":["handledExpandedChanged"]}]]],["dnn-modal",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"resizable":[4],"showCloseButton":[4,"show-close-button"],"visible":[1540],"show":[64],"hide":[64]}]]],["dnn-button",[[65,"dnn-button",{"type":[1],"appearance":[1],"formButtonType":[1,"form-button-type"],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"focused":[32],"modalVisible":[32]}]]],["dnn-permissions-grid",[[1,"dnn-permissions-grid",{"permissions":[1040],"roleGroups":[16],"roles":[16],"resx":[16],"foundUsers":[16],"selectedRoleGroupId":[32],"userQuery":[32],"pickedUser":[32],"localResx":[32],"focused":[32]},null,{"foundUsers":["handleFoundUsersChanged"],"resx":["resxChanged"]}]]],["dnn-fieldset",[[1,"dnn-fieldset",{"focused":[1540],"disabled":[1540],"invalid":[1540],"label":[1],"floatLabel":[1540,"float-label"],"helpText":[1,"help-text"],"resizable":[1],"customValidityMessage":[32],"setFocused":[64],"setBlurred":[64],"disable":[64],"enable":[64],"pinLabel":[64],"unpinLabel":[64],"setValidity":[64]}]]]], options);
|
|
19
|
+
return bootstrapLazy([["dnn-color-input",[[65,"dnn-color-input",{"color":[1025],"contrastColor":[1025,"contrast-color"],"lightColor":[1025,"light-color"],"darkColor":[1025,"dark-color"],"label":[1],"readonly":[4],"localization":[16],"name":[1],"helpText":[1,"help-text"],"useContrastColor":[4,"use-contrast-color"],"useLightColor":[4,"use-light-color"],"useDarkColor":[4,"use-dark-color"],"currentColor":[32],"focused":[32]},null,{"currentColor":["currentColorChanged"]}]]],["dnn-image-cropper",[[65,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"name":[1],"view":[32],"localResx":[32],"fileName":[32],"focused":[32],"clear":[64]},null,{"resx":["resxChanged"]}]]],["dnn-autocomplete",[[65,"dnn-autocomplete",{"label":[1],"name":[1],"helpText":[1,"help-text"],"value":[1537],"required":[4],"disabled":[4],"suggestions":[16],"renderSuggestion":[16],"totalSuggestions":[2,"total-suggestions"],"preloadThresholdPixels":[2,"preload-threshold-pixels"],"autocomplete":[1],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"displayValue":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","handleClick"]],{"value":["handleValueChange"]}]]],["dnn-input",[[65,"dnn-input",{"type":[1025],"label":[1],"name":[1],"value":[1544],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"min":[8],"max":[8],"minlength":[2],"maxlength":[2],"multiple":[4],"pattern":[1],"readonly":[4],"step":[8],"disableValidityReporting":[4,"disable-validity-reporting"],"allowShowPassword":[4,"allow-show-password"],"inputmode":[1],"focused":[32],"valid":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-select",[[65,"dnn-select",{"label":[1],"name":[1],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"disableValidityReporting":[4,"disable-validity-reporting"],"autocomplete":[1],"value":[1537],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64]}]]],["dnn-textarea",[[65,"dnn-textarea",{"resizable":[1],"value":[1025],"label":[1],"name":[1],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"minlength":[2],"maxlength":[2],"readonly":[4],"rows":[2],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-treeview-item",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32],"focused":[32]},null,{"expanded":["watchExpanded"]}]]],["dnn-chevron",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540],"focused":[32]},null,{"expanded":["handleExpandedChanged"]}]]],["dnn-monaco-editor",[[66,"dnn-monaco-editor",{"language":[1],"value":[1025],"name":[1],"focused":[32]},null,{"language":["languageChanged"],"value":["valueChanged"]}]]],["dnn-progress-bar",[[1,"dnn-progress-bar",{"value":[2],"max":[2],"useGradient":[4,"use-gradient"]}]]],["dnn-richtext",[[65,"dnn-richtext",{"options":[16],"value":[1],"name":[1],"focused":[32]},null,{"value":["watchValueChanged"]}]]],["dnn-sort-icon",[[1,"dnn-sort-icon",{"sortDirection":[1025,"sort-direction"],"focused":[32]}]]],["dnn-toggle",[[65,"dnn-toggle",{"checked":[1028],"disabled":[4],"name":[1],"value":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["checkedChanged"]}]]],["dnn-vertical-overflow-menu",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-checkbox",[[65,"dnn-checkbox",{"checked":[1025],"useIntermediate":[4,"use-intermediate"],"value":[1],"name":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["handleCheckedChange"]}]]],["dnn-color-picker",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32],"focused":[32]},null,{"currentColor":["handeCurrentColorChanged"]}]]],["dnn-dropzone",[[65,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"maxFileSize":[2,"max-file-size"],"name":[1],"canTakeSnapshots":[32],"takingPicture":[32],"fileTooLarge":[32],"invalidExtension":[32],"localResx":[32],"focused":[32]},null,{"resx":["resxChanged"]}]]],["dnn-searchbox",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"debounceTime":[2,"debounce-time"],"query":[1025],"focused":[32]},null,{"query":["handleQueryChanged"]}]]],["dnn-tab_2",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}],[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-collapsible",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{"expanded":["handledExpandedChanged"]}]]],["dnn-modal",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"resizable":[4],"showCloseButton":[4,"show-close-button"],"visible":[1540],"show":[64],"hide":[64]}]]],["dnn-button",[[65,"dnn-button",{"type":[1],"appearance":[1],"formButtonType":[1,"form-button-type"],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"focused":[32],"modalVisible":[32]}]]],["dnn-permissions-grid",[[1,"dnn-permissions-grid",{"permissions":[1040],"roleGroups":[16],"roles":[16],"resx":[16],"foundUsers":[16],"selectedRoleGroupId":[32],"userQuery":[32],"pickedUser":[32],"localResx":[32],"focused":[32]},null,{"foundUsers":["handleFoundUsersChanged"],"resx":["resxChanged"]}]]],["dnn-fieldset",[[1,"dnn-fieldset",{"focused":[1540],"disabled":[1540],"invalid":[1540],"label":[1],"floatLabel":[1540,"float-label"],"helpText":[1,"help-text"],"resizable":[1],"customValidityMessage":[32],"setFocused":[64],"setBlurred":[64],"disable":[64],"enable":[64],"pinLabel":[64],"unpinLabel":[64],"setValidity":[64]}]]]], options);
|
|
20
20
|
});
|
|
21
21
|
|
|
22
22
|
//# sourceMappingURL=dnn.js.map
|
package/dist/esm/loader.js
CHANGED
|
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await globalScripts();
|
|
8
|
-
return bootstrapLazy([["dnn-color-input",[[65,"dnn-color-input",{"color":[1025],"contrastColor":[1025,"contrast-color"],"lightColor":[1025,"light-color"],"darkColor":[1025,"dark-color"],"label":[1],"readonly":[4],"localization":[16],"name":[1],"helpText":[1,"help-text"],"useContrastColor":[4,"use-contrast-color"],"useLightColor":[4,"use-light-color"],"useDarkColor":[4,"use-dark-color"],"currentColor":[32],"focused":[32]},null,{"currentColor":["currentColorChanged"]}]]],["dnn-image-cropper",[[65,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"name":[1],"view":[32],"localResx":[32],"fileName":[32],"focused":[32],"clear":[64]},null,{"resx":["resxChanged"]}]]],["dnn-autocomplete",[[65,"dnn-autocomplete",{"label":[1],"name":[1],"helpText":[1,"help-text"],"value":[1537],"required":[4],"disabled":[4],"suggestions":[16],"renderSuggestion":[16],"totalSuggestions":[2,"total-suggestions"],"preloadThresholdPixels":[2,"preload-threshold-pixels"],"autocomplete":[1],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"displayValue":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","handleClick"]]]]],["dnn-input",[[65,"dnn-input",{"type":[1025],"label":[1],"name":[1],"value":[1544],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"min":[8],"max":[8],"minlength":[2],"maxlength":[2],"multiple":[4],"pattern":[1],"readonly":[4],"step":[8],"disableValidityReporting":[4,"disable-validity-reporting"],"allowShowPassword":[4,"allow-show-password"],"inputmode":[1],"focused":[32],"valid":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-select",[[65,"dnn-select",{"label":[1],"name":[1],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"disableValidityReporting":[4,"disable-validity-reporting"],"autocomplete":[1],"value":[1537],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64]}]]],["dnn-textarea",[[65,"dnn-textarea",{"resizable":[1],"value":[1025],"label":[1],"name":[1],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"minlength":[2],"maxlength":[2],"readonly":[4],"rows":[2],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-treeview-item",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32],"focused":[32]},null,{"expanded":["watchExpanded"]}]]],["dnn-chevron",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540],"focused":[32]},null,{"expanded":["handleExpandedChanged"]}]]],["dnn-monaco-editor",[[66,"dnn-monaco-editor",{"language":[1],"value":[1025],"name":[1],"focused":[32]},null,{"language":["languageChanged"],"value":["valueChanged"]}]]],["dnn-progress-bar",[[1,"dnn-progress-bar",{"value":[2],"max":[2],"useGradient":[4,"use-gradient"]}]]],["dnn-richtext",[[65,"dnn-richtext",{"options":[16],"value":[1],"name":[1],"focused":[32]},null,{"value":["watchValueChanged"]}]]],["dnn-sort-icon",[[1,"dnn-sort-icon",{"sortDirection":[1025,"sort-direction"],"focused":[32]}]]],["dnn-toggle",[[65,"dnn-toggle",{"checked":[1028],"disabled":[4],"name":[1],"value":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["checkedChanged"]}]]],["dnn-vertical-overflow-menu",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-checkbox",[[65,"dnn-checkbox",{"checked":[1025],"useIntermediate":[4,"use-intermediate"],"value":[1],"name":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["handleCheckedChange"]}]]],["dnn-color-picker",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32],"focused":[32]},null,{"currentColor":["handeCurrentColorChanged"]}]]],["dnn-dropzone",[[65,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"maxFileSize":[2,"max-file-size"],"name":[1],"canTakeSnapshots":[32],"takingPicture":[32],"fileTooLarge":[32],"invalidExtension":[32],"localResx":[32],"focused":[32]},null,{"resx":["resxChanged"]}]]],["dnn-searchbox",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"debounceTime":[2,"debounce-time"],"query":[1025],"focused":[32]},null,{"query":["handleQueryChanged"]}]]],["dnn-tab_2",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}],[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-collapsible",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{"expanded":["handledExpandedChanged"]}]]],["dnn-modal",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"resizable":[4],"showCloseButton":[4,"show-close-button"],"visible":[1540],"show":[64],"hide":[64]}]]],["dnn-button",[[65,"dnn-button",{"type":[1],"appearance":[1],"formButtonType":[1,"form-button-type"],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"focused":[32],"modalVisible":[32]}]]],["dnn-permissions-grid",[[1,"dnn-permissions-grid",{"permissions":[1040],"roleGroups":[16],"roles":[16],"resx":[16],"foundUsers":[16],"selectedRoleGroupId":[32],"userQuery":[32],"pickedUser":[32],"localResx":[32],"focused":[32]},null,{"foundUsers":["handleFoundUsersChanged"],"resx":["resxChanged"]}]]],["dnn-fieldset",[[1,"dnn-fieldset",{"focused":[1540],"disabled":[1540],"invalid":[1540],"label":[1],"floatLabel":[1540,"float-label"],"helpText":[1,"help-text"],"resizable":[1],"customValidityMessage":[32],"setFocused":[64],"setBlurred":[64],"disable":[64],"enable":[64],"pinLabel":[64],"unpinLabel":[64],"setValidity":[64]}]]]], options);
|
|
8
|
+
return bootstrapLazy([["dnn-color-input",[[65,"dnn-color-input",{"color":[1025],"contrastColor":[1025,"contrast-color"],"lightColor":[1025,"light-color"],"darkColor":[1025,"dark-color"],"label":[1],"readonly":[4],"localization":[16],"name":[1],"helpText":[1,"help-text"],"useContrastColor":[4,"use-contrast-color"],"useLightColor":[4,"use-light-color"],"useDarkColor":[4,"use-dark-color"],"currentColor":[32],"focused":[32]},null,{"currentColor":["currentColorChanged"]}]]],["dnn-image-cropper",[[65,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"name":[1],"view":[32],"localResx":[32],"fileName":[32],"focused":[32],"clear":[64]},null,{"resx":["resxChanged"]}]]],["dnn-autocomplete",[[65,"dnn-autocomplete",{"label":[1],"name":[1],"helpText":[1,"help-text"],"value":[1537],"required":[4],"disabled":[4],"suggestions":[16],"renderSuggestion":[16],"totalSuggestions":[2,"total-suggestions"],"preloadThresholdPixels":[2,"preload-threshold-pixels"],"autocomplete":[1],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"displayValue":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","handleClick"]],{"value":["handleValueChange"]}]]],["dnn-input",[[65,"dnn-input",{"type":[1025],"label":[1],"name":[1],"value":[1544],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"min":[8],"max":[8],"minlength":[2],"maxlength":[2],"multiple":[4],"pattern":[1],"readonly":[4],"step":[8],"disableValidityReporting":[4,"disable-validity-reporting"],"allowShowPassword":[4,"allow-show-password"],"inputmode":[1],"focused":[32],"valid":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-select",[[65,"dnn-select",{"label":[1],"name":[1],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"disableValidityReporting":[4,"disable-validity-reporting"],"autocomplete":[1],"value":[1537],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64]}]]],["dnn-textarea",[[65,"dnn-textarea",{"resizable":[1],"value":[1025],"label":[1],"name":[1],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"minlength":[2],"maxlength":[2],"readonly":[4],"rows":[2],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-treeview-item",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32],"focused":[32]},null,{"expanded":["watchExpanded"]}]]],["dnn-chevron",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540],"focused":[32]},null,{"expanded":["handleExpandedChanged"]}]]],["dnn-monaco-editor",[[66,"dnn-monaco-editor",{"language":[1],"value":[1025],"name":[1],"focused":[32]},null,{"language":["languageChanged"],"value":["valueChanged"]}]]],["dnn-progress-bar",[[1,"dnn-progress-bar",{"value":[2],"max":[2],"useGradient":[4,"use-gradient"]}]]],["dnn-richtext",[[65,"dnn-richtext",{"options":[16],"value":[1],"name":[1],"focused":[32]},null,{"value":["watchValueChanged"]}]]],["dnn-sort-icon",[[1,"dnn-sort-icon",{"sortDirection":[1025,"sort-direction"],"focused":[32]}]]],["dnn-toggle",[[65,"dnn-toggle",{"checked":[1028],"disabled":[4],"name":[1],"value":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["checkedChanged"]}]]],["dnn-vertical-overflow-menu",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-checkbox",[[65,"dnn-checkbox",{"checked":[1025],"useIntermediate":[4,"use-intermediate"],"value":[1],"name":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["handleCheckedChange"]}]]],["dnn-color-picker",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32],"focused":[32]},null,{"currentColor":["handeCurrentColorChanged"]}]]],["dnn-dropzone",[[65,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"maxFileSize":[2,"max-file-size"],"name":[1],"canTakeSnapshots":[32],"takingPicture":[32],"fileTooLarge":[32],"invalidExtension":[32],"localResx":[32],"focused":[32]},null,{"resx":["resxChanged"]}]]],["dnn-searchbox",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"debounceTime":[2,"debounce-time"],"query":[1025],"focused":[32]},null,{"query":["handleQueryChanged"]}]]],["dnn-tab_2",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}],[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-collapsible",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{"expanded":["handledExpandedChanged"]}]]],["dnn-modal",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"resizable":[4],"showCloseButton":[4,"show-close-button"],"visible":[1540],"show":[64],"hide":[64]}]]],["dnn-button",[[65,"dnn-button",{"type":[1],"appearance":[1],"formButtonType":[1,"form-button-type"],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"focused":[32],"modalVisible":[32]}]]],["dnn-permissions-grid",[[1,"dnn-permissions-grid",{"permissions":[1040],"roleGroups":[16],"roles":[16],"resx":[16],"foundUsers":[16],"selectedRoleGroupId":[32],"userQuery":[32],"pickedUser":[32],"localResx":[32],"focused":[32]},null,{"foundUsers":["handleFoundUsersChanged"],"resx":["resxChanged"]}]]],["dnn-fieldset",[[1,"dnn-fieldset",{"focused":[1540],"disabled":[1540],"invalid":[1540],"label":[1],"floatLabel":[1540,"float-label"],"helpText":[1,"help-text"],"resizable":[1],"customValidityMessage":[32],"setFocused":[64],"setBlurred":[64],"disable":[64],"enable":[64],"pinLabel":[64],"unpinLabel":[64],"setValidity":[64]}]]]], options);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { defineCustomElements };
|
|
@@ -57,6 +57,7 @@ export declare class DnnAutocomplete {
|
|
|
57
57
|
positionInitialized: boolean;
|
|
58
58
|
lastScrollTop: number;
|
|
59
59
|
displayValue: string;
|
|
60
|
+
handleValueChange(newValue: string): void;
|
|
60
61
|
/** attacth the internals for form validation */
|
|
61
62
|
internals: ElementInternals;
|
|
62
63
|
/** Listener for mouse down event */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dnncommunity/dnn-elements",
|
|
3
|
-
"version": "0.24.
|
|
3
|
+
"version": "0.24.3-beta.1",
|
|
4
4
|
"description": "Dnn themed custom elements.",
|
|
5
5
|
"repository": "https://github.com/dnncommunity/dnn-elements",
|
|
6
6
|
"homepage": "https://dnncommunity.github.io/dnn-elements",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@chromatic-com/storybook": "^3.1.0",
|
|
37
|
-
"@stencil-community/eslint-plugin": "0.
|
|
37
|
+
"@stencil-community/eslint-plugin": "0.9.0",
|
|
38
38
|
"@stencil/core": "4.22.2",
|
|
39
39
|
"@stencil/react-output-target": "^0.5.1",
|
|
40
40
|
"@stencil/sass": "^3.0.4",
|
|
@@ -55,14 +55,14 @@
|
|
|
55
55
|
"babel-loader": "^9.1.2",
|
|
56
56
|
"eslint": "^8.57.0",
|
|
57
57
|
"eslint-plugin-react": "^7.16.0",
|
|
58
|
-
"eslint-plugin-storybook": "^0.
|
|
58
|
+
"eslint-plugin-storybook": "^0.11.1",
|
|
59
59
|
"gh-pages": "^6.0.0",
|
|
60
60
|
"jest": "^29.7.0",
|
|
61
61
|
"jest-cli": "^29.7.0",
|
|
62
62
|
"license-checker-rseidelsohn": "^4.2.6",
|
|
63
63
|
"lit": "^3.1.0",
|
|
64
64
|
"npm-run-all": "^4.1.5",
|
|
65
|
-
"puppeteer": "^
|
|
65
|
+
"puppeteer": "^23.9.0",
|
|
66
66
|
"react": "^18.2.0",
|
|
67
67
|
"react-dom": "^18.2.0",
|
|
68
68
|
"rollup-plugin-node-polyfills": "^0.2.1",
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as i,c as t,h as e,H as s,g as n}from"./p-91d08ab2.js";import{D as h}from"./p-78c57746.js";const o=":host{display:inline-block;--foreground-color:var(--dnn-color-foreground, #000);--background-color:var(--dnn-color-background, #fff);--focus-color:var(--dnn-color-primary, #3792ED);--danger-color:var(--dnn-color-danger, #900);--control-radius:var(--dnn-controls-radius, 3px)}dnn-fieldset{width:100%}@keyframes shift{0%{background-position:0% 0}50%{background-position:100% 0}100%{background-position:200% 0}}.inner-container{display:flex;justify-content:space-between;position:relative;width:100%}.inner-container input{border:none;outline:none;background-color:transparent;color:var(--foreground-color);text-align:var(--input-text-align);width:100%}.inner-container svg.chevron-down{height:1rem;width:auto;transform:scale(1.2);cursor:pointer}.inner-container ul{position:absolute;border:1px solid lightgray;margin:0;padding:var(--dnn-controls-radius, 3px) 0;overflow-y:auto;width:100%;box-shadow:2px 2px 6px 1px rgba(0, 0, 0, 0.3);background-color:var(--dnn-color-background, white);border-radius:var(--dnn-controls-radius, 3px);z-index:2;display:none;scroll-behavior:smooth}.inner-container ul.show{display:block}.inner-container ul li{display:block;list-style-type:none;cursor:pointer;padding:0 0.5rem}.inner-container ul li.selected{background-color:lightgray}.inner-container ul li:hover{background-color:lightgray}.inner-container ul .loading{width:100%;height:0.5rem;border-radius:0.5rem;background:linear-gradient(to right, var(--background-color) 0%, var(--foreground-color) 50%, var(--background-color) 100%);background-size:200% 100%;animation:shift 2s linear infinite;width:75%;margin:0 auto;opacity:0.5}";const r=o;var a=undefined&&undefined.__decorate||function(i,t,e,s){var n=arguments.length,h=n<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,e):s,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")h=Reflect.decorate(i,t,e,s);else for(var r=i.length-1;r>=0;r--)if(o=i[r])h=(n<3?o(h):n>3?o(t,e,h):o(t,e))||h;return n>3&&h&&Object.defineProperty(t,e,h),h};const d=class{constructor(e){i(this,e);this.valueChange=t(this,"valueChange",7);this.valueInput=t(this,"valueInput",7);this.needMoreItems=t(this,"needMoreItems",7);this.searchQueryChanged=t(this,"searchQueryChanged",7);this.itemSelected=t(this,"itemSelected",7);if(e.$hostElement$["s-ei"]){this.internals=e.$hostElement$["s-ei"]}else{this.internals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.internals}this.adjustDropdownPosition=()=>{var i=this.findAverageSuggestionHeight();requestAnimationFrame((()=>{this.positionInitialized=true}));var t=window.innerHeight-this.inputField.getBoundingClientRect().bottom;const e=parseFloat(getComputedStyle(document.documentElement).fontSize);const s=t>3*i+3*e;if(s){this.suggestionsContainer.style.top="1.2rem"}else{this.suggestionsContainer.style.bottom="1.2rem"}if(s){this.suggestionsContainer.style.maxHeight=`${t-3*e}px`}else{this.suggestionsContainer.style.maxHeight=`${this.inputField.getBoundingClientRect().top-3*e}px`}this.checkIfMoreItemsNeeded()};this.label=undefined;this.name=undefined;this.helpText=undefined;this.value=undefined;this.required=undefined;this.disabled=undefined;this.suggestions=[];this.renderSuggestion=undefined;this.totalSuggestions=undefined;this.preloadThresholdPixels=1e3;this.autocomplete="off";this.focused=false;this.valid=true;this.customValidityMessage=undefined;this.selectedIndex=undefined;this.positionInitialized=false;this.lastScrollTop=0;this.displayValue=""}async checkValidity(){var i=this.inputField.checkValidity();if(!i){this.fieldset.setValidity(false,this.inputField.validationMessage)}this.fieldset.setValidity(true,"");return this.inputField.validity}async setCustomValidity(i){if(i==undefined||i==""){this.inputField.setCustomValidity("");this.valid=true;this.fieldset.setValidity(true);return}this.inputField.setCustomValidity(i);this.valid=false;this.fieldset.setValidity(false,i)}handleClick(i){const t=i.composedPath();if(!t.includes(this.element)){this.focused=false}}componentDidRender(){if(this.focused&&this.suggestions.length>0&&!this.positionInitialized){this.adjustDropdownPosition()}}formResetCallback(){this.inputField.setCustomValidity("");this.valid=true;this.value="";this.internals.setValidity({});this.internals.setFormValue("")}handleInput(i){const t=i.target.value;this.displayValue=t;this.value=t;var e=this.inputField.checkValidity();this.valid=e;this.valueInput.emit(t);this.handleSearchQueryChanged(t)}handleSearchQueryChanged(i){this.searchQueryChanged.emit(i)}handleInvalid(){this.valid=false;if(this.customValidityMessage==undefined){this.customValidityMessage=this.inputField.validationMessage}}handleChange(){this.valueChange.emit(this.value);if(this.name!=undefined){var i=new FormData;i.append(this.name,this.value.toString());this.internals.setFormValue(i)}}shouldLabelFloat(){if(this.focused){return false}if(this.value!=undefined&&this.value!=""){return false}return true}findAverageSuggestionHeight(){const i=this.suggestionsContainer.querySelectorAll("li");var t=0;for(let e=0;e<i.length;e++){t+=i[e].clientHeight}return t/i.length}handleKeyDown(i){var t;if(i.key==="ArrowDown"){i.preventDefault();if(this.selectedIndex==undefined){this.selectedIndex=0}else{this.selectedIndex=Math.min(this.selectedIndex+1,this.suggestions.length-1)}}if(i.key==="ArrowUp"){i.preventDefault();if(this.selectedIndex==undefined){this.selectedIndex=this.suggestions.length-1}else{this.selectedIndex=Math.max(this.selectedIndex-1,0)}}this.value=((t=this.suggestions[this.selectedIndex])===null||t===void 0?void 0:t.value)||this.value;if(i.key==="Enter"){var e=this.suggestions[this.selectedIndex];this.value=e.value;this.inputField.value=e.label;this.itemSelected.emit(e.value);this.focused=false}if(i.key==="Tab"){this.focused=false}}selectItem(i,t){i.preventDefault();i.stopPropagation();this.selectedIndex=t;this.value=this.suggestions[this.selectedIndex].value;this.displayValue=this.suggestions[this.selectedIndex].label;this.inputField.value=this.displayValue;this.checkValidity();this.focused=false;this.itemSelected.emit(this.suggestions[this.selectedIndex].value)}getVirtualScrollHeight(){const i=this.findAverageSuggestionHeight();const t=this.totalSuggestions-this.suggestions.length;return i*t}handleDropdownClick(){this.handleSearchQueryChanged(this.value)}handleSuggestionsScroll(){const i=this.suggestionsContainer;const t=i.scrollTop;if(t>this.lastScrollTop){const e=i.querySelector(".loading");if(e==undefined){this.lastScrollTop=t;return}const s=e.offsetTop;const n=e.offsetHeight;const h=s+n;const o=t+i.clientHeight;if(o>h){i.scrollTop=h-i.clientHeight}this.checkIfMoreItemsNeeded()}this.lastScrollTop=t}checkIfMoreItemsNeeded(){const i=this.suggestionsContainer;const t=i.querySelector(".loading");if(t==undefined)return;const e=i.scrollTop+i.clientHeight;const s=t.offsetTop;if(s-e<this.preloadThresholdPixels){const i={searchTerm:this.inputField.value};this.needMoreItems.emit(i)}}handleBlur(){var i=this.inputField.checkValidity();this.valid=i;this.fieldset.setValidity(i,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}render(){var i;return e(s,{key:"10a0264ebae498078dbfc3fbd6ffa1a2a1b50c0e",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},e("dnn-fieldset",{key:"8f2426b397ba4001ed65255f58878176441950dc",ref:i=>this.fieldset=i,invalid:!this.valid,focused:this.focused,label:`${(i=this.label)!==null&&i!==void 0?i:""}${this.required?" *":""}`,helpText:this.helpText,id:this.labelId,disabled:this.disabled,floatLabel:this.shouldLabelFloat()},e("div",{key:"fad1d2e8567163f4dcea423fe71eacc157fcc350",class:"inner-container"},e("input",{key:"bffb6ee3cbee67db6e280f29092ead301e75f8e8",ref:i=>this.inputField=i,name:this.name,type:"search",role:"combobox","aria-haspopup":"listbox","aria-expanded":this.focused.toString(),"aria-activedescendant":this.selectedIndex!==undefined?`option-${this.selectedIndex}`:undefined,disabled:this.disabled,required:this.required,autoComplete:this.autocomplete,value:this.displayValue,onFocus:()=>{this.searchQueryChanged.emit(this.value||"");this.focused=true},onBlur:()=>this.handleBlur(),onInput:i=>this.handleInput(i),onInvalid:()=>this.handleInvalid(),onChange:()=>this.handleChange(),"aria-labelledby":this.labelId,onKeyDown:i=>this.handleKeyDown(i)}),e("ul",{key:"1cffdc6b12d2337cc89448fd232ca453700e655d",class:this.focused&&this.suggestions.length>0?"show":"",role:"listbox",ref:i=>this.suggestionsContainer=i,onScroll:()=>this.handleSuggestionsScroll()},this.suggestions.map(((i,t)=>e("li",{id:`option-${t}`,role:"option","aria-selected":this.selectedIndex==t,class:this.selectedIndex==t?"selected":"",onClick:i=>this.selectItem(i,t)},this.renderSuggestion!=undefined?this.renderSuggestion(i):i.label))),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&e("div",{key:"2a7bd6440f9d71a11aa44a4ed2ce444c6efced35",class:"loading"}),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&this.positionInitialized&&e("div",{key:"2c7b5655893711bb51fffb97f911308ac6d144ed",style:{height:`${this.getVirtualScrollHeight()}px`}})),e("svg",{key:"55452717a72e3d597bb40ed934db19dbb8ddfd6f",onClick:()=>this.handleDropdownClick(),class:"chevron-down",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},e("path",{key:"e26905040e49403c2bd55c893858eefa4d4d470a",d:"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z"})))))}static get formAssociated(){return true}get element(){return n(this)}};a([h(300)],d.prototype,"handleSearchQueryChanged",null);a([h(100)],d.prototype,"handleSuggestionsScroll",null);a([h()],d.prototype,"checkIfMoreItemsNeeded",null);d.style=r;export{d as dnn_autocomplete};
|
|
2
|
-
//# sourceMappingURL=p-f317208f.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["dnnAutocompleteCss","DnnAutocompleteStyle0","DnnAutocomplete","this","adjustDropdownPosition","itemHeight","findAverageSuggestionHeight","requestAnimationFrame","positionInitialized","spaceBelow","window","innerHeight","inputField","getBoundingClientRect","bottom","rem","parseFloat","getComputedStyle","document","documentElement","fontSize","fitsDown","suggestionsContainer","style","top","maxHeight","checkIfMoreItemsNeeded","checkValidity","validity","fieldset","setValidity","validationMessage","setCustomValidity","message","undefined","valid","handleClick","e","path","composedPath","includes","element","focused","componentDidRender","suggestions","length","formResetCallback","value","internals","setFormValue","handleInput","inputValue","target","displayValue","valueInput","emit","handleSearchQueryChanged","searchQueryChanged","handleInvalid","customValidityMessage","handleChange","valueChange","name","data","FormData","append","toString","shouldLabelFloat","suggestionItems","querySelectorAll","totalHeight","i","clientHeight","handleKeyDown","key","preventDefault","selectedIndex","Math","min","max","_a","selectedItem","label","itemSelected","selectItem","index","stopPropagation","getVirtualScrollHeight","upcomingItems","totalSuggestions","handleDropdownClick","handleSuggestionsScroll","container","currentScrollTop","scrollTop","lastScrollTop","loadingDiv","querySelector","loadingDivPosition","offsetTop","loadingDivHeight","offsetHeight","loadingDivBottom","visibleBottom","scrollPosition","preloadThresholdPixels","eventArgs","searchTerm","needMoreItems","handleBlur","render","h","Host","tabIndex","onFocus","focus","onBlur","blur","ref","el","invalid","required","helpText","id","labelId","disabled","floatLabel","class","type","role","autoComplete","autocomplete","onInput","onInvalid","onChange","onKeyDown","onScroll","map","suggestion","onClick","renderSuggestion","height","xmlns","viewBox","d","__decorate","Debounce"],"sources":["src/components/dnn-autocomplete/dnn-autocomplete.scss?tag=dnn-autocomplete&encapsulation=shadow","src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n /** @prop --foreground-color: Defines the foreground color. */\n --foreground-color: var(--dnn-color-foreground, #000);\n\n /** @prop --background-color: Defines the background color. */\n --background-color: var(--dnn-color-background, #fff);\n\n /** @prop --focus-color: Defines the color when the component is focused. */\n --focus-color: var(--dnn-color-primary, #3792ED);\n\n /** @prop --danger-color: Defines the danger color used for invalid data. */\n --danger-color: var(--dnn-color-danger, #900);\n\n /** @prop --control-radius: Defines the radius for the control corners. */\n --control-radius: var(--dnn-controls-radius, 3px);\n}\n\ndnn-fieldset{\n width: 100%;\n}\n\n@keyframes shift {\n 0% {\n background-position: 0% 0;\n }\n 50% {\n background-position: 100% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n.inner-container{\n display: flex;\n justify-content: space-between;\n position: relative;\n width: 100%;\n\n input {\n border: none;\n outline: none;\n background-color: transparent;\n color: var(--foreground-color);\n text-align: var(--input-text-align);\n width: 100%;\n }\n\n svg.chevron-down{\n height: 1rem;\n width: auto;\n transform: scale(1.2);\n cursor: pointer;\n }\n\n ul{\n position: absolute;\n border: 1px solid lightgray;\n margin: 0;\n padding: var(--dnn-controls-radius, 3px) 0;\n overflow-y: auto;\n width: 100%;\n box-shadow: 2px 2px 6px 1px rgb(0 0 0 / 30%);\n background-color: var(--dnn-color-background, white);\n border-radius: var(--dnn-controls-radius, 3px);\n z-index: 2;\n display: none;\n scroll-behavior: smooth;\n &.show{\n display: block;\n }\n li {\n display: block;\n list-style-type: none;\n cursor: pointer;\n padding: 0 0.5rem;\n &.selected {\n background-color: lightgray;\n }\n &:hover {\n background-color: lightgray;\n }\n }\n .loading {\n width: 100%;\n height: 0.5rem;\n border-radius: 0.5rem;\n background: linear-gradient(\n to right,\n var(--background-color) 0%,\n var(--foreground-color) 50%,\n var(--background-color) 100%);\n background-size: 200% 100%;\n animation: shift 2s linear infinite;\n width: 75%;\n margin: 0 auto;\n opacity: 0.5;\n }\n }\n}\n","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n \n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions: number;\n \n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n /** Defines the type of automatic completion the browser could use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete: string = \"off\";\n\n @Element() element: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n this.fieldset.setValidity(true, \"\");\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n @State() selectedIndex: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n @State() displayValue: string = \"\";\n \n /** attacth the internals for form validation */\n @AttachInternals() internals: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n \n componentDidRender(){\n if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n this.adjustDropdownPosition();\n }\n }\n\n private inputField!: HTMLInputElement;\n private suggestionsContainer: HTMLUListElement;\n private labelId: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n \n private handleInput(e: Event) {\n const inputValue = (e.target as HTMLInputElement).value;\n this.displayValue = inputValue;\n this.value = inputValue;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(inputValue);\n this.handleSearchQueryChanged(inputValue);\n }\n\n @Debounce(300)\n private handleSearchQueryChanged(value: string) {\n this.searchQueryChanged.emit(value);\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined) {\n this.customValidityMessage = this.inputField.validationMessage;\n }\n }\n\n private handleChange() {\n this.valueChange.emit(this.value);\n if (this.name != undefined) {\n var data = new FormData();\n data.append(this.name, this.value.toString());\n this.internals.setFormValue(data);\n }\n }\n\n /** Check if the label should float */\n private shouldLabelFloat(): boolean {\n if (this.focused) {\n return false;\n }\n\n if (this.value != undefined && this.value != \"\") {\n return false;\n }\n\n return true;\n }\n\n private findAverageSuggestionHeight(): number {\n const suggestionItems = this.suggestionsContainer.querySelectorAll(\"li\");\n var totalHeight = 0;\n for (let i = 0; i < suggestionItems.length; i++) {\n totalHeight += suggestionItems[i].clientHeight;\n }\n return totalHeight / suggestionItems.length;\n }\n\n private readonly adjustDropdownPosition = () => {\n var itemHeight = this.findAverageSuggestionHeight();\n requestAnimationFrame(() => {\n this.positionInitialized = true;\n });\n\n // If we can fit 3 items below the input and there is still 3em left, we show the dropdown under.\n // Otherwise, we show it above.\n var spaceBelow = window.innerHeight - this.inputField.getBoundingClientRect().bottom;\n const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);\n const fitsDown = spaceBelow > 3 * itemHeight + 3 * rem;\n if (fitsDown) {\n this.suggestionsContainer.style.top = \"1.2rem\";\n }\n else {\n this.suggestionsContainer.style.bottom = \"1.2rem\";\n }\n\n // Set the max height to not overflow the screen.\n if (fitsDown){\n this.suggestionsContainer.style.maxHeight = `${spaceBelow - 3 * rem}px`;\n }\n else {\n this.suggestionsContainer.style.maxHeight = `${this.inputField.getBoundingClientRect().top - 3 * rem}px`;\n }\n\n this.checkIfMoreItemsNeeded();\n }\n\n private handleKeyDown(e: KeyboardEvent): void {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = 0;\n } else {\n this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n }\n }\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = this.suggestions.length - 1;\n } else {\n this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n }\n }\n this.value = this.suggestions[this.selectedIndex]?.value || this.value;\n if (e.key === \"Enter\") {\n var selectedItem = this.suggestions[this.selectedIndex];\n this.value = selectedItem.value;\n this.inputField.value = selectedItem.label;\n this.itemSelected.emit(selectedItem.value);\n this.focused = false;\n }\n if (e.key === \"Tab\"){\n this.focused = false;\n }\n }\n\n private selectItem(e: Event, index: number): void {\n e.preventDefault();\n e.stopPropagation();\n this.selectedIndex = index;\n this.value = this.suggestions[this.selectedIndex].value;\n this.displayValue = this.suggestions[this.selectedIndex].label;\n this.inputField.value = this.displayValue;\n this.checkValidity();\n this.focused = false;\n this.itemSelected.emit(this.suggestions[this.selectedIndex].value)\n }\n\n private getVirtualScrollHeight(): number {\n const itemHeight = this.findAverageSuggestionHeight();\n const upcomingItems = this.totalSuggestions - this.suggestions.length;\n return itemHeight * upcomingItems;\n }\n\n private handleDropdownClick(): void {\n this.handleSearchQueryChanged(this.value);\n }\n\n @Debounce(100)\n private handleSuggestionsScroll(): void {\n const container = this.suggestionsContainer;\n const currentScrollTop = container.scrollTop;\n\n // Only act if we are scrolling down\n if (currentScrollTop > this.lastScrollTop) {\n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n if (loadingDiv == undefined) {\n this.lastScrollTop = currentScrollTop;\n return;\n }\n\n const loadingDivPosition = loadingDiv.offsetTop;\n const loadingDivHeight = loadingDiv.offsetHeight;\n const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n // Calculate the visible bottom of the scroll container\n const visibleBottom = currentScrollTop + container.clientHeight;\n\n // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n if (visibleBottom > loadingDivBottom) {\n // Adjust scrollTop so it doesn't scroll past the loading div\n container.scrollTop = loadingDivBottom - container.clientHeight;\n }\n\n // Check if more items are needed based on the position of the loading div\n this.checkIfMoreItemsNeeded();\n }\n\n // Update the last scroll position\n this.lastScrollTop = currentScrollTop;\n }\n\n @Debounce()\n private checkIfMoreItemsNeeded() {\n const container = this.suggestionsContainer;\n \n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n if (loadingDiv == undefined) return; // Exit if there's no loading div\n \n const scrollPosition = container.scrollTop + container.clientHeight;\n const loadingDivPosition = loadingDiv.offsetTop;\n \n // Check if the loading div is within the threshold of becoming visible\n if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n const eventArgs: NeedMoreItemsEventArgs = {\n searchTerm: this.inputField.value,\n };\n this.needMoreItems.emit(eventArgs);\n }\n }\n\n handleBlur(): void {\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n value={this.displayValue}\n onFocus={() => {\n this.searchQueryChanged.emit(this.value || \"\");\n this.focused = true;\n }}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n <ul\n class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n role=\"listbox\"\n ref={el => this.suggestionsContainer = el}\n onScroll={() => this.handleSuggestionsScroll()}\n >\n {this.suggestions.map((suggestion, index) => (\n <li\n id={`option-${index}`}\n role=\"option\"\n aria-selected={this.selectedIndex == index}\n class={this.selectedIndex == index ? \"selected\" : \"\"}\n onClick={e => this.selectItem(e, index)}\n >\n {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n </li>\n ))}\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n <div class=\"loading\">\n </div>\n }\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n </div>\n }\n </ul>\n <svg\n onClick={() => this.handleDropdownClick()}\n class=\"chevron-down\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -960 960 960\">\n <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n </svg>\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n}"],"mappings":"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","ignoreList":[]}
|