@limetech/lime-elements 36.1.0-next.9 → 36.1.0

package/dist/esm/limel-picker.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-11cd0b60.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-cdfd351d.js';
 import { i as isDescendant } from './dom-0f79cbe7.js';
 import { T as TAB, b as ESCAPE, E as ENTER, c as TAB_KEY_CODE, d as ESCAPE_KEY_CODE, a as ENTER_KEY_CODE, A as ARROW_UP, e as ARROW_UP_KEY_CODE, f as ARROW_DOWN, g as ARROW_DOWN_KEY_CODE } from './keycodes-9f971b46.js';
 import { c as createRandomString } from './random-string-2246b81e.js';
@@ -230,54 +230,29 @@ const Picker = class {
     this.change = createEvent(this, "change", 7);
     this.interact = createEvent(this, "interact", 7);
     this.action = createEvent(this, "action", 7);
-    /**
-     * True if the picker should be disabled
-     */
+    // Should NOT be decorated with State(), since this
+    // should not trigger a re-render by itself.
+    this.chipSetEditMode = false;
     this.disabled = false;
-    /**
-     * Set to `true` to disable adding and removing items,
-     * but allow interaction with existing items.
-     */
     this.readonly = false;
-    /**
-     * True if the control requires a value
-     */
+    this.label = undefined;
+    this.searchLabel = undefined;
+    this.helperText = undefined;
+    this.leadingIcon = undefined;
+    this.emptyResultMessage = undefined;
     this.required = false;
-    /**
-     * True if multiple values are allowed
-     */
+    this.value = undefined;
+    this.searcher = undefined;
     this.multiple = false;
-    /**
-     * Sets delimiters between chips. Works only when `multiple` is `true`.
-     */
     this.delimiter = null;
-    /**
-     * Static actions that can be clicked by the user.
-     */
     this.actions = [];
-    /**
-     * Position of the custom static actions in the picker's results dropdown.
-     * Can be set to `'top'` or `'bottom'`.
-     */
     this.actionPosition = 'bottom';
-    /**
-     * Scroll behavior of the custom static actions, when user scrolls
-     * in the picker's results dropdown. Can be set to `'scroll'` which means
-     * the action items will scroll together with the list, or `'sticky'` which
-     * retains their position at the top or bottom of the drop down while
-     * scrolling.
-     */
     this.actionScrollBehavior = 'sticky';
-    /**
-     * Whether badge icons should be used in the result list or not
-     */
     this.badgeIcons = true;
+    this.items = undefined;
     this.textValue = '';
     this.loading = false;
     this.chips = [];
-    // Should NOT be decorated with State(), since this
-    // should not trigger a re-render by itself.
-    this.chipSetEditMode = false;
     this.handleTextInput = this.handleTextInput.bind(this);
     this.handleInputKeyDown = this.handleInputKeyDown.bind(this);
     this.handleDropdownKeyDown = this.handleDropdownKeyDown.bind(this);
@@ -504,7 +479,7 @@ const Picker = class {
   /**
    * Change handler for the list
    *
-   * @param {CustomEvent} event event
+   * @param {LimelListCustomEvent<ListItem>} event event
    * @returns {void}
    */
   handleListChange(event) {
@@ -525,7 +500,7 @@ const Picker = class {
   /**
    * Change handler for the list
    *
-   * @param {CustomEvent} event event
+   * @param {LimelChipSetCustomEvent} event event
    * @returns {void}
    */
   handleActionListChange(event) {

package/dist/esm/limel-popover_4.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-11cd0b60.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-cdfd351d.js';
 import { c as createRandomString } from './random-string-2246b81e.js';
 import { b as ESCAPE } from './keycodes-9f971b46.js';
 import { z as zipObject } from './zipObject-2bb1968e.js';
@@ -45,10 +45,6 @@ const Popover = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.close = createEvent(this, "close", 7);
-    /**
-     * True if the content within the popover should be visible
-     */
-    this.open = false;
     this.handleGlobalKeyPress = (event) => {
       if (event.key !== ESCAPE) {
         return;
@@ -57,6 +53,8 @@ const Popover = class {
       event.preventDefault();
       this.close.emit();
     };
+    this.open = false;
+    this.openDirection = undefined;
     this.portalId = createRandomString();
     this.globalClickListener = this.globalClickListener.bind(this);
   }
@@ -116,6 +114,7 @@ const popoverSurfaceCss = ":host(limel-popover-surface){isolation:isolate}.limel
 const PopoverSurface = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.contentCollection = undefined;
   }
   componentDidLoad() {
     this.appendElement();
@@ -142,11 +141,6 @@ const DEFAULT_MAX_LENGTH = 50;
 const Tooltip = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * The maximum amount of characters before rendering 'label' and
-     * 'helperLabel' in two rows.
-     */
-    this.maxlength = DEFAULT_MAX_LENGTH;
     this.showTooltip = () => {
       const tooltipDelay = 500;
       this.showTooltipTimeoutHandle = window.setTimeout(() => {
@@ -157,6 +151,11 @@ const Tooltip = class {
       clearTimeout(this.showTooltipTimeoutHandle);
       this.open = false;
     };
+    this.elementId = undefined;
+    this.label = undefined;
+    this.helperLabel = undefined;
+    this.maxlength = DEFAULT_MAX_LENGTH;
+    this.open = undefined;
     this.portalId = createRandomString();
     this.tooltipId = createRandomString();
   }
@@ -191,14 +190,13 @@ const Tooltip = class {
     owner === null || owner === void 0 ? void 0 : owner.removeEventListener('click', this.hideTooltip);
   }
   getOwnerElement() {
-    var _a;
     let element = this.host;
     do {
       element = element.parentNode;
     } while (element &&
       element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&
       element.nodeType !== Node.DOCUMENT_NODE);
-    return (_a = element) === null || _a === void 0 ? void 0 : _a.getElementById(this.elementId);
+    return element === null || element === void 0 ? void 0 : element.getElementById(this.elementId);
   }
   get host() { return getElement(this); }
 };
@@ -209,6 +207,9 @@ const tooltipContentCss = ":host{animation:display-tooltip 0.2s ease;display:fle
 const TooltipContent = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.label = undefined;
+    this.helperLabel = undefined;
+    this.maxlength = undefined;
   }
   render() {
     let isLabelsTextLong = false;

package/dist/esm/limel-portal.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-11cd0b60.js';
+import { r as registerInstance, h, g as getElement } from './index-cdfd351d.js';
 
 var top = 'top';
 var bottom = 'bottom';
@@ -160,38 +160,57 @@ var max = Math.max;
 var min = Math.min;
 var round = Math.round;
 
-function getBoundingClientRect(element, includeScale) {
+function getUAString() {
+  var uaData = navigator.userAgentData;
+
+  if (uaData != null && uaData.brands) {
+    return uaData.brands.map(function (item) {
+      return item.brand + "/" + item.version;
+    }).join(' ');
+  }
+
+  return navigator.userAgent;
+}
+
+function isLayoutViewport() {
+  return !/^((?!chrome|android).)*safari/i.test(getUAString());
+}
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy) {
   if (includeScale === void 0) {
     includeScale = false;
   }
 
-  var rect = element.getBoundingClientRect();
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+
+  var clientRect = element.getBoundingClientRect();
   var scaleX = 1;
   var scaleY = 1;
 
-  if (isHTMLElement(element) && includeScale) {
-    var offsetHeight = element.offsetHeight;
-    var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
-    // Fallback to 1 in case both values are `0`
-
-    if (offsetWidth > 0) {
-      scaleX = round(rect.width) / offsetWidth || 1;
-    }
-
-    if (offsetHeight > 0) {
-      scaleY = round(rect.height) / offsetHeight || 1;
-    }
+  if (includeScale && isHTMLElement(element)) {
+    scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
+    scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
   }
 
+  var _ref = isElement(element) ? getWindow(element) : window,
+      visualViewport = _ref.visualViewport;
+
+  var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
+  var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
+  var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
+  var width = clientRect.width / scaleX;
+  var height = clientRect.height / scaleY;
   return {
-    width: rect.width / scaleX,
-    height: rect.height / scaleY,
-    top: rect.top / scaleY,
-    right: rect.right / scaleX,
-    bottom: rect.bottom / scaleY,
-    left: rect.left / scaleX,
-    x: rect.left / scaleX,
-    y: rect.top / scaleY
+    width: width,
+    height: height,
+    top: y,
+    right: x + width,
+    bottom: y + height,
+    left: x,
+    x: x,
+    y: y
   };
 }
 
@@ -286,8 +305,8 @@ function getTrueOffsetParent(element) {
 
 
 function getContainingBlock(element) {
-  var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1;
-  var isIE = navigator.userAgent.indexOf('Trident') !== -1;
+  var isFirefox = /firefox/i.test(getUAString());
+  var isIE = /Trident/i.test(getUAString());
 
   if (isIE && isHTMLElement(element)) {
     // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
@@ -708,31 +727,21 @@ function getWindowScrollBarX(element) {
   return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
 }
 
-function getViewportRect(element) {
+function getViewportRect(element, strategy) {
   var win = getWindow(element);
   var html = getDocumentElement(element);
   var visualViewport = win.visualViewport;
   var width = html.clientWidth;
   var height = html.clientHeight;
   var x = 0;
-  var y = 0; // NB: This isn't supported on iOS <= 12. If the keyboard is open, the popper
-  // can be obscured underneath it.
-  // Also, `html.clientHeight` adds the bottom bar height in Safari iOS, even
-  // if it isn't open, so if this isn't available, the popper will be detected
-  // to overflow the bottom of the screen too early.
+  var y = 0;
 
   if (visualViewport) {
     width = visualViewport.width;
-    height = visualViewport.height; // Uses Layout Viewport (like Chrome; Safari does not currently)
-    // In Chrome, it returns a value very close to 0 (+/-) but contains rounding
-    // errors due to floating point numbers, so we need to check precision.
-    // Safari returns a number <= 0, usually < -1 when pinch-zoomed
-    // Feature detection fails in mobile emulation mode in Chrome.
-    // Math.abs(win.innerWidth / visualViewport.scale - visualViewport.width) <
-    // 0.001
-    // Fallback here: "Not Safari" userAgent
-
-    if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+    height = visualViewport.height;
+    var layoutViewport = isLayoutViewport();
+
+    if (layoutViewport || !layoutViewport && strategy === 'fixed') {
       x = visualViewport.offsetLeft;
       y = visualViewport.offsetTop;
     }
@@ -826,8 +835,8 @@ function rectToClientRect(rect) {
   });
 }
 
-function getInnerBoundingClientRect(element) {
-  var rect = getBoundingClientRect(element);
+function getInnerBoundingClientRect(element, strategy) {
+  var rect = getBoundingClientRect(element, false, strategy === 'fixed');
   rect.top = rect.top + element.clientTop;
   rect.left = rect.left + element.clientLeft;
   rect.bottom = rect.top + element.clientHeight;
@@ -839,8 +848,8 @@ function getInnerBoundingClientRect(element) {
   return rect;
 }
 
-function getClientRectFromMixedType(element, clippingParent) {
-  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+function getClientRectFromMixedType(element, clippingParent, strategy) {
+  return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
 } // A "clipping parent" is an overflowable container with the characteristic of
 // clipping (or hiding) overflowing elements with a position different from
 // `initial`
@@ -863,18 +872,18 @@ function getClippingParents(element) {
 // clipping parents
 
 
-function getClippingRect(element, boundary, rootBoundary) {
+function getClippingRect(element, boundary, rootBoundary, strategy) {
   var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
   var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
   var firstClippingParent = clippingParents[0];
   var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
-    var rect = getClientRectFromMixedType(element, clippingParent);
+    var rect = getClientRectFromMixedType(element, clippingParent, strategy);
     accRect.top = max(rect.top, accRect.top);
     accRect.right = min(rect.right, accRect.right);
     accRect.bottom = min(rect.bottom, accRect.bottom);
     accRect.left = max(rect.left, accRect.left);
     return accRect;
-  }, getClientRectFromMixedType(element, firstClippingParent));
+  }, getClientRectFromMixedType(element, firstClippingParent, strategy));
   clippingRect.width = clippingRect.right - clippingRect.left;
   clippingRect.height = clippingRect.bottom - clippingRect.top;
   clippingRect.x = clippingRect.left;
@@ -955,6 +964,8 @@ function detectOverflow(state, options) {
   var _options = options,
       _options$placement = _options.placement,
       placement = _options$placement === void 0 ? state.placement : _options$placement,
+      _options$strategy = _options.strategy,
+      strategy = _options$strategy === void 0 ? state.strategy : _options$strategy,
       _options$boundary = _options.boundary,
       boundary = _options$boundary === void 0 ? clippingParents : _options$boundary,
       _options$rootBoundary = _options.rootBoundary,
@@ -969,7 +980,7 @@ function detectOverflow(state, options) {
   var altContext = elementContext === popper ? reference : popper;
   var popperRect = state.rects.popper;
   var element = state.elements[altBoundary ? altContext : elementContext];
-  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
+  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);
   var referenceClientRect = getBoundingClientRect(state.elements.reference);
   var popperOffsets = computeOffsets({
     reference: referenceClientRect,
@@ -1483,7 +1494,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
   var isOffsetParentAnElement = isHTMLElement(offsetParent);
   var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
   var documentElement = getDocumentElement(offsetParent);
-  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
+  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
   var scroll = {
     scrollLeft: 0,
     scrollTop: 0
@@ -1792,35 +1803,14 @@ const portalCss = ":host(limel-portal){display:block;position:absolute;top:0;bot
 const Portal = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * Decides which direction the portal content should open.
-     */
+    this.loaded = false;
     this.openDirection = 'bottom';
-    /**
-     * Position of the content.
-     */
     this.position = 'absolute';
-    /**
-     * Dynamic styling that can be applied to the container holding the content.
-     */
+    this.containerId = undefined;
     this.containerStyle = {};
-    /**
-     * Parent element to move the content to.
-     */
     this.parent = document.body;
-    /**
-     * Used to make a dropdown have the same width as the trigger, for example
-     * in `limel-picker`.
-     */
     this.inheritParentWidth = false;
-    /**
-     * True if the content within the portal should be visible.
-     *
-     * If the content is from within a dialog for instance, this can be set to
-     * true from false when the dialog opens to position the content properly.
-     */
     this.visible = false;
-    this.loaded = false;
     this.parents = new WeakMap();
   }
   onVisible() {

package/dist/esm/limel-progress-flow-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-11cd0b60.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-cdfd351d.js';
 
 const progressFlowItemCss = ".flow-item{--step-background:var(\n      --progress-flow-step-background-color,\n      rgb(var(--contrast-600))\n  );--step-background--selected:var(\n      --progress-flow-step-background-color--selected,\n      var(--mdc-theme-primary)\n  );--step-background--passed:var(\n      --progress-flow-step-background-color--passed,\n      var(--step-background--selected)\n  );--step-text:var(\n      --progress-flow-step-text-color,\n      rgb(var(--contrast-1200))\n  );--step-text--selected:var(\n      --progress-flow-step-text-color--selected,\n      var(--mdc-theme-on-primary)\n  );--step-text--passed:var(\n      --progress-flow-step-text-color--passed,\n      var(--step-text--selected)\n  );--step-divider-color:var(\n      --progress-flow-step-divider-color,\n      rgb(var(--contrast-100))\n  );position:relative;width:100%;display:flex;flex-direction:column;align-items:stretch}.flow-item:not(.off-progress-item,.last) .divider:after{content:\"\"}.flow-item.off-progress-item{padding-left:0.5rem}.flow-item.first-off-progress-item{padding-left:1rem}.step{transition:background-color 0.2s ease, box-shadow 0.2s ease;display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:var(--step-height);border:none;font-size:0.875rem}.step.disabled{cursor:not-allowed}.step.disabled.readonly{opacity:1;cursor:default}.step:focus{outline:none}.step:focus-visible{box-shadow:var(--shadow-depth-8-focused)}.flow-item:not(.off-progress-item,.first) .step{padding-left:calc(var(--step-height) / 2)}.flow-item:not(.selected) .step:not(.disabled){cursor:pointer}.flow-item:not(.selected) .step:not(.disabled):hover{box-shadow:var(--button-shadow-normal)}.flow-item:not(.selected) .step:not(.disabled):active{box-shadow:var(--button-shadow-pressed)}.off-progress-item .step{border-radius:0.25rem;padding:0 0.75rem}.off-progress-item .step .icon{margin-left:0}.flow-item.first .step{border-top-left-radius:var(--step-height);border-bottom-left-radius:var(--step-height);padding-left:1.25rem}.flow-item.last .step{border-top-right-radius:var(--step-height);border-bottom-right-radius:var(--step-height);padding-right:1.25rem}.divider{display:flex;align-items:center;justify-content:center;width:var(--step-height);height:var(--step-height);position:absolute;z-index:1;right:calc(var(--step-height) / 2 * -1);overflow:hidden}.divider:after{position:absolute;display:block;box-sizing:border-box;transition:background-color 0.2s ease;width:100%;height:100%;right:calc(var(--step-height) / 5);transform:rotate(45deg);border-style:solid;border-width:0.125rem 0.125rem 0 0;border-radius:0 0.5rem 0 0;border-color:var(--step-divider-color)}.flow-item.last .divider{width:0}.text,.secondary-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:var(--max-text-width);z-index:2}.secondary-text{font-size:0.75rem;margin:auto;padding-left:calc(var(--step-height) / 2)}.icon{margin:0 0.5rem 0 0.25rem;z-index:2}.step:before,.step:after{pointer-events:none;box-sizing:border-box;z-index:2;position:absolute;right:var(--selected-indicator-right);border-radius:50%}.last .step:before,.last .step:after{right:0.5rem}.flow-item:not(.off-progress-item) .step.selected:before,.flow-item:not(.off-progress-item) .step.selected:after{content:\"\";width:0.375rem;height:0.375rem}.flow-item:not(.off-progress-item) .step.selected:before{background-color:var(--step-divider-color);opacity:0.7}.flow-item:not(.off-progress-item) .step.disabled:before,.flow-item:not(.off-progress-item) .step.disabled:after{width:0.75rem;height:0.75rem}.flow-item:not(.off-progress-item) .step.disabled:after{content:\"\";background-image:url(\"data:image/svg+xml;charset=utf-8, <svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'><path fill='rgb(127,127,127)' d='M32.18 13.711c0-2.207-1.793-4-4.002-4H11.821c-2.208 0-4 1.793-4 4V28.29a4 4 0 0 0 4 4h16.357a4.002 4.002 0 0 0 4.001-4V13.711Z'/><path fill='rgb(127,127,127)' d='M11.211 9.758V7.673A7.489 7.489 0 0 1 18.696.188h2.608a7.489 7.489 0 0 1 7.485 7.485v2.085h-3V7.673a4.488 4.488 0 0 0-4.485-4.485h-2.608a4.488 4.488 0 0 0-4.485 4.485v2.085h-3Z'/></svg>\");background-size:90%;background-repeat:no-repeat;background-position:center;mix-blend-mode:multiply}.step{color:var(--step-text);background-color:var(--step-background)}.step .icon{color:var(--progress-flow-icon-color--inactive, var(--step-text))}.flow-item.selected .step{color:var(--step-text--selected);background-color:var(--step-background--selected)}.flow-item.selected .step .divider:after{background-color:var(--step-background--selected)}.flow-item.selected .step .icon{color:var(--step-text--selected)}.flow-item.passed .step{color:var(--step-text--passed);background-color:var(--step-background--passed)}.flow-item.passed .step .divider:after{background-color:var(--step-background--passed)}.flow-item.passed .step .icon{color:var(--step-text--passed)}.divider:after{border-color:var(--step-divider-color);background-color:var(--step-background)}";
 
@@ -6,21 +6,12 @@ const ProgressFlowItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.interact = createEvent(this, "interact", 7);
-    /**
-     * The flow item that should be rendered
-     */
-    this.item = null;
-    /**
-     * True if the flow item should be disabled
-     */
-    this.disabled = false;
-    /**
-     * True if the flow item should be readonly
-     */
-    this.readonly = false;
     this.handleClick = () => {
       this.interact.emit();
     };
+    this.item = null;
+    this.disabled = false;
+    this.readonly = false;
   }
   render() {
     var _a;

package/dist/esm/limel-progress-flow.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-11cd0b60.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-cdfd351d.js';
 
 const progressFlowCss = ":host{--step-height:2.5rem;--selected-indicator-right:-0.5rem;--max-text-width:10rem;isolation:isolate;box-sizing:border-box;width:100%;display:flex;flex-direction:row;align-items:flex-start;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:0.25rem}:host::-webkit-scrollbar{display:none}:host(.is-narrow){--step-height:1.5rem;--selected-indicator-right:0}";
 
@@ -6,25 +6,6 @@ const ProgressFlow = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.change = createEvent(this, "change", 7);
-    /**
-     * What flow items to render
-     */
-    this.flowItems = [];
-    /**
-     * Set to `true` to disable the progress flow.
-     * Use `disabled` to indicate that the component can normally be interacted
-     * with, but is currently disabled. This tells the user that if certain
-     * requirements are met, the field may become enabled again.
-     */
-    this.disabled = false;
-    /**
-     * Disables the progress flow when `true`.
-     * This does not visualize the component that much differently.
-     * But since the component does not provide any feedback that users can
-     * interact with the component, it makes it perfect for illustrative and
-     * informative porpuses.
-     */
-    this.readonly = false;
     this.renderRegularFlowItem = (item, index, array) => {
       return (h("limel-progress-flow-item", { class: {
           'flow-item': true,
@@ -48,6 +29,9 @@ const ProgressFlow = class {
         this.change.emit(flowItem);
       }
     };
+    this.flowItems = [];
+    this.disabled = false;
+    this.readonly = false;
   }
   componentDidRender() {
     this.scrollToSelectedItem();