monaco-editor11 1.1.1 → 1.1.2

package/dist/workers/theme.js

@@ -0,0 +1,110 @@
+import { BugIndicatingError } from '../../../../../../base/common/errors.js';
+import '../../../../../../base/common/observableInternal/index.js';
+import { localize } from '../../../../../../nls.js';
+import { registerColor, transparent, darken } from '../../../../../../platform/theme/common/colorUtils.js';
+import '../../../../../../platform/theme/common/colors/baseColors.js';
+import '../../../../../../platform/theme/common/colors/chartsColors.js';
+import { diffRemoved, diffInserted, diffInsertedLine, editorBackground } from '../../../../../../platform/theme/common/colors/editorColors.js';
+import { buttonForeground, buttonBackground, buttonSecondaryForeground, buttonSecondaryBackground } from '../../../../../../platform/theme/common/colors/inputColors.js';
+import '../../../../../../platform/theme/common/colors/listColors.js';
+import '../../../../../../platform/theme/common/colors/menuColors.js';
+import '../../../../../../platform/theme/common/colors/minimapColors.js';
+import '../../../../../../platform/theme/common/colors/miscColors.js';
+import '../../../../../../platform/theme/common/colors/quickpickColors.js';
+import '../../../../../../platform/theme/common/colors/searchColors.js';
+import { InlineEditTabAction } from './inlineEditsViewInterface.js';
+import { observableFromEventOpts } from '../../../../../../base/common/observableInternal/observables/observableFromEvent.js';
+
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+const originalBackgroundColor = registerColor('inlineEdit.originalBackground', transparent(diffRemoved, 0.2), localize(1220, 'Background color for the original text in inline edits.'), true);
+const modifiedBackgroundColor = registerColor('inlineEdit.modifiedBackground', transparent(diffInserted, 0.3), localize(1221, 'Background color for the modified text in inline edits.'), true);
+registerColor('inlineEdit.originalChangedLineBackground', transparent(diffRemoved, 0.8), localize(1222, 'Background color for the changed lines in the original text of inline edits.'), true);
+const originalChangedTextOverlayColor = registerColor('inlineEdit.originalChangedTextBackground', transparent(diffRemoved, 0.8), localize(1223, 'Overlay color for the changed text in the original text of inline edits.'), true);
+const modifiedChangedLineBackgroundColor = registerColor('inlineEdit.modifiedChangedLineBackground', {
+    light: transparent(diffInsertedLine, 0.7),
+    dark: transparent(diffInsertedLine, 0.7),
+    hcDark: diffInsertedLine,
+    hcLight: diffInsertedLine
+}, localize(1224, 'Background color for the changed lines in the modified text of inline edits.'), true);
+const modifiedChangedTextOverlayColor = registerColor('inlineEdit.modifiedChangedTextBackground', transparent(diffInserted, 0.7), localize(1225, 'Overlay color for the changed text in the modified text of inline edits.'), true);
+// ------- GUTTER INDICATOR -------
+const inlineEditIndicatorPrimaryForeground = registerColor('inlineEdit.gutterIndicator.primaryForeground', buttonForeground, localize(1226, 'Foreground color for the primary inline edit gutter indicator.'));
+const inlineEditIndicatorPrimaryBorder = registerColor('inlineEdit.gutterIndicator.primaryBorder', buttonBackground, localize(1227, 'Border color for the primary inline edit gutter indicator.'));
+const inlineEditIndicatorPrimaryBackground = registerColor('inlineEdit.gutterIndicator.primaryBackground', {
+    light: transparent(inlineEditIndicatorPrimaryBorder, 0.5),
+    dark: transparent(inlineEditIndicatorPrimaryBorder, 0.4),
+    hcDark: transparent(inlineEditIndicatorPrimaryBorder, 0.4),
+    hcLight: transparent(inlineEditIndicatorPrimaryBorder, 0.5),
+}, localize(1228, 'Background color for the primary inline edit gutter indicator.'));
+const inlineEditIndicatorSecondaryForeground = registerColor('inlineEdit.gutterIndicator.secondaryForeground', buttonSecondaryForeground, localize(1229, 'Foreground color for the secondary inline edit gutter indicator.'));
+const inlineEditIndicatorSecondaryBorder = registerColor('inlineEdit.gutterIndicator.secondaryBorder', buttonSecondaryBackground, localize(1230, 'Border color for the secondary inline edit gutter indicator.'));
+const inlineEditIndicatorSecondaryBackground = registerColor('inlineEdit.gutterIndicator.secondaryBackground', inlineEditIndicatorSecondaryBorder, localize(1231, 'Background color for the secondary inline edit gutter indicator.'));
+const inlineEditIndicatorsuccessfulForeground = registerColor('inlineEdit.gutterIndicator.successfulForeground', buttonForeground, localize(1232, 'Foreground color for the successful inline edit gutter indicator.'));
+const inlineEditIndicatorsuccessfulBorder = registerColor('inlineEdit.gutterIndicator.successfulBorder', buttonBackground, localize(1233, 'Border color for the successful inline edit gutter indicator.'));
+const inlineEditIndicatorsuccessfulBackground = registerColor('inlineEdit.gutterIndicator.successfulBackground', inlineEditIndicatorsuccessfulBorder, localize(1234, 'Background color for the successful inline edit gutter indicator.'));
+const inlineEditIndicatorBackground = registerColor('inlineEdit.gutterIndicator.background', {
+    hcDark: transparent('tab.inactiveBackground', 0.5),
+    hcLight: transparent('tab.inactiveBackground', 0.5),
+    dark: transparent('tab.inactiveBackground', 0.5),
+    light: '#5f5f5f18',
+}, localize(1235, 'Background color for the inline edit gutter indicator.'));
+// ------- BORDER COLORS -------
+const originalBorder = registerColor('inlineEdit.originalBorder', {
+    light: diffRemoved,
+    dark: diffRemoved,
+    hcDark: diffRemoved,
+    hcLight: diffRemoved
+}, localize(1236, 'Border color for the original text in inline edits.'));
+const modifiedBorder = registerColor('inlineEdit.modifiedBorder', {
+    light: darken(diffInserted, 0.6),
+    dark: diffInserted,
+    hcDark: diffInserted,
+    hcLight: diffInserted
+}, localize(1237, 'Border color for the modified text in inline edits.'));
+const tabWillAcceptModifiedBorder = registerColor('inlineEdit.tabWillAcceptModifiedBorder', {
+    light: darken(modifiedBorder, 0),
+    dark: darken(modifiedBorder, 0),
+    hcDark: darken(modifiedBorder, 0),
+    hcLight: darken(modifiedBorder, 0)
+}, localize(1238, 'Modified border color for the inline edits widget when tab will accept it.'));
+const tabWillAcceptOriginalBorder = registerColor('inlineEdit.tabWillAcceptOriginalBorder', {
+    light: darken(originalBorder, 0),
+    dark: darken(originalBorder, 0),
+    hcDark: darken(originalBorder, 0),
+    hcLight: darken(originalBorder, 0)
+}, localize(1239, 'Original border color for the inline edits widget over the original text when tab will accept it.'));
+function getModifiedBorderColor(tabAction) {
+    return tabAction.map(a => a === InlineEditTabAction.Accept ? tabWillAcceptModifiedBorder : modifiedBorder);
+}
+function getOriginalBorderColor(tabAction) {
+    return tabAction.map(a => a === InlineEditTabAction.Accept ? tabWillAcceptOriginalBorder : originalBorder);
+}
+function getEditorBlendedColor(colorIdentifier, themeService) {
+    let color;
+    if (typeof colorIdentifier === 'string') {
+        color = observeColor(colorIdentifier, themeService);
+    }
+    else {
+        color = colorIdentifier.map((identifier, reader) => observeColor(identifier, themeService).read(reader));
+    }
+    const backgroundColor = observeColor(editorBackground, themeService);
+    return color.map((c, reader) => /** @description makeOpaque */ c.makeOpaque(backgroundColor.read(reader)));
+}
+function observeColor(colorIdentifier, themeService) {
+    return observableFromEventOpts({
+        owner: { observeColor: colorIdentifier },
+        equalsFn: (a, b) => a.equals(b),
+        debugName: () => `observeColor(${colorIdentifier})`
+    }, themeService.onDidColorThemeChange, () => {
+        const color = themeService.getColorTheme().getColor(colorIdentifier);
+        if (!color) {
+            throw new BugIndicatingError(`Missing color: ${colorIdentifier}`);
+        }
+        return color;
+    });
+}
+
+export { getEditorBlendedColor, getModifiedBorderColor, getOriginalBorderColor, inlineEditIndicatorBackground, inlineEditIndicatorPrimaryBackground, inlineEditIndicatorPrimaryBorder, inlineEditIndicatorPrimaryForeground, inlineEditIndicatorSecondaryBackground, inlineEditIndicatorSecondaryBorder, inlineEditIndicatorSecondaryForeground, inlineEditIndicatorsuccessfulBackground, inlineEditIndicatorsuccessfulBorder, inlineEditIndicatorsuccessfulForeground, modifiedBackgroundColor, modifiedChangedLineBackgroundColor, modifiedChangedTextOverlayColor, observeColor, originalBackgroundColor, originalChangedTextOverlayColor };

