@umbraco-cms/backoffice 16.3.3 → 16.4.0-rc

package/dist-cms/packages/core/entity-sign/components/entity-sign-bundle.element.js

@@ -0,0 +1,257 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { UmbLitElement } from '../../lit-element/lit-element.element.js';
+import { customElement, html, nothing, property, repeat, state, css } from '../../../../external/lit/index.js';
+import { UmbExtensionsElementAndApiInitializer } from '../../../../libs/extension-api/index.js';
+import { umbExtensionsRegistry } from '../../extension-registry/index.js';
+let UmbEntitySignBundleElement = class UmbEntitySignBundleElement extends UmbLitElement {
+    #entityType;
+    #entityFlagAliases;
+    get entityType() {
+        return this.#entityType;
+    }
+    set entityType(value) {
+        if (this.#entityType === value)
+            return;
+        this.#entityType = value;
+        this.#gotProperties();
+    }
+    get entityFlags() {
+        return this.#entityFlagAliases?.map((x) => ({ alias: x }));
+    }
+    set entityFlags(value) {
+        const entityFlagAliases = value?.map((x) => x.alias);
+        // If they are equal return:
+        if (this.#entityFlagAliases?.join(',') === entityFlagAliases?.join(','))
+            return;
+        this.#entityFlagAliases = entityFlagAliases;
+        this.#gotProperties();
+    }
+    #signLabelObservations;
+    constructor() {
+        super();
+        this._labels = new Map();
+        this._open = false;
+        this.#signLabelObservations = [];
+        this.#manifestFilter = (manifest) => {
+            if (manifest.forEntityTypes && !manifest.forEntityTypes.includes(this.#entityType))
+                return false;
+            if (manifest.forEntityFlags && !manifest.forEntityFlags.some((x) => this.#entityFlagAliases?.includes(x)))
+                return false;
+            return true;
+        };
+        this.#openTooltip = () => {
+            if (!this._open) {
+                this.#handleHoverTimer(true, 240);
+            }
+        };
+        this.#cancelOpen = () => {
+            if (this._open) {
+                this.#handleHoverTimer(false, 360);
+            }
+            else if (this._hoverTimer) {
+                clearTimeout(this._hoverTimer);
+                this._hoverTimer = undefined;
+            }
+        };
+        this.addEventListener('mouseenter', this.#openTooltip);
+        this.addEventListener('mouseleave', this.#cancelOpen);
+    }
+    #manifestFilter;
+    #gotProperties() {
+        if (!this.#entityType || !this.#entityFlagAliases) {
+            this.removeUmbControllerByAlias('extensionsInitializer');
+            this._signs = [];
+            return;
+        }
+        new UmbExtensionsElementAndApiInitializer(this, umbExtensionsRegistry, 'entitySign', (manifest) => [{ meta: manifest.meta }], this.#manifestFilter, (signs) => {
+            // Clean up old observers
+            this.#signLabelObservations.forEach((o) => this.removeUmbController(o));
+            this.#signLabelObservations = [];
+            // Setup label observers
+            signs.forEach((sign) => {
+                if (sign.api?.label) {
+                    const obs = this.observe(sign.api.label, (label) => {
+                        this._labels.set(sign.alias, label);
+                        this.requestUpdate('_labels');
+                    }, '_observeSignLabelOf_' + sign.alias);
+                    this.#signLabelObservations.push(obs);
+                }
+                else if (sign.api?.getLabel) {
+                    this._labels.set(sign.alias, sign.api.getLabel() ?? '');
+                    this.requestUpdate('_labels');
+                }
+            });
+            this._signs = signs;
+        }, 'extensionsInitializer');
+    }
+    #handleHoverTimer(open, delay) {
+        if (this._hoverTimer)
+            clearTimeout(this._hoverTimer);
+        this._hoverTimer = window.setTimeout(() => {
+            this._open = open;
+            this.requestUpdate();
+            this._hoverTimer = undefined;
+        }, delay);
+    }
+    #openTooltip;
+    #cancelOpen;
+    render() {
+        return html `
+			<slot></slot>
+			${this.#renderBundle()}
+		`;
+    }
+    #renderBundle() {
+        if (!this._signs || this._signs.length === 0)
+            return nothing;
+        const first = this._signs?.[0];
+        if (!first)
+            return nothing;
+        return html `<div class="infobox ${this._open ? 'is-open' : ''}" style=${`--count:${this._signs.length}`}>
+			${this.#renderOptions()}
+		</div>`;
+    }
+    #renderOptions() {
+        return this._signs
+            ? repeat(this._signs, (c) => c.alias, (c, i) => {
+                return html `<div class="sign-container ${i > 1 ? 'hide-in-overview' : ''}" style=${`--i:${i}`}>
+							<span class="badge-icon">${c.component}</span><span class="label">${this._labels.get(c.alias)}</span>
+						</div>`;
+            })
+            : nothing;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				anchor-name: --entity-sign;
+				position: relative;
+				--offset-h: 12px; /* 22px / 16 */
+				--row-h: 1.36rem; /* 22px / 16 */
+				--icon-w: 0.75rem; /* 12px / 16 */
+				--pad-x: 0.25rem; /*  4px / 16 */
+				--ease: cubic-bezier(0.1, 0, 0.3, 1);
+				--ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+			}
+
+			.infobox {
+				position: absolute;
+				top: 100%;
+				margin-top: calc(-12px + var(--offset-h));
+				left: 100%;
+				margin-left: -6px;
+				background-color: transparent;
+				padding: var(--uui-size-2);
+				padding-left: var(--uui-size-3);
+				font-size: 8px;
+				clip-path: inset(-10px calc(100% - 30px) calc(100% - 10px) -20px);
+				transition:
+					background-color 80ms 40ms linear,
+					clip-path 120ms var(--ease-bounce),
+					font-size 120ms var(--ease);
+				/*will-change: clip-path;*/
+				min-height: fit-content;
+			}
+			.infobox::before {
+				content: '';
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 100%;
+				bottom: 100%;
+				opacity: 0;
+				border-radius: 3px;
+				box-shadow: var(--uui-shadow-depth-2);
+				display: none;
+				transition:
+					right 120ms var(--ease-bounce),
+					bottom 120ms var(--ease-bounce),
+					opacity 120ms linear,
+					display 0 120ms;
+			}
+
+			.infobox > .sign-container {
+				display: flex;
+				align-items: start;
+				gap: 3px;
+				position: relative;
+				transform: translate(calc((var(--i) * -5px) - 10px), calc((-1 * var(--i) * var(--row-h)) - var(--offset-h)));
+				transition:
+					transform 120ms var(--ease),
+					visibility 0ms linear 120ms opacity 120ms linear;
+				z-index: calc(var(--count) - var(--i));
+				/*will-change: transform;*/
+				pointer-events: none;
+			}
+			.infobox > .sign-container.hide-in-overview {
+				visibility: hidden;
+			}
+
+			.infobox .sign-container .label {
+				opacity: 0;
+				transition: opacity 120ms;
+			}
+
+			/*OPEN STATE -- Prevent the hover state in firefox(until support of the position-anchor)*/
+			@supports (position-anchor: --any-check) {
+				.infobox {
+					position: fixed;
+					position-anchor: --entity-sign;
+					top: anchor(bottom);
+					left: anchor(right);
+					z-index: 1;
+				}
+				.infobox.is-open {
+					z-index: 10;
+					background-color: var(--uui-color-surface);
+					font-size: 12px;
+					color: var(--uui-color-text);
+					clip-path: inset(-6px);
+					--umb-sign-bundle-bg: var(--uui-color-surface);
+				}
+				.infobox.is-open::before {
+					right: 0;
+					bottom: 0;
+					opacity: 100;
+					background-color: var(--uui-color-surface);
+					display: block;
+					transition:
+						right 120ms var(--ease-bounce),
+						bottom 120ms var(--ease-bounce),
+						opacity 120ms var(--ease),
+						display 0 0;
+				}
+				.infobox.is-open > .sign-container {
+					transform: none;
+					align-items: center;
+					transition: transform 120ms var(--ease);
+					visibility: visible;
+				}
+				.infobox.is-open .sign-container .label {
+					opacity: 1;
+					pointer-events: auto;
+				}
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: String, attribute: 'entity-type', reflect: false })
+], UmbEntitySignBundleElement.prototype, "entityType", null);
+__decorate([
+    property({ type: Array, attribute: false })
+], UmbEntitySignBundleElement.prototype, "entityFlags", null);
+__decorate([
+    state()
+], UmbEntitySignBundleElement.prototype, "_signs", void 0);
+__decorate([
+    state()
+], UmbEntitySignBundleElement.prototype, "_labels", void 0);
+UmbEntitySignBundleElement = __decorate([
+    customElement('umb-entity-sign-bundle')
+], UmbEntitySignBundleElement);
+export { UmbEntitySignBundleElement };

