Merge branch 'develop' into dnn-autocomplete

Author: valadas

package-lock.json

@@ -1058,6 +1058,13 @@
                 "text": "string"
               },
               "description": "When the image crop changes, emits the dataurl for the new cropped image."
+            },
+            {
+              "name": "imageFileCropChanged",
+              "type": {
+                "text": "File"
+              },
+              "description": "Emits both when a file is initially select and when the crop has changed.\r\nCompared to imageCropChanged, this event emits the file itself, which can be useful for uploading the file to a server including its name."
             }
           ],
           "slots": [],

packages/stencil-library/custom-elements.json

@@ -980,6 +980,7 @@ declare global {
     };
     interface HTMLDnnImageCropperElementEventMap {
         "imageCropChanged": string;
+        "imageFileCropChanged": File;
     }
     /**
      * Allows cropping an image in-browser with the option to enforce a specific final size.
@@ -1612,6 +1613,10 @@ declare namespace LocalJSX {
           * When the image crop changes, emits the dataurl for the new cropped image.
          */
         "onImageCropChanged"?: (event: DnnImageCropperCustomEvent<string>) => void;
+        /**
+          * Emits both when a file is initially select and when the crop has changed. Compared to imageCropChanged, this event emits the file itself, which can be useful for uploading the file to a server including its name.
+         */
+        "onImageFileCropChanged"?: (event: DnnImageCropperCustomEvent<File>) => void;
         /**
           * When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry.
          */

packages/stencil-library/src/components.d.ts

@@ -9,6 +9,31 @@
 
 Color Picker for Dnn
 
+## Usage
+
+### HTML
+
+```html
+<dnn-color-picker
+    color="FFFFFF"
+    color-box-height="50%"
+>
+</dnn-color-picker>
+```
+
+
+### JSX-TSX
+
+```tsx
+<dnn-color-picker
+    color="FFFFFF"
+    colorBoxHeight="50%"
+>
+</dnn-color-picker>
+```
+
+
+
 ## Properties
 
 | Property         | Attribute          | Description                                                                                | Type     | Default    |

packages/stencil-library/src/components/dnn-color-picker/readme.md

@@ -0,0 +1,7 @@
+```html
+<dnn-color-picker
+    color="FFFFFF"
+    color-box-height="50%"
+>
+</dnn-color-picker>
+```

packages/stencil-library/src/components/dnn-color-picker/usage/HTML.md

@@ -0,0 +1,7 @@
+```tsx
+<dnn-color-picker
+    color="FFFFFF"
+    colorBoxHeight="50%"
+>
+</dnn-color-picker>
+```

packages/stencil-library/src/components/dnn-color-picker/usage/JSX-TSX.md

@@ -34,7 +34,6 @@
     position: relative;
     width: 100%;
     background-color: var(--fieldset-background);
