inital commit

node_modules/jodit/esm/plugins/image-properties/ui/ui-image-form.d.ts

@@ -0,0 +1,31 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2025 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+/**
+ * @module plugins/image-properties
+ */
+import type { IComponent, IContainer, IElms, IJodit, Nullable } from "../../../types/index";
+import { UIGroup } from "../../../core/ui/group/group";
+import type { ImagePropertiesAPI, ImagePropertiesState } from "../interface";
+/** @private */
+export declare class UIImagePropertiesForm extends UIGroup<IJodit> {
+    private state;
+    private handlers;
+    className(): string;
+    appendChildToContainer(): void;
+    getElm<T extends IComponent & IContainer & IElms>(elementName: string): Nullable<HTMLElement>;
+    private __mainTab;
+    private __positionTab;
+    constructor(jodit: IJodit, state: ImagePropertiesState, activeTabState: {
+        activeTab: 'Image' | 'Advanced';
+    }, handlers: ImagePropertiesAPI);
+    protected render(): string;
+    protected onChangeSizeIsLocked(): void;
+    protected onLockSizeClick(): void;
+    protected onStateValuesSizeChange(): void;
+    protected onImageWidthChange(e: Event): void;
+    protected onStateValuesImageSrcChange(): void;
+    protected hideFieldByOptions(): void;
+}

node_modules/jodit/esm/plugins/image-properties/ui/ui-image-form.js

