@sap-ux/ui-components 1.8.0 → 1.8.2

package/dist/components/UITranslationInput/UITranslationInput.d.ts

@@ -1,26 +1,26 @@
-import type { ReactElement } from 'react';
-import type { ITextFieldProps } from '../UIInput';
-import type { UITranslationProps, I18nBundle, TranslationTextPattern, TranslationEntry } from './UITranslationButton.types';
-import { TranslationKeyGenerator } from './UITranslationButton.types';
-export interface UITranslationInputProps<T extends TranslationEntry> extends ITextFieldProps, UITranslationProps<T> {
-    id: string;
-    entries: I18nBundle<T>;
-    namingConvention?: TranslationKeyGenerator;
-    i18nPrefix: string;
-    allowedI18nPrefixes?: string[];
-    defaultPattern: TranslationTextPattern;
-    allowedPatterns: TranslationTextPattern[];
-}
-/**
- * Component to render translation input with button to provide helper callout with i18n generation option.
- *
- * @param props Component properties.
- * @returns Component to render translation input.
- */
-export declare const UITranslationInput: {
-    <T extends TranslationEntry = TranslationEntry>(props: UITranslationInputProps<T>): ReactElement;
-    defaultProps: {
-        strings: import("./UITranslationButton.types").TranslationInputStrings;
-    };
-};
+import type { ReactElement } from 'react';
+import type { ITextFieldProps } from '../UIInput';
+import type { UITranslationProps, I18nBundle, TranslationTextPattern, TranslationEntry } from './UITranslationButton.types';
+import { TranslationKeyGenerator } from './UITranslationButton.types';
+export interface UITranslationInputProps<T extends TranslationEntry> extends ITextFieldProps, UITranslationProps<T> {
+    id: string;
+    entries: I18nBundle<T>;
+    namingConvention?: TranslationKeyGenerator;
+    i18nPrefix: string;
+    allowedI18nPrefixes?: string[];
+    defaultPattern: TranslationTextPattern;
+    allowedPatterns: TranslationTextPattern[];
+}
+/**
+ * Component to render translation input with button to provide helper callout with i18n generation option.
+ *
+ * @param props Component properties.
+ * @returns Component to render translation input.
+ */
+export declare const UITranslationInput: {
+    <T extends TranslationEntry = TranslationEntry>(props: UITranslationInputProps<T>): ReactElement;
+    defaultProps: {
+        strings: import("./UITranslationButton.types").TranslationInputStrings;
+    };
+};
 //# sourceMappingURL=UITranslationInput.d.ts.map

package/dist/components/UITranslationInput/UITranslationInput.js

