@dnncommunity/dnn-elements 0.29.0-beta.1 → 0.29.1-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/dnn-autocomplete.cjs.entry.js +14 -7
- package/dist/cjs/dnn-autocomplete.cjs.entry.js.map +1 -1
- package/dist/collection/components/dnn-autocomplete/dnn-autocomplete.js +14 -7
- package/dist/collection/components/dnn-autocomplete/dnn-autocomplete.js.map +1 -1
- package/dist/components/dnn-autocomplete.js +1 -1
- package/dist/components/dnn-autocomplete.js.map +1 -1
- package/dist/dnn/dnn.esm.js +1 -1
- package/dist/dnn/p-ebabc0c3.entry.js +2 -0
- package/dist/dnn/p-ebabc0c3.entry.js.map +1 -0
- package/dist/esm/dnn-autocomplete.entry.js +14 -7
- package/dist/esm/dnn-autocomplete.entry.js.map +1 -1
- package/dist/types/components/dnn-autocomplete/dnn-autocomplete.d.ts +2 -0
- package/package.json +1 -1
- package/dist/dnn/p-fdecda97.entry.js +0 -2
- package/dist/dnn/p-fdecda97.entry.js.map +0 -1
|
@@ -98,9 +98,7 @@ const DnnAutocomplete = class {
|
|
|
98
98
|
this.fieldset.setValidity(false, message);
|
|
99
99
|
}
|
|
100
100
|
handleValueChange(newValue) {
|
|
101
|
-
this.
|
|
102
|
-
// Find the index of the selected item
|
|
103
|
-
this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);
|
|
101
|
+
this.selectItemFromValue(newValue);
|
|
104
102
|
}
|
|
105
103
|
/** Listener for mouse down event */
|
|
106
104
|
handleClick(e) {
|
|
@@ -109,6 +107,11 @@ const DnnAutocomplete = class {
|
|
|
109
107
|
this.focused = false;
|
|
110
108
|
}
|
|
111
109
|
}
|
|
110
|
+
componentDidLoad() {
|
|
111
|
+
if (this.value != "") {
|
|
112
|
+
this.selectItemFromValue(this.value);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
112
115
|
componentDidRender() {
|
|
113
116
|
if (this.focused && this.suggestions.length > 0 && !this.positionInitialized) {
|
|
114
117
|
this.adjustDropdownPosition();
|
|
@@ -133,6 +136,10 @@ const DnnAutocomplete = class {
|
|
|
133
136
|
handleSearchQueryChanged(value) {
|
|
134
137
|
this.searchQueryChanged.emit(value);
|
|
135
138
|
}
|
|
139
|
+
selectItemFromValue(value) {
|
|
140
|
+
this.selectedIndex = this.suggestions.findIndex(s => s.value === value);
|
|
141
|
+
this.displayValue = this.selectedIndex != -1 ? this.suggestions[this.selectedIndex].label : value;
|
|
142
|
+
}
|
|
136
143
|
handleInvalid() {
|
|
137
144
|
this.valid = false;
|
|
138
145
|
if (this.customValidityMessage == undefined) {
|
|
@@ -269,13 +276,13 @@ const DnnAutocomplete = class {
|
|
|
269
276
|
}
|
|
270
277
|
render() {
|
|
271
278
|
var _a;
|
|
272
|
-
return (index.h(index.Host, { key: '
|
|
279
|
+
return (index.h(index.Host, { key: '22a44af6d75e9f1604228bce6167c043ee350db6', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, index.h("dnn-fieldset", { key: '2546facbd5db7d813c151cd8303ce68e8c7883e0', 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: '0cd31f7454d2543fde799db59f4273d85d21b131', class: "inner-container" }, index.h("input", { key: 'b301beea898c102b85132b295a9de6147cf66124', ref: (el) => this.inputField = el, name: this.name, type: "search", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.focused.toString(), "aria-activedescendant": this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined, disabled: this.disabled, required: this.required, autoComplete: this.autocomplete, value: this.displayValue, onFocus: () => {
|
|
273
280
|
this.searchQueryChanged.emit(this.value);
|
|
274
281
|
this.focused = true;
|
|
275
282
|
}, onBlur: () => this.handleBlur(), onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId, onKeyDown: e => this.handleKeyDown(e) }), !this.valid &&
|
|
276
|
-
index.h("svg", { key: '
|
|
277
|
-
index.h("div", { key: '
|
|
278
|
-
index.h("div", { key: '
|
|
283
|
+
index.h("svg", { key: '7c6c952ddeac369ed297278d8186055d718a7bb3', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", class: "error" }, index.h("path", { key: '5739fd904cf2aaef58b79f1862821fde2fb23b2e', d: "M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z" })), index.h("ul", { key: '49a560038ea0315c2244e62a6ce7be7c9fcd3aaa', 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 &&
|
|
284
|
+
index.h("div", { key: '2c0e96daa50d4964900cbd271c3e10df9cd45a6f', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
|
|
285
|
+
index.h("div", { key: 'b25a29bcae6a226fa0e82c0ae8179e652d95cb9e', style: { height: `${this.getVirtualScrollHeight()}px` } })), index.h("svg", { key: 'e5aa277521a56e811c09c8be749b256ec250d991', onClick: () => this.handleDropdownClick(), class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, index.h("path", { key: '5461b364b5546e4a84d987b7604976d60d1c0d1f', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
|
|
279
286
|
}
|
|
280
287
|
static get formAssociated() { return true; }
|
|
281
288
|
get element() { return index.getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dnn-autocomplete.cjs.entry.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 fill: var(--foreground-color);\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\ndnn-fieldset{\n --fieldset-foreground-color: var(--foreground-color);\n --fieldset-background-color: var(--background-color);\n --fieldset-focus-color: var(--focus-color);\n --fieldset-danger-color: var(--danger-color);\n --fieldset-control-radius: var(--control-radius);\n}\n\nsvg{\n &.error{\n fill: red;\n width: 1em;\n height: 1em;\n transform: scale(1.5);\n margin-right: 0.5em;\n }\n}","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen, Watch } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label?: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name?: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText?: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value = \"\";\n\n /** Defines whether the field requires having a value. */\n @Prop() required?: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled?: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion?: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n \n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions?: number;\n \n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n /** Defines the type of automatic completion the browser could use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete: string = \"off\";\n\n @Element() element!: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange!: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput!: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems!: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged!: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected!: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n this.fieldset.setValidity(true, \"\");\n this.valid = validity;\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage?: string;\n @State() selectedIndex?: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n @State() displayValue: string = \"\";\n\n @Watch(\"value\")\n handleValueChange(newValue: string) {\n this.displayValue = newValue;\n\n // Find the index of the selected item\n this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);\n }\n \n /** attacth the internals for form validation */\n @AttachInternals() internals!: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n \n componentDidRender(){\n if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n this.adjustDropdownPosition();\n }\n }\n\n private inputField!: HTMLInputElement;\n private suggestionsContainer!: HTMLUListElement;\n private fieldset!: HTMLDnnFieldsetElement;\n private labelId!: string;\n \n \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 this.fieldset.setValidity(false, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\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);\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 != \"\") {\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.selectedIndex == undefined ? this.value : this.suggestions[this.selectedIndex]?.value;\n if (e.key === \"Enter\") {\n if (this.selectedIndex != undefined){\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 }\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 || NaN) - 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 private handleBlur(): void {\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el!}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el!}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n value={this.displayValue}\n onFocus={() => {\n this.searchQueryChanged.emit(this.value);\n this.focused = true;\n }}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n {!this.valid &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"error\">\n <path d=\"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z\"/>\n </svg>\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.cjs.entry.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 fill: var(--foreground-color);\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\ndnn-fieldset{\n --fieldset-foreground-color: var(--foreground-color);\n --fieldset-background-color: var(--background-color);\n --fieldset-focus-color: var(--focus-color);\n --fieldset-danger-color: var(--danger-color);\n --fieldset-control-radius: var(--control-radius);\n}\n\nsvg{\n &.error{\n fill: red;\n width: 1em;\n height: 1em;\n transform: scale(1.5);\n margin-right: 0.5em;\n }\n}","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen, Watch } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label?: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name?: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText?: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value = \"\";\n\n /** Defines whether the field requires having a value. */\n @Prop() required?: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled?: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion?: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n \n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions?: number;\n \n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n /** Defines the type of automatic completion the browser could use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete: string = \"off\";\n\n @Element() element!: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange!: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput!: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems!: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged!: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected!: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n this.fieldset.setValidity(true, \"\");\n this.valid = validity;\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage?: string;\n @State() selectedIndex?: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n @State() displayValue: string = \"\";\n\n @Watch(\"value\")\n handleValueChange(newValue: string) {\n this.selectItemFromValue(newValue);\n }\n \n /** attacth the internals for form validation */\n @AttachInternals() internals!: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n\n componentDidLoad() {\n if (this.value != \"\"){\n this.selectItemFromValue(this.value);\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 fieldset!: HTMLDnnFieldsetElement;\n private labelId!: string;\n \n \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 selectItemFromValue(value: string) {\n this.selectedIndex = this.suggestions.findIndex(s => s.value === value);\n this.displayValue = this.selectedIndex != -1 ? this.suggestions[this.selectedIndex].label : value;\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined) {\n this.customValidityMessage = this.inputField.validationMessage;\n }\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\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);\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 != \"\") {\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.selectedIndex == undefined ? this.value : this.suggestions[this.selectedIndex]?.value;\n if (e.key === \"Enter\") {\n if (this.selectedIndex != undefined){\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 }\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 || NaN) - 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 private handleBlur(): void {\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el!}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el!}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n value={this.displayValue}\n onFocus={() => {\n this.searchQueryChanged.emit(this.value);\n this.focused = true;\n }}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n {!this.valid &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"error\">\n <path d=\"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z\"/>\n </svg>\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}
|
|
@@ -80,9 +80,7 @@ export class DnnAutocomplete {
|
|
|
80
80
|
this.fieldset.setValidity(false, message);
|
|
81
81
|
}
|
|
82
82
|
handleValueChange(newValue) {
|
|
83
|
-
this.
|
|
84
|
-
// Find the index of the selected item
|
|
85
|
-
this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);
|
|
83
|
+
this.selectItemFromValue(newValue);
|
|
86
84
|
}
|
|
87
85
|
/** Listener for mouse down event */
|
|
88
86
|
handleClick(e) {
|
|
@@ -91,6 +89,11 @@ export class DnnAutocomplete {
|
|
|
91
89
|
this.focused = false;
|
|
92
90
|
}
|
|
93
91
|
}
|
|
92
|
+
componentDidLoad() {
|
|
93
|
+
if (this.value != "") {
|
|
94
|
+
this.selectItemFromValue(this.value);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
94
97
|
componentDidRender() {
|
|
95
98
|
if (this.focused && this.suggestions.length > 0 && !this.positionInitialized) {
|
|
96
99
|
this.adjustDropdownPosition();
|
|
@@ -115,6 +118,10 @@ export class DnnAutocomplete {
|
|
|
115
118
|
handleSearchQueryChanged(value) {
|
|
116
119
|
this.searchQueryChanged.emit(value);
|
|
117
120
|
}
|
|
121
|
+
selectItemFromValue(value) {
|
|
122
|
+
this.selectedIndex = this.suggestions.findIndex(s => s.value === value);
|
|
123
|
+
this.displayValue = this.selectedIndex != -1 ? this.suggestions[this.selectedIndex].label : value;
|
|
124
|
+
}
|
|
118
125
|
handleInvalid() {
|
|
119
126
|
this.valid = false;
|
|
120
127
|
if (this.customValidityMessage == undefined) {
|
|
@@ -251,13 +258,13 @@ export class DnnAutocomplete {
|
|
|
251
258
|
}
|
|
252
259
|
render() {
|
|
253
260
|
var _a;
|
|
254
|
-
return (h(Host, { key: '
|
|
261
|
+
return (h(Host, { key: '22a44af6d75e9f1604228bce6167c043ee350db6', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("dnn-fieldset", { key: '2546facbd5db7d813c151cd8303ce68e8c7883e0', 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: '0cd31f7454d2543fde799db59f4273d85d21b131', class: "inner-container" }, h("input", { key: 'b301beea898c102b85132b295a9de6147cf66124', ref: (el) => this.inputField = el, name: this.name, type: "search", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.focused.toString(), "aria-activedescendant": this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined, disabled: this.disabled, required: this.required, autoComplete: this.autocomplete, value: this.displayValue, onFocus: () => {
|
|
255
262
|
this.searchQueryChanged.emit(this.value);
|
|
256
263
|
this.focused = true;
|
|
257
264
|
}, onBlur: () => this.handleBlur(), onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId, onKeyDown: e => this.handleKeyDown(e) }), !this.valid &&
|
|
258
|
-
h("svg", { key: '
|
|
259
|
-
h("div", { key: '
|
|
260
|
-
h("div", { key: '
|
|
265
|
+
h("svg", { key: '7c6c952ddeac369ed297278d8186055d718a7bb3', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", class: "error" }, h("path", { key: '5739fd904cf2aaef58b79f1862821fde2fb23b2e', d: "M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z" })), h("ul", { key: '49a560038ea0315c2244e62a6ce7be7c9fcd3aaa', 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 &&
|
|
266
|
+
h("div", { key: '2c0e96daa50d4964900cbd271c3e10df9cd45a6f', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
|
|
267
|
+
h("div", { key: 'b25a29bcae6a226fa0e82c0ae8179e652d95cb9e', style: { height: `${this.getVirtualScrollHeight()}px` } })), h("svg", { key: 'e5aa277521a56e811c09c8be749b256ec250d991', onClick: () => this.handleDropdownClick(), class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: '5461b364b5546e4a84d987b7604976d60d1c0d1f', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
|
|
261
268
|
}
|
|
262
269
|
static get is() { return "dnn-autocomplete"; }
|
|
263
270
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dnn-autocomplete.js","sourceRoot":"","sources":["../../../src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen, Watch } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label?: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name?: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText?: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value = \"\";\n\n /** Defines whether the field requires having a value. */\n @Prop() required?: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled?: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion?: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n \n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions?: number;\n \n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n /** Defines the type of automatic completion the browser could use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete: string = \"off\";\n\n @Element() element!: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange!: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput!: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems!: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged!: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected!: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n this.fieldset.setValidity(true, \"\");\n this.valid = validity;\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage?: string;\n @State() selectedIndex?: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n @State() displayValue: string = \"\";\n\n @Watch(\"value\")\n handleValueChange(newValue: string) {\n this.displayValue = newValue;\n\n // Find the index of the selected item\n this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);\n }\n \n /** attacth the internals for form validation */\n @AttachInternals() internals!: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n \n componentDidRender(){\n if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n this.adjustDropdownPosition();\n }\n }\n\n private inputField!: HTMLInputElement;\n private suggestionsContainer!: HTMLUListElement;\n private fieldset!: HTMLDnnFieldsetElement;\n private labelId!: string;\n \n \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 this.fieldset.setValidity(false, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\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);\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 != \"\") {\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.selectedIndex == undefined ? this.value : this.suggestions[this.selectedIndex]?.value;\n if (e.key === \"Enter\") {\n if (this.selectedIndex != undefined){\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 }\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 || NaN) - 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 private handleBlur(): void {\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el!}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el!}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n value={this.displayValue}\n onFocus={() => {\n this.searchQueryChanged.emit(this.value);\n this.focused = true;\n }}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n {!this.valid &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"error\">\n <path d=\"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z\"/>\n </svg>\n }\n <ul\n class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n role=\"listbox\"\n ref={el => this.suggestionsContainer = el!}\n onScroll={() => this.handleSuggestionsScroll()}\n >\n {this.suggestions.map((suggestion, index) => (\n <li\n id={`option-${index}`}\n role=\"option\"\n aria-selected={this.selectedIndex == index}\n class={this.selectedIndex == index ? \"selected\" : \"\"}\n onClick={e => this.selectItem(e, index)}\n >\n {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n </li>\n ))}\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n <div class=\"loading\">\n </div>\n }\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n </div>\n }\n </ul>\n <svg\n onClick={() => this.handleDropdownClick()}\n class=\"chevron-down\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -960 960 960\">\n <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n </svg>\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n}"]}
|
|
1
|
+
{"version":3,"file":"dnn-autocomplete.js","sourceRoot":"","sources":["../../../src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen, Watch } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label?: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name?: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText?: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value = \"\";\n\n /** Defines whether the field requires having a value. */\n @Prop() required?: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled?: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion?: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n \n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions?: number;\n \n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n /** Defines the type of automatic completion the browser could use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete: string = \"off\";\n\n @Element() element!: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange!: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput!: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems!: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged!: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected!: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n this.fieldset.setValidity(true, \"\");\n this.valid = validity;\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage?: string;\n @State() selectedIndex?: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n @State() displayValue: string = \"\";\n\n @Watch(\"value\")\n handleValueChange(newValue: string) {\n this.selectItemFromValue(newValue);\n }\n \n /** attacth the internals for form validation */\n @AttachInternals() internals!: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n\n componentDidLoad() {\n if (this.value != \"\"){\n this.selectItemFromValue(this.value);\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 fieldset!: HTMLDnnFieldsetElement;\n private labelId!: string;\n \n \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 selectItemFromValue(value: string) {\n this.selectedIndex = this.suggestions.findIndex(s => s.value === value);\n this.displayValue = this.selectedIndex != -1 ? this.suggestions[this.selectedIndex].label : value;\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined) {\n this.customValidityMessage = this.inputField.validationMessage;\n }\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\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);\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 != \"\") {\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.selectedIndex == undefined ? this.value : this.suggestions[this.selectedIndex]?.value;\n if (e.key === \"Enter\") {\n if (this.selectedIndex != undefined){\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 }\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 || NaN) - 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 private handleBlur(): void {\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el!}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el!}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n value={this.displayValue}\n onFocus={() => {\n this.searchQueryChanged.emit(this.value);\n this.focused = true;\n }}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n {!this.valid &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"error\">\n <path d=\"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z\"/>\n </svg>\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,2 +1,2 @@
|
|
|
1
|
-
import{p as t,t as e,H as i,c as s,h as n,d as o}from"./p-CpMia-zT.js";import{D as r}from"./p-DI6iaKDl.js";import{d as a}from"./p-BzJdj4BF.js";const h=()=>`: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);fill:var(--foreground-color);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}dnn-fieldset{--fieldset-foreground-color:var(--foreground-color);--fieldset-background-color:var(--background-color);--fieldset-focus-color:var(--focus-color);--fieldset-danger-color:var(--danger-color);--fieldset-control-radius:var(--control-radius)}svg.error{fill:red;width:1em;height:1em;transform:scale(1.5);margin-right:0.5em}`;var l=undefined&&undefined.__decorate||function(t,e,i,s){var n=arguments.length,o=n<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,i):s,r;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(t,e,i,s);else for(var a=t.length-1;a>=0;a--)if(r=t[a])o=(n<3?r(o):n>3?r(e,i,o):r(e,i))||o;return n>3&&o&&Object.defineProperty(e,i,o),o};const d=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.valueChange=s(this,"valueChange",7);this.valueInput=s(this,"valueInput",7);this.needMoreItems=s(this,"needMoreItems",7);this.searchQueryChanged=s(this,"searchQueryChanged",7);this.itemSelected=s(this,"itemSelected",7);this.internals=this.attachInternals();this.value="";this.suggestions=[];this.preloadThresholdPixels=1e3;this.autocomplete="off";this.focused=false;this.valid=true;this.positionInitialized=false;this.lastScrollTop=0;this.displayValue="";this.adjustDropdownPosition=()=>{var t=this.findAverageSuggestionHeight();requestAnimationFrame((()=>{this.positionInitialized=true}));var e=window.innerHeight-this.inputField.getBoundingClientRect().bottom;const i=parseFloat(getComputedStyle(document.documentElement).fontSize);const s=e>3*t+3*i;if(s){this.suggestionsContainer.style.top="1.2rem"}else{this.suggestionsContainer.style.bottom="1.2rem"}if(s){this.suggestionsContainer.style.maxHeight=`${e-3*i}px`}else{this.suggestionsContainer.style.maxHeight=`${this.inputField.getBoundingClientRect().top-3*i}px`}this.checkIfMoreItemsNeeded()}}async checkValidity(){var t=this.inputField.checkValidity();if(!t){this.fieldset.setValidity(false,this.inputField.validationMessage)}this.fieldset.setValidity(true,"");this.valid=t;this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage);return this.inputField.validity}async setCustomValidity(t){if(t==undefined||t==""){this.inputField.setCustomValidity("");this.valid=true;this.fieldset.setValidity(true);return}this.inputField.setCustomValidity(t);this.valid=false;this.fieldset.setValidity(false,t)}handleValueChange(t){this.displayValue=t;this.selectedIndex=this.suggestions.findIndex((e=>e.value===t))}handleClick(t){const e=t.composedPath();if(!e.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(t){const e=t.target.value;this.displayValue=e;this.value=e;var i=this.inputField.checkValidity();this.valid=i;this.valueInput.emit(e);this.handleSearchQueryChanged(e)}handleSearchQueryChanged(t){this.searchQueryChanged.emit(t)}handleInvalid(){this.valid=false;if(this.customValidityMessage==undefined){this.customValidityMessage=this.inputField.validationMessage}this.fieldset.setValidity(false,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}handleChange(){this.valueChange.emit(this.value);if(this.name!=undefined){var t=new FormData;t.append(this.name,this.value);this.internals.setFormValue(t)}}shouldLabelFloat(){if(this.focused){return false}if(this.value!=""){return false}return true}findAverageSuggestionHeight(){const t=this.suggestionsContainer.querySelectorAll("li");var e=0;for(let i=0;i<t.length;i++){e+=t[i].clientHeight}return e/t.length}handleKeyDown(t){var e;if(t.key==="ArrowDown"){t.preventDefault();if(this.selectedIndex==undefined){this.selectedIndex=0}else{this.selectedIndex=Math.min(this.selectedIndex+1,this.suggestions.length-1)}}if(t.key==="ArrowUp"){t.preventDefault();if(this.selectedIndex==undefined){this.selectedIndex=this.suggestions.length-1}else{this.selectedIndex=Math.max(this.selectedIndex-1,0)}}this.value=this.selectedIndex==undefined?this.value:(e=this.suggestions[this.selectedIndex])===null||e===void 0?void 0:e.value;if(t.key==="Enter"){if(this.selectedIndex!=undefined){var i=this.suggestions[this.selectedIndex];this.value=i.value;this.inputField.value=i.label;this.itemSelected.emit(i.value);this.focused=false}}if(t.key==="Tab"){this.focused=false}}selectItem(t,e){t.preventDefault();t.stopPropagation();this.selectedIndex=e;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 t=this.findAverageSuggestionHeight();const e=(this.totalSuggestions||NaN)-this.suggestions.length;return t*e}handleDropdownClick(){this.handleSearchQueryChanged(this.value)}handleSuggestionsScroll(){const t=this.suggestionsContainer;const e=t.scrollTop;if(e>this.lastScrollTop){const i=t.querySelector(".loading");if(i==undefined){this.lastScrollTop=e;return}const s=i.offsetTop;const n=i.offsetHeight;const o=s+n;const r=e+t.clientHeight;if(r>o){t.scrollTop=o-t.clientHeight}this.checkIfMoreItemsNeeded()}this.lastScrollTop=e}checkIfMoreItemsNeeded(){const t=this.suggestionsContainer;const e=t.querySelector(".loading");if(e==undefined)return;const i=t.scrollTop+t.clientHeight;const s=e.offsetTop;if(s-i<this.preloadThresholdPixels){const t={searchTerm:this.inputField.value};this.needMoreItems.emit(t)}}handleBlur(){var t=this.inputField.checkValidity();this.valid=t;this.fieldset.setValidity(t,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}render(){var t;return n(o,{key:"1e292d089aaa274d1aa4b9898bd0d9d15b7d6d70",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},n("dnn-fieldset",{key:"d70181acb451533a2ecb842b16bb9a1f4786d5e5",ref:t=>this.fieldset=t,invalid:!this.valid,focused:this.focused,label:`${(t=this.label)!==null&&t!==void 0?t:""}${this.required?" *":""}`,helpText:this.helpText,id:this.labelId,disabled:this.disabled,floatLabel:this.shouldLabelFloat()},n("div",{key:"b91badc6ea15ecaeeb7b8f24383b8dbc7eeb1ceb",class:"inner-container"},n("input",{key:"e2dd5f4e2179dc5d61e6e5faf5f62bfac8e96ae1",ref:t=>this.inputField=t,name:this.name,type:"search",role:"combobox","aria-haspopup":"listbox","aria-expanded":this.focused.toString(),"aria-activedescendant":this.selectedIndex!==undefined?`option-${this.selectedIndex}`:undefined,disabled:this.disabled,required:this.required,autoComplete:this.autocomplete,value:this.displayValue,onFocus:()=>{this.searchQueryChanged.emit(this.value);this.focused=true},onBlur:()=>this.handleBlur(),onInput:t=>this.handleInput(t),onInvalid:()=>this.handleInvalid(),onChange:()=>this.handleChange(),"aria-labelledby":this.labelId,onKeyDown:t=>this.handleKeyDown(t)}),!this.valid&&n("svg",{key:"c5678ec6aebde3e12654d23996f5e7800a44011d",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960",class:"error"},n("path",{key:"e3d61322deab9289f34f64f03dbda93721334f3b",d:"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z"})),n("ul",{key:"46bf9ea05343a94b1bef9fabbed0e4f31536952d",class:this.focused&&this.suggestions.length>0?"show":"",role:"listbox",ref:t=>this.suggestionsContainer=t,onScroll:()=>this.handleSuggestionsScroll()},this.suggestions.map(((t,e)=>n("li",{id:`option-${e}`,role:"option","aria-selected":this.selectedIndex==e,class:this.selectedIndex==e?"selected":"",onClick:t=>this.selectItem(t,e)},this.renderSuggestion!=undefined?this.renderSuggestion(t):t.label))),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&n("div",{key:"6a0e9fc2f6dbbb0e7333631d60e131aa3e24ed05",class:"loading"}),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&this.positionInitialized&&n("div",{key:"5b5195357e3f0f257837485dd08e487f3302830e",style:{height:`${this.getVirtualScrollHeight()}px`}})),n("svg",{key:"6add57764f3df4fde8d95fc049e1e1f9a03afb96",onClick:()=>this.handleDropdownClick(),class:"chevron-down",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},n("path",{key:"2f25891e79ba26598884234386e6b57612741c48",d:"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z"})))))}static get formAssociated(){return true}get element(){return this}static get watchers(){return{value:[{handleValueChange:0}]}}static get style(){return h()}},[65,"dnn-autocomplete",{label:[1],name:[1],helpText:[1,"help-text"],value:[1537],required:[4],disabled:[4],suggestions:[16],renderSuggestion:[16],totalSuggestions:[2,"total-suggestions"],preloadThresholdPixels:[2,"preload-threshold-pixels"],autocomplete:[1],focused:[32],valid:[32],customValidityMessage:[32],selectedIndex:[32],positionInitialized:[32],lastScrollTop:[32],displayValue:[32],checkValidity:[64],setCustomValidity:[64]},[[4,"click","handleClick"]],{value:[{handleValueChange:0}]}]);l([r(300)],d.prototype,"handleSearchQueryChanged",null);l([r(100)],d.prototype,"handleSuggestionsScroll",null);l([r()],d.prototype,"checkIfMoreItemsNeeded",null);function c(){if(typeof customElements==="undefined"){return}const t=["dnn-autocomplete","dnn-fieldset"];t.forEach((t=>{switch(t){case"dnn-autocomplete":if(!customElements.get(e(t))){customElements.define(e(t),d)}break;case"dnn-fieldset":if(!customElements.get(e(t))){a()}break}}))}const u=d;const f=c;export{u as DnnAutocomplete,f as defineCustomElement};
|
|
1
|
+
import{p as t,t as e,H as i,c as s,h as n,d as o}from"./p-CpMia-zT.js";import{D as r}from"./p-DI6iaKDl.js";import{d as h}from"./p-BzJdj4BF.js";const a=()=>`: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);fill:var(--foreground-color);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}dnn-fieldset{--fieldset-foreground-color:var(--foreground-color);--fieldset-background-color:var(--background-color);--fieldset-focus-color:var(--focus-color);--fieldset-danger-color:var(--danger-color);--fieldset-control-radius:var(--control-radius)}svg.error{fill:red;width:1em;height:1em;transform:scale(1.5);margin-right:0.5em}`;var l=undefined&&undefined.__decorate||function(t,e,i,s){var n=arguments.length,o=n<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,i):s,r;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(t,e,i,s);else for(var h=t.length-1;h>=0;h--)if(r=t[h])o=(n<3?r(o):n>3?r(e,i,o):r(e,i))||o;return n>3&&o&&Object.defineProperty(e,i,o),o};const d=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.valueChange=s(this,"valueChange",7);this.valueInput=s(this,"valueInput",7);this.needMoreItems=s(this,"needMoreItems",7);this.searchQueryChanged=s(this,"searchQueryChanged",7);this.itemSelected=s(this,"itemSelected",7);this.internals=this.attachInternals();this.value="";this.suggestions=[];this.preloadThresholdPixels=1e3;this.autocomplete="off";this.focused=false;this.valid=true;this.positionInitialized=false;this.lastScrollTop=0;this.displayValue="";this.adjustDropdownPosition=()=>{var t=this.findAverageSuggestionHeight();requestAnimationFrame((()=>{this.positionInitialized=true}));var e=window.innerHeight-this.inputField.getBoundingClientRect().bottom;const i=parseFloat(getComputedStyle(document.documentElement).fontSize);const s=e>3*t+3*i;if(s){this.suggestionsContainer.style.top="1.2rem"}else{this.suggestionsContainer.style.bottom="1.2rem"}if(s){this.suggestionsContainer.style.maxHeight=`${e-3*i}px`}else{this.suggestionsContainer.style.maxHeight=`${this.inputField.getBoundingClientRect().top-3*i}px`}this.checkIfMoreItemsNeeded()}}async checkValidity(){var t=this.inputField.checkValidity();if(!t){this.fieldset.setValidity(false,this.inputField.validationMessage)}this.fieldset.setValidity(true,"");this.valid=t;this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage);return this.inputField.validity}async setCustomValidity(t){if(t==undefined||t==""){this.inputField.setCustomValidity("");this.valid=true;this.fieldset.setValidity(true);return}this.inputField.setCustomValidity(t);this.valid=false;this.fieldset.setValidity(false,t)}handleValueChange(t){this.selectItemFromValue(t)}handleClick(t){const e=t.composedPath();if(!e.includes(this.element)){this.focused=false}}componentDidLoad(){if(this.value!=""){this.selectItemFromValue(this.value)}}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(t){const e=t.target.value;this.displayValue=e;this.value=e;var i=this.inputField.checkValidity();this.valid=i;this.valueInput.emit(e);this.handleSearchQueryChanged(e)}handleSearchQueryChanged(t){this.searchQueryChanged.emit(t)}selectItemFromValue(t){this.selectedIndex=this.suggestions.findIndex((e=>e.value===t));this.displayValue=this.selectedIndex!=-1?this.suggestions[this.selectedIndex].label:t}handleInvalid(){this.valid=false;if(this.customValidityMessage==undefined){this.customValidityMessage=this.inputField.validationMessage}this.fieldset.setValidity(false,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}handleChange(){this.valueChange.emit(this.value);if(this.name!=undefined){var t=new FormData;t.append(this.name,this.value);this.internals.setFormValue(t)}}shouldLabelFloat(){if(this.focused){return false}if(this.value!=""){return false}return true}findAverageSuggestionHeight(){const t=this.suggestionsContainer.querySelectorAll("li");var e=0;for(let i=0;i<t.length;i++){e+=t[i].clientHeight}return e/t.length}handleKeyDown(t){var e;if(t.key==="ArrowDown"){t.preventDefault();if(this.selectedIndex==undefined){this.selectedIndex=0}else{this.selectedIndex=Math.min(this.selectedIndex+1,this.suggestions.length-1)}}if(t.key==="ArrowUp"){t.preventDefault();if(this.selectedIndex==undefined){this.selectedIndex=this.suggestions.length-1}else{this.selectedIndex=Math.max(this.selectedIndex-1,0)}}this.value=this.selectedIndex==undefined?this.value:(e=this.suggestions[this.selectedIndex])===null||e===void 0?void 0:e.value;if(t.key==="Enter"){if(this.selectedIndex!=undefined){var i=this.suggestions[this.selectedIndex];this.value=i.value;this.inputField.value=i.label;this.itemSelected.emit(i.value);this.focused=false}}if(t.key==="Tab"){this.focused=false}}selectItem(t,e){t.preventDefault();t.stopPropagation();this.selectedIndex=e;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 t=this.findAverageSuggestionHeight();const e=(this.totalSuggestions||NaN)-this.suggestions.length;return t*e}handleDropdownClick(){this.handleSearchQueryChanged(this.value)}handleSuggestionsScroll(){const t=this.suggestionsContainer;const e=t.scrollTop;if(e>this.lastScrollTop){const i=t.querySelector(".loading");if(i==undefined){this.lastScrollTop=e;return}const s=i.offsetTop;const n=i.offsetHeight;const o=s+n;const r=e+t.clientHeight;if(r>o){t.scrollTop=o-t.clientHeight}this.checkIfMoreItemsNeeded()}this.lastScrollTop=e}checkIfMoreItemsNeeded(){const t=this.suggestionsContainer;const e=t.querySelector(".loading");if(e==undefined)return;const i=t.scrollTop+t.clientHeight;const s=e.offsetTop;if(s-i<this.preloadThresholdPixels){const t={searchTerm:this.inputField.value};this.needMoreItems.emit(t)}}handleBlur(){var t=this.inputField.checkValidity();this.valid=t;this.fieldset.setValidity(t,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}render(){var t;return n(o,{key:"22a44af6d75e9f1604228bce6167c043ee350db6",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},n("dnn-fieldset",{key:"2546facbd5db7d813c151cd8303ce68e8c7883e0",ref:t=>this.fieldset=t,invalid:!this.valid,focused:this.focused,label:`${(t=this.label)!==null&&t!==void 0?t:""}${this.required?" *":""}`,helpText:this.helpText,id:this.labelId,disabled:this.disabled,floatLabel:this.shouldLabelFloat()},n("div",{key:"0cd31f7454d2543fde799db59f4273d85d21b131",class:"inner-container"},n("input",{key:"b301beea898c102b85132b295a9de6147cf66124",ref:t=>this.inputField=t,name:this.name,type:"search",role:"combobox","aria-haspopup":"listbox","aria-expanded":this.focused.toString(),"aria-activedescendant":this.selectedIndex!==undefined?`option-${this.selectedIndex}`:undefined,disabled:this.disabled,required:this.required,autoComplete:this.autocomplete,value:this.displayValue,onFocus:()=>{this.searchQueryChanged.emit(this.value);this.focused=true},onBlur:()=>this.handleBlur(),onInput:t=>this.handleInput(t),onInvalid:()=>this.handleInvalid(),onChange:()=>this.handleChange(),"aria-labelledby":this.labelId,onKeyDown:t=>this.handleKeyDown(t)}),!this.valid&&n("svg",{key:"7c6c952ddeac369ed297278d8186055d718a7bb3",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960",class:"error"},n("path",{key:"5739fd904cf2aaef58b79f1862821fde2fb23b2e",d:"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z"})),n("ul",{key:"49a560038ea0315c2244e62a6ce7be7c9fcd3aaa",class:this.focused&&this.suggestions.length>0?"show":"",role:"listbox",ref:t=>this.suggestionsContainer=t,onScroll:()=>this.handleSuggestionsScroll()},this.suggestions.map(((t,e)=>n("li",{id:`option-${e}`,role:"option","aria-selected":this.selectedIndex==e,class:this.selectedIndex==e?"selected":"",onClick:t=>this.selectItem(t,e)},this.renderSuggestion!=undefined?this.renderSuggestion(t):t.label))),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&n("div",{key:"2c0e96daa50d4964900cbd271c3e10df9cd45a6f",class:"loading"}),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&this.positionInitialized&&n("div",{key:"b25a29bcae6a226fa0e82c0ae8179e652d95cb9e",style:{height:`${this.getVirtualScrollHeight()}px`}})),n("svg",{key:"e5aa277521a56e811c09c8be749b256ec250d991",onClick:()=>this.handleDropdownClick(),class:"chevron-down",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},n("path",{key:"5461b364b5546e4a84d987b7604976d60d1c0d1f",d:"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z"})))))}static get formAssociated(){return true}get element(){return this}static get watchers(){return{value:[{handleValueChange:0}]}}static get style(){return a()}},[65,"dnn-autocomplete",{label:[1],name:[1],helpText:[1,"help-text"],value:[1537],required:[4],disabled:[4],suggestions:[16],renderSuggestion:[16],totalSuggestions:[2,"total-suggestions"],preloadThresholdPixels:[2,"preload-threshold-pixels"],autocomplete:[1],focused:[32],valid:[32],customValidityMessage:[32],selectedIndex:[32],positionInitialized:[32],lastScrollTop:[32],displayValue:[32],checkValidity:[64],setCustomValidity:[64]},[[4,"click","handleClick"]],{value:[{handleValueChange:0}]}]);l([r(300)],d.prototype,"handleSearchQueryChanged",null);l([r(100)],d.prototype,"handleSuggestionsScroll",null);l([r()],d.prototype,"checkIfMoreItemsNeeded",null);function c(){if(typeof customElements==="undefined"){return}const t=["dnn-autocomplete","dnn-fieldset"];t.forEach((t=>{switch(t){case"dnn-autocomplete":if(!customElements.get(e(t))){customElements.define(e(t),d)}break;case"dnn-fieldset":if(!customElements.get(e(t))){h()}break}}))}const u=d;const f=c;export{u as DnnAutocomplete,f as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=dnn-autocomplete.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["dnnAutocompleteCss","DnnAutocomplete","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","suggestions","preloadThresholdPixels","autocomplete","focused","valid","positionInitialized","lastScrollTop","displayValue","adjustDropdownPosition","itemHeight","findAverageSuggestionHeight","requestAnimationFrame","spaceBelow","window","innerHeight","inputField","getBoundingClientRect","bottom","rem","parseFloat","getComputedStyle","document","documentElement","fontSize","fitsDown","suggestionsContainer","style","top","maxHeight","checkIfMoreItemsNeeded","checkValidity","validity","fieldset","setValidity","validationMessage","internals","setCustomValidity","message","undefined","handleValueChange","newValue","selectedIndex","findIndex","s","handleClick","e","path","composedPath","includes","element","componentDidRender","length","formResetCallback","setFormValue","handleInput","inputValue","target","valueInput","emit","handleSearchQueryChanged","searchQueryChanged","handleInvalid","customValidityMessage","handleChange","valueChange","name","data","FormData","append","shouldLabelFloat","suggestionItems","querySelectorAll","totalHeight","i","clientHeight","handleKeyDown","key","preventDefault","Math","min","max","_a","selectedItem","label","itemSelected","selectItem","index","stopPropagation","getVirtualScrollHeight","upcomingItems","totalSuggestions","NaN","handleDropdownClick","handleSuggestionsScroll","container","currentScrollTop","scrollTop","loadingDiv","querySelector","loadingDivPosition","offsetTop","loadingDivHeight","offsetHeight","loadingDivBottom","visibleBottom","scrollPosition","eventArgs","searchTerm","needMoreItems","handleBlur","render","h","Host","tabIndex","onFocus","focus","onBlur","blur","ref","el","invalid","required","helpText","id","labelId","disabled","floatLabel","class","type","role","toString","autoComplete","onInput","onInvalid","onChange","onKeyDown","xmlns","viewBox","d","onScroll","map","suggestion","onClick","renderSuggestion","height","__decorate","Debounce","prototype"],"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 fill: var(--foreground-color);\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\ndnn-fieldset{\n --fieldset-foreground-color: var(--foreground-color);\n --fieldset-background-color: var(--background-color);\n --fieldset-focus-color: var(--focus-color);\n --fieldset-danger-color: var(--danger-color);\n --fieldset-control-radius: var(--control-radius);\n}\n\nsvg{\n &.error{\n fill: red;\n width: 1em;\n height: 1em;\n transform: scale(1.5);\n margin-right: 0.5em;\n }\n}","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen, Watch } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label?: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name?: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText?: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value = \"\";\n\n /** Defines whether the field requires having a value. */\n @Prop() required?: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled?: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion?: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n \n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions?: number;\n \n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n /** Defines the type of automatic completion the browser could use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete: string = \"off\";\n\n @Element() element!: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange!: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput!: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems!: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged!: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected!: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n this.fieldset.setValidity(true, \"\");\n this.valid = validity;\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage?: string;\n @State() selectedIndex?: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n @State() displayValue: string = \"\";\n\n @Watch(\"value\")\n handleValueChange(newValue: string) {\n this.displayValue = newValue;\n\n // Find the index of the selected item\n this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);\n }\n \n /** attacth the internals for form validation */\n @AttachInternals() internals!: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n \n componentDidRender(){\n if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n this.adjustDropdownPosition();\n }\n }\n\n private inputField!: HTMLInputElement;\n private suggestionsContainer!: HTMLUListElement;\n private fieldset!: HTMLDnnFieldsetElement;\n private labelId!: string;\n \n \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 this.fieldset.setValidity(false, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\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);\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 != \"\") {\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.selectedIndex == undefined ? this.value : this.suggestions[this.selectedIndex]?.value;\n if (e.key === \"Enter\") {\n if (this.selectedIndex != undefined){\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 }\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 || NaN) - 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 private handleBlur(): void {\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el!}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el!}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n value={this.displayValue}\n onFocus={() => {\n this.searchQueryChanged.emit(this.value);\n this.focused = true;\n }}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n {!this.valid &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"error\">\n <path d=\"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z\"/>\n </svg>\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":[]}
|
|
1
|
+
{"version":3,"names":["dnnAutocompleteCss","DnnAutocomplete","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","suggestions","preloadThresholdPixels","autocomplete","focused","valid","positionInitialized","lastScrollTop","displayValue","adjustDropdownPosition","itemHeight","findAverageSuggestionHeight","requestAnimationFrame","spaceBelow","window","innerHeight","inputField","getBoundingClientRect","bottom","rem","parseFloat","getComputedStyle","document","documentElement","fontSize","fitsDown","suggestionsContainer","style","top","maxHeight","checkIfMoreItemsNeeded","checkValidity","validity","fieldset","setValidity","validationMessage","internals","setCustomValidity","message","undefined","handleValueChange","newValue","selectItemFromValue","handleClick","e","path","composedPath","includes","element","componentDidLoad","componentDidRender","length","formResetCallback","setFormValue","handleInput","inputValue","target","valueInput","emit","handleSearchQueryChanged","searchQueryChanged","selectedIndex","findIndex","s","label","handleInvalid","customValidityMessage","handleChange","valueChange","name","data","FormData","append","shouldLabelFloat","suggestionItems","querySelectorAll","totalHeight","i","clientHeight","handleKeyDown","key","preventDefault","Math","min","max","_a","selectedItem","itemSelected","selectItem","index","stopPropagation","getVirtualScrollHeight","upcomingItems","totalSuggestions","NaN","handleDropdownClick","handleSuggestionsScroll","container","currentScrollTop","scrollTop","loadingDiv","querySelector","loadingDivPosition","offsetTop","loadingDivHeight","offsetHeight","loadingDivBottom","visibleBottom","scrollPosition","eventArgs","searchTerm","needMoreItems","handleBlur","render","h","Host","tabIndex","onFocus","focus","onBlur","blur","ref","el","invalid","required","helpText","id","labelId","disabled","floatLabel","class","type","role","toString","autoComplete","onInput","onInvalid","onChange","onKeyDown","xmlns","viewBox","d","onScroll","map","suggestion","onClick","renderSuggestion","height","__decorate","Debounce","prototype"],"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 fill: var(--foreground-color);\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\ndnn-fieldset{\n --fieldset-foreground-color: var(--foreground-color);\n --fieldset-background-color: var(--background-color);\n --fieldset-focus-color: var(--focus-color);\n --fieldset-danger-color: var(--danger-color);\n --fieldset-control-radius: var(--control-radius);\n}\n\nsvg{\n &.error{\n fill: red;\n width: 1em;\n height: 1em;\n transform: scale(1.5);\n margin-right: 0.5em;\n }\n}","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen, Watch } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label?: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name?: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText?: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value = \"\";\n\n /** Defines whether the field requires having a value. */\n @Prop() required?: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled?: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion?: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n \n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions?: number;\n \n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n /** Defines the type of automatic completion the browser could use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete: string = \"off\";\n\n @Element() element!: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange!: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput!: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems!: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged!: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected!: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n this.fieldset.setValidity(true, \"\");\n this.valid = validity;\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage?: string;\n @State() selectedIndex?: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n @State() displayValue: string = \"\";\n\n @Watch(\"value\")\n handleValueChange(newValue: string) {\n this.selectItemFromValue(newValue);\n }\n \n /** attacth the internals for form validation */\n @AttachInternals() internals!: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n\n componentDidLoad() {\n if (this.value != \"\"){\n this.selectItemFromValue(this.value);\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 fieldset!: HTMLDnnFieldsetElement;\n private labelId!: string;\n \n \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 selectItemFromValue(value: string) {\n this.selectedIndex = this.suggestions.findIndex(s => s.value === value);\n this.displayValue = this.selectedIndex != -1 ? this.suggestions[this.selectedIndex].label : value;\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined) {\n this.customValidityMessage = this.inputField.validationMessage;\n }\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\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);\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 != \"\") {\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.selectedIndex == undefined ? this.value : this.suggestions[this.selectedIndex]?.value;\n if (e.key === \"Enter\") {\n if (this.selectedIndex != undefined){\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 }\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 || NaN) - 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 private handleBlur(): void {\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el!}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el!}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n value={this.displayValue}\n onFocus={() => {\n this.searchQueryChanged.emit(this.value);\n this.focused = true;\n }}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n {!this.valid &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"error\">\n <path d=\"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z\"/>\n </svg>\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":[]}
|
package/dist/dnn/dnn.esm.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as l}from"./p-CFl1mTV-.js";export{s as setNonce}from"./p-CFl1mTV-.js";import{g as a}from"./p-DQuL1Twl.js";var o=()=>{const l=import.meta.url;const a={};if(l!==""){a.resourcesUrl=new URL(".",l).href}return e(a)};o().then((async e=>{await a();return l([["p-ae31ce45",[[321,"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:0}]}]]],["p-ecb99eb7",[[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:0}]}]]],["p-
|
|
1
|
+
import{p as e,b as l}from"./p-CFl1mTV-.js";export{s as setNonce}from"./p-CFl1mTV-.js";import{g as a}from"./p-DQuL1Twl.js";var o=()=>{const l=import.meta.url;const a={};if(l!==""){a.resourcesUrl=new URL(".",l).href}return e(a)};o().then((async e=>{await a();return l([["p-ae31ce45",[[321,"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:0}]}]]],["p-ecb99eb7",[[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:0}]}]]],["p-ebabc0c3",[[65,"dnn-autocomplete",{label:[1],name:[1],helpText:[1,"help-text"],value:[1537],required:[4],disabled:[4],suggestions:[16],renderSuggestion:[16],totalSuggestions:[2,"total-suggestions"],preloadThresholdPixels:[2,"preload-threshold-pixels"],autocomplete:[1],focused:[32],valid:[32],customValidityMessage:[32],selectedIndex:[32],positionInitialized:[32],lastScrollTop:[32],displayValue:[32],checkValidity:[64],setCustomValidity:[64]},[[4,"click","handleClick"]],{value:[{handleValueChange:0}]}]]],["p-1c074366",[[321,"dnn-input",{type:[1025],label:[1],name:[1],value:[1544],helpText:[1,"help-text"],required:[4],disabled:[4],autocomplete:[1],min:[8],max:[8],minlength:[2],maxlength:[2],multiple:[4],pattern:[1],readonly:[4],step:[8],disableValidityReporting:[4,"disable-validity-reporting"],allowShowPassword:[4,"allow-show-password"],inputmode:[1],focused:[32],valid:[32],checkValidity:[64],setCustomValidity:[64]}]]],["p-9b7a8dea",[[321,"dnn-select",{label:[1],name:[1],required:[4],helpText:[1,"help-text"],disabled:[4],autocomplete:[1],value:[1537],focused:[32],valid:[32],customValidityMessage:[32],checkValidity:[64]}]]],["p-528c1abc",[[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-7be6d9d9",[[257,"dnn-treeview-item",{expanded:[1540],hasChildren:[32],focused:[32]},null,{expanded:[{watchExpanded:0}]}]]],["p-0243ac05",[[1,"dnn-chevron",{expandText:[1,"expand-text"],collapseText:[1,"collapse-text"],expanded:[1540],focused:[32]},null,{expanded:[{handleExpandedChanged:0}]}]]],["p-174da434",[[257,"dnn-context-menu",{closeOnClick:[4,"close-on-click"],isOpen:[32],position:[32],positioned:[32],open:[64],close:[64]},[[11,"mousedown","onWindowMouseDown"],[11,"scroll","onWindowScroll"],[9,"resize","onWindowResize"],[8,"keydown","onWindowKeyDown"]]]]],["p-3c3ad49b",[[66,"dnn-monaco-editor",{language:[1],value:[1025],name:[1],focused:[32]},null,{language:[{languageChanged:0}],value:[{valueChanged:0}]}]]],["p-05b8b9f4",[[1,"dnn-progress-bar",{value:[2],max:[2],useGradient:[4,"use-gradient"]}]]],["p-6f2a7d19",[[64,"dnn-richtext",{options:[16],value:[1],name:[1],plugins:[16],customizeOptions:[16],focused:[32]},null,{value:[{watchValueChanged:0}]}]]],["p-bd6d50a0",[[1,"dnn-sort-icon",{sortDirection:[1025,"sort-direction"],focused:[32]}]]],["p-91d780f8",[[65,"dnn-toggle",{checked:[1028],disabled:[4],name:[1],value:[1],focused:[32]},[[2,"click","handleClick"]],{checked:[{checkedChanged:0}]}]]],["p-2e431e84",[[257,"dnn-vertical-overflow-menu",{showDropdownButton:[32],showDropdownMenu:[32]}]]],["p-24864ea1",[[257,"dnn-vertical-splitview",{splitterWidth:[2,"splitter-width"],splitWidthPercentage:[1026,"split-width-percentage"],leftWidth:[32],rightWidth:[32],setSplitWidthPercentage:[64],getSplitWidthPercentage:[64]}]]],["p-010f27a6",[[321,"dnn-checkbox",{checked:[1025],useIntermediate:[4,"use-intermediate"],value:[1],name:[1],required:[4],nextStateHandler:[16],requiredMessage:[1,"required-message"],focused:[32],valid:[32],checkValidity:[64]},[[2,"click","handleClick"]],{checked:[{handleCheckedChange:0}]}]]],["p-89e0bf1e",[[1,"dnn-color-picker",{color:[1],colorBoxHeight:[1,"color-box-height"],currentColor:[32],rgbDisplay:[32],hslDisplay:[32],hexDisplay:[32],focused:[32]},null,{currentColor:[{handeCurrentColorChanged:0}]}]]],["p-897555d1",[[65,"dnn-dropzone",{resx:[16],allowedExtensions:[16],allowCameraMode:[4,"allow-camera-mode"],captureQuality:[2,"capture-quality"],maxFileSize:[2,"max-file-size"],name:[1],multiple:[4],canTakeSnapshots:[32],takingPicture:[32],fileTooLarge:[32],invalidExtension:[32],tooManyFiles:[32],localResx:[32],focused:[32]},null,{resx:[{resxChanged:0}],multiple:[{multipleChanged:0}]}]]],["p-b55d298f",[[1,"dnn-searchbox",{placeholder:[1],debounceTime:[2,"debounce-time"],query:[1025],focused:[32]},null,{query:[{handleQueryChanged:0}]}]]],["p-6fcbd4ff",[[257,"dnn-tab",{tabTitle:[1,"tab-title"],visible:[32],show:[64],hide:[64]}],[257,"dnn-tabs",{tabTitles:[32],selectedTabTitle:[32]}]]],["p-7cd45762",[[257,"dnn-collapsible",{expanded:[516],transitionDuration:[2,"transition-duration"],updateSize:[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{expanded:[{handledExpandedChanged:0}]}]]],["p-c79840cc",[[257,"dnn-modal",{backdropDismiss:[4,"backdrop-dismiss"],preventBackdropDismiss:[1540,"prevent-backdrop-dismiss"],closeText:[1,"close-text"],resizable:[4],showCloseButton:[4,"show-close-button"],hideCloseButton:[1540,"hide-close-button"],visible:[1540],show:[64],hide:[64]}]]],["p-bdb16726",[[321,"dnn-button",{appearance:[1],type:[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-cba98371",[[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:0}],resx:[{resxChanged:0}]}]]],["p-4f58e9cf",[[257,"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
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as i,h as e,H as s,g as n}from"./p-CFl1mTV-.js";import{D as r}from"./p-DI6iaKDl.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);fill:var(--foreground-color);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}dnn-fieldset{--fieldset-foreground-color:var(--foreground-color);--fieldset-background-color:var(--background-color);--fieldset-focus-color:var(--focus-color);--fieldset-danger-color:var(--danger-color);--fieldset-control-radius:var(--control-radius)}svg.error{fill:red;width:1em;height:1em;transform:scale(1.5);margin-right:0.5em}`;var h=undefined&&undefined.__decorate||function(t,i,e,s){var n=arguments.length,r=n<3?i:s===null?s=Object.getOwnPropertyDescriptor(i,e):s,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(t,i,e,s);else for(var h=t.length-1;h>=0;h--)if(o=t[h])r=(n<3?o(r):n>3?o(i,e,r):o(i,e))||r;return n>3&&r&&Object.defineProperty(i,e,r),r};const a=class{constructor(e){t(this,e);this.valueChange=i(this,"valueChange",7);this.valueInput=i(this,"valueInput",7);this.needMoreItems=i(this,"needMoreItems",7);this.searchQueryChanged=i(this,"searchQueryChanged",7);this.itemSelected=i(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.value="";this.suggestions=[];this.preloadThresholdPixels=1e3;this.autocomplete="off";this.focused=false;this.valid=true;this.positionInitialized=false;this.lastScrollTop=0;this.displayValue="";this.adjustDropdownPosition=()=>{var t=this.findAverageSuggestionHeight();requestAnimationFrame((()=>{this.positionInitialized=true}));var i=window.innerHeight-this.inputField.getBoundingClientRect().bottom;const e=parseFloat(getComputedStyle(document.documentElement).fontSize);const s=i>3*t+3*e;if(s){this.suggestionsContainer.style.top="1.2rem"}else{this.suggestionsContainer.style.bottom="1.2rem"}if(s){this.suggestionsContainer.style.maxHeight=`${i-3*e}px`}else{this.suggestionsContainer.style.maxHeight=`${this.inputField.getBoundingClientRect().top-3*e}px`}this.checkIfMoreItemsNeeded()}}async checkValidity(){var t=this.inputField.checkValidity();if(!t){this.fieldset.setValidity(false,this.inputField.validationMessage)}this.fieldset.setValidity(true,"");this.valid=t;this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage);return this.inputField.validity}async setCustomValidity(t){if(t==undefined||t==""){this.inputField.setCustomValidity("");this.valid=true;this.fieldset.setValidity(true);return}this.inputField.setCustomValidity(t);this.valid=false;this.fieldset.setValidity(false,t)}handleValueChange(t){this.selectItemFromValue(t)}handleClick(t){const i=t.composedPath();if(!i.includes(this.element)){this.focused=false}}componentDidLoad(){if(this.value!=""){this.selectItemFromValue(this.value)}}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(t){const i=t.target.value;this.displayValue=i;this.value=i;var e=this.inputField.checkValidity();this.valid=e;this.valueInput.emit(i);this.handleSearchQueryChanged(i)}handleSearchQueryChanged(t){this.searchQueryChanged.emit(t)}selectItemFromValue(t){this.selectedIndex=this.suggestions.findIndex((i=>i.value===t));this.displayValue=this.selectedIndex!=-1?this.suggestions[this.selectedIndex].label:t}handleInvalid(){this.valid=false;if(this.customValidityMessage==undefined){this.customValidityMessage=this.inputField.validationMessage}this.fieldset.setValidity(false,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}handleChange(){this.valueChange.emit(this.value);if(this.name!=undefined){var t=new FormData;t.append(this.name,this.value);this.internals.setFormValue(t)}}shouldLabelFloat(){if(this.focused){return false}if(this.value!=""){return false}return true}findAverageSuggestionHeight(){const t=this.suggestionsContainer.querySelectorAll("li");var i=0;for(let e=0;e<t.length;e++){i+=t[e].clientHeight}return i/t.length}handleKeyDown(t){var i;if(t.key==="ArrowDown"){t.preventDefault();if(this.selectedIndex==undefined){this.selectedIndex=0}else{this.selectedIndex=Math.min(this.selectedIndex+1,this.suggestions.length-1)}}if(t.key==="ArrowUp"){t.preventDefault();if(this.selectedIndex==undefined){this.selectedIndex=this.suggestions.length-1}else{this.selectedIndex=Math.max(this.selectedIndex-1,0)}}this.value=this.selectedIndex==undefined?this.value:(i=this.suggestions[this.selectedIndex])===null||i===void 0?void 0:i.value;if(t.key==="Enter"){if(this.selectedIndex!=undefined){var e=this.suggestions[this.selectedIndex];this.value=e.value;this.inputField.value=e.label;this.itemSelected.emit(e.value);this.focused=false}}if(t.key==="Tab"){this.focused=false}}selectItem(t,i){t.preventDefault();t.stopPropagation();this.selectedIndex=i;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 t=this.findAverageSuggestionHeight();const i=(this.totalSuggestions||NaN)-this.suggestions.length;return t*i}handleDropdownClick(){this.handleSearchQueryChanged(this.value)}handleSuggestionsScroll(){const t=this.suggestionsContainer;const i=t.scrollTop;if(i>this.lastScrollTop){const e=t.querySelector(".loading");if(e==undefined){this.lastScrollTop=i;return}const s=e.offsetTop;const n=e.offsetHeight;const r=s+n;const o=i+t.clientHeight;if(o>r){t.scrollTop=r-t.clientHeight}this.checkIfMoreItemsNeeded()}this.lastScrollTop=i}checkIfMoreItemsNeeded(){const t=this.suggestionsContainer;const i=t.querySelector(".loading");if(i==undefined)return;const e=t.scrollTop+t.clientHeight;const s=i.offsetTop;if(s-e<this.preloadThresholdPixels){const t={searchTerm:this.inputField.value};this.needMoreItems.emit(t)}}handleBlur(){var t=this.inputField.checkValidity();this.valid=t;this.fieldset.setValidity(t,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}render(){var t;return e(s,{key:"22a44af6d75e9f1604228bce6167c043ee350db6",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},e("dnn-fieldset",{key:"2546facbd5db7d813c151cd8303ce68e8c7883e0",ref:t=>this.fieldset=t,invalid:!this.valid,focused:this.focused,label:`${(t=this.label)!==null&&t!==void 0?t:""}${this.required?" *":""}`,helpText:this.helpText,id:this.labelId,disabled:this.disabled,floatLabel:this.shouldLabelFloat()},e("div",{key:"0cd31f7454d2543fde799db59f4273d85d21b131",class:"inner-container"},e("input",{key:"b301beea898c102b85132b295a9de6147cf66124",ref:t=>this.inputField=t,name:this.name,type:"search",role:"combobox","aria-haspopup":"listbox","aria-expanded":this.focused.toString(),"aria-activedescendant":this.selectedIndex!==undefined?`option-${this.selectedIndex}`:undefined,disabled:this.disabled,required:this.required,autoComplete:this.autocomplete,value:this.displayValue,onFocus:()=>{this.searchQueryChanged.emit(this.value);this.focused=true},onBlur:()=>this.handleBlur(),onInput:t=>this.handleInput(t),onInvalid:()=>this.handleInvalid(),onChange:()=>this.handleChange(),"aria-labelledby":this.labelId,onKeyDown:t=>this.handleKeyDown(t)}),!this.valid&&e("svg",{key:"7c6c952ddeac369ed297278d8186055d718a7bb3",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960",class:"error"},e("path",{key:"5739fd904cf2aaef58b79f1862821fde2fb23b2e",d:"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z"})),e("ul",{key:"49a560038ea0315c2244e62a6ce7be7c9fcd3aaa",class:this.focused&&this.suggestions.length>0?"show":"",role:"listbox",ref:t=>this.suggestionsContainer=t,onScroll:()=>this.handleSuggestionsScroll()},this.suggestions.map(((t,i)=>e("li",{id:`option-${i}`,role:"option","aria-selected":this.selectedIndex==i,class:this.selectedIndex==i?"selected":"",onClick:t=>this.selectItem(t,i)},this.renderSuggestion!=undefined?this.renderSuggestion(t):t.label))),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&e("div",{key:"2c0e96daa50d4964900cbd271c3e10df9cd45a6f",class:"loading"}),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&this.positionInitialized&&e("div",{key:"b25a29bcae6a226fa0e82c0ae8179e652d95cb9e",style:{height:`${this.getVirtualScrollHeight()}px`}})),e("svg",{key:"e5aa277521a56e811c09c8be749b256ec250d991",onClick:()=>this.handleDropdownClick(),class:"chevron-down",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},e("path",{key:"5461b364b5546e4a84d987b7604976d60d1c0d1f",d:"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z"})))))}static get formAssociated(){return true}get element(){return n(this)}static get watchers(){return{value:[{handleValueChange:0}]}}};h([r(300)],a.prototype,"handleSearchQueryChanged",null);h([r(100)],a.prototype,"handleSuggestionsScroll",null);h([r()],a.prototype,"checkIfMoreItemsNeeded",null);a.style=o();export{a as dnn_autocomplete};
|
|
2
|
+
//# sourceMappingURL=p-ebabc0c3.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["dnnAutocompleteCss","DnnAutocomplete","constructor","hostRef","this","value","suggestions","preloadThresholdPixels","autocomplete","focused","valid","positionInitialized","lastScrollTop","displayValue","adjustDropdownPosition","itemHeight","findAverageSuggestionHeight","requestAnimationFrame","spaceBelow","window","innerHeight","inputField","getBoundingClientRect","bottom","rem","parseFloat","getComputedStyle","document","documentElement","fontSize","fitsDown","suggestionsContainer","style","top","maxHeight","checkIfMoreItemsNeeded","checkValidity","validity","fieldset","setValidity","validationMessage","internals","setCustomValidity","message","undefined","handleValueChange","newValue","selectItemFromValue","handleClick","e","path","composedPath","includes","element","componentDidLoad","componentDidRender","length","formResetCallback","setFormValue","handleInput","inputValue","target","valueInput","emit","handleSearchQueryChanged","searchQueryChanged","selectedIndex","findIndex","s","label","handleInvalid","customValidityMessage","handleChange","valueChange","name","data","FormData","append","shouldLabelFloat","suggestionItems","querySelectorAll","totalHeight","i","clientHeight","handleKeyDown","key","preventDefault","Math","min","max","_a","selectedItem","itemSelected","selectItem","index","stopPropagation","getVirtualScrollHeight","upcomingItems","totalSuggestions","NaN","handleDropdownClick","handleSuggestionsScroll","container","currentScrollTop","scrollTop","loadingDiv","querySelector","loadingDivPosition","offsetTop","loadingDivHeight","offsetHeight","loadingDivBottom","visibleBottom","scrollPosition","eventArgs","searchTerm","needMoreItems","handleBlur","render","h","Host","tabIndex","onFocus","focus","onBlur","blur","ref","el","invalid","required","helpText","id","labelId","disabled","floatLabel","class","type","role","toString","autoComplete","onInput","onInvalid","onChange","onKeyDown","xmlns","viewBox","d","onScroll","map","suggestion","onClick","renderSuggestion","height","__decorate","Debounce","prototype"],"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 fill: var(--foreground-color);\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\ndnn-fieldset{\n --fieldset-foreground-color: var(--foreground-color);\n --fieldset-background-color: var(--background-color);\n --fieldset-focus-color: var(--focus-color);\n --fieldset-danger-color: var(--danger-color);\n --fieldset-control-radius: var(--control-radius);\n}\n\nsvg{\n &.error{\n fill: red;\n width: 1em;\n height: 1em;\n transform: scale(1.5);\n margin-right: 0.5em;\n }\n}","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen, Watch } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label?: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name?: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText?: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value = \"\";\n\n /** Defines whether the field requires having a value. */\n @Prop() required?: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled?: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion?: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n \n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions?: number;\n \n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n /** Defines the type of automatic completion the browser could use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete: string = \"off\";\n\n @Element() element!: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange!: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput!: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems!: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged!: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected!: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n this.fieldset.setValidity(true, \"\");\n this.valid = validity;\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage?: string;\n @State() selectedIndex?: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n @State() displayValue: string = \"\";\n\n @Watch(\"value\")\n handleValueChange(newValue: string) {\n this.selectItemFromValue(newValue);\n }\n \n /** attacth the internals for form validation */\n @AttachInternals() internals!: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n\n componentDidLoad() {\n if (this.value != \"\"){\n this.selectItemFromValue(this.value);\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 fieldset!: HTMLDnnFieldsetElement;\n private labelId!: string;\n \n \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 selectItemFromValue(value: string) {\n this.selectedIndex = this.suggestions.findIndex(s => s.value === value);\n this.displayValue = this.selectedIndex != -1 ? this.suggestions[this.selectedIndex].label : value;\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined) {\n this.customValidityMessage = this.inputField.validationMessage;\n }\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\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);\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 != \"\") {\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.selectedIndex == undefined ? this.value : this.suggestions[this.selectedIndex]?.value;\n if (e.key === \"Enter\") {\n if (this.selectedIndex != undefined){\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 }\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 || NaN) - 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 private handleBlur(): void {\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el!}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el!}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n value={this.displayValue}\n onFocus={() => {\n this.searchQueryChanged.emit(this.value);\n this.focused = true;\n }}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n {!this.valid &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"error\">\n <path d=\"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z\"/>\n </svg>\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":[]}
|
|
@@ -96,9 +96,7 @@ const DnnAutocomplete = class {
|
|
|
96
96
|
this.fieldset.setValidity(false, message);
|
|
97
97
|
}
|
|
98
98
|
handleValueChange(newValue) {
|
|
99
|
-
this.
|
|
100
|
-
// Find the index of the selected item
|
|
101
|
-
this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);
|
|
99
|
+
this.selectItemFromValue(newValue);
|
|
102
100
|
}
|
|
103
101
|
/** Listener for mouse down event */
|
|
104
102
|
handleClick(e) {
|
|
@@ -107,6 +105,11 @@ const DnnAutocomplete = class {
|
|
|
107
105
|
this.focused = false;
|
|
108
106
|
}
|
|
109
107
|
}
|
|
108
|
+
componentDidLoad() {
|
|
109
|
+
if (this.value != "") {
|
|
110
|
+
this.selectItemFromValue(this.value);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
110
113
|
componentDidRender() {
|
|
111
114
|
if (this.focused && this.suggestions.length > 0 && !this.positionInitialized) {
|
|
112
115
|
this.adjustDropdownPosition();
|
|
@@ -131,6 +134,10 @@ const DnnAutocomplete = class {
|
|
|
131
134
|
handleSearchQueryChanged(value) {
|
|
132
135
|
this.searchQueryChanged.emit(value);
|
|
133
136
|
}
|
|
137
|
+
selectItemFromValue(value) {
|
|
138
|
+
this.selectedIndex = this.suggestions.findIndex(s => s.value === value);
|
|
139
|
+
this.displayValue = this.selectedIndex != -1 ? this.suggestions[this.selectedIndex].label : value;
|
|
140
|
+
}
|
|
134
141
|
handleInvalid() {
|
|
135
142
|
this.valid = false;
|
|
136
143
|
if (this.customValidityMessage == undefined) {
|
|
@@ -267,13 +274,13 @@ const DnnAutocomplete = class {
|
|
|
267
274
|
}
|
|
268
275
|
render() {
|
|
269
276
|
var _a;
|
|
270
|
-
return (h(Host, { key: '
|
|
277
|
+
return (h(Host, { key: '22a44af6d75e9f1604228bce6167c043ee350db6', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("dnn-fieldset", { key: '2546facbd5db7d813c151cd8303ce68e8c7883e0', 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: '0cd31f7454d2543fde799db59f4273d85d21b131', class: "inner-container" }, h("input", { key: 'b301beea898c102b85132b295a9de6147cf66124', ref: (el) => this.inputField = el, name: this.name, type: "search", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.focused.toString(), "aria-activedescendant": this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined, disabled: this.disabled, required: this.required, autoComplete: this.autocomplete, value: this.displayValue, onFocus: () => {
|
|
271
278
|
this.searchQueryChanged.emit(this.value);
|
|
272
279
|
this.focused = true;
|
|
273
280
|
}, onBlur: () => this.handleBlur(), onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId, onKeyDown: e => this.handleKeyDown(e) }), !this.valid &&
|
|
274
|
-
h("svg", { key: '
|
|
275
|
-
h("div", { key: '
|
|
276
|
-
h("div", { key: '
|
|
281
|
+
h("svg", { key: '7c6c952ddeac369ed297278d8186055d718a7bb3', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", class: "error" }, h("path", { key: '5739fd904cf2aaef58b79f1862821fde2fb23b2e', d: "M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z" })), h("ul", { key: '49a560038ea0315c2244e62a6ce7be7c9fcd3aaa', 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 &&
|
|
282
|
+
h("div", { key: '2c0e96daa50d4964900cbd271c3e10df9cd45a6f', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
|
|
283
|
+
h("div", { key: 'b25a29bcae6a226fa0e82c0ae8179e652d95cb9e', style: { height: `${this.getVirtualScrollHeight()}px` } })), h("svg", { key: 'e5aa277521a56e811c09c8be749b256ec250d991', onClick: () => this.handleDropdownClick(), class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: '5461b364b5546e4a84d987b7604976d60d1c0d1f', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
|
|
277
284
|
}
|
|
278
285
|
static get formAssociated() { return true; }
|
|
279
286
|
get element() { return getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dnn-autocomplete.entry.js","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 fill: var(--foreground-color);\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\ndnn-fieldset{\n --fieldset-foreground-color: var(--foreground-color);\n --fieldset-background-color: var(--background-color);\n --fieldset-focus-color: var(--focus-color);\n --fieldset-danger-color: var(--danger-color);\n --fieldset-control-radius: var(--control-radius);\n}\n\nsvg{\n &.error{\n fill: red;\n width: 1em;\n height: 1em;\n transform: scale(1.5);\n margin-right: 0.5em;\n }\n}","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen, Watch } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label?: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name?: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText?: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value = \"\";\n\n /** Defines whether the field requires having a value. */\n @Prop() required?: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled?: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion?: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n \n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions?: number;\n \n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n /** Defines the type of automatic completion the browser could use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete: string = \"off\";\n\n @Element() element!: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange!: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput!: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems!: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged!: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected!: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n this.fieldset.setValidity(true, \"\");\n this.valid = validity;\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage?: string;\n @State() selectedIndex?: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n @State() displayValue: string = \"\";\n\n @Watch(\"value\")\n handleValueChange(newValue: string) {\n this.displayValue = newValue;\n\n // Find the index of the selected item\n this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);\n }\n \n /** attacth the internals for form validation */\n @AttachInternals() internals!: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n \n componentDidRender(){\n if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n this.adjustDropdownPosition();\n }\n }\n\n private inputField!: HTMLInputElement;\n private suggestionsContainer!: HTMLUListElement;\n private fieldset!: HTMLDnnFieldsetElement;\n private labelId!: string;\n \n \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 this.fieldset.setValidity(false, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\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);\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 != \"\") {\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.selectedIndex == undefined ? this.value : this.suggestions[this.selectedIndex]?.value;\n if (e.key === \"Enter\") {\n if (this.selectedIndex != undefined){\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 }\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 || NaN) - 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 private handleBlur(): void {\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el!}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el!}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n value={this.displayValue}\n onFocus={() => {\n this.searchQueryChanged.emit(this.value);\n this.focused = true;\n }}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n {!this.valid &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"error\">\n <path d=\"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z\"/>\n </svg>\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}"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"dnn-autocomplete.entry.js","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 fill: var(--foreground-color);\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\ndnn-fieldset{\n --fieldset-foreground-color: var(--foreground-color);\n --fieldset-background-color: var(--background-color);\n --fieldset-focus-color: var(--focus-color);\n --fieldset-danger-color: var(--danger-color);\n --fieldset-control-radius: var(--control-radius);\n}\n\nsvg{\n &.error{\n fill: red;\n width: 1em;\n height: 1em;\n transform: scale(1.5);\n margin-right: 0.5em;\n }\n}","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen, Watch } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label?: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name?: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText?: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value = \"\";\n\n /** Defines whether the field requires having a value. */\n @Prop() required?: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled?: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion?: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n \n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions?: number;\n \n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n /** Defines the type of automatic completion the browser could use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete: string = \"off\";\n\n @Element() element!: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange!: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput!: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems!: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged!: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected!: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n this.fieldset.setValidity(true, \"\");\n this.valid = validity;\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage?: string;\n @State() selectedIndex?: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n @State() displayValue: string = \"\";\n\n @Watch(\"value\")\n handleValueChange(newValue: string) {\n this.selectItemFromValue(newValue);\n }\n \n /** attacth the internals for form validation */\n @AttachInternals() internals!: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n\n componentDidLoad() {\n if (this.value != \"\"){\n this.selectItemFromValue(this.value);\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 fieldset!: HTMLDnnFieldsetElement;\n private labelId!: string;\n \n \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 selectItemFromValue(value: string) {\n this.selectedIndex = this.suggestions.findIndex(s => s.value === value);\n this.displayValue = this.selectedIndex != -1 ? this.suggestions[this.selectedIndex].label : value;\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined) {\n this.customValidityMessage = this.inputField.validationMessage;\n }\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\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);\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 != \"\") {\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.selectedIndex == undefined ? this.value : this.suggestions[this.selectedIndex]?.value;\n if (e.key === \"Enter\") {\n if (this.selectedIndex != undefined){\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 }\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 || NaN) - 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 private handleBlur(): void {\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el!}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el!}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n value={this.displayValue}\n onFocus={() => {\n this.searchQueryChanged.emit(this.value);\n this.focused = true;\n }}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n {!this.valid &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"error\">\n <path d=\"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z\"/>\n </svg>\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}"],"names":[],"mappings":"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"}
|
|
@@ -62,6 +62,7 @@ export declare class DnnAutocomplete {
|
|
|
62
62
|
internals: ElementInternals;
|
|
63
63
|
/** Listener for mouse down event */
|
|
64
64
|
handleClick(e: MouseEvent): void;
|
|
65
|
+
componentDidLoad(): void;
|
|
65
66
|
componentDidRender(): void;
|
|
66
67
|
private inputField;
|
|
67
68
|
private suggestionsContainer;
|
|
@@ -70,6 +71,7 @@ export declare class DnnAutocomplete {
|
|
|
70
71
|
formResetCallback(): void;
|
|
71
72
|
private handleInput;
|
|
72
73
|
private handleSearchQueryChanged;
|
|
74
|
+
private selectItemFromValue;
|
|
73
75
|
private handleInvalid;
|
|
74
76
|
private handleChange;
|
|
75
77
|
/** Check if the label should float */
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,c as i,h as e,H as s,g as n}from"./p-CFl1mTV-.js";import{D as r}from"./p-DI6iaKDl.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);fill:var(--foreground-color);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}dnn-fieldset{--fieldset-foreground-color:var(--foreground-color);--fieldset-background-color:var(--background-color);--fieldset-focus-color:var(--focus-color);--fieldset-danger-color:var(--danger-color);--fieldset-control-radius:var(--control-radius)}svg.error{fill:red;width:1em;height:1em;transform:scale(1.5);margin-right:0.5em}`;var h=undefined&&undefined.__decorate||function(t,i,e,s){var n=arguments.length,r=n<3?i:s===null?s=Object.getOwnPropertyDescriptor(i,e):s,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(t,i,e,s);else for(var h=t.length-1;h>=0;h--)if(o=t[h])r=(n<3?o(r):n>3?o(i,e,r):o(i,e))||r;return n>3&&r&&Object.defineProperty(i,e,r),r};const a=class{constructor(e){t(this,e);this.valueChange=i(this,"valueChange",7);this.valueInput=i(this,"valueInput",7);this.needMoreItems=i(this,"needMoreItems",7);this.searchQueryChanged=i(this,"searchQueryChanged",7);this.itemSelected=i(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.value="";this.suggestions=[];this.preloadThresholdPixels=1e3;this.autocomplete="off";this.focused=false;this.valid=true;this.positionInitialized=false;this.lastScrollTop=0;this.displayValue="";this.adjustDropdownPosition=()=>{var t=this.findAverageSuggestionHeight();requestAnimationFrame((()=>{this.positionInitialized=true}));var i=window.innerHeight-this.inputField.getBoundingClientRect().bottom;const e=parseFloat(getComputedStyle(document.documentElement).fontSize);const s=i>3*t+3*e;if(s){this.suggestionsContainer.style.top="1.2rem"}else{this.suggestionsContainer.style.bottom="1.2rem"}if(s){this.suggestionsContainer.style.maxHeight=`${i-3*e}px`}else{this.suggestionsContainer.style.maxHeight=`${this.inputField.getBoundingClientRect().top-3*e}px`}this.checkIfMoreItemsNeeded()}}async checkValidity(){var t=this.inputField.checkValidity();if(!t){this.fieldset.setValidity(false,this.inputField.validationMessage)}this.fieldset.setValidity(true,"");this.valid=t;this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage);return this.inputField.validity}async setCustomValidity(t){if(t==undefined||t==""){this.inputField.setCustomValidity("");this.valid=true;this.fieldset.setValidity(true);return}this.inputField.setCustomValidity(t);this.valid=false;this.fieldset.setValidity(false,t)}handleValueChange(t){this.displayValue=t;this.selectedIndex=this.suggestions.findIndex((i=>i.value===t))}handleClick(t){const i=t.composedPath();if(!i.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(t){const i=t.target.value;this.displayValue=i;this.value=i;var e=this.inputField.checkValidity();this.valid=e;this.valueInput.emit(i);this.handleSearchQueryChanged(i)}handleSearchQueryChanged(t){this.searchQueryChanged.emit(t)}handleInvalid(){this.valid=false;if(this.customValidityMessage==undefined){this.customValidityMessage=this.inputField.validationMessage}this.fieldset.setValidity(false,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}handleChange(){this.valueChange.emit(this.value);if(this.name!=undefined){var t=new FormData;t.append(this.name,this.value);this.internals.setFormValue(t)}}shouldLabelFloat(){if(this.focused){return false}if(this.value!=""){return false}return true}findAverageSuggestionHeight(){const t=this.suggestionsContainer.querySelectorAll("li");var i=0;for(let e=0;e<t.length;e++){i+=t[e].clientHeight}return i/t.length}handleKeyDown(t){var i;if(t.key==="ArrowDown"){t.preventDefault();if(this.selectedIndex==undefined){this.selectedIndex=0}else{this.selectedIndex=Math.min(this.selectedIndex+1,this.suggestions.length-1)}}if(t.key==="ArrowUp"){t.preventDefault();if(this.selectedIndex==undefined){this.selectedIndex=this.suggestions.length-1}else{this.selectedIndex=Math.max(this.selectedIndex-1,0)}}this.value=this.selectedIndex==undefined?this.value:(i=this.suggestions[this.selectedIndex])===null||i===void 0?void 0:i.value;if(t.key==="Enter"){if(this.selectedIndex!=undefined){var e=this.suggestions[this.selectedIndex];this.value=e.value;this.inputField.value=e.label;this.itemSelected.emit(e.value);this.focused=false}}if(t.key==="Tab"){this.focused=false}}selectItem(t,i){t.preventDefault();t.stopPropagation();this.selectedIndex=i;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 t=this.findAverageSuggestionHeight();const i=(this.totalSuggestions||NaN)-this.suggestions.length;return t*i}handleDropdownClick(){this.handleSearchQueryChanged(this.value)}handleSuggestionsScroll(){const t=this.suggestionsContainer;const i=t.scrollTop;if(i>this.lastScrollTop){const e=t.querySelector(".loading");if(e==undefined){this.lastScrollTop=i;return}const s=e.offsetTop;const n=e.offsetHeight;const r=s+n;const o=i+t.clientHeight;if(o>r){t.scrollTop=r-t.clientHeight}this.checkIfMoreItemsNeeded()}this.lastScrollTop=i}checkIfMoreItemsNeeded(){const t=this.suggestionsContainer;const i=t.querySelector(".loading");if(i==undefined)return;const e=t.scrollTop+t.clientHeight;const s=i.offsetTop;if(s-e<this.preloadThresholdPixels){const t={searchTerm:this.inputField.value};this.needMoreItems.emit(t)}}handleBlur(){var t=this.inputField.checkValidity();this.valid=t;this.fieldset.setValidity(t,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}render(){var t;return e(s,{key:"1e292d089aaa274d1aa4b9898bd0d9d15b7d6d70",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},e("dnn-fieldset",{key:"d70181acb451533a2ecb842b16bb9a1f4786d5e5",ref:t=>this.fieldset=t,invalid:!this.valid,focused:this.focused,label:`${(t=this.label)!==null&&t!==void 0?t:""}${this.required?" *":""}`,helpText:this.helpText,id:this.labelId,disabled:this.disabled,floatLabel:this.shouldLabelFloat()},e("div",{key:"b91badc6ea15ecaeeb7b8f24383b8dbc7eeb1ceb",class:"inner-container"},e("input",{key:"e2dd5f4e2179dc5d61e6e5faf5f62bfac8e96ae1",ref:t=>this.inputField=t,name:this.name,type:"search",role:"combobox","aria-haspopup":"listbox","aria-expanded":this.focused.toString(),"aria-activedescendant":this.selectedIndex!==undefined?`option-${this.selectedIndex}`:undefined,disabled:this.disabled,required:this.required,autoComplete:this.autocomplete,value:this.displayValue,onFocus:()=>{this.searchQueryChanged.emit(this.value);this.focused=true},onBlur:()=>this.handleBlur(),onInput:t=>this.handleInput(t),onInvalid:()=>this.handleInvalid(),onChange:()=>this.handleChange(),"aria-labelledby":this.labelId,onKeyDown:t=>this.handleKeyDown(t)}),!this.valid&&e("svg",{key:"c5678ec6aebde3e12654d23996f5e7800a44011d",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960",class:"error"},e("path",{key:"e3d61322deab9289f34f64f03dbda93721334f3b",d:"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z"})),e("ul",{key:"46bf9ea05343a94b1bef9fabbed0e4f31536952d",class:this.focused&&this.suggestions.length>0?"show":"",role:"listbox",ref:t=>this.suggestionsContainer=t,onScroll:()=>this.handleSuggestionsScroll()},this.suggestions.map(((t,i)=>e("li",{id:`option-${i}`,role:"option","aria-selected":this.selectedIndex==i,class:this.selectedIndex==i?"selected":"",onClick:t=>this.selectItem(t,i)},this.renderSuggestion!=undefined?this.renderSuggestion(t):t.label))),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&e("div",{key:"6a0e9fc2f6dbbb0e7333631d60e131aa3e24ed05",class:"loading"}),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&this.positionInitialized&&e("div",{key:"5b5195357e3f0f257837485dd08e487f3302830e",style:{height:`${this.getVirtualScrollHeight()}px`}})),e("svg",{key:"6add57764f3df4fde8d95fc049e1e1f9a03afb96",onClick:()=>this.handleDropdownClick(),class:"chevron-down",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},e("path",{key:"2f25891e79ba26598884234386e6b57612741c48",d:"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z"})))))}static get formAssociated(){return true}get element(){return n(this)}static get watchers(){return{value:[{handleValueChange:0}]}}};h([r(300)],a.prototype,"handleSearchQueryChanged",null);h([r(100)],a.prototype,"handleSuggestionsScroll",null);h([r()],a.prototype,"checkIfMoreItemsNeeded",null);a.style=o();export{a as dnn_autocomplete};
|
|
2
|
-
//# sourceMappingURL=p-fdecda97.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["dnnAutocompleteCss","DnnAutocomplete","constructor","hostRef","this","value","suggestions","preloadThresholdPixels","autocomplete","focused","valid","positionInitialized","lastScrollTop","displayValue","adjustDropdownPosition","itemHeight","findAverageSuggestionHeight","requestAnimationFrame","spaceBelow","window","innerHeight","inputField","getBoundingClientRect","bottom","rem","parseFloat","getComputedStyle","document","documentElement","fontSize","fitsDown","suggestionsContainer","style","top","maxHeight","checkIfMoreItemsNeeded","checkValidity","validity","fieldset","setValidity","validationMessage","internals","setCustomValidity","message","undefined","handleValueChange","newValue","selectedIndex","findIndex","s","handleClick","e","path","composedPath","includes","element","componentDidRender","length","formResetCallback","setFormValue","handleInput","inputValue","target","valueInput","emit","handleSearchQueryChanged","searchQueryChanged","handleInvalid","customValidityMessage","handleChange","valueChange","name","data","FormData","append","shouldLabelFloat","suggestionItems","querySelectorAll","totalHeight","i","clientHeight","handleKeyDown","key","preventDefault","Math","min","max","_a","selectedItem","label","itemSelected","selectItem","index","stopPropagation","getVirtualScrollHeight","upcomingItems","totalSuggestions","NaN","handleDropdownClick","handleSuggestionsScroll","container","currentScrollTop","scrollTop","loadingDiv","querySelector","loadingDivPosition","offsetTop","loadingDivHeight","offsetHeight","loadingDivBottom","visibleBottom","scrollPosition","eventArgs","searchTerm","needMoreItems","handleBlur","render","h","Host","tabIndex","onFocus","focus","onBlur","blur","ref","el","invalid","required","helpText","id","labelId","disabled","floatLabel","class","type","role","toString","autoComplete","onInput","onInvalid","onChange","onKeyDown","xmlns","viewBox","d","onScroll","map","suggestion","onClick","renderSuggestion","height","__decorate","Debounce","prototype"],"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 fill: var(--foreground-color);\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\ndnn-fieldset{\n --fieldset-foreground-color: var(--foreground-color);\n --fieldset-background-color: var(--background-color);\n --fieldset-focus-color: var(--focus-color);\n --fieldset-danger-color: var(--danger-color);\n --fieldset-control-radius: var(--control-radius);\n}\n\nsvg{\n &.error{\n fill: red;\n width: 1em;\n height: 1em;\n transform: scale(1.5);\n margin-right: 0.5em;\n }\n}","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen, Watch } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label?: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name?: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText?: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value = \"\";\n\n /** Defines whether the field requires having a value. */\n @Prop() required?: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled?: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion?: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n \n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions?: number;\n \n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n /** Defines the type of automatic completion the browser could use.\n * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @Prop() autocomplete: string = \"off\";\n\n @Element() element!: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange!: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput!: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems!: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged!: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected!: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n this.fieldset.setValidity(true, \"\");\n this.valid = validity;\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage?: string;\n @State() selectedIndex?: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n @State() displayValue: string = \"\";\n\n @Watch(\"value\")\n handleValueChange(newValue: string) {\n this.displayValue = newValue;\n\n // Find the index of the selected item\n this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);\n }\n \n /** attacth the internals for form validation */\n @AttachInternals() internals!: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n \n componentDidRender(){\n if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n this.adjustDropdownPosition();\n }\n }\n\n private inputField!: HTMLInputElement;\n private suggestionsContainer!: HTMLUListElement;\n private fieldset!: HTMLDnnFieldsetElement;\n private labelId!: string;\n \n \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 this.fieldset.setValidity(false, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\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);\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 != \"\") {\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.selectedIndex == undefined ? this.value : this.suggestions[this.selectedIndex]?.value;\n if (e.key === \"Enter\") {\n if (this.selectedIndex != undefined){\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 }\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 || NaN) - 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 private handleBlur(): void {\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el!}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el!}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete={this.autocomplete}\n value={this.displayValue}\n onFocus={() => {\n this.searchQueryChanged.emit(this.value);\n this.focused = true;\n }}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n {!this.valid &&\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"error\">\n <path d=\"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z\"/>\n </svg>\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":[]}
|