package/dist-cms/packages/core/entity-sign/components/index.d.ts

@@ -0,0 +1 @@
+export * from './entity-sign-bundle.element.js';

package/dist-cms/packages/core/entity-sign/components/index.js

@@ -0,0 +1 @@
+export * from './entity-sign-bundle.element.js';

package/dist-cms/packages/core/entity-sign/extensions/entity-sign-api.interface.d.ts

@@ -0,0 +1,18 @@
+import type { MetaEntitySign } from './entity-sign.extension.js';
+import type { UmbApi } from '../../../../libs/extension-api/index.js';
+import type { Observable } from '../../../../libs/observable-api/index.js';
+export interface UmbEntitySignApi extends UmbApi {
+    /**
+     * Get the label for this sign
+     * @returns {string} The label
+     */
+    getLabel?: () => string;
+    /**
+     * An observable that provides the label for this sign
+     * @returns { Observable<string>} A label observable
+     */
+    label?: Observable<string>;
+}
+export interface UmbEntitySignApiArgs<MetaType extends MetaEntitySign = MetaEntitySign> {
+    meta: MetaType;
+}

package/dist-cms/packages/core/entity-sign/extensions/entity-sign-api.interface.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/core/entity-sign/extensions/entity-sign-element.interface.d.ts

@@ -0,0 +1,5 @@
+import type { ManifestEntitySign } from './entity-sign.extension.js';
+import type { UmbControllerHostElement } from '../../../../libs/controller-api/index.js';
+export interface UmbEntitySignElement extends UmbControllerHostElement {
+    manifest?: ManifestEntitySign;
+}

