@umbraco-cms/backoffice 16.3.0-rc4 → 17.0.0-beta

package/dist-cms/packages/core/components/input-time-zone/input-time-zone-item.element.d.ts

@@ -0,0 +1,29 @@
+import { UmbLitElement } from '../../lit-element/index.js';
+declare const UmbInputTimeZoneItemElement_base: import("../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../validation/index.js").UmbFormControlMixinElement<string | undefined>> & typeof UmbLitElement;
+/**
+ * @element umb-input-time-zone-item
+ */
+export declare class UmbInputTimeZoneItemElement extends UmbInputTimeZoneItemElement_base {
+    /**
+     * Disables the input
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export default UmbInputTimeZoneItemElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-input-time-zone-item': UmbInputTimeZoneItemElement;
+    }
+}

package/dist-cms/packages/core/components/input-time-zone/input-time-zone-item.element.js

@@ -0,0 +1,97 @@
+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 { html, customElement, css, property, nothing, when } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+import { UmbDeleteEvent } from '../../event/index.js';
+import { getTimeZoneName } from '../../utils/index.js';
+import { UmbFormControlMixin } from '../../validation/index.js';
+/**
+ * @element umb-input-time-zone-item
+ */
+let UmbInputTimeZoneItemElement = class UmbInputTimeZoneItemElement extends UmbFormControlMixin(UmbLitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Disables the input
+         * @type {boolean}
+         * @attr
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+         * @type {boolean}
+         * @attr
+         * @default false
+         */
+        this.readonly = false;
+    }
+    render() {
+        const label = (this.value && getTimeZoneName(this.value)) || '';
+        return html `
+			<div class="time-zone-item">
+				${this.disabled || this.readonly ? nothing : html `<uui-icon name="icon-grip" class="handle"></uui-icon>`}
+
+				<span>${label}</span>
+
+				${when(!this.readonly, () => html `
+						<uui-button
+							class="time-zone-remove-button"
+							compact
+							label="${this.localize.term('general_remove')} ${label}"
+							look="outline"
+							?disabled=${this.disabled}
+							@click=${() => this.dispatchEvent(new UmbDeleteEvent())}>
+							<uui-icon name="icon-trash"></uui-icon>
+						</uui-button>
+					`)}
+			</div>
+		`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				display: flex;
+				align-items: center;
+				margin-bottom: var(--uui-size-space-2);
+				gap: var(--uui-size-space-3);
+			}
+
+			.time-zone-item {
+				background-color: var(--uui-color-surface-alt);
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-6);
+				padding: var(--uui-size-2) var(--uui-size-6);
+				width: 100%;
+			}
+
+			.time-zone-remove-button {
+				margin-left: auto;
+			}
+
+			.handle {
+				cursor: grab;
+			}
+
+			.handle:active {
+				cursor: grabbing;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmbInputTimeZoneItemElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmbInputTimeZoneItemElement.prototype, "readonly", void 0);
+UmbInputTimeZoneItemElement = __decorate([
+    customElement('umb-input-time-zone-item')
+], UmbInputTimeZoneItemElement);
+export { UmbInputTimeZoneItemElement };
+export default UmbInputTimeZoneItemElement;

package/dist-cms/packages/core/components/input-time-zone/input-time-zone-picker.element.d.ts

@@ -0,0 +1,44 @@
+import { UmbLitElement } from '../../lit-element/index.js';
+import type { UUIComboboxElement } from '../../../../external/uui/index.js';
+import type { UmbTimeZone } from '../../utils/index.js';
+export interface UmbTimeZoneOption extends UmbTimeZone {
+    offset: string;
+}
+declare const UmbInputTimeZonePickerElement_base: import("../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../validation/index.js").UmbFormControlMixinElement<string>> & typeof UmbLitElement;
+/**
+ * @element umb-input-time-zone-picker
+ */
+export declare class UmbInputTimeZonePickerElement extends UmbInputTimeZonePickerElement_base {
+    #private;
+    /**
+     * Disables the input
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
+    set options(value: UmbTimeZoneOption[]);
+    get options(): UmbTimeZoneOption[];
+    private _filteredOptions;
+    protected _input?: UUIComboboxElement;
+    /**
+     *
+     */
+    constructor();
+    focus(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export default UmbInputTimeZonePickerElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-input-time-zone-picker': UmbInputTimeZonePickerElement;
+    }
+}