@@ -0,0 +1,171 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2025 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+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 { debounce, hook, watch } from "../../../core/decorators/index.js";
+import { component } from "../../../core/decorators/component/component.js";
+import { attr, css, isNumeric } from "../../../core/helpers/index.js";
+import { UIGroup } from "../../../core/ui/group/group.js";
+import { Icon } from "../../../core/ui/icon.js";
+import { TabsWidget } from "../../../modules/widget/index.js";
+import { UIImageMainTab } from "./ui-image-main-tab.js";
+import { UIImagePositionTab } from "./ui-image-position-tab.js";
+/** @private */
+let UIImagePropertiesForm = class UIImagePropertiesForm extends UIGroup {
+    className() {
+        return 'UIImagePropertiesForm';
+    }
+    appendChildToContainer() { }
+    getElm(elementName) {
+        const selfElm = super.getElm(elementName);
+        if (selfElm) {
+            return selfElm;
+        }
+        for (const child of this.elements) {
+            const elm = child.getElm(elementName);
+            if (elm) {
+                return elm;
+            }
+        }
+        return null;
+    }
+    constructor(jodit, state, activeTabState, handlers) {
+        super(jodit);
+        this.state = state;
+        this.handlers = handlers;
+        this.__mainTab = new UIImageMainTab(this.jodit, this.state, this.handlers);
+        this.__positionTab = new UIImagePositionTab(this.jodit, this.state, this.handlers);
+        this.getElm('tabsBox').appendChild(TabsWidget(jodit, [
+            { name: 'Image', content: this.__mainTab },
+            { name: 'Advanced', content: this.__positionTab }
+        ], activeTabState));
+        this.setMod('lock-size', this.state.sizeIsLocked);
+        this.append(this.__mainTab).append(this.__positionTab);
+    }
+    render() {
+        return `<form>
+		<div class="jodit-grid jodit-grid_xs-column">
+			<div class="jodit_col-lg-2-5 jodit_col-xs-5-5">
+				<div class="&__view-box">
+					<div class="&__imageView">
+						<img class="&__imageViewSrc" src="" alt=""/>
+					</div>
+					<div class="jodit-form__group &__imageSizes">
+						<input type="text" class="jodit-input &__imageWidth"/>
+						<a class="&__lockSize">${Icon.get('lock')}</a>
+						<input type="text" class="&__imageHeight jodit-input"/>
+					</div>
+				</div>
+			</div>
+			<div class="jodit_col-lg-3-5 jodit_col-xs-5-5 &__tabsBox"></div>
+		</div>
+	</form>`;
+    }
+    onChangeSizeIsLocked() {
+        const lockSize = this.getElm('lockSize');
+        const imageWidth = this.getElm('imageWidth');
+        lockSize.innerHTML = Icon.get(this.state.sizeIsLocked ? 'lock' : 'unlock');
+        this.setMod('lock-size', this.state.sizeIsLocked);
+        this.j.e.fire(imageWidth, 'change');
+    }
+    onLockSizeClick() {
+        this.state.sizeIsLocked = !this.state.sizeIsLocked;
+    }
+    onStateValuesSizeChange() {
+        const imageWidth = this.getElm('imageWidth');
+        const imageHeight = this.getElm('imageHeight');
+        if (imageWidth !== this.j.od.activeElement) {
+            imageWidth.value = this.state.values.imageWidth.toString();
+        }
+        if (imageHeight !== this.j.od.activeElement) {
+            imageHeight.value = this.state.values.imageHeight.toString();
+        }
+    }
+    onImageWidthChange(e) {
+        const imageWidth = this.getElm('imageWidth');
+        const imageHeight = this.getElm('imageHeight');
+        if (!this.state.sizeIsLocked ||
+            !isNumeric(imageWidth.value) ||
+            !isNumeric(imageHeight.value)) {
+            this.state.values.imageWidth = imageWidth.value;
+            this.state.values.imageHeight = imageHeight.value;
+            return;
+        }
+        const w = parseFloat(imageWidth.value), h = parseFloat(imageHeight.value);
+        if (e.target === imageWidth) {
+            this.state.values.imageWidth = w;
+            this.state.values.imageHeight = Math.round(w / this.state.ratio);
+        }
+        else {
+            this.state.values.imageWidth = Math.round(h * this.state.ratio);
+            this.state.values.imageHeight = h;
+        }
+    }
+    onStateValuesImageSrcChange() {
+        const { imageSrc } = this.state.values;
+        if (!imageSrc) {
+            return;
+        }
+        const imageViewSrc = this.getElm('imageViewSrc');
+        attr(imageViewSrc, 'src', imageSrc);
+        const image = new Image();
+        image.src = imageSrc;
+        this.state.image = image;
+    }
+    hideFieldByOptions() {
+        const opt = this.j.o.image;
+        [
+            ['editSize', 'imageSizes'],
+            ['showPreview', 'imageView']
+        ].forEach(([optKey, elmKey]) => {
+            const elm = this.getElm(elmKey);
+            css(elm, 'display', opt[optKey] ? null : 'none');
+        });
+    }
+};
+__decorate([
+    hook('ready'),
+    watch('state.sizeIsLocked')
+], UIImagePropertiesForm.prototype, "onChangeSizeIsLocked", null);
+__decorate([
+    watch('lockSize:click')
+], UIImagePropertiesForm.prototype, "onLockSizeClick", null);
+__decorate([
+    hook('ready'),
+    watch(['state.values.imageWidth', 'state.values.imageHeight'])
+], UIImagePropertiesForm.prototype, "onStateValuesSizeChange", null);
+__decorate([
+    watch([
+        'imageWidth:change',
+        'imageHeight:change',
+        'imageWidth:keydown',
+        'imageHeight:keydown',
+        'imageWidth:mousedown',
+        'imageHeight:mousedown',
+        'imageWidth:paste',
+        'imageHeight:paste'
+    ]),
+    debounce()
+], UIImagePropertiesForm.prototype, "onImageWidthChange", null);
+__decorate([
+    hook('ready'),
+    watch('state.values.imageSrc')
+], UIImagePropertiesForm.prototype, "onStateValuesImageSrcChange", null);
+__decorate([
+    hook('ready')
+], UIImagePropertiesForm.prototype, "hideFieldByOptions", null);
+UIImagePropertiesForm = __decorate([
+    component
+], UIImagePropertiesForm);
+export { UIImagePropertiesForm };

node_modules/jodit/esm/plugins/image-properties/ui/ui-image-main-tab.d.ts

