@sap-ux/ui-components 1.8.0 → 1.8.2

package/dist/helper/ValidationMessage/utils.d.ts

@@ -1,32 +1,32 @@
-import type { IRawStyle } from '@fluentui/react';
-export declare const enum ErrorMessageType {
-    Error = "Error",
-    Warning = "Warning",
-    Info = "Info"
-}
-export interface UIMessagesExtendedProps {
-    warningMessage?: string;
-    infoMessage?: string;
-}
-export interface UIComponentMessagesProps extends UIMessagesExtendedProps {
-    errorMessage?: string;
-}
-export interface InputErrorMessageStyles {
-    error: IRawStyle;
-    warning: IRawStyle;
-    info: IRawStyle;
-}
-export interface InputValidationMessageInfo {
-    style: IRawStyle;
-    type: ErrorMessageType;
-    message?: string;
-}
-export declare const MESSAGE_TYPES_CLASSNAME_MAP: Map<ErrorMessageType | undefined, string>;
-/**
- * Method returns object containing data to display message for component.
- *
- * @param {UIMessagesExtendedProps} [props] Component props.
- * @returns {InputValidationMessageInfo} Message info.
- */
-export declare const getMessageInfo: (props?: UIMessagesExtendedProps) => InputValidationMessageInfo;
+import type { IRawStyle } from '@fluentui/react';
+export declare const enum ErrorMessageType {
+    Error = "Error",
+    Warning = "Warning",
+    Info = "Info"
+}
+export interface UIMessagesExtendedProps {
+    warningMessage?: string;
+    infoMessage?: string;
+}
+export interface UIComponentMessagesProps extends UIMessagesExtendedProps {
+    errorMessage?: string;
+}
+export interface InputErrorMessageStyles {
+    error: IRawStyle;
+    warning: IRawStyle;
+    info: IRawStyle;
+}
+export interface InputValidationMessageInfo {
+    style: IRawStyle;
+    type: ErrorMessageType;
+    message?: string;
+}
+export declare const MESSAGE_TYPES_CLASSNAME_MAP: Map<ErrorMessageType | undefined, string>;
+/**
+ * Method returns object containing data to display message for component.
+ *
+ * @param {UIMessagesExtendedProps} [props] Component props.
+ * @returns {InputValidationMessageInfo} Message info.
+ */
+export declare const getMessageInfo: (props?: UIMessagesExtendedProps) => InputValidationMessageInfo;
 //# sourceMappingURL=utils.d.ts.map

package/dist/helper/ValidationMessage/utils.js

