@eccenca/gui-elements 24.0.0-rc.0 → 24.0.0-rc.2

package/dist/esm/components/PropertyValuePair/PropertyValueList.js.map

@@ -1 +1 @@
-{"version":3,"file":"PropertyValueList.js","sourceRoot":"","sources":["../../../../src/components/PropertyValuePair/PropertyValueList.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAItE,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,EAAmE;IAAjE,IAAA,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EAAE,QAAQ,cAAA,EAAK,UAAU,cAAzC,yBAA2C,CAAF;IACvE,OAAO,CACH,qCAAI,SAAS,EAAE,UAAG,MAAM,yBAAsB,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,IAAM,UAAU,GAC9F,QAAQ,CACR,CACR,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"PropertyValueList.js","sourceRoot":"","sources":["../../../../src/components/PropertyValuePair/PropertyValueList.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAUxD,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,EAKT;IAJrB,IAAA,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,QAAQ,cAAA,EACR,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA,EACjB,UAAU,cAJiB,yCAKjC,CADgB;IAEb,IAAM,eAAe,GAAG,YAAY;QAChC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK;YAC/B,IAAM,aAAa,GAAG,KAA2B,CAAC;YAClD,IAAI,aAAa,IAAI,aAAa,CAAC,IAAI,IAAI,aAAa,CAAC,IAAI,KAAK,iBAAiB,EAAE,CAAC;gBAClF,OAAO,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;YACrE,CAAC;YACD,OAAO,KAAK,CAAC;QACjB,CAAC,CAAC;QACJ,CAAC,CAAC,QAAQ,CAAC;IAEf,OAAO,CACH,qCAAI,SAAS,EAAE,UAAG,MAAM,yBAAsB,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,IAAM,UAAU,GAC9F,eAAe,CACf,CACR,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/esm/components/PropertyValuePair/PropertyValuePair.js

@@ -25,7 +25,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
 import PropertyName from "./PropertyName.js";
 import PropertyValue from "./PropertyValue.js";
 export var PropertyValuePair = function (_a) {
-    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, nowrap = _a.nowrap, _c = _a.hasSpacing, hasSpacing = _c === void 0 ? false : _c, _d = _a.hasDivider, hasDivider = _d === void 0 ? false : _d, otherProps = __rest(_a, ["children", "className", "nowrap", "hasSpacing", "hasDivider"]);
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, nowrap = _a.nowrap, _c = _a.hasSpacing, hasSpacing = _c === void 0 ? false : _c, _d = _a.hasDivider, hasDivider = _d === void 0 ? false : _d, _e = _a.singleColumn, singleColumn = _e === void 0 ? false : _e, otherProps = __rest(_a, ["children", "className", "nowrap", "hasSpacing", "hasDivider", "singleColumn"]);
     var alteredChildren = nowrap
         ? React.Children.map(children, function (child) {
             var originalChild = child;
@@ -38,7 +38,8 @@ export var PropertyValuePair = function (_a) {
     return (React.createElement("div", __assign({ className: "".concat(eccgui, "-propertyvalue__pair") +
             (className ? " " + className : "") +
             (hasSpacing ? " ".concat(eccgui, "-propertyvalue__pair--hasspacing") : "") +
-            (hasDivider ? " ".concat(eccgui, "-propertyvalue__pair--hasdivider") : "") }, otherProps), alteredChildren));
+            (hasDivider ? " ".concat(eccgui, "-propertyvalue__pair--hasdivider") : "") +
+            (singleColumn ? " ".concat(eccgui, "-propertyvalue__pair--singlecolumn") : "") }, otherProps), alteredChildren));
 };
 export default PropertyValuePair;
 //# sourceMappingURL=PropertyValuePair.js.map

package/dist/esm/components/PropertyValuePair/PropertyValuePair.js.map

@@ -1 +1 @@
-{"version":3,"file":"PropertyValuePair.js","sourceRoot":"","sources":["../../../../src/components/PropertyValuePair/PropertyValuePair.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAiB5C,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,EAOT;IANrB,IAAA,QAAQ,cAAA,EACR,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,MAAM,YAAA,EACN,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EACf,UAAU,cANiB,+DAOjC,CADgB;IAEb,IAAM,eAAe,GAAG,MAAM;QAC1B,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK;YAC/B,IAAM,aAAa,GAAG,KAA2B,CAAC;YAClD,IAAI,aAAa,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,YAAY,IAAI,aAAa,CAAC,IAAI,KAAK,aAAa,CAAC,EAAE,CAAC;gBACtG,OAAO,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;YAC/D,CAAC;YACD,OAAO,KAAK,CAAC;QACjB,CAAC,CAAC;QACJ,CAAC,CAAC,QAAQ,CAAC;IAEf,OAAO,CACH,sCACI,SAAS,EACL,UAAG,MAAM,yBAAsB;YAC/B,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;YAClC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAI,MAAM,qCAAkC,CAAC,CAAC,CAAC,EAAE,CAAC;YAChE,CAAC,UAAU,CAAC,CAAC,CAAC,WAAI,MAAM,qCAAkC,CAAC,CAAC,CAAC,EAAE,CAAC,IAEhE,UAAU,GAEb,eAAe,CACd,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"PropertyValuePair.js","sourceRoot":"","sources":["../../../../src/components/PropertyValuePair/PropertyValuePair.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAqB5C,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,EAQT;IAPrB,IAAA,QAAQ,cAAA,EACR,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,MAAM,YAAA,EACN,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA,EACjB,UAAU,cAPiB,+EAQjC,CADgB;IAEb,IAAM,eAAe,GAAG,MAAM;QAC1B,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK;YAC/B,IAAM,aAAa,GAAG,KAA2B,CAAC;YAClD,IAAI,aAAa,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,YAAY,IAAI,aAAa,CAAC,IAAI,KAAK,aAAa,CAAC,EAAE,CAAC;gBACtG,OAAO,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;YAC/D,CAAC;YACD,OAAO,KAAK,CAAC;QACjB,CAAC,CAAC;QACJ,CAAC,CAAC,QAAQ,CAAC;IAEf,OAAO,CACH,sCACI,SAAS,EACL,UAAG,MAAM,yBAAsB;YAC/B,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;YAClC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAI,MAAM,qCAAkC,CAAC,CAAC,CAAC,EAAE,CAAC;YAChE,CAAC,UAAU,CAAC,CAAC,CAAC,WAAI,MAAM,qCAAkC,CAAC,CAAC,CAAC,EAAE,CAAC;YAChE,CAAC,YAAY,CAAC,CAAC,CAAC,WAAI,MAAM,uCAAoC,CAAC,CAAC,CAAC,EAAE,CAAC,IAEpE,UAAU,GAEb,eAAe,CACd,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/esm/components/index.js

@@ -12,6 +12,7 @@ export * from "./Checkbox/Checkbox.js";
 export * from "./ContextOverlay/index.js";
 export * from "./Depiction/Depiction.js";
 export * from "./Dialog/index.js";
+export * from "./FlexibleLayout/index.js";
 export * from "./Form/index.js";
 export * from "./Grid/index.js";
 export * from "./HoverToggler/HoverToggler.js";

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,mCAAmC,CAAC;AAClD,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAE5B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,mCAAmC,CAAC;AAClD,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAE5B,cAAc,cAAc,CAAC"}

package/dist/types/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.d.ts

@@ -15,9 +15,13 @@ export interface StringPreviewContentBlobTogglerProps extends Omit<ContentBlobTo
     renderPreviewAsMarkdown?: boolean;
     /** White-listing of HTML elements that will be rendered when renderPreviewAsMarkdown is enabled. */
     allowedHtmlElementsInPreview?: string[];
+    /** Allows to add non-string elements at the end of the content if the full description is shown, i.e. no toggler is necessary.
+     * This allows to add non-string elements to both the full-view content and the pure string content.
+     */
+    noTogglerContentSuffix?: JSX.Element;
 }
 /** Version of the content toggler for text only content. */
-export declare function StringPreviewContentBlobToggler({ className, previewMaxLength, toggleExtendText, toggleReduceText, content, fullviewContent, startExtended, firstNonEmptyLineOnly, renderPreviewAsMarkdown, allowedHtmlElementsInPreview, }: StringPreviewContentBlobTogglerProps): React.JSX.Element;
+export declare function StringPreviewContentBlobToggler({ className, previewMaxLength, toggleExtendText, toggleReduceText, content, fullviewContent, startExtended, firstNonEmptyLineOnly, renderPreviewAsMarkdown, allowedHtmlElementsInPreview, noTogglerContentSuffix }: StringPreviewContentBlobTogglerProps): React.JSX.Element;
 /**
  * Takes the first non-empty line from a preview string.
  * @deprecated use `stringPreviewContentBlobTogglerUtils.firstNonEmptyLine`

package/dist/types/components/FlexibleLayout/FlexibleLayoutContainer.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { DividerProps } from "./../Separation/Divider";
+export interface FlexibleLayoutContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Use the exact space defined by the parent element.
+     * This parent element must be displayed using a fixed, relative or absolute position.
+     */
+    useAbsoluteSpace?: boolean;
+    /**
+     * If set then the container behaves similar to a column and displays its items on a vertical axis.
+     * Children could used as rows in this situation.
+     */
+    vertical?: boolean;
+    /**
+     * If true the used amount of space for each item is related to the amout of its content compared to each other.
+     * Otherwise the items use equal amounts as long this is possible.
+     */
+    noEqualItemSpace?: boolean;
+    /**
+     * Quick way to add whitespace between container children.
+     * For more complex usecases like dividers you need to use extra `<FlexibleLayoutItem/>` components in combination with `<Divider/>` components.
+     */
+    gapSize?: DividerProps["addSpacing"];
+}
+/**
+ * Simple layout helper to organize items into rows and columns that are not necessarily need to be aligned.
+ * A `FlexibleLayoutContainer` can contain `FlexibleLayoutItem`s.
+ * Do not misuse it as grid because it comes without any predefined ratios for widths and heights.
+ */
+export declare const FlexibleLayoutContainer: React.ForwardRefExoticComponent<FlexibleLayoutContainerProps & React.RefAttributes<HTMLDivElement>>;
+export default FlexibleLayoutContainer;

package/dist/types/components/FlexibleLayout/FlexibleLayoutItem.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+export interface FlexibleLayoutItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Defines the ability for the item to grow.
+     * The factor defines how much space the item would take up compared to the other items with a grow factor greater than zero.
+     * Must be equal or greater than zero.
+     * With a factor of `0` the item cannot grow.
+     */
+    growFactor?: number;
+    /**
+     * Defines the ability for the item to shrink.
+     * The factor defines how strong the shrink effect has impact on the item compared to the other items with a shrink factor greater than zero.
+     * Must be equal or greater than zero.
+     * With a factor of `0` the item cannot shrink.
+     */
+    shrinkFactor?: number;
+}
+/**
+ * Simple layout helper to organize items into rows and columns that are not necessarily need to be aligned.
+ * `FlexibleLayoutItem`s can contain `FlexibleLayoutContainer` for more partitions.
+ * `FlexibleLayoutItem` siblings will share all available space from the `FlexibleLayoutContainer` container.
+ */
+export declare const FlexibleLayoutItem: React.ForwardRefExoticComponent<FlexibleLayoutItemProps & React.RefAttributes<HTMLDivElement>>;
+export default FlexibleLayoutItem;

