@limetech/lime-elements 34.1.0-next.2 → 34.1.0-next.20

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,104 @@
+/*
+ * 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-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

@@ -27,6 +27,10 @@ export class Form {
      * The schema used to render the form
      */
     this.schema = {};
+    /**
+     * Set to `true` to disable the whole form.
+     */
+    this.disabled = false;
     this.isValid = true;
     this.handleChange = this.handleChange.bind(this);
   }
@@ -73,6 +77,7 @@ export class Form {
       FieldTemplate: FieldTemplate,
       ArrayFieldTemplate: ArrayFieldTemplate,
       ObjectFieldTemplate: ObjectFieldTemplate,
+      disabled: this.disabled,
       formContext: {
         schema: this.modifiedSchema,
         rootValue: this.value,
@@ -174,6 +179,24 @@ export class Form {
         "text": "Value of the form"
       }
     },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to `true` to disable the whole form."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "propsFactory": {
       "type": "unknown",
       "mutable": false,

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/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.css

@@ -68,7 +68,7 @@
  * @prop --list-grid-item-min-width: Minimum width of items in a list that has `has-grid-layout` class. Defaults to `7.5rem`.
  * @prop --list-grid-gap: Distance between items in a list that has `has-grid-layout` class. Defaults to `0.75rem`.
  */
-:host {
+:host(limel-list) {
   display: block;
 }
 
@@ -3061,6 +3061,7 @@ a.mdc-list-item {
   border-radius: 0.375rem;
 }
 .mdc-deprecated-list .mdc-deprecated-list-item {
+  box-sizing: border-box;
   z-index: 0;
 }
 .mdc-deprecated-list .mdc-deprecated-list-item.mdc-deprecated-list-item--disabled {