@sap-ux/ui-components 1.8.0 → 1.8.2

package/dist/components/UIToggleGroup/UIToggleGroup.js

@@ -1,137 +1,137 @@
-"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.UIToggleGroup = void 0;
-const React = __importStar(require("react"));
-const UIToggleGroupOption_1 = require("./UIToggleGroupOption");
-const UILabel_1 = require("../UILabel");
-const UIFocusZone_1 = require("../UIFocusZone");
-const utilities_1 = require("../../utilities");
-require("./UIToggleGroup.scss");
-/**
- * UIToggleGroup component.
- *
- * @exports
- * @class UIToggleGroup
- * @extends {React.Component<UIToggleGroupProps, UIToggleGroupState>}
- */
-class UIToggleGroup extends React.Component {
-    /**
-     * Initializes component properties.
-     *
-     * @param {UIToggleGroupProps} props
-     */
-    constructor(props) {
-        super(props);
-        this.labelId = this.props.labelId ? this.props.labelId : (0, utilities_1.getUIId)('ui-toggle-group-option-');
-        this.onClick = (_evt, option) => {
-            let isSelected = false;
-            if (option && option.itemKey) {
-                this.setState({
-                    options: this.state.options.map((entry, index, options) => {
-                        if (entry.key === option.itemKey) {
-                            isSelected = !options[index].selected;
-                            return {
-                                ...entry,
-                                selected: isSelected,
-                                focused: options[index].focused
-                            };
-                        }
-                        else {
-                            return {
-                                ...entry,
-                                selected: false,
-                                focused: false
-                            };
-                        }
-                    })
-                });
-                if (this.props.onChange) {
-                    this.props.onChange?.(option.itemKey, isSelected);
-                }
-            }
-        };
-        this.onFocus = (_evt, option) => {
-            if (option && option.itemKey) {
-                this.setState({
-                    options: this.state.options.map((entry) => {
-                        if (entry.key === option.itemKey) {
-                            return {
-                                ...entry,
-                                focused: true
-                            };
-                        }
-                        else {
-                            return {
-                                ...entry,
-                                focused: false
-                            };
-                        }
-                    })
-                });
-            }
-        };
-        this.onBlur = (_evt, _option) => {
-            this.setState({
-                options: this.state.options.map((entry) => {
-                    return {
-                        ...entry,
-                        focused: false
-                    };
-                })
-            });
-        };
-        this.state = {
-            options: this.props.options.map((entry) => {
-                if (entry.key === this.props.selectedKey) {
-                    return {
-                        ...entry,
-                        selected: true
-                    };
-                }
-                else {
-                    return {
-                        ...entry
-                    };
-                }
-            })
-        };
-        this.onClick = this.onClick.bind(this);
-        this.onFocus = this.onFocus.bind(this);
-        this.onBlur = this.onBlur.bind(this);
-    }
-    /**
-     * @returns {JSX.Element}
-     */
-    render() {
-        return (React.createElement("div", { className: "ui-toggle-group", role: "group", ...(this.props.ariaLabel && { 'aria-labelledby': this.labelId }) },
-            this.props.label && (React.createElement(UILabel_1.UILabel, { id: this.labelId, ...(this.props.ariaLabel && { 'aria-label': this.props.ariaLabel }), className: "ui-toggle-group-label", required: this.props.required, disabled: this.props.disabled }, this.props.label)),
-            React.createElement(UIFocusZone_1.UIFocusZone, { as: "div", direction: UIFocusZone_1.UIFocusZoneDirection.horizontal, isCircularNavigation: true, shouldRaiseClicks: true, className: "ui-toggle-group-container", role: "list" }, this.state.options.map((option) => {
-                return (React.createElement(UIToggleGroupOption_1.UIToggleGroupOption, { itemKey: option.key, ...option, key: option.key, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, selected: option.selected, disabled: option.disabled || this.props.disabled }));
-            }))));
-    }
-}
-exports.UIToggleGroup = UIToggleGroup;
+"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.UIToggleGroup = void 0;
+const React = __importStar(require("react"));
+const UIToggleGroupOption_1 = require("./UIToggleGroupOption");
+const UILabel_1 = require("../UILabel");
+const UIFocusZone_1 = require("../UIFocusZone");
+const utilities_1 = require("../../utilities");
+require("./UIToggleGroup.scss");
+/**
+ * UIToggleGroup component.
+ *
+ * @exports
+ * @class UIToggleGroup
+ * @extends {React.Component<UIToggleGroupProps, UIToggleGroupState>}
+ */
+class UIToggleGroup extends React.Component {
+    /**
+     * Initializes component properties.
+     *
+     * @param {UIToggleGroupProps} props
+     */
+    constructor(props) {
+        super(props);
+        this.labelId = this.props.labelId ? this.props.labelId : (0, utilities_1.getUIId)('ui-toggle-group-option-');
+        this.onClick = (_evt, option) => {
+            let isSelected = false;
+            if (option && option.itemKey) {
+                this.setState({
+                    options: this.state.options.map((entry, index, options) => {
+                        if (entry.key === option.itemKey) {
+                            isSelected = !options[index].selected;
+                            return {
+                                ...entry,
+                                selected: isSelected,
+                                focused: options[index].focused
+                            };
+                        }
+                        else {
+                            return {
+                                ...entry,
+                                selected: false,
+                                focused: false
+                            };
+                        }
+                    })
+                });
+                if (this.props.onChange) {
+                    this.props.onChange?.(option.itemKey, isSelected);
+                }
+            }
+        };
+        this.onFocus = (_evt, option) => {
+            if (option && option.itemKey) {
+                this.setState({
+                    options: this.state.options.map((entry) => {
+                        if (entry.key === option.itemKey) {
+                            return {
+                                ...entry,
+                                focused: true
+                            };
+                        }
+                        else {
+                            return {
+                                ...entry,
+                                focused: false
+                            };
+                        }
+                    })
+                });
+            }
+        };
+        this.onBlur = (_evt, _option) => {
+            this.setState({
+                options: this.state.options.map((entry) => {
+                    return {
+                        ...entry,
+                        focused: false
+                    };
+                })
+            });
+        };
+        this.state = {
+            options: this.props.options.map((entry) => {
+                if (entry.key === this.props.selectedKey) {
+                    return {
+                        ...entry,
+                        selected: true
+                    };
+                }
+                else {
+                    return {
+                        ...entry
+                    };
+                }
+            })
+        };
+        this.onClick = this.onClick.bind(this);
+        this.onFocus = this.onFocus.bind(this);
+        this.onBlur = this.onBlur.bind(this);
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        return (React.createElement("div", { className: "ui-toggle-group", role: "group", ...(this.props.ariaLabel && { 'aria-labelledby': this.labelId }) },
+            this.props.label && (React.createElement(UILabel_1.UILabel, { id: this.labelId, ...(this.props.ariaLabel && { 'aria-label': this.props.ariaLabel }), className: "ui-toggle-group-label", required: this.props.required, disabled: this.props.disabled }, this.props.label)),
+            React.createElement(UIFocusZone_1.UIFocusZone, { as: "div", direction: UIFocusZone_1.UIFocusZoneDirection.horizontal, isCircularNavigation: true, shouldRaiseClicks: true, className: "ui-toggle-group-container", role: "list" }, this.state.options.map((option) => {
+                return (React.createElement(UIToggleGroupOption_1.UIToggleGroupOption, { itemKey: option.key, ...option, key: option.key, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, selected: option.selected, disabled: option.disabled || this.props.disabled }));
+            }))));
+    }
+}
+exports.UIToggleGroup = UIToggleGroup;
 //# sourceMappingURL=UIToggleGroup.js.map

