@dnncommunity/dnn-elements 0.24.0-beta.10 → 0.24.0-beta.11
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 +21 -9
- 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 +24 -11
- 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-9d2a9141.entry.js +2 -0
- package/dist/dnn/p-9d2a9141.entry.js.map +1 -0
- package/dist/esm/dnn-autocomplete.entry.js +21 -9
- 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 +2 -1
- package/package.json +1 -1
- package/dist/dnn/p-27dc2d8f.entry.js +0 -2
- package/dist/dnn/p-27dc2d8f.entry.js.map +0 -1
|
@@ -74,9 +74,15 @@ const DnnAutocomplete = class {
|
|
|
74
74
|
this.selectedIndex = undefined;
|
|
75
75
|
this.positionInitialized = false;
|
|
76
76
|
this.lastScrollTop = 0;
|
|
77
|
+
this.displayValue = "";
|
|
77
78
|
}
|
|
78
79
|
/** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */
|
|
79
80
|
async checkValidity() {
|
|
81
|
+
var validity = this.inputField.checkValidity();
|
|
82
|
+
if (!validity) {
|
|
83
|
+
this.fieldset.setValidity(false, this.inputField.validationMessage);
|
|
84
|
+
}
|
|
85
|
+
this.fieldset.setValidity(true, "");
|
|
80
86
|
return this.inputField.validity;
|
|
81
87
|
}
|
|
82
88
|
/** Can be used to set a custom validity message. */
|
|
@@ -92,7 +98,7 @@ const DnnAutocomplete = class {
|
|
|
92
98
|
this.fieldset.setValidity(false, message);
|
|
93
99
|
}
|
|
94
100
|
/** Listener for mouse down event */
|
|
95
|
-
|
|
101
|
+
handleClick(e) {
|
|
96
102
|
const path = e.composedPath();
|
|
97
103
|
if (!path.includes(this.element)) {
|
|
98
104
|
this.focused = false;
|
|
@@ -112,12 +118,13 @@ const DnnAutocomplete = class {
|
|
|
112
118
|
this.internals.setFormValue("");
|
|
113
119
|
}
|
|
114
120
|
handleInput(e) {
|
|
115
|
-
const
|
|
116
|
-
this.
|
|
121
|
+
const inputValue = e.target.value;
|
|
122
|
+
this.displayValue = inputValue;
|
|
123
|
+
this.value = inputValue;
|
|
117
124
|
var valid = this.inputField.checkValidity();
|
|
118
125
|
this.valid = valid;
|
|
119
|
-
this.valueInput.emit(
|
|
120
|
-
this.handleSearchQueryChanged(
|
|
126
|
+
this.valueInput.emit(inputValue);
|
|
127
|
+
this.handleSearchQueryChanged(inputValue);
|
|
121
128
|
}
|
|
122
129
|
handleSearchQueryChanged(value) {
|
|
123
130
|
this.searchQueryChanged.emit(value);
|
|
@@ -191,6 +198,9 @@ const DnnAutocomplete = class {
|
|
|
191
198
|
e.stopPropagation();
|
|
192
199
|
this.selectedIndex = index;
|
|
193
200
|
this.value = this.suggestions[this.selectedIndex].value;
|
|
201
|
+
this.displayValue = this.suggestions[this.selectedIndex].label;
|
|
202
|
+
this.inputField.value = this.displayValue;
|
|
203
|
+
this.checkValidity();
|
|
194
204
|
this.focused = false;
|
|
195
205
|
this.itemSelected.emit(this.suggestions[this.selectedIndex].value);
|
|
196
206
|
}
|
|
@@ -244,7 +254,6 @@ const DnnAutocomplete = class {
|
|
|
244
254
|
}
|
|
245
255
|
}
|
|
246
256
|
handleBlur() {
|
|
247
|
-
this.focused = false;
|
|
248
257
|
var validity = this.inputField.checkValidity();
|
|
249
258
|
this.valid = validity;
|
|
250
259
|
this.fieldset.setValidity(validity, this.inputField.validationMessage);
|
|
@@ -252,9 +261,12 @@ const DnnAutocomplete = class {
|
|
|
252
261
|
}
|
|
253
262
|
render() {
|
|
254
263
|
var _a;
|
|
255
|
-
return (index.h(index.Host, { key: '
|
|
256
|
-
|
|
257
|
-
|
|
264
|
+
return (index.h(index.Host, { key: '240eab18aec780b662642ce85ee68903c246cd8b', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, index.h("dnn-fieldset", { key: '7749d3b19d0cb7e6dc71f8deb9ff50bcea2390e0', 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: 'fa9b987426ae9c70d583aead57f161c6cd53ef9f', class: "inner-container" }, index.h("input", { key: 'b5c0f2bf1f6cda9de03c5f6ddbe42605076bcb9e', 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: "off", value: this.displayValue, onFocus: () => {
|
|
265
|
+
this.searchQueryChanged.emit(this.value || "");
|
|
266
|
+
this.focused = true;
|
|
267
|
+
}, 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: 'f6f2688374ab8f18db055ccbeb43e08cae06c07b', 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 &&
|
|
268
|
+
index.h("div", { key: '681a43c03121d04e40295c2a84294dfa38304ec8', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
|
|
269
|
+
index.h("div", { key: '35e49fff8bd725da4bb1022db932fd5554daad88', style: { height: `${this.getVirtualScrollHeight()}px` } })), index.h("svg", { key: '7d789d7b160a1a6d8b8a66cc40c714563f39a5e6', onClick: () => this.handleDropdownClick(), class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, index.h("path", { key: 'b542a9084a33294671fbfdd3f8f5388df89a7abc', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
|
|
258
270
|
}
|
|
259
271
|
static get formAssociated() { return true; }
|
|
260
272
|
get element() { return index.getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
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 } 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 @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 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 \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 handleOutsideClick(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 value = (e.target as HTMLInputElement).value;\n this.value = value;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(value);\n this.handleSearchQueryChanged(value);\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.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 this.focused = false\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=\"off\"\n value={this.suggestions.length > 0 && this.selectedIndex != undefined ? this.suggestions[this.selectedIndex].label : this.value}\n onFocus={() => this.focused = true}\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 } 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 @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=\"off\"\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"],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","
|
|
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"],"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"],"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"],"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"],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","
|
|
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"],"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"],"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"],"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;
|
|
@@ -53,9 +53,15 @@ export class DnnAutocomplete {
|
|
|
53
53
|
this.selectedIndex = undefined;
|
|
54
54
|
this.positionInitialized = false;
|
|
55
55
|
this.lastScrollTop = 0;
|
|
56
|
+
this.displayValue = "";
|
|
56
57
|
}
|
|
57
58
|
/** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */
|
|
58
59
|
async checkValidity() {
|
|
60
|
+
var validity = this.inputField.checkValidity();
|
|
61
|
+
if (!validity) {
|
|
62
|
+
this.fieldset.setValidity(false, this.inputField.validationMessage);
|
|
63
|
+
}
|
|
64
|
+
this.fieldset.setValidity(true, "");
|
|
59
65
|
return this.inputField.validity;
|
|
60
66
|
}
|
|
61
67
|
/** Can be used to set a custom validity message. */
|
|
@@ -71,7 +77,7 @@ export class DnnAutocomplete {
|
|
|
71
77
|
this.fieldset.setValidity(false, message);
|
|
72
78
|
}
|
|
73
79
|
/** Listener for mouse down event */
|
|
74
|
-
|
|
80
|
+
handleClick(e) {
|
|
75
81
|
const path = e.composedPath();
|
|
76
82
|
if (!path.includes(this.element)) {
|
|
77
83
|
this.focused = false;
|
|
@@ -91,12 +97,13 @@ export class DnnAutocomplete {
|
|
|
91
97
|
this.internals.setFormValue("");
|
|
92
98
|
}
|
|
93
99
|
handleInput(e) {
|
|
94
|
-
const
|
|
95
|
-
this.
|
|
100
|
+
const inputValue = e.target.value;
|
|
101
|
+
this.displayValue = inputValue;
|
|
102
|
+
this.value = inputValue;
|
|
96
103
|
var valid = this.inputField.checkValidity();
|
|
97
104
|
this.valid = valid;
|
|
98
|
-
this.valueInput.emit(
|
|
99
|
-
this.handleSearchQueryChanged(
|
|
105
|
+
this.valueInput.emit(inputValue);
|
|
106
|
+
this.handleSearchQueryChanged(inputValue);
|
|
100
107
|
}
|
|
101
108
|
handleSearchQueryChanged(value) {
|
|
102
109
|
this.searchQueryChanged.emit(value);
|
|
@@ -170,6 +177,9 @@ export class DnnAutocomplete {
|
|
|
170
177
|
e.stopPropagation();
|
|
171
178
|
this.selectedIndex = index;
|
|
172
179
|
this.value = this.suggestions[this.selectedIndex].value;
|
|
180
|
+
this.displayValue = this.suggestions[this.selectedIndex].label;
|
|
181
|
+
this.inputField.value = this.displayValue;
|
|
182
|
+
this.checkValidity();
|
|
173
183
|
this.focused = false;
|
|
174
184
|
this.itemSelected.emit(this.suggestions[this.selectedIndex].value);
|
|
175
185
|
}
|
|
@@ -223,7 +233,6 @@ export class DnnAutocomplete {
|
|
|
223
233
|
}
|
|
224
234
|
}
|
|
225
235
|
handleBlur() {
|
|
226
|
-
this.focused = false;
|
|
227
236
|
var validity = this.inputField.checkValidity();
|
|
228
237
|
this.valid = validity;
|
|
229
238
|
this.fieldset.setValidity(validity, this.inputField.validationMessage);
|
|
@@ -231,9 +240,12 @@ export class DnnAutocomplete {
|
|
|
231
240
|
}
|
|
232
241
|
render() {
|
|
233
242
|
var _a;
|
|
234
|
-
return (h(Host, { key: '
|
|
235
|
-
|
|
236
|
-
|
|
243
|
+
return (h(Host, { key: '240eab18aec780b662642ce85ee68903c246cd8b', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("dnn-fieldset", { key: '7749d3b19d0cb7e6dc71f8deb9ff50bcea2390e0', 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: 'fa9b987426ae9c70d583aead57f161c6cd53ef9f', class: "inner-container" }, h("input", { key: 'b5c0f2bf1f6cda9de03c5f6ddbe42605076bcb9e', 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: "off", value: this.displayValue, onFocus: () => {
|
|
244
|
+
this.searchQueryChanged.emit(this.value || "");
|
|
245
|
+
this.focused = true;
|
|
246
|
+
}, 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: 'f6f2688374ab8f18db055ccbeb43e08cae06c07b', 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 &&
|
|
247
|
+
h("div", { key: '681a43c03121d04e40295c2a84294dfa38304ec8', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
|
|
248
|
+
h("div", { key: '35e49fff8bd725da4bb1022db932fd5554daad88', style: { height: `${this.getVirtualScrollHeight()}px` } })), h("svg", { key: '7d789d7b160a1a6d8b8a66cc40c714563f39a5e6', onClick: () => this.handleDropdownClick(), class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: 'b542a9084a33294671fbfdd3f8f5388df89a7abc', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
|
|
237
249
|
}
|
|
238
250
|
static get is() { return "dnn-autocomplete"; }
|
|
239
251
|
static get encapsulation() { return "shadow"; }
|
|
@@ -443,7 +455,8 @@ export class DnnAutocomplete {
|
|
|
443
455
|
"customValidityMessage": {},
|
|
444
456
|
"selectedIndex": {},
|
|
445
457
|
"positionInitialized": {},
|
|
446
|
-
"lastScrollTop": {}
|
|
458
|
+
"lastScrollTop": {},
|
|
459
|
+
"displayValue": {}
|
|
447
460
|
};
|
|
448
461
|
}
|
|
449
462
|
static get events() {
|
|
@@ -580,7 +593,7 @@ export class DnnAutocomplete {
|
|
|
580
593
|
static get listeners() {
|
|
581
594
|
return [{
|
|
582
595
|
"name": "click",
|
|
583
|
-
"method": "
|
|
596
|
+
"method": "handleClick",
|
|
584
597
|
"target": "document",
|
|
585
598
|
"capture": false,
|
|
586
599
|
"passive": false
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dnn-autocomplete.js","sourceRoot":"","sources":["../../../src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAgB,MAAM,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE/H,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAQpD,MAAM,OAAO,eAAe;;QA4KT,2BAAsB,GAAG,GAAG,EAAE;YAC7C,IAAI,UAAU,GAAG,IAAI,CAAC,2BAA2B,EAAE,CAAC;YACpD,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;YAClC,CAAC,CAAC,CAAC;YAEH,iGAAiG;YACjG,+BAA+B;YAC/B,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,CAAC;gBACb,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC;YACjD,CAAC;iBACI,CAAC;gBACJ,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC;YACpD,CAAC;YAED,iDAAiD;YACjD,IAAI,QAAQ,EAAC,CAAC;gBACZ,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,UAAU,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC;YAC1E,CAAC;iBACI,CAAC;gBACJ,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC;YAC3G,CAAC;YAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAChC,CAAC,CAAA;;;;;;;2BAlLkD,EAAE;;;sCAeZ,IAAI;uBA4C1B,KAAK;qBACP,IAAI;;;mCAGU,KAAK;6BACX,CAAC;;IA1B1B,6GAA6G;IAE7G,KAAK,CAAC,aAAa;QACjB,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;IAClC,CAAC;IAED,oDAAoD;IAEpD,KAAK,CAAC,iBAAiB,CAAC,OAAe;QACrC,IAAI,OAAO,IAAI,SAAS,IAAI,OAAO,IAAI,EAAE,EAAE,CAAC;YAC1C,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;QACT,CAAC;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;IAC5C,CAAC;IAYD,oCAAoC;IAEpC,kBAAkB,CAAC,CAAa;QAChC,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC;QAC9B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAC9B,CAAC;YACC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAC,CAAC;YAC5E,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAOD,0EAA0E;IAC1E,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;IAClC,CAAC;IAEO,WAAW,CAAC,CAAQ;QAC1B,MAAM,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;QACnD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;QAC5C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5B,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC;IAGO,wBAAwB,CAAC,KAAa;QAC5C,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,IAAI,CAAC,qBAAqB,IAAI,SAAS,EAAE,CAAC;YAC5C,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC;QACjE,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClC,IAAI,IAAI,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC;YAC3B,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;QACpC,CAAC;IACH,CAAC;IAED,sCAAsC;IAC9B,gBAAgB;QACtB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,IAAI,CAAC,KAAK,IAAI,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,CAAC;YAChD,OAAO,KAAK,CAAC;QACf,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;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,CAAC;YAChD,WAAW,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;QACjD,CAAC;QACD,OAAO,WAAW,GAAG,eAAe,CAAC,MAAM,CAAC;IAC9C,CAAC;IA+BO,aAAa,CAAC,CAAgB;;QACpC,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,aAAa,IAAI,SAAS,EAAE,CAAC;gBACpC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;YACzB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YACrF,CAAC;QACH,CAAC;QACD,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YACxB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,aAAa,IAAI,SAAS,EAAE,CAAC;gBACpC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;YACnD,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;YAC3D,CAAC;QACH,CAAC;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,CAAC;YACtB,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;QACvB,CAAC;QACD,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAC,CAAC;YACnB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC;IACH,CAAC;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,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,CAAA;IACpE,CAAC;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;IACpC,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAGO,uBAAuB;QAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,CAAC;QAC5C,MAAM,gBAAgB,GAAG,SAAS,CAAC,SAAS,CAAC;QAE7C,oCAAoC;QACpC,IAAI,gBAAgB,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAC1C,MAAM,UAAU,GAAG,SAAS,CAAC,aAAa,CAAC,UAAU,CAAmB,CAAC;YAEzE,IAAI,UAAU,IAAI,SAAS,EAAE,CAAC;gBAC5B,IAAI,CAAC,aAAa,GAAG,gBAAgB,CAAC;gBACtC,OAAO;YACT,CAAC;YAED,MAAM,kBAAkB,GAAG,UAAU,CAAC,SAAS,CAAC;YAChD,MAAM,gBAAgB,GAAG,UAAU,CAAC,YAAY,CAAC;YACjD,MAAM,gBAAgB,GAAG,kBAAkB,GAAG,gBAAgB,CAAC;YAE/D,uDAAuD;YACvD,MAAM,aAAa,GAAG,gBAAgB,GAAG,SAAS,CAAC,YAAY,CAAC;YAEhE,8GAA8G;YAC9G,IAAI,aAAa,GAAG,gBAAgB,EAAE,CAAC;gBACrC,6DAA6D;gBAC7D,SAAS,CAAC,SAAS,GAAG,gBAAgB,GAAG,SAAS,CAAC,YAAY,CAAC;YAClE,CAAC;YAED,0EAA0E;YAC1E,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAChC,CAAC;QAED,kCAAkC;QAClC,IAAI,CAAC,aAAa,GAAG,gBAAgB,CAAC;IACxC,CAAC;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,CAAC,iCAAiC;QAEtE,MAAM,cAAc,GAAG,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,YAAY,CAAC;QACpE,MAAM,kBAAkB,GAAG,UAAU,CAAC,SAAS,CAAC;QAEhD,uEAAuE;QACvE,IAAI,kBAAkB,GAAG,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;YACtE,MAAM,SAAS,GAA2B;gBACxC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK;aAClC,CAAC;YACF,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAED,UAAU;QACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;QACpB,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;IAC1F,CAAC;IAED,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,EACtC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;YAEpC,qEACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,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,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,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;gBAEnC,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,8DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,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,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,SAAS,EACpG,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,aAAa,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAC/H,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,EAClC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAC/B,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,EACrC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,qBAClB,IAAI,CAAC,OAAO,EAC7B,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GACrC;oBACF,2DACE,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAChE,IAAI,EAAC,SAAS,EACd,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,GAAG,EAAE,EACzC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE;wBAE7C,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3C,UACE,EAAE,EAAE,UAAU,KAAK,EAAE,EACrB,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,aAAa,IAAI,KAAK,EAC1C,KAAK,EAAE,IAAI,CAAC,aAAa,IAAI,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EACpD,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE,KAAK,CAAC,IAEtC,IAAI,CAAC,gBAAgB,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CACvF,CACN,CAAC;wBACD,IAAI,CAAC,gBAAgB,IAAI,SAAS,IAAI,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM;4BACpF,4DAAK,KAAK,EAAC,SAAS,GACd;wBAEP,IAAI,CAAC,gBAAgB,IAAI,SAAS,IAAI,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,IAAI,IAAI,CAAC,mBAAmB;4BAChH,4DAAK,KAAK,EAAE,EAAC,MAAM,EAAE,GAAG,IAAI,CAAC,sBAAsB,EAAE,IAAI,EAAC,GACpD,CAEL;oBACL,4DACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,EACzC,KAAK,EAAC,cAAc,EACpB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,gBAAgB;wBACxB,6DAAM,CAAC,EAAC,uDAAuD,GAAE,CAC7D,CACF,CACO,CACV,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAlQS;IADP,QAAQ,CAAC,GAAG,CAAC;+DAGb;AAuHO;IADP,QAAQ,CAAC,GAAG,CAAC;8DAiCb;AAGO;IADP,QAAQ,EAAE;6DAiBV","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 @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 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 \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 handleOutsideClick(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 value = (e.target as HTMLInputElement).value;\n this.value = value;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(value);\n this.handleSearchQueryChanged(value);\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.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 this.focused = false\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=\"off\"\n value={this.suggestions.length > 0 && this.selectedIndex != undefined ? this.suggestions[this.selectedIndex].label : this.value}\n onFocus={() => this.focused = true}\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 } 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 @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=\"off\"\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-978abd50.js";export{s as setNonce}from"./p-978abd50.js";import{g as l}from"./p-e1255160.js";var d=()=>{const a=import.meta.url;const l={};if(a!==""){l.resourcesUrl=new URL(".",a).href}return e(l)};d().then((async e=>{await l();return a([["p-73fddf11",[[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-5b8e0904",[[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-9d2a9141",[[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"],focused:[32],valid:[32],customValidityMessage:[32],selectedIndex:[32],positionInitialized:[32],lastScrollTop:[32],displayValue:[32],checkValidity:[64],setCustomValidity:[64]},[[4,"click","handleClick"]]]]],["p-5a244627",[[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"],focused:[32],valid:[32],checkValidity:[64],setCustomValidity:[64]}]]],["p-af925605",[[65,"dnn-select",{label:[1],name:[1],required:[4],helpText:[1,"help-text"],disabled:[4],disableValidityReporting:[4,"disable-validity-reporting"],value:[1537],focused:[32],valid:[32],customValidityMessage:[32],checkValidity:[64]}]]],["p-a6982c8d",[[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-672fb82d",[[1,"dnn-treeview-item",{expanded:[1540],hasChildren:[32],focused:[32]},null,{expanded:["watchExpanded"]}]]],["p-9a06ad79",[[1,"dnn-chevron",{expandText:[1,"expand-text"],collapseText:[1,"collapse-text"],expanded:[1540],focused:[32]},null,{expanded:["handleExpandedChanged"]}]]],["p-6643b369",[[66,"dnn-monaco-editor",{language:[1],value:[1025],name:[1],focused:[32]},null,{language:["languageChanged"],value:["valueChanged"]}]]],["p-6659a086",[[1,"dnn-progress-bar",{value:[2],max:[2],useGradient:[4,"use-gradient"]}]]],["p-dcf4505a",[[65,"dnn-richtext",{options:[16],value:[1],name:[1],focused:[32]},null,{value:["watchValueChanged"]}]]],["p-03d3f2b1",[[1,"dnn-sort-icon",{sortDirection:[1025,"sort-direction"],focused:[32]}]]],["p-2c7a91de",[[65,"dnn-toggle",{checked:[1028],disabled:[4],name:[1],value:[1],focused:[32]},[[2,"click","handleClick"]],{checked:["checkedChanged"]}]]],["p-f107355e",[[1,"dnn-vertical-overflow-menu",{showDropdownButton:[32],showDropdownMenu:[32]}]]],["p-576364af",[[1,"dnn-vertical-splitview",{splitterWidth:[2,"splitter-width"],splitWidthPercentage:[1026,"split-width-percentage"],leftWidth:[32],rightWidth:[32],setSplitWidthPercentage:[64],getSplitWidthPercentage:[64]}]]],["p-ea2d6fd2",[[65,"dnn-checkbox",{checked:[1025],useIntermediate:[4,"use-intermediate"],value:[1],name:[1],focused:[32]},[[2,"click","handleClick"]],{checked:["handleCheckedChange"]}]]],["p-69d5f883",[[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-45e1c385",[[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-52ae7b31",[[1,"dnn-searchbox",{placeholder:[1],debounced:[4],debounceTime:[2,"debounce-time"],query:[1025],focused:[32]},null,{query:["handleQueryChanged"]}]]],["p-15c86eb3",[[1,"dnn-tab",{tabTitle:[1,"tab-title"],visible:[32],show:[64],hide:[64]}],[1,"dnn-tabs",{tabTitles:[32],selectedTabTitle:[32]}]]],["p-cfbd1373",[[1,"dnn-collapsible",{expanded:[516],transitionDuration:[2,"transition-duration"],updateSize:[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{expanded:["handledExpandedChanged"]}]]],["p-bc1dd08b",[[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-9b330c82",[[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-6e2adf25",[[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-d67edea7",[[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","valid","customValidityMessage","selectedIndex","positionInitialized","lastScrollTop","checkValidity","setCustomValidity","type","autocomplete","min","max","minlength","maxlength","multiple","pattern","step","disableValidityReporting","allowShowPassword","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.21.0 | 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,+BAAAhB,QAAA,KAAAiB,MAAA,KAAAC,sBAAA,KAAAC,cAAA,KAAAC,oBAAA,KAAAC,cAAA,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","valid","customValidityMessage","selectedIndex","positionInitialized","lastScrollTop","displayValue","checkValidity","setCustomValidity","type","autocomplete","min","max","minlength","maxlength","multiple","pattern","step","disableValidityReporting","allowShowPassword","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.21.0 | 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,+BAAAhB,QAAA,KAAAiB,MAAA,KAAAC,sBAAA,KAAAC,cAAA,KAAAC,oBAAA,KAAAC,cAAA,KAAAC,aAAA,KAAAC,cAAA,KAAAC,kBAAA,qEAAAC,KAAA,OAAAlC,MAAA,IAAAG,KAAA,IAAAgB,MAAA,OAAAf,SAAA,gBAAAgB,SAAA,IAAAC,SAAA,IAAAc,aAAA,IAAAC,IAAA,IAAAC,IAAA,IAAAC,UAAA,IAAAC,UAAA,IAAAC,SAAA,IAAAC,QAAA,IAAAxC,SAAA,IAAAyC,KAAA,IAAAC,yBAAA,iCAAAC,kBAAA,0BAAAnC,QAAA,KAAAiB,MAAA,KAAAM,cAAA,KAAAC,kBAAA,0CAAAjC,MAAA,IAAAG,KAAA,IAAAiB,SAAA,IAAAhB,SAAA,gBAAAiB,SAAA,IAAAsB,yBAAA,iCAAAxB,MAAA,OAAAV,QAAA,KAAAiB,MAAA,KAAAC,sBAAA,KAAAK,cAAA,4CAAAa,UAAA,IAAA1B,MAAA,OAAAnB,MAAA,IAAAG,KAAA,IAAAC,SAAA,gBAAAgB,SAAA,IAAAC,SAAA,IAAAc,aAAA,IAAAG,UAAA,IAAAC,UAAA,IAAAtC,SAAA,IAAA6C,KAAA,IAAArC,QAAA,KAAAiB,MAAA,KAAAC,sBAAA,KAAAK,cAAA,KAAAC,kBAAA,gDAAAc,SAAA,OAAAC,YAAA,KAAAvC,QAAA,YAAAsC,SAAA,uDAAAE,WAAA,kBAAAC,aAAA,oBAAAH,SAAA,OAAAtC,QAAA,YAAAsC,SAAA,sEAAAI,SAAA,IAAAhC,MAAA,OAAAhB,KAAA,IAAAM,QAAA,YAAA0C,SAAA,oBAAAhC,MAAA,2DAAAA,MAAA,IAAAkB,IAAA,IAAAe,YAAA,0DAAA3D,QAAA,KAAA0B,MAAA,IAAAhB,KAAA,IAAAM,QAAA,YAAAU,MAAA,6DAAAkC,cAAA,wBAAA5C,QAAA,0CAAA6C,QAAA,OAAAjC,SAAA,IAAAlB,KAAA,IAAAgB,MAAA,IAAAV,QAAA,mCAAA6C,QAAA,uEAAAC,mBAAA,KAAAC,iBAAA,qDAAAC,cAAA,qBAAAC,qBAAA,gCAAAC,UAAA,KAAAC,WAAA,KAAAC,wBAAA,KAAAC,wBAAA,4CAAAR,QAAA,OAAAS,gBAAA,uBAAA5C,MAAA,IAAAhB,KAAA,IAAAM,QAAA,mCAAA6C,QAAA,kEAAA1D,MAAA,IAAAoE,eAAA,uBAAAxD,aAAA,KAAAyD,WAAA,KAAAC,WAAA,KAAAC,WAAA,KAAA1D,QAAA,YAAAD,aAAA,oEAAAI,KAAA,KAAAwD,kBAAA,KAAAC,gBAAA,wBAAAC,eAAA,sBAAAC,YAAA,oBAAApE,KAAA,IAAAqE,iBAAA,KAAAC,cAAA,KAAAC,aAAA,KAAAC,iBAAA,KAAA3D,UAAA,KAAAP,QAAA,YAAAG,KAAA,uDAAAgE,YAAA,IAAAC,UAAA,IAAAC,aAAA,oBAAAC,MAAA,OAAAtE,QAAA,YAAAsE,MAAA,wDAAAC,SAAA,gBAAAC,QAAA,KAAAC,KAAA,KAAAC,KAAA,sBAAAC,UAAA,KAAAC,iBAAA,8CAAAtC,SAAA,MAAAuC,mBAAA,0BAAAC,WAAA,iEAAAxC,SAAA,8DAAAyC,gBAAA,uBAAAC,UAAA,iBAAA5C,UAAA,IAAA6C,gBAAA,wBAAAT,QAAA,OAAAC,KAAA,KAAAC,KAAA,0CAAAjD,KAAA,IAAAyD,WAAA,IAAAC,eAAA,uBAAAC,SAAA,IAAAC,KAAA,IAAAC,QAAA,IAAAC,eAAA,uBAAAC,cAAA,sBAAAC,eAAA,sBAAA7E,SAAA,IAAAZ,QAAA,KAAA0F,aAAA,mDAAAC,YAAA,OAAAC,WAAA,KAAAC,MAAA,KAAA1F,KAAA,KAAA2F,WAAA,KAAAC,oBAAA,KAAAC,UAAA,KAAAC,WAAA,KAAA1F,UAAA,KAAAP,QAAA,YAAA8F,WAAA,4BAAA3F,KAAA,sDAAAH,QAAA,OAAAY,SAAA,OAAAsF,QAAA,OAAA3G,MAAA,IAAA4G,WAAA,qBAAAxG,SAAA,gBAAAyC,UAAA,IAAAlB,sBAAA,KAAAkF,WAAA,KAAAC,WAAA,KAAAC,QAAA,KAAAC,OAAA,KAAAC,SAAA,KAAAC,WAAA,KAAAC,YAAA,UAAA1H,EAAA","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as i,c as t,h as e,H as s,g as n}from"./p-978abd50.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.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:"240eab18aec780b662642ce85ee68903c246cd8b",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},e("dnn-fieldset",{key:"7749d3b19d0cb7e6dc71f8deb9ff50bcea2390e0",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:"fa9b987426ae9c70d583aead57f161c6cd53ef9f",class:"inner-container"},e("input",{key:"b5c0f2bf1f6cda9de03c5f6ddbe42605076bcb9e",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:"off",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:"f6f2688374ab8f18db055ccbeb43e08cae06c07b",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:"681a43c03121d04e40295c2a84294dfa38304ec8",class:"loading"}),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&this.positionInitialized&&e("div",{key:"35e49fff8bd725da4bb1022db932fd5554daad88",style:{height:`${this.getVirtualScrollHeight()}px`}})),e("svg",{key:"7d789d7b160a1a6d8b8a66cc40c714563f39a5e6",onClick:()=>this.handleDropdownClick(),class:"chevron-down",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},e("path",{key:"b542a9084a33294671fbfdd3f8f5388df89a7abc",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-9d2a9141.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","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","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 @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=\"off\"\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":[]}
|
|
@@ -70,9 +70,15 @@ const DnnAutocomplete = class {
|
|
|
70
70
|
this.selectedIndex = undefined;
|
|
71
71
|
this.positionInitialized = false;
|
|
72
72
|
this.lastScrollTop = 0;
|
|
73
|
+
this.displayValue = "";
|
|
73
74
|
}
|
|
74
75
|
/** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */
|
|
75
76
|
async checkValidity() {
|
|
77
|
+
var validity = this.inputField.checkValidity();
|
|
78
|
+
if (!validity) {
|
|
79
|
+
this.fieldset.setValidity(false, this.inputField.validationMessage);
|
|
80
|
+
}
|
|
81
|
+
this.fieldset.setValidity(true, "");
|
|
76
82
|
return this.inputField.validity;
|
|
77
83
|
}
|
|
78
84
|
/** Can be used to set a custom validity message. */
|
|
@@ -88,7 +94,7 @@ const DnnAutocomplete = class {
|
|
|
88
94
|
this.fieldset.setValidity(false, message);
|
|
89
95
|
}
|
|
90
96
|
/** Listener for mouse down event */
|
|
91
|
-
|
|
97
|
+
handleClick(e) {
|
|
92
98
|
const path = e.composedPath();
|
|
93
99
|
if (!path.includes(this.element)) {
|
|
94
100
|
this.focused = false;
|
|
@@ -108,12 +114,13 @@ const DnnAutocomplete = class {
|
|
|
108
114
|
this.internals.setFormValue("");
|
|
109
115
|
}
|
|
110
116
|
handleInput(e) {
|
|
111
|
-
const
|
|
112
|
-
this.
|
|
117
|
+
const inputValue = e.target.value;
|
|
118
|
+
this.displayValue = inputValue;
|
|
119
|
+
this.value = inputValue;
|
|
113
120
|
var valid = this.inputField.checkValidity();
|
|
114
121
|
this.valid = valid;
|
|
115
|
-
this.valueInput.emit(
|
|
116
|
-
this.handleSearchQueryChanged(
|
|
122
|
+
this.valueInput.emit(inputValue);
|
|
123
|
+
this.handleSearchQueryChanged(inputValue);
|
|
117
124
|
}
|
|
118
125
|
handleSearchQueryChanged(value) {
|
|
119
126
|
this.searchQueryChanged.emit(value);
|
|
@@ -187,6 +194,9 @@ const DnnAutocomplete = class {
|
|
|
187
194
|
e.stopPropagation();
|
|
188
195
|
this.selectedIndex = index;
|
|
189
196
|
this.value = this.suggestions[this.selectedIndex].value;
|
|
197
|
+
this.displayValue = this.suggestions[this.selectedIndex].label;
|
|
198
|
+
this.inputField.value = this.displayValue;
|
|
199
|
+
this.checkValidity();
|
|
190
200
|
this.focused = false;
|
|
191
201
|
this.itemSelected.emit(this.suggestions[this.selectedIndex].value);
|
|
192
202
|
}
|
|
@@ -240,7 +250,6 @@ const DnnAutocomplete = class {
|
|
|
240
250
|
}
|
|
241
251
|
}
|
|
242
252
|
handleBlur() {
|
|
243
|
-
this.focused = false;
|
|
244
253
|
var validity = this.inputField.checkValidity();
|
|
245
254
|
this.valid = validity;
|
|
246
255
|
this.fieldset.setValidity(validity, this.inputField.validationMessage);
|
|
@@ -248,9 +257,12 @@ const DnnAutocomplete = class {
|
|
|
248
257
|
}
|
|
249
258
|
render() {
|
|
250
259
|
var _a;
|
|
251
|
-
return (h(Host, { key: '
|
|
252
|
-
|
|
253
|
-
|
|
260
|
+
return (h(Host, { key: '240eab18aec780b662642ce85ee68903c246cd8b', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("dnn-fieldset", { key: '7749d3b19d0cb7e6dc71f8deb9ff50bcea2390e0', 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: 'fa9b987426ae9c70d583aead57f161c6cd53ef9f', class: "inner-container" }, h("input", { key: 'b5c0f2bf1f6cda9de03c5f6ddbe42605076bcb9e', 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: "off", value: this.displayValue, onFocus: () => {
|
|
261
|
+
this.searchQueryChanged.emit(this.value || "");
|
|
262
|
+
this.focused = true;
|
|
263
|
+
}, 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: 'f6f2688374ab8f18db055ccbeb43e08cae06c07b', 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 &&
|
|
264
|
+
h("div", { key: '681a43c03121d04e40295c2a84294dfa38304ec8', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
|
|
265
|
+
h("div", { key: '35e49fff8bd725da4bb1022db932fd5554daad88', style: { height: `${this.getVirtualScrollHeight()}px` } })), h("svg", { key: '7d789d7b160a1a6d8b8a66cc40c714563f39a5e6', onClick: () => this.handleDropdownClick(), class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: 'b542a9084a33294671fbfdd3f8f5388df89a7abc', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
|
|
254
266
|
}
|
|
255
267
|
static get formAssociated() { return true; }
|
|
256
268
|
get element() { return getElement(this); }
|
|
@@ -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 @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 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 \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 handleOutsideClick(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 value = (e.target as HTMLInputElement).value;\n this.value = value;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(value);\n this.handleSearchQueryChanged(value);\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.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 this.focused = false\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=\"off\"\n value={this.suggestions.length > 0 && this.selectedIndex != undefined ? this.suggestions[this.selectedIndex].label : this.value}\n onFocus={() => this.focused = true}\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":";;;AAAA,MAAM,kBAAkB,GAAG,klDAAklD,CAAC;AAC9mD,8BAAe,kBAAkB;;;;;;;;;;;;MCSpB,eAAe;;;;;;;;;;;;;;;QAmLT,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;;;;;;;2BAzLkD,EAAE;;;sCAeZ,IAAI;uBAiD1B,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,QACE,EAAC,IAAI,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,IAEpC,qEACE,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,IAEnC,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,8DACE,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,EAAC,KAAK,EAClB,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,EACF,2DACE,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,EAAE,KAAK,MACtC,UACE,EAAE,EAAE,UAAU,KAAK,EAAE,EACrB,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,aAAa,IAAI,KAAK,EAC1C,KAAK,EAAE,IAAI,CAAC,aAAa,IAAI,KAAK,GAAG,UAAU,GAAG,EAAE,EACpD,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE,KAAK,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;YACpF,4DAAK,KAAK,EAAC,SAAS,GACd,EAEP,IAAI,CAAC,gBAAgB,IAAI,SAAS,IAAI,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,IAAI,IAAI,CAAC,mBAAmB;YAChH,4DAAK,KAAK,EAAE,EAAC,MAAM,EAAE,GAAG,IAAI,CAAC,sBAAsB,EAAE,IAAI,EAAC,GACpD,CAEL,EACL,4DACE,OAAO,EAAE,MAAM,IAAI,CAAC,mBAAmB,EAAE,EACzC,KAAK,EAAC,cAAc,EACpB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,gBAAgB,IACxB,6DAAM,CAAC,EAAC,uDAAuD,GAAE,CAC7D,CACF,CACO,CACV,EACP;KACH;;;;AAtQO;IADP,QAAQ,CAAC,GAAG,CAAC;+DAGb;AA0HO;IADP,QAAQ,CAAC,GAAG,CAAC;8DAiCb;AAGO;IADP,QAAQ,EAAE;6DAiBV;;;;;","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 @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=\"off\"\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"],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","
|
|
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"],"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"],"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"],"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"],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","
|
|
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"],"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"],"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"],"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 };
|
|
@@ -52,10 +52,11 @@ export declare class DnnAutocomplete {
|
|
|
52
52
|
selectedIndex: number;
|
|
53
53
|
positionInitialized: boolean;
|
|
54
54
|
lastScrollTop: number;
|
|
55
|
+
displayValue: string;
|
|
55
56
|
/** attacth the internals for form validation */
|
|
56
57
|
internals: ElementInternals;
|
|
57
58
|
/** Listener for mouse down event */
|
|
58
|
-
|
|
59
|
+
handleClick(e: MouseEvent): void;
|
|
59
60
|
componentDidRender(): void;
|
|
60
61
|
private inputField;
|
|
61
62
|
private suggestionsContainer;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dnncommunity/dnn-elements",
|
|
3
|
-
"version": "0.24.0-beta.
|
|
3
|
+
"version": "0.24.0-beta.11",
|
|
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",
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as i,c as t,h as e,H as s,g as n}from"./p-978abd50.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.focused=false;this.valid=true;this.customValidityMessage=undefined;this.selectedIndex=undefined;this.positionInitialized=false;this.lastScrollTop=0}async checkValidity(){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)}handleOutsideClick(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.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.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(){this.focused=false;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:"9eab75ca413ef3f1e2fd03fd297e3234405cf591",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},e("dnn-fieldset",{key:"3a6435b32891b0d8da6ad6103b3794e145e9f3b6",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:"ba9102f4739a8e0092bca6a9b13fe4afa5bf60ec",class:"inner-container"},e("input",{key:"beafefbaa7398b281e8d55a1c2f8e43bd5efb23a",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:"off",value:this.suggestions.length>0&&this.selectedIndex!=undefined?this.suggestions[this.selectedIndex].label:this.value,onFocus:()=>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:"b299d725498438b2534d0173fba34eee66c78ee2",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:"1be08bd2a97113d4ee68f3099fa025ccf7e051b7",class:"loading"}),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&this.positionInitialized&&e("div",{key:"efdadf5afa162de0148525f3394dd0c29c0da23a",style:{height:`${this.getVirtualScrollHeight()}px`}})),e("svg",{key:"1ce44347eec5d871c245658700e0862ddc480c4a",onClick:()=>this.handleDropdownClick(),class:"chevron-down",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},e("path",{key:"63dde5f0d50fd2085218431af1d6b15b9d3af8df",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-27dc2d8f.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","setCustomValidity","message","undefined","valid","fieldset","setValidity","handleOutsideClick","e","path","composedPath","includes","element","focused","componentDidRender","suggestions","length","formResetCallback","value","internals","setFormValue","handleInput","target","valueInput","emit","handleSearchQueryChanged","searchQueryChanged","handleInvalid","customValidityMessage","validationMessage","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","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 @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 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 \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 handleOutsideClick(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 value = (e.target as HTMLInputElement).value;\n this.value = value;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(value);\n this.handleSearchQueryChanged(value);\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.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 this.focused = false\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=\"off\"\n value={this.suggestions.length > 0 && this.selectedIndex != undefined ? this.suggestions[this.selectedIndex].label : this.value}\n onFocus={() => this.focused = true}\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":[]}
|