@limetech/lime-elements 36.0.0-next.2 → 36.0.0-next.22

package/dist/collection/components/dock/dock.css

@@ -0,0 +1,107 @@
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly called by outside code.
+ */
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly used by outside code.
+ */
+/**
+* @prop --dock-expanded-max-width: The maximum width of the Dock when it is expanded. Defaults to `max-content` which means the Dock will adjust its width to the widest dock item.
+* @prop --dock-background-color: Background color of the whole component, defaults to `--contrast-100`.
+* @prop --dock-item-background-color--selected: Background color of selected dock item, defaults to `--contrast-200`.
+* @prop --dock-item-text-color: Text of dock items, defaults to `--contrast-1100`.
+* @prop --dock-item-text-color--selected: Text color of selected dock item, defaults to `--contrast-1300`.
+* @prop --dock-item-icon-color: Color of the optional icons used in each dock item. Only affects inactive dock items, defaults to text colors for default or selected states.
+* @prop --popover-surface-width: Defines the width of the popover that is opened for dock items with custom components. Defaults to `auto`.
+*/
+:host(limel-dock) {
+  --dock-item-height: 2.75rem;
+  --dock-padding: 0.25rem;
+  --dock-expand-shrink-button-height: 1rem;
+  --limel-dock-item-text-color: var(
+      --dock-item-text-color,
+      rgb(var(--contrast-1100))
+  );
+  --limel-dock-item-text-color--selected: var(
+      --dock-item-text-color--selected,
+      rgb(var(--contrast-1300))
+  );
+  isolation: isolate;
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  background-color: var(--dock-background-color, rgb(var(--contrast-100)));
+  box-shadow: 0.1875rem 0 0.375rem -0.125rem rgba(var(--color-black), 0.15), 0.1875rem 0 0.625rem -0.125rem rgba(var(--color-black), 0.05);
+}
+
+:host(limel-dock:not(.has-mobile-layout)) {
+  height: 100%;
+  width: calc(var(--dock-padding) * 2 + var(--dock-item-height));
+}
+
+:host(limel-dock.expanded) {
+  width: var(--dock-expanded-max-width, max-content);
+}
+
+.footer-separator {
+  margin-top: auto;
+  justify-self: flex-end;
+}
+
+nav {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  flex-grow: 1;
+  padding: var(--dock-padding);
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+nav::-webkit-scrollbar {
+  display: none;
+}
+:host(limel-dock.has-mobile-layout) nav {
+  justify-content: space-between;
+  flex-direction: row;
+}
+
+.expand-shrink {
+  all: unset;
+  box-sizing: border-box;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--dock-expand-shrink-button-height);
+  padding: 0 0.5rem;
+  margin: var(--dock-padding);
+  border-radius: 0.375rem;
+}
+.expand-shrink:hover {
+  box-shadow: var(--button-shadow-hovered);
+}
+.expand-shrink:active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+.expand-shrink.expanded {
+  justify-content: flex-end;
+}
+.expand-shrink.expanded limel-icon {
+  transform: rotateY(180deg);
+}
+.expand-shrink:focus-visible {
+  box-shadow: var(--shadow-depth-8-focused);
+}
+.expand-shrink limel-icon {
+  width: calc(var(--dock-expand-shrink-button-height) - 0.25rem);
+  color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));
+}

package/dist/collection/components/dock/dock.js

