@eccenca/gui-elements 6.3.0 → 22.0.0-rc.6

package/dist/cmem/index.d.ts

@@ -0,0 +1,10 @@
+import { ActivityControlWidget } from "./ActivityControl/ActivityControlWidget";
+import { ActivityExecutionErrorReportModal } from "./ActivityControl/ActivityExecutionErrorReportModal";
+import { ActivityAction, SilkActivityControl, IActivityControlLayoutProps } from "./ActivityControl/SilkActivityControl";
+import { IActivityStatus } from "./ActivityControl/ActivityControlTypes";
+import { ContentBlobToggler } from "./ContentBlobToggler/ContentBlobToggler";
+import { ElapsedDateTimeDisplay, TimeUnits } from "./DateTimeDisplay/ElapsedDateTimeDisplay";
+import { Markdown } from "./markdown/Markdown";
+import { StringPreviewContentBlobToggler, firstNonEmptyLine } from "./ContentBlobToggler/StringPreviewContentBlobToggler";
+export { ActivityControlWidget, ActivityExecutionErrorReportModal, ContentBlobToggler, Markdown, StringPreviewContentBlobToggler, SilkActivityControl, ElapsedDateTimeDisplay, firstNonEmptyLine, };
+export type { IActivityStatus, ActivityAction, IActivityControlLayoutProps, TimeUnits, };

package/dist/cmem/index.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ActivityControlWidget", {
+  enumerable: true,
+  get: function () {
+    return _ActivityControlWidget.ActivityControlWidget;
+  }
+});
+Object.defineProperty(exports, "ActivityExecutionErrorReportModal", {
+  enumerable: true,
+  get: function () {
+    return _ActivityExecutionErrorReportModal.ActivityExecutionErrorReportModal;
+  }
+});
+Object.defineProperty(exports, "ContentBlobToggler", {
+  enumerable: true,
+  get: function () {
+    return _ContentBlobToggler.ContentBlobToggler;
+  }
+});
+Object.defineProperty(exports, "ElapsedDateTimeDisplay", {
+  enumerable: true,
+  get: function () {
+    return _ElapsedDateTimeDisplay.ElapsedDateTimeDisplay;
+  }
+});
+Object.defineProperty(exports, "Markdown", {
+  enumerable: true,
+  get: function () {
+    return _Markdown.Markdown;
+  }
+});
+Object.defineProperty(exports, "SilkActivityControl", {
+  enumerable: true,
+  get: function () {
+    return _SilkActivityControl.SilkActivityControl;
+  }
+});
+Object.defineProperty(exports, "StringPreviewContentBlobToggler", {
+  enumerable: true,
+  get: function () {
+    return _StringPreviewContentBlobToggler.StringPreviewContentBlobToggler;
+  }
+});
+Object.defineProperty(exports, "firstNonEmptyLine", {
+  enumerable: true,
+  get: function () {
+    return _StringPreviewContentBlobToggler.firstNonEmptyLine;
+  }
+});
+
+var _ActivityControlWidget = require("./ActivityControl/ActivityControlWidget");
+
+var _ActivityExecutionErrorReportModal = require("./ActivityControl/ActivityExecutionErrorReportModal");
+
+var _SilkActivityControl = require("./ActivityControl/SilkActivityControl");
+
+var _ContentBlobToggler = require("./ContentBlobToggler/ContentBlobToggler");
+
+var _ElapsedDateTimeDisplay = require("./DateTimeDisplay/ElapsedDateTimeDisplay");
+
+var _Markdown = require("./markdown/Markdown");
+
+var _StringPreviewContentBlobToggler = require("./ContentBlobToggler/StringPreviewContentBlobToggler");

