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

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

@@ -1,4 +1,11 @@
-@use './functions';
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 
 @mixin visualize-keyboard-focus {
     &:focus {
@@ -52,6 +59,7 @@
     transition: color 0.2s ease, background-color 0.2s ease,
         box-shadow 0.2s ease, transform 0.1s ease-out;
 
+    cursor: pointer;
     color: $color;
     background-color: $background-color;
     box-shadow: var(--button-shadow-normal);
@@ -79,6 +87,7 @@
     transition: color 0.2s ease, background-color 0.2s ease,
         box-shadow 0.2s ease, transform 0.1s ease-out;
 
+    cursor: pointer;
     color: $color;
     background-color: $background-color;
     box-shadow: var(--button-shadow-normal);
@@ -105,6 +114,7 @@
     transition: color 0.2s ease, background-color 0.2s ease,
         box-shadow 0.2s ease, transform 0.1s ease-out;
 
+    cursor: pointer;
     color: $color;
     background-color: $background-color;
 
@@ -131,6 +141,7 @@
     transition: color 0.2s ease, background-color 0.2s ease,
         box-shadow 0.2s ease, transform 0.1s ease-out;
 
+    cursor: pointer;
     color: $color;
     background-color: $background-color;
 
@@ -156,14 +167,14 @@
 
     cursor: pointer;
 
-    height: functions.pxToRem(20);
-    width: functions.pxToRem(20);
+    height: 1.25rem;
+    width: 1.25rem;
     border-radius: 50%;
 
     background: {
         repeat: no-repeat;
         position: center;
-        size: functions.pxToRem(12);
+        size: 0.75rem;
         image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs/><path fill='rgb(255,255,255)' d='M7.219 5.781L5.78 7.22 14.563 16 5.78 24.781 7.22 26.22 16 17.437l8.781 8.782 1.438-1.438L17.437 16l8.782-8.781L24.78 5.78 16 14.563z'/></svg>");
     }
 }

package/dist/scss/mixins.scss

@@ -0,0 +1,186 @@
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
+
+@mixin visualize-keyboard-focus {
+    &:focus {
+        outline: none;
+    }
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: var(--shadow-depth-8-focused);
+    }
+}
+
+@mixin in($media) {
+    // ⛔️ As long as we don't have a script that generates a
+    // `.css` files automatically, we cannot use this mixin.
+    // we need to manually write the dark-mode CSS variables
+    // inside this file: /style/color-palette-extended.css
+    //
+    // ⚠️ Also note that this mixin only puts styles
+    // on the `:root` which means the `<html` level.
+    // Therefore, it cannot be used inside components
+    // to generate custom dark-mode styles.
+
+    @if $media == dark-mode {
+        @media (prefers-color-scheme: dark) {
+            :root:not([data-theme='force-light']) {
+                @content;
+            }
+        }
+        :root[data-theme='force-dark'] {
+            @content;
+        }
+
+        // @media (prefers-color-scheme: dark) {
+        //     :host(:not([data-theme='force-light'])) & {
+        //         @content;
+        //     }
+        // }
+        // :host([data-theme='force-dark']) & {
+        //     @content;
+        // }
+    }
+}
+
+@mixin is-elevated-clickable(
+    $color: var(--mdc-theme-on-surface),
+    $color--hovered: var(--mdc-theme-on-surface),
+    $background-color: var(--lime-elevated-surface-background-color),
+    $background-color--hovered: var(--lime-elevated-surface-background-color)
+) {
+    transition: color 0.2s ease, background-color 0.2s ease,
+        box-shadow 0.2s ease, transform 0.1s ease-out;
+
+    cursor: pointer;
+    color: $color;
+    background-color: $background-color;
+    box-shadow: var(--button-shadow-normal);
+
+    &:hover {
+        color: $color--hovered;
+        background-color: $background-color--hovered;
+        box-shadow: var(--button-shadow-hovered);
+    }
+
+    &:active {
+        box-shadow: var(--button-shadow-pressed);
+
+        transform: translate3d(0, 0.08rem, 0);
+    }
+}
+
+@mixin is-elevated-inset-clickable(
+    $color: var(--mdc-theme-on-surface),
+    $color--hovered: var(--mdc-theme-on-surface),
+    $background-color: var(--lime-elevated-surface-background-color),
+    $background-color--hovered: var(--lime-elevated-surface-background-color),
+    $background-color--inset: var(--mdc-theme-surface)
+) {
+    transition: color 0.2s ease, background-color 0.2s ease,
+        box-shadow 0.2s ease, transform 0.1s ease-out;
+
+    cursor: pointer;
+    color: $color;
+    background-color: $background-color;
+    box-shadow: var(--button-shadow-normal);
+
+    &:hover {
+        color: $color--hovered;
+        background-color: $background-color--hovered;
+        box-shadow: var(--button-shadow-hovered);
+    }
+
+    &:active {
+        background-color: $background-color--inset;
+        box-shadow: var(--button-shadow-inset-pressed);
+        transform: translate3d(0, 0.05rem, 0);
+    }
+}
+
+@mixin is-flat-clickable(
+    $color: var(--mdc-theme-on-surface),
+    $background-color: transparent,
+    $color--hovered: var(--mdc-theme-on-surface),
+    $background-color--hovered: var(--lime-elevated-surface-background-color)
+) {
+    transition: color 0.2s ease, background-color 0.2s ease,
+        box-shadow 0.2s ease, transform 0.1s ease-out;
+
+    cursor: pointer;
+    color: $color;
+    background-color: $background-color;
+
+    &:hover {
+        color: $color--hovered;
+        background-color: $background-color--hovered;
+        box-shadow: var(--button-shadow-hovered);
+    }
+
+    &:active {
+        box-shadow: var(--button-shadow-pressed);
+
+        transform: translate3d(0, 0.08rem, 0);
+    }
+}
+
+@mixin is-flat-inset-clickable(
+    $color: var(--mdc-theme-on-surface),
+    $background-color: transparent,
+    $color--hovered: var(--mdc-theme-on-surface),
+    $background-color--hovered: var(--lime-elevated-surface-background-color),
+    $background-color--inset: var(--mdc-theme-surface)
+) {
+    transition: color 0.2s ease, background-color 0.2s ease,
+        box-shadow 0.2s ease, transform 0.1s ease-out;
+
+    cursor: pointer;
+    color: $color;
+    background-color: $background-color;
+
+    &:hover {
+        color: $color--hovered;
+        background-color: $background-color--hovered;
+        box-shadow: var(--button-shadow-hovered);
+    }
+
+    &:active {
+        background-color: $background-color--inset;
+        box-shadow: var(--button-shadow-inset-pressed);
+        transform: translate3d(0, 0.05rem, 0);
+    }
+}
+
+@mixin clear-all-button() {
+    // NOTE: you may need to specify "position: absolute" and align the position where you use this mixin
+    @include is-flat-clickable(
+        $background-color: rgb(var(--contrast-900)),
+        $background-color--hovered: rgb(var(--contrast-1100))
+    );
+
+    cursor: pointer;
+
+    height: 1.25rem;
+    width: 1.25rem;
+    border-radius: 50%;
+
+    background: {
+        repeat: no-repeat;
+        position: center;
+        size: 0.75rem;
+        image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs/><path fill='rgb(255,255,255)' d='M7.219 5.781L5.78 7.22 14.563 16 5.78 24.781 7.22 26.22 16 17.437l8.781 8.782 1.438-1.438L17.437 16l8.782-8.781L24.78 5.78 16 14.563z'/></svg>");
+    }
+}
+
+@mixin truncate-text() {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}

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