@@ -0,0 +1,300 @@
+import { Component, Event, h, Host, Prop, State, } from '@stencil/core';
+const DEFAULT_MOBILE_BREAKPOINT = 700;
+/**
+ * @exampleComponent limel-example-dock-basic
+ * @exampleComponent limel-example-dock-custom-component
+ * @exampleComponent limel-example-dock-mobile
+ * @exampleComponent limel-example-dock-expanded
+ * @exampleComponent limel-example-dock-colors-css
+ * @private
+ */
+export class Dock {
+  constructor() {
+    /**
+     * Items that are placed in the dock.
+     */
+    this.dockItems = [];
+    /**
+     * Items that are placed at the bottom of the dock. (Or at the end in mobile
+     * layout.)
+     */
+    this.dockFooterItems = [];
+    /**
+     * Defines the width of the component, when it loads.
+     * - `true`: shows both icons and labels of the Dock items.
+     * - `false`: only shows icons of the doc items, and displays
+     * their labels as tooltip.
+     *
+     * Note: when `useMobileLayout` is `true`, labels will always
+     * be shown as tooltips. Read more below…
+     */
+    this.expanded = false;
+    /**
+     * Set to `false` if you do not want to allow end-users
+     * to exapnd or shrink the Dock. This will hide the
+     * expand/shrink button, and the only things that defines
+     * the layout will be the `expanded` property, and
+     * the `mobileBreakPoint`.
+     */
+    this.allowResize = true;
+    /**
+     * Defines the breakpoint in pixles, at which the component will be rendered
+     * in a hoizontal layout. Default breakpoint is `700` pixels, which means
+     * when the screen size is smaller than `700px`, the component will automatically
+     * switch to a horizontal layout.
+     */
+    this.mobileBreakPoint = DEFAULT_MOBILE_BREAKPOINT;
+    /**
+     * Is used to render the component horizontally, and place
+     * the Dock items in a row.
+     */
+    this.useMobileLayout = false;
+    this.renderSeparator = () => {
+      return this.useMobileLayout ? null : h("span", { class: "footer-separator" });
+    };
+    this.renderDockItem = (item) => {
+      return (h("limel-dock-button", { class: {
+          'dock-item': true,
+          selected: item.selected,
+        }, item: item, expanded: this.expanded && !this.useMobileLayout, useMobileLayout: this.useMobileLayout }));
+    };
+    this.handleResize = () => {
+      if (window.innerWidth <= this.mobileBreakPoint) {
+        this.useMobileLayout = true;
+      }
+      else {
+        this.useMobileLayout = false;
+      }
+    };
+    this.toggleDockWidth = () => {
+      this.expanded = !this.expanded;
+      this.dockExpanded.emit(this.expanded);
+    };
+  }
+  componentDidLoad() {
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+    this.resizeObserver.observe(document.body);
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+  }
+  render() {
+    return (h(Host, { class: {
+        dock: true,
+        expanded: this.expanded,
+        'has-mobile-layout': this.useMobileLayout,
+      } },
+      h("nav", { "aria-label": this.accessibleLabel },
+        this.dockItems.map(this.renderDockItem),
+        this.renderSeparator(),
+        this.dockFooterItems.map(this.renderDockItem)),
+      this.renderExpandShrinkToggle()));
+  }
+  renderExpandShrinkToggle() {
+    if (this.useMobileLayout || !this.allowResize) {
+      return;
+    }
+    return (h("button", { class: {
+        'expand-shrink': true,
+        expanded: this.expanded,
+      }, onClick: this.toggleDockWidth },
+      h("limel-icon", { name: "angle_right" })));
+  }
+  static get is() { return "limel-dock"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dock.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dock.css"]
+  }; }
+  static get properties() { return {
+    "dockItems": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DockItem[]",
+        "resolved": "DockItem[]",
+        "references": {
+          "DockItem": {
+            "location": "import",
+            "path": "./dock.types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Items that are placed in the dock."
+      },
+      "defaultValue": "[]"
+    },
+    "dockFooterItems": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DockItem[]",
+        "resolved": "DockItem[]",
+        "references": {
+          "DockItem": {
+            "location": "import",
+            "path": "./dock.types"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Items that are placed at the bottom of the dock. (Or at the end in mobile\nlayout.)"
+      },
+      "defaultValue": "[]"
+    },
+    "accessibleLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "A label used to describe the purpose of the navigation element to users\nof assistive technologies, like screen readers. Especially useful when\nthere are multiple navigation elements in the user interface.\nExample value: \"Primary navigation\""
+      },
+      "attribute": "accessible-label",
+      "reflect": true
+    },
+    "expanded": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Defines the width of the component, when it loads.\n- `true`: shows both icons and labels of the Dock items.\n- `false`: only shows icons of the doc items, and displays\ntheir labels as tooltip.\n\nNote: when `useMobileLayout` is `true`, labels will always\nbe shown as tooltips. Read more below\u2026"
+      },
+      "attribute": "expanded",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "allowResize": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Set to `false` if you do not want to allow end-users\nto exapnd or shrink the Dock. This will hide the\nexpand/shrink button, and the only things that defines\nthe layout will be the `expanded` property, and\nthe `mobileBreakPoint`."
+      },
+      "attribute": "allow-resize",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "mobileBreakPoint": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Defines the breakpoint in pixles, at which the component will be rendered\nin a hoizontal layout. Default breakpoint is `700` pixels, which means\nwhen the screen size is smaller than `700px`, the component will automatically\nswitch to a horizontal layout."
+      },
+      "attribute": "mobile-break-point",
+      "reflect": true,
+      "defaultValue": "DEFAULT_MOBILE_BREAKPOINT"
+    }
+  }; }
+  static get states() { return {
+    "useMobileLayout": {}
+  }; }
+  static get events() { return [{
+      "method": "itemSelected",
+      "name": "itemSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when a dock item has been selected from the dock."
+      },
+      "complexType": {
+        "original": "DockItem",
+        "resolved": "DockItem",
+        "references": {
+          "DockItem": {
+            "location": "import",
+            "path": "./dock.types"
+          }
+        }
+      }
+    }, {
+      "method": "menuOpen",
+      "name": "menuOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when a dock menu is opened."
+      },
+      "complexType": {
+        "original": "DockItem",
+        "resolved": "DockItem",
+        "references": {
+          "DockItem": {
+            "location": "import",
+            "path": "./dock.types"
+          }
+        }
+      }
+    }, {
+      "method": "close",
+      "name": "close",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when the popover is closed."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "dockExpanded",
+      "name": "dockExpanded",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when a Dock is expanded or collapsed."
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/dock/dock.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/icon-button/icon-button.css

@@ -231,20 +231,9 @@
   z-index: 1;
 }
 
