@sap-ux/ui-components 1.0.0

package/dist/components/UIButton/UIIconButton.js

@@ -0,0 +1,106 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIIconButton = exports.UIIconButtonSizes = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@fluentui/react");
+const UIContextualMenu_1 = require("../UIContextualMenu");
+var UIIconButtonSizes;
+(function (UIIconButtonSizes) {
+    UIIconButtonSizes["Default"] = "Default";
+    UIIconButtonSizes["Wide"] = "Wide";
+})(UIIconButtonSizes = exports.UIIconButtonSizes || (exports.UIIconButtonSizes = {}));
+/**
+ * UIIconButton component.
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
+ *
+ * @exports
+ * @class UIIconButton
+ * @extends {React.Component<ButtonProps, {}>}
+ */
+class UIIconButton extends react_1.default.Component {
+    /**
+     * Initializes component properties.
+     * @param {ButtonProps} props
+     */
+    constructor(props) {
+        super(props);
+        this.setStyle = (props) => {
+            const sizeType = props.sizeType || UIIconButtonSizes.Default;
+            const width = sizeType === UIIconButtonSizes.Default ? 16 : 26;
+            return {
+                root: {
+                    minWidth: 'initial',
+                    height: 16,
+                    width: width,
+                    boxSizing: 'content-box',
+                    padding: 3,
+                    backgroundColor: 'transparent',
+                    borderRadius: 4,
+                    selectors: {
+                        // Focus through tab navigation
+                        '.ms-Fabric--isFocusVisible &:focus:after': {
+                            outline: '1px solid var(--vscode-focusBorder)'
+                        }
+                    }
+                },
+                rootDisabled: {
+                    backgroundColor: 'transparent',
+                    opacity: '0.4'
+                },
+                rootHasMenu: {
+                    width: width
+                },
+                rootHovered: {
+                    backgroundColor: this.getButtonInteractionBackgroundColor('--vscode-toolbar-hoverBackground'),
+                    outline: '1px dashed var(--vscode-contrastActiveBorder)'
+                },
+                rootPressed: {
+                    backgroundColor: this.getButtonInteractionBackgroundColor('--vscode-toolbar-activeBackground')
+                },
+                rootExpanded: {
+                    backgroundColor: this.getButtonInteractionBackgroundColor('--vscode-toolbar-hoverBackground'),
+                    width: width
+                },
+                rootExpandedHovered: { backgroundColor: 'transparent' },
+                flexContainer: {
+                    width: '100%',
+                    height: '100%'
+                },
+                icon: {
+                    height: 16,
+                    width: width,
+                    lineHeight: 16
+                },
+                iconHovered: {
+                    backgroundColor: 'transparent'
+                },
+                menuIconExpanded: {
+                    display: 'none'
+                },
+                menuIcon: {
+                    display: 'none'
+                }
+            };
+        };
+    }
+    /**
+     * Method which returns button interaction background with including fallback for old VSCode or BAS versions.
+     *
+     * @param {string} color First choise color.
+     * @returns {string} CSS value for background color with fallback.
+     */
+    getButtonInteractionBackgroundColor(color) {
+        return `var(${color}, var(--vscode-menubar-selectionBackground))`;
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        return react_1.default.createElement(react_2.IconButton, { ...this.props, styles: this.setStyle(this.props), menuAs: UIContextualMenu_1.UIContextualMenu });
+    }
+}
+exports.UIIconButton = UIIconButton;
+//# sourceMappingURL=UIIconButton.js.map

