@limetech/lime-elements 40.10.1 → 40.11.0

package/dist/collection/components/side-panel/side-panel.css

@@ -103,7 +103,8 @@
  * @prop --side-panel-top-inset: Distance from the top of the positioned ancestor. Defaults to `0px`.
  * @prop --side-panel-right-inset: Distance from the right of the positioned ancestor. Defaults to `0px`.
  * @prop --side-panel-bottom-inset: Distance from the bottom of the positioned ancestor. Defaults to `0px`.
- * @prop --side-panel-z-index: z-index of the panel. Defaults to `6`. Set `--dropdown-z-index` and `--popover-z-index` to higher values, so that dropdowns and popovers inside the panel are displayed on top of it.
+ * @prop --side-panel-header-text-color: Set by the panel on the header, do not set it. Content in the `header-actions` slot can use it to match the text color of the header, which is white when the header has a `color`.
+ * @prop --side-panel-z-index: z-index of the panel. Defaults to `6`. The panel sets `--dropdown-z-index`, `--popover-z-index` and `--tooltip-z-index` to one more than this for everything inside it, so that dropdowns, popovers and tooltips are displayed on top of the panel. To use other values, set these properties on the panel or on an ancestor.
  */
 :host(limel-side-panel) {
   --_side-panel-width: var(--side-panel-width, 37.5rem);
@@ -112,6 +113,9 @@
   --_side-panel-right-inset: var(--side-panel-right-inset, 0px);
   --_side-panel-bottom-inset: var(--side-panel-bottom-inset, 0px);
   --_side-panel-z-index: var(--side-panel-z-index, 6);
+  --_side-panel-dropdown-z-index: var(--dropdown-z-index);
+  --_side-panel-popover-z-index: var(--popover-z-index);
+  --_side-panel-tooltip-z-index: var(--tooltip-z-index);
 }
 
 @keyframes show-side-panel {
@@ -157,6 +161,18 @@ section:focus {
 }
 
 .content {
+  --dropdown-z-index: var(
+      --_side-panel-dropdown-z-index,
+      calc(var(--_side-panel-z-index) + 1)
+  );
+  --popover-z-index: var(
+      --_side-panel-popover-z-index,
+      calc(var(--_side-panel-z-index) + 1)
+  );
+  --tooltip-z-index: var(
+      --_side-panel-tooltip-z-index,
+      calc(var(--_side-panel-z-index) + 1)
+  );
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -177,6 +193,134 @@ section:focus {
   background-color: rgb(var(--contrast-300));
 }
 
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-left: auto;
+}
+.actions > * {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
+  cursor: pointer;
+  color: var(--limel-theme-on-surface-color);
+  background-color: transparent;
+}
+.actions > *:hover, .actions > *:focus, .actions > *:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
+.actions > *:hover, .actions > *:focus-visible {
+  transform: translate3d(0, 0.01rem, 0);
+  color: var(--limel-theme-on-surface-color);
+  background-color: var(--lime-elevated-surface-background-color);
+}
+.actions > *:hover {
+  box-shadow: var(--button-shadow-hovered);
+}
+.actions > *:active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
+  box-shadow: var(--button-shadow-pressed);
+}
+.actions > *:hover, .actions > *:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
+}
+.actions > *:focus {
+  outline: none;
+}
+.actions > *:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+.actions > * {
+  isolation: isolate;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 1.875rem;
+  height: 1.875rem;
+  border-radius: 50%;
+}
+.actions > * limel-icon {
+  width: 1.25rem;
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+.actions > * {
+  --_side-panel-action-background-color: rgb(var(--contrast-300));
+}
+.actions > *:hover, .actions > *:focus-visible {
+  --_side-panel-action-background-color: var(
+      --lime-elevated-surface-background-color
+  );
+}
+.actions > *:hover limel-icon {
+  color: var(--mdc-theme-primary);
+}
+
+.newTab limel-icon {
+  transition: transform 0.2s ease;
+  transform: scale(0.8);
+  z-index: 3;
+}
+.newTab:before {
+  z-index: 2;
+}
+.newTab:after {
+  z-index: 1;
+}
+.newTab:before, .newTab:after {
+  content: "";
+  transition: transform 0.2s ease, outline-color 0.2s ease;
+  position: absolute;
+  width: 0.875rem;
+  height: 0.875rem;
+  outline: 1.5px solid rgb(var(--contrast-900));
+  border-radius: 1px;
+  background-color: var(--_side-panel-action-background-color);
+}
+.newTab:hover limel-icon {
+  transform: translate3d(-0.1rem, 0.1rem, 0) scale(1);
+}
+.newTab:hover:before {
+  transform: translate3d(0.125rem, -0.125rem, 0);
+  outline-color: rgb(var(--contrast-1000));
+  box-shadow: var(--shadow-depth-8);
+}
+.newTab:hover:after {
+  transform: translate3d(-0.15rem, 0.15rem, 0) scale(0.9);
+  outline-color: rgb(var(--contrast-700));
+}
+
+.expand:after {
+  transition: transform 0.2s ease;
+  content: "";
+  position: absolute;
+  z-index: 1;
+  background-color: var(--_side-panel-action-background-color);
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.expand:hover:after {
+  transform: scale(0.5);
+}
+.expand:hover limel-icon {
+  transform: scale(1.18);
+}
+
 .close {
   appearance: none;
   background: none;
@@ -267,6 +411,37 @@ section:focus {
   transform: scale(0.6);
 }
 
+.header {
+  --side-panel-header-text-color: var(--limel-theme-on-surface-color);
+  --header-top-right-left-border-radius: 0;
+  flex-shrink: 0;
+  min-height: calc(1.25rem + 1rem + 2 * 0.125rem);
+  padding: 0.125rem 0.75rem 0.125rem 0.25rem;
+  background-color: var(--header-background-color, rgb(var(--contrast-200)));
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-shrink: 0;
+  max-width: 50%;
+  overflow: hidden;
+  box-sizing: border-box;
+  max-height: calc(1.25rem + 1rem + 2 * 0.25rem);
+  padding: 0.25rem;
+  margin: -0.25rem -0.25rem -0.25rem auto;
+  color: var(--side-panel-header-text-color);
+  text-shadow: none;
+}
+
+.has-color {
+  --side-panel-header-text-color: rgb(var(--color-white));
+  --header-heading-color: var(--side-panel-header-text-color);
+  --header-subheading-color: var(--side-panel-header-text-color);
+  text-shadow: 0 0 1px rgba(var(--color-black), 0.2), 0 0 0.25rem rgba(var(--color-black), 0.2);
+}
+
 .body {
   flex-grow: 1;
   min-height: 0;

package/dist/collection/components/side-panel/side-panel.js

@@ -7,12 +7,22 @@ import { createRandomString } from "../../util/random-string";
  * Escape.
  */
 const openPanels = [];
+// The same icons as the navigation buttons in the Lime CRM web client.
+const ACTION_ICONS = {
+    newTab: 'up_right_arrow',
+    expand: 'expand',
+};
+function getLinkTarget(action) {
+    if (action.href && action.type === 'newTab') {
+        return '_blank';
+    }
+}
 function stopEvent(event) {
     event.stopPropagation();
 }
 /**
  * A resizable panel that is displayed on top of the right side of the page.
- * The content is placed in the default slot, below a toolbar with a close button.
+ * The content is placed in the default slot, below a toolbar and a header.
  *
  * The panel is positioned relative to its nearest positioned ancestor. Set
  * `position: relative` on that element. Use `--side-panel-top-inset`,
@@ -33,9 +43,68 @@ function stopEvent(event) {
  *
  * See the examples for how closing and resizing work in detail.
  *
+ * ## Header
+ *
+ * The header shows the heading, subheading and icon of the last entry in
+ * `stack`. When the entry has a `color`, the header gets that background color,
+ * and the headings are white with a text shadow. When `stack` is empty, the
+ * panel has no header.
+ *
+ * Put controls for the header, for example a follow button or a menu, in the
+ * `header-actions` slot. They are shown at the right end of the header. When
+ * `stack` is empty, there is no header, and the slot content is not shown.
+ *
+ * The slot is for small controls. It is at most half as wide as the header,
+ * and at most as tall as the heading and subheading together. Larger content
+ * is cut off, so that the header keeps its size.
+ *
+ * The slot content is not tied to an entry in `stack`. When the last entry
+ * changes, the consumer must also change the slot content.
+ *
+ * The slot content keeps its own colors. Use `--side-panel-header-text-color`
+ * to match the text color of the header. It is white when the header has a
+ * `color`. It can also be used as the `color` of an `Icon`.
+ *
+ * ## Actions
+ *
+ * The toolbar has a close button on the left. Other buttons are set with
+ * `actions`, and are shown on the right. The `type` of an action decides its
+ * icon. When the user clicks an action, the panel emits `selectAction` with the
+ * `id` of the action and the click event. The consumer decides what the action
+ * does.
+ *
+ * An action with an `href` is a link, so the user can open it in a new tab.
+ * To handle the navigation in another way, for example with the router of the
+ * application, call `preventDefault` on the click event in `selectAction`. Do
+ * this only for a plain click with the primary button. Let the browser handle
+ * all other clicks, so that Ctrl-click and Cmd-click still open the link in a
+ * new tab:
+ *
+ * ```ts
+ * function handleSelectAction(event: CustomEvent<SidePanelActionSelect>) {
+ *     const click = event.detail.event;
+ *     const isPlainClick =
+ *         click.button === 0 &&
+ *         !click.metaKey &&
+ *         !click.ctrlKey &&
+ *         !click.shiftKey &&
+ *         !click.altKey;
+ *     if (!isPlainClick) {
+ *         return;
+ *     }
+ *
+ *     click.preventDefault();
+ *     router.navigate(event.detail.id);
+ * }
+ * ```
+ *
  * @exampleComponent limel-example-side-panel-basic
  * @exampleComponent limel-example-side-panel-insets
  * @exampleComponent limel-example-side-panel-escape
+ * @exampleComponent limel-example-side-panel-actions
+ * @exampleComponent limel-example-side-panel-header-actions
+ * @slot - Content of the panel
+ * @slot header-actions - Small controls at the right end of the header. Content that is larger than half the header width or the height of the headings is cut off.
  * @private
  */
 export class SidePanel {
@@ -45,6 +114,16 @@ export class SidePanel {
          * name.
          */
         this.closeLabel = 'Close';
+        /**
+         * The panels in the stack, outermost first. The last entry is the panel
+         * that is displayed. Its heading, subheading and icon are shown in the
+         * header.
+         */
+        this.stack = [];
+        /**
+         * Buttons in the toolbar, to the right of the close button.
+         */
+        this.actions = [];
         /**
          * Label of the resize handle. Used as the accessible name.
          */
@@ -56,9 +135,28 @@ export class SidePanel {
          */
         this.closeOnEscape = true;
         this.closeButtonId = createRandomString();
-        this.setBody = (element) => {
-            this.body = element;
-            this.stopContentEventsInBody();
+        this.actionIdPrefix = createRandomString();
+        this.renderAction = (action, index) => {
+            const id = `${this.actionIdPrefix}-${index}`;
+            const Tag = action.href ? 'a' : 'button';
+            return (h(Tag, { class: action.type, id: id, href: action.href, target: getLinkTarget(action), "aria-label": action.label, onClick: this.handleClickAction(action) }, h("limel-icon", { name: ACTION_ICONS[action.type], "aria-hidden": "true" }), h("limel-tooltip", { elementId: id, label: action.label, helperLabel: action.helperLabel })));
+        };
+        /**
+         * Components in the content can emit events with the same names as the
+         * panel's events, for example `close` from `limel-dialog` or
+         * `limel-collapsible-section`. Events from slotted content pass through the
+         * element around the slot before they reach the host, so they are stopped
+         * there. The panel's own events are dispatched on the host, so they are not
+         * affected.
+         *
+         * Keep the event names in sync with {@link SidePanel.stopContentEventAtHost}.
+         *
+         * @param element - the element around a slot
+         */
+        this.stopContentEvents = (element) => {
+            // Adding the same listener again has no effect, so re-renders are safe.
+            element === null || element === void 0 ? void 0 : element.addEventListener('close', stopEvent);
+            element === null || element === void 0 ? void 0 : element.addEventListener('changeWidth', stopEvent);
         };
         // Moving the panel in the DOM also disconnects it. It is then connected
         // again before the microtask runs. Focus only returns when it was lost with
@@ -130,6 +228,13 @@ export class SidePanel {
             }
             this.widthRange = this.measureWidthRange();
         };
+        this.handleClickAction = (action) => (event) => {
+            var _a;
+            this.selectAction.emit({
+                id: (_a = action.id) !== null && _a !== void 0 ? _a : action.type,
+                event: event,
+            });
+        };
         this.handleClickClose = () => {
             this.close.emit();
         };
@@ -152,37 +257,35 @@ export class SidePanel {
         queueMicrotask(this.restoreFocus);
     }
     render() {
-        return (h(Host, { key: '1c18f40fb45731bdf157d651d4e649446de5230b' }, h("section", { key: 'e8b41bded39732750ae3db9b1daf14dc742e1cb7', ref: this.setPanel, role: "dialog", "aria-label": this.label, tabindex: "-1" }, this.renderHandle(), h("div", { key: '3cba5523e0cbe45fa328daaa40136c063a8c3ac3', class: "content" }, h("div", { key: 'b5cbc1260b4e6f31ac789179ab4b5a0281b9133b', class: "toolbar" }, this.renderCloseButton()), this.renderBody())), h("span", { key: '5fe872f05a6cc49027f84d71a765baa59a53adb9', "data-limit": "min", ref: this.setMinLimit }), h("span", { key: '5042e7437e61ae5308e13b1a30f5df24747e2cdf', "data-limit": "max", ref: this.setMaxLimit })));
+        return (h(Host, { key: 'debf8ec5b8e179cbb69c2d87fdd0db7089707dfb' }, h("section", { key: 'd6165d2ff25cad3b9bebe807065b6a83bca24da2', ref: this.setPanel, role: "dialog", "aria-label": this.label, tabindex: "-1" }, this.renderHandle(), h("div", { key: 'b95d937af7fc5799abee8a6042ea2be6087c1b0b', class: "content" }, h("div", { key: 'e258c9475715b00fd1e56a9975db6d0f7e5d19fc', class: "toolbar" }, this.renderCloseButton(), this.renderActions()), this.renderHeader(), this.renderBody())), h("span", { key: '6b7793d7c02f632d630ac4936524104f81a10e23', "data-limit": "min", ref: this.setMinLimit }), h("span", { key: '6196bc2f8549ddd9b8c8bb43bcf221a43f62c98a', "data-limit": "max", ref: this.setMaxLimit })));
     }
     // A native button and not `limel-icon-button`, because the hover animation
     // styles the icon, which is inside the shadow root of `limel-icon-button`.
     renderCloseButton() {
         return (h("button", { class: "close", id: this.closeButtonId, "aria-label": this.closeLabel, onClick: this.handleClickClose }, h("limel-icon", { name: "multiply", "aria-hidden": "true" }), h("limel-tooltip", { elementId: this.closeButtonId, label: this.closeLabel })));
     }
+    renderActions() {
+        if (this.actions.length === 0) {
+            return;
+        }
+        return (h("div", { class: "actions" }, this.actions.map((action, index) => this.renderAction(action, index))));
+    }
+    renderHeader() {
+        const entry = this.stack.at(-1);
+        if (!entry) {
+            return;
+        }
+        return (h("limel-header", { class: { header: true, 'has-color': !!entry.color }, style: { '--header-background-color': entry.color }, icon: entry.icon, heading: entry.heading, subheading: entry.subheading }, h("div", { class: "header-actions", slot: "actions", ref: this.stopContentEvents }, h("slot", { name: "header-actions" }))));
+    }
     renderHandle() {
         var _a, _b, _c;
         return (h("limel-resize-handle", { class: "handle", label: this.resizeLabel, value: (_a = this.widthRange) === null || _a === void 0 ? void 0 : _a.now, min: (_b = this.widthRange) === null || _b === void 0 ? void 0 : _b.min, max: (_c = this.widthRange) === null || _c === void 0 ? void 0 : _c.max, onChangeSize: this.handleChangeSize, onEndResize: this.handleEndResize }));
     }
     renderBody() {
-        return (h("div", { class: "body", ref: this.setBody }, h("slot", null)));
-    }
-    /**
-     * Components in the content can emit events with the same names as the
-     * panel's events, for example `close` from `limel-dialog` or
-     * `limel-collapsible-section`. Events from slotted content pass through
-     * `.body` before they reach the host, so they are stopped there. The panel's
-     * own events are dispatched on the host, so they are not affected.
-     *
-     * Keep the event names in sync with {@link SidePanel.stopContentEventAtHost}.
-     */
-    stopContentEventsInBody() {
-        var _a, _b;
-        // Adding the same listener again has no effect, so re-renders are safe.
-        (_a = this.body) === null || _a === void 0 ? void 0 : _a.addEventListener('close', stopEvent);
-        (_b = this.body) === null || _b === void 0 ? void 0 : _b.addEventListener('changeWidth', stopEvent);
+        return (h("div", { class: "body", ref: this.stopContentEvents }, h("slot", null)));
     }
     /**
-     * Fallback for {@link SidePanel.stopContentEventsInBody}.
+     * Fallback for {@link SidePanel.stopContentEvents}.
      * Stops `close` and `changeWidth` events that reach the host from any
      * element other than the host.
      *
@@ -334,6 +437,56 @@ export class SidePanel {
                 "attribute": "close-label",
                 "defaultValue": "'Close'"
             },
+            "stack": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SidePanelEntry[]",
+                    "resolved": "SidePanelEntry[]",
+                    "references": {
+                        "SidePanelEntry": {
+                            "location": "import",
+                            "path": "./side-panel.types",
+                            "id": "src/components/side-panel/side-panel.types.ts::SidePanelEntry",
+                            "referenceLocation": "SidePanelEntry"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The panels in the stack, outermost first. The last entry is the panel\nthat is displayed. Its heading, subheading and icon are shown in the\nheader."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "actions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SidePanelAction[]",
+                    "resolved": "SidePanelAction[]",
+                    "references": {
+                        "SidePanelAction": {
+                            "location": "import",
+                            "path": "./side-panel.types",
+                            "id": "src/components/side-panel/side-panel.types.ts::SidePanelAction",
+                            "referenceLocation": "SidePanelAction"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Buttons in the toolbar, to the right of the close button."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
             "resizeLabel": {
                 "type": "string",
                 "mutable": false,
@@ -397,6 +550,28 @@ export class SidePanel {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "selectAction",
+                "name": "selectAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an action in the toolbar is clicked. The detail has the `id`\nof the action, or its `type` if it has no `id`, and the click event."
+                },
+                "complexType": {
+                    "original": "SidePanelActionSelect",
+                    "resolved": "SidePanelActionSelect",
+                    "references": {
+                        "SidePanelActionSelect": {
+                            "location": "import",
+                            "path": "./side-panel.types",
+                            "id": "src/components/side-panel/side-panel.types.ts::SidePanelActionSelect",
+                            "referenceLocation": "SidePanelActionSelect"
+                        }
+                    }
+                }
             }, {
                 "method": "changeWidth",
                 "name": "changeWidth",

package/dist/collection/components/side-panel/side-panel.types.js

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

package/dist/collection/interface.js

@@ -34,6 +34,7 @@ export * from './components/picker/searcher.types';
 export * from './components/picker/value.types';
 export * from './components/progress-flow/progress-flow.types';
 export * from './components/select/option.types';
+export * from './components/side-panel/side-panel.types';
 export * from './components/spinner/spinner.types';
 export * from './components/tab-bar/tab.types';
 export * from './components/tab-panel/tab-panel.types';