package.dist.vscode-form-container.vscode-form-container.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of elements Show documentation
Webcomponents for creating Visual Studio Code extensions
The newest version!
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 } from 'lit';
import { customElement, property, query, queryAssignedElements, } from 'lit/decorators.js';
import { VscElement } from '../includes/VscElement.js';
import styles from './vscode-form-container.styles.js';
var FormGroupLayout;
(function (FormGroupLayout) {
    FormGroupLayout["HORIZONTAL"] = "horizontal";
    FormGroupLayout["VERTICAL"] = "vertical";
})(FormGroupLayout || (FormGroupLayout = {}));
const isTextInput = (el) => {
    return ['vscode-textfield', 'vscode-textarea'].includes(el.tagName.toLocaleLowerCase());
};
const isSingleSelect = (el) => {
    return el.tagName.toLocaleLowerCase() === 'vscode-single-select';
};
const isMultiSelect = (el) => {
    return el.tagName.toLocaleLowerCase() === 'vscode-multi-select';
};
const isCheckbox = (el) => {
    return el.tagName.toLocaleLowerCase() === 'vscode-checkbox';
};
const isRadio = (el) => {
    return el.tagName.toLocaleLowerCase() === 'vscode-radio';
};
let VscodeFormContainer = class VscodeFormContainer extends VscElement {
    constructor() {
        super(...arguments);
        this.breakpoint = 490;
        this._responsive = false;
        this._firstUpdateComplete = false;
        this._resizeObserverCallbackBound = this._resizeObserverCallback.bind(this);
    }
    set responsive(isResponsive) {
        this._responsive = isResponsive;
        if (this._firstUpdateComplete) {
            if (isResponsive) {
                this._activateResponsiveLayout();
            }
            else {
                this._deactivateResizeObserver();
            }
        }
    }
    get responsive() {
        return this._responsive;
    }
    /** @deprecated - Use the native `` element instead. */
    get data() {
        return this._collectFormData();
    }
    _collectFormData() {
        const query = [
            'vscode-textfield',
            'vscode-textarea',
            'vscode-single-select',
            'vscode-multi-select',
            'vscode-checkbox',
            'vscode-radio',
        ].join(',');
        const vscFormWidgets = this.querySelectorAll(query);
        const data = {};
        vscFormWidgets.forEach((widget) => {
            if (!widget.hasAttribute('name')) {
                return;
            }
            const name = widget.getAttribute('name');
            if (!name) {
                return;
            }
            if (isCheckbox(widget) && widget.checked) {
                data[name] = Array.isArray(data[name])
                    ? [...data[name], widget.value]
                    : [widget.value];
            }
            else if (isMultiSelect(widget)) {
                data[name] = widget.value;
            }
            else if (isCheckbox(widget) && !widget.checked) {
                data[name] = Array.isArray(data[name]) ? data[name] : [];
            }
            else if ((isRadio(widget) && widget.checked) ||
                isTextInput(widget) ||
                isSingleSelect(widget)) {
                data[name] = widget.value;
            }
            else if (isRadio(widget) && !widget.checked) {
                data[name] = data[name] ? data[name] : '';
            }
        });
        return data;
    }
    _toggleCompactLayout(layout) {
        this._assignedFormGroups.forEach((group) => {
            if (!group.dataset.originalVariant) {
                group.dataset.originalVariant = group.variant;
            }
            const oVariant = group.dataset.originalVariant;
            if (layout === FormGroupLayout.VERTICAL && oVariant === 'horizontal') {
                group.variant = 'vertical';
            }
            else {
                group.variant = oVariant;
            }
            const checkboxOrRadioGroup = group.querySelectorAll('vscode-checkbox-group, vscode-radio-group');
            checkboxOrRadioGroup.forEach((widgetGroup) => {
                if (!widgetGroup.dataset.originalVariant) {
                    widgetGroup.dataset.originalVariant = widgetGroup.variant;
                }
                const originalVariant = widgetGroup.dataset.originalVariant;
                if (layout === FormGroupLayout.HORIZONTAL &&
                    originalVariant === FormGroupLayout.HORIZONTAL) {
                    widgetGroup.variant = 'horizontal';
                }
                else {
                    widgetGroup.variant = 'vertical';
                }
            });
        });
    }
    _resizeObserverCallback(entries) {
        let wrapperWidth = 0;
        for (const entry of entries) {
            wrapperWidth = entry.contentRect.width;
        }
        const nextLayout = wrapperWidth < this.breakpoint
            ? FormGroupLayout.VERTICAL
            : FormGroupLayout.HORIZONTAL;
        if (nextLayout !== this._currentFormGroupLayout) {
            this._toggleCompactLayout(nextLayout);
            this._currentFormGroupLayout = nextLayout;
        }
    }
    _activateResponsiveLayout() {
        this._resizeObserver = new ResizeObserver(this._resizeObserverCallbackBound);
        this._resizeObserver.observe(this._wrapperElement);
    }
    _deactivateResizeObserver() {
        this._resizeObserver?.disconnect();
        this._resizeObserver = null;
    }
    firstUpdated() {
        this._firstUpdateComplete = true;
        if (this._responsive) {
            this._activateResponsiveLayout();
        }
    }
    render() {
        return html `
      
        
      
    `;
    }
};
VscodeFormContainer.styles = styles;
__decorate([
    property({ type: Boolean, reflect: true })
], VscodeFormContainer.prototype, "responsive", null);
__decorate([
    property({ type: Number })
], VscodeFormContainer.prototype, "breakpoint", void 0);
__decorate([
    property({ type: Object })
], VscodeFormContainer.prototype, "data", null);
__decorate([
    query('.wrapper')
], VscodeFormContainer.prototype, "_wrapperElement", void 0);
__decorate([
    queryAssignedElements({ selector: 'vscode-form-group' })
], VscodeFormContainer.prototype, "_assignedFormGroups", void 0);
VscodeFormContainer = __decorate([
    customElement('vscode-form-container')
], VscodeFormContainer);
export { VscodeFormContainer };
//# sourceMappingURL=vscode-form-container.js.map