package/dist/types/components/FlexibleLayout/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./FlexibleLayoutContainer";
+export * from "./FlexibleLayoutItem";

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

@@ -26,6 +26,10 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
      * If there is no `isLayoutForElement` set then a `span` is used.
      */
     disabled?: boolean;
+    /**
+     * visual appearance of the label
+     */
+    emphasis?: "strong" | "normal";
 }
-export declare const Label: ({ children, className, disabled, text, info, tooltip, tooltipProps, isLayoutForElement, ...otherLabelProps }: LabelProps) => React.JSX.Element;
+export declare const Label: ({ children, className, disabled, text, info, tooltip, tooltipProps, isLayoutForElement, emphasis, ...otherLabelProps }: LabelProps) => React.JSX.Element;
 export default Label;

package/dist/types/components/PropertyValuePair/PropertyValueList.d.ts

@@ -1,4 +1,10 @@
 import React from "react";
-export type PropertyValueListProps = React.HTMLAttributes<HTMLDListElement>;
-export declare const PropertyValueList: ({ className, children, ...otherProps }: PropertyValueListProps) => React.JSX.Element;
+export interface PropertyValueListProps extends React.HTMLAttributes<HTMLDListElement> {
+    /**
+     * Only use one single column and put property label and value below each other.
+     * This property is forwardd to direct `PropertyValuePair` children.
+     */
+    singleColumn?: boolean;
+}
+export declare const PropertyValueList: ({ className, children, singleColumn, ...otherProps }: PropertyValueListProps) => React.JSX.Element;
 export default PropertyValueList;

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