package/dist/cmem/markdown/Markdown.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { PluggableList } from "react-markdown/lib/react-markdown";
+interface MarkdownParserProps {
+    children: string;
+    allowHtml?: boolean;
+    removeMarkup?: boolean;
+    allowedElements?: string[];
+    inheritBlock?: boolean;
+    /** Additional reHype plugins to execute.
+     * @see https://github.com/remarkjs/react-markdown#architecture
+     */
+    reHypePlugins?: PluggableList;
+}
+/** Renders a markdown string. */
+export declare const Markdown: ({ children, allowHtml, removeMarkup, inheritBlock, allowedElements, reHypePlugins }: MarkdownParserProps) => JSX.Element;
+export {};

package/dist/cmem/markdown/Markdown.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Markdown = void 0;
+
+var _reactMarkdown = _interopRequireDefault(require("react-markdown"));
+
+var _rehypeRaw = _interopRequireDefault(require("rehype-raw"));
+
+var _remarkGfm = _interopRequireDefault(require("remark-gfm"));
+
+var _remarkTypograf = _interopRequireDefault(require("@mavrin/remark-typograf"));
+
+var _remarkDefinitionList = require("remark-definition-list");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../../index");
+
+//@ts-ignore
+const configDefault = {
+  /*
+      Using React Markdown configuration
+      @see https://github.com/remarkjs/react-markdown#api
+  */
+  // @see https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins
+  remarkPlugins: [_remarkGfm.default, _remarkTypograf.default, _remarkDefinitionList.remarkDefinitionList],
+  // @see https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
+  rehypePlugins: [],
+  allowedElements: [// default markdown
+  "a", "blockquote", "code", "em", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "img", "li", "ol", "p", "pre", "strong", "ul", // gfm (Github Flavoured Markdown) extensions
+  "del", "input", "table", "tbody", "td", "th", "thead", "tr", // other stuff
+  "mark", "dl", "dt", "dd"],
+  // remove all unwanted HTML markup
+  unwrapDisallowed: true,
+  // show escaped HTML
+  skipHtml: false
+};
+/** Renders a markdown string. */
+
+const Markdown = ({
+  children,
+  allowHtml = false,
+  removeMarkup = false,
+  inheritBlock = false,
+  allowedElements,
+  reHypePlugins
+}) => {
+  const configHtml = allowHtml ? {
+    rehypePlugins: [...configDefault.rehypePlugins].concat([_rehypeRaw.default]),
+    // switch from allowed list to disallowed list
+    allowedElements: undefined,
+    disallowedElements: ["applet", "script", "style", "link", "iframe", "form", "button"]
+  } : {};
+  const configTextOnly = removeMarkup ? {
+    skipHtml: true,
+    allowedElements: [],
+    disallowedElements: undefined
+  } : {};
+  const reactMarkdownProperties = {
+    children: children.trim(),
+    ...configDefault,
+    ...configHtml,
+    ...configTextOnly
+  };
+  allowedElements && (reactMarkdownProperties.allowedElements = allowedElements);
+  reHypePlugins && reHypePlugins.forEach(plugin => reactMarkdownProperties.rehypePlugins = [...reactMarkdownProperties.rehypePlugins, plugin]);
+  return inheritBlock ? /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, reactMarkdownProperties) : /*#__PURE__*/_react.default.createElement(_index.HtmlContentBlock, null, /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, reactMarkdownProperties));
+};
+
+exports.Markdown = Markdown;

package/dist/cmem/markdown/Markdown.jsx

