@umbraco-cms/backoffice 14.0.0--preview004-ec083258 → 14.0.0--preview004-81abec6d

package/dist-cms/css/dark.theme.css

@@ -0,0 +1,47 @@
+:root {
+	--uui-color-selected: #316dca;
+	--uui-color-selected-emphasis: #3e79d0;
+	--uui-color-selected-standalone: #5b8dd7;
+	--uui-color-selected-contrast: #eeeeef;
+	--uui-color-current: #316dca;
+	--uui-color-current-emphasis: #3e79d0;
+	--uui-color-current-standalone: #5b8dd7;
+	--uui-color-current-contrast: #f000;
+	--uui-color-disabled: #434c56;
+	--uui-color-disabled-standalone: #545d68;
+	--uui-color-disabled-contrast: #fcfcfc4d;
+	--uui-color-header-surface: #21262e;
+	--uui-color-header-contrast: #eeeeef;
+	--uui-color-header-contrast-emphasis: #eeeeef;
+	--uui-color-focus: #316dca;
+	--uui-color-surface: #2d333b;
+	--uui-color-surface-alt: #373e47;
+	--uui-color-surface-emphasis: #434c56;
+	--uui-color-background: #21262e;
+	--uui-color-text: #eeeeef;
+	--uui-color-text-alt: #eeeeef;
+	--uui-color-interactive: #eeeeef;
+	--uui-color-interactive-emphasis: #eeeeef;
+	--uui-color-border: #434c56;
+	--uui-color-border-standalone: #545d68;
+	--uui-color-border-emphasis: #626e7b;
+	--uui-color-divider: #373e47;
+	--uui-color-divider-standalone: #434c56;
+	--uui-color-divider-emphasis: #545d68;
+	--uui-color-default: #316dca;
+	--uui-color-default-emphasis: #316dca;
+	--uui-color-default-standalone: #316dca;
+	--uui-color-default-contrast: #eeeeef;
+	--uui-color-warning: #af7c12;
+	--uui-color-warning-emphasis: #af7c12;
+	--uui-color-warning-standalone: #af7c12;
+	--uui-color-warning-contrast: #eeeeef;
+	--uui-color-danger: #ca3b37;
+	--uui-color-danger-emphasis: #ca3b37;
+	--uui-color-danger-standalone: #ca3b37;
+	--uui-color-danger-contrast: #eeeeef;
+	--uui-color-positive: #347d39;
+	--uui-color-positive-emphasis: #347d39;
+	--uui-color-positive-standalone: #347d39;
+	--uui-color-positive-contrast: #eeeeef;
+}

package/dist-cms/css/high-contrast.theme.css

