npm - @dnncommunity/dnn-elements - Versions diffs - 0.13.1 → 0.14.0-beta.1 - Mend

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

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 (124) hide show

package/README.md +2 -2
package/dist/cjs/dnn-button.cjs.entry.js +1 -1
package/dist/cjs/{dnn-button_14.cjs.entry.js → dnn-button_16.cjs.entry.js} +274 -38
package/dist/cjs/dnn-button_16.cjs.entry.js.map +1 -0
package/dist/cjs/dnn-checkbox.cjs.entry.js +1 -1
package/dist/cjs/dnn-chevron.cjs.entry.js +1 -1
package/dist/cjs/dnn-collapsible.cjs.entry.js +1 -1
package/dist/cjs/dnn-color-picker.cjs.entry.js +1 -1
package/dist/cjs/dnn-dropzone.cjs.entry.js +1 -1
package/dist/cjs/dnn-image-cropper.cjs.entry.js +7 -23
package/dist/cjs/dnn-image-cropper.cjs.entry.js.map +1 -1
package/dist/cjs/dnn-modal.cjs.entry.js +1 -1
package/dist/cjs/dnn-searchbox.cjs.entry.js +1 -1
package/dist/cjs/dnn-sort-icon.cjs.entry.js +1 -1
package/dist/cjs/dnn-tab.cjs.entry.js +1 -1
package/dist/cjs/dnn-tabs.cjs.entry.js +5 -3
package/dist/cjs/dnn-tabs.cjs.entry.js.map +1 -1
package/dist/cjs/dnn-toggle.cjs.entry.js +1 -1
package/dist/cjs/dnn-treeview-item.cjs.entry.js +15 -13
package/dist/cjs/dnn-treeview-item.cjs.entry.js.map +1 -1
package/dist/cjs/dnn-vertical-overflow-menu.cjs.entry.js +123 -0
package/dist/cjs/dnn-vertical-overflow-menu.cjs.entry.js.map +1 -0
package/dist/cjs/dnn-vertical-splitview.cjs.entry.js +123 -0
package/dist/cjs/dnn-vertical-splitview.cjs.entry.js.map +1 -0
package/dist/cjs/dnn.cjs.js +2 -2
package/dist/cjs/{index-e85ec026.js → index-6a6ac523.js} +4 -1
package/dist/cjs/index-6a6ac523.js.map +1 -0
package/dist/cjs/{index-eede7745.js → index-ba8b86b1.js} +2 -2
package/dist/cjs/index-ba8b86b1.js.map +1 -0
package/dist/cjs/loader.cjs.js +2 -2
package/dist/cjs/mouseUtilities-75be531a.js +25 -0
package/dist/cjs/mouseUtilities-75be531a.js.map +1 -0
package/dist/collection/collection-manifest.json +3 -1
package/dist/collection/components/dnn-image-cropper/dnn-image-cropper.js +6 -22
package/dist/collection/components/dnn-image-cropper/dnn-image-cropper.js.map +1 -1
package/dist/collection/components/dnn-tabs/dnn-tabs.js +4 -2
package/dist/collection/components/dnn-tabs/dnn-tabs.js.map +1 -1
package/dist/collection/components/dnn-treeview-item/dnn-treeview-item.js +14 -12
package/dist/collection/components/dnn-treeview-item/dnn-treeview-item.js.map +1 -1
package/dist/collection/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.css +77 -0
package/dist/collection/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.js +132 -0
package/dist/collection/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.js.map +1 -0
package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.css +21 -0
package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.js +219 -0
package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.js.map +1 -0
package/dist/collection/utilities/mouseUtilities.js +20 -0
package/dist/collection/utilities/mouseUtilities.js.map +1 -0
package/dist/dnn/dnn-button.entry.js +1 -1
package/dist/dnn/dnn-checkbox.entry.js +1 -1
package/dist/dnn/dnn-chevron.entry.js +1 -1
package/dist/dnn/dnn-collapsible.entry.js +1 -1
package/dist/dnn/dnn-color-picker.entry.js +1 -1
package/dist/dnn/dnn-dropzone.entry.js +1 -1
package/dist/dnn/dnn-image-cropper.entry.js +7 -23
package/dist/dnn/dnn-image-cropper.entry.js.map +1 -1
package/dist/dnn/dnn-modal.entry.js +1 -1
package/dist/dnn/dnn-searchbox.entry.js +1 -1
package/dist/dnn/dnn-sort-icon.entry.js +1 -1
package/dist/dnn/dnn-tab.entry.js +1 -1
package/dist/dnn/dnn-tabs.entry.js +5 -3
package/dist/dnn/dnn-tabs.entry.js.map +1 -1
package/dist/dnn/dnn-toggle.entry.js +1 -1
package/dist/dnn/dnn-treeview-item.entry.js +15 -13
package/dist/dnn/dnn-treeview-item.entry.js.map +1 -1
package/dist/dnn/dnn-vertical-overflow-menu.entry.js +119 -0
package/dist/dnn/dnn-vertical-overflow-menu.entry.js.map +1 -0
package/dist/dnn/dnn-vertical-splitview.entry.js +119 -0
package/dist/dnn/dnn-vertical-splitview.entry.js.map +1 -0
package/dist/dnn/dnn.esm.js +2 -2
package/dist/dnn/{index-6c0764e5.js → index-3e56049b.js} +2 -2
package/dist/dnn/index-3e56049b.js.map +1 -0
package/dist/dnn/mouseUtilities-817973b4.js +23 -0
package/dist/dnn/mouseUtilities-817973b4.js.map +1 -0
package/dist/dnn/p-d10994a3.js +2 -0
package/dist/dnn/p-d10994a3.js.map +1 -0
package/dist/dnn/{p-7acf3104.entry.js → p-fef1bc51.entry.js} +4 -4
package/dist/dnn/p-fef1bc51.entry.js.map +1 -0
package/dist/esm/dnn-button.entry.js +1 -1
package/dist/esm/{dnn-button_14.entry.js → dnn-button_16.entry.js} +273 -39
package/dist/esm/dnn-button_16.entry.js.map +1 -0
package/dist/esm/dnn-checkbox.entry.js +1 -1
package/dist/esm/dnn-chevron.entry.js +1 -1
package/dist/esm/dnn-collapsible.entry.js +1 -1
package/dist/esm/dnn-color-picker.entry.js +1 -1
package/dist/esm/dnn-dropzone.entry.js +1 -1
package/dist/esm/dnn-image-cropper.entry.js +7 -23
package/dist/esm/dnn-image-cropper.entry.js.map +1 -1
package/dist/esm/dnn-modal.entry.js +1 -1
package/dist/esm/dnn-searchbox.entry.js +1 -1
package/dist/esm/dnn-sort-icon.entry.js +1 -1
package/dist/esm/dnn-tab.entry.js +1 -1
package/dist/esm/dnn-tabs.entry.js +5 -3
package/dist/esm/dnn-tabs.entry.js.map +1 -1
package/dist/esm/dnn-toggle.entry.js +1 -1
package/dist/esm/dnn-treeview-item.entry.js +15 -13
package/dist/esm/dnn-treeview-item.entry.js.map +1 -1
package/dist/esm/dnn-vertical-overflow-menu.entry.js +119 -0
package/dist/esm/dnn-vertical-overflow-menu.entry.js.map +1 -0
package/dist/esm/dnn-vertical-splitview.entry.js +119 -0
package/dist/esm/dnn-vertical-splitview.entry.js.map +1 -0
package/dist/esm/dnn.js +2 -2
package/dist/esm/{index-f79d9e82.js → index-212d30ec.js} +4 -1
package/dist/esm/index-212d30ec.js.map +1 -0
package/dist/esm/{index-6c0764e5.js → index-3e56049b.js} +2 -2
package/dist/esm/index-3e56049b.js.map +1 -0
package/dist/esm/loader.js +2 -2
package/dist/esm/mouseUtilities-817973b4.js +23 -0
package/dist/esm/mouseUtilities-817973b4.js.map +1 -0
package/dist/types/components/dnn-image-cropper/dnn-image-cropper.d.ts +0 -1
package/dist/types/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.d.ts +17 -0
package/dist/types/components/dnn-vertical-splitview/dnn-vertical-splitview.d.ts +21 -0
package/dist/types/components.d.ts +54 -0
package/dist/types/utilities/mouseUtilities.d.ts +4 -0
package/package.json +1 -1
package/dist/cjs/dnn-button_14.cjs.entry.js.map +0 -1
package/dist/cjs/index-e85ec026.js.map +0 -1
package/dist/cjs/index-eede7745.js.map +0 -1
package/dist/dnn/index-6c0764e5.js.map +0 -1
package/dist/dnn/p-7acf3104.entry.js.map +0 -1
package/dist/dnn/p-bd3d3361.js +0 -2
package/dist/dnn/p-bd3d3361.js.map +0 -1
package/dist/esm/dnn-button_14.entry.js.map +0 -1
package/dist/esm/index-6c0764e5.js.map +0 -1
package/dist/esm/index-f79d9e82.js.map +0 -1

