@umbraco-cms/backoffice 14.0.0--preview004-19e302a4 → 14.0.0--preview004-37a447e4

package/dist-cms/apps/backoffice/components/backoffice-main.element.js

@@ -15,13 +15,16 @@ export let UmbBackofficeMainElement = class UmbBackofficeMainElement extends Umb
         this._routes = [];
         this._sections = [];
         this._routePrefix = 'section/';
-        this._onRouteChange = (event) => {
+        this._onRouteChange = async (event) => {
             const currentPath = event.target.localActiveViewPath || '';
             const section = this._sections.find((s) => this._routePrefix + s.manifest.meta.pathname === currentPath);
             if (!section)
                 return;
-            this._backofficeContext?.setActiveSectionAlias(section.alias);
-            this._provideSectionContext(section.manifest);
+            await section.asPromise();
+            if (section.manifest) {
+                this._backofficeContext?.setActiveSectionAlias(section.alias);
+                this._provideSectionContext(section.manifest);
+            }
         };
         this.consumeContext(UMB_BACKOFFICE_CONTEXT_TOKEN, (_instance) => {
             this._backofficeContext = _instance;

package/dist-cms/apps/installer/shared/utils.story-helpers.d.ts

@@ -1,2 +1,3 @@
 import { UmbInstallerContext } from '../installer.context.js';
-export declare const installerContextProvider: (story: any, installerContext?: UmbInstallerContext) => import("lit-html").TemplateResult<1>;
+import { type TemplateResult } from '../../../external/lit/index.js';
+export declare const installerContextProvider: (story: () => Node | string | TemplateResult, installerContext?: UmbInstallerContext) => TemplateResult<1>;

package/dist-cms/css/uui-css.css

@@ -129,13 +129,11 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   --uui-palette-maroon-flush: #d42054;
   --uui-palette-maroon-flush-light: rgb(226, 60, 107);
   --uui-palette-maroon-flush-dark: rgb(191, 33, 78);
-  --uui-palette-maroon-flush-dimmed: rgb(133, 107, 114); /* A11Y acceptable color. Originally #2BC37C*/
-  --uui-palette-jungle-green: #25aa60;
-  --uui-palette-jungle-green-light: rgb(43, 197, 112);
-  --uui-palette-jungle-green-dark: rgb(38, 156, 91);
-  --uui-palette-jungle-green-dimmed: rgb(89, 117, 102);
-
-  /*TODO: color needs proper name*/
+  --uui-palette-maroon-flush-dimmed: rgb(133, 107, 114);
+  --uui-palette-jungle-green: #2bc37c;
+  --uui-palette-jungle-green-light: rgb(58, 212, 140);
+  --uui-palette-jungle-green-dark: rgb(43, 179, 115);
+  --uui-palette-jungle-green-dimmed: rgb(102, 135, 120);
   --uui-palette-forest-green: #0b8152;
   --uui-palette-forest-green-light: rgb(13, 155, 98);
   --uui-palette-forest-green-dark: rgb(10, 115, 73);
@@ -255,13 +253,10 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   --uui-color-danger-standalone: var(--uui-palette-maroon-flush-dark,rgb(191, 33, 78));
   --uui-color-danger-contrast: white;
 
-  --uui-color-positive: #1f9554;
-  --uui-color-positive-emphasis: #2ca964;
-  --uui-color-positive-standalone: #19864a;
+  --uui-color-positive: var(--uui-palette-forest-green,#0b8152);
+  --uui-color-positive-emphasis: var(--uui-palette-forest-green-light,rgb(13, 155, 98));
+  --uui-color-positive-standalone: var(--uui-palette-forest-green-dark,rgb(10, 115, 73));
   --uui-color-positive-contrast: #fff;
-  /* --uui-color-positive: var(--uui-palette-jungle-green); Contrast not high enough */
-  /* --uui-color-positive-emphasis: var(--uui-palette-jungle-green-light); Contrast not high enough */
-  /* --uui-color-positive-standalone: var(--uui-palette-jungle-green-dark); Contrast not high enough */
 }
 :root[data-theme='dark'] {
   /* ----- STATES -----  */
@@ -332,6 +327,98 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   Bold: font-weight: bold;
   Black: font-weight: 900;
 
+*/
+/* Webfont: LatoLatin-Black */
+@font-face {
+  font-family: 'Lato';
+  src: local('LatoLatin Black'), local('LatoLatin-Black'),
+    url('../assets/fonts/lato/LatoLatin-Black.woff2') format('woff2');
+  font-style: normal;
+  font-display: swap;
+  font-weight: 900;
+  text-rendering: optimizeLegibility;
+}
+/* Webfont: LatoLatin-BlackItalic */
+@font-face {
+  font-family: 'Lato';
+  src: local('LatoLatin BlackItalic'), local('LatoLatin-BlackItalic'),
+    url('../assets/fonts/lato/LatoLatin-BlackItalic.woff2') format('woff2');
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  text-rendering: optimizeLegibility;
+}
+/* Webfont: LatoLatin-Bold */
+@font-face {
+  font-family: 'Lato';
+  src: local('LatoLatin Bold'), local('LatoLatin-Bold'),
+    url('../assets/fonts/lato/LatoLatin-Bold.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  text-rendering: optimizeLegibility;
+}
+/* Webfont: LatoLatin-BoldItalic */
+@font-face {
+  font-family: 'Lato';
+  src: local('LatoLatin BoldItalic'), local('LatoLatin-BoldItalic'),
+    url('../assets/fonts/lato/LatoLatin-BoldItalic.woff2') format('woff2');
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  text-rendering: optimizeLegibility;
+}
+/* Webfont: LatoLatin-Italic */
+@font-face {
+  font-family: 'Lato';
+  src: local('LatoLatin Italic'), local('LatoLatin-Italic'),
+    url('../assets/fonts/lato/LatoLatin-Italic.woff2') format('woff2');
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  text-rendering: optimizeLegibility;
+}
+/* Webfont: LatoLatin-Regular */
+@font-face {
+  font-family: 'Lato';
+  src: local('LatoLatin Regular'), local('LatoLatin-Regular'),
+    url('../assets/fonts/lato/LatoLatin-Regular.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  text-rendering: optimizeLegibility;
+}
+/* Webfont: LatoLatin-Light */
+@font-face {
+  font-family: 'Lato';
+  src: local('LatoLatin Light'), local('LatoLatin-Light'),
+    url('../assets/fonts/lato/LatoLatin-Light.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  text-rendering: optimizeLegibility;
+}
+/* Webfont: LatoLatin-LightItalic */
+@font-face {
+  font-family: 'Lato';
+  src: local('LatoLatin LightItalic'), local('LatoLatin-LightItalic'),
+    url('../assets/fonts/lato/LatoLatin-LightItalic.woff2') format('woff2');
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  text-rendering: optimizeLegibility;
+}
+:root {
+  --uui-font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+/*
+  Lato
+
+  Light: font-weight: 300;
+  Regular: font-weight: normal;
+  Bold: font-weight: bold;
+  Black: font-weight: 900;
+
 */
 /* Webfont: LatoLatin-Black */
 @font-face {

package/dist-cms/custom-elements.json

@@ -1208,6 +1208,176 @@
         }
       ]
     },
+    {
+      "name": "umb-image-cropper-focus-setter",
+      "path": "./../src/packages/core/components/input-image-cropper/image-cropper-focus-setter.element.ts",
+      "attributes": [
+        {
+          "name": "src",
+          "type": "string | undefined"
+        }
+      ],
+      "properties": [
+        {
+          "name": "imageElement",
+          "type": "HTMLImageElement"
+        },
+        {
+          "name": "wrapperElement",
+          "type": "HTMLImageElement"
+        },
+        {
+          "name": "focalPointElement",
+          "type": "HTMLImageElement"
+        },
+        {
+          "name": "src",
+          "attribute": "src",
+          "type": "string | undefined"
+        },
+        {
+          "name": "focalPoint",
+          "type": "{ left: number; top: number; }",
+          "default": "{\"left\":0.5,\"top\":0.5}"
+        },
+        {
+          "name": "styles",
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\twidth: 100%;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tuser-select: none;\\n\\t\\t\\tbackground-color: var(--uui-color-surface);\\n\\t\\t\\toutline: 1px solid var(--uui-color-border);\\n\\t\\t}\\n\\t\\t/* Wrapper is used to make the focal point position responsive to the image size */\\n\\t\\t#wrapper {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin: auto;\\n\\t\\t\\tmax-width: 100%;\\n\\t\\t\\tmax-height: 100%;\\n\\t\\t}\\n\\t\\t#image {\\n\\t\\t\\tmargin: auto;\\n\\t\\t\\tposition: relative;\\n\\t\\t}\\n\\t\\t#focal-point {\\n\\t\\t\\tcontent: '';\\n\\t\\t\\tdisplay: block;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\twidth: calc(2 * var(--dot-radius));\\n\\t\\t\\theight: calc(2 * var(--dot-radius));\\n\\t\\t\\toutline: 3px solid black;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tborder-radius: 50%;\\n\\t\\t\\tpointer-events: none;\\n\\t\\t\\tbackground-color: white;\\n\\t\\t}\\n\\t`\""
+        }
+      ],
+      "events": [
+        {
+          "name": "change"
+        }
+      ]
+    },
+    {
+      "name": "umb-image-cropper-preview",
+      "path": "./../src/packages/core/components/input-image-cropper/image-cropper-preview.element.ts",
+      "properties": [
+        {
+          "name": "imageElement",
+          "type": "HTMLImageElement"
+        },
+        {
+          "name": "imageContainerElement",
+          "type": "HTMLImageElement"
+        },
+        {
+          "name": "crop",
+          "type": "{ alias: string; coordinates?: { x1: number; x2: number; y1: number; y2: number; } | undefined; height: number; width: number; } | undefined"
+        },
+        {
+          "name": "src",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "focalPoint",
+          "type": "{ left: number; top: number; }"
+        },
+        {
+          "name": "styles",
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex-direction: column;\\n\\t\\t\\tpadding: var(--uui-size-space-4);\\n\\t\\t\\tborder-radius: var(--uui-border-radius);\\n\\t\\t\\tbackground-color: var(--uui-color-surface);\\n\\t\\t\\tcursor: pointer;\\n\\t\\t}\\n\\t\\t:host(:hover) {\\n\\t\\t\\tbackground-color: var(--uui-color-surface-alt);\\n\\t\\t}\\n\\t\\t#container {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\twidth: 100%;\\n\\t\\t\\taspect-ratio: 1;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t\\tmargin: auto;\\n\\t\\t\\tmax-width: 100%;\\n\\t\\t\\tmax-height: 200px;\\n\\t\\t\\tuser-select: none;\\n\\t\\t}\\n\\t\\t#alias {\\n\\t\\t\\tfont-weight: bold;\\n\\t\\t\\tmargin-top: var(--uui-size-space-3);\\n\\t\\t}\\n\\t\\t#dimensions,\\n\\t\\t#user-defined {\\n\\t\\t\\tfont-size: 0.8em;\\n\\t\\t}\\n\\t\\t#image {\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\tpointer-events: none;\\n\\t\\t}\\n\\t`\""
+        }
+      ]
+    },
+    {
+      "name": "umb-image-cropper",
+      "path": "./../src/packages/core/components/input-image-cropper/image-cropper.element.ts",
+      "attributes": [
+        {
+          "name": "src",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "zoom",
+          "type": "number"
+        }
+      ],
+      "properties": [
+        {
+          "name": "viewportElement",
+          "type": "HTMLElement"
+        },
+        {
+          "name": "maskElement",
+          "type": "HTMLElement"
+        },
+        {
+          "name": "imageElement",
+          "type": "HTMLImageElement"
+        },
+        {
+          "name": "value",
+          "type": "{ alias: string; coordinates?: { x1: number; x2: number; y1: number; y2: number; } | undefined; height: number; width: number; } | undefined"
+        },
+        {
+          "name": "src",
+          "attribute": "src",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "focalPoint",
+          "type": "{ left: number; top: number; }",
+          "default": "{\"left\":0.5,\"top\":0.5}"
+        },
+        {
+          "name": "zoom",
+          "attribute": "zoom",
+          "type": "number"
+        },
+        {
+          "name": "styles",
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: grid;\\n\\t\\t\\tgrid-template-rows: 1fr auto auto;\\n\\t\\t\\tgap: var(--uui-size-space-3);\\n\\t\\t\\theight: 100%;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t#viewport {\\n\\t\\t\\tbackground-color: #fff;\\n\\t\\t\\tbackground-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"100\\\" height=\\\"100\\\" fill-opacity=\\\".1\\\"><path d=\\\"M50 0h50v50H50zM0 50h50v50H0z\\\"/></svg>');\\n\\t\\t\\tbackground-repeat: repeat;\\n\\t\\t\\tbackground-size: 10px 10px;\\n\\t\\t\\tcontain: strict;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\twidth: 100%;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\toutline: 1px solid var(--uui-color-border);\\n\\t\\t\\tborder-radius: var(--uui-border-radius);\\n\\t\\t}\\n\\t\\t#actions {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tjustify-content: flex-end;\\n\\t\\t\\tgap: var(--uui-size-space-1);\\n\\t\\t}\\n\\n\\t\\t#mask {\\n\\t\\t\\tdisplay: block;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\tbox-shadow: 0 0 0 2000px hsla(0, 0%, 100%, 0.8);\\n\\t\\t\\tpointer-events: none;\\n\\t\\t}\\n\\n\\t\\t#image {\\n\\t\\t\\tdisplay: block;\\n\\t\\t\\tposition: absolute;\\n\\t\\t}\\n\\n\\t\\t#slider {\\n\\t\\t\\twidth: 100%;\\n\\t\\t\\theight: 0px; /* TODO: FIX - This is needed to prevent the slider from taking up more space than needed */\\n\\t\\t\\tmin-height: 22px; /* TODO: FIX - This is needed to prevent the slider from taking up more space than needed */\\n\\t\\t}\\n\\t`\""
+        }
+      ],
+      "events": [
+        {
+          "name": "change"
+        }
+      ]
+    },
+    {
+      "name": "umb-input-image-cropper",
+      "path": "./../src/packages/core/components/input-image-cropper/input-image-cropper.element.ts",
+      "properties": [
+        {
+          "name": "value",
+          "type": "UmbImageCropperPropertyEditorValue | undefined"
+        },
+        {
+          "name": "currentCrop",
+          "type": "{ alias: string; coordinates?: { x1: number; x2: number; y1: number; y2: number; } | undefined; height: number; width: number; } | undefined"
+        },
+        {
+          "name": "crops",
+          "type": "{ alias: string; coordinates?: { x1: number; x2: number; y1: number; y2: number; } | undefined; height: number; width: number; }[]",
+          "default": "[]"
+        },
+        {
+          "name": "focalPoint",
+          "type": "{ left: number; top: number; }",
+          "default": "{\"left\":0.5,\"top\":0.5}"
+        },
+        {
+          "name": "src",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "styles",
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\twidth: 100%;\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tgap: var(--uui-size-space-3);\\n\\t\\t\\theight: 400px;\\n\\t\\t}\\n\\t\\t#main {\\n\\t\\t\\tmax-width: 500px;\\n\\t\\t\\tmin-width: 300px;\\n\\t\\t\\twidth: 100%;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tgap: var(--uui-size-space-1);\\n\\t\\t\\tflex-direction: column;\\n\\t\\t}\\n\\t\\t#actions {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tjustify-content: space-between;\\n\\t\\t}\\n\\t\\tumb-image-cropper-focus-setter {\\n\\t\\t\\theight: calc(100% - 33px - var(--uui-size-space-1)); /* Temp solution to make room for actions */\\n\\t\\t}\\n\\t\\t#side {\\n\\t\\t\\tdisplay: grid;\\n\\t\\t\\tgrid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\\n\\t\\t\\tgap: var(--uui-size-space-3);\\n\\t\\t\\tflex-grow: 1;\\n\\t\\t\\toverflow-y: auto;\\n\\t\\t\\theight: fit-content;\\n\\t\\t\\tmax-height: 100%;\\n\\t\\t}\\n\\t`\""
+        }
+      ],
+      "events": [
+        {
+          "name": "change"
+        }
+      ]
+    },
     {
       "name": "umb-input-markdown",
       "path": "./../src/packages/core/components/input-markdown-editor/input-markdown.element.ts",
@@ -3160,16 +3330,14 @@
       "attributes": [
         {
           "name": "value",
-          "type": "string",
-          "default": "\"\""
+          "default": "\"undefined\""
         }
       ],
       "properties": [
         {
           "name": "value",
           "attribute": "value",
-          "type": "string",
-          "default": "\"\""
+          "default": "\"undefined\""
         },
         {
           "name": "config"
@@ -3179,32 +3347,36 @@
           "type": "array",
           "default": "[\"UmbTextStyles\"]"
         }
+      ],
+      "events": [
+        {
+          "name": "property-value-change"
+        }
       ]
     },
     {
       "name": "umb-property-editor-ui-image-crops-configuration",
       "path": "./../src/packages/core/property-editor/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts",
-      "attributes": [
-        {
-          "name": "value",
-          "type": "string",
-          "default": "\"\""
-        }
-      ],
       "properties": [
         {
           "name": "value",
-          "attribute": "value",
-          "type": "string",
-          "default": "\"\""
+          "type": "UmbCrop[]",
+          "default": "[]"
         },
         {
-          "name": "config"
+          "name": "editCropAlias",
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "styles",
           "type": "array",
-          "default": "[\"UmbTextStyles\"]"
+          "default": "[\"UmbTextStyles\",null]"
+        }
+      ],
+      "events": [
+        {
+          "name": "property-value-change"
         }
       ]
     },