@sap-ux/ui-components 1.8.2 → 1.8.4

package/dist/components/UIToggle/UIToggle.js

@@ -1,182 +1,182 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UIToggle = exports.UIToggleSize = void 0;
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@fluentui/react");
-const ValidationMessage_1 = require("../../helper/ValidationMessage");
-var UIToggleSize;
-(function (UIToggleSize) {
-    UIToggleSize["Standard"] = "Standard";
-    UIToggleSize["Small"] = "Small";
-})(UIToggleSize = exports.UIToggleSize || (exports.UIToggleSize = {}));
-const TOGGLE_SIZES = new Map([
-    [
-        UIToggleSize.Small,
-        {
-            width: 30,
-            height: 14,
-            padding: '0 2px',
-            margin: '0',
-            label: {
-                fontSize: 13,
-                padding: '2px 0'
-            },
-            circle: {
-                width: 10,
-                height: 10,
-                borderWidth: 5
-            }
-        }
-    ]
-]);
-const DISABLED_OPACITY = 0.4;
-const COLORS = {
-    pill: {
-        borderColor: 'var(--vscode-contrastBorder, transparent)',
-        unchecked: {
-            background: 'var(--vscode-titleBar-inactiveForeground)',
-            hover: {
-                background: 'var(--vscode-editorHint-foreground)',
-                borderColor: 'var(--vscode-contrastActiveBorder, transparent)'
-            }
-        },
-        checked: {
-            background: 'var(--vscode-button-background)',
-            hover: {
-                background: 'var(--vscode-button-hoverBackground)',
-                borderColor: 'var(--vscode-contrastActiveBorder, transparent)'
-            }
-        },
-        focus: {
-            outline: '1px solid var(--vscode-focusBorder) !important'
-        }
-    },
-    thumb: {
-        background: 'var(--vscode-button-foreground)'
-    }
-};
-/**
- * UIToggle component.
- * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle
- *
- * @exports
- * @class UIToggle
- * @extends {React.Component<IToggleProps, {}>}
- */
-class UIToggle extends react_1.default.Component {
-    /**
-     * Initializes component properties.
-     *
-     * @param {UIToggleProps} props
-     */
-    constructor(props) {
-        super(props);
-    }
-    /**
-     * Method returns size of margin bottom for root container depending on current props state.
-     *
-     * @param {string} [message] Validation message.
-     * @returns {number | undefined} Value for margin bottom.
-     */
-    getMarginBottom(message) {
-        const { inlineLabel } = this.props;
-        if (message) {
-            return inlineLabel ? 0 : 4;
-        }
-        return undefined;
-    }
-    /**
-     * @returns {JSX.Element}
-     */
-    render() {
-        const { inlineLabelLeft, labelFlexGrow, size, inlineLabel } = this.props;
-        const sizeInfo = TOGGLE_SIZES.get(size || UIToggleSize.Standard);
-        const messageInfo = (0, ValidationMessage_1.getMessageInfo)(this.props);
-        const styles = (styleProps) => {
-            return {
-                root: {
-                    ...(labelFlexGrow && {
-                        flexGrow: 1
-                    }),
-                    margin: sizeInfo?.margin,
-                    marginBottom: this.getMarginBottom(messageInfo.message)
-                },
-                label: {
-                    color: 'var(--vscode-foreground)',
-                    fontWeight: 'normal',
-                    fontSize: sizeInfo?.label.fontSize,
-                    padding: sizeInfo?.label.padding,
-                    ...(inlineLabel && { marginLeft: 10 }),
-                    ...(inlineLabelLeft && {
-                        order: 0,
-                        marginLeft: 0,
-                        marginRight: 10
-                    }),
-                    ...(labelFlexGrow && {
-                        flexGrow: 1
-                    }),
-                    opacity: this.props.disabled ? DISABLED_OPACITY : 'inherit'
-                },
-                pill: {
-                    height: sizeInfo?.height,
-                    width: sizeInfo?.width,
-                    padding: sizeInfo?.padding,
-                    background: COLORS.pill.checked.background,
-                    borderColor: COLORS.pill.borderColor,
-                    borderStyle: 'solid',
-                    ':hover': {
-                        background: COLORS.pill.checked.hover.background,
-                        borderColor: COLORS.pill.checked.hover.borderColor
-                    },
-                    [`:hover .ms-Toggle-thumb`]: {
-                        backgroundColor: COLORS.thumb.background
-                    },
-                    ':disabled': {
-                        background: COLORS.pill.checked.background,
-                        borderColor: COLORS.pill.borderColor,
-                        opacity: DISABLED_OPACITY
-                    },
-                    ...(!styleProps.checked && {
-                        background: COLORS.pill.unchecked.background,
-                        borderStyle: 'dashed',
-                        ':hover': {
-                            background: COLORS.pill.unchecked.hover.background,
-                            borderColor: COLORS.pill.unchecked.hover.borderColor
-                        },
-                        [`:hover .ms-Toggle-thumb`]: {
-                            backgroundColor: COLORS.thumb.background
-                        },
-                        ':disabled': {
-                            background: COLORS.pill.unchecked.background,
-                            borderColor: COLORS.pill.borderColor,
-                            opacity: DISABLED_OPACITY
-                        }
-                    }),
-                    selectors: {
-                        ':focus::after': {
-                            // Overwrite flunt ui focus borders
-                            border: 'none !important',
-                            outline: COLORS.pill.focus.outline
-                        }
-                    }
-                },
-                thumb: {
-                    height: sizeInfo?.circle.height,
-                    width: sizeInfo?.circle.width,
-                    borderWidth: sizeInfo?.circle.borderWidth,
-                    background: COLORS.thumb.background,
-                    ':hover': {
-                        backgroundColor: COLORS.thumb.background
-                    }
-                }
-            };
-        };
-        const toogleComponent = react_1.default.createElement(react_2.Toggle, { ...this.props, styles: styles });
-        return messageInfo.message ? (react_1.default.createElement(ValidationMessage_1.MessageWrapper, { message: messageInfo }, toogleComponent)) : (toogleComponent);
-    }
-}
-exports.UIToggle = UIToggle;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIToggle = exports.UIToggleSize = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@fluentui/react");
+const ValidationMessage_1 = require("../../helper/ValidationMessage");
+var UIToggleSize;
+(function (UIToggleSize) {
+    UIToggleSize["Standard"] = "Standard";
+    UIToggleSize["Small"] = "Small";
+})(UIToggleSize = exports.UIToggleSize || (exports.UIToggleSize = {}));
+const TOGGLE_SIZES = new Map([
+    [
+        UIToggleSize.Small,
+        {
+            width: 30,
+            height: 14,
+            padding: '0 2px',
+            margin: '0',
+            label: {
+                fontSize: 13,
+                padding: '2px 0'
+            },
+            circle: {
+                width: 10,
+                height: 10,
+                borderWidth: 5
+            }
+        }
+    ]
+]);
+const DISABLED_OPACITY = 0.4;
+const COLORS = {
+    pill: {
+        borderColor: 'var(--vscode-contrastBorder, transparent)',
+        unchecked: {
+            background: 'var(--vscode-titleBar-inactiveForeground)',
+            hover: {
+                background: 'var(--vscode-editorHint-foreground)',
+                borderColor: 'var(--vscode-contrastActiveBorder, transparent)'
+            }
+        },
+        checked: {
+            background: 'var(--vscode-button-background)',
+            hover: {
+                background: 'var(--vscode-button-hoverBackground)',
+                borderColor: 'var(--vscode-contrastActiveBorder, transparent)'
+            }
+        },
+        focus: {
+            outline: '1px solid var(--vscode-focusBorder) !important'
+        }
+    },
+    thumb: {
+        background: 'var(--vscode-button-foreground)'
+    }
+};
+/**
+ * UIToggle component.
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle
+ *
+ * @exports
+ * @class UIToggle
+ * @extends {React.Component<IToggleProps, {}>}
+ */
+class UIToggle extends react_1.default.Component {
+    /**
+     * Initializes component properties.
+     *
+     * @param {UIToggleProps} props
+     */
+    constructor(props) {
+        super(props);
+    }
+    /**
+     * Method returns size of margin bottom for root container depending on current props state.
+     *
+     * @param {string} [message] Validation message.
+     * @returns {number | undefined} Value for margin bottom.
+     */
+    getMarginBottom(message) {
+        const { inlineLabel } = this.props;
+        if (message) {
+            return inlineLabel ? 0 : 4;
+        }
+        return undefined;
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        const { inlineLabelLeft, labelFlexGrow, size, inlineLabel } = this.props;
+        const sizeInfo = TOGGLE_SIZES.get(size || UIToggleSize.Standard);
+        const messageInfo = (0, ValidationMessage_1.getMessageInfo)(this.props);
+        const styles = (styleProps) => {
+            return {
+                root: {
+                    ...(labelFlexGrow && {
+                        flexGrow: 1
+                    }),
+                    margin: sizeInfo?.margin,
+                    marginBottom: this.getMarginBottom(messageInfo.message)
+                },
+                label: {
+                    color: 'var(--vscode-foreground)',
+                    fontWeight: 'normal',
+                    fontSize: sizeInfo?.label.fontSize,
+                    padding: sizeInfo?.label.padding,
+                    ...(inlineLabel && { marginLeft: 10 }),
+                    ...(inlineLabelLeft && {
+                        order: 0,
+                        marginLeft: 0,
+                        marginRight: 10
+                    }),
+                    ...(labelFlexGrow && {
+                        flexGrow: 1
+                    }),
+                    opacity: this.props.disabled ? DISABLED_OPACITY : 'inherit'
+                },
+                pill: {
+                    height: sizeInfo?.height,
+                    width: sizeInfo?.width,
+                    padding: sizeInfo?.padding,
+                    background: COLORS.pill.checked.background,
+                    borderColor: COLORS.pill.borderColor,
+                    borderStyle: 'solid',
+                    ':hover': {
+                        background: COLORS.pill.checked.hover.background,
+                        borderColor: COLORS.pill.checked.hover.borderColor
+                    },
+                    [`:hover .ms-Toggle-thumb`]: {
+                        backgroundColor: COLORS.thumb.background
+                    },
+                    ':disabled': {
+                        background: COLORS.pill.checked.background,
+                        borderColor: COLORS.pill.borderColor,
+                        opacity: DISABLED_OPACITY
+                    },
+                    ...(!styleProps.checked && {
+                        background: COLORS.pill.unchecked.background,
+                        borderStyle: 'dashed',
+                        ':hover': {
+                            background: COLORS.pill.unchecked.hover.background,
+                            borderColor: COLORS.pill.unchecked.hover.borderColor
+                        },
+                        [`:hover .ms-Toggle-thumb`]: {
+                            backgroundColor: COLORS.thumb.background
+                        },
+                        ':disabled': {
+                            background: COLORS.pill.unchecked.background,
+                            borderColor: COLORS.pill.borderColor,
+                            opacity: DISABLED_OPACITY
+                        }
+                    }),
+                    selectors: {
+                        ':focus::after': {
+                            // Overwrite flunt ui focus borders
+                            border: 'none !important',
+                            outline: COLORS.pill.focus.outline
+                        }
+                    }
+                },
+                thumb: {
+                    height: sizeInfo?.circle.height,
+                    width: sizeInfo?.circle.width,
+                    borderWidth: sizeInfo?.circle.borderWidth,
+                    background: COLORS.thumb.background,
+                    ':hover': {
+                        backgroundColor: COLORS.thumb.background
+                    }
+                }
+            };
+        };
+        const toogleComponent = react_1.default.createElement(react_2.Toggle, { ...this.props, styles: styles });
+        return messageInfo.message ? (react_1.default.createElement(ValidationMessage_1.MessageWrapper, { message: messageInfo }, toogleComponent)) : (toogleComponent);
+    }
+}
+exports.UIToggle = UIToggle;
 //# sourceMappingURL=UIToggle.js.map

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

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

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