@@ -0,0 +1,39 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2025 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+/**
+ * @module plugins/image-properties
+ */
+import type { IJodit } from "../../../types/index";
+import { UIGroup } from "../../../core/ui/group/group";
+import type { ImagePropertiesAPI, ImagePropertiesState } from "../interface";
+/** @private */
+export declare class UIImageMainTab extends UIGroup<IJodit> {
+    private state;
+    private handlers;
+    className(): string;
+    appendChildToContainer(): void;
+    constructor(view: IJodit, state: ImagePropertiesState, handlers: ImagePropertiesAPI);
+    protected render(): string;
+    protected onStateImageSrcChange(): Promise<void>;
+    protected onImageSrcChange(): void;
+    /**
+     * Open image editor
+     */
+    protected onEditImageClick(e: MouseEvent): void;
+    /**
+     * Open popup with filebrowser/uploader buttons for image
+     */
+    protected onChangeImageClick(e: MouseEvent): void;
+    protected onStateTitleChange(): void;
+    protected onTitleChange(): void;
+    protected onStateAltChange(): void;
+    protected onAltChange(): void;
+    protected onStateImageLinkChange(): void;
+    protected onImageLinkChange(): void;
+    protected onStateImageLinkOpenInNewTabChange(): void;
+    protected onImageLinkOpenInNewTabChange(): void;
+    protected hideFieldByOptions(): void;
+}

node_modules/jodit/esm/plugins/image-properties/ui/ui-image-main-tab.js

