@limetech/lime-elements 35.1.0-next.9 → 36.0.0-next.11

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

@@ -0,0 +1,183 @@
+import { Component, Event, h, Prop, State } 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.onPopoverClose = () => {
+      this.isOpen = false;
+      this.close.emit();
+    };
+    this.handleClick = (event) => {
+      event.stopPropagation();
+      this.itemSelected.emit(this.item);
+    };
+    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);
+  }
+  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({}, (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": "close",
+      "name": "close",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when the popover is closed."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+}

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,280 @@
+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": "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/form/templates/common.js

@@ -41,6 +41,9 @@ export function findTitle(data, fieldSchema, formSchema) {
   if (!firstEntry) {
     return null;
   }
+  if (!subSchema.properties) {
+    return null;
+  }
   const [key, value] = firstEntry;
   return findTitle(value, subSchema.properties[key], formSchema);
 }

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;
 }