@@ -1,6 +1,8 @@
 /**
- * The Badge component can display both `number` and `string` as `label`.
+ * The Badge component can be used to display a notification badge,
+ * optionally with a number or a text label.
  *
+ * @exampleComponent limel-example-badge
  * @exampleComponent limel-example-badge-number
  * @exampleComponent limel-example-badge-string
  */
@@ -11,7 +13,7 @@ export declare class Badge {
    * String labels get truncated if their length is longer than
    * six characters.
    */
-  label: number | string;
+  label?: number | string;
   render(): any;
   private renderLabel;
   private labelIsLarge;

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

@@ -15,4 +15,8 @@ export interface Button {
    * True if the button should be selected. only first button will be selected.
    */
   selected?: boolean;
+  /**
+   * The label displayed in the badge
+   */
+  badge?: number | string;
 }

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

@@ -32,6 +32,7 @@ import { Button } from '../button/button.types';
  * @exampleComponent limel-example-button-group-icons
  * @exampleComponent limel-example-button-group
  * @exampleComponent limel-example-button-group-mix
+ * @exampleComponent limel-example-button-group-badges
  * @exampleComponent limel-example-button-group-composite
  */
 export declare class ButtonGroup {
@@ -57,5 +58,8 @@ export declare class ButtonGroup {
   private isButtonChecked;
   private renderLabel;
   private renderIcon;
+  private renderBadge;
   private onChange;
+  private setSelectedButton;
+  protected valueChanged(): void;
 }

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

@@ -0,0 +1,52 @@
+import { CalloutType } from './callout.types';
+import { Languages } from '@limetech/lime-elements';
+/**
+ * Callouts—also known as Admonitions—are useful for including supportive or
+ * special content within a large piece of text, or even inside a user
+ * interface.
+ *
+ * When used in a document or text based user interface, the callout attracts
+ * the reader's attention to a particular piece of information, without
+ * significantly interrupting their flow of reading the document.
+ *
+ * In a user interface, a callout is more intrusive to the end-user. Still, it
+ * could be a good choice when you intend to slightly disturb the user's
+ * attention, and challenge them to pay extra attention to the information
+ * presented. In such cases, a callout should not be used as a static and
+ * constantly present element of the UI. Rather, it should be displayed when
+ * something unusual or remarkable demands the user's attention.
+ *
+ * @exampleComponent limel-example-callout-note
+ * @exampleComponent limel-example-callout-important
+ * @exampleComponent limel-example-callout-tip
+ * @exampleComponent limel-example-callout-caution
+ * @exampleComponent limel-example-callout-warning
+ * @exampleComponent limel-example-callout-rich-content
+ * @exampleComponent limel-example-callout-custom-heading
+ * @exampleComponent limel-example-callout-custom-icon
+ * @exampleComponent limel-example-callout-styles
+ * @exampleComponent limel-example-callout-composite
+ */
+export declare class Callout {
+  /**
+   * Heading of the callout, which can be used to override the
+   * default heading which is displayed based on the chosen `type`.
+   */
+  heading?: string;
+  /**
+   * Icon of the callout, which can be used to override the
+   * default icon which is displayed based on the chosen `type`.
+   */
+  icon?: string;
+  /**
+   * Defines how the component is visualized, for example
+   * which heading, color or icon is used in its user interface.
+   */
+  type?: CalloutType;
+  /**
+   * Defines the language for translations.
+   * Will translate the default headings for supported languages.
+   */
+  language: Languages;
+  render(): any[];
+}

package/dist/types/components/callout/callout.helpers.d.ts

@@ -0,0 +1,2 @@
+export declare function getIcon(icon: string, type?: string): string;
+export declare function getHeading(heading: string, type?: string, language?: string): string;

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

@@ -0,0 +1,11 @@
+/**
+ * Each of the supported callout types has a distinct color and icon.
+ * The colors can be changed using the provided CSS variables.
+ *
+ * - `note`: You might read this, you might not.
+ * - `important`: You should read this.
+ * - `tip`: You want to read this.
+ * - `caution`: I hope you read this.
+ * - `warning`: You need to read this.
+ */
+export declare type CalloutType = 'note' | 'important' | 'tip' | 'caution' | 'warning';

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

@@ -143,7 +143,7 @@ export declare class ChipSet {
   componentDidUpdate(): void;
   disconnectedCallback(): void;
   render(): any;
-  protected handleChangeChips(): void;
+  protected handleChangeChips(newValue: Chip[], oldValue: Chip[]): void;
   private createMDCChipSet;
   private destroyMDCChipSet;
   private renderChipSetLabel;

package/dist/types/components/collapsible-section/collapsible-section.d.ts

@@ -34,7 +34,6 @@ export declare class CollapsibleSection {
   private action;
   render(): any;
   private onClick;
-  private handleKeyDown;
   private handleInteraction;
   private renderActions;
   private renderActionButton;

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

@@ -10,6 +10,7 @@ import { DateType, Languages } from '@limetech/lime-elements';
  * @exampleComponent limel-example-date-picker-formatted
  * @exampleComponent limel-example-date-picker-programmatic-change
  * @exampleComponent limel-example-date-picker-composite
+ * @exampleComponent limel-example-date-picker-custom-formatter
  */
 export declare class DatePicker {
   /**
@@ -63,6 +64,14 @@ export declare class DatePicker {
    * Property `format` customizes the localized date format.
    */
   language: Languages;
+  /**
+   * Custom formatting function. Will be used for date formatting.
+   *
+   * :::note
+   * overrides `format` and `language`
+   * :::
+   */
+  formatter?: (date: Date) => string;
   /**
    * Emitted when the date picker value is changed.
    */
@@ -95,4 +104,5 @@ export declare class DatePicker {
   private handleInputElementChange;
   private pickerIsAutoClosing;
   private clearValue;
+  private formatValue;
 }

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

@@ -1,2 +1,2 @@
 export declare type DateType = 'datetime' | 'date' | 'time' | 'week' | 'month' | 'quarter' | 'year';
-export declare type Languages = 'da' | 'en' | 'fi' | 'nb' | 'no' | 'nl' | 'sv';
+export declare type Languages = 'da' | 'de' | 'en' | 'fi' | 'fr' | 'nb' | 'no' | 'nl' | 'sv';

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

@@ -1,9 +1,10 @@
 import 'moment/locale/da';
+import 'moment/locale/de';
 import 'moment/locale/fi';
-import 'moment/locale/nb';
-import 'moment/locale/sv';
 import 'moment/locale/fr';
+import 'moment/locale/nb';
 import 'moment/locale/nl';
+import 'moment/locale/sv';
 import { DateType } from './date.types';
 export declare class DateFormatter {
   private language;

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

@@ -33,6 +33,7 @@ export declare class DatePickerCalendar {
    * Property `format` customizes the localized date format.
    */
   language: Languages;
+  formatter: (date: Date) => string;
   /**
    * Emitted when the date picker value is changed.
    */
@@ -44,7 +45,6 @@ export declare class DatePickerCalendar {
   componentDidUpdate(): void;
   private tryFixConfusingWidthBug;
   private createFlatpickr;
-  private redrawFlatpickr;
   private destroyFlatpickr;
   disconnectedCallback(): void;
   render(): any;

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

@@ -1,12 +1,15 @@
 import flatpickr from 'flatpickr';
 import { EventEmitter } from '../../../stencil-public-runtime';
 import 'moment/locale/da';
+import 'moment/locale/de';
 import 'moment/locale/fi';
+import 'moment/locale/fr';
 import 'moment/locale/nb';
+import 'moment/locale/nl';
 import 'moment/locale/sv';
 export declare abstract class Picker {
   protected change: EventEmitter<Date>;
-  private dateFormatter;
+  formatDate: (date: Date) => string;
   protected dateFormat: string;
   protected language: string;
   protected flatpickr: flatpickr.Instance;
@@ -16,7 +19,6 @@ export declare abstract class Picker {
   redraw(): void;
   destroy(): void;
   abstract getConfig(useNativePicker: boolean): flatpickr.Options.Options;
-  formatDate(date: Date): string;
   protected handleClose(selectedDates: any): Promise<any>;
   protected getFlatpickrLang(): string;
   protected getMomentLang(): string;

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

@@ -41,6 +41,7 @@ export declare class DockButton {
   protected openWatcher(): void;
   private renderPopover;
   private renderButton;
+  private renderNotification;
   private openPopover;
   private setCustomComponentElement;
   private onPopoverClose;

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

@@ -3,6 +3,7 @@ import { DockItem } from './dock.types';
 /**
  * @exampleComponent limel-example-dock-basic
  * @exampleComponent limel-example-dock-custom-component
+ * @exampleComponent limel-example-dock-notification
  * @exampleComponent limel-example-dock-mobile
  * @exampleComponent limel-example-dock-expanded
  * @exampleComponent limel-example-dock-colors-css

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

@@ -33,6 +33,10 @@ export interface DockItem {
    * Used to specify a custom component to render as a menu for the dock item.
    */
   dockMenu?: DockMenu;
+  /**
+   * If specified, will display a notification badge on the buttons in the dock.
+   */
+  badge?: number | string;
 }
 export interface DockMenu {
   /**

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

@@ -11,6 +11,7 @@ import { FormError, ValidationError, ValidationStatus } from './form.types';
  * @exampleComponent limel-example-form-span-fields
  * @exampleComponent limel-example-custom-error-message
  * @exampleComponent limel-example-server-errors
+ * @exampleComponent limel-example-form-row-layout
  */
 export declare class Form {
   /**

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

@@ -181,6 +181,13 @@ export interface GridLayoutOptions extends FormLayoutOptions<FormLayoutType.Grid
    */
   dense?: boolean;
 }
+export interface RowLayoutOptions extends FormLayoutOptions<FormLayoutType.Row> {
+  /**
+   * When specified on a field, the chosen icon will be displayed
+   * on the left side of the row, beside the title.
+   */
+  icon?: string;
+}
 export declare enum FormLayoutType {
   /**
    * The default layout
@@ -189,5 +196,13 @@ export declare enum FormLayoutType {
   /**
    * Render the form fields using a responsive grid layout
    */
-  Grid = "grid"
+  Grid = "grid",
+  /**
+   * Render the form fields in full-width rows.
+   * Each row can have a leading `icon`, and a field.
+   * `title` and `description` provided by the schema will be placed
+   * on the row itself, and not on the field.
+   * This layout is good for creating UIs for user settings pages.
+   */
+  Row = "row"
 }

package/dist/types/components/form/row/row.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { RowProps } from '../templates/types';
+export declare class Row extends React.Component<RowProps> {
+  props: RowProps;
+  constructor(props: RowProps);
+  render(): React.DetailedReactHTMLElement<{
+    className: string;
+  }, HTMLElement>;
+  private renderIcon;
+  private renderMainInformation;
+  private renderTitle;
+  private renderDescription;
+  private renderChildren;
+  private get schema();
+  private get icon();
+}

package/dist/types/components/form/templates/row-layout.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { RowProps } from './types';
+export declare class RowLayout extends React.Component<RowProps> {
+  props: RowProps;
+  private elementRef;
+  constructor(props: RowProps);
+  render(): React.DetailedReactHTMLElement<{
+    className: string;
+    ref: React.RefObject<HTMLElement>;
+  }, HTMLElement>;
+}

package/dist/types/components/form/templates/types.d.ts

@@ -10,3 +10,6 @@ export interface LimeObjectFieldTemplateProps extends ObjectFieldTemplateProps {
 export interface Runnable {
   run: (event: any) => void;
 }
+export interface RowProps {
+  children?: any;
+}

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

@@ -9,6 +9,7 @@ import { ListSeparator, MenuItem, OpenDirection } from '@limetech/lime-elements'
  * @exampleComponent limel-example-menu-grid
  * @exampleComponent limel-example-menu-hotkeys
  * @exampleComponent limel-example-menu-secondary-text
+ * @exampleComponent limel-example-menu-notification
  * @exampleComponent limel-example-menu-composite
  */
 export declare class Menu {
@@ -59,4 +60,6 @@ export declare class Menu {
   private setListElement;
   private focusMenuItem;
   private isMenuItem;
+  private renderNotificationBadge;
+  private hasNotificationBadge;
 }

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

@@ -28,6 +28,10 @@ export interface MenuItem<T = any> {
    * True if the menu item should be selected.
    */
   selected?: boolean;
+  /**
+   * If specified, will display a notification badge on the buttons in the dock.
+   */
+  badge?: number | string;
   /**
    * Value of the menu item.
    */

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

@@ -44,5 +44,6 @@ export declare class MenuListRenderer {
    * @returns {HTMLElement} the icon element
    */
   private renderIcon;
+  private renderNotification;
   private renderDivider;
 }