package/dist-cms/packages/core/components/input-time-zone/input-time-zone-picker.element.js

@@ -0,0 +1,104 @@
+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 { html, customElement, css, property, query, until, repeat, state } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+import { UmbChangeEvent } from '../../event/index.js';
+import { UmbFormControlMixin } from '../../validation/index.js';
+/**
+ * @element umb-input-time-zone-picker
+ */
+let UmbInputTimeZonePickerElement = class UmbInputTimeZonePickerElement extends UmbFormControlMixin(UmbLitElement) {
+    set options(value) {
+        this.#options = value;
+        this._filteredOptions = value;
+    }
+    get options() {
+        return this.#options;
+    }
+    #options;
+    /**
+     *
+     */
+    constructor() {
+        super();
+        /**
+         * Disables the input
+         * @type {boolean}
+         * @attr
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+         * @type {boolean}
+         * @attr
+         * @default false
+         */
+        this.readonly = false;
+        this.#options = [];
+        this._filteredOptions = [];
+        this.#renderTimeZoneOption = (option) => html `<uui-combobox-list-option .value=${option.value} .displayValue=${option.name}>
+			${option.name}
+		</uui-combobox-list-option>`;
+        this._filteredOptions = this.options;
+    }
+    async focus() {
+        await this.updateComplete;
+        this._input?.focus();
+    }
+    #onSearch(event) {
+        const searchTerm = event.currentTarget?.search;
+        this._filteredOptions = this.options.filter((option) => new RegExp(searchTerm, 'i').test(option.name) || option.offset === searchTerm);
+    }
+    #onChange(event) {
+        this.value = event.currentTarget?.value ?? '';
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    #renderTimeZoneOption;
+    render() {
+        return html `
+			<uui-combobox
+				id="input"
+				pristine
+				label="${this.localize.term('general_value')} ${this._input?.value}"
+				.value=${this.value}
+				@search="${this.#onSearch}"
+				@change="${this.#onChange}"
+				?disabled=${this.disabled}
+				?readonly=${this.readonly}>
+				<uui-combobox-list> ${until(repeat(this._filteredOptions, this.#renderTimeZoneOption))} </uui-combobox-list>
+			</uui-combobox>
+		`;
+    }
+    static { this.styles = [
+        css `
+			#input {
+				width: 100%;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmbInputTimeZonePickerElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmbInputTimeZonePickerElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Array })
+], UmbInputTimeZonePickerElement.prototype, "options", null);
+__decorate([
+    state()
+], UmbInputTimeZonePickerElement.prototype, "_filteredOptions", void 0);
+__decorate([
+    query('#input')
+], UmbInputTimeZonePickerElement.prototype, "_input", void 0);
+UmbInputTimeZonePickerElement = __decorate([
+    customElement('umb-input-time-zone-picker')
+], UmbInputTimeZonePickerElement);
+export { UmbInputTimeZonePickerElement };
+export default UmbInputTimeZonePickerElement;

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

@@ -0,0 +1,55 @@
+import { UmbLitElement } from '../../lit-element/index.js';
+declare const UmbInputTimeZoneElement_base: import("../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../validation/index.js").UmbFormControlMixinElement<string[]>> & typeof UmbLitElement;
+/**
+ * @element umb-input-time-zone
+ */
+export declare class UmbInputTimeZoneElement extends UmbInputTimeZoneElement_base {
+    #private;
+    /**
+     * This is a minimum amount of selected items in this input.
+     * @type {number}
+     * @attr
+     */
+    set min(value: number);
+    get min(): number;
+    /**
+     * This is a maximum amount of selected items in this input.
+     * @type {number}
+     * @attr
+     */
+    max?: number;
+    /**
+     * Disables the input
+     * @type {boolean}
+     * @attr
+     * @default
+     */
+    set disabled(value: boolean);
+    get disabled(): boolean;
+    /**
+     * Makes the input readonly
+     * @type {boolean}
+     * @attr
+     * @default
+     */
+    set readonly(value: boolean);
+    get readonly(): boolean;
+    /**
+     * Sets the input to required, meaning validation will fail if the value is empty.
+     * @type {boolean}
+     */
+    required?: boolean;
+    set value(value: Array<string>);
+    get value(): Array<string>;
+    protected _timeZonePickerValue: string;
+    constructor();
+    protected getFormElement(): undefined;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export default UmbInputTimeZoneElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-input-time-zone': UmbInputTimeZoneElement;
+    }
+}

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

