@umbraco-cms/backoffice 17.3.3 → 17.4.0-rc

package/dist-cms/packages/core/components/input-dimensions/input-dimensions.element.js

@@ -0,0 +1,209 @@
+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 { UmbChangeEvent } from '../../event/index.js';
+import { UmbFormControlMixin } from '../../validation/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+/**
+ * A dimension input element with width/height fields and an aspect ratio lock.
+ * @element umb-input-dimensions
+ * @fires UmbChangeEvent - When width, height, or locked state changes.
+ */
+let UmbInputDimensionsElement = class UmbInputDimensionsElement extends UmbFormControlMixin(UmbLitElement, undefined) {
+    constructor() {
+        super(...arguments);
+        this.locked = true;
+        this.disabled = false;
+    }
+    #ratio;
+    set width(value) {
+        const oldValue = this.value?.width;
+        if (value !== oldValue) {
+            this.value = { ...this.value, width: value, height: this.value?.height };
+            if (this.locked)
+                this.#updateRatio();
+        }
+    }
+    get width() {
+        return this.value?.width;
+    }
+    set height(value) {
+        const oldValue = this.value?.height;
+        if (value !== oldValue) {
+            this.value = { ...this.value, width: this.value?.width, height: value };
+            if (this.locked)
+                this.#updateRatio();
+        }
+    }
+    get height() {
+        return this.value?.height;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.#updateRatio();
+    }
+    #updateRatio() {
+        const width = this.value?.width;
+        const height = this.value?.height;
+        if (width && height) {
+            this.#ratio = width / height;
+        }
+    }
+    #onWidthInput(e) {
+        const width = parseInt(e.target.value, 10);
+        if (isNaN(width) || width <= 0)
+            return;
+        if (this.locked && this.#ratio) {
+            this.value = { width, height: Math.round(width / this.#ratio) };
+        }
+        else {
+            this.value = { ...this.value, width };
+        }
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    #onHeightInput(e) {
+        const height = parseInt(e.target.value, 10);
+        if (isNaN(height) || height <= 0)
+            return;
+        if (this.locked && this.#ratio) {
+            this.value = { width: Math.round(height * this.#ratio), height };
+        }
+        else {
+            this.value = { ...this.value, height };
+        }
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    #onToggleLock() {
+        this.locked = !this.locked;
+        if (this.locked) {
+            this.#updateRatio();
+        }
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    #onReset() {
+        if (!this.naturalWidth || !this.naturalHeight)
+            return;
+        this.value = { width: this.naturalWidth, height: this.naturalHeight };
+        this.#ratio = this.naturalWidth / this.naturalHeight;
+        this.locked = true;
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    get #hasNaturalDimensions() {
+        return this.naturalWidth != null && this.naturalHeight != null && this.naturalWidth > 0 && this.naturalHeight > 0;
+    }
+    get #isNatural() {
+        return this.value?.width === this.naturalWidth && this.value?.height === this.naturalHeight;
+    }
+    render() {
+        return html `
+			<div id="dimensions">
+				<div class="dimension-field">
+					<uui-label for="width">${this.localize.term('general_width')}</uui-label>
+					<uui-input
+						id="width"
+						type="number"
+						label=${this.localize.term('general_width')}
+						placeholder=${this.localize.term('general_width')}
+						min="1"
+						.value=${this.value?.width?.toString() ?? ''}
+						?disabled=${this.disabled}
+						@input=${this.#onWidthInput}>
+						<span class="extra" slot="append">px</span>
+					</uui-input>
+				</div>
+				<uui-button
+					compact
+					label=${this.localize.term('general_constrainProportions')}
+					title=${this.localize.term('general_constrainProportions')}
+					look=${this.locked ? 'primary' : 'default'}
+					?disabled=${this.disabled}
+					@click=${this.#onToggleLock}>
+					<uui-icon name=${this.locked ? 'icon-lock' : 'icon-unlocked'}></uui-icon>
+				</uui-button>
+				<div class="dimension-field">
+					<uui-label for="height">${this.localize.term('general_height')}</uui-label>
+					<uui-input
+						id="height"
+						type="number"
+						label=${this.localize.term('general_height')}
+						placeholder=${this.localize.term('general_height')}
+						min="1"
+						.value=${this.value?.height?.toString() ?? ''}
+						?disabled=${this.disabled}
+						@input=${this.#onHeightInput}>
+						<span class="extra" slot="append">px</span>
+					</uui-input>
+				</div>
+			</div>
+			${this.#hasNaturalDimensions && !this.#isNatural
+            ? html `<uui-button
+						id="reset"
+						compact
+						label=${this.localize.term('general_reset')}
+						?disabled=${this.disabled}
+						@click=${this.#onReset}></uui-button>`
+            : nothing}
+		`;
+    }
+    static { this.styles = css `
+		#dimensions {
+			display: flex;
+			align-items: end;
+			gap: var(--uui-size-space-3);
+
+			.dimension-field {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-1);
+
+				uui-input {
+					margin-bottom: 0;
+				}
+
+				.extra {
+					user-select: none;
+					height: 100%;
+					padding: 0 var(--uui-size-3);
+					border-left: 1px solid var(--uui-input-border-color, var(--uui-color-border));
+					background: var(--uui-color-background);
+					color: var(--uui-color-text);
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+			}
+		}
+
+		#reset {
+			margin-bottom: var(--uui-size-space-1);
+		}
+	`; }
+};
+__decorate([
+    property({ type: Number })
+], UmbInputDimensionsElement.prototype, "width", null);
+__decorate([
+    property({ type: Number })
+], UmbInputDimensionsElement.prototype, "height", null);
+__decorate([
+    property({ type: Boolean })
+], UmbInputDimensionsElement.prototype, "locked", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbInputDimensionsElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Number, attribute: 'natural-width' })
+], UmbInputDimensionsElement.prototype, "naturalWidth", void 0);
+__decorate([
+    property({ type: Number, attribute: 'natural-height' })
+], UmbInputDimensionsElement.prototype, "naturalHeight", void 0);
+UmbInputDimensionsElement = __decorate([
+    customElement('umb-input-dimensions')
+], UmbInputDimensionsElement);
+export { UmbInputDimensionsElement };
+export default UmbInputDimensionsElement;

package/dist-cms/packages/core/components/input-dropdown/input-dropdown-list.element.js

@@ -44,7 +44,7 @@ let UmbInputDropdownListElement = class UmbInputDropdownListElement extends UmbF
     render() {
         return html `
 			<uui-select
-				label=${this.localize.term(this.localize.term('general_fieldFor', [this.name]))}
+				label=${this.localize.term('general_fieldFor', [this.name])}
 				.placeholder=${this.placeholder ?? ''}
 				.options=${this.options ?? []}
 				@change=${this.#onChange}

package/dist-cms/packages/core/components/input-slider/input-slider.element.d.ts

@@ -18,6 +18,7 @@ export declare class UmbInputSliderElement extends UmbInputSliderElement_base {
     set valueLow(value: number | undefined);
     get valueHigh(): number | undefined;
     set valueHigh(value: number | undefined);
+    minGap: number;
     enableRange: boolean;
     /**
      * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.

package/dist-cms/packages/core/components/input-slider/input-slider.element.js

@@ -41,6 +41,31 @@ function makeNumberOrUndefined(value, fallback) {
 function undefinedFallbackToString(value, fallback) {
     return (value === undefined ? fallback : value).toString();
 }
+/**
+ * Counts the number of decimal places in a number.
+ * @param num
+ */
+function countDecimalPlaces(num) {
+    const str = num.toString();
+    const decimalIndex = str.indexOf('.');
+    return decimalIndex >= 0 ? str.length - decimalIndex - 1 : 0;
+}
+/**
+ * Rounds each numeric part of a slider value string to the given step precision.
+ * This corrects IEEE 754 floating-point artifacts (e.g. 0.30000000000000004 → 0.3).
+ * @param raw - The raw value string from the UUI slider (e.g. "0.1,0.30000000000000004")
+ * @param step - The step increment for determining decimal precision
+ */
+function roundToStepPrecision(raw, step) {
+    const decimals = countDecimalPlaces(step);
+    return raw
+        .split(',')
+        .map((part) => {
+        const n = Number(part);
+        return isNaN(n) ? part : n.toFixed(decimals);
+    })
+        .join(',');
+}
 let UmbInputSliderElement = class UmbInputSliderElement extends UmbFormControlMixin(UmbLitElement, '') {
     set value(value) {
         const [from, to] = splitString(value);
@@ -81,6 +106,7 @@ let UmbInputSliderElement = class UmbInputSliderElement extends UmbFormControlMi
         this.min = 0;
         this.max = 100;
         this.step = 1;
+        this.minGap = 0;
         this.enableRange = false;
         /**
          * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
@@ -127,13 +153,26 @@ let UmbInputSliderElement = class UmbInputSliderElement extends UmbFormControlMi
             }
             return false;
         });
+        this.addValidator('customError', () => {
+            return this.localize.term('validation_minimumRange', [this.minGap?.toString()]);
+        }, () => {
+            if (this.enableRange && this.minGap > 0) {
+                const [from, to] = splitString(this.value);
+                if (from !== undefined && to !== undefined) {
+                    const decimals = countDecimalPlaces(this.step);
+                    const span = Number((to - from).toFixed(decimals));
+                    return span < this.minGap;
+                }
+            }
+            return false;
+        });
     }
     getFormElement() {
         return undefined;
     }
     #onChange(event) {
         event.stopPropagation();
-        this.value = event.target.value;
+        this.value = roundToStepPrecision(event.target.value, this.step);
         this.dispatchEvent(new UmbChangeEvent());
     }
     render() {
@@ -147,6 +186,7 @@ let UmbInputSliderElement = class UmbInputSliderElement extends UmbFormControlMi
 				.max=${this.max}
 				.step=${this.step}
 				.value=${undefinedFallbackToString(this.valueLow, this.min).toString()}
+				@input=${this.#onChange}
 				@change=${this.#onChange}
 				?readonly=${this.readonly}>
 			</uui-slider>
@@ -159,7 +199,9 @@ let UmbInputSliderElement = class UmbInputSliderElement extends UmbFormControlMi
 				.min=${this.min}
 				.max=${this.max}
 				.step=${this.step}
+				.minGap=${this.minGap}
 				.value="${undefinedFallbackToString(this.valueLow, this.min).toString()},${undefinedFallbackToString(this.valueHigh, this.max).toString()}"
+				@input=${this.#onChange}
 				@change=${this.#onChange}
 				?readonly=${this.readonly}>
 			</uui-range-slider>
@@ -190,6 +232,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], UmbInputSliderElement.prototype, "valueHigh", null);
+__decorate([
+    property({ type: Number, attribute: 'min-gap' })
+], UmbInputSliderElement.prototype, "minGap", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'enable-range' })
 ], UmbInputSliderElement.prototype, "enableRange", void 0);

package/dist-cms/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.js

@@ -57,10 +57,10 @@ let UmbMultipleColorPickerItemInputElement = class UmbMultipleColorPickerItemInp
     }
     async #onDelete() {
         await umbConfirmModal(this, {
-            headline: `${this.localize.term('actions_delete')} ${this.value || ''}`,
-            content: this.localize.term('content_nestedContentDeleteItem'),
+            headline: `#actions_delete ${this.value || ''}`,
+            content: '#content_nestedContentDeleteItem',
             color: 'danger',
-            confirmLabel: this.localize.term('actions_delete'),
+            confirmLabel: '#actions_delete',
         });
         this.dispatchEvent(new UmbDeleteEvent());
     }

package/dist-cms/packages/core/components/scrollable-container/index.d.ts

@@ -0,0 +1 @@
+export * from './scrollable-container.element.js';

package/dist-cms/packages/core/components/scrollable-container/index.js

@@ -0,0 +1 @@
+export * from './scrollable-container.element.js';

package/dist-cms/packages/core/components/scrollable-container/scrollable-container.element.d.ts

@@ -0,0 +1,16 @@
+import { UmbLitElement } from '../../lit-element/index.js';
+export declare class UmbScrollableContainerElement extends UmbLitElement {
+    #private;
+    private _showScrollLeft;
+    private _showScrollRight;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    destroy(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-scrollable-container': UmbScrollableContainerElement;
+    }
+}

package/dist-cms/packages/core/components/scrollable-container/scrollable-container.element.js

@@ -0,0 +1,120 @@
+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, html, customElement, state, nothing } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+let UmbScrollableContainerElement = class UmbScrollableContainerElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this._showScrollLeft = false;
+        this._showScrollRight = false;
+        this.#resizeObserver = new ResizeObserver(() => this.#updateScrollButtons());
+    }
+    #resizeObserver;
+    #updateScrollButtons() {
+        this._showScrollLeft = this.scrollLeft > 0;
+        // -1 tolerance accounts for subpixel rounding differences across browsers.
+        this._showScrollRight = this.scrollLeft + this.clientWidth < this.scrollWidth - 1;
+    }
+    #scrollLeft() {
+        this.scrollBy({ left: -200, behavior: 'smooth' });
+    }
+    #scrollRight() {
+        this.scrollBy({ left: 200, behavior: 'smooth' });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('scroll', this.#updateScrollButtons);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('scroll', this.#updateScrollButtons);
+        this.#resizeObserver.disconnect();
+    }
+    destroy() {
+        this.#resizeObserver.disconnect();
+        super.destroy();
+    }
+    #onSlotChange(e) {
+        const slot = e.target;
+        this.#resizeObserver.disconnect();
+        this.#resizeObserver.observe(this);
+        for (const el of slot.assignedElements()) {
+            this.#resizeObserver.observe(el);
+        }
+        this.#updateScrollButtons();
+    }
+    render() {
+        return html `
+			${this._showScrollLeft
+            ? html `<uui-button
+						id="scroll-left"
+						compact
+						@click=${this.#scrollLeft}
+						label=${this.localize.term('general_scrollLeft')}>
+						<uui-icon name="icon-arrow-left"></uui-icon>
+					</uui-button>`
+            : nothing}
+			<slot @slotchange=${this.#onSlotChange}></slot>
+			${this._showScrollRight
+            ? html `<uui-button
+						id="scroll-right"
+						compact
+						@click=${this.#scrollRight}
+						label=${this.localize.term('general_scrollRight')}>
+						<uui-icon name="icon-arrow-right"></uui-icon>
+					</uui-button>`
+            : nothing}
+		`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				display: flex;
+				position: relative;
+				overflow-x: auto;
+				min-width: 0;
+				align-items: center;
+				scrollbar-width: none;
+			}
+
+			:host::-webkit-scrollbar {
+				display: none;
+			}
+
+			#scroll-left,
+			#scroll-right {
+				flex-shrink: 0;
+				position: sticky;
+				z-index: 1;
+				background-color: var(--uui-color-surface);
+				height: 100%;
+			}
+
+			#scroll-left {
+				left: 0;
+			}
+
+			#scroll-right {
+				right: 0;
+			}
+
+			::slotted(*) {
+				flex-shrink: 0;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbScrollableContainerElement.prototype, "_showScrollLeft", void 0);
+__decorate([
+    state()
+], UmbScrollableContainerElement.prototype, "_showScrollRight", void 0);
+UmbScrollableContainerElement = __decorate([
+    customElement('umb-scrollable-container')
+], UmbScrollableContainerElement);
+export { UmbScrollableContainerElement };

package/dist-cms/packages/core/components/table/table.element.d.ts

@@ -12,6 +12,7 @@ export interface UmbTableItemData {
 }
 export interface UmbTableColumn {
     name: string;
+    /** Unique identifier for the column — must be unique within a given table instance, as it is used as the key for header and cell reconciliation. */
     alias: string;
     elementName?: string;
     width?: string;
@@ -107,7 +108,9 @@ export declare class UmbTableElement extends UmbLitElement {
     private _deselectAllRows;
     private _selectRow;
     private _deselectRow;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html/directive.js").DirectiveResult<{
+        new (_partInfo: import("lit-html/directive.js").PartInfo): import("lit-html/directives/keyed.js").Keyed<import("lit-html").TemplateResult<1>>;
+    }>;
     private _renderHeaderCell;
     private _renderSortingUI;
     private _renderHeaderCheckboxCell;

package/dist-cms/packages/core/components/table/table.element.js

@@ -4,7 +4,7 @@ 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, ifDefined, property, repeat, state, when, } from '../../../../external/lit/index.js';
+import { css, customElement, html, ifDefined, keyed, property, repeat, state, when, } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
 import { UmbSorterController } from '../../sorter/index.js';
 import { UmbTextStyles } from '../../style/index.js';
@@ -75,11 +75,26 @@ let UmbTableElement = class UmbTableElement extends UmbLitElement {
         }
         this.requestUpdate('sortable', oldVal);
     }
+    #lastColumnKey;
     updated(changedProperties) {
         super.updated(changedProperties);
         if (changedProperties.has('selection')) {
             this._selectionMode = this.selection.length > 0;
         }
+        // The `keyed` directive in `render()` rebuilds the `<uui-table>` element when the column
+        // signature changes. The sorter caches its container element on first initialization, so
+        // when the table is replaced we need to reattach it to the fresh node.
+        if (changedProperties.has('columns') && this._sortable) {
+            const columnKey = this.#getColumnKey();
+            if (columnKey !== this.#lastColumnKey) {
+                this.#lastColumnKey = columnKey;
+                this.#sorter.disable();
+                this.#sorter.enable();
+            }
+        }
+    }
+    #getColumnKey() {
+        return JSON.stringify(this.columns.map((column) => column.alias));
     }
     #sorter;
     constructor() {
@@ -116,6 +131,7 @@ let UmbTableElement = class UmbTableElement extends UmbLitElement {
         this.orderingDesc = false;
         this._sortable = false;
         this._selectionMode = false;
+        this.#lastColumnKey = '';
         this.#sorter = new UmbSorterController(this, {
             getUniqueOfElement: (element) => {
                 return element.dataset.sortableId;
@@ -145,7 +161,8 @@ let UmbTableElement = class UmbTableElement extends UmbLitElement {
 				?selected=${this._isSelected(item.id)}
 				@selected=${() => this._selectRow(item)}
 				@deselected=${() => this._deselectRow(item)}>
-				${this._renderRowCheckboxCell(item)} ${this.columns.map((column) => this._renderRowCell(column, item))}
+				${this._renderRowCheckboxCell(item)}
+				${repeat(this.columns, (column) => column.alias, (column) => this._renderRowCell(column, item))}
 			</uui-table-row>
 		`;
         };
@@ -212,15 +229,19 @@ let UmbTableElement = class UmbTableElement extends UmbLitElement {
     }
     render() {
         const style = !(this.config.allowSelection === false && this.config.hideIcon === true) ? 'width: 60px' : undefined;
-        return html `
-			<uui-table class="uui-text">
-				<uui-table-column style=${ifDefined(style)}></uui-table-column>
-				<uui-table-head>
-					${this._renderHeaderCheckboxCell()} ${this.columns.map((column) => this._renderHeaderCell(column))}
-				</uui-table-head>
-				${repeat(this.items, (item) => item.id, this._renderRow)}
-			</uui-table>
-		`;
+        // Firefox's `display: table-*` engine does not reliably relayout when cells are
+        // inserted or removed from existing rows. Key the whole table on the column
+        // signature so the table is rebuilt whenever the column set changes.
+        return keyed(this.#getColumnKey(), html `
+				<uui-table class="uui-text">
+					<uui-table-column style=${ifDefined(style)}></uui-table-column>
+					<uui-table-head>
+						${this._renderHeaderCheckboxCell()}
+						${repeat(this.columns, (column) => column.alias, (column) => this._renderHeaderCell(column))}
+					</uui-table-head>
+					${repeat(this.items, (item) => item.id, this._renderRow)}
+				</uui-table>
+			`);
     }
     _renderHeaderCell(column) {
         return html `
@@ -284,12 +305,11 @@ let UmbTableElement = class UmbTableElement extends UmbLitElement {
     _renderRowCell(column, item) {
         return html `
 			<uui-table-cell
-				style="--uui-table-cell-padding: 0 var(--uui-size-5); text-align:${column.align ?? 'left'}; width: ${column.width || 'auto'};"
-				?clip-text=${column.clipText}
-				>
-					${this._renderCellContent(column, item)}
+				style="--uui-table-cell-padding: 0 var(--uui-size-5); text-align:${column.align ??
+            'left'}; width: ${column.width || 'auto'};"
+				?clip-text=${column.clipText}>
+				${this._renderCellContent(column, item)}
 			</uui-table-cell>
-		</uui-table-cell>
 		`;
     }
     _renderCellContent(column, item) {