@dnncommunity/dnn-elements 0.13.0-beta.1

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

@@ -0,0 +1 @@
+{"file":"dnn-image-cropper.entry.js","mappings":"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","names":[],"sources":["./src/components/dnn-image-cropper/CornerType.ts","./src/components/dnn-image-cropper/dnn-image-cropper.scss?tag=dnn-image-cropper&encapsulation=shadow","./src/components/dnn-image-cropper/dnn-image-cropper.tsx"],"sourcesContent":["export enum CornerType {\r\n    \"nw\",\r\n    \"ne\",\r\n    \"se\",\r\n    \"sw\",\r\n};",":host {\r\n  display: block;\r\n}\r\ncanvas {\r\n  display: none;\r\n}\r\n.view{\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  height: 0;\r\n  overflow: hidden;\r\n  transition: all 300ms ease-in-out;\r\n  &.visible{\r\n    visibility: visible;\r\n    opacity: 1;\r\n    height: initial;\r\n    overflow: visible;\r\n  }\r\n  .cropper{\r\n    position: relative;\r\n    width: 100%;\r\n    img{\r\n      width: 100%;\r\n      display: block;\r\n      margin: 0 auto;\r\n    }\r\n    .backdrop{\r\n      backdrop-filter: saturate(0.5);\r\n      backdrop-filter: brightness(0.5);\r\n      position: absolute;\r\n      left: 0;\r\n      top: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n    .crop{\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      outline: 2px dashed white;\r\n      box-shadow: black 0 0 0px 2px;\r\n      backdrop-filter: saturate(2);\r\n      backdrop-filter: brightness(2);\r\n      cursor: move;\r\n      >div{\r\n        width: 20px;\r\n        height: 20px;\r\n        background-color: white;\r\n        border: 2px solid rgba(0,0,0,0.5);\r\n        position: absolute;\r\n        &.nw, &.ne{\r\n          top: -17px;\r\n        }\r\n        &.ne, &.se{\r\n          right: -17px;\r\n        }\r\n        &.se, &.sw{\r\n          bottom: -17px;\r\n        }\r\n        &.sw, &.nw{\r\n          left: -17px;\r\n        }\r\n        &.nw, &.se{\r\n          cursor: nwse-resize;\r\n        }\r\n        &.ne, &.sw{\r\n          cursor: nesw-resize;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\ndnn-modal{\r\n  --max-width: 512px;\r\n}","import { Component, Host, h, State, Prop, Event, EventEmitter } from '@stencil/core';\r\nimport { CornerType } from './CornerType';\r\n\r\n/**\r\n * Allows cropping an image in-browser with the option to enforce a specific final size.\r\n * All computation happens in the browser and the final image is emmited\r\n * in an event that has a data-url of the image.\r\n */\r\n@Component({\r\n  tag: 'dnn-image-cropper',\r\n  styleUrl: 'dnn-image-cropper.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnImageCropper {\r\n  /** Sets the desired final image width. */\r\n  @Prop() width: number = 600;\r\n\r\n  /** Sets the desired final image height. */\r\n  @Prop() height: number = 600;\r\n\r\n  /** Can be used to customize controls text.\r\n   * Some values support tokens, see default values for examples.\r\n  */\r\n  @Prop() resx: {\r\n    capture: string;\r\n    dragAndDropFile: string;\r\n    or: string;\r\n    takePicture: string;\r\n    uploadFile: string;\r\n    imageTooSmall: string;\r\n    modalCloseText: string;\r\n  } = {\r\n    capture: \"Capture\",\r\n    dragAndDropFile: \"Drag and drop an image\",\r\n    or: \"or\",\r\n    takePicture: \"Take a picture\",\r\n    uploadFile: \"Upload an image\",\r\n    imageTooSmall: \"The image you are attempting to upload does not meet the minimum size requirement of {width} pixels by {height} pixels. Please upload a larger image.\",\r\n    modalCloseText: \"Close\",\r\n  }\r\n\r\n  /** Sets the output quality of the corpped image (number between 0 and 1). */\r\n  @Prop() quality: number = 0.8;\r\n\r\n  /** When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry. */\r\n  @Prop() preventUndersized: boolean = false;\r\n\r\n  /** When the image crop changes, emits the dataurl for the new cropped image. */\r\n  @Event() imageCropChanged: EventEmitter<string>;\r\n\r\n  @State() view: IComponentInterfaces[\"View\"];\r\n  \r\n  private host: HTMLElement;\r\n  private hasPictureView: HTMLDivElement;\r\n  private noPictureView: HTMLDivElement;\r\n  private canvas: HTMLCanvasElement;\r\n  private image: HTMLImageElement;\r\n  private crop: HTMLDivElement;\r\n  private previousTouch: Touch;\r\n  private imageTooSmallModal!: HTMLDnnModalElement;\r\n\r\n  componentDidLoad() {\r\n    this.setView(\"noPictureView\");\r\n  }\r\n\r\n  private setView(newView: IComponentInterfaces[\"View\"]){\r\n    const views = this.host.shadowRoot.querySelectorAll(\".view\");\r\n    views.forEach(v =>\r\n      v.classList.remove(\"visible\"));\r\n    switch (newView) {\r\n      case \"noPictureView\":\r\n        this.noPictureView.classList.add(\"visible\");\r\n        break;\r\n      case \"hasPictureView\":\r\n        this.hasPictureView.classList.add(\"visible\");\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n    this.view = newView;\r\n  }\r\n\r\n  private initCrop(){\r\n    var wantedRatio = this.width / this.height;\r\n    var imageRect = this.image.getBoundingClientRect();\r\n    var imageRatio = imageRect.width / imageRect.height;\r\n    \r\n    if (wantedRatio > imageRatio){\r\n        var wantedHeight = imageRect.width / wantedRatio;\r\n        var diff = imageRect.height - wantedHeight;\r\n        this.crop.style.top = Math.round(diff/2).toString() + \"px\";\r\n        this.crop.style.height = Math.round(wantedHeight).toString() + \"px\";\r\n    }\r\n    else{\r\n      var wantedWidth = imageRect.height * wantedRatio;\r\n      var diff = imageRect.width - wantedWidth;\r\n        this.crop.style.left = Math.round(diff/2).toString() + \"px\";\r\n        this.crop.style.width = Math.round(wantedWidth).toString() + \"px\";\r\n    }\r\n  }\r\n\r\n  private setImage(){\r\n    this.image.addEventListener('load', () => {\r\n      this.initCrop();\r\n      this.emitImage();\r\n    })\r\n    this.image.src = this.canvas.toDataURL();\r\n  }\r\n\r\n  private handleNewFile(file: File): void {\r\n    if (file.type.split('/')[0] != \"image\"){\r\n      return;\r\n    }\r\n    \r\n    var reader = new FileReader();\r\n    reader.onload = readerLoadEvent => {\r\n      var img = new Image();\r\n      img.onload = () => {\r\n        this.canvas.width = img.width;\r\n        this.canvas.height = img.height;\r\n        if (this.preventUndersized && (img.width < this.width || img.height< this.height)){\r\n          this.imageTooSmallModal.show();\r\n          return;\r\n        }\r\n        var ctx = this.canvas.getContext(\"2d\");\r\n        ctx.drawImage(img,0,0);\r\n        this.setView(\"hasPictureView\");\r\n        this.setImage();\r\n      }\r\n      img.src = readerLoadEvent.target.result.toString();\r\n    }\r\n    reader.readAsDataURL(file);\r\n  }\r\n\r\n  private handleCropMouseDown = (event: MouseEvent | TouchEvent) => {\r\n    event.stopPropagation();\r\n    event.preventDefault();\r\n    const element = event.target as HTMLElement;\r\n    const className = element.classList[0];\r\n\r\n    document.addEventListener(\"mouseup\", this.handleImageCropFinished, false);\r\n    document.addEventListener(\"touchend\", this.handleImageCropFinished, false);\r\n    switch (className) {\r\n      case \"crop\":\r\n        document.addEventListener(\"mousemove\", this.handleCropDrag, false);\r\n        document.addEventListener(\"touchmove\", this.handleCropDrag, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleCropDrag));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleCropDrag));\r\n        break;\r\n      case \"nw\":\r\n        document.addEventListener(\"mousemove\", this.handleNwMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleNwMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNwMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNwMouseMove));\r\n        break;\r\n      case \"ne\":\r\n        document.addEventListener(\"mousemove\", this.handleNeMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleNeMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNeMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNeMouseMove));\r\n        break\r\n      case \"se\":\r\n        document.addEventListener(\"mousemove\", this.handleSeMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleSeMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSeMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSeMouseMove));\r\n        break;\r\n      case \"sw\":\r\n        document.addEventListener(\"mousemove\", this.handleSwMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleSwMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSwMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSwMouseMove));\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  };\r\n\r\n  private handleImageCropFinished = (_ev: MouseEvent) => {\r\n    this.emitImage();\r\n    document.removeEventListener(\"mouseup\", this.handleImageCropFinished);\r\n    this.previousTouch = undefined;\r\n  }\r\n\r\n  private emitImage() {\r\n    var x = this.crop.offsetLeft / this.image.width * this.image.naturalWidth;\r\n    var y = this.crop.offsetTop / this.image.height * this.image.naturalHeight;\r\n\r\n    var cropRect = this.crop.getBoundingClientRect();\r\n    var width = cropRect.width / this.image.width * this.image.naturalWidth;\r\n    var height = cropRect.height / this.image.height * this.image.naturalHeight;\r\n\r\n    if (x < 0)\r\n      x = 0;\r\n    if (x > this.image.naturalWidth)\r\n      x = this.image.naturalWidth;\r\n    if (y < 0)\r\n      y = 0;\r\n    if (y > this.image.naturalWidth)\r\n      y = this.image.naturalWidth;\r\n    if (width > this.image.naturalWidth)\r\n      width = this.image.naturalWidth;\r\n    if (height > this.image.naturalHeight)\r\n      height = this.image.naturalHeight;\r\n\r\n    var dataUrl = this.generateCroppedImage(x, y, width, height, this.width, this.height);\r\n    this.imageCropChanged.emit(dataUrl);\r\n  }\r\n\r\n  private generateCroppedImage(x: number, y: number, width: number, height: number, desiredWidth: number, desiredHeight: number) {\r\n    this.canvas.width = desiredWidth;\r\n    this.canvas.height = desiredHeight;\r\n    const context = this.canvas.getContext(\"2d\");\r\n    context.clearRect(0, 0, desiredWidth, desiredHeight);\r\n    context.drawImage(this.image, x, y, width, height, 0, 0, desiredWidth, desiredHeight);\r\n\r\n    return this.canvas.toDataURL(\"image/jpeg\", this.quality);\r\n  }\r\n\r\n  private handleNwMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.nw);\r\n  }\r\n\r\n  private handleNeMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.ne);\r\n  }\r\n\r\n  private handleSeMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.se);\r\n  }\r\n\r\n  private handleSwMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.sw);\r\n  }\r\n\r\n  private handleCornerDrag = (event: MouseEvent | TouchEvent, corner: CornerType) => {\r\n    if (!this.isMouseStillInTarget(event)){\r\n      return;\r\n    }\r\n    \r\n    let {left, top} = this.getCornerLeftTop(corner);\r\n    let newWidth = 0;\r\n    let newHeight = 0;\r\n    let orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\r\n    const wantedRatio = this.width / this.height;\r\n    const cropRect = this.crop.getBoundingClientRect();\r\n    const imageRect = this.image.getBoundingClientRect();\r\n    let { movementX, movementY } = this.getMouvementFromEvent(event);\r\n    if (Math.abs(movementX) < Math.abs(movementY)){\r\n      orientation = \"vertical\";\r\n    }\r\n\r\n    if (orientation == \"horizontal\"){\r\n      switch (corner) {\r\n        case CornerType.nw:\r\n        case CornerType.sw:\r\n          newWidth = cropRect.width - movementX;\r\n          newHeight = newWidth / wantedRatio;\r\n          break;\r\n        case CornerType.ne:\r\n        case CornerType.se:\r\n          newWidth = cropRect.width + movementX;\r\n          newHeight = newWidth / wantedRatio;\r\n          break;\r\n        default:\r\n          break;\r\n      }\r\n    } else{\r\n      switch (corner) {\r\n        case CornerType.nw:\r\n        case CornerType.ne:\r\n          newHeight = cropRect.height - movementY;\r\n          newWidth = newHeight * wantedRatio;\r\n          break;\r\n        case CornerType.se:\r\n        case CornerType.sw:\r\n          newHeight = cropRect.height + movementY;\r\n          newWidth = newHeight * wantedRatio;\r\n          break;\r\n        default:\r\n          break;\r\n      }\r\n    }\r\n\r\n    switch (corner) {\r\n      case CornerType.ne:\r\n      case CornerType.nw:\r\n        const topOffset = cropRect.height - newHeight;\r\n        top = this.crop.offsetTop + topOffset;\r\n      default:\r\n        break;\r\n    }\r\n\r\n    switch (corner) {\r\n      case CornerType.nw:\r\n      case CornerType.sw:\r\n        const leftOffset = cropRect.width - newWidth;\r\n        left = this.crop.offsetLeft + leftOffset;\r\n        if (left < 0) left = 0;\r\n        if (left > imageRect.width) left = imageRect.width;\r\n        if (top < 0) top = 0;\r\n        if (top > imageRect.height) top = imageRect.height;\r\n        if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\r\n        if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\r\n        break;\r\n      case CornerType.ne:\r\n      case CornerType.se:\r\n        if (top < 0) top = 0;\r\n        if (top > imageRect.height) top = imageRect.height;\r\n        if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\r\n        if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n\r\n    if (newWidth / newHeight != wantedRatio){\r\n      return;\r\n    }\r\n\r\n    if (this.preventUndersized){\r\n      const zoomRatio = this.image.width / this.image.naturalWidth;\r\n      if (newWidth / zoomRatio < this.width || newHeight / zoomRatio < this.height){\r\n        return;\r\n      }\r\n    }\r\n\r\n    switch (corner) {\r\n      case CornerType.ne:\r\n        this.crop.style.top = `${top}px`;\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      case CornerType.nw:\r\n        this.crop.style.left = `${left}px`;\r\n        this.crop.style.top = `${top}px`;\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      case CornerType.se:\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      case CornerType.sw:\r\n        this.crop.style.left = `${left}px`;\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  }\r\n\r\n  private getCornerLeftTop(corner: CornerType): { left: number; top: number; } {\r\n    let left = 0;\r\n    let top = 0;\r\n    switch (corner) {\r\n      case CornerType.se:\r\n        left = this.crop.offsetLeft;\r\n        top = this.crop.offsetTop;\r\n        break;\r\n      case CornerType.sw:\r\n        top = this.crop.offsetTop;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n    return {top, left};\r\n  }\r\n\r\n  private handleCropDrag = (ev: MouseEvent | TouchEvent) => {\r\n    if (!this.isMouseStillInTarget(ev)){\r\n      return;\r\n    }\r\n    let {movementX, movementY} = this.getMouvementFromEvent(ev);\r\n    let newLeft = this.crop.offsetLeft + movementX;\r\n    let newTop = this.crop.offsetTop + movementY;\r\n    var imageRect = this.image.getBoundingClientRect();\r\n    var cropRect = this.crop.getBoundingClientRect();\r\n    if (newLeft < 0){\r\n      newLeft = 0;\r\n    }\r\n    if (newTop < 0){\r\n      newTop = 0;\r\n    }\r\n    if (newLeft + cropRect.width > imageRect.width){\r\n      newLeft = this.crop.offsetLeft;\r\n    }\r\n    if (newTop + cropRect.height > imageRect.height){\r\n      newTop = this.crop.offsetTop;\r\n    }\r\n    this.crop.style.left = newLeft + \"px\";\r\n    this.crop.style.top = newTop + \"px\";\r\n  };\r\n  \r\n  private getMouvementFromEvent(event: MouseEvent | TouchEvent) {\r\n    let movementX = 0;\r\n    let movementY = 0;\r\n    if (event instanceof MouseEvent) {\r\n      movementX = event.movementX;\r\n      movementY = event.movementY;\r\n    }\r\n    if (typeof TouchEvent !== \"undefined\"){\r\n      if (event instanceof TouchEvent) {\r\n        let touch = event.touches[0];\r\n        if (this.previousTouch != undefined) {\r\n          movementX = touch.pageX - this.previousTouch.pageX;\r\n          movementY = touch.pageY - this.previousTouch.pageY;\r\n        }\r\n        this.previousTouch = touch;\r\n      }\r\n    }\r\n    return { movementX, movementY };\r\n  }\r\n\r\n  private isMouseStillInTarget(event: MouseEvent | TouchEvent) {\r\n    var inside = false;\r\n    let mouseX: number;\r\n    let mouseY: number;\r\n    const imageRect = this.image.getBoundingClientRect();\r\n    \r\n    if (event instanceof MouseEvent){\r\n      mouseX = event.clientX;\r\n      mouseY = event.clientY;\r\n    }\r\n\r\n    if (typeof TouchEvent !== \"undefined\"){\r\n      if (event instanceof TouchEvent){\r\n        var touch = event.touches[0];\r\n        mouseX = touch.clientX;\r\n        mouseY = touch.clientY;\r\n      }\r\n    }\r\n    \r\n    if (\r\n      mouseX >= imageRect.x &&\r\n      mouseY >= imageRect.y &&\r\n      mouseX <= imageRect.left + imageRect.width &&\r\n      mouseY <= imageRect.top + imageRect.height)\r\n    {\r\n      inside = true;\r\n    }\r\n\r\n    var corners = this.crop.querySelectorAll(\"div\");\r\n    corners.forEach(corner =>{\r\n      var cornerRect = corner.getBoundingClientRect();\r\n      if (\r\n        mouseX >= cornerRect.x &&\r\n        mouseY >= cornerRect.y &&\r\n        mouseX <= cornerRect.left + cornerRect.width &&\r\n        mouseY <= cornerRect.top + cornerRect.height)\r\n        {\r\n          inside = true;\r\n        }\r\n    })\r\n\r\n    return inside;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host ref={el => this.host = el}>\r\n        <canvas ref={el => this.canvas = el} />\r\n        <div\r\n          class=\"view\"\r\n          ref={el => this.hasPictureView = el}\r\n        >\r\n          <div class=\"cropper\">\r\n            <img ref={el => this.image = el} />\r\n            <div class=\"backdrop\" />\r\n            <div\r\n              class=\"crop\"\r\n              ref={e => this.crop = e}\r\n              onMouseDown={this.handleCropMouseDown}\r\n              onTouchStart={this.handleCropMouseDown}\r\n            >\r\n              <div class=\"nw\" />\r\n              <div class=\"ne\" />\r\n              <div class=\"se\" />\r\n              <div class=\"sw\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"view\"\r\n          ref={el => this.noPictureView = el}>\r\n            <dnn-dropzone\r\n              allowCameraMode\r\n              onFilesSelected={e => this.handleNewFile(e.detail[0])}\r\n              resx={\r\n                {\r\n                  capture: this.resx.capture,\r\n                  dragAndDropFile: this.resx.dragAndDropFile,\r\n                  or: this.resx.or,\r\n                  takePicture: this.resx.takePicture,\r\n                  uploadFile: this.resx.uploadFile,\r\n                }\r\n              }\r\n            />\r\n        </div>\r\n        <dnn-modal ref={el => this.imageTooSmallModal = el} close-text={this.resx.modalCloseText}>\r\n          <p>{this.resx.imageTooSmall.replace(\"{width}\", this.width.toString()).replace(\"{height}\", this.height.toString())}</p>\r\n        </dnn-modal>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\ninterface IComponentInterfaces\r\n{\r\n  View: \"noPictureView\" | \"takingPictureView\" | \"hasPictureView\" | \"hasCroppedPictureView\";\r\n}"],"version":3}

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