@@ -0,0 +1,233 @@
+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 { html, customElement, property, css, repeat, nothing, when, state, ref, } from '../../../../external/lit/index.js';
+import { UmbChangeEvent } from '../../event/index.js';
+import { UmbFormControlMixin } from '../../validation/index.js';
+import { UmbSorterController } from '../../sorter/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+import { getTimeZoneList, getTimeZoneOffset } from '../../utils/index.js';
+import { DateTime } from '../../../../external/luxon/index.js';
+/**
+ * @element umb-input-time-zone
+ */
+let UmbInputTimeZoneElement = class UmbInputTimeZoneElement extends UmbFormControlMixin(UmbLitElement, []) {
+    #sorter;
+    /**
+     * This is a minimum amount of selected items in this input.
+     * @type {number}
+     * @attr
+     */
+    set min(value) {
+        this.#min = value;
+    }
+    get min() {
+        if (this.required && this.#min < 1) {
+            return 1;
+        }
+        return this.#min;
+    }
+    #min;
+    /**
+     * Disables the input
+     * @type {boolean}
+     * @attr
+     * @default
+     */
+    set disabled(value) {
+        this.#disabled = value;
+        if (value) {
+            this.#sorter.disable();
+        }
+    }
+    get disabled() {
+        return this.#disabled;
+    }
+    #disabled;
+    /**
+     * Makes the input readonly
+     * @type {boolean}
+     * @attr
+     * @default
+     */
+    set readonly(value) {
+        this.#readonly = value;
+        if (value) {
+            this.#sorter.disable();
+        }
+    }
+    get readonly() {
+        return this.#readonly;
+    }
+    #readonly;
+    set value(value) {
+        super.value = [...new Set(value.filter((v) => !!v))];
+        this.#sorter.setModel(this.value);
+    }
+    get value() {
+        return super.value;
+    }
+    #timeZonePicker;
+    #timeZoneList;
+    constructor() {
+        super();
+        this.#sorter = new UmbSorterController(this, {
+            getUniqueOfElement: (element) => {
+                return element.getAttribute('data-sort-entry-id');
+            },
+            getUniqueOfModel: (modelEntry) => {
+                return modelEntry;
+            },
+            identifier: 'Umb.SorterIdentifier.TimeZone',
+            itemSelector: 'umb-input-time-zone-item',
+            containerSelector: '#sorter-wrapper',
+            onChange: ({ model }) => {
+                this.value = model;
+                this.dispatchEvent(new UmbChangeEvent());
+            },
+        });
+        this.#min = 0;
+        this.#disabled = false;
+        this.#readonly = false;
+        this._timeZonePickerValue = '';
+        this.#timeZoneList = [];
+        const now = DateTime.now();
+        this.#timeZoneList = getTimeZoneList(undefined).map((tz) => ({
+            ...tz,
+            offset: getTimeZoneOffset(tz.value, now), // Format offset as string
+        }));
+        this.addValidator('rangeUnderflow', () => this.localize.term('validation_entriesShort', this.min, this.min - this.value.length), () => this.value.length < this.min);
+        this.addValidator('rangeOverflow', () => this.localize.term('validation_entriesExceed', this.max, this.value.length - (this.max || 0)), () => !!this.max && this.value.length > this.max);
+    }
+    getFormElement() {
+        return undefined;
+    }
+    #onAdd() {
+        if (this.#timeZonePicker) {
+            this.value = [...this.value, this.#timeZonePicker.value];
+            this.#timeZonePicker.value = '';
+            this._timeZonePickerValue = '';
+        }
+        this.pristine = false;
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    #onDelete(itemIndex) {
+        this.value = this.value.filter((_item, index) => index !== itemIndex);
+        this.pristine = false;
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    render() {
+        return html `<div id="sorter-wrapper">${this.#renderSelectedItems()}</div>
+			${this.#renderAddTimeZone()}`;
+    }
+    #renderSelectedItems() {
+        return html `
+			${repeat(this.value, (item) => item, (item, index) => html `
+					<umb-input-time-zone-item
+						name="item-${index}"
+						data-sort-entry-id=${item}
+						value=${item}
+						?disabled=${this.disabled}
+						?readonly=${this.readonly}
+						@delete=${() => this.#onDelete(index)}>
+					</umb-input-time-zone-item>
+				`)}
+		`;
+    }
+    #renderAddTimeZone() {
+        if (this.disabled || this.readonly)
+            return nothing;
+        return html `
+			<div id="add-time-zone">
+				<umb-input-time-zone-picker
+					id="time-zone-picker"
+					name="picker"
+					.options=${this.#timeZoneList.filter((tz) => !this.value.includes(tz.value))}
+					@change=${(event) => {
+            const target = event.target;
+            this._timeZonePickerValue = target?.value;
+        }}
+					?disabled=${this.disabled}
+					?readonly=${this.readonly}
+					${ref(this.#onTimeZonePickerRefChanged)}>
+				</umb-input-time-zone-picker>
+				${when(!this.readonly, () => html `
+						<uui-button
+							compact
+							label="${this.localize.term('general_add')} ${this._timeZonePickerValue}"
+							look="outline"
+							color="positive"
+							?disabled=${this.disabled || !this._timeZonePickerValue}
+							@click=${this.#onAdd}>
+							<uui-icon name="icon-add"></uui-icon>
+						</uui-button>
+					`)}
+			</div>
+		`;
+    }
+    #onTimeZonePickerRefChanged(input) {
+        if (this.#timeZonePicker) {
+            this.removeFormControlElement(this.#timeZonePicker);
+        }
+        this.#timeZonePicker = input;
+        if (this.#timeZonePicker) {
+            this.addFormControlElement(this.#timeZonePicker);
+        }
+    }
+    static { this.styles = [
+        css `
+			#add-time-zone {
+				display: flex;
+				margin-bottom: var(--uui-size-space-3);
+				gap: var(--uui-size-space-1);
+			}
+
+			#time-zone-picker {
+				width: 100%;
+				display: inline-flex;
+				--uui-input-height: var(--uui-size-12);
+			}
+
+			.--umb-sorter-placeholder {
+				position: relative;
+				visibility: hidden;
+			}
+			.--umb-sorter-placeholder::after {
+				content: '';
+				position: absolute;
+				inset: 0px;
+				border-radius: var(--uui-border-radius);
+				border: 1px dashed var(--uui-color-divider-emphasis);
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: Number })
+], UmbInputTimeZoneElement.prototype, "min", null);
+__decorate([
+    property({ type: Number })
+], UmbInputTimeZoneElement.prototype, "max", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmbInputTimeZoneElement.prototype, "disabled", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmbInputTimeZoneElement.prototype, "readonly", null);
+__decorate([
+    property({ type: Boolean })
+], UmbInputTimeZoneElement.prototype, "required", void 0);
+__decorate([
+    property({ type: Array, reflect: false })
+], UmbInputTimeZoneElement.prototype, "value", null);
+__decorate([
+    state()
+], UmbInputTimeZoneElement.prototype, "_timeZonePickerValue", void 0);
+UmbInputTimeZoneElement = __decorate([
+    customElement('umb-input-time-zone')
+], UmbInputTimeZoneElement);
+export { UmbInputTimeZoneElement };
+export default UmbInputTimeZoneElement;

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

@@ -3,6 +3,7 @@ declare const UmbInputWithAliasElement_base: import("../../../../libs/extension-
 export declare class UmbInputWithAliasElement extends UmbInputWithAliasElement_base {
     #private;
     label: string;
+    placeholder?: string;
     alias: string;
     required: boolean;
     readonly: boolean;

package/dist-cms/packages/core/components/input-with-alias/input-with-alias.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, property, state } from '../../../../external/lit/index.js';
+import { css, customElement, html, ifDefined, property, state } from '../../../../external/lit/index.js';
 import { generateAlias } from '../../utils/index.js';
 import { UmbChangeEvent } from '../../event/index.js';
 import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../validation/index.js';
@@ -76,7 +76,7 @@ let UmbInputWithAliasElement = class UmbInputWithAliasElement extends UmbFormCon
         return html `
 			<uui-input
 				id="name"
-				placeholder=${nameLabel}
+				placeholder=${ifDefined(this.placeholder)}
 				label=${nameLabel}
 				.value=${this.value}
 				@input=${this.#onNameChange}
@@ -132,6 +132,9 @@ let UmbInputWithAliasElement = class UmbInputWithAliasElement extends UmbFormCon
 __decorate([
     property({ type: String })
 ], UmbInputWithAliasElement.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], UmbInputWithAliasElement.prototype, "placeholder", void 0);
 __decorate([
     property({ type: String, reflect: false })
 ], UmbInputWithAliasElement.prototype, "alias", void 0);

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

@@ -33,18 +33,28 @@ let UmbMultipleColorPickerItemInputElement = class UmbMultipleColorPickerItemInp
         this.showLabels = false;
     }
     set value(value) {
+        this._valueHex = this.#expandHex(value);
         if (value.startsWith('#')) {
-            this._valueHex = value;
             super.value = value.substring(1);
         }
         else {
             super.value = value;
-            this._valueHex = `#${value}`;
         }
     }
     get value() {
         return super.value;
     }
+    #expandHex(hex) {
+        hex = hex.replace(/^#/, '');
+        // If it's 3-digit, expand it
+        if (hex.length === 3) {
+            hex = hex
+                .split('')
+                .map((ch) => ch + ch)
+                .join('');
+        }
+        return `#${hex}`;
+    }
     async #onDelete() {
         await umbConfirmModal(this, {
             headline: `${this.localize.term('actions_delete')} ${this.value || ''}`,
@@ -114,7 +124,7 @@ let UmbMultipleColorPickerItemInputElement = class UmbMultipleColorPickerItemInp
         return html `
 			<umb-form-validation-message id="validation-message" @invalid=${this.#onInvalid} @valid=${this.#onValid}>
 				<div id="item">
-					${this.disabled || this.readonly ? nothing : html `<uui-icon name="icon-grip"></uui-icon>`}
+					${this.disabled || this.readonly ? nothing : html `<uui-icon name="icon-grip" class="handle"></uui-icon>`}
 					<div class="color-wrapper">
 						<uui-input
 							id="input"
@@ -132,7 +142,12 @@ let UmbMultipleColorPickerItemInputElement = class UmbMultipleColorPickerItemInp
 								value=${this._valueHex}
 								@click=${this.#onColorClick}></uui-color-swatch>
 						</uui-input>
-						<input aria-hidden="${true}" type="color" id="color" value=${this.value} @change=${this.#onColorChange} />
+						<input
+							type="color"
+							id="color"
+							value=${this._valueHex}
+							aria-hidden="${true}"
+							@change=${this.#onColorChange} />
 					</div>
 					${when(this.showLabels, () => html `
 							<uui-input
@@ -149,7 +164,7 @@ let UmbMultipleColorPickerItemInputElement = class UmbMultipleColorPickerItemInp
 							<uui-button
 								compact
 								label=${this.localize.term('actions_delete')}
-								look="primary"
+								look="outline"
 								?disabled=${this.disabled}
 								@click=${this.#onDelete}>
 								<uui-icon name="icon-trash"></uui-icon>
@@ -207,6 +222,14 @@ let UmbMultipleColorPickerItemInputElement = class UmbMultipleColorPickerItemInp
 				margin: 0;
 				position: absolute;
 			}
+
+			.handle {
+				cursor: grab;
+			}
+
+			.handle:active {
+				cursor: grabbing;
+			}
 		`,
     ]; }
 };