@limetech/lime-elements 38.31.1 → 38.32.0

package/dist/collection/components/drag-handle/drag-handle.css

@@ -0,0 +1,174 @@
+@charset "UTF-8";
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+/**
+* This mixin will add a chessboard background pattern,
+* typically used to visualize transparency.
+*/
+/**
+* Make a container resizable by the user.
+* This is used in the documentations and examples
+* of some components, to demonstrate how the component
+* behaves in a resizable container.
+*/
+/**
+ * Drag to reorder mixins
+ */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
+limel-drag-handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+button.limel-drag-handle {
+  all: unset;
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
+  cursor: pointer;
+  color: var(--limel-theme-on-surface-color);
+  background-color: transparent;
+  touch-action: none;
+  cursor: grab;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.4rem;
+  padding: 0.5rem;
+  max-height: 2.25rem;
+  max-width: 2.25rem;
+  color: rgb(var(--contrast-900));
+}
+button.limel-drag-handle:focus {
+  outline: none;
+}
+button.limel-drag-handle:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+button.limel-drag-handle:hover, button.limel-drag-handle:focus, button.limel-drag-handle:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
+button.limel-drag-handle:hover, button.limel-drag-handle:focus-visible {
+  transform: translate3d(0, 0.01rem, 0);
+  color: var(--mdc-theme-primary);
+  background-color: transparent;
+}
+button.limel-drag-handle:hover {
+  box-shadow: var(--button-shadow-hovered);
+}
+button.limel-drag-handle:active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
+  box-shadow: var(--button-shadow-pressed);
+}
+button.limel-drag-handle:hover, button.limel-drag-handle:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
+}
+button.limel-drag-handle:active {
+  cursor: grabbing;
+}
+button.limel-drag-handle:active, button.limel-drag-handle:hover {
+  box-shadow: none !important;
+}
+button.limel-drag-handle .drag-icon {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 0.2rem;
+}
+limel-drag-handle[drag-direction=horizontal] button.limel-drag-handle .drag-icon {
+  grid-template-columns: 1fr 1fr;
+}
+button.limel-drag-handle .drag-icon div {
+  transition: transform 0.2s ease, background-color 0.2s ease;
+  height: 0.125rem;
+  width: 0.125rem;
+  border-radius: 1rem;
+  background-color: currentColor;
+  transform: scale(1);
+}
+
+.is-being-dragged button.limel-drag-handle .drag-icon div,
+button.limel-drag-handle:active .drag-icon div,
+button.limel-drag-handle:focus .drag-icon div,
+button.limel-drag-handle:hover .drag-icon div,
+button.limel-drag-handle:focus-visible .drag-icon div {
+  background-color: var(--mdc-theme-primary);
+  transform: scale(1.5);
+}

package/dist/collection/components/drag-handle/drag-handle.js

