@limetech/lime-elements 36.0.0 → 36.1.0-dev.2

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

@@ -1,6 +1,6 @@
 import { MDCFloatingLabel } from '@material/floating-label';
 import { MDCSelectHelperText } from '@material/select/helper-text';
-import { Component, Element, Event, h, Prop, State, Watch, } from '@stencil/core';
+import { h, } from '@stencil/core';
 import { isMobileDevice } from '../../util/device';
 import { ENTER, ENTER_KEY_CODE, SPACE, SPACE_KEY_CODE, } from '../../util/keycodes';
 import { isMultiple } from '../../util/multiple';
@@ -19,35 +19,18 @@ import { SelectTemplate } from './select.template';
  */
 export class Select {
   constructor() {
-    /**
-     * Set to `true` to make the field disabled.
-     * and visually shows that the `select` component is editable but disabled.
-     * This tells the users that if certain requirements are met,
-     * the component may become interactable.
-     */
+    this.hasChanged = false;
+    this.checkValid = false;
     this.disabled = false;
-    /**
-     * Set to `true` to make the field read-only.
-     * This visualizes the component slightly differently.
-     * But shows no visual sign indicating that the component is disabled
-     * or can ever become interactable.
-     */
     this.readonly = false;
-    /**
-     * True if the control requires a value.
-     */
+    this.invalid = undefined;
     this.required = false;
-    /**
-     * List of options.
-     */
+    this.label = undefined;
+    this.helperText = undefined;
+    this.value = undefined;
     this.options = [];
-    /**
-     * Set to `true` to allow multiple values to be selected.
-     */
     this.multiple = false;
     this.menuOpen = false;
-    this.hasChanged = false;
-    this.checkValid = false;
     this.handleMenuChange = this.handleMenuChange.bind(this);
     this.handleNativeChange = this.handleNativeChange.bind(this);
     this.handleMenuTriggerKeyPress =
@@ -187,205 +170,217 @@ export class Select {
   }
   static get is() { return "limel-select"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["select.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["select.css"]
-  }; }
-  static get properties() { return {
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` to make the field disabled.\nand visually shows that the `select` component is editable but disabled.\nThis tells the users that if certain requirements are met,\nthe component may become interactable."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` to make the field read-only.\nThis visualizes the component slightly differently.\nBut shows no visual sign indicating that the component is disabled\nor can ever become interactable."
-      },
-      "attribute": "readonly",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "invalid": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` to indicate that the current value of the select is\ninvalid."
-      },
-      "attribute": "invalid",
-      "reflect": true
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["select.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["select.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to make the field disabled.\nand visually shows that the `select` component is editable but disabled.\nThis tells the users that if certain requirements are met,\nthe component may become interactable."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "True if the control requires a value."
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to make the field read-only.\nThis visualizes the component slightly differently.\nBut shows no visual sign indicating that the component is disabled\nor can ever become interactable."
+        },
+        "attribute": "readonly",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "required",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to indicate that the current value of the select is\ninvalid."
+        },
+        "attribute": "invalid",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Text to display next to the select."
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "True if the control requires a value."
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "label",
-      "reflect": true
-    },
-    "helperText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text to display next to the select."
+        },
+        "attribute": "label",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Optional helper text to display below the input field when it has focus."
+      "helperText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Optional helper text to display below the input field when it has focus."
+        },
+        "attribute": "helper-text",
+        "reflect": true
       },
-      "attribute": "helper-text",
-      "reflect": true
-    },
-    "value": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Option | Option[]",
-        "resolved": "Option<string> | Option<string>[]",
-        "references": {
-          "Option": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
+      "value": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Option | Option[]",
+          "resolved": "Option<string> | Option<string>[]",
+          "references": {
+            "Option": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Currently selected value or values.\nIf `multiple` is `true`, this must be an array. Otherwise it must be a\nsingle value."
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Currently selected value or values.\nIf `multiple` is `true`, this must be an array. Otherwise it must be a\nsingle value."
-      }
-    },
-    "options": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Option[]",
-        "resolved": "Option<string>[]",
-        "references": {
-          "Option": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
+      "options": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Option[]",
+          "resolved": "Option<string>[]",
+          "references": {
+            "Option": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "List of options."
-      },
-      "defaultValue": "[]"
-    },
-    "multiple": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` to allow multiple values to be selected."
-      },
-      "attribute": "multiple",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "menuOpen": {}
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the value is changed."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "List of options."
+        },
+        "defaultValue": "[]"
       },