@@ -0,0 +1,179 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2025 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+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 { component } from "../../../core/decorators/component/component.js";
+import { hook } from "../../../core/decorators/hook/hook.js";
+import { watch } from "../../../core/decorators/watch/watch.js";
+import { css } from "../../../core/helpers/index.js";
+import { UIGroup } from "../../../core/ui/group/group.js";
+/** @private */
+let UIImageMainTab = class UIImageMainTab extends UIGroup {
+    className() {
+        return 'UIImageMainTab';
+    }
+    appendChildToContainer() {
+        // Do nothing
+    }
+    constructor(view, state, handlers) {
+        super(view);
+        this.state = state;
+        this.handlers = handlers;
+    }
+    render() {
+        return `<div class="jodit-form__group &__editSrc">
+			<label>~Src~</label>
+			<div class="jodit-input_group">
+				<input class="jodit-input &__imageSrc" type="text"/>
+				<div class="jodit-input_group-buttons &__fixImage">
+						<a class="jodit-button &__changeImage">*image*</a>
+						<a class="jodit-button &__editImage">*crop*</a>
+				</div>
+			</div>
+		</div>
+		<div class="jodit-form__group &__editTitle">
+			<label>~Title~</label>
+			<input type="text" class="jodit-input &__imageTitle"/>
+		</div>
+		<div class="jodit-form__group &__editAlt">
+			<label>~Alternative~</label>
+			<input type="text" class="jodit-input &__imageAlt"/>
+		</div>
+		<div class="jodit-form__group &__editLink">
+			<label>~Link~</label>
+			<input type="text" class="jodit-input &__imageLink"/>
+		</div>
+		<div class="jodit-form__group &__editLinkTarget">
+			<label class="jodit_vertical_middle">
+				<input type="checkbox" class="jodit-checkbox &__imageLinkOpenInNewTab"/>
+				<span>~Open link in new tab~</span>
+			</label>
+		</div>`;
+    }
+    async onStateImageSrcChange() {
+        const imageSrc = this.getElm('imageSrc');
+        imageSrc.value = this.state.values.imageSrc;
+    }
+    onImageSrcChange() {
+        this.state.values.imageSrc = this.getElm('imageSrc').value;
+    }
+    /**
+     * Open image editor
+     */
+    onEditImageClick(e) {
+        this.handlers.openImageEditor();
+        e.stopPropagation();
+    }
+    /**
+     * Open popup with filebrowser/uploader buttons for image
+     */
+    onChangeImageClick(e) {
+        this.handlers.openImagePopup(this.getElm('changeImage'));
+        e.stopPropagation();
+    }
+    onStateTitleChange() {
+        const title = this.getElm('imageTitle');
+        title.value = this.state.values.imageTitle;
+    }
+    onTitleChange() {
+        this.state.values.imageTitle = this.getElm('imageTitle').value;
+    }
+    onStateAltChange() {
+        const alt = this.getElm('imageAlt');
+        alt.value = this.state.values.imageAlt;
+    }
+    onAltChange() {
+        this.state.values.imageAlt = this.getElm('imageAlt').value;
+    }
+    onStateImageLinkChange() {
+        const imageLink = this.getElm('imageLink');
+        imageLink.value = this.state.values.imageLink;
+    }
+    onImageLinkChange() {
+        this.state.values.imageLink = this.getElm('imageLink').value;
+    }
+    onStateImageLinkOpenInNewTabChange() {
+        const imageLinkOpenInNewTab = this.getElm('imageLinkOpenInNewTab');
+        imageLinkOpenInNewTab.checked = this.state.values.imageLinkOpenInNewTab;
+    }
+    onImageLinkOpenInNewTabChange() {
+        this.state.values.imageLinkOpenInNewTab = this.getElm('imageLinkOpenInNewTab').checked;
+    }
+    hideFieldByOptions() {
+        const o = this.j.o;
+        const opt = o.image;
+        [
+            ['editSrc', 'editSrc'],
+            ['editTitle', 'editTitle'],
+            ['editAlt', 'editAlt'],
+            ['editLink', 'editLink'],
+            ['editLink', 'editLinkTarget'],
+            ['useImageEditor', 'editImage']
+        ].forEach(([optKey, elmKey]) => {
+            const elm = this.getElm(elmKey);
+            css(elm, 'display', opt[optKey] ? null : 'none');
+        });
+        const changeImage = this.getElm('changeImage');
+        const needShowChangeImage = Boolean(o.filebrowser.ajax.url || o.uploader.url);
+        css(changeImage, 'display', needShowChangeImage ? null : 'none');
+        const editImage = this.getElm('editImage');
+        const needShowEditImage = Boolean(o.filebrowser.ajax.url) && opt.useImageEditor;
+        css(editImage, 'display', needShowEditImage ? null : 'none');
+        const fixImage = this.getElm('fixImage');
+        css(fixImage, 'display', needShowChangeImage || needShowEditImage ? null : 'none');
+    }
+};
+__decorate([
+    watch('state.values.imageSrc')
+], UIImageMainTab.prototype, "onStateImageSrcChange", null);
+__decorate([
+    watch('imageSrc:change')
+], UIImageMainTab.prototype, "onImageSrcChange", null);
+__decorate([
+    watch('editImage:click')
+], UIImageMainTab.prototype, "onEditImageClick", null);
+__decorate([
+    watch('changeImage:click')
+], UIImageMainTab.prototype, "onChangeImageClick", null);
+__decorate([
+    watch('state.values.imageTitle')
+], UIImageMainTab.prototype, "onStateTitleChange", null);
+__decorate([
+    watch('imageTitle:change')
+], UIImageMainTab.prototype, "onTitleChange", null);
+__decorate([
+    watch('state.values.imageAlt')
+], UIImageMainTab.prototype, "onStateAltChange", null);
+__decorate([
+    watch('imageAlt:change')
+], UIImageMainTab.prototype, "onAltChange", null);
+__decorate([
+    watch('state.values.imageLink')
+], UIImageMainTab.prototype, "onStateImageLinkChange", null);
+__decorate([
+    watch('imageLink:change')
+], UIImageMainTab.prototype, "onImageLinkChange", null);
+__decorate([
+    watch('state.values.imageLinkOpenInNewTab')
+], UIImageMainTab.prototype, "onStateImageLinkOpenInNewTabChange", null);
+__decorate([
+    watch('imageLinkOpenInNewTab:change')
+], UIImageMainTab.prototype, "onImageLinkOpenInNewTabChange", null);
+__decorate([
+    hook('ready')
+], UIImageMainTab.prototype, "hideFieldByOptions", null);
+UIImageMainTab = __decorate([
+    component
+], UIImageMainTab);
+export { UIImageMainTab };