@@ -12,6 +12,10 @@ export interface PropertyValuePairProps extends React.HTMLAttributes<HTMLDivElem
      * Forward the `nowrap` option to it `PropertyName` and `PropertyValue` children.
      */
     nowrap?: boolean;
+    /**
+     * Only use one single column and put property label and value below each other.
+     */
+    singleColumn?: boolean;
 }
-export declare const PropertyValuePair: ({ children, className, nowrap, hasSpacing, hasDivider, ...otherProps }: PropertyValuePairProps) => React.JSX.Element;
+export declare const PropertyValuePair: ({ children, className, nowrap, hasSpacing, hasDivider, singleColumn, ...otherProps }: PropertyValuePairProps) => React.JSX.Element;
 export default PropertyValuePair;

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

@@ -12,6 +12,7 @@ export * from "./Checkbox/Checkbox";
 export * from "./ContextOverlay";
 export * from "./Depiction/Depiction";
 export * from "./Dialog";
+export * from "./FlexibleLayout";
 export * from "./Form";
 export * from "./Grid";
 export * from "./HoverToggler/HoverToggler";

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "24.0.0-rc.0",
+    "version": "24.0.0-rc.2",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",

package/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -18,6 +18,10 @@ export interface StringPreviewContentBlobTogglerProps
     renderPreviewAsMarkdown?: boolean;
     /** White-listing of HTML elements that will be rendered when renderPreviewAsMarkdown is enabled. */
     allowedHtmlElementsInPreview?: string[];
