@umbraco-cms/backoffice 18.1.1 → 18.2.0-rc

package/dist-cms/external/uui/uui-caret.element.js

@@ -0,0 +1,62 @@
+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 { defineElement } from '@umbraco-ui/uui';
+import { css, html, LitElement, property } from '../lit/index.js';
+/**
+ *  DEPRECATED: Please use uui-symbol-expand or uui-symbol-sort. A caret that rotates on click. Color will be `currentColor`
+ *  @deprecated since version 0.0.8
+ *  @element uui-caret
+ */
+let UUICaretElement = class UUICaretElement extends LitElement {
+    constructor() {
+        super();
+        /**
+         * Turns the arrow around.
+         * @type {boolean}
+         * @default false
+         */
+        this.open = false;
+        console.error('´uui-caret´ is deprecated, please use ´uui-symbol-expand´ or ´uui-symbol-sort´');
+    }
+    render() {
+        return html `<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="3"
+			stroke-linecap="round"
+			stroke-linejoin="round">
+			<path d="m4 9 8 8 8-8"></path>
+		</svg>`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				display: inline-block;
+				width: 12px;
+				vertical-align: middle;
+			}
+
+			svg {
+				transform-origin: 50% 50%;
+				transition: transform 100ms cubic-bezier(0.1, 0, 0.9, 1);
+			}
+
+			:host([open]) svg {
+				transform: rotate(180deg);
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UUICaretElement.prototype, "open", void 0);
+UUICaretElement = __decorate([
+    defineElement('uui-caret')
+], UUICaretElement);
+export { UUICaretElement };

package/dist-cms/external/uui/uui-popover.element.d.ts

@@ -0,0 +1,63 @@
+import { LitElement } from '../lit/index.js';
+export type PopoverPlacement = 'auto' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+/**
+ * @deprecated This component has been deprecated and will be removed in future releases. It is being replaced by popover-container.
+ * @element uui-popover
+ * @description Open a modal aligned with the opening element. This does not jet work within two layers of scroll containers.
+ * @fires close - When popover is closed by user interaction.
+ * @slot trigger - The element that triggers the popover.
+ * @slot popover - The content of the popover.
+ * @cssprop --uui-popover-z-index - overwrite the z-index of the popover container.
+ */
+export declare class UUIPopoverElement extends LitElement {
+    private intersectionObserver?;
+    private scrollEventHandler;
+    private containerElement;
+    private _open;
+    private _placement;
+    private _currentPlacement;
+    private _trigger?;
+    private _scrollParents;
+    private _positionX?;
+    private _positionY?;
+    /**
+     * Set the distance between popover-modal and trigger.
+     * @type {number}
+     * @attr margin
+     * @default 0
+     */
+    margin: number;
+    /**
+     * Define the placement of the popover-modal.
+     * @attr placement
+     * @default 'bottom-start'
+     */
+    get placement(): PopoverPlacement;
+    set placement(newValue: PopoverPlacement);
+    /**
+     * Opens the popover-modal.
+     * @type {boolean}
+     * @attr open
+     * @default false
+     */
+    get open(): boolean;
+    set open(newValue: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onTriggerSlotChanged;
+    private _openPopover;
+    private _closePopover;
+    private _triggerPopoverClose;
+    private _getScrollParents;
+    private _getAncestorElement;
+    private _createIntersectionObserver;
+    private _intersectionCallback;
+    private _startScrollListener;
+    private _stopScrollListener;
+    private _onKeyUp;
+    private _onDocumentClick;
+    private _updatePlacement;
+    private _managePlacementFlip;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}

package/dist-cms/external/uui/uui-popover.element.js

@@ -0,0 +1,457 @@
+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 { defineElement } from '@umbraco-ui/uui';
+import { property, query, css, html, LitElement } from '../lit/index.js';
+import { UUIPopoverEvent } from './UUIPopoverEvent.js';
+// ------------------- Math extensions ---------------------
+function mathClamp(value, min, max) {
+    if (value < min) {
+        return min;
+    }
+    else if (value > max) {
+        return max;
+    }
+    return value;
+}
+/**
+ * @deprecated This component has been deprecated and will be removed in future releases. It is being replaced by popover-container.
+ * @element uui-popover
+ * @description Open a modal aligned with the opening element. This does not jet work within two layers of scroll containers.
+ * @fires close - When popover is closed by user interaction.
+ * @slot trigger - The element that triggers the popover.
+ * @slot popover - The content of the popover.
+ * @cssprop --uui-popover-z-index - overwrite the z-index of the popover container.
+ */
+let UUIPopoverElement = class UUIPopoverElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.scrollEventHandler = this._updatePlacement.bind(this);
+        this._open = false;
+        this._placement = 'bottom-start';
+        this._currentPlacement = null;
+        this._scrollParents = [];
+        /**
+         * Set the distance between popover-modal and trigger.
+         * @type {number}
+         * @attr margin
+         * @default 0
+         */
+        this.margin = 0;
+        this._onTriggerSlotChanged = (event) => {
+            this._trigger = event.target.assignedElements({
+                flatten: true,
+            })[0];
+        };
+        this._intersectionCallback = (entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting === false) {
+                    this._startScrollListener();
+                    this._updatePlacement();
+                }
+            });
+        };
+        this._onKeyUp = (event) => {
+            if (event.key === 'Escape') {
+                this._triggerPopoverClose();
+                return;
+            }
+        };
+        this._onDocumentClick = (event) => {
+            if (!event.composedPath().includes(this)) {
+                this._triggerPopoverClose();
+            }
+        };
+    }
+    /**
+     * Define the placement of the popover-modal.
+     * @attr placement
+     * @default 'bottom-start'
+     */
+    get placement() {
+        return this._placement;
+    }
+    set placement(newValue) {
+        const oldValue = this._placement;
+        this._placement = newValue || 'bottom-start';
+        this._currentPlacement = null;
+        this._updatePlacement();
+        this.requestUpdate('placement', oldValue);
+    }
+    /**
+     * Opens the popover-modal.
+     * @type {boolean}
+     * @attr open
+     * @default false
+     */
+    get open() {
+        return this._open;
+    }
+    set open(newValue) {
+        const oldValue = this._open;
+        this._open = newValue;
+        if (newValue) {
+            this._openPopover();
+        }
+        else {
+            this._closePopover();
+        }
+        this.requestUpdate('open', oldValue);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._getScrollParents();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('mousedown', this._onDocumentClick);
+        document.removeEventListener('keyup', this._onKeyUp);
+        document.removeEventListener('scroll', this.scrollEventHandler);
+        if (this.intersectionObserver) {
+            this.intersectionObserver.disconnect();
+            delete this.intersectionObserver;
+        }
+        this._scrollParents = [];
+    }
+    _openPopover() {
+        if (this.containerElement) {
+            this.containerElement.style.opacity = '0'; // Hide while measuring popover size.
+            document.addEventListener('mousedown', this._onDocumentClick);
+            document.addEventListener('keyup', this._onKeyUp);
+            this._currentPlacement = null;
+            requestAnimationFrame(() => {
+                this._updatePlacement();
+                this._createIntersectionObserver();
+                this.containerElement.style.opacity = '1';
+            });
+        }
+    }
+    _closePopover() {
+        if (this.intersectionObserver) {
+            this.intersectionObserver.disconnect();
+            delete this.intersectionObserver;
+        }
+        document.removeEventListener('mousedown', this._onDocumentClick);
+        document.removeEventListener('keyup', this._onKeyUp);
+        this._currentPlacement = null;
+    }
+    // Use this when changing the open state from within this component.
+    _triggerPopoverClose() {
+        const event = new UUIPopoverEvent(UUIPopoverEvent.CLOSE, {
+            cancelable: true,
+        });
+        this.dispatchEvent(event);
+        if (event.defaultPrevented)
+            return;
+        this.open = false;
+    }
+    _getScrollParents() {
+        // Clear previous scroll parents to avoid duplicates
+        this._scrollParents = [];
+        const hostElement = this.shadowRoot.host;
+        let style = getComputedStyle(hostElement);
+        if (style.position === 'fixed') {
+            return;
+        }
+        const includeHidden = false;
+        const excludeStaticParent = style.position === 'absolute';
+        const overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
+        let el = hostElement;
+        while (el) {
+            style = getComputedStyle(el);
+            if (excludeStaticParent && style.position === 'static') {
+                el = this._getAncestorElement(el);
+                continue;
+            }
+            if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) {
+                this._scrollParents.push(el);
+            }
+            if (style.position === 'fixed') {
+                return;
+            }
+            el = this._getAncestorElement(el);
+        }
+        this._scrollParents.push(document.body);
+    }
+    _getAncestorElement(el) {
+        if (el?.parentElement) {
+            return el.parentElement;
+        }
+        else {
+            // If we had no parentElement, then check for shadow roots:
+            return el?.getRootNode()?.host;
+        }
+    }
+    _createIntersectionObserver() {
+        if (this.intersectionObserver) {
+            // break out, as we already have it
+            return;
+        }
+        const options = {
+            root: null,
+            rootMargin: '0px',
+            threshold: 1,
+        };
+        this.intersectionObserver = new IntersectionObserver(this._intersectionCallback, options);
+        this.intersectionObserver.observe(this.containerElement);
+    }
+    _startScrollListener() {
+        this._scrollParents.forEach((el) => {
+            el.addEventListener('scroll', this.scrollEventHandler);
+        });
+        document.addEventListener('scroll', this.scrollEventHandler);
+    }
+    _stopScrollListener() {
+        this._scrollParents.forEach((el) => {
+            el.removeEventListener('scroll', this.scrollEventHandler);
+        });
+        document.removeEventListener('scroll', this.scrollEventHandler);
+    }
+    _updatePlacement() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        const containerElement = this.containerElement;
+        if (!containerElement) {
+            return;
+        }
+        const popoverRect = this.containerElement?.getBoundingClientRect();
+        const triggerRect = this._trigger?.getBoundingClientRect();
+        if (triggerRect != null && popoverRect != null) {
+            const scrollParentRects = this._scrollParents.map((el) => el.getBoundingClientRect());
+            this._currentPlacement = this._currentPlacement || this._placement;
+            if (this._placement !== 'auto') {
+                this._currentPlacement = this._managePlacementFlip(this._currentPlacement, popoverRect, scrollParentRects);
+            }
+            let isTopPlacement = this._currentPlacement.indexOf('top') !== -1;
+            let isBottomPlacement = this._currentPlacement.indexOf('bottom') !== -1;
+            let isLeftPlacement = this._currentPlacement.indexOf('left') !== -1;
+            let isRightPlacement = this._currentPlacement.indexOf('right') !== -1;
+            const isStart = this._currentPlacement.indexOf('-start') !== -1;
+            const isEnd = this._currentPlacement.indexOf('-end') !== -1;
+            // -------- | INITIATE MATH | --------
+            let originX = 0.5;
+            let originY = 0.5;
+            let alignX = 0.5;
+            let alignY = 0.5;
+            let marginX = 0;
+            let marginY = 0;
+            if (this.placement === 'auto') {
+                const firstScrollParent = this._scrollParents[0];
+                const scrollParentWidth = firstScrollParent.clientWidth;
+                const scrollParentHeight = firstScrollParent.clientHeight;
+                const spaceLeft = triggerRect.x - popoverRect.width;
+                const spaceRight = scrollParentWidth - (triggerRect.x + triggerRect.width) - popoverRect.width;
+                const spaceTop = triggerRect.y - popoverRect.height;
+                const spaceBottom = scrollParentHeight - (triggerRect.y + triggerRect.height) - popoverRect.height;
+                let dirX = 0.5;
+                let dirY = 0.5;
+                const hMaxSpace = Math.max(spaceLeft, spaceRight);
+                let vMaxSpace = Math.max(spaceTop, spaceBottom);
+                // if we have more space below than above, and there is enough room, then we will pick below.
+                if (spaceBottom > spaceTop && spaceBottom > this.margin) {
+                    vMaxSpace += 9999;
+                }
+                if (hMaxSpace > vMaxSpace) {
+                    if (spaceLeft > spaceRight) {
+                        dirX = 0;
+                        isLeftPlacement = true;
+                    }
+                    else {
+                        dirX = 1;
+                        isRightPlacement = true;
+                    }
+                    marginX = this.margin;
+                }
+                else {
+                    if (spaceTop > spaceBottom) {
+                        dirY = 0;
+                        isTopPlacement = true;
+                    }
+                    else {
+                        dirY = 1;
+                        isBottomPlacement = true;
+                    }
+                    marginY = this.margin;
+                }
+                originX = dirX;
+                originY = dirY;
+                alignX = 1 - dirX;
+                alignY = 1 - dirY;
+            }
+            else {
+                // -------- TOP / BOT --------
+                if (isTopPlacement) {
+                    alignY = 1;
+                    originY = 0;
+                }
+                if (isBottomPlacement) {
+                    alignY = 0;
+                    originY = 1;
+                }
+                if (isTopPlacement || isBottomPlacement) {
+                    marginY = this.margin;
+                    if (isStart) {
+                        alignX = 0;
+                        originX = 0;
+                    }
+                    if (isEnd) {
+                        alignX = 1;
+                        originX = 1;
+                    }
+                }
+                // -------- LEFT / RIGHT --------
+                if (isLeftPlacement) {
+                    alignX = 1;
+                    originX = 0;
+                }
+                if (isRightPlacement) {
+                    alignX = 0;
+                    originX = 1;
+                }
+                if (isLeftPlacement || isRightPlacement) {
+                    marginX = this.margin;
+                    if (isStart) {
+                        alignY = 0;
+                        originY = 0;
+                    }
+                    if (isEnd) {
+                        alignY = 1;
+                        originY = 1;
+                    }
+                }
+            }
+            const calcX = -popoverRect.width * alignX + triggerRect.width * originX - marginX * (alignX * 2 - 1);
+            const calcY = -popoverRect.height * alignY + triggerRect.height * originY - marginY * (alignY * 2 - 1);
+            let posX = calcX;
+            let posY = calcY;
+            // Moves the popover to keep it fully visible on the screen as long as its still in contact with the trigger.
+            // Only do this clamp if popover is on the top or bottom of the parent.
+            if (isTopPlacement || isBottomPlacement) {
+                this._scrollParents.forEach((el, index) => {
+                    const rectX = el === document.body ? 0 : scrollParentRects[index].x;
+                    const leftClamp = -triggerRect.x + rectX;
+                    const rightClamp = el.clientWidth -
+                        triggerRect.x -
+                        triggerRect.width +
+                        calcX +
+                        rectX -
+                        (popoverRect.width - triggerRect.width) * (1 - originX);
+                    posX = mathClamp(posX, leftClamp, rightClamp);
+                });
+                // keep within contact of the trigger, must be last:
+                posX = mathClamp(posX, -popoverRect.width, triggerRect.width);
+            }
+            else if (isLeftPlacement || isRightPlacement) {
+                // Only do this clamp if popover is on the sides of the parent.
+                this._scrollParents.forEach((el, index) => {
+                    const rectY = el === document.body ? 0 : scrollParentRects[index].y;
+                    const topClamp = -triggerRect.y + rectY;
+                    const bottomClamp = el.clientHeight -
+                        triggerRect.y -
+                        triggerRect.height +
+                        calcY +
+                        rectY -
+                        (popoverRect.height - triggerRect.height) * (1 - originY);
+                    posY = mathClamp(posY, topClamp, bottomClamp);
+                });
+                // keep within contact of the trigger, must be last:
+                posY = mathClamp(posY, -popoverRect.height, triggerRect.height);
+            }
+            if (this._positionX !== posX || this._positionY !== posY) {
+                this._positionX = posX;
+                this._positionY = posY;
+                if (calcX === posX && calcY === posY) {
+                    // Not offset anymore, so we can stop listening for scroll events:
+                    this._stopScrollListener();
+                }
+                containerElement.style.left = `${this._positionX}px`;
+                containerElement.style.top = `${this._positionY}px`;
+            }
+        }
+    }
+    _managePlacementFlip(currentPlacement, popoverRect, scrollParentRects) {
+        const buffer = 2; // add this to the calculation make sure that the position checks are not off by e.g: 0.1 pixel.
+        const placementSplit = currentPlacement.split('-');
+        const currentSide = placementSplit[0];
+        const placementAlign = placementSplit[1] || null;
+        let sideFlip;
+        this._scrollParents.some((el, index) => {
+            const rectX = el === document.body ? 0 : scrollParentRects[index].x;
+            const rectY = el === document.body ? 0 : scrollParentRects[index].y;
+            if (currentSide === 'top' && popoverRect.y - buffer <= rectY) {
+                sideFlip = 'bottom';
+                return true;
+            }
+            if (currentSide === 'bottom' && popoverRect.y + popoverRect.height + buffer >= el.clientHeight + rectY) {
+                sideFlip = 'top';
+                return true;
+            }
+            if (currentSide === 'left' && popoverRect.x - buffer <= rectX) {
+                sideFlip = 'right';
+                return true;
+            }
+            if (currentSide === 'right' && popoverRect.x + popoverRect.width + buffer >= el.clientWidth + rectX) {
+                sideFlip = 'left';
+                return true;
+            }
+            return false;
+        });
+        if (sideFlip) {
+            this._startScrollListener();
+            return (sideFlip + (placementAlign ? `-${placementAlign}` : ''));
+        }
+        return currentPlacement;
+    }
+    render() {
+        return html `
+			<slot id="trigger" name="trigger" @slotchange=${this._onTriggerSlotChanged}></slot>
+			<div id="container">${this._open ? html `<slot name="popover"></slot>` : ''}</div>
+		`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				position: relative;
+				display: inline-block;
+				width: 100%;
+			}
+			#container {
+				position: absolute;
+				width: 100%;
+				z-index: var(--uui-popover-z-index, 1);
+			}
+			slot[name='popover'] {
+				display: block;
+			}
+			#trigger {
+				position: relative;
+				width: 100%;
+			}
+
+			slot[name='trigger']::slotted(uui-button) {
+				--uui-button-border-radius: var(--uui-popover-toggle-slot-button-border-radius);
+				--uui-button-merge-border-left: var(--uui-popover-toggle-slot-button-merge-border-left);
+			}
+		`,
+    ]; }
+};
+__decorate([
+    query('#container')
+], UUIPopoverElement.prototype, "containerElement", void 0);
+__decorate([
+    property({ type: Number })
+], UUIPopoverElement.prototype, "margin", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], UUIPopoverElement.prototype, "placement", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UUIPopoverElement.prototype, "open", null);
+UUIPopoverElement = __decorate([
+    defineElement('uui-popover')
+], UUIPopoverElement);
+export { UUIPopoverElement };

package/dist-cms/libs/context-api/consume/context-consume.decorator.d.ts

@@ -25,6 +25,13 @@ export interface UmbConsumeOptions<BaseType extends UmbContextMinimal = UmbConte
  *
  * This decorator supports both modern "standard" decorators (Stage 3 TC39 proposal) and
  * legacy TypeScript experimental decorators for backward compatibility.
+ *
+ * The consumer is registered directly via `addUmbController`, relying on the
+ * host's own lifecycle to fire `hostConnected` before first render. No Lit
+ * `ReactiveController` wrapper is needed — `UmbControllerHostMixin` lazy-inits
+ * its controllers list, so `addUmbController` is safe during `addInitializer`.
+ * @template BaseType
+ * @template {BaseType} ResultType
  * @param {UmbConsumeOptions} options Configuration object containing context, callback, and subscribe options
  * @example
  * ```ts