@dnncommunity/dnn-elements 0.24.0 → 0.24.1-beta.2

package/dist/dnn/{p-69d5f883.entry.js → p-f4b5a8e5.entry.js}

@@ -1,4 +1,4 @@
-import{r as e,c as n,h as o,H as t,g as i}from"./p-978abd50.js";import{D as d}from"./p-78c57746.js";
+import{r as e,c as n,h as o,H as t,g as i}from"./p-91d08ab2.js";import{D as d}from"./p-78c57746.js";
 /** Color utility class with hsl and rgb converters
  * based on math at https://en.wikipedia.org/wiki/HSL_and_HSV
  * @copyright Copyright (c) .NET Foundation. All rights reserved.
@@ -8,4 +8,4 @@ import{r as e,c as n,h as o,H as t,g as i}from"./p-978abd50.js";import{D as d}fr
  * @copyright Copyright (c) .NET Foundation. All rights reserved.
  * @license MIT
  */var c=undefined&&undefined.__decorate||function(e,n,o,t){var i=arguments.length,d=i<3?n:t===null?t=Object.getOwnPropertyDescriptor(n,o):t,l;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")d=Reflect.decorate(e,n,o,t);else for(var s=e.length-1;s>=0;s--)if(l=e[s])d=(i<3?l(d):i>3?l(n,o,d):l(n,o))||d;return i>3&&d&&Object.defineProperty(n,o,d),d};const a=class{constructor(o){e(this,o);this.colorChanged=n(this,"colorChanged",7);this.handleSaturationLightnessMouseDown=e=>{e.preventDefault();this.handleDragLightnessSaturation(e);window.addEventListener("mousemove",this.handleDragLightnessSaturation);window.addEventListener("mouseup",this.handleSaturationLightnessMouseUp)};this.handleDragLightnessSaturation=e=>{const n=this.saturationLightnessBox.getBoundingClientRect();let o=e.clientX-n.left;if(o<0){o=0}if(o>n.width){o=n.width}o=o/n.width;let t=e.clientY-n.top;if(t<0){t=0}if(t>n.height){t=n.height}t=1-t/n.height;const i=new l;i.hue=this.currentColor.hue;i.saturation=o;i.lightness=t;this.currentColor=i};this.handleSaturationLightnessMouseUp=()=>{window.removeEventListener("mousemove",this.handleDragLightnessSaturation);window.removeEventListener("mouseup",this.handleSaturationLightnessMouseUp)};this.handleHueMouseDown=e=>{e.preventDefault();this.handleDragHue(e);window.addEventListener("mousemove",this.handleDragHue);window.addEventListener("mouseup",this.handleHueMouseUp)};this.handleHueMouseUp=()=>{window.removeEventListener("mousemove",this.handleDragHue);window.removeEventListener("mouseup",this.handleHueMouseUp)};this.handleDragHue=e=>{const n=this.hueRange.getBoundingClientRect();let o=e.clientX-n.left;if(o<0){o=0}if(o>n.width){o=n.width}o=o/n.width*360;const t=new l;t.hue=o;t.saturation=this.currentColor.saturation;t.lightness=this.currentColor.lightness;this.currentColor=t};this.handleComponentValueChange=(e,n)=>{let o=parseInt(e.target.value);if(isNaN(o)){return}const t=new l;if(o<0){o=0}if(o>255){o=255}let i=this.currentColor.red;let d=this.currentColor.green;let s=this.currentColor.blue;switch(n){case"red":i=o;break;case"green":d=o;break;case"blue":s=o;break}t.green=d;t.red=i;t.blue=s;this.currentColor=t};this.handleHSLChange=(e,n)=>{let o=parseInt(e.target.value);if(isNaN(o)){return}const t=new l;if(o!=null){let e=this.currentColor.hue;let i=this.currentColor.saturation;let d=this.currentColor.lightness;switch(n){case"hue":if(o<0){o=0}if(o>359){o=0}e=o;break;case"saturation":if(o<0){o=0}if(o>100){o=100}i=o/100;break;case"lightness":if(o<0){o=0}if(o>100){o=100}d=o/100;break}t.hue=e;t.saturation=i;t.lightness=d;this.currentColor=t}};this.handleSaturationLightnessKeyDown=e=>{let n=new l;n.hue=this.currentColor.hue;n.saturation=this.currentColor.saturation;n.lightness=this.currentColor.lightness;let o=.01;if(e.shiftKey){o=.1}switch(e.key){case"ArrowUp":n.lightness+=o;break;case"ArrowDown":n.lightness-=o;break;case"ArrowLeft":n.saturation-=o;break;case"ArrowRight":n.saturation+=o}this.currentColor=n};this.handleHueKeyDown=e=>{let n=new l;n.hue=this.currentColor.hue;n.saturation=this.currentColor.saturation;n.lightness=this.currentColor.lightness;let o=1;if(e.shiftKey){o=10}switch(e.key){case"ArrowLeft":n.hue-=o;break;case"ArrowRight":n.hue+=o}this.currentColor=n};this.color="FFFFFF";this.colorBoxHeight="50%";this.currentColor=undefined;this.rgbDisplay="flex";this.hslDisplay="none";this.hexDisplay="none";this.focused=false}colorChangedHandler(e){this.colorChanged.emit(e)}handeCurrentColorChanged(e){this.colorChangedHandler(e)}componentWillLoad(){this.handleHexChange(this.color)}componentDidLoad(){this.el.style.setProperty("--color-box-height",this.colorBoxHeight.toString())}getHex(){return this.getDoublet(this.currentColor.red)+this.getDoublet(this.currentColor.green)+this.getDoublet(this.currentColor.blue)}getContrast(){return this.currentColor.contrastColor}getDoublet(e){const n=e.toString(16).toUpperCase();if(n.length===1){return"0"+n}return n}handleHexChange(e){const n=new l;if(e.match(/^(?:[\da-f]{3}|[\da-f]{6})$/i).length>0){if(e.length===3){let n=e[0]+e[0]+e[1]+e[1]+e[2]+e[2];e=n}n.red=parseInt(e.substr(0,2),16);n.green=parseInt(e.substr(2,2),16);n.blue=parseInt(e.substr(4,2),16)}else{n.red=this.currentColor.red;n.green=this.currentColor.green;n.blue=this.currentColor.blue}this.currentColor=n}switchColorMode(e){switch(e.target.id){case"rgb-switch":this.rgbDisplay="none";this.hslDisplay="none";this.hexDisplay="flex";break;case"hex-switch":this.rgbDisplay="none";this.hslDisplay="flex";this.hexDisplay="none";break;case"hsl-switch":this.rgbDisplay="flex";this.hslDisplay="none";this.hexDisplay="none";break;default:this.rgbDisplay="flex";this.hslDisplay="none";this.hexDisplay="none"}}render(){const e=this.currentColor.hue;const n=this.currentColor.saturation;const i=this.currentColor.lightness;const d=this.currentColor.red;const l=this.currentColor.green;const s=this.currentColor.blue;return o(t,{key:"3270ad5db8fe3d6e4b0b77b8eaaab7ca49f845a1",tabIndex:this.focused?-1:0,onFocus:()=>this.saturationBrightnessButton.focus(),onBlur:()=>this.saturationBrightnessButton.blur()},o("div",{key:"b92a03280c86835af30df24364f9923627f77ea9",class:"dnn-color-picker"},o("div",{key:"5e23ef4f0678d73e3908d7d81aa57f1e9f8a75dc",class:"dnn-color-sliders"},o("div",{key:"416fcb88cd209236acb5299719b2148c741beba8",class:"dnn-color-s-b",ref:e=>this.saturationLightnessBox=e,style:{backgroundColor:`hsl(${e},100%,50%)`},onMouseDown:this.handleSaturationLightnessMouseDown.bind(this)},o("button",{key:"1a4ae20c8308ec5132da58ccaeb6420b737588c7",ref:e=>this.saturationBrightnessButton=e,class:"dnn-s-b-picker","aria-label":"Press up or down to adjust lightness, left or right to adjust saturation, hold shift to move by 10%",role:"slider","aria-valuemin":"0","aria-valuemax":"100","aria-valuetext":`Saturation: ${Math.round(this.currentColor.saturation*100)}%, Lightness: ${Math.round(this.currentColor.lightness*100)}%`,style:{left:Math.round(n*100)+"%",bottom:Math.round(i*100)+"%"},onKeyDown:e=>this.handleSaturationLightnessKeyDown(e),onFocus:()=>this.focused=true,onBlur:()=>this.focused=false})),o("div",{key:"1ac761c0b53f096f585bba62eb63048aa00ec244",class:"dnn-color-bar"},o("div",{key:"67e90b41602a2667c4820cf77e855d12309b71f1",class:"dnn-color-result",style:{backgroundColor:"#"+this.getHex(),boxShadow:"0 0 2px 1px "+"#"+this.getContrast()}}),o("div",{key:"4b6593671043f63f14641f3335ccf39b04b0fe5d",class:"dnn-color-hue",ref:e=>this.hueRange=e,onMouseDown:this.handleHueMouseDown.bind(this)},o("button",{key:"01c59ab72393b1d7dfef31196adfc6d10e68ceb0",class:"dnn-hue-picker","aria-label":"Press left or right to adjust hue, hold shift to move by 10 degrees",role:"slider","aria-valuemin":"0","aria-valuemax":"359","aria-valuenow":Math.round(e),style:{left:(e/359*100).toString()+"%"},onKeyDown:e=>this.handleHueKeyDown(e)})))),o("div",{key:"f2cd5649fb1788700a1e40bc28d0293e6522df02",class:"dnn-color-fields"},o("div",{key:"261f1f240094a62d976cbddcb5d1d53772776ddc",class:"dnn-rgb-color-fields",style:{display:this.rgbDisplay}},o("div",{key:"61416a06bff45ac743e03a117f932f217f02c1c0",class:"dnn-rgb-color-field"},o("label",{key:"27b5b1742d903aeb5b5f3f2edcf69b29c32eab39"},"R"),o("input",{key:"86b35afd62520a4c1b712ced31ed079e3e5394f7",type:"number",min:"0",max:"255",step:"1",class:"red",value:d,"aria-label":"red value",onChange:e=>this.handleComponentValueChange(e,"red")})),o("div",{key:"69115f117b7d0f619765b2a01503ad17448263c5",class:"dnn-rgb-color-field"},o("label",{key:"6f1870bd898b2f7d061075dedac54a6f81bd4ee0"},"G"),o("input",{key:"e48f0a48c8a4cf69a4893cb8d8c74084bfc3044c",type:"number",min:"0",max:"255",class:"green",value:l,"aria-label":"green value",onChange:e=>this.handleComponentValueChange(e,"green")})),o("div",{key:"c6ef7f77a1c34a9960c72a618d54391c53f74f4d",class:"dnn-rgb-color-field"},o("label",{key:"bb4e309c363171764bde998fe58430b4eb6ebf4f"},"B"),o("input",{key:"e9dfe614313e271b45ca0c60ba26655d59f39447",type:"number",min:"0",max:"255",class:"blue",value:s,"aria-label":"blue value",onChange:e=>this.handleComponentValueChange(e,"blue")})),o("div",{key:"29ef67398fc1522c0564f62033039f77b49edc2b",class:"dnn-color-mode-switch"},o("button",{key:"d0367da5c40215fbd1f3eadf10dd6bca08a963a6",id:"rgb-switch",onClick:this.switchColorMode.bind(this),"aria-label":"switch to hexadecimal value entry"},o("svg",{key:"53cb5cdae4143c70e8240990d842ea4457d7ae14",xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},o("path",{key:"0271d81c2bd99e134803b4edab2a7272a6020d87",d:"M0 0h24v24H0z",fill:"none"}),o("path",{key:"d25d380ab10e7109238476344c6b5c638a4f96ca",d:"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"}))))),o("div",{key:"6698763d1fbb8d2c1da28e0d42f6be753b14c4c8",class:"dnn-hsl-color-fields",style:{display:this.hslDisplay}},o("div",{key:"28173e72c4e7fee625fca382b80f824b9488cfb7",class:"dnn-hsl-color-field"},o("label",{key:"dfdb1809df786e1ff923e8c3e3161f53654ba685"},"H"),o("input",{key:"d9e7c99eb2a50c938e6021bf49131309507e96b1",type:"number",min:"0",max:"359",step:1,value:Math.round(e),"aria-label":"Hue",onChange:e=>this.handleHSLChange(e,"hue")})),o("div",{key:"a4fdbdd1f043a550d1d0b8ab8a0b7f04994cf8d5",class:"dnn-hsl-color-field"},o("label",{key:"c96a8928f7f36e403e24938c5cec79aa74b00a25"},"S"),o("input",{key:"7c1bb89131a0cf7f3062f2e8cf73c14fd2932db8",type:"number",min:"0",max:"100",step:1,value:Math.round(n*100),"aria-label":"Saturation",onChange:e=>this.handleHSLChange(e,"saturation")})),o("div",{key:"067f8b87d94bb6e7d7a95ff043282b2e049898a0",class:"dnn-hsl-color-field"},o("label",{key:"f77c69f8e0fbef9b25692acca6ed5c3007a1b53c"},"L"),o("input",{key:"b65b95e1fd5926a44f83f219f2bb96c89c489a28",type:"number",min:"0",max:"100",step:1,value:Math.round(i*100),"aria-label":"Lightness",onChange:e=>this.handleHSLChange(e,"lightness")})),o("div",{key:"c0cfb39dcf480e86355a0c87e416fa054aa9f4e5",class:"dnn-color-mode-switch"},o("button",{key:"8c19afde9cfb3b8333a1313e55395b92f34dec2c",id:"hsl-switch",onClick:this.switchColorMode.bind(this),"aria-label":"Switch to red, green, blue entry mode"},o("svg",{key:"54ccf0a690d6e2a102c33a0dbc1d08cf99c11ed0",xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},o("path",{key:"87f25bab11448e091e4427a82e40e44956aa83a1",d:"M0 0h24v24H0z",fill:"none"}),o("path",{key:"3a83e2cf45ee881ae05fb73e2077289d73a140af",d:"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"}))))),o("div",{key:"0b7a592d2230136808b34ed36e5c84ee56328e53",class:"dnn-hex-color-fields",style:{display:this.hexDisplay}},o("div",{key:"aa832989de6451ea2abdb0cf5282a99b2ba0a6eb",class:"dnn-hex-color-field"},o("label",{key:"f5319d53261202307f5984172143e440995427e9"},"HEX"),o("div",{key:"e68434340c0b59d6fb24f0c509c861b948842b68",class:"hex-input"},o("input",{key:"fb40e1d785cfcc29b43a788d6ef9fd447ca01401",type:"text","aria-label":"Hexadecimal value",value:this.getHex(),onChange:e=>this.handleHexChange(e.target.value)}),o("button",{key:"e6a21c14dc0d7005d92538014031e6675becea5e",class:"copy","aria-label":"copy value"},o("svg",{key:"beb4d7d7f5a97f27db768b29e478949ba84a23d7",xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},o("path",{key:"3376034e2172767665169ad4476f025b97746665",d:"M0 0h24v24H0z",fill:"none"}),o("path",{key:"d0bbb664e9d5c77a9a5a9c155e90e4666b6168bf",d:"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"}))))),o("div",{key:"20aee791254a22327a58a8bc570c25cf0ea436a7",class:"dnn-color-mode-switch"},o("button",{key:"2b978bff44ce5a51461ed03d4f1df40c0e77c5af",id:"hex-switch",onClick:this.switchColorMode.bind(this),"aria-label":"Switch to hue saturation lightness values"},o("svg",{key:"34eef4f8d254a78519a8ce254d97fbc2f5d3c728",xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},o("path",{key:"dd50ec024953f5f09fd593f2fe181bcf220fd7a5",d:"M0 0h24v24H0z",fill:"none"}),o("path",{key:"5817f1b8f93fec23a215124272a084a4d7cef286",d:"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"}))))))))}get el(){return i(this)}static get watchers(){return{currentColor:["handeCurrentColorChanged"]}}};c([d(100)],a.prototype,"colorChangedHandler",null);a.style=r;export{a as dnn_color_picker};
-//# sourceMappingURL=p-69d5f883.entry.js.map
+//# sourceMappingURL=p-f4b5a8e5.entry.js.map

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9dbb7028.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2e9a98f.js';
 import { D as Debounce } from './debounce-0977f95e.js';
 
 const dnnAutocompleteCss = ":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}";
@@ -64,6 +64,7 @@ const DnnAutocomplete = class {
         this.renderSuggestion = undefined;
         this.totalSuggestions = undefined;
         this.preloadThresholdPixels = 1000;
+        this.autocomplete = "off";
         this.focused = false;
         this.valid = true;
         this.customValidityMessage = undefined;
@@ -257,12 +258,12 @@ const DnnAutocomplete = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '240eab18aec780b662642ce85ee68903c246cd8b', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("dnn-fieldset", { key: '7749d3b19d0cb7e6dc71f8deb9ff50bcea2390e0', ref: el => this.fieldset = el, invalid: !this.valid, focused: this.focused, label: `${(_a = this.label) !== null && _a !== void 0 ? _a : ""}${this.required ? " *" : ""}`, helpText: this.helpText, id: this.labelId, disabled: this.disabled, floatLabel: this.shouldLabelFloat() }, h("div", { key: 'fa9b987426ae9c70d583aead57f161c6cd53ef9f', class: "inner-container" }, h("input", { key: 'b5c0f2bf1f6cda9de03c5f6ddbe42605076bcb9e', ref: (el) => this.inputField = el, name: this.name, type: "search", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.focused.toString(), "aria-activedescendant": this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined, disabled: this.disabled, required: this.required, autoComplete: "off", value: this.displayValue, onFocus: () => {
+        return (h(Host, { key: '10a0264ebae498078dbfc3fbd6ffa1a2a1b50c0e', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("dnn-fieldset", { key: '8f2426b397ba4001ed65255f58878176441950dc', ref: el => this.fieldset = el, invalid: !this.valid, focused: this.focused, label: `${(_a = this.label) !== null && _a !== void 0 ? _a : ""}${this.required ? " *" : ""}`, helpText: this.helpText, id: this.labelId, disabled: this.disabled, floatLabel: this.shouldLabelFloat() }, h("div", { key: 'fad1d2e8567163f4dcea423fe71eacc157fcc350', class: "inner-container" }, h("input", { key: 'bffb6ee3cbee67db6e280f29092ead301e75f8e8', ref: (el) => this.inputField = el, name: this.name, type: "search", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.focused.toString(), "aria-activedescendant": this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined, disabled: this.disabled, required: this.required, autoComplete: this.autocomplete, value: this.displayValue, onFocus: () => {
                 this.searchQueryChanged.emit(this.value || "");
                 this.focused = true;
-            }, onBlur: () => this.handleBlur(), onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId, onKeyDown: e => this.handleKeyDown(e) }), h("ul", { key: 'f6f2688374ab8f18db055ccbeb43e08cae06c07b', class: this.focused && this.suggestions.length > 0 ? "show" : "", role: "listbox", ref: el => this.suggestionsContainer = el, onScroll: () => this.handleSuggestionsScroll() }, this.suggestions.map((suggestion, index) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": this.selectedIndex == index, class: this.selectedIndex == index ? "selected" : "", onClick: e => this.selectItem(e, index) }, this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label))), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&
-            h("div", { key: '681a43c03121d04e40295c2a84294dfa38304ec8', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
-            h("div", { key: '35e49fff8bd725da4bb1022db932fd5554daad88', style: { height: `${this.getVirtualScrollHeight()}px` } })), h("svg", { key: '7d789d7b160a1a6d8b8a66cc40c714563f39a5e6', onClick: () => this.handleDropdownClick(), class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: 'b542a9084a33294671fbfdd3f8f5388df89a7abc', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
+            }, onBlur: () => this.handleBlur(), onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId, onKeyDown: e => this.handleKeyDown(e) }), h("ul", { key: '1cffdc6b12d2337cc89448fd232ca453700e655d', class: this.focused && this.suggestions.length > 0 ? "show" : "", role: "listbox", ref: el => this.suggestionsContainer = el, onScroll: () => this.handleSuggestionsScroll() }, this.suggestions.map((suggestion, index) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": this.selectedIndex == index, class: this.selectedIndex == index ? "selected" : "", onClick: e => this.selectItem(e, index) }, this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label))), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&
+            h("div", { key: '2a7bd6440f9d71a11aa44a4ed2ce444c6efced35', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
+            h("div", { key: '2c7b5655893711bb51fffb97f911308ac6d144ed', style: { height: `${this.getVirtualScrollHeight()}px` } })), h("svg", { key: '55452717a72e3d597bb40ed934db19dbb8ddfd6f', onClick: () => this.handleDropdownClick(), class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: 'e26905040e49403c2bd55c893858eefa4d4d470a', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
     }
     static get formAssociated() { return true; }
     get element() { return getElement(this); }

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

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

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9dbb7028.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2e9a98f.js';
 
 const dnnButtonCss = ":host{--background-color:transparent;--color:#333;--border-size:1px;--border-color:var(--backround-color);--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);display:inline-block;width:auto}:host(.primary){--background-color:var(--dnn-color-primary, #3792ED);--color:var(--dnn-color-primary-contrast, white);--focus-color:var(--background-color)}:host(.primary.reversed){--background-color:var(--dnn-color-primary-contrast, white);--color:var(--dnn-color-primary, #3792ED);--border-color:var(--dnn-color-primary, #3792ED);--focus-color:var(--color)}:host(.secondary){--background-color:var(--dnn-color-secondary, #CCC);--color:var(--dnn-color-secondary-contrast, #222);--focus-color:var(--background-color)}:host(.secondary.reversed){--background-color:var(--dnn-color-secondary-contrast, #222);--color:var(--dnn-color-secondary, #CCC);--border-color:var(--dnn-color-secondary, #CCC);--focus-color:var(--color)}:host(.danger){--background-color:var(--dnn-color-danger, #dc3545);--color:var(--dnn-color-danger-contrast,white);--focus-color:var(--background-color)}:host(.danger.reversed){--background-color:var(--dnn-color-danger-contrast, white);--color:var(--dnn-color-danger, #dc3545);--border-color:var(--dnn-color-danger, #dc3545);--focus-color:var(--color)}:host(.tertiary){--background-color:var(--dnn-color-tertiary, #EAEAEA);--color:var(--dnn-color-tertiary-contrast, black);--focus-color:var(--background-color)}:host(.tertiary.reversed){--background-color:var(--dnn-color-tertiary-contrast, #333);--color:var(--dnn-color-tertiary, #EAEAEA);--border-color:var(--dnn-color-tertiary, #EAEAEA);--focus-color:var(--color)}:host(.hydrated) button{border:var(--border-size) solid var(--border-color);border-radius:var(--border-radius);padding:var(--padding) calc(var(--padding) * 2);background-color:transparent;background-color:var(--background-color);color:var(--color);outline:none}:host(.hydrated) button:focus-visible,:host(.hydrated) button:hover{box-shadow:0 0 2px 2px var(--focus-color)}:host(.disabled){position:relative;filter:saturate(0.5) opacity(0.7);pointer-events:all !important;box-shadow:none}:host(.disabled)::after{cursor:not-allowed;content:\"\";position:absolute;width:100%;height:100%;top:0px;left:0px}:host(.small) button{padding:calc(var(--padding) / 2) var(--padding);font-size:0.7em}:host(.large) button{padding:calc(var(--padding) * 1.5) calc(var(--padding) * 3);font-size:1.2em}button{height:100%;width:100%;cursor:pointer}";
 const DnnButtonStyle0 = dnnButtonCss;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9dbb7028.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2e9a98f.js';
 
 const dnnCheckboxCss = ":host{--focus-color:var(--dnn-color-primary, #3792ED);display:inline-flex;align-items:center;gap:0.25rem;margin:3px}button{cursor:pointer;background-color:transparent;border:0;padding:0;margin:0;outline:none;display:flex;justify-content:center;align-items:center}button .unchecked,button .checked,button .intermediate{display:none}button.checked .checked,button.unchecked .unchecked,button.intermediate .intermediate{display:block}button svg.undefined{opacity:0.45;cursor:default}button:focus-visible{box-shadow:0 0 2px 2px var(--focus-color)}label{cursor:pointer}";
 const DnnCheckboxStyle0 = dnnCheckboxCss;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-9dbb7028.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-a2e9a98f.js';
 
 const dnnChevronCss = ":host{display:inline-block}button{cursor:pointer;border:none;padding:0px;margin:0px;min-width:15px;min-height:15px;display:flex;justify-content:center;align-items:center;background-color:transparent}svg{height:2em;width:2em;transition:all 300ms ease-in-out}button:focus-visible svg,button:hover svg{color:var(--dnn-color-primary)}:host([expanded]) svg{transform:rotate(90deg)}";
 const DnnChevronStyle0 = dnnChevronCss;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9dbb7028.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2e9a98f.js';
 
 const dnnCollapsibleCss = ":host{display:block}#container{max-height:0;overflow:hidden;transition:max-height 300ms ease-in-out}";
 const DnnCollapsibleStyle0 = dnnCollapsibleCss;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-9dbb7028.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-a2e9a98f.js';
 import { g as generateRandomId } from './stringUtilities-b220cf3a.js';
 
 const dnnColorInputCss = ":host{display:inline-block;--foreground:var(--dnn-color-foreground, #000);--background:var(--dnn-color-background, #fff);--focus-color:var(--dnn-color-primary, #3792ED);--control-radius:var(--dnn-controls-radius, 3px);--contast-text-align:left}dnn-fieldset{width:100%}.inner-container{display:flex;justify-content:space-between;position:relative;width:100%;background-color:var(--background)}button{margin:0 0 0 1em;padding:0;border:none;background-color:transparent;width:1em;height:1em}button svg{fill:var(--dnn-color-primary);transform:scale(1.5)}.color-preview{min-height:1em;min-width:10em;display:flex;width:100%;position:relative}.color-preview>div{flex:1}.color-preview .contrast{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:space-around;align-items:center}.color-preview .contrast hr{min-width:1em;border-width:0.1em 0 0.1em 0;border-style:solid}h3{text-align:center}.modal-content{margin:0.5em}.controls{display:flex;justify-content:space-between;margin-top:1em}";

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9dbb7028.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2e9a98f.js';
 import { D as Debounce } from './debounce-0977f95e.js';
 
 /** Color utility class with hsl and rgb converters

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-9dbb7028.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-a2e9a98f.js';
 import { a as getReadableFileSizeString } from './stringUtilities-b220cf3a.js';
 
 const dnnDropzoneCss = ":host{--border-color:var(--dnn-color-tertiary-contrast, lightgray);--border-radius:var(--dnn-controls-radius, 5px);--drop-background-color:var(--dnn-color-tertiary, lightblue);display:flex;flex-direction:column;gap:1rem;text-align:center;border:2px dashed var(--border-color);border-radius:var(--border-radius);padding:1rem;transition:all 300ms ease-in-out}:host(.dropping){background-color:var(--drop-background-color)}p{margin:0;padding:0}button{display:flex;justify-content:center;align-items:center;border:0px;margin:0;padding:0;background-color:transparent}button:hover{cursor:pointer}button svg{margin-right:0.5rem}label.upload-file{display:flex;justify-content:center;align-items:center;cursor:pointer}label.upload-file input{display:none}.video-preview{display:flex;flex-direction:column;align-items:center}.video-preview button{margin:1rem}.error{color:red}";

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-9dbb7028.js';
+import { r as registerInstance, h, H as Host } from './index-a2e9a98f.js';
 
 const dnnFieldsetCss = ":host{display:inline-block;--fieldset-foreground:var(--dnn-color-foreground, #000);--fieldset-background:var(--dnn-color-background, #fff);--fieldset-focus-color:var(--dnn-color-primary, #3792ED);--fieldset-danger-color:var(--dnn-color-danger, #900);--fieldset-control-radius:var(--dnn-controls-radius, 3px)}.container{border:1px solid var(--fieldset-foreground, #000);border-radius:var(--fieldset-control-radius, 3px);padding:0.75em;display:flex;justify-content:space-between;gap:0.1em;position:relative;background-color:var(--fieldset-background);margin-top:1em;line-height:1em}.container .resizer{width:100%}.container .inner-container{position:relative;width:100%;background-color:var(--fieldset-background);height:calc(100% - 1em)}.container label{display:inline-flex;position:absolute;opacity:1;transition:all 150ms ease-in-out;left:0.5em;top:-1.5em;padding:0 0.5em;background-color:var(--fieldset-background);white-space:nowrap;max-width:100%;border-radius:var(--fieldset-control-radius);font-size:1em;margin-top:1em;z-index:1;pointer-events:none;line-height:1em}.container.focused{border:1px solid var(--fieldset-focus-color);box-shadow:0 0 0 1px var(--fieldset-focus-color)}.container.focused.invalid{border:1px solid var(--fieldset-danger-color);box-shadow:0 0 0 1px var(--fieldset-danger-color)}.container.focused input{color:var(--fieldset-foreground, #000)}.container.float-label label{opacity:0.6;left:0;top:calc(50% - 0.5em);margin-top:0}.container.disabled{opacity:0.5}.container.invalid{border-color:var(--fieldset-danger-color)}.help-text,.error-message{font-style:italic;opacity:0.7;font-size:0.8em;margin:0.25em}.error-message{color:var(--fieldset-danger-color);font-style:normal;font-weight:bold}";
 const DnnFieldsetStyle0 = dnnFieldsetCss;

package/dist/esm/dnn-image-cropper.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9dbb7028.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2e9a98f.js';
 import { g as getMovementFromEvent } from './mouseUtilities-e70a0dc3.js';
 
 var CornerType;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-9dbb7028.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-a2e9a98f.js';
 import { g as generateRandomId } from './stringUtilities-b220cf3a.js';
 
 const dnnInputCss = ":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);--input-text-align:left}dnn-fieldset{width:100%}.inner-container{display:flex;justify-content:space-between;position:relative;width:100%}input{border:none;outline:none;background-color:transparent;color:var(--foreground);text-align:var(--input-text-align);width:100%}.prefix,.suffix{font-size:0.8em}svg.error{fill:red;width:1em;height:1em;transform:scale(1.5);margin-right:0.5em}button.show-password{border:none;background-color:transparent;margin:0;padding:0}button.show-password svg{height:1em;width:auto;fill:var(--foreground);transform:scale(1.5)}";
@@ -34,6 +34,7 @@ const DnnInput = class {
         this.step = undefined;
         this.disableValidityReporting = undefined;
         this.allowShowPassword = undefined;
+        this.inputmode = undefined;
         this.focused = false;
         this.valid = true;
     }
@@ -61,9 +62,11 @@ const DnnInput = class {
         this.labelId = generateRandomId();
     }
     componentDidLoad() {
-        var validity = this.inputField.validity;
-        var validityMessage = validity.valid ? "" : this.inputField.validationMessage;
-        this.internals.setValidity(this.inputField.validity, validityMessage);
+        requestAnimationFrame(() => {
+            var validity = this.inputField.validity;
+            var validityMessage = validity.valid ? "" : this.inputField.validationMessage;
+            this.internals.setValidity(this.inputField.validity, validityMessage);
+        });
     }
     // eslint-disable-next-line @stencil-community/own-methods-must-be-private
     formResetCallback() {
@@ -72,7 +75,12 @@ const DnnInput = class {
         this.internals.setValidity({});
         this.internals.setFormValue("");
     }
-    handleInput(value) {
+    handleInput(e) {
+        if (this.type === "number" && e.data === "-") {
+            // Ignore the minus sign if the input type is number
+            return;
+        }
+        var value = e.target.value;
         this.value = value;
         var valid = this.inputField.checkValidity();
         this.valid = valid;
@@ -110,8 +118,37 @@ const DnnInput = class {
         if (this.type == "date" || this.type == "datetime-local" || this.type == "time") {
             return false;
         }
+        if (this.value == 0) {
+            return false;
+        }
         return true;
     }
+    getInputMode() {
+        var _a;
+        if (this.inputmode != undefined) {
+            return this.inputmode;
+        }
+        if (this.type === "number") {
+            var min = parseFloat((_a = this.min) === null || _a === void 0 ? void 0 : _a.toString());
+            if ((this.step === 1 || this.step == undefined) && min >= 0) {
+                return "numeric";
+            }
+            return "decimal";
+        }
+        if (this.type === "tel") {
+            return "tel";
+        }
+        if (this.type === "url") {
+            return "url";
+        }
+        if (this.type === "email") {
+            return "email";
+        }
+        if (this.type === "search") {
+            return "search";
+        }
+        return "text";
+    }
     handleBlur() {
         this.focused = false;
         var validity = this.inputField.checkValidity();
@@ -121,13 +158,13 @@ const DnnInput = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '75a60d744c7321a21e8be2eb5e1e96ed61e81c0e', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("dnn-fieldset", { key: '1dd7ccc6c05d28be7c850117f7f93e7356e44e0b', 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(), onClick: () => !this.focused && this.inputField.focus(), onFocus: () => this.focused = true, onBlur: () => this.focused = false }, h("div", { key: '0e320d003cfe21a25592d59ca0832c8d5de434c2', class: "inner-container" }, !this.shouldLabelFloat() &&
-            h("slot", { key: '9c7d840d04ad9e1e2e9044e535b231727cd7d56f', name: "prefix" }), h("input", { key: 'ed6c75cea2c9bad544c79312e47131854fdab612', ref: el => this.inputField = el, name: this.name, type: this.type, disabled: this.disabled, required: this.required, autoComplete: this.autocomplete, min: this.min, max: this.max, minlength: this.minlength, maxlength: this.maxlength, multiple: this.multiple, pattern: this.pattern, readonly: this.readonly, step: this.step, value: this.value, onBlur: () => this.handleBlur(), onFocus: () => this.focused = true, onInput: e => this.handleInput(e.target.value), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId }), !this.shouldLabelFloat() &&
-            h("slot", { key: '442d4adb37d95742d797c976175f4f1bc5f9fe86', name: "suffix" }), !this.valid &&
-            h("svg", { key: 'f95905a8e402cc4689afd686f52d2a151236a221', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", class: "error" }, h("path", { key: 'ca7cb76e9df70463206a747bbd9ac1be20e2515b', d: "M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z" })), this.allowShowPassword &&
-            h("button", { key: '531517334b451784cd98de67ba24dad5c902afc6', class: "show-password", onClick: () => this.switchPasswordVisibility() }, this.type === "text" &&
-                h("svg", { key: '8b0a02d79dc816d4969eab39a19c33b625f72b28', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: '3b4965787039c15525ed55b7aff8640a3bf48792', d: "M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z" })), this.type == "password" &&
-                h("svg", { key: '87f2176b428c9ca9260b1ea7e2ce5ed6beae219c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: '8acc664162e4b7039f3997949747e17c5def279c', d: "m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z" })))))));
+        return (h(Host, { key: 'aa5f465e99921edf4ad72d43850a4ec61db82b63', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("dnn-fieldset", { key: 'efcc3fdef3112c4bc6b9849791a7c14e73db6f26', 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(), onClick: () => !this.focused && this.inputField.focus(), onFocus: () => this.focused = true, onBlur: () => this.focused = false }, h("div", { key: '3960d9d47543b176a7abc3b52a0fbc3cb25dd6d7', class: "inner-container" }, !this.shouldLabelFloat() &&
+            h("slot", { key: 'aa73dcac6b35e52e990671aba538534f9637f4bc', name: "prefix" }), h("input", { key: '6d3ef61fb96cd9a8700692fd106c2229ace40de8', ref: el => this.inputField = el, name: this.name, type: this.type, inputMode: this.getInputMode(), disabled: this.disabled, required: this.required, autoComplete: this.autocomplete, min: this.min, max: this.max, minlength: this.minlength, maxlength: this.maxlength, multiple: this.multiple, pattern: this.pattern, readonly: this.readonly, step: this.step, value: this.value, onBlur: () => this.handleBlur(), onFocus: () => this.focused = true, onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId }), !this.shouldLabelFloat() &&
+            h("slot", { key: 'b42b82778454152f5e394da35a4e374a7ad31f8b', name: "suffix" }), !this.valid &&
+            h("svg", { key: '86e5d273012f84ef4f88bfd1fcaada9450737d51', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", class: "error" }, h("path", { key: 'c55968eccc7276acce97d684c1a181c1fd005c4d', d: "M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z" })), this.allowShowPassword &&
+            h("button", { key: '8b033447cb43f4df5db1c4ee1b1affe49cb89c36', class: "show-password", onClick: () => this.switchPasswordVisibility() }, this.type === "text" &&
+                h("svg", { key: '394e8dec6a0fea4e35d96fb303357de90098751b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: '2bdeca00b1eb9617b77604fad342508350c6b1c0', d: "M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z" })), this.type == "password" &&
+                h("svg", { key: 'c2cc6007de544b80a8d4ed669df52cbd85f64c7e', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: 'a16287a7c27e992407f873538b3a01d302ae8a0a', d: "m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z" })))))));
     }
     static get formAssociated() { return true; }
 };

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

@@ -1 +1 @@
-{"file":"dnn-input.entry.js","mappings":"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","names":[],"sources":["src/components/dnn-input/dnn-input.scss?tag=dnn-input&encapsulation=shadow","src/components/dnn-input/dnn-input.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  /** @prop --input-text-align: Allows customizing the text alignment of the input text. */\n  --input-text-align: left;\n}\n\ndnn-fieldset{\n  width: 100%;\n}\n\n.inner-container{\n  display: flex;\n  justify-content: space-between;\n  position: relative;\n  width: 100%;\n}\ninput{\n  border: none;\n  outline: none;\n  background-color: transparent;\n  color: var(--foreground);\n  text-align: var(--input-text-align);\n  width: 100%;\n}\n\n.prefix, .suffix{\n  font-size: 0.8em;\n}\nsvg{\n  &.error{\n    fill: red;\n    width: 1em;\n    height: 1em;\n    transform: scale(1.5);\n    margin-right: 0.5em;\n  }\n}\nbutton.show-password{\n  border: none;\n  background-color: transparent;\n  margin: 0;\n  padding: 0;\n  svg{\n    height: 1em;\n    width: auto;\n    fill: var(--foreground);\n    transform: scale(1.5);\n  }\n}","import { Component, Host, Prop, State, h, Method, Event, EventEmitter, AttachInternals } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n/** A custom input component that wraps the html input element is a mobile friendly component that supports a label, some help text and other features.\n * @slot prefix - Can be used to inject content before the input field.\n * @slot suffix - Can be used to inject content after the input field.\n */\n@Component({\n  tag: 'dnn-input',\n  styleUrl: 'dnn-input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DnnInput {\n\n  /** The input type, supports most of html standard input type, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types. */\n  @Prop({mutable: true}) type: \"date\" | \"datetime-local\" | \"email\" | \"number\" | \"password\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"search\" = \"text\";\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  /** The value of the input. */\n  @Prop({mutable: true, reflect:true}) value: number | string | 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 allowed value. */\n  @Prop() min: number | string;\n\n  /** Defines the maximum allowed value. */\n  @Prop() max: number | string;\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  /** If true, allows multiple emails to be entered separated by commas. */\n  @Prop() multiple: boolean;\n\n  /** Valid for text, search, url, tel, email, and password, the pattern attribute defines a regular expression that the input's value must match in order for the value to pass constraint validation. */\n  @Prop() pattern: string;\n\n  /** Defines wheter the defined value is readonly. */\n  @Prop() readonly: boolean;\n\n  /** Defines the possible steps for numbers and dates/times. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#step */\n  @Prop() step: string | number;\n\n  /** @deprecated This control has it's own validation reporting, will be removed in v0.25.0 */\n  @Prop() disableValidityReporting: boolean;\n\n  /** If true, enables users to switch between a password and a text field (to view their password). */\n  @Prop() allowShowPassword: boolean;\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  /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n  @Method()\n  async checkValidity(): Promise<ValidityState> {\n    var validity = this.inputField.checkValidity();\n    if (!validity) {\n      this.fieldset.setValidity(false, this.inputField.validationMessage);\n    }\n    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  \n  @AttachInternals() internals: ElementInternals;\n  \n  private inputField!: HTMLInputElement;\n  private fieldset: HTMLDnnFieldsetElement;\n  private labelId: string;\n\n  componentWillLoad() {\n    this.labelId = generateRandomId();\n  }\n\n  componentDidLoad() {\n    var validity = this.inputField.validity;\n    var validityMessage = validity.valid ? \"\" : this.inputField.validationMessage;\n    this.internals.setValidity(this.inputField.validity, validityMessage);\n  }\n\n  // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n  formResetCallback() {\n    this.inputField.setCustomValidity(\"\");\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.inputField.checkValidity();\n    this.valid = valid;\n    this.valueInput.emit(this.value);\n  }\n\n  private handleInvalid(): void {\n    this.fieldset.setValidity(false, this.inputField.validationMessage);\n    this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n  }\n\n  private handleChange() {\n    this.valueChange.emit(this.value);\n    if (this.name != undefined){\n      var data = new FormData();\n      data.append(this.name, this.value.toString());\n      this.internals.setFormValue(data);\n    }\n  }\n\n  private switchPasswordVisibility(){\n    if (this.type === \"password\" )\n    {\n      this.type = \"text\";\n      return;\n    }\n    if (this.type === \"text\")\n    {\n      this.type = \"password\";\n      return;\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    if (this.type == \"date\" || this.type == \"datetime-local\" || this.type == \"time\") {\n      return false;\n    }\n    \n    return true;\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          onClick={() => !this.focused && this.inputField.focus()}\n          onFocus={() => this.focused = true}\n          onBlur={() => this.focused = false}\n        >\n          <div class=\"inner-container\">\n            {!this.shouldLabelFloat() &&\n              <slot name=\"prefix\"></slot>\n            }\n            <input\n              ref={el => this.inputField = el}\n              name={this.name}\n              type={this.type}\n              disabled={this.disabled}\n              required={this.required}\n              autoComplete={this.autocomplete}\n              min={this.min}\n              max={this.max}\n              minlength={this.minlength}\n              maxlength={this.maxlength}\n              multiple={this.multiple}\n              pattern={this.pattern}\n              readonly={this.readonly}\n              step={this.step}\n              value={this.value}\n              onBlur={() => this.handleBlur()}\n              onFocus={() => this.focused = true}\n              onInput={e => this.handleInput((e.target as HTMLInputElement).value)}\n              onInvalid={() => this.handleInvalid()}\n              onChange={() => this.handleChange()}\n              aria-labelledby={this.labelId}\n            />\n            {!this.shouldLabelFloat() &&\n              <slot name=\"suffix\"></slot>\n            }\n            {!this.valid &&\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"error\">\n                <path d=\"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z\"/>\n              </svg>\n            }\n            {this.allowShowPassword &&\n              <button class=\"show-password\" onClick={() => this.switchPasswordVisibility()}>\n                {this.type === \"text\" &&\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\">\n                    <path d=\"M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z\"/>\n                  </svg>\n                }\n                {this.type == \"password\" &&\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\">\n                    <path d=\"m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z\"/>\n                  </svg>\n                }\n              </button>\n            }\n          </div>\n        </dnn-fieldset>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"dnn-input.entry.js","mappings":"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","names":[],"sources":["src/components/dnn-input/dnn-input.scss?tag=dnn-input&encapsulation=shadow","src/components/dnn-input/dnn-input.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  /** @prop --input-text-align: Allows customizing the text alignment of the input text. */\n  --input-text-align: left;\n}\n\ndnn-fieldset{\n  width: 100%;\n}\n\n.inner-container{\n  display: flex;\n  justify-content: space-between;\n  position: relative;\n  width: 100%;\n}\ninput{\n  border: none;\n  outline: none;\n  background-color: transparent;\n  color: var(--foreground);\n  text-align: var(--input-text-align);\n  width: 100%;\n}\n\n.prefix, .suffix{\n  font-size: 0.8em;\n}\nsvg{\n  &.error{\n    fill: red;\n    width: 1em;\n    height: 1em;\n    transform: scale(1.5);\n    margin-right: 0.5em;\n  }\n}\nbutton.show-password{\n  border: none;\n  background-color: transparent;\n  margin: 0;\n  padding: 0;\n  svg{\n    height: 1em;\n    width: auto;\n    fill: var(--foreground);\n    transform: scale(1.5);\n  }\n}","import { Component, Host, Prop, State, h, Method, Event, EventEmitter, AttachInternals } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n/** A custom input component that wraps the html input element is a mobile friendly component that supports a label, some help text and other features.\n * @slot prefix - Can be used to inject content before the input field.\n * @slot suffix - Can be used to inject content after the input field.\n */\n@Component({\n  tag: 'dnn-input',\n  styleUrl: 'dnn-input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DnnInput {\n\n  /** The input type, supports most of html standard input type, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types. */\n  @Prop({mutable: true}) type: \"date\" | \"datetime-local\" | \"email\" | \"number\" | \"password\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"search\" = \"text\";\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  /** The value of the input. */\n  @Prop({mutable: true, reflect:true}) value: number | string | 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 allowed value. */\n  @Prop() min: number | string;\n\n  /** Defines the maximum allowed value. */\n  @Prop() max: number | string;\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  /** If true, allows multiple emails to be entered separated by commas. */\n  @Prop() multiple: boolean;\n\n  /** Valid for text, search, url, tel, email, and password, the pattern attribute defines a regular expression that the input's value must match in order for the value to pass constraint validation. */\n  @Prop() pattern: string;\n\n  /** Defines wheter the defined value is readonly. */\n  @Prop() readonly: boolean;\n\n  /** Defines the possible steps for numbers and dates/times. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#step */\n  @Prop() step: string | number;\n\n  /** @deprecated This control has it's own validation reporting, will be removed in v0.25.0 */\n  @Prop() disableValidityReporting: boolean;\n\n  /** If true, enables users to switch between a password and a text field (to view their password). */\n  @Prop() allowShowPassword: boolean;\n\n  /** Hints at the type of data that might be entered by the user while editing the element or its contents.\n   * This allows a browser to display an appropriate virtual keyboard.\n   */\n  @Prop() inputmode: \"none\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | \"search\";\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  /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */\n  @Method()\n  async checkValidity(): Promise<ValidityState> {\n    var validity = this.inputField.checkValidity();\n    if (!validity) {\n      this.fieldset.setValidity(false, this.inputField.validationMessage);\n    }\n    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  \n  @AttachInternals() internals: ElementInternals;\n  \n  private inputField!: HTMLInputElement;\n  private fieldset: HTMLDnnFieldsetElement;\n  private labelId: string;\n\n  componentWillLoad() {\n    this.labelId = generateRandomId();\n  }\n\n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      var validity = this.inputField.validity;\n      var validityMessage = validity.valid ? \"\" : this.inputField.validationMessage;\n      this.internals.setValidity(this.inputField.validity, validityMessage);\n    });\n  }\n\n  // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n  formResetCallback() {\n    this.inputField.setCustomValidity(\"\");\n    this.value = \"\";\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n\n  private handleInput(e: InputEvent): void {\n    if (this.type === \"number\" && e.data === \"-\") {\n      // Ignore the minus sign if the input type is number\n      return;\n    }\n    var value = (e.target as HTMLInputElement).value;\n    this.value = value;\n    var valid = this.inputField.checkValidity();\n    this.valid = valid;\n    this.valueInput.emit(this.value);\n  }\n\n  private handleInvalid(): void {\n    this.fieldset.setValidity(false, this.inputField.validationMessage);\n    this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n  }\n\n  private handleChange() {\n    this.valueChange.emit(this.value);\n    if (this.name != undefined){\n      var data = new FormData();\n      data.append(this.name, this.value.toString());\n      this.internals.setFormValue(data);\n    }\n  }\n\n  private switchPasswordVisibility(){\n    if (this.type === \"password\" )\n    {\n      this.type = \"text\";\n      return;\n    }\n    if (this.type === \"text\")\n    {\n      this.type = \"password\";\n      return;\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    if (this.type == \"date\" || this.type == \"datetime-local\" || this.type == \"time\") {\n      return false;\n    }\n\n    if (this.value == 0){\n      return false;\n    }\n    \n    return true;\n  }\n\n  private getInputMode(): string {\n    if (this.inputmode != undefined) {\n      return this.inputmode;\n    }\n\n    if (this.type === \"number\") {\n      var min = parseFloat(this.min?.toString());\n      if ((this.step === 1 || this.step == undefined) && min >= 0) {\n        return \"numeric\";\n      }\n\n      return \"decimal\";\n    }\n\n    if (this.type === \"tel\") {\n      return \"tel\";\n    }\n\n    if (this.type === \"url\") {\n      return \"url\";\n    }\n\n    if (this.type === \"email\") {\n      return \"email\";\n    }\n\n    if (this.type === \"search\") {\n      return \"search\";\n    }\n\n    return \"text\";\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          onClick={() => !this.focused && this.inputField.focus()}\n          onFocus={() => this.focused = true}\n          onBlur={() => this.focused = false}\n        >\n          <div class=\"inner-container\">\n            {!this.shouldLabelFloat() &&\n              <slot name=\"prefix\"></slot>\n            }\n            <input\n              ref={el => this.inputField = el}\n              name={this.name}\n              type={this.type}\n              inputMode={this.getInputMode()}\n              disabled={this.disabled}\n              required={this.required}\n              autoComplete={this.autocomplete}\n              min={this.min}\n              max={this.max}\n              minlength={this.minlength}\n              maxlength={this.maxlength}\n              multiple={this.multiple}\n              pattern={this.pattern}\n              readonly={this.readonly}\n              step={this.step}\n              value={this.value}\n              onBlur={() => this.handleBlur()}\n              onFocus={() => this.focused = true}\n              onInput={e => this.handleInput(e)}\n              onInvalid={() => this.handleInvalid()}\n              onChange={() => this.handleChange()}\n              aria-labelledby={this.labelId}\n            />\n            {!this.shouldLabelFloat() &&\n              <slot name=\"suffix\"></slot>\n            }\n            {!this.valid &&\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"error\">\n                <path d=\"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z\"/>\n              </svg>\n            }\n            {this.allowShowPassword &&\n              <button class=\"show-password\" onClick={() => this.switchPasswordVisibility()}>\n                {this.type === \"text\" &&\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\">\n                    <path d=\"M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z\"/>\n                  </svg>\n                }\n                {this.type == \"password\" &&\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\">\n                    <path d=\"m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z\"/>\n                  </svg>\n                }\n              </button>\n            }\n          </div>\n        </dnn-fieldset>\n      </Host>\n    );\n  }  \n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9dbb7028.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2e9a98f.js';
 
 const dnnModalCss = ":host{display:block}:host .overlay{background-color:rgba(0, 0, 0, 0.5);position:fixed;top:0;left:0;width:100%;height:100%;z-index:1002;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(2px);transition:all 300ms ease-in-out;visibility:hidden;opacity:0}:host .overlay .modal{max-width:var(--max-width, 1200px);background-color:white;padding:30px;transform:scale(2);transition:transform 300ms ease-in-out;z-index:2;position:relative;max-height:80%;border-radius:var(--dnn-controls-radius, 5px);box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);display:block}:host .overlay .modal .content{max-width:80vw;max-height:80vh;overflow:auto}:host .overlay .modal .se{position:absolute;height:10px;width:10px;bottom:-5px;right:-5px;cursor:se-resize}:host .overlay .modal .close{position:absolute;background-color:white;border:2px solid white;border-radius:50%;padding:0;margin:0;top:-12px;right:-12px;outline:none;display:flex;justify-content:center;align-items:center}:host .overlay .modal .close:focus-visible,:host .overlay .modal .close:hover{box-shadow:0 0 2px 2px var(--dnn-color-primary, blue)}:host .overlay .modal .close svg{width:24px;height:24px;color:grey}:host .overlay.visible{visibility:visible;opacity:1}:host .overlay.visible .modal{transform:scale(1);box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);display:block}";
 const DnnModalStyle0 = dnnModalCss;

package/dist/esm/dnn-monaco-editor.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-9dbb7028.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-a2e9a98f.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 

package/dist/esm/dnn-permissions-grid.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-9dbb7028.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-a2e9a98f.js';
 
 const dnnPermissionsGridCss = ":host{display:block}.add-role-row{display:flex;gap:1em;align-items:center;flex-wrap:wrap}.add-role-row label{margin-right:0.5em}.search-user{display:flex;gap:1em;margin-top:1em}.search-user .search-control{position:relative}.search-user .search-control dnn-collapsible{position:absolute;left:0;top:calc(100% - 2px);width:100%;box-shadow:0px 4px 4px}.search-user .search-control dnn-collapsible .dropdown{background-color:white;border:1px solid lightgray;display:flex;flex-direction:column}.search-user .search-control dnn-collapsible .dropdown button{background-color:transparent;border:none;border-bottom:1px solid lightgray;padding:0.25em;margin:0;text-align:left}table{border:1px solid lightgray;border-collapse:collapse;margin-top:1em}table thead{text-align:center}table thead tr{border-bottom:1px solid lightgray}table thead th{background-color:lightgray;padding:0.25em 0.5em}table thead th:first-child{border-right:1px solid lightgray}table tbody tr{border-bottom:1px dotted lightgray}table tbody tr th{text-align:left;border-right:1px solid lightgray;padding:0 0.5em}table tbody tr td{text-align:center}table tbody tr td label .hidden{display:none}table tbody tr td button{background-color:transparent;border:0;padding:0;margin:0;margin-right:1em}";
 const DnnPermissionsGridStyle0 = dnnPermissionsGridCss;

package/dist/esm/dnn-progress-bar.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-9dbb7028.js';
+import { r as registerInstance, h, H as Host } from './index-a2e9a98f.js';
 
 const dnnProgressBarCss = ":host{--min-width:160px;--height:2rem;--background-color:var(--dnn-color-neutral-light, #eee);--value-background-color:var(--dnn-color-primary, green);--gradient-color-start:var(--dnn-color-primary, #09c);--gradient-color-end:var(--dnn-color-primary-light, #f44);--gradient-direction:left;--border-radius:var(--dnn-controls-radius, 5px);display:inline-block}:host progress{height:var(--height);min-width:var(--min-width);width:100%}:host progress[value]{-webkit-appearance:none;appearance:none}:host progress[value]::-webkit-progress-bar{background-color:var(--background-color);border-radius:var(--border-radius);box-shadow:0 2px 5px rgba(0, 0, 0, 0.25) inset}:host progress[value]::-webkit-progress-value{border-radius:var(--border-radius);background-color:var(--value-background-color);background-size:calc(var(--height) * 1.75) var(--height), 100% 100%, 100% 100%}:host progress[value].use-gradient::-webkit-progress-value{background-image:-webkit-linear-gradient(-45deg, transparent 33%, rgba(255, 255, 255, 0.2) 33%, rgba(255, 255, 255, 0.2) 66%, transparent 66%), -webkit-linear-gradient(var(--gradient-direction), var(--gradient-color-start), var(--gradient-color-end));border-radius:var(--border-radius);background-size:calc(var(--height) * 1.75) var(--height), 100% 100%, 100% 100%}";
 const DnnProgressBarStyle0 = dnnProgressBarCss;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9dbb7028.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2e9a98f.js';
 import { d as decodeHtml } from './stringUtilities-b220cf3a.js';
 
 /*!

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-9dbb7028.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-a2e9a98f.js';
 
 const dnnSearchboxCss = ":host{position:relative;display:flex;justify-content:space-between;--background-color:transparent;--color:#333;--border-size:1px;--border-color:grey;--border-active-color:black;--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);--focus-color:var(--dnn-color-primary, blue)}:host input{width:100%;border:var(--border-size) solid var(--border-color);outline:none;border-radius:var(--border-radius);padding:var(--padding);padding-right:32px;transition:all 300ms ease-in-out}:host input:focus-visible,:host input:hover{outline:none;box-shadow:0 0 2px 2px var(--focus-color)}:host svg{position:absolute;top:0;right:0;height:100%;transform:scale(0.7);fill:var(--color);outline:var(--color);color:var(--color);transition:all 300ms ease-in-out}:host button{background:transparent;border:0;margin:0;padding:0}:host button:focus-visible svg,:host button:hover svg{fill:var(--focus-color);outline:var(--focus-color);color:var(--focus-color)}";
 const DnnSearchboxStyle0 = dnnSearchboxCss;