@limetech/lime-elements 36.0.0-next.2 → 36.0.0-next.22

package/dist/types/components/input-field/input-field.d.ts

@@ -1,6 +1,7 @@
 import { InputType } from './input-field.types';
 /**
  * @exampleComponent limel-example-input-field-text
+ * @exampleComponent limel-example-input-field-placeholder
  * @exampleComponent limel-example-input-field-text-multiple
  * @exampleComponent limel-example-input-field-number
  * @exampleComponent limel-example-input-field-autocomplete
@@ -39,6 +40,10 @@ export declare class InputField {
    * The input label.
    */
   label: string;
+  /**
+   * The placeholder text shown inside the input field, when the field is focused and empty.
+   */
+  placeholder: string;
   /**
    * Optional helper text to display below the input field when it has focus
    */
@@ -170,6 +175,7 @@ export declare class InputField {
   private renderCharacterCounter;
   private isInvalid;
   private getInputElement;
+  private renderLabel;
   private renderLeadingIcon;
   private renderTrailingLinkOrButton;
   private hasLink;

package/dist/types/components.d.ts

@@ -10,6 +10,7 @@ import { Action as Action1, Chip, ClosingActions, DateType, DialogHeading, FileI
 import { CircularProgressSize } from "./components/circular-progress/circular-progress.types";
 import { ColorScheme, Language } from "./components/code-editor/code-editor.types";
 import { Action } from "./components/collapsible-section/action";
+import { DockItem } from "./components/dock/dock.types";
 import { FormError, ValidationError, ValidationStatus } from "./components/form/form.types";
 import { IconSize } from "./components/icon/icon.types";
 import { InputType } from "./components/input-field/input-field.types";
@@ -60,6 +61,10 @@ export namespace Components {
           * Set to `true` to put the button in the `loading` state. Please note that this does _not_ disable the button. If the button should be disabled while loading, the `disabled` property should be set to `true` as well.
          */
         "loading": boolean;
+        /**
+          * Set to `true` to indicate failure instead of success when the button is no longer in the `loading` state.
+         */
+        "loadingFailed": boolean;
         /**
           * Set to `true` to make the button outlined.
          */
@@ -214,6 +219,10 @@ export namespace Components {
           * Select color scheme for the editor
          */
         "colorScheme": ColorScheme;
+        /**
+          * Allows the user to fold code
+         */
+        "fold": boolean;
         /**
           * The language of the code
          */
@@ -222,6 +231,10 @@ export namespace Components {
           * Displays line numbers in the editor
          */
         "lineNumbers": boolean;
+        /**
+          * Enables linting of JSON content
+         */
+        "lint": boolean;
         /**
           * Disables editing of the editor content
          */
@@ -320,6 +333,10 @@ export namespace Components {
           * Defines the localisation for translations and date formatting. Property `format` customizes the localized date format.
          */
         "language": Languages;
+        /**
+          * The placeholder text shown inside the input field, when the field is focused and empty
+         */
+        "placeholder": string;
         /**
           * Set to `true` to make the field read-only. Use `readonly` when the field is only there to present the data it holds, and will not become possible for the current user to edit.
          */
@@ -355,6 +372,46 @@ export namespace Components {
          */
         "open": boolean;
     }
+    interface LimelDock {
+        /**
+          * A label used to describe the purpose of the navigation element to users of assistive technologies, like screen readers. Especially useful when there are multiple navigation elements in the user interface. Example value: "Primary navigation"
+         */
+        "accessibleLabel"?: string;
+        /**
+          * Set to `false` if you do not want to allow end-users to exapnd or shrink the Dock. This will hide the expand/shrink button, and the only things that defines the layout will be the `expanded` property, and the `mobileBreakPoint`.
+         */
+        "allowResize"?: boolean;
+        /**
+          * Items that are placed at the bottom of the dock. (Or at the end in mobile layout.)
+         */
+        "dockFooterItems"?: DockItem[];
+        /**
+          * Items that are placed in the dock.
+         */
+        "dockItems": DockItem[];
+        /**
+          * Defines the width of the component, when it loads. - `true`: shows both icons and labels of the Dock items. - `false`: only shows icons of the doc items, and displays their labels as tooltip.  Note: when `useMobileLayout` is `true`, labels will always be shown as tooltips. Read more below…
+         */
+        "expanded"?: boolean;
+        /**
+          * Defines the breakpoint in pixles, at which the component will be rendered in a hoizontal layout. Default breakpoint is `700` pixels, which means when the screen size is smaller than `700px`, the component will automatically switch to a horizontal layout.
+         */
+        "mobileBreakPoint"?: number;
+    }
+    interface LimelDockButton {
+        /**
+          * When the dock is expanded or collapsed, dock items show labels and tooltips as suitable for the layout.
+         */
+        "expanded"?: boolean;
+        /**
+          * Item that is placed in the dock.
+         */
+        "item": DockItem;
+        /**
+          * When dock is using mobile layout, dock items show labels and tooltips as suitable for the layout.
+         */
+        "useMobileLayout"?: boolean;
+    }
     interface LimelFile {
         /**
           * The [accepted file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)
@@ -509,10 +566,6 @@ export namespace Components {
           * The text to show to screenreaders and other assistive tech.
          */
         "label": string;
-        /**
-          * If the button is hidden or inside another element that is animating while the button is instantiated, the hover-highlight may become misaligned. If so, calling this method will make the button re-layout the highlight.
-         */
-        "relayout": () => Promise<void>;
     }
     interface LimelInputField {
         /**
@@ -563,6 +616,10 @@ export namespace Components {
           * Regular expression that the current value of the input field must match. No forward slashes should be specified around the pattern. Only used if type is `text`, `tel`, `email`, `url`, `urlAsText`, `password`, or `search`.
          */
         "pattern": string;
+        /**
+          * The placeholder text shown inside the input field, when the field is focused and empty.
+         */
+        "placeholder": string;
         /**
           * A short piece of text to display before the value inside the input field. Displayed for all types except `textarea`.
          */
@@ -1156,6 +1213,18 @@ declare global {
         prototype: HTMLLimelDialogElement;
         new (): HTMLLimelDialogElement;
     };
+    interface HTMLLimelDockElement extends Components.LimelDock, HTMLStencilElement {
+    }
+    var HTMLLimelDockElement: {
+        prototype: HTMLLimelDockElement;
+        new (): HTMLLimelDockElement;
+    };
+    interface HTMLLimelDockButtonElement extends Components.LimelDockButton, HTMLStencilElement {
+    }
+    var HTMLLimelDockButtonElement: {
+        prototype: HTMLLimelDockButtonElement;
+        new (): HTMLLimelDockButtonElement;
+    };
     interface HTMLLimelFileElement extends Components.LimelFile, HTMLStencilElement {
     }
     var HTMLLimelFileElement: {
@@ -1351,6 +1420,8 @@ declare global {
         "limel-config": HTMLLimelConfigElement;
         "limel-date-picker": HTMLLimelDatePickerElement;
         "limel-dialog": HTMLLimelDialogElement;
+        "limel-dock": HTMLLimelDockElement;
+        "limel-dock-button": HTMLLimelDockButtonElement;
         "limel-file": HTMLLimelFileElement;
         "limel-flatpickr-adapter": HTMLLimelFlatpickrAdapterElement;
         "limel-flex-container": HTMLLimelFlexContainerElement;
@@ -1417,6 +1488,10 @@ declare namespace LocalJSX {
           * Set to `true` to put the button in the `loading` state. Please note that this does _not_ disable the button. If the button should be disabled while loading, the `disabled` property should be set to `true` as well.
          */
         "loading"?: boolean;
+        /**
+          * Set to `true` to indicate failure instead of success when the button is no longer in the `loading` state.
+         */
+        "loadingFailed"?: boolean;
         /**
           * Set to `true` to make the button outlined.
          */
@@ -1583,6 +1658,10 @@ declare namespace LocalJSX {
           * Select color scheme for the editor
          */
         "colorScheme"?: ColorScheme;
+        /**
+          * Allows the user to fold code
+         */
+        "fold"?: boolean;
         /**
           * The language of the code
          */
@@ -1591,6 +1670,10 @@ declare namespace LocalJSX {
           * Displays line numbers in the editor
          */
         "lineNumbers"?: boolean;
+        /**
+          * Enables linting of JSON content
+         */
+        "lint"?: boolean;
         /**
           * Emitted when the code has changed. Will only be emitted when the code area has lost focus
          */
@@ -1717,6 +1800,10 @@ declare namespace LocalJSX {
           * Emitted when the date picker value is changed.
          */
         "onChange"?: (event: CustomEvent<Date>) => void;
+        /**
+          * The placeholder text shown inside the input field, when the field is focused and empty
+         */
+        "placeholder"?: string;
         /**
           * Set to `true` to make the field read-only. Use `readonly` when the field is only there to present the data it holds, and will not become possible for the current user to edit.
          */
@@ -1760,6 +1847,74 @@ declare namespace LocalJSX {
          */
         "open"?: boolean;
     }
+    interface LimelDock {
+        /**
+          * A label used to describe the purpose of the navigation element to users of assistive technologies, like screen readers. Especially useful when there are multiple navigation elements in the user interface. Example value: "Primary navigation"
+         */
+        "accessibleLabel"?: string;
+        /**
+          * Set to `false` if you do not want to allow end-users to exapnd or shrink the Dock. This will hide the expand/shrink button, and the only things that defines the layout will be the `expanded` property, and the `mobileBreakPoint`.
+         */
+        "allowResize"?: boolean;
+        /**
+          * Items that are placed at the bottom of the dock. (Or at the end in mobile layout.)
+         */
+        "dockFooterItems"?: DockItem[];
+        /**
+          * Items that are placed in the dock.
+         */
+        "dockItems"?: DockItem[];
+        /**
+          * Defines the width of the component, when it loads. - `true`: shows both icons and labels of the Dock items. - `false`: only shows icons of the doc items, and displays their labels as tooltip.  Note: when `useMobileLayout` is `true`, labels will always be shown as tooltips. Read more below…
+         */
+        "expanded"?: boolean;
+        /**
+          * Defines the breakpoint in pixles, at which the component will be rendered in a hoizontal layout. Default breakpoint is `700` pixels, which means when the screen size is smaller than `700px`, the component will automatically switch to a horizontal layout.
+         */
+        "mobileBreakPoint"?: number;
+        /**
+          * Fired when the popover is closed.
+         */
+        "onClose"?: (event: CustomEvent<void>) => void;
+        /**
+          * Fired when a Dock is expanded or collapsed.
+         */
+        "onDockExpanded"?: (event: CustomEvent<boolean>) => void;
+        /**
+          * Fired when a dock item has been selected from the dock.
+         */
+        "onItemSelected"?: (event: CustomEvent<DockItem>) => void;
+        /**
+          * Fired when a dock menu is opened.
+         */
+        "onMenuOpen"?: (event: CustomEvent<DockItem>) => void;
+    }
+    interface LimelDockButton {
+        /**
+          * When the dock is expanded or collapsed, dock items show labels and tooltips as suitable for the layout.
+         */
+        "expanded"?: boolean;
+        /**
+          * Item that is placed in the dock.
+         */
+        "item": DockItem;
+        /**
+          * Fired when the popover is closed.
+         */
+        "onClose"?: (event: CustomEvent<void>) => void;
+        /**
+          * Fired when a dock item has been selected from the dock.
+         */
+        "onItemSelected"?: (event: CustomEvent<DockItem>) => void;
+        /**
+          * Fired when a dock menu is opened.
+         */
+        "onMenuOpen"?: (event: CustomEvent<DockItem>) => void;
+        /**
+          * When dock is using mobile layout, dock items show labels and tooltips as suitable for the layout.
+         */
+        "useMobileLayout"?: boolean;
+    }
     interface LimelFile {
         /**
           * The [accepted file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)
@@ -1992,6 +2147,10 @@ declare namespace LocalJSX {
           * Regular expression that the current value of the input field must match. No forward slashes should be specified around the pattern. Only used if type is `text`, `tel`, `email`, `url`, `urlAsText`, `password`, or `search`.
          */
         "pattern"?: string;
+        /**
+          * The placeholder text shown inside the input field, when the field is focused and empty.
+         */
+        "placeholder"?: string;
         /**
           * A short piece of text to display before the value inside the input field. Displayed for all types except `textarea`.
          */
@@ -2618,6 +2777,8 @@ declare namespace LocalJSX {
         "limel-config": LimelConfig;
         "limel-date-picker": LimelDatePicker;
         "limel-dialog": LimelDialog;
+        "limel-dock": LimelDock;
+        "limel-dock-button": LimelDockButton;
         "limel-file": LimelFile;
         "limel-flatpickr-adapter": LimelFlatpickrAdapter;
         "limel-flex-container": LimelFlexContainer;
@@ -2668,6 +2829,8 @@ declare module "@stencil/core" {
             "limel-config": LocalJSX.LimelConfig & JSXBase.HTMLAttributes<HTMLLimelConfigElement>;
             "limel-date-picker": LocalJSX.LimelDatePicker & JSXBase.HTMLAttributes<HTMLLimelDatePickerElement>;
             "limel-dialog": LocalJSX.LimelDialog & JSXBase.HTMLAttributes<HTMLLimelDialogElement>;
+            "limel-dock": LocalJSX.LimelDock & JSXBase.HTMLAttributes<HTMLLimelDockElement>;
+            "limel-dock-button": LocalJSX.LimelDockButton & JSXBase.HTMLAttributes<HTMLLimelDockButtonElement>;
             "limel-file": LocalJSX.LimelFile & JSXBase.HTMLAttributes<HTMLLimelFileElement>;
             "limel-flatpickr-adapter": LocalJSX.LimelFlatpickrAdapter & JSXBase.HTMLAttributes<HTMLLimelFlatpickrAdapterElement>;
             "limel-flex-container": LocalJSX.LimelFlexContainer & JSXBase.HTMLAttributes<HTMLLimelFlexContainerElement>;

package/dist/types/interface.d.ts

@@ -20,3 +20,4 @@ export * from './components/spinner/spinner.types';
 export * from './components/tab-bar/tab.types';
 export * from './components/tab-panel/tab-panel.types';
 export * from './components/table/table.types';
+export * from './components/dock/dock.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "36.0.0-next.2",
+  "version": "36.0.0-next.22",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -41,11 +41,10 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^16.0.0",
-    "@lundalogik/lime-icons8": "^2.9.0",
+    "@lundalogik/lime-icons8": "^2.10.0",
     "@popperjs/core": "^2.11.5",
     "@rjsf/core": "^2.4.2",
     "@stencil/core": "^2.15.1",
-    "@stencil/eslint-plugin": "^0.4.0",
     "@stencil/sass": "^1.5.2",
     "@types/codemirror": "^5.60.2",
     "@types/html-escaper": "^3.0.0",
@@ -73,11 +72,12 @@
     "html-escaper": "^3.0.3",
     "jest": "^26.6.3",
     "jest-cli": "^28.0.2",
+    "jsonlint-mod": "^1.7.6",
     "jsx-dom": "^7.0.4",
-    "kompendium": "^0.11.1",
+    "kompendium": "^0.11.3",
     "lodash-es": "^4.17.21",
     "material-components-web": "^13.0.0",
-    "moment": "^2.29.3",
+    "moment": "^2.29.4",
     "number-abbreviate": "^2.0.0",
     "prettier": "^2.6.2",
     "puppeteer": "^13.7.0",

package/dist/cjs/limel-popover-surface.cjs.entry.js

@@ -1,32 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-2a28697b.js');
-
-const popoverSurfaceCss = ".limel-popover-surface{position:relative;display:flex;flex-direction:column;width:var(--popover-surface-width, auto);max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);margin:0 0.25rem;border-radius:var(--popover-border-radius, 0.75rem);box-shadow:var(--shadow-depth-16);backdrop-filter:blur(0.3125rem);-webkit-backdrop-filter:blur(0.3125rem)}.limel-popover-surface:after{transition:opacity 0.4s ease;pointer-events:none;content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0.75;border-radius:var(--popover-border-radius, 0.75rem);background-color:var(--popover-body-background-color, rgb(var(--contrast-100)))}.limel-popover-surface:focus,.limel-popover-surface:focus-within{outline:none}.limel-popover-surface:focus:after,.limel-popover-surface:focus-within:after{opacity:1}.limel-popover-surface:focus-visible{box-shadow:var(--shadow-depth-16-focused)}";
-
-const PopoverSurface = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  componentDidLoad() {
-    this.appendElement();
-  }
-  render() {
-    return index.h("div", { class: "limel-popover-surface", tabindex: "0" });
-  }
-  appendElement() {
-    const portalContainer = this.host.shadowRoot.querySelector('.limel-popover-surface');
-    Array.from(this.contentCollection).forEach((child) => {
-      if (child.slot === 'trigger') {
-        return;
-      }
-      portalContainer.appendChild(child);
-    });
-  }
-  get host() { return index.getElement(this); }
-};
-PopoverSurface.style = popoverSurfaceCss;
-
-exports.limel_popover_surface = PopoverSurface;

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

@@ -1,102 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-2a28697b.js');
-const randomString = require('./random-string-4c3b7f1c.js');
-
-const tooltipCss = ".trigger-anchor{position:relative}";
-
-const DEFAULT_MAX_LENGTH = 50;
-const Tooltip = class {
-  constructor(hostRef) {
-    index.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(() => {
-        this.open = true;
-      }, tooltipDelay);
-    };
-    this.hideTooltip = () => {
-      clearTimeout(this.showTooltipTimeoutHandle);
-      this.open = false;
-    };
-    this.portalId = randomString.createRandomString();
-    this.tooltipId = randomString.createRandomString();
-  }
-  connectedCallback() {
-    this.setOwnerAriaLabel();
-    this.addListeners();
-  }
-  disconnectedCallback() {
-    this.removeListeners();
-  }
-  render() {
-    const tooltipZIndex = getComputedStyle(this.host).getPropertyValue('--tooltip-z-index');
-    return (index.h("div", { class: "trigger-anchor" }, index.h("limel-portal", { openDirection: "bottom-start", visible: this.open, containerId: this.portalId, containerStyle: {
-        'z-index': tooltipZIndex,
-        'pointer-events': 'none',
-      } }, index.h("limel-tooltip-content", { label: this.label, helperLabel: this.helperLabel, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
-  }
-  setOwnerAriaLabel() {
-    const owner = this.getOwnerElement();
-    owner === null || owner === void 0 ? void 0 : owner.setAttribute('aria-describedby', this.tooltipId);
-  }
-  addListeners() {
-    const owner = this.getOwnerElement();
-    owner === null || owner === void 0 ? void 0 : owner.addEventListener('mouseover', this.showTooltip);
-    owner === null || owner === void 0 ? void 0 : owner.addEventListener('mouseout', this.hideTooltip);
-    owner === null || owner === void 0 ? void 0 : owner.addEventListener('click', this.hideTooltip);
-  }
-  removeListeners() {
-    const owner = this.getOwnerElement();
-    owner === null || owner === void 0 ? void 0 : owner.removeEventListener('mouseover', this.showTooltip);
-    owner === null || owner === void 0 ? void 0 : owner.removeEventListener('mouseout', this.hideTooltip);
-    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);
-  }
-  get host() { return index.getElement(this); }
-};
-Tooltip.style = tooltipCss;
-
-const tooltipContentCss = ":host{animation:display-tooltip 0.2s ease;display:flex;border-radius:0.25rem;padding:0.25rem 0.5rem;background-color:rgb(var(--contrast-1300));box-shadow:var(--shadow-depth-16)}text{font-size:0.875rem;line-height:1.25;display:flex;column-gap:1rem}text.has-column-layout{display:table-cell;width:fit-content;max-width:min(var(--tooltip-max-width-of-text), 80vw)}text.has-column-layout .label{padding-bottom:0.5rem}text.has-column-layout .helper-label{padding-bottom:0.25rem}.label{color:rgb(var(--contrast-200))}.helper-label{color:rgb(var(--contrast-800))}.helper-label:empty{display:none}@keyframes display-tooltip{0%{opacity:0;transform:translate3d(0, 0, 0) scale(0.94)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}";
-
-const TooltipContent = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    let isLabelsTextLong = false;
-    if (this.helperLabel && this.maxlength) {
-      isLabelsTextLong =
-        this.label.length + this.helperLabel.length > this.maxlength;
-    }
-    const props = {};
-    if (this.maxlength) {
-      props.style = {
-        '--tooltip-max-width-of-text': `${this.maxlength}` + 'ch',
-      };
-    }
-    return [
-      index.h("text", Object.assign({ class: { 'has-column-layout': isLabelsTextLong } }, props), index.h("div", { class: "label" }, this.label), index.h("div", { class: "helper-label" }, this.helperLabel)),
-    ];
-  }
-};
-TooltipContent.style = tooltipContentCss;
-
-exports.limel_tooltip = Tooltip;
-exports.limel_tooltip_content = TooltipContent;

package/dist/esm/limel-popover-surface.entry.js

@@ -1,28 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index-11cd0b60.js';
-
-const popoverSurfaceCss = ".limel-popover-surface{position:relative;display:flex;flex-direction:column;width:var(--popover-surface-width, auto);max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);margin:0 0.25rem;border-radius:var(--popover-border-radius, 0.75rem);box-shadow:var(--shadow-depth-16);backdrop-filter:blur(0.3125rem);-webkit-backdrop-filter:blur(0.3125rem)}.limel-popover-surface:after{transition:opacity 0.4s ease;pointer-events:none;content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0.75;border-radius:var(--popover-border-radius, 0.75rem);background-color:var(--popover-body-background-color, rgb(var(--contrast-100)))}.limel-popover-surface:focus,.limel-popover-surface:focus-within{outline:none}.limel-popover-surface:focus:after,.limel-popover-surface:focus-within:after{opacity:1}.limel-popover-surface:focus-visible{box-shadow:var(--shadow-depth-16-focused)}";
-
-const PopoverSurface = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  componentDidLoad() {
-    this.appendElement();
-  }
-  render() {
-    return h("div", { class: "limel-popover-surface", tabindex: "0" });
-  }
-  appendElement() {
-    const portalContainer = this.host.shadowRoot.querySelector('.limel-popover-surface');
-    Array.from(this.contentCollection).forEach((child) => {
-      if (child.slot === 'trigger') {
-        return;
-      }
-      portalContainer.appendChild(child);
-    });
-  }
-  get host() { return getElement(this); }
-};
-PopoverSurface.style = popoverSurfaceCss;
-
-export { PopoverSurface as limel_popover_surface };

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

@@ -1,97 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index-11cd0b60.js';
-import { c as createRandomString } from './random-string-2246b81e.js';
-
-const tooltipCss = ".trigger-anchor{position:relative}";
-
-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(() => {
-        this.open = true;
-      }, tooltipDelay);
-    };
-    this.hideTooltip = () => {
-      clearTimeout(this.showTooltipTimeoutHandle);
-      this.open = false;
-    };
-    this.portalId = createRandomString();
-    this.tooltipId = createRandomString();
-  }
-  connectedCallback() {
-    this.setOwnerAriaLabel();
-    this.addListeners();
-  }
-  disconnectedCallback() {
-    this.removeListeners();
-  }
-  render() {
-    const tooltipZIndex = getComputedStyle(this.host).getPropertyValue('--tooltip-z-index');
-    return (h("div", { class: "trigger-anchor" }, h("limel-portal", { openDirection: "bottom-start", visible: this.open, containerId: this.portalId, containerStyle: {
-        'z-index': tooltipZIndex,
-        'pointer-events': 'none',
-      } }, h("limel-tooltip-content", { label: this.label, helperLabel: this.helperLabel, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
-  }
-  setOwnerAriaLabel() {
-    const owner = this.getOwnerElement();
-    owner === null || owner === void 0 ? void 0 : owner.setAttribute('aria-describedby', this.tooltipId);
-  }
-  addListeners() {
-    const owner = this.getOwnerElement();
-    owner === null || owner === void 0 ? void 0 : owner.addEventListener('mouseover', this.showTooltip);
-    owner === null || owner === void 0 ? void 0 : owner.addEventListener('mouseout', this.hideTooltip);
-    owner === null || owner === void 0 ? void 0 : owner.addEventListener('click', this.hideTooltip);
-  }
-  removeListeners() {
-    const owner = this.getOwnerElement();
-    owner === null || owner === void 0 ? void 0 : owner.removeEventListener('mouseover', this.showTooltip);
-    owner === null || owner === void 0 ? void 0 : owner.removeEventListener('mouseout', this.hideTooltip);
-    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);
-  }
-  get host() { return getElement(this); }
-};
-Tooltip.style = tooltipCss;
-
-const tooltipContentCss = ":host{animation:display-tooltip 0.2s ease;display:flex;border-radius:0.25rem;padding:0.25rem 0.5rem;background-color:rgb(var(--contrast-1300));box-shadow:var(--shadow-depth-16)}text{font-size:0.875rem;line-height:1.25;display:flex;column-gap:1rem}text.has-column-layout{display:table-cell;width:fit-content;max-width:min(var(--tooltip-max-width-of-text), 80vw)}text.has-column-layout .label{padding-bottom:0.5rem}text.has-column-layout .helper-label{padding-bottom:0.25rem}.label{color:rgb(var(--contrast-200))}.helper-label{color:rgb(var(--contrast-800))}.helper-label:empty{display:none}@keyframes display-tooltip{0%{opacity:0;transform:translate3d(0, 0, 0) scale(0.94)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}";
-
-const TooltipContent = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    let isLabelsTextLong = false;
-    if (this.helperLabel && this.maxlength) {
-      isLabelsTextLong =
-        this.label.length + this.helperLabel.length > this.maxlength;
-    }
-    const props = {};
-    if (this.maxlength) {
-      props.style = {
-        '--tooltip-max-width-of-text': `${this.maxlength}` + 'ch',
-      };
-    }
-    return [
-      h("text", Object.assign({ class: { 'has-column-layout': isLabelsTextLong } }, props), h("div", { class: "label" }, this.label), h("div", { class: "helper-label" }, this.helperLabel)),
-    ];
-  }
-};
-TooltipContent.style = tooltipContentCss;
-
-export { Tooltip as limel_tooltip, TooltipContent as limel_tooltip_content };