@limetech/lime-elements 36.3.0-next.2 → 36.3.0-next.21

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

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

@@ -39,9 +39,15 @@
  * :::
  *
  * @exampleComponent limel-example-header
+ * @exampleComponent limel-example-header-colors
  * @exampleComponent limel-example-header-responsive
  * @exampleComponent limel-example-header-narrow
- * @slot - Content (actions) to be put inside the far right surface of the header
+ * @slot actions - Content (actions) to be put inside the far right surface of
+ * the header
+ * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This
+ * behavior has been deprecated, and support will be dropped in a future
+ * version. Please add `slot="actions"` to your elements to ensure your code
+ * will continue to work with future versions of Lime Elements.
  */
 export declare class Header {
   /**

package/dist/types/components.d.ts

@@ -26,7 +26,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 {
         /**
@@ -60,7 +60,7 @@ export namespace Components {
          */
         "label": string;
         /**
-          * Set to `true` to put the button in the `loading` state. Please note that this does _not_ disable the button. If the button should be disabled while loading, the `disabled` property should be set to `true` as well.
+          * Set to `true` to put the button in the `loading` state. This also disables the button.
          */
         "loading": boolean;
         /**
@@ -323,6 +323,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 +457,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.
          */
@@ -1726,7 +1731,7 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         /**
-          * Set to `true` to put the button in the `loading` state. Please note that this does _not_ disable the button. If the button should be disabled while loading, the `disabled` property should be set to `true` as well.
+          * Set to `true` to put the button in the `loading` state. This also disables the button.
          */
         "loading"?: boolean;
         /**
@@ -2025,6 +2030,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 +2212,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.
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "36.3.0-next.2",
+  "version": "36.3.0-next.21",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -40,47 +40,46 @@
     "generate": "stencil generate"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^17.4.0",
+    "@commitlint/config-conventional": "^17.4.4",
     "@popperjs/core": "^2.11.6",
     "@rjsf/core": "^2.4.2",
     "@stencil/core": "^2.19.2",
-    "@stencil/sass": "^2.0.2",
+    "@stencil/sass": "^2.0.3",
     "@types/codemirror": "^5.60.2",
     "@types/html-escaper": "^3.0.0",
     "@types/jest": "^27.4.0",
     "@types/lodash-es": "^4.17.4",
     "@types/puppeteer": "^7.0.4",
-    "@types/react": "^18.0.26",
+    "@types/react": "^18.0.28",
     "@types/tabulator-tables": "^4.9.4",
-    "@typescript-eslint/eslint-plugin": "^5.48.2",
-    "@typescript-eslint/parser": "^5.48.1",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
     "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.34.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-ban": "^1.6.0",
-    "eslint-plugin-jsdoc": "^39.6.4",
+    "eslint-plugin-jsdoc": "^40.0.0",
     "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.18.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",
-    "kompendium": "^0.12.1",
+    "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.1",
-    "puppeteer": "^19.3.0",
+    "prettier": "^2.8.4",
+    "puppeteer": "^19.7.2",
     "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",

package/dist/lime-elements/p-61b3352f.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,h as o}from"./p-d4e788e1.js";import{c as i}from"./p-6c094f3f.js";const s=class{constructor(o){t(this,o),this.itemSelected=e(this,"itemSelected",7),this.menuOpen=e(this,"menuOpen",7),this.close=e(this,"close",7),this.openPopover=t=>{t.stopPropagation(),this.isOpen=!0,this.menuOpen.emit(this.item)},this.setCustomComponentElement=t=>{this.customComponentElement=t},this.onPopoverClose=()=>{this.isOpen=!1,this.close.emit()},this.handleClick=t=>{t.stopPropagation(),this.itemSelected.emit(this.item)},this.focusCustomComponentElement=()=>{var t,e,o;(null===(e=null===(t=this.customComponentElement)||void 0===t?void 0:t.shadowRoot)||void 0===e?void 0:e.delegatesFocus)&&(null===(o=this.customComponentElement)||void 0===o||o.focus())},this.item=void 0,this.expanded=!1,this.useMobileLayout=!1,this.isOpen=!1,this.tooltipId=i()}render(){var t,e;return(null===(e=null===(t=this.item)||void 0===t?void 0:t.dockMenu)||void 0===e?void 0:e.componentName)?this.renderPopover():this.renderButton(this.handleClick)}openWatcher(){this.isOpen&&new IntersectionObserver(this.focusCustomComponentElement).observe(this.customComponentElement)}renderPopover(){var t;const e=null===(t=this.item)||void 0===t?void 0:t.dockMenu.componentName;return o("limel-popover",{openDirection:this.useMobileLayout?"top":"right",open:this.isOpen||this.item.dockMenu.menuOpen,onClose:this.onPopoverClose},this.renderButton(this.openPopover,"trigger"),o(e,Object.assign({ref:this.setCustomComponentElement},this.item.dockMenu.props||{},{onClose:this.onPopoverClose})))}renderButton(t,e){var i;return o("button",{slot:e,tabindex:"0",id:this.tooltipId,type:"button",class:{button:!0,selected:null===(i=this.item)||void 0===i?void 0:i.selected},onClick:t},this.renderIcon(),this.renderLabel(),this.renderTooltip())}renderIcon(){if(this.item.icon)return o("limel-icon",{name:this.item.icon,class:"icon"})}renderLabel(){if(this.expanded)return o("span",{class:"text"},this.item.label)}renderTooltip(){return!this.expanded&&this.item.label?o("limel-tooltip",{elementId:this.tooltipId,label:this.item.label,helperLabel:this.item.helperLabel}):this.expanded&&this.item.helperLabel?o("limel-tooltip",{elementId:this.tooltipId,label:this.item.helperLabel}):void 0}static get watchers(){return{isOpen:["openWatcher"]}}};s.style=".button{all:unset;cursor:pointer;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;color:var(--limel-dock-item-text-color);background-color:var(--dock-background-color);box-sizing:border-box;display:flex;align-items:center;position:relative;width:100%;height:var(--dock-item-height);border-radius:0.375rem;font-size:0.875rem;padding:0 0.5rem;min-width:var(--dock-item-height)}.button:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.button:active{background-color:var(--mdc-theme-surface);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}.button:focus{outline:none}.button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.button:hover{z-index:1}.button.selected{color:var(--limel-dock-item-text-color--selected);background-color:var(--dock-item-background-color--selected, rgb(var(--contrast-200)));box-shadow:var(--button-shadow-inset)}.button.selected:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}.button.selected .icon{color:var(--limel-dock-item-text--selected)}limel-popover{display:grid;grid-template-columns:100%}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:0.5rem;padding-right:0.75rem}.icon{flex-shrink:0;width:calc(var(--dock-item-height) - 1rem);height:calc(var(--dock-item-height) - 1rem);color:var(--dock-item-icon-color, var(--limel-dock-item-text-color))}";export{s as limel_dock_button}