@sap-ux/ui-components 1.0.0

package/dist/components/UIInput/UITextInput.js

@@ -0,0 +1,180 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UITextInput = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@fluentui/react");
+const ValidationMessage_1 = require("../../helper/ValidationMessage");
+const UILabel_1 = require("../UILabel");
+/**
+ * UITextInput component
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield
+ *
+ * @exports
+ * @class UITextInput
+ * @extends {React.Component<ITextFieldProps, {}>}
+ */
+class UITextInput extends react_1.default.Component {
+    /**
+     * Initializes component properties.
+     * @param {UITextInputProps} props
+     */
+    constructor(props) {
+        super(props);
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        const messageInfo = ValidationMessage_1.getMessageInfo(this.props);
+        const textFieldStyles = (props) => {
+            return {
+                ...{
+                    root: {
+                        height: 'auto',
+                        fontFamily: 'var(--vscode-font-family)'
+                    },
+                    fieldGroup: [
+                        !props.disabled &&
+                            !props.multiline && {
+                            backgroundColor: 'var(--vscode-input-background)',
+                            border: '1px solid var(--vscode-editorWidget-border)',
+                            borderRadius: 0,
+                            height: 24,
+                            maxHeight: 24,
+                            minHeight: 24,
+                            boxSizing: 'initial',
+                            selectors: {
+                                '&:hover': {
+                                    border: '1px solid var(--vscode-focusBorder)'
+                                }
+                            }
+                        },
+                        props.multiline && {
+                            backgroundColor: 'var(--vscode-input-background)',
+                            border: '1px solid var(--vscode-editorWidget-border)',
+                            borderRadius: 0,
+                            boxSizing: 'initial',
+                            selectors: {
+                                '&:hover': {
+                                    border: '1px solid var(--vscode-focusBorder)'
+                                }
+                            }
+                        },
+                        props.disabled &&
+                            !props.multiline && {
+                            color: 'var(--vscode-input-foreground)',
+                            opacity: 0.4,
+                            backgroundColor: `var(--vscode-editor-inactiveSelectionBackground)`,
+                            borderColor: 'var(--vscode-editorWidget-border)',
+                            border: '1px solid var(--vscode-editorWidget-border)',
+                            borderRadius: 0,
+                            height: 24,
+                            maxHeight: 24,
+                            minHeight: 24,
+                            boxSizing: 'initial'
+                        },
+                        props.hasErrorMessage && {
+                            borderColor: messageInfo.style.borderColor
+                        },
+                        props.focused &&
+                            !props.disabled && {
+                            selectors: {
+                                ':after': {
+                                    border: `1px solid var(${this.props.errorMessage
+                                        ? messageInfo.style.borderColor
+                                        : '--vscode-focusBorder'})`
+                                }
+                            }
+                        }
+                    ],
+                    field: [
+                        !props.multiline && {
+                            backgroundColor: 'var(--vscode-input-background)',
+                            color: 'var(--vscode-input-foreground)',
+                            lineHeight: 'normal',
+                            height: 24,
+                            maxHeight: 24,
+                            minHeight: 24,
+                            fontSize: '13px',
+                            fontWeight: 'normal',
+                            boxSizing: 'border-box',
+                            selectors: {
+                                '::placeholder': {
+                                    fontSize: 13,
+                                    fontFamily: 'var(--vscode-font-family)',
+                                    color: 'var(--vscode-input-placeholderForeground)'
+                                }
+                            }
+                        },
+                        props.hasIcon && {
+                            selectors: {
+                                '&:hover': {
+                                    cursor: 'pointer'
+                                }
+                            }
+                        },
+                        props.multiline && {
+                            backgroundColor: 'var(--vscode-input-background)',
+                            color: 'var(--vscode-input-foreground)',
+                            minHeight: '60px',
+                            height: 'auto',
+                            display: 'flex',
+                            fontSize: '13px',
+                            fontWeight: 'normal',
+                            boxSizing: 'border-box',
+                            selectors: {
+                                '::placeholder': {
+                                    fontSize: 13,
+                                    fontFamily: 'var(--vscode-font-family)',
+                                    color: 'var(--vscode-input-placeholderForeground)'
+                                }
+                            }
+                        },
+                        // props for input element inside field group
+                        props.disabled && {
+                            fontStyle: 'italic',
+                            backgroundColor: 'transparent'
+                        }
+                    ],
+                    suffix: {
+                        backgroundColor: 'var(--vscode-input-background)'
+                    },
+                    subComponentStyles: {
+                        label: {
+                            root: [
+                                {
+                                    marginTop: 25,
+                                    ...UILabel_1.labelGlobalStyle
+                                },
+                                props.disabled && {
+                                    opacity: '0.4'
+                                },
+                                props.required && {
+                                    selectors: {
+                                        '::after': {
+                                            content: `' *'`,
+                                            color: 'var(--vscode-inputValidation-errorBorder)',
+                                            paddingRight: 12
+                                        }
+                                    }
+                                }
+                            ]
+                        }
+                    },
+                    errorMessage: [messageInfo.style],
+                    icon: [
+                        {
+                            bottom: 2
+                        }
+                    ]
+                }
+            };
+        };
+        return react_1.default.createElement(react_2.TextField, { ...this.props, errorMessage: messageInfo.message, styles: textFieldStyles });
+    }
+}
+exports.UITextInput = UITextInput;
+//# sourceMappingURL=UITextInput.js.map