package/dist/esm/dnn-image-cropper.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dnn-image-cropper.entry.js","mappings":"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","names":[],"sources":["./src/components/dnn-image-cropper/CornerType.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"],"sourcesContent":["export enum CornerType {\r\n \"nw\",\r\n \"ne\",\r\n \"se\",\r\n \"sw\",\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\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 this.setView(\"noPictureView\");\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 } = this.getMouvementFromEvent(event);\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} = this.getMouvementFromEvent(ev);\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 getMouvementFromEvent(event: MouseEvent \| TouchEvent) {\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 (this.previousTouch != undefined) {\r\n movementX = touch.pageX - this.previousTouch.pageX;\r\n movementY = touch.pageY - this.previousTouch.pageY;\r\n }\r\n this.previousTouch = touch;\r\n }\r\n }\r\n return { movementX, movementY };\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}"],"version":3}
1	+ {"file":"dnn-image-cropper.entry.js","mappings":"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","names":[],"sources":["./src/components/dnn-image-cropper/CornerType.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"],"sourcesContent":["export enum CornerType {\r\n \"nw\",\r\n \"ne\",\r\n \"se\",\r\n \"sw\",\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}"],"version":3}

package/dist/esm/dnn-modal.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-6c0764e5.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-3e56049b.js';
 const dnnModalCss = ":host{display:block}:host .overlay{background-color:rgba(0, 0, 0, 0.5);position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(2px);transition:all 300ms ease-in-out;visibility:hidden;opacity:0}:host .overlay .modal{max-width:var(--max-width, 1200px);background-color:white;padding:30px;transform:scale(2);transition:all 300ms ease-in-out;z-index:2;position:relative;margin:10%;max-height:80%;border-radius:var(--dnn-controls-radius, 5px);box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);display:block}:host .overlay .modal .close{position:absolute;background-color:white;border:2px solid white;border-radius:50%;padding:0;margin:0;top:-12px;right:-12px;outline:none;display:flex;justify-content:center;align-items:center}:host .overlay .modal .close:focus,:host .overlay .modal .close:hover{box-shadow:0 0 2px 2px var(--dnn-color-primary, blue)}:host .overlay .modal .close svg{width:24px;height:24px;color:grey}:host .overlay.visible{visibility:visible;opacity:1}:host .overlay.visible .modal{transform:scale(1);box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);display:block}";