+    /** Allows to add non-string elements at the end of the content if the full description is shown, i.e. no toggler is necessary.
+     * This allows to add non-string elements to both the full-view content and the pure string content.
+     */
+    noTogglerContentSuffix?: JSX.Element
 }
 
 /** Version of the content toggler for text only content. */
@@ -32,21 +36,27 @@ export function StringPreviewContentBlobToggler({
     firstNonEmptyLineOnly,
     renderPreviewAsMarkdown = false,
     allowedHtmlElementsInPreview,
+    noTogglerContentSuffix
 }: StringPreviewContentBlobTogglerProps) {
     const previewMaybeFirstLine = firstNonEmptyLineOnly ? firstNonEmptyLine(content) : content;
     const previewString = previewMaxLength ? previewMaybeFirstLine.substr(0, previewMaxLength) : previewMaybeFirstLine;
     const enableToggler = previewString !== content;
+    let previewContent = renderPreviewAsMarkdown ? (
+        <Markdown key="markdown-content" allowedElements={allowedHtmlElementsInPreview}>{previewString}</Markdown>
+    ) : (
+        previewString
+    )
+    if(!enableToggler && noTogglerContentSuffix) {
+        previewContent = <>
+            {previewContent}
+            {noTogglerContentSuffix}
+        </>
+    }
 
     return (
         <ContentBlobToggler
             className={className}
-            previewContent={
-                renderPreviewAsMarkdown ? (
-                    <Markdown allowedElements={allowedHtmlElementsInPreview}>{previewString}</Markdown>
-                ) : (
-                    previewString
-                )
-            }
+            previewContent={previewContent}
             toggleExtendText={toggleExtendText}
             toggleReduceText={toggleReduceText}
             fullviewContent={fullviewContent}

package/src/cmem/markdown/markdown.scss

@@ -47,13 +47,16 @@
 
 .#{$eccgui}-typography__contentblock {
     a[href=""] {
+        color: currentcolor;
+        pointer-events: none;
+        cursor: text;
+    }
+
+    a[href=""]:not(#{$eccgui-selector-text-spot-highlight}) {
         font-size: $eccgui-size-typo-caption;
         line-height: $eccgui-size-typo-caption-lineheight;
-        color: currentcolor;
         text-decoration: none;
         vertical-align: super;
-        pointer-events: none;
-        cursor: text;
 
         &::before {
             content: "[";

package/src/cmem/markdown/markdown.utils.ts

@@ -0,0 +1,18 @@
+/** Extracts the values of all named anchors used in the Markdown string, i.e. of the form <mark name="<value>"></mark>. */
+const extractNamedAnchors = (markdown: string): string[] => {
+    const regex = new RegExp("<a\\s+id=\"([^\"]+)\"\\s*>[^<]*</a>", "g")
+    const namedAnchors: string[] = []
+
+    let results = regex.exec(markdown)
+    while(results !== null) {
+        namedAnchors.push(results[1]);
+        results = regex.exec(markdown)
+    }
+    return namedAnchors
+}
+
+const utils = {
+    extractNamedAnchors
+}
+
+export default utils

package/src/cmem/markdown/markdownutils.test.ts

@@ -0,0 +1,13 @@
+import utils from "./markdown.utils"
+
+describe("Markdown utils", () => {
+    it("should extract named anchors from the Markdown", () => {
+        const namedAnchors = utils.extractNamedAnchors("# Header\n\nsome text\n\n## <a  id=\"anchor1\" ></a> point 1\n\n## <a id=\"anchor2\"></a> point 2")
+        expect(namedAnchors).toStrictEqual(["anchor1", "anchor2"])
+    });
+
+    it("should not extract named anchors from the Markdown that are not following the expected format", () => {
+        const namedAnchors = utils.extractNamedAnchors("# <a id=\"anchor\" href=\"http://\">link text</a> \n\n## <a name=\"test\" id=\"anchor2\"></a> point 2")
+        expect(namedAnchors).toStrictEqual([])
+    });
+});

package/src/components/Application/_header.scss

@@ -55,15 +55,23 @@ $shell-header-link: $blue-60 !default;
 // load library sub component
 @import "~@carbon/react/scss/components/ui-shell/header/index";
 
-// tweack original layout
+// tweak original layout
 
 .#{$prefix}--header {
     height: mini-units(8);
 }
 
-.#{$prefix}--header__action {
+.#{$prefix}--header__action,
+.#{$prefix}--header__action.#{$prefix}--btn--icon-only {
     width: mini-units(8);
     height: mini-units(8);
+    padding-block-start: 0;
+    background-color: transparent;
+
+    // $shell-header-icon-02
+    & > svg {
+        fill: $eccgui-color-applicationheader-text;
+    }
 }
 
 .#{$prefix}--header__menu-trigger {
@@ -141,6 +149,7 @@ a.#{$prefix}--header__menu-item:hover {
 
 // $shell-header-bg-03
 .#{$prefix}--header__action:active,
+.#{$prefix}--header__action.#{$prefix}--btn--icon-only:active,
 .#{$prefix}--header__menu-title[aria-expanded="true"] + .#{$prefix}--header__menu .#{$prefix}--header__menu-item:active,
 a.#{$prefix}--header__menu-item:active {
     background-color: $shell-header-bg-03;
@@ -148,12 +157,14 @@ a.#{$prefix}--header__menu-item:active {
 
 // $shell-header-bg-04
 .#{$prefix}--header__action:hover,
+.#{$prefix}--header__action.#{$prefix}--btn--icon-only:hover,
 .#{$prefix}--header__menu-title[aria-expanded="true"] + .#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover {
     background-color: $shell-header-bg-04;
 }
 
 // $shell-header-bg-05
-.#{$prefix}--header__action--active {
+.#{$prefix}--header__action--active,
+.#{$prefix}--header__action--active.#{$prefix}--btn--icon-only {
     background-color: $shell-header-bg-05;
     border-right-color: transparent;
     border-bottom-color: $shell-header-bg-05;
@@ -168,7 +179,8 @@ a.#{$prefix}--header__menu-item:active {
 
 // $shell-header-border-01
 .#{$prefix}--header,
-.#{$prefix}--header__action {
+.#{$prefix}--header__action,
+.#{$prefix}--header__action.#{$prefix}--btn--icon-only {
     border-bottom: none;
 }
 .#{$prefix}--header__nav {
