@3mo/moddable-data-grid/dist/DialogMode.js

A moddable variant of @3mo/fetchable-data-grid

import { __decorate } from "tslib";
import { html, style, state, component, Binder } from '@a11d/lit';
import { DialogComponent } from '@a11d/lit-application';
import { Localizer } from '@3mo/localization';
import { ModdableDataGridMode } from './ModdableDataGridMode.js';
Localizer.dictionaries.add({
    de: {
        'View "${name:string}"': 'Ansicht "${name}"',
        'New view': 'Neue Ansicht',
        'Name': 'Bezeichnung',
        'Archive': 'Archivieren',
        'Save': 'Speichern',
        'Edit': 'Bearbeiten',
        'Delete': 'Löschen',
        'Please enter a valid name!': 'Bitte eine Bezeichnung eingeben!',
    }
});
let DialogMode = class DialogMode extends DialogComponent {
    constructor() {
        super(...arguments);
        this.mode = this.parameters.mode ?? new ModdableDataGridMode();
        this.binder = new Binder(this, 'mode');
    }
    get dataGrid() {
        return this.parameters.dataGrid;
    }
    get heading() {
        return this.parameters.mode?.name
            ? t('View "${name:string}"', { name: this.mode.name })
            : t('New view');
    }
    get template() {
        const { bind } = this.binder;
        return html `
			<mo-dialog heading=${this.heading} primaryOnEnter primaryButtonText=${t('Save')}>
				<mo-field-text autofocus required label=${t('Name')}
					${bind({ keyPath: 'name', event: 'input' })}
				></mo-field-text>

				${!this.parameters.mode?.id ? html.nothing : html `
					<mo-checkbox slot='footer' label=${t('Archive')} ${bind('archived')} ${style({ marginInlineStart: '8px' })}></mo-checkbox>

					<mo-button type='elevated' slot='secondaryAction' ${style({ '--mo-button-accent-color': 'var(--mo-color-red)' })}>
						${t('Delete')}
					</mo-button>
				`}
			</mo-dialog>
		`;
    }
    async primaryAction() {
        if (!this.mode.name) {
            throw new Error(t('Please enter a valid name!'));
        }
        this.mode = this.dataGrid.currentMode.with(this.mode);
        await this.mode.save(this.dataGrid);
        return this.mode;
    }
    async secondaryAction() {
        await this.parameters.dataGrid.modesController.delete(this.mode);
        return undefined;
    }
};
__decorate([
    state()
], DialogMode.prototype, "mode", void 0);
DialogMode = __decorate([
    component('mo-dialog-mode')
], DialogMode);
export { DialogMode };