package/dist/esm/dnn-searchbox.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, e as createEvent, h, f as Host } from './index-6c0764e5.js';
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-3e56049b.js';
 import { D as Debounce } from './debounce-06f55268.js';
 const dnnSearchboxCss = ":host{position:relative;display:flex;justify-content:space-between;--background-color:transparent;--color:#333;--border-size:1px;--border-color:grey;--border-active-color:black;--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);--focus-color:var(--dnn-color-primary, blue)}:host input{width:100%;border:var(--border-size) solid var(--border-color);outline:none;border-radius:var(--border-radius);padding:var(--padding);padding-right:32px;transition:all 300ms ease-in-out}:host input:focus,:host input:hover{outline:none;box-shadow:0 0 2px 2px var(--focus-color)}:host svg{position:absolute;top:0;right:0;height:100%;transform:scale(0.7);fill:var(--color);outline:var(--color);color:var(--color);transition:all 300ms ease-in-out}:host button{background:transparent;border:0;margin:0;padding:0}:host button:focus svg,:host button:hover svg{fill:var(--focus-color);outline:var(--focus-color);color:var(--focus-color)}";

package/dist/esm/dnn-sort-icon.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, e as createEvent, h, f as Host } from './index-6c0764e5.js';
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-3e56049b.js';
 const dnnSortIconCss = ":host{display:inline-block}button{outline:none;border:none;margin:0;padding:0;background-color:transparent;outline:none;display:inline-block;line-height:1em;position:relative;top:0.25em}button svg{height:1.5em;width:auto;fill:var(--color, #888)}button.active svg{fill:var(--color-sorted, var(--dnn-color-primary, #028bff))}button:hover svg,button:focus svg{fill:var(--color-hover, var(--dnn-color-primary-light, #36a1ff))}";

package/dist/esm/dnn-tab.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, f as Host } from './index-6c0764e5.js';
+import { r as registerInstance, h, f as Host } from './index-3e56049b.js';
 const dnnTabCss = "";

package/dist/esm/dnn-tabs.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, f as Host } from './index-6c0764e5.js';
+import { r as registerInstance, h, f as Host } from './index-3e56049b.js';
 const dnnTabsCss = ":host{display:block;--color-background:var(--dnn-color-secondary-dark, lightgray);--color-text:var(--dnn-color-secondary-contrast, #333);--color-visible:var(--dnn-color-primary, #3792ED);--color-visible-text:var(--dnn-color-primary-contrast, #FFF);--color-focus:var(--dnn-color-primary, #3792ed)}.tabTitles{display:flex;background-color:var(--color-background);color:var(--color-text)}.tabTitles button{padding:0.5rem 1rem;border:0;margin:0;background-color:transparent}.tabTitles button.visible{background-color:var(--color-visible);color:var(--color-bisible-text)}.tabTitles button:focus,.tabTitles button:hover{outline:none;box-shadow:0 0 2px 2px var(--color-focus)}.currentTab{border:1px solid var(--color-background);padding:1rem}";