package/dist/components/UIButton/UIIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIIconButton.js","sourceRoot":"","sources":["../../../src/components/UIButton/UIIconButton.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,2CAA6C;AAE7C,0DAAuD;AAEvD,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IACzB,wCAAmB,CAAA;IACnB,kCAAa,CAAA;AACjB,CAAC,EAHW,iBAAiB,GAAjB,yBAAiB,KAAjB,yBAAiB,QAG5B;AAMD;;;;;;;GAOG;AACH,MAAa,YAAa,SAAQ,eAAK,CAAC,SAA0B;IAC9D;;;OAGG;IACH,YAAmB,KAAkB;QACjC,KAAK,CAAC,KAAK,CAAC,CAAC;QAaP,aAAQ,GAAG,CAAC,KAAkB,EAAiB,EAAE;YACvD,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,iBAAiB,CAAC,OAAO,CAAC;YAC7D,MAAM,KAAK,GAAG,QAAQ,KAAK,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAC/D,OAAO;gBACH,IAAI,EAAE;oBACF,QAAQ,EAAE,SAAS;oBACnB,MAAM,EAAE,EAAE;oBACV,KAAK,EAAE,KAAK;oBACZ,SAAS,EAAE,aAAa;oBACxB,OAAO,EAAE,CAAC;oBACV,eAAe,EAAE,aAAa;oBAC9B,YAAY,EAAE,CAAC;oBACf,SAAS,EAAE;wBACP,+BAA+B;wBAC/B,0CAA0C,EAAE;4BACxC,OAAO,EAAE,qCAAqC;yBACjD;qBACJ;iBACJ;gBACD,YAAY,EAAE;oBACV,eAAe,EAAE,aAAa;oBAC9B,OAAO,EAAE,KAAK;iBACjB;gBACD,WAAW,EAAE;oBACT,KAAK,EAAE,KAAK;iBACf;gBACD,WAAW,EAAE;oBACT,eAAe,EAAE,IAAI,CAAC,mCAAmC,CAAC,kCAAkC,CAAC;oBAC7F,OAAO,EAAE,+CAA+C;iBAC3D;gBACD,WAAW,EAAE;oBACT,eAAe,EAAE,IAAI,CAAC,mCAAmC,CAAC,mCAAmC,CAAC;iBACjG;gBACD,YAAY,EAAE;oBACV,eAAe,EAAE,IAAI,CAAC,mCAAmC,CAAC,kCAAkC,CAAC;oBAC7F,KAAK,EAAE,KAAK;iBACf;gBACD,mBAAmB,EAAE,EAAE,eAAe,EAAE,aAAa,EAAE;gBACvD,aAAa,EAAE;oBACX,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,MAAM;iBACjB;gBACD,IAAI,EAAE;oBACF,MAAM,EAAE,EAAE;oBACV,KAAK,EAAE,KAAK;oBACZ,UAAU,EAAE,EAAE;iBACjB;gBACD,WAAW,EAAE;oBACT,eAAe,EAAE,aAAa;iBACjC;gBACD,gBAAgB,EAAE;oBACd,OAAO,EAAE,MAAM;iBAClB;gBACD,QAAQ,EAAE;oBACN,OAAO,EAAE,MAAM;iBAClB;aACJ,CAAC;QACN,CAAC,CAAC;IArEF,CAAC;IAED;;;;;OAKG;IACK,mCAAmC,CAAC,KAAa;QACrD,OAAO,OAAO,KAAK,8CAA8C,CAAC;IACtE,CAAC;IA6DD;;OAEG;IACH,MAAM;QACF,OAAO,8BAAC,kBAAU,OAAK,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,mCAAgB,GAAI,CAAC;IACvG,CAAC;CACJ;AApFD,oCAoFC"}