@@ -0,0 +1,53 @@
+:root {
+	--uui-color-selected: var(--uui-palette-violet-blue, #3544b1);
+	--uui-color-selected-emphasis: var(--uui-palette-violet-blue-light, rgb(70, 86, 200));
+	--uui-color-selected-standalone: var(--uui-palette-violet-blue-dark, rgb(54, 65, 156));
+	--uui-color-selected-contrast: #fff;
+	--uui-color-current: var(--uui-palette-spanish-pink, #f5c1bc);
+	--uui-color-current-emphasis: var(--uui-palette-spanish-pink-light, rgb(248, 214, 211));
+	--uui-color-current-standalone: var(--uui-palette-spanish-pink-dark, rgb(232, 192, 189));
+	--uui-color-current-contrast: var(--uui-palette-space-cadet, #1b264f);
+	--uui-color-disabled: var(--uui-palette-sand, #f3f3f5);
+	--uui-color-disabled-standalone: var(--uui-palette-sand-dark, rgb(226, 226, 226));
+	--uui-color-disabled-contrast: var(--uui-palette-grey, #c4c4c4);
+	--uui-color-header-surface: var(--uui-palette-space-cadet, #1b264f);
+	--uui-color-header-contrast: #fff;
+	--uui-color-header-contrast-emphasis: #fff;
+	--uui-color-focus: var(--uui-palette-malibu, #3879ff);
+	--uui-color-surface: #fff;
+	--uui-color-surface-alt: #fff;
+	--uui-color-surface-emphasis: #dadada;
+	--uui-color-background: #fff;
+	--uui-color-text: var(--uui-palette-black, #060606);
+	--uui-color-text-alt: var(--uui-palette-dune-black, #2e2b29);
+	--uui-color-interactive: var(--uui-palette-space-cadet, #1b264f);
+	--uui-color-interactive-emphasis: var(--uui-palette-violet-blue, #3544b1);
+	--uui-color-border: #000000;
+	--uui-color-border-standalone: #000000;
+	--uui-color-border-emphasis: #000000;
+	--uui-color-divider: #000000;
+	--uui-color-divider-standalone: #000000;
+	--uui-color-divider-emphasis: #000000;
+	--uui-color-default: var(--uui-palette-space-cadet, #1b264f);
+	--uui-color-default-emphasis: var(--uui-palette-violet-blue, #3544b1);
+	--uui-color-default-standalone: var(--uui-palette-space-cadet-dark, rgb(28, 35, 59));
+	--uui-color-default-contrast: #fff;
+	--uui-color-warning: #ffd621;
+	--uui-color-warning-emphasis: #ffdc41;
+	--uui-color-warning-standalone: #ffdd43;
+	--uui-color-warning-contrast: #000;
+	--uui-color-danger: #c60239;
+	--uui-color-danger-emphasis: #da114a;
+	--uui-color-danger-standalone: #d0003b;
+	--uui-color-danger-contrast: white;
+	--uui-color-positive: #0d8844;
+	--uui-color-positive-emphasis: #159c52;
+	--uui-color-positive-standalone: #1cae5e;
+	--uui-color-positive-contrast: #fff;
+
+	--uui-shadow-depth-1: 0 0 0px 1px black;
+	--uui-shadow-depth-2: 0 0 0px 1px black;
+	--uui-shadow-depth-3: 0 0 0px 1px black;
+	--uui-shadow-depth-4: 0 0 0px 1px black;
+	--uui-shadow-depth-5: 0 0 0px 1px black;
+}

package/dist-cms/libs/extension-api/functions/load-manifest-api.function.d.ts

@@ -1,3 +1,3 @@
-import type { UmbApi } from "../models/api.interface.js";
-import type { ApiLoaderProperty, ClassConstructor, ElementAndApiLoaderProperty } from "../types/utils.js";
+import type { UmbApi } from '../models/api.interface.js';
+import type { ApiLoaderProperty, ClassConstructor, ElementAndApiLoaderProperty } from '../types/utils.js';
 export declare function loadManifestApi<ApiType extends UmbApi>(property: ApiLoaderProperty<ApiType> | ElementAndApiLoaderProperty<any, ApiType>): Promise<ClassConstructor<ApiType> | undefined>;

package/dist-cms/libs/extension-api/functions/load-manifest-api.function.js

@@ -9,7 +9,8 @@ export async function loadManifestApi(property) {
             // Promise function
             const result = await property();
             if (typeof result === 'object' && result != null) {
-                const exportValue = 'api' in result ? result.api : undefined || 'default' in result ? result.default : undefined;
+                const exportValue = ('api' in result ? result.api : undefined) ||
+                    ('default' in result ? result.default : undefined);
                 if (exportValue && typeof exportValue === 'function') {
                     return exportValue;
                 }
@@ -19,8 +20,8 @@ export async function loadManifestApi(property) {
     else if (propType === 'string') {
         // Import string
         const result = await import(/* @vite-ignore */ property);
-        if (typeof result === 'object' && result != null) {
-            const exportValue = 'api' in result ? result.api : undefined || 'default' in result ? result.default : undefined;
+        if (result && typeof result === 'object') {
+            const exportValue = ('api' in result ? result.api : undefined) || ('default' in result ? result.default : undefined);
             if (exportValue && typeof exportValue === 'function') {
                 return exportValue;
             }

package/dist-cms/libs/extension-api/functions/load-manifest-element.function.d.ts

@@ -1,2 +1,2 @@
-import type { ClassConstructor, ElementAndApiLoaderProperty, ElementLoaderProperty } from "../types/utils.js";
+import type { ClassConstructor, ElementAndApiLoaderProperty, ElementLoaderProperty } from '../types/utils.js';
 export declare function loadManifestElement<ElementType extends HTMLElement>(property: ElementLoaderProperty<ElementType> | ElementAndApiLoaderProperty<ElementType>): Promise<ClassConstructor<ElementType> | undefined>;

package/dist-cms/libs/extension-api/functions/load-manifest-element.function.js

@@ -9,7 +9,8 @@ export async function loadManifestElement(property) {
             // Promise function
             const result = await property();
             if (typeof result === 'object' && result !== null) {
-                const exportValue = 'element' in result ? result.element : undefined || 'default' in result ? result.default : undefined;
+                const exportValue = ('element' in result ? result.element : undefined) ||
+                    ('default' in result ? result.default : undefined);
                 if (exportValue && typeof exportValue === 'function') {
                     return exportValue;
                 }
@@ -18,9 +19,10 @@ export async function loadManifestElement(property) {
     }
     else if (propType === 'string') {
         // Import string
-        const result = await import(/* @vite-ignore */ property);
-        if (typeof result === 'object' && result != null) {
-            const exportValue = 'element' in result ? result.element : undefined || 'default' in result ? result.default : undefined;
+        const result = await import(
+        /* @vite-ignore */ property);
+        if (result && typeof result === 'object') {
+            const exportValue = ('element' in result ? result.element : undefined) || ('default' in result ? result.default : undefined);
             if (exportValue && typeof exportValue === 'function') {
                 return exportValue;
             }

package/dist-cms/libs/extension-api/functions/load-manifest-plain-css.function.d.ts

@@ -1,2 +1,2 @@
-import type { JsLoaderProperty } from "../types/utils.js";
-export declare function loadManifestPlainCss<CssType = string>(property: JsLoaderProperty<CssType>): Promise<CssType | undefined>;
+import type { CssLoaderProperty } from '../types/utils.js';
+export declare function loadManifestPlainCss<CssType extends string>(property: CssLoaderProperty<CssType>): Promise<CssType | undefined>;

package/dist-cms/libs/extension-api/functions/load-manifest-plain-css.function.js

@@ -1,16 +1,23 @@
 export async function loadManifestPlainCss(property) {
     const propType = typeof property;
     if (propType === 'function') {
+        // Promise function
         const result = await property();
-        if (result != null) {
-            return result;
+        if (typeof result === 'object' && result != null) {
+            const exportValue = ('css' in result ? result.css : undefined) || ('default' in result ? result.default : undefined);
+            if (exportValue && typeof exportValue === 'string') {
+                return exportValue;
+            }
         }
     }
     else if (propType === 'string') {
         // Import string
         const result = await import(/* @vite-ignore */ property);
-        if (result != null) {
-            return result;
+        if (typeof result === 'object' && result != null) {
+            const exportValue = ('css' in result ? result.css : undefined) || ('default' in result ? result.default : undefined);
+            if (exportValue && typeof exportValue === 'string') {
+                return exportValue;
+            }
         }
     }
     return undefined;

package/dist-cms/libs/extension-api/functions/load-manifest-plain-js.function.d.ts

@@ -1,2 +1,2 @@
-import type { JsLoaderProperty } from "../types/utils.js";
+import type { JsLoaderProperty } from '../types/utils.js';
 export declare function loadManifestPlainJs<JsType extends object>(property: JsLoaderProperty<JsType>): Promise<JsType | undefined>;

package/dist-cms/libs/extension-api/functions/load-manifest-plain-js.function.js

@@ -1,6 +1,7 @@
 export async function loadManifestPlainJs(property) {
     const propType = typeof property;
     if (propType === 'function') {
+        // Promise function
         const result = await property();
         if (typeof result === 'object' && result != null) {
             return result;

package/dist-cms/libs/extension-api/types/base.types.d.ts

@@ -16,12 +16,12 @@ export interface ManifestElementWithElementName extends ManifestElement {
      */
     elementName: string;
 }
-export interface ManifestPlainCss<CssType = unknown> extends ManifestBase {
+export interface ManifestPlainCss extends ManifestBase {
     /**
      * The file location of the stylesheet file to load
      * @TJS-type string
      */
-    css?: CssLoaderProperty<CssType>;
+    css?: CssLoaderProperty;
 }
 export interface ManifestPlainJs<JsType> extends ManifestBase {
     /**

package/dist-cms/libs/extension-api/types/utils.d.ts

@@ -1,31 +1,36 @@
-import type { UmbApi } from "../models/index.js";
+import type { UmbApi } from '../models/index.js';
 export type HTMLElementConstructor<T = HTMLElement> = new (...args: any[]) => T;
 export type ClassConstructor<T = object> = new (...args: any[]) => T;
-export type ElementLoaderExports<ElementType extends HTMLElement = HTMLElement> = ({
+export type CssLoaderExports<CssType extends string = string> = {
+    default: CssType;
+} | {
+    css: CssType;
+};
+export type ElementLoaderExports<ElementType extends HTMLElement = HTMLElement> = {
     default: ClassConstructor<ElementType>;
 } | {
     element: ClassConstructor<ElementType>;
-});
-export type ApiLoaderExports<ApiType extends UmbApi = UmbApi> = ({
+};
+export type ApiLoaderExports<ApiType extends UmbApi = UmbApi> = {
     default: ClassConstructor<ApiType>;
 } | {
     api: ClassConstructor<ApiType>;
-});
-export type ElementAndApiLoaderExports<ElementType extends HTMLElement = HTMLElement, ApiType extends UmbApi = UmbApi> = ({
+};
+export type ElementAndApiLoaderExports<ElementType extends HTMLElement = HTMLElement, ApiType extends UmbApi = UmbApi> = {
     api: ClassConstructor<ApiType>;
 } | {
     element: ClassConstructor<ElementType>;
 } | {
     api: ClassConstructor<ApiType>;
     element: ClassConstructor<ElementType>;
-});
-export type CssLoaderPromise<CssType = unknown> = (() => Promise<CssType>);
-export type JsLoaderPromise<JsType> = (() => Promise<JsType>);
-export type ElementLoaderPromise<ElementType extends HTMLElement = HTMLElement> = (() => Promise<ElementLoaderExports<ElementType>>);
-export type ApiLoaderPromise<ApiType extends UmbApi = UmbApi> = (() => Promise<ApiLoaderExports<ApiType>>);
-export type ElementAndApiLoaderPromise<ElementType extends HTMLElement = HTMLElement, ApiType extends UmbApi = UmbApi> = (() => Promise<ElementAndApiLoaderExports<ElementType, ApiType>>);
-export type CssLoaderProperty<CssType = string> = (string | CssLoaderPromise<CssType>);
-export type JsLoaderProperty<JsType> = (string | JsLoaderPromise<JsType>);
-export type ElementLoaderProperty<ElementType extends HTMLElement = HTMLElement> = (string | ElementLoaderPromise<ElementType> | ClassConstructor<ElementType>);
-export type ApiLoaderProperty<ApiType extends UmbApi = UmbApi> = (string | ApiLoaderPromise<ApiType> | ClassConstructor<ApiType>);
-export type ElementAndApiLoaderProperty<ElementType extends HTMLElement = HTMLElement, ApiType extends UmbApi = UmbApi> = (string | ElementAndApiLoaderPromise<ElementType, ApiType> | ElementLoaderPromise<ElementType> | ApiLoaderPromise<ApiType>);
+};
+export type CssLoaderPromise<CssType extends string = string> = () => Promise<CssLoaderExports<CssType>>;
+export type JsLoaderPromise<JsExportType> = () => Promise<JsExportType>;
+export type ElementLoaderPromise<ElementType extends HTMLElement = HTMLElement> = () => Promise<ElementLoaderExports<ElementType>>;
+export type ApiLoaderPromise<ApiType extends UmbApi = UmbApi> = () => Promise<ApiLoaderExports<ApiType>>;
+export type ElementAndApiLoaderPromise<ElementType extends HTMLElement = HTMLElement, ApiType extends UmbApi = UmbApi> = () => Promise<ElementAndApiLoaderExports<ElementType, ApiType>>;
+export type CssLoaderProperty<CssType extends string = string> = string | CssLoaderPromise<CssType>;
+export type JsLoaderProperty<JsExportType> = string | JsLoaderPromise<JsExportType>;
+export type ElementLoaderProperty<ElementType extends HTMLElement = HTMLElement> = string | ElementLoaderPromise<ElementType> | ClassConstructor<ElementType>;
+export type ApiLoaderProperty<ApiType extends UmbApi = UmbApi> = string | ApiLoaderPromise<ApiType> | ClassConstructor<ApiType>;
+export type ElementAndApiLoaderProperty<ElementType extends HTMLElement = HTMLElement, ApiType extends UmbApi = UmbApi> = string | ElementAndApiLoaderPromise<ElementType, ApiType> | ElementLoaderPromise<ElementType> | ApiLoaderPromise<ApiType>;

package/dist-cms/packages/core/extension-registry/models/theme.model.d.ts

@@ -2,6 +2,6 @@ import type { ManifestPlainCss } from '../../../../libs/extension-api/index.js';
 /**
  * Theme manifest for styling the backoffice of Umbraco such as dark, high contrast etc
  */
-export interface ManifestTheme extends ManifestPlainCss<string> {
+export interface ManifestTheme extends ManifestPlainCss {
     type: 'theme';
 }

package/dist-cms/packages/core/section/section-main-views/section-main-views.element.js

@@ -75,7 +75,8 @@ export let UmbSectionMainViewElement = class UmbSectionMainViewElement extends U
             : html `${nothing}`;
     }
     #renderDashboards() {
-        return this._dashboards.length > 0
+        // Only show dashboards if there are more than one dashboard or if there are both dashboards and views
+        return (this._dashboards.length > 0 && this._views.length > 0) || this._dashboards.length > 1
             ? html `
 					<uui-tab-group slot="header" id="dashboards">
 						${this._dashboards.map((dashboard) => {
@@ -93,7 +94,8 @@ export let UmbSectionMainViewElement = class UmbSectionMainViewElement extends U
             : '';
     }
     #renderViews() {
-        return this._views.length > 0
+        // Only show views if there are more than one view or if there are both dashboards and views
+        return (this._views.length > 0 && this._dashboards.length > 0) || this._views.length > 1
             ? html `
 					<uui-tab-group slot="navigation" id="views">
 						${this._views.map((view) => {

package/dist-cms/packages/core/themes/manifests.js

@@ -15,14 +15,14 @@ export const themes = [
         type: 'theme',
         alias: 'umb-dark-theme',
         name: 'Dark',
-        css: 'src/packages/settings/themes/themes/dark.theme.css',
+        css: '/umbraco/backoffice/css/dark.theme.css',
         weight: 200,
     },
     {
         type: 'theme',
         alias: 'umb-high-contrast-theme',
         name: 'High contrast',
-        css: 'src/packages/settings/themes/themes/high-contrast.theme.css',
+        css: '/umbraco/backoffice/css/high-contrast.theme.css',
         weight: 100,
     },
 ];

package/dist-cms/packages/core/themes/theme.context.js

@@ -32,13 +32,15 @@ export class UmbThemeContext extends UmbBaseController {
                 if (themes.length > 0 && themes[0].css) {
                     const activeTheme = themes[0];
                     if (typeof activeTheme.css === 'function') {
-                        const styleEl = (this.#styleElement = document.createElement('style'));
-                        styleEl.setAttribute('type', 'text/css');
-                        document.head.appendChild(styleEl);
+                        this.#styleElement = document.createElement('style');
+                        // We store the current style element so we can check if it has been replaced by another theme in between.
+                        const currentStyleEl = this.#styleElement;
+                        currentStyleEl.setAttribute('type', 'text/css');
                         const result = await loadManifestPlainCss(activeTheme.css);
                         // Checking that this is still our styleElement, it has not been replaced with another theme in between.
-                        if (result && styleEl === this.#styleElement) {
-                            styleEl.appendChild(document.createTextNode(result));
+                        if (result && currentStyleEl === this.#styleElement) {
+                            currentStyleEl.appendChild(document.createTextNode(result));
+                            document.head.appendChild(currentStyleEl);
                         }
                     }
                     else if (typeof activeTheme.css === 'string') {
@@ -49,16 +51,22 @@ export class UmbThemeContext extends UmbBaseController {
                     }
                 }
                 else {
+                    console.log('remove style element', this.#styleElement);
+                    // We could not load a theme for this alias, so we remove the theme.
                     localStorage.removeItem(LOCAL_STORAGE_KEY);
                     this.#styleElement?.childNodes.forEach((node) => node.remove());
                     this.#styleElement?.setAttribute('href', '');
+                    this.#styleElement = null;
                 }
             });
         }
         else {
+            // Super clean, we got a falsy value, so we remove the theme.
             localStorage.removeItem(LOCAL_STORAGE_KEY);
+            this.#styleElement?.remove();
             this.#styleElement?.childNodes.forEach((node) => node.remove());
             this.#styleElement?.setAttribute('href', '');
+            this.#styleElement = null;
         }
     }
 }