@limetech/lime-elements 36.0.0-next.3 → 36.0.0-next.30

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

@@ -6,7 +6,8 @@
  * @exampleComponent limel-example-button-outlined
  * @exampleComponent limel-example-button-primary
  * @exampleComponent limel-example-button-composite
- * @exampleComponent limel-example-button-click
+ * @exampleComponent limel-example-button-click-success
+ * @exampleComponent limel-example-button-click-fail
  * @exampleComponent limel-example-button-reduce-presence
  * @exampleComponent limel-example-button-colors
  */
@@ -38,9 +39,15 @@ export declare class Button {
    * `disabled` property should be set to `true` as well.
    */
   loading: boolean;
-  private limelButton;
-  private justLoadedTimeout;
+  /**
+   * Set to `true` to indicate failure instead of success when the button is
+   * no longer in the `loading` state.
+   */
+  loadingFailed: boolean;
+  private justLoaded;
+  private justLoadedTimeout?;
   render(): any;
   protected loadingWatcher(newValue: boolean, oldValue: boolean): void;
+  private renderLoadingIcons;
   private renderIcon;
 }

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

@@ -0,0 +1,52 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { DockItem } from '../dock.types';
+/**
+ * @private
+ */
+export declare class DockButton {
+  /**
+   * Item that is placed in the dock.
+   */
+  item: DockItem;
+  /**
+   * When the dock is expanded or collapsed, dock items
+   * show labels and tooltips as suitable for the layout.
+   */
+  expanded?: boolean;
+  /**
+   * When dock is using mobile layout, dock items
+   * show labels and tooltips as suitable for the layout.
+   */
+  useMobileLayout?: boolean;
+  /**
+   * 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 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

@@ -0,0 +1,83 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { DockItem } from './dock.types';
+/**
+ * @exampleComponent limel-example-dock-basic
+ * @exampleComponent limel-example-dock-custom-component
+ * @exampleComponent limel-example-dock-mobile
+ * @exampleComponent limel-example-dock-expanded
+ * @exampleComponent limel-example-dock-colors-css
+ * @private
+ */
+export declare class Dock {
+  /**
+   * Items that are placed in the dock.
+   */
+  dockItems: DockItem[];
+  /**
+   * Items that are placed at the bottom of the dock. (Or at the end in mobile
+   * layout.)
+   */
+  dockFooterItems?: DockItem[];
+  /**
+   * 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;
+  /**
+   * 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;
+  /**
+   * 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;
+  /**
+   * 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 a dock item has been selected from the dock.
+   */
+  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.
+   */
+  private dockExpanded;
+  /**
+   * Is used to render the component horizontally, and place
+   * the Dock items in a row.
+   */
+  private useMobileLayout;
+  private resizeObserver;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+  private renderSeparator;
+  private renderDockItem;
+  private handleResize;
+  private renderExpandShrinkToggle;
+  private toggleDockWidth;
+}

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

@@ -0,0 +1,53 @@
+export interface DockItem {
+  /**
+   * A non-changing value to uniquely identify each item.
+   */
+  id: string;
+  /**
+   * Text to display for the item.
+   */
+  label: string;
+  /**
+   * Name of the icon to use.
+   */
+  icon: string;
+  /**
+   * Additional helper text for the dock item.
+   * Example usage can be a keyboard shortcut to activate the dock item.
+   */
+  helperLabel?: string;
+  /**
+   * Whether the dock item should indicate it is selected.
+   * These dock items normally take the user to a top-level location within
+   * the navigation tree; for example "Home", "Search" or "My Account".
+   * Set `selected` to `true`, when:
+   * - the user interface is showing the same top-level location as the dock
+   * item is pointing at, or
+   * - the user interface is showing a page which is a sub-location of the
+   * top-level location. For example, when user is at
+   * _My Account > Notification Settings_, the dock item of _My Account_
+   * should have the `selected` state.
+   */
+  selected?: boolean;
+  /**
+   * Used to specify a custom component to render as a menu for the dock item.
+   */
+  dockMenu?: DockMenu;
+}
+export interface DockMenu {
+  /**
+   * The tag name of a custom component to be displayed in a popover when
+   * clicking on the dock item this menu belongs to.
+   */
+  componentName: string;
+  /**
+   * Whether the menu is open.
+   */
+  menuOpen?: boolean;
+  /**
+   * Any properties that should be set on the custom component.
+   */
+  props?: {
+    [key: string]: any;
+  };
+}

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/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;
 /**