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

package/dist/collection/components/form/form.js

@@ -11,6 +11,7 @@ import { widgets } from './widgets';
 import { createRandomString } from '../../util/random-string';
 import Ajv from 'ajv';
 import { isInteger } from './validators';
+import { mapValues } from 'lodash-es';
 /**
  * @exampleComponent limel-example-form
  * @exampleComponent limel-example-nested-form
@@ -21,6 +22,7 @@ import { isInteger } from './validators';
  * @exampleComponent limel-example-form-layout
  * @exampleComponent limel-example-form-span-fields
  * @exampleComponent limel-example-custom-error-message
+ * @exampleComponent limel-example-server-errors
  */
 export class Form {
   constructor() {
@@ -76,6 +78,7 @@ export class Form {
       widgets: widgets,
       liveValidate: true,
       showErrorList: false,
+      extraErrors: this.getExtraErrors(this.errors),
       FieldTemplate: FieldTemplate,
       ArrayFieldTemplate: ArrayFieldTemplate,
       ObjectFieldTemplate: ObjectFieldTemplate,
@@ -142,6 +145,17 @@ export class Form {
       };
     });
   }
+  getExtraErrors(errors) {
+    if (!errors) {
+      return;
+    }
+    return mapValues(errors, (error) => {
+      if (Array.isArray(error)) {
+        return { __errors: error };
+      }
+      return this.getExtraErrors(error);
+    });
+  }
   getCustomErrorMessages(originalErrors) {
     if (!this.transformErrors) {
       return originalErrors;
@@ -265,6 +279,26 @@ export class Form {
         "tags": [],
         "text": "Custom function to customize the default error messages"
       }
+    },
+    "errors": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ValidationError",
+        "resolved": "{ [key: string]: ValidationError | string[]; }",
+        "references": {
+          "ValidationError": {
+            "location": "import",
+            "path": "./form.types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Extra errors to display in the form. Typical use case is asynchronous\nerrors generated server side."
+      }
     }
   }; }
   static get events() { return [{

package/dist/collection/components/form/form.types.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line no-shadow
 export var FormLayoutType;
 (function (FormLayoutType) {
   /**

package/dist/collection/components/form/templates/common.js

@@ -59,7 +59,10 @@ function findFirstEntry(data, subSchema) {
     getRequiredEntry(data, subSchema),
     ...Object.entries(data),
   ];
-  return entries.filter(([_, value]) => !!value && typeof value !== 'boolean')[0];
+  return entries.filter((entry) => {
+    const value = entry[1];
+    return !!value && typeof value !== 'boolean';
+  })[0];
 }
 function getRequiredEntry(data, subSchema) {
   if (!('required' in subSchema)) {

package/dist/collection/components/icon-button/icon-button.css

@@ -4,41 +4,42 @@
  * Nothing in this file may output any CSS
  * without being explicitly called by outside code.
  */
-@media (pointer: coarse) {
-  .mdc-icon-button:hover::before {
-    opacity: 0;
-  }
-}
-/**
- * @prop --icon-background-color: Background color when attribute `elevated` is set to `true`.
- */
-:host {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-:host([hidden]) {
-  display: none;
+.mdc-icon-button {
+  font-size: 24px;
+  width: 48px;
+  height: 48px;
+  padding: 12px;
 }
-
-:host([disabled]) {
-  pointer-events: none;
+.mdc-icon-button.mdc-icon-button--reduced-size {
+  width: 40px;
+  height: 40px;
+  padding: 8px;
 }
-
-:host([elevated]) .mdc-icon-button {
-  padding: 0.5625rem;
+.mdc-icon-button.mdc-icon-button--reduced-size.mdc-icon-button--touch {
+  margin-top: 4px;
+  margin-bottom: 4px;
+  margin-right: 4px;
+  margin-left: 4px;
 }
-:host([elevated]) limel-icon {
-  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
-  box-shadow: var(--button-shadow-normal);
+.mdc-icon-button .mdc-icon-button__touch {
+  position: absolute;
+  top: 50%;
+  height: 48px;
+  /* @noflip */
+  /*rtl:ignore*/
+  left: 50%;
+  width: 48px;
+  transform: translate(-50%, -50%);
 }
-:host([elevated]) limel-icon:hover {
-  box-shadow: var(--button-shadow-hovered);
+.mdc-icon-button:disabled {
+  color: rgba(0, 0, 0, 0.38);
+  /* @alternate */
+  color: var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38));
 }
-:host([elevated]) limel-icon:active {
-  box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
+.mdc-icon-button svg,
+.mdc-icon-button img {
+  width: 24px;
+  height: 24px;
 }
 
 .mdc-icon-button {
@@ -50,29 +51,32 @@
   background-color: transparent;
   fill: currentColor;
   color: inherit;
-  font-size: 24px;
   text-decoration: none;
   cursor: pointer;
   user-select: none;
-  width: 48px;
-  height: 48px;
-  padding: 12px;
-}
-.mdc-icon-button svg,
-.mdc-icon-button img {
-  width: 24px;
-  height: 24px;
+  overflow: visible;
 }
-.mdc-icon-button:disabled {
-  color: rgba(0, 0, 0, 0.38);
-  /* @alternate */
-  color: var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38));
+.mdc-icon-button .mdc-icon-button__touch {
+  position: absolute;
+  top: 50%;
+  height: 48px;
+  /* @noflip */
+  /*rtl:ignore*/
+  left: 50%;
+  width: 48px;
+  transform: translate(-50%, -50%);
 }
 .mdc-icon-button:disabled {
   cursor: default;
   pointer-events: none;
 }
 
+.mdc-icon-button--display-flex {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+
 .mdc-icon-button__icon {
   display: inline-block;
 }
@@ -80,6 +84,11 @@
   display: none;
 }
 
+.mdc-icon-button--touch {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
 .mdc-icon-button--on .mdc-icon-button__icon {
   display: none;
 }
@@ -124,84 +133,91 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   will-change: transform, opacity;
 }
-.mdc-icon-button::before, .mdc-icon-button::after {
+.mdc-icon-button .mdc-icon-button__ripple::before,
+.mdc-icon-button .mdc-icon-button__ripple::after {
   position: absolute;
   border-radius: 50%;
   opacity: 0;
   pointer-events: none;
   content: "";
 }
-.mdc-icon-button::before {
+.mdc-icon-button .mdc-icon-button__ripple::before {
   transition: opacity 15ms linear, background-color 15ms linear;
   z-index: 1;
   /* @alternate */
   z-index: var(--mdc-ripple-z-index, 1);
 }
-.mdc-icon-button::after {
+.mdc-icon-button .mdc-icon-button__ripple::after {
   z-index: 0;
   /* @alternate */
   z-index: var(--mdc-ripple-z-index, 0);
 }
-.mdc-icon-button.mdc-ripple-upgraded::before {
+.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before {
   transform: scale(var(--mdc-ripple-fg-scale, 1));
 }
-.mdc-icon-button.mdc-ripple-upgraded::after {
+.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after {
   top: 0;
   /* @noflip */
+  /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
 }
-.mdc-icon-button.mdc-ripple-upgraded--unbounded::after {
+.mdc-icon-button.mdc-ripple-upgraded--unbounded .mdc-icon-button__ripple::after {
   top: var(--mdc-ripple-top, 0);
   /* @noflip */
+  /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
-.mdc-icon-button.mdc-ripple-upgraded--foreground-activation::after {
+.mdc-icon-button.mdc-ripple-upgraded--foreground-activation .mdc-icon-button__ripple::after {
   animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
 }
-.mdc-icon-button.mdc-ripple-upgraded--foreground-deactivation::after {
+.mdc-icon-button.mdc-ripple-upgraded--foreground-deactivation .mdc-icon-button__ripple::after {
   animation: mdc-ripple-fg-opacity-out 150ms;
   transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
 }
-.mdc-icon-button::before, .mdc-icon-button::after {
+.mdc-icon-button .mdc-icon-button__ripple::before,
+.mdc-icon-button .mdc-icon-button__ripple::after {
   top: calc(50% - 50%);
   /* @noflip */
+  /*rtl:ignore*/
   left: calc(50% - 50%);
   width: 100%;
   height: 100%;
 }
-.mdc-icon-button.mdc-ripple-upgraded::before, .mdc-icon-button.mdc-ripple-upgraded::after {
+.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before,
+.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after {
   top: var(--mdc-ripple-top, calc(50% - 50%));
   /* @noflip */
+  /*rtl:ignore*/
   left: var(--mdc-ripple-left, calc(50% - 50%));
   width: var(--mdc-ripple-fg-size, 100%);
   height: var(--mdc-ripple-fg-size, 100%);
 }
-.mdc-icon-button.mdc-ripple-upgraded::after {
+.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after {
   width: var(--mdc-ripple-fg-size, 100%);
   height: var(--mdc-ripple-fg-size, 100%);
 }
-.mdc-icon-button::before, .mdc-icon-button::after {
+.mdc-icon-button .mdc-icon-button__ripple::before, .mdc-icon-button .mdc-icon-button__ripple::after {
   background-color: #000;
   /* @alternate */
   background-color: var(--mdc-ripple-color, #000);
 }
-.mdc-icon-button:hover::before, .mdc-icon-button.mdc-ripple-surface--hover::before {
+.mdc-icon-button:hover .mdc-icon-button__ripple::before, .mdc-icon-button.mdc-ripple-surface--hover .mdc-icon-button__ripple::before {
   opacity: 0.04;
   /* @alternate */
   opacity: var(--mdc-ripple-hover-opacity, 0.04);
 }
-.mdc-icon-button.mdc-ripple-upgraded--background-focused::before, .mdc-icon-button:not(.mdc-ripple-upgraded):focus::before {
+.mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before, .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before {
   transition-duration: 75ms;
   opacity: 0.12;
   /* @alternate */
   opacity: var(--mdc-ripple-focus-opacity, 0.12);
 }
-.mdc-icon-button:not(.mdc-ripple-upgraded)::after {
+.mdc-icon-button:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after {
   transition: opacity 150ms linear;
 }
-.mdc-icon-button:not(.mdc-ripple-upgraded):active::after {
+.mdc-icon-button:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after {
   transition-duration: 75ms;
   opacity: 0.12;
   /* @alternate */
@@ -210,6 +226,47 @@
 .mdc-icon-button.mdc-ripple-upgraded {
   --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
 }
+.mdc-icon-button .mdc-icon-button__ripple {
+  pointer-events: none;
+  z-index: 1;
+}
+
+@media (pointer: coarse) {
+  .mdc-icon-button:hover::before {
+    opacity: 0;
+  }
+}
+/**
+ * @prop --icon-background-color: Background color when attribute `elevated` is set to `true`.
+ */
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([disabled]) {
+  pointer-events: none;
+}
+
+:host([elevated]) .mdc-icon-button {
+  padding: 0.5625rem;
+}
+:host([elevated]) limel-icon {
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  box-shadow: var(--button-shadow-normal);
+}
+:host([elevated]) limel-icon:hover {
+  box-shadow: var(--button-shadow-hovered);
+}
+:host([elevated]) limel-icon:active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
 
 .mdc-icon-button:disabled {
   color: var(--mdc-theme-text-disabled-on-background);

package/dist/collection/components/icon-button/icon-button.js

@@ -67,6 +67,7 @@ export class IconButton {
       iconAttributes.size = 'small';
     }
     return (h("button", Object.assign({ class: "mdc-icon-button", disabled: this.disabled, "aria-label": this.label, title: this.label }, buttonAttributes),
+      h("div", { class: "mdc-icon-button__ripple" }),
       h("limel-icon", Object.assign({ name: this.icon }, iconAttributes))));
   }
   static get is() { return "limel-icon-button"; }