@dnncommunity/dnn-elements 0.14.0-beta.3 → 0.14.0-beta.7

package/dist/dnn/p-fb637662.system.js

@@ -0,0 +1,2 @@
+System.register(["./p-646cfb1b.system.js"],(function(e){"use strict";return{setters:[function(t){e("Debounce",t.D)}],execute:function(){var t=function(){function e(e){var t=this;this.getServiceRoot=function(e){var t=window.top.dnn.getVar("sf_siteRoot","/");t+="API/"+e+"/";return t};this.getTabId=function(){var e=window.top.dnn.getVar("sf_tabId","-1");return parseInt(e)};this.getModuleId=function(){return t._moduleId};this.getAntiForgeryValue=function(){var e=document.querySelector("input[name=__RequestVerificationToken]");if(e!=null){return e.value}else{return null}};this.getModuleHeaders=function(){var e=new Headers;if(t.getTabId()>-1){e.append("ModuleId",t._moduleId.toString());e.append("TabId",t.getTabId().toString())}var n=t.getAntiForgeryValue();if(n!=null){e.append("RequestVerificationToken",n)}return e};this._moduleId=e}return e}();e("DnnServicesFramework",t)}}}));
+//# sourceMappingURL=p-fb637662.system.js.map

package/dist/dnn/p-fb637662.system.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/utilities/dnnServicesFramework.ts"],"names":["DnnServicesFramework","moduleId","_this","this","getServiceRoot","moduleName","serviceRoot","window","top","dnn","getVar","getTabId","tabId","parseInt","getModuleId","_moduleId","getAntiForgeryValue","el","document","querySelector","value","getModuleHeaders","headers","Headers","append","toString","afValue"],"mappings":"yJAgBI,SAAAA,EAAYC,GAAZ,IAAAC,EAAAC,KAIAA,KAAAC,eAAiB,SAACC,GAEd,IAAIC,EAAcC,OAAOC,IAAIC,IAAIC,OAAO,cAAe,KACvDJ,GAAe,OAASD,EAAa,IACrC,OAAOC,GAGXH,KAAAQ,SAAW,WACP,IAAIC,EAAQL,OAAOC,IAAIC,IAAIC,OAAO,WAAY,MAC9C,OAAOG,SAASD,IAGpBT,KAAAW,YAAc,WACV,OAAOZ,EAAKa,WAGhBZ,KAAAa,oBAAsB,WAClB,IAAMC,EAAKC,SAASC,cAAc,0CAClC,GAAIF,GAAM,KAAK,CACX,OAAOA,EAAGG,UAEV,CACA,OAAO,OAIfjB,KAAAkB,iBAAmB,WACf,IAAIC,EAAU,IAAIC,QAClB,GAAIrB,EAAKS,YAAc,EAAE,CACrBW,EAAQE,OAAO,WAAYtB,EAAKa,UAAUU,YAC1CH,EAAQE,OAAO,QAAStB,EAAKS,WAAWc,YAE5C,IAAMC,EAAUxB,EAAKc,sBACrB,GAAIU,GAAW,KAAK,CAChBJ,EAAQE,OAAO,2BAA4BE,GAE/C,OAAOJ,GAvCPnB,KAAKY,UAAYd","sourcesContent":["declare global {\r\n    interface Window {\r\n        dnn: {\r\n            //** Gets dnn variables from the page context *\r\n            getVar: (key: string, defaultValue: string) => string;\r\n        }\r\n    }\r\n}\r\n\r\nexport class DnnServicesFramework{\r\n    \r\n    private _moduleId: number;\r\n\r\n    /**\r\n     * Initializes the serivces framework\r\n     */\r\n    constructor(moduleId: number) {\r\n        this._moduleId = moduleId;\r\n    }\r\n\r\n    getServiceRoot = (moduleName: string) =>\r\n    {\r\n        var serviceRoot = window.top.dnn.getVar(\"sf_siteRoot\", \"/\");\r\n        serviceRoot += \"API/\" + moduleName + \"/\";\r\n        return serviceRoot;\r\n    }\r\n\r\n    getTabId = () => {\r\n        var tabId = window.top.dnn.getVar(\"sf_tabId\", \"-1\");\r\n        return parseInt(tabId);\r\n    }\r\n\r\n    getModuleId = () => {\r\n        return this._moduleId;\r\n    }\r\n\r\n    getAntiForgeryValue = () => {\r\n        const el = document.querySelector(\"input[name=__RequestVerificationToken]\") as HTMLInputElement;\r\n        if (el != null){\r\n            return el.value;\r\n        }\r\n        else{\r\n            return null;\r\n        }\r\n    }\r\n\r\n    getModuleHeaders = () => {\r\n        var headers = new Headers();\r\n        if (this.getTabId() > -1){\r\n            headers.append(\"ModuleId\", this._moduleId.toString());\r\n            headers.append(\"TabId\", this.getTabId().toString());\r\n        }\r\n        const afValue = this.getAntiForgeryValue();\r\n        if (afValue != null){\r\n            headers.append(\"RequestVerificationToken\", afValue);\r\n        }\r\n        return headers;\r\n    }\r\n}"]}

package/dist/dnn/shadow-css-d573707f.system.js

@@ -0,0 +1,14 @@
+var __spreadArray=this&&this.__spreadArray||function(r,e){for(var t=0,n=e.length,a=r.length;t<n;t++,a++)r[a]=e[t];return r};System.register([],(function(r){"use strict";return{execute:function(){
+/**
+       * @license
+       * Copyright Google Inc. All Rights Reserved.
+       *
+       * Use of this source code is governed by an MIT-style license that can be
+       * found in the LICENSE file at https://angular.io/license
+       *
+       * This file is a port of shadowCSS from webcomponents.js to TypeScript.
+       * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
+       * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
+       */
+var e=function(r){var e=[];var t=0;var n;r=r.replace(/(\[[^\]]*\])/g,(function(r,n){var a="__ph-"+t+"__";e.push(n);t++;return a}));n=r.replace(/(:nth-[-\w]+)(\([^)]+\))/g,(function(r,n,a){var s="__ph-"+t+"__";e.push(a);t++;return n+s}));var a={content:n,placeholders:e};return a};var t=function(r,e){return e.replace(/__ph-(\d+)__/g,(function(e,t){return r[+t]}))};var n="-shadowcsshost";var a="-shadowcssslotted";var s="-shadowcsscontext";var o=")(?:\\(("+"(?:\\([^)(]*\\)|[^)(]*)+?"+")\\))?([^,{]*)";var c=new RegExp("("+n+o,"gim");var i=new RegExp("("+s+o,"gim");var v=new RegExp("("+a+o,"gim");var u=n+"-no-combinator";var l=/-shadowcsshost-no-combinator([^\s]*)/;var f=[/::shadow/g,/::content/g];var p="([>\\s~+[.,{:][\\s\\S]*)?$";var h=/-shadowcsshost/gim;var g=/:host/gim;var d=/::slotted/gim;var m=/:host-context/gim;var _=/\/\*\s*[\s\S]*?\*\//g;var x=function(r){return r.replace(_,"")};var w=/\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g;var S=function(r){return r.match(w)||[]};var b=/(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;var W=/([{}])/g;var O=/(^.*?[^\\])??((:+)(.*)|$)/;var j="{";var E="}";var R="%BLOCK%";var k=function(r,e){var t=y(r);var n=0;return t.escapedString.replace(b,(function(){var r=[];for(var a=0;a<arguments.length;a++){r[a]=arguments[a]}var s=r[2];var o="";var c=r[4];var i="";if(c&&c.startsWith("{"+R)){o=t.blocks[n++];c=c.substring(R.length+1);i="{"}var v={selector:s,content:o};var u=e(v);return""+r[1]+u.selector+r[3]+i+u.content+c}))};var y=function(r){var e=r.split(W);var t=[];var n=[];var a=0;var s=[];for(var o=0;o<e.length;o++){var c=e[o];if(c===E){a--}if(a>0){s.push(c)}else{if(s.length>0){n.push(s.join(""));t.push(R);s=[]}t.push(c)}if(c===j){a++}}if(s.length>0){n.push(s.join(""));t.push(R)}var i={escapedString:t.join(""),blocks:n};return i};var T=function(r){r=r.replace(m,s).replace(g,n).replace(d,a);return r};var A=function(r,e,t){return r.replace(e,(function(){var r=[];for(var e=0;e<arguments.length;e++){r[e]=arguments[e]}if(r[2]){var n=r[2].split(",");var a=[];for(var s=0;s<n.length;s++){var o=n[s].trim();if(!o)break;a.push(t(u,o,r[3]))}return a.join(",")}else{return u+r[3]}}))};var C=function(r,e,t){return r+e.replace(n,"")+t};var L=function(r){return A(r,c,C)};var $=function(r,e,t){if(e.indexOf(n)>-1){return C(r,e,t)}else{return r+e+t+", "+e+" "+r+t}};var B=function(r,e){var t="."+e+" > ";var n=[];r=r.replace(v,(function(){var r=[];for(var e=0;e<arguments.length;e++){r[e]=arguments[e]}if(r[2]){var a=r[2].trim();var s=r[3];var o=t+a+s;var c="";for(var i=r[4]-1;i>=0;i--){var v=r[5][i];if(v==="}"||v===","){break}c=v+c}var l=c+o;var f=""+c.trimRight()+o.trim();if(l.trim()!==f.trim()){var p=f+", "+l;n.push({orgSelector:l,updatedSelector:p})}return o}else{return u+r[3]}}));return{selectors:n,cssText:r}};var I=function(r){return A(r,i,$)};var K=function(r){return f.reduce((function(r,e){return r.replace(e," ")}),r)};var M=function(r){var e=/\[/g;var t=/\]/g;r=r.replace(e,"\\[").replace(t,"\\]");return new RegExp("^("+r+")"+p,"m")};var U=function(r,e){var t=M(e);return!t.test(r)};var q=function(r,e){return r.replace(O,(function(r,t,n,a,s){if(t===void 0){t=""}if(a===void 0){a=""}if(s===void 0){s=""}return t+e+a+s}))};var z=function(r,e,t){h.lastIndex=0;if(h.test(r)){var n="."+t;return r.replace(l,(function(r,e){return q(e,n)})).replace(h,n+" ")}return e+" "+r};var D=function(r,n,a){var s=/\[is=([^\]]*)\]/g;n=n.replace(s,(function(r){var e=[];for(var t=1;t<arguments.length;t++){e[t-1]=arguments[t]}return e[0]}));var o="."+n;var c=function(r){var e=r.trim();if(!e){return""}if(r.indexOf(u)>-1){e=z(r,n,a)}else{var t=r.replace(h,"");if(t.length>0){e=q(t,o)}}return e};var i=e(r);r=i.content;var v="";var l=0;var f;var p=/( |>|\+|~(?!=))\s*/g;var g=r.indexOf(u)>-1;var d=!g;while((f=p.exec(r))!==null){var m=f[1];var _=r.slice(l,f.index).trim();d=d||_.indexOf(u)>-1;var x=d?c(_):_;v+=x+" "+m+" ";l=p.lastIndex}var w=r.substring(l);d=d||w.indexOf(u)>-1;v+=d?c(w):w;return t(i.placeholders,v)};var F=function(r,e,t,n){return r.split(",").map((function(r){if(n&&r.indexOf("."+n)>-1){return r.trim()}if(U(r,e)){return D(r,e,t).trim()}else{return r.trim()}})).join(", ")};var G=function(r,e,t,n,a){return k(r,(function(r){var a=r.selector;var s=r.content;if(r.selector[0]!=="@"){a=F(r.selector,e,t,n)}else if(r.selector.startsWith("@media")||r.selector.startsWith("@supports")||r.selector.startsWith("@page")||r.selector.startsWith("@document")){s=G(r.content,e,t,n)}var o={selector:a.replace(/\s{2,}/g," ").trim(),content:s};return o}))};var H=function(r,e,t,n,a){r=T(r);r=L(r);r=I(r);var s=B(r,n);r=s.cssText;r=K(r);if(e){r=G(r,e,t,n)}r=r.replace(/-shadowcsshost-no-combinator/g,"."+t);r=r.replace(/>\s*\*\s+([^{, ]+)/gm," $1 ");return{cssText:r.trim(),slottedSelectors:s.selectors}};var J=r("scopeCss",(function(r,e,t){var n=e+"-h";var a=e+"-s";var s=S(r);r=x(r);var o=[];if(t){var c=function(r){var e="/*!@___"+o.length+"___*/";var t="/*!@"+r.selector+"*/";o.push({placeholder:e,comment:t});r.selector=e+r.selector;return r};r=k(r,(function(r){if(r.selector[0]!=="@"){return c(r)}else if(r.selector.startsWith("@media")||r.selector.startsWith("@supports")||r.selector.startsWith("@page")||r.selector.startsWith("@document")){r.content=k(r.content,c);return r}return r}))}var i=H(r,e,n,a);r=__spreadArray([i.cssText],s).join("\n");if(t){o.forEach((function(e){var t=e.placeholder,n=e.comment;r=r.replace(t,n)}))}i.slottedSelectors.forEach((function(e){r=r.replace(e.orgSelector,e.updatedSelector)}));return r}))}}}));
+//# sourceMappingURL=shadow-css-d573707f.system.js.map

package/dist/dnn/shadow-css-d573707f.system.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["node_modules/@stencil/core/internal/client/shadow-css.js"],"names":["safeSelector","selector","placeholders","index","content","replace","_","keep","replaceBy","push","pseudo","exp","ss","restoreSafeSelector","_polyfillHost","_polyfillSlotted","_polyfillHostContext","_parenSuffix","_cssColonHostRe","RegExp","_cssColonHostContextRe","_cssColonSlottedRe","_polyfillHostNoCombinator","_polyfillHostNoCombinatorRe","_shadowDOMSelectorsRe","_selectorReSuffix","_polyfillHostRe","_colonHostRe","_colonSlottedRe","_colonHostContextRe","_commentRe","stripComments","input","_commentWithHashRe","extractCommentsWithHash","match","_ruleRe","_curlyRe","_selectorPartsRe","OPEN_CURLY","CLOSE_CURLY","BLOCK_PLACEHOLDER","processRules","ruleCallback","inputWithEscapedBlocks","escapeBlocks","nextBlockIndex","escapedString","m","_i","arguments","length","suffix","contentPrefix","startsWith","blocks","substring","cssRule","rule","inputParts","split","resultParts","escapedBlocks","bracketCount","currentBlockParts","partIndex","part","join","strEscapedBlocks","insertPolyfillHostInCssText","convertColonRule","cssText","regExp","partReplacer","parts","r","i","p","trim","colonHostPartReplacer","host","convertColonHost","colonHostContextPartReplacer","indexOf","convertColonSlotted","slotScopeId","slotClass","selectors","compound","slottedSelector","prefixSelector","char","orgSelector","addedSelector","trimRight","updatedSelector","convertColonHostContext","convertShadowDOMSelectors","reduce","result","pattern","makeScopeMatcher","scopeSelector","lre","rre","selectorNeedsScoping","re","test","injectScopingSelector","scopingSelector","before","_colonGroup","colon","after","applySimpleSelectorScope","hostSelector","lastIndex","replaceBy_1","applyStrictSelectorScope","isRe","className","_scopeSelectorPart","scopedP","t","safeContent","scopedSelector","startIndex","res","sep","hasHost","shouldScope","exec","separator","part_1","slice","scopedPart","scopeSelectorText","slotSelector","map","shallowPart","scopeSelectors","commentOriginalSelector","scopeCssText","scopeId","hostScopeId","slotted","slottedSelectors","scopeCss","exports","commentsWithHash","orgSelectors","processCommentedSelector_1","placeholder","comment","scoped","__spreadArray","forEach","_a"],"mappings":"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","sourcesContent":["/*\n Stencil Client Platform v2.13.0 | MIT Licensed | https://stenciljs.com\n */\n/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n *\n * This file is a port of shadowCSS from webcomponents.js to TypeScript.\n * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js\n * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts\n */\nconst safeSelector = (selector) => {\n    const placeholders = [];\n    let index = 0;\n    let content;\n    // Replaces attribute selectors with placeholders.\n    // The WS in [attr=\"va lue\"] would otherwise be interpreted as a selector separator.\n    selector = selector.replace(/(\\[[^\\]]*\\])/g, (_, keep) => {\n        const replaceBy = `__ph-${index}__`;\n        placeholders.push(keep);\n        index++;\n        return replaceBy;\n    });\n    // Replaces the expression in `:nth-child(2n + 1)` with a placeholder.\n    // WS and \"+\" would otherwise be interpreted as selector separators.\n    content = selector.replace(/(:nth-[-\\w]+)(\\([^)]+\\))/g, (_, pseudo, exp) => {\n        const replaceBy = `__ph-${index}__`;\n        placeholders.push(exp);\n        index++;\n        return pseudo + replaceBy;\n    });\n    const ss = {\n        content,\n        placeholders,\n    };\n    return ss;\n};\nconst restoreSafeSelector = (placeholders, content) => {\n    return content.replace(/__ph-(\\d+)__/g, (_, index) => placeholders[+index]);\n};\nconst _polyfillHost = '-shadowcsshost';\nconst _polyfillSlotted = '-shadowcssslotted';\n// note: :host-context pre-processed to -shadowcsshostcontext.\nconst _polyfillHostContext = '-shadowcsscontext';\nconst _parenSuffix = ')(?:\\\\((' + '(?:\\\\([^)(]*\\\\)|[^)(]*)+?' + ')\\\\))?([^,{]*)';\nconst _cssColonHostRe = new RegExp('(' + _polyfillHost + _parenSuffix, 'gim');\nconst _cssColonHostContextRe = new RegExp('(' + _polyfillHostContext + _parenSuffix, 'gim');\nconst _cssColonSlottedRe = new RegExp('(' + _polyfillSlotted + _parenSuffix, 'gim');\nconst _polyfillHostNoCombinator = _polyfillHost + '-no-combinator';\nconst _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\\s]*)/;\nconst _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];\nconst _selectorReSuffix = '([>\\\\s~+[.,{:][\\\\s\\\\S]*)?$';\nconst _polyfillHostRe = /-shadowcsshost/gim;\nconst _colonHostRe = /:host/gim;\nconst _colonSlottedRe = /::slotted/gim;\nconst _colonHostContextRe = /:host-context/gim;\nconst _commentRe = /\\/\\*\\s*[\\s\\S]*?\\*\\//g;\nconst stripComments = (input) => {\n    return input.replace(_commentRe, '');\n};\nconst _commentWithHashRe = /\\/\\*\\s*#\\s*source(Mapping)?URL=[\\s\\S]+?\\*\\//g;\nconst extractCommentsWithHash = (input) => {\n    return input.match(_commentWithHashRe) || [];\n};\nconst _ruleRe = /(\\s*)([^;\\{\\}]+?)(\\s*)((?:{%BLOCK%}?\\s*;?)|(?:\\s*;))/g;\nconst _curlyRe = /([{}])/g;\nconst _selectorPartsRe = /(^.*?[^\\\\])??((:+)(.*)|$)/;\nconst OPEN_CURLY = '{';\nconst CLOSE_CURLY = '}';\nconst BLOCK_PLACEHOLDER = '%BLOCK%';\nconst processRules = (input, ruleCallback) => {\n    const inputWithEscapedBlocks = escapeBlocks(input);\n    let nextBlockIndex = 0;\n    return inputWithEscapedBlocks.escapedString.replace(_ruleRe, (...m) => {\n        const selector = m[2];\n        let content = '';\n        let suffix = m[4];\n        let contentPrefix = '';\n        if (suffix && suffix.startsWith('{' + BLOCK_PLACEHOLDER)) {\n            content = inputWithEscapedBlocks.blocks[nextBlockIndex++];\n            suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);\n            contentPrefix = '{';\n        }\n        const cssRule = {\n            selector,\n            content,\n        };\n        const rule = ruleCallback(cssRule);\n        return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;\n    });\n};\nconst escapeBlocks = (input) => {\n    const inputParts = input.split(_curlyRe);\n    const resultParts = [];\n    const escapedBlocks = [];\n    let bracketCount = 0;\n    let currentBlockParts = [];\n    for (let partIndex = 0; partIndex < inputParts.length; partIndex++) {\n        const part = inputParts[partIndex];\n        if (part === CLOSE_CURLY) {\n            bracketCount--;\n        }\n        if (bracketCount > 0) {\n            currentBlockParts.push(part);\n        }\n        else {\n            if (currentBlockParts.length > 0) {\n                escapedBlocks.push(currentBlockParts.join(''));\n                resultParts.push(BLOCK_PLACEHOLDER);\n                currentBlockParts = [];\n            }\n            resultParts.push(part);\n        }\n        if (part === OPEN_CURLY) {\n            bracketCount++;\n        }\n    }\n    if (currentBlockParts.length > 0) {\n        escapedBlocks.push(currentBlockParts.join(''));\n        resultParts.push(BLOCK_PLACEHOLDER);\n    }\n    const strEscapedBlocks = {\n        escapedString: resultParts.join(''),\n        blocks: escapedBlocks,\n    };\n    return strEscapedBlocks;\n};\nconst insertPolyfillHostInCssText = (selector) => {\n    selector = selector\n        .replace(_colonHostContextRe, _polyfillHostContext)\n        .replace(_colonHostRe, _polyfillHost)\n        .replace(_colonSlottedRe, _polyfillSlotted);\n    return selector;\n};\nconst convertColonRule = (cssText, regExp, partReplacer) => {\n    // m[1] = :host(-context), m[2] = contents of (), m[3] rest of rule\n    return cssText.replace(regExp, (...m) => {\n        if (m[2]) {\n            const parts = m[2].split(',');\n            const r = [];\n            for (let i = 0; i < parts.length; i++) {\n                const p = parts[i].trim();\n                if (!p)\n                    break;\n                r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));\n            }\n            return r.join(',');\n        }\n        else {\n            return _polyfillHostNoCombinator + m[3];\n        }\n    });\n};\nconst colonHostPartReplacer = (host, part, suffix) => {\n    return host + part.replace(_polyfillHost, '') + suffix;\n};\nconst convertColonHost = (cssText) => {\n    return convertColonRule(cssText, _cssColonHostRe, colonHostPartReplacer);\n};\nconst colonHostContextPartReplacer = (host, part, suffix) => {\n    if (part.indexOf(_polyfillHost) > -1) {\n        return colonHostPartReplacer(host, part, suffix);\n    }\n    else {\n        return host + part + suffix + ', ' + part + ' ' + host + suffix;\n    }\n};\nconst convertColonSlotted = (cssText, slotScopeId) => {\n    const slotClass = '.' + slotScopeId + ' > ';\n    const selectors = [];\n    cssText = cssText.replace(_cssColonSlottedRe, (...m) => {\n        if (m[2]) {\n            const compound = m[2].trim();\n            const suffix = m[3];\n            const slottedSelector = slotClass + compound + suffix;\n            let prefixSelector = '';\n            for (let i = m[4] - 1; i >= 0; i--) {\n                const char = m[5][i];\n                if (char === '}' || char === ',') {\n                    break;\n                }\n                prefixSelector = char + prefixSelector;\n            }\n            const orgSelector = prefixSelector + slottedSelector;\n            const addedSelector = `${prefixSelector.trimRight()}${slottedSelector.trim()}`;\n            if (orgSelector.trim() !== addedSelector.trim()) {\n                const updatedSelector = `${addedSelector}, ${orgSelector}`;\n                selectors.push({\n                    orgSelector,\n                    updatedSelector,\n                });\n            }\n            return slottedSelector;\n        }\n        else {\n            return _polyfillHostNoCombinator + m[3];\n        }\n    });\n    return {\n        selectors,\n        cssText,\n    };\n};\nconst convertColonHostContext = (cssText) => {\n    return convertColonRule(cssText, _cssColonHostContextRe, colonHostContextPartReplacer);\n};\nconst convertShadowDOMSelectors = (cssText) => {\n    return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, ' '), cssText);\n};\nconst makeScopeMatcher = (scopeSelector) => {\n    const lre = /\\[/g;\n    const rre = /\\]/g;\n    scopeSelector = scopeSelector.replace(lre, '\\\\[').replace(rre, '\\\\]');\n    return new RegExp('^(' + scopeSelector + ')' + _selectorReSuffix, 'm');\n};\nconst selectorNeedsScoping = (selector, scopeSelector) => {\n    const re = makeScopeMatcher(scopeSelector);\n    return !re.test(selector);\n};\nconst injectScopingSelector = (selector, scopingSelector) => {\n    return selector.replace(_selectorPartsRe, (_, before = '', _colonGroup, colon = '', after = '') => {\n        return before + scopingSelector + colon + after;\n    });\n};\nconst applySimpleSelectorScope = (selector, scopeSelector, hostSelector) => {\n    // In Android browser, the lastIndex is not reset when the regex is used in String.replace()\n    _polyfillHostRe.lastIndex = 0;\n    if (_polyfillHostRe.test(selector)) {\n        const replaceBy = `.${hostSelector}`;\n        return selector\n            .replace(_polyfillHostNoCombinatorRe, (_, selector) => injectScopingSelector(selector, replaceBy))\n            .replace(_polyfillHostRe, replaceBy + ' ');\n    }\n    return scopeSelector + ' ' + selector;\n};\nconst applyStrictSelectorScope = (selector, scopeSelector, hostSelector) => {\n    const isRe = /\\[is=([^\\]]*)\\]/g;\n    scopeSelector = scopeSelector.replace(isRe, (_, ...parts) => parts[0]);\n    const className = '.' + scopeSelector;\n    const _scopeSelectorPart = (p) => {\n        let scopedP = p.trim();\n        if (!scopedP) {\n            return '';\n        }\n        if (p.indexOf(_polyfillHostNoCombinator) > -1) {\n            scopedP = applySimpleSelectorScope(p, scopeSelector, hostSelector);\n        }\n        else {\n            // remove :host since it should be unnecessary\n            const t = p.replace(_polyfillHostRe, '');\n            if (t.length > 0) {\n                scopedP = injectScopingSelector(t, className);\n            }\n        }\n        return scopedP;\n    };\n    const safeContent = safeSelector(selector);\n    selector = safeContent.content;\n    let scopedSelector = '';\n    let startIndex = 0;\n    let res;\n    const sep = /( |>|\\+|~(?!=))\\s*/g;\n    // If a selector appears before :host it should not be shimmed as it\n    // matches on ancestor elements and not on elements in the host's shadow\n    // `:host-context(div)` is transformed to\n    // `-shadowcsshost-no-combinatordiv, div -shadowcsshost-no-combinator`\n    // the `div` is not part of the component in the 2nd selectors and should not be scoped.\n    // Historically `component-tag:host` was matching the component so we also want to preserve\n    // this behavior to avoid breaking legacy apps (it should not match).\n    // The behavior should be:\n    // - `tag:host` -> `tag[h]` (this is to avoid breaking legacy apps, should not match anything)\n    // - `tag :host` -> `tag [h]` (`tag` is not scoped because it's considered part of a\n    //   `:host-context(tag)`)\n    const hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1;\n    // Only scope parts after the first `-shadowcsshost-no-combinator` when it is present\n    let shouldScope = !hasHost;\n    while ((res = sep.exec(selector)) !== null) {\n        const separator = res[1];\n        const part = selector.slice(startIndex, res.index).trim();\n        shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;\n        const scopedPart = shouldScope ? _scopeSelectorPart(part) : part;\n        scopedSelector += `${scopedPart} ${separator} `;\n        startIndex = sep.lastIndex;\n    }\n    const part = selector.substring(startIndex);\n    shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;\n    scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;\n    // replace the placeholders with their original values\n    return restoreSafeSelector(safeContent.placeholders, scopedSelector);\n};\nconst scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector) => {\n    return selector\n        .split(',')\n        .map((shallowPart) => {\n        if (slotSelector && shallowPart.indexOf('.' + slotSelector) > -1) {\n            return shallowPart.trim();\n        }\n        if (selectorNeedsScoping(shallowPart, scopeSelectorText)) {\n            return applyStrictSelectorScope(shallowPart, scopeSelectorText, hostSelector).trim();\n        }\n        else {\n            return shallowPart.trim();\n        }\n    })\n        .join(', ');\n};\nconst scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {\n    return processRules(cssText, (rule) => {\n        let selector = rule.selector;\n        let content = rule.content;\n        if (rule.selector[0] !== '@') {\n            selector = scopeSelector(rule.selector, scopeSelectorText, hostSelector, slotSelector);\n        }\n        else if (rule.selector.startsWith('@media') ||\n            rule.selector.startsWith('@supports') ||\n            rule.selector.startsWith('@page') ||\n            rule.selector.startsWith('@document')) {\n            content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector);\n        }\n        const cssRule = {\n            selector: selector.replace(/\\s{2,}/g, ' ').trim(),\n            content,\n        };\n        return cssRule;\n    });\n};\nconst scopeCssText = (cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector) => {\n    cssText = insertPolyfillHostInCssText(cssText);\n    cssText = convertColonHost(cssText);\n    cssText = convertColonHostContext(cssText);\n    const slotted = convertColonSlotted(cssText, slotScopeId);\n    cssText = slotted.cssText;\n    cssText = convertShadowDOMSelectors(cssText);\n    if (scopeId) {\n        cssText = scopeSelectors(cssText, scopeId, hostScopeId, slotScopeId);\n    }\n    cssText = cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);\n    cssText = cssText.replace(/>\\s*\\*\\s+([^{, ]+)/gm, ' $1 ');\n    return {\n        cssText: cssText.trim(),\n        slottedSelectors: slotted.selectors,\n    };\n};\nconst scopeCss = (cssText, scopeId, commentOriginalSelector) => {\n    const hostScopeId = scopeId + '-h';\n    const slotScopeId = scopeId + '-s';\n    const commentsWithHash = extractCommentsWithHash(cssText);\n    cssText = stripComments(cssText);\n    const orgSelectors = [];\n    if (commentOriginalSelector) {\n        const processCommentedSelector = (rule) => {\n            const placeholder = `/*!@___${orgSelectors.length}___*/`;\n            const comment = `/*!@${rule.selector}*/`;\n            orgSelectors.push({ placeholder, comment });\n            rule.selector = placeholder + rule.selector;\n            return rule;\n        };\n        cssText = processRules(cssText, (rule) => {\n            if (rule.selector[0] !== '@') {\n                return processCommentedSelector(rule);\n            }\n            else if (rule.selector.startsWith('@media') ||\n                rule.selector.startsWith('@supports') ||\n                rule.selector.startsWith('@page') ||\n                rule.selector.startsWith('@document')) {\n                rule.content = processRules(rule.content, processCommentedSelector);\n                return rule;\n            }\n            return rule;\n        });\n    }\n    const scoped = scopeCssText(cssText, scopeId, hostScopeId, slotScopeId);\n    cssText = [scoped.cssText, ...commentsWithHash].join('\\n');\n    if (commentOriginalSelector) {\n        orgSelectors.forEach(({ placeholder, comment }) => {\n            cssText = cssText.replace(placeholder, comment);\n        });\n    }\n    scoped.slottedSelectors.forEach((slottedSelector) => {\n        cssText = cssText.replace(slottedSelector.orgSelector, slottedSelector.updatedSelector);\n    });\n    return cssText;\n};\n\nexport { scopeCss };\n"]}

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-3e56049b.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(.disabled){pointer-events:none}:host(.primary){--background-color:var(--dnn-color-primary, blue);--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, blue);--border-color:var(--dnn-color-primary, blue);--focus-color:var(--color)}:host(.secondary){--background-color:var(--dnn-color-secondary, green);--color:var(--dnn-color-secondary-contrast, white);--focus-color:var(--background-color)}:host(.secondary.reversed){--background-color:var(--dnn-color-secondary-contrast, white);--color:var(--dnn-color-secondary, blue);--border-color:var(--dnn-color-secondary, blue);--focus-color:var(--color)}:host(.tertiary){--background-color:var(--dnn-color-tertiary, yellow);--color:var(--dnn-color-tertiary-contrast, black);--focus-color:var(--background-color)}:host(.tertiary.reversed){--background-color:var(--dnn-color-tertiary-contrast, white);--color:var(--dnn-color-tertiary, blue);--border-color:var(--dnn-color-tertiary, blue);--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,:host(.hydrated) button:hover{box-shadow:0 0 2px 2px var(--focus-color)}:host(:disabled,[disabled]) button{pointer-events:none;opacity:0.5}: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 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(.disabled){pointer-events:none}:host(.primary){--background-color:var(--dnn-color-primary, blue);--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, blue);--border-color:var(--dnn-color-primary, blue);--focus-color:var(--color)}:host(.secondary){--background-color:var(--dnn-color-secondary, green);--color:var(--dnn-color-secondary-contrast, white);--focus-color:var(--background-color)}:host(.secondary.reversed){--background-color:var(--dnn-color-secondary-contrast, white);--color:var(--dnn-color-secondary, blue);--border-color:var(--dnn-color-secondary, blue);--focus-color:var(--color)}:host(.tertiary){--background-color:var(--dnn-color-tertiary, yellow);--color:var(--dnn-color-tertiary-contrast, black);--focus-color:var(--background-color)}:host(.tertiary.reversed){--background-color:var(--dnn-color-tertiary-contrast, white);--color:var(--dnn-color-tertiary, blue);--border-color:var(--dnn-color-tertiary, blue);--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,:host(.hydrated) button:hover{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host(:disabled,[disabled]) button{pointer-events:none;opacity:0.5}: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}";
 
 let DnnButton = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"dnn-button.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,+8DAA+8D;;ICUv9D,SAAS;EALtB;;;;;;;;IAWU,SAAI,GAAyC,SAAS,CAAC;;;;IAKvD,aAAQ,GAAY,KAAK,CAAC;;;;IAK1B,SAAI,GAAkC,QAAQ,CAAC;;;;IAK/C,YAAO,GAAa,KAAK,CAAC;;;;IAK1B,mBAAc,GAAY,KAAK,CAAC;;;;IAKhC,kBAAa,GAAY,IAAI,CAAC;;;;IAK9B,mBAAc,GAAY,gBAAgB,CAAC;;;;IAK3C,aAAQ,GAAY,KAAK,CAAC;IAEzB,iBAAY,GAAY,KAAK,CAAC;GA+ExC;EA1DC,gBAAgB;IACd,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEjC,IAAI,IAAI,CAAC,QAAQ,EAAC;MAChB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;KACnC;IAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAC;MACzB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAClC;IAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;GAC5D;EAEO,aAAa;IACnB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC1B,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;GACvB;EAEO,YAAY;IAClB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;GACtB;EAEO,WAAW;IACjB,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY,EAAC;MACrC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;MAClB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;KAC1B;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAC,gBAAgB,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,KAAK,EAAC,IACtF,cAAQ,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC/E,eAAa,CACN,EACR,IAAI,CAAC,OAAO;MACT,iBAAW,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,IACvD,aAAI,IAAI,CAAC,cAAc,CAAK,EAC5B,WAAK,KAAK,EACR;UACE,OAAO,EAAE,MAAM;UACf,cAAc,EAAE,UAAU;SAC3B,IAED,kBAAY,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAC,MAAM,EAAE,KAAK,EAAC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,cAAc,CAAc,EAC1H,kBAAY,IAAI,EAAC,WAAW,EAAC,KAAK,EAAE,EAAC,MAAM,EAAE,KAAK,EAAC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,IAAG,IAAI,CAAC,aAAa,CAAc,CACtH,CACI,CAEX,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/dnn-button/dnn-button.scss?tag=dnn-button&encapsulation=shadow","./src/components/dnn-button/dnn-button.tsx"],"sourcesContent":[":host {\r\n  --background-color: transparent;\r\n  --color: #333;\r\n  --border-size: 1px;\r\n  --border-color: var(--backround-color);\r\n  --border-radius: var(--dnn-controls-radius, 5px);\r\n  --padding: var(--dnn-controls-padding, 5px);\r\n  display: inline-block;\r\n  width: auto;\r\n}\r\n\r\n:host(.disabled){\r\n  pointer-events: none;\r\n}\r\n\r\n:host(.primary){\r\n  --background-color: var(--dnn-color-primary, blue);\r\n  --color: var(--dnn-color-primary-contrast, white);\r\n  --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.primary.reversed){\r\n  --background-color: var(--dnn-color-primary-contrast, white);\r\n  --color: var(--dnn-color-primary, blue);\r\n  --border-color: var(--dnn-color-primary, blue);\r\n  --focus-color: var(--color);\r\n}\r\n\r\n:host(.secondary){\r\n  --background-color: var(--dnn-color-secondary, green);\r\n  --color: var(--dnn-color-secondary-contrast, white);\r\n  --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.secondary.reversed){\r\n  --background-color: var(--dnn-color-secondary-contrast, white);\r\n  --color: var(--dnn-color-secondary, blue);\r\n  --border-color: var(--dnn-color-secondary, blue);\r\n  --focus-color: var(--color);\r\n}\r\n\r\n:host(.tertiary){\r\n  --background-color: var(--dnn-color-tertiary, yellow);\r\n  --color: var(--dnn-color-tertiary-contrast, black);\r\n  --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.tertiary.reversed){\r\n  --background-color: var(--dnn-color-tertiary-contrast, white);\r\n  --color: var(--dnn-color-tertiary, blue);\r\n  --border-color: var(--dnn-color-tertiary, blue);\r\n  --focus-color: var(--color);\r\n}\r\n\r\n:host(.hydrated){\r\n  button{\r\n    border: var(--border-size) solid var(--border-color);\r\n    border-radius: var(--border-radius);\r\n    padding: var(--padding) calc(var(--padding) * 2);\r\n    background-color: transparent;\r\n    background-color: var(--background-color);\r\n    color: var(--color);\r\n    outline: none;\r\n    &:focus, &:hover{\r\n      box-shadow: 0 0 2px 2px var(--focus-color);\r\n    }\r\n  }\r\n}\r\n\r\n:host(:disabled, [disabled]){\r\n  button{\r\n    pointer-events: none;\r\n    opacity: 0.5;\r\n  }\r\n}\r\n\r\n:host(.small){\r\n  button{\r\n    padding: calc(var(--padding) / 2) var(--padding);\r\n    font-size: 0.7em;\r\n  }\r\n}\r\n\r\n:host(.large){\r\n  button{\r\n    padding: calc(var(--padding) * 1.5) calc(var(--padding) * 3);\r\n    font-size: 1.2em;\r\n  }\r\n}\r\n\r\nbutton{\r\n  height: 100%;\r\n  width: 100%;\r\n  cursor: pointer;\r\n}","import { Component, Element, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\r\n\r\n/**\r\n * @slot Content of the button\r\n */\r\n@Component({\r\n  tag: 'dnn-button',\r\n  styleUrl: 'dnn-button.scss',\r\n  shadow: true\r\n})\r\nexport class DnnButton {\r\n\r\n  /**\r\n   * Optional button style,\r\n   * can be either primary, secondary or tertiary and defaults to primary if not specified\r\n   */\r\n  @Prop() type: 'primary' | 'secondary' | 'tertiary' = 'primary';\r\n\r\n  /**\r\n   * Optionally reverses the button style.\r\n   */\r\n  @Prop() reversed: boolean = false;\r\n\r\n  /**\r\n   * Optionally sets the button size, small normal or large, defaults to normal\r\n   */\r\n  @Prop() size?: 'small' | 'normal' | 'large' = 'normal';\r\n\r\n  /**\r\n   * Optionally add a confirmation dialog before firing the action.\r\n   */\r\n  @Prop() confirm?: boolean = false;\r\n\r\n  /**\r\n   * The text of the yes button for confirmation.\r\n   */\r\n  @Prop() confirmYesText?: string = \"Yes\";\r\n\r\n  /**\r\n   * The text of the no button for confirmation.\r\n   */\r\n  @Prop() confirmNoText?: string = \"No\";\r\n\r\n  /**\r\n   * The text of the confirmation message;\r\n   */\r\n  @Prop() confirmMessage?: string = \"Are you sure ?\";\r\n  \r\n  /**\r\n   * Disables the button\r\n   */\r\n  @Prop() disabled: boolean = false;\r\n\r\n  @State() modalVisible: boolean = false;\r\n\r\n  @Element() el!: HTMLDnnButtonElement;\r\n\r\n  private modal!: HTMLDnnModalElement;\r\n\r\n  /** \r\n   * Fires when confirm is true and the user confirms the action.\r\n  */\r\n  @Event({\r\n    eventName: 'confirmed',\r\n    bubbles: false,\r\n    cancelable: true,\r\n    composed: true\r\n  }) confirmed: EventEmitter;\r\n\r\n  /**\r\n   * Fires when confirm is true and the user cancels the action.\r\n   */\r\n  @Event({bubbles: false}) canceled: EventEmitter;\r\n\r\n  componentDidLoad(){\r\n    this.el.classList.add(this.type);\r\n    \r\n    if (this.reversed){\r\n      this.el.classList.add('reversed');\r\n    }\r\n\r\n    if (this.size !== 'normal'){\r\n      this.el.classList.add(this.size);\r\n    }\r\n\r\n    this.modal = this.el.shadowRoot.querySelector('dnn-modal');\r\n  }\r\n\r\n  private handleConfirm(){\r\n    this.modal.hide();\r\n    this.modalVisible = false;\r\n    this.confirmed.emit();\r\n  }\r\n\r\n  private handleCancel(){\r\n    this.modal.hide();\r\n    this.modalVisible = false;\r\n    this.canceled.emit();\r\n  }\r\n  \r\n  private handleClick(): void {\r\n    if (this.confirm && !this.modalVisible){\r\n      this.modal.show();\r\n      this.modalVisible = true;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host disabled={this.disabled} style={{'pointer-events': this.disabled ? 'none' : 'all'}}>\r\n        <button class=\"button\" onClick={() => this.handleClick()} disabled={this.disabled}>\r\n          <slot></slot>\r\n        </button>\r\n        {this.confirm &&\r\n            <dnn-modal showCloseButton={false} backdropDismiss={false}>\r\n              <p>{this.confirmMessage}</p>\r\n              <div style={\r\n                {\r\n                  display: 'flex',\r\n                  justifyContent: 'flex-end'\r\n                }\r\n              }>\r\n                <dnn-button type='primary' style={{margin: '5px'}} onClick={() => this.handleConfirm()}>{this.confirmYesText}</dnn-button>\r\n                <dnn-button type='secondary' style={{margin: '5px'}} onClick={() => this.handleCancel()}>{this.confirmNoText}</dnn-button>\r\n              </div>\r\n            </dnn-modal>\r\n          }\r\n      </Host>\r\n    );\r\n  }\r\n  \r\n\r\n}\r\n"],"version":3}
+{"file":"dnn-button.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,igEAAigE;;ICUzgE,SAAS;EALtB;;;;;;;;IAWU,SAAI,GAAyC,SAAS,CAAC;;;;IAKvD,aAAQ,GAAY,KAAK,CAAC;;;;IAK1B,SAAI,GAAkC,QAAQ,CAAC;;;;IAK/C,YAAO,GAAa,KAAK,CAAC;;;;IAK1B,mBAAc,GAAY,KAAK,CAAC;;;;IAKhC,kBAAa,GAAY,IAAI,CAAC;;;;IAK9B,mBAAc,GAAY,gBAAgB,CAAC;;;;IAK3C,aAAQ,GAAY,KAAK,CAAC;IAEzB,iBAAY,GAAY,KAAK,CAAC;GA+ExC;EA1DC,gBAAgB;IACd,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEjC,IAAI,IAAI,CAAC,QAAQ,EAAC;MAChB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;KACnC;IAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAC;MACzB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAClC;IAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;GAC5D;EAEO,aAAa;IACnB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC1B,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;GACvB;EAEO,YAAY;IAClB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;GACtB;EAEO,WAAW;IACjB,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY,EAAC;MACrC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;MAClB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;KAC1B;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAC,gBAAgB,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,KAAK,EAAC,IACtF,cAAQ,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC/E,eAAa,CACN,EACR,IAAI,CAAC,OAAO;MACT,iBAAW,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,IACvD,aAAI,IAAI,CAAC,cAAc,CAAK,EAC5B,WAAK,KAAK,EACR;UACE,OAAO,EAAE,MAAM;UACf,cAAc,EAAE,UAAU;SAC3B,IAED,kBAAY,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAC,MAAM,EAAE,KAAK,EAAC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,cAAc,CAAc,EAC1H,kBAAY,IAAI,EAAC,WAAW,EAAC,KAAK,EAAE,EAAC,MAAM,EAAE,KAAK,EAAC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,IAAG,IAAI,CAAC,aAAa,CAAc,CACtH,CACI,CAEX,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/dnn-button/dnn-button.scss?tag=dnn-button&encapsulation=shadow","./src/components/dnn-button/dnn-button.tsx"],"sourcesContent":[":host {\r\n  --background-color: transparent;\r\n  --color: #333;\r\n  --border-size: 1px;\r\n  --border-color: var(--backround-color);\r\n  --border-radius: var(--dnn-controls-radius, 5px);\r\n  --padding: var(--dnn-controls-padding, 5px);\r\n  display: inline-block;\r\n  width: auto;\r\n}\r\n\r\n:host(.disabled){\r\n  pointer-events: none;\r\n}\r\n\r\n:host(.primary){\r\n  --background-color: var(--dnn-color-primary, blue);\r\n  --color: var(--dnn-color-primary-contrast, white);\r\n  --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.primary.reversed){\r\n  --background-color: var(--dnn-color-primary-contrast, white);\r\n  --color: var(--dnn-color-primary, blue);\r\n  --border-color: var(--dnn-color-primary, blue);\r\n  --focus-color: var(--color);\r\n}\r\n\r\n:host(.secondary){\r\n  --background-color: var(--dnn-color-secondary, green);\r\n  --color: var(--dnn-color-secondary-contrast, white);\r\n  --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.secondary.reversed){\r\n  --background-color: var(--dnn-color-secondary-contrast, white);\r\n  --color: var(--dnn-color-secondary, blue);\r\n  --border-color: var(--dnn-color-secondary, blue);\r\n  --focus-color: var(--color);\r\n}\r\n\r\n:host(.tertiary){\r\n  --background-color: var(--dnn-color-tertiary, yellow);\r\n  --color: var(--dnn-color-tertiary-contrast, black);\r\n  --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.tertiary.reversed){\r\n  --background-color: var(--dnn-color-tertiary-contrast, white);\r\n  --color: var(--dnn-color-tertiary, blue);\r\n  --border-color: var(--dnn-color-tertiary, blue);\r\n  --focus-color: var(--color);\r\n}\r\n\r\n:host(.hydrated){\r\n  button{\r\n    border: var(--border-size) solid var(--border-color);\r\n    border-radius: var(--border-radius);\r\n    padding: var(--padding) calc(var(--padding) * 2);\r\n    background-color: transparent;\r\n    background-color: var(--background-color);\r\n    color: var(--color);\r\n    outline: none;\r\n    &:focus, &:hover{\r\n      box-shadow: 0 0 2px 2px var(--focus-color);\r\n    }\r\n  }\r\n}\r\n\r\n:host(:disabled, [disabled]){\r\n  button{\r\n    pointer-events: none;\r\n    opacity: 0.5;\r\n  }\r\n}\r\n\r\n:host(.small){\r\n  button{\r\n    padding: calc(var(--padding) / 2) var(--padding);\r\n    font-size: 0.7em;\r\n  }\r\n}\r\n\r\n:host(.large){\r\n  button{\r\n    padding: calc(var(--padding) * 1.5) calc(var(--padding) * 3);\r\n    font-size: 1.2em;\r\n  }\r\n}\r\n\r\nbutton{\r\n  height: 100%;\r\n  width: 100%;\r\n  cursor: pointer;\r\n}","import { Component, Element, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\r\n\r\n/**\r\n * @slot Content of the button\r\n */\r\n@Component({\r\n  tag: 'dnn-button',\r\n  styleUrl: 'dnn-button.scss',\r\n  shadow: true\r\n})\r\nexport class DnnButton {\r\n\r\n  /**\r\n   * Optional button style,\r\n   * can be either primary, secondary or tertiary and defaults to primary if not specified\r\n   */\r\n  @Prop() type: 'primary' | 'secondary' | 'tertiary' = 'primary';\r\n\r\n  /**\r\n   * Optionally reverses the button style.\r\n   */\r\n  @Prop() reversed: boolean = false;\r\n\r\n  /**\r\n   * Optionally sets the button size, small normal or large, defaults to normal\r\n   */\r\n  @Prop() size?: 'small' | 'normal' | 'large' = 'normal';\r\n\r\n  /**\r\n   * Optionally add a confirmation dialog before firing the action.\r\n   */\r\n  @Prop() confirm?: boolean = false;\r\n\r\n  /**\r\n   * The text of the yes button for confirmation.\r\n   */\r\n  @Prop() confirmYesText?: string = \"Yes\";\r\n\r\n  /**\r\n   * The text of the no button for confirmation.\r\n   */\r\n  @Prop() confirmNoText?: string = \"No\";\r\n\r\n  /**\r\n   * The text of the confirmation message;\r\n   */\r\n  @Prop() confirmMessage?: string = \"Are you sure ?\";\r\n  \r\n  /**\r\n   * Disables the button\r\n   */\r\n  @Prop() disabled: boolean = false;\r\n\r\n  @State() modalVisible: boolean = false;\r\n\r\n  @Element() el!: HTMLDnnButtonElement;\r\n\r\n  private modal!: HTMLDnnModalElement;\r\n\r\n  /** \r\n   * Fires when confirm is true and the user confirms the action.\r\n  */\r\n  @Event({\r\n    eventName: 'confirmed',\r\n    bubbles: false,\r\n    cancelable: true,\r\n    composed: true\r\n  }) confirmed: EventEmitter;\r\n\r\n  /**\r\n   * Fires when confirm is true and the user cancels the action.\r\n   */\r\n  @Event({bubbles: false}) canceled: EventEmitter;\r\n\r\n  componentDidLoad(){\r\n    this.el.classList.add(this.type);\r\n    \r\n    if (this.reversed){\r\n      this.el.classList.add('reversed');\r\n    }\r\n\r\n    if (this.size !== 'normal'){\r\n      this.el.classList.add(this.size);\r\n    }\r\n\r\n    this.modal = this.el.shadowRoot.querySelector('dnn-modal');\r\n  }\r\n\r\n  private handleConfirm(){\r\n    this.modal.hide();\r\n    this.modalVisible = false;\r\n    this.confirmed.emit();\r\n  }\r\n\r\n  private handleCancel(){\r\n    this.modal.hide();\r\n    this.modalVisible = false;\r\n    this.canceled.emit();\r\n  }\r\n  \r\n  private handleClick(): void {\r\n    if (this.confirm && !this.modalVisible){\r\n      this.modal.show();\r\n      this.modalVisible = true;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host disabled={this.disabled} style={{'pointer-events': this.disabled ? 'none' : 'all'}}>\r\n        <button class=\"button\" onClick={() => this.handleClick()} disabled={this.disabled}>\r\n          <slot></slot>\r\n        </button>\r\n        {this.confirm &&\r\n            <dnn-modal showCloseButton={false} backdropDismiss={false}>\r\n              <p>{this.confirmMessage}</p>\r\n              <div style={\r\n                {\r\n                  display: 'flex',\r\n                  justifyContent: 'flex-end'\r\n                }\r\n              }>\r\n                <dnn-button type='primary' style={{margin: '5px'}} onClick={() => this.handleConfirm()}>{this.confirmYesText}</dnn-button>\r\n                <dnn-button type='secondary' style={{margin: '5px'}} onClick={() => this.handleCancel()}>{this.confirmNoText}</dnn-button>\r\n              </div>\r\n            </dnn-modal>\r\n          }\r\n      </Host>\r\n    );\r\n  }\r\n  \r\n\r\n}\r\n"],"version":3}

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-212d30ec.js';
 import { D as Debounce } from './debounce-06f55268.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(.disabled){pointer-events:none}:host(.primary){--background-color:var(--dnn-color-primary, blue);--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, blue);--border-color:var(--dnn-color-primary, blue);--focus-color:var(--color)}:host(.secondary){--background-color:var(--dnn-color-secondary, green);--color:var(--dnn-color-secondary-contrast, white);--focus-color:var(--background-color)}:host(.secondary.reversed){--background-color:var(--dnn-color-secondary-contrast, white);--color:var(--dnn-color-secondary, blue);--border-color:var(--dnn-color-secondary, blue);--focus-color:var(--color)}:host(.tertiary){--background-color:var(--dnn-color-tertiary, yellow);--color:var(--dnn-color-tertiary-contrast, black);--focus-color:var(--background-color)}:host(.tertiary.reversed){--background-color:var(--dnn-color-tertiary-contrast, white);--color:var(--dnn-color-tertiary, blue);--border-color:var(--dnn-color-tertiary, blue);--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,:host(.hydrated) button:hover{box-shadow:0 0 2px 2px var(--focus-color)}:host(:disabled,[disabled]) button{pointer-events:none;opacity:0.5}: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 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(.disabled){pointer-events:none}:host(.primary){--background-color:var(--dnn-color-primary, blue);--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, blue);--border-color:var(--dnn-color-primary, blue);--focus-color:var(--color)}:host(.secondary){--background-color:var(--dnn-color-secondary, green);--color:var(--dnn-color-secondary-contrast, white);--focus-color:var(--background-color)}:host(.secondary.reversed){--background-color:var(--dnn-color-secondary-contrast, white);--color:var(--dnn-color-secondary, blue);--border-color:var(--dnn-color-secondary, blue);--focus-color:var(--color)}:host(.tertiary){--background-color:var(--dnn-color-tertiary, yellow);--color:var(--dnn-color-tertiary-contrast, black);--focus-color:var(--background-color)}:host(.tertiary.reversed){--background-color:var(--dnn-color-tertiary-contrast, white);--color:var(--dnn-color-tertiary, blue);--border-color:var(--dnn-color-tertiary, blue);--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,:host(.hydrated) button:hover{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host(:disabled,[disabled]) button{pointer-events:none;opacity:0.5}: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}";
 
 let DnnButton = class {
   constructor(hostRef) {
@@ -80,7 +80,7 @@ let DnnButton = class {
 };
 DnnButton.style = dnnButtonCss;
 
-const dnnCheckboxCss = ":host{--focus-color:var(--dnn-color-primary, #3792ED);display:inline-flex;align-items:center;gap:0.25rem;margin:3px}button{background-color:transparent;border:0;padding:0;margin:0;outline:none;display:flex;justify-content:center;align-items:center}button svg.undefined{opacity:0.45}button:focus{box-shadow:0 0 2px 2px var(--focus-color)}";
+const dnnCheckboxCss = ":host{--focus-color:var(--dnn-color-primary, #3792ED);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:0.25rem;margin:3px}button{background-color:transparent;border:0;padding:0;margin:0;outline:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}button svg.undefined{opacity:0.45}button:focus{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}";
 
 let DnnCheckbox = class {
   constructor(hostRef) {
@@ -129,7 +129,7 @@ let DnnCheckbox = class {
 };
 DnnCheckbox.style = dnnCheckboxCss;
 
-const dnnChevronCss = ":host{display:inline-block}button{border:none;padding:0px;margin:0px;min-width:15px;min-height:15px;display:flex;justify-content:center;align-items:center;background-color:transparent;outline:none}svg{height:2em;width:2em;transition:all 300ms ease-in-out}button:focus svg,button:hover svg{color:var(--dnn-color-primary)}:host([expanded]) svg{transform:rotate(90deg)}";
+const dnnChevronCss = ":host{display:inline-block}button{border:none;padding:0px;margin:0px;min-width:15px;min-height:15px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;background-color:transparent;outline:none}svg{height:2em;width:2em;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}button:focus svg,button:hover svg{color:var(--dnn-color-primary)}:host([expanded]) svg{-webkit-transform:rotate(90deg);transform:rotate(90deg)}";
 
 let DnnChevron = class {
   constructor(hostRef) {
@@ -154,7 +154,7 @@ let DnnChevron = class {
 };
 DnnChevron.style = dnnChevronCss;
 
-const dnnCollapsibleCss = ":host{display:block}:host #container{height:0;overflow:hidden;transition:height 300ms ease-in-out}";
+const dnnCollapsibleCss = ":host{display:block}:host #container{height:0;overflow:hidden;-webkit-transition:height 300ms ease-in-out;transition:height 300ms ease-in-out}";
 
 var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -447,7 +447,7 @@ class ColorInfo {
   }
 }
 
-const dnnColorPickerCss = ".dnn-color-picker{padding:15px;max-width:400px}.dnn-color-picker .dnn-color-sliders{display:flex;flex-direction:column;min-width:200px}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b{border:1px solid #ccc;padding-bottom:var(--color-box-height, 50%);position:relative;background-color:red}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:linear-gradient(to right, white, red);mix-blend-mode:saturation}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;background:linear-gradient(to bottom, white, black);mix-blend-mode:luminosity}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button{position:absolute;bottom:calc(50% - 4px);left:calc(50% - 4px);width:8px;height:8px;z-index:3;display:block;background:none;border:none;margin-left:-4px;margin-bottom:-4px;padding:7px;background-color:#fff;border-radius:50%}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button:before{content:\"\";position:absolute;top:-1px;left:-1px;border-radius:50%}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button:after{content:\"\";position:absolute;top:0px;left:0px;border-radius:50%;width:10px;height:10px;border:2px solid #ccc}.dnn-color-picker .dnn-color-sliders .dnn-color-bar{display:flex;align-items:center;margin-top:15px}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-result{flex-direction:column;width:50px;height:50px;border-radius:50%;background:red}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue{flex:auto;margin-left:10px;height:16px;border:1px solid #ccc;position:relative;background:linear-gradient(to right, #f00 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #f00 100%)}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue button{width:10px;height:20px;position:absolute;top:-2px;left:calc(50% - 4px);border:0;padding:0;background-color:transparent;padding-left:-8px}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue button:before{content:\"\";position:absolute;top:-2px;left:0px;border-radius:3px;width:100%;height:100%;border:1px solid #ccc;background-color:#fff}.dnn-color-picker .dnn-color-fields{display:flex;flex-direction:column;justify-content:space-between}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch{display:flex;align-items:flex-end;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch button{background-color:transparent;border:none}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch button svg{width:3em;height:3em;pointer-events:none;outline:none}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields{display:flex;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field{display:flex;flex-direction:column;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input{border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.5em;padding-left:1.3em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.red{border-color:red}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.green{border-color:green}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.blue{border-color:blue}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields{display:flex;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field{display:flex;flex-direction:column;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field input{border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.5em;padding-left:1.3em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields{display:flex;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field{display:flex;flex-direction:column;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input{position:relative;border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.323em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input input{border:0;padding:0;margin:0;width:100%;height:100%;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input button{position:absolute;height:100%;top:0;right:1em;background-color:transparent;border:0;padding:0;margin:0}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input button svg{min-width:1em}";
+const dnnColorPickerCss = ".dnn-color-picker{padding:15px;max-width:400px}.dnn-color-picker .dnn-color-sliders{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:200px}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b{border:1px solid #ccc;padding-bottom:var(--color-box-height, 50%);position:relative;background-color:red}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:-webkit-gradient(linear, left top, right top, from(white), to(red));background:linear-gradient(to right, white, red);mix-blend-mode:saturation}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;background:-webkit-gradient(linear, left top, left bottom, from(white), to(black));background:linear-gradient(to bottom, white, black);mix-blend-mode:luminosity}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button{position:absolute;bottom:calc(50% - 4px);left:calc(50% - 4px);width:8px;height:8px;z-index:3;display:block;background:none;border:none;margin-left:-4px;margin-bottom:-4px;padding:7px;background-color:#fff;border-radius:50%}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button:before{content:\"\";position:absolute;top:-1px;left:-1px;border-radius:50%}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button:after{content:\"\";position:absolute;top:0px;left:0px;border-radius:50%;width:10px;height:10px;border:2px solid #ccc}.dnn-color-picker .dnn-color-sliders .dnn-color-bar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-top:15px}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-result{-ms-flex-direction:column;flex-direction:column;width:50px;height:50px;border-radius:50%;background:red}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue{-ms-flex:auto;flex:auto;margin-left:10px;height:16px;border:1px solid #ccc;position:relative;background:-webkit-gradient(linear, left top, right top, color-stop(0, #f00), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(84%, #f0f), to(#f00));background:linear-gradient(to right, #f00 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #f00 100%)}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue button{width:10px;height:20px;position:absolute;top:-2px;left:calc(50% - 4px);border:0;padding:0;background-color:transparent;padding-left:-8px}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue button:before{content:\"\";position:absolute;top:-2px;left:0px;border-radius:3px;width:100%;height:100%;border:1px solid #ccc;background-color:#fff}.dnn-color-picker .dnn-color-fields{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch button{background-color:transparent;border:none}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch button svg{width:3em;height:3em;pointer-events:none;outline:none}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields{display:-ms-flexbox;display:flex;-ms-flex-pack:space-evenly;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:auto;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input{border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.5em;padding-left:1.3em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.red{border-color:red}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.green{border-color:green}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.blue{border-color:blue}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields{display:-ms-flexbox;display:flex;-ms-flex-pack:space-evenly;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:auto;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field input{border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.5em;padding-left:1.3em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields{display:-ms-flexbox;display:flex;-ms-flex-pack:space-evenly;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:auto;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input{position:relative;border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.323em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input input{border:0;padding:0;margin:0;width:100%;height:100%;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input button{position:absolute;height:100%;top:0;right:1em;background-color:transparent;border:0;padding:0;margin:0}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input button svg{min-width:1em}";
 
 /** Reusable DNN UI component to pick a color
  * @copyright Copyright (c) .NET Foundation. All rights reserved.
@@ -746,7 +746,7 @@ __decorate$1([
 ], DnnColorPicker.prototype, "colorChangedHandler", null);
 DnnColorPicker.style = dnnColorPickerCss;
 
-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}";
+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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:1rem;text-align:center;border:2px dashed var(--border-color);border-radius:var(--border-radius);padding:1rem;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host(.dropping){background-color:var(--drop-background-color)}p{margin:0;padding:0}button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align: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:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer}label.upload-file input{display:none}.video-preview{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.video-preview button{margin:1rem}";
 
 let DnnDropzone = class {
   constructor(hostRef) {
@@ -917,7 +917,7 @@ function getMovementFromEvent(event, previousTouch) {
   return { movementX, movementY };
 }
 
-const dnnImageCropperCss = ":host{display:block}canvas{display:none}.view{visibility:hidden;opacity:0;height:0;overflow:hidden;transition:all 300ms ease-in-out}.view.visible{visibility:visible;opacity:1;height:initial;overflow:visible}.view .cropper{position:relative;width:100%}.view .cropper img{width:100%;display:block;margin:0 auto}.view .cropper .backdrop{backdrop-filter:saturate(0.5);backdrop-filter:brightness(0.5);position:absolute;left:0;top:0;width:100%;height:100%}.view .cropper .crop{position:absolute;top:0;left:0;width:100%;height:100%;outline:2px dashed white;box-shadow:black 0 0 0px 2px;backdrop-filter:saturate(2);backdrop-filter:brightness(2);cursor:move}.view .cropper .crop>div{width:20px;height:20px;background-color:white;border:2px solid rgba(0, 0, 0, 0.5);position:absolute}.view .cropper .crop>div.nw,.view .cropper .crop>div.ne{top:-17px}.view .cropper .crop>div.ne,.view .cropper .crop>div.se{right:-17px}.view .cropper .crop>div.se,.view .cropper .crop>div.sw{bottom:-17px}.view .cropper .crop>div.sw,.view .cropper .crop>div.nw{left:-17px}.view .cropper .crop>div.nw,.view .cropper .crop>div.se{cursor:nwse-resize}.view .cropper .crop>div.ne,.view .cropper .crop>div.sw{cursor:nesw-resize}dnn-modal{--max-width:512px}";
+const dnnImageCropperCss = ":host{display:block}canvas{display:none}.view{visibility:hidden;opacity:0;height:0;overflow:hidden;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.view.visible{visibility:visible;opacity:1;height:initial;overflow:visible}.view .cropper{position:relative;width:100%}.view .cropper img{width:100%;display:block;margin:0 auto}.view .cropper .backdrop{-webkit-backdrop-filter:saturate(0.5);backdrop-filter:saturate(0.5);-webkit-backdrop-filter:brightness(0.5);backdrop-filter:brightness(0.5);position:absolute;left:0;top:0;width:100%;height:100%}.view .cropper .crop{position:absolute;top:0;left:0;width:100%;height:100%;outline:2px dashed white;-webkit-box-shadow:black 0 0 0px 2px;box-shadow:black 0 0 0px 2px;-webkit-backdrop-filter:saturate(2);backdrop-filter:saturate(2);-webkit-backdrop-filter:brightness(2);backdrop-filter:brightness(2);cursor:move}.view .cropper .crop>div{width:20px;height:20px;background-color:white;border:2px solid rgba(0, 0, 0, 0.5);position:absolute}.view .cropper .crop>div.nw,.view .cropper .crop>div.ne{top:-17px}.view .cropper .crop>div.ne,.view .cropper .crop>div.se{right:-17px}.view .cropper .crop>div.se,.view .cropper .crop>div.sw{bottom:-17px}.view .cropper .crop>div.sw,.view .cropper .crop>div.nw{left:-17px}.view .cropper .crop>div.nw,.view .cropper .crop>div.se{cursor:nwse-resize}.view .cropper .crop>div.ne,.view .cropper .crop>div.sw{cursor:nesw-resize}dnn-modal{--max-width:512px}";
 
 let DnnImageCropper = class {
   constructor(hostRef) {
@@ -1290,7 +1290,7 @@ let DnnImageCropper = class {
 };
 DnnImageCropper.style = dnnImageCropperCss;
 
-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:1;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:all 300ms ease-in-out;z-index:2;position:relative;margin:10%;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 .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,: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 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:1;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;visibility:hidden;opacity:0}:host .overlay .modal{max-width:var(--max-width, 1200px);background-color:white;padding:30px;-webkit-transform:scale(2);transform:scale(2);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;z-index:2;position:relative;margin:10%;max-height:80%;border-radius:var(--dnn-controls-radius, 5px);-webkit-box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);display:block}: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:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host .overlay .modal .close:focus,:host .overlay .modal .close:hover{-webkit-box-shadow:0 0 2px 2px var(--dnn-color-primary, blue);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{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);display:block}";
 
 let DnnModal = class {
   constructor(hostRef) {
@@ -1343,7 +1343,7 @@ let DnnModal = class {
 };
 DnnModal.style = dnnModalCss;
 
-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,: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 svg,:host button:hover svg{fill:var(--focus-color);outline:var(--focus-color);color:var(--focus-color)}";
+const dnnSearchboxCss = ":host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;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;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host input:focus,:host input:hover{outline:none;-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host svg{position:absolute;top:0;right:0;height:100%;-webkit-transform:scale(0.7);transform:scale(0.7);fill:var(--color);outline:var(--color);color:var(--color);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host button{background:transparent;border:0;margin:0;padding:0}:host button:focus svg,:host button:hover svg{fill:var(--focus-color);outline:var(--focus-color);color:var(--focus-color)}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -1453,7 +1453,7 @@ let DnnTab = class {
 };
 DnnTab.style = dnnTabCss;
 
-const dnnTabsCss = ":host{display:block;--color-background:var(--dnn-color-secondary-dark, lightgray);--color-text:var(--dnn-color-secondary-contrast, #333);--color-visible:var(--dnn-color-primary, #3792ED);--color-visible-text:var(--dnn-color-primary-contrast, #FFF);--color-focus:var(--dnn-color-primary, #3792ed)}.tabTitles{display:flex;background-color:var(--color-background);color:var(--color-text)}.tabTitles button{padding:0.5rem 1rem;border:0;margin:0;background-color:transparent}.tabTitles button.visible{background-color:var(--color-visible);color:var(--color-bisible-text)}.tabTitles button:focus,.tabTitles button:hover{outline:none;box-shadow:0 0 2px 2px var(--color-focus)}.currentTab{border:1px solid var(--color-background);padding:1rem}";
+const dnnTabsCss = ":host{display:block;--color-background:var(--dnn-color-secondary-dark, lightgray);--color-text:var(--dnn-color-secondary-contrast, #333);--color-visible:var(--dnn-color-primary, #3792ED);--color-visible-text:var(--dnn-color-primary-contrast, #FFF);--color-focus:var(--dnn-color-primary, #3792ed)}.tabTitles{display:-ms-flexbox;display:flex;background-color:var(--color-background);color:var(--color-text)}.tabTitles button{padding:0.5rem 1rem;border:0;margin:0;background-color:transparent}.tabTitles button.visible{background-color:var(--color-visible);color:var(--color-bisible-text)}.tabTitles button:focus,.tabTitles button:hover{outline:none;-webkit-box-shadow:0 0 2px 2px var(--color-focus);box-shadow:0 0 2px 2px var(--color-focus)}.currentTab{border:1px solid var(--color-background);padding:1rem}";
 
 let DnnTabs = class {
   constructor(hostRef) {
@@ -1496,7 +1496,7 @@ let DnnTabs = class {
 };
 DnnTabs.style = dnnTabsCss;
 
-const dnnToggleCss = ":host{display:inline-block;outline:none;cursor:pointer}button{height:1.5em;width:2.5em;outline:none;background-color:var(--background, #888);border:0;border-radius:var(--border-radius, var(--dnn-controls-radius, 0.75em));padding:0.1em;position:relative;margin:0;transition:background-color 300ms ease-in-out;position:relative;cursor:pointer}button:hover,button:focus{box-shadow:0 0 2px 2px var(--dnn-color-primary)}button.checked{background-color:var(--background-checked, var(--dnn-color-primary, blue))}button.checked .handle{left:calc(1em + 4px)}button:disabled{opacity:0.5;cursor:not-allowed;box-shadow:none}button .handle{transition:all 300ms ease-in-out;background-color:white;width:1em;height:1em;border-radius:var(--dnn-controls-radius, 50%);position:absolute;top:calc(50% - 0.5em);left:2px}";
+const dnnToggleCss = ":host{display:inline-block;outline:none;cursor:pointer}button{height:1.5em;width:2.5em;outline:none;background-color:var(--background, #888);border:0;border-radius:var(--border-radius, var(--dnn-controls-radius, 0.75em));padding:0.1em;position:relative;margin:0;-webkit-transition:background-color 300ms ease-in-out;transition:background-color 300ms ease-in-out;position:relative;cursor:pointer}button:hover,button:focus{-webkit-box-shadow:0 0 2px 2px var(--dnn-color-primary);box-shadow:0 0 2px 2px var(--dnn-color-primary)}button.checked{background-color:var(--background-checked, var(--dnn-color-primary, blue))}button.checked .handle{left:calc(1em + 4px)}button:disabled{opacity:0.5;cursor:not-allowed;-webkit-box-shadow:none;box-shadow:none}button .handle{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;background-color:white;width:1em;height:1em;border-radius:var(--dnn-controls-radius, 50%);position:absolute;top:calc(50% - 0.5em);left:2px}";
 
 let DnnToggle = class {
   constructor(hostRef) {
@@ -1524,11 +1524,13 @@ let DnnToggle = class {
 };
 DnnToggle.style = dnnToggleCss;
 
-const dnnTreeviewItemCss = ":host{display:flex;overflow:hidden}.expander{width:24px;height:24px}.expander button{transition:all 150ms ease-in-out;background-color:transparent;border:none;padding:0;margin:0;outline:none;height:1em;display:flex;justify-content:center;align-items:center;cursor:pointer;position:relative;top:2px}.expander button svg :first-child{transition:all 150ms ease-in-out;fill:white;stroke:black}.expander.expanded button{transform:rotate(45deg)}.expander.expanded button svg :first-child{fill:black;stroke:black}div.item .item-slot{display:flex;align-items:center;gap:0.25em}div.item div.children{overflow:hidden;height:0;transition:all 150ms ease-in-out}";
+const dnnTreeviewItemCss = ":host{display:-ms-flexbox;display:flex;overflow:visible}.expander{width:24px;height:24px}.expander button{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;background-color:transparent;border:none;padding:0;margin:0;height:1em;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;position:relative;top:2px}.expander button svg :first-child{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;fill:white;stroke:black}.expander.expanded button{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.expander.expanded button svg :first-child{fill:black;stroke:black}div.item .item-slot{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.25em}div.item div.children{overflow:hidden;height:0;-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}";
 
 let DnnTreeviewItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.userExpanded = createEvent(this, "userExpanded", 3);
+    this.userCollapsed = createEvent(this, "userCollapsed", 3);
     /** Defines if the current node is expanded  */
     this.expanded = false;
     this.hasChildren = false;
@@ -1553,9 +1555,11 @@ let DnnTreeviewItem = class {
     this.expanded = !this.expanded;
     if (this.expanded) {
       this.expander.classList.add("expanded");
+      this.userExpanded.emit();
       return;
     }
     this.expander.classList.remove("expanded");
+    this.userCollapsed.emit();
   }
   render() {
     return (h(Host, null, h("div", { class: "expander", ref: el => this.expander = el }, this.hasChildren &&
@@ -1565,7 +1569,7 @@ let DnnTreeviewItem = class {
 };
 DnnTreeviewItem.style = dnnTreeviewItemCss;
 
-const dnnVerticalOverflowMenuCss = ":host{display:block;--background-color:var(--dnn-color-primary-contrast, white);--foreground-color:var(--dnn-color-primary, blue);--text-color:#222}.menu-container{display:flex;justify-content:flex-start;align-items:center;background-color:var(--background-color);color:var(--text-color)}.menu-container button{cursor:pointer}.menu-container button svg{fill:var(--foreground-color)}.menu-container .menu{margin:0.5em;display:flex;gap:1em;justify-content:flex-start;align-items:center;white-space:nowrap;width:100%}.menu-container .menu a{display:flex;align-items:center;color:var(--text-color);text-decoration:none}.menu-container .menu a svg{fill:var(--foreground-color)}.menu-container .overflow{margin-left:auto;position:relative}.menu-container .overflow button{padding:0;margin:0;background-color:transparent;border:none}.menu-container .overflow .dropdown{position:absolute;display:flex;flex-direction:column;white-space:nowrap;right:0;transition:100ms ease-in-out;height:0;overflow:hidden}.menu-container .overflow .dropdown a{color:var(--text-color)}.menu-container .overflow .dropdown a svg{fill:var(--foreground-color)}.menu-container .overflow .dropdown.visible{padding:1em;gap:0.5em;background-color:var(--background-color);box-shadow:2px 2px 4px rgba(0, 0, 0, 0.7)}.menu-container .overflow .dropdown>*{display:flex;align-items:center}";
+const dnnVerticalOverflowMenuCss = ":host{display:block;--background-color:var(--dnn-color-primary-contrast, white);--foreground-color:var(--dnn-color-primary, blue);--text-color:#222}.menu-container{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;background-color:var(--background-color);color:var(--text-color)}.menu-container .menu{margin:0.5em;display:-ms-flexbox;display:flex;gap:1em;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;white-space:nowrap;width:100%}.menu-container .overflow{margin-left:auto;position:relative}.menu-container .overflow button{cursor:pointer;padding:0;margin:0;background-color:transparent;border:none}.menu-container .overflow button svg{fill:var(--foreground-color)}.menu-container .overflow .dropdown{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;white-space:nowrap;right:0;-webkit-transition:100ms ease-in-out;transition:100ms ease-in-out;height:0;overflow:hidden}.menu-container .overflow .dropdown.visible{padding:1em;gap:0.5em;background-color:var(--background-color);-webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.7);box-shadow:2px 2px 4px rgba(0, 0, 0, 0.7)}";
 
 let DnnVerticalOverflowMenu = class {
   constructor(hostRef) {
@@ -1576,7 +1580,6 @@ let DnnVerticalOverflowMenu = class {
   }
   componentDidRender() {
     requestAnimationFrame(() => {
-      this.moveAllSlottedItemsIntoMenu();
       this.moveItemsToDropDownIfNecessery();
       this.resizeObserver = new ResizeObserver(entries => {
         for (let entry of entries) {
@@ -1592,12 +1595,8 @@ let DnnVerticalOverflowMenu = class {
       this.resizeObserver.observe(this.element);
     });
   }
-  moveAllSlottedItemsIntoMenu() {
-    const menuItems = this.element.shadowRoot.querySelector("slot").assignedElements();
-    menuItems.forEach(menuItem => this.menu.appendChild(menuItem));
-  }
   moveItemsToDropDownIfNecessery() {
-    const menuItems = Array.from(this.menu.children);
+    const menuItems = Array.from(this.menu.querySelector("slot").assignedElements());
     const availableWidth = this.menu.getBoundingClientRect().width;
     let neededWidth = parseFloat(getComputedStyle(this.element).fontSize) * 2;
     menuItems.forEach(item => neededWidth += this.getFullWidth(item));
@@ -1608,7 +1607,7 @@ let DnnVerticalOverflowMenu = class {
       if (this.dropdown == undefined) {
         return;
       }
-      this.dropdown.prepend(lastItem);
+      lastItem.slot = "dropdown";
       this.moveItemsToDropDownIfNecessery();
     }
   }
@@ -1616,16 +1615,20 @@ let DnnVerticalOverflowMenu = class {
     if (this.dropdown == undefined || !this.dropdown.hasChildNodes()) {
       return;
     }
-    const menuItems = Array.from(this.menu.children);
+    const menuItems = Array.from(this.menu.querySelector("slot").assignedElements());
     const availableWidth = this.menu.getBoundingClientRect().width;
     let neededWidth = parseFloat(getComputedStyle(this.element).fontSize) * 2;
     neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);
     menuItems.forEach(item => neededWidth += this.getFullWidth(item));
-    neededWidth += this.getFullWidth(this.dropdown.children[0]);
+    const firstItem = this.dropdown.querySelector("slot").assignedElements()[0];
+    if (firstItem != undefined) {
+      neededWidth += this.getFullWidth(firstItem);
+    }
     if (neededWidth < availableWidth) {
-      const firstItem = this.dropdown.children[0];
-      this.menu.appendChild(firstItem);
-      if (!this.dropdown.hasChildNodes()) {
+      if (firstItem != undefined) {
+        firstItem.slot = "";
+      }
+      if (firstItem == undefined) {
         this.dropdown.classList.remove("visible");
         this.showDropdownMenu = false;
         this.showDropdownButton = false;
@@ -1646,7 +1649,7 @@ let DnnVerticalOverflowMenu = class {
     if (this.showDropdownMenu) {
       this.dropdown.classList.add("visible");
       let contentHeight = 0;
-      const items = Array.from(this.dropdown.children);
+      const items = Array.from(this.dropdown.querySelector("slot").assignedElements());
       items.forEach(item => contentHeight += item.getBoundingClientRect().height);
       var emHeight = parseFloat(getComputedStyle(this.dropdown).fontSize) * 0.5;
       var additionalHeight = emHeight * (this.dropdown.children.length - 1);
@@ -1673,13 +1676,13 @@ let DnnVerticalOverflowMenu = class {
   }
   render() {
     return (h(Host, null, h("div", { class: "menu-container" }, h("div", { class: "menu", ref: el => this.menu = el }, h("slot", null)), this.showDropdownButton &&
-      h("div", { class: "overflow" }, h("button", { ref: el => this.button = el, class: "icon", onClick: () => this.toggleOverflowMenu() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("path", { d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }))), h("div", { class: "dropdown", ref: el => this.dropdown = el })))));
+      h("div", { class: "overflow" }, h("button", { ref: el => this.button = el, class: "icon", onClick: () => this.toggleOverflowMenu() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("path", { d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }))), h("div", { class: "dropdown", ref: el => this.dropdown = el }, h("slot", { name: "dropdown" }))))));
   }
   get element() { return getElement(this); }
 };
 DnnVerticalOverflowMenu.style = dnnVerticalOverflowMenuCss;
 
-const dnnVerticalSplitviewCss = ":host{display:flex;align-items:stretch;margin:0 auto;--left-pane-background-color:transparent;--right-pane-background-color:transparent}button{background-color:transparent;border:none;margin:0;padding:0;cursor:ew-resize}.pane{overflow-y:auto}.pane.transition{transition:all 300ms ease-in-out}.pane.left{background-color:var(--left-pane-background-color)}.pane.right{background-color:var(--right-pane-background-color)}";
+const dnnVerticalSplitviewCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;margin:0 auto;position:relative;--left-pane-background-color:transparent;--right-pane-background-color:transparent}button{border:none;margin:0;padding:0;cursor:ew-resize;position:absolute;height:100%;background-color:transparent}button.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane{overflow-y:auto}.pane.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane.left{background-color:var(--left-pane-background-color)}.pane.right{background-color:var(--right-pane-background-color);-ms-flex-positive:1;flex-grow:1}";
 
 let DnnVerticalSplitview = class {
   constructor(hostRef) {
@@ -1697,6 +1700,7 @@ let DnnVerticalSplitview = class {
     const panes = this.element.shadowRoot.querySelectorAll(".pane");
     requestAnimationFrame(() => {
       panes.forEach(pane => pane.classList.add("transition"));
+      this.splitter.classList.add("transition");
       requestAnimationFrame(() => {
         const fullWidth = this.element.getBoundingClientRect().width;
         let newLeft = fullWidth * newWidth / 100;
@@ -1710,6 +1714,7 @@ let DnnVerticalSplitview = class {
         this.rightWidth = fullWidth - newLeft;
         setTimeout(() => {
           panes.forEach(pane => pane.classList.remove("transition"));
+          this.splitter.classList.remove("transition");
         }, 300);
       });
     });
@@ -1783,7 +1788,10 @@ let DnnVerticalSplitview = class {
   render() {
     return (h(Host, null, h("div", { class: "left pane", style: {
         width: `${this.leftWidth}px`,
-      } }, h("slot", { name: "left" })), h("button", { onMouseDown: e => this.handleMouseDown(e), onTouchStart: e => this.handleMouseDown(e), onKeyDown: e => this.handleKeyDown(e), style: { minWidth: `${this.splitterWidth.toString()}px` } }, h("slot", null)), h("div", { class: "right pane", style: {
+      } }, h("slot", { name: "left" })), h("button", { onMouseDown: e => this.handleMouseDown(e), onTouchStart: e => this.handleMouseDown(e), onKeyDown: e => this.handleKeyDown(e), ref: el => this.splitter = el, style: {
+        minWidth: `${this.splitterWidth.toString()}px`,
+        left: `${this.leftWidth - 2}px`,
+      } }, h("slot", null)), h("div", { class: "right pane", style: {
         width: `${this.rightWidth}px`,
       } }, h("slot", { name: "right" }))));
   }