-      "complexType": {
-        "original": "Option | Option[]",
-        "resolved": "Option<string> | Option<string>[]",
-        "references": {
-          "Option": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
+      "multiple": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to allow multiple values to be selected."
+        },
+        "attribute": "multiple",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "menuOpen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the value is changed."
+        },
+        "complexType": {
+          "original": "Option | Option[]",
+          "resolved": "Option<string> | Option<string>[]",
+          "references": {
+            "Option": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "menuOpen",
-      "methodName": "watchOpen"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "menuOpen",
+        "methodName": "watchOpen"
+      }];
+  }
 }

package/dist/collection/components/select/select.template.js

@@ -23,10 +23,7 @@ export const SelectTemplate = (props) => {
     'limel-select--empty': !hasValue,
     'limel-select--with-helper-text': typeof props.helperText === 'string',
   };
-  return (h("div", { class: classList },
-    h(SelectValue, Object.assign({}, props, { hasValue: hasValue, isValid: isValid })),
-    h(HelperText, { text: props.helperText }),
-    h(SelectDropdown, Object.assign({}, props))));
+  return (h("div", { class: classList }, h(SelectValue, Object.assign({}, props, { hasValue: hasValue, isValid: isValid })), h(HelperText, { text: props.helperText }), h(SelectDropdown, Object.assign({}, props))));
 };
 const SelectValue = (props) => {
   const anchorClassList = {
@@ -39,15 +36,7 @@ const SelectValue = (props) => {
     'mdc-floating-label--float-above': props.hasValue || props.isOpen || props.readonly,
     'mdc-floating-label--active': props.isOpen,
   };
-  return (h("div", { class: anchorClassList, tabindex: "0", onClick: props.open, onKeyPress: props.onTriggerPress, role: "button", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-labelledby": "s-label s-selected-text", "aria-required": props.required, "aria-disabled": props.disabled },
-    h("span", { id: "s-label", class: labelClassList }, props.label),
-    h("span", { class: "mdc-select__selected-text-container limel-select__selected-option" },
-      getSelectedIcon(props.value),
-      h("span", { id: "s-selected-text", class: "mdc-select__selected-text limel-select__selected-option__text" }, getSelectedText(props.value, props.readonly))),
-    h(ShowIcon, Object.assign({}, props, { isValid: props.isValid })),
-    h("span", { class: "mdc-select__dropdown-icon" },
-      h("svg", { class: "mdc-select__dropdown-icon-graphic", viewBox: "7 10 10 5", focusable: "false" },
-        h("polygon", { stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" })))));
+  return (h("div", { class: anchorClassList, tabindex: "0", onClick: props.open, onKeyPress: props.onTriggerPress, role: "button", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-labelledby": "s-label s-selected-text", "aria-required": props.required, "aria-disabled": props.disabled }, h("span", { id: "s-label", class: labelClassList }, props.label), h("span", { class: "mdc-select__selected-text-container limel-select__selected-option" }, getSelectedIcon(props.value), h("span", { id: "s-selected-text", class: "mdc-select__selected-text limel-select__selected-option__text" }, getSelectedText(props.value, props.readonly))), h(ShowIcon, Object.assign({}, props, { isValid: props.isValid })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "mdc-select__dropdown-icon-graphic", viewBox: "7 10 10 5", focusable: "false" }, h("polygon", { stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" })))));
 };
 const ShowIcon = (props) => {
   if (props.isValid) {
@@ -59,8 +48,7 @@ const HelperText = (props) => {
   if (typeof props.text !== 'string') {
     return;
   }
-  return (h("div", { class: "mdc-select-helper-line" },
-    h("p", { class: "mdc-select-helper-text mdc-select-helper-text--persistent", "aria-hidden": "true" }, props.text.trim())));
+  return (h("div", { class: "mdc-select-helper-line" }, h("p", { class: "mdc-select-helper-text mdc-select-helper-text--persistent", "aria-hidden": "true" }, props.text.trim())));
 };
 const SelectDropdown = (props) => {
   if (props.native) {
@@ -70,13 +58,11 @@ const SelectDropdown = (props) => {
 };
 const MenuDropdown = (props) => {
   const items = createMenuItems(props.options, props.value);
-  return (h("limel-portal", { containerId: props.id, visible: props.isOpen, inheritParentWidth: true, containerStyle: { 'z-index': props.dropdownZIndex } },
-    h("limel-menu-surface", { open: props.isOpen, onDismiss: props.close, style: {
-        '--mdc-menu-min-width': '100%',
-        'max-height': 'inherit',
-        display: 'flex',
-      } },
-      h("limel-list", { items: items, type: props.multiple ? 'checkbox' : 'selectable', onChange: props.onMenuChange }))));
+  return (h("limel-portal", { containerId: props.id, visible: props.isOpen, inheritParentWidth: true, containerStyle: { 'z-index': props.dropdownZIndex } }, h("limel-menu-surface", { open: props.isOpen, onDismiss: props.close, style: {
+      '--mdc-menu-min-width': '100%',
+      'max-height': 'inherit',
+      display: 'flex',
+    } }, h("limel-list", { items: items, type: props.multiple ? 'checkbox' : 'selectable', onChange: props.onMenuChange }))));
 };
 const NativeDropdown = (props) => {
   return (h("select", { required: props.required, "aria-disabled": props.disabled, "aria-required": props.required, onChange: props.onNativeChange, onFocus: props.open, onBlur: props.close, class: "limel-select__native-control", disabled: props.disabled, multiple: props.multiple }, props.options.map((option) => {
@@ -107,7 +93,7 @@ function createMenuItems(options, value) {
   });
 }
 function getSelectedText(value, readonly) {
-  if (!value && readonly) {
+  if ((!value || (isMultiple(value) && !value.length)) && readonly) {
     return '–';
   }
   if (!value) {

package/dist/collection/components/shortcut/shortcut.css

@@ -0,0 +1,91 @@
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly called by outside code.
+ */
+/**
+* @prop --shortcut-border-radius: defines the radius of corners of the shortcut. Defaults to `1rem`
+* @prop --shortcut-icon-color: defines the fill color of the shortcut icon. Defaults to `--contrast-1000`
+* @prop --shortcut-label-color: defines the color of the shortcut label. Defaults to `--contrast-1100`
+* @prop --shortcut-background-color: defines the backgrounds color of the shortcut icon. Defaults to `--contrast-100`
+* @prop --shortcut-badge-text-color: Text color of the notification badge. Defaults to `--color-white`
+* @prop --shortcut-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`
+*/
+:host(limel-shortcut) {
+  --badge-text-color: var(
+      --shortcut-badge-text-color,
+      rgb(var(--color-white))
+  );
+  --badge-background-color: var(
+      --shortcut-badge-background-color,
+      rgb(var(--color-red-default))
+  );
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: 0.0625rem;
+}
+:host(limel-shortcut) * {
+  box-sizing: border-box;
+}
+
+:host(limel-shortcut[disabled]) a {
+  opacity: 0.5;
+  box-shadow: unset;
+  cursor: not-allowed;
+}
+
+a {
+  all: unset;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  box-shadow: var(--button-shadow-normal);
+  cursor: pointer;
+  text-align: center;
+  height: calc(100% - 1rem);
+  width: calc(100% - 1rem);
+  padding: 0.5rem;
+  border-radius: var(--shortcut-border-radius, 1rem);
+  background-color: var(--shortcut-background-color, rgb(var(--contrast-100)));
+}
+a:hover {
+  box-shadow: var(--button-shadow-hovered);
+}
+a:active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+a:focus {
+  outline: none;
+}
+a:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+
+limel-icon {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  color: var(--shortcut-icon-color, rgb(var(--contrast-1000)));
+  border-radius: var(--shortcut-border-radius, 1rem);
+}
+
+span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 100%;
+  color: var(--shortcut-label-color, rgb(var(--contrast-1100)));
+  font-size: 0.75rem;
+  text-align: center;
+}
+
+limel-badge {
+  position: absolute;
+  top: -0.5rem;
+  right: 0;
+}