@sap-ux/ui-components 1.8.0 → 1.8.2

package/dist/components/UICheckbox/UICheckbox.js

@@ -1,136 +1,136 @@
-"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 = (0, 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;
+"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 = (0, 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/index.d.ts

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

package/dist/components/UICheckbox/index.js

@@ -1,18 +1,18 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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);
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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/UIChoiceGroup/UIChoiceGroup.d.ts

@@ -1,29 +1,29 @@
-import React from 'react';
-import type { IChoiceGroupOption, IChoiceGroupProps, IChoiceGroupStyles, IChoiceGroupOptionProps } from '@fluentui/react';
-export type ChoiceGroupOption = IChoiceGroupOption;
-export type ChoiceGroupOptionProps = IChoiceGroupOptionProps;
-export interface ChoiceGroupProps extends IChoiceGroupProps {
-    inline?: boolean;
-}
-/**
- * UIChoiceGroup component.
- * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/choicegroup
- *
- * @exports
- * @class UIChoiceGroup
- * @extends {React.Component<IChoiceGroupProps, {}>}
- */
-export declare class UIChoiceGroup extends React.Component<ChoiceGroupProps, {}> {
-    /**
-     * Initializes component properties.
-     *
-     * @param {ChoiceGroupProps} props
-     */
-    constructor(props: ChoiceGroupProps);
-    setStyles: () => Partial<IChoiceGroupStyles>;
-    /**
-     * @returns {JSX.Element}
-     */
-    render(): JSX.Element;
-}
+import React from 'react';
+import type { IChoiceGroupOption, IChoiceGroupProps, IChoiceGroupStyles, IChoiceGroupOptionProps } from '@fluentui/react';
+export type ChoiceGroupOption = IChoiceGroupOption;
+export type ChoiceGroupOptionProps = IChoiceGroupOptionProps;
+export interface ChoiceGroupProps extends IChoiceGroupProps {
+    inline?: boolean;
+}
+/**
+ * UIChoiceGroup component.
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/choicegroup
+ *
+ * @exports
+ * @class UIChoiceGroup
+ * @extends {React.Component<IChoiceGroupProps, {}>}
+ */
+export declare class UIChoiceGroup extends React.Component<ChoiceGroupProps, {}> {
+    /**
+     * Initializes component properties.
+     *
+     * @param {ChoiceGroupProps} props
+     */
+    constructor(props: ChoiceGroupProps);
+    setStyles: () => Partial<IChoiceGroupStyles>;
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
 //# sourceMappingURL=UIChoiceGroup.d.ts.map