@limetech/lime-elements 34.1.0-next.9 → 34.1.0

package/dist/collection/components/form/adapters/widget-adapter.js

@@ -87,9 +87,12 @@ export class LimeElementsWidgetAdapter extends React.Component {
     });
   }
   isDisabled() {
+    var _a, _b;
     const widgetProps = this.props.widgetProps;
     const options = widgetProps.schema.lime;
-    return widgetProps.disabled || (options === null || options === void 0 ? void 0 : options.disabled);
+    return (widgetProps.disabled ||
+      (options === null || options === void 0 ? void 0 : options.disabled) ||
+      ((_b = (_a = options === null || options === void 0 ? void 0 : options.component) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.disabled));
   }
   isReadOnly() {
     const widgetProps = this.props.widgetProps;

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

@@ -20,6 +20,7 @@ import { isInteger } from './validators';
  * @exampleComponent limel-example-props-factory-form
  * @exampleComponent limel-example-form-layout
  * @exampleComponent limel-example-form-span-fields
+ * @exampleComponent limel-example-custom-error-message
  */
 export class Form {
   constructor() {
@@ -33,6 +34,7 @@ export class Form {
     this.disabled = false;
     this.isValid = true;
     this.handleChange = this.handleChange.bind(this);
+    this.getCustomErrorMessages = this.getCustomErrorMessages.bind(this);
   }
   connectedCallback() {
     this.initialize();
@@ -78,6 +80,7 @@ export class Form {
       ArrayFieldTemplate: ArrayFieldTemplate,
       ObjectFieldTemplate: ObjectFieldTemplate,
       disabled: this.disabled,
+      transformErrors: this.getCustomErrorMessages,
       formContext: {
         schema: this.modifiedSchema,
         rootValue: this.value,
@@ -139,6 +142,33 @@ export class Form {
       };
     });
   }
+  getCustomErrorMessages(originalErrors) {
+    if (!this.transformErrors) {
+      return originalErrors;
+    }
+    const errors = originalErrors.map((error) => {
+      return {
+        name: error.name,
+        property: error.property,
+        message: error.message,
+        // For some reason 'schemaPath' is missing from the AjvError type definition:
+        // https://github.com/rjsf-team/react-jsonschema-form/issues/2140
+        // eslint-disable-next-line @typescript-eslint/dot-notation
+        schemaPath: error['schemaPath'],
+      };
+    });
+    // Use `.call({}, …)` here to bind `this` to an empty object to prevent
+    // the consumer submitted `transformErrors` from getting access to our
+    // component's internals. /Ads
+    return this.transformErrors
+      .call({}, errors)
+      .map((transformedError) => {
+      const originalError = originalErrors.find((error) => {
+        return transformedError.property === error.property;
+      });
+      return Object.assign(Object.assign({}, originalError), { message: transformedError.message });
+    });
+  }
   static get is() { return "limel-form"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -215,6 +245,26 @@ export class Form {
         "tags": [],
         "text": "Factory for creating properties for custom form components\n\nWhen using custom components in the form some properties might have to be\nset dynamically. If this factory is set, it will be called with the\ncurrent schema for the field for each custom component in the form. The\nfactory must return an object where each key is the name of the property\nthat should be set, along with its value."
       }
+    },
+    "transformErrors": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "(errors: FormError[]) => FormError[]",
+        "resolved": "(errors: FormError[]) => FormError[]",
+        "references": {
+          "FormError": {
+            "location": "import",
+            "path": "./form.types"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Custom function to customize the default error messages"
+      }
     }
   }; }
   static get events() { return [{

package/dist/collection/components/form/templates/array-field-collapsible-item.js

@@ -35,10 +35,10 @@ export class CollapsibleItemTemplate extends React.Component {
     const { item, index } = this.props;
     const actions = [
       {
-        id: 'remove',
-        icon: 'trash',
-        disabled: !item.hasRemove,
-        run: item.onDropIndexClick(index),
+        id: 'down',
+        icon: 'down_arrow',
+        disabled: !item.hasMoveDown,
+        run: item.onReorderClick(index, index + 1),
       },
       {
         id: 'up',
@@ -47,10 +47,10 @@ export class CollapsibleItemTemplate extends React.Component {
         run: item.onReorderClick(index, index - 1),
       },
       {
-        id: 'down',
-        icon: 'down_arrow',
-        disabled: !item.hasMoveDown,
-        run: item.onReorderClick(index, index + 1),
+        id: 'remove',
+        icon: 'trash',
+        disabled: !item.hasRemove,
+        run: item.onDropIndexClick(index),
       },
     ];
     element.actions = actions;

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

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

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

@@ -11,6 +11,7 @@ export class Select extends React.Component {
     this.handleChange = this.handleChange.bind(this);
   }
   render() {
+    var _a, _b;
     const props = this.props;
     const enumOptions = props.options.enumOptions;
     const options = enumOptions.map(createOption);
@@ -21,6 +22,7 @@ export class Select extends React.Component {
     else {
       value = findValue(props.value, options);
     }
+    const additionalProps = ((_b = (_a = props.schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.props) || {};
     return React.createElement(LimeElementsWidgetAdapter, {
       name: 'limel-select',
       value: value,
@@ -28,10 +30,7 @@ export class Select extends React.Component {
         change: this.handleChange,
       },
       widgetProps: props,
-      extraProps: {
-        multiple: props.multiple,
-        options: options,
-      },
+      extraProps: Object.assign({ multiple: props.multiple, options: options }, additionalProps),
     });
   }
   handleChange(event) {

package/dist/collection/components/grid/grid.css

@@ -23,7 +23,7 @@ slot {
   display: grid;
   grid-template-areas: var(--lime-grid-area, "");
   grid-template-columns: repeat(var(--lime-grid-columns, 4), minmax(0, 1fr));
-  grid-gap: var(--lime-grid-gutter, 1rem);
+  gap: var(--lime-grid-gutter, 1rem);
   grid-auto-flow: row dense;
   grid-auto-rows: var(--lime-grid-cell-height, 2.5rem);
   margin: 0;

package/dist/collection/components/input-field/input-field.css

@@ -1885,6 +1885,9 @@ input.mdc-text-field__input::-webkit-search-cancel-button:active {
 input.mdc-text-field__input::-webkit-search-cancel-button:hover {
   background-color: #757580;
 }
+input.mdc-text-field__input::-webkit-search-cancel-button:active {
+  transform: none;
+}
 
 .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field-character-counter, .mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-character-counter, .mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-helper-text {
   color: rgba(var(--contrast-1200), 1);
@@ -1949,4 +1952,14 @@ input.mdc-text-field__input::-webkit-search-cancel-button:hover {
 :host([type=urlAsText]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input,
 :host([type=tel]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input {
   z-index: 1;
+}
+
+:host([type=url]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__input,
+:host([type=email]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__input,
+:host([type=urlAsText]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__input,
+:host([type=tel]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__input {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: calc(100% - 2.75rem);
 }

package/dist/collection/components/list/list-renderer.js

@@ -55,6 +55,7 @@ export class ListRenderer {
         'mdc-deprecated-list-item': true,
         'mdc-deprecated-list-item--disabled': item.disabled,
         'mdc-deprecated-list-item--selected': item.selected,
+        'has-primary-component': this.hasPrimaryComponent(item),
       };
       const attributes = {};
       if (index === this.applyTabIndexToItemAtIndex) {
@@ -62,10 +63,15 @@ export class ListRenderer {
       }
       return (h("li", Object.assign({ class: classNames, "aria-disabled": item.disabled ? 'true' : 'false', "aria-selected": item.selected ? 'true' : 'false', "data-index": index }, attributes),
         item.icon ? this.renderIcon(this.config, item) : null,
+        this.getPrimaryComponent(item),
         this.renderText(item),
         this.twoLines && this.avatarList ? this.renderDivider() : null,
         this.renderActionMenu(item.actions)));
     };
+    this.hasPrimaryComponent = (item) => {
+      var _a;
+      return !!((_a = item === null || item === void 0 ? void 0 : item.primaryComponent) === null || _a === void 0 ? void 0 : _a.name);
+    };
     /**
      * Render the text of the list item
      *
@@ -135,6 +141,7 @@ export class ListRenderer {
         'mdc-deprecated-list-item': true,
         'mdc-deprecated-list-item--disabled': item.disabled,
         'mdc-deprecated-list-item__text': !item.secondaryText,
+        'has-primary-component': this.hasPrimaryComponent(item),
       };
       const attributes = {};
       if (index === this.applyTabIndexToItemAtIndex) {
@@ -146,12 +153,14 @@ export class ListRenderer {
       if (this.hasIcons) {
         return [
           item.icon ? this.renderIcon(config, item) : null,
+          this.getPrimaryComponent(item),
           this.renderText(item),
           h("div", { class: "mdc-deprecated-list-item__meta" }, itemTemplate),
         ];
       }
       return [
         h("div", { class: "mdc-deprecated-list-item__graphic" }, itemTemplate),
+        this.getPrimaryComponent(item),
         this.renderText(item),
       ];
     };
@@ -191,4 +200,12 @@ export class ListRenderer {
     };
     return (h("ul", { class: classNames, role: role, "aria-orientation": "vertical" }, items.map(this.renderListItem)));
   }
+  getPrimaryComponent(item) {
+    if (!this.hasPrimaryComponent(item)) {
+      return;
+    }
+    const PrimaryComponent = item.primaryComponent.name;
+    const props = item.primaryComponent.props;
+    return h(PrimaryComponent, Object.assign({}, props));
+  }
 }