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, ifDefined, repeat, when } from '../../../../../external/lit/index.js';
import { UmbModalBaseElement } from '../../../../core/modal/index.js';
let UmbTiptapTablePropertiesModalElement = class UmbTiptapTablePropertiesModalElement extends UmbModalBaseElement {
    #appearance = { labelOnTop: true };
    #properties = [
        { alias: 'width', label: 'Width', propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox' },
        { alias: 'height', label: 'Height', propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox' },
        {
            alias: 'backgroundColor',
            label: 'Background color',
            propertyEditorUiAlias: 'Umb.PropertyEditorUi.EyeDropper',
            config: [{ alias: 'showPalette', value: true }],
        },
        {
            alias: 'alignment',
            label: 'Alignment',
            propertyEditorUiAlias: 'Umb.PropertyEditorUi.Dropdown',
            config: [
                {
                    alias: 'items',
                    value: [
                        { name: 'None', value: 'none' },
                        { name: 'Left', value: 'left' },
                        { name: 'Center', value: 'center' },
                        { name: 'Right', value: 'right' },
                    ],
                },
            ],
        },
        { alias: 'borderWidth', label: 'Border width', propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox' },
        {
            alias: 'borderStyle',
            label: 'Border style',
            propertyEditorUiAlias: 'Umb.PropertyEditorUi.Dropdown',
            config: [
                {
                    alias: 'items',
                    value: [
                        { name: 'Solid', value: 'solid' },
                        { name: 'Dotted', value: 'dotted' },
                        { name: 'Dashed', value: 'dashed' },
                        { name: 'Double', value: 'double' },
                        { name: 'Groove', value: 'groove' },
                        { name: 'Ridge', value: 'ridge' },
                        { name: 'Inset', value: 'inset' },
                        { name: 'Outset', value: 'outset' },
                        { name: 'None', value: 'none' },
                        { name: 'Hidden', value: 'hidden' },
                    ],
                },
            ],
        },
        {
            alias: 'borderColor',
            label: 'Border color',
            propertyEditorUiAlias: 'Umb.PropertyEditorUi.EyeDropper',
            config: [{ alias: 'showPalette', value: true }],
        },
    ];
    #values = [];
    connectedCallback() {
        super.connectedCallback();
        if (this.data) {
            this.#values = Object.entries(this.data).map(([alias, value]) => ({ alias, value }));
        }
    }
    #onChange(event) {
        this.#values = event.target.value;
    }
    #onSubmit() {
        this.value = this.#values;
        this._submitModal();
    }
    render() {
        return html `
			<umb-body-layout headline="Table properties">
				<uui-box>
					${when(this.#properties?.length, () => html `
							<umb-property-dataset .value=${this.#values} @change=${this.#onChange}>
								${repeat(this.#properties, (property) => property.alias, (property) => html `
										<umb-property
											alias=${property.alias}
											label=${property.label}
											property-editor-ui-alias=${property.propertyEditorUiAlias}
											property-editor-data-source-alias=${ifDefined(property.propertyEditorDataSourceAlias)}
											.appearance=${this.#appearance}
											.config=${property.config}>
										</umb-property>
									`)}
							</umb-property-dataset>
						`, () => html `<p>There are no properties for this modal.</p>`)}
				</uui-box>
				<uui-button
					slot="actions"
					label=${this.localize.term('general_cancel')}
					@click=${this._rejectModal}></uui-button>
				<uui-button
					slot="actions"
					color="positive"
					look="primary"
					label=${this.localize.term('bulk_done')}
					@click=${this.#onSubmit}></uui-button>
			</umb-body-layout>
		`;
    }
    static { this.styles = [
        css `
			umb-property {
				--uui-size-layout-1: var(--uui-size-space-4);
			}
		`,
    ]; }
};
UmbTiptapTablePropertiesModalElement = __decorate([
    customElement('umb-tiptap-table-properties-modal')
], UmbTiptapTablePropertiesModalElement);
export { UmbTiptapTablePropertiesModalElement };
export { UmbTiptapTablePropertiesModalElement as element };
