@dnncommunity/dnn-elements 0.24.0-beta.8 → 0.24.0-beta.9

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 (138) hide show
  1. package/dist/cjs/dnn-checkbox.cjs.entry.js +4 -1
  2. package/dist/cjs/dnn-checkbox.cjs.entry.js.map +1 -1
  3. package/dist/cjs/dnn-chevron.cjs.entry.js +1 -1
  4. package/dist/cjs/dnn-collapsible.cjs.entry.js +1 -1
  5. package/dist/cjs/dnn-color-input.cjs.entry.js +14 -14
  6. package/dist/cjs/dnn-color-picker.cjs.entry.js +3 -3
  7. package/dist/cjs/dnn-dropzone.cjs.entry.js +9 -9
  8. package/dist/cjs/dnn-fieldset.cjs.entry.js +4 -4
  9. package/dist/cjs/dnn-image-cropper.cjs.entry.js +2 -2
  10. package/dist/cjs/dnn-input.cjs.entry.js +7 -7
  11. package/dist/cjs/dnn-modal.cjs.entry.js +2 -2
  12. package/dist/cjs/dnn-monaco-editor.cjs.entry.js +1 -1
  13. package/dist/cjs/dnn-permissions-grid.cjs.entry.js +10 -10
  14. package/dist/cjs/dnn-permissions-grid.cjs.entry.js.map +1 -1
  15. package/dist/cjs/dnn-progress-bar.cjs.entry.js +1 -1
  16. package/dist/cjs/dnn-richtext.cjs.entry.js +2 -2
  17. package/dist/cjs/dnn-searchbox.cjs.entry.js +1 -1
  18. package/dist/cjs/dnn-select.cjs.entry.js +2 -2
  19. package/dist/cjs/dnn-sort-icon.cjs.entry.js +4 -4
  20. package/dist/cjs/dnn-tab_2.cjs.entry.js +3 -3
  21. package/dist/cjs/dnn-textarea.cjs.entry.js +1 -1
  22. package/dist/cjs/dnn-toggle.cjs.entry.js +2 -2
  23. package/dist/cjs/dnn-treeview-item.cjs.entry.js +2 -2
  24. package/dist/cjs/dnn-vertical-overflow-menu.cjs.entry.js +2 -2
  25. package/dist/cjs/dnn-vertical-splitview.cjs.entry.js +4 -4
  26. package/dist/cjs/dnn.cjs.js +1 -1
  27. package/dist/cjs/loader.cjs.js +1 -1
  28. package/dist/collection/components/dnn-checkbox/dnn-checkbox.js +14 -2
  29. package/dist/collection/components/dnn-checkbox/dnn-checkbox.js.map +1 -1
  30. package/dist/collection/components/dnn-chevron/dnn-chevron.js +1 -1
  31. package/dist/collection/components/dnn-collapsible/dnn-collapsible.js +1 -1
  32. package/dist/collection/components/dnn-color-input/dnn-color-input.js +14 -14
  33. package/dist/collection/components/dnn-color-picker/dnn-color-picker.js +3 -3
  34. package/dist/collection/components/dnn-dropzone/dnn-dropzone.js +9 -9
  35. package/dist/collection/components/dnn-fieldset/dnn-fieldset.js +4 -4
  36. package/dist/collection/components/dnn-image-cropper/dnn-image-cropper.js +2 -2
  37. package/dist/collection/components/dnn-input/dnn-input.js +7 -7
  38. package/dist/collection/components/dnn-modal/dnn-modal.js +2 -2
  39. package/dist/collection/components/dnn-monaco-editor/dnn-monaco-editor.js +1 -1
  40. package/dist/collection/components/dnn-permissions-grid/dnn-permissions-grid.css +1 -1
  41. package/dist/collection/components/dnn-permissions-grid/dnn-permissions-grid.js +9 -9
  42. package/dist/collection/components/dnn-permissions-grid/dnn-permissions-grid.js.map +1 -1
  43. package/dist/collection/components/dnn-progress-bar/dnn-progress-bar.js +1 -1
  44. package/dist/collection/components/dnn-richtext/dnn-richtext.js +2 -2
  45. package/dist/collection/components/dnn-searchbox/dnn-searchbox.js +1 -1
  46. package/dist/collection/components/dnn-select/dnn-select.js +2 -2
  47. package/dist/collection/components/dnn-sort-icon/dnn-sort-icon.js +4 -4
  48. package/dist/collection/components/dnn-tab/dnn-tab.js +2 -2
  49. package/dist/collection/components/dnn-tabs/dnn-tabs.js +1 -1
  50. package/dist/collection/components/dnn-textarea/dnn-textarea.js +1 -1
  51. package/dist/collection/components/dnn-toggle/dnn-toggle.js +2 -2
  52. package/dist/collection/components/dnn-treeview-item/dnn-treeview-item.js +2 -2
  53. package/dist/collection/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.js +2 -2
  54. package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.js +4 -4
  55. package/dist/dnn/dnn.esm.js +1 -1
  56. package/dist/dnn/dnn.esm.js.map +1 -1
  57. package/dist/dnn/{p-6e54915d.entry.js → p-03d3f2b1.entry.js} +2 -2
  58. package/dist/dnn/{p-96c850a8.entry.js → p-15c86eb3.entry.js} +2 -2
  59. package/dist/dnn/{p-350e4008.entry.js → p-16db9c38.entry.js} +2 -2
  60. package/dist/dnn/p-45e1c385.entry.js +2 -0
  61. package/dist/dnn/{p-2486e9db.entry.js.map → p-45e1c385.entry.js.map} +1 -1
  62. package/dist/dnn/{p-4574844c.entry.js → p-52ae7b31.entry.js} +2 -2
  63. package/dist/dnn/{p-90dd4620.entry.js → p-576364af.entry.js} +2 -2
  64. package/dist/dnn/{p-07a78c58.entry.js → p-5a244627.entry.js} +2 -2
  65. package/dist/dnn/{p-70b71aeb.entry.js → p-5b8e0904.entry.js} +2 -2
  66. package/dist/dnn/{p-50b6bb3f.entry.js → p-6643b369.entry.js} +2 -2
  67. package/dist/dnn/{p-7c4bcd14.entry.js → p-6659a086.entry.js} +2 -2
  68. package/dist/dnn/{p-8564bc60.entry.js → p-672fb82d.entry.js} +2 -2
  69. package/dist/dnn/{p-61dfb826.entry.js → p-69d5f883.entry.js} +2 -2
  70. package/dist/dnn/p-6e2adf25.entry.js +2 -0
  71. package/dist/dnn/p-6e2adf25.entry.js.map +1 -0
  72. package/dist/dnn/{p-b96b7c4a.entry.js → p-73fddf11.entry.js} +2 -2
  73. package/dist/dnn/p-9a06ad79.entry.js +2 -0
  74. package/dist/dnn/{p-535748e2.entry.js → p-a6982c8d.entry.js} +2 -2
  75. package/dist/dnn/{p-9ecfe643.entry.js → p-af925605.entry.js} +2 -2
  76. package/dist/dnn/{p-d7d6dffb.entry.js → p-bc1dd08b.entry.js} +2 -2
  77. package/dist/dnn/{p-21c5ef07.entry.js → p-cfbd1373.entry.js} +2 -2
  78. package/dist/dnn/{p-b553c159.entry.js → p-d67edea7.entry.js} +2 -2
  79. package/dist/dnn/{p-e23840d6.entry.js → p-dcf4505a.entry.js} +2 -2
  80. package/dist/dnn/p-ea2d6fd2.entry.js +2 -0
  81. package/dist/dnn/p-ea2d6fd2.entry.js.map +1 -0
  82. package/dist/dnn/{p-3b3475e0.entry.js → p-f107355e.entry.js} +2 -2
  83. package/dist/esm/dnn-checkbox.entry.js +4 -1
  84. package/dist/esm/dnn-checkbox.entry.js.map +1 -1
  85. package/dist/esm/dnn-chevron.entry.js +1 -1
  86. package/dist/esm/dnn-collapsible.entry.js +1 -1
  87. package/dist/esm/dnn-color-input.entry.js +14 -14
  88. package/dist/esm/dnn-color-picker.entry.js +3 -3
  89. package/dist/esm/dnn-dropzone.entry.js +9 -9
  90. package/dist/esm/dnn-fieldset.entry.js +4 -4
  91. package/dist/esm/dnn-image-cropper.entry.js +2 -2
  92. package/dist/esm/dnn-input.entry.js +7 -7
  93. package/dist/esm/dnn-modal.entry.js +2 -2
  94. package/dist/esm/dnn-monaco-editor.entry.js +1 -1
  95. package/dist/esm/dnn-permissions-grid.entry.js +10 -10
  96. package/dist/esm/dnn-permissions-grid.entry.js.map +1 -1
  97. package/dist/esm/dnn-progress-bar.entry.js +1 -1
  98. package/dist/esm/dnn-richtext.entry.js +2 -2
  99. package/dist/esm/dnn-searchbox.entry.js +1 -1
  100. package/dist/esm/dnn-select.entry.js +2 -2
  101. package/dist/esm/dnn-sort-icon.entry.js +4 -4
  102. package/dist/esm/dnn-tab_2.entry.js +3 -3
  103. package/dist/esm/dnn-textarea.entry.js +1 -1
  104. package/dist/esm/dnn-toggle.entry.js +2 -2
  105. package/dist/esm/dnn-treeview-item.entry.js +2 -2
  106. package/dist/esm/dnn-vertical-overflow-menu.entry.js +2 -2
  107. package/dist/esm/dnn-vertical-splitview.entry.js +4 -4
  108. package/dist/esm/dnn.js +1 -1
  109. package/dist/esm/loader.js +1 -1
  110. package/dist/types/components/dnn-checkbox/dnn-checkbox.d.ts +2 -1
  111. package/dist/types/components.d.ts +12 -0
  112. package/package.json +1 -1
  113. package/dist/dnn/p-2486e9db.entry.js +0 -2
  114. package/dist/dnn/p-3d1d6321.entry.js +0 -2
  115. package/dist/dnn/p-3d1d6321.entry.js.map +0 -1
  116. package/dist/dnn/p-5b15b44a.entry.js +0 -2
  117. package/dist/dnn/p-b5241c09.entry.js +0 -2
  118. package/dist/dnn/p-b5241c09.entry.js.map +0 -1
  119. /package/dist/dnn/{p-6e54915d.entry.js.map → p-03d3f2b1.entry.js.map} +0 -0
  120. /package/dist/dnn/{p-96c850a8.entry.js.map → p-15c86eb3.entry.js.map} +0 -0
  121. /package/dist/dnn/{p-350e4008.entry.js.map → p-16db9c38.entry.js.map} +0 -0
  122. /package/dist/dnn/{p-4574844c.entry.js.map → p-52ae7b31.entry.js.map} +0 -0
  123. /package/dist/dnn/{p-90dd4620.entry.js.map → p-576364af.entry.js.map} +0 -0
  124. /package/dist/dnn/{p-07a78c58.entry.js.map → p-5a244627.entry.js.map} +0 -0
  125. /package/dist/dnn/{p-70b71aeb.entry.js.map → p-5b8e0904.entry.js.map} +0 -0
  126. /package/dist/dnn/{p-50b6bb3f.entry.js.map → p-6643b369.entry.js.map} +0 -0
  127. /package/dist/dnn/{p-7c4bcd14.entry.js.map → p-6659a086.entry.js.map} +0 -0
  128. /package/dist/dnn/{p-8564bc60.entry.js.map → p-672fb82d.entry.js.map} +0 -0
  129. /package/dist/dnn/{p-61dfb826.entry.js.map → p-69d5f883.entry.js.map} +0 -0
  130. /package/dist/dnn/{p-b96b7c4a.entry.js.map → p-73fddf11.entry.js.map} +0 -0
  131. /package/dist/dnn/{p-5b15b44a.entry.js.map → p-9a06ad79.entry.js.map} +0 -0
  132. /package/dist/dnn/{p-535748e2.entry.js.map → p-a6982c8d.entry.js.map} +0 -0
  133. /package/dist/dnn/{p-9ecfe643.entry.js.map → p-af925605.entry.js.map} +0 -0
  134. /package/dist/dnn/{p-d7d6dffb.entry.js.map → p-bc1dd08b.entry.js.map} +0 -0
  135. /package/dist/dnn/{p-21c5ef07.entry.js.map → p-cfbd1373.entry.js.map} +0 -0
  136. /package/dist/dnn/{p-b553c159.entry.js.map → p-d67edea7.entry.js.map} +0 -0
  137. /package/dist/dnn/{p-e23840d6.entry.js.map → p-dcf4505a.entry.js.map} +0 -0
  138. /package/dist/dnn/{p-3b3475e0.entry.js.map → p-f107355e.entry.js.map} +0 -0
