@codingame/monaco-vscode-api 1.76.0 → 1.76.1

package/dist/button.js

@@ -0,0 +1,325 @@
+import { E as Emitter } from './contextkey.js';
+import { n } from './polyfill.js';
+import { addDisposableListener, EventType, EventHelper, trackFocus, reset } from 'monaco-editor/esm/vs/base/browser/dom.js';
+import { renderLabelWithIcons } from 'monaco-editor/esm/vs/base/browser/ui/iconLabel/iconLabels.js';
+import { Disposable } from 'monaco-editor/esm/vs/base/common/lifecycle.js';
+import { Gesture, EventType as EventType$1 } from 'monaco-editor/esm/vs/base/browser/touch.js';
+import { ThemeIcon } from 'monaco-editor/esm/vs/base/common/themables.js';
+import { Action } from 'monaco-editor/esm/vs/base/common/actions.js';
+import { localize } from 'monaco-editor/esm/vs/nls.js';
+import { Codicon } from 'monaco-editor/esm/vs/base/common/codicons.js';
+import { StandardKeyboardEvent } from 'monaco-editor/esm/vs/base/browser/keyboardEvent.js';
+var css = ".monaco-text-button{align-items:center;border:1px solid var(--vscode-button-border,transparent);border-radius:2px;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;line-height:18px;padding:4px;text-align:center;width:100%}.monaco-text-button:focus{outline-offset:2px!important}.monaco-text-button:hover{text-decoration:none!important}.monaco-button.disabled,.monaco-button.disabled:focus{cursor:default;opacity:.4!important}.monaco-text-button .codicon{color:inherit!important;margin:0 .2em}.monaco-text-button.monaco-text-button-with-short-label{flex-direction:row;flex-wrap:wrap;height:28px;overflow:hidden;padding:0 4px}.monaco-text-button.monaco-text-button-with-short-label>.monaco-button-label{flex-basis:100%}.monaco-text-button.monaco-text-button-with-short-label>.monaco-button-label-short{flex-grow:1;overflow:hidden;width:0}.monaco-text-button.monaco-text-button-with-short-label>.monaco-button-label,.monaco-text-button.monaco-text-button-with-short-label>.monaco-button-label-short{align-items:center;display:flex;font-style:inherit;font-weight:400;justify-content:center;padding:4px 0}.monaco-button-dropdown{cursor:pointer;display:flex}.monaco-button-dropdown.disabled{cursor:default}.monaco-button-dropdown>.monaco-button:focus{outline-offset:-1px!important}.monaco-button-dropdown.disabled>.monaco-button-dropdown-separator,.monaco-button-dropdown.disabled>.monaco-button.disabled,.monaco-button-dropdown.disabled>.monaco-button.disabled:focus{opacity:.4!important}.monaco-button-dropdown>.monaco-button.monaco-text-button{border-right-width:0!important}.monaco-button-dropdown .monaco-button-dropdown-separator{cursor:default;padding:4px 0}.monaco-button-dropdown .monaco-button-dropdown-separator>div{height:100%;width:1px}.monaco-button-dropdown>.monaco-button.monaco-dropdown-button{border:1px solid var(--vscode-button-border,transparent);border-left-width:0!important;border-radius:0 2px 2px 0}.monaco-button-dropdown>.monaco-button.monaco-text-button{border-radius:2px 0 0 2px}.monaco-description-button{align-items:center;display:flex;flex-direction:column;margin:4px 5px}.monaco-description-button .monaco-button-description{font-size:11px;font-style:italic;padding:4px 20px}.monaco-description-button .monaco-button-description,.monaco-description-button .monaco-button-label{align-items:center;display:flex;justify-content:center}.monaco-description-button .monaco-button-description>.codicon,.monaco-description-button .monaco-button-label>.codicon{color:inherit!important;margin:0 .2em}";
+n(css,{});
+class Button extends Disposable {
+    get onDidClick() { return this._onDidClick.event; }
+    constructor(container, options) {
+        super();
+        this._onDidClick = this._register(( new Emitter()));
+        this.options = options;
+        this._element = document.createElement('a');
+        this._element.classList.add('monaco-button');
+        this._element.tabIndex = 0;
+        this._element.setAttribute('role', 'button');
+        const background = options.secondary ? options.buttonSecondaryBackground : options.buttonBackground;
+        const foreground = options.secondary ? options.buttonSecondaryForeground : options.buttonForeground;
+        this._element.style.color = foreground || '';
+        this._element.style.backgroundColor = background || '';
+        if (options.supportShortLabel) {
+            this._labelShortElement = document.createElement('div');
+            this._labelShortElement.classList.add('monaco-button-label-short');
+            this._element.appendChild(this._labelShortElement);
+            this._labelElement = document.createElement('div');
+            this._labelElement.classList.add('monaco-button-label');
+            this._element.appendChild(this._labelElement);
+            this._element.classList.add('monaco-text-button-with-short-label');
+        }
+        container.appendChild(this._element);
+        this._register(Gesture.addTarget(this._element));
+        [EventType.CLICK, EventType$1.Tap].forEach(eventType => {
+            this._register(addDisposableListener(this._element, eventType, e => {
+                if (!this.enabled) {
+                    EventHelper.stop(e);
+                    return;
+                }
+                this._onDidClick.fire(e);
+            }));
+        });
+        this._register(addDisposableListener(this._element, EventType.KEY_DOWN, e => {
+            const event = ( new StandardKeyboardEvent(e));
+            let eventHandled = false;
+            if (this.enabled && (event.equals(3 ) || event.equals(10 ))) {
+                this._onDidClick.fire(e);
+                eventHandled = true;
+            }
+            else if (event.equals(9 )) {
+                this._element.blur();
+                eventHandled = true;
+            }
+            if (eventHandled) {
+                EventHelper.stop(event, true);
+            }
+        }));
+        this._register(addDisposableListener(this._element, EventType.MOUSE_OVER, e => {
+            if (!this._element.classList.contains('disabled')) {
+                this.updateBackground(true);
+            }
+        }));
+        this._register(addDisposableListener(this._element, EventType.MOUSE_OUT, e => {
+            this.updateBackground(false);
+        }));
+        this.focusTracker = this._register(trackFocus(this._element));
+        this._register(this.focusTracker.onDidFocus(() => { if (this.enabled) {
+            this.updateBackground(true);
+        } }));
+        this._register(this.focusTracker.onDidBlur(() => { if (this.enabled) {
+            this.updateBackground(false);
+        } }));
+    }
+    getContentElements(content) {
+        const elements = [];
+        for (let segment of renderLabelWithIcons(content)) {
+            if (typeof (segment) === 'string') {
+                segment = segment.trim();
+                if (segment === '') {
+                    continue;
+                }
+                const node = document.createElement('span');
+                node.textContent = segment;
+                elements.push(node);
+            }
+            else {
+                elements.push(segment);
+            }
+        }
+        return elements;
+    }
+    updateBackground(hover) {
+        let background;
+        if (this.options.secondary) {
+            background = hover ? this.options.buttonSecondaryHoverBackground : this.options.buttonSecondaryBackground;
+        }
+        else {
+            background = hover ? this.options.buttonHoverBackground : this.options.buttonBackground;
+        }
+        if (background) {
+            this._element.style.backgroundColor = background;
+        }
+    }
+    get element() {
+        return this._element;
+    }
+    set label(value) {
+        this._element.classList.add('monaco-text-button');
+        const labelElement = this.options.supportShortLabel ? this._labelElement : this._element;
+        if (this.options.supportIcons) {
+            reset(labelElement, ...this.getContentElements(value));
+        }
+        else {
+            labelElement.textContent = value;
+        }
+        if (typeof this.options.title === 'string') {
+            this._element.title = this.options.title;
+        }
+        else if (this.options.title) {
+            this._element.title = value;
+        }
+    }
+    set labelShort(value) {
+        if (!this.options.supportShortLabel || !this._labelShortElement) {
+            return;
+        }
+        if (this.options.supportIcons) {
+            reset(this._labelShortElement, ...this.getContentElements(value));
+        }
+        else {
+            this._labelShortElement.textContent = value;
+        }
+    }
+    set icon(icon) {
+        this._element.classList.add(...ThemeIcon.asClassNameArray(icon));
+    }
+    set enabled(value) {
+        if (value) {
+            this._element.classList.remove('disabled');
+            this._element.setAttribute('aria-disabled', String(false));
+            this._element.tabIndex = 0;
+        }
+        else {
+            this._element.classList.add('disabled');
+            this._element.setAttribute('aria-disabled', String(true));
+        }
+    }
+    get enabled() {
+        return !this._element.classList.contains('disabled');
+    }
+    focus() {
+        this._element.focus();
+    }
+    hasFocus() {
+        return this._element === document.activeElement;
+    }
+}
+class ButtonWithDropdown extends Disposable {
+    constructor(container, options) {
+        super();
+        this._onDidClick = this._register(( new Emitter()));
+        this.onDidClick = this._onDidClick.event;
+        this.element = document.createElement('div');
+        this.element.classList.add('monaco-button-dropdown');
+        container.appendChild(this.element);
+        this.button = this._register(( new Button(this.element, options)));
+        this._register(this.button.onDidClick(e => this._onDidClick.fire(e)));
+        this.action = this._register(( new Action(
+            'primaryAction',
+            this.button.label,
+            undefined,
+            true,
+            async () => this._onDidClick.fire(undefined)
+        )));
+        this.separatorContainer = document.createElement('div');
+        this.separatorContainer.classList.add('monaco-button-dropdown-separator');
+        this.separator = document.createElement('div');
+        this.separatorContainer.appendChild(this.separator);
+        this.element.appendChild(this.separatorContainer);
+        const border = options.buttonBorder;
+        if (border) {
+            this.separatorContainer.style.borderTop = '1px solid ' + border;
+            this.separatorContainer.style.borderBottom = '1px solid ' + border;
+        }
+        const buttonBackground = options.secondary ? options.buttonSecondaryBackground : options.buttonBackground;
+        this.separatorContainer.style.backgroundColor = buttonBackground ?? '';
+        this.separator.style.backgroundColor = options.buttonSeparator ?? '';
+        this.dropdownButton = this._register(( new Button(this.element, { ...options, title: false, supportIcons: true })));
+        this.dropdownButton.element.title = ( localize("button dropdown more actions", 'More Actions...'));
+        this.dropdownButton.element.setAttribute('aria-haspopup', 'true');
+        this.dropdownButton.element.setAttribute('aria-expanded', 'false');
+        this.dropdownButton.element.classList.add('monaco-dropdown-button');
+        this.dropdownButton.icon = Codicon.dropDownButton;
+        this._register(this.dropdownButton.onDidClick(e => {
+            options.contextMenuProvider.showContextMenu({
+                getAnchor: () => this.dropdownButton.element,
+                getActions: () => options.addPrimaryActionToDropdown === false ? [...options.actions] : [this.action, ...options.actions],
+                actionRunner: options.actionRunner,
+                onHide: () => this.dropdownButton.element.setAttribute('aria-expanded', 'false')
+            });
+            this.dropdownButton.element.setAttribute('aria-expanded', 'true');
+        }));
+    }
+    set label(value) {
+        this.button.label = value;
+        this.action.label = value;
+    }
+    set icon(icon) {
+        this.button.icon = icon;
+    }
+    set enabled(enabled) {
+        this.button.enabled = enabled;
+        this.dropdownButton.enabled = enabled;
+        this.element.classList.toggle('disabled', !enabled);
+    }
+    get enabled() {
+        return this.button.enabled;
+    }
+    focus() {
+        this.button.focus();
+    }
+    hasFocus() {
+        return this.button.hasFocus() || this.dropdownButton.hasFocus();
+    }
+}
+class ButtonWithDescription {
+    constructor(container, options) {
+        this.options = options;
+        this._element = document.createElement('div');
+        this._element.classList.add('monaco-description-button');
+        this._button = ( new Button(this._element, options));
+        this._descriptionElement = document.createElement('div');
+        this._descriptionElement.classList.add('monaco-button-description');
+        this._element.appendChild(this._descriptionElement);
+        container.appendChild(this._element);
+    }
+    get onDidClick() {
+        return this._button.onDidClick;
+    }
+    get element() {
+        return this._element;
+    }
+    set label(value) {
+        this._button.label = value;
+    }
+    set icon(icon) {
+        this._button.icon = icon;
+    }
+    get enabled() {
+        return this._button.enabled;
+    }
+    set enabled(enabled) {
+        this._button.enabled = enabled;
+    }
+    focus() {
+        this._button.focus();
+    }
+    hasFocus() {
+        return this._button.hasFocus();
+    }
+    dispose() {
+        this._button.dispose();
+    }
+    set description(value) {
+        if (this.options.supportIcons) {
+            reset(this._descriptionElement, ...renderLabelWithIcons(value));
+        }
+        else {
+            this._descriptionElement.textContent = value;
+        }
+    }
+}
+class ButtonBar extends Disposable {
+    constructor(container) {
+        super();
+        this.container = container;
+        this._buttons = [];
+    }
+    get buttons() {
+        return this._buttons;
+    }
+    addButton(options) {
+        const button = this._register(( new Button(this.container, options)));
+        this.pushButton(button);
+        return button;
+    }
+    addButtonWithDescription(options) {
+        const button = this._register(( new ButtonWithDescription(this.container, options)));
+        this.pushButton(button);
+        return button;
+    }
+    addButtonWithDropdown(options) {
+        const button = this._register(( new ButtonWithDropdown(this.container, options)));
+        this.pushButton(button);
+        return button;
+    }
+    pushButton(button) {
+        this._buttons.push(button);
+        const index = this._buttons.length - 1;
+        this._register(addDisposableListener(button.element, EventType.KEY_DOWN, e => {
+            const event = ( new StandardKeyboardEvent(e));
+            let eventHandled = true;
+            let buttonIndexToFocus;
+            if (event.equals(15 )) {
+                buttonIndexToFocus = index > 0 ? index - 1 : this._buttons.length - 1;
+            }
+            else if (event.equals(17 )) {
+                buttonIndexToFocus = index === this._buttons.length - 1 ? 0 : index + 1;
+            }
+            else {
+                eventHandled = false;
+            }
+            if (eventHandled && typeof buttonIndexToFocus === 'number') {
+                this._buttons[buttonIndexToFocus].focus();
+                EventHelper.stop(e, true);
+            }
+        }));
+    }
+}
+export { ButtonBar as B, ButtonWithDescription as a };