@@ -179,9 +191,14 @@ a.#{$prefix}--header__menu-item:active {
 
 // $shell-header-focus
 .#{$prefix}--header__action:focus,
+.#{$prefix}--header__action.#{$prefix}--btn--icon-only:focus,
+.#{$prefix}--header__action.#{$prefix}--btn--primary:focus,
 a.#{$prefix}--header__name:focus,
 a.#{$prefix}--header__menu-item:focus {
-    border-color: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%);
+    border: none;
+    outline: 1px dotted color.adjust($eccgui-color-applicationheader-text, $lightness: 39%);
+    outline-offset: -1px;
+    box-shadow: none;
 }
 .#{$prefix}--header__menu-title[aria-expanded="true"] {
     color: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%);
@@ -192,6 +209,7 @@ a.#{$prefix}--header__name,
 a.#{$prefix}--header__name:hover,
 a.#{$prefix}--header__menu-item:hover,
 .#{$prefix}--header__action:active,
+.#{$prefix}--header__action.#{$prefix}--btn--icon-only:active,
 a.#{$prefix}--header__menu-item:active,
 a.#{$prefix}--header__menu-item:focus,
 .#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover,
@@ -210,6 +228,10 @@ a.#{$prefix}--header__menu-item {
 .#{$prefix}--header__action:active,
 .#{$prefix}--header__action:focus {
     color: $eccgui-color-applicationheader-text;
