@sap-ux/ui-components 1.13.5 → 1.14.1

package/dist/components/UIChoiceGroup/UIChoiceGroup.js

@@ -1,183 +1,183 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UIChoiceGroup = void 0;
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@fluentui/react");
-const UILabel_1 = require("../UILabel");
-// Reusable styles
-const UI_CHOICE_GROUP_LABEL_STYLE = {
-    fontSize: 13,
-    family: 'var(--vscode-font-family)',
-    disableOpacity: 0.4
-};
-const UI_CHOICE_GROUP_STYLES = {
-    label: {
-        ...UI_CHOICE_GROUP_LABEL_STYLE,
-        color: 'var(--vscode-input-foreground)'
-    },
-    radio: {
-        borderColor: 'var(--vscode-editorWidget-border)',
-        background: 'var(--vscode-input-background)',
-        bullet: {
-            background: 'var(--vscode-input-foreground)'
-        },
-        hover: {
-            background: 'var(--vscode-focusBorder)'
-        },
-        focus: {
-            borderColor: 'var(--vscode-focusBorder)'
-        },
-        label: {
-            ...UI_CHOICE_GROUP_LABEL_STYLE,
-            color: 'var(--vscode-foreground)'
-        }
-    }
-};
-/**
- * UIChoiceGroup component.
- * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/choicegroup
- *
- * @exports
- * @class UIChoiceGroup
- * @extends {React.Component<IChoiceGroupProps, {}>}
- */
-class UIChoiceGroup extends react_1.default.Component {
-    /**
-     * Initializes component properties.
-     *
-     * @param {ChoiceGroupProps} props
-     */
-    constructor(props) {
-        super(props);
-        this.setStyles = () => {
-            return {
-                root: {
-                    // Label
-                    '.ms-ChoiceFieldGroup label.ms-Label': {
-                        fontWeight: 'bold',
-                        fontSize: UI_CHOICE_GROUP_STYLES.label.fontSize,
-                        fontStyle: 'normal',
-                        lineHeight: 15,
-                        color: UI_CHOICE_GROUP_STYLES.label.color,
-                        marginTop: 10,
-                        padding: 0
-                    },
-                    // Choice/Radio field
-                    '.ms-ChoiceField': {
-                        minHeight: 20
-                    },
-                    '.ms-ChoiceField-field': {
-                        fontWeight: 'normal',
-                        fontSize: UI_CHOICE_GROUP_STYLES.radio.label.fontSize,
-                        fontStyle: 'normal',
-                        lineHeight: 18,
-                        color: UI_CHOICE_GROUP_STYLES.radio.label.color,
-                        margin: 0
-                    },
-                    '.ms-ChoiceField-field::before': {
-                        backgroundColor: UI_CHOICE_GROUP_STYLES.radio.background,
-                        borderColor: UI_CHOICE_GROUP_STYLES.radio.borderColor,
-                        top: 0,
-                        left: 0,
-                        width: 18,
-                        height: 18
-                    },
-                    '.ms-ChoiceField-field::after': {
-                        left: 5,
-                        top: 5,
-                        height: 8,
-                        width: 8,
-                        borderWidth: 4,
-                        backgroundColor: UI_CHOICE_GROUP_STYLES.radio.background,
-                        // Remove animation
-                        transition: 'none'
-                    },
-                    // Option Label
-                    '.ms-ChoiceFieldLabel': {
-                        paddingLeft: 26
-                    },
-                    // Checked/Selected
-                    '.ms-ChoiceField-field.is-checked::after': {
-                        borderColor: UI_CHOICE_GROUP_STYLES.radio.bullet.background
-                    },
-                    // Hover
-                    '.ms-ChoiceField-field:hover': {
-                        'span.ms-ChoiceFieldLabel': {
-                            color: UI_CHOICE_GROUP_STYLES.radio.label.color
-                        },
-                        '::before': {
-                            borderColor: UI_CHOICE_GROUP_STYLES.radio.hover.background
-                        },
-                        '::after': {
-                            borderColor: 'transparent',
-                            background: 'transparent'
-                        }
-                    },
-                    // Hover + selected
-                    'label.ms-ChoiceField-field.is-checked:hover::after': {
-                        borderColor: UI_CHOICE_GROUP_STYLES.radio.bullet.background
-                    },
-                    // Focus
-                    '.ms-ChoiceField-wrapper.is-inFocus::after': {
-                        borderColor: UI_CHOICE_GROUP_STYLES.radio.focus.borderColor
-                    },
-                    '.ms-ChoiceField-input:focus': {
-                        opacity: 0
-                    },
-                    // Disabled State
-                    '.is-disabled + .ms-ChoiceField-field': {
-                        ' .ms-ChoiceFieldLabel': {
-                            opacity: UI_CHOICE_GROUP_STYLES.radio.label.disableOpacity,
-                            color: UI_CHOICE_GROUP_STYLES.radio.label.color
-                        },
-                        ':hover::before': {
-                            borderColor: UI_CHOICE_GROUP_STYLES.radio.borderColor
-                        },
-                        ':after': {
-                            opacity: UI_CHOICE_GROUP_STYLES.radio.label.disableOpacity
-                        }
-                    }
-                },
-                label: {
-                    ...UILabel_1.labelGlobalStyle,
-                    ...(this.props.disabled && {
-                        opacity: UI_CHOICE_GROUP_STYLES.label.disableOpacity,
-                        color: UI_CHOICE_GROUP_STYLES.label.color
-                    }),
-                    ...(this.props.required && {
-                        selectors: {
-                            '::after': {
-                                content: `' *'`,
-                                color: 'var(--vscode-inputValidation-errorBorder)',
-                                paddingRight: 12
-                            }
-                        }
-                    })
-                },
-                ...(this.props.inline && {
-                    flexContainer: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        flexWrap: 'wrap',
-                        selectors: {
-                            '> .ms-ChoiceField': {
-                                paddingRight: 16
-                            }
-                        }
-                    }
-                })
-            };
-        };
-    }
-    /**
-     * @returns {JSX.Element}
-     */
-    render() {
-        return react_1.default.createElement(react_2.ChoiceGroup, { styles: this.setStyles, ...this.props });
-    }
-}
-exports.UIChoiceGroup = UIChoiceGroup;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIChoiceGroup = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@fluentui/react");
+const UILabel_1 = require("../UILabel");
+// Reusable styles
+const UI_CHOICE_GROUP_LABEL_STYLE = {
+    fontSize: 13,
+    family: 'var(--vscode-font-family)',
+    disableOpacity: 0.4
+};
+const UI_CHOICE_GROUP_STYLES = {
+    label: {
+        ...UI_CHOICE_GROUP_LABEL_STYLE,
+        color: 'var(--vscode-input-foreground)'
+    },
+    radio: {
+        borderColor: 'var(--vscode-editorWidget-border)',
+        background: 'var(--vscode-input-background)',
+        bullet: {
+            background: 'var(--vscode-input-foreground)'
+        },
+        hover: {
+            background: 'var(--vscode-focusBorder)'
+        },
+        focus: {
+            borderColor: 'var(--vscode-focusBorder)'
+        },
+        label: {
+            ...UI_CHOICE_GROUP_LABEL_STYLE,
+            color: 'var(--vscode-foreground)'
+        }
+    }
+};
+/**
+ * UIChoiceGroup component.
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/choicegroup
+ *
+ * @exports
+ * @class UIChoiceGroup
+ * @extends {React.Component<IChoiceGroupProps, {}>}
+ */
+class UIChoiceGroup extends react_1.default.Component {
+    /**
+     * Initializes component properties.
+     *
+     * @param {ChoiceGroupProps} props
+     */
+    constructor(props) {
+        super(props);
+        this.setStyles = () => {
+            return {
+                root: {
+                    // Label
+                    '.ms-ChoiceFieldGroup label.ms-Label': {
+                        fontWeight: 'bold',
+                        fontSize: UI_CHOICE_GROUP_STYLES.label.fontSize,
+                        fontStyle: 'normal',
+                        lineHeight: 15,
+                        color: UI_CHOICE_GROUP_STYLES.label.color,
+                        marginTop: 10,
+                        padding: 0
+                    },
+                    // Choice/Radio field
+                    '.ms-ChoiceField': {
+                        minHeight: 20
+                    },
+                    '.ms-ChoiceField-field': {
+                        fontWeight: 'normal',
+                        fontSize: UI_CHOICE_GROUP_STYLES.radio.label.fontSize,
+                        fontStyle: 'normal',
+                        lineHeight: 18,
+                        color: UI_CHOICE_GROUP_STYLES.radio.label.color,
+                        margin: 0
+                    },
+                    '.ms-ChoiceField-field::before': {
+                        backgroundColor: UI_CHOICE_GROUP_STYLES.radio.background,
+                        borderColor: UI_CHOICE_GROUP_STYLES.radio.borderColor,
+                        top: 0,
+                        left: 0,
+                        width: 18,
+                        height: 18
+                    },
+                    '.ms-ChoiceField-field::after': {
+                        left: 5,
+                        top: 5,
+                        height: 8,
+                        width: 8,
+                        borderWidth: 4,
+                        backgroundColor: UI_CHOICE_GROUP_STYLES.radio.background,
+                        // Remove animation
+                        transition: 'none'
+                    },
+                    // Option Label
+                    '.ms-ChoiceFieldLabel': {
+                        paddingLeft: 26
+                    },
+                    // Checked/Selected
+                    '.ms-ChoiceField-field.is-checked::after': {
+                        borderColor: UI_CHOICE_GROUP_STYLES.radio.bullet.background
+                    },
+                    // Hover
+                    '.ms-ChoiceField-field:hover': {
+                        'span.ms-ChoiceFieldLabel': {
+                            color: UI_CHOICE_GROUP_STYLES.radio.label.color
+                        },
+                        '::before': {
+                            borderColor: UI_CHOICE_GROUP_STYLES.radio.hover.background
+                        },
+                        '::after': {
+                            borderColor: 'transparent',
+                            background: 'transparent'
+                        }
+                    },
+                    // Hover + selected
+                    'label.ms-ChoiceField-field.is-checked:hover::after': {
+                        borderColor: UI_CHOICE_GROUP_STYLES.radio.bullet.background
+                    },
+                    // Focus
+                    '.ms-ChoiceField-wrapper.is-inFocus::after': {
+                        borderColor: UI_CHOICE_GROUP_STYLES.radio.focus.borderColor
+                    },
+                    '.ms-ChoiceField-input:focus': {
+                        opacity: 0
+                    },
+                    // Disabled State
+                    '.is-disabled + .ms-ChoiceField-field': {
+                        ' .ms-ChoiceFieldLabel': {
+                            opacity: UI_CHOICE_GROUP_STYLES.radio.label.disableOpacity,
+                            color: UI_CHOICE_GROUP_STYLES.radio.label.color
+                        },
+                        ':hover::before': {
+                            borderColor: UI_CHOICE_GROUP_STYLES.radio.borderColor
+                        },
+                        ':after': {
+                            opacity: UI_CHOICE_GROUP_STYLES.radio.label.disableOpacity
+                        }
+                    }
+                },
+                label: {
+                    ...UILabel_1.labelGlobalStyle,
+                    ...(this.props.disabled && {
+                        opacity: UI_CHOICE_GROUP_STYLES.label.disableOpacity,
+                        color: UI_CHOICE_GROUP_STYLES.label.color
+                    }),
+                    ...(this.props.required && {
+                        selectors: {
+                            '::after': {
+                                content: `' *'`,
+                                color: 'var(--vscode-inputValidation-errorBorder)',
+                                paddingRight: 12
+                            }
+                        }
+                    })
+                },
+                ...(this.props.inline && {
+                    flexContainer: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        flexWrap: 'wrap',
+                        selectors: {
+                            '> .ms-ChoiceField': {
+                                paddingRight: 16
+                            }
+                        }
+                    }
+                })
+            };
+        };
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        return react_1.default.createElement(react_2.ChoiceGroup, { styles: this.setStyles, ...this.props });
+    }
+}
+exports.UIChoiceGroup = UIChoiceGroup;
 //# sourceMappingURL=UIChoiceGroup.js.map

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

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

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