@limetech/lime-elements 35.0.0-next.9 → 35.0.1-next.2

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

@@ -130,3 +130,16 @@ export declare enum ColumnAggregatorType {
  * @returns {*} the aggregated data
  */
 export declare type ColumnAggregatorFunction<T = object> = (column?: Column, values?: any[], data?: T[]) => any;
+/**
+ * Defines aggregate values for columns
+ */
+export interface ColumnAggregate {
+  /**
+   * The name of the `Column` field
+   */
+  field: string;
+  /**
+   * The aggregate value
+   */
+  value: any;
+}

package/dist/types/components.d.ts

@@ -6,18 +6,18 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Button } from "./components/button/button.types";
-import { Action as Action1, Chip, DateType, DialogHeading, FileInfo, FlexContainerAlign, FlexContainerDirection, FlexContainerJustify, IconSize as IconSize1, Languages, ListItem, ListSeparator, ListType, MenuItem, MenuListType, OpenDirection, Option, Searcher, SpinnerSize } from "@limetech/lime-elements";
+import { Action as Action1, Chip, ClosingActions, DateType, DialogHeading, FileInfo, FlexContainerAlign, FlexContainerDirection, FlexContainerJustify, IconSize as IconSize1, Languages, 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";
 import { Action } from "./components/collapsible-section/action";
-import { FormError, ValidationStatus } from "./components/form/form.types";
+import { FormError, ValidationError, ValidationStatus } from "./components/form/form.types";
 import { IconSize } from "./components/icon/icon.types";
 import { InputType } from "./components/input-field/input-field.types";
 import { ActionPosition, ActionScrollBehavior } from "./components/picker/actions.types";
 import { OpenDirection as OpenDirection1 } from "./components/menu/menu.types";
 import { FlowItem } from "./components/progress-flow/progress-flow.types";
 import { Tab } from "./components/tab-bar/tab.types";
-import { Column, ColumnSorter, TableParams } from "./components/table/table.types";
+import { Column, ColumnAggregate, ColumnSorter, TableParams } from "./components/table/table.types";
 export namespace Components {
     interface LimelBadge {
         /**
@@ -101,7 +101,7 @@ export namespace Components {
          */
         "label": string;
         /**
-          * Disables the checkbox when `true`. Works exactly the same as `disabled`. If either property is `true`, the checkbox will be disabled.
+          * Disables the checkbox when `true`. This visualizes the checkbox slightly differently. But shows no visual sign indicating that the checkbox is disabled or can ever become interactable.
          */
         "readonly": boolean;
         /**
@@ -337,7 +337,7 @@ export namespace Components {
         /**
           * Defines which action triggers a close-event.
          */
-        "closingActions": { escapeKey: boolean; scrimClick: boolean };
+        "closingActions": ClosingActions;
         /**
           * Set to `true` to make the dialog "fullscreen".
          */
@@ -430,6 +430,10 @@ export namespace Components {
           * Set to `true` to disable the whole form.
          */
         "disabled": boolean;
+        /**
+          * Extra errors to display in the form. Typical use case is asynchronous errors generated server side.
+         */
+        "errors": ValidationError;
         /**
           * Factory for creating properties for custom form components  When using custom components in the form some properties might have to be set dynamically. If this factory is set, it will be called with the current schema for the field for each custom component in the form. The factory must return an object where each key is the name of the property that should be set, along with its value.
          */
@@ -965,6 +969,10 @@ export namespace Components {
           * Active row in the table
          */
         "activeRow": object;
+        /**
+          * Column aggregates to be displayed in the table
+         */
+        "aggregates": ColumnAggregate[];
         /**
           * Columns used to display the data
          */
@@ -1442,7 +1450,7 @@ declare namespace LocalJSX {
          */
         "onChange"?: (event: CustomEvent<boolean>) => void;
         /**
-          * Disables the checkbox when `true`. Works exactly the same as `disabled`. If either property is `true`, the checkbox will be disabled.
+          * Disables the checkbox when `true`. This visualizes the checkbox slightly differently. But shows no visual sign indicating that the checkbox is disabled or can ever become interactable.
          */
         "readonly"?: boolean;
         /**
@@ -1710,7 +1718,7 @@ declare namespace LocalJSX {
         /**
           * Defines which action triggers a close-event.
          */
-        "closingActions"?: { escapeKey: boolean; scrimClick: boolean };
+        "closingActions"?: ClosingActions;
         /**
           * Set to `true` to make the dialog "fullscreen".
          */
@@ -1823,6 +1831,10 @@ declare namespace LocalJSX {
           * Set to `true` to disable the whole form.
          */
         "disabled"?: boolean;
+        /**
+          * Extra errors to display in the form. Typical use case is asynchronous errors generated server side.
+         */
+        "errors"?: ValidationError;
         /**
           * Emitted when a change is made within the form
          */
@@ -2446,6 +2458,10 @@ declare namespace LocalJSX {
           * Active row in the table
          */
         "activeRow"?: object;
+        /**
+          * Column aggregates to be displayed in the table
+         */
+        "aggregates"?: ColumnAggregate[];
         /**
           * Columns used to display the data
          */

package/dist/types/stencil-public-runtime.d.ts

@@ -666,7 +666,7 @@ export declare namespace JSXBase {
         use: JSXBase.SVGAttributes;
         view: JSXBase.SVGAttributes;
     }
-    interface SlotAttributes {
+    interface SlotAttributes extends JSXAttributes {
         name?: string;
         slot?: string;
         onSlotchange?: (event: Event) => void;
@@ -1427,9 +1427,7 @@ export declare namespace JSXBase {
         z?: number | string;
         zoomAndPan?: string;
     }
-    interface DOMAttributes<T = Element> {
-        key?: string | number;
-        ref?: (elm?: T) => void;
+    interface DOMAttributes<T> extends JSXAttributes<T> {
         slot?: string;
         part?: string;
         exportparts?: string;
@@ -1550,6 +1548,10 @@ export declare namespace JSXBase {
         onTransitionEndCapture?: (event: TransitionEvent) => void;
     }
 }
+export interface JSXAttributes<T = Element> {
+    key?: string | number;
+    ref?: (elm?: T) => void;
+}
 export interface CustomElementsDefineOptions {
     exclude?: string[];
     resourcesUrl?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "35.0.0-next.9",
+  "version": "35.0.1-next.2",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -16,7 +16,6 @@
   ],
   "scripts": {
     "build": "cross-env-shell NODE_ENV=prod SASS_PATH=node_modules \"stencil build --config stencil.config.dist.ts\"",
-    "cm": "git-cz",
     "dev": "cross-env-shell SASS_PATH=node_modules \"stencil build --dev --docs\"",
     "watch": "cross-env-shell SASS_PATH=node_modules \"stencil build --dev --watch --docs --serve\"",
     "watch:prod": "shx rm -rf www/ && cross-env-shell SASS_PATH=node_modules \"stencil build --watch\"",
@@ -32,7 +31,7 @@
     "lint:scss:fix": "prettier --write --ignore-path ./.gitignore **/*.scss",
     "lint:scss:prod": "prettier -c --end-of-line lf --ignore-path ./.gitignore **/*.scss",
     "start": "npm run watch",
-    "test": "npm run test:spec && npm run test:e2e",
+    "test": "cross-env-shell SASS_PATH=node_modules \"stencil test --spec --e2e\"",
     "test:watch": "cross-env-shell SASS_PATH=node_modules \"stencil test --spec --e2e --watch\"",
     "test:e2e": "cross-env-shell SASS_PATH=node_modules \"stencil test --e2e\"",
     "test:e2e:watch": "cross-env-shell SASS_PATH=node_modules \"stencil test --e2e --watch\"",
@@ -41,57 +40,56 @@
     "generate": "stencil generate"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^13.1.0",
-    "@lundalogik/cz-conventional-changelog": "^3.1.0",
+    "@commitlint/config-conventional": "^16.0.0",
     "@lundalogik/lime-icons8": "^2.7.0",
-    "@popperjs/core": "^2.9.3",
-    "@rjsf/core": "^2.5.1",
-    "@stencil/core": "^2.10.0",
+    "@popperjs/core": "^2.11.5",
+    "@rjsf/core": "^2.4.2",
+    "@stencil/core": "^2.15.1",
     "@stencil/eslint-plugin": "^0.4.0",
-    "@stencil/sass": "^1.4.1",
+    "@stencil/sass": "^1.5.2",
     "@types/codemirror": "^5.60.2",
     "@types/html-escaper": "^3.0.0",
-    "@types/jest": "^26.0.24",
+    "@types/jest": "^27.4.0",
     "@types/lodash-es": "^4.17.4",
     "@types/puppeteer": "^5.4.4",
-    "@types/react": "^16.14.14",
-    "@types/tabulator-tables": "^4.9.3",
-    "@typescript-eslint/eslint-plugin": "^4.31.2",
-    "@typescript-eslint/parser": "^4.31.2",
+    "@types/react": "^18.0.5",
+    "@types/tabulator-tables": "^4.9.4",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
     "ajv": "^6.12.6",
     "awesome-debounce-promise": "^2.1.0",
-    "codemirror": "^5.62.3",
-    "commitizen": "^4.2.4",
+    "codemirror": "^5.65.3",
     "cross-env": "^7.0.3",
-    "dayjs": "^1.10.6",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jsdoc": "^37.0.3",
+    "cz-conventional-changelog": "^3.3.0",
+    "dayjs": "^1.11.1",
+    "eslint": "^8.13.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-jsdoc": "^39.2.5",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-sonarjs": "^0.10.0",
-    "flatpickr": "^4.6.9",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-sonarjs": "^0.13.0",
+    "flatpickr": "^4.6.13",
     "html-escaper": "^3.0.3",
     "jest": "^26.6.3",
-    "jest-cli": "^26.6.3",
+    "jest-cli": "^27.5.0",
     "jsx-dom": "^7.0.4",
-    "kompendium": "^0.10.3",
+    "kompendium": "^0.11.1",
     "lodash-es": "^4.17.21",
-    "material-components-web": "^11.0.0",
-    "moment": "^2.29.1",
+    "material-components-web": "^13.0.0",
+    "moment": "^2.29.3",
     "number-abbreviate": "^2.0.0",
-    "prettier": "^2.4.1",
-    "puppeteer": "^10.2.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "prettier": "^2.6.2",
+    "puppeteer": "^13.6.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-shadow-dom-retarget-events": "^1.1.0",
     "replace-in-file": "^6.2.0",
     "shelljs": "0.8.5",
-    "showdown": "1.9.1",
+    "showdown": "2.0.3",
     "shx": "^0.3.3",
     "tabulator-tables": "^4.9.3",
-    "typescript": "^4.3.5"
+    "typescript": "^4.6.3"
   },
   "keywords": [
     "lime elements",
@@ -106,16 +104,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/@lundalogik/cz-conventional-changelog",
-      "additionalTypes": {
-        "switched": {
-          "description": "Not-yet-released functionality hidden behind a feature switch",
-          "title": "Not Released (feature switched)"
-        }
-      }
-    }
   }
 }

package/dist/cjs/checkbox.template-50eb8b76.js

@@ -1,39 +0,0 @@
-'use strict';
-
-const index = require('./index-e63a89d7.js');
-
-const CheckboxTemplate = (props) => {
-  const inputProps = {};
-  if (props.indeterminate) {
-    inputProps['data-indeterminate'] = 'true';
-  }
-  return (index.h("div", { class: "mdc-form-field " },
-    index.h("div", { class: {
-        'mdc-checkbox': true,
-        'mdc-checkbox--invalid': props.invalid,
-        'mdc-checkbox--disabled': props.disabled,
-        'mdc-checkbox--required': props.required,
-        'mdc-checkbox--indeterminate': props.indeterminate,
-      } },
-      index.h("input", Object.assign({ type: "checkbox", class: "mdc-checkbox__native-control", id: props.id, checked: props.checked, disabled: props.disabled, required: props.required, onChange: props.onChange }, inputProps)),
-      index.h("div", { class: "mdc-checkbox__background" },
-        index.h("svg", { class: "mdc-checkbox__checkmark", viewBox: "0 0 24 24" },
-          index.h("path", { class: "mdc-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })),
-        index.h("div", { class: "mdc-checkbox__mixedmark" }))),
-    index.h("label", { class: {
-        'mdc-checkbox--invalid': props.invalid,
-        'mdc-checkbox--disabled': props.disabled,
-        'mdc-checkbox--required': props.required,
-        'mdc-checkbox--indeterminate': props.indeterminate,
-      }, htmlFor: props.id }, props.label),
-    index.h(HelperText, { text: props.helperText })));
-};
-const HelperText = (props) => {
-  if (typeof props.text !== 'string') {
-    return;
-  }
-  return (index.h("div", { class: "limel-checkbox-helper-line" },
-    index.h("p", { class: "limel-checkbox-helper-text", "aria-hidden": "true" }, props.text.trim())));
-};
-
-exports.CheckboxTemplate = CheckboxTemplate;

package/dist/esm/checkbox.template-50f7c07b.js

@@ -1,37 +0,0 @@
-import { h } from './index-2316f345.js';
-
-const CheckboxTemplate = (props) => {
-  const inputProps = {};
-  if (props.indeterminate) {
-    inputProps['data-indeterminate'] = 'true';
-  }
-  return (h("div", { class: "mdc-form-field " },
-    h("div", { class: {
-        'mdc-checkbox': true,
-        'mdc-checkbox--invalid': props.invalid,
-        'mdc-checkbox--disabled': props.disabled,
-        'mdc-checkbox--required': props.required,
-        'mdc-checkbox--indeterminate': props.indeterminate,
-      } },
-      h("input", Object.assign({ type: "checkbox", class: "mdc-checkbox__native-control", id: props.id, checked: props.checked, disabled: props.disabled, required: props.required, onChange: props.onChange }, inputProps)),
-      h("div", { class: "mdc-checkbox__background" },
-        h("svg", { class: "mdc-checkbox__checkmark", viewBox: "0 0 24 24" },
-          h("path", { class: "mdc-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })),
-        h("div", { class: "mdc-checkbox__mixedmark" }))),
-    h("label", { class: {
-        'mdc-checkbox--invalid': props.invalid,
-        'mdc-checkbox--disabled': props.disabled,
-        'mdc-checkbox--required': props.required,
-        'mdc-checkbox--indeterminate': props.indeterminate,
-      }, htmlFor: props.id }, props.label),
-    h(HelperText, { text: props.helperText })));
-};
-const HelperText = (props) => {
-  if (typeof props.text !== 'string') {
-    return;
-  }
-  return (h("div", { class: "limel-checkbox-helper-line" },
-    h("p", { class: "limel-checkbox-helper-text", "aria-hidden": "true" }, props.text.trim())));
-};
-
-export { CheckboxTemplate as C };

package/dist/lime-elements/p-041ae00c.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as s,g as e}from"./p-92146da6.js";import{c as h}from"./p-6c094f3f.js";import{i as a,a as n}from"./p-cc9ebbef.js";import{D as o}from"./p-e1928c0e.js";import{M as r}from"./p-668795a7.js";import"./p-eab67c09.js";import"./p-a397bab7.js";import"./p-076bd4dc.js";import"./p-902347b9.js";import"./p-dcc97cc2.js";import"./p-ace9affc.js";const l={date:"date",time:"time",week:a()?"date":"week",month:"month",quarter:"date",year:"date",datetime:"datetime-local",default:"datetime-local"},d={date:"Y-MM-DD",time:"HH:mm",week:"GGGG-[W]WW",month:"Y-MM","datetime-local":"Y-MM-DD[T]HH:mm"};let c=class{constructor(s){t(this,s),this.change=i(this,"change",7),this.disabled=!1,this.readonly=!1,this.invalid=!1,this.required=!1,this.type="datetime",this.language="en",this.showPortal=!1,this.portalId=`date-picker-calendar-${h()}`,this.documentClickListener=t=>{"keydown"===t.type&&"Tab"!==t.key||document.querySelector(`#${this.portalId}`).contains(t.target)||this.hideCalendar()},this.handleCalendarChange=this.handleCalendarChange.bind(this),this.handleInputElementChange=this.handleInputElementChange.bind(this),this.showCalendar=this.showCalendar.bind(this),this.dateFormatter=new o(this.language),this.clearValue=this.clearValue.bind(this),this.hideCalendar=this.hideCalendar.bind(this),this.onInputClick=this.onInputClick.bind(this),this.nativeChangeHandler=this.nativeChangeHandler.bind(this),this.preventBlurFromCalendarContainer=this.preventBlurFromCalendarContainer.bind(this)}componentWillLoad(){this.useNative=!this.readonly&&(a()||n()),this.updateInternalFormatAndType(),this.formattedValue=this.dateFormatter.formatDate(this.value,this.internalFormat)}componentWillUpdate(){this.updateInternalFormatAndType()}render(){const t={onAction:this.clearValue};if(this.value&&!this.readonly&&(t.trailingIcon="clear_symbol"),this.useNative)return s("div",{class:"container"},s("limel-input-field",{disabled:this.disabled,readonly:this.readonly,invalid:this.invalid,label:this.label,helperText:this.helperText,required:this.required,value:this.formattedValue,type:this.nativeType,onChange:this.nativeChangeHandler}));const i=getComputedStyle(this.host).getPropertyValue("--dropdown-z-index");return s("div",{class:"container"},s("limel-input-field",Object.assign({disabled:this.disabled,readonly:this.readonly,invalid:this.invalid,label:this.label,helperText:this.helperText,required:this.required,value:this.formattedValue,onFocus:this.showCalendar,onBlur:this.hideCalendar,onClick:this.onInputClick,onChange:this.handleInputElementChange,ref:t=>this.textField=t},t)),s("limel-portal",{containerId:this.portalId,visible:this.showPortal,containerStyle:{"z-index":i}},s("limel-flatpickr-adapter",{format:this.internalFormat,language:this.language,type:this.type,value:this.value,ref:t=>this.datePickerCalendar=t,isOpen:this.showPortal,onChange:this.handleCalendarChange})))}onValueChange(t,i){t!==i&&t!==this.formattedValue&&(this.formattedValue=this.dateFormatter.formatDate(this.value,this.internalFormat))}updateInternalFormatAndType(){this.nativeType=l[this.type||"default"],this.nativeFormat=d[this.nativeType],this.internalFormat=this.useNative?this.nativeFormat:this.format?this.format:this.dateFormatter.getDateFormat(this.type)}nativeChangeHandler(t){t.stopPropagation();const i=this.dateFormatter.parseDate(t.detail,this.internalFormat);this.formattedValue=t.detail,this.change.emit(i)}showCalendar(t){this.showPortal=!0;const i=this.textField.shadowRoot.querySelector("input");setTimeout((()=>{this.datePickerCalendar.inputElement=i})),t.stopPropagation(),document.addEventListener("mousedown",this.documentClickListener,{passive:!0}),document.addEventListener("keydown",this.documentClickListener,{passive:!0}),document.addEventListener("blur",this.preventBlurFromCalendarContainer,{capture:!0})}preventBlurFromCalendarContainer(t){t.relatedTarget===this.datePickerCalendar&&t.stopPropagation()}hideCalendar(){setTimeout((()=>{this.showPortal=!1})),document.removeEventListener("mousedown",this.documentClickListener),document.removeEventListener("keydown",this.documentClickListener),document.removeEventListener("blur",this.preventBlurFromCalendarContainer),this.pickerIsAutoClosing()||this.fixFlatpickrFocusBug()}fixFlatpickrFocusBug(){new r(this.textField.shadowRoot.querySelector(".mdc-text-field")).getDefaultFoundation().deactivateFocus()}handleCalendarChange(t){const i=t.detail;this.formattedValue=this.dateFormatter.formatDate(i,this.internalFormat),t.stopPropagation(),this.pickerIsAutoClosing()&&this.hideCalendar(),this.change.emit(i)}onInputClick(t){this.disabled||this.readonly||this.showPortal||this.showCalendar(t)}handleInputElementChange(t){""===t.detail&&this.clearValue(),t.stopPropagation()}pickerIsAutoClosing(){return"datetime"!==this.type&&"time"!==this.type}clearValue(){this.formattedValue="",this.change.emit(null)}get host(){return e(this)}static get watchers(){return{value:["onValueChange"]}}};c.style="div.container{position:relative}";export{c as limel_date_picker}