@limetech/lime-elements 37.13.0 → 37.13.2

package/dist/cjs/limel-flex-container.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-38eb64b5.js');
+const index = require('./index-d1052409.js');
 
 const flexContainerCss = ":host(limel-flex-container){display:flex}:host(limel-flex-container[hidden]){display:none}:host(limel-flex-container[direction=horizontal]){flex-direction:row}:host(limel-flex-container[direction=horizontal][reverse]){flex-direction:row-reverse}:host(limel-flex-container[direction=vertical]){flex-direction:column}:host(limel-flex-container[direction=vertical][reverse]){flex-direction:column-reverse}:host(limel-flex-container[align=start]){align-items:flex-start}:host(limel-flex-container[align=end]){align-items:flex-end}:host(limel-flex-container[align=center]){align-items:center}:host(limel-flex-container[align=stretch]){align-items:stretch}:host(limel-flex-container[justify=start]){justify-content:flex-start}:host(limel-flex-container[justify=end]){justify-content:flex-end}:host(limel-flex-container[justify=center]){justify-content:center}:host(limel-flex-container[justify=space-between]){justify-content:space-between}:host(limel-flex-container[justify=space-around]){justify-content:space-around}:host(limel-flex-container[justify=space-evenly]){justify-content:space-evenly}:host(limel-flex-container[slot=button]){gap:0.5rem;width:100%;justify-content:flex-end}:host(limel-flex-container[slot=button][direction=horizontal][reverse]){justify-content:flex-start}";
 

package/dist/cjs/limel-form.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-38eb64b5.js');
+const index = require('./index-d1052409.js');
 const _commonjsHelpers = require('./_commonjsHelpers-0c557e26.js');
 const _baseIsEqual$1 = require('./_baseIsEqual-2b4442b5.js');
 const isArray$4 = require('./isArray-d188a04f.js');

package/dist/cjs/limel-grid.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-38eb64b5.js');
+const index = require('./index-d1052409.js');
 
 const gridCss = ":host{display:block;position:relative}:host([hidden]){display:none}slot{display:grid;grid-template-areas:var(--lime-grid-area, \"\");grid-template-columns:repeat(var(--lime-grid-columns, 4), minmax(0, 1fr));gap:var(--lime-grid-gutter, 1rem);grid-auto-flow:row dense;grid-auto-rows:var(--lime-grid-cell-height, 2.5rem);margin:0;height:100%;width:100%}";
 

package/dist/cjs/limel-header.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-38eb64b5.js');
+const index = require('./index-d1052409.js');
 const getIconProps = require('./get-icon-props-50be7440.js');
 
 const headerCss = "@charset \"UTF-8\";:host(limel-header){display:flex;align-items:center;box-sizing:border-box;width:100%;background-color:var(--header-background-color, rgb(var(--contrast-300)));border-top-left-radius:var(--header-top-right-left-border-radius, 0.75rem);border-top-right-radius:var(--header-top-right-left-border-radius, 0.75rem);padding:0.25rem}.information{display:flex;flex-grow:1;align-items:center;min-width:0}.icon{--limel-icon-svg-margin:0.25rem;flex-shrink:0;color:var(--header-icon-color, rgb(var(--contrast-1100)));background-color:var(--header-icon-background-color, transparent);width:2.25rem;border-radius:0.56rem}.headings{min-width:0;margin-left:0.25rem}.heading,.subheading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;padding:0}.heading{color:var(--header-heading-color, rgb(var(--contrast-1100)));font-size:1rem;font-weight:500}.subheading{color:var(--header-subheading-color, rgb(var(--contrast-900)));font-size:0.8125rem;font-weight:400}.subheading__supporting-text{color:var(--header-supporting-text-color, var(--header-subheading-color))}.subheading__supporting-text span{margin:0 0.125rem}slot[name=actions]{flex-shrink:0}:host(limel-header.is-narrow){padding:0.125rem 0.25rem}:host(limel-header.is-narrow) .icon{--limel-icon-svg-margin:0;width:1.25rem}:host(limel-header.is-narrow) .heading{font-size:0.9375rem}:host(limel-header.has-responsive-layout){display:grid;grid-template-columns:repeat(auto-fit, minmax(clamp(50%, var(--header-responsive-breakpoint, 22rem), 100%), 1fr))}:host(limel-header.has-responsive-layout) .headings{padding-right:0.5rem}:host(limel-header.has-responsive-layout) slot[name=actions]{display:flex;justify-content:flex-end}";