@@ -1,170 +1,170 @@
-"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UITranslationInput = void 0;
-const react_1 = __importStar(require("react"));
-const UIInput_1 = require("../UIInput");
-const Icons_1 = require("../Icons");
-const UITranslationButton_1 = require("./UITranslationButton");
-const UITranslationButton_types_1 = require("./UITranslationButton.types");
-const UITranslationUtils_1 = require("./UITranslationUtils");
-const defaults_1 = require("./defaults");
-const UIFormattedText_1 = require("./UIFormattedText");
-/**
- * Method returns suggestion object with message and tooltip based on passed translation button props.
- *
- * @param props Properties of translation input component.
- * @returns Translation suggestion object.
- */
-const getTranslationSuggestion = (props) => {
-    const { value = '', allowedPatterns, entries, strings = defaults_1.defaultTranslationInputStrings, namingConvention = UITranslationButton_types_1.TranslationKeyGenerator.CamelCase, defaultPattern, i18nPrefix, allowedI18nPrefixes } = props;
-    const i18nKey = (0, UITranslationUtils_1.extractI18nKey)(value, allowedPatterns, allowedI18nPrefixes || [i18nPrefix]);
-    let message = '';
-    let tooltip = '';
-    let suggest;
-    if (i18nKey) {
-        // There is already i18n binding as value
-        const entry = (0, UITranslationUtils_1.getTranslationByKey)(entries, i18nKey);
-        if (entry) {
-            tooltip = strings.i18nEntryExistsTooltip;
-            suggest = {
-                entry,
-                type: UITranslationButton_types_1.SuggestValueType.Existing,
-                icon: Icons_1.UiIcons.WorldArrow
-            };
-        }
-        else {
-            message = strings.i18nKeyMissingDescription;
-            tooltip = strings.i18nKeyMissingTooltip;
-            suggest = {
-                entry: {
-                    key: {
-                        value: i18nKey
-                    },
-                    value: {
-                        value: i18nKey
-                    }
-                },
-                type: UITranslationButton_types_1.SuggestValueType.New,
-                icon: Icons_1.UiIcons.WorldWarning
-            };
-        }
-    }
-    else {
-        // Use generation format passed from outside or use default as 'Standard';
-        const existingEntry = (0, UITranslationUtils_1.getTranslationByText)(entries, value);
-        if (existingEntry) {
-            message = strings.i18nReplaceWithExistingDescription;
-            tooltip = strings.i18nReplaceWithExistingTooltip;
-            suggest = {
-                entry: existingEntry,
-                type: UITranslationButton_types_1.SuggestValueType.Update
-            };
-        }
-        else {
-            message = strings.i18nValueMissingDescription;
-            tooltip = strings.i18nValueMissingTooltip;
-            const key = (0, UITranslationUtils_1.generateI18nKey)(value, namingConvention, entries);
-            suggest = {
-                entry: {
-                    key: {
-                        value: key
-                    },
-                    value: {
-                        value
-                    }
-                },
-                type: UITranslationButton_types_1.SuggestValueType.New
-            };
-        }
-    }
-    // I18n string to apply for input value
-    suggest.i18n = (0, UITranslationUtils_1.applyI18nPattern)(suggest.entry.key.value, defaultPattern, i18nPrefix);
-    // Format message to show in callout
-    const messageValues = {
-        key: suggest.entry.key.value,
-        value: suggest.entry.value.value,
-        i18n: suggest.i18n
-    };
-    tooltip = (0, UIFormattedText_1.formatText)(tooltip, messageValues);
-    return {
-        message: react_1.default.createElement(UIFormattedText_1.UIFormattedText, { values: messageValues }, message),
-        tooltip,
-        suggest
-    };
-};
-/**
- * Component to render translation input with button to provide helper callout with i18n generation option.
- *
- * @param props Component properties.
- * @returns Component to render translation input.
- */
-const UITranslationInput = (props) => {
-    const { id, className, onChange, value, allowedPatterns, defaultPattern, entries, busy, i18nPrefix, allowedI18nPrefixes, namingConvention, onCreateNewEntry, onShowExistingEntry, disabled, strings } = props;
-    const suggestion = getTranslationSuggestion(props);
-    let classNames = ' ui-translatable__input';
-    // Custom external classes
-    if (className) {
-        classNames += ` ${className}`;
-    }
-    const onUpdateValue = (0, react_1.useCallback)((newValue) => {
-        onChange?.({}, newValue);
-    }, [onChange]);
-    // Generate DOM id for i18n button
-    let buttonId = `${id}-i18n`;
-    let title = props.title;
-    if (suggestion.suggest?.type === UITranslationButton_types_1.SuggestValueType.Existing && strings?.i18nEntryExistsInputTooltip) {
-        // Change DOM id with additional suffix
-        buttonId += '-navigate';
-        if (!title) {
-            title = (0, UIFormattedText_1.formatText)(strings.i18nEntryExistsInputTooltip, {
-                value: value || '',
-                translation: suggestion.suggest.entry.value.value
-            });
-        }
-    }
-    const onRenderSuffix = (0, react_1.useCallback)(() => {
-        return (react_1.default.createElement(UITranslationButton_1.UITranslationButton, { id: buttonId, value: value, busy: busy, onCreateNewEntry: onCreateNewEntry, onShowExistingEntry: onShowExistingEntry, onUpdateValue: onUpdateValue, disabled: disabled, strings: strings, suggestion: suggestion }));
-    }, [
-        value,
-        allowedPatterns,
-        defaultPattern,
-        entries,
-        busy,
-        disabled,
-        i18nPrefix,
-        allowedI18nPrefixes,
-        namingConvention,
-        onCreateNewEntry,
-        onShowExistingEntry,
-        onUpdateValue
-    ]);
-    return (react_1.default.createElement(UIInput_1.UITextInput, { ...props, title: title, onRenderSuffix: value?.trim() ? onRenderSuffix : undefined, className: classNames }));
-};
-exports.UITranslationInput = UITranslationInput;
-exports.UITranslationInput.defaultProps = {
-    strings: defaults_1.defaultTranslationInputStrings
-};
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UITranslationInput = void 0;
+const react_1 = __importStar(require("react"));
+const UIInput_1 = require("../UIInput");
+const Icons_1 = require("../Icons");
+const UITranslationButton_1 = require("./UITranslationButton");
+const UITranslationButton_types_1 = require("./UITranslationButton.types");
+const UITranslationUtils_1 = require("./UITranslationUtils");
+const defaults_1 = require("./defaults");
+const UIFormattedText_1 = require("./UIFormattedText");
+/**
+ * Method returns suggestion object with message and tooltip based on passed translation button props.
+ *
+ * @param props Properties of translation input component.
+ * @returns Translation suggestion object.
+ */
+const getTranslationSuggestion = (props) => {
+    const { value = '', allowedPatterns, entries, strings = defaults_1.defaultTranslationInputStrings, namingConvention = UITranslationButton_types_1.TranslationKeyGenerator.CamelCase, defaultPattern, i18nPrefix, allowedI18nPrefixes } = props;
+    const i18nKey = (0, UITranslationUtils_1.extractI18nKey)(value, allowedPatterns, allowedI18nPrefixes || [i18nPrefix]);
+    let message = '';
+    let tooltip = '';
+    let suggest;
+    if (i18nKey) {
+        // There is already i18n binding as value
+        const entry = (0, UITranslationUtils_1.getTranslationByKey)(entries, i18nKey);
+        if (entry) {
+            tooltip = strings.i18nEntryExistsTooltip;
+            suggest = {
+                entry,
+                type: UITranslationButton_types_1.SuggestValueType.Existing,
+                icon: Icons_1.UiIcons.WorldArrow
+            };
+        }
+        else {
+            message = strings.i18nKeyMissingDescription;
+            tooltip = strings.i18nKeyMissingTooltip;
+            suggest = {
+                entry: {
+                    key: {
+                        value: i18nKey
+                    },
+                    value: {
+                        value: i18nKey
+                    }
+                },
+                type: UITranslationButton_types_1.SuggestValueType.New,
+                icon: Icons_1.UiIcons.WorldWarning
+            };
+        }
+    }
+    else {
+        // Use generation format passed from outside or use default as 'Standard';
+        const existingEntry = (0, UITranslationUtils_1.getTranslationByText)(entries, value);
+        if (existingEntry) {
+            message = strings.i18nReplaceWithExistingDescription;
+            tooltip = strings.i18nReplaceWithExistingTooltip;
+            suggest = {
+                entry: existingEntry,
+                type: UITranslationButton_types_1.SuggestValueType.Update
+            };
+        }
+        else {
+            message = strings.i18nValueMissingDescription;
+            tooltip = strings.i18nValueMissingTooltip;
+            const key = (0, UITranslationUtils_1.generateI18nKey)(value, namingConvention, entries);
+            suggest = {
+                entry: {
+                    key: {
+                        value: key
+                    },
+                    value: {
+                        value
+                    }
+                },
+                type: UITranslationButton_types_1.SuggestValueType.New
+            };
+        }
+    }
+    // I18n string to apply for input value
+    suggest.i18n = (0, UITranslationUtils_1.applyI18nPattern)(suggest.entry.key.value, defaultPattern, i18nPrefix);
+    // Format message to show in callout
+    const messageValues = {
+        key: suggest.entry.key.value,
+        value: suggest.entry.value.value,
+        i18n: suggest.i18n
+    };
+    tooltip = (0, UIFormattedText_1.formatText)(tooltip, messageValues);
+    return {
+        message: react_1.default.createElement(UIFormattedText_1.UIFormattedText, { values: messageValues }, message),
+        tooltip,
+        suggest
+    };
+};
+/**
+ * Component to render translation input with button to provide helper callout with i18n generation option.
+ *
+ * @param props Component properties.
+ * @returns Component to render translation input.
+ */
+const UITranslationInput = (props) => {
+    const { id, className, onChange, value, allowedPatterns, defaultPattern, entries, busy, i18nPrefix, allowedI18nPrefixes, namingConvention, onCreateNewEntry, onShowExistingEntry, disabled, strings } = props;
+    const suggestion = getTranslationSuggestion(props);
+    let classNames = ' ui-translatable__input';
+    // Custom external classes
+    if (className) {
+        classNames += ` ${className}`;
+    }
+    const onUpdateValue = (0, react_1.useCallback)((newValue) => {
+        onChange?.({}, newValue);
+    }, [onChange]);
+    // Generate DOM id for i18n button
+    let buttonId = `${id}-i18n`;
+    let title = props.title;
+    if (suggestion.suggest?.type === UITranslationButton_types_1.SuggestValueType.Existing && strings?.i18nEntryExistsInputTooltip) {
+        // Change DOM id with additional suffix
+        buttonId += '-navigate';
+        if (!title) {
+            title = (0, UIFormattedText_1.formatText)(strings.i18nEntryExistsInputTooltip, {
+                value: value || '',
+                translation: suggestion.suggest.entry.value.value
+            });
+        }
+    }
+    const onRenderSuffix = (0, react_1.useCallback)(() => {
+        return (react_1.default.createElement(UITranslationButton_1.UITranslationButton, { id: buttonId, value: value, busy: busy, onCreateNewEntry: onCreateNewEntry, onShowExistingEntry: onShowExistingEntry, onUpdateValue: onUpdateValue, disabled: disabled, strings: strings, suggestion: suggestion }));
+    }, [
+        value,
+        allowedPatterns,
+        defaultPattern,
+        entries,
+        busy,
+        disabled,
+        i18nPrefix,
+        allowedI18nPrefixes,
+        namingConvention,
+        onCreateNewEntry,
+        onShowExistingEntry,
+        onUpdateValue
+    ]);
+    return (react_1.default.createElement(UIInput_1.UITextInput, { ...props, title: title, onRenderSuffix: value?.trim() ? onRenderSuffix : undefined, className: classNames }));
+};
+exports.UITranslationInput = UITranslationInput;
+exports.UITranslationInput.defaultProps = {
+    strings: defaults_1.defaultTranslationInputStrings
+};
 //# sourceMappingURL=UITranslationInput.js.map

