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

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 (127) hide show
  1. package/dist/cjs/dnn-button.cjs.entry.js +1 -1
  2. package/dist/cjs/dnn-button_16.cjs.entry.js +22 -72
  3. package/dist/cjs/dnn-button_16.cjs.entry.js.map +1 -1
  4. package/dist/cjs/dnn-checkbox.cjs.entry.js +1 -1
  5. package/dist/cjs/dnn-chevron.cjs.entry.js +1 -1
  6. package/dist/cjs/dnn-collapsible.cjs.entry.js +22 -73
  7. package/dist/cjs/dnn-collapsible.cjs.entry.js.map +1 -1
  8. package/dist/cjs/dnn-color-picker.cjs.entry.js +1 -1
  9. package/dist/cjs/dnn-dropzone.cjs.entry.js +1 -1
  10. package/dist/cjs/dnn-image-cropper.cjs.entry.js +1 -1
  11. package/dist/cjs/dnn-modal.cjs.entry.js +1 -1
  12. package/dist/cjs/dnn-searchbox.cjs.entry.js +1 -1
  13. package/dist/cjs/dnn-sort-icon.cjs.entry.js +1 -1
  14. package/dist/cjs/dnn-tab.cjs.entry.js +1 -1
  15. package/dist/cjs/dnn-tabs.cjs.entry.js +1 -1
  16. package/dist/cjs/dnn-toggle.cjs.entry.js +1 -1
  17. package/dist/cjs/dnn-treeview-item.cjs.entry.js +1 -1
  18. package/dist/cjs/dnn-vertical-overflow-menu.cjs.entry.js +1 -1
  19. package/dist/cjs/dnn-vertical-splitview.cjs.entry.js +1 -1
  20. package/dist/cjs/dnn.cjs.js +2 -2
  21. package/dist/cjs/{index-6a6ac523.js → index-7505bd72.js} +1 -5
  22. package/dist/cjs/index-7505bd72.js.map +1 -0
  23. package/dist/cjs/{index-ba8b86b1.js → index-aff4d89a.js} +2 -2
  24. package/dist/cjs/index-aff4d89a.js.map +1 -0
  25. package/dist/cjs/loader.cjs.js +2 -2
  26. package/dist/collection/components/dnn-collapsible/dnn-collapsible.css +4 -3
  27. package/dist/collection/components/dnn-collapsible/dnn-collapsible.js +22 -72
  28. package/dist/collection/components/dnn-collapsible/dnn-collapsible.js.map +1 -1
  29. package/dist/dnn/dnn-button.entry.js +1 -1
  30. package/dist/dnn/dnn-button.system.entry.js +1 -1
  31. package/dist/dnn/dnn-checkbox.entry.js +1 -1
  32. package/dist/dnn/dnn-checkbox.system.entry.js +1 -1
  33. package/dist/dnn/dnn-chevron.entry.js +1 -1
  34. package/dist/dnn/dnn-chevron.system.entry.js +1 -1
  35. package/dist/dnn/dnn-collapsible.entry.js +22 -73
  36. package/dist/dnn/dnn-collapsible.entry.js.map +1 -1
  37. package/dist/dnn/dnn-collapsible.system.entry.js +1 -1
  38. package/dist/dnn/dnn-collapsible.system.entry.js.map +1 -1
  39. package/dist/dnn/dnn-color-picker.entry.js +1 -1
  40. package/dist/dnn/dnn-color-picker.system.entry.js +1 -1
  41. package/dist/dnn/dnn-dropzone.entry.js +1 -1
  42. package/dist/dnn/dnn-dropzone.system.entry.js +1 -1
  43. package/dist/dnn/dnn-image-cropper.entry.js +1 -1
  44. package/dist/dnn/dnn-image-cropper.system.entry.js +1 -1
  45. package/dist/dnn/dnn-modal.entry.js +1 -1
  46. package/dist/dnn/dnn-modal.system.entry.js +1 -1
  47. package/dist/dnn/dnn-searchbox.entry.js +1 -1
  48. package/dist/dnn/dnn-searchbox.system.entry.js +1 -1
  49. package/dist/dnn/dnn-sort-icon.entry.js +1 -1
  50. package/dist/dnn/dnn-sort-icon.system.entry.js +1 -1
  51. package/dist/dnn/dnn-tab.entry.js +1 -1
  52. package/dist/dnn/dnn-tab.system.entry.js +1 -1
  53. package/dist/dnn/dnn-tabs.entry.js +1 -1
  54. package/dist/dnn/dnn-tabs.system.entry.js +1 -1
  55. package/dist/dnn/dnn-toggle.entry.js +1 -1
  56. package/dist/dnn/dnn-toggle.system.entry.js +1 -1
  57. package/dist/dnn/dnn-treeview-item.entry.js +1 -1
  58. package/dist/dnn/dnn-treeview-item.system.entry.js +1 -1
  59. package/dist/dnn/dnn-vertical-overflow-menu.entry.js +1 -1
  60. package/dist/dnn/dnn-vertical-overflow-menu.system.entry.js +1 -1
  61. package/dist/dnn/dnn-vertical-splitview.entry.js +1 -1
  62. package/dist/dnn/dnn-vertical-splitview.system.entry.js +1 -1
  63. package/dist/dnn/dnn.esm.js +2 -2
  64. package/dist/dnn/dnn.system.js +1 -1
  65. package/dist/dnn/dnn.system.js.map +1 -1
  66. package/dist/dnn/index-a3a55419.system.js +2 -0
  67. package/dist/dnn/index-a3a55419.system.js.map +1 -0
  68. package/dist/dnn/{index-3e56049b.js → index-b5a28c1d.js} +2 -2
  69. package/dist/dnn/index-b5a28c1d.js.map +1 -0
  70. package/dist/dnn/{p-142c6f85.system.js → p-058ba146.system.js} +2 -2
  71. package/dist/dnn/p-058ba146.system.js.map +1 -0
  72. package/dist/dnn/{p-cc4da8d5.entry.js → p-21d6ceae.entry.js} +4 -4
  73. package/dist/dnn/p-21d6ceae.entry.js.map +1 -0
  74. package/dist/dnn/{p-d10994a3.js → p-45ce2139.js} +2 -2
  75. package/dist/dnn/p-45ce2139.js.map +1 -0
  76. package/dist/dnn/{p-a06717f8.system.entry.js → p-48e6d5e6.system.entry.js} +4 -4
  77. package/dist/dnn/p-48e6d5e6.system.entry.js.map +1 -0
  78. package/dist/dnn/{p-3fbd1ad6.system.js → p-f91193e2.system.js} +2 -2
  79. package/dist/dnn/p-f91193e2.system.js.map +1 -0
  80. package/dist/esm/dnn-button.entry.js +1 -1
  81. package/dist/esm/dnn-button_16.entry.js +22 -72
  82. package/dist/esm/dnn-button_16.entry.js.map +1 -1
  83. package/dist/esm/dnn-checkbox.entry.js +1 -1
  84. package/dist/esm/dnn-chevron.entry.js +1 -1
  85. package/dist/esm/dnn-collapsible.entry.js +22 -73
  86. package/dist/esm/dnn-collapsible.entry.js.map +1 -1
  87. package/dist/esm/dnn-color-picker.entry.js +1 -1
  88. package/dist/esm/dnn-dropzone.entry.js +1 -1
  89. package/dist/esm/dnn-image-cropper.entry.js +1 -1
  90. package/dist/esm/dnn-modal.entry.js +1 -1
  91. package/dist/esm/dnn-searchbox.entry.js +1 -1
  92. package/dist/esm/dnn-sort-icon.entry.js +1 -1
  93. package/dist/esm/dnn-tab.entry.js +1 -1
  94. package/dist/esm/dnn-tabs.entry.js +1 -1
  95. package/dist/esm/dnn-toggle.entry.js +1 -1
  96. package/dist/esm/dnn-treeview-item.entry.js +1 -1
  97. package/dist/esm/dnn-vertical-overflow-menu.entry.js +1 -1
  98. package/dist/esm/dnn-vertical-splitview.entry.js +1 -1
  99. package/dist/esm/dnn.js +2 -2
  100. package/dist/esm/{index-3e56049b.js → index-b5a28c1d.js} +2 -2
  101. package/dist/esm/index-b5a28c1d.js.map +1 -0
  102. package/dist/esm/{index-212d30ec.js → index-cdbad319.js} +1 -5
  103. package/dist/esm/index-cdbad319.js.map +1 -0
  104. package/dist/esm/loader.js +2 -2
  105. package/dist/esm-es5/dnn-button_16.entry.js +1 -1
  106. package/dist/esm-es5/dnn-button_16.entry.js.map +1 -1
  107. package/dist/esm-es5/dnn.js +1 -1
  108. package/dist/esm-es5/dnn.js.map +1 -1
  109. package/dist/esm-es5/{index-212d30ec.js → index-cdbad319.js} +2 -2
  110. package/dist/esm-es5/index-cdbad319.js.map +1 -0
  111. package/dist/esm-es5/loader.js +1 -1
  112. package/dist/esm-es5/loader.js.map +1 -1
  113. package/dist/types/components/dnn-collapsible/dnn-collapsible.d.ts +7 -11
  114. package/package.json +1 -1
  115. package/dist/cjs/index-6a6ac523.js.map +0 -1
  116. package/dist/cjs/index-ba8b86b1.js.map +0 -1
  117. package/dist/dnn/index-3e56049b.js.map +0 -1
  118. package/dist/dnn/index-5c2c8f16.system.js +0 -2
  119. package/dist/dnn/index-5c2c8f16.system.js.map +0 -1
  120. package/dist/dnn/p-142c6f85.system.js.map +0 -1
  121. package/dist/dnn/p-3fbd1ad6.system.js.map +0 -1
  122. package/dist/dnn/p-a06717f8.system.entry.js.map +0 -1
  123. package/dist/dnn/p-cc4da8d5.entry.js.map +0 -1
  124. package/dist/dnn/p-d10994a3.js.map +0 -1
  125. package/dist/esm/index-212d30ec.js.map +0 -1
  126. package/dist/esm/index-3e56049b.js.map +0 -1
  127. package/dist/esm-es5/index-212d30ec.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"sources":["src/components/dnn-button/dnn-button.scss?tag=dnn-button&encapsulation=shadow","src/components/dnn-button/dnn-button.tsx","src/components/dnn-checkbox/dnn-checkbox.scss?tag=dnn-checkbox&encapsulation=shadow","src/components/dnn-checkbox/dnn-checkbox.tsx","src/components/dnn-chevron/dnn-chevron.scss?tag=dnn-chevron&encapsulation=shadow","src/components/dnn-chevron/dnn-chevron.tsx","src/components/dnn-collapsible/dnn-collapsible.scss?tag=dnn-collapsible&encapsulation=shadow","src/components/dnn-collapsible/dnn-collapsible.tsx","src/utilities/colorInfo.ts","src/components/dnn-color-picker/dnn-color-picker.scss?tag=dnn-color-picker&encapsulation=shadow","src/components/dnn-color-picker/dnn-color-picker.tsx","src/components/dnn-dropzone/dnn-dropzone.scss?tag=dnn-dropzone&encapsulation=shadow","src/components/dnn-dropzone/dnn-dropzone.tsx","src/components/dnn-image-cropper/CornerType.ts","src/utilities/mouseUtilities.ts","src/components/dnn-image-cropper/dnn-image-cropper.scss?tag=dnn-image-cropper&encapsulation=shadow","src/components/dnn-image-cropper/dnn-image-cropper.tsx","src/components/dnn-modal/dnn-modal.scss?tag=dnn-modal&encapsulation=shadow","src/components/dnn-modal/dnn-modal.tsx","src/components/dnn-searchbox/dnn-searchbox.scss?tag=dnn-searchbox&encapsulation=shadow","src/components/dnn-searchbox/dnn-searchbox.tsx","src/components/dnn-sort-icon/dnn-sort-icon.scss?tag=dnn-sort-icon&encapsulation=shadow","src/components/dnn-sort-icon/dnn-sort-icon.tsx","src/components/dnn-tab/dnn-tab.scss?tag=dnn-tab&encapsulation=shadow","src/components/dnn-tab/dnn-tab.tsx","src/components/dnn-tabs/dnn-tabs.scss?tag=dnn-tabs&encapsulation=shadow","src/components/dnn-tabs/dnn-tabs.tsx","src/components/dnn-toggle/dnn-toggle.scss?tag=dnn-toggle&encapsulation=shadow","src/components/dnn-toggle/dnn-toggle.tsx","src/components/dnn-treeview-item/dnn-treeview-item.scss?tag=dnn-treeview-item&encapsulation=shadow","src/components/dnn-treeview-item/dnn-treeview-item.tsx","src/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.scss?tag=dnn-vertical-overflow-menu&encapsulation=shadow","src/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.tsx","src/components/dnn-vertical-splitview/dnn-vertical-splitview.scss?tag=dnn-vertical-splitview&encapsulation=shadow","src/components/dnn-vertical-splitview/dnn-vertical-splitview.tsx"],"names":["dnnButtonCss","DnnButton","hostRef","this","type","reversed","size","confirm","confirmYesText","confirmNoText","confirmMessage","disabled","modalVisible","prototype","componentDidLoad","el","classList","add","modal","shadowRoot","querySelector","handleConfirm","hide","confirmed","emit","handleCancel","canceled","handleClick","show","render","_this","h","Host","style","pointer-events","class","onClick","showCloseButton","backdropDismiss","display","justifyContent","margin","dnnCheckboxCss","DnnCheckbox","checked","useIntermediate","changeState","emitEvents","button","remove","undefined","checkedchange","ref","xmlns","height","viewBox","width","fill","d","enable-background","htmlFor","id","dnnChevronCss","DnnChevron","expandText","collapseText","expanded","handleExpandedChanged","newValue","changed","aria-label","dnnCollapsibleCss","DnnCollapsible","class_1","transitionDuration","animating","requestAnimationFrame","container","scrollHeight","dnnCollapsibleHeightChanged","updateSize","updateComponentSize","newHeight","assignedElements","forEach","node","handleOtherCollapsibleHeightChanged","setTimeout","handleMutation","mutationList","mutation","target","closest","componentWillLoad","mutationObserver","MutationObserver","childNodes","element","observe","attributes","characterData","childList","subtree","slot","addEventListener","disconnectedCallback","disconnect","Debounce","ColorInfo","_hue","_saturation","_lightness","Object","defineProperty","value","getRGB","red","setHSL","green","blue","r","getHex","g","b","parseInt","substr","brightness","chroma","Math","abs","saturation","quadrant","offset","bias","round","min","max","diff","s","l","hex","toString","length","dnnColorPickerCss","DnnColorPicker","color","colorBoxHeight","rgbDisplay","hslDisplay","hexDisplay","handleSaturationLightnessMouseDown","e","preventDefault","handleDragLightnessSaturation","window","handleSaturationLightnessMouseUp","rect","saturationLightnessBox","getBoundingClientRect","x","clientX","left","y","clientY","top","newColor","hue","currentColor","lightness","removeEventListener","handleHueMouseDown","handleDragHue","handleHueMouseUp","hueRange","handleComponentValueChange","channel","isNaN","handleHSLChange","component","h_1","handleSaturationLightnessKeyDown","shiftKey","key","handleHueKeyDown","colorChangedHandler","colorChanged","handeCurrentColorChanged","handleHexChange","setProperty","getDoublet","getContrast","contrastColor","valueString","toUpperCase","match","switchColorMode","backgroundColor","onMouseDown","bind","role","aria-valuemin","aria-valuemax","aria-valuetext","bottom","onKeyDown","boxShadow","aria-valuenow","step","onChange","__decorate","dnnDropzoneCss","DnnDropzone","resx","dragAndDropFile","capture","or","takePicture","uploadFile","allowCameraMode","captureQuality","canTakeSnapshots","takingPicture","handleDragOver","event","stopPropagation","dataTransfer","dropEffect","dropzone","handleDrop","dropEvent","files","hasInvalidExtensions","fileList","getFilesFromFileList","filesSelected","checkIfBrowserCanTakeSnapshots","then","result","allowedExtensions","extensionsWithDots","map","extensionsList","join","fileInput","accept","Promise","resolve","mediaDevices","navigator","enumerateDevices","devices","some","device","kind","index","file","push","handleUploadButton","hasInvalid","fileIndex","regex","fileExtension","exec","name","includes","takeSnapshot","getUserMedia","video","audio","stream","videoPreview","srcObject","play","videoSettings","getVideoTracks","getSettings","catch","error","alert","applySnapshot","canvas","document","createElement","context","getContext","drawImage","toBlob","blob","File","onDragOver","onDrop","onDragLeave","_a","_b","_c","_d","cx","cy","_e","_f","CornerType","getMovementFromEvent","previousTouch","movementX","movementY","MouseEvent","TouchEvent","touch","touches","pageX","pageY","dnnImageCropperCss","DnnImageCropper","imageTooSmall","modalCloseText","quality","preventUndersized","handleCropMouseDown","className","handleImageCropFinished","handleCropDrag","handleNwMouseMove","handleNeMouseMove","handleSeMouseMove","handleSwMouseMove","_ev","emitImage","handleCornerDrag","nw","ne","se","sw","corner","isMouseStillInTarget","_g","getCornerLeftTop","newWidth","orientation","wantedRatio","cropRect","crop","imageRect","image","_h","topOffset","offsetTop","leftOffset","offsetLeft","zoomRatio","naturalWidth","ev","newLeft","newTop","setView","newView","views","host","querySelectorAll","v","noPictureView","hasPictureView","view","initCrop","imageRatio","wantedHeight","wantedWidth","setImage","src","toDataURL","handleNewFile","split","reader","FileReader","onload","readerLoadEvent","img","Image","imageTooSmallModal","ctx","readAsDataURL","naturalHeight","dataUrl","generateCroppedImage","imageCropChanged","desiredWidth","desiredHeight","clearRect","inside","mouseX","mouseY","corners","cornerRect","onTouchStart","onFilesSelected","detail","close-text","replace","dnnModalCss","DnnModal","class_2","closeText","visible","handleDismiss","dismissed","handleBackdropClick","dnnSearchboxCss","DnnSearchbox","placeholder","debounced","query","fireQueryChanged","debouncedHandleQueryChanged","handleQueryChanged","queryChanged","onInput","dnnSortIconCss","DnnSortIcon","sortDirection","changeSort","sortChanged","active","dnnTabCss","DnnTab","class_3","dnnTabsCss","DnnTabs","tabTitles","selectedTabTitle","updateTitles","showFirstTab","getTabs","tabs","tab","__spreadArray","tabTitle","showTab","dnnToggleCss","DnnToggle","checkedChanged","isChecked","checkChanged","dnnTreeviewItemCss","DnnTreeviewItem","hasChildren","children","childrenElement","count","expander","collapsible","toggleCollapse","userExpanded","userCollapsed","dnnVerticalOverflowMenuCss","DnnVerticalOverflowMenu","showDropdownButton","showDropdownMenu","previousMenuWidth","componentDidRender","moveItemsToDropDownIfNecessery","resizeObserver","ResizeObserver","entries","_i","entries_1","entry","contentRect","moveItemsToMenuIfPossible","menuItems","Array","from","menu","availableWidth","neededWidth","parseFloat","getComputedStyle","fontSize","item","getFullWidth","lastItem","dropdown","hasChildNodes","firstItem","styles","marginLeft","marginRight","paddingLeft","paddingRight","toggleOverflowMenu","contentHeight_1","items","emHeight","additionalHeight","dismissMenu_1","buttonRect","right","dnnVerticalSplitviewCss","DnnVerticalSplitview","class_4","splitterWidth","splitWidthPercentage","leftWidth","rightWidth","setSplitWidthPercentage","panes","pane","splitter","fullWidth","getSplitWidthPercentage","widthChanged","handleMouseDown","handleDrag","handleDragFinished","newPercentage","handleKeyDown","minWidth"],"mappings":"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","sourcesContent":[":host {\r\n --background-color: transparent;\r\n --color: #333;\r\n --border-size: 1px;\r\n --border-color: var(--backround-color);\r\n --border-radius: var(--dnn-controls-radius, 5px);\r\n --padding: var(--dnn-controls-padding, 5px);\r\n display: inline-block;\r\n width: auto;\r\n}\r\n\r\n:host(.disabled){\r\n pointer-events: none;\r\n}\r\n\r\n:host(.primary){\r\n --background-color: var(--dnn-color-primary, blue);\r\n --color: var(--dnn-color-primary-contrast, white);\r\n --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.primary.reversed){\r\n --background-color: var(--dnn-color-primary-contrast, white);\r\n --color: var(--dnn-color-primary, blue);\r\n --border-color: var(--dnn-color-primary, blue);\r\n --focus-color: var(--color);\r\n}\r\n\r\n:host(.secondary){\r\n --background-color: var(--dnn-color-secondary, green);\r\n --color: var(--dnn-color-secondary-contrast, white);\r\n --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.secondary.reversed){\r\n --background-color: var(--dnn-color-secondary-contrast, white);\r\n --color: var(--dnn-color-secondary, blue);\r\n --border-color: var(--dnn-color-secondary, blue);\r\n --focus-color: var(--color);\r\n}\r\n\r\n:host(.tertiary){\r\n --background-color: var(--dnn-color-tertiary, yellow);\r\n --color: var(--dnn-color-tertiary-contrast, black);\r\n --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.tertiary.reversed){\r\n --background-color: var(--dnn-color-tertiary-contrast, white);\r\n --color: var(--dnn-color-tertiary, blue);\r\n --border-color: var(--dnn-color-tertiary, blue);\r\n --focus-color: var(--color);\r\n}\r\n\r\n:host(.hydrated){\r\n button{\r\n border: var(--border-size) solid var(--border-color);\r\n border-radius: var(--border-radius);\r\n padding: var(--padding) calc(var(--padding) * 2);\r\n background-color: transparent;\r\n background-color: var(--background-color);\r\n color: var(--color);\r\n outline: none;\r\n &:focus, &:hover{\r\n box-shadow: 0 0 2px 2px var(--focus-color);\r\n }\r\n }\r\n}\r\n\r\n:host(:disabled, [disabled]){\r\n button{\r\n pointer-events: none;\r\n opacity: 0.5;\r\n }\r\n}\r\n\r\n:host(.small){\r\n button{\r\n padding: calc(var(--padding) / 2) var(--padding);\r\n font-size: 0.7em;\r\n }\r\n}\r\n\r\n:host(.large){\r\n button{\r\n padding: calc(var(--padding) * 1.5) calc(var(--padding) * 3);\r\n font-size: 1.2em;\r\n }\r\n}\r\n\r\nbutton{\r\n height: 100%;\r\n width: 100%;\r\n cursor: pointer;\r\n}","import { Component, Element, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\r\n\r\n/**\r\n * @slot Content of the button\r\n */\r\n@Component({\r\n tag: 'dnn-button',\r\n styleUrl: 'dnn-button.scss',\r\n shadow: true\r\n})\r\nexport class DnnButton {\r\n\r\n /**\r\n * Optional button style,\r\n * can be either primary, secondary or tertiary and defaults to primary if not specified\r\n */\r\n @Prop() type: 'primary' | 'secondary' | 'tertiary' = 'primary';\r\n\r\n /**\r\n * Optionally reverses the button style.\r\n */\r\n @Prop() reversed: boolean = false;\r\n\r\n /**\r\n * Optionally sets the button size, small normal or large, defaults to normal\r\n */\r\n @Prop() size?: 'small' | 'normal' | 'large' = 'normal';\r\n\r\n /**\r\n * Optionally add a confirmation dialog before firing the action.\r\n */\r\n @Prop() confirm?: boolean = false;\r\n\r\n /**\r\n * The text of the yes button for confirmation.\r\n */\r\n @Prop() confirmYesText?: string = \"Yes\";\r\n\r\n /**\r\n * The text of the no button for confirmation.\r\n */\r\n @Prop() confirmNoText?: string = \"No\";\r\n\r\n /**\r\n * The text of the confirmation message;\r\n */\r\n @Prop() confirmMessage?: string = \"Are you sure ?\";\r\n \r\n /**\r\n * Disables the button\r\n */\r\n @Prop() disabled: boolean = false;\r\n\r\n @State() modalVisible: boolean = false;\r\n\r\n @Element() el!: HTMLDnnButtonElement;\r\n\r\n private modal!: HTMLDnnModalElement;\r\n\r\n /** \r\n * Fires when confirm is true and the user confirms the action.\r\n */\r\n @Event({\r\n eventName: 'confirmed',\r\n bubbles: false,\r\n cancelable: true,\r\n composed: true\r\n }) confirmed: EventEmitter;\r\n\r\n /**\r\n * Fires when confirm is true and the user cancels the action.\r\n */\r\n @Event({bubbles: false}) canceled: EventEmitter;\r\n\r\n componentDidLoad(){\r\n this.el.classList.add(this.type);\r\n \r\n if (this.reversed){\r\n this.el.classList.add('reversed');\r\n }\r\n\r\n if (this.size !== 'normal'){\r\n this.el.classList.add(this.size);\r\n }\r\n\r\n this.modal = this.el.shadowRoot.querySelector('dnn-modal');\r\n }\r\n\r\n private handleConfirm(){\r\n this.modal.hide();\r\n this.modalVisible = false;\r\n this.confirmed.emit();\r\n }\r\n\r\n private handleCancel(){\r\n this.modal.hide();\r\n this.modalVisible = false;\r\n this.canceled.emit();\r\n }\r\n \r\n private handleClick(): void {\r\n if (this.confirm && !this.modalVisible){\r\n this.modal.show();\r\n this.modalVisible = true;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host disabled={this.disabled} style={{'pointer-events': this.disabled ? 'none' : 'all'}}>\r\n <button class=\"button\" onClick={() => this.handleClick()} disabled={this.disabled}>\r\n <slot></slot>\r\n </button>\r\n {this.confirm &&\r\n <dnn-modal showCloseButton={false} backdropDismiss={false}>\r\n <p>{this.confirmMessage}</p>\r\n <div style={\r\n {\r\n display: 'flex',\r\n justifyContent: 'flex-end'\r\n }\r\n }>\r\n <dnn-button type='primary' style={{margin: '5px'}} onClick={() => this.handleConfirm()}>{this.confirmYesText}</dnn-button>\r\n <dnn-button type='secondary' style={{margin: '5px'}} onClick={() => this.handleCancel()}>{this.confirmNoText}</dnn-button>\r\n </div>\r\n </dnn-modal>\r\n }\r\n </Host>\r\n );\r\n }\r\n \r\n\r\n}\r\n",":host {\r\n /**\r\n * @prop --focus-color: The color to outline the checkbox when hovered or focused, default to the dnn primary color.\r\n */\r\n --focus-color: var(--dnn-color-primary, #3792ED);\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.25rem;\r\n margin: 3px;\r\n}\r\nbutton{\r\n background-color: transparent;\r\n border: 0;\r\n padding: 0;\r\n margin: 0;\r\n outline: none;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n svg.undefined{\r\n opacity: 0.45;\r\n }\r\n &:focus{\r\n box-shadow: 0 0 2px 2px var(--focus-color);\r\n }\r\n}","import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dnn-checkbox',\r\n styleUrl: 'dnn-checkbox.scss',\r\n shadow: true,\r\n})\r\nexport class DnnCheckbox {\r\n @Element() el: HTMLDnnCheckboxElement;\r\n\r\n /** Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) */\r\n @Prop({mutable: true}) checked: boolean | undefined = false;\r\n\r\n /** Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) */\r\n @Prop() useIntermediate: boolean = false;\r\n\r\n /** The value for this checkbox (not to be confused with its checked state). */\r\n @Prop() value: string;\r\n\r\n /** Fires up when the checkbox checked property changes. */\r\n @Event() checkedchange: EventEmitter<boolean | undefined>;\r\n \r\n private button: HTMLButtonElement;\r\n\r\n private changeState(): void {\r\n if (!this.useIntermediate){\r\n this.checked = !this.checked;\r\n this.emitEvents();\r\n return;\r\n }\r\n if (this.checked === true){\r\n this.checked = false;\r\n this.button.classList.remove(\"undefined\");\r\n this.emitEvents();\r\n return;\r\n }\r\n if (this.checked === undefined){\r\n this.checked = true;\r\n this.button.classList.remove(\"undefined\");\r\n this.emitEvents();\r\n return;\r\n }\r\n if (this.checked === false){\r\n this.checked = undefined;\r\n this.button.classList.add(\"undefined\");\r\n this.emitEvents();\r\n return;\r\n }\r\n }\r\n\r\n private emitEvents() {\r\n this.checkedchange.emit(this.checked);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button class=\"icon\" onClick={() => this.changeState()} ref={el => this.button = el}>\r\n {this.checked === false &&\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><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\"/></svg>\r\n }\r\n {this.checked === true &&\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/></svg>\r\n }\r\n {this.checked === undefined &&\r\n <svg class=\"undefined\" xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><g><rect fill=\"none\" height=\"24\" width=\"24\"/></g><g><g><g><path d=\"M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z\"/></g></g></g></svg>\r\n }\r\n </button>\r\n <label htmlFor={this.el.id} onClick={() => this.changeState()}><slot></slot></label>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: inline-block;\r\n}\r\nbutton{\r\n border: none;\r\n padding: 0px;\r\n margin: 0px;\r\n min-width: 15px;\r\n min-height: 15px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: transparent;\r\n outline: none;\r\n}\r\nsvg{\r\n height:2em;\r\n width:2em;\r\n transition: all 300ms ease-in-out;\r\n}\r\n\r\n// FOCUS\r\nbutton:focus, button:hover{\r\n svg{\r\n color: var(--dnn-color-primary);\r\n }\r\n}\r\n\r\n// EXPANDED\r\n:host([expanded]){\r\n svg{\r\n transform: rotate(90deg);\r\n }\r\n}","import { Component, Host, h, Prop, Event } from '@stencil/core';\r\nimport { EventEmitter } from '@stencil/core';\r\nimport { Watch } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dnn-chevron',\r\n styleUrl: 'dnn-chevron.scss',\r\n shadow: true\r\n})\r\nexport class DnnChevron {\r\n\r\n /** Expand text for screen readers */\r\n @Prop() expandText?: string = \"expand\";\r\n\r\n /** Collapse text for screen readers */\r\n @Prop() collapseText?: string = \"collapse\";\r\n\r\n /** Is the chevron expanded */\r\n @Prop({mutable: true, reflect: true}) expanded?: boolean = false;\r\n\r\n /** Fires up when the expanded status changes */\r\n @Event() changed: EventEmitter;\r\n\r\n @Watch('expanded')\r\n handleExpandedChanged(newValue: boolean) {\r\n this.changed.emit(newValue);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button aria-label={this.expanded ? this.collapseText : this.expandText}\r\n onClick={() => this.expanded = !this.expanded}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"/></svg>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n\r\n}\r\n",":host {\r\n display: block;\r\n #container{\r\n height:0;\r\n overflow: hidden;\r\n transition: height 300ms ease-in-out;\r\n }\r\n}","import { Component, Host, h, Prop, Element, Watch, State, Method, Event, EventEmitter, Listen } from '@stencil/core';\r\nimport { Debounce } from '../../utilities/debounce';\r\n\r\n@Component({\r\n tag: \"dnn-collapsible\",\r\n styleUrl: \"dnn-collapsible.scss\",\r\n shadow: true\r\n})\r\nexport class DnnCollapsible {\r\n\r\n @Element() el: HTMLDnnCollapsibleElement;\r\n\r\n /** Defines if the panel is expanded or not. */\r\n @Prop({reflect: true}) expanded: boolean = false;\r\n\r\n /** Defines the transition time in ms, defaults to 100ms */\r\n @Prop() transitionDuration?: number = 150;\r\n\r\n @State() animating: boolean = false;\r\n\r\n @Watch(\"expanded\")\r\n handleExpandedChanged(newValue: boolean){\r\n this.animating = true;\r\n requestAnimationFrame(() => {\r\n const container = this.el.shadowRoot.querySelector(\"#container\") as HTMLDivElement;\r\n if (newValue){\r\n container.style.height = container.scrollHeight + \"px\";\r\n }\r\n else{\r\n container.style.height = \"0px\";\r\n }\r\n });\r\n \r\n requestAnimationFrame(() => {\r\n this.animating = false;\r\n this.dnnCollapsibleHeightChanged.emit();\r\n });\r\n }\r\n\r\n /** Updates the component height, use to update after a slot content changes. */\r\n @Debounce()\r\n @Method()\r\n async updateSize() {\r\n this.updateComponentSize();\r\n }\r\n\r\n private updateComponentSize(){\r\n if (this.expanded){\r\n this.animating = true;\r\n requestAnimationFrame(() => {\r\n const container = this.el.shadowRoot.querySelector(\"#container\") as HTMLDivElement;\r\n let newHeight = 0;\r\n container.querySelector('slot').assignedElements().forEach(node => {\r\n newHeight += node.scrollHeight;\r\n });\r\n container.style.height = newHeight + \"px\";\r\n });\r\n }\r\n }\r\n\r\n /** Fires whenever the collapsible height has changed */\r\n @Event() dnnCollapsibleHeightChanged: EventEmitter<void>;\r\n\r\n @Listen('dnnCollapsibleHeightChanged')\r\n handleOtherCollapsibleHeightChanged(){\r\n setTimeout(() => {\r\n this.updateComponentSize();\r\n }, this.transitionDuration);\r\n }\r\n\r\n private mutationObserver: MutationObserver;\r\n\r\n private handleMutation(mutationList){\r\n mutationList.forEach(mutation => {\r\n requestAnimationFrame(() => {\r\n mutation.target.closest('dnn-collapsible').updateSize();\r\n });\r\n });\r\n }\r\n\r\n componentWillLoad() {\r\n this.mutationObserver = new MutationObserver((mutationList) => {\r\n this.handleMutation(mutationList);\r\n });\r\n }\r\n\r\n componentDidLoad(){\r\n const container = this.el.shadowRoot.querySelector('#container') as HTMLDivElement;\r\n container.style.transitionDuration = this.transitionDuration + 'ms';\r\n\r\n // Monitor for content changes and update own height\r\n const childNodes = [this.el];\r\n childNodes.forEach(element => {\r\n this.mutationObserver.observe(element, {attributes: true, characterData: true, childList: true, subtree: true});\r\n });\r\n\r\n const slot = this.el.shadowRoot.querySelector('slot');\r\n slot.addEventListener(\"slotchange\", () => {\r\n this.updateSize();\r\n });\r\n }\r\n\r\n disconnectedCallback(){\r\n this.mutationObserver.disconnect();\r\n }\r\n /*eslint-enable @stencil/own-methods-must-be-private */\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div id=\"container\">\r\n <slot></slot>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n}\r\n","/** Color utility class with hsl and rgb converters\r\n * based on math at https://en.wikipedia.org/wiki/HSL_and_HSV\r\n * @copyright Copyright (c) .NET Foundation. All rights reserved.\r\n * @license MIT \r\n */\r\n\r\nexport class ColorInfo{\r\n\r\n private _hue: number = 0;\r\n /** gets the color hue\r\n * @returns a number between 0 and 359, could contain decimals\r\n */\r\n get hue() { return this._hue; }\r\n set hue(value: number){\r\n if (value < 0) { value = 0; }\r\n if (value > 359) { value = 359; }\r\n this._hue = value;\r\n }\r\n\r\n private _saturation: number = 0;\r\n /** gets the color saturation\r\n * @returns a number between 0 and 1, could contain decimals\r\n */\r\n get saturation() { return this._saturation; }\r\n set saturation(value: number) {\r\n if (value < 0) { value = 0; }\r\n if (value > 1) { value = 1; }\r\n this._saturation = value;\r\n }\r\n\r\n private _lightness: number = 0;\r\n /** gets the color lightness\r\n * @returns a number between 0 and 1, could contain decimals\r\n */\r\n get lightness() { return this._lightness; }\r\n set lightness(value: number) {\r\n if (value < 0) { value = 0; }\r\n if (value > 1) { value = 1; }\r\n this._lightness = value;\r\n }\r\n\r\n /** gets or sets the red component \r\n * @returns an integer between 0 and 255\r\n */\r\n get red() {\r\n return this.getRGB().red;\r\n }\r\n set red(value) {\r\n this.setHSL(value, this.green, this.blue);\r\n }\r\n\r\n /** gets or sets the green component\r\n * @returns an integer between 0 and 255\r\n */\r\n get green() {\r\n return this.getRGB().green;\r\n }\r\n set green(value: number) {\r\n this.setHSL(this.red, value, this.blue);\r\n }\r\n\r\n /** gets or sets the blue component\r\n * @returns an integer between 0 and 255\r\n */\r\n get blue() {\r\n return this.getRGB().blue;\r\n }\r\n set blue(value: number) {\r\n this.setHSL(this.red, this.green, value);\r\n }\r\n\r\n /** gets or sets the hex color value, expresses as 6 hexadecimal characters.\r\n * @returns hex representation of the color\r\n */\r\n get hex() {\r\n var r = this.getHex(this.red);\r\n var g = this.getHex(this.green);\r\n var b = this.getHex(this.blue);\r\n return r + g + b;\r\n }\r\n set hex(value: string){\r\n this.red = parseInt(value.substr(0,2));\r\n this.green = parseInt(value.substr(2,2));\r\n this.blue = parseInt(value.substr(4,2));\r\n }\r\n\r\n /** gets white or black color that is a good oposite to the current color\r\n * @returns - \"000000\" or \"FFFFFF\"\r\n */\r\n get contrastColor() {\r\n const brightness = (this.red*299 + this.green*587 + this.blue*114) / 1000\r\n if (brightness > 127){\r\n return \"000000\";\r\n }\r\n return \"FFFFFF\";\r\n }\r\n\r\n private getRGB() {\r\n const chroma = (1 - Math.abs((2 * this._lightness) - 1)) * this.saturation;\r\n // find the quandrant of the hue\r\n const quadrant = this._hue / 60;\r\n // calculate the offset from the quandrant center\r\n const offset = chroma * (1 - Math.abs(quadrant % 2 - 1));\r\n\r\n // Apply the chroma to the primary component and the offset to the 2nd most important component\r\n let r = 0, g = 0, b = 0;\r\n if (0 <= quadrant && quadrant <= 1) {\r\n r = chroma; g = offset; // red to yellow\r\n } else if (1 <= quadrant && quadrant <= 2) {\r\n g = chroma; r = offset; // yellow to green\r\n } else if (2 <= quadrant && quadrant <= 3) {\r\n g = chroma; b = offset; // green to cyan\r\n } else if (3 <= quadrant && quadrant <= 4) {\r\n b = chroma; g = offset; // cyan to blue\r\n } else if (4 <= quadrant && quadrant <= 5) {\r\n b = chroma; r = offset; // blue to magenta\r\n } else if (5 <= quadrant && quadrant <= 6) {\r\n r = chroma; b = offset; // magenta to red\r\n }\r\n // calculate the bias to add to all channels to match the lightness\r\n const bias = this._lightness - (chroma / 2);\r\n\r\n return {\r\n red: Math.round((r + bias) * 255),\r\n green: Math.round((g + bias) * 255),\r\n blue: Math.round((b + bias) * 255)\r\n }\r\n }\r\n\r\n private setHSL(red: number, green: number, blue: number) {\r\n // GENERAL DATA\r\n // all math is based on values from 0 to 1\r\n const r = red/255, g = green/255, b = blue/255;\r\n // we need to max, min and the difference between them to derive hsl\r\n const min = Math.min(r, g, b);\r\n const max = Math.max(r, g, b);\r\n const diff = max - min;\r\n let h = 0, s = 0, l = 0;\r\n\r\n // HUE\r\n if (diff === 0) { // neutral\r\n h = 0;\r\n } else if (max === r) { // red (magenta to yellow range)\r\n h = 60 * ((g - b) / diff);\r\n } else if (max === g) { // green (yellow to cyan range)\r\n h = 60 * (2 + ((b - r) / diff));\r\n } else if (max === b) { // blue (cyan to magenta range)\r\n h = 60 * (4 + ((r - g) / diff));\r\n }\r\n if (h < 0) { h = h + 360} // ensures positive hues only\r\n if (h > 359) { h = 359} // ensures we never return 360 for simplicity since it is the same as 0\r\n\r\n // LIGHTNESS\r\n l = (max + min) / 2;\r\n\r\n // SATURATION\r\n if (max === 0 || min === 1) { // pure black or white have no saturation\r\n s = 0;\r\n } else {\r\n s = (max - l) / (Math.min(l, 1 - l));\r\n }\r\n\r\n this._hue = h;\r\n this._saturation = s;\r\n this._lightness = l;\r\n }\r\n\r\n private getHex(value: number){\r\n var hex = value.toString(16);\r\n if (hex.length < 2){\r\n hex = \"0\" + hex;\r\n }\r\n return hex;\r\n }\r\n} ",".dnn-color-picker{\r\n padding: 15px;\r\n max-width: 400px;\r\n .dnn-color-sliders{\r\n display:flex;\r\n flex-direction: column;\r\n min-width: 200px;\r\n .dnn-color-s-b{\r\n border: 1px solid #ccc;\r\n padding-bottom: var(--color-box-height, 50%);\r\n position: relative;\r\n background-color: red;\r\n &:before{\r\n content: '';\r\n position: absolute;\r\n top:0;\r\n left:0;\r\n width: 100%;\r\n height:100%;\r\n z-index:1;\r\n background: linear-gradient(to right, white, red);\r\n mix-blend-mode: saturation;\r\n }\r\n &:after{\r\n content: '';\r\n position: absolute;\r\n top:0;\r\n left:0;\r\n width: 100%;\r\n height:100%;\r\n z-index:2;\r\n background: linear-gradient(to bottom, white, black);\r\n mix-blend-mode: luminosity;\r\n }\r\n button{\r\n position: absolute;\r\n bottom: calc(50% - 4px);\r\n left: calc(50% - 4px);\r\n width: 8px;\r\n height: 8px;\r\n z-index: 3;\r\n display: block;\r\n background: none;\r\n border: none;\r\n margin-left: -4px;\r\n margin-bottom: -4px;\r\n padding: 7px;\r\n background-color: #fff;\r\n border-radius: 50%;\r\n &:before{\r\n content:'';\r\n position: absolute;\r\n top: -1px;\r\n left: -1px;\r\n border-radius: 50%;\r\n }\r\n &:after{\r\n content:'';\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n border-radius: 50%;\r\n width: 10px;\r\n height: 10px;\r\n border: 2px solid #ccc;\r\n }\r\n } \r\n }\r\n .dnn-color-bar {\r\n display: flex;\r\n align-items: center;\r\n margin-top: 15px;\r\n .dnn-color-result {\r\n flex-direction: column;\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 50%;\r\n background: red;\r\n }\r\n .dnn-color-hue{\r\n flex: auto;\r\n margin-left: 10px;\r\n height: 16px;\r\n border: 1px solid #ccc;\r\n position: relative;\r\n background: linear-gradient(\r\n to right, \r\n #f00 0, \r\n #ff0 17%,\r\n #0f0 33%,\r\n #0ff 50%,\r\n #00f 67%,\r\n #f0f 84%,\r\n #f00 100%\r\n );\r\n button{\r\n width: 10px;\r\n height: 20px;\r\n position: absolute;\r\n top: -2px;\r\n left: calc(50% - 4px);\r\n border: 0;\r\n padding: 0;\r\n background-color: transparent;\r\n padding-left: -8px;\r\n &:before{\r\n content:'';\r\n position: absolute;\r\n top: -2px;\r\n left: 0px;\r\n border-radius: 3px;\r\n width: 100%;\r\n height: 100%;\r\n border: 1px solid #ccc;\r\n background-color: #fff;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n .dnn-color-fields{\r\n display:flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n .dnn-color-mode-switch {\r\n display: flex;\r\n align-items: flex-end;\r\n padding: .5em;\r\n button {\r\n background-color: transparent;\r\n border: none;\r\n svg {\r\n width: 3em;\r\n height: 3em;\r\n pointer-events: none;\r\n outline: none;\r\n }\r\n }\r\n }\r\n .dnn-rgb-color-fields {\r\n display: flex;\r\n justify-content: space-evenly;\r\n .dnn-rgb-color-field {\r\n display: flex;\r\n flex-direction: column;\r\n flex: auto;\r\n text-align: center;\r\n padding: .5em;\r\n label {\r\n padding-bottom: .25em;\r\n }\r\n input{\r\n border-radius: var(--dnn-button-radius, 3px);\r\n border: 1px solid #ccc;\r\n padding: 0.5em;\r\n padding-left: 1.3em;\r\n text-align: center;\r\n &.red{\r\n border-color: red;\r\n }\r\n &.green{\r\n border-color: green; \r\n }\r\n &.blue{\r\n border-color: blue;\r\n } \r\n }\r\n }\r\n }\r\n .dnn-hsl-color-fields {\r\n display: flex;\r\n justify-content: space-evenly;\r\n .dnn-hsl-color-field {\r\n display: flex;\r\n flex-direction: column;\r\n flex: auto;\r\n text-align: center;\r\n padding: .5em;\r\n label {\r\n padding-bottom: .25em;\r\n }\r\n input{\r\n border-radius: var(--dnn-button-radius, 3px);\r\n border: 1px solid #ccc;\r\n padding: 0.5em;\r\n padding-left: 1.3em;\r\n text-align: center;\r\n }\r\n }\r\n }\r\n .dnn-hex-color-fields {\r\n display: flex;\r\n justify-content: space-evenly;\r\n .dnn-hex-color-field {\r\n display: flex;\r\n flex-direction: column;\r\n flex: auto;\r\n text-align: center;\r\n padding: .5em;\r\n label {\r\n padding-bottom: .25em;\r\n }\r\n .hex-input{\r\n position: relative;\r\n border-radius: var(--dnn-button-radius, 3px);\r\n border: 1px solid #ccc;\r\n padding: 0.323em;\r\n text-align: center;\r\n input{\r\n border:0;\r\n padding:0;\r\n margin:0;\r\n width:100%;\r\n height:100%;\r\n text-align:center;\r\n }\r\n button{\r\n position: absolute;\r\n height: 100%;\r\n top: 0;\r\n right: 1em;\r\n background-color: transparent;\r\n border:0;\r\n padding:0;\r\n margin:0;\r\n svg{\r\n min-width: 1em;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n} ","/** Reusable DNN UI component to pick a color\r\n * @copyright Copyright (c) .NET Foundation. All rights reserved.\r\n * @license MIT \r\n */\r\n\r\nimport { Component, h, State, Element, Prop, EventEmitter, Event, Watch } from \"@stencil/core\";\r\nimport { ColorInfo } from '../../utilities/colorInfo';\r\nimport { Debounce } from \"../../utilities/debounce\";\r\n\r\n/** Color Picker for Dnn */\r\n@Component({\r\n tag: 'dnn-color-picker',\r\n styleUrl: 'dnn-color-picker.scss',\r\n shadow: true\r\n})\r\nexport class DnnColorPicker {\r\n\r\n @Element() el: HTMLDnnColorPickerElement;\r\n\r\n /** Sets the initial color, must be a valid 8 character hexadecimal string without the # sign. */\r\n @Prop() color: string = \"FFFFFF\";\r\n\r\n /** Sets the width-height ratio of the color picker saturation-lightness box.\r\n * @example 100% renders a perfect square\r\n */\r\n @Prop() colorBoxHeight: string = \"50%\";\r\n \r\n @State() currentColor: ColorInfo;\r\n @State() rgbDisplay: string = \"flex\";\r\n @State() hslDisplay: string = \"none\";\r\n @State() hexDisplay: string = \"none\";\r\n\r\n /** Fires up when the color is changed and emits a ColorInfo object\r\n * @see ../../utilities/colorInfo.ts\r\n */\r\n @Event() colorChanged: EventEmitter<ColorInfo>;\r\n\r\n @Debounce(100)\r\n private colorChangedHandler(color: ColorInfo) {\r\n this.colorChanged.emit(color);\r\n }\r\n\r\n @Watch(\"currentColor\")\r\n handeCurrentColorChanged(newValue: ColorInfo){\r\n this.colorChangedHandler(newValue);\r\n }\r\n \r\n private saturationLightnessBox?: HTMLDivElement;\r\n private hueRange?: HTMLDivElement;\r\n\r\n\r\n componentWillLoad() {\r\n this.handleHexChange(this.color);\r\n }\r\n\r\n componentDidLoad() {\r\n (this.el as unknown as HTMLElement).style.setProperty(\"--color-box-height\", this.colorBoxHeight.toString());\r\n }\r\n \r\n private getHex() {\r\n return this.getDoublet(this.currentColor.red) + this.getDoublet(this.currentColor.green) + this.getDoublet(this.currentColor.blue);\r\n }\r\n\r\n private getContrast() {\r\n return this.currentColor.contrastColor;\r\n }\r\n\r\n private getDoublet(value: number){\r\n const valueString = value.toString(16).toUpperCase();\r\n if (valueString.length === 1){\r\n return '0' + valueString;\r\n }\r\n return valueString;\r\n }\r\n\r\n private handleSaturationLightnessMouseDown = (e) => {\r\n e.preventDefault();\r\n this.handleDragLightnessSaturation(e);\r\n window.addEventListener('mousemove', this.handleDragLightnessSaturation);\r\n window.addEventListener('mouseup', this.handleSaturationLightnessMouseUp);\r\n }\r\n\r\n private handleDragLightnessSaturation = (e) => {\r\n const rect = this.saturationLightnessBox.getBoundingClientRect(); \r\n\r\n let x = e.clientX - rect.left; \r\n if (x < 0) { x = 0}\r\n if (x > rect.width) { x = rect.width}\r\n x = x/rect.width;\r\n\r\n let y = e.clientY - rect.top;\r\n if (y < 0) { y = 0}\r\n if (y > rect.height) { y = rect.height}\r\n y = 1 - (y/rect.height);\r\n\r\n const newColor = new ColorInfo();\r\n newColor.hue = this.currentColor.hue;\r\n newColor.saturation = x;\r\n newColor.lightness = y;\r\n this.currentColor = newColor;\r\n }\r\n\r\n private handleSaturationLightnessMouseUp = () => {\r\n window.removeEventListener('mousemove', this.handleDragLightnessSaturation);\r\n window.removeEventListener('mouseup', this.handleSaturationLightnessMouseUp);\r\n }\r\n\r\n private handleHueMouseDown = (e) => {\r\n e.preventDefault();\r\n this.handleDragHue(e);\r\n window.addEventListener('mousemove', this.handleDragHue);\r\n window.addEventListener('mouseup', this.handleHueMouseUp); \r\n }\r\n\r\n private handleHueMouseUp = () => {\r\n window.removeEventListener('mousemove', this.handleDragHue);\r\n window.removeEventListener('mouseup', this.handleHueMouseUp); \r\n }\r\n\r\n private handleDragHue = (e) => {\r\n const rect = this.hueRange.getBoundingClientRect(); \r\n\r\n let x = e.clientX - rect.left;\r\n if (x < 0) { x = 0}\r\n if (x > rect.width) { x = rect.width}\r\n x = x/rect.width*360; \r\n\r\n const newColor = new ColorInfo();\r\n newColor.hue = x;\r\n newColor.saturation = this.currentColor.saturation;\r\n newColor.lightness = this.currentColor.lightness;\r\n this.currentColor = newColor;\r\n }\r\n\r\n private handleComponentValueChange = (e, channel) => {\r\n let value = parseInt(e.target.value);\r\n if (isNaN(value)) { return }\r\n const newColor = new ColorInfo();\r\n if (value < 0) { value = 0; }\r\n if (value > 255) { value = 255; }\r\n let r = this.currentColor.red;\r\n let g = this.currentColor.green;\r\n let b = this.currentColor.blue;\r\n switch (channel) {\r\n case 'red':\r\n r = value;\r\n break;\r\n case 'green':\r\n g = value;\r\n break;\r\n case 'blue':\r\n b = value;\r\n break;\r\n default:\r\n break;\r\n }\r\n newColor.green = g;\r\n newColor.red = r;\r\n newColor.blue = b;\r\n this.currentColor = newColor;\r\n }\r\n\r\n private handleHSLChange = (e, component) => { \r\n let value = parseInt(e.target.value);\r\n if (isNaN(value)) {return}\r\n const newColor = new ColorInfo();\r\n if (value != null) { \r\n let h = this.currentColor.hue;\r\n let s = this.currentColor.saturation;\r\n let l = this.currentColor.lightness;\r\n switch (component) {\r\n case \"hue\":\r\n if (value < 0) { value = 0}\r\n if (value > 359) { value = 0}\r\n h = value;\r\n break;\r\n case \"saturation\":\r\n if (value < 0) { value = 0}\r\n if (value > 100) { value = 100}\r\n s = value / 100;\r\n break;\r\n case \"lightness\":\r\n if (value < 0) { value = 0}\r\n if (value > 100) { value = 100}\r\n l = value / 100;\r\n break; \r\n default:\r\n break; \r\n }\r\n newColor.hue = h;\r\n newColor.saturation = s;\r\n newColor.lightness = l;\r\n this.currentColor = newColor;\r\n }\r\n }\r\n\r\n private handleHexChange(value: string){\r\n const newColor = new ColorInfo();\r\n if (value.match(/^(?:[\\da-f]{3}|[\\da-f]{6})$/i).length > 0) {\r\n if (value.length === 3){\r\n let expanded = value[0] + value[0] + value[1] + value[1] + value[2] + value [2];\r\n value = expanded;\r\n }\r\n newColor.red = parseInt(value.substr(0,2), 16);\r\n newColor.green = parseInt(value.substr(2,2), 16);\r\n newColor.blue = parseInt(value.substr(4,2), 16);\r\n }\r\n else{\r\n newColor.red = this.currentColor.red;\r\n newColor.green = this.currentColor.green;\r\n newColor.blue = this.currentColor.blue;\r\n }\r\n this.currentColor = newColor;\r\n }\r\n\r\n private switchColorMode(e) {\r\n switch(e.target.id) {\r\n case \"rgb-switch\":\r\n this.rgbDisplay = \"none\";\r\n this.hslDisplay = \"none\";\r\n this.hexDisplay = \"flex\";\r\n break;\r\n case \"hex-switch\":\r\n this.rgbDisplay = \"none\";\r\n this.hslDisplay = \"flex\";\r\n this.hexDisplay = \"none\";\r\n break;\r\n case \"hsl-switch\":\r\n this.rgbDisplay = \"flex\";\r\n this.hslDisplay = \"none\";\r\n this.hexDisplay = \"none\";\r\n break;\r\n default:\r\n this.rgbDisplay = \"flex\";\r\n this.hslDisplay = \"none\";\r\n this.hexDisplay = \"none\";\r\n }\r\n }\r\n\r\n private handleSaturationLightnessKeyDown = (e) => { \r\n let newColor = new ColorInfo();\r\n newColor.hue = this.currentColor.hue;\r\n newColor.saturation = this.currentColor.saturation;\r\n newColor.lightness = this.currentColor.lightness;\r\n\r\n let value = 0.01;\r\n if (e.shiftKey) { value = 0.1 ;}\r\n\r\n switch (e.key) {\r\n case \"ArrowUp\":\r\n newColor.lightness += value;\r\n break;\r\n case \"ArrowDown\":\r\n newColor.lightness -= value;\r\n break;\r\n case \"ArrowLeft\":\r\n newColor.saturation -= value;\r\n break;\r\n case \"ArrowRight\":\r\n newColor.saturation += value;\r\n default:\r\n break; \r\n }\r\n this.currentColor = newColor;\r\n }\r\n\r\n private handleHueKeyDown = (e) => {\r\n let newColor = new ColorInfo();\r\n newColor.hue = this.currentColor.hue;\r\n newColor.saturation = this.currentColor.saturation;\r\n newColor.lightness = this.currentColor.lightness;\r\n\r\n let value = 1;\r\n if (e.shiftKey) { value = 10}\r\n\r\n switch (e.key) {\r\n case \"ArrowLeft\":\r\n newColor.hue -= value;\r\n break;\r\n case \"ArrowRight\":\r\n newColor.hue += value;\r\n default:\r\n break;\r\n }\r\n this.currentColor = newColor;\r\n }\r\n\r\n render() {\r\n const hue = this.currentColor.hue;\r\n const saturation = this.currentColor.saturation;\r\n const lightness = this.currentColor.lightness;\r\n const red = this.currentColor.red;\r\n const green = this.currentColor.green;\r\n const blue = this.currentColor.blue;\r\n\r\n return (\r\n <div class=\"dnn-color-picker\">\r\n <div class=\"dnn-color-sliders\">\r\n <div class=\"dnn-color-s-b\" ref={(element) => this.saturationLightnessBox = element as HTMLDivElement}\r\n style={{backgroundColor: `hsl(${hue},100%,50%)`}}\r\n onMouseDown={this.handleSaturationLightnessMouseDown.bind(this)}\r\n >\r\n <button class=\"dnn-s-b-picker\"\r\n aria-label=\"Press up or down to adjust lightness, left or right to adjust saturation, hold shift to move by 10%\"\r\n role=\"slider\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n aria-valuetext={`Saturation: ${Math.round(this.currentColor.saturation*100)}%, Lightness: ${Math.round(this.currentColor.lightness*100)}%`}\r\n style={{\r\n left: Math.round(saturation * 100) + \"%\",\r\n bottom: Math.round(lightness * 100) + \"%\"\r\n }}\r\n onKeyDown={(e) => this.handleSaturationLightnessKeyDown(e)}\r\n />\r\n </div>\r\n <div class=\"dnn-color-bar\">\r\n <div class=\"dnn-color-result\" style={{\r\n backgroundColor: '#' + this.getHex(),\r\n boxShadow: \"0 0 2px 1px \" + \"#\" + this.getContrast()\r\n }} \r\n />\r\n <div class=\"dnn-color-hue\"\r\n ref={(element) => this.hueRange = element as HTMLDivElement}\r\n onMouseDown={this.handleHueMouseDown.bind(this)}\r\n >\r\n <button class=\"dnn-hue-picker\"\r\n aria-label=\"Press left or right to adjust hue, hold shift to move by 10 degrees\"\r\n role=\"slider\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"359\"\r\n aria-valuenow={Math.round(hue)}\r\n style={{left: (hue/359*100).toString() + \"%\"}}\r\n onKeyDown={(e) => this.handleHueKeyDown(e)}\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dnn-color-fields\">\r\n <div class=\"dnn-rgb-color-fields\" style={{display: this.rgbDisplay}}>\r\n <div class=\"dnn-rgb-color-field\">\r\n <label>R</label>\r\n <input type=\"number\" min=\"0\" max=\"255\" step=\"1\" class=\"red\" value={red} aria-label=\"red value\"\r\n onChange={(e) => this.handleComponentValueChange(e, 'red')}\r\n />\r\n </div>\r\n <div class=\"dnn-rgb-color-field\">\r\n <label>G</label>\r\n <input type=\"number\" min=\"0\" max=\"255\" class=\"green\" value={green} aria-label=\"green value\"\r\n onChange={(e) => this.handleComponentValueChange(e, 'green')}\r\n />\r\n </div>\r\n <div class=\"dnn-rgb-color-field\">\r\n <label>B</label>\r\n <input type=\"number\" min=\"0\" max=\"255\" class=\"blue\" value={blue} aria-label=\"blue value\"\r\n onChange={(e) => this.handleComponentValueChange(e, 'blue')}\r\n />\r\n </div>\r\n <div class=\"dnn-color-mode-switch\">\r\n <button\r\n id=\"rgb-switch\"\r\n onClick={this.switchColorMode.bind(this)}\r\n aria-label=\"switch to hexadecimal value entry\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"dnn-hsl-color-fields\" style={{display: this.hslDisplay}}>\r\n <div class=\"dnn-hsl-color-field\">\r\n <label>H</label>\r\n <input type=\"number\" min=\"0\" max=\"359\" step={1} value={Math.round(hue)} aria-label=\"Hue\"\r\n onChange={(e) => this.handleHSLChange(e, 'hue')}\r\n />\r\n </div>\r\n <div class=\"dnn-hsl-color-field\">\r\n <label>S</label>\r\n <input type=\"number\" min=\"0\" max=\"100\" step={1} value={Math.round(saturation*100)} aria-label=\"Saturation\"\r\n onChange={(e) => this.handleHSLChange(e, 'saturation')}\r\n />\r\n </div>\r\n <div class=\"dnn-hsl-color-field\">\r\n <label>L</label>\r\n <input type=\"number\" min=\"0\" max=\"100\" step={1} value={Math.round(lightness*100)} aria-label=\"Lightness\"\r\n onChange={(e) => this.handleHSLChange(e, 'lightness')}\r\n />\r\n </div>\r\n <div class=\"dnn-color-mode-switch\">\r\n <button\r\n id=\"hsl-switch\"\r\n onClick={this.switchColorMode.bind(this)}\r\n aria-label=\"Switch to red, green, blue entry mode\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"dnn-hex-color-fields\" style={{display: this.hexDisplay}}>\r\n <div class=\"dnn-hex-color-field\">\r\n <label>HEX</label>\r\n <div class=\"hex-input\">\r\n <input type=\"text\" aria-label=\"Hexadecimal value\"\r\n value={this.getHex()}\r\n onChange={e => this.handleHexChange((e.target as HTMLInputElement).value)}\r\n />\r\n <button\r\n class=\"copy\"\r\n aria-label=\"copy value\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><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\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"dnn-color-mode-switch\">\r\n <button\r\n id=\"hex-switch\"\r\n onClick={this.switchColorMode.bind(this)}\r\n aria-label=\"Switch to hue saturation lightness values\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}","\r\n:host {\r\n /** \r\n * @prop --border-color: The color of the border.\r\n * @prop --border-radius: The radius of the controls borders.\r\n * @prop --drop-background-color: The color of the background when a file is dropping.\r\n */\r\n --border-color: var(--dnn-color-tertiary-contrast, lightgray);\r\n --border-radius: var(--dnn-controls-radius, 5px);\r\n --drop-background-color: var(--dnn-color-tertiary, lightblue);\r\n\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1rem;\r\n text-align: center;\r\n border: 2px dashed var(--border-color);\r\n border-radius: var(--border-radius);\r\n padding: 1rem;\r\n transition: all 300ms ease-in-out;\r\n}\r\n\r\n:host(.dropping){\r\n background-color: var(--drop-background-color);\r\n}\r\np{\r\n margin: 0;\r\n padding: 0;\r\n}\r\nbutton{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n border: 0px;\r\n margin: 0;\r\n padding: 0;\r\n background-color: transparent;\r\n &:hover{\r\n cursor: pointer;\r\n }\r\n svg{\r\n margin-right: 0.5rem;\r\n }\r\n}\r\nlabel.upload-file{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n cursor: pointer;\r\n input{\r\n display: none;\r\n }\r\n}\r\n.video-preview{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n button{\r\n margin: 1rem;\r\n }\r\n}\r\n","import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dnn-dropzone',\r\n styleUrl: 'dnn-dropzone.scss',\r\n shadow: true,\r\n})\r\nexport class DnnDropzone {\r\n /** Localization strings */\r\n @Prop() resx:{\r\n dragAndDropFile: string;\r\n capture: string;\r\n or: string;\r\n takePicture: string;\r\n uploadFile: string;\r\n } = {\r\n dragAndDropFile: \"Drag and drop a file\",\r\n capture: \"Capture\",\r\n or: \"or\",\r\n takePicture: \"Take a picture\",\r\n uploadFile: \"Upload a file\",\r\n }\r\n\r\n /** A list of allowed file extensions.\r\n * If not specified, any file is allowed.\r\n * Ex: [\"jpg\", \"jped\", \"gif\", \"png\"]\r\n */\r\n @Prop() allowedExtensions: string[];\r\n\r\n /**\r\n * If true, will allow the user to take a snapshot\r\n * using the device camera. (only works over https).\r\n */\r\n @Prop() allowCameraMode: boolean = false;\r\n\r\n /**\r\n * Specifies the jpeg quality for when the device\r\n * camera is used to generate a picture.\r\n * Needs to be a number between 0 and 1 and defaults to 0.8\r\n */\r\n @Prop() captureQuality: number = 0.8;\r\n\r\n /** Fires when file were selected. */\r\n @Event() filesSelected: EventEmitter<File[]>;\r\n \r\n @State() canTakeSnapshots: boolean = false;\r\n\r\n @State() takingPicture: boolean = false;\r\n \r\n private dropzone: HTMLElement;\r\n private fileInput: HTMLInputElement;\r\n private videoPreview: HTMLVideoElement;\r\n private videoSettings!: MediaTrackSettings;\r\n\r\n\r\n componentDidLoad() {\r\n if (this.allowCameraMode){\r\n this.checkIfBrowserCanTakeSnapshots()\r\n .then(result => this.canTakeSnapshots = result);\r\n }\r\n if (this.allowedExtensions != undefined && this.allowedExtensions.length > 0){\r\n var extensionsWithDots = this.allowedExtensions.map(e => `.${e}`);\r\n var extensionsList = extensionsWithDots.join(\",\");\r\n this.fileInput.accept = extensionsList;\r\n }\r\n }\r\n\r\n private checkIfBrowserCanTakeSnapshots(): Promise<boolean> {\r\n return new Promise((resolve) => {\r\n const mediaDevices = navigator.mediaDevices;\r\n if (mediaDevices == undefined || mediaDevices.enumerateDevices == undefined) {\r\n resolve(false);\r\n }\r\n mediaDevices.enumerateDevices()\r\n .then(devices => {\r\n var result = devices.some(device => device.kind == \"videoinput\");\r\n resolve(result);\r\n });\r\n });\r\n }\r\n\r\n private getFilesFromFileList(files: FileList) : File[] {\r\n var fileList: File[] = [];\r\n for (let index = 0; index < files.length; index++) {\r\n const file = files[index];\r\n fileList.push(file);\r\n }\r\n\r\n return fileList;\r\n }\r\n\r\n private handleUploadButton(element: HTMLInputElement): void {\r\n let files = this.getFilesFromFileList(element.files);\r\n\r\n this.filesSelected.emit(files);\r\n }\r\n\r\n private handleDragOver = (event: DragEvent) => \r\n {\r\n event.stopPropagation();\r\n event.preventDefault();\r\n event.dataTransfer.dropEffect = \"copy\";\r\n this.dropzone.classList.add(\"dropping\");\r\n };\r\n\r\n private hasInvalidExtensions(files: FileList): boolean{\r\n var hasInvalid = false;\r\n for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {\r\n const file = files[fileIndex];\r\n var regex = /(?:\\.([^.]+))?$/;\r\n const fileExtension = regex.exec(file.name)[1];\r\n if (fileExtension == undefined){\r\n hasInvalid = true;\r\n }\r\n\r\n if (this.allowedExtensions != undefined && !this.allowedExtensions.includes(fileExtension)){\r\n hasInvalid = true;\r\n }\r\n\r\n return hasInvalid;\r\n }\r\n }\r\n\r\n private handleDrop = (dropEvent: DragEvent) => {\r\n dropEvent.stopPropagation();\r\n dropEvent.preventDefault();\r\n const files = dropEvent.dataTransfer.files;\r\n\r\n if (this.hasInvalidExtensions(files)){\r\n return;\r\n }\r\n var fileList = this.getFilesFromFileList(files);\r\n this.filesSelected.emit(fileList);\r\n };\r\n\r\n private takeSnapshot(): void {\r\n this.takingPicture = true;\r\n navigator.mediaDevices.getUserMedia({video: true, audio: false})\r\n .then(stream => {\r\n stream\r\n this.videoPreview.srcObject = stream;\r\n this.videoPreview.play()\r\n .then(() => {\r\n this.videoSettings = stream.getVideoTracks()[0].getSettings();\r\n });\r\n })\r\n .catch(error => alert(error));\r\n }\r\n\r\n private applySnapshot(): void {\r\n var canvas = document.createElement(\"canvas\");\r\n const context = canvas.getContext(\"2d\");\r\n canvas.width = this.videoSettings.width;\r\n canvas.height = this.videoSettings.height;\r\n context.drawImage(this.videoPreview, 0, 0);\r\n canvas.toBlob(blob => {\r\n var file = new File([blob], \"image.jpeg\", {type:\"image/jpeg\"});\r\n this.takingPicture = false;\r\n \r\n var fileList = [file];\r\n this.filesSelected.emit(fileList)\r\n }, \"image/jpeg\", this.captureQuality);\r\n }\r\n \r\n render() {\r\n return (\r\n <Host\r\n ref={e => this.dropzone = e}\r\n class=\"dropzone\"\r\n onDragOver={this.handleDragOver}\r\n onDrop={this.handleDrop}\r\n onDragLeave={() => this.dropzone.classList.remove(\"dropping\")}\r\n >\r\n {!this.takingPicture &&\r\n [\r\n <p>{this.resx?.dragAndDropFile}</p>\r\n ,\r\n <p>- {this.resx?.or} -</p>\r\n ,\r\n <label class=\"upload-file\">\r\n <input\r\n type=\"file\"\r\n ref={el => this.fileInput = el}\r\n onChange={e => this.handleUploadButton(e.target as HTMLInputElement)}\r\n >\r\n </input>\r\n <span>\r\n <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\"><g><rect fill=\"none\" height=\"24\" width=\"24\"/></g><g><path d=\"M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z\"/></g></svg>\r\n </span>\r\n &nbsp;\r\n {this.resx?.uploadFile}\r\n </label>\r\n ,\r\n this.canTakeSnapshots &&\r\n [\r\n <p>- {this.resx?.or} -</p>\r\n ,\r\n <button\r\n onClick={() => this.takeSnapshot()}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><circle cx=\"12\" cy=\"12\" r=\"3.2\"/><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\"/></svg>\r\n {this.resx?.takePicture}\r\n </button>\r\n ]\r\n ]\r\n }\r\n {this.takingPicture &&\r\n <div class=\"video-preview\">\r\n <video ref={e => this.videoPreview = e} />\r\n <button\r\n onClick={() => this.applySnapshot()}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><circle cx=\"12\" cy=\"12\" r=\"3.2\"/><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\"/></svg>&nbsp;\r\n {this.resx?.capture}\r\n </button>\r\n </div>\r\n }\r\n </Host>\r\n );\r\n }\r\n\r\n}\r\n","export enum CornerType {\r\n \"nw\",\r\n \"ne\",\r\n \"se\",\r\n \"sw\",\r\n};","export function getMovementFromEvent(\r\n event: MouseEvent | TouchEvent,\r\n previousTouch: Touch\r\n) {\r\n let movementX = 0;\r\n let movementY = 0;\r\n if (event instanceof MouseEvent) {\r\n movementX = event.movementX;\r\n movementY = event.movementY;\r\n }\r\n if (typeof TouchEvent !== \"undefined\"){\r\n if (event instanceof TouchEvent) {\r\n let touch = event.touches[0];\r\n if (previousTouch != undefined) {\r\n movementX = touch.pageX - this.previousTouch.pageX;\r\n movementY = touch.pageY - this.previousTouch.pageY;\r\n }\r\n previousTouch = touch;\r\n }\r\n }\r\n return { movementX, movementY };\r\n }",":host {\r\n display: block;\r\n}\r\ncanvas {\r\n display: none;\r\n}\r\n.view{\r\n visibility: hidden;\r\n opacity: 0;\r\n height: 0;\r\n overflow: hidden;\r\n transition: all 300ms ease-in-out;\r\n &.visible{\r\n visibility: visible;\r\n opacity: 1;\r\n height: initial;\r\n overflow: visible;\r\n }\r\n .cropper{\r\n position: relative;\r\n width: 100%;\r\n img{\r\n width: 100%;\r\n display: block;\r\n margin: 0 auto;\r\n }\r\n .backdrop{\r\n backdrop-filter: saturate(0.5);\r\n backdrop-filter: brightness(0.5);\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n .crop{\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n outline: 2px dashed white;\r\n box-shadow: black 0 0 0px 2px;\r\n backdrop-filter: saturate(2);\r\n backdrop-filter: brightness(2);\r\n cursor: move;\r\n >div{\r\n width: 20px;\r\n height: 20px;\r\n background-color: white;\r\n border: 2px solid rgba(0,0,0,0.5);\r\n position: absolute;\r\n &.nw, &.ne{\r\n top: -17px;\r\n }\r\n &.ne, &.se{\r\n right: -17px;\r\n }\r\n &.se, &.sw{\r\n bottom: -17px;\r\n }\r\n &.sw, &.nw{\r\n left: -17px;\r\n }\r\n &.nw, &.se{\r\n cursor: nwse-resize;\r\n }\r\n &.ne, &.sw{\r\n cursor: nesw-resize;\r\n }\r\n }\r\n }\r\n }\r\n}\r\ndnn-modal{\r\n --max-width: 512px;\r\n}","import { Component, Host, h, State, Prop, Event, EventEmitter } from '@stencil/core';\r\nimport { CornerType } from './CornerType';\r\nimport { getMovementFromEvent } from \"../../utilities/mouseUtilities\";\r\n\r\n/**\r\n * Allows cropping an image in-browser with the option to enforce a specific final size.\r\n * All computation happens in the browser and the final image is emmited\r\n * in an event that has a data-url of the image.\r\n */\r\n@Component({\r\n tag: 'dnn-image-cropper',\r\n styleUrl: 'dnn-image-cropper.scss',\r\n shadow: true,\r\n})\r\nexport class DnnImageCropper {\r\n /** Sets the desired final image width. */\r\n @Prop() width: number = 600;\r\n\r\n /** Sets the desired final image height. */\r\n @Prop() height: number = 600;\r\n\r\n /** Can be used to customize controls text.\r\n * Some values support tokens, see default values for examples.\r\n */\r\n @Prop() resx: {\r\n capture: string;\r\n dragAndDropFile: string;\r\n or: string;\r\n takePicture: string;\r\n uploadFile: string;\r\n imageTooSmall: string;\r\n modalCloseText: string;\r\n } = {\r\n capture: \"Capture\",\r\n dragAndDropFile: \"Drag and drop an image\",\r\n or: \"or\",\r\n takePicture: \"Take a picture\",\r\n uploadFile: \"Upload an image\",\r\n 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.\",\r\n modalCloseText: \"Close\",\r\n }\r\n\r\n /** Sets the output quality of the corpped image (number between 0 and 1). */\r\n @Prop() quality: number = 0.8;\r\n\r\n /** When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry. */\r\n @Prop() preventUndersized: boolean = false;\r\n\r\n /** When the image crop changes, emits the dataurl for the new cropped image. */\r\n @Event() imageCropChanged: EventEmitter<string>;\r\n\r\n @State() view: IComponentInterfaces[\"View\"];\r\n \r\n private host: HTMLElement;\r\n private hasPictureView: HTMLDivElement;\r\n private noPictureView: HTMLDivElement;\r\n private canvas: HTMLCanvasElement;\r\n private image: HTMLImageElement;\r\n private crop: HTMLDivElement;\r\n private previousTouch: Touch;\r\n private imageTooSmallModal!: HTMLDnnModalElement;\r\n\r\n componentDidLoad() {\r\n requestAnimationFrame(() => {\r\n this.setView(\"noPictureView\");\r\n })\r\n }\r\n\r\n private setView(newView: IComponentInterfaces[\"View\"]){\r\n const views = this.host.shadowRoot.querySelectorAll(\".view\");\r\n views.forEach(v =>\r\n v.classList.remove(\"visible\"));\r\n switch (newView) {\r\n case \"noPictureView\":\r\n this.noPictureView.classList.add(\"visible\");\r\n break;\r\n case \"hasPictureView\":\r\n this.hasPictureView.classList.add(\"visible\");\r\n break;\r\n default:\r\n break;\r\n }\r\n this.view = newView;\r\n }\r\n\r\n private initCrop(){\r\n var wantedRatio = this.width / this.height;\r\n var imageRect = this.image.getBoundingClientRect();\r\n var imageRatio = imageRect.width / imageRect.height;\r\n \r\n if (wantedRatio > imageRatio){\r\n var wantedHeight = imageRect.width / wantedRatio;\r\n var diff = imageRect.height - wantedHeight;\r\n this.crop.style.top = Math.round(diff/2).toString() + \"px\";\r\n this.crop.style.height = Math.round(wantedHeight).toString() + \"px\";\r\n }\r\n else{\r\n var wantedWidth = imageRect.height * wantedRatio;\r\n var diff = imageRect.width - wantedWidth;\r\n this.crop.style.left = Math.round(diff/2).toString() + \"px\";\r\n this.crop.style.width = Math.round(wantedWidth).toString() + \"px\";\r\n }\r\n }\r\n\r\n private setImage(){\r\n this.image.addEventListener('load', () => {\r\n this.initCrop();\r\n this.emitImage();\r\n })\r\n this.image.src = this.canvas.toDataURL();\r\n }\r\n\r\n private handleNewFile(file: File): void {\r\n if (file.type.split('/')[0] != \"image\"){\r\n return;\r\n }\r\n \r\n var reader = new FileReader();\r\n reader.onload = readerLoadEvent => {\r\n var img = new Image();\r\n img.onload = () => {\r\n this.canvas.width = img.width;\r\n this.canvas.height = img.height;\r\n if (this.preventUndersized && (img.width < this.width || img.height< this.height)){\r\n this.imageTooSmallModal.show();\r\n return;\r\n }\r\n var ctx = this.canvas.getContext(\"2d\");\r\n ctx.drawImage(img,0,0);\r\n this.setView(\"hasPictureView\");\r\n this.setImage();\r\n }\r\n img.src = readerLoadEvent.target.result.toString();\r\n }\r\n reader.readAsDataURL(file);\r\n }\r\n\r\n private handleCropMouseDown = (event: MouseEvent | TouchEvent) => {\r\n event.stopPropagation();\r\n event.preventDefault();\r\n const element = event.target as HTMLElement;\r\n const className = element.classList[0];\r\n\r\n document.addEventListener(\"mouseup\", this.handleImageCropFinished, false);\r\n document.addEventListener(\"touchend\", this.handleImageCropFinished, false);\r\n switch (className) {\r\n case \"crop\":\r\n document.addEventListener(\"mousemove\", this.handleCropDrag, false);\r\n document.addEventListener(\"touchmove\", this.handleCropDrag, false)\r\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleCropDrag));\r\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleCropDrag));\r\n break;\r\n case \"nw\":\r\n document.addEventListener(\"mousemove\", this.handleNwMouseMove, false);\r\n document.addEventListener(\"touchmove\", this.handleNwMouseMove, false)\r\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNwMouseMove));\r\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNwMouseMove));\r\n break;\r\n case \"ne\":\r\n document.addEventListener(\"mousemove\", this.handleNeMouseMove, false);\r\n document.addEventListener(\"touchmove\", this.handleNeMouseMove, false)\r\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNeMouseMove));\r\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNeMouseMove));\r\n break\r\n case \"se\":\r\n document.addEventListener(\"mousemove\", this.handleSeMouseMove, false);\r\n document.addEventListener(\"touchmove\", this.handleSeMouseMove, false)\r\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSeMouseMove));\r\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSeMouseMove));\r\n break;\r\n case \"sw\":\r\n document.addEventListener(\"mousemove\", this.handleSwMouseMove, false);\r\n document.addEventListener(\"touchmove\", this.handleSwMouseMove, false)\r\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSwMouseMove));\r\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSwMouseMove));\r\n break;\r\n default:\r\n break;\r\n }\r\n };\r\n\r\n private handleImageCropFinished = (_ev: MouseEvent) => {\r\n this.emitImage();\r\n document.removeEventListener(\"mouseup\", this.handleImageCropFinished);\r\n this.previousTouch = undefined;\r\n }\r\n\r\n private emitImage() {\r\n var x = this.crop.offsetLeft / this.image.width * this.image.naturalWidth;\r\n var y = this.crop.offsetTop / this.image.height * this.image.naturalHeight;\r\n\r\n var cropRect = this.crop.getBoundingClientRect();\r\n var width = cropRect.width / this.image.width * this.image.naturalWidth;\r\n var height = cropRect.height / this.image.height * this.image.naturalHeight;\r\n\r\n if (x < 0)\r\n x = 0;\r\n if (x > this.image.naturalWidth)\r\n x = this.image.naturalWidth;\r\n if (y < 0)\r\n y = 0;\r\n if (y > this.image.naturalWidth)\r\n y = this.image.naturalWidth;\r\n if (width > this.image.naturalWidth)\r\n width = this.image.naturalWidth;\r\n if (height > this.image.naturalHeight)\r\n height = this.image.naturalHeight;\r\n\r\n var dataUrl = this.generateCroppedImage(x, y, width, height, this.width, this.height);\r\n this.imageCropChanged.emit(dataUrl);\r\n }\r\n\r\n private generateCroppedImage(x: number, y: number, width: number, height: number, desiredWidth: number, desiredHeight: number) {\r\n this.canvas.width = desiredWidth;\r\n this.canvas.height = desiredHeight;\r\n const context = this.canvas.getContext(\"2d\");\r\n context.clearRect(0, 0, desiredWidth, desiredHeight);\r\n context.drawImage(this.image, x, y, width, height, 0, 0, desiredWidth, desiredHeight);\r\n\r\n return this.canvas.toDataURL(\"image/jpeg\", this.quality);\r\n }\r\n\r\n private handleNwMouseMove = (event: MouseEvent | TouchEvent) => {\r\n this.handleCornerDrag(event, CornerType.nw);\r\n }\r\n\r\n private handleNeMouseMove = (event: MouseEvent | TouchEvent) => {\r\n this.handleCornerDrag(event, CornerType.ne);\r\n }\r\n\r\n private handleSeMouseMove = (event: MouseEvent | TouchEvent) => {\r\n this.handleCornerDrag(event, CornerType.se);\r\n }\r\n\r\n private handleSwMouseMove = (event: MouseEvent | TouchEvent) => {\r\n this.handleCornerDrag(event, CornerType.sw);\r\n }\r\n\r\n private handleCornerDrag = (event: MouseEvent | TouchEvent, corner: CornerType) => {\r\n if (!this.isMouseStillInTarget(event)){\r\n return;\r\n }\r\n \r\n let {left, top} = this.getCornerLeftTop(corner);\r\n let newWidth = 0;\r\n let newHeight = 0;\r\n let orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\r\n const wantedRatio = this.width / this.height;\r\n const cropRect = this.crop.getBoundingClientRect();\r\n const imageRect = this.image.getBoundingClientRect();\r\n let { movementX, movementY } = getMovementFromEvent(event, this.previousTouch);\r\n if (Math.abs(movementX) < Math.abs(movementY)){\r\n orientation = \"vertical\";\r\n }\r\n\r\n if (orientation == \"horizontal\"){\r\n switch (corner) {\r\n case CornerType.nw:\r\n case CornerType.sw:\r\n newWidth = cropRect.width - movementX;\r\n newHeight = newWidth / wantedRatio;\r\n break;\r\n case CornerType.ne:\r\n case CornerType.se:\r\n newWidth = cropRect.width + movementX;\r\n newHeight = newWidth / wantedRatio;\r\n break;\r\n default:\r\n break;\r\n }\r\n } else{\r\n switch (corner) {\r\n case CornerType.nw:\r\n case CornerType.ne:\r\n newHeight = cropRect.height - movementY;\r\n newWidth = newHeight * wantedRatio;\r\n break;\r\n case CornerType.se:\r\n case CornerType.sw:\r\n newHeight = cropRect.height + movementY;\r\n newWidth = newHeight * wantedRatio;\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n switch (corner) {\r\n case CornerType.ne:\r\n case CornerType.nw:\r\n const topOffset = cropRect.height - newHeight;\r\n top = this.crop.offsetTop + topOffset;\r\n default:\r\n break;\r\n }\r\n\r\n switch (corner) {\r\n case CornerType.nw:\r\n case CornerType.sw:\r\n const leftOffset = cropRect.width - newWidth;\r\n left = this.crop.offsetLeft + leftOffset;\r\n if (left < 0) left = 0;\r\n if (left > imageRect.width) left = imageRect.width;\r\n if (top < 0) top = 0;\r\n if (top > imageRect.height) top = imageRect.height;\r\n if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\r\n if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\r\n break;\r\n case CornerType.ne:\r\n case CornerType.se:\r\n if (top < 0) top = 0;\r\n if (top > imageRect.height) top = imageRect.height;\r\n if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\r\n if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\r\n break;\r\n default:\r\n break;\r\n }\r\n\r\n if (newWidth / newHeight != wantedRatio){\r\n return;\r\n }\r\n\r\n if (this.preventUndersized){\r\n const zoomRatio = this.image.width / this.image.naturalWidth;\r\n if (newWidth / zoomRatio < this.width || newHeight / zoomRatio < this.height){\r\n return;\r\n }\r\n }\r\n\r\n switch (corner) {\r\n case CornerType.ne:\r\n this.crop.style.top = `${top}px`;\r\n this.crop.style.width = `${newWidth}px`;\r\n this.crop.style.height = `${newHeight}px`;\r\n break;\r\n case CornerType.nw:\r\n this.crop.style.left = `${left}px`;\r\n this.crop.style.top = `${top}px`;\r\n this.crop.style.width = `${newWidth}px`;\r\n this.crop.style.height = `${newHeight}px`;\r\n break;\r\n case CornerType.se:\r\n this.crop.style.width = `${newWidth}px`;\r\n this.crop.style.height = `${newHeight}px`;\r\n break;\r\n case CornerType.sw:\r\n this.crop.style.left = `${left}px`;\r\n this.crop.style.width = `${newWidth}px`;\r\n this.crop.style.height = `${newHeight}px`;\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n private getCornerLeftTop(corner: CornerType): { left: number; top: number; } {\r\n let left = 0;\r\n let top = 0;\r\n switch (corner) {\r\n case CornerType.se:\r\n left = this.crop.offsetLeft;\r\n top = this.crop.offsetTop;\r\n break;\r\n case CornerType.sw:\r\n top = this.crop.offsetTop;\r\n break;\r\n default:\r\n break;\r\n }\r\n return {top, left};\r\n }\r\n\r\n private handleCropDrag = (ev: MouseEvent | TouchEvent) => {\r\n if (!this.isMouseStillInTarget(ev)){\r\n return;\r\n }\r\n let {movementX, movementY} = getMovementFromEvent(ev, this.previousTouch);\r\n let newLeft = this.crop.offsetLeft + movementX;\r\n let newTop = this.crop.offsetTop + movementY;\r\n var imageRect = this.image.getBoundingClientRect();\r\n var cropRect = this.crop.getBoundingClientRect();\r\n if (newLeft < 0){\r\n newLeft = 0;\r\n }\r\n if (newTop < 0){\r\n newTop = 0;\r\n }\r\n if (newLeft + cropRect.width > imageRect.width){\r\n newLeft = this.crop.offsetLeft;\r\n }\r\n if (newTop + cropRect.height > imageRect.height){\r\n newTop = this.crop.offsetTop;\r\n }\r\n this.crop.style.left = newLeft + \"px\";\r\n this.crop.style.top = newTop + \"px\";\r\n };\r\n\r\n private isMouseStillInTarget(event: MouseEvent | TouchEvent) {\r\n var inside = false;\r\n let mouseX: number;\r\n let mouseY: number;\r\n const imageRect = this.image.getBoundingClientRect();\r\n \r\n if (event instanceof MouseEvent){\r\n mouseX = event.clientX;\r\n mouseY = event.clientY;\r\n }\r\n\r\n if (typeof TouchEvent !== \"undefined\"){\r\n if (event instanceof TouchEvent){\r\n var touch = event.touches[0];\r\n mouseX = touch.clientX;\r\n mouseY = touch.clientY;\r\n }\r\n }\r\n \r\n if (\r\n mouseX >= imageRect.x &&\r\n mouseY >= imageRect.y &&\r\n mouseX <= imageRect.left + imageRect.width &&\r\n mouseY <= imageRect.top + imageRect.height)\r\n {\r\n inside = true;\r\n }\r\n\r\n var corners = this.crop.querySelectorAll(\"div\");\r\n corners.forEach(corner =>{\r\n var cornerRect = corner.getBoundingClientRect();\r\n if (\r\n mouseX >= cornerRect.x &&\r\n mouseY >= cornerRect.y &&\r\n mouseX <= cornerRect.left + cornerRect.width &&\r\n mouseY <= cornerRect.top + cornerRect.height)\r\n {\r\n inside = true;\r\n }\r\n })\r\n\r\n return inside;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host ref={el => this.host = el}>\r\n <canvas ref={el => this.canvas = el} />\r\n <div\r\n class=\"view\"\r\n ref={el => this.hasPictureView = el}\r\n >\r\n <div class=\"cropper\">\r\n <img ref={el => this.image = el} />\r\n <div class=\"backdrop\" />\r\n <div\r\n class=\"crop\"\r\n ref={e => this.crop = e}\r\n onMouseDown={this.handleCropMouseDown}\r\n onTouchStart={this.handleCropMouseDown}\r\n >\r\n <div class=\"nw\" />\r\n <div class=\"ne\" />\r\n <div class=\"se\" />\r\n <div class=\"sw\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n class=\"view\"\r\n ref={el => this.noPictureView = el}>\r\n <dnn-dropzone\r\n allowCameraMode\r\n onFilesSelected={e => this.handleNewFile(e.detail[0])}\r\n resx={\r\n {\r\n capture: this.resx.capture,\r\n dragAndDropFile: this.resx.dragAndDropFile,\r\n or: this.resx.or,\r\n takePicture: this.resx.takePicture,\r\n uploadFile: this.resx.uploadFile,\r\n }\r\n }\r\n />\r\n </div>\r\n <dnn-modal ref={el => this.imageTooSmallModal = el} close-text={this.resx.modalCloseText}>\r\n <p>{this.resx.imageTooSmall.replace(\"{width}\", this.width.toString()).replace(\"{height}\", this.height.toString())}</p>\r\n </dnn-modal>\r\n </Host>\r\n );\r\n }\r\n}\r\n\r\ninterface IComponentInterfaces\r\n{\r\n View: \"noPictureView\" | \"takingPictureView\" | \"hasPictureView\" | \"hasCroppedPictureView\";\r\n}",":host {\r\n /**\r\n * @prop --max-width: The maximum width of the module.\r\n */\r\n display: block;\r\n .overlay{\r\n background-color: rgba(0,0,0,0.5);\r\n position: fixed;\r\n top:0;\r\n left:0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 1;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n backdrop-filter: blur(2px);\r\n transition: all 300ms ease-in-out;\r\n visibility: hidden;\r\n opacity: 0;\r\n .modal{\r\n max-width: var(--max-width, 1200px);\r\n background-color: white;\r\n padding: 30px;\r\n transform: scale(2);\r\n transition: all 300ms ease-in-out;\r\n z-index: 2;\r\n position: relative;\r\n margin: 10%;\r\n max-height: 80%;\r\n border-radius: var(--dnn-controls-radius, 5px);\r\n box-shadow: 10px 10px 20px 0 rgba(0,0,0,0.5);\r\n display: block;\r\n .close{\r\n position: absolute;\r\n background-color:white;\r\n border: 2px solid white;\r\n border-radius: 50%;\r\n padding: 0;\r\n margin: 0;\r\n top: -12px;\r\n right: -12px;\r\n outline: none;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n &:focus, &:hover{\r\n box-shadow: 0 0 2px 2px var(--dnn-color-primary, blue);\r\n }\r\n svg{\r\n width: 24px;\r\n height: 24px;\r\n color: grey;\r\n }\r\n }\r\n }\r\n &.visible{\r\n visibility: visible;\r\n opacity: 1;\r\n .modal{\r\n transform: scale(1);\r\n box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.5);\r\n display: block;\r\n }\r\n }\r\n }\r\n}","import { Component, Element, Host, h, Prop, Event, EventEmitter, Method, State } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dnn-modal',\r\n styleUrl: 'dnn-modal.scss',\r\n shadow: true\r\n})\r\nexport class DnnModal {\r\n \r\n @Element() el!: HTMLDnnModalElement;\r\n \r\n /**\r\n * Pass false to remove the backdrop click auto-dismiss feature.\r\n */\r\n @Prop() backdropDismiss: boolean = true;\r\n\r\n /**\r\n * Optionally pass the aria-label text for the close button.\r\n * Defaults to \"Close modal\" if not provided.\r\n */\r\n @Prop() closeText?: string = \"Close modal\";\r\n\r\n /**\r\n * Optionally you can pass false to not show the close button.\r\n * If you decide to do so, you should either not also prevent dismissal by clicking the backdrop\r\n * or provide your own dismissal logic in the modal content.\r\n */\r\n @Prop() showCloseButton?: boolean = true;\r\n\r\n @State() visible: boolean = false;\r\n\r\n /**\r\n * Shows the modal\r\n */\r\n @Method()\r\n async show() {\r\n this.visible = true;\r\n }\r\n\r\n /**\r\n * Hides the modal\r\n */\r\n @Method()\r\n async hide() {\r\n this.visible = false;\r\n }\r\n\r\n /**\r\n * Fires when the modal is dismissed.\r\n */\r\n @Event() dismissed!: EventEmitter;\r\n\r\n private handleDismiss(){\r\n this.visible = false;\r\n this.dismissed.emit();\r\n }\r\n\r\n private handleBackdropClick(e: MouseEvent): void {\r\n const element = (e.target as HTMLElement);\r\n if (element.id === \"backdrop\" && this.backdropDismiss){\r\n this.handleDismiss();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div id=\"backdrop\"\r\n class={this.visible ? 'overlay visible' : 'overlay'}\r\n onClick={e => this.handleBackdropClick(e)}\r\n >\r\n <div class=\"modal\">\r\n {this.showCloseButton &&\r\n <button\r\n class=\"close\"\r\n aria-label={this.closeText}\r\n onClick={() => this.handleDismiss()}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><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\"/></svg>\r\n </button>\r\n }\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n position: relative;\r\n display: flex;\r\n justify-content: space-between;\r\n --background-color: transparent;\r\n --color: #333;\r\n --border-size: 1px;\r\n --border-color: grey;\r\n --border-active-color: black;\r\n --border-radius: var(--dnn-controls-radius, 5px);\r\n --padding: var(--dnn-controls-padding, 5px);\r\n --focus-color: var(--dnn-color-primary, blue);\r\n input {\r\n width:100%;\r\n border: var(--border-size) solid var(--border-color);\r\n outline: none;\r\n border-radius: var(--border-radius);\r\n padding: var(--padding);\r\n padding-right: 32px;\r\n transition: all 300ms ease-in-out;\r\n &:focus, &:hover{\r\n outline: none;\r\n box-shadow: 0 0 2px 2px var(--focus-color);\r\n }\r\n }\r\n svg{\r\n position: absolute;\r\n top:0;\r\n right:0;\r\n height: 100%;\r\n transform: scale(0.7);\r\n fill: var(--color);\r\n outline: var(--color);\r\n color: var(--color);\r\n transition: all 300ms ease-in-out;\r\n }\r\n button{\r\n background: transparent;\r\n border: 0;\r\n margin: 0;\r\n padding: 0;\r\n &:focus, &:hover{\r\n svg{\r\n fill: var(--focus-color);\r\n outline: var(--focus-color);\r\n color: var(--focus-color);\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Host, h, Event, EventEmitter, Watch, Prop } from '@stencil/core';\r\nimport { Debounce } from '../../utilities/debounce';\r\n@Component({\r\n tag: 'dnn-searchbox',\r\n styleUrl: 'dnn-searchbox.scss',\r\n shadow: true\r\n})\r\nexport class DnnSearchbox {\r\n\r\n /**\r\n * Sets the field placeholder text.\r\n */\r\n @Prop() placeholder?: string = \"\";\r\n\r\n /**\r\n * Debounces the queryChanged by 500ms.\r\n */\r\n @Prop() debounced: boolean = true;\r\n\r\n /** Sets the query */\r\n @Prop({mutable: true}) query: string = \"\";\r\n\r\n /**\r\n * Fires up each time the search query changes.\r\n * The data passed is the new query.\r\n */\r\n @Event() queryChanged: EventEmitter;\r\n\r\n @Watch('query')\r\n fireQueryChanged(){\r\n if (this.debounced){\r\n this.debouncedHandleQueryChanged();\r\n }\r\n else{\r\n this.handleQueryChanged();\r\n }\r\n }\r\n \r\n private handleQueryChanged(){\r\n this.queryChanged.emit(this.query);\r\n }\r\n\r\n @Debounce(500)\r\n private debouncedHandleQueryChanged(){\r\n this.handleQueryChanged();\r\n }\r\n \r\n\r\n render() {\r\n return (\r\n <Host>\r\n <input type=\"text\" value={this.query}\r\n placeholder={this.placeholder}\r\n onInput={e => this.query = (e.target as HTMLInputElement).value}\r\n />\r\n {this.query !== \"\" ?\r\n <button class=\"svg clear\"\r\n onClick={() => this.query = \"\"}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><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\"/></svg>\r\n </button>\r\n :\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><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\"/></svg>\r\n }\r\n </Host>\r\n );\r\n }\r\n\r\n}\r\n",":host {\r\n /**\r\n * @prop --color: Normal Color of the inactive sort icon.\r\n * @prop --color-sorted: Color of the sorted sort icon.\r\n * @prop --color-hover: Color of the icons when hovered.\r\n */\r\n display: inline-block;\r\n}\r\n\r\nbutton {\r\n outline: none;\r\n border: none;\r\n margin: 0;\r\n padding: 0;\r\n background-color: transparent;\r\n outline: none;\r\n display: inline-block;\r\n line-height: 1em;\r\n position: relative;\r\n top: 0.25em;\r\n svg{\r\n height: 1.5em;\r\n width: auto;\r\n fill: var(--color, #888);\r\n }\r\n &.active{\r\n svg{\r\n fill: var(--color-sorted, var(--dnn-color-primary, rgb(2,139,255)));\r\n }\r\n }\r\n &:hover, &:focus{\r\n svg{\r\n fill: var(--color-hover, var(--dnn-color-primary-light, #36a1ff));\r\n }\r\n }\r\n}","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dnn-sort-icon',\r\n styleUrl: 'dnn-sort-icon.scss',\r\n shadow: true\r\n})\r\nexport class DnnSortIcon {\r\n /** Defines the current sort direction */\r\n @Prop() sortDirection: \"asc\" | \"desc\" | \"none\" = \"none\";\r\n\r\n /** Emitted when the sort is changed. */\r\n @Event() sortChanged!: EventEmitter<\"asc\"|\"desc\"|\"none\">;\r\n \r\n private changeSort(): void {\r\n switch (this.sortDirection) {\r\n case \"asc\":\r\n this.sortDirection = \"desc\";\r\n break;\r\n case \"desc\":\r\n this.sortDirection = \"asc\";\r\n break;\r\n case \"none\":\r\n this.sortDirection = \"asc\";\r\n break;\r\n default:\r\n break;\r\n }\r\n\r\n this.sortChanged.emit(this.sortDirection);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button\r\n class={{\"active\": this.sortDirection != \"none\"}}\r\n onClick={() => this.changeSort()}\r\n >\r\n {this.sortDirection == \"none\" &&\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 7 H 12 L 6 0 Z M 0 9 H 12 L 6 16 Z\"></path></svg>\r\n }\r\n {this.sortDirection == \"asc\" &&\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 7 H 12 L 6 0 Z\"></path></svg>\r\n }\r\n {this.sortDirection == \"desc\" &&\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 9 H 12 L 6 16 Z\"></path></svg>\r\n }\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n",null,"import { Component, Host, h, Prop, State, Method } from \"@stencil/core\";\r\n\r\n/** Represents a single tab and must be used inside a dnn-tabs element. */\r\n@Component({\r\n tag: 'dnn-tab',\r\n styleUrl: 'dnn-tab.scss',\r\n shadow: true,\r\n})\r\nexport class DnnTab {\r\n /** Defines the tab title. */\r\n @Prop() tabTitle!: string;\r\n\r\n @State() visible: boolean = false;\r\n\r\n /** Shows the tab. */\r\n @Method()\r\n async show(){\r\n this.visible = true;\r\n }\r\n\r\n /** Hides the modal */\r\n @Method()\r\n async hide(){\r\n this.visible = false;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n {this.visible &&\r\n <slot></slot>\r\n }\r\n </Host>\r\n );\r\n }\r\n}",":host {\r\n /**\r\n * @prop --color-background: The color of the inactive tabs.\r\n * @prop --color-text: The color of the text for inactive tabs.\r\n * @prop --color-visible: The color of the active tab.\r\n * @prop --color-visible-text: The color of the text for the active tab.\r\n * @prop --color-focus: outline color when hovering or pre-selecting a tab.\r\n */\r\n display: block;\r\n --color-background: var(--dnn-color-secondary-dark, lightgray);\r\n --color-text: var(--dnn-color-secondary-contrast, #333);\r\n --color-visible: var(--dnn-color-primary, #3792ED);\r\n --color-visible-text: var(--dnn-color-primary-contrast, #FFF);\r\n --color-focus: var(--dnn-color-primary, #3792ed);\r\n }\r\n\r\n .tabTitles{\r\n display: flex;\r\n background-color: var(--color-background);\r\n color: var(--color-text);\r\n button{\r\n padding: 0.5rem 1rem;\r\n border: 0;\r\n margin: 0;\r\n background-color: transparent;\r\n &.visible{\r\n background-color: var(--color-visible);\r\n color: var(--color-bisible-text);\r\n }\r\n &:focus, &:hover{\r\n outline: none;\r\n box-shadow: 0 0 2px 2px var(--color-focus);\r\n }\r\n }\r\n }\r\n\r\n .currentTab{\r\n border: 1px solid var(--color-background);\r\n padding: 1rem;\r\n }","import { Component, Host, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: 'dnn-tabs',\r\n styleUrl: 'dnn-tabs.scss',\r\n shadow: true,\r\n})\r\nexport class DnnTabs {\r\n private component: HTMLElement;\r\n\r\n @State() tabTitles: string[] = [];\r\n @State() selectedTabTitle: string = \"\";\r\n\r\n componentDidLoad(){\r\n requestAnimationFrame(() => {\r\n this.updateTitles();\r\n this.showFirstTab();\r\n });\r\n }\r\n\r\n private getTabs() {\r\n return this.component.shadowRoot.querySelector(\"slot\").assignedElements() as HTMLDnnTabElement[];\r\n }\r\n\r\n private updateTitles(){\r\n const tabs = this.getTabs();\r\n tabs.forEach(tab => this.tabTitles = [...this.tabTitles, tab.tabTitle]);\r\n }\r\n\r\n private showFirstTab(){\r\n const tab = this.getTabs()[0];\r\n tab.show();\r\n this.selectedTabTitle = tab.tabTitle;\r\n }\r\n\r\n private showTab(tabTitle: string) {\r\n const tabs = this.getTabs();\r\n tabs.forEach(tab => {\r\n if (tab.tabTitle == tabTitle){\r\n tab.show();\r\n return;\r\n }\r\n\r\n tab.hide();\r\n });\r\n this.selectedTabTitle = tabTitle;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host ref={el => this.component = el}>\r\n <div class=\"tabTitles\">\r\n {this.tabTitles.map(tabTitle =>\r\n <button\r\n class={this.selectedTabTitle == tabTitle ? \"visible\": \"\"}\r\n onClick={() => this.showTab(tabTitle)}\r\n >\r\n {tabTitle}\r\n </button>\r\n )}\r\n </div>\r\n <div class=\"currentTab\">\r\n <slot></slot>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}",":host {\r\n /**\r\n * @prop --background: Background of the toggle.\r\n * @prop --background-checked: Background of the toggle when checked.\r\n * @prop --handle-background: Background of the handle.\r\n * @prop --handle-background-checked: Background of the handle when checked.\r\n * @prop --border-radius: The radius of the background borders.\r\n * @prop --handle-border-radius: The radius of the handle.\r\n */\r\n\r\n display: inline-block;\r\n outline: none;\r\n cursor: pointer;\r\n}\r\n\r\nbutton {\r\n height: 1.5em;\r\n width: 2.5em;\r\n outline: none;\r\n background-color: var(--background, #888);\r\n border: 0;\r\n border-radius: var(--border-radius, var(--dnn-controls-radius, 0.75em));\r\n padding: 0.1em;\r\n position: relative;\r\n margin: 0;\r\n transition: background-color 300ms ease-in-out;\r\n position: relative;\r\n cursor: pointer;\r\n &:hover, &:focus{\r\n box-shadow: 0 0 2px 2px var(--dnn-color-primary);\r\n }\r\n &.checked{\r\n background-color: var(--background-checked, var(--dnn-color-primary, blue));\r\n .handle{\r\n left: calc(1em + 4px);\r\n }\r\n }\r\n &:disabled{\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n box-shadow: none;\r\n }\r\n .handle{\r\n transition: all 300ms ease-in-out;\r\n background-color:white;\r\n width: 1em;\r\n height: 1em;\r\n border-radius: var(--dnn-controls-radius, 50%);\r\n position: absolute;\r\n top: calc(50% - 0.5em);\r\n left: 2px;\r\n }\r\n}","import { Component, h, Element, Prop, Event, EventEmitter, Watch, Host } from \"@stencil/core\";\r\nimport { DnnToggleChangeEventDetail } from \"./toggle-interface\";\r\n\r\n\r\n@Component({\r\n tag: \"dnn-toggle\",\r\n styleUrl: \"dnn-toggle.scss\",\r\n shadow: true\r\n})\r\nexport class DnnToggle {\r\n\r\n @Element() element: HTMLDnnToggleElement;\r\n\r\n /** If 'true' the toggle is checked (on). */\r\n @Prop({mutable: true}) checked = false;\r\n\r\n /** If 'true' the toggle is not be interacted with. */\r\n @Prop() disabled = false;\r\n\r\n /** Fires when the toggle changed */\r\n @Event() checkChanged!: EventEmitter<DnnToggleChangeEventDetail>;\r\n\r\n @Watch(\"checked\")\r\n checkedChanged(isChecked: boolean){\r\n this.checkChanged.emit({checked: isChecked});\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button disabled={this.disabled} class={{'checked': this.checked}}\r\n onClick={() => {\r\n if (!this.disabled) {\r\n this.checked = !this.checked;\r\n }\r\n }}\r\n >\r\n <div class=\"handle\"></div>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: flex;\r\n overflow: visible;\r\n}\r\n.expander{\r\n width: 24px;\r\n height: 24px;\r\n button{\r\n transition: all 150ms ease-in-out;\r\n background-color:transparent;\r\n border: none;\r\n padding: 0;\r\n margin: 0;\r\n height: 1em;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n cursor: pointer;\r\n position: relative;\r\n top: 2px;\r\n svg{\r\n :first-child{\r\n transition: all 150ms ease-in-out;\r\n fill: white;\r\n stroke: black\r\n }\r\n }\r\n }\r\n &.expanded{\r\n button{\r\n transform: rotate(45deg);\r\n svg{\r\n :first-child{\r\n fill: black;\r\n stroke: black;\r\n }\r\n }\r\n }\r\n }\r\n}\r\ndiv.item{\r\n .item-slot{\r\n display: flex;\r\n align-items: center;\r\n gap: 0.25em;\r\n }\r\n div.children{\r\n overflow: hidden;\r\n height:0;\r\n transition: all 150ms ease-in-out;\r\n }\r\n}","import { Component, Host, h, Prop, State, Element, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dnn-treeview-item',\r\n styleUrl: 'dnn-treeview-item.scss',\r\n shadow: true,\r\n})\r\nexport class DnnTreeviewItem {\r\n \r\n private expander!: HTMLDivElement;\r\n\r\n @Element() el!: HTMLDnnTreeviewItemElement;\r\n \r\n /** Defines if the current node is expanded */\r\n @Prop({mutable: true}) expanded: boolean = false;\r\n\r\n /** Fires when the user expands a node. */\r\n @Event({bubbles: false}) userExpanded: EventEmitter<void>;\r\n\r\n /** Fires when the user collapses a node. */\r\n @Event({bubbles: false}) userCollapsed: EventEmitter<void>;\r\n\r\n @State() hasChildren: boolean = false;\r\n \r\n private childrenElement!: HTMLDivElement;\r\n private collapsible!: HTMLDnnCollapsibleElement;\r\n\r\n componentDidLoad() {\r\n requestAnimationFrame(() => {\r\n const children = this.childrenElement.children[0] as HTMLSlotElement;\r\n const count = children.assignedElements().length\r\n if (count > 0){\r\n this.hasChildren = true;\r\n }\r\n if (this.expanded){\r\n this.expander.classList.add(\"expanded\");\r\n this.collapsible.expanded = false;\r\n setTimeout(() => {\r\n this.collapsible.expanded = true;\r\n }, 300);\r\n }\r\n });\r\n }\r\n\r\n private toggleCollapse(): void {\r\n this.expanded = !this.expanded;\r\n if (this.expanded){\r\n this.expander.classList.add(\"expanded\");\r\n this.userExpanded.emit();\r\n return;\r\n }\r\n\r\n this.expander.classList.remove(\"expanded\");\r\n this.userCollapsed.emit();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class=\"expander\" ref={el => this.expander = el}>\r\n {this.hasChildren &&\r\n <button\r\n onClick={() => this.toggleCollapse()}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M10 17l5-5-5-5v10z\"/><path d=\"M0 24V0h24v24H0z\" fill=\"none\"/></svg>\r\n </button>\r\n }\r\n </div>\r\n <div class=\"item\">\r\n <div class=\"item-slot\">\r\n <slot></slot>\r\n </div>\r\n <dnn-collapsible ref={el => this.collapsible = el} expanded={this.expanded}>\r\n <div ref={el => this.childrenElement = el}>\r\n <slot name=\"children\"></slot>\r\n </div>\r\n </dnn-collapsible>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n\r\nexport interface ExpandedToggledEvent{\r\n state: \"expanded\" | \"collapsed\";\r\n height: number;\r\n}",":host {\r\n display: block;\r\n\r\n /** Defines the menu background color. */\r\n --background-color: var(--dnn-color-primary-contrast, white);\r\n\r\n /** A color that contrasts well over the background color. */\r\n --foreground-color: var(--dnn-color-primary, blue);\r\n\r\n /** The color of the text. */\r\n --text-color: #222;\r\n}\r\n\r\n.menu-container{\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n background-color: var(--background-color);\r\n color: var(--text-color);\r\n .menu{\r\n margin: 0.5em;\r\n display: flex;\r\n gap: 1em;\r\n justify-content: flex-start;\r\n align-items: center;\r\n white-space: nowrap;\r\n width: 100%;\r\n }\r\n .overflow {\r\n margin-left: auto;\r\n position: relative;\r\n button{\r\n cursor: pointer;\r\n svg{\r\n fill: var(--foreground-color);\r\n }\r\n padding: 0;\r\n margin: 0;\r\n background-color: transparent;\r\n border: none;\r\n }\r\n .dropdown{\r\n position:absolute;\r\n display: flex;\r\n flex-direction: column;\r\n white-space: nowrap;\r\n right: 0;\r\n transition: 100ms ease-in-out;\r\n height: 0;\r\n overflow: hidden;\r\n &.visible{\r\n padding: 1em;\r\n gap: 0.5em;\r\n background-color: var(--background-color);\r\n box-shadow: 2px 2px 4px rgba(0,0,0,0.7);\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Element, Host, h, State } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dnn-vertical-overflow-menu',\r\n styleUrl: 'dnn-vertical-overflow-menu.scss',\r\n shadow: true,\r\n})\r\nexport class DnnVerticalOverflowMenu {\r\n\r\n @Element() element!: HTMLDnnVerticalOverflowMenuElement;\r\n \r\n @State() showDropdownButton = false;\r\n @State() showDropdownMenu = false;\r\n\r\n private menu!: HTMLDivElement;\r\n private dropdown: HTMLDivElement;\r\n private resizeObserver: ResizeObserver;\r\n private button!: HTMLButtonElement;\r\n private previousMenuWidth = 0;\r\n\r\n componentDidRender() {\r\n requestAnimationFrame(() => {\r\n this.moveItemsToDropDownIfNecessery();\r\n this.resizeObserver = new ResizeObserver(entries => {\r\n for (let entry of entries){\r\n if (entry.contentRect.width < this.previousMenuWidth){\r\n this.moveItemsToDropDownIfNecessery()\r\n }\r\n if (this.previousMenuWidth > 0 && entry.contentRect.width > this.previousMenuWidth){\r\n this.moveItemsToMenuIfPossible();\r\n }\r\n this.previousMenuWidth = entry.contentRect.width;\r\n }\r\n });\r\n this.resizeObserver.observe(this.element);\r\n });\r\n }\r\n\r\n private moveItemsToDropDownIfNecessery(){\r\n const menuItems = Array.from(this.menu.querySelector(\"slot\").assignedElements());\r\n const availableWidth = this.menu.getBoundingClientRect().width;\r\n let neededWidth = parseFloat(getComputedStyle(this.element).fontSize)*2;\r\n menuItems.forEach(item => neededWidth += this.getFullWidth(item));\r\n neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);\r\n if (neededWidth > availableWidth){\r\n this.showDropdownButton = true;\r\n var lastItem = menuItems[menuItems.length -1];\r\n if (this.dropdown == undefined){\r\n return;\r\n }\r\n lastItem.slot = \"dropdown\";\r\n this.moveItemsToDropDownIfNecessery();\r\n }\r\n }\r\n \r\n private moveItemsToMenuIfPossible(){\r\n if (this.dropdown == undefined || !this.dropdown.hasChildNodes()){\r\n return;\r\n }\r\n const menuItems = Array.from(this.menu.querySelector(\"slot\").assignedElements());\r\n const availableWidth = this.menu.getBoundingClientRect().width;\r\n let neededWidth = parseFloat(getComputedStyle(this.element).fontSize)*2;\r\n neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);\r\n menuItems.forEach(item => neededWidth += this.getFullWidth(item));\r\n const firstItem = this.dropdown.querySelector(\"slot\").assignedElements()[0];\r\n if (firstItem != undefined){\r\n neededWidth += this.getFullWidth(firstItem);\r\n }\r\n\r\n if (neededWidth < availableWidth){\r\n if (firstItem != undefined){\r\n firstItem.slot = \"\";\r\n }\r\n if(firstItem == undefined){\r\n this.dropdown.classList.remove(\"visible\");\r\n this.showDropdownMenu = false;\r\n this.showDropdownButton = false;\r\n }\r\n } \r\n }\r\n\r\n private getFullWidth(item: Element) {\r\n var width = item.getBoundingClientRect().width;\r\n var styles = getComputedStyle(item);\r\n width += parseFloat(styles.marginLeft);\r\n width += parseFloat(styles.marginRight);\r\n width += parseFloat(styles.paddingLeft);\r\n width += parseFloat(styles.paddingRight);\r\n return width;\r\n }\r\n\r\n private toggleOverflowMenu(): void {\r\n this.showDropdownMenu = !this.showDropdownMenu;\r\n if (this.showDropdownMenu){\r\n this.dropdown.classList.add(\"visible\");\r\n let contentHeight = 0;\r\n const items = Array.from(this.dropdown.querySelector(\"slot\").assignedElements());\r\n items.forEach(item => contentHeight += item.getBoundingClientRect().height);\r\n var emHeight = parseFloat(getComputedStyle(this.dropdown).fontSize) * 0.5;\r\n var additionalHeight = emHeight * (this.dropdown.children.length - 1);\r\n contentHeight += additionalHeight;\r\n this.dropdown.style.height = `${contentHeight}px`;\r\n const dismissMenu = (e: MouseEvent) => {\r\n const buttonRect = this.button.getBoundingClientRect();\r\n if (\r\n e.clientX < buttonRect.left ||\r\n e.clientX > buttonRect.right ||\r\n e.clientY < buttonRect.top ||\r\n e.clientY > buttonRect.bottom){\r\n this.toggleOverflowMenu();\r\n }\r\n document.removeEventListener(\"click\", dismissMenu);\r\n };\r\n setTimeout(() => {\r\n document.addEventListener(\"click\", dismissMenu, false);\r\n }, 100);\r\n }\r\n else{\r\n this.dropdown.classList.remove(\"visible\");\r\n this.dropdown.style.height = \"0px\";\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class=\"menu-container\">\r\n <div class=\"menu\" ref={el => this.menu = el}>\r\n <slot></slot>\r\n </div>\r\n {this.showDropdownButton &&\r\n <div class=\"overflow\">\r\n <button\r\n ref={el => this.button = el}\r\n class=\"icon\"\r\n onClick={() => this.toggleOverflowMenu()}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><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\"/></svg>\r\n </button>\r\n <div class=\"dropdown\" ref={el => this.dropdown = el}>\r\n <slot name=\"dropdown\"></slot>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: flex;\r\n align-items: stretch;\r\n margin: 0 auto;\r\n position: relative;\r\n\r\n /** @prop --left-pane-background-color: Allows customizing the left pane background-color */\r\n --left-pane-background-color: transparent;\r\n\r\n /** @prop --right-pane-background-color: Allows customizing the right pane background-color */\r\n --right-pane-background-color: transparent;\r\n}\r\n\r\nbutton{\r\n border: none;\r\n margin:0;\r\n padding:0;\r\n cursor: ew-resize;\r\n position: absolute;\r\n height: 100%;\r\n background-color: transparent;\r\n &.transition{\r\n transition: all 300ms ease-in-out;\r\n }\r\n}\r\n\r\n\r\n.pane{\r\n overflow-y: auto;\r\n &.transition{\r\n transition: all 300ms ease-in-out;\r\n }\r\n &.left{\r\n background-color: var(--left-pane-background-color);\r\n }\r\n &.right{\r\n background-color: var(--right-pane-background-color);\r\n flex-grow: 1;\r\n }\r\n}","import { Component, Host, h, Prop, Element, State, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { getMovementFromEvent } from \"../../utilities/mouseUtilities\";\r\n\r\n/**\r\n * @slot default - The split divider control you want to use.\r\n * @slot left - The content of the left pane.\r\n * @slot right - The content of the right pane.\r\n */\r\n@Component({\r\n tag: 'dnn-vertical-splitview',\r\n styleUrl: 'dnn-vertical-splitview.scss',\r\n shadow: true,\r\n})\r\nexport class DnnVerticalSplitview {\r\n\r\n /** The width of the splitter area. */\r\n @Prop() splitterWidth = 16;\r\n\r\n /** The percentage position of the splitter in the container. */\r\n @Prop() splitWidthPercentage = 30;\r\n \r\n private splitter!: HTMLButtonElement;\r\n\r\n /** Sets the width percentage of the divider */\r\n @Method()\r\n async setSplitWidthPercentage(newWidth: number) {\r\n const panes = this.element.shadowRoot.querySelectorAll(\".pane\");\r\n requestAnimationFrame(() => {\r\n panes.forEach(pane => pane.classList.add(\"transition\"));\r\n this.splitter.classList.add(\"transition\");\r\n requestAnimationFrame(() => {\r\n const fullWidth = this.element.getBoundingClientRect().width;\r\n let newLeft = fullWidth * newWidth / 100;\r\n if (newLeft < 0){\r\n newLeft = 0;\r\n }\r\n if (newLeft > fullWidth){\r\n newLeft = fullWidth;\r\n }\r\n this.leftWidth = newLeft;\r\n this.rightWidth = fullWidth - newLeft;\r\n setTimeout(() => {\r\n panes.forEach(pane => pane.classList.remove(\"transition\"));\r\n this.splitter.classList.remove(\"transition\");\r\n }, 300);\r\n });\r\n });\r\n }\r\n\r\n /** Gets the current divider position percentage. */\r\n @Method()\r\n async getSplitWidthPercentage(){\r\n const fullWidth = this.element.getBoundingClientRect().width;\r\n return this.leftWidth / fullWidth;\r\n }\r\n\r\n /** Fires when the width of the divider changes. */\r\n @Event() widthChanged: EventEmitter<number>;\r\n\r\n @State() leftWidth = 0;\r\n @State() rightWidth = 0;\r\n\r\n @Element() element : HTMLDnnVerticalSplitviewElement;\r\n \r\n componentDidLoad() {\r\n requestAnimationFrame(() => {\r\n const fullWidth = this.element.getBoundingClientRect().width;\r\n this.leftWidth = fullWidth * this.splitWidthPercentage / 100;\r\n this.rightWidth = fullWidth - this.leftWidth;\r\n this.widthChanged.emit(this.splitWidthPercentage);\r\n });\r\n }\r\n \r\n private previousTouch: Touch;\r\n\r\n private handleMouseDown(event: MouseEvent | TouchEvent) {\r\n event.preventDefault();\r\n const handleDrag = (ev: MouseEvent | TouchEvent) => {\r\n let {movementX} = getMovementFromEvent(ev, this.previousTouch);\r\n let fullWidth = this.element.getBoundingClientRect().width;\r\n let newLeft = this.leftWidth + movementX;\r\n if (newLeft < 0){\r\n newLeft = 0;\r\n }\r\n if (newLeft > fullWidth){\r\n newLeft = fullWidth;\r\n }\r\n this.leftWidth = newLeft;\r\n this.rightWidth = fullWidth - newLeft;\r\n }\r\n const handleDragFinished = () => {\r\n document.removeEventListener(\"mousemove\", handleDrag);\r\n document.removeEventListener(\"touchmove\", handleDrag);\r\n const fullWidth = this.element.getBoundingClientRect().width;\r\n const newPercentage = this.leftWidth / fullWidth * 100;\r\n this.widthChanged.emit(newPercentage);\r\n };\r\n document.addEventListener(\"mouseup\", handleDragFinished);\r\n document.addEventListener(\"touchend\", handleDragFinished);\r\n document.addEventListener(\"mousemove\", handleDrag);\r\n document.addEventListener(\"touchmove\", handleDrag);\r\n }\r\n\r\n private handleKeyDown(e: KeyboardEvent): void {\r\n let movementX = 0;\r\n switch (e.key) {\r\n case \"ArrowLeft\":\r\n movementX = -10;\r\n break;\r\n case \"ArrowRight\":\r\n movementX = 10;\r\n break;\r\n default:\r\n return;\r\n }\r\n if (e.shiftKey){\r\n movementX = movementX * 10;\r\n }\r\n const fullWidth = this.element.getBoundingClientRect().width;\r\n let newLeft = this.leftWidth + movementX;\r\n if (newLeft < 0){\r\n newLeft = 0;\r\n }\r\n if (newLeft > fullWidth){\r\n newLeft = fullWidth;\r\n }\r\n this.leftWidth = newLeft;\r\n this.rightWidth = fullWidth - this.leftWidth;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class=\"left pane\" style={{\r\n width: `${this.leftWidth}px`,\r\n }}>\r\n <slot name=\"left\"></slot>\r\n </div>\r\n <button\r\n onMouseDown={e => this.handleMouseDown(e)}\r\n onTouchStart={e => this.handleMouseDown(e)}\r\n onKeyDown={e => this.handleKeyDown(e)}\r\n ref={el => this.splitter = el}\r\n style={{\r\n minWidth: `${this.splitterWidth.toString()}px`,\r\n left: `${this.leftWidth - 2}px`,\r\n }}\r\n >\r\n <slot></slot>\r\n </button>\r\n <div\r\n class=\"right pane\"\r\n style={{\r\n width: `${this.rightWidth}px`,\r\n }}>\r\n <slot name=\"right\"></slot>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1
+ {"version":3,"sources":["src/components/dnn-button/dnn-button.scss?tag=dnn-button&encapsulation=shadow","src/components/dnn-button/dnn-button.tsx","src/components/dnn-checkbox/dnn-checkbox.scss?tag=dnn-checkbox&encapsulation=shadow","src/components/dnn-checkbox/dnn-checkbox.tsx","src/components/dnn-chevron/dnn-chevron.scss?tag=dnn-chevron&encapsulation=shadow","src/components/dnn-chevron/dnn-chevron.tsx","src/components/dnn-collapsible/dnn-collapsible.scss?tag=dnn-collapsible&encapsulation=shadow","src/components/dnn-collapsible/dnn-collapsible.tsx","src/utilities/colorInfo.ts","src/components/dnn-color-picker/dnn-color-picker.scss?tag=dnn-color-picker&encapsulation=shadow","src/components/dnn-color-picker/dnn-color-picker.tsx","src/components/dnn-dropzone/dnn-dropzone.scss?tag=dnn-dropzone&encapsulation=shadow","src/components/dnn-dropzone/dnn-dropzone.tsx","src/components/dnn-image-cropper/CornerType.ts","src/utilities/mouseUtilities.ts","src/components/dnn-image-cropper/dnn-image-cropper.scss?tag=dnn-image-cropper&encapsulation=shadow","src/components/dnn-image-cropper/dnn-image-cropper.tsx","src/components/dnn-modal/dnn-modal.scss?tag=dnn-modal&encapsulation=shadow","src/components/dnn-modal/dnn-modal.tsx","src/components/dnn-searchbox/dnn-searchbox.scss?tag=dnn-searchbox&encapsulation=shadow","src/components/dnn-searchbox/dnn-searchbox.tsx","src/components/dnn-sort-icon/dnn-sort-icon.scss?tag=dnn-sort-icon&encapsulation=shadow","src/components/dnn-sort-icon/dnn-sort-icon.tsx","src/components/dnn-tab/dnn-tab.scss?tag=dnn-tab&encapsulation=shadow","src/components/dnn-tab/dnn-tab.tsx","src/components/dnn-tabs/dnn-tabs.scss?tag=dnn-tabs&encapsulation=shadow","src/components/dnn-tabs/dnn-tabs.tsx","src/components/dnn-toggle/dnn-toggle.scss?tag=dnn-toggle&encapsulation=shadow","src/components/dnn-toggle/dnn-toggle.tsx","src/components/dnn-treeview-item/dnn-treeview-item.scss?tag=dnn-treeview-item&encapsulation=shadow","src/components/dnn-treeview-item/dnn-treeview-item.tsx","src/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.scss?tag=dnn-vertical-overflow-menu&encapsulation=shadow","src/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.tsx","src/components/dnn-vertical-splitview/dnn-vertical-splitview.scss?tag=dnn-vertical-splitview&encapsulation=shadow","src/components/dnn-vertical-splitview/dnn-vertical-splitview.tsx"],"names":["dnnButtonCss","DnnButton","hostRef","this","type","reversed","size","confirm","confirmYesText","confirmNoText","confirmMessage","disabled","modalVisible","prototype","componentDidLoad","el","classList","add","modal","shadowRoot","querySelector","handleConfirm","hide","confirmed","emit","handleCancel","canceled","handleClick","show","render","_this","h","Host","style","pointer-events","class","onClick","showCloseButton","backdropDismiss","display","justifyContent","margin","dnnCheckboxCss","DnnCheckbox","checked","useIntermediate","changeState","emitEvents","button","remove","undefined","checkedchange","ref","xmlns","height","viewBox","width","fill","d","enable-background","htmlFor","id","dnnChevronCss","DnnChevron","expandText","collapseText","expanded","handleExpandedChanged","newValue","changed","aria-label","dnnCollapsibleCss","DnnCollapsible","class_1","transitionDuration","handleHeightChanged","requestAnimationFrame","updateSize","container","maxHeight","scrollHeight","setTimeout","handledExpandedChanged","dnnCollapsibleHeightChanged","ColorInfo","_hue","_saturation","_lightness","Object","defineProperty","value","getRGB","red","setHSL","green","blue","r","getHex","g","b","parseInt","substr","brightness","chroma","Math","abs","saturation","quadrant","offset","bias","round","min","max","diff","s","l","hex","toString","length","dnnColorPickerCss","DnnColorPicker","color","colorBoxHeight","rgbDisplay","hslDisplay","hexDisplay","handleSaturationLightnessMouseDown","e","preventDefault","handleDragLightnessSaturation","window","addEventListener","handleSaturationLightnessMouseUp","rect","saturationLightnessBox","getBoundingClientRect","x","clientX","left","y","clientY","top","newColor","hue","currentColor","lightness","removeEventListener","handleHueMouseDown","handleDragHue","handleHueMouseUp","hueRange","handleComponentValueChange","channel","target","isNaN","handleHSLChange","component","h_1","handleSaturationLightnessKeyDown","shiftKey","key","handleHueKeyDown","colorChangedHandler","colorChanged","handeCurrentColorChanged","componentWillLoad","handleHexChange","setProperty","getDoublet","getContrast","contrastColor","valueString","toUpperCase","match","switchColorMode","element","backgroundColor","onMouseDown","bind","role","aria-valuemin","aria-valuemax","aria-valuetext","bottom","onKeyDown","boxShadow","aria-valuenow","step","onChange","__decorate","Debounce","dnnDropzoneCss","DnnDropzone","resx","dragAndDropFile","capture","or","takePicture","uploadFile","allowCameraMode","captureQuality","canTakeSnapshots","takingPicture","handleDragOver","event","stopPropagation","dataTransfer","dropEffect","dropzone","handleDrop","dropEvent","files","hasInvalidExtensions","fileList","getFilesFromFileList","filesSelected","checkIfBrowserCanTakeSnapshots","then","result","allowedExtensions","extensionsWithDots","map","extensionsList","join","fileInput","accept","Promise","resolve","mediaDevices","navigator","enumerateDevices","devices","some","device","kind","index","file","push","handleUploadButton","hasInvalid","fileIndex","regex","fileExtension","exec","name","includes","takeSnapshot","getUserMedia","video","audio","stream","videoPreview","srcObject","play","videoSettings","getVideoTracks","getSettings","catch","error","alert","applySnapshot","canvas","document","createElement","context","getContext","drawImage","toBlob","blob","File","onDragOver","onDrop","onDragLeave","_a","_b","_c","_d","cx","cy","_e","_f","CornerType","getMovementFromEvent","previousTouch","movementX","movementY","MouseEvent","TouchEvent","touch","touches","pageX","pageY","dnnImageCropperCss","DnnImageCropper","imageTooSmall","modalCloseText","quality","preventUndersized","handleCropMouseDown","className","handleImageCropFinished","handleCropDrag","handleNwMouseMove","handleNeMouseMove","handleSeMouseMove","handleSwMouseMove","_ev","emitImage","handleCornerDrag","nw","ne","se","sw","corner","isMouseStillInTarget","_g","getCornerLeftTop","newWidth","newHeight","orientation","wantedRatio","cropRect","crop","imageRect","image","_h","topOffset","offsetTop","leftOffset","offsetLeft","zoomRatio","naturalWidth","ev","newLeft","newTop","setView","newView","views","host","querySelectorAll","forEach","v","noPictureView","hasPictureView","view","initCrop","imageRatio","wantedHeight","wantedWidth","setImage","src","toDataURL","handleNewFile","split","reader","FileReader","onload","readerLoadEvent","img","Image","imageTooSmallModal","ctx","readAsDataURL","naturalHeight","dataUrl","generateCroppedImage","imageCropChanged","desiredWidth","desiredHeight","clearRect","inside","mouseX","mouseY","corners","cornerRect","onTouchStart","onFilesSelected","detail","close-text","replace","dnnModalCss","DnnModal","class_2","closeText","visible","handleDismiss","dismissed","handleBackdropClick","dnnSearchboxCss","DnnSearchbox","placeholder","debounced","query","fireQueryChanged","debouncedHandleQueryChanged","handleQueryChanged","queryChanged","onInput","dnnSortIconCss","DnnSortIcon","sortDirection","changeSort","sortChanged","active","dnnTabCss","DnnTab","class_3","dnnTabsCss","DnnTabs","tabTitles","selectedTabTitle","updateTitles","showFirstTab","getTabs","assignedElements","tabs","tab","__spreadArray","tabTitle","showTab","dnnToggleCss","DnnToggle","checkedChanged","isChecked","checkChanged","dnnTreeviewItemCss","DnnTreeviewItem","hasChildren","children","childrenElement","count","expander","collapsible","toggleCollapse","userExpanded","userCollapsed","dnnVerticalOverflowMenuCss","DnnVerticalOverflowMenu","showDropdownButton","showDropdownMenu","previousMenuWidth","componentDidRender","moveItemsToDropDownIfNecessery","resizeObserver","ResizeObserver","entries","_i","entries_1","entry","contentRect","moveItemsToMenuIfPossible","observe","menuItems","Array","from","menu","availableWidth","neededWidth","parseFloat","getComputedStyle","fontSize","item","getFullWidth","lastItem","dropdown","slot","hasChildNodes","firstItem","styles","marginLeft","marginRight","paddingLeft","paddingRight","toggleOverflowMenu","contentHeight_1","items","emHeight","additionalHeight","dismissMenu_1","buttonRect","right","dnnVerticalSplitviewCss","DnnVerticalSplitview","class_4","splitterWidth","splitWidthPercentage","leftWidth","rightWidth","setSplitWidthPercentage","panes","pane","splitter","fullWidth","getSplitWidthPercentage","widthChanged","handleMouseDown","handleDrag","handleDragFinished","newPercentage","handleKeyDown","minWidth"],"mappings":"2sDAAA,IAAMA,aAAe,sgECURC,UAAS,WALtB,SAAAA,EAAAC,wHAWUC,KAAAC,KAA6C,UAK7CD,KAAAE,SAAoB,MAKpBF,KAAAG,KAAsC,SAKtCH,KAAAI,QAAoB,MAKpBJ,KAAAK,eAA0B,MAK1BL,KAAAM,cAAyB,KAKzBN,KAAAO,eAA0B,iBAK1BP,KAAAQ,SAAoB,MAEnBR,KAAAS,aAAwB,MAqBjCX,EAAAY,UAAAC,iBAAA,WACEX,KAAKY,GAAGC,UAAUC,IAAId,KAAKC,MAE3B,GAAID,KAAKE,SAAS,CAChBF,KAAKY,GAAGC,UAAUC,IAAI,YAGxB,GAAId,KAAKG,OAAS,SAAS,CACzBH,KAAKY,GAAGC,UAAUC,IAAId,KAAKG,MAG7BH,KAAKe,MAAQf,KAAKY,GAAGI,WAAWC,cAAc,cAGxCnB,EAAAY,UAAAQ,cAAA,WACNlB,KAAKe,MAAMI,OACXnB,KAAKS,aAAe,MACpBT,KAAKoB,UAAUC,QAGTvB,EAAAY,UAAAY,aAAA,WACNtB,KAAKe,MAAMI,OACXnB,KAAKS,aAAe,MACpBT,KAAKuB,SAASF,QAGRvB,EAAAY,UAAAc,YAAA,WACN,GAAIxB,KAAKI,UAAYJ,KAAKS,aAAa,CACrCT,KAAKe,MAAMU,OACXzB,KAAKS,aAAe,OAIxBX,EAAAY,UAAAgB,OAAA,WAAA,IAAAC,EAAA3B,KACE,OACE4B,EAACC,KAAI,CAACrB,SAAUR,KAAKQ,SAAUsB,MAAO,CAACC,iBAAkB/B,KAAKQ,SAAW,OAAS,QAChFoB,EAAA,SAAA,CAAQI,MAAM,SAASC,QAAS,WAAM,OAAAN,EAAKH,eAAehB,SAAUR,KAAKQ,UACvEoB,EAAA,OAAA,OAED5B,KAAKI,SACFwB,EAAA,YAAA,CAAWM,gBAAiB,MAAOC,gBAAiB,OAClDP,EAAA,IAAA,KAAI5B,KAAKO,gBACTqB,EAAA,MAAA,CAAKE,MACH,CACEM,QAAS,OACTC,eAAgB,aAGlBT,EAAA,aAAA,CAAY3B,KAAK,UAAU6B,MAAO,CAACQ,OAAQ,OAAQL,QAAS,WAAM,OAAAN,EAAKT,kBAAkBlB,KAAKK,gBAC9FuB,EAAA,aAAA,CAAY3B,KAAK,YAAY6B,MAAO,CAACQ,OAAQ,OAAQL,QAAS,WAAM,OAAAN,EAAKL,iBAAiBtB,KAAKM,iJAjHzF,gCCVtB,IAAMiC,eAAiB,0fCOVC,YAAW,WALxB,SAAAA,EAAAzC,mFASyBC,KAAAyC,QAA+B,MAG9CzC,KAAA0C,gBAA2B,MAU3BF,EAAA9B,UAAAiC,YAAA,WACN,IAAK3C,KAAK0C,gBAAgB,CACxB1C,KAAKyC,SAAWzC,KAAKyC,QACrBzC,KAAK4C,aACL,OAEF,GAAI5C,KAAKyC,UAAY,KAAK,CACxBzC,KAAKyC,QAAU,MACfzC,KAAK6C,OAAOhC,UAAUiC,OAAO,aAC7B9C,KAAK4C,aACL,OAEF,GAAI5C,KAAKyC,UAAYM,UAAU,CAC7B/C,KAAKyC,QAAU,KACfzC,KAAK6C,OAAOhC,UAAUiC,OAAO,aAC7B9C,KAAK4C,aACL,OAEF,GAAI5C,KAAKyC,UAAY,MAAM,CACzBzC,KAAKyC,QAAUM,UACf/C,KAAK6C,OAAOhC,UAAUC,IAAI,aAC1Bd,KAAK4C,aACL,SAIIJ,EAAA9B,UAAAkC,WAAA,WACN5C,KAAKgD,cAAc3B,KAAKrB,KAAKyC,UAG/BD,EAAA9B,UAAAgB,OAAA,WAAA,IAAAC,EAAA3B,KACE,OACE4B,EAACC,KAAI,KACHD,EAAA,SAAA,CAAQI,MAAM,OAAOC,QAAS,WAAM,OAAAN,EAAKgB,eAAeM,IAAK,SAAArC,GAAM,OAAAe,EAAKkB,OAASjC,IAC9EZ,KAAKyC,UAAY,OAChBb,EAAA,MAAA,CAAKsB,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAU1B,EAAA,OAAA,CAAM2B,EAAE,gBAAgBD,KAAK,SAAQ1B,EAAA,OAAA,CAAM2B,EAAE,gGAEpJvD,KAAKyC,UAAY,MAChBb,EAAA,MAAA,CAAKsB,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAU1B,EAAA,OAAA,CAAM2B,EAAE,gBAAgBD,KAAK,SAAQ1B,EAAA,OAAA,CAAM2B,EAAE,yIAEpJvD,KAAKyC,UAAYM,WAChBnB,EAAA,MAAA,CAAKI,MAAM,YAAYkB,MAAM,6BAA4BM,oBAAmB,gBAAgBL,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAU1B,EAAA,IAAA,KAAGA,EAAA,OAAA,CAAM0B,KAAK,OAAOH,OAAO,KAAKE,MAAM,QAAUzB,EAAA,IAAA,KAAGA,EAAA,IAAA,KAAGA,EAAA,IAAA,KAAGA,EAAA,OAAA,CAAM2B,EAAE,gHAGhO3B,EAAA,QAAA,CAAO6B,QAASzD,KAAKY,GAAG8C,GAAIzB,QAAS,WAAM,OAAAN,EAAKgB,gBAAef,EAAA,OAAA,uIA7D/C,oCCPxB,IAAM+B,cAAgB,6fCSTC,WAAU,WALvB,SAAAA,EAAA7D,uEAQUC,KAAA6D,WAAsB,SAGtB7D,KAAA8D,aAAwB,WAGM9D,KAAA+D,SAAqB,MAM3DH,EAAAlD,UAAAsD,sBAAA,SAAsBC,GACpBjE,KAAKkE,QAAQ7C,KAAK4C,IAGpBL,EAAAlD,UAAAgB,OAAA,WAAA,IAAAC,EAAA3B,KACE,OACE4B,EAACC,KAAI,KACHD,EAAA,SAAA,CAAAuC,aAAoBnE,KAAK+D,SAAW/D,KAAK8D,aAAe9D,KAAK6D,WAC3D5B,QAAS,WAAM,OAAAN,EAAKoC,UAAYpC,EAAKoC,WAErCnC,EAAA,MAAA,CAAKsB,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAU1B,EAAA,OAAA,CAAM2B,EAAE,gBAAgBD,KAAK,SAAQ1B,EAAA,OAAA,CAAM2B,EAAE,oMAzBtI,kCCTvB,IAAMa,kBAAoB,2JCObC,eAAc,WAL3B,SAAAC,EAAAvE,+GAUyBC,KAAA+D,SAAoB,MAGnC/D,KAAAuE,mBAA8B,IAMtCD,EAAA5D,UAAA8D,oBAAA,WAAA,IAAA7C,EAAA3B,KACEyE,uBAAsB,WACpB9C,EAAK+C,iBAQHJ,EAAA5D,UAAAgE,WAAN,2GACE,GAAI1E,KAAK+D,SAAS,CACdU,uBAAsB,WACpB9C,EAAKgD,UAAU7C,MAAM8C,UAAejD,EAAKgD,UAAUE,aAAY,QAEjEC,YAAW,WACTnD,EAAKgD,UAAU7C,MAAM8C,UAAY,SAChC5E,KAAKuE,qCAKdD,EAAA5D,UAAAqE,uBAAA,SAAuBhB,GAAvB,IAAApC,EAAA3B,KACE,GAAI+D,EAAS,CACX/D,KAAK0E,iBAEH,CACF1E,KAAK2E,UAAU7C,MAAM8C,UAAY,MAEnCE,YAAW,WACTL,uBAAsB,WACpB9C,EAAKqD,4BAA4B3D,YAElCrB,KAAKuE,qBAKVD,EAAA5D,UAAAgB,OAAA,WAAA,IAAAC,EAAA3B,KACE,OACE4B,EAACC,KAAI,KACHD,EAAA,MAAA,CAAK8B,GAAG,YAAY1B,MAAOhC,KAAK+D,UAAY,WAAYd,IAAK,SAAArC,GAAM,OAAAe,EAAKgD,UAAY/D,IAChFgB,EAAA,OAAA,4QAxDe;;;;;4BCD3B,SAAAqD,IAEYjF,KAAAkF,KAAe,EAWflF,KAAAmF,YAAsB,EAWtBnF,KAAAoF,WAAqB,EAlB7BC,OAAAC,eAAIL,EAAAvE,UAAA,MAAG,KAAP,WAAY,OAAOV,KAAKkF,UACxB,SAAQK,GACJ,GAAIA,EAAQ,EAAG,CAAEA,EAAQ,EACzB,GAAIA,EAAQ,IAAK,CAAEA,EAAQ,IAC3BvF,KAAKkF,KAAOK,wCAOhBF,OAAAC,eAAIL,EAAAvE,UAAA,aAAU,KAAd,WAAmB,OAAOV,KAAKmF,iBAC/B,SAAeI,GACX,GAAIA,EAAQ,EAAG,CAAEA,EAAQ,EACzB,GAAIA,EAAQ,EAAG,CAAEA,EAAQ,EACzBvF,KAAKmF,YAAcI,wCAOvBF,OAAAC,eAAIL,EAAAvE,UAAA,YAAS,KAAb,WAAkB,OAAOV,KAAKoF,gBAC9B,SAAcG,GACV,GAAIA,EAAQ,EAAG,CAAEA,EAAQ,EACzB,GAAIA,EAAQ,EAAG,CAAEA,EAAQ,EACzBvF,KAAKoF,WAAaG,wCAMtBF,OAAAC,eAAIL,EAAAvE,UAAA,MAAG,KAAP,WACI,OAAOV,KAAKwF,SAASC,SAEzB,SAAQF,GACJvF,KAAK0F,OAAOH,EAAOvF,KAAK2F,MAAO3F,KAAK4F,4CAMxCP,OAAAC,eAAIL,EAAAvE,UAAA,QAAK,KAAT,WACI,OAAOV,KAAKwF,SAASG,WAEzB,SAAUJ,GACNvF,KAAK0F,OAAO1F,KAAKyF,IAAKF,EAAOvF,KAAK4F,4CAMtCP,OAAAC,eAAIL,EAAAvE,UAAA,OAAI,KAAR,WACI,OAAOV,KAAKwF,SAASI,UAEzB,SAASL,GACLvF,KAAK0F,OAAO1F,KAAKyF,IAAKzF,KAAK2F,MAAOJ,yCAMtCF,OAAAC,eAAIL,EAAAvE,UAAA,MAAG,KAAP,WACI,IAAImF,EAAI7F,KAAK8F,OAAO9F,KAAKyF,KACzB,IAAIM,EAAI/F,KAAK8F,OAAO9F,KAAK2F,OACzB,IAAIK,EAAIhG,KAAK8F,OAAO9F,KAAK4F,MACzB,OAAOC,EAAIE,EAAIC,OAEnB,SAAQT,GACJvF,KAAKyF,IAAMQ,SAASV,EAAMW,OAAO,EAAE,IACnClG,KAAK2F,MAAQM,SAASV,EAAMW,OAAO,EAAE,IACrClG,KAAK4F,KAAOK,SAASV,EAAMW,OAAO,EAAE,0CAMxCb,OAAAC,eAAIL,EAAAvE,UAAA,gBAAa,KAAjB,WACI,IAAMyF,GAAcnG,KAAKyF,IAAI,IAAMzF,KAAK2F,MAAM,IAAM3F,KAAK4F,KAAK,KAAO,IACrE,GAAIO,EAAa,IAAI,CACjB,MAAO,SAEX,MAAO,+CAGHlB,EAAAvE,UAAA8E,OAAA,WACJ,IAAMY,GAAU,EAAIC,KAAKC,IAAK,EAAItG,KAAKoF,WAAc,IAAMpF,KAAKuG,WAEhE,IAAMC,EAAWxG,KAAKkF,KAAO,GAE7B,IAAMuB,EAASL,GAAU,EAAIC,KAAKC,IAAIE,EAAW,EAAI,IAGrD,IAAIX,EAAI,EAAGE,EAAI,EAAGC,EAAI,EACtB,GAAI,GAAKQ,GAAYA,GAAY,EAAG,CAChCX,EAAIO,EAAQL,EAAIU,OACb,GAAI,GAAKD,GAAYA,GAAY,EAAG,CACvCT,EAAIK,EAAQP,EAAIY,OACb,GAAI,GAAKD,GAAYA,GAAY,EAAG,CACvCT,EAAIK,EAAQJ,EAAIS,OACb,GAAI,GAAKD,GAAYA,GAAY,EAAG,CACvCR,EAAII,EAAQL,EAAIU,OACb,GAAI,GAAKD,GAAYA,GAAY,EAAG,CACvCR,EAAII,EAAQP,EAAIY,OACb,GAAI,GAAKD,GAAYA,GAAY,EAAG,CACvCX,EAAIO,EAAQJ,EAAIS,EAGpB,IAAMC,EAAO1G,KAAKoF,WAAcgB,EAAS,EAEzC,MAAO,CACHX,IAAKY,KAAKM,OAAOd,EAAIa,GAAQ,KAC7Bf,MAAOU,KAAKM,OAAOZ,EAAIW,GAAQ,KAC/Bd,KAAMS,KAAKM,OAAOX,EAAIU,GAAQ,OAI9BzB,EAAAvE,UAAAgF,OAAA,SAAOD,EAAaE,EAAeC,GAGvC,IAAMC,EAAIJ,EAAI,IAAKM,EAAIJ,EAAM,IAAKK,EAAIJ,EAAK,IAE3C,IAAMgB,EAAMP,KAAKO,IAAIf,EAAGE,EAAGC,GAC3B,IAAMa,EAAMR,KAAKQ,IAAIhB,EAAGE,EAAGC,GAC3B,IAAMc,EAAOD,EAAMD,EACnB,IAAIhF,EAAI,EAAGmF,EAAI,EAAGC,EAAI,EAGtB,GAAIF,IAAS,EAAG,CACZlF,EAAI,OACD,GAAIiF,IAAQhB,EAAG,CAClBjE,EAAI,KAAOmE,EAAIC,GAAKc,QACjB,GAAID,IAAQd,EAAG,CAClBnE,EAAI,IAAM,GAAMoE,EAAIH,GAAKiB,QACtB,GAAID,IAAQb,EAAG,CAClBpE,EAAI,IAAM,GAAMiE,EAAIE,GAAKe,GAE7B,GAAIlF,EAAI,EAAG,CAAEA,EAAIA,EAAI,IACrB,GAAIA,EAAI,IAAK,CAAEA,EAAI,IAGnBoF,GAAKH,EAAMD,GAAO,EAGlB,GAAIC,IAAQ,GAAKD,IAAQ,EAAG,CACxBG,EAAI,MACD,CACHA,GAAKF,EAAMG,GAAMX,KAAKO,IAAII,EAAG,EAAIA,GAGrChH,KAAKkF,KAAOtD,EACZ5B,KAAKmF,YAAc4B,EACnB/G,KAAKoF,WAAa4B,GAGd/B,EAAAvE,UAAAoF,OAAA,SAAOP,GACX,IAAI0B,EAAM1B,EAAM2B,SAAS,IACzB,GAAID,EAAIE,OAAS,EAAE,CACfF,EAAM,IAAMA,EAEhB,OAAOA,eC5Kf,IAAMG,kBAAoB;;;;6XCebC,eAAc,WAL3B,SAAAA,EAAAtH,GAAA,IAAA4B,EAAA3B,mFAUYA,KAAAsH,MAAgB,SAKhBtH,KAAAuH,eAAyB,MAGxBvH,KAAAwH,WAAqB,OACrBxH,KAAAyH,WAAqB,OACrBzH,KAAA0H,WAAqB,OA6CtB1H,KAAA2H,mCAAqC,SAACC,GAC1CA,EAAEC,iBACFlG,EAAKmG,8BAA8BF,GACnCG,OAAOC,iBAAiB,YAAarG,EAAKmG,+BAC1CC,OAAOC,iBAAiB,UAAWrG,EAAKsG,mCAGpCjI,KAAA8H,8BAAgC,SAACF,GACrC,IAAMM,EAAOvG,EAAKwG,uBAAuBC,wBAEzC,IAAIC,EAAIT,EAAEU,QAAUJ,EAAKK,KACzB,GAAIF,EAAI,EAAG,CAAEA,EAAI,EACjB,GAAIA,EAAIH,EAAK7E,MAAO,CAAEgF,EAAIH,EAAK7E,MAC/BgF,EAAIA,EAAEH,EAAK7E,MAEX,IAAImF,EAAIZ,EAAEa,QAAUP,EAAKQ,IACzB,GAAIF,EAAI,EAAG,CAAEA,EAAI,EACjB,GAAIA,EAAIN,EAAK/E,OAAQ,CAAEqF,EAAIN,EAAK/E,OAChCqF,EAAI,EAAKA,EAAEN,EAAK/E,OAEhB,IAAMwF,EAAW,IAAI1D,UACrB0D,EAASC,IAAMjH,EAAKkH,aAAaD,IACjCD,EAASpC,WAAa8B,EACtBM,EAASG,UAAYN,EACrB7G,EAAKkH,aAAeF,GAGhB3I,KAAAiI,iCAAmC,WACvCF,OAAOgB,oBAAoB,YAAapH,EAAKmG,+BAC7CC,OAAOgB,oBAAoB,UAAWpH,EAAKsG,mCAGvCjI,KAAAgJ,mBAAqB,SAACpB,GAC1BA,EAAEC,iBACFlG,EAAKsH,cAAcrB,GACnBG,OAAOC,iBAAiB,YAAarG,EAAKsH,eAC1ClB,OAAOC,iBAAiB,UAAWrG,EAAKuH,mBAGpClJ,KAAAkJ,iBAAmB,WACvBnB,OAAOgB,oBAAoB,YAAapH,EAAKsH,eAC7ClB,OAAOgB,oBAAoB,UAAWpH,EAAKuH,mBAGvClJ,KAAAiJ,cAAgB,SAACrB,GACrB,IAAMM,EAAOvG,EAAKwH,SAASf,wBAE3B,IAAIC,EAAIT,EAAEU,QAAUJ,EAAKK,KACzB,GAAIF,EAAI,EAAG,CAAEA,EAAI,EACjB,GAAIA,EAAIH,EAAK7E,MAAO,CAAEgF,EAAIH,EAAK7E,MAC/BgF,EAAIA,EAAEH,EAAK7E,MAAM,IAEjB,IAAMsF,EAAW,IAAI1D,UACrB0D,EAASC,IAAMP,EACfM,EAASpC,WAAa5E,EAAKkH,aAAatC,WACxCoC,EAASG,UAAYnH,EAAKkH,aAAaC,UACvCnH,EAAKkH,aAAeF,GAGhB3I,KAAAoJ,2BAA6B,SAACxB,EAAGyB,GACrC,IAAI9D,EAAQU,SAAS2B,EAAE0B,OAAO/D,OAC9B,GAAIgE,MAAMhE,GAAQ,CAAE,OACpB,IAAMoD,EAAW,IAAI1D,UACrB,GAAIM,EAAQ,EAAG,CAAEA,EAAQ,EACzB,GAAIA,EAAQ,IAAK,CAAEA,EAAQ,IAC3B,IAAIM,EAAIlE,EAAKkH,aAAapD,IAC1B,IAAIM,EAAIpE,EAAKkH,aAAalD,MAC1B,IAAIK,EAAIrE,EAAKkH,aAAajD,KAC1B,OAAQyD,GACJ,IAAK,MACDxD,EAAIN,EACJ,MACJ,IAAK,QACDQ,EAAIR,EACJ,MACJ,IAAK,OACDS,EAAIT,EACJ,MAIRoD,EAAShD,MAAQI,EACjB4C,EAASlD,IAAMI,EACf8C,EAAS/C,KAAOI,EAChBrE,EAAKkH,aAAeF,GAGhB3I,KAAAwJ,gBAAkB,SAAC5B,EAAG6B,GAC1B,IAAIlE,EAAQU,SAAS2B,EAAE0B,OAAO/D,OAC9B,GAAIgE,MAAMhE,GAAQ,CAAC,OACnB,IAAMoD,EAAW,IAAI1D,UACrB,GAAIM,GAAS,KAAM,CACf,IAAImE,EAAI/H,EAAKkH,aAAaD,IAC1B,IAAI7B,EAAIpF,EAAKkH,aAAatC,WAC1B,IAAIS,EAAIrF,EAAKkH,aAAaC,UAC1B,OAAQW,GACJ,IAAK,MACD,GAAIlE,EAAQ,EAAG,CAAEA,EAAQ,EACzB,GAAIA,EAAQ,IAAK,CAAEA,EAAQ,EAC3BmE,EAAInE,EACJ,MACJ,IAAK,aACD,GAAIA,EAAQ,EAAG,CAAEA,EAAQ,EACzB,GAAIA,EAAQ,IAAK,CAAEA,EAAQ,IAC3BwB,EAAIxB,EAAQ,IACZ,MACJ,IAAK,YACD,GAAIA,EAAQ,EAAG,CAAEA,EAAQ,EACzB,GAAIA,EAAQ,IAAK,CAAEA,EAAQ,IAC3ByB,EAAIzB,EAAQ,IACZ,MAIRoD,EAASC,IAAMc,EACff,EAASpC,WAAaQ,EACtB4B,EAASG,UAAY9B,EACrBrF,EAAKkH,aAAeF,IA+CpB3I,KAAA2J,iCAAmC,SAAC/B,GACxC,IAAIe,EAAW,IAAI1D,UACnB0D,EAASC,IAAMjH,EAAKkH,aAAaD,IACjCD,EAASpC,WAAa5E,EAAKkH,aAAatC,WACxCoC,EAASG,UAAYnH,EAAKkH,aAAaC,UAEvC,IAAIvD,EAAQ,IACZ,GAAIqC,EAAEgC,SAAU,CAAErE,EAAQ,GAE1B,OAAQqC,EAAEiC,KACN,IAAK,UACDlB,EAASG,WAAavD,EACtB,MACJ,IAAK,YACDoD,EAASG,WAAavD,EACtB,MACJ,IAAK,YACDoD,EAASpC,YAAchB,EACvB,MACJ,IAAK,aACDoD,EAASpC,YAAchB,EAI/B5D,EAAKkH,aAAeF,GAGhB3I,KAAA8J,iBAAmB,SAAClC,GACxB,IAAIe,EAAW,IAAI1D,UACnB0D,EAASC,IAAMjH,EAAKkH,aAAaD,IACjCD,EAASpC,WAAa5E,EAAKkH,aAAatC,WACxCoC,EAASG,UAAYnH,EAAKkH,aAAaC,UAEvC,IAAIvD,EAAQ,EACZ,GAAIqC,EAAEgC,SAAU,CAAErE,EAAQ,GAE1B,OAAQqC,EAAEiC,KACN,IAAK,YACDlB,EAASC,KAAOrD,EAChB,MACJ,IAAK,aACDoD,EAASC,KAAOrD,EAIxB5D,EAAKkH,aAAeF,GAtPhBtB,EAAA3G,UAAAqJ,oBAAA,SAAoBzC,GACxBtH,KAAKgK,aAAa3I,KAAKiG,IAI3BD,EAAA3G,UAAAuJ,yBAAA,SAAyBhG,GACrBjE,KAAK+J,oBAAoB9F,IAO7BoD,EAAA3G,UAAAwJ,kBAAA,WACIlK,KAAKmK,gBAAgBnK,KAAKsH,QAG9BD,EAAA3G,UAAAC,iBAAA,WACKX,KAAKY,GAA8BkB,MAAMsI,YAAY,qBAAsBpK,KAAKuH,eAAeL,aAG5FG,EAAA3G,UAAAoF,OAAA,WACL,OAAO9F,KAAKqK,WAAWrK,KAAK6I,aAAapD,KAAOzF,KAAKqK,WAAWrK,KAAK6I,aAAalD,OAAS3F,KAAKqK,WAAWrK,KAAK6I,aAAajD,OAGxHyB,EAAA3G,UAAA4J,YAAA,WACJ,OAAOtK,KAAK6I,aAAa0B,eAGrBlD,EAAA3G,UAAA2J,WAAA,SAAW9E,GACf,IAAMiF,EAAcjF,EAAM2B,SAAS,IAAIuD,cACvC,GAAID,EAAYrD,SAAW,EAAE,CACzB,MAAO,IAAMqD,EAEjB,OAAOA,GA4HHnD,EAAA3G,UAAAyJ,gBAAA,SAAgB5E,GACpB,IAAMoD,EAAW,IAAI1D,UACrB,GAAIM,EAAMmF,MAAM,gCAAgCvD,OAAS,EAAG,CACxD,GAAI5B,EAAM4B,SAAW,EAAE,CACnB,IAAIpD,EAAWwB,EAAM,GAAKA,EAAM,GAAKA,EAAM,GAAKA,EAAM,GAAKA,EAAM,GAAKA,EAAO,GAC7EA,EAAQxB,EAEZ4E,EAASlD,IAAMQ,SAASV,EAAMW,OAAO,EAAE,GAAI,IAC3CyC,EAAShD,MAAQM,SAASV,EAAMW,OAAO,EAAE,GAAI,IAC7CyC,EAAS/C,KAAOK,SAASV,EAAMW,OAAO,EAAE,GAAI,QAE5C,CACAyC,EAASlD,IAAMzF,KAAK6I,aAAapD,IACjCkD,EAAShD,MAAQ3F,KAAK6I,aAAalD,MACnCgD,EAAS/C,KAAO5F,KAAK6I,aAAajD,KAEtC5F,KAAK6I,aAAeF,GAGhBtB,EAAA3G,UAAAiK,gBAAA,SAAgB/C,GACpB,OAAOA,EAAE0B,OAAO5F,IACZ,IAAK,aACD1D,KAAKwH,WAAa,OAClBxH,KAAKyH,WAAa,OAClBzH,KAAK0H,WAAa,OAClB,MACJ,IAAK,aACD1H,KAAKwH,WAAa,OAClBxH,KAAKyH,WAAa,OAClBzH,KAAK0H,WAAa,OAClB,MACJ,IAAK,aACD1H,KAAKwH,WAAa,OAClBxH,KAAKyH,WAAa,OAClBzH,KAAK0H,WAAa,OAClB,MACJ,QACI1H,KAAKwH,WAAa,OAClBxH,KAAKyH,WAAa,OAClBzH,KAAK0H,WAAa,SAoD9BL,EAAA3G,UAAAgB,OAAA,WAAA,IAAAC,EAAA3B,KACI,IAAM4I,EAAM5I,KAAK6I,aAAaD,IAC9B,IAAMrC,EAAavG,KAAK6I,aAAatC,WACrC,IAAMuC,EAAY9I,KAAK6I,aAAaC,UACpC,IAAMrD,EAAMzF,KAAK6I,aAAapD,IAC9B,IAAME,EAAQ3F,KAAK6I,aAAalD,MAChC,IAAMC,EAAO5F,KAAK6I,aAAajD,KAE/B,OACIhE,EAAA,MAAA,CAAKI,MAAM,oBACPJ,EAAA,MAAA,CAAKI,MAAM,qBACPJ,EAAA,MAAA,CAAKI,MAAM,gBAAgBiB,IAAK,SAAC2H,GAAY,OAAAjJ,EAAKwG,uBAAyByC,GACvE9I,MAAO,CAAC+I,gBAAiB,OAAOjC,EAAG,cACnCkC,YAAa9K,KAAK2H,mCAAmCoD,KAAK/K,OAE1D4B,EAAA,SAAA,CAAQI,MAAM,iBAAgBmC,aACf,sGACX6G,KAAK,SAAQC,gBACC,IAAGC,gBACH,MAAKC,iBACH,eAAe9E,KAAKM,MAAM3G,KAAK6I,aAAatC,WAAW,KAAI,iBAAiBF,KAAKM,MAAM3G,KAAK6I,aAAaC,UAAU,KAAI,IACvIhH,MAAO,CACHyG,KAAMlC,KAAKM,MAAMJ,EAAa,KAAQ,IACtC6E,OAAQ/E,KAAKM,MAAMmC,EAAY,KAAQ,KAE3CuC,UAAW,SAACzD,GAAM,OAAAjG,EAAKgI,iCAAiC/B,OAGhEhG,EAAA,MAAA,CAAKI,MAAM,iBACPJ,EAAA,MAAA,CAAKI,MAAM,mBAAmBF,MAAO,CACjC+I,gBAAiB,IAAM7K,KAAK8F,SAC5BwF,UAAW,eAAiB,IAAMtL,KAAKsK,iBAG3C1I,EAAA,MAAA,CAAKI,MAAM,gBACPiB,IAAK,SAAC2H,GAAY,OAAAjJ,EAAKwH,SAAWyB,GAClCE,YAAa9K,KAAKgJ,mBAAmB+B,KAAK/K,OAE1C4B,EAAA,SAAA,CAAQI,MAAM,iBAAgBmC,aACf,sEACX6G,KAAK,SAAQC,gBACC,IAAGC,gBACH,MAAKK,gBACJlF,KAAKM,MAAMiC,GAC1B9G,MAAO,CAACyG,MAAOK,EAAI,IAAI,KAAK1B,WAAa,KACzCmE,UAAW,SAACzD,GAAM,OAAAjG,EAAKmI,iBAAiBlC,SAKxDhG,EAAA,MAAA,CAAKI,MAAM,oBACPJ,EAAA,MAAA,CAAKI,MAAM,uBAAuBF,MAAO,CAACM,QAASpC,KAAKwH,aACpD5F,EAAA,MAAA,CAAKI,MAAM,uBACPJ,EAAA,QAAA,KAAA,KACAA,EAAA,QAAA,CAAO3B,KAAK,SAAS2G,IAAI,IAAIC,IAAI,MAAM2E,KAAK,IAAIxJ,MAAM,MAAMuD,MAAOE,EAAGtB,aAAa,YAC/EsH,SAAU,SAAC7D,GAAM,OAAAjG,EAAKyH,2BAA2BxB,EAAG,WAG5DhG,EAAA,MAAA,CAAKI,MAAM,uBACPJ,EAAA,QAAA,KAAA,KACAA,EAAA,QAAA,CAAO3B,KAAK,SAAS2G,IAAI,IAAIC,IAAI,MAAM7E,MAAM,QAAQuD,MAAOI,EAAKxB,aAAa,cAC1EsH,SAAU,SAAC7D,GAAM,OAAAjG,EAAKyH,2BAA2BxB,EAAG,aAG5DhG,EAAA,MAAA,CAAKI,MAAM,uBACPJ,EAAA,QAAA,KAAA,KACAA,EAAA,QAAA,CAAO3B,KAAK,SAAS2G,IAAI,IAAIC,IAAI,MAAM7E,MAAM,OAAOuD,MAAOK,EAAIzB,aAAa,aACxEsH,SAAU,SAAC7D,GAAM,OAAAjG,EAAKyH,2BAA2BxB,EAAG,YAG5DhG,EAAA,MAAA,CAAKI,MAAM,yBACPJ,EAAA,SAAA,CACI8B,GAAG,aACHzB,QAASjC,KAAK2K,gBAAgBI,KAAK/K,MAAKmE,aAC7B,qCAEXvC,EAAA,MAAA,CAAKsB,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAU1B,EAAA,OAAA,CAAM2B,EAAE,gBAAgBD,KAAK,SAAQ1B,EAAA,OAAA,CAAM2B,EAAE,wEAI/J3B,EAAA,MAAA,CAAKI,MAAM,uBAAuBF,MAAO,CAACM,QAASpC,KAAKyH,aACpD7F,EAAA,MAAA,CAAKI,MAAM,uBACPJ,EAAA,QAAA,KAAA,KACAA,EAAA,QAAA,CAAO3B,KAAK,SAAS2G,IAAI,IAAIC,IAAI,MAAM2E,KAAM,EAAGjG,MAAOc,KAAKM,MAAMiC,GAAIzE,aAAa,MAC/EsH,SAAU,SAAC7D,GAAM,OAAAjG,EAAK6H,gBAAgB5B,EAAG,WAGjDhG,EAAA,MAAA,CAAKI,MAAM,uBACPJ,EAAA,QAAA,KAAA,KACAA,EAAA,QAAA,CAAO3B,KAAK,SAAS2G,IAAI,IAAIC,IAAI,MAAM2E,KAAM,EAAGjG,MAAOc,KAAKM,MAAMJ,EAAW,KAAIpC,aAAa,aAC1FsH,SAAU,SAAC7D,GAAM,OAAAjG,EAAK6H,gBAAgB5B,EAAG,kBAGjDhG,EAAA,MAAA,CAAKI,MAAM,uBACPJ,EAAA,QAAA,KAAA,KACAA,EAAA,QAAA,CAAO3B,KAAK,SAAS2G,IAAI,IAAIC,IAAI,MAAM2E,KAAM,EAAGjG,MAAOc,KAAKM,MAAMmC,EAAU,KAAI3E,aAAa,YACzFsH,SAAU,SAAC7D,GAAM,OAAAjG,EAAK6H,gBAAgB5B,EAAG,iBAGjDhG,EAAA,MAAA,CAAKI,MAAM,yBACPJ,EAAA,SAAA,CACI8B,GAAG,aACHzB,QAASjC,KAAK2K,gBAAgBI,KAAK/K,MAAKmE,aAC7B,yCAEXvC,EAAA,MAAA,CAAKsB,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAU1B,EAAA,OAAA,CAAM2B,EAAE,gBAAgBD,KAAK,SAAQ1B,EAAA,OAAA,CAAM2B,EAAE,wEAI/J3B,EAAA,MAAA,CAAKI,MAAM,uBAAuBF,MAAO,CAACM,QAASpC,KAAK0H,aACpD9F,EAAA,MAAA,CAAKI,MAAM,uBACPJ,EAAA,QAAA,KAAA,OACAA,EAAA,MAAA,CAAKI,MAAM,aACPJ,EAAA,QAAA,CAAO3B,KAAK,OAAMkE,aAAY,oBAC1BoB,MAAOvF,KAAK8F,SACZ2F,SAAU,SAAA7D,GAAK,OAAAjG,EAAKwI,gBAAiBvC,EAAE0B,OAA4B/D,UAEvE3D,EAAA,SAAA,CACII,MAAM,OAAMmC,aACD,cAEXvC,EAAA,MAAA,CAAKsB,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAU1B,EAAA,OAAA,CAAM2B,EAAE,gBAAgBD,KAAK,SAAQ1B,EAAA,OAAA,CAAM2B,EAAE,wIAI/J3B,EAAA,MAAA,CAAKI,MAAM,yBACPJ,EAAA,SAAA,CACI8B,GAAG,aACHzB,QAASjC,KAAK2K,gBAAgBI,KAAK/K,MAAKmE,aAC7B,6CAEXvC,EAAA,MAAA,CAAKsB,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAU1B,EAAA,OAAA,CAAM2B,EAAE,gBAAgBD,KAAK,SAAQ1B,EAAA,OAAA,CAAM2B,EAAE,oVAnZxJ,GAuBvBmI,aAAAA,CADCC,SAAS,kGCrCd,IAAMC,eAAiB,inCCOVC,YAAW,WALxB,SAAAA,EAAA9L,GAAA,IAAA4B,EAAA3B,qFAOUA,KAAA8L,KAMJ,CACFC,gBAAiB,uBACjBC,QAAS,UACTC,GAAI,KACJC,YAAa,iBACbC,WAAY,iBAaNnM,KAAAoM,gBAA2B,MAO3BpM,KAAAqM,eAAyB,GAKxBrM,KAAAsM,iBAA4B,MAE5BtM,KAAAuM,cAAyB,MAkD1BvM,KAAAwM,eAAiB,SAACC,GAExBA,EAAMC,kBACND,EAAM5E,iBACN4E,EAAME,aAAaC,WAAa,OAChCjL,EAAKkL,SAAShM,UAAUC,IAAI,aAqBtBd,KAAA8M,WAAa,SAACC,GACpBA,EAAUL,kBACVK,EAAUlF,iBACV,IAAMmF,EAAQD,EAAUJ,aAAaK,MAErC,GAAIrL,EAAKsL,qBAAqBD,GAAO,CACnC,OAEF,IAAIE,EAAWvL,EAAKwL,qBAAqBH,GACzCrL,EAAKyL,cAAc/L,KAAK6L,IA7E1BrB,EAAAnL,UAAAC,iBAAA,WAAA,IAAAgB,EAAA3B,KACE,GAAIA,KAAKoM,gBAAgB,CACvBpM,KAAKqN,iCACJC,MAAK,SAAAC,GAAU,OAAA5L,EAAK2K,iBAAmBiB,KAE1C,GAAIvN,KAAKwN,mBAAqBzK,WAAa/C,KAAKwN,kBAAkBrG,OAAS,EAAE,CAC3E,IAAIsG,EAAqBzN,KAAKwN,kBAAkBE,KAAI,SAAA9F,GAAK,MAAA,IAAIA,KAC7D,IAAI+F,EAAiBF,EAAmBG,KAAK,KAC7C5N,KAAK6N,UAAUC,OAASH,IAIpB9B,EAAAnL,UAAA2M,+BAAA,WACN,OAAO,IAAIU,SAAQ,SAACC,GAClB,IAAMC,EAAeC,UAAUD,aAC/B,GAAIA,GAAgBlL,WAAakL,EAAaE,kBAAoBpL,UAAW,CAC3EiL,EAAQ,OAEVC,EAAaE,mBACVb,MAAK,SAAAc,GACJ,IAAIb,EAASa,EAAQC,MAAK,SAAAC,GAAU,OAAAA,EAAOC,MAAQ,gBACnDP,EAAQT,UAKR1B,EAAAnL,UAAAyM,qBAAA,SAAqBH,GAC3B,IAAIE,EAAmB,GACvB,IAAK,IAAIsB,EAAQ,EAAGA,EAAQxB,EAAM7F,OAAQqH,IAAS,CACjD,IAAMC,EAAOzB,EAAMwB,GACnBtB,EAASwB,KAAKD,GAGhB,OAAOvB,GAGDrB,EAAAnL,UAAAiO,mBAAA,SAAmB/D,GACzB,IAAIoC,EAAQhN,KAAKmN,qBAAqBvC,EAAQoC,OAE9ChN,KAAKoN,cAAc/L,KAAK2L,IAWlBnB,EAAAnL,UAAAuM,qBAAA,SAAqBD,GAC3B,IAAI4B,EAAa,MACjB,IAAK,IAAIC,EAAY,EAAGA,EAAY7B,EAAM7F,OAAQ0H,IAAa,CAC7D,IAAMJ,EAAOzB,EAAM6B,GACnB,IAAIC,EAAQ,kBACZ,IAAMC,EAAgBD,EAAME,KAAKP,EAAKQ,MAAM,GAC5C,GAAIF,GAAiBhM,UAAU,CAC7B6L,EAAa,KAGf,GAAI5O,KAAKwN,mBAAqBzK,YAAc/C,KAAKwN,kBAAkB0B,SAASH,GAAe,CACzFH,EAAa,KAGf,OAAOA,IAgBH/C,EAAAnL,UAAAyO,aAAA,WAAA,IAAAxN,EAAA3B,KACNA,KAAKuM,cAAgB,KACrB2B,UAAUD,aAAamB,aAAa,CAACC,MAAO,KAAMC,MAAO,QACxDhC,MAAK,SAAAiC,GAEJ5N,EAAK6N,aAAaC,UAAYF,EAC9B5N,EAAK6N,aAAaE,OACjBpC,MAAK,WACJ3L,EAAKgO,cAAgBJ,EAAOK,iBAAiB,GAAGC,oBAGnDC,OAAM,SAAAC,GAAS,OAAAC,MAAMD,OAGhBlE,EAAAnL,UAAAuP,cAAA,WAAA,IAAAtO,EAAA3B,KACN,IAAIkQ,EAASC,SAASC,cAAc,UACpC,IAAMC,EAAUH,EAAOI,WAAW,MAClCJ,EAAO7M,MAAQrD,KAAK2P,cAActM,MAClC6M,EAAO/M,OAASnD,KAAK2P,cAAcxM,OACnCkN,EAAQE,UAAUvQ,KAAKwP,aAAc,EAAG,GACxCU,EAAOM,QAAO,SAAAC,GACZ,IAAIhC,EAAO,IAAIiC,KAAK,CAACD,GAAO,aAAc,CAACxQ,KAAK,eAChD0B,EAAK4K,cAAgB,MAErB,IAAIW,EAAW,CAACuB,GAChB9M,EAAKyL,cAAc/L,KAAK6L,KACvB,aAAclN,KAAKqM,iBAGxBR,EAAAnL,UAAAgB,OAAA,WAAA,IAAAC,EAAA3B,qBACE,OACE4B,EAACC,KAAI,CACHoB,IAAK,SAAA2E,GAAK,OAAAjG,EAAKkL,SAAWjF,GAC1B5F,MAAM,WACN2O,WAAY3Q,KAAKwM,eACjBoE,OAAQ5Q,KAAK8M,WACb+D,YAAa,WAAM,OAAAlP,EAAKkL,SAAShM,UAAUiC,OAAO,eAEhD9C,KAAKuM,eACL,CACE3K,EAAA,IAAA,MAAIkP,EAAA9Q,KAAK8L,QAAI,MAAAgF,SAAA,OAAA,EAAAA,EAAE/E,iBAEfnK,EAAA,IAAA,KAAA,MAAMmP,EAAA/Q,KAAK8L,QAAI,MAAAiF,SAAA,OAAA,IAAE9E,GAAE,MAEnBrK,EAAA,QAAA,CAAOI,MAAM,eACXJ,EAAA,QAAA,CACE3B,KAAK,OACLgD,IAAK,SAAArC,GAAM,OAAAe,EAAKkM,UAAYjN,GAC5B6K,SAAU,SAAA7D,GAAK,OAAAjG,EAAKgN,mBAAmB/G,EAAE0B,WAG3C1H,EAAA,OAAA,KACEA,EAAA,MAAA,CAAKsB,MAAM,6BAA4BM,oBAAmB,gBAAgBL,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAU1B,EAAA,IAAA,KAAGA,EAAA,OAAA,CAAM0B,KAAK,OAAOH,OAAO,KAAKE,MAAM,QAAUzB,EAAA,IAAA,KAAGA,EAAA,OAAA,CAAM2B,EAAE,qDAC/L,KAENyN,EAAAhR,KAAK8L,QAAI,MAAAkF,SAAA,OAAA,IAAE7E,YAGdnM,KAAKsM,kBACH,CACE1K,EAAA,IAAA,KAAA,MAAMqP,EAAAjR,KAAK8L,QAAI,MAAAmF,SAAA,OAAA,IAAEhF,GAAE,MAEnBrK,EAAA,SAAA,CACEK,QAAS,WAAM,OAAAN,EAAKwN,iBAEpBvN,EAAA,MAAA,CAAKsB,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAU1B,EAAA,OAAA,CAAM2B,EAAE,gBAAgBD,KAAK,SAAQ1B,EAAA,SAAA,CAAQsP,GAAG,KAAKC,GAAG,KAAKtL,EAAE,QAAOjE,EAAA,OAAA,CAAM2B,EAAE,gKACnL6N,EAAApR,KAAK8L,QAAI,MAAAsF,SAAA,OAAA,IAAElF,eAKrBlM,KAAKuM,eACJ3K,EAAA,MAAA,CAAKI,MAAM,iBACTJ,EAAA,QAAA,CAAOqB,IAAK,SAAA2E,GAAK,OAAAjG,EAAK6N,aAAe5H,KACrChG,EAAA,SAAA,CACEK,QAAS,WAAM,OAAAN,EAAKsO,kBAEpBrO,EAAA,MAAA,CAAKsB,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAU1B,EAAA,OAAA,CAAM2B,EAAE,gBAAgBD,KAAK,SAAQ1B,EAAA,SAAA,CAAQsP,GAAG,KAAKC,GAAG,KAAKtL,EAAE,QAAOjE,EAAA,OAAA,CAAM2B,EAAE,+JAAmK,KACtV8N,EAAArR,KAAK8L,QAAI,MAAAuF,SAAA,OAAA,IAAErF,qBA9MF,oCCPxB,IAAYsF,YAAZ,SAAYA,GACRA,EAAAA,EAAA,MAAA,GAAA,KACAA,EAAAA,EAAA,MAAA,GAAA,KACAA,EAAAA,EAAA,MAAA,GAAA,KACAA,EAAAA,EAAA,MAAA,GAAA,MAJJ,CAAYA,aAAAA,WAAU,cCANC,qBACZ9E,EACA+E,GAEA,IAAIC,EAAY,EAChB,IAAIC,EAAY,EAChB,GAAIjF,aAAiBkF,WAAY,CAC/BF,EAAYhF,EAAMgF,UAClBC,EAAYjF,EAAMiF,UAEpB,UAAWE,aAAe,YAAY,CACpC,GAAInF,aAAiBmF,WAAY,CAC/B,IAAIC,EAAQpF,EAAMqF,QAAQ,GAC1B,GAAIN,GAAiBzO,UAAW,CAC9B0O,EAAYI,EAAME,MAAQ/R,KAAKwR,cAAcO,MAC7CL,EAAYG,EAAMG,MAAQhS,KAAKwR,cAAcQ,MAE/CR,EAAgBK,GAGpB,MAAO,CAAEJ,UAASA,EAAEC,UAASA,GCpBjC,IAAMO,mBAAqB,m7CCcdC,gBAAe,WAL5B,SAAAA,EAAAnS,GAAA,IAAA4B,EAAA3B,2FAOUA,KAAAqD,MAAgB,IAGhBrD,KAAAmD,OAAiB,IAKjBnD,KAAA8L,KAQJ,CACFE,QAAS,UACTD,gBAAiB,yBACjBE,GAAI,KACJC,YAAa,iBACbC,WAAY,kBACZgG,cAAe,wJACfC,eAAgB,SAIVpS,KAAAqS,QAAkB,GAGlBrS,KAAAsS,kBAA6B,MA2F7BtS,KAAAuS,oBAAsB,SAAC9F,GAC7BA,EAAMC,kBACND,EAAM5E,iBACN,IAAM+C,EAAU6B,EAAMnD,OACtB,IAAMkJ,EAAY5H,EAAQ/J,UAAU,GAEpCsP,SAASnI,iBAAiB,UAAWrG,EAAK8Q,wBAAyB,OACnEtC,SAASnI,iBAAiB,WAAYrG,EAAK8Q,wBAAyB,OACpE,OAAQD,GACN,IAAK,OACHrC,SAASnI,iBAAiB,YAAarG,EAAK+Q,eAAgB,OAC5DvC,SAASnI,iBAAiB,YAAarG,EAAK+Q,eAAgB,OAC5DvC,SAASnI,iBAAiB,WAAW,WAAM,OAAAmI,SAASpH,oBAAoB,YAAapH,EAAK+Q,mBAC1FvC,SAASnI,iBAAiB,YAAY,WAAM,OAAAmI,SAASpH,oBAAoB,YAAapH,EAAK+Q,mBAC3F,MACF,IAAK,KACHvC,SAASnI,iBAAiB,YAAarG,EAAKgR,kBAAmB,OAC/DxC,SAASnI,iBAAiB,YAAarG,EAAKgR,kBAAmB,OAC/DxC,SAASnI,iBAAiB,WAAW,WAAM,OAAAmI,SAASpH,oBAAoB,YAAapH,EAAKgR,sBAC1FxC,SAASnI,iBAAiB,YAAY,WAAM,OAAAmI,SAASpH,oBAAoB,YAAapH,EAAKgR,sBAC3F,MACF,IAAK,KACHxC,SAASnI,iBAAiB,YAAarG,EAAKiR,kBAAmB,OAC/DzC,SAASnI,iBAAiB,YAAarG,EAAKiR,kBAAmB,OAC/DzC,SAASnI,iBAAiB,WAAW,WAAM,OAAAmI,SAASpH,oBAAoB,YAAapH,EAAKiR,sBAC1FzC,SAASnI,iBAAiB,YAAY,WAAM,OAAAmI,SAASpH,oBAAoB,YAAapH,EAAKiR,sBAC3F,MACF,IAAK,KACHzC,SAASnI,iBAAiB,YAAarG,EAAKkR,kBAAmB,OAC/D1C,SAASnI,iBAAiB,YAAarG,EAAKkR,kBAAmB,OAC/D1C,SAASnI,iBAAiB,WAAW,WAAM,OAAAmI,SAASpH,oBAAoB,YAAapH,EAAKkR,sBAC1F1C,SAASnI,iBAAiB,YAAY,WAAM,OAAAmI,SAASpH,oBAAoB,YAAapH,EAAKkR,sBAC3F,MACF,IAAK,KACH1C,SAASnI,iBAAiB,YAAarG,EAAKmR,kBAAmB,OAC/D3C,SAASnI,iBAAiB,YAAarG,EAAKmR,kBAAmB,OAC/D3C,SAASnI,iBAAiB,WAAW,WAAM,OAAAmI,SAASpH,oBAAoB,YAAapH,EAAKmR,sBAC1F3C,SAASnI,iBAAiB,YAAY,WAAM,OAAAmI,SAASpH,oBAAoB,YAAapH,EAAKmR,sBAC3F,QAME9S,KAAAyS,wBAA0B,SAACM,GACjCpR,EAAKqR,YACL7C,SAASpH,oBAAoB,UAAWpH,EAAK8Q,yBAC7C9Q,EAAK6P,cAAgBzO,WAsCf/C,KAAA2S,kBAAoB,SAAClG,GAC3B9K,EAAKsR,iBAAiBxG,EAAO6E,WAAW4B,KAGlClT,KAAA4S,kBAAoB,SAACnG,GAC3B9K,EAAKsR,iBAAiBxG,EAAO6E,WAAW6B,KAGlCnT,KAAA6S,kBAAoB,SAACpG,GAC3B9K,EAAKsR,iBAAiBxG,EAAO6E,WAAW8B,KAGlCpT,KAAA8S,kBAAoB,SAACrG,GAC3B9K,EAAKsR,iBAAiBxG,EAAO6E,WAAW+B,KAGlCrT,KAAAiT,iBAAmB,SAACxG,EAAgC6G,GAC1D,IAAK3R,EAAK4R,qBAAqB9G,GAAO,CACpC,OAGE,IAAA+G,EAAc7R,EAAK8R,iBAAiBH,GAAnC/K,EAAIiL,EAAAjL,KAAEG,EAAG8K,EAAA9K,IACd,IAAIgL,EAAW,EACf,IAAIC,EAAY,EAChB,IAAIC,EAAyC,aAC7C,IAAMC,EAAclS,EAAK0B,MAAQ1B,EAAKwB,OACtC,IAAM2Q,EAAWnS,EAAKoS,KAAK3L,wBAC3B,IAAM4L,EAAYrS,EAAKsS,MAAM7L,wBACzB,IAAA8L,EAA2B3C,qBAAqB9E,EAAO9K,EAAK6P,eAA1DC,EAASyC,EAAAzC,UAAEC,EAASwC,EAAAxC,UAC1B,GAAIrL,KAAKC,IAAImL,GAAapL,KAAKC,IAAIoL,GAAW,CAC5CkC,EAAc,WAGhB,GAAIA,GAAe,aAAa,CAC9B,OAAQN,GACN,KAAKhC,WAAW4B,GAChB,KAAK5B,WAAW+B,GACdK,EAAWI,EAASzQ,MAAQoO,EAC5BkC,EAAYD,EAAWG,EACvB,MACF,KAAKvC,WAAW6B,GAChB,KAAK7B,WAAW8B,GACdM,EAAWI,EAASzQ,MAAQoO,EAC5BkC,EAAYD,EAAWG,EACvB,WAIA,CACJ,OAAQP,GACN,KAAKhC,WAAW4B,GAChB,KAAK5B,WAAW6B,GACdQ,EAAYG,EAAS3Q,OAASuO,EAC9BgC,EAAWC,EAAYE,EACvB,MACF,KAAKvC,WAAW8B,GAChB,KAAK9B,WAAW+B,GACdM,EAAYG,EAAS3Q,OAASuO,EAC9BgC,EAAWC,EAAYE,EACvB,OAMN,OAAQP,GACN,KAAKhC,WAAW6B,GAChB,KAAK7B,WAAW4B,GACd,IAAMiB,EAAYL,EAAS3Q,OAASwQ,EACpCjL,EAAM/G,EAAKoS,KAAKK,UAAYD,EAKhC,OAAQb,GACN,KAAKhC,WAAW4B,GAChB,KAAK5B,WAAW+B,GACd,IAAMgB,EAAaP,EAASzQ,MAAQqQ,EACpCnL,EAAO5G,EAAKoS,KAAKO,WAAaD,EAC9B,GAAI9L,EAAO,EAAGA,EAAO,EACrB,GAAIA,EAAOyL,EAAU3Q,MAAOkF,EAAOyL,EAAU3Q,MAC7C,GAAIqF,EAAM,EAAGA,EAAM,EACnB,GAAIA,EAAMsL,EAAU7Q,OAAQuF,EAAMsL,EAAU7Q,OAC5C,GAAIoF,EAAOmL,EAAWM,EAAU3Q,MAAOqQ,EAAWM,EAAU3Q,MAAQkF,EACpE,GAAIG,EAAMiL,EAAYK,EAAU7Q,OAAQwQ,EAAYK,EAAU7Q,OAASuF,EACvE,MACF,KAAK4I,WAAW6B,GAChB,KAAK7B,WAAW8B,GACd,GAAI1K,EAAM,EAAGA,EAAM,EACnB,GAAIA,EAAMsL,EAAU7Q,OAAQuF,EAAMsL,EAAU7Q,OAC5C,GAAIoF,EAAOmL,EAAWM,EAAU3Q,MAAOqQ,EAAWM,EAAU3Q,MAAQkF,EACpE,GAAIG,EAAMiL,EAAYK,EAAU7Q,OAAQwQ,EAAYK,EAAU7Q,OAASuF,EACvE,MAKJ,GAAIgL,EAAWC,GAAaE,EAAY,CACtC,OAGF,GAAIlS,EAAK2Q,kBAAkB,CACzB,IAAMiC,EAAY5S,EAAKsS,MAAM5Q,MAAQ1B,EAAKsS,MAAMO,aAChD,GAAId,EAAWa,EAAY5S,EAAK0B,OAASsQ,EAAYY,EAAY5S,EAAKwB,OAAO,CAC3E,QAIJ,OAAQmQ,GACN,KAAKhC,WAAW6B,GACdxR,EAAKoS,KAAKjS,MAAM4G,IAASA,EAAG,KAC5B/G,EAAKoS,KAAKjS,MAAMuB,MAAWqQ,EAAQ,KACnC/R,EAAKoS,KAAKjS,MAAMqB,OAAYwQ,EAAS,KACrC,MACF,KAAKrC,WAAW4B,GACdvR,EAAKoS,KAAKjS,MAAMyG,KAAUA,EAAI,KAC9B5G,EAAKoS,KAAKjS,MAAM4G,IAASA,EAAG,KAC5B/G,EAAKoS,KAAKjS,MAAMuB,MAAWqQ,EAAQ,KACnC/R,EAAKoS,KAAKjS,MAAMqB,OAAYwQ,EAAS,KACrC,MACF,KAAKrC,WAAW8B,GACdzR,EAAKoS,KAAKjS,MAAMuB,MAAWqQ,EAAQ,KACnC/R,EAAKoS,KAAKjS,MAAMqB,OAAYwQ,EAAS,KACrC,MACF,KAAKrC,WAAW+B,GACd1R,EAAKoS,KAAKjS,MAAMyG,KAAUA,EAAI,KAC9B5G,EAAKoS,KAAKjS,MAAMuB,MAAWqQ,EAAQ,KACnC/R,EAAKoS,KAAKjS,MAAMqB,OAAYwQ,EAAS,KACrC,QAuBE3T,KAAA0S,eAAiB,SAAC+B,GACxB,IAAK9S,EAAK4R,qBAAqBkB,GAAI,CACjC,OAEE,IAAAjB,EAAyBjC,qBAAqBkD,EAAI9S,EAAK6P,eAAtDC,EAAS+B,EAAA/B,UAAEC,EAAS8B,EAAA9B,UACzB,IAAIgD,EAAU/S,EAAKoS,KAAKO,WAAa7C,EACrC,IAAIkD,EAAShT,EAAKoS,KAAKK,UAAY1C,EACnC,IAAIsC,EAAYrS,EAAKsS,MAAM7L,wBAC3B,IAAI0L,EAAWnS,EAAKoS,KAAK3L,wBACzB,GAAIsM,EAAU,EAAE,CACdA,EAAU,EAEZ,GAAIC,EAAS,EAAE,CACbA,EAAS,EAEX,GAAID,EAAUZ,EAASzQ,MAAQ2Q,EAAU3Q,MAAM,CAC7CqR,EAAU/S,EAAKoS,KAAKO,WAEtB,GAAIK,EAASb,EAAS3Q,OAAS6Q,EAAU7Q,OAAO,CAC9CwR,EAAShT,EAAKoS,KAAKK,UAErBzS,EAAKoS,KAAKjS,MAAMyG,KAAOmM,EAAU,KACjC/S,EAAKoS,KAAKjS,MAAM4G,IAAMiM,EAAS,MA7UjCzC,EAAAxR,UAAAC,iBAAA,WAAA,IAAAgB,EAAA3B,KACEyE,uBAAsB,WACpB9C,EAAKiT,QAAQ,qBAIT1C,EAAAxR,UAAAkU,QAAA,SAAQC,GACd,IAAMC,EAAQ9U,KAAK+U,KAAK/T,WAAWgU,iBAAiB,SACpDF,EAAMG,SAAQ,SAAAC,GACZ,OAAAA,EAAErU,UAAUiC,OAAO,cACrB,OAAQ+R,GACN,IAAK,gBACH7U,KAAKmV,cAActU,UAAUC,IAAI,WACjC,MACF,IAAK,iBACHd,KAAKoV,eAAevU,UAAUC,IAAI,WAClC,MAIJd,KAAKqV,KAAOR,GAGN3C,EAAAxR,UAAA4U,SAAA,WACN,IAAIzB,EAAc7T,KAAKqD,MAAQrD,KAAKmD,OACpC,IAAI6Q,EAAYhU,KAAKiU,MAAM7L,wBAC3B,IAAImN,EAAavB,EAAU3Q,MAAQ2Q,EAAU7Q,OAE7C,GAAI0Q,EAAc0B,EAAW,CACzB,IAAIC,EAAexB,EAAU3Q,MAAQwQ,EACrC,IAAI/M,EAAOkN,EAAU7Q,OAASqS,EAC9BxV,KAAK+T,KAAKjS,MAAM4G,IAAMrC,KAAKM,MAAMG,EAAK,GAAGI,WAAa,KACtDlH,KAAK+T,KAAKjS,MAAMqB,OAASkD,KAAKM,MAAM6O,GAActO,WAAa,SAE/D,CACF,IAAIuO,EAAczB,EAAU7Q,OAAS0Q,EACrC,IAAI/M,EAAOkN,EAAU3Q,MAAQoS,EAC3BzV,KAAK+T,KAAKjS,MAAMyG,KAAOlC,KAAKM,MAAMG,EAAK,GAAGI,WAAa,KACvDlH,KAAK+T,KAAKjS,MAAMuB,MAAQgD,KAAKM,MAAM8O,GAAavO,WAAa,OAI3DgL,EAAAxR,UAAAgV,SAAA,WAAA,IAAA/T,EAAA3B,KACNA,KAAKiU,MAAMjM,iBAAiB,QAAQ,WAClCrG,EAAK2T,WACL3T,EAAKqR,eAEPhT,KAAKiU,MAAM0B,IAAM3V,KAAKkQ,OAAO0F,aAGvB1D,EAAAxR,UAAAmV,cAAA,SAAcpH,GAAd,IAAA9M,EAAA3B,KACN,GAAIyO,EAAKxO,KAAK6V,MAAM,KAAK,IAAM,QAAQ,CACrC,OAGF,IAAIC,EAAS,IAAIC,WACjBD,EAAOE,OAAS,SAAAC,GACd,IAAIC,EAAM,IAAIC,MACdD,EAAIF,OAAS,WACXtU,EAAKuO,OAAO7M,MAAQ8S,EAAI9S,MACxB1B,EAAKuO,OAAO/M,OAASgT,EAAIhT,OACzB,GAAIxB,EAAK2Q,oBAAsB6D,EAAI9S,MAAQ1B,EAAK0B,OAAS8S,EAAIhT,OAAQxB,EAAKwB,QAAQ,CAChFxB,EAAK0U,mBAAmB5U,OACxB,OAEF,IAAI6U,EAAM3U,EAAKuO,OAAOI,WAAW,MACjCgG,EAAI/F,UAAU4F,EAAI,EAAE,GACpBxU,EAAKiT,QAAQ,kBACbjT,EAAK+T,YAEPS,EAAIR,IAAMO,EAAgB5M,OAAOiE,OAAOrG,YAE1C6O,EAAOQ,cAAc9H,IAqDfyD,EAAAxR,UAAAsS,UAAA,WACN,IAAI3K,EAAIrI,KAAK+T,KAAKO,WAAatU,KAAKiU,MAAM5Q,MAAQrD,KAAKiU,MAAMO,aAC7D,IAAIhM,EAAIxI,KAAK+T,KAAKK,UAAYpU,KAAKiU,MAAM9Q,OAASnD,KAAKiU,MAAMuC,cAE7D,IAAI1C,EAAW9T,KAAK+T,KAAK3L,wBACzB,IAAI/E,EAAQyQ,EAASzQ,MAAQrD,KAAKiU,MAAM5Q,MAAQrD,KAAKiU,MAAMO,aAC3D,IAAIrR,EAAS2Q,EAAS3Q,OAASnD,KAAKiU,MAAM9Q,OAASnD,KAAKiU,MAAMuC,cAE9D,GAAInO,EAAI,EACNA,EAAI,EACN,GAAIA,EAAIrI,KAAKiU,MAAMO,aACjBnM,EAAIrI,KAAKiU,MAAMO,aACjB,GAAIhM,EAAI,EACNA,EAAI,EACN,GAAIA,EAAIxI,KAAKiU,MAAMO,aACjBhM,EAAIxI,KAAKiU,MAAMO,aACjB,GAAInR,EAAQrD,KAAKiU,MAAMO,aACrBnR,EAAQrD,KAAKiU,MAAMO,aACrB,GAAIrR,EAASnD,KAAKiU,MAAMuC,cACtBrT,EAASnD,KAAKiU,MAAMuC,cAEtB,IAAIC,EAAUzW,KAAK0W,qBAAqBrO,EAAGG,EAAGnF,EAAOF,EAAQnD,KAAKqD,MAAOrD,KAAKmD,QAC9EnD,KAAK2W,iBAAiBtV,KAAKoV,IAGrBvE,EAAAxR,UAAAgW,qBAAA,SAAqBrO,EAAWG,EAAWnF,EAAeF,EAAgByT,EAAsBC,GACtG7W,KAAKkQ,OAAO7M,MAAQuT,EACpB5W,KAAKkQ,OAAO/M,OAAS0T,EACrB,IAAMxG,EAAUrQ,KAAKkQ,OAAOI,WAAW,MACvCD,EAAQyG,UAAU,EAAG,EAAGF,EAAcC,GACtCxG,EAAQE,UAAUvQ,KAAKiU,MAAO5L,EAAGG,EAAGnF,EAAOF,EAAQ,EAAG,EAAGyT,EAAcC,GAEvE,OAAO7W,KAAKkQ,OAAO0F,UAAU,aAAc5V,KAAKqS,UAyI1CH,EAAAxR,UAAA+S,iBAAA,SAAiBH,GACvB,IAAI/K,EAAO,EACX,IAAIG,EAAM,EACV,OAAQ4K,GACN,KAAKhC,WAAW8B,GACd7K,EAAOvI,KAAK+T,KAAKO,WACjB5L,EAAM1I,KAAK+T,KAAKK,UAChB,MACF,KAAK9C,WAAW+B,GACd3K,EAAM1I,KAAK+T,KAAKK,UAChB,MAIJ,MAAO,CAAC1L,IAAGA,EAAEH,KAAIA,IA4BX2J,EAAAxR,UAAA6S,qBAAA,SAAqB9G,GAC3B,IAAIsK,EAAS,MACb,IAAIC,EACJ,IAAIC,EACJ,IAAMjD,EAAYhU,KAAKiU,MAAM7L,wBAE7B,GAAIqE,aAAiBkF,WAAW,CAC9BqF,EAASvK,EAAMnE,QACf2O,EAASxK,EAAMhE,QAGjB,UAAWmJ,aAAe,YAAY,CACpC,GAAInF,aAAiBmF,WAAW,CAC9B,IAAIC,EAAQpF,EAAMqF,QAAQ,GAC1BkF,EAASnF,EAAMvJ,QACf2O,EAASpF,EAAMpJ,SAInB,GACEuO,GAAUhD,EAAU3L,GACpB4O,GAAUjD,EAAUxL,GACpBwO,GAAUhD,EAAUzL,KAAOyL,EAAU3Q,OACrC4T,GAAUjD,EAAUtL,IAAMsL,EAAU7Q,OACtC,CACE4T,EAAS,KAGX,IAAIG,EAAUlX,KAAK+T,KAAKiB,iBAAiB,OACzCkC,EAAQjC,SAAQ,SAAA3B,GACd,IAAI6D,EAAa7D,EAAOlL,wBACxB,GACE4O,GAAUG,EAAW9O,GACrB4O,GAAUE,EAAW3O,GACrBwO,GAAUG,EAAW5O,KAAO4O,EAAW9T,OACvC4T,GAAUE,EAAWzO,IAAMyO,EAAWhU,OACtC,CACE4T,EAAS,SAIf,OAAOA,GAGT7E,EAAAxR,UAAAgB,OAAA,WAAA,IAAAC,EAAA3B,KACE,OACE4B,EAACC,KAAI,CAACoB,IAAK,SAAArC,GAAM,OAAAe,EAAKoT,KAAOnU,IAC3BgB,EAAA,SAAA,CAAQqB,IAAK,SAAArC,GAAM,OAAAe,EAAKuO,OAAStP,KACjCgB,EAAA,MAAA,CACEI,MAAM,OACNiB,IAAK,SAAArC,GAAM,OAAAe,EAAKyT,eAAiBxU,IAEjCgB,EAAA,MAAA,CAAKI,MAAM,WACTJ,EAAA,MAAA,CAAKqB,IAAK,SAAArC,GAAM,OAAAe,EAAKsS,MAAQrT,KAC7BgB,EAAA,MAAA,CAAKI,MAAM,aACXJ,EAAA,MAAA,CACEI,MAAM,OACNiB,IAAK,SAAA2E,GAAK,OAAAjG,EAAKoS,KAAOnM,GACtBkD,YAAa9K,KAAKuS,oBAClB6E,aAAcpX,KAAKuS,qBAEnB3Q,EAAA,MAAA,CAAKI,MAAM,OACXJ,EAAA,MAAA,CAAKI,MAAM,OACXJ,EAAA,MAAA,CAAKI,MAAM,OACXJ,EAAA,MAAA,CAAKI,MAAM,UAIjBJ,EAAA,MAAA,CACEI,MAAM,OACNiB,IAAK,SAAArC,GAAM,OAAAe,EAAKwT,cAAgBvU,IAC9BgB,EAAA,eAAA,CACEwK,gBAAe,KACfiL,gBAAiB,SAAAzP,GAAK,OAAAjG,EAAKkU,cAAcjO,EAAE0P,OAAO,KAClDxL,KACE,CACEE,QAAShM,KAAK8L,KAAKE,QACnBD,gBAAiB/L,KAAK8L,KAAKC,gBAC3BE,GAAIjM,KAAK8L,KAAKG,GACdC,YAAalM,KAAK8L,KAAKI,YACvBC,WAAYnM,KAAK8L,KAAKK,eAKhCvK,EAAA,YAAA,CAAWqB,IAAK,SAAArC,GAAM,OAAAe,EAAK0U,mBAAqBzV,GAAE2W,aAAcvX,KAAK8L,KAAKsG,gBACxExQ,EAAA,IAAA,KAAI5B,KAAK8L,KAAKqG,cAAcqF,QAAQ,UAAWxX,KAAKqD,MAAM6D,YAAYsQ,QAAQ,WAAYxX,KAAKmD,OAAO+D,yBAtdpF,4CCd5B,IAAMuQ,YAAc,4lDCOPC,SAAQ,WALrB,SAAAC,EAAA5X,2EAYUC,KAAAmC,gBAA2B,KAM3BnC,KAAA4X,UAAqB,cAOrB5X,KAAAkC,gBAA4B,KAE3BlC,KAAA6X,QAAmB,MAMtBF,EAAAjX,UAAAe,KAAN,gGACEzB,KAAK6X,QAAU,sBAOXF,EAAAjX,UAAAS,KAAN,gGACEnB,KAAK6X,QAAU,uBAQTF,EAAAjX,UAAAoX,cAAA,WACN9X,KAAK6X,QAAU,MACf7X,KAAK+X,UAAU1W,QAGTsW,EAAAjX,UAAAsX,oBAAA,SAAoBpQ,GAC1B,IAAMgD,EAAWhD,EAAE0B,OACnB,GAAIsB,EAAQlH,KAAO,YAAc1D,KAAKmC,gBAAgB,CACpDnC,KAAK8X,kBAITH,EAAAjX,UAAAgB,OAAA,WAAA,IAAAC,EAAA3B,KACE,OACE4B,EAACC,KAAI,KACHD,EAAA,MAAA,CAAK8B,GAAG,WACN1B,MAAOhC,KAAK6X,QAAU,kBAAoB,UAC1C5V,QAAS,SAAA2F,GAAK,OAAAjG,EAAKqW,oBAAoBpQ,KAEvChG,EAAA,MAAA,CAAKI,MAAM,SACRhC,KAAKkC,iBACJN,EAAA,SAAA,CACEI,MAAM,QAAOmC,aACDnE,KAAK4X,UACjB3V,QAAS,WAAM,OAAAN,EAAKmW,kBAEpBlW,EAAA,MAAA,CAAKsB,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAU1B,EAAA,OAAA,CAAM2B,EAAE,gBAAgBD,KAAK,SAAQ1B,EAAA,OAAA,CAAM2B,EAAE,sLAGvJ3B,EAAA,OAAA,wIA1ES,8BCPrB,IAAMqW,gBAAkB,ggDCOXC,aAAY,WALzB,SAAAA,EAAAnY,iFAUUC,KAAAmY,YAAuB,GAKvBnY,KAAAoY,UAAqB,KAGNpY,KAAAqY,MAAgB,GASvCH,EAAAxX,UAAA4X,iBAAA,WACE,GAAItY,KAAKoY,UAAU,CACjBpY,KAAKuY,kCAEH,CACFvY,KAAKwY,uBAIDN,EAAAxX,UAAA8X,mBAAA,WACNxY,KAAKyY,aAAapX,KAAKrB,KAAKqY,QAItBH,EAAAxX,UAAA6X,4BAAA,WACNvY,KAAKwY,sBAIPN,EAAAxX,UAAAgB,OAAA,WAAA,IAAAC,EAAA3B,KACE,OACE4B,EAACC,KAAI,KACHD,EAAA,QAAA,CAAO3B,KAAK,OAAOsF,MAAOvF,KAAKqY,MAC7BF,YAAanY,KAAKmY,YAClBO,QAAS,SAAA9Q,GAAK,OAAAjG,EAAK0W,MAASzQ,EAAE0B,OAA4B/D,SAE3DvF,KAAKqY,QAAU,GACdzW,EAAA,SAAA,CAAQI,MAAM,YACZC,QAAS,WAAM,OAAAN,EAAK0W,MAAQ,KAE5BzW,EAAA,MAAA,CAAKsB,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAU1B,EAAA,OAAA,CAAM2B,EAAE,gBAAgBD,KAAK,SAAQ1B,EAAA,OAAA,CAAM2B,EAAE,sLAGvJ3B,EAAA,MAAA,CAAKsB,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAU1B,EAAA,OAAA,CAAM2B,EAAE,gBAAgBD,KAAK,SAAQ1B,EAAA,OAAA,CAAM2B,EAAE,uXAvDlI,GAoCvBmI,WAAA,CADCC,SAAS,oGC1CZ,IAAMgN,eAAiB,6aCOVC,YAAW,WALxB,SAAAA,EAAA7Y,+EAOUC,KAAA6Y,cAAyC,OAKzCD,EAAAlY,UAAAoY,WAAA,WACN,OAAQ9Y,KAAK6Y,eACX,IAAK,MACH7Y,KAAK6Y,cAAgB,OACrB,MACF,IAAK,OACH7Y,KAAK6Y,cAAgB,MACrB,MACF,IAAK,OACH7Y,KAAK6Y,cAAgB,MACrB,MAKJ7Y,KAAK+Y,YAAY1X,KAAKrB,KAAK6Y,gBAG7BD,EAAAlY,UAAAgB,OAAA,WAAA,IAAAC,EAAA3B,KACE,OACE4B,EAACC,KAAI,KACHD,EAAA,SAAA,CACEI,MAAO,CAACgX,OAAUhZ,KAAK6Y,eAAiB,QACxC5W,QAAS,WAAM,OAAAN,EAAKmX,eAEnB9Y,KAAK6Y,eAAiB,QACrBjX,EAAA,MAAA,CAAKsB,MAAM,6BAA6BE,QAAQ,aAAYxB,EAAA,OAAA,CAAM2B,EAAE,4CAErEvD,KAAK6Y,eAAiB,OACrBjX,EAAA,MAAA,CAAKsB,MAAM,6BAA6BE,QAAQ,aAAYxB,EAAA,OAAA,CAAM2B,EAAE,wBAErEvD,KAAK6Y,eAAiB,QACrBjX,EAAA,MAAA,CAAKsB,MAAM,6BAA6BE,QAAQ,aAAYxB,EAAA,OAAA,CAAM2B,EAAE,qCAvCxD,oCCPxB,IAAM0V,UAAY,OCQLC,OAAM,WALnB,SAAAC,EAAApZ,4BASaC,KAAA6X,QAAmB,MAItBsB,EAAAzY,UAAAe,KAAN,gGACIzB,KAAK6X,QAAU,sBAKbsB,EAAAzY,UAAAS,KAAN,gGACInB,KAAK6X,QAAU,uBAGnBsB,EAAAzY,UAAAgB,OAAA,WACI,OACIE,EAACC,KAAI,KACA7B,KAAK6X,SACFjW,EAAA,OAAA,iBAtBD,0BCRnB,IAAMwX,WAAa,4yBCONC,QAAO,WALpB,SAAAA,EAAAtZ,4BAQaC,KAAAsZ,UAAsB,GACtBtZ,KAAAuZ,iBAA2B,GAEpCF,EAAA3Y,UAAAC,iBAAA,WAAA,IAAAgB,EAAA3B,KACIyE,uBAAsB,WAClB9C,EAAK6X,eACL7X,EAAK8X,mBAILJ,EAAA3Y,UAAAgZ,QAAA,WACJ,OAAO1Z,KAAKyJ,UAAUzI,WAAWC,cAAc,QAAQ0Y,oBAGnDN,EAAA3Y,UAAA8Y,aAAA,WAAA,IAAA7X,EAAA3B,KACJ,IAAM4Z,EAAO5Z,KAAK0Z,UAClBE,EAAK3E,SAAQ,SAAA4E,GAAO,OAAAlY,EAAK2X,UAASQ,cAAAA,cAAA,GAAOnY,EAAK2X,WAAS,CAAEO,EAAIE,eAGzDV,EAAA3Y,UAAA+Y,aAAA,WACJ,IAAMI,EAAM7Z,KAAK0Z,UAAU,GAC3BG,EAAIpY,OACJzB,KAAKuZ,iBAAmBM,EAAIE,UAGxBV,EAAA3Y,UAAAsZ,QAAA,SAAQD,GACZ,IAAMH,EAAO5Z,KAAK0Z,UAClBE,EAAK3E,SAAQ,SAAA4E,GACT,GAAIA,EAAIE,UAAYA,EAAS,CACzBF,EAAIpY,OACJ,OAGJoY,EAAI1Y,UAERnB,KAAKuZ,iBAAmBQ,GAG5BV,EAAA3Y,UAAAgB,OAAA,WAAA,IAAAC,EAAA3B,KACI,OACI4B,EAACC,KAAI,CAACoB,IAAK,SAAArC,GAAM,OAAAe,EAAK8H,UAAY7I,IAC9BgB,EAAA,MAAA,CAAKI,MAAM,aACNhC,KAAKsZ,UAAU5L,KAAI,SAAAqM,GAChB,OAAAnY,EAAA,SAAA,CACII,MAAOL,EAAK4X,kBAAoBQ,EAAW,UAAW,GACtD9X,QAAS,WAAM,OAAAN,EAAKqY,QAAQD,KAE3BA,OAIbnY,EAAA,MAAA,CAAKI,MAAM,cACPJ,EAAA,OAAA,kBAvDA,4BCPpB,IAAMqY,aAAe,q9BCSRC,UAAS,WALtB,SAAAA,EAAAna,iFAU2BC,KAAAyC,QAAU,MAGzBzC,KAAAQ,SAAW,MAMnB0Z,EAAAxZ,UAAAyZ,eAAA,SAAeC,GACXpa,KAAKqa,aAAahZ,KAAK,CAACoB,QAAS2X,KAGrCF,EAAAxZ,UAAAgB,OAAA,WAAA,IAAAC,EAAA3B,KACI,OACI4B,EAACC,KAAI,KACDD,EAAA,SAAA,CAAQpB,SAAUR,KAAKQ,SAAUwB,MAAO,CAACS,QAAWzC,KAAKyC,SACrDR,QAAS,WACL,IAAKN,EAAKnB,SAAU,CAChBmB,EAAKc,SAAWd,EAAKc,WAI7Bb,EAAA,MAAA,CAAKI,MAAM,6QA5BT,gCCTtB,IAAMsY,mBAAqB,45BCOdC,gBAAe,WAL5B,SAAAA,EAAAxa,wIAYyBC,KAAA+D,SAAoB,MAQlC/D,KAAAwa,YAAuB,MAKhCD,EAAA7Z,UAAAC,iBAAA,WAAA,IAAAgB,EAAA3B,KACEyE,uBAAsB,WACpB,IAAMgW,EAAW9Y,EAAK+Y,gBAAgBD,SAAS,GAC/C,IAAME,EAAQF,EAASd,mBAAmBxS,OAC1C,GAAIwT,EAAQ,EAAE,CACZhZ,EAAK6Y,YAAc,KAErB,GAAI7Y,EAAKoC,SAAS,CAChBpC,EAAKiZ,SAAS/Z,UAAUC,IAAI,YAC5Ba,EAAKkZ,YAAY9W,SAAW,MAC5Be,YAAW,WACTnD,EAAKkZ,YAAY9W,SAAW,OAC3B,UAKDwW,EAAA7Z,UAAAoa,eAAA,WACN9a,KAAK+D,UAAY/D,KAAK+D,SACtB,GAAI/D,KAAK+D,SAAS,CAChB/D,KAAK4a,SAAS/Z,UAAUC,IAAI,YAC5Bd,KAAK+a,aAAa1Z,OAClB,OAGFrB,KAAK4a,SAAS/Z,UAAUiC,OAAO,YAC/B9C,KAAKgb,cAAc3Z,QAGrBkZ,EAAA7Z,UAAAgB,OAAA,WAAA,IAAAC,EAAA3B,KACE,OACE4B,EAACC,KAAI,KACHD,EAAA,MAAA,CAAKI,MAAM,WAAWiB,IAAK,SAAArC,GAAM,OAAAe,EAAKiZ,SAAWha,IAC9CZ,KAAKwa,aACJ5Y,EAAA,SAAA,CACEK,QAAS,WAAM,OAAAN,EAAKmZ,mBAEpBlZ,EAAA,MAAA,CAAKsB,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAU1B,EAAA,OAAA,CAAM2B,EAAE,uBAAsB3B,EAAA,OAAA,CAAM2B,EAAE,mBAAmBD,KAAK,YAI1K1B,EAAA,MAAA,CAAKI,MAAM,QACTJ,EAAA,MAAA,CAAKI,MAAM,aACTJ,EAAA,OAAA,OAEFA,EAAA,kBAAA,CAAiBqB,IAAK,SAAArC,GAAM,OAAAe,EAAKkZ,YAAcja,GAAImD,SAAU/D,KAAK+D,UAChEnC,EAAA,MAAA,CAAKqB,IAAK,SAAArC,GAAM,OAAAe,EAAK+Y,gBAAkB9Z,IACrCgB,EAAA,OAAA,CAAMqN,KAAK,gJAnEG,4CCP5B,IAAMgM,2BAA6B,stCCOtBC,wBAAuB,WALpC,SAAAA,EAAAnb,4BASWC,KAAAmb,mBAAqB,MACrBnb,KAAAob,iBAAmB,MAMpBpb,KAAAqb,kBAAoB,EAE5BH,EAAAxa,UAAA4a,mBAAA,WAAA,IAAA3Z,EAAA3B,KACEyE,uBAAsB,WACpB9C,EAAK4Z,iCACL5Z,EAAK6Z,eAAiB,IAAIC,gBAAe,SAAAC,GACvC,IAAkB,IAAAC,EAAA,EAAAC,EAAAF,EAAAC,EAAAC,EAAAzU,OAAAwU,IAAQ,CAArB,IAAIE,EAAKD,EAAAD,GACZ,GAAIE,EAAMC,YAAYzY,MAAQ1B,EAAK0Z,kBAAkB,CACnD1Z,EAAK4Z,iCAEP,GAAI5Z,EAAK0Z,kBAAoB,GAAKQ,EAAMC,YAAYzY,MAAQ1B,EAAK0Z,kBAAkB,CACjF1Z,EAAKoa,4BAEPpa,EAAK0Z,kBAAoBQ,EAAMC,YAAYzY,UAG/C1B,EAAK6Z,eAAeQ,QAAQra,EAAKiJ,aAI7BsQ,EAAAxa,UAAA6a,+BAAA,WAAA,IAAA5Z,EAAA3B,KACN,IAAMic,EAAYC,MAAMC,KAAKnc,KAAKoc,KAAKnb,cAAc,QAAQ0Y,oBAC7D,IAAM0C,EAAiBrc,KAAKoc,KAAKhU,wBAAwB/E,MACzD,IAAIiZ,EAAcC,WAAWC,iBAAiBxc,KAAK4K,SAAS6R,UAAU,EACtER,EAAUhH,SAAQ,SAAAyH,GAAQ,OAAAJ,GAAe3a,EAAKgb,aAAaD,MAC3DJ,IAAgBL,EAAU9U,OAAS,GAAKoV,WAAWC,iBAAiBxc,KAAK4K,SAAS6R,UAClF,GAAIH,EAAcD,EAAe,CAC/Brc,KAAKmb,mBAAqB,KAC1B,IAAIyB,EAAWX,EAAUA,EAAU9U,OAAQ,GAC3C,GAAInH,KAAK6c,UAAY9Z,UAAU,CAC7B,OAEF6Z,EAASE,KAAO,WAChB9c,KAAKub,mCAIDL,EAAAxa,UAAAqb,0BAAA,WAAA,IAAApa,EAAA3B,KACN,GAAIA,KAAK6c,UAAY9Z,YAAc/C,KAAK6c,SAASE,gBAAgB,CAC/D,OAEF,IAAMd,EAAYC,MAAMC,KAAKnc,KAAKoc,KAAKnb,cAAc,QAAQ0Y,oBAC7D,IAAM0C,EAAiBrc,KAAKoc,KAAKhU,wBAAwB/E,MACzD,IAAIiZ,EAAcC,WAAWC,iBAAiBxc,KAAK4K,SAAS6R,UAAU,EACtEH,IAAgBL,EAAU9U,OAAS,GAAKoV,WAAWC,iBAAiBxc,KAAK4K,SAAS6R,UAClFR,EAAUhH,SAAQ,SAAAyH,GAAQ,OAAAJ,GAAe3a,EAAKgb,aAAaD,MAC3D,IAAMM,EAAYhd,KAAK6c,SAAS5b,cAAc,QAAQ0Y,mBAAmB,GACzE,GAAIqD,GAAaja,UAAU,CACzBuZ,GAAetc,KAAK2c,aAAaK,GAGnC,GAAIV,EAAcD,EAAe,CAC/B,GAAIW,GAAaja,UAAU,CACzBia,EAAUF,KAAO,GAEnB,GAAGE,GAAaja,UAAU,CACxB/C,KAAK6c,SAAShc,UAAUiC,OAAO,WAC/B9C,KAAKob,iBAAmB,MACxBpb,KAAKmb,mBAAqB,SAKxBD,EAAAxa,UAAAic,aAAA,SAAaD,GACnB,IAAIrZ,EAAQqZ,EAAKtU,wBAAwB/E,MACzC,IAAI4Z,EAAST,iBAAiBE,GAC9BrZ,GAASkZ,WAAWU,EAAOC,YAC3B7Z,GAASkZ,WAAWU,EAAOE,aAC3B9Z,GAASkZ,WAAWU,EAAOG,aAC3B/Z,GAASkZ,WAAWU,EAAOI,cAC3B,OAAOha,GAGD6X,EAAAxa,UAAA4c,mBAAA,WAAA,IAAA3b,EAAA3B,KACNA,KAAKob,kBAAoBpb,KAAKob,iBAC9B,GAAIpb,KAAKob,iBAAiB,CACxBpb,KAAK6c,SAAShc,UAAUC,IAAI,WAC5B,IAAIyc,EAAgB,EACpB,IAAMC,EAAQtB,MAAMC,KAAKnc,KAAK6c,SAAS5b,cAAc,QAAQ0Y,oBAC7D6D,EAAMvI,SAAQ,SAAAyH,GAAQ,OAAAa,GAAiBb,EAAKtU,wBAAwBjF,UACpE,IAAIsa,EAAWlB,WAAWC,iBAAiBxc,KAAK6c,UAAUJ,UAAY,GACtE,IAAIiB,EAAmBD,GAAYzd,KAAK6c,SAASpC,SAAStT,OAAS,GACnEoW,GAAiBG,EACjB1d,KAAK6c,SAAS/a,MAAMqB,OAAYoa,EAAa,KAC7C,IAAMI,EAAc,SAAC/V,GACnB,IAAMgW,EAAajc,EAAKkB,OAAOuF,wBAC/B,GACER,EAAEU,QAAUsV,EAAWrV,MACvBX,EAAEU,QAAUsV,EAAWC,OACvBjW,EAAEa,QAAUmV,EAAWlV,KACvBd,EAAEa,QAAUmV,EAAWxS,OAAO,CAC5BzJ,EAAK2b,qBAEPnN,SAASpH,oBAAoB,QAAS4U,IAE1C7Y,YAAW,WACTqL,SAASnI,iBAAiB,QAAS2V,EAAa,SAC/C,SAED,CACF3d,KAAK6c,SAAShc,UAAUiC,OAAO,WAC/B9C,KAAK6c,SAAS/a,MAAMqB,OAAS,QAIjC+X,EAAAxa,UAAAgB,OAAA,WAAA,IAAAC,EAAA3B,KACE,OACE4B,EAACC,KAAI,KACHD,EAAA,MAAA,CAAKI,MAAM,kBACTJ,EAAA,MAAA,CAAKI,MAAM,OAAOiB,IAAK,SAAArC,GAAM,OAAAe,EAAKya,KAAOxb,IACvCgB,EAAA,OAAA,OAEC5B,KAAKmb,oBACJvZ,EAAA,MAAA,CAAKI,MAAM,YACTJ,EAAA,SAAA,CACEqB,IAAK,SAAArC,GAAM,OAAAe,EAAKkB,OAASjC,GACzBoB,MAAM,OACNC,QAAS,WAAM,OAAAN,EAAK2b,uBACpB1b,EAAA,MAAA,CAAKsB,MAAM,6BAA6BC,OAAO,OAAOC,QAAQ,YAAYC,MAAM,OAAOC,KAAK,WAAU1B,EAAA,OAAA,CAAM2B,EAAE,gBAAgBD,KAAK,SAAQ1B,EAAA,OAAA,CAAM2B,EAAE,wJAErJ3B,EAAA,MAAA,CAAKI,MAAM,WAAWiB,IAAK,SAAArC,GAAM,OAAAe,EAAKkb,SAAWjc,IAC/CgB,EAAA,OAAA,CAAMqN,KAAK,qJApIO,4DCPpC,IAAM6O,wBAA0B,yqBCanBC,qBAAoB,WALjC,SAAAC,EAAAje,iFAQUC,KAAAie,cAAgB,GAGhBje,KAAAke,qBAAuB,GAwCtBle,KAAAme,UAAY,EACZne,KAAAoe,WAAa,EAnChBJ,EAAAtd,UAAA2d,wBAAN,SAA8B3K,yGACtB4K,EAAQte,KAAK4K,QAAQ5J,WAAWgU,iBAAiB,SACvDvQ,uBAAsB,WACpB6Z,EAAMrJ,SAAQ,SAAAsJ,GAAQ,OAAAA,EAAK1d,UAAUC,IAAI,iBACzCa,EAAK6c,SAAS3d,UAAUC,IAAI,cAC5B2D,uBAAsB,WACpB,IAAMga,EAAY9c,EAAKiJ,QAAQxC,wBAAwB/E,MACvD,IAAIqR,EAAU+J,EAAY/K,EAAW,IACrC,GAAIgB,EAAU,EAAE,CACdA,EAAU,EAEZ,GAAIA,EAAU+J,EAAU,CACtB/J,EAAU+J,EAEZ9c,EAAKwc,UAAYzJ,EACjB/S,EAAKyc,WAAaK,EAAY/J,EAC9B5P,YAAW,WACTwZ,EAAMrJ,SAAQ,SAAAsJ,GAAQ,OAAAA,EAAK1d,UAAUiC,OAAO,iBAC5CnB,EAAK6c,SAAS3d,UAAUiC,OAAO,gBAC9B,4BAOHkb,EAAAtd,UAAAge,wBAAN,sGACQD,EAAYze,KAAK4K,QAAQxC,wBAAwB/E,MACvD,MAAA,CAAA,EAAOrD,KAAKme,UAAYM,UAW1BT,EAAAtd,UAAAC,iBAAA,WAAA,IAAAgB,EAAA3B,KACEyE,uBAAsB,WACpB,IAAMga,EAAY9c,EAAKiJ,QAAQxC,wBAAwB/E,MACvD1B,EAAKwc,UAAYM,EAAY9c,EAAKuc,qBAAuB,IACzDvc,EAAKyc,WAAaK,EAAY9c,EAAKwc,UACnCxc,EAAKgd,aAAatd,KAAKM,EAAKuc,0BAMxBF,EAAAtd,UAAAke,gBAAA,SAAgBnS,GAAhB,IAAA9K,EAAA3B,KACNyM,EAAM5E,iBACN,IAAMgX,EAAa,SAACpK,GACb,IAAAhD,EAAaF,qBAAqBkD,EAAI9S,EAAK6P,eAAcC,UAC9D,IAAIgN,EAAY9c,EAAKiJ,QAAQxC,wBAAwB/E,MACrD,IAAIqR,EAAU/S,EAAKwc,UAAY1M,EAC/B,GAAIiD,EAAU,EAAE,CACdA,EAAU,EAEZ,GAAIA,EAAU+J,EAAU,CACtB/J,EAAU+J,EAEZ9c,EAAKwc,UAAYzJ,EACjB/S,EAAKyc,WAAaK,EAAY/J,GAEhC,IAAMoK,EAAqB,WACzB3O,SAASpH,oBAAoB,YAAa8V,GAC1C1O,SAASpH,oBAAoB,YAAa8V,GAC1C,IAAMJ,EAAY9c,EAAKiJ,QAAQxC,wBAAwB/E,MACvD,IAAM0b,EAAgBpd,EAAKwc,UAAYM,EAAY,IACnD9c,EAAKgd,aAAatd,KAAK0d,IAEzB5O,SAASnI,iBAAiB,UAAW8W,GACrC3O,SAASnI,iBAAiB,WAAY8W,GACtC3O,SAASnI,iBAAiB,YAAa6W,GACvC1O,SAASnI,iBAAiB,YAAa6W,IAGjCb,EAAAtd,UAAAse,cAAA,SAAcpX,GACpB,IAAI6J,EAAY,EAChB,OAAQ7J,EAAEiC,KACR,IAAK,YACH4H,GAAa,GACb,MACF,IAAK,aACHA,EAAY,GACZ,MACF,QACE,OAEJ,GAAI7J,EAAEgC,SAAS,CACb6H,EAAYA,EAAY,GAE1B,IAAMgN,EAAYze,KAAK4K,QAAQxC,wBAAwB/E,MACvD,IAAIqR,EAAU1U,KAAKme,UAAY1M,EAC/B,GAAIiD,EAAU,EAAE,CACdA,EAAU,EAEZ,GAAIA,EAAU+J,EAAU,CACtB/J,EAAU+J,EAEZze,KAAKme,UAAYzJ,EACjB1U,KAAKoe,WAAaK,EAAYze,KAAKme,WAGrCH,EAAAtd,UAAAgB,OAAA,WAAA,IAAAC,EAAA3B,KACE,OACE4B,EAACC,KAAI,KACDD,EAAA,MAAA,CAAKI,MAAM,YAAYF,MAAO,CAC5BuB,MAAUrD,KAAKme,UAAS,OAExBvc,EAAA,OAAA,CAAMqN,KAAK,UAEbrN,EAAA,SAAA,CACEkJ,YAAa,SAAAlD,GAAK,OAAAjG,EAAKid,gBAAgBhX,IACvCwP,aAAc,SAAAxP,GAAK,OAAAjG,EAAKid,gBAAgBhX,IACxCyD,UAAW,SAAAzD,GAAK,OAAAjG,EAAKqd,cAAcpX,IACnC3E,IAAK,SAAArC,GAAM,OAAAe,EAAK6c,SAAW5d,GAC3BkB,MAAO,CACLmd,SAAajf,KAAKie,cAAc/W,WAAU,KAC1CqB,KAASvI,KAAKme,UAAY,EAAC,OAG7Bvc,EAAA,OAAA,OAEFA,EAAA,MAAA,CACEI,MAAM,aACNF,MAAO,CACLuB,MAAUrD,KAAKoe,WAAU,OAE3Bxc,EAAA,OAAA,CAAMqN,KAAK,gJA9IU","sourcesContent":[":host {\r\n --background-color: transparent;\r\n --color: #333;\r\n --border-size: 1px;\r\n --border-color: var(--backround-color);\r\n --border-radius: var(--dnn-controls-radius, 5px);\r\n --padding: var(--dnn-controls-padding, 5px);\r\n display: inline-block;\r\n width: auto;\r\n}\r\n\r\n:host(.disabled){\r\n pointer-events: none;\r\n}\r\n\r\n:host(.primary){\r\n --background-color: var(--dnn-color-primary, blue);\r\n --color: var(--dnn-color-primary-contrast, white);\r\n --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.primary.reversed){\r\n --background-color: var(--dnn-color-primary-contrast, white);\r\n --color: var(--dnn-color-primary, blue);\r\n --border-color: var(--dnn-color-primary, blue);\r\n --focus-color: var(--color);\r\n}\r\n\r\n:host(.secondary){\r\n --background-color: var(--dnn-color-secondary, green);\r\n --color: var(--dnn-color-secondary-contrast, white);\r\n --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.secondary.reversed){\r\n --background-color: var(--dnn-color-secondary-contrast, white);\r\n --color: var(--dnn-color-secondary, blue);\r\n --border-color: var(--dnn-color-secondary, blue);\r\n --focus-color: var(--color);\r\n}\r\n\r\n:host(.tertiary){\r\n --background-color: var(--dnn-color-tertiary, yellow);\r\n --color: var(--dnn-color-tertiary-contrast, black);\r\n --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.tertiary.reversed){\r\n --background-color: var(--dnn-color-tertiary-contrast, white);\r\n --color: var(--dnn-color-tertiary, blue);\r\n --border-color: var(--dnn-color-tertiary, blue);\r\n --focus-color: var(--color);\r\n}\r\n\r\n:host(.hydrated){\r\n button{\r\n border: var(--border-size) solid var(--border-color);\r\n border-radius: var(--border-radius);\r\n padding: var(--padding) calc(var(--padding) * 2);\r\n background-color: transparent;\r\n background-color: var(--background-color);\r\n color: var(--color);\r\n outline: none;\r\n &:focus, &:hover{\r\n box-shadow: 0 0 2px 2px var(--focus-color);\r\n }\r\n }\r\n}\r\n\r\n:host(:disabled, [disabled]){\r\n button{\r\n pointer-events: none;\r\n opacity: 0.5;\r\n }\r\n}\r\n\r\n:host(.small){\r\n button{\r\n padding: calc(var(--padding) / 2) var(--padding);\r\n font-size: 0.7em;\r\n }\r\n}\r\n\r\n:host(.large){\r\n button{\r\n padding: calc(var(--padding) * 1.5) calc(var(--padding) * 3);\r\n font-size: 1.2em;\r\n }\r\n}\r\n\r\nbutton{\r\n height: 100%;\r\n width: 100%;\r\n cursor: pointer;\r\n}","import { Component, Element, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\r\n\r\n/**\r\n * @slot Content of the button\r\n */\r\n@Component({\r\n tag: 'dnn-button',\r\n styleUrl: 'dnn-button.scss',\r\n shadow: true\r\n})\r\nexport class DnnButton {\r\n\r\n /**\r\n * Optional button style,\r\n * can be either primary, secondary or tertiary and defaults to primary if not specified\r\n */\r\n @Prop() type: 'primary' | 'secondary' | 'tertiary' = 'primary';\r\n\r\n /**\r\n * Optionally reverses the button style.\r\n */\r\n @Prop() reversed: boolean = false;\r\n\r\n /**\r\n * Optionally sets the button size, small normal or large, defaults to normal\r\n */\r\n @Prop() size?: 'small' | 'normal' | 'large' = 'normal';\r\n\r\n /**\r\n * Optionally add a confirmation dialog before firing the action.\r\n */\r\n @Prop() confirm?: boolean = false;\r\n\r\n /**\r\n * The text of the yes button for confirmation.\r\n */\r\n @Prop() confirmYesText?: string = \"Yes\";\r\n\r\n /**\r\n * The text of the no button for confirmation.\r\n */\r\n @Prop() confirmNoText?: string = \"No\";\r\n\r\n /**\r\n * The text of the confirmation message;\r\n */\r\n @Prop() confirmMessage?: string = \"Are you sure ?\";\r\n \r\n /**\r\n * Disables the button\r\n */\r\n @Prop() disabled: boolean = false;\r\n\r\n @State() modalVisible: boolean = false;\r\n\r\n @Element() el!: HTMLDnnButtonElement;\r\n\r\n private modal!: HTMLDnnModalElement;\r\n\r\n /** \r\n * Fires when confirm is true and the user confirms the action.\r\n */\r\n @Event({\r\n eventName: 'confirmed',\r\n bubbles: false,\r\n cancelable: true,\r\n composed: true\r\n }) confirmed: EventEmitter;\r\n\r\n /**\r\n * Fires when confirm is true and the user cancels the action.\r\n */\r\n @Event({bubbles: false}) canceled: EventEmitter;\r\n\r\n componentDidLoad(){\r\n this.el.classList.add(this.type);\r\n \r\n if (this.reversed){\r\n this.el.classList.add('reversed');\r\n }\r\n\r\n if (this.size !== 'normal'){\r\n this.el.classList.add(this.size);\r\n }\r\n\r\n this.modal = this.el.shadowRoot.querySelector('dnn-modal');\r\n }\r\n\r\n private handleConfirm(){\r\n this.modal.hide();\r\n this.modalVisible = false;\r\n this.confirmed.emit();\r\n }\r\n\r\n private handleCancel(){\r\n this.modal.hide();\r\n this.modalVisible = false;\r\n this.canceled.emit();\r\n }\r\n \r\n private handleClick(): void {\r\n if (this.confirm && !this.modalVisible){\r\n this.modal.show();\r\n this.modalVisible = true;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host disabled={this.disabled} style={{'pointer-events': this.disabled ? 'none' : 'all'}}>\r\n <button class=\"button\" onClick={() => this.handleClick()} disabled={this.disabled}>\r\n <slot></slot>\r\n </button>\r\n {this.confirm &&\r\n <dnn-modal showCloseButton={false} backdropDismiss={false}>\r\n <p>{this.confirmMessage}</p>\r\n <div style={\r\n {\r\n display: 'flex',\r\n justifyContent: 'flex-end'\r\n }\r\n }>\r\n <dnn-button type='primary' style={{margin: '5px'}} onClick={() => this.handleConfirm()}>{this.confirmYesText}</dnn-button>\r\n <dnn-button type='secondary' style={{margin: '5px'}} onClick={() => this.handleCancel()}>{this.confirmNoText}</dnn-button>\r\n </div>\r\n </dnn-modal>\r\n }\r\n </Host>\r\n );\r\n }\r\n \r\n\r\n}\r\n",":host {\r\n /**\r\n * @prop --focus-color: The color to outline the checkbox when hovered or focused, default to the dnn primary color.\r\n */\r\n --focus-color: var(--dnn-color-primary, #3792ED);\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.25rem;\r\n margin: 3px;\r\n}\r\nbutton{\r\n background-color: transparent;\r\n border: 0;\r\n padding: 0;\r\n margin: 0;\r\n outline: none;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n svg.undefined{\r\n opacity: 0.45;\r\n }\r\n &:focus{\r\n box-shadow: 0 0 2px 2px var(--focus-color);\r\n }\r\n}","import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dnn-checkbox',\r\n styleUrl: 'dnn-checkbox.scss',\r\n shadow: true,\r\n})\r\nexport class DnnCheckbox {\r\n @Element() el: HTMLDnnCheckboxElement;\r\n\r\n /** Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) */\r\n @Prop({mutable: true}) checked: boolean | undefined = false;\r\n\r\n /** Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) */\r\n @Prop() useIntermediate: boolean = false;\r\n\r\n /** The value for this checkbox (not to be confused with its checked state). */\r\n @Prop() value: string;\r\n\r\n /** Fires up when the checkbox checked property changes. */\r\n @Event() checkedchange: EventEmitter<boolean | undefined>;\r\n \r\n private button: HTMLButtonElement;\r\n\r\n private changeState(): void {\r\n if (!this.useIntermediate){\r\n this.checked = !this.checked;\r\n this.emitEvents();\r\n return;\r\n }\r\n if (this.checked === true){\r\n this.checked = false;\r\n this.button.classList.remove(\"undefined\");\r\n this.emitEvents();\r\n return;\r\n }\r\n if (this.checked === undefined){\r\n this.checked = true;\r\n this.button.classList.remove(\"undefined\");\r\n this.emitEvents();\r\n return;\r\n }\r\n if (this.checked === false){\r\n this.checked = undefined;\r\n this.button.classList.add(\"undefined\");\r\n this.emitEvents();\r\n return;\r\n }\r\n }\r\n\r\n private emitEvents() {\r\n this.checkedchange.emit(this.checked);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button class=\"icon\" onClick={() => this.changeState()} ref={el => this.button = el}>\r\n {this.checked === false &&\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><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\"/></svg>\r\n }\r\n {this.checked === true &&\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/></svg>\r\n }\r\n {this.checked === undefined &&\r\n <svg class=\"undefined\" xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><g><rect fill=\"none\" height=\"24\" width=\"24\"/></g><g><g><g><path d=\"M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z\"/></g></g></g></svg>\r\n }\r\n </button>\r\n <label htmlFor={this.el.id} onClick={() => this.changeState()}><slot></slot></label>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: inline-block;\r\n}\r\nbutton{\r\n border: none;\r\n padding: 0px;\r\n margin: 0px;\r\n min-width: 15px;\r\n min-height: 15px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: transparent;\r\n outline: none;\r\n}\r\nsvg{\r\n height:2em;\r\n width:2em;\r\n transition: all 300ms ease-in-out;\r\n}\r\n\r\n// FOCUS\r\nbutton:focus, button:hover{\r\n svg{\r\n color: var(--dnn-color-primary);\r\n }\r\n}\r\n\r\n// EXPANDED\r\n:host([expanded]){\r\n svg{\r\n transform: rotate(90deg);\r\n }\r\n}","import { Component, Host, h, Prop, Event } from '@stencil/core';\r\nimport { EventEmitter } from '@stencil/core';\r\nimport { Watch } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dnn-chevron',\r\n styleUrl: 'dnn-chevron.scss',\r\n shadow: true\r\n})\r\nexport class DnnChevron {\r\n\r\n /** Expand text for screen readers */\r\n @Prop() expandText?: string = \"expand\";\r\n\r\n /** Collapse text for screen readers */\r\n @Prop() collapseText?: string = \"collapse\";\r\n\r\n /** Is the chevron expanded */\r\n @Prop({mutable: true, reflect: true}) expanded?: boolean = false;\r\n\r\n /** Fires up when the expanded status changes */\r\n @Event() changed: EventEmitter;\r\n\r\n @Watch('expanded')\r\n handleExpandedChanged(newValue: boolean) {\r\n this.changed.emit(newValue);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button aria-label={this.expanded ? this.collapseText : this.expandText}\r\n onClick={() => this.expanded = !this.expanded}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"/></svg>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n\r\n}\r\n",":host {\r\n display: block;\r\n}\r\n#container{\r\n max-height:0;\r\n overflow: hidden;\r\n transition: max-height 300ms ease-in-out;\r\n}","import { Component, Host, h, Prop, Element, Event, EventEmitter, Watch, Listen, Method } from '@stencil/core';\r\n\r\n@Component({\r\n tag: \"dnn-collapsible\",\r\n styleUrl: \"dnn-collapsible.scss\",\r\n shadow: true\r\n})\r\nexport class DnnCollapsible {\r\n\r\n @Element() el: HTMLDnnCollapsibleElement;\r\n\r\n /** Defines if the panel is expanded or not. */\r\n @Prop({reflect: true}) expanded: boolean = false;\r\n\r\n /** Defines the transition time in ms, defaults to 100ms */\r\n @Prop() transitionDuration?: number = 150;\r\n\r\n /** Fires whenever the collapsible height has changed */\r\n @Event({bubbles: true, composed: true}) dnnCollapsibleHeightChanged: EventEmitter<void>;\r\n\r\n @Listen(\"dnnCollapsibleHeightChanged\")\r\n handleHeightChanged(){\r\n requestAnimationFrame(() => {\r\n this.updateSize();\r\n })\r\n }\r\n\r\n /**\r\n * Updates the component height, use to update after a slot content changes.\r\n */\r\n @Method()\r\n async updateSize() {\r\n if (this.expanded){\r\n requestAnimationFrame(() => {\r\n this.container.style.maxHeight = `${this.container.scrollHeight}px`;\r\n });\r\n setTimeout(() => {\r\n this.container.style.maxHeight = \"none\";\r\n }, this.transitionDuration);\r\n }\r\n }\r\n \r\n @Watch(\"expanded\")\r\n handledExpandedChanged(expanded: boolean){\r\n if (expanded){\r\n this.updateSize();\r\n }\r\n else{\r\n this.container.style.maxHeight = \"0px\";\r\n }\r\n setTimeout(() => {\r\n requestAnimationFrame(() => {\r\n this.dnnCollapsibleHeightChanged.emit();\r\n });\r\n }, this.transitionDuration);\r\n }\r\n \r\n private container: HTMLDivElement;\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div id=\"container\" class={this.expanded && \"expanded\"} ref={el => this.container = el}>\r\n <slot></slot>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n}\r\n","/** Color utility class with hsl and rgb converters\r\n * based on math at https://en.wikipedia.org/wiki/HSL_and_HSV\r\n * @copyright Copyright (c) .NET Foundation. All rights reserved.\r\n * @license MIT \r\n */\r\n\r\nexport class ColorInfo{\r\n\r\n private _hue: number = 0;\r\n /** gets the color hue\r\n * @returns a number between 0 and 359, could contain decimals\r\n */\r\n get hue() { return this._hue; }\r\n set hue(value: number){\r\n if (value < 0) { value = 0; }\r\n if (value > 359) { value = 359; }\r\n this._hue = value;\r\n }\r\n\r\n private _saturation: number = 0;\r\n /** gets the color saturation\r\n * @returns a number between 0 and 1, could contain decimals\r\n */\r\n get saturation() { return this._saturation; }\r\n set saturation(value: number) {\r\n if (value < 0) { value = 0; }\r\n if (value > 1) { value = 1; }\r\n this._saturation = value;\r\n }\r\n\r\n private _lightness: number = 0;\r\n /** gets the color lightness\r\n * @returns a number between 0 and 1, could contain decimals\r\n */\r\n get lightness() { return this._lightness; }\r\n set lightness(value: number) {\r\n if (value < 0) { value = 0; }\r\n if (value > 1) { value = 1; }\r\n this._lightness = value;\r\n }\r\n\r\n /** gets or sets the red component \r\n * @returns an integer between 0 and 255\r\n */\r\n get red() {\r\n return this.getRGB().red;\r\n }\r\n set red(value) {\r\n this.setHSL(value, this.green, this.blue);\r\n }\r\n\r\n /** gets or sets the green component\r\n * @returns an integer between 0 and 255\r\n */\r\n get green() {\r\n return this.getRGB().green;\r\n }\r\n set green(value: number) {\r\n this.setHSL(this.red, value, this.blue);\r\n }\r\n\r\n /** gets or sets the blue component\r\n * @returns an integer between 0 and 255\r\n */\r\n get blue() {\r\n return this.getRGB().blue;\r\n }\r\n set blue(value: number) {\r\n this.setHSL(this.red, this.green, value);\r\n }\r\n\r\n /** gets or sets the hex color value, expresses as 6 hexadecimal characters.\r\n * @returns hex representation of the color\r\n */\r\n get hex() {\r\n var r = this.getHex(this.red);\r\n var g = this.getHex(this.green);\r\n var b = this.getHex(this.blue);\r\n return r + g + b;\r\n }\r\n set hex(value: string){\r\n this.red = parseInt(value.substr(0,2));\r\n this.green = parseInt(value.substr(2,2));\r\n this.blue = parseInt(value.substr(4,2));\r\n }\r\n\r\n /** gets white or black color that is a good oposite to the current color\r\n * @returns - \"000000\" or \"FFFFFF\"\r\n */\r\n get contrastColor() {\r\n const brightness = (this.red*299 + this.green*587 + this.blue*114) / 1000\r\n if (brightness > 127){\r\n return \"000000\";\r\n }\r\n return \"FFFFFF\";\r\n }\r\n\r\n private getRGB() {\r\n const chroma = (1 - Math.abs((2 * this._lightness) - 1)) * this.saturation;\r\n // find the quandrant of the hue\r\n const quadrant = this._hue / 60;\r\n // calculate the offset from the quandrant center\r\n const offset = chroma * (1 - Math.abs(quadrant % 2 - 1));\r\n\r\n // Apply the chroma to the primary component and the offset to the 2nd most important component\r\n let r = 0, g = 0, b = 0;\r\n if (0 <= quadrant && quadrant <= 1) {\r\n r = chroma; g = offset; // red to yellow\r\n } else if (1 <= quadrant && quadrant <= 2) {\r\n g = chroma; r = offset; // yellow to green\r\n } else if (2 <= quadrant && quadrant <= 3) {\r\n g = chroma; b = offset; // green to cyan\r\n } else if (3 <= quadrant && quadrant <= 4) {\r\n b = chroma; g = offset; // cyan to blue\r\n } else if (4 <= quadrant && quadrant <= 5) {\r\n b = chroma; r = offset; // blue to magenta\r\n } else if (5 <= quadrant && quadrant <= 6) {\r\n r = chroma; b = offset; // magenta to red\r\n }\r\n // calculate the bias to add to all channels to match the lightness\r\n const bias = this._lightness - (chroma / 2);\r\n\r\n return {\r\n red: Math.round((r + bias) * 255),\r\n green: Math.round((g + bias) * 255),\r\n blue: Math.round((b + bias) * 255)\r\n }\r\n }\r\n\r\n private setHSL(red: number, green: number, blue: number) {\r\n // GENERAL DATA\r\n // all math is based on values from 0 to 1\r\n const r = red/255, g = green/255, b = blue/255;\r\n // we need to max, min and the difference between them to derive hsl\r\n const min = Math.min(r, g, b);\r\n const max = Math.max(r, g, b);\r\n const diff = max - min;\r\n let h = 0, s = 0, l = 0;\r\n\r\n // HUE\r\n if (diff === 0) { // neutral\r\n h = 0;\r\n } else if (max === r) { // red (magenta to yellow range)\r\n h = 60 * ((g - b) / diff);\r\n } else if (max === g) { // green (yellow to cyan range)\r\n h = 60 * (2 + ((b - r) / diff));\r\n } else if (max === b) { // blue (cyan to magenta range)\r\n h = 60 * (4 + ((r - g) / diff));\r\n }\r\n if (h < 0) { h = h + 360} // ensures positive hues only\r\n if (h > 359) { h = 359} // ensures we never return 360 for simplicity since it is the same as 0\r\n\r\n // LIGHTNESS\r\n l = (max + min) / 2;\r\n\r\n // SATURATION\r\n if (max === 0 || min === 1) { // pure black or white have no saturation\r\n s = 0;\r\n } else {\r\n s = (max - l) / (Math.min(l, 1 - l));\r\n }\r\n\r\n this._hue = h;\r\n this._saturation = s;\r\n this._lightness = l;\r\n }\r\n\r\n private getHex(value: number){\r\n var hex = value.toString(16);\r\n if (hex.length < 2){\r\n hex = \"0\" + hex;\r\n }\r\n return hex;\r\n }\r\n} ",".dnn-color-picker{\r\n padding: 15px;\r\n max-width: 400px;\r\n .dnn-color-sliders{\r\n display:flex;\r\n flex-direction: column;\r\n min-width: 200px;\r\n .dnn-color-s-b{\r\n border: 1px solid #ccc;\r\n padding-bottom: var(--color-box-height, 50%);\r\n position: relative;\r\n background-color: red;\r\n &:before{\r\n content: '';\r\n position: absolute;\r\n top:0;\r\n left:0;\r\n width: 100%;\r\n height:100%;\r\n z-index:1;\r\n background: linear-gradient(to right, white, red);\r\n mix-blend-mode: saturation;\r\n }\r\n &:after{\r\n content: '';\r\n position: absolute;\r\n top:0;\r\n left:0;\r\n width: 100%;\r\n height:100%;\r\n z-index:2;\r\n background: linear-gradient(to bottom, white, black);\r\n mix-blend-mode: luminosity;\r\n }\r\n button{\r\n position: absolute;\r\n bottom: calc(50% - 4px);\r\n left: calc(50% - 4px);\r\n width: 8px;\r\n height: 8px;\r\n z-index: 3;\r\n display: block;\r\n background: none;\r\n border: none;\r\n margin-left: -4px;\r\n margin-bottom: -4px;\r\n padding: 7px;\r\n background-color: #fff;\r\n border-radius: 50%;\r\n &:before{\r\n content:'';\r\n position: absolute;\r\n top: -1px;\r\n left: -1px;\r\n border-radius: 50%;\r\n }\r\n &:after{\r\n content:'';\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n border-radius: 50%;\r\n width: 10px;\r\n height: 10px;\r\n border: 2px solid #ccc;\r\n }\r\n } \r\n }\r\n .dnn-color-bar {\r\n display: flex;\r\n align-items: center;\r\n margin-top: 15px;\r\n .dnn-color-result {\r\n flex-direction: column;\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 50%;\r\n background: red;\r\n }\r\n .dnn-color-hue{\r\n flex: auto;\r\n margin-left: 10px;\r\n height: 16px;\r\n border: 1px solid #ccc;\r\n position: relative;\r\n background: linear-gradient(\r\n to right, \r\n #f00 0, \r\n #ff0 17%,\r\n #0f0 33%,\r\n #0ff 50%,\r\n #00f 67%,\r\n #f0f 84%,\r\n #f00 100%\r\n );\r\n button{\r\n width: 10px;\r\n height: 20px;\r\n position: absolute;\r\n top: -2px;\r\n left: calc(50% - 4px);\r\n border: 0;\r\n padding: 0;\r\n background-color: transparent;\r\n padding-left: -8px;\r\n &:before{\r\n content:'';\r\n position: absolute;\r\n top: -2px;\r\n left: 0px;\r\n border-radius: 3px;\r\n width: 100%;\r\n height: 100%;\r\n border: 1px solid #ccc;\r\n background-color: #fff;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n .dnn-color-fields{\r\n display:flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n .dnn-color-mode-switch {\r\n display: flex;\r\n align-items: flex-end;\r\n padding: .5em;\r\n button {\r\n background-color: transparent;\r\n border: none;\r\n svg {\r\n width: 3em;\r\n height: 3em;\r\n pointer-events: none;\r\n outline: none;\r\n }\r\n }\r\n }\r\n .dnn-rgb-color-fields {\r\n display: flex;\r\n justify-content: space-evenly;\r\n .dnn-rgb-color-field {\r\n display: flex;\r\n flex-direction: column;\r\n flex: auto;\r\n text-align: center;\r\n padding: .5em;\r\n label {\r\n padding-bottom: .25em;\r\n }\r\n input{\r\n border-radius: var(--dnn-button-radius, 3px);\r\n border: 1px solid #ccc;\r\n padding: 0.5em;\r\n padding-left: 1.3em;\r\n text-align: center;\r\n &.red{\r\n border-color: red;\r\n }\r\n &.green{\r\n border-color: green; \r\n }\r\n &.blue{\r\n border-color: blue;\r\n } \r\n }\r\n }\r\n }\r\n .dnn-hsl-color-fields {\r\n display: flex;\r\n justify-content: space-evenly;\r\n .dnn-hsl-color-field {\r\n display: flex;\r\n flex-direction: column;\r\n flex: auto;\r\n text-align: center;\r\n padding: .5em;\r\n label {\r\n padding-bottom: .25em;\r\n }\r\n input{\r\n border-radius: var(--dnn-button-radius, 3px);\r\n border: 1px solid #ccc;\r\n padding: 0.5em;\r\n padding-left: 1.3em;\r\n text-align: center;\r\n }\r\n }\r\n }\r\n .dnn-hex-color-fields {\r\n display: flex;\r\n justify-content: space-evenly;\r\n .dnn-hex-color-field {\r\n display: flex;\r\n flex-direction: column;\r\n flex: auto;\r\n text-align: center;\r\n padding: .5em;\r\n label {\r\n padding-bottom: .25em;\r\n }\r\n .hex-input{\r\n position: relative;\r\n border-radius: var(--dnn-button-radius, 3px);\r\n border: 1px solid #ccc;\r\n padding: 0.323em;\r\n text-align: center;\r\n input{\r\n border:0;\r\n padding:0;\r\n margin:0;\r\n width:100%;\r\n height:100%;\r\n text-align:center;\r\n }\r\n button{\r\n position: absolute;\r\n height: 100%;\r\n top: 0;\r\n right: 1em;\r\n background-color: transparent;\r\n border:0;\r\n padding:0;\r\n margin:0;\r\n svg{\r\n min-width: 1em;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n} ","/** Reusable DNN UI component to pick a color\r\n * @copyright Copyright (c) .NET Foundation. All rights reserved.\r\n * @license MIT \r\n */\r\n\r\nimport { Component, h, State, Element, Prop, EventEmitter, Event, Watch } from \"@stencil/core\";\r\nimport { ColorInfo } from '../../utilities/colorInfo';\r\nimport { Debounce } from \"../../utilities/debounce\";\r\n\r\n/** Color Picker for Dnn */\r\n@Component({\r\n tag: 'dnn-color-picker',\r\n styleUrl: 'dnn-color-picker.scss',\r\n shadow: true\r\n})\r\nexport class DnnColorPicker {\r\n\r\n @Element() el: HTMLDnnColorPickerElement;\r\n\r\n /** Sets the initial color, must be a valid 8 character hexadecimal string without the # sign. */\r\n @Prop() color: string = \"FFFFFF\";\r\n\r\n /** Sets the width-height ratio of the color picker saturation-lightness box.\r\n * @example 100% renders a perfect square\r\n */\r\n @Prop() colorBoxHeight: string = \"50%\";\r\n \r\n @State() currentColor: ColorInfo;\r\n @State() rgbDisplay: string = \"flex\";\r\n @State() hslDisplay: string = \"none\";\r\n @State() hexDisplay: string = \"none\";\r\n\r\n /** Fires up when the color is changed and emits a ColorInfo object\r\n * @see ../../utilities/colorInfo.ts\r\n */\r\n @Event() colorChanged: EventEmitter<ColorInfo>;\r\n\r\n @Debounce(100)\r\n private colorChangedHandler(color: ColorInfo) {\r\n this.colorChanged.emit(color);\r\n }\r\n\r\n @Watch(\"currentColor\")\r\n handeCurrentColorChanged(newValue: ColorInfo){\r\n this.colorChangedHandler(newValue);\r\n }\r\n \r\n private saturationLightnessBox?: HTMLDivElement;\r\n private hueRange?: HTMLDivElement;\r\n\r\n\r\n componentWillLoad() {\r\n this.handleHexChange(this.color);\r\n }\r\n\r\n componentDidLoad() {\r\n (this.el as unknown as HTMLElement).style.setProperty(\"--color-box-height\", this.colorBoxHeight.toString());\r\n }\r\n \r\n private getHex() {\r\n return this.getDoublet(this.currentColor.red) + this.getDoublet(this.currentColor.green) + this.getDoublet(this.currentColor.blue);\r\n }\r\n\r\n private getContrast() {\r\n return this.currentColor.contrastColor;\r\n }\r\n\r\n private getDoublet(value: number){\r\n const valueString = value.toString(16).toUpperCase();\r\n if (valueString.length === 1){\r\n return '0' + valueString;\r\n }\r\n return valueString;\r\n }\r\n\r\n private handleSaturationLightnessMouseDown = (e) => {\r\n e.preventDefault();\r\n this.handleDragLightnessSaturation(e);\r\n window.addEventListener('mousemove', this.handleDragLightnessSaturation);\r\n window.addEventListener('mouseup', this.handleSaturationLightnessMouseUp);\r\n }\r\n\r\n private handleDragLightnessSaturation = (e) => {\r\n const rect = this.saturationLightnessBox.getBoundingClientRect(); \r\n\r\n let x = e.clientX - rect.left; \r\n if (x < 0) { x = 0}\r\n if (x > rect.width) { x = rect.width}\r\n x = x/rect.width;\r\n\r\n let y = e.clientY - rect.top;\r\n if (y < 0) { y = 0}\r\n if (y > rect.height) { y = rect.height}\r\n y = 1 - (y/rect.height);\r\n\r\n const newColor = new ColorInfo();\r\n newColor.hue = this.currentColor.hue;\r\n newColor.saturation = x;\r\n newColor.lightness = y;\r\n this.currentColor = newColor;\r\n }\r\n\r\n private handleSaturationLightnessMouseUp = () => {\r\n window.removeEventListener('mousemove', this.handleDragLightnessSaturation);\r\n window.removeEventListener('mouseup', this.handleSaturationLightnessMouseUp);\r\n }\r\n\r\n private handleHueMouseDown = (e) => {\r\n e.preventDefault();\r\n this.handleDragHue(e);\r\n window.addEventListener('mousemove', this.handleDragHue);\r\n window.addEventListener('mouseup', this.handleHueMouseUp); \r\n }\r\n\r\n private handleHueMouseUp = () => {\r\n window.removeEventListener('mousemove', this.handleDragHue);\r\n window.removeEventListener('mouseup', this.handleHueMouseUp); \r\n }\r\n\r\n private handleDragHue = (e) => {\r\n const rect = this.hueRange.getBoundingClientRect(); \r\n\r\n let x = e.clientX - rect.left;\r\n if (x < 0) { x = 0}\r\n if (x > rect.width) { x = rect.width}\r\n x = x/rect.width*360; \r\n\r\n const newColor = new ColorInfo();\r\n newColor.hue = x;\r\n newColor.saturation = this.currentColor.saturation;\r\n newColor.lightness = this.currentColor.lightness;\r\n this.currentColor = newColor;\r\n }\r\n\r\n private handleComponentValueChange = (e, channel) => {\r\n let value = parseInt(e.target.value);\r\n if (isNaN(value)) { return }\r\n const newColor = new ColorInfo();\r\n if (value < 0) { value = 0; }\r\n if (value > 255) { value = 255; }\r\n let r = this.currentColor.red;\r\n let g = this.currentColor.green;\r\n let b = this.currentColor.blue;\r\n switch (channel) {\r\n case 'red':\r\n r = value;\r\n break;\r\n case 'green':\r\n g = value;\r\n break;\r\n case 'blue':\r\n b = value;\r\n break;\r\n default:\r\n break;\r\n }\r\n newColor.green = g;\r\n newColor.red = r;\r\n newColor.blue = b;\r\n this.currentColor = newColor;\r\n }\r\n\r\n private handleHSLChange = (e, component) => { \r\n let value = parseInt(e.target.value);\r\n if (isNaN(value)) {return}\r\n const newColor = new ColorInfo();\r\n if (value != null) { \r\n let h = this.currentColor.hue;\r\n let s = this.currentColor.saturation;\r\n let l = this.currentColor.lightness;\r\n switch (component) {\r\n case \"hue\":\r\n if (value < 0) { value = 0}\r\n if (value > 359) { value = 0}\r\n h = value;\r\n break;\r\n case \"saturation\":\r\n if (value < 0) { value = 0}\r\n if (value > 100) { value = 100}\r\n s = value / 100;\r\n break;\r\n case \"lightness\":\r\n if (value < 0) { value = 0}\r\n if (value > 100) { value = 100}\r\n l = value / 100;\r\n break; \r\n default:\r\n break; \r\n }\r\n newColor.hue = h;\r\n newColor.saturation = s;\r\n newColor.lightness = l;\r\n this.currentColor = newColor;\r\n }\r\n }\r\n\r\n private handleHexChange(value: string){\r\n const newColor = new ColorInfo();\r\n if (value.match(/^(?:[\\da-f]{3}|[\\da-f]{6})$/i).length > 0) {\r\n if (value.length === 3){\r\n let expanded = value[0] + value[0] + value[1] + value[1] + value[2] + value [2];\r\n value = expanded;\r\n }\r\n newColor.red = parseInt(value.substr(0,2), 16);\r\n newColor.green = parseInt(value.substr(2,2), 16);\r\n newColor.blue = parseInt(value.substr(4,2), 16);\r\n }\r\n else{\r\n newColor.red = this.currentColor.red;\r\n newColor.green = this.currentColor.green;\r\n newColor.blue = this.currentColor.blue;\r\n }\r\n this.currentColor = newColor;\r\n }\r\n\r\n private switchColorMode(e) {\r\n switch(e.target.id) {\r\n case \"rgb-switch\":\r\n this.rgbDisplay = \"none\";\r\n this.hslDisplay = \"none\";\r\n this.hexDisplay = \"flex\";\r\n break;\r\n case \"hex-switch\":\r\n this.rgbDisplay = \"none\";\r\n this.hslDisplay = \"flex\";\r\n this.hexDisplay = \"none\";\r\n break;\r\n case \"hsl-switch\":\r\n this.rgbDisplay = \"flex\";\r\n this.hslDisplay = \"none\";\r\n this.hexDisplay = \"none\";\r\n break;\r\n default:\r\n this.rgbDisplay = \"flex\";\r\n this.hslDisplay = \"none\";\r\n this.hexDisplay = \"none\";\r\n }\r\n }\r\n\r\n private handleSaturationLightnessKeyDown = (e) => { \r\n let newColor = new ColorInfo();\r\n newColor.hue = this.currentColor.hue;\r\n newColor.saturation = this.currentColor.saturation;\r\n newColor.lightness = this.currentColor.lightness;\r\n\r\n let value = 0.01;\r\n if (e.shiftKey) { value = 0.1 ;}\r\n\r\n switch (e.key) {\r\n case \"ArrowUp\":\r\n newColor.lightness += value;\r\n break;\r\n case \"ArrowDown\":\r\n newColor.lightness -= value;\r\n break;\r\n case \"ArrowLeft\":\r\n newColor.saturation -= value;\r\n break;\r\n case \"ArrowRight\":\r\n newColor.saturation += value;\r\n default:\r\n break; \r\n }\r\n this.currentColor = newColor;\r\n }\r\n\r\n private handleHueKeyDown = (e) => {\r\n let newColor = new ColorInfo();\r\n newColor.hue = this.currentColor.hue;\r\n newColor.saturation = this.currentColor.saturation;\r\n newColor.lightness = this.currentColor.lightness;\r\n\r\n let value = 1;\r\n if (e.shiftKey) { value = 10}\r\n\r\n switch (e.key) {\r\n case \"ArrowLeft\":\r\n newColor.hue -= value;\r\n break;\r\n case \"ArrowRight\":\r\n newColor.hue += value;\r\n default:\r\n break;\r\n }\r\n this.currentColor = newColor;\r\n }\r\n\r\n render() {\r\n const hue = this.currentColor.hue;\r\n const saturation = this.currentColor.saturation;\r\n const lightness = this.currentColor.lightness;\r\n const red = this.currentColor.red;\r\n const green = this.currentColor.green;\r\n const blue = this.currentColor.blue;\r\n\r\n return (\r\n <div class=\"dnn-color-picker\">\r\n <div class=\"dnn-color-sliders\">\r\n <div class=\"dnn-color-s-b\" ref={(element) => this.saturationLightnessBox = element as HTMLDivElement}\r\n style={{backgroundColor: `hsl(${hue},100%,50%)`}}\r\n onMouseDown={this.handleSaturationLightnessMouseDown.bind(this)}\r\n >\r\n <button class=\"dnn-s-b-picker\"\r\n aria-label=\"Press up or down to adjust lightness, left or right to adjust saturation, hold shift to move by 10%\"\r\n role=\"slider\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n aria-valuetext={`Saturation: ${Math.round(this.currentColor.saturation*100)}%, Lightness: ${Math.round(this.currentColor.lightness*100)}%`}\r\n style={{\r\n left: Math.round(saturation * 100) + \"%\",\r\n bottom: Math.round(lightness * 100) + \"%\"\r\n }}\r\n onKeyDown={(e) => this.handleSaturationLightnessKeyDown(e)}\r\n />\r\n </div>\r\n <div class=\"dnn-color-bar\">\r\n <div class=\"dnn-color-result\" style={{\r\n backgroundColor: '#' + this.getHex(),\r\n boxShadow: \"0 0 2px 1px \" + \"#\" + this.getContrast()\r\n }} \r\n />\r\n <div class=\"dnn-color-hue\"\r\n ref={(element) => this.hueRange = element as HTMLDivElement}\r\n onMouseDown={this.handleHueMouseDown.bind(this)}\r\n >\r\n <button class=\"dnn-hue-picker\"\r\n aria-label=\"Press left or right to adjust hue, hold shift to move by 10 degrees\"\r\n role=\"slider\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"359\"\r\n aria-valuenow={Math.round(hue)}\r\n style={{left: (hue/359*100).toString() + \"%\"}}\r\n onKeyDown={(e) => this.handleHueKeyDown(e)}\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dnn-color-fields\">\r\n <div class=\"dnn-rgb-color-fields\" style={{display: this.rgbDisplay}}>\r\n <div class=\"dnn-rgb-color-field\">\r\n <label>R</label>\r\n <input type=\"number\" min=\"0\" max=\"255\" step=\"1\" class=\"red\" value={red} aria-label=\"red value\"\r\n onChange={(e) => this.handleComponentValueChange(e, 'red')}\r\n />\r\n </div>\r\n <div class=\"dnn-rgb-color-field\">\r\n <label>G</label>\r\n <input type=\"number\" min=\"0\" max=\"255\" class=\"green\" value={green} aria-label=\"green value\"\r\n onChange={(e) => this.handleComponentValueChange(e, 'green')}\r\n />\r\n </div>\r\n <div class=\"dnn-rgb-color-field\">\r\n <label>B</label>\r\n <input type=\"number\" min=\"0\" max=\"255\" class=\"blue\" value={blue} aria-label=\"blue value\"\r\n onChange={(e) => this.handleComponentValueChange(e, 'blue')}\r\n />\r\n </div>\r\n <div class=\"dnn-color-mode-switch\">\r\n <button\r\n id=\"rgb-switch\"\r\n onClick={this.switchColorMode.bind(this)}\r\n aria-label=\"switch to hexadecimal value entry\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"dnn-hsl-color-fields\" style={{display: this.hslDisplay}}>\r\n <div class=\"dnn-hsl-color-field\">\r\n <label>H</label>\r\n <input type=\"number\" min=\"0\" max=\"359\" step={1} value={Math.round(hue)} aria-label=\"Hue\"\r\n onChange={(e) => this.handleHSLChange(e, 'hue')}\r\n />\r\n </div>\r\n <div class=\"dnn-hsl-color-field\">\r\n <label>S</label>\r\n <input type=\"number\" min=\"0\" max=\"100\" step={1} value={Math.round(saturation*100)} aria-label=\"Saturation\"\r\n onChange={(e) => this.handleHSLChange(e, 'saturation')}\r\n />\r\n </div>\r\n <div class=\"dnn-hsl-color-field\">\r\n <label>L</label>\r\n <input type=\"number\" min=\"0\" max=\"100\" step={1} value={Math.round(lightness*100)} aria-label=\"Lightness\"\r\n onChange={(e) => this.handleHSLChange(e, 'lightness')}\r\n />\r\n </div>\r\n <div class=\"dnn-color-mode-switch\">\r\n <button\r\n id=\"hsl-switch\"\r\n onClick={this.switchColorMode.bind(this)}\r\n aria-label=\"Switch to red, green, blue entry mode\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"dnn-hex-color-fields\" style={{display: this.hexDisplay}}>\r\n <div class=\"dnn-hex-color-field\">\r\n <label>HEX</label>\r\n <div class=\"hex-input\">\r\n <input type=\"text\" aria-label=\"Hexadecimal value\"\r\n value={this.getHex()}\r\n onChange={e => this.handleHexChange((e.target as HTMLInputElement).value)}\r\n />\r\n <button\r\n class=\"copy\"\r\n aria-label=\"copy value\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><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\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"dnn-color-mode-switch\">\r\n <button\r\n id=\"hex-switch\"\r\n onClick={this.switchColorMode.bind(this)}\r\n aria-label=\"Switch to hue saturation lightness values\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}","\r\n:host {\r\n /** \r\n * @prop --border-color: The color of the border.\r\n * @prop --border-radius: The radius of the controls borders.\r\n * @prop --drop-background-color: The color of the background when a file is dropping.\r\n */\r\n --border-color: var(--dnn-color-tertiary-contrast, lightgray);\r\n --border-radius: var(--dnn-controls-radius, 5px);\r\n --drop-background-color: var(--dnn-color-tertiary, lightblue);\r\n\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1rem;\r\n text-align: center;\r\n border: 2px dashed var(--border-color);\r\n border-radius: var(--border-radius);\r\n padding: 1rem;\r\n transition: all 300ms ease-in-out;\r\n}\r\n\r\n:host(.dropping){\r\n background-color: var(--drop-background-color);\r\n}\r\np{\r\n margin: 0;\r\n padding: 0;\r\n}\r\nbutton{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n border: 0px;\r\n margin: 0;\r\n padding: 0;\r\n background-color: transparent;\r\n &:hover{\r\n cursor: pointer;\r\n }\r\n svg{\r\n margin-right: 0.5rem;\r\n }\r\n}\r\nlabel.upload-file{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n cursor: pointer;\r\n input{\r\n display: none;\r\n }\r\n}\r\n.video-preview{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n button{\r\n margin: 1rem;\r\n }\r\n}\r\n","import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dnn-dropzone',\r\n styleUrl: 'dnn-dropzone.scss',\r\n shadow: true,\r\n})\r\nexport class DnnDropzone {\r\n /** Localization strings */\r\n @Prop() resx:{\r\n dragAndDropFile: string;\r\n capture: string;\r\n or: string;\r\n takePicture: string;\r\n uploadFile: string;\r\n } = {\r\n dragAndDropFile: \"Drag and drop a file\",\r\n capture: \"Capture\",\r\n or: \"or\",\r\n takePicture: \"Take a picture\",\r\n uploadFile: \"Upload a file\",\r\n }\r\n\r\n /** A list of allowed file extensions.\r\n * If not specified, any file is allowed.\r\n * Ex: [\"jpg\", \"jped\", \"gif\", \"png\"]\r\n */\r\n @Prop() allowedExtensions: string[];\r\n\r\n /**\r\n * If true, will allow the user to take a snapshot\r\n * using the device camera. (only works over https).\r\n */\r\n @Prop() allowCameraMode: boolean = false;\r\n\r\n /**\r\n * Specifies the jpeg quality for when the device\r\n * camera is used to generate a picture.\r\n * Needs to be a number between 0 and 1 and defaults to 0.8\r\n */\r\n @Prop() captureQuality: number = 0.8;\r\n\r\n /** Fires when file were selected. */\r\n @Event() filesSelected: EventEmitter<File[]>;\r\n \r\n @State() canTakeSnapshots: boolean = false;\r\n\r\n @State() takingPicture: boolean = false;\r\n \r\n private dropzone: HTMLElement;\r\n private fileInput: HTMLInputElement;\r\n private videoPreview: HTMLVideoElement;\r\n private videoSettings!: MediaTrackSettings;\r\n\r\n\r\n componentDidLoad() {\r\n if (this.allowCameraMode){\r\n this.checkIfBrowserCanTakeSnapshots()\r\n .then(result => this.canTakeSnapshots = result);\r\n }\r\n if (this.allowedExtensions != undefined && this.allowedExtensions.length > 0){\r\n var extensionsWithDots = this.allowedExtensions.map(e => `.${e}`);\r\n var extensionsList = extensionsWithDots.join(\",\");\r\n this.fileInput.accept = extensionsList;\r\n }\r\n }\r\n\r\n private checkIfBrowserCanTakeSnapshots(): Promise<boolean> {\r\n return new Promise((resolve) => {\r\n const mediaDevices = navigator.mediaDevices;\r\n if (mediaDevices == undefined || mediaDevices.enumerateDevices == undefined) {\r\n resolve(false);\r\n }\r\n mediaDevices.enumerateDevices()\r\n .then(devices => {\r\n var result = devices.some(device => device.kind == \"videoinput\");\r\n resolve(result);\r\n });\r\n });\r\n }\r\n\r\n private getFilesFromFileList(files: FileList) : File[] {\r\n var fileList: File[] = [];\r\n for (let index = 0; index < files.length; index++) {\r\n const file = files[index];\r\n fileList.push(file);\r\n }\r\n\r\n return fileList;\r\n }\r\n\r\n private handleUploadButton(element: HTMLInputElement): void {\r\n let files = this.getFilesFromFileList(element.files);\r\n\r\n this.filesSelected.emit(files);\r\n }\r\n\r\n private handleDragOver = (event: DragEvent) => \r\n {\r\n event.stopPropagation();\r\n event.preventDefault();\r\n event.dataTransfer.dropEffect = \"copy\";\r\n this.dropzone.classList.add(\"dropping\");\r\n };\r\n\r\n private hasInvalidExtensions(files: FileList): boolean{\r\n var hasInvalid = false;\r\n for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {\r\n const file = files[fileIndex];\r\n var regex = /(?:\\.([^.]+))?$/;\r\n const fileExtension = regex.exec(file.name)[1];\r\n if (fileExtension == undefined){\r\n hasInvalid = true;\r\n }\r\n\r\n if (this.allowedExtensions != undefined && !this.allowedExtensions.includes(fileExtension)){\r\n hasInvalid = true;\r\n }\r\n\r\n return hasInvalid;\r\n }\r\n }\r\n\r\n private handleDrop = (dropEvent: DragEvent) => {\r\n dropEvent.stopPropagation();\r\n dropEvent.preventDefault();\r\n const files = dropEvent.dataTransfer.files;\r\n\r\n if (this.hasInvalidExtensions(files)){\r\n return;\r\n }\r\n var fileList = this.getFilesFromFileList(files);\r\n this.filesSelected.emit(fileList);\r\n };\r\n\r\n private takeSnapshot(): void {\r\n this.takingPicture = true;\r\n navigator.mediaDevices.getUserMedia({video: true, audio: false})\r\n .then(stream => {\r\n stream\r\n this.videoPreview.srcObject = stream;\r\n this.videoPreview.play()\r\n .then(() => {\r\n this.videoSettings = stream.getVideoTracks()[0].getSettings();\r\n });\r\n })\r\n .catch(error => alert(error));\r\n }\r\n\r\n private applySnapshot(): void {\r\n var canvas = document.createElement(\"canvas\");\r\n const context = canvas.getContext(\"2d\");\r\n canvas.width = this.videoSettings.width;\r\n canvas.height = this.videoSettings.height;\r\n context.drawImage(this.videoPreview, 0, 0);\r\n canvas.toBlob(blob => {\r\n var file = new File([blob], \"image.jpeg\", {type:\"image/jpeg\"});\r\n this.takingPicture = false;\r\n \r\n var fileList = [file];\r\n this.filesSelected.emit(fileList)\r\n }, \"image/jpeg\", this.captureQuality);\r\n }\r\n \r\n render() {\r\n return (\r\n <Host\r\n ref={e => this.dropzone = e}\r\n class=\"dropzone\"\r\n onDragOver={this.handleDragOver}\r\n onDrop={this.handleDrop}\r\n onDragLeave={() => this.dropzone.classList.remove(\"dropping\")}\r\n >\r\n {!this.takingPicture &&\r\n [\r\n <p>{this.resx?.dragAndDropFile}</p>\r\n ,\r\n <p>- {this.resx?.or} -</p>\r\n ,\r\n <label class=\"upload-file\">\r\n <input\r\n type=\"file\"\r\n ref={el => this.fileInput = el}\r\n onChange={e => this.handleUploadButton(e.target as HTMLInputElement)}\r\n >\r\n </input>\r\n <span>\r\n <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\"><g><rect fill=\"none\" height=\"24\" width=\"24\"/></g><g><path d=\"M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z\"/></g></svg>\r\n </span>\r\n &nbsp;\r\n {this.resx?.uploadFile}\r\n </label>\r\n ,\r\n this.canTakeSnapshots &&\r\n [\r\n <p>- {this.resx?.or} -</p>\r\n ,\r\n <button\r\n onClick={() => this.takeSnapshot()}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><circle cx=\"12\" cy=\"12\" r=\"3.2\"/><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\"/></svg>\r\n {this.resx?.takePicture}\r\n </button>\r\n ]\r\n ]\r\n }\r\n {this.takingPicture &&\r\n <div class=\"video-preview\">\r\n <video ref={e => this.videoPreview = e} />\r\n <button\r\n onClick={() => this.applySnapshot()}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><circle cx=\"12\" cy=\"12\" r=\"3.2\"/><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\"/></svg>&nbsp;\r\n {this.resx?.capture}\r\n </button>\r\n </div>\r\n }\r\n </Host>\r\n );\r\n }\r\n\r\n}\r\n","export enum CornerType {\r\n \"nw\",\r\n \"ne\",\r\n \"se\",\r\n \"sw\",\r\n};","export function getMovementFromEvent(\r\n event: MouseEvent | TouchEvent,\r\n previousTouch: Touch\r\n) {\r\n let movementX = 0;\r\n let movementY = 0;\r\n if (event instanceof MouseEvent) {\r\n movementX = event.movementX;\r\n movementY = event.movementY;\r\n }\r\n if (typeof TouchEvent !== \"undefined\"){\r\n if (event instanceof TouchEvent) {\r\n let touch = event.touches[0];\r\n if (previousTouch != undefined) {\r\n movementX = touch.pageX - this.previousTouch.pageX;\r\n movementY = touch.pageY - this.previousTouch.pageY;\r\n }\r\n previousTouch = touch;\r\n }\r\n }\r\n return { movementX, movementY };\r\n }",":host {\r\n display: block;\r\n}\r\ncanvas {\r\n display: none;\r\n}\r\n.view{\r\n visibility: hidden;\r\n opacity: 0;\r\n height: 0;\r\n overflow: hidden;\r\n transition: all 300ms ease-in-out;\r\n &.visible{\r\n visibility: visible;\r\n opacity: 1;\r\n height: initial;\r\n overflow: visible;\r\n }\r\n .cropper{\r\n position: relative;\r\n width: 100%;\r\n img{\r\n width: 100%;\r\n display: block;\r\n margin: 0 auto;\r\n }\r\n .backdrop{\r\n backdrop-filter: saturate(0.5);\r\n backdrop-filter: brightness(0.5);\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n .crop{\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n outline: 2px dashed white;\r\n box-shadow: black 0 0 0px 2px;\r\n backdrop-filter: saturate(2);\r\n backdrop-filter: brightness(2);\r\n cursor: move;\r\n >div{\r\n width: 20px;\r\n height: 20px;\r\n background-color: white;\r\n border: 2px solid rgba(0,0,0,0.5);\r\n position: absolute;\r\n &.nw, &.ne{\r\n top: -17px;\r\n }\r\n &.ne, &.se{\r\n right: -17px;\r\n }\r\n &.se, &.sw{\r\n bottom: -17px;\r\n }\r\n &.sw, &.nw{\r\n left: -17px;\r\n }\r\n &.nw, &.se{\r\n cursor: nwse-resize;\r\n }\r\n &.ne, &.sw{\r\n cursor: nesw-resize;\r\n }\r\n }\r\n }\r\n }\r\n}\r\ndnn-modal{\r\n --max-width: 512px;\r\n}","import { Component, Host, h, State, Prop, Event, EventEmitter } from '@stencil/core';\r\nimport { CornerType } from './CornerType';\r\nimport { getMovementFromEvent } from \"../../utilities/mouseUtilities\";\r\n\r\n/**\r\n * Allows cropping an image in-browser with the option to enforce a specific final size.\r\n * All computation happens in the browser and the final image is emmited\r\n * in an event that has a data-url of the image.\r\n */\r\n@Component({\r\n tag: 'dnn-image-cropper',\r\n styleUrl: 'dnn-image-cropper.scss',\r\n shadow: true,\r\n})\r\nexport class DnnImageCropper {\r\n /** Sets the desired final image width. */\r\n @Prop() width: number = 600;\r\n\r\n /** Sets the desired final image height. */\r\n @Prop() height: number = 600;\r\n\r\n /** Can be used to customize controls text.\r\n * Some values support tokens, see default values for examples.\r\n */\r\n @Prop() resx: {\r\n capture: string;\r\n dragAndDropFile: string;\r\n or: string;\r\n takePicture: string;\r\n uploadFile: string;\r\n imageTooSmall: string;\r\n modalCloseText: string;\r\n } = {\r\n capture: \"Capture\",\r\n dragAndDropFile: \"Drag and drop an image\",\r\n or: \"or\",\r\n takePicture: \"Take a picture\",\r\n uploadFile: \"Upload an image\",\r\n 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.\",\r\n modalCloseText: \"Close\",\r\n }\r\n\r\n /** Sets the output quality of the corpped image (number between 0 and 1). */\r\n @Prop() quality: number = 0.8;\r\n\r\n /** When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry. */\r\n @Prop() preventUndersized: boolean = false;\r\n\r\n /** When the image crop changes, emits the dataurl for the new cropped image. */\r\n @Event() imageCropChanged: EventEmitter<string>;\r\n\r\n @State() view: IComponentInterfaces[\"View\"];\r\n \r\n private host: HTMLElement;\r\n private hasPictureView: HTMLDivElement;\r\n private noPictureView: HTMLDivElement;\r\n private canvas: HTMLCanvasElement;\r\n private image: HTMLImageElement;\r\n private crop: HTMLDivElement;\r\n private previousTouch: Touch;\r\n private imageTooSmallModal!: HTMLDnnModalElement;\r\n\r\n componentDidLoad() {\r\n requestAnimationFrame(() => {\r\n this.setView(\"noPictureView\");\r\n })\r\n }\r\n\r\n private setView(newView: IComponentInterfaces[\"View\"]){\r\n const views = this.host.shadowRoot.querySelectorAll(\".view\");\r\n views.forEach(v =>\r\n v.classList.remove(\"visible\"));\r\n switch (newView) {\r\n case \"noPictureView\":\r\n this.noPictureView.classList.add(\"visible\");\r\n break;\r\n case \"hasPictureView\":\r\n this.hasPictureView.classList.add(\"visible\");\r\n break;\r\n default:\r\n break;\r\n }\r\n this.view = newView;\r\n }\r\n\r\n private initCrop(){\r\n var wantedRatio = this.width / this.height;\r\n var imageRect = this.image.getBoundingClientRect();\r\n var imageRatio = imageRect.width / imageRect.height;\r\n \r\n if (wantedRatio > imageRatio){\r\n var wantedHeight = imageRect.width / wantedRatio;\r\n var diff = imageRect.height - wantedHeight;\r\n this.crop.style.top = Math.round(diff/2).toString() + \"px\";\r\n this.crop.style.height = Math.round(wantedHeight).toString() + \"px\";\r\n }\r\n else{\r\n var wantedWidth = imageRect.height * wantedRatio;\r\n var diff = imageRect.width - wantedWidth;\r\n this.crop.style.left = Math.round(diff/2).toString() + \"px\";\r\n this.crop.style.width = Math.round(wantedWidth).toString() + \"px\";\r\n }\r\n }\r\n\r\n private setImage(){\r\n this.image.addEventListener('load', () => {\r\n this.initCrop();\r\n this.emitImage();\r\n })\r\n this.image.src = this.canvas.toDataURL();\r\n }\r\n\r\n private handleNewFile(file: File): void {\r\n if (file.type.split('/')[0] != \"image\"){\r\n return;\r\n }\r\n \r\n var reader = new FileReader();\r\n reader.onload = readerLoadEvent => {\r\n var img = new Image();\r\n img.onload = () => {\r\n this.canvas.width = img.width;\r\n this.canvas.height = img.height;\r\n if (this.preventUndersized && (img.width < this.width || img.height< this.height)){\r\n this.imageTooSmallModal.show();\r\n return;\r\n }\r\n var ctx = this.canvas.getContext(\"2d\");\r\n ctx.drawImage(img,0,0);\r\n this.setView(\"hasPictureView\");\r\n this.setImage();\r\n }\r\n img.src = readerLoadEvent.target.result.toString();\r\n }\r\n reader.readAsDataURL(file);\r\n }\r\n\r\n private handleCropMouseDown = (event: MouseEvent | TouchEvent) => {\r\n event.stopPropagation();\r\n event.preventDefault();\r\n const element = event.target as HTMLElement;\r\n const className = element.classList[0];\r\n\r\n document.addEventListener(\"mouseup\", this.handleImageCropFinished, false);\r\n document.addEventListener(\"touchend\", this.handleImageCropFinished, false);\r\n switch (className) {\r\n case \"crop\":\r\n document.addEventListener(\"mousemove\", this.handleCropDrag, false);\r\n document.addEventListener(\"touchmove\", this.handleCropDrag, false)\r\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleCropDrag));\r\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleCropDrag));\r\n break;\r\n case \"nw\":\r\n document.addEventListener(\"mousemove\", this.handleNwMouseMove, false);\r\n document.addEventListener(\"touchmove\", this.handleNwMouseMove, false)\r\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNwMouseMove));\r\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNwMouseMove));\r\n break;\r\n case \"ne\":\r\n document.addEventListener(\"mousemove\", this.handleNeMouseMove, false);\r\n document.addEventListener(\"touchmove\", this.handleNeMouseMove, false)\r\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNeMouseMove));\r\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNeMouseMove));\r\n break\r\n case \"se\":\r\n document.addEventListener(\"mousemove\", this.handleSeMouseMove, false);\r\n document.addEventListener(\"touchmove\", this.handleSeMouseMove, false)\r\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSeMouseMove));\r\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSeMouseMove));\r\n break;\r\n case \"sw\":\r\n document.addEventListener(\"mousemove\", this.handleSwMouseMove, false);\r\n document.addEventListener(\"touchmove\", this.handleSwMouseMove, false)\r\n document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSwMouseMove));\r\n document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSwMouseMove));\r\n break;\r\n default:\r\n break;\r\n }\r\n };\r\n\r\n private handleImageCropFinished = (_ev: MouseEvent) => {\r\n this.emitImage();\r\n document.removeEventListener(\"mouseup\", this.handleImageCropFinished);\r\n this.previousTouch = undefined;\r\n }\r\n\r\n private emitImage() {\r\n var x = this.crop.offsetLeft / this.image.width * this.image.naturalWidth;\r\n var y = this.crop.offsetTop / this.image.height * this.image.naturalHeight;\r\n\r\n var cropRect = this.crop.getBoundingClientRect();\r\n var width = cropRect.width / this.image.width * this.image.naturalWidth;\r\n var height = cropRect.height / this.image.height * this.image.naturalHeight;\r\n\r\n if (x < 0)\r\n x = 0;\r\n if (x > this.image.naturalWidth)\r\n x = this.image.naturalWidth;\r\n if (y < 0)\r\n y = 0;\r\n if (y > this.image.naturalWidth)\r\n y = this.image.naturalWidth;\r\n if (width > this.image.naturalWidth)\r\n width = this.image.naturalWidth;\r\n if (height > this.image.naturalHeight)\r\n height = this.image.naturalHeight;\r\n\r\n var dataUrl = this.generateCroppedImage(x, y, width, height, this.width, this.height);\r\n this.imageCropChanged.emit(dataUrl);\r\n }\r\n\r\n private generateCroppedImage(x: number, y: number, width: number, height: number, desiredWidth: number, desiredHeight: number) {\r\n this.canvas.width = desiredWidth;\r\n this.canvas.height = desiredHeight;\r\n const context = this.canvas.getContext(\"2d\");\r\n context.clearRect(0, 0, desiredWidth, desiredHeight);\r\n context.drawImage(this.image, x, y, width, height, 0, 0, desiredWidth, desiredHeight);\r\n\r\n return this.canvas.toDataURL(\"image/jpeg\", this.quality);\r\n }\r\n\r\n private handleNwMouseMove = (event: MouseEvent | TouchEvent) => {\r\n this.handleCornerDrag(event, CornerType.nw);\r\n }\r\n\r\n private handleNeMouseMove = (event: MouseEvent | TouchEvent) => {\r\n this.handleCornerDrag(event, CornerType.ne);\r\n }\r\n\r\n private handleSeMouseMove = (event: MouseEvent | TouchEvent) => {\r\n this.handleCornerDrag(event, CornerType.se);\r\n }\r\n\r\n private handleSwMouseMove = (event: MouseEvent | TouchEvent) => {\r\n this.handleCornerDrag(event, CornerType.sw);\r\n }\r\n\r\n private handleCornerDrag = (event: MouseEvent | TouchEvent, corner: CornerType) => {\r\n if (!this.isMouseStillInTarget(event)){\r\n return;\r\n }\r\n \r\n let {left, top} = this.getCornerLeftTop(corner);\r\n let newWidth = 0;\r\n let newHeight = 0;\r\n let orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\r\n const wantedRatio = this.width / this.height;\r\n const cropRect = this.crop.getBoundingClientRect();\r\n const imageRect = this.image.getBoundingClientRect();\r\n let { movementX, movementY } = getMovementFromEvent(event, this.previousTouch);\r\n if (Math.abs(movementX) < Math.abs(movementY)){\r\n orientation = \"vertical\";\r\n }\r\n\r\n if (orientation == \"horizontal\"){\r\n switch (corner) {\r\n case CornerType.nw:\r\n case CornerType.sw:\r\n newWidth = cropRect.width - movementX;\r\n newHeight = newWidth / wantedRatio;\r\n break;\r\n case CornerType.ne:\r\n case CornerType.se:\r\n newWidth = cropRect.width + movementX;\r\n newHeight = newWidth / wantedRatio;\r\n break;\r\n default:\r\n break;\r\n }\r\n } else{\r\n switch (corner) {\r\n case CornerType.nw:\r\n case CornerType.ne:\r\n newHeight = cropRect.height - movementY;\r\n newWidth = newHeight * wantedRatio;\r\n break;\r\n case CornerType.se:\r\n case CornerType.sw:\r\n newHeight = cropRect.height + movementY;\r\n newWidth = newHeight * wantedRatio;\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n switch (corner) {\r\n case CornerType.ne:\r\n case CornerType.nw:\r\n const topOffset = cropRect.height - newHeight;\r\n top = this.crop.offsetTop + topOffset;\r\n default:\r\n break;\r\n }\r\n\r\n switch (corner) {\r\n case CornerType.nw:\r\n case CornerType.sw:\r\n const leftOffset = cropRect.width - newWidth;\r\n left = this.crop.offsetLeft + leftOffset;\r\n if (left < 0) left = 0;\r\n if (left > imageRect.width) left = imageRect.width;\r\n if (top < 0) top = 0;\r\n if (top > imageRect.height) top = imageRect.height;\r\n if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\r\n if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\r\n break;\r\n case CornerType.ne:\r\n case CornerType.se:\r\n if (top < 0) top = 0;\r\n if (top > imageRect.height) top = imageRect.height;\r\n if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\r\n if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\r\n break;\r\n default:\r\n break;\r\n }\r\n\r\n if (newWidth / newHeight != wantedRatio){\r\n return;\r\n }\r\n\r\n if (this.preventUndersized){\r\n const zoomRatio = this.image.width / this.image.naturalWidth;\r\n if (newWidth / zoomRatio < this.width || newHeight / zoomRatio < this.height){\r\n return;\r\n }\r\n }\r\n\r\n switch (corner) {\r\n case CornerType.ne:\r\n this.crop.style.top = `${top}px`;\r\n this.crop.style.width = `${newWidth}px`;\r\n this.crop.style.height = `${newHeight}px`;\r\n break;\r\n case CornerType.nw:\r\n this.crop.style.left = `${left}px`;\r\n this.crop.style.top = `${top}px`;\r\n this.crop.style.width = `${newWidth}px`;\r\n this.crop.style.height = `${newHeight}px`;\r\n break;\r\n case CornerType.se:\r\n this.crop.style.width = `${newWidth}px`;\r\n this.crop.style.height = `${newHeight}px`;\r\n break;\r\n case CornerType.sw:\r\n this.crop.style.left = `${left}px`;\r\n this.crop.style.width = `${newWidth}px`;\r\n this.crop.style.height = `${newHeight}px`;\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n private getCornerLeftTop(corner: CornerType): { left: number; top: number; } {\r\n let left = 0;\r\n let top = 0;\r\n switch (corner) {\r\n case CornerType.se:\r\n left = this.crop.offsetLeft;\r\n top = this.crop.offsetTop;\r\n break;\r\n case CornerType.sw:\r\n top = this.crop.offsetTop;\r\n break;\r\n default:\r\n break;\r\n }\r\n return {top, left};\r\n }\r\n\r\n private handleCropDrag = (ev: MouseEvent | TouchEvent) => {\r\n if (!this.isMouseStillInTarget(ev)){\r\n return;\r\n }\r\n let {movementX, movementY} = getMovementFromEvent(ev, this.previousTouch);\r\n let newLeft = this.crop.offsetLeft + movementX;\r\n let newTop = this.crop.offsetTop + movementY;\r\n var imageRect = this.image.getBoundingClientRect();\r\n var cropRect = this.crop.getBoundingClientRect();\r\n if (newLeft < 0){\r\n newLeft = 0;\r\n }\r\n if (newTop < 0){\r\n newTop = 0;\r\n }\r\n if (newLeft + cropRect.width > imageRect.width){\r\n newLeft = this.crop.offsetLeft;\r\n }\r\n if (newTop + cropRect.height > imageRect.height){\r\n newTop = this.crop.offsetTop;\r\n }\r\n this.crop.style.left = newLeft + \"px\";\r\n this.crop.style.top = newTop + \"px\";\r\n };\r\n\r\n private isMouseStillInTarget(event: MouseEvent | TouchEvent) {\r\n var inside = false;\r\n let mouseX: number;\r\n let mouseY: number;\r\n const imageRect = this.image.getBoundingClientRect();\r\n \r\n if (event instanceof MouseEvent){\r\n mouseX = event.clientX;\r\n mouseY = event.clientY;\r\n }\r\n\r\n if (typeof TouchEvent !== \"undefined\"){\r\n if (event instanceof TouchEvent){\r\n var touch = event.touches[0];\r\n mouseX = touch.clientX;\r\n mouseY = touch.clientY;\r\n }\r\n }\r\n \r\n if (\r\n mouseX >= imageRect.x &&\r\n mouseY >= imageRect.y &&\r\n mouseX <= imageRect.left + imageRect.width &&\r\n mouseY <= imageRect.top + imageRect.height)\r\n {\r\n inside = true;\r\n }\r\n\r\n var corners = this.crop.querySelectorAll(\"div\");\r\n corners.forEach(corner =>{\r\n var cornerRect = corner.getBoundingClientRect();\r\n if (\r\n mouseX >= cornerRect.x &&\r\n mouseY >= cornerRect.y &&\r\n mouseX <= cornerRect.left + cornerRect.width &&\r\n mouseY <= cornerRect.top + cornerRect.height)\r\n {\r\n inside = true;\r\n }\r\n })\r\n\r\n return inside;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host ref={el => this.host = el}>\r\n <canvas ref={el => this.canvas = el} />\r\n <div\r\n class=\"view\"\r\n ref={el => this.hasPictureView = el}\r\n >\r\n <div class=\"cropper\">\r\n <img ref={el => this.image = el} />\r\n <div class=\"backdrop\" />\r\n <div\r\n class=\"crop\"\r\n ref={e => this.crop = e}\r\n onMouseDown={this.handleCropMouseDown}\r\n onTouchStart={this.handleCropMouseDown}\r\n >\r\n <div class=\"nw\" />\r\n <div class=\"ne\" />\r\n <div class=\"se\" />\r\n <div class=\"sw\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n class=\"view\"\r\n ref={el => this.noPictureView = el}>\r\n <dnn-dropzone\r\n allowCameraMode\r\n onFilesSelected={e => this.handleNewFile(e.detail[0])}\r\n resx={\r\n {\r\n capture: this.resx.capture,\r\n dragAndDropFile: this.resx.dragAndDropFile,\r\n or: this.resx.or,\r\n takePicture: this.resx.takePicture,\r\n uploadFile: this.resx.uploadFile,\r\n }\r\n }\r\n />\r\n </div>\r\n <dnn-modal ref={el => this.imageTooSmallModal = el} close-text={this.resx.modalCloseText}>\r\n <p>{this.resx.imageTooSmall.replace(\"{width}\", this.width.toString()).replace(\"{height}\", this.height.toString())}</p>\r\n </dnn-modal>\r\n </Host>\r\n );\r\n }\r\n}\r\n\r\ninterface IComponentInterfaces\r\n{\r\n View: \"noPictureView\" | \"takingPictureView\" | \"hasPictureView\" | \"hasCroppedPictureView\";\r\n}",":host {\r\n /**\r\n * @prop --max-width: The maximum width of the module.\r\n */\r\n display: block;\r\n .overlay{\r\n background-color: rgba(0,0,0,0.5);\r\n position: fixed;\r\n top:0;\r\n left:0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 1;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n backdrop-filter: blur(2px);\r\n transition: all 300ms ease-in-out;\r\n visibility: hidden;\r\n opacity: 0;\r\n .modal{\r\n max-width: var(--max-width, 1200px);\r\n background-color: white;\r\n padding: 30px;\r\n transform: scale(2);\r\n transition: all 300ms ease-in-out;\r\n z-index: 2;\r\n position: relative;\r\n margin: 10%;\r\n max-height: 80%;\r\n border-radius: var(--dnn-controls-radius, 5px);\r\n box-shadow: 10px 10px 20px 0 rgba(0,0,0,0.5);\r\n display: block;\r\n .close{\r\n position: absolute;\r\n background-color:white;\r\n border: 2px solid white;\r\n border-radius: 50%;\r\n padding: 0;\r\n margin: 0;\r\n top: -12px;\r\n right: -12px;\r\n outline: none;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n &:focus, &:hover{\r\n box-shadow: 0 0 2px 2px var(--dnn-color-primary, blue);\r\n }\r\n svg{\r\n width: 24px;\r\n height: 24px;\r\n color: grey;\r\n }\r\n }\r\n }\r\n &.visible{\r\n visibility: visible;\r\n opacity: 1;\r\n .modal{\r\n transform: scale(1);\r\n box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.5);\r\n display: block;\r\n }\r\n }\r\n }\r\n}","import { Component, Element, Host, h, Prop, Event, EventEmitter, Method, State } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dnn-modal',\r\n styleUrl: 'dnn-modal.scss',\r\n shadow: true\r\n})\r\nexport class DnnModal {\r\n \r\n @Element() el!: HTMLDnnModalElement;\r\n \r\n /**\r\n * Pass false to remove the backdrop click auto-dismiss feature.\r\n */\r\n @Prop() backdropDismiss: boolean = true;\r\n\r\n /**\r\n * Optionally pass the aria-label text for the close button.\r\n * Defaults to \"Close modal\" if not provided.\r\n */\r\n @Prop() closeText?: string = \"Close modal\";\r\n\r\n /**\r\n * Optionally you can pass false to not show the close button.\r\n * If you decide to do so, you should either not also prevent dismissal by clicking the backdrop\r\n * or provide your own dismissal logic in the modal content.\r\n */\r\n @Prop() showCloseButton?: boolean = true;\r\n\r\n @State() visible: boolean = false;\r\n\r\n /**\r\n * Shows the modal\r\n */\r\n @Method()\r\n async show() {\r\n this.visible = true;\r\n }\r\n\r\n /**\r\n * Hides the modal\r\n */\r\n @Method()\r\n async hide() {\r\n this.visible = false;\r\n }\r\n\r\n /**\r\n * Fires when the modal is dismissed.\r\n */\r\n @Event() dismissed!: EventEmitter;\r\n\r\n private handleDismiss(){\r\n this.visible = false;\r\n this.dismissed.emit();\r\n }\r\n\r\n private handleBackdropClick(e: MouseEvent): void {\r\n const element = (e.target as HTMLElement);\r\n if (element.id === \"backdrop\" && this.backdropDismiss){\r\n this.handleDismiss();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div id=\"backdrop\"\r\n class={this.visible ? 'overlay visible' : 'overlay'}\r\n onClick={e => this.handleBackdropClick(e)}\r\n >\r\n <div class=\"modal\">\r\n {this.showCloseButton &&\r\n <button\r\n class=\"close\"\r\n aria-label={this.closeText}\r\n onClick={() => this.handleDismiss()}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><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\"/></svg>\r\n </button>\r\n }\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n position: relative;\r\n display: flex;\r\n justify-content: space-between;\r\n --background-color: transparent;\r\n --color: #333;\r\n --border-size: 1px;\r\n --border-color: grey;\r\n --border-active-color: black;\r\n --border-radius: var(--dnn-controls-radius, 5px);\r\n --padding: var(--dnn-controls-padding, 5px);\r\n --focus-color: var(--dnn-color-primary, blue);\r\n input {\r\n width:100%;\r\n border: var(--border-size) solid var(--border-color);\r\n outline: none;\r\n border-radius: var(--border-radius);\r\n padding: var(--padding);\r\n padding-right: 32px;\r\n transition: all 300ms ease-in-out;\r\n &:focus, &:hover{\r\n outline: none;\r\n box-shadow: 0 0 2px 2px var(--focus-color);\r\n }\r\n }\r\n svg{\r\n position: absolute;\r\n top:0;\r\n right:0;\r\n height: 100%;\r\n transform: scale(0.7);\r\n fill: var(--color);\r\n outline: var(--color);\r\n color: var(--color);\r\n transition: all 300ms ease-in-out;\r\n }\r\n button{\r\n background: transparent;\r\n border: 0;\r\n margin: 0;\r\n padding: 0;\r\n &:focus, &:hover{\r\n svg{\r\n fill: var(--focus-color);\r\n outline: var(--focus-color);\r\n color: var(--focus-color);\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Host, h, Event, EventEmitter, Watch, Prop } from '@stencil/core';\r\nimport { Debounce } from '../../utilities/debounce';\r\n@Component({\r\n tag: 'dnn-searchbox',\r\n styleUrl: 'dnn-searchbox.scss',\r\n shadow: true\r\n})\r\nexport class DnnSearchbox {\r\n\r\n /**\r\n * Sets the field placeholder text.\r\n */\r\n @Prop() placeholder?: string = \"\";\r\n\r\n /**\r\n * Debounces the queryChanged by 500ms.\r\n */\r\n @Prop() debounced: boolean = true;\r\n\r\n /** Sets the query */\r\n @Prop({mutable: true}) query: string = \"\";\r\n\r\n /**\r\n * Fires up each time the search query changes.\r\n * The data passed is the new query.\r\n */\r\n @Event() queryChanged: EventEmitter;\r\n\r\n @Watch('query')\r\n fireQueryChanged(){\r\n if (this.debounced){\r\n this.debouncedHandleQueryChanged();\r\n }\r\n else{\r\n this.handleQueryChanged();\r\n }\r\n }\r\n \r\n private handleQueryChanged(){\r\n this.queryChanged.emit(this.query);\r\n }\r\n\r\n @Debounce(500)\r\n private debouncedHandleQueryChanged(){\r\n this.handleQueryChanged();\r\n }\r\n \r\n\r\n render() {\r\n return (\r\n <Host>\r\n <input type=\"text\" value={this.query}\r\n placeholder={this.placeholder}\r\n onInput={e => this.query = (e.target as HTMLInputElement).value}\r\n />\r\n {this.query !== \"\" ?\r\n <button class=\"svg clear\"\r\n onClick={() => this.query = \"\"}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><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\"/></svg>\r\n </button>\r\n :\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><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\"/></svg>\r\n }\r\n </Host>\r\n );\r\n }\r\n\r\n}\r\n",":host {\r\n /**\r\n * @prop --color: Normal Color of the inactive sort icon.\r\n * @prop --color-sorted: Color of the sorted sort icon.\r\n * @prop --color-hover: Color of the icons when hovered.\r\n */\r\n display: inline-block;\r\n}\r\n\r\nbutton {\r\n outline: none;\r\n border: none;\r\n margin: 0;\r\n padding: 0;\r\n background-color: transparent;\r\n outline: none;\r\n display: inline-block;\r\n line-height: 1em;\r\n position: relative;\r\n top: 0.25em;\r\n svg{\r\n height: 1.5em;\r\n width: auto;\r\n fill: var(--color, #888);\r\n }\r\n &.active{\r\n svg{\r\n fill: var(--color-sorted, var(--dnn-color-primary, rgb(2,139,255)));\r\n }\r\n }\r\n &:hover, &:focus{\r\n svg{\r\n fill: var(--color-hover, var(--dnn-color-primary-light, #36a1ff));\r\n }\r\n }\r\n}","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dnn-sort-icon',\r\n styleUrl: 'dnn-sort-icon.scss',\r\n shadow: true\r\n})\r\nexport class DnnSortIcon {\r\n /** Defines the current sort direction */\r\n @Prop() sortDirection: \"asc\" | \"desc\" | \"none\" = \"none\";\r\n\r\n /** Emitted when the sort is changed. */\r\n @Event() sortChanged!: EventEmitter<\"asc\"|\"desc\"|\"none\">;\r\n \r\n private changeSort(): void {\r\n switch (this.sortDirection) {\r\n case \"asc\":\r\n this.sortDirection = \"desc\";\r\n break;\r\n case \"desc\":\r\n this.sortDirection = \"asc\";\r\n break;\r\n case \"none\":\r\n this.sortDirection = \"asc\";\r\n break;\r\n default:\r\n break;\r\n }\r\n\r\n this.sortChanged.emit(this.sortDirection);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button\r\n class={{\"active\": this.sortDirection != \"none\"}}\r\n onClick={() => this.changeSort()}\r\n >\r\n {this.sortDirection == \"none\" &&\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 7 H 12 L 6 0 Z M 0 9 H 12 L 6 16 Z\"></path></svg>\r\n }\r\n {this.sortDirection == \"asc\" &&\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 7 H 12 L 6 0 Z\"></path></svg>\r\n }\r\n {this.sortDirection == \"desc\" &&\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 9 H 12 L 6 16 Z\"></path></svg>\r\n }\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n",null,"import { Component, Host, h, Prop, State, Method } from \"@stencil/core\";\r\n\r\n/** Represents a single tab and must be used inside a dnn-tabs element. */\r\n@Component({\r\n tag: 'dnn-tab',\r\n styleUrl: 'dnn-tab.scss',\r\n shadow: true,\r\n})\r\nexport class DnnTab {\r\n /** Defines the tab title. */\r\n @Prop() tabTitle!: string;\r\n\r\n @State() visible: boolean = false;\r\n\r\n /** Shows the tab. */\r\n @Method()\r\n async show(){\r\n this.visible = true;\r\n }\r\n\r\n /** Hides the modal */\r\n @Method()\r\n async hide(){\r\n this.visible = false;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n {this.visible &&\r\n <slot></slot>\r\n }\r\n </Host>\r\n );\r\n }\r\n}",":host {\r\n /**\r\n * @prop --color-background: The color of the inactive tabs.\r\n * @prop --color-text: The color of the text for inactive tabs.\r\n * @prop --color-visible: The color of the active tab.\r\n * @prop --color-visible-text: The color of the text for the active tab.\r\n * @prop --color-focus: outline color when hovering or pre-selecting a tab.\r\n */\r\n display: block;\r\n --color-background: var(--dnn-color-secondary-dark, lightgray);\r\n --color-text: var(--dnn-color-secondary-contrast, #333);\r\n --color-visible: var(--dnn-color-primary, #3792ED);\r\n --color-visible-text: var(--dnn-color-primary-contrast, #FFF);\r\n --color-focus: var(--dnn-color-primary, #3792ed);\r\n }\r\n\r\n .tabTitles{\r\n display: flex;\r\n background-color: var(--color-background);\r\n color: var(--color-text);\r\n button{\r\n padding: 0.5rem 1rem;\r\n border: 0;\r\n margin: 0;\r\n background-color: transparent;\r\n &.visible{\r\n background-color: var(--color-visible);\r\n color: var(--color-bisible-text);\r\n }\r\n &:focus, &:hover{\r\n outline: none;\r\n box-shadow: 0 0 2px 2px var(--color-focus);\r\n }\r\n }\r\n }\r\n\r\n .currentTab{\r\n border: 1px solid var(--color-background);\r\n padding: 1rem;\r\n }","import { Component, Host, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: 'dnn-tabs',\r\n styleUrl: 'dnn-tabs.scss',\r\n shadow: true,\r\n})\r\nexport class DnnTabs {\r\n private component: HTMLElement;\r\n\r\n @State() tabTitles: string[] = [];\r\n @State() selectedTabTitle: string = \"\";\r\n\r\n componentDidLoad(){\r\n requestAnimationFrame(() => {\r\n this.updateTitles();\r\n this.showFirstTab();\r\n });\r\n }\r\n\r\n private getTabs() {\r\n return this.component.shadowRoot.querySelector(\"slot\").assignedElements() as HTMLDnnTabElement[];\r\n }\r\n\r\n private updateTitles(){\r\n const tabs = this.getTabs();\r\n tabs.forEach(tab => this.tabTitles = [...this.tabTitles, tab.tabTitle]);\r\n }\r\n\r\n private showFirstTab(){\r\n const tab = this.getTabs()[0];\r\n tab.show();\r\n this.selectedTabTitle = tab.tabTitle;\r\n }\r\n\r\n private showTab(tabTitle: string) {\r\n const tabs = this.getTabs();\r\n tabs.forEach(tab => {\r\n if (tab.tabTitle == tabTitle){\r\n tab.show();\r\n return;\r\n }\r\n\r\n tab.hide();\r\n });\r\n this.selectedTabTitle = tabTitle;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host ref={el => this.component = el}>\r\n <div class=\"tabTitles\">\r\n {this.tabTitles.map(tabTitle =>\r\n <button\r\n class={this.selectedTabTitle == tabTitle ? \"visible\": \"\"}\r\n onClick={() => this.showTab(tabTitle)}\r\n >\r\n {tabTitle}\r\n </button>\r\n )}\r\n </div>\r\n <div class=\"currentTab\">\r\n <slot></slot>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}",":host {\r\n /**\r\n * @prop --background: Background of the toggle.\r\n * @prop --background-checked: Background of the toggle when checked.\r\n * @prop --handle-background: Background of the handle.\r\n * @prop --handle-background-checked: Background of the handle when checked.\r\n * @prop --border-radius: The radius of the background borders.\r\n * @prop --handle-border-radius: The radius of the handle.\r\n */\r\n\r\n display: inline-block;\r\n outline: none;\r\n cursor: pointer;\r\n}\r\n\r\nbutton {\r\n height: 1.5em;\r\n width: 2.5em;\r\n outline: none;\r\n background-color: var(--background, #888);\r\n border: 0;\r\n border-radius: var(--border-radius, var(--dnn-controls-radius, 0.75em));\r\n padding: 0.1em;\r\n position: relative;\r\n margin: 0;\r\n transition: background-color 300ms ease-in-out;\r\n position: relative;\r\n cursor: pointer;\r\n &:hover, &:focus{\r\n box-shadow: 0 0 2px 2px var(--dnn-color-primary);\r\n }\r\n &.checked{\r\n background-color: var(--background-checked, var(--dnn-color-primary, blue));\r\n .handle{\r\n left: calc(1em + 4px);\r\n }\r\n }\r\n &:disabled{\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n box-shadow: none;\r\n }\r\n .handle{\r\n transition: all 300ms ease-in-out;\r\n background-color:white;\r\n width: 1em;\r\n height: 1em;\r\n border-radius: var(--dnn-controls-radius, 50%);\r\n position: absolute;\r\n top: calc(50% - 0.5em);\r\n left: 2px;\r\n }\r\n}","import { Component, h, Element, Prop, Event, EventEmitter, Watch, Host } from \"@stencil/core\";\r\nimport { DnnToggleChangeEventDetail } from \"./toggle-interface\";\r\n\r\n\r\n@Component({\r\n tag: \"dnn-toggle\",\r\n styleUrl: \"dnn-toggle.scss\",\r\n shadow: true\r\n})\r\nexport class DnnToggle {\r\n\r\n @Element() element: HTMLDnnToggleElement;\r\n\r\n /** If 'true' the toggle is checked (on). */\r\n @Prop({mutable: true}) checked = false;\r\n\r\n /** If 'true' the toggle is not be interacted with. */\r\n @Prop() disabled = false;\r\n\r\n /** Fires when the toggle changed */\r\n @Event() checkChanged!: EventEmitter<DnnToggleChangeEventDetail>;\r\n\r\n @Watch(\"checked\")\r\n checkedChanged(isChecked: boolean){\r\n this.checkChanged.emit({checked: isChecked});\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button disabled={this.disabled} class={{'checked': this.checked}}\r\n onClick={() => {\r\n if (!this.disabled) {\r\n this.checked = !this.checked;\r\n }\r\n }}\r\n >\r\n <div class=\"handle\"></div>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: flex;\r\n overflow: visible;\r\n}\r\n.expander{\r\n width: 24px;\r\n height: 24px;\r\n button{\r\n transition: all 150ms ease-in-out;\r\n background-color:transparent;\r\n border: none;\r\n padding: 0;\r\n margin: 0;\r\n height: 1em;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n cursor: pointer;\r\n position: relative;\r\n top: 2px;\r\n svg{\r\n :first-child{\r\n transition: all 150ms ease-in-out;\r\n fill: white;\r\n stroke: black\r\n }\r\n }\r\n }\r\n &.expanded{\r\n button{\r\n transform: rotate(45deg);\r\n svg{\r\n :first-child{\r\n fill: black;\r\n stroke: black;\r\n }\r\n }\r\n }\r\n }\r\n}\r\ndiv.item{\r\n .item-slot{\r\n display: flex;\r\n align-items: center;\r\n gap: 0.25em;\r\n }\r\n div.children{\r\n overflow: hidden;\r\n height:0;\r\n transition: all 150ms ease-in-out;\r\n }\r\n}","import { Component, Host, h, Prop, State, Element, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dnn-treeview-item',\r\n styleUrl: 'dnn-treeview-item.scss',\r\n shadow: true,\r\n})\r\nexport class DnnTreeviewItem {\r\n \r\n private expander!: HTMLDivElement;\r\n\r\n @Element() el!: HTMLDnnTreeviewItemElement;\r\n \r\n /** Defines if the current node is expanded */\r\n @Prop({mutable: true}) expanded: boolean = false;\r\n\r\n /** Fires when the user expands a node. */\r\n @Event({bubbles: false}) userExpanded: EventEmitter<void>;\r\n\r\n /** Fires when the user collapses a node. */\r\n @Event({bubbles: false}) userCollapsed: EventEmitter<void>;\r\n\r\n @State() hasChildren: boolean = false;\r\n \r\n private childrenElement!: HTMLDivElement;\r\n private collapsible!: HTMLDnnCollapsibleElement;\r\n\r\n componentDidLoad() {\r\n requestAnimationFrame(() => {\r\n const children = this.childrenElement.children[0] as HTMLSlotElement;\r\n const count = children.assignedElements().length\r\n if (count > 0){\r\n this.hasChildren = true;\r\n }\r\n if (this.expanded){\r\n this.expander.classList.add(\"expanded\");\r\n this.collapsible.expanded = false;\r\n setTimeout(() => {\r\n this.collapsible.expanded = true;\r\n }, 300);\r\n }\r\n });\r\n }\r\n\r\n private toggleCollapse(): void {\r\n this.expanded = !this.expanded;\r\n if (this.expanded){\r\n this.expander.classList.add(\"expanded\");\r\n this.userExpanded.emit();\r\n return;\r\n }\r\n\r\n this.expander.classList.remove(\"expanded\");\r\n this.userCollapsed.emit();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class=\"expander\" ref={el => this.expander = el}>\r\n {this.hasChildren &&\r\n <button\r\n onClick={() => this.toggleCollapse()}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M10 17l5-5-5-5v10z\"/><path d=\"M0 24V0h24v24H0z\" fill=\"none\"/></svg>\r\n </button>\r\n }\r\n </div>\r\n <div class=\"item\">\r\n <div class=\"item-slot\">\r\n <slot></slot>\r\n </div>\r\n <dnn-collapsible ref={el => this.collapsible = el} expanded={this.expanded}>\r\n <div ref={el => this.childrenElement = el}>\r\n <slot name=\"children\"></slot>\r\n </div>\r\n </dnn-collapsible>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n\r\nexport interface ExpandedToggledEvent{\r\n state: \"expanded\" | \"collapsed\";\r\n height: number;\r\n}",":host {\r\n display: block;\r\n\r\n /** Defines the menu background color. */\r\n --background-color: var(--dnn-color-primary-contrast, white);\r\n\r\n /** A color that contrasts well over the background color. */\r\n --foreground-color: var(--dnn-color-primary, blue);\r\n\r\n /** The color of the text. */\r\n --text-color: #222;\r\n}\r\n\r\n.menu-container{\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n background-color: var(--background-color);\r\n color: var(--text-color);\r\n .menu{\r\n margin: 0.5em;\r\n display: flex;\r\n gap: 1em;\r\n justify-content: flex-start;\r\n align-items: center;\r\n white-space: nowrap;\r\n width: 100%;\r\n }\r\n .overflow {\r\n margin-left: auto;\r\n position: relative;\r\n button{\r\n cursor: pointer;\r\n svg{\r\n fill: var(--foreground-color);\r\n }\r\n padding: 0;\r\n margin: 0;\r\n background-color: transparent;\r\n border: none;\r\n }\r\n .dropdown{\r\n position:absolute;\r\n display: flex;\r\n flex-direction: column;\r\n white-space: nowrap;\r\n right: 0;\r\n transition: 100ms ease-in-out;\r\n height: 0;\r\n overflow: hidden;\r\n &.visible{\r\n padding: 1em;\r\n gap: 0.5em;\r\n background-color: var(--background-color);\r\n box-shadow: 2px 2px 4px rgba(0,0,0,0.7);\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Element, Host, h, State } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dnn-vertical-overflow-menu',\r\n styleUrl: 'dnn-vertical-overflow-menu.scss',\r\n shadow: true,\r\n})\r\nexport class DnnVerticalOverflowMenu {\r\n\r\n @Element() element!: HTMLDnnVerticalOverflowMenuElement;\r\n \r\n @State() showDropdownButton = false;\r\n @State() showDropdownMenu = false;\r\n\r\n private menu!: HTMLDivElement;\r\n private dropdown: HTMLDivElement;\r\n private resizeObserver: ResizeObserver;\r\n private button!: HTMLButtonElement;\r\n private previousMenuWidth = 0;\r\n\r\n componentDidRender() {\r\n requestAnimationFrame(() => {\r\n this.moveItemsToDropDownIfNecessery();\r\n this.resizeObserver = new ResizeObserver(entries => {\r\n for (let entry of entries){\r\n if (entry.contentRect.width < this.previousMenuWidth){\r\n this.moveItemsToDropDownIfNecessery()\r\n }\r\n if (this.previousMenuWidth > 0 && entry.contentRect.width > this.previousMenuWidth){\r\n this.moveItemsToMenuIfPossible();\r\n }\r\n this.previousMenuWidth = entry.contentRect.width;\r\n }\r\n });\r\n this.resizeObserver.observe(this.element);\r\n });\r\n }\r\n\r\n private moveItemsToDropDownIfNecessery(){\r\n const menuItems = Array.from(this.menu.querySelector(\"slot\").assignedElements());\r\n const availableWidth = this.menu.getBoundingClientRect().width;\r\n let neededWidth = parseFloat(getComputedStyle(this.element).fontSize)*2;\r\n menuItems.forEach(item => neededWidth += this.getFullWidth(item));\r\n neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);\r\n if (neededWidth > availableWidth){\r\n this.showDropdownButton = true;\r\n var lastItem = menuItems[menuItems.length -1];\r\n if (this.dropdown == undefined){\r\n return;\r\n }\r\n lastItem.slot = \"dropdown\";\r\n this.moveItemsToDropDownIfNecessery();\r\n }\r\n }\r\n \r\n private moveItemsToMenuIfPossible(){\r\n if (this.dropdown == undefined || !this.dropdown.hasChildNodes()){\r\n return;\r\n }\r\n const menuItems = Array.from(this.menu.querySelector(\"slot\").assignedElements());\r\n const availableWidth = this.menu.getBoundingClientRect().width;\r\n let neededWidth = parseFloat(getComputedStyle(this.element).fontSize)*2;\r\n neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);\r\n menuItems.forEach(item => neededWidth += this.getFullWidth(item));\r\n const firstItem = this.dropdown.querySelector(\"slot\").assignedElements()[0];\r\n if (firstItem != undefined){\r\n neededWidth += this.getFullWidth(firstItem);\r\n }\r\n\r\n if (neededWidth < availableWidth){\r\n if (firstItem != undefined){\r\n firstItem.slot = \"\";\r\n }\r\n if(firstItem == undefined){\r\n this.dropdown.classList.remove(\"visible\");\r\n this.showDropdownMenu = false;\r\n this.showDropdownButton = false;\r\n }\r\n } \r\n }\r\n\r\n private getFullWidth(item: Element) {\r\n var width = item.getBoundingClientRect().width;\r\n var styles = getComputedStyle(item);\r\n width += parseFloat(styles.marginLeft);\r\n width += parseFloat(styles.marginRight);\r\n width += parseFloat(styles.paddingLeft);\r\n width += parseFloat(styles.paddingRight);\r\n return width;\r\n }\r\n\r\n private toggleOverflowMenu(): void {\r\n this.showDropdownMenu = !this.showDropdownMenu;\r\n if (this.showDropdownMenu){\r\n this.dropdown.classList.add(\"visible\");\r\n let contentHeight = 0;\r\n const items = Array.from(this.dropdown.querySelector(\"slot\").assignedElements());\r\n items.forEach(item => contentHeight += item.getBoundingClientRect().height);\r\n var emHeight = parseFloat(getComputedStyle(this.dropdown).fontSize) * 0.5;\r\n var additionalHeight = emHeight * (this.dropdown.children.length - 1);\r\n contentHeight += additionalHeight;\r\n this.dropdown.style.height = `${contentHeight}px`;\r\n const dismissMenu = (e: MouseEvent) => {\r\n const buttonRect = this.button.getBoundingClientRect();\r\n if (\r\n e.clientX < buttonRect.left ||\r\n e.clientX > buttonRect.right ||\r\n e.clientY < buttonRect.top ||\r\n e.clientY > buttonRect.bottom){\r\n this.toggleOverflowMenu();\r\n }\r\n document.removeEventListener(\"click\", dismissMenu);\r\n };\r\n setTimeout(() => {\r\n document.addEventListener(\"click\", dismissMenu, false);\r\n }, 100);\r\n }\r\n else{\r\n this.dropdown.classList.remove(\"visible\");\r\n this.dropdown.style.height = \"0px\";\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class=\"menu-container\">\r\n <div class=\"menu\" ref={el => this.menu = el}>\r\n <slot></slot>\r\n </div>\r\n {this.showDropdownButton &&\r\n <div class=\"overflow\">\r\n <button\r\n ref={el => this.button = el}\r\n class=\"icon\"\r\n onClick={() => this.toggleOverflowMenu()}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><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\"/></svg>\r\n </button>\r\n <div class=\"dropdown\" ref={el => this.dropdown = el}>\r\n <slot name=\"dropdown\"></slot>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n",":host {\r\n display: flex;\r\n align-items: stretch;\r\n margin: 0 auto;\r\n position: relative;\r\n\r\n /** @prop --left-pane-background-color: Allows customizing the left pane background-color */\r\n --left-pane-background-color: transparent;\r\n\r\n /** @prop --right-pane-background-color: Allows customizing the right pane background-color */\r\n --right-pane-background-color: transparent;\r\n}\r\n\r\nbutton{\r\n border: none;\r\n margin:0;\r\n padding:0;\r\n cursor: ew-resize;\r\n position: absolute;\r\n height: 100%;\r\n background-color: transparent;\r\n &.transition{\r\n transition: all 300ms ease-in-out;\r\n }\r\n}\r\n\r\n\r\n.pane{\r\n overflow-y: auto;\r\n &.transition{\r\n transition: all 300ms ease-in-out;\r\n }\r\n &.left{\r\n background-color: var(--left-pane-background-color);\r\n }\r\n &.right{\r\n background-color: var(--right-pane-background-color);\r\n flex-grow: 1;\r\n }\r\n}","import { Component, Host, h, Prop, Element, State, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { getMovementFromEvent } from \"../../utilities/mouseUtilities\";\r\n\r\n/**\r\n * @slot default - The split divider control you want to use.\r\n * @slot left - The content of the left pane.\r\n * @slot right - The content of the right pane.\r\n */\r\n@Component({\r\n tag: 'dnn-vertical-splitview',\r\n styleUrl: 'dnn-vertical-splitview.scss',\r\n shadow: true,\r\n})\r\nexport class DnnVerticalSplitview {\r\n\r\n /** The width of the splitter area. */\r\n @Prop() splitterWidth = 16;\r\n\r\n /** The percentage position of the splitter in the container. */\r\n @Prop() splitWidthPercentage = 30;\r\n \r\n private splitter!: HTMLButtonElement;\r\n\r\n /** Sets the width percentage of the divider */\r\n @Method()\r\n async setSplitWidthPercentage(newWidth: number) {\r\n const panes = this.element.shadowRoot.querySelectorAll(\".pane\");\r\n requestAnimationFrame(() => {\r\n panes.forEach(pane => pane.classList.add(\"transition\"));\r\n this.splitter.classList.add(\"transition\");\r\n requestAnimationFrame(() => {\r\n const fullWidth = this.element.getBoundingClientRect().width;\r\n let newLeft = fullWidth * newWidth / 100;\r\n if (newLeft < 0){\r\n newLeft = 0;\r\n }\r\n if (newLeft > fullWidth){\r\n newLeft = fullWidth;\r\n }\r\n this.leftWidth = newLeft;\r\n this.rightWidth = fullWidth - newLeft;\r\n setTimeout(() => {\r\n panes.forEach(pane => pane.classList.remove(\"transition\"));\r\n this.splitter.classList.remove(\"transition\");\r\n }, 300);\r\n });\r\n });\r\n }\r\n\r\n /** Gets the current divider position percentage. */\r\n @Method()\r\n async getSplitWidthPercentage(){\r\n const fullWidth = this.element.getBoundingClientRect().width;\r\n return this.leftWidth / fullWidth;\r\n }\r\n\r\n /** Fires when the width of the divider changes. */\r\n @Event() widthChanged: EventEmitter<number>;\r\n\r\n @State() leftWidth = 0;\r\n @State() rightWidth = 0;\r\n\r\n @Element() element : HTMLDnnVerticalSplitviewElement;\r\n \r\n componentDidLoad() {\r\n requestAnimationFrame(() => {\r\n const fullWidth = this.element.getBoundingClientRect().width;\r\n this.leftWidth = fullWidth * this.splitWidthPercentage / 100;\r\n this.rightWidth = fullWidth - this.leftWidth;\r\n this.widthChanged.emit(this.splitWidthPercentage);\r\n });\r\n }\r\n \r\n private previousTouch: Touch;\r\n\r\n private handleMouseDown(event: MouseEvent | TouchEvent) {\r\n event.preventDefault();\r\n const handleDrag = (ev: MouseEvent | TouchEvent) => {\r\n let {movementX} = getMovementFromEvent(ev, this.previousTouch);\r\n let fullWidth = this.element.getBoundingClientRect().width;\r\n let newLeft = this.leftWidth + movementX;\r\n if (newLeft < 0){\r\n newLeft = 0;\r\n }\r\n if (newLeft > fullWidth){\r\n newLeft = fullWidth;\r\n }\r\n this.leftWidth = newLeft;\r\n this.rightWidth = fullWidth - newLeft;\r\n }\r\n const handleDragFinished = () => {\r\n document.removeEventListener(\"mousemove\", handleDrag);\r\n document.removeEventListener(\"touchmove\", handleDrag);\r\n const fullWidth = this.element.getBoundingClientRect().width;\r\n const newPercentage = this.leftWidth / fullWidth * 100;\r\n this.widthChanged.emit(newPercentage);\r\n };\r\n document.addEventListener(\"mouseup\", handleDragFinished);\r\n document.addEventListener(\"touchend\", handleDragFinished);\r\n document.addEventListener(\"mousemove\", handleDrag);\r\n document.addEventListener(\"touchmove\", handleDrag);\r\n }\r\n\r\n private handleKeyDown(e: KeyboardEvent): void {\r\n let movementX = 0;\r\n switch (e.key) {\r\n case \"ArrowLeft\":\r\n movementX = -10;\r\n break;\r\n case \"ArrowRight\":\r\n movementX = 10;\r\n break;\r\n default:\r\n return;\r\n }\r\n if (e.shiftKey){\r\n movementX = movementX * 10;\r\n }\r\n const fullWidth = this.element.getBoundingClientRect().width;\r\n let newLeft = this.leftWidth + movementX;\r\n if (newLeft < 0){\r\n newLeft = 0;\r\n }\r\n if (newLeft > fullWidth){\r\n newLeft = fullWidth;\r\n }\r\n this.leftWidth = newLeft;\r\n this.rightWidth = fullWidth - this.leftWidth;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class=\"left pane\" style={{\r\n width: `${this.leftWidth}px`,\r\n }}>\r\n <slot name=\"left\"></slot>\r\n </div>\r\n <button\r\n onMouseDown={e => this.handleMouseDown(e)}\r\n onTouchStart={e => this.handleMouseDown(e)}\r\n onKeyDown={e => this.handleKeyDown(e)}\r\n ref={el => this.splitter = el}\r\n style={{\r\n minWidth: `${this.splitterWidth.toString()}px`,\r\n left: `${this.leftWidth - 2}px`,\r\n }}\r\n >\r\n <slot></slot>\r\n </button>\r\n <div\r\n class=\"right pane\"\r\n style={{\r\n width: `${this.rightWidth}px`,\r\n }}>\r\n <slot name=\"right\"></slot>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}