package/dist/cjs/limel-help-content.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-38eb64b5.js');
+const index = require('./index-d1052409.js');
 
 const limelHelpContentCss = "@charset \"UTF-8\";:host(limel-help-content){display:flex;box-sizing:border-box;flex-direction:column;gap:0.5rem;max-height:30rem;height:100%}limel-markdown{--limel-overflow-mask-vertical:linear-gradient(\n      to bottom,\n      transparent 0%,\n      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);padding-right:1rem;padding-left:1rem;min-height:0;min-width:0;overflow:hidden auto}a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;cursor:pointer;transition:color 0.2s ease;color:rgb(var(--color-blue-default));position:sticky;bottom:0;text-decoration:none;font-size:0.875rem;padding-bottom:0.125rem}a:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:\"\";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a:hover{color:rgb(var(--color-blue-default))}a:hover:before{opacity:0.3;transform:scale(1)}span{padding:0 1rem 0.5rem 1rem;min-width:0}";
 

package/dist/cjs/limel-help.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-38eb64b5.js');
+const index = require('./index-d1052409.js');
 
 const helpCss = "@charset \"UTF-8\";limel-popover{display:flex;--popover-surface-width:min(calc(100vw - 4rem), 22rem)}button[slot=trigger]{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-sizing:border-box;display:flex;align-items:center;justify-content:center;color:rgb(var(--color-sky-default));border-radius:50%;box-shadow:0 0 0 1px rgb(var(--color-sky-lighter), 0.7);width:0.875rem;height:0.875rem;font-size:0.75rem}button[slot=trigger]:hover{color:rgb(var(--color-sky-dark));background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button[slot=trigger]:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}button[slot=trigger]:focus{outline:none}button[slot=trigger]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button[slot=trigger].is-open{color:rgb(var(--color-white));background-color:rgb(var(--color-sky-default));box-shadow:var(--button-shadow-inset)}";
 

package/dist/cjs/limel-icon-button.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-38eb64b5.js');
-const makeEnterClickable = require('./make-enter-clickable-f7f8d33c.js');
+const index = require('./index-d1052409.js');
+const makeEnterClickable = require('./make-enter-clickable-c116ac4f.js');
 const randomString = require('./random-string-c8445652.js');
 
 const iconButtonCss = "@charset \"UTF-8\";:host([hidden]){display:none}:host([aria-expanded=true]) button,:host([aria-expanded]:not([aria-expanded=false])) button{box-shadow:var(--button-shadow-inset-pressed) !important}button{all:unset;display:inline-flex;align-items:center;justify-content:center;height:2.25rem;width:2.25rem;border-radius:50%}button:not(:disabled){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--icon-background-color, transparent)}button:not(:disabled):hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button:not(:disabled):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}button:not(:disabled):focus{outline:none}button:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:disabled{cursor:not-allowed;color:var(--mdc-theme-text-disabled-on-background)}:host([elevated]) button{box-shadow:var(--button-shadow-normal)}:host([elevated]) button:disabled{box-shadow:var(--button-shadow-normal)}limel-icon{width:1.25rem}";