package/dist/components/UITranslationInput/UITranslationInput.scss

@@ -1,40 +1,40 @@
-// Input field
-.ui-translatable {
-    &__input {
-        position: relative;
-        // Translation suggest button
-        .ms-TextField-suffix {
-            background: transparent;
-        }
-    }
-    &__button {
-        position: absolute;
-        right: 0;
-        top: 0;
-        // Icon button
-        .ms-Button {
-            margin: 1px;
-            box-sizing: content-box;
-        }
-    }
-    &__callout {
-        .ms-Callout-main {
-            padding: 0;
-        }
-    }
-    &__message {
-        padding: 20px 10px;
-        text-align: center;
-        font-size: var(--vscode-font-size);
-        word-break: break-word;
-        .ui-translatable__actions {
-            margin-top: 16px;
-            > .ms-Button {
-                margin-right: 16px;
-                &:last-child {
-                    margin-right: 0;
-                }
-            }
-        }
-    }
-}
+// Input field
+.ui-translatable {
+    &__input {
+        position: relative;
+        // Translation suggest button
+        .ms-TextField-suffix {
+            background: transparent;
+        }
+    }
+    &__button {
+        position: absolute;
+        right: 0;
+        top: 0;
+        // Icon button
+        .ms-Button {
+            margin: 1px;
+            box-sizing: content-box;
+        }
+    }
+    &__callout {
+        .ms-Callout-main {
+            padding: 0;
+        }
+    }
+    &__message {
+        padding: 20px 10px;
+        text-align: center;
+        font-size: var(--vscode-font-size);
+        word-break: break-word;
+        .ui-translatable__actions {
+            margin-top: 16px;
+            > .ms-Button {
+                margin-right: 16px;
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+}

package/dist/components/UITranslationInput/UITranslationUtils.d.ts

@@ -1,65 +1,65 @@
-import type { I18nBundle, TranslationEntry } from './UITranslationButton.types';
-import { TranslationKeyGenerator, TranslationTextPattern } from './UITranslationButton.types';
-/**
- * Method extracts i18n binding and returns key of i18n entry.
- *
- * @param value Binding value.
- * @param patterns Check if method should resolve syntax annotation based i18n binding.
- * @param prefixes Allowed prefixes for single bracket pattern.
- * @returns {string | undefined} I18n entry key or undefined if input does not matches i18n binding pattern.
- */
-export declare const extractI18nKey: (value: string, patterns: TranslationTextPattern[], prefixes: string[]) => string | undefined;
-/**
- * Convert to camel case.
- * It gets input like 'product details info' and convert it to 'productDetailsInfo'.
- *
- * @param input Value to convert.
- * @param maxWord Maximal cxount of words to convert.
- * @returns Canverted value.
- */
-export declare const convertToCamelCase: (input?: string, maxWord?: number) => string;
-/**
- * Convert to pascal case.
- * It gets input like 'product details info' and convert it to 'ProductDetailsInfo'.
- *
- * @param input Value to convert.
- * @param maxWord Maximal cxount of words to convert.
- * @returns Canverted value.
- */
-export declare const convertToPascalCase: (input: string, maxWord?: number) => string;
-/**
- * Generates a unique i18n key for the text.
- * It considers currently active bundle and translation key generator.
- *
- * @param text
- * @param translationKeyGenerator
- * @param bundle
- * @returns Generated i18n key.
- */
-export declare function generateI18nKey(text: string, translationKeyGenerator: TranslationKeyGenerator, bundle: I18nBundle): string;
-/**
- * Method to apply passed pattern for passed key.
- *
- * @param key I18n key.
- * @param pattern I18n pattern.
- * @param prefix Prefix for single bracket pattern.
- * @returns Generated i18n value for passed pattern.
- */
-export declare const applyI18nPattern: (key: string, pattern: TranslationTextPattern, prefix: string) => string;
-/**
- * Method finds first existing i18n key searching by key.
- *
- * @param {I18nBundle} bundle Search for value.
- * @param {string} key Search for key.
- * @returns {TranslationEntry | undefined} Key if value is found.
- */
-export declare const getTranslationByKey: <T extends TranslationEntry>(bundle: I18nBundle<T>, key: string) => T | undefined;
-/**
- * Method finds existing i18n key searching by value.
- *
- * @param {I18nBundle} bundle Search for value.
- * @param {string} value Search for value.
- * @returns {TranslationEntry | undefined} Key if value is found.
- */
-export declare const getTranslationByText: <T extends TranslationEntry>(bundle: I18nBundle<T>, value: string) => T | undefined;
+import type { I18nBundle, TranslationEntry } from './UITranslationButton.types';
+import { TranslationKeyGenerator, TranslationTextPattern } from './UITranslationButton.types';
+/**
+ * Method extracts i18n binding and returns key of i18n entry.
+ *
+ * @param value Binding value.
+ * @param patterns Check if method should resolve syntax annotation based i18n binding.
+ * @param prefixes Allowed prefixes for single bracket pattern.
+ * @returns {string | undefined} I18n entry key or undefined if input does not matches i18n binding pattern.
+ */
+export declare const extractI18nKey: (value: string, patterns: TranslationTextPattern[], prefixes: string[]) => string | undefined;
+/**
+ * Convert to camel case.
+ * It gets input like 'product details info' and convert it to 'productDetailsInfo'.
+ *
+ * @param input Value to convert.
+ * @param maxWord Maximal cxount of words to convert.
+ * @returns Canverted value.
+ */
+export declare const convertToCamelCase: (input?: string, maxWord?: number) => string;
+/**
+ * Convert to pascal case.
+ * It gets input like 'product details info' and convert it to 'ProductDetailsInfo'.
+ *
+ * @param input Value to convert.
+ * @param maxWord Maximal cxount of words to convert.
+ * @returns Canverted value.
+ */
+export declare const convertToPascalCase: (input: string, maxWord?: number) => string;
+/**
+ * Generates a unique i18n key for the text.
+ * It considers currently active bundle and translation key generator.
+ *
+ * @param text
+ * @param translationKeyGenerator
+ * @param bundle
+ * @returns Generated i18n key.
+ */
+export declare function generateI18nKey(text: string, translationKeyGenerator: TranslationKeyGenerator, bundle: I18nBundle): string;
+/**
+ * Method to apply passed pattern for passed key.
+ *
+ * @param key I18n key.
+ * @param pattern I18n pattern.
+ * @param prefix Prefix for single bracket pattern.
+ * @returns Generated i18n value for passed pattern.
+ */
+export declare const applyI18nPattern: (key: string, pattern: TranslationTextPattern, prefix: string) => string;
+/**
+ * Method finds first existing i18n key searching by key.
+ *
+ * @param {I18nBundle} bundle Search for value.
+ * @param {string} key Search for key.
+ * @returns {TranslationEntry | undefined} Key if value is found.
+ */
+export declare const getTranslationByKey: <T extends TranslationEntry>(bundle: I18nBundle<T>, key: string) => T | undefined;
+/**
+ * Method finds existing i18n key searching by value.
+ *
+ * @param {I18nBundle} bundle Search for value.
+ * @param {string} value Search for value.
+ * @returns {TranslationEntry | undefined} Key if value is found.
+ */
+export declare const getTranslationByText: <T extends TranslationEntry>(bundle: I18nBundle<T>, value: string) => T | undefined;
 //# sourceMappingURL=UITranslationUtils.d.ts.map