npm - @dnncommunity/dnn-elements - Versions diffs - 0.14.0-beta.2 → 0.14.0-beta.6 - Mend

@dnncommunity/dnn-elements 0.14.0-beta.2 → 0.14.0-beta.6

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

package/dist/cjs/dnn-button.cjs.entry.js +1 -1
package/dist/cjs/dnn-button.cjs.entry.js.map +1 -1
package/dist/cjs/dnn-button_16.cjs.entry.js +33 -30
package/dist/cjs/dnn-button_16.cjs.entry.js.map +1 -1
package/dist/cjs/dnn-checkbox.cjs.entry.js +1 -1
package/dist/cjs/dnn-checkbox.cjs.entry.js.map +1 -1
package/dist/cjs/dnn-chevron.cjs.entry.js +1 -1
package/dist/cjs/dnn-chevron.cjs.entry.js.map +1 -1
package/dist/cjs/dnn-collapsible.cjs.entry.js +1 -1
package/dist/cjs/dnn-collapsible.cjs.entry.js.map +1 -1
package/dist/cjs/dnn-color-picker.cjs.entry.js +1 -1
package/dist/cjs/dnn-color-picker.cjs.entry.js.map +1 -1
package/dist/cjs/dnn-dropzone.cjs.entry.js +1 -1
package/dist/cjs/dnn-dropzone.cjs.entry.js.map +1 -1
package/dist/cjs/dnn-image-cropper.cjs.entry.js +1 -1
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-modal.cjs.entry.js.map +1 -1
package/dist/cjs/dnn-searchbox.cjs.entry.js +1 -1
package/dist/cjs/dnn-searchbox.cjs.entry.js.map +1 -1
package/dist/cjs/dnn-tabs.cjs.entry.js +1 -1
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-toggle.cjs.entry.js.map +1 -1
package/dist/cjs/dnn-treeview-item.cjs.entry.js +1 -1
package/dist/cjs/dnn-treeview-item.cjs.entry.js.map +1 -1
package/dist/cjs/dnn-vertical-overflow-menu.cjs.entry.js +14 -15
package/dist/cjs/dnn-vertical-overflow-menu.cjs.entry.js.map +1 -1
package/dist/cjs/dnn-vertical-splitview.cjs.entry.js +7 -3
package/dist/cjs/dnn-vertical-splitview.cjs.entry.js.map +1 -1
package/dist/collection/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.css +4 -25
package/dist/collection/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.js +14 -14
package/dist/collection/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.js.map +1 -1
package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.css +8 -1
package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.js +6 -2
package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.js.map +1 -1
package/dist/dnn/app-globals-497eb362.system.js +2 -0
package/dist/dnn/app-globals-497eb362.system.js.map +1 -0
package/dist/dnn/css-shim-856c55de.system.js +2 -0
package/dist/dnn/css-shim-856c55de.system.js.map +1 -0
package/dist/dnn/debounce-eef81bf7.system.js +2 -0
package/dist/dnn/debounce-eef81bf7.system.js.map +1 -0
package/dist/dnn/dnn-button.entry.js +1 -1
package/dist/dnn/dnn-button.entry.js.map +1 -1
package/dist/dnn/dnn-button.system.entry.js +2 -0
package/dist/dnn/dnn-button.system.entry.js.map +1 -0
package/dist/dnn/dnn-checkbox.entry.js +1 -1
package/dist/dnn/dnn-checkbox.entry.js.map +1 -1
package/dist/dnn/dnn-checkbox.system.entry.js +2 -0
package/dist/dnn/dnn-checkbox.system.entry.js.map +1 -0
package/dist/dnn/dnn-chevron.entry.js +1 -1
package/dist/dnn/dnn-chevron.entry.js.map +1 -1
package/dist/dnn/dnn-chevron.system.entry.js +2 -0
package/dist/dnn/dnn-chevron.system.entry.js.map +1 -0
package/dist/dnn/dnn-collapsible.entry.js +1 -1
package/dist/dnn/dnn-collapsible.entry.js.map +1 -1
package/dist/dnn/dnn-collapsible.system.entry.js +2 -0
package/dist/dnn/dnn-collapsible.system.entry.js.map +1 -0
package/dist/dnn/dnn-color-picker.entry.js +1 -1
package/dist/dnn/dnn-color-picker.entry.js.map +1 -1
package/dist/dnn/dnn-color-picker.system.entry.js +12 -0
package/dist/dnn/dnn-color-picker.system.entry.js.map +1 -0
package/dist/dnn/dnn-dropzone.entry.js +1 -1
package/dist/dnn/dnn-dropzone.entry.js.map +1 -1
package/dist/dnn/dnn-dropzone.system.entry.js +2 -0
package/dist/dnn/dnn-dropzone.system.entry.js.map +1 -0
package/dist/dnn/dnn-image-cropper.entry.js +1 -1
package/dist/dnn/dnn-image-cropper.entry.js.map +1 -1
package/dist/dnn/dnn-image-cropper.system.entry.js +2 -0
package/dist/dnn/dnn-image-cropper.system.entry.js.map +1 -0
package/dist/dnn/dnn-modal.entry.js +1 -1
package/dist/dnn/dnn-modal.entry.js.map +1 -1
package/dist/dnn/dnn-modal.system.entry.js +2 -0
package/dist/dnn/dnn-modal.system.entry.js.map +1 -0
package/dist/dnn/dnn-searchbox.entry.js +1 -1
package/dist/dnn/dnn-searchbox.entry.js.map +1 -1
package/dist/dnn/dnn-searchbox.system.entry.js +2 -0
package/dist/dnn/dnn-searchbox.system.entry.js.map +1 -0
package/dist/dnn/dnn-sort-icon.system.entry.js +2 -0
package/dist/dnn/dnn-sort-icon.system.entry.js.map +1 -0
package/dist/dnn/dnn-tab.system.entry.js +2 -0
package/dist/dnn/dnn-tab.system.entry.js.map +1 -0
package/dist/dnn/dnn-tabs.entry.js +1 -1
package/dist/dnn/dnn-tabs.entry.js.map +1 -1
package/dist/dnn/dnn-tabs.system.entry.js +2 -0
package/dist/dnn/dnn-tabs.system.entry.js.map +1 -0
package/dist/dnn/dnn-toggle.entry.js +1 -1
package/dist/dnn/dnn-toggle.entry.js.map +1 -1
package/dist/dnn/dnn-toggle.system.entry.js +2 -0
package/dist/dnn/dnn-toggle.system.entry.js.map +1 -0
package/dist/dnn/dnn-treeview-item.entry.js +1 -1
package/dist/dnn/dnn-treeview-item.entry.js.map +1 -1
package/dist/dnn/dnn-treeview-item.system.entry.js +2 -0
package/dist/dnn/dnn-treeview-item.system.entry.js.map +1 -0
package/dist/dnn/dnn-vertical-overflow-menu.entry.js +14 -15
package/dist/dnn/dnn-vertical-overflow-menu.entry.js.map +1 -1
package/dist/dnn/dnn-vertical-overflow-menu.system.entry.js +2 -0
package/dist/dnn/dnn-vertical-overflow-menu.system.entry.js.map +1 -0
package/dist/dnn/dnn-vertical-splitview.entry.js +7 -3
package/dist/dnn/dnn-vertical-splitview.entry.js.map +1 -1
package/dist/dnn/dnn-vertical-splitview.system.entry.js +2 -0
package/dist/dnn/dnn-vertical-splitview.system.entry.js.map +1 -0
package/dist/dnn/dnn.js +130 -0
package/dist/dnn/dnn.system.js +2 -0
package/dist/dnn/dnn.system.js.map +1 -0
package/dist/dnn/dom-938307ec.system.js +22 -0
package/dist/dnn/dom-938307ec.system.js.map +1 -0
package/dist/dnn/index-5c2c8f16.system.js +2 -0
package/dist/dnn/index-5c2c8f16.system.js.map +1 -0
package/dist/dnn/index.system.js +2 -0
package/dist/dnn/index.system.js.map +1 -0
package/dist/dnn/mouseUtilities-e7e4e78f.system.js +2 -0
package/dist/dnn/mouseUtilities-e7e4e78f.system.js.map +1 -0
package/dist/dnn/p-142c6f85.system.js +2 -0
package/dist/dnn/p-142c6f85.system.js.map +1 -0
package/dist/dnn/p-24a552b2.system.entry.js +11 -0
package/dist/dnn/p-24a552b2.system.entry.js.map +1 -0
package/dist/dnn/p-3fbd1ad6.system.js +2 -0
package/dist/dnn/p-3fbd1ad6.system.js.map +1 -0
package/dist/dnn/p-646cfb1b.system.js +2 -0
package/dist/dnn/p-646cfb1b.system.js.map +1 -0
package/dist/dnn/p-bdfc3291.entry.js +11 -0
package/dist/dnn/p-bdfc3291.entry.js.map +1 -0
package/dist/dnn/p-fb637662.system.js +2 -0
package/dist/dnn/p-fb637662.system.js.map +1 -0
package/dist/dnn/shadow-css-d573707f.system.js +14 -0
package/dist/dnn/shadow-css-d573707f.system.js.map +1 -0
package/dist/esm/dnn-button.entry.js +1 -1
package/dist/esm/dnn-button.entry.js.map +1 -1
package/dist/esm/dnn-button_16.entry.js +33 -30
package/dist/esm/dnn-button_16.entry.js.map +1 -1
package/dist/esm/dnn-checkbox.entry.js +1 -1
package/dist/esm/dnn-checkbox.entry.js.map +1 -1
package/dist/esm/dnn-chevron.entry.js +1 -1
package/dist/esm/dnn-chevron.entry.js.map +1 -1
package/dist/esm/dnn-collapsible.entry.js +1 -1
package/dist/esm/dnn-collapsible.entry.js.map +1 -1
package/dist/esm/dnn-color-picker.entry.js +1 -1
package/dist/esm/dnn-color-picker.entry.js.map +1 -1
package/dist/esm/dnn-dropzone.entry.js +1 -1
package/dist/esm/dnn-dropzone.entry.js.map +1 -1
package/dist/esm/dnn-image-cropper.entry.js +1 -1
package/dist/esm/dnn-image-cropper.entry.js.map +1 -1
package/dist/esm/dnn-modal.entry.js +1 -1
package/dist/esm/dnn-modal.entry.js.map +1 -1
package/dist/esm/dnn-searchbox.entry.js +1 -1
package/dist/esm/dnn-searchbox.entry.js.map +1 -1
package/dist/esm/dnn-tabs.entry.js +1 -1
package/dist/esm/dnn-tabs.entry.js.map +1 -1
package/dist/esm/dnn-toggle.entry.js +1 -1
package/dist/esm/dnn-toggle.entry.js.map +1 -1
package/dist/esm/dnn-treeview-item.entry.js +1 -1
package/dist/esm/dnn-treeview-item.entry.js.map +1 -1
package/dist/esm/dnn-vertical-overflow-menu.entry.js +14 -15
package/dist/esm/dnn-vertical-overflow-menu.entry.js.map +1 -1
package/dist/esm/dnn-vertical-splitview.entry.js +7 -3
package/dist/esm/dnn-vertical-splitview.entry.js.map +1 -1
package/dist/esm-es5/debounce-06f55268.js +2 -0
package/dist/esm-es5/debounce-06f55268.js.map +1 -0
package/dist/esm-es5/dnn-button_16.entry.js +11 -0
package/dist/esm-es5/dnn-button_16.entry.js.map +1 -0
package/dist/esm-es5/dnn.js +2 -0
package/dist/esm-es5/dnn.js.map +1 -0
package/dist/esm-es5/index-212d30ec.js +2 -0
package/dist/esm-es5/index-212d30ec.js.map +1 -0
package/dist/esm-es5/index.js +2 -0
package/dist/esm-es5/index.js.map +1 -0
package/dist/esm-es5/loader.js +2 -0
package/dist/esm-es5/loader.js.map +1 -0
package/dist/types/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.d.ts +0 -1
package/dist/types/components/dnn-vertical-splitview/dnn-vertical-splitview.d.ts +1 -0
package/loader/index.js +1 -1
package/package.json +1 -1
package/dist/dnn/p-bdc4d389.entry.js +0 -11
package/dist/dnn/p-bdc4d389.entry.js.map +0 -1

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

	@@ -1 +1 @@