package/dist/cjs/limel-icon.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-38eb64b5.js');
+const index = require('./index-d1052409.js');
 const config = require('./config-e7e1a299.js');
 
 class CacheStorageIconCache {

package/dist/cjs/limel-info-tile.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-38eb64b5.js');
+const index = require('./index-d1052409.js');
 
 const infoTileCss = "@charset \"UTF-8\";\n/**\n * Note! This file is exported to `dist/scss/` in the published\n * node module, for consumer projects to import.\n * That means this file cannot import from any file that isn't\n * also exported, keeping the same relative path.\n *\n * Or, just don't import anything, that works too.\n */\n/**\n* This can be used on a trigger element that opens a dropdown menu or a popover.\n*/\n/**\n * This mixin will mask out the content that is close to\n * the edges of a scrollable area.\n * - If the scrollable content has `overflow-y`, use `vertically`\n * as an argument for `$direction`.\n - If the scrollable content has `overflow-x`, use `horizontally`\n * as an argument for `$direction`.\n *\n * For the visual effect to work smoothly, we need to make sure that\n * the size of the fade-out edge effect is the same as the\n * internal paddings of the scrollable area. Otherwise, content of a\n * scrollable area that does not have a padding will fade out before\n * any scrolling has been done.\n * This is why this mixin already adds paddings, which automatically\n * default to the size of the fade-out effect.\n * This size defaults to `1rem`, but to override the size use\n * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`\n * when `vertically` argument is set, and use\n * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`\n * when `horizontally` argument is set.\n * Of course you can also programmatically increase and decrease the\n * size of these variables for each edge, based on the amount of\n * scrolling that has been done by the user. In this case, make sure\n * to add a custom padding where the mixin is used, to override\n * the paddings that are automatically added by the mixin in the\n * compiled CSS code.\n */\n/**\n* This mixin will add an animated underline to the bottom of an `a` elements.\n* Note that you may need to add `all: unset;` –depending on your use case–\n* before using this mixin.\n*/\n/**\n* This mixin creates a cross-browser font stack.\n* - `sans-serif` can be used for the UI of the components.\n* - `monospace` can be used for code.\n*\n* ⚠️ If we change the font stacks, we need to update\n* 1. the consumer documentation in `README.md`, and\n* 2. the CSS variables of `--kompendium-example-font-family`\n* in the `<style>` tag of `index.html`.\n*/\n/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n:host(limel-info-tile) {\n  --badge-text-color: var(\n      --info-tile-badge-text-color,\n      rgb(var(--color-white))\n  );\n  --badge-background-color: var(\n      --info-tile-badge-background-color,\n      rgb(var(--color-red-default))\n  );\n  --circular-progress-text-color: var(\n      --info-tile-progress-text-color,\n      var(--info-tile-text-color)\n  );\n  --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n  --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n  --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n  --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n  --circular-progress-background-color: var(\n      --info-tile-progress-background-color,\n      var(--info-tile-background-color)\n  );\n  --label-min-size: 0.75rem;\n  --label-preferred-size: 6cqw;\n  --label-max-size: 1rem;\n  --value-min-size: 1rem;\n  --value-preferred-size: 20cqw;\n  --value-max-size: 4rem;\n  --suffix-prefix-min-size: 0.75rem;\n  --suffix-prefix-preferred-size: 8cqw;\n  --suffix-prefix-max-size: 1.5rem;\n  --icon-min-size: 2rem;\n  --icon-preferred-size: 60cqh;\n  --icon-max-size: calc(100cqw - 0.5rem);\n  isolation: isolate;\n  container-type: size;\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n:host(limel-info-tile) * {\n  box-sizing: border-box;\n}\n\n:host(limel-info-tile[disabled]) a {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\na {\n  all: unset;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  height: 100%;\n  width: 100%;\n  flex-grow: 1;\n  padding: 0.25rem 1rem 0.5rem 1rem;\n  border-radius: var(--info-tile-border-radius, 1rem);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n}\na.is-clickable {\n  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;\n  cursor: pointer;\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-normal);\n}\na.is-clickable:hover {\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-hovered);\n}\na.is-clickable:active {\n  box-shadow: var(--button-shadow-pressed);\n  transform: translate3d(0, 0.08rem, 0);\n}\na.is-clickable:focus {\n  outline: none;\n}\na.is-clickable:focus-visible {\n  outline: none;\n  box-shadow: var(--shadow-depth-8-focused);\n}\n\n.icon {\n  z-index: 1;\n  position: absolute;\n  top: 0.5rem;\n  right: 0.75rem;\n  padding: 0.25rem;\n  aspect-ratio: 1/1;\n  color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n  border-radius: 0;\n  height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));\n}\n@supports not (container-type: size) {\n  .icon {\n    width: max(10%, 3rem);\n  }\n}\n.has-circular-progress .icon {\n  top: unset;\n  bottom: 0.5rem;\n  --icon-min-size: 1.5rem;\n  --icon-preferred-size: 20cqh;\n}\n\n.progress {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  --circular-progress-size: min(\n      var(--icon-preferred-size),\n      var(--icon-max-size)\n  );\n}\n@supports not (container-type: size) {\n  .progress {\n    --circular-progress-size: initial;\n  }\n}\n\n.label {\n  z-index: 1;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n  line-height: 1.2;\n  font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));\n}\n@supports not (container-type: size) {\n  .label {\n    font-size: 0.875rem;\n  }\n}\n\nlimel-badge {\n  position: absolute;\n  top: -0.25rem;\n  right: -0.25rem;\n}\n\nlimel-linear-progress {\n  --lime-primary-color: var(--info-tile-text-color);\n  position: absolute;\n  inset: auto 0 0 0;\n  border-radius: 1rem;\n  overflow: hidden;\n}\n\n.value-group {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n  text-shadow: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n  display: flex;\n}\n\n.prefix,\n.suffix {\n  font-size: clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));\n  opacity: 0.7;\n}\n@supports not (container-type: size) {\n  .prefix,\n  .suffix {\n    font-size: 0.75rem;\n  }\n}\n\n.prefix {\n  align-self: flex-start;\n  line-height: normal;\n  transform: translateY(40%);\n}\n\n.value {\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n  transform-origin: left;\n  transform: translate3d(0, 0, 0) scale(1);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-weight: bold;\n  line-height: normal;\n  font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));\n}\n@supports not (container-type: size) {\n  .value {\n    font-size: 1.5rem;\n  }\n}\n:host(limel-info-tile[loading]) .value {\n  opacity: 0.3;\n  transform: translate3d(0, 0, 0) scale(0.9);\n}\n\n.suffix {\n  transform: translateY(10%);\n}\n\n@container (width < 8rem) {\n  .progress {\n    top: 0.25rem;\n    right: 0.25rem;\n  }\n  a {\n    padding: 0.375rem;\n    gap: 0.125rem;\n  }\n}\n@container (width < 18.75rem) {\n  .progress {\n    top: 0.5rem;\n    right: 0.5rem;\n  }\n  .icon {\n    top: 0.25rem;\n    right: 0.5rem;\n  }\n  .has-circular-progress .icon {\n    right: 0.25rem;\n    bottom: 0.25rem;\n  }\n}\n@container (width < 40.5rem) {\n  .value {\n    --value-preferred-size: 13cqw;\n  }\n  .value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {\n    --value-preferred-size: 20cqw;\n  }\n  .value.ch-5 {\n    --value-preferred-size: 18cqw;\n  }\n  .value.ch-6 {\n    --value-preferred-size: 17cqw;\n  }\n  .value.ch-7 {\n    --value-preferred-size: 16cqw;\n  }\n  .value.ch-8 {\n    --value-preferred-size: 15cqw;\n  }\n  .value.ch-9 {\n    --value-preferred-size: 14cqw;\n  }\n}\n@container (height > 8rem) {\n  a {\n    padding-top: 0.75rem;\n    padding-bottom: 1rem;\n  }\n}\n@container (height < 8rem) and (width > 8rem) {\n  .value {\n    --value-preferred-size: 32cqh !important;\n  }\n  .suffix,\n  .prefix {\n    --suffix-prefix-preferred-size: 16cqh !important;\n  }\n}\n@container (height > 18.75rem) {\n  .progress,\n  .icon {\n    position: relative;\n    top: unset;\n    right: unset;\n  }\n  a {\n    align-items: center;\n    justify-content: center;\n  }\n  .label {\n    text-align: center;\n  }\n  .has-circular-progress .icon {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    --icon-max-size: 3rem;\n  }\n}";
 

package/dist/cjs/limel-input-field_3.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-38eb64b5.js');
+const index = require('./index-d1052409.js');
 const keycodes = require('./keycodes-3949f425.js');
 const linkHelper = require('./link-helper-b7e6c8df.js');
 const randomString = require('./random-string-c8445652.js');
@@ -10,7 +10,7 @@ const config = require('./config-e7e1a299.js');
 const component = require('./component-37425b99.js');
 const dom = require('./dom-ee8ee17d.js');
 const component$1 = require('./component-cba208a8.js');
-const checkbox_template = require('./checkbox.template-02070306.js');
+const checkbox_template = require('./checkbox.template-f86d05d4.js');
 const getIconProps = require('./get-icon-props-50be7440.js');
 require('./component-b37fd9bc.js');
 require('./component-a4eb183b.js');
@@ -473,10 +473,20 @@ const InputField = class {
     properties.required = this.required;
     properties.readonly = this.readonly;
     properties.disabled = this.disabled || this.readonly;
+    let ariaControls = '';
     if (this.hasHelperText()) {
-      properties['aria-controls'] = this.helperTextId;
+      ariaControls += this.helperTextId;
       properties['aria-describedby'] = this.helperTextId;
     }
+    if (this.renderAutocompleteList()) {
+      if (ariaControls) {
+        ariaControls += ' ';
+      }
+      ariaControls += this.portalId;
+    }
+    if (ariaControls) {
+      properties['aria-controls'] = ariaControls;
+    }
     return [
       index.h("label", { class: this.getContainerClassList() }, index.h("span", { class: "mdc-notched-outline", tabindex: "-1" }, index.h("span", { class: "mdc-notched-outline__leading" }), this.renderLabel(), index.h("span", { class: "mdc-notched-outline__trailing" })), this.renderLeadingIcon(), this.renderEmptyValueForReadonly(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton()),
       this.renderHelperLine(),