@umbraco-engage/backoffice 17.0.3 → 17.1.0

package/dist/analytics/screens/heatmap-screen.element.d.ts

@@ -2,7 +2,7 @@ import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 declare const elementName = "ue-analytics-heatmap";
 export declare class UeAnalyticsHeatmapElement extends UmbLitElement {
     #private;
-    private _deviceType;
+    private _deviceTypes;
     private _variants;
     private _querystring;
     private _documentUnique;

package/dist/analytics/screens/heatmap-screen.element.js

@@ -9,15 +9,21 @@ import { css, customElement, html, state, when, } from "@umbraco-cms/backoffice/
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from "@umbraco-cms/backoffice/document";
 import { tryExecute } from "@umbraco-cms/backoffice/resources";
-import { makeArray, } from "../../core/index.js";
-import { HeatmapsService, } from "../../generated/index.js";
 import { UMB_APP_LANGUAGE_CONTEXT } from "@umbraco-cms/backoffice/language";
 import { firstValueFrom } from "@umbraco-cms/backoffice/external/rxjs";
+import { makeArray, } from "../../core/index.js";
+import { HeatmapsService, } from "../../generated/index.js";
 const elementName = "ue-analytics-heatmap";
+const DEVICE_TYPE_OPTIONS = [
+    { label: "Desktop", value: [1] },
+    { label: "Tablet", value: [2] },
+    { label: "Mobile", value: [3] },
+    { label: "Other", value: [0, 4, 5, 6, 7, 8, 9, 10, 11, 12] },
+];
 let UeAnalyticsHeatmapElement = class UeAnalyticsHeatmapElement extends UmbLitElement {
     constructor() {
         super();
-        this._deviceType = "Desktop";
+        this._deviceTypes = DEVICE_TYPE_OPTIONS[0].value;
         this._variants = [];
         this._loading = true;
         this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, async (context) => {
@@ -73,7 +79,7 @@ let UeAnalyticsHeatmapElement = class UeAnalyticsHeatmapElement extends UmbLitEl
         const body = {
             unique: this._documentUnique,
             culture: this._documentCulture,
-            deviceType: this._deviceType,
+            deviceTypes: this._deviceTypes,
             borderLines: [0.8, 0.75, 0.6, 0.5, 0.4, 0.25, 0.2],
             from: this._dateRange?.primary.range.from,
             to: this._dateRange?.primary.range.to,
@@ -104,8 +110,11 @@ let UeAnalyticsHeatmapElement = class UeAnalyticsHeatmapElement extends UmbLitEl
     }
     #onDeviceTypeChange(e) {
         const value = e.target.value;
-        this._deviceType = value;
-        this.#getHeatmap();
+        const option = DEVICE_TYPE_OPTIONS.find((o) => o.label === value);
+        if (option) {
+            this._deviceTypes = option.value;
+            this.#getHeatmap();
+        }
     }
     #onVariantChange(e) {
         const value = e.target.value;
@@ -113,10 +122,12 @@ let UeAnalyticsHeatmapElement = class UeAnalyticsHeatmapElement extends UmbLitEl
         this.#getHeatmap();
     }
     #renderDeviceType() {
+        const currentOption = DEVICE_TYPE_OPTIONS.find((o) => JSON.stringify(o.value) === JSON.stringify(this._deviceTypes));
+        const currentLabel = currentOption?.label ?? "Desktop";
         return html `<ue-button-group
       label=${this.localize.term("engage_analytics_deviceCategory")}
-      .value=${this._deviceType}
-      .values=${makeArray("Desktop", "Tablet", "Mobile")}
+      .value=${currentLabel}
+      .values=${makeArray(...DEVICE_TYPE_OPTIONS.map((o) => o.label))}
       @change=${this.#onDeviceTypeChange}
     ></ue-button-group>`;
     }
@@ -144,7 +155,7 @@ let UeAnalyticsHeatmapElement = class UeAnalyticsHeatmapElement extends UmbLitEl
             return;
         return html `<ue-heatmap
       .data=${this._heatmapData}
-      .deviceType=${this._deviceType}
+      .deviceTypes=${this._deviceTypes}
       .querystring=${this._querystring}
     ></ue-heatmap>`;
     }