package/dist-cms/packages/core/entity-sign/extensions/entity-sign-element.interface.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/core/entity-sign/extensions/entity-sign.extension.d.ts

@@ -0,0 +1,20 @@
+import type { UmbEntitySignElement } from './entity-sign-element.interface.js';
+import type { UmbEntitySignApi } from './entity-sign-api.interface.js';
+import type { ManifestElementAndApi, ManifestWithDynamicConditions } from '../../../../libs/extension-api/index.js';
+/**
+ * An action to perform on an entity
+ * For example for content you may wish to create a new document etc
+ */
+export interface ManifestEntitySign<MetaType extends MetaEntitySign = MetaEntitySign> extends ManifestElementAndApi<UmbEntitySignElement, UmbEntitySignApi>, ManifestWithDynamicConditions<UmbExtensionConditionConfig> {
+    type: 'entitySign';
+    forEntityTypes?: Array<string>;
+    forEntityFlags?: Array<string>;
+    meta: MetaType;
+}
+export interface MetaEntitySign {
+}
+declare global {
+    interface UmbExtensionManifestMap {
+        umbEntitySign: ManifestEntitySign;
+    }
+}

package/dist-cms/packages/core/entity-sign/extensions/entity-sign.extension.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/core/entity-sign/extensions/types.d.ts

@@ -0,0 +1,3 @@
+export type * from './entity-sign-element.interface.js';
+export type * from './entity-sign.extension.js';
+export type * from './entity-sign-api.interface.js';