@@ -1 +1 @@
1
- {"version":3,"names":["dnnDropzoneCss","DnnDropzoneStyle0","DnnDropzone","this","defaultResx","dragAndDropFile","capture","or","takePicture","uploadFile","uploadSizeTooLarge","fileSizeLimit","invalidExtension","allowedFileExtensions","handleDragOver","event","stopPropagation","preventDefault","dataTransfer","dropEffect","dropzone","classList","add","handleDrop","dropEvent","fileTooLarge","files","hasInvalidExtensions","Array","from","isAnyFileLargerThanAllowed","fileList","getFilesFromFileList","filesSelected","emit","componentWillLoad","mergeResx","componentDidLoad","allowCameraMode","checkIfBrowserCanTakeSnapshots","then","result","canTakeSnapshots","allowedExtensions","undefined","length","extensionsWithDots","map","e","extensionsList","join","fileInput","accept","resxChanged","formResetCallback","internals","setValidity","value","setFormValue","localResx","Object","assign","resx","Promise","resolve","mediaDevices","navigator","enumerateDevices","devices","some","device","kind","index","file","push","maxFileSize","size","handleUploadKeyDown","key","click","handleUploadButton","element","name","data","FormData","forEach","append","hasInvalid","fileIndex","regex","fileExtension","_a","exec","toLowerCase","loweredAllowedExtensions","_b","includes","takeSnapshot","takingPicture","getUserMedia","video","audio","stream","videoPreview","srcObject","play","videoSettings","getVideoTracks","getSettings","catch","error","alert","applySnapshot","canvas","document","createElement","context","getContext","width","height","drawImage","toBlob","blob","File","type","captureQuality","getInvalidExtensionsMessage","message","replace","render","h","Host","ref","class","onDragOver","onDrop","onDragLeave","remove","tabIndex","focused","onFocus","uploadLabel","focus","onBlur","blur","onKeyDown","el","onChange","target","xmlns","viewBox","fill","d","_c","_d","onClick","cx","cy","r","_e","_f","getReadableFileSizeString"],"sources":["src/components/dnn-dropzone/dnn-dropzone.scss?tag=dnn-dropzone&encapsulation=shadow","src/components/dnn-dropzone/dnn-dropzone.tsx"],"sourcesContent":["\n:host {\n /** \n * @prop --border-color: The color of the border.\n * @prop --border-radius: The radius of the controls borders.\n * @prop --drop-background-color: The color of the background when a file is dropping.\n */\n --border-color: var(--dnn-color-tertiary-contrast, lightgray);\n --border-radius: var(--dnn-controls-radius, 5px);\n --drop-background-color: var(--dnn-color-tertiary, lightblue);\n\n display: flex;\n flex-direction: column;\n gap: 1rem;\n text-align: center;\n border: 2px dashed var(--border-color);\n border-radius: var(--border-radius);\n padding: 1rem;\n transition: all 300ms ease-in-out;\n}\n\n:host(.dropping){\n background-color: var(--drop-background-color);\n}\np{\n margin: 0;\n padding: 0;\n}\nbutton{\n display: flex;\n justify-content: center;\n align-items: center;\n border: 0px;\n margin: 0;\n padding: 0;\n background-color: transparent;\n &:hover{\n cursor: pointer;\n }\n svg{\n margin-right: 0.5rem;\n }\n}\nlabel.upload-file{\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n input{\n display: none;\n }\n}\n.video-preview{\n display: flex;\n flex-direction: column;\n align-items: center;\n button{\n margin: 1rem;\n }\n}\n.error {\n color:red;\n}","import { Component, Host, h, Prop, State, Event, EventEmitter, Watch, AttachInternals } from '@stencil/core';\nimport { getReadableFileSizeString } from '../../utilities/stringUtilities';\nimport { DropzoneResx } from './types';\n\n@Component({\n tag: 'dnn-dropzone',\n styleUrl: 'dnn-dropzone.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnDropzone {\n /** Localization strings */\n @Prop() resx:DropzoneResx;\n\n /** A list of allowed file extensions.\n * If not specified, any file is allowed.\n * Ex: [\"jpg\", \"jpeg\", \"gif\", \"png\"]\n */\n @Prop() allowedExtensions: string[];\n\n /**\n * If true, will allow the user to take a snapshot\n * using the device camera. (only works over https).\n */\n @Prop() allowCameraMode: boolean = false;\n\n /**\n * Specifies the jpeg quality for when the device\n * camera is used to generate a picture.\n * Needs to be a number between 0 and 1 and defaults to 0.8\n */\n @Prop() captureQuality: number = 0.8;\n\n /**\n * Max file size in bytes.\n */\n @Prop() maxFileSize?: number;\n\n /** The name of the field when used in a form. */\n @Prop() name: string;\n\n /** Fires when file were selected. */\n @Event() filesSelected: EventEmitter<File[]>;\n \n @State() canTakeSnapshots: boolean = false;\n @State() takingPicture: boolean = false;\n @State() fileTooLarge: boolean = false;\n @State() invalidExtension: boolean = false;\n @State() localResx: DropzoneResx;\n @State() focused = false;\n\n @AttachInternals() internals: ElementInternals;\n\n private dropzone: HTMLElement;\n private fileInput: HTMLInputElement;\n private videoPreview: HTMLVideoElement;\n private uploadLabel: HTMLLabelElement;\n private videoSettings!: MediaTrackSettings;\n private defaultResx: DropzoneResx = {\n dragAndDropFile: \"Drag and drop a file\",\n capture: \"Capture\",\n or: \"or\",\n takePicture: \"Take a picture\",\n uploadFile: \"Upload a file\",\n uploadSizeTooLarge: \"The file you tried to upload is too large.\",\n fileSizeLimit: \"The maximum size is {0}\",\n invalidExtension: \"The file you tried to upload has an invalid extension.\",\n allowedFileExtensions: \"Allowed file extensions: {0}\",\n }\n\n componentWillLoad() {\n this.mergeResx();\n }\n\n componentDidLoad() {\n if (this.allowCameraMode){\n this.checkIfBrowserCanTakeSnapshots()\n .then(result => this.canTakeSnapshots = result);\n }\n if (this.allowedExtensions != undefined && this.allowedExtensions.length > 0){\n var extensionsWithDots = this.allowedExtensions.map(e => `.${e}`);\n var extensionsList = extensionsWithDots.join(\",\");\n this.fileInput.accept = extensionsList;\n }\n }\n\n @Watch('resx')\n resxChanged() {\n this.mergeResx();\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.internals.setValidity({});\n this.fileInput.value = \"\";\n this.internals.setFormValue(\"\");\n }\n\n private mergeResx(): void {\n this.localResx = {...this.defaultResx, ...this.resx};\n }\n\n private checkIfBrowserCanTakeSnapshots(): Promise<boolean> {\n return new Promise((resolve) => {\n const mediaDevices = navigator.mediaDevices;\n if (mediaDevices == undefined || mediaDevices.enumerateDevices == undefined) {\n resolve(false);\n }\n mediaDevices.enumerateDevices()\n .then(devices => {\n var result = devices.some(device => device.kind == \"videoinput\");\n resolve(result);\n });\n });\n }\n\n private getFilesFromFileList(files: FileList) : File[] {\n var fileList: File[] = [];\n for (let index = 0; index < files.length; index++) {\n const file = files[index];\n fileList.push(file);\n }\n\n return fileList;\n }\n\n private isAnyFileLargerThanAllowed (files:File[]) : boolean {\n if (this.maxFileSize == undefined || this.maxFileSize <= 0) {\n return false;\n } \n\n if ( files.some(file => file.size > this.maxFileSize )) {\n return true;\n }\n\n return false;\n }\n\n private handleUploadKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.fileInput.click();\n }\n }\n\n private handleUploadButton(element: HTMLInputElement): void {\n this.fileTooLarge = false;\n this.invalidExtension = false;\n let files = this.getFilesFromFileList(element.files);\n \n if (this.isAnyFileLargerThanAllowed(files)) {\n this.fileTooLarge = true;\n return;\n }\n\n if (this.hasInvalidExtensions(files)){\n this.invalidExtension = true;\n return;\n }\n\n this.filesSelected.emit(files);\n if (this.name != undefined && this.name.length > 0){\n var data = new FormData();\n files.forEach(file => {\n data.append(this.name, file);\n });\n this.internals.setFormValue(data);\n }\n }\n\n private handleDragOver = (event: DragEvent) => \n {\n event.stopPropagation();\n event.preventDefault();\n event.dataTransfer.dropEffect = \"copy\";\n this.dropzone.classList.add(\"dropping\");\n };\n\n private hasInvalidExtensions(files: File[]): boolean{\n var hasInvalid = false;\n for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {\n const file = files[fileIndex];\n var regex = /(?:\\.([^.]+))?$/;\n const fileExtension = regex.exec(file.name)[1]?.toLowerCase();\n if (fileExtension == undefined){\n hasInvalid = true;\n }\n\n var loweredAllowedExtensions = this.allowedExtensions?.map(e => e.toLowerCase());\n if (this.allowedExtensions != undefined && !loweredAllowedExtensions?.includes(fileExtension)){\n hasInvalid = true;\n }\n\n return hasInvalid;\n }\n }\n\n private handleDrop = (dropEvent: DragEvent) => {\n this.invalidExtension = false;\n this.fileTooLarge = false;\n dropEvent.stopPropagation();\n dropEvent.preventDefault();\n const files = dropEvent.dataTransfer.files;\n\n if (this.hasInvalidExtensions(Array.from(files))){\n this.invalidExtension = true;\n return;\n }\n\n if (this.isAnyFileLargerThanAllowed(Array.from(files))) {\n this.fileTooLarge = true;\n return;\n }\n\n var fileList = this.getFilesFromFileList(files);\n this.filesSelected.emit(fileList);\n };\n\n private takeSnapshot(): void {\n this.takingPicture = true;\n navigator.mediaDevices.getUserMedia({video: true, audio: false})\n .then(stream => {\n stream\n this.videoPreview.srcObject = stream;\n this.videoPreview.play()\n .then(() => {\n this.videoSettings = stream.getVideoTracks()[0].getSettings();\n });\n })\n .catch(error => alert(error));\n }\n\n private applySnapshot(): void {\n var canvas = document.createElement(\"canvas\");\n const context = canvas.getContext(\"2d\");\n canvas.width = this.videoSettings.width;\n canvas.height = this.videoSettings.height;\n context.drawImage(this.videoPreview, 0, 0);\n canvas.toBlob(blob => {\n var file = new File([blob], \"image.jpeg\", {type:\"image/jpeg\"});\n this.takingPicture = false;\n \n var fileList = [file];\n this.filesSelected.emit(fileList)\n }, \"image/jpeg\", this.captureQuality);\n }\n\n private getInvalidExtensionsMessage() {\n var message = this.localResx.allowedFileExtensions;\n var message = message.replace(\"{0}\", this.allowedExtensions.join(\", \"));\n return message;\n }\n \n render() {\n return (\n <Host\n ref={e => this.dropzone = e}\n class=\"dropzone\"\n onDragOver={e => this.handleDragOver(e)}\n onDrop={e => this.handleDrop(e)}\n onDragLeave={() => this.dropzone.classList.remove(\"dropping\")}\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.uploadLabel.focus()}\n onBlur={() => this.uploadLabel.blur()}\n >\n {!this.takingPicture &&\n [\n <p>{this.localResx?.dragAndDropFile}</p>\n ,\n <p>- {this.localResx?.or} -</p>\n ,\n <label\n class=\"upload-file\"\n tabIndex={0}\n onKeyDown={e => this.handleUploadKeyDown(e)}\n ref={el => this.uploadLabel = el}\n onFocus={() => this.focused = true}\n onBlur={() => this.focused = false}\n >\n <input\n type=\"file\"\n ref={el => this.fileInput = el}\n onChange={e => this.handleUploadButton(e.target as HTMLInputElement)}\n >\n </input>\n <span>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n enable-background=\"new 0 0 24 24\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\">\n <g><rect fill=\"none\" height=\"24\" width=\"24\"/></g>\n <g><path d=\"M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z\"/></g>\n </svg>\n </span>\n &nbsp;\n {this.localResx?.uploadFile}\n </label>\n ,\n this.canTakeSnapshots &&\n [\n <p>- {this.localResx?.or} -</p>\n ,\n <button\n onClick={() => this.takeSnapshot()}\n >\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>\n {this.localResx?.takePicture}\n </button>\n ]\n ]\n }\n {this.takingPicture &&\n <div class=\"video-preview\">\n <video ref={e => this.videoPreview = e} />\n <button\n onClick={() => this.applySnapshot()}\n >\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;\n {this.localResx?.capture}\n </button>\n </div>\n }\n { this.fileTooLarge && \n <div class='error'>\n <p>\n {this.localResx.uploadSizeTooLarge}\n <br/>\n {this.localResx.fileSizeLimit.replace(\"{0}\", getReadableFileSizeString(this.maxFileSize)) } \n </p>\n </div>\n }\n { this.invalidExtension &&\n <div class='error'>\n <p>\n {this.localResx.invalidExtension}\n <br/>\n {this.getInvalidExtensionsMessage()}\n </p>\n </div>\n }\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["dnnDropzoneCss","DnnDropzoneStyle0","DnnDropzone","this","defaultResx","dragAndDropFile","capture","or","takePicture","uploadFile","uploadSizeTooLarge","fileSizeLimit","invalidExtension","allowedFileExtensions","handleDragOver","event","stopPropagation","preventDefault","dataTransfer","dropEffect","dropzone","classList","add","handleDrop","dropEvent","fileTooLarge","files","hasInvalidExtensions","Array","from","isAnyFileLargerThanAllowed","fileList","getFilesFromFileList","filesSelected","emit","componentWillLoad","mergeResx","componentDidLoad","allowCameraMode","checkIfBrowserCanTakeSnapshots","then","result","canTakeSnapshots","allowedExtensions","undefined","length","extensionsWithDots","map","e","extensionsList","join","fileInput","accept","resxChanged","formResetCallback","internals","setValidity","value","setFormValue","localResx","Object","assign","resx","Promise","resolve","mediaDevices","navigator","enumerateDevices","devices","some","device","kind","index","file","push","maxFileSize","size","handleUploadKeyDown","key","click","handleUploadButton","element","name","data","FormData","forEach","append","hasInvalid","fileIndex","regex","fileExtension","_a","exec","toLowerCase","loweredAllowedExtensions","_b","includes","takeSnapshot","takingPicture","getUserMedia","video","audio","stream","videoPreview","srcObject","play","videoSettings","getVideoTracks","getSettings","catch","error","alert","applySnapshot","canvas","document","createElement","context","getContext","width","height","drawImage","toBlob","blob","File","type","captureQuality","getInvalidExtensionsMessage","message","replace","render","h","Host","ref","class","onDragOver","onDrop","onDragLeave","remove","tabIndex","focused","onFocus","uploadLabel","focus","onBlur","blur","onKeyDown","el","onChange","target","xmlns","viewBox","fill","d","_c","_d","onClick","cx","cy","r","_e","_f","getReadableFileSizeString"],"sources":["src/components/dnn-dropzone/dnn-dropzone.scss?tag=dnn-dropzone&encapsulation=shadow","src/components/dnn-dropzone/dnn-dropzone.tsx"],"sourcesContent":["\n:host {\n /** \n * @prop --border-color: The color of the border.\n * @prop --border-radius: The radius of the controls borders.\n * @prop --drop-background-color: The color of the background when a file is dropping.\n */\n --border-color: var(--dnn-color-tertiary-contrast, lightgray);\n --border-radius: var(--dnn-controls-radius, 5px);\n --drop-background-color: var(--dnn-color-tertiary, lightblue);\n\n display: flex;\n flex-direction: column;\n gap: 1rem;\n text-align: center;\n border: 2px dashed var(--border-color);\n border-radius: var(--border-radius);\n padding: 1rem;\n transition: all 300ms ease-in-out;\n}\n\n:host(.dropping){\n background-color: var(--drop-background-color);\n}\np{\n margin: 0;\n padding: 0;\n}\nbutton{\n display: flex;\n justify-content: center;\n align-items: center;\n border: 0px;\n margin: 0;\n padding: 0;\n background-color: transparent;\n &:hover{\n cursor: pointer;\n }\n svg{\n margin-right: 0.5rem;\n }\n}\nlabel.upload-file{\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n input{\n display: none;\n }\n}\n.video-preview{\n display: flex;\n flex-direction: column;\n align-items: center;\n button{\n margin: 1rem;\n }\n}\n.error {\n color:red;\n}","import { Component, Host, h, Prop, State, Event, EventEmitter, Watch, AttachInternals } from '@stencil/core';\nimport { getReadableFileSizeString } from '../../utilities/stringUtilities';\nimport { DropzoneResx } from './types';\n\n@Component({\n tag: 'dnn-dropzone',\n styleUrl: 'dnn-dropzone.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnDropzone {\n /** Localization strings */\n @Prop() resx:DropzoneResx;\n\n /** A list of allowed file extensions.\n * If not specified, any file is allowed.\n * Ex: [\"jpg\", \"jpeg\", \"gif\", \"png\"]\n */\n @Prop() allowedExtensions: string[];\n\n /**\n * If true, will allow the user to take a snapshot\n * using the device camera. (only works over https).\n */\n @Prop() allowCameraMode: boolean = false;\n\n /**\n * Specifies the jpeg quality for when the device\n * camera is used to generate a picture.\n * Needs to be a number between 0 and 1 and defaults to 0.8\n */\n @Prop() captureQuality: number = 0.8;\n\n /**\n * Max file size in bytes.\n */\n @Prop() maxFileSize?: number;\n\n /** The name of the field when used in a form. */\n @Prop() name: string;\n\n /** Fires when file were selected. */\n @Event() filesSelected: EventEmitter<File[]>;\n \n @State() canTakeSnapshots: boolean = false;\n @State() takingPicture: boolean = false;\n @State() fileTooLarge: boolean = false;\n @State() invalidExtension: boolean = false;\n @State() localResx: DropzoneResx;\n @State() focused = false;\n\n @AttachInternals() internals: ElementInternals;\n\n private dropzone: HTMLElement;\n private fileInput: HTMLInputElement;\n private videoPreview: HTMLVideoElement;\n private uploadLabel: HTMLLabelElement;\n private videoSettings!: MediaTrackSettings;\n private defaultResx: DropzoneResx = {\n dragAndDropFile: \"Drag and drop a file\",\n capture: \"Capture\",\n or: \"or\",\n takePicture: \"Take a picture\",\n uploadFile: \"Upload a file\",\n uploadSizeTooLarge: \"The file you tried to upload is too large.\",\n fileSizeLimit: \"The maximum size is {0}\",\n invalidExtension: \"The file you tried to upload has an invalid extension.\",\n allowedFileExtensions: \"Allowed file extensions: {0}\",\n }\n\n componentWillLoad() {\n this.mergeResx();\n }\n\n componentDidLoad() {\n if (this.allowCameraMode){\n this.checkIfBrowserCanTakeSnapshots()\n .then(result => this.canTakeSnapshots = result);\n }\n if (this.allowedExtensions != undefined && this.allowedExtensions.length > 0){\n var extensionsWithDots = this.allowedExtensions.map(e => `.${e}`);\n var extensionsList = extensionsWithDots.join(\",\");\n this.fileInput.accept = extensionsList;\n }\n }\n\n @Watch('resx')\n resxChanged() {\n this.mergeResx();\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.internals.setValidity({});\n this.fileInput.value = \"\";\n this.internals.setFormValue(\"\");\n }\n\n private mergeResx(): void {\n this.localResx = {...this.defaultResx, ...this.resx};\n }\n\n private checkIfBrowserCanTakeSnapshots(): Promise<boolean> {\n return new Promise((resolve) => {\n const mediaDevices = navigator.mediaDevices;\n if (mediaDevices == undefined || mediaDevices.enumerateDevices == undefined) {\n resolve(false);\n }\n mediaDevices.enumerateDevices()\n .then(devices => {\n var result = devices.some(device => device.kind == \"videoinput\");\n resolve(result);\n });\n });\n }\n\n private getFilesFromFileList(files: FileList) : File[] {\n var fileList: File[] = [];\n for (let index = 0; index < files.length; index++) {\n const file = files[index];\n fileList.push(file);\n }\n\n return fileList;\n }\n\n private isAnyFileLargerThanAllowed (files:File[]) : boolean {\n if (this.maxFileSize == undefined || this.maxFileSize <= 0) {\n return false;\n } \n\n if ( files.some(file => file.size > this.maxFileSize )) {\n return true;\n }\n\n return false;\n }\n\n private handleUploadKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.fileInput.click();\n }\n }\n\n private handleUploadButton(element: HTMLInputElement): void {\n this.fileTooLarge = false;\n this.invalidExtension = false;\n let files = this.getFilesFromFileList(element.files);\n \n if (this.isAnyFileLargerThanAllowed(files)) {\n this.fileTooLarge = true;\n return;\n }\n\n if (this.hasInvalidExtensions(files)){\n this.invalidExtension = true;\n return;\n }\n\n this.filesSelected.emit(files);\n if (this.name != undefined && this.name.length > 0){\n var data = new FormData();\n files.forEach(file => {\n data.append(this.name, file);\n });\n this.internals.setFormValue(data);\n }\n }\n\n private handleDragOver = (event: DragEvent) => \n {\n event.stopPropagation();\n event.preventDefault();\n event.dataTransfer.dropEffect = \"copy\";\n this.dropzone.classList.add(\"dropping\");\n };\n\n private hasInvalidExtensions(files: File[]): boolean{\n var hasInvalid = false;\n for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {\n const file = files[fileIndex];\n var regex = /(?:\\.([^.]+))?$/;\n const fileExtension = regex.exec(file.name)[1]?.toLowerCase();\n if (fileExtension == undefined){\n hasInvalid = true;\n }\n\n var loweredAllowedExtensions = this.allowedExtensions?.map(e => e.toLowerCase());\n if (this.allowedExtensions != undefined && !loweredAllowedExtensions?.includes(fileExtension)){\n hasInvalid = true;\n }\n\n return hasInvalid;\n }\n }\n\n private handleDrop = (dropEvent: DragEvent) => {\n this.invalidExtension = false;\n this.fileTooLarge = false;\n dropEvent.stopPropagation();\n dropEvent.preventDefault();\n const files = dropEvent.dataTransfer.files;\n\n if (this.hasInvalidExtensions(Array.from(files))){\n this.invalidExtension = true;\n return;\n }\n\n if (this.isAnyFileLargerThanAllowed(Array.from(files))) {\n this.fileTooLarge = true;\n return;\n }\n\n var fileList = this.getFilesFromFileList(files);\n this.filesSelected.emit(fileList);\n };\n\n private takeSnapshot(): void {\n this.takingPicture = true;\n navigator.mediaDevices.getUserMedia({video: true, audio: false})\n .then(stream => {\n stream\n this.videoPreview.srcObject = stream;\n this.videoPreview.play()\n .then(() => {\n this.videoSettings = stream.getVideoTracks()[0].getSettings();\n });\n })\n .catch(error => alert(error));\n }\n\n private applySnapshot(): void {\n var canvas = document.createElement(\"canvas\");\n const context = canvas.getContext(\"2d\");\n canvas.width = this.videoSettings.width;\n canvas.height = this.videoSettings.height;\n context.drawImage(this.videoPreview, 0, 0);\n canvas.toBlob(blob => {\n var file = new File([blob], \"image.jpeg\", {type:\"image/jpeg\"});\n this.takingPicture = false;\n \n var fileList = [file];\n this.filesSelected.emit(fileList)\n }, \"image/jpeg\", this.captureQuality);\n }\n\n private getInvalidExtensionsMessage() {\n var message = this.localResx.allowedFileExtensions;\n var message = message.replace(\"{0}\", this.allowedExtensions.join(\", \"));\n return message;\n }\n \n render() {\n return (\n <Host\n ref={e => this.dropzone = e}\n class=\"dropzone\"\n onDragOver={e => this.handleDragOver(e)}\n onDrop={e => this.handleDrop(e)}\n onDragLeave={() => this.dropzone.classList.remove(\"dropping\")}\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.uploadLabel.focus()}\n onBlur={() => this.uploadLabel.blur()}\n >\n {!this.takingPicture &&\n [\n <p>{this.localResx?.dragAndDropFile}</p>\n ,\n <p>- {this.localResx?.or} -</p>\n ,\n <label\n class=\"upload-file\"\n tabIndex={0}\n onKeyDown={e => this.handleUploadKeyDown(e)}\n ref={el => this.uploadLabel = el}\n onFocus={() => this.focused = true}\n onBlur={() => this.focused = false}\n >\n <input\n type=\"file\"\n ref={el => this.fileInput = el}\n onChange={e => this.handleUploadButton(e.target as HTMLInputElement)}\n >\n </input>\n <span>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n enable-background=\"new 0 0 24 24\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#000000\">\n <g><rect fill=\"none\" height=\"24\" width=\"24\"/></g>\n <g><path d=\"M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z\"/></g>\n </svg>\n </span>\n &nbsp;\n {this.localResx?.uploadFile}\n </label>\n ,\n this.canTakeSnapshots &&\n [\n <p>- {this.localResx?.or} -</p>\n ,\n <button\n onClick={() => this.takeSnapshot()}\n >\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>\n {this.localResx?.takePicture}\n </button>\n ]\n ]\n }\n {this.takingPicture &&\n <div class=\"video-preview\">\n <video ref={e => this.videoPreview = e} />\n <button\n onClick={() => this.applySnapshot()}\n >\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;\n {this.localResx?.capture}\n </button>\n </div>\n }\n { this.fileTooLarge && \n <div class='error'>\n <p>\n {this.localResx.uploadSizeTooLarge}\n <br/>\n {this.localResx.fileSizeLimit.replace(\"{0}\", getReadableFileSizeString(this.maxFileSize)) } \n </p>\n </div>\n }\n { this.invalidExtension &&\n <div class='error'>\n <p>\n {this.localResx.invalidExtension}\n <br/>\n {this.getInvalidExtensionsMessage()}\n </p>\n </div>\n }\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -1,2 +1,2 @@
1
- import{r as o,c as t,h as r,H as s}from"./p-978abd50.js";const e=":host{position:relative;display:flex;justify-content:space-between;--background-color:transparent;--color:#333;--border-size:1px;--border-color:grey;--border-active-color:black;--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);--focus-color:var(--dnn-color-primary, blue)}:host input{width:100%;border:var(--border-size) solid var(--border-color);outline:none;border-radius:var(--border-radius);padding:var(--padding);padding-right:32px;transition:all 300ms ease-in-out}:host input:focus-visible,:host input:hover{outline:none;box-shadow:0 0 2px 2px var(--focus-color)}:host svg{position:absolute;top:0;right:0;height:100%;transform:scale(0.7);fill:var(--color);outline:var(--color);color:var(--color);transition:all 300ms ease-in-out}:host button{background:transparent;border:0;margin:0;padding:0}:host button:focus-visible svg,:host button:hover svg{fill:var(--focus-color);outline:var(--focus-color);color:var(--focus-color)}";const i=e;const n=class{constructor(r){o(this,r);this.queryChanged=t(this,"queryChanged",7);this.debounceTimer=null;this.placeholder="";this.debounced=true;this.debounceTime=500;this.query="";this.focused=undefined}handleQueryChanged(){clearTimeout(this.debounceTimer);this.debounceTimer=setTimeout((()=>{this.queryChanged.emit(this.query)}),this.debounceTime)}render(){return r(s,{key:"75a0a9f1b1b0a4cc5e2b67359484ad161783292b",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},r("input",{key:"55be061fde404662bcf3995495a120aba1ebd881",ref:o=>this.inputField=o,type:"text",value:this.query,placeholder:this.placeholder,onInput:o=>this.query=o.target.value,onFocus:()=>this.focused=true,onBlur:()=>this.focused=false}),this.query!==""?r("button",{class:"svg clear",onClick:()=>this.query=""},r("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},r("path",{d:"M0 0h24v24H0z",fill:"none"}),r("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"}))):r("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},r("path",{d:"M0 0h24v24H0z",fill:"none"}),r("path",{d:"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"})))}static get watchers(){return{query:["handleQueryChanged"]}}};n.style=i;export{n as dnn_searchbox};
2
- //# sourceMappingURL=p-4574844c.entry.js.map
1
+ import{r as o,c as t,h as r,H as s}from"./p-978abd50.js";const e=":host{position:relative;display:flex;justify-content:space-between;--background-color:transparent;--color:#333;--border-size:1px;--border-color:grey;--border-active-color:black;--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);--focus-color:var(--dnn-color-primary, blue)}:host input{width:100%;border:var(--border-size) solid var(--border-color);outline:none;border-radius:var(--border-radius);padding:var(--padding);padding-right:32px;transition:all 300ms ease-in-out}:host input:focus-visible,:host input:hover{outline:none;box-shadow:0 0 2px 2px var(--focus-color)}:host svg{position:absolute;top:0;right:0;height:100%;transform:scale(0.7);fill:var(--color);outline:var(--color);color:var(--color);transition:all 300ms ease-in-out}:host button{background:transparent;border:0;margin:0;padding:0}:host button:focus-visible svg,:host button:hover svg{fill:var(--focus-color);outline:var(--focus-color);color:var(--focus-color)}";const i=e;const n=class{constructor(r){o(this,r);this.queryChanged=t(this,"queryChanged",7);this.debounceTimer=null;this.placeholder="";this.debounced=true;this.debounceTime=500;this.query="";this.focused=undefined}handleQueryChanged(){clearTimeout(this.debounceTimer);this.debounceTimer=setTimeout((()=>{this.queryChanged.emit(this.query)}),this.debounceTime)}render(){return r(s,{key:"bade94fc73622bb28ee3a5719f51758cb5691a1a",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},r("input",{key:"764fd9c42ac87ee05f272595f4a699a1f2931cbd",ref:o=>this.inputField=o,type:"text",value:this.query,placeholder:this.placeholder,onInput:o=>this.query=o.target.value,onFocus:()=>this.focused=true,onBlur:()=>this.focused=false}),this.query!==""?r("button",{class:"svg clear",onClick:()=>this.query=""},r("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},r("path",{d:"M0 0h24v24H0z",fill:"none"}),r("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"}))):r("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},r("path",{d:"M0 0h24v24H0z",fill:"none"}),r("path",{d:"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"})))}static get watchers(){return{query:["handleQueryChanged"]}}};n.style=i;export{n as dnn_searchbox};
2
+ //# sourceMappingURL=p-52ae7b31.entry.js.map
@@ -1,2 +1,2 @@
1
- import{r as t,c as e,h as s,H as i,g as n}from"./p-978abd50.js";import{g as o}from"./p-dcf42da6.js";const a=":host{display:flex;align-items:stretch;margin:0 auto;position:relative;--left-pane-background-color:transparent;--right-pane-background-color:transparent}button{border:none;margin:0;padding:0;cursor:ew-resize;position:absolute;height:100%;background-color:transparent}button.transition{transition:all 300ms ease-in-out}.pane{overflow-y:auto}.pane.transition{transition:all 300ms ease-in-out}.pane.left{background-color:var(--left-pane-background-color)}.pane.right{background-color:var(--right-pane-background-color);flex-grow:1}";const r=a;const c=class{constructor(s){t(this,s);this.widthChanged=e(this,"widthChanged",7);this.splitterWidth=16;this.splitWidthPercentage=30;this.leftWidth=0;this.rightWidth=0}async setSplitWidthPercentage(t){const e=this.element.shadowRoot.querySelectorAll(".pane");requestAnimationFrame((()=>{e.forEach((t=>t.classList.add("transition")));this.splitter.classList.add("transition");requestAnimationFrame((()=>{const s=this.element.getBoundingClientRect().width;let i=s*t/100;if(i<0){i=0}if(i>s){i=s}this.leftWidth=i;this.rightWidth=s-i;setTimeout((()=>{e.forEach((t=>t.classList.remove("transition")));this.splitter.classList.remove("transition")}),300)}))}))}async getSplitWidthPercentage(){const t=this.element.getBoundingClientRect().width;return this.leftWidth/t}componentDidLoad(){requestAnimationFrame((()=>{this.resizeObserver=new ResizeObserver((()=>{const t=this.element.getBoundingClientRect().width;this.leftWidth=t*this.splitWidthPercentage/100;this.rightWidth=t-this.leftWidth;this.widthChanged.emit(this.splitWidthPercentage)}));this.resizeObserver.observe(this.element)}))}handleMouseDown(t){t.preventDefault();const e=t=>{requestAnimationFrame((()=>{let e=this.element.getBoundingClientRect().width;let{movementX:s}=o(t,this.previousTouch);let i=this.leftWidth+s;if(i<0){i=0}if(i>e){i=e}this.leftWidth=i;this.rightWidth=e-i;this.splitWidthPercentage=this.leftWidth/e*100}))};const s=()=>{document.removeEventListener("mousemove",e);document.removeEventListener("touchmove",e);const t=this.element.getBoundingClientRect().width;const s=this.leftWidth/t*100;this.widthChanged.emit(s)};document.addEventListener("mouseup",s);document.addEventListener("touchend",s);document.addEventListener("mousemove",e);document.addEventListener("touchmove",e)}handleKeyDown(t){let e=0;switch(t.key){case"ArrowLeft":e=-10;break;case"ArrowRight":e=10;break;default:return}if(t.shiftKey){e=e*10}const s=this.element.getBoundingClientRect().width;let i=this.leftWidth+e;if(i<0){i=0}if(i>s){i=s}this.leftWidth=i;this.rightWidth=s-this.leftWidth}render(){return s(i,{key:"beaf3010798c186c586ad124a672a2e3c2610bd7"},s("div",{key:"353c7d995b03434a7eb1095ec28c19706e008ce7",class:"left pane",style:{width:`${this.leftWidth}px`}},s("slot",{key:"e9c87dfcc0f8014ec9cd89ff91f21de679c414cf",name:"left"})),s("button",{key:"9df146da30e8adac9cadd75d14619fa574f0c97e",onMouseDown:t=>this.handleMouseDown(t),onTouchStart:t=>this.handleMouseDown(t),onKeyDown:t=>this.handleKeyDown(t),ref:t=>this.splitter=t,style:{minWidth:`${this.splitterWidth.toString()}px`,left:`${this.leftWidth-2}px`}},s("slot",{key:"f46238df8b64f8627a1058644fbecc2c4989bbc8"})),s("div",{key:"5b42b788656ffd7cad9a80d81dd74925a3deacc8",class:"right pane",style:{width:`${this.rightWidth}px`}},s("slot",{key:"d5e9154ff247e915db7774eab731f1050e348b77",name:"right"})))}get element(){return n(this)}};c.style=r;export{c as dnn_vertical_splitview};
2
- //# sourceMappingURL=p-90dd4620.entry.js.map
1
+ import{r as t,c as e,h as s,H as i,g as n}from"./p-978abd50.js";import{g as a}from"./p-dcf42da6.js";const o=":host{display:flex;align-items:stretch;margin:0 auto;position:relative;--left-pane-background-color:transparent;--right-pane-background-color:transparent}button{border:none;margin:0;padding:0;cursor:ew-resize;position:absolute;height:100%;background-color:transparent}button.transition{transition:all 300ms ease-in-out}.pane{overflow-y:auto}.pane.transition{transition:all 300ms ease-in-out}.pane.left{background-color:var(--left-pane-background-color)}.pane.right{background-color:var(--right-pane-background-color);flex-grow:1}";const r=o;const c=class{constructor(s){t(this,s);this.widthChanged=e(this,"widthChanged",7);this.splitterWidth=16;this.splitWidthPercentage=30;this.leftWidth=0;this.rightWidth=0}async setSplitWidthPercentage(t){const e=this.element.shadowRoot.querySelectorAll(".pane");requestAnimationFrame((()=>{e.forEach((t=>t.classList.add("transition")));this.splitter.classList.add("transition");requestAnimationFrame((()=>{const s=this.element.getBoundingClientRect().width;let i=s*t/100;if(i<0){i=0}if(i>s){i=s}this.leftWidth=i;this.rightWidth=s-i;setTimeout((()=>{e.forEach((t=>t.classList.remove("transition")));this.splitter.classList.remove("transition")}),300)}))}))}async getSplitWidthPercentage(){const t=this.element.getBoundingClientRect().width;return this.leftWidth/t}componentDidLoad(){requestAnimationFrame((()=>{this.resizeObserver=new ResizeObserver((()=>{const t=this.element.getBoundingClientRect().width;this.leftWidth=t*this.splitWidthPercentage/100;this.rightWidth=t-this.leftWidth;this.widthChanged.emit(this.splitWidthPercentage)}));this.resizeObserver.observe(this.element)}))}handleMouseDown(t){t.preventDefault();const e=t=>{requestAnimationFrame((()=>{let e=this.element.getBoundingClientRect().width;let{movementX:s}=a(t,this.previousTouch);let i=this.leftWidth+s;if(i<0){i=0}if(i>e){i=e}this.leftWidth=i;this.rightWidth=e-i;this.splitWidthPercentage=this.leftWidth/e*100}))};const s=()=>{document.removeEventListener("mousemove",e);document.removeEventListener("touchmove",e);const t=this.element.getBoundingClientRect().width;const s=this.leftWidth/t*100;this.widthChanged.emit(s)};document.addEventListener("mouseup",s);document.addEventListener("touchend",s);document.addEventListener("mousemove",e);document.addEventListener("touchmove",e)}handleKeyDown(t){let e=0;switch(t.key){case"ArrowLeft":e=-10;break;case"ArrowRight":e=10;break;default:return}if(t.shiftKey){e=e*10}const s=this.element.getBoundingClientRect().width;let i=this.leftWidth+e;if(i<0){i=0}if(i>s){i=s}this.leftWidth=i;this.rightWidth=s-this.leftWidth}render(){return s(i,{key:"e140fa989f74e328619a4d5a53d4b7cfb6ca5970"},s("div",{key:"22a05426ed02cb10f3a2ceeb7f7682f8677e4c31",class:"left pane",style:{width:`${this.leftWidth}px`}},s("slot",{key:"c997933e9bda3464c6f49e818ac3c39aae7ede99",name:"left"})),s("button",{key:"f2a04a9418f614df26d3a7fab7a71eda82b5a244",onMouseDown:t=>this.handleMouseDown(t),onTouchStart:t=>this.handleMouseDown(t),onKeyDown:t=>this.handleKeyDown(t),ref:t=>this.splitter=t,style:{minWidth:`${this.splitterWidth.toString()}px`,left:`${this.leftWidth-2}px`}},s("slot",{key:"2f81c5e1858a6824f5ce4d4162f05acfd1733798"})),s("div",{key:"568a5a6f4aac1a438332085c1288dd9ed84e6143",class:"right pane",style:{width:`${this.rightWidth}px`}},s("slot",{key:"d509c38b1c51ff0dcdef8f9c419ebc1a9ed63a81",name:"right"})))}get element(){return n(this)}};c.style=r;export{c as dnn_vertical_splitview};
2
+ //# sourceMappingURL=p-576364af.entry.js.map
@@ -1,2 +1,2 @@
1
- import{r as t,c as i,h as e,H as s}from"./p-978abd50.js";import{g as n}from"./p-5df01911.js";const h=":host{display:inline-block;--foreground:var(--dnn-color-foreground, #000);--background:var(--dnn-color-background, #fff);--focus-color:var(--dnn-color-primary, #3792ED);--danger-color:var(--dnn-color-danger, #900);--control-radius:var(--dnn-controls-radius, 3px);--input-text-align:left}dnn-fieldset{width:100%}.inner-container{display:flex;justify-content:space-between;position:relative;width:100%}input{border:none;outline:none;background-color:transparent;color:var(--foreground);text-align:var(--input-text-align);width:100%}.prefix,.suffix{font-size:0.8em}svg.error{fill:red;width:1em;height:1em;transform:scale(1.5);margin-right:0.5em}button.show-password{border:none;background-color:transparent;margin:0;padding:0}button.show-password svg{height:1em;width:auto;fill:var(--foreground);transform:scale(1.5)}";const a=h;const d=class{constructor(e){t(this,e);this.valueChange=i(this,"valueChange",7);this.valueInput=i(this,"valueInput",7);if(e.$hostElement$["s-ei"]){this.internals=e.$hostElement$["s-ei"]}else{this.internals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.internals}this.type="text";this.label=undefined;this.name=undefined;this.value=undefined;this.helpText=undefined;this.required=undefined;this.disabled=undefined;this.autocomplete="off";this.min=undefined;this.max=undefined;this.minlength=undefined;this.maxlength=undefined;this.multiple=undefined;this.pattern=undefined;this.readonly=undefined;this.step=undefined;this.disableValidityReporting=undefined;this.allowShowPassword=undefined;this.focused=false;this.valid=true}async checkValidity(){var t=this.inputField.checkValidity();if(!t){this.fieldset.setValidity(false,this.inputField.validationMessage)}return this.inputField.validity}async setCustomValidity(t){if(t==undefined||t==""){this.inputField.setCustomValidity("");this.valid=true;this.fieldset.setValidity(true);return}this.inputField.setCustomValidity(t);this.valid=false;this.fieldset.setValidity(false,t)}componentWillLoad(){this.labelId=n()}componentDidLoad(){var t=this.inputField.validity;var i=t.valid?"":this.inputField.validationMessage;this.internals.setValidity(this.inputField.validity,i)}formResetCallback(){this.inputField.setCustomValidity("");this.value="";this.internals.setValidity({});this.internals.setFormValue("")}handleInput(t){this.value=t;var i=this.inputField.checkValidity();this.valid=i;this.valueInput.emit(this.value)}handleInvalid(){this.fieldset.setValidity(false,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}handleChange(){this.valueChange.emit(this.value);if(this.name!=undefined){var t=new FormData;t.append(this.name,this.value.toString());this.internals.setFormValue(t)}}switchPasswordVisibility(){if(this.type==="password"){this.type="text";return}if(this.type==="text"){this.type="password";return}}shouldLabelFloat(){if(this.focused){return false}if(this.value!=undefined&&this.value!=""){return false}if(this.type=="date"||this.type=="datetime-local"||this.type=="time"){return false}return true}handleBlur(){this.focused=false;var t=this.inputField.checkValidity();this.valid=t;this.fieldset.setValidity(t,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}render(){var t;return e(s,{key:"5eb92abaa8138bf2b83e093d7bf4bdc358ec0419",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},e("dnn-fieldset",{key:"79ee21f5a6b49f6566a03af66d9cffab2f13f8c2",ref:t=>this.fieldset=t,invalid:!this.valid,focused:this.focused,label:`${(t=this.label)!==null&&t!==void 0?t:""}${this.required?" *":""}`,helpText:this.helpText,id:this.labelId,disabled:this.disabled,floatLabel:this.shouldLabelFloat(),onClick:()=>!this.focused&&this.inputField.focus(),onFocus:()=>this.focused=true,onBlur:()=>this.focused=false},e("div",{key:"ca4753fe9120baf30d913a2bae0f829fe9f7e0f4",class:"inner-container"},!this.shouldLabelFloat()&&e("slot",{key:"230525f8eb5b51e0a2aa5f2d042e6330e4aa996a",name:"prefix"}),e("input",{key:"1279ff2fadac8148fe20afb642a8a58805e8d1c7",ref:t=>this.inputField=t,name:this.name,type:this.type,disabled:this.disabled,required:this.required,autoComplete:this.autocomplete,min:this.min,max:this.max,minlength:this.minlength,maxlength:this.maxlength,multiple:this.multiple,pattern:this.pattern,readonly:this.readonly,step:this.step,value:this.value,onBlur:()=>this.handleBlur(),onFocus:()=>this.focused=true,onInput:t=>this.handleInput(t.target.value),onInvalid:()=>this.handleInvalid(),onChange:()=>this.handleChange(),"aria-labelledby":this.labelId}),!this.shouldLabelFloat()&&e("slot",{key:"88b5f27fe9492e939307847b081f8bdedad34b93",name:"suffix"}),!this.valid&&e("svg",{key:"7876b653695274d60b821ba68b64616e088aedb3",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960",class:"error"},e("path",{key:"8ef4ad579bdd56f1abde5c83541e0a895f9455d9",d:"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z"})),this.allowShowPassword&&e("button",{key:"b20e540212360839c17441550588175cbdc14412",class:"show-password",onClick:()=>this.switchPasswordVisibility()},this.type==="text"&&e("svg",{key:"09e29c1ed6d3db8ad0321e140f67f536d535d073",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},e("path",{key:"94f712fb1c42a5f480cf203d9abd55abd0d780c9",d:"M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z"})),this.type=="password"&&e("svg",{key:"b5cd9fce7ff0d483ee5a1995ca60644d3040e0fd",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},e("path",{key:"5e9e01fbd60e6c1e38c23bc2139b147abec2ebd1",d:"m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z"}))))))}static get formAssociated(){return true}};d.style=a;export{d as dnn_input};
2
- //# sourceMappingURL=p-07a78c58.entry.js.map
1
+ import{r as t,c as i,h as e,H as s}from"./p-978abd50.js";import{g as n}from"./p-5df01911.js";const h=":host{display:inline-block;--foreground:var(--dnn-color-foreground, #000);--background:var(--dnn-color-background, #fff);--focus-color:var(--dnn-color-primary, #3792ED);--danger-color:var(--dnn-color-danger, #900);--control-radius:var(--dnn-controls-radius, 3px);--input-text-align:left}dnn-fieldset{width:100%}.inner-container{display:flex;justify-content:space-between;position:relative;width:100%}input{border:none;outline:none;background-color:transparent;color:var(--foreground);text-align:var(--input-text-align);width:100%}.prefix,.suffix{font-size:0.8em}svg.error{fill:red;width:1em;height:1em;transform:scale(1.5);margin-right:0.5em}button.show-password{border:none;background-color:transparent;margin:0;padding:0}button.show-password svg{height:1em;width:auto;fill:var(--foreground);transform:scale(1.5)}";const a=h;const d=class{constructor(e){t(this,e);this.valueChange=i(this,"valueChange",7);this.valueInput=i(this,"valueInput",7);if(e.$hostElement$["s-ei"]){this.internals=e.$hostElement$["s-ei"]}else{this.internals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.internals}this.type="text";this.label=undefined;this.name=undefined;this.value=undefined;this.helpText=undefined;this.required=undefined;this.disabled=undefined;this.autocomplete="off";this.min=undefined;this.max=undefined;this.minlength=undefined;this.maxlength=undefined;this.multiple=undefined;this.pattern=undefined;this.readonly=undefined;this.step=undefined;this.disableValidityReporting=undefined;this.allowShowPassword=undefined;this.focused=false;this.valid=true}async checkValidity(){var t=this.inputField.checkValidity();if(!t){this.fieldset.setValidity(false,this.inputField.validationMessage)}return this.inputField.validity}async setCustomValidity(t){if(t==undefined||t==""){this.inputField.setCustomValidity("");this.valid=true;this.fieldset.setValidity(true);return}this.inputField.setCustomValidity(t);this.valid=false;this.fieldset.setValidity(false,t)}componentWillLoad(){this.labelId=n()}componentDidLoad(){var t=this.inputField.validity;var i=t.valid?"":this.inputField.validationMessage;this.internals.setValidity(this.inputField.validity,i)}formResetCallback(){this.inputField.setCustomValidity("");this.value="";this.internals.setValidity({});this.internals.setFormValue("")}handleInput(t){this.value=t;var i=this.inputField.checkValidity();this.valid=i;this.valueInput.emit(this.value)}handleInvalid(){this.fieldset.setValidity(false,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}handleChange(){this.valueChange.emit(this.value);if(this.name!=undefined){var t=new FormData;t.append(this.name,this.value.toString());this.internals.setFormValue(t)}}switchPasswordVisibility(){if(this.type==="password"){this.type="text";return}if(this.type==="text"){this.type="password";return}}shouldLabelFloat(){if(this.focused){return false}if(this.value!=undefined&&this.value!=""){return false}if(this.type=="date"||this.type=="datetime-local"||this.type=="time"){return false}return true}handleBlur(){this.focused=false;var t=this.inputField.checkValidity();this.valid=t;this.fieldset.setValidity(t,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}render(){var t;return e(s,{key:"75a60d744c7321a21e8be2eb5e1e96ed61e81c0e",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},e("dnn-fieldset",{key:"1dd7ccc6c05d28be7c850117f7f93e7356e44e0b",ref:t=>this.fieldset=t,invalid:!this.valid,focused:this.focused,label:`${(t=this.label)!==null&&t!==void 0?t:""}${this.required?" *":""}`,helpText:this.helpText,id:this.labelId,disabled:this.disabled,floatLabel:this.shouldLabelFloat(),onClick:()=>!this.focused&&this.inputField.focus(),onFocus:()=>this.focused=true,onBlur:()=>this.focused=false},e("div",{key:"0e320d003cfe21a25592d59ca0832c8d5de434c2",class:"inner-container"},!this.shouldLabelFloat()&&e("slot",{key:"9c7d840d04ad9e1e2e9044e535b231727cd7d56f",name:"prefix"}),e("input",{key:"ed6c75cea2c9bad544c79312e47131854fdab612",ref:t=>this.inputField=t,name:this.name,type:this.type,disabled:this.disabled,required:this.required,autoComplete:this.autocomplete,min:this.min,max:this.max,minlength:this.minlength,maxlength:this.maxlength,multiple:this.multiple,pattern:this.pattern,readonly:this.readonly,step:this.step,value:this.value,onBlur:()=>this.handleBlur(),onFocus:()=>this.focused=true,onInput:t=>this.handleInput(t.target.value),onInvalid:()=>this.handleInvalid(),onChange:()=>this.handleChange(),"aria-labelledby":this.labelId}),!this.shouldLabelFloat()&&e("slot",{key:"442d4adb37d95742d797c976175f4f1bc5f9fe86",name:"suffix"}),!this.valid&&e("svg",{key:"f95905a8e402cc4689afd686f52d2a151236a221",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960",class:"error"},e("path",{key:"ca7cb76e9df70463206a747bbd9ac1be20e2515b",d:"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z"})),this.allowShowPassword&&e("button",{key:"531517334b451784cd98de67ba24dad5c902afc6",class:"show-password",onClick:()=>this.switchPasswordVisibility()},this.type==="text"&&e("svg",{key:"8b0a02d79dc816d4969eab39a19c33b625f72b28",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},e("path",{key:"3b4965787039c15525ed55b7aff8640a3bf48792",d:"M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z"})),this.type=="password"&&e("svg",{key:"87f2176b428c9ca9260b1ea7e2ce5ed6beae219c",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},e("path",{key:"8acc664162e4b7039f3997949747e17c5def279c",d:"m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z"}))))))}static get formAssociated(){return true}};d.style=a;export{d as dnn_input};
2
+ //# sourceMappingURL=p-5a244627.entry.js.map
@@ -1,2 +1,2 @@
1
- import{r as e,c as i,h as t,H as s,g as o}from"./p-978abd50.js";import{g as a}from"./p-dcf42da6.js";var h;(function(e){e[e["nw"]=0]="nw";e[e["ne"]=1]="ne";e[e["se"]=2]="se";e[e["sw"]=3]="sw"})(h||(h={}));function r(e,i){let t=e.split(",");let s=t[0].match(/:(.*?);/)[1];let o=atob(t[1]);let a=o.length;let h=new Uint8Array(a);while(a>0){a--;h[a]=o.charCodeAt(a)}let r=new Blob([h],{type:s});return new File([r],i,{type:s})}const c=":host{display:block}canvas{display:none}.view{visibility:hidden;opacity:0;height:0;overflow:hidden;transition:all 300ms ease-in-out}.view.visible{visibility:visible;opacity:1;height:initial;overflow:visible}.view .cropper{position:relative;width:100%}.view .cropper img{width:100%;display:block;margin:0 auto}.view .cropper .backdrop{backdrop-filter:saturate(0.5);backdrop-filter:brightness(0.5);position:absolute;left:0;top:0;width:100%;height:100%}.view .cropper .crop{position:absolute;top:0;left:0;width:100%;height:100%;outline:2px dashed white;box-shadow:black 0 0 0px 2px;backdrop-filter:saturate(2);backdrop-filter:brightness(2);cursor:move}.view .cropper .crop>div{width:20px;height:20px;background-color:white;border:2px solid rgba(0, 0, 0, 0.5);position:absolute}.view .cropper .crop>div.nw,.view .cropper .crop>div.ne{top:-17px}.view .cropper .crop>div.ne,.view .cropper .crop>div.se{right:-17px}.view .cropper .crop>div.se,.view .cropper .crop>div.sw{bottom:-17px}.view .cropper .crop>div.sw,.view .cropper .crop>div.nw{left:-17px}.view .cropper .crop>div.nw,.view .cropper .crop>div.se{cursor:nwse-resize}.view .cropper .crop>div.ne,.view .cropper .crop>div.sw{cursor:nesw-resize}dnn-modal{--max-width:512px}";const d=c;const n=class{constructor(t){e(this,t);this.imageCropChanged=i(this,"imageCropChanged",7);this.imageFileCropChanged=i(this,"imageFileCropChanged",7);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.defaultResx={capture:"Capture",dragAndDropFile:"Drag and drop an image",or:"or",takePicture:"Take a picture",uploadFile:"Upload an image",imageTooSmall:"The image you are attempting to upload does not meet the minimum size requirement of {width} pixels by {height} pixels. Please upload a larger image.",modalCloseText:"Close"};this.initializeCropBox=()=>{const e=this.image.getBoundingClientRect();const i=this.width/this.height;let t,s;if(e.width/e.height>i){s=e.height;t=s*i}else{t=e.width;s=t/i}const o=(e.height-s)/2;const a=(e.width-t)/2;this.crop.style.top=`${Math.round(o)}px`;this.crop.style.left=`${Math.round(a)}px`;this.crop.style.width=`${Math.round(t)}px`;this.crop.style.height=`${Math.round(s)}px`};this.handleCropMouseDown=e=>{e.stopPropagation();e.preventDefault();const i=e.target;const t=i.classList[0];document.addEventListener("mouseup",this.handleImageCropFinished,false);document.addEventListener("touchend",this.handleImageCropFinished,false);switch(t){case"crop":document.addEventListener("mousemove",this.handleCropDrag,false);document.addEventListener("touchmove",this.handleCropDrag,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleCropDrag)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleCropDrag)));break;case"nw":document.addEventListener("mousemove",this.handleNwMouseMove,false);document.addEventListener("touchmove",this.handleNwMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleNwMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleNwMouseMove)));break;case"ne":document.addEventListener("mousemove",this.handleNeMouseMove,false);document.addEventListener("touchmove",this.handleNeMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleNeMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleNeMouseMove)));break;case"se":document.addEventListener("mousemove",this.handleSeMouseMove,false);document.addEventListener("touchmove",this.handleSeMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleSeMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleSeMouseMove)));break;case"sw":document.addEventListener("mousemove",this.handleSwMouseMove,false);document.addEventListener("touchmove",this.handleSwMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleSwMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleSwMouseMove)));break}};this.handleImageCropFinished=e=>{this.emitImage();document.removeEventListener("mouseup",this.handleImageCropFinished);this.previousTouch=undefined};this.handleNwMouseMove=e=>{this.handleCornerDrag(e,h.nw)};this.handleNeMouseMove=e=>{this.handleCornerDrag(e,h.ne)};this.handleSeMouseMove=e=>{this.handleCornerDrag(e,h.se)};this.handleSwMouseMove=e=>{this.handleCornerDrag(e,h.sw)};this.handleCornerDrag=(e,i)=>{const t=this.width/this.height;const s=this.crop.getBoundingClientRect();const o=this.image.getBoundingClientRect();let{movementX:r,movementY:c}=a(e,this.previousTouch);let d,n;switch(i){case h.nw:d=s.width-r;n=s.height-c;break;case h.ne:d=s.width+r;n=s.height-c;break;case h.se:d=s.width+r;n=s.height+c;break;case h.sw:d=s.width-r;n=s.height+c}let u,p;if(!isNaN(t)){switch(i){case h.nw:n=d/t;u=s.bottom-n;break;case h.se:d=n*t;break;case h.ne:n=d/t;u=s.bottom-n;break;case h.sw:d=n*t;p=s.right-d;break}}switch(i){case h.nw:u=this.crop.offsetTop+(s.height-n);p=this.crop.offsetLeft+(s.width-d);break;case h.ne:u=this.crop.offsetTop+(s.height-n);p=this.crop.offsetLeft;break;case h.se:u=this.crop.offsetTop;p=this.crop.offsetLeft;break;case h.sw:u=this.crop.offsetTop;p=this.crop.offsetLeft+(s.width-d);break}if(p<0){d+=p;p=0}if(u<0){n+=u;u=0}if(p+d>o.width){d=o.width-p}if(u+n>o.height){n=o.height-u}if(!isNaN(t)){switch(i){case h.se:case h.sw:d=n*t;if(p+d>o.width){d=o.width-p;n=d/t}break}}if(this.preventUndersized){const e=this.image.width/this.image.naturalWidth;if(d/e<this.width||n/e<this.height){return}}this.crop.style.top=`${u}px`;this.crop.style.left=`${p}px`;this.crop.style.width=`${d}px`;this.crop.style.height=`${n}px`};this.handleCropDrag=e=>{if(!this.isMouseStillInTarget(e)){return}let{movementX:i,movementY:t}=a(e,this.previousTouch);let s=this.crop.offsetLeft+i;let o=this.crop.offsetTop+t;var h=this.image.getBoundingClientRect();var r=this.crop.getBoundingClientRect();if(s<0){s=0}if(o<0){o=0}if(s+r.width>h.width){s=this.crop.offsetLeft}if(o+r.height>h.height){o=this.crop.offsetTop}this.crop.style.left=s+"px";this.crop.style.top=o+"px"};this.width=undefined;this.height=undefined;this.resx=undefined;this.quality=.8;this.preventUndersized=false;this.name=undefined;this.view=undefined;this.localResx=undefined;this.fileName=undefined;this.focused=false}async clear(){this.setView("noPictureView")}componentWillLoad(){this.mergeResx()}componentDidLoad(){requestAnimationFrame((()=>{this.setView("noPictureView")}))}resxChanged(){this.mergeResx()}formResetCallback(){this.clear();this.internals.setValidity({});this.internals.setFormValue("")}mergeResx(){this.localResx=Object.assign(Object.assign({},this.defaultResx),this.resx)}setView(e){const i=this.host.shadowRoot.querySelectorAll(".view");i.forEach((e=>e.classList.remove("visible")));switch(e){case"noPictureView":this.noPictureView.classList.add("visible");break;case"hasPictureView":this.hasPictureView.classList.add("visible");break}this.view=e}initCrop(){this.crop.style.top="0px";this.crop.style.left="0px";this.crop.style.width="100%";this.crop.style.height="100%";var e=this.width/this.height;var i=this.image.getBoundingClientRect();var t=i.width/i.height;if(e>t){var s=i.width/e;var o=i.height-s;this.crop.style.top=Math.round(o/2).toString()+"px";this.crop.style.height=Math.round(s).toString()+"px"}else{var a=i.height*e;var o=i.width-a;this.crop.style.left=Math.round(o/2).toString()+"px";this.crop.style.width=Math.round(a).toString()+"px"}}setImage(){this.image.addEventListener("load",(()=>{this.initCrop();this.emitImage()}));this.image.src=this.canvas.toDataURL()}handleNewFile(e){if(e.type.split("/")[0]!="image"){return}this.fileName=e.name;var i=new FileReader;i.onload=e=>{var i=new Image;i.onload=()=>{this.canvas.width=i.width;this.canvas.height=i.height;if(this.preventUndersized&&(i.width<this.width||i.height<this.height)){this.imageTooSmallModal.show();return}var e=this.canvas.getContext("2d");e.drawImage(i,0,0);requestAnimationFrame((()=>{this.setView("hasPictureView")}));requestAnimationFrame((()=>{this.setImage()}));requestAnimationFrame((()=>{this.initializeCropBox()}))};i.src=e.target.result.toString()};i.readAsDataURL(e)}emitImage(){var e,i;var t=this.crop.offsetLeft/this.image.width*this.image.naturalWidth;var s=this.crop.offsetTop/this.image.height*this.image.naturalHeight;var o=this.crop.getBoundingClientRect();var a=o.width/this.image.width*this.image.naturalWidth;var h=o.height/this.image.height*this.image.naturalHeight;if(t<0)t=0;if(t>this.image.naturalWidth)t=this.image.naturalWidth;if(s<0)s=0;if(s>this.image.naturalWidth)s=this.image.naturalWidth;if(a>this.image.naturalWidth)a=this.image.naturalWidth;if(h>this.image.naturalHeight)h=this.image.naturalHeight;var c=this.generateCroppedImage(t,s,a,h,(e=this.width)!==null&&e!==void 0?e:a,(i=this.height)!==null&&i!==void 0?i:h);this.imageCropChanged.emit(c);var d=r(c,this.fileName);this.imageFileCropChanged.emit(d);if(this.name!=undefined){var n=new FormData;n.append(this.name,d);this.internals.setFormValue(n)}}generateCroppedImage(e,i,t,s,o,a){this.canvas.width=o;this.canvas.height=a;const h=this.canvas.getContext("2d");h.clearRect(0,0,o,a);h.drawImage(this.image,e,i,t,s,0,0,o,a);return this.canvas.toDataURL("image/jpeg",this.quality)}isMouseStillInTarget(e){var i=false;let t;let s;const o=this.image.getBoundingClientRect();if(e instanceof MouseEvent){t=e.clientX;s=e.clientY}if(typeof TouchEvent!=="undefined"){if(e instanceof TouchEvent){var a=e.touches[0];t=a.clientX;s=a.clientY}}if(t>=o.x&&s>=o.y&&t<=o.left+o.width&&s<=o.top+o.height){i=true}var h=this.crop.querySelectorAll("div");h.forEach((e=>{var o=e.getBoundingClientRect();if(t>=o.x&&s>=o.y&&t<=o.left+o.width&&s<=o.top+o.height){i=true}}));return i}render(){var e,i;return t(s,{key:"0cf57fcffcf8f7b3fd7e04ea3f85ae439e571107",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},t("canvas",{key:"46c29b18dbc1bc5583ba45aec7ab4555e5272f74",ref:e=>this.canvas=e}),t("div",{key:"6219ab6bf13079342ed400a91e4d11a9d0e7796d",class:"view",ref:e=>this.hasPictureView=e},t("div",{key:"c92ab81fc2b5bef22e759bd5be585bc3de29ed9e",class:"cropper"},t("img",{key:"0633788e3d2718288e8edfb68d9a7890bcd4e011",ref:e=>this.image=e}),t("div",{key:"87e72dbbd2f7c9aa2164fa5231215ba445cba41a",class:"backdrop"}),t("div",{key:"a7de918251132e4a8c8d563a291103958987d3ae",class:"crop",ref:e=>this.crop=e,onMouseDown:this.handleCropMouseDown,onTouchStart:this.handleCropMouseDown},t("div",{key:"47dacbe094703b8d731ab37fa160afaed81b2a9e",class:"nw"}),t("div",{key:"e22617dace42771c6148bbcaa1f406ca66b55aa7",class:"ne"}),t("div",{key:"b99d0fc12419e4a1189e7b14d482764494407350",class:"se"}),t("div",{key:"d6a18896f2db1b25b9dccfcd46495a27d39b8392",class:"sw"})))),t("div",{key:"5cde8fce68a4ad42d4c1cae5e193e6ef090caa89",class:"view",ref:e=>this.noPictureView=e},t("dnn-dropzone",{key:"811fef8f71ec0017d5b9fb5911a38440afdd83bd",allowCameraMode:true,onFilesSelected:e=>this.handleNewFile(e.detail[0]),allowedExtensions:["jpg","jpeg","gif","png","svg","webp","bmp"],resx:{capture:this.localResx.capture,dragAndDropFile:this.localResx.dragAndDropFile,or:this.localResx.or,takePicture:this.localResx.takePicture,uploadFile:this.localResx.uploadFile,uploadSizeTooLarge:"The file you tried to upload is too large.",fileSizeLimit:"The maximum size is"},ref:e=>this.inputField=e,onFocus:()=>this.focused=true,onBlur:()=>this.focused=false})),t("dnn-modal",{key:"a0af03e617ea2a6ad0d642fda94cfd5350443bed",ref:e=>this.imageTooSmallModal=e,"close-text":this.localResx.modalCloseText},t("p",{key:"bb63e3854ecccdb448db5494067a50acc899b6a6"},this.localResx.imageTooSmall.replace("{width}",(e=this.width)===null||e===void 0?void 0:e.toString()).replace("{height}",(i=this.height)===null||i===void 0?void 0:i.toString()))))}static get formAssociated(){return true}get host(){return o(this)}static get watchers(){return{resx:["resxChanged"]}}};n.style=d;export{n as dnn_image_cropper};
2
- //# sourceMappingURL=p-70b71aeb.entry.js.map
1
+ import{r as e,c as i,h as t,H as s,g as o}from"./p-978abd50.js";import{g as h}from"./p-dcf42da6.js";var a;(function(e){e[e["nw"]=0]="nw";e[e["ne"]=1]="ne";e[e["se"]=2]="se";e[e["sw"]=3]="sw"})(a||(a={}));function r(e,i){let t=e.split(",");let s=t[0].match(/:(.*?);/)[1];let o=atob(t[1]);let h=o.length;let a=new Uint8Array(h);while(h>0){h--;a[h]=o.charCodeAt(h)}let r=new Blob([a],{type:s});return new File([r],i,{type:s})}const c=":host{display:block}canvas{display:none}.view{visibility:hidden;opacity:0;height:0;overflow:hidden;transition:all 300ms ease-in-out}.view.visible{visibility:visible;opacity:1;height:initial;overflow:visible}.view .cropper{position:relative;width:100%}.view .cropper img{width:100%;display:block;margin:0 auto}.view .cropper .backdrop{backdrop-filter:saturate(0.5);backdrop-filter:brightness(0.5);position:absolute;left:0;top:0;width:100%;height:100%}.view .cropper .crop{position:absolute;top:0;left:0;width:100%;height:100%;outline:2px dashed white;box-shadow:black 0 0 0px 2px;backdrop-filter:saturate(2);backdrop-filter:brightness(2);cursor:move}.view .cropper .crop>div{width:20px;height:20px;background-color:white;border:2px solid rgba(0, 0, 0, 0.5);position:absolute}.view .cropper .crop>div.nw,.view .cropper .crop>div.ne{top:-17px}.view .cropper .crop>div.ne,.view .cropper .crop>div.se{right:-17px}.view .cropper .crop>div.se,.view .cropper .crop>div.sw{bottom:-17px}.view .cropper .crop>div.sw,.view .cropper .crop>div.nw{left:-17px}.view .cropper .crop>div.nw,.view .cropper .crop>div.se{cursor:nwse-resize}.view .cropper .crop>div.ne,.view .cropper .crop>div.sw{cursor:nesw-resize}dnn-modal{--max-width:512px}";const d=c;const n=class{constructor(t){e(this,t);this.imageCropChanged=i(this,"imageCropChanged",7);this.imageFileCropChanged=i(this,"imageFileCropChanged",7);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.defaultResx={capture:"Capture",dragAndDropFile:"Drag and drop an image",or:"or",takePicture:"Take a picture",uploadFile:"Upload an image",imageTooSmall:"The image you are attempting to upload does not meet the minimum size requirement of {width} pixels by {height} pixels. Please upload a larger image.",modalCloseText:"Close"};this.initializeCropBox=()=>{const e=this.image.getBoundingClientRect();const i=this.width/this.height;let t,s;if(e.width/e.height>i){s=e.height;t=s*i}else{t=e.width;s=t/i}const o=(e.height-s)/2;const h=(e.width-t)/2;this.crop.style.top=`${Math.round(o)}px`;this.crop.style.left=`${Math.round(h)}px`;this.crop.style.width=`${Math.round(t)}px`;this.crop.style.height=`${Math.round(s)}px`};this.handleCropMouseDown=e=>{e.stopPropagation();e.preventDefault();const i=e.target;const t=i.classList[0];document.addEventListener("mouseup",this.handleImageCropFinished,false);document.addEventListener("touchend",this.handleImageCropFinished,false);switch(t){case"crop":document.addEventListener("mousemove",this.handleCropDrag,false);document.addEventListener("touchmove",this.handleCropDrag,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleCropDrag)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleCropDrag)));break;case"nw":document.addEventListener("mousemove",this.handleNwMouseMove,false);document.addEventListener("touchmove",this.handleNwMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleNwMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleNwMouseMove)));break;case"ne":document.addEventListener("mousemove",this.handleNeMouseMove,false);document.addEventListener("touchmove",this.handleNeMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleNeMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleNeMouseMove)));break;case"se":document.addEventListener("mousemove",this.handleSeMouseMove,false);document.addEventListener("touchmove",this.handleSeMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleSeMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleSeMouseMove)));break;case"sw":document.addEventListener("mousemove",this.handleSwMouseMove,false);document.addEventListener("touchmove",this.handleSwMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleSwMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleSwMouseMove)));break}};this.handleImageCropFinished=e=>{this.emitImage();document.removeEventListener("mouseup",this.handleImageCropFinished);this.previousTouch=undefined};this.handleNwMouseMove=e=>{this.handleCornerDrag(e,a.nw)};this.handleNeMouseMove=e=>{this.handleCornerDrag(e,a.ne)};this.handleSeMouseMove=e=>{this.handleCornerDrag(e,a.se)};this.handleSwMouseMove=e=>{this.handleCornerDrag(e,a.sw)};this.handleCornerDrag=(e,i)=>{const t=this.width/this.height;const s=this.crop.getBoundingClientRect();const o=this.image.getBoundingClientRect();let{movementX:r,movementY:c}=h(e,this.previousTouch);let d,n;switch(i){case a.nw:d=s.width-r;n=s.height-c;break;case a.ne:d=s.width+r;n=s.height-c;break;case a.se:d=s.width+r;n=s.height+c;break;case a.sw:d=s.width-r;n=s.height+c}let u,p;if(!isNaN(t)){switch(i){case a.nw:n=d/t;u=s.bottom-n;break;case a.se:d=n*t;break;case a.ne:n=d/t;u=s.bottom-n;break;case a.sw:d=n*t;p=s.right-d;break}}switch(i){case a.nw:u=this.crop.offsetTop+(s.height-n);p=this.crop.offsetLeft+(s.width-d);break;case a.ne:u=this.crop.offsetTop+(s.height-n);p=this.crop.offsetLeft;break;case a.se:u=this.crop.offsetTop;p=this.crop.offsetLeft;break;case a.sw:u=this.crop.offsetTop;p=this.crop.offsetLeft+(s.width-d);break}if(p<0){d+=p;p=0}if(u<0){n+=u;u=0}if(p+d>o.width){d=o.width-p}if(u+n>o.height){n=o.height-u}if(!isNaN(t)){switch(i){case a.se:case a.sw:d=n*t;if(p+d>o.width){d=o.width-p;n=d/t}break}}if(this.preventUndersized){const e=this.image.width/this.image.naturalWidth;if(d/e<this.width||n/e<this.height){return}}this.crop.style.top=`${u}px`;this.crop.style.left=`${p}px`;this.crop.style.width=`${d}px`;this.crop.style.height=`${n}px`};this.handleCropDrag=e=>{if(!this.isMouseStillInTarget(e)){return}let{movementX:i,movementY:t}=h(e,this.previousTouch);let s=this.crop.offsetLeft+i;let o=this.crop.offsetTop+t;var a=this.image.getBoundingClientRect();var r=this.crop.getBoundingClientRect();if(s<0){s=0}if(o<0){o=0}if(s+r.width>a.width){s=this.crop.offsetLeft}if(o+r.height>a.height){o=this.crop.offsetTop}this.crop.style.left=s+"px";this.crop.style.top=o+"px"};this.width=undefined;this.height=undefined;this.resx=undefined;this.quality=.8;this.preventUndersized=false;this.name=undefined;this.view=undefined;this.localResx=undefined;this.fileName=undefined;this.focused=false}async clear(){this.setView("noPictureView")}componentWillLoad(){this.mergeResx()}componentDidLoad(){requestAnimationFrame((()=>{this.setView("noPictureView")}))}resxChanged(){this.mergeResx()}formResetCallback(){this.clear();this.internals.setValidity({});this.internals.setFormValue("")}mergeResx(){this.localResx=Object.assign(Object.assign({},this.defaultResx),this.resx)}setView(e){const i=this.host.shadowRoot.querySelectorAll(".view");i.forEach((e=>e.classList.remove("visible")));switch(e){case"noPictureView":this.noPictureView.classList.add("visible");break;case"hasPictureView":this.hasPictureView.classList.add("visible");break}this.view=e}initCrop(){this.crop.style.top="0px";this.crop.style.left="0px";this.crop.style.width="100%";this.crop.style.height="100%";var e=this.width/this.height;var i=this.image.getBoundingClientRect();var t=i.width/i.height;if(e>t){var s=i.width/e;var o=i.height-s;this.crop.style.top=Math.round(o/2).toString()+"px";this.crop.style.height=Math.round(s).toString()+"px"}else{var h=i.height*e;var o=i.width-h;this.crop.style.left=Math.round(o/2).toString()+"px";this.crop.style.width=Math.round(h).toString()+"px"}}setImage(){this.image.addEventListener("load",(()=>{this.initCrop();this.emitImage()}));this.image.src=this.canvas.toDataURL()}handleNewFile(e){if(e.type.split("/")[0]!="image"){return}this.fileName=e.name;var i=new FileReader;i.onload=e=>{var i=new Image;i.onload=()=>{this.canvas.width=i.width;this.canvas.height=i.height;if(this.preventUndersized&&(i.width<this.width||i.height<this.height)){this.imageTooSmallModal.show();return}var e=this.canvas.getContext("2d");e.drawImage(i,0,0);requestAnimationFrame((()=>{this.setView("hasPictureView")}));requestAnimationFrame((()=>{this.setImage()}));requestAnimationFrame((()=>{this.initializeCropBox()}))};i.src=e.target.result.toString()};i.readAsDataURL(e)}emitImage(){var e,i;var t=this.crop.offsetLeft/this.image.width*this.image.naturalWidth;var s=this.crop.offsetTop/this.image.height*this.image.naturalHeight;var o=this.crop.getBoundingClientRect();var h=o.width/this.image.width*this.image.naturalWidth;var a=o.height/this.image.height*this.image.naturalHeight;if(t<0)t=0;if(t>this.image.naturalWidth)t=this.image.naturalWidth;if(s<0)s=0;if(s>this.image.naturalWidth)s=this.image.naturalWidth;if(h>this.image.naturalWidth)h=this.image.naturalWidth;if(a>this.image.naturalHeight)a=this.image.naturalHeight;var c=this.generateCroppedImage(t,s,h,a,(e=this.width)!==null&&e!==void 0?e:h,(i=this.height)!==null&&i!==void 0?i:a);this.imageCropChanged.emit(c);var d=r(c,this.fileName);this.imageFileCropChanged.emit(d);if(this.name!=undefined){var n=new FormData;n.append(this.name,d);this.internals.setFormValue(n)}}generateCroppedImage(e,i,t,s,o,h){this.canvas.width=o;this.canvas.height=h;const a=this.canvas.getContext("2d");a.clearRect(0,0,o,h);a.drawImage(this.image,e,i,t,s,0,0,o,h);return this.canvas.toDataURL("image/jpeg",this.quality)}isMouseStillInTarget(e){var i=false;let t;let s;const o=this.image.getBoundingClientRect();if(e instanceof MouseEvent){t=e.clientX;s=e.clientY}if(typeof TouchEvent!=="undefined"){if(e instanceof TouchEvent){var h=e.touches[0];t=h.clientX;s=h.clientY}}if(t>=o.x&&s>=o.y&&t<=o.left+o.width&&s<=o.top+o.height){i=true}var a=this.crop.querySelectorAll("div");a.forEach((e=>{var o=e.getBoundingClientRect();if(t>=o.x&&s>=o.y&&t<=o.left+o.width&&s<=o.top+o.height){i=true}}));return i}render(){var e,i;return t(s,{key:"381246ee476b95d7869bbdaef99e4032aabefb3a",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},t("canvas",{key:"86c84108ff8438cc20e840d6f6ea14597b547c7f",ref:e=>this.canvas=e}),t("div",{key:"709fcd6dbd4385a3b46b7621367a3448aa3aee30",class:"view",ref:e=>this.hasPictureView=e},t("div",{key:"d5ebd8b8ba823e62d6702254fcd4bd5d57439fe3",class:"cropper"},t("img",{key:"85c591654d1c794be00067d105b04e09d7219d7c",ref:e=>this.image=e}),t("div",{key:"e21d5065734dddac7093b51c409fcd452ed079c6",class:"backdrop"}),t("div",{key:"72ae44e6cbdcc1ac76751fb82a7be59eed5bb5d1",class:"crop",ref:e=>this.crop=e,onMouseDown:this.handleCropMouseDown,onTouchStart:this.handleCropMouseDown},t("div",{key:"1da722312999868d8c47af1608f918cbf4478713",class:"nw"}),t("div",{key:"4e5fb43ff7e69bf8b498391317df0fc5716d2999",class:"ne"}),t("div",{key:"4b2eba3a46f7514b3d9e446d6dc27d6102554fd4",class:"se"}),t("div",{key:"eb92e846bdbd2409ead0d4339f30c6d78b0e1225",class:"sw"})))),t("div",{key:"2cf6c91c1b5cb2517f84e5c39548be4213fc27c2",class:"view",ref:e=>this.noPictureView=e},t("dnn-dropzone",{key:"c9c2e904842f8462b87952836fa864a9e09079f2",allowCameraMode:true,onFilesSelected:e=>this.handleNewFile(e.detail[0]),allowedExtensions:["jpg","jpeg","gif","png","svg","webp","bmp"],resx:{capture:this.localResx.capture,dragAndDropFile:this.localResx.dragAndDropFile,or:this.localResx.or,takePicture:this.localResx.takePicture,uploadFile:this.localResx.uploadFile,uploadSizeTooLarge:"The file you tried to upload is too large.",fileSizeLimit:"The maximum size is"},ref:e=>this.inputField=e,onFocus:()=>this.focused=true,onBlur:()=>this.focused=false})),t("dnn-modal",{key:"d70385ac62db570303947cd133a6dace89851fe3",ref:e=>this.imageTooSmallModal=e,"close-text":this.localResx.modalCloseText},t("p",{key:"c96b96c98b7a7918b0f954323cb30146ead874a3"},this.localResx.imageTooSmall.replace("{width}",(e=this.width)===null||e===void 0?void 0:e.toString()).replace("{height}",(i=this.height)===null||i===void 0?void 0:i.toString()))))}static get formAssociated(){return true}get host(){return o(this)}static get watchers(){return{resx:["resxChanged"]}}};n.style=d;export{n as dnn_image_cropper};
2
+ //# sourceMappingURL=p-5b8e0904.entry.js.map