@limetech/lime-elements 35.0.0-next.7 → 35.0.0

package/dist/lime-elements/p-eae8c615.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as s,g as e}from"./p-e9a95b8f.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-72e03943.js";import{M as r}from"./p-1c284626.js";import"./p-eab67c09.js";import"./p-2ff40ce6.js";import"./p-48d4ef20.js";import"./p-cbc43682.js";import"./p-dcc97cc2.js";import"./p-d0a7de87.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"},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}

package/dist/lime-elements/p-ed65468d.entry.js

@@ -0,0 +1 @@
+import{r,h as c}from"./p-e9a95b8f.js";const o=class{constructor(c){r(this,c),this.size="mini",this.limeBranded=!0}render(){return[c("svg",{viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},this.renderSpinner())]}renderSpinner(){return this.limeBranded?c("g",null,c("g",{"clip-path":"url(#mask)"},c("circle",{class:"outline thick",cx:"12",cy:"12",r:"12"}),c("g",{class:"spinner"},c("circle",{class:"color thick",cx:"12",cy:"12",r:"12"}),c("circle",{class:"color thick",cx:"12",cy:"12",r:"12"}),c("circle",{class:"color thick",cx:"12",cy:"12",r:"12"}),c("circle",{class:"color thick",cx:"12",cy:"12",r:"12"}),c("circle",{class:"color thick",cx:"12",cy:"12",r:"12"}),c("circle",{class:"color thick",cx:"12",cy:"12",r:"12"}),c("circle",{class:"color thick",cx:"12",cy:"12",r:"12"}),c("circle",{class:"color thick",cx:"12",cy:"12",r:"12"}),c("circle",{class:"color thick",cx:"12",cy:"12",r:"12"}),c("circle",{class:"color thick",cx:"12",cy:"12",r:"12"}),c("circle",{class:"color thick",cx:"12",cy:"12",r:"12"}))),c("clipPath",{id:"mask"},c("path",{d:"M2.166 11.248C2.166 5.04 7.058 0 13.083 0 19.108 0 24 5.04 24 11.248c0 3.229-1.307 6.548-4.533 9.306-3.908 3.343-9.15 3.8-17.254 3.249-2.405-.164-2.753-.588-1.51-1.533C4.61 19.3 2.165 17.025 2.165 11.248zm3.124 9.834c5.563.227 9.416-.246 12.397-2.76 2.432-2.05 3.482-4.56 3.51-7.074.05-4.613-3.636-8.36-8.114-8.36-4.478 0-8.114 3.746-8.114 8.36 0 2.793.607 4.737.726 6.345.092 1.252.03 2.388-.405 3.49z"}))):c("g",null,c("circle",{class:"outline",cx:"12",cy:"12",r:"10"}),c("g",{class:"spinner"},c("circle",{class:"color",cx:"12",cy:"12",r:"10"}),c("circle",{class:"color",cx:"12",cy:"12",r:"10"}),c("circle",{class:"color",cx:"12",cy:"12",r:"10"}),c("circle",{class:"color",cx:"12",cy:"12",r:"10"}),c("circle",{class:"color",cx:"12",cy:"12",r:"10"}),c("circle",{class:"color",cx:"12",cy:"12",r:"10"}),c("circle",{class:"color",cx:"12",cy:"12",r:"10"}),c("circle",{class:"color",cx:"12",cy:"12",r:"10"}),c("circle",{class:"color",cx:"12",cy:"12",r:"10"}),c("circle",{class:"color",cx:"12",cy:"12",r:"10"}),c("circle",{class:"color",cx:"12",cy:"12",r:"10"})))}};o.style=":host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      var(--lime-text-primary-on-background-color)\n  )}@keyframes spin{50%{transform:rotate(180deg)}100%{transform:rotate(720deg)}}@keyframes fade-in-the-spinner{0%{transform:scale(0.7);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes animate-colored-circles{5%{stroke-dashoffset:0}10%,100%{stroke-dashoffset:63}}:host([hidden]){display:none}:host{box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:1.5rem;width:1.5rem;transform:translate3d(0, 0, 0);animation:fade-in-the-spinner 0.5s ease forwards}:host([size=x-small]){height:2rem;width:2rem}:host([size=small]){height:2.125rem;width:2.125rem}:host([size=medium]){height:2.75rem;width:2.75rem}:host([size=large]){height:4rem;width:4rem}.spinner{animation:spin 1s linear infinite;transform-origin:center}.color{animation:animate-colored-circles 10s linear infinite;fill:none;stroke-dasharray:63;stroke-dashoffset:63;stroke-linecap:round;stroke-width:4}.color.thick{stroke-width:10}.color:nth-child(1){stroke:var(--spinner-color-1, rgb(var(--lime-brand-color-deep-red)))}.color:nth-child(2){stroke:var(--spinner-color-2, rgb(var(--lime-brand-color-sellable-orange)));animation-delay:1s}.color:nth-child(3){stroke:var(--spinner-color-3, rgb(var(--lime-brand-color-simple-blue)));animation-delay:2s}.color:nth-child(4){stroke:var(--spinner-color-4, rgb(var(--lime-brand-color-orange)));animation-delay:3s}.color:nth-child(5){stroke:var(--spinner-color-5, rgb(var(--lime-brand-color-lime-green)));animation-delay:4s}.color:nth-child(6){stroke:var(--spinner-color-6, rgb(var(--lime-brand-color-yellow)));animation-delay:5s}.color:nth-child(7){stroke:var(--spinner-color-7, rgb(var(--lime-brand-color-flexible-turquoise)));animation-delay:6s}.color:nth-child(8){stroke:var(--spinner-color-8, rgb(var(--lime-brand-color-loving-magenta)));animation-delay:7s}.color:nth-child(9){stroke:var(--spinner-color-9, rgb(var(--lime-brand-color-dark-blue)));animation-delay:8s}.color:nth-child(10){stroke:var(--spinner-color-9, rgb(var(--lime-brand-color-light-grey)));animation-delay:9s}.outline{stroke:rgba(var(--lime-brand-color-light-grey), 0.3);fill:none;stroke-linecap:round;stroke-width:4}.outline.thick{stroke-width:10}";export{o as limel_spinner}

package/dist/lime-elements/p-f0c9dadd.entry.js

@@ -0,0 +1 @@
+import{r as t,h as i,g as e}from"./p-e9a95b8f.js";import{c as r}from"./p-240fda3b.js";const s=new class{constructor(){this.cache={},this.resolveFunctions={}}async get(t,i=""){return this.cache[t]||(this.cache[t]=await this.getIcon(t,i)),this.cache[t]}getIcon(t,i){return new Promise((e=>{this.resolveFunctions[t]||(this.resolveFunctions[t]=[],this.fetchData(t,i)),this.resolveFunctions[t].push(e)}))}async fetchData(t,i){let e=i||"";i&&!i.endsWith("/")&&(e=`${i}/`);const r=await fetch(`${e}assets/icons/${t}.svg`);let s=await r.text();if(s=s.replace(/#000000/g,"currentColor"),!this.validSvg(s))throw new Error("Invalid SVG");this.resolvePromises(t,s)}validSvg(t){return"svg"===(new DOMParser).parseFromString(t,"image/svg+xml").documentElement.tagName.toLowerCase()}resolvePromises(t,i){this.resolveFunctions[t].forEach((t=>{t(i)})),this.resolveFunctions[t]=null}},o=class{constructor(i){t(this,i)}componentDidLoad(){this.loadIcon(this.name)}render(){return i("div",{class:"container"})}async loadIcon(t){if(void 0===t||""===t)return;const i=await this.loadSvg(t);this.renderSvg(i)}loadSvg(t){return s.get(t,r.iconPath)}renderSvg(t){const i=this.host.shadowRoot.querySelector("div.container");i&&(i.innerHTML=t)}get host(){return e(this)}static get watchers(){return{name:["loadIcon"]}}};o.style=":host{background-color:var(--icon-background-color, transparent);border-radius:50%;display:inline-block;line-height:0;box-sizing:border-box}:host svg{fill:currentColor;height:100%;pointer-events:none;width:100%}:host([hidden]){display:none}:host([size=x-small]){height:0.9375rem !important;width:0.9375rem !important}:host([size=small]){height:1.25rem !important;width:1.25rem !important}:host([size=medium]){height:1.5625rem !important;width:1.5625rem !important}:host([size=large]){height:1.875rem !important;width:1.875rem !important}:host([badge][size=x-small]){height:1.4375rem !important;width:1.4375rem !important}:host([badge][size=x-small])>div{margin:0.25rem}:host([badge][size=small]){height:1.875rem !important;width:1.875rem !important}:host([badge][size=small])>div{margin:0.3125rem}:host([badge][size=medium]){height:2.5rem !important;width:2.5rem !important}:host([badge][size=medium])>div{margin:0.5rem}:host([badge][size=large]){height:2.875rem !important;width:2.875rem !important}:host([badge][size=large])>div{margin:0.5rem}";export{o as limel_icon}

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

@@ -5,6 +5,8 @@
  * without being explicitly called by outside code.
  */
 
+@use 'sass:math';
+
 @function pxToRem($px) {
-    @return #{$px/16}rem;
+    @return #{math.div($px, 16)}rem;
 }

package/dist/lime-elements/style/internal/lime-theme.scss

@@ -10,37 +10,36 @@
 @use '../brand-colors';
 @use '../_theme-color-variables';
 
-@use '@material/theme' with
-    (
-        $primary: brand-colors.$lime-turquoise,
-        $secondary: brand-colors.$lime-dark-grey,
-        $background: #fff,
-        $surface: #fff,
-        $error: #b00020,
-        $on-primary: #fff,
-        $on-secondary: #fff,
-        $on-surface: #000,
-        $on-error: #fff,
-        // $text-disabled-on-background: rgba(0, 0, 0, 0.38),
-        // $text-hint-on-light: rgba(0, 0, 0, 0.38),
-        // $text-primary-on-background: rgba(0, 0, 0, 0.87),
-        // $text-secondary-on-background: rgba(0, 0, 0, 0.54),
-        //
-        // The following variables are also available to be set if needed
-        // (note by Ads: they probably aren't available in MDC v11)
-        //
-        // $text-hint-on-background: rgba(0, 0, 0, 0.38),
-        // $text-icon-on-background: rgba(0, 0, 0, 0.38),
-        // $text-primary-on-light: rgba(0, 0, 0, 0.87),
-        // $text-secondary-on-light: rgba(0, 0, 0, 0.54),
-        // $text-disabled-on-light: rgba(0, 0, 0, 0.38),
-        // $text-icon-on-light: rgba(0, 0, 0, 0.38),
-        // $text-primary-on-dark: white,
-        // $text-secondary-on-dark: rgba(255, 255, 255, 0.7),
-        // $text-hint-on-dark: rgba(255, 255, 255, 0.5),
-        // $text-disabled-on-dark: rgba(255, 255, 255, 0.5),
-        // $text-icon-on-dark: rgba(255, 255, 255, 0.5),
-    );
+@use '@material/theme' with (
+    $primary: brand-colors.$lime-turquoise,
+    $secondary: brand-colors.$lime-dark-grey,
+    $background: #fff,
+    $surface: #fff,
+    $error: #b00020,
+    $on-primary: #fff,
+    $on-secondary: #fff,
+    $on-surface: #000,
+    $on-error: #fff,
+    // $text-disabled-on-background: rgba(0, 0, 0, 0.38),
+    // $text-hint-on-light: rgba(0, 0, 0, 0.38),
+    // $text-primary-on-background: rgba(0, 0, 0, 0.87),
+    // $text-secondary-on-background: rgba(0, 0, 0, 0.54),
+    //
+    // The following variables are also available to be set if needed
+    // (note by Ads: they probably aren't available in MDC v11)
+    //
+    // $text-hint-on-background: rgba(0, 0, 0, 0.38),
+    // $text-icon-on-background: rgba(0, 0, 0, 0.38),
+    // $text-primary-on-light: rgba(0, 0, 0, 0.87),
+    // $text-secondary-on-light: rgba(0, 0, 0, 0.54),
+    // $text-disabled-on-light: rgba(0, 0, 0, 0.38),
+    // $text-icon-on-light: rgba(0, 0, 0, 0.38),
+    // $text-primary-on-dark: white,
+    // $text-secondary-on-dark: rgba(255, 255, 255, 0.7),
+    // $text-hint-on-dark: rgba(255, 255, 255, 0.5),
+    // $text-disabled-on-dark: rgba(255, 255, 255, 0.5),
+    // $text-icon-on-dark: rgba(255, 255, 255, 0.5),
+);
 @forward '@material/theme';
 
 @use './lime-typography';

package/dist/lime-elements/style/internal/lime-typography.scss

@@ -9,60 +9,59 @@
 
 @use '../functions';
 
-@use '@material/typography' with
-    (
-        $styles-headline1: (
-            font-size: functions.pxToRem(22),
-            line-height: functions.pxToRem(22),
-        ),
-        $styles-headline2: (
-            font-size: functions.pxToRem(16),
-            line-height: functions.pxToRem(14),
-        ),
-        $styles-headline3: (
-            font-size: functions.pxToRem(16),
-            line-height: functions.pxToRem(14),
-        ),
-        $styles-headline4: (
-            font-size: functions.pxToRem(16),
-            line-height: functions.pxToRem(14),
-        ),
-        $styles-headline5: (
-            font-size: functions.pxToRem(14),
-            line-height: functions.pxToRem(14),
-        ),
-        $styles-headline6: (
-            font-size: functions.pxToRem(14),
-            line-height: functions.pxToRem(14),
-        ),
-        $styles-subtitle1: (
-            font-size: functions.pxToRem(14),
-            line-height: functions.pxToRem(18),
-        ),
-        $styles-subtitle2: (
-            font-size: functions.pxToRem(13),
-            line-height: functions.pxToRem(18),
-        ),
-        $styles-body1: (
-            font-size: functions.pxToRem(13),
-            line-height: functions.pxToRem(24),
-        ),
-        $styles-body2: (
-            font-size: functions.pxToRem(13),
-            line-height: functions.pxToRem(26),
-        ),
-        $styles-caption: (
-            font-size: functions.pxToRem(11),
-            line-height: functions.pxToRem(14),
-        ),
-        $styles-button: (
-            font-size: functions.pxToRem(14),
-            line-height: functions.pxToRem(36),
-            text-transform: none,
-        ),
-        $styles-overline: (
-            font-size: functions.pxToRem(11),
-            line-height: functions.pxToRem(14),
-        )
-    );
+@use '@material/typography' with (
+    $styles-headline1: (
+        font-size: functions.pxToRem(22),
+        line-height: functions.pxToRem(22),
+    ),
+    $styles-headline2: (
+        font-size: functions.pxToRem(16),
+        line-height: functions.pxToRem(14),
+    ),
+    $styles-headline3: (
+        font-size: functions.pxToRem(16),
+        line-height: functions.pxToRem(14),
+    ),
+    $styles-headline4: (
+        font-size: functions.pxToRem(16),
+        line-height: functions.pxToRem(14),
+    ),
+    $styles-headline5: (
+        font-size: functions.pxToRem(14),
+        line-height: functions.pxToRem(14),
+    ),
+    $styles-headline6: (
+        font-size: functions.pxToRem(14),
+        line-height: functions.pxToRem(14),
+    ),
+    $styles-subtitle1: (
+        font-size: functions.pxToRem(14),
+        line-height: functions.pxToRem(18),
+    ),
+    $styles-subtitle2: (
+        font-size: functions.pxToRem(13),
+        line-height: functions.pxToRem(18),
+    ),
+    $styles-body1: (
+        font-size: functions.pxToRem(13),
+        line-height: functions.pxToRem(24),
+    ),
+    $styles-body2: (
+        font-size: functions.pxToRem(13),
+        line-height: functions.pxToRem(26),
+    ),
+    $styles-caption: (
+        font-size: functions.pxToRem(11),
+        line-height: functions.pxToRem(14),
+    ),
+    $styles-button: (
+        font-size: functions.pxToRem(14),
+        line-height: functions.pxToRem(36),
+        text-transform: none,
+    ),
+    $styles-overline: (
+        font-size: functions.pxToRem(11),
+        line-height: functions.pxToRem(14),
+    )
+);
 @forward '@material/typography';

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

@@ -6,5 +6,5 @@ export declare class Badge {
    * Label to display in the badge
    */
   label: number;
-  render(): any;
+  render(): string;
 }

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

@@ -9,8 +9,9 @@ export declare class Checkbox {
    */
   disabled: boolean;
   /**
-   * 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;
   /**

package/dist/types/components/checkbox/checkbox.template.d.ts

@@ -3,6 +3,7 @@ interface CheckboxTemplateProps {
   disabled?: boolean;
   id: string;
   checked?: boolean;
+  readonly?: boolean;
   indeterminate?: boolean;
   required?: boolean;
   invalid?: boolean;

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

@@ -9,6 +9,13 @@ import { DialogHeading } from '@limetech/lime-elements';
  * See the example _Nested `close` events_.
  * :::
  *
+ * :::important
+ * Are you developing for
+ * [Lime CRM](https://www.lime-technologies.com/en/lime-crm/)? Please note that
+ * you should use the [DialogService](https://lundalogik.github.io/lime-web-components/versions/latest/#/api/dialog-service)
+ * from Lime Web Components to open dialogs in Lime CRM.
+ * :::
+ *
  * @exampleComponent limel-example-dialog
  * @exampleComponent limel-example-dialog-nested-close-events
  * @exampleComponent limel-example-dialog-heading

package/dist/types/components/flex-container/flex-container.d.ts

@@ -1,5 +1,11 @@
 import { FlexContainerAlign, FlexContainerDirection, FlexContainerJustify } from '@limetech/lime-elements';
 /**
+ * This component is deprecated and will be removed in a future version of
+ * Lime Elements. Please use CSS for your flexible container needs 🙂
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+ *
+ * @deprecated
+ * @private
  * @exampleComponent limel-example-flex-container
  * @slot - Container content
  */
@@ -20,5 +26,6 @@ export declare class FlexContainer {
    * Reverse the order of the items
    */
   reverse: boolean;
+  componentWillLoad(): void;
   render(): any;
 }

package/dist/types/components/form/fields/array-field.d.ts

@@ -46,6 +46,5 @@ export declare class ArrayField extends React.Component<ArrayProps> {
     schema: any;
     uiSchema: any;
     wasPropertyKeyModified: boolean;
-    children?: React.ReactNode;
   }>;
 }

package/dist/types/components/form/fields/object-field.d.ts

@@ -3,8 +3,8 @@ import { FieldProps } from '@rjsf/core';
 export declare class ObjectField extends React.Component<FieldProps, any> {
   constructor(props: any);
   private handleValidation;
-  render(): React.FunctionComponentElement<Readonly<FieldProps<any>> & Readonly<{
+  render(): React.FunctionComponentElement<{
     children?: React.ReactNode;
-  }>> | React.FunctionComponentElement<{}>;
+  }> | React.FunctionComponentElement<Readonly<FieldProps<any>>>;
   private renderErrors;
 }

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { FormError, ValidationStatus } from './form.types';
+import { FormError, ValidationError, ValidationStatus } from './form.types';
 /**
  * @exampleComponent limel-example-form
  * @exampleComponent limel-example-nested-form
@@ -10,6 +10,7 @@ import { FormError, ValidationStatus } from './form.types';
  * @exampleComponent limel-example-form-layout
  * @exampleComponent limel-example-form-span-fields
  * @exampleComponent limel-example-custom-error-message
+ * @exampleComponent limel-example-server-errors
  */
 export declare class Form {
   /**
@@ -41,6 +42,11 @@ export declare class Form {
    * Custom function to customize the default error messages
    */
   transformErrors?: (errors: FormError[]) => FormError[];
+  /**
+   * 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
    */
@@ -69,5 +75,6 @@ export declare class Form {
   private setSchemaId;
   private createValidator;
   private getValidationErrors;
+  private getExtraErrors;
   private getCustomErrorMessages;
 }

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

@@ -29,6 +29,12 @@ export interface FormError {
    */
   message: string;
 }
+export declare type ValidationError = {
+  /**
+   * Name of the field the error belongs to
+   */
+  [key: string]: string[] | ValidationError;
+};
 export interface FormComponent<T = any> {
   /**
    * The value of the current property

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

@@ -1,12 +1,13 @@
 import { Action, ListItem, Searcher } from '@limetech/lime-elements';
 import { ActionScrollBehavior, ActionPosition } from './actions.types';
 /**
- * @exampleComponent limel-example-picker
+ * @exampleComponent limel-example-picker-single
  * @exampleComponent limel-example-picker-multiple
  * @exampleComponent limel-example-picker-icons
  * @exampleComponent limel-example-picker-empty-suggestions
  * @exampleComponent limel-example-picker-leading-icon
  * @exampleComponent limel-example-picker-static-actions
+ * @exampleComponent limel-example-picker-composite
  */
 export declare class Picker {
   /**

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

@@ -35,6 +35,6 @@ export declare class Switch {
   private initialize;
   disconnectedCallback(): void;
   render(): any[];
-  protected valueWatcher(newValue: any, oldValue: any): void;
-  private onChange;
+  protected valueWatcher(newValue: boolean): void;
+  private handleClick;
 }

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { Column, TableParams, ColumnSorter } from './table.types';
+import { Column, TableParams, ColumnSorter, ColumnAggregate } from './table.types';
 /**
  * @exampleComponent limel-example-table
  * @exampleComponent limel-example-table-custom-components
@@ -68,6 +68,10 @@ export declare class Table {
    * A message to display when the table has no data
    */
   emptyMessage: string;
+  /**
+   * Column aggregates to be displayed in the table
+   */
+  aggregates: ColumnAggregate[];
   /**
    * Enables row selection
    */
@@ -115,15 +119,20 @@ export declare class Table {
   protected activeRowChanged(): void;
   protected updateData(newData?: any[], oldData?: any[]): void;
   protected updateColumns(newColumns: Column[], oldColumns: Column[]): void;
+  protected updateAggregates(newAggregates: ColumnAggregate[], oldAggregates: ColumnAggregate[]): void;
   protected updateSelection(newSelection: any[]): void;
+  protected updateSelectable(): void;
   private areSameColumns;
+  private haveSameAggregateFields;
   private init;
   private initTabulatorComponent;
+  private initTableSelection;
   private setSelection;
   private updateMaxPage;
   private getOptions;
   private getColumnSorter;
   private getColumnDefinitions;
+  private addColumnAggregator;
   private getAjaxOptions;
   private handleAjaxRequesting;
   private getPaginationOptions;

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

@@ -10,14 +10,14 @@ import { Action as Action1, Chip, DateType, DialogHeading, FileInfo, FlexContain
 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;
         /**
@@ -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;
         /**
@@ -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;