@limetech/lime-elements 40.10.1 → 40.11.1

package/dist/types/components.d.ts

@@ -49,6 +49,7 @@ import { ContentType } from "./components/text-editor/prosemirror-adapter/editor
 import { EditorImage, EditorMetadata, ImageInserter, InlineImages, TriggerCharacter, TriggerEventDetail } from "./components/text-editor/text-editor.types";
 import { EditorUiType } from "./components/text-editor/types";
 import { Option } from "./components/select/option.types";
+import { SidePanelAction, SidePanelActionSelect, SidePanelEntry } from "./components/side-panel/side-panel.types";
 import { SpinnerSize } from "./components/spinner/spinner.types";
 import { Tab } from "./components/tab-bar/tab.types";
 import { Column, ColumnAggregate, ColumnSorter, RowData, RowReorderEvent, TableParams } from "./components/table/table.types";
@@ -98,6 +99,7 @@ export { ContentType } from "./components/text-editor/prosemirror-adapter/editor
 export { EditorImage, EditorMetadata, ImageInserter, InlineImages, TriggerCharacter, TriggerEventDetail } from "./components/text-editor/text-editor.types";
 export { EditorUiType } from "./components/text-editor/types";
 export { Option } from "./components/select/option.types";
+export { SidePanelAction, SidePanelActionSelect, SidePanelEntry } from "./components/side-panel/side-panel.types";
 export { SpinnerSize } from "./components/spinner/spinner.types";
 export { Tab } from "./components/tab-bar/tab.types";
 export { Column, ColumnAggregate, ColumnSorter, RowData, RowReorderEvent, TableParams } from "./components/table/table.types";
