@limetech/lime-elements 36.0.0-next.3 → 36.0.0-next.30

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

@@ -114,7 +114,7 @@ export class DatePicker {
     }
     const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
     return [
-      h("limel-input-field", Object.assign({ disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, helperText: this.helperText, required: this.required, value: this.formattedValue, onFocus: this.showCalendar, onBlur: this.hideCalendar, onClick: this.onInputClick, onChange: this.handleInputElementChange, ref: (el) => (this.textField = el) }, inputProps)),
+      h("limel-input-field", Object.assign({ disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, placeholder: this.placeholder, helperText: this.helperText, required: this.required, value: this.formattedValue, onFocus: this.showCalendar, onBlur: this.hideCalendar, onClick: this.onInputClick, onChange: this.handleInputElementChange, ref: (el) => (this.textField = el) }, inputProps)),
       h("limel-portal", { containerId: this.portalId, visible: this.showPortal, containerStyle: { 'z-index': dropdownZIndex } },
         h("limel-flatpickr-adapter", { format: this.internalFormat, language: this.language, type: this.type, value: this.value, ref: (el) => (this.datePickerCalendar = el), isOpen: this.showPortal, onChange: this.handleCalendarChange })),
     ];
@@ -298,6 +298,23 @@ export class DatePicker {
       "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/dock/dock-button/dock-button.css

@@ -0,0 +1,77 @@
+/*
+ * 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.
+ */
+.button {
+  all: unset;
+  cursor: pointer;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: var(--dock-item-height);
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  padding: 0 0.5rem;
+  min-width: var(--dock-item-height);
+  color: var(--limel-dock-item-text-color);
+  background-color: var(--dock-background-color);
+}
+.button:hover {
+  box-shadow: var(--button-shadow-hovered);
+}
+.button:active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+.button:focus {
+  outline: none;
+}
+.button:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+.button:hover {
+  z-index: 1;
+}
+.button.selected {
+  color: var(--limel-dock-item-text-color--selected);
+  background-color: var(--dock-item-background-color--selected, rgb(var(--contrast-200)));
+  box-shadow: var(--button-shadow-inset);
+}
+.button.selected:focus-visible {
+  box-shadow: var(--button-shadow-inset), var(--shadow-depth-8-focused);
+}
+.button.selected .icon {
+  color: var(--limel-dock-item-text--selected);
+}
+
+limel-popover {
+  display: grid;
+  grid-template-columns: 100%;
+}
+
+.text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding-left: 0.5rem;
+  padding-right: 0.75rem;
+}
+
+.icon {
+  flex-shrink: 0;
+  width: calc(var(--dock-item-height) - 1rem);
+  height: calc(var(--dock-item-height) - 1rem);
+  color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));
+}

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

@@ -0,0 +1,224 @@
+import { Component, Event, h, Prop, State, Watch, } from '@stencil/core';
+import { createRandomString } from '../../../util/random-string';
+/**
+ * @private
+ */
+export class DockButton {
+  constructor() {
+    /**
+     * When the dock is expanded or collapsed, dock items
+     * show labels and tooltips as suitable for the layout.
+     */
+    this.expanded = false;
+    /**
+     * When dock is using mobile layout, dock items
+     * show labels and tooltips as suitable for the layout.
+     */
+    this.useMobileLayout = false;
+    /**
+     * Indicated whether the popover that renders a component is open.
+     */
+    this.isOpen = false;
+    this.openPopover = (event) => {
+      event.stopPropagation();
+      this.isOpen = true;
+      this.menuOpen.emit(this.item);
+    };
+    this.setCustomComponentElement = (element) => {
+      this.customComponentElement = element;
+    };
+    this.onPopoverClose = () => {
+      this.isOpen = false;
+      this.close.emit();
+    };
+    this.handleClick = (event) => {
+      event.stopPropagation();
+      this.itemSelected.emit(this.item);
+    };
+    this.focusCustomComponentElement = () => {
+      var _a, _b, _c;
+      if ((_b = (_a = this.customComponentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.delegatesFocus) {
+        (_c = this.customComponentElement) === null || _c === void 0 ? void 0 : _c.focus();
+      }
+    };
+    this.tooltipId = createRandomString();
+  }
+  render() {
+    var _a, _b;
+    if ((_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.dockMenu) === null || _b === void 0 ? void 0 : _b.componentName) {
+      return this.renderPopover();
+    }
+    return this.renderButton(this.handleClick);
+  }
+  openWatcher() {
+    if (!this.isOpen) {
+      return;
+    }
+    const observer = new IntersectionObserver(this.focusCustomComponentElement);
+    observer.observe(this.customComponentElement);
+  }
+  renderPopover() {
+    var _a;
+    const CustomComponent = (_a = this.item) === null || _a === void 0 ? void 0 : _a.dockMenu.componentName;
+    return (h("limel-popover", { openDirection: this.useMobileLayout ? 'top' : 'right', open: this.isOpen || this.item.dockMenu.menuOpen, onClose: this.onPopoverClose },
+      this.renderButton(this.openPopover, 'trigger'),
+      h(CustomComponent, Object.assign({ ref: this.setCustomComponentElement }, (this.item.dockMenu.props || {}), { onClose: this.onPopoverClose }))));
+  }
+  renderButton(handleClick, slot) {
+    var _a;
+    return (h("button", { slot: slot, tabindex: "0", id: this.tooltipId, type: "button", class: {
+        button: true,
+        selected: (_a = this.item) === null || _a === void 0 ? void 0 : _a.selected,
+      }, onClick: handleClick },
+      this.renderIcon(),
+      this.renderLabel(),
+      this.renderTooltip()));
+  }
+  renderIcon() {
+    if (!this.item.icon) {
+      return;
+    }
+    return h("limel-icon", { name: this.item.icon, class: "icon" });
+  }
+  renderLabel() {
+    if (this.expanded) {
+      return h("span", { class: "text" }, this.item.label);
+    }
+  }
+  renderTooltip() {
+    if (!this.expanded && this.item.label) {
+      return (h("limel-tooltip", { elementId: this.tooltipId, label: this.item.label, helperLabel: this.item.helperLabel }));
+    }
+    if (this.expanded && this.item.helperLabel) {
+      return (h("limel-tooltip", { elementId: this.tooltipId, label: this.item.helperLabel }));
+    }
+  }
+  static get is() { return "limel-dock-button"; }
+  static get originalStyleUrls() { return {
+    "$": ["dock-button.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dock-button.css"]
+  }; }
+  static get properties() { return {
+    "item": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DockItem",
+        "resolved": "DockItem",
+        "references": {
+          "DockItem": {
+            "location": "import",
+            "path": "../dock.types"
+          }
+        }
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Item that is placed in the dock."
+      }
+    },
+    "expanded": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "When the dock is expanded or collapsed, dock items\nshow labels and tooltips as suitable for the layout."
+      },
+      "attribute": "expanded",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "useMobileLayout": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "When dock is using mobile layout, dock items\nshow labels and tooltips as suitable for the layout."
+      },
+      "attribute": "use-mobile-layout",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "isOpen": {}
+  }; }
+  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": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "isOpen",
+      "methodName": "openWatcher"
+    }]; }
+}

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

@@ -0,0 +1,111 @@
+/*
+ * 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:focus {
+  outline: none;
+}
+.expand-shrink:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+.expand-shrink.expanded {
+  justify-content: flex-end;
+}
+.expand-shrink.expanded limel-icon {
+  transform: rotateY(180deg);
+}
+.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));
+}