node_modules/jodit/esm/plugins/image-properties/ui/ui-image-position-tab.d.ts

@@ -0,0 +1,39 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2025 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+/**
+ * @module plugins/image-properties
+ */
+import type { IJodit } from "../../../types/index";
+import { UIElement } from "../../../core/ui/element";
+import type { ImagePropertiesAPI, ImagePropertiesState } from "../interface";
+/** @private */
+export declare class UIImagePositionTab extends UIElement<IJodit> {
+    private state;
+    protected handlers: ImagePropertiesAPI;
+    className(): string;
+    constructor(jodit: IJodit, state: ImagePropertiesState, handlers: ImagePropertiesAPI);
+    protected render({ availableClasses }: {
+        availableClasses?: string[] | Array<[
+            string,
+            string
+        ]>;
+    }): string;
+    protected onStateAlignChange(): void;
+    protected onChangeAlign(): void;
+    protected onStateValuesBorderRadiusChange(): void;
+    protected onChangeBorderRadius(): void;
+    protected onStateValuesIdChange(): void;
+    protected onChangeId(): void;
+    protected onStateValuesStyleChange(): void;
+    protected onChangeStyle(): void;
+    protected onStateValuesClassesChange(): void;
+    protected onChangClasses(): void;
+    protected onLockMarginClick(e: MouseEvent): void;
+    protected onChangeMarginIsLocked(): void;
+    protected onStateValuesMarginChange(): void;
+    protected onChangeMargin(): void;
+    protected hideFieldByOptions(): void;
+}

node_modules/jodit/esm/plugins/image-properties/ui/ui-image-position-tab.js