@@ -1,122 +1,122 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getMessageInfo = exports.MESSAGE_TYPES_CLASSNAME_MAP = exports.ErrorMessageType = void 0;
-var ErrorMessageType;
-(function (ErrorMessageType) {
-    ErrorMessageType["Error"] = "Error";
-    ErrorMessageType["Warning"] = "Warning";
-    ErrorMessageType["Info"] = "Info";
-})(ErrorMessageType = exports.ErrorMessageType || (exports.ErrorMessageType = {}));
-/**
- * Private method to get common styling for coloring by applying incoming colors.
- *
- * @param {string} bgColor Background color.
- * @param {string} borderColor Border color.
- * @returns {IRawStyle} Object with styles for message.
- */
-const getMessageColorStylings = (bgColor, borderColor) => {
-    const border = `1px solid ${borderColor}`;
-    return {
-        backgroundColor: bgColor,
-        borderLeft: border,
-        borderRight: border,
-        borderBottom: border,
-        borderColor: borderColor
-    };
-};
-const messagesStyles = {
-    error: {
-        color: 'var(--vscode-input-foreground)',
-        ...getMessageColorStylings('var(--vscode-inputValidation-errorBackground)', 'var(--vscode-inputValidation-errorBorder)'),
-        paddingTop: 4,
-        paddingBottom: 5,
-        paddingLeft: 8,
-        margin: 0
-    },
-    warning: {},
-    info: {}
-};
-messagesStyles.warning = {
-    ...messagesStyles.error,
-    ...getMessageColorStylings('var(--vscode-inputValidation-warningBackground)', 'var(--vscode-inputValidation-warningBorder)')
-};
-messagesStyles.info = {
-    ...messagesStyles.error,
-    ...getMessageColorStylings('var(--vscode-inputValidation-infoBackground)', 'var(--vscode-inputValidation-infoBorder)')
-};
-exports.MESSAGE_TYPES_CLASSNAME_MAP = new Map([
-    [undefined, 'error'],
-    ["Error" /* ErrorMessageType.Error */, 'error'],
-    ["Warning" /* ErrorMessageType.Warning */, 'warning'],
-    ["Info" /* ErrorMessageType.Info */, 'info']
-]);
-/**
- * Method returns input message styles for passed message type.
- * Default style is for Error message.
- *
- * @param {ErrorMessageType} [type] Message type.
- * @returns {IRawStyle} Object with styles for message.
- */
-const getMessageStyle = (type) => {
-    let style;
-    switch (type) {
-        case "Warning" /* ErrorMessageType.Warning */: {
-            style = messagesStyles.warning;
-            break;
-        }
-        case "Info" /* ErrorMessageType.Info */: {
-            style = messagesStyles.info;
-            break;
-        }
-        default: {
-            style = messagesStyles.error;
-            break;
-        }
-    }
-    return style;
-};
-/**
- * Method returns error message type depends on properties of UIComponentMessagesProps.
- *
- * @param {UIComponentMessagesProps} [props] Component props.
- * @returns {ErrorMessageType} Message type.
- */
-const getMessageType = (props) => {
-    if (props) {
-        if (props.errorMessage) {
-            return "Error" /* ErrorMessageType.Error */;
-        }
-        else if (props.warningMessage) {
-            return "Warning" /* ErrorMessageType.Warning */;
-        }
-        else if (props.infoMessage) {
-            return "Info" /* ErrorMessageType.Info */;
-        }
-    }
-    return "Error" /* ErrorMessageType.Error */;
-};
-/**
- * Method returns error message string by handling property of all messages like Error Warning and Info.
- *
- *  @param {UIComponentMessagesProps} [props] Component props.
- * @returns {string | undefined} Message string.
- */
-const getErrorMessage = (props) => {
-    return props?.errorMessage || props?.warningMessage || props?.infoMessage;
-};
-/**
- * Method returns object containing data to display message for component.
- *
- * @param {UIMessagesExtendedProps} [props] Component props.
- * @returns {InputValidationMessageInfo} Message info.
- */
-const getMessageInfo = (props) => {
-    const errorType = getMessageType(props);
-    return {
-        type: errorType,
-        style: getMessageStyle(errorType),
-        message: getErrorMessage(props)
-    };
-};
-exports.getMessageInfo = getMessageInfo;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMessageInfo = exports.MESSAGE_TYPES_CLASSNAME_MAP = exports.ErrorMessageType = void 0;
+var ErrorMessageType;
+(function (ErrorMessageType) {
+    ErrorMessageType["Error"] = "Error";
+    ErrorMessageType["Warning"] = "Warning";
+    ErrorMessageType["Info"] = "Info";
+})(ErrorMessageType = exports.ErrorMessageType || (exports.ErrorMessageType = {}));
+/**
+ * Private method to get common styling for coloring by applying incoming colors.
+ *
+ * @param {string} bgColor Background color.
+ * @param {string} borderColor Border color.
+ * @returns {IRawStyle} Object with styles for message.
+ */
+const getMessageColorStylings = (bgColor, borderColor) => {
+    const border = `1px solid ${borderColor}`;
+    return {
+        backgroundColor: bgColor,
+        borderLeft: border,
+        borderRight: border,
+        borderBottom: border,
+        borderColor: borderColor
+    };
+};
+const messagesStyles = {
+    error: {
+        color: 'var(--vscode-input-foreground)',
+        ...getMessageColorStylings('var(--vscode-inputValidation-errorBackground)', 'var(--vscode-inputValidation-errorBorder)'),
+        paddingTop: 4,
+        paddingBottom: 5,
+        paddingLeft: 8,
+        margin: 0
+    },
+    warning: {},
+    info: {}
+};
+messagesStyles.warning = {
+    ...messagesStyles.error,
+    ...getMessageColorStylings('var(--vscode-inputValidation-warningBackground)', 'var(--vscode-inputValidation-warningBorder)')
+};
+messagesStyles.info = {
+    ...messagesStyles.error,
+    ...getMessageColorStylings('var(--vscode-inputValidation-infoBackground)', 'var(--vscode-inputValidation-infoBorder)')
+};
+exports.MESSAGE_TYPES_CLASSNAME_MAP = new Map([
+    [undefined, 'error'],
+    ["Error" /* ErrorMessageType.Error */, 'error'],
+    ["Warning" /* ErrorMessageType.Warning */, 'warning'],
+    ["Info" /* ErrorMessageType.Info */, 'info']
+]);
+/**
+ * Method returns input message styles for passed message type.
+ * Default style is for Error message.
+ *
+ * @param {ErrorMessageType} [type] Message type.
+ * @returns {IRawStyle} Object with styles for message.
+ */
+const getMessageStyle = (type) => {
+    let style;
+    switch (type) {
+        case "Warning" /* ErrorMessageType.Warning */: {
+            style = messagesStyles.warning;
+            break;
+        }
+        case "Info" /* ErrorMessageType.Info */: {
+            style = messagesStyles.info;
+            break;
+        }
+        default: {
+            style = messagesStyles.error;
+            break;
+        }
+    }
+    return style;
+};
+/**
+ * Method returns error message type depends on properties of UIComponentMessagesProps.
+ *
+ * @param {UIComponentMessagesProps} [props] Component props.
+ * @returns {ErrorMessageType} Message type.
+ */
+const getMessageType = (props) => {
+    if (props) {
+        if (props.errorMessage) {
+            return "Error" /* ErrorMessageType.Error */;
+        }
+        else if (props.warningMessage) {
+            return "Warning" /* ErrorMessageType.Warning */;
+        }
+        else if (props.infoMessage) {
+            return "Info" /* ErrorMessageType.Info */;
+        }
+    }
+    return "Error" /* ErrorMessageType.Error */;
+};
+/**
+ * Method returns error message string by handling property of all messages like Error Warning and Info.
+ *
+ *  @param {UIComponentMessagesProps} [props] Component props.
+ * @returns {string | undefined} Message string.
+ */
+const getErrorMessage = (props) => {
+    return props?.errorMessage || props?.warningMessage || props?.infoMessage;
+};
+/**
+ * Method returns object containing data to display message for component.
+ *
+ * @param {UIMessagesExtendedProps} [props] Component props.
+ * @returns {InputValidationMessageInfo} Message info.
+ */
+const getMessageInfo = (props) => {
+    const errorType = getMessageType(props);
+    return {
+        type: errorType,
+        style: getMessageStyle(errorType),
+        message: getErrorMessage(props)
+    };
+};
+exports.getMessageInfo = getMessageInfo;
 //# sourceMappingURL=utils.js.map

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export * from './components';
-export * from './utilities';
+export * from './components';
+export * from './utilities';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,19 +1,19 @@
-"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("./components"), exports);
-__exportStar(require("./utilities"), 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("./components"), exports);
+__exportStar(require("./utilities"), exports);
 //# sourceMappingURL=index.js.map