@@ -2119,6 +2121,11 @@ export namespace Components {
      * :::
      * The size and color of the icon is normally set in CSS, however there are a few
      * standard sizes defined that can be used with the `size` property.
+     * ## Accessibility
+     * An icon with an `aria-label`, an `aria-labelledby` or a `title` is an image
+     * for assistive technology, and that is its name. An icon with none of them is
+     * decorative, and is hidden from assistive technology. To change that, set
+     * `role` or `aria-hidden` on the icon yourself.
      * @exampleComponent limel-example-icon-name
      * @exampleComponent limel-example-icon-size
      * @exampleComponent limel-example-icon-color
@@ -3605,7 +3612,7 @@ export namespace Components {
     }
     /**
      * 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`,
      * `--side-panel-right-inset` and `--side-panel-bottom-inset` to keep parts of
@@ -3620,12 +3627,63 @@ export namespace Components {
      * The user can resize the panel by dragging its left edge, or with the arrow
      * keys. The panel emits `changeWidth` when a resize is finished.
      * 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
      * @private 
      */
     interface LimelSidePanel {
+        /**
+          * Buttons in the toolbar, to the right of the close button.
+          * @default []
+         */
+        "actions": SidePanelAction[];
         /**
           * Label of the close button. Shown as a tooltip and used as the accessible name.
           * @default 'Close'
@@ -3645,6 +3703,11 @@ export namespace Components {
           * @default 'Resize'
          */
         "resizeLabel": string;
+        /**
+          * 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.
+          * @default []
+         */
+        "stack": SidePanelEntry[];
     }
     /**
      * @exampleComponent limel-example-slider-basic
@@ -5753,6 +5816,11 @@ declare global {
      * :::
      * The size and color of the icon is normally set in CSS, however there are a few
      * standard sizes defined that can be used with the `size` property.
+     * ## Accessibility
+     * An icon with an `aria-label`, an `aria-labelledby` or a `title` is an image
+     * for assistive technology, and that is its name. An icon with none of them is
+     * decorative, and is hidden from assistive technology. To change that, set
+     * `role` or `aria-hidden` on the icon yourself.
      * @exampleComponent limel-example-icon-name
      * @exampleComponent limel-example-icon-size
      * @exampleComponent limel-example-icon-color
@@ -6590,11 +6658,12 @@ declare global {
     };
     interface HTMLLimelSidePanelElementEventMap {
         "close": void;
+        "selectAction": SidePanelActionSelect;
         "changeWidth": number;
     }
     /**
      * 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`,
      * `--side-panel-right-inset` and `--side-panel-bottom-inset` to keep parts of
@@ -6609,9 +6678,55 @@ declare global {
      * The user can resize the panel by dragging its left edge, or with the arrow
      * keys. The panel emits `changeWidth` when a resize is finished.
      * 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
      * @private 
      */
     interface HTMLLimelSidePanelElement extends Components.LimelSidePanel, HTMLStencilElement {
@@ -9251,6 +9366,11 @@ declare namespace LocalJSX {
      * :::
      * The size and color of the icon is normally set in CSS, however there are a few
      * standard sizes defined that can be used with the `size` property.
+     * ## Accessibility
+     * An icon with an `aria-label`, an `aria-labelledby` or a `title` is an image
+     * for assistive technology, and that is its name. An icon with none of them is
+     * decorative, and is hidden from assistive technology. To change that, set
+     * `role` or `aria-hidden` on the icon yourself.
      * @exampleComponent limel-example-icon-name
      * @exampleComponent limel-example-icon-size
      * @exampleComponent limel-example-icon-color
@@ -10818,7 +10938,7 @@ declare namespace LocalJSX {
     }
     /**
      * 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`,
      * `--side-panel-right-inset` and `--side-panel-bottom-inset` to keep parts of
@@ -10833,12 +10953,63 @@ declare namespace LocalJSX {
      * The user can resize the panel by dragging its left edge, or with the arrow
      * keys. The panel emits `changeWidth` when a resize is finished.
      * 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
      * @private 
      */
     interface LimelSidePanel {
+        /**
+          * Buttons in the toolbar, to the right of the close button.
+          * @default []
+         */
+        "actions"?: SidePanelAction[];
         /**
           * Label of the close button. Shown as a tooltip and used as the accessible name.
           * @default 'Close'
@@ -10861,11 +11032,20 @@ declare namespace LocalJSX {
           * Emitted when the close button is clicked, or when Escape is pressed and `closeOnEscape` is `true`.
          */
         "onClose"?: (event: LimelSidePanelCustomEvent<void>) => void;
+        /**
+          * Emitted when an action in the toolbar is clicked. The detail has the `id` of the action, or its `type` if it has no `id`, and the click event.
+         */
+        "onSelectAction"?: (event: LimelSidePanelCustomEvent<SidePanelActionSelect>) => void;
         /**
           * Label of the resize handle. Used as the accessible name.
           * @default 'Resize'
          */
         "resizeLabel"?: string;
+        /**
+          * 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.
+          * @default []
+         */
+        "stack"?: SidePanelEntry[];
     }
     /**
      * @exampleComponent limel-example-slider-basic
@@ -13097,6 +13277,11 @@ declare module "@stencil/core" {
              * :::
              * The size and color of the icon is normally set in CSS, however there are a few
              * standard sizes defined that can be used with the `size` property.
+             * ## Accessibility
+             * An icon with an `aria-label`, an `aria-labelledby` or a `title` is an image
+             * for assistive technology, and that is its name. An icon with none of them is
+             * decorative, and is hidden from assistive technology. To change that, set
+             * `role` or `aria-hidden` on the icon yourself.
              * @exampleComponent limel-example-icon-name
              * @exampleComponent limel-example-icon-size
              * @exampleComponent limel-example-icon-color
@@ -13595,7 +13780,7 @@ declare module "@stencil/core" {
             "limel-shortcut": LocalJSX.IntrinsicElements["limel-shortcut"] & JSXBase.HTMLAttributes<HTMLLimelShortcutElement>;
             /**
              * 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`,
              * `--side-panel-right-inset` and `--side-panel-bottom-inset` to keep parts of
@@ -13610,9 +13795,55 @@ declare module "@stencil/core" {
              * The user can resize the panel by dragging its left edge, or with the arrow
              * keys. The panel emits `changeWidth` when a resize is finished.
              * 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
              * @private 
              */
             "limel-side-panel": LocalJSX.IntrinsicElements["limel-side-panel"] & JSXBase.HTMLAttributes<HTMLLimelSidePanelElement>;

package/dist/types/interface.d.ts

@@ -35,6 +35,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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "40.10.1",
+  "version": "40.11.1",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/lime-elements/p-06cd9512.entry.js

@@ -1 +0,0 @@
-import{r as t,h as i,a as s}from"./p-BU9IJqli.js";import{g as r}from"./p-Dnt5w_Bp.js";class e{constructor(t){this.promises={},this.cache=t}async get(t,i=""){const s=await this.cache,r=this.getUrl(t,i);let e=await s.match(r);return e||(e=await this.fetchData(r,s)),this.getIcon(e)}async fetchData(t,i){let s=this.promises[t];return void 0===s&&(s=i.add(t),this.promises[t]=s),await s,i.match(t)}async getIcon(t){let i=await t.text();if(i=i.replaceAll("#000000","currentColor"),!this.validSvg(i))throw new Error("Invalid SVG");return i}validSvg(t){return"svg"===(new DOMParser).parseFromString(t,"image/svg+xml").documentElement.tagName.toLowerCase()}getUrl(t,i){let s=i||"";return i&&!i.endsWith("/")&&(s=`${i}/`),`${s}assets/icons/${t}.svg`}}class n{constructor(){this.cache={},this.resolveFunctions={}}async get(t,i=""){return this.cache[t]||(this.cache[t]=await this.getIcon(t,i)),this.cache[t]}getIcon(t,i){return new Promise((s=>{this.resolveFunctions[t]||(this.resolveFunctions[t]=[],this.fetchData(t,i)),this.resolveFunctions[t].push(s)}))}async fetchData(t,i){let s=i||"";i&&!i.endsWith("/")&&(s=`${i}/`);const r=await fetch(`${s}assets/icons/${t}.svg`);let e=await r.text();if(e=e.replaceAll("#000000","currentColor"),!this.validSvg(e))throw new Error("Invalid SVG");this.resolvePromises(t,e)}validSvg(t){return"svg"===(new DOMParser).parseFromString(t,"image/svg+xml").documentElement.tagName.toLowerCase()}resolvePromises(t,i){const s=this.resolveFunctions[t];for(const t of s)t(i);this.resolveFunctions[t]=null}}const a=function(){try{const t=caches.open("@limetech/lime-elements/icons");return new e(t)}catch(t){return new n}}(),o=class{constructor(i){t(this,i)}componentDidLoad(){this.loadIcon(this.name)}render(){return i("div",{key:"6d01432082e0272137562dd22ab309b75ce95504",class:"container"})}async loadIcon(t){if(void 0===t||""===t)return;const i=await this.loadSvg(t);this.renderSvg(i)}loadSvg(t){return a.get(t,r.iconPath)}renderSvg(t){const i=this.host.shadowRoot.querySelector("div.container");i&&(i.innerHTML=t,void 0!==this.svgClass&&this.applySvgClass(this.svgClass))}applySvgClass(t){var i;const s=null===(i=this.host.shadowRoot)||void 0===i?void 0:i.querySelector("svg");s&&(void 0===t?s.removeAttribute("class"):s.setAttribute("class",t))}get host(){return s(this)}static get watchers(){return{name:[{loadIcon:0}],svgClass:[{applySvgClass:0}]}}};o.style=":host{background-color:var(--icon-background-color, transparent);border-radius:50%;display:inline-block;line-height:0;box-sizing:border-box}:host svg{fill:currentColor;height:100%;pointer-events:none;width:100%}:host div{margin:var(--limel-icon-svg-margin, 0)}:host([hidden]){display:none}:host([size=x-small]){height:1rem !important;width:1rem !important}:host([size=small]){height:1.25rem !important;width:1.25rem !important}:host([size=medium]){height:1.5rem !important;width:1.5rem !important}:host([size=large]){height:1.75rem !important;width:1.75rem !important}:host([badge][size=x-small]){height:1.5rem !important;width:1.5rem !important;--limel-icon-svg-margin:0.25rem}:host([badge][size=small]){height:1.75rem !important;width:1.75rem !important;--limel-icon-svg-margin:0.25rem}:host([badge][size=medium]){height:2.5rem !important;width:2.5rem !important;--limel-icon-svg-margin:0.5rem}:host([badge][size=large]){height:2.75rem !important;width:2.75rem !important;--limel-icon-svg-margin:0.5rem}";export{o as limel_icon}

package/dist/lime-elements/p-566750e5.entry.js

@@ -1 +0,0 @@
-import{r as e,c as i,h as t,H as s,a as o}from"./p-BU9IJqli.js";import{E as r}from"./p-Bu6-QXrA.js";import{c as a}from"./p-BrjD-ITe.js";const n=[];function l(e){e.stopPropagation()}const d=class{constructor(t){e(this,t),this.close=i(this,"close",7),this.changeWidth=i(this,"changeWidth",7),this.closeLabel="Close",this.resizeLabel="Resize",this.closeOnEscape=!0,this.closeButtonId=a(),this.setBody=e=>{this.body=e,this.stopContentEventsInBody()},this.restoreFocus=()=>{const e=!document.activeElement||document.activeElement===document.body;if(this.host.isConnected||!e)return;const i=this.focusedBefore;this.focusedBefore=void 0,(null==i?void 0:i.isConnected)&&i.focus()},this.setPanel=e=>{this.panel=e},this.setMinLimit=e=>{this.minLimit=e},this.setMaxLimit=e=>{this.maxLimit=e},this.handleKeyDown=e=>{this.closeOnEscape&&e.key===r&&!e.defaultPrevented&&this.isLastOpened()&&(e.preventDefault(),this.close.emit())},this.handleChangeSize=e=>{this.rememberWidthBeforeResize(),this.setWidth(e.detail)},this.handleEndResize=()=>{if(!this.isResizing())return;const e=this.widthBeforeResize;this.widthBeforeResize=void 0,this.keepClampedWidth(),this.updateWidthRange(),this.emitWidthIfChanged(e)},this.handleSizeChange=e=>{e.every(this.isMeasured)||this.updateWidthRange()},this.isMeasured=e=>{var i;return e.target===this.panel&&Math.round(e.borderBoxSize[0].inlineSize)===(null===(i=this.widthRange)||void 0===i?void 0:i.now)},this.updateWidthRange=()=>{this.isResizing()||(this.widthRange=this.measureWidthRange())},this.handleClickClose=()=>{this.close.emit()}}connectedCallback(){n.push(this),window.addEventListener("keydown",this.handleKeyDown),this.rememberFocusedElement(),this.observeWidth()}componentDidLoad(){this.observeWidth(),this.moveFocusIntoPanel()}disconnectedCallback(){this.widthBeforeResize=void 0,this.stopObservingWidth(),window.removeEventListener("keydown",this.handleKeyDown),this.removeFromOpenPanels(),queueMicrotask(this.restoreFocus)}render(){return t(s,{key:"1c18f40fb45731bdf157d651d4e649446de5230b"},t("section",{key:"e8b41bded39732750ae3db9b1daf14dc742e1cb7",ref:this.setPanel,role:"dialog","aria-label":this.label,tabindex:"-1"},this.renderHandle(),t("div",{key:"3cba5523e0cbe45fa328daaa40136c063a8c3ac3",class:"content"},t("div",{key:"b5cbc1260b4e6f31ac789179ab4b5a0281b9133b",class:"toolbar"},this.renderCloseButton()),this.renderBody())),t("span",{key:"5fe872f05a6cc49027f84d71a765baa59a53adb9","data-limit":"min",ref:this.setMinLimit}),t("span",{key:"5042e7437e61ae5308e13b1a30f5df24747e2cdf","data-limit":"max",ref:this.setMaxLimit}))}renderCloseButton(){return t("button",{class:"close",id:this.closeButtonId,"aria-label":this.closeLabel,onClick:this.handleClickClose},t("limel-icon",{name:"multiply","aria-hidden":"true"}),t("limel-tooltip",{elementId:this.closeButtonId,label:this.closeLabel}))}renderHandle(){var e,i,s;return t("limel-resize-handle",{class:"handle",label:this.resizeLabel,value:null===(e=this.widthRange)||void 0===e?void 0:e.now,min:null===(i=this.widthRange)||void 0===i?void 0:i.min,max:null===(s=this.widthRange)||void 0===s?void 0:s.max,onChangeSize:this.handleChangeSize,onEndResize:this.handleEndResize})}renderBody(){return t("div",{class:"body",ref:this.setBody},t("slot",null))}stopContentEventsInBody(){var e,i;null===(e=this.body)||void 0===e||e.addEventListener("close",l),null===(i=this.body)||void 0===i||i.addEventListener("changeWidth",l)}stopContentEventAtHost(e){e.target!==this.host&&e.stopImmediatePropagation()}moveFocusIntoPanel(){this.panel.focus({preventScroll:!0})}rememberFocusedElement(){const e=function(){var e;let i=document.activeElement;for(;null===(e=null==i?void 0:i.shadowRoot)||void 0===e?void 0:e.activeElement;)i=i.shadowRoot.activeElement;return i}();e&&e!==document.body&&(this.focusedBefore=e)}removeFromOpenPanels(){const e=n.indexOf(this);-1!==e&&n.splice(e,1)}isLastOpened(){return n.at(-1)===this}setWidth(e){this.panel.style.width=`${e}px`}rememberWidthBeforeResize(){this.isResizing()||(this.widthBeforeResize=this.currentWidth())}isResizing(){return void 0!==this.widthBeforeResize}keepClampedWidth(){this.setWidth(this.currentWidth())}emitWidthIfChanged(e){const i=this.currentWidth();i!==e&&this.changeWidth.emit(i)}observeWidth(){if(this.stopObservingWidth(),this.panel){this.widthObserver=new ResizeObserver(this.handleSizeChange);for(const e of[this.panel,this.minLimit,this.maxLimit])e&&this.widthObserver.observe(e)}}stopObservingWidth(){var e;null===(e=this.widthObserver)||void 0===e||e.disconnect(),this.widthObserver=void 0}measureWidthRange(){const e=this.minLimit.offsetWidth,i=Math.max(e,this.maxLimit.offsetWidth);return{now:Math.round(this.currentWidth()),min:Math.round(e),max:Math.round(i)}}currentWidth(){return this.panel.offsetWidth}get host(){return o(this)}};d.style='@charset "UTF-8";:host(limel-side-panel){--_side-panel-width:var(--side-panel-width, 37.5rem);--_side-panel-min-width:var(--side-panel-min-width, 25rem);--_side-panel-top-inset:var(--side-panel-top-inset, 0px);--_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)}@keyframes show-side-panel{0%{transform:translate3d(12.5rem, 0, 0) scale(0.95);opacity:0}60%{opacity:1}100%{transform:translate3d(0, 0, 0) scale(1)}}section{position:absolute;z-index:var(--_side-panel-z-index);top:var(--_side-panel-top-inset);right:var(--_side-panel-right-inset);bottom:var(--_side-panel-bottom-inset);margin:0.5rem;display:flex;flex-direction:column;isolation:isolate;width:var(--_side-panel-width);min-width:min(var(--_side-panel-min-width), 100% - 1rem);max-width:min(100% - 1rem - 3rem, 60%);max-height:100%;border-radius:1rem;box-shadow:var(--shadow-depth-64);transform-origin:left center;transition:background-color 0.5s ease, transform 0.3s ease, opacity 0.2s ease, right 0.2s ease;animation:show-side-panel 0.46s cubic-bezier(0.08, 0.54, 0.06, 1.11) forwards}section:focus{outline:none}@media (prefers-reduced-motion){section{animation:none;transition:none}}.content{display:flex;flex-direction:column;flex-grow:1;min-height:0;overflow:hidden;border-radius:1rem;background-color:rgb(var(--contrast-100))}.toolbar{flex-shrink:0;display:flex;align-items:center;gap:0.25rem;box-sizing:border-box;min-height:2.375rem;padding:0.25rem 0.125rem;background-color:rgb(var(--contrast-300))}.close{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}.close:hover,.close:focus,.close:focus-visible{will-change:color, background-color, box-shadow, transform}.close:hover,.close:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.close:hover{box-shadow:var(--button-shadow-hovered)}.close: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)}.close:hover,.close:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.close:focus{outline:none}.close:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.close{isolation:isolate;position:relative;display:flex;justify-content:center;align-items:center;width:1.875rem;height:1.875rem;border-radius:50%}.close limel-icon{width:1.25rem;transition:transform 0.2s ease, color 0.2s ease}.close:before,.close:after{content:"";position:absolute;z-index:-1;inset:0;border-radius:50%;opacity:0;transition-delay:0.1s}.close:before{transition:transform 0.3s ease, opacity 0.3s ease;background-color:rgb(var(--color-orange-dark))}.close:after{transition:transform 0.6s ease, opacity 0.6s ease;background-color:rgb(var(--color-orange-light))}.close:hover limel-icon{color:rgb(var(--color-white));transform:scale(0.7) rotate(90deg)}.close:hover:before{opacity:1;transform:scale(0.4)}.close:hover:after{opacity:0.4;transform:scale(0.6)}.body{flex-grow:1;min-height:0;display:flex;flex-direction:column;overflow:hidden auto}.handle{position:absolute;z-index:1;top:calc(2.375rem + 0.5rem);bottom:1rem;left:calc(0.5rem / -2);width:0.5rem}[data-limit]{position:absolute;visibility:hidden;pointer-events:none;height:0}[data-limit=min]{width:min(var(--_side-panel-min-width), 100% - 1rem)}[data-limit=max]{width:min(100% - 1rem - 3rem, 60%)}';export{d as limel_side_panel}

package/dist/lime-elements/p-abcc451a.entry.js

@@ -1 +0,0 @@
-import{r as e,h as t,H as o,a as i}from"./p-BU9IJqli.js";import{m as a,r}from"./p-CIf8aGSd.js";import{d as n,g as s}from"./p-CgNJbSP4.js";const l=class{constructor(t){e(this,t),this.primary=!1,this.outlined=!1,this.disabled=!1,this.loading=!1,this.loadingFailed=!1,this.justLoaded=!1,this.filterClickWhenDisabled=e=>{this.disabled&&e.preventDefault()}}componentWillLoad(){a(this.host)}disconnectedCallback(){r(this.host)}render(){return t(o,{key:"0c29dc9e776e7f8847c3c2b72c901f4c48614fe7",onClick:this.filterClickWhenDisabled},t("button",{key:"4b4ce07c60d70ee0586ede555a354f44a8c28502",class:{loading:this.loading,"just-loaded":this.justLoaded&&!this.loadingFailed,"just-failed":this.justLoaded&&this.loadingFailed,outlined:this.outlined},disabled:this.disabled||this.loading,"aria-busy":this.loading?"true":"false","aria-live":"polite"},this.renderIcon(this.icon),this.renderLabel(),this.renderSpinner(),t("svg",{key:"ec49bd0ef8920fd33b6db0d5e7b1569f756c5eeb",viewBox:"0 0 30 30"},this.renderLoadingIcons())))}loadingWatcher(e,t){this.hasFinishedLoading(e,t)?this.handleLoadingFinished():e&&this.handleLoadingStarted()}hasFinishedLoading(e,t){return t&&!e}handleLoadingFinished(){this.justLoaded=!0,this.justLoadedTimeout=window.setTimeout((()=>{this.justLoaded=!1}),2e3)}handleLoadingStarted(){this.justLoaded=!1,window.clearTimeout(this.justLoadedTimeout)}renderLoadingIcons(){return this.loadingFailed?[t("line",{x1:"9",y1:"9",x2:"21",y2:"21"}),t("line",{x1:"21",y1:"9",x2:"9",y2:"21"})]:[t("line",{x1:"8",y1:"14",x2:"15",y2:"20"}),t("line",{x1:"23",y1:"9",x2:"14",y2:"20"})]}renderIcon(e){const o=s(e);if(!o)return;const i=n(e);let a;return this.label||i||console.warn("⚠️ Accessibility warning: `limel-button` has no `label` and its `icon` has no `title`. This creates an inaccessible button for screen reader users. Please add either a `label`, a `title` to the `icon`, or use a `limel-tooltip`. See https://lundalogik.github.io/lime-elements/versions/latest/#/component/limel-button/ for more information."),"object"==typeof e&&(a=e.color),t("limel-icon",Object.assign({},{role:"presentation",name:o,"aria-label":i,"aria-hidden":i?null:"true",style:{color:a}}))}renderLabel(){if(this.label)return t("span",{class:"label"},this.label)}renderSpinner(){if(this.loading)return t("limel-spinner",{limeBranded:!1})}static get delegatesFocus(){return!0}get host(){return i(this)}static get watchers(){return{loading:[{loadingWatcher:0}]}}};l.style='@charset "UTF-8";@keyframes reduced-presence{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.7)}}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded){animation:reduced-presence 0.3s ease forwards;transition:padding 0.3s ease, min-width 0.3s ease;transition-delay:0.3s;padding:0;min-width:0}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) .label{transition:font-size 0.8s ease;transition-delay:0.3s;font-size:0;opacity:0}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-icon,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-spinner,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) svg,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) .icon{transition:all 0.3s ease;transition-delay:0.3s;opacity:0;width:0;height:0}:host{display:inline-block}:host([hidden]){display:none}:host([aria-expanded=true]) button,:host([aria-expanded]:not([aria-expanded=false])) button{box-shadow:var(--button-shadow-inset-pressed) !important}button.mdc-button{font-family:inherit}button{--_primary-color:var(       --lime-primary-color,       var(--limel-theme-primary-color)   );display:flex;align-items:center;justify-content:center;gap:0.125rem;border:none;border-radius:0.4rem;padding-top:0;padding-right:var(--button-padding-right, 0.5rem);padding-bottom:0;padding-left:var(--button-padding-left, 0.5rem);min-height:2.25rem;width:100%}button:not(:disabled){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:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}button:not(:disabled):hover,button:not(:disabled):focus,button:not(:disabled):focus-visible{will-change:color, background-color, box-shadow, transform}button:not(:disabled):hover,button:not(:disabled):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button:not(:disabled):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)}button:not(:disabled):hover,button:not(:disabled):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not(:disabled):focus{outline:none}button:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:disabled{cursor:not-allowed}:host(limel-button[primary]) button:not(:disabled){color:var(--lime-on-primary-color, var(--limel-theme-on-primary-color));background-color:var(--_primary-color)}:host(limel-button[primary]) button:disabled{background-color:color-mix(in srgb, var(--_primary-color), transparent 80%)}:host(limel-button:not([primary])) button:not(:disabled){color:var(--_primary-color)}:host(limel-button:not([primary])) button:disabled.outlined{color:color-mix(in srgb, var(--_primary-color), transparent 60%);border-color:color-mix(in srgb, var(--_primary-color), transparent 70%)}:host(limel-button:not([primary])) button:disabled:not(.outlined){color:rgba(var(--contrast-1100), 0.37);background-color:rgba(var(--contrast-900), 0.1)}.label{font-size:var(--limel-theme-default-font-size);font-weight:600;letter-spacing:0.03125rem;padding:0 0.25rem}limel-spinner{position:absolute}limel-icon{width:1.25rem;flex-shrink:0;vertical-align:top}svg{height:1.875rem;opacity:0;pointer-events:none;position:absolute;width:1.875rem}svg line{stroke:rgb(var(--contrast-600));stroke-width:2}limel-icon,.label,limel-spinner,svg{transition:opacity 300ms ease-in-out}.loading limel-icon,.loading .label{opacity:0}.loading limel-spinner{opacity:1}.just-loaded limel-icon,.just-loaded .label,.just-failed limel-icon,.just-failed .label{opacity:0}.just-loaded svg,.just-failed svg{opacity:1}.just-failed{background-color:var(--limel-theme-error-color) !important;animation:shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both}.outlined{border:1px solid;border-color:var(--_primary-color)}@keyframes shake{10%,90%{transform:translate3d(-0.0625rem, 0, 0)}20%,80%{transform:translate3d(0.125rem, 0, 0)}30%,50%,70%{transform:translate3d(-0.1875rem, 0, 0)}40%,60%{transform:translate3d(0.1875rem, 0, 0)}}';export{l as limel_button}