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

package/dist/collection/components/color-picker/color-picker-palette.js

@@ -0,0 +1,135 @@
+import { Component, h, Prop, Event } from '@stencil/core';
+import { brightnesses, colors, getColorName, getCssColor } from './swatches';
+/**
+ * @private
+ */
+export class Palette {
+  constructor() {
+    this.renderSwatches = () => {
+      return colors.map((color) => {
+        return brightnesses.map(this.renderSwatch(color));
+      });
+    };
+    this.renderSwatch = (color) => (brightness) => {
+      const colorName = getColorName(color, brightness);
+      const classList = {
+        swatch: true,
+        [colorName]: true,
+        'swatch--selected': this.value === getCssColor(color, brightness),
+      };
+      return (h("div", { class: classList, onClick: this.handleClick(color, brightness), tabindex: "0" }));
+    };
+    this.handleChange = (event) => {
+      event.stopPropagation();
+      this.change.emit(event.detail);
+    };
+    this.handleClick = (color, brightness) => (event) => {
+      const value = getCssColor(color, brightness);
+      event.stopPropagation();
+      this.change.emit(value);
+    };
+  }
+  render() {
+    const background = this.value ? { '--background': this.value } : {};
+    return [
+      h("div", { class: "color-picker-palette" }, this.renderSwatches()),
+      h("div", { class: "chosen-color-name" },
+        h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required }),
+        h("div", { class: "chosen-color-preview", style: background })),
+    ];
+  }
+  static get is() { return "limel-color-picker-palette"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["color-picker-palette.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["color-picker-palette.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Color value that is manually typed by the user"
+      },
+      "attribute": "value",
+      "reflect": true
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label of the input field"
+      },
+      "attribute": "label",
+      "reflect": true
+    },
+    "helperText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Helper text of the input field"
+      },
+      "attribute": "helper-text",
+      "reflect": true
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to `true` if a value is required"
+      },
+      "attribute": "required",
+      "reflect": true
+    }
+  }; }
+  static get events() { return [{
+      "method": "change",
+      "name": "change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emits chosen value to the parent component"
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/color-picker/color-picker.css

@@ -0,0 +1,108 @@
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly called by outside code.
+ */
+.picker-trigger[style="--background:lime-magenta;"]:after,
+.chosen-color-preview[style="--background:lime-magenta;"]:after {
+  background-color: var(--lime-magenta);
+}
+.picker-trigger[style="--background:lime-blue;"]:after,
+.chosen-color-preview[style="--background:lime-blue;"]:after {
+  background-color: var(--lime-blue);
+}
+.picker-trigger[style="--background:lime-orange;"]:after,
+.chosen-color-preview[style="--background:lime-orange;"]:after {
+  background-color: var(--lime-orange);
+}
+.picker-trigger[style="--background:lime-green;"]:after,
+.chosen-color-preview[style="--background:lime-green;"]:after {
+  background-color: var(--lime-green);
+}
+.picker-trigger[style="--background:lime-red;"]:after,
+.chosen-color-preview[style="--background:lime-red;"]:after {
+  background-color: var(--lime-red);
+}
+.picker-trigger[style="--background:lime-dark-blue;"]:after,
+.chosen-color-preview[style="--background:lime-dark-blue;"]:after {
+  background-color: var(--lime-dark-blue);
+}
+.picker-trigger[style="--background:lime-turquoise;"]:after,
+.chosen-color-preview[style="--background:lime-turquoise;"]:after {
+  background-color: var(--lime-turquoise);
+}
+.picker-trigger[style="--background:lime-yellow;"]:after,
+.chosen-color-preview[style="--background:lime-yellow;"]:after {
+  background-color: var(--lime-yellow);
+}
+.picker-trigger[style="--background:lime-light-grey;"]:after,
+.chosen-color-preview[style="--background:lime-light-grey;"]:after {
+  background-color: var(--lime-light-grey);
+}
+
+:host {
+  --popover-surface-width: 50rem;
+  --color-picker-default-background: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill-opacity='0.1' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>");
+}
+
+.color-picker {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: auto 1fr;
+}
+
+.chosen-color-preview,
+.picker-trigger {
+  box-sizing: border-box;
+  position: relative;
+  isolation: isolate;
+  width: 3.5rem;
+  height: 3.5rem;
+}
+.chosen-color-preview:before, .chosen-color-preview:after,
+.picker-trigger:before,
+.picker-trigger:after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+.chosen-color-preview:before,
+.picker-trigger:before {
+  background: var(--color-picker-default-background);
+  background-size: 0.5rem;
+  z-index: 0;
+}
+.chosen-color-preview:after,
+.picker-trigger:after {
+  background: var(--background);
+  z-index: 1;
+}
+
+.picker-trigger {
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  box-shadow: var(--button-shadow-normal);
+}
+.picker-trigger:hover {
+  box-shadow: var(--button-shadow-hovered);
+}
+.picker-trigger:active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+.picker-trigger:after {
+  box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;
+}
+
+:host([readonly]) .picker-trigger:hover, :host([readonly]) .picker-trigger:active {
+  cursor: default;
+  box-shadow: var(--button-shadow-normal);
+  transform: none;
+}
+
+.chosen-color-input[readonly] {
+  transform: translateY(1rem);
+}

package/dist/collection/components/color-picker/color-picker.js

@@ -0,0 +1,189 @@
+/* eslint-disable multiline-ternary */
+import { Component, h, Prop, State, Event } from '@stencil/core';
+/**
+ * This component enables you to select a swatch from out color palette, simply
+ * by clicking on it. You can then copy the css variable name of the chosen color
+ * and use it where desired.
+ *
+ * The color picker can also show you a preview of any valid color name or color value.
+ *
+ * :::note
+ * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.
+ * :::
+ *
+ * @exampleComponent limel-example-color-picker
+ * @exampleComponent limel-example-color-picker-readonly
+ */
+export class ColorPicker {
+  constructor() {
+    this.isOpen = false;
+    this.renderTooltip = () => {
+      if (!this.readonly && this.tooltipLabel) {
+        return (h("limel-tooltip", { label: this.tooltipLabel, elementId: "tooltip-button" }));
+      }
+    };
+    this.renderPickerPalette = () => {
+      if (this.readonly) {
+        return this.renderPickerTrigger();
+      }
+      return (h("limel-popover", { open: this.isOpen, onClose: this.onPopoverClose },
+        this.renderPickerTrigger(),
+        h("limel-color-picker-palette", { value: this.value, label: this.label, helperText: this.helperText, onChange: this.handleChange, required: this.required })));
+    };
+    this.renderPickerTrigger = () => {
+      const background = this.value ? { '--background': this.value } : {};
+      return (h("div", { class: "picker-trigger", slot: "trigger", style: background, role: "button", tabindex: "0", onClick: this.openPopover, id: "tooltip-button" }));
+    };
+    this.openPopover = (event) => {
+      event.stopPropagation();
+      this.isOpen = true;
+    };
+    this.onPopoverClose = (event) => {
+      event.stopPropagation();
+      this.isOpen = false;
+    };
+    this.handleChange = (event) => {
+      event.stopPropagation();
+      this.change.emit(event.detail);
+    };
+  }
+  render() {
+    return [
+      this.renderTooltip(),
+      h("div", { class: "color-picker" },
+        this.renderPickerPalette(),
+        h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, readonly: this.readonly, class: "chosen-color-input" })),
+    ];
+  }
+  static get is() { return "limel-color-picker"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["color-picker.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["color-picker.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Name or code of the chosen color"
+      },
+      "attribute": "value",
+      "reflect": true
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The label of the input field"
+      },
+      "attribute": "label",
+      "reflect": true
+    },
+    "helperText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Helper text of the input field"
+      },
+      "attribute": "helper-text",
+      "reflect": true
+    },
+    "tooltipLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Displayed as tooltips when picker is hovered."
+      },
+      "attribute": "tooltip-label",
+      "reflect": true
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to `true` if a value is required"
+      },
+      "attribute": "required",
+      "reflect": true
+    },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to `true` if a value is readonly. This makes the component un-interactive."
+      },
+      "attribute": "readonly",
+      "reflect": true
+    }
+  }; }
+  static get states() { return {
+    "isOpen": {}
+  }; }
+  static get events() { return [{
+      "method": "change",
+      "name": "change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emits chosen value to the parent component"
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/color-picker/swatches.js

@@ -0,0 +1,29 @@
+export const colors = [
+  'red',
+  'pink',
+  'magenta',
+  'purple',
+  'violet',
+  'indigo',
+  'blue',
+  'sky',
+  'cyan',
+  'teal',
+  'green',
+  'lime',
+  'grass',
+  'yellow',
+  'amber',
+  'orange',
+  'coral',
+  'brown',
+  'gray',
+  'glaucous',
+];
+export const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];
+export function getColorName(color, brightness) {
+  return `--color-${color}-${brightness}`;
+}
+export function getCssColor(color, brightness) {
+  return `rgb(var(${getColorName(color, brightness)}))`;
+}

package/dist/collection/components/file/file.js

@@ -115,7 +115,7 @@ export class File {
           'is-file-picker': true,
           'shows-dropzone': true,
           'highlight-dropzone': this.isDraggingOverDropZone,
-        }, disabled: this.disabled, readonly: this.readonly, label: this.label, leadingIcon: "upload_to_cloud", onChange: this.handleChipSetChange, onClick: this.handleFileSelection, onInteract: this.handleChipInteract, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, required: this.required, type: "input", value: this.chipArray, title: this.getTranslation('drag-and-drop-tips'), onDragEnter: this.handleDragEnter, onDragOver: this.preventAndStop, onDragLeave: this.handleDragLeave, onDrop: this.handleFileDrop }),
+        }, disabled: this.disabled, readonly: this.readonly, label: this.label, leadingIcon: "upload_to_cloud", language: this.language, onChange: this.handleChipSetChange, onClick: this.handleFileSelection, onInteract: this.handleChipInteract, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, required: this.required, type: "input", value: this.chipArray, title: this.getTranslation('drag-and-drop-tips'), onDragEnter: this.handleDragEnter, onDragOver: this.preventAndStop, onDragLeave: this.handleDragLeave, onDrop: this.handleFileDrop }),
     ];
   }
   get chipArray() {

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);
 }