@@ -0,0 +1,87 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+//@ts-ignore
+import remarkTypograf from "@mavrin/remark-typograf";
+import { remarkDefinitionList } from 'remark-definition-list';
+import React from "react";
+import { HtmlContentBlock } from "../../index";
+var configDefault = {
+    /*
+        Using React Markdown configuration
+        @see https://github.com/remarkjs/react-markdown#api
+    */
+    // @see https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins
+    remarkPlugins: [remarkGfm, remarkTypograf, remarkDefinitionList],
+    // @see https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
+    rehypePlugins: [],
+    allowedElements: [
+        // default markdown
+        "a", "blockquote", "code", "em", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "img", "li", "ol", "p", "pre", "strong", "ul",
+        // gfm (Github Flavoured Markdown) extensions
+        "del", "input", "table", "tbody", "td", "th", "thead", "tr",
+        // other stuff
+        "mark", "dl", "dt", "dd"
+    ],
+    // remove all unwanted HTML markup
+    unwrapDisallowed: true,
+    // show escaped HTML
+    skipHtml: false,
+};
+/** Renders a markdown string. */
+export var Markdown = function (_a) {
+    var children = _a.children, _b = _a.allowHtml, allowHtml = _b === void 0 ? false : _b, _c = _a.removeMarkup, removeMarkup = _c === void 0 ? false : _c, _d = _a.inheritBlock, inheritBlock = _d === void 0 ? false : _d, allowedElements = _a.allowedElements, reHypePlugins = _a.reHypePlugins;
+    var configHtml = allowHtml ? {
+        rehypePlugins: __spreadArray([], __read(configDefault.rehypePlugins), false).concat([rehypeRaw]),
+        // switch from allowed list to disallowed list
+        allowedElements: undefined,
+        disallowedElements: ["applet", "script", "style", "link", "iframe", "form", "button"],
+    } : {};
+    var configTextOnly = removeMarkup ? {
+        skipHtml: true,
+        allowedElements: [],
+        disallowedElements: undefined,
+    } : {};
+    var reactMarkdownProperties = __assign(__assign(__assign({ children: children.trim() }, configDefault), configHtml), configTextOnly);
+    allowedElements && (reactMarkdownProperties.allowedElements = allowedElements);
+    reHypePlugins && reHypePlugins.forEach(function (plugin) { return reactMarkdownProperties.rehypePlugins = __spreadArray(__spreadArray([], __read(reactMarkdownProperties.rehypePlugins), false), [plugin], false); });
+    return inheritBlock ? (<ReactMarkdown {...reactMarkdownProperties}/>) : (<HtmlContentBlock>
+            <ReactMarkdown {...reactMarkdownProperties}/>
+        </HtmlContentBlock>);
+};

package/dist/cmem/markdown/highlightSearchWords.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = highlightSearchWordsPluginFactory;
+
+var _Highlighter = require("../../components/Typography/Highlighter");
+
+/** Creates a react-markdown reHype plugin that marks text based on a multi-word search query. */
+function highlightSearchWordsPluginFactory(searchQuery) {
+  const searchStringParts = searchQuery ? (0, _Highlighter.extractSearchWords)(searchQuery) : [];
+  const multiWordRegex = (0, _Highlighter.createMultiWordRegex)(searchStringParts);
+
+  const createTextNode = text => ({
+    type: "text",
+    value: text
+  }); // Highlight a text node by returning an array of text and mark elements
+
+
+  const highlightTextNode = textNode => {
+    if (searchStringParts.length === 0) {
+      return [textNode];
+    }
+
+    const result = [];
+    const text = textNode.value;
+    let offset = 0; // loop through matches and add unmatched and matched parts to result array
+
+    let matchArray = multiWordRegex.exec(text);
+
+    while (matchArray !== null) {
+      result.push(createTextNode(text.slice(offset, matchArray.index)));
+      result.push({
+        type: "element",
+        tagName: "mark",
+        children: [createTextNode(matchArray[0])]
+      });
+      offset = multiWordRegex.lastIndex;
+      matchArray = multiWordRegex.exec(text);
+    } // Add remaining unmatched string
+
+
+    result.push(createTextNode(text.slice(offset)));
+    return result;
+  }; // Upper level highlight function
+
+
+  const highlightRootNode = node => highlightParentNode(node); // Highlight function to be called on Parent nodes
+
+
+  const highlightParentNode = parentNode => {
+    const newChildren = [];
+    parentNode.children.forEach(child => {
+      const highlightedChild = highlightTextNodes(child);
+
+      if (Array.isArray(highlightedChild)) {
+        newChildren.push(...highlightedChild);
+      } else {
+        newChildren.push(highlightedChild);
+      }
+    });
+    return { ...parentNode,
+      children: newChildren
+    };
+  }; // Highlight function to be called on generic inner nodes
+
+
+  const highlightTextNodes = node => {
+    if (node.type === "text") {
+      return highlightTextNode(node);
+    } else {
+      if (node.children) {
+        return highlightParentNode(node);
+      } else {
+        return node;
+      }
+    }
+  };
+
+  return function highlightSearchWords() {
+    return input => highlightRootNode(input);
+  };
+}