@@ -0,0 +1,58 @@
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-6c0764e5.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}";
+
+let DnnModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.dismissed = createEvent(this, "dismissed", 7);
+    /**
+     * Pass false to remove the backdrop click auto-dismiss feature.
+     */
+    this.backdropDismiss = true;
+    /**
+     * Optionally pass the aria-label text for the close button.
+     * Defaults to "Close modal" if not provided.
+     */
+    this.closeText = "Close modal";
+    /**
+     * Optionally you can pass false to not show the close button.
+     * If you decide to do so, you should either not also prevent dismissal by clicking the backdrop
+     * or provide your own dismissal logic in the modal content.
+     */
+    this.showCloseButton = true;
+    this.visible = false;
+  }
+  /**
+   * Shows the modal
+   */
+  async show() {
+    this.visible = true;
+  }
+  /**
+   * Hides the modal
+   */
+  async hide() {
+    this.visible = false;
+  }
+  handleDismiss() {
+    this.visible = false;
+    this.dismissed.emit();
+  }
+  handleBackdropClick(e) {
+    const element = e.target;
+    if (element.id === "backdrop" && this.backdropDismiss) {
+      this.handleDismiss();
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { id: "backdrop", class: this.visible ? 'overlay visible' : 'overlay', onClick: e => this.handleBackdropClick(e) }, h("div", { class: "modal" }, this.showCloseButton &&
+      h("button", { class: "close", "aria-label": this.closeText, onClick: () => this.handleDismiss() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("path", { d: "M12 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" }))), h("slot", null)))));
+  }
+  get el() { return getElement(this); }
+};
+DnnModal.style = dnnModalCss;
+
+export { DnnModal as dnn_modal };
+
+//# sourceMappingURL=dnn-modal.entry.js.map