package/dist/components/UIToggleGroup/UIToggleGroup.d.ts

@@ -1,32 +1,32 @@
-import * as React from 'react';
-import type { UIToggleGroupProps, ToggleGroupOption } from './UIToggleGroup.types';
-import type { UIToggleGroupOptionProps } from './UIToggleGroupOption/UIToggleGroupOption.types';
-import './UIToggleGroup.scss';
-interface UIToggleGroupState {
-    options: ToggleGroupOption[];
-}
-/**
- * UIToggleGroup component.
- *
- * @exports
- * @class UIToggleGroup
- * @extends {React.Component<UIToggleGroupProps, UIToggleGroupState>}
- */
-export declare class UIToggleGroup extends React.Component<UIToggleGroupProps, UIToggleGroupState> {
-    labelId: string;
-    /**
-     * Initializes component properties.
-     *
-     * @param {UIToggleGroupProps} props
-     */
-    constructor(props: UIToggleGroupProps);
-    onClick: (_evt: React.MouseEvent<HTMLButtonElement, MouseEvent>, option?: UIToggleGroupOptionProps) => void;
-    onFocus: (_evt: React.FocusEvent<HTMLButtonElement>, option?: UIToggleGroupOptionProps) => void;
-    onBlur: (_evt: React.FocusEvent<HTMLButtonElement>, _option?: UIToggleGroupOptionProps) => void;
-    /**
-     * @returns {JSX.Element}
-     */
-    render(): JSX.Element;
-}
-export {};
+import * as React from 'react';
+import type { UIToggleGroupProps, ToggleGroupOption } from './UIToggleGroup.types';
+import type { UIToggleGroupOptionProps } from './UIToggleGroupOption/UIToggleGroupOption.types';
+import './UIToggleGroup.scss';
+interface UIToggleGroupState {
+    options: ToggleGroupOption[];
+}
+/**
+ * UIToggleGroup component.
+ *
+ * @exports
+ * @class UIToggleGroup
+ * @extends {React.Component<UIToggleGroupProps, UIToggleGroupState>}
+ */
+export declare class UIToggleGroup extends React.Component<UIToggleGroupProps, UIToggleGroupState> {
+    labelId: string;
+    /**
+     * Initializes component properties.
+     *
+     * @param {UIToggleGroupProps} props
+     */
+    constructor(props: UIToggleGroupProps);
+    onClick: (_evt: React.MouseEvent<HTMLButtonElement, MouseEvent>, option?: UIToggleGroupOptionProps) => void;
+    onFocus: (_evt: React.FocusEvent<HTMLButtonElement>, option?: UIToggleGroupOptionProps) => void;
+    onBlur: (_evt: React.FocusEvent<HTMLButtonElement>, _option?: UIToggleGroupOptionProps) => void;
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
+export {};
 //# sourceMappingURL=UIToggleGroup.d.ts.map