Release/0.23.2

.gitignore

@@ -1,5 +1,6 @@
 node_modules/
-_build/
 .nuke/temp/
 .vs/
-.vscode/
+.vscode/
+_build/bin
+_build/obj

_build/_build.csproj

@@ -11,7 +11,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Nuke.Common" Version="7.0.6" />
+    <PackageReference Include="Nuke.Common" Version="8.0.0" />
   </ItemGroup>
 
   <ItemGroup>

build.sh

@@ -58,7 +58,7 @@ fi
 
 echo "Microsoft (R) .NET SDK version $("$DOTNET_EXE" --version)"
 
-if [[ ! -z ${NUKE_ENTERPRISE_TOKEN+x} && "NUKE_ENTERPRISE_TOKEN" != "" ]]; then
+if [[ ! -z ${NUKE_ENTERPRISE_TOKEN+x} && "$NUKE_ENTERPRISE_TOKEN" != "" ]]; then
     "$DOTNET_EXE" nuget remove source "nuke-enterprise" &>/dev/null || true
     "$DOTNET_EXE" nuget add source "https://f.feedz.io/nuke/enterprise/nuget" --name "nuke-enterprise" --username "PAT" --password "$NUKE_ENTERPRISE_TOKEN" --store-password-in-clear-text &>/dev/null || true
 fi

global.json

@@ -1,6 +1,6 @@
 {
   "sdk": {
-    "version": "7.0.400-preview.23330.10",
+    "version": "8.0.100",
     "rollForward": "latestMajor"
   }
 }

packages/stencil-library/custom-elements.json

@@ -574,7 +574,7 @@
               "type": {
                 "text": "string[]"
               },
-              "description": "A list of allowed file extensions.\nIf not specified, any file is allowed.\nEx: [\"jpg\", \"jped\", \"gif\", \"png\"]",
+              "description": "A list of allowed file extensions.\nIf not specified, any file is allowed.\nEx: [\"jpg\", \"jpeg\", \"gif\", \"png\"]",
               "required": false
             },
             {
@@ -665,10 +665,9 @@
               "kind": "field",
               "name": "resx",
               "type": {
-                "text": "{ capture: string; dragAndDropFile: string; or: string; takePicture: string; uploadFile: string; imageTooSmall: string; modalCloseText: string; }"
+                "text": "ImageCropperResx"
               },
               "description": "Can be used to customize controls text.\nSome values support tokens, see default values for examples.",
-              "default": "{\n      capture: \"Capture\",\n      dragAndDropFile: \"Drag and drop an image\",\n      or: \"or\",\n      takePicture: \"Take a picture\",\n      uploadFile: \"Upload an image\",\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.\",\n      modalCloseText: \"Close\",\n    }",
               "required": false
             },
             {
@@ -1100,7 +1099,6 @@
                 "text": "ILocalization"
               },
               "description": "Optionally allows localizing the component strings.",