package/dist/components/UIInput/UITextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UITextInput.js","sourceRoot":"","sources":["../../../src/components/UIInput/UITextInput.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAG1B,2CAA4C;AAE5C,sEAAgE;AAChE,wCAA8C;AAM9C;;;;;;;GAOG;AACH,MAAa,WAAY,SAAQ,eAAK,CAAC,SAA2B;IAC9D;;;OAGG;IACH,YAAmB,KAAuB;QACtC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED;;OAEG;IACH,MAAM;QACF,MAAM,WAAW,GAAG,kCAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/C,MAAM,eAAe,GAAG,CAAC,KAA2B,EAA6B,EAAE;YAC/E,OAAO;gBACH,GAAG;oBACC,IAAI,EAAE;wBACF,MAAM,EAAE,MAAM;wBACd,UAAU,EAAE,2BAA2B;qBAC1C;oBACD,UAAU,EAAE;wBACR,CAAC,KAAK,CAAC,QAAQ;4BACX,CAAC,KAAK,CAAC,SAAS,IAAI;4BAChB,eAAe,EAAE,gCAAgC;4BACjD,MAAM,EAAE,6CAA6C;4BACrD,YAAY,EAAE,CAAC;4BACf,MAAM,EAAE,EAAE;4BACV,SAAS,EAAE,EAAE;4BACb,SAAS,EAAE,EAAE;4BACb,SAAS,EAAE,SAAS;4BACpB,SAAS,EAAE;gCACP,SAAS,EAAE;oCACP,MAAM,EAAE,qCAAqC;iCAChD;6BACJ;yBACJ;wBACL,KAAK,CAAC,SAAS,IAAI;4BACf,eAAe,EAAE,gCAAgC;4BACjD,MAAM,EAAE,6CAA6C;4BACrD,YAAY,EAAE,CAAC;4BACf,SAAS,EAAE,SAAS;4BACpB,SAAS,EAAE;gCACP,SAAS,EAAE;oCACP,MAAM,EAAE,qCAAqC;iCAChD;6BACJ;yBACJ;wBACD,KAAK,CAAC,QAAQ;4BACV,CAAC,KAAK,CAAC,SAAS,IAAI;4BAChB,KAAK,EAAE,gCAAgC;4BACvC,OAAO,EAAE,GAAG;4BACZ,eAAe,EAAE,kDAAkD;4BACnE,WAAW,EAAE,mCAAmC;4BAChD,MAAM,EAAE,6CAA6C;4BACrD,YAAY,EAAE,CAAC;4BACf,MAAM,EAAE,EAAE;4BACV,SAAS,EAAE,EAAE;4BACb,SAAS,EAAE,EAAE;4BACb,SAAS,EAAE,SAAS;yBACvB;wBACL,KAAK,CAAC,eAAe,IAAI;4BACrB,WAAW,EAAE,WAAW,CAAC,KAAK,CAAC,WAAW;yBAC7C;wBACD,KAAK,CAAC,OAAO;4BACT,CAAC,KAAK,CAAC,QAAQ,IAAI;4BACf,SAAS,EAAE;gCACP,QAAQ,EAAE;oCACN,MAAM,EAAE,iBACJ,IAAI,CAAC,KAAK,CAAC,YAAY;wCACnB,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW;wCAC/B,CAAC,CAAC,sBACV,GAAG;iCACN;6BACJ;yBACJ;qBACR;oBACD,KAAK,EAAE;wBACH,CAAC,KAAK,CAAC,SAAS,IAAI;4BAChB,eAAe,EAAE,gCAAgC;4BACjD,KAAK,EAAE,gCAAgC;4BACvC,UAAU,EAAE,QAAQ;4BACpB,MAAM,EAAE,EAAE;4BACV,SAAS,EAAE,EAAE;4BACb,SAAS,EAAE,EAAE;4BACb,QAAQ,EAAE,MAAM;4BAChB,UAAU,EAAE,QAAQ;4BACpB,SAAS,EAAE,YAAY;4BACvB,SAAS,EAAE;gCACP,eAAe,EAAE;oCACb,QAAQ,EAAE,EAAE;oCACZ,UAAU,EAAE,2BAA2B;oCACvC,KAAK,EAAE,2CAA2C;iCACrD;6BACJ;yBACJ;wBACD,KAAK,CAAC,OAAO,IAAI;4BACb,SAAS,EAAE;gCACP,SAAS,EAAE;oCACP,MAAM,EAAE,SAAS;iCACpB;6BACJ;yBACJ;wBAED,KAAK,CAAC,SAAS,IAAI;4BACf,eAAe,EAAE,gCAAgC;4BACjD,KAAK,EAAE,gCAAgC;4BACvC,SAAS,EAAE,MAAM;4BACjB,MAAM,EAAE,MAAM;4BACd,OAAO,EAAE,MAAM;4BACf,QAAQ,EAAE,MAAM;4BAChB,UAAU,EAAE,QAAQ;4BACpB,SAAS,EAAE,YAAY;4BACvB,SAAS,EAAE;gCACP,eAAe,EAAE;oCACb,QAAQ,EAAE,EAAE;oCACZ,UAAU,EAAE,2BAA2B;oCACvC,KAAK,EAAE,2CAA2C;iCACrD;6BACJ;yBACJ;wBAED,6CAA6C;wBAC7C,KAAK,CAAC,QAAQ,IAAI;4BACd,SAAS,EAAE,QAAQ;4BACnB,eAAe,EAAE,aAAa;yBACjC;qBACJ;oBACD,MAAM,EAAE;wBACJ,eAAe,EAAE,gCAAgC;qBACpD;oBACD,kBAAkB,EAAE;wBAChB,KAAK,EAAE;4BACH,IAAI,EAAE;gCACF;oCACI,SAAS,EAAE,EAAE;oCACb,GAAG,0BAAgB;iCACtB;gCACD,KAAK,CAAC,QAAQ,IAAI;oCACd,OAAO,EAAE,KAAK;iCACjB;gCACD,KAAK,CAAC,QAAQ,IAAI;oCACd,SAAS,EAAE;wCACP,SAAS,EAAE;4CACP,OAAO,EAAE,MAAM;4CACf,KAAK,EAAE,2CAA2C;4CAClD,YAAY,EAAE,EAAE;yCACnB;qCACJ;iCACJ;6BACJ;yBACJ;qBACJ;oBACD,YAAY,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC;oBACjC,IAAI,EAAE;wBACF;4BACI,MAAM,EAAE,CAAC;yBACZ;qBACJ;iBACJ;aACJ,CAAC;QACN,CAAC,CAAC;QAEF,OAAO,8BAAC,iBAAS,OAAK,IAAI,CAAC,KAAK,EAAE,YAAY,EAAE,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,eAAe,GAAI,CAAC;IACrG,CAAC;CACJ;AArKD,kCAqKC"}

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

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

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

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

