@limetech/lime-elements 34.0.2-next.8 → 34.1.0-next.11

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,100 @@
+/*
+ * 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);
+}
+
+: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/form/form.css

@@ -418,6 +418,10 @@
   flex-grow: 1;
 }
 
+.limel-form-array-item--object {
+  margin-bottom: 0.25rem;
+}
+
 .limel-form-layout--default {
   --gap: 1rem;
   display: grid;

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/array-field-collapsible-item.js

@@ -26,7 +26,7 @@ export class CollapsibleItemTemplate extends React.Component {
     const { data, schema, formSchema } = this.props;
     return React.createElement('limel-collapsible-section', {
       header: findTitle(data, schema, formSchema) || 'New item',
-      className: 'limel-form-array-item--object',
+      class: 'limel-form-array-item--object',
       ref: 'section',
       'is-open': this.isOpen,
     }, this.props.item.children);

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

@@ -18,18 +18,17 @@ export class ArrayFieldTemplate extends React.Component {
       return;
     }
     return React.createElement('limel-button', {
-      label: 'Add',
+      label: this.props.title || 'Add',
       onClick: this.handleAddClick,
-      icon: 'add',
+      icon: 'plus_math',
       class: 'button-add-new',
     });
   }
   renderItem(item, index) {
-    const key = `id_${index}`;
     const { schema, formData, formContext } = this.props;
     if (isObjectType(schema.items)) {
       return React.createElement(CollapsibleItemTemplate, {
-        key: key,
+        key: item.key,
         item: item,
         data: formData[index],
         schema: schema,
@@ -38,7 +37,7 @@ export class ArrayFieldTemplate extends React.Component {
       });
     }
     return React.createElement(SimpleItemTemplate, {
-      key: key,
+      key: item.key,
       item: item,
       index: index,
     });

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 {

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

@@ -44,6 +44,7 @@ export class List {
         return;
       }
       this.mdcList = new MDCList(element);
+      this.mdcList.hasTypeahead = true;
       this.mdcList.listElements.forEach((item) => new MDCRipple(item));
     };
     this.setupListeners = () => {

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

@@ -53,6 +53,10 @@ export class Picker {
      * scrolling.
      */
     this.actionScrollBehavior = 'sticky';
+    /**
+     * Whether badge icons should be used in the result list or not
+     */
+    this.badgeIcons = true;
     this.textValue = '';
     this.loading = false;
     this.chips = [];
@@ -232,7 +236,7 @@ export class Picker {
     const hasIcons = this.items.some((item) => {
       return 'icon' in item && !!item.icon;
     });
-    return (h("limel-list", { badgeIcons: hasIcons, onChange: this.handleListChange, onKeyDown: this.onListKeyDown, type: "selectable", items: this.items }));
+    return (h("limel-list", { badgeIcons: hasIcons && this.badgeIcons, onChange: this.handleListChange, onKeyDown: this.onListKeyDown, type: "selectable", items: this.items }));
   }
   onListKeyDown(event) {
     const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);
@@ -699,6 +703,24 @@ export class Picker {
       "attribute": "action-scroll-behavior",
       "reflect": false,
       "defaultValue": "'sticky'"
+    },
+    "badgeIcons": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether badge icons should be used in the result list or not"
+      },
+      "attribute": "badge-icons",
+      "reflect": true,
+      "defaultValue": "true"
     }
   }; }
   static get states() { return {

package/dist/collection/components/progress-flow/progress-flow-item/progress-flow-item.css

@@ -49,7 +49,10 @@
   content: "";
 }
 .flow-item.off-progress-item {
-  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+}
+.flow-item.first-off-progress-item {
+  padding-left: 1rem;
 }
 
 .step {
@@ -92,7 +95,6 @@
 .off-progress-item .step {
   border-radius: 0.25rem;
   padding: 0 0.75rem;
-  margin-left: 0.5rem;
 }
 .off-progress-item .step .icon {
   margin-left: 0;
@@ -116,8 +118,7 @@
   height: var(--step-height);
   position: absolute;
   z-index: 1;
-  right: 0;
-  transform: translateX(50%);
+  right: calc(var(--step-height) / 2 * -1);
   overflow: hidden;
 }
 .divider:after {
@@ -173,7 +174,8 @@
 .last .step:after {
   right: 0.5rem;
 }
-.step:not(.off-progress).selected:after {
+
+.flow-item:not(.off-progress-item) .step.selected:after {
   content: "";
 }
 

package/dist/collection/components/progress-flow/progress-flow.css

@@ -38,10 +38,6 @@
   display: none;
 }
 
-.first-off-progress-item {
-  margin-left: 0.5rem;
-}
-
 :host(.is-narrow) {
   --step-height: 1.5rem;
   --selected-indicator-right: 0;