package/dist/common/Intent/index.d.ts

@@ -0,0 +1,7 @@
+export declare const Definitions: {
+    [key: string]: string;
+};
+export declare const ClassNames: {
+    [x: string]: string;
+};
+export declare type IntentTypes = typeof Definitions[keyof typeof Definitions];

package/dist/common/Intent/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Definitions = exports.ClassNames = void 0;
+
+var _constants = require("../../configuration/constants");
+
+const Definitions = {
+  PRIMARY: "primary",
+  ACCENT: "accent",
+  NEUTRAL: "neutral",
+  SUCCESS: "success",
+  INFO: "info",
+  WARNING: "warning",
+  DANGER: "danger"
+};
+exports.Definitions = Definitions;
+
+const classNamesCreation = () => {
+  const intentClasses = { ...Definitions
+  };
+
+  for (let intentDefinition in Definitions) {
+    intentClasses[intentDefinition] = `${_constants.CLASSPREFIX}-intent--${Definitions[intentDefinition]}`;
+  }
+
+  return intentClasses;
+};
+
+const ClassNames = classNamesCreation();
+exports.ClassNames = ClassNames;

package/dist/common/utils/openInNewTab.d.ts

@@ -0,0 +1,3 @@
+/** Wrapper for an onClick handler on link-like components, i.e. that navigate to a different URL on click.
+ * Opens a link (url) in a new tab when CMD or CTRL key is pressed at click time. */
+export declare const openInNewTab: (event: React.MouseEvent<HTMLElement>, handler?: ((e: React.MouseEvent<HTMLElement>) => void) | undefined, url?: string | undefined) => void;

package/dist/common/utils/openInNewTab.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.openInNewTab = void 0;
+
+/** Wrapper for an onClick handler on link-like components, i.e. that navigate to a different URL on click.
+ * Opens a link (url) in a new tab when CMD or CTRL key is pressed at click time. */
+const openInNewTab = (event, handler, url) => {
+  //if ctrl key or cmd key bypass click handler and delegation open in the background new tab
+  if (url && (event.ctrlKey || event.metaKey)) {
+    event.preventDefault();
+    event.nativeEvent.stopImmediatePropagation();
+    event.stopPropagation();
+    window.open(url, "_blank");
+  } else if (handler) {
+    handler(event);
+  }
+};
+
+exports.openInNewTab = openInNewTab;

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function Accordion({ children, className, align, ...otherProps }: any): JSX.Element;
+export default Accordion;

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _constants = require("../../configuration/constants");
+
+function Accordion({
+  children,
+  className = "",
+  align = "start",
+  ...otherProps
+}) {
+  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Accordion, (0, _extends2.default)({
+    className: `${_constants.CLASSPREFIX}-accordion__container ` + className,
+    align: align
+  }, otherProps), children);
+}
+
+var _default = Accordion;
+exports.default = _default;

package/dist/components/Accordion/Accordion.jsx

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { Accordion as CarbonAccordion } from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+function Accordion(_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.align, align = _c === void 0 ? "start" : _c, otherProps = __rest(_a, ["children", "className", "align"]);
+    return (<CarbonAccordion className={eccgui + "-accordion__container " + className} align={align} {...otherProps}>
+            {children}
+        </CarbonAccordion>);
+}
+export default Accordion;

package/dist/components/Accordion/AccordionItem.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface AccordionItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    className?: string;
+    children: string | JSX.Element | JSX.Element[];
+    disabled?: boolean;
+    open?: boolean;
+    label: string | JSX.Element;
+    fullWidth?: boolean;
+    condensed?: boolean;
+    noBorder?: boolean;
+    elevated?: boolean;
+    title?: never;
+}
+declare function AccordionItem({ children, label, className, fullWidth, elevated, condensed, noBorder, ...otherProps }: AccordionItemProps): JSX.Element;
+export default AccordionItem;