@@ -195,7 +206,7 @@ let UeAnalyticsHeatmapElement = class UeAnalyticsHeatmapElement extends UmbLitEl
 };
 __decorate([
     state()
-], UeAnalyticsHeatmapElement.prototype, "_deviceType", void 0);
+], UeAnalyticsHeatmapElement.prototype, "_deviceTypes", void 0);
 __decorate([
     state()
 ], UeAnalyticsHeatmapElement.prototype, "_variants", void 0);

package/dist/analytics/screens/pageviews-screen.element.js

@@ -4,8 +4,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { customElement, html } from "@umbraco-cms/backoffice/external/lit";
 import { UeAnalyticsScreenBaseElement } from "./analytics-screen-base.element.js";
+import { customElement, html } from "@umbraco-cms/backoffice/external/lit";
 const elementName = "ue-analytics-pageviews";
 let UeAnalyticsPageviewsElement = class UeAnalyticsPageviewsElement extends UeAnalyticsScreenBaseElement {
     constructor() {

package/dist/core/actions/action-event.d.ts

@@ -1,4 +1,4 @@
-import { UmbEntityModel } from "@umbraco-cms/backoffice/entity";
+import type { UmbEntityModel } from "@umbraco-cms/backoffice/entity";
 import { UmbEntityActionEvent } from "@umbraco-cms/backoffice/entity-action";
 export declare class UeEntityActionEvent extends UmbEntityActionEvent {
     static readonly TYPE = "engage-entity-action-event";

package/dist/core/actions/entity-actions-bundle.d.ts

@@ -1,5 +1,4 @@
-import type { PropertyValueMap } from "@umbraco-cms/backoffice/external/lit";
-import { nothing } from "@umbraco-cms/backoffice/external/lit";
+import { type PropertyValueMap, nothing } from "@umbraco-cms/backoffice/external/lit";
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 export declare class UeEntityActionsBundleElement extends UmbLitElement {
     #private;

package/dist/core/actions/save-workspace-action.js

@@ -1,6 +1,6 @@
+import { UeEntityActionEvent } from "./action-event.js";
 import { UMB_ACTION_EVENT_CONTEXT } from "@umbraco-cms/backoffice/action";
 import { UmbSaveWorkspaceAction } from "@umbraco-cms/backoffice/workspace";
-import { UeEntityActionEvent } from "./action-event.js";
 export class UeSaveWorkspaceAction extends UmbSaveWorkspaceAction {
     async execute() {
         await super.execute();

package/dist/core/actions/submit-workspace-action.js

@@ -1,6 +1,6 @@
+import { UeEntityActionEvent } from "./action-event.js";
 import { UMB_ACTION_EVENT_CONTEXT } from "@umbraco-cms/backoffice/action";
 import { UmbSaveWorkspaceAction } from "@umbraco-cms/backoffice/workspace";
-import { UeEntityActionEvent } from "./action-event.js";
 import { UMB_MODAL_CONTEXT } from "@umbraco-cms/backoffice/modal";
 export class UeSubmitWorkspaceAction extends UmbSaveWorkspaceAction {
     async execute() {

package/dist/core/collection/entity-delete.action.d.ts

@@ -1,5 +1,5 @@
-import { UmbEntityBulkActionBase } from "@umbraco-cms/backoffice/entity-bulk-action";
 import type { MetaUeEntityBulkActionDeleteKind } from "../extension-manifests/index.js";
+import { UmbEntityBulkActionBase } from "@umbraco-cms/backoffice/entity-bulk-action";
 export declare class UeCollectionDeleteBulkAction<MetaKindType extends MetaUeEntityBulkActionDeleteKind = MetaUeEntityBulkActionDeleteKind> extends UmbEntityBulkActionBase<MetaKindType> {
     execute(): Promise<void>;
 }

package/dist/core/collection/entity-delete.action.js

@@ -1,3 +1,4 @@
+import { UeBulkActionDeleteEvent } from "./entity-delete.event.js";
 import { UmbEntityBulkActionBase } from "@umbraco-cms/backoffice/entity-bulk-action";
 import { umbConfirmModal } from "@umbraco-cms/backoffice/modal";
 import { UmbLocalizationController } from "@umbraco-cms/backoffice/localization-api";
@@ -5,7 +6,6 @@ import { createExtensionApiByAlias } from "@umbraco-cms/backoffice/extension-reg
 import { UMB_NOTIFICATION_CONTEXT } from "@umbraco-cms/backoffice/notification";
 import { UMB_ACTION_EVENT_CONTEXT } from "@umbraco-cms/backoffice/action";
 import { UMB_COLLECTION_CONTEXT } from "@umbraco-cms/backoffice/collection";
-import { UeBulkActionDeleteEvent } from "./entity-delete.event.js";
 export class UeCollectionDeleteBulkAction extends UmbEntityBulkActionBase {
     async execute() {
         if (this.selection?.length === 0)

package/dist/core/components/chart/bar-chart.element.js

@@ -4,9 +4,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { UeChartElement } from "./chart.element.js";
 import { customElement, property } from "@umbraco-cms/backoffice/external/lit";
 import { BarController, BarElement, CategoryScale, LinearScale, LineController, LineElement, PointElement, } from "chart.js";
-import { UeChartElement } from "./chart.element.js";
 const elementName = "ue-bar-chart";
 let UeBarChartElement = class UeBarChartElement extends UeChartElement {
     #monthNames;

package/dist/core/components/chart/chart.element.d.ts

@@ -1,5 +1,5 @@
-import { type ChartType, type ChartOptions, type ChartData } from "chart.js";
 import { UeChartBaseElement } from "./chart-base.element.js";
+import { type ChartType, type ChartOptions, type ChartData } from "chart.js";
 export declare abstract class UeChartElement<ChartDataType> extends UeChartBaseElement {
     init: boolean;
     set data(value: Array<ChartDataType> | undefined);

package/dist/core/components/chart/chart.element.js

@@ -4,11 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { UeChartBaseElement } from "./chart-base.element.js";
+import { UeChartTooltipDefaults } from "./index.js";
 import { css, html, property, when, } from "@umbraco-cms/backoffice/external/lit";
 import { Chart, Legend, Tooltip, } from "chart.js";
-import { UeChartBaseElement } from "./chart-base.element.js";
 import Annotation from "chartjs-plugin-annotation";
-import { UeChartTooltipDefaults } from "./index.js";
 export class UeChartElement extends UeChartBaseElement {
     set data(value) {
         if (!value)

package/dist/core/components/chart/donut-chart.element.js

@@ -4,9 +4,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { UeChartElement } from "./chart.element.js";
 import { css, customElement, html } from "@umbraco-cms/backoffice/external/lit";
 import { ArcElement, DoughnutController } from "chart.js";
-import { UeChartElement } from "./chart.element.js";
 const elementName = "ue-donut-chart";
 let UeDonutChartElement = class UeDonutChartElement extends UeChartElement {
     constructor() {

package/dist/core/components/chart/index.d.ts

@@ -1,4 +1,4 @@
-import { TooltipOptions } from "chart.js";
+import type { TooltipOptions } from "chart.js";
 export * from "./donut-chart.element.js";
 export * from "./bar-chart.element.js";
 export * from "./chart-base.element.js";

package/dist/core/components/checkbox/checkbox.element.d.ts

@@ -7,7 +7,6 @@ export declare class UeCheckboxElement extends UmbLitElement {
     checked: boolean;
     disabled: boolean;
     display: boolean;
-    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }

package/dist/core/components/checkbox/checkbox.element.js

@@ -16,13 +16,6 @@ let UeCheckboxElement = class UeCheckboxElement extends UmbLitElement {
         this.disabled = false;
         this.display = false;
     }
-    connectedCallback() {
-        super.connectedCallback();
-        if (this.label)
-            return;
-        this.style.setProperty("--uui-size-3", "0");
-        this.style.setProperty("--uui-size-5", "9px");
-    }
     #onChange(e) {
         this.checked = e.target.checked;
         this.dispatchEvent(new UmbChangeEvent());
@@ -44,6 +37,8 @@ let UeCheckboxElement = class UeCheckboxElement extends UmbLitElement {
     static { this.styles = [
         css `
       :host {
+        --column-gap: var(--uui-size-5);
+        --offset-top: unset;
         display: block;
         border: 1px solid var(--uui-color-border);
         border-radius: var(--uui-border-radius);
@@ -51,9 +46,8 @@ let UeCheckboxElement = class UeCheckboxElement extends UmbLitElement {
 
       :host > div {
         display: flex;
-        align-items: center;
         padding: var(--uui-size-2);
-        column-gap: var(--uui-size-5);
+        column-gap: var(--column-gap);
       }
 
       :host([display]) uui-checkbox {
@@ -67,6 +61,8 @@ let UeCheckboxElement = class UeCheckboxElement extends UmbLitElement {
 
       uui-checkbox {
         width: var(--checkbox-width, auto);
+        position: relative;
+        top: calc((var(--offset-top) / 2) - (var(--uui-checkbox-size) / 2));
       }
     `,
     ]; }

package/dist/core/components/daterange-picker/daterange-picker-modal.token.d.ts

@@ -1,5 +1,5 @@
-import { UmbModalToken } from "@umbraco-cms/backoffice/modal";
 import type { UeDateRangePickerInputConfig } from "./entities.js";
+import { UmbModalToken } from "@umbraco-cms/backoffice/modal";
 export declare const ENGAGE_DATERANGE_PICKER_MODAL_ALIAS = "Engage.Modal.DaterangePicker";
 export interface UeDateRangePickerModalData extends UeDateRangePickerInputConfig {
     allowCompare: boolean;

package/dist/core/components/daterange-picker/daterange-picker.element.d.ts

@@ -1,5 +1,5 @@
-import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 import type { UeDateRangePickerRangeConfig } from "./entities.js";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 declare const elementName = "ue-daterange-picker";
 export declare class UeDateRangePickerElement extends UmbLitElement {
     #private;

package/dist/core/components/daterange-picker/daterange-picker.element.js

@@ -4,12 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { ENGAGE_DATERANGE_PICKER_MODAL } from "./daterange-picker-modal.token.js";
+import { ENGAGE_DATERANGE_MANAGER } from "./daterange-manager.context.js";
 import { css, customElement, html, property, state, when, } from "@umbraco-cms/backoffice/external/lit";
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 import { umbOpenModal } from "@umbraco-cms/backoffice/modal";
 import { UmbChangeEvent } from "@umbraco-cms/backoffice/event";
-import { ENGAGE_DATERANGE_PICKER_MODAL } from "./daterange-picker-modal.token.js";
-import { ENGAGE_DATERANGE_MANAGER } from "./daterange-manager.context.js";
 const elementName = "ue-daterange-picker";
 let UeDateRangePickerElement = class UeDateRangePickerElement extends UmbLitElement {
     #dateRangeManager;

package/dist/core/components/group-box/group-box.element.d.ts

@@ -3,11 +3,7 @@ declare const elementName = "ue-group-box";
 export declare class UeGroupBoxElement extends UmbLitElement {
     name?: string | null;
     description?: string | null;
-    iconUrl?: string | Array<{
-        mediaKey: string;
-    }> | null;
-    private _iconUrl?;
-    updated(): Promise<void>;
+    iconUrl?: string | null;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult;
 }

package/dist/core/components/group-box/group-box.element.js

@@ -4,52 +4,49 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, property, state, when, } from "@umbraco-cms/backoffice/external/lit";
+import { css, customElement, html, property, when, } from "@umbraco-cms/backoffice/external/lit";
+import { UUIBlinkAnimationValue } from "@umbraco-cms/backoffice/external/uui";
 import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
 const elementName = "ue-group-box";
 let UeGroupBoxElement = class UeGroupBoxElement extends UmbLitElement {
-    async updated() {
-        if (typeof this.iconUrl === "string") {
-            this._iconUrl = this.iconUrl;
-            return;
-        }
-        // TODO => icon url is where?
-        // if it's a key, we need to request the image;
-        //const mediaKey = this.iconUrl?.at(0)?.mediaKey;
-        //if (!mediaKey) return;
-        //const repo = new UmbMediaDetailRepository(this);
-        //const { data } = await repo.requestByUnique(mediaKey);
-        //this._iconUrl = data?.urls.at(0)?.url;
-    }
     render() {
-        return html `<div id="step">
+        return html `<div>
+      <div id="step">
+        <slot name="before"></slot>
         <div id="bar"></div>
         <div id="icon">
-          ${when(this._iconUrl, () => html `<img .src=${this._iconUrl} alt="" />`)}
-        </div>
-        <div id="content">
-          <strong>${this.name}</strong>${when(this.description, (desc) => html `<small>${desc}</small>`)}
-          <slot name="secondary"></slot>
+          ${when(this.iconUrl, (iconUrl) => html `<img .src=${iconUrl} alt="" />`)}
         </div>
       </div>
+      <div id="content">
+        <strong>${this.name}</strong>${when(this.description, (desc) => html `<small>${desc}</small>`)}
+        <slot name="secondary"></slot>
+      </div>
       <slot id="content-slot" name="primary"></slot>
-      <slot name="actions"></slot> `;
+      <slot name="actions"></slot>
+    </div>`;
     }
     static { this.styles = css `
     :host {
+      display: block;
+      position: relative;
+    }
+
+    :host > div {
       display: flex;
-      gap: var(--uui-size-5);
+      gap: var(--uui-size-3);
     }
 
-    slot {
-      display: contents;
+    :host-context([readonly]) #content > * {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
     }
 
     #step {
       display: flex;
-      gap: var(--uui-size-5);
-      max-width: 75%;
-      flex: 1;
+      align-self: flex-start;
+      gap: var(--uui-size-2);
     }
 
     #bar {
@@ -60,11 +57,13 @@ let UeGroupBoxElement = class UeGroupBoxElement extends UmbLitElement {
     }
 
     #icon {
+      position: relative;
       border: 1px solid var(--uui-color-border);
-      height: var(--engage-groupbox-icon-size, var(--uui-size-10));
+      height: var(--engage-groupbox-icon-size, var(--uui-size-16));
       aspect-ratio: 1;
       border-radius: var(--uui-border-radius);
       padding: var(--uui-size-2);
+      box-sizing: border-box;
 
       img {
         width: 100%;
@@ -91,6 +90,26 @@ let UeGroupBoxElement = class UeGroupBoxElement extends UmbLitElement {
       align-self: center;
       display: block;
     }
+
+    :host([drag-placeholder])::after {
+      display: block;
+      border-width: 2px;
+      border-color: var(--uui-color-interactive-emphasis);
+      animation: ${UUIBlinkAnimationValue};
+    }
+    :host([drag-placeholder])::before {
+      content: "";
+      position: absolute;
+      pointer-events: none;
+      inset: 0;
+      border-radius: var(--uui-border-radius);
+      background-color: var(--uui-color-interactive-emphasis);
+      opacity: 0.12;
+    }
+    :host([drag-placeholder]) > div {
+      transition: opacity 50ms 16ms;
+      opacity: 0;
+    }
   `; }
 };
 __decorate([
@@ -102,9 +121,6 @@ __decorate([
 __decorate([
     property()
 ], UeGroupBoxElement.prototype, "iconUrl", void 0);
-__decorate([
-    state()
-], UeGroupBoxElement.prototype, "_iconUrl", void 0);
 UeGroupBoxElement = __decorate([
     customElement(elementName)
 ], UeGroupBoxElement);

package/dist/core/components/scoring/entities.d.ts

@@ -1,5 +1,6 @@
-import { MinimumDeviationTypeModel } from "src/generated/types.gen";
-export interface UeScoreableGroupModel {
+import { MinimumDeviationTypeModel } from "../../../generated/index.js";
+import { UeEntityBase } from "../../entities.js";
+export interface UeScoreableGroupModel extends UeEntityBase {
     title?: string | null;
     upperScoreLimit?: number | null;
     items: Array<UeScoreableItemModel>;
@@ -7,9 +8,6 @@ export interface UeScoreableGroupModel {
     minimumDeviationType?: MinimumDeviationTypeModel;
     minimumParticipationScoreThreshold?: number | null;
 }
-export interface UeScoringElementConfig {
-    hideDivider?: boolean;
-}
 export interface UeScoreableItemModel {
     id: number;
     title?: string | null;
@@ -18,4 +16,12 @@ export interface UeScoreableItemModel {
         value: string;
     };
     iconUrl?: string | null;
+    isLocked?: boolean;
+}
+export interface UeScoringValueModel {
+    id: number;
+    score: number;
+    isLocked?: boolean;
+    unique?: string;
+    isActive?: boolean;
 }

package/dist/core/components/scoring/index.d.ts

@@ -1 +1,3 @@
-export * from "./scoring-base.element.js";
+export * from "./lock-score.element.js";
+export * from "./lock-banner.element.js";
+export * from "./entities.js";

package/dist/core/components/scoring/index.js

@@ -1 +1,3 @@
-export * from "./scoring-base.element.js";
+export * from "./lock-score.element.js";
+export * from "./lock-banner.element.js";
+export * from "./entities.js";

package/dist/core/components/scoring/lock-banner.element.d.ts

@@ -0,0 +1,12 @@
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+declare const elementName = "ue-lock-banner";
+export declare class UeLockBannerElement extends UmbLitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeLockBannerElement;
+    }
+}
+export {};

package/dist/core/components/scoring/lock-banner.element.js

@@ -0,0 +1,29 @@
+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 } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+const elementName = "ue-lock-banner";
+let UeLockBannerElement = class UeLockBannerElement extends UmbLitElement {
+    render() {
+        return html `<uui-tag look="primary">
+      ${this.localize.term("engage_lockBanner")}
+    </uui-tag>`;
+    }
+    static { this.styles = css `
+    uui-tag {
+      --uui-tag-border-radius: var(--uui-size-1);
+      padding: var(--uui-size-1);
+      margin: var(--uui-size-2) 0;
+      align-self: stretch;
+      text-align: left;
+    }
+  `; }
+};
+UeLockBannerElement = __decorate([
+    customElement(elementName)
+], UeLockBannerElement);
+export { UeLockBannerElement };

package/dist/core/components/scoring/lock-score.element.d.ts

@@ -0,0 +1,22 @@
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import { UeScoringValueModel } from "./entities.js";
+declare const elementName = "ue-lock-score";
+export declare class UeLockScoreElement extends UmbLitElement {
+    #private;
+    item?: UeScoringValueModel;
+    group?: {
+        items: Array<{
+            id: number;
+        }>;
+    };
+    value: UeScoringValueModel[];
+    identifierSelector: (item: UeScoringValueModel) => number;
+    render(): import("lit-html").TemplateResult<1> | undefined;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeLockScoreElement;
+    }
+}
+export {};

package/dist/core/components/scoring/lock-score.element.js

@@ -0,0 +1,91 @@
+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, property, when, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+const elementName = "ue-lock-score";
+let UeLockScoreElement = class UeLockScoreElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.value = [];
+        this.identifierSelector = () => 0;
+    }
+    #handleLock() {
+        if (!this.item)
+            return;
+        this.dispatchEvent(new CustomEvent("lock-change", {
+            detail: { ...this.item, isLocked: !this.item.isLocked },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        if (!this.item)
+            return;
+        const groupItemIds = this.group?.items.map((x) => x.id) ?? [];
+        const disabled = this.value.some((x) => x.isLocked && groupItemIds.includes(this.identifierSelector(x))) && !this.item.isLocked;
+        const tooltipText = this.localize.term(this.item.isLocked ? "engage_lockRemove" : "engage_lockAdd");
+        return html `<div popovertarget="popover-lock-${this.item.id}">
+      <uui-button
+        look=${this.item?.isLocked
+            ? "primary"
+            : disabled
+                ? "placeholder"
+                : "secondary"}
+        compact
+        @click=${() => this.#handleLock()}
+        ?disabled=${disabled}
+        label=${tooltipText}
+        ><uui-icon
+          name=${this.item.isLocked ? "icon-lock" : "icon-unlocked"}
+        ></uui-icon
+      ></uui-button>
+      ${when(!disabled, () => html ` <uui-popover-container id="popover-lock-${this.item?.id}">
+            <ue-tooltip hint>${tooltipText}</ue-tooltip>
+          </uui-popover-container>`)}
+    </div>`;
+    }
+    static { this.styles = css `
+    div {
+      height: var(--engage-groupbox-icon-size, var(--uui-size-16));
+      aspect-ratio: 1;
+      display: flex;
+    }
+
+    uui-button {
+      position: relative;
+      flex: 1;
+    }
+
+    uui-button[look="primary"]::after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: var(--uui-size-2);
+      height: var(--uui-size-2);
+      background-color: currentColor;
+      left: 50%;
+      top: calc(var(--uui-size-2) * -1);
+      transform: translateX(calc(var(--uui-size-1) * -1));
+    }
+  `; }
+};
+__decorate([
+    property({ type: Object, attribute: false })
+], UeLockScoreElement.prototype, "item", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], UeLockScoreElement.prototype, "group", void 0);
+__decorate([
+    property({ type: Array, attribute: false })
+], UeLockScoreElement.prototype, "value", void 0);
+__decorate([
+    property({ attribute: false })
+], UeLockScoreElement.prototype, "identifierSelector", void 0);
+UeLockScoreElement = __decorate([
+    customElement(elementName)
+], UeLockScoreElement);
+export { UeLockScoreElement };

package/dist/core/components/screen/tabbed-layout.element.d.ts

@@ -11,6 +11,7 @@ export declare class UeTabbedScreenLayoutElement extends UmbLitElement {
     private _context?;
     private _licensedFeatures?;
     private _userPermission?;
+    private _headerActionElements;
     constructor();
     connectedCallback(): Promise<void>;
     render(): import("lit-html").TemplateResult<1> | undefined;