package/dist-cms/packages/core/entity-sign/extensions/types.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/core/entity-sign/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/index.js';
+export type * from './types.js';

package/dist-cms/packages/core/entity-sign/index.js

@@ -0,0 +1 @@
+export * from './components/index.js';

package/dist-cms/packages/core/entity-sign/kinds/icon/entity-sign-icon.api.d.ts

@@ -0,0 +1,10 @@
+import type { UmbEntitySignApi, UmbEntitySignApiArgs } from '../../extensions/entity-sign-api.interface.js';
+import type { MetaEntitySignIconKind } from './types.js';
+import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
+export declare class UmbIconEntitySign implements UmbEntitySignApi {
+    #private;
+    constructor(host: UmbControllerHost, args: UmbEntitySignApiArgs<MetaEntitySignIconKind>);
+    getLabel(): string;
+    destroy(): void;
+}
+export { UmbIconEntitySign as api };

package/dist-cms/packages/core/entity-sign/kinds/icon/entity-sign-icon.api.js

@@ -0,0 +1,11 @@
+export class UmbIconEntitySign {
+    #label;
+    constructor(host, args) {
+        this.#label = args.meta.label;
+    }
+    getLabel() {
+        return this.#label;
+    }
+    destroy() { }
+}
+export { UmbIconEntitySign as api };

package/dist-cms/packages/core/entity-sign/kinds/icon/entity-sign-icon.element.d.ts