package/dist/components/Accordion/AccordionItem.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _constants = require("../../configuration/constants");
+
+;
+
+function AccordionItem({
+  children,
+  label,
+  className = "",
+  fullWidth = false,
+  elevated = false,
+  condensed = false,
+  noBorder = false,
+  ...otherProps
+}) {
+  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.AccordionItem, (0, _extends2.default)({
+    className: `${_constants.CLASSPREFIX}-accordion__item` + (!!className ? " " + className : "") + (fullWidth ? ` ${_constants.CLASSPREFIX}-accordion__item--fullwidth` : "") + (elevated ? ` ${_constants.CLASSPREFIX}-accordion__item--elevated` : "") + (condensed ? ` ${_constants.CLASSPREFIX}-accordion__item--condensed` : "") + (noBorder ? ` ${_constants.CLASSPREFIX}-accordion__item--noborder` : ""),
+    title: label
+  }, otherProps), children);
+}
+
+var _default = AccordionItem;
+exports.default = _default;

package/dist/components/Accordion/AccordionItem.jsx

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { AccordionItem as CarbonAccordionItem } from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+;
+function AccordionItem(_a) {
+    var children = _a.children, label = _a.label, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.elevated, elevated = _d === void 0 ? false : _d, _e = _a.condensed, condensed = _e === void 0 ? false : _e, _f = _a.noBorder, noBorder = _f === void 0 ? false : _f, otherProps = __rest(_a, ["children", "label", "className", "fullWidth", "elevated", "condensed", "noBorder"]);
+    return (<CarbonAccordionItem className={eccgui + "-accordion__item" +
+            (!!className ? " " + className : "") +
+            (fullWidth ? " " + eccgui + "-accordion__item--fullwidth" : "") +
+            (elevated ? " " + eccgui + "-accordion__item--elevated" : "") +
+            (condensed ? " " + eccgui + "-accordion__item--condensed" : "") +
+            (noBorder ? " " + eccgui + "-accordion__item--noborder" : "")} title={label} {...otherProps}>
+            {children}
+        </CarbonAccordionItem>);
+}
+export default AccordionItem;

package/dist/components/Application/ApplicationContainer.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface ApplicationContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+declare function ApplicationContainer({ children, className, ...otherProps }: ApplicationContainerProps): JSX.Element;
+export default ApplicationContainer;

package/dist/components/Application/ApplicationContainer.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _constants = require("../../configuration/constants");
+
+function ApplicationContainer({
+  children,
+  className = "",
+  ...otherProps
+}) {
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: `${_constants.CLASSPREFIX}-application__container ${className}`
+  }, otherProps), children);
+}
+
+var _default = ApplicationContainer;
+exports.default = _default;

package/dist/components/Application/ApplicationContainer.jsx

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+function ApplicationContainer(_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, otherProps = __rest(_a, ["children", "className"]);
+    return (<div className={eccgui + "-application__container " + className} {...otherProps}>
+            {children}
+        </div>);
+}
+export default ApplicationContainer;

package/dist/components/Application/ApplicationContent.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+interface IApplicationContentProps {
+    children: React.ReactNode;
+    /**
+        addional class name
+    */
+    className?: string;
+    /**
+        is the sidebar navigation currently displayed or not
+    */
+    isApplicationSidebarExpanded?: boolean;
+    /**
+        is the rail version of the sidebar used or not
+    */
+    isApplicationSidebarRail?: boolean;
+    /**
+        native attributes for the <main> HTML element
+    */
+    htmlMainProps?: React.HTMLAttributes<HTMLElement>;
+}
+declare function ApplicationContent({ children, isApplicationSidebarExpanded, isApplicationSidebarRail, htmlMainProps, ...otherPropsShouldOnlyBeUsedForDataAttributes }: IApplicationContentProps): JSX.Element;
+export default ApplicationContent;