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

package/dist/lime-elements/style/internal/codemirror-tooltip.scss

@@ -0,0 +1,19 @@
+.CodeMirror-lint-tooltip.cm-s-lime {
+    position: fixed;
+    z-index: var(--tooltip-z-index, var(--dropdown-z-index, 130));
+    transition: opacity 0.4s ease 0s;
+    opacity: 0;
+
+    color: var(--mdc-theme-text-primary-on-background);
+    background-color: var(--mdc-theme-on-primary);
+
+    font-family: monospace;
+    font-size: 0.875rem; // 14px, like the default code editor's font size
+    white-space: pre-wrap;
+    // overflow: hidden; // Why `hidden`?
+
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.5rem;
+    max-width: 40rem;
+    box-shadow: var(--shadow-depth-64);
+}

package/dist/lime-elements/style/mixins.scss

@@ -1,5 +1,16 @@
 @use './functions';
 
+@mixin visualize-keyboard-focus {
+    &:focus {
+        outline: none;
+    }
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: var(--shadow-depth-8-focused);
+    }
+}
+
 @mixin in($media) {
     @if $media == dark-mode {
         @media (prefers-color-scheme: dark) {

package/dist/types/components/chip-set/chip-set.d.ts

@@ -148,6 +148,7 @@ export declare class ChipSet {
   private destroyMDCChipSet;
   private renderChipSetLabel;
   private renderInputChips;
+  private renderLabel;
   private dropZoneTip;
   private isFull;
   private isInvalid;
@@ -174,14 +175,14 @@ export declare class ChipSet {
   private removeChip;
   private renderChip;
   private renderDefaultChip;
-  private renderLabel;
+  private renderChipLabel;
   private renderHelperLine;
   private renderHelperText;
   private hasHelperText;
   private renderFilterChip;
   private renderInputChip;
   private catchInputChipClicks;
-  private renderIcon;
+  private renderChipIcon;
   private renderLeadingIcon;
   private renderChipRemoveButton;
   private renderClearAllChipsButton;

package/dist/types/components/code-editor/code-editor.d.ts

@@ -3,12 +3,17 @@ import { ColorScheme, Language } from './code-editor.types';
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/addon/selection/active-line';
 import 'codemirror/addon/edit/matchbrackets';
+import 'codemirror/addon/lint/lint';
+import 'codemirror/addon/lint/json-lint';
+import 'codemirror/addon/fold/foldgutter';
+import 'codemirror/addon/fold/brace-fold';
 /**
  * Currently this component support syntax highlighting for `javascript`,
  `json` and `typescript` formats.
  *
  * @exampleComponent limel-example-code-editor
  * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
+ * @exampleComponent limel-example-code-editor-fold-lint
  */
 export declare class CodeEditor {
   /**
@@ -27,6 +32,14 @@ export declare class CodeEditor {
    * Displays line numbers in the editor
    */
   lineNumbers: boolean;
+  /**
+   * Allows the user to fold code
+   */
+  fold: boolean;
+  /**
+   * Enables linting of JSON content
+   */
+  lint: boolean;
   /**
    * Select color scheme for the editor
    */
@@ -47,6 +60,7 @@ export declare class CodeEditor {
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentDidRender(): void;
+  protected watchValue(newValue: string): void;
   private handleChangeDarkMode;
   private handleChange;
   private handleResize;

package/dist/types/components/date-picker/date-picker.d.ts

@@ -34,6 +34,10 @@ export declare class DatePicker {
    * Text to display next to the date picker
    */
   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
    */

package/dist/types/components/dock/dock-button/dock-button.d.ts

@@ -5,32 +5,48 @@ import { DockItem } from '../dock.types';
  */
 export declare class DockButton {
   /**
-   * @inheritdoc
+   * Item that is placed in the dock.
    */
   item: DockItem;
   /**
-   * @inheritdoc
+   * When the dock is expanded or collapsed, dock items
+   * show labels and tooltips as suitable for the layout.
    */
   expanded?: boolean;
   /**
-   * @inheritdoc
+   * When dock is using mobile layout, dock items
+   * show labels and tooltips as suitable for the layout.
    */
   useMobileLayout?: boolean;
   /**
-   * Fired when clicking on the flow item.
+   * Fired when a dock item has been selected from the dock.
+   */
+  itemSelected: EventEmitter<DockItem>;
+  /**
+   * Fired when a dock menu is opened.
+   */
+  menuOpen: EventEmitter<DockItem>;
+  /**
+   * Indicated whether the popover that renders a component is open.
    */
-  private interact;
   private isOpen;
+  /**
+   * Fired when the popover is closed.
+   */
   close: EventEmitter<void>;
   private tooltipId;
+  private customComponentElement;
   constructor();
   render(): any;
+  protected openWatcher(): void;
   private renderPopover;
   private renderButton;
   private openPopover;
+  private setCustomComponentElement;
   private onPopoverClose;
   private handleClick;
   private renderIcon;
   private renderLabel;
   private renderTooltip;
+  private focusCustomComponentElement;
 }

package/dist/types/components/dock/dock.d.ts

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 import { DockItem } from './dock.types';
 /**
  * @exampleComponent limel-example-dock-basic
@@ -50,9 +51,17 @@ export declare class Dock {
    */
   mobileBreakPoint?: number;
   /**
-   * Fired when a Dock item has been selected from the dock.
+   * Fired when a dock item has been selected from the dock.
    */
-  private itemSelected;
+  itemSelected: EventEmitter<DockItem>;
+  /**
+   * Fired when a dock menu is opened.
+   */
+  menuOpen: EventEmitter<DockItem>;
+  /**
+   * Fired when the popover is closed.
+   */
+  close: EventEmitter<void>;
   /**
    * Fired when a Dock is expanded or collapsed.
    */
@@ -68,7 +77,6 @@ export declare class Dock {
   render(): any;
   private renderSeparator;
   private renderDockItem;
-  private handleDockItemClick;
   private handleResize;
   private renderExpandShrinkToggle;
   private toggleDockWidth;

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/menu/menu.d.ts

@@ -48,14 +48,13 @@ export declare class Menu {
   private list;
   private portalId;
   constructor();
-  componentDidLoad(): void;
   protected openWatcher(): void;
   render(): any;
   componentDidRender(): void;
   private setTriggerAttributes;
   private onClose;
   private onTriggerClick;
-  private onListChange;
+  private handleSelect;
   private getCssProperties;
   private setListElement;
   private focusMenuItem;

package/dist/types/components/menu-list/menu-list.d.ts

@@ -1,5 +1,4 @@
 import { IconSize, MenuItem, ListSeparator, MenuListType } from '@limetech/lime-elements';
-import { EventEmitter } from '../../stencil-public-runtime';
 /**
  * @private
  */
@@ -35,13 +34,9 @@ export declare class MenuList {
   private mdcList;
   private mdcMenu;
   /**
-   * Fired when a new value has been selected from the list. Only fired if selectable is set to true
+   * Fired when a new value has been selected from the list.
    */
-  private change;
-  /**
-   * Fired when an action has been selected from the action menu of a list item
-   */
-  protected select: EventEmitter<MenuItem | MenuItem[]>;
+  private select;
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentDidLoad(): void;

package/dist/types/components/table/layout.d.ts

@@ -0,0 +1,2 @@
+export declare type Layout = 'default' | 'stretchLastColumn' | 'stretchColumns' | 'lowDensity';
+export declare function mapLayout(layout: Layout): any;

package/dist/types/components/table/table.d.ts

@@ -1,16 +1,22 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { Column, TableParams, ColumnSorter, ColumnAggregate } from './table.types';
+import { Layout } from './layout';
 /**
  * @exampleComponent limel-example-table
  * @exampleComponent limel-example-table-custom-components
  * @exampleComponent limel-example-table-header-menu
  * @exampleComponent limel-example-table-movable-columns
+ * @exampleComponent limel-example-table-sorting-disabled
  * @exampleComponent limel-example-table-local
  * @exampleComponent limel-example-table-remote
  * @exampleComponent limel-example-table-activate-row
  * @exampleComponent limel-example-table-selectable-rows
  * @exampleComponent limel-example-table-default-sorted
- * @exampleComponent limel-example-table-low-density
+ * @exampleComponent limel-example-table-layout-default
+ * @exampleComponent limel-example-table-layout-stretch-last-column
+ * @exampleComponent limel-example-table-layout-stretch-columns
+ * @exampleComponent limel-example-table-layout-low-density
+ * @exampleComponent limel-example-table-interactive-rows
  */
 export declare class Table {
   /**
@@ -28,6 +34,15 @@ export declare class Table {
    * is responsible to give the table new data when a `load` event occurs
    */
   mode: 'local' | 'remote';
+  /**
+   * Defines the layout of the table, based on how width of the columns are calculated.
+   *
+   * - `default`: makes columns as wide as their contents.
+   * - `stretchLastColumn`: makes columns as wide as their contents, stretch the last column to fill up the remaining table width.
+   * - `stretchColumns`: stretches all columns to fill the available width when possible.
+   * - `lowDensity`: makes columns as wide as their contents, and creates a low density and airy layout.
+   */
+  layout: Layout;
   /**
    * Number of rows per page
    */

package/dist/types/components/table/table.types.d.ts

@@ -27,6 +27,10 @@ export interface Column<T extends object = any> {
    * Sets the horizontal text alignment for the column
    */
   horizontalAlign?: 'left' | 'center' | 'right';
+  /**
+   * Defines whether end-user can sort a column
+   */
+  headerSort?: boolean;
 }
 export declare type TableFormatter = (value: any, data?: object) => string;
 /**

package/dist/types/components.d.ts

@@ -19,6 +19,7 @@ import { OpenDirection as OpenDirection1 } from "./components/menu/menu.types";
 import { FlowItem } from "./components/progress-flow/progress-flow.types";
 import { Tab } from "./components/tab-bar/tab.types";
 import { Column, ColumnAggregate, ColumnSorter, TableParams } from "./components/table/table.types";
+import { Layout } from "./components/table/layout";
 export namespace Components {
     interface LimelBadge {
         /**
@@ -219,6 +220,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
          */
@@ -227,6 +232,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
          */
@@ -325,6 +334,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.
          */
@@ -388,15 +401,15 @@ export namespace Components {
     }
     interface LimelDockButton {
         /**
-          * @inheritdoc
+          * When the dock is expanded or collapsed, dock items show labels and tooltips as suitable for the layout.
          */
         "expanded"?: boolean;
         /**
-          * @inheritdoc
+          * Item that is placed in the dock.
          */
         "item": DockItem;
         /**
-          * @inheritdoc
+          * When dock is using mobile layout, dock items show labels and tooltips as suitable for the layout.
          */
         "useMobileLayout"?: boolean;
     }
@@ -604,6 +617,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`.
          */
@@ -1042,6 +1059,10 @@ export namespace Components {
           * A message to display when the table has no data
          */
         "emptyMessage": string;
+        /**
+          * Defines the layout of the table, based on how width of the columns are calculated.  - `default`: makes columns as wide as their contents. - `stretchLastColumn`: makes columns as wide as their contents, stretch the last column to fill up the remaining table width. - `stretchColumns`: stretches all columns to fill the available width when possible. - `lowDensity`: makes columns as wide as their contents, and creates a low density and airy layout.
+         */
+        "layout": Layout;
         /**
           * Set to `true` to trigger loading animation
          */
@@ -1642,6 +1663,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
          */
@@ -1650,6 +1675,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
          */
@@ -1776,6 +1805,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.
          */
@@ -1844,31 +1877,46 @@ declare namespace LocalJSX {
           * 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.
+          * 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 {
         /**
-          * @inheritdoc
+          * When the dock is expanded or collapsed, dock items show labels and tooltips as suitable for the layout.
          */
         "expanded"?: boolean;
         /**
-          * @inheritdoc
+          * Item that is placed in the dock.
          */
         "item": DockItem;
+        /**
+          * Fired when the popover is closed.
+         */
         "onClose"?: (event: CustomEvent<void>) => void;
         /**
-          * Fired when clicking on the flow item.
+          * Fired when a dock item has been selected from the dock.
          */
-        "onInteract"?: (event: CustomEvent<DockItem>) => void;
+        "onItemSelected"?: (event: CustomEvent<DockItem>) => void;
+        /**
+          * Fired when a dock menu is opened.
+         */
+        "onMenuOpen"?: (event: CustomEvent<DockItem>) => void;
         /**
-          * @inheritdoc
+          * When dock is using mobile layout, dock items show labels and tooltips as suitable for the layout.
          */
         "useMobileLayout"?: boolean;
     }
@@ -2104,6 +2152,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`.
          */
@@ -2233,13 +2285,9 @@ declare namespace LocalJSX {
          */
         "maxLinesSecondaryText"?: number;
         /**
-          * Fired when a new value has been selected from the list. Only fired if selectable is set to true
-         */
-        "onChange"?: (event: CustomEvent<MenuItem | MenuItem[]>) => void;
-        /**
-          * Fired when an action has been selected from the action menu of a list item
+          * Fired when a new value has been selected from the list.
          */
-        "onSelect"?: (event: CustomEvent<MenuItem | MenuItem[]>) => void;
+        "onSelect"?: (event: CustomEvent<MenuItem>) => void;
         /**
           * The type of the menu, omit to get a regular vertical menu. Available types are: `menu`: regular vertical menu.
          */
@@ -2618,6 +2666,10 @@ declare namespace LocalJSX {
           * A message to display when the table has no data
          */
         "emptyMessage"?: string;
+        /**
+          * Defines the layout of the table, based on how width of the columns are calculated.  - `default`: makes columns as wide as their contents. - `stretchLastColumn`: makes columns as wide as their contents, stretch the last column to fill up the remaining table width. - `stretchColumns`: stretches all columns to fill the available width when possible. - `lowDensity`: makes columns as wide as their contents, and creates a low density and airy layout.
+         */
+        "layout"?: Layout;
         /**
           * Set to `true` to trigger loading animation
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "36.0.0-next.9",
+  "version": "36.0.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -41,7 +41,7 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^16.0.0",
-    "@lundalogik/lime-icons8": "^2.9.0",
+    "@lundalogik/lime-icons8": "^2.11.0",
     "@popperjs/core": "^2.11.5",
     "@rjsf/core": "^2.4.2",
     "@stencil/core": "^2.15.1",
@@ -72,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",