@dnncommunity/dnn-elements 0.13.1 → 0.14.0-beta.1

package/dist/dnn/{p-7acf3104.entry.js → p-fef1bc51.entry.js}

@@ -1,11 +1,11 @@
-import{r as t,c as e,h as i,H as o,g as s}from"./p-bd3d3361.js";import{D as n}from"./p-0e94f5ee.js";const r=":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}";let l=class{constructor(i){t(this,i);this.confirmed=e(this,"confirmed",3);this.canceled=e(this,"canceled",3);this.type="primary";this.reversed=false;this.size="normal";this.confirm=false;this.confirmYesText="Yes";this.confirmNoText="No";this.confirmMessage="Are you sure ?";this.disabled=false;this.modalVisible=false}componentDidLoad(){this.el.classList.add(this.type);if(this.reversed){this.el.classList.add("reversed")}if(this.size!=="normal"){this.el.classList.add(this.size)}this.modal=this.el.shadowRoot.querySelector("dnn-modal")}handleConfirm(){this.modal.hide();this.modalVisible=false;this.confirmed.emit()}handleCancel(){this.modal.hide();this.modalVisible=false;this.canceled.emit()}handleClick(){if(this.confirm&&!this.modalVisible){this.modal.show();this.modalVisible=true}}render(){return i(o,{disabled:this.disabled,style:{"pointer-events":this.disabled?"none":"all"}},i("button",{class:"button",onClick:()=>this.handleClick(),disabled:this.disabled},i("slot",null)),this.confirm&&i("dnn-modal",{showCloseButton:false,backdropDismiss:false},i("p",null,this.confirmMessage),i("div",{style:{display:"flex",justifyContent:"flex-end"}},i("dnn-button",{type:"primary",style:{margin:"5px"},onClick:()=>this.handleConfirm()},this.confirmYesText),i("dnn-button",{type:"secondary",style:{margin:"5px"},onClick:()=>this.handleCancel()},this.confirmNoText))))}get el(){return s(this)}};l.style=r;const a=":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)}";let h=class{constructor(i){t(this,i);this.checkedchange=e(this,"checkedchange",7);this.checked=false;this.useIntermediate=false}changeState(){if(!this.useIntermediate){this.checked=!this.checked;this.emitEvents();return}if(this.checked===true){this.checked=false;this.button.classList.remove("undefined");this.emitEvents();return}if(this.checked===undefined){this.checked=true;this.button.classList.remove("undefined");this.emitEvents();return}if(this.checked===false){this.checked=undefined;this.button.classList.add("undefined");this.emitEvents();return}}emitEvents(){this.checkedchange.emit(this.checked)}render(){return i(o,null,i("button",{class:"icon",onClick:()=>this.changeState(),ref:t=>this.button=t},this.checked===false&&i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"})),this.checked===true&&i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"})),this.checked===undefined&&i("svg",{class:"undefined",xmlns:"http://www.w3.org/2000/svg","enable-background":"new 0 0 24 24",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("g",null,i("rect",{fill:"none",height:"24",width:"24"})),i("g",null,i("g",null,i("g",null,i("path",{d:"M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z"})))))),i("label",{htmlFor:this.el.id,onClick:()=>this.changeState()},i("slot",null)))}get el(){return s(this)}};h.style=a;const d=":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)}";let c=class{constructor(i){t(this,i);this.changed=e(this,"changed",7);this.expandText="expand";this.collapseText="collapse";this.expanded=false}handleExpandedChanged(t){this.changed.emit(t)}render(){return i(o,null,i("button",{"aria-label":this.expanded?this.collapseText:this.expandText,onClick:()=>this.expanded=!this.expanded},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"}))))}static get watchers(){return{expanded:["handleExpandedChanged"]}}};c.style=d;const u=":host{display:block}:host #container{height:0;overflow:hidden;transition:height 300ms ease-in-out}";var p=undefined&&undefined.__decorate||function(t,e,i,o){var s=arguments.length,n=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,r;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")n=Reflect.decorate(t,e,i,o);else for(var l=t.length-1;l>=0;l--)if(r=t[l])n=(s<3?r(n):s>3?r(e,i,n):r(e,i))||n;return s>3&&n&&Object.defineProperty(e,i,n),n};let f=class{constructor(i){t(this,i);this.dnnCollapsibleHeightChanged=e(this,"dnnCollapsibleHeightChanged",7);this.expanded=false;this.transitionDuration=150;this.animating=false}handleExpandedChanged(t){this.animating=true;requestAnimationFrame((()=>{const e=this.el.shadowRoot.querySelector("#container");if(t){e.style.height=e.scrollHeight+"px"}else{e.style.height="0px"}}));requestAnimationFrame((()=>{this.animating=false;this.dnnCollapsibleHeightChanged.emit()}))}async updateSize(){this.updateComponentSize()}updateComponentSize(){if(this.expanded){this.animating=true;requestAnimationFrame((()=>{const t=this.el.shadowRoot.querySelector("#container");let e=0;t.querySelector("slot").assignedElements().forEach((t=>{e+=t.scrollHeight}));t.style.height=e+"px"}))}}handleOtherCollapsibleHeightChanged(){setTimeout((()=>{this.updateComponentSize()}),this.transitionDuration)}handleMutation(t){t.forEach((t=>{requestAnimationFrame((()=>{t.target.closest("dnn-collapsible").updateSize()}))}))}componentWillLoad(){this.mutationObserver=new MutationObserver((t=>{this.handleMutation(t)}))}componentDidLoad(){const t=this.el.shadowRoot.querySelector("#container");t.style.transitionDuration=this.transitionDuration+"ms";const e=[this.el];e.forEach((t=>{this.mutationObserver.observe(t,{attributes:true,characterData:true,childList:true,subtree:true})}));const i=this.el.shadowRoot.querySelector("slot");i.addEventListener("slotchange",(()=>{this.updateSize()}))}disconnectedCallback(){this.mutationObserver.disconnect()}render(){return i(o,null,i("div",{id:"container"},i("slot",null)))}get el(){return s(this)}static get watchers(){return{expanded:["handleExpandedChanged"]}}};p([n()],f.prototype,"updateSize",null);f.style=u;
+import{r as t,c as e,h as i,H as o,g as s}from"./p-d10994a3.js";import{D as n}from"./p-0e94f5ee.js";const r=":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}";let l=class{constructor(i){t(this,i);this.confirmed=e(this,"confirmed",3);this.canceled=e(this,"canceled",3);this.type="primary";this.reversed=false;this.size="normal";this.confirm=false;this.confirmYesText="Yes";this.confirmNoText="No";this.confirmMessage="Are you sure ?";this.disabled=false;this.modalVisible=false}componentDidLoad(){this.el.classList.add(this.type);if(this.reversed){this.el.classList.add("reversed")}if(this.size!=="normal"){this.el.classList.add(this.size)}this.modal=this.el.shadowRoot.querySelector("dnn-modal")}handleConfirm(){this.modal.hide();this.modalVisible=false;this.confirmed.emit()}handleCancel(){this.modal.hide();this.modalVisible=false;this.canceled.emit()}handleClick(){if(this.confirm&&!this.modalVisible){this.modal.show();this.modalVisible=true}}render(){return i(o,{disabled:this.disabled,style:{"pointer-events":this.disabled?"none":"all"}},i("button",{class:"button",onClick:()=>this.handleClick(),disabled:this.disabled},i("slot",null)),this.confirm&&i("dnn-modal",{showCloseButton:false,backdropDismiss:false},i("p",null,this.confirmMessage),i("div",{style:{display:"flex",justifyContent:"flex-end"}},i("dnn-button",{type:"primary",style:{margin:"5px"},onClick:()=>this.handleConfirm()},this.confirmYesText),i("dnn-button",{type:"secondary",style:{margin:"5px"},onClick:()=>this.handleCancel()},this.confirmNoText))))}get el(){return s(this)}};l.style=r;const a=":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)}";let h=class{constructor(i){t(this,i);this.checkedchange=e(this,"checkedchange",7);this.checked=false;this.useIntermediate=false}changeState(){if(!this.useIntermediate){this.checked=!this.checked;this.emitEvents();return}if(this.checked===true){this.checked=false;this.button.classList.remove("undefined");this.emitEvents();return}if(this.checked===undefined){this.checked=true;this.button.classList.remove("undefined");this.emitEvents();return}if(this.checked===false){this.checked=undefined;this.button.classList.add("undefined");this.emitEvents();return}}emitEvents(){this.checkedchange.emit(this.checked)}render(){return i(o,null,i("button",{class:"icon",onClick:()=>this.changeState(),ref:t=>this.button=t},this.checked===false&&i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"})),this.checked===true&&i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"})),this.checked===undefined&&i("svg",{class:"undefined",xmlns:"http://www.w3.org/2000/svg","enable-background":"new 0 0 24 24",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("g",null,i("rect",{fill:"none",height:"24",width:"24"})),i("g",null,i("g",null,i("g",null,i("path",{d:"M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z"})))))),i("label",{htmlFor:this.el.id,onClick:()=>this.changeState()},i("slot",null)))}get el(){return s(this)}};h.style=a;const d=":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)}";let c=class{constructor(i){t(this,i);this.changed=e(this,"changed",7);this.expandText="expand";this.collapseText="collapse";this.expanded=false}handleExpandedChanged(t){this.changed.emit(t)}render(){return i(o,null,i("button",{"aria-label":this.expanded?this.collapseText:this.expandText,onClick:()=>this.expanded=!this.expanded},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"}))))}static get watchers(){return{expanded:["handleExpandedChanged"]}}};c.style=d;const u=":host{display:block}:host #container{height:0;overflow:hidden;transition:height 300ms ease-in-out}";var p=undefined&&undefined.__decorate||function(t,e,i,o){var s=arguments.length,n=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,r;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")n=Reflect.decorate(t,e,i,o);else for(var l=t.length-1;l>=0;l--)if(r=t[l])n=(s<3?r(n):s>3?r(e,i,n):r(e,i))||n;return s>3&&n&&Object.defineProperty(e,i,n),n};let f=class{constructor(i){t(this,i);this.dnnCollapsibleHeightChanged=e(this,"dnnCollapsibleHeightChanged",7);this.expanded=false;this.transitionDuration=150;this.animating=false}handleExpandedChanged(t){this.animating=true;requestAnimationFrame((()=>{const e=this.el.shadowRoot.querySelector("#container");if(t){e.style.height=e.scrollHeight+"px"}else{e.style.height="0px"}}));requestAnimationFrame((()=>{this.animating=false;this.dnnCollapsibleHeightChanged.emit()}))}async updateSize(){this.updateComponentSize()}updateComponentSize(){if(this.expanded){this.animating=true;requestAnimationFrame((()=>{const t=this.el.shadowRoot.querySelector("#container");let e=0;t.querySelector("slot").assignedElements().forEach((t=>{e+=t.scrollHeight}));t.style.height=e+"px"}))}}handleOtherCollapsibleHeightChanged(){setTimeout((()=>{this.updateComponentSize()}),this.transitionDuration)}handleMutation(t){t.forEach((t=>{requestAnimationFrame((()=>{t.target.closest("dnn-collapsible").updateSize()}))}))}componentWillLoad(){this.mutationObserver=new MutationObserver((t=>{this.handleMutation(t)}))}componentDidLoad(){const t=this.el.shadowRoot.querySelector("#container");t.style.transitionDuration=this.transitionDuration+"ms";const e=[this.el];e.forEach((t=>{this.mutationObserver.observe(t,{attributes:true,characterData:true,childList:true,subtree:true})}));const i=this.el.shadowRoot.querySelector("slot");i.addEventListener("slotchange",(()=>{this.updateSize()}))}disconnectedCallback(){this.mutationObserver.disconnect()}render(){return i(o,null,i("div",{id:"container"},i("slot",null)))}get el(){return s(this)}static get watchers(){return{expanded:["handleExpandedChanged"]}}};p([n()],f.prototype,"updateSize",null);f.style=u;
 /** Color utility class with hsl and rgb converters
  * based on math at https://en.wikipedia.org/wiki/HSL_and_HSV
  * @copyright Copyright (c) .NET Foundation. All rights reserved.
  * @license MIT
- */class v{constructor(){this._hue=0;this._saturation=0;this._lightness=0}get hue(){return this._hue}set hue(t){if(t<0){t=0}if(t>359){t=359}this._hue=t}get saturation(){return this._saturation}set saturation(t){if(t<0){t=0}if(t>1){t=1}this._saturation=t}get lightness(){return this._lightness}set lightness(t){if(t<0){t=0}if(t>1){t=1}this._lightness=t}get red(){return this.getRGB().red}set red(t){this.setHSL(t,this.green,this.blue)}get green(){return this.getRGB().green}set green(t){this.setHSL(this.red,t,this.blue)}get blue(){return this.getRGB().blue}set blue(t){this.setHSL(this.red,this.green,t)}get hex(){var t=this.getHex(this.red);var e=this.getHex(this.green);var i=this.getHex(this.blue);return t+e+i}set hex(t){this.red=parseInt(t.substr(0,2));this.green=parseInt(t.substr(2,2));this.blue=parseInt(t.substr(4,2))}get contrastColor(){const t=(this.red*299+this.green*587+this.blue*114)/1e3;if(t>127){return"000000"}return"FFFFFF"}getRGB(){const t=(1-Math.abs(2*this._lightness-1))*this.saturation;const e=this._hue/60;const i=t*(1-Math.abs(e%2-1));let o=0,s=0,n=0;if(0<=e&&e<=1){o=t;s=i}else if(1<=e&&e<=2){s=t;o=i}else if(2<=e&&e<=3){s=t;n=i}else if(3<=e&&e<=4){n=t;s=i}else if(4<=e&&e<=5){n=t;o=i}else if(5<=e&&e<=6){o=t;n=i}const r=this._lightness-t/2;return{red:Math.round((o+r)*255),green:Math.round((s+r)*255),blue:Math.round((n+r)*255)}}setHSL(t,e,i){const o=t/255,s=e/255,n=i/255;const r=Math.min(o,s,n);const l=Math.max(o,s,n);const a=l-r;let h=0,d=0,c=0;if(a===0){h=0}else if(l===o){h=60*((s-n)/a)}else if(l===s){h=60*(2+(n-o)/a)}else if(l===n){h=60*(4+(o-s)/a)}if(h<0){h=h+360}if(h>359){h=359}c=(l+r)/2;if(l===0||r===1){d=0}else{d=(l-c)/Math.min(c,1-c)}this._hue=h;this._saturation=d;this._lightness=c}getHex(t){var e=t.toString(16);if(e.length<2){e="0"+e}return e}}const b='.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}';
+ */class v{constructor(){this._hue=0;this._saturation=0;this._lightness=0}get hue(){return this._hue}set hue(t){if(t<0){t=0}if(t>359){t=359}this._hue=t}get saturation(){return this._saturation}set saturation(t){if(t<0){t=0}if(t>1){t=1}this._saturation=t}get lightness(){return this._lightness}set lightness(t){if(t<0){t=0}if(t>1){t=1}this._lightness=t}get red(){return this.getRGB().red}set red(t){this.setHSL(t,this.green,this.blue)}get green(){return this.getRGB().green}set green(t){this.setHSL(this.red,t,this.blue)}get blue(){return this.getRGB().blue}set blue(t){this.setHSL(this.red,this.green,t)}get hex(){var t=this.getHex(this.red);var e=this.getHex(this.green);var i=this.getHex(this.blue);return t+e+i}set hex(t){this.red=parseInt(t.substr(0,2));this.green=parseInt(t.substr(2,2));this.blue=parseInt(t.substr(4,2))}get contrastColor(){const t=(this.red*299+this.green*587+this.blue*114)/1e3;if(t>127){return"000000"}return"FFFFFF"}getRGB(){const t=(1-Math.abs(2*this._lightness-1))*this.saturation;const e=this._hue/60;const i=t*(1-Math.abs(e%2-1));let o=0,s=0,n=0;if(0<=e&&e<=1){o=t;s=i}else if(1<=e&&e<=2){s=t;o=i}else if(2<=e&&e<=3){s=t;n=i}else if(3<=e&&e<=4){n=t;s=i}else if(4<=e&&e<=5){n=t;o=i}else if(5<=e&&e<=6){o=t;n=i}const r=this._lightness-t/2;return{red:Math.round((o+r)*255),green:Math.round((s+r)*255),blue:Math.round((n+r)*255)}}setHSL(t,e,i){const o=t/255,s=e/255,n=i/255;const r=Math.min(o,s,n);const l=Math.max(o,s,n);const a=l-r;let h=0,d=0,c=0;if(a===0){h=0}else if(l===o){h=60*((s-n)/a)}else if(l===s){h=60*(2+(n-o)/a)}else if(l===n){h=60*(4+(o-s)/a)}if(h<0){h=h+360}if(h>359){h=359}c=(l+r)/2;if(l===0||r===1){d=0}else{d=(l-c)/Math.min(c,1-c)}this._hue=h;this._saturation=d;this._lightness=c}getHex(t){var e=t.toString(16);if(e.length<2){e="0"+e}return e}}const g='.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}';
 /** Reusable DNN UI component to pick a color
  * @copyright Copyright (c) .NET Foundation. All rights reserved.
  * @license MIT
- */var g=undefined&&undefined.__decorate||function(t,e,i,o){var s=arguments.length,n=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,r;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")n=Reflect.decorate(t,e,i,o);else for(var l=t.length-1;l>=0;l--)if(r=t[l])n=(s<3?r(n):s>3?r(e,i,n):r(e,i))||n;return s>3&&n&&Object.defineProperty(e,i,n),n};let m=class{constructor(i){t(this,i);this.colorChanged=e(this,"colorChanged",7);this.color="FFFFFF";this.colorBoxHeight="50%";this.rgbDisplay="flex";this.hslDisplay="none";this.hexDisplay="none";this.handleSaturationLightnessMouseDown=t=>{t.preventDefault();this.handleDragLightnessSaturation(t);window.addEventListener("mousemove",this.handleDragLightnessSaturation);window.addEventListener("mouseup",this.handleSaturationLightnessMouseUp)};this.handleDragLightnessSaturation=t=>{const e=this.saturationLightnessBox.getBoundingClientRect();let i=t.clientX-e.left;if(i<0){i=0}if(i>e.width){i=e.width}i=i/e.width;let o=t.clientY-e.top;if(o<0){o=0}if(o>e.height){o=e.height}o=1-o/e.height;const s=new v;s.hue=this.currentColor.hue;s.saturation=i;s.lightness=o;this.currentColor=s};this.handleSaturationLightnessMouseUp=()=>{window.removeEventListener("mousemove",this.handleDragLightnessSaturation);window.removeEventListener("mouseup",this.handleSaturationLightnessMouseUp)};this.handleHueMouseDown=t=>{t.preventDefault();this.handleDragHue(t);window.addEventListener("mousemove",this.handleDragHue);window.addEventListener("mouseup",this.handleHueMouseUp)};this.handleHueMouseUp=()=>{window.removeEventListener("mousemove",this.handleDragHue);window.removeEventListener("mouseup",this.handleHueMouseUp)};this.handleDragHue=t=>{const e=this.hueRange.getBoundingClientRect();let i=t.clientX-e.left;if(i<0){i=0}if(i>e.width){i=e.width}i=i/e.width*360;const o=new v;o.hue=i;o.saturation=this.currentColor.saturation;o.lightness=this.currentColor.lightness;this.currentColor=o};this.handleComponentValueChange=(t,e)=>{let i=parseInt(t.target.value);if(isNaN(i)){return}const o=new v;if(i<0){i=0}if(i>255){i=255}let s=this.currentColor.red;let n=this.currentColor.green;let r=this.currentColor.blue;switch(e){case"red":s=i;break;case"green":n=i;break;case"blue":r=i;break}o.green=n;o.red=s;o.blue=r;this.currentColor=o};this.handleHSLChange=(t,e)=>{let i=parseInt(t.target.value);if(isNaN(i)){return}const o=new v;if(i!=null){let t=this.currentColor.hue;let s=this.currentColor.saturation;let n=this.currentColor.lightness;switch(e){case"hue":if(i<0){i=0}if(i>359){i=0}t=i;break;case"saturation":if(i<0){i=0}if(i>100){i=100}s=i/100;break;case"lightness":if(i<0){i=0}if(i>100){i=100}n=i/100;break}o.hue=t;o.saturation=s;o.lightness=n;this.currentColor=o}};this.handleSaturationLightnessKeyDown=t=>{let e=new v;e.hue=this.currentColor.hue;e.saturation=this.currentColor.saturation;e.lightness=this.currentColor.lightness;let i=.01;if(t.shiftKey){i=.1}switch(t.key){case"ArrowUp":e.lightness+=i;break;case"ArrowDown":e.lightness-=i;break;case"ArrowLeft":e.saturation-=i;break;case"ArrowRight":e.saturation+=i}this.currentColor=e};this.handleHueKeyDown=t=>{let e=new v;e.hue=this.currentColor.hue;e.saturation=this.currentColor.saturation;e.lightness=this.currentColor.lightness;let i=1;if(t.shiftKey){i=10}switch(t.key){case"ArrowLeft":e.hue-=i;break;case"ArrowRight":e.hue+=i}this.currentColor=e}}colorChangedHandler(t){this.colorChanged.emit(t)}handeCurrentColorChanged(t){this.colorChangedHandler(t)}componentWillLoad(){this.handleHexChange(this.color)}componentDidLoad(){this.el.style.setProperty("--color-box-height",this.colorBoxHeight.toString())}getHex(){return this.getDoublet(this.currentColor.red)+this.getDoublet(this.currentColor.green)+this.getDoublet(this.currentColor.blue)}getContrast(){return this.currentColor.contrastColor}getDoublet(t){const e=t.toString(16).toUpperCase();if(e.length===1){return"0"+e}return e}handleHexChange(t){const e=new v;if(t.match(/^(?:[\da-f]{3}|[\da-f]{6})$/i).length>0){if(t.length===3){let e=t[0]+t[0]+t[1]+t[1]+t[2]+t[2];t=e}e.red=parseInt(t.substr(0,2),16);e.green=parseInt(t.substr(2,2),16);e.blue=parseInt(t.substr(4,2),16)}else{e.red=this.currentColor.red;e.green=this.currentColor.green;e.blue=this.currentColor.blue}this.currentColor=e}switchColorMode(t){switch(t.target.id){case"rgb-switch":this.rgbDisplay="none";this.hslDisplay="none";this.hexDisplay="flex";break;case"hex-switch":this.rgbDisplay="none";this.hslDisplay="flex";this.hexDisplay="none";break;case"hsl-switch":this.rgbDisplay="flex";this.hslDisplay="none";this.hexDisplay="none";break;default:this.rgbDisplay="flex";this.hslDisplay="none";this.hexDisplay="none"}}render(){const t=this.currentColor.hue;const e=this.currentColor.saturation;const o=this.currentColor.lightness;const s=this.currentColor.red;const n=this.currentColor.green;const r=this.currentColor.blue;return i("div",{class:"dnn-color-picker"},i("div",{class:"dnn-color-sliders"},i("div",{class:"dnn-color-s-b",ref:t=>this.saturationLightnessBox=t,style:{backgroundColor:`hsl(${t},100%,50%)`},onMouseDown:this.handleSaturationLightnessMouseDown.bind(this)},i("button",{class:"dnn-s-b-picker","aria-label":"Press up or down to adjust lightness, left or right to adjust saturation, hold shift to move by 10%",role:"slider","aria-valuemin":"0","aria-valuemax":"100","aria-valuetext":`Saturation: ${Math.round(this.currentColor.saturation*100)}%, Lightness: ${Math.round(this.currentColor.lightness*100)}%`,style:{left:Math.round(e*100)+"%",bottom:Math.round(o*100)+"%"},onKeyDown:t=>this.handleSaturationLightnessKeyDown(t)})),i("div",{class:"dnn-color-bar"},i("div",{class:"dnn-color-result",style:{backgroundColor:"#"+this.getHex(),boxShadow:"0 0 2px 1px "+"#"+this.getContrast()}}),i("div",{class:"dnn-color-hue",ref:t=>this.hueRange=t,onMouseDown:this.handleHueMouseDown.bind(this)},i("button",{class:"dnn-hue-picker","aria-label":"Press left or right to adjust hue, hold shift to move by 10 degrees",role:"slider","aria-valuemin":"0","aria-valuemax":"359","aria-valuenow":Math.round(t),style:{left:(t/359*100).toString()+"%"},onKeyDown:t=>this.handleHueKeyDown(t)})))),i("div",{class:"dnn-color-fields"},i("div",{class:"dnn-rgb-color-fields",style:{display:this.rgbDisplay}},i("div",{class:"dnn-rgb-color-field"},i("label",null,"R"),i("input",{type:"number",min:"0",max:"255",step:"1",class:"red",value:s,"aria-label":"red value",onChange:t=>this.handleComponentValueChange(t,"red")})),i("div",{class:"dnn-rgb-color-field"},i("label",null,"G"),i("input",{type:"number",min:"0",max:"255",class:"green",value:n,"aria-label":"green value",onChange:t=>this.handleComponentValueChange(t,"green")})),i("div",{class:"dnn-rgb-color-field"},i("label",null,"B"),i("input",{type:"number",min:"0",max:"255",class:"blue",value:r,"aria-label":"blue value",onChange:t=>this.handleComponentValueChange(t,"blue")})),i("div",{class:"dnn-color-mode-switch"},i("button",{id:"rgb-switch",onClick:this.switchColorMode.bind(this),"aria-label":"switch to hexadecimal value entry"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"}))))),i("div",{class:"dnn-hsl-color-fields",style:{display:this.hslDisplay}},i("div",{class:"dnn-hsl-color-field"},i("label",null,"H"),i("input",{type:"number",min:"0",max:"359",step:1,value:Math.round(t),"aria-label":"Hue",onChange:t=>this.handleHSLChange(t,"hue")})),i("div",{class:"dnn-hsl-color-field"},i("label",null,"S"),i("input",{type:"number",min:"0",max:"100",step:1,value:Math.round(e*100),"aria-label":"Saturation",onChange:t=>this.handleHSLChange(t,"saturation")})),i("div",{class:"dnn-hsl-color-field"},i("label",null,"L"),i("input",{type:"number",min:"0",max:"100",step:1,value:Math.round(o*100),"aria-label":"Lightness",onChange:t=>this.handleHSLChange(t,"lightness")})),i("div",{class:"dnn-color-mode-switch"},i("button",{id:"hsl-switch",onClick:this.switchColorMode.bind(this),"aria-label":"Switch to red, green, blue entry mode"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"}))))),i("div",{class:"dnn-hex-color-fields",style:{display:this.hexDisplay}},i("div",{class:"dnn-hex-color-field"},i("label",null,"HEX"),i("div",{class:"hex-input"},i("input",{type:"text","aria-label":"Hexadecimal value",value:this.getHex(),onChange:t=>this.handleHexChange(t.target.value)}),i("button",{class:"copy","aria-label":"copy value"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"}))))),i("div",{class:"dnn-color-mode-switch"},i("button",{id:"hex-switch",onClick:this.switchColorMode.bind(this),"aria-label":"Switch to hue saturation lightness values"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"})))))))}get el(){return s(this)}static get watchers(){return{currentColor:["handeCurrentColorChanged"]}}};g([n(100)],m.prototype,"colorChangedHandler",null);m.style=b;const x=":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}";let w=class{constructor(i){t(this,i);this.filesSelected=e(this,"filesSelected",7);this.resx={dragAndDropFile:"Drag and drop a file",capture:"Capture",or:"or",takePicture:"Take a picture",uploadFile:"Upload a file"};this.allowCameraMode=false;this.captureQuality=.8;this.canTakeSnapshots=false;this.takingPicture=false;this.handleDragOver=t=>{t.stopPropagation();t.preventDefault();t.dataTransfer.dropEffect="copy";this.dropzone.classList.add("dropping")};this.handleDrop=t=>{t.stopPropagation();t.preventDefault();const e=t.dataTransfer.files;if(this.hasInvalidExtensions(e)){return}var i=this.getFilesFromFileList(e);this.filesSelected.emit(i)}}componentDidLoad(){if(this.allowCameraMode){this.checkIfBrowserCanTakeSnapshots().then((t=>this.canTakeSnapshots=t))}if(this.allowedExtensions!=undefined&&this.allowedExtensions.length>0){var t=this.allowedExtensions.map((t=>`.${t}`));var e=t.join(",");this.fileInput.accept=e}}checkIfBrowserCanTakeSnapshots(){return new Promise((t=>{const e=navigator.mediaDevices;if(e==undefined||e.enumerateDevices==undefined){t(false)}e.enumerateDevices().then((e=>{var i=e.some((t=>t.kind=="videoinput"));t(i)}))}))}getFilesFromFileList(t){var e=[];for(let i=0;i<t.length;i++){const o=t[i];e.push(o)}return e}handleUploadButton(t){let e=this.getFilesFromFileList(t.files);this.filesSelected.emit(e)}hasInvalidExtensions(t){var e=false;for(let o=0;o<t.length;o++){const s=t[o];var i=/(?:\.([^.]+))?$/;const n=i.exec(s.name)[1];if(n==undefined){e=true}if(this.allowedExtensions!=undefined&&!this.allowedExtensions.includes(n)){e=true}return e}}takeSnapshot(){this.takingPicture=true;navigator.mediaDevices.getUserMedia({video:true,audio:false}).then((t=>{this.videoPreview.srcObject=t;this.videoPreview.play().then((()=>{this.videoSettings=t.getVideoTracks()[0].getSettings()}))})).catch((t=>alert(t)))}applySnapshot(){var t=document.createElement("canvas");const e=t.getContext("2d");t.width=this.videoSettings.width;t.height=this.videoSettings.height;e.drawImage(this.videoPreview,0,0);t.toBlob((t=>{var e=new File([t],"image.jpeg",{type:"image/jpeg"});this.takingPicture=false;var i=[e];this.filesSelected.emit(i)}),"image/jpeg",this.captureQuality)}render(){var t,e,s,n,r,l;return i(o,{ref:t=>this.dropzone=t,class:"dropzone",onDragOver:this.handleDragOver,onDrop:this.handleDrop,onDragLeave:()=>this.dropzone.classList.remove("dropping")},!this.takingPicture&&[i("p",null,(t=this.resx)===null||t===void 0?void 0:t.dragAndDropFile),i("p",null,"- ",(e=this.resx)===null||e===void 0?void 0:e.or," -"),i("label",{class:"upload-file"},i("input",{type:"file",ref:t=>this.fileInput=t,onChange:t=>this.handleUploadButton(t.target)}),i("span",null,i("svg",{xmlns:"http://www.w3.org/2000/svg","enable-background":"new 0 0 24 24",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("g",null,i("rect",{fill:"none",height:"24",width:"24"})),i("g",null,i("path",{d:"M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z"}))))," ",(s=this.resx)===null||s===void 0?void 0:s.uploadFile),this.canTakeSnapshots&&[i("p",null,"- ",(n=this.resx)===null||n===void 0?void 0:n.or," -"),i("button",{onClick:()=>this.takeSnapshot()},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("circle",{cx:"12",cy:"12",r:"3.2"}),i("path",{d:"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"})),(r=this.resx)===null||r===void 0?void 0:r.takePicture)]],this.takingPicture&&i("div",{class:"video-preview"},i("video",{ref:t=>this.videoPreview=t}),i("button",{onClick:()=>this.applySnapshot()},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("circle",{cx:"12",cy:"12",r:"3.2"}),i("path",{d:"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"}))," ",(l=this.resx)===null||l===void 0?void 0:l.capture)))}};w.style=x;var k;(function(t){t[t["nw"]=0]="nw";t[t["ne"]=1]="ne";t[t["se"]=2]="se";t[t["sw"]=3]="sw"})(k||(k={}));const y=":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}";let C=class{constructor(i){t(this,i);this.imageCropChanged=e(this,"imageCropChanged",7);this.width=600;this.height=600;this.resx={capture:"Capture",dragAndDropFile:"Drag and drop an image",or:"or",takePicture:"Take a picture",uploadFile:"Upload an image",imageTooSmall:"The image you are attempting to upload does not meet the minimum size requirement of {width} pixels by {height} pixels. Please upload a larger image.",modalCloseText:"Close"};this.quality=.8;this.preventUndersized=false;this.handleCropMouseDown=t=>{t.stopPropagation();t.preventDefault();const e=t.target;const i=e.classList[0];document.addEventListener("mouseup",this.handleImageCropFinished,false);document.addEventListener("touchend",this.handleImageCropFinished,false);switch(i){case"crop":document.addEventListener("mousemove",this.handleCropDrag,false);document.addEventListener("touchmove",this.handleCropDrag,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleCropDrag)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleCropDrag)));break;case"nw":document.addEventListener("mousemove",this.handleNwMouseMove,false);document.addEventListener("touchmove",this.handleNwMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleNwMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleNwMouseMove)));break;case"ne":document.addEventListener("mousemove",this.handleNeMouseMove,false);document.addEventListener("touchmove",this.handleNeMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleNeMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleNeMouseMove)));break;case"se":document.addEventListener("mousemove",this.handleSeMouseMove,false);document.addEventListener("touchmove",this.handleSeMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleSeMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleSeMouseMove)));break;case"sw":document.addEventListener("mousemove",this.handleSwMouseMove,false);document.addEventListener("touchmove",this.handleSwMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleSwMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleSwMouseMove)));break}};this.handleImageCropFinished=t=>{this.emitImage();document.removeEventListener("mouseup",this.handleImageCropFinished);this.previousTouch=undefined};this.handleNwMouseMove=t=>{this.handleCornerDrag(t,k.nw)};this.handleNeMouseMove=t=>{this.handleCornerDrag(t,k.ne)};this.handleSeMouseMove=t=>{this.handleCornerDrag(t,k.se)};this.handleSwMouseMove=t=>{this.handleCornerDrag(t,k.sw)};this.handleCornerDrag=(t,e)=>{if(!this.isMouseStillInTarget(t)){return}let{left:i,top:o}=this.getCornerLeftTop(e);let s=0;let n=0;let r="horizontal";const l=this.width/this.height;const a=this.crop.getBoundingClientRect();const h=this.image.getBoundingClientRect();let{movementX:d,movementY:c}=this.getMouvementFromEvent(t);if(Math.abs(d)<Math.abs(c)){r="vertical"}if(r=="horizontal"){switch(e){case k.nw:case k.sw:s=a.width-d;n=s/l;break;case k.ne:case k.se:s=a.width+d;n=s/l;break}}else{switch(e){case k.nw:case k.ne:n=a.height-c;s=n*l;break;case k.se:case k.sw:n=a.height+c;s=n*l;break}}switch(e){case k.ne:case k.nw:const t=a.height-n;o=this.crop.offsetTop+t}switch(e){case k.nw:case k.sw:const t=a.width-s;i=this.crop.offsetLeft+t;if(i<0)i=0;if(i>h.width)i=h.width;if(o<0)o=0;if(o>h.height)o=h.height;if(i+s>h.width)s=h.width-i;if(o+n>h.height)n=h.height-o;break;case k.ne:case k.se:if(o<0)o=0;if(o>h.height)o=h.height;if(i+s>h.width)s=h.width-i;if(o+n>h.height)n=h.height-o;break}if(s/n!=l){return}if(this.preventUndersized){const t=this.image.width/this.image.naturalWidth;if(s/t<this.width||n/t<this.height){return}}switch(e){case k.ne:this.crop.style.top=`${o}px`;this.crop.style.width=`${s}px`;this.crop.style.height=`${n}px`;break;case k.nw:this.crop.style.left=`${i}px`;this.crop.style.top=`${o}px`;this.crop.style.width=`${s}px`;this.crop.style.height=`${n}px`;break;case k.se:this.crop.style.width=`${s}px`;this.crop.style.height=`${n}px`;break;case k.sw:this.crop.style.left=`${i}px`;this.crop.style.width=`${s}px`;this.crop.style.height=`${n}px`;break}};this.handleCropDrag=t=>{if(!this.isMouseStillInTarget(t)){return}let{movementX:e,movementY:i}=this.getMouvementFromEvent(t);let o=this.crop.offsetLeft+e;let s=this.crop.offsetTop+i;var n=this.image.getBoundingClientRect();var r=this.crop.getBoundingClientRect();if(o<0){o=0}if(s<0){s=0}if(o+r.width>n.width){o=this.crop.offsetLeft}if(s+r.height>n.height){s=this.crop.offsetTop}this.crop.style.left=o+"px";this.crop.style.top=s+"px"}}componentDidLoad(){this.setView("noPictureView")}setView(t){const e=this.host.shadowRoot.querySelectorAll(".view");e.forEach((t=>t.classList.remove("visible")));switch(t){case"noPictureView":this.noPictureView.classList.add("visible");break;case"hasPictureView":this.hasPictureView.classList.add("visible");break}this.view=t}initCrop(){var t=this.width/this.height;var e=this.image.getBoundingClientRect();var i=e.width/e.height;if(t>i){var o=e.width/t;var s=e.height-o;this.crop.style.top=Math.round(s/2).toString()+"px";this.crop.style.height=Math.round(o).toString()+"px"}else{var n=e.height*t;var s=e.width-n;this.crop.style.left=Math.round(s/2).toString()+"px";this.crop.style.width=Math.round(n).toString()+"px"}}setImage(){this.image.addEventListener("load",(()=>{this.initCrop();this.emitImage()}));this.image.src=this.canvas.toDataURL()}handleNewFile(t){if(t.type.split("/")[0]!="image"){return}var e=new FileReader;e.onload=t=>{var e=new Image;e.onload=()=>{this.canvas.width=e.width;this.canvas.height=e.height;if(this.preventUndersized&&(e.width<this.width||e.height<this.height)){this.imageTooSmallModal.show();return}var t=this.canvas.getContext("2d");t.drawImage(e,0,0);this.setView("hasPictureView");this.setImage()};e.src=t.target.result.toString()};e.readAsDataURL(t)}emitImage(){var t=this.crop.offsetLeft/this.image.width*this.image.naturalWidth;var e=this.crop.offsetTop/this.image.height*this.image.naturalHeight;var i=this.crop.getBoundingClientRect();var o=i.width/this.image.width*this.image.naturalWidth;var s=i.height/this.image.height*this.image.naturalHeight;if(t<0)t=0;if(t>this.image.naturalWidth)t=this.image.naturalWidth;if(e<0)e=0;if(e>this.image.naturalWidth)e=this.image.naturalWidth;if(o>this.image.naturalWidth)o=this.image.naturalWidth;if(s>this.image.naturalHeight)s=this.image.naturalHeight;var n=this.generateCroppedImage(t,e,o,s,this.width,this.height);this.imageCropChanged.emit(n)}generateCroppedImage(t,e,i,o,s,n){this.canvas.width=s;this.canvas.height=n;const r=this.canvas.getContext("2d");r.clearRect(0,0,s,n);r.drawImage(this.image,t,e,i,o,0,0,s,n);return this.canvas.toDataURL("image/jpeg",this.quality)}getCornerLeftTop(t){let e=0;let i=0;switch(t){case k.se:e=this.crop.offsetLeft;i=this.crop.offsetTop;break;case k.sw:i=this.crop.offsetTop;break}return{top:i,left:e}}getMouvementFromEvent(t){let e=0;let i=0;if(t instanceof MouseEvent){e=t.movementX;i=t.movementY}if(typeof TouchEvent!=="undefined"){if(t instanceof TouchEvent){let o=t.touches[0];if(this.previousTouch!=undefined){e=o.pageX-this.previousTouch.pageX;i=o.pageY-this.previousTouch.pageY}this.previousTouch=o}}return{movementX:e,movementY:i}}isMouseStillInTarget(t){var e=false;let i;let o;const s=this.image.getBoundingClientRect();if(t instanceof MouseEvent){i=t.clientX;o=t.clientY}if(typeof TouchEvent!=="undefined"){if(t instanceof TouchEvent){var n=t.touches[0];i=n.clientX;o=n.clientY}}if(i>=s.x&&o>=s.y&&i<=s.left+s.width&&o<=s.top+s.height){e=true}var r=this.crop.querySelectorAll("div");r.forEach((t=>{var s=t.getBoundingClientRect();if(i>=s.x&&o>=s.y&&i<=s.left+s.width&&o<=s.top+s.height){e=true}}));return e}render(){return i(o,{ref:t=>this.host=t},i("canvas",{ref:t=>this.canvas=t}),i("div",{class:"view",ref:t=>this.hasPictureView=t},i("div",{class:"cropper"},i("img",{ref:t=>this.image=t}),i("div",{class:"backdrop"}),i("div",{class:"crop",ref:t=>this.crop=t,onMouseDown:this.handleCropMouseDown,onTouchStart:this.handleCropMouseDown},i("div",{class:"nw"}),i("div",{class:"ne"}),i("div",{class:"se"}),i("div",{class:"sw"})))),i("div",{class:"view",ref:t=>this.noPictureView=t},i("dnn-dropzone",{allowCameraMode:true,onFilesSelected:t=>this.handleNewFile(t.detail[0]),resx:{capture:this.resx.capture,dragAndDropFile:this.resx.dragAndDropFile,or:this.resx.or,takePicture:this.resx.takePicture,uploadFile:this.resx.uploadFile}})),i("dnn-modal",{ref:t=>this.imageTooSmallModal=t,"close-text":this.resx.modalCloseText},i("p",null,this.resx.imageTooSmall.replace("{width}",this.width.toString()).replace("{height}",this.height.toString()))))}};C.style=y;const M=":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}";let z=class{constructor(i){t(this,i);this.dismissed=e(this,"dismissed",7);this.backdropDismiss=true;this.closeText="Close modal";this.showCloseButton=true;this.visible=false}async show(){this.visible=true}async hide(){this.visible=false}handleDismiss(){this.visible=false;this.dismissed.emit()}handleBackdropClick(t){const e=t.target;if(e.id==="backdrop"&&this.backdropDismiss){this.handleDismiss()}}render(){return i(o,null,i("div",{id:"backdrop",class:this.visible?"overlay visible":"overlay",onClick:t=>this.handleBackdropClick(t)},i("div",{class:"modal"},this.showCloseButton&&i("button",{class:"close","aria-label":this.closeText,onClick:()=>this.handleDismiss()},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"}))),i("slot",null))))}get el(){return s(this)}};z.style=M;const H=":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)}";var F=undefined&&undefined.__decorate||function(t,e,i,o){var s=arguments.length,n=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,r;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")n=Reflect.decorate(t,e,i,o);else for(var l=t.length-1;l>=0;l--)if(r=t[l])n=(s<3?r(n):s>3?r(e,i,n):r(e,i))||n;return s>3&&n&&Object.defineProperty(e,i,n),n};let L=class{constructor(i){t(this,i);this.queryChanged=e(this,"queryChanged",7);this.placeholder="";this.debounced=true;this.query=""}fireQueryChanged(){if(this.debounced){this.debouncedHandleQueryChanged()}else{this.handleQueryChanged()}}handleQueryChanged(){this.queryChanged.emit(this.query)}debouncedHandleQueryChanged(){this.handleQueryChanged()}render(){return i(o,null,i("input",{type:"text",value:this.query,placeholder:this.placeholder,onInput:t=>this.query=t.target.value}),this.query!==""?i("button",{class:"svg clear",onClick:()=>this.query=""},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"}))):i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"})))}static get watchers(){return{query:["fireQueryChanged"]}}};F([n(500)],L.prototype,"debouncedHandleQueryChanged",null);L.style=H;const j=":host{display:inline-block}button{outline:none;border:none;margin:0;padding:0;background-color:transparent;outline:none;display:inline-block;line-height:1em;position:relative;top:0.25em}button svg{height:1.5em;width:auto;fill:var(--color, #888)}button.active svg{fill:var(--color-sorted, var(--dnn-color-primary, #028bff))}button:hover svg,button:focus svg{fill:var(--color-hover, var(--dnn-color-primary-light, #36a1ff))}";let D=class{constructor(i){t(this,i);this.sortChanged=e(this,"sortChanged",7);this.sortDirection="none"}changeSort(){switch(this.sortDirection){case"asc":this.sortDirection="desc";break;case"desc":this.sortDirection="asc";break;case"none":this.sortDirection="asc";break}this.sortChanged.emit(this.sortDirection)}render(){return i(o,null,i("button",{class:{active:this.sortDirection!="none"},onClick:()=>this.changeSort()},this.sortDirection=="none"&&i("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 12 16"},i("path",{d:"M 0 7 H 12 L 6 0 Z M 0 9 H 12 L 6 16 Z"})),this.sortDirection=="asc"&&i("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 12 16"},i("path",{d:"M 0 7 H 12 L 6 0 Z"})),this.sortDirection=="desc"&&i("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 12 16"},i("path",{d:"M 0 9 H 12 L 6 16 Z"}))))}};D.style=j;const T="";let B=class{constructor(e){t(this,e);this.visible=false}async show(){this.visible=true}async hide(){this.visible=false}render(){return i(o,null,this.visible&&i("slot",null))}};B.style=T;const S=":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}";let V=class{constructor(e){t(this,e);this.tabTitles=[];this.selectedTabTitle=""}componentDidLoad(){this.updateTitles();this.showFirstTab()}getTabs(){return this.component.shadowRoot.querySelector("slot").assignedElements()}updateTitles(){const t=this.getTabs();t.forEach((t=>this.tabTitles=[...this.tabTitles,t.tabTitle]))}showFirstTab(){const t=this.getTabs()[0];t.show();this.selectedTabTitle=t.tabTitle}showTab(t){const e=this.getTabs();e.forEach((e=>{if(e.tabTitle==t){e.show();return}e.hide()}));this.selectedTabTitle=t}render(){return i(o,{ref:t=>this.component=t},i("div",{class:"tabTitles"},this.tabTitles.map((t=>i("button",{class:this.selectedTabTitle==t?"visible":"",onClick:()=>this.showTab(t)},t)))),i("div",{class:"currentTab"},i("slot",null)))}};V.style=S;const $=":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}";let _=class{constructor(i){t(this,i);this.checkChanged=e(this,"checkChanged",7);this.checked=false;this.disabled=false}checkedChanged(t){this.checkChanged.emit({checked:t})}render(){return i(o,null,i("button",{disabled:this.disabled,class:{checked:this.checked},onClick:()=>{if(!this.disabled){this.checked=!this.checked}}},i("div",{class:"handle"})))}get element(){return s(this)}static get watchers(){return{checked:["checkedChanged"]}}};_.style=$;const E=":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}";let I=class{constructor(e){t(this,e);this.expanded=false;this.hasChildren=false}componentDidLoad(){const t=this.childrenElement.children[0];const e=t.assignedElements().length;if(e>0){this.hasChildren=true}if(this.expanded){this.expander.classList.add("expanded");this.collapsible.expanded=false;setTimeout((()=>{this.collapsible.expanded=true}),300)}}toggleCollapse(){this.expanded=!this.expanded;if(this.expanded){this.expander.classList.add("expanded");return}this.expander.classList.remove("expanded")}render(){return i(o,null,i("div",{class:"expander",ref:t=>this.expander=t},this.hasChildren&&i("button",{onClick:()=>this.toggleCollapse()},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M10 17l5-5-5-5v10z"}),i("path",{d:"M0 24V0h24v24H0z",fill:"none"})))),i("div",{class:"item"},i("div",{class:"item-slot"},i("slot",null)),i("dnn-collapsible",{ref:t=>this.collapsible=t,expanded:this.expanded},i("div",{ref:t=>this.childrenElement=t},i("slot",{name:"children"})))))}get el(){return s(this)}};I.style=E;export{l as dnn_button,h as dnn_checkbox,c as dnn_chevron,f as dnn_collapsible,m as dnn_color_picker,w as dnn_dropzone,C as dnn_image_cropper,z as dnn_modal,L as dnn_searchbox,D as dnn_sort_icon,B as dnn_tab,V as dnn_tabs,_ as dnn_toggle,I as dnn_treeview_item};
-//# sourceMappingURL=p-7acf3104.entry.js.map
+ */var b=undefined&&undefined.__decorate||function(t,e,i,o){var s=arguments.length,n=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,r;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")n=Reflect.decorate(t,e,i,o);else for(var l=t.length-1;l>=0;l--)if(r=t[l])n=(s<3?r(n):s>3?r(e,i,n):r(e,i))||n;return s>3&&n&&Object.defineProperty(e,i,n),n};let m=class{constructor(i){t(this,i);this.colorChanged=e(this,"colorChanged",7);this.color="FFFFFF";this.colorBoxHeight="50%";this.rgbDisplay="flex";this.hslDisplay="none";this.hexDisplay="none";this.handleSaturationLightnessMouseDown=t=>{t.preventDefault();this.handleDragLightnessSaturation(t);window.addEventListener("mousemove",this.handleDragLightnessSaturation);window.addEventListener("mouseup",this.handleSaturationLightnessMouseUp)};this.handleDragLightnessSaturation=t=>{const e=this.saturationLightnessBox.getBoundingClientRect();let i=t.clientX-e.left;if(i<0){i=0}if(i>e.width){i=e.width}i=i/e.width;let o=t.clientY-e.top;if(o<0){o=0}if(o>e.height){o=e.height}o=1-o/e.height;const s=new v;s.hue=this.currentColor.hue;s.saturation=i;s.lightness=o;this.currentColor=s};this.handleSaturationLightnessMouseUp=()=>{window.removeEventListener("mousemove",this.handleDragLightnessSaturation);window.removeEventListener("mouseup",this.handleSaturationLightnessMouseUp)};this.handleHueMouseDown=t=>{t.preventDefault();this.handleDragHue(t);window.addEventListener("mousemove",this.handleDragHue);window.addEventListener("mouseup",this.handleHueMouseUp)};this.handleHueMouseUp=()=>{window.removeEventListener("mousemove",this.handleDragHue);window.removeEventListener("mouseup",this.handleHueMouseUp)};this.handleDragHue=t=>{const e=this.hueRange.getBoundingClientRect();let i=t.clientX-e.left;if(i<0){i=0}if(i>e.width){i=e.width}i=i/e.width*360;const o=new v;o.hue=i;o.saturation=this.currentColor.saturation;o.lightness=this.currentColor.lightness;this.currentColor=o};this.handleComponentValueChange=(t,e)=>{let i=parseInt(t.target.value);if(isNaN(i)){return}const o=new v;if(i<0){i=0}if(i>255){i=255}let s=this.currentColor.red;let n=this.currentColor.green;let r=this.currentColor.blue;switch(e){case"red":s=i;break;case"green":n=i;break;case"blue":r=i;break}o.green=n;o.red=s;o.blue=r;this.currentColor=o};this.handleHSLChange=(t,e)=>{let i=parseInt(t.target.value);if(isNaN(i)){return}const o=new v;if(i!=null){let t=this.currentColor.hue;let s=this.currentColor.saturation;let n=this.currentColor.lightness;switch(e){case"hue":if(i<0){i=0}if(i>359){i=0}t=i;break;case"saturation":if(i<0){i=0}if(i>100){i=100}s=i/100;break;case"lightness":if(i<0){i=0}if(i>100){i=100}n=i/100;break}o.hue=t;o.saturation=s;o.lightness=n;this.currentColor=o}};this.handleSaturationLightnessKeyDown=t=>{let e=new v;e.hue=this.currentColor.hue;e.saturation=this.currentColor.saturation;e.lightness=this.currentColor.lightness;let i=.01;if(t.shiftKey){i=.1}switch(t.key){case"ArrowUp":e.lightness+=i;break;case"ArrowDown":e.lightness-=i;break;case"ArrowLeft":e.saturation-=i;break;case"ArrowRight":e.saturation+=i}this.currentColor=e};this.handleHueKeyDown=t=>{let e=new v;e.hue=this.currentColor.hue;e.saturation=this.currentColor.saturation;e.lightness=this.currentColor.lightness;let i=1;if(t.shiftKey){i=10}switch(t.key){case"ArrowLeft":e.hue-=i;break;case"ArrowRight":e.hue+=i}this.currentColor=e}}colorChangedHandler(t){this.colorChanged.emit(t)}handeCurrentColorChanged(t){this.colorChangedHandler(t)}componentWillLoad(){this.handleHexChange(this.color)}componentDidLoad(){this.el.style.setProperty("--color-box-height",this.colorBoxHeight.toString())}getHex(){return this.getDoublet(this.currentColor.red)+this.getDoublet(this.currentColor.green)+this.getDoublet(this.currentColor.blue)}getContrast(){return this.currentColor.contrastColor}getDoublet(t){const e=t.toString(16).toUpperCase();if(e.length===1){return"0"+e}return e}handleHexChange(t){const e=new v;if(t.match(/^(?:[\da-f]{3}|[\da-f]{6})$/i).length>0){if(t.length===3){let e=t[0]+t[0]+t[1]+t[1]+t[2]+t[2];t=e}e.red=parseInt(t.substr(0,2),16);e.green=parseInt(t.substr(2,2),16);e.blue=parseInt(t.substr(4,2),16)}else{e.red=this.currentColor.red;e.green=this.currentColor.green;e.blue=this.currentColor.blue}this.currentColor=e}switchColorMode(t){switch(t.target.id){case"rgb-switch":this.rgbDisplay="none";this.hslDisplay="none";this.hexDisplay="flex";break;case"hex-switch":this.rgbDisplay="none";this.hslDisplay="flex";this.hexDisplay="none";break;case"hsl-switch":this.rgbDisplay="flex";this.hslDisplay="none";this.hexDisplay="none";break;default:this.rgbDisplay="flex";this.hslDisplay="none";this.hexDisplay="none"}}render(){const t=this.currentColor.hue;const e=this.currentColor.saturation;const o=this.currentColor.lightness;const s=this.currentColor.red;const n=this.currentColor.green;const r=this.currentColor.blue;return i("div",{class:"dnn-color-picker"},i("div",{class:"dnn-color-sliders"},i("div",{class:"dnn-color-s-b",ref:t=>this.saturationLightnessBox=t,style:{backgroundColor:`hsl(${t},100%,50%)`},onMouseDown:this.handleSaturationLightnessMouseDown.bind(this)},i("button",{class:"dnn-s-b-picker","aria-label":"Press up or down to adjust lightness, left or right to adjust saturation, hold shift to move by 10%",role:"slider","aria-valuemin":"0","aria-valuemax":"100","aria-valuetext":`Saturation: ${Math.round(this.currentColor.saturation*100)}%, Lightness: ${Math.round(this.currentColor.lightness*100)}%`,style:{left:Math.round(e*100)+"%",bottom:Math.round(o*100)+"%"},onKeyDown:t=>this.handleSaturationLightnessKeyDown(t)})),i("div",{class:"dnn-color-bar"},i("div",{class:"dnn-color-result",style:{backgroundColor:"#"+this.getHex(),boxShadow:"0 0 2px 1px "+"#"+this.getContrast()}}),i("div",{class:"dnn-color-hue",ref:t=>this.hueRange=t,onMouseDown:this.handleHueMouseDown.bind(this)},i("button",{class:"dnn-hue-picker","aria-label":"Press left or right to adjust hue, hold shift to move by 10 degrees",role:"slider","aria-valuemin":"0","aria-valuemax":"359","aria-valuenow":Math.round(t),style:{left:(t/359*100).toString()+"%"},onKeyDown:t=>this.handleHueKeyDown(t)})))),i("div",{class:"dnn-color-fields"},i("div",{class:"dnn-rgb-color-fields",style:{display:this.rgbDisplay}},i("div",{class:"dnn-rgb-color-field"},i("label",null,"R"),i("input",{type:"number",min:"0",max:"255",step:"1",class:"red",value:s,"aria-label":"red value",onChange:t=>this.handleComponentValueChange(t,"red")})),i("div",{class:"dnn-rgb-color-field"},i("label",null,"G"),i("input",{type:"number",min:"0",max:"255",class:"green",value:n,"aria-label":"green value",onChange:t=>this.handleComponentValueChange(t,"green")})),i("div",{class:"dnn-rgb-color-field"},i("label",null,"B"),i("input",{type:"number",min:"0",max:"255",class:"blue",value:r,"aria-label":"blue value",onChange:t=>this.handleComponentValueChange(t,"blue")})),i("div",{class:"dnn-color-mode-switch"},i("button",{id:"rgb-switch",onClick:this.switchColorMode.bind(this),"aria-label":"switch to hexadecimal value entry"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"}))))),i("div",{class:"dnn-hsl-color-fields",style:{display:this.hslDisplay}},i("div",{class:"dnn-hsl-color-field"},i("label",null,"H"),i("input",{type:"number",min:"0",max:"359",step:1,value:Math.round(t),"aria-label":"Hue",onChange:t=>this.handleHSLChange(t,"hue")})),i("div",{class:"dnn-hsl-color-field"},i("label",null,"S"),i("input",{type:"number",min:"0",max:"100",step:1,value:Math.round(e*100),"aria-label":"Saturation",onChange:t=>this.handleHSLChange(t,"saturation")})),i("div",{class:"dnn-hsl-color-field"},i("label",null,"L"),i("input",{type:"number",min:"0",max:"100",step:1,value:Math.round(o*100),"aria-label":"Lightness",onChange:t=>this.handleHSLChange(t,"lightness")})),i("div",{class:"dnn-color-mode-switch"},i("button",{id:"hsl-switch",onClick:this.switchColorMode.bind(this),"aria-label":"Switch to red, green, blue entry mode"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"}))))),i("div",{class:"dnn-hex-color-fields",style:{display:this.hexDisplay}},i("div",{class:"dnn-hex-color-field"},i("label",null,"HEX"),i("div",{class:"hex-input"},i("input",{type:"text","aria-label":"Hexadecimal value",value:this.getHex(),onChange:t=>this.handleHexChange(t.target.value)}),i("button",{class:"copy","aria-label":"copy value"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"}))))),i("div",{class:"dnn-color-mode-switch"},i("button",{id:"hex-switch",onClick:this.switchColorMode.bind(this),"aria-label":"Switch to hue saturation lightness values"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"})))))))}get el(){return s(this)}static get watchers(){return{currentColor:["handeCurrentColorChanged"]}}};b([n(100)],m.prototype,"colorChangedHandler",null);m.style=g;const x=":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}";let w=class{constructor(i){t(this,i);this.filesSelected=e(this,"filesSelected",7);this.resx={dragAndDropFile:"Drag and drop a file",capture:"Capture",or:"or",takePicture:"Take a picture",uploadFile:"Upload a file"};this.allowCameraMode=false;this.captureQuality=.8;this.canTakeSnapshots=false;this.takingPicture=false;this.handleDragOver=t=>{t.stopPropagation();t.preventDefault();t.dataTransfer.dropEffect="copy";this.dropzone.classList.add("dropping")};this.handleDrop=t=>{t.stopPropagation();t.preventDefault();const e=t.dataTransfer.files;if(this.hasInvalidExtensions(e)){return}var i=this.getFilesFromFileList(e);this.filesSelected.emit(i)}}componentDidLoad(){if(this.allowCameraMode){this.checkIfBrowserCanTakeSnapshots().then((t=>this.canTakeSnapshots=t))}if(this.allowedExtensions!=undefined&&this.allowedExtensions.length>0){var t=this.allowedExtensions.map((t=>`.${t}`));var e=t.join(",");this.fileInput.accept=e}}checkIfBrowserCanTakeSnapshots(){return new Promise((t=>{const e=navigator.mediaDevices;if(e==undefined||e.enumerateDevices==undefined){t(false)}e.enumerateDevices().then((e=>{var i=e.some((t=>t.kind=="videoinput"));t(i)}))}))}getFilesFromFileList(t){var e=[];for(let i=0;i<t.length;i++){const o=t[i];e.push(o)}return e}handleUploadButton(t){let e=this.getFilesFromFileList(t.files);this.filesSelected.emit(e)}hasInvalidExtensions(t){var e=false;for(let o=0;o<t.length;o++){const s=t[o];var i=/(?:\.([^.]+))?$/;const n=i.exec(s.name)[1];if(n==undefined){e=true}if(this.allowedExtensions!=undefined&&!this.allowedExtensions.includes(n)){e=true}return e}}takeSnapshot(){this.takingPicture=true;navigator.mediaDevices.getUserMedia({video:true,audio:false}).then((t=>{this.videoPreview.srcObject=t;this.videoPreview.play().then((()=>{this.videoSettings=t.getVideoTracks()[0].getSettings()}))})).catch((t=>alert(t)))}applySnapshot(){var t=document.createElement("canvas");const e=t.getContext("2d");t.width=this.videoSettings.width;t.height=this.videoSettings.height;e.drawImage(this.videoPreview,0,0);t.toBlob((t=>{var e=new File([t],"image.jpeg",{type:"image/jpeg"});this.takingPicture=false;var i=[e];this.filesSelected.emit(i)}),"image/jpeg",this.captureQuality)}render(){var t,e,s,n,r,l;return i(o,{ref:t=>this.dropzone=t,class:"dropzone",onDragOver:this.handleDragOver,onDrop:this.handleDrop,onDragLeave:()=>this.dropzone.classList.remove("dropping")},!this.takingPicture&&[i("p",null,(t=this.resx)===null||t===void 0?void 0:t.dragAndDropFile),i("p",null,"- ",(e=this.resx)===null||e===void 0?void 0:e.or," -"),i("label",{class:"upload-file"},i("input",{type:"file",ref:t=>this.fileInput=t,onChange:t=>this.handleUploadButton(t.target)}),i("span",null,i("svg",{xmlns:"http://www.w3.org/2000/svg","enable-background":"new 0 0 24 24",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("g",null,i("rect",{fill:"none",height:"24",width:"24"})),i("g",null,i("path",{d:"M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z"}))))," ",(s=this.resx)===null||s===void 0?void 0:s.uploadFile),this.canTakeSnapshots&&[i("p",null,"- ",(n=this.resx)===null||n===void 0?void 0:n.or," -"),i("button",{onClick:()=>this.takeSnapshot()},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("circle",{cx:"12",cy:"12",r:"3.2"}),i("path",{d:"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"})),(r=this.resx)===null||r===void 0?void 0:r.takePicture)]],this.takingPicture&&i("div",{class:"video-preview"},i("video",{ref:t=>this.videoPreview=t}),i("button",{onClick:()=>this.applySnapshot()},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("circle",{cx:"12",cy:"12",r:"3.2"}),i("path",{d:"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"}))," ",(l=this.resx)===null||l===void 0?void 0:l.capture)))}};w.style=x;var k;(function(t){t[t["nw"]=0]="nw";t[t["ne"]=1]="ne";t[t["se"]=2]="se";t[t["sw"]=3]="sw"})(k||(k={}));function y(t,e){let i=0;let o=0;if(t instanceof MouseEvent){i=t.movementX;o=t.movementY}if(typeof TouchEvent!=="undefined"){if(t instanceof TouchEvent){let s=t.touches[0];if(e!=undefined){i=s.pageX-this.previousTouch.pageX;o=s.pageY-this.previousTouch.pageY}e=s}}return{movementX:i,movementY:o}}const C=":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}";let M=class{constructor(i){t(this,i);this.imageCropChanged=e(this,"imageCropChanged",7);this.width=600;this.height=600;this.resx={capture:"Capture",dragAndDropFile:"Drag and drop an image",or:"or",takePicture:"Take a picture",uploadFile:"Upload an image",imageTooSmall:"The image you are attempting to upload does not meet the minimum size requirement of {width} pixels by {height} pixels. Please upload a larger image.",modalCloseText:"Close"};this.quality=.8;this.preventUndersized=false;this.handleCropMouseDown=t=>{t.stopPropagation();t.preventDefault();const e=t.target;const i=e.classList[0];document.addEventListener("mouseup",this.handleImageCropFinished,false);document.addEventListener("touchend",this.handleImageCropFinished,false);switch(i){case"crop":document.addEventListener("mousemove",this.handleCropDrag,false);document.addEventListener("touchmove",this.handleCropDrag,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleCropDrag)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleCropDrag)));break;case"nw":document.addEventListener("mousemove",this.handleNwMouseMove,false);document.addEventListener("touchmove",this.handleNwMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleNwMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleNwMouseMove)));break;case"ne":document.addEventListener("mousemove",this.handleNeMouseMove,false);document.addEventListener("touchmove",this.handleNeMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleNeMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleNeMouseMove)));break;case"se":document.addEventListener("mousemove",this.handleSeMouseMove,false);document.addEventListener("touchmove",this.handleSeMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleSeMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleSeMouseMove)));break;case"sw":document.addEventListener("mousemove",this.handleSwMouseMove,false);document.addEventListener("touchmove",this.handleSwMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleSwMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleSwMouseMove)));break}};this.handleImageCropFinished=t=>{this.emitImage();document.removeEventListener("mouseup",this.handleImageCropFinished);this.previousTouch=undefined};this.handleNwMouseMove=t=>{this.handleCornerDrag(t,k.nw)};this.handleNeMouseMove=t=>{this.handleCornerDrag(t,k.ne)};this.handleSeMouseMove=t=>{this.handleCornerDrag(t,k.se)};this.handleSwMouseMove=t=>{this.handleCornerDrag(t,k.sw)};this.handleCornerDrag=(t,e)=>{if(!this.isMouseStillInTarget(t)){return}let{left:i,top:o}=this.getCornerLeftTop(e);let s=0;let n=0;let r="horizontal";const l=this.width/this.height;const a=this.crop.getBoundingClientRect();const h=this.image.getBoundingClientRect();let{movementX:d,movementY:c}=y(t,this.previousTouch);if(Math.abs(d)<Math.abs(c)){r="vertical"}if(r=="horizontal"){switch(e){case k.nw:case k.sw:s=a.width-d;n=s/l;break;case k.ne:case k.se:s=a.width+d;n=s/l;break}}else{switch(e){case k.nw:case k.ne:n=a.height-c;s=n*l;break;case k.se:case k.sw:n=a.height+c;s=n*l;break}}switch(e){case k.ne:case k.nw:const t=a.height-n;o=this.crop.offsetTop+t}switch(e){case k.nw:case k.sw:const t=a.width-s;i=this.crop.offsetLeft+t;if(i<0)i=0;if(i>h.width)i=h.width;if(o<0)o=0;if(o>h.height)o=h.height;if(i+s>h.width)s=h.width-i;if(o+n>h.height)n=h.height-o;break;case k.ne:case k.se:if(o<0)o=0;if(o>h.height)o=h.height;if(i+s>h.width)s=h.width-i;if(o+n>h.height)n=h.height-o;break}if(s/n!=l){return}if(this.preventUndersized){const t=this.image.width/this.image.naturalWidth;if(s/t<this.width||n/t<this.height){return}}switch(e){case k.ne:this.crop.style.top=`${o}px`;this.crop.style.width=`${s}px`;this.crop.style.height=`${n}px`;break;case k.nw:this.crop.style.left=`${i}px`;this.crop.style.top=`${o}px`;this.crop.style.width=`${s}px`;this.crop.style.height=`${n}px`;break;case k.se:this.crop.style.width=`${s}px`;this.crop.style.height=`${n}px`;break;case k.sw:this.crop.style.left=`${i}px`;this.crop.style.width=`${s}px`;this.crop.style.height=`${n}px`;break}};this.handleCropDrag=t=>{if(!this.isMouseStillInTarget(t)){return}let{movementX:e,movementY:i}=y(t,this.previousTouch);let o=this.crop.offsetLeft+e;let s=this.crop.offsetTop+i;var n=this.image.getBoundingClientRect();var r=this.crop.getBoundingClientRect();if(o<0){o=0}if(s<0){s=0}if(o+r.width>n.width){o=this.crop.offsetLeft}if(s+r.height>n.height){s=this.crop.offsetTop}this.crop.style.left=o+"px";this.crop.style.top=s+"px"}}componentDidLoad(){requestAnimationFrame((()=>{this.setView("noPictureView")}))}setView(t){const e=this.host.shadowRoot.querySelectorAll(".view");e.forEach((t=>t.classList.remove("visible")));switch(t){case"noPictureView":this.noPictureView.classList.add("visible");break;case"hasPictureView":this.hasPictureView.classList.add("visible");break}this.view=t}initCrop(){var t=this.width/this.height;var e=this.image.getBoundingClientRect();var i=e.width/e.height;if(t>i){var o=e.width/t;var s=e.height-o;this.crop.style.top=Math.round(s/2).toString()+"px";this.crop.style.height=Math.round(o).toString()+"px"}else{var n=e.height*t;var s=e.width-n;this.crop.style.left=Math.round(s/2).toString()+"px";this.crop.style.width=Math.round(n).toString()+"px"}}setImage(){this.image.addEventListener("load",(()=>{this.initCrop();this.emitImage()}));this.image.src=this.canvas.toDataURL()}handleNewFile(t){if(t.type.split("/")[0]!="image"){return}var e=new FileReader;e.onload=t=>{var e=new Image;e.onload=()=>{this.canvas.width=e.width;this.canvas.height=e.height;if(this.preventUndersized&&(e.width<this.width||e.height<this.height)){this.imageTooSmallModal.show();return}var t=this.canvas.getContext("2d");t.drawImage(e,0,0);this.setView("hasPictureView");this.setImage()};e.src=t.target.result.toString()};e.readAsDataURL(t)}emitImage(){var t=this.crop.offsetLeft/this.image.width*this.image.naturalWidth;var e=this.crop.offsetTop/this.image.height*this.image.naturalHeight;var i=this.crop.getBoundingClientRect();var o=i.width/this.image.width*this.image.naturalWidth;var s=i.height/this.image.height*this.image.naturalHeight;if(t<0)t=0;if(t>this.image.naturalWidth)t=this.image.naturalWidth;if(e<0)e=0;if(e>this.image.naturalWidth)e=this.image.naturalWidth;if(o>this.image.naturalWidth)o=this.image.naturalWidth;if(s>this.image.naturalHeight)s=this.image.naturalHeight;var n=this.generateCroppedImage(t,e,o,s,this.width,this.height);this.imageCropChanged.emit(n)}generateCroppedImage(t,e,i,o,s,n){this.canvas.width=s;this.canvas.height=n;const r=this.canvas.getContext("2d");r.clearRect(0,0,s,n);r.drawImage(this.image,t,e,i,o,0,0,s,n);return this.canvas.toDataURL("image/jpeg",this.quality)}getCornerLeftTop(t){let e=0;let i=0;switch(t){case k.se:e=this.crop.offsetLeft;i=this.crop.offsetTop;break;case k.sw:i=this.crop.offsetTop;break}return{top:i,left:e}}isMouseStillInTarget(t){var e=false;let i;let o;const s=this.image.getBoundingClientRect();if(t instanceof MouseEvent){i=t.clientX;o=t.clientY}if(typeof TouchEvent!=="undefined"){if(t instanceof TouchEvent){var n=t.touches[0];i=n.clientX;o=n.clientY}}if(i>=s.x&&o>=s.y&&i<=s.left+s.width&&o<=s.top+s.height){e=true}var r=this.crop.querySelectorAll("div");r.forEach((t=>{var s=t.getBoundingClientRect();if(i>=s.x&&o>=s.y&&i<=s.left+s.width&&o<=s.top+s.height){e=true}}));return e}render(){return i(o,{ref:t=>this.host=t},i("canvas",{ref:t=>this.canvas=t}),i("div",{class:"view",ref:t=>this.hasPictureView=t},i("div",{class:"cropper"},i("img",{ref:t=>this.image=t}),i("div",{class:"backdrop"}),i("div",{class:"crop",ref:t=>this.crop=t,onMouseDown:this.handleCropMouseDown,onTouchStart:this.handleCropMouseDown},i("div",{class:"nw"}),i("div",{class:"ne"}),i("div",{class:"se"}),i("div",{class:"sw"})))),i("div",{class:"view",ref:t=>this.noPictureView=t},i("dnn-dropzone",{allowCameraMode:true,onFilesSelected:t=>this.handleNewFile(t.detail[0]),resx:{capture:this.resx.capture,dragAndDropFile:this.resx.dragAndDropFile,or:this.resx.or,takePicture:this.resx.takePicture,uploadFile:this.resx.uploadFile}})),i("dnn-modal",{ref:t=>this.imageTooSmallModal=t,"close-text":this.resx.modalCloseText},i("p",null,this.resx.imageTooSmall.replace("{width}",this.width.toString()).replace("{height}",this.height.toString()))))}};M.style=C;const z=":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}";let H=class{constructor(i){t(this,i);this.dismissed=e(this,"dismissed",7);this.backdropDismiss=true;this.closeText="Close modal";this.showCloseButton=true;this.visible=false}async show(){this.visible=true}async hide(){this.visible=false}handleDismiss(){this.visible=false;this.dismissed.emit()}handleBackdropClick(t){const e=t.target;if(e.id==="backdrop"&&this.backdropDismiss){this.handleDismiss()}}render(){return i(o,null,i("div",{id:"backdrop",class:this.visible?"overlay visible":"overlay",onClick:t=>this.handleBackdropClick(t)},i("div",{class:"modal"},this.showCloseButton&&i("button",{class:"close","aria-label":this.closeText,onClick:()=>this.handleDismiss()},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"}))),i("slot",null))))}get el(){return s(this)}};H.style=z;const F=":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)}";var L=undefined&&undefined.__decorate||function(t,e,i,o){var s=arguments.length,n=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,r;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")n=Reflect.decorate(t,e,i,o);else for(var l=t.length-1;l>=0;l--)if(r=t[l])n=(s<3?r(n):s>3?r(e,i,n):r(e,i))||n;return s>3&&n&&Object.defineProperty(e,i,n),n};let D=class{constructor(i){t(this,i);this.queryChanged=e(this,"queryChanged",7);this.placeholder="";this.debounced=true;this.query=""}fireQueryChanged(){if(this.debounced){this.debouncedHandleQueryChanged()}else{this.handleQueryChanged()}}handleQueryChanged(){this.queryChanged.emit(this.query)}debouncedHandleQueryChanged(){this.handleQueryChanged()}render(){return i(o,null,i("input",{type:"text",value:this.query,placeholder:this.placeholder,onInput:t=>this.query=t.target.value}),this.query!==""?i("button",{class:"svg clear",onClick:()=>this.query=""},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"}))):i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"})))}static get watchers(){return{query:["fireQueryChanged"]}}};L([n(500)],D.prototype,"debouncedHandleQueryChanged",null);D.style=F;const S=":host{display:inline-block}button{outline:none;border:none;margin:0;padding:0;background-color:transparent;outline:none;display:inline-block;line-height:1em;position:relative;top:0.25em}button svg{height:1.5em;width:auto;fill:var(--color, #888)}button.active svg{fill:var(--color-sorted, var(--dnn-color-primary, #028bff))}button:hover svg,button:focus svg{fill:var(--color-hover, var(--dnn-color-primary-light, #36a1ff))}";let j=class{constructor(i){t(this,i);this.sortChanged=e(this,"sortChanged",7);this.sortDirection="none"}changeSort(){switch(this.sortDirection){case"asc":this.sortDirection="desc";break;case"desc":this.sortDirection="asc";break;case"none":this.sortDirection="asc";break}this.sortChanged.emit(this.sortDirection)}render(){return i(o,null,i("button",{class:{active:this.sortDirection!="none"},onClick:()=>this.changeSort()},this.sortDirection=="none"&&i("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 12 16"},i("path",{d:"M 0 7 H 12 L 6 0 Z M 0 9 H 12 L 6 16 Z"})),this.sortDirection=="asc"&&i("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 12 16"},i("path",{d:"M 0 7 H 12 L 6 0 Z"})),this.sortDirection=="desc"&&i("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 12 16"},i("path",{d:"M 0 9 H 12 L 6 16 Z"}))))}};j.style=S;const T="";let A=class{constructor(e){t(this,e);this.visible=false}async show(){this.visible=true}async hide(){this.visible=false}render(){return i(o,null,this.visible&&i("slot",null))}};A.style=T;const B=":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}";let _=class{constructor(e){t(this,e);this.tabTitles=[];this.selectedTabTitle=""}componentDidLoad(){requestAnimationFrame((()=>{this.updateTitles();this.showFirstTab()}))}getTabs(){return this.component.shadowRoot.querySelector("slot").assignedElements()}updateTitles(){const t=this.getTabs();t.forEach((t=>this.tabTitles=[...this.tabTitles,t.tabTitle]))}showFirstTab(){const t=this.getTabs()[0];t.show();this.selectedTabTitle=t.tabTitle}showTab(t){const e=this.getTabs();e.forEach((e=>{if(e.tabTitle==t){e.show();return}e.hide()}));this.selectedTabTitle=t}render(){return i(o,{ref:t=>this.component=t},i("div",{class:"tabTitles"},this.tabTitles.map((t=>i("button",{class:this.selectedTabTitle==t?"visible":"",onClick:()=>this.showTab(t)},t)))),i("div",{class:"currentTab"},i("slot",null)))}};_.style=B;const I=":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}";let $=class{constructor(i){t(this,i);this.checkChanged=e(this,"checkChanged",7);this.checked=false;this.disabled=false}checkedChanged(t){this.checkChanged.emit({checked:t})}render(){return i(o,null,i("button",{disabled:this.disabled,class:{checked:this.checked},onClick:()=>{if(!this.disabled){this.checked=!this.checked}}},i("div",{class:"handle"})))}get element(){return s(this)}static get watchers(){return{checked:["checkedChanged"]}}};$.style=I;const V=":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}";let R=class{constructor(e){t(this,e);this.expanded=false;this.hasChildren=false}componentDidLoad(){requestAnimationFrame((()=>{const t=this.childrenElement.children[0];const e=t.assignedElements().length;if(e>0){this.hasChildren=true}if(this.expanded){this.expander.classList.add("expanded");this.collapsible.expanded=false;setTimeout((()=>{this.collapsible.expanded=true}),300)}}))}toggleCollapse(){this.expanded=!this.expanded;if(this.expanded){this.expander.classList.add("expanded");return}this.expander.classList.remove("expanded")}render(){return i(o,null,i("div",{class:"expander",ref:t=>this.expander=t},this.hasChildren&&i("button",{onClick:()=>this.toggleCollapse()},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M10 17l5-5-5-5v10z"}),i("path",{d:"M0 24V0h24v24H0z",fill:"none"})))),i("div",{class:"item"},i("div",{class:"item-slot"},i("slot",null)),i("dnn-collapsible",{ref:t=>this.collapsible=t,expanded:this.expanded},i("div",{ref:t=>this.childrenElement=t},i("slot",{name:"children"})))))}get el(){return s(this)}};R.style=V;const E=":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}";let q=class{constructor(e){t(this,e);this.showDropdownButton=false;this.showDropdownMenu=false;this.previousMenuWidth=0}componentDidRender(){requestAnimationFrame((()=>{this.moveAllSlottedItemsIntoMenu();this.moveItemsToDropDownIfNecessery();this.resizeObserver=new ResizeObserver((t=>{for(let e of t){if(e.contentRect.width<this.previousMenuWidth){this.moveItemsToDropDownIfNecessery()}if(this.previousMenuWidth>0&&e.contentRect.width>this.previousMenuWidth){this.moveItemsToMenuIfPossible()}this.previousMenuWidth=e.contentRect.width}}));this.resizeObserver.observe(this.element)}))}moveAllSlottedItemsIntoMenu(){const t=this.element.shadowRoot.querySelector("slot").assignedElements();t.forEach((t=>this.menu.appendChild(t)))}moveItemsToDropDownIfNecessery(){const t=Array.from(this.menu.children);const e=this.menu.getBoundingClientRect().width;let i=parseFloat(getComputedStyle(this.element).fontSize)*2;t.forEach((t=>i+=this.getFullWidth(t)));i+=(t.length-1)*parseFloat(getComputedStyle(this.element).fontSize);if(i>e){this.showDropdownButton=true;var o=t[t.length-1];if(this.dropdown==undefined){return}this.dropdown.prepend(o);this.moveItemsToDropDownIfNecessery()}}moveItemsToMenuIfPossible(){if(this.dropdown==undefined||!this.dropdown.hasChildNodes()){return}const t=Array.from(this.menu.children);const e=this.menu.getBoundingClientRect().width;let i=parseFloat(getComputedStyle(this.element).fontSize)*2;i+=(t.length-1)*parseFloat(getComputedStyle(this.element).fontSize);t.forEach((t=>i+=this.getFullWidth(t)));i+=this.getFullWidth(this.dropdown.children[0]);if(i<e){const t=this.dropdown.children[0];this.menu.appendChild(t);if(!this.dropdown.hasChildNodes()){this.dropdown.classList.remove("visible");this.showDropdownMenu=false;this.showDropdownButton=false}}}getFullWidth(t){var e=t.getBoundingClientRect().width;var i=getComputedStyle(t);e+=parseFloat(i.marginLeft);e+=parseFloat(i.marginRight);e+=parseFloat(i.paddingLeft);e+=parseFloat(i.paddingRight);return e}toggleOverflowMenu(){this.showDropdownMenu=!this.showDropdownMenu;if(this.showDropdownMenu){this.dropdown.classList.add("visible");let i=0;const o=Array.from(this.dropdown.children);o.forEach((t=>i+=t.getBoundingClientRect().height));var t=parseFloat(getComputedStyle(this.dropdown).fontSize)*.5;var e=t*(this.dropdown.children.length-1);i+=e;this.dropdown.style.height=`${i}px`;const s=t=>{const e=this.button.getBoundingClientRect();if(t.clientX<e.left||t.clientX>e.right||t.clientY<e.top||t.clientY>e.bottom){this.toggleOverflowMenu()}document.removeEventListener("click",s)};setTimeout((()=>{document.addEventListener("click",s,false)}),100)}else{this.dropdown.classList.remove("visible");this.dropdown.style.height="0px"}}render(){return i(o,null,i("div",{class:"menu-container"},i("div",{class:"menu",ref:t=>this.menu=t},i("slot",null)),this.showDropdownButton&&i("div",{class:"overflow"},i("button",{ref:t=>this.button=t,class:"icon",onClick:()=>this.toggleOverflowMenu()},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("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"}))),i("div",{class:"dropdown",ref:t=>this.dropdown=t}))))}get element(){return s(this)}};q.style=E;const P=":host{display:flex;align-items:stretch;margin:0 auto}button{background-color:transparent;border:none;margin:0;padding:0;cursor:ew-resize}.pane{height:100%;overflow-y:auto}.pane.transition{transition:all 300ms ease-in-out}";let O=class{constructor(i){t(this,i);this.widthChanged=e(this,"widthChanged",7);this.splitterWidth=16;this.splitWidthPercentage=30;this.leftWidth=0;this.rightWidth=0}async setSplitWidthPercentage(t){const e=this.element.shadowRoot.querySelectorAll(".pane");requestAnimationFrame((()=>{e.forEach((t=>t.classList.add("transition")));requestAnimationFrame((()=>{const i=this.element.getBoundingClientRect().width;let o=i*t/100;if(o<0){o=0}if(o>i){o=i}this.leftWidth=o;this.rightWidth=i-o;setTimeout((()=>{e.forEach((t=>t.classList.remove("transition")))}),300)}))}))}async getSplitWidthPercentage(){const t=this.element.getBoundingClientRect().width;return this.leftWidth/t}componentDidLoad(){requestAnimationFrame((()=>{const t=this.element.getBoundingClientRect().width;this.leftWidth=t*this.splitWidthPercentage/100;this.rightWidth=t-this.leftWidth;this.widthChanged.emit(this.splitWidthPercentage)}))}handleMouseDown(t){t.preventDefault();const e=t=>{let{movementX:e}=y(t,this.previousTouch);let i=this.element.getBoundingClientRect().width;let o=this.leftWidth+e;if(o<0){o=0}if(o>i){o=i}this.leftWidth=o;this.rightWidth=i-o};const i=()=>{document.removeEventListener("mousemove",e);document.removeEventListener("touchmove",e);const t=this.element.getBoundingClientRect().width;const i=this.leftWidth/t*100;this.widthChanged.emit(i)};document.addEventListener("mouseup",i);document.addEventListener("touchend",i);document.addEventListener("mousemove",e);document.addEventListener("touchmove",e)}handleKeyDown(t){let e=0;switch(t.key){case"ArrowLeft":e=-10;break;case"ArrowRight":e=10;break;default:return}if(t.shiftKey){e=e*10}const i=this.element.getBoundingClientRect().width;let o=this.leftWidth+e;if(o<0){o=0}if(o>i){o=i}this.leftWidth=o;this.rightWidth=i-this.leftWidth}render(){return i(o,null,i("div",{class:"pane",style:{width:`${this.leftWidth}px`,height:"100%"}},i("slot",{name:"left"})),i("button",{onMouseDown:t=>this.handleMouseDown(t),onTouchStart:t=>this.handleMouseDown(t),onKeyDown:t=>this.handleKeyDown(t),style:{minWidth:`${this.splitterWidth.toString()}px`}},i("slot",null)),i("div",{class:"pane",style:{width:`${this.rightWidth}px`}},i("slot",{name:"right"})))}get element(){return s(this)}};O.style=P;export{l as dnn_button,h as dnn_checkbox,c as dnn_chevron,f as dnn_collapsible,m as dnn_color_picker,w as dnn_dropzone,M as dnn_image_cropper,H as dnn_modal,D as dnn_searchbox,j as dnn_sort_icon,A as dnn_tab,_ as dnn_tabs,$ as dnn_toggle,R as dnn_treeview_item,q as dnn_vertical_overflow_menu,O as dnn_vertical_splitview};
+//# sourceMappingURL=p-fef1bc51.entry.js.map