@dnncommunity/dnn-elements 0.24.0-beta.7 → 0.24.0-beta.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/dnn-autocomplete.cjs.entry.js +5 -4
- package/dist/cjs/dnn-autocomplete.cjs.entry.js.map +1 -1
- package/dist/cjs/dnn-textarea.cjs.entry.js +3 -1
- package/dist/cjs/dnn-textarea.cjs.entry.js.map +1 -1
- package/dist/collection/components/dnn-autocomplete/dnn-autocomplete.js +5 -4
- package/dist/collection/components/dnn-autocomplete/dnn-autocomplete.js.map +1 -1
- package/dist/collection/components/dnn-textarea/dnn-textarea.js +3 -1
- package/dist/collection/components/dnn-textarea/dnn-textarea.js.map +1 -1
- package/dist/dnn/dnn.esm.js +1 -1
- package/dist/dnn/p-27dc2d8f.entry.js +2 -0
- package/dist/dnn/p-27dc2d8f.entry.js.map +1 -0
- package/dist/dnn/p-535748e2.entry.js +2 -0
- package/dist/dnn/p-535748e2.entry.js.map +1 -0
- package/dist/esm/dnn-autocomplete.entry.js +5 -4
- package/dist/esm/dnn-autocomplete.entry.js.map +1 -1
- package/dist/esm/dnn-textarea.entry.js +3 -1
- package/dist/esm/dnn-textarea.entry.js.map +1 -1
- package/dist/types/components/dnn-textarea/dnn-textarea.d.ts +1 -0
- package/package.json +1 -1
- package/dist/dnn/p-3d55d879.entry.js +0 -2
- package/dist/dnn/p-3d55d879.entry.js.map +0 -1
- package/dist/dnn/p-ec753af4.entry.js +0 -2
- package/dist/dnn/p-ec753af4.entry.js.map +0 -1
|
@@ -113,6 +113,7 @@ const DnnAutocomplete = class {
|
|
|
113
113
|
}
|
|
114
114
|
handleInput(e) {
|
|
115
115
|
const value = e.target.value;
|
|
116
|
+
this.value = value;
|
|
116
117
|
var valid = this.inputField.checkValidity();
|
|
117
118
|
this.valid = valid;
|
|
118
119
|
this.valueInput.emit(value);
|
|
@@ -173,7 +174,7 @@ const DnnAutocomplete = class {
|
|
|
173
174
|
this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
|
|
174
175
|
}
|
|
175
176
|
}
|
|
176
|
-
this.value = (_a = this.suggestions[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.value;
|
|
177
|
+
this.value = ((_a = this.suggestions[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.value) || this.value;
|
|
177
178
|
if (e.key === "Enter") {
|
|
178
179
|
var selectedItem = this.suggestions[this.selectedIndex];
|
|
179
180
|
this.value = selectedItem.value;
|
|
@@ -251,9 +252,9 @@ const DnnAutocomplete = class {
|
|
|
251
252
|
}
|
|
252
253
|
render() {
|
|
253
254
|
var _a;
|
|
254
|
-
return (index.h(index.Host, { key: '
|
|
255
|
-
index.h("div", { key: '
|
|
256
|
-
index.h("div", { key: '
|
|
255
|
+
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 &&
|
|
256
|
+
index.h("div", { key: '1be08bd2a97113d4ee68f3099fa025ccf7e051b7', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
|
|
257
|
+
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" }))))));
|
|
257
258
|
}
|
|
258
259
|
static get formAssociated() { return true; }
|
|
259
260
|
get element() { return index.getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dnn-autocomplete.entry.cjs.js","mappings":"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","names":["h","Host","index","Debounce"],"sources":["src/components/dnn-autocomplete/dnn-autocomplete.scss?tag=dnn-autocomplete&encapsulation=shadow","src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n /** @prop --foreground-color: Defines the foreground color. */\n --foreground-color: var(--dnn-color-foreground, #000);\n\n /** @prop --background-color: Defines the background color. */\n --background-color: var(--dnn-color-background, #fff);\n\n /** @prop --focus-color: Defines the color when the component is focused. */\n --focus-color: var(--dnn-color-primary, #3792ED);\n\n /** @prop --danger-color: Defines the danger color used for invalid data. */\n --danger-color: var(--dnn-color-danger, #900);\n\n /** @prop --control-radius: Defines the radius for the control corners. */\n --control-radius: var(--dnn-controls-radius, 3px);\n}\n\ndnn-fieldset{\n width: 100%;\n}\n\n@keyframes shift {\n 0% {\n background-position: 0% 0;\n }\n 50% {\n background-position: 100% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n.inner-container{\n display: flex;\n justify-content: space-between;\n position: relative;\n width: 100%;\n\n input {\n border: none;\n outline: none;\n background-color: transparent;\n color: var(--foreground-color);\n text-align: var(--input-text-align);\n width: 100%;\n }\n\n svg.chevron-down{\n height: 1rem;\n width: auto;\n transform: scale(1.2);\n cursor: pointer;\n }\n\n ul{\n position: absolute;\n border: 1px solid lightgray;\n margin: 0;\n padding: var(--dnn-controls-radius, 3px) 0;\n overflow-y: auto;\n width: 100%;\n box-shadow: 2px 2px 6px 1px rgb(0 0 0 / 30%);\n background-color: var(--dnn-color-background, white);\n border-radius: var(--dnn-controls-radius, 3px);\n z-index: 2;\n display: none;\n scroll-behavior: smooth;\n &.show{\n display: block;\n }\n li {\n display: block;\n list-style-type: none;\n cursor: pointer;\n padding: 0 0.5rem;\n &.selected {\n background-color: lightgray;\n }\n &:hover {\n background-color: lightgray;\n }\n }\n .loading {\n width: 100%;\n height: 0.5rem;\n border-radius: 0.5rem;\n background: linear-gradient(\n to right,\n var(--background-color) 0%,\n var(--foreground-color) 50%,\n var(--background-color) 100%);\n background-size: 200% 100%;\n animation: shift 2s linear infinite;\n width: 75%;\n margin: 0 auto;\n opacity: 0.5;\n }\n }\n}\n","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n\n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions: number;\n\n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n @Element() element: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n @State() selectedIndex: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n \n /** attacth the internals for form validation */\n @AttachInternals() internals: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleOutsideClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n \n componentDidRender(){\n if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n this.adjustDropdownPosition();\n }\n }\n\n private inputField!: HTMLInputElement;\n private suggestionsContainer: HTMLUListElement;\n private labelId: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n \n private handleInput(e: Event) {\n const value = (e.target as HTMLInputElement).value;\n 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 private handleDropdownClick(): void {\n this.handleSearchQueryChanged(this.value);\n }\n\n @Debounce(100)\n private handleSuggestionsScroll(): void {\n const container = this.suggestionsContainer;\n const currentScrollTop = container.scrollTop;\n\n // Only act if we are scrolling down\n if (currentScrollTop > this.lastScrollTop) {\n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n if (loadingDiv == undefined) {\n this.lastScrollTop = currentScrollTop;\n return;\n }\n\n const loadingDivPosition = loadingDiv.offsetTop;\n const loadingDivHeight = loadingDiv.offsetHeight;\n const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n // Calculate the visible bottom of the scroll container\n const visibleBottom = currentScrollTop + container.clientHeight;\n\n // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n if (visibleBottom > loadingDivBottom) {\n // Adjust scrollTop so it doesn't scroll past the loading div\n container.scrollTop = loadingDivBottom - container.clientHeight;\n }\n\n // Check if more items are needed based on the position of the loading div\n this.checkIfMoreItemsNeeded();\n }\n\n // Update the last scroll position\n this.lastScrollTop = currentScrollTop;\n }\n\n @Debounce()\n private checkIfMoreItemsNeeded() {\n const container = this.suggestionsContainer;\n \n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n if (loadingDiv == undefined) return; // Exit if there's no loading div\n \n const scrollPosition = container.scrollTop + container.clientHeight;\n const loadingDivPosition = loadingDiv.offsetTop;\n \n // Check if the loading div is within the threshold of becoming visible\n if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n const eventArgs: NeedMoreItemsEventArgs = {\n searchTerm: this.inputField.value,\n };\n this.needMoreItems.emit(eventArgs);\n }\n }\n\n handleBlur(): void {\n this.focused = false\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete=\"off\"\n value={this.suggestions.length > 0 && this.selectedIndex != undefined ? this.suggestions[this.selectedIndex].label : this.value}\n onFocus={() => this.focused = true}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n <ul\n class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n role=\"listbox\"\n ref={el => this.suggestionsContainer = el}\n onScroll={() => this.handleSuggestionsScroll()}\n >\n {this.suggestions.map((suggestion, index) => (\n <li\n id={`option-${index}`}\n role=\"option\"\n aria-selected={this.selectedIndex == index}\n class={this.selectedIndex == index ? \"selected\" : \"\"}\n onClick={e => this.selectItem(e, index)}\n >\n {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n </li>\n ))}\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n <div class=\"loading\">\n </div>\n }\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n </div>\n }\n </ul>\n <svg\n onClick={() => this.handleDropdownClick()}\n class=\"chevron-down\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -960 960 960\">\n <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n </svg>\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n}"],"version":3}
|
|
1
|
+
{"file":"dnn-autocomplete.entry.cjs.js","mappings":"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","names":["h","Host","index","Debounce"],"sources":["src/components/dnn-autocomplete/dnn-autocomplete.scss?tag=dnn-autocomplete&encapsulation=shadow","src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n /** @prop --foreground-color: Defines the foreground color. */\n --foreground-color: var(--dnn-color-foreground, #000);\n\n /** @prop --background-color: Defines the background color. */\n --background-color: var(--dnn-color-background, #fff);\n\n /** @prop --focus-color: Defines the color when the component is focused. */\n --focus-color: var(--dnn-color-primary, #3792ED);\n\n /** @prop --danger-color: Defines the danger color used for invalid data. */\n --danger-color: var(--dnn-color-danger, #900);\n\n /** @prop --control-radius: Defines the radius for the control corners. */\n --control-radius: var(--dnn-controls-radius, 3px);\n}\n\ndnn-fieldset{\n width: 100%;\n}\n\n@keyframes shift {\n 0% {\n background-position: 0% 0;\n }\n 50% {\n background-position: 100% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n.inner-container{\n display: flex;\n justify-content: space-between;\n position: relative;\n width: 100%;\n\n input {\n border: none;\n outline: none;\n background-color: transparent;\n color: var(--foreground-color);\n text-align: var(--input-text-align);\n width: 100%;\n }\n\n svg.chevron-down{\n height: 1rem;\n width: auto;\n transform: scale(1.2);\n cursor: pointer;\n }\n\n ul{\n position: absolute;\n border: 1px solid lightgray;\n margin: 0;\n padding: var(--dnn-controls-radius, 3px) 0;\n overflow-y: auto;\n width: 100%;\n box-shadow: 2px 2px 6px 1px rgb(0 0 0 / 30%);\n background-color: var(--dnn-color-background, white);\n border-radius: var(--dnn-controls-radius, 3px);\n z-index: 2;\n display: none;\n scroll-behavior: smooth;\n &.show{\n display: block;\n }\n li {\n display: block;\n list-style-type: none;\n cursor: pointer;\n padding: 0 0.5rem;\n &.selected {\n background-color: lightgray;\n }\n &:hover {\n background-color: lightgray;\n }\n }\n .loading {\n width: 100%;\n height: 0.5rem;\n border-radius: 0.5rem;\n background: linear-gradient(\n to right,\n var(--background-color) 0%,\n var(--foreground-color) 50%,\n var(--background-color) 100%);\n background-size: 200% 100%;\n animation: shift 2s linear infinite;\n width: 75%;\n margin: 0 auto;\n opacity: 0.5;\n }\n }\n}\n","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n\n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions: number;\n\n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n @Element() element: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n 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}
|
|
@@ -54,6 +54,8 @@ const DnnTextarea = class {
|
|
|
54
54
|
}
|
|
55
55
|
componentWillLoad() {
|
|
56
56
|
this.labelId = stringUtilities.generateRandomId();
|
|
57
|
+
}
|
|
58
|
+
componentDidLoad() {
|
|
57
59
|
this.textarea.style.minHeight = `${this.rows * 1.5}em`;
|
|
58
60
|
}
|
|
59
61
|
// eslint-disable-next-line @stencil-community/own-methods-must-be-private
|
|
@@ -95,7 +97,7 @@ const DnnTextarea = class {
|
|
|
95
97
|
}
|
|
96
98
|
render() {
|
|
97
99
|
var _a;
|
|
98
|
-
return (index.h(index.Host, { key: '
|
|
100
|
+
return (index.h(index.Host, { key: '78bc32de18f8c22005f02e37b3d7d0be2ea7ae7d', tabIndex: this.focused ? -1 : 0, onFocus: () => this.textarea.focus(), onBlur: () => this.textarea.blur() }, index.h("dnn-fieldset", { key: '26f23d95e0e5188421edee99a56a6d7fb2b58228', ref: el => this.fieldset = el, invalid: !this.valid, focused: this.focused, resizable: this.resizable, label: `${(_a = this.label) !== null && _a !== void 0 ? _a : ""}${this.required ? " *" : ""}`, helpText: this.helpText, disabled: this.disabled, id: this.labelId, floatLabel: this.shouldLabelFloat(), onClick: () => !this.focused && this.textarea.focus() }, index.h("textarea", { key: '5a7d1b97c43ce0cead8b6bd47da900b888656a32', ref: el => this.textarea = el, name: this.name, value: this.value, required: this.required, onBlur: () => this.focused = false, onFocus: () => this.focused = true, onChange: () => this.handleChange(), onInput: e => this.handleInput(e.target.value), onInvalid: () => this.handleInvalid(), disabled: this.disabled, autoComplete: this.autocomplete, minlength: this.minlength, maxlength: this.maxlength, readonly: this.readonly, "aria-labelledby": this.labelId, rows: this.rows }))));
|
|
99
101
|
}
|
|
100
102
|
static get formAssociated() { return true; }
|
|
101
103
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dnn-textarea.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,qcAAqc,CAAC;AAC7d,0BAAe,cAAc;;MCShB,WAAW;;;;;;;;;;;;yBAEgE,OAAO;;;;;;;4BAqB9D,KAAK;;;;oBAYb,CAAC;uBA6BL,KAAK;qBACP,IAAI;;;;IApBrB,MAAM,aAAa;QACjB,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;KAC/B;;IAID,MAAM,iBAAiB,CAAC,OAAe;QACrC,IAAI,OAAO,IAAI,SAAS,IAAI,OAAO,IAAI,EAAE,EAAE;YACzC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;YACpC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAChC,OAAO;SACR;QAED,IAAI,CAAC,qBAAqB,GAAG,OAAO,CAAC;QACrC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;KAC1C;IAYD,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAGA,gCAAgB,EAAE,CAAC;
|
|
1
|
+
{"file":"dnn-textarea.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,qcAAqc,CAAC;AAC7d,0BAAe,cAAc;;MCShB,WAAW;;;;;;;;;;;;yBAEgE,OAAO;;;;;;;4BAqB9D,KAAK;;;;oBAYb,CAAC;uBA6BL,KAAK;qBACP,IAAI;;;;IApBrB,MAAM,aAAa;QACjB,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;KAC/B;;IAID,MAAM,iBAAiB,CAAC,OAAe;QACrC,IAAI,OAAO,IAAI,SAAS,IAAI,OAAO,IAAI,EAAE,EAAE;YACzC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;YACpC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAChC,OAAO;SACR;QAED,IAAI,CAAC,qBAAqB,GAAG,OAAO,CAAC;QACrC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;KAC1C;IAYD,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAGA,gCAAgB,EAAE,CAAC;KACnC;IAED,gBAAgB;QACd,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,IAAI,CAAC;KACxD;;IAGD,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;QACpC,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,KAAa;QAC/B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC;QAC1C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAClC;IAEO,aAAa;QACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,IAAI,CAAC,qBAAqB,IAAI,SAAS,EAAC;YAC1C,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC;SAC9D;KACF;IAEO,YAAY;QAClB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClC,IAAI,IAAI,CAAC,IAAI,IAAI,SAAS,EAAC;YACzB,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;IAEO,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;IAED,MAAM;;QACJ,QACEC,QAACC,UAAI,qDACH,QAAQ,EAAE,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAC,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,EACpC,MAAM,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,IAElCD,2EACE,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,EAC7B,OAAO,EAAE,CAAC,IAAI,CAAC,KAAK,EACpB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,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,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,EACnC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,IAErDA,uEACE,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,KAAK,EAClC,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,GAAC,IAAI,EAChC,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EACnC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAE,CAAC,CAAC,MAA8B,CAAC,KAAK,CAAC,EACvE,SAAS,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,qBACN,IAAI,CAAC,OAAO,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACW,CACV,EACP;KACH;;;;;;;","names":["generateRandomId","h","Host"],"sources":["src/components/dnn-textarea/dnn-textarea.scss?tag=dnn-textarea&encapsulation=shadow","src/components/dnn-textarea/dnn-textarea.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n /** @prop --foreground: Defines the foreground color. */\n --foreground: var(--dnn-color-foreground, #000);\n\n /** @prop --background: Defines the background color. */\n --background: 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\ntextarea{\n border: none;\n outline: none;\n background-color: transparent;\n color: var(--foreground);\n width: calc(100% - 1em);\n height: calc(100% - 1em);\n line-height: 1.5em;\n resize: none;\n}","import { Component, Host, h, Prop, AttachInternals, State, Event, EventEmitter, Method } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n/** A custom textarea component. */\n@Component({\n tag: 'dnn-textarea',\n styleUrl: 'dnn-textarea.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnTextarea {\n /** Can be set to change how the user can resize the field. */\n @Prop() resizable: \"none\" | \"both\" | \"horizontal\" | \"vertical\" | \"block\" | \"inline\" = \"block\";\n\n /** Sets the value of the textarea. */\n @Prop({mutable: true}) value: string;\n\n /** The label for this input. */\n @Prop() label: string;\n\n /** The name for this input 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 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 /** Defines the type of auto-completion to use for this field, see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete. */\n @Prop() autocomplete: string = \"off\";\n\n /** Defines the minimum amount of charaters. */\n @Prop() minlength: number;\n\n /** Defines the maximum amount of charaters. */\n @Prop() maxlength: number;\n\n /** Defines wheter the defined value is readonly. */\n @Prop() readonly: boolean;\n\n /** Defines how many rows (lines of text) to initially show. */\n @Prop() rows: number = 3;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<string>;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: 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.textarea.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.textarea.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.customValidityMessage = message;\n this.valid = false;\n this.textarea.setCustomValidity(message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n\n @AttachInternals() internals: ElementInternals;\n \n private textarea: HTMLTextAreaElement;\n private fieldset: HTMLDnnFieldsetElement;\n private labelId: string;\n\n componentWillLoad() {\n this.labelId = generateRandomId();\n }\n\n componentDidLoad() {\n this.textarea.style.minHeight = `${this.rows * 1.5}em`;\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.textarea.setCustomValidity(\"\");\n this.valid = true;\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n\n private handleInput(value: string): void {\n this.value = value;\n var valid = this.textarea.checkValidity();\n this.valid = valid;\n this.valueInput.emit(this.value);\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined){\n this.customValidityMessage = this.textarea.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 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 render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.textarea.focus()}\n onBlur={() => this.textarea.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n resizable={this.resizable}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n disabled={this.disabled}\n id={this.labelId}\n floatLabel={this.shouldLabelFloat()}\n onClick={() => !this.focused && this.textarea.focus()}\n >\n <textarea\n ref={el => this.textarea = el}\n name={this.name}\n value={this.value}\n required={this.required}\n onBlur={() => this.focused = false}\n onFocus={() => this.focused=true}\n onChange={() => this.handleChange()}\n onInput={e => this.handleInput((e.target as HTMLTextAreaElement).value)}\n onInvalid={() => this.handleInvalid()}\n disabled={this.disabled}\n autoComplete={this.autocomplete}\n minlength={this.minlength}\n maxlength={this.maxlength}\n readonly={this.readonly}\n aria-labelledby={this.labelId}\n rows={this.rows}\n />\n </dnn-fieldset>\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
@@ -92,6 +92,7 @@ export class DnnAutocomplete {
|
|
|
92
92
|
}
|
|
93
93
|
handleInput(e) {
|
|
94
94
|
const value = e.target.value;
|
|
95
|
+
this.value = value;
|
|
95
96
|
var valid = this.inputField.checkValidity();
|
|
96
97
|
this.valid = valid;
|
|
97
98
|
this.valueInput.emit(value);
|
|
@@ -152,7 +153,7 @@ export class DnnAutocomplete {
|
|
|
152
153
|
this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
|
|
153
154
|
}
|
|
154
155
|
}
|
|
155
|
-
this.value = (_a = this.suggestions[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.value;
|
|
156
|
+
this.value = ((_a = this.suggestions[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.value) || this.value;
|
|
156
157
|
if (e.key === "Enter") {
|
|
157
158
|
var selectedItem = this.suggestions[this.selectedIndex];
|
|
158
159
|
this.value = selectedItem.value;
|
|
@@ -230,9 +231,9 @@ export class DnnAutocomplete {
|
|
|
230
231
|
}
|
|
231
232
|
render() {
|
|
232
233
|
var _a;
|
|
233
|
-
return (h(Host, { key: '
|
|
234
|
-
h("div", { key: '
|
|
235
|
-
h("div", { key: '
|
|
234
|
+
return (h(Host, { key: '9eab75ca413ef3f1e2fd03fd297e3234405cf591', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, 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() }, h("div", { key: 'ba9102f4739a8e0092bca6a9b13fe4afa5bf60ec', class: "inner-container" }, 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) }), 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) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": this.selectedIndex == index, class: this.selectedIndex == index ? "selected" : "", onClick: e => this.selectItem(e, index) }, this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label))), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&
|
|
235
|
+
h("div", { key: '1be08bd2a97113d4ee68f3099fa025ccf7e051b7', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
|
|
236
|
+
h("div", { key: 'efdadf5afa162de0148525f3394dd0c29c0da23a', style: { height: `${this.getVirtualScrollHeight()}px` } })), h("svg", { key: '1ce44347eec5d871c245658700e0862ddc480c4a', onClick: () => this.handleDropdownClick(), class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: '63dde5f0d50fd2085218431af1d6b15b9d3af8df', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
|
|
236
237
|
}
|
|
237
238
|
static get is() { return "dnn-autocomplete"; }
|
|
238
239
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dnn-autocomplete.js","sourceRoot":"","sources":["../../../src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen } 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 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 private handleDropdownClick(): void {\n this.handleSearchQueryChanged(this.value);\n }\n\n @Debounce(100)\n private handleSuggestionsScroll(): void {\n const container = this.suggestionsContainer;\n const currentScrollTop = container.scrollTop;\n\n // Only act if we are scrolling down\n if (currentScrollTop > this.lastScrollTop) {\n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n if (loadingDiv == undefined) {\n this.lastScrollTop = currentScrollTop;\n return;\n }\n\n const loadingDivPosition = loadingDiv.offsetTop;\n const loadingDivHeight = loadingDiv.offsetHeight;\n const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n // Calculate the visible bottom of the scroll container\n const visibleBottom = currentScrollTop + container.clientHeight;\n\n // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n if (visibleBottom > loadingDivBottom) {\n // Adjust scrollTop so it doesn't scroll past the loading div\n container.scrollTop = loadingDivBottom - container.clientHeight;\n }\n\n // Check if more items are needed based on the position of the loading div\n this.checkIfMoreItemsNeeded();\n }\n\n // Update the last scroll position\n this.lastScrollTop = currentScrollTop;\n }\n\n @Debounce()\n private checkIfMoreItemsNeeded() {\n const container = this.suggestionsContainer;\n \n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n if (loadingDiv == undefined) return; // Exit if there's no loading div\n \n const scrollPosition = container.scrollTop + container.clientHeight;\n const loadingDivPosition = loadingDiv.offsetTop;\n \n // Check if the loading div is within the threshold of becoming visible\n if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n const eventArgs: NeedMoreItemsEventArgs = {\n searchTerm: this.inputField.value,\n };\n this.needMoreItems.emit(eventArgs);\n }\n }\n\n handleBlur(): void {\n this.focused = false\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete=\"off\"\n value={this.suggestions.length > 0 && this.selectedIndex != undefined ? this.suggestions[this.selectedIndex].label : this.value}\n onFocus={() => this.focused = true}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n <ul\n class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n role=\"listbox\"\n ref={el => this.suggestionsContainer = el}\n onScroll={() => this.handleSuggestionsScroll()}\n >\n {this.suggestions.map((suggestion, index) => (\n <li\n id={`option-${index}`}\n role=\"option\"\n aria-selected={this.selectedIndex == index}\n class={this.selectedIndex == index ? \"selected\" : \"\"}\n onClick={e => this.selectItem(e, index)}\n >\n {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n </li>\n ))}\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n <div class=\"loading\">\n </div>\n }\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n </div>\n }\n </ul>\n <svg\n onClick={() => this.handleDropdownClick()}\n class=\"chevron-down\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -960 960 960\">\n <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n </svg>\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n}"]}
|
|
1
|
+
{"version":3,"file":"dnn-autocomplete.js","sourceRoot":"","sources":["../../../src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n\n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions: number;\n\n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n @Element() element: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n 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}"]}
|
|
@@ -37,6 +37,8 @@ export class DnnTextarea {
|
|
|
37
37
|
}
|
|
38
38
|
componentWillLoad() {
|
|
39
39
|
this.labelId = generateRandomId();
|
|
40
|
+
}
|
|
41
|
+
componentDidLoad() {
|
|
40
42
|
this.textarea.style.minHeight = `${this.rows * 1.5}em`;
|
|
41
43
|
}
|
|
42
44
|
// eslint-disable-next-line @stencil-community/own-methods-must-be-private
|
|
@@ -78,7 +80,7 @@ export class DnnTextarea {
|
|
|
78
80
|
}
|
|
79
81
|
render() {
|
|
80
82
|
var _a;
|
|
81
|
-
return (h(Host, { key: '
|
|
83
|
+
return (h(Host, { key: '78bc32de18f8c22005f02e37b3d7d0be2ea7ae7d', tabIndex: this.focused ? -1 : 0, onFocus: () => this.textarea.focus(), onBlur: () => this.textarea.blur() }, h("dnn-fieldset", { key: '26f23d95e0e5188421edee99a56a6d7fb2b58228', ref: el => this.fieldset = el, invalid: !this.valid, focused: this.focused, resizable: this.resizable, label: `${(_a = this.label) !== null && _a !== void 0 ? _a : ""}${this.required ? " *" : ""}`, helpText: this.helpText, disabled: this.disabled, id: this.labelId, floatLabel: this.shouldLabelFloat(), onClick: () => !this.focused && this.textarea.focus() }, h("textarea", { key: '5a7d1b97c43ce0cead8b6bd47da900b888656a32', ref: el => this.textarea = el, name: this.name, value: this.value, required: this.required, onBlur: () => this.focused = false, onFocus: () => this.focused = true, onChange: () => this.handleChange(), onInput: e => this.handleInput(e.target.value), onInvalid: () => this.handleInvalid(), disabled: this.disabled, autoComplete: this.autocomplete, minlength: this.minlength, maxlength: this.maxlength, readonly: this.readonly, "aria-labelledby": this.labelId, rows: this.rows }))));
|
|
82
84
|
}
|
|
83
85
|
static get is() { return "dnn-textarea"; }
|
|
84
86
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dnn-textarea.js","sourceRoot":"","sources":["../../../src/components/dnn-textarea/dnn-textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAC9G,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAEnE,mCAAmC;AAOnC,MAAM,OAAO,WAAW;;yBAEgE,OAAO;;;;;;;4BAqB9D,KAAK;;;;oBAYb,CAAC;uBA6BL,KAAK;qBACP,IAAI;;;IAtBrB,6GAA6G;IAE7G,KAAK,CAAC,aAAa;QACjB,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;IAChC,CAAC;IAED,oDAAoD;IAEpD,KAAK,CAAC,iBAAiB,CAAC,OAAe;QACrC,IAAI,OAAO,IAAI,SAAS,IAAI,OAAO,IAAI,EAAE,EAAE,CAAC;YAC1C,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;YACpC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAChC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,qBAAqB,GAAG,OAAO,CAAC;QACrC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IAYD,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,gBAAgB,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"dnn-textarea.js","sourceRoot":"","sources":["../../../src/components/dnn-textarea/dnn-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, AttachInternals, State, Event, EventEmitter, Method } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n/** A custom textarea component. */\n@Component({\n tag: 'dnn-textarea',\n styleUrl: 'dnn-textarea.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnTextarea {\n /** Can be set to change how the user can resize the field. */\n @Prop() resizable: \"none\" | \"both\" | \"horizontal\" | \"vertical\" | \"block\" | \"inline\" = \"block\";\n\n /** Sets the value of the textarea. */\n @Prop({mutable: true}) value: string;\n\n /** The label for this input. */\n @Prop() label: string;\n\n /** The name for this input 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 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 /** Defines the type of auto-completion to use for this field, see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete. */\n @Prop() autocomplete: string = \"off\";\n\n /** Defines the minimum amount of charaters. */\n @Prop() minlength: number;\n\n /** Defines the maximum amount of charaters. */\n @Prop() maxlength: number;\n\n /** Defines wheter the defined value is readonly. */\n @Prop() readonly: boolean;\n\n /** Defines how many rows (lines of text) to initially show. */\n @Prop() rows: number = 3;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<string>;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: 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.textarea.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.textarea.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.customValidityMessage = message;\n this.valid = false;\n this.textarea.setCustomValidity(message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n\n @AttachInternals() internals: ElementInternals;\n \n private textarea: HTMLTextAreaElement;\n private fieldset: HTMLDnnFieldsetElement;\n private labelId: string;\n\n componentWillLoad() {\n this.labelId = generateRandomId();\n }\n\n componentDidLoad() {\n this.textarea.style.minHeight = `${this.rows * 1.5}em`;\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.textarea.setCustomValidity(\"\");\n this.valid = true;\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n\n private handleInput(value: string): void {\n this.value = value;\n var valid = this.textarea.checkValidity();\n this.valid = valid;\n this.valueInput.emit(this.value);\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined){\n this.customValidityMessage = this.textarea.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 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 render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.textarea.focus()}\n onBlur={() => this.textarea.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n resizable={this.resizable}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n disabled={this.disabled}\n id={this.labelId}\n floatLabel={this.shouldLabelFloat()}\n onClick={() => !this.focused && this.textarea.focus()}\n >\n <textarea\n ref={el => this.textarea = el}\n name={this.name}\n value={this.value}\n required={this.required}\n onBlur={() => this.focused = false}\n onFocus={() => this.focused=true}\n onChange={() => this.handleChange()}\n onInput={e => this.handleInput((e.target as HTMLTextAreaElement).value)}\n onInvalid={() => this.handleInvalid()}\n disabled={this.disabled}\n autoComplete={this.autocomplete}\n minlength={this.minlength}\n maxlength={this.maxlength}\n readonly={this.readonly}\n aria-labelledby={this.labelId}\n rows={this.rows}\n />\n </dnn-fieldset>\n </Host>\n );\n }\n\n}\n"]}
|
package/dist/dnn/dnn.esm.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as l}from"./p-978abd50.js";export{s as setNonce}from"./p-978abd50.js";import{g as a}from"./p-e1255160.js";var t=()=>{const l=import.meta.url;const a={};if(l!==""){a.resourcesUrl=new URL(".",l).href}return e(a)};t().then((async e=>{await a();return l([["p-b96b7c4a",[[65,"dnn-color-input",{color:[1025],contrastColor:[1025,"contrast-color"],lightColor:[1025,"light-color"],darkColor:[1025,"dark-color"],label:[1],readonly:[4],localization:[16],name:[1],helpText:[1,"help-text"],useContrastColor:[4,"use-contrast-color"],useLightColor:[4,"use-light-color"],useDarkColor:[4,"use-dark-color"],currentColor:[32],focused:[32]},null,{currentColor:["currentColorChanged"]}]]],["p-70b71aeb",[[65,"dnn-image-cropper",{width:[2],height:[2],resx:[16],quality:[2],preventUndersized:[4,"prevent-undersized"],name:[1],view:[32],localResx:[32],fileName:[32],focused:[32],clear:[64]},null,{resx:["resxChanged"]}]]],["p-
|
|
1
|
+
import{p as e,b as l}from"./p-978abd50.js";export{s as setNonce}from"./p-978abd50.js";import{g as a}from"./p-e1255160.js";var t=()=>{const l=import.meta.url;const a={};if(l!==""){a.resourcesUrl=new URL(".",l).href}return e(a)};t().then((async e=>{await a();return l([["p-b96b7c4a",[[65,"dnn-color-input",{color:[1025],contrastColor:[1025,"contrast-color"],lightColor:[1025,"light-color"],darkColor:[1025,"dark-color"],label:[1],readonly:[4],localization:[16],name:[1],helpText:[1,"help-text"],useContrastColor:[4,"use-contrast-color"],useLightColor:[4,"use-light-color"],useDarkColor:[4,"use-dark-color"],currentColor:[32],focused:[32]},null,{currentColor:["currentColorChanged"]}]]],["p-70b71aeb",[[65,"dnn-image-cropper",{width:[2],height:[2],resx:[16],quality:[2],preventUndersized:[4,"prevent-undersized"],name:[1],view:[32],localResx:[32],fileName:[32],focused:[32],clear:[64]},null,{resx:["resxChanged"]}]]],["p-27dc2d8f",[[65,"dnn-autocomplete",{label:[1],name:[1],helpText:[1,"help-text"],value:[1537],required:[4],disabled:[4],suggestions:[16],renderSuggestion:[16],totalSuggestions:[2,"total-suggestions"],preloadThresholdPixels:[2,"preload-threshold-pixels"],focused:[32],valid:[32],customValidityMessage:[32],selectedIndex:[32],positionInitialized:[32],lastScrollTop:[32],checkValidity:[64],setCustomValidity:[64]},[[4,"click","handleOutsideClick"]]]]],["p-07a78c58",[[65,"dnn-input",{type:[1025],label:[1],name:[1],value:[1544],helpText:[1,"help-text"],required:[4],disabled:[4],autocomplete:[1],min:[8],max:[8],minlength:[2],maxlength:[2],multiple:[4],pattern:[1],readonly:[4],step:[8],disableValidityReporting:[4,"disable-validity-reporting"],allowShowPassword:[4,"allow-show-password"],focused:[32],valid:[32],checkValidity:[64],setCustomValidity:[64]}]]],["p-9ecfe643",[[65,"dnn-select",{label:[1],name:[1],required:[4],helpText:[1,"help-text"],disabled:[4],disableValidityReporting:[4,"disable-validity-reporting"],value:[1537],focused:[32],valid:[32],customValidityMessage:[32],checkValidity:[64]}]]],["p-535748e2",[[65,"dnn-textarea",{resizable:[1],value:[1025],label:[1],name:[1],helpText:[1,"help-text"],required:[4],disabled:[4],autocomplete:[1],minlength:[2],maxlength:[2],readonly:[4],rows:[2],focused:[32],valid:[32],customValidityMessage:[32],checkValidity:[64],setCustomValidity:[64]}]]],["p-8564bc60",[[1,"dnn-treeview-item",{expanded:[1540],hasChildren:[32],focused:[32]},null,{expanded:["watchExpanded"]}]]],["p-5b15b44a",[[1,"dnn-chevron",{expandText:[1,"expand-text"],collapseText:[1,"collapse-text"],expanded:[1540],focused:[32]},null,{expanded:["handleExpandedChanged"]}]]],["p-50b6bb3f",[[66,"dnn-monaco-editor",{language:[1],value:[1025],name:[1],focused:[32]},null,{language:["languageChanged"],value:["valueChanged"]}]]],["p-7c4bcd14",[[1,"dnn-progress-bar",{value:[2],max:[2],useGradient:[4,"use-gradient"]}]]],["p-e23840d6",[[65,"dnn-richtext",{options:[16],value:[1],name:[1],focused:[32]},null,{value:["watchValueChanged"]}]]],["p-6e54915d",[[1,"dnn-sort-icon",{sortDirection:[1025,"sort-direction"],focused:[32]}]]],["p-350e4008",[[65,"dnn-toggle",{checked:[1028],disabled:[4],name:[1],value:[1],focused:[32]},null,{checked:["checkedChanged"]}]]],["p-3b3475e0",[[1,"dnn-vertical-overflow-menu",{showDropdownButton:[32],showDropdownMenu:[32]}]]],["p-90dd4620",[[1,"dnn-vertical-splitview",{splitterWidth:[2,"splitter-width"],splitWidthPercentage:[1026,"split-width-percentage"],leftWidth:[32],rightWidth:[32],setSplitWidthPercentage:[64],getSplitWidthPercentage:[64]}]]],["p-3d1d6321",[[65,"dnn-checkbox",{checked:[1025],useIntermediate:[4,"use-intermediate"],value:[1],name:[1],focused:[32]},null,{checked:["handleCheckedChange"]}]]],["p-61dfb826",[[1,"dnn-color-picker",{color:[1],colorBoxHeight:[1,"color-box-height"],currentColor:[32],rgbDisplay:[32],hslDisplay:[32],hexDisplay:[32],focused:[32]},null,{currentColor:["handeCurrentColorChanged"]}]]],["p-2486e9db",[[65,"dnn-dropzone",{resx:[16],allowedExtensions:[16],allowCameraMode:[4,"allow-camera-mode"],captureQuality:[2,"capture-quality"],maxFileSize:[2,"max-file-size"],name:[1],canTakeSnapshots:[32],takingPicture:[32],fileTooLarge:[32],invalidExtension:[32],localResx:[32],focused:[32]},null,{resx:["resxChanged"]}]]],["p-4574844c",[[1,"dnn-searchbox",{placeholder:[1],debounced:[4],debounceTime:[2,"debounce-time"],query:[1025],focused:[32]},null,{query:["handleQueryChanged"]}]]],["p-96c850a8",[[1,"dnn-tab",{tabTitle:[1,"tab-title"],visible:[32],show:[64],hide:[64]}],[1,"dnn-tabs",{tabTitles:[32],selectedTabTitle:[32]}]]],["p-21c5ef07",[[1,"dnn-collapsible",{expanded:[516],transitionDuration:[2,"transition-duration"],updateSize:[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{expanded:["handledExpandedChanged"]}]]],["p-d7d6dffb",[[1,"dnn-modal",{backdropDismiss:[4,"backdrop-dismiss"],closeText:[1,"close-text"],resizable:[4],showCloseButton:[4,"show-close-button"],visible:[1540],show:[64],hide:[64]}]]],["p-9b330c82",[[65,"dnn-button",{type:[1],appearance:[1],formButtonType:[1,"form-button-type"],reversed:[4],size:[1],confirm:[4],confirmYesText:[1,"confirm-yes-text"],confirmNoText:[1,"confirm-no-text"],confirmMessage:[1,"confirm-message"],disabled:[4],focused:[32],modalVisible:[32]}]]],["p-b5241c09",[[1,"dnn-permissions-grid",{permissions:[1040],roleGroups:[16],roles:[16],resx:[16],foundUsers:[16],selectedRoleGroupId:[32],userQuery:[32],pickedUser:[32],localResx:[32],focused:[32]},null,{foundUsers:["handleFoundUsersChanged"],resx:["resxChanged"]}]]],["p-b553c159",[[1,"dnn-fieldset",{focused:[1540],disabled:[1540],invalid:[1540],label:[1],floatLabel:[1540,"float-label"],helpText:[1,"help-text"],resizable:[1],customValidityMessage:[32],setFocused:[64],setBlurred:[64],disable:[64],enable:[64],pinLabel:[64],unpinLabel:[64],setValidity:[64]}]]]],e)}));
|
|
2
2
|
//# sourceMappingURL=dnn.esm.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as i,c as t,h as e,H as s,g as n}from"./p-978abd50.js";import{D as h}from"./p-78c57746.js";const o=":host{display:inline-block;--foreground-color:var(--dnn-color-foreground, #000);--background-color:var(--dnn-color-background, #fff);--focus-color:var(--dnn-color-primary, #3792ED);--danger-color:var(--dnn-color-danger, #900);--control-radius:var(--dnn-controls-radius, 3px)}dnn-fieldset{width:100%}@keyframes shift{0%{background-position:0% 0}50%{background-position:100% 0}100%{background-position:200% 0}}.inner-container{display:flex;justify-content:space-between;position:relative;width:100%}.inner-container input{border:none;outline:none;background-color:transparent;color:var(--foreground-color);text-align:var(--input-text-align);width:100%}.inner-container svg.chevron-down{height:1rem;width:auto;transform:scale(1.2);cursor:pointer}.inner-container ul{position:absolute;border:1px solid lightgray;margin:0;padding:var(--dnn-controls-radius, 3px) 0;overflow-y:auto;width:100%;box-shadow:2px 2px 6px 1px rgba(0, 0, 0, 0.3);background-color:var(--dnn-color-background, white);border-radius:var(--dnn-controls-radius, 3px);z-index:2;display:none;scroll-behavior:smooth}.inner-container ul.show{display:block}.inner-container ul li{display:block;list-style-type:none;cursor:pointer;padding:0 0.5rem}.inner-container ul li.selected{background-color:lightgray}.inner-container ul li:hover{background-color:lightgray}.inner-container ul .loading{width:100%;height:0.5rem;border-radius:0.5rem;background:linear-gradient(to right, var(--background-color) 0%, var(--foreground-color) 50%, var(--background-color) 100%);background-size:200% 100%;animation:shift 2s linear infinite;width:75%;margin:0 auto;opacity:0.5}";const r=o;var a=undefined&&undefined.__decorate||function(i,t,e,s){var n=arguments.length,h=n<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,e):s,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")h=Reflect.decorate(i,t,e,s);else for(var r=i.length-1;r>=0;r--)if(o=i[r])h=(n<3?o(h):n>3?o(t,e,h):o(t,e))||h;return n>3&&h&&Object.defineProperty(t,e,h),h};const d=class{constructor(e){i(this,e);this.valueChange=t(this,"valueChange",7);this.valueInput=t(this,"valueInput",7);this.needMoreItems=t(this,"needMoreItems",7);this.searchQueryChanged=t(this,"searchQueryChanged",7);this.itemSelected=t(this,"itemSelected",7);if(e.$hostElement$["s-ei"]){this.internals=e.$hostElement$["s-ei"]}else{this.internals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.internals}this.adjustDropdownPosition=()=>{var i=this.findAverageSuggestionHeight();requestAnimationFrame((()=>{this.positionInitialized=true}));var t=window.innerHeight-this.inputField.getBoundingClientRect().bottom;const e=parseFloat(getComputedStyle(document.documentElement).fontSize);const s=t>3*i+3*e;if(s){this.suggestionsContainer.style.top="1.2rem"}else{this.suggestionsContainer.style.bottom="1.2rem"}if(s){this.suggestionsContainer.style.maxHeight=`${t-3*e}px`}else{this.suggestionsContainer.style.maxHeight=`${this.inputField.getBoundingClientRect().top-3*e}px`}this.checkIfMoreItemsNeeded()};this.label=undefined;this.name=undefined;this.helpText=undefined;this.value=undefined;this.required=undefined;this.disabled=undefined;this.suggestions=[];this.renderSuggestion=undefined;this.totalSuggestions=undefined;this.preloadThresholdPixels=1e3;this.focused=false;this.valid=true;this.customValidityMessage=undefined;this.selectedIndex=undefined;this.positionInitialized=false;this.lastScrollTop=0}async checkValidity(){return this.inputField.validity}async setCustomValidity(i){if(i==undefined||i==""){this.inputField.setCustomValidity("");this.valid=true;this.fieldset.setValidity(true);return}this.inputField.setCustomValidity(i);this.valid=false;this.fieldset.setValidity(false,i)}handleOutsideClick(i){const t=i.composedPath();if(!t.includes(this.element)){this.focused=false}}componentDidRender(){if(this.focused&&this.suggestions.length>0&&!this.positionInitialized){this.adjustDropdownPosition()}}formResetCallback(){this.inputField.setCustomValidity("");this.valid=true;this.value="";this.internals.setValidity({});this.internals.setFormValue("")}handleInput(i){const t=i.target.value;this.value=t;var e=this.inputField.checkValidity();this.valid=e;this.valueInput.emit(t);this.handleSearchQueryChanged(t)}handleSearchQueryChanged(i){this.searchQueryChanged.emit(i)}handleInvalid(){this.valid=false;if(this.customValidityMessage==undefined){this.customValidityMessage=this.inputField.validationMessage}}handleChange(){this.valueChange.emit(this.value);if(this.name!=undefined){var i=new FormData;i.append(this.name,this.value.toString());this.internals.setFormValue(i)}}shouldLabelFloat(){if(this.focused){return false}if(this.value!=undefined&&this.value!=""){return false}return true}findAverageSuggestionHeight(){const i=this.suggestionsContainer.querySelectorAll("li");var t=0;for(let e=0;e<i.length;e++){t+=i[e].clientHeight}return t/i.length}handleKeyDown(i){var t;if(i.key==="ArrowDown"){i.preventDefault();if(this.selectedIndex==undefined){this.selectedIndex=0}else{this.selectedIndex=Math.min(this.selectedIndex+1,this.suggestions.length-1)}}if(i.key==="ArrowUp"){i.preventDefault();if(this.selectedIndex==undefined){this.selectedIndex=this.suggestions.length-1}else{this.selectedIndex=Math.max(this.selectedIndex-1,0)}}this.value=((t=this.suggestions[this.selectedIndex])===null||t===void 0?void 0:t.value)||this.value;if(i.key==="Enter"){var e=this.suggestions[this.selectedIndex];this.value=e.value;this.inputField.value=e.label;this.itemSelected.emit(e.value);this.focused=false}if(i.key==="Tab"){this.focused=false}}selectItem(i,t){i.preventDefault();i.stopPropagation();this.selectedIndex=t;this.value=this.suggestions[this.selectedIndex].value;this.focused=false;this.itemSelected.emit(this.suggestions[this.selectedIndex].value)}getVirtualScrollHeight(){const i=this.findAverageSuggestionHeight();const t=this.totalSuggestions-this.suggestions.length;return i*t}handleDropdownClick(){this.handleSearchQueryChanged(this.value)}handleSuggestionsScroll(){const i=this.suggestionsContainer;const t=i.scrollTop;if(t>this.lastScrollTop){const e=i.querySelector(".loading");if(e==undefined){this.lastScrollTop=t;return}const s=e.offsetTop;const n=e.offsetHeight;const h=s+n;const o=t+i.clientHeight;if(o>h){i.scrollTop=h-i.clientHeight}this.checkIfMoreItemsNeeded()}this.lastScrollTop=t}checkIfMoreItemsNeeded(){const i=this.suggestionsContainer;const t=i.querySelector(".loading");if(t==undefined)return;const e=i.scrollTop+i.clientHeight;const s=t.offsetTop;if(s-e<this.preloadThresholdPixels){const i={searchTerm:this.inputField.value};this.needMoreItems.emit(i)}}handleBlur(){this.focused=false;var i=this.inputField.checkValidity();this.valid=i;this.fieldset.setValidity(i,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}render(){var i;return e(s,{key:"9eab75ca413ef3f1e2fd03fd297e3234405cf591",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},e("dnn-fieldset",{key:"3a6435b32891b0d8da6ad6103b3794e145e9f3b6",ref:i=>this.fieldset=i,invalid:!this.valid,focused:this.focused,label:`${(i=this.label)!==null&&i!==void 0?i:""}${this.required?" *":""}`,helpText:this.helpText,id:this.labelId,disabled:this.disabled,floatLabel:this.shouldLabelFloat()},e("div",{key:"ba9102f4739a8e0092bca6a9b13fe4afa5bf60ec",class:"inner-container"},e("input",{key:"beafefbaa7398b281e8d55a1c2f8e43bd5efb23a",ref:i=>this.inputField=i,name:this.name,type:"search",role:"combobox","aria-haspopup":"listbox","aria-expanded":this.focused.toString(),"aria-activedescendant":this.selectedIndex!==undefined?`option-${this.selectedIndex}`:undefined,disabled:this.disabled,required:this.required,autoComplete:"off",value:this.suggestions.length>0&&this.selectedIndex!=undefined?this.suggestions[this.selectedIndex].label:this.value,onFocus:()=>this.focused=true,onBlur:()=>this.handleBlur(),onInput:i=>this.handleInput(i),onInvalid:()=>this.handleInvalid(),onChange:()=>this.handleChange(),"aria-labelledby":this.labelId,onKeyDown:i=>this.handleKeyDown(i)}),e("ul",{key:"b299d725498438b2534d0173fba34eee66c78ee2",class:this.focused&&this.suggestions.length>0?"show":"",role:"listbox",ref:i=>this.suggestionsContainer=i,onScroll:()=>this.handleSuggestionsScroll()},this.suggestions.map(((i,t)=>e("li",{id:`option-${t}`,role:"option","aria-selected":this.selectedIndex==t,class:this.selectedIndex==t?"selected":"",onClick:i=>this.selectItem(i,t)},this.renderSuggestion!=undefined?this.renderSuggestion(i):i.label))),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&e("div",{key:"1be08bd2a97113d4ee68f3099fa025ccf7e051b7",class:"loading"}),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&this.positionInitialized&&e("div",{key:"efdadf5afa162de0148525f3394dd0c29c0da23a",style:{height:`${this.getVirtualScrollHeight()}px`}})),e("svg",{key:"1ce44347eec5d871c245658700e0862ddc480c4a",onClick:()=>this.handleDropdownClick(),class:"chevron-down",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},e("path",{key:"63dde5f0d50fd2085218431af1d6b15b9d3af8df",d:"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z"})))))}static get formAssociated(){return true}get element(){return n(this)}};a([h(300)],d.prototype,"handleSearchQueryChanged",null);a([h(100)],d.prototype,"handleSuggestionsScroll",null);a([h()],d.prototype,"checkIfMoreItemsNeeded",null);d.style=r;export{d as dnn_autocomplete};
|
|
2
|
+
//# sourceMappingURL=p-27dc2d8f.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["dnnAutocompleteCss","DnnAutocompleteStyle0","DnnAutocomplete","this","adjustDropdownPosition","itemHeight","findAverageSuggestionHeight","requestAnimationFrame","positionInitialized","spaceBelow","window","innerHeight","inputField","getBoundingClientRect","bottom","rem","parseFloat","getComputedStyle","document","documentElement","fontSize","fitsDown","suggestionsContainer","style","top","maxHeight","checkIfMoreItemsNeeded","checkValidity","validity","setCustomValidity","message","undefined","valid","fieldset","setValidity","handleOutsideClick","e","path","composedPath","includes","element","focused","componentDidRender","suggestions","length","formResetCallback","value","internals","setFormValue","handleInput","target","valueInput","emit","handleSearchQueryChanged","searchQueryChanged","handleInvalid","customValidityMessage","validationMessage","handleChange","valueChange","name","data","FormData","append","toString","shouldLabelFloat","suggestionItems","querySelectorAll","totalHeight","i","clientHeight","handleKeyDown","key","preventDefault","selectedIndex","Math","min","max","_a","selectedItem","label","itemSelected","selectItem","index","stopPropagation","getVirtualScrollHeight","upcomingItems","totalSuggestions","handleDropdownClick","handleSuggestionsScroll","container","currentScrollTop","scrollTop","lastScrollTop","loadingDiv","querySelector","loadingDivPosition","offsetTop","loadingDivHeight","offsetHeight","loadingDivBottom","visibleBottom","scrollPosition","preloadThresholdPixels","eventArgs","searchTerm","needMoreItems","handleBlur","render","h","Host","tabIndex","onFocus","focus","onBlur","blur","ref","el","invalid","required","helpText","id","labelId","disabled","floatLabel","class","type","role","autoComplete","onInput","onInvalid","onChange","onKeyDown","onScroll","map","suggestion","onClick","renderSuggestion","height","xmlns","viewBox","d","__decorate","Debounce"],"sources":["src/components/dnn-autocomplete/dnn-autocomplete.scss?tag=dnn-autocomplete&encapsulation=shadow","src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n /** @prop --foreground-color: Defines the foreground color. */\n --foreground-color: var(--dnn-color-foreground, #000);\n\n /** @prop --background-color: Defines the background color. */\n --background-color: var(--dnn-color-background, #fff);\n\n /** @prop --focus-color: Defines the color when the component is focused. */\n --focus-color: var(--dnn-color-primary, #3792ED);\n\n /** @prop --danger-color: Defines the danger color used for invalid data. */\n --danger-color: var(--dnn-color-danger, #900);\n\n /** @prop --control-radius: Defines the radius for the control corners. */\n --control-radius: var(--dnn-controls-radius, 3px);\n}\n\ndnn-fieldset{\n width: 100%;\n}\n\n@keyframes shift {\n 0% {\n background-position: 0% 0;\n }\n 50% {\n background-position: 100% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n.inner-container{\n display: flex;\n justify-content: space-between;\n position: relative;\n width: 100%;\n\n input {\n border: none;\n outline: none;\n background-color: transparent;\n color: var(--foreground-color);\n text-align: var(--input-text-align);\n width: 100%;\n }\n\n svg.chevron-down{\n height: 1rem;\n width: auto;\n transform: scale(1.2);\n cursor: pointer;\n }\n\n ul{\n position: absolute;\n border: 1px solid lightgray;\n margin: 0;\n padding: var(--dnn-controls-radius, 3px) 0;\n overflow-y: auto;\n width: 100%;\n box-shadow: 2px 2px 6px 1px rgb(0 0 0 / 30%);\n background-color: var(--dnn-color-background, white);\n border-radius: var(--dnn-controls-radius, 3px);\n z-index: 2;\n display: none;\n scroll-behavior: smooth;\n &.show{\n display: block;\n }\n li {\n display: block;\n list-style-type: none;\n cursor: pointer;\n padding: 0 0.5rem;\n &.selected {\n background-color: lightgray;\n }\n &:hover {\n background-color: lightgray;\n }\n }\n .loading {\n width: 100%;\n height: 0.5rem;\n border-radius: 0.5rem;\n background: linear-gradient(\n to right,\n var(--background-color) 0%,\n var(--foreground-color) 50%,\n var(--background-color) 100%);\n background-size: 200% 100%;\n animation: shift 2s linear infinite;\n width: 75%;\n margin: 0 auto;\n opacity: 0.5;\n }\n }\n}\n","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n\n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions: number;\n\n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n @Element() element: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n @State() selectedIndex: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n \n /** attacth the internals for form validation */\n @AttachInternals() internals: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleOutsideClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n \n componentDidRender(){\n if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n this.adjustDropdownPosition();\n }\n }\n\n private inputField!: HTMLInputElement;\n private suggestionsContainer: HTMLUListElement;\n private labelId: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n \n private handleInput(e: Event) {\n const value = (e.target as HTMLInputElement).value;\n this.value = value;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(value);\n this.handleSearchQueryChanged(value);\n }\n\n @Debounce(300)\n private handleSearchQueryChanged(value: string) {\n this.searchQueryChanged.emit(value);\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined) {\n this.customValidityMessage = this.inputField.validationMessage;\n }\n }\n\n private handleChange() {\n this.valueChange.emit(this.value);\n if (this.name != undefined) {\n var data = new FormData();\n data.append(this.name, this.value.toString());\n this.internals.setFormValue(data);\n }\n }\n\n /** Check if the label should float */\n private shouldLabelFloat(): boolean {\n if (this.focused) {\n return false;\n }\n\n if (this.value != undefined && this.value != \"\") {\n return false;\n }\n\n return true;\n }\n\n private findAverageSuggestionHeight(): number {\n const suggestionItems = this.suggestionsContainer.querySelectorAll(\"li\");\n var totalHeight = 0;\n for (let i = 0; i < suggestionItems.length; i++) {\n totalHeight += suggestionItems[i].clientHeight;\n }\n return totalHeight / suggestionItems.length;\n }\n\n private readonly adjustDropdownPosition = () => {\n var itemHeight = this.findAverageSuggestionHeight();\n requestAnimationFrame(() => {\n this.positionInitialized = true;\n });\n\n // If we can fit 3 items below the input and there is still 3em left, we show the dropdown under.\n // Otherwise, we show it above.\n var spaceBelow = window.innerHeight - this.inputField.getBoundingClientRect().bottom;\n const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);\n const fitsDown = spaceBelow > 3 * itemHeight + 3 * rem;\n if (fitsDown) {\n this.suggestionsContainer.style.top = \"1.2rem\";\n }\n else {\n this.suggestionsContainer.style.bottom = \"1.2rem\";\n }\n\n // Set the max height to not overflow the screen.\n if (fitsDown){\n this.suggestionsContainer.style.maxHeight = `${spaceBelow - 3 * rem}px`;\n }\n else {\n this.suggestionsContainer.style.maxHeight = `${this.inputField.getBoundingClientRect().top - 3 * rem}px`;\n }\n\n this.checkIfMoreItemsNeeded();\n }\n\n private handleKeyDown(e: KeyboardEvent): void {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = 0;\n } else {\n this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n }\n }\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = this.suggestions.length - 1;\n } else {\n this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n }\n }\n this.value = this.suggestions[this.selectedIndex]?.value || this.value;\n if (e.key === \"Enter\") {\n var selectedItem = this.suggestions[this.selectedIndex];\n this.value = selectedItem.value;\n this.inputField.value = selectedItem.label;\n this.itemSelected.emit(selectedItem.value);\n this.focused = false;\n }\n if (e.key === \"Tab\"){\n this.focused = false;\n }\n }\n\n private selectItem(e: Event, index: number): void {\n e.preventDefault();\n e.stopPropagation();\n this.selectedIndex = index;\n this.value = this.suggestions[this.selectedIndex].value;\n this.focused = false;\n this.itemSelected.emit(this.suggestions[this.selectedIndex].value)\n }\n\n private getVirtualScrollHeight(): number {\n const itemHeight = this.findAverageSuggestionHeight();\n const upcomingItems = this.totalSuggestions - this.suggestions.length;\n return itemHeight * upcomingItems;\n }\n\n private handleDropdownClick(): void {\n this.handleSearchQueryChanged(this.value);\n }\n\n @Debounce(100)\n private handleSuggestionsScroll(): void {\n const container = this.suggestionsContainer;\n const currentScrollTop = container.scrollTop;\n\n // Only act if we are scrolling down\n if (currentScrollTop > this.lastScrollTop) {\n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n if (loadingDiv == undefined) {\n this.lastScrollTop = currentScrollTop;\n return;\n }\n\n const loadingDivPosition = loadingDiv.offsetTop;\n const loadingDivHeight = loadingDiv.offsetHeight;\n const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n // Calculate the visible bottom of the scroll container\n const visibleBottom = currentScrollTop + container.clientHeight;\n\n // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n if (visibleBottom > loadingDivBottom) {\n // Adjust scrollTop so it doesn't scroll past the loading div\n container.scrollTop = loadingDivBottom - container.clientHeight;\n }\n\n // Check if more items are needed based on the position of the loading div\n this.checkIfMoreItemsNeeded();\n }\n\n // Update the last scroll position\n this.lastScrollTop = currentScrollTop;\n }\n\n @Debounce()\n private checkIfMoreItemsNeeded() {\n const container = this.suggestionsContainer;\n \n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n if (loadingDiv == undefined) return; // Exit if there's no loading div\n \n const scrollPosition = container.scrollTop + container.clientHeight;\n const loadingDivPosition = loadingDiv.offsetTop;\n \n // Check if the loading div is within the threshold of becoming visible\n if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n const eventArgs: NeedMoreItemsEventArgs = {\n searchTerm: this.inputField.value,\n };\n this.needMoreItems.emit(eventArgs);\n }\n }\n\n handleBlur(): void {\n this.focused = false\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete=\"off\"\n value={this.suggestions.length > 0 && this.selectedIndex != undefined ? this.suggestions[this.selectedIndex].label : this.value}\n onFocus={() => this.focused = true}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n <ul\n class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n role=\"listbox\"\n ref={el => this.suggestionsContainer = el}\n onScroll={() => this.handleSuggestionsScroll()}\n >\n {this.suggestions.map((suggestion, index) => (\n <li\n id={`option-${index}`}\n role=\"option\"\n aria-selected={this.selectedIndex == index}\n class={this.selectedIndex == index ? \"selected\" : \"\"}\n onClick={e => this.selectItem(e, index)}\n >\n {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n </li>\n ))}\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n <div class=\"loading\">\n </div>\n }\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n </div>\n }\n </ul>\n <svg\n onClick={() => this.handleDropdownClick()}\n class=\"chevron-down\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -960 960 960\">\n <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n </svg>\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n}"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as i,h as e,H as s}from"./p-978abd50.js";import{g as n}from"./p-5df01911.js";const h=":host{display:inline-block;--foreground:var(--dnn-color-foreground, #000);--background:var(--dnn-color-background, #fff);--focus-color:var(--dnn-color-primary, #3792ED);--danger-color:var(--dnn-color-danger, #900);--control-radius:var(--dnn-controls-radius, 3px)}dnn-fieldset{width:100%}textarea{border:none;outline:none;background-color:transparent;color:var(--foreground);width:calc(100% - 1em);height:calc(100% - 1em);line-height:1.5em;resize:none}";const d=h;const a=class{constructor(e){t(this,e);this.valueInput=i(this,"valueInput",7);this.valueChange=i(this,"valueChange",7);if(e.$hostElement$["s-ei"]){this.internals=e.$hostElement$["s-ei"]}else{this.internals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.internals}this.resizable="block";this.value=undefined;this.label=undefined;this.name=undefined;this.helpText=undefined;this.required=undefined;this.disabled=undefined;this.autocomplete="off";this.minlength=undefined;this.maxlength=undefined;this.readonly=undefined;this.rows=3;this.focused=false;this.valid=true;this.customValidityMessage=undefined}async checkValidity(){return this.textarea.validity}async setCustomValidity(t){if(t==undefined||t==""){this.textarea.setCustomValidity("");this.valid=true;this.fieldset.setValidity(true);return}this.customValidityMessage=t;this.valid=false;this.textarea.setCustomValidity(t)}componentWillLoad(){this.labelId=n()}componentDidLoad(){this.textarea.style.minHeight=`${this.rows*1.5}em`}formResetCallback(){this.textarea.setCustomValidity("");this.valid=true;this.value="";this.internals.setValidity({});this.internals.setFormValue("")}handleInput(t){this.value=t;var i=this.textarea.checkValidity();this.valid=i;this.valueInput.emit(this.value)}handleInvalid(){this.valid=false;if(this.customValidityMessage==undefined){this.customValidityMessage=this.textarea.validationMessage}}handleChange(){this.valueChange.emit(this.value);if(this.name!=undefined){var t=new FormData;t.append(this.name,this.value.toString());this.internals.setFormValue(t)}}shouldLabelFloat(){if(this.focused){return false}if(this.value!=undefined&&this.value!=""){return false}return true}render(){var t;return e(s,{key:"78bc32de18f8c22005f02e37b3d7d0be2ea7ae7d",tabIndex:this.focused?-1:0,onFocus:()=>this.textarea.focus(),onBlur:()=>this.textarea.blur()},e("dnn-fieldset",{key:"26f23d95e0e5188421edee99a56a6d7fb2b58228",ref:t=>this.fieldset=t,invalid:!this.valid,focused:this.focused,resizable:this.resizable,label:`${(t=this.label)!==null&&t!==void 0?t:""}${this.required?" *":""}`,helpText:this.helpText,disabled:this.disabled,id:this.labelId,floatLabel:this.shouldLabelFloat(),onClick:()=>!this.focused&&this.textarea.focus()},e("textarea",{key:"5a7d1b97c43ce0cead8b6bd47da900b888656a32",ref:t=>this.textarea=t,name:this.name,value:this.value,required:this.required,onBlur:()=>this.focused=false,onFocus:()=>this.focused=true,onChange:()=>this.handleChange(),onInput:t=>this.handleInput(t.target.value),onInvalid:()=>this.handleInvalid(),disabled:this.disabled,autoComplete:this.autocomplete,minlength:this.minlength,maxlength:this.maxlength,readonly:this.readonly,"aria-labelledby":this.labelId,rows:this.rows})))}static get formAssociated(){return true}};a.style=d;export{a as dnn_textarea};
|
|
2
|
+
//# sourceMappingURL=p-535748e2.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["dnnTextareaCss","DnnTextareaStyle0","DnnTextarea","checkValidity","this","textarea","validity","setCustomValidity","message","undefined","valid","fieldset","setValidity","customValidityMessage","componentWillLoad","labelId","generateRandomId","componentDidLoad","style","minHeight","rows","formResetCallback","value","internals","setFormValue","handleInput","valueInput","emit","handleInvalid","validationMessage","handleChange","valueChange","name","data","FormData","append","toString","shouldLabelFloat","focused","render","h","Host","key","tabIndex","onFocus","focus","onBlur","blur","ref","el","invalid","resizable","label","_a","required","helpText","disabled","id","floatLabel","onClick","onChange","onInput","e","target","onInvalid","autoComplete","autocomplete","minlength","maxlength","readonly"],"sources":["src/components/dnn-textarea/dnn-textarea.scss?tag=dnn-textarea&encapsulation=shadow","src/components/dnn-textarea/dnn-textarea.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n /** @prop --foreground: Defines the foreground color. */\n --foreground: var(--dnn-color-foreground, #000);\n\n /** @prop --background: Defines the background color. */\n --background: 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\ntextarea{\n border: none;\n outline: none;\n background-color: transparent;\n color: var(--foreground);\n width: calc(100% - 1em);\n height: calc(100% - 1em);\n line-height: 1.5em;\n resize: none;\n}","import { Component, Host, h, Prop, AttachInternals, State, Event, EventEmitter, Method } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n/** A custom textarea component. */\n@Component({\n tag: 'dnn-textarea',\n styleUrl: 'dnn-textarea.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnTextarea {\n /** Can be set to change how the user can resize the field. */\n @Prop() resizable: \"none\" | \"both\" | \"horizontal\" | \"vertical\" | \"block\" | \"inline\" = \"block\";\n\n /** Sets the value of the textarea. */\n @Prop({mutable: true}) value: string;\n\n /** The label for this input. */\n @Prop() label: string;\n\n /** The name for this input 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 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 /** Defines the type of auto-completion to use for this field, see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete. */\n @Prop() autocomplete: string = \"off\";\n\n /** Defines the minimum amount of charaters. */\n @Prop() minlength: number;\n\n /** Defines the maximum amount of charaters. */\n @Prop() maxlength: number;\n\n /** Defines wheter the defined value is readonly. */\n @Prop() readonly: boolean;\n\n /** Defines how many rows (lines of text) to initially show. */\n @Prop() rows: number = 3;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<string>;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: 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.textarea.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.textarea.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.customValidityMessage = message;\n this.valid = false;\n this.textarea.setCustomValidity(message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n\n @AttachInternals() internals: ElementInternals;\n \n private textarea: HTMLTextAreaElement;\n private fieldset: HTMLDnnFieldsetElement;\n private labelId: string;\n\n componentWillLoad() {\n this.labelId = generateRandomId();\n }\n\n componentDidLoad() {\n this.textarea.style.minHeight = `${this.rows * 1.5}em`;\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.textarea.setCustomValidity(\"\");\n this.valid = true;\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n\n private handleInput(value: string): void {\n this.value = value;\n var valid = this.textarea.checkValidity();\n this.valid = valid;\n this.valueInput.emit(this.value);\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined){\n this.customValidityMessage = this.textarea.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 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 render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.textarea.focus()}\n onBlur={() => this.textarea.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n resizable={this.resizable}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n disabled={this.disabled}\n id={this.labelId}\n floatLabel={this.shouldLabelFloat()}\n onClick={() => !this.focused && this.textarea.focus()}\n >\n <textarea\n ref={el => this.textarea = el}\n name={this.name}\n value={this.value}\n required={this.required}\n onBlur={() => this.focused = false}\n onFocus={() => this.focused=true}\n onChange={() => this.handleChange()}\n onInput={e => this.handleInput((e.target as HTMLTextAreaElement).value)}\n onInvalid={() => this.handleInvalid()}\n disabled={this.disabled}\n autoComplete={this.autocomplete}\n minlength={this.minlength}\n maxlength={this.maxlength}\n readonly={this.readonly}\n aria-labelledby={this.labelId}\n rows={this.rows}\n />\n </dnn-fieldset>\n </Host>\n );\n }\n\n}\n"],"mappings":"6FAAA,MAAMA,EAAiB,scACvB,MAAAC,EAAeD,E,MCSFE,EAAW,M,wRAEgE,Q,wJAqBvD,M,oFAYR,E,aA6BJ,M,WACF,K,qCApBjB,mBAAMC,GACJ,OAAOC,KAAKC,SAASC,Q,CAKvB,uBAAMC,CAAkBC,GACtB,GAAIA,GAAWC,WAAaD,GAAW,GAAI,CACzCJ,KAAKC,SAASE,kBAAkB,IAChCH,KAAKM,MAAQ,KACbN,KAAKO,SAASC,YAAY,MAC1B,M,CAGFR,KAAKS,sBAAwBL,EAC7BJ,KAAKM,MAAQ,MACbN,KAAKC,SAASE,kBAAkBC,E,CAalC,iBAAAM,GACEV,KAAKW,QAAUC,G,CAGjB,gBAAAC,GACEb,KAAKC,SAASa,MAAMC,UAAY,GAAGf,KAAKgB,KAAO,O,CAIjD,iBAAAC,GACEjB,KAAKC,SAASE,kBAAkB,IAChCH,KAAKM,MAAQ,KACbN,KAAKkB,MAAQ,GACblB,KAAKmB,UAAUX,YAAY,IAC3BR,KAAKmB,UAAUC,aAAa,G,CAGtB,WAAAC,CAAYH,GAClBlB,KAAKkB,MAAQA,EACb,IAAIZ,EAAQN,KAAKC,SAASF,gBAC1BC,KAAKM,MAAQA,EACbN,KAAKsB,WAAWC,KAAKvB,KAAKkB,M,CAGpB,aAAAM,GACNxB,KAAKM,MAAQ,MACb,GAAIN,KAAKS,uBAAyBJ,UAAU,CAC1CL,KAAKS,sBAAwBT,KAAKC,SAASwB,iB,EAIvC,YAAAC,GACN1B,KAAK2B,YAAYJ,KAAKvB,KAAKkB,OAC3B,GAAIlB,KAAK4B,MAAQvB,UAAU,CACzB,IAAIwB,EAAO,IAAIC,SACfD,EAAKE,OAAO/B,KAAK4B,KAAM5B,KAAKkB,MAAMc,YAClChC,KAAKmB,UAAUC,aAAaS,E,EAIxB,gBAAAI,GACN,GAAIjC,KAAKkC,QAAS,CAChB,OAAO,K,CAGT,GAAIlC,KAAKkB,OAASb,WAAaL,KAAKkB,OAAS,GAAI,CAC/C,OAAO,K,CAGT,OAAO,I,CAGT,MAAAiB,G,MACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,SAAUvC,KAAKkC,SAAW,EAAI,EAC9BM,QAAS,IAAMxC,KAAKC,SAASwC,QAC7BC,OAAQ,IAAM1C,KAAKC,SAAS0C,QAE5BP,EAAA,gBAAAE,IAAA,2CACEM,IAAKC,GAAM7C,KAAKO,SAAWsC,EAC3BC,SAAU9C,KAAKM,MACf4B,QAASlC,KAAKkC,QACda,UAAW/C,KAAK+C,UAChBC,MAAO,IAAGC,EAAAjD,KAAKgD,SAAK,MAAAC,SAAA,EAAAA,EAAI,KAAKjD,KAAKkD,SAAW,KAAO,KACpDC,SAAUnD,KAAKmD,SACfC,SAAUpD,KAAKoD,SACfC,GAAIrD,KAAKW,QACT2C,WAAYtD,KAAKiC,mBACjBsB,QAAS,KAAOvD,KAAKkC,SAAWlC,KAAKC,SAASwC,SAE9CL,EAAA,YAAAE,IAAA,2CACEM,IAAKC,GAAM7C,KAAKC,SAAW4C,EAC3BjB,KAAM5B,KAAK4B,KACXV,MAAOlB,KAAKkB,MACZgC,SAAUlD,KAAKkD,SACfR,OAAQ,IAAM1C,KAAKkC,QAAU,MAC7BM,QAAS,IAAMxC,KAAKkC,QAAQ,KAC5BsB,SAAU,IAAMxD,KAAK0B,eACrB+B,QAASC,GAAK1D,KAAKqB,YAAaqC,EAAEC,OAA+BzC,OACjE0C,UAAW,IAAM5D,KAAKwB,gBACtB4B,SAAUpD,KAAKoD,SACfS,aAAc7D,KAAK8D,aACnBC,UAAW/D,KAAK+D,UAChBC,UAAWhE,KAAKgE,UAChBC,SAAUjE,KAAKiE,SAAQ,kBACNjE,KAAKW,QACtBK,KAAMhB,KAAKgB,Q","ignoreList":[]}
|
|
@@ -109,6 +109,7 @@ const DnnAutocomplete = class {
|
|
|
109
109
|
}
|
|
110
110
|
handleInput(e) {
|
|
111
111
|
const value = e.target.value;
|
|
112
|
+
this.value = value;
|
|
112
113
|
var valid = this.inputField.checkValidity();
|
|
113
114
|
this.valid = valid;
|
|
114
115
|
this.valueInput.emit(value);
|
|
@@ -169,7 +170,7 @@ const DnnAutocomplete = class {
|
|
|
169
170
|
this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
|
|
170
171
|
}
|
|
171
172
|
}
|
|
172
|
-
this.value = (_a = this.suggestions[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.value;
|
|
173
|
+
this.value = ((_a = this.suggestions[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.value) || this.value;
|
|
173
174
|
if (e.key === "Enter") {
|
|
174
175
|
var selectedItem = this.suggestions[this.selectedIndex];
|
|
175
176
|
this.value = selectedItem.value;
|
|
@@ -247,9 +248,9 @@ const DnnAutocomplete = class {
|
|
|
247
248
|
}
|
|
248
249
|
render() {
|
|
249
250
|
var _a;
|
|
250
|
-
return (h(Host, { key: '
|
|
251
|
-
h("div", { key: '
|
|
252
|
-
h("div", { key: '
|
|
251
|
+
return (h(Host, { key: '9eab75ca413ef3f1e2fd03fd297e3234405cf591', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, 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() }, h("div", { key: 'ba9102f4739a8e0092bca6a9b13fe4afa5bf60ec', class: "inner-container" }, 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) }), 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) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": this.selectedIndex == index, class: this.selectedIndex == index ? "selected" : "", onClick: e => this.selectItem(e, index) }, this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label))), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&
|
|
252
|
+
h("div", { key: '1be08bd2a97113d4ee68f3099fa025ccf7e051b7', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
|
|
253
|
+
h("div", { key: 'efdadf5afa162de0148525f3394dd0c29c0da23a', style: { height: `${this.getVirtualScrollHeight()}px` } })), h("svg", { key: '1ce44347eec5d871c245658700e0862ddc480c4a', onClick: () => this.handleDropdownClick(), class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: '63dde5f0d50fd2085218431af1d6b15b9d3af8df', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
|
|
253
254
|
}
|
|
254
255
|
static get formAssociated() { return true; }
|
|
255
256
|
get element() { return getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dnn-autocomplete.entry.js","mappings":"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","names":[],"sources":["src/components/dnn-autocomplete/dnn-autocomplete.scss?tag=dnn-autocomplete&encapsulation=shadow","src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n /** @prop --foreground-color: Defines the foreground color. */\n --foreground-color: var(--dnn-color-foreground, #000);\n\n /** @prop --background-color: Defines the background color. */\n --background-color: var(--dnn-color-background, #fff);\n\n /** @prop --focus-color: Defines the color when the component is focused. */\n --focus-color: var(--dnn-color-primary, #3792ED);\n\n /** @prop --danger-color: Defines the danger color used for invalid data. */\n --danger-color: var(--dnn-color-danger, #900);\n\n /** @prop --control-radius: Defines the radius for the control corners. */\n --control-radius: var(--dnn-controls-radius, 3px);\n}\n\ndnn-fieldset{\n width: 100%;\n}\n\n@keyframes shift {\n 0% {\n background-position: 0% 0;\n }\n 50% {\n background-position: 100% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n.inner-container{\n display: flex;\n justify-content: space-between;\n position: relative;\n width: 100%;\n\n input {\n border: none;\n outline: none;\n background-color: transparent;\n color: var(--foreground-color);\n text-align: var(--input-text-align);\n width: 100%;\n }\n\n svg.chevron-down{\n height: 1rem;\n width: auto;\n transform: scale(1.2);\n cursor: pointer;\n }\n\n ul{\n position: absolute;\n border: 1px solid lightgray;\n margin: 0;\n padding: var(--dnn-controls-radius, 3px) 0;\n overflow-y: auto;\n width: 100%;\n box-shadow: 2px 2px 6px 1px rgb(0 0 0 / 30%);\n background-color: var(--dnn-color-background, white);\n border-radius: var(--dnn-controls-radius, 3px);\n z-index: 2;\n display: none;\n scroll-behavior: smooth;\n &.show{\n display: block;\n }\n li {\n display: block;\n list-style-type: none;\n cursor: pointer;\n padding: 0 0.5rem;\n &.selected {\n background-color: lightgray;\n }\n &:hover {\n background-color: lightgray;\n }\n }\n .loading {\n width: 100%;\n height: 0.5rem;\n border-radius: 0.5rem;\n background: linear-gradient(\n to right,\n var(--background-color) 0%,\n var(--foreground-color) 50%,\n var(--background-color) 100%);\n background-size: 200% 100%;\n animation: shift 2s linear infinite;\n width: 75%;\n margin: 0 auto;\n opacity: 0.5;\n }\n }\n}\n","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n\n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions: number;\n\n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n @Element() element: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n @State() selectedIndex: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n \n /** attacth the internals for form validation */\n @AttachInternals() internals: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleOutsideClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n \n componentDidRender(){\n if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n this.adjustDropdownPosition();\n }\n }\n\n private inputField!: HTMLInputElement;\n private suggestionsContainer: HTMLUListElement;\n private labelId: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n \n private handleInput(e: Event) {\n const value = (e.target as HTMLInputElement).value;\n 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 private handleDropdownClick(): void {\n this.handleSearchQueryChanged(this.value);\n }\n\n @Debounce(100)\n private handleSuggestionsScroll(): void {\n const container = this.suggestionsContainer;\n const currentScrollTop = container.scrollTop;\n\n // Only act if we are scrolling down\n if (currentScrollTop > this.lastScrollTop) {\n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n if (loadingDiv == undefined) {\n this.lastScrollTop = currentScrollTop;\n return;\n }\n\n const loadingDivPosition = loadingDiv.offsetTop;\n const loadingDivHeight = loadingDiv.offsetHeight;\n const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n // Calculate the visible bottom of the scroll container\n const visibleBottom = currentScrollTop + container.clientHeight;\n\n // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n if (visibleBottom > loadingDivBottom) {\n // Adjust scrollTop so it doesn't scroll past the loading div\n container.scrollTop = loadingDivBottom - container.clientHeight;\n }\n\n // Check if more items are needed based on the position of the loading div\n this.checkIfMoreItemsNeeded();\n }\n\n // Update the last scroll position\n this.lastScrollTop = currentScrollTop;\n }\n\n @Debounce()\n private checkIfMoreItemsNeeded() {\n const container = this.suggestionsContainer;\n \n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n if (loadingDiv == undefined) return; // Exit if there's no loading div\n \n const scrollPosition = container.scrollTop + container.clientHeight;\n const loadingDivPosition = loadingDiv.offsetTop;\n \n // Check if the loading div is within the threshold of becoming visible\n if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n const eventArgs: NeedMoreItemsEventArgs = {\n searchTerm: this.inputField.value,\n };\n this.needMoreItems.emit(eventArgs);\n }\n }\n\n handleBlur(): void {\n this.focused = false\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete=\"off\"\n value={this.suggestions.length > 0 && this.selectedIndex != undefined ? this.suggestions[this.selectedIndex].label : this.value}\n onFocus={() => this.focused = true}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n <ul\n class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n role=\"listbox\"\n ref={el => this.suggestionsContainer = el}\n onScroll={() => this.handleSuggestionsScroll()}\n >\n {this.suggestions.map((suggestion, index) => (\n <li\n id={`option-${index}`}\n role=\"option\"\n aria-selected={this.selectedIndex == index}\n class={this.selectedIndex == index ? \"selected\" : \"\"}\n onClick={e => this.selectItem(e, index)}\n >\n {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n </li>\n ))}\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n <div class=\"loading\">\n </div>\n }\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n </div>\n }\n </ul>\n <svg\n onClick={() => this.handleDropdownClick()}\n class=\"chevron-down\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -960 960 960\">\n <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n </svg>\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n}"],"version":3}
|
|
1
|
+
{"file":"dnn-autocomplete.entry.js","mappings":"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","names":[],"sources":["src/components/dnn-autocomplete/dnn-autocomplete.scss?tag=dnn-autocomplete&encapsulation=shadow","src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n /** @prop --foreground-color: Defines the foreground color. */\n --foreground-color: var(--dnn-color-foreground, #000);\n\n /** @prop --background-color: Defines the background color. */\n --background-color: var(--dnn-color-background, #fff);\n\n /** @prop --focus-color: Defines the color when the component is focused. */\n --focus-color: var(--dnn-color-primary, #3792ED);\n\n /** @prop --danger-color: Defines the danger color used for invalid data. */\n --danger-color: var(--dnn-color-danger, #900);\n\n /** @prop --control-radius: Defines the radius for the control corners. */\n --control-radius: var(--dnn-controls-radius, 3px);\n}\n\ndnn-fieldset{\n width: 100%;\n}\n\n@keyframes shift {\n 0% {\n background-position: 0% 0;\n }\n 50% {\n background-position: 100% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n.inner-container{\n display: flex;\n justify-content: space-between;\n position: relative;\n width: 100%;\n\n input {\n border: none;\n outline: none;\n background-color: transparent;\n color: var(--foreground-color);\n text-align: var(--input-text-align);\n width: 100%;\n }\n\n svg.chevron-down{\n height: 1rem;\n width: auto;\n transform: scale(1.2);\n cursor: pointer;\n }\n\n ul{\n position: absolute;\n border: 1px solid lightgray;\n margin: 0;\n padding: var(--dnn-controls-radius, 3px) 0;\n overflow-y: auto;\n width: 100%;\n box-shadow: 2px 2px 6px 1px rgb(0 0 0 / 30%);\n background-color: var(--dnn-color-background, white);\n border-radius: var(--dnn-controls-radius, 3px);\n z-index: 2;\n display: none;\n scroll-behavior: smooth;\n &.show{\n display: block;\n }\n li {\n display: block;\n list-style-type: none;\n cursor: pointer;\n padding: 0 0.5rem;\n &.selected {\n background-color: lightgray;\n }\n &:hover {\n background-color: lightgray;\n }\n }\n .loading {\n width: 100%;\n height: 0.5rem;\n border-radius: 0.5rem;\n background: linear-gradient(\n to right,\n var(--background-color) 0%,\n var(--foreground-color) 50%,\n var(--background-color) 100%);\n background-size: 200% 100%;\n animation: shift 2s linear infinite;\n width: 75%;\n margin: 0 auto;\n opacity: 0.5;\n }\n }\n}\n","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n\n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions: number;\n\n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n @Element() element: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n @State() selectedIndex: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n \n /** attacth the internals for form validation */\n @AttachInternals() internals: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleOutsideClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n \n componentDidRender(){\n if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n this.adjustDropdownPosition();\n }\n }\n\n private inputField!: HTMLInputElement;\n private suggestionsContainer: HTMLUListElement;\n private labelId: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n \n private handleInput(e: Event) {\n const value = (e.target as HTMLInputElement).value;\n this.value = value;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(value);\n this.handleSearchQueryChanged(value);\n }\n\n @Debounce(300)\n private handleSearchQueryChanged(value: string) {\n this.searchQueryChanged.emit(value);\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined) {\n this.customValidityMessage = this.inputField.validationMessage;\n }\n }\n\n private handleChange() {\n this.valueChange.emit(this.value);\n if (this.name != undefined) {\n var data = new FormData();\n data.append(this.name, this.value.toString());\n this.internals.setFormValue(data);\n }\n }\n\n /** Check if the label should float */\n private shouldLabelFloat(): boolean {\n if (this.focused) {\n return false;\n }\n\n if (this.value != undefined && this.value != \"\") {\n return false;\n }\n\n return true;\n }\n\n private findAverageSuggestionHeight(): number {\n const suggestionItems = this.suggestionsContainer.querySelectorAll(\"li\");\n var totalHeight = 0;\n for (let i = 0; i < suggestionItems.length; i++) {\n totalHeight += suggestionItems[i].clientHeight;\n }\n return totalHeight / suggestionItems.length;\n }\n\n private readonly adjustDropdownPosition = () => {\n var itemHeight = this.findAverageSuggestionHeight();\n requestAnimationFrame(() => {\n this.positionInitialized = true;\n });\n\n // If we can fit 3 items below the input and there is still 3em left, we show the dropdown under.\n // Otherwise, we show it above.\n var spaceBelow = window.innerHeight - this.inputField.getBoundingClientRect().bottom;\n const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);\n const fitsDown = spaceBelow > 3 * itemHeight + 3 * rem;\n if (fitsDown) {\n this.suggestionsContainer.style.top = \"1.2rem\";\n }\n else {\n this.suggestionsContainer.style.bottom = \"1.2rem\";\n }\n\n // Set the max height to not overflow the screen.\n if (fitsDown){\n this.suggestionsContainer.style.maxHeight = `${spaceBelow - 3 * rem}px`;\n }\n else {\n this.suggestionsContainer.style.maxHeight = `${this.inputField.getBoundingClientRect().top - 3 * rem}px`;\n }\n\n this.checkIfMoreItemsNeeded();\n }\n\n private handleKeyDown(e: KeyboardEvent): void {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = 0;\n } else {\n this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n }\n }\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = this.suggestions.length - 1;\n } else {\n this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n }\n }\n this.value = this.suggestions[this.selectedIndex]?.value || this.value;\n if (e.key === \"Enter\") {\n var selectedItem = this.suggestions[this.selectedIndex];\n this.value = selectedItem.value;\n this.inputField.value = selectedItem.label;\n this.itemSelected.emit(selectedItem.value);\n this.focused = false;\n }\n if (e.key === \"Tab\"){\n this.focused = false;\n }\n }\n\n private selectItem(e: Event, index: number): void {\n e.preventDefault();\n e.stopPropagation();\n this.selectedIndex = index;\n this.value = this.suggestions[this.selectedIndex].value;\n this.focused = false;\n this.itemSelected.emit(this.suggestions[this.selectedIndex].value)\n }\n\n private getVirtualScrollHeight(): number {\n const itemHeight = this.findAverageSuggestionHeight();\n const upcomingItems = this.totalSuggestions - this.suggestions.length;\n return itemHeight * upcomingItems;\n }\n\n private handleDropdownClick(): void {\n this.handleSearchQueryChanged(this.value);\n }\n\n @Debounce(100)\n private handleSuggestionsScroll(): void {\n const container = this.suggestionsContainer;\n const currentScrollTop = container.scrollTop;\n\n // Only act if we are scrolling down\n if (currentScrollTop > this.lastScrollTop) {\n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n if (loadingDiv == undefined) {\n this.lastScrollTop = currentScrollTop;\n return;\n }\n\n const loadingDivPosition = loadingDiv.offsetTop;\n const loadingDivHeight = loadingDiv.offsetHeight;\n const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n // Calculate the visible bottom of the scroll container\n const visibleBottom = currentScrollTop + container.clientHeight;\n\n // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n if (visibleBottom > loadingDivBottom) {\n // Adjust scrollTop so it doesn't scroll past the loading div\n container.scrollTop = loadingDivBottom - container.clientHeight;\n }\n\n // Check if more items are needed based on the position of the loading div\n this.checkIfMoreItemsNeeded();\n }\n\n // Update the last scroll position\n this.lastScrollTop = currentScrollTop;\n }\n\n @Debounce()\n private checkIfMoreItemsNeeded() {\n const container = this.suggestionsContainer;\n \n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n if (loadingDiv == undefined) return; // Exit if there's no loading div\n \n const scrollPosition = container.scrollTop + container.clientHeight;\n const loadingDivPosition = loadingDiv.offsetTop;\n \n // Check if the loading div is within the threshold of becoming visible\n if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n const eventArgs: NeedMoreItemsEventArgs = {\n searchTerm: this.inputField.value,\n };\n this.needMoreItems.emit(eventArgs);\n }\n }\n\n handleBlur(): void {\n this.focused = false\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete=\"off\"\n value={this.suggestions.length > 0 && this.selectedIndex != undefined ? this.suggestions[this.selectedIndex].label : this.value}\n onFocus={() => this.focused = true}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n <ul\n class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n role=\"listbox\"\n ref={el => this.suggestionsContainer = el}\n onScroll={() => this.handleSuggestionsScroll()}\n >\n {this.suggestions.map((suggestion, index) => (\n <li\n id={`option-${index}`}\n role=\"option\"\n aria-selected={this.selectedIndex == index}\n class={this.selectedIndex == index ? \"selected\" : \"\"}\n onClick={e => this.selectItem(e, index)}\n >\n {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n </li>\n ))}\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n <div class=\"loading\">\n </div>\n }\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n </div>\n }\n </ul>\n <svg\n onClick={() => this.handleDropdownClick()}\n class=\"chevron-down\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -960 960 960\">\n <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n </svg>\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n}"],"version":3}
|
|
@@ -50,6 +50,8 @@ const DnnTextarea = class {
|
|
|
50
50
|
}
|
|
51
51
|
componentWillLoad() {
|
|
52
52
|
this.labelId = generateRandomId();
|
|
53
|
+
}
|
|
54
|
+
componentDidLoad() {
|
|
53
55
|
this.textarea.style.minHeight = `${this.rows * 1.5}em`;
|
|
54
56
|
}
|
|
55
57
|
// eslint-disable-next-line @stencil-community/own-methods-must-be-private
|
|
@@ -91,7 +93,7 @@ const DnnTextarea = class {
|
|
|
91
93
|
}
|
|
92
94
|
render() {
|
|
93
95
|
var _a;
|
|
94
|
-
return (h(Host, { key: '
|
|
96
|
+
return (h(Host, { key: '78bc32de18f8c22005f02e37b3d7d0be2ea7ae7d', tabIndex: this.focused ? -1 : 0, onFocus: () => this.textarea.focus(), onBlur: () => this.textarea.blur() }, h("dnn-fieldset", { key: '26f23d95e0e5188421edee99a56a6d7fb2b58228', ref: el => this.fieldset = el, invalid: !this.valid, focused: this.focused, resizable: this.resizable, label: `${(_a = this.label) !== null && _a !== void 0 ? _a : ""}${this.required ? " *" : ""}`, helpText: this.helpText, disabled: this.disabled, id: this.labelId, floatLabel: this.shouldLabelFloat(), onClick: () => !this.focused && this.textarea.focus() }, h("textarea", { key: '5a7d1b97c43ce0cead8b6bd47da900b888656a32', ref: el => this.textarea = el, name: this.name, value: this.value, required: this.required, onBlur: () => this.focused = false, onFocus: () => this.focused = true, onChange: () => this.handleChange(), onInput: e => this.handleInput(e.target.value), onInvalid: () => this.handleInvalid(), disabled: this.disabled, autoComplete: this.autocomplete, minlength: this.minlength, maxlength: this.maxlength, readonly: this.readonly, "aria-labelledby": this.labelId, rows: this.rows }))));
|
|
95
97
|
}
|
|
96
98
|
static get formAssociated() { return true; }
|
|
97
99
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dnn-textarea.entry.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,qcAAqc,CAAC;AAC7d,0BAAe,cAAc;;MCShB,WAAW;;;;;;;;;;;;yBAEgE,OAAO;;;;;;;4BAqB9D,KAAK;;;;oBAYb,CAAC;uBA6BL,KAAK;qBACP,IAAI;;;;IApBrB,MAAM,aAAa;QACjB,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;KAC/B;;IAID,MAAM,iBAAiB,CAAC,OAAe;QACrC,IAAI,OAAO,IAAI,SAAS,IAAI,OAAO,IAAI,EAAE,EAAE;YACzC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;YACpC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAChC,OAAO;SACR;QAED,IAAI,CAAC,qBAAqB,GAAG,OAAO,CAAC;QACrC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;KAC1C;IAYD,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,gBAAgB,EAAE,CAAC;
|
|
1
|
+
{"file":"dnn-textarea.entry.js","mappings":"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","names":[],"sources":["src/components/dnn-textarea/dnn-textarea.scss?tag=dnn-textarea&encapsulation=shadow","src/components/dnn-textarea/dnn-textarea.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n /** @prop --foreground: Defines the foreground color. */\n --foreground: var(--dnn-color-foreground, #000);\n\n /** @prop --background: Defines the background color. */\n --background: 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\ntextarea{\n border: none;\n outline: none;\n background-color: transparent;\n color: var(--foreground);\n width: calc(100% - 1em);\n height: calc(100% - 1em);\n line-height: 1.5em;\n resize: none;\n}","import { Component, Host, h, Prop, AttachInternals, State, Event, EventEmitter, Method } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n/** A custom textarea component. */\n@Component({\n tag: 'dnn-textarea',\n styleUrl: 'dnn-textarea.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnTextarea {\n /** Can be set to change how the user can resize the field. */\n @Prop() resizable: \"none\" | \"both\" | \"horizontal\" | \"vertical\" | \"block\" | \"inline\" = \"block\";\n\n /** Sets the value of the textarea. */\n @Prop({mutable: true}) value: string;\n\n /** The label for this input. */\n @Prop() label: string;\n\n /** The name for this input 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 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 /** Defines the type of auto-completion to use for this field, see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete. */\n @Prop() autocomplete: string = \"off\";\n\n /** Defines the minimum amount of charaters. */\n @Prop() minlength: number;\n\n /** Defines the maximum amount of charaters. */\n @Prop() maxlength: number;\n\n /** Defines wheter the defined value is readonly. */\n @Prop() readonly: boolean;\n\n /** Defines how many rows (lines of text) to initially show. */\n @Prop() rows: number = 3;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<string>;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: 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.textarea.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.textarea.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.customValidityMessage = message;\n this.valid = false;\n this.textarea.setCustomValidity(message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n\n @AttachInternals() internals: ElementInternals;\n \n private textarea: HTMLTextAreaElement;\n private fieldset: HTMLDnnFieldsetElement;\n private labelId: string;\n\n componentWillLoad() {\n this.labelId = generateRandomId();\n }\n\n componentDidLoad() {\n this.textarea.style.minHeight = `${this.rows * 1.5}em`;\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.textarea.setCustomValidity(\"\");\n this.valid = true;\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n\n private handleInput(value: string): void {\n this.value = value;\n var valid = this.textarea.checkValidity();\n this.valid = valid;\n this.valueInput.emit(this.value);\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined){\n this.customValidityMessage = this.textarea.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 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 render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.textarea.focus()}\n onBlur={() => this.textarea.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n resizable={this.resizable}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n disabled={this.disabled}\n id={this.labelId}\n floatLabel={this.shouldLabelFloat()}\n onClick={() => !this.focused && this.textarea.focus()}\n >\n <textarea\n ref={el => this.textarea = el}\n name={this.name}\n value={this.value}\n required={this.required}\n onBlur={() => this.focused = false}\n onFocus={() => this.focused=true}\n onChange={() => this.handleChange()}\n onInput={e => this.handleInput((e.target as HTMLTextAreaElement).value)}\n onInvalid={() => this.handleInvalid()}\n disabled={this.disabled}\n autoComplete={this.autocomplete}\n minlength={this.minlength}\n maxlength={this.maxlength}\n readonly={this.readonly}\n aria-labelledby={this.labelId}\n rows={this.rows}\n />\n </dnn-fieldset>\n </Host>\n );\n }\n\n}\n"],"version":3}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dnncommunity/dnn-elements",
|
|
3
|
-
"version": "0.24.0-beta.
|
|
3
|
+
"version": "0.24.0-beta.8",
|
|
4
4
|
"description": "Dnn themed custom elements.",
|
|
5
5
|
"repository": "https://github.com/dnncommunity/dnn-elements",
|
|
6
6
|
"homepage": "https://dnncommunity.github.io/dnn-elements",
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,c as i,h as e,H as s}from"./p-978abd50.js";import{g as n}from"./p-5df01911.js";const h=":host{display:inline-block;--foreground:var(--dnn-color-foreground, #000);--background:var(--dnn-color-background, #fff);--focus-color:var(--dnn-color-primary, #3792ED);--danger-color:var(--dnn-color-danger, #900);--control-radius:var(--dnn-controls-radius, 3px)}dnn-fieldset{width:100%}textarea{border:none;outline:none;background-color:transparent;color:var(--foreground);width:calc(100% - 1em);height:calc(100% - 1em);line-height:1.5em;resize:none}";const d=h;const r=class{constructor(e){t(this,e);this.valueInput=i(this,"valueInput",7);this.valueChange=i(this,"valueChange",7);if(e.$hostElement$["s-ei"]){this.internals=e.$hostElement$["s-ei"]}else{this.internals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.internals}this.resizable="block";this.value=undefined;this.label=undefined;this.name=undefined;this.helpText=undefined;this.required=undefined;this.disabled=undefined;this.autocomplete="off";this.minlength=undefined;this.maxlength=undefined;this.readonly=undefined;this.rows=3;this.focused=false;this.valid=true;this.customValidityMessage=undefined}async checkValidity(){return this.textarea.validity}async setCustomValidity(t){if(t==undefined||t==""){this.textarea.setCustomValidity("");this.valid=true;this.fieldset.setValidity(true);return}this.customValidityMessage=t;this.valid=false;this.textarea.setCustomValidity(t)}componentWillLoad(){this.labelId=n();this.textarea.style.minHeight=`${this.rows*1.5}em`}formResetCallback(){this.textarea.setCustomValidity("");this.valid=true;this.value="";this.internals.setValidity({});this.internals.setFormValue("")}handleInput(t){this.value=t;var i=this.textarea.checkValidity();this.valid=i;this.valueInput.emit(this.value)}handleInvalid(){this.valid=false;if(this.customValidityMessage==undefined){this.customValidityMessage=this.textarea.validationMessage}}handleChange(){this.valueChange.emit(this.value);if(this.name!=undefined){var t=new FormData;t.append(this.name,this.value.toString());this.internals.setFormValue(t)}}shouldLabelFloat(){if(this.focused){return false}if(this.value!=undefined&&this.value!=""){return false}return true}render(){var t;return e(s,{key:"b1b22b0fdc9975613ff99e40d7a8fa6047f62105",tabIndex:this.focused?-1:0,onFocus:()=>this.textarea.focus(),onBlur:()=>this.textarea.blur()},e("dnn-fieldset",{key:"6e509bb911c243f10c1af6fb70e0aefd49ddb2ad",ref:t=>this.fieldset=t,invalid:!this.valid,focused:this.focused,resizable:this.resizable,label:`${(t=this.label)!==null&&t!==void 0?t:""}${this.required?" *":""}`,helpText:this.helpText,disabled:this.disabled,id:this.labelId,floatLabel:this.shouldLabelFloat(),onClick:()=>!this.focused&&this.textarea.focus()},e("textarea",{key:"9dd9d48e90d6cd12c88e1d09fd1b60b018761845",ref:t=>this.textarea=t,name:this.name,value:this.value,required:this.required,onBlur:()=>this.focused=false,onFocus:()=>this.focused=true,onChange:()=>this.handleChange(),onInput:t=>this.handleInput(t.target.value),onInvalid:()=>this.handleInvalid(),disabled:this.disabled,autoComplete:this.autocomplete,minlength:this.minlength,maxlength:this.maxlength,readonly:this.readonly,"aria-labelledby":this.labelId,rows:this.rows})))}static get formAssociated(){return true}};r.style=d;export{r as dnn_textarea};
|
|
2
|
-
//# sourceMappingURL=p-3d55d879.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["dnnTextareaCss","DnnTextareaStyle0","DnnTextarea","checkValidity","this","textarea","validity","setCustomValidity","message","undefined","valid","fieldset","setValidity","customValidityMessage","componentWillLoad","labelId","generateRandomId","style","minHeight","rows","formResetCallback","value","internals","setFormValue","handleInput","valueInput","emit","handleInvalid","validationMessage","handleChange","valueChange","name","data","FormData","append","toString","shouldLabelFloat","focused","render","h","Host","key","tabIndex","onFocus","focus","onBlur","blur","ref","el","invalid","resizable","label","_a","required","helpText","disabled","id","floatLabel","onClick","onChange","onInput","e","target","onInvalid","autoComplete","autocomplete","minlength","maxlength","readonly"],"sources":["src/components/dnn-textarea/dnn-textarea.scss?tag=dnn-textarea&encapsulation=shadow","src/components/dnn-textarea/dnn-textarea.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n /** @prop --foreground: Defines the foreground color. */\n --foreground: var(--dnn-color-foreground, #000);\n\n /** @prop --background: Defines the background color. */\n --background: 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\ntextarea{\n border: none;\n outline: none;\n background-color: transparent;\n color: var(--foreground);\n width: calc(100% - 1em);\n height: calc(100% - 1em);\n line-height: 1.5em;\n resize: none;\n}","import { Component, Host, h, Prop, AttachInternals, State, Event, EventEmitter, Method } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n/** A custom textarea component. */\n@Component({\n tag: 'dnn-textarea',\n styleUrl: 'dnn-textarea.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnTextarea {\n /** Can be set to change how the user can resize the field. */\n @Prop() resizable: \"none\" | \"both\" | \"horizontal\" | \"vertical\" | \"block\" | \"inline\" = \"block\";\n\n /** Sets the value of the textarea. */\n @Prop({mutable: true}) value: string;\n\n /** The label for this input. */\n @Prop() label: string;\n\n /** The name for this input 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 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 /** Defines the type of auto-completion to use for this field, see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete. */\n @Prop() autocomplete: string = \"off\";\n\n /** Defines the minimum amount of charaters. */\n @Prop() minlength: number;\n\n /** Defines the maximum amount of charaters. */\n @Prop() maxlength: number;\n\n /** Defines wheter the defined value is readonly. */\n @Prop() readonly: boolean;\n\n /** Defines how many rows (lines of text) to initially show. */\n @Prop() rows: number = 3;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<string>;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: 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.textarea.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.textarea.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.customValidityMessage = message;\n this.valid = false;\n this.textarea.setCustomValidity(message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n\n @AttachInternals() internals: ElementInternals;\n \n private textarea: HTMLTextAreaElement;\n private fieldset: HTMLDnnFieldsetElement;\n private labelId: string;\n\n componentWillLoad() {\n this.labelId = generateRandomId();\n this.textarea.style.minHeight = `${this.rows * 1.5}em`;\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.textarea.setCustomValidity(\"\");\n this.valid = true;\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n\n private handleInput(value: string): void {\n this.value = value;\n var valid = this.textarea.checkValidity();\n this.valid = valid;\n this.valueInput.emit(this.value);\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined){\n this.customValidityMessage = this.textarea.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 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 render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.textarea.focus()}\n onBlur={() => this.textarea.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n resizable={this.resizable}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n disabled={this.disabled}\n id={this.labelId}\n floatLabel={this.shouldLabelFloat()}\n onClick={() => !this.focused && this.textarea.focus()}\n >\n <textarea\n ref={el => this.textarea = el}\n name={this.name}\n value={this.value}\n required={this.required}\n onBlur={() => this.focused = false}\n onFocus={() => this.focused=true}\n onChange={() => this.handleChange()}\n onInput={e => this.handleInput((e.target as HTMLTextAreaElement).value)}\n onInvalid={() => this.handleInvalid()}\n disabled={this.disabled}\n autoComplete={this.autocomplete}\n minlength={this.minlength}\n maxlength={this.maxlength}\n readonly={this.readonly}\n aria-labelledby={this.labelId}\n rows={this.rows}\n />\n </dnn-fieldset>\n </Host>\n );\n }\n\n}\n"],"mappings":"6FAAA,MAAMA,EAAiB,scACvB,MAAAC,EAAeD,E,MCSFE,EAAW,M,wRAEgE,Q,wJAqBvD,M,oFAYR,E,aA6BJ,M,WACF,K,qCApBjB,mBAAMC,GACJ,OAAOC,KAAKC,SAASC,Q,CAKvB,uBAAMC,CAAkBC,GACtB,GAAIA,GAAWC,WAAaD,GAAW,GAAI,CACzCJ,KAAKC,SAASE,kBAAkB,IAChCH,KAAKM,MAAQ,KACbN,KAAKO,SAASC,YAAY,MAC1B,M,CAGFR,KAAKS,sBAAwBL,EAC7BJ,KAAKM,MAAQ,MACbN,KAAKC,SAASE,kBAAkBC,E,CAalC,iBAAAM,GACEV,KAAKW,QAAUC,IACfZ,KAAKC,SAASY,MAAMC,UAAY,GAAGd,KAAKe,KAAO,O,CAIjD,iBAAAC,GACEhB,KAAKC,SAASE,kBAAkB,IAChCH,KAAKM,MAAQ,KACbN,KAAKiB,MAAQ,GACbjB,KAAKkB,UAAUV,YAAY,IAC3BR,KAAKkB,UAAUC,aAAa,G,CAGtB,WAAAC,CAAYH,GAClBjB,KAAKiB,MAAQA,EACb,IAAIX,EAAQN,KAAKC,SAASF,gBAC1BC,KAAKM,MAAQA,EACbN,KAAKqB,WAAWC,KAAKtB,KAAKiB,M,CAGpB,aAAAM,GACNvB,KAAKM,MAAQ,MACb,GAAIN,KAAKS,uBAAyBJ,UAAU,CAC1CL,KAAKS,sBAAwBT,KAAKC,SAASuB,iB,EAIvC,YAAAC,GACNzB,KAAK0B,YAAYJ,KAAKtB,KAAKiB,OAC3B,GAAIjB,KAAK2B,MAAQtB,UAAU,CACzB,IAAIuB,EAAO,IAAIC,SACfD,EAAKE,OAAO9B,KAAK2B,KAAM3B,KAAKiB,MAAMc,YAClC/B,KAAKkB,UAAUC,aAAaS,E,EAIxB,gBAAAI,GACN,GAAIhC,KAAKiC,QAAS,CAChB,OAAO,K,CAGT,GAAIjC,KAAKiB,OAASZ,WAAaL,KAAKiB,OAAS,GAAI,CAC/C,OAAO,K,CAGT,OAAO,I,CAGT,MAAAiB,G,MACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,SAAUtC,KAAKiC,SAAW,EAAI,EAC9BM,QAAS,IAAMvC,KAAKC,SAASuC,QAC7BC,OAAQ,IAAMzC,KAAKC,SAASyC,QAE5BP,EAAA,gBAAAE,IAAA,2CACEM,IAAKC,GAAM5C,KAAKO,SAAWqC,EAC3BC,SAAU7C,KAAKM,MACf2B,QAASjC,KAAKiC,QACda,UAAW9C,KAAK8C,UAChBC,MAAO,IAAGC,EAAAhD,KAAK+C,SAAK,MAAAC,SAAA,EAAAA,EAAI,KAAKhD,KAAKiD,SAAW,KAAO,KACpDC,SAAUlD,KAAKkD,SACfC,SAAUnD,KAAKmD,SACfC,GAAIpD,KAAKW,QACT0C,WAAYrD,KAAKgC,mBACjBsB,QAAS,KAAOtD,KAAKiC,SAAWjC,KAAKC,SAASuC,SAE9CL,EAAA,YAAAE,IAAA,2CACEM,IAAKC,GAAM5C,KAAKC,SAAW2C,EAC3BjB,KAAM3B,KAAK2B,KACXV,MAAOjB,KAAKiB,MACZgC,SAAUjD,KAAKiD,SACfR,OAAQ,IAAMzC,KAAKiC,QAAU,MAC7BM,QAAS,IAAMvC,KAAKiC,QAAQ,KAC5BsB,SAAU,IAAMvD,KAAKyB,eACrB+B,QAASC,GAAKzD,KAAKoB,YAAaqC,EAAEC,OAA+BzC,OACjE0C,UAAW,IAAM3D,KAAKuB,gBACtB4B,SAAUnD,KAAKmD,SACfS,aAAc5D,KAAK6D,aACnBC,UAAW9D,KAAK8D,UAChBC,UAAW/D,KAAK+D,UAChBC,SAAUhE,KAAKgE,SAAQ,kBACNhE,KAAKW,QACtBI,KAAMf,KAAKe,Q","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as i,c as t,h as e,H as s,g as n}from"./p-978abd50.js";import{D as h}from"./p-78c57746.js";const o=":host{display:inline-block;--foreground-color:var(--dnn-color-foreground, #000);--background-color:var(--dnn-color-background, #fff);--focus-color:var(--dnn-color-primary, #3792ED);--danger-color:var(--dnn-color-danger, #900);--control-radius:var(--dnn-controls-radius, 3px)}dnn-fieldset{width:100%}@keyframes shift{0%{background-position:0% 0}50%{background-position:100% 0}100%{background-position:200% 0}}.inner-container{display:flex;justify-content:space-between;position:relative;width:100%}.inner-container input{border:none;outline:none;background-color:transparent;color:var(--foreground-color);text-align:var(--input-text-align);width:100%}.inner-container svg.chevron-down{height:1rem;width:auto;transform:scale(1.2);cursor:pointer}.inner-container ul{position:absolute;border:1px solid lightgray;margin:0;padding:var(--dnn-controls-radius, 3px) 0;overflow-y:auto;width:100%;box-shadow:2px 2px 6px 1px rgba(0, 0, 0, 0.3);background-color:var(--dnn-color-background, white);border-radius:var(--dnn-controls-radius, 3px);z-index:2;display:none;scroll-behavior:smooth}.inner-container ul.show{display:block}.inner-container ul li{display:block;list-style-type:none;cursor:pointer;padding:0 0.5rem}.inner-container ul li.selected{background-color:lightgray}.inner-container ul li:hover{background-color:lightgray}.inner-container ul .loading{width:100%;height:0.5rem;border-radius:0.5rem;background:linear-gradient(to right, var(--background-color) 0%, var(--foreground-color) 50%, var(--background-color) 100%);background-size:200% 100%;animation:shift 2s linear infinite;width:75%;margin:0 auto;opacity:0.5}";const r=o;var a=undefined&&undefined.__decorate||function(i,t,e,s){var n=arguments.length,h=n<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,e):s,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")h=Reflect.decorate(i,t,e,s);else for(var r=i.length-1;r>=0;r--)if(o=i[r])h=(n<3?o(h):n>3?o(t,e,h):o(t,e))||h;return n>3&&h&&Object.defineProperty(t,e,h),h};const d=class{constructor(e){i(this,e);this.valueChange=t(this,"valueChange",7);this.valueInput=t(this,"valueInput",7);this.needMoreItems=t(this,"needMoreItems",7);this.searchQueryChanged=t(this,"searchQueryChanged",7);this.itemSelected=t(this,"itemSelected",7);if(e.$hostElement$["s-ei"]){this.internals=e.$hostElement$["s-ei"]}else{this.internals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.internals}this.adjustDropdownPosition=()=>{var i=this.findAverageSuggestionHeight();requestAnimationFrame((()=>{this.positionInitialized=true}));var t=window.innerHeight-this.inputField.getBoundingClientRect().bottom;const e=parseFloat(getComputedStyle(document.documentElement).fontSize);const s=t>3*i+3*e;if(s){this.suggestionsContainer.style.top="1.2rem"}else{this.suggestionsContainer.style.bottom="1.2rem"}if(s){this.suggestionsContainer.style.maxHeight=`${t-3*e}px`}else{this.suggestionsContainer.style.maxHeight=`${this.inputField.getBoundingClientRect().top-3*e}px`}this.checkIfMoreItemsNeeded()};this.label=undefined;this.name=undefined;this.helpText=undefined;this.value=undefined;this.required=undefined;this.disabled=undefined;this.suggestions=[];this.renderSuggestion=undefined;this.totalSuggestions=undefined;this.preloadThresholdPixels=1e3;this.focused=false;this.valid=true;this.customValidityMessage=undefined;this.selectedIndex=undefined;this.positionInitialized=false;this.lastScrollTop=0}async checkValidity(){return this.inputField.validity}async setCustomValidity(i){if(i==undefined||i==""){this.inputField.setCustomValidity("");this.valid=true;this.fieldset.setValidity(true);return}this.inputField.setCustomValidity(i);this.valid=false;this.fieldset.setValidity(false,i)}handleOutsideClick(i){const t=i.composedPath();if(!t.includes(this.element)){this.focused=false}}componentDidRender(){if(this.focused&&this.suggestions.length>0&&!this.positionInitialized){this.adjustDropdownPosition()}}formResetCallback(){this.inputField.setCustomValidity("");this.valid=true;this.value="";this.internals.setValidity({});this.internals.setFormValue("")}handleInput(i){const t=i.target.value;var e=this.inputField.checkValidity();this.valid=e;this.valueInput.emit(t);this.handleSearchQueryChanged(t)}handleSearchQueryChanged(i){this.searchQueryChanged.emit(i)}handleInvalid(){this.valid=false;if(this.customValidityMessage==undefined){this.customValidityMessage=this.inputField.validationMessage}}handleChange(){this.valueChange.emit(this.value);if(this.name!=undefined){var i=new FormData;i.append(this.name,this.value.toString());this.internals.setFormValue(i)}}shouldLabelFloat(){if(this.focused){return false}if(this.value!=undefined&&this.value!=""){return false}return true}findAverageSuggestionHeight(){const i=this.suggestionsContainer.querySelectorAll("li");var t=0;for(let e=0;e<i.length;e++){t+=i[e].clientHeight}return t/i.length}handleKeyDown(i){var t;if(i.key==="ArrowDown"){i.preventDefault();if(this.selectedIndex==undefined){this.selectedIndex=0}else{this.selectedIndex=Math.min(this.selectedIndex+1,this.suggestions.length-1)}}if(i.key==="ArrowUp"){i.preventDefault();if(this.selectedIndex==undefined){this.selectedIndex=this.suggestions.length-1}else{this.selectedIndex=Math.max(this.selectedIndex-1,0)}}this.value=(t=this.suggestions[this.selectedIndex])===null||t===void 0?void 0:t.value;if(i.key==="Enter"){var e=this.suggestions[this.selectedIndex];this.value=e.value;this.inputField.value=e.label;this.itemSelected.emit(e.value);this.focused=false}if(i.key==="Tab"){this.focused=false}}selectItem(i,t){i.preventDefault();i.stopPropagation();this.selectedIndex=t;this.value=this.suggestions[this.selectedIndex].value;this.focused=false;this.itemSelected.emit(this.suggestions[this.selectedIndex].value)}getVirtualScrollHeight(){const i=this.findAverageSuggestionHeight();const t=this.totalSuggestions-this.suggestions.length;return i*t}handleDropdownClick(){this.handleSearchQueryChanged(this.value)}handleSuggestionsScroll(){const i=this.suggestionsContainer;const t=i.scrollTop;if(t>this.lastScrollTop){const e=i.querySelector(".loading");if(e==undefined){this.lastScrollTop=t;return}const s=e.offsetTop;const n=e.offsetHeight;const h=s+n;const o=t+i.clientHeight;if(o>h){i.scrollTop=h-i.clientHeight}this.checkIfMoreItemsNeeded()}this.lastScrollTop=t}checkIfMoreItemsNeeded(){const i=this.suggestionsContainer;const t=i.querySelector(".loading");if(t==undefined)return;const e=i.scrollTop+i.clientHeight;const s=t.offsetTop;if(s-e<this.preloadThresholdPixels){const i={searchTerm:this.inputField.value};this.needMoreItems.emit(i)}}handleBlur(){this.focused=false;var i=this.inputField.checkValidity();this.valid=i;this.fieldset.setValidity(i,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}render(){var i;return e(s,{key:"d168d544d1cba6e484ada7c7cedce5be58758451",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},e("dnn-fieldset",{key:"fb37ca0af0864e4b92b33aae7e5d3814b612c4b7",ref:i=>this.fieldset=i,invalid:!this.valid,focused:this.focused,label:`${(i=this.label)!==null&&i!==void 0?i:""}${this.required?" *":""}`,helpText:this.helpText,id:this.labelId,disabled:this.disabled,floatLabel:this.shouldLabelFloat()},e("div",{key:"b101dbe15914cf744bd6ce6d06b1ac2ce35542c8",class:"inner-container"},e("input",{key:"7d8036fcaed65455b8baf35facd70ae309f8439f",ref:i=>this.inputField=i,name:this.name,type:"search",role:"combobox","aria-haspopup":"listbox","aria-expanded":this.focused.toString(),"aria-activedescendant":this.selectedIndex!==undefined?`option-${this.selectedIndex}`:undefined,disabled:this.disabled,required:this.required,autoComplete:"off",value:this.suggestions.length>0&&this.selectedIndex!=undefined?this.suggestions[this.selectedIndex].label:this.value,onFocus:()=>this.focused=true,onBlur:()=>this.handleBlur(),onInput:i=>this.handleInput(i),onInvalid:()=>this.handleInvalid(),onChange:()=>this.handleChange(),"aria-labelledby":this.labelId,onKeyDown:i=>this.handleKeyDown(i)}),e("ul",{key:"b91ea7711160c7c0abecb39d687b84f2402294e3",class:this.focused&&this.suggestions.length>0?"show":"",role:"listbox",ref:i=>this.suggestionsContainer=i,onScroll:()=>this.handleSuggestionsScroll()},this.suggestions.map(((i,t)=>e("li",{id:`option-${t}`,role:"option","aria-selected":this.selectedIndex==t,class:this.selectedIndex==t?"selected":"",onClick:i=>this.selectItem(i,t)},this.renderSuggestion!=undefined?this.renderSuggestion(i):i.label))),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&e("div",{key:"4be99d7a7a307dc985440f87ee076f9817dd84bb",class:"loading"}),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&this.positionInitialized&&e("div",{key:"36c4e63152c4a5cd48ff9531001e4cbdfaab1047",style:{height:`${this.getVirtualScrollHeight()}px`}})),e("svg",{key:"070ac24319e8a0beef616bbb1cefb808ac598c4e",onClick:()=>this.handleDropdownClick(),class:"chevron-down",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},e("path",{key:"53f56ae50d99a3ec830b84a8d92edcf8d41904d1",d:"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z"})))))}static get formAssociated(){return true}get element(){return n(this)}};a([h(300)],d.prototype,"handleSearchQueryChanged",null);a([h(100)],d.prototype,"handleSuggestionsScroll",null);a([h()],d.prototype,"checkIfMoreItemsNeeded",null);d.style=r;export{d as dnn_autocomplete};
|
|
2
|
-
//# sourceMappingURL=p-ec753af4.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["dnnAutocompleteCss","DnnAutocompleteStyle0","DnnAutocomplete","this","adjustDropdownPosition","itemHeight","findAverageSuggestionHeight","requestAnimationFrame","positionInitialized","spaceBelow","window","innerHeight","inputField","getBoundingClientRect","bottom","rem","parseFloat","getComputedStyle","document","documentElement","fontSize","fitsDown","suggestionsContainer","style","top","maxHeight","checkIfMoreItemsNeeded","checkValidity","validity","setCustomValidity","message","undefined","valid","fieldset","setValidity","handleOutsideClick","e","path","composedPath","includes","element","focused","componentDidRender","suggestions","length","formResetCallback","value","internals","setFormValue","handleInput","target","valueInput","emit","handleSearchQueryChanged","searchQueryChanged","handleInvalid","customValidityMessage","validationMessage","handleChange","valueChange","name","data","FormData","append","toString","shouldLabelFloat","suggestionItems","querySelectorAll","totalHeight","i","clientHeight","handleKeyDown","key","preventDefault","selectedIndex","Math","min","max","_a","selectedItem","label","itemSelected","selectItem","index","stopPropagation","getVirtualScrollHeight","upcomingItems","totalSuggestions","handleDropdownClick","handleSuggestionsScroll","container","currentScrollTop","scrollTop","lastScrollTop","loadingDiv","querySelector","loadingDivPosition","offsetTop","loadingDivHeight","offsetHeight","loadingDivBottom","visibleBottom","scrollPosition","preloadThresholdPixels","eventArgs","searchTerm","needMoreItems","handleBlur","render","h","Host","tabIndex","onFocus","focus","onBlur","blur","ref","el","invalid","required","helpText","id","labelId","disabled","floatLabel","class","type","role","autoComplete","onInput","onInvalid","onChange","onKeyDown","onScroll","map","suggestion","onClick","renderSuggestion","height","xmlns","viewBox","d","__decorate","Debounce"],"sources":["src/components/dnn-autocomplete/dnn-autocomplete.scss?tag=dnn-autocomplete&encapsulation=shadow","src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"sourcesContent":[":host {\n display: inline-block;\n\n /** @prop --foreground-color: Defines the foreground color. */\n --foreground-color: var(--dnn-color-foreground, #000);\n\n /** @prop --background-color: Defines the background color. */\n --background-color: var(--dnn-color-background, #fff);\n\n /** @prop --focus-color: Defines the color when the component is focused. */\n --focus-color: var(--dnn-color-primary, #3792ED);\n\n /** @prop --danger-color: Defines the danger color used for invalid data. */\n --danger-color: var(--dnn-color-danger, #900);\n\n /** @prop --control-radius: Defines the radius for the control corners. */\n --control-radius: var(--dnn-controls-radius, 3px);\n}\n\ndnn-fieldset{\n width: 100%;\n}\n\n@keyframes shift {\n 0% {\n background-position: 0% 0;\n }\n 50% {\n background-position: 100% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n.inner-container{\n display: flex;\n justify-content: space-between;\n position: relative;\n width: 100%;\n\n input {\n border: none;\n outline: none;\n background-color: transparent;\n color: var(--foreground-color);\n text-align: var(--input-text-align);\n width: 100%;\n }\n\n svg.chevron-down{\n height: 1rem;\n width: auto;\n transform: scale(1.2);\n cursor: pointer;\n }\n\n ul{\n position: absolute;\n border: 1px solid lightgray;\n margin: 0;\n padding: var(--dnn-controls-radius, 3px) 0;\n overflow-y: auto;\n width: 100%;\n box-shadow: 2px 2px 6px 1px rgb(0 0 0 / 30%);\n background-color: var(--dnn-color-background, white);\n border-radius: var(--dnn-controls-radius, 3px);\n z-index: 2;\n display: none;\n scroll-behavior: smooth;\n &.show{\n display: block;\n }\n li {\n display: block;\n list-style-type: none;\n cursor: pointer;\n padding: 0 0.5rem;\n &.selected {\n background-color: lightgray;\n }\n &:hover {\n background-color: lightgray;\n }\n }\n .loading {\n width: 100%;\n height: 0.5rem;\n border-radius: 0.5rem;\n background: linear-gradient(\n to right,\n var(--background-color) 0%,\n var(--foreground-color) 50%,\n var(--background-color) 100%);\n background-size: 200% 100%;\n animation: shift 2s linear infinite;\n width: 75%;\n margin: 0 auto;\n opacity: 0.5;\n }\n }\n}\n","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. */\n @Prop() label: string;\n\n /** The name for this autocomplete when used in forms. */\n @Prop() name: string;\n\n /** Defines the help label displayed under the field. */\n @Prop() helpText: string;\n\n /** Defines the value for this autocomplete */\n @Prop({mutable: true, reflect: true}) value: string;\n\n /** Defines whether the field requires having a value. */\n @Prop() required: boolean;\n\n /** Defines whether the field is disabled. */\n @Prop() disabled: boolean;\n\n /** Sets the list of suggestions. */\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /** Callback to render suggestions, if not provided, only the label will be rendered. */\n @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n\n /** The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n */\n @Prop() totalSuggestions: number;\n\n /** How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n */\n @Prop() preloadThresholdPixels: number = 1000;\n\n @Element() element: HTMLDnnAutocompleteElement;\n\n /** Fires when the value has changed and the user exits the input. */\n @Event() valueChange: EventEmitter<number | string | string[]>;\n\n /** Fires when the using is inputing data (on keystrokes). */\n @Event() valueInput: EventEmitter<number | string | string[]>;\n\n /** Fires when the component needs to display more items in the suggestions. */\n @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n /** Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n */\n @Event() searchQueryChanged: EventEmitter<string>;\n \n /** Fires when an item is selected. */\n @Event() itemSelected: EventEmitter<string>;\n\n /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n @Method()\n async checkValidity(): Promise<ValidityState> {\n return this.inputField.validity;\n }\n \n /** Can be used to set a custom validity message. */\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined || message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n @State() selectedIndex: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n \n /** attacth the internals for form validation */\n @AttachInternals() internals: ElementInternals;\n \n /** Listener for mouse down event */\n @Listen(\"click\", { target: \"document\", capture: false })\n handleOutsideClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n \n componentDidRender(){\n if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n this.adjustDropdownPosition();\n }\n }\n\n private inputField!: HTMLInputElement;\n private suggestionsContainer: HTMLUListElement;\n private labelId: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n \n private handleInput(e: Event) {\n const value = (e.target as HTMLInputElement).value;\n 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 private handleDropdownClick(): void {\n this.handleSearchQueryChanged(this.value);\n }\n\n @Debounce(100)\n private handleSuggestionsScroll(): void {\n const container = this.suggestionsContainer;\n const currentScrollTop = container.scrollTop;\n\n // Only act if we are scrolling down\n if (currentScrollTop > this.lastScrollTop) {\n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n if (loadingDiv == undefined) {\n this.lastScrollTop = currentScrollTop;\n return;\n }\n\n const loadingDivPosition = loadingDiv.offsetTop;\n const loadingDivHeight = loadingDiv.offsetHeight;\n const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n // Calculate the visible bottom of the scroll container\n const visibleBottom = currentScrollTop + container.clientHeight;\n\n // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n if (visibleBottom > loadingDivBottom) {\n // Adjust scrollTop so it doesn't scroll past the loading div\n container.scrollTop = loadingDivBottom - container.clientHeight;\n }\n\n // Check if more items are needed based on the position of the loading div\n this.checkIfMoreItemsNeeded();\n }\n\n // Update the last scroll position\n this.lastScrollTop = currentScrollTop;\n }\n\n @Debounce()\n private checkIfMoreItemsNeeded() {\n const container = this.suggestionsContainer;\n \n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n if (loadingDiv == undefined) return; // Exit if there's no loading div\n \n const scrollPosition = container.scrollTop + container.clientHeight;\n const loadingDivPosition = loadingDiv.offsetTop;\n \n // Check if the loading div is within the threshold of becoming visible\n if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n const eventArgs: NeedMoreItemsEventArgs = {\n searchTerm: this.inputField.value,\n };\n this.needMoreItems.emit(eventArgs);\n }\n }\n\n handleBlur(): void {\n this.focused = false\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete=\"off\"\n value={this.suggestions.length > 0 && this.selectedIndex != undefined ? this.suggestions[this.selectedIndex].label : this.value}\n onFocus={() => this.focused = true}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n <ul\n class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n role=\"listbox\"\n ref={el => this.suggestionsContainer = el}\n onScroll={() => this.handleSuggestionsScroll()}\n >\n {this.suggestions.map((suggestion, index) => (\n <li\n id={`option-${index}`}\n role=\"option\"\n aria-selected={this.selectedIndex == index}\n class={this.selectedIndex == index ? \"selected\" : \"\"}\n onClick={e => this.selectItem(e, index)}\n >\n {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n </li>\n ))}\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n <div class=\"loading\">\n </div>\n }\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n </div>\n }\n </ul>\n <svg\n onClick={() => this.handleDropdownClick()}\n class=\"chevron-down\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -960 960 960\">\n <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n </svg>\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n}"],"mappings":"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","ignoreList":[]}
|