package/dist/esm/dnn-modal.entry.js.map

@@ -0,0 +1 @@
+{"file":"dnn-modal.entry.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,QACE,EAAC,IAAI,QACH,WAAK,EAAE,EAAC,UAAU,EAChB,KAAK,EAAE,IAAI,CAAC,OAAO,GAAG,iBAAiB,GAAG,SAAS,EACnD,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAEzC,WAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,eAAe;MACnB,cACE,KAAK,EAAC,OAAO,gBACD,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,IAEnC,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAA,YAAM,CAAC,EAAC,iLAAiL,GAAE,CAAM,CACrU,EAEX,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;","names":[],"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/esm/dnn-searchbox.entry.js

@@ -0,0 +1,62 @@
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-6c0764e5.js';
+import { D as Debounce } from './debounce-06f55268.js';
+
+const dnnSearchboxCss = ":host{position:relative;display:flex;justify-content:space-between;--background-color:transparent;--color:#333;--border-size:1px;--border-color:grey;--border-active-color:black;--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);--focus-color:var(--dnn-color-primary, blue)}:host input{width:100%;border:var(--border-size) solid var(--border-color);outline:none;border-radius:var(--border-radius);padding:var(--padding);padding-right:32px;transition:all 300ms ease-in-out}:host input:focus,:host input:hover{outline:none;box-shadow:0 0 2px 2px var(--focus-color)}:host svg{position:absolute;top:0;right:0;height:100%;transform:scale(0.7);fill:var(--color);outline:var(--color);color:var(--color);transition:all 300ms ease-in-out}:host button{background:transparent;border:0;margin:0;padding:0}:host button:focus svg,:host button:hover svg{fill:var(--focus-color);outline:var(--focus-color);color:var(--focus-color)}";
+
+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;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+let DnnSearchbox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.queryChanged = createEvent(this, "queryChanged", 7);
+    /**
+     * Sets the field placeholder text.
+     */
+    this.placeholder = "";
+    /**
+     * Debounces the queryChanged by 500ms.
+     */
+    this.debounced = true;
+    /** Sets the query */
+    this.query = "";
+  }
+  fireQueryChanged() {
+    if (this.debounced) {
+      this.debouncedHandleQueryChanged();
+    }
+    else {
+      this.handleQueryChanged();
+    }
+  }
+  handleQueryChanged() {
+    this.queryChanged.emit(this.query);
+  }
+  debouncedHandleQueryChanged() {
+    this.handleQueryChanged();
+  }
+  render() {
+    return (h(Host, null, h("input", { type: "text", value: this.query, placeholder: this.placeholder, onInput: e => this.query = e.target.value }), this.query !== "" ?
+      h("button", { class: "svg clear", onClick: () => this.query = "" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("path", { d: "M12 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" })))
+      :
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))));
+  }
+  static get watchers() { return {
+    "query": ["fireQueryChanged"]
+  }; }
+};
+__decorate([
+  Debounce(500)
+], DnnSearchbox.prototype, "debouncedHandleQueryChanged", null);
+DnnSearchbox.style = dnnSearchboxCss;
+
+export { DnnSearchbox as dnn_searchbox };
+
+//# sourceMappingURL=dnn-searchbox.entry.js.map