package/dist/components/UIInput/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("./UITextInput"), exports);
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/UILabel/UILabel.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { ILabelProps } from '@fluentui/react';
+export declare type UILabelProps = ILabelProps;
+export declare const labelGlobalStyle: {
+    fontWeight: string;
+    fontSize: string;
+    color: string;
+    fontFamily: string;
+    padding: string;
+};
+/**
+ * UILabel component
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/label
+ *
+ * @exports
+ * @class UILabel
+ * @extends {React.Component<ILabelProps, {}>}
+ */
+export declare class UILabel extends React.Component<UILabelProps> {
+    /**
+     * Initializes component properties.
+     * @param {UILabelProps} props
+     */
+    constructor(props: UILabelProps);
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
+//# sourceMappingURL=UILabel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UILabel.d.ts","sourceRoot":"","sources":["../../../src/components/UILabel/UILabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAkC,MAAM,iBAAiB,CAAC;AAGnF,oBAAY,YAAY,GAAG,WAAW,CAAC;AAEvC,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC;AAEF;;;;;;;GAOG;AACH,qBAAa,OAAQ,SAAQ,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC;IACtD;;;OAGG;gBACgB,KAAK,EAAE,YAAY;IAItC;;OAEG;IACH,MAAM,IAAI,GAAG,CAAC,OAAO;CA4BxB"}

package/dist/components/UILabel/UILabel.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UILabel = exports.labelGlobalStyle = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@fluentui/react");
+exports.labelGlobalStyle = {
+    fontWeight: 'bold',
+    fontSize: '13px',
+    color: 'var(--vscode-input-foreground)',
+    fontFamily: 'var(--vscode-font-family)',
+    padding: '4px 0'
+};
+/**
+ * UILabel component
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/label
+ *
+ * @exports
+ * @class UILabel
+ * @extends {React.Component<ILabelProps, {}>}
+ */
+class UILabel extends react_1.default.Component {
+    /**
+     * Initializes component properties.
+     * @param {UILabelProps} props
+     */
+    constructor(props) {
+        super(props);
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        const labelStyles = (props) => {
+            return {
+                ...{
+                    root: [
+                        {
+                            marginTop: 25,
+                            ...exports.labelGlobalStyle
+                        },
+                        props.disabled && {
+                            opacity: '0.4'
+                        },
+                        props.required && {
+                            selectors: {
+                                '::after': {
+                                    content: `' *'`,
+                                    color: 'var(--vscode-inputValidation-errorBorder)',
+                                    paddingRight: 12
+                                }
+                            }
+                        }
+                    ]
+                }
+            };
+        };
+        return react_1.default.createElement(react_2.Label, { ...this.props, styles: labelStyles });
+    }
+}
+exports.UILabel = UILabel;
+//# sourceMappingURL=UILabel.js.map

package/dist/components/UILabel/UILabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UILabel.js","sourceRoot":"","sources":["../../../src/components/UILabel/UILabel.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAG1B,2CAAwC;AAI3B,QAAA,gBAAgB,GAAG;IAC5B,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,MAAM;IAChB,KAAK,EAAE,gCAAgC;IACvC,UAAU,EAAE,2BAA2B;IACvC,OAAO,EAAE,OAAO;CACnB,CAAC;AAEF;;;;;;;GAOG;AACH,MAAa,OAAQ,SAAQ,eAAK,CAAC,SAAuB;IACtD;;;OAGG;IACH,YAAmB,KAAmB;QAClC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED;;OAEG;IACH,MAAM;QACF,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAyB,EAAE;YACnE,OAAO;gBACH,GAAG;oBACC,IAAI,EAAE;wBACF;4BACI,SAAS,EAAE,EAAE;4BACb,GAAG,wBAAgB;yBACtB;wBACD,KAAK,CAAC,QAAQ,IAAI;4BACd,OAAO,EAAE,KAAK;yBACjB;wBACD,KAAK,CAAC,QAAQ,IAAI;4BACd,SAAS,EAAE;gCACP,SAAS,EAAE;oCACP,OAAO,EAAE,MAAM;oCACf,KAAK,EAAE,2CAA2C;oCAClD,YAAY,EAAE,EAAE;iCACnB;6BACJ;yBACJ;qBACJ;iBACJ;aACJ,CAAC;QACN,CAAC,CAAC;QAEF,OAAO,8BAAC,aAAK,OAAK,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,GAAI,CAAC;IAC1D,CAAC;CACJ;AAxCD,0BAwCC"}

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

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

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

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

package/dist/components/UILabel/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("./UILabel"), exports);
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/UILink/UILink.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { ILinkProps } from '@fluentui/react';
+/**
+ * UILink component
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/link
+ *
+ * @exports
+ * @class UILink
+ * @extends {React.Component<ILinkProps, {}>}
+ */
+export declare class UILink extends React.Component<ILinkProps, {}> {
+    /**
+     * Initializes component properties.
+     * @param {ILinkProps} props
+     */
+    constructor(props: ILinkProps);
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
+//# sourceMappingURL=UILink.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UILink.d.ts","sourceRoot":"","sources":["../../../src/components/UILink/UILink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAe,MAAM,iBAAiB,CAAC;AAG/D;;;;;;;GAOG;AACH,qBAAa,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,UAAU,EAAE,EAAE,CAAC;IACvD;;;OAGG;gBACgB,KAAK,EAAE,UAAU;IAIpC;;OAEG;IACH,MAAM,IAAI,GAAG,CAAC,OAAO;CA6BxB"}

package/dist/components/UILink/UILink.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UILink = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@fluentui/react");
+/**
+ * UILink component
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/link
+ *
+ * @exports
+ * @class UILink
+ * @extends {React.Component<ILinkProps, {}>}
+ */
+class UILink extends react_1.default.Component {
+    /**
+     * Initializes component properties.
+     * @param {ILinkProps} props
+     */
+    constructor(props) {
+        super(props);
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        const linkStyles = () => {
+            return {
+                root: {
+                    color: 'var(--vscode-textLink-foreground)',
+                    fontFamily: 'var(--vscode-font-family)',
+                    selectors: {
+                        '&:hover, &:hover:focus, &:hover:active': {
+                            color: 'var(--vscode-textLink-activeForeground)',
+                            textDecoration: 'underline'
+                        },
+                        '&:active, &:focus': {
+                            color: 'var(--vscode-textLink-activeForeground)',
+                            textDecoration: 'none',
+                            outline: 'none'
+                        },
+                        // Focus through tab navigation
+                        '.ms-Fabric--isFocusVisible &:focus': {
+                            boxShadow: 'none',
+                            outline: '1px solid var(--vscode-focusBorder)',
+                            outlineOffset: '-1px'
+                        }
+                    }
+                }
+            };
+        };
+        return react_1.default.createElement(react_2.Link, { ...this.props, styles: linkStyles });
+    }
+}
+exports.UILink = UILink;
+//# sourceMappingURL=UILink.js.map

package/dist/components/UILink/UILink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UILink.js","sourceRoot":"","sources":["../../../src/components/UILink/UILink.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAG1B,2CAAuC;AAEvC;;;;;;;GAOG;AACH,MAAa,MAAO,SAAQ,eAAK,CAAC,SAAyB;IACvD;;;OAGG;IACH,YAAmB,KAAiB;QAChC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED;;OAEG;IACH,MAAM;QACF,MAAM,UAAU,GAAG,GAAyB,EAAE;YAC1C,OAAO;gBACH,IAAI,EAAE;oBACF,KAAK,EAAE,mCAAmC;oBAC1C,UAAU,EAAE,2BAA2B;oBACvC,SAAS,EAAE;wBACP,wCAAwC,EAAE;4BACtC,KAAK,EAAE,yCAAyC;4BAChD,cAAc,EAAE,WAAW;yBAC9B;wBACD,mBAAmB,EAAE;4BACjB,KAAK,EAAE,yCAAyC;4BAChD,cAAc,EAAE,MAAM;4BACtB,OAAO,EAAE,MAAM;yBAClB;wBACD,+BAA+B;wBAC/B,oCAAoC,EAAE;4BAClC,SAAS,EAAE,MAAM;4BACjB,OAAO,EAAE,qCAAqC;4BAC9C,aAAa,EAAE,MAAM;yBACxB;qBACJ;iBACJ;aACJ,CAAC;QACN,CAAC,CAAC;QAEF,OAAO,8BAAC,YAAI,OAAK,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,GAAI,CAAC;IACxD,CAAC;CACJ;AAzCD,wBAyCC"}

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

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

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

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

package/dist/components/UILink/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("./UILink"), exports);
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/UIList/UIList.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { IGroup, IGroupRenderProps } from '@fluentui/react';
+import './UIList.scss';
+export interface ListProps {
+    groups: IGroup[];
+    groupProps?: IGroupRenderProps;
+    items: never[];
+    onSelect: (value: IGroup) => void;
+    onRenderCell: (nestingDepth?: number, item?: never, index?: number) => React.ReactNode;
+}
+/**
+ * UIList component
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/groupedlist
+ *
+ * @exports
+ * @class UIList
+ * @extends {React.Component<ListProps, {}>}
+ */
+export declare class UIList extends React.Component<ListProps, {}> {
+    /**
+     * Initializes component properties.
+     * @param {ListProps} props
+     */
+    constructor(props: ListProps);
+    private onGroupHeaderClick;
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
+//# sourceMappingURL=UIList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UIList.d.ts","sourceRoot":"","sources":["../../../src/components/UIList/UIList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EACR,MAAM,EAEN,iBAAiB,EAIpB,MAAM,iBAAiB,CAAC;AAKzB,OAAO,eAAe,CAAC;AACvB,MAAM,WAAW,SAAS;IACtB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,YAAY,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CAC1F;AAED;;;;;;;GAOG;AACH,qBAAa,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,EAAE,CAAC;IACtD;;;OAGG;gBACgB,KAAK,EAAE,SAAS;IAInC,OAAO,CAAC,kBAAkB,CAExB;IAEF;;OAEG;IACH,MAAM,IAAI,GAAG,CAAC,OAAO;CAoGxB"}

package/dist/components/UIList/UIList.js

@@ -0,0 +1,120 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIList = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@fluentui/react");
+const Icons_1 = require("../Icons");
+require("./UIList.scss");
+/**
+ * UIList component
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/groupedlist
+ *
+ * @exports
+ * @class UIList
+ * @extends {React.Component<ListProps, {}>}
+ */
+class UIList extends react_1.default.Component {
+    /**
+     * Initializes component properties.
+     * @param {ListProps} props
+     */
+    constructor(props) {
+        super(props);
+        this.onGroupHeaderClick = (group) => {
+            this.props.onSelect(group);
+        };
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        const HeaderStyles = () => ({
+            ...{
+                root: [
+                    {
+                        cursor: 'pointer',
+                        padding: '0 10px 0 10px',
+                        selectors: {
+                            '&:hover': {
+                                backgroundColor: 'var(--vscode-dropdown-background)',
+                                color: 'var(--vscode-dropdown-foreground)'
+                            }
+                        }
+                    }
+                ],
+                groupHeaderContainer: {
+                    height: 20
+                },
+                expandIsCollapsed: {
+                    height: 16
+                },
+                expand: [
+                    {
+                        height: 20,
+                        width: 30,
+                        selectors: {
+                            '&:hover': {
+                                backgroundColor: 'var(--vscode-dropdown-background)',
+                                color: 'var(--vscode-dropdown-foreground)'
+                            },
+                            '&:active': {
+                                backgroundColor: 'var(--vscode-dropdown-background)',
+                                color: 'var(--vscode-dropdown-foreground)'
+                            }
+                        }
+                    }
+                ],
+                title: {
+                    fontSize: 13,
+                    fontWeight: 'normal',
+                    paddingLeft: 0,
+                    height: 20,
+                    color: 'var(--vscuie-settings-textInputForeground)'
+                }
+            }
+        });
+        const HeaderProps = {
+            ...{
+                root: {},
+                expandButtonIcon: Icons_1.UiIcons.ArrowRight,
+                expandButtonProps: {
+                    style: {
+                        width: 20,
+                        paddingRight: 5
+                    }
+                },
+                indentWidth: 10,
+                styles: HeaderStyles,
+                onGroupHeaderClick: this.onGroupHeaderClick
+            }
+        };
+        const GroupeListStyles = () => ({
+            ...{
+                root: [
+                    {
+                        color: 'var(--vscode-dropdown-foreground)',
+                        paddingTop: 10,
+                        paddingBottom: 10,
+                        selectors: {
+                            '.ms-List-cell': {
+                                minHeight: 20
+                            }
+                        }
+                    }
+                ]
+            }
+        });
+        const GroupProps = {
+            headerProps: HeaderProps,
+            isAllGroupsCollapsed: true,
+            ...this.props.groupProps
+        };
+        const ListProps = {};
+        return (react_1.default.createElement(react_2.GroupedList, { ...this.props, className: "uiList", selectionMode: 0, compact: true, styles: GroupeListStyles, groupProps: GroupProps, listProps: ListProps }));
+    }
+}
+exports.UIList = UIList;
+//# sourceMappingURL=UIList.js.map

package/dist/components/UIList/UIList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIList.js","sourceRoot":"","sources":["../../../src/components/UIList/UIList.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAS1B,2CAA8C;AAE9C,oCAAmC;AAEnC,yBAAuB;AASvB;;;;;;;GAOG;AACH,MAAa,MAAO,SAAQ,eAAK,CAAC,SAAwB;IACtD;;;OAGG;IACH,YAAmB,KAAgB;QAC/B,KAAK,CAAC,KAAK,CAAC,CAAC;QAGT,uBAAkB,GAAG,CAAC,KAAa,EAAQ,EAAE;YACjD,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC,CAAC;IAJF,CAAC;IAMD;;OAEG;IACH,MAAM;QACF,MAAM,YAAY,GAAG,GAAgC,EAAE,CAAC,CAAC;YACrD,GAAG;gBACC,IAAI,EAAE;oBACF;wBACI,MAAM,EAAE,SAAS;wBACjB,OAAO,EAAE,eAAe;wBACxB,SAAS,EAAE;4BACP,SAAS,EAAE;gCACP,eAAe,EAAE,mCAAmC;gCACpD,KAAK,EAAE,mCAAmC;6BAC7C;yBACJ;qBACJ;iBACJ;gBACD,oBAAoB,EAAE;oBAClB,MAAM,EAAE,EAAE;iBACb;gBACD,iBAAiB,EAAE;oBACf,MAAM,EAAE,EAAE;iBACb;gBACD,MAAM,EAAE;oBACJ;wBACI,MAAM,EAAE,EAAE;wBACV,KAAK,EAAE,EAAE;wBACT,SAAS,EAAE;4BACP,SAAS,EAAE;gCACP,eAAe,EAAE,mCAAmC;gCACpD,KAAK,EAAE,mCAAmC;6BAC7C;4BACD,UAAU,EAAE;gCACR,eAAe,EAAE,mCAAmC;gCACpD,KAAK,EAAE,mCAAmC;6BAC7C;yBACJ;qBACJ;iBACJ;gBACD,KAAK,EAAE;oBACH,QAAQ,EAAE,EAAE;oBACZ,UAAU,EAAE,QAAQ;oBACpB,WAAW,EAAE,CAAC;oBACd,MAAM,EAAE,EAAE;oBACV,KAAK,EAAE,4CAA4C;iBACtD;aACJ;SACJ,CAAC,CAAC;QAEH,MAAM,WAAW,GAAsB;YACnC,GAAG;gBACC,IAAI,EAAE,EAAE;gBACR,gBAAgB,EAAE,eAAO,CAAC,UAAU;gBACpC,iBAAiB,EAAE;oBACf,KAAK,EAAE;wBACH,KAAK,EAAE,EAAE;wBACT,YAAY,EAAE,CAAC;qBAClB;iBACJ;gBACD,WAAW,EAAE,EAAE;gBACf,MAAM,EAAE,YAAY;gBACpB,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;aAC9C;SACJ,CAAC;QAEF,MAAM,gBAAgB,GAAG,GAAgC,EAAE,CAAC,CAAC;YACzD,GAAG;gBACC,IAAI,EAAE;oBACF;wBACI,KAAK,EAAE,mCAAmC;wBAC1C,UAAU,EAAE,EAAE;wBACd,aAAa,EAAE,EAAE;wBACjB,SAAS,EAAE;4BACP,eAAe,EAAE;gCACb,SAAS,EAAE,EAAE;6BAChB;yBACJ;qBACJ;iBACJ;aACJ;SACJ,CAAC,CAAC;QAEH,MAAM,UAAU,GAAsB;YAClC,WAAW,EAAE,WAAW;YACxB,oBAAoB,EAAE,IAAI;YAC1B,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU;SAC3B,CAAC;QAEF,MAAM,SAAS,GAAe,EAAE,CAAC;QAEjC,OAAO,CACH,8BAAC,mBAAW,OACJ,IAAI,CAAC,KAAK,EACd,SAAS,EAAC,QAAQ,EAClB,aAAa,EAAE,CAAC,EAChB,OAAO,EAAE,IAAI,EACb,MAAM,EAAE,gBAAgB,EACxB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,GACtB,CACL,CAAC;IACN,CAAC;CACJ;AApHD,wBAoHC"}

package/dist/components/UIList/UIList.scss

@@ -0,0 +1,16 @@
+@import '../../styles/ui-components.scss';
+
+.uiList {
+    &-group-entry {
+        padding: 0 20px 0 10px;
+        font-size: 13px;
+        font-weight: normal;
+        height: 20px;
+
+        &:hover {
+            cursor: pointer;
+            background-color: var(--vscode-dropdown-background);
+            color: var(--vscode-dropdown-foreground);
+        }
+    }
+}

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

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

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

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