-@media (pointer: coarse) {
-  .mdc-icon-button:hover::before {
-    opacity: 0;
-  }
-}
 /**
- * @prop --icon-background-color: Background color when attribute `elevated` is set to `true`.
+ * @prop --icon-background-color: Background color of the button.
  */
-:host {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
 :host([hidden]) {
   display: none;
 }
@@ -253,25 +242,37 @@
   pointer-events: none;
 }
 
-:host([elevated]) .mdc-icon-button {
-  padding: 0.5625rem;
-}
-:host([elevated]) limel-icon {
+.mdc-icon-button {
   transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
-  box-shadow: var(--button-shadow-normal);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: 2.25rem;
+  width: 2.25rem;
+  padding: 0.125rem;
+  border-radius: 50%;
+  background-color: var(--icon-background-color, transparent);
 }
-:host([elevated]) limel-icon:hover {
+.mdc-icon-button:hover {
   box-shadow: var(--button-shadow-hovered);
 }
-:host([elevated]) limel-icon:active {
+.mdc-icon-button:active {
   box-shadow: var(--button-shadow-pressed);
   transform: translate3d(0, 0.08rem, 0);
 }
-
+:host([elevated]) .mdc-icon-button:not(:hover):not(:active):not(:focus-visible) {
+  box-shadow: var(--button-shadow-normal);
+}
 .mdc-icon-button:disabled {
   color: var(--mdc-theme-text-disabled-on-background);
 }
 .mdc-icon-button:focus-visible {
   box-shadow: var(--shadow-depth-8-focused);
   border-radius: 50%;
+}
+
+limel-icon {
+  width: 1.25rem;
+  height: 1.25rem;
 }

package/dist/collection/components/icon-button/icon-button.js

@@ -1,5 +1,4 @@
-import { MDCRipple } from '@material/ripple';
-import { Component, Element, h, Method, Prop } from '@stencil/core';
+import { Component, Element, h, Prop } from '@stencil/core';
 /**
  * @exampleComponent limel-example-icon-button-basic
  * @exampleComponent limel-example-icon-button-disabled
@@ -18,23 +17,6 @@ export class IconButton {
      * Set to `true` to disable the button.
      */
     this.disabled = false;
-    this.removeFocusedStyleOnClick =
-      this.removeFocusedStyleOnClick.bind(this);
-  }
-  /**
-   * If the button is hidden or inside another element that is animating
-   * while the button is instantiated, the hover-highlight may become
-   * misaligned. If so, calling this method will make the button re-layout
-   * the highlight.
-   */
-  async relayout() {
-    if (this.mdcIconButtonRipple) {
-      this.mdcIconButtonRipple.layout();
-    }
-  }
-  removeFocusedStyleOnClick() {
-    const mdcButton = this.host.shadowRoot.querySelector('.mdc-icon-button');
-    mdcButton.classList.remove('mdc-ripple-upgraded--background-focused');
   }
   connectedCallback() {
     this.initialize();
@@ -47,28 +29,14 @@ export class IconButton {
     if (!element) {
       return;
     }
-    this.mdcIconButtonRipple = new MDCRipple(element);
-    this.mdcIconButtonRipple.unbounded = true;
-    this.host.addEventListener('click', this.removeFocusedStyleOnClick);
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.mdcIconButtonRipple) === null || _a === void 0 ? void 0 : _a.destroy();
-    this.host.removeEventListener('click', this.removeFocusedStyleOnClick);
   }
   render() {
     const buttonAttributes = {};
     if (this.host.hasAttribute('tabindex')) {
       buttonAttributes.tabindex = this.host.getAttribute('tabindex');
     }
-    const iconAttributes = {};
-    if (this.elevated) {
-      iconAttributes.badge = true;
-      iconAttributes.size = 'small';
-    }
     return (h("button", Object.assign({ class: "mdc-icon-button", disabled: this.disabled, "aria-label": this.label, title: this.label }, buttonAttributes),
-      h("div", { class: "mdc-icon-button__ripple" }),
-      h("limel-icon", Object.assign({ name: this.icon }, iconAttributes))));
+      h("limel-icon", { name: this.icon, badge: true })));
   }
   static get is() { return "limel-icon-button"; }
   static get encapsulation() { return "shadow"; }
