@dnncommunity/dnn-elements 0.15.1 → 0.15.2

package/dist/dnn/{p-909f2db9.entry.js → p-6cc227ab.entry.js}

@@ -1,4 +1,4 @@
-import{r as e,c as t,h as i,H as s,g as o}from"./p-7ffdbed1.js";import{D as n}from"./p-9b8731a9.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{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host(:disabled,[disabled]) button{pointer-events:none;opacity:0.5}:host(.small) button{padding:calc(var(--padding) / 2) var(--padding);font-size:0.7em}:host(.large) button{padding:calc(var(--padding) * 1.5) calc(var(--padding) * 3);font-size:1.2em}button{height:100%;width:100%;cursor:pointer}";const l=class{constructor(i){e(this,i);this.confirmed=t(this,"confirmed",7);this.canceled=t(this,"canceled",7);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.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}}getElementClasses(){const e=[];e.push(this.type);if(this.reversed){e.push("reversed")}if(this.size!=="normal"){e.push(this.size)}return e.join(" ")}render(){return i(s,{class:this.getElementClasses(),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 o(this)}};l.style=r;const a=":host{--focus-color:var(--dnn-color-primary, #3792ED);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:0.25rem;margin:3px}button{background-color:transparent;border:0;padding:0;margin:0;outline:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}button .unchecked,button .checked,button .intermediate{display:none}button.checked .checked,button.unchecked .unchecked,button.intermediate .intermediate{display:block}button svg.undefined{opacity:0.45}button:focus{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}";const h=class{constructor(i){e(this,i);this.checkedchange=t(this,"checkedchange",7);this.checked="unchecked";this.useIntermediate=false}changeState(){if(!this.useIntermediate){switch(this.checked){case"checked":this.checked="unchecked";break;case"unchecked":case"intermediate":this.checked="checked";break}this.checkedchange.emit(this.checked);return}switch(this.checked){case"checked":this.checked="intermediate";break;case"intermediate":this.checked="unchecked";break;case"unchecked":this.checked="checked";break}this.checkedchange.emit(this.checked)}render(){return i(s,null,i("button",{class:`icon ${this.checked}`,onClick:()=>this.changeState()},i("div",{class:"unchecked"},i("slot",{name:"uncheckedicon"},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"})))),i("div",{class:"checked"},i("slot",{name:"checkedicon"},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"})))),i("div",{class:"intermediate"},i("slot",{name:"intermediateicon"},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 o(this)}};h.style=a;const c=":host{display:inline-block}button{border:none;padding:0px;margin:0px;min-width:15px;min-height:15px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;background-color:transparent;outline:none}svg{height:2em;width:2em;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}button:focus svg,button:hover svg{color:var(--dnn-color-primary)}:host([expanded]) svg{-webkit-transform:rotate(90deg);transform:rotate(90deg)}";const d=class{constructor(i){e(this,i);this.changed=t(this,"changed",7);this.expandText="expand";this.collapseText="collapse";this.expanded=false}handleExpandedChanged(e){this.changed.emit(e)}render(){return i(s,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"]}}};d.style=c;const u=":host{display:block}#container{max-height:0;overflow:hidden;-webkit-transition:max-height 300ms ease-in-out;transition:max-height 300ms ease-in-out}";const p=class{constructor(i){e(this,i);this.dnnCollapsibleHeightChanged=t(this,"dnnCollapsibleHeightChanged",7);this.expanded=false;this.transitionDuration=150}handleHeightChanged(){requestAnimationFrame((()=>{this.updateSize()}))}async updateSize(){if(this.expanded){requestAnimationFrame((()=>{this.container.style.maxHeight=`${this.container.scrollHeight}px`}));setTimeout((()=>{this.container.style.maxHeight="none"}),this.transitionDuration)}}handledExpandedChanged(e){if(e){this.updateSize()}else{requestAnimationFrame((()=>{this.container.style.maxHeight=`${this.container.scrollHeight}px`;requestAnimationFrame((()=>{this.container.style.maxHeight="0px"}))}))}setTimeout((()=>{requestAnimationFrame((()=>{this.dnnCollapsibleHeightChanged.emit()}))}),this.transitionDuration)}componentDidLoad(){this.container.style.transition=`max-height ${this.transitionDuration}ms ease-in-out`}render(){return i(s,null,i("div",{id:"container",class:this.expanded&&"expanded",ref:e=>this.container=e,style:{transition:`max-height ${this.transitionDuration}ms ease-in-out`}},i("slot",null)))}get el(){return o(this)}static get watchers(){return{expanded:["handledExpandedChanged"]}}};p.style=u;
+import{r as e,c as t,h as i,H as s,g as o}from"./p-97d752ed.js";import{D as n}from"./p-9b8731a9.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{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host(:disabled,[disabled]) button{pointer-events:none;opacity:0.5}:host(.small) button{padding:calc(var(--padding) / 2) var(--padding);font-size:0.7em}:host(.large) button{padding:calc(var(--padding) * 1.5) calc(var(--padding) * 3);font-size:1.2em}button{height:100%;width:100%;cursor:pointer}";const l=class{constructor(i){e(this,i);this.confirmed=t(this,"confirmed",7);this.canceled=t(this,"canceled",7);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.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}}getElementClasses(){const e=[];e.push(this.type);if(this.reversed){e.push("reversed")}if(this.size!=="normal"){e.push(this.size)}return e.join(" ")}render(){return i(s,{class:this.getElementClasses(),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 o(this)}};l.style=r;const a=":host{--focus-color:var(--dnn-color-primary, #3792ED);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:0.25rem;margin:3px}button{background-color:transparent;border:0;padding:0;margin:0;outline:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}button .unchecked,button .checked,button .intermediate{display:none}button.checked .checked,button.unchecked .unchecked,button.intermediate .intermediate{display:block}button svg.undefined{opacity:0.45}button:focus{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}";const h=class{constructor(i){e(this,i);this.checkedchange=t(this,"checkedchange",7);this.checked="unchecked";this.useIntermediate=false}changeState(){if(!this.useIntermediate){switch(this.checked){case"checked":this.checked="unchecked";break;case"unchecked":case"intermediate":this.checked="checked";break}this.checkedchange.emit(this.checked);return}switch(this.checked){case"checked":this.checked="intermediate";break;case"intermediate":this.checked="unchecked";break;case"unchecked":this.checked="checked";break}this.checkedchange.emit(this.checked)}render(){return i(s,null,i("button",{class:`icon ${this.checked}`,onClick:()=>this.changeState()},i("div",{class:"unchecked"},i("slot",{name:"uncheckedicon"},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"})))),i("div",{class:"checked"},i("slot",{name:"checkedicon"},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"})))),i("div",{class:"intermediate"},i("slot",{name:"intermediateicon"},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 o(this)}};h.style=a;const c=":host{display:inline-block}button{border:none;padding:0px;margin:0px;min-width:15px;min-height:15px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;background-color:transparent;outline:none}svg{height:2em;width:2em;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}button:focus svg,button:hover svg{color:var(--dnn-color-primary)}:host([expanded]) svg{-webkit-transform:rotate(90deg);transform:rotate(90deg)}";const d=class{constructor(i){e(this,i);this.changed=t(this,"changed",7);this.expandText="expand";this.collapseText="collapse";this.expanded=false}handleExpandedChanged(e){this.changed.emit(e)}render(){return i(s,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"]}}};d.style=c;const u=":host{display:block}#container{max-height:0;overflow:hidden;-webkit-transition:max-height 300ms ease-in-out;transition:max-height 300ms ease-in-out}";const p=class{constructor(i){e(this,i);this.dnnCollapsibleHeightChanged=t(this,"dnnCollapsibleHeightChanged",7);this.expanded=false;this.transitionDuration=150}handleHeightChanged(){requestAnimationFrame((()=>{this.updateSize()}))}async updateSize(){if(this.expanded){requestAnimationFrame((()=>{this.container.style.maxHeight=`${this.container.scrollHeight}px`}));setTimeout((()=>{this.container.style.maxHeight="none"}),this.transitionDuration)}}handledExpandedChanged(e){if(e){this.updateSize()}else{requestAnimationFrame((()=>{this.container.style.maxHeight=`${this.container.scrollHeight}px`;requestAnimationFrame((()=>{this.container.style.maxHeight="0px"}))}))}setTimeout((()=>{requestAnimationFrame((()=>{this.dnnCollapsibleHeightChanged.emit()}))}),this.transitionDuration)}componentDidLoad(){this.container.style.transition=`max-height ${this.transitionDuration}ms ease-in-out`}render(){return i(s,null,i("div",{id:"container",class:this.expanded&&"expanded",ref:e=>this.container=e,style:{transition:`max-height ${this.transitionDuration}ms ease-in-out`}},i("slot",null)))}get el(){return o(this)}static get watchers(){return{expanded:["handledExpandedChanged"]}}};p.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.
@@ -7,5 +7,5 @@ import{r as e,c as t,h as i,H as s,g as o}from"./p-7ffdbed1.js";import{D as n}fr
 /** Reusable DNN UI component to pick a color
  * @copyright Copyright (c) .NET Foundation. All rights reserved.
  * @license MIT
- */var m=undefined&&undefined.__decorate||function(e,t,i,s){var o=arguments.length,n=o<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,i):s,r;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")n=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)if(r=e[l])n=(o<3?r(n):o>3?r(t,i,n):r(t,i))||n;return o>3&&n&&Object.defineProperty(t,i,n),n};const g=class{constructor(i){e(this,i);this.colorChanged=t(this,"colorChanged",7);this.color="FFFFFF";this.colorBoxHeight="50%";this.rgbDisplay="flex";this.hslDisplay="none";this.hexDisplay="none";this.handleSaturationLightnessMouseDown=e=>{e.preventDefault();this.handleDragLightnessSaturation(e);window.addEventListener("mousemove",this.handleDragLightnessSaturation);window.addEventListener("mouseup",this.handleSaturationLightnessMouseUp)};this.handleDragLightnessSaturation=e=>{const t=this.saturationLightnessBox.getBoundingClientRect();let i=e.clientX-t.left;if(i<0){i=0}if(i>t.width){i=t.width}i=i/t.width;let s=e.clientY-t.top;if(s<0){s=0}if(s>t.height){s=t.height}s=1-s/t.height;const o=new f;o.hue=this.currentColor.hue;o.saturation=i;o.lightness=s;this.currentColor=o};this.handleSaturationLightnessMouseUp=()=>{window.removeEventListener("mousemove",this.handleDragLightnessSaturation);window.removeEventListener("mouseup",this.handleSaturationLightnessMouseUp)};this.handleHueMouseDown=e=>{e.preventDefault();this.handleDragHue(e);window.addEventListener("mousemove",this.handleDragHue);window.addEventListener("mouseup",this.handleHueMouseUp)};this.handleHueMouseUp=()=>{window.removeEventListener("mousemove",this.handleDragHue);window.removeEventListener("mouseup",this.handleHueMouseUp)};this.handleDragHue=e=>{const t=this.hueRange.getBoundingClientRect();let i=e.clientX-t.left;if(i<0){i=0}if(i>t.width){i=t.width}i=i/t.width*360;const s=new f;s.hue=i;s.saturation=this.currentColor.saturation;s.lightness=this.currentColor.lightness;this.currentColor=s};this.handleComponentValueChange=(e,t)=>{let i=parseInt(e.target.value);if(isNaN(i)){return}const s=new f;if(i<0){i=0}if(i>255){i=255}let o=this.currentColor.red;let n=this.currentColor.green;let r=this.currentColor.blue;switch(t){case"red":o=i;break;case"green":n=i;break;case"blue":r=i;break}s.green=n;s.red=o;s.blue=r;this.currentColor=s};this.handleHSLChange=(e,t)=>{let i=parseInt(e.target.value);if(isNaN(i)){return}const s=new f;if(i!=null){let e=this.currentColor.hue;let o=this.currentColor.saturation;let n=this.currentColor.lightness;switch(t){case"hue":if(i<0){i=0}if(i>359){i=0}e=i;break;case"saturation":if(i<0){i=0}if(i>100){i=100}o=i/100;break;case"lightness":if(i<0){i=0}if(i>100){i=100}n=i/100;break}s.hue=e;s.saturation=o;s.lightness=n;this.currentColor=s}};this.handleSaturationLightnessKeyDown=e=>{let t=new f;t.hue=this.currentColor.hue;t.saturation=this.currentColor.saturation;t.lightness=this.currentColor.lightness;let i=.01;if(e.shiftKey){i=.1}switch(e.key){case"ArrowUp":t.lightness+=i;break;case"ArrowDown":t.lightness-=i;break;case"ArrowLeft":t.saturation-=i;break;case"ArrowRight":t.saturation+=i}this.currentColor=t};this.handleHueKeyDown=e=>{let t=new f;t.hue=this.currentColor.hue;t.saturation=this.currentColor.saturation;t.lightness=this.currentColor.lightness;let i=1;if(e.shiftKey){i=10}switch(e.key){case"ArrowLeft":t.hue-=i;break;case"ArrowRight":t.hue+=i}this.currentColor=t}}colorChangedHandler(e){this.colorChanged.emit(e)}handeCurrentColorChanged(e){this.colorChangedHandler(e)}componentWillLoad(){this.handleHexChange(this.color)}componentDidLoad(){this.el.style.setProperty("--color-box-height",this.colorBoxHeight.toString())}getHex(){return this.getDoublet(this.currentColor.red)+this.getDoublet(this.currentColor.green)+this.getDoublet(this.currentColor.blue)}getContrast(){return this.currentColor.contrastColor}getDoublet(e){const t=e.toString(16).toUpperCase();if(t.length===1){return"0"+t}return t}handleHexChange(e){const t=new f;if(e.match(/^(?:[\da-f]{3}|[\da-f]{6})$/i).length>0){if(e.length===3){let t=e[0]+e[0]+e[1]+e[1]+e[2]+e[2];e=t}t.red=parseInt(e.substr(0,2),16);t.green=parseInt(e.substr(2,2),16);t.blue=parseInt(e.substr(4,2),16)}else{t.red=this.currentColor.red;t.green=this.currentColor.green;t.blue=this.currentColor.blue}this.currentColor=t}switchColorMode(e){switch(e.target.id){case"rgb-switch":this.rgbDisplay="none";this.hslDisplay="none";this.hexDisplay="flex";break;case"hex-switch":this.rgbDisplay="none";this.hslDisplay="flex";this.hexDisplay="none";break;case"hsl-switch":this.rgbDisplay="flex";this.hslDisplay="none";this.hexDisplay="none";break;default:this.rgbDisplay="flex";this.hslDisplay="none";this.hexDisplay="none"}}render(){const e=this.currentColor.hue;const t=this.currentColor.saturation;const s=this.currentColor.lightness;const o=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:e=>this.saturationLightnessBox=e,style:{backgroundColor:`hsl(${e},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(t*100)+"%",bottom:Math.round(s*100)+"%"},onKeyDown:e=>this.handleSaturationLightnessKeyDown(e)})),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:e=>this.hueRange=e,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(e),style:{left:(e/359*100).toString()+"%"},onKeyDown:e=>this.handleHueKeyDown(e)})))),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:o,"aria-label":"red value",onChange:e=>this.handleComponentValueChange(e,"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:e=>this.handleComponentValueChange(e,"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:e=>this.handleComponentValueChange(e,"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(e),"aria-label":"Hue",onChange:e=>this.handleHSLChange(e,"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(t*100),"aria-label":"Saturation",onChange:e=>this.handleHSLChange(e,"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(s*100),"aria-label":"Lightness",onChange:e=>this.handleHSLChange(e,"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:e=>this.handleHexChange(e.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 o(this)}static get watchers(){return{currentColor:["handeCurrentColorChanged"]}}};m([n(100)],g.prototype,"colorChangedHandler",null);g.style=b;const v=":host{--border-color:var(--dnn-color-tertiary-contrast, lightgray);--border-radius:var(--dnn-controls-radius, 5px);--drop-background-color:var(--dnn-color-tertiary, lightblue);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:1rem;text-align:center;border:2px dashed var(--border-color);border-radius:var(--border-radius);padding:1rem;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host(.dropping){background-color:var(--drop-background-color)}p{margin:0;padding:0}button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border:0px;margin:0;padding:0;background-color:transparent}button:hover{cursor:pointer}button svg{margin-right:0.5rem}label.upload-file{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer}label.upload-file input{display:none}.video-preview{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.video-preview button{margin:1rem}";const x=class{constructor(i){e(this,i);this.filesSelected=t(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=e=>{e.stopPropagation();e.preventDefault();e.dataTransfer.dropEffect="copy";this.dropzone.classList.add("dropping")};this.handleDrop=e=>{e.stopPropagation();e.preventDefault();const t=e.dataTransfer.files;if(this.hasInvalidExtensions(t)){return}var i=this.getFilesFromFileList(t);this.filesSelected.emit(i)}}componentDidLoad(){if(this.allowCameraMode){this.checkIfBrowserCanTakeSnapshots().then((e=>this.canTakeSnapshots=e))}if(this.allowedExtensions!=undefined&&this.allowedExtensions.length>0){var e=this.allowedExtensions.map((e=>`.${e}`));var t=e.join(",");this.fileInput.accept=t}}checkIfBrowserCanTakeSnapshots(){return new Promise((e=>{const t=navigator.mediaDevices;if(t==undefined||t.enumerateDevices==undefined){e(false)}t.enumerateDevices().then((t=>{var i=t.some((e=>e.kind=="videoinput"));e(i)}))}))}getFilesFromFileList(e){var t=[];for(let i=0;i<e.length;i++){const s=e[i];t.push(s)}return t}handleUploadButton(e){let t=this.getFilesFromFileList(e.files);this.filesSelected.emit(t)}hasInvalidExtensions(e){var t=false;for(let s=0;s<e.length;s++){const o=e[s];var i=/(?:\.([^.]+))?$/;const n=i.exec(o.name)[1];if(n==undefined){t=true}if(this.allowedExtensions!=undefined&&!this.allowedExtensions.includes(n)){t=true}return t}}takeSnapshot(){this.takingPicture=true;navigator.mediaDevices.getUserMedia({video:true,audio:false}).then((e=>{this.videoPreview.srcObject=e;this.videoPreview.play().then((()=>{this.videoSettings=e.getVideoTracks()[0].getSettings()}))})).catch((e=>alert(e)))}applySnapshot(){var e=document.createElement("canvas");const t=e.getContext("2d");e.width=this.videoSettings.width;e.height=this.videoSettings.height;t.drawImage(this.videoPreview,0,0);e.toBlob((e=>{var t=new File([e],"image.jpeg",{type:"image/jpeg"});this.takingPicture=false;var i=[t];this.filesSelected.emit(i)}),"image/jpeg",this.captureQuality)}render(){var e,t,o,n,r,l;return i(s,{ref:e=>this.dropzone=e,class:"dropzone",onDragOver:this.handleDragOver,onDrop:this.handleDrop,onDragLeave:()=>this.dropzone.classList.remove("dropping")},!this.takingPicture&&[i("p",null,(e=this.resx)===null||e===void 0?void 0:e.dragAndDropFile),i("p",null,"- ",(t=this.resx)===null||t===void 0?void 0:t.or," -"),i("label",{class:"upload-file"},i("input",{type:"file",ref:e=>this.fileInput=e,onChange:e=>this.handleUploadButton(e.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"}))))," ",(o=this.resx)===null||o===void 0?void 0:o.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:e=>this.videoPreview=e}),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)))}};x.style=v;var w;(function(e){e[e["nw"]=0]="nw";e[e["ne"]=1]="ne";e[e["se"]=2]="se";e[e["sw"]=3]="sw"})(w||(w={}));function k(e,t){let i=0;let s=0;if(e instanceof MouseEvent){i=e.movementX;s=e.movementY}if(typeof TouchEvent!=="undefined"){if(e instanceof TouchEvent){let o=e.touches[0];if(t!=undefined){i=o.pageX-this.previousTouch.pageX;s=o.pageY-this.previousTouch.pageY}t=o}}return{movementX:i,movementY:s}}const y=":host{display:block}canvas{display:none}.view{visibility:hidden;opacity:0;height:0;overflow:hidden;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.view.visible{visibility:visible;opacity:1;height:initial;overflow:visible}.view .cropper{position:relative;width:100%}.view .cropper img{width:100%;display:block;margin:0 auto}.view .cropper .backdrop{-webkit-backdrop-filter:saturate(0.5);backdrop-filter:saturate(0.5);-webkit-backdrop-filter:brightness(0.5);backdrop-filter:brightness(0.5);position:absolute;left:0;top:0;width:100%;height:100%}.view .cropper .crop{position:absolute;top:0;left:0;width:100%;height:100%;outline:2px dashed white;-webkit-box-shadow:black 0 0 0px 2px;box-shadow:black 0 0 0px 2px;-webkit-backdrop-filter:saturate(2);backdrop-filter:saturate(2);-webkit-backdrop-filter:brightness(2);backdrop-filter:brightness(2);cursor:move}.view .cropper .crop>div{width:20px;height:20px;background-color:white;border:2px solid rgba(0, 0, 0, 0.5);position:absolute}.view .cropper .crop>div.nw,.view .cropper .crop>div.ne{top:-17px}.view .cropper .crop>div.ne,.view .cropper .crop>div.se{right:-17px}.view .cropper .crop>div.se,.view .cropper .crop>div.sw{bottom:-17px}.view .cropper .crop>div.sw,.view .cropper .crop>div.nw{left:-17px}.view .cropper .crop>div.nw,.view .cropper .crop>div.se{cursor:nwse-resize}.view .cropper .crop>div.ne,.view .cropper .crop>div.sw{cursor:nesw-resize}dnn-modal{--max-width:512px}";const C=class{constructor(i){e(this,i);this.imageCropChanged=t(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=e=>{e.stopPropagation();e.preventDefault();const t=e.target;const i=t.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=e=>{this.emitImage();document.removeEventListener("mouseup",this.handleImageCropFinished);this.previousTouch=undefined};this.handleNwMouseMove=e=>{this.handleCornerDrag(e,w.nw)};this.handleNeMouseMove=e=>{this.handleCornerDrag(e,w.ne)};this.handleSeMouseMove=e=>{this.handleCornerDrag(e,w.se)};this.handleSwMouseMove=e=>{this.handleCornerDrag(e,w.sw)};this.handleCornerDrag=(e,t)=>{if(!this.isMouseStillInTarget(e)){return}let{left:i,top:s}=this.getCornerLeftTop(t);let o=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:c,movementY:d}=k(e,this.previousTouch);if(Math.abs(c)<Math.abs(d)){r="vertical"}if(r=="horizontal"){switch(t){case w.nw:case w.sw:o=a.width-c;n=o/l;break;case w.ne:case w.se:o=a.width+c;n=o/l;break}}else{switch(t){case w.nw:case w.ne:n=a.height-d;o=n*l;break;case w.se:case w.sw:n=a.height+d;o=n*l;break}}switch(t){case w.ne:case w.nw:const e=a.height-n;s=this.crop.offsetTop+e}switch(t){case w.nw:case w.sw:const e=a.width-o;i=this.crop.offsetLeft+e;if(i<0)i=0;if(i>h.width)i=h.width;if(s<0)s=0;if(s>h.height)s=h.height;if(i+o>h.width)o=h.width-i;if(s+n>h.height)n=h.height-s;break;case w.ne:case w.se:if(s<0)s=0;if(s>h.height)s=h.height;if(i+o>h.width)o=h.width-i;if(s+n>h.height)n=h.height-s;break}if(o/n!=l){return}if(this.preventUndersized){const e=this.image.width/this.image.naturalWidth;if(o/e<this.width||n/e<this.height){return}}switch(t){case w.ne:this.crop.style.top=`${s}px`;this.crop.style.width=`${o}px`;this.crop.style.height=`${n}px`;break;case w.nw:this.crop.style.left=`${i}px`;this.crop.style.top=`${s}px`;this.crop.style.width=`${o}px`;this.crop.style.height=`${n}px`;break;case w.se:this.crop.style.width=`${o}px`;this.crop.style.height=`${n}px`;break;case w.sw:this.crop.style.left=`${i}px`;this.crop.style.width=`${o}px`;this.crop.style.height=`${n}px`;break}};this.handleCropDrag=e=>{if(!this.isMouseStillInTarget(e)){return}let{movementX:t,movementY:i}=k(e,this.previousTouch);let s=this.crop.offsetLeft+t;let o=this.crop.offsetTop+i;var n=this.image.getBoundingClientRect();var r=this.crop.getBoundingClientRect();if(s<0){s=0}if(o<0){o=0}if(s+r.width>n.width){s=this.crop.offsetLeft}if(o+r.height>n.height){o=this.crop.offsetTop}this.crop.style.left=s+"px";this.crop.style.top=o+"px"}}componentDidLoad(){requestAnimationFrame((()=>{this.setView("noPictureView")}))}setView(e){const t=this.host.shadowRoot.querySelectorAll(".view");t.forEach((e=>e.classList.remove("visible")));switch(e){case"noPictureView":this.noPictureView.classList.add("visible");break;case"hasPictureView":this.hasPictureView.classList.add("visible");break}this.view=e}initCrop(){var e=this.width/this.height;var t=this.image.getBoundingClientRect();var i=t.width/t.height;if(e>i){var s=t.width/e;var o=t.height-s;this.crop.style.top=Math.round(o/2).toString()+"px";this.crop.style.height=Math.round(s).toString()+"px"}else{var n=t.height*e;var o=t.width-n;this.crop.style.left=Math.round(o/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(e){if(e.type.split("/")[0]!="image"){return}var t=new FileReader;t.onload=e=>{var t=new Image;t.onload=()=>{this.canvas.width=t.width;this.canvas.height=t.height;if(this.preventUndersized&&(t.width<this.width||t.height<this.height)){this.imageTooSmallModal.show();return}var e=this.canvas.getContext("2d");e.drawImage(t,0,0);this.setView("hasPictureView");this.setImage()};t.src=e.target.result.toString()};t.readAsDataURL(e)}emitImage(){var e=this.crop.offsetLeft/this.image.width*this.image.naturalWidth;var t=this.crop.offsetTop/this.image.height*this.image.naturalHeight;var i=this.crop.getBoundingClientRect();var s=i.width/this.image.width*this.image.naturalWidth;var o=i.height/this.image.height*this.image.naturalHeight;if(e<0)e=0;if(e>this.image.naturalWidth)e=this.image.naturalWidth;if(t<0)t=0;if(t>this.image.naturalWidth)t=this.image.naturalWidth;if(s>this.image.naturalWidth)s=this.image.naturalWidth;if(o>this.image.naturalHeight)o=this.image.naturalHeight;var n=this.generateCroppedImage(e,t,s,o,this.width,this.height);this.imageCropChanged.emit(n)}generateCroppedImage(e,t,i,s,o,n){this.canvas.width=o;this.canvas.height=n;const r=this.canvas.getContext("2d");r.clearRect(0,0,o,n);r.drawImage(this.image,e,t,i,s,0,0,o,n);return this.canvas.toDataURL("image/jpeg",this.quality)}getCornerLeftTop(e){let t=0;let i=0;switch(e){case w.se:t=this.crop.offsetLeft;i=this.crop.offsetTop;break;case w.sw:i=this.crop.offsetTop;break}return{top:i,left:t}}isMouseStillInTarget(e){var t=false;let i;let s;const o=this.image.getBoundingClientRect();if(e instanceof MouseEvent){i=e.clientX;s=e.clientY}if(typeof TouchEvent!=="undefined"){if(e instanceof TouchEvent){var n=e.touches[0];i=n.clientX;s=n.clientY}}if(i>=o.x&&s>=o.y&&i<=o.left+o.width&&s<=o.top+o.height){t=true}var r=this.crop.querySelectorAll("div");r.forEach((e=>{var o=e.getBoundingClientRect();if(i>=o.x&&s>=o.y&&i<=o.left+o.width&&s<=o.top+o.height){t=true}}));return t}render(){return i(s,{ref:e=>this.host=e},i("canvas",{ref:e=>this.canvas=e}),i("div",{class:"view",ref:e=>this.hasPictureView=e},i("div",{class:"cropper"},i("img",{ref:e=>this.image=e}),i("div",{class:"backdrop"}),i("div",{class:"crop",ref:e=>this.crop=e,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:e=>this.noPictureView=e},i("dnn-dropzone",{allowCameraMode:true,onFilesSelected:e=>this.handleNewFile(e.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:e=>this.imageTooSmallModal=e,"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 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:1002;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;visibility:hidden;opacity:0}:host .overlay .modal{max-width:var(--max-width, 1200px);background-color:white;padding:30px;-webkit-transform:scale(2);transform:scale(2);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;z-index:2;position:relative;margin:10%;max-height:80%;border-radius:var(--dnn-controls-radius, 5px);-webkit-box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);display:block}:host .overlay .modal .close{position:absolute;background-color:white;border:2px solid white;border-radius:50%;padding:0;margin:0;top:-12px;right:-12px;outline:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host .overlay .modal .close:focus,:host .overlay .modal .close:hover{-webkit-box-shadow:0 0 2px 2px var(--dnn-color-primary, blue);box-shadow:0 0 2px 2px var(--dnn-color-primary, blue)}:host .overlay .modal .close svg{width:24px;height:24px;color:grey}:host .overlay.visible{visibility:visible;opacity:1}:host .overlay.visible .modal{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);display:block}";const M=class{constructor(i){e(this,i);this.dismissed=t(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(e){const t=e.target;if(t.id==="backdrop"&&this.backdropDismiss){this.handleDismiss()}}render(){return i(s,null,i("div",{id:"backdrop",class:this.visible?"overlay visible":"overlay",onClick:e=>this.handleBackdropClick(e)},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 o(this)}};M.style=z;const H=":host{display:block}.add-role-row{display:-ms-flexbox;display:flex;gap:1em;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}.add-role-row label{margin-right:0.5em}.search-user{display:-ms-flexbox;display:flex;gap:1em;margin-top:1em}.search-user .search-control{position:relative}.search-user .search-control dnn-collapsible{position:absolute;left:0;top:calc(100% - 2px);width:100%;-webkit-box-shadow:0px 4px 4px;box-shadow:0px 4px 4px}.search-user .search-control dnn-collapsible .dropdown{background-color:white;border:1px solid lightgray;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.search-user .search-control dnn-collapsible .dropdown button{background-color:transparent;border:none;border-bottom:1px solid lightgray;padding:0.25em;margin:0;text-align:left}table{border:1px solid lightgray;border-collapse:collapse;margin-top:1em}table thead{text-align:center}table thead tr{border-bottom:1px solid lightgray}table thead th{background-color:lightgray;padding:0.25em 0.5em}table thead th:first-child{border-right:1px solid lightgray}table tbody tr{border-bottom:1px dotted lightgray}table tbody tr th{text-align:left;border-right:1px solid lightgray;padding:0 0.5em}table tbody tr td{text-align:center}table tbody tr td dnn-checkbox span{display:none}table tbody tr td button{background-color:transparent;border:0;padding:0;margin:0;margin-right:1em}";const F=class{constructor(i){e(this,i);this.userSearchQueryChanged=t(this,"userSearchQueryChanged",7);this.permissionsChanged=t(this,"permissionsChanged",7);this.resx={Add:"Add",AllRoles:"All Roles",FilterByGroup:"Filter By Group",GlobalRoles:"Global Roles",Role:"Role",RolePermissions:"Role Permissions",SelectRole:"Select Role",User:"User",UserPermissions:"User Permissions"};this.foundUsers=[];this.selectedRoleGroupId=-1}handleFoundUsersChanged(e){if((e===null||e===void 0?void 0:e.length)>0){setTimeout((()=>{this.userCollapsible.expanded=true}),100)}}componentWillLoad(){document.addEventListener("click",this.dismissUserResults.bind(this))}disconnectedCallback(){document.removeEventListener("click",this.disconnectedCallback.bind(this))}dismissUserResults(e){const t=this.roleDropDown.getBoundingClientRect();if(e.pageX>t.right||e.pageX<t.left||e.pageY>t.bottom||e.pageY<t.top){this.userCollapsible.expanded=false}}handleRoleGroupChanged(e){const t=e.selectedIndex;const i=Number.parseInt(e.options[t].value);this.selectedRoleGroupId=i}addRole(){const e=Number.parseInt(this.roleDropDown.options[this.roleDropDown.selectedIndex].value);const t=this.roles.filter((t=>t.RoleId==e))[0];this.permissions=Object.assign(Object.assign({},this.permissions),{rolePermissions:[...this.permissions.rolePermissions,{default:false,locked:false,permissions:[],roleId:t.RoleId,roleName:t.RoleName}]});this.permissionsChanged.emit(this.permissions)}addUser(){if(this.pickedUser!=undefined){this.permissions=Object.assign(Object.assign({},this.permissions),{userPermissions:[...this.permissions.userPermissions,{displayName:this.pickedUser.displayName,permissions:[],userId:this.pickedUser.userId}]});this.pickedUser=undefined;this.userQuery="";this.permissionsChanged.emit(this.permissions)}}getRoles(){const e=this.roles.filter((e=>!this.permissions.rolePermissions.some((t=>t.roleId==e.RoleId))));if(this.selectedRoleGroupId==-2){return e}if(this.selectedRoleGroupId==-1){return e.filter((e=>e.IsSystemRole))}return e.filter((e=>e.RoleGroupId==this.selectedRoleGroupId))}renderRoleCheckBox(e,t){const s=e.permissions.filter((e=>e.permissionId==t.permissionId))[0];if(e.locked){return i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("g",{fill:"none"},i("path",{d:"M0 0h24v24H0V0z"}),i("path",{d:"M0 0h24v24H0V0z",opacity:".87"})),i("path",{d:"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"}))}const o=s==undefined?"intermediate":s.allowAccess?"checked":"unchecked";return i("dnn-checkbox",{"use-intermediate":true,checked:o,onCheckedchange:i=>this.handleRoleChanged(i.detail,e,t)},i("div",{slot:"intermediateicon"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0V0z",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"}))),i("div",{slot:"uncheckedicon"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0V0z",fill:"none"}),i("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z"}))),i("span",null,t.permissionName))}renderUserCheckBox(e,t){const s=e.permissions.filter((e=>e.permissionId==t.permissionId))[0];const o=s==undefined?"intermediate":s.allowAccess?"checked":"unchecked";return i("dnn-checkbox",{"use-intermediate":true,checked:o,onCheckedchange:i=>this.handleUserChanged(i.detail,e,t)},i("div",{slot:"intermediateicon"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0V0z",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"}))),i("div",{slot:"uncheckedicon"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0V0z",fill:"none"}),i("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z"}))),i("span",null,t.permissionName))}handleRoleChanged(e,t,i){switch(e){case"unchecked":this.permissions=Object.assign(Object.assign({},this.permissions),{rolePermissions:[...this.permissions.rolePermissions.map((e=>{if(e.roleId!=t.roleId){return e}const s=Object.assign({},e);s.permissions=[...s.permissions.filter((e=>e.permissionId!=i.permissionId)),{allowAccess:false,fullControl:false,permissionCode:i.permissionCode,permissionId:i.permissionId,permissionKey:i.permissionKey,permissionName:i.permissionName,view:false}];return s}))]});break;case"checked":this.permissions=Object.assign(Object.assign({},this.permissions),{rolePermissions:[...this.permissions.rolePermissions.map((e=>{if(e.roleId!=t.roleId){return e}const s=Object.assign({},e);s.permissions=[...s.permissions.filter((e=>e.permissionId!=i.permissionId)),{allowAccess:true,fullControl:false,permissionCode:i.permissionCode,permissionId:i.permissionId,permissionKey:i.permissionKey,permissionName:i.permissionName,view:false}];return s}))]});break;case"intermediate":this.permissions=Object.assign(Object.assign({},this.permissions),{rolePermissions:[...this.permissions.rolePermissions.map((e=>{if(e.roleId!=t.roleId){return e}const s=Object.assign({},e);s.permissions=[...s.permissions.filter((e=>e.permissionId!=i.permissionId))];return s}))]});break}this.permissionsChanged.emit(this.permissions)}handleUserChanged(e,t,i){switch(e){case"unchecked":this.permissions=Object.assign(Object.assign({},this.permissions),{userPermissions:[...this.permissions.userPermissions.map((e=>{if(e.userId!=t.userId){return e}const s=Object.assign({},e);s.permissions=[...s.permissions.filter((e=>e.permissionId!=i.permissionId)),{allowAccess:false,fullControl:false,permissionCode:i.permissionCode,permissionId:i.permissionId,permissionKey:i.permissionKey,permissionName:i.permissionName,view:false}];return s}))]});break;case"checked":this.permissions=Object.assign(Object.assign({},this.permissions),{userPermissions:[...this.permissions.userPermissions.map((e=>{if(e.userId!=t.userId){return e}const s=Object.assign({},e);s.permissions=[...s.permissions.filter((e=>e.permissionId!=i.permissionId)),{allowAccess:true,fullControl:false,permissionCode:i.permissionCode,permissionId:i.permissionId,permissionKey:i.permissionKey,permissionName:i.permissionName,view:false}];return s}))]});break;case"intermediate":this.permissions=Object.assign(Object.assign({},this.permissions),{userPermissions:[...this.permissions.userPermissions.map((e=>{if(e.userId!=t.userId){return e}const s=Object.assign({},e);s.permissions=[...s.permissions.filter((e=>e.permissionId!=i.permissionId))];return s}))]});break}this.permissionsChanged.emit(this.permissions)}removeRole(e){this.permissions=Object.assign(Object.assign({},this.permissions),{rolePermissions:[...this.permissions.rolePermissions.filter((t=>t.roleId!=e.roleId))]});this.permissionsChanged.emit()}removeUser(e){this.permissions=Object.assign(Object.assign({},this.permissions),{userPermissions:[...this.permissions.userPermissions.filter((t=>t.userId!=e.userId))]});this.permissionsChanged.emit(this.permissions)}handleQueryChanged(e){this.userQuery=e;if(e==undefined||e.length==0){this.userCollapsible.expanded=false;this.pickedUser=undefined;this.foundUsers=[];return}this.userSearchQueryChanged.emit(e)}handleSearchUserFieldKeyDown(e){if(e.key!="ArrowDown"){return}e.preventDefault();const t=this.userCollapsible.querySelector("button");if(t!=undefined){t.focus()}}handleSearchedUserKeyDown(e){const t=e.target;switch(e.key){case"ArrowDown":e.preventDefault();const i=t.nextElementSibling;i===null||i===void 0?void 0:i.focus();break;case"ArrowUp":e.preventDefault();const s=t.previousElementSibling;s===null||s===void 0?void 0:s.focus();break}}handleUserPicked(e){this.userQuery=e.displayName;this.pickedUser=e}getFilteredUsers(){return this.foundUsers.filter((e=>!this.permissions.userPermissions.some((t=>t.userId==e.userId))))}render(){const e=this.getRoles();return i(s,null,i("div",{class:"add-role-row"},i("div",{class:"dropdown"},i("label",null,this.resx.FilterByGroup," :"),i("select",{onChange:e=>this.handleRoleGroupChanged(e.target)},i("option",{value:-2,selected:this.selectedRoleGroupId==-2},this.resx.AllRoles),i("option",{value:-1,selected:this.selectedRoleGroupId==-1},this.resx.GlobalRoles),this.roleGroups.map((e=>i("option",{value:e.id,selected:this.selectedRoleGroupId==e.id},e.name))))),e&&e.length>0&&[i("div",{class:"dropdown"},i("label",null,this.resx.SelectRole," :"),i("select",{ref:e=>this.roleDropDown=e},this.getRoles().map((e=>i("option",{value:e.RoleId},e.RoleName))))),i("dnn-button",{type:"primary",onClick:()=>this.addRole()},this.resx.Add)]),i("table",{class:"roles-table"},i("caption",null,this.resx.RolePermissions),i("thead",null,i("tr",null,i("th",null,this.resx.Role),this.permissions.permissionDefinitions.map((e=>i("th",null,e.permissionName))),i("th",null," "))),i("tbody",null,this.permissions.rolePermissions.map((e=>i("tr",null,i("th",null,e.roleName),this.permissions.permissionDefinitions.map((t=>i("td",null,this.renderRoleCheckBox(e,t)))),i("td",null,!e.default&&i("button",{onClick:()=>this.removeRole(e)},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0V0z",fill:"none"}),i("path",{d:"M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"}))))))))),i("div",{class:"search-user"},i("div",{class:"search-control"},i("dnn-searchbox",{placeholder:this.resx.User,debounced:true,onQueryChanged:e=>this.handleQueryChanged(e.detail),onKeyDown:e=>this.handleSearchUserFieldKeyDown(e),query:this.userQuery}),i("dnn-collapsible",{ref:e=>this.userCollapsible=e},i("div",{class:"dropdown"},this.getFilteredUsers().map((e=>i("button",{onKeyDown:e=>this.handleSearchedUserKeyDown(e),onClick:()=>this.handleUserPicked(e)},e.displayName)))))),this.pickedUser&&i("dnn-button",{onClick:()=>this.addUser()},this.resx.Add)),this.permissions.userPermissions&&this.permissions.userPermissions.length>0&&i("table",{class:"users-table"},i("caption",null,this.resx.UserPermissions),i("thead",null,i("tr",null,i("th",null,this.resx.User),this.permissions.permissionDefinitions.map((e=>i("th",null,e.permissionName))),i("th",null," "))),i("tbody",null,this.permissions.userPermissions.map((e=>i("tr",null,i("th",null,e.displayName),this.permissions.permissionDefinitions.map((t=>i("td",null,this.renderUserCheckBox(e,t)))),i("td",null,i("button",{onClick:()=>this.removeUser(e)},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0V0z",fill:"none"}),i("path",{d:"M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"}))))))))))}static get watchers(){return{foundUsers:["handleFoundUsersChanged"]}}};F.style=H;const j=":host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;--background-color:transparent;--color:#333;--border-size:1px;--border-color:grey;--border-active-color:black;--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);--focus-color:var(--dnn-color-primary, blue)}:host input{width:100%;border:var(--border-size) solid var(--border-color);outline:none;border-radius:var(--border-radius);padding:var(--padding);padding-right:32px;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host input:focus,:host input:hover{outline:none;-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host svg{position:absolute;top:0;right:0;height:100%;-webkit-transform:scale(0.7);transform:scale(0.7);fill:var(--color);outline:var(--color);color:var(--color);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host button{background:transparent;border:0;margin:0;padding:0}:host button:focus svg,:host button:hover svg{fill:var(--focus-color);outline:var(--focus-color);color:var(--focus-color)}";var D=undefined&&undefined.__decorate||function(e,t,i,s){var o=arguments.length,n=o<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,i):s,r;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")n=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)if(r=e[l])n=(o<3?r(n):o>3?r(t,i,n):r(t,i))||n;return o>3&&n&&Object.defineProperty(t,i,n),n};const L=class{constructor(i){e(this,i);this.queryChanged=t(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(s,null,i("input",{type:"text",value:this.query,placeholder:this.placeholder,onInput:e=>this.query=e.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"]}}};D([n(500)],L.prototype,"debouncedHandleQueryChanged",null);L.style=j;const S=":host{--color:#888;--color-sorted:var(--dnn-color-primary, rgb(2,139,255));--color-hover:var(--dnn-color-primary-light, #36a1ff);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)}button.active svg{fill:var(--color-sorted)}button:hover svg,button:focus svg{fill:var(--color-hover)}";const A=class{constructor(i){e(this,i);this.sortChanged=t(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(s,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"}))))}};A.style=S;const V="";const B=class{constructor(t){e(this,t);this.visible=false}async show(){this.visible=true}async hide(){this.visible=false}render(){return i(s,null,this.visible&&i("slot",null))}};B.style=V;const O=":host{display:block;--color-background:var(--dnn-color-secondary-dark, lightgray);--color-text:var(--dnn-color-secondary-contrast, #333);--color-visible:var(--dnn-color-primary, #3792ED);--color-visible-text:var(--dnn-color-primary-contrast, #FFF);--color-focus:var(--dnn-color-primary, #3792ed)}.tabTitles{display:-ms-flexbox;display:flex;background-color:var(--color-background);color:var(--color-text)}.tabTitles button{padding:0.5rem 1rem;border:0;margin:0;background-color:transparent}.tabTitles button.visible{background-color:var(--color-visible);color:var(--color-bisible-text)}.tabTitles button:focus,.tabTitles button:hover{outline:none;-webkit-box-shadow:0 0 2px 2px var(--color-focus);box-shadow:0 0 2px 2px var(--color-focus)}.currentTab{border:1px solid var(--color-background)}";const T=class{constructor(t){e(this,t);this.tabTitles=[];this.selectedTabTitle=""}componentDidLoad(){requestAnimationFrame((()=>{this.updateTitles();this.showFirstTab()}))}getTabs(){return this.component.shadowRoot.querySelector("slot").assignedElements()}updateTitles(){const e=this.getTabs();e.forEach((e=>this.tabTitles=[...this.tabTitles,e.tabTitle]))}showFirstTab(){const e=this.getTabs()[0];e.show();this.selectedTabTitle=e.tabTitle}showTab(e){const t=this.getTabs();t.forEach((t=>{if(t.tabTitle==e){t.show();return}t.hide()}));this.selectedTabTitle=e}render(){return i(s,{ref:e=>this.component=e},i("div",{class:"tabTitles"},this.tabTitles.map((e=>i("button",{class:this.selectedTabTitle==e?"visible":"",onClick:()=>this.showTab(e)},e)))),i("div",{class:"currentTab"},i("slot",null)))}};T.style=O;const R=":host{display:inline-block;outline:none;cursor:pointer}button{height:1.5em;width:2.5em;outline:none;background-color:var(--background, #888);border:0;border-radius:var(--border-radius, var(--dnn-controls-radius, 0.75em));padding:0.1em;position:relative;margin:0;-webkit-transition:background-color 300ms ease-in-out;transition:background-color 300ms ease-in-out;position:relative;cursor:pointer}button:hover,button:focus{-webkit-box-shadow:0 0 2px 2px var(--dnn-color-primary);box-shadow:0 0 2px 2px var(--dnn-color-primary)}button.checked{background-color:var(--background-checked, var(--dnn-color-primary, blue))}button.checked .handle{left:calc(1em + 4px)}button:disabled{opacity:0.5;cursor:not-allowed;-webkit-box-shadow:none;box-shadow:none}button .handle{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;background-color:white;width:1em;height:1em;border-radius:var(--handle-border-radius, var(--dnn-controls-radius, 50%));position:absolute;top:calc(50% - 0.5em);left:2px}";const P=class{constructor(i){e(this,i);this.checkChanged=t(this,"checkChanged",7);this.checked=false;this.disabled=false}checkedChanged(e){this.checkChanged.emit({checked:e})}render(){return i(s,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 o(this)}static get watchers(){return{checked:["checkedChanged"]}}};P.style=R;const $=":host{display:-ms-flexbox;display:flex;overflow:visible}.expander{width:24px;height:24px}.expander button{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;background-color:transparent;border:none;padding:0;margin:0;height:1em;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;position:relative;top:2px}.expander button svg :first-child{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;fill:white;stroke:black}.expander.expanded button{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.expander.expanded button svg :first-child{fill:black;stroke:black}div.item .item-slot{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.25em;min-height:24px}div.item div.children{overflow:hidden;height:0;-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}";const I=class{constructor(i){e(this,i);this.userExpanded=t(this,"userExpanded",3);this.userCollapsed=t(this,"userCollapsed",3);this.expanded=false;this.hasChildren=false}watchExpanded(e){if(e){this.expander.classList.add("expanded");this.collapsible.expanded=true;return}this.expander.classList.remove("expanded");this.collapsible.expanded=false}componentDidLoad(){requestAnimationFrame((()=>{const e=this.childElement.children[0];const t=e.assignedElements().length;if(t>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");this.userExpanded.emit();return}this.expander.classList.remove("expanded");this.userCollapsed.emit()}render(){return i(s,null,i("div",{class:"expander",ref:e=>this.expander=e},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:e=>this.collapsible=e,expanded:this.expanded},i("div",{ref:e=>this.childElement=e},i("slot",{name:"children"})))))}get el(){return o(this)}static get watchers(){return{expanded:["watchExpanded"]}}};I.style=$;const _=":host{--background-color:var(--dnn-color-primary-contrast, white);--foreground-color:var(--dnn-color-primary, #3792ED);display:block}.menu-container{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;background-color:var(--background-color)}.menu-container .menu{margin:0.5em;display:-ms-flexbox;display:flex;gap:1em;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;white-space:nowrap;width:100%}.menu-container .overflow{margin-left:auto;position:relative}.menu-container .overflow button{cursor:pointer;padding:0;margin:0;background-color:transparent;border:none}.menu-container .overflow button svg{fill:var(--foreground-color)}.menu-container .overflow .dropdown{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;white-space:nowrap;right:0;-webkit-transition:100ms ease-in-out;transition:100ms ease-in-out;height:0;overflow:hidden}.menu-container .overflow .dropdown.visible{padding:1em;gap:0.5em;background-color:var(--background-color);-webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.7);box-shadow:2px 2px 4px rgba(0, 0, 0, 0.7)}";const U=class{constructor(t){e(this,t);this.showDropdownButton=false;this.showDropdownMenu=false;this.previousMenuWidth=0}componentDidRender(){requestAnimationFrame((()=>{this.moveItemsToDropDownIfNecessery();this.resizeObserver=new ResizeObserver((e=>{for(let t of e){if(t.contentRect.width<this.previousMenuWidth){this.moveItemsToDropDownIfNecessery()}if(this.previousMenuWidth>0&&t.contentRect.width>this.previousMenuWidth){this.moveItemsToMenuIfPossible()}this.previousMenuWidth=t.contentRect.width}}));this.resizeObserver.observe(this.element)}))}moveItemsToDropDownIfNecessery(){const e=Array.from(this.menu.querySelector("slot").assignedElements());const t=this.menu.getBoundingClientRect().width;let i=parseFloat(getComputedStyle(this.element).fontSize)*2;e.forEach((e=>i+=this.getFullWidth(e)));i+=(e.length-1)*parseFloat(getComputedStyle(this.element).fontSize);if(i>t){this.showDropdownButton=true;var s=e[e.length-1];if(this.dropdown==undefined){return}s.slot="dropdown";this.moveItemsToDropDownIfNecessery()}}moveItemsToMenuIfPossible(){if(this.dropdown==undefined||!this.dropdown.hasChildNodes()){return}const e=Array.from(this.menu.querySelector("slot").assignedElements());const t=this.menu.getBoundingClientRect().width;let i=parseFloat(getComputedStyle(this.element).fontSize)*2;i+=(e.length-1)*parseFloat(getComputedStyle(this.element).fontSize);e.forEach((e=>i+=this.getFullWidth(e)));const s=this.dropdown.querySelector("slot").assignedElements()[0];if(s!=undefined){i+=this.getFullWidth(s)}if(i<t){if(s!=undefined){s.slot=""}if(s==undefined){this.dropdown.classList.remove("visible");this.showDropdownMenu=false;this.showDropdownButton=false}}}getFullWidth(e){var t=e.getBoundingClientRect().width;var i=getComputedStyle(e);t+=parseFloat(i.marginLeft);t+=parseFloat(i.marginRight);t+=parseFloat(i.paddingLeft);t+=parseFloat(i.paddingRight);return t}toggleOverflowMenu(){this.showDropdownMenu=!this.showDropdownMenu;if(this.showDropdownMenu){this.dropdown.classList.add("visible");let e=0;const t=Array.from(this.dropdown.querySelector("slot").assignedElements());t.forEach((t=>e+=t.getBoundingClientRect().height));const i=parseFloat(getComputedStyle(this.dropdown).fontSize);const s=i*(this.dropdown.children.length-1)/2;e+=s;const o=i*2;e+=o;this.dropdown.style.height=`${e}px`;const n=e=>{const t=this.button.getBoundingClientRect();if(e.clientX<t.left||e.clientX>t.right||e.clientY<t.top||e.clientY>t.bottom){this.toggleOverflowMenu()}document.removeEventListener("click",n)};setTimeout((()=>{document.addEventListener("click",n,false)}),100)}else{this.dropdown.classList.remove("visible");this.dropdown.style.height="0px"}}render(){return i(s,null,i("div",{class:"menu-container"},i("div",{class:"menu",ref:e=>this.menu=e},i("slot",null)),this.showDropdownButton&&i("div",{class:"overflow"},i("button",{ref:e=>this.button=e,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:e=>this.dropdown=e},i("slot",{name:"dropdown"})))))}get element(){return o(this)}};U.style=_;const E=":host{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;margin:0 auto;position:relative;--left-pane-background-color:transparent;--right-pane-background-color:transparent}button{border:none;margin:0;padding:0;cursor:ew-resize;position:absolute;height:100%;background-color:transparent}button.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane{overflow-y:auto}.pane.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane.left{background-color:var(--left-pane-background-color)}.pane.right{background-color:var(--right-pane-background-color);-ms-flex-positive:1;flex-grow:1}";const q=class{constructor(i){e(this,i);this.widthChanged=t(this,"widthChanged",7);this.splitterWidth=16;this.splitWidthPercentage=30;this.leftWidth=0;this.rightWidth=0}async setSplitWidthPercentage(e){const t=this.element.shadowRoot.querySelectorAll(".pane");requestAnimationFrame((()=>{t.forEach((e=>e.classList.add("transition")));this.splitter.classList.add("transition");requestAnimationFrame((()=>{const i=this.element.getBoundingClientRect().width;let s=i*e/100;if(s<0){s=0}if(s>i){s=i}this.leftWidth=s;this.rightWidth=i-s;setTimeout((()=>{t.forEach((e=>e.classList.remove("transition")));this.splitter.classList.remove("transition")}),300)}))}))}async getSplitWidthPercentage(){const e=this.element.getBoundingClientRect().width;return this.leftWidth/e}componentDidLoad(){requestAnimationFrame((()=>{this.resizeObserver=new ResizeObserver((()=>{const e=this.element.getBoundingClientRect().width;this.leftWidth=e*this.splitWidthPercentage/100;this.rightWidth=e-this.leftWidth;this.widthChanged.emit(this.splitWidthPercentage)}));this.resizeObserver.observe(this.element)}))}handleMouseDown(e){e.preventDefault();const t=e=>{requestAnimationFrame((()=>{let t=this.element.getBoundingClientRect().width;let{movementX:i}=k(e,this.previousTouch);let s=this.leftWidth+i;if(s<0){s=0}if(s>t){s=t}this.leftWidth=s;this.rightWidth=t-s;this.splitWidthPercentage=this.leftWidth/t*100}))};const i=()=>{document.removeEventListener("mousemove",t);document.removeEventListener("touchmove",t);const e=this.element.getBoundingClientRect().width;const i=this.leftWidth/e*100;this.widthChanged.emit(i)};document.addEventListener("mouseup",i);document.addEventListener("touchend",i);document.addEventListener("mousemove",t);document.addEventListener("touchmove",t)}handleKeyDown(e){let t=0;switch(e.key){case"ArrowLeft":t=-10;break;case"ArrowRight":t=10;break;default:return}if(e.shiftKey){t=t*10}const i=this.element.getBoundingClientRect().width;let s=this.leftWidth+t;if(s<0){s=0}if(s>i){s=i}this.leftWidth=s;this.rightWidth=i-this.leftWidth}render(){return i(s,null,i("div",{class:"left pane",style:{width:`${this.leftWidth}px`}},i("slot",{name:"left"})),i("button",{onMouseDown:e=>this.handleMouseDown(e),onTouchStart:e=>this.handleMouseDown(e),onKeyDown:e=>this.handleKeyDown(e),ref:e=>this.splitter=e,style:{minWidth:`${this.splitterWidth.toString()}px`,left:`${this.leftWidth-2}px`}},i("slot",null)),i("div",{class:"right pane",style:{width:`${this.rightWidth}px`}},i("slot",{name:"right"})))}get element(){return o(this)}};q.style=E;export{l as dnn_button,h as dnn_checkbox,d as dnn_chevron,p as dnn_collapsible,g as dnn_color_picker,x as dnn_dropzone,C as dnn_image_cropper,M as dnn_modal,F as dnn_permissions_grid,L as dnn_searchbox,A as dnn_sort_icon,B as dnn_tab,T as dnn_tabs,P as dnn_toggle,I as dnn_treeview_item,U as dnn_vertical_overflow_menu,q as dnn_vertical_splitview};
-//# sourceMappingURL=p-909f2db9.entry.js.map
+ */var m=undefined&&undefined.__decorate||function(e,t,i,s){var o=arguments.length,n=o<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,i):s,r;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")n=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)if(r=e[l])n=(o<3?r(n):o>3?r(t,i,n):r(t,i))||n;return o>3&&n&&Object.defineProperty(t,i,n),n};const g=class{constructor(i){e(this,i);this.colorChanged=t(this,"colorChanged",7);this.color="FFFFFF";this.colorBoxHeight="50%";this.rgbDisplay="flex";this.hslDisplay="none";this.hexDisplay="none";this.handleSaturationLightnessMouseDown=e=>{e.preventDefault();this.handleDragLightnessSaturation(e);window.addEventListener("mousemove",this.handleDragLightnessSaturation);window.addEventListener("mouseup",this.handleSaturationLightnessMouseUp)};this.handleDragLightnessSaturation=e=>{const t=this.saturationLightnessBox.getBoundingClientRect();let i=e.clientX-t.left;if(i<0){i=0}if(i>t.width){i=t.width}i=i/t.width;let s=e.clientY-t.top;if(s<0){s=0}if(s>t.height){s=t.height}s=1-s/t.height;const o=new f;o.hue=this.currentColor.hue;o.saturation=i;o.lightness=s;this.currentColor=o};this.handleSaturationLightnessMouseUp=()=>{window.removeEventListener("mousemove",this.handleDragLightnessSaturation);window.removeEventListener("mouseup",this.handleSaturationLightnessMouseUp)};this.handleHueMouseDown=e=>{e.preventDefault();this.handleDragHue(e);window.addEventListener("mousemove",this.handleDragHue);window.addEventListener("mouseup",this.handleHueMouseUp)};this.handleHueMouseUp=()=>{window.removeEventListener("mousemove",this.handleDragHue);window.removeEventListener("mouseup",this.handleHueMouseUp)};this.handleDragHue=e=>{const t=this.hueRange.getBoundingClientRect();let i=e.clientX-t.left;if(i<0){i=0}if(i>t.width){i=t.width}i=i/t.width*360;const s=new f;s.hue=i;s.saturation=this.currentColor.saturation;s.lightness=this.currentColor.lightness;this.currentColor=s};this.handleComponentValueChange=(e,t)=>{let i=parseInt(e.target.value);if(isNaN(i)){return}const s=new f;if(i<0){i=0}if(i>255){i=255}let o=this.currentColor.red;let n=this.currentColor.green;let r=this.currentColor.blue;switch(t){case"red":o=i;break;case"green":n=i;break;case"blue":r=i;break}s.green=n;s.red=o;s.blue=r;this.currentColor=s};this.handleHSLChange=(e,t)=>{let i=parseInt(e.target.value);if(isNaN(i)){return}const s=new f;if(i!=null){let e=this.currentColor.hue;let o=this.currentColor.saturation;let n=this.currentColor.lightness;switch(t){case"hue":if(i<0){i=0}if(i>359){i=0}e=i;break;case"saturation":if(i<0){i=0}if(i>100){i=100}o=i/100;break;case"lightness":if(i<0){i=0}if(i>100){i=100}n=i/100;break}s.hue=e;s.saturation=o;s.lightness=n;this.currentColor=s}};this.handleSaturationLightnessKeyDown=e=>{let t=new f;t.hue=this.currentColor.hue;t.saturation=this.currentColor.saturation;t.lightness=this.currentColor.lightness;let i=.01;if(e.shiftKey){i=.1}switch(e.key){case"ArrowUp":t.lightness+=i;break;case"ArrowDown":t.lightness-=i;break;case"ArrowLeft":t.saturation-=i;break;case"ArrowRight":t.saturation+=i}this.currentColor=t};this.handleHueKeyDown=e=>{let t=new f;t.hue=this.currentColor.hue;t.saturation=this.currentColor.saturation;t.lightness=this.currentColor.lightness;let i=1;if(e.shiftKey){i=10}switch(e.key){case"ArrowLeft":t.hue-=i;break;case"ArrowRight":t.hue+=i}this.currentColor=t}}colorChangedHandler(e){this.colorChanged.emit(e)}handeCurrentColorChanged(e){this.colorChangedHandler(e)}componentWillLoad(){this.handleHexChange(this.color)}componentDidLoad(){this.el.style.setProperty("--color-box-height",this.colorBoxHeight.toString())}getHex(){return this.getDoublet(this.currentColor.red)+this.getDoublet(this.currentColor.green)+this.getDoublet(this.currentColor.blue)}getContrast(){return this.currentColor.contrastColor}getDoublet(e){const t=e.toString(16).toUpperCase();if(t.length===1){return"0"+t}return t}handleHexChange(e){const t=new f;if(e.match(/^(?:[\da-f]{3}|[\da-f]{6})$/i).length>0){if(e.length===3){let t=e[0]+e[0]+e[1]+e[1]+e[2]+e[2];e=t}t.red=parseInt(e.substr(0,2),16);t.green=parseInt(e.substr(2,2),16);t.blue=parseInt(e.substr(4,2),16)}else{t.red=this.currentColor.red;t.green=this.currentColor.green;t.blue=this.currentColor.blue}this.currentColor=t}switchColorMode(e){switch(e.target.id){case"rgb-switch":this.rgbDisplay="none";this.hslDisplay="none";this.hexDisplay="flex";break;case"hex-switch":this.rgbDisplay="none";this.hslDisplay="flex";this.hexDisplay="none";break;case"hsl-switch":this.rgbDisplay="flex";this.hslDisplay="none";this.hexDisplay="none";break;default:this.rgbDisplay="flex";this.hslDisplay="none";this.hexDisplay="none"}}render(){const e=this.currentColor.hue;const t=this.currentColor.saturation;const s=this.currentColor.lightness;const o=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:e=>this.saturationLightnessBox=e,style:{backgroundColor:`hsl(${e},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(t*100)+"%",bottom:Math.round(s*100)+"%"},onKeyDown:e=>this.handleSaturationLightnessKeyDown(e)})),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:e=>this.hueRange=e,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(e),style:{left:(e/359*100).toString()+"%"},onKeyDown:e=>this.handleHueKeyDown(e)})))),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:o,"aria-label":"red value",onChange:e=>this.handleComponentValueChange(e,"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:e=>this.handleComponentValueChange(e,"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:e=>this.handleComponentValueChange(e,"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(e),"aria-label":"Hue",onChange:e=>this.handleHSLChange(e,"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(t*100),"aria-label":"Saturation",onChange:e=>this.handleHSLChange(e,"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(s*100),"aria-label":"Lightness",onChange:e=>this.handleHSLChange(e,"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:e=>this.handleHexChange(e.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 o(this)}static get watchers(){return{currentColor:["handeCurrentColorChanged"]}}};m([n(100)],g.prototype,"colorChangedHandler",null);g.style=b;const v=":host{--border-color:var(--dnn-color-tertiary-contrast, lightgray);--border-radius:var(--dnn-controls-radius, 5px);--drop-background-color:var(--dnn-color-tertiary, lightblue);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:1rem;text-align:center;border:2px dashed var(--border-color);border-radius:var(--border-radius);padding:1rem;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host(.dropping){background-color:var(--drop-background-color)}p{margin:0;padding:0}button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border:0px;margin:0;padding:0;background-color:transparent}button:hover{cursor:pointer}button svg{margin-right:0.5rem}label.upload-file{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer}label.upload-file input{display:none}.video-preview{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.video-preview button{margin:1rem}";const x=class{constructor(i){e(this,i);this.filesSelected=t(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=e=>{e.stopPropagation();e.preventDefault();e.dataTransfer.dropEffect="copy";this.dropzone.classList.add("dropping")};this.handleDrop=e=>{e.stopPropagation();e.preventDefault();const t=e.dataTransfer.files;if(this.hasInvalidExtensions(t)){return}var i=this.getFilesFromFileList(t);this.filesSelected.emit(i)}}componentDidLoad(){if(this.allowCameraMode){this.checkIfBrowserCanTakeSnapshots().then((e=>this.canTakeSnapshots=e))}if(this.allowedExtensions!=undefined&&this.allowedExtensions.length>0){var e=this.allowedExtensions.map((e=>`.${e}`));var t=e.join(",");this.fileInput.accept=t}}checkIfBrowserCanTakeSnapshots(){return new Promise((e=>{const t=navigator.mediaDevices;if(t==undefined||t.enumerateDevices==undefined){e(false)}t.enumerateDevices().then((t=>{var i=t.some((e=>e.kind=="videoinput"));e(i)}))}))}getFilesFromFileList(e){var t=[];for(let i=0;i<e.length;i++){const s=e[i];t.push(s)}return t}handleUploadButton(e){let t=this.getFilesFromFileList(e.files);this.filesSelected.emit(t)}hasInvalidExtensions(e){var t=false;for(let s=0;s<e.length;s++){const o=e[s];var i=/(?:\.([^.]+))?$/;const n=i.exec(o.name)[1];if(n==undefined){t=true}if(this.allowedExtensions!=undefined&&!this.allowedExtensions.includes(n)){t=true}return t}}takeSnapshot(){this.takingPicture=true;navigator.mediaDevices.getUserMedia({video:true,audio:false}).then((e=>{this.videoPreview.srcObject=e;this.videoPreview.play().then((()=>{this.videoSettings=e.getVideoTracks()[0].getSettings()}))})).catch((e=>alert(e)))}applySnapshot(){var e=document.createElement("canvas");const t=e.getContext("2d");e.width=this.videoSettings.width;e.height=this.videoSettings.height;t.drawImage(this.videoPreview,0,0);e.toBlob((e=>{var t=new File([e],"image.jpeg",{type:"image/jpeg"});this.takingPicture=false;var i=[t];this.filesSelected.emit(i)}),"image/jpeg",this.captureQuality)}render(){var e,t,o,n,r,l;return i(s,{ref:e=>this.dropzone=e,class:"dropzone",onDragOver:this.handleDragOver,onDrop:this.handleDrop,onDragLeave:()=>this.dropzone.classList.remove("dropping")},!this.takingPicture&&[i("p",null,(e=this.resx)===null||e===void 0?void 0:e.dragAndDropFile),i("p",null,"- ",(t=this.resx)===null||t===void 0?void 0:t.or," -"),i("label",{class:"upload-file"},i("input",{type:"file",ref:e=>this.fileInput=e,onChange:e=>this.handleUploadButton(e.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"}))))," ",(o=this.resx)===null||o===void 0?void 0:o.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:e=>this.videoPreview=e}),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)))}};x.style=v;var w;(function(e){e[e["nw"]=0]="nw";e[e["ne"]=1]="ne";e[e["se"]=2]="se";e[e["sw"]=3]="sw"})(w||(w={}));function k(e,t){let i=0;let s=0;if(e instanceof MouseEvent){i=e.movementX;s=e.movementY}if(typeof TouchEvent!=="undefined"){if(e instanceof TouchEvent){let o=e.touches[0];if(t!=undefined){i=o.pageX-this.previousTouch.pageX;s=o.pageY-this.previousTouch.pageY}t=o}}return{movementX:i,movementY:s}}const y=":host{display:block}canvas{display:none}.view{visibility:hidden;opacity:0;height:0;overflow:hidden;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.view.visible{visibility:visible;opacity:1;height:initial;overflow:visible}.view .cropper{position:relative;width:100%}.view .cropper img{width:100%;display:block;margin:0 auto}.view .cropper .backdrop{-webkit-backdrop-filter:saturate(0.5);backdrop-filter:saturate(0.5);-webkit-backdrop-filter:brightness(0.5);backdrop-filter:brightness(0.5);position:absolute;left:0;top:0;width:100%;height:100%}.view .cropper .crop{position:absolute;top:0;left:0;width:100%;height:100%;outline:2px dashed white;-webkit-box-shadow:black 0 0 0px 2px;box-shadow:black 0 0 0px 2px;-webkit-backdrop-filter:saturate(2);backdrop-filter:saturate(2);-webkit-backdrop-filter:brightness(2);backdrop-filter:brightness(2);cursor:move}.view .cropper .crop>div{width:20px;height:20px;background-color:white;border:2px solid rgba(0, 0, 0, 0.5);position:absolute}.view .cropper .crop>div.nw,.view .cropper .crop>div.ne{top:-17px}.view .cropper .crop>div.ne,.view .cropper .crop>div.se{right:-17px}.view .cropper .crop>div.se,.view .cropper .crop>div.sw{bottom:-17px}.view .cropper .crop>div.sw,.view .cropper .crop>div.nw{left:-17px}.view .cropper .crop>div.nw,.view .cropper .crop>div.se{cursor:nwse-resize}.view .cropper .crop>div.ne,.view .cropper .crop>div.sw{cursor:nesw-resize}dnn-modal{--max-width:512px}";const C=class{constructor(i){e(this,i);this.imageCropChanged=t(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=e=>{e.stopPropagation();e.preventDefault();const t=e.target;const i=t.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=e=>{this.emitImage();document.removeEventListener("mouseup",this.handleImageCropFinished);this.previousTouch=undefined};this.handleNwMouseMove=e=>{this.handleCornerDrag(e,w.nw)};this.handleNeMouseMove=e=>{this.handleCornerDrag(e,w.ne)};this.handleSeMouseMove=e=>{this.handleCornerDrag(e,w.se)};this.handleSwMouseMove=e=>{this.handleCornerDrag(e,w.sw)};this.handleCornerDrag=(e,t)=>{if(!this.isMouseStillInTarget(e)){return}let{left:i,top:s}=this.getCornerLeftTop(t);let o=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:c,movementY:d}=k(e,this.previousTouch);if(Math.abs(c)<Math.abs(d)){r="vertical"}if(r=="horizontal"){switch(t){case w.nw:case w.sw:o=a.width-c;n=o/l;break;case w.ne:case w.se:o=a.width+c;n=o/l;break}}else{switch(t){case w.nw:case w.ne:n=a.height-d;o=n*l;break;case w.se:case w.sw:n=a.height+d;o=n*l;break}}switch(t){case w.ne:case w.nw:const e=a.height-n;s=this.crop.offsetTop+e}switch(t){case w.nw:case w.sw:const e=a.width-o;i=this.crop.offsetLeft+e;if(i<0)i=0;if(i>h.width)i=h.width;if(s<0)s=0;if(s>h.height)s=h.height;if(i+o>h.width)o=h.width-i;if(s+n>h.height)n=h.height-s;break;case w.ne:case w.se:if(s<0)s=0;if(s>h.height)s=h.height;if(i+o>h.width)o=h.width-i;if(s+n>h.height)n=h.height-s;break}if(o/n!=l){return}if(this.preventUndersized){const e=this.image.width/this.image.naturalWidth;if(o/e<this.width||n/e<this.height){return}}switch(t){case w.ne:this.crop.style.top=`${s}px`;this.crop.style.width=`${o}px`;this.crop.style.height=`${n}px`;break;case w.nw:this.crop.style.left=`${i}px`;this.crop.style.top=`${s}px`;this.crop.style.width=`${o}px`;this.crop.style.height=`${n}px`;break;case w.se:this.crop.style.width=`${o}px`;this.crop.style.height=`${n}px`;break;case w.sw:this.crop.style.left=`${i}px`;this.crop.style.width=`${o}px`;this.crop.style.height=`${n}px`;break}};this.handleCropDrag=e=>{if(!this.isMouseStillInTarget(e)){return}let{movementX:t,movementY:i}=k(e,this.previousTouch);let s=this.crop.offsetLeft+t;let o=this.crop.offsetTop+i;var n=this.image.getBoundingClientRect();var r=this.crop.getBoundingClientRect();if(s<0){s=0}if(o<0){o=0}if(s+r.width>n.width){s=this.crop.offsetLeft}if(o+r.height>n.height){o=this.crop.offsetTop}this.crop.style.left=s+"px";this.crop.style.top=o+"px"}}componentDidLoad(){requestAnimationFrame((()=>{this.setView("noPictureView")}))}setView(e){const t=this.host.shadowRoot.querySelectorAll(".view");t.forEach((e=>e.classList.remove("visible")));switch(e){case"noPictureView":this.noPictureView.classList.add("visible");break;case"hasPictureView":this.hasPictureView.classList.add("visible");break}this.view=e}initCrop(){var e=this.width/this.height;var t=this.image.getBoundingClientRect();var i=t.width/t.height;if(e>i){var s=t.width/e;var o=t.height-s;this.crop.style.top=Math.round(o/2).toString()+"px";this.crop.style.height=Math.round(s).toString()+"px"}else{var n=t.height*e;var o=t.width-n;this.crop.style.left=Math.round(o/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(e){if(e.type.split("/")[0]!="image"){return}var t=new FileReader;t.onload=e=>{var t=new Image;t.onload=()=>{this.canvas.width=t.width;this.canvas.height=t.height;if(this.preventUndersized&&(t.width<this.width||t.height<this.height)){this.imageTooSmallModal.show();return}var e=this.canvas.getContext("2d");e.drawImage(t,0,0);this.setView("hasPictureView");this.setImage()};t.src=e.target.result.toString()};t.readAsDataURL(e)}emitImage(){var e=this.crop.offsetLeft/this.image.width*this.image.naturalWidth;var t=this.crop.offsetTop/this.image.height*this.image.naturalHeight;var i=this.crop.getBoundingClientRect();var s=i.width/this.image.width*this.image.naturalWidth;var o=i.height/this.image.height*this.image.naturalHeight;if(e<0)e=0;if(e>this.image.naturalWidth)e=this.image.naturalWidth;if(t<0)t=0;if(t>this.image.naturalWidth)t=this.image.naturalWidth;if(s>this.image.naturalWidth)s=this.image.naturalWidth;if(o>this.image.naturalHeight)o=this.image.naturalHeight;var n=this.generateCroppedImage(e,t,s,o,this.width,this.height);this.imageCropChanged.emit(n)}generateCroppedImage(e,t,i,s,o,n){this.canvas.width=o;this.canvas.height=n;const r=this.canvas.getContext("2d");r.clearRect(0,0,o,n);r.drawImage(this.image,e,t,i,s,0,0,o,n);return this.canvas.toDataURL("image/jpeg",this.quality)}getCornerLeftTop(e){let t=0;let i=0;switch(e){case w.se:t=this.crop.offsetLeft;i=this.crop.offsetTop;break;case w.sw:i=this.crop.offsetTop;break}return{top:i,left:t}}isMouseStillInTarget(e){var t=false;let i;let s;const o=this.image.getBoundingClientRect();if(e instanceof MouseEvent){i=e.clientX;s=e.clientY}if(typeof TouchEvent!=="undefined"){if(e instanceof TouchEvent){var n=e.touches[0];i=n.clientX;s=n.clientY}}if(i>=o.x&&s>=o.y&&i<=o.left+o.width&&s<=o.top+o.height){t=true}var r=this.crop.querySelectorAll("div");r.forEach((e=>{var o=e.getBoundingClientRect();if(i>=o.x&&s>=o.y&&i<=o.left+o.width&&s<=o.top+o.height){t=true}}));return t}render(){return i(s,{ref:e=>this.host=e},i("canvas",{ref:e=>this.canvas=e}),i("div",{class:"view",ref:e=>this.hasPictureView=e},i("div",{class:"cropper"},i("img",{ref:e=>this.image=e}),i("div",{class:"backdrop"}),i("div",{class:"crop",ref:e=>this.crop=e,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:e=>this.noPictureView=e},i("dnn-dropzone",{allowCameraMode:true,onFilesSelected:e=>this.handleNewFile(e.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:e=>this.imageTooSmallModal=e,"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 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:1002;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;visibility:hidden;opacity:0}:host .overlay .modal{max-width:var(--max-width, 1200px);background-color:white;padding:30px;-webkit-transform:scale(2);transform:scale(2);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;z-index:2;position:relative;margin:10%;max-height:80%;border-radius:var(--dnn-controls-radius, 5px);-webkit-box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);display:block}:host .overlay .modal .content{max-width:80vw;max-height:80vh;overflow:auto}:host .overlay .modal .close{position:absolute;background-color:white;border:2px solid white;border-radius:50%;padding:0;margin:0;top:-12px;right:-12px;outline:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host .overlay .modal .close:focus,:host .overlay .modal .close:hover{-webkit-box-shadow:0 0 2px 2px var(--dnn-color-primary, blue);box-shadow:0 0 2px 2px var(--dnn-color-primary, blue)}:host .overlay .modal .close svg{width:24px;height:24px;color:grey}:host .overlay.visible{visibility:visible;opacity:1}:host .overlay.visible .modal{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);display:block}";const M=class{constructor(i){e(this,i);this.dismissed=t(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(e){const t=e.target;if(t.id==="backdrop"&&this.backdropDismiss){this.handleDismiss()}}render(){return i(s,null,i("div",{id:"backdrop",class:this.visible?"overlay visible":"overlay",onClick:e=>this.handleBackdropClick(e)},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("div",{class:"content"},i("slot",null)))))}get el(){return o(this)}};M.style=z;const H=":host{display:block}.add-role-row{display:-ms-flexbox;display:flex;gap:1em;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}.add-role-row label{margin-right:0.5em}.search-user{display:-ms-flexbox;display:flex;gap:1em;margin-top:1em}.search-user .search-control{position:relative}.search-user .search-control dnn-collapsible{position:absolute;left:0;top:calc(100% - 2px);width:100%;-webkit-box-shadow:0px 4px 4px;box-shadow:0px 4px 4px}.search-user .search-control dnn-collapsible .dropdown{background-color:white;border:1px solid lightgray;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.search-user .search-control dnn-collapsible .dropdown button{background-color:transparent;border:none;border-bottom:1px solid lightgray;padding:0.25em;margin:0;text-align:left}table{border:1px solid lightgray;border-collapse:collapse;margin-top:1em}table thead{text-align:center}table thead tr{border-bottom:1px solid lightgray}table thead th{background-color:lightgray;padding:0.25em 0.5em}table thead th:first-child{border-right:1px solid lightgray}table tbody tr{border-bottom:1px dotted lightgray}table tbody tr th{text-align:left;border-right:1px solid lightgray;padding:0 0.5em}table tbody tr td{text-align:center}table tbody tr td dnn-checkbox span{display:none}table tbody tr td button{background-color:transparent;border:0;padding:0;margin:0;margin-right:1em}";const F=class{constructor(i){e(this,i);this.userSearchQueryChanged=t(this,"userSearchQueryChanged",7);this.permissionsChanged=t(this,"permissionsChanged",7);this.resx={Add:"Add",AllRoles:"All Roles",FilterByGroup:"Filter By Group",GlobalRoles:"Global Roles",Role:"Role",RolePermissions:"Role Permissions",SelectRole:"Select Role",User:"User",UserPermissions:"User Permissions"};this.foundUsers=[];this.selectedRoleGroupId=-1}handleFoundUsersChanged(e){if((e===null||e===void 0?void 0:e.length)>0){setTimeout((()=>{this.userCollapsible.expanded=true}),100)}}componentWillLoad(){document.addEventListener("click",this.dismissUserResults.bind(this))}disconnectedCallback(){document.removeEventListener("click",this.disconnectedCallback.bind(this))}dismissUserResults(e){const t=this.roleDropDown.getBoundingClientRect();if(e.pageX>t.right||e.pageX<t.left||e.pageY>t.bottom||e.pageY<t.top){this.userCollapsible.expanded=false}}handleRoleGroupChanged(e){const t=e.selectedIndex;const i=Number.parseInt(e.options[t].value);this.selectedRoleGroupId=i}addRole(){const e=Number.parseInt(this.roleDropDown.options[this.roleDropDown.selectedIndex].value);const t=this.roles.filter((t=>t.RoleId==e))[0];this.permissions=Object.assign(Object.assign({},this.permissions),{rolePermissions:[...this.permissions.rolePermissions,{default:false,locked:false,permissions:[],roleId:t.RoleId,roleName:t.RoleName}]});this.permissionsChanged.emit(this.permissions)}addUser(){if(this.pickedUser!=undefined){this.permissions=Object.assign(Object.assign({},this.permissions),{userPermissions:[...this.permissions.userPermissions,{displayName:this.pickedUser.displayName,permissions:[],userId:this.pickedUser.userId}]});this.pickedUser=undefined;this.userQuery="";this.permissionsChanged.emit(this.permissions)}}getRoles(){const e=this.roles.filter((e=>!this.permissions.rolePermissions.some((t=>t.roleId==e.RoleId))));if(this.selectedRoleGroupId==-2){return e}if(this.selectedRoleGroupId==-1){return e.filter((e=>e.IsSystemRole))}return e.filter((e=>e.RoleGroupId==this.selectedRoleGroupId))}renderRoleCheckBox(e,t){const s=e.permissions.filter((e=>e.permissionId==t.permissionId))[0];if(e.locked){return i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("g",{fill:"none"},i("path",{d:"M0 0h24v24H0V0z"}),i("path",{d:"M0 0h24v24H0V0z",opacity:".87"})),i("path",{d:"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"}))}const o=s==undefined?"intermediate":s.allowAccess?"checked":"unchecked";return i("dnn-checkbox",{"use-intermediate":true,checked:o,onCheckedchange:i=>this.handleRoleChanged(i.detail,e,t)},i("div",{slot:"intermediateicon"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0V0z",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"}))),i("div",{slot:"uncheckedicon"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0V0z",fill:"none"}),i("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z"}))),i("span",null,t.permissionName))}renderUserCheckBox(e,t){const s=e.permissions.filter((e=>e.permissionId==t.permissionId))[0];const o=s==undefined?"intermediate":s.allowAccess?"checked":"unchecked";return i("dnn-checkbox",{"use-intermediate":true,checked:o,onCheckedchange:i=>this.handleUserChanged(i.detail,e,t)},i("div",{slot:"intermediateicon"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0V0z",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"}))),i("div",{slot:"uncheckedicon"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0V0z",fill:"none"}),i("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z"}))),i("span",null,t.permissionName))}handleRoleChanged(e,t,i){switch(e){case"unchecked":this.permissions=Object.assign(Object.assign({},this.permissions),{rolePermissions:[...this.permissions.rolePermissions.map((e=>{if(e.roleId!=t.roleId){return e}const s=Object.assign({},e);s.permissions=[...s.permissions.filter((e=>e.permissionId!=i.permissionId)),{allowAccess:false,fullControl:false,permissionCode:i.permissionCode,permissionId:i.permissionId,permissionKey:i.permissionKey,permissionName:i.permissionName,view:false}];return s}))]});break;case"checked":this.permissions=Object.assign(Object.assign({},this.permissions),{rolePermissions:[...this.permissions.rolePermissions.map((e=>{if(e.roleId!=t.roleId){return e}const s=Object.assign({},e);s.permissions=[...s.permissions.filter((e=>e.permissionId!=i.permissionId)),{allowAccess:true,fullControl:false,permissionCode:i.permissionCode,permissionId:i.permissionId,permissionKey:i.permissionKey,permissionName:i.permissionName,view:false}];return s}))]});break;case"intermediate":this.permissions=Object.assign(Object.assign({},this.permissions),{rolePermissions:[...this.permissions.rolePermissions.map((e=>{if(e.roleId!=t.roleId){return e}const s=Object.assign({},e);s.permissions=[...s.permissions.filter((e=>e.permissionId!=i.permissionId))];return s}))]});break}this.permissionsChanged.emit(this.permissions)}handleUserChanged(e,t,i){switch(e){case"unchecked":this.permissions=Object.assign(Object.assign({},this.permissions),{userPermissions:[...this.permissions.userPermissions.map((e=>{if(e.userId!=t.userId){return e}const s=Object.assign({},e);s.permissions=[...s.permissions.filter((e=>e.permissionId!=i.permissionId)),{allowAccess:false,fullControl:false,permissionCode:i.permissionCode,permissionId:i.permissionId,permissionKey:i.permissionKey,permissionName:i.permissionName,view:false}];return s}))]});break;case"checked":this.permissions=Object.assign(Object.assign({},this.permissions),{userPermissions:[...this.permissions.userPermissions.map((e=>{if(e.userId!=t.userId){return e}const s=Object.assign({},e);s.permissions=[...s.permissions.filter((e=>e.permissionId!=i.permissionId)),{allowAccess:true,fullControl:false,permissionCode:i.permissionCode,permissionId:i.permissionId,permissionKey:i.permissionKey,permissionName:i.permissionName,view:false}];return s}))]});break;case"intermediate":this.permissions=Object.assign(Object.assign({},this.permissions),{userPermissions:[...this.permissions.userPermissions.map((e=>{if(e.userId!=t.userId){return e}const s=Object.assign({},e);s.permissions=[...s.permissions.filter((e=>e.permissionId!=i.permissionId))];return s}))]});break}this.permissionsChanged.emit(this.permissions)}removeRole(e){this.permissions=Object.assign(Object.assign({},this.permissions),{rolePermissions:[...this.permissions.rolePermissions.filter((t=>t.roleId!=e.roleId))]});this.permissionsChanged.emit()}removeUser(e){this.permissions=Object.assign(Object.assign({},this.permissions),{userPermissions:[...this.permissions.userPermissions.filter((t=>t.userId!=e.userId))]});this.permissionsChanged.emit(this.permissions)}handleQueryChanged(e){this.userQuery=e;if(e==undefined||e.length==0){this.userCollapsible.expanded=false;this.pickedUser=undefined;this.foundUsers=[];return}this.userSearchQueryChanged.emit(e)}handleSearchUserFieldKeyDown(e){if(e.key!="ArrowDown"){return}e.preventDefault();const t=this.userCollapsible.querySelector("button");if(t!=undefined){t.focus()}}handleSearchedUserKeyDown(e){const t=e.target;switch(e.key){case"ArrowDown":e.preventDefault();const i=t.nextElementSibling;i===null||i===void 0?void 0:i.focus();break;case"ArrowUp":e.preventDefault();const s=t.previousElementSibling;s===null||s===void 0?void 0:s.focus();break}}handleUserPicked(e){this.userQuery=e.displayName;this.pickedUser=e}getFilteredUsers(){return this.foundUsers.filter((e=>!this.permissions.userPermissions.some((t=>t.userId==e.userId))))}render(){const e=this.getRoles();return i(s,null,i("div",{class:"add-role-row"},i("div",{class:"dropdown"},i("label",null,this.resx.FilterByGroup," :"),i("select",{onChange:e=>this.handleRoleGroupChanged(e.target)},i("option",{value:-2,selected:this.selectedRoleGroupId==-2},this.resx.AllRoles),i("option",{value:-1,selected:this.selectedRoleGroupId==-1},this.resx.GlobalRoles),this.roleGroups.map((e=>i("option",{value:e.id,selected:this.selectedRoleGroupId==e.id},e.name))))),e&&e.length>0&&[i("div",{class:"dropdown"},i("label",null,this.resx.SelectRole," :"),i("select",{ref:e=>this.roleDropDown=e},this.getRoles().map((e=>i("option",{value:e.RoleId},e.RoleName))))),i("dnn-button",{type:"primary",onClick:()=>this.addRole()},this.resx.Add)]),i("table",{class:"roles-table"},i("caption",null,this.resx.RolePermissions),i("thead",null,i("tr",null,i("th",null,this.resx.Role),this.permissions.permissionDefinitions.map((e=>i("th",null,e.permissionName))),i("th",null," "))),i("tbody",null,this.permissions.rolePermissions.map((e=>i("tr",null,i("th",null,e.roleName),this.permissions.permissionDefinitions.map((t=>i("td",null,this.renderRoleCheckBox(e,t)))),i("td",null,!e.default&&i("button",{onClick:()=>this.removeRole(e)},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0V0z",fill:"none"}),i("path",{d:"M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"}))))))))),i("div",{class:"search-user"},i("div",{class:"search-control"},i("dnn-searchbox",{placeholder:this.resx.User,debounced:true,onQueryChanged:e=>this.handleQueryChanged(e.detail),onKeyDown:e=>this.handleSearchUserFieldKeyDown(e),query:this.userQuery}),i("dnn-collapsible",{ref:e=>this.userCollapsible=e},i("div",{class:"dropdown"},this.getFilteredUsers().map((e=>i("button",{onKeyDown:e=>this.handleSearchedUserKeyDown(e),onClick:()=>this.handleUserPicked(e)},e.displayName)))))),this.pickedUser&&i("dnn-button",{onClick:()=>this.addUser()},this.resx.Add)),this.permissions.userPermissions&&this.permissions.userPermissions.length>0&&i("table",{class:"users-table"},i("caption",null,this.resx.UserPermissions),i("thead",null,i("tr",null,i("th",null,this.resx.User),this.permissions.permissionDefinitions.map((e=>i("th",null,e.permissionName))),i("th",null," "))),i("tbody",null,this.permissions.userPermissions.map((e=>i("tr",null,i("th",null,e.displayName),this.permissions.permissionDefinitions.map((t=>i("td",null,this.renderUserCheckBox(e,t)))),i("td",null,i("button",{onClick:()=>this.removeUser(e)},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0V0z",fill:"none"}),i("path",{d:"M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"}))))))))))}static get watchers(){return{foundUsers:["handleFoundUsersChanged"]}}};F.style=H;const j=":host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;--background-color:transparent;--color:#333;--border-size:1px;--border-color:grey;--border-active-color:black;--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);--focus-color:var(--dnn-color-primary, blue)}:host input{width:100%;border:var(--border-size) solid var(--border-color);outline:none;border-radius:var(--border-radius);padding:var(--padding);padding-right:32px;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host input:focus,:host input:hover{outline:none;-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host svg{position:absolute;top:0;right:0;height:100%;-webkit-transform:scale(0.7);transform:scale(0.7);fill:var(--color);outline:var(--color);color:var(--color);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host button{background:transparent;border:0;margin:0;padding:0}:host button:focus svg,:host button:hover svg{fill:var(--focus-color);outline:var(--focus-color);color:var(--focus-color)}";var D=undefined&&undefined.__decorate||function(e,t,i,s){var o=arguments.length,n=o<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,i):s,r;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")n=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)if(r=e[l])n=(o<3?r(n):o>3?r(t,i,n):r(t,i))||n;return o>3&&n&&Object.defineProperty(t,i,n),n};const L=class{constructor(i){e(this,i);this.queryChanged=t(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(s,null,i("input",{type:"text",value:this.query,placeholder:this.placeholder,onInput:e=>this.query=e.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"]}}};D([n(500)],L.prototype,"debouncedHandleQueryChanged",null);L.style=j;const S=":host{--color:#888;--color-sorted:var(--dnn-color-primary, rgb(2,139,255));--color-hover:var(--dnn-color-primary-light, #36a1ff);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)}button.active svg{fill:var(--color-sorted)}button:hover svg,button:focus svg{fill:var(--color-hover)}";const A=class{constructor(i){e(this,i);this.sortChanged=t(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(s,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"}))))}};A.style=S;const V="";const B=class{constructor(t){e(this,t);this.visible=false}async show(){this.visible=true}async hide(){this.visible=false}render(){return i(s,null,this.visible&&i("slot",null))}};B.style=V;const O=":host{display:block;--color-background:var(--dnn-color-secondary-dark, lightgray);--color-text:var(--dnn-color-secondary-contrast, #333);--color-visible:var(--dnn-color-primary, #3792ED);--color-visible-text:var(--dnn-color-primary-contrast, #FFF);--color-focus:var(--dnn-color-primary, #3792ed)}.tabTitles{display:-ms-flexbox;display:flex;background-color:var(--color-background);color:var(--color-text)}.tabTitles button{padding:0.5rem 1rem;border:0;margin:0;background-color:transparent}.tabTitles button.visible{background-color:var(--color-visible);color:var(--color-bisible-text)}.tabTitles button:focus,.tabTitles button:hover{outline:none;-webkit-box-shadow:0 0 2px 2px var(--color-focus);box-shadow:0 0 2px 2px var(--color-focus)}.currentTab{border:1px solid var(--color-background)}";const T=class{constructor(t){e(this,t);this.tabTitles=[];this.selectedTabTitle=""}componentDidLoad(){requestAnimationFrame((()=>{this.updateTitles();this.showFirstTab()}))}getTabs(){return this.component.shadowRoot.querySelector("slot").assignedElements()}updateTitles(){const e=this.getTabs();e.forEach((e=>this.tabTitles=[...this.tabTitles,e.tabTitle]))}showFirstTab(){const e=this.getTabs()[0];e.show();this.selectedTabTitle=e.tabTitle}showTab(e){const t=this.getTabs();t.forEach((t=>{if(t.tabTitle==e){t.show();return}t.hide()}));this.selectedTabTitle=e}render(){return i(s,{ref:e=>this.component=e},i("div",{class:"tabTitles"},this.tabTitles.map((e=>i("button",{class:this.selectedTabTitle==e?"visible":"",onClick:()=>this.showTab(e)},e)))),i("div",{class:"currentTab"},i("slot",null)))}};T.style=O;const R=":host{display:inline-block;outline:none;cursor:pointer}button{height:1.5em;width:2.5em;outline:none;background-color:var(--background, #888);border:0;border-radius:var(--border-radius, var(--dnn-controls-radius, 0.75em));padding:0.1em;position:relative;margin:0;-webkit-transition:background-color 300ms ease-in-out;transition:background-color 300ms ease-in-out;position:relative;cursor:pointer}button:hover,button:focus{-webkit-box-shadow:0 0 2px 2px var(--dnn-color-primary);box-shadow:0 0 2px 2px var(--dnn-color-primary)}button.checked{background-color:var(--background-checked, var(--dnn-color-primary, blue))}button.checked .handle{left:calc(1em + 4px)}button:disabled{opacity:0.5;cursor:not-allowed;-webkit-box-shadow:none;box-shadow:none}button .handle{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;background-color:white;width:1em;height:1em;border-radius:var(--handle-border-radius, var(--dnn-controls-radius, 50%));position:absolute;top:calc(50% - 0.5em);left:2px}";const P=class{constructor(i){e(this,i);this.checkChanged=t(this,"checkChanged",7);this.checked=false;this.disabled=false}checkedChanged(e){this.checkChanged.emit({checked:e})}render(){return i(s,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 o(this)}static get watchers(){return{checked:["checkedChanged"]}}};P.style=R;const $=":host{display:-ms-flexbox;display:flex;overflow:visible}.expander{width:24px;height:24px}.expander button{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;background-color:transparent;border:none;padding:0;margin:0;height:1em;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;position:relative;top:2px}.expander button svg :first-child{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;fill:white;stroke:black}.expander.expanded button{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.expander.expanded button svg :first-child{fill:black;stroke:black}div.item .item-slot{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.25em;min-height:24px}div.item div.children{overflow:hidden;height:0;-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}";const I=class{constructor(i){e(this,i);this.userExpanded=t(this,"userExpanded",3);this.userCollapsed=t(this,"userCollapsed",3);this.expanded=false;this.hasChildren=false}watchExpanded(e){if(e){this.expander.classList.add("expanded");this.collapsible.expanded=true;return}this.expander.classList.remove("expanded");this.collapsible.expanded=false}componentDidLoad(){requestAnimationFrame((()=>{const e=this.childElement.children[0];const t=e.assignedElements().length;if(t>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");this.userExpanded.emit();return}this.expander.classList.remove("expanded");this.userCollapsed.emit()}render(){return i(s,null,i("div",{class:"expander",ref:e=>this.expander=e},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:e=>this.collapsible=e,expanded:this.expanded},i("div",{ref:e=>this.childElement=e},i("slot",{name:"children"})))))}get el(){return o(this)}static get watchers(){return{expanded:["watchExpanded"]}}};I.style=$;const _=":host{--background-color:var(--dnn-color-primary-contrast, white);--foreground-color:var(--dnn-color-primary, #3792ED);display:block}.menu-container{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;background-color:var(--background-color)}.menu-container .menu{margin:0.5em;display:-ms-flexbox;display:flex;gap:1em;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;white-space:nowrap;width:100%}.menu-container .overflow{margin-left:auto;position:relative}.menu-container .overflow button{cursor:pointer;padding:0;margin:0;background-color:transparent;border:none}.menu-container .overflow button svg{fill:var(--foreground-color)}.menu-container .overflow .dropdown{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;white-space:nowrap;right:0;-webkit-transition:100ms ease-in-out;transition:100ms ease-in-out;height:0;overflow:hidden}.menu-container .overflow .dropdown.visible{padding:1em;gap:0.5em;background-color:var(--background-color);-webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.7);box-shadow:2px 2px 4px rgba(0, 0, 0, 0.7)}";const U=class{constructor(t){e(this,t);this.showDropdownButton=false;this.showDropdownMenu=false;this.previousMenuWidth=0}componentDidRender(){requestAnimationFrame((()=>{this.moveItemsToDropDownIfNecessery();this.resizeObserver=new ResizeObserver((e=>{for(let t of e){if(t.contentRect.width<this.previousMenuWidth){this.moveItemsToDropDownIfNecessery()}if(this.previousMenuWidth>0&&t.contentRect.width>this.previousMenuWidth){this.moveItemsToMenuIfPossible()}this.previousMenuWidth=t.contentRect.width}}));this.resizeObserver.observe(this.element)}))}moveItemsToDropDownIfNecessery(){const e=Array.from(this.menu.querySelector("slot").assignedElements());const t=this.menu.getBoundingClientRect().width;let i=parseFloat(getComputedStyle(this.element).fontSize)*2;e.forEach((e=>i+=this.getFullWidth(e)));i+=(e.length-1)*parseFloat(getComputedStyle(this.element).fontSize);if(i>t){this.showDropdownButton=true;var s=e[e.length-1];if(this.dropdown==undefined){return}s.slot="dropdown";this.moveItemsToDropDownIfNecessery()}}moveItemsToMenuIfPossible(){if(this.dropdown==undefined||!this.dropdown.hasChildNodes()){return}const e=Array.from(this.menu.querySelector("slot").assignedElements());const t=this.menu.getBoundingClientRect().width;let i=parseFloat(getComputedStyle(this.element).fontSize)*2;i+=(e.length-1)*parseFloat(getComputedStyle(this.element).fontSize);e.forEach((e=>i+=this.getFullWidth(e)));const s=this.dropdown.querySelector("slot").assignedElements()[0];if(s!=undefined){i+=this.getFullWidth(s)}if(i<t){if(s!=undefined){s.slot=""}if(s==undefined){this.dropdown.classList.remove("visible");this.showDropdownMenu=false;this.showDropdownButton=false}}}getFullWidth(e){var t=e.getBoundingClientRect().width;var i=getComputedStyle(e);t+=parseFloat(i.marginLeft);t+=parseFloat(i.marginRight);t+=parseFloat(i.paddingLeft);t+=parseFloat(i.paddingRight);return t}toggleOverflowMenu(){this.showDropdownMenu=!this.showDropdownMenu;if(this.showDropdownMenu){this.dropdown.classList.add("visible");let e=0;const t=Array.from(this.dropdown.querySelector("slot").assignedElements());t.forEach((t=>e+=t.getBoundingClientRect().height));const i=parseFloat(getComputedStyle(this.dropdown).fontSize);const s=i*(this.dropdown.children.length-1)/2;e+=s;const o=i*2;e+=o;this.dropdown.style.height=`${e}px`;const n=e=>{const t=this.button.getBoundingClientRect();if(e.clientX<t.left||e.clientX>t.right||e.clientY<t.top||e.clientY>t.bottom){this.toggleOverflowMenu()}document.removeEventListener("click",n)};setTimeout((()=>{document.addEventListener("click",n,false)}),100)}else{this.dropdown.classList.remove("visible");this.dropdown.style.height="0px"}}render(){return i(s,null,i("div",{class:"menu-container"},i("div",{class:"menu",ref:e=>this.menu=e},i("slot",null)),this.showDropdownButton&&i("div",{class:"overflow"},i("button",{ref:e=>this.button=e,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:e=>this.dropdown=e},i("slot",{name:"dropdown"})))))}get element(){return o(this)}};U.style=_;const E=":host{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;margin:0 auto;position:relative;--left-pane-background-color:transparent;--right-pane-background-color:transparent}button{border:none;margin:0;padding:0;cursor:ew-resize;position:absolute;height:100%;background-color:transparent}button.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane{overflow-y:auto}.pane.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane.left{background-color:var(--left-pane-background-color)}.pane.right{background-color:var(--right-pane-background-color);-ms-flex-positive:1;flex-grow:1}";const q=class{constructor(i){e(this,i);this.widthChanged=t(this,"widthChanged",7);this.splitterWidth=16;this.splitWidthPercentage=30;this.leftWidth=0;this.rightWidth=0}async setSplitWidthPercentage(e){const t=this.element.shadowRoot.querySelectorAll(".pane");requestAnimationFrame((()=>{t.forEach((e=>e.classList.add("transition")));this.splitter.classList.add("transition");requestAnimationFrame((()=>{const i=this.element.getBoundingClientRect().width;let s=i*e/100;if(s<0){s=0}if(s>i){s=i}this.leftWidth=s;this.rightWidth=i-s;setTimeout((()=>{t.forEach((e=>e.classList.remove("transition")));this.splitter.classList.remove("transition")}),300)}))}))}async getSplitWidthPercentage(){const e=this.element.getBoundingClientRect().width;return this.leftWidth/e}componentDidLoad(){requestAnimationFrame((()=>{this.resizeObserver=new ResizeObserver((()=>{const e=this.element.getBoundingClientRect().width;this.leftWidth=e*this.splitWidthPercentage/100;this.rightWidth=e-this.leftWidth;this.widthChanged.emit(this.splitWidthPercentage)}));this.resizeObserver.observe(this.element)}))}handleMouseDown(e){e.preventDefault();const t=e=>{requestAnimationFrame((()=>{let t=this.element.getBoundingClientRect().width;let{movementX:i}=k(e,this.previousTouch);let s=this.leftWidth+i;if(s<0){s=0}if(s>t){s=t}this.leftWidth=s;this.rightWidth=t-s;this.splitWidthPercentage=this.leftWidth/t*100}))};const i=()=>{document.removeEventListener("mousemove",t);document.removeEventListener("touchmove",t);const e=this.element.getBoundingClientRect().width;const i=this.leftWidth/e*100;this.widthChanged.emit(i)};document.addEventListener("mouseup",i);document.addEventListener("touchend",i);document.addEventListener("mousemove",t);document.addEventListener("touchmove",t)}handleKeyDown(e){let t=0;switch(e.key){case"ArrowLeft":t=-10;break;case"ArrowRight":t=10;break;default:return}if(e.shiftKey){t=t*10}const i=this.element.getBoundingClientRect().width;let s=this.leftWidth+t;if(s<0){s=0}if(s>i){s=i}this.leftWidth=s;this.rightWidth=i-this.leftWidth}render(){return i(s,null,i("div",{class:"left pane",style:{width:`${this.leftWidth}px`}},i("slot",{name:"left"})),i("button",{onMouseDown:e=>this.handleMouseDown(e),onTouchStart:e=>this.handleMouseDown(e),onKeyDown:e=>this.handleKeyDown(e),ref:e=>this.splitter=e,style:{minWidth:`${this.splitterWidth.toString()}px`,left:`${this.leftWidth-2}px`}},i("slot",null)),i("div",{class:"right pane",style:{width:`${this.rightWidth}px`}},i("slot",{name:"right"})))}get element(){return o(this)}};q.style=E;export{l as dnn_button,h as dnn_checkbox,d as dnn_chevron,p as dnn_collapsible,g as dnn_color_picker,x as dnn_dropzone,C as dnn_image_cropper,M as dnn_modal,F as dnn_permissions_grid,L as dnn_searchbox,A as dnn_sort_icon,B as dnn_tab,T as dnn_tabs,P as dnn_toggle,I as dnn_treeview_item,U as dnn_vertical_overflow_menu,q as dnn_vertical_splitview};
+//# sourceMappingURL=p-6cc227ab.entry.js.map