@@ -9,8 +9,10 @@ let DnnTabs = class {
     this.selectedTabTitle = "";
   }
   componentDidLoad() {
-    this.updateTitles();
-    this.showFirstTab();
+    requestAnimationFrame(() => {
+      this.updateTitles();
+      this.showFirstTab();
+    });
   }
   getTabs() {
     return this.component.shadowRoot.querySelector("slot").assignedElements();

package/dist/esm/dnn-tabs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dnn-tabs.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,iuBAAiuB;;ICOvuB,OAAO;EALpB;;IAQa,cAAS,GAAa,EAAE,CAAC;IACzB,qBAAgB,GAAW,EAAE,CAAC;~~GAsD1C~~;~~EApDG~~,gBAAgB;IACZ,IAAI,CAAC,YAAY,EAAE,CAAC;~~IACpB~~,IAAI,CAAC,YAAY,EAAE,CAAC;~~GACvB~~;EAEO,OAAO;IACX,OAAO,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAyB,CAAC;GACpG;EAEO,YAAY;IAChB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;GAC3E;EAEO,YAAY;IAChB,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC9B,GAAG,CAAC,IAAI,EAAE,CAAC;IACX,IAAI,CAAC,gBAAgB,GAAG,GAAG,CAAC,QAAQ,CAAC;GACxC;EAEO,OAAO,CAAC,QAAgB;IAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG;MACZ,IAAI,GAAG,CAAC,QAAQ,IAAI,QAAQ,EAAC;QACzB,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,OAAO;OACV;MAED,GAAG,CAAC,IAAI,EAAE,CAAC;KACd,CAAC,CAAC;IACH,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;GACpC;EAED,MAAM;IACF,QACI,EAAC,IAAI,IAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,EAAE,IAChC,WAAK,KAAK,EAAC,WAAW,IACjB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,IACxB,cACI,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAAI,QAAQ,GAAG,SAAS,GAAE,EAAE,EACxD,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAEpC,QAAQ,CACJ,CACZ,CACC,EACN,WAAK,KAAK,EAAC,YAAY,IACnB,eAAa,CACX,CACH,EACT;GACL;;;;;;","names":[],"sources":["./src/components/dnn-tabs/dnn-tabs.scss?tag=dnn-tabs&encapsulation=shadow","./src/components/dnn-tabs/dnn-tabs.tsx"],"sourcesContent":[":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 this.updateTitles();\r\n this.showFirstTab();\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}"],"version":3}
1	+ {"file":"dnn-tabs.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,iuBAAiuB;;ICOvuB,OAAO;EALpB;;IAQa,cAAS,GAAa,EAAE,CAAC;IACzB,qBAAgB,GAAW,EAAE,CAAC;GAwD1C;EAtDG,gBAAgB;IACZ,qBAAqB,CAAC;MAClB,IAAI,CAAC,YAAY,EAAE,CAAC;MACpB,IAAI,CAAC,YAAY,EAAE,CAAC;KACvB,CAAC,CAAC;GACN;EAEO,OAAO;IACX,OAAO,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAyB,CAAC;GACpG;EAEO,YAAY;IAChB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;GAC3E;EAEO,YAAY;IAChB,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC9B,GAAG,CAAC,IAAI,EAAE,CAAC;IACX,IAAI,CAAC,gBAAgB,GAAG,GAAG,CAAC,QAAQ,CAAC;GACxC;EAEO,OAAO,CAAC,QAAgB;IAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG;MACZ,IAAI,GAAG,CAAC,QAAQ,IAAI,QAAQ,EAAC;QACzB,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,OAAO;OACV;MAED,GAAG,CAAC,IAAI,EAAE,CAAC;KACd,CAAC,CAAC;IACH,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;GACpC;EAED,MAAM;IACF,QACI,EAAC,IAAI,IAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,EAAE,IAChC,WAAK,KAAK,EAAC,WAAW,IACjB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,IACxB,cACI,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAAI,QAAQ,GAAG,SAAS,GAAE,EAAE,EACxD,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAEpC,QAAQ,CACJ,CACZ,CACC,EACN,WAAK,KAAK,EAAC,YAAY,IACnB,eAAa,CACX,CACH,EACT;GACL;;;;;;","names":[],"sources":["./src/components/dnn-tabs/dnn-tabs.scss?tag=dnn-tabs&encapsulation=shadow","./src/components/dnn-tabs/dnn-tabs.tsx"],"sourcesContent":[":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}"],"version":3}

package/dist/esm/dnn-toggle.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-6c0764e5.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-3e56049b.js';
 const dnnToggleCss = ":host{display:inline-block;outline:none;cursor:pointer}button{height:1.5em;width:2.5em;outline:none;background-color:var(--background, #888);border:0;border-radius:var(--border-radius, var(--dnn-controls-radius, 0.75em));padding:0.1em;position:relative;margin:0;transition:background-color 300ms ease-in-out;position:relative;cursor:pointer}button:hover,button:focus{box-shadow:0 0 2px 2px var(--dnn-color-primary)}button.checked{background-color:var(--background-checked, var(--dnn-color-primary, blue))}button.checked .handle{left:calc(1em + 4px)}button:disabled{opacity:0.5;cursor:not-allowed;box-shadow:none}button .handle{transition:all 300ms ease-in-out;background-color:white;width:1em;height:1em;border-radius:var(--dnn-controls-radius, 50%);position:absolute;top:calc(50% - 0.5em);left:2px}";

package/dist/esm/dnn-treeview-item.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, f as Host, g as getElement } from './index-6c0764e5.js';
+import { r as registerInstance, h, f as Host, g as getElement } from './index-3e56049b.js';
 const dnnTreeviewItemCss = ":host{display:flex;overflow:hidden}.expander{width:24px;height:24px}.expander button{transition:all 150ms ease-in-out;background-color:transparent;border:none;padding:0;margin:0;outline:none;height:1em;display:flex;justify-content:center;align-items:center;cursor:pointer;position:relative;top:2px}.expander button svg :first-child{transition:all 150ms ease-in-out;fill:white;stroke:black}.expander.expanded button{transform:rotate(45deg)}.expander.expanded button svg :first-child{fill:black;stroke:black}div.item .item-slot{display:flex;align-items:center;gap:0.25em}div.item div.children{overflow:hidden;height:0;transition:all 150ms ease-in-out}";
@@ -10,18 +10,20 @@ let DnnTreeviewItem = class {
     this.hasChildren = false;
   }
   componentDidLoad() {
-    const children = this.childrenElement.children[0];
-    const count = children.assignedElements().length;
-    if (count > 0) {
-      this.hasChildren = true;
-    }
-    if (this.expanded) {
-      this.expander.classList.add("expanded");
-      this.collapsible.expanded = false;
-      setTimeout(() => {
-        this.collapsible.expanded = true;
-      }, 300);
-    }
+    requestAnimationFrame(() => {
+      const children = this.childrenElement.children[0];
+      const count = children.assignedElements().length;
+      if (count > 0) {
+        this.hasChildren = true;
+      }
+      if (this.expanded) {
+        this.expander.classList.add("expanded");
+        this.collapsible.expanded = false;
+        setTimeout(() => {
+          this.collapsible.expanded = true;
+        }, 300);
+      }
+    });
   }
   toggleCollapse() {
     this.expanded = !this.expanded;

package/dist/esm/dnn-treeview-item.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dnn-treeview-item.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,2oBAA2oB;;ICOzpB,eAAe;EAL5B;;;IAYyB,aAAQ,GAAY,KAAK,CAAC;IAExC,gBAAW,GAAY,KAAK,CAAC;~~GAsDvC~~;~~EAjDC~~,gBAAgB;IACd,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAoB,CAAC;~~IACrE~~,MAAM,KAAK,GAAG,QAAQ,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAA;~~IAChD~~,IAAI,KAAK,GAAG,CAAC,EAAC;~~MACZ~~,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;~~KACzB~~;~~IACD~~,IAAI,IAAI,CAAC,QAAQ,EAAC;~~MAChB~~,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;~~MACxC~~,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,KAAK,CAAC;~~MAClC~~,UAAU,CAAC;~~QACT~~,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC;~~OAClC~~,EAAE,GAAG,CAAC,CAAC;~~KACT~~;~~GACF~~;EAEO,cAAc;IACpB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,IAAI,CAAC,QAAQ,EAAC;MAChB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;MACxC,OAAO;KACR;IAED,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;GAC5C;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,IAChD,IAAI,CAAC,WAAW;MACf,cACE,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IACpC,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,oBAAoB,GAAE,EAAA,YAAM,CAAC,EAAC,kBAAkB,EAAC,IAAI,EAAC,MAAM,GAAE,CAAM,CAC3K,CAEP,EACN,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,WAAW,IACpB,eAAa,CACT,EACN,uBAAiB,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxE,WAAK,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,eAAe,GAAG,EAAE,IACvC,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACU,CACZ,CACH,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/dnn-treeview-item/dnn-treeview-item.scss?tag=dnn-treeview-item&encapsulation=shadow","./src/components/dnn-treeview-item/dnn-treeview-item.tsx"],"sourcesContent":[":host {\r\n display: flex;\r\n overflow: hidden;\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 outline: none;\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 } 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 @State() hasChildren: boolean = false;\r\n \r\n private childrenElement!: HTMLDivElement;\r\n private collapsible!: HTMLDnnCollapsibleElement;\r\n\r\n componentDidLoad() {\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 private toggleCollapse(): void {\r\n this.expanded = !this.expanded;\r\n if (this.expanded){\r\n this.expander.classList.add(\"expanded\");\r\n return;\r\n }\r\n\r\n this.expander.classList.remove(\"expanded\");\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 <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}"],"version":3}
1	+ {"file":"dnn-treeview-item.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,2oBAA2oB;;ICOzpB,eAAe;EAL5B;;;IAYyB,aAAQ,GAAY,KAAK,CAAC;IAExC,gBAAW,GAAY,KAAK,CAAC;GAwDvC;EAnDC,gBAAgB;IACd,qBAAqB,CAAC;MACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAoB,CAAC;MACrE,MAAM,KAAK,GAAG,QAAQ,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAA;MAChD,IAAI,KAAK,GAAG,CAAC,EAAC;QACZ,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;OACzB;MACD,IAAI,IAAI,CAAC,QAAQ,EAAC;QAChB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACxC,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,KAAK,CAAC;QAClC,UAAU,CAAC;UACT,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC;SAClC,EAAE,GAAG,CAAC,CAAC;OACT;KACF,CAAC,CAAC;GACJ;EAEO,cAAc;IACpB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,IAAI,CAAC,QAAQ,EAAC;MAChB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;MACxC,OAAO;KACR;IAED,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;GAC5C;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,IAChD,IAAI,CAAC,WAAW;MACf,cACE,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IACpC,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,oBAAoB,GAAE,EAAA,YAAM,CAAC,EAAC,kBAAkB,EAAC,IAAI,EAAC,MAAM,GAAE,CAAM,CAC3K,CAEP,EACN,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,WAAW,IACpB,eAAa,CACT,EACN,uBAAiB,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxE,WAAK,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,eAAe,GAAG,EAAE,IACvC,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACU,CACZ,CACH,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/dnn-treeview-item/dnn-treeview-item.scss?tag=dnn-treeview-item&encapsulation=shadow","./src/components/dnn-treeview-item/dnn-treeview-item.tsx"],"sourcesContent":[":host {\r\n display: flex;\r\n overflow: hidden;\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 outline: none;\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 } 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 @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 return;\r\n }\r\n\r\n this.expander.classList.remove(\"expanded\");\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 <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}"],"version":3}

package/dist/esm/dnn-vertical-overflow-menu.entry.js ADDED Viewed

@@ -0,0 +1,119 @@
+import { r as registerInstance, h, f as Host, g as getElement } from './index-3e56049b.js';
+const dnnVerticalOverflowMenuCss = ":host{display:block;--background-color:var(--dnn-color-primary-contrast, white);--foreground-color:var(--dnn-color-primary, blue);--text-color:#222}.menu-container{display:flex;justify-content:flex-start;align-items:center;background-color:var(--background-color);color:var(--text-color)}.menu-container button{cursor:pointer}.menu-container button svg{fill:var(--foreground-color)}.menu-container .menu{margin:0.5em;display:flex;gap:1em;justify-content:flex-start;align-items:center;white-space:nowrap;width:100%}.menu-container .menu a{display:flex;align-items:center;color:var(--text-color);text-decoration:none}.menu-container .menu a svg{fill:var(--foreground-color)}.menu-container .overflow{margin-left:auto;position:relative}.menu-container .overflow button{padding:0;margin:0;background-color:transparent;border:none}.menu-container .overflow .dropdown{position:absolute;display:flex;flex-direction:column;white-space:nowrap;right:0;transition:100ms ease-in-out;height:0;overflow:hidden}.menu-container .overflow .dropdown a{color:var(--text-color)}.menu-container .overflow .dropdown a svg{fill:var(--foreground-color)}.menu-container .overflow .dropdown.visible{padding:1em;gap:0.5em;background-color:var(--background-color);box-shadow:2px 2px 4px rgba(0, 0, 0, 0.7)}.menu-container .overflow .dropdown>*{display:flex;align-items:center}";
+let DnnVerticalOverflowMenu = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.showDropdownButton = false;
+    this.showDropdownMenu = false;
+    this.previousMenuWidth = 0;
+  }
+  componentDidRender() {
+    requestAnimationFrame(() => {
+      this.moveAllSlottedItemsIntoMenu();
+      this.moveItemsToDropDownIfNecessery();
+      this.resizeObserver = new ResizeObserver(entries => {
+        for (let entry of entries) {
+          if (entry.contentRect.width < this.previousMenuWidth) {
+            this.moveItemsToDropDownIfNecessery();
+          }
+          if (this.previousMenuWidth > 0 && entry.contentRect.width > this.previousMenuWidth) {
+            this.moveItemsToMenuIfPossible();
+          }
+          this.previousMenuWidth = entry.contentRect.width;
+        }
+      });
+      this.resizeObserver.observe(this.element);
+    });
+  }
+  moveAllSlottedItemsIntoMenu() {
+    const menuItems = this.element.shadowRoot.querySelector("slot").assignedElements();
+    menuItems.forEach(menuItem => this.menu.appendChild(menuItem));
+  }
+  moveItemsToDropDownIfNecessery() {
+    const menuItems = Array.from(this.menu.children);
+    const availableWidth = this.menu.getBoundingClientRect().width;
+    let neededWidth = parseFloat(getComputedStyle(this.element).fontSize) * 2;
+    menuItems.forEach(item => neededWidth += this.getFullWidth(item));
+    neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);
+    if (neededWidth > availableWidth) {
+      this.showDropdownButton = true;
+      var lastItem = menuItems[menuItems.length - 1];
+      if (this.dropdown == undefined) {
+        return;
+      }
+      this.dropdown.prepend(lastItem);
+      this.moveItemsToDropDownIfNecessery();
+    }
+  }
+  moveItemsToMenuIfPossible() {
+    if (this.dropdown == undefined || !this.dropdown.hasChildNodes()) {
+      return;
+    }
+    const menuItems = Array.from(this.menu.children);
+    const availableWidth = this.menu.getBoundingClientRect().width;
+    let neededWidth = parseFloat(getComputedStyle(this.element).fontSize) * 2;
+    neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);
+    menuItems.forEach(item => neededWidth += this.getFullWidth(item));
+    neededWidth += this.getFullWidth(this.dropdown.children[0]);
+    if (neededWidth < availableWidth) {
+      const firstItem = this.dropdown.children[0];
+      this.menu.appendChild(firstItem);
+      if (!this.dropdown.hasChildNodes()) {
+        this.dropdown.classList.remove("visible");
+        this.showDropdownMenu = false;
+        this.showDropdownButton = false;
+      }
+    }
+  }
+  getFullWidth(item) {
+    var width = item.getBoundingClientRect().width;
+    var styles = getComputedStyle(item);
+    width += parseFloat(styles.marginLeft);
+    width += parseFloat(styles.marginRight);
+    width += parseFloat(styles.paddingLeft);
+    width += parseFloat(styles.paddingRight);
+    return width;
+  }
+  toggleOverflowMenu() {
+    this.showDropdownMenu = !this.showDropdownMenu;
+    if (this.showDropdownMenu) {
+      this.dropdown.classList.add("visible");
+      let contentHeight = 0;
+      const items = Array.from(this.dropdown.children);
+      items.forEach(item => contentHeight += item.getBoundingClientRect().height);
+      var emHeight = parseFloat(getComputedStyle(this.dropdown).fontSize) * 0.5;
+      var additionalHeight = emHeight * (this.dropdown.children.length - 1);
+      contentHeight += additionalHeight;
+      this.dropdown.style.height = `${contentHeight}px`;
+      const dismissMenu = (e) => {
+        const buttonRect = this.button.getBoundingClientRect();
+        if (e.clientX < buttonRect.left ||
+          e.clientX > buttonRect.right ||
+          e.clientY < buttonRect.top ||
+          e.clientY > buttonRect.bottom) {
+          this.toggleOverflowMenu();
+        }
+        document.removeEventListener("click", dismissMenu);
+      };
+      setTimeout(() => {
+        document.addEventListener("click", dismissMenu, false);
+      }, 100);
+    }
+    else {
+      this.dropdown.classList.remove("visible");
+      this.dropdown.style.height = "0px";
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "menu-container" }, h("div", { class: "menu", ref: el => this.menu = el }, h("slot", null)), this.showDropdownButton &&
+      h("div", { class: "overflow" }, h("button", { ref: el => this.button = el, class: "icon", onClick: () => this.toggleOverflowMenu() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("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" }))), h("div", { class: "dropdown", ref: el => this.dropdown = el })))));
+  }
+  get element() { return getElement(this); }
+};
+DnnVerticalOverflowMenu.style = dnnVerticalOverflowMenuCss;
+export { DnnVerticalOverflowMenu as dnn_vertical_overflow_menu };
+//# sourceMappingURL=dnn-vertical-overflow-menu.entry.js.map

package/dist/esm/dnn-vertical-overflow-menu.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"dnn-vertical-overflow-menu.entry.js","mappings":"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","names":[],"sources":["./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"],"sourcesContent":[":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 button{\r\n cursor: pointer;\r\n svg{\r\n fill: var(--foreground-color);\r\n }\r\n }\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 a{\r\n display: flex;\r\n align-items: center;\r\n color: var(--text-color);\r\n text-decoration: none;\r\n svg{\r\n fill: var(--foreground-color);\r\n }\r\n }\r\n }\r\n .overflow {\r\n margin-left: auto;\r\n position: relative;\r\n button{\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 a{\r\n color: var(--text-color);\r\n svg{\r\n fill: var(--foreground-color);\r\n }\r\n }\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 display: flex;\r\n align-items: center;\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.moveAllSlottedItemsIntoMenu();\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 moveAllSlottedItemsIntoMenu(){\r\n const menuItems = this.element.shadowRoot.querySelector(\"slot\").assignedElements();\r\n menuItems.forEach(menuItem => this.menu.appendChild(menuItem));\r\n }\r\n\r\n private moveItemsToDropDownIfNecessery(){\r\n const menuItems = Array.from(this.menu.children);\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 this.dropdown.prepend(lastItem);\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.children);\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 neededWidth += this.getFullWidth(this.dropdown.children[0]);\r\n\r\n if (neededWidth < availableWidth){\r\n const firstItem = this.dropdown.children[0];\r\n this.menu.appendChild(firstItem);\r\n if(!this.dropdown.hasChildNodes()){\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.children);\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}></div>\r\n </div>\r\n }\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/esm/dnn-vertical-splitview.entry.js ADDED Viewed

@@ -0,0 +1,119 @@
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-3e56049b.js';
+import { g as getMovementFromEvent } from './mouseUtilities-817973b4.js';
+const dnnVerticalSplitviewCss = ":host{display:flex;align-items:stretch;margin:0 auto}button{background-color:transparent;border:none;margin:0;padding:0;cursor:ew-resize}.pane{height:100%;overflow-y:auto}.pane.transition{transition:all 300ms ease-in-out}";
+let DnnVerticalSplitview = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.widthChanged = createEvent(this, "widthChanged", 7);
+    /** The width of the splitter area. */
+    this.splitterWidth = 16;
+    /** The percentage position of the splitter in the container. */
+    this.splitWidthPercentage = 30;
+    this.leftWidth = 0;
+    this.rightWidth = 0;
+  }
+  /** Sets the width percentage of the divider */
+  async setSplitWidthPercentage(newWidth) {
+    const panes = this.element.shadowRoot.querySelectorAll(".pane");
+    requestAnimationFrame(() => {
+      panes.forEach(pane => pane.classList.add("transition"));
+      requestAnimationFrame(() => {
+        const fullWidth = this.element.getBoundingClientRect().width;
+        let newLeft = fullWidth * newWidth / 100;
+        if (newLeft < 0) {
+          newLeft = 0;
+        }
+        if (newLeft > fullWidth) {
+          newLeft = fullWidth;
+        }
+        this.leftWidth = newLeft;
+        this.rightWidth = fullWidth - newLeft;
+        setTimeout(() => {
+          panes.forEach(pane => pane.classList.remove("transition"));
+        }, 300);
+      });
+    });
+  }
+  /** Gets the current divider position percentage. */
+  async getSplitWidthPercentage() {
+    const fullWidth = this.element.getBoundingClientRect().width;
+    return this.leftWidth / fullWidth;
+  }
+  componentDidLoad() {
+    requestAnimationFrame(() => {
+      const fullWidth = this.element.getBoundingClientRect().width;
+      this.leftWidth = fullWidth * this.splitWidthPercentage / 100;
+      this.rightWidth = fullWidth - this.leftWidth;
+      this.widthChanged.emit(this.splitWidthPercentage);
+    });
+  }
+  handleMouseDown(event) {
+    event.preventDefault();
+    const handleDrag = (ev) => {
+      let { movementX } = getMovementFromEvent(ev, this.previousTouch);
+      let fullWidth = this.element.getBoundingClientRect().width;
+      let newLeft = this.leftWidth + movementX;
+      if (newLeft < 0) {
+        newLeft = 0;
+      }
+      if (newLeft > fullWidth) {
+        newLeft = fullWidth;
+      }
+      this.leftWidth = newLeft;
+      this.rightWidth = fullWidth - newLeft;
+    };
+    const handleDragFinished = () => {
+      document.removeEventListener("mousemove", handleDrag);
+      document.removeEventListener("touchmove", handleDrag);
+      const fullWidth = this.element.getBoundingClientRect().width;
+      const newPercentage = this.leftWidth / fullWidth * 100;
+      this.widthChanged.emit(newPercentage);
+    };
+    document.addEventListener("mouseup", handleDragFinished);
+    document.addEventListener("touchend", handleDragFinished);
+    document.addEventListener("mousemove", handleDrag);
+    document.addEventListener("touchmove", handleDrag);
+  }
+  handleKeyDown(e) {
+    let movementX = 0;
+    switch (e.key) {
+      case "ArrowLeft":
+        movementX = -10;
+        break;
+      case "ArrowRight":
+        movementX = 10;
+        break;
+      default:
+        return;
+    }
+    if (e.shiftKey) {
+      movementX = movementX * 10;
+    }
+    const fullWidth = this.element.getBoundingClientRect().width;
+    let newLeft = this.leftWidth + movementX;
+    if (newLeft < 0) {
+      newLeft = 0;
+    }
+    if (newLeft > fullWidth) {
+      newLeft = fullWidth;
+    }
+    this.leftWidth = newLeft;
+    this.rightWidth = fullWidth - this.leftWidth;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "pane", style: {
+        width: `${this.leftWidth}px`,
+        height: "100%",
+      } }, h("slot", { name: "left" })), h("button", { onMouseDown: e => this.handleMouseDown(e), onTouchStart: e => this.handleMouseDown(e), onKeyDown: e => this.handleKeyDown(e), style: { minWidth: `${this.splitterWidth.toString()}px` } }, h("slot", null)), h("div", { class: "pane", style: {
+        width: `${this.rightWidth}px`,
+      } }, h("slot", { name: "right" }))));
+  }
+  get element() { return getElement(this); }
+};
+DnnVerticalSplitview.style = dnnVerticalSplitviewCss;
+export { DnnVerticalSplitview as dnn_vertical_splitview };
+//# sourceMappingURL=dnn-vertical-splitview.entry.js.map