-              "default": "{\n    Add: \"Add\",\n    AllRoles: \"All Roles\",\n    FilterByGroup: \"Filter By Group\",\n    GlobalRoles: \"Global Roles\",\n    Role: \"Role\",\n    RolePermissions: \"Role Permissions\",\n    SelectRole: \"Select Role\",\n    User: \"User\",\n    UserPermissions: \"User Permissions\",\n  }",
               "required": false
             },
             {

packages/stencil-library/licenses.json

@@ -10,7 +10,8 @@
     "@dnncommunity/[email protected]": {
         "licenses": "MIT",
         "repository": "https://github.com/dnncommunity/dnn-elements",
-        "path": ""
+        "path": "",
+        "licenseFile": "D:\\dnn-elements\\dnn-elements\\packages\\stencil-library\\README.md"
     },
     "@eslint/[email protected]": {
         "licenses": "MIT",

packages/stencil-library/package.json

@@ -33,7 +33,7 @@
     "deploy-storybook": "gh-pages -d storybook-static --branch site"
   },
   "devDependencies": {
-    "@stencil/core": "4.8.0",
+    "@stencil/core": "4.12.2",
     "@stencil/eslint-plugin": "^0.4.0",
     "@stencil/react-output-target": "^0.5.1",
     "@stencil/sass": "^3.0.4",
@@ -45,9 +45,9 @@
     "@storybook/web-components-webpack5": "^7.5.3",
     "@timkendrick/monaco-editor": "^0.0.9",
     "@types/jest": "^29.5.10",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^6.7.4",
-    "axe-playwright": "^1.2.3",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
+    "axe-playwright": "^2.0.1",
     "babel-loader": "^9.1.2",
     "eslint": "^8.51.0",
     "eslint-plugin-react": "^7.16.0",

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

@@ -8,6 +8,7 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { DnnColorInfo } from "./components/dnn-color-input/dnn-color-info";
 import { ColorInfo } from "./utilities/colorInfo";
 import { DropzoneResx } from "./components/dnn-dropzone/types";
+import { ImageCropperResx } from "./components/dnn-image-cropper/types";
 import { IPermissions } from "./components/dnn-permissions-grid/permissions-interface";
 import { IRoleGroup } from "./components/dnn-permissions-grid/role-group-interface";
 import { IRole } from "./components/dnn-permissions-grid/role-interface";
@@ -18,6 +19,7 @@ import { DnnToggleChangeEventDetail } from "./components/dnn-toggle/toggle-inter
 export { DnnColorInfo } from "./components/dnn-color-input/dnn-color-info";
 export { ColorInfo } from "./utilities/colorInfo";
 export { DropzoneResx } from "./components/dnn-dropzone/types";
+export { ImageCropperResx } from "./components/dnn-image-cropper/types";
 export { IPermissions } from "./components/dnn-permissions-grid/permissions-interface";
 export { IRoleGroup } from "./components/dnn-permissions-grid/role-group-interface";
 export { IRole } from "./components/dnn-permissions-grid/role-interface";
@@ -183,7 +185,7 @@ export namespace Components {
          */
         "allowCameraMode": boolean;
         /**
-          * A list of allowed file extensions. If not specified, any file is allowed. Ex: ["jpg", "jped", "gif", "png"]
+          * A list of allowed file extensions. If not specified, any file is allowed. Ex: ["jpg", "jpeg", "gif", "png"]
          */
         "allowedExtensions": string[];
         /**
@@ -224,15 +226,7 @@ export namespace Components {
         /**
           * Can be used to customize controls text. Some values support tokens, see default values for examples.
          */
-        "resx": {
-    capture: string;
-    dragAndDropFile: string;
-    or: string;
-    takePicture: string;
-    uploadFile: string;
-    imageTooSmall: string;
-    modalCloseText: string;
-  };
+        "resx": ImageCropperResx;
         /**
           * Sets the desired final image width.
          */
@@ -1178,7 +1172,7 @@ declare namespace LocalJSX {
          */
         "allowCameraMode"?: boolean;
         /**
-          * A list of allowed file extensions. If not specified, any file is allowed. Ex: ["jpg", "jped", "gif", "png"]
+          * A list of allowed file extensions. If not specified, any file is allowed. Ex: ["jpg", "jpeg", "gif", "png"]
          */
         "allowedExtensions"?: string[];
         /**
@@ -1223,15 +1217,7 @@ declare namespace LocalJSX {
         /**
           * Can be used to customize controls text. Some values support tokens, see default values for examples.
          */
-        "resx"?: {
-    capture: string;
-    dragAndDropFile: string;
-    or: string;
-    takePicture: string;
-    uploadFile: string;
-    imageTooSmall: string;
-    modalCloseText: string;
-  };
+        "resx"?: ImageCropperResx;
         /**
           * Sets the desired final image width.
          */

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

@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';
+import { Component, Host, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';
 import { getReadableFileSizeString } from '../../utilities/stringUtilities';
 import { DropzoneResx } from './types';
 
@@ -9,11 +9,11 @@ import { DropzoneResx } from './types';
 })
 export class DnnDropzone {
   /** Localization strings */
-  @Prop({mutable:true}) resx:DropzoneResx;
+  @Prop() resx:DropzoneResx;
 
   /** A list of allowed file extensions.
    * If not specified, any file is allowed.
-   * Ex: ["jpg", "jped", "gif", "png"]
+   * Ex: ["jpg", "jpeg", "gif", "png"]
    */
   @Prop() allowedExtensions: string[];
 
@@ -45,6 +45,8 @@ export class DnnDropzone {
   @State() fileTooLarge: boolean = false;
 
   @State() invalidExtension: boolean = false;
+
+  @State() localResx: DropzoneResx;
 
 
   private dropzone: HTMLElement;
@@ -64,7 +66,7 @@ export class DnnDropzone {
   }
 
   componentWillLoad() {
-    this.resx = {...this.defaultResx, ...this.resx}
+    this.mergeResx();
   }
 
   componentDidLoad() {
@@ -79,6 +81,15 @@ export class DnnDropzone {
     }
   }
 
+  @Watch('resx')
+  resxChanged() {
+    this.mergeResx();
+  }
+
+  private mergeResx(): void {
+    this.localResx = {...this.defaultResx, ...this.resx};
+  }
+
   private checkIfBrowserCanTakeSnapshots(): Promise<boolean> {
     return new Promise((resolve) => {
       const mediaDevices = navigator.mediaDevices;
@@ -146,12 +157,13 @@ export class DnnDropzone {
     for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {
       const file = files[fileIndex];
       var regex = /(?:\.([^.]+))?$/;
-      const fileExtension = regex.exec(file.name)[1];
+      const fileExtension = regex.exec(file.name)[1]?.toLowerCase();
       if (fileExtension == undefined){
         hasInvalid = true;
       }
 
-      if (this.allowedExtensions != undefined && !this.allowedExtensions.includes(fileExtension)){
+      var loweredAllowedExtensions = this.allowedExtensions.map(e => e.toLowerCase());
+      if (this.allowedExtensions != undefined && !loweredAllowedExtensions.includes(fileExtension)){
         hasInvalid = true;
       }
 
@@ -208,6 +220,12 @@ export class DnnDropzone {
       this.filesSelected.emit(fileList)
     }, "image/jpeg", this.captureQuality);
   }
+
+  private getInvalidExtensionsMessage() {
+    var message = this.localResx.allowedFileExtensions;
+    var message = message.replace("{0}", this.allowedExtensions.join(", "));
+    return message;
+  }
 
   render() {
     return (
@@ -220,9 +238,9 @@ export class DnnDropzone {
       >
         {!this.takingPicture &&
           [
-            <p>{this.resx?.dragAndDropFile}</p>
+            <p>{this.localResx?.dragAndDropFile}</p>
           ,
-            <p>- {this.resx?.or} -</p>
+            <p>- {this.localResx?.or} -</p>
           ,
             <label class="upload-file">
               <input
@@ -235,18 +253,18 @@ export class DnnDropzone {
                 <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>
               </span>
               &nbsp;
-              {this.resx?.uploadFile}
+              {this.localResx?.uploadFile}
             </label>
             ,
             this.canTakeSnapshots &&
               [
-                <p>- {this.resx?.or} -</p>
+                <p>- {this.localResx?.or} -</p>
                 ,
                 <button
                   onClick={() => this.takeSnapshot()}
                 >
                   <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>
-                  {this.resx?.takePicture}
+                  {this.localResx?.takePicture}
                 </button>
               ]
           ]
@@ -258,30 +276,29 @@ export class DnnDropzone {
               onClick={() => this.applySnapshot()}
             >
               <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;
-              {this.resx?.capture}
+              {this.localResx?.capture}
             </button>
           </div>
         }
         { this.fileTooLarge && 
           <div class='error'>
               <p>
-                {this.resx.uploadSizeTooLarge}
+                {this.localResx.uploadSizeTooLarge}
                 <br/>
-                {this.resx.fileSizeLimit.replace("{0}", getReadableFileSizeString(this.maxFileSize)) } 
+                {this.localResx.fileSizeLimit.replace("{0}", getReadableFileSizeString(this.maxFileSize)) } 
               </p>
           </div>
         }
         { this.invalidExtension &&
           <div class='error'>
             <p>
-              {this.resx.invalidExtension}
+              {this.localResx.invalidExtension}
               <br/>
-              {this.resx.allowedFileExtensions.replace("{0}", this.allowedExtensions.join(", ")) }
+              {this.getInvalidExtensionsMessage()}
             </p>
           </div>
         }
       </Host>
     );
   }
-
 }

packages/stencil-library/src/components/dnn-dropzone/readme.md

@@ -10,7 +10,7 @@
 | Property            | Attribute           | Description                                                                                                                                   | Type           | Default     |
 | ------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ----------- |
 | `allowCameraMode`   | `allow-camera-mode` | If true, will allow the user to take a snapshot using the device camera. (only works over https).                                             | `boolean`      | `false`     |
-| `allowedExtensions` | --                  | A list of allowed file extensions. If not specified, any file is allowed. Ex: ["jpg", "jped", "gif", "png"]                                   | `string[]`     | `undefined` |
+| `allowedExtensions` | --                  | A list of allowed file extensions. If not specified, any file is allowed. Ex: ["jpg", "jpeg", "gif", "png"]                                   | `string[]`     | `undefined` |
 | `captureQuality`    | `capture-quality`   | Specifies the jpeg quality for when the device camera is used to generate a picture. Needs to be a number between 0 and 1 and defaults to 0.8 | `number`       | `0.8`       |
 | `maxFileSize`       | `max-file-size`     | Max file size in bytes.                                                                                                                       | `number`       | `undefined` |
 | `resx`              | --                  | Localization strings                                                                                                                          | `DropzoneResx` | `undefined` |