npm - @dnncommunity/dnn-elements - Versions diffs - 0.15.0-beta.21 → 0.15.0-beta.22 - Mend

@dnncommunity/dnn-elements 0.15.0-beta.21 → 0.15.0-beta.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/collection/components/dnn-tabs/dnn-tabs.css CHANGED Viewed

@@ -36,5 +36,4 @@
 .currentTab {
   border: 1px solid var(--color-background);
-  padding: 1rem;
 }

package/dist/collection/components/dnn-tabs/dnn-tabs.stories.js CHANGED Viewed

@@ -28,6 +28,11 @@ export default {
 };
 const Template = (args, context) => {
   return html `
+<style type="text/css">
+    dnn-tab p{
+        margin: 1em;
+    }
+</style>
 <dnn-tabs style=${ifDefined(injectStyles(args, context))}>
     <dnn-tab tab-title="Lorem Ipsum">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit nisl vel aliquam cursus. Fusce tincidunt vitae mi a malesuada. Praesent eros mi, semper ut orci quis, faucibus viverra felis. Cras non lacus vehicula, fermentum felis id, dictum diam. Proin congue urna est, ac viverra ligula sagittis eu. Proin diam libero, vulputate egestas dui at, molestie dictum dolor. Fusce varius ex vitae massa pulvinar, ut hendrerit enim molestie. Aliquam volutpat facilisis ipsum, nec mollis elit dapibus eu. Donec scelerisque interdum tristique. Aliquam accumsan sem urna, vel posuere dui faucibus et. Mauris quis rutrum massa.</p>

package/dist/collection/components/dnn-tabs/dnn-tabs.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dnn-tabs.stories.js","sourceRoot":"","sources":["../../../src/components/dnn-tabs/dnn-tabs.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,eAAe;EACX,KAAK,EAAE,eAAe;EACtB,SAAS,EAAE,UAAU;EACrB,UAAU,EAAE;IACR,KAAK,EAAG,MAAM;GACjB;EACD,QAAQ,EAAE;IACN,oBAAoB,EAAE;MAClB,OAAO,EAAE,OAAO;KACnB;IACD,eAAe,EAAE;MACb,OAAO,EAAE,OAAO;KACnB;IACD,cAAc,EAAE;MACZ,OAAO,EAAE,OAAO;KACnB;IACD,iBAAiB,EAAE;MACf,OAAO,EAAE,OAAO;KACnB;IACD,sBAAsB,EAAE;MACpB,OAAO,EAAE,OAAO;KACnB;GACJ;CACI,CAAC;AAEV,MAAM,QAAQ,GAAG,CAAC,IAAQ,EAAE,OAAO,EAAE,EAAE;EAEnC,OAAO,IAAI,CAAA~~;kBACG~~,SAAS,CAAC,YAAY,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;;;;;;;;;;;;;;KAcnD,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { html } from \"lit-html\";\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { Meta } from \"@storybook/web-components\";\nimport readme from './readme.md';\nimport { injectStyles } from \"../../../.storybook/utilities\";\n\nexport default {\n title: 'Elements/Tabs',\n component: 'dnn-tabs',\n parameters: {\n notes: readme,\n },\n argTypes: {\n '--color-background': {\n control: 'color'\n },\n '--color-focus': {\n control: 'color'\n },\n '--color-text': {\n control: 'color'\n },\n '--color-visible': {\n control: 'color'\n },\n '--color-visible-text': {\n control: 'color'\n },\n }\n} as Meta;\n\nconst Template = (args: {}, context) => {\n \n return html`\n<dnn-tabs style=${ifDefined(injectStyles(args, context))}>\n <dnn-tab tab-title=\"Lorem Ipsum\">\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit nisl vel aliquam cursus. Fusce tincidunt vitae mi a malesuada. Praesent eros mi, semper ut orci quis, faucibus viverra felis. Cras non lacus vehicula, fermentum felis id, dictum diam. Proin congue urna est, ac viverra ligula sagittis eu. Proin diam libero, vulputate egestas dui at, molestie dictum dolor. Fusce varius ex vitae massa pulvinar, ut hendrerit enim molestie. Aliquam volutpat facilisis ipsum, nec mollis elit dapibus eu. Donec scelerisque interdum tristique. Aliquam accumsan sem urna, vel posuere dui faucibus et. Mauris quis rutrum massa.</p>\n <p>Curabitur nisl tortor, egestas a lacus eu, consectetur ornare erat. Praesent auctor ante gravida rutrum dictum. Praesent congue in enim sed ornare. In at ultrices mauris. Donec vulputate ante vel lectus ullamcorper varius. Nullam ac dui velit. Quisque porttitor, eros id interdum posuere, turpis nisi convallis ex, quis venenatis massa eros sit amet ex. Donec sem quam, consectetur at consectetur quis, suscipit sit amet ligula. Morbi nec lectus iaculis, dapibus lorem eget, molestie dui. Sed porttitor lacus ut hendrerit vulputate. Cras efficitur nec ligula ut lobortis. Cras aliquam, magna ac condimentum ullamcorper, sapien dolor varius sapien, sed volutpat lorem felis et nulla.</p>\n </dnn-tab>\n <dnn-tab tab-title=\"Bacon Ipsum\">\n <p>Bacon ipsum dolor amet kielbasa kevin prosciutto andouille doner burgdoggen ham. Flank pork belly ham landjaeger venison, cow chicken andouille. Frankfurter pork swine alcatra meatloaf drumstick capicola. Sausage landjaeger strip steak swine ribeye kielbasa. Kevin tongue andouille drumstick landjaeger shank porchetta pork beef sirloin fatback. Prosciutto tri-tip burgdoggen, chislic ham flank bresaola shank tenderloin. Capicola pancetta sirloin hamburger cupim, shankle ground round kevin flank landjaeger meatball chuck beef short ribs ball tip.</p>\n <p>Turducken leberkas doner, hamburger venison meatloaf sausage cow pork chop pork strip steak short ribs salami alcatra beef. Pastrami tenderloin sausage turkey hamburger pork sirloin pork belly burgdoggen spare ribs bacon jowl. Tail spare ribs filet mignon kevin, swine flank drumstick jerky pork loin beef ribs pork belly fatback ground round. Short ribs tail jowl jerky kevin, cow burgdoggen pancetta. Corned beef tri-tip pastrami pork chop bresaola chuck.</p>\n </dnn-tab>\n <dnn-tab tab-title=\"CupCake Ipsum\">\n <p>Candy cookie pie caramels soufflé danish. Wafer cake gummies soufflé biscuit dragée cheesecake cheesecake. Cookie tart fruitcake oat cake bear claw macaroon jelly beans. Sesame snaps sugar plum sugar plum halvah shortbread chocolate bar pastry. Wafer caramels cake marzipan oat cake apple pie cake halvah cake. Lollipop muffin gummies jujubes lollipop topping bonbon pastry.</p>\n <p>Gingerbread sesame snaps toffee cake cheesecake gummies cake. Danish cake sweet sweet roll oat cake gummi bears shortbread bear claw. Croissant gummi bears cake danish tart gingerbread tootsie roll carrot cake jelly beans. Liquorice biscuit pastry cake carrot cake marzipan. Brownie gummies halvah chocolate cake donut. Gummi bears cotton candy jujubes macaroon gingerbread.</p>\n </dnn-tab>\n</dnn-tabs>\n `;\n}\n\nexport const Tabs = Template.bind({});\n"]}
1	+ {"version":3,"file":"dnn-tabs.stories.js","sourceRoot":"","sources":["../../../src/components/dnn-tabs/dnn-tabs.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,eAAe;EACX,KAAK,EAAE,eAAe;EACtB,SAAS,EAAE,UAAU;EACrB,UAAU,EAAE;IACR,KAAK,EAAG,MAAM;GACjB;EACD,QAAQ,EAAE;IACN,oBAAoB,EAAE;MAClB,OAAO,EAAE,OAAO;KACnB;IACD,eAAe,EAAE;MACb,OAAO,EAAE,OAAO;KACnB;IACD,cAAc,EAAE;MACZ,OAAO,EAAE,OAAO;KACnB;IACD,iBAAiB,EAAE;MACf,OAAO,EAAE,OAAO;KACnB;IACD,sBAAsB,EAAE;MACpB,OAAO,EAAE,OAAO;KACnB;GACJ;CACI,CAAC;AAEV,MAAM,QAAQ,GAAG,CAAC,IAAQ,EAAE,OAAO,EAAE,EAAE;EAEnC,OAAO,IAAI,CAAA;;;;;;kBAMG,SAAS,CAAC,YAAY,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;;;;;;;;;;;;;;KAcnD,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { html } from \"lit-html\";\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { Meta } from \"@storybook/web-components\";\nimport readme from './readme.md';\nimport { injectStyles } from \"../../../.storybook/utilities\";\n\nexport default {\n title: 'Elements/Tabs',\n component: 'dnn-tabs',\n parameters: {\n notes: readme,\n },\n argTypes: {\n '--color-background': {\n control: 'color'\n },\n '--color-focus': {\n control: 'color'\n },\n '--color-text': {\n control: 'color'\n },\n '--color-visible': {\n control: 'color'\n },\n '--color-visible-text': {\n control: 'color'\n },\n }\n} as Meta;\n\nconst Template = (args: {}, context) => {\n \n return html`\n<style type=\"text/css\">\n dnn-tab p{\n margin: 1em;\n }\n</style>\n<dnn-tabs style=${ifDefined(injectStyles(args, context))}>\n <dnn-tab tab-title=\"Lorem Ipsum\">\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit nisl vel aliquam cursus. Fusce tincidunt vitae mi a malesuada. Praesent eros mi, semper ut orci quis, faucibus viverra felis. Cras non lacus vehicula, fermentum felis id, dictum diam. Proin congue urna est, ac viverra ligula sagittis eu. Proin diam libero, vulputate egestas dui at, molestie dictum dolor. Fusce varius ex vitae massa pulvinar, ut hendrerit enim molestie. Aliquam volutpat facilisis ipsum, nec mollis elit dapibus eu. Donec scelerisque interdum tristique. Aliquam accumsan sem urna, vel posuere dui faucibus et. Mauris quis rutrum massa.</p>\n <p>Curabitur nisl tortor, egestas a lacus eu, consectetur ornare erat. Praesent auctor ante gravida rutrum dictum. Praesent congue in enim sed ornare. In at ultrices mauris. Donec vulputate ante vel lectus ullamcorper varius. Nullam ac dui velit. Quisque porttitor, eros id interdum posuere, turpis nisi convallis ex, quis venenatis massa eros sit amet ex. Donec sem quam, consectetur at consectetur quis, suscipit sit amet ligula. Morbi nec lectus iaculis, dapibus lorem eget, molestie dui. Sed porttitor lacus ut hendrerit vulputate. Cras efficitur nec ligula ut lobortis. Cras aliquam, magna ac condimentum ullamcorper, sapien dolor varius sapien, sed volutpat lorem felis et nulla.</p>\n </dnn-tab>\n <dnn-tab tab-title=\"Bacon Ipsum\">\n <p>Bacon ipsum dolor amet kielbasa kevin prosciutto andouille doner burgdoggen ham. Flank pork belly ham landjaeger venison, cow chicken andouille. Frankfurter pork swine alcatra meatloaf drumstick capicola. Sausage landjaeger strip steak swine ribeye kielbasa. Kevin tongue andouille drumstick landjaeger shank porchetta pork beef sirloin fatback. Prosciutto tri-tip burgdoggen, chislic ham flank bresaola shank tenderloin. Capicola pancetta sirloin hamburger cupim, shankle ground round kevin flank landjaeger meatball chuck beef short ribs ball tip.</p>\n <p>Turducken leberkas doner, hamburger venison meatloaf sausage cow pork chop pork strip steak short ribs salami alcatra beef. Pastrami tenderloin sausage turkey hamburger pork sirloin pork belly burgdoggen spare ribs bacon jowl. Tail spare ribs filet mignon kevin, swine flank drumstick jerky pork loin beef ribs pork belly fatback ground round. Short ribs tail jowl jerky kevin, cow burgdoggen pancetta. Corned beef tri-tip pastrami pork chop bresaola chuck.</p>\n </dnn-tab>\n <dnn-tab tab-title=\"CupCake Ipsum\">\n <p>Candy cookie pie caramels soufflé danish. Wafer cake gummies soufflé biscuit dragée cheesecake cheesecake. Cookie tart fruitcake oat cake bear claw macaroon jelly beans. Sesame snaps sugar plum sugar plum halvah shortbread chocolate bar pastry. Wafer caramels cake marzipan oat cake apple pie cake halvah cake. Lollipop muffin gummies jujubes lollipop topping bonbon pastry.</p>\n <p>Gingerbread sesame snaps toffee cake cheesecake gummies cake. Danish cake sweet sweet roll oat cake gummi bears shortbread bear claw. Croissant gummi bears cake danish tart gingerbread tootsie roll carrot cake jelly beans. Liquorice biscuit pastry cake carrot cake marzipan. Brownie gummies halvah chocolate cake donut. Gummi bears cotton candy jujubes macaroon gingerbread.</p>\n </dnn-tab>\n</dnn-tabs>\n `;\n}\n\nexport const Tabs = Template.bind({});\n"]}