@@ -0,0 +1,10 @@
+import type { ManifestEntitySignIconKind } from './types.js';
+import { nothing } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../lit-element/index.js';
+import type { UmbEntitySignElement } from '../../types.js';
+export declare class UmbEntitySignIconElement extends UmbLitElement implements UmbEntitySignElement {
+    manifest?: ManifestEntitySignIconKind;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export { UmbEntitySignIconElement as element };

package/dist-cms/packages/core/entity-sign/kinds/icon/entity-sign-icon.element.js

@@ -0,0 +1,41 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, customElement, html, nothing, property } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../lit-element/index.js';
+let UmbEntitySignIconElement = class UmbEntitySignIconElement extends UmbLitElement {
+    render() {
+        return this.manifest
+            ? html `<umb-icon
+					.name=${this.manifest.meta.iconName ?? 'icon-circle-dotted'}
+					.color=${this.manifest.meta.iconColorAlias}></umb-icon>`
+            : nothing;
+    }
+    static { this.styles = [
+        css `
+			umb-icon {
+				filter: drop-shadow(-1px 0 0 var(--umb-sign-bundle-bg)) drop-shadow(0 -1px 0 var(--umb-sign-bundle-bg))
+					drop-shadow(0 1px 0 var(--umb-sign-bundle-bg));
+			}
+			umb-icon::before {
+				content: '';
+				position: absolute;
+				z-index: -1;
+				border-radius: 50%;
+				inset: 2px;
+				background-color: var(--umb-sign-bundle-bg);
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: Object, attribute: false })
+], UmbEntitySignIconElement.prototype, "manifest", void 0);
+UmbEntitySignIconElement = __decorate([
+    customElement('umb-entity-sign-icon')
+], UmbEntitySignIconElement);
+export { UmbEntitySignIconElement };
+export { UmbEntitySignIconElement as element };

package/dist-cms/packages/core/entity-sign/kinds/icon/index.d.ts

@@ -0,0 +1 @@
+export * from './entity-sign-icon.element.js';

package/dist-cms/packages/core/entity-sign/kinds/icon/index.js

@@ -0,0 +1 @@
+export * from './entity-sign-icon.element.js';

package/dist-cms/packages/core/entity-sign/kinds/icon/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { UmbExtensionManifestKind } from '../../../extension-registry/index.js';
+export declare const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind>;

package/dist-cms/packages/core/entity-sign/kinds/icon/manifests.js

@@ -0,0 +1,14 @@
+export const manifests = [
+    {
+        type: 'kind',
+        alias: 'Umb.Kind.EntitySign.Icon',
+        matchKind: 'icon',
+        matchType: 'entitySign',
+        manifest: {
+            type: 'entitySign',
+            kind: 'icon',
+            element: () => import('./entity-sign-icon.element.js'),
+            api: () => import('./entity-sign-icon.api.js'),
+        },
+    },
+];

package/dist-cms/packages/core/entity-sign/kinds/icon/types.d.ts

@@ -0,0 +1,15 @@
+import type { ManifestEntitySign, MetaEntitySign } from '../../types.js';
+export interface ManifestEntitySignIconKind extends ManifestEntitySign<MetaEntitySignIconKind> {
+    type: 'entitySign';
+    kind: 'icon';
+}
+export interface MetaEntitySignIconKind extends MetaEntitySign {
+    iconName: string;
+    label: string;
+    iconColorAlias?: string;
+}
+declare global {
+    interface UmbExtensionManifestMap {
+        umbEntitySignIconKind: ManifestEntitySignIconKind;
+    }
+}

package/dist-cms/packages/core/entity-sign/kinds/icon/types.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/core/entity-sign/kinds/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { UmbExtensionManifestKind } from '../../extension-registry/index.js';
+export declare const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind>;

package/dist-cms/packages/core/entity-sign/kinds/manifests.js

@@ -0,0 +1,2 @@
+import { manifests as iconManifests } from './icon/manifests.js';
+export const manifests = [...iconManifests];

package/dist-cms/packages/core/entity-sign/kinds/types.d.ts

@@ -0,0 +1 @@
+export type * from './icon/types.js';

package/dist-cms/packages/core/entity-sign/kinds/types.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/core/entity-sign/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { UmbExtensionManifestKind } from '../extension-registry/index.js';
+export declare const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind>;

package/dist-cms/packages/core/entity-sign/manifests.js

@@ -0,0 +1,2 @@
+import { manifests as kindsManifests } from './kinds/manifests.js';
+export const manifests = [...kindsManifests];

package/dist-cms/packages/core/entity-sign/types.d.ts

@@ -0,0 +1 @@
+export type * from './extensions/types.js';

package/dist-cms/packages/core/entity-sign/types.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/core/entry-point.d.ts

@@ -3,4 +3,5 @@ import './property-action/components/index.js';
 import './menu/components/index.js';
 import './extension-registry/components/index.js';
 import './entity-item/global-components.js';
+import './entity-sign/components/index.js';
 export declare const onInit: UmbEntryPointOnInit;

package/dist-cms/packages/core/entry-point.js

@@ -10,6 +10,7 @@ import './property-action/components/index.js';
 import './menu/components/index.js';
 import './extension-registry/components/index.js';
 import './entity-item/global-components.js';
+import './entity-sign/components/index.js';
 export const onInit = (host, extensionRegistry) => {
     new UmbExtensionsApiInitializer(host, extensionRegistry, 'globalContext', [host]);
     new UmbExtensionsApiInitializer(host, extensionRegistry, 'store', [host]);

package/dist-cms/packages/core/icon-registry/icon-dictionary.json

@@ -2226,6 +2226,10 @@
             "name": "icon-tree",
             "file": "tree-deciduous.svg"
         },
+        {
+            "name": "icon-trending-up-down",
+            "file": "trending-up-down.svg"
+        },
         {
             "name": "icon-trophy",
             "file": "trophy.svg"
@@ -2427,6 +2431,10 @@
             "name": "icon-star",
             "file": "star.svg"
         },
+        {
+            "name": "icon-stretch-horizontal",
+            "file": "stretch-horizontal.svg"
+        },
         {
             "name": "icon-database",
             "file": "database.svg"

package/dist-cms/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.d.ts

@@ -5,10 +5,8 @@ export declare class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIc
     private _searchInput?;
     private _iconsFiltered?;
     private _colorList;
-    private _currentIcon?;
-    private _currentColor;
+    private _isSearching;
     constructor();
-    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     renderSearch(): import("lit-html").TemplateResult<1>;
     renderIcons(): unknown;