package/dist/styles/_mixins.scss

@@ -1,15 +1,15 @@
-@mixin base-font($size: $button-font-size, $family: $font-family-base, $weight: $font-weight-base) {
-    @include apply-font($size, $family, $weight);
-}
-
-@mixin apply-font($size: '', $family: '', $weight: '') {
-    @if $size != '' {
-        font-size: $size;
-    }
-    @if $family != '' {
-        font-family: $family;
-    }
-    @if $weight != '' {
-        font-weight: $weight;
-    }
-}
+@mixin base-font($size: $button-font-size, $family: $font-family-base, $weight: $font-weight-base) {
+    @include apply-font($size, $family, $weight);
+}
+
+@mixin apply-font($size: '', $family: '', $weight: '') {
+    @if $size != '' {
+        font-size: $size;
+    }
+    @if $family != '' {
+        font-family: $family;
+    }
+    @if $weight != '' {
+        font-weight: $weight;
+    }
+}

package/dist/styles/_typography.scss

@@ -1,72 +1,72 @@
-// Typography for Fiori tools extensions
-// Definition at https://app.abstract.com/share/95440c2a-8dcb-4037-8379-78dd8e075fcc?collectionId=43b28713-cbc9-4f30-8961-138c9f12e797&collectionLayerId=a64467b4-c7ac-47b8-82be-3a4dac367a0c&mode=build&sha=5da8afa42ad02096132002b5b7904a925421e8f9
-
-// H1
-.ui-large-header {
-    font-family: var(--vscode-font-family);
-    font-weight: bold;
-    font-size: 24px;
-    font-style: normal;
-    line-height: 29px;
-    color: var(--vscode-settings-headerForeground);
-}
-
-// H2
-.ui-medium-header {
-    font-family: var(--vscode-font-family);
-    font-weight: bold;
-    font-size: 14px;
-    font-style: normal;
-    line-height: 16px;
-    color: var(--vscode-settings-headerForeground);
-}
-
-// H3
-.ui-small-header {
-    font-family: var(--vscode-font-family);
-    font-weight: bold;
-    font-size: 13px;
-    font-style: normal;
-    line-height: 15px;
-    color: var(--vscode-settings-textInputForeground);
-}
-
-// T1
-.ui-medium-text {
-    font-family: var(--vscode-font-family);
-    font-weight: normal;
-    font-size: 13px;
-    font-style: normal;
-    line-height: 18px;
-    color: var(--vscode-settings-textInputForeground);
-}
-
-// T2
-.ui-medium-italic-text {
-    font-family: var(--vscode-font-family);
-    font-weight: normal;
-    font-size: 13px;
-    font-style: italic;
-    line-height: 18px;
-    color: var(--vscode-settings-textInputForeground);
-}
-
-// T3
-.ui-small-text {
-    font-family: var(--vscode-font-family);
-    font-weight: normal;
-    font-size: 11px;
-    font-style: normal;
-    line-height: 15px;
-    color: var(--vscode-settings-textInputForeground);
-}
-
-// T4
-.ui-small-italic-text {
-    font-family: var(--vscode-font-family);
-    font-weight: normal;
-    font-size: 11px;
-    font-style: italic;
-    line-height: 15px;
-    color: var(--vscode-settings-textInputForeground);
-}
+// Typography for Fiori tools extensions
+// Definition at https://app.abstract.com/share/95440c2a-8dcb-4037-8379-78dd8e075fcc?collectionId=43b28713-cbc9-4f30-8961-138c9f12e797&collectionLayerId=a64467b4-c7ac-47b8-82be-3a4dac367a0c&mode=build&sha=5da8afa42ad02096132002b5b7904a925421e8f9
+
+// H1
+.ui-large-header {
+    font-family: var(--vscode-font-family);
+    font-weight: bold;
+    font-size: 24px;
+    font-style: normal;
+    line-height: 29px;
+    color: var(--vscode-settings-headerForeground);
+}
+
+// H2
+.ui-medium-header {
+    font-family: var(--vscode-font-family);
+    font-weight: bold;
+    font-size: 14px;
+    font-style: normal;
+    line-height: 16px;
+    color: var(--vscode-settings-headerForeground);
+}
+
+// H3
+.ui-small-header {
+    font-family: var(--vscode-font-family);
+    font-weight: bold;
+    font-size: 13px;
+    font-style: normal;
+    line-height: 15px;
+    color: var(--vscode-settings-textInputForeground);
+}
+
+// T1
+.ui-medium-text {
+    font-family: var(--vscode-font-family);
+    font-weight: normal;
+    font-size: 13px;
+    font-style: normal;
+    line-height: 18px;
+    color: var(--vscode-settings-textInputForeground);
+}
+
+// T2
+.ui-medium-italic-text {
+    font-family: var(--vscode-font-family);
+    font-weight: normal;
+    font-size: 13px;
+    font-style: italic;
+    line-height: 18px;
+    color: var(--vscode-settings-textInputForeground);
+}
+
+// T3
+.ui-small-text {
+    font-family: var(--vscode-font-family);
+    font-weight: normal;
+    font-size: 11px;
+    font-style: normal;
+    line-height: 15px;
+    color: var(--vscode-settings-textInputForeground);
+}
+
+// T4
+.ui-small-italic-text {
+    font-family: var(--vscode-font-family);
+    font-weight: normal;
+    font-size: 11px;
+    font-style: italic;
+    line-height: 15px;
+    color: var(--vscode-settings-textInputForeground);
+}