package/dist/dnn/dnn.esm.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,b as t}from"./p-7ffdbed1.js";const n=()=>{const t=import.meta.url;const n={};if(t!==""){n.resourcesUrl=new URL(".",t).href}return e(n)};n().then((e=>t([["p-c222c8b7",[[1,"dnn-permissions-grid",{permissions:[1040],roleGroups:[16],roles:[16],resx:[16],foundUsers:[16],selectedRoleGroupId:[32],userQuery:[32],pickedUser:[32]}],[1,"dnn-image-cropper",{width:[2],height:[2],resx:[16],quality:[2],preventUndersized:[4,"prevent-undersized"],view:[32]}],[1,"dnn-treeview-item",{expanded:[1540],hasChildren:[32]}],[1,"dnn-chevron",{expandText:[1,"expand-text"],collapseText:[1,"collapse-text"],expanded:[1540]}],[1,"dnn-color-picker",{color:[1],colorBoxHeight:[1,"color-box-height"],currentColor:[32],rgbDisplay:[32],hslDisplay:[32],hexDisplay:[32]}],[1,"dnn-sort-icon",{sortDirection:[1,"sort-direction"]}],[1,"dnn-tab",{tabTitle:[1,"tab-title"],visible:[32],show:[64],hide:[64]}],[1,"dnn-tabs",{tabTitles:[32],selectedTabTitle:[32]}],[1,"dnn-toggle",{checked:[1028],disabled:[4]}],[1,"dnn-vertical-overflow-menu",{showDropdownButton:[32],showDropdownMenu:[32]}],[1,"dnn-vertical-splitview",{splitterWidth:[2,"splitter-width"],splitWidthPercentage:[1026,"split-width-percentage"],leftWidth:[32],rightWidth:[32],setSplitWidthPercentage:[64],getSplitWidthPercentage:[64]}],[1,"dnn-checkbox",{checked:[1025],useIntermediate:[4,"use-intermediate"],value:[1]}],[1,"dnn-dropzone",{resx:[16],allowedExtensions:[16],allowCameraMode:[4,"allow-camera-mode"],captureQuality:[2,"capture-quality"],canTakeSnapshots:[32],takingPicture:[32]}],[1,"dnn-searchbox",{placeholder:[1],debounced:[4],query:[1025]}],[1,"dnn-button",{type:[1],reversed:[4],size:[1],confirm:[4],confirmYesText:[1,"confirm-yes-text"],confirmNoText:[1,"confirm-no-text"],confirmMessage:[1,"confirm-message"],disabled:[4],modalVisible:[32]}],[1,"dnn-collapsible",{expanded:[516],transitionDuration:[2,"transition-duration"],updateSize:[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]]],[1,"dnn-modal",{backdropDismiss:[4,"backdrop-dismiss"],closeText:[1,"close-text"],showCloseButton:[4,"show-close-button"],visible:[1540],show:[64],hide:[64]}]]]],e)));
+import{p as e,b as t}from"./p-7ffdbed1.js";const n=()=>{const t=import.meta.url;const n={};if(t!==""){n.resourcesUrl=new URL(".",t).href}return e(n)};n().then((e=>t([["p-058a3145",[[1,"dnn-permissions-grid",{permissions:[1040],roleGroups:[16],roles:[16],resx:[16],foundUsers:[16],selectedRoleGroupId:[32],userQuery:[32],pickedUser:[32]}],[1,"dnn-image-cropper",{width:[2],height:[2],resx:[16],quality:[2],preventUndersized:[4,"prevent-undersized"],view:[32]}],[1,"dnn-treeview-item",{expanded:[1540],hasChildren:[32]}],[1,"dnn-chevron",{expandText:[1,"expand-text"],collapseText:[1,"collapse-text"],expanded:[1540]}],[1,"dnn-color-picker",{color:[1],colorBoxHeight:[1,"color-box-height"],currentColor:[32],rgbDisplay:[32],hslDisplay:[32],hexDisplay:[32]}],[1,"dnn-sort-icon",{sortDirection:[1,"sort-direction"]}],[1,"dnn-tab",{tabTitle:[1,"tab-title"],visible:[32],show:[64],hide:[64]}],[1,"dnn-tabs",{tabTitles:[32],selectedTabTitle:[32]}],[1,"dnn-toggle",{checked:[1028],disabled:[4]}],[1,"dnn-vertical-overflow-menu",{showDropdownButton:[32],showDropdownMenu:[32]}],[1,"dnn-vertical-splitview",{splitterWidth:[2,"splitter-width"],splitWidthPercentage:[1026,"split-width-percentage"],leftWidth:[32],rightWidth:[32],setSplitWidthPercentage:[64],getSplitWidthPercentage:[64]}],[1,"dnn-checkbox",{checked:[1025],useIntermediate:[4,"use-intermediate"],value:[1]}],[1,"dnn-dropzone",{resx:[16],allowedExtensions:[16],allowCameraMode:[4,"allow-camera-mode"],captureQuality:[2,"capture-quality"],canTakeSnapshots:[32],takingPicture:[32]}],[1,"dnn-searchbox",{placeholder:[1],debounced:[4],query:[1025]}],[1,"dnn-button",{type:[1],reversed:[4],size:[1],confirm:[4],confirmYesText:[1,"confirm-yes-text"],confirmNoText:[1,"confirm-no-text"],confirmMessage:[1,"confirm-message"],disabled:[4],modalVisible:[32]}],[1,"dnn-collapsible",{expanded:[516],transitionDuration:[2,"transition-duration"],updateSize:[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]]],[1,"dnn-modal",{backdropDismiss:[4,"backdrop-dismiss"],closeText:[1,"close-text"],showCloseButton:[4,"show-close-button"],visible:[1540],show:[64],hide:[64]}]]]],e)));
 //# sourceMappingURL=dnn.esm.js.map