@@ -0,0 +1,125 @@
+import { h, Host } from '@stencil/core';
+import translate from '../../global/translations';
+/**
+ * This component resembles a drag handle button, but is implemented
+ * as a `private` component to allow for easier styling and future extensions.
+ *
+ * :::important
+ * This component has its `shadow` set to `false` in order to
+ * integrate well with the drag-and-drop functionality, as well as
+ * providing a better accessibility.
+ *
+ * Keep in mind that its styles might be affected by the consumer
+ * component, due to its light dom.
+ * :::
+ *
+ * :::tip
+ * It's recommended to place the drag handle on the right side of
+ * the item it is meant to reorder, to ensure consistent layout
+ * design conventions.
+ * :::
+ *
+ * @exampleComponent limel-example-drag-handle-basic
+ * @exampleComponent limel-example-drag-handle-horizontal
+ *
+ * @private
+ */
+export class DragHandleComponent {
+  constructor() {
+    this.dragHandleId = 'drag-handle-' + crypto.randomUUID();
+    this.handleClick = (event) => {
+      // Prevent bubbling so the parent item does not treat the pointer click as
+      // a toggle or reorder action.
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    this.dragDirection = 'vertical';
+    this.tooltipOpenDirection = 'left';
+    this.language = 'en';
+  }
+  render() {
+    const tooltipLabel = translate.get('drag-handle.drag-to-reorder', this.language);
+    const ariaLabel = translate.get('drag-handle.drag-handle', this.language);
+    return (h(Host, null, h("button", { "data-drag-handle": true, type: "button", class: "limel-drag-handle", tabindex: -1, "aria-label": ariaLabel, id: this.dragHandleId, onClick: this.handleClick }, h("div", { class: "drag-icon", role: "presentation", "aria-hidden": "true" }, h("div", { key: "1" }), h("div", { key: "2" }), h("div", { key: "3" }), h("div", { key: "4" }), h("div", { key: "5" }), h("div", { key: "6" })), h("limel-tooltip", { openDirection: this.tooltipOpenDirection, elementId: this.dragHandleId, label: tooltipLabel }))));
+  }
+  static get is() { return "limel-drag-handle"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["drag-handle.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["drag-handle.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dragDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'vertical' | 'horizontal'",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The direction in which the drag handle can be used to reorder items."
+        },
+        "attribute": "drag-direction",
+        "reflect": true,
+        "defaultValue": "'vertical'"
+      },
+      "tooltipOpenDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "OpenDirection",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "OpenDirection": {
+              "location": "import",
+              "path": "../menu/menu.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The preferred direction for the tooltip to open.\nDefaults to 'left', as our recommended placement for a drag handle\nin the UI is on the far right side of draggable elements."
+        },
+        "attribute": "tooltip-open-direction",
+        "reflect": true,
+        "defaultValue": "'left'"
+      },
+      "language": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Languages",
+          "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
+          "references": {
+            "Languages": {
+              "location": "import",
+              "path": "../date-picker/date.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Language to use for translations."
+        },
+        "attribute": "language",
+        "reflect": true,
+        "defaultValue": "'en'"
+      }
+    };
+  }
+}
+//# sourceMappingURL=drag-handle.js.map