@@ -150,23 +118,5 @@ export class IconButton {
       "defaultValue": "false"
     }
   }; }
-  static get methods() { return {
-    "relayout": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "If the button is hidden or inside another element that is animating\nwhile the button is instantiated, the hover-highlight may become\nmisaligned. If so, calling this method will make the button re-layout\nthe highlight.",
-        "tags": []
-      }
-    }
-  }; }
   static get elementRef() { return "host"; }
 }

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

@@ -7,6 +7,7 @@ import { createRandomString } from '../../util/random-string';
 const helperTextId = 'tf-helper-text';
 /**
  * @exampleComponent limel-example-input-field-text
+ * @exampleComponent limel-example-input-field-placeholder
  * @exampleComponent limel-example-input-field-text-multiple
  * @exampleComponent limel-example-input-field-number
  * @exampleComponent limel-example-input-field-autocomplete
@@ -101,6 +102,7 @@ export class InputField {
     this.getContainerClassList = () => {
       const classList = {
         'mdc-text-field': true,
+        'mdc-text-field--no-label': !this.label,
         'mdc-text-field--outlined': true,
         'mdc-text-field--invalid': this.isInvalid(),
         'mdc-text-field--disabled': this.disabled || this.readonly,
@@ -127,7 +129,7 @@ export class InputField {
         return;
       }
       const type = this.type === 'urlAsText' ? 'text' : this.type;
-      return (h("input", Object.assign({}, properties, { type: type, pattern: this.pattern, onWheel: this.handleWheel, onKeyDown: this.onKeyDown, value: this.value })));
+      return (h("input", Object.assign({}, properties, { type: type, pattern: this.pattern, onWheel: this.handleWheel, onKeyDown: this.onKeyDown, value: this.value, placeholder: this.placeholder })));
     };
     this.renderTextarea = (properties) => {
       if (this.type !== 'textarea') {
@@ -252,6 +254,17 @@ export class InputField {
       }
       return this.limelInputField.shadowRoot.querySelector(elementName);
     };
+    this.renderLabel = (labelId) => {
+      const labelClassList = {
+        'mdc-floating-label': true,
+        'mdc-floating-label--float-above': !!this.value || this.isFocused || this.readonly,
+      };
+      if (!this.label) {
+        return;
+      }
+      return (h("span", { class: "mdc-notched-outline__notch" },
+        h("span", { class: labelClassList, id: labelId }, this.label)));
+    };
     this.renderLeadingIcon = () => {
       if (this.type === 'textarea') {
         return;
@@ -516,16 +529,11 @@ export class InputField {
       properties['aria-controls'] = helperTextId;
       properties['aria-describedby'] = helperTextId;
     }
-    const labelClassList = {
-      'mdc-floating-label': true,
-      'mdc-floating-label--float-above': !!this.value || this.isFocused || this.readonly,
-    };
     return [
       h("label", { class: this.getContainerClassList() },
         h("span", { class: "mdc-notched-outline", tabindex: "-1" },
           h("span", { class: "mdc-notched-outline__leading" }),
-          h("span", { class: "mdc-notched-outline__notch" },
-            h("span", { class: labelClassList, id: labelId }, this.label)),
+          this.renderLabel(labelId),
           h("span", { class: "mdc-notched-outline__trailing" })),
         this.renderLeadingIcon(),
         this.renderEmptyValueForReadonly(),
@@ -627,6 +635,23 @@ export class InputField {
       "attribute": "label",
       "reflect": true
     },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The placeholder text shown inside the input field, when the field is focused and empty."
+      },
+      "attribute": "placeholder",
+      "reflect": true
+    },
     "helperText": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/select/select.css

@@ -1726,6 +1726,10 @@
   left: 1rem;
 }
 
+.mdc-select__dropdown-icon-graphic {
+  transition: transform 0.2s ease;
+}
+
 .limel-select__selected-option {
   display: flex;
   align-items: center;
@@ -1786,15 +1790,6 @@
   font-size: 0.875rem;
   transform: translateY(-2.171875rem) scale(0.75);
 }
-.limel-select .mdc-select__dropdown-icon {
-  transition: box-shadow 0.2s ease;
-  border-radius: 50%;
-  background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='5' viewBox='7 10 10 5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' opacity='.54' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat 50%;
-  position: relative;
-  bottom: unset;
-  margin-left: 0;
-  margin-right: 0.25rem;
-}
 .limel-select .limel-select-trigger,
 .limel-select .limel-select__selected-option {
   width: 100%;
@@ -1822,7 +1817,10 @@
   color: var(--mdc-theme-primary);
 }
 .limel-select:not(.mdc-select--disabled) .limel-select-trigger.limel-select--focused .mdc-select__dropdown-icon {
-  color: var(--mdc-theme-primary);
+  fill: var(--mdc-theme-primary);
+}
+.limel-select:not(.mdc-select--disabled) .limel-select-trigger.limel-select--focused .mdc-select__dropdown-icon-graphic {
+  transform: rotate(-180deg);
 }
 .limel-select.limel-select--required .mdc-floating-label::after {
   content: "*";