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

package/dist/lime-elements/style/internal/z-index.scss

@@ -1,7 +1,3 @@
-$date-picker--flatpickr-adapter--datepicker-x-container--selected: 1 !default;
-$date-picker--flatpickr-adapter--datepicker-x-container--hover: 1 !default;
-$date-picker--flatpickr-adapter--datepicker-x--after: -1 !default;
-$date-picker--flatpickr-adapter--flatpickr-day--after: -1 !default;
 $input-field--formatted-value: 1 !default;
 $input-field--input-with-formatted-value: 2 !default;
 $input-field--mdc-text-field__input--readonly: 1 !default;
@@ -9,4 +5,3 @@ $tab-bar--active-tab: 2 !default;
 $table--has-interactive-rows--selectable-row--hover: 2 !default;
 $table--limel-table--row-selector: 1 !default;
 $button-group-radio-button-keyboard-focused: 1 !default;
-$limel-circular-progress-value: 1 !default;

package/dist/loader/package.json

@@ -1,5 +1,6 @@
 {
   "name": "lime-elements-loader",
+  "private": true,
   "typings": "./index.d.ts",
   "module": "./index.js",
   "main": "./index.cjs.js",

package/dist/types/components/circular-progress/circular-progress.d.ts

@@ -32,6 +32,10 @@ export declare class CircularProgress {
    * The maximum value within the scale that the progress bar should visualize. Defaults to `100`.
    */
   maxValue: number;
+  /**
+   * The prefix which is displayed before the `value`, must be a few characters characters long.
+   */
+  prefix?: string;
   /**
    * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`
    */
@@ -45,4 +49,5 @@ export declare class CircularProgress {
    */
   size: CircularProgressSize;
   render(): any;
+  private renderPrefix;
 }

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

@@ -6,7 +6,6 @@ import { DockItem } from './dock.types';
  * @exampleComponent limel-example-dock-mobile
  * @exampleComponent limel-example-dock-expanded
  * @exampleComponent limel-example-dock-colors-css
- * @private
  */
 export declare class Dock {
   /**

package/dist/types/components/info-tile/info-tile.d.ts

@@ -0,0 +1,87 @@
+import { InfoTileProgress } from './info-tile.types';
+import { Link } from '@limetech/lime-elements';
+/**
+ * This component can be used on places such as a start page or a dashboard.
+ * It offers features for visualizing aggregated data along with supplementary
+ * information.
+ *
+ * If clicking on the component should navigate the user to
+ * a new screen or web page, you need to provide a URL,
+ * using the `link` property.
+ *
+ * @exampleComponent limel-example-info-tile
+ * @exampleComponent limel-example-info-tile-badge
+ * @exampleComponent limel-example-info-tile-progress
+ * @exampleComponent limel-example-info-tile-loading
+ * @exampleComponent limel-example-info-tile-styling
+ */
+export declare class InfoTile {
+  /**
+   * A piece of text or number that is the main piece of information
+   * which the component is intended to visualize.
+   */
+  value: number | string;
+  /**
+   * Name of icon for the info tile.
+   */
+  icon?: string;
+  /**
+   * The text to show below the info tile. Long labels will be truncated.
+   */
+  label?: string;
+  /**
+   * A string of text that is visually placed before the value.
+   */
+  prefix?: string;
+  /**
+   * A string of text that is visually placed after the value.
+   */
+  suffix?: string;
+  /**
+   * Set to `true` if info tile is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * If supplied, the info tile will display a notification badge.
+   */
+  badge?: number | string;
+  /**
+   * Set to `true` to put the component in the `loading` state.
+   * This does _not_ disable the link. To do so, the
+   * `disabled` property should be set to `true` as well.
+   */
+  loading?: boolean;
+  /**
+   * If supplied, the info tile will be a clickable link.
+   *
+   * Supplying a value also adds an elevated effect using a shadow,
+   * as well as `cursor: pointer`, which appears on hover.
+   * While we strongly recommend supplying a link whenever the
+   * component should act as a link, if this is not possible, and
+   * you need to provide interaction through a click handler,
+   * you can still get the correct styling by supplying a `Link`
+   * object with the `href` property set to `'#'`.
+   */
+  link?: Link;
+  /**
+   * Properties of the optional circular progress bar.
+   *
+   * Defaults:
+   * - `maxValue`: 100
+   * - `suffix`: %
+   * - `percentageColors`: false
+   *
+   * Colors change with intervals of 10 %.
+   */
+  progress?: InfoTileProgress;
+  render(): any[];
+  private checkProps;
+  private renderPrefix;
+  private renderValue;
+  private renderSuffix;
+  private renderIcon;
+  private renderProgress;
+  private renderLabel;
+  private renderNotification;
+  private renderSpinner;
+}

package/dist/types/components/info-tile/info-tile.types.d.ts

@@ -0,0 +1,23 @@
+export interface InfoTileProgress {
+  /**
+   * The value of the progress bar.
+   */
+  value: number;
+  /**
+   * The maximum value within the scale that the progress bar should visualize.
+   */
+  maxValue?: number;
+  /**
+   * The prefix which is displayed before the `progressValue`.
+   * Keep to a few characters at most.
+   */
+  prefix?: string;
+  /**
+   * The suffix which is displayed after the `value`, must be one or two characters long.
+   */
+  suffix?: string;
+  /**
+   * When set to `true`, the progress bar changes color depending on its current value.
+   */
+  displayPercentageColors?: boolean;
+}

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

@@ -152,14 +152,14 @@ export declare class Picker {
   /**
    * Change handler for the list
    *
-   * @param {CustomEvent} event event
+   * @param {LimelListCustomEvent<ListItem>} event event
    * @returns {void}
    */
   private handleListChange;
   /**
    * Change handler for the list
    *
-   * @param {CustomEvent} event event
+   * @param {LimelChipSetCustomEvent} event event
    * @returns {void}
    */
   private handleActionListChange;

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

@@ -0,0 +1,42 @@
+import { Link } from '@limetech/lime-elements';
+/**
+ * This component can be used on places such as a start page or a dashboard.
+ * Clicking on the component should navigate the user to a new screen,
+ * to which you need to provide a URL, by specifying an `href` for the `link` property.
+ *
+ * By default, this navigation will happen within the same browser tab.
+ * However, it is possible to override that behavior, by specifying a `target`
+ * for the `link` property
+ *
+ * @exampleComponent limel-example-shortcut
+ * @exampleComponent limel-example-shortcut-notification
+ * @exampleComponent limel-example-shortcut-styling
+ * @exampleComponent limel-example-shortcut-with-click-handler
+ */
+export declare class Shortcut {
+  /**
+   * Name of icon for the shortcut.
+   */
+  icon: string;
+  /**
+   * The text to show below the shortcut. Long label will be truncated.
+   */
+  label?: string;
+  /**
+   * Set to `true` if shortcut is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * If specified, will display a notification badge
+   * on the shortcut.
+   */
+  badge?: number | string;
+  /**
+   * If supplied, the shortcut will be a clickable link.
+   */
+  link?: Link;
+  render(): any[];
+  private renderLabel;
+  private getAriaLabel;
+  private renderNotification;
+}

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

@@ -0,0 +1,46 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ListSeparator, MenuItem } from '@limetech/lime-elements';
+/**
+ * A split button is a button with two components:
+ * a button and a side-menu attached to it.
+ *
+ * Clicking on the button runs a default action,
+ * and clicking on the arrow opens up a list of other possible actions.
+ *
+ * :::warning
+ * - Never use a split button for navigation purposes, such as going to next page.
+ * The button should only be used for performing commands!
+ * - Never use this component instead of a Select or Menu component!
+ * :::
+ *
+ * @exampleComponent limel-example-split-button-basic
+ * @exampleComponent limel-example-split-button-repeat-default-command
+ */
+export declare class SplitButton {
+  /**
+   * The text to show on the default action part of the button.
+   */
+  label: string;
+  /**
+   * Set to `true` to make the button primary.
+   */
+  primary: boolean;
+  /**
+   * Set icon for the button
+   */
+  icon: string;
+  /**
+   * Set to `true` to disable the button.
+   */
+  disabled: boolean;
+  /**
+   * A list of items and separators to show in the menu.
+   */
+  items: Array<MenuItem | ListSeparator>;
+  /**
+   * Is emitted when a menu item is selected.
+   */
+  select: EventEmitter<MenuItem>;
+  render(): any;
+  private renderMenu;
+}