+
+    &.#{$prefix}--btn--icon-only {
+        color: $eccgui-color-applicationheader-text;
+    }
 }
 .#{$prefix}--header__menu-trigger > svg,
 a.#{$prefix}--header__menu-item:hover > svg,
@@ -218,11 +240,6 @@ a.#{$prefix}--header__menu-item:focus > svg {
     fill: $eccgui-color-applicationheader-text;
 }
 
-// $shell-header-icon-02
-.#{$prefix}--header__action > svg {
-    fill: $eccgui-color-applicationheader-text;
-}
-
 // $shell-header-icon-03
 .#{$prefix}--header__menu-arrow {
     fill: $eccgui-color-applicationheader-text;

package/src/components/Application/stories/Application.stories.tsx

@@ -0,0 +1,139 @@
+import React, { CSSProperties } from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import {
+    ApplicationContainer,
+    ApplicationContent,
+    ApplicationHeader,
+    ApplicationSidebarNavigation,
+    ApplicationSidebarToggler,
+    ApplicationTitle,
+    ApplicationToolbar,
+    ApplicationToolbarAction,
+    ApplicationToolbarPanel,
+    ApplicationToolbarSection,
+    Badge,
+    Button,
+    Depiction,
+    Icon,
+    WorkspaceHeader,
+} from "../../../index";
+
+interface ApplicationBasicExampleProps {
+    openMainNavigation: boolean;
+    openUserMenu: boolean;
+    countNotifications: number;
+    colorBackgroundHeader?: string;
+}
+
+function ApplicationBasicExample(args: ApplicationBasicExampleProps) {
+    return <></>;
+}
+
+export default {
+    title: "Components/Application",
+    component: ApplicationBasicExample,
+    subcomponents: {
+        ApplicationContainer,
+        ApplicationContent,
+        ApplicationHeader,
+        ApplicationTitle,
+        ApplicationSidebarToggler,
+        ApplicationSidebarNavigation,
+        ApplicationToolbar,
+        ApplicationToolbarSection,
+        ApplicationToolbarAction,
+    },
+    argTypes: {
+        colorBackgroundHeader: {
+            control: { type: "color" },
+        },
+    },
+} as Meta<typeof ApplicationBasicExample>;
+
+const TemplateBasicExample: StoryFn<typeof ApplicationBasicExample> = (args) => (
+    <ApplicationContainer>
+        <ApplicationHeader
+            aria-label={"Application"}
+            style={
+                args.colorBackgroundHeader
+                    ? ({ "--eccgui-appheader-color-background": args.colorBackgroundHeader } as CSSProperties)
+                    : undefined
+            }
+        >
+            <ApplicationTitle
+                isNotDisplayed={!args.openMainNavigation}
+                isApplicationSidebarExpanded={args.openMainNavigation}
+            >
+                ApplicationName
+            </ApplicationTitle>
+            <ApplicationSidebarToggler
+                aria-label={args.openMainNavigation ? "Close navigation" : "Open navigation"}
+                isActive={args.openMainNavigation}
+            />
+            <ApplicationSidebarNavigation isRail={!args.openMainNavigation} expanded={args.openMainNavigation}>
+                <code>Menu</code> with <code>MenuItem</code>s.
+            </ApplicationSidebarNavigation>
+
+            <WorkspaceHeader id={"ApplicationBasicExample"} />
+
+            <ApplicationToolbar>
+                <ApplicationToolbarSection>
+                    <Button>Action</Button>
+                </ApplicationToolbarSection>
+                {args.countNotifications && (
+                    <ApplicationToolbarAction aria-label="Open notifications menu" isActive={false}>
+                        <Depiction
+                            padding="medium"
+                            size="small"
+                            ratio="1:1"
+                            resizing="contain"
+                            image={<Icon name="application-notification" title="Notification menu icon" large />}
+                            badge={
+                                <Badge
+                                    position={"top-right"}
+                                    intent="warning"
+                                    maxLength={2}
+                                    children={args.countNotifications}
+                                />
+                            }
+                        />
+                    </ApplicationToolbarAction>
+                )}
+                {args.openUserMenu ? (
+                    <>
+                        <ApplicationToolbarAction aria-label={"Close user menu"} tooltipAlignment="end" isActive={true}>
+                            <Icon name="navigation-close" title="Close icon" large />
+                        </ApplicationToolbarAction>
+                        <ApplicationToolbarPanel aria-label="User menu" expanded={true}>
+                            <code>Menu</code> with <code>MenuItem</code>s.
+                        </ApplicationToolbarPanel>
+                    </>
+                ) : (
+                    <ApplicationToolbarAction
+                        id={"headerUserMenu"}
+                        aria-label={"Open user menu"}
+                        tooltipAlignment="end"
+                        isActive={false}
+                    >
+                        <Icon name="application-useraccount" title="User menu icon" large />
+                    </ApplicationToolbarAction>
+                )}
+            </ApplicationToolbar>
+        </ApplicationHeader>
+        <ApplicationContent
+            isApplicationSidebarExpanded={args.openMainNavigation}
+            isApplicationSidebarRail={!args.openMainNavigation}
+        >
+            <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+        </ApplicationContent>
+    </ApplicationContainer>
+);
+
+export const BasicExample = TemplateBasicExample.bind({});
+BasicExample.args = {
+    openMainNavigation: false,
+    openUserMenu: false,
+    countNotifications: 234,
+};