package/dist/collection/components/drag-handle/drag-handle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-handle.js","sourceRoot":"","sources":["../../../src/components/drag-handle/drag-handle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAIlD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAMH,MAAM,OAAO,mBAAmB;;IAqBX,iBAAY,GAAG,cAAc,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;IA6CpD,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MACjD,0EAA0E;MAC1E,8BAA8B;MAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IAC5B,CAAC,CAAC;yBAlEgD,UAAU;gCAQf,MAAM;oBAMtB,IAAI;;EAI1B,MAAM;IACT,MAAM,YAAY,GAAG,SAAS,CAAC,GAAG,CAC9B,6BAA6B,EAC7B,IAAI,CAAC,QAAQ,CAChB,CAAC;IACF,MAAM,SAAS,GAAG,SAAS,CAAC,GAAG,CAC3B,yBAAyB,EACzB,IAAI,CAAC,QAAQ,CAChB,CAAC;IAEF,OAAO,CACH,EAAC,IAAI;MACD,wCAEI,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,mBAAmB,EACzB,QAAQ,EAAE,CAAC,CAAC,gBACA,SAAS,EACrB,EAAE,EAAE,IAAI,CAAC,YAAY,EACrB,OAAO,EAAE,IAAI,CAAC,WAAW;QAEzB,WACI,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,cAAc,iBACP,MAAM;UAElB,WAAK,GAAG,EAAC,GAAG,GAAG;UACf,WAAK,GAAG,EAAC,GAAG,GAAG;UACf,WAAK,GAAG,EAAC,GAAG,GAAG;UACf,WAAK,GAAG,EAAC,GAAG,GAAG;UACf,WAAK,GAAG,EAAC,GAAG,GAAG;UACf,WAAK,GAAG,EAAC,GAAG,GAAG,CACb;QACN,qBACI,aAAa,EAAE,IAAI,CAAC,oBAAoB,EACxC,SAAS,EAAE,IAAI,CAAC,YAAY,EAC5B,KAAK,EAAE,YAAY,GACrB,CACG,CACN,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQJ","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport translate from '../../global/translations';\nimport { Languages } from '../date-picker/date.types';\nimport { OpenDirection } from '../menu/menu.types';\n\n/**\n * This component resembles a drag handle button, but is implemented\n * as a `private` component to allow for easier styling and future extensions.\n *\n * :::important\n * This component has its `shadow` set to `false` in order to\n * integrate well with the drag-and-drop functionality, as well as\n * providing a better accessibility.\n *\n * Keep in mind that its styles might be affected by the consumer\n * component, due to its light dom.\n * :::\n *\n * :::tip\n * It's recommended to place the drag handle on the right side of\n * the item it is meant to reorder, to ensure consistent layout\n * design conventions.\n * :::\n *\n * @exampleComponent limel-example-drag-handle-basic\n * @exampleComponent limel-example-drag-handle-horizontal\n *\n * @private\n */\n@Component({\n    tag: 'limel-drag-handle',\n    shadow: false,\n    styleUrl: 'drag-handle.scss',\n})\nexport class DragHandleComponent {\n    /**\n     * The direction in which the drag handle can be used to reorder items.\n     */\n    @Prop({ reflect: true })\n    public dragDirection: 'vertical' | 'horizontal' = 'vertical';\n\n    /**\n     * The preferred direction for the tooltip to open.\n     * Defaults to 'left', as our recommended placement for a drag handle\n     * in the UI is on the far right side of draggable elements.\n     */\n    @Prop({ reflect: true })\n    public tooltipOpenDirection: OpenDirection = 'left';\n\n    /**\n     * Language to use for translations.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    private readonly dragHandleId = 'drag-handle-' + crypto.randomUUID();\n\n    public render() {\n        const tooltipLabel = translate.get(\n            'drag-handle.drag-to-reorder',\n            this.language\n        );\n        const ariaLabel = translate.get(\n            'drag-handle.drag-handle',\n            this.language\n        );\n\n        return (\n            <Host>\n                <button\n                    data-drag-handle\n                    type=\"button\"\n                    class=\"limel-drag-handle\"\n                    tabindex={-1}\n                    aria-label={ariaLabel}\n                    id={this.dragHandleId}\n                    onClick={this.handleClick}\n                >\n                    <div\n                        class=\"drag-icon\"\n                        role=\"presentation\"\n                        aria-hidden=\"true\"\n                    >\n                        <div key=\"1\" />\n                        <div key=\"2\" />\n                        <div key=\"3\" />\n                        <div key=\"4\" />\n                        <div key=\"5\" />\n                        <div key=\"6\" />\n                    </div>\n                    <limel-tooltip\n                        openDirection={this.tooltipOpenDirection}\n                        elementId={this.dragHandleId}\n                        label={tooltipLabel}\n                    />\n                </button>\n            </Host>\n        );\n    }\n\n    private readonly handleClick = (event: MouseEvent) => {\n        // Prevent bubbling so the parent item does not treat the pointer click as\n        // a toggle or reorder action.\n        event.preventDefault();\n        event.stopPropagation();\n    };\n}\n"]}

package/dist/collection/components/file/file.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/file-viewer/file-viewer.css

@@ -73,6 +73,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/form/form.css

@@ -1,4 +1,91 @@
 @charset "UTF-8";
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+/**
+* This mixin will add a chessboard background pattern,
+* typically used to visualize transparency.
+*/
+/**
+* Make a container resizable by the user.
+* This is used in the documentations and examples
+* of some components, to demonstrate how the component
+* behaves in a resizable container.
+*/
+/**
+ * Drag to reorder mixins
+ */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 /*
  * This file is imported into every component!
  *
@@ -13,6 +100,12 @@
  * @prop --form-background-color-of-even-rows: Background of even rows in the form, when layout type is `row`. Defaults to `transparent`.
  * @prop --form-background-color-of-odd-rows:Background of odd rows in the form, when layout type is `row`. Defaults to `--contrast-200`.
  */
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
 .form-group {
   min-width: 0;
 }
@@ -20,18 +113,58 @@
 .limel-form-array-item--simple {
   display: flex;
   align-items: center;
-  padding-bottom: var(--form-row-gap, 1rem);
+  padding: 0.25rem;
 }
-.limel-form-array-item--simple *:first-child {
-  flex-grow: 1;
+.limel-form-array-item--simple > *:first-child {
+  flex: 1;
+  min-width: 0;
+}
+
+.array-items {
+  isolation: isolate;
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--form-row-gap, 0.5rem);
+  margin-top: 1rem;
+}
+.array-items.has-an-item-which-is-being-dragged limel-collapsible-section {
+  --limel-cs-grid-template-rows: 0fr;
+  --limel-cs-opacity-transition-speed: 0.2s;
+  --limel-cs-grid-template-rows-transition-speed: 0.2s;
+  --limel-cs-open-header-bottom-border-radius: 0.75rem;
 }
 
-limel-code-editor {
-  margin-bottom: 0.75rem;
+.array-item:has(limel-drag-handle:hover), .array-item:has(limel-drag-handle:focus-within), .array-item.is-elevated, .array-item.sortable-chosen {
+  will-change: transform, box-shadow, border-radius, background-color;
+}
+.array-item.sortable-ghost {
+  border-radius: 0.5rem;
+  box-shadow: var(--shadow-depth-64), 0 0.65rem 0.75rem -0.425rem rgb(var(--color-black), 0.3);
+}
+.array-item.sortable-chosen {
+  border-radius: 0.5rem;
+  background-color: var(--lime-elevated-surface-background-color);
+}
+.array-item.is-elevated[draggable=false] {
+  animation: sit-here 0.8s forwards;
+}
+@keyframes sit-here {
+  0% {
+    border-radius: 0.5rem;
+    background-color: var(--lime-elevated-surface-background-color);
+    box-shadow: var(--shadow-depth-64), 0 0.65rem 0.75rem -0.425rem rgb(var(--color-black), 0.3);
+  }
+  100% {
+    box-shadow: none;
+  }
 }
 
-.limel-form-array-item--object {
-  margin-bottom: 0.25rem;
+limel-drag-handle {
+  order: 10;
+}
+
+limel-collapsible-section.is-being-dragged {
+  border-radius: 0.75rem !important;
 }
 
 .limel-form-layout--default {
@@ -151,17 +284,9 @@ h1 {
   font-weight: 500;
 }
 
-p {
-  margin-top: 0;
-  margin-bottom: 0.75rem;
-  font-size: var(--limel-theme-default-font-size);
-}
-
-p + limel-collapsible-section,
-p + .limel-form-array-item--simple,
-h1 + limel-collapsible-section,
-h1 + .limel-form-array-item--simple {
-  margin-top: 1rem;
+limel-markdown {
+  display: block;
+  margin-bottom: 0.5rem;
 }
 
 .form-group {
@@ -172,8 +297,7 @@ h1 + .limel-form-array-item--simple {
   top: calc(var(--form-row-gap, 1rem) * -0.5);
   left: calc(var(--form-column-gap, 1rem) * -0.5);
 }
-.form-group h1,
-.form-group p {
+.form-group h1 {
   color: rgb(var(--contrast-1400), 0.8);
 }
 .form-group h1 {
@@ -292,6 +416,9 @@ h1 + .limel-form-array-item--simple {
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/form/row/row.js

@@ -30,7 +30,10 @@ export class Row extends React.Component {
   renderDescription() {
     var _a;
     if ((_a = this.schema) === null || _a === void 0 ? void 0 : _a.description) {
-      return React.createElement('p', { className: 'description' }, this.schema.description);
+      return React.createElement('limel-markdown', {
+        class: 'description',
+        value: this.schema.description,
+      });
     }
   }
   renderChildren() {

package/dist/collection/components/form/row/row.js.map

@@ -1 +1 @@
-{"version":3,"file":"row.js","sourceRoot":"","sources":["../../../../src/components/form/row/row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,OAAO,GAAI,SAAQ,KAAK,CAAC,SAAmB;EAC9C,YAAmB,KAAe;IAC9B,KAAK,CAAC,KAAK,CAAC,CAAC;IADE,UAAK,GAAL,KAAK,CAAU;EAElC,CAAC;EAEM,MAAM;IACT,MAAM,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC;IACxB,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC5B;IAED,OAAO,KAAK,CAAC,aAAa,CACtB,KAAK,EACL;MACI,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;KAC/B,EACD,IAAI,CAAC,qBAAqB,EAAE,EAC5B,IAAI,CAAC,iBAAiB,EAAE,CAC3B,CAAC;EACN,CAAC;EAEO,UAAU;IACd,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,OAAO,KAAK,CAAC,aAAa,CAAC,YAAY,EAAE;QACrC,IAAI,EAAE,IAAI,CAAC,IAAI;OAClB,CAAC,CAAC;KACN;EACL,CAAC;EAEO,qBAAqB;IACzB,OAAO,KAAK,CAAC,aAAa,CACtB,KAAK,EACL,EAAE,SAAS,EAAE,kBAAkB,EAAE,EACjC,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,cAAc,EAAE,CACxB,CAAC;EACN,CAAC;EACO,WAAW;;IACf,OAAO,KAAK,CAAC,aAAa,CACtB,IAAI,EACJ,EAAE,SAAS,EAAE,OAAO,EAAE,EACtB,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,CACrB,CAAC;EACN,CAAC;EAEO,iBAAiB;;IACrB,IAAI,MAAA,IAAI,CAAC,MAAM,0CAAE,WAAW,EAAE;MAC1B,OAAO,KAAK,CAAC,aAAa,CACtB,GAAG,EACH,EAAE,SAAS,EAAE,aAAa,EAAE,EAC5B,IAAI,CAAC,MAAM,CAAC,WAAW,CAC1B,CAAC;KACL;EACL,CAAC;EAEO,cAAc;IAClB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAErC,uCACO,QAAQ,KACX,KAAK,kCACE,QAAQ,CAAC,KAAK,KACjB,MAAM,kCACC,QAAQ,CAAC,KAAK,CAAC,MAAM,KACxB,KAAK,EAAE,IAAI,EACX,WAAW,EAAE,IAAI,UAG3B;EACN,CAAC;EAED,IAAY,MAAM;IACd,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;EAC5C,CAAC;EAED,IAAY,IAAI;;IACZ,OAAO,MAAA,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,0CAAE,MAAM,0CAAE,IAAI,CAAC;EAC3C,CAAC;CACJ","sourcesContent":["import React from 'react';\nimport { RowProps } from '../templates/types';\n\nexport class Row extends React.Component<RowProps> {\n    constructor(public props: RowProps) {\n        super(props);\n    }\n\n    public render() {\n        const classes = ['row'];\n        if (this.icon) {\n            classes.push('has-icon');\n        }\n\n        return React.createElement(\n            'div',\n            {\n                className: classes.join(' '),\n            },\n            this.renderMainInformation(),\n            this.renderDescription()\n        );\n    }\n\n    private renderIcon() {\n        if (this.icon) {\n            return React.createElement('limel-icon', {\n                name: this.icon,\n            });\n        }\n    }\n\n    private renderMainInformation() {\n        return React.createElement(\n            'div',\n            { className: 'main-information' },\n            this.renderIcon(),\n            this.renderTitle(),\n            this.renderChildren()\n        );\n    }\n    private renderTitle() {\n        return React.createElement(\n            'h1',\n            { className: 'title' },\n            this.schema?.title\n        );\n    }\n\n    private renderDescription() {\n        if (this.schema?.description) {\n            return React.createElement(\n                'p',\n                { className: 'description' },\n                this.schema.description\n            );\n        }\n    }\n\n    private renderChildren() {\n        const children = this.props.children;\n\n        return {\n            ...children,\n            props: {\n                ...children.props,\n                schema: {\n                    ...children.props.schema,\n                    title: null,\n                    description: null,\n                },\n            },\n        };\n    }\n\n    private get schema() {\n        return this.props.children.props.schema;\n    }\n\n    private get icon() {\n        return this.schema?.lime?.layout?.icon;\n    }\n}\n"]}
+{"version":3,"file":"row.js","sourceRoot":"","sources":["../../../../src/components/form/row/row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,OAAO,GAAI,SAAQ,KAAK,CAAC,SAAmB;EAC9C,YAAmB,KAAe;IAC9B,KAAK,CAAC,KAAK,CAAC,CAAC;IADE,UAAK,GAAL,KAAK,CAAU;EAElC,CAAC;EAEM,MAAM;IACT,MAAM,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC;IACxB,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC5B;IAED,OAAO,KAAK,CAAC,aAAa,CACtB,KAAK,EACL;MACI,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;KAC/B,EACD,IAAI,CAAC,qBAAqB,EAAE,EAC5B,IAAI,CAAC,iBAAiB,EAAE,CAC3B,CAAC;EACN,CAAC;EAEO,UAAU;IACd,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,OAAO,KAAK,CAAC,aAAa,CAAC,YAAY,EAAE;QACrC,IAAI,EAAE,IAAI,CAAC,IAAI;OAClB,CAAC,CAAC;KACN;EACL,CAAC;EAEO,qBAAqB;IACzB,OAAO,KAAK,CAAC,aAAa,CACtB,KAAK,EACL,EAAE,SAAS,EAAE,kBAAkB,EAAE,EACjC,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,cAAc,EAAE,CACxB,CAAC;EACN,CAAC;EACO,WAAW;;IACf,OAAO,KAAK,CAAC,aAAa,CACtB,IAAI,EACJ,EAAE,SAAS,EAAE,OAAO,EAAE,EACtB,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,CACrB,CAAC;EACN,CAAC;EAEO,iBAAiB;;IACrB,IAAI,MAAA,IAAI,CAAC,MAAM,0CAAE,WAAW,EAAE;MAC1B,OAAO,KAAK,CAAC,aAAa,CAAC,gBAAgB,EAAE;QACzC,KAAK,EAAE,aAAa;QACpB,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,WAAW;OACjC,CAAC,CAAC;KACN;EACL,CAAC;EAEO,cAAc;IAClB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAErC,uCACO,QAAQ,KACX,KAAK,kCACE,QAAQ,CAAC,KAAK,KACjB,MAAM,kCACC,QAAQ,CAAC,KAAK,CAAC,MAAM,KACxB,KAAK,EAAE,IAAI,EACX,WAAW,EAAE,IAAI,UAG3B;EACN,CAAC;EAED,IAAY,MAAM;IACd,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;EAC5C,CAAC;EAED,IAAY,IAAI;;IACZ,OAAO,MAAA,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,0CAAE,MAAM,0CAAE,IAAI,CAAC;EAC3C,CAAC;CACJ","sourcesContent":["import React from 'react';\nimport { RowProps } from '../templates/types';\n\nexport class Row extends React.Component<RowProps> {\n    constructor(public props: RowProps) {\n        super(props);\n    }\n\n    public render() {\n        const classes = ['row'];\n        if (this.icon) {\n            classes.push('has-icon');\n        }\n\n        return React.createElement(\n            'div',\n            {\n                className: classes.join(' '),\n            },\n            this.renderMainInformation(),\n            this.renderDescription()\n        );\n    }\n\n    private renderIcon() {\n        if (this.icon) {\n            return React.createElement('limel-icon', {\n                name: this.icon,\n            });\n        }\n    }\n\n    private renderMainInformation() {\n        return React.createElement(\n            'div',\n            { className: 'main-information' },\n            this.renderIcon(),\n            this.renderTitle(),\n            this.renderChildren()\n        );\n    }\n    private renderTitle() {\n        return React.createElement(\n            'h1',\n            { className: 'title' },\n            this.schema?.title\n        );\n    }\n\n    private renderDescription() {\n        if (this.schema?.description) {\n            return React.createElement('limel-markdown', {\n                class: 'description',\n                value: this.schema.description,\n            });\n        }\n    }\n\n    private renderChildren() {\n        const children = this.props.children;\n\n        return {\n            ...children,\n            props: {\n                ...children.props,\n                schema: {\n                    ...children.props.schema,\n                    title: null,\n                    description: null,\n                },\n            },\n        };\n    }\n\n    private get schema() {\n        return this.props.children.props.schema;\n    }\n\n    private get icon() {\n        return this.schema?.lime?.layout?.icon;\n    }\n}\n"]}

package/dist/collection/components/form/templates/array-field-collapsible-item.js

@@ -39,31 +39,28 @@ export class CollapsibleItemTemplate extends React.Component {
     if (this.state.isOpen) {
       children = this.props.item.children;
     }
+    const dragHandle = this.props.allowItemReorder
+      ? React.createElement('limel-drag-handle', {
+        slot: 'header',
+        class: 'drag-handle',
+      })
+      : null;
     return React.createElement('limel-collapsible-section', {
       header: findTitle(data, schema, formSchema) || 'New item',
-      class: 'limel-form-array-item--object',
+      class: 'array-item limel-form-array-item--object',
       ref: (section) => {
         this.section = section;
       },
       'is-open': this.state.isOpen,
-    }, children);
+      'data-reorder-id': String(this.props.index),
+      'data-reorderable': this.props.allowItemReorder
+        ? 'true'
+        : 'false',
+    }, dragHandle, children);
   }
   setActions(element) {
-    const { item, index, allowItemRemoval, allowItemReorder } = this.props;
+    const { item, index, allowItemRemoval } = this.props;
     const actions = [];
-    if (allowItemReorder) {
-      actions.push({
-        id: 'down',
-        icon: 'down_arrow',
-        disabled: !item.hasMoveDown,
-        run: item.onReorderClick(index, index + 1),
-      }, {
-        id: 'up',
-        icon: 'up_arrow',
-        disabled: !item.hasMoveUp,
-        run: item.onReorderClick(index, index - 1),
-      });
-    }
     if (allowItemRemoval) {
       actions.push({
         id: 'remove',

package/dist/collection/components/form/templates/array-field-collapsible-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"array-field-collapsible-item.js","sourceRoot":"","sources":["../../../../src/components/form/templates/array-field-collapsible-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { Action } from '../../collapsible-section/action';\nimport React from 'react';\nimport { findTitle } from './common';\nimport { ArrayFieldItem, Runnable } from './types';\nimport { isEmpty } from 'lodash-es';\nimport { JSONSchema7 } from 'json-schema';\n\ninterface CollapsibleItemProps {\n    /**\n     * Data from reach-jsonschema-form\n     */\n    item: ArrayFieldItem;\n\n    /**\n     * The index of the field in the array\n     */\n    index: number;\n\n    /**\n     * The value of the field\n     */\n    data: any;\n\n    /**\n     * Schema for the field\n     */\n    schema: JSONSchema7;\n\n    /**\n     * Schema for the entire form\n     */\n    formSchema: JSONSchema7;\n\n    /**\n     * Control whether items can be removed.\n     */\n    allowItemRemoval: boolean;\n\n    /**\n     * Control whether items can be reordered.\n     */\n    allowItemReorder: boolean;\n}\n\nexport class CollapsibleItemTemplate extends React.Component<CollapsibleItemProps> {\n    state = {\n        isOpen: false,\n    };\n\n    constructor(public props: CollapsibleItemProps) {\n        super(props);\n        this.handleAction = this.handleAction.bind(this);\n        this.isDeepEmpty = this.isDeepEmpty.bind(this);\n\n        this.state = {\n            isOpen: this.isDeepEmpty(props.data),\n        };\n    }\n\n    private section: HTMLLimelCollapsibleSectionElement;\n\n    public componentDidMount() {\n        const section = this.section;\n        section.addEventListener('action', this.handleAction);\n        section.addEventListener('open', this.handleOpen);\n\n        this.setActions(section);\n    }\n\n    public componentDidUpdate() {\n        this.setActions(this.section);\n    }\n\n    public componentWillUnmount() {\n        const section = this.section;\n        section.removeEventListener('action', this.handleAction);\n        section.removeEventListener('open', this.handleOpen);\n    }\n\n    public render() {\n        const { data, schema, formSchema } = this.props;\n        let children: any;\n        if (this.state.isOpen) {\n            children = this.props.item.children;\n        }\n\n        return React.createElement(\n            'limel-collapsible-section',\n            {\n                header: findTitle(data, schema, formSchema) || 'New item',\n                class: 'limel-form-array-item--object',\n                ref: (section: HTMLLimelCollapsibleSectionElement) => {\n                    this.section = section;\n                },\n                'is-open': this.state.isOpen,\n            },\n            children\n        );\n    }\n\n    private setActions(element: HTMLLimelCollapsibleSectionElement) {\n        const { item, index, allowItemRemoval, allowItemReorder } = this.props;\n        const actions: Array<Action & Runnable> = [];\n\n        if (allowItemReorder) {\n            actions.push(\n                {\n                    id: 'down',\n                    icon: 'down_arrow',\n                    disabled: !item.hasMoveDown,\n                    run: item.onReorderClick(index, index + 1),\n                },\n                {\n                    id: 'up',\n                    icon: 'up_arrow',\n                    disabled: !item.hasMoveUp,\n                    run: item.onReorderClick(index, index - 1),\n                }\n            );\n        }\n\n        if (allowItemRemoval) {\n            actions.push({\n                id: 'remove',\n                icon: 'trash',\n                disabled: !item.hasRemove,\n                run: item.onDropIndexClick(index),\n            });\n        }\n\n        element.actions = actions;\n    }\n\n    private handleAction(event: CustomEvent<Action & Runnable>) {\n        event.stopPropagation();\n        event.detail.run(event);\n    }\n\n    private handleOpen = () => {\n        this.setState({\n            isOpen: true,\n        });\n    };\n\n    private isDeepEmpty(data) {\n        if (typeof data !== 'object') {\n            return false;\n        }\n\n        if (isEmpty(data)) {\n            return true;\n        }\n\n        return Object.values(data).every(this.isDeepEmpty);\n    }\n}\n"]}
+{"version":3,"file":"array-field-collapsible-item.js","sourceRoot":"","sources":["../../../../src/components/form/templates/array-field-collapsible-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { Action } from '../../collapsible-section/action';\nimport React from 'react';\nimport { findTitle } from './common';\nimport { ArrayFieldItem, Runnable } from './types';\nimport { isEmpty } from 'lodash-es';\nimport { JSONSchema7 } from 'json-schema';\n\ninterface CollapsibleItemProps {\n    /**\n     * Data from reach-jsonschema-form\n     */\n    item: ArrayFieldItem;\n\n    /**\n     * The index of the field in the array\n     */\n    index: number;\n\n    /**\n     * The value of the field\n     */\n    data: any;\n\n    /**\n     * Schema for the field\n     */\n    schema: JSONSchema7;\n\n    /**\n     * Schema for the entire form\n     */\n    formSchema: JSONSchema7;\n\n    /**\n     * Control whether items can be removed.\n     */\n    allowItemRemoval: boolean;\n\n    /**\n     * Whether this particular item can be reordered.\n     */\n    allowItemReorder: boolean;\n}\n\nexport class CollapsibleItemTemplate extends React.Component<CollapsibleItemProps> {\n    state = {\n        isOpen: false,\n    };\n\n    constructor(public props: CollapsibleItemProps) {\n        super(props);\n        this.handleAction = this.handleAction.bind(this);\n        this.isDeepEmpty = this.isDeepEmpty.bind(this);\n\n        this.state = {\n            isOpen: this.isDeepEmpty(props.data),\n        };\n    }\n\n    private section: HTMLLimelCollapsibleSectionElement;\n\n    public componentDidMount() {\n        const section = this.section;\n        section.addEventListener('action', this.handleAction);\n        section.addEventListener('open', this.handleOpen);\n\n        this.setActions(section);\n    }\n\n    public componentDidUpdate() {\n        this.setActions(this.section);\n    }\n\n    public componentWillUnmount() {\n        const section = this.section;\n        section.removeEventListener('action', this.handleAction);\n        section.removeEventListener('open', this.handleOpen);\n    }\n\n    public render() {\n        const { data, schema, formSchema } = this.props;\n        let children: any;\n        if (this.state.isOpen) {\n            children = this.props.item.children;\n        }\n\n        const dragHandle = this.props.allowItemReorder\n            ? React.createElement('limel-drag-handle', {\n                  slot: 'header',\n                  class: 'drag-handle',\n              })\n            : null;\n\n        return React.createElement(\n            'limel-collapsible-section',\n            {\n                header: findTitle(data, schema, formSchema) || 'New item',\n                class: 'array-item limel-form-array-item--object',\n                ref: (section: HTMLLimelCollapsibleSectionElement) => {\n                    this.section = section;\n                },\n                'is-open': this.state.isOpen,\n                'data-reorder-id': String(this.props.index),\n                'data-reorderable': this.props.allowItemReorder\n                    ? 'true'\n                    : 'false',\n            },\n            dragHandle,\n            children\n        );\n    }\n\n    private setActions(element: HTMLLimelCollapsibleSectionElement) {\n        const { item, index, allowItemRemoval } = this.props;\n        const actions: Array<Action & Runnable> = [];\n\n        if (allowItemRemoval) {\n            actions.push({\n                id: 'remove',\n                icon: 'trash',\n                disabled: !item.hasRemove,\n                run: item.onDropIndexClick(index),\n            });\n        }\n\n        element.actions = actions;\n    }\n\n    private handleAction(event: CustomEvent<Action & Runnable>) {\n        event.stopPropagation();\n        event.detail.run(event);\n    }\n\n    private handleOpen = () => {\n        this.setState({\n            isOpen: true,\n        });\n    };\n\n    private isDeepEmpty(data) {\n        if (typeof data !== 'object') {\n            return false;\n        }\n\n        if (isEmpty(data)) {\n            return true;\n        }\n\n        return Object.values(data).every(this.isDeepEmpty);\n    }\n}\n"]}