@limetech/lime-elements 38.31.0 → 38.31.2

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;
 }
 
-limel-code-editor {
-  margin-bottom: 0.75rem;
+.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-form-array-item--object {
-  margin-bottom: 0.25rem;
+.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-drag-handle {
+  order: 10;
+}
+
+limel-collapsible-section.is-being-dragged {
+  border-radius: 0.75rem !important;
 }
 
 .limel-form-layout--default {
@@ -157,13 +290,6 @@ p {
   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;
-}
-
 .form-group {
   position: relative;
 }
@@ -292,6 +418,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/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"]}

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

@@ -8,14 +8,6 @@ export class SimpleItemTemplate extends React.Component {
       const { item, index } = this.props;
       item.onDropIndexClick(index)(event);
     };
-    this.handleMoveUp = (event) => {
-      const { item, index } = this.props;
-      item.onReorderClick(index, index - 1)(event);
-    };
-    this.handleMoveDown = (event) => {
-      const { item, index } = this.props;
-      item.onReorderClick(index, index + 1)(event);
-    };
     this.setRemoveButton = (button) => {
       if (this.removeButton) {
         this.removeButton.removeEventListener('click', this.handleRemove);
@@ -25,39 +17,30 @@ export class SimpleItemTemplate extends React.Component {
         this.removeButton.addEventListener('click', this.handleRemove);
       }
     };
-    this.setMoveUpButton = (button) => {
-      if (this.moveUpButton) {
-        this.moveUpButton.removeEventListener('click', this.handleMoveUp);
-      }
-      this.moveUpButton = button || undefined;
-      if (this.moveUpButton) {
-        this.moveUpButton.addEventListener('click', this.handleMoveUp);
-      }
-    };
-    this.setMoveDownButton = (button) => {
-      if (this.moveDownButton) {
-        this.moveDownButton.removeEventListener('click', this.handleMoveDown);
-      }
-      this.moveDownButton = button || undefined;
-      if (this.moveDownButton) {
-        this.moveDownButton.addEventListener('click', this.handleMoveDown);
-      }
-    };
   }
   componentWillUnmount() {
     this.setRemoveButton(undefined);
-    this.setMoveUpButton(undefined);
-    this.setMoveDownButton(undefined);
   }
   render() {
-    const { item } = this.props;
+    const { item, allowItemReorder } = this.props;
     return React.createElement('div', {
-      className: 'limel-form-array-item--simple',
-    }, this.props.item.children, this.props.allowItemReorder
-      ? this.renderMoveDownButton(item)
-      : null, this.props.allowItemReorder ? this.renderMoveUpButton(item) : null, this.props.allowItemRemoval ? this.renderRemoveButton(item) : null);
+      className: 'array-item limel-form-array-item--simple',
+      'data-reorder-id': String(this.props.dataIndex),
+      'data-reorderable': allowItemReorder ? 'true' : 'false',
+    }, this.props.item.children, this.renderRemoveButton(item), this.renderDragHandle());
+  }
+  renderDragHandle() {
+    if (!this.props.allowItemReorder) {
+      return;
+    }
+    return React.createElement('limel-drag-handle', {
+      class: 'drag-handle',
+    });
   }
   renderRemoveButton(item) {
+    if (!this.props.allowItemRemoval) {
+      return;
+    }
     const props = {
       icon: 'trash',
       disabled: !item.hasRemove,
@@ -65,21 +48,5 @@ export class SimpleItemTemplate extends React.Component {
     };
     return React.createElement(LIMEL_ICON_BUTTON, props);
   }
-  renderMoveUpButton(item) {
-    const props = {
-      icon: 'up_arrow',
-      disabled: !item.hasMoveUp,
-      ref: this.setMoveUpButton,
-    };
-    return React.createElement(LIMEL_ICON_BUTTON, props);
-  }
-  renderMoveDownButton(item) {
-    const props = {
-      icon: 'down_arrow',
-      disabled: !item.hasMoveDown,
-      ref: this.setMoveDownButton,
-    };
-    return React.createElement(LIMEL_ICON_BUTTON, props);
-  }
 }
 //# sourceMappingURL=array-field-simple-item.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"array-field-simple-item.js","sourceRoot":"","sources":["../../../../src/components/form/templates/array-field-simple-item.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { ArrayFieldItem } from './types';\n\ninterface SimpleItemProps {\n    item: ArrayFieldItem;\n    index: number;\n    allowItemRemoval: boolean;\n    allowItemReorder: boolean;\n}\n\nconst LIMEL_ICON_BUTTON = 'limel-icon-button';\n\nexport class SimpleItemTemplate extends React.Component<SimpleItemProps> {\n    constructor(public props: SimpleItemProps) {\n        super(props);\n    }\n\n    private removeButton?: HTMLLimelButtonElement;\n    private moveUpButton?: HTMLLimelButtonElement;\n    private moveDownButton?: HTMLLimelButtonElement;\n\n    public componentWillUnmount() {\n        this.setRemoveButton(undefined);\n        this.setMoveUpButton(undefined);\n        this.setMoveDownButton(undefined);\n    }\n\n    public render() {\n        const { item } = this.props;\n\n        return React.createElement(\n            'div',\n            {\n                className: 'limel-form-array-item--simple',\n            },\n            this.props.item.children,\n            this.props.allowItemReorder\n                ? this.renderMoveDownButton(item)\n                : null,\n            this.props.allowItemReorder ? this.renderMoveUpButton(item) : null,\n            this.props.allowItemRemoval ? this.renderRemoveButton(item) : null\n        );\n    }\n\n    private renderRemoveButton(item: ArrayFieldItem) {\n        const props: any = {\n            icon: 'trash',\n            disabled: !item.hasRemove,\n            ref: this.setRemoveButton,\n        };\n\n        return React.createElement(LIMEL_ICON_BUTTON, props);\n    }\n\n    private renderMoveUpButton(item: ArrayFieldItem) {\n        const props: any = {\n            icon: 'up_arrow',\n            disabled: !item.hasMoveUp,\n            ref: this.setMoveUpButton,\n        };\n\n        return React.createElement(LIMEL_ICON_BUTTON, props);\n    }\n\n    private renderMoveDownButton(item: ArrayFieldItem) {\n        const props: any = {\n            icon: 'down_arrow',\n            disabled: !item.hasMoveDown,\n            ref: this.setMoveDownButton,\n        };\n\n        return React.createElement(LIMEL_ICON_BUTTON, props);\n    }\n\n    private handleRemove = (event: PointerEvent): void => {\n        const { item, index } = this.props;\n        item.onDropIndexClick(index)(event);\n    };\n\n    private handleMoveUp = (event: PointerEvent): void => {\n        const { item, index } = this.props;\n        item.onReorderClick(index, index - 1)(event);\n    };\n\n    private handleMoveDown = (event: PointerEvent): void => {\n        const { item, index } = this.props;\n        item.onReorderClick(index, index + 1)(event);\n    };\n\n    private setRemoveButton = (button?: HTMLLimelButtonElement | null) => {\n        if (this.removeButton) {\n            this.removeButton.removeEventListener('click', this.handleRemove);\n        }\n\n        this.removeButton = button || undefined;\n\n        if (this.removeButton) {\n            this.removeButton.addEventListener('click', this.handleRemove);\n        }\n    };\n\n    private setMoveUpButton = (button?: HTMLLimelButtonElement | null) => {\n        if (this.moveUpButton) {\n            this.moveUpButton.removeEventListener('click', this.handleMoveUp);\n        }\n\n        this.moveUpButton = button || undefined;\n\n        if (this.moveUpButton) {\n            this.moveUpButton.addEventListener('click', this.handleMoveUp);\n        }\n    };\n\n    private setMoveDownButton = (button?: HTMLLimelButtonElement | null) => {\n        if (this.moveDownButton) {\n            this.moveDownButton.removeEventListener(\n                'click',\n                this.handleMoveDown\n            );\n        }\n\n        this.moveDownButton = button || undefined;\n\n        if (this.moveDownButton) {\n            this.moveDownButton.addEventListener('click', this.handleMoveDown);\n        }\n    };\n}\n"]}
+{"version":3,"file":"array-field-simple-item.js","sourceRoot":"","sources":["../../../../src/components/form/templates/array-field-simple-item.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,MAAM,iBAAiB,GAAG,mBAAmB,CAAC;AAE9C,MAAM,OAAO,kBAAmB,SAAQ,KAAK,CAAC,SAA0B;EACpE,YAAmB,KAAsB;IACrC,KAAK,CAAC,KAAK,CAAC,CAAC;IADE,UAAK,GAAL,KAAK,CAAiB;IAkDjC,iBAAY,GAAG,CAAC,KAAmB,EAAQ,EAAE;MACjD,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;MACnC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC,CAAC;IAEe,oBAAe,GAAG,CAC/B,MAA0C,EAC5C,EAAE;MACA,IAAI,IAAI,CAAC,YAAY,EAAE;QACnB,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;OACrE;MAED,IAAI,CAAC,YAAY,GAAG,MAAM,IAAI,SAAS,CAAC;MAExC,IAAI,IAAI,CAAC,YAAY,EAAE;QACnB,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;OAClE;IACL,CAAC,CAAC;EAjEF,CAAC;EAIM,oBAAoB;IACvB,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;EACpC,CAAC;EAEM,MAAM;IACT,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;IAE9C,OAAO,KAAK,CAAC,aAAa,CACtB,KAAK,EACL;MACI,SAAS,EAAE,0CAA0C;MACrD,iBAAiB,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;MAC/C,kBAAkB,EAAE,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;KAC1D,EACD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,EACxB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAC7B,IAAI,CAAC,gBAAgB,EAAE,CAC1B,CAAC;EACN,CAAC;EAEO,gBAAgB;IACpB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE;MAC9B,OAAO;KACV;IAED,OAAO,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE;MAC5C,KAAK,EAAE,aAAa;KACvB,CAAC,CAAC;EACP,CAAC;EAEO,kBAAkB,CAAC,IAAoB;IAC3C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE;MAC9B,OAAO;KACV;IAED,MAAM,KAAK,GAAQ;MACf,IAAI,EAAE,OAAO;MACb,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS;MACzB,GAAG,EAAE,IAAI,CAAC,eAAe;KAC5B,CAAC;IAEF,OAAO,KAAK,CAAC,aAAa,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;EACzD,CAAC;CAoBJ","sourcesContent":["import React from 'react';\nimport { ArrayFieldItem } from './types';\n\ninterface SimpleItemProps {\n    item: ArrayFieldItem;\n    index: number;\n    allowItemRemoval: boolean;\n    allowItemReorder: boolean;\n    dataIndex: number;\n}\n\nconst LIMEL_ICON_BUTTON = 'limel-icon-button';\n\nexport class SimpleItemTemplate extends React.Component<SimpleItemProps> {\n    constructor(public props: SimpleItemProps) {\n        super(props);\n    }\n\n    private removeButton?: HTMLLimelIconButtonElement;\n\n    public componentWillUnmount() {\n        this.setRemoveButton(undefined);\n    }\n\n    public render() {\n        const { item, allowItemReorder } = this.props;\n\n        return React.createElement(\n            'div',\n            {\n                className: 'array-item limel-form-array-item--simple',\n                'data-reorder-id': String(this.props.dataIndex),\n                'data-reorderable': allowItemReorder ? 'true' : 'false',\n            },\n            this.props.item.children,\n            this.renderRemoveButton(item),\n            this.renderDragHandle()\n        );\n    }\n\n    private renderDragHandle() {\n        if (!this.props.allowItemReorder) {\n            return;\n        }\n\n        return React.createElement('limel-drag-handle', {\n            class: 'drag-handle',\n        });\n    }\n\n    private renderRemoveButton(item: ArrayFieldItem) {\n        if (!this.props.allowItemRemoval) {\n            return;\n        }\n\n        const props: any = {\n            icon: 'trash',\n            disabled: !item.hasRemove,\n            ref: this.setRemoveButton,\n        };\n\n        return React.createElement(LIMEL_ICON_BUTTON, props);\n    }\n\n    private handleRemove = (event: PointerEvent): void => {\n        const { item, index } = this.props;\n        item.onDropIndexClick(index)(event);\n    };\n\n    private readonly setRemoveButton = (\n        button?: HTMLLimelIconButtonElement | null\n    ) => {\n        if (this.removeButton) {\n            this.removeButton.removeEventListener('click', this.handleRemove);\n        }\n\n        this.removeButton = button || undefined;\n\n        if (this.removeButton) {\n            this.removeButton.addEventListener('click', this.handleRemove);\n        }\n    };\n}\n"]}