@@ -0,0 +1,261 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2025 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+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 { component } from "../../../core/decorators/component/component.js";
+import { hook } from "../../../core/decorators/hook/hook.js";
+import { watch } from "../../../core/decorators/watch/watch.js";
+import { css } from "../../../core/helpers/index.js";
+import { isString } from "../../../core/helpers/checker/is-string.js";
+import { attr } from "../../../core/helpers/utils/attr.js";
+import { UIElement } from "../../../core/ui/element.js";
+import { Icon } from "../../../core/ui/icon.js";
+import { normalSizeFromString } from "../utils/utils.js";
+/** @private */
+let UIImagePositionTab = class UIImagePositionTab extends UIElement {
+    className() {
+        return 'UIImagePositionTab';
+    }
+    constructor(jodit, state, handlers) {
+        super(jodit, {
+            availableClasses: jodit.o.image.availableClasses
+        });
+        this.state = state;
+        this.handlers = handlers;
+    }
+    render({ availableClasses }) {
+        return `<div class="jodit-form__group &__editMargins">
+			<label>~Margins~</label>
+			<div class="jodit-grid jodit_vertical_middle">
+				<input class="jodit_col-lg-1-5 jodit-input &__marginTop" type="text" placeholder="~top~"/>
+				<a style="text-align: center;" class="jodit-properties__lock jodit_col-lg-1-5 &__lockMargin">*lock*</a>
+				<input disabled="disabled" class="jodit_col-lg-1-5 jodit-input &__marginRight" type="text" placeholder="~right~"/>
+				<input disabled="disabled" class="jodit_col-lg-1-5 jodit-input &__marginBottom" type="text" placeholder="~bottom~"/>
+				<input disabled="disabled" class="jodit_col-lg-1-5 jodit-input &__marginLeft" type="text" placeholder="~left~"/>
+			</div>
+		</div>
+		<div class="jodit-form__group &__editAlign">
+			<label>~Align~</label>
+			<select class="jodit-select &__align">
+				<option value="">~--Not Set--~</option>
+				<option value="left">~Left~</option>
+				<option value="center">~Center~</option>
+				<option value="right">~Right~</option>
+			</select>
+		</div>
+		<div class="jodit-form__group &__editStyle">
+			<label>~Styles~</label>
+			<input type="text" class="jodit-input &__style"/>
+		</div>
+		<div class="jodit-form__group &__editClass">
+			<label>~Classes~</label>
+			${(() => {
+            const classInput = [];
+            if (availableClasses && availableClasses.length > 0) {
+                classInput.push('<select class="jodit-input jodit-select &__classes">');
+                availableClasses.forEach(item => {
+                    if (isString(item)) {
+                        classInput.push(`<option value="${item}">${item}</option>`);
+                    }
+                    else {
+                        classInput.push(`<option value="${item[0]}">${item[1]}</option>`);
+                    }
+                });
+                classInput.push('</select>');
+            }
+            else {
+                classInput.push('<input type="text" class="jodit-input &__classes"/>');
+            }
+            return classInput.join('');
+        })()}
+		</div>
+		<div class="jodit-form__group &__editId">
+			<label>Id</label>
+			<input type="text" class="jodit-input &__id"/>
+		</div>
+		<div
+			class="jodit-form__group &__editBorderRadius"
+		>
+			<label>~Border radius~</label>
+			<input type="number" class="jodit-input &__borderRadius"/>
+		</div>`;
+    }
+    onStateAlignChange() {
+        const align = this.getElm('align');
+        align.value = this.state.values.align;
+    }
+    onChangeAlign() {
+        const align = this.getElm('align');
+        this.state.values.align = align.value;
+    }
+    onStateValuesBorderRadiusChange() {
+        const borderRadius = this.getElm('borderRadius');
+        borderRadius.value = this.state.values.borderRadius.toString();
+    }
+    onChangeBorderRadius() {
+        const borderRadius = this.getElm('borderRadius');
+        this.state.values.borderRadius = parseFloat(borderRadius.value);
+    }
+    onStateValuesIdChange() {
+        const id = this.getElm('id');
+        id.value = this.state.values.id;
+    }
+    onChangeId() {
+        const id = this.getElm('id');
+        this.state.values.id = id.value;
+    }
+    onStateValuesStyleChange() {
+        const style = this.getElm('style');
+        style.value = this.state.values.style;
+    }
+    onChangeStyle() {
+        const style = this.getElm('style');
+        this.state.values.style = style.value;
+    }
+    onStateValuesClassesChange() {
+        const classes = this.getElm('classes');
+        classes.value = this.state.values.classes;
+    }
+    onChangClasses() {
+        const classes = this.getElm('classes');
+        this.state.values.classes = classes.value;
+    }
+    onLockMarginClick(e) {
+        this.state.marginIsLocked = !this.state.marginIsLocked;
+        e.preventDefault();
+    }
+    onChangeMarginIsLocked() {
+        const marginBottom = this.getElm('marginBottom');
+        const marginRight = this.getElm('marginRight');
+        const marginLeft = this.getElm('marginLeft');
+        const lockMargin = this.getElm('lockMargin');
+        [marginRight, marginBottom, marginLeft].forEach(elm => {
+            attr(elm, 'disabled', this.state.marginIsLocked || null);
+        });
+        lockMargin.innerHTML = Icon.get(this.state.marginIsLocked ? 'lock' : 'unlock');
+        if (this.state.marginIsLocked) {
+            const marginTop = this.state.values.marginTop;
+            this.state.values.marginRight = marginTop;
+            this.state.values.marginBottom = marginTop;
+            this.state.values.marginLeft = marginTop;
+        }
+    }
+    onStateValuesMarginChange() {
+        const marginTop = this.getElm('marginTop');
+        const marginRight = this.getElm('marginRight');
+        const marginBottom = this.getElm('marginBottom');
+        const marginLeft = this.getElm('marginLeft');
+        marginTop.value = this.state.values.marginTop.toString();
+        marginRight.value = this.state.values.marginRight.toString();
+        marginBottom.value = this.state.values.marginBottom.toString();
+        marginLeft.value = this.state.values.marginLeft.toString();
+    }
+    onChangeMargin() {
+        const marginTop = this.getElm('marginTop');
+        const marginRight = this.getElm('marginRight');
+        const marginBottom = this.getElm('marginBottom');
+        const marginLeft = this.getElm('marginLeft');
+        this.state.values.marginTop = normalSizeFromString(marginTop.value);
+        if (this.state.marginIsLocked) {
+            this.state.values.marginRight = this.state.values.marginTop;
+            this.state.values.marginBottom = this.state.values.marginTop;
+            this.state.values.marginLeft = this.state.values.marginTop;
+        }
+        else {
+            this.state.values.marginRight = normalSizeFromString(marginRight.value);
+            this.state.values.marginBottom = normalSizeFromString(marginBottom.value);
+            this.state.values.marginLeft = normalSizeFromString(marginLeft.value);
+        }
+    }
+    hideFieldByOptions() {
+        const opt = this.j.o.image;
+        [
+            ['editMargins', 'editMargins'],
+            ['editAlign', 'editAlign'],
+            ['editStyle', 'editStyle'],
+            ['editClass', 'editClass'],
+            ['editId', 'editId'],
+            ['editBorderRadius', 'editBorderRadius']
+        ].forEach(([optKey, elmKey]) => {
+            const elm = this.getElm(elmKey);
+            css(elm, 'display', opt[optKey] ? null : 'none');
+        });
+    }
+};
+__decorate([
+    hook('ready'),
+    watch('state.values.align')
+], UIImagePositionTab.prototype, "onStateAlignChange", null);
+__decorate([
+    watch('align:change')
+], UIImagePositionTab.prototype, "onChangeAlign", null);
+__decorate([
+    hook('ready'),
+    watch('state.values.borderRadius')
+], UIImagePositionTab.prototype, "onStateValuesBorderRadiusChange", null);
+__decorate([
+    watch('borderRadius:change')
+], UIImagePositionTab.prototype, "onChangeBorderRadius", null);
+__decorate([
+    hook('ready'),
+    watch('state.values.id')
+], UIImagePositionTab.prototype, "onStateValuesIdChange", null);
+__decorate([
+    watch('id:change')
+], UIImagePositionTab.prototype, "onChangeId", null);
+__decorate([
+    hook('ready'),
+    watch('state.values.style')
+], UIImagePositionTab.prototype, "onStateValuesStyleChange", null);
+__decorate([
+    watch('style:change')
+], UIImagePositionTab.prototype, "onChangeStyle", null);
+__decorate([
+    hook('ready'),
+    watch('state.values.classes')
+], UIImagePositionTab.prototype, "onStateValuesClassesChange", null);
+__decorate([
+    watch('classes:change')
+], UIImagePositionTab.prototype, "onChangClasses", null);
+__decorate([
+    watch('lockMargin:click')
+], UIImagePositionTab.prototype, "onLockMarginClick", null);
+__decorate([
+    hook('ready'),
+    watch('state.marginIsLocked')
+], UIImagePositionTab.prototype, "onChangeMarginIsLocked", null);
+__decorate([
+    hook('ready'),
+    watch([
+        'state.values.marginTop',
+        'state.values.marginRight',
+        'state.values.marginBottom',
+        'state.values.marginLeft'
+    ])
+], UIImagePositionTab.prototype, "onStateValuesMarginChange", null);
+__decorate([
+    watch([
+        'marginTop:change',
+        'marginRight:change',
+        'marginBottom:change',
+        'marginLeft:change'
+    ])
+], UIImagePositionTab.prototype, "onChangeMargin", null);
+__decorate([
+    hook('ready')
+], UIImagePositionTab.prototype, "hideFieldByOptions", null);
+UIImagePositionTab = __decorate([
+    component
+], UIImagePositionTab);
+export { UIImagePositionTab };