@dnncommunity/dnn-elements 0.14.1 → 0.15.0-beta.3

package/dist/dnn/p-755d047d.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/dnn-button/dnn-button.scss?tag=dnn-button&encapsulation=shadow","src/components/dnn-button/dnn-button.tsx","src/components/dnn-checkbox/dnn-checkbox.scss?tag=dnn-checkbox&encapsulation=shadow","src/components/dnn-checkbox/dnn-checkbox.tsx","src/components/dnn-chevron/dnn-chevron.scss?tag=dnn-chevron&encapsulation=shadow","src/components/dnn-chevron/dnn-chevron.tsx","src/components/dnn-collapsible/dnn-collapsible.scss?tag=dnn-collapsible&encapsulation=shadow","src/components/dnn-collapsible/dnn-collapsible.tsx","src/utilities/colorInfo.ts","src/components/dnn-color-picker/dnn-color-picker.scss?tag=dnn-color-picker&encapsulation=shadow","src/components/dnn-color-picker/dnn-color-picker.tsx","src/components/dnn-dropzone/dnn-dropzone.scss?tag=dnn-dropzone&encapsulation=shadow","src/components/dnn-dropzone/dnn-dropzone.tsx","src/components/dnn-image-cropper/CornerType.ts","src/utilities/mouseUtilities.ts","src/components/dnn-image-cropper/dnn-image-cropper.scss?tag=dnn-image-cropper&encapsulation=shadow","src/components/dnn-image-cropper/dnn-image-cropper.tsx","src/components/dnn-modal/dnn-modal.scss?tag=dnn-modal&encapsulation=shadow","src/components/dnn-modal/dnn-modal.tsx","src/components/dnn-searchbox/dnn-searchbox.scss?tag=dnn-searchbox&encapsulation=shadow","src/components/dnn-searchbox/dnn-searchbox.tsx","src/components/dnn-sort-icon/dnn-sort-icon.scss?tag=dnn-sort-icon&encapsulation=shadow","src/components/dnn-sort-icon/dnn-sort-icon.tsx","src/components/dnn-tab/dnn-tab.scss?tag=dnn-tab&encapsulation=shadow","src/components/dnn-tab/dnn-tab.tsx","src/components/dnn-tabs/dnn-tabs.scss?tag=dnn-tabs&encapsulation=shadow","src/components/dnn-tabs/dnn-tabs.tsx","src/components/dnn-toggle/dnn-toggle.scss?tag=dnn-toggle&encapsulation=shadow","src/components/dnn-toggle/dnn-toggle.tsx","src/components/dnn-treeview-item/dnn-treeview-item.scss?tag=dnn-treeview-item&encapsulation=shadow","src/components/dnn-treeview-item/dnn-treeview-item.tsx","src/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.scss?tag=dnn-vertical-overflow-menu&encapsulation=shadow","src/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.tsx","src/components/dnn-vertical-splitview/dnn-vertical-splitview.scss?tag=dnn-vertical-splitview&encapsulation=shadow","src/components/dnn-vertical-splitview/dnn-vertical-splitview.tsx"],"names":["dnnButtonCss","DnnButton","exports","class_1","hostRef","this","type","reversed","size","confirm","confirmYesText","confirmNoText","confirmMessage","disabled","modalVisible","prototype","componentDidLoad","el","classList","add","modal","shadowRoot","querySelector","handleConfirm","hide","confirmed","emit","handleCancel","canceled","handleClick","show","render","_this","h","Host","style","pointer-events","class","onClick","showCloseButton","backdropDismiss","display","justifyContent","margin","dnnCheckboxCss","DnnCheckbox","class_2","checked","useIntermediate","changeState","emitEvents","button","remove","undefined","checkedchange","ref","xmlns","height","viewBox","width","fill","d","enable-background","htmlFor","id","dnnChevronCss","DnnChevron","class_3","expandText","collapseText","expanded","handleExpandedChanged","newValue","changed","aria-label","dnnCollapsibleCss","DnnCollapsible","class_4","transitionDuration","handleHeightChanged","requestAnimationFrame","updateSize","container","maxHeight","scrollHeight","setTimeout","handledExpandedChanged","dnnCollapsibleHeightChanged","ColorInfo","_hue","_saturation","_lightness","Object","defineProperty","value","getRGB","red","setHSL","green","blue","r","getHex","g","b","parseInt","substr","brightness","chroma","Math","abs","saturation","quadrant","offset","bias","round","min","max","diff","s","l","hex","toString","length","dnnColorPickerCss","DnnColorPicker","class_5","color","colorBoxHeight","rgbDisplay","hslDisplay","hexDisplay","handleSaturationLightnessMouseDown","e","preventDefault","handleDragLightnessSaturation","window","addEventListener","handleSaturationLightnessMouseUp","rect","saturationLightnessBox","getBoundingClientRect","x","clientX","left","y","clientY","top","newColor","hue","currentColor","lightness","removeEventListener","handleHueMouseDown","handleDragHue","handleHueMouseUp","hueRange","handleComponentValueChange","channel","target","isNaN","handleHSLChange","component","h_1","handleSaturationLightnessKeyDown","shiftKey","key","handleHueKeyDown","colorChangedHandler","colorChanged","handeCurrentColorChanged","componentWillLoad","handleHexChange","setProperty","getDoublet","getContrast","contrastColor","valueString","toUpperCase","match","switchColorMode","element","backgroundColor","onMouseDown","bind","role","aria-valuemin","aria-valuemax","aria-valuetext","bottom","onKeyDown","boxShadow","aria-valuenow","step","onChange","__decorate","Debounce","dnnDropzoneCss","DnnDropzone","class_6","resx","dragAndDropFile","capture","or","takePicture","uploadFile","allowCameraMode","captureQuality","canTakeSnapshots","takingPicture","handleDragOver","event","stopPropagation","dataTransfer","dropEffect","dropzone","handleDrop","dropEvent","files","hasInvalidExtensions","fileList","getFilesFromFileList","filesSelected","checkIfBrowserCanTakeSnapshots","then","result","allowedExtensions","extensionsWithDots","map","extensionsList","join","fileInput","accept","Promise","resolve","mediaDevices","navigator","enumerateDevices","devices","some","device","kind","index","file","push","handleUploadButton","hasInvalid","fileIndex","regex","fileExtension","exec","name","includes","takeSnapshot","getUserMedia","video","audio","stream","videoPreview","srcObject","play","videoSettings","getVideoTracks","getSettings","catch","error","alert","applySnapshot","canvas","document","createElement","context","getContext","drawImage","toBlob","blob","File","onDragOver","onDrop","onDragLeave","_a","_b","_c","_d","cx","cy","_e","_f","CornerType","getMovementFromEvent","previousTouch","movementX","movementY","MouseEvent","TouchEvent","touch","touches","pageX","pageY","dnnImageCropperCss","DnnImageCropper","class_7","imageTooSmall","modalCloseText","quality","preventUndersized","handleCropMouseDown","className","handleImageCropFinished","handleCropDrag","handleNwMouseMove","handleNeMouseMove","handleSeMouseMove","handleSwMouseMove","_ev","emitImage","handleCornerDrag","nw","ne","se","sw","corner","isMouseStillInTarget","_g","getCornerLeftTop","newWidth","newHeight","orientation","wantedRatio","cropRect","crop","imageRect","image","_h","topOffset","offsetTop","leftOffset","offsetLeft","zoomRatio","naturalWidth","ev","newLeft","newTop","setView","newView","views","host","querySelectorAll","forEach","v","noPictureView","hasPictureView","view","initCrop","imageRatio","wantedHeight","wantedWidth","setImage","src","toDataURL","handleNewFile","split","reader","FileReader","onload","readerLoadEvent","img","Image","imageTooSmallModal","ctx","readAsDataURL","naturalHeight","dataUrl","generateCroppedImage","imageCropChanged","desiredWidth","desiredHeight","clearRect","inside","mouseX","mouseY","corners","cornerRect","onTouchStart","onFilesSelected","detail","close-text","replace","dnnModalCss","DnnModal","class_8","closeText","visible","handleDismiss","dismissed","handleBackdropClick","dnnSearchboxCss","DnnSearchbox","class_9","placeholder","debounced","query","fireQueryChanged","debouncedHandleQueryChanged","handleQueryChanged","queryChanged","onInput","dnnSortIconCss","DnnSortIcon","class_10","sortDirection","changeSort","sortChanged","active","dnnTabCss","DnnTab","class_11","dnnTabsCss","DnnTabs","class_12","tabTitles","selectedTabTitle","updateTitles","showFirstTab","getTabs","assignedElements","tabs","tab","__spreadArray","tabTitle","showTab","dnnToggleCss","DnnToggle","class_13","checkedChanged","isChecked","checkChanged","dnnTreeviewItemCss","DnnTreeviewItem","class_14","hasChildren","watchExpanded","expander","collapsible","child","childElement","children","count","toggleCollapse","userExpanded","userCollapsed","dnnVerticalOverflowMenuCss","DnnVerticalOverflowMenu","class_15","showDropdownButton","showDropdownMenu","previousMenuWidth","componentDidRender","moveItemsToDropDownIfNecessery","resizeObserver","ResizeObserver","entries","_i","entries_1","entry","contentRect","moveItemsToMenuIfPossible","observe","menuItems","Array","from","menu","availableWidth","neededWidth","parseFloat","getComputedStyle","fontSize","item","getFullWidth","lastItem","dropdown","slot","hasChildNodes","firstItem","styles","marginLeft","marginRight","paddingLeft","paddingRight","toggleOverflowMenu","contentHeight_1","items","emHeight","additionalHeight","dismissMenu_1","buttonRect","right","dnnVerticalSplitviewCss","DnnVerticalSplitview","class_16","splitterWidth","splitWidthPercentage","leftWidth","rightWidth","setSplitWidthPercentage","panes","pane","splitter","fullWidth","getSplitWidthPercentage","widthChanged","handleMouseDown","handleDrag","handleDragFinished","newPercentage","handleKeyDown","minWidth"],"mappings":"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","sourcesContent":[":host {\r\n  --background-color: transparent;\r\n  --color: #333;\r\n  --border-size: 1px;\r\n  --border-color: var(--backround-color);\r\n  --border-radius: var(--dnn-controls-radius, 5px);\r\n  --padding: var(--dnn-controls-padding, 5px);\r\n  display: inline-block;\r\n  width: auto;\r\n}\r\n\r\n:host(.disabled){\r\n  pointer-events: none;\r\n}\r\n\r\n:host(.primary){\r\n  --background-color: var(--dnn-color-primary, blue);\r\n  --color: var(--dnn-color-primary-contrast, white);\r\n  --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.primary.reversed){\r\n  --background-color: var(--dnn-color-primary-contrast, white);\r\n  --color: var(--dnn-color-primary, blue);\r\n  --border-color: var(--dnn-color-primary, blue);\r\n  --focus-color: var(--color);\r\n}\r\n\r\n:host(.secondary){\r\n  --background-color: var(--dnn-color-secondary, green);\r\n  --color: var(--dnn-color-secondary-contrast, white);\r\n  --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.secondary.reversed){\r\n  --background-color: var(--dnn-color-secondary-contrast, white);\r\n  --color: var(--dnn-color-secondary, blue);\r\n  --border-color: var(--dnn-color-secondary, blue);\r\n  --focus-color: var(--color);\r\n}\r\n\r\n:host(.tertiary){\r\n  --background-color: var(--dnn-color-tertiary, yellow);\r\n  --color: var(--dnn-color-tertiary-contrast, black);\r\n  --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.tertiary.reversed){\r\n  --background-color: var(--dnn-color-tertiary-contrast, white);\r\n  --color: var(--dnn-color-tertiary, blue);\r\n  --border-color: var(--dnn-color-tertiary, blue);\r\n  --focus-color: var(--color);\r\n}\r\n\r\n:host(.hydrated){\r\n  button{\r\n    border: var(--border-size) solid var(--border-color);\r\n    border-radius: var(--border-radius);\r\n    padding: var(--padding) calc(var(--padding) * 2);\r\n    background-color: transparent;\r\n    background-color: var(--background-color);\r\n    color: var(--color);\r\n    outline: none;\r\n    &:focus, &:hover{\r\n      box-shadow: 0 0 2px 2px var(--focus-color);\r\n    }\r\n  }\r\n}\r\n\r\n:host(:disabled, [disabled]){\r\n  button{\r\n    pointer-events: none;\r\n    opacity: 0.5;\r\n  }\r\n}\r\n\r\n:host(.small){\r\n  button{\r\n    padding: calc(var(--padding) / 2) var(--padding);\r\n    font-size: 0.7em;\r\n  }\r\n}\r\n\r\n:host(.large){\r\n  button{\r\n    padding: calc(var(--padding) * 1.5) calc(var(--padding) * 3);\r\n    font-size: 1.2em;\r\n  }\r\n}\r\n\r\nbutton{\r\n  height: 100%;\r\n  width: 100%;\r\n  cursor: pointer;\r\n}","import { Component, Element, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\r\n\r\n/**\r\n * @slot Content of the button\r\n */\r\n@Component({\r\n  tag: 'dnn-button',\r\n  styleUrl: 'dnn-button.scss',\r\n  shadow: true\r\n})\r\nexport class DnnButton {\r\n\r\n  /**\r\n   * Optional button style,\r\n   * can be either primary, secondary or tertiary and defaults to primary if not specified\r\n   */\r\n  @Prop() type: 'primary' | 'secondary' | 'tertiary' = 'primary';\r\n\r\n  /**\r\n   * Optionally reverses the button style.\r\n   */\r\n  @Prop() reversed: boolean = false;\r\n\r\n  /**\r\n   * Optionally sets the button size, small normal or large, defaults to normal\r\n   */\r\n  @Prop() size?: 'small' | 'normal' | 'large' = 'normal';\r\n\r\n  /**\r\n   * Optionally add a confirmation dialog before firing the action.\r\n   */\r\n  @Prop() confirm?: boolean = false;\r\n\r\n  /**\r\n   * The text of the yes button for confirmation.\r\n   */\r\n  @Prop() confirmYesText?: string = \"Yes\";\r\n\r\n  /**\r\n   * The text of the no button for confirmation.\r\n   */\r\n  @Prop() confirmNoText?: string = \"No\";\r\n\r\n  /**\r\n   * The text of the confirmation message;\r\n   */\r\n  @Prop() confirmMessage?: string = \"Are you sure ?\";\r\n  \r\n  /**\r\n   * Disables the button\r\n   */\r\n  @Prop() disabled: boolean = false;\r\n\r\n  @State() modalVisible: boolean = false;\r\n\r\n  @Element() el!: HTMLDnnButtonElement;\r\n\r\n  private modal!: HTMLDnnModalElement;\r\n\r\n  /** \r\n   * Fires when confirm is true and the user confirms the action.\r\n  */\r\n  @Event({\r\n    eventName: 'confirmed',\r\n    bubbles: false,\r\n    cancelable: true,\r\n    composed: true\r\n  }) confirmed: EventEmitter;\r\n\r\n  /**\r\n   * Fires when confirm is true and the user cancels the action.\r\n   */\r\n  @Event({bubbles: false}) canceled: EventEmitter;\r\n\r\n  componentDidLoad(){\r\n    this.el.classList.add(this.type);\r\n    \r\n    if (this.reversed){\r\n      this.el.classList.add('reversed');\r\n    }\r\n\r\n    if (this.size !== 'normal'){\r\n      this.el.classList.add(this.size);\r\n    }\r\n\r\n    this.modal = this.el.shadowRoot.querySelector('dnn-modal');\r\n  }\r\n\r\n  private handleConfirm(){\r\n    this.modal.hide();\r\n    this.modalVisible = false;\r\n    this.confirmed.emit();\r\n  }\r\n\r\n  private handleCancel(){\r\n    this.modal.hide();\r\n    this.modalVisible = false;\r\n    this.canceled.emit();\r\n  }\r\n  \r\n  private handleClick(): void {\r\n    if (this.confirm && !this.modalVisible){\r\n      this.modal.show();\r\n      this.modalVisible = true;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host disabled={this.disabled} style={{'pointer-events': this.disabled ? 'none' : 'all'}}>\r\n        <button class=\"button\" onClick={() => this.handleClick()} disabled={this.disabled}>\r\n          <slot></slot>\r\n        </button>\r\n        {this.confirm &&\r\n            <dnn-modal showCloseButton={false} backdropDismiss={false}>\r\n              <p>{this.confirmMessage}</p>\r\n              <div style={\r\n                {\r\n                  display: 'flex',\r\n                  justifyContent: 'flex-end'\r\n                }\r\n              }>\r\n                <dnn-button type='primary' style={{margin: '5px'}} onClick={() => this.handleConfirm()}>{this.confirmYesText}</dnn-button>\r\n                <dnn-button type='secondary' style={{margin: '5px'}} onClick={() => this.handleCancel()}>{this.confirmNoText}</dnn-button>\r\n              </div>\r\n            </dnn-modal>\r\n          }\r\n      </Host>\r\n    );\r\n  }\r\n  \r\n\r\n}\r\n",":host {\r\n    /**\r\n    * @prop --focus-color: The color to outline the checkbox when hovered or focused, default to the dnn primary color.\r\n    */\r\n  --focus-color: var(--dnn-color-primary, #3792ED);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.25rem;\r\n  margin: 3px;\r\n}\r\nbutton{\r\n  background-color: transparent;\r\n  border: 0;\r\n  padding: 0;\r\n  margin: 0;\r\n  outline: none;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  svg.undefined{\r\n    opacity: 0.45;\r\n  }\r\n  &:focus{\r\n    box-shadow: 0 0 2px 2px var(--focus-color);\r\n  }\r\n}","import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-checkbox',\r\n  styleUrl: 'dnn-checkbox.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnCheckbox {\r\n  @Element() el: HTMLDnnCheckboxElement;\r\n\r\n  /** Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) */\r\n  @Prop({mutable: true}) checked: boolean | undefined = false;\r\n\r\n  /** Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) */\r\n  @Prop() useIntermediate: boolean = false;\r\n\r\n  /** The value for this checkbox (not to be confused with its checked state). */\r\n  @Prop() value: string;\r\n\r\n  /** Fires up when the checkbox checked property changes. */\r\n  @Event() checkedchange: EventEmitter<boolean | undefined>;\r\n  \r\n  private button: HTMLButtonElement;\r\n\r\n  private changeState(): void {\r\n    if (!this.useIntermediate){\r\n      this.checked = !this.checked;\r\n      this.emitEvents();\r\n      return;\r\n    }\r\n    if (this.checked === true){\r\n      this.checked = false;\r\n      this.button.classList.remove(\"undefined\");\r\n      this.emitEvents();\r\n      return;\r\n    }\r\n    if (this.checked === undefined){\r\n      this.checked = true;\r\n      this.button.classList.remove(\"undefined\");\r\n      this.emitEvents();\r\n      return;\r\n    }\r\n    if (this.checked === false){\r\n      this.checked = undefined;\r\n      this.button.classList.add(\"undefined\");\r\n      this.emitEvents();\r\n      return;\r\n    }\r\n  }\r\n\r\n  private emitEvents() {\r\n    this.checkedchange.emit(this.checked);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button class=\"icon\" onClick={() => this.changeState()} ref={el => this.button = el}>\r\n          {this.checked === false &&\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\"/></svg>\r\n          }\r\n          {this.checked === true &&\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/></svg>\r\n          }\r\n          {this.checked === undefined &&\r\n            <svg class=\"undefined\" xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><g><rect fill=\"none\" height=\"24\" width=\"24\"/></g><g><g><g><path d=\"M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z\"/></g></g></g></svg>\r\n          }\r\n        </button>\r\n        <label htmlFor={this.el.id} onClick={() => this.changeState()}><slot></slot></label>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n",":host {\r\n  display: inline-block;\r\n}\r\nbutton{\r\n  border: none;\r\n  padding: 0px;\r\n  margin: 0px;\r\n  min-width: 15px;\r\n  min-height: 15px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  background-color: transparent;\r\n  outline: none;\r\n}\r\nsvg{\r\n  height:2em;\r\n  width:2em;\r\n  transition: all 300ms ease-in-out;\r\n}\r\n\r\n// FOCUS\r\nbutton:focus, button:hover{\r\n  svg{\r\n    color: var(--dnn-color-primary);\r\n  }\r\n}\r\n\r\n// EXPANDED\r\n:host([expanded]){\r\n  svg{\r\n    transform: rotate(90deg);\r\n  }\r\n}","import { Component, Host, h, Prop, Event } from '@stencil/core';\r\nimport { EventEmitter } from '@stencil/core';\r\nimport { Watch } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-chevron',\r\n  styleUrl: 'dnn-chevron.scss',\r\n  shadow: true\r\n})\r\nexport class DnnChevron {\r\n\r\n  /** Expand text for screen readers */\r\n  @Prop() expandText?: string = \"expand\";\r\n\r\n  /** Collapse text for screen readers */\r\n  @Prop() collapseText?: string = \"collapse\";\r\n\r\n  /** Is the chevron expanded */\r\n  @Prop({mutable: true, reflect: true}) expanded?: boolean = false;\r\n\r\n  /** Fires up when the expanded status changes */\r\n  @Event() changed: EventEmitter;\r\n\r\n  @Watch('expanded')\r\n  handleExpandedChanged(newValue: boolean) {\r\n    this.changed.emit(newValue);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button aria-label={this.expanded ? this.collapseText : this.expandText}\r\n          onClick={() => this.expanded = !this.expanded}\r\n        >\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"/></svg>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n",":host {\r\n  display: block;\r\n}\r\n#container{\r\n  max-height:0;\r\n  overflow: hidden;\r\n  transition: max-height 300ms ease-in-out;\r\n}","import { Component, Host, h, Prop, Element, Event, EventEmitter, Watch, Listen, Method } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: \"dnn-collapsible\",\r\n  styleUrl: \"dnn-collapsible.scss\",\r\n  shadow: true\r\n})\r\nexport class DnnCollapsible {\r\n\r\n  @Element() el: HTMLDnnCollapsibleElement;\r\n\r\n  /** Defines if the panel is expanded or not. */\r\n  @Prop({reflect: true}) expanded: boolean = false;\r\n\r\n  /** Defines the transition time in ms, defaults to 100ms */\r\n  @Prop() transitionDuration?: number = 150;\r\n\r\n  /** Fires whenever the collapsible height has changed */\r\n  @Event({bubbles: true, composed: true}) dnnCollapsibleHeightChanged: EventEmitter<void>;\r\n\r\n  @Listen(\"dnnCollapsibleHeightChanged\")\r\n  handleHeightChanged(){\r\n    requestAnimationFrame(() => {\r\n      this.updateSize();\r\n    })\r\n  }\r\n\r\n  /**\r\n   * Updates the component height, use to update after a slot content changes.\r\n   */\r\n  @Method()\r\n  async updateSize() {\r\n    if (this.expanded){\r\n        requestAnimationFrame(() => {\r\n          this.container.style.maxHeight = `${this.container.scrollHeight}px`;\r\n        });\r\n        setTimeout(() => {\r\n          this.container.style.maxHeight = \"none\";\r\n        }, this.transitionDuration);\r\n    }\r\n  }\r\n  \r\n  @Watch(\"expanded\")\r\n  handledExpandedChanged(expanded: boolean){\r\n    if (expanded){\r\n      this.updateSize();\r\n    }\r\n    else{\r\n      requestAnimationFrame(() => {\r\n        this.container.style.maxHeight = `${this.container.scrollHeight}px`;\r\n        requestAnimationFrame(() => {\r\n          this.container.style.maxHeight = \"0px\";\r\n        });\r\n      });\r\n    }\r\n    setTimeout(() => {\r\n      requestAnimationFrame(() => {\r\n        this.dnnCollapsibleHeightChanged.emit();\r\n      });\r\n    }, this.transitionDuration);\r\n  }\r\n  \r\n  private container: HTMLDivElement;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div id=\"container\" class={this.expanded && \"expanded\"} ref={el => this.container = el}>\r\n            <slot></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n","/** Color utility class with hsl and rgb converters\r\n * based on math at https://en.wikipedia.org/wiki/HSL_and_HSV\r\n * @copyright Copyright (c) .NET Foundation. All rights reserved.\r\n * @license MIT \r\n */\r\n\r\nexport class ColorInfo{\r\n\r\n    private _hue: number = 0;\r\n    /** gets the color hue\r\n     * @returns a number between 0 and 359, could contain decimals\r\n     */\r\n    get hue() { return this._hue; }\r\n    set hue(value: number){\r\n        if (value < 0) { value = 0; }\r\n        if (value > 359) { value = 359; }\r\n        this._hue = value;\r\n    }\r\n\r\n    private _saturation: number = 0;\r\n    /** gets the color saturation\r\n     * @returns a number between 0 and 1, could contain decimals\r\n    */\r\n    get saturation() { return this._saturation; }\r\n    set saturation(value: number) {\r\n        if (value < 0) { value = 0; }\r\n        if (value > 1) { value = 1; }\r\n        this._saturation = value;\r\n    }\r\n\r\n    private _lightness: number = 0;\r\n    /** gets the color lightness\r\n     * @returns a number between 0 and 1, could contain decimals\r\n     */\r\n    get lightness() { return this._lightness; }\r\n    set lightness(value: number) {\r\n        if (value < 0) { value = 0; }\r\n        if (value > 1) { value = 1; }\r\n        this._lightness = value;\r\n    }\r\n\r\n    /** gets or sets the red component \r\n     * @returns an integer between 0 and 255\r\n    */\r\n    get red() {\r\n        return this.getRGB().red;\r\n    }\r\n    set red(value) {\r\n        this.setHSL(value, this.green, this.blue);\r\n    }\r\n\r\n    /** gets or sets the green component\r\n     * @returns an integer between 0 and 255\r\n     */\r\n    get green() {\r\n        return this.getRGB().green;\r\n    }\r\n    set green(value: number) {\r\n        this.setHSL(this.red, value, this.blue);\r\n    }\r\n\r\n    /** gets or sets the blue component\r\n     * @returns an integer between 0 and 255\r\n     */\r\n    get blue() {\r\n        return this.getRGB().blue;\r\n    }\r\n    set blue(value: number) {\r\n        this.setHSL(this.red, this.green, value);\r\n    }\r\n\r\n    /** gets or sets the hex color value, expresses as 6 hexadecimal characters.\r\n     * @returns hex representation of the color\r\n     */\r\n    get hex() {\r\n        var r = this.getHex(this.red);\r\n        var g = this.getHex(this.green);\r\n        var b = this.getHex(this.blue);\r\n        return r + g + b;\r\n    }\r\n    set hex(value: string){\r\n        this.red = parseInt(value.substr(0,2));\r\n        this.green = parseInt(value.substr(2,2));\r\n        this.blue = parseInt(value.substr(4,2));\r\n    }\r\n\r\n    /** gets white or black color that is a good oposite to the current color\r\n     * @returns - \"000000\" or \"FFFFFF\"\r\n     */\r\n    get contrastColor() {\r\n        const brightness = (this.red*299 + this.green*587 + this.blue*114) / 1000\r\n        if (brightness > 127){\r\n            return \"000000\";\r\n        }\r\n        return \"FFFFFF\";\r\n    }\r\n\r\n    private getRGB() {\r\n        const chroma = (1 - Math.abs((2 * this._lightness) - 1)) * this.saturation;\r\n        // find the quandrant of the hue\r\n        const quadrant = this._hue / 60;\r\n        // calculate the offset from the quandrant center\r\n        const offset = chroma * (1 - Math.abs(quadrant % 2 - 1));\r\n\r\n        // Apply the chroma to the primary component and the offset to the 2nd most important component\r\n        let r = 0, g = 0, b = 0;\r\n        if (0 <= quadrant && quadrant <= 1) {\r\n            r = chroma; g = offset; // red to yellow\r\n        } else if (1 <= quadrant && quadrant <= 2) {\r\n            g = chroma; r = offset; // yellow to green\r\n        } else if (2 <= quadrant && quadrant <= 3) {\r\n            g = chroma; b = offset; // green to cyan\r\n        } else if (3 <= quadrant && quadrant <= 4) {\r\n            b = chroma; g = offset; // cyan to blue\r\n        } else if (4 <= quadrant && quadrant <= 5) {\r\n            b = chroma; r = offset; // blue to magenta\r\n        } else if (5 <= quadrant && quadrant <= 6) {\r\n            r = chroma; b = offset; // magenta to red\r\n        }\r\n        // calculate the bias to add to all channels to match the lightness\r\n        const bias = this._lightness - (chroma / 2);\r\n\r\n        return {\r\n            red: Math.round((r + bias) * 255),\r\n            green: Math.round((g + bias) * 255),\r\n            blue: Math.round((b + bias) * 255)\r\n        }\r\n    }\r\n\r\n    private setHSL(red: number, green: number, blue: number) {\r\n        // GENERAL DATA\r\n        // all math is based on values from 0 to 1\r\n        const r = red/255, g = green/255, b = blue/255;\r\n        // we need to max, min and the difference between them to derive hsl\r\n        const min = Math.min(r, g, b);\r\n        const max = Math.max(r, g, b);\r\n        const diff = max - min;\r\n        let h = 0, s = 0, l = 0;\r\n\r\n        // HUE\r\n        if (diff === 0) { // neutral\r\n            h = 0;\r\n        } else if (max === r) { // red (magenta to yellow range)\r\n            h = 60 * ((g - b) / diff);\r\n        } else if (max === g) { // green (yellow to cyan range)\r\n            h = 60 * (2 + ((b - r) / diff));\r\n        } else if (max === b) { // blue (cyan to magenta range)\r\n            h = 60 * (4 + ((r - g) / diff));\r\n        }\r\n        if (h < 0) { h = h + 360} // ensures positive hues only\r\n        if (h > 359) { h = 359} // ensures we never return 360 for simplicity since it is the same as 0\r\n\r\n        // LIGHTNESS\r\n        l = (max + min) / 2;\r\n\r\n        // SATURATION\r\n        if (max === 0 || min === 1) { // pure black or white have no saturation\r\n            s = 0;\r\n        } else {\r\n            s = (max - l) / (Math.min(l, 1 - l));\r\n        }\r\n\r\n        this._hue = h;\r\n        this._saturation = s;\r\n        this._lightness = l;\r\n    }\r\n\r\n    private getHex(value: number){\r\n        var hex = value.toString(16);\r\n        if (hex.length < 2){\r\n            hex = \"0\" + hex;\r\n        }\r\n        return hex;\r\n    }\r\n} ",".dnn-color-picker{\r\n    padding: 15px;\r\n    max-width: 400px;\r\n    .dnn-color-sliders{\r\n        display:flex;\r\n        flex-direction: column;\r\n        min-width: 200px;\r\n        .dnn-color-s-b{\r\n            border: 1px solid #ccc;\r\n            padding-bottom: var(--color-box-height, 50%);\r\n            position: relative;\r\n            background-color: red;\r\n            &:before{\r\n                content: '';\r\n                    position: absolute;\r\n                    top:0;\r\n                    left:0;\r\n                    width: 100%;\r\n                    height:100%;\r\n                    z-index:1;\r\n                    background: linear-gradient(to right, white, red);\r\n                    mix-blend-mode: saturation;\r\n            }\r\n            &:after{\r\n                content: '';\r\n                position: absolute;\r\n                top:0;\r\n                left:0;\r\n                width: 100%;\r\n                height:100%;\r\n                z-index:2;\r\n                background: linear-gradient(to bottom, white, black);\r\n                mix-blend-mode: luminosity;\r\n            }\r\n            button{\r\n                position: absolute;\r\n                bottom: calc(50% - 4px);\r\n                left: calc(50% - 4px);\r\n                width: 8px;\r\n                height: 8px;\r\n                z-index: 3;\r\n                display: block;\r\n                background: none;\r\n                border: none;\r\n                margin-left: -4px;\r\n                margin-bottom: -4px;\r\n                padding: 7px;\r\n                background-color: #fff;\r\n                border-radius: 50%;\r\n                &:before{\r\n                    content:'';\r\n                    position: absolute;\r\n                    top: -1px;\r\n                    left: -1px;\r\n                    border-radius: 50%;\r\n                }\r\n                &:after{\r\n                    content:'';\r\n                    position: absolute;\r\n                    top: 0px;\r\n                    left: 0px;\r\n                    border-radius: 50%;\r\n                    width: 10px;\r\n                    height: 10px;\r\n                    border: 2px solid #ccc;\r\n                }\r\n            } \r\n        }\r\n        .dnn-color-bar {\r\n            display: flex;\r\n            align-items: center;\r\n            margin-top: 15px;\r\n            .dnn-color-result {\r\n                flex-direction: column;\r\n                width: 50px;\r\n                height: 50px;\r\n                border-radius: 50%;\r\n                background: red;\r\n            }\r\n            .dnn-color-hue{\r\n                flex: auto;\r\n                margin-left: 10px;\r\n                height: 16px;\r\n                border: 1px solid #ccc;\r\n                position: relative;\r\n                background: linear-gradient(\r\n                    to right, \r\n                    #f00 0, \r\n                    #ff0 17%,\r\n                    #0f0 33%,\r\n                    #0ff 50%,\r\n                    #00f 67%,\r\n                    #f0f 84%,\r\n                    #f00 100%\r\n                );\r\n                button{\r\n                    width: 10px;\r\n                    height: 20px;\r\n                    position: absolute;\r\n                    top: -2px;\r\n                    left: calc(50% - 4px);\r\n                    border: 0;\r\n                    padding: 0;\r\n                    background-color: transparent;\r\n                    padding-left: -8px;\r\n                    &:before{\r\n                        content:'';\r\n                        position: absolute;\r\n                        top: -2px;\r\n                        left: 0px;\r\n                        border-radius: 3px;\r\n                        width: 100%;\r\n                        height: 100%;\r\n                        border: 1px solid #ccc;\r\n                        background-color: #fff;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n    .dnn-color-fields{\r\n        display:flex;\r\n        flex-direction: column;\r\n        justify-content: space-between;\r\n        .dnn-color-mode-switch {\r\n            display: flex;\r\n            align-items: flex-end;\r\n            padding: .5em;\r\n            button {\r\n                background-color: transparent;\r\n                border: none;\r\n                svg {\r\n                    width: 3em;\r\n                    height: 3em;\r\n                    pointer-events: none;\r\n                    outline: none;\r\n                }\r\n            }\r\n        }\r\n        .dnn-rgb-color-fields {\r\n            display: flex;\r\n            justify-content: space-evenly;\r\n            .dnn-rgb-color-field {\r\n                display: flex;\r\n                flex-direction: column;\r\n                flex: auto;\r\n                text-align: center;\r\n                padding: .5em;\r\n                label {\r\n                    padding-bottom: .25em;\r\n                }\r\n                input{\r\n                    border-radius: var(--dnn-button-radius, 3px);\r\n                    border: 1px solid #ccc;\r\n                    padding: 0.5em;\r\n                    padding-left: 1.3em;\r\n                    text-align: center;\r\n                    &.red{\r\n                        border-color: red;\r\n                    }\r\n                    &.green{\r\n                        border-color: green;                \r\n                    }\r\n                    &.blue{\r\n                        border-color: blue;\r\n                    }            \r\n                }\r\n            }\r\n        }\r\n        .dnn-hsl-color-fields {\r\n            display: flex;\r\n            justify-content: space-evenly;\r\n            .dnn-hsl-color-field {\r\n                display: flex;\r\n                flex-direction: column;\r\n                flex: auto;\r\n                text-align: center;\r\n                padding: .5em;\r\n                label {\r\n                    padding-bottom: .25em;\r\n                }\r\n                input{\r\n                    border-radius: var(--dnn-button-radius, 3px);\r\n                    border: 1px solid #ccc;\r\n                    padding: 0.5em;\r\n                    padding-left: 1.3em;\r\n                    text-align: center;\r\n                }\r\n            }\r\n        }\r\n        .dnn-hex-color-fields {\r\n            display: flex;\r\n            justify-content: space-evenly;\r\n            .dnn-hex-color-field {\r\n                display: flex;\r\n                flex-direction: column;\r\n                flex: auto;\r\n                text-align: center;\r\n                padding: .5em;\r\n                label {\r\n                    padding-bottom: .25em;\r\n                }\r\n                .hex-input{\r\n                    position: relative;\r\n                    border-radius: var(--dnn-button-radius, 3px);\r\n                    border: 1px solid #ccc;\r\n                    padding: 0.323em;\r\n                    text-align: center;\r\n                    input{\r\n                        border:0;\r\n                        padding:0;\r\n                        margin:0;\r\n                        width:100%;\r\n                        height:100%;\r\n                        text-align:center;\r\n                    }\r\n                    button{\r\n                        position: absolute;\r\n                        height: 100%;\r\n                        top: 0;\r\n                        right: 1em;\r\n                        background-color: transparent;\r\n                        border:0;\r\n                        padding:0;\r\n                        margin:0;\r\n                        svg{\r\n                            min-width: 1em;\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n} ","/** Reusable DNN UI component to pick a color\r\n * @copyright Copyright (c) .NET Foundation. All rights reserved.\r\n * @license MIT \r\n */\r\n\r\nimport { Component, h, State, Element, Prop, EventEmitter, Event, Watch } from \"@stencil/core\";\r\nimport { ColorInfo } from '../../utilities/colorInfo';\r\nimport { Debounce } from \"../../utilities/debounce\";\r\n\r\n/** Color Picker for Dnn */\r\n@Component({\r\n    tag: 'dnn-color-picker',\r\n    styleUrl: 'dnn-color-picker.scss',\r\n    shadow: true\r\n})\r\nexport class DnnColorPicker {\r\n\r\n    @Element() el: HTMLDnnColorPickerElement;\r\n\r\n    /** Sets the initial color, must be a valid 8 character hexadecimal string without the # sign. */\r\n    @Prop() color: string = \"FFFFFF\";\r\n\r\n    /** Sets the width-height ratio of the color picker saturation-lightness box.\r\n     * @example 100% renders a perfect square\r\n     */\r\n    @Prop() colorBoxHeight: string = \"50%\";\r\n    \r\n    @State() currentColor: ColorInfo;\r\n    @State() rgbDisplay: string = \"flex\";\r\n    @State() hslDisplay: string = \"none\";\r\n    @State() hexDisplay: string = \"none\";\r\n\r\n    /** Fires up when the color is changed and emits a ColorInfo object\r\n     * @see ../../utilities/colorInfo.ts\r\n    */\r\n    @Event() colorChanged: EventEmitter<ColorInfo>;\r\n\r\n    @Debounce(100)\r\n    private colorChangedHandler(color: ColorInfo) {\r\n        this.colorChanged.emit(color);\r\n    }\r\n\r\n    @Watch(\"currentColor\")\r\n    handeCurrentColorChanged(newValue: ColorInfo){\r\n        this.colorChangedHandler(newValue);\r\n    }\r\n    \r\n    private saturationLightnessBox?: HTMLDivElement;\r\n    private hueRange?: HTMLDivElement;\r\n\r\n\r\n    componentWillLoad() {\r\n        this.handleHexChange(this.color);\r\n    }\r\n\r\n    componentDidLoad() {\r\n        (this.el as unknown as HTMLElement).style.setProperty(\"--color-box-height\", this.colorBoxHeight.toString());\r\n    }\r\n    \r\n    private getHex() {\r\n       return this.getDoublet(this.currentColor.red) + this.getDoublet(this.currentColor.green) + this.getDoublet(this.currentColor.blue);\r\n    }\r\n\r\n    private getContrast() {\r\n        return this.currentColor.contrastColor;\r\n    }\r\n\r\n    private getDoublet(value: number){\r\n        const valueString = value.toString(16).toUpperCase();\r\n        if (valueString.length === 1){\r\n            return '0' + valueString;\r\n        }\r\n        return valueString;\r\n    }\r\n\r\n    private handleSaturationLightnessMouseDown = (e) => {\r\n        e.preventDefault();\r\n        this.handleDragLightnessSaturation(e);\r\n        window.addEventListener('mousemove', this.handleDragLightnessSaturation);\r\n        window.addEventListener('mouseup', this.handleSaturationLightnessMouseUp);\r\n    }\r\n\r\n    private handleDragLightnessSaturation = (e) => {\r\n        const rect = this.saturationLightnessBox.getBoundingClientRect();        \r\n\r\n        let x = e.clientX - rect.left;        \r\n        if (x < 0) { x = 0}\r\n        if (x > rect.width) { x = rect.width}\r\n        x = x/rect.width;\r\n\r\n        let y = e.clientY - rect.top;\r\n        if (y < 0) { y = 0}\r\n        if (y > rect.height) { y = rect.height}\r\n        y = 1 - (y/rect.height);\r\n\r\n        const newColor = new ColorInfo();\r\n        newColor.hue = this.currentColor.hue;\r\n        newColor.saturation = x;\r\n        newColor.lightness = y;\r\n        this.currentColor = newColor;\r\n    }\r\n\r\n    private handleSaturationLightnessMouseUp = () => {\r\n        window.removeEventListener('mousemove', this.handleDragLightnessSaturation);\r\n        window.removeEventListener('mouseup', this.handleSaturationLightnessMouseUp);\r\n    }\r\n\r\n    private handleHueMouseDown = (e) => {\r\n        e.preventDefault();\r\n        this.handleDragHue(e);\r\n        window.addEventListener('mousemove', this.handleDragHue);\r\n        window.addEventListener('mouseup', this.handleHueMouseUp);        \r\n    }\r\n\r\n    private handleHueMouseUp = () => {\r\n        window.removeEventListener('mousemove', this.handleDragHue);\r\n        window.removeEventListener('mouseup', this.handleHueMouseUp); \r\n    }\r\n\r\n    private handleDragHue = (e) => {\r\n        const rect = this.hueRange.getBoundingClientRect();        \r\n\r\n        let x = e.clientX - rect.left;\r\n        if (x < 0) { x = 0}\r\n        if (x > rect.width) { x = rect.width}\r\n        x = x/rect.width*360;        \r\n\r\n        const newColor = new ColorInfo();\r\n        newColor.hue = x;\r\n        newColor.saturation = this.currentColor.saturation;\r\n        newColor.lightness = this.currentColor.lightness;\r\n        this.currentColor = newColor;\r\n    }\r\n\r\n    private handleComponentValueChange = (e, channel) => {\r\n        let value = parseInt(e.target.value);\r\n        if (isNaN(value)) { return }\r\n        const newColor = new ColorInfo();\r\n        if (value < 0) { value = 0; }\r\n        if (value > 255) { value = 255; }\r\n        let r = this.currentColor.red;\r\n        let g = this.currentColor.green;\r\n        let b = this.currentColor.blue;\r\n        switch (channel) {\r\n            case 'red':\r\n                r = value;\r\n                break;\r\n            case 'green':\r\n                g = value;\r\n                break;\r\n            case 'blue':\r\n                b = value;\r\n                break;\r\n            default:\r\n                break;\r\n        }\r\n        newColor.green = g;\r\n        newColor.red = r;\r\n        newColor.blue = b;\r\n        this.currentColor = newColor;\r\n    }\r\n\r\n    private handleHSLChange = (e, component) => {        \r\n        let value = parseInt(e.target.value);\r\n        if (isNaN(value)) {return}\r\n        const newColor = new ColorInfo();\r\n        if (value != null) {            \r\n            let h = this.currentColor.hue;\r\n            let s = this.currentColor.saturation;\r\n            let l = this.currentColor.lightness;\r\n            switch (component) {\r\n                case \"hue\":\r\n                    if (value < 0) { value = 0}\r\n                    if (value > 359) { value = 0}\r\n                    h = value;\r\n                    break;\r\n                case \"saturation\":\r\n                    if (value < 0) { value = 0}\r\n                    if (value > 100) { value = 100}\r\n                    s = value / 100;\r\n                    break;\r\n                case \"lightness\":\r\n                    if (value < 0) { value = 0}\r\n                    if (value > 100) { value = 100}\r\n                    l = value / 100;\r\n                    break;            \r\n                default:\r\n                    break;                \r\n            }\r\n            newColor.hue = h;\r\n            newColor.saturation = s;\r\n            newColor.lightness = l;\r\n            this.currentColor = newColor;\r\n        }\r\n    }\r\n\r\n    private handleHexChange(value: string){\r\n        const newColor = new ColorInfo();\r\n        if (value.match(/^(?:[\\da-f]{3}|[\\da-f]{6})$/i).length > 0) {\r\n            if (value.length === 3){\r\n                let expanded = value[0] + value[0] + value[1] + value[1] + value[2] + value [2];\r\n                value = expanded;\r\n            }\r\n            newColor.red = parseInt(value.substr(0,2), 16);\r\n            newColor.green = parseInt(value.substr(2,2), 16);\r\n            newColor.blue = parseInt(value.substr(4,2), 16);\r\n        }\r\n        else{\r\n            newColor.red = this.currentColor.red;\r\n            newColor.green = this.currentColor.green;\r\n            newColor.blue = this.currentColor.blue;\r\n        }\r\n        this.currentColor = newColor;\r\n    }\r\n\r\n    private switchColorMode(e) {\r\n        switch(e.target.id) {\r\n            case \"rgb-switch\":\r\n                this.rgbDisplay = \"none\";\r\n                this.hslDisplay = \"none\";\r\n                this.hexDisplay = \"flex\";\r\n                break;\r\n            case \"hex-switch\":\r\n                this.rgbDisplay = \"none\";\r\n                this.hslDisplay = \"flex\";\r\n                this.hexDisplay = \"none\";\r\n                break;\r\n            case \"hsl-switch\":\r\n                this.rgbDisplay = \"flex\";\r\n                this.hslDisplay = \"none\";\r\n                this.hexDisplay = \"none\";\r\n                break;\r\n            default:\r\n                this.rgbDisplay = \"flex\";\r\n                this.hslDisplay = \"none\";\r\n                this.hexDisplay = \"none\";\r\n        }\r\n    }\r\n\r\n    private handleSaturationLightnessKeyDown = (e) => {        \r\n        let newColor = new ColorInfo();\r\n        newColor.hue = this.currentColor.hue;\r\n        newColor.saturation = this.currentColor.saturation;\r\n        newColor.lightness = this.currentColor.lightness;\r\n\r\n        let value = 0.01;\r\n        if (e.shiftKey) { value = 0.1 ;}\r\n\r\n        switch (e.key) {\r\n            case \"ArrowUp\":\r\n                newColor.lightness += value;\r\n                break;\r\n            case \"ArrowDown\":\r\n                newColor.lightness -= value;\r\n                break;\r\n            case \"ArrowLeft\":\r\n                newColor.saturation -= value;\r\n                break;\r\n            case \"ArrowRight\":\r\n                newColor.saturation += value;\r\n            default:\r\n                break;                \r\n        }\r\n        this.currentColor = newColor;\r\n    }\r\n\r\n    private handleHueKeyDown = (e) => {\r\n        let newColor = new ColorInfo();\r\n        newColor.hue = this.currentColor.hue;\r\n        newColor.saturation = this.currentColor.saturation;\r\n        newColor.lightness = this.currentColor.lightness;\r\n\r\n        let value = 1;\r\n        if (e.shiftKey) { value = 10}\r\n\r\n        switch (e.key) {\r\n            case \"ArrowLeft\":\r\n                newColor.hue -= value;\r\n                break;\r\n            case \"ArrowRight\":\r\n                newColor.hue += value;\r\n            default:\r\n                break;\r\n        }\r\n        this.currentColor = newColor;\r\n    }\r\n\r\n    render() {\r\n        const hue = this.currentColor.hue;\r\n        const saturation = this.currentColor.saturation;\r\n        const lightness = this.currentColor.lightness;\r\n        const red = this.currentColor.red;\r\n        const green = this.currentColor.green;\r\n        const blue = this.currentColor.blue;\r\n\r\n        return (\r\n            <div class=\"dnn-color-picker\">\r\n                <div class=\"dnn-color-sliders\">\r\n                    <div class=\"dnn-color-s-b\" ref={(element) => this.saturationLightnessBox = element as HTMLDivElement}\r\n                        style={{backgroundColor: `hsl(${hue},100%,50%)`}}\r\n                        onMouseDown={this.handleSaturationLightnessMouseDown.bind(this)}\r\n                    >\r\n                        <button class=\"dnn-s-b-picker\"\r\n                            aria-label=\"Press up or down to adjust lightness, left or right to adjust saturation, hold shift to move by 10%\"\r\n                            role=\"slider\"\r\n                            aria-valuemin=\"0\"\r\n                            aria-valuemax=\"100\"\r\n                            aria-valuetext={`Saturation: ${Math.round(this.currentColor.saturation*100)}%, Lightness: ${Math.round(this.currentColor.lightness*100)}%`}\r\n                            style={{\r\n                                left: Math.round(saturation * 100)  + \"%\",\r\n                                bottom: Math.round(lightness * 100)  + \"%\"\r\n                            }}\r\n                            onKeyDown={(e) => this.handleSaturationLightnessKeyDown(e)}\r\n                        />\r\n                    </div>\r\n                    <div class=\"dnn-color-bar\">\r\n                        <div class=\"dnn-color-result\" style={{\r\n                            backgroundColor: '#' + this.getHex(),\r\n                            boxShadow: \"0 0 2px 1px \" + \"#\" + this.getContrast()\r\n                        }} \r\n                        />\r\n                        <div class=\"dnn-color-hue\"\r\n                            ref={(element) => this.hueRange = element as HTMLDivElement}\r\n                            onMouseDown={this.handleHueMouseDown.bind(this)}\r\n                        >\r\n                            <button class=\"dnn-hue-picker\"\r\n                                aria-label=\"Press left or right to adjust hue, hold shift to move by 10 degrees\"\r\n                                role=\"slider\"\r\n                                aria-valuemin=\"0\"\r\n                                aria-valuemax=\"359\"\r\n                                aria-valuenow={Math.round(hue)}\r\n                                style={{left: (hue/359*100).toString() + \"%\"}}\r\n                                onKeyDown={(e) => this.handleHueKeyDown(e)}\r\n                            />\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"dnn-color-fields\">\r\n                    <div class=\"dnn-rgb-color-fields\" style={{display: this.rgbDisplay}}>\r\n                        <div class=\"dnn-rgb-color-field\">\r\n                            <label>R</label>\r\n                            <input type=\"number\" min=\"0\" max=\"255\" step=\"1\" class=\"red\" value={red} aria-label=\"red value\"\r\n                                onChange={(e) => this.handleComponentValueChange(e, 'red')}\r\n                            />\r\n                        </div>\r\n                        <div class=\"dnn-rgb-color-field\">\r\n                            <label>G</label>\r\n                            <input type=\"number\" min=\"0\" max=\"255\" class=\"green\" value={green} aria-label=\"green value\"\r\n                                onChange={(e) => this.handleComponentValueChange(e, 'green')}\r\n                            />\r\n                        </div>\r\n                        <div class=\"dnn-rgb-color-field\">\r\n                            <label>B</label>\r\n                            <input type=\"number\" min=\"0\" max=\"255\" class=\"blue\" value={blue} aria-label=\"blue value\"\r\n                                onChange={(e) => this.handleComponentValueChange(e, 'blue')}\r\n                            />\r\n                        </div>\r\n                        <div class=\"dnn-color-mode-switch\">\r\n                            <button\r\n                                id=\"rgb-switch\"\r\n                                onClick={this.switchColorMode.bind(this)}\r\n                                aria-label=\"switch to hexadecimal value entry\"\r\n                            >\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z\"/></svg>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"dnn-hsl-color-fields\" style={{display: this.hslDisplay}}>\r\n                        <div class=\"dnn-hsl-color-field\">\r\n                            <label>H</label>\r\n                            <input type=\"number\" min=\"0\" max=\"359\" step={1} value={Math.round(hue)} aria-label=\"Hue\"\r\n                                onChange={(e) => this.handleHSLChange(e, 'hue')}\r\n                            />\r\n                        </div>\r\n                        <div class=\"dnn-hsl-color-field\">\r\n                            <label>S</label>\r\n                            <input type=\"number\" min=\"0\" max=\"100\" step={1} value={Math.round(saturation*100)} aria-label=\"Saturation\"\r\n                                onChange={(e) => this.handleHSLChange(e, 'saturation')}\r\n                            />\r\n                        </div>\r\n                        <div class=\"dnn-hsl-color-field\">\r\n                            <label>L</label>\r\n                            <input type=\"number\" min=\"0\" max=\"100\" step={1} value={Math.round(lightness*100)} aria-label=\"Lightness\"\r\n                                onChange={(e) => this.handleHSLChange(e, 'lightness')}\r\n                            />\r\n                        </div>\r\n                        <div class=\"dnn-color-mode-switch\">\r\n                            <button\r\n                                id=\"hsl-switch\"\r\n                                onClick={this.switchColorMode.bind(this)}\r\n                                aria-label=\"Switch to red, green, blue entry mode\"\r\n                            >\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z\"/></svg>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"dnn-hex-color-fields\" style={{display: this.hexDisplay}}>\r\n                        <div class=\"dnn-hex-color-field\">\r\n                            <label>HEX</label>\r\n                            <div class=\"hex-input\">\r\n                                <input type=\"text\" aria-label=\"Hexadecimal value\"\r\n                                    value={this.getHex()}\r\n                                    onChange={e => this.handleHexChange((e.target as HTMLInputElement).value)}\r\n                                />\r\n                                <button\r\n                                    class=\"copy\"\r\n                                    aria-label=\"copy value\"\r\n                                >\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z\"/></svg>\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"dnn-color-mode-switch\">\r\n                            <button\r\n                                id=\"hex-switch\"\r\n                                onClick={this.switchColorMode.bind(this)}\r\n                                aria-label=\"Switch to hue saturation lightness values\"\r\n                            >\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z\"/></svg>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}","\r\n:host {\r\n  /** \r\n  * @prop --border-color: The color of the border.\r\n  * @prop --border-radius: The radius of the controls borders.\r\n  * @prop --drop-background-color: The color of the background when a file is dropping.\r\n  */\r\n  --border-color: var(--dnn-color-tertiary-contrast, lightgray);\r\n  --border-radius: var(--dnn-controls-radius, 5px);\r\n  --drop-background-color: var(--dnn-color-tertiary, lightblue);\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 1rem;\r\n  text-align: center;\r\n  border: 2px dashed var(--border-color);\r\n  border-radius: var(--border-radius);\r\n  padding: 1rem;\r\n  transition: all 300ms ease-in-out;\r\n}\r\n\r\n:host(.dropping){\r\n  background-color: var(--drop-background-color);\r\n}\r\np{\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\nbutton{\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  border: 0px;\r\n  margin: 0;\r\n  padding: 0;\r\n  background-color: transparent;\r\n  &:hover{\r\n    cursor: pointer;\r\n  }\r\n  svg{\r\n    margin-right: 0.5rem;\r\n  }\r\n}\r\nlabel.upload-file{\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  input{\r\n    display: none;\r\n  }\r\n}\r\n.video-preview{\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  button{\r\n    margin: 1rem;\r\n  }\r\n}\r\n","import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-dropzone',\r\n  styleUrl: 'dnn-dropzone.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnDropzone {\r\n  /** Localization strings */\r\n  @Prop() resx:{\r\n    dragAndDropFile: string;\r\n    capture: string;\r\n    or: string;\r\n    takePicture: string;\r\n    uploadFile: string;\r\n  } = {\r\n    dragAndDropFile: \"Drag and drop a file\",\r\n    capture: \"Capture\",\r\n    or: \"or\",\r\n    takePicture: \"Take a picture\",\r\n    uploadFile: \"Upload a file\",\r\n  }\r\n\r\n  /** A list of allowed file extensions.\r\n   * If not specified, any file is allowed.\r\n   * Ex: [\"jpg\", \"jped\", \"gif\", \"png\"]\r\n   */\r\n  @Prop() allowedExtensions: string[];\r\n\r\n  /**\r\n   * If true, will allow the user to take a snapshot\r\n   * using the device camera. (only works over https).\r\n   */\r\n  @Prop() allowCameraMode: boolean = false;\r\n\r\n  /**\r\n   * Specifies the jpeg quality for when the device\r\n   * camera is used to generate a picture.\r\n   * Needs to be a number between 0 and 1 and defaults to 0.8\r\n   */\r\n  @Prop() captureQuality: number = 0.8;\r\n\r\n  /** Fires when file were selected. */\r\n  @Event() filesSelected: EventEmitter<File[]>;\r\n  \r\n  @State() canTakeSnapshots: boolean = false;\r\n\r\n  @State() takingPicture: boolean = false;\r\n  \r\n  private dropzone: HTMLElement;\r\n  private fileInput: HTMLInputElement;\r\n  private videoPreview: HTMLVideoElement;\r\n  private videoSettings!: MediaTrackSettings;\r\n\r\n\r\n  componentDidLoad() {\r\n    if (this.allowCameraMode){\r\n      this.checkIfBrowserCanTakeSnapshots()\r\n      .then(result => this.canTakeSnapshots = result);\r\n    }\r\n    if (this.allowedExtensions != undefined && this.allowedExtensions.length > 0){\r\n      var extensionsWithDots = this.allowedExtensions.map(e => `.${e}`);\r\n      var extensionsList = extensionsWithDots.join(\",\");\r\n      this.fileInput.accept = extensionsList;\r\n    }\r\n  }\r\n\r\n  private checkIfBrowserCanTakeSnapshots(): Promise<boolean> {\r\n    return new Promise((resolve) => {\r\n      const mediaDevices = navigator.mediaDevices;\r\n      if (mediaDevices == undefined || mediaDevices.enumerateDevices == undefined) {\r\n        resolve(false);\r\n      }\r\n      mediaDevices.enumerateDevices()\r\n        .then(devices => {\r\n          var result = devices.some(device => device.kind == \"videoinput\");\r\n          resolve(result);\r\n        });\r\n    });\r\n  }\r\n\r\n  private getFilesFromFileList(files: FileList) : File[] {\r\n    var fileList: File[] = [];\r\n    for (let index = 0; index < files.length; index++) {\r\n      const file = files[index];\r\n      fileList.push(file);\r\n    }\r\n\r\n    return fileList;\r\n  }\r\n\r\n  private handleUploadButton(element: HTMLInputElement): void {\r\n    let files = this.getFilesFromFileList(element.files);\r\n\r\n    this.filesSelected.emit(files);\r\n  }\r\n\r\n  private handleDragOver = (event: DragEvent) => \r\n  {\r\n    event.stopPropagation();\r\n    event.preventDefault();\r\n    event.dataTransfer.dropEffect = \"copy\";\r\n    this.dropzone.classList.add(\"dropping\");\r\n  };\r\n\r\n  private hasInvalidExtensions(files: FileList): boolean{\r\n    var hasInvalid = false;\r\n    for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {\r\n      const file = files[fileIndex];\r\n      var regex = /(?:\\.([^.]+))?$/;\r\n      const fileExtension = regex.exec(file.name)[1];\r\n      if (fileExtension == undefined){\r\n        hasInvalid = true;\r\n      }\r\n\r\n      if (this.allowedExtensions != undefined && !this.allowedExtensions.includes(fileExtension)){\r\n        hasInvalid = true;\r\n      }\r\n\r\n      return hasInvalid;\r\n    }\r\n  }\r\n\r\n  private handleDrop = (dropEvent: DragEvent) => {\r\n    dropEvent.stopPropagation();\r\n    dropEvent.preventDefault();\r\n    const files = dropEvent.dataTransfer.files;\r\n\r\n    if (this.hasInvalidExtensions(files)){\r\n      return;\r\n    }\r\n    var fileList = this.getFilesFromFileList(files);\r\n    this.filesSelected.emit(fileList);\r\n  };\r\n\r\n  private takeSnapshot(): void {\r\n    this.takingPicture = true;\r\n    navigator.mediaDevices.getUserMedia({video: true, audio: false})\r\n    .then(stream => {\r\n      stream\r\n      this.videoPreview.srcObject = stream;\r\n      this.videoPreview.play()\r\n      .then(() => {\r\n        this.videoSettings = stream.getVideoTracks()[0].getSettings();\r\n      });\r\n    })\r\n    .catch(error => alert(error));\r\n  }\r\n\r\n  private applySnapshot(): void {\r\n    var canvas = document.createElement(\"canvas\");\r\n    const context = canvas.getContext(\"2d\");\r\n    canvas.width = this.videoSettings.width;\r\n    canvas.height = this.videoSettings.height;\r\n    context.drawImage(this.videoPreview, 0, 0);\r\n    canvas.toBlob(blob => {\r\n      var file = new File([blob], \"image.jpeg\", {type:\"image/jpeg\"});\r\n      this.takingPicture = false;\r\n      \r\n      var fileList = [file];\r\n      this.filesSelected.emit(fileList)\r\n    }, \"image/jpeg\", this.captureQuality);\r\n  }\r\n  \r\n  render() {\r\n    return (\r\n      <Host\r\n        ref={e => this.dropzone = e}\r\n        class=\"dropzone\"\r\n        onDragOver={this.handleDragOver}\r\n        onDrop={this.handleDrop}\r\n        onDragLeave={() => this.dropzone.classList.remove(\"dropping\")}\r\n      >\r\n        {!this.takingPicture &&\r\n          [\r\n            <p>{this.resx?.dragAndDropFile}</p>\r\n          ,\r\n            <p>- {this.resx?.or} -</p>\r\n          ,\r\n            <label class=\"upload-file\">\r\n              <input\r\n                type=\"file\"\r\n                ref={el => this.fileInput = el}\r\n                onChange={e => this.handleUploadButton(e.target as HTMLInputElement)}\r\n              >\r\n              </input>\r\n              <span>\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><g><rect fill=\"none\" height=\"24\" width=\"24\"/></g><g><path d=\"M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z\"/></g></svg>\r\n              </span>\r\n              &nbsp;\r\n              {this.resx?.uploadFile}\r\n            </label>\r\n            ,\r\n            this.canTakeSnapshots &&\r\n              [\r\n                <p>- {this.resx?.or} -</p>\r\n                ,\r\n                <button\r\n                  onClick={() => this.takeSnapshot()}\r\n                >\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><circle cx=\"12\" cy=\"12\" r=\"3.2\"/><path d=\"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z\"/></svg>\r\n                  {this.resx?.takePicture}\r\n                </button>\r\n              ]\r\n          ]\r\n        }\r\n        {this.takingPicture &&\r\n          <div class=\"video-preview\">\r\n            <video ref={e => this.videoPreview = e} />\r\n            <button\r\n              onClick={() => this.applySnapshot()}\r\n            >\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><circle cx=\"12\" cy=\"12\" r=\"3.2\"/><path d=\"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z\"/></svg>&nbsp;\r\n              {this.resx?.capture}\r\n            </button>\r\n          </div>\r\n        }\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n","export enum CornerType {\r\n    \"nw\",\r\n    \"ne\",\r\n    \"se\",\r\n    \"sw\",\r\n};","export function getMovementFromEvent(\r\n    event: MouseEvent | TouchEvent,\r\n    previousTouch: Touch\r\n) {\r\n    let movementX = 0;\r\n    let movementY = 0;\r\n    if (event instanceof MouseEvent) {\r\n      movementX = event.movementX;\r\n      movementY = event.movementY;\r\n    }\r\n    if (typeof TouchEvent !== \"undefined\"){\r\n      if (event instanceof TouchEvent) {\r\n        let touch = event.touches[0];\r\n        if (previousTouch != undefined) {\r\n          movementX = touch.pageX - this.previousTouch.pageX;\r\n          movementY = touch.pageY - this.previousTouch.pageY;\r\n        }\r\n        previousTouch = touch;\r\n      }\r\n    }\r\n    return { movementX, movementY };\r\n  }",":host {\r\n  display: block;\r\n}\r\ncanvas {\r\n  display: none;\r\n}\r\n.view{\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  height: 0;\r\n  overflow: hidden;\r\n  transition: all 300ms ease-in-out;\r\n  &.visible{\r\n    visibility: visible;\r\n    opacity: 1;\r\n    height: initial;\r\n    overflow: visible;\r\n  }\r\n  .cropper{\r\n    position: relative;\r\n    width: 100%;\r\n    img{\r\n      width: 100%;\r\n      display: block;\r\n      margin: 0 auto;\r\n    }\r\n    .backdrop{\r\n      backdrop-filter: saturate(0.5);\r\n      backdrop-filter: brightness(0.5);\r\n      position: absolute;\r\n      left: 0;\r\n      top: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n    .crop{\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      outline: 2px dashed white;\r\n      box-shadow: black 0 0 0px 2px;\r\n      backdrop-filter: saturate(2);\r\n      backdrop-filter: brightness(2);\r\n      cursor: move;\r\n      >div{\r\n        width: 20px;\r\n        height: 20px;\r\n        background-color: white;\r\n        border: 2px solid rgba(0,0,0,0.5);\r\n        position: absolute;\r\n        &.nw, &.ne{\r\n          top: -17px;\r\n        }\r\n        &.ne, &.se{\r\n          right: -17px;\r\n        }\r\n        &.se, &.sw{\r\n          bottom: -17px;\r\n        }\r\n        &.sw, &.nw{\r\n          left: -17px;\r\n        }\r\n        &.nw, &.se{\r\n          cursor: nwse-resize;\r\n        }\r\n        &.ne, &.sw{\r\n          cursor: nesw-resize;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\ndnn-modal{\r\n  --max-width: 512px;\r\n}","import { Component, Host, h, State, Prop, Event, EventEmitter } from '@stencil/core';\r\nimport { CornerType } from './CornerType';\r\nimport { getMovementFromEvent } from \"../../utilities/mouseUtilities\";\r\n\r\n/**\r\n * Allows cropping an image in-browser with the option to enforce a specific final size.\r\n * All computation happens in the browser and the final image is emmited\r\n * in an event that has a data-url of the image.\r\n */\r\n@Component({\r\n  tag: 'dnn-image-cropper',\r\n  styleUrl: 'dnn-image-cropper.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnImageCropper {\r\n  /** Sets the desired final image width. */\r\n  @Prop() width: number = 600;\r\n\r\n  /** Sets the desired final image height. */\r\n  @Prop() height: number = 600;\r\n\r\n  /** Can be used to customize controls text.\r\n   * Some values support tokens, see default values for examples.\r\n  */\r\n  @Prop() resx: {\r\n    capture: string;\r\n    dragAndDropFile: string;\r\n    or: string;\r\n    takePicture: string;\r\n    uploadFile: string;\r\n    imageTooSmall: string;\r\n    modalCloseText: string;\r\n  } = {\r\n    capture: \"Capture\",\r\n    dragAndDropFile: \"Drag and drop an image\",\r\n    or: \"or\",\r\n    takePicture: \"Take a picture\",\r\n    uploadFile: \"Upload an image\",\r\n    imageTooSmall: \"The image you are attempting to upload does not meet the minimum size requirement of {width} pixels by {height} pixels. Please upload a larger image.\",\r\n    modalCloseText: \"Close\",\r\n  }\r\n\r\n  /** Sets the output quality of the corpped image (number between 0 and 1). */\r\n  @Prop() quality: number = 0.8;\r\n\r\n  /** When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry. */\r\n  @Prop() preventUndersized: boolean = false;\r\n\r\n  /** When the image crop changes, emits the dataurl for the new cropped image. */\r\n  @Event() imageCropChanged: EventEmitter<string>;\r\n\r\n  @State() view: IComponentInterfaces[\"View\"];\r\n  \r\n  private host: HTMLElement;\r\n  private hasPictureView: HTMLDivElement;\r\n  private noPictureView: HTMLDivElement;\r\n  private canvas: HTMLCanvasElement;\r\n  private image: HTMLImageElement;\r\n  private crop: HTMLDivElement;\r\n  private previousTouch: Touch;\r\n  private imageTooSmallModal!: HTMLDnnModalElement;\r\n\r\n  componentDidLoad() {\r\n    requestAnimationFrame(() => {\r\n      this.setView(\"noPictureView\");\r\n    })\r\n  }\r\n\r\n  private setView(newView: IComponentInterfaces[\"View\"]){\r\n    const views = this.host.shadowRoot.querySelectorAll(\".view\");\r\n    views.forEach(v =>\r\n      v.classList.remove(\"visible\"));\r\n    switch (newView) {\r\n      case \"noPictureView\":\r\n        this.noPictureView.classList.add(\"visible\");\r\n        break;\r\n      case \"hasPictureView\":\r\n        this.hasPictureView.classList.add(\"visible\");\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n    this.view = newView;\r\n  }\r\n\r\n  private initCrop(){\r\n    var wantedRatio = this.width / this.height;\r\n    var imageRect = this.image.getBoundingClientRect();\r\n    var imageRatio = imageRect.width / imageRect.height;\r\n    \r\n    if (wantedRatio > imageRatio){\r\n        var wantedHeight = imageRect.width / wantedRatio;\r\n        var diff = imageRect.height - wantedHeight;\r\n        this.crop.style.top = Math.round(diff/2).toString() + \"px\";\r\n        this.crop.style.height = Math.round(wantedHeight).toString() + \"px\";\r\n    }\r\n    else{\r\n      var wantedWidth = imageRect.height * wantedRatio;\r\n      var diff = imageRect.width - wantedWidth;\r\n        this.crop.style.left = Math.round(diff/2).toString() + \"px\";\r\n        this.crop.style.width = Math.round(wantedWidth).toString() + \"px\";\r\n    }\r\n  }\r\n\r\n  private setImage(){\r\n    this.image.addEventListener('load', () => {\r\n      this.initCrop();\r\n      this.emitImage();\r\n    })\r\n    this.image.src = this.canvas.toDataURL();\r\n  }\r\n\r\n  private handleNewFile(file: File): void {\r\n    if (file.type.split('/')[0] != \"image\"){\r\n      return;\r\n    }\r\n    \r\n    var reader = new FileReader();\r\n    reader.onload = readerLoadEvent => {\r\n      var img = new Image();\r\n      img.onload = () => {\r\n        this.canvas.width = img.width;\r\n        this.canvas.height = img.height;\r\n        if (this.preventUndersized && (img.width < this.width || img.height< this.height)){\r\n          this.imageTooSmallModal.show();\r\n          return;\r\n        }\r\n        var ctx = this.canvas.getContext(\"2d\");\r\n        ctx.drawImage(img,0,0);\r\n        this.setView(\"hasPictureView\");\r\n        this.setImage();\r\n      }\r\n      img.src = readerLoadEvent.target.result.toString();\r\n    }\r\n    reader.readAsDataURL(file);\r\n  }\r\n\r\n  private handleCropMouseDown = (event: MouseEvent | TouchEvent) => {\r\n    event.stopPropagation();\r\n    event.preventDefault();\r\n    const element = event.target as HTMLElement;\r\n    const className = element.classList[0];\r\n\r\n    document.addEventListener(\"mouseup\", this.handleImageCropFinished, false);\r\n    document.addEventListener(\"touchend\", this.handleImageCropFinished, false);\r\n    switch (className) {\r\n      case \"crop\":\r\n        document.addEventListener(\"mousemove\", this.handleCropDrag, false);\r\n        document.addEventListener(\"touchmove\", this.handleCropDrag, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleCropDrag));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleCropDrag));\r\n        break;\r\n      case \"nw\":\r\n        document.addEventListener(\"mousemove\", this.handleNwMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleNwMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNwMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNwMouseMove));\r\n        break;\r\n      case \"ne\":\r\n        document.addEventListener(\"mousemove\", this.handleNeMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleNeMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNeMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNeMouseMove));\r\n        break\r\n      case \"se\":\r\n        document.addEventListener(\"mousemove\", this.handleSeMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleSeMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSeMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSeMouseMove));\r\n        break;\r\n      case \"sw\":\r\n        document.addEventListener(\"mousemove\", this.handleSwMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleSwMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSwMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSwMouseMove));\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  };\r\n\r\n  private handleImageCropFinished = (_ev: MouseEvent) => {\r\n    this.emitImage();\r\n    document.removeEventListener(\"mouseup\", this.handleImageCropFinished);\r\n    this.previousTouch = undefined;\r\n  }\r\n\r\n  private emitImage() {\r\n    var x = this.crop.offsetLeft / this.image.width * this.image.naturalWidth;\r\n    var y = this.crop.offsetTop / this.image.height * this.image.naturalHeight;\r\n\r\n    var cropRect = this.crop.getBoundingClientRect();\r\n    var width = cropRect.width / this.image.width * this.image.naturalWidth;\r\n    var height = cropRect.height / this.image.height * this.image.naturalHeight;\r\n\r\n    if (x < 0)\r\n      x = 0;\r\n    if (x > this.image.naturalWidth)\r\n      x = this.image.naturalWidth;\r\n    if (y < 0)\r\n      y = 0;\r\n    if (y > this.image.naturalWidth)\r\n      y = this.image.naturalWidth;\r\n    if (width > this.image.naturalWidth)\r\n      width = this.image.naturalWidth;\r\n    if (height > this.image.naturalHeight)\r\n      height = this.image.naturalHeight;\r\n\r\n    var dataUrl = this.generateCroppedImage(x, y, width, height, this.width, this.height);\r\n    this.imageCropChanged.emit(dataUrl);\r\n  }\r\n\r\n  private generateCroppedImage(x: number, y: number, width: number, height: number, desiredWidth: number, desiredHeight: number) {\r\n    this.canvas.width = desiredWidth;\r\n    this.canvas.height = desiredHeight;\r\n    const context = this.canvas.getContext(\"2d\");\r\n    context.clearRect(0, 0, desiredWidth, desiredHeight);\r\n    context.drawImage(this.image, x, y, width, height, 0, 0, desiredWidth, desiredHeight);\r\n\r\n    return this.canvas.toDataURL(\"image/jpeg\", this.quality);\r\n  }\r\n\r\n  private handleNwMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.nw);\r\n  }\r\n\r\n  private handleNeMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.ne);\r\n  }\r\n\r\n  private handleSeMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.se);\r\n  }\r\n\r\n  private handleSwMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.sw);\r\n  }\r\n\r\n  private handleCornerDrag = (event: MouseEvent | TouchEvent, corner: CornerType) => {\r\n    if (!this.isMouseStillInTarget(event)){\r\n      return;\r\n    }\r\n    \r\n    let {left, top} = this.getCornerLeftTop(corner);\r\n    let newWidth = 0;\r\n    let newHeight = 0;\r\n    let orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\r\n    const wantedRatio = this.width / this.height;\r\n    const cropRect = this.crop.getBoundingClientRect();\r\n    const imageRect = this.image.getBoundingClientRect();\r\n    let { movementX, movementY } = getMovementFromEvent(event, this.previousTouch);\r\n    if (Math.abs(movementX) < Math.abs(movementY)){\r\n      orientation = \"vertical\";\r\n    }\r\n\r\n    if (orientation == \"horizontal\"){\r\n      switch (corner) {\r\n        case CornerType.nw:\r\n        case CornerType.sw:\r\n          newWidth = cropRect.width - movementX;\r\n          newHeight = newWidth / wantedRatio;\r\n          break;\r\n        case CornerType.ne:\r\n        case CornerType.se:\r\n          newWidth = cropRect.width + movementX;\r\n          newHeight = newWidth / wantedRatio;\r\n          break;\r\n        default:\r\n          break;\r\n      }\r\n    } else{\r\n      switch (corner) {\r\n        case CornerType.nw:\r\n        case CornerType.ne:\r\n          newHeight = cropRect.height - movementY;\r\n          newWidth = newHeight * wantedRatio;\r\n          break;\r\n        case CornerType.se:\r\n        case CornerType.sw:\r\n          newHeight = cropRect.height + movementY;\r\n          newWidth = newHeight * wantedRatio;\r\n          break;\r\n        default:\r\n          break;\r\n      }\r\n    }\r\n\r\n    switch (corner) {\r\n      case CornerType.ne:\r\n      case CornerType.nw:\r\n        const topOffset = cropRect.height - newHeight;\r\n        top = this.crop.offsetTop + topOffset;\r\n      default:\r\n        break;\r\n    }\r\n\r\n    switch (corner) {\r\n      case CornerType.nw:\r\n      case CornerType.sw:\r\n        const leftOffset = cropRect.width - newWidth;\r\n        left = this.crop.offsetLeft + leftOffset;\r\n        if (left < 0) left = 0;\r\n        if (left > imageRect.width) left = imageRect.width;\r\n        if (top < 0) top = 0;\r\n        if (top > imageRect.height) top = imageRect.height;\r\n        if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\r\n        if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\r\n        break;\r\n      case CornerType.ne:\r\n      case CornerType.se:\r\n        if (top < 0) top = 0;\r\n        if (top > imageRect.height) top = imageRect.height;\r\n        if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\r\n        if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n\r\n    if (newWidth / newHeight != wantedRatio){\r\n      return;\r\n    }\r\n\r\n    if (this.preventUndersized){\r\n      const zoomRatio = this.image.width / this.image.naturalWidth;\r\n      if (newWidth / zoomRatio < this.width || newHeight / zoomRatio < this.height){\r\n        return;\r\n      }\r\n    }\r\n\r\n    switch (corner) {\r\n      case CornerType.ne:\r\n        this.crop.style.top = `${top}px`;\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      case CornerType.nw:\r\n        this.crop.style.left = `${left}px`;\r\n        this.crop.style.top = `${top}px`;\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      case CornerType.se:\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      case CornerType.sw:\r\n        this.crop.style.left = `${left}px`;\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  }\r\n\r\n  private getCornerLeftTop(corner: CornerType): { left: number; top: number; } {\r\n    let left = 0;\r\n    let top = 0;\r\n    switch (corner) {\r\n      case CornerType.se:\r\n        left = this.crop.offsetLeft;\r\n        top = this.crop.offsetTop;\r\n        break;\r\n      case CornerType.sw:\r\n        top = this.crop.offsetTop;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n    return {top, left};\r\n  }\r\n\r\n  private handleCropDrag = (ev: MouseEvent | TouchEvent) => {\r\n    if (!this.isMouseStillInTarget(ev)){\r\n      return;\r\n    }\r\n    let {movementX, movementY} = getMovementFromEvent(ev, this.previousTouch);\r\n    let newLeft = this.crop.offsetLeft + movementX;\r\n    let newTop = this.crop.offsetTop + movementY;\r\n    var imageRect = this.image.getBoundingClientRect();\r\n    var cropRect = this.crop.getBoundingClientRect();\r\n    if (newLeft < 0){\r\n      newLeft = 0;\r\n    }\r\n    if (newTop < 0){\r\n      newTop = 0;\r\n    }\r\n    if (newLeft + cropRect.width > imageRect.width){\r\n      newLeft = this.crop.offsetLeft;\r\n    }\r\n    if (newTop + cropRect.height > imageRect.height){\r\n      newTop = this.crop.offsetTop;\r\n    }\r\n    this.crop.style.left = newLeft + \"px\";\r\n    this.crop.style.top = newTop + \"px\";\r\n  };\r\n\r\n  private isMouseStillInTarget(event: MouseEvent | TouchEvent) {\r\n    var inside = false;\r\n    let mouseX: number;\r\n    let mouseY: number;\r\n    const imageRect = this.image.getBoundingClientRect();\r\n    \r\n    if (event instanceof MouseEvent){\r\n      mouseX = event.clientX;\r\n      mouseY = event.clientY;\r\n    }\r\n\r\n    if (typeof TouchEvent !== \"undefined\"){\r\n      if (event instanceof TouchEvent){\r\n        var touch = event.touches[0];\r\n        mouseX = touch.clientX;\r\n        mouseY = touch.clientY;\r\n      }\r\n    }\r\n    \r\n    if (\r\n      mouseX >= imageRect.x &&\r\n      mouseY >= imageRect.y &&\r\n      mouseX <= imageRect.left + imageRect.width &&\r\n      mouseY <= imageRect.top + imageRect.height)\r\n    {\r\n      inside = true;\r\n    }\r\n\r\n    var corners = this.crop.querySelectorAll(\"div\");\r\n    corners.forEach(corner =>{\r\n      var cornerRect = corner.getBoundingClientRect();\r\n      if (\r\n        mouseX >= cornerRect.x &&\r\n        mouseY >= cornerRect.y &&\r\n        mouseX <= cornerRect.left + cornerRect.width &&\r\n        mouseY <= cornerRect.top + cornerRect.height)\r\n        {\r\n          inside = true;\r\n        }\r\n    })\r\n\r\n    return inside;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host ref={el => this.host = el}>\r\n        <canvas ref={el => this.canvas = el} />\r\n        <div\r\n          class=\"view\"\r\n          ref={el => this.hasPictureView = el}\r\n        >\r\n          <div class=\"cropper\">\r\n            <img ref={el => this.image = el} />\r\n            <div class=\"backdrop\" />\r\n            <div\r\n              class=\"crop\"\r\n              ref={e => this.crop = e}\r\n              onMouseDown={this.handleCropMouseDown}\r\n              onTouchStart={this.handleCropMouseDown}\r\n            >\r\n              <div class=\"nw\" />\r\n              <div class=\"ne\" />\r\n              <div class=\"se\" />\r\n              <div class=\"sw\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"view\"\r\n          ref={el => this.noPictureView = el}>\r\n            <dnn-dropzone\r\n              allowCameraMode\r\n              onFilesSelected={e => this.handleNewFile(e.detail[0])}\r\n              resx={\r\n                {\r\n                  capture: this.resx.capture,\r\n                  dragAndDropFile: this.resx.dragAndDropFile,\r\n                  or: this.resx.or,\r\n                  takePicture: this.resx.takePicture,\r\n                  uploadFile: this.resx.uploadFile,\r\n                }\r\n              }\r\n            />\r\n        </div>\r\n        <dnn-modal ref={el => this.imageTooSmallModal = el} close-text={this.resx.modalCloseText}>\r\n          <p>{this.resx.imageTooSmall.replace(\"{width}\", this.width.toString()).replace(\"{height}\", this.height.toString())}</p>\r\n        </dnn-modal>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\ninterface IComponentInterfaces\r\n{\r\n  View: \"noPictureView\" | \"takingPictureView\" | \"hasPictureView\" | \"hasCroppedPictureView\";\r\n}",":host {\r\n  /**\r\n   * @prop --max-width: The maximum width of the module.\r\n  */\r\n  display: block;\r\n  .overlay{\r\n    background-color: rgba(0,0,0,0.5);\r\n    position: fixed;\r\n    top:0;\r\n    left:0;\r\n    width: 100%;\r\n    height: 100%;\r\n    z-index: 1;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    backdrop-filter: blur(2px);\r\n    transition: all 300ms ease-in-out;\r\n    visibility: hidden;\r\n    opacity: 0;\r\n    .modal{\r\n      max-width: var(--max-width, 1200px);\r\n      background-color: white;\r\n      padding: 30px;\r\n      transform: scale(2);\r\n      transition: all 300ms ease-in-out;\r\n      z-index: 2;\r\n      position: relative;\r\n      margin: 10%;\r\n      max-height: 80%;\r\n      border-radius: var(--dnn-controls-radius, 5px);\r\n      box-shadow: 10px 10px 20px 0 rgba(0,0,0,0.5);\r\n      display: block;\r\n      .close{\r\n        position: absolute;\r\n        background-color:white;\r\n        border: 2px solid white;\r\n        border-radius: 50%;\r\n        padding: 0;\r\n        margin: 0;\r\n        top: -12px;\r\n        right: -12px;\r\n        outline: none;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        &:focus, &:hover{\r\n          box-shadow: 0 0 2px 2px var(--dnn-color-primary, blue);\r\n        }\r\n        svg{\r\n          width: 24px;\r\n          height: 24px;\r\n          color: grey;\r\n        }\r\n      }\r\n    }\r\n    &.visible{\r\n      visibility: visible;\r\n      opacity: 1;\r\n      .modal{\r\n        transform: scale(1);\r\n        box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.5);\r\n        display: block;\r\n      }\r\n    }\r\n  }\r\n}","import { Component, Element, Host, h, Prop, Event, EventEmitter, Method, State } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-modal',\r\n  styleUrl: 'dnn-modal.scss',\r\n  shadow: true\r\n})\r\nexport class DnnModal {\r\n  \r\n  @Element() el!: HTMLDnnModalElement;\r\n  \r\n  /**\r\n   * Pass false to remove the backdrop click auto-dismiss feature.\r\n   */\r\n  @Prop() backdropDismiss: boolean = true;\r\n\r\n  /**\r\n   * Optionally pass the aria-label text for the close button.\r\n   * Defaults to \"Close modal\" if not provided.\r\n   */\r\n  @Prop() closeText?: string = \"Close modal\";\r\n\r\n  /**\r\n   * Optionally you can pass false to not show the close button.\r\n   * If you decide to do so, you should either not also prevent dismissal by clicking the backdrop\r\n   * or provide your own dismissal logic in the modal content.\r\n   */\r\n  @Prop() showCloseButton?: boolean = true;\r\n\r\n  @State() visible: boolean = false;\r\n\r\n  /**\r\n   * Shows the modal\r\n   */\r\n  @Method()\r\n  async show() {\r\n    this.visible = true;\r\n  }\r\n\r\n  /**\r\n   * Hides the modal\r\n   */\r\n  @Method()\r\n  async hide() {\r\n    this.visible = false;\r\n  }\r\n\r\n  /**\r\n   * Fires when the modal is dismissed.\r\n   */\r\n  @Event() dismissed!: EventEmitter;\r\n\r\n  private handleDismiss(){\r\n    this.visible = false;\r\n    this.dismissed.emit();\r\n  }\r\n\r\n  private handleBackdropClick(e: MouseEvent): void {\r\n    const element = (e.target as HTMLElement);\r\n    if (element.id === \"backdrop\" && this.backdropDismiss){\r\n      this.handleDismiss();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div id=\"backdrop\"\r\n          class={this.visible ? 'overlay visible' : 'overlay'}\r\n          onClick={e => this.handleBackdropClick(e)}\r\n        >\r\n          <div class=\"modal\">\r\n            {this.showCloseButton &&\r\n              <button\r\n                class=\"close\"\r\n                aria-label={this.closeText}\r\n                onClick={() => this.handleDismiss()}\r\n              >\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"/></svg>\r\n              </button>\r\n            }\r\n            <slot></slot>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n",":host {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  --background-color: transparent;\r\n  --color: #333;\r\n  --border-size: 1px;\r\n  --border-color: grey;\r\n  --border-active-color: black;\r\n  --border-radius: var(--dnn-controls-radius, 5px);\r\n  --padding: var(--dnn-controls-padding, 5px);\r\n  --focus-color: var(--dnn-color-primary, blue);\r\n  input {\r\n    width:100%;\r\n    border: var(--border-size) solid var(--border-color);\r\n    outline: none;\r\n    border-radius: var(--border-radius);\r\n    padding: var(--padding);\r\n    padding-right: 32px;\r\n    transition: all 300ms ease-in-out;\r\n    &:focus, &:hover{\r\n      outline: none;\r\n      box-shadow: 0 0 2px 2px var(--focus-color);\r\n    }\r\n  }\r\n  svg{\r\n    position: absolute;\r\n    top:0;\r\n    right:0;\r\n    height: 100%;\r\n    transform: scale(0.7);\r\n    fill: var(--color);\r\n    outline: var(--color);\r\n    color: var(--color);\r\n    transition: all 300ms ease-in-out;\r\n  }\r\n  button{\r\n    background: transparent;\r\n    border: 0;\r\n    margin: 0;\r\n    padding: 0;\r\n    &:focus, &:hover{\r\n      svg{\r\n        fill: var(--focus-color);\r\n      outline: var(--focus-color);\r\n      color: var(--focus-color);\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { Component, Host, h, Event, EventEmitter, Watch, Prop } from '@stencil/core';\r\nimport { Debounce } from '../../utilities/debounce';\r\n@Component({\r\n  tag: 'dnn-searchbox',\r\n  styleUrl: 'dnn-searchbox.scss',\r\n  shadow: true\r\n})\r\nexport class DnnSearchbox {\r\n\r\n  /**\r\n   * Sets the field placeholder text.\r\n   */\r\n  @Prop() placeholder?: string = \"\";\r\n\r\n  /**\r\n   * Debounces the queryChanged by 500ms.\r\n   */\r\n  @Prop() debounced: boolean = true;\r\n\r\n  /** Sets the query */\r\n  @Prop({mutable: true}) query: string = \"\";\r\n\r\n  /**\r\n   * Fires up each time the search query changes.\r\n   * The data passed is the new query.\r\n   */\r\n  @Event() queryChanged: EventEmitter;\r\n\r\n  @Watch('query')\r\n  fireQueryChanged(){\r\n    if (this.debounced){\r\n      this.debouncedHandleQueryChanged();\r\n    }\r\n    else{\r\n      this.handleQueryChanged();\r\n    }\r\n  }\r\n  \r\n  private handleQueryChanged(){\r\n    this.queryChanged.emit(this.query);\r\n  }\r\n\r\n  @Debounce(500)\r\n  private debouncedHandleQueryChanged(){\r\n    this.handleQueryChanged();\r\n  }\r\n  \r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <input type=\"text\" value={this.query}\r\n          placeholder={this.placeholder}\r\n          onInput={e => this.query = (e.target as HTMLInputElement).value}\r\n        />\r\n        {this.query !== \"\" ?\r\n          <button class=\"svg clear\"\r\n            onClick={() => this.query = \"\"}\r\n          >\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"/></svg>\r\n          </button>\r\n        :\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"/></svg>\r\n        }\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n",":host {\r\n  /**\r\n  * @prop --color: Normal Color of the inactive sort icon.\r\n  * @prop --color-sorted: Color of the sorted sort icon.\r\n  * @prop --color-hover: Color of the icons when hovered.\r\n  */\r\n  display: inline-block;\r\n}\r\n\r\nbutton {\r\n  outline: none;\r\n  border: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  background-color: transparent;\r\n  outline: none;\r\n  display: inline-block;\r\n  line-height: 1em;\r\n  position: relative;\r\n  top: 0.25em;\r\n  svg{\r\n    height: 1.5em;\r\n    width: auto;\r\n    fill: var(--color, #888);\r\n  }\r\n  &.active{\r\n    svg{\r\n      fill: var(--color-sorted, var(--dnn-color-primary, rgb(2,139,255)));\r\n    }\r\n  }\r\n  &:hover, &:focus{\r\n    svg{\r\n      fill: var(--color-hover, var(--dnn-color-primary-light, #36a1ff));\r\n    }\r\n  }\r\n}","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-sort-icon',\r\n  styleUrl: 'dnn-sort-icon.scss',\r\n  shadow: true\r\n})\r\nexport class DnnSortIcon {\r\n  /** Defines the current sort direction */\r\n  @Prop() sortDirection: \"asc\" | \"desc\" | \"none\" = \"none\";\r\n\r\n  /** Emitted when the sort is changed. */\r\n  @Event() sortChanged!: EventEmitter<\"asc\"|\"desc\"|\"none\">;\r\n  \r\n  private changeSort(): void {\r\n    switch (this.sortDirection) {\r\n      case \"asc\":\r\n        this.sortDirection = \"desc\";\r\n        break;\r\n      case \"desc\":\r\n        this.sortDirection = \"asc\";\r\n        break;\r\n      case \"none\":\r\n        this.sortDirection = \"asc\";\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n\r\n    this.sortChanged.emit(this.sortDirection);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button\r\n          class={{\"active\": this.sortDirection != \"none\"}}\r\n          onClick={() => this.changeSort()}\r\n        >\r\n          {this.sortDirection == \"none\" &&\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 7 H 12 L 6 0 Z M 0 9 H 12 L 6 16 Z\"></path></svg>\r\n          }\r\n          {this.sortDirection == \"asc\" &&\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 7 H 12 L 6 0 Z\"></path></svg>\r\n          }\r\n          {this.sortDirection == \"desc\" &&\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 16\"><path d=\"M 0 9 H 12 L 6 16 Z\"></path></svg>\r\n          }\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n",null,"import { Component, Host, h, Prop, State, Method } from \"@stencil/core\";\r\n\r\n/** Represents a single tab and must be used inside a dnn-tabs element. */\r\n@Component({\r\n    tag: 'dnn-tab',\r\n    styleUrl: 'dnn-tab.scss',\r\n    shadow: true,\r\n})\r\nexport class DnnTab {\r\n    /** Defines the tab title. */\r\n    @Prop() tabTitle!: string;\r\n\r\n    @State() visible: boolean = false;\r\n\r\n    /** Shows the tab. */\r\n    @Method()\r\n    async show(){\r\n        this.visible = true;\r\n    }\r\n\r\n    /** Hides the modal */\r\n    @Method()\r\n    async hide(){\r\n        this.visible = false;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Host>\r\n                {this.visible &&\r\n                    <slot></slot>\r\n                }\r\n            </Host>\r\n        );\r\n    }\r\n}",":host {\r\n    /**\r\n    * @prop --color-background: The color of the inactive tabs.\r\n    * @prop --color-text: The color of the text for inactive tabs.\r\n    * @prop --color-visible: The color of the active tab.\r\n    * @prop --color-visible-text: The color of the text for the active tab.\r\n    * @prop --color-focus: outline color when hovering or pre-selecting a tab.\r\n    */\r\n    display: block;\r\n    --color-background: var(--dnn-color-secondary-dark, lightgray);\r\n    --color-text: var(--dnn-color-secondary-contrast, #333);\r\n    --color-visible: var(--dnn-color-primary, #3792ED);\r\n    --color-visible-text: var(--dnn-color-primary-contrast, #FFF);\r\n    --color-focus: var(--dnn-color-primary, #3792ed);\r\n  }\r\n\r\n  .tabTitles{\r\n      display: flex;\r\n      background-color: var(--color-background);\r\n      color: var(--color-text);\r\n      button{\r\n          padding: 0.5rem 1rem;\r\n          border: 0;\r\n          margin: 0;\r\n          background-color: transparent;\r\n          &.visible{\r\n              background-color: var(--color-visible);\r\n              color: var(--color-bisible-text);\r\n          }\r\n          &:focus, &:hover{\r\n            outline: none;\r\n            box-shadow: 0 0 2px 2px var(--color-focus);\r\n          }\r\n      }\r\n  }\r\n\r\n  .currentTab{\r\n      border: 1px solid var(--color-background);\r\n      padding: 1rem;\r\n  }","import { Component, Host, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: 'dnn-tabs',\r\n    styleUrl: 'dnn-tabs.scss',\r\n    shadow: true,\r\n})\r\nexport class DnnTabs {\r\n    private component: HTMLElement;\r\n\r\n    @State() tabTitles: string[] = [];\r\n    @State() selectedTabTitle: string = \"\";\r\n\r\n    componentDidLoad(){\r\n        requestAnimationFrame(() => {\r\n            this.updateTitles();\r\n            this.showFirstTab();\r\n        });\r\n    }\r\n\r\n    private getTabs() {\r\n        return this.component.shadowRoot.querySelector(\"slot\").assignedElements() as HTMLDnnTabElement[];\r\n    }\r\n\r\n    private updateTitles(){\r\n        const tabs = this.getTabs();\r\n        tabs.forEach(tab => this.tabTitles = [...this.tabTitles, tab.tabTitle]);\r\n    }\r\n\r\n    private showFirstTab(){\r\n        const tab = this.getTabs()[0];\r\n        tab.show();\r\n        this.selectedTabTitle = tab.tabTitle;\r\n    }\r\n\r\n    private showTab(tabTitle: string) {\r\n        const tabs = this.getTabs();\r\n        tabs.forEach(tab => {\r\n            if (tab.tabTitle == tabTitle){\r\n                tab.show();\r\n                return;\r\n            }\r\n\r\n            tab.hide();\r\n        });\r\n        this.selectedTabTitle = tabTitle;\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Host ref={el => this.component = el}>\r\n                <div class=\"tabTitles\">\r\n                    {this.tabTitles.map(tabTitle =>\r\n                        <button\r\n                            class={this.selectedTabTitle == tabTitle ? \"visible\": \"\"}\r\n                            onClick={() => this.showTab(tabTitle)}\r\n                        >\r\n                            {tabTitle}\r\n                        </button>\r\n                    )}\r\n                </div>\r\n                <div class=\"currentTab\">\r\n                    <slot></slot>\r\n                </div>\r\n            </Host>\r\n        );\r\n    }\r\n}",":host {\r\n    /**\r\n     * @prop --background: Background of the toggle.\r\n     * @prop --background-checked: Background of the toggle when checked.\r\n     * @prop --handle-background:  Background of the handle.\r\n     * @prop --handle-background-checked:  Background of the handle when checked.\r\n     * @prop --border-radius: The radius of the background borders.\r\n     * @prop --handle-border-radius: The radius of the handle.\r\n    */\r\n\r\n    display: inline-block;\r\n    outline: none;\r\n    cursor: pointer;\r\n}\r\n\r\nbutton {\r\n    height: 1.5em;\r\n    width: 2.5em;\r\n    outline: none;\r\n    background-color: var(--background, #888);\r\n    border: 0;\r\n    border-radius: var(--border-radius, var(--dnn-controls-radius, 0.75em));\r\n    padding: 0.1em;\r\n    position: relative;\r\n    margin: 0;\r\n    transition: background-color 300ms ease-in-out;\r\n    position: relative;\r\n    cursor: pointer;\r\n    &:hover, &:focus{\r\n        box-shadow: 0 0 2px 2px var(--dnn-color-primary);\r\n    }\r\n    &.checked{\r\n        background-color: var(--background-checked, var(--dnn-color-primary, blue));\r\n        .handle{\r\n            left: calc(1em + 4px);\r\n        }\r\n    }\r\n    &:disabled{\r\n        opacity: 0.5;\r\n        cursor: not-allowed;\r\n        box-shadow: none;\r\n    }\r\n    .handle{\r\n        transition: all 300ms ease-in-out;\r\n        background-color:white;\r\n        width: 1em;\r\n        height: 1em;\r\n        border-radius: var(--dnn-controls-radius, 50%);\r\n        position: absolute;\r\n        top: calc(50% - 0.5em);\r\n        left: 2px;\r\n    }\r\n}","import { Component, h, Element, Prop, Event, EventEmitter, Watch, Host } from \"@stencil/core\";\r\nimport { DnnToggleChangeEventDetail } from \"./toggle-interface\";\r\n\r\n\r\n@Component({\r\n    tag: \"dnn-toggle\",\r\n    styleUrl: \"dnn-toggle.scss\",\r\n    shadow: true\r\n})\r\nexport class DnnToggle {\r\n\r\n    @Element() element: HTMLDnnToggleElement;\r\n\r\n    /** If 'true' the toggle is checked (on). */\r\n    @Prop({mutable: true}) checked = false;\r\n\r\n    /** If 'true' the toggle is not be interacted with. */\r\n    @Prop() disabled = false;\r\n\r\n    /** Fires when the toggle changed */\r\n    @Event() checkChanged!: EventEmitter<DnnToggleChangeEventDetail>;\r\n\r\n    @Watch(\"checked\")\r\n    checkedChanged(isChecked: boolean){\r\n        this.checkChanged.emit({checked: isChecked});\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <Host>\r\n                <button disabled={this.disabled} class={{'checked': this.checked}}\r\n                    onClick={() => {\r\n                        if (!this.disabled) {\r\n                            this.checked = !this.checked;\r\n                        }\r\n                    }}\r\n                >\r\n                    <div class=\"handle\"></div>\r\n                </button>\r\n            </Host>\r\n        );\r\n    }\r\n}\r\n",":host {\r\n  display: flex;\r\n  overflow: visible;\r\n}\r\n.expander{\r\n  width: 24px;\r\n  height: 24px;\r\n  button{\r\n    transition: all 150ms ease-in-out;\r\n    background-color:transparent;\r\n    border: none;\r\n    padding: 0;\r\n    margin: 0;\r\n    height: 1em;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    cursor: pointer;\r\n    position: relative;\r\n    top: 2px;\r\n    svg{\r\n      :first-child{\r\n        transition: all 150ms ease-in-out;\r\n        fill: white;\r\n        stroke: black\r\n      }\r\n    }\r\n  }\r\n  &.expanded{\r\n    button{\r\n      transform: rotate(45deg);\r\n      svg{\r\n        :first-child{\r\n          fill: black;\r\n          stroke: black;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\ndiv.item{\r\n  .item-slot{\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.25em;\r\n    min-height: 24px;\r\n  }\r\n  div.children{\r\n    overflow: hidden;\r\n    height:0;\r\n    transition: all 150ms ease-in-out;\r\n  }\r\n}","import { Component, Host, h, Prop, State, Element, Event, EventEmitter, Watch } 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, reflect: true}) expanded: boolean = false;\r\n\r\n  /** Fires when the user expands a node. */\r\n  @Event({bubbles: false}) userExpanded: EventEmitter<void>;\r\n\r\n  /** Fires when the user collapses a node. */\r\n  @Event({bubbles: false}) userCollapsed: EventEmitter<void>;\r\n\r\n  /** Manages state for whether or not item has children. */\r\n  @State() hasChildren: boolean = false;\r\n\r\n  /** Watch expanded Prop */\r\n  @Watch('expanded')\r\n  watchExpanded(expanded: boolean) {\r\n    if (expanded) {\r\n      this.expander.classList.add(\"expanded\");\r\n      this.collapsible.expanded = true;\r\n      return;\r\n    }\r\n    \r\n    this.expander.classList.remove(\"expanded\");\r\n    this.collapsible.expanded = false;\r\n  }\r\n      \r\n  \r\n  private childElement!: HTMLDivElement;\r\n  private collapsible!: HTMLDnnCollapsibleElement;\r\n\r\n  componentDidLoad() {\r\n    requestAnimationFrame(() => {\r\n      const child = this.childElement.children[0] as HTMLSlotElement;\r\n      const count = child.assignedElements().length\r\n      if (count > 0){\r\n        this.hasChildren = true;\r\n      }\r\n      if (this.expanded){\r\n        this.expander.classList.add(\"expanded\");\r\n        this.collapsible.expanded = false;\r\n        setTimeout(() => {\r\n          this.collapsible.expanded = true;\r\n        }, 300);\r\n      }\r\n    });\r\n  }\r\n\r\n  private toggleCollapse(): void {\r\n    this.expanded = !this.expanded;\r\n    if (this.expanded){\r\n      this.expander.classList.add(\"expanded\");\r\n      this.userExpanded.emit();\r\n      return;\r\n    }\r\n\r\n    this.expander.classList.remove(\"expanded\");\r\n    this.userCollapsed.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"expander\" ref={el => this.expander = el}>\r\n          {this.hasChildren &&\r\n            <button\r\n              onClick={() => this.toggleCollapse()}\r\n            >\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M10 17l5-5-5-5v10z\"/><path d=\"M0 24V0h24v24H0z\" fill=\"none\"/></svg>\r\n            </button>\r\n          }\r\n        </div>\r\n        <div class=\"item\">\r\n          <div class=\"item-slot\">\r\n            <slot></slot>\r\n          </div>\r\n          <dnn-collapsible ref={el => this.collapsible = el} expanded={this.expanded}>\r\n            <div ref={el => this.childElement = el}>\r\n              <slot name=\"children\"></slot>\r\n            </div>\r\n          </dnn-collapsible>\r\n          </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\nexport interface ExpandedToggledEvent{\r\n  state: \"expanded\" | \"collapsed\";\r\n  height: number;\r\n}",":host {\r\n  display: block;\r\n\r\n  /** Defines the menu background color. */\r\n  --background-color: var(--dnn-color-primary-contrast, white);\r\n\r\n  /** A color that contrasts well over the background color. */\r\n  --foreground-color: var(--dnn-color-primary, blue);\r\n\r\n  /** The color of the text. */\r\n  --text-color: #222;\r\n}\r\n\r\n.menu-container{\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  background-color: var(--background-color);\r\n  color: var(--text-color);\r\n  .menu{\r\n    margin: 0.5em;\r\n    display: flex;\r\n    gap: 1em;\r\n    justify-content: flex-start;\r\n    align-items: center;\r\n    white-space: nowrap;\r\n    width: 100%;\r\n  }\r\n  .overflow {\r\n    margin-left: auto;\r\n    position: relative;\r\n    button{\r\n      cursor: pointer;\r\n      svg{\r\n        fill: var(--foreground-color);\r\n      }\r\n      padding: 0;\r\n      margin: 0;\r\n      background-color: transparent;\r\n      border: none;\r\n    }\r\n    .dropdown{\r\n      position:absolute;\r\n      display: flex;\r\n      flex-direction: column;\r\n      white-space: nowrap;\r\n      right: 0;\r\n      transition: 100ms ease-in-out;\r\n      height: 0;\r\n      overflow: hidden;\r\n      &.visible{\r\n        padding: 1em;\r\n        gap: 0.5em;\r\n        background-color: var(--background-color);\r\n        box-shadow: 2px 2px 4px rgba(0,0,0,0.7);\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { Component, Element, Host, h, State } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-vertical-overflow-menu',\r\n  styleUrl: 'dnn-vertical-overflow-menu.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnVerticalOverflowMenu {\r\n\r\n  @Element() element!: HTMLDnnVerticalOverflowMenuElement;\r\n  \r\n  @State() showDropdownButton = false;\r\n  @State() showDropdownMenu = false;\r\n\r\n  private menu!: HTMLDivElement;\r\n  private dropdown: HTMLDivElement;\r\n  private resizeObserver: ResizeObserver;\r\n  private button!: HTMLButtonElement;\r\n  private previousMenuWidth = 0;\r\n\r\n  componentDidRender() {\r\n    requestAnimationFrame(() => {\r\n      this.moveItemsToDropDownIfNecessery();\r\n      this.resizeObserver = new ResizeObserver(entries => {\r\n        for (let entry of entries){\r\n          if (entry.contentRect.width < this.previousMenuWidth){\r\n            this.moveItemsToDropDownIfNecessery()\r\n          }\r\n          if (this.previousMenuWidth > 0 && entry.contentRect.width > this.previousMenuWidth){\r\n            this.moveItemsToMenuIfPossible();\r\n          }\r\n          this.previousMenuWidth = entry.contentRect.width;\r\n        }\r\n      });\r\n      this.resizeObserver.observe(this.element);\r\n    });\r\n  }\r\n\r\n  private moveItemsToDropDownIfNecessery(){\r\n    const menuItems = Array.from(this.menu.querySelector(\"slot\").assignedElements());\r\n    const availableWidth = this.menu.getBoundingClientRect().width;\r\n    let neededWidth = parseFloat(getComputedStyle(this.element).fontSize)*2;\r\n    menuItems.forEach(item => neededWidth += this.getFullWidth(item));\r\n    neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);\r\n    if (neededWidth > availableWidth){\r\n      this.showDropdownButton = true;\r\n      var lastItem = menuItems[menuItems.length -1];\r\n      if (this.dropdown == undefined){\r\n        return;\r\n      }\r\n      lastItem.slot = \"dropdown\";\r\n      this.moveItemsToDropDownIfNecessery();\r\n    }\r\n  }\r\n  \r\n  private moveItemsToMenuIfPossible(){\r\n    if (this.dropdown == undefined || !this.dropdown.hasChildNodes()){\r\n      return;\r\n    }\r\n    const menuItems = Array.from(this.menu.querySelector(\"slot\").assignedElements());\r\n    const availableWidth = this.menu.getBoundingClientRect().width;\r\n    let neededWidth = parseFloat(getComputedStyle(this.element).fontSize)*2;\r\n    neededWidth += (menuItems.length - 1) * parseFloat(getComputedStyle(this.element).fontSize);\r\n    menuItems.forEach(item => neededWidth += this.getFullWidth(item));\r\n    const firstItem = this.dropdown.querySelector(\"slot\").assignedElements()[0];\r\n    if (firstItem != undefined){\r\n      neededWidth += this.getFullWidth(firstItem);\r\n    }\r\n\r\n    if (neededWidth < availableWidth){\r\n      if (firstItem != undefined){\r\n        firstItem.slot = \"\";\r\n      }\r\n      if(firstItem == undefined){\r\n        this.dropdown.classList.remove(\"visible\");\r\n        this.showDropdownMenu = false;\r\n        this.showDropdownButton = false;\r\n      }\r\n    }    \r\n  }\r\n\r\n  private getFullWidth(item: Element) {\r\n    var width = item.getBoundingClientRect().width;\r\n    var styles = getComputedStyle(item);\r\n    width += parseFloat(styles.marginLeft);\r\n    width += parseFloat(styles.marginRight);\r\n    width += parseFloat(styles.paddingLeft);\r\n    width += parseFloat(styles.paddingRight);\r\n    return width;\r\n  }\r\n\r\n  private toggleOverflowMenu(): void {\r\n    this.showDropdownMenu = !this.showDropdownMenu;\r\n    if (this.showDropdownMenu){\r\n      this.dropdown.classList.add(\"visible\");\r\n      let contentHeight = 0;\r\n      const items = Array.from(this.dropdown.querySelector(\"slot\").assignedElements());\r\n      items.forEach(item => contentHeight += item.getBoundingClientRect().height);\r\n      var emHeight = parseFloat(getComputedStyle(this.dropdown).fontSize) * 0.5;\r\n      var additionalHeight = emHeight * (this.dropdown.children.length - 1);\r\n      contentHeight += additionalHeight;\r\n      this.dropdown.style.height = `${contentHeight}px`;\r\n      const dismissMenu = (e: MouseEvent) => {\r\n        const buttonRect = this.button.getBoundingClientRect();\r\n        if (\r\n          e.clientX < buttonRect.left ||\r\n          e.clientX > buttonRect.right ||\r\n          e.clientY < buttonRect.top ||\r\n          e.clientY > buttonRect.bottom){\r\n            this.toggleOverflowMenu();\r\n          }\r\n          document.removeEventListener(\"click\", dismissMenu);\r\n      };\r\n      setTimeout(() => {\r\n        document.addEventListener(\"click\", dismissMenu, false);\r\n      }, 100);\r\n    }\r\n    else{\r\n      this.dropdown.classList.remove(\"visible\");\r\n      this.dropdown.style.height = \"0px\";\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"menu-container\">\r\n          <div class=\"menu\" ref={el => this.menu = el}>\r\n            <slot></slot>\r\n          </div>\r\n            {this.showDropdownButton &&\r\n              <div class=\"overflow\">\r\n                <button\r\n                  ref={el => this.button = el}\r\n                  class=\"icon\"\r\n                  onClick={() => this.toggleOverflowMenu()}>\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"/></svg>\r\n                </button>\r\n                <div class=\"dropdown\" ref={el => this.dropdown = el}>\r\n                  <slot name=\"dropdown\"></slot>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n",":host {\r\n  display: flex;\r\n  align-items: stretch;\r\n  margin: 0 auto;\r\n  position: relative;\r\n\r\n  /** @prop --left-pane-background-color:  Allows customizing the left pane background-color */\r\n  --left-pane-background-color: transparent;\r\n\r\n  /** @prop --right-pane-background-color: Allows customizing the right pane background-color */\r\n  --right-pane-background-color: transparent;\r\n}\r\n\r\nbutton{\r\n  border: none;\r\n  margin:0;\r\n  padding:0;\r\n  cursor: ew-resize;\r\n  position: absolute;\r\n  height: 100%;\r\n  background-color: transparent;\r\n  &.transition{\r\n    transition: all 300ms ease-in-out;\r\n  }\r\n}\r\n\r\n\r\n.pane{\r\n  overflow-y: auto;\r\n  &.transition{\r\n    transition: all 300ms ease-in-out;\r\n  }\r\n  &.left{\r\n    background-color: var(--left-pane-background-color);\r\n  }\r\n  &.right{\r\n    background-color: var(--right-pane-background-color);\r\n    flex-grow: 1;\r\n  }\r\n}","import { Component, Host, h, Prop, Element, State, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { getMovementFromEvent } from \"../../utilities/mouseUtilities\";\r\n\r\n/**\r\n * @slot default - The split divider control you want to use.\r\n * @slot left - The content of the left pane.\r\n * @slot right - The content of the right pane.\r\n */\r\n@Component({\r\n  tag: 'dnn-vertical-splitview',\r\n  styleUrl: 'dnn-vertical-splitview.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnVerticalSplitview {\r\n\r\n  /** The width of the splitter area. */\r\n  @Prop() splitterWidth = 16;\r\n\r\n  /** The percentage position of the splitter in the container. */\r\n  @Prop({mutable: true}) splitWidthPercentage = 30;\r\n  \r\n  private splitter!: HTMLButtonElement;\r\n\r\n  private resizeObserver: ResizeObserver;\r\n\r\n  /** Sets the width percentage of the divider */\r\n  @Method()\r\n  async setSplitWidthPercentage(newWidth: number) {\r\n    const panes = this.element.shadowRoot.querySelectorAll(\".pane\");\r\n    requestAnimationFrame(() => {\r\n      panes.forEach(pane => pane.classList.add(\"transition\"));\r\n      this.splitter.classList.add(\"transition\");\r\n      requestAnimationFrame(() => {\r\n        const fullWidth = this.element.getBoundingClientRect().width;\r\n        let newLeft = fullWidth * newWidth / 100;\r\n        if (newLeft < 0){\r\n          newLeft = 0;\r\n        }\r\n        if (newLeft > fullWidth){\r\n          newLeft = fullWidth;\r\n        }\r\n        this.leftWidth = newLeft;\r\n        this.rightWidth = fullWidth - newLeft;\r\n        setTimeout(() => {\r\n          panes.forEach(pane => pane.classList.remove(\"transition\"));\r\n          this.splitter.classList.remove(\"transition\");\r\n        }, 300);\r\n      });\r\n    });\r\n  }\r\n\r\n  /** Gets the current divider position percentage. */\r\n  @Method()\r\n  async getSplitWidthPercentage(){\r\n    const fullWidth = this.element.getBoundingClientRect().width;\r\n    return this.leftWidth / fullWidth;\r\n  }\r\n\r\n  /** Fires when the width of the divider changes. */\r\n  @Event() widthChanged: EventEmitter<number>;\r\n\r\n  @State() leftWidth = 0;\r\n  @State() rightWidth = 0;\r\n\r\n  @Element() element : HTMLDnnVerticalSplitviewElement;\r\n  \r\n  componentDidLoad() {\r\n    requestAnimationFrame(() => {\r\n      this.resizeObserver = new ResizeObserver(() => {\r\n        const fullWidth = this.element.getBoundingClientRect().width;\r\n        this.leftWidth = fullWidth * this.splitWidthPercentage / 100;\r\n        this.rightWidth = fullWidth - this.leftWidth;\r\n        this.widthChanged.emit(this.splitWidthPercentage);\r\n      });\r\n      this.resizeObserver.observe(this.element);\r\n    });\r\n  }\r\n  \r\n  private previousTouch: Touch;\r\n\r\n  private handleMouseDown(event: MouseEvent | TouchEvent) {\r\n    event.preventDefault();\r\n    const handleDrag = (ev: MouseEvent | TouchEvent) => {\r\n      requestAnimationFrame(() => {\r\n        let fullWidth = this.element.getBoundingClientRect().width;\r\n        let {movementX} = getMovementFromEvent(ev, this.previousTouch);\r\n        let newLeft = this.leftWidth + movementX;\r\n        if (newLeft < 0){\r\n          newLeft = 0;\r\n        }\r\n        if (newLeft > fullWidth){\r\n          newLeft = fullWidth;\r\n        }\r\n        this.leftWidth = newLeft;\r\n        this.rightWidth = fullWidth - newLeft;\r\n        this.splitWidthPercentage = this.leftWidth / fullWidth * 100;\r\n      });\r\n    }\r\n    const handleDragFinished = () => {\r\n      document.removeEventListener(\"mousemove\", handleDrag);\r\n      document.removeEventListener(\"touchmove\", handleDrag);\r\n      const fullWidth = this.element.getBoundingClientRect().width;\r\n      const newPercentage = this.leftWidth / fullWidth * 100;\r\n      this.widthChanged.emit(newPercentage);\r\n    };\r\n    document.addEventListener(\"mouseup\", handleDragFinished);\r\n    document.addEventListener(\"touchend\", handleDragFinished);\r\n    document.addEventListener(\"mousemove\", handleDrag);\r\n    document.addEventListener(\"touchmove\", handleDrag);\r\n  }\r\n\r\n  private handleKeyDown(e: KeyboardEvent): void {\r\n    let movementX = 0;\r\n    switch (e.key) {\r\n      case \"ArrowLeft\":\r\n        movementX = -10;\r\n        break;\r\n      case \"ArrowRight\":\r\n        movementX = 10;\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n    if (e.shiftKey){\r\n      movementX = movementX * 10;\r\n    }\r\n    const fullWidth = this.element.getBoundingClientRect().width;\r\n    let newLeft = this.leftWidth + movementX;\r\n    if (newLeft < 0){\r\n      newLeft = 0;\r\n    }\r\n    if (newLeft > fullWidth){\r\n      newLeft = fullWidth;\r\n    }\r\n    this.leftWidth = newLeft;\r\n    this.rightWidth = fullWidth - this.leftWidth;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n          <div class=\"left pane\" style={{\r\n              width: `${this.leftWidth}px`,\r\n            }}>\r\n            <slot name=\"left\"></slot>\r\n          </div>\r\n          <button\r\n            onMouseDown={e => this.handleMouseDown(e)}\r\n            onTouchStart={e => this.handleMouseDown(e)}\r\n            onKeyDown={e => this.handleKeyDown(e)}\r\n            ref={el => this.splitter = el}\r\n            style={{\r\n              minWidth: `${this.splitterWidth.toString()}px`,\r\n              left: `${this.leftWidth - 2}px`,\r\n            }}\r\n          >\r\n            <slot></slot>\r\n          </button>\r\n          <div\r\n            class=\"right pane\"\r\n            style={{\r\n              width: `${this.rightWidth}px`,\r\n            }}>\r\n            <slot name=\"right\"></slot>\r\n          </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/dnn/p-8ec1f3a8.entry.js

@@ -1,11 +0,0 @@
-import{r as t,c as e,h as i,H as o,g as s}from"./p-45ce2139.js";import{D as n}from"./p-0e94f5ee.js";const r=":host{--background-color:transparent;--color:#333;--border-size:1px;--border-color:var(--backround-color);--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);display:inline-block;width:auto}:host(.disabled){pointer-events:none}:host(.primary){--background-color:var(--dnn-color-primary, blue);--color:var(--dnn-color-primary-contrast, white);--focus-color:var(--background-color)}:host(.primary.reversed){--background-color:var(--dnn-color-primary-contrast, white);--color:var(--dnn-color-primary, blue);--border-color:var(--dnn-color-primary, blue);--focus-color:var(--color)}:host(.secondary){--background-color:var(--dnn-color-secondary, green);--color:var(--dnn-color-secondary-contrast, white);--focus-color:var(--background-color)}:host(.secondary.reversed){--background-color:var(--dnn-color-secondary-contrast, white);--color:var(--dnn-color-secondary, blue);--border-color:var(--dnn-color-secondary, blue);--focus-color:var(--color)}:host(.tertiary){--background-color:var(--dnn-color-tertiary, yellow);--color:var(--dnn-color-tertiary-contrast, black);--focus-color:var(--background-color)}:host(.tertiary.reversed){--background-color:var(--dnn-color-tertiary-contrast, white);--color:var(--dnn-color-tertiary, blue);--border-color:var(--dnn-color-tertiary, blue);--focus-color:var(--color)}:host(.hydrated) button{border:var(--border-size) solid var(--border-color);border-radius:var(--border-radius);padding:var(--padding) calc(var(--padding) * 2);background-color:transparent;background-color:var(--background-color);color:var(--color);outline:none}:host(.hydrated) button:focus,:host(.hydrated) button:hover{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}:host(:disabled,[disabled]) button{pointer-events:none;opacity:0.5}:host(.small) button{padding:calc(var(--padding) / 2) var(--padding);font-size:0.7em}:host(.large) button{padding:calc(var(--padding) * 1.5) calc(var(--padding) * 3);font-size:1.2em}button{height:100%;width:100%;cursor:pointer}";let l=class{constructor(i){t(this,i);this.confirmed=e(this,"confirmed",3);this.canceled=e(this,"canceled",3);this.type="primary";this.reversed=false;this.size="normal";this.confirm=false;this.confirmYesText="Yes";this.confirmNoText="No";this.confirmMessage="Are you sure ?";this.disabled=false;this.modalVisible=false}componentDidLoad(){this.el.classList.add(this.type);if(this.reversed){this.el.classList.add("reversed")}if(this.size!=="normal"){this.el.classList.add(this.size)}this.modal=this.el.shadowRoot.querySelector("dnn-modal")}handleConfirm(){this.modal.hide();this.modalVisible=false;this.confirmed.emit()}handleCancel(){this.modal.hide();this.modalVisible=false;this.canceled.emit()}handleClick(){if(this.confirm&&!this.modalVisible){this.modal.show();this.modalVisible=true}}render(){return i(o,{disabled:this.disabled,style:{"pointer-events":this.disabled?"none":"all"}},i("button",{class:"button",onClick:()=>this.handleClick(),disabled:this.disabled},i("slot",null)),this.confirm&&i("dnn-modal",{showCloseButton:false,backdropDismiss:false},i("p",null,this.confirmMessage),i("div",{style:{display:"flex",justifyContent:"flex-end"}},i("dnn-button",{type:"primary",style:{margin:"5px"},onClick:()=>this.handleConfirm()},this.confirmYesText),i("dnn-button",{type:"secondary",style:{margin:"5px"},onClick:()=>this.handleCancel()},this.confirmNoText))))}get el(){return s(this)}};l.style=r;const a=":host{--focus-color:var(--dnn-color-primary, #3792ED);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:0.25rem;margin:3px}button{background-color:transparent;border:0;padding:0;margin:0;outline:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}button svg.undefined{opacity:0.45}button:focus{-webkit-box-shadow:0 0 2px 2px var(--focus-color);box-shadow:0 0 2px 2px var(--focus-color)}";let h=class{constructor(i){t(this,i);this.checkedchange=e(this,"checkedchange",7);this.checked=false;this.useIntermediate=false}changeState(){if(!this.useIntermediate){this.checked=!this.checked;this.emitEvents();return}if(this.checked===true){this.checked=false;this.button.classList.remove("undefined");this.emitEvents();return}if(this.checked===undefined){this.checked=true;this.button.classList.remove("undefined");this.emitEvents();return}if(this.checked===false){this.checked=undefined;this.button.classList.add("undefined");this.emitEvents();return}}emitEvents(){this.checkedchange.emit(this.checked)}render(){return i(o,null,i("button",{class:"icon",onClick:()=>this.changeState(),ref:t=>this.button=t},this.checked===false&&i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"})),this.checked===true&&i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"})),this.checked===undefined&&i("svg",{class:"undefined",xmlns:"http://www.w3.org/2000/svg","enable-background":"new 0 0 24 24",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("g",null,i("rect",{fill:"none",height:"24",width:"24"})),i("g",null,i("g",null,i("g",null,i("path",{d:"M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z"})))))),i("label",{htmlFor:this.el.id,onClick:()=>this.changeState()},i("slot",null)))}get el(){return s(this)}};h.style=a;const d=":host{display:inline-block}button{border:none;padding:0px;margin:0px;min-width:15px;min-height:15px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;background-color:transparent;outline:none}svg{height:2em;width:2em;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}button:focus svg,button:hover svg{color:var(--dnn-color-primary)}:host([expanded]) svg{-webkit-transform:rotate(90deg);transform:rotate(90deg)}";let c=class{constructor(i){t(this,i);this.changed=e(this,"changed",7);this.expandText="expand";this.collapseText="collapse";this.expanded=false}handleExpandedChanged(t){this.changed.emit(t)}render(){return i(o,null,i("button",{"aria-label":this.expanded?this.collapseText:this.expandText,onClick:()=>this.expanded=!this.expanded},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"}))))}static get watchers(){return{expanded:["handleExpandedChanged"]}}};c.style=d;const p=":host{display:block}#container{max-height:0;overflow:hidden;-webkit-transition:max-height 300ms ease-in-out;transition:max-height 300ms ease-in-out}";let u=class{constructor(i){t(this,i);this.dnnCollapsibleHeightChanged=e(this,"dnnCollapsibleHeightChanged",7);this.expanded=false;this.transitionDuration=150}handleHeightChanged(){requestAnimationFrame((()=>{this.updateSize()}))}async updateSize(){if(this.expanded){requestAnimationFrame((()=>{this.container.style.maxHeight=`${this.container.scrollHeight}px`}));setTimeout((()=>{this.container.style.maxHeight="none"}),this.transitionDuration)}}handledExpandedChanged(t){if(t){this.updateSize()}else{requestAnimationFrame((()=>{this.container.style.maxHeight=`${this.container.scrollHeight}px`;requestAnimationFrame((()=>{this.container.style.maxHeight="0px"}))}))}setTimeout((()=>{requestAnimationFrame((()=>{this.dnnCollapsibleHeightChanged.emit()}))}),this.transitionDuration)}render(){return i(o,null,i("div",{id:"container",class:this.expanded&&"expanded",ref:t=>this.container=t},i("slot",null)))}get el(){return s(this)}static get watchers(){return{expanded:["handledExpandedChanged"]}}};u.style=p;
-/** Color utility class with hsl and rgb converters
- * based on math at https://en.wikipedia.org/wiki/HSL_and_HSV
- * @copyright Copyright (c) .NET Foundation. All rights reserved.
- * @license MIT
- */class f{constructor(){this._hue=0;this._saturation=0;this._lightness=0}get hue(){return this._hue}set hue(t){if(t<0){t=0}if(t>359){t=359}this._hue=t}get saturation(){return this._saturation}set saturation(t){if(t<0){t=0}if(t>1){t=1}this._saturation=t}get lightness(){return this._lightness}set lightness(t){if(t<0){t=0}if(t>1){t=1}this._lightness=t}get red(){return this.getRGB().red}set red(t){this.setHSL(t,this.green,this.blue)}get green(){return this.getRGB().green}set green(t){this.setHSL(this.red,t,this.blue)}get blue(){return this.getRGB().blue}set blue(t){this.setHSL(this.red,this.green,t)}get hex(){var t=this.getHex(this.red);var e=this.getHex(this.green);var i=this.getHex(this.blue);return t+e+i}set hex(t){this.red=parseInt(t.substr(0,2));this.green=parseInt(t.substr(2,2));this.blue=parseInt(t.substr(4,2))}get contrastColor(){const t=(this.red*299+this.green*587+this.blue*114)/1e3;if(t>127){return"000000"}return"FFFFFF"}getRGB(){const t=(1-Math.abs(2*this._lightness-1))*this.saturation;const e=this._hue/60;const i=t*(1-Math.abs(e%2-1));let o=0,s=0,n=0;if(0<=e&&e<=1){o=t;s=i}else if(1<=e&&e<=2){s=t;o=i}else if(2<=e&&e<=3){s=t;n=i}else if(3<=e&&e<=4){n=t;s=i}else if(4<=e&&e<=5){n=t;o=i}else if(5<=e&&e<=6){o=t;n=i}const r=this._lightness-t/2;return{red:Math.round((o+r)*255),green:Math.round((s+r)*255),blue:Math.round((n+r)*255)}}setHSL(t,e,i){const o=t/255,s=e/255,n=i/255;const r=Math.min(o,s,n);const l=Math.max(o,s,n);const a=l-r;let h=0,d=0,c=0;if(a===0){h=0}else if(l===o){h=60*((s-n)/a)}else if(l===s){h=60*(2+(n-o)/a)}else if(l===n){h=60*(4+(o-s)/a)}if(h<0){h=h+360}if(h>359){h=359}c=(l+r)/2;if(l===0||r===1){d=0}else{d=(l-c)/Math.min(c,1-c)}this._hue=h;this._saturation=d;this._lightness=c}getHex(t){var e=t.toString(16);if(e.length<2){e="0"+e}return e}}const b='.dnn-color-picker{padding:15px;max-width:400px}.dnn-color-picker .dnn-color-sliders{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:200px}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b{border:1px solid #ccc;padding-bottom:var(--color-box-height, 50%);position:relative;background-color:red}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:-webkit-gradient(linear, left top, right top, from(white), to(red));background:linear-gradient(to right, white, red);mix-blend-mode:saturation}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;background:-webkit-gradient(linear, left top, left bottom, from(white), to(black));background:linear-gradient(to bottom, white, black);mix-blend-mode:luminosity}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button{position:absolute;bottom:calc(50% - 4px);left:calc(50% - 4px);width:8px;height:8px;z-index:3;display:block;background:none;border:none;margin-left:-4px;margin-bottom:-4px;padding:7px;background-color:#fff;border-radius:50%}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button:before{content:"";position:absolute;top:-1px;left:-1px;border-radius:50%}.dnn-color-picker .dnn-color-sliders .dnn-color-s-b button:after{content:"";position:absolute;top:0px;left:0px;border-radius:50%;width:10px;height:10px;border:2px solid #ccc}.dnn-color-picker .dnn-color-sliders .dnn-color-bar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-top:15px}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-result{-ms-flex-direction:column;flex-direction:column;width:50px;height:50px;border-radius:50%;background:red}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue{-ms-flex:auto;flex:auto;margin-left:10px;height:16px;border:1px solid #ccc;position:relative;background:-webkit-gradient(linear, left top, right top, color-stop(0, #f00), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(84%, #f0f), to(#f00));background:linear-gradient(to right, #f00 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #f00 100%)}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue button{width:10px;height:20px;position:absolute;top:-2px;left:calc(50% - 4px);border:0;padding:0;background-color:transparent;padding-left:-8px}.dnn-color-picker .dnn-color-sliders .dnn-color-bar .dnn-color-hue button:before{content:"";position:absolute;top:-2px;left:0px;border-radius:3px;width:100%;height:100%;border:1px solid #ccc;background-color:#fff}.dnn-color-picker .dnn-color-fields{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch button{background-color:transparent;border:none}.dnn-color-picker .dnn-color-fields .dnn-color-mode-switch button svg{width:3em;height:3em;pointer-events:none;outline:none}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields{display:-ms-flexbox;display:flex;-ms-flex-pack:space-evenly;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:auto;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input{border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.5em;padding-left:1.3em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.red{border-color:red}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.green{border-color:green}.dnn-color-picker .dnn-color-fields .dnn-rgb-color-fields .dnn-rgb-color-field input.blue{border-color:blue}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields{display:-ms-flexbox;display:flex;-ms-flex-pack:space-evenly;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:auto;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-hsl-color-fields .dnn-hsl-color-field input{border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.5em;padding-left:1.3em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields{display:-ms-flexbox;display:flex;-ms-flex-pack:space-evenly;justify-content:space-evenly}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:auto;flex:auto;text-align:center;padding:0.5em}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field label{padding-bottom:0.25em}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input{position:relative;border-radius:var(--dnn-button-radius, 3px);border:1px solid #ccc;padding:0.323em;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input input{border:0;padding:0;margin:0;width:100%;height:100%;text-align:center}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input button{position:absolute;height:100%;top:0;right:1em;background-color:transparent;border:0;padding:0;margin:0}.dnn-color-picker .dnn-color-fields .dnn-hex-color-fields .dnn-hex-color-field .hex-input button svg{min-width:1em}';
-/** Reusable DNN UI component to pick a color
- * @copyright Copyright (c) .NET Foundation. All rights reserved.
- * @license MIT
- */var m=undefined&&undefined.__decorate||function(t,e,i,o){var s=arguments.length,n=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,r;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")n=Reflect.decorate(t,e,i,o);else for(var l=t.length-1;l>=0;l--)if(r=t[l])n=(s<3?r(n):s>3?r(e,i,n):r(e,i))||n;return s>3&&n&&Object.defineProperty(e,i,n),n};let v=class{constructor(i){t(this,i);this.colorChanged=e(this,"colorChanged",7);this.color="FFFFFF";this.colorBoxHeight="50%";this.rgbDisplay="flex";this.hslDisplay="none";this.hexDisplay="none";this.handleSaturationLightnessMouseDown=t=>{t.preventDefault();this.handleDragLightnessSaturation(t);window.addEventListener("mousemove",this.handleDragLightnessSaturation);window.addEventListener("mouseup",this.handleSaturationLightnessMouseUp)};this.handleDragLightnessSaturation=t=>{const e=this.saturationLightnessBox.getBoundingClientRect();let i=t.clientX-e.left;if(i<0){i=0}if(i>e.width){i=e.width}i=i/e.width;let o=t.clientY-e.top;if(o<0){o=0}if(o>e.height){o=e.height}o=1-o/e.height;const s=new f;s.hue=this.currentColor.hue;s.saturation=i;s.lightness=o;this.currentColor=s};this.handleSaturationLightnessMouseUp=()=>{window.removeEventListener("mousemove",this.handleDragLightnessSaturation);window.removeEventListener("mouseup",this.handleSaturationLightnessMouseUp)};this.handleHueMouseDown=t=>{t.preventDefault();this.handleDragHue(t);window.addEventListener("mousemove",this.handleDragHue);window.addEventListener("mouseup",this.handleHueMouseUp)};this.handleHueMouseUp=()=>{window.removeEventListener("mousemove",this.handleDragHue);window.removeEventListener("mouseup",this.handleHueMouseUp)};this.handleDragHue=t=>{const e=this.hueRange.getBoundingClientRect();let i=t.clientX-e.left;if(i<0){i=0}if(i>e.width){i=e.width}i=i/e.width*360;const o=new f;o.hue=i;o.saturation=this.currentColor.saturation;o.lightness=this.currentColor.lightness;this.currentColor=o};this.handleComponentValueChange=(t,e)=>{let i=parseInt(t.target.value);if(isNaN(i)){return}const o=new f;if(i<0){i=0}if(i>255){i=255}let s=this.currentColor.red;let n=this.currentColor.green;let r=this.currentColor.blue;switch(e){case"red":s=i;break;case"green":n=i;break;case"blue":r=i;break}o.green=n;o.red=s;o.blue=r;this.currentColor=o};this.handleHSLChange=(t,e)=>{let i=parseInt(t.target.value);if(isNaN(i)){return}const o=new f;if(i!=null){let t=this.currentColor.hue;let s=this.currentColor.saturation;let n=this.currentColor.lightness;switch(e){case"hue":if(i<0){i=0}if(i>359){i=0}t=i;break;case"saturation":if(i<0){i=0}if(i>100){i=100}s=i/100;break;case"lightness":if(i<0){i=0}if(i>100){i=100}n=i/100;break}o.hue=t;o.saturation=s;o.lightness=n;this.currentColor=o}};this.handleSaturationLightnessKeyDown=t=>{let e=new f;e.hue=this.currentColor.hue;e.saturation=this.currentColor.saturation;e.lightness=this.currentColor.lightness;let i=.01;if(t.shiftKey){i=.1}switch(t.key){case"ArrowUp":e.lightness+=i;break;case"ArrowDown":e.lightness-=i;break;case"ArrowLeft":e.saturation-=i;break;case"ArrowRight":e.saturation+=i}this.currentColor=e};this.handleHueKeyDown=t=>{let e=new f;e.hue=this.currentColor.hue;e.saturation=this.currentColor.saturation;e.lightness=this.currentColor.lightness;let i=1;if(t.shiftKey){i=10}switch(t.key){case"ArrowLeft":e.hue-=i;break;case"ArrowRight":e.hue+=i}this.currentColor=e}}colorChangedHandler(t){this.colorChanged.emit(t)}handeCurrentColorChanged(t){this.colorChangedHandler(t)}componentWillLoad(){this.handleHexChange(this.color)}componentDidLoad(){this.el.style.setProperty("--color-box-height",this.colorBoxHeight.toString())}getHex(){return this.getDoublet(this.currentColor.red)+this.getDoublet(this.currentColor.green)+this.getDoublet(this.currentColor.blue)}getContrast(){return this.currentColor.contrastColor}getDoublet(t){const e=t.toString(16).toUpperCase();if(e.length===1){return"0"+e}return e}handleHexChange(t){const e=new f;if(t.match(/^(?:[\da-f]{3}|[\da-f]{6})$/i).length>0){if(t.length===3){let e=t[0]+t[0]+t[1]+t[1]+t[2]+t[2];t=e}e.red=parseInt(t.substr(0,2),16);e.green=parseInt(t.substr(2,2),16);e.blue=parseInt(t.substr(4,2),16)}else{e.red=this.currentColor.red;e.green=this.currentColor.green;e.blue=this.currentColor.blue}this.currentColor=e}switchColorMode(t){switch(t.target.id){case"rgb-switch":this.rgbDisplay="none";this.hslDisplay="none";this.hexDisplay="flex";break;case"hex-switch":this.rgbDisplay="none";this.hslDisplay="flex";this.hexDisplay="none";break;case"hsl-switch":this.rgbDisplay="flex";this.hslDisplay="none";this.hexDisplay="none";break;default:this.rgbDisplay="flex";this.hslDisplay="none";this.hexDisplay="none"}}render(){const t=this.currentColor.hue;const e=this.currentColor.saturation;const o=this.currentColor.lightness;const s=this.currentColor.red;const n=this.currentColor.green;const r=this.currentColor.blue;return i("div",{class:"dnn-color-picker"},i("div",{class:"dnn-color-sliders"},i("div",{class:"dnn-color-s-b",ref:t=>this.saturationLightnessBox=t,style:{backgroundColor:`hsl(${t},100%,50%)`},onMouseDown:this.handleSaturationLightnessMouseDown.bind(this)},i("button",{class:"dnn-s-b-picker","aria-label":"Press up or down to adjust lightness, left or right to adjust saturation, hold shift to move by 10%",role:"slider","aria-valuemin":"0","aria-valuemax":"100","aria-valuetext":`Saturation: ${Math.round(this.currentColor.saturation*100)}%, Lightness: ${Math.round(this.currentColor.lightness*100)}%`,style:{left:Math.round(e*100)+"%",bottom:Math.round(o*100)+"%"},onKeyDown:t=>this.handleSaturationLightnessKeyDown(t)})),i("div",{class:"dnn-color-bar"},i("div",{class:"dnn-color-result",style:{backgroundColor:"#"+this.getHex(),boxShadow:"0 0 2px 1px "+"#"+this.getContrast()}}),i("div",{class:"dnn-color-hue",ref:t=>this.hueRange=t,onMouseDown:this.handleHueMouseDown.bind(this)},i("button",{class:"dnn-hue-picker","aria-label":"Press left or right to adjust hue, hold shift to move by 10 degrees",role:"slider","aria-valuemin":"0","aria-valuemax":"359","aria-valuenow":Math.round(t),style:{left:(t/359*100).toString()+"%"},onKeyDown:t=>this.handleHueKeyDown(t)})))),i("div",{class:"dnn-color-fields"},i("div",{class:"dnn-rgb-color-fields",style:{display:this.rgbDisplay}},i("div",{class:"dnn-rgb-color-field"},i("label",null,"R"),i("input",{type:"number",min:"0",max:"255",step:"1",class:"red",value:s,"aria-label":"red value",onChange:t=>this.handleComponentValueChange(t,"red")})),i("div",{class:"dnn-rgb-color-field"},i("label",null,"G"),i("input",{type:"number",min:"0",max:"255",class:"green",value:n,"aria-label":"green value",onChange:t=>this.handleComponentValueChange(t,"green")})),i("div",{class:"dnn-rgb-color-field"},i("label",null,"B"),i("input",{type:"number",min:"0",max:"255",class:"blue",value:r,"aria-label":"blue value",onChange:t=>this.handleComponentValueChange(t,"blue")})),i("div",{class:"dnn-color-mode-switch"},i("button",{id:"rgb-switch",onClick:this.switchColorMode.bind(this),"aria-label":"switch to hexadecimal value entry"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"}))))),i("div",{class:"dnn-hsl-color-fields",style:{display:this.hslDisplay}},i("div",{class:"dnn-hsl-color-field"},i("label",null,"H"),i("input",{type:"number",min:"0",max:"359",step:1,value:Math.round(t),"aria-label":"Hue",onChange:t=>this.handleHSLChange(t,"hue")})),i("div",{class:"dnn-hsl-color-field"},i("label",null,"S"),i("input",{type:"number",min:"0",max:"100",step:1,value:Math.round(e*100),"aria-label":"Saturation",onChange:t=>this.handleHSLChange(t,"saturation")})),i("div",{class:"dnn-hsl-color-field"},i("label",null,"L"),i("input",{type:"number",min:"0",max:"100",step:1,value:Math.round(o*100),"aria-label":"Lightness",onChange:t=>this.handleHSLChange(t,"lightness")})),i("div",{class:"dnn-color-mode-switch"},i("button",{id:"hsl-switch",onClick:this.switchColorMode.bind(this),"aria-label":"Switch to red, green, blue entry mode"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"}))))),i("div",{class:"dnn-hex-color-fields",style:{display:this.hexDisplay}},i("div",{class:"dnn-hex-color-field"},i("label",null,"HEX"),i("div",{class:"hex-input"},i("input",{type:"text","aria-label":"Hexadecimal value",value:this.getHex(),onChange:t=>this.handleHexChange(t.target.value)}),i("button",{class:"copy","aria-label":"copy value"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"}))))),i("div",{class:"dnn-color-mode-switch"},i("button",{id:"hex-switch",onClick:this.switchColorMode.bind(this),"aria-label":"Switch to hue saturation lightness values"},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("path",{d:"M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"})))))))}get el(){return s(this)}static get watchers(){return{currentColor:["handeCurrentColorChanged"]}}};m([n(100)],v.prototype,"colorChangedHandler",null);v.style=b;const g=":host{--border-color:var(--dnn-color-tertiary-contrast, lightgray);--border-radius:var(--dnn-controls-radius, 5px);--drop-background-color:var(--dnn-color-tertiary, lightblue);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:1rem;text-align:center;border:2px dashed var(--border-color);border-radius:var(--border-radius);padding:1rem;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}:host(.dropping){background-color:var(--drop-background-color)}p{margin:0;padding:0}button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border:0px;margin:0;padding:0;background-color:transparent}button:hover{cursor:pointer}button svg{margin-right:0.5rem}label.upload-file{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer}label.upload-file input{display:none}.video-preview{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.video-preview button{margin:1rem}";let x=class{constructor(i){t(this,i);this.filesSelected=e(this,"filesSelected",7);this.resx={dragAndDropFile:"Drag and drop a file",capture:"Capture",or:"or",takePicture:"Take a picture",uploadFile:"Upload a file"};this.allowCameraMode=false;this.captureQuality=.8;this.canTakeSnapshots=false;this.takingPicture=false;this.handleDragOver=t=>{t.stopPropagation();t.preventDefault();t.dataTransfer.dropEffect="copy";this.dropzone.classList.add("dropping")};this.handleDrop=t=>{t.stopPropagation();t.preventDefault();const e=t.dataTransfer.files;if(this.hasInvalidExtensions(e)){return}var i=this.getFilesFromFileList(e);this.filesSelected.emit(i)}}componentDidLoad(){if(this.allowCameraMode){this.checkIfBrowserCanTakeSnapshots().then((t=>this.canTakeSnapshots=t))}if(this.allowedExtensions!=undefined&&this.allowedExtensions.length>0){var t=this.allowedExtensions.map((t=>`.${t}`));var e=t.join(",");this.fileInput.accept=e}}checkIfBrowserCanTakeSnapshots(){return new Promise((t=>{const e=navigator.mediaDevices;if(e==undefined||e.enumerateDevices==undefined){t(false)}e.enumerateDevices().then((e=>{var i=e.some((t=>t.kind=="videoinput"));t(i)}))}))}getFilesFromFileList(t){var e=[];for(let i=0;i<t.length;i++){const o=t[i];e.push(o)}return e}handleUploadButton(t){let e=this.getFilesFromFileList(t.files);this.filesSelected.emit(e)}hasInvalidExtensions(t){var e=false;for(let o=0;o<t.length;o++){const s=t[o];var i=/(?:\.([^.]+))?$/;const n=i.exec(s.name)[1];if(n==undefined){e=true}if(this.allowedExtensions!=undefined&&!this.allowedExtensions.includes(n)){e=true}return e}}takeSnapshot(){this.takingPicture=true;navigator.mediaDevices.getUserMedia({video:true,audio:false}).then((t=>{this.videoPreview.srcObject=t;this.videoPreview.play().then((()=>{this.videoSettings=t.getVideoTracks()[0].getSettings()}))})).catch((t=>alert(t)))}applySnapshot(){var t=document.createElement("canvas");const e=t.getContext("2d");t.width=this.videoSettings.width;t.height=this.videoSettings.height;e.drawImage(this.videoPreview,0,0);t.toBlob((t=>{var e=new File([t],"image.jpeg",{type:"image/jpeg"});this.takingPicture=false;var i=[e];this.filesSelected.emit(i)}),"image/jpeg",this.captureQuality)}render(){var t,e,s,n,r,l;return i(o,{ref:t=>this.dropzone=t,class:"dropzone",onDragOver:this.handleDragOver,onDrop:this.handleDrop,onDragLeave:()=>this.dropzone.classList.remove("dropping")},!this.takingPicture&&[i("p",null,(t=this.resx)===null||t===void 0?void 0:t.dragAndDropFile),i("p",null,"- ",(e=this.resx)===null||e===void 0?void 0:e.or," -"),i("label",{class:"upload-file"},i("input",{type:"file",ref:t=>this.fileInput=t,onChange:t=>this.handleUploadButton(t.target)}),i("span",null,i("svg",{xmlns:"http://www.w3.org/2000/svg","enable-background":"new 0 0 24 24",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("g",null,i("rect",{fill:"none",height:"24",width:"24"})),i("g",null,i("path",{d:"M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z"}))))," ",(s=this.resx)===null||s===void 0?void 0:s.uploadFile),this.canTakeSnapshots&&[i("p",null,"- ",(n=this.resx)===null||n===void 0?void 0:n.or," -"),i("button",{onClick:()=>this.takeSnapshot()},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("circle",{cx:"12",cy:"12",r:"3.2"}),i("path",{d:"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"})),(r=this.resx)===null||r===void 0?void 0:r.takePicture)]],this.takingPicture&&i("div",{class:"video-preview"},i("video",{ref:t=>this.videoPreview=t}),i("button",{onClick:()=>this.applySnapshot()},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("circle",{cx:"12",cy:"12",r:"3.2"}),i("path",{d:"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"}))," ",(l=this.resx)===null||l===void 0?void 0:l.capture)))}};x.style=g;var w;(function(t){t[t["nw"]=0]="nw";t[t["ne"]=1]="ne";t[t["se"]=2]="se";t[t["sw"]=3]="sw"})(w||(w={}));function k(t,e){let i=0;let o=0;if(t instanceof MouseEvent){i=t.movementX;o=t.movementY}if(typeof TouchEvent!=="undefined"){if(t instanceof TouchEvent){let s=t.touches[0];if(e!=undefined){i=s.pageX-this.previousTouch.pageX;o=s.pageY-this.previousTouch.pageY}e=s}}return{movementX:i,movementY:o}}const y=":host{display:block}canvas{display:none}.view{visibility:hidden;opacity:0;height:0;overflow:hidden;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.view.visible{visibility:visible;opacity:1;height:initial;overflow:visible}.view .cropper{position:relative;width:100%}.view .cropper img{width:100%;display:block;margin:0 auto}.view .cropper .backdrop{-webkit-backdrop-filter:saturate(0.5);backdrop-filter:saturate(0.5);-webkit-backdrop-filter:brightness(0.5);backdrop-filter:brightness(0.5);position:absolute;left:0;top:0;width:100%;height:100%}.view .cropper .crop{position:absolute;top:0;left:0;width:100%;height:100%;outline:2px dashed white;-webkit-box-shadow:black 0 0 0px 2px;box-shadow:black 0 0 0px 2px;-webkit-backdrop-filter:saturate(2);backdrop-filter:saturate(2);-webkit-backdrop-filter:brightness(2);backdrop-filter:brightness(2);cursor:move}.view .cropper .crop>div{width:20px;height:20px;background-color:white;border:2px solid rgba(0, 0, 0, 0.5);position:absolute}.view .cropper .crop>div.nw,.view .cropper .crop>div.ne{top:-17px}.view .cropper .crop>div.ne,.view .cropper .crop>div.se{right:-17px}.view .cropper .crop>div.se,.view .cropper .crop>div.sw{bottom:-17px}.view .cropper .crop>div.sw,.view .cropper .crop>div.nw{left:-17px}.view .cropper .crop>div.nw,.view .cropper .crop>div.se{cursor:nwse-resize}.view .cropper .crop>div.ne,.view .cropper .crop>div.sw{cursor:nesw-resize}dnn-modal{--max-width:512px}";let C=class{constructor(i){t(this,i);this.imageCropChanged=e(this,"imageCropChanged",7);this.width=600;this.height=600;this.resx={capture:"Capture",dragAndDropFile:"Drag and drop an image",or:"or",takePicture:"Take a picture",uploadFile:"Upload an image",imageTooSmall:"The image you are attempting to upload does not meet the minimum size requirement of {width} pixels by {height} pixels. Please upload a larger image.",modalCloseText:"Close"};this.quality=.8;this.preventUndersized=false;this.handleCropMouseDown=t=>{t.stopPropagation();t.preventDefault();const e=t.target;const i=e.classList[0];document.addEventListener("mouseup",this.handleImageCropFinished,false);document.addEventListener("touchend",this.handleImageCropFinished,false);switch(i){case"crop":document.addEventListener("mousemove",this.handleCropDrag,false);document.addEventListener("touchmove",this.handleCropDrag,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleCropDrag)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleCropDrag)));break;case"nw":document.addEventListener("mousemove",this.handleNwMouseMove,false);document.addEventListener("touchmove",this.handleNwMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleNwMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleNwMouseMove)));break;case"ne":document.addEventListener("mousemove",this.handleNeMouseMove,false);document.addEventListener("touchmove",this.handleNeMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleNeMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleNeMouseMove)));break;case"se":document.addEventListener("mousemove",this.handleSeMouseMove,false);document.addEventListener("touchmove",this.handleSeMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleSeMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleSeMouseMove)));break;case"sw":document.addEventListener("mousemove",this.handleSwMouseMove,false);document.addEventListener("touchmove",this.handleSwMouseMove,false);document.addEventListener("mouseup",(()=>document.removeEventListener("mousemove",this.handleSwMouseMove)));document.addEventListener("touchend",(()=>document.removeEventListener("touchmove",this.handleSwMouseMove)));break}};this.handleImageCropFinished=t=>{this.emitImage();document.removeEventListener("mouseup",this.handleImageCropFinished);this.previousTouch=undefined};this.handleNwMouseMove=t=>{this.handleCornerDrag(t,w.nw)};this.handleNeMouseMove=t=>{this.handleCornerDrag(t,w.ne)};this.handleSeMouseMove=t=>{this.handleCornerDrag(t,w.se)};this.handleSwMouseMove=t=>{this.handleCornerDrag(t,w.sw)};this.handleCornerDrag=(t,e)=>{if(!this.isMouseStillInTarget(t)){return}let{left:i,top:o}=this.getCornerLeftTop(e);let s=0;let n=0;let r="horizontal";const l=this.width/this.height;const a=this.crop.getBoundingClientRect();const h=this.image.getBoundingClientRect();let{movementX:d,movementY:c}=k(t,this.previousTouch);if(Math.abs(d)<Math.abs(c)){r="vertical"}if(r=="horizontal"){switch(e){case w.nw:case w.sw:s=a.width-d;n=s/l;break;case w.ne:case w.se:s=a.width+d;n=s/l;break}}else{switch(e){case w.nw:case w.ne:n=a.height-c;s=n*l;break;case w.se:case w.sw:n=a.height+c;s=n*l;break}}switch(e){case w.ne:case w.nw:const t=a.height-n;o=this.crop.offsetTop+t}switch(e){case w.nw:case w.sw:const t=a.width-s;i=this.crop.offsetLeft+t;if(i<0)i=0;if(i>h.width)i=h.width;if(o<0)o=0;if(o>h.height)o=h.height;if(i+s>h.width)s=h.width-i;if(o+n>h.height)n=h.height-o;break;case w.ne:case w.se:if(o<0)o=0;if(o>h.height)o=h.height;if(i+s>h.width)s=h.width-i;if(o+n>h.height)n=h.height-o;break}if(s/n!=l){return}if(this.preventUndersized){const t=this.image.width/this.image.naturalWidth;if(s/t<this.width||n/t<this.height){return}}switch(e){case w.ne:this.crop.style.top=`${o}px`;this.crop.style.width=`${s}px`;this.crop.style.height=`${n}px`;break;case w.nw:this.crop.style.left=`${i}px`;this.crop.style.top=`${o}px`;this.crop.style.width=`${s}px`;this.crop.style.height=`${n}px`;break;case w.se:this.crop.style.width=`${s}px`;this.crop.style.height=`${n}px`;break;case w.sw:this.crop.style.left=`${i}px`;this.crop.style.width=`${s}px`;this.crop.style.height=`${n}px`;break}};this.handleCropDrag=t=>{if(!this.isMouseStillInTarget(t)){return}let{movementX:e,movementY:i}=k(t,this.previousTouch);let o=this.crop.offsetLeft+e;let s=this.crop.offsetTop+i;var n=this.image.getBoundingClientRect();var r=this.crop.getBoundingClientRect();if(o<0){o=0}if(s<0){s=0}if(o+r.width>n.width){o=this.crop.offsetLeft}if(s+r.height>n.height){s=this.crop.offsetTop}this.crop.style.left=o+"px";this.crop.style.top=s+"px"}}componentDidLoad(){requestAnimationFrame((()=>{this.setView("noPictureView")}))}setView(t){const e=this.host.shadowRoot.querySelectorAll(".view");e.forEach((t=>t.classList.remove("visible")));switch(t){case"noPictureView":this.noPictureView.classList.add("visible");break;case"hasPictureView":this.hasPictureView.classList.add("visible");break}this.view=t}initCrop(){var t=this.width/this.height;var e=this.image.getBoundingClientRect();var i=e.width/e.height;if(t>i){var o=e.width/t;var s=e.height-o;this.crop.style.top=Math.round(s/2).toString()+"px";this.crop.style.height=Math.round(o).toString()+"px"}else{var n=e.height*t;var s=e.width-n;this.crop.style.left=Math.round(s/2).toString()+"px";this.crop.style.width=Math.round(n).toString()+"px"}}setImage(){this.image.addEventListener("load",(()=>{this.initCrop();this.emitImage()}));this.image.src=this.canvas.toDataURL()}handleNewFile(t){if(t.type.split("/")[0]!="image"){return}var e=new FileReader;e.onload=t=>{var e=new Image;e.onload=()=>{this.canvas.width=e.width;this.canvas.height=e.height;if(this.preventUndersized&&(e.width<this.width||e.height<this.height)){this.imageTooSmallModal.show();return}var t=this.canvas.getContext("2d");t.drawImage(e,0,0);this.setView("hasPictureView");this.setImage()};e.src=t.target.result.toString()};e.readAsDataURL(t)}emitImage(){var t=this.crop.offsetLeft/this.image.width*this.image.naturalWidth;var e=this.crop.offsetTop/this.image.height*this.image.naturalHeight;var i=this.crop.getBoundingClientRect();var o=i.width/this.image.width*this.image.naturalWidth;var s=i.height/this.image.height*this.image.naturalHeight;if(t<0)t=0;if(t>this.image.naturalWidth)t=this.image.naturalWidth;if(e<0)e=0;if(e>this.image.naturalWidth)e=this.image.naturalWidth;if(o>this.image.naturalWidth)o=this.image.naturalWidth;if(s>this.image.naturalHeight)s=this.image.naturalHeight;var n=this.generateCroppedImage(t,e,o,s,this.width,this.height);this.imageCropChanged.emit(n)}generateCroppedImage(t,e,i,o,s,n){this.canvas.width=s;this.canvas.height=n;const r=this.canvas.getContext("2d");r.clearRect(0,0,s,n);r.drawImage(this.image,t,e,i,o,0,0,s,n);return this.canvas.toDataURL("image/jpeg",this.quality)}getCornerLeftTop(t){let e=0;let i=0;switch(t){case w.se:e=this.crop.offsetLeft;i=this.crop.offsetTop;break;case w.sw:i=this.crop.offsetTop;break}return{top:i,left:e}}isMouseStillInTarget(t){var e=false;let i;let o;const s=this.image.getBoundingClientRect();if(t instanceof MouseEvent){i=t.clientX;o=t.clientY}if(typeof TouchEvent!=="undefined"){if(t instanceof TouchEvent){var n=t.touches[0];i=n.clientX;o=n.clientY}}if(i>=s.x&&o>=s.y&&i<=s.left+s.width&&o<=s.top+s.height){e=true}var r=this.crop.querySelectorAll("div");r.forEach((t=>{var s=t.getBoundingClientRect();if(i>=s.x&&o>=s.y&&i<=s.left+s.width&&o<=s.top+s.height){e=true}}));return e}render(){return i(o,{ref:t=>this.host=t},i("canvas",{ref:t=>this.canvas=t}),i("div",{class:"view",ref:t=>this.hasPictureView=t},i("div",{class:"cropper"},i("img",{ref:t=>this.image=t}),i("div",{class:"backdrop"}),i("div",{class:"crop",ref:t=>this.crop=t,onMouseDown:this.handleCropMouseDown,onTouchStart:this.handleCropMouseDown},i("div",{class:"nw"}),i("div",{class:"ne"}),i("div",{class:"se"}),i("div",{class:"sw"})))),i("div",{class:"view",ref:t=>this.noPictureView=t},i("dnn-dropzone",{allowCameraMode:true,onFilesSelected:t=>this.handleNewFile(t.detail[0]),resx:{capture:this.resx.capture,dragAndDropFile:this.resx.dragAndDropFile,or:this.resx.or,takePicture:this.resx.takePicture,uploadFile:this.resx.uploadFile}})),i("dnn-modal",{ref:t=>this.imageTooSmallModal=t,"close-text":this.resx.modalCloseText},i("p",null,this.resx.imageTooSmall.replace("{width}",this.width.toString()).replace("{height}",this.height.toString()))))}};C.style=y;const M=":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 z=class{constructor(i){t(this,i);this.dismissed=e(this,"dismissed",7);this.backdropDismiss=true;this.closeText="Close modal";this.showCloseButton=true;this.visible=false}async show(){this.visible=true}async hide(){this.visible=false}handleDismiss(){this.visible=false;this.dismissed.emit()}handleBackdropClick(t){const e=t.target;if(e.id==="backdrop"&&this.backdropDismiss){this.handleDismiss()}}render(){return i(o,null,i("div",{id:"backdrop",class:this.visible?"overlay visible":"overlay",onClick:t=>this.handleBackdropClick(t)},i("div",{class:"modal"},this.showCloseButton&&i("button",{class:"close","aria-label":this.closeText,onClick:()=>this.handleDismiss()},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("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"}))),i("slot",null))))}get el(){return s(this)}};z.style=M;const F=":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 H=undefined&&undefined.__decorate||function(t,e,i,o){var s=arguments.length,n=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,r;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")n=Reflect.decorate(t,e,i,o);else for(var l=t.length-1;l>=0;l--)if(r=t[l])n=(s<3?r(n):s>3?r(e,i,n):r(e,i))||n;return s>3&&n&&Object.defineProperty(e,i,n),n};let D=class{constructor(i){t(this,i);this.queryChanged=e(this,"queryChanged",7);this.placeholder="";this.debounced=true;this.query=""}fireQueryChanged(){if(this.debounced){this.debouncedHandleQueryChanged()}else{this.handleQueryChanged()}}handleQueryChanged(){this.queryChanged.emit(this.query)}debouncedHandleQueryChanged(){this.handleQueryChanged()}render(){return i(o,null,i("input",{type:"text",value:this.query,placeholder:this.placeholder,onInput:t=>this.query=t.target.value}),this.query!==""?i("button",{class:"svg clear",onClick:()=>this.query=""},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("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"}))):i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("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"]}}};H([n(500)],D.prototype,"debouncedHandleQueryChanged",null);D.style=F;const L=":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 T=class{constructor(i){t(this,i);this.sortChanged=e(this,"sortChanged",7);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}this.sortChanged.emit(this.sortDirection)}render(){return i(o,null,i("button",{class:{active:this.sortDirection!="none"},onClick:()=>this.changeSort()},this.sortDirection=="none"&&i("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 12 16"},i("path",{d:"M 0 7 H 12 L 6 0 Z M 0 9 H 12 L 6 16 Z"})),this.sortDirection=="asc"&&i("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 12 16"},i("path",{d:"M 0 7 H 12 L 6 0 Z"})),this.sortDirection=="desc"&&i("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 12 16"},i("path",{d:"M 0 9 H 12 L 6 16 Z"}))))}};T.style=L;const j="";let S=class{constructor(e){t(this,e);this.visible=false}async show(){this.visible=true}async hide(){this.visible=false}render(){return i(o,null,this.visible&&i("slot",null))}};S.style=j;const A=":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 B=class{constructor(e){t(this,e);this.tabTitles=[];this.selectedTabTitle=""}componentDidLoad(){requestAnimationFrame((()=>{this.updateTitles();this.showFirstTab()}))}getTabs(){return this.component.shadowRoot.querySelector("slot").assignedElements()}updateTitles(){const t=this.getTabs();t.forEach((t=>this.tabTitles=[...this.tabTitles,t.tabTitle]))}showFirstTab(){const t=this.getTabs()[0];t.show();this.selectedTabTitle=t.tabTitle}showTab(t){const e=this.getTabs();e.forEach((e=>{if(e.tabTitle==t){e.show();return}e.hide()}));this.selectedTabTitle=t}render(){return i(o,{ref:t=>this.component=t},i("div",{class:"tabTitles"},this.tabTitles.map((t=>i("button",{class:this.selectedTabTitle==t?"visible":"",onClick:()=>this.showTab(t)},t)))),i("div",{class:"currentTab"},i("slot",null)))}};B.style=A;const $=":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 _=class{constructor(i){t(this,i);this.checkChanged=e(this,"checkChanged",7);this.checked=false;this.disabled=false}checkedChanged(t){this.checkChanged.emit({checked:t})}render(){return i(o,null,i("button",{disabled:this.disabled,class:{checked:this.checked},onClick:()=>{if(!this.disabled){this.checked=!this.checked}}},i("div",{class:"handle"})))}get element(){return s(this)}static get watchers(){return{checked:["checkedChanged"]}}};_.style=$;const V=":host{display:-ms-flexbox;display:flex;overflow:visible}.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;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;min-height:24px}div.item div.children{overflow:hidden;height:0;-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}";let I=class{constructor(i){t(this,i);this.userExpanded=e(this,"userExpanded",3);this.userCollapsed=e(this,"userCollapsed",3);this.expanded=false;this.hasChildren=false}watchExpanded(t){if(t){this.expander.classList.add("expanded");this.collapsible.expanded=true;return}this.expander.classList.remove("expanded");this.collapsible.expanded=false}componentDidLoad(){requestAnimationFrame((()=>{const t=this.childElement.children[0];const e=t.assignedElements().length;if(e>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");this.userExpanded.emit();return}this.expander.classList.remove("expanded");this.userCollapsed.emit()}render(){return i(o,null,i("div",{class:"expander",ref:t=>this.expander=t},this.hasChildren&&i("button",{onClick:()=>this.toggleCollapse()},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M10 17l5-5-5-5v10z"}),i("path",{d:"M0 24V0h24v24H0z",fill:"none"})))),i("div",{class:"item"},i("div",{class:"item-slot"},i("slot",null)),i("dnn-collapsible",{ref:t=>this.collapsible=t,expanded:this.expanded},i("div",{ref:t=>this.childElement=t},i("slot",{name:"children"})))))}get el(){return s(this)}static get watchers(){return{expanded:["watchExpanded"]}}};I.style=V;const E=":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 q=class{constructor(e){t(this,e);this.showDropdownButton=false;this.showDropdownMenu=false;this.previousMenuWidth=0}componentDidRender(){requestAnimationFrame((()=>{this.moveItemsToDropDownIfNecessery();this.resizeObserver=new ResizeObserver((t=>{for(let e of t){if(e.contentRect.width<this.previousMenuWidth){this.moveItemsToDropDownIfNecessery()}if(this.previousMenuWidth>0&&e.contentRect.width>this.previousMenuWidth){this.moveItemsToMenuIfPossible()}this.previousMenuWidth=e.contentRect.width}}));this.resizeObserver.observe(this.element)}))}moveItemsToDropDownIfNecessery(){const t=Array.from(this.menu.querySelector("slot").assignedElements());const e=this.menu.getBoundingClientRect().width;let i=parseFloat(getComputedStyle(this.element).fontSize)*2;t.forEach((t=>i+=this.getFullWidth(t)));i+=(t.length-1)*parseFloat(getComputedStyle(this.element).fontSize);if(i>e){this.showDropdownButton=true;var o=t[t.length-1];if(this.dropdown==undefined){return}o.slot="dropdown";this.moveItemsToDropDownIfNecessery()}}moveItemsToMenuIfPossible(){if(this.dropdown==undefined||!this.dropdown.hasChildNodes()){return}const t=Array.from(this.menu.querySelector("slot").assignedElements());const e=this.menu.getBoundingClientRect().width;let i=parseFloat(getComputedStyle(this.element).fontSize)*2;i+=(t.length-1)*parseFloat(getComputedStyle(this.element).fontSize);t.forEach((t=>i+=this.getFullWidth(t)));const o=this.dropdown.querySelector("slot").assignedElements()[0];if(o!=undefined){i+=this.getFullWidth(o)}if(i<e){if(o!=undefined){o.slot=""}if(o==undefined){this.dropdown.classList.remove("visible");this.showDropdownMenu=false;this.showDropdownButton=false}}}getFullWidth(t){var e=t.getBoundingClientRect().width;var i=getComputedStyle(t);e+=parseFloat(i.marginLeft);e+=parseFloat(i.marginRight);e+=parseFloat(i.paddingLeft);e+=parseFloat(i.paddingRight);return e}toggleOverflowMenu(){this.showDropdownMenu=!this.showDropdownMenu;if(this.showDropdownMenu){this.dropdown.classList.add("visible");let i=0;const o=Array.from(this.dropdown.querySelector("slot").assignedElements());o.forEach((t=>i+=t.getBoundingClientRect().height));var t=parseFloat(getComputedStyle(this.dropdown).fontSize)*.5;var e=t*(this.dropdown.children.length-1);i+=e;this.dropdown.style.height=`${i}px`;const s=t=>{const e=this.button.getBoundingClientRect();if(t.clientX<e.left||t.clientX>e.right||t.clientY<e.top||t.clientY>e.bottom){this.toggleOverflowMenu()}document.removeEventListener("click",s)};setTimeout((()=>{document.addEventListener("click",s,false)}),100)}else{this.dropdown.classList.remove("visible");this.dropdown.style.height="0px"}}render(){return i(o,null,i("div",{class:"menu-container"},i("div",{class:"menu",ref:t=>this.menu=t},i("slot",null)),this.showDropdownButton&&i("div",{class:"overflow"},i("button",{ref:t=>this.button=t,class:"icon",onClick:()=>this.toggleOverflowMenu()},i("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},i("path",{d:"M0 0h24v24H0z",fill:"none"}),i("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"}))),i("div",{class:"dropdown",ref:t=>this.dropdown=t},i("slot",{name:"dropdown"})))))}get element(){return s(this)}};q.style=E;const R=":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 P=class{constructor(i){t(this,i);this.widthChanged=e(this,"widthChanged",7);this.splitterWidth=16;this.splitWidthPercentage=30;this.leftWidth=0;this.rightWidth=0}async setSplitWidthPercentage(t){const e=this.element.shadowRoot.querySelectorAll(".pane");requestAnimationFrame((()=>{e.forEach((t=>t.classList.add("transition")));this.splitter.classList.add("transition");requestAnimationFrame((()=>{const i=this.element.getBoundingClientRect().width;let o=i*t/100;if(o<0){o=0}if(o>i){o=i}this.leftWidth=o;this.rightWidth=i-o;setTimeout((()=>{e.forEach((t=>t.classList.remove("transition")));this.splitter.classList.remove("transition")}),300)}))}))}async getSplitWidthPercentage(){const t=this.element.getBoundingClientRect().width;return this.leftWidth/t}componentDidLoad(){requestAnimationFrame((()=>{this.resizeObserver=new ResizeObserver((()=>{const t=this.element.getBoundingClientRect().width;this.leftWidth=t*this.splitWidthPercentage/100;this.rightWidth=t-this.leftWidth;this.widthChanged.emit(this.splitWidthPercentage)}));this.resizeObserver.observe(this.element)}))}handleMouseDown(t){t.preventDefault();const e=t=>{requestAnimationFrame((()=>{let e=this.element.getBoundingClientRect().width;let{movementX:i}=k(t,this.previousTouch);let o=this.leftWidth+i;if(o<0){o=0}if(o>e){o=e}this.leftWidth=o;this.rightWidth=e-o;this.splitWidthPercentage=this.leftWidth/e*100}))};const i=()=>{document.removeEventListener("mousemove",e);document.removeEventListener("touchmove",e);const t=this.element.getBoundingClientRect().width;const i=this.leftWidth/t*100;this.widthChanged.emit(i)};document.addEventListener("mouseup",i);document.addEventListener("touchend",i);document.addEventListener("mousemove",e);document.addEventListener("touchmove",e)}handleKeyDown(t){let e=0;switch(t.key){case"ArrowLeft":e=-10;break;case"ArrowRight":e=10;break;default:return}if(t.shiftKey){e=e*10}const i=this.element.getBoundingClientRect().width;let o=this.leftWidth+e;if(o<0){o=0}if(o>i){o=i}this.leftWidth=o;this.rightWidth=i-this.leftWidth}render(){return i(o,null,i("div",{class:"left pane",style:{width:`${this.leftWidth}px`}},i("slot",{name:"left"})),i("button",{onMouseDown:t=>this.handleMouseDown(t),onTouchStart:t=>this.handleMouseDown(t),onKeyDown:t=>this.handleKeyDown(t),ref:t=>this.splitter=t,style:{minWidth:`${this.splitterWidth.toString()}px`,left:`${this.leftWidth-2}px`}},i("slot",null)),i("div",{class:"right pane",style:{width:`${this.rightWidth}px`}},i("slot",{name:"right"})))}get element(){return s(this)}};P.style=R;export{l as dnn_button,h as dnn_checkbox,c as dnn_chevron,u as dnn_collapsible,v as dnn_color_picker,x as dnn_dropzone,C as dnn_image_cropper,z as dnn_modal,D as dnn_searchbox,T as dnn_sort_icon,S as dnn_tab,B as dnn_tabs,_ as dnn_toggle,I as dnn_treeview_item,q as dnn_vertical_overflow_menu,P as dnn_vertical_splitview};
-//# sourceMappingURL=p-8ec1f3a8.entry.js.map