package/dist/esm/dnn-searchbox.entry.js.map

@@ -0,0 +1 @@
+{"file":"dnn-searchbox.entry.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,QACE,EAAC,IAAI,QACH,aAAO,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;MAChB,cAAQ,KAAK,EAAC,WAAW,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,IAE9B,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAA,YAAM,CAAC,EAAC,iLAAiL,GAAE,CAAM,CACrU;;QAEX,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAA,YAAM,CAAC,EAAC,4OAA4O,GAAE,CAAM,CAElY,EACP;GACH;;;;;AAvBD;EADC,QAAQ,CAAC,GAAG,CAAC;+DAGb;;;;;","names":[],"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/esm/dnn-sort-icon.entry.js

@@ -0,0 +1,39 @@
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-6c0764e5.js';
+
+const dnnSortIconCss = ":host{display:inline-block}button{outline:none;border:none;margin:0;padding:0;background-color:transparent;outline:none;display:inline-block;line-height:1em;position:relative;top:0.25em}button svg{height:1.5em;width:auto;fill:var(--color, #888)}button.active svg{fill:var(--color-sorted, var(--dnn-color-primary, #028bff))}button:hover svg,button:focus svg{fill:var(--color-hover, var(--dnn-color-primary-light, #36a1ff))}";
+
+let DnnSortIcon = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sortChanged = createEvent(this, "sortChanged", 7);
+    /** Defines the current sort direction */
+    this.sortDirection = "none";
+  }
+  changeSort() {
+    switch (this.sortDirection) {
+      case "asc":
+        this.sortDirection = "desc";
+        break;
+      case "desc":
+        this.sortDirection = "asc";
+        break;
+      case "none":
+        this.sortDirection = "asc";
+        break;
+      default:
+        break;
+    }
+    this.sortChanged.emit(this.sortDirection);
+  }
+  render() {
+    return (h(Host, null, h("button", { class: { "active": this.sortDirection != "none" }, onClick: () => this.changeSort() }, this.sortDirection == "none" &&
+      h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16" }, h("path", { d: "M 0 7 H 12 L 6 0 Z M 0 9 H 12 L 6 16 Z" })), this.sortDirection == "asc" &&
+      h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16" }, h("path", { d: "M 0 7 H 12 L 6 0 Z" })), this.sortDirection == "desc" &&
+      h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16" }, h("path", { d: "M 0 9 H 12 L 6 16 Z" })))));
+  }
+};
+DnnSortIcon.style = dnnSortIconCss;
+
+export { DnnSortIcon as dnn_sort_icon };
+
+//# sourceMappingURL=dnn-sort-icon.entry.js.map

package/dist/esm/dnn-sort-icon.entry.js.map

@@ -0,0 +1 @@
+{"file":"dnn-sort-icon.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,waAAwa;;ICOlb,WAAW;EALxB;;;;IAOU,kBAAa,GAA4B,MAAM,CAAC;GA2CzD;EAtCS,UAAU;IAChB,QAAQ,IAAI,CAAC,aAAa;MACxB,KAAK,KAAK;QACR,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC;QAC5B,MAAM;MACR,KAAK,MAAM;QACT,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,MAAM;MACR,KAAK,MAAM;QACT,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,MAAM;MACR;QACE,MAAM;KACT;IAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GAC3C;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,cACE,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,IAAI,MAAM,EAAC,EAC/C,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAE/B,IAAI,CAAC,aAAa,IAAI,MAAM;MAC3B,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IAAC,YAAM,CAAC,EAAC,wCAAwC,GAAQ,CAAM,EAE3H,IAAI,CAAC,aAAa,IAAI,KAAK;MAC1B,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IAAC,YAAM,CAAC,EAAC,oBAAoB,GAAQ,CAAM,EAEvG,IAAI,CAAC,aAAa,IAAI,MAAM;MAC3B,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IAAC,YAAM,CAAC,EAAC,qBAAqB,GAAQ,CAAM,CAElG,CACJ,EACP;GACH;;;;;;","names":[],"sources":["./src/components/dnn-sort-icon/dnn-sort-icon.scss?tag=dnn-sort-icon&encapsulation=shadow","./src/components/dnn-sort-icon/dnn-sort-icon.tsx"],"sourcesContent":[":host {\r\n  /**\r\n  * @prop --color: Normal Color of the inactive sort icon.\r\n  * @prop --color-sorted: Color of the sorted sort icon.\r\n  * @prop --color-hover: Color of the icons when hovered.\r\n  */\r\n  display: inline-block;\r\n}\r\n\r\nbutton {\r\n  outline: none;\r\n  border: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  background-color: transparent;\r\n  outline: none;\r\n  display: inline-block;\r\n  line-height: 1em;\r\n  position: relative;\r\n  top: 0.25em;\r\n  svg{\r\n    height: 1.5em;\r\n    width: auto;\r\n    fill: var(--color, #888);\r\n  }\r\n  &.active{\r\n    svg{\r\n      fill: var(--color-sorted, var(--dnn-color-primary, rgb(2,139,255)));\r\n    }\r\n  }\r\n  &:hover, &:focus{\r\n    svg{\r\n      fill: var(--color-hover, var(--dnn-color-primary-light, #36a1ff));\r\n    }\r\n  }\r\n}","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-sort-icon',\r\n  styleUrl: 'dnn-sort-icon.scss',\r\n  shadow: true\r\n})\r\nexport class DnnSortIcon {\r\n  /** Defines the current sort direction */\r\n  @Prop() sortDirection: \"asc\" | \"desc\" | \"none\" = \"none\";\r\n\r\n  /** Emitted when the sort is changed. */\r\n  @Event() sortChanged!: EventEmitter<\"asc\"|\"desc\"|\"none\">;\r\n  \r\n  private changeSort(): void {\r\n    switch (this.sortDirection) {\r\n      case \"asc\":\r\n        this.sortDirection = \"desc\";\r\n        break;\r\n      case \"desc\":\r\n        this.sortDirection = \"asc\";\r\n        break;\r\n      case \"none\":\r\n        this.sortDirection = \"asc\";\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n\r\n    this.sortChanged.emit(this.sortDirection);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button\r\n          class={{\"active\": this.sortDirection != \"none\"}}\r\n          onClick={() => this.changeSort()}\r\n        >\r\n          {this.sortDirection == \"none\" &&\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 7 H 12 L 6 0 Z M 0 9 H 12 L 6 16 Z\"></path></svg>\r\n          }\r\n          {this.sortDirection == \"asc\" &&\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 7 H 12 L 6 0 Z\"></path></svg>\r\n          }\r\n          {this.sortDirection == \"desc\" &&\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 9 H 12 L 6 16 Z\"></path></svg>\r\n          }\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -0,0 +1,27 @@
+import { r as registerInstance, h, f as Host } from './index-6c0764e5.js';
+
+const dnnTabCss = "";
+
+let DnnTab = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.visible = false;
+  }
+  /** Shows the tab. */
+  async show() {
+    this.visible = true;
+  }
+  /** Hides the modal */
+  async hide() {
+    this.visible = false;
+  }
+  render() {
+    return (h(Host, null, this.visible &&
+      h("slot", null)));
+  }
+};
+DnnTab.style = dnnTabCss;
+
+export { DnnTab as dnn_tab };
+
+//# sourceMappingURL=dnn-tab.entry.js.map

package/dist/esm/dnn-tab.entry.js.map

@@ -0,0 +1 @@
+{"file":"dnn-tab.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,EAAE;;ICQP,MAAM;EALnB;;IASa,YAAO,GAAY,KAAK,CAAC;GAuBrC;;EAnBG,MAAM,IAAI;IACN,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;GACvB;;EAID,MAAM,IAAI;IACN,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;GACxB;EAED,MAAM;IACF,QACI,EAAC,IAAI,QACA,IAAI,CAAC,OAAO;MACT,eAAa,CAEd,EACT;GACL;;;;;;","names":[],"sources":["./src/components/dnn-tab/dnn-tab.scss?tag=dnn-tab&encapsulation=shadow","./src/components/dnn-tab/dnn-tab.tsx"],"sourcesContent":["","import { Component, Host, h, Prop, State, Method } from \"@stencil/core\";\r\n\r\n/** Represents a single tab and must be used inside a dnn-tabs element. */\r\n@Component({\r\n    tag: 'dnn-tab',\r\n    styleUrl: 'dnn-tab.scss',\r\n    shadow: true,\r\n})\r\nexport class DnnTab {\r\n    /** Defines the tab title. */\r\n    @Prop() tabTitle!: string;\r\n\r\n    @State() visible: boolean = false;\r\n\r\n    /** Shows the tab. */\r\n    @Method()\r\n    async show(){\r\n        this.visible = true;\r\n    }\r\n\r\n    /** Hides the modal */\r\n    @Method()\r\n    async hide(){\r\n        this.visible = false;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Host>\r\n                {this.visible &&\r\n                    <slot></slot>\r\n                }\r\n            </Host>\r\n        );\r\n    }\r\n}"],"version":3}

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

@@ -0,0 +1,46 @@
+import { r as registerInstance, h, f as Host } from './index-6c0764e5.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}";
+
+let DnnTabs = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tabTitles = [];
+    this.selectedTabTitle = "";
+  }
+  componentDidLoad() {
+    this.updateTitles();
+    this.showFirstTab();
+  }
+  getTabs() {
+    return this.component.shadowRoot.querySelector("slot").assignedElements();
+  }
+  updateTitles() {
+    const tabs = this.getTabs();
+    tabs.forEach(tab => this.tabTitles = [...this.tabTitles, tab.tabTitle]);
+  }
+  showFirstTab() {
+    const tab = this.getTabs()[0];
+    tab.show();
+    this.selectedTabTitle = tab.tabTitle;
+  }
+  showTab(tabTitle) {
+    const tabs = this.getTabs();
+    tabs.forEach(tab => {
+      if (tab.tabTitle == tabTitle) {
+        tab.show();
+        return;
+      }
+      tab.hide();
+    });
+    this.selectedTabTitle = tabTitle;
+  }
+  render() {
+    return (h(Host, { ref: el => this.component = el }, h("div", { class: "tabTitles" }, this.tabTitles.map(tabTitle => h("button", { class: this.selectedTabTitle == tabTitle ? "visible" : "", onClick: () => this.showTab(tabTitle) }, tabTitle))), h("div", { class: "currentTab" }, h("slot", null))));
+  }
+};
+DnnTabs.style = dnnTabsCss;
+
+export { DnnTabs as dnn_tabs };
+
+//# sourceMappingURL=dnn-tabs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"dnn-tabs.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,iuBAAiuB;;ICOvuB,OAAO;EALpB;;IAQa,cAAS,GAAa,EAAE,CAAC;IACzB,qBAAgB,GAAW,EAAE,CAAC;GAsD1C;EApDG,gBAAgB;IACZ,IAAI,CAAC,YAAY,EAAE,CAAC;IACpB,IAAI,CAAC,YAAY,EAAE,CAAC;GACvB;EAEO,OAAO;IACX,OAAO,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAyB,CAAC;GACpG;EAEO,YAAY;IAChB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;GAC3E;EAEO,YAAY;IAChB,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC9B,GAAG,CAAC,IAAI,EAAE,CAAC;IACX,IAAI,CAAC,gBAAgB,GAAG,GAAG,CAAC,QAAQ,CAAC;GACxC;EAEO,OAAO,CAAC,QAAgB;IAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,OAAO,CAAC,GAAG;MACZ,IAAI,GAAG,CAAC,QAAQ,IAAI,QAAQ,EAAC;QACzB,GAAG,CAAC,IAAI,EAAE,CAAC;QACX,OAAO;OACV;MAED,GAAG,CAAC,IAAI,EAAE,CAAC;KACd,CAAC,CAAC;IACH,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;GACpC;EAED,MAAM;IACF,QACI,EAAC,IAAI,IAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,EAAE,IAChC,WAAK,KAAK,EAAC,WAAW,IACjB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,IACxB,cACI,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAAI,QAAQ,GAAG,SAAS,GAAE,EAAE,EACxD,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAEpC,QAAQ,CACJ,CACZ,CACC,EACN,WAAK,KAAK,EAAC,YAAY,IACnB,eAAa,CACX,CACH,EACT;GACL;;;;;;","names":[],"sources":["./src/components/dnn-tabs/dnn-tabs.scss?tag=dnn-tabs&encapsulation=shadow","./src/components/dnn-tabs/dnn-tabs.tsx"],"sourcesContent":[":host {\r\n    /**\r\n    * @prop --color-background: The color of the inactive tabs.\r\n    * @prop --color-text: The color of the text for inactive tabs.\r\n    * @prop --color-visible: The color of the active tab.\r\n    * @prop --color-visible-text: The color of the text for the active tab.\r\n    * @prop --color-focus: outline color when hovering or pre-selecting a tab.\r\n    */\r\n    display: block;\r\n    --color-background: var(--dnn-color-secondary-dark, lightgray);\r\n    --color-text: var(--dnn-color-secondary-contrast, #333);\r\n    --color-visible: var(--dnn-color-primary, #3792ED);\r\n    --color-visible-text: var(--dnn-color-primary-contrast, #FFF);\r\n    --color-focus: var(--dnn-color-primary, #3792ed);\r\n  }\r\n\r\n  .tabTitles{\r\n      display: flex;\r\n      background-color: var(--color-background);\r\n      color: var(--color-text);\r\n      button{\r\n          padding: 0.5rem 1rem;\r\n          border: 0;\r\n          margin: 0;\r\n          background-color: transparent;\r\n          &.visible{\r\n              background-color: var(--color-visible);\r\n              color: var(--color-bisible-text);\r\n          }\r\n          &:focus, &:hover{\r\n            outline: none;\r\n            box-shadow: 0 0 2px 2px var(--color-focus);\r\n          }\r\n      }\r\n  }\r\n\r\n  .currentTab{\r\n      border: 1px solid var(--color-background);\r\n      padding: 1rem;\r\n  }","import { Component, Host, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: 'dnn-tabs',\r\n    styleUrl: 'dnn-tabs.scss',\r\n    shadow: true,\r\n})\r\nexport class DnnTabs {\r\n    private component: HTMLElement;\r\n\r\n    @State() tabTitles: string[] = [];\r\n    @State() selectedTabTitle: string = \"\";\r\n\r\n    componentDidLoad(){\r\n        this.updateTitles();\r\n        this.showFirstTab();\r\n    }\r\n\r\n    private getTabs() {\r\n        return this.component.shadowRoot.querySelector(\"slot\").assignedElements() as HTMLDnnTabElement[];\r\n    }\r\n\r\n    private updateTitles(){\r\n        const tabs = this.getTabs();\r\n        tabs.forEach(tab => this.tabTitles = [...this.tabTitles, tab.tabTitle]);\r\n    }\r\n\r\n    private showFirstTab(){\r\n        const tab = this.getTabs()[0];\r\n        tab.show();\r\n        this.selectedTabTitle = tab.tabTitle;\r\n    }\r\n\r\n    private showTab(tabTitle: string) {\r\n        const tabs = this.getTabs();\r\n        tabs.forEach(tab => {\r\n            if (tab.tabTitle == tabTitle){\r\n                tab.show();\r\n                return;\r\n            }\r\n\r\n            tab.hide();\r\n        });\r\n        this.selectedTabTitle = tabTitle;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Host ref={el => this.component = el}>\r\n                <div class=\"tabTitles\">\r\n                    {this.tabTitles.map(tabTitle =>\r\n                        <button\r\n                            class={this.selectedTabTitle == tabTitle ? \"visible\": \"\"}\r\n                            onClick={() => this.showTab(tabTitle)}\r\n                        >\r\n                            {tabTitle}\r\n                        </button>\r\n                    )}\r\n                </div>\r\n                <div class=\"currentTab\">\r\n                    <slot></slot>\r\n                </div>\r\n            </Host>\r\n        );\r\n    }\r\n}"],"version":3}

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