package/src/components/FlexibleLayout/FlexibleLayoutContainer.tsx

@@ -0,0 +1,67 @@
+import React, { forwardRef } from "react"; // @see https://github.com/storybookjs/storybook/issues/8881#issuecomment-831937051
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import { DividerProps } from "./../Separation/Divider";
+
+export interface FlexibleLayoutContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Use the exact space defined by the parent element.
+     * This parent element must be displayed using a fixed, relative or absolute position.
+     */
+    useAbsoluteSpace?: boolean;
+    /**
+     * If set then the container behaves similar to a column and displays its items on a vertical axis.
+     * Children could used as rows in this situation.
+     */
+    vertical?: boolean;
+    /**
+     * If true the used amount of space for each item is related to the amout of its content compared to each other.
+     * Otherwise the items use equal amounts as long this is possible.
+     */
+    noEqualItemSpace?: boolean;
+    /**
+     * Quick way to add whitespace between container children.
+     * For more complex usecases like dividers you need to use extra `<FlexibleLayoutItem/>` components in combination with `<Divider/>` components.
+     */
+    gapSize?: DividerProps["addSpacing"];
+}
+
+/**
+ * Simple layout helper to organize items into rows and columns that are not necessarily need to be aligned.
+ * A `FlexibleLayoutContainer` can contain `FlexibleLayoutItem`s.
+ * Do not misuse it as grid because it comes without any predefined ratios for widths and heights.
+ */
+export const FlexibleLayoutContainer = forwardRef<HTMLDivElement, FlexibleLayoutContainerProps>(
+    (
+        {
+            children,
+            className = "",
+            useAbsoluteSpace,
+            vertical,
+            noEqualItemSpace,
+            gapSize = "none",
+            ...otherDivProps
+        }: FlexibleLayoutContainerProps,
+        ref
+    ) => {
+        return (
+            <div
+                className={
+                    `${eccgui}-flexible__container` +
+                    (useAbsoluteSpace ? ` ${eccgui}-flexible__container--absolutespace` : "") +
+                    (vertical ? ` ${eccgui}-flexible__container--vertical` : "") +
+                    (noEqualItemSpace ? ` ${eccgui}-flexible__container--notequalitemspace` : "") +
+                    (gapSize !== "none" ? ` ${eccgui}-flexible__container--gap-${gapSize}` : "") +
+                    (className ? " " + className : "")
+                }
+                ref={ref}
+                {...otherDivProps}
+            >
+                {children}
+            </div>
+        );
+    }
+);
+
+export default FlexibleLayoutContainer;