-    max-width: calc(100% - 1em);
     height: calc(100% - 1em);
   }
   label{

packages/stencil-library/src/components/dnn-fieldset/dnn-fieldset.scss

@@ -2,6 +2,7 @@ import { Component, Element, Host, h, State, Prop, Event, EventEmitter, Method,
 import { CornerType } from './CornerType';
 import { getMovementFromEvent } from "../../utilities/mouseUtilities";
 import { ImageCropperResx } from './types';
+import { dataURLtoFile } from '../../utilities/fileUtilities';
 
 /**
  * Allows cropping an image in-browser with the option to enforce a specific final size.
@@ -38,14 +39,20 @@ export class DnnImageCropper {
   /** When the image crop changes, emits the dataurl for the new cropped image. */
   @Event() imageCropChanged: EventEmitter<string>;
 
+  /** Emits both when a file is initially select and when the crop has changed.
+   * Compared to imageCropChanged, this event emits the file itself, which can be useful for uploading the file to a server including its name.
+   */
+  @Event() imageFileCropChanged: EventEmitter<File>;
+  
   /** Clears the current image and crop (resets the component). */
   @Method()
   public async clear(){
     this.setView("noPictureView");
   }
-
+  
   @State() view: IComponentInterfaces["View"];
   @State() localResx: ImageCropperResx;
+  @State() fileName: string;
 
   @Element() host: HTMLDnnImageCropperElement;
 
@@ -83,6 +90,7 @@ export class DnnImageCropper {
     this.mergeResx();
   }
 
+  // eslint-disable-next-line @stencil-community/own-methods-must-be-private
   formResetCallback(){
     this.clear();
     this.internals.setValidity({});
@@ -149,6 +157,8 @@ export class DnnImageCropper {
       return;
     }
 
+    this.fileName = file.name;
+
     var reader = new FileReader();
     reader.onload = readerLoadEvent => {
       var img = new Image();
@@ -278,9 +288,11 @@ export class DnnImageCropper {
 
     var dataUrl = this.generateCroppedImage(x, y, width, height, this.width ?? width, this.height ?? height);
     this.imageCropChanged.emit(dataUrl);
-    if (this.name) {
+    var file = dataURLtoFile(dataUrl, this.fileName);
+    this.imageFileCropChanged.emit(file);
+    if (this.name != undefined) {
       var data = new FormData();
-      data.append(this.name, dataUrl);
+      data.append(this.name, file);
       this.internals.setFormValue(data);
     }
   }

packages/stencil-library/src/components/dnn-image-cropper/dnn-image-cropper.tsx

@@ -25,9 +25,10 @@ in an event that has a data-url of the image.
 
 ## Events
 
-| Event              | Description                                                               | Type                  |
-| ------------------ | ------------------------------------------------------------------------- | --------------------- |
-| `imageCropChanged` | When the image crop changes, emits the dataurl for the new cropped image. | `CustomEvent<string>` |
+| Event                  | Description                                                                                                                                                                                                          | Type                  |
+| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
+| `imageCropChanged`     | When the image crop changes, emits the dataurl for the new cropped image.                                                                                                                                            | `CustomEvent<string>` |
+| `imageFileCropChanged` | Emits both when a file is initially select and when the crop has changed. Compared to imageCropChanged, this event emits the file itself, which can be useful for uploading the file to a server including its name. | `CustomEvent<File>`   |
 
 
 ## Methods

packages/stencil-library/src/components/dnn-image-cropper/readme.md

@@ -78,21 +78,21 @@ export class DnnInput {
   async checkValidity(): Promise<ValidityState> {
     return this.inputField.validity;
   }
-
+  
   /** Can be used to set a custom validity message. */
   @Method()
   async setCustomValidity(message: string): Promise<void> {
-    this.customValidityMessage = message;
-    return this.inputField.setCustomValidity(message);
+    this.inputField.setCustomValidity(message);
+    this.fieldset.setValidity(false, message);
   }
 
   @State() focused = false;
   @State() valid = true;
-  @State() customValidityMessage: string;
-
+  
   @AttachInternals() internals: ElementInternals;
 
   private inputField!: HTMLInputElement;
+  private fieldset: HTMLDnnFieldsetElement;
   private labelId: string;
 
   componentWillLoad() {
@@ -116,10 +116,7 @@ export class DnnInput {
   }
 
   private handleInvalid(): void {
-    this.valid = false;
-    if (this.customValidityMessage == undefined){
-      this.customValidityMessage = this.inputField.validationMessage;
-    }
+    this.fieldset.setValidity(false, this.inputField.validationMessage);
   }
 
   private handleChange() {
@@ -164,6 +161,7 @@ export class DnnInput {
     return (
       <Host>
         <dnn-fieldset
+          ref={el => this.fieldset = el}
           invalid={!this.valid}
           focused={this.focused}
           label={`${this.label ?? ""}${this.required ? " *" : ""}`}

packages/stencil-library/src/components/dnn-input/dnn-input.tsx

@@ -5,6 +5,37 @@
 <!-- Auto Generated Below -->
 
 
+## Usage
+
+### HTML
+
+```html
+<dnn-monaco-editor
+    language="html"
+    value="<h1>Hello World</h1>
+        <div class=&quot;card&quot;>
+            <p>Some text</p>
+        </div>"
+>
+</dnn-monaco-editor>
+```
+
+
+### JSX-TSX
+
+```tsx
+<dnn-monaco-editor
+    language="html"
+    value="<h1>Hello World</h1>
+        <div class=&quot;card&quot;>
+            <p>Some text</p>
+        </div>"
+>
+</dnn-monaco-editor>
+```
+
+
+
 ## Properties
 
 | Property   | Attribute  | Description                               | Type                                                                                                                                                                                                                                                                                                                                                                                                                                    | Default     |

packages/stencil-library/src/components/dnn-monaco-editor/readme.md

@@ -0,0 +1,10 @@
+```html
+<dnn-monaco-editor
+    language="html"
+    value="<h1>Hello World</h1>
+        <div class=&quot;card&quot;>
+            <p>Some text</p>
+        </div>"
+>
+</dnn-monaco-editor>
+```

packages/stencil-library/src/components/dnn-monaco-editor/usage/HTML.md

@@ -0,0 +1,10 @@
+```tsx
+<dnn-monaco-editor
+    language="html"
+    value="<h1>Hello World</h1>
+        <div class=&quot;card&quot;>
+            <p>Some text</p>
+        </div>"
+>
+</dnn-monaco-editor>
+```