package/dist/components/UIToggleGroup/UIToggleGroup.scss

@@ -1,13 +1,13 @@
-.ui-toggle-group {
-    margin-top: 0;
-
-    &-label {
-        margin-top: 0;
-    }
-
-    &-container {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-    }
-}
+.ui-toggle-group {
+    margin-top: 0;
+
+    &-label {
+        margin-top: 0;
+    }
+
+    &-container {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+}

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

@@ -1,23 +1,23 @@
-export interface UIToggleGroupProps {
-    options: ToggleGroupOption[];
-    labelId?: string;
-    label?: string;
-    ariaLabel?: string;
-    selectedKey?: string;
-    required?: boolean;
-    disabled?: boolean;
-    onChange?: (itemKey: string, isSelected: boolean) => void;
-}
-export interface ToggleGroupOption {
-    key: string;
-    disabled?: boolean;
-    selected?: boolean;
-    focused?: boolean;
-    id?: string;
-    labelId?: string;
-    ariaLabel?: string;
-    title?: string;
-    text?: string;
-    icon?: string;
-}
+export interface UIToggleGroupProps {
+    options: ToggleGroupOption[];
+    labelId?: string;
+    label?: string;
+    ariaLabel?: string;
+    selectedKey?: string;
+    required?: boolean;
+    disabled?: boolean;
+    onChange?: (itemKey: string, isSelected: boolean) => void;
+}
+export interface ToggleGroupOption {
+    key: string;
+    disabled?: boolean;
+    selected?: boolean;
+    focused?: boolean;
+    id?: string;
+    labelId?: string;
+    ariaLabel?: string;
+    title?: string;
+    text?: string;
+    icon?: string;
+}
 //# sourceMappingURL=UIToggleGroup.types.d.ts.map

package/dist/components/UIToggleGroup/UIToggleGroup.types.js

@@ -1,3 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=UIToggleGroup.types.js.map

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

@@ -1,26 +1,26 @@
-import * as React from 'react';
-import type { UIToggleGroupOptionProps } from './UIToggleGroupOption.types';
-import './UIToggleGroupOption.scss';
-/**
- * UIToggleGroupOption component
- *
- * @exports
- * @class UIToggleGroupOption
- * @extends {React.Component<UIToggleGroupOptionProps, {}>}
- */
-export declare class UIToggleGroupOption extends React.Component<UIToggleGroupOptionProps> {
-    /**
-     * Initializes component properties.
-     *
-     * @param {UIToggleGroupOptionProps} props
-     */
-    constructor(props: UIToggleGroupOptionProps);
-    onClick: (evt: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    onBlur: (evt: React.FocusEvent<HTMLButtonElement>) => void;
-    onFocus: (evt: React.FocusEvent<HTMLButtonElement>) => void;
-    /**
-     * @returns {JSX.Element}
-     */
-    render(): JSX.Element;
-}
+import * as React from 'react';
+import type { UIToggleGroupOptionProps } from './UIToggleGroupOption.types';
+import './UIToggleGroupOption.scss';
+/**
+ * UIToggleGroupOption component
+ *
+ * @exports
+ * @class UIToggleGroupOption
+ * @extends {React.Component<UIToggleGroupOptionProps, {}>}
+ */
+export declare class UIToggleGroupOption extends React.Component<UIToggleGroupOptionProps> {
+    /**
+     * Initializes component properties.
+     *
+     * @param {UIToggleGroupOptionProps} props
+     */
+    constructor(props: UIToggleGroupOptionProps);
+    onClick: (evt: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onBlur: (evt: React.FocusEvent<HTMLButtonElement>) => void;
+    onFocus: (evt: React.FocusEvent<HTMLButtonElement>) => void;
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
 //# sourceMappingURL=UIToggleGroupOption.d.ts.map

package/dist/components/UIToggleGroup/UIToggleGroupOption/UIToggleGroupOption.js

@@ -1,78 +1,78 @@
-"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.UIToggleGroupOption = void 0;
-const React = __importStar(require("react"));
-const UIIcon_1 = require("../../UIIcon");
-const utilities_1 = require("../../../utilities");
-require("./UIToggleGroupOption.scss");
-/**
- * UIToggleGroupOption component
- *
- * @exports
- * @class UIToggleGroupOption
- * @extends {React.Component<UIToggleGroupOptionProps, {}>}
- */
-class UIToggleGroupOption extends React.Component {
-    /**
-     * Initializes component properties.
-     *
-     * @param {UIToggleGroupOptionProps} props
-     */
-    constructor(props) {
-        super(props);
-        this.onClick = (evt) => {
-            this.props.onClick?.(evt, this.props);
-        };
-        this.onBlur = (evt) => {
-            this.props.onBlur?.(evt, this.props);
-        };
-        this.onFocus = (evt) => {
-            this.props.onFocus?.(evt, this.props);
-        };
-        this.onClick = this.onClick.bind(this);
-        this.onFocus = this.onFocus.bind(this);
-        this.onBlur = this.onBlur.bind(this);
-    }
-    /**
-     * @returns {JSX.Element}
-     */
-    render() {
-        const labelId = this.props.labelId ? this.props.labelId : (0, utilities_1.getUIId)('ui-toggle-group-option-');
-        return (React.createElement("button", { role: "button", ...(this.props.title && { title: this.props.title }), "data-is-focusable": "true", className: [
-                'ui-toggle-group-option',
-                this.props.focused ? 'ui-toggle-group-option--focused' : '',
-                this.props.selected ? 'ui-toggle-group-option--selected' : '',
-                this.props.disabled ? 'ui-toggle-group-option--disabled' : ''
-            ]
-                .filter((x) => !!x)
-                .join(' '), ...(this.props.ariaLabel && { 'aria-labelledby': labelId }), disabled: this.props.disabled || false, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur },
-            React.createElement("span", { className: "ui-toggle-group-option-content", tabIndex: -1 },
-                this.props.text && (React.createElement("span", { id: labelId, className: "ui-toggle-group-option-content-text", ...(this.props.ariaLabel && { 'aria-label': this.props.ariaLabel }) }, this.props.text)),
-                this.props.icon && (React.createElement(UIIcon_1.UIIcon, { className: "ui-toggle-group-option-content-icon", iconName: this.props.icon })))));
-    }
-}
-exports.UIToggleGroupOption = UIToggleGroupOption;
+"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.UIToggleGroupOption = void 0;
+const React = __importStar(require("react"));
+const UIIcon_1 = require("../../UIIcon");
+const utilities_1 = require("../../../utilities");
+require("./UIToggleGroupOption.scss");
+/**
+ * UIToggleGroupOption component
+ *
+ * @exports
+ * @class UIToggleGroupOption
+ * @extends {React.Component<UIToggleGroupOptionProps, {}>}
+ */
+class UIToggleGroupOption extends React.Component {
+    /**
+     * Initializes component properties.
+     *
+     * @param {UIToggleGroupOptionProps} props
+     */
+    constructor(props) {
+        super(props);
+        this.onClick = (evt) => {
+            this.props.onClick?.(evt, this.props);
+        };
+        this.onBlur = (evt) => {
+            this.props.onBlur?.(evt, this.props);
+        };
+        this.onFocus = (evt) => {
+            this.props.onFocus?.(evt, this.props);
+        };
+        this.onClick = this.onClick.bind(this);
+        this.onFocus = this.onFocus.bind(this);
+        this.onBlur = this.onBlur.bind(this);
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        const labelId = this.props.labelId ? this.props.labelId : (0, utilities_1.getUIId)('ui-toggle-group-option-');
+        return (React.createElement("button", { role: "button", ...(this.props.title && { title: this.props.title }), "data-is-focusable": "true", className: [
+                'ui-toggle-group-option',
+                this.props.focused ? 'ui-toggle-group-option--focused' : '',
+                this.props.selected ? 'ui-toggle-group-option--selected' : '',
+                this.props.disabled ? 'ui-toggle-group-option--disabled' : ''
+            ]
+                .filter((x) => !!x)
+                .join(' '), ...(this.props.ariaLabel && { 'aria-labelledby': labelId }), disabled: this.props.disabled || false, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur },
+            React.createElement("span", { className: "ui-toggle-group-option-content", tabIndex: -1 },
+                this.props.text && (React.createElement("span", { id: labelId, className: "ui-toggle-group-option-content-text", ...(this.props.ariaLabel && { 'aria-label': this.props.ariaLabel }) }, this.props.text)),
+                this.props.icon && (React.createElement(UIIcon_1.UIIcon, { className: "ui-toggle-group-option-content-icon", iconName: this.props.icon })))));
+    }
+}
+exports.UIToggleGroupOption = UIToggleGroupOption;
 //# sourceMappingURL=UIToggleGroupOption.js.map