@dnncommunity/dnn-elements 0.24.0-beta.1 → 0.24.0-beta.10

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

@@ -81,8 +81,15 @@ const DnnAutocomplete = class {
     }
     /** Can be used to set a custom validity message. */
     async setCustomValidity(message) {
-        this.customValidityMessage = message;
-        return this.inputField.setCustomValidity(message);
+        if (message == undefined || message == "") {
+            this.inputField.setCustomValidity("");
+            this.valid = true;
+            this.fieldset.setValidity(true);
+            return;
+        }
+        this.inputField.setCustomValidity(message);
+        this.valid = false;
+        this.fieldset.setValidity(false, message);
     }
     /** Listener for mouse down event */
     handleOutsideClick(e) {
@@ -106,6 +113,7 @@ const DnnAutocomplete = class {
     }
     handleInput(e) {
         const value = e.target.value;
+        this.value = value;
         var valid = this.inputField.checkValidity();
         this.valid = valid;
         this.valueInput.emit(value);
@@ -166,7 +174,7 @@ const DnnAutocomplete = class {
                 this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
             }
         }
-        this.value = (_a = this.suggestions[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.value;
+        this.value = ((_a = this.suggestions[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.value) || this.value;
         if (e.key === "Enter") {
             var selectedItem = this.suggestions[this.selectedIndex];
             this.value = selectedItem.value;
@@ -191,6 +199,9 @@ const DnnAutocomplete = class {
         const upcomingItems = this.totalSuggestions - this.suggestions.length;
         return itemHeight * upcomingItems;
     }
+    handleDropdownClick() {
+        this.handleSearchQueryChanged(this.value);
+    }
     handleSuggestionsScroll() {
         const container = this.suggestionsContainer;
         const currentScrollTop = container.scrollTop;
@@ -232,11 +243,18 @@ const DnnAutocomplete = class {
             this.needMoreItems.emit(eventArgs);
         }
     }
+    handleBlur() {
+        this.focused = false;
+        var validity = this.inputField.checkValidity();
+        this.valid = validity;
+        this.fieldset.setValidity(validity, this.inputField.validationMessage);
+        this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);
+    }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'ec1c9837cc1965ced372052275cbf4665349c9f5', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, index.h("dnn-fieldset", { key: '3e06fce78875b8e2eef90185d4cd605c64bf2efb', 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: 'a82df8a177c739657b1aedd593f18389b62ec755', class: "inner-container" }, index.h("input", { key: '024ba319110e71067cc1bcb5f32aac51df958ea8', ref: (el) => this.inputField = el, name: this.name, type: "search", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.focused.toString(), "aria-activedescendant": this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined, disabled: this.disabled, required: this.required, autoComplete: "off", value: this.suggestions.length > 0 && this.selectedIndex != undefined ? this.suggestions[this.selectedIndex].label : this.value, onFocus: () => this.focused = true, onBlur: () => this.focused = false, onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId, onKeyDown: e => this.handleKeyDown(e) }), index.h("ul", { key: '09d13821eda4e7ca0d993f58372ed17c9bd03426', 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: 'b124846b0b9296e0ddf907b056ca249a56438341', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
-            index.h("div", { key: '44017775319df27cebaa747bf3f7def8b83a99d6', style: { height: `${this.getVirtualScrollHeight()}px` } })), index.h("svg", { key: 'd62236720980bd30bb23d10f047e0f4ac18d4668', onClick: () => this.focused = !this.focused, class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, index.h("path", { key: '1abd288b3a2a9a1519b1242da893b5508427578c', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
+        return (index.h(index.Host, { key: '9eab75ca413ef3f1e2fd03fd297e3234405cf591', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, index.h("dnn-fieldset", { key: '3a6435b32891b0d8da6ad6103b3794e145e9f3b6', 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: 'ba9102f4739a8e0092bca6a9b13fe4afa5bf60ec', class: "inner-container" }, index.h("input", { key: 'beafefbaa7398b281e8d55a1c2f8e43bd5efb23a', ref: (el) => this.inputField = el, name: this.name, type: "search", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.focused.toString(), "aria-activedescendant": this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined, disabled: this.disabled, required: this.required, autoComplete: "off", value: this.suggestions.length > 0 && this.selectedIndex != undefined ? this.suggestions[this.selectedIndex].label : this.value, onFocus: () => 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: 'b299d725498438b2534d0173fba34eee66c78ee2', 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: '1be08bd2a97113d4ee68f3099fa025ccf7e051b7', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
+            index.h("div", { key: 'efdadf5afa162de0148525f3394dd0c29c0da23a', style: { height: `${this.getVirtualScrollHeight()}px` } })), index.h("svg", { key: '1ce44347eec5d871c245658700e0862ddc480c4a', onClick: () => this.handleDropdownClick(), class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, index.h("path", { key: '63dde5f0d50fd2085218431af1d6b15b9d3af8df', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
     }
     static get formAssociated() { return true; }
     get element() { return index.getElement(this); }

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  @Element() element: HTMLDnnAutocompleteElement;\n\n  /** Fires when the value has changed and the user exits the input. */\n  @Event() valueChange: EventEmitter<number | string | string[]>;\n\n  /** Fires when the using is inputing data (on keystrokes). */\n  @Event() valueInput: EventEmitter<number | string | string[]>;\n\n  /** Fires when the component needs to display more items in the suggestions. */\n  @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n  /** Fires when the search query has changed.\n   * This is almost like valueInput, but it is debounced\n   * and can be used to trigger a search query without overloading\n   * API endpoints while typing.\n   */\n  @Event() searchQueryChanged: EventEmitter<string>;\n  \n  /** Fires when an item is selected. */\n  @Event() itemSelected: EventEmitter<string>;\n\n  /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n  @Method()\n  async checkValidity(): Promise<ValidityState> {\n    return this.inputField.validity;\n  }\n  \n  /** Can be used to set a custom validity message. */\n  @Method()\n  async setCustomValidity(message: string): Promise<void> {\n    this.customValidityMessage = message;\n    return this.inputField.setCustomValidity(message);\n  }\n\n  @State() focused = false;\n  @State() valid = true;\n  @State() customValidityMessage: string;\n  @State() selectedIndex: number;\n  @State() positionInitialized = false;\n  @State() lastScrollTop = 0;\n  \n  /** attacth the internals for form validation */\n  @AttachInternals() internals: ElementInternals;\n  \n  /** Listener for mouse down event */\n  @Listen(\"click\", { target: \"document\", capture: false })\n  handleOutsideClick(e: MouseEvent) {\n  const path = e.composedPath();\n  if (!path.includes(this.element))\n    {\n      this.focused = false;\n    }\n  }\n  \n  componentDidRender(){\n    if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n      this.adjustDropdownPosition();\n    }\n  }\n\n  private inputField!: HTMLInputElement;\n  private suggestionsContainer: HTMLUListElement;\n  private labelId: string;\n  \n  // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n  formResetCallback() {\n    this.inputField.setCustomValidity(\"\");\n    this.valid = true;\n    this.value = \"\";\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n  \n  private handleInput(e: Event) {\n    const value = (e.target as HTMLInputElement).value;\n    var valid = this.inputField.checkValidity();\n    this.valid = valid;\n    this.valueInput.emit(value);\n    this.handleSearchQueryChanged(value);\n  }\n\n  @Debounce(300)\n  private handleSearchQueryChanged(value: string) {\n    this.searchQueryChanged.emit(value);\n  }\n\n  private handleInvalid(): void {\n    this.valid = false;\n    if (this.customValidityMessage == undefined) {\n      this.customValidityMessage = this.inputField.validationMessage;\n    }\n  }\n\n  private handleChange() {\n    this.valueChange.emit(this.value);\n    if (this.name != undefined) {\n      var data = new FormData();\n      data.append(this.name, this.value.toString());\n      this.internals.setFormValue(data);\n    }\n  }\n\n  /** Check if the label should float */\n  private shouldLabelFloat(): boolean {\n    if (this.focused) {\n      return false;\n    }\n\n    if (this.value != undefined && this.value != \"\") {\n      return false;\n    }\n\n    return true;\n  }\n\n  private findAverageSuggestionHeight(): number {\n    const suggestionItems = this.suggestionsContainer.querySelectorAll(\"li\");\n    var totalHeight = 0;\n    for (let i = 0; i < suggestionItems.length; i++) {\n      totalHeight += suggestionItems[i].clientHeight;\n    }\n    return totalHeight / suggestionItems.length;\n  }\n\n  private readonly adjustDropdownPosition = () => {\n    var itemHeight = this.findAverageSuggestionHeight();\n    requestAnimationFrame(() => {\n      this.positionInitialized = true;\n    });\n\n    // If we can fit 3 items below the input and there is still 3em left, we show the dropdown under.\n    // Otherwise, we show it above.\n    var spaceBelow = window.innerHeight - this.inputField.getBoundingClientRect().bottom;\n    const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);\n    const fitsDown = spaceBelow > 3 * itemHeight + 3 * rem;\n    if (fitsDown) {\n      this.suggestionsContainer.style.top = \"1.2rem\";\n    }\n    else {\n      this.suggestionsContainer.style.bottom = \"1.2rem\";\n    }\n\n    // Set the max height to not overflow the screen.\n    if (fitsDown){\n      this.suggestionsContainer.style.maxHeight = `${spaceBelow - 3 * rem}px`;\n    }\n    else {\n      this.suggestionsContainer.style.maxHeight = `${this.inputField.getBoundingClientRect().top - 3 * rem}px`;\n    }\n\n    this.checkIfMoreItemsNeeded();\n  }\n\n  private handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      if (this.selectedIndex == undefined) {\n        this.selectedIndex = 0;\n      } else {\n        this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n      }\n    }\n    if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      if (this.selectedIndex == undefined) {\n        this.selectedIndex = this.suggestions.length - 1;\n      } else {\n        this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n      }\n    }\n    this.value = this.suggestions[this.selectedIndex]?.value;\n    if (e.key === \"Enter\") {\n      var selectedItem = this.suggestions[this.selectedIndex];\n      this.value = selectedItem.value;\n      this.inputField.value = selectedItem.label;\n      this.itemSelected.emit(selectedItem.value);\n      this.focused = false;\n    }\n    if (e.key === \"Tab\"){\n      this.focused = false;\n    }\n  }\n\n  private selectItem(e: Event, index: number): void {\n    e.preventDefault();\n    e.stopPropagation();\n    this.selectedIndex = index;\n    this.value = this.suggestions[this.selectedIndex].value;\n    this.focused = false;\n    this.itemSelected.emit(this.suggestions[this.selectedIndex].value)\n  }\n\n  private getVirtualScrollHeight(): number {\n    const itemHeight = this.findAverageSuggestionHeight();\n    const upcomingItems = this.totalSuggestions - this.suggestions.length;\n    return itemHeight * upcomingItems;\n  }\n\n  @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  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          invalid={!this.valid}\n          focused={this.focused}\n          label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n          helpText={this.helpText}\n          id={this.labelId}\n          disabled={this.disabled}\n          floatLabel={this.shouldLabelFloat()}\n        >\n          <div class=\"inner-container\">\n            <input\n              ref={(el) => this.inputField = el}\n              name={this.name}\n              type=\"search\"\n              role=\"combobox\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={this.focused.toString()}\n              aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n              disabled={this.disabled}\n              required={this.required}\n              autoComplete=\"off\"\n              value={this.suggestions.length > 0 && this.selectedIndex != undefined ? this.suggestions[this.selectedIndex].label : this.value}\n              onFocus={() => this.focused = true}\n              onBlur={() => this.focused = false}\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.focused = !this.focused}\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":";;;;;;;AAAA,MAAM,kBAAkB,GAAG,klDAAklD,CAAC;AAC9mD,8BAAe,kBAAkB;;;;;;;;;;;;MCSpB,eAAe;;;;;;;;;;;;;;;QA4KT,2BAAsB,GAAG;YACxC,IAAI,UAAU,GAAG,IAAI,CAAC,2BAA2B,EAAE,CAAC;YACpD,qBAAqB,CAAC;gBACpB,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;aACjC,CAAC,CAAC;;;YAIH,IAAI,UAAU,GAAG,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;YACrF,MAAM,GAAG,GAAG,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,CAAC;YAC5E,MAAM,QAAQ,GAAG,UAAU,GAAG,CAAC,GAAG,UAAU,GAAG,CAAC,GAAG,GAAG,CAAC;YACvD,IAAI,QAAQ,EAAE;gBACZ,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC;aAChD;iBACI;gBACH,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC;aACnD;;YAGD,IAAI,QAAQ,EAAC;gBACX,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,UAAU,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC;aACzE;iBACI;gBACH,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC;aAC1G;YAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;SAC/B,CAAA;;;;;;;2BAlLkD,EAAE;;;sCAeZ,IAAI;uBA4C1B,KAAK;qBACP,IAAI;;;mCAGU,KAAK;6BACX,CAAC;;;IAxB1B,MAAM,aAAa;QACjB,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;KACjC;;IAID,MAAM,iBAAiB,CAAC,OAAe;QACrC,IAAI,OAAO,IAAI,SAAS,IAAI,OAAO,IAAI,EAAE,EAAE;YACzC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;YACtC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAChC,OAAO;SACR;QAED,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;KAC3C;;IAcD,kBAAkB,CAAC,CAAa;QAChC,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC;QAC9B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAC9B;YACE,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAC;YAC3E,IAAI,CAAC,sBAAsB,EAAE,CAAC;SAC/B;KACF;;IAQD,iBAAiB;QACf,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;QACtC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;KACjC;IAEO,WAAW,CAAC,CAAQ;QAC1B,MAAM,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;QACnD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;QAC5C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5B,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;KACtC;IAGO,wBAAwB,CAAC,KAAa;QAC5C,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACrC;IAEO,aAAa;QACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,IAAI,CAAC,qBAAqB,IAAI,SAAS,EAAE;YAC3C,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC;SAChE;KACF;IAEO,YAAY;QAClB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClC,IAAI,IAAI,CAAC,IAAI,IAAI,SAAS,EAAE;YAC1B,IAAI,IAAI,GAAG,IAAI,QAAQ,EAAE,CAAC;YAC1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC9C,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;SACnC;KACF;;IAGO,gBAAgB;QACtB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,KAAK,CAAC;SACd;QAED,IAAI,IAAI,CAAC,KAAK,IAAI,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE;YAC/C,OAAO,KAAK,CAAC;SACd;QAED,OAAO,IAAI,CAAC;KACb;IAEO,2BAA2B;QACjC,MAAM,eAAe,GAAG,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACzE,IAAI,WAAW,GAAG,CAAC,CAAC;QACpB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,eAAe,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC/C,WAAW,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;SAChD;QACD,OAAO,WAAW,GAAG,eAAe,CAAC,MAAM,CAAC;KAC7C;IA+BO,aAAa,CAAC,CAAgB;;QACpC,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE;YACzB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,aAAa,IAAI,SAAS,EAAE;gBACnC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;aACxB;iBAAM;gBACL,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;aACpF;SACF;QACD,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,EAAE;YACvB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,aAAa,IAAI,SAAS,EAAE;gBACnC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;aAClD;iBAAM;gBACL,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;aAC1D;SACF;QACD,IAAI,CAAC,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,0CAAE,KAAK,KAAI,IAAI,CAAC,KAAK,CAAC;QACvE,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACrB,IAAI,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACxD,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC;YAChC,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC;YAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;YAC3C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;QACD,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAC;YAClB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAEO,UAAU,CAAC,CAAQ,EAAE,KAAa;QACxC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC;QACxD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,CAAA;KACnE;IAEO,sBAAsB;QAC5B,MAAM,UAAU,GAAG,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACtD,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;QACtE,OAAO,UAAU,GAAG,aAAa,CAAC;KACnC;IAEO,mBAAmB;QACzB,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3C;IAGO,uBAAuB;QAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,CAAC;QAC5C,MAAM,gBAAgB,GAAG,SAAS,CAAC,SAAS,CAAC;;QAG7C,IAAI,gBAAgB,GAAG,IAAI,CAAC,aAAa,EAAE;YACzC,MAAM,UAAU,GAAG,SAAS,CAAC,aAAa,CAAC,UAAU,CAAmB,CAAC;YAEzE,IAAI,UAAU,IAAI,SAAS,EAAE;gBAC3B,IAAI,CAAC,aAAa,GAAG,gBAAgB,CAAC;gBACtC,OAAO;aACR;YAED,MAAM,kBAAkB,GAAG,UAAU,CAAC,SAAS,CAAC;YAChD,MAAM,gBAAgB,GAAG,UAAU,CAAC,YAAY,CAAC;YACjD,MAAM,gBAAgB,GAAG,kBAAkB,GAAG,gBAAgB,CAAC;;YAG/D,MAAM,aAAa,GAAG,gBAAgB,GAAG,SAAS,CAAC,YAAY,CAAC;;YAGhE,IAAI,aAAa,GAAG,gBAAgB,EAAE;;gBAEpC,SAAS,CAAC,SAAS,GAAG,gBAAgB,GAAG,SAAS,CAAC,YAAY,CAAC;aACjE;;YAGD,IAAI,CAAC,sBAAsB,EAAE,CAAC;SAC/B;;QAGD,IAAI,CAAC,aAAa,GAAG,gBAAgB,CAAC;KACvC;IAGO,sBAAsB;QAC5B,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,CAAC;QAE5C,MAAM,UAAU,GAAG,SAAS,CAAC,aAAa,CAAC,UAAU,CAAmB,CAAC;QACzE,IAAI,UAAU,IAAI,SAAS;YAAE,OAAO;QAEpC,MAAM,cAAc,GAAG,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,YAAY,CAAC;QACpE,MAAM,kBAAkB,GAAG,UAAU,CAAC,SAAS,CAAC;;QAGhD,IAAI,kBAAkB,GAAG,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE;YACrE,MAAM,SAAS,GAA2B;gBACxC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK;aAClC,CAAC;YACF,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACpC;KACF;IAED,UAAU;QACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;QACpB,IAAI,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;QAC/C,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;QACvE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;KACzF;IAED,MAAM;;QACJ,QACEA,QAACC,UAAI,qDACH,QAAQ,EAAE,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAC,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,EACtC,MAAM,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,IAEpCD,2EACE,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,EAC7B,OAAO,EAAE,CAAC,IAAI,CAAC,KAAK,EACpB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,EAAE,EAAE,EACxD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAEnCA,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,oEACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAE,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,mBACD,SAAS,mBACR,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,2BACf,IAAI,CAAC,aAAa,KAAK,SAAS,GAAG,UAAU,IAAI,CAAC,aAAa,EAAE,GAAG,SAAS,EACpG,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,aAAa,IAAI,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAC/H,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,IAAI,EAClC,MAAM,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAC/B,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,SAAS,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,EACrC,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,qBAClB,IAAI,CAAC,OAAO,EAC7B,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GACrC,EACFA,iEACE,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,MAAM,GAAG,EAAE,EAChE,IAAI,EAAC,SAAS,EACd,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,oBAAoB,GAAG,EAAE,EACzC,QAAQ,EAAE,MAAM,IAAI,CAAC,uBAAuB,EAAE,IAE7C,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAEE,OAAK,MACtCF,gBACE,EAAE,EAAE,UAAUE,OAAK,EAAE,EACrB,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,aAAa,IAAIA,OAAK,EAC1C,KAAK,EAAE,IAAI,CAAC,aAAa,IAAIA,OAAK,GAAG,UAAU,GAAG,EAAE,EACpD,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,EAAEA,OAAK,CAAC,IAEtC,IAAI,CAAC,gBAAgB,IAAI,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC,KAAK,CACvF,CACN,CAAC,EACD,IAAI,CAAC,gBAAgB,IAAI,SAAS,IAAI,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM;YACpFF,kEAAK,KAAK,EAAC,SAAS,GACd,EAEP,IAAI,CAAC,gBAAgB,IAAI,SAAS,IAAI,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,IAAI,IAAI,CAAC,mBAAmB;YAChHA,kEAAK,KAAK,EAAE,EAAC,MAAM,EAAE,GAAG,IAAI,CAAC,sBAAsB,EAAE,IAAI,EAAC,GACpD,CAEL,EACLA,kEACE,OAAO,EAAE,MAAM,IAAI,CAAC,mBAAmB,EAAE,EACzC,KAAK,EAAC,cAAc,EACpB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,gBAAgB,IACxBA,mEAAM,CAAC,EAAC,uDAAuD,GAAE,CAC7D,CACF,CACO,CACV,EACP;KACH;;;;AAjQO;IADPG,iBAAQ,CAAC,GAAG,CAAC;+DAGb;AAuHO;IADPA,iBAAQ,CAAC,GAAG,CAAC;8DAiCb;AAGO;IADPA,iBAAQ,EAAE;6DAiBV;;;;;","names":["h","Host","index","Debounce"],"sources":["src/components/dnn-autocomplete/dnn-autocomplete.scss?tag=dnn-autocomplete&encapsulation=shadow","src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  /** @prop --foreground-color: Defines the foreground color. */\n  --foreground-color: var(--dnn-color-foreground, #000);\n\n  /** @prop --background-color: Defines the background color. */\n  --background-color: var(--dnn-color-background, #fff);\n\n  /** @prop --focus-color: Defines the color when the component is focused. */\n  --focus-color: var(--dnn-color-primary, #3792ED);\n\n  /** @prop --danger-color: Defines the danger color used for invalid data. */\n  --danger-color: var(--dnn-color-danger, #900);\n\n  /** @prop --control-radius: Defines the radius for the control corners. */\n  --control-radius: var(--dnn-controls-radius, 3px);\n}\n\ndnn-fieldset{\n  width: 100%;\n}\n\n@keyframes shift {\n  0% {\n      background-position: 0% 0;\n  }\n  50% {\n      background-position: 100% 0;\n  }\n  100% {\n      background-position: 200% 0;\n  }\n}\n\n.inner-container{\n  display: flex;\n  justify-content: space-between;\n  position: relative;\n  width: 100%;\n\n  input {\n    border: none;\n    outline: none;\n    background-color: transparent;\n    color: var(--foreground-color);\n    text-align: var(--input-text-align);\n    width: 100%;\n  }\n\n  svg.chevron-down{\n    height: 1rem;\n    width: auto;\n    transform: scale(1.2);\n    cursor: pointer;\n  }\n\n  ul{\n    position: absolute;\n    border: 1px solid lightgray;\n    margin: 0;\n    padding: var(--dnn-controls-radius, 3px) 0;\n    overflow-y: auto;\n    width: 100%;\n    box-shadow: 2px 2px 6px 1px rgb(0 0 0 / 30%);\n    background-color: var(--dnn-color-background, white);\n    border-radius: var(--dnn-controls-radius, 3px);\n    z-index: 2;\n    display: none;\n    scroll-behavior: smooth;\n    &.show{\n      display: block;\n    }\n    li {\n      display: block;\n      list-style-type: none;\n      cursor: pointer;\n      padding: 0 0.5rem;\n      &.selected {\n        background-color: lightgray;\n      }\n      &:hover {\n        background-color: lightgray;\n      }\n    }\n    .loading {\n      width: 100%;\n      height: 0.5rem;\n      border-radius: 0.5rem;\n      background: linear-gradient(\n        to right,\n        var(--background-color) 0%,\n        var(--foreground-color) 50%,\n        var(--background-color) 100%);\n      background-size: 200% 100%;\n      animation: shift 2s linear infinite;\n      width: 75%;\n      margin: 0 auto;\n      opacity: 0.5;\n    }\n  }\n}\n","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n  tag: 'dnn-autocomplete',\n  styleUrl: 'dnn-autocomplete.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n  /** The label for this autocomplete. */\n  @Prop() label: string;\n\n  /** The name for this autocomplete when used in forms. */\n  @Prop() name: string;\n\n  /** Defines the help label displayed under the field. */\n  @Prop() helpText: string;\n\n  /** Defines the value for this autocomplete */\n  @Prop({mutable: true, reflect: true}) value: string;\n\n  /** Defines whether the field requires having a value. */\n  @Prop() required: boolean;\n\n  /** Defines whether the field is disabled. */\n  @Prop() disabled: boolean;\n\n  /** Sets the list of suggestions. */\n  @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n  /** Callback to render suggestions, if not provided, only the label will be rendered. */\n  @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n\n  /** The total amount of suggestions for the given search query.\n   * This can be used to show virtual scroll and pagination progressive feeding.\n   * The needMoreItems event should be used to request more items.\n   */\n  @Prop() totalSuggestions: number;\n\n  /** How many suggestions to preload in pixels of their height.\n   * This is used to calculate the virtual scroll height and request\n   * more items before they get into view.\n   */\n  @Prop() preloadThresholdPixels: number = 1000;\n\n  @Element() element: HTMLDnnAutocompleteElement;\n\n  /** Fires when the value has changed and the user exits the input. */\n  @Event() valueChange: EventEmitter<number | string | string[]>;\n\n  /** Fires when the using is inputing data (on keystrokes). */\n  @Event() valueInput: EventEmitter<number | string | string[]>;\n\n  /** Fires when the component needs to display more items in the suggestions. */\n  @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n  /** Fires when the search query has changed.\n   * This is almost like valueInput, but it is debounced\n   * and can be used to trigger a search query without overloading\n   * API endpoints while typing.\n   */\n  @Event() searchQueryChanged: EventEmitter<string>;\n  \n  /** Fires when an item is selected. */\n  @Event() itemSelected: EventEmitter<string>;\n\n  /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n  @Method()\n  async checkValidity(): Promise<ValidityState> {\n    return this.inputField.validity;\n  }\n  \n  /** Can be used to set a custom validity message. */\n  @Method()\n  async setCustomValidity(message: string): Promise<void> {\n    if (message == undefined || message == \"\") {\n      this.inputField.setCustomValidity(\"\");\n      this.valid = true;\n      this.fieldset.setValidity(true);\n      return;\n    }\n\n    this.inputField.setCustomValidity(message);\n    this.valid = false;\n    this.fieldset.setValidity(false, message);\n  }\n\n  @State() focused = false;\n  @State() valid = true;\n  @State() customValidityMessage: string;\n  @State() selectedIndex: number;\n  @State() positionInitialized = false;\n  @State() lastScrollTop = 0;\n  \n  /** attacth the internals for form validation */\n  @AttachInternals() internals: ElementInternals;\n  \n  /** Listener for mouse down event */\n  @Listen(\"click\", { target: \"document\", capture: false })\n  handleOutsideClick(e: MouseEvent) {\n  const path = e.composedPath();\n  if (!path.includes(this.element))\n    {\n      this.focused = false;\n    }\n  }\n  \n  componentDidRender(){\n    if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n      this.adjustDropdownPosition();\n    }\n  }\n\n  private inputField!: HTMLInputElement;\n  private suggestionsContainer: HTMLUListElement;\n  private labelId: string;\n  private fieldset: HTMLDnnFieldsetElement;\n  \n  // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n  formResetCallback() {\n    this.inputField.setCustomValidity(\"\");\n    this.valid = true;\n    this.value = \"\";\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n  \n  private handleInput(e: Event) {\n    const value = (e.target as HTMLInputElement).value;\n    this.value = value;\n    var valid = this.inputField.checkValidity();\n    this.valid = valid;\n    this.valueInput.emit(value);\n    this.handleSearchQueryChanged(value);\n  }\n\n  @Debounce(300)\n  private handleSearchQueryChanged(value: string) {\n    this.searchQueryChanged.emit(value);\n  }\n\n  private handleInvalid(): void {\n    this.valid = false;\n    if (this.customValidityMessage == undefined) {\n      this.customValidityMessage = this.inputField.validationMessage;\n    }\n  }\n\n  private handleChange() {\n    this.valueChange.emit(this.value);\n    if (this.name != undefined) {\n      var data = new FormData();\n      data.append(this.name, this.value.toString());\n      this.internals.setFormValue(data);\n    }\n  }\n\n  /** Check if the label should float */\n  private shouldLabelFloat(): boolean {\n    if (this.focused) {\n      return false;\n    }\n\n    if (this.value != undefined && this.value != \"\") {\n      return false;\n    }\n\n    return true;\n  }\n\n  private findAverageSuggestionHeight(): number {\n    const suggestionItems = this.suggestionsContainer.querySelectorAll(\"li\");\n    var totalHeight = 0;\n    for (let i = 0; i < suggestionItems.length; i++) {\n      totalHeight += suggestionItems[i].clientHeight;\n    }\n    return totalHeight / suggestionItems.length;\n  }\n\n  private readonly adjustDropdownPosition = () => {\n    var itemHeight = this.findAverageSuggestionHeight();\n    requestAnimationFrame(() => {\n      this.positionInitialized = true;\n    });\n\n    // If we can fit 3 items below the input and there is still 3em left, we show the dropdown under.\n    // Otherwise, we show it above.\n    var spaceBelow = window.innerHeight - this.inputField.getBoundingClientRect().bottom;\n    const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);\n    const fitsDown = spaceBelow > 3 * itemHeight + 3 * rem;\n    if (fitsDown) {\n      this.suggestionsContainer.style.top = \"1.2rem\";\n    }\n    else {\n      this.suggestionsContainer.style.bottom = \"1.2rem\";\n    }\n\n    // Set the max height to not overflow the screen.\n    if (fitsDown){\n      this.suggestionsContainer.style.maxHeight = `${spaceBelow - 3 * rem}px`;\n    }\n    else {\n      this.suggestionsContainer.style.maxHeight = `${this.inputField.getBoundingClientRect().top - 3 * rem}px`;\n    }\n\n    this.checkIfMoreItemsNeeded();\n  }\n\n  private handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      if (this.selectedIndex == undefined) {\n        this.selectedIndex = 0;\n      } else {\n        this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n      }\n    }\n    if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      if (this.selectedIndex == undefined) {\n        this.selectedIndex = this.suggestions.length - 1;\n      } else {\n        this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n      }\n    }\n    this.value = this.suggestions[this.selectedIndex]?.value || this.value;\n    if (e.key === \"Enter\") {\n      var selectedItem = this.suggestions[this.selectedIndex];\n      this.value = selectedItem.value;\n      this.inputField.value = selectedItem.label;\n      this.itemSelected.emit(selectedItem.value);\n      this.focused = false;\n    }\n    if (e.key === \"Tab\"){\n      this.focused = false;\n    }\n  }\n\n  private selectItem(e: Event, index: number): void {\n    e.preventDefault();\n    e.stopPropagation();\n    this.selectedIndex = index;\n    this.value = this.suggestions[this.selectedIndex].value;\n    this.focused = false;\n    this.itemSelected.emit(this.suggestions[this.selectedIndex].value)\n  }\n\n  private getVirtualScrollHeight(): number {\n    const itemHeight = this.findAverageSuggestionHeight();\n    const upcomingItems = this.totalSuggestions - this.suggestions.length;\n    return itemHeight * upcomingItems;\n  }\n\n  private handleDropdownClick(): void {\n    this.handleSearchQueryChanged(this.value);\n  }\n\n  @Debounce(100)\n  private handleSuggestionsScroll(): void {\n    const container = this.suggestionsContainer;\n    const currentScrollTop = container.scrollTop;\n\n    // Only act if we are scrolling down\n    if (currentScrollTop > this.lastScrollTop) {\n      const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n      if (loadingDiv == undefined) {\n        this.lastScrollTop = currentScrollTop;\n        return;\n      }\n\n      const loadingDivPosition = loadingDiv.offsetTop;\n      const loadingDivHeight = loadingDiv.offsetHeight;\n      const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n      // Calculate the visible bottom of the scroll container\n      const visibleBottom = currentScrollTop + container.clientHeight;\n\n      // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n      if (visibleBottom > loadingDivBottom) {\n        // Adjust scrollTop so it doesn't scroll past the loading div\n        container.scrollTop = loadingDivBottom - container.clientHeight;\n      }\n\n      // Check if more items are needed based on the position of the loading div\n      this.checkIfMoreItemsNeeded();\n    }\n\n    // Update the last scroll position\n    this.lastScrollTop = currentScrollTop;\n  }\n\n  @Debounce()\n  private checkIfMoreItemsNeeded() {\n    const container = this.suggestionsContainer;\n  \n    const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n    if (loadingDiv == undefined) return; // Exit if there's no loading div\n  \n    const scrollPosition = container.scrollTop + container.clientHeight;\n    const loadingDivPosition = loadingDiv.offsetTop;\n  \n    // Check if the loading div is within the threshold of becoming visible\n    if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n      const eventArgs: NeedMoreItemsEventArgs = {\n        searchTerm: this.inputField.value,\n      };\n      this.needMoreItems.emit(eventArgs);\n    }\n  }\n\n  handleBlur(): void {\n    this.focused = false\n    var validity = this.inputField.checkValidity();\n    this.valid = validity;\n    this.fieldset.setValidity(validity, this.inputField.validationMessage);\n    this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n  }\n\n  render() {\n    return (\n      <Host\n        tabIndex={this.focused ? -1 : 0}\n        onFocus={() => this.inputField.focus()}\n        onBlur={() => this.inputField.blur()}\n      >\n        <dnn-fieldset\n          ref={el => this.fieldset = el}\n          invalid={!this.valid}\n          focused={this.focused}\n          label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n          helpText={this.helpText}\n          id={this.labelId}\n          disabled={this.disabled}\n          floatLabel={this.shouldLabelFloat()}\n        >\n          <div class=\"inner-container\">\n            <input\n              ref={(el) => this.inputField = el}\n              name={this.name}\n              type=\"search\"\n              role=\"combobox\"\n              aria-haspopup=\"listbox\"\n              aria-expanded={this.focused.toString()}\n              aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n              disabled={this.disabled}\n              required={this.required}\n              autoComplete=\"off\"\n              value={this.suggestions.length > 0 && this.selectedIndex != undefined ? this.suggestions[this.selectedIndex].label : this.value}\n              onFocus={() => this.focused = true}\n              onBlur={() => this.handleBlur()}\n              onInput={e => this.handleInput(e)}\n              onInvalid={() => this.handleInvalid()}\n              onChange={() => this.handleChange()}\n              aria-labelledby={this.labelId}\n              onKeyDown={e => this.handleKeyDown(e)}\n            />\n            <ul\n              class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n              role=\"listbox\"\n              ref={el => this.suggestionsContainer = el}\n              onScroll={() => this.handleSuggestionsScroll()}\n            >\n              {this.suggestions.map((suggestion, index) => (\n                <li\n                  id={`option-${index}`}\n                  role=\"option\"\n                  aria-selected={this.selectedIndex == index}\n                  class={this.selectedIndex == index ? \"selected\" : \"\"}\n                  onClick={e => this.selectItem(e, index)}\n                >\n                  {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n                </li>\n              ))}\n              {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n                <div class=\"loading\">\n                </div>\n              }\n              {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n                <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n                </div>\n              }\n            </ul>\n            <svg\n              onClick={() => this.handleDropdownClick()}\n              class=\"chevron-down\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 -960 960 960\">\n              <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n            </svg>\n          </div>\n        </dnn-fieldset>\n      </Host>\n    );\n  }\n}"],"version":3}

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

@@ -24,6 +24,9 @@ const DnnCheckbox = class {
         this.name = undefined;
         this.focused = false;
     }
+    handleClick() {
+        this.changeState();
+    }
     componentWillLoad() {
         this.originalChecked = this.checked;
         this.internals.setFormValue(this.checked);
@@ -68,7 +71,7 @@ const DnnCheckbox = class {
         this.checkedchange.emit(this.checked);
     }
     render() {
-        return (index.h(index.Host, { key: 'ac034f8c5cd0fe52bc1a87944e3275ad27284c25', tabIndex: this.focused ? -1 : 0, onFocus: () => this.button.focus(), onBlur: () => this.button.blur() }, index.h("button", { key: 'f4d54a33cee25750fc71a235e069ceddaab847d8', ref: el => this.button = el, onFocus: () => this.focused = true, onBlur: () => this.focused = false, class: `icon ${this.checked}`, onClick: () => this.changeState() }, index.h("div", { key: '351f38bc6b3b3ad4d0bd3eb256311e09e98eed20', class: "unchecked" }, index.h("slot", { key: 'a9be931a7a1aaf92fd9abea8ee07d52ec5f1d508', name: "uncheckedicon" }, index.h("svg", { key: 'b9dec5662853d56ce6e93945658f7efdbe1d26bb', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { key: 'fe214887a46555c54ea4fb11fb5ebddf1284ba13', d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: '3326012fb363c5a4f5b6087121d644abc0ff949a', d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" })))), index.h("div", { key: '4f934cc069ee45dc415cde5466d76e19576adc72', class: "checked" }, index.h("slot", { key: 'dbc74d8f135314b1fd290e1475f6f904a94939ef', name: "checkedicon" }, index.h("svg", { key: '4f1afd43e19a8a41f4911e0857b2ba63a5eceb06', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { key: '140bd5ed5acb3ea90ea5de75c715d309cf630d86', d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: 'd10bb8adfc9de857b491a7695fb94ec1ec3dfb05', d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })))), index.h("div", { key: 'f74af476960988befb6340ddae07f817154871aa', class: "intermediate" }, index.h("slot", { key: '2e0424ce5be3a2feaa9c776c15ec0e7124c6a010', name: "intermediateicon" }, index.h("svg", { key: '853adcd4c81a47ae3b72e501728513701c702e49', class: "undefined", xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("g", { key: '81cf795ceea945b248edf1a8dc873a7ee14edf28' }, index.h("rect", { key: '1d5d922cee5a44d69a42de6b191f393d679f8cd1', fill: "none", height: "24", width: "24" })), index.h("g", { key: 'fc1800944bf3456bbe284a833caec298c883db12' }, index.h("g", { key: '8d5254588237a41d38dfd0ac7765908d263fdadb' }, index.h("g", { key: '9cd077df9025fb9af99e35fdf8bb570d060a0b69' }, index.h("path", { key: '0e7d61eb4bd08739aef220ffcf9e67d7b876e5fc', d: "M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z" })))))))), index.h("label", { key: '250900afeadd74a93e0f71ba043e78149af9c1b8', htmlFor: this.el.id, onClick: () => this.changeState() }, index.h("slot", { key: '3358f6ecb4e50480bec6098d8edeed3a8a7c10bd' }))));
+        return (index.h(index.Host, { key: '33f0a20c02ea3d1be40803102dca7298fc9f0a8d', tabIndex: this.focused ? -1 : 0, onFocus: () => this.button.focus(), onBlur: () => this.button.blur() }, index.h("button", { key: '7249f860fea2548cd7469daf88594ceaa36ad69c', ref: el => this.button = el, onFocus: () => this.focused = true, onBlur: () => this.focused = false, class: `icon ${this.checked}` }, index.h("div", { key: '8033ce35b1ad4733c5bc3151e183bcef5ad3608c', class: "unchecked" }, index.h("slot", { key: 'bd22365edda141a1d99f12197579ef08f145e298', name: "uncheckedicon" }, index.h("svg", { key: 'b8fdd87c069040ec31552c9c97fe9a73d6b1566b', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { key: '786778ac6170c2efe8e60399ce377cb3f4b81496', d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: '2875985769c607626e17552bc86ee7eef8f1bd2b', d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" })))), index.h("div", { key: '3b1022f97690827381751638a2326806f6bbc914', class: "checked" }, index.h("slot", { key: 'd47bf5c9b8227f72f5af9d8a9497ef90fe9ed54a', name: "checkedicon" }, index.h("svg", { key: '579f8cedf788976a23929f230afe489be49056a3', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { key: 'a22e16649d8fcbae5f382f585ec44d877592d072', d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: 'f851cbcf9ff4ea371c3abeb9fdfbd73199d95633', d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })))), index.h("div", { key: 'dac2ba83db7a5f2a791db48ef4366c846ece0ac1', class: "intermediate" }, index.h("slot", { key: '99794fb6b191a7c61efcf77683125d5e38075347', name: "intermediateicon" }, index.h("svg", { key: 'b3c5fa7961169fd5ea9437346cd5246a3c3f2dc3', class: "undefined", xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("g", { key: '53bfc9815a54ee36bd9cde2b35ca35bdb052a559' }, index.h("rect", { key: '6938a2a44ea6a23b3896ea7186d1109d2e06b4f8', fill: "none", height: "24", width: "24" })), index.h("g", { key: 'beea185432ee31b13f4368cd288195fda4798569' }, index.h("g", { key: '8c9b0636ce4685fd714ae76d2cd8e63ffdc0e590' }, index.h("g", { key: 'b6a8198cb9067af8bd439948e2a23e58b6ff29dc' }, index.h("path", { key: '5e0f01cc5c7033845f7f41f3721e903cc8436f91', d: "M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z" }))))))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

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

@@ -1 +1 @@
-{"file":"dnn-checkbox.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/dnn-checkbox/dnn-checkbox.scss?tag=dnn-checkbox&encapsulation=shadow","src/components/dnn-checkbox/dnn-checkbox.tsx"],"sourcesContent":[":host {\n    /**\n    * @prop --focus-color: The color to outline the checkbox when hovered or focused, default to the dnn primary color.\n    */\n  --focus-color: var(--dnn-color-primary, #3792ED);\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  margin: 3px;\n}\nbutton{\n  cursor: pointer; \n  background-color: transparent;\n  border: 0;\n  padding: 0;\n  margin: 0;\n  outline: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  .unchecked, .checked, .intermediate{\n    display: none;\n  }\n  &.checked .checked, &.unchecked .unchecked, &.intermediate .intermediate{\n    display: block;\n  }\n  svg.undefined{\n    opacity: 0.45;\n    cursor: default;\n  }\n  &:focus-visible{\n    box-shadow: 0 0 2px 2px var(--focus-color);\n  }\n}\nlabel {\n  cursor: pointer; \n}","import { Component, Element, Host, h, Prop, Event, EventEmitter, AttachInternals, Watch, State } from '@stencil/core';\nimport { CheckedState } from './types';\n\n/**\n * @slot - The label for the checkbox.\n * @slot checkedicon - Allows overriding the default checked icon.\n * @slot uncheckedicon - Allows overriding the unchecked icon.\n * @slot intermediateicon - If intermadiate state is used, allows overriding its icon.\n */\n@Component({\n  tag: 'dnn-checkbox',\n  styleUrl: 'dnn-checkbox.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DnnCheckbox {\n  @Element() el: HTMLDnnCheckboxElement;\n\n  /** Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) */\n  @Prop({mutable: true}) checked: CheckedState = \"unchecked\";\n\n  /** Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) */\n  @Prop() useIntermediate: boolean = false;\n\n  /** The value for this checkbox (not to be confused with its checked state). */\n  @Prop() value: string = \"on\";\n\n  /** The name to show in the formData (if using forms). */\n  @Prop() name: string;\n\n  /** Fires up when the checkbox checked property changes. */\n  @Event() checkedchange: EventEmitter<\"checked\" | \"unchecked\" | \"intermediate\">;\n\n  @State() focused = false;\n  \n  @AttachInternals() internals: ElementInternals;\n  \n  private originalChecked: CheckedState;\n  private button: HTMLButtonElement;\n\n  componentWillLoad() {\n    this.originalChecked = this.checked;\n    this.internals.setFormValue(this.checked);\n  }\n\n  @Watch(\"checked\")\n  handleCheckedChange(newValue: CheckedState, oldValue: CheckedState) {\n    if (newValue !== oldValue && this.checked == \"checked\") {\n      var data = new FormData();\n      data.append(this.name, this.value);\n      this.internals.setFormValue(data);\n    }\n  }\n\n  // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n  formResetCallback() {\n    this.internals.setValidity({});\n    this.checked = this.originalChecked;\n  }\n\n  private changeState(): void {\n    if (!this.useIntermediate){\n      switch (this.checked) {\n        case \"checked\":\n          this.checked = \"unchecked\";\n          break;\n        case \"unchecked\":\n        case \"intermediate\":\n          this.checked = \"checked\";\n          break;\n        default:\n          break;\n      }\n      this.checkedchange.emit(this.checked);\n      return;\n    }\n    switch (this.checked) {\n      case \"checked\":\n        this.checked = \"intermediate\";\n        break;\n      case \"intermediate\":\n        this.checked = \"unchecked\";\n        break;\n      case \"unchecked\":\n        this.checked = \"checked\";\n        break;\n      default:\n        break;\n    }\n    this.checkedchange.emit(this.checked);\n  }\n\n  render() {\n    return (\n      <Host\n        tabIndex={this.focused ? -1 : 0}\n        onFocus={() => this.button.focus()}\n        onBlur={() => this.button.blur()}\n      >\n        <button\n          ref={el => this.button = el}\n          onFocus={() => this.focused = true}\n          onBlur={() => this.focused = false}\n          class={`icon ${this.checked}`}\n          onClick={() => this.changeState()}\n        >\n          <div class=\"unchecked\">\n            <slot name=\"uncheckedicon\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\"/></svg>\n            </slot>\n          </div>\n          <div class=\"checked\">\n            <slot name=\"checkedicon\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/></svg>\n            </slot>\n          </div>\n          <div class=\"intermediate\">\n            <slot name=\"intermediateicon\">\n              <svg class=\"undefined\" xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><g><rect fill=\"none\" height=\"24\" width=\"24\"/></g><g><g><g><path d=\"M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z\"/></g></g></g></svg>\n            </slot>\n          </div>\n        </button>\n        <label htmlFor={this.el.id} onClick={() => this.changeState()}><slot></slot></label>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"dnn-checkbox.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/dnn-checkbox/dnn-checkbox.scss?tag=dnn-checkbox&encapsulation=shadow","src/components/dnn-checkbox/dnn-checkbox.tsx"],"sourcesContent":[":host {\n    /**\n    * @prop --focus-color: The color to outline the checkbox when hovered or focused, default to the dnn primary color.\n    */\n  --focus-color: var(--dnn-color-primary, #3792ED);\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  margin: 3px;\n}\nbutton{\n  cursor: pointer; \n  background-color: transparent;\n  border: 0;\n  padding: 0;\n  margin: 0;\n  outline: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  .unchecked, .checked, .intermediate{\n    display: none;\n  }\n  &.checked .checked, &.unchecked .unchecked, &.intermediate .intermediate{\n    display: block;\n  }\n  svg.undefined{\n    opacity: 0.45;\n    cursor: default;\n  }\n  &:focus-visible{\n    box-shadow: 0 0 2px 2px var(--focus-color);\n  }\n}\nlabel {\n  cursor: pointer; \n}","import { Component, Element, Host, h, Prop, Event, EventEmitter, AttachInternals, Watch, State, Listen } from '@stencil/core';\nimport { CheckedState } from './types';\n\n/**\n * @slot @deprecated - The label for the checkbox - Obsolete, implement your own label.\n * @slot checkedicon - Allows overriding the default checked icon.\n * @slot uncheckedicon - Allows overriding the unchecked icon.\n * @slot intermediateicon - If intermadiate state is used, allows overriding its icon.\n */\n@Component({\n  tag: 'dnn-checkbox',\n  styleUrl: 'dnn-checkbox.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DnnCheckbox {\n  @Element() el: HTMLDnnCheckboxElement;\n\n  /** Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) */\n  @Prop({mutable: true}) checked: CheckedState = \"unchecked\";\n\n  /** Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) */\n  @Prop() useIntermediate: boolean = false;\n\n  /** The value for this checkbox (not to be confused with its checked state). */\n  @Prop() value: string = \"on\";\n\n  /** The name to show in the formData (if using forms). */\n  @Prop() name: string;\n\n  /** Fires up when the checkbox checked property changes. */\n  @Event() checkedchange: EventEmitter<\"checked\" | \"unchecked\" | \"intermediate\">;\n\n  @Listen(\"click\", { capture: true })\n  handleClick() {\n    this.changeState();\n  }\n\n  @State() focused = false;\n  \n  @AttachInternals() internals: ElementInternals;\n  \n  private originalChecked: CheckedState;\n  private button: HTMLButtonElement;\n\n  componentWillLoad() {\n    this.originalChecked = this.checked;\n    this.internals.setFormValue(this.checked);\n  }\n\n  @Watch(\"checked\")\n  handleCheckedChange(newValue: CheckedState, oldValue: CheckedState) {\n    if (newValue !== oldValue && this.checked == \"checked\") {\n      var data = new FormData();\n      data.append(this.name, this.value);\n      this.internals.setFormValue(data);\n    }\n  }\n\n  // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n  formResetCallback() {\n    this.internals.setValidity({});\n    this.checked = this.originalChecked;\n  }\n\n  private changeState(): void {\n    if (!this.useIntermediate){\n      switch (this.checked) {\n        case \"checked\":\n          this.checked = \"unchecked\";\n          break;\n        case \"unchecked\":\n        case \"intermediate\":\n          this.checked = \"checked\";\n          break;\n        default:\n          break;\n      }\n      this.checkedchange.emit(this.checked);\n      return;\n    }\n    switch (this.checked) {\n      case \"checked\":\n        this.checked = \"intermediate\";\n        break;\n      case \"intermediate\":\n        this.checked = \"unchecked\";\n        break;\n      case \"unchecked\":\n        this.checked = \"checked\";\n        break;\n      default:\n        break;\n    }\n    this.checkedchange.emit(this.checked);\n  }\n\n  render() {\n    return (\n      <Host\n        tabIndex={this.focused ? -1 : 0}\n        onFocus={() => this.button.focus()}\n        onBlur={() => this.button.blur()}\n      >\n        <button\n          ref={el => this.button = el}\n          onFocus={() => this.focused = true}\n          onBlur={() => this.focused = false}\n          class={`icon ${this.checked}`}\n        >\n          <div class=\"unchecked\">\n            <slot name=\"uncheckedicon\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\"/></svg>\n            </slot>\n          </div>\n          <div class=\"checked\">\n            <slot name=\"checkedicon\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/></svg>\n            </slot>\n          </div>\n          <div class=\"intermediate\">\n            <slot name=\"intermediateicon\">\n              <svg class=\"undefined\" xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><g><rect fill=\"none\" height=\"24\" width=\"24\"/></g><g><g><g><path d=\"M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z\"/></g></g></g></svg>\n            </slot>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -20,7 +20,7 @@ const DnnChevron = class {
         this.changed.emit(newValue);
     }
     render() {
-        return (index.h(index.Host, { key: '6c38c47a7df1c0851c0451ecd6d415b129d63b54', tabIndex: this.focused ? -1 : 0, onFocus: () => this.button.focus(), onBlur: () => this.button.blur() }, index.h("button", { key: 'bae33a5e5b469d1c9100af967543050b83e7a172', ref: el => this.button = el, "aria-label": this.expanded ? this.collapseText : this.expandText, onClick: () => this.expanded = !this.expanded, onFocus: () => this.focused = true, onBlur: () => this.focused = false }, index.h("svg", { key: '205404546336be1b66b3c8a5f9ddb5a44e2e0964', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { key: '91de31c736de687ae6c77dc28264c043b80563f1', d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: 'c30e3a044c91d50140393ddfe24869d32b6a776f', d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" })))));
+        return (index.h(index.Host, { key: 'ee94a5e40e8df1d4c9b6816c0419aadd696167c0', tabIndex: this.focused ? -1 : 0, onFocus: () => this.button.focus(), onBlur: () => this.button.blur() }, index.h("button", { key: '229b59723b03b0f83cbaaa5952059fa2ad0aa265', ref: el => this.button = el, "aria-label": this.expanded ? this.collapseText : this.expandText, onClick: () => this.expanded = !this.expanded, onFocus: () => this.focused = true, onBlur: () => this.focused = false }, index.h("svg", { key: '286451ec61c1704a7ed4fcf7ca942327835feebc', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { key: 'aa1016e8bae25bceba593d7ffa3d37384b74dce6', d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: '38829c57c40f2818ecaa1f464fc53c7104a244b5', d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" })))));
     }
     static get watchers() { return {
         "expanded": ["handleExpandedChanged"]

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

@@ -54,7 +54,7 @@ const DnnCollapsible = class {
         this.container.style.transition = `max-height ${this.transitionDuration}ms ease-in-out`;
     }
     render() {
-        return (index.h(index.Host, { key: 'cfc99de9b30d157279893315946fa8b789f7dfb4' }, index.h("div", { key: '879c465670e98b5e3ce8dbc911c31e07f45a3087', id: "container", class: this.expanded && "expanded", ref: el => this.container = el, style: { transition: `max-height ${this.transitionDuration}ms ease-in-out` } }, index.h("slot", { key: '9cf1aa532dc647037f0b1f8014c5567db11863b0' }))));
+        return (index.h(index.Host, { key: '76ba7514e40374f07a9908ea63555688b10a09f1' }, index.h("div", { key: 'cac471cb9f670f6eab23aa85caaf94530d9d689c', id: "container", class: this.expanded && "expanded", ref: el => this.container = el, style: { transition: `max-height ${this.transitionDuration}ms ease-in-out` } }, index.h("slot", { key: 'b1fb33ad2ce23cd1d5fceec433b759f523b83fd4' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/dnn-color-input.cjs.entry.js

@@ -100,20 +100,20 @@ const DnnColorInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (index.h(index.Host, { key: '9a97a5d68109c26554b2efcd67bade4fa32fe24e', tabIndex: this.focused ? -1 : 0, onFocus: () => this.button.focus(), onBlur: () => this.button.blur() }, index.h("dnn-fieldset", { key: '2bfffd2ba931d81214cf4191bd4eb052a5bea6d7', label: this.label, id: this.labelId, focused: this.focused, helpText: this.helpText }, index.h("div", { key: '7b83aba0c750586e6636a699dc94c8b0089109ee', class: "inner-container" }, index.h("slot", { key: 'b47bc99ba9539202968561df78efc59892f4232e', name: "prefix" }), index.h("div", { key: '4dd903d2a5b61ee9c6f549ee7196aba67f86cbd1', class: "color-preview" }, this.useLightColor &&
-            index.h("div", { key: 'e9c59300061a717b0bdf7733a3743a7318076561', style: { backgroundColor: `#${this.lightColor}` } }), index.h("div", { key: '25a25296ccb39572104f5c57992b9c294fb38695', style: { backgroundColor: `#${this.color}` } }), this.useDarkColor &&
-            index.h("div", { key: 'c01b5112a56b90f3b0bb224c55101dd9498885e0', style: { backgroundColor: `#${this.darkColor}` } }), this.useContrastColor &&
-            index.h("div", { key: '1f7582e191072d567eff20e1d1ca90d35ccbeba3', class: "contrast", style: { color: `#${this.contrastColor}` } }, index.h("hr", { key: '7c0e78128248b5690fe80c4bb975b46de5df2b82', style: { color: `#${this.contrastColor}` } }), index.h("span", { key: '3ebaa4745fcb98f4d30a53a9f545ce2fea32bc57' }, this.localization.contrast), index.h("hr", { key: '0eeb316c51a1f819cc9b5a2767ab4a3af8eac9e1', style: { color: `#${this.contrastColor}` } }))), !this.readonly &&
-            index.h("button", { key: '1db19206553db83d3eff0f99be487c1aa4ccac3a', ref: el => this.button = el, "aria-labelledby": this.labelId, onClick: () => this.showPicker(), onFocus: () => this.focused = true, onBlur: () => this.focused = false }, index.h("svg", { key: '996dc4607e561c61c67b82e32bf06b3dc8426f14', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, index.h("path", { key: '8d71e92388ccafc630f23463f6240706186e107b', d: "M200-200h56l345-345-56-56-345 345v56Zm572-403L602-771l56-56q23-23 56.5-23t56.5 23l56 56q23 23 24 55.5T829-660l-57 57Zm-58 59L290-120H120v-170l424-424 170 170Zm-141-29-28-28 56 56-28-28Z" }))), index.h("slot", { key: '721647f34276821d1090966d6850a7ad400dbc33', name: "suffix" }))), index.h("dnn-modal", { key: 'fd6228959e5efea91458e585c69055a0f2ccced0', ref: el => this.colorModal = el, backdropDismiss: false }, this.currentColor &&
-            index.h("div", { key: '10e4ec859de7c8491292ca29bfa701645a4a1139', class: "modal-content" }, this.hasMultipleColors() &&
-                index.h("dnn-tabs", { key: '8e00c0a37c92d8ebd5fd7df3a63c0a051e55c2d2' }, index.h("dnn-tab", { key: 'f9e3bef6810a599b38c9cbab412df93d93e8bcde', tabTitle: this.localization.normal }, index.h("dnn-color-picker", { key: 'fa6ad89b32fe804236bdfba17d1c1d2feea0a77d', color: (_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.color, onColorChanged: e => this.currentColor = Object.assign(Object.assign({}, this.currentColor), { color: e.detail.hex }) })), this.useLightColor &&
-                    index.h("dnn-tab", { key: '9ad576ab4f1de9417bff9b3b2817786008464910', tabTitle: this.localization.light }, index.h("dnn-color-picker", { key: 'e802a6bc0b1ab48e4abbf5a5c5d7045231651d26', color: (_b = this.currentColor) === null || _b === void 0 ? void 0 : _b.lightColor, onColorChanged: e => this.currentColor = Object.assign(Object.assign({}, this.currentColor), { lightColor: e.detail.hex }) })), this.useDarkColor &&
-                    index.h("dnn-tab", { key: 'e3bbc34fd6538aac9d17498868959dc151bc2459', tabTitle: this.localization.dark }, index.h("dnn-color-picker", { key: '4436b9030b554f98f66c46dfe5d93b1cf957d318', color: (_c = this.currentColor) === null || _c === void 0 ? void 0 : _c.darkColor, onColorChanged: e => this.currentColor = Object.assign(Object.assign({}, this.currentColor), { darkColor: e.detail.hex }) })), this.useContrastColor &&
-                    index.h("dnn-tab", { key: '7138313c1e95a188770e5b92451641ef900bcce8', tabTitle: this.localization.contrast }, index.h("dnn-color-picker", { key: 'fc9a76ded5f4ed2184ecbf0660eaf2af997660e3', color: (_d = this.currentColor) === null || _d === void 0 ? void 0 : _d.contrastColor, onColorChanged: e => this.currentColor = Object.assign(Object.assign({}, this.currentColor), { contrastColor: e.detail.hex }) }))), !this.hasMultipleColors() &&
-                index.h("dnn-color-picker", { key: 'bf72f9c20e42ada6cfc28a61ee2cf3f7f4e1f23f', color: (_e = this.currentColor) === null || _e === void 0 ? void 0 : _e.color, onColorChanged: e => this.currentColor = Object.assign(Object.assign({}, this.currentColor), { color: e.detail.hex }) }), index.h("h3", { key: 'ea200d1d4e1bf5cf2772117bff79cc3b7d92f92c' }, "Preview"), index.h("div", { key: '41ead7cdcc89979032b3ca759a0a9e5bf94b1a44', class: "color-preview" }, this.useLightColor &&
-                index.h("div", { key: 'faa59653d033a099b1d10e713dd44b42174eac48', style: { backgroundColor: `#${this.currentColor.lightColor}` } }), index.h("div", { key: '3a25fb6d9cef45d2289fa6cab388da47f0db6d19', style: { backgroundColor: `#${this.currentColor.color}` } }), this.useDarkColor &&
-                index.h("div", { key: 'df5d38aff202713ec2b1bdc1d6691df6eb3af828', style: { backgroundColor: `#${this.currentColor.darkColor}` } }), this.useContrastColor &&
-                index.h("div", { key: 'bfb02f2bd68efe11df6ec18cabcf9202db1636fe', class: "contrast", style: { color: `#${this.currentColor.contrastColor}` } }, index.h("hr", { key: '869042b853ed4c6194580dfe2cd21e086daade1a', style: { color: `#${this.currentColor.contrastColor}` } }), index.h("span", { key: '197a171695accac2c6b60058264f7b36c4d3fed8' }, this.localization.contrast), index.h("hr", { key: '7152004e55209051de837ca90fe63d6edff508fa', style: { color: `#${this.currentColor.contrastColor}` } }))), index.h("div", { key: '30a9353717122d1853a304a1712fb0c378f15cb6', class: "controls" }, index.h("dnn-button", { key: '66813d8968cc03f76bcc808df8654e67419469cb', reversed: true, onClick: () => this.colorModal.hide() }, this.localization.cancel), index.h("dnn-button", { key: 'c2e9ea8d44c9c9152d7b55bc1719190342e0a024', onClick: () => this.saveColor() }, this.localization.confirm))))));
+        return (index.h(index.Host, { key: '722affca46b0605ab63409bd938f5032ea45db18', tabIndex: this.focused ? -1 : 0, onFocus: () => this.button.focus(), onBlur: () => this.button.blur() }, index.h("dnn-fieldset", { key: 'c5d939a1bca9286398ff7d0fa652406bd4e6df3d', label: this.label, id: this.labelId, focused: this.focused, helpText: this.helpText }, index.h("div", { key: '7fca976fe59f26e560cb2a4412d01356391308c2', class: "inner-container" }, index.h("slot", { key: '3ec1651ac8ee6a4cdf40dc2d1bf9408aa611e559', name: "prefix" }), index.h("div", { key: '50b34dd1d2e8ff2d9999f87b9bd72ddfb577e5ee', class: "color-preview" }, this.useLightColor &&
+            index.h("div", { key: '5eb78240709025161e7011e040fddbe0fb8845da', style: { backgroundColor: `#${this.lightColor}` } }), index.h("div", { key: '18ae5db63545be3b824d445ee3045611de5fac47', style: { backgroundColor: `#${this.color}` } }), this.useDarkColor &&
+            index.h("div", { key: '88ea0a66d09361aece5753aa2f116c824ce78edb', style: { backgroundColor: `#${this.darkColor}` } }), this.useContrastColor &&
+            index.h("div", { key: 'fe2f71930826ffcff305e25a7c47986dff2b9c16', class: "contrast", style: { color: `#${this.contrastColor}` } }, index.h("hr", { key: 'eef74b6b8d5176128c0a487d82827b2c4ac6aa07', style: { color: `#${this.contrastColor}` } }), index.h("span", { key: '6615c23bb06c50fc9ba36fd74066f8344a125303' }, this.localization.contrast), index.h("hr", { key: '06421c535aa56fc8d8cefefd3087ce1d679679eb', style: { color: `#${this.contrastColor}` } }))), !this.readonly &&
+            index.h("button", { key: '01766ed62e5e3af7831585370be5e4f563fddd83', ref: el => this.button = el, "aria-labelledby": this.labelId, onClick: () => this.showPicker(), onFocus: () => this.focused = true, onBlur: () => this.focused = false }, index.h("svg", { key: '4b84477b59644d1c6d87c53d0143f7b4886e3a88', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, index.h("path", { key: '05251a0087769115fc7e9fd62e08ade0d3997752', d: "M200-200h56l345-345-56-56-345 345v56Zm572-403L602-771l56-56q23-23 56.5-23t56.5 23l56 56q23 23 24 55.5T829-660l-57 57Zm-58 59L290-120H120v-170l424-424 170 170Zm-141-29-28-28 56 56-28-28Z" }))), index.h("slot", { key: '73fda889edbe3d375e4f5def837a06cd631494af', name: "suffix" }))), index.h("dnn-modal", { key: '48f0b7ecc4e187bf4d495725556f712c022094b2', ref: el => this.colorModal = el, backdropDismiss: false }, this.currentColor &&
+            index.h("div", { key: '21e84f6b00f197952622c1726813dc3164844b35', class: "modal-content" }, this.hasMultipleColors() &&
+                index.h("dnn-tabs", { key: 'a2d81adf564e9908c6586fb7fa551979f2e52e11' }, index.h("dnn-tab", { key: '9df0030996b43c88a28265fabc6d68e2d4f4e947', tabTitle: this.localization.normal }, index.h("dnn-color-picker", { key: 'b89397aaf0a6ef2e852585f63863f7424fd5801d', color: (_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.color, onColorChanged: e => this.currentColor = Object.assign(Object.assign({}, this.currentColor), { color: e.detail.hex }) })), this.useLightColor &&
+                    index.h("dnn-tab", { key: '03cba449faada93d9fc113c0106ab24345279f94', tabTitle: this.localization.light }, index.h("dnn-color-picker", { key: 'f2364df9c8e56af1539c032b45ebb4be6cb67cc7', color: (_b = this.currentColor) === null || _b === void 0 ? void 0 : _b.lightColor, onColorChanged: e => this.currentColor = Object.assign(Object.assign({}, this.currentColor), { lightColor: e.detail.hex }) })), this.useDarkColor &&
+                    index.h("dnn-tab", { key: '7ce2accefcb3a7c4d9159311883309bf6f6d8255', tabTitle: this.localization.dark }, index.h("dnn-color-picker", { key: '5d54a2ff099956daccb2b23dded73d6b6258d36a', color: (_c = this.currentColor) === null || _c === void 0 ? void 0 : _c.darkColor, onColorChanged: e => this.currentColor = Object.assign(Object.assign({}, this.currentColor), { darkColor: e.detail.hex }) })), this.useContrastColor &&
+                    index.h("dnn-tab", { key: 'c00615ce72d44510a10d1664b95ea685300c48d0', tabTitle: this.localization.contrast }, index.h("dnn-color-picker", { key: 'fe4ff29caf538dd459db0478ad56d3b35cb16602', color: (_d = this.currentColor) === null || _d === void 0 ? void 0 : _d.contrastColor, onColorChanged: e => this.currentColor = Object.assign(Object.assign({}, this.currentColor), { contrastColor: e.detail.hex }) }))), !this.hasMultipleColors() &&
+                index.h("dnn-color-picker", { key: '0b016c6d2e48f00f018dd52f941a32498d2686f8', color: (_e = this.currentColor) === null || _e === void 0 ? void 0 : _e.color, onColorChanged: e => this.currentColor = Object.assign(Object.assign({}, this.currentColor), { color: e.detail.hex }) }), index.h("h3", { key: '3f7d790877eab2603b404742dddc91caa4558078' }, "Preview"), index.h("div", { key: 'e406cb06b6bb09e1f42343e8c7a152dcaa583761', class: "color-preview" }, this.useLightColor &&
+                index.h("div", { key: 'c6b3ad4d35ae6bb9bd2009b322c83c2a9b36e67e', style: { backgroundColor: `#${this.currentColor.lightColor}` } }), index.h("div", { key: 'ce5a6482f603b72e25505048addae3718da56292', style: { backgroundColor: `#${this.currentColor.color}` } }), this.useDarkColor &&
+                index.h("div", { key: 'ab08de041e1403eae14aeee40637cacd2b65a236', style: { backgroundColor: `#${this.currentColor.darkColor}` } }), this.useContrastColor &&
+                index.h("div", { key: 'e4a34aa10934332c83bb0446c881c307e263bcce', class: "contrast", style: { color: `#${this.currentColor.contrastColor}` } }, index.h("hr", { key: '8735a2c4427f9fdc8e112c0c395139d91fc4d336', style: { color: `#${this.currentColor.contrastColor}` } }), index.h("span", { key: '98e119f43c4a7c736e48940e59563a58a6c67df0' }, this.localization.contrast), index.h("hr", { key: 'fe6891f255cfbb9dd1662937e635a89f18ad853a', style: { color: `#${this.currentColor.contrastColor}` } }))), index.h("div", { key: '39dcff0c2dc1bf96d77c713f0163d11d21960e6d', class: "controls" }, index.h("dnn-button", { key: 'f86f95402a4495e0333710b14a14324ac751e630', reversed: true, onClick: () => this.colorModal.hide() }, this.localization.cancel), index.h("dnn-button", { key: '1b6558d0878a0e0e160c884677ba89484ca50ba2', onClick: () => this.saveColor() }, this.localization.confirm))))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/cjs/dnn-color-picker.cjs.entry.js

@@ -476,13 +476,13 @@ const DnnColorPicker = class {
         const red = this.currentColor.red;
         const green = this.currentColor.green;
         const blue = this.currentColor.blue;
-        return (index.h(index.Host, { key: '4a8550809e62a746aaabbb06490b996e8e96f8d6', tabIndex: this.focused ? -1 : 0, onFocus: () => this.saturationBrightnessButton.focus(), onBlur: () => this.saturationBrightnessButton.blur() }, index.h("div", { key: 'ecda9654e41e807708177cdcf6ac3047806f9af2', class: "dnn-color-picker" }, index.h("div", { key: '00a3925f897e3c28ecb947f694468e9b2f65207c', class: "dnn-color-sliders" }, index.h("div", { key: '4f8c3dc5aba9604e099fcac445e30abc424980a1', class: "dnn-color-s-b", ref: (element) => this.saturationLightnessBox = element, style: { backgroundColor: `hsl(${hue},100%,50%)` }, onMouseDown: this.handleSaturationLightnessMouseDown.bind(this) }, index.h("button", { key: '9840ad20d0f06cb460ce9716f89846c04e542930', ref: el => this.saturationBrightnessButton = el, class: "dnn-s-b-picker", "aria-label": "Press up or down to adjust lightness, left or right to adjust saturation, hold shift to move by 10%", role: "slider", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuetext": `Saturation: ${Math.round(this.currentColor.saturation * 100)}%, Lightness: ${Math.round(this.currentColor.lightness * 100)}%`, style: {
+        return (index.h(index.Host, { key: '3270ad5db8fe3d6e4b0b77b8eaaab7ca49f845a1', tabIndex: this.focused ? -1 : 0, onFocus: () => this.saturationBrightnessButton.focus(), onBlur: () => this.saturationBrightnessButton.blur() }, index.h("div", { key: 'b92a03280c86835af30df24364f9923627f77ea9', class: "dnn-color-picker" }, index.h("div", { key: '5e23ef4f0678d73e3908d7d81aa57f1e9f8a75dc', class: "dnn-color-sliders" }, index.h("div", { key: '416fcb88cd209236acb5299719b2148c741beba8', class: "dnn-color-s-b", ref: (element) => this.saturationLightnessBox = element, style: { backgroundColor: `hsl(${hue},100%,50%)` }, onMouseDown: this.handleSaturationLightnessMouseDown.bind(this) }, index.h("button", { key: '1a4ae20c8308ec5132da58ccaeb6420b737588c7', ref: el => this.saturationBrightnessButton = el, class: "dnn-s-b-picker", "aria-label": "Press up or down to adjust lightness, left or right to adjust saturation, hold shift to move by 10%", role: "slider", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuetext": `Saturation: ${Math.round(this.currentColor.saturation * 100)}%, Lightness: ${Math.round(this.currentColor.lightness * 100)}%`, style: {
                 left: Math.round(saturation * 100) + "%",
                 bottom: Math.round(lightness * 100) + "%"
-            }, onKeyDown: (e) => this.handleSaturationLightnessKeyDown(e), onFocus: () => this.focused = true, onBlur: () => this.focused = false })), index.h("div", { key: '22d2b5063dd641af85f89148703da4c06a8a206d', class: "dnn-color-bar" }, index.h("div", { key: '595f25c31abfdb96abbe88ff9427e2030affacc0', class: "dnn-color-result", style: {
+            }, onKeyDown: (e) => this.handleSaturationLightnessKeyDown(e), onFocus: () => this.focused = true, onBlur: () => this.focused = false })), index.h("div", { key: '1ac761c0b53f096f585bba62eb63048aa00ec244', class: "dnn-color-bar" }, index.h("div", { key: '67e90b41602a2667c4820cf77e855d12309b71f1', class: "dnn-color-result", style: {
                 backgroundColor: '#' + this.getHex(),
                 boxShadow: "0 0 2px 1px " + "#" + this.getContrast()
-            } }), index.h("div", { key: 'a09e921da35557cffb44e7a9355cf0008c5a2190', class: "dnn-color-hue", ref: (element) => this.hueRange = element, onMouseDown: this.handleHueMouseDown.bind(this) }, index.h("button", { key: '3e047784cb4cbba615bc11e21b2a75585cff080b', class: "dnn-hue-picker", "aria-label": "Press left or right to adjust hue, hold shift to move by 10 degrees", role: "slider", "aria-valuemin": "0", "aria-valuemax": "359", "aria-valuenow": Math.round(hue), style: { left: (hue / 359 * 100).toString() + "%" }, onKeyDown: (e) => this.handleHueKeyDown(e) })))), index.h("div", { key: '7b51561878b4382cf8bebc8383f4b021277b6484', class: "dnn-color-fields" }, index.h("div", { key: '83774c93598078c9575924b05656ee747d77b1c3', class: "dnn-rgb-color-fields", style: { display: this.rgbDisplay } }, index.h("div", { key: '02a317e6c0ec62e367d6d5002eefec1067ffbfd4', class: "dnn-rgb-color-field" }, index.h("label", { key: '898ef5cf648ed2e2c78df30d033382203f4ed2cf' }, "R"), index.h("input", { key: 'e4a761675ebf4bdd4d2f9b6f49cc9d496648fe38', type: "number", min: "0", max: "255", step: "1", class: "red", value: red, "aria-label": "red value", onChange: (e) => this.handleComponentValueChange(e, 'red') })), index.h("div", { key: '3f41f9f9e62013c33060e7b6f613070f5d58257c', class: "dnn-rgb-color-field" }, index.h("label", { key: 'ee45595f44fb7122905b438abbe5167a1b593e82' }, "G"), index.h("input", { key: '3fcc6047fcb8248c99c22911da96cab59b7b5af6', type: "number", min: "0", max: "255", class: "green", value: green, "aria-label": "green value", onChange: (e) => this.handleComponentValueChange(e, 'green') })), index.h("div", { key: '8d806b41090345515922e2ec371be5441d2e04e9', class: "dnn-rgb-color-field" }, index.h("label", { key: '1d0dd3af95e1016852ea5f9e400adacef7225a43' }, "B"), index.h("input", { key: 'e86c057240a1d8f3d17b64e66b13e390df1f6864', type: "number", min: "0", max: "255", class: "blue", value: blue, "aria-label": "blue value", onChange: (e) => this.handleComponentValueChange(e, 'blue') })), index.h("div", { key: '192b4ff049c05cccb86fe713fbd6980d687822a1', class: "dnn-color-mode-switch" }, index.h("button", { key: '30b009720f3fd6805249b7e23aa4c536877974b0', id: "rgb-switch", onClick: this.switchColorMode.bind(this), "aria-label": "switch to hexadecimal value entry" }, index.h("svg", { key: '60384168518b2acae849ad0182cc73c395996e55', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { key: '8716e942521a53b65f243a007a69b25a90d96f7e', d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: '43286c1abbd8e50b6fd57d26ecd7ffa4f7c169c2', d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" }))))), index.h("div", { key: '8f6cbfb39b67c5587642a77e09567a8ec06338cf', class: "dnn-hsl-color-fields", style: { display: this.hslDisplay } }, index.h("div", { key: '0ec67be5d6ba3af54a59319cf47a433076b22f1a', class: "dnn-hsl-color-field" }, index.h("label", { key: '49455314fd8fdb5287f9033382ad6daa32fac2eb' }, "H"), index.h("input", { key: '4c16035b6b331b2b73333243b5c031641a40f8b9', type: "number", min: "0", max: "359", step: 1, value: Math.round(hue), "aria-label": "Hue", onChange: (e) => this.handleHSLChange(e, 'hue') })), index.h("div", { key: '2b5328e51869dc461f6c223150ba89fb1fb0c9d1', class: "dnn-hsl-color-field" }, index.h("label", { key: '6fd47e30c3b520b44d4b146e72a6d1f3e80b7bff' }, "S"), index.h("input", { key: '0d9684fed8094a295d2926f04b890ae315e82b36', type: "number", min: "0", max: "100", step: 1, value: Math.round(saturation * 100), "aria-label": "Saturation", onChange: (e) => this.handleHSLChange(e, 'saturation') })), index.h("div", { key: '61dea83d7e66a3e42d81c91ddafa6cc38edf848f', class: "dnn-hsl-color-field" }, index.h("label", { key: '2b725ac0706de98d7b9c5a403b2af8d1dfc99bfe' }, "L"), index.h("input", { key: 'c36fcf1347961bea27b7832c827b8d77fa113071', type: "number", min: "0", max: "100", step: 1, value: Math.round(lightness * 100), "aria-label": "Lightness", onChange: (e) => this.handleHSLChange(e, 'lightness') })), index.h("div", { key: '1b5fab2ebdd349bfde3d892a7ce20e5be8becfa5', class: "dnn-color-mode-switch" }, index.h("button", { key: '9af86f6c10b8edcdbbee95a581c45c52bf8d5761', id: "hsl-switch", onClick: this.switchColorMode.bind(this), "aria-label": "Switch to red, green, blue entry mode" }, index.h("svg", { key: '91852e938e0ccb8318dd7a9b5548c2d2f2a4fa86', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { key: '1ca5aa1d19bf8c84979ddd072744b19400288a36', d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: '6581be641c862805590dce8003523086b0f17f07', d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" }))))), index.h("div", { key: 'a69134e39b2c824f85932db783a87bba27ad0df4', class: "dnn-hex-color-fields", style: { display: this.hexDisplay } }, index.h("div", { key: '427fd43b15a906590c08566d91d06ff2f0be5194', class: "dnn-hex-color-field" }, index.h("label", { key: '7308bd6ab3e22d2d9f2cac7b234212384fe86419' }, "HEX"), index.h("div", { key: '092f370eda67a17b7216b3cf23624c826e952360', class: "hex-input" }, index.h("input", { key: '51fc344cb6adebc7ce808ea691cc6bdc511bd4fc', type: "text", "aria-label": "Hexadecimal value", value: this.getHex(), onChange: e => this.handleHexChange(e.target.value) }), index.h("button", { key: '7e870d2ee5736175be9834afe1de5e3199f6982f', class: "copy", "aria-label": "copy value" }, index.h("svg", { key: 'c56b2a42035991f93c46371d85c40d3e11f17734', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { key: 'd1302c6c2fba44441b1df4aa792414a7fa9ec698', d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: '9457bc2deb1d2acd5c6d5bca5e68f41aeac93cb1', d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }))))), index.h("div", { key: '7c0218eba7f3d516734cf644e0191abc99b56608', class: "dnn-color-mode-switch" }, index.h("button", { key: 'e0ecb70e7e7360231bc17da87c63dbcc71ae8e7d', id: "hex-switch", onClick: this.switchColorMode.bind(this), "aria-label": "Switch to hue saturation lightness values" }, index.h("svg", { key: '783ab05c6aa74ca4687eaadfcd1550438cc70981', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { key: 'd90dfa65c0df191d30d9bf74ad68ccbb79449fa2', d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: '1bcae0d28af993b589e34306bde187ef386d7e29', d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" })))))))));
+            } }), index.h("div", { key: '4b6593671043f63f14641f3335ccf39b04b0fe5d', class: "dnn-color-hue", ref: (element) => this.hueRange = element, onMouseDown: this.handleHueMouseDown.bind(this) }, index.h("button", { key: '01c59ab72393b1d7dfef31196adfc6d10e68ceb0', class: "dnn-hue-picker", "aria-label": "Press left or right to adjust hue, hold shift to move by 10 degrees", role: "slider", "aria-valuemin": "0", "aria-valuemax": "359", "aria-valuenow": Math.round(hue), style: { left: (hue / 359 * 100).toString() + "%" }, onKeyDown: (e) => this.handleHueKeyDown(e) })))), index.h("div", { key: 'f2cd5649fb1788700a1e40bc28d0293e6522df02', class: "dnn-color-fields" }, index.h("div", { key: '261f1f240094a62d976cbddcb5d1d53772776ddc', class: "dnn-rgb-color-fields", style: { display: this.rgbDisplay } }, index.h("div", { key: '61416a06bff45ac743e03a117f932f217f02c1c0', class: "dnn-rgb-color-field" }, index.h("label", { key: '27b5b1742d903aeb5b5f3f2edcf69b29c32eab39' }, "R"), index.h("input", { key: '86b35afd62520a4c1b712ced31ed079e3e5394f7', type: "number", min: "0", max: "255", step: "1", class: "red", value: red, "aria-label": "red value", onChange: (e) => this.handleComponentValueChange(e, 'red') })), index.h("div", { key: '69115f117b7d0f619765b2a01503ad17448263c5', class: "dnn-rgb-color-field" }, index.h("label", { key: '6f1870bd898b2f7d061075dedac54a6f81bd4ee0' }, "G"), index.h("input", { key: 'e48f0a48c8a4cf69a4893cb8d8c74084bfc3044c', type: "number", min: "0", max: "255", class: "green", value: green, "aria-label": "green value", onChange: (e) => this.handleComponentValueChange(e, 'green') })), index.h("div", { key: 'c6ef7f77a1c34a9960c72a618d54391c53f74f4d', class: "dnn-rgb-color-field" }, index.h("label", { key: 'bb4e309c363171764bde998fe58430b4eb6ebf4f' }, "B"), index.h("input", { key: 'e9dfe614313e271b45ca0c60ba26655d59f39447', type: "number", min: "0", max: "255", class: "blue", value: blue, "aria-label": "blue value", onChange: (e) => this.handleComponentValueChange(e, 'blue') })), index.h("div", { key: '29ef67398fc1522c0564f62033039f77b49edc2b', class: "dnn-color-mode-switch" }, index.h("button", { key: 'd0367da5c40215fbd1f3eadf10dd6bca08a963a6', id: "rgb-switch", onClick: this.switchColorMode.bind(this), "aria-label": "switch to hexadecimal value entry" }, index.h("svg", { key: '53cb5cdae4143c70e8240990d842ea4457d7ae14', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { key: '0271d81c2bd99e134803b4edab2a7272a6020d87', d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: 'd25d380ab10e7109238476344c6b5c638a4f96ca', d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" }))))), index.h("div", { key: '6698763d1fbb8d2c1da28e0d42f6be753b14c4c8', class: "dnn-hsl-color-fields", style: { display: this.hslDisplay } }, index.h("div", { key: '28173e72c4e7fee625fca382b80f824b9488cfb7', class: "dnn-hsl-color-field" }, index.h("label", { key: 'dfdb1809df786e1ff923e8c3e3161f53654ba685' }, "H"), index.h("input", { key: 'd9e7c99eb2a50c938e6021bf49131309507e96b1', type: "number", min: "0", max: "359", step: 1, value: Math.round(hue), "aria-label": "Hue", onChange: (e) => this.handleHSLChange(e, 'hue') })), index.h("div", { key: 'a4fdbdd1f043a550d1d0b8ab8a0b7f04994cf8d5', class: "dnn-hsl-color-field" }, index.h("label", { key: 'c96a8928f7f36e403e24938c5cec79aa74b00a25' }, "S"), index.h("input", { key: '7c1bb89131a0cf7f3062f2e8cf73c14fd2932db8', type: "number", min: "0", max: "100", step: 1, value: Math.round(saturation * 100), "aria-label": "Saturation", onChange: (e) => this.handleHSLChange(e, 'saturation') })), index.h("div", { key: '067f8b87d94bb6e7d7a95ff043282b2e049898a0', class: "dnn-hsl-color-field" }, index.h("label", { key: 'f77c69f8e0fbef9b25692acca6ed5c3007a1b53c' }, "L"), index.h("input", { key: 'b65b95e1fd5926a44f83f219f2bb96c89c489a28', type: "number", min: "0", max: "100", step: 1, value: Math.round(lightness * 100), "aria-label": "Lightness", onChange: (e) => this.handleHSLChange(e, 'lightness') })), index.h("div", { key: 'c0cfb39dcf480e86355a0c87e416fa054aa9f4e5', class: "dnn-color-mode-switch" }, index.h("button", { key: '8c19afde9cfb3b8333a1313e55395b92f34dec2c', id: "hsl-switch", onClick: this.switchColorMode.bind(this), "aria-label": "Switch to red, green, blue entry mode" }, index.h("svg", { key: '54ccf0a690d6e2a102c33a0dbc1d08cf99c11ed0', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { key: '87f25bab11448e091e4427a82e40e44956aa83a1', d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: '3a83e2cf45ee881ae05fb73e2077289d73a140af', d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" }))))), index.h("div", { key: '0b7a592d2230136808b34ed36e5c84ee56328e53', class: "dnn-hex-color-fields", style: { display: this.hexDisplay } }, index.h("div", { key: 'aa832989de6451ea2abdb0cf5282a99b2ba0a6eb', class: "dnn-hex-color-field" }, index.h("label", { key: 'f5319d53261202307f5984172143e440995427e9' }, "HEX"), index.h("div", { key: 'e68434340c0b59d6fb24f0c509c861b948842b68', class: "hex-input" }, index.h("input", { key: 'fb40e1d785cfcc29b43a788d6ef9fd447ca01401', type: "text", "aria-label": "Hexadecimal value", value: this.getHex(), onChange: e => this.handleHexChange(e.target.value) }), index.h("button", { key: 'e6a21c14dc0d7005d92538014031e6675becea5e', class: "copy", "aria-label": "copy value" }, index.h("svg", { key: 'beb4d7d7f5a97f27db768b29e478949ba84a23d7', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { key: '3376034e2172767665169ad4476f025b97746665', d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: 'd0bbb664e9d5c77a9a5a9c155e90e4666b6168bf', d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }))))), index.h("div", { key: '20aee791254a22327a58a8bc570c25cf0ea436a7', class: "dnn-color-mode-switch" }, index.h("button", { key: '2b978bff44ce5a51461ed03d4f1df40c0e77c5af', id: "hex-switch", onClick: this.switchColorMode.bind(this), "aria-label": "Switch to hue saturation lightness values" }, index.h("svg", { key: '34eef4f8d254a78519a8ce254d97fbc2f5d3c728', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { key: 'dd50ec024953f5f09fd593f2fe181bcf220fd7a5', d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: '5817f1b8f93fec23a215124272a084a4d7cef286', d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" })))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -198,25 +198,25 @@ const DnnDropzone = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (index.h(index.Host, { key: '6608b85ebba7b7314db57d0c49a7171637bdfaed', ref: e => this.dropzone = e, class: "dropzone", onDragOver: e => this.handleDragOver(e), onDrop: e => this.handleDrop(e), onDragLeave: () => this.dropzone.classList.remove("dropping"), tabIndex: this.focused ? -1 : 0, onFocus: () => this.uploadLabel.focus(), onBlur: () => this.uploadLabel.blur() }, !this.takingPicture &&
+        return (index.h(index.Host, { key: 'e8cb239b37d1be0f7c41240465cd6a158ab0097b', ref: e => this.dropzone = e, class: "dropzone", onDragOver: e => this.handleDragOver(e), onDrop: e => this.handleDrop(e), onDragLeave: () => this.dropzone.classList.remove("dropping"), tabIndex: this.focused ? -1 : 0, onFocus: () => this.uploadLabel.focus(), onBlur: () => this.uploadLabel.blur() }, !this.takingPicture &&
             [
-                index.h("p", { key: '35ab671d7aeeb20544224614971f4ef1a2a0b8cc' }, (_a = this.localResx) === null || _a === void 0 ? void 0 : _a.dragAndDropFile),
-                index.h("p", { key: 'c06aea19c7321e0e7dd86d877965c366fb87a0b4' }, "- ", (_b = this.localResx) === null || _b === void 0 ? void 0 :
+                index.h("p", { key: '0a6f9cdb3eef3449dc2092cd6ed5d32e431f3c2d' }, (_a = this.localResx) === null || _a === void 0 ? void 0 : _a.dragAndDropFile),
+                index.h("p", { key: '1179185c6fa4615e9f3ad362e7f7b663c80ee8f9' }, "- ", (_b = this.localResx) === null || _b === void 0 ? void 0 :
                     _b.or, " -"),
-                index.h("label", { key: '6a0d18aa5dc5d398dc66ab897e338798cc908abf', class: "upload-file", tabIndex: 0, onKeyDown: e => this.handleUploadKeyDown(e), ref: el => this.uploadLabel = el, onFocus: () => this.focused = true, onBlur: () => this.focused = false }, index.h("input", { key: '4338b34785c38872f6d6e8138f32910f3aa969e5', type: "file", ref: el => this.fileInput = el, onChange: e => this.handleUploadButton(e.target) }), index.h("span", { key: 'e19b2bc369417aea4549b7c4f8cbf5cd82eb5038' }, index.h("svg", { key: '460447b54c87e4e764c730d63d04109649b0e5bd', xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("g", { key: '3e987857304dcb3b00658c5b59c9d71b537827bd' }, index.h("rect", { key: '2ef89e26cf62fec520c2c0e28e1dd84ce127e78f', fill: "none", height: "24", width: "24" })), index.h("g", { key: 'c128c63a6474b183071c88146b8f3709c3638ceb' }, index.h("path", { key: '491efacd9c0877133074a0899b1d92702c514f34', d: "M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z" })))), "\u00A0", (_c = this.localResx) === null || _c === void 0 ? void 0 :
+                index.h("label", { key: '15a2262c638dd5b4b2f5c0d51fb4d361ccdc98cc', class: "upload-file", tabIndex: 0, onKeyDown: e => this.handleUploadKeyDown(e), ref: el => this.uploadLabel = el, onFocus: () => this.focused = true, onBlur: () => this.focused = false }, index.h("input", { key: '8890c891d3805213887403528b9e8d8661f81100', type: "file", ref: el => this.fileInput = el, onChange: e => this.handleUploadButton(e.target) }), index.h("span", { key: 'e4b5083f873c27f7550f29ee5d6f433a4e79ab58' }, index.h("svg", { key: '3f3d9e3e491ab3159767da319d08b3a07c08a65d', xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("g", { key: 'd88531469503abfc3b33940f7f690545a6bd7c47' }, index.h("rect", { key: '67cfd319af430b66b2c3c4db9cf043b5ca8b44d2', fill: "none", height: "24", width: "24" })), index.h("g", { key: '929ff336aa3a765c6b0ae3804af479152f15580e' }, index.h("path", { key: '423d42dd1312a6e92e58112c9abb17c9747c5edc', d: "M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z" })))), "\u00A0", (_c = this.localResx) === null || _c === void 0 ? void 0 :
                     _c.uploadFile),
                 this.canTakeSnapshots &&
                     [
-                        index.h("p", { key: '6105868196fddc2c7276b1768316619236aeb810' }, "- ", (_d = this.localResx) === null || _d === void 0 ? void 0 :
+                        index.h("p", { key: '79d4eba604972b765af99a259444017effc430d0' }, "- ", (_d = this.localResx) === null || _d === void 0 ? void 0 :
                             _d.or, " -"),
-                        index.h("button", { key: 'fedf250dfb20152576240cdf0f77a61e30809e19', onClick: () => this.takeSnapshot() }, index.h("svg", { key: 'a8f6f1cb019dd3bb51b97b47e9449a05dac4084a', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { key: '730307ea0b4bcf4ea57e53fa6b47982ca9d8e277', d: "M0 0h24v24H0z", fill: "none" }), index.h("circle", { key: 'b86742f1f09c98cdb755b3f6c07a8c59f92c9132', cx: "12", cy: "12", r: "3.2" }), index.h("path", { key: '46743718f4d58f109e0ce1a554800e0e77ed3fe8', d: "M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" })), (_e = this.localResx) === null || _e === void 0 ? void 0 :
+                        index.h("button", { key: '181c7f2c3e0fe10a0e442f671b585d7fd52240e4', onClick: () => this.takeSnapshot() }, index.h("svg", { key: 'a7895b7adac1558f45ccccc87f449bb2ffec557c', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { key: '23128d601f71f2e8cd8af075fe74de8e7f67e92c', d: "M0 0h24v24H0z", fill: "none" }), index.h("circle", { key: 'a082e32a026bfa4586fe203783cbd585e244f774', cx: "12", cy: "12", r: "3.2" }), index.h("path", { key: '8f1b6b43558cb3ad0e375b01f71da751d88afea8', d: "M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" })), (_e = this.localResx) === null || _e === void 0 ? void 0 :
                             _e.takePicture)
                     ]
             ], this.takingPicture &&
-            index.h("div", { key: '98089e0d3d6c77c68d22d4f490dfe00d8cf0647a', class: "video-preview" }, index.h("video", { key: 'badfea495c6b99702403b6ae40f7172efd2657e8', ref: e => this.videoPreview = e }), index.h("button", { key: '78401461e485ac9de845fe618d327f18ed82f6fe', onClick: () => this.applySnapshot() }, index.h("svg", { key: 'c6a26b54bf3f16c7430e5fec893b9d0f5d41a5e1', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { key: 'c89c76d9f2771f4ed31fc7a7322dc88109257cf2', d: "M0 0h24v24H0z", fill: "none" }), index.h("circle", { key: 'e3136fe39c3d78d3f5a5e176000f277b74fca3b5', cx: "12", cy: "12", r: "3.2" }), index.h("path", { key: '65e635efbb337b80974e550e64441e7d7c97fa22', d: "M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" })), "\u00A0", (_f = this.localResx) === null || _f === void 0 ? void 0 :
+            index.h("div", { key: '48ccb4be518d323659462b075f0ee2bf6d7ae052', class: "video-preview" }, index.h("video", { key: '26659446b8ac3c291aa89352c19515978e0596f8', ref: e => this.videoPreview = e }), index.h("button", { key: '9b7699d716d94611d4b3ae7590a5e76efe4f8b83', onClick: () => this.applySnapshot() }, index.h("svg", { key: '5576687f6e6592825ff4d89e12cc8da2cacf7b49', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { key: 'fb833f77e4803eb29d6eb68a92e1a9de775c756b', d: "M0 0h24v24H0z", fill: "none" }), index.h("circle", { key: '0abc995fbda0ce7af15004867d8cced2e153577d', cx: "12", cy: "12", r: "3.2" }), index.h("path", { key: 'd3045fa3aecc259628598a2ed67c38a7721f1148', d: "M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" })), "\u00A0", (_f = this.localResx) === null || _f === void 0 ? void 0 :
                 _f.capture)), this.fileTooLarge &&
-            index.h("div", { key: 'cbb7a4576bf76aed41393768d52fec1ac55de96d', class: 'error' }, index.h("p", { key: 'e4e287d4a6ffcf8efff38f8de3c2091e24549733' }, this.localResx.uploadSizeTooLarge, index.h("br", { key: '9b7e2d741f1e5a99f4f8ff30081832ae03b0720e' }), this.localResx.fileSizeLimit.replace("{0}", stringUtilities.getReadableFileSizeString(this.maxFileSize)))), this.invalidExtension &&
-            index.h("div", { key: '5c1d76222475b94ce5fcd2519db9d5ffa56b983e', class: 'error' }, index.h("p", { key: '31b4dbc1e612db9634061acc4abd4390be401f28' }, this.localResx.invalidExtension, index.h("br", { key: '87a3bea37f1252b347747fbd00ffeda7822a0db6' }), this.getInvalidExtensionsMessage()))));
+            index.h("div", { key: 'b66d8d9f21a9948595df5217f9745e8ecc08f779', class: 'error' }, index.h("p", { key: '080b2779e7656c953d77a4b9719cc4984890ec87' }, this.localResx.uploadSizeTooLarge, index.h("br", { key: '683ecdcf26529260f25e16988be94a71d570c61f' }), this.localResx.fileSizeLimit.replace("{0}", stringUtilities.getReadableFileSizeString(this.maxFileSize)))), this.invalidExtension &&
+            index.h("div", { key: '3b48bf8ba1e235d2f4fb3e2192cf18735dfa35df', class: 'error' }, index.h("p", { key: 'c0b42d27ae92e7d38d48fe9ac86c70d9d657b8c7' }, this.localResx.invalidExtension, index.h("br", { key: '1e0995b7bb02db676e56840e5692b36e2ca5191a' }), this.getInvalidExtensionsMessage()))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-97332e7c.js');
 
-const dnnFieldsetCss = ":host{display:inline-block;--fieldset-foreground:var(--dnn-color-foreground, #000);--fieldset-background:var(--dnn-color-background, #fff);--fieldset-focus-color:var(--dnn-color-primary, #3792ED);--fieldset-danger-color:var(--dnn-color-danger, #900);--fieldset-control-radius:var(--dnn-controls-radius, 3px)}.container{border:1px solid var(--fieldset-foreground, #000);border-radius:var(--fieldset-control-radius, 3px);padding:0.75em;display:flex;justify-content:space-between;gap:0.1em;position:relative;background-color:var(--fieldset-background);margin-top:1em}.container .resizer{width:100%}.container .inner-container{position:relative;width:100%;background-color:var(--fieldset-background);height:calc(100% - 1em)}.container label{display:inline-flex;position:absolute;opacity:1;transition:all 150ms ease-in-out;left:0.5em;top:-1.5em;padding:0 0.5em;background-color:var(--fieldset-background);white-space:nowrap;max-width:100%;border-radius:var(--fieldset-control-radius);font-size:1em;margin-top:1em;z-index:1;pointer-events:none}.container.focused{border:1px solid var(--fieldset-focus-color);box-shadow:0 0 0 1px var(--fieldset-focus-color)}.container.focused.invalid{border:1px solid var(--fieldset-danger-color);box-shadow:0 0 0 1px var(--fieldset-danger-color)}.container.focused input{color:var(--fieldset-foreground, #000)}.container.float-label label{opacity:0.6;left:0;top:calc(50% - 0.5em);margin-top:0}.container.disabled{opacity:0.5}.container.invalid{border-color:var(--fieldset-danger-color)}.help-text,.error-message{font-style:italic;opacity:0.7;font-size:0.8em;margin:0.25em}.error-message{color:var(--fieldset-danger-color);font-style:normal;font-weight:bold}";
+const dnnFieldsetCss = ":host{display:inline-block;--fieldset-foreground:var(--dnn-color-foreground, #000);--fieldset-background:var(--dnn-color-background, #fff);--fieldset-focus-color:var(--dnn-color-primary, #3792ED);--fieldset-danger-color:var(--dnn-color-danger, #900);--fieldset-control-radius:var(--dnn-controls-radius, 3px)}.container{border:1px solid var(--fieldset-foreground, #000);border-radius:var(--fieldset-control-radius, 3px);padding:0.75em;display:flex;justify-content:space-between;gap:0.1em;position:relative;background-color:var(--fieldset-background);margin-top:1em;line-height:1em}.container .resizer{width:100%}.container .inner-container{position:relative;width:100%;background-color:var(--fieldset-background);height:calc(100% - 1em)}.container label{display:inline-flex;position:absolute;opacity:1;transition:all 150ms ease-in-out;left:0.5em;top:-1.5em;padding:0 0.5em;background-color:var(--fieldset-background);white-space:nowrap;max-width:100%;border-radius:var(--fieldset-control-radius);font-size:1em;margin-top:1em;z-index:1;pointer-events:none;line-height:1em}.container.focused{border:1px solid var(--fieldset-focus-color);box-shadow:0 0 0 1px var(--fieldset-focus-color)}.container.focused.invalid{border:1px solid var(--fieldset-danger-color);box-shadow:0 0 0 1px var(--fieldset-danger-color)}.container.focused input{color:var(--fieldset-foreground, #000)}.container.float-label label{opacity:0.6;left:0;top:calc(50% - 0.5em);margin-top:0}.container.disabled{opacity:0.5}.container.invalid{border-color:var(--fieldset-danger-color)}.help-text,.error-message{font-style:italic;opacity:0.7;font-size:0.8em;margin:0.25em}.error-message{color:var(--fieldset-danger-color);font-style:normal;font-weight:bold}";
 const DnnFieldsetStyle0 = dnnFieldsetCss;
 
 const DnnFieldset = class {
@@ -65,10 +65,10 @@ const DnnFieldset = class {
         return classes.join(" ");
     }
     render() {
-        return (index.h(index.Host, { key: '7ee42e394faac7673753be66dc1c4796f4d3cbf7' }, index.h("div", { key: 'cbc711c65ac10f3848014658228f6b28e8c2f855', class: this.getContainerClasses() }, this.label &&
-            index.h("label", { key: '4175e907013de07a8bfff4a1b760f707c47c9780' }, index.h("slot", { key: 'c665a4a1e89667b6796fdebf7a399cf73f3a2d5a', name: "label-prefix" }), this.label, index.h("slot", { key: 'f38bc75b747a9690578235e67c614fe7bac802fc', name: "label-suffix" })), index.h("div", { key: 'e94e37a5c5fe4284e60011d15453a0745eed4ef4', class: "resizer", style: { resize: this.resizable, overflow: this.resizable == "none" ? "visible" : "auto" } }, index.h("div", { key: 'eca3a5f55cbdeb75912a091a31a495b0d7abd6d8', class: "inner-container" }, index.h("slot", { key: '6dcfd24831f36fcf33b78a172b2f1a04773957bd' })))), this.invalid && this.customValidityMessage &&
-            index.h("div", { key: '6d939440282fa9bf11ef431edaea1199e9183e4b', class: "error-message" }, this.customValidityMessage), !this.invalid &&
-            index.h("div", { key: '14d4661d357fb3a97e2fbba748cb2126389d1c53', class: "help-text" }, this.helpText)));
+        return (index.h(index.Host, { key: 'f97ae39c92d41cd55c68e49726d2d03cd95d5a4e' }, index.h("div", { key: '428c954731215899b0b8d85132c93d2452dabf1d', class: this.getContainerClasses() }, this.label &&
+            index.h("label", { key: '1430170d4d130c7174f4bb369520ecff89e42b23' }, index.h("slot", { key: '381665dc530db579968d89fe826f081b4d7c0957', name: "label-prefix" }), this.label, index.h("slot", { key: '513395e461546b1b3cf214c59f4afe5ba580ffd9', name: "label-suffix" })), index.h("div", { key: '621ddedaf8da8d3e79346778a70e9de7039483fe', class: "resizer", style: { resize: this.resizable, overflow: this.resizable == "none" ? "visible" : "auto" } }, index.h("div", { key: '42b3cd52e1a8182abfc3eba043ab79b80f15d310', class: "inner-container" }, index.h("slot", { key: 'a4225c9af1d7e2fd613e0b3b1975c53ef98e8448' })))), this.invalid && this.customValidityMessage &&
+            index.h("div", { key: '917c3db73b9eef42934152494cf0cb03e94082df', class: "error-message" }, this.customValidityMessage), !this.invalid &&
+            index.h("div", { key: '5300002ff371d1b32292831e7849db4d985059c1', class: "help-text" }, this.helpText)));
     }
 };
 DnnFieldset.style = DnnFieldsetStyle0;

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

@@ -1 +1 @@
-{"file":"dnn-fieldset.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,upDAAupD,CAAC;AAC/qD,0BAAe,cAAc;;MCUhB,WAAW;;;;;;;;;yBAqBgE,MAAM;;;;IAI5F,MAAM,UAAU;QACd,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB;;IAID,MAAM,UAAU;QACd,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;;IAID,MAAM,OAAO;QACX,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;KACtB;;IAID,MAAM,MAAM;QACV,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;KACvB;;IAID,MAAM,QAAQ;QACZ,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KACzB;;IAID,MAAM,UAAU;QACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;;IAID,MAAM,WAAW,CAAC,KAAc,EAAE,OAAgB;QAChD,IAAI,CAAC,OAAO,GAAG,CAAC,KAAK,CAAC;QACtB,IAAI,CAAC,qBAAqB,GAAG,OAAO,CAAC;KACtC;IAIO,mBAAmB;QACzB,MAAM,OAAO,GAAa,CAAC,WAAW,CAAC,CAAC;QACxC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACzB;QAED,IAAI,IAAI,CAAC,QAAQ,EACjB;YACE,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC1B;QAED,IAAI,IAAI,CAAC,OAAO,EAAC;YACf,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACzB;QAED,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,OAAO,EACpC;YACE,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAC7B;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC1B;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAAE,IACnC,IAAI,CAAC,KAAK;YACTA,sEACEA,mEAAM,IAAI,EAAC,cAAc,GAAQ,EAChC,IAAI,CAAC,KAAK,EACXA,mEAAM,IAAI,EAAC,cAAc,GAAQ,CAC3B,EAEVA,kEAAK,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,IAAI,MAAM,GAAG,SAAS,GAAG,MAAM,EAAC,IAC3GA,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,oEAAa,CACT,CACF,CACF,EACL,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,qBAAqB;YACzCA,kEAAK,KAAK,EAAC,eAAe,IACvB,IAAI,CAAC,qBAAqB,CACvB,EAEP,CAAC,IAAI,CAAC,OAAO;YACZA,kEAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,QAAQ,CAAO,CAEzC,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/dnn-fieldset/dnn-fieldset.scss?tag=dnn-fieldset&encapsulation=shadow","src/components/dnn-fieldset/dnn-fieldset.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  /** @prop --foreground: Defines the foreground color. */\n  --fieldset-foreground: var(--dnn-color-foreground, #000);\n\n  /** @prop --background: Defines the background color. */\n  --fieldset-background: var(--dnn-color-background, #fff);\n\n  /** @prop --focus-color: Defines the color when the component is focused. */\n  --fieldset-focus-color: var(--dnn-color-primary, #3792ED);\n\n  /** @prop --danger-color: Defines the danger color used for invalid data. */\n  --fieldset-danger-color: var(--dnn-color-danger, #900);\n\n  /** @prop --control-radius: Defines the radius for the control corners. */\n  --fieldset-control-radius: var(--dnn-controls-radius, 3px);\n}\n\n.container{\n  border: 1px solid var(--fieldset-foreground, #000);\n  border-radius: var(--fieldset-control-radius, 3px);\n  padding: 0.75em;\n  display: flex;\n  justify-content: space-between;\n  gap: 0.1em;\n  position: relative;\n  background-color: var(--fieldset-background);\n  margin-top: 1em;\n  .resizer{\n    width: 100%;\n  }\n  .inner-container{\n    position: relative;\n    width: 100%;\n    background-color: var(--fieldset-background);\n    height: calc(100% - 1em);\n  }\n  label{\n    display: inline-flex;\n    position: absolute;\n    opacity: 1;\n    transition: all 150ms ease-in-out;\n    left: 0.5em;\n    top: -1.5em;\n    padding: 0 0.5em;\n    background-color: var(--fieldset-background);\n    white-space: nowrap;\n    max-width: 100%;\n    border-radius: var(--fieldset-control-radius);\n    font-size: 1em;\n    margin-top: 1em;\n    z-index: 1;\n    pointer-events: none;\n  }\n  &.focused{\n    border: 1px solid var(--fieldset-focus-color);\n    box-shadow: 0 0 0 1px var(--fieldset-focus-color);\n    &.invalid{\n      border: 1px solid var(--fieldset-danger-color);\n      box-shadow: 0 0 0 1px var(--fieldset-danger-color);\n    }\n    input{\n      color: var(--fieldset-foreground, #000);\n    }\n  }\n  &.float-label{\n    label{\n      opacity: 0.6;\n      left: 0;\n      top: calc(50% - 0.5em);\n      margin-top:0;\n    }\n  }\n  &.disabled{\n    opacity: 0.5;\n  }\n  &.invalid{\n    border-color: var(--fieldset-danger-color);\n  }\n}\n\n.help-text, .error-message{\n  font-style: italic;\n  opacity: 0.7;\n  font-size: 0.8em;\n  margin: 0.25em;\n}\n.error-message{\n  color: var(--fieldset-danger-color);\n  font-style: normal;\n  font-weight: bold;\n}","import { Component, Host, h, Prop, Method, State } from '@stencil/core';\n\n/** A custom input component that wraps the html input element is a mobile friendly component that supports a label, some help text and other features.\n * @slot label-prefix - Can be used to inject content before the labe.\n * @slot label-suffix - Can be used to inject content after the label.\n */\n@Component({\n  tag: 'dnn-fieldset',\n  styleUrl: 'dnn-fieldset.scss',\n  shadow: true,\n})\nexport class DnnFieldset {\n\n  /** If true the fieldset will display as focused. */\n  @Prop({mutable: true, reflect: true}) focused: boolean;\n\n  /** If true, the fieldset will display as disabled. */\n  @Prop({mutable: true, reflect: true}) disabled: boolean;\n\n  /** If true, the  fieldset will display as invalid. */\n  @Prop({mutable: true, reflect: true}) invalid: boolean;\n\n  /** Sets the text of the fieldset label (caption). */\n  @Prop() label: string;\n\n  /** If true, the label will float in the container, set false to show it on top. */\n  @Prop({mutable: true, reflect: true}) floatLabel: boolean;\n\n  /** Can be used to show some help text about this field. */\n  @Prop() helpText: string;\n\n  /** Can be set to specify if the fieldset can be resized by the user. */\n  @Prop() resizable: \"none\" | \"both\" | \"horizontal\" | \"vertical\" | \"block\" | \"inline\" = \"none\";\n\n  /** Sets the fieldset to the focused state. */\n  @Method()\n  async setFocused() {\n    this.focused = true;\n  }\n\n  /** Unsets the fieldset focused state. */\n  @Method()\n  async setBlurred() {\n    this.focused = false;\n  }\n\n  /** Sets the fieldset to a disabled state. */\n  @Method()\n  async disable() {\n    this.disabled = true;\n  }\n\n  /** Sets the fieldset to an enabled state. */\n  @Method()\n  async enable() {\n    this.disabled = false;\n  }\n\n  /** Places the label on the top of the container. */\n  @Method()\n  async pinLabel() {\n    this.floatLabel = false;\n  }\n\n  /** Places the label in the vertical middle of the container. */\n  @Method()\n  async unpinLabel() {\n    this.floatLabel = true;\n  }\n\n  /** Sets the validity of the field. */\n  @Method()\n  async setValidity(valid: boolean, message?: string) {\n    this.invalid = !valid;\n    this.customValidityMessage = message;\n  }\n\n  @State() customValidityMessage: string;\n\n  private getContainerClasses() {\n    const classes: string[] = [\"container\"];\n    if (this.focused) {\n      classes.push(\"focused\");\n    }\n\n    if (this.disabled)\n    {\n      classes.push(\"disabled\");\n    }\n\n    if (this.invalid){\n      classes.push(\"invalid\");\n    }\n\n    if (this.floatLabel && !this.focused)\n    {\n      classes.push(\"float-label\");\n    }\n\n    return classes.join(\" \");\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getContainerClasses()}>\n          {this.label &&\n            <label>\n              <slot name=\"label-prefix\"></slot>\n              {this.label}\n              <slot name=\"label-suffix\"></slot>\n            </label>\n          }\n          <div class=\"resizer\" style={{resize: this.resizable, overflow: this.resizable == \"none\" ? \"visible\" : \"auto\"}}>\n            <div class=\"inner-container\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n        {this.invalid && this.customValidityMessage &&\n          <div class=\"error-message\">\n            {this.customValidityMessage}\n          </div>\n        }\n        {!this.invalid &&\n          <div class=\"help-text\">{this.helpText}</div>\n        }\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"dnn-fieldset.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,urDAAurD,CAAC;AAC/sD,0BAAe,cAAc;;MCUhB,WAAW;;;;;;;;;yBAqBgE,MAAM;;;;IAI5F,MAAM,UAAU;QACd,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB;;IAID,MAAM,UAAU;QACd,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;;IAID,MAAM,OAAO;QACX,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;KACtB;;IAID,MAAM,MAAM;QACV,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;KACvB;;IAID,MAAM,QAAQ;QACZ,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KACzB;;IAID,MAAM,UAAU;QACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;;IAID,MAAM,WAAW,CAAC,KAAc,EAAE,OAAgB;QAChD,IAAI,CAAC,OAAO,GAAG,CAAC,KAAK,CAAC;QACtB,IAAI,CAAC,qBAAqB,GAAG,OAAO,CAAC;KACtC;IAIO,mBAAmB;QACzB,MAAM,OAAO,GAAa,CAAC,WAAW,CAAC,CAAC;QACxC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACzB;QAED,IAAI,IAAI,CAAC,QAAQ,EACjB;YACE,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC1B;QAED,IAAI,IAAI,CAAC,OAAO,EAAC;YACf,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACzB;QAED,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,OAAO,EACpC;YACE,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAC7B;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC1B;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAAE,IACnC,IAAI,CAAC,KAAK;YACTA,sEACEA,mEAAM,IAAI,EAAC,cAAc,GAAQ,EAChC,IAAI,CAAC,KAAK,EACXA,mEAAM,IAAI,EAAC,cAAc,GAAQ,CAC3B,EAEVA,kEAAK,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,IAAI,MAAM,GAAG,SAAS,GAAG,MAAM,EAAC,IAC3GA,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,oEAAa,CACT,CACF,CACF,EACL,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,qBAAqB;YACzCA,kEAAK,KAAK,EAAC,eAAe,IACvB,IAAI,CAAC,qBAAqB,CACvB,EAEP,CAAC,IAAI,CAAC,OAAO;YACZA,kEAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,QAAQ,CAAO,CAEzC,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/dnn-fieldset/dnn-fieldset.scss?tag=dnn-fieldset&encapsulation=shadow","src/components/dnn-fieldset/dnn-fieldset.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  /** @prop --foreground: Defines the foreground color. */\n  --fieldset-foreground: var(--dnn-color-foreground, #000);\n\n  /** @prop --background: Defines the background color. */\n  --fieldset-background: var(--dnn-color-background, #fff);\n\n  /** @prop --focus-color: Defines the color when the component is focused. */\n  --fieldset-focus-color: var(--dnn-color-primary, #3792ED);\n\n  /** @prop --danger-color: Defines the danger color used for invalid data. */\n  --fieldset-danger-color: var(--dnn-color-danger, #900);\n\n  /** @prop --control-radius: Defines the radius for the control corners. */\n  --fieldset-control-radius: var(--dnn-controls-radius, 3px);\n}\n\n.container{\n  border: 1px solid var(--fieldset-foreground, #000);\n  border-radius: var(--fieldset-control-radius, 3px);\n  padding: 0.75em;\n  display: flex;\n  justify-content: space-between;\n  gap: 0.1em;\n  position: relative;\n  background-color: var(--fieldset-background);\n  margin-top: 1em;\n  line-height: 1em;\n  .resizer{\n    width: 100%;\n  }\n  .inner-container{\n    position: relative;\n    width: 100%;\n    background-color: var(--fieldset-background);\n    height: calc(100% - 1em);\n  }\n  label{\n    display: inline-flex;\n    position: absolute;\n    opacity: 1;\n    transition: all 150ms ease-in-out;\n    left: 0.5em;\n    top: -1.5em;\n    padding: 0 0.5em;\n    background-color: var(--fieldset-background);\n    white-space: nowrap;\n    max-width: 100%;\n    border-radius: var(--fieldset-control-radius);\n    font-size: 1em;\n    margin-top: 1em;\n    z-index: 1;\n    pointer-events: none;\n    line-height: 1em;\n  }\n  &.focused{\n    border: 1px solid var(--fieldset-focus-color);\n    box-shadow: 0 0 0 1px var(--fieldset-focus-color);\n    &.invalid{\n      border: 1px solid var(--fieldset-danger-color);\n      box-shadow: 0 0 0 1px var(--fieldset-danger-color);\n    }\n    input{\n      color: var(--fieldset-foreground, #000);\n    }\n  }\n  &.float-label{\n    label{\n      opacity: 0.6;\n      left: 0;\n      top: calc(50% - 0.5em);\n      margin-top:0;\n    }\n  }\n  &.disabled{\n    opacity: 0.5;\n  }\n  &.invalid{\n    border-color: var(--fieldset-danger-color);\n  }\n}\n\n.help-text, .error-message{\n  font-style: italic;\n  opacity: 0.7;\n  font-size: 0.8em;\n  margin: 0.25em;\n}\n.error-message{\n  color: var(--fieldset-danger-color);\n  font-style: normal;\n  font-weight: bold;\n}","import { Component, Host, h, Prop, Method, State } from '@stencil/core';\n\n/** A custom input component that wraps the html input element is a mobile friendly component that supports a label, some help text and other features.\n * @slot label-prefix - Can be used to inject content before the labe.\n * @slot label-suffix - Can be used to inject content after the label.\n */\n@Component({\n  tag: 'dnn-fieldset',\n  styleUrl: 'dnn-fieldset.scss',\n  shadow: true,\n})\nexport class DnnFieldset {\n\n  /** If true the fieldset will display as focused. */\n  @Prop({mutable: true, reflect: true}) focused: boolean;\n\n  /** If true, the fieldset will display as disabled. */\n  @Prop({mutable: true, reflect: true}) disabled: boolean;\n\n  /** If true, the  fieldset will display as invalid. */\n  @Prop({mutable: true, reflect: true}) invalid: boolean;\n\n  /** Sets the text of the fieldset label (caption). */\n  @Prop() label: string;\n\n  /** If true, the label will float in the container, set false to show it on top. */\n  @Prop({mutable: true, reflect: true}) floatLabel: boolean;\n\n  /** Can be used to show some help text about this field. */\n  @Prop() helpText: string;\n\n  /** Can be set to specify if the fieldset can be resized by the user. */\n  @Prop() resizable: \"none\" | \"both\" | \"horizontal\" | \"vertical\" | \"block\" | \"inline\" = \"none\";\n\n  /** Sets the fieldset to the focused state. */\n  @Method()\n  async setFocused() {\n    this.focused = true;\n  }\n\n  /** Unsets the fieldset focused state. */\n  @Method()\n  async setBlurred() {\n    this.focused = false;\n  }\n\n  /** Sets the fieldset to a disabled state. */\n  @Method()\n  async disable() {\n    this.disabled = true;\n  }\n\n  /** Sets the fieldset to an enabled state. */\n  @Method()\n  async enable() {\n    this.disabled = false;\n  }\n\n  /** Places the label on the top of the container. */\n  @Method()\n  async pinLabel() {\n    this.floatLabel = false;\n  }\n\n  /** Places the label in the vertical middle of the container. */\n  @Method()\n  async unpinLabel() {\n    this.floatLabel = true;\n  }\n\n  /** Sets the validity of the field. */\n  @Method()\n  async setValidity(valid: boolean, message?: string) {\n    this.invalid = !valid;\n    this.customValidityMessage = message;\n  }\n\n  @State() customValidityMessage: string;\n\n  private getContainerClasses() {\n    const classes: string[] = [\"container\"];\n    if (this.focused) {\n      classes.push(\"focused\");\n    }\n\n    if (this.disabled)\n    {\n      classes.push(\"disabled\");\n    }\n\n    if (this.invalid){\n      classes.push(\"invalid\");\n    }\n\n    if (this.floatLabel && !this.focused)\n    {\n      classes.push(\"float-label\");\n    }\n\n    return classes.join(\" \");\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getContainerClasses()}>\n          {this.label &&\n            <label>\n              <slot name=\"label-prefix\"></slot>\n              {this.label}\n              <slot name=\"label-suffix\"></slot>\n            </label>\n          }\n          <div class=\"resizer\" style={{resize: this.resizable, overflow: this.resizable == \"none\" ? \"visible\" : \"auto\"}}>\n            <div class=\"inner-container\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n        {this.invalid && this.customValidityMessage &&\n          <div class=\"error-message\">\n            {this.customValidityMessage}\n          </div>\n        }\n        {!this.invalid &&\n          <div class=\"help-text\">{this.helpText}</div>\n        }\n      </Host>\n    );\n  }\n\n}\n"],"version":3}