@limetech/lime-elements 36.3.0-next.9 → 36.3.1-next.1

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;
 }

package/dist/types/components.d.ts

@@ -6,6 +6,7 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Button } from "./components/button/button.types";
+import { CalloutType } from "./components/callout/callout.types";
 import { Action as Action1, Chip, ClosingActions, DateType, DialogHeading, FileInfo, FlexContainerAlign, FlexContainerDirection, FlexContainerJustify, IconSize as IconSize1, Languages, Link, ListItem, ListSeparator, ListType, MenuItem, MenuListType, OpenDirection, Option, Searcher, SpinnerSize } from "@limetech/lime-elements";
 import { CircularProgressSize } from "./components/circular-progress/circular-progress.types";
 import { ColorScheme, Language } from "./components/code-editor/code-editor.types";
@@ -26,7 +27,7 @@ export namespace Components {
         /**
           * Label to display in the badge. Numeric labels larger than 999 will be rounded and abbreviated. String labels get truncated if their length is longer than six characters.
          */
-        "label": number | string;
+        "label"?: number | string;
     }
     interface LimelBanner {
         /**
@@ -86,6 +87,24 @@ export namespace Components {
          */
         "value": Button[];
     }
+    interface LimelCallout {
+        /**
+          * 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 the language for translations. Will translate the default headings for supported languages.
+         */
+        "language": Languages;
+        /**
+          * Defines how the component is visualized, for example which heading, color or icon is used in its user interface.
+         */
+        "type"?: CalloutType;
+    }
     interface LimelCheckbox {
         /**
           * The value of the checkbox. Set to `true` to make the checkbox checked.
@@ -323,6 +342,10 @@ export namespace Components {
           * Format to display the selected date in.
          */
         "format": string;
+        /**
+          * Custom formatting function. Will be used for date formatting.  :::note overrides `format` and `language` :::
+         */
+        "formatter"?: (date: Date) => string;
         /**
           * Optional helper text to display below the input field when it has focus
          */
@@ -453,6 +476,7 @@ export namespace Components {
           * Format to display the selected date in.
          */
         "format": string;
+        "formatter": (date: Date) => string;
         /**
           * The native input element to use with flatpickr.
          */
@@ -1373,6 +1397,12 @@ declare global {
         prototype: HTMLLimelButtonGroupElement;
         new (): HTMLLimelButtonGroupElement;
     };
+    interface HTMLLimelCalloutElement extends Components.LimelCallout, HTMLStencilElement {
+    }
+    var HTMLLimelCalloutElement: {
+        prototype: HTMLLimelCalloutElement;
+        new (): HTMLLimelCalloutElement;
+    };
     interface HTMLLimelCheckboxElement extends Components.LimelCheckbox, HTMLStencilElement {
     }
     var HTMLLimelCheckboxElement: {
@@ -1648,6 +1678,7 @@ declare global {
         "limel-banner": HTMLLimelBannerElement;
         "limel-button": HTMLLimelButtonElement;
         "limel-button-group": HTMLLimelButtonGroupElement;
+        "limel-callout": HTMLLimelCalloutElement;
         "limel-checkbox": HTMLLimelCheckboxElement;
         "limel-chip-set": HTMLLimelChipSetElement;
         "limel-circular-progress": HTMLLimelCircularProgressElement;
@@ -1756,6 +1787,24 @@ declare namespace LocalJSX {
          */
         "value"?: Button[];
     }
+    interface LimelCallout {
+        /**
+          * 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 the language for translations. Will translate the default headings for supported languages.
+         */
+        "language"?: Languages;
+        /**
+          * Defines how the component is visualized, for example which heading, color or icon is used in its user interface.
+         */
+        "type"?: CalloutType;
+    }
     interface LimelCheckbox {
         /**
           * The value of the checkbox. Set to `true` to make the checkbox checked.
@@ -2025,6 +2074,10 @@ declare namespace LocalJSX {
           * Format to display the selected date in.
          */
         "format"?: string;
+        /**
+          * Custom formatting function. Will be used for date formatting.  :::note overrides `format` and `language` :::
+         */
+        "formatter"?: (date: Date) => string;
         /**
           * Optional helper text to display below the input field when it has focus
          */
@@ -2203,6 +2256,7 @@ declare namespace LocalJSX {
           * Format to display the selected date in.
          */
         "format"?: string;
+        "formatter": (date: Date) => string;
         /**
           * The native input element to use with flatpickr.
          */
@@ -3102,6 +3156,7 @@ declare namespace LocalJSX {
         "limel-banner": LimelBanner;
         "limel-button": LimelButton;
         "limel-button-group": LimelButtonGroup;
+        "limel-callout": LimelCallout;
         "limel-checkbox": LimelCheckbox;
         "limel-chip-set": LimelChipSet;
         "limel-circular-progress": LimelCircularProgress;
@@ -3157,6 +3212,7 @@ declare module "@stencil/core" {
             "limel-banner": LocalJSX.LimelBanner & JSXBase.HTMLAttributes<HTMLLimelBannerElement>;
             "limel-button": LocalJSX.LimelButton & JSXBase.HTMLAttributes<HTMLLimelButtonElement>;
             "limel-button-group": LocalJSX.LimelButtonGroup & JSXBase.HTMLAttributes<HTMLLimelButtonGroupElement>;
+            "limel-callout": LocalJSX.LimelCallout & JSXBase.HTMLAttributes<HTMLLimelCalloutElement>;
             "limel-checkbox": LocalJSX.LimelCheckbox & JSXBase.HTMLAttributes<HTMLLimelCheckboxElement>;
             "limel-chip-set": LocalJSX.LimelChipSet & JSXBase.HTMLAttributes<HTMLLimelChipSetElement>;
             "limel-circular-progress": LocalJSX.LimelCircularProgress & JSXBase.HTMLAttributes<HTMLLimelCircularProgressElement>;

package/dist/types/interface.d.ts

@@ -23,3 +23,4 @@ export * from './components/tab-panel/tab-panel.types';
 export * from './components/table/table.types';
 export * from './components/dock/dock.types';
 export * from './components/info-tile/info-tile.types';
+export * from './components/callout/callout.types';

package/dist/types/translations/da.d.ts

@@ -1,4 +1,9 @@
 declare const _default: {
+  'callout.note': string;
+  'callout.important': string;
+  'callout.tip': string;
+  'callout.caution': string;
+  'callout.warning': string;
   'date-picker.today': string;
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;

package/dist/types/translations/en.d.ts

@@ -1,4 +1,9 @@
 declare const _default: {
+  'callout.note': string;
+  'callout.important': string;
+  'callout.tip': string;
+  'callout.caution': string;
+  'callout.warning': string;
   'date-picker.today': string;
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;

package/dist/types/translations/fi.d.ts

@@ -1,4 +1,9 @@
 declare const _default: {
+  'callout.note': string;
+  'callout.important': string;
+  'callout.tip': string;
+  'callout.caution': string;
+  'callout.warning': string;
   'date-picker.today': string;
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;

package/dist/types/translations/nl.d.ts

@@ -1,4 +1,9 @@
 declare const _default: {
+  'callout.note': string;
+  'callout.important': string;
+  'callout.tip': string;
+  'callout.caution': string;
+  'callout.warning': string;
   'date-picker.today': string;
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;

package/dist/types/translations/no.d.ts

@@ -1,4 +1,9 @@
 declare const _default: {
+  'callout.note': string;
+  'callout.important': string;
+  'callout.tip': string;
+  'callout.caution': string;
+  'callout.warning': string;
   'date-picker.today': string;
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;

package/dist/types/translations/sv.d.ts

@@ -1,4 +1,9 @@
 declare const _default: {
+  'callout.note': string;
+  'callout.important': string;
+  'callout.tip': string;
+  'callout.caution': string;
+  'callout.warning': string;
   'date-picker.today': string;
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "36.3.0-next.9",
+  "version": "36.3.1-next.1",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -40,47 +40,46 @@
     "generate": "stencil generate"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^17.4.0",
-    "@popperjs/core": "^2.11.6",
+    "@commitlint/config-conventional": "^17.6.1",
+    "@popperjs/core": "^2.11.7",
     "@rjsf/core": "^2.4.2",
     "@stencil/core": "^2.19.2",
-    "@stencil/sass": "^2.0.2",
+    "@stencil/sass": "^3.0.1",
     "@types/codemirror": "^5.60.2",
     "@types/html-escaper": "^3.0.0",
     "@types/jest": "^27.4.0",
-    "@types/lodash-es": "^4.17.4",
+    "@types/lodash-es": "^4.17.7",
     "@types/puppeteer": "^7.0.4",
-    "@types/react": "^18.0.26",
+    "@types/react": "^18.2.0",
     "@types/tabulator-tables": "^4.9.4",
-    "@typescript-eslint/eslint-plugin": "^5.48.2",
-    "@typescript-eslint/parser": "^5.48.2",
+    "@typescript-eslint/eslint-plugin": "^5.59.1",
+    "@typescript-eslint/parser": "^5.59.1",
     "ajv": "^6.12.6",
     "awesome-debounce-promise": "^2.1.0",
     "codemirror": "^5.65.9",
     "cross-env": "^7.0.3",
-    "cz-conventional-changelog": "^3.3.0",
-    "dayjs": "^1.11.6",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
+    "dayjs": "^1.11.7",
+    "eslint": "^8.39.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-ban": "^1.6.0",
-    "eslint-plugin-jsdoc": "^39.6.4",
+    "eslint-plugin-jsdoc": "^41.1.2",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.11",
-    "eslint-plugin-sonarjs": "^0.16.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-sonarjs": "^0.19.0",
     "flatpickr": "^4.6.13",
     "html-escaper": "^3.0.3",
     "jest": "^26.6.3",
     "jest-cli": "^27.4.5",
     "jsonlint-mod": "^1.7.6",
-    "jsx-dom": "^8.0.4",
+    "jsx-dom": "^8.0.5",
     "kompendium": "^0.12.2",
     "lodash-es": "^4.17.21",
     "material-components-web": "^13.0.0",
     "moment": "^2.29.4",
     "number-abbreviate": "^2.0.0",
-    "prettier": "^2.8.3",
-    "puppeteer": "^19.5.2",
+    "prettier": "^2.8.8",
+    "puppeteer": "^19.11.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-shadow-dom-retarget-events": "^1.1.0",
@@ -89,7 +88,7 @@
     "showdown": "2.1.0",
     "shx": "^0.3.3",
     "tabulator-tables": "^4.9.3",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.5"
   },
   "keywords": [
     "lime elements",
@@ -104,5 +103,9 @@
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "bugs": {
+    "url": "https://github.com/Lundalogik/lime-elements/issues"
+  },
+  "homepage": "https://github.com/Lundalogik/lime-elements#readme"
 }