package/dist/dnn/{p-c222c8b7.entry.js → p-058a3145.entry.js} RENAMED Viewed

@@ -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:1;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;visibility:hidden;opacity:0}:host .overlay .modal{max-width:var(--max-width, 1200px);background-color:white;padding:30px;-webkit-transform:scale(2);transform:scale(2);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;z-index:2;position:relative;margin:10%;max-height:80%;border-radius:var(--dnn-controls-radius, 5px);-webkit-box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);display:block}:host .overlay .modal .close{position:absolute;background-color:white;border:2px solid white;border-radius:50%;padding:0;margin:0;top:-12px;right:-12px;outline:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host .overlay .modal .close:focus,:host .overlay .modal .close:hover{-webkit-box-shadow:0 0 2px 2px var(--dnn-color-primary, blue);box-shadow:0 0 2px 2px var(--dnn-color-primary, blue)}:host .overlay .modal .close svg{width:24px;height:24px;color:grey}:host .overlay.visible{visibility:visible;opacity:1}:host .overlay.visible .modal{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);display:block}";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);padding:1rem}";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-c222c8b7.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:1;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;visibility:hidden;opacity:0}:host .overlay .modal{max-width:var(--max-width, 1200px);background-color:white;padding:30px;-webkit-transform:scale(2);transform:scale(2);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;z-index:2;position:relative;margin:10%;max-height:80%;border-radius:var(--dnn-controls-radius, 5px);-webkit-box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);display:block}:host .overlay .modal .close{position:absolute;background-color:white;border:2px solid white;border-radius:50%;padding:0;margin:0;top:-12px;right:-12px;outline:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host .overlay .modal .close:focus,:host .overlay .modal .close:hover{-webkit-box-shadow:0 0 2px 2px var(--dnn-color-primary, blue);box-shadow:0 0 2px 2px var(--dnn-color-primary, blue)}:host .overlay .modal .close svg{width:24px;height:24px;color:grey}:host .overlay.visible{visibility:visible;opacity:1}:host .overlay.visible .modal{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);display:block}";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-058a3145.entry.js.map