package/dist/components/UIButton/UISplitButton.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import type { UIContextualMenuProps, UIContextualMenuItem } from '../UIContextualMenu';
+export interface UISplitButtonProps {
+    button: UIContextualMenuItem;
+    menuItems: UIContextualMenuItem[];
+    callback: (key: string) => void;
+    id?: string;
+    ariaLabel?: string;
+    ariaDescription?: string;
+    disabled?: boolean;
+}
+export interface UISplitButtonState {
+    menu: UIContextualMenuProps;
+}
+/**
+ * UISplitButton component
+ *
+ * @exports
+ * @class UISplitButton
+ * @extends {React.Component<UISplitButtonProps, UISplitButtonState>}
+ */
+export declare class UISplitButton extends React.Component<UISplitButtonProps, UISplitButtonState> {
+    id: string;
+    /**
+     * Initializes component properties.
+     * @param {UISplitButtonProps} props
+     */
+    constructor(props: UISplitButtonProps);
+    onClick: () => void;
+    onMenuItemClick: (ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined, item?: UIContextualMenuItem | undefined) => void;
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
+//# sourceMappingURL=UISplitButton.d.ts.map

package/dist/components/UIButton/UISplitButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UISplitButton.d.ts","sourceRoot":"","sources":["../../../src/components/UIButton/UISplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAIvF,MAAM,WAAW,kBAAkB;IAC/B,MAAM,EAAE,oBAAoB,CAAC;IAC7B,SAAS,EAAE,oBAAoB,EAAE,CAAC;IAClC,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IAC/B,IAAI,EAAE,qBAAqB,CAAC;CAC/B;AAED;;;;;;GAMG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;IACtF,EAAE,SAA+D;IACjE;;;OAGG;gBACgB,KAAK,EAAE,kBAAkB;IAarC,OAAO,QAAO,IAAI,CAEvB;IAEK,eAAe,8IAGnB,IAAI,CAIL;IAEF;;OAEG;IACH,MAAM,IAAI,GAAG,CAAC,OAAO;CAkBxB"}

package/dist/components/UIButton/UISplitButton.js

@@ -0,0 +1,67 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UISplitButton = void 0;
+const React = __importStar(require("react"));
+const UIDefaultButton_1 = require("./UIDefaultButton");
+const UIContextualMenu_1 = require("../UIContextualMenu");
+const Icons_1 = require("../Icons");
+const utilities_1 = require("../../utilities");
+/**
+ * UISplitButton component
+ *
+ * @exports
+ * @class UISplitButton
+ * @extends {React.Component<UISplitButtonProps, UISplitButtonState>}
+ */
+class UISplitButton extends React.Component {
+    /**
+     * Initializes component properties.
+     * @param {UISplitButtonProps} props
+     */
+    constructor(props) {
+        super(props);
+        this.id = this.props.id ? this.props.id : utilities_1.UIGetId('ui-split-button-');
+        this.onClick = () => {
+            this.props.callback(this.props.button.key);
+        };
+        this.onMenuItemClick = (ev, item) => {
+            if (item && item.key) {
+                this.props.callback(item.key);
+            }
+        };
+        this.state = {
+            menu: {
+                items: props.menuItems,
+                onItemClick: this.onMenuItemClick
+            }
+        };
+        this.onClick = this.onClick.bind(this);
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        return (React.createElement(UIDefaultButton_1.UIDefaultButton, { ariaLabel: this.props.ariaLabel, ariaDescription: this.props.ariaDescription, id: this.id, className: "ui-split-button", primary: true, split: true, onClick: this.onClick.bind(this), menuProps: this.state.menu, menuIconProps: { iconName: Icons_1.UiIcons.ArrowDown }, menuAs: UIContextualMenu_1.UIContextualMenu, disabled: this.props.disabled }, this.props.button.text));
+    }
+}
+exports.UISplitButton = UISplitButton;
+//# sourceMappingURL=UISplitButton.js.map

package/dist/components/UIButton/UISplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UISplitButton.js","sourceRoot":"","sources":["../../../src/components/UIButton/UISplitButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,uDAAoD;AACpD,0DAAuD;AACvD,oCAAmC;AAGnC,+CAA0C;AAgB1C;;;;;;GAMG;AACH,MAAa,aAAc,SAAQ,KAAK,CAAC,SAAiD;IAEtF;;;OAGG;IACH,YAAmB,KAAyB;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;QANjB,OAAE,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAO,CAAC,kBAAkB,CAAC,CAAC;QAkB1D,YAAO,GAAG,GAAS,EAAE;YACxB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC/C,CAAC,CAAC;QAEK,oBAAe,GAAG,CACrB,EAAqE,EACrE,IAA2B,EACvB,EAAE;YACN,IAAI,IAAI,IAAI,IAAI,CAAC,GAAG,EAAE;gBAClB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aACjC;QACL,CAAC,CAAC;QArBE,IAAI,CAAC,KAAK,GAAG;YACT,IAAI,EAAE;gBACF,KAAK,EAAE,KAAK,CAAC,SAAS;gBACtB,WAAW,EAAE,IAAI,CAAC,eAAe;aACpC;SACJ,CAAC;QAEF,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3C,CAAC;IAeD;;OAEG;IACH,MAAM;QACF,OAAO,CACH,oBAAC,iCAAe,IACZ,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,eAAe,EAC3C,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,SAAS,EAAC,iBAAiB,EAC3B,OAAO,QACP,KAAK,QACL,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAC1B,aAAa,EAAE,EAAE,QAAQ,EAAE,eAAO,CAAC,SAAS,EAAE,EAC9C,MAAM,EAAE,mCAAgB,EACxB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,IAC5B,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CACT,CACrB,CAAC;IACN,CAAC;CACJ;AArDD,sCAqDC"}

package/dist/components/UIButton/index.d.ts

@@ -0,0 +1,7 @@
+import { IButton } from '@fluentui/react';
+export { IButton as UIButtonInterface };
+export * from './UIActionButton';
+export * from './UIDefaultButton';
+export * from './UIIconButton';
+export * from './UISplitButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/UIButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/UIButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC"}

package/dist/components/UIButton/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./UIActionButton"), exports);
+__exportStar(require("./UIDefaultButton"), exports);
+__exportStar(require("./UIIconButton"), exports);
+__exportStar(require("./UISplitButton"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/UIButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/UIButton/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAGA,mDAAiC;AACjC,oDAAkC;AAClC,iDAA+B;AAC/B,kDAAgC"}

package/dist/components/UICallout/UICallout.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { ICalloutProps, ICalloutContentStyles } from '@fluentui/react';
+export interface UICalloutProps extends ICalloutProps {
+    calloutMinWidth?: number;
+    contentPadding?: UICalloutContentPadding;
+}
+export declare const CALLOUT_STYLES: {
+    background: string;
+    boxShadow: string;
+    text: string;
+    font: string;
+};
+export declare enum UICalloutContentPadding {
+    None = "None",
+    Standard = "Standard"
+}
+export declare const getCalloutStyle: (props: UICalloutProps) => ICalloutContentStyles;
+/**
+ * UICallout component.
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/callout
+ *
+ * @exports
+ * @class UICallout
+ * @extends {React.Component<ICalloutProps, {}>}
+ */
+export declare class UICallout extends React.Component<UICalloutProps, {}> {
+    /**
+     * Initializes component properties.
+     * @param {UICalloutProps} props
+     */
+    constructor(props: UICalloutProps);
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
+//# sourceMappingURL=UICallout.d.ts.map

package/dist/components/UICallout/UICallout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UICallout.d.ts","sourceRoot":"","sources":["../../../src/components/UICallout/UICallout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EACR,aAAa,EACb,qBAAqB,EAIxB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,WAAW,cAAe,SAAQ,aAAa;IACjD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,uBAAuB,CAAC;CAC5C;AAED,eAAO,MAAM,cAAc;;;;;CAM1B,CAAC;AAEF,oBAAY,uBAAuB;IAC/B,IAAI,SAAS;IACb,QAAQ,aAAa;CACxB;AAsBD,eAAO,MAAM,eAAe,UAAW,cAAc,KAAG,qBA6BvD,CAAC;AAEF;;;;;;;GAOG;AACH,qBAAa,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,EAAE,EAAE,CAAC;IAC9D;;;OAGG;gBACgB,KAAK,EAAE,cAAc;IAIxC;;OAEG;IACH,MAAM,IAAI,GAAG,CAAC,OAAO;CAOxB"}

package/dist/components/UICallout/UICallout.js

@@ -0,0 +1,90 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UICallout = exports.getCalloutStyle = exports.UICalloutContentPadding = exports.CALLOUT_STYLES = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@fluentui/react");
+exports.CALLOUT_STYLES = {
+    background: 'var(--vscode-editorSuggestWidget-background)',
+    boxShadow: '0 2px 6px rgb(0 0 0 / 20%), 0 0 0 1px var(--vscode-contrastBorder, var(--vscode-editorSuggestWidget-border))',
+    text: 'var(--vscode-editorSuggestWidget-foreground)',
+    font: 'var(--vscode-font-family)'
+};
+var UICalloutContentPadding;
+(function (UICalloutContentPadding) {
+    UICalloutContentPadding["None"] = "None";
+    UICalloutContentPadding["Standard"] = "Standard";
+})(UICalloutContentPadding = exports.UICalloutContentPadding || (exports.UICalloutContentPadding = {}));
+// Control content padding with different states to avoid different hardcoded values across extensions
+const CALLOUT_CONTENT_PADDING = new Map([[UICalloutContentPadding.Standard, 8]]);
+/**
+ * Method receives callout style and extracts into raw styles object.
+ *
+ * @param {IStyleFunctionOrObject<ICalloutContentStyleProps, ICalloutContentStyles> | undefined} styles Callout styles.
+ * @param {keyof ICalloutContentStyles} name Callout style type.
+ * @returns {IRawStyle} Raw style object.
+ */
+const extractRawStyles = (styles, name) => {
+    if (typeof styles === 'object' && typeof styles[name] === 'object') {
+        return styles[name];
+    }
+    return {};
+};
+const getCalloutStyle = (props) => {
+    return {
+        root: {
+            boxShadow: exports.CALLOUT_STYLES.boxShadow,
+            backgroundColor: 'transparent',
+            borderRadius: 0,
+            ...extractRawStyles(props.styles, 'root')
+        },
+        beak: {
+            backgroundColor: exports.CALLOUT_STYLES.background,
+            boxShadow: exports.CALLOUT_STYLES.boxShadow,
+            ...extractRawStyles(props.styles, 'beak')
+        },
+        beakCurtain: {
+            backgroundColor: exports.CALLOUT_STYLES.background,
+            ...extractRawStyles(props.styles, 'beakCurtain')
+        },
+        calloutMain: {
+            backgroundColor: exports.CALLOUT_STYLES.background,
+            color: exports.CALLOUT_STYLES.text,
+            fontFamily: exports.CALLOUT_STYLES.font,
+            borderRadius: 0,
+            minWidth: props.calloutMinWidth ?? 300,
+            boxSizing: 'border-box',
+            padding: CALLOUT_CONTENT_PADDING.get(props.contentPadding || UICalloutContentPadding.None),
+            ...extractRawStyles(props.styles, 'calloutMain')
+        },
+        container: extractRawStyles(props.styles, 'container')
+    };
+};
+exports.getCalloutStyle = getCalloutStyle;
+/**
+ * UICallout component.
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/callout
+ *
+ * @exports
+ * @class UICallout
+ * @extends {React.Component<ICalloutProps, {}>}
+ */
+class UICallout extends react_1.default.Component {
+    /**
+     * Initializes component properties.
+     * @param {UICalloutProps} props
+     */
+    constructor(props) {
+        super(props);
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        return (react_1.default.createElement(react_2.Callout, { ...this.props, styles: exports.getCalloutStyle(this.props) }, this.props.children));
+    }
+}
+exports.UICallout = UICallout;
+//# sourceMappingURL=UICallout.js.map

package/dist/components/UICallout/UICallout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UICallout.js","sourceRoot":"","sources":["../../../src/components/UICallout/UICallout.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAQ1B,2CAA0C;AAO7B,QAAA,cAAc,GAAG;IAC1B,UAAU,EAAE,8CAA8C;IAC1D,SAAS,EACL,8GAA8G;IAClH,IAAI,EAAE,8CAA8C;IACpD,IAAI,EAAE,2BAA2B;CACpC,CAAC;AAEF,IAAY,uBAGX;AAHD,WAAY,uBAAuB;IAC/B,wCAAa,CAAA;IACb,gDAAqB,CAAA;AACzB,CAAC,EAHW,uBAAuB,GAAvB,+BAAuB,KAAvB,+BAAuB,QAGlC;AAED,sGAAsG;AACtG,MAAM,uBAAuB,GAAG,IAAI,GAAG,CAAkC,CAAC,CAAC,uBAAuB,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAElH;;;;;;GAMG;AACH,MAAM,gBAAgB,GAAG,CACrB,MAA4F,EAC5F,IAAiC,EACxB,EAAE;IACX,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,QAAQ,EAAE;QAChE,OAAO,MAAM,CAAC,IAAI,CAAc,CAAC;KACpC;IACD,OAAO,EAAE,CAAC;AACd,CAAC,CAAC;AAEK,MAAM,eAAe,GAAG,CAAC,KAAqB,EAAyB,EAAE;IAC5E,OAAO;QACH,IAAI,EAAE;YACF,SAAS,EAAE,sBAAc,CAAC,SAAS;YACnC,eAAe,EAAE,aAAa;YAC9B,YAAY,EAAE,CAAC;YACf,GAAG,gBAAgB,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC;SAC5C;QACD,IAAI,EAAE;YACF,eAAe,EAAE,sBAAc,CAAC,UAAU;YAC1C,SAAS,EAAE,sBAAc,CAAC,SAAS;YACnC,GAAG,gBAAgB,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC;SAC5C;QACD,WAAW,EAAE;YACT,eAAe,EAAE,sBAAc,CAAC,UAAU;YAC1C,GAAG,gBAAgB,CAAC,KAAK,CAAC,MAAM,EAAE,aAAa,CAAC;SACnD;QACD,WAAW,EAAE;YACT,eAAe,EAAE,sBAAc,CAAC,UAAU;YAC1C,KAAK,EAAE,sBAAc,CAAC,IAAI;YAC1B,UAAU,EAAE,sBAAc,CAAC,IAAI;YAC/B,YAAY,EAAE,CAAC;YACf,QAAQ,EAAE,KAAK,CAAC,eAAe,IAAI,GAAG;YACtC,SAAS,EAAE,YAAY;YACvB,OAAO,EAAE,uBAAuB,CAAC,GAAG,CAAC,KAAK,CAAC,cAAc,IAAI,uBAAuB,CAAC,IAAI,CAAC;YAC1F,GAAG,gBAAgB,CAAC,KAAK,CAAC,MAAM,EAAE,aAAa,CAAC;SACnD;QACD,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC;KACzD,CAAC;AACN,CAAC,CAAC;AA7BW,QAAA,eAAe,mBA6B1B;AAEF;;;;;;;GAOG;AACH,MAAa,SAAU,SAAQ,eAAK,CAAC,SAA6B;IAC9D;;;OAGG;IACH,YAAmB,KAAqB;QACpC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED;;OAEG;IACH,MAAM;QACF,OAAO,CACH,8BAAC,eAAO,OAAK,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,uBAAe,CAAC,IAAI,CAAC,KAAK,CAAC,IACvD,IAAI,CAAC,KAAK,CAAC,QAAQ,CACd,CACb,CAAC;IACN,CAAC;CACJ;AAnBD,8BAmBC"}

package/dist/components/UICallout/index.d.ts

@@ -0,0 +1,2 @@
+export * from './UICallout';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/UICallout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/UICallout/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/components/UICallout/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./UICallout"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/UICallout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/UICallout/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,8CAA4B"}

package/dist/components/UICheckbox/UICheckbox.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { ICheckboxProps, ICheckboxStyles, ICheckboxStyleProps } from '@fluentui/react';
+import type { UIComponentMessagesProps, InputValidationMessageInfo } from '../../helper/ValidationMessage';
+export interface UICheckboxProps extends ICheckboxProps, UIComponentMessagesProps {
+    CheckboxMinWidth?: number;
+}
+/**
+ * UICheckbox component.
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/checkbox
+ *
+ * @exports
+ * @class UICheckbox
+ * @extends {React.Component<ICheckboxProps, {}>}
+ */
+export declare class UICheckbox extends React.Component<UICheckboxProps, {}> {
+    GlobalClassNames: {
+        root: string;
+        label: string;
+        checkbox: string;
+        checkmark: string;
+        text: string;
+    };
+    /**
+     * Initializes component properties.
+     * @param {UICheckboxProps} props
+     */
+    constructor(props: UICheckboxProps);
+    protected setStyle: (messageInfo: InputValidationMessageInfo, props: ICheckboxStyleProps) => ICheckboxStyles;
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
+//# sourceMappingURL=UICheckbox.d.ts.map

package/dist/components/UICheckbox/UICheckbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UICheckbox.d.ts","sourceRoot":"","sources":["../../../src/components/UICheckbox/UICheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAG5F,OAAO,KAAK,EAAE,wBAAwB,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAG3G,MAAM,WAAW,eAAgB,SAAQ,cAAc,EAAE,wBAAwB;IAC7E,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;GAOG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,EAAE,EAAE,CAAC;IAChE,gBAAgB;;;;;;MAMd;IAEF;;;OAGG;gBACgB,KAAK,EAAE,eAAe;IAIzC,SAAS,CAAC,QAAQ,gBAAiB,0BAA0B,SAAS,mBAAmB,KAAG,eAAe,CAyFzG;IAEF;;OAEG;IACH,MAAM,IAAI,GAAG,CAAC,OAAO;CAgBxB"}

package/dist/components/UICheckbox/UICheckbox.js

@@ -0,0 +1,135 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UICheckbox = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@fluentui/react");
+const ValidationMessage_1 = require("../../helper/ValidationMessage");
+/**
+ * UICheckbox component.
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/checkbox
+ *
+ * @exports
+ * @class UICheckbox
+ * @extends {React.Component<ICheckboxProps, {}>}
+ */
+class UICheckbox extends react_1.default.Component {
+    /**
+     * Initializes component properties.
+     * @param {UICheckboxProps} props
+     */
+    constructor(props) {
+        super(props);
+        this.GlobalClassNames = {
+            root: 'ms-Checkbox',
+            label: 'ms-Checkbox-label',
+            checkbox: 'ms-Checkbox-checkbox',
+            checkmark: 'ms-Checkbox-checkmark',
+            text: 'ms-Checkbox-text'
+        };
+        this.setStyle = (messageInfo, props) => {
+            return {
+                root: [
+                    !props.disabled && [
+                        !props.checked && {
+                            [`:hover .${this.GlobalClassNames.checkbox}`]: {
+                                background: 'var(--vscode-checkbox-background)',
+                                borderColor: 'var(--vscode-focusBorder)',
+                                [react_2.HighContrastSelector]: {
+                                    borderColor: 'Highlight'
+                                }
+                            },
+                            [`:focus .${this.GlobalClassNames.checkbox}`]: {
+                                background: 'var(--vscode-checkbox-background)',
+                                borderColor: 'var(--vscode-focusBorder)'
+                            },
+                            [`:hover .${this.GlobalClassNames.checkmark}`]: {
+                                color: 'var(--vscode-foreground)',
+                                opacity: 0,
+                                [react_2.HighContrastSelector]: {
+                                    color: 'Highlight'
+                                }
+                            }
+                        },
+                        {
+                            [`:hover .${this.GlobalClassNames.text}, :focus .${this.GlobalClassNames.text}`]: {
+                                color: 'var(--vscode-foreground)',
+                                [react_2.HighContrastSelector]: {
+                                    color: props.disabled ? 'GrayText' : 'WindowText'
+                                }
+                            }
+                        }
+                    ],
+                    props.checked &&
+                        !props.indeterminate && {
+                        [`:hover .${this.GlobalClassNames.checkbox}`]: {
+                            background: 'var(--vscode-checkbox-background)',
+                            borderColor: 'var(--vscode-focusBorder)'
+                        },
+                        [`:focus .${this.GlobalClassNames.checkbox}`]: {
+                            background: 'var(--vscode-checkbox-background)',
+                            borderColor: 'var(--vscode-focusBorder)'
+                        },
+                        [react_2.HighContrastSelector]: {
+                            [`:hover .${this.GlobalClassNames.checkbox}`]: {
+                                background: 'Highlight',
+                                borderColor: 'Highlight'
+                            },
+                            [`:focus .${this.GlobalClassNames.checkbox}`]: {
+                                background: 'Highlight'
+                            },
+                            [`:focus:hover .${this.GlobalClassNames.checkbox}`]: {
+                                background: 'Highlight'
+                            },
+                            [`:focus:hover .${this.GlobalClassNames.checkmark}`]: {
+                                color: 'Window'
+                            },
+                            [`:hover .${this.GlobalClassNames.checkmark}`]: {
+                                color: 'Window'
+                            }
+                        }
+                    },
+                    messageInfo.message && {
+                        marginBottom: 2
+                    }
+                ],
+                input: {
+                    [`.${react_2.IsFocusVisibleClassName} &:focus + label::before`]: {
+                        content: '',
+                        position: 'absolute',
+                        inset: -1,
+                        border: '1px solid transparent !important',
+                        outline: '1px solid var(--vscode-focusBorder) !important',
+                        [react_2.HighContrastSelector]: {
+                            outline: '1px solid WindowText'
+                        }
+                    }
+                },
+                checkbox: {
+                    backgroundColor: 'var(--vscode-debugToolBar-background, var(--vscode-editorWidget-background))',
+                    borderColor: 'var(--vscode-editorWidget-border)'
+                },
+                checkmark: {
+                    color: 'var(--vscode-checkbox-foreground, var(--vscode-editorWidget-foreground))'
+                },
+                text: {
+                    color: 'var(--vscode-foreground)'
+                }
+            };
+        };
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        const messageInfo = ValidationMessage_1.getMessageInfo(this.props);
+        const checkboxComponent = (react_1.default.createElement(react_2.Checkbox, { ...this.props, styles: (props) => {
+                return { ...this.setStyle(messageInfo, props), ...this.props.styles };
+            } }));
+        return messageInfo.message ? (react_1.default.createElement(ValidationMessage_1.MessageWrapper, { message: messageInfo }, checkboxComponent)) : (checkboxComponent);
+    }
+}
+exports.UICheckbox = UICheckbox;
+//# sourceMappingURL=UICheckbox.js.map

package/dist/components/UICheckbox/UICheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UICheckbox.js","sourceRoot":"","sources":["../../../src/components/UICheckbox/UICheckbox.tsx"],"names":[],"mappings":"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"}

package/dist/components/UICheckbox/index.d.ts

@@ -0,0 +1,2 @@
+export * from './UICheckbox';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/UICheckbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/UICheckbox/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/components/UICheckbox/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./UICheckbox"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/UICheckbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/UICheckbox/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,+CAA6B"}