@dnncommunity/dnn-elements 0.24.2 → 0.24.3-beta.1

package/dist/cjs/dnn-autocomplete.cjs.entry.js

@@ -98,6 +98,11 @@ const DnnAutocomplete = class {
         this.valid = false;
         this.fieldset.setValidity(false, message);
     }
+    handleValueChange(newValue) {
+        this.displayValue = newValue;
+        // Find the index of the selected item
+        this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);
+    }
     /** Listener for mouse down event */
     handleClick(e) {
         const path = e.composedPath();
@@ -262,15 +267,18 @@ const DnnAutocomplete = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '10a0264ebae498078dbfc3fbd6ffa1a2a1b50c0e', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, index.h("dnn-fieldset", { key: '8f2426b397ba4001ed65255f58878176441950dc', 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: 'fad1d2e8567163f4dcea423fe71eacc157fcc350', class: "inner-container" }, index.h("input", { key: 'bffb6ee3cbee67db6e280f29092ead301e75f8e8', 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: () => {
+        return (index.h(index.Host, { key: 'e4721cc0e2110853787b552f1353c94d8483287b', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, index.h("dnn-fieldset", { key: '0881da2521817503d78f15cd1fd9b777654b108d', ref: el => this.fieldset = el, invalid: !this.valid, focused: this.focused, label: `${(_a = this.label) !== null && _a !== void 0 ? _a : ""}${this.required ? " *" : ""}`, helpText: this.helpText, id: this.labelId, disabled: this.disabled, floatLabel: this.shouldLabelFloat() }, index.h("div", { key: 'ac5590e129b624f1ba1c012448897515017db086', class: "inner-container" }, index.h("input", { key: '779f3a6e00dff6319b2d94c6bb903e9b495d1746', ref: (el) => this.inputField = el, name: this.name, type: "search", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.focused.toString(), "aria-activedescendant": this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined, disabled: this.disabled, required: this.required, autoComplete: this.autocomplete, value: this.displayValue, onFocus: () => {
                 this.searchQueryChanged.emit(this.value || "");
                 this.focused = true;
-            }, onBlur: () => this.handleBlur(), onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId, onKeyDown: e => this.handleKeyDown(e) }), index.h("ul", { key: '1cffdc6b12d2337cc89448fd232ca453700e655d', 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 &&
-            index.h("div", { key: '2a7bd6440f9d71a11aa44a4ed2ce444c6efced35', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
-            index.h("div", { key: '2c7b5655893711bb51fffb97f911308ac6d144ed', style: { height: `${this.getVirtualScrollHeight()}px` } })), index.h("svg", { key: '55452717a72e3d597bb40ed934db19dbb8ddfd6f', onClick: () => this.handleDropdownClick(), class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, index.h("path", { key: 'e26905040e49403c2bd55c893858eefa4d4d470a', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
+            }, onBlur: () => this.handleBlur(), onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId, onKeyDown: e => this.handleKeyDown(e) }), index.h("ul", { key: '32448159bf989944d974bdba2ca42cf30f089272', class: this.focused && this.suggestions.length > 0 ? "show" : "", role: "listbox", ref: el => this.suggestionsContainer = el, onScroll: () => this.handleSuggestionsScroll() }, this.suggestions.map((suggestion, index$1) => (index.h("li", { id: `option-${index$1}`, role: "option", "aria-selected": this.selectedIndex == index$1, class: this.selectedIndex == index$1 ? "selected" : "", onClick: e => this.selectItem(e, index$1) }, this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label))), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&
+            index.h("div", { key: 'd4bee8ab76bb9058740f1fb6a0faf06e9446f859', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
+            index.h("div", { key: '54539c1e08aa3cd521306a942df62835099f3560', style: { height: `${this.getVirtualScrollHeight()}px` } })), index.h("svg", { key: '43a4b159fcd84253003375dbf5cf95818539b410', onClick: () => this.handleDropdownClick(), class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, index.h("path", { key: 'c752ed998df5b38322b13f8636f172c645f2ca8a', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
     }
     static get formAssociated() { return true; }
     get element() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
 };
 __decorate([
     debounce.Debounce(300)

package/dist/cjs/dnn-autocomplete.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"dnn-autocomplete.entry.cjs.js","mappings":"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","names":["h","Host","index","Debounce"],"sources":["src/components/dnn-autocomplete/dnn-autocomplete.scss?tag=dnn-autocomplete&encapsulation=shadow","src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  /** @prop --foreground-color: Defines the foreground color. */\n  --foreground-color: var(--dnn-color-foreground, #000);\n\n  /** @prop --background-color: Defines the background color. */\n  --background-color: var(--dnn-color-background, #fff);\n\n  /** @prop --focus-color: Defines the color when the component is focused. */\n  --focus-color: var(--dnn-color-primary, #3792ED);\n\n  /** @prop --danger-color: Defines the danger color used for invalid data. */\n  --danger-color: var(--dnn-color-danger, #900);\n\n  /** @prop --control-radius: Defines the radius for the control corners. */\n  --control-radius: var(--dnn-controls-radius, 3px);\n}\n\ndnn-fieldset{\n  width: 100%;\n}\n\n@keyframes shift {\n  0% {\n      background-position: 0% 0;\n  }\n  50% {\n      background-position: 100% 0;\n  }\n  100% {\n      background-position: 200% 0;\n  }\n}\n\n.inner-container{\n  display: flex;\n  justify-content: space-between;\n  position: relative;\n  width: 100%;\n\n  input {\n    border: none;\n    outline: none;\n    background-color: transparent;\n    color: var(--foreground-color);\n    text-align: var(--input-text-align);\n    width: 100%;\n  }\n\n  svg.chevron-down{\n    height: 1rem;\n    width: auto;\n    transform: scale(1.2);\n    cursor: pointer;\n  }\n\n  ul{\n    position: absolute;\n    border: 1px solid lightgray;\n    margin: 0;\n    padding: var(--dnn-controls-radius, 3px) 0;\n    overflow-y: auto;\n    width: 100%;\n    box-shadow: 2px 2px 6px 1px rgb(0 0 0 / 30%);\n    background-color: var(--dnn-color-background, white);\n    border-radius: var(--dnn-controls-radius, 3px);\n    z-index: 2;\n    display: none;\n    scroll-behavior: smooth;\n    &.show{\n      display: block;\n    }\n    li {\n      display: block;\n      list-style-type: none;\n      cursor: pointer;\n      padding: 0 0.5rem;\n      &.selected {\n        background-color: lightgray;\n      }\n      &:hover {\n        background-color: lightgray;\n      }\n    }\n    .loading {\n      width: 100%;\n      height: 0.5rem;\n      border-radius: 0.5rem;\n      background: linear-gradient(\n        to right,\n        var(--background-color) 0%,\n        var(--foreground-color) 50%,\n        var(--background-color) 100%);\n      background-size: 200% 100%;\n      animation: shift 2s linear infinite;\n      width: 75%;\n      margin: 0 auto;\n      opacity: 0.5;\n    }\n  }\n}\n","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n  tag: 'dnn-autocomplete',\n  styleUrl: 'dnn-autocomplete.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n  /** The label for this autocomplete. */\n  @Prop() label: string;\n\n  /** The name for this autocomplete when used in forms. */\n  @Prop() name: string;\n\n  /** Defines the help label displayed under the field. */\n  @Prop() helpText: string;\n\n  /** Defines the value for this autocomplete */\n  @Prop({mutable: true, reflect: true}) value: string;\n\n  /** Defines whether the field requires having a value. */\n  @Prop() required: boolean;\n\n  /** Defines whether the field is disabled. */\n  @Prop() disabled: boolean;\n\n  /** Sets the list of suggestions. */\n  @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n  /** Callback to render suggestions, if not provided, only the label will be rendered. */\n  @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n  \n  /** The total amount of suggestions for the given search query.\n   * This can be used to show virtual scroll and pagination progressive feeding.\n   * The needMoreItems event should be used to request more items.\n   */\n  @Prop() totalSuggestions: number;\n \n  /** How many suggestions to preload in pixels of their height.\n  * This is used to calculate the virtual scroll height and request\n  * more items before they get into view.\n  */\n  @Prop() preloadThresholdPixels: number = 1000;\n\n  /** Defines the type of automatic completion the browser could use.\n  * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n  */\n  @Prop() autocomplete: string = \"off\";\n\n  @Element() element: HTMLDnnAutocompleteElement;\n\n  /** Fires when the value has changed and the user exits the input. */\n  @Event() valueChange: EventEmitter<number | string | string[]>;\n\n  /** Fires when the using is inputing data (on keystrokes). */\n  @Event() valueInput: EventEmitter<number | string | string[]>;\n\n  /** Fires when the component needs to display more items in the suggestions. */\n  @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n  /** Fires when the search query has changed.\n   * This is almost like valueInput, but it is debounced\n   * and can be used to trigger a search query without overloading\n   * API endpoints while typing.\n   */\n  @Event() searchQueryChanged: EventEmitter<string>;\n  \n  /** Fires when an item is selected. */\n  @Event() itemSelected: EventEmitter<string>;\n\n  /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n  @Method()\n  async checkValidity(): Promise<ValidityState> {\n    var validity = this.inputField.checkValidity();\n    if (!validity) {\n      this.fieldset.setValidity(false, this.inputField.validationMessage);\n    }\n    this.fieldset.setValidity(true, \"\");\n    return this.inputField.validity;\n  }\n  \n  /** Can be used to set a custom validity message. */\n  @Method()\n  async setCustomValidity(message: string): Promise<void> {\n    if (message == undefined || message == \"\") {\n      this.inputField.setCustomValidity(\"\");\n      this.valid = true;\n      this.fieldset.setValidity(true);\n      return;\n    }\n\n    this.inputField.setCustomValidity(message);\n    this.valid = false;\n    this.fieldset.setValidity(false, message);\n  }\n\n  @State() focused = false;\n  @State() valid = true;\n  @State() customValidityMessage: string;\n  @State() selectedIndex: number;\n  @State() positionInitialized = false;\n  @State() lastScrollTop = 0;\n  @State() displayValue: string = \"\";\n  \n  /** attacth the internals for form validation */\n  @AttachInternals() internals: ElementInternals;\n  \n  /** Listener for mouse down event */\n  @Listen(\"click\", { target: \"document\", capture: false })\n  handleClick(e: MouseEvent) {\n    const path = e.composedPath();\n    if (!path.includes(this.element))\n    {\n      this.focused = false;\n    }\n  }\n  \n  componentDidRender(){\n    if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n      this.adjustDropdownPosition();\n    }\n  }\n\n  private inputField!: HTMLInputElement;\n  private suggestionsContainer: HTMLUListElement;\n  private labelId: string;\n  private fieldset: HTMLDnnFieldsetElement;\n  \n  // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n  formResetCallback() {\n    this.inputField.setCustomValidity(\"\");\n    this.valid = true;\n    this.value = \"\";\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n  \n  private handleInput(e: Event) {\n    const inputValue = (e.target as HTMLInputElement).value;\n    this.displayValue = inputValue;\n    this.value = inputValue;\n    var valid = this.inputField.checkValidity();\n    this.valid = valid;\n    this.valueInput.emit(inputValue);\n    this.handleSearchQueryChanged(inputValue);\n  }\n\n  @Debounce(300)\n  private handleSearchQueryChanged(value: string) {\n    this.searchQueryChanged.emit(value);\n  }\n\n  private handleInvalid(): void {\n    this.valid = false;\n    if (this.customValidityMessage == undefined) {\n      this.customValidityMessage = this.inputField.validationMessage;\n    }\n  }\n\n  private handleChange() {\n    this.valueChange.emit(this.value);\n    if (this.name != undefined) {\n      var data = new FormData();\n      data.append(this.name, this.value.toString());\n      this.internals.setFormValue(data);\n    }\n  }\n\n  /** Check if the label should float */\n  private shouldLabelFloat(): boolean {\n    if (this.focused) {\n      return false;\n    }\n\n    if (this.value != undefined && this.value != \"\") {\n      return false;\n    }\n\n    return true;\n  }\n\n  private findAverageSuggestionHeight(): number {\n    const suggestionItems = this.suggestionsContainer.querySelectorAll(\"li\");\n    var totalHeight = 0;\n    for (let i = 0; i < suggestionItems.length; i++) {\n      totalHeight += suggestionItems[i].clientHeight;\n    }\n    return totalHeight / suggestionItems.length;\n  }\n\n  private readonly adjustDropdownPosition = () => {\n    var itemHeight = this.findAverageSuggestionHeight();\n    requestAnimationFrame(() => {\n      this.positionInitialized = true;\n    });\n\n    // If we can fit 3 items below the input and there is still 3em left, we show the dropdown under.\n    // Otherwise, we show it above.\n    var spaceBelow = window.innerHeight - this.inputField.getBoundingClientRect().bottom;\n    const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);\n    const fitsDown = spaceBelow > 3 * itemHeight + 3 * rem;\n    if (fitsDown) {\n      this.suggestionsContainer.style.top = \"1.2rem\";\n    }\n    else {\n      this.suggestionsContainer.style.bottom = \"1.2rem\";\n    }\n\n    // Set the max height to not overflow the screen.\n    if (fitsDown){\n      this.suggestionsContainer.style.maxHeight = `${spaceBelow - 3 * rem}px`;\n    }\n    else {\n      this.suggestionsContainer.style.maxHeight = `${this.inputField.getBoundingClientRect().top - 3 * rem}px`;\n    }\n\n    this.checkIfMoreItemsNeeded();\n  }\n\n  private handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      if (this.selectedIndex == undefined) {\n        this.selectedIndex = 0;\n      } else {\n        this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n      }\n    }\n    if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      if (this.selectedIndex == undefined) {\n        this.selectedIndex = this.suggestions.length - 1;\n      } else {\n        this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n      }\n    }\n    this.value = this.suggestions[this.selectedIndex]?.value || this.value;\n    if (e.key === \"Enter\") {\n      var selectedItem = this.suggestions[this.selectedIndex];\n      this.value = selectedItem.value;\n      this.inputField.value = selectedItem.label;\n      this.itemSelected.emit(selectedItem.value);\n      this.focused = false;\n    }\n    if (e.key === \"Tab\"){\n      this.focused = false;\n    }\n  }\n\n  private selectItem(e: Event, index: number): void {\n    e.preventDefault();\n    e.stopPropagation();\n    this.selectedIndex = index;\n    this.value = this.suggestions[this.selectedIndex].value;\n    this.displayValue = this.suggestions[this.selectedIndex].label;\n    this.inputField.value = this.displayValue;\n    this.checkValidity();\n    this.focused = false;\n    this.itemSelected.emit(this.suggestions[this.selectedIndex].value)\n  }\n\n  private getVirtualScrollHeight(): number {\n    const itemHeight = this.findAverageSuggestionHeight();\n    const upcomingItems = this.totalSuggestions - this.suggestions.length;\n    return itemHeight * upcomingItems;\n  }\n\n  private handleDropdownClick(): void {\n    this.handleSearchQueryChanged(this.value);\n  }\n\n  @Debounce(100)\n  private handleSuggestionsScroll(): void {\n    const container = this.suggestionsContainer;\n    const currentScrollTop = container.scrollTop;\n\n    // Only act if we are scrolling down\n    if (currentScrollTop > this.lastScrollTop) {\n      const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n      if (loadingDiv == undefined) {\n        this.lastScrollTop = currentScrollTop;\n        return;\n      }\n\n      const loadingDivPosition = loadingDiv.offsetTop;\n      const loadingDivHeight = loadingDiv.offsetHeight;\n      const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n      // Calculate the visible bottom of the scroll container\n      const visibleBottom = currentScrollTop + container.clientHeight;\n\n      // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n      if (visibleBottom > loadingDivBottom) {\n        // Adjust scrollTop so it doesn't scroll past the loading div\n        container.scrollTop = loadingDivBottom - container.clientHeight;\n      }\n\n      // Check if more items are needed based on the position of the loading div\n      this.checkIfMoreItemsNeeded();\n    }\n\n    // Update the last scroll position\n    this.lastScrollTop = currentScrollTop;\n  }\n\n  @Debounce()\n  private checkIfMoreItemsNeeded() {\n    const container = this.suggestionsContainer;\n  \n    const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n    if (loadingDiv == undefined) return; // Exit if there's no loading div\n  \n    const scrollPosition = container.scrollTop + container.clientHeight;\n    const loadingDivPosition = loadingDiv.offsetTop;\n  \n    // Check if the loading div is within the threshold of becoming visible\n    if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n      const eventArgs: NeedMoreItemsEventArgs = {\n        searchTerm: this.inputField.value,\n      };\n      this.needMoreItems.emit(eventArgs);\n    }\n  }\n\n  handleBlur(): void {\n    var validity = this.inputField.checkValidity();\n    this.valid = validity;\n    this.fieldset.setValidity(validity, this.inputField.validationMessage);\n    this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n  }\n\n  render() {\n    return (\n      <Host\n        tabIndex={this.focused ? -1 : 0}\n        onFocus={() => this.inputField.focus()}\n        onBlur={() => this.inputField.blur()}\n      >\n        <dnn-fieldset\n          ref={el => this.fieldset = el}\n          invalid={!this.valid}\n          focused={this.focused}\n          label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n          helpText={this.helpText}\n          id={this.labelId}\n          disabled={this.disabled}\n          floatLabel={this.shouldLabelFloat()}\n        >\n          <div class=\"inner-container\">\n            <input\n              ref={(el) => this.inputField = el}\n              name={this.name}\n              type=\"search\"\n              role=\"combobox\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={this.focused.toString()}\n              aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n              disabled={this.disabled}\n              required={this.required}\n              autoComplete={this.autocomplete}\n              value={this.displayValue}\n              onFocus={() => {\n                this.searchQueryChanged.emit(this.value || \"\");\n                this.focused = true;\n              }}\n              onBlur={() => this.handleBlur()}\n              onInput={e => this.handleInput(e)}\n              onInvalid={() => this.handleInvalid()}\n              onChange={() => this.handleChange()}\n              aria-labelledby={this.labelId}\n              onKeyDown={e => this.handleKeyDown(e)}\n            />\n            <ul\n              class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n              role=\"listbox\"\n              ref={el => this.suggestionsContainer = el}\n              onScroll={() => this.handleSuggestionsScroll()}\n            >\n              {this.suggestions.map((suggestion, index) => (\n                <li\n                  id={`option-${index}`}\n                  role=\"option\"\n                  aria-selected={this.selectedIndex == index}\n                  class={this.selectedIndex == index ? \"selected\" : \"\"}\n                  onClick={e => this.selectItem(e, index)}\n                >\n                  {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n                </li>\n              ))}\n              {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n                <div class=\"loading\">\n                </div>\n              }\n              {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n                <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n                </div>\n              }\n            </ul>\n            <svg\n              onClick={() => this.handleDropdownClick()}\n              class=\"chevron-down\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 -960 960 960\">\n              <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n            </svg>\n          </div>\n        </dnn-fieldset>\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"dnn-autocomplete.entry.cjs.js","mappings":"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","names":["h","Host","index","Debounce"],"sources":["src/components/dnn-autocomplete/dnn-autocomplete.scss?tag=dnn-autocomplete&encapsulation=shadow","src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  /** @prop --foreground-color: Defines the foreground color. */\n  --foreground-color: var(--dnn-color-foreground, #000);\n\n  /** @prop --background-color: Defines the background color. */\n  --background-color: var(--dnn-color-background, #fff);\n\n  /** @prop --focus-color: Defines the color when the component is focused. */\n  --focus-color: var(--dnn-color-primary, #3792ED);\n\n  /** @prop --danger-color: Defines the danger color used for invalid data. */\n  --danger-color: var(--dnn-color-danger, #900);\n\n  /** @prop --control-radius: Defines the radius for the control corners. */\n  --control-radius: var(--dnn-controls-radius, 3px);\n}\n\ndnn-fieldset{\n  width: 100%;\n}\n\n@keyframes shift {\n  0% {\n      background-position: 0% 0;\n  }\n  50% {\n      background-position: 100% 0;\n  }\n  100% {\n      background-position: 200% 0;\n  }\n}\n\n.inner-container{\n  display: flex;\n  justify-content: space-between;\n  position: relative;\n  width: 100%;\n\n  input {\n    border: none;\n    outline: none;\n    background-color: transparent;\n    color: var(--foreground-color);\n    text-align: var(--input-text-align);\n    width: 100%;\n  }\n\n  svg.chevron-down{\n    height: 1rem;\n    width: auto;\n    transform: scale(1.2);\n    cursor: pointer;\n  }\n\n  ul{\n    position: absolute;\n    border: 1px solid lightgray;\n    margin: 0;\n    padding: var(--dnn-controls-radius, 3px) 0;\n    overflow-y: auto;\n    width: 100%;\n    box-shadow: 2px 2px 6px 1px rgb(0 0 0 / 30%);\n    background-color: var(--dnn-color-background, white);\n    border-radius: var(--dnn-controls-radius, 3px);\n    z-index: 2;\n    display: none;\n    scroll-behavior: smooth;\n    &.show{\n      display: block;\n    }\n    li {\n      display: block;\n      list-style-type: none;\n      cursor: pointer;\n      padding: 0 0.5rem;\n      &.selected {\n        background-color: lightgray;\n      }\n      &:hover {\n        background-color: lightgray;\n      }\n    }\n    .loading {\n      width: 100%;\n      height: 0.5rem;\n      border-radius: 0.5rem;\n      background: linear-gradient(\n        to right,\n        var(--background-color) 0%,\n        var(--foreground-color) 50%,\n        var(--background-color) 100%);\n      background-size: 200% 100%;\n      animation: shift 2s linear infinite;\n      width: 75%;\n      margin: 0 auto;\n      opacity: 0.5;\n    }\n  }\n}\n","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen, Watch } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n  tag: 'dnn-autocomplete',\n  styleUrl: 'dnn-autocomplete.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n  /** The label for this autocomplete. */\n  @Prop() label: string;\n\n  /** The name for this autocomplete when used in forms. */\n  @Prop() name: string;\n\n  /** Defines the help label displayed under the field. */\n  @Prop() helpText: string;\n\n  /** Defines the value for this autocomplete */\n  @Prop({mutable: true, reflect: true}) value: string;\n\n  /** Defines whether the field requires having a value. */\n  @Prop() required: boolean;\n\n  /** Defines whether the field is disabled. */\n  @Prop() disabled: boolean;\n\n  /** Sets the list of suggestions. */\n  @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n  /** Callback to render suggestions, if not provided, only the label will be rendered. */\n  @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n  \n  /** The total amount of suggestions for the given search query.\n   * This can be used to show virtual scroll and pagination progressive feeding.\n   * The needMoreItems event should be used to request more items.\n   */\n  @Prop() totalSuggestions: number;\n \n  /** How many suggestions to preload in pixels of their height.\n  * This is used to calculate the virtual scroll height and request\n  * more items before they get into view.\n  */\n  @Prop() preloadThresholdPixels: number = 1000;\n\n  /** Defines the type of automatic completion the browser could use.\n  * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n  */\n  @Prop() autocomplete: string = \"off\";\n\n  @Element() element: HTMLDnnAutocompleteElement;\n\n  /** Fires when the value has changed and the user exits the input. */\n  @Event() valueChange: EventEmitter<number | string | string[]>;\n\n  /** Fires when the using is inputing data (on keystrokes). */\n  @Event() valueInput: EventEmitter<number | string | string[]>;\n\n  /** Fires when the component needs to display more items in the suggestions. */\n  @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n  /** Fires when the search query has changed.\n   * This is almost like valueInput, but it is debounced\n   * and can be used to trigger a search query without overloading\n   * API endpoints while typing.\n   */\n  @Event() searchQueryChanged: EventEmitter<string>;\n  \n  /** Fires when an item is selected. */\n  @Event() itemSelected: EventEmitter<string>;\n\n  /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n  @Method()\n  async checkValidity(): Promise<ValidityState> {\n    var validity = this.inputField.checkValidity();\n    if (!validity) {\n      this.fieldset.setValidity(false, this.inputField.validationMessage);\n    }\n    this.fieldset.setValidity(true, \"\");\n    return this.inputField.validity;\n  }\n  \n  /** Can be used to set a custom validity message. */\n  @Method()\n  async setCustomValidity(message: string): Promise<void> {\n    if (message == undefined || message == \"\") {\n      this.inputField.setCustomValidity(\"\");\n      this.valid = true;\n      this.fieldset.setValidity(true);\n      return;\n    }\n\n    this.inputField.setCustomValidity(message);\n    this.valid = false;\n    this.fieldset.setValidity(false, message);\n  }\n\n  @State() focused = false;\n  @State() valid = true;\n  @State() customValidityMessage: string;\n  @State() selectedIndex: number;\n  @State() positionInitialized = false;\n  @State() lastScrollTop = 0;\n  @State() displayValue: string = \"\";\n\n  @Watch(\"value\")\n  handleValueChange(newValue: string) {\n    this.displayValue = newValue;\n\n    // Find the index of the selected item\n    this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);\n  }\n  \n  /** attacth the internals for form validation */\n  @AttachInternals() internals: ElementInternals;\n  \n  /** Listener for mouse down event */\n  @Listen(\"click\", { target: \"document\", capture: false })\n  handleClick(e: MouseEvent) {\n    const path = e.composedPath();\n    if (!path.includes(this.element))\n    {\n      this.focused = false;\n    }\n  }\n  \n  componentDidRender(){\n    if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n      this.adjustDropdownPosition();\n    }\n  }\n\n  private inputField!: HTMLInputElement;\n  private suggestionsContainer: HTMLUListElement;\n  private labelId: string;\n  private fieldset: HTMLDnnFieldsetElement;\n  \n  // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n  formResetCallback() {\n    this.inputField.setCustomValidity(\"\");\n    this.valid = true;\n    this.value = \"\";\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n  \n  private handleInput(e: Event) {\n    const inputValue = (e.target as HTMLInputElement).value;\n    this.displayValue = inputValue;\n    this.value = inputValue;\n    var valid = this.inputField.checkValidity();\n    this.valid = valid;\n    this.valueInput.emit(inputValue);\n    this.handleSearchQueryChanged(inputValue);\n  }\n\n  @Debounce(300)\n  private handleSearchQueryChanged(value: string) {\n    this.searchQueryChanged.emit(value);\n  }\n\n  private handleInvalid(): void {\n    this.valid = false;\n    if (this.customValidityMessage == undefined) {\n      this.customValidityMessage = this.inputField.validationMessage;\n    }\n  }\n\n  private handleChange() {\n    this.valueChange.emit(this.value);\n    if (this.name != undefined) {\n      var data = new FormData();\n      data.append(this.name, this.value.toString());\n      this.internals.setFormValue(data);\n    }\n  }\n\n  /** Check if the label should float */\n  private shouldLabelFloat(): boolean {\n    if (this.focused) {\n      return false;\n    }\n\n    if (this.value != undefined && this.value != \"\") {\n      return false;\n    }\n\n    return true;\n  }\n\n  private findAverageSuggestionHeight(): number {\n    const suggestionItems = this.suggestionsContainer.querySelectorAll(\"li\");\n    var totalHeight = 0;\n    for (let i = 0; i < suggestionItems.length; i++) {\n      totalHeight += suggestionItems[i].clientHeight;\n    }\n    return totalHeight / suggestionItems.length;\n  }\n\n  private readonly adjustDropdownPosition = () => {\n    var itemHeight = this.findAverageSuggestionHeight();\n    requestAnimationFrame(() => {\n      this.positionInitialized = true;\n    });\n\n    // If we can fit 3 items below the input and there is still 3em left, we show the dropdown under.\n    // Otherwise, we show it above.\n    var spaceBelow = window.innerHeight - this.inputField.getBoundingClientRect().bottom;\n    const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);\n    const fitsDown = spaceBelow > 3 * itemHeight + 3 * rem;\n    if (fitsDown) {\n      this.suggestionsContainer.style.top = \"1.2rem\";\n    }\n    else {\n      this.suggestionsContainer.style.bottom = \"1.2rem\";\n    }\n\n    // Set the max height to not overflow the screen.\n    if (fitsDown){\n      this.suggestionsContainer.style.maxHeight = `${spaceBelow - 3 * rem}px`;\n    }\n    else {\n      this.suggestionsContainer.style.maxHeight = `${this.inputField.getBoundingClientRect().top - 3 * rem}px`;\n    }\n\n    this.checkIfMoreItemsNeeded();\n  }\n\n  private handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      if (this.selectedIndex == undefined) {\n        this.selectedIndex = 0;\n      } else {\n        this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n      }\n    }\n    if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      if (this.selectedIndex == undefined) {\n        this.selectedIndex = this.suggestions.length - 1;\n      } else {\n        this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n      }\n    }\n    this.value = this.suggestions[this.selectedIndex]?.value || this.value;\n    if (e.key === \"Enter\") {\n      var selectedItem = this.suggestions[this.selectedIndex];\n      this.value = selectedItem.value;\n      this.inputField.value = selectedItem.label;\n      this.itemSelected.emit(selectedItem.value);\n      this.focused = false;\n    }\n    if (e.key === \"Tab\"){\n      this.focused = false;\n    }\n  }\n\n  private selectItem(e: Event, index: number): void {\n    e.preventDefault();\n    e.stopPropagation();\n    this.selectedIndex = index;\n    this.value = this.suggestions[this.selectedIndex].value;\n    this.displayValue = this.suggestions[this.selectedIndex].label;\n    this.inputField.value = this.displayValue;\n    this.checkValidity();\n    this.focused = false;\n    this.itemSelected.emit(this.suggestions[this.selectedIndex].value)\n  }\n\n  private getVirtualScrollHeight(): number {\n    const itemHeight = this.findAverageSuggestionHeight();\n    const upcomingItems = this.totalSuggestions - this.suggestions.length;\n    return itemHeight * upcomingItems;\n  }\n\n  private handleDropdownClick(): void {\n    this.handleSearchQueryChanged(this.value);\n  }\n\n  @Debounce(100)\n  private handleSuggestionsScroll(): void {\n    const container = this.suggestionsContainer;\n    const currentScrollTop = container.scrollTop;\n\n    // Only act if we are scrolling down\n    if (currentScrollTop > this.lastScrollTop) {\n      const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n      if (loadingDiv == undefined) {\n        this.lastScrollTop = currentScrollTop;\n        return;\n      }\n\n      const loadingDivPosition = loadingDiv.offsetTop;\n      const loadingDivHeight = loadingDiv.offsetHeight;\n      const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n      // Calculate the visible bottom of the scroll container\n      const visibleBottom = currentScrollTop + container.clientHeight;\n\n      // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n      if (visibleBottom > loadingDivBottom) {\n        // Adjust scrollTop so it doesn't scroll past the loading div\n        container.scrollTop = loadingDivBottom - container.clientHeight;\n      }\n\n      // Check if more items are needed based on the position of the loading div\n      this.checkIfMoreItemsNeeded();\n    }\n\n    // Update the last scroll position\n    this.lastScrollTop = currentScrollTop;\n  }\n\n  @Debounce()\n  private checkIfMoreItemsNeeded() {\n    const container = this.suggestionsContainer;\n  \n    const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n    if (loadingDiv == undefined) return; // Exit if there's no loading div\n  \n    const scrollPosition = container.scrollTop + container.clientHeight;\n    const loadingDivPosition = loadingDiv.offsetTop;\n  \n    // Check if the loading div is within the threshold of becoming visible\n    if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n      const eventArgs: NeedMoreItemsEventArgs = {\n        searchTerm: this.inputField.value,\n      };\n      this.needMoreItems.emit(eventArgs);\n    }\n  }\n\n  handleBlur(): void {\n    var validity = this.inputField.checkValidity();\n    this.valid = validity;\n    this.fieldset.setValidity(validity, this.inputField.validationMessage);\n    this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n  }\n\n  render() {\n    return (\n      <Host\n        tabIndex={this.focused ? -1 : 0}\n        onFocus={() => this.inputField.focus()}\n        onBlur={() => this.inputField.blur()}\n      >\n        <dnn-fieldset\n          ref={el => this.fieldset = el}\n          invalid={!this.valid}\n          focused={this.focused}\n          label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n          helpText={this.helpText}\n          id={this.labelId}\n          disabled={this.disabled}\n          floatLabel={this.shouldLabelFloat()}\n        >\n          <div class=\"inner-container\">\n            <input\n              ref={(el) => this.inputField = el}\n              name={this.name}\n              type=\"search\"\n              role=\"combobox\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={this.focused.toString()}\n              aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n              disabled={this.disabled}\n              required={this.required}\n              autoComplete={this.autocomplete}\n              value={this.displayValue}\n              onFocus={() => {\n                this.searchQueryChanged.emit(this.value || \"\");\n                this.focused = true;\n              }}\n              onBlur={() => this.handleBlur()}\n              onInput={e => this.handleInput(e)}\n              onInvalid={() => this.handleInvalid()}\n              onChange={() => this.handleChange()}\n              aria-labelledby={this.labelId}\n              onKeyDown={e => this.handleKeyDown(e)}\n            />\n            <ul\n              class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n              role=\"listbox\"\n              ref={el => this.suggestionsContainer = el}\n              onScroll={() => this.handleSuggestionsScroll()}\n            >\n              {this.suggestions.map((suggestion, index) => (\n                <li\n                  id={`option-${index}`}\n                  role=\"option\"\n                  aria-selected={this.selectedIndex == index}\n                  class={this.selectedIndex == index ? \"selected\" : \"\"}\n                  onClick={e => this.selectItem(e, index)}\n                >\n                  {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n                </li>\n              ))}\n              {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n                <div class=\"loading\">\n                </div>\n              }\n              {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n                <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n                </div>\n              }\n            </ul>\n            <svg\n              onClick={() => this.handleDropdownClick()}\n              class=\"chevron-down\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 -960 960 960\">\n              <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n            </svg>\n          </div>\n        </dnn-fieldset>\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/cjs/dnn.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["dnn-color-input.cjs",[[65,"dnn-color-input",{"color":[1025],"contrastColor":[1025,"contrast-color"],"lightColor":[1025,"light-color"],"darkColor":[1025,"dark-color"],"label":[1],"readonly":[4],"localization":[16],"name":[1],"helpText":[1,"help-text"],"useContrastColor":[4,"use-contrast-color"],"useLightColor":[4,"use-light-color"],"useDarkColor":[4,"use-dark-color"],"currentColor":[32],"focused":[32]},null,{"currentColor":["currentColorChanged"]}]]],["dnn-image-cropper.cjs",[[65,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"name":[1],"view":[32],"localResx":[32],"fileName":[32],"focused":[32],"clear":[64]},null,{"resx":["resxChanged"]}]]],["dnn-autocomplete.cjs",[[65,"dnn-autocomplete",{"label":[1],"name":[1],"helpText":[1,"help-text"],"value":[1537],"required":[4],"disabled":[4],"suggestions":[16],"renderSuggestion":[16],"totalSuggestions":[2,"total-suggestions"],"preloadThresholdPixels":[2,"preload-threshold-pixels"],"autocomplete":[1],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"displayValue":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","handleClick"]]]]],["dnn-input.cjs",[[65,"dnn-input",{"type":[1025],"label":[1],"name":[1],"value":[1544],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"min":[8],"max":[8],"minlength":[2],"maxlength":[2],"multiple":[4],"pattern":[1],"readonly":[4],"step":[8],"disableValidityReporting":[4,"disable-validity-reporting"],"allowShowPassword":[4,"allow-show-password"],"inputmode":[1],"focused":[32],"valid":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-select.cjs",[[65,"dnn-select",{"label":[1],"name":[1],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"disableValidityReporting":[4,"disable-validity-reporting"],"autocomplete":[1],"value":[1537],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64]}]]],["dnn-textarea.cjs",[[65,"dnn-textarea",{"resizable":[1],"value":[1025],"label":[1],"name":[1],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"minlength":[2],"maxlength":[2],"readonly":[4],"rows":[2],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-treeview-item.cjs",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32],"focused":[32]},null,{"expanded":["watchExpanded"]}]]],["dnn-chevron.cjs",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540],"focused":[32]},null,{"expanded":["handleExpandedChanged"]}]]],["dnn-monaco-editor.cjs",[[66,"dnn-monaco-editor",{"language":[1],"value":[1025],"name":[1],"focused":[32]},null,{"language":["languageChanged"],"value":["valueChanged"]}]]],["dnn-progress-bar.cjs",[[1,"dnn-progress-bar",{"value":[2],"max":[2],"useGradient":[4,"use-gradient"]}]]],["dnn-richtext.cjs",[[65,"dnn-richtext",{"options":[16],"value":[1],"name":[1],"focused":[32]},null,{"value":["watchValueChanged"]}]]],["dnn-sort-icon.cjs",[[1,"dnn-sort-icon",{"sortDirection":[1025,"sort-direction"],"focused":[32]}]]],["dnn-toggle.cjs",[[65,"dnn-toggle",{"checked":[1028],"disabled":[4],"name":[1],"value":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["checkedChanged"]}]]],["dnn-vertical-overflow-menu.cjs",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview.cjs",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-checkbox.cjs",[[65,"dnn-checkbox",{"checked":[1025],"useIntermediate":[4,"use-intermediate"],"value":[1],"name":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["handleCheckedChange"]}]]],["dnn-color-picker.cjs",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32],"focused":[32]},null,{"currentColor":["handeCurrentColorChanged"]}]]],["dnn-dropzone.cjs",[[65,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"maxFileSize":[2,"max-file-size"],"name":[1],"canTakeSnapshots":[32],"takingPicture":[32],"fileTooLarge":[32],"invalidExtension":[32],"localResx":[32],"focused":[32]},null,{"resx":["resxChanged"]}]]],["dnn-searchbox.cjs",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"debounceTime":[2,"debounce-time"],"query":[1025],"focused":[32]},null,{"query":["handleQueryChanged"]}]]],["dnn-tab_2.cjs",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}],[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-collapsible.cjs",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{"expanded":["handledExpandedChanged"]}]]],["dnn-modal.cjs",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"resizable":[4],"showCloseButton":[4,"show-close-button"],"visible":[1540],"show":[64],"hide":[64]}]]],["dnn-button.cjs",[[65,"dnn-button",{"type":[1],"appearance":[1],"formButtonType":[1,"form-button-type"],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"focused":[32],"modalVisible":[32]}]]],["dnn-permissions-grid.cjs",[[1,"dnn-permissions-grid",{"permissions":[1040],"roleGroups":[16],"roles":[16],"resx":[16],"foundUsers":[16],"selectedRoleGroupId":[32],"userQuery":[32],"pickedUser":[32],"localResx":[32],"focused":[32]},null,{"foundUsers":["handleFoundUsersChanged"],"resx":["resxChanged"]}]]],["dnn-fieldset.cjs",[[1,"dnn-fieldset",{"focused":[1540],"disabled":[1540],"invalid":[1540],"label":[1],"floatLabel":[1540,"float-label"],"helpText":[1,"help-text"],"resizable":[1],"customValidityMessage":[32],"setFocused":[64],"setBlurred":[64],"disable":[64],"enable":[64],"pinLabel":[64],"unpinLabel":[64],"setValidity":[64]}]]]], options);
+  return index.bootstrapLazy([["dnn-color-input.cjs",[[65,"dnn-color-input",{"color":[1025],"contrastColor":[1025,"contrast-color"],"lightColor":[1025,"light-color"],"darkColor":[1025,"dark-color"],"label":[1],"readonly":[4],"localization":[16],"name":[1],"helpText":[1,"help-text"],"useContrastColor":[4,"use-contrast-color"],"useLightColor":[4,"use-light-color"],"useDarkColor":[4,"use-dark-color"],"currentColor":[32],"focused":[32]},null,{"currentColor":["currentColorChanged"]}]]],["dnn-image-cropper.cjs",[[65,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"name":[1],"view":[32],"localResx":[32],"fileName":[32],"focused":[32],"clear":[64]},null,{"resx":["resxChanged"]}]]],["dnn-autocomplete.cjs",[[65,"dnn-autocomplete",{"label":[1],"name":[1],"helpText":[1,"help-text"],"value":[1537],"required":[4],"disabled":[4],"suggestions":[16],"renderSuggestion":[16],"totalSuggestions":[2,"total-suggestions"],"preloadThresholdPixels":[2,"preload-threshold-pixels"],"autocomplete":[1],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"displayValue":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","handleClick"]],{"value":["handleValueChange"]}]]],["dnn-input.cjs",[[65,"dnn-input",{"type":[1025],"label":[1],"name":[1],"value":[1544],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"min":[8],"max":[8],"minlength":[2],"maxlength":[2],"multiple":[4],"pattern":[1],"readonly":[4],"step":[8],"disableValidityReporting":[4,"disable-validity-reporting"],"allowShowPassword":[4,"allow-show-password"],"inputmode":[1],"focused":[32],"valid":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-select.cjs",[[65,"dnn-select",{"label":[1],"name":[1],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"disableValidityReporting":[4,"disable-validity-reporting"],"autocomplete":[1],"value":[1537],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64]}]]],["dnn-textarea.cjs",[[65,"dnn-textarea",{"resizable":[1],"value":[1025],"label":[1],"name":[1],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"minlength":[2],"maxlength":[2],"readonly":[4],"rows":[2],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-treeview-item.cjs",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32],"focused":[32]},null,{"expanded":["watchExpanded"]}]]],["dnn-chevron.cjs",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540],"focused":[32]},null,{"expanded":["handleExpandedChanged"]}]]],["dnn-monaco-editor.cjs",[[66,"dnn-monaco-editor",{"language":[1],"value":[1025],"name":[1],"focused":[32]},null,{"language":["languageChanged"],"value":["valueChanged"]}]]],["dnn-progress-bar.cjs",[[1,"dnn-progress-bar",{"value":[2],"max":[2],"useGradient":[4,"use-gradient"]}]]],["dnn-richtext.cjs",[[65,"dnn-richtext",{"options":[16],"value":[1],"name":[1],"focused":[32]},null,{"value":["watchValueChanged"]}]]],["dnn-sort-icon.cjs",[[1,"dnn-sort-icon",{"sortDirection":[1025,"sort-direction"],"focused":[32]}]]],["dnn-toggle.cjs",[[65,"dnn-toggle",{"checked":[1028],"disabled":[4],"name":[1],"value":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["checkedChanged"]}]]],["dnn-vertical-overflow-menu.cjs",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview.cjs",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-checkbox.cjs",[[65,"dnn-checkbox",{"checked":[1025],"useIntermediate":[4,"use-intermediate"],"value":[1],"name":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["handleCheckedChange"]}]]],["dnn-color-picker.cjs",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32],"focused":[32]},null,{"currentColor":["handeCurrentColorChanged"]}]]],["dnn-dropzone.cjs",[[65,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"maxFileSize":[2,"max-file-size"],"name":[1],"canTakeSnapshots":[32],"takingPicture":[32],"fileTooLarge":[32],"invalidExtension":[32],"localResx":[32],"focused":[32]},null,{"resx":["resxChanged"]}]]],["dnn-searchbox.cjs",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"debounceTime":[2,"debounce-time"],"query":[1025],"focused":[32]},null,{"query":["handleQueryChanged"]}]]],["dnn-tab_2.cjs",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}],[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-collapsible.cjs",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{"expanded":["handledExpandedChanged"]}]]],["dnn-modal.cjs",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"resizable":[4],"showCloseButton":[4,"show-close-button"],"visible":[1540],"show":[64],"hide":[64]}]]],["dnn-button.cjs",[[65,"dnn-button",{"type":[1],"appearance":[1],"formButtonType":[1,"form-button-type"],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"focused":[32],"modalVisible":[32]}]]],["dnn-permissions-grid.cjs",[[1,"dnn-permissions-grid",{"permissions":[1040],"roleGroups":[16],"roles":[16],"resx":[16],"foundUsers":[16],"selectedRoleGroupId":[32],"userQuery":[32],"pickedUser":[32],"localResx":[32],"focused":[32]},null,{"foundUsers":["handleFoundUsersChanged"],"resx":["resxChanged"]}]]],["dnn-fieldset.cjs",[[1,"dnn-fieldset",{"focused":[1540],"disabled":[1540],"invalid":[1540],"label":[1],"floatLabel":[1540,"float-label"],"helpText":[1,"help-text"],"resizable":[1],"customValidityMessage":[32],"setFocused":[64],"setBlurred":[64],"disable":[64],"enable":[64],"pinLabel":[64],"unpinLabel":[64],"setValidity":[64]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["dnn-color-input.cjs",[[65,"dnn-color-input",{"color":[1025],"contrastColor":[1025,"contrast-color"],"lightColor":[1025,"light-color"],"darkColor":[1025,"dark-color"],"label":[1],"readonly":[4],"localization":[16],"name":[1],"helpText":[1,"help-text"],"useContrastColor":[4,"use-contrast-color"],"useLightColor":[4,"use-light-color"],"useDarkColor":[4,"use-dark-color"],"currentColor":[32],"focused":[32]},null,{"currentColor":["currentColorChanged"]}]]],["dnn-image-cropper.cjs",[[65,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"name":[1],"view":[32],"localResx":[32],"fileName":[32],"focused":[32],"clear":[64]},null,{"resx":["resxChanged"]}]]],["dnn-autocomplete.cjs",[[65,"dnn-autocomplete",{"label":[1],"name":[1],"helpText":[1,"help-text"],"value":[1537],"required":[4],"disabled":[4],"suggestions":[16],"renderSuggestion":[16],"totalSuggestions":[2,"total-suggestions"],"preloadThresholdPixels":[2,"preload-threshold-pixels"],"autocomplete":[1],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"displayValue":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","handleClick"]]]]],["dnn-input.cjs",[[65,"dnn-input",{"type":[1025],"label":[1],"name":[1],"value":[1544],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"min":[8],"max":[8],"minlength":[2],"maxlength":[2],"multiple":[4],"pattern":[1],"readonly":[4],"step":[8],"disableValidityReporting":[4,"disable-validity-reporting"],"allowShowPassword":[4,"allow-show-password"],"inputmode":[1],"focused":[32],"valid":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-select.cjs",[[65,"dnn-select",{"label":[1],"name":[1],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"disableValidityReporting":[4,"disable-validity-reporting"],"autocomplete":[1],"value":[1537],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64]}]]],["dnn-textarea.cjs",[[65,"dnn-textarea",{"resizable":[1],"value":[1025],"label":[1],"name":[1],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"minlength":[2],"maxlength":[2],"readonly":[4],"rows":[2],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-treeview-item.cjs",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32],"focused":[32]},null,{"expanded":["watchExpanded"]}]]],["dnn-chevron.cjs",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540],"focused":[32]},null,{"expanded":["handleExpandedChanged"]}]]],["dnn-monaco-editor.cjs",[[66,"dnn-monaco-editor",{"language":[1],"value":[1025],"name":[1],"focused":[32]},null,{"language":["languageChanged"],"value":["valueChanged"]}]]],["dnn-progress-bar.cjs",[[1,"dnn-progress-bar",{"value":[2],"max":[2],"useGradient":[4,"use-gradient"]}]]],["dnn-richtext.cjs",[[65,"dnn-richtext",{"options":[16],"value":[1],"name":[1],"focused":[32]},null,{"value":["watchValueChanged"]}]]],["dnn-sort-icon.cjs",[[1,"dnn-sort-icon",{"sortDirection":[1025,"sort-direction"],"focused":[32]}]]],["dnn-toggle.cjs",[[65,"dnn-toggle",{"checked":[1028],"disabled":[4],"name":[1],"value":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["checkedChanged"]}]]],["dnn-vertical-overflow-menu.cjs",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview.cjs",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-checkbox.cjs",[[65,"dnn-checkbox",{"checked":[1025],"useIntermediate":[4,"use-intermediate"],"value":[1],"name":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["handleCheckedChange"]}]]],["dnn-color-picker.cjs",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32],"focused":[32]},null,{"currentColor":["handeCurrentColorChanged"]}]]],["dnn-dropzone.cjs",[[65,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"maxFileSize":[2,"max-file-size"],"name":[1],"canTakeSnapshots":[32],"takingPicture":[32],"fileTooLarge":[32],"invalidExtension":[32],"localResx":[32],"focused":[32]},null,{"resx":["resxChanged"]}]]],["dnn-searchbox.cjs",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"debounceTime":[2,"debounce-time"],"query":[1025],"focused":[32]},null,{"query":["handleQueryChanged"]}]]],["dnn-tab_2.cjs",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}],[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-collapsible.cjs",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{"expanded":["handledExpandedChanged"]}]]],["dnn-modal.cjs",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"resizable":[4],"showCloseButton":[4,"show-close-button"],"visible":[1540],"show":[64],"hide":[64]}]]],["dnn-button.cjs",[[65,"dnn-button",{"type":[1],"appearance":[1],"formButtonType":[1,"form-button-type"],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"focused":[32],"modalVisible":[32]}]]],["dnn-permissions-grid.cjs",[[1,"dnn-permissions-grid",{"permissions":[1040],"roleGroups":[16],"roles":[16],"resx":[16],"foundUsers":[16],"selectedRoleGroupId":[32],"userQuery":[32],"pickedUser":[32],"localResx":[32],"focused":[32]},null,{"foundUsers":["handleFoundUsersChanged"],"resx":["resxChanged"]}]]],["dnn-fieldset.cjs",[[1,"dnn-fieldset",{"focused":[1540],"disabled":[1540],"invalid":[1540],"label":[1],"floatLabel":[1540,"float-label"],"helpText":[1,"help-text"],"resizable":[1],"customValidityMessage":[32],"setFocused":[64],"setBlurred":[64],"disable":[64],"enable":[64],"pinLabel":[64],"unpinLabel":[64],"setValidity":[64]}]]]], options);
+  return index.bootstrapLazy([["dnn-color-input.cjs",[[65,"dnn-color-input",{"color":[1025],"contrastColor":[1025,"contrast-color"],"lightColor":[1025,"light-color"],"darkColor":[1025,"dark-color"],"label":[1],"readonly":[4],"localization":[16],"name":[1],"helpText":[1,"help-text"],"useContrastColor":[4,"use-contrast-color"],"useLightColor":[4,"use-light-color"],"useDarkColor":[4,"use-dark-color"],"currentColor":[32],"focused":[32]},null,{"currentColor":["currentColorChanged"]}]]],["dnn-image-cropper.cjs",[[65,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"name":[1],"view":[32],"localResx":[32],"fileName":[32],"focused":[32],"clear":[64]},null,{"resx":["resxChanged"]}]]],["dnn-autocomplete.cjs",[[65,"dnn-autocomplete",{"label":[1],"name":[1],"helpText":[1,"help-text"],"value":[1537],"required":[4],"disabled":[4],"suggestions":[16],"renderSuggestion":[16],"totalSuggestions":[2,"total-suggestions"],"preloadThresholdPixels":[2,"preload-threshold-pixels"],"autocomplete":[1],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"displayValue":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","handleClick"]],{"value":["handleValueChange"]}]]],["dnn-input.cjs",[[65,"dnn-input",{"type":[1025],"label":[1],"name":[1],"value":[1544],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"min":[8],"max":[8],"minlength":[2],"maxlength":[2],"multiple":[4],"pattern":[1],"readonly":[4],"step":[8],"disableValidityReporting":[4,"disable-validity-reporting"],"allowShowPassword":[4,"allow-show-password"],"inputmode":[1],"focused":[32],"valid":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-select.cjs",[[65,"dnn-select",{"label":[1],"name":[1],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"disableValidityReporting":[4,"disable-validity-reporting"],"autocomplete":[1],"value":[1537],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64]}]]],["dnn-textarea.cjs",[[65,"dnn-textarea",{"resizable":[1],"value":[1025],"label":[1],"name":[1],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"minlength":[2],"maxlength":[2],"readonly":[4],"rows":[2],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-treeview-item.cjs",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32],"focused":[32]},null,{"expanded":["watchExpanded"]}]]],["dnn-chevron.cjs",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540],"focused":[32]},null,{"expanded":["handleExpandedChanged"]}]]],["dnn-monaco-editor.cjs",[[66,"dnn-monaco-editor",{"language":[1],"value":[1025],"name":[1],"focused":[32]},null,{"language":["languageChanged"],"value":["valueChanged"]}]]],["dnn-progress-bar.cjs",[[1,"dnn-progress-bar",{"value":[2],"max":[2],"useGradient":[4,"use-gradient"]}]]],["dnn-richtext.cjs",[[65,"dnn-richtext",{"options":[16],"value":[1],"name":[1],"focused":[32]},null,{"value":["watchValueChanged"]}]]],["dnn-sort-icon.cjs",[[1,"dnn-sort-icon",{"sortDirection":[1025,"sort-direction"],"focused":[32]}]]],["dnn-toggle.cjs",[[65,"dnn-toggle",{"checked":[1028],"disabled":[4],"name":[1],"value":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["checkedChanged"]}]]],["dnn-vertical-overflow-menu.cjs",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview.cjs",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-checkbox.cjs",[[65,"dnn-checkbox",{"checked":[1025],"useIntermediate":[4,"use-intermediate"],"value":[1],"name":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["handleCheckedChange"]}]]],["dnn-color-picker.cjs",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32],"focused":[32]},null,{"currentColor":["handeCurrentColorChanged"]}]]],["dnn-dropzone.cjs",[[65,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"maxFileSize":[2,"max-file-size"],"name":[1],"canTakeSnapshots":[32],"takingPicture":[32],"fileTooLarge":[32],"invalidExtension":[32],"localResx":[32],"focused":[32]},null,{"resx":["resxChanged"]}]]],["dnn-searchbox.cjs",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"debounceTime":[2,"debounce-time"],"query":[1025],"focused":[32]},null,{"query":["handleQueryChanged"]}]]],["dnn-tab_2.cjs",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}],[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-collapsible.cjs",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{"expanded":["handledExpandedChanged"]}]]],["dnn-modal.cjs",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"resizable":[4],"showCloseButton":[4,"show-close-button"],"visible":[1540],"show":[64],"hide":[64]}]]],["dnn-button.cjs",[[65,"dnn-button",{"type":[1],"appearance":[1],"formButtonType":[1,"form-button-type"],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"focused":[32],"modalVisible":[32]}]]],["dnn-permissions-grid.cjs",[[1,"dnn-permissions-grid",{"permissions":[1040],"roleGroups":[16],"roles":[16],"resx":[16],"foundUsers":[16],"selectedRoleGroupId":[32],"userQuery":[32],"pickedUser":[32],"localResx":[32],"focused":[32]},null,{"foundUsers":["handleFoundUsersChanged"],"resx":["resxChanged"]}]]],["dnn-fieldset.cjs",[[1,"dnn-fieldset",{"focused":[1540],"disabled":[1540],"invalid":[1540],"label":[1],"floatLabel":[1540,"float-label"],"helpText":[1,"help-text"],"resizable":[1],"customValidityMessage":[32],"setFocused":[64],"setBlurred":[64],"disable":[64],"enable":[64],"pinLabel":[64],"unpinLabel":[64],"setValidity":[64]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/dnn-autocomplete/dnn-autocomplete.js

@@ -77,6 +77,11 @@ export class DnnAutocomplete {
         this.valid = false;
         this.fieldset.setValidity(false, message);
     }
+    handleValueChange(newValue) {
+        this.displayValue = newValue;
+        // Find the index of the selected item
+        this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);
+    }
     /** Listener for mouse down event */
     handleClick(e) {
         const path = e.composedPath();
@@ -241,12 +246,12 @@ export class DnnAutocomplete {
     }
     render() {
         var _a;
-        return (h(Host, { key: '10a0264ebae498078dbfc3fbd6ffa1a2a1b50c0e', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("dnn-fieldset", { key: '8f2426b397ba4001ed65255f58878176441950dc', 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: 'fad1d2e8567163f4dcea423fe71eacc157fcc350', class: "inner-container" }, h("input", { key: 'bffb6ee3cbee67db6e280f29092ead301e75f8e8', 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: () => {
+        return (h(Host, { key: 'e4721cc0e2110853787b552f1353c94d8483287b', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("dnn-fieldset", { key: '0881da2521817503d78f15cd1fd9b777654b108d', ref: el => this.fieldset = el, invalid: !this.valid, focused: this.focused, label: `${(_a = this.label) !== null && _a !== void 0 ? _a : ""}${this.required ? " *" : ""}`, helpText: this.helpText, id: this.labelId, disabled: this.disabled, floatLabel: this.shouldLabelFloat() }, h("div", { key: 'ac5590e129b624f1ba1c012448897515017db086', class: "inner-container" }, h("input", { key: '779f3a6e00dff6319b2d94c6bb903e9b495d1746', ref: (el) => this.inputField = el, name: this.name, type: "search", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.focused.toString(), "aria-activedescendant": this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined, disabled: this.disabled, required: this.required, autoComplete: this.autocomplete, value: this.displayValue, onFocus: () => {
                 this.searchQueryChanged.emit(this.value || "");
                 this.focused = true;
-            }, onBlur: () => this.handleBlur(), onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId, onKeyDown: e => this.handleKeyDown(e) }), h("ul", { key: '1cffdc6b12d2337cc89448fd232ca453700e655d', 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 &&
-            h("div", { key: '2a7bd6440f9d71a11aa44a4ed2ce444c6efced35', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
-            h("div", { key: '2c7b5655893711bb51fffb97f911308ac6d144ed', style: { height: `${this.getVirtualScrollHeight()}px` } })), h("svg", { key: '55452717a72e3d597bb40ed934db19dbb8ddfd6f', onClick: () => this.handleDropdownClick(), class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: 'e26905040e49403c2bd55c893858eefa4d4d470a', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
+            }, onBlur: () => this.handleBlur(), onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId, onKeyDown: e => this.handleKeyDown(e) }), h("ul", { key: '32448159bf989944d974bdba2ca42cf30f089272', class: this.focused && this.suggestions.length > 0 ? "show" : "", role: "listbox", ref: el => this.suggestionsContainer = el, onScroll: () => this.handleSuggestionsScroll() }, this.suggestions.map((suggestion, index) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": this.selectedIndex == index, class: this.selectedIndex == index ? "selected" : "", onClick: e => this.selectItem(e, index) }, this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label))), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&
+            h("div", { key: 'd4bee8ab76bb9058740f1fb6a0faf06e9446f859', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
+            h("div", { key: '54539c1e08aa3cd521306a942df62835099f3560', style: { height: `${this.getVirtualScrollHeight()}px` } })), h("svg", { key: '43a4b159fcd84253003375dbf5cf95818539b410', onClick: () => this.handleDropdownClick(), class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: 'c752ed998df5b38322b13f8636f172c645f2ca8a', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
     }
     static get is() { return "dnn-autocomplete"; }
     static get encapsulation() { return "shadow"; }
@@ -609,6 +614,12 @@ export class DnnAutocomplete {
         };
     }
     static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "click",

package/dist/collection/components/dnn-autocomplete/dnn-autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"dnn-autocomplete.js","sourceRoot":"","sources":["../../../src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n  tag: 'dnn-autocomplete',\n  styleUrl: 'dnn-autocomplete.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n  /** The label for this autocomplete. */\n  @Prop() label: string;\n\n  /** The name for this autocomplete when used in forms. */\n  @Prop() name: string;\n\n  /** Defines the help label displayed under the field. */\n  @Prop() helpText: string;\n\n  /** Defines the value for this autocomplete */\n  @Prop({mutable: true, reflect: true}) value: string;\n\n  /** Defines whether the field requires having a value. */\n  @Prop() required: boolean;\n\n  /** Defines whether the field is disabled. */\n  @Prop() disabled: boolean;\n\n  /** Sets the list of suggestions. */\n  @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n  /** Callback to render suggestions, if not provided, only the label will be rendered. */\n  @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n  \n  /** The total amount of suggestions for the given search query.\n   * This can be used to show virtual scroll and pagination progressive feeding.\n   * The needMoreItems event should be used to request more items.\n   */\n  @Prop() totalSuggestions: number;\n \n  /** How many suggestions to preload in pixels of their height.\n  * This is used to calculate the virtual scroll height and request\n  * more items before they get into view.\n  */\n  @Prop() preloadThresholdPixels: number = 1000;\n\n  /** Defines the type of automatic completion the browser could use.\n  * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n  */\n  @Prop() autocomplete: string = \"off\";\n\n  @Element() element: HTMLDnnAutocompleteElement;\n\n  /** Fires when the value has changed and the user exits the input. */\n  @Event() valueChange: EventEmitter<number | string | string[]>;\n\n  /** Fires when the using is inputing data (on keystrokes). */\n  @Event() valueInput: EventEmitter<number | string | string[]>;\n\n  /** Fires when the component needs to display more items in the suggestions. */\n  @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n  /** Fires when the search query has changed.\n   * This is almost like valueInput, but it is debounced\n   * and can be used to trigger a search query without overloading\n   * API endpoints while typing.\n   */\n  @Event() searchQueryChanged: EventEmitter<string>;\n  \n  /** Fires when an item is selected. */\n  @Event() itemSelected: EventEmitter<string>;\n\n  /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n  @Method()\n  async checkValidity(): Promise<ValidityState> {\n    var validity = this.inputField.checkValidity();\n    if (!validity) {\n      this.fieldset.setValidity(false, this.inputField.validationMessage);\n    }\n    this.fieldset.setValidity(true, \"\");\n    return this.inputField.validity;\n  }\n  \n  /** Can be used to set a custom validity message. */\n  @Method()\n  async setCustomValidity(message: string): Promise<void> {\n    if (message == undefined || message == \"\") {\n      this.inputField.setCustomValidity(\"\");\n      this.valid = true;\n      this.fieldset.setValidity(true);\n      return;\n    }\n\n    this.inputField.setCustomValidity(message);\n    this.valid = false;\n    this.fieldset.setValidity(false, message);\n  }\n\n  @State() focused = false;\n  @State() valid = true;\n  @State() customValidityMessage: string;\n  @State() selectedIndex: number;\n  @State() positionInitialized = false;\n  @State() lastScrollTop = 0;\n  @State() displayValue: string = \"\";\n  \n  /** attacth the internals for form validation */\n  @AttachInternals() internals: ElementInternals;\n  \n  /** Listener for mouse down event */\n  @Listen(\"click\", { target: \"document\", capture: false })\n  handleClick(e: MouseEvent) {\n    const path = e.composedPath();\n    if (!path.includes(this.element))\n    {\n      this.focused = false;\n    }\n  }\n  \n  componentDidRender(){\n    if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n      this.adjustDropdownPosition();\n    }\n  }\n\n  private inputField!: HTMLInputElement;\n  private suggestionsContainer: HTMLUListElement;\n  private labelId: string;\n  private fieldset: HTMLDnnFieldsetElement;\n  \n  // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n  formResetCallback() {\n    this.inputField.setCustomValidity(\"\");\n    this.valid = true;\n    this.value = \"\";\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n  \n  private handleInput(e: Event) {\n    const inputValue = (e.target as HTMLInputElement).value;\n    this.displayValue = inputValue;\n    this.value = inputValue;\n    var valid = this.inputField.checkValidity();\n    this.valid = valid;\n    this.valueInput.emit(inputValue);\n    this.handleSearchQueryChanged(inputValue);\n  }\n\n  @Debounce(300)\n  private handleSearchQueryChanged(value: string) {\n    this.searchQueryChanged.emit(value);\n  }\n\n  private handleInvalid(): void {\n    this.valid = false;\n    if (this.customValidityMessage == undefined) {\n      this.customValidityMessage = this.inputField.validationMessage;\n    }\n  }\n\n  private handleChange() {\n    this.valueChange.emit(this.value);\n    if (this.name != undefined) {\n      var data = new FormData();\n      data.append(this.name, this.value.toString());\n      this.internals.setFormValue(data);\n    }\n  }\n\n  /** Check if the label should float */\n  private shouldLabelFloat(): boolean {\n    if (this.focused) {\n      return false;\n    }\n\n    if (this.value != undefined && this.value != \"\") {\n      return false;\n    }\n\n    return true;\n  }\n\n  private findAverageSuggestionHeight(): number {\n    const suggestionItems = this.suggestionsContainer.querySelectorAll(\"li\");\n    var totalHeight = 0;\n    for (let i = 0; i < suggestionItems.length; i++) {\n      totalHeight += suggestionItems[i].clientHeight;\n    }\n    return totalHeight / suggestionItems.length;\n  }\n\n  private readonly adjustDropdownPosition = () => {\n    var itemHeight = this.findAverageSuggestionHeight();\n    requestAnimationFrame(() => {\n      this.positionInitialized = true;\n    });\n\n    // If we can fit 3 items below the input and there is still 3em left, we show the dropdown under.\n    // Otherwise, we show it above.\n    var spaceBelow = window.innerHeight - this.inputField.getBoundingClientRect().bottom;\n    const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);\n    const fitsDown = spaceBelow > 3 * itemHeight + 3 * rem;\n    if (fitsDown) {\n      this.suggestionsContainer.style.top = \"1.2rem\";\n    }\n    else {\n      this.suggestionsContainer.style.bottom = \"1.2rem\";\n    }\n\n    // Set the max height to not overflow the screen.\n    if (fitsDown){\n      this.suggestionsContainer.style.maxHeight = `${spaceBelow - 3 * rem}px`;\n    }\n    else {\n      this.suggestionsContainer.style.maxHeight = `${this.inputField.getBoundingClientRect().top - 3 * rem}px`;\n    }\n\n    this.checkIfMoreItemsNeeded();\n  }\n\n  private handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      if (this.selectedIndex == undefined) {\n        this.selectedIndex = 0;\n      } else {\n        this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n      }\n    }\n    if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      if (this.selectedIndex == undefined) {\n        this.selectedIndex = this.suggestions.length - 1;\n      } else {\n        this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n      }\n    }\n    this.value = this.suggestions[this.selectedIndex]?.value || this.value;\n    if (e.key === \"Enter\") {\n      var selectedItem = this.suggestions[this.selectedIndex];\n      this.value = selectedItem.value;\n      this.inputField.value = selectedItem.label;\n      this.itemSelected.emit(selectedItem.value);\n      this.focused = false;\n    }\n    if (e.key === \"Tab\"){\n      this.focused = false;\n    }\n  }\n\n  private selectItem(e: Event, index: number): void {\n    e.preventDefault();\n    e.stopPropagation();\n    this.selectedIndex = index;\n    this.value = this.suggestions[this.selectedIndex].value;\n    this.displayValue = this.suggestions[this.selectedIndex].label;\n    this.inputField.value = this.displayValue;\n    this.checkValidity();\n    this.focused = false;\n    this.itemSelected.emit(this.suggestions[this.selectedIndex].value)\n  }\n\n  private getVirtualScrollHeight(): number {\n    const itemHeight = this.findAverageSuggestionHeight();\n    const upcomingItems = this.totalSuggestions - this.suggestions.length;\n    return itemHeight * upcomingItems;\n  }\n\n  private handleDropdownClick(): void {\n    this.handleSearchQueryChanged(this.value);\n  }\n\n  @Debounce(100)\n  private handleSuggestionsScroll(): void {\n    const container = this.suggestionsContainer;\n    const currentScrollTop = container.scrollTop;\n\n    // Only act if we are scrolling down\n    if (currentScrollTop > this.lastScrollTop) {\n      const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n      if (loadingDiv == undefined) {\n        this.lastScrollTop = currentScrollTop;\n        return;\n      }\n\n      const loadingDivPosition = loadingDiv.offsetTop;\n      const loadingDivHeight = loadingDiv.offsetHeight;\n      const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n      // Calculate the visible bottom of the scroll container\n      const visibleBottom = currentScrollTop + container.clientHeight;\n\n      // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n      if (visibleBottom > loadingDivBottom) {\n        // Adjust scrollTop so it doesn't scroll past the loading div\n        container.scrollTop = loadingDivBottom - container.clientHeight;\n      }\n\n      // Check if more items are needed based on the position of the loading div\n      this.checkIfMoreItemsNeeded();\n    }\n\n    // Update the last scroll position\n    this.lastScrollTop = currentScrollTop;\n  }\n\n  @Debounce()\n  private checkIfMoreItemsNeeded() {\n    const container = this.suggestionsContainer;\n  \n    const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n    if (loadingDiv == undefined) return; // Exit if there's no loading div\n  \n    const scrollPosition = container.scrollTop + container.clientHeight;\n    const loadingDivPosition = loadingDiv.offsetTop;\n  \n    // Check if the loading div is within the threshold of becoming visible\n    if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n      const eventArgs: NeedMoreItemsEventArgs = {\n        searchTerm: this.inputField.value,\n      };\n      this.needMoreItems.emit(eventArgs);\n    }\n  }\n\n  handleBlur(): void {\n    var validity = this.inputField.checkValidity();\n    this.valid = validity;\n    this.fieldset.setValidity(validity, this.inputField.validationMessage);\n    this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n  }\n\n  render() {\n    return (\n      <Host\n        tabIndex={this.focused ? -1 : 0}\n        onFocus={() => this.inputField.focus()}\n        onBlur={() => this.inputField.blur()}\n      >\n        <dnn-fieldset\n          ref={el => this.fieldset = el}\n          invalid={!this.valid}\n          focused={this.focused}\n          label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n          helpText={this.helpText}\n          id={this.labelId}\n          disabled={this.disabled}\n          floatLabel={this.shouldLabelFloat()}\n        >\n          <div class=\"inner-container\">\n            <input\n              ref={(el) => this.inputField = el}\n              name={this.name}\n              type=\"search\"\n              role=\"combobox\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={this.focused.toString()}\n              aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n              disabled={this.disabled}\n              required={this.required}\n              autoComplete={this.autocomplete}\n              value={this.displayValue}\n              onFocus={() => {\n                this.searchQueryChanged.emit(this.value || \"\");\n                this.focused = true;\n              }}\n              onBlur={() => this.handleBlur()}\n              onInput={e => this.handleInput(e)}\n              onInvalid={() => this.handleInvalid()}\n              onChange={() => this.handleChange()}\n              aria-labelledby={this.labelId}\n              onKeyDown={e => this.handleKeyDown(e)}\n            />\n            <ul\n              class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n              role=\"listbox\"\n              ref={el => this.suggestionsContainer = el}\n              onScroll={() => this.handleSuggestionsScroll()}\n            >\n              {this.suggestions.map((suggestion, index) => (\n                <li\n                  id={`option-${index}`}\n                  role=\"option\"\n                  aria-selected={this.selectedIndex == index}\n                  class={this.selectedIndex == index ? \"selected\" : \"\"}\n                  onClick={e => this.selectItem(e, index)}\n                >\n                  {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n                </li>\n              ))}\n              {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n                <div class=\"loading\">\n                </div>\n              }\n              {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n                <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n                </div>\n              }\n            </ul>\n            <svg\n              onClick={() => this.handleDropdownClick()}\n              class=\"chevron-down\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 -960 960 960\">\n              <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n            </svg>\n          </div>\n        </dnn-fieldset>\n      </Host>\n    );\n  }\n}"]}
+{"version":3,"file":"dnn-autocomplete.js","sourceRoot":"","sources":["../../../src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen, Watch } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n  tag: 'dnn-autocomplete',\n  styleUrl: 'dnn-autocomplete.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n  /** The label for this autocomplete. */\n  @Prop() label: string;\n\n  /** The name for this autocomplete when used in forms. */\n  @Prop() name: string;\n\n  /** Defines the help label displayed under the field. */\n  @Prop() helpText: string;\n\n  /** Defines the value for this autocomplete */\n  @Prop({mutable: true, reflect: true}) value: string;\n\n  /** Defines whether the field requires having a value. */\n  @Prop() required: boolean;\n\n  /** Defines whether the field is disabled. */\n  @Prop() disabled: boolean;\n\n  /** Sets the list of suggestions. */\n  @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n  /** Callback to render suggestions, if not provided, only the label will be rendered. */\n  @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n  \n  /** The total amount of suggestions for the given search query.\n   * This can be used to show virtual scroll and pagination progressive feeding.\n   * The needMoreItems event should be used to request more items.\n   */\n  @Prop() totalSuggestions: number;\n \n  /** How many suggestions to preload in pixels of their height.\n  * This is used to calculate the virtual scroll height and request\n  * more items before they get into view.\n  */\n  @Prop() preloadThresholdPixels: number = 1000;\n\n  /** Defines the type of automatic completion the browser could use.\n  * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n  */\n  @Prop() autocomplete: string = \"off\";\n\n  @Element() element: HTMLDnnAutocompleteElement;\n\n  /** Fires when the value has changed and the user exits the input. */\n  @Event() valueChange: EventEmitter<number | string | string[]>;\n\n  /** Fires when the using is inputing data (on keystrokes). */\n  @Event() valueInput: EventEmitter<number | string | string[]>;\n\n  /** Fires when the component needs to display more items in the suggestions. */\n  @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n  /** Fires when the search query has changed.\n   * This is almost like valueInput, but it is debounced\n   * and can be used to trigger a search query without overloading\n   * API endpoints while typing.\n   */\n  @Event() searchQueryChanged: EventEmitter<string>;\n  \n  /** Fires when an item is selected. */\n  @Event() itemSelected: EventEmitter<string>;\n\n  /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n  @Method()\n  async checkValidity(): Promise<ValidityState> {\n    var validity = this.inputField.checkValidity();\n    if (!validity) {\n      this.fieldset.setValidity(false, this.inputField.validationMessage);\n    }\n    this.fieldset.setValidity(true, \"\");\n    return this.inputField.validity;\n  }\n  \n  /** Can be used to set a custom validity message. */\n  @Method()\n  async setCustomValidity(message: string): Promise<void> {\n    if (message == undefined || message == \"\") {\n      this.inputField.setCustomValidity(\"\");\n      this.valid = true;\n      this.fieldset.setValidity(true);\n      return;\n    }\n\n    this.inputField.setCustomValidity(message);\n    this.valid = false;\n    this.fieldset.setValidity(false, message);\n  }\n\n  @State() focused = false;\n  @State() valid = true;\n  @State() customValidityMessage: string;\n  @State() selectedIndex: number;\n  @State() positionInitialized = false;\n  @State() lastScrollTop = 0;\n  @State() displayValue: string = \"\";\n\n  @Watch(\"value\")\n  handleValueChange(newValue: string) {\n    this.displayValue = newValue;\n\n    // Find the index of the selected item\n    this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);\n  }\n  \n  /** attacth the internals for form validation */\n  @AttachInternals() internals: ElementInternals;\n  \n  /** Listener for mouse down event */\n  @Listen(\"click\", { target: \"document\", capture: false })\n  handleClick(e: MouseEvent) {\n    const path = e.composedPath();\n    if (!path.includes(this.element))\n    {\n      this.focused = false;\n    }\n  }\n  \n  componentDidRender(){\n    if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n      this.adjustDropdownPosition();\n    }\n  }\n\n  private inputField!: HTMLInputElement;\n  private suggestionsContainer: HTMLUListElement;\n  private labelId: string;\n  private fieldset: HTMLDnnFieldsetElement;\n  \n  // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n  formResetCallback() {\n    this.inputField.setCustomValidity(\"\");\n    this.valid = true;\n    this.value = \"\";\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n  \n  private handleInput(e: Event) {\n    const inputValue = (e.target as HTMLInputElement).value;\n    this.displayValue = inputValue;\n    this.value = inputValue;\n    var valid = this.inputField.checkValidity();\n    this.valid = valid;\n    this.valueInput.emit(inputValue);\n    this.handleSearchQueryChanged(inputValue);\n  }\n\n  @Debounce(300)\n  private handleSearchQueryChanged(value: string) {\n    this.searchQueryChanged.emit(value);\n  }\n\n  private handleInvalid(): void {\n    this.valid = false;\n    if (this.customValidityMessage == undefined) {\n      this.customValidityMessage = this.inputField.validationMessage;\n    }\n  }\n\n  private handleChange() {\n    this.valueChange.emit(this.value);\n    if (this.name != undefined) {\n      var data = new FormData();\n      data.append(this.name, this.value.toString());\n      this.internals.setFormValue(data);\n    }\n  }\n\n  /** Check if the label should float */\n  private shouldLabelFloat(): boolean {\n    if (this.focused) {\n      return false;\n    }\n\n    if (this.value != undefined && this.value != \"\") {\n      return false;\n    }\n\n    return true;\n  }\n\n  private findAverageSuggestionHeight(): number {\n    const suggestionItems = this.suggestionsContainer.querySelectorAll(\"li\");\n    var totalHeight = 0;\n    for (let i = 0; i < suggestionItems.length; i++) {\n      totalHeight += suggestionItems[i].clientHeight;\n    }\n    return totalHeight / suggestionItems.length;\n  }\n\n  private readonly adjustDropdownPosition = () => {\n    var itemHeight = this.findAverageSuggestionHeight();\n    requestAnimationFrame(() => {\n      this.positionInitialized = true;\n    });\n\n    // If we can fit 3 items below the input and there is still 3em left, we show the dropdown under.\n    // Otherwise, we show it above.\n    var spaceBelow = window.innerHeight - this.inputField.getBoundingClientRect().bottom;\n    const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);\n    const fitsDown = spaceBelow > 3 * itemHeight + 3 * rem;\n    if (fitsDown) {\n      this.suggestionsContainer.style.top = \"1.2rem\";\n    }\n    else {\n      this.suggestionsContainer.style.bottom = \"1.2rem\";\n    }\n\n    // Set the max height to not overflow the screen.\n    if (fitsDown){\n      this.suggestionsContainer.style.maxHeight = `${spaceBelow - 3 * rem}px`;\n    }\n    else {\n      this.suggestionsContainer.style.maxHeight = `${this.inputField.getBoundingClientRect().top - 3 * rem}px`;\n    }\n\n    this.checkIfMoreItemsNeeded();\n  }\n\n  private handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      if (this.selectedIndex == undefined) {\n        this.selectedIndex = 0;\n      } else {\n        this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n      }\n    }\n    if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      if (this.selectedIndex == undefined) {\n        this.selectedIndex = this.suggestions.length - 1;\n      } else {\n        this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n      }\n    }\n    this.value = this.suggestions[this.selectedIndex]?.value || this.value;\n    if (e.key === \"Enter\") {\n      var selectedItem = this.suggestions[this.selectedIndex];\n      this.value = selectedItem.value;\n      this.inputField.value = selectedItem.label;\n      this.itemSelected.emit(selectedItem.value);\n      this.focused = false;\n    }\n    if (e.key === \"Tab\"){\n      this.focused = false;\n    }\n  }\n\n  private selectItem(e: Event, index: number): void {\n    e.preventDefault();\n    e.stopPropagation();\n    this.selectedIndex = index;\n    this.value = this.suggestions[this.selectedIndex].value;\n    this.displayValue = this.suggestions[this.selectedIndex].label;\n    this.inputField.value = this.displayValue;\n    this.checkValidity();\n    this.focused = false;\n    this.itemSelected.emit(this.suggestions[this.selectedIndex].value)\n  }\n\n  private getVirtualScrollHeight(): number {\n    const itemHeight = this.findAverageSuggestionHeight();\n    const upcomingItems = this.totalSuggestions - this.suggestions.length;\n    return itemHeight * upcomingItems;\n  }\n\n  private handleDropdownClick(): void {\n    this.handleSearchQueryChanged(this.value);\n  }\n\n  @Debounce(100)\n  private handleSuggestionsScroll(): void {\n    const container = this.suggestionsContainer;\n    const currentScrollTop = container.scrollTop;\n\n    // Only act if we are scrolling down\n    if (currentScrollTop > this.lastScrollTop) {\n      const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n      if (loadingDiv == undefined) {\n        this.lastScrollTop = currentScrollTop;\n        return;\n      }\n\n      const loadingDivPosition = loadingDiv.offsetTop;\n      const loadingDivHeight = loadingDiv.offsetHeight;\n      const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n      // Calculate the visible bottom of the scroll container\n      const visibleBottom = currentScrollTop + container.clientHeight;\n\n      // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n      if (visibleBottom > loadingDivBottom) {\n        // Adjust scrollTop so it doesn't scroll past the loading div\n        container.scrollTop = loadingDivBottom - container.clientHeight;\n      }\n\n      // Check if more items are needed based on the position of the loading div\n      this.checkIfMoreItemsNeeded();\n    }\n\n    // Update the last scroll position\n    this.lastScrollTop = currentScrollTop;\n  }\n\n  @Debounce()\n  private checkIfMoreItemsNeeded() {\n    const container = this.suggestionsContainer;\n  \n    const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n    if (loadingDiv == undefined) return; // Exit if there's no loading div\n  \n    const scrollPosition = container.scrollTop + container.clientHeight;\n    const loadingDivPosition = loadingDiv.offsetTop;\n  \n    // Check if the loading div is within the threshold of becoming visible\n    if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n      const eventArgs: NeedMoreItemsEventArgs = {\n        searchTerm: this.inputField.value,\n      };\n      this.needMoreItems.emit(eventArgs);\n    }\n  }\n\n  handleBlur(): void {\n    var validity = this.inputField.checkValidity();\n    this.valid = validity;\n    this.fieldset.setValidity(validity, this.inputField.validationMessage);\n    this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n  }\n\n  render() {\n    return (\n      <Host\n        tabIndex={this.focused ? -1 : 0}\n        onFocus={() => this.inputField.focus()}\n        onBlur={() => this.inputField.blur()}\n      >\n        <dnn-fieldset\n          ref={el => this.fieldset = el}\n          invalid={!this.valid}\n          focused={this.focused}\n          label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n          helpText={this.helpText}\n          id={this.labelId}\n          disabled={this.disabled}\n          floatLabel={this.shouldLabelFloat()}\n        >\n          <div class=\"inner-container\">\n            <input\n              ref={(el) => this.inputField = el}\n              name={this.name}\n              type=\"search\"\n              role=\"combobox\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={this.focused.toString()}\n              aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n              disabled={this.disabled}\n              required={this.required}\n              autoComplete={this.autocomplete}\n              value={this.displayValue}\n              onFocus={() => {\n                this.searchQueryChanged.emit(this.value || \"\");\n                this.focused = true;\n              }}\n              onBlur={() => this.handleBlur()}\n              onInput={e => this.handleInput(e)}\n              onInvalid={() => this.handleInvalid()}\n              onChange={() => this.handleChange()}\n              aria-labelledby={this.labelId}\n              onKeyDown={e => this.handleKeyDown(e)}\n            />\n            <ul\n              class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n              role=\"listbox\"\n              ref={el => this.suggestionsContainer = el}\n              onScroll={() => this.handleSuggestionsScroll()}\n            >\n              {this.suggestions.map((suggestion, index) => (\n                <li\n                  id={`option-${index}`}\n                  role=\"option\"\n                  aria-selected={this.selectedIndex == index}\n                  class={this.selectedIndex == index ? \"selected\" : \"\"}\n                  onClick={e => this.selectItem(e, index)}\n                >\n                  {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n                </li>\n              ))}\n              {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n                <div class=\"loading\">\n                </div>\n              }\n              {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n                <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n                </div>\n              }\n            </ul>\n            <svg\n              onClick={() => this.handleDropdownClick()}\n              class=\"chevron-down\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 -960 960 960\">\n              <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n            </svg>\n          </div>\n        </dnn-fieldset>\n      </Host>\n    );\n  }\n}"]}

package/dist/dnn/dnn.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as l}from"./p-91d08ab2.js";export{s as setNonce}from"./p-91d08ab2.js";import{g as a}from"./p-e1255160.js";var t=()=>{const l=import.meta.url;const a={};if(l!==""){a.resourcesUrl=new URL(".",l).href}return e(a)};t().then((async e=>{await a();return l([["p-107bd5a8",[[65,"dnn-color-input",{color:[1025],contrastColor:[1025,"contrast-color"],lightColor:[1025,"light-color"],darkColor:[1025,"dark-color"],label:[1],readonly:[4],localization:[16],name:[1],helpText:[1,"help-text"],useContrastColor:[4,"use-contrast-color"],useLightColor:[4,"use-light-color"],useDarkColor:[4,"use-dark-color"],currentColor:[32],focused:[32]},null,{currentColor:["currentColorChanged"]}]]],["p-ef6a902d",[[65,"dnn-image-cropper",{width:[2],height:[2],resx:[16],quality:[2],preventUndersized:[4,"prevent-undersized"],name:[1],view:[32],localResx:[32],fileName:[32],focused:[32],clear:[64]},null,{resx:["resxChanged"]}]]],["p-f317208f",[[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"]]]]],["p-e6bd0f5b",[[65,"dnn-input",{type:[1025],label:[1],name:[1],value:[1544],helpText:[1,"help-text"],required:[4],disabled:[4],autocomplete:[1],min:[8],max:[8],minlength:[2],maxlength:[2],multiple:[4],pattern:[1],readonly:[4],step:[8],disableValidityReporting:[4,"disable-validity-reporting"],allowShowPassword:[4,"allow-show-password"],inputmode:[1],focused:[32],valid:[32],checkValidity:[64],setCustomValidity:[64]}]]],["p-d55632fe",[[65,"dnn-select",{label:[1],name:[1],required:[4],helpText:[1,"help-text"],disabled:[4],disableValidityReporting:[4,"disable-validity-reporting"],autocomplete:[1],value:[1537],focused:[32],valid:[32],customValidityMessage:[32],checkValidity:[64]}]]],["p-88a928f2",[[65,"dnn-textarea",{resizable:[1],value:[1025],label:[1],name:[1],helpText:[1,"help-text"],required:[4],disabled:[4],autocomplete:[1],minlength:[2],maxlength:[2],readonly:[4],rows:[2],focused:[32],valid:[32],customValidityMessage:[32],checkValidity:[64],setCustomValidity:[64]}]]],["p-c12c6683",[[1,"dnn-treeview-item",{expanded:[1540],hasChildren:[32],focused:[32]},null,{expanded:["watchExpanded"]}]]],["p-2b3d9bc1",[[1,"dnn-chevron",{expandText:[1,"expand-text"],collapseText:[1,"collapse-text"],expanded:[1540],focused:[32]},null,{expanded:["handleExpandedChanged"]}]]],["p-c15dfb8b",[[66,"dnn-monaco-editor",{language:[1],value:[1025],name:[1],focused:[32]},null,{language:["languageChanged"],value:["valueChanged"]}]]],["p-b0239140",[[1,"dnn-progress-bar",{value:[2],max:[2],useGradient:[4,"use-gradient"]}]]],["p-e7a44eb3",[[65,"dnn-richtext",{options:[16],value:[1],name:[1],focused:[32]},null,{value:["watchValueChanged"]}]]],["p-a645d829",[[1,"dnn-sort-icon",{sortDirection:[1025,"sort-direction"],focused:[32]}]]],["p-8056c270",[[65,"dnn-toggle",{checked:[1028],disabled:[4],name:[1],value:[1],focused:[32]},[[2,"click","handleClick"]],{checked:["checkedChanged"]}]]],["p-cf2aa06f",[[1,"dnn-vertical-overflow-menu",{showDropdownButton:[32],showDropdownMenu:[32]}]]],["p-b8ec5d70",[[1,"dnn-vertical-splitview",{splitterWidth:[2,"splitter-width"],splitWidthPercentage:[1026,"split-width-percentage"],leftWidth:[32],rightWidth:[32],setSplitWidthPercentage:[64],getSplitWidthPercentage:[64]}]]],["p-2b0a6053",[[65,"dnn-checkbox",{checked:[1025],useIntermediate:[4,"use-intermediate"],value:[1],name:[1],focused:[32]},[[2,"click","handleClick"]],{checked:["handleCheckedChange"]}]]],["p-f4b5a8e5",[[1,"dnn-color-picker",{color:[1],colorBoxHeight:[1,"color-box-height"],currentColor:[32],rgbDisplay:[32],hslDisplay:[32],hexDisplay:[32],focused:[32]},null,{currentColor:["handeCurrentColorChanged"]}]]],["p-00fccd70",[[65,"dnn-dropzone",{resx:[16],allowedExtensions:[16],allowCameraMode:[4,"allow-camera-mode"],captureQuality:[2,"capture-quality"],maxFileSize:[2,"max-file-size"],name:[1],canTakeSnapshots:[32],takingPicture:[32],fileTooLarge:[32],invalidExtension:[32],localResx:[32],focused:[32]},null,{resx:["resxChanged"]}]]],["p-678c5a33",[[1,"dnn-searchbox",{placeholder:[1],debounced:[4],debounceTime:[2,"debounce-time"],query:[1025],focused:[32]},null,{query:["handleQueryChanged"]}]]],["p-3279942a",[[1,"dnn-tab",{tabTitle:[1,"tab-title"],visible:[32],show:[64],hide:[64]}],[1,"dnn-tabs",{tabTitles:[32],selectedTabTitle:[32]}]]],["p-5aa5dc7b",[[1,"dnn-collapsible",{expanded:[516],transitionDuration:[2,"transition-duration"],updateSize:[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{expanded:["handledExpandedChanged"]}]]],["p-507074b5",[[1,"dnn-modal",{backdropDismiss:[4,"backdrop-dismiss"],closeText:[1,"close-text"],resizable:[4],showCloseButton:[4,"show-close-button"],visible:[1540],show:[64],hide:[64]}]]],["p-36dc982d",[[65,"dnn-button",{type:[1],appearance:[1],formButtonType:[1,"form-button-type"],reversed:[4],size:[1],confirm:[4],confirmYesText:[1,"confirm-yes-text"],confirmNoText:[1,"confirm-no-text"],confirmMessage:[1,"confirm-message"],disabled:[4],focused:[32],modalVisible:[32]}]]],["p-bd6d200f",[[1,"dnn-permissions-grid",{permissions:[1040],roleGroups:[16],roles:[16],resx:[16],foundUsers:[16],selectedRoleGroupId:[32],userQuery:[32],pickedUser:[32],localResx:[32],focused:[32]},null,{foundUsers:["handleFoundUsersChanged"],resx:["resxChanged"]}]]],["p-bc2d2d54",[[1,"dnn-fieldset",{focused:[1540],disabled:[1540],invalid:[1540],label:[1],floatLabel:[1540,"float-label"],helpText:[1,"help-text"],resizable:[1],customValidityMessage:[32],setFocused:[64],setBlurred:[64],disable:[64],enable:[64],pinLabel:[64],unpinLabel:[64],setValidity:[64]}]]]],e)}));
+import{p as e,b as a}from"./p-91d08ab2.js";export{s as setNonce}from"./p-91d08ab2.js";import{g as l}from"./p-e1255160.js";var t=()=>{const a=import.meta.url;const l={};if(a!==""){l.resourcesUrl=new URL(".",a).href}return e(l)};t().then((async e=>{await l();return a([["p-107bd5a8",[[65,"dnn-color-input",{color:[1025],contrastColor:[1025,"contrast-color"],lightColor:[1025,"light-color"],darkColor:[1025,"dark-color"],label:[1],readonly:[4],localization:[16],name:[1],helpText:[1,"help-text"],useContrastColor:[4,"use-contrast-color"],useLightColor:[4,"use-light-color"],useDarkColor:[4,"use-dark-color"],currentColor:[32],focused:[32]},null,{currentColor:["currentColorChanged"]}]]],["p-ef6a902d",[[65,"dnn-image-cropper",{width:[2],height:[2],resx:[16],quality:[2],preventUndersized:[4,"prevent-undersized"],name:[1],view:[32],localResx:[32],fileName:[32],focused:[32],clear:[64]},null,{resx:["resxChanged"]}]]],["p-a9d8a942",[[65,"dnn-autocomplete",{label:[1],name:[1],helpText:[1,"help-text"],value:[1537],required:[4],disabled:[4],suggestions:[16],renderSuggestion:[16],totalSuggestions:[2,"total-suggestions"],preloadThresholdPixels:[2,"preload-threshold-pixels"],autocomplete:[1],focused:[32],valid:[32],customValidityMessage:[32],selectedIndex:[32],positionInitialized:[32],lastScrollTop:[32],displayValue:[32],checkValidity:[64],setCustomValidity:[64]},[[4,"click","handleClick"]],{value:["handleValueChange"]}]]],["p-e6bd0f5b",[[65,"dnn-input",{type:[1025],label:[1],name:[1],value:[1544],helpText:[1,"help-text"],required:[4],disabled:[4],autocomplete:[1],min:[8],max:[8],minlength:[2],maxlength:[2],multiple:[4],pattern:[1],readonly:[4],step:[8],disableValidityReporting:[4,"disable-validity-reporting"],allowShowPassword:[4,"allow-show-password"],inputmode:[1],focused:[32],valid:[32],checkValidity:[64],setCustomValidity:[64]}]]],["p-d55632fe",[[65,"dnn-select",{label:[1],name:[1],required:[4],helpText:[1,"help-text"],disabled:[4],disableValidityReporting:[4,"disable-validity-reporting"],autocomplete:[1],value:[1537],focused:[32],valid:[32],customValidityMessage:[32],checkValidity:[64]}]]],["p-88a928f2",[[65,"dnn-textarea",{resizable:[1],value:[1025],label:[1],name:[1],helpText:[1,"help-text"],required:[4],disabled:[4],autocomplete:[1],minlength:[2],maxlength:[2],readonly:[4],rows:[2],focused:[32],valid:[32],customValidityMessage:[32],checkValidity:[64],setCustomValidity:[64]}]]],["p-c12c6683",[[1,"dnn-treeview-item",{expanded:[1540],hasChildren:[32],focused:[32]},null,{expanded:["watchExpanded"]}]]],["p-2b3d9bc1",[[1,"dnn-chevron",{expandText:[1,"expand-text"],collapseText:[1,"collapse-text"],expanded:[1540],focused:[32]},null,{expanded:["handleExpandedChanged"]}]]],["p-c15dfb8b",[[66,"dnn-monaco-editor",{language:[1],value:[1025],name:[1],focused:[32]},null,{language:["languageChanged"],value:["valueChanged"]}]]],["p-b0239140",[[1,"dnn-progress-bar",{value:[2],max:[2],useGradient:[4,"use-gradient"]}]]],["p-e7a44eb3",[[65,"dnn-richtext",{options:[16],value:[1],name:[1],focused:[32]},null,{value:["watchValueChanged"]}]]],["p-a645d829",[[1,"dnn-sort-icon",{sortDirection:[1025,"sort-direction"],focused:[32]}]]],["p-8056c270",[[65,"dnn-toggle",{checked:[1028],disabled:[4],name:[1],value:[1],focused:[32]},[[2,"click","handleClick"]],{checked:["checkedChanged"]}]]],["p-cf2aa06f",[[1,"dnn-vertical-overflow-menu",{showDropdownButton:[32],showDropdownMenu:[32]}]]],["p-b8ec5d70",[[1,"dnn-vertical-splitview",{splitterWidth:[2,"splitter-width"],splitWidthPercentage:[1026,"split-width-percentage"],leftWidth:[32],rightWidth:[32],setSplitWidthPercentage:[64],getSplitWidthPercentage:[64]}]]],["p-2b0a6053",[[65,"dnn-checkbox",{checked:[1025],useIntermediate:[4,"use-intermediate"],value:[1],name:[1],focused:[32]},[[2,"click","handleClick"]],{checked:["handleCheckedChange"]}]]],["p-f4b5a8e5",[[1,"dnn-color-picker",{color:[1],colorBoxHeight:[1,"color-box-height"],currentColor:[32],rgbDisplay:[32],hslDisplay:[32],hexDisplay:[32],focused:[32]},null,{currentColor:["handeCurrentColorChanged"]}]]],["p-00fccd70",[[65,"dnn-dropzone",{resx:[16],allowedExtensions:[16],allowCameraMode:[4,"allow-camera-mode"],captureQuality:[2,"capture-quality"],maxFileSize:[2,"max-file-size"],name:[1],canTakeSnapshots:[32],takingPicture:[32],fileTooLarge:[32],invalidExtension:[32],localResx:[32],focused:[32]},null,{resx:["resxChanged"]}]]],["p-678c5a33",[[1,"dnn-searchbox",{placeholder:[1],debounced:[4],debounceTime:[2,"debounce-time"],query:[1025],focused:[32]},null,{query:["handleQueryChanged"]}]]],["p-3279942a",[[1,"dnn-tab",{tabTitle:[1,"tab-title"],visible:[32],show:[64],hide:[64]}],[1,"dnn-tabs",{tabTitles:[32],selectedTabTitle:[32]}]]],["p-5aa5dc7b",[[1,"dnn-collapsible",{expanded:[516],transitionDuration:[2,"transition-duration"],updateSize:[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{expanded:["handledExpandedChanged"]}]]],["p-507074b5",[[1,"dnn-modal",{backdropDismiss:[4,"backdrop-dismiss"],closeText:[1,"close-text"],resizable:[4],showCloseButton:[4,"show-close-button"],visible:[1540],show:[64],hide:[64]}]]],["p-36dc982d",[[65,"dnn-button",{type:[1],appearance:[1],formButtonType:[1,"form-button-type"],reversed:[4],size:[1],confirm:[4],confirmYesText:[1,"confirm-yes-text"],confirmNoText:[1,"confirm-no-text"],confirmMessage:[1,"confirm-message"],disabled:[4],focused:[32],modalVisible:[32]}]]],["p-bd6d200f",[[1,"dnn-permissions-grid",{permissions:[1040],roleGroups:[16],roles:[16],resx:[16],foundUsers:[16],selectedRoleGroupId:[32],userQuery:[32],pickedUser:[32],localResx:[32],focused:[32]},null,{foundUsers:["handleFoundUsersChanged"],resx:["resxChanged"]}]]],["p-bc2d2d54",[[1,"dnn-fieldset",{focused:[1540],disabled:[1540],invalid:[1540],label:[1],floatLabel:[1540,"float-label"],helpText:[1,"help-text"],resizable:[1],customValidityMessage:[32],setFocused:[64],setBlurred:[64],disable:[64],enable:[64],pinLabel:[64],unpinLabel:[64],setValidity:[64]}]]]],e)}));
 //# sourceMappingURL=dnn.esm.js.map

package/dist/dnn/dnn.esm.js.map

@@ -1 +1 @@
-{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","color","contrastColor","lightColor","darkColor","label","readonly","localization","name","helpText","useContrastColor","useLightColor","useDarkColor","currentColor","focused","width","height","resx","quality","preventUndersized","view","localResx","fileName","clear","value","required","disabled","suggestions","renderSuggestion","totalSuggestions","preloadThresholdPixels","autocomplete","valid","customValidityMessage","selectedIndex","positionInitialized","lastScrollTop","displayValue","checkValidity","setCustomValidity","type","min","max","minlength","maxlength","multiple","pattern","step","disableValidityReporting","allowShowPassword","inputmode","resizable","rows","expanded","hasChildren","expandText","collapseText","language","useGradient","sortDirection","checked","showDropdownButton","showDropdownMenu","splitterWidth","splitWidthPercentage","leftWidth","rightWidth","setSplitWidthPercentage","getSplitWidthPercentage","useIntermediate","colorBoxHeight","rgbDisplay","hslDisplay","hexDisplay","allowedExtensions","allowCameraMode","captureQuality","maxFileSize","canTakeSnapshots","takingPicture","fileTooLarge","invalidExtension","placeholder","debounced","debounceTime","query","tabTitle","visible","show","hide","tabTitles","selectedTabTitle","transitionDuration","updateSize","backdropDismiss","closeText","showCloseButton","appearance","formButtonType","reversed","size","confirm","confirmYesText","confirmNoText","confirmMessage","modalVisible","permissions","roleGroups","roles","foundUsers","selectedRoleGroupId","userQuery","pickedUser","invalid","floatLabel","setFocused","setBlurred","disable","enable","pinLabel","unpinLabel","setValidity"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.22.2 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","color","contrastColor","lightColor","darkColor","label","readonly","localization","name","helpText","useContrastColor","useLightColor","useDarkColor","currentColor","focused","width","height","resx","quality","preventUndersized","view","localResx","fileName","clear","value","required","disabled","suggestions","renderSuggestion","totalSuggestions","preloadThresholdPixels","autocomplete","valid","customValidityMessage","selectedIndex","positionInitialized","lastScrollTop","displayValue","checkValidity","setCustomValidity","type","min","max","minlength","maxlength","multiple","pattern","step","disableValidityReporting","allowShowPassword","inputmode","resizable","rows","expanded","hasChildren","expandText","collapseText","language","useGradient","sortDirection","checked","showDropdownButton","showDropdownMenu","splitterWidth","splitWidthPercentage","leftWidth","rightWidth","setSplitWidthPercentage","getSplitWidthPercentage","useIntermediate","colorBoxHeight","rgbDisplay","hslDisplay","hexDisplay","allowedExtensions","allowCameraMode","captureQuality","maxFileSize","canTakeSnapshots","takingPicture","fileTooLarge","invalidExtension","placeholder","debounced","debounceTime","query","tabTitle","visible","show","hide","tabTitles","selectedTabTitle","transitionDuration","updateSize","backdropDismiss","closeText","showCloseButton","appearance","formButtonType","reversed","size","confirm","confirmYesText","confirmNoText","confirmMessage","modalVisible","permissions","roleGroups","roles","foundUsers","selectedRoleGroupId","userQuery","pickedUser","invalid","floatLabel","setFocused","setBlurred","disable","enable","pinLabel","unpinLabel","setValidity"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.22.2 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"0HAOA,IAAIA,EAAe,KAUjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACrBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACjD,CACE,OAAOC,EAAeJ,EAAK,EClB7BH,IAAeQ,MAAKC,MAAOC,UACnBC,IACN,OAAOC,EAAc,sCAAsC,CAACC,MAAA,OAAAC,cAAA,wBAAAC,WAAA,qBAAAC,UAAA,oBAAAC,MAAA,IAAAC,SAAA,IAAAC,aAAA,KAAAC,KAAA,IAAAC,SAAA,gBAAAC,iBAAA,yBAAAC,cAAA,sBAAAC,aAAA,qBAAAC,aAAA,KAAAC,QAAA,YAAAD,aAAA,oEAAAE,MAAA,IAAAC,OAAA,IAAAC,KAAA,KAAAC,QAAA,IAAAC,kBAAA,yBAAAX,KAAA,IAAAY,KAAA,KAAAC,UAAA,KAAAC,SAAA,KAAAR,QAAA,KAAAS,MAAA,YAAAN,KAAA,2DAAAZ,MAAA,IAAAG,KAAA,IAAAC,SAAA,gBAAAe,MAAA,OAAAC,SAAA,IAAAC,SAAA,IAAAC,YAAA,KAAAC,iBAAA,KAAAC,iBAAA,wBAAAC,uBAAA,+BAAAC,aAAA,IAAAjB,QAAA,KAAAkB,MAAA,KAAAC,sBAAA,KAAAC,cAAA,KAAAC,oBAAA,KAAAC,cAAA,KAAAC,aAAA,KAAAC,cAAA,KAAAC,kBAAA,mCAAAf,MAAA,0DAAAgB,KAAA,OAAAnC,MAAA,IAAAG,KAAA,IAAAgB,MAAA,OAAAf,SAAA,gBAAAgB,SAAA,IAAAC,SAAA,IAAAK,aAAA,IAAAU,IAAA,IAAAC,IAAA,IAAAC,UAAA,IAAAC,UAAA,IAAAC,SAAA,IAAAC,QAAA,IAAAxC,SAAA,IAAAyC,KAAA,IAAAC,yBAAA,iCAAAC,kBAAA,0BAAAC,UAAA,IAAApC,QAAA,KAAAkB,MAAA,KAAAM,cAAA,KAAAC,kBAAA,0CAAAlC,MAAA,IAAAG,KAAA,IAAAiB,SAAA,IAAAhB,SAAA,gBAAAiB,SAAA,IAAAsB,yBAAA,iCAAAjB,aAAA,IAAAP,MAAA,OAAAV,QAAA,KAAAkB,MAAA,KAAAC,sBAAA,KAAAK,cAAA,4CAAAa,UAAA,IAAA3B,MAAA,OAAAnB,MAAA,IAAAG,KAAA,IAAAC,SAAA,gBAAAgB,SAAA,IAAAC,SAAA,IAAAK,aAAA,IAAAY,UAAA,IAAAC,UAAA,IAAAtC,SAAA,IAAA8C,KAAA,IAAAtC,QAAA,KAAAkB,MAAA,KAAAC,sBAAA,KAAAK,cAAA,KAAAC,kBAAA,gDAAAc,SAAA,OAAAC,YAAA,KAAAxC,QAAA,YAAAuC,SAAA,uDAAAE,WAAA,kBAAAC,aAAA,oBAAAH,SAAA,OAAAvC,QAAA,YAAAuC,SAAA,sEAAAI,SAAA,IAAAjC,MAAA,OAAAhB,KAAA,IAAAM,QAAA,YAAA2C,SAAA,oBAAAjC,MAAA,2DAAAA,MAAA,IAAAkB,IAAA,IAAAgB,YAAA,0DAAA5D,QAAA,KAAA0B,MAAA,IAAAhB,KAAA,IAAAM,QAAA,YAAAU,MAAA,6DAAAmC,cAAA,wBAAA7C,QAAA,0CAAA8C,QAAA,OAAAlC,SAAA,IAAAlB,KAAA,IAAAgB,MAAA,IAAAV,QAAA,mCAAA8C,QAAA,uEAAAC,mBAAA,KAAAC,iBAAA,qDAAAC,cAAA,qBAAAC,qBAAA,gCAAAC,UAAA,KAAAC,WAAA,KAAAC,wBAAA,KAAAC,wBAAA,4CAAAR,QAAA,OAAAS,gBAAA,uBAAA7C,MAAA,IAAAhB,KAAA,IAAAM,QAAA,mCAAA8C,QAAA,kEAAA3D,MAAA,IAAAqE,eAAA,uBAAAzD,aAAA,KAAA0D,WAAA,KAAAC,WAAA,KAAAC,WAAA,KAAA3D,QAAA,YAAAD,aAAA,oEAAAI,KAAA,KAAAyD,kBAAA,KAAAC,gBAAA,wBAAAC,eAAA,sBAAAC,YAAA,oBAAArE,KAAA,IAAAsE,iBAAA,KAAAC,cAAA,KAAAC,aAAA,KAAAC,iBAAA,KAAA5D,UAAA,KAAAP,QAAA,YAAAG,KAAA,uDAAAiE,YAAA,IAAAC,UAAA,IAAAC,aAAA,oBAAAC,MAAA,OAAAvE,QAAA,YAAAuE,MAAA,wDAAAC,SAAA,gBAAAC,QAAA,KAAAC,KAAA,KAAAC,KAAA,sBAAAC,UAAA,KAAAC,iBAAA,8CAAAtC,SAAA,MAAAuC,mBAAA,0BAAAC,WAAA,iEAAAxC,SAAA,8DAAAyC,gBAAA,uBAAAC,UAAA,iBAAA5C,UAAA,IAAA6C,gBAAA,wBAAAT,QAAA,OAAAC,KAAA,KAAAC,KAAA,0CAAAjD,KAAA,IAAAyD,WAAA,IAAAC,eAAA,uBAAAC,SAAA,IAAAC,KAAA,IAAAC,QAAA,IAAAC,eAAA,uBAAAC,cAAA,sBAAAC,eAAA,sBAAA9E,SAAA,IAAAZ,QAAA,KAAA2F,aAAA,mDAAAC,YAAA,OAAAC,WAAA,KAAAC,MAAA,KAAA3F,KAAA,KAAA4F,WAAA,KAAAC,oBAAA,KAAAC,UAAA,KAAAC,WAAA,KAAA3F,UAAA,KAAAP,QAAA,YAAA+F,WAAA,4BAAA5F,KAAA,sDAAAH,QAAA,OAAAY,SAAA,OAAAuF,QAAA,OAAA5G,MAAA,IAAA6G,WAAA,qBAAAzG,SAAA,gBAAA0C,UAAA,IAAAlB,sBAAA,KAAAkF,WAAA,KAAAC,WAAA,KAAAC,QAAA,KAAAC,OAAA,KAAAC,SAAA,KAAAC,WAAA,KAAAC,YAAA,UAAA3H,EAAA","ignoreList":[]}

package/dist/dnn/p-a9d8a942.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as e,H as s,g as n}from"./p-91d08ab2.js";import{D as h}from"./p-78c57746.js";const o=":host{display:inline-block;--foreground-color:var(--dnn-color-foreground, #000);--background-color:var(--dnn-color-background, #fff);--focus-color:var(--dnn-color-primary, #3792ED);--danger-color:var(--dnn-color-danger, #900);--control-radius:var(--dnn-controls-radius, 3px)}dnn-fieldset{width:100%}@keyframes shift{0%{background-position:0% 0}50%{background-position:100% 0}100%{background-position:200% 0}}.inner-container{display:flex;justify-content:space-between;position:relative;width:100%}.inner-container input{border:none;outline:none;background-color:transparent;color:var(--foreground-color);text-align:var(--input-text-align);width:100%}.inner-container svg.chevron-down{height:1rem;width:auto;transform:scale(1.2);cursor:pointer}.inner-container ul{position:absolute;border:1px solid lightgray;margin:0;padding:var(--dnn-controls-radius, 3px) 0;overflow-y:auto;width:100%;box-shadow:2px 2px 6px 1px rgba(0, 0, 0, 0.3);background-color:var(--dnn-color-background, white);border-radius:var(--dnn-controls-radius, 3px);z-index:2;display:none;scroll-behavior:smooth}.inner-container ul.show{display:block}.inner-container ul li{display:block;list-style-type:none;cursor:pointer;padding:0 0.5rem}.inner-container ul li.selected{background-color:lightgray}.inner-container ul li:hover{background-color:lightgray}.inner-container ul .loading{width:100%;height:0.5rem;border-radius:0.5rem;background:linear-gradient(to right, var(--background-color) 0%, var(--foreground-color) 50%, var(--background-color) 100%);background-size:200% 100%;animation:shift 2s linear infinite;width:75%;margin:0 auto;opacity:0.5}";const r=o;var a=undefined&&undefined.__decorate||function(i,t,e,s){var n=arguments.length,h=n<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,e):s,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")h=Reflect.decorate(i,t,e,s);else for(var r=i.length-1;r>=0;r--)if(o=i[r])h=(n<3?o(h):n>3?o(t,e,h):o(t,e))||h;return n>3&&h&&Object.defineProperty(t,e,h),h};const d=class{constructor(e){i(this,e);this.valueChange=t(this,"valueChange",7);this.valueInput=t(this,"valueInput",7);this.needMoreItems=t(this,"needMoreItems",7);this.searchQueryChanged=t(this,"searchQueryChanged",7);this.itemSelected=t(this,"itemSelected",7);if(e.$hostElement$["s-ei"]){this.internals=e.$hostElement$["s-ei"]}else{this.internals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.internals}this.adjustDropdownPosition=()=>{var i=this.findAverageSuggestionHeight();requestAnimationFrame((()=>{this.positionInitialized=true}));var t=window.innerHeight-this.inputField.getBoundingClientRect().bottom;const e=parseFloat(getComputedStyle(document.documentElement).fontSize);const s=t>3*i+3*e;if(s){this.suggestionsContainer.style.top="1.2rem"}else{this.suggestionsContainer.style.bottom="1.2rem"}if(s){this.suggestionsContainer.style.maxHeight=`${t-3*e}px`}else{this.suggestionsContainer.style.maxHeight=`${this.inputField.getBoundingClientRect().top-3*e}px`}this.checkIfMoreItemsNeeded()};this.label=undefined;this.name=undefined;this.helpText=undefined;this.value=undefined;this.required=undefined;this.disabled=undefined;this.suggestions=[];this.renderSuggestion=undefined;this.totalSuggestions=undefined;this.preloadThresholdPixels=1e3;this.autocomplete="off";this.focused=false;this.valid=true;this.customValidityMessage=undefined;this.selectedIndex=undefined;this.positionInitialized=false;this.lastScrollTop=0;this.displayValue=""}async checkValidity(){var i=this.inputField.checkValidity();if(!i){this.fieldset.setValidity(false,this.inputField.validationMessage)}this.fieldset.setValidity(true,"");return this.inputField.validity}async setCustomValidity(i){if(i==undefined||i==""){this.inputField.setCustomValidity("");this.valid=true;this.fieldset.setValidity(true);return}this.inputField.setCustomValidity(i);this.valid=false;this.fieldset.setValidity(false,i)}handleValueChange(i){this.displayValue=i;this.selectedIndex=this.suggestions.findIndex((t=>t.value===i))}handleClick(i){const t=i.composedPath();if(!t.includes(this.element)){this.focused=false}}componentDidRender(){if(this.focused&&this.suggestions.length>0&&!this.positionInitialized){this.adjustDropdownPosition()}}formResetCallback(){this.inputField.setCustomValidity("");this.valid=true;this.value="";this.internals.setValidity({});this.internals.setFormValue("")}handleInput(i){const t=i.target.value;this.displayValue=t;this.value=t;var e=this.inputField.checkValidity();this.valid=e;this.valueInput.emit(t);this.handleSearchQueryChanged(t)}handleSearchQueryChanged(i){this.searchQueryChanged.emit(i)}handleInvalid(){this.valid=false;if(this.customValidityMessage==undefined){this.customValidityMessage=this.inputField.validationMessage}}handleChange(){this.valueChange.emit(this.value);if(this.name!=undefined){var i=new FormData;i.append(this.name,this.value.toString());this.internals.setFormValue(i)}}shouldLabelFloat(){if(this.focused){return false}if(this.value!=undefined&&this.value!=""){return false}return true}findAverageSuggestionHeight(){const i=this.suggestionsContainer.querySelectorAll("li");var t=0;for(let e=0;e<i.length;e++){t+=i[e].clientHeight}return t/i.length}handleKeyDown(i){var t;if(i.key==="ArrowDown"){i.preventDefault();if(this.selectedIndex==undefined){this.selectedIndex=0}else{this.selectedIndex=Math.min(this.selectedIndex+1,this.suggestions.length-1)}}if(i.key==="ArrowUp"){i.preventDefault();if(this.selectedIndex==undefined){this.selectedIndex=this.suggestions.length-1}else{this.selectedIndex=Math.max(this.selectedIndex-1,0)}}this.value=((t=this.suggestions[this.selectedIndex])===null||t===void 0?void 0:t.value)||this.value;if(i.key==="Enter"){var e=this.suggestions[this.selectedIndex];this.value=e.value;this.inputField.value=e.label;this.itemSelected.emit(e.value);this.focused=false}if(i.key==="Tab"){this.focused=false}}selectItem(i,t){i.preventDefault();i.stopPropagation();this.selectedIndex=t;this.value=this.suggestions[this.selectedIndex].value;this.displayValue=this.suggestions[this.selectedIndex].label;this.inputField.value=this.displayValue;this.checkValidity();this.focused=false;this.itemSelected.emit(this.suggestions[this.selectedIndex].value)}getVirtualScrollHeight(){const i=this.findAverageSuggestionHeight();const t=this.totalSuggestions-this.suggestions.length;return i*t}handleDropdownClick(){this.handleSearchQueryChanged(this.value)}handleSuggestionsScroll(){const i=this.suggestionsContainer;const t=i.scrollTop;if(t>this.lastScrollTop){const e=i.querySelector(".loading");if(e==undefined){this.lastScrollTop=t;return}const s=e.offsetTop;const n=e.offsetHeight;const h=s+n;const o=t+i.clientHeight;if(o>h){i.scrollTop=h-i.clientHeight}this.checkIfMoreItemsNeeded()}this.lastScrollTop=t}checkIfMoreItemsNeeded(){const i=this.suggestionsContainer;const t=i.querySelector(".loading");if(t==undefined)return;const e=i.scrollTop+i.clientHeight;const s=t.offsetTop;if(s-e<this.preloadThresholdPixels){const i={searchTerm:this.inputField.value};this.needMoreItems.emit(i)}}handleBlur(){var i=this.inputField.checkValidity();this.valid=i;this.fieldset.setValidity(i,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}render(){var i;return e(s,{key:"e4721cc0e2110853787b552f1353c94d8483287b",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},e("dnn-fieldset",{key:"0881da2521817503d78f15cd1fd9b777654b108d",ref:i=>this.fieldset=i,invalid:!this.valid,focused:this.focused,label:`${(i=this.label)!==null&&i!==void 0?i:""}${this.required?" *":""}`,helpText:this.helpText,id:this.labelId,disabled:this.disabled,floatLabel:this.shouldLabelFloat()},e("div",{key:"ac5590e129b624f1ba1c012448897515017db086",class:"inner-container"},e("input",{key:"779f3a6e00dff6319b2d94c6bb903e9b495d1746",ref:i=>this.inputField=i,name:this.name,type:"search",role:"combobox","aria-haspopup":"listbox","aria-expanded":this.focused.toString(),"aria-activedescendant":this.selectedIndex!==undefined?`option-${this.selectedIndex}`:undefined,disabled:this.disabled,required:this.required,autoComplete:this.autocomplete,value:this.displayValue,onFocus:()=>{this.searchQueryChanged.emit(this.value||"");this.focused=true},onBlur:()=>this.handleBlur(),onInput:i=>this.handleInput(i),onInvalid:()=>this.handleInvalid(),onChange:()=>this.handleChange(),"aria-labelledby":this.labelId,onKeyDown:i=>this.handleKeyDown(i)}),e("ul",{key:"32448159bf989944d974bdba2ca42cf30f089272",class:this.focused&&this.suggestions.length>0?"show":"",role:"listbox",ref:i=>this.suggestionsContainer=i,onScroll:()=>this.handleSuggestionsScroll()},this.suggestions.map(((i,t)=>e("li",{id:`option-${t}`,role:"option","aria-selected":this.selectedIndex==t,class:this.selectedIndex==t?"selected":"",onClick:i=>this.selectItem(i,t)},this.renderSuggestion!=undefined?this.renderSuggestion(i):i.label))),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&e("div",{key:"d4bee8ab76bb9058740f1fb6a0faf06e9446f859",class:"loading"}),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&this.positionInitialized&&e("div",{key:"54539c1e08aa3cd521306a942df62835099f3560",style:{height:`${this.getVirtualScrollHeight()}px`}})),e("svg",{key:"43a4b159fcd84253003375dbf5cf95818539b410",onClick:()=>this.handleDropdownClick(),class:"chevron-down",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},e("path",{key:"c752ed998df5b38322b13f8636f172c645f2ca8a",d:"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z"})))))}static get formAssociated(){return true}get element(){return n(this)}static get watchers(){return{value:["handleValueChange"]}}};a([h(300)],d.prototype,"handleSearchQueryChanged",null);a([h(100)],d.prototype,"handleSuggestionsScroll",null);a([h()],d.prototype,"checkIfMoreItemsNeeded",null);d.style=r;export{d as dnn_autocomplete};
+//# sourceMappingURL=p-a9d8a942.entry.js.map

package/dist/dnn/p-a9d8a942.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dnnAutocompleteCss","DnnAutocompleteStyle0","DnnAutocomplete","this","adjustDropdownPosition","itemHeight","findAverageSuggestionHeight","requestAnimationFrame","positionInitialized","spaceBelow","window","innerHeight","inputField","getBoundingClientRect","bottom","rem","parseFloat","getComputedStyle","document","documentElement","fontSize","fitsDown","suggestionsContainer","style","top","maxHeight","checkIfMoreItemsNeeded","checkValidity","validity","fieldset","setValidity","validationMessage","setCustomValidity","message","undefined","valid","handleValueChange","newValue","displayValue","selectedIndex","suggestions","findIndex","s","value","handleClick","e","path","composedPath","includes","element","focused","componentDidRender","length","formResetCallback","internals","setFormValue","handleInput","inputValue","target","valueInput","emit","handleSearchQueryChanged","searchQueryChanged","handleInvalid","customValidityMessage","handleChange","valueChange","name","data","FormData","append","toString","shouldLabelFloat","suggestionItems","querySelectorAll","totalHeight","i","clientHeight","handleKeyDown","key","preventDefault","Math","min","max","_a","selectedItem","label","itemSelected","selectItem","index","stopPropagation","getVirtualScrollHeight","upcomingItems","totalSuggestions","handleDropdownClick","handleSuggestionsScroll","container","currentScrollTop","scrollTop","lastScrollTop","loadingDiv","querySelector","loadingDivPosition","offsetTop","loadingDivHeight","offsetHeight","loadingDivBottom","visibleBottom","scrollPosition","preloadThresholdPixels","eventArgs","searchTerm","needMoreItems","handleBlur","render","h","Host","tabIndex","onFocus","focus","onBlur","blur","ref","el","invalid","required","helpText","id","labelId","disabled","floatLabel","class","type","role","autoComplete","autocomplete","onInput","onInvalid","onChange","onKeyDown","onScroll","map","suggestion","onClick","renderSuggestion","height","xmlns","viewBox","d","__decorate","Debounce"],"sources":["src/components/dnn-autocomplete/dnn-autocomplete.scss?tag=dnn-autocomplete&encapsulation=shadow","src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  /** @prop --foreground-color: Defines the foreground color. */\n  --foreground-color: var(--dnn-color-foreground, #000);\n\n  /** @prop --background-color: Defines the background color. */\n  --background-color: var(--dnn-color-background, #fff);\n\n  /** @prop --focus-color: Defines the color when the component is focused. */\n  --focus-color: var(--dnn-color-primary, #3792ED);\n\n  /** @prop --danger-color: Defines the danger color used for invalid data. */\n  --danger-color: var(--dnn-color-danger, #900);\n\n  /** @prop --control-radius: Defines the radius for the control corners. */\n  --control-radius: var(--dnn-controls-radius, 3px);\n}\n\ndnn-fieldset{\n  width: 100%;\n}\n\n@keyframes shift {\n  0% {\n      background-position: 0% 0;\n  }\n  50% {\n      background-position: 100% 0;\n  }\n  100% {\n      background-position: 200% 0;\n  }\n}\n\n.inner-container{\n  display: flex;\n  justify-content: space-between;\n  position: relative;\n  width: 100%;\n\n  input {\n    border: none;\n    outline: none;\n    background-color: transparent;\n    color: var(--foreground-color);\n    text-align: var(--input-text-align);\n    width: 100%;\n  }\n\n  svg.chevron-down{\n    height: 1rem;\n    width: auto;\n    transform: scale(1.2);\n    cursor: pointer;\n  }\n\n  ul{\n    position: absolute;\n    border: 1px solid lightgray;\n    margin: 0;\n    padding: var(--dnn-controls-radius, 3px) 0;\n    overflow-y: auto;\n    width: 100%;\n    box-shadow: 2px 2px 6px 1px rgb(0 0 0 / 30%);\n    background-color: var(--dnn-color-background, white);\n    border-radius: var(--dnn-controls-radius, 3px);\n    z-index: 2;\n    display: none;\n    scroll-behavior: smooth;\n    &.show{\n      display: block;\n    }\n    li {\n      display: block;\n      list-style-type: none;\n      cursor: pointer;\n      padding: 0 0.5rem;\n      &.selected {\n        background-color: lightgray;\n      }\n      &:hover {\n        background-color: lightgray;\n      }\n    }\n    .loading {\n      width: 100%;\n      height: 0.5rem;\n      border-radius: 0.5rem;\n      background: linear-gradient(\n        to right,\n        var(--background-color) 0%,\n        var(--foreground-color) 50%,\n        var(--background-color) 100%);\n      background-size: 200% 100%;\n      animation: shift 2s linear infinite;\n      width: 75%;\n      margin: 0 auto;\n      opacity: 0.5;\n    }\n  }\n}\n","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen, Watch } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n  tag: 'dnn-autocomplete',\n  styleUrl: 'dnn-autocomplete.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n  /** The label for this autocomplete. */\n  @Prop() label: string;\n\n  /** The name for this autocomplete when used in forms. */\n  @Prop() name: string;\n\n  /** Defines the help label displayed under the field. */\n  @Prop() helpText: string;\n\n  /** Defines the value for this autocomplete */\n  @Prop({mutable: true, reflect: true}) value: string;\n\n  /** Defines whether the field requires having a value. */\n  @Prop() required: boolean;\n\n  /** Defines whether the field is disabled. */\n  @Prop() disabled: boolean;\n\n  /** Sets the list of suggestions. */\n  @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n  /** Callback to render suggestions, if not provided, only the label will be rendered. */\n  @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n  \n  /** The total amount of suggestions for the given search query.\n   * This can be used to show virtual scroll and pagination progressive feeding.\n   * The needMoreItems event should be used to request more items.\n   */\n  @Prop() totalSuggestions: number;\n \n  /** How many suggestions to preload in pixels of their height.\n  * This is used to calculate the virtual scroll height and request\n  * more items before they get into view.\n  */\n  @Prop() preloadThresholdPixels: number = 1000;\n\n  /** Defines the type of automatic completion the browser could use.\n  * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n  */\n  @Prop() autocomplete: string = \"off\";\n\n  @Element() element: HTMLDnnAutocompleteElement;\n\n  /** Fires when the value has changed and the user exits the input. */\n  @Event() valueChange: EventEmitter<number | string | string[]>;\n\n  /** Fires when the using is inputing data (on keystrokes). */\n  @Event() valueInput: EventEmitter<number | string | string[]>;\n\n  /** Fires when the component needs to display more items in the suggestions. */\n  @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n  /** Fires when the search query has changed.\n   * This is almost like valueInput, but it is debounced\n   * and can be used to trigger a search query without overloading\n   * API endpoints while typing.\n   */\n  @Event() searchQueryChanged: EventEmitter<string>;\n  \n  /** Fires when an item is selected. */\n  @Event() itemSelected: EventEmitter<string>;\n\n  /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n  @Method()\n  async checkValidity(): Promise<ValidityState> {\n    var validity = this.inputField.checkValidity();\n    if (!validity) {\n      this.fieldset.setValidity(false, this.inputField.validationMessage);\n    }\n    this.fieldset.setValidity(true, \"\");\n    return this.inputField.validity;\n  }\n  \n  /** Can be used to set a custom validity message. */\n  @Method()\n  async setCustomValidity(message: string): Promise<void> {\n    if (message == undefined || message == \"\") {\n      this.inputField.setCustomValidity(\"\");\n      this.valid = true;\n      this.fieldset.setValidity(true);\n      return;\n    }\n\n    this.inputField.setCustomValidity(message);\n    this.valid = false;\n    this.fieldset.setValidity(false, message);\n  }\n\n  @State() focused = false;\n  @State() valid = true;\n  @State() customValidityMessage: string;\n  @State() selectedIndex: number;\n  @State() positionInitialized = false;\n  @State() lastScrollTop = 0;\n  @State() displayValue: string = \"\";\n\n  @Watch(\"value\")\n  handleValueChange(newValue: string) {\n    this.displayValue = newValue;\n\n    // Find the index of the selected item\n    this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);\n  }\n  \n  /** attacth the internals for form validation */\n  @AttachInternals() internals: ElementInternals;\n  \n  /** Listener for mouse down event */\n  @Listen(\"click\", { target: \"document\", capture: false })\n  handleClick(e: MouseEvent) {\n    const path = e.composedPath();\n    if (!path.includes(this.element))\n    {\n      this.focused = false;\n    }\n  }\n  \n  componentDidRender(){\n    if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n      this.adjustDropdownPosition();\n    }\n  }\n\n  private inputField!: HTMLInputElement;\n  private suggestionsContainer: HTMLUListElement;\n  private labelId: string;\n  private fieldset: HTMLDnnFieldsetElement;\n  \n  // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n  formResetCallback() {\n    this.inputField.setCustomValidity(\"\");\n    this.valid = true;\n    this.value = \"\";\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n  \n  private handleInput(e: Event) {\n    const inputValue = (e.target as HTMLInputElement).value;\n    this.displayValue = inputValue;\n    this.value = inputValue;\n    var valid = this.inputField.checkValidity();\n    this.valid = valid;\n    this.valueInput.emit(inputValue);\n    this.handleSearchQueryChanged(inputValue);\n  }\n\n  @Debounce(300)\n  private handleSearchQueryChanged(value: string) {\n    this.searchQueryChanged.emit(value);\n  }\n\n  private handleInvalid(): void {\n    this.valid = false;\n    if (this.customValidityMessage == undefined) {\n      this.customValidityMessage = this.inputField.validationMessage;\n    }\n  }\n\n  private handleChange() {\n    this.valueChange.emit(this.value);\n    if (this.name != undefined) {\n      var data = new FormData();\n      data.append(this.name, this.value.toString());\n      this.internals.setFormValue(data);\n    }\n  }\n\n  /** Check if the label should float */\n  private shouldLabelFloat(): boolean {\n    if (this.focused) {\n      return false;\n    }\n\n    if (this.value != undefined && this.value != \"\") {\n      return false;\n    }\n\n    return true;\n  }\n\n  private findAverageSuggestionHeight(): number {\n    const suggestionItems = this.suggestionsContainer.querySelectorAll(\"li\");\n    var totalHeight = 0;\n    for (let i = 0; i < suggestionItems.length; i++) {\n      totalHeight += suggestionItems[i].clientHeight;\n    }\n    return totalHeight / suggestionItems.length;\n  }\n\n  private readonly adjustDropdownPosition = () => {\n    var itemHeight = this.findAverageSuggestionHeight();\n    requestAnimationFrame(() => {\n      this.positionInitialized = true;\n    });\n\n    // If we can fit 3 items below the input and there is still 3em left, we show the dropdown under.\n    // Otherwise, we show it above.\n    var spaceBelow = window.innerHeight - this.inputField.getBoundingClientRect().bottom;\n    const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);\n    const fitsDown = spaceBelow > 3 * itemHeight + 3 * rem;\n    if (fitsDown) {\n      this.suggestionsContainer.style.top = \"1.2rem\";\n    }\n    else {\n      this.suggestionsContainer.style.bottom = \"1.2rem\";\n    }\n\n    // Set the max height to not overflow the screen.\n    if (fitsDown){\n      this.suggestionsContainer.style.maxHeight = `${spaceBelow - 3 * rem}px`;\n    }\n    else {\n      this.suggestionsContainer.style.maxHeight = `${this.inputField.getBoundingClientRect().top - 3 * rem}px`;\n    }\n\n    this.checkIfMoreItemsNeeded();\n  }\n\n  private handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      if (this.selectedIndex == undefined) {\n        this.selectedIndex = 0;\n      } else {\n        this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n      }\n    }\n    if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      if (this.selectedIndex == undefined) {\n        this.selectedIndex = this.suggestions.length - 1;\n      } else {\n        this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n      }\n    }\n    this.value = this.suggestions[this.selectedIndex]?.value || this.value;\n    if (e.key === \"Enter\") {\n      var selectedItem = this.suggestions[this.selectedIndex];\n      this.value = selectedItem.value;\n      this.inputField.value = selectedItem.label;\n      this.itemSelected.emit(selectedItem.value);\n      this.focused = false;\n    }\n    if (e.key === \"Tab\"){\n      this.focused = false;\n    }\n  }\n\n  private selectItem(e: Event, index: number): void {\n    e.preventDefault();\n    e.stopPropagation();\n    this.selectedIndex = index;\n    this.value = this.suggestions[this.selectedIndex].value;\n    this.displayValue = this.suggestions[this.selectedIndex].label;\n    this.inputField.value = this.displayValue;\n    this.checkValidity();\n    this.focused = false;\n    this.itemSelected.emit(this.suggestions[this.selectedIndex].value)\n  }\n\n  private getVirtualScrollHeight(): number {\n    const itemHeight = this.findAverageSuggestionHeight();\n    const upcomingItems = this.totalSuggestions - this.suggestions.length;\n    return itemHeight * upcomingItems;\n  }\n\n  private handleDropdownClick(): void {\n    this.handleSearchQueryChanged(this.value);\n  }\n\n  @Debounce(100)\n  private handleSuggestionsScroll(): void {\n    const container = this.suggestionsContainer;\n    const currentScrollTop = container.scrollTop;\n\n    // Only act if we are scrolling down\n    if (currentScrollTop > this.lastScrollTop) {\n      const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n      if (loadingDiv == undefined) {\n        this.lastScrollTop = currentScrollTop;\n        return;\n      }\n\n      const loadingDivPosition = loadingDiv.offsetTop;\n      const loadingDivHeight = loadingDiv.offsetHeight;\n      const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n      // Calculate the visible bottom of the scroll container\n      const visibleBottom = currentScrollTop + container.clientHeight;\n\n      // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n      if (visibleBottom > loadingDivBottom) {\n        // Adjust scrollTop so it doesn't scroll past the loading div\n        container.scrollTop = loadingDivBottom - container.clientHeight;\n      }\n\n      // Check if more items are needed based on the position of the loading div\n      this.checkIfMoreItemsNeeded();\n    }\n\n    // Update the last scroll position\n    this.lastScrollTop = currentScrollTop;\n  }\n\n  @Debounce()\n  private checkIfMoreItemsNeeded() {\n    const container = this.suggestionsContainer;\n  \n    const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n    if (loadingDiv == undefined) return; // Exit if there's no loading div\n  \n    const scrollPosition = container.scrollTop + container.clientHeight;\n    const loadingDivPosition = loadingDiv.offsetTop;\n  \n    // Check if the loading div is within the threshold of becoming visible\n    if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n      const eventArgs: NeedMoreItemsEventArgs = {\n        searchTerm: this.inputField.value,\n      };\n      this.needMoreItems.emit(eventArgs);\n    }\n  }\n\n  handleBlur(): void {\n    var validity = this.inputField.checkValidity();\n    this.valid = validity;\n    this.fieldset.setValidity(validity, this.inputField.validationMessage);\n    this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n  }\n\n  render() {\n    return (\n      <Host\n        tabIndex={this.focused ? -1 : 0}\n        onFocus={() => this.inputField.focus()}\n        onBlur={() => this.inputField.blur()}\n      >\n        <dnn-fieldset\n          ref={el => this.fieldset = el}\n          invalid={!this.valid}\n          focused={this.focused}\n          label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n          helpText={this.helpText}\n          id={this.labelId}\n          disabled={this.disabled}\n          floatLabel={this.shouldLabelFloat()}\n        >\n          <div class=\"inner-container\">\n            <input\n              ref={(el) => this.inputField = el}\n              name={this.name}\n              type=\"search\"\n              role=\"combobox\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={this.focused.toString()}\n              aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n              disabled={this.disabled}\n              required={this.required}\n              autoComplete={this.autocomplete}\n              value={this.displayValue}\n              onFocus={() => {\n                this.searchQueryChanged.emit(this.value || \"\");\n                this.focused = true;\n              }}\n              onBlur={() => this.handleBlur()}\n              onInput={e => this.handleInput(e)}\n              onInvalid={() => this.handleInvalid()}\n              onChange={() => this.handleChange()}\n              aria-labelledby={this.labelId}\n              onKeyDown={e => this.handleKeyDown(e)}\n            />\n            <ul\n              class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n              role=\"listbox\"\n              ref={el => this.suggestionsContainer = el}\n              onScroll={() => this.handleSuggestionsScroll()}\n            >\n              {this.suggestions.map((suggestion, index) => (\n                <li\n                  id={`option-${index}`}\n                  role=\"option\"\n                  aria-selected={this.selectedIndex == index}\n                  class={this.selectedIndex == index ? \"selected\" : \"\"}\n                  onClick={e => this.selectItem(e, index)}\n                >\n                  {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n                </li>\n              ))}\n              {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n                <div class=\"loading\">\n                </div>\n              }\n              {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n                <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n                </div>\n              }\n            </ul>\n            <svg\n              onClick={() => this.handleDropdownClick()}\n              class=\"chevron-down\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 -960 960 960\">\n              <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n            </svg>\n          </div>\n        </dnn-fieldset>\n      </Host>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

package/dist/esm/dnn-autocomplete.entry.js

@@ -94,6 +94,11 @@ const DnnAutocomplete = class {
         this.valid = false;
         this.fieldset.setValidity(false, message);
     }
+    handleValueChange(newValue) {
+        this.displayValue = newValue;
+        // Find the index of the selected item
+        this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);
+    }
     /** Listener for mouse down event */
     handleClick(e) {
         const path = e.composedPath();
@@ -258,15 +263,18 @@ const DnnAutocomplete = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '10a0264ebae498078dbfc3fbd6ffa1a2a1b50c0e', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("dnn-fieldset", { key: '8f2426b397ba4001ed65255f58878176441950dc', 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: 'fad1d2e8567163f4dcea423fe71eacc157fcc350', class: "inner-container" }, h("input", { key: 'bffb6ee3cbee67db6e280f29092ead301e75f8e8', 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: () => {
+        return (h(Host, { key: 'e4721cc0e2110853787b552f1353c94d8483287b', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("dnn-fieldset", { key: '0881da2521817503d78f15cd1fd9b777654b108d', ref: el => this.fieldset = el, invalid: !this.valid, focused: this.focused, label: `${(_a = this.label) !== null && _a !== void 0 ? _a : ""}${this.required ? " *" : ""}`, helpText: this.helpText, id: this.labelId, disabled: this.disabled, floatLabel: this.shouldLabelFloat() }, h("div", { key: 'ac5590e129b624f1ba1c012448897515017db086', class: "inner-container" }, h("input", { key: '779f3a6e00dff6319b2d94c6bb903e9b495d1746', ref: (el) => this.inputField = el, name: this.name, type: "search", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.focused.toString(), "aria-activedescendant": this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined, disabled: this.disabled, required: this.required, autoComplete: this.autocomplete, value: this.displayValue, onFocus: () => {
                 this.searchQueryChanged.emit(this.value || "");
                 this.focused = true;
-            }, onBlur: () => this.handleBlur(), onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId, onKeyDown: e => this.handleKeyDown(e) }), h("ul", { key: '1cffdc6b12d2337cc89448fd232ca453700e655d', 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 &&
-            h("div", { key: '2a7bd6440f9d71a11aa44a4ed2ce444c6efced35', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
-            h("div", { key: '2c7b5655893711bb51fffb97f911308ac6d144ed', style: { height: `${this.getVirtualScrollHeight()}px` } })), h("svg", { key: '55452717a72e3d597bb40ed934db19dbb8ddfd6f', onClick: () => this.handleDropdownClick(), class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: 'e26905040e49403c2bd55c893858eefa4d4d470a', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
+            }, onBlur: () => this.handleBlur(), onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId, onKeyDown: e => this.handleKeyDown(e) }), h("ul", { key: '32448159bf989944d974bdba2ca42cf30f089272', class: this.focused && this.suggestions.length > 0 ? "show" : "", role: "listbox", ref: el => this.suggestionsContainer = el, onScroll: () => this.handleSuggestionsScroll() }, this.suggestions.map((suggestion, index) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": this.selectedIndex == index, class: this.selectedIndex == index ? "selected" : "", onClick: e => this.selectItem(e, index) }, this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label))), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&
+            h("div", { key: 'd4bee8ab76bb9058740f1fb6a0faf06e9446f859', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
+            h("div", { key: '54539c1e08aa3cd521306a942df62835099f3560', style: { height: `${this.getVirtualScrollHeight()}px` } })), h("svg", { key: '43a4b159fcd84253003375dbf5cf95818539b410', onClick: () => this.handleDropdownClick(), class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: 'c752ed998df5b38322b13f8636f172c645f2ca8a', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
     }
     static get formAssociated() { return true; }
     get element() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
 };
 __decorate([
     Debounce(300)

package/dist/esm/dnn-autocomplete.entry.js.map

@@ -1 +1 @@
-{"file":"dnn-autocomplete.entry.js","mappings":"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","names":[],"sources":["src/components/dnn-autocomplete/dnn-autocomplete.scss?tag=dnn-autocomplete&encapsulation=shadow","src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  /** @prop --foreground-color: Defines the foreground color. */\n  --foreground-color: var(--dnn-color-foreground, #000);\n\n  /** @prop --background-color: Defines the background color. */\n  --background-color: var(--dnn-color-background, #fff);\n\n  /** @prop --focus-color: Defines the color when the component is focused. */\n  --focus-color: var(--dnn-color-primary, #3792ED);\n\n  /** @prop --danger-color: Defines the danger color used for invalid data. */\n  --danger-color: var(--dnn-color-danger, #900);\n\n  /** @prop --control-radius: Defines the radius for the control corners. */\n  --control-radius: var(--dnn-controls-radius, 3px);\n}\n\ndnn-fieldset{\n  width: 100%;\n}\n\n@keyframes shift {\n  0% {\n      background-position: 0% 0;\n  }\n  50% {\n      background-position: 100% 0;\n  }\n  100% {\n      background-position: 200% 0;\n  }\n}\n\n.inner-container{\n  display: flex;\n  justify-content: space-between;\n  position: relative;\n  width: 100%;\n\n  input {\n    border: none;\n    outline: none;\n    background-color: transparent;\n    color: var(--foreground-color);\n    text-align: var(--input-text-align);\n    width: 100%;\n  }\n\n  svg.chevron-down{\n    height: 1rem;\n    width: auto;\n    transform: scale(1.2);\n    cursor: pointer;\n  }\n\n  ul{\n    position: absolute;\n    border: 1px solid lightgray;\n    margin: 0;\n    padding: var(--dnn-controls-radius, 3px) 0;\n    overflow-y: auto;\n    width: 100%;\n    box-shadow: 2px 2px 6px 1px rgb(0 0 0 / 30%);\n    background-color: var(--dnn-color-background, white);\n    border-radius: var(--dnn-controls-radius, 3px);\n    z-index: 2;\n    display: none;\n    scroll-behavior: smooth;\n    &.show{\n      display: block;\n    }\n    li {\n      display: block;\n      list-style-type: none;\n      cursor: pointer;\n      padding: 0 0.5rem;\n      &.selected {\n        background-color: lightgray;\n      }\n      &:hover {\n        background-color: lightgray;\n      }\n    }\n    .loading {\n      width: 100%;\n      height: 0.5rem;\n      border-radius: 0.5rem;\n      background: linear-gradient(\n        to right,\n        var(--background-color) 0%,\n        var(--foreground-color) 50%,\n        var(--background-color) 100%);\n      background-size: 200% 100%;\n      animation: shift 2s linear infinite;\n      width: 75%;\n      margin: 0 auto;\n      opacity: 0.5;\n    }\n  }\n}\n","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n  tag: 'dnn-autocomplete',\n  styleUrl: 'dnn-autocomplete.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n  /** The label for this autocomplete. */\n  @Prop() label: string;\n\n  /** The name for this autocomplete when used in forms. */\n  @Prop() name: string;\n\n  /** Defines the help label displayed under the field. */\n  @Prop() helpText: string;\n\n  /** Defines the value for this autocomplete */\n  @Prop({mutable: true, reflect: true}) value: string;\n\n  /** Defines whether the field requires having a value. */\n  @Prop() required: boolean;\n\n  /** Defines whether the field is disabled. */\n  @Prop() disabled: boolean;\n\n  /** Sets the list of suggestions. */\n  @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n  /** Callback to render suggestions, if not provided, only the label will be rendered. */\n  @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n  \n  /** The total amount of suggestions for the given search query.\n   * This can be used to show virtual scroll and pagination progressive feeding.\n   * The needMoreItems event should be used to request more items.\n   */\n  @Prop() totalSuggestions: number;\n \n  /** How many suggestions to preload in pixels of their height.\n  * This is used to calculate the virtual scroll height and request\n  * more items before they get into view.\n  */\n  @Prop() preloadThresholdPixels: number = 1000;\n\n  /** Defines the type of automatic completion the browser could use.\n  * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n  */\n  @Prop() autocomplete: string = \"off\";\n\n  @Element() element: HTMLDnnAutocompleteElement;\n\n  /** Fires when the value has changed and the user exits the input. */\n  @Event() valueChange: EventEmitter<number | string | string[]>;\n\n  /** Fires when the using is inputing data (on keystrokes). */\n  @Event() valueInput: EventEmitter<number | string | string[]>;\n\n  /** Fires when the component needs to display more items in the suggestions. */\n  @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n  /** Fires when the search query has changed.\n   * This is almost like valueInput, but it is debounced\n   * and can be used to trigger a search query without overloading\n   * API endpoints while typing.\n   */\n  @Event() searchQueryChanged: EventEmitter<string>;\n  \n  /** Fires when an item is selected. */\n  @Event() itemSelected: EventEmitter<string>;\n\n  /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n  @Method()\n  async checkValidity(): Promise<ValidityState> {\n    var validity = this.inputField.checkValidity();\n    if (!validity) {\n      this.fieldset.setValidity(false, this.inputField.validationMessage);\n    }\n    this.fieldset.setValidity(true, \"\");\n    return this.inputField.validity;\n  }\n  \n  /** Can be used to set a custom validity message. */\n  @Method()\n  async setCustomValidity(message: string): Promise<void> {\n    if (message == undefined || message == \"\") {\n      this.inputField.setCustomValidity(\"\");\n      this.valid = true;\n      this.fieldset.setValidity(true);\n      return;\n    }\n\n    this.inputField.setCustomValidity(message);\n    this.valid = false;\n    this.fieldset.setValidity(false, message);\n  }\n\n  @State() focused = false;\n  @State() valid = true;\n  @State() customValidityMessage: string;\n  @State() selectedIndex: number;\n  @State() positionInitialized = false;\n  @State() lastScrollTop = 0;\n  @State() displayValue: string = \"\";\n  \n  /** attacth the internals for form validation */\n  @AttachInternals() internals: ElementInternals;\n  \n  /** Listener for mouse down event */\n  @Listen(\"click\", { target: \"document\", capture: false })\n  handleClick(e: MouseEvent) {\n    const path = e.composedPath();\n    if (!path.includes(this.element))\n    {\n      this.focused = false;\n    }\n  }\n  \n  componentDidRender(){\n    if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n      this.adjustDropdownPosition();\n    }\n  }\n\n  private inputField!: HTMLInputElement;\n  private suggestionsContainer: HTMLUListElement;\n  private labelId: string;\n  private fieldset: HTMLDnnFieldsetElement;\n  \n  // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n  formResetCallback() {\n    this.inputField.setCustomValidity(\"\");\n    this.valid = true;\n    this.value = \"\";\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n  \n  private handleInput(e: Event) {\n    const inputValue = (e.target as HTMLInputElement).value;\n    this.displayValue = inputValue;\n    this.value = inputValue;\n    var valid = this.inputField.checkValidity();\n    this.valid = valid;\n    this.valueInput.emit(inputValue);\n    this.handleSearchQueryChanged(inputValue);\n  }\n\n  @Debounce(300)\n  private handleSearchQueryChanged(value: string) {\n    this.searchQueryChanged.emit(value);\n  }\n\n  private handleInvalid(): void {\n    this.valid = false;\n    if (this.customValidityMessage == undefined) {\n      this.customValidityMessage = this.inputField.validationMessage;\n    }\n  }\n\n  private handleChange() {\n    this.valueChange.emit(this.value);\n    if (this.name != undefined) {\n      var data = new FormData();\n      data.append(this.name, this.value.toString());\n      this.internals.setFormValue(data);\n    }\n  }\n\n  /** Check if the label should float */\n  private shouldLabelFloat(): boolean {\n    if (this.focused) {\n      return false;\n    }\n\n    if (this.value != undefined && this.value != \"\") {\n      return false;\n    }\n\n    return true;\n  }\n\n  private findAverageSuggestionHeight(): number {\n    const suggestionItems = this.suggestionsContainer.querySelectorAll(\"li\");\n    var totalHeight = 0;\n    for (let i = 0; i < suggestionItems.length; i++) {\n      totalHeight += suggestionItems[i].clientHeight;\n    }\n    return totalHeight / suggestionItems.length;\n  }\n\n  private readonly adjustDropdownPosition = () => {\n    var itemHeight = this.findAverageSuggestionHeight();\n    requestAnimationFrame(() => {\n      this.positionInitialized = true;\n    });\n\n    // If we can fit 3 items below the input and there is still 3em left, we show the dropdown under.\n    // Otherwise, we show it above.\n    var spaceBelow = window.innerHeight - this.inputField.getBoundingClientRect().bottom;\n    const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);\n    const fitsDown = spaceBelow > 3 * itemHeight + 3 * rem;\n    if (fitsDown) {\n      this.suggestionsContainer.style.top = \"1.2rem\";\n    }\n    else {\n      this.suggestionsContainer.style.bottom = \"1.2rem\";\n    }\n\n    // Set the max height to not overflow the screen.\n    if (fitsDown){\n      this.suggestionsContainer.style.maxHeight = `${spaceBelow - 3 * rem}px`;\n    }\n    else {\n      this.suggestionsContainer.style.maxHeight = `${this.inputField.getBoundingClientRect().top - 3 * rem}px`;\n    }\n\n    this.checkIfMoreItemsNeeded();\n  }\n\n  private handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      if (this.selectedIndex == undefined) {\n        this.selectedIndex = 0;\n      } else {\n        this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n      }\n    }\n    if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      if (this.selectedIndex == undefined) {\n        this.selectedIndex = this.suggestions.length - 1;\n      } else {\n        this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n      }\n    }\n    this.value = this.suggestions[this.selectedIndex]?.value || this.value;\n    if (e.key === \"Enter\") {\n      var selectedItem = this.suggestions[this.selectedIndex];\n      this.value = selectedItem.value;\n      this.inputField.value = selectedItem.label;\n      this.itemSelected.emit(selectedItem.value);\n      this.focused = false;\n    }\n    if (e.key === \"Tab\"){\n      this.focused = false;\n    }\n  }\n\n  private selectItem(e: Event, index: number): void {\n    e.preventDefault();\n    e.stopPropagation();\n    this.selectedIndex = index;\n    this.value = this.suggestions[this.selectedIndex].value;\n    this.displayValue = this.suggestions[this.selectedIndex].label;\n    this.inputField.value = this.displayValue;\n    this.checkValidity();\n    this.focused = false;\n    this.itemSelected.emit(this.suggestions[this.selectedIndex].value)\n  }\n\n  private getVirtualScrollHeight(): number {\n    const itemHeight = this.findAverageSuggestionHeight();\n    const upcomingItems = this.totalSuggestions - this.suggestions.length;\n    return itemHeight * upcomingItems;\n  }\n\n  private handleDropdownClick(): void {\n    this.handleSearchQueryChanged(this.value);\n  }\n\n  @Debounce(100)\n  private handleSuggestionsScroll(): void {\n    const container = this.suggestionsContainer;\n    const currentScrollTop = container.scrollTop;\n\n    // Only act if we are scrolling down\n    if (currentScrollTop > this.lastScrollTop) {\n      const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n      if (loadingDiv == undefined) {\n        this.lastScrollTop = currentScrollTop;\n        return;\n      }\n\n      const loadingDivPosition = loadingDiv.offsetTop;\n      const loadingDivHeight = loadingDiv.offsetHeight;\n      const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n      // Calculate the visible bottom of the scroll container\n      const visibleBottom = currentScrollTop + container.clientHeight;\n\n      // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n      if (visibleBottom > loadingDivBottom) {\n        // Adjust scrollTop so it doesn't scroll past the loading div\n        container.scrollTop = loadingDivBottom - container.clientHeight;\n      }\n\n      // Check if more items are needed based on the position of the loading div\n      this.checkIfMoreItemsNeeded();\n    }\n\n    // Update the last scroll position\n    this.lastScrollTop = currentScrollTop;\n  }\n\n  @Debounce()\n  private checkIfMoreItemsNeeded() {\n    const container = this.suggestionsContainer;\n  \n    const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n    if (loadingDiv == undefined) return; // Exit if there's no loading div\n  \n    const scrollPosition = container.scrollTop + container.clientHeight;\n    const loadingDivPosition = loadingDiv.offsetTop;\n  \n    // Check if the loading div is within the threshold of becoming visible\n    if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n      const eventArgs: NeedMoreItemsEventArgs = {\n        searchTerm: this.inputField.value,\n      };\n      this.needMoreItems.emit(eventArgs);\n    }\n  }\n\n  handleBlur(): void {\n    var validity = this.inputField.checkValidity();\n    this.valid = validity;\n    this.fieldset.setValidity(validity, this.inputField.validationMessage);\n    this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n  }\n\n  render() {\n    return (\n      <Host\n        tabIndex={this.focused ? -1 : 0}\n        onFocus={() => this.inputField.focus()}\n        onBlur={() => this.inputField.blur()}\n      >\n        <dnn-fieldset\n          ref={el => this.fieldset = el}\n          invalid={!this.valid}\n          focused={this.focused}\n          label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n          helpText={this.helpText}\n          id={this.labelId}\n          disabled={this.disabled}\n          floatLabel={this.shouldLabelFloat()}\n        >\n          <div class=\"inner-container\">\n            <input\n              ref={(el) => this.inputField = el}\n              name={this.name}\n              type=\"search\"\n              role=\"combobox\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={this.focused.toString()}\n              aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n              disabled={this.disabled}\n              required={this.required}\n              autoComplete={this.autocomplete}\n              value={this.displayValue}\n              onFocus={() => {\n                this.searchQueryChanged.emit(this.value || \"\");\n                this.focused = true;\n              }}\n              onBlur={() => this.handleBlur()}\n              onInput={e => this.handleInput(e)}\n              onInvalid={() => this.handleInvalid()}\n              onChange={() => this.handleChange()}\n              aria-labelledby={this.labelId}\n              onKeyDown={e => this.handleKeyDown(e)}\n            />\n            <ul\n              class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n              role=\"listbox\"\n              ref={el => this.suggestionsContainer = el}\n              onScroll={() => this.handleSuggestionsScroll()}\n            >\n              {this.suggestions.map((suggestion, index) => (\n                <li\n                  id={`option-${index}`}\n                  role=\"option\"\n                  aria-selected={this.selectedIndex == index}\n                  class={this.selectedIndex == index ? \"selected\" : \"\"}\n                  onClick={e => this.selectItem(e, index)}\n                >\n                  {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n                </li>\n              ))}\n              {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n                <div class=\"loading\">\n                </div>\n              }\n              {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n                <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n                </div>\n              }\n            </ul>\n            <svg\n              onClick={() => this.handleDropdownClick()}\n              class=\"chevron-down\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 -960 960 960\">\n              <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n            </svg>\n          </div>\n        </dnn-fieldset>\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"dnn-autocomplete.entry.js","mappings":"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","names":[],"sources":["src/components/dnn-autocomplete/dnn-autocomplete.scss?tag=dnn-autocomplete&encapsulation=shadow","src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  /** @prop --foreground-color: Defines the foreground color. */\n  --foreground-color: var(--dnn-color-foreground, #000);\n\n  /** @prop --background-color: Defines the background color. */\n  --background-color: var(--dnn-color-background, #fff);\n\n  /** @prop --focus-color: Defines the color when the component is focused. */\n  --focus-color: var(--dnn-color-primary, #3792ED);\n\n  /** @prop --danger-color: Defines the danger color used for invalid data. */\n  --danger-color: var(--dnn-color-danger, #900);\n\n  /** @prop --control-radius: Defines the radius for the control corners. */\n  --control-radius: var(--dnn-controls-radius, 3px);\n}\n\ndnn-fieldset{\n  width: 100%;\n}\n\n@keyframes shift {\n  0% {\n      background-position: 0% 0;\n  }\n  50% {\n      background-position: 100% 0;\n  }\n  100% {\n      background-position: 200% 0;\n  }\n}\n\n.inner-container{\n  display: flex;\n  justify-content: space-between;\n  position: relative;\n  width: 100%;\n\n  input {\n    border: none;\n    outline: none;\n    background-color: transparent;\n    color: var(--foreground-color);\n    text-align: var(--input-text-align);\n    width: 100%;\n  }\n\n  svg.chevron-down{\n    height: 1rem;\n    width: auto;\n    transform: scale(1.2);\n    cursor: pointer;\n  }\n\n  ul{\n    position: absolute;\n    border: 1px solid lightgray;\n    margin: 0;\n    padding: var(--dnn-controls-radius, 3px) 0;\n    overflow-y: auto;\n    width: 100%;\n    box-shadow: 2px 2px 6px 1px rgb(0 0 0 / 30%);\n    background-color: var(--dnn-color-background, white);\n    border-radius: var(--dnn-controls-radius, 3px);\n    z-index: 2;\n    display: none;\n    scroll-behavior: smooth;\n    &.show{\n      display: block;\n    }\n    li {\n      display: block;\n      list-style-type: none;\n      cursor: pointer;\n      padding: 0 0.5rem;\n      &.selected {\n        background-color: lightgray;\n      }\n      &:hover {\n        background-color: lightgray;\n      }\n    }\n    .loading {\n      width: 100%;\n      height: 0.5rem;\n      border-radius: 0.5rem;\n      background: linear-gradient(\n        to right,\n        var(--background-color) 0%,\n        var(--foreground-color) 50%,\n        var(--background-color) 100%);\n      background-size: 200% 100%;\n      animation: shift 2s linear infinite;\n      width: 75%;\n      margin: 0 auto;\n      opacity: 0.5;\n    }\n  }\n}\n","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen, Watch } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n  tag: 'dnn-autocomplete',\n  styleUrl: 'dnn-autocomplete.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n  /** The label for this autocomplete. */\n  @Prop() label: string;\n\n  /** The name for this autocomplete when used in forms. */\n  @Prop() name: string;\n\n  /** Defines the help label displayed under the field. */\n  @Prop() helpText: string;\n\n  /** Defines the value for this autocomplete */\n  @Prop({mutable: true, reflect: true}) value: string;\n\n  /** Defines whether the field requires having a value. */\n  @Prop() required: boolean;\n\n  /** Defines whether the field is disabled. */\n  @Prop() disabled: boolean;\n\n  /** Sets the list of suggestions. */\n  @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n  /** Callback to render suggestions, if not provided, only the label will be rendered. */\n  @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n  \n  /** The total amount of suggestions for the given search query.\n   * This can be used to show virtual scroll and pagination progressive feeding.\n   * The needMoreItems event should be used to request more items.\n   */\n  @Prop() totalSuggestions: number;\n \n  /** How many suggestions to preload in pixels of their height.\n  * This is used to calculate the virtual scroll height and request\n  * more items before they get into view.\n  */\n  @Prop() preloadThresholdPixels: number = 1000;\n\n  /** Defines the type of automatic completion the browser could use.\n  * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n  */\n  @Prop() autocomplete: string = \"off\";\n\n  @Element() element: HTMLDnnAutocompleteElement;\n\n  /** Fires when the value has changed and the user exits the input. */\n  @Event() valueChange: EventEmitter<number | string | string[]>;\n\n  /** Fires when the using is inputing data (on keystrokes). */\n  @Event() valueInput: EventEmitter<number | string | string[]>;\n\n  /** Fires when the component needs to display more items in the suggestions. */\n  @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n  /** Fires when the search query has changed.\n   * This is almost like valueInput, but it is debounced\n   * and can be used to trigger a search query without overloading\n   * API endpoints while typing.\n   */\n  @Event() searchQueryChanged: EventEmitter<string>;\n  \n  /** Fires when an item is selected. */\n  @Event() itemSelected: EventEmitter<string>;\n\n  /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n  @Method()\n  async checkValidity(): Promise<ValidityState> {\n    var validity = this.inputField.checkValidity();\n    if (!validity) {\n      this.fieldset.setValidity(false, this.inputField.validationMessage);\n    }\n    this.fieldset.setValidity(true, \"\");\n    return this.inputField.validity;\n  }\n  \n  /** Can be used to set a custom validity message. */\n  @Method()\n  async setCustomValidity(message: string): Promise<void> {\n    if (message == undefined || message == \"\") {\n      this.inputField.setCustomValidity(\"\");\n      this.valid = true;\n      this.fieldset.setValidity(true);\n      return;\n    }\n\n    this.inputField.setCustomValidity(message);\n    this.valid = false;\n    this.fieldset.setValidity(false, message);\n  }\n\n  @State() focused = false;\n  @State() valid = true;\n  @State() customValidityMessage: string;\n  @State() selectedIndex: number;\n  @State() positionInitialized = false;\n  @State() lastScrollTop = 0;\n  @State() displayValue: string = \"\";\n\n  @Watch(\"value\")\n  handleValueChange(newValue: string) {\n    this.displayValue = newValue;\n\n    // Find the index of the selected item\n    this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);\n  }\n  \n  /** attacth the internals for form validation */\n  @AttachInternals() internals: ElementInternals;\n  \n  /** Listener for mouse down event */\n  @Listen(\"click\", { target: \"document\", capture: false })\n  handleClick(e: MouseEvent) {\n    const path = e.composedPath();\n    if (!path.includes(this.element))\n    {\n      this.focused = false;\n    }\n  }\n  \n  componentDidRender(){\n    if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n      this.adjustDropdownPosition();\n    }\n  }\n\n  private inputField!: HTMLInputElement;\n  private suggestionsContainer: HTMLUListElement;\n  private labelId: string;\n  private fieldset: HTMLDnnFieldsetElement;\n  \n  // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n  formResetCallback() {\n    this.inputField.setCustomValidity(\"\");\n    this.valid = true;\n    this.value = \"\";\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n  \n  private handleInput(e: Event) {\n    const inputValue = (e.target as HTMLInputElement).value;\n    this.displayValue = inputValue;\n    this.value = inputValue;\n    var valid = this.inputField.checkValidity();\n    this.valid = valid;\n    this.valueInput.emit(inputValue);\n    this.handleSearchQueryChanged(inputValue);\n  }\n\n  @Debounce(300)\n  private handleSearchQueryChanged(value: string) {\n    this.searchQueryChanged.emit(value);\n  }\n\n  private handleInvalid(): void {\n    this.valid = false;\n    if (this.customValidityMessage == undefined) {\n      this.customValidityMessage = this.inputField.validationMessage;\n    }\n  }\n\n  private handleChange() {\n    this.valueChange.emit(this.value);\n    if (this.name != undefined) {\n      var data = new FormData();\n      data.append(this.name, this.value.toString());\n      this.internals.setFormValue(data);\n    }\n  }\n\n  /** Check if the label should float */\n  private shouldLabelFloat(): boolean {\n    if (this.focused) {\n      return false;\n    }\n\n    if (this.value != undefined && this.value != \"\") {\n      return false;\n    }\n\n    return true;\n  }\n\n  private findAverageSuggestionHeight(): number {\n    const suggestionItems = this.suggestionsContainer.querySelectorAll(\"li\");\n    var totalHeight = 0;\n    for (let i = 0; i < suggestionItems.length; i++) {\n      totalHeight += suggestionItems[i].clientHeight;\n    }\n    return totalHeight / suggestionItems.length;\n  }\n\n  private readonly adjustDropdownPosition = () => {\n    var itemHeight = this.findAverageSuggestionHeight();\n    requestAnimationFrame(() => {\n      this.positionInitialized = true;\n    });\n\n    // If we can fit 3 items below the input and there is still 3em left, we show the dropdown under.\n    // Otherwise, we show it above.\n    var spaceBelow = window.innerHeight - this.inputField.getBoundingClientRect().bottom;\n    const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);\n    const fitsDown = spaceBelow > 3 * itemHeight + 3 * rem;\n    if (fitsDown) {\n      this.suggestionsContainer.style.top = \"1.2rem\";\n    }\n    else {\n      this.suggestionsContainer.style.bottom = \"1.2rem\";\n    }\n\n    // Set the max height to not overflow the screen.\n    if (fitsDown){\n      this.suggestionsContainer.style.maxHeight = `${spaceBelow - 3 * rem}px`;\n    }\n    else {\n      this.suggestionsContainer.style.maxHeight = `${this.inputField.getBoundingClientRect().top - 3 * rem}px`;\n    }\n\n    this.checkIfMoreItemsNeeded();\n  }\n\n  private handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      if (this.selectedIndex == undefined) {\n        this.selectedIndex = 0;\n      } else {\n        this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n      }\n    }\n    if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      if (this.selectedIndex == undefined) {\n        this.selectedIndex = this.suggestions.length - 1;\n      } else {\n        this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n      }\n    }\n    this.value = this.suggestions[this.selectedIndex]?.value || this.value;\n    if (e.key === \"Enter\") {\n      var selectedItem = this.suggestions[this.selectedIndex];\n      this.value = selectedItem.value;\n      this.inputField.value = selectedItem.label;\n      this.itemSelected.emit(selectedItem.value);\n      this.focused = false;\n    }\n    if (e.key === \"Tab\"){\n      this.focused = false;\n    }\n  }\n\n  private selectItem(e: Event, index: number): void {\n    e.preventDefault();\n    e.stopPropagation();\n    this.selectedIndex = index;\n    this.value = this.suggestions[this.selectedIndex].value;\n    this.displayValue = this.suggestions[this.selectedIndex].label;\n    this.inputField.value = this.displayValue;\n    this.checkValidity();\n    this.focused = false;\n    this.itemSelected.emit(this.suggestions[this.selectedIndex].value)\n  }\n\n  private getVirtualScrollHeight(): number {\n    const itemHeight = this.findAverageSuggestionHeight();\n    const upcomingItems = this.totalSuggestions - this.suggestions.length;\n    return itemHeight * upcomingItems;\n  }\n\n  private handleDropdownClick(): void {\n    this.handleSearchQueryChanged(this.value);\n  }\n\n  @Debounce(100)\n  private handleSuggestionsScroll(): void {\n    const container = this.suggestionsContainer;\n    const currentScrollTop = container.scrollTop;\n\n    // Only act if we are scrolling down\n    if (currentScrollTop > this.lastScrollTop) {\n      const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n      if (loadingDiv == undefined) {\n        this.lastScrollTop = currentScrollTop;\n        return;\n      }\n\n      const loadingDivPosition = loadingDiv.offsetTop;\n      const loadingDivHeight = loadingDiv.offsetHeight;\n      const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n      // Calculate the visible bottom of the scroll container\n      const visibleBottom = currentScrollTop + container.clientHeight;\n\n      // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n      if (visibleBottom > loadingDivBottom) {\n        // Adjust scrollTop so it doesn't scroll past the loading div\n        container.scrollTop = loadingDivBottom - container.clientHeight;\n      }\n\n      // Check if more items are needed based on the position of the loading div\n      this.checkIfMoreItemsNeeded();\n    }\n\n    // Update the last scroll position\n    this.lastScrollTop = currentScrollTop;\n  }\n\n  @Debounce()\n  private checkIfMoreItemsNeeded() {\n    const container = this.suggestionsContainer;\n  \n    const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n    if (loadingDiv == undefined) return; // Exit if there's no loading div\n  \n    const scrollPosition = container.scrollTop + container.clientHeight;\n    const loadingDivPosition = loadingDiv.offsetTop;\n  \n    // Check if the loading div is within the threshold of becoming visible\n    if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n      const eventArgs: NeedMoreItemsEventArgs = {\n        searchTerm: this.inputField.value,\n      };\n      this.needMoreItems.emit(eventArgs);\n    }\n  }\n\n  handleBlur(): void {\n    var validity = this.inputField.checkValidity();\n    this.valid = validity;\n    this.fieldset.setValidity(validity, this.inputField.validationMessage);\n    this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n  }\n\n  render() {\n    return (\n      <Host\n        tabIndex={this.focused ? -1 : 0}\n        onFocus={() => this.inputField.focus()}\n        onBlur={() => this.inputField.blur()}\n      >\n        <dnn-fieldset\n          ref={el => this.fieldset = el}\n          invalid={!this.valid}\n          focused={this.focused}\n          label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n          helpText={this.helpText}\n          id={this.labelId}\n          disabled={this.disabled}\n          floatLabel={this.shouldLabelFloat()}\n        >\n          <div class=\"inner-container\">\n            <input\n              ref={(el) => this.inputField = el}\n              name={this.name}\n              type=\"search\"\n              role=\"combobox\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={this.focused.toString()}\n              aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n              disabled={this.disabled}\n              required={this.required}\n              autoComplete={this.autocomplete}\n              value={this.displayValue}\n              onFocus={() => {\n                this.searchQueryChanged.emit(this.value || \"\");\n                this.focused = true;\n              }}\n              onBlur={() => this.handleBlur()}\n              onInput={e => this.handleInput(e)}\n              onInvalid={() => this.handleInvalid()}\n              onChange={() => this.handleChange()}\n              aria-labelledby={this.labelId}\n              onKeyDown={e => this.handleKeyDown(e)}\n            />\n            <ul\n              class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n              role=\"listbox\"\n              ref={el => this.suggestionsContainer = el}\n              onScroll={() => this.handleSuggestionsScroll()}\n            >\n              {this.suggestions.map((suggestion, index) => (\n                <li\n                  id={`option-${index}`}\n                  role=\"option\"\n                  aria-selected={this.selectedIndex == index}\n                  class={this.selectedIndex == index ? \"selected\" : \"\"}\n                  onClick={e => this.selectItem(e, index)}\n                >\n                  {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n                </li>\n              ))}\n              {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n                <div class=\"loading\">\n                </div>\n              }\n              {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n                <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n                </div>\n              }\n            </ul>\n            <svg\n              onClick={() => this.handleDropdownClick()}\n              class=\"chevron-down\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 -960 960 960\">\n              <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n            </svg>\n          </div>\n        </dnn-fieldset>\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/esm/dnn.js

@@ -16,7 +16,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["dnn-color-input",[[65,"dnn-color-input",{"color":[1025],"contrastColor":[1025,"contrast-color"],"lightColor":[1025,"light-color"],"darkColor":[1025,"dark-color"],"label":[1],"readonly":[4],"localization":[16],"name":[1],"helpText":[1,"help-text"],"useContrastColor":[4,"use-contrast-color"],"useLightColor":[4,"use-light-color"],"useDarkColor":[4,"use-dark-color"],"currentColor":[32],"focused":[32]},null,{"currentColor":["currentColorChanged"]}]]],["dnn-image-cropper",[[65,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"name":[1],"view":[32],"localResx":[32],"fileName":[32],"focused":[32],"clear":[64]},null,{"resx":["resxChanged"]}]]],["dnn-autocomplete",[[65,"dnn-autocomplete",{"label":[1],"name":[1],"helpText":[1,"help-text"],"value":[1537],"required":[4],"disabled":[4],"suggestions":[16],"renderSuggestion":[16],"totalSuggestions":[2,"total-suggestions"],"preloadThresholdPixels":[2,"preload-threshold-pixels"],"autocomplete":[1],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"displayValue":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","handleClick"]]]]],["dnn-input",[[65,"dnn-input",{"type":[1025],"label":[1],"name":[1],"value":[1544],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"min":[8],"max":[8],"minlength":[2],"maxlength":[2],"multiple":[4],"pattern":[1],"readonly":[4],"step":[8],"disableValidityReporting":[4,"disable-validity-reporting"],"allowShowPassword":[4,"allow-show-password"],"inputmode":[1],"focused":[32],"valid":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-select",[[65,"dnn-select",{"label":[1],"name":[1],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"disableValidityReporting":[4,"disable-validity-reporting"],"autocomplete":[1],"value":[1537],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64]}]]],["dnn-textarea",[[65,"dnn-textarea",{"resizable":[1],"value":[1025],"label":[1],"name":[1],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"minlength":[2],"maxlength":[2],"readonly":[4],"rows":[2],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-treeview-item",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32],"focused":[32]},null,{"expanded":["watchExpanded"]}]]],["dnn-chevron",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540],"focused":[32]},null,{"expanded":["handleExpandedChanged"]}]]],["dnn-monaco-editor",[[66,"dnn-monaco-editor",{"language":[1],"value":[1025],"name":[1],"focused":[32]},null,{"language":["languageChanged"],"value":["valueChanged"]}]]],["dnn-progress-bar",[[1,"dnn-progress-bar",{"value":[2],"max":[2],"useGradient":[4,"use-gradient"]}]]],["dnn-richtext",[[65,"dnn-richtext",{"options":[16],"value":[1],"name":[1],"focused":[32]},null,{"value":["watchValueChanged"]}]]],["dnn-sort-icon",[[1,"dnn-sort-icon",{"sortDirection":[1025,"sort-direction"],"focused":[32]}]]],["dnn-toggle",[[65,"dnn-toggle",{"checked":[1028],"disabled":[4],"name":[1],"value":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["checkedChanged"]}]]],["dnn-vertical-overflow-menu",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-checkbox",[[65,"dnn-checkbox",{"checked":[1025],"useIntermediate":[4,"use-intermediate"],"value":[1],"name":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["handleCheckedChange"]}]]],["dnn-color-picker",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32],"focused":[32]},null,{"currentColor":["handeCurrentColorChanged"]}]]],["dnn-dropzone",[[65,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"maxFileSize":[2,"max-file-size"],"name":[1],"canTakeSnapshots":[32],"takingPicture":[32],"fileTooLarge":[32],"invalidExtension":[32],"localResx":[32],"focused":[32]},null,{"resx":["resxChanged"]}]]],["dnn-searchbox",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"debounceTime":[2,"debounce-time"],"query":[1025],"focused":[32]},null,{"query":["handleQueryChanged"]}]]],["dnn-tab_2",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}],[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-collapsible",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{"expanded":["handledExpandedChanged"]}]]],["dnn-modal",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"resizable":[4],"showCloseButton":[4,"show-close-button"],"visible":[1540],"show":[64],"hide":[64]}]]],["dnn-button",[[65,"dnn-button",{"type":[1],"appearance":[1],"formButtonType":[1,"form-button-type"],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"focused":[32],"modalVisible":[32]}]]],["dnn-permissions-grid",[[1,"dnn-permissions-grid",{"permissions":[1040],"roleGroups":[16],"roles":[16],"resx":[16],"foundUsers":[16],"selectedRoleGroupId":[32],"userQuery":[32],"pickedUser":[32],"localResx":[32],"focused":[32]},null,{"foundUsers":["handleFoundUsersChanged"],"resx":["resxChanged"]}]]],["dnn-fieldset",[[1,"dnn-fieldset",{"focused":[1540],"disabled":[1540],"invalid":[1540],"label":[1],"floatLabel":[1540,"float-label"],"helpText":[1,"help-text"],"resizable":[1],"customValidityMessage":[32],"setFocused":[64],"setBlurred":[64],"disable":[64],"enable":[64],"pinLabel":[64],"unpinLabel":[64],"setValidity":[64]}]]]], options);
+  return bootstrapLazy([["dnn-color-input",[[65,"dnn-color-input",{"color":[1025],"contrastColor":[1025,"contrast-color"],"lightColor":[1025,"light-color"],"darkColor":[1025,"dark-color"],"label":[1],"readonly":[4],"localization":[16],"name":[1],"helpText":[1,"help-text"],"useContrastColor":[4,"use-contrast-color"],"useLightColor":[4,"use-light-color"],"useDarkColor":[4,"use-dark-color"],"currentColor":[32],"focused":[32]},null,{"currentColor":["currentColorChanged"]}]]],["dnn-image-cropper",[[65,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"name":[1],"view":[32],"localResx":[32],"fileName":[32],"focused":[32],"clear":[64]},null,{"resx":["resxChanged"]}]]],["dnn-autocomplete",[[65,"dnn-autocomplete",{"label":[1],"name":[1],"helpText":[1,"help-text"],"value":[1537],"required":[4],"disabled":[4],"suggestions":[16],"renderSuggestion":[16],"totalSuggestions":[2,"total-suggestions"],"preloadThresholdPixels":[2,"preload-threshold-pixels"],"autocomplete":[1],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"displayValue":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","handleClick"]],{"value":["handleValueChange"]}]]],["dnn-input",[[65,"dnn-input",{"type":[1025],"label":[1],"name":[1],"value":[1544],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"min":[8],"max":[8],"minlength":[2],"maxlength":[2],"multiple":[4],"pattern":[1],"readonly":[4],"step":[8],"disableValidityReporting":[4,"disable-validity-reporting"],"allowShowPassword":[4,"allow-show-password"],"inputmode":[1],"focused":[32],"valid":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-select",[[65,"dnn-select",{"label":[1],"name":[1],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"disableValidityReporting":[4,"disable-validity-reporting"],"autocomplete":[1],"value":[1537],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64]}]]],["dnn-textarea",[[65,"dnn-textarea",{"resizable":[1],"value":[1025],"label":[1],"name":[1],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"minlength":[2],"maxlength":[2],"readonly":[4],"rows":[2],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-treeview-item",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32],"focused":[32]},null,{"expanded":["watchExpanded"]}]]],["dnn-chevron",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540],"focused":[32]},null,{"expanded":["handleExpandedChanged"]}]]],["dnn-monaco-editor",[[66,"dnn-monaco-editor",{"language":[1],"value":[1025],"name":[1],"focused":[32]},null,{"language":["languageChanged"],"value":["valueChanged"]}]]],["dnn-progress-bar",[[1,"dnn-progress-bar",{"value":[2],"max":[2],"useGradient":[4,"use-gradient"]}]]],["dnn-richtext",[[65,"dnn-richtext",{"options":[16],"value":[1],"name":[1],"focused":[32]},null,{"value":["watchValueChanged"]}]]],["dnn-sort-icon",[[1,"dnn-sort-icon",{"sortDirection":[1025,"sort-direction"],"focused":[32]}]]],["dnn-toggle",[[65,"dnn-toggle",{"checked":[1028],"disabled":[4],"name":[1],"value":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["checkedChanged"]}]]],["dnn-vertical-overflow-menu",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-checkbox",[[65,"dnn-checkbox",{"checked":[1025],"useIntermediate":[4,"use-intermediate"],"value":[1],"name":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["handleCheckedChange"]}]]],["dnn-color-picker",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32],"focused":[32]},null,{"currentColor":["handeCurrentColorChanged"]}]]],["dnn-dropzone",[[65,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"maxFileSize":[2,"max-file-size"],"name":[1],"canTakeSnapshots":[32],"takingPicture":[32],"fileTooLarge":[32],"invalidExtension":[32],"localResx":[32],"focused":[32]},null,{"resx":["resxChanged"]}]]],["dnn-searchbox",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"debounceTime":[2,"debounce-time"],"query":[1025],"focused":[32]},null,{"query":["handleQueryChanged"]}]]],["dnn-tab_2",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}],[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-collapsible",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{"expanded":["handledExpandedChanged"]}]]],["dnn-modal",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"resizable":[4],"showCloseButton":[4,"show-close-button"],"visible":[1540],"show":[64],"hide":[64]}]]],["dnn-button",[[65,"dnn-button",{"type":[1],"appearance":[1],"formButtonType":[1,"form-button-type"],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"focused":[32],"modalVisible":[32]}]]],["dnn-permissions-grid",[[1,"dnn-permissions-grid",{"permissions":[1040],"roleGroups":[16],"roles":[16],"resx":[16],"foundUsers":[16],"selectedRoleGroupId":[32],"userQuery":[32],"pickedUser":[32],"localResx":[32],"focused":[32]},null,{"foundUsers":["handleFoundUsersChanged"],"resx":["resxChanged"]}]]],["dnn-fieldset",[[1,"dnn-fieldset",{"focused":[1540],"disabled":[1540],"invalid":[1540],"label":[1],"floatLabel":[1540,"float-label"],"helpText":[1,"help-text"],"resizable":[1],"customValidityMessage":[32],"setFocused":[64],"setBlurred":[64],"disable":[64],"enable":[64],"pinLabel":[64],"unpinLabel":[64],"setValidity":[64]}]]]], options);
 });
 
 //# sourceMappingURL=dnn.js.map

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["dnn-color-input",[[65,"dnn-color-input",{"color":[1025],"contrastColor":[1025,"contrast-color"],"lightColor":[1025,"light-color"],"darkColor":[1025,"dark-color"],"label":[1],"readonly":[4],"localization":[16],"name":[1],"helpText":[1,"help-text"],"useContrastColor":[4,"use-contrast-color"],"useLightColor":[4,"use-light-color"],"useDarkColor":[4,"use-dark-color"],"currentColor":[32],"focused":[32]},null,{"currentColor":["currentColorChanged"]}]]],["dnn-image-cropper",[[65,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"name":[1],"view":[32],"localResx":[32],"fileName":[32],"focused":[32],"clear":[64]},null,{"resx":["resxChanged"]}]]],["dnn-autocomplete",[[65,"dnn-autocomplete",{"label":[1],"name":[1],"helpText":[1,"help-text"],"value":[1537],"required":[4],"disabled":[4],"suggestions":[16],"renderSuggestion":[16],"totalSuggestions":[2,"total-suggestions"],"preloadThresholdPixels":[2,"preload-threshold-pixels"],"autocomplete":[1],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"displayValue":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","handleClick"]]]]],["dnn-input",[[65,"dnn-input",{"type":[1025],"label":[1],"name":[1],"value":[1544],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"min":[8],"max":[8],"minlength":[2],"maxlength":[2],"multiple":[4],"pattern":[1],"readonly":[4],"step":[8],"disableValidityReporting":[4,"disable-validity-reporting"],"allowShowPassword":[4,"allow-show-password"],"inputmode":[1],"focused":[32],"valid":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-select",[[65,"dnn-select",{"label":[1],"name":[1],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"disableValidityReporting":[4,"disable-validity-reporting"],"autocomplete":[1],"value":[1537],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64]}]]],["dnn-textarea",[[65,"dnn-textarea",{"resizable":[1],"value":[1025],"label":[1],"name":[1],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"minlength":[2],"maxlength":[2],"readonly":[4],"rows":[2],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-treeview-item",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32],"focused":[32]},null,{"expanded":["watchExpanded"]}]]],["dnn-chevron",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540],"focused":[32]},null,{"expanded":["handleExpandedChanged"]}]]],["dnn-monaco-editor",[[66,"dnn-monaco-editor",{"language":[1],"value":[1025],"name":[1],"focused":[32]},null,{"language":["languageChanged"],"value":["valueChanged"]}]]],["dnn-progress-bar",[[1,"dnn-progress-bar",{"value":[2],"max":[2],"useGradient":[4,"use-gradient"]}]]],["dnn-richtext",[[65,"dnn-richtext",{"options":[16],"value":[1],"name":[1],"focused":[32]},null,{"value":["watchValueChanged"]}]]],["dnn-sort-icon",[[1,"dnn-sort-icon",{"sortDirection":[1025,"sort-direction"],"focused":[32]}]]],["dnn-toggle",[[65,"dnn-toggle",{"checked":[1028],"disabled":[4],"name":[1],"value":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["checkedChanged"]}]]],["dnn-vertical-overflow-menu",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-checkbox",[[65,"dnn-checkbox",{"checked":[1025],"useIntermediate":[4,"use-intermediate"],"value":[1],"name":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["handleCheckedChange"]}]]],["dnn-color-picker",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32],"focused":[32]},null,{"currentColor":["handeCurrentColorChanged"]}]]],["dnn-dropzone",[[65,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"maxFileSize":[2,"max-file-size"],"name":[1],"canTakeSnapshots":[32],"takingPicture":[32],"fileTooLarge":[32],"invalidExtension":[32],"localResx":[32],"focused":[32]},null,{"resx":["resxChanged"]}]]],["dnn-searchbox",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"debounceTime":[2,"debounce-time"],"query":[1025],"focused":[32]},null,{"query":["handleQueryChanged"]}]]],["dnn-tab_2",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}],[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-collapsible",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{"expanded":["handledExpandedChanged"]}]]],["dnn-modal",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"resizable":[4],"showCloseButton":[4,"show-close-button"],"visible":[1540],"show":[64],"hide":[64]}]]],["dnn-button",[[65,"dnn-button",{"type":[1],"appearance":[1],"formButtonType":[1,"form-button-type"],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"focused":[32],"modalVisible":[32]}]]],["dnn-permissions-grid",[[1,"dnn-permissions-grid",{"permissions":[1040],"roleGroups":[16],"roles":[16],"resx":[16],"foundUsers":[16],"selectedRoleGroupId":[32],"userQuery":[32],"pickedUser":[32],"localResx":[32],"focused":[32]},null,{"foundUsers":["handleFoundUsersChanged"],"resx":["resxChanged"]}]]],["dnn-fieldset",[[1,"dnn-fieldset",{"focused":[1540],"disabled":[1540],"invalid":[1540],"label":[1],"floatLabel":[1540,"float-label"],"helpText":[1,"help-text"],"resizable":[1],"customValidityMessage":[32],"setFocused":[64],"setBlurred":[64],"disable":[64],"enable":[64],"pinLabel":[64],"unpinLabel":[64],"setValidity":[64]}]]]], options);
+  return bootstrapLazy([["dnn-color-input",[[65,"dnn-color-input",{"color":[1025],"contrastColor":[1025,"contrast-color"],"lightColor":[1025,"light-color"],"darkColor":[1025,"dark-color"],"label":[1],"readonly":[4],"localization":[16],"name":[1],"helpText":[1,"help-text"],"useContrastColor":[4,"use-contrast-color"],"useLightColor":[4,"use-light-color"],"useDarkColor":[4,"use-dark-color"],"currentColor":[32],"focused":[32]},null,{"currentColor":["currentColorChanged"]}]]],["dnn-image-cropper",[[65,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"name":[1],"view":[32],"localResx":[32],"fileName":[32],"focused":[32],"clear":[64]},null,{"resx":["resxChanged"]}]]],["dnn-autocomplete",[[65,"dnn-autocomplete",{"label":[1],"name":[1],"helpText":[1,"help-text"],"value":[1537],"required":[4],"disabled":[4],"suggestions":[16],"renderSuggestion":[16],"totalSuggestions":[2,"total-suggestions"],"preloadThresholdPixels":[2,"preload-threshold-pixels"],"autocomplete":[1],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"displayValue":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","handleClick"]],{"value":["handleValueChange"]}]]],["dnn-input",[[65,"dnn-input",{"type":[1025],"label":[1],"name":[1],"value":[1544],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"min":[8],"max":[8],"minlength":[2],"maxlength":[2],"multiple":[4],"pattern":[1],"readonly":[4],"step":[8],"disableValidityReporting":[4,"disable-validity-reporting"],"allowShowPassword":[4,"allow-show-password"],"inputmode":[1],"focused":[32],"valid":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-select",[[65,"dnn-select",{"label":[1],"name":[1],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"disableValidityReporting":[4,"disable-validity-reporting"],"autocomplete":[1],"value":[1537],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64]}]]],["dnn-textarea",[[65,"dnn-textarea",{"resizable":[1],"value":[1025],"label":[1],"name":[1],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"minlength":[2],"maxlength":[2],"readonly":[4],"rows":[2],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-treeview-item",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32],"focused":[32]},null,{"expanded":["watchExpanded"]}]]],["dnn-chevron",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540],"focused":[32]},null,{"expanded":["handleExpandedChanged"]}]]],["dnn-monaco-editor",[[66,"dnn-monaco-editor",{"language":[1],"value":[1025],"name":[1],"focused":[32]},null,{"language":["languageChanged"],"value":["valueChanged"]}]]],["dnn-progress-bar",[[1,"dnn-progress-bar",{"value":[2],"max":[2],"useGradient":[4,"use-gradient"]}]]],["dnn-richtext",[[65,"dnn-richtext",{"options":[16],"value":[1],"name":[1],"focused":[32]},null,{"value":["watchValueChanged"]}]]],["dnn-sort-icon",[[1,"dnn-sort-icon",{"sortDirection":[1025,"sort-direction"],"focused":[32]}]]],["dnn-toggle",[[65,"dnn-toggle",{"checked":[1028],"disabled":[4],"name":[1],"value":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["checkedChanged"]}]]],["dnn-vertical-overflow-menu",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-checkbox",[[65,"dnn-checkbox",{"checked":[1025],"useIntermediate":[4,"use-intermediate"],"value":[1],"name":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["handleCheckedChange"]}]]],["dnn-color-picker",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32],"focused":[32]},null,{"currentColor":["handeCurrentColorChanged"]}]]],["dnn-dropzone",[[65,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"maxFileSize":[2,"max-file-size"],"name":[1],"canTakeSnapshots":[32],"takingPicture":[32],"fileTooLarge":[32],"invalidExtension":[32],"localResx":[32],"focused":[32]},null,{"resx":["resxChanged"]}]]],["dnn-searchbox",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"debounceTime":[2,"debounce-time"],"query":[1025],"focused":[32]},null,{"query":["handleQueryChanged"]}]]],["dnn-tab_2",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}],[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-collapsible",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{"expanded":["handledExpandedChanged"]}]]],["dnn-modal",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"resizable":[4],"showCloseButton":[4,"show-close-button"],"visible":[1540],"show":[64],"hide":[64]}]]],["dnn-button",[[65,"dnn-button",{"type":[1],"appearance":[1],"formButtonType":[1,"form-button-type"],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"focused":[32],"modalVisible":[32]}]]],["dnn-permissions-grid",[[1,"dnn-permissions-grid",{"permissions":[1040],"roleGroups":[16],"roles":[16],"resx":[16],"foundUsers":[16],"selectedRoleGroupId":[32],"userQuery":[32],"pickedUser":[32],"localResx":[32],"focused":[32]},null,{"foundUsers":["handleFoundUsersChanged"],"resx":["resxChanged"]}]]],["dnn-fieldset",[[1,"dnn-fieldset",{"focused":[1540],"disabled":[1540],"invalid":[1540],"label":[1],"floatLabel":[1540,"float-label"],"helpText":[1,"help-text"],"resizable":[1],"customValidityMessage":[32],"setFocused":[64],"setBlurred":[64],"disable":[64],"enable":[64],"pinLabel":[64],"unpinLabel":[64],"setValidity":[64]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/types/components/dnn-autocomplete/dnn-autocomplete.d.ts

@@ -57,6 +57,7 @@ export declare class DnnAutocomplete {
     positionInitialized: boolean;
     lastScrollTop: number;
     displayValue: string;
+    handleValueChange(newValue: string): void;
     /** attacth the internals for form validation */
     internals: ElementInternals;
     /** Listener for mouse down event */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnncommunity/dnn-elements",
-  "version": "0.24.2",
+  "version": "0.24.3-beta.1",
   "description": "Dnn themed custom elements.",
   "repository": "https://github.com/dnncommunity/dnn-elements",
   "homepage": "https://dnncommunity.github.io/dnn-elements",
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.1.0",
-    "@stencil-community/eslint-plugin": "0.8.0",
+    "@stencil-community/eslint-plugin": "0.9.0",
     "@stencil/core": "4.22.2",
     "@stencil/react-output-target": "^0.5.1",
     "@stencil/sass": "^3.0.4",
@@ -55,14 +55,14 @@
     "babel-loader": "^9.1.2",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.16.0",
-    "eslint-plugin-storybook": "^0.10.1",
+    "eslint-plugin-storybook": "^0.11.1",
     "gh-pages": "^6.0.0",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "license-checker-rseidelsohn": "^4.2.6",
     "lit": "^3.1.0",
     "npm-run-all": "^4.1.5",
-    "puppeteer": "^22.13.1",
+    "puppeteer": "^23.9.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup-plugin-node-polyfills": "^0.2.1",

package/dist/dnn/p-f317208f.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as e,H as s,g as n}from"./p-91d08ab2.js";import{D as h}from"./p-78c57746.js";const o=":host{display:inline-block;--foreground-color:var(--dnn-color-foreground, #000);--background-color:var(--dnn-color-background, #fff);--focus-color:var(--dnn-color-primary, #3792ED);--danger-color:var(--dnn-color-danger, #900);--control-radius:var(--dnn-controls-radius, 3px)}dnn-fieldset{width:100%}@keyframes shift{0%{background-position:0% 0}50%{background-position:100% 0}100%{background-position:200% 0}}.inner-container{display:flex;justify-content:space-between;position:relative;width:100%}.inner-container input{border:none;outline:none;background-color:transparent;color:var(--foreground-color);text-align:var(--input-text-align);width:100%}.inner-container svg.chevron-down{height:1rem;width:auto;transform:scale(1.2);cursor:pointer}.inner-container ul{position:absolute;border:1px solid lightgray;margin:0;padding:var(--dnn-controls-radius, 3px) 0;overflow-y:auto;width:100%;box-shadow:2px 2px 6px 1px rgba(0, 0, 0, 0.3);background-color:var(--dnn-color-background, white);border-radius:var(--dnn-controls-radius, 3px);z-index:2;display:none;scroll-behavior:smooth}.inner-container ul.show{display:block}.inner-container ul li{display:block;list-style-type:none;cursor:pointer;padding:0 0.5rem}.inner-container ul li.selected{background-color:lightgray}.inner-container ul li:hover{background-color:lightgray}.inner-container ul .loading{width:100%;height:0.5rem;border-radius:0.5rem;background:linear-gradient(to right, var(--background-color) 0%, var(--foreground-color) 50%, var(--background-color) 100%);background-size:200% 100%;animation:shift 2s linear infinite;width:75%;margin:0 auto;opacity:0.5}";const r=o;var a=undefined&&undefined.__decorate||function(i,t,e,s){var n=arguments.length,h=n<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,e):s,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")h=Reflect.decorate(i,t,e,s);else for(var r=i.length-1;r>=0;r--)if(o=i[r])h=(n<3?o(h):n>3?o(t,e,h):o(t,e))||h;return n>3&&h&&Object.defineProperty(t,e,h),h};const d=class{constructor(e){i(this,e);this.valueChange=t(this,"valueChange",7);this.valueInput=t(this,"valueInput",7);this.needMoreItems=t(this,"needMoreItems",7);this.searchQueryChanged=t(this,"searchQueryChanged",7);this.itemSelected=t(this,"itemSelected",7);if(e.$hostElement$["s-ei"]){this.internals=e.$hostElement$["s-ei"]}else{this.internals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.internals}this.adjustDropdownPosition=()=>{var i=this.findAverageSuggestionHeight();requestAnimationFrame((()=>{this.positionInitialized=true}));var t=window.innerHeight-this.inputField.getBoundingClientRect().bottom;const e=parseFloat(getComputedStyle(document.documentElement).fontSize);const s=t>3*i+3*e;if(s){this.suggestionsContainer.style.top="1.2rem"}else{this.suggestionsContainer.style.bottom="1.2rem"}if(s){this.suggestionsContainer.style.maxHeight=`${t-3*e}px`}else{this.suggestionsContainer.style.maxHeight=`${this.inputField.getBoundingClientRect().top-3*e}px`}this.checkIfMoreItemsNeeded()};this.label=undefined;this.name=undefined;this.helpText=undefined;this.value=undefined;this.required=undefined;this.disabled=undefined;this.suggestions=[];this.renderSuggestion=undefined;this.totalSuggestions=undefined;this.preloadThresholdPixels=1e3;this.autocomplete="off";this.focused=false;this.valid=true;this.customValidityMessage=undefined;this.selectedIndex=undefined;this.positionInitialized=false;this.lastScrollTop=0;this.displayValue=""}async checkValidity(){var i=this.inputField.checkValidity();if(!i){this.fieldset.setValidity(false,this.inputField.validationMessage)}this.fieldset.setValidity(true,"");return this.inputField.validity}async setCustomValidity(i){if(i==undefined||i==""){this.inputField.setCustomValidity("");this.valid=true;this.fieldset.setValidity(true);return}this.inputField.setCustomValidity(i);this.valid=false;this.fieldset.setValidity(false,i)}handleClick(i){const t=i.composedPath();if(!t.includes(this.element)){this.focused=false}}componentDidRender(){if(this.focused&&this.suggestions.length>0&&!this.positionInitialized){this.adjustDropdownPosition()}}formResetCallback(){this.inputField.setCustomValidity("");this.valid=true;this.value="";this.internals.setValidity({});this.internals.setFormValue("")}handleInput(i){const t=i.target.value;this.displayValue=t;this.value=t;var e=this.inputField.checkValidity();this.valid=e;this.valueInput.emit(t);this.handleSearchQueryChanged(t)}handleSearchQueryChanged(i){this.searchQueryChanged.emit(i)}handleInvalid(){this.valid=false;if(this.customValidityMessage==undefined){this.customValidityMessage=this.inputField.validationMessage}}handleChange(){this.valueChange.emit(this.value);if(this.name!=undefined){var i=new FormData;i.append(this.name,this.value.toString());this.internals.setFormValue(i)}}shouldLabelFloat(){if(this.focused){return false}if(this.value!=undefined&&this.value!=""){return false}return true}findAverageSuggestionHeight(){const i=this.suggestionsContainer.querySelectorAll("li");var t=0;for(let e=0;e<i.length;e++){t+=i[e].clientHeight}return t/i.length}handleKeyDown(i){var t;if(i.key==="ArrowDown"){i.preventDefault();if(this.selectedIndex==undefined){this.selectedIndex=0}else{this.selectedIndex=Math.min(this.selectedIndex+1,this.suggestions.length-1)}}if(i.key==="ArrowUp"){i.preventDefault();if(this.selectedIndex==undefined){this.selectedIndex=this.suggestions.length-1}else{this.selectedIndex=Math.max(this.selectedIndex-1,0)}}this.value=((t=this.suggestions[this.selectedIndex])===null||t===void 0?void 0:t.value)||this.value;if(i.key==="Enter"){var e=this.suggestions[this.selectedIndex];this.value=e.value;this.inputField.value=e.label;this.itemSelected.emit(e.value);this.focused=false}if(i.key==="Tab"){this.focused=false}}selectItem(i,t){i.preventDefault();i.stopPropagation();this.selectedIndex=t;this.value=this.suggestions[this.selectedIndex].value;this.displayValue=this.suggestions[this.selectedIndex].label;this.inputField.value=this.displayValue;this.checkValidity();this.focused=false;this.itemSelected.emit(this.suggestions[this.selectedIndex].value)}getVirtualScrollHeight(){const i=this.findAverageSuggestionHeight();const t=this.totalSuggestions-this.suggestions.length;return i*t}handleDropdownClick(){this.handleSearchQueryChanged(this.value)}handleSuggestionsScroll(){const i=this.suggestionsContainer;const t=i.scrollTop;if(t>this.lastScrollTop){const e=i.querySelector(".loading");if(e==undefined){this.lastScrollTop=t;return}const s=e.offsetTop;const n=e.offsetHeight;const h=s+n;const o=t+i.clientHeight;if(o>h){i.scrollTop=h-i.clientHeight}this.checkIfMoreItemsNeeded()}this.lastScrollTop=t}checkIfMoreItemsNeeded(){const i=this.suggestionsContainer;const t=i.querySelector(".loading");if(t==undefined)return;const e=i.scrollTop+i.clientHeight;const s=t.offsetTop;if(s-e<this.preloadThresholdPixels){const i={searchTerm:this.inputField.value};this.needMoreItems.emit(i)}}handleBlur(){var i=this.inputField.checkValidity();this.valid=i;this.fieldset.setValidity(i,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}render(){var i;return e(s,{key:"10a0264ebae498078dbfc3fbd6ffa1a2a1b50c0e",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},e("dnn-fieldset",{key:"8f2426b397ba4001ed65255f58878176441950dc",ref:i=>this.fieldset=i,invalid:!this.valid,focused:this.focused,label:`${(i=this.label)!==null&&i!==void 0?i:""}${this.required?" *":""}`,helpText:this.helpText,id:this.labelId,disabled:this.disabled,floatLabel:this.shouldLabelFloat()},e("div",{key:"fad1d2e8567163f4dcea423fe71eacc157fcc350",class:"inner-container"},e("input",{key:"bffb6ee3cbee67db6e280f29092ead301e75f8e8",ref:i=>this.inputField=i,name:this.name,type:"search",role:"combobox","aria-haspopup":"listbox","aria-expanded":this.focused.toString(),"aria-activedescendant":this.selectedIndex!==undefined?`option-${this.selectedIndex}`:undefined,disabled:this.disabled,required:this.required,autoComplete:this.autocomplete,value:this.displayValue,onFocus:()=>{this.searchQueryChanged.emit(this.value||"");this.focused=true},onBlur:()=>this.handleBlur(),onInput:i=>this.handleInput(i),onInvalid:()=>this.handleInvalid(),onChange:()=>this.handleChange(),"aria-labelledby":this.labelId,onKeyDown:i=>this.handleKeyDown(i)}),e("ul",{key:"1cffdc6b12d2337cc89448fd232ca453700e655d",class:this.focused&&this.suggestions.length>0?"show":"",role:"listbox",ref:i=>this.suggestionsContainer=i,onScroll:()=>this.handleSuggestionsScroll()},this.suggestions.map(((i,t)=>e("li",{id:`option-${t}`,role:"option","aria-selected":this.selectedIndex==t,class:this.selectedIndex==t?"selected":"",onClick:i=>this.selectItem(i,t)},this.renderSuggestion!=undefined?this.renderSuggestion(i):i.label))),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&e("div",{key:"2a7bd6440f9d71a11aa44a4ed2ce444c6efced35",class:"loading"}),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&this.positionInitialized&&e("div",{key:"2c7b5655893711bb51fffb97f911308ac6d144ed",style:{height:`${this.getVirtualScrollHeight()}px`}})),e("svg",{key:"55452717a72e3d597bb40ed934db19dbb8ddfd6f",onClick:()=>this.handleDropdownClick(),class:"chevron-down",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},e("path",{key:"e26905040e49403c2bd55c893858eefa4d4d470a",d:"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z"})))))}static get formAssociated(){return true}get element(){return n(this)}};a([h(300)],d.prototype,"handleSearchQueryChanged",null);a([h(100)],d.prototype,"handleSuggestionsScroll",null);a([h()],d.prototype,"checkIfMoreItemsNeeded",null);d.style=r;export{d as dnn_autocomplete};
-//# sourceMappingURL=p-f317208f.entry.js.map

package/dist/dnn/p-f317208f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["dnnAutocompleteCss","DnnAutocompleteStyle0","DnnAutocomplete","this","adjustDropdownPosition","itemHeight","findAverageSuggestionHeight","requestAnimationFrame","positionInitialized","spaceBelow","window","innerHeight","inputField","getBoundingClientRect","bottom","rem","parseFloat","getComputedStyle","document","documentElement","fontSize","fitsDown","suggestionsContainer","style","top","maxHeight","checkIfMoreItemsNeeded","checkValidity","validity","fieldset","setValidity","validationMessage","setCustomValidity","message","undefined","valid","handleClick","e","path","composedPath","includes","element","focused","componentDidRender","suggestions","length","formResetCallback","value","internals","setFormValue","handleInput","inputValue","target","displayValue","valueInput","emit","handleSearchQueryChanged","searchQueryChanged","handleInvalid","customValidityMessage","handleChange","valueChange","name","data","FormData","append","toString","shouldLabelFloat","suggestionItems","querySelectorAll","totalHeight","i","clientHeight","handleKeyDown","key","preventDefault","selectedIndex","Math","min","max","_a","selectedItem","label","itemSelected","selectItem","index","stopPropagation","getVirtualScrollHeight","upcomingItems","totalSuggestions","handleDropdownClick","handleSuggestionsScroll","container","currentScrollTop","scrollTop","lastScrollTop","loadingDiv","querySelector","loadingDivPosition","offsetTop","loadingDivHeight","offsetHeight","loadingDivBottom","visibleBottom","scrollPosition","preloadThresholdPixels","eventArgs","searchTerm","needMoreItems","handleBlur","render","h","Host","tabIndex","onFocus","focus","onBlur","blur","ref","el","invalid","required","helpText","id","labelId","disabled","floatLabel","class","type","role","autoComplete","autocomplete","onInput","onInvalid","onChange","onKeyDown","onScroll","map","suggestion","onClick","renderSuggestion","height","xmlns","viewBox","d","__decorate","Debounce"],"sources":["src/components/dnn-autocomplete/dnn-autocomplete.scss?tag=dnn-autocomplete&encapsulation=shadow","src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  /** @prop --foreground-color: Defines the foreground color. */\n  --foreground-color: var(--dnn-color-foreground, #000);\n\n  /** @prop --background-color: Defines the background color. */\n  --background-color: var(--dnn-color-background, #fff);\n\n  /** @prop --focus-color: Defines the color when the component is focused. */\n  --focus-color: var(--dnn-color-primary, #3792ED);\n\n  /** @prop --danger-color: Defines the danger color used for invalid data. */\n  --danger-color: var(--dnn-color-danger, #900);\n\n  /** @prop --control-radius: Defines the radius for the control corners. */\n  --control-radius: var(--dnn-controls-radius, 3px);\n}\n\ndnn-fieldset{\n  width: 100%;\n}\n\n@keyframes shift {\n  0% {\n      background-position: 0% 0;\n  }\n  50% {\n      background-position: 100% 0;\n  }\n  100% {\n      background-position: 200% 0;\n  }\n}\n\n.inner-container{\n  display: flex;\n  justify-content: space-between;\n  position: relative;\n  width: 100%;\n\n  input {\n    border: none;\n    outline: none;\n    background-color: transparent;\n    color: var(--foreground-color);\n    text-align: var(--input-text-align);\n    width: 100%;\n  }\n\n  svg.chevron-down{\n    height: 1rem;\n    width: auto;\n    transform: scale(1.2);\n    cursor: pointer;\n  }\n\n  ul{\n    position: absolute;\n    border: 1px solid lightgray;\n    margin: 0;\n    padding: var(--dnn-controls-radius, 3px) 0;\n    overflow-y: auto;\n    width: 100%;\n    box-shadow: 2px 2px 6px 1px rgb(0 0 0 / 30%);\n    background-color: var(--dnn-color-background, white);\n    border-radius: var(--dnn-controls-radius, 3px);\n    z-index: 2;\n    display: none;\n    scroll-behavior: smooth;\n    &.show{\n      display: block;\n    }\n    li {\n      display: block;\n      list-style-type: none;\n      cursor: pointer;\n      padding: 0 0.5rem;\n      &.selected {\n        background-color: lightgray;\n      }\n      &:hover {\n        background-color: lightgray;\n      }\n    }\n    .loading {\n      width: 100%;\n      height: 0.5rem;\n      border-radius: 0.5rem;\n      background: linear-gradient(\n        to right,\n        var(--background-color) 0%,\n        var(--foreground-color) 50%,\n        var(--background-color) 100%);\n      background-size: 200% 100%;\n      animation: shift 2s linear infinite;\n      width: 75%;\n      margin: 0 auto;\n      opacity: 0.5;\n    }\n  }\n}\n","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n  tag: 'dnn-autocomplete',\n  styleUrl: 'dnn-autocomplete.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n  /** The label for this autocomplete. */\n  @Prop() label: string;\n\n  /** The name for this autocomplete when used in forms. */\n  @Prop() name: string;\n\n  /** Defines the help label displayed under the field. */\n  @Prop() helpText: string;\n\n  /** Defines the value for this autocomplete */\n  @Prop({mutable: true, reflect: true}) value: string;\n\n  /** Defines whether the field requires having a value. */\n  @Prop() required: boolean;\n\n  /** Defines whether the field is disabled. */\n  @Prop() disabled: boolean;\n\n  /** Sets the list of suggestions. */\n  @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n  /** Callback to render suggestions, if not provided, only the label will be rendered. */\n  @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n  \n  /** The total amount of suggestions for the given search query.\n   * This can be used to show virtual scroll and pagination progressive feeding.\n   * The needMoreItems event should be used to request more items.\n   */\n  @Prop() totalSuggestions: number;\n \n  /** How many suggestions to preload in pixels of their height.\n  * This is used to calculate the virtual scroll height and request\n  * more items before they get into view.\n  */\n  @Prop() preloadThresholdPixels: number = 1000;\n\n  /** Defines the type of automatic completion the browser could use.\n  * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n  */\n  @Prop() autocomplete: string = \"off\";\n\n  @Element() element: HTMLDnnAutocompleteElement;\n\n  /** Fires when the value has changed and the user exits the input. */\n  @Event() valueChange: EventEmitter<number | string | string[]>;\n\n  /** Fires when the using is inputing data (on keystrokes). */\n  @Event() valueInput: EventEmitter<number | string | string[]>;\n\n  /** Fires when the component needs to display more items in the suggestions. */\n  @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n  /** Fires when the search query has changed.\n   * This is almost like valueInput, but it is debounced\n   * and can be used to trigger a search query without overloading\n   * API endpoints while typing.\n   */\n  @Event() searchQueryChanged: EventEmitter<string>;\n  \n  /** Fires when an item is selected. */\n  @Event() itemSelected: EventEmitter<string>;\n\n  /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n  @Method()\n  async checkValidity(): Promise<ValidityState> {\n    var validity = this.inputField.checkValidity();\n    if (!validity) {\n      this.fieldset.setValidity(false, this.inputField.validationMessage);\n    }\n    this.fieldset.setValidity(true, \"\");\n    return this.inputField.validity;\n  }\n  \n  /** Can be used to set a custom validity message. */\n  @Method()\n  async setCustomValidity(message: string): Promise<void> {\n    if (message == undefined || message == \"\") {\n      this.inputField.setCustomValidity(\"\");\n      this.valid = true;\n      this.fieldset.setValidity(true);\n      return;\n    }\n\n    this.inputField.setCustomValidity(message);\n    this.valid = false;\n    this.fieldset.setValidity(false, message);\n  }\n\n  @State() focused = false;\n  @State() valid = true;\n  @State() customValidityMessage: string;\n  @State() selectedIndex: number;\n  @State() positionInitialized = false;\n  @State() lastScrollTop = 0;\n  @State() displayValue: string = \"\";\n  \n  /** attacth the internals for form validation */\n  @AttachInternals() internals: ElementInternals;\n  \n  /** Listener for mouse down event */\n  @Listen(\"click\", { target: \"document\", capture: false })\n  handleClick(e: MouseEvent) {\n    const path = e.composedPath();\n    if (!path.includes(this.element))\n    {\n      this.focused = false;\n    }\n  }\n  \n  componentDidRender(){\n    if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n      this.adjustDropdownPosition();\n    }\n  }\n\n  private inputField!: HTMLInputElement;\n  private suggestionsContainer: HTMLUListElement;\n  private labelId: string;\n  private fieldset: HTMLDnnFieldsetElement;\n  \n  // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n  formResetCallback() {\n    this.inputField.setCustomValidity(\"\");\n    this.valid = true;\n    this.value = \"\";\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n  \n  private handleInput(e: Event) {\n    const inputValue = (e.target as HTMLInputElement).value;\n    this.displayValue = inputValue;\n    this.value = inputValue;\n    var valid = this.inputField.checkValidity();\n    this.valid = valid;\n    this.valueInput.emit(inputValue);\n    this.handleSearchQueryChanged(inputValue);\n  }\n\n  @Debounce(300)\n  private handleSearchQueryChanged(value: string) {\n    this.searchQueryChanged.emit(value);\n  }\n\n  private handleInvalid(): void {\n    this.valid = false;\n    if (this.customValidityMessage == undefined) {\n      this.customValidityMessage = this.inputField.validationMessage;\n    }\n  }\n\n  private handleChange() {\n    this.valueChange.emit(this.value);\n    if (this.name != undefined) {\n      var data = new FormData();\n      data.append(this.name, this.value.toString());\n      this.internals.setFormValue(data);\n    }\n  }\n\n  /** Check if the label should float */\n  private shouldLabelFloat(): boolean {\n    if (this.focused) {\n      return false;\n    }\n\n    if (this.value != undefined && this.value != \"\") {\n      return false;\n    }\n\n    return true;\n  }\n\n  private findAverageSuggestionHeight(): number {\n    const suggestionItems = this.suggestionsContainer.querySelectorAll(\"li\");\n    var totalHeight = 0;\n    for (let i = 0; i < suggestionItems.length; i++) {\n      totalHeight += suggestionItems[i].clientHeight;\n    }\n    return totalHeight / suggestionItems.length;\n  }\n\n  private readonly adjustDropdownPosition = () => {\n    var itemHeight = this.findAverageSuggestionHeight();\n    requestAnimationFrame(() => {\n      this.positionInitialized = true;\n    });\n\n    // If we can fit 3 items below the input and there is still 3em left, we show the dropdown under.\n    // Otherwise, we show it above.\n    var spaceBelow = window.innerHeight - this.inputField.getBoundingClientRect().bottom;\n    const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);\n    const fitsDown = spaceBelow > 3 * itemHeight + 3 * rem;\n    if (fitsDown) {\n      this.suggestionsContainer.style.top = \"1.2rem\";\n    }\n    else {\n      this.suggestionsContainer.style.bottom = \"1.2rem\";\n    }\n\n    // Set the max height to not overflow the screen.\n    if (fitsDown){\n      this.suggestionsContainer.style.maxHeight = `${spaceBelow - 3 * rem}px`;\n    }\n    else {\n      this.suggestionsContainer.style.maxHeight = `${this.inputField.getBoundingClientRect().top - 3 * rem}px`;\n    }\n\n    this.checkIfMoreItemsNeeded();\n  }\n\n  private handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      if (this.selectedIndex == undefined) {\n        this.selectedIndex = 0;\n      } else {\n        this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n      }\n    }\n    if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      if (this.selectedIndex == undefined) {\n        this.selectedIndex = this.suggestions.length - 1;\n      } else {\n        this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n      }\n    }\n    this.value = this.suggestions[this.selectedIndex]?.value || this.value;\n    if (e.key === \"Enter\") {\n      var selectedItem = this.suggestions[this.selectedIndex];\n      this.value = selectedItem.value;\n      this.inputField.value = selectedItem.label;\n      this.itemSelected.emit(selectedItem.value);\n      this.focused = false;\n    }\n    if (e.key === \"Tab\"){\n      this.focused = false;\n    }\n  }\n\n  private selectItem(e: Event, index: number): void {\n    e.preventDefault();\n    e.stopPropagation();\n    this.selectedIndex = index;\n    this.value = this.suggestions[this.selectedIndex].value;\n    this.displayValue = this.suggestions[this.selectedIndex].label;\n    this.inputField.value = this.displayValue;\n    this.checkValidity();\n    this.focused = false;\n    this.itemSelected.emit(this.suggestions[this.selectedIndex].value)\n  }\n\n  private getVirtualScrollHeight(): number {\n    const itemHeight = this.findAverageSuggestionHeight();\n    const upcomingItems = this.totalSuggestions - this.suggestions.length;\n    return itemHeight * upcomingItems;\n  }\n\n  private handleDropdownClick(): void {\n    this.handleSearchQueryChanged(this.value);\n  }\n\n  @Debounce(100)\n  private handleSuggestionsScroll(): void {\n    const container = this.suggestionsContainer;\n    const currentScrollTop = container.scrollTop;\n\n    // Only act if we are scrolling down\n    if (currentScrollTop > this.lastScrollTop) {\n      const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n      if (loadingDiv == undefined) {\n        this.lastScrollTop = currentScrollTop;\n        return;\n      }\n\n      const loadingDivPosition = loadingDiv.offsetTop;\n      const loadingDivHeight = loadingDiv.offsetHeight;\n      const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n      // Calculate the visible bottom of the scroll container\n      const visibleBottom = currentScrollTop + container.clientHeight;\n\n      // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n      if (visibleBottom > loadingDivBottom) {\n        // Adjust scrollTop so it doesn't scroll past the loading div\n        container.scrollTop = loadingDivBottom - container.clientHeight;\n      }\n\n      // Check if more items are needed based on the position of the loading div\n      this.checkIfMoreItemsNeeded();\n    }\n\n    // Update the last scroll position\n    this.lastScrollTop = currentScrollTop;\n  }\n\n  @Debounce()\n  private checkIfMoreItemsNeeded() {\n    const container = this.suggestionsContainer;\n  \n    const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n    if (loadingDiv == undefined) return; // Exit if there's no loading div\n  \n    const scrollPosition = container.scrollTop + container.clientHeight;\n    const loadingDivPosition = loadingDiv.offsetTop;\n  \n    // Check if the loading div is within the threshold of becoming visible\n    if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n      const eventArgs: NeedMoreItemsEventArgs = {\n        searchTerm: this.inputField.value,\n      };\n      this.needMoreItems.emit(eventArgs);\n    }\n  }\n\n  handleBlur(): void {\n    var validity = this.inputField.checkValidity();\n    this.valid = validity;\n    this.fieldset.setValidity(validity, this.inputField.validationMessage);\n    this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n  }\n\n  render() {\n    return (\n      <Host\n        tabIndex={this.focused ? -1 : 0}\n        onFocus={() => this.inputField.focus()}\n        onBlur={() => this.inputField.blur()}\n      >\n        <dnn-fieldset\n          ref={el => this.fieldset = el}\n          invalid={!this.valid}\n          focused={this.focused}\n          label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n          helpText={this.helpText}\n          id={this.labelId}\n          disabled={this.disabled}\n          floatLabel={this.shouldLabelFloat()}\n        >\n          <div class=\"inner-container\">\n            <input\n              ref={(el) => this.inputField = el}\n              name={this.name}\n              type=\"search\"\n              role=\"combobox\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={this.focused.toString()}\n              aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n              disabled={this.disabled}\n              required={this.required}\n              autoComplete={this.autocomplete}\n              value={this.displayValue}\n              onFocus={() => {\n                this.searchQueryChanged.emit(this.value || \"\");\n                this.focused = true;\n              }}\n              onBlur={() => this.handleBlur()}\n              onInput={e => this.handleInput(e)}\n              onInvalid={() => this.handleInvalid()}\n              onChange={() => this.handleChange()}\n              aria-labelledby={this.labelId}\n              onKeyDown={e => this.handleKeyDown(e)}\n            />\n            <ul\n              class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n              role=\"listbox\"\n              ref={el => this.suggestionsContainer = el}\n              onScroll={() => this.handleSuggestionsScroll()}\n            >\n              {this.suggestions.map((suggestion, index) => (\n                <li\n                  id={`option-${index}`}\n                  role=\"option\"\n                  aria-selected={this.selectedIndex == index}\n                  class={this.selectedIndex == index ? \"selected\" : \"\"}\n                  onClick={e => this.selectItem(e, index)}\n                >\n                  {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n                </li>\n              ))}\n              {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n                <div class=\"loading\">\n                </div>\n              }\n              {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n                <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n                </div>\n              }\n            </ul>\n            <svg\n              onClick={() => this.handleDropdownClick()}\n              class=\"chevron-down\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 -960 960 960\">\n              <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n            </svg>\n          </div>\n        </dnn-fieldset>\n      </Host>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}