package/dist/styles/_variables.scss

@@ -1,26 +1,26 @@
-// Typography
-
-$font-family-base: var(--vscode-font-family);
-$font-size-base: var(--vscode-font-size);
-$font-weight-base: var(--vscode-font-weight);
-
-$base-element-height: 26px;
-$button-font-size: $font-size-base;
-
-// Dropdowns
-// colors
-$dropdown-input-height: $base-element-height;
-$dropdown-input-color: var(--vscode-foreground);
-$dropdown-input-placeholder-color: var(--vscode-input-placeholderForeground);
-$dropdown-input-background: var(--vscode-input-background);
-$dropdown-input-border-color: var(--vscode-editorWidget-border);
-$dropdown-input-focus-border-color: var(--vscode-focusBorder);
-// misc
-$dropdown-input-border-radius: 0;
-$dropdown-input-expand-icon-size: 16px;
-$dropdown-input-text-padding: 0px $dropdown-input-height 0 8px;
-$dropdown-input-border-width: 1px;
-$dropdown-input-border: $dropdown-input-border-width solid $dropdown-input-border-color;
-$dropdown-input-disabled-opacity: 0.5;
-$dropdown-input-disabled-background-color: var(--vscode-editor-inactiveSelectionBackground);
-$dropdown-input-readonly-background-color: var(--vscode-editor-background);
+// Typography
+
+$font-family-base: var(--vscode-font-family);
+$font-size-base: var(--vscode-font-size);
+$font-weight-base: var(--vscode-font-weight);
+
+$base-element-height: 26px;
+$button-font-size: $font-size-base;
+
+// Dropdowns
+// colors
+$dropdown-input-height: $base-element-height;
+$dropdown-input-color: var(--vscode-foreground);
+$dropdown-input-placeholder-color: var(--vscode-input-placeholderForeground);
+$dropdown-input-background: var(--vscode-input-background);
+$dropdown-input-border-color: var(--vscode-editorWidget-border);
+$dropdown-input-focus-border-color: var(--vscode-focusBorder);
+// misc
+$dropdown-input-border-radius: 0;
+$dropdown-input-expand-icon-size: 16px;
+$dropdown-input-text-padding: 0px $dropdown-input-height 0 8px;
+$dropdown-input-border-width: 1px;
+$dropdown-input-border: $dropdown-input-border-width solid $dropdown-input-border-color;
+$dropdown-input-disabled-opacity: 0.5;
+$dropdown-input-disabled-background-color: var(--vscode-editor-inactiveSelectionBackground);
+$dropdown-input-readonly-background-color: var(--vscode-editor-background);

package/dist/styles/ui-components.scss

@@ -1,3 +1,3 @@
-@import 'variables';
-@import 'typography';
-@import 'mixins';
+@import 'variables';
+@import 'typography';
+@import 'mixins';

package/dist/utilities/DeepMerge.d.ts

@@ -1,11 +1,11 @@
-/**
- * Performs deep merge on two objects.
- * Parameters are not mutated.
- * Arrays are copied as references and are not merged.
- *
- * @param a
- * @param b
- * @returns  Record<string, unknown>
- */
-export declare function deepMerge(a: any, b: any): Record<string, unknown>;
+/**
+ * Performs deep merge on two objects.
+ * Parameters are not mutated.
+ * Arrays are copied as references and are not merged.
+ *
+ * @param a
+ * @param b
+ * @returns  Record<string, unknown>
+ */
+export declare function deepMerge(a: any, b: any): Record<string, unknown>;
 //# sourceMappingURL=DeepMerge.d.ts.map