@sap-ux/ui-components 1.8.2 → 1.8.3

package/dist/components/UIInput/UITextInput.js

@@ -1,239 +1,239 @@
-"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");
-const COLOR_STYLES = {
-    regular: {
-        backgroundColor: 'var(--vscode-input-background)',
-        borderColor: 'var(--vscode-editorWidget-border)',
-        color: 'var(--vscode-input-foreground)',
-        borderStyle: 'solid'
-    },
-    disabled: {
-        backgroundColor: 'var(--vscode-editor-inactiveSelectionBackground)',
-        opacity: 0.5
-    },
-    readOnly: {
-        backgroundColor: 'var(--vscode-editor-background)',
-        borderStyle: 'dashed'
-    },
-    hover: {
-        borderColor: 'var(--vscode-focusBorder)'
-    },
-    focus: {
-        borderColor: 'var(--vscode-focusBorder)'
-    }
-};
-/**
- * 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);
-        /**
-         * Method returns styles for text field.
-         *
-         * @param {ITextFieldStyleProps} props Component properties.
-         * @returns {Partial<ITextFieldStyles>} Styles to apply for text field.
-         */
-        this.getStyles = (props) => {
-            const messageInfo = (0, ValidationMessage_1.getMessageInfo)(this.props);
-            return {
-                ...{
-                    root: {
-                        height: 'auto',
-                        fontFamily: 'var(--vscode-font-family)'
-                    },
-                    fieldGroup: [
-                        // Common styles
-                        {
-                            backgroundColor: COLOR_STYLES.regular.backgroundColor,
-                            borderWidth: 1,
-                            borderStyle: COLOR_STYLES.regular.borderStyle,
-                            borderColor: COLOR_STYLES.regular.borderColor,
-                            color: COLOR_STYLES.regular.color,
-                            borderRadius: 0,
-                            boxSizing: 'initial'
-                        },
-                        // Single line common styles
-                        !props.multiline && {
-                            height: 24,
-                            maxHeight: 24,
-                            minHeight: 24
-                        },
-                        // Hoverable input
-                        !props.disabled && {
-                            selectors: {
-                                '&:hover': {
-                                    borderColor: COLOR_STYLES.hover.borderColor
-                                }
-                            }
-                        },
-                        // Disabled field
-                        props.disabled && {
-                            backgroundColor: COLOR_STYLES.disabled.backgroundColor,
-                            opacity: COLOR_STYLES.disabled.opacity,
-                            borderRadius: 0
-                        },
-                        // Read only container - disable hover style
-                        this.props.readOnly && {
-                            borderStyle: COLOR_STYLES.readOnly.borderStyle,
-                            backgroundColor: COLOR_STYLES.readOnly.backgroundColor,
-                            // No hover efect on input without value
-                            selectors: !this.props.value
-                                ? {
-                                    '&:hover': {
-                                        borderColor: 'var(--vscode-editorWidget-border)'
-                                    }
-                                }
-                                : undefined
-                        },
-                        // Error message
-                        props.hasErrorMessage && {
-                            borderColor: messageInfo.style.borderColor
-                        },
-                        props.focused && {
-                            selectors: {
-                                ':after': {
-                                    border: this.getFocusBorder(messageInfo)
-                                }
-                            }
-                        }
-                    ],
-                    field: [
-                        // Common styles
-                        {
-                            backgroundColor: COLOR_STYLES.regular.backgroundColor,
-                            color: COLOR_STYLES.regular.color,
-                            fontSize: '13px',
-                            fontWeight: 'normal',
-                            boxSizing: 'border-box',
-                            selectors: {
-                                '::placeholder': {
-                                    fontSize: 13,
-                                    fontFamily: 'var(--vscode-font-family)',
-                                    color: 'var(--vscode-input-placeholderForeground)'
-                                }
-                            }
-                        },
-                        // Single line common styles
-                        !props.multiline && {
-                            lineHeight: 'normal'
-                        },
-                        // Multi line common styles
-                        props.multiline && {
-                            minHeight: '60px',
-                            height: 'auto',
-                            display: 'flex'
-                        },
-                        // Disabled input
-                        props.disabled && {
-                            backgroundColor: 'transparent'
-                        },
-                        // Readonly input
-                        this.props.readOnly && {
-                            fontStyle: 'italic',
-                            backgroundColor: COLOR_STYLES.readOnly.backgroundColor
-                        },
-                        // Input with icon
-                        props.hasIcon && {
-                            selectors: {
-                                '&:hover': {
-                                    cursor: 'pointer'
-                                }
-                            }
-                        }
-                    ],
-                    suffix: {
-                        backgroundColor: 'var(--vscode-input-background)'
-                    },
-                    subComponentStyles: {
-                        label: {
-                            root: [
-                                {
-                                    marginTop: 25,
-                                    ...UILabel_1.labelGlobalStyle
-                                },
-                                props.disabled && {
-                                    opacity: COLOR_STYLES.disabled.opacity
-                                },
-                                props.required && {
-                                    selectors: {
-                                        '::after': {
-                                            content: `' *'`,
-                                            color: 'var(--vscode-inputValidation-errorBorder)',
-                                            paddingRight: 12
-                                        }
-                                    }
-                                }
-                            ]
-                        }
-                    },
-                    errorMessage: [messageInfo.style],
-                    icon: [
-                        {
-                            bottom: 2
-                        }
-                    ]
-                }
-            };
-        };
-        /**
-         * Method to render HTML input element.
-         * Custom rendering is used to use "readonly" attribute instead of "disabled" to make disabled field focusable.
-         *
-         * @param {InputRenderProps} [props] Input props.
-         * @param {(props?: InputRenderProps) => JSX.Element | null} [defaultRender] Default renderer.
-         * @returns {JSX.Element | null} Input element to render.
-         */
-        this.onRenderDisabledInput = (props, defaultRender) => {
-            const inputProps = {
-                ...props,
-                disabled: undefined,
-                readOnly: true,
-                ['aria-disabled']: true
-            };
-            return defaultRender?.(inputProps) || null;
-        };
-        this.onRenderDisabledInput = this.onRenderDisabledInput.bind(this);
-    }
-    /**
-     * Method returns value for CSS property "border" for focus state.
-     *
-     * @param {InputValidationMessageInfo} messageInfo
-     * @returns {string} Value for CSS "border" property.
-     */
-    getFocusBorder(messageInfo) {
-        let color = COLOR_STYLES.focus.borderColor;
-        if (this.props.errorMessage && messageInfo.style.borderColor) {
-            color = `var(${messageInfo.style.borderColor})`;
-        }
-        return `1px ${COLOR_STYLES.regular.borderStyle} ${color}`;
-    }
-    /**
-     * @returns {JSX.Element}
-     */
-    render() {
-        const messageInfo = (0, ValidationMessage_1.getMessageInfo)(this.props);
-        const textFieldStyles = this.getStyles;
-        return (react_1.default.createElement(react_2.TextField, { onRenderInput: this.props.disabled ? this.onRenderDisabledInput : undefined, ...this.props, errorMessage: messageInfo.message, styles: textFieldStyles }));
-    }
-}
-exports.UITextInput = UITextInput;
+"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");
+const COLOR_STYLES = {
+    regular: {
+        backgroundColor: 'var(--vscode-input-background)',
+        borderColor: 'var(--vscode-editorWidget-border)',
+        color: 'var(--vscode-input-foreground)',
+        borderStyle: 'solid'
+    },
+    disabled: {
+        backgroundColor: 'var(--vscode-editor-inactiveSelectionBackground)',
+        opacity: 0.5
+    },
+    readOnly: {
+        backgroundColor: 'var(--vscode-editor-background)',
+        borderStyle: 'dashed'
+    },
+    hover: {
+        borderColor: 'var(--vscode-focusBorder)'
+    },
+    focus: {
+        borderColor: 'var(--vscode-focusBorder)'
+    }
+};
+/**
+ * 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);
+        /**
+         * Method returns styles for text field.
+         *
+         * @param {ITextFieldStyleProps} props Component properties.
+         * @returns {Partial<ITextFieldStyles>} Styles to apply for text field.
+         */
+        this.getStyles = (props) => {
+            const messageInfo = (0, ValidationMessage_1.getMessageInfo)(this.props);
+            return {
+                ...{
+                    root: {
+                        height: 'auto',
+                        fontFamily: 'var(--vscode-font-family)'
+                    },
+                    fieldGroup: [
+                        // Common styles
+                        {
+                            backgroundColor: COLOR_STYLES.regular.backgroundColor,
+                            borderWidth: 1,
+                            borderStyle: COLOR_STYLES.regular.borderStyle,
+                            borderColor: COLOR_STYLES.regular.borderColor,
+                            color: COLOR_STYLES.regular.color,
+                            borderRadius: 0,
+                            boxSizing: 'initial'
+                        },
+                        // Single line common styles
+                        !props.multiline && {
+                            height: 24,
+                            maxHeight: 24,
+                            minHeight: 24
+                        },
+                        // Hoverable input
+                        !props.disabled && {
+                            selectors: {
+                                '&:hover': {
+                                    borderColor: COLOR_STYLES.hover.borderColor
+                                }
+                            }
+                        },
+                        // Disabled field
+                        props.disabled && {
+                            backgroundColor: COLOR_STYLES.disabled.backgroundColor,
+                            opacity: COLOR_STYLES.disabled.opacity,
+                            borderRadius: 0
+                        },
+                        // Read only container - disable hover style
+                        this.props.readOnly && {
+                            borderStyle: COLOR_STYLES.readOnly.borderStyle,
+                            backgroundColor: COLOR_STYLES.readOnly.backgroundColor,
+                            // No hover efect on input without value
+                            selectors: !this.props.value
+                                ? {
+                                    '&:hover': {
+                                        borderColor: 'var(--vscode-editorWidget-border)'
+                                    }
+                                }
+                                : undefined
+                        },
+                        // Error message
+                        props.hasErrorMessage && {
+                            borderColor: messageInfo.style.borderColor
+                        },
+                        props.focused && {
+                            selectors: {
+                                ':after': {
+                                    border: this.getFocusBorder(messageInfo)
+                                }
+                            }
+                        }
+                    ],
+                    field: [
+                        // Common styles
+                        {
+                            backgroundColor: COLOR_STYLES.regular.backgroundColor,
+                            color: COLOR_STYLES.regular.color,
+                            fontSize: '13px',
+                            fontWeight: 'normal',
+                            boxSizing: 'border-box',
+                            selectors: {
+                                '::placeholder': {
+                                    fontSize: 13,
+                                    fontFamily: 'var(--vscode-font-family)',
+                                    color: 'var(--vscode-input-placeholderForeground)'
+                                }
+                            }
+                        },
+                        // Single line common styles
+                        !props.multiline && {
+                            lineHeight: 'normal'
+                        },
+                        // Multi line common styles
+                        props.multiline && {
+                            minHeight: '60px',
+                            height: 'auto',
+                            display: 'flex'
+                        },
+                        // Disabled input
+                        props.disabled && {
+                            backgroundColor: 'transparent'
+                        },
+                        // Readonly input
+                        this.props.readOnly && {
+                            fontStyle: 'italic',
+                            backgroundColor: COLOR_STYLES.readOnly.backgroundColor
+                        },
+                        // Input with icon
+                        props.hasIcon && {
+                            selectors: {
+                                '&:hover': {
+                                    cursor: 'pointer'
+                                }
+                            }
+                        }
+                    ],
+                    suffix: {
+                        backgroundColor: 'var(--vscode-input-background)'
+                    },
+                    subComponentStyles: {
+                        label: {
+                            root: [
+                                {
+                                    marginTop: 25,
+                                    ...UILabel_1.labelGlobalStyle
+                                },
+                                props.disabled && {
+                                    opacity: COLOR_STYLES.disabled.opacity
+                                },
+                                props.required && {
+                                    selectors: {
+                                        '::after': {
+                                            content: `' *'`,
+                                            color: 'var(--vscode-inputValidation-errorBorder)',
+                                            paddingRight: 12
+                                        }
+                                    }
+                                }
+                            ]
+                        }
+                    },
+                    errorMessage: [messageInfo.style],
+                    icon: [
+                        {
+                            bottom: 2
+                        }
+                    ]
+                }
+            };
+        };
+        /**
+         * Method to render HTML input element.
+         * Custom rendering is used to use "readonly" attribute instead of "disabled" to make disabled field focusable.
+         *
+         * @param {InputRenderProps} [props] Input props.
+         * @param {(props?: InputRenderProps) => JSX.Element | null} [defaultRender] Default renderer.
+         * @returns {JSX.Element | null} Input element to render.
+         */
+        this.onRenderDisabledInput = (props, defaultRender) => {
+            const inputProps = {
+                ...props,
+                disabled: undefined,
+                readOnly: true,
+                ['aria-disabled']: true
+            };
+            return defaultRender?.(inputProps) || null;
+        };
+        this.onRenderDisabledInput = this.onRenderDisabledInput.bind(this);
+    }
+    /**
+     * Method returns value for CSS property "border" for focus state.
+     *
+     * @param {InputValidationMessageInfo} messageInfo
+     * @returns {string} Value for CSS "border" property.
+     */
+    getFocusBorder(messageInfo) {
+        let color = COLOR_STYLES.focus.borderColor;
+        if (this.props.errorMessage && messageInfo.style.borderColor) {
+            color = `var(${messageInfo.style.borderColor})`;
+        }
+        return `1px ${COLOR_STYLES.regular.borderStyle} ${color}`;
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        const messageInfo = (0, ValidationMessage_1.getMessageInfo)(this.props);
+        const textFieldStyles = this.getStyles;
+        return (react_1.default.createElement(react_2.TextField, { onRenderInput: this.props.disabled ? this.onRenderDisabledInput : undefined, ...this.props, errorMessage: messageInfo.message, styles: textFieldStyles }));
+    }
+}
+exports.UITextInput = UITextInput;
 //# sourceMappingURL=UITextInput.js.map

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

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

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

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

@@ -1,31 +1,31 @@
-import React from 'react';
-import type { ILabelProps } from '@fluentui/react';
-export 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;
-}
+import React from 'react';
+import type { ILabelProps } from '@fluentui/react';
+export 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