@@ -0,0 +1,33 @@
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-6c0764e5.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}";
+
+let DnnToggle = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.checkChanged = createEvent(this, "checkChanged", 7);
+    /** If 'true' the toggle is checked (on). */
+    this.checked = false;
+    /** If 'true' the toggle is not be interacted with. */
+    this.disabled = false;
+  }
+  checkedChanged(isChecked) {
+    this.checkChanged.emit({ checked: isChecked });
+  }
+  render() {
+    return (h(Host, null, h("button", { disabled: this.disabled, class: { 'checked': this.checked }, onClick: () => {
+        if (!this.disabled) {
+          this.checked = !this.checked;
+        }
+      } }, h("div", { class: "handle" }))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "checked": ["checkedChanged"]
+  }; }
+};
+DnnToggle.style = dnnToggleCss;
+
+export { DnnToggle as dnn_toggle };
+
+//# sourceMappingURL=dnn-toggle.entry.js.map

package/dist/esm/dnn-toggle.entry.js.map

@@ -0,0 +1 @@
+{"file":"dnn-toggle.entry.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,QACI,EAAC,IAAI,QACD,cAAQ,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,IAED,WAAK,KAAK,EAAC,QAAQ,GAAO,CACrB,CACN,EACT;GACL;;;;;;;;;;","names":[],"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/esm/dnn-treeview-item.entry.js

@@ -0,0 +1,44 @@
+import { r as registerInstance, h, f as Host, g as getElement } from './index-6c0764e5.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}";
+
+let DnnTreeviewItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** Defines if the current node is expanded  */
+    this.expanded = false;
+    this.hasChildren = false;
+  }
+  componentDidLoad() {
+    const children = this.childrenElement.children[0];
+    const count = children.assignedElements().length;
+    if (count > 0) {
+      this.hasChildren = true;
+    }
+    if (this.expanded) {
+      this.expander.classList.add("expanded");
+      this.collapsible.expanded = false;
+      setTimeout(() => {
+        this.collapsible.expanded = true;
+      }, 300);
+    }
+  }
+  toggleCollapse() {
+    this.expanded = !this.expanded;
+    if (this.expanded) {
+      this.expander.classList.add("expanded");
+      return;
+    }
+    this.expander.classList.remove("expanded");
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "expander", ref: el => this.expander = el }, this.hasChildren &&
+      h("button", { onClick: () => this.toggleCollapse() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M10 17l5-5-5-5v10z" }), h("path", { d: "M0 24V0h24v24H0z", fill: "none" })))), h("div", { class: "item" }, h("div", { class: "item-slot" }, h("slot", null)), h("dnn-collapsible", { ref: el => this.collapsible = el, expanded: this.expanded }, h("div", { ref: el => this.childrenElement = el }, h("slot", { name: "children" }))))));
+  }
+  get el() { return getElement(this); }
+};
+DnnTreeviewItem.style = dnnTreeviewItemCss;
+
+export { DnnTreeviewItem as dnn_treeview_item };
+
+//# sourceMappingURL=dnn-treeview-item.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"dnn-treeview-item.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,2oBAA2oB;;ICOzpB,eAAe;EAL5B;;;IAYyB,aAAQ,GAAY,KAAK,CAAC;IAExC,gBAAW,GAAY,KAAK,CAAC;GAsDvC;EAjDC,gBAAgB;IACd,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAoB,CAAC;IACrE,MAAM,KAAK,GAAG,QAAQ,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAA;IAChD,IAAI,KAAK,GAAG,CAAC,EAAC;MACZ,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;KACzB;IACD,IAAI,IAAI,CAAC,QAAQ,EAAC;MAChB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;MACxC,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,KAAK,CAAC;MAClC,UAAU,CAAC;QACT,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC;OAClC,EAAE,GAAG,CAAC,CAAC;KACT;GACF;EAEO,cAAc;IACpB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,IAAI,CAAC,QAAQ,EAAC;MAChB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;MACxC,OAAO;KACR;IAED,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;GAC5C;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,IAChD,IAAI,CAAC,WAAW;MACf,cACE,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IACpC,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,oBAAoB,GAAE,EAAA,YAAM,CAAC,EAAC,kBAAkB,EAAC,IAAI,EAAC,MAAM,GAAE,CAAM,CAC3K,CAEP,EACN,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,WAAW,IACpB,eAAa,CACT,EACN,uBAAiB,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxE,WAAK,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,eAAe,GAAG,EAAE,IACvC,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACU,CACZ,CACH,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/dnn-treeview-item/dnn-treeview-item.scss?tag=dnn-treeview-item&encapsulation=shadow","./src/components/dnn-treeview-item/dnn-treeview-item.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  overflow: hidden;\r\n}\r\n.expander{\r\n  width: 24px;\r\n  height: 24px;\r\n  button{\r\n    transition: all 150ms ease-in-out;\r\n    background-color:transparent;\r\n    border: none;\r\n    padding: 0;\r\n    margin: 0;\r\n    outline: none;\r\n    height: 1em;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    cursor: pointer;\r\n    position: relative;\r\n    top: 2px;\r\n    svg{\r\n      :first-child{\r\n        transition: all 150ms ease-in-out;\r\n        fill: white;\r\n        stroke: black\r\n      }\r\n    }\r\n  }\r\n  &.expanded{\r\n    button{\r\n      transform: rotate(45deg);\r\n      svg{\r\n        :first-child{\r\n          fill: black;\r\n          stroke: black;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\ndiv.item{\r\n  .item-slot{\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.25em;\r\n  }\r\n  div.children{\r\n    overflow: hidden;\r\n    height:0;\r\n    transition: all 150ms ease-in-out;\r\n  }\r\n}","import { Component, Host, h, Prop, State, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-treeview-item',\r\n  styleUrl: 'dnn-treeview-item.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnTreeviewItem {\r\n  \r\n  private expander!: HTMLDivElement;\r\n\r\n  @Element() el!: HTMLDnnTreeviewItemElement;\r\n  \r\n  /** Defines if the current node is expanded  */\r\n  @Prop({mutable: true}) expanded: boolean = false;\r\n\r\n  @State() hasChildren: boolean = false;\r\n  \r\n  private childrenElement!: HTMLDivElement;\r\n  private collapsible!: HTMLDnnCollapsibleElement;\r\n\r\n  componentDidLoad() {\r\n    const children = this.childrenElement.children[0] as HTMLSlotElement;\r\n    const count = children.assignedElements().length\r\n    if (count > 0){\r\n      this.hasChildren = true;\r\n    }\r\n    if (this.expanded){\r\n      this.expander.classList.add(\"expanded\");\r\n      this.collapsible.expanded = false;\r\n      setTimeout(() => {\r\n        this.collapsible.expanded = true;\r\n      }, 300);\r\n    }\r\n  }\r\n\r\n  private toggleCollapse(): void {\r\n    this.expanded = !this.expanded;\r\n    if (this.expanded){\r\n      this.expander.classList.add(\"expanded\");\r\n      return;\r\n    }\r\n\r\n    this.expander.classList.remove(\"expanded\");\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"expander\" ref={el => this.expander = el}>\r\n          {this.hasChildren &&\r\n            <button\r\n              onClick={() => this.toggleCollapse()}>\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M10 17l5-5-5-5v10z\"/><path d=\"M0 24V0h24v24H0z\" fill=\"none\"/></svg>\r\n            </button>\r\n          }\r\n        </div>\r\n        <div class=\"item\">\r\n          <div class=\"item-slot\">\r\n            <slot></slot>\r\n          </div>\r\n          <dnn-collapsible ref={el => this.collapsible = el} expanded={this.expanded}>\r\n            <div ref={el => this.childrenElement = el}>\r\n              <slot name=\"children\"></slot>\r\n            </div>\r\n          </dnn-collapsible>\r\n          </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\nexport interface ExpandedToggledEvent{\r\n  state: \"expanded\" | \"collapsed\";\r\n  height: number;\r\n}"],"version":3}