package/dist/workers/themeService.js

@@ -0,0 +1,67 @@
+import { Emitter } from '../../../base/common/event.js';
+import { Disposable, toDisposable } from '../../../base/common/lifecycle.js';
+import { createDecorator } from '../../instantiation/common/instantiation.js';
+import { Registry } from '../../registry/common/platform.js';
+import { ThemeTypeSelector, ColorScheme } from './theme.js';
+
+const IThemeService = createDecorator('themeService');
+function themeColorFromId(id) {
+    return { id };
+}
+function getThemeTypeSelector(type) {
+    switch (type) {
+        case ColorScheme.DARK: return ThemeTypeSelector.VS_DARK;
+        case ColorScheme.HIGH_CONTRAST_DARK: return ThemeTypeSelector.HC_BLACK;
+        case ColorScheme.HIGH_CONTRAST_LIGHT: return ThemeTypeSelector.HC_LIGHT;
+        default: return ThemeTypeSelector.VS;
+    }
+}
+// static theming participant
+const Extensions = {
+    ThemingContribution: 'base.contributions.theming'
+};
+class ThemingRegistry extends Disposable {
+    constructor() {
+        super();
+        this.themingParticipants = [];
+        this.themingParticipants = [];
+        this.onThemingParticipantAddedEmitter = this._register(new Emitter());
+    }
+    onColorThemeChange(participant) {
+        this.themingParticipants.push(participant);
+        this.onThemingParticipantAddedEmitter.fire(participant);
+        return toDisposable(() => {
+            const idx = this.themingParticipants.indexOf(participant);
+            this.themingParticipants.splice(idx, 1);
+        });
+    }
+    getThemingParticipants() {
+        return this.themingParticipants;
+    }
+}
+const themingRegistry = new ThemingRegistry();
+Registry.add(Extensions.ThemingContribution, themingRegistry);
+function registerThemingParticipant(participant) {
+    return themingRegistry.onColorThemeChange(participant);
+}
+/**
+ * Utility base class for all themable components.
+ */
+class Themable extends Disposable {
+    constructor(themeService) {
+        super();
+        this.themeService = themeService;
+        this.theme = themeService.getColorTheme();
+        // Hook up to theme changes
+        this._register(this.themeService.onDidColorThemeChange(theme => this.onThemeChange(theme)));
+    }
+    onThemeChange(theme) {
+        this.theme = theme;
+        this.updateStyles();
+    }
+    updateStyles() {
+        // Subclasses to override
+    }
+}
+
+export { Extensions, IThemeService, Themable, getThemeTypeSelector, registerThemingParticipant, themeColorFromId };