1	- {"file":"dnn-image-cropper.entry.cjs.js","mappings":"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","names":["getMovementFromEvent","h","Host"],"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}
1	+ {"file":"dnn-image-cropper.entry.cjs.js","mappings":"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","names":["getMovementFromEvent","h","Host"],"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/cjs/dnn-modal.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ba8b86b1.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}";
+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:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;visibility:hidden;opacity:0}:host .overlay .modal{max-width:var(--max-width, 1200px);background-color:white;padding:30px;-webkit-transform:scale(2);transform:scale(2);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;z-index:2;position:relative;margin:10%;max-height:80%;border-radius:var(--dnn-controls-radius, 5px);-webkit-box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);display:block}:host .overlay .modal .close{position:absolute;background-color:white;border:2px solid white;border-radius:50%;padding:0;margin:0;top:-12px;right:-12px;outline:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host .overlay .modal .close:focus,:host .overlay .modal .close:hover{-webkit-box-shadow:0 0 2px 2px var(--dnn-color-primary, blue);box-shadow:0 0 2px 2px var(--dnn-color-primary, blue)}:host .overlay .modal .close svg{width:24px;height:24px;color:grey}:host .overlay.visible{visibility:visible;opacity:1}:host .overlay.visible .modal{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);display:block}";
 let DnnModal = class {
   constructor(hostRef) {

package/dist/cjs/dnn-modal.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dnn-modal.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,~~moCAAmoC~~;;~~ICO1oC~~,QAAQ;EALrB;;;;;;IAYU,oBAAe,GAAY,IAAI,CAAC;;;;;IAMhC,cAAS,GAAY,aAAa,CAAC;;;;;;IAOnC,oBAAe,GAAa,IAAI,CAAC;IAEhC,YAAO,GAAY,KAAK,CAAC;GA0DnC;;;;EApDC,MAAM,IAAI;IACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;GACrB;;;;EAMD,MAAM,IAAI;IACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;GACtB;EAOO,aAAa;IACnB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;GACvB;EAEO,mBAAmB,CAAC,CAAa;IACvC,MAAM,OAAO,GAAI,CAAC,CAAC,MAAsB,CAAC;IAC1C,IAAI,OAAO,CAAC,EAAE,KAAK,UAAU,IAAI,IAAI,CAAC,eAAe,EAAC;MACpD,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;GACF;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBAAK,EAAE,EAAC,UAAU,EAChB,KAAK,EAAE,IAAI,CAAC,OAAO,GAAG,iBAAiB,GAAG,SAAS,EACnD,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAEzCA,iBAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,eAAe;MACnBA,oBACE,KAAK,EAAC,OAAO,gBACD,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,IAEnCA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAACA,kBAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAAA,kBAAM,CAAC,EAAC,iLAAiL,GAAE,CAAM,CACrU,EAEXA,qBAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/dnn-modal/dnn-modal.scss?tag=dnn-modal&encapsulation=shadow","./src/components/dnn-modal/dnn-modal.tsx"],"sourcesContent":[":host {\r\n /*\r\n @prop --max-width: The maximum width of the module.\r\n /\r\n display: block;\r\n .overlay{\r\n background-color: rgba(0,0,0,0.5);\r\n position: fixed;\r\n top:0;\r\n left:0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 1;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n backdrop-filter: blur(2px);\r\n transition: all 300ms ease-in-out;\r\n visibility: hidden;\r\n opacity: 0;\r\n .modal{\r\n max-width: var(--max-width, 1200px);\r\n background-color: white;\r\n padding: 30px;\r\n transform: scale(2);\r\n transition: all 300ms ease-in-out;\r\n z-index: 2;\r\n position: relative;\r\n margin: 10%;\r\n max-height: 80%;\r\n border-radius: var(--dnn-controls-radius, 5px);\r\n box-shadow: 10px 10px 20px 0 rgba(0,0,0,0.5);\r\n display: block;\r\n .close{\r\n position: absolute;\r\n background-color:white;\r\n border: 2px solid white;\r\n border-radius: 50%;\r\n padding: 0;\r\n margin: 0;\r\n top: -12px;\r\n right: -12px;\r\n outline: none;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n &:focus, &:hover{\r\n box-shadow: 0 0 2px 2px var(--dnn-color-primary, blue);\r\n }\r\n svg{\r\n width: 24px;\r\n height: 24px;\r\n color: grey;\r\n }\r\n }\r\n }\r\n &.visible{\r\n visibility: visible;\r\n opacity: 1;\r\n .modal{\r\n transform: scale(1);\r\n box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.5);\r\n display: block;\r\n }\r\n }\r\n }\r\n}","import { Component, Element, Host, h, Prop, Event, EventEmitter, Method, State } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dnn-modal',\r\n styleUrl: 'dnn-modal.scss',\r\n shadow: true\r\n})\r\nexport class DnnModal {\r\n \r\n @Element() el!: HTMLDnnModalElement;\r\n \r\n /\r\n Pass false to remove the backdrop click auto-dismiss feature.\r\n /\r\n @Prop() backdropDismiss: boolean = true;\r\n\r\n /\r\n Optionally pass the aria-label text for the close button.\r\n * Defaults to \"Close modal\" if not provided.\r\n /\r\n @Prop() closeText?: string = \"Close modal\";\r\n\r\n /\r\n Optionally you can pass false to not show the close button.\r\n * If you decide to do so, you should either not also prevent dismissal by clicking the backdrop\r\n * or provide your own dismissal logic in the modal content.\r\n /\r\n @Prop() showCloseButton?: boolean = true;\r\n\r\n @State() visible: boolean = false;\r\n\r\n /\r\n Shows the modal\r\n /\r\n @Method()\r\n async show() {\r\n this.visible = true;\r\n }\r\n\r\n /\r\n Hides the modal\r\n /\r\n @Method()\r\n async hide() {\r\n this.visible = false;\r\n }\r\n\r\n /\r\n Fires when the modal is dismissed.\r\n */\r\n @Event() dismissed!: EventEmitter;\r\n\r\n private handleDismiss(){\r\n this.visible = false;\r\n this.dismissed.emit();\r\n }\r\n\r\n private handleBackdropClick(e: MouseEvent): void {\r\n const element = (e.target as HTMLElement);\r\n if (element.id === \"backdrop\" && this.backdropDismiss){\r\n this.handleDismiss();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div id=\"backdrop\"\r\n class={this.visible ? 'overlay visible' : 'overlay'}\r\n onClick={e => this.handleBackdropClick(e)}\r\n >\r\n <div class=\"modal\">\r\n {this.showCloseButton &&\r\n <button\r\n class=\"close\"\r\n aria-label={this.closeText}\r\n onClick={() => this.handleDismiss()}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"/></svg>\r\n </button>\r\n }\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dnn-modal.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,ulDAAulD;;ICO9lD,QAAQ;EALrB;;;;;;IAYU,oBAAe,GAAY,IAAI,CAAC;;;;;IAMhC,cAAS,GAAY,aAAa,CAAC;;;;;;IAOnC,oBAAe,GAAa,IAAI,CAAC;IAEhC,YAAO,GAAY,KAAK,CAAC;GA0DnC;;;;EApDC,MAAM,IAAI;IACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;GACrB;;;;EAMD,MAAM,IAAI;IACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;GACtB;EAOO,aAAa;IACnB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;GACvB;EAEO,mBAAmB,CAAC,CAAa;IACvC,MAAM,OAAO,GAAI,CAAC,CAAC,MAAsB,CAAC;IAC1C,IAAI,OAAO,CAAC,EAAE,KAAK,UAAU,IAAI,IAAI,CAAC,eAAe,EAAC;MACpD,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;GACF;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBAAK,EAAE,EAAC,UAAU,EAChB,KAAK,EAAE,IAAI,CAAC,OAAO,GAAG,iBAAiB,GAAG,SAAS,EACnD,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAEzCA,iBAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,eAAe;MACnBA,oBACE,KAAK,EAAC,OAAO,gBACD,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,IAEnCA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAACA,kBAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAAA,kBAAM,CAAC,EAAC,iLAAiL,GAAE,CAAM,CACrU,EAEXA,qBAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/dnn-modal/dnn-modal.scss?tag=dnn-modal&encapsulation=shadow","./src/components/dnn-modal/dnn-modal.tsx"],"sourcesContent":[":host {\r\n /*\r\n @prop --max-width: The maximum width of the module.\r\n /\r\n display: block;\r\n .overlay{\r\n background-color: rgba(0,0,0,0.5);\r\n position: fixed;\r\n top:0;\r\n left:0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 1;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n backdrop-filter: blur(2px);\r\n transition: all 300ms ease-in-out;\r\n visibility: hidden;\r\n opacity: 0;\r\n .modal{\r\n max-width: var(--max-width, 1200px);\r\n background-color: white;\r\n padding: 30px;\r\n transform: scale(2);\r\n transition: all 300ms ease-in-out;\r\n z-index: 2;\r\n position: relative;\r\n margin: 10%;\r\n max-height: 80%;\r\n border-radius: var(--dnn-controls-radius, 5px);\r\n box-shadow: 10px 10px 20px 0 rgba(0,0,0,0.5);\r\n display: block;\r\n .close{\r\n position: absolute;\r\n background-color:white;\r\n border: 2px solid white;\r\n border-radius: 50%;\r\n padding: 0;\r\n margin: 0;\r\n top: -12px;\r\n right: -12px;\r\n outline: none;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n &:focus, &:hover{\r\n box-shadow: 0 0 2px 2px var(--dnn-color-primary, blue);\r\n }\r\n svg{\r\n width: 24px;\r\n height: 24px;\r\n color: grey;\r\n }\r\n }\r\n }\r\n &.visible{\r\n visibility: visible;\r\n opacity: 1;\r\n .modal{\r\n transform: scale(1);\r\n box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.5);\r\n display: block;\r\n }\r\n }\r\n }\r\n}","import { Component, Element, Host, h, Prop, Event, EventEmitter, Method, State } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dnn-modal',\r\n styleUrl: 'dnn-modal.scss',\r\n shadow: true\r\n})\r\nexport class DnnModal {\r\n \r\n @Element() el!: HTMLDnnModalElement;\r\n \r\n /\r\n Pass false to remove the backdrop click auto-dismiss feature.\r\n /\r\n @Prop() backdropDismiss: boolean = true;\r\n\r\n /\r\n Optionally pass the aria-label text for the close button.\r\n * Defaults to \"Close modal\" if not provided.\r\n /\r\n @Prop() closeText?: string = \"Close modal\";\r\n\r\n /\r\n Optionally you can pass false to not show the close button.\r\n * If you decide to do so, you should either not also prevent dismissal by clicking the backdrop\r\n * or provide your own dismissal logic in the modal content.\r\n /\r\n @Prop() showCloseButton?: boolean = true;\r\n\r\n @State() visible: boolean = false;\r\n\r\n /\r\n Shows the modal\r\n /\r\n @Method()\r\n async show() {\r\n this.visible = true;\r\n }\r\n\r\n /\r\n Hides the modal\r\n /\r\n @Method()\r\n async hide() {\r\n this.visible = false;\r\n }\r\n\r\n /\r\n Fires when the modal is dismissed.\r\n */\r\n @Event() dismissed!: EventEmitter;\r\n\r\n private handleDismiss(){\r\n this.visible = false;\r\n this.dismissed.emit();\r\n }\r\n\r\n private handleBackdropClick(e: MouseEvent): void {\r\n const element = (e.target as HTMLElement);\r\n if (element.id === \"backdrop\" && this.backdropDismiss){\r\n this.handleDismiss();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div id=\"backdrop\"\r\n class={this.visible ? 'overlay visible' : 'overlay'}\r\n onClick={e => this.handleBackdropClick(e)}\r\n >\r\n <div class=\"modal\">\r\n {this.showCloseButton &&\r\n <button\r\n class=\"close\"\r\n aria-label={this.closeText}\r\n onClick={() => this.handleDismiss()}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"/></svg>\r\n </button>\r\n }\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ba8b86b1.js');
 const debounce = require('./debounce-1de79bc7.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)}";
+const dnnSearchboxCss = ":host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;--background-color:transparent;--color:#333;--border-size:1px;--border-color:grey;--border-active-color:black;--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);--focus-color:var(--dnn-color-primary, blue)}:host input{width:100%;border:var(--border-size) solid var(--border-color);outline:none;border-radius:var(--border-radius);padding:var(--padding);padding-right:32px;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host input:focus,:host input:hover{outline:none;-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host svg{position:absolute;top:0;right:0;height:100%;-webkit-transform:scale(0.7);transform:scale(0.7);fill:var(--color);outline:var(--color);color:var(--color);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host button{background:transparent;border:0;margin:0;padding:0}:host button:focus svg,:host button:hover svg{fill:var(--focus-color);outline:var(--focus-color);color:var(--focus-color)}";
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/cjs/dnn-searchbox.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dnn-searchbox.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,~~47BAA47B~~;;;;;;;;;;;;~~ICOv8B~~,YAAY;EALzB;;;;;;IAUU,gBAAW,GAAY,EAAE,CAAC;;;;IAK1B,cAAS,GAAY,IAAI,CAAC;;IAGX,UAAK,GAAW,EAAE,CAAC;GAgD3C;EAvCC,gBAAgB;IACd,IAAI,IAAI,CAAC,SAAS,EAAC;MACjB,IAAI,CAAC,2BAA2B,EAAE,CAAC;KACpC;SACG;MACF,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;GACF;EAEO,kBAAkB;IACxB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACpC;EAGO,2BAA2B;IACjC,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAGD,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,mBAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAClC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,GAC/D,EACD,IAAI,CAAC,KAAK,KAAK,EAAE;MAChBA,oBAAQ,KAAK,EAAC,WAAW,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,IAE9BA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAACA,kBAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAAA,kBAAM,CAAC,EAAC,iLAAiL,GAAE,CAAM,CACrU;;QAEXA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAACA,kBAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAAA,kBAAM,CAAC,EAAC,4OAA4O,GAAE,CAAM,CAElY,EACP;GACH;;;;;AAvBD;EADCE,iBAAQ,CAAC,GAAG,CAAC;+DAGb;;;;;","names":["h","Host","Debounce"],"sources":["./src/components/dnn-searchbox/dnn-searchbox.scss?tag=dnn-searchbox&encapsulation=shadow","./src/components/dnn-searchbox/dnn-searchbox.tsx"],"sourcesContent":[":host {\r\n position: relative;\r\n display: flex;\r\n justify-content: space-between;\r\n --background-color: transparent;\r\n --color: #333;\r\n --border-size: 1px;\r\n --border-color: grey;\r\n --border-active-color: black;\r\n --border-radius: var(--dnn-controls-radius, 5px);\r\n --padding: var(--dnn-controls-padding, 5px);\r\n --focus-color: var(--dnn-color-primary, blue);\r\n input {\r\n width:100%;\r\n border: var(--border-size) solid var(--border-color);\r\n outline: none;\r\n border-radius: var(--border-radius);\r\n padding: var(--padding);\r\n padding-right: 32px;\r\n transition: all 300ms ease-in-out;\r\n &:focus, &:hover{\r\n outline: none;\r\n box-shadow: 0 0 2px 2px var(--focus-color);\r\n }\r\n }\r\n svg{\r\n position: absolute;\r\n top:0;\r\n right:0;\r\n height: 100%;\r\n transform: scale(0.7);\r\n fill: var(--color);\r\n outline: var(--color);\r\n color: var(--color);\r\n transition: all 300ms ease-in-out;\r\n }\r\n button{\r\n background: transparent;\r\n border: 0;\r\n margin: 0;\r\n padding: 0;\r\n &:focus, &:hover{\r\n svg{\r\n fill: var(--focus-color);\r\n outline: var(--focus-color);\r\n color: var(--focus-color);\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Host, h, Event, EventEmitter, Watch, Prop } from '@stencil/core';\r\nimport { Debounce } from '../../utilities/debounce';\r\n@Component({\r\n tag: 'dnn-searchbox',\r\n styleUrl: 'dnn-searchbox.scss',\r\n shadow: true\r\n})\r\nexport class DnnSearchbox {\r\n\r\n /*\r\n Sets the field placeholder text.\r\n /\r\n @Prop() placeholder?: string = \"\";\r\n\r\n /\r\n Debounces the queryChanged by 500ms.\r\n /\r\n @Prop() debounced: boolean = true;\r\n\r\n /* Sets the query /\r\n @Prop({mutable: true}) query: string = \"\";\r\n\r\n /\r\n Fires up each time the search query changes.\r\n * The data passed is the new query.\r\n */\r\n @Event() queryChanged: EventEmitter;\r\n\r\n @Watch('query')\r\n fireQueryChanged(){\r\n if (this.debounced){\r\n this.debouncedHandleQueryChanged();\r\n }\r\n else{\r\n this.handleQueryChanged();\r\n }\r\n }\r\n \r\n private handleQueryChanged(){\r\n this.queryChanged.emit(this.query);\r\n }\r\n\r\n @Debounce(500)\r\n private debouncedHandleQueryChanged(){\r\n this.handleQueryChanged();\r\n }\r\n \r\n\r\n render() {\r\n return (\r\n <Host>\r\n <input type=\"text\" value={this.query}\r\n placeholder={this.placeholder}\r\n onInput={e => this.query = (e.target as HTMLInputElement).value}\r\n />\r\n {this.query !== \"\" ?\r\n <button class=\"svg clear\"\r\n onClick={() => this.query = \"\"}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"/></svg>\r\n </button>\r\n :\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"/></svg>\r\n }\r\n </Host>\r\n );\r\n }\r\n\r\n}\r\n"],"version":3}
1	+ {"file":"dnn-searchbox.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,uoCAAuoC;;;;;;;;;;;;ICOlpC,YAAY;EALzB;;;;;;IAUU,gBAAW,GAAY,EAAE,CAAC;;;;IAK1B,cAAS,GAAY,IAAI,CAAC;;IAGX,UAAK,GAAW,EAAE,CAAC;GAgD3C;EAvCC,gBAAgB;IACd,IAAI,IAAI,CAAC,SAAS,EAAC;MACjB,IAAI,CAAC,2BAA2B,EAAE,CAAC;KACpC;SACG;MACF,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;GACF;EAEO,kBAAkB;IACxB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACpC;EAGO,2BAA2B;IACjC,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAGD,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,mBAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAClC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,GAC/D,EACD,IAAI,CAAC,KAAK,KAAK,EAAE;MAChBA,oBAAQ,KAAK,EAAC,WAAW,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,IAE9BA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAACA,kBAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAAA,kBAAM,CAAC,EAAC,iLAAiL,GAAE,CAAM,CACrU;;QAEXA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAACA,kBAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAAA,kBAAM,CAAC,EAAC,4OAA4O,GAAE,CAAM,CAElY,EACP;GACH;;;;;AAvBD;EADCE,iBAAQ,CAAC,GAAG,CAAC;+DAGb;;;;;","names":["h","Host","Debounce"],"sources":["./src/components/dnn-searchbox/dnn-searchbox.scss?tag=dnn-searchbox&encapsulation=shadow","./src/components/dnn-searchbox/dnn-searchbox.tsx"],"sourcesContent":[":host {\r\n position: relative;\r\n display: flex;\r\n justify-content: space-between;\r\n --background-color: transparent;\r\n --color: #333;\r\n --border-size: 1px;\r\n --border-color: grey;\r\n --border-active-color: black;\r\n --border-radius: var(--dnn-controls-radius, 5px);\r\n --padding: var(--dnn-controls-padding, 5px);\r\n --focus-color: var(--dnn-color-primary, blue);\r\n input {\r\n width:100%;\r\n border: var(--border-size) solid var(--border-color);\r\n outline: none;\r\n border-radius: var(--border-radius);\r\n padding: var(--padding);\r\n padding-right: 32px;\r\n transition: all 300ms ease-in-out;\r\n &:focus, &:hover{\r\n outline: none;\r\n box-shadow: 0 0 2px 2px var(--focus-color);\r\n }\r\n }\r\n svg{\r\n position: absolute;\r\n top:0;\r\n right:0;\r\n height: 100%;\r\n transform: scale(0.7);\r\n fill: var(--color);\r\n outline: var(--color);\r\n color: var(--color);\r\n transition: all 300ms ease-in-out;\r\n }\r\n button{\r\n background: transparent;\r\n border: 0;\r\n margin: 0;\r\n padding: 0;\r\n &:focus, &:hover{\r\n svg{\r\n fill: var(--focus-color);\r\n outline: var(--focus-color);\r\n color: var(--focus-color);\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Host, h, Event, EventEmitter, Watch, Prop } from '@stencil/core';\r\nimport { Debounce } from '../../utilities/debounce';\r\n@Component({\r\n tag: 'dnn-searchbox',\r\n styleUrl: 'dnn-searchbox.scss',\r\n shadow: true\r\n})\r\nexport class DnnSearchbox {\r\n\r\n /*\r\n Sets the field placeholder text.\r\n /\r\n @Prop() placeholder?: string = \"\";\r\n\r\n /\r\n Debounces the queryChanged by 500ms.\r\n /\r\n @Prop() debounced: boolean = true;\r\n\r\n /* Sets the query /\r\n @Prop({mutable: true}) query: string = \"\";\r\n\r\n /\r\n Fires up each time the search query changes.\r\n * The data passed is the new query.\r\n */\r\n @Event() queryChanged: EventEmitter;\r\n\r\n @Watch('query')\r\n fireQueryChanged(){\r\n if (this.debounced){\r\n this.debouncedHandleQueryChanged();\r\n }\r\n else{\r\n this.handleQueryChanged();\r\n }\r\n }\r\n \r\n private handleQueryChanged(){\r\n this.queryChanged.emit(this.query);\r\n }\r\n\r\n @Debounce(500)\r\n private debouncedHandleQueryChanged(){\r\n this.handleQueryChanged();\r\n }\r\n \r\n\r\n render() {\r\n return (\r\n <Host>\r\n <input type=\"text\" value={this.query}\r\n placeholder={this.placeholder}\r\n onInput={e => this.query = (e.target as HTMLInputElement).value}\r\n />\r\n {this.query !== \"\" ?\r\n <button class=\"svg clear\"\r\n onClick={() => this.query = \"\"}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"/></svg>\r\n </button>\r\n :\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"/></svg>\r\n }\r\n </Host>\r\n );\r\n }\r\n\r\n}\r\n"],"version":3}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ba8b86b1.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}";
+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:-ms-flexbox;display:flex;background-color:var(--color-background);color:var(--color-text)}.tabTitles button{padding:0.5rem 1rem;border:0;margin:0;background-color:transparent}.tabTitles button.visible{background-color:var(--color-visible);color:var(--color-bisible-text)}.tabTitles button:focus,.tabTitles button:hover{outline:none;-webkit-box-shadow:0 0 2px 2px var(--color-focus);box-shadow:0 0 2px 2px var(--color-focus)}.currentTab{border:1px solid var(--color-background);padding:1rem}";
 let DnnTabs = class {
   constructor(hostRef) {

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

	@@ -1 +1 @@
1	- {"file":"dnn-tabs.entry.cjs.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,QACIA,QAACC,UAAI,IAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,EAAE,IAChCD,iBAAK,KAAK,EAAC,WAAW,IACjB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,IACxBA,oBACI,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,EACNA,iBAAK,KAAK,EAAC,YAAY,IACnBA,qBAAa,CACX,CACH,EACT;GACL;;;;;;","names":["h","Host"],"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}
1	+ {"file":"dnn-tabs.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,uyBAAuyB;;ICO7yB,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,QACIA,QAACC,UAAI,IAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,EAAE,IAChCD,iBAAK,KAAK,EAAC,WAAW,IACjB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,IACxBA,oBACI,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,EACNA,iBAAK,KAAK,EAAC,YAAY,IACnBA,qBAAa,CACX,CACH,EACT;GACL;;;;;;","names":["h","Host"],"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/cjs/dnn-toggle.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ba8b86b1.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}";
+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;-webkit-transition:background-color 300ms ease-in-out;transition:background-color 300ms ease-in-out;position:relative;cursor:pointer}button:hover,button:focus{-webkit-box-shadow:0 0 2px 2px var(--dnn-color-primary);box-shadow:0 0 2px 2px var(--dnn-color-primary)}button.checked{background-color:var(--background-checked, var(--dnn-color-primary, blue))}button.checked .handle{left:calc(1em + 4px)}button:disabled{opacity:0.5;cursor:not-allowed;-webkit-box-shadow:none;box-shadow:none}button .handle{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;background-color:white;width:1em;height:1em;border-radius:var(--dnn-controls-radius, 50%);position:absolute;top:calc(50% - 0.5em);left:2px}";
 let DnnToggle = class {
   constructor(hostRef) {

package/dist/cjs/dnn-toggle.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dnn-toggle.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,~~iyBAAiyB~~;;~~ICSzyB~~,SAAS;EALtB;;;;IAU2B,YAAO,GAAG,KAAK,CAAC;;IAG/B,aAAQ,GAAG,KAAK,CAAC;GAyB5B;EAnBG,cAAc,CAAC,SAAkB;IAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAC,OAAO,EAAE,SAAS,EAAC,CAAC,CAAC;GAChD;EAED,MAAM;IACF,QACIA,QAACC,UAAI,QACDD,oBAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAC,EAC7D,OAAO,EAAE;QACL,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;UAChB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAChC;OACJ,IAEDA,iBAAK,KAAK,EAAC,QAAQ,GAAO,CACrB,CACN,EACT;GACL;;;;;;;;;;","names":["h","Host"],"sources":["./src/components/dnn-toggle/dnn-toggle.scss?tag=dnn-toggle&encapsulation=shadow","./src/components/dnn-toggle/dnn-toggle.tsx"],"sourcesContent":[":host {\r\n /*\r\n @prop --background: Background of the toggle.\r\n * @prop --background-checked: Background of the toggle when checked.\r\n * @prop --handle-background: Background of the handle.\r\n * @prop --handle-background-checked: Background of the handle when checked.\r\n * @prop --border-radius: The radius of the background borders.\r\n * @prop --handle-border-radius: The radius of the handle.\r\n /\r\n\r\n display: inline-block;\r\n outline: none;\r\n cursor: pointer;\r\n}\r\n\r\nbutton {\r\n height: 1.5em;\r\n width: 2.5em;\r\n outline: none;\r\n background-color: var(--background, #888);\r\n border: 0;\r\n border-radius: var(--border-radius, var(--dnn-controls-radius, 0.75em));\r\n padding: 0.1em;\r\n position: relative;\r\n margin: 0;\r\n transition: background-color 300ms ease-in-out;\r\n position: relative;\r\n cursor: pointer;\r\n &:hover, &:focus{\r\n box-shadow: 0 0 2px 2px var(--dnn-color-primary);\r\n }\r\n &.checked{\r\n background-color: var(--background-checked, var(--dnn-color-primary, blue));\r\n .handle{\r\n left: calc(1em + 4px);\r\n }\r\n }\r\n &:disabled{\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n box-shadow: none;\r\n }\r\n .handle{\r\n transition: all 300ms ease-in-out;\r\n background-color:white;\r\n width: 1em;\r\n height: 1em;\r\n border-radius: var(--dnn-controls-radius, 50%);\r\n position: absolute;\r\n top: calc(50% - 0.5em);\r\n left: 2px;\r\n }\r\n}","import { Component, h, Element, Prop, Event, EventEmitter, Watch, Host } from \"@stencil/core\";\r\nimport { DnnToggleChangeEventDetail } from \"./toggle-interface\";\r\n\r\n\r\n@Component({\r\n tag: \"dnn-toggle\",\r\n styleUrl: \"dnn-toggle.scss\",\r\n shadow: true\r\n})\r\nexport class DnnToggle {\r\n\r\n @Element() element: HTMLDnnToggleElement;\r\n\r\n /* If 'true' the toggle is checked (on). /\r\n @Prop({mutable: true}) checked = false;\r\n\r\n /* If 'true' the toggle is not be interacted with. /\r\n @Prop() disabled = false;\r\n\r\n /* Fires when the toggle changed */\r\n @Event() checkChanged!: EventEmitter<DnnToggleChangeEventDetail>;\r\n\r\n @Watch(\"checked\")\r\n checkedChanged(isChecked: boolean){\r\n this.checkChanged.emit({checked: isChecked});\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button disabled={this.disabled} class={{'checked': this.checked}}\r\n onClick={() => {\r\n if (!this.disabled) {\r\n this.checked = !this.checked;\r\n }\r\n }}\r\n >\r\n <div class=\"handle\"></div>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dnn-toggle.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,g9BAAg9B;;ICSx9B,SAAS;EALtB;;;;IAU2B,YAAO,GAAG,KAAK,CAAC;;IAG/B,aAAQ,GAAG,KAAK,CAAC;GAyB5B;EAnBG,cAAc,CAAC,SAAkB;IAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAC,OAAO,EAAE,SAAS,EAAC,CAAC,CAAC;GAChD;EAED,MAAM;IACF,QACIA,QAACC,UAAI,QACDD,oBAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAC,EAC7D,OAAO,EAAE;QACL,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;UAChB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAChC;OACJ,IAEDA,iBAAK,KAAK,EAAC,QAAQ,GAAO,CACrB,CACN,EACT;GACL;;;;;;;;;;","names":["h","Host"],"sources":["./src/components/dnn-toggle/dnn-toggle.scss?tag=dnn-toggle&encapsulation=shadow","./src/components/dnn-toggle/dnn-toggle.tsx"],"sourcesContent":[":host {\r\n /*\r\n @prop --background: Background of the toggle.\r\n * @prop --background-checked: Background of the toggle when checked.\r\n * @prop --handle-background: Background of the handle.\r\n * @prop --handle-background-checked: Background of the handle when checked.\r\n * @prop --border-radius: The radius of the background borders.\r\n * @prop --handle-border-radius: The radius of the handle.\r\n /\r\n\r\n display: inline-block;\r\n outline: none;\r\n cursor: pointer;\r\n}\r\n\r\nbutton {\r\n height: 1.5em;\r\n width: 2.5em;\r\n outline: none;\r\n background-color: var(--background, #888);\r\n border: 0;\r\n border-radius: var(--border-radius, var(--dnn-controls-radius, 0.75em));\r\n padding: 0.1em;\r\n position: relative;\r\n margin: 0;\r\n transition: background-color 300ms ease-in-out;\r\n position: relative;\r\n cursor: pointer;\r\n &:hover, &:focus{\r\n box-shadow: 0 0 2px 2px var(--dnn-color-primary);\r\n }\r\n &.checked{\r\n background-color: var(--background-checked, var(--dnn-color-primary, blue));\r\n .handle{\r\n left: calc(1em + 4px);\r\n }\r\n }\r\n &:disabled{\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n box-shadow: none;\r\n }\r\n .handle{\r\n transition: all 300ms ease-in-out;\r\n background-color:white;\r\n width: 1em;\r\n height: 1em;\r\n border-radius: var(--dnn-controls-radius, 50%);\r\n position: absolute;\r\n top: calc(50% - 0.5em);\r\n left: 2px;\r\n }\r\n}","import { Component, h, Element, Prop, Event, EventEmitter, Watch, Host } from \"@stencil/core\";\r\nimport { DnnToggleChangeEventDetail } from \"./toggle-interface\";\r\n\r\n\r\n@Component({\r\n tag: \"dnn-toggle\",\r\n styleUrl: \"dnn-toggle.scss\",\r\n shadow: true\r\n})\r\nexport class DnnToggle {\r\n\r\n @Element() element: HTMLDnnToggleElement;\r\n\r\n /* If 'true' the toggle is checked (on). /\r\n @Prop({mutable: true}) checked = false;\r\n\r\n /* If 'true' the toggle is not be interacted with. /\r\n @Prop() disabled = false;\r\n\r\n /* Fires when the toggle changed */\r\n @Event() checkChanged!: EventEmitter<DnnToggleChangeEventDetail>;\r\n\r\n @Watch(\"checked\")\r\n checkedChanged(isChecked: boolean){\r\n this.checkChanged.emit({checked: isChecked});\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button disabled={this.disabled} class={{'checked': this.checked}}\r\n onClick={() => {\r\n if (!this.disabled) {\r\n this.checked = !this.checked;\r\n }\r\n }}\r\n >\r\n <div class=\"handle\"></div>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ba8b86b1.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}";
+const dnnTreeviewItemCss = ":host{display:-ms-flexbox;display:flex;overflow:hidden}.expander{width:24px;height:24px}.expander button{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;background-color:transparent;border:none;padding:0;margin:0;outline:none;height:1em;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;position:relative;top:2px}.expander button svg :first-child{-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;fill:white;stroke:black}.expander.expanded button{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.expander.expanded button svg :first-child{fill:black;stroke:black}div.item .item-slot{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.25em}div.item div.children{overflow:hidden;height:0;-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}";
 let DnnTreeviewItem = class {
   constructor(hostRef) {

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

	@@ -1 +1 @@
1	- {"file":"dnn-treeview-item.entry.cjs.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,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,IAChD,IAAI,CAAC,WAAW;MACfA,oBACE,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IACpCA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAACA,kBAAM,CAAC,EAAC,oBAAoB,GAAE,EAAAA,kBAAM,CAAC,EAAC,kBAAkB,EAAC,IAAI,EAAC,MAAM,GAAE,CAAM,CAC3K,CAEP,EACNA,iBAAK,KAAK,EAAC,MAAM,IACfA,iBAAK,KAAK,EAAC,WAAW,IACpBA,qBAAa,CACT,EACNA,6BAAiB,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxEA,iBAAK,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,eAAe,GAAG,EAAE,IACvCA,kBAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACU,CACZ,CACH,EACP;GACH;;;;;;;","names":["h","Host"],"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}
1	+ {"file":"dnn-treeview-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,m6BAAm6B;;ICOj7B,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,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,IAChD,IAAI,CAAC,WAAW;MACfA,oBACE,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IACpCA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAACA,kBAAM,CAAC,EAAC,oBAAoB,GAAE,EAAAA,kBAAM,CAAC,EAAC,kBAAkB,EAAC,IAAI,EAAC,MAAM,GAAE,CAAM,CAC3K,CAEP,EACNA,iBAAK,KAAK,EAAC,MAAM,IACfA,iBAAK,KAAK,EAAC,WAAW,IACpBA,qBAAa,CACT,EACNA,6BAAiB,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxEA,iBAAK,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,eAAe,GAAG,EAAE,IACvCA,kBAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACU,CACZ,CACH,EACP;GACH;;;;;;;","names":["h","Host"],"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/cjs/dnn-vertical-overflow-menu.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ba8b86b1.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}";
+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:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;background-color:var(--background-color);color:var(--text-color)}.menu-container .menu{margin:0.5em;display:-ms-flexbox;display:flex;gap:1em;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;white-space:nowrap;width:100%}.menu-container .overflow{margin-left:auto;position:relative}.menu-container .overflow button{cursor:pointer;padding:0;margin:0;background-color:transparent;border:none}.menu-container .overflow button svg{fill:var(--foreground-color)}.menu-container .overflow .dropdown{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;white-space:nowrap;right:0;-webkit-transition:100ms ease-in-out;transition:100ms ease-in-out;height:0;overflow:hidden}.menu-container .overflow .dropdown.visible{padding:1em;gap:0.5em;background-color:var(--background-color);-webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.7);box-shadow:2px 2px 4px rgba(0, 0, 0, 0.7)}";
 let DnnVerticalOverflowMenu = class {
   constructor(hostRef) {
@@ -15,7 +15,6 @@ let DnnVerticalOverflowMenu = class {
   }
   componentDidRender() {
     requestAnimationFrame(() => {
-      this.moveAllSlottedItemsIntoMenu();
       this.moveItemsToDropDownIfNecessery();
       this.resizeObserver = new ResizeObserver(entries => {
         for (let entry of entries) {
@@ -31,12 +30,8 @@ let DnnVerticalOverflowMenu = class {
       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 menuItems = Array.from(this.menu.querySelector("slot").assignedElements());
     const availableWidth = this.menu.getBoundingClientRect().width;
     let neededWidth = parseFloat(getComputedStyle(this.element).fontSize) * 2;
     menuItems.forEach(item => neededWidth += this.getFullWidth(item));
@@ -47,7 +42,7 @@ let DnnVerticalOverflowMenu = class {
       if (this.dropdown == undefined) {
         return;
       }
-      this.dropdown.prepend(lastItem);
+      lastItem.slot = "dropdown";
       this.moveItemsToDropDownIfNecessery();
     }
   }
@@ -55,16 +50,20 @@ let DnnVerticalOverflowMenu = class {
     if (this.dropdown == undefined || !this.dropdown.hasChildNodes()) {
       return;
     }
-    const menuItems = Array.from(this.menu.children);
+    const menuItems = Array.from(this.menu.querySelector("slot").assignedElements());
     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]);
+    const firstItem = this.dropdown.querySelector("slot").assignedElements()[0];
+    if (firstItem != undefined) {
+      neededWidth += this.getFullWidth(firstItem);
+    }
     if (neededWidth < availableWidth) {
-      const firstItem = this.dropdown.children[0];
-      this.menu.appendChild(firstItem);
-      if (!this.dropdown.hasChildNodes()) {
+      if (firstItem != undefined) {
+        firstItem.slot = "";
+      }
+      if (firstItem == undefined) {
         this.dropdown.classList.remove("visible");
         this.showDropdownMenu = false;
         this.showDropdownButton = false;
@@ -85,7 +84,7 @@ let DnnVerticalOverflowMenu = class {
     if (this.showDropdownMenu) {
       this.dropdown.classList.add("visible");
       let contentHeight = 0;
-      const items = Array.from(this.dropdown.children);
+      const items = Array.from(this.dropdown.querySelector("slot").assignedElements());
       items.forEach(item => contentHeight += item.getBoundingClientRect().height);
       var emHeight = parseFloat(getComputedStyle(this.dropdown).fontSize) * 0.5;
       var additionalHeight = emHeight * (this.dropdown.children.length - 1);
@@ -112,7 +111,7 @@ let DnnVerticalOverflowMenu = class {
   }
   render() {
     return (index.h(index.Host, null, index.h("div", { class: "menu-container" }, index.h("div", { class: "menu", ref: el => this.menu = el }, index.h("slot", null)), this.showDropdownButton &&
-      index.h("div", { class: "overflow" }, index.h("button", { ref: el => this.button = el, class: "icon", onClick: () => this.toggleOverflowMenu() }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0z", fill: "none" }), index.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" }))), index.h("div", { class: "dropdown", ref: el => this.dropdown = el })))));
+      index.h("div", { class: "overflow" }, index.h("button", { ref: el => this.button = el, class: "icon", onClick: () => this.toggleOverflowMenu() }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, index.h("path", { d: "M0 0h24v24H0z", fill: "none" }), index.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" }))), index.h("div", { class: "dropdown", ref: el => this.dropdown = el }, index.h("slot", { name: "dropdown" }))))));
   }
   get element() { return index.getElement(this); }
 };

package/dist/cjs/dnn-vertical-overflow-menu.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dnn-vertical-overflow-menu.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,0BAA0B,GAAG,s0CAAs0C;;ICO51C,uBAAuB;EALpC;;IASW,uBAAkB,GAAG,KAAK,CAAC;IAC3B,qBAAgB,GAAG,KAAK,CAAC;IAM1B,sBAAiB,GAAG,CAAC,CAAC;GAiI/B;EA/HC,kBAAkB;IAChB,qBAAqB,CAAC;MACpB,IAAI,CAAC,2BAA2B,EAAE,CAAC;MACnC,IAAI,CAAC,8BAA8B,EAAE,CAAC;MACtC,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,OAAO;QAC9C,KAAK,IAAI,KAAK,IAAI,OAAO,EAAC;UACxB,IAAI,KAAK,CAAC,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC,iBAAiB,EAAC;YACnD,IAAI,CAAC,8BAA8B,EAAE,CAAA;WACtC;UACD,IAAI,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,KAAK,CAAC,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC,iBAAiB,EAAC;YACjF,IAAI,CAAC,yBAAyB,EAAE,CAAC;WAClC;UACD,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;SAClD;OACF,CAAC,CAAC;MACH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAC3C,CAAC,CAAC;GACJ;EAEO,2BAA2B;IACjC,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACnF,SAAS,CAAC,OAAO,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;GAChE;EAEO,8BAA8B;IACpC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjD,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;IAC/D,IAAI,WAAW,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,GAAC,CAAC,CAAC;IACxE,SAAS,CAAC,OAAO,CAAC,IAAI,IAAI,WAAW,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;IAClE,WAAW,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC5F,IAAI,WAAW,GAAG,cAAc,EAAC;MAC/B,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;MAC/B,IAAI,QAAQ,GAAG,SAAS,CAAC,SAAS,CAAC,MAAM,GAAE,CAAC,CAAC,CAAC;MAC9C,IAAI,IAAI,CAAC,QAAQ,IAAI,SAAS,EAAC;QAC7B,OAAO;OACR;MACD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;MAChC,IAAI,CAAC,8BAA8B,EAAE,CAAC;KACvC;GACF;EAEO,yBAAyB;IAC/B,IAAI,IAAI,CAAC,QAAQ,IAAI,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,EAAC;MAC/D,OAAO;KACR;IACD,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjD,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;IAC/D,IAAI,WAAW,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,GAAC,CAAC,CAAC;IACxE,WAAW,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC5F,SAAS,CAAC,OAAO,CAAC,IAAI,IAAI,WAAW,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;IAClE,WAAW,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IAE5D,IAAI,WAAW,GAAG,cAAc,EAAC;MAC/B,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;MAC5C,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;MACjC,IAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,EAAC;QAChC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QAC1C,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;OACjC;KACF;GACF;EAEO,YAAY,CAAC,IAAa;IAChC,IAAI,KAAK,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;IAC/C,IAAI,MAAM,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACpC,KAAK,IAAI,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IACvC,KAAK,IAAI,UAAU,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IACxC,KAAK,IAAI,UAAU,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IACxC,KAAK,IAAI,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IACzC,OAAO,KAAK,CAAC;GACd;EAEO,kBAAkB;IACxB,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;IAC/C,IAAI,IAAI,CAAC,gBAAgB,EAAC;MACxB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;MACvC,IAAI,aAAa,GAAG,CAAC,CAAC;MACtB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;MACjD,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,aAAa,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC,CAAC;MAC5E,IAAI,QAAQ,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC;MAC1E,IAAI,gBAAgB,GAAG,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;MACtE,aAAa,IAAI,gBAAgB,CAAC;MAClC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,aAAa,IAAI,CAAC;MAClD,MAAM,WAAW,GAAG,CAAC,CAAa;QAChC,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC;QACvD,IACE,CAAC,CAAC,OAAO,GAAG,UAAU,CAAC,IAAI;UAC3B,CAAC,CAAC,OAAO,GAAG,UAAU,CAAC,KAAK;UAC5B,CAAC,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG;UAC1B,CAAC,CAAC,OAAO,GAAG,UAAU,CAAC,MAAM,EAAC;UAC5B,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B;QACD,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;OACtD,CAAC;MACF,UAAU,CAAC;QACT,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC;OACxD,EAAE,GAAG,CAAC,CAAC;KACT;SACG;MACF,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;MAC1C,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;KACpC;GACF;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,gBAAgB,IACzBA,iBAAK,KAAK,EAAC,MAAM,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,IAAI,GAAG,EAAE,IACzCA,qBAAa,CACT,EACH,IAAI,CAAC,kBAAkB;MACtBA,iBAAK,KAAK,EAAC,UAAU,IACnBA,oBACE,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,MAAM,GAAG,EAAE,EAC3B,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE,IACxCA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAACA,kBAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAAA,kBAAM,CAAC,EAAC,mJAAmJ,GAAE,CAAM,CACvS,EACTA,iBAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAQ,CACvD,CAEJ,CACH,EACP;GACH;;;;;;;","names":["h","Host"],"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}
1	+ {"file":"dnn-vertical-overflow-menu.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,0BAA0B,GAAG,itCAAitC;;ICOvuC,uBAAuB;EALpC;;IASW,uBAAkB,GAAG,KAAK,CAAC;IAC3B,qBAAgB,GAAG,KAAK,CAAC;IAM1B,sBAAiB,GAAG,CAAC,CAAC;GAiI/B;EA/HC,kBAAkB;IAChB,qBAAqB,CAAC;MACpB,IAAI,CAAC,8BAA8B,EAAE,CAAC;MACtC,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,OAAO;QAC9C,KAAK,IAAI,KAAK,IAAI,OAAO,EAAC;UACxB,IAAI,KAAK,CAAC,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC,iBAAiB,EAAC;YACnD,IAAI,CAAC,8BAA8B,EAAE,CAAA;WACtC;UACD,IAAI,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,KAAK,CAAC,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC,iBAAiB,EAAC;YACjF,IAAI,CAAC,yBAAyB,EAAE,CAAC;WAClC;UACD,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;SAClD;OACF,CAAC,CAAC;MACH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAC3C,CAAC,CAAC;GACJ;EAEO,8BAA8B;IACpC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAE,CAAC,CAAC;IACjF,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;IAC/D,IAAI,WAAW,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,GAAC,CAAC,CAAC;IACxE,SAAS,CAAC,OAAO,CAAC,IAAI,IAAI,WAAW,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;IAClE,WAAW,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC5F,IAAI,WAAW,GAAG,cAAc,EAAC;MAC/B,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;MAC/B,IAAI,QAAQ,GAAG,SAAS,CAAC,SAAS,CAAC,MAAM,GAAE,CAAC,CAAC,CAAC;MAC9C,IAAI,IAAI,CAAC,QAAQ,IAAI,SAAS,EAAC;QAC7B,OAAO;OACR;MACD,QAAQ,CAAC,IAAI,GAAG,UAAU,CAAC;MAC3B,IAAI,CAAC,8BAA8B,EAAE,CAAC;KACvC;GACF;EAEO,yBAAyB;IAC/B,IAAI,IAAI,CAAC,QAAQ,IAAI,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,EAAC;MAC/D,OAAO;KACR;IACD,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAE,CAAC,CAAC;IACjF,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;IAC/D,IAAI,WAAW,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,GAAC,CAAC,CAAC;IACxE,WAAW,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC5F,SAAS,CAAC,OAAO,CAAC,IAAI,IAAI,WAAW,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;IAClE,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,CAAC;IAC5E,IAAI,SAAS,IAAI,SAAS,EAAC;MACzB,WAAW,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;KAC7C;IAED,IAAI,WAAW,GAAG,cAAc,EAAC;MAC/B,IAAI,SAAS,IAAI,SAAS,EAAC;QACzB,SAAS,CAAC,IAAI,GAAG,EAAE,CAAC;OACrB;MACD,IAAG,SAAS,IAAI,SAAS,EAAC;QACxB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QAC1C,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;OACjC;KACF;GACF;EAEO,YAAY,CAAC,IAAa;IAChC,IAAI,KAAK,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;IAC/C,IAAI,MAAM,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACpC,KAAK,IAAI,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IACvC,KAAK,IAAI,UAAU,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IACxC,KAAK,IAAI,UAAU,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IACxC,KAAK,IAAI,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IACzC,OAAO,KAAK,CAAC;GACd;EAEO,kBAAkB;IACxB,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;IAC/C,IAAI,IAAI,CAAC,gBAAgB,EAAC;MACxB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;MACvC,IAAI,aAAa,GAAG,CAAC,CAAC;MACtB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAE,CAAC,CAAC;MACjF,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,aAAa,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC,CAAC;MAC5E,IAAI,QAAQ,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC;MAC1E,IAAI,gBAAgB,GAAG,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;MACtE,aAAa,IAAI,gBAAgB,CAAC;MAClC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,aAAa,IAAI,CAAC;MAClD,MAAM,WAAW,GAAG,CAAC,CAAa;QAChC,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC;QACvD,IACE,CAAC,CAAC,OAAO,GAAG,UAAU,CAAC,IAAI;UAC3B,CAAC,CAAC,OAAO,GAAG,UAAU,CAAC,KAAK;UAC5B,CAAC,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG;UAC1B,CAAC,CAAC,OAAO,GAAG,UAAU,CAAC,MAAM,EAAC;UAC5B,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B;QACD,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;OACtD,CAAC;MACF,UAAU,CAAC;QACT,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC;OACxD,EAAE,GAAG,CAAC,CAAC;KACT;SACG;MACF,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;MAC1C,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;KACpC;GACF;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,gBAAgB,IACzBA,iBAAK,KAAK,EAAC,MAAM,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,IAAI,GAAG,EAAE,IACzCA,qBAAa,CACT,EACH,IAAI,CAAC,kBAAkB;MACtBA,iBAAK,KAAK,EAAC,UAAU,IACnBA,oBACE,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,MAAM,GAAG,EAAE,EAC3B,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE,IACxCA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAACA,kBAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAAA,kBAAM,CAAC,EAAC,mJAAmJ,GAAE,CAAM,CACvS,EACTA,iBAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,IACjDA,kBAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACF,CAEJ,CACH,EACP;GACH;;;;;;;","names":["h","Host"],"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 .menu{\r\n margin: 0.5em;\r\n display: flex;\r\n gap: 1em;\r\n justify-content: flex-start;\r\n align-items: center;\r\n white-space: nowrap;\r\n width: 100%;\r\n }\r\n .overflow {\r\n margin-left: auto;\r\n position: relative;\r\n button{\r\n cursor: pointer;\r\n svg{\r\n fill: var(--foreground-color);\r\n }\r\n padding: 0;\r\n margin: 0;\r\n background-color: transparent;\r\n border: none;\r\n }\r\n .dropdown{\r\n position:absolute;\r\n display: flex;\r\n flex-direction: column;\r\n white-space: nowrap;\r\n right: 0;\r\n transition: 100ms ease-in-out;\r\n height: 0;\r\n overflow: hidden;\r\n &.visible{\r\n padding: 1em;\r\n gap: 0.5em;\r\n background-color: var(--background-color);\r\n box-shadow: 2px 2px 4px rgba(0,0,0,0.7);\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Element, Host, h, State } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dnn-vertical-overflow-menu',\r\n styleUrl: 'dnn-vertical-overflow-menu.scss',\r\n shadow: true,\r\n})\r\nexport class DnnVerticalOverflowMenu {\r\n\r\n @Element() element!: HTMLDnnVerticalOverflowMenuElement;\r\n \r\n @State() showDropdownButton = false;\r\n @State() showDropdownMenu = false;\r\n\r\n private menu!: HTMLDivElement;\r\n private dropdown: HTMLDivElement;\r\n private resizeObserver: ResizeObserver;\r\n private button!: HTMLButtonElement;\r\n private previousMenuWidth = 0;\r\n\r\n componentDidRender() {\r\n requestAnimationFrame(() => {\r\n this.moveItemsToDropDownIfNecessery();\r\n this.resizeObserver = new ResizeObserver(entries => {\r\n for (let entry of entries){\r\n if (entry.contentRect.width < this.previousMenuWidth){\r\n this.moveItemsToDropDownIfNecessery()\r\n }\r\n if (this.previousMenuWidth > 0 && entry.contentRect.width > this.previousMenuWidth){\r\n this.moveItemsToMenuIfPossible();\r\n }\r\n this.previousMenuWidth = entry.contentRect.width;\r\n }\r\n });\r\n this.resizeObserver.observe(this.element);\r\n });\r\n }\r\n\r\n private moveItemsToDropDownIfNecessery(){\r\n const menuItems = Array.from(this.menu.querySelector(\"slot\").assignedElements());\r\n const availableWidth = this.menu.getBoundingClientRect().width;\r\n let neededWidth = parseFloat(getComputedStyle(this.element).fontSize)2;\r\n menuItems.forEach(item => neededWidth += this.getFullWidth(item));\r\n neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);\r\n if (neededWidth > availableWidth){\r\n this.showDropdownButton = true;\r\n var lastItem = menuItems[menuItems.length -1];\r\n if (this.dropdown == undefined){\r\n return;\r\n }\r\n lastItem.slot = \"dropdown\";\r\n this.moveItemsToDropDownIfNecessery();\r\n }\r\n }\r\n \r\n private moveItemsToMenuIfPossible(){\r\n if (this.dropdown == undefined \|\| !this.dropdown.hasChildNodes()){\r\n return;\r\n }\r\n const menuItems = Array.from(this.menu.querySelector(\"slot\").assignedElements());\r\n const availableWidth = this.menu.getBoundingClientRect().width;\r\n let neededWidth = parseFloat(getComputedStyle(this.element).fontSize)2;\r\n neededWidth += (menuItems.length - 1) parseFloat(getComputedStyle(this.element).fontSize);\r\n menuItems.forEach(item => neededWidth += this.getFullWidth(item));\r\n const firstItem = this.dropdown.querySelector(\"slot\").assignedElements()[0];\r\n if (firstItem != undefined){\r\n neededWidth += this.getFullWidth(firstItem);\r\n }\r\n\r\n if (neededWidth < availableWidth){\r\n if (firstItem != undefined){\r\n firstItem.slot = \"\";\r\n }\r\n if(firstItem == undefined){\r\n this.dropdown.classList.remove(\"visible\");\r\n this.showDropdownMenu = false;\r\n this.showDropdownButton = false;\r\n }\r\n } \r\n }\r\n\r\n private getFullWidth(item: Element) {\r\n var width = item.getBoundingClientRect().width;\r\n var styles = getComputedStyle(item);\r\n width += parseFloat(styles.marginLeft);\r\n width += parseFloat(styles.marginRight);\r\n width += parseFloat(styles.paddingLeft);\r\n width += parseFloat(styles.paddingRight);\r\n return width;\r\n }\r\n\r\n private toggleOverflowMenu(): void {\r\n this.showDropdownMenu = !this.showDropdownMenu;\r\n if (this.showDropdownMenu){\r\n this.dropdown.classList.add(\"visible\");\r\n let contentHeight = 0;\r\n const items = Array.from(this.dropdown.querySelector(\"slot\").assignedElements());\r\n items.forEach(item => contentHeight += item.getBoundingClientRect().height);\r\n var emHeight = parseFloat(getComputedStyle(this.dropdown).fontSize) * 0.5;\r\n var additionalHeight = emHeight * (this.dropdown.children.length - 1);\r\n contentHeight += additionalHeight;\r\n this.dropdown.style.height = `${contentHeight}px`;\r\n const dismissMenu = (e: MouseEvent) => {\r\n const buttonRect = this.button.getBoundingClientRect();\r\n if (\r\n e.clientX < buttonRect.left \|\|\r\n e.clientX > buttonRect.right \|\|\r\n e.clientY < buttonRect.top \|\|\r\n e.clientY > buttonRect.bottom){\r\n this.toggleOverflowMenu();\r\n }\r\n document.removeEventListener(\"click\", dismissMenu);\r\n };\r\n setTimeout(() => {\r\n document.addEventListener(\"click\", dismissMenu, false);\r\n }, 100);\r\n }\r\n else{\r\n this.dropdown.classList.remove(\"visible\");\r\n this.dropdown.style.height = \"0px\";\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class=\"menu-container\">\r\n <div class=\"menu\" ref={el => this.menu = el}>\r\n <slot></slot>\r\n </div>\r\n {this.showDropdownButton &&\r\n <div class=\"overflow\">\r\n <button\r\n ref={el => this.button = el}\r\n class=\"icon\"\r\n onClick={() => this.toggleOverflowMenu()}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"/></svg>\r\n </button>\r\n <div class=\"dropdown\" ref={el => this.dropdown = el}>\r\n <slot name=\"dropdown\"></slot>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/dnn-vertical-splitview.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ba8b86b1.js');
 const mouseUtilities = require('./mouseUtilities-75be531a.js');
-const dnnVerticalSplitviewCss = ":host{display:flex;align-items:stretch;margin:0 auto;--left-pane-background-color:transparent;--right-pane-background-color:transparent}button{background-color:transparent;border:none;margin:0;padding:0;cursor:ew-resize}.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)}";
+const dnnVerticalSplitviewCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;margin:0 auto;position:relative;--left-pane-background-color:transparent;--right-pane-background-color:transparent}button{border:none;margin:0;padding:0;cursor:ew-resize;position:absolute;height:100%;background-color:transparent}button.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane{overflow-y:auto}.pane.transition{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.pane.left{background-color:var(--left-pane-background-color)}.pane.right{background-color:var(--right-pane-background-color);-ms-flex-positive:1;flex-grow:1}";
 let DnnVerticalSplitview = class {
   constructor(hostRef) {
@@ -23,6 +23,7 @@ let DnnVerticalSplitview = class {
     const panes = this.element.shadowRoot.querySelectorAll(".pane");
     requestAnimationFrame(() => {
       panes.forEach(pane => pane.classList.add("transition"));
+      this.splitter.classList.add("transition");
       requestAnimationFrame(() => {
         const fullWidth = this.element.getBoundingClientRect().width;
         let newLeft = fullWidth * newWidth / 100;
@@ -36,6 +37,7 @@ let DnnVerticalSplitview = class {
         this.rightWidth = fullWidth - newLeft;
         setTimeout(() => {
           panes.forEach(pane => pane.classList.remove("transition"));
+          this.splitter.classList.remove("transition");
         }, 300);
       });
     });
@@ -109,8 +111,10 @@ let DnnVerticalSplitview = class {
   render() {
     return (index.h(index.Host, null, index.h("div", { class: "left pane", style: {
         width: `${this.leftWidth}px`,
-        height: "100%",
-      } }, index.h("slot", { name: "left" })), index.h("button", { onMouseDown: e => this.handleMouseDown(e), onTouchStart: e => this.handleMouseDown(e), onKeyDown: e => this.handleKeyDown(e), style: { minWidth: `${this.splitterWidth.toString()}px` } }, index.h("slot", null)), index.h("div", { class: "right pane", style: {
+      } }, index.h("slot", { name: "left" })), index.h("button", { onMouseDown: e => this.handleMouseDown(e), onTouchStart: e => this.handleMouseDown(e), onKeyDown: e => this.handleKeyDown(e), ref: el => this.splitter = el, style: {
+        minWidth: `${this.splitterWidth.toString()}px`,
+        left: `${this.leftWidth - 2}px`,
+      } }, index.h("slot", null)), index.h("div", { class: "right pane", style: {
         width: `${this.rightWidth}px`,
       } }, index.h("slot", { name: "right" }))));
   }