package/dist/workers/themes.js

@@ -0,0 +1,242 @@
+import { editorActiveIndentGuide1, editorIndentGuide1 } from '../../common/core/editorColorRegistry.js';
+import '../../../platform/theme/common/colorUtils.js';
+import '../../../platform/theme/common/colors/baseColors.js';
+import '../../../platform/theme/common/colors/chartsColors.js';
+import { editorForeground, editorBackground, editorSelectionHighlight, editorInactiveSelection } from '../../../platform/theme/common/colors/editorColors.js';
+import '../../../platform/theme/common/colors/inputColors.js';
+import '../../../platform/theme/common/colors/listColors.js';
+import '../../../platform/theme/common/colors/menuColors.js';
+import '../../../platform/theme/common/colors/minimapColors.js';
+import '../../../platform/theme/common/colors/miscColors.js';
+import '../../../platform/theme/common/colors/quickpickColors.js';
+import '../../../platform/theme/common/colors/searchColors.js';
+
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+/* -------------------------------- Begin vs theme -------------------------------- */
+const vs = {
+    base: 'vs',
+    inherit: false,
+    rules: [
+        { token: '', foreground: '000000', background: 'fffffe' },
+        { token: 'invalid', foreground: 'cd3131' },
+        { token: 'emphasis', fontStyle: 'italic' },
+        { token: 'strong', fontStyle: 'bold' },
+        { token: 'variable', foreground: '001188' },
+        { token: 'variable.predefined', foreground: '4864AA' },
+        { token: 'constant', foreground: 'dd0000' },
+        { token: 'comment', foreground: '008000' },
+        { token: 'number', foreground: '098658' },
+        { token: 'number.hex', foreground: '3030c0' },
+        { token: 'regexp', foreground: '800000' },
+        { token: 'annotation', foreground: '808080' },
+        { token: 'type', foreground: '008080' },
+        { token: 'delimiter', foreground: '000000' },
+        { token: 'delimiter.html', foreground: '383838' },
+        { token: 'delimiter.xml', foreground: '0000FF' },
+        { token: 'tag', foreground: '800000' },
+        { token: 'tag.id.pug', foreground: '4F76AC' },
+        { token: 'tag.class.pug', foreground: '4F76AC' },
+        { token: 'meta.scss', foreground: '800000' },
+        { token: 'metatag', foreground: 'e00000' },
+        { token: 'metatag.content.html', foreground: 'FF0000' },
+        { token: 'metatag.html', foreground: '808080' },
+        { token: 'metatag.xml', foreground: '808080' },
+        { token: 'metatag.php', fontStyle: 'bold' },
+        { token: 'key', foreground: '863B00' },
+        { token: 'string.key.json', foreground: 'A31515' },
+        { token: 'string.value.json', foreground: '0451A5' },
+        { token: 'attribute.name', foreground: 'FF0000' },
+        { token: 'attribute.value', foreground: '0451A5' },
+        { token: 'attribute.value.number', foreground: '098658' },
+        { token: 'attribute.value.unit', foreground: '098658' },
+        { token: 'attribute.value.html', foreground: '0000FF' },
+        { token: 'attribute.value.xml', foreground: '0000FF' },
+        { token: 'string', foreground: 'A31515' },
+        { token: 'string.html', foreground: '0000FF' },
+        { token: 'string.sql', foreground: 'FF0000' },
+        { token: 'string.yaml', foreground: '0451A5' },
+        { token: 'keyword', foreground: '0000FF' },
+        { token: 'keyword.json', foreground: '0451A5' },
+        { token: 'keyword.flow', foreground: 'AF00DB' },
+        { token: 'keyword.flow.scss', foreground: '0000FF' },
+        { token: 'operator.scss', foreground: '666666' },
+        { token: 'operator.sql', foreground: '778899' },
+        { token: 'operator.swift', foreground: '666666' },
+        { token: 'predefined.sql', foreground: 'C700C7' },
+    ],
+    colors: {
+        [editorBackground]: '#FFFFFE',
+        [editorForeground]: '#000000',
+        [editorInactiveSelection]: '#E5EBF1',
+        [editorIndentGuide1]: '#D3D3D3',
+        [editorActiveIndentGuide1]: '#939393',
+        [editorSelectionHighlight]: '#ADD6FF4D'
+    }
+};
+/* -------------------------------- End vs theme -------------------------------- */
+/* -------------------------------- Begin vs-dark theme -------------------------------- */
+const vs_dark = {
+    base: 'vs-dark',
+    inherit: false,
+    rules: [
+        { token: '', foreground: 'D4D4D4', background: '1E1E1E' },
+        { token: 'invalid', foreground: 'f44747' },
+        { token: 'emphasis', fontStyle: 'italic' },
+        { token: 'strong', fontStyle: 'bold' },
+        { token: 'variable', foreground: '74B0DF' },
+        { token: 'variable.predefined', foreground: '4864AA' },
+        { token: 'variable.parameter', foreground: '9CDCFE' },
+        { token: 'constant', foreground: '569CD6' },
+        { token: 'comment', foreground: '608B4E' },
+        { token: 'number', foreground: 'B5CEA8' },
+        { token: 'number.hex', foreground: '5BB498' },
+        { token: 'regexp', foreground: 'B46695' },
+        { token: 'annotation', foreground: 'cc6666' },
+        { token: 'type', foreground: '3DC9B0' },
+        { token: 'delimiter', foreground: 'DCDCDC' },
+        { token: 'delimiter.html', foreground: '808080' },
+        { token: 'delimiter.xml', foreground: '808080' },
+        { token: 'tag', foreground: '569CD6' },
+        { token: 'tag.id.pug', foreground: '4F76AC' },
+        { token: 'tag.class.pug', foreground: '4F76AC' },
+        { token: 'meta.scss', foreground: 'A79873' },
+        { token: 'meta.tag', foreground: 'CE9178' },
+        { token: 'metatag', foreground: 'DD6A6F' },
+        { token: 'metatag.content.html', foreground: '9CDCFE' },
+        { token: 'metatag.html', foreground: '569CD6' },
+        { token: 'metatag.xml', foreground: '569CD6' },
+        { token: 'metatag.php', fontStyle: 'bold' },
+        { token: 'key', foreground: '9CDCFE' },
+        { token: 'string.key.json', foreground: '9CDCFE' },
+        { token: 'string.value.json', foreground: 'CE9178' },
+        { token: 'attribute.name', foreground: '9CDCFE' },
+        { token: 'attribute.value', foreground: 'CE9178' },
+        { token: 'attribute.value.number.css', foreground: 'B5CEA8' },
+        { token: 'attribute.value.unit.css', foreground: 'B5CEA8' },
+        { token: 'attribute.value.hex.css', foreground: 'D4D4D4' },
+        { token: 'string', foreground: 'CE9178' },
+        { token: 'string.sql', foreground: 'FF0000' },
+        { token: 'keyword', foreground: '569CD6' },
+        { token: 'keyword.flow', foreground: 'C586C0' },
+        { token: 'keyword.json', foreground: 'CE9178' },
+        { token: 'keyword.flow.scss', foreground: '569CD6' },
+        { token: 'operator.scss', foreground: '909090' },
+        { token: 'operator.sql', foreground: '778899' },
+        { token: 'operator.swift', foreground: '909090' },
+        { token: 'predefined.sql', foreground: 'FF00FF' },
+    ],
+    colors: {
+        [editorBackground]: '#1E1E1E',
+        [editorForeground]: '#D4D4D4',
+        [editorInactiveSelection]: '#3A3D41',
+        [editorIndentGuide1]: '#404040',
+        [editorActiveIndentGuide1]: '#707070',
+        [editorSelectionHighlight]: '#ADD6FF26'
+    }
+};
+/* -------------------------------- End vs-dark theme -------------------------------- */
+/* -------------------------------- Begin hc-black theme -------------------------------- */
+const hc_black = {
+    base: 'hc-black',
+    inherit: false,
+    rules: [
+        { token: '', foreground: 'FFFFFF', background: '000000' },
+        { token: 'invalid', foreground: 'f44747' },
+        { token: 'emphasis', fontStyle: 'italic' },
+        { token: 'strong', fontStyle: 'bold' },
+        { token: 'variable', foreground: '1AEBFF' },
+        { token: 'variable.parameter', foreground: '9CDCFE' },
+        { token: 'constant', foreground: '569CD6' },
+        { token: 'comment', foreground: '608B4E' },
+        { token: 'number', foreground: 'FFFFFF' },
+        { token: 'regexp', foreground: 'C0C0C0' },
+        { token: 'annotation', foreground: '569CD6' },
+        { token: 'type', foreground: '3DC9B0' },
+        { token: 'delimiter', foreground: 'FFFF00' },
+        { token: 'delimiter.html', foreground: 'FFFF00' },
+        { token: 'tag', foreground: '569CD6' },
+        { token: 'tag.id.pug', foreground: '4F76AC' },
+        { token: 'tag.class.pug', foreground: '4F76AC' },
+        { token: 'meta', foreground: 'D4D4D4' },
+        { token: 'meta.tag', foreground: 'CE9178' },
+        { token: 'metatag', foreground: '569CD6' },
+        { token: 'metatag.content.html', foreground: '1AEBFF' },
+        { token: 'metatag.html', foreground: '569CD6' },
+        { token: 'metatag.xml', foreground: '569CD6' },
+        { token: 'metatag.php', fontStyle: 'bold' },
+        { token: 'key', foreground: '9CDCFE' },
+        { token: 'string.key', foreground: '9CDCFE' },
+        { token: 'string.value', foreground: 'CE9178' },
+        { token: 'attribute.name', foreground: '569CD6' },
+        { token: 'attribute.value', foreground: '3FF23F' },
+        { token: 'string', foreground: 'CE9178' },
+        { token: 'string.sql', foreground: 'FF0000' },
+        { token: 'keyword', foreground: '569CD6' },
+        { token: 'keyword.flow', foreground: 'C586C0' },
+        { token: 'operator.sql', foreground: '778899' },
+        { token: 'operator.swift', foreground: '909090' },
+        { token: 'predefined.sql', foreground: 'FF00FF' },
+    ],
+    colors: {
+        [editorBackground]: '#000000',
+        [editorForeground]: '#FFFFFF',
+        [editorIndentGuide1]: '#FFFFFF',
+        [editorActiveIndentGuide1]: '#FFFFFF',
+    }
+};
+/* -------------------------------- End hc-black theme -------------------------------- */
+/* -------------------------------- Begin hc-light theme -------------------------------- */
+const hc_light = {
+    base: 'hc-light',
+    inherit: false,
+    rules: [
+        { token: '', foreground: '292929', background: 'FFFFFF' },
+        { token: 'invalid', foreground: 'B5200D' },
+        { token: 'emphasis', fontStyle: 'italic' },
+        { token: 'strong', fontStyle: 'bold' },
+        { token: 'variable', foreground: '264F70' },
+        { token: 'variable.predefined', foreground: '4864AA' },
+        { token: 'constant', foreground: 'dd0000' },
+        { token: 'comment', foreground: '008000' },
+        { token: 'number', foreground: '098658' },
+        { token: 'number.hex', foreground: '3030c0' },
+        { token: 'regexp', foreground: '800000' },
+        { token: 'annotation', foreground: '808080' },
+        { token: 'type', foreground: '008080' },
+        { token: 'delimiter', foreground: '000000' },
+        { token: 'delimiter.html', foreground: '383838' },
+        { token: 'tag', foreground: '800000' },
+        { token: 'tag.id.pug', foreground: '4F76AC' },
+        { token: 'tag.class.pug', foreground: '4F76AC' },
+        { token: 'meta.scss', foreground: '800000' },
+        { token: 'metatag', foreground: 'e00000' },
+        { token: 'metatag.content.html', foreground: 'B5200D' },
+        { token: 'metatag.html', foreground: '808080' },
+        { token: 'metatag.xml', foreground: '808080' },
+        { token: 'metatag.php', fontStyle: 'bold' },
+        { token: 'key', foreground: '863B00' },
+        { token: 'string.key.json', foreground: 'A31515' },
+        { token: 'string.value.json', foreground: '0451A5' },
+        { token: 'attribute.name', foreground: '264F78' },
+        { token: 'attribute.value', foreground: '0451A5' },
+        { token: 'string', foreground: 'A31515' },
+        { token: 'string.sql', foreground: 'B5200D' },
+        { token: 'keyword', foreground: '0000FF' },
+        { token: 'keyword.flow', foreground: 'AF00DB' },
+        { token: 'operator.sql', foreground: '778899' },
+        { token: 'operator.swift', foreground: '666666' },
+        { token: 'predefined.sql', foreground: 'C700C7' },
+    ],
+    colors: {
+        [editorBackground]: '#FFFFFF',
+        [editorForeground]: '#292929',
+        [editorIndentGuide1]: '#292929',
+        [editorActiveIndentGuide1]: '#292929',
+    }
+};
+/* -------------------------------- End hc-light theme -------------------------------- */
+
+export { hc_black, hc_light, vs, vs_dark };

package/dist/workers/toggle.js

@@ -0,0 +1,242 @@
+import { Codicon } from '../../../common/codicons.js';
+import { Emitter } from '../../../common/event.js';
+import { ThemeIcon } from '../../../common/themables.js';
+import { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';
+import { Widget } from '../widget.js';
+import './toggle.css';
+
+const unthemedToggleStyles = {
+    inputActiveOptionBorder: '#007ACC00',
+    inputActiveOptionForeground: '#FFFFFF',
+    inputActiveOptionBackground: '#0E639C50'
+};
+class Toggle extends Widget {
+    get onChange() { return this._onChange.event; }
+    get onKeyDown() { return this._onKeyDown.event; }
+    constructor(opts) {
+        super();
+        this._onChange = this._register(new Emitter());
+        this._onKeyDown = this._register(new Emitter());
+        this._opts = opts;
+        this._title = this._opts.title;
+        this._checked = this._opts.isChecked;
+        const classes = ['monaco-custom-toggle'];
+        if (this._opts.icon) {
+            this._icon = this._opts.icon;
+            classes.push(...ThemeIcon.asClassNameArray(this._icon));
+        }
+        if (this._opts.actionClassName) {
+            classes.push(...this._opts.actionClassName.split(' '));
+        }
+        if (this._checked) {
+            classes.push('checked');
+        }
+        this.domNode = document.createElement('div');
+        this._register(getBaseLayerHoverDelegate().setupDelayedHover(this.domNode, () => ({
+            content: this._title,
+            style: 1 /* HoverStyle.Pointer */,
+        }), this._opts.hoverLifecycleOptions));
+        this.domNode.classList.add(...classes);
+        if (!this._opts.notFocusable) {
+            this.domNode.tabIndex = 0;
+        }
+        this.domNode.setAttribute('role', 'checkbox');
+        this.domNode.setAttribute('aria-checked', String(this._checked));
+        this.setTitle(this._opts.title);
+        this.applyStyles();
+        this.onclick(this.domNode, (ev) => {
+            if (this.enabled) {
+                this.checked = !this._checked;
+                this._onChange.fire(false);
+                ev.preventDefault();
+            }
+        });
+        this._register(this.ignoreGesture(this.domNode));
+        this.onkeydown(this.domNode, (keyboardEvent) => {
+            if (!this.enabled) {
+                return;
+            }
+            if (keyboardEvent.keyCode === 10 /* KeyCode.Space */ || keyboardEvent.keyCode === 3 /* KeyCode.Enter */) {
+                this.checked = !this._checked;
+                this._onChange.fire(true);
+                keyboardEvent.preventDefault();
+                keyboardEvent.stopPropagation();
+                return;
+            }
+            this._onKeyDown.fire(keyboardEvent);
+        });
+    }
+    get enabled() {
+        return this.domNode.getAttribute('aria-disabled') !== 'true';
+    }
+    focus() {
+        this.domNode.focus();
+    }
+    get checked() {
+        return this._checked;
+    }
+    set checked(newIsChecked) {
+        this._checked = newIsChecked;
+        this.domNode.setAttribute('aria-checked', String(this._checked));
+        this.domNode.classList.toggle('checked', this._checked);
+        this.applyStyles();
+    }
+    setIcon(icon) {
+        if (this._icon) {
+            this.domNode.classList.remove(...ThemeIcon.asClassNameArray(this._icon));
+        }
+        this._icon = icon;
+        if (this._icon) {
+            this.domNode.classList.add(...ThemeIcon.asClassNameArray(this._icon));
+        }
+    }
+    width() {
+        return 2 /*margin left*/ + 2 /*border*/ + 2 /*padding*/ + 16 /* icon width */;
+    }
+    applyStyles() {
+        if (this.domNode) {
+            this.domNode.style.borderColor = (this._checked && this._opts.inputActiveOptionBorder) || '';
+            this.domNode.style.color = (this._checked && this._opts.inputActiveOptionForeground) || 'inherit';
+            this.domNode.style.backgroundColor = (this._checked && this._opts.inputActiveOptionBackground) || '';
+        }
+    }
+    enable() {
+        this.domNode.setAttribute('aria-disabled', String(false));
+        this.domNode.classList.remove('disabled');
+    }
+    disable() {
+        this.domNode.setAttribute('aria-disabled', String(true));
+        this.domNode.classList.add('disabled');
+    }
+    setTitle(newTitle) {
+        this._title = newTitle;
+        this.domNode.setAttribute('aria-label', newTitle);
+    }
+    set visible(visible) {
+        this.domNode.style.display = visible ? '' : 'none';
+    }
+    get visible() {
+        return this.domNode.style.display !== 'none';
+    }
+}
+class BaseCheckbox extends Widget {
+    static { this.CLASS_NAME = 'monaco-checkbox'; }
+    constructor(checkbox, domNode, styles) {
+        super();
+        this.checkbox = checkbox;
+        this.domNode = domNode;
+        this.styles = styles;
+        this._onChange = this._register(new Emitter());
+        this.onChange = this._onChange.event;
+        this.applyStyles();
+    }
+    get enabled() {
+        return this.checkbox.enabled;
+    }
+    enable() {
+        this.checkbox.enable();
+        this.applyStyles(true);
+    }
+    disable() {
+        this.checkbox.disable();
+        this.applyStyles(false);
+    }
+    setTitle(newTitle) {
+        this.checkbox.setTitle(newTitle);
+    }
+    applyStyles(enabled = this.enabled) {
+        this.domNode.style.color = (enabled ? this.styles.checkboxForeground : this.styles.checkboxDisabledForeground) || '';
+        this.domNode.style.backgroundColor = (enabled ? this.styles.checkboxBackground : this.styles.checkboxDisabledBackground) || '';
+        this.domNode.style.borderColor = (enabled ? this.styles.checkboxBorder : this.styles.checkboxDisabledBackground) || '';
+        const size = this.styles.size || 18;
+        this.domNode.style.width =
+            this.domNode.style.height =
+                this.domNode.style.fontSize = `${size}px`;
+        this.domNode.style.fontSize = `${size - 2}px`;
+    }
+}
+class Checkbox extends BaseCheckbox {
+    constructor(title, isChecked, styles) {
+        const toggle = new Toggle({ title, isChecked, icon: Codicon.check, actionClassName: BaseCheckbox.CLASS_NAME, hoverLifecycleOptions: styles.hoverLifecycleOptions, ...unthemedToggleStyles });
+        super(toggle, toggle.domNode, styles);
+        this._register(toggle);
+        this._register(this.checkbox.onChange(keyboard => {
+            this.applyStyles();
+            this._onChange.fire(keyboard);
+        }));
+    }
+    get checked() {
+        return this.checkbox.checked;
+    }
+    set checked(newIsChecked) {
+        this.checkbox.checked = newIsChecked;
+        this.applyStyles();
+    }
+    applyStyles(enabled) {
+        if (this.checkbox.checked) {
+            this.checkbox.setIcon(Codicon.check);
+        }
+        else {
+            this.checkbox.setIcon(undefined);
+        }
+        super.applyStyles(enabled);
+    }
+}
+class TriStateCheckbox extends BaseCheckbox {
+    constructor(title, _state, styles) {
+        let icon;
+        switch (_state) {
+            case true:
+                icon = Codicon.check;
+                break;
+            case 'mixed':
+                icon = Codicon.dash;
+                break;
+            case false:
+                icon = undefined;
+                break;
+        }
+        const checkbox = new Toggle({
+            title,
+            isChecked: _state === true,
+            icon,
+            actionClassName: Checkbox.CLASS_NAME,
+            hoverLifecycleOptions: styles.hoverLifecycleOptions,
+            ...unthemedToggleStyles
+        });
+        super(checkbox, checkbox.domNode, styles);
+        this._state = _state;
+        this._register(checkbox);
+        this._register(this.checkbox.onChange(keyboard => {
+            this._state = this.checkbox.checked;
+            this.applyStyles();
+            this._onChange.fire(keyboard);
+        }));
+    }
+    get checked() {
+        return this._state;
+    }
+    set checked(newState) {
+        if (this._state !== newState) {
+            this._state = newState;
+            this.checkbox.checked = newState === true;
+            this.applyStyles();
+        }
+    }
+    applyStyles(enabled) {
+        switch (this._state) {
+            case true:
+                this.checkbox.setIcon(Codicon.check);
+                break;
+            case 'mixed':
+                this.checkbox.setIcon(Codicon.dash);
+                break;
+            case false:
+                this.checkbox.setIcon(undefined);
+                break;
+        }
+        super.applyStyles(enabled);
+    }
+}
+
+export { Checkbox, Toggle, TriStateCheckbox, unthemedToggleStyles };