@limetech/lime-elements 40.8.1 → 40.9.0

package/dist/lime-elements/{p-8e9c927d.entry.js → p-783fd221.entry.js}

@@ -1 +1 @@
-import{r as t,c as o,h as e}from"./p-BU9IJqli.js";import{c as i}from"./p-BrjD-ITe.js";const r=class{constructor(r){t(this,r),this.itemSelected=o(this,"itemSelected",7),this.menuOpen=o(this,"menuOpen",7),this.close=o(this,"close",7),this.expanded=!1,this.useMobileLayout=!1,this.isOpen=!1,this.renderNotification=()=>{if(void 0!==this.item.badge)return e("limel-badge",{label:this.item.badge})},this.openPopover=t=>{t.stopPropagation(),this.isOpen=!0,this.menuOpen.emit(this.item)},this.setCustomComponentElement=t=>{this.customComponentElement=t},this.onPopoverClose=()=>{this.isOpen=!1,this.close.emit()},this.handleClick=t=>{t.stopPropagation(),this.itemSelected.emit(this.item)},this.focusCustomComponentElement=t=>{var o,e,i;const r=t.find((t=>t.target===this.customComponentElement));(null==r?void 0:r.isIntersecting)&&(null===(e=null===(o=this.customComponentElement)||void 0===o?void 0:o.shadowRoot)||void 0===e?void 0:e.delegatesFocus)&&(null===(i=this.customComponentElement)||void 0===i||i.focus())},this.getOpenDirection=()=>this.useMobileLayout?"top":"right",this.tooltipId=i()}render(){var t,o;return(null===(o=null===(t=this.item)||void 0===t?void 0:t.dockMenu)||void 0===o?void 0:o.componentName)?this.renderPopover():this.renderButton(this.handleClick)}openWatcher(){this.isOpen&&!this.intersectionObserver&&(this.intersectionObserver=new IntersectionObserver(this.focusCustomComponentElement),this.intersectionObserver.observe(this.customComponentElement))}disconnectedCallback(){var t;null===(t=this.intersectionObserver)||void 0===t||t.disconnect(),this.intersectionObserver=void 0}renderPopover(){var t;const o=null===(t=this.item)||void 0===t?void 0:t.dockMenu.componentName;return e("limel-popover",{openDirection:this.useMobileLayout?"top":"right-start",open:this.isOpen||this.item.dockMenu.menuOpen,onClose:this.onPopoverClose},this.renderButton(this.openPopover,"trigger"),e(o,Object.assign({ref:this.setCustomComponentElement},this.item.dockMenu.props||{},{onClose:this.onPopoverClose})))}renderButton(t,o){var i;return e("button",{slot:o,tabindex:"0",id:this.tooltipId,type:"button",onClick:t,"aria-live":"polite","aria-current":(null===(i=this.item)||void 0===i?void 0:i.selected)?"page":void 0},this.renderIcon(),this.renderLabel(),this.renderTooltip(),this.renderNotification())}renderIcon(){if(this.item.icon)return e("limel-icon",{name:this.item.icon,class:"icon"})}renderLabel(){return e("span",{class:"text"},this.item.label)}renderTooltip(){return!this.expanded&&this.item.label?e("limel-tooltip",{elementId:this.tooltipId,label:this.item.label,helperLabel:this.item.helperLabel,openDirection:this.getOpenDirection()}):this.expanded&&this.item.helperLabel?e("limel-tooltip",{elementId:this.tooltipId,label:this.item.helperLabel,openDirection:this.getOpenDirection()}):void 0}static get watchers(){return{isOpen:[{openWatcher:0}]}}};r.style='@charset "UTF-8";limel-dock-button button{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;isolation:isolate;position:relative;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-dock-item-text-color);background-color:var(--dock-background-color)}limel-dock-button button:hover,limel-dock-button button:focus,limel-dock-button button:focus-visible{will-change:color, background-color, box-shadow, transform}limel-dock-button button:hover,limel-dock-button button:focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}limel-dock-button button:hover{box-shadow:var(--button-shadow-hovered)}limel-dock-button button:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset-pressed)}limel-dock-button button:hover,limel-dock-button button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}limel-dock-button button:focus{outline:none}limel-dock-button button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-dock-button button{box-sizing:border-box;display:flex;align-items:center;width:100%;height:var(--dock-item-height);border-radius:0.375rem;font-size:var(--limel-theme-default-font-size);padding:0 0.5rem;min-width:var(--dock-item-height)}limel-dock-button button:hover{z-index:1}limel-dock-button button[aria-current=page]{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)}limel-dock-button button[aria-current=page]:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}limel-dock-button button[aria-current=page] .icon{color:var(--limel-dock-item-text--selected)}limel-popover{display:grid;grid-template-columns:100%}limel-popover button[slot=trigger][aria-expanded=true]{box-shadow:var(--button-shadow-inset)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:0.5rem;padding-right:0.75rem}limel-dock-button:not([expanded]) .text{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap}.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))}limel-badge{position:absolute;top:-0.125rem;right:-0.125rem}.icon{position:relative}.icon:before{text-align:center;pointer-events:none;position:absolute;inset:0;background-color:var(--dock-background-color, rgb(var(--contrast-100)));background-position:center;background-repeat:no-repeat;background-size:contain;background-image:var(--limel-custom-home-icon);content:var(--limel-custom-home-icon-enabler)}button[aria-current=page] .icon:before{background-color:var(--dock-item-background-color--selected, rgb(var(--contrast-200)))}';export{r as limel_dock_button}
+import{r as t,c as e,h as o}from"./p-BU9IJqli.js";import{c as i}from"./p-BrjD-ITe.js";const r=class{constructor(r){t(this,r),this.itemSelected=e(this,"itemSelected",7),this.menuOpen=e(this,"menuOpen",7),this.close=e(this,"close",7),this.expanded=!1,this.useMobileLayout=!1,this.isOpen=!1,this.renderNotification=()=>{if(void 0!==this.item.badge)return o("limel-badge",{label:this.item.badge})},this.openPopover=t=>{t.stopPropagation(),this.isOpen=!0,this.menuOpen.emit(this.item)},this.setCustomComponentElement=t=>{this.customComponentElement=t},this.onPopoverClose=()=>{this.isOpen=!1,this.close.emit()},this.handleClick=t=>{t.stopPropagation(),this.itemSelected.emit(this.item)},this.focusCustomComponentElement=t=>{var e,o,i;const r=t.find((t=>t.target===this.customComponentElement));(null==r?void 0:r.isIntersecting)&&(null===(o=null===(e=this.customComponentElement)||void 0===e?void 0:e.shadowRoot)||void 0===o?void 0:o.delegatesFocus)&&(null===(i=this.customComponentElement)||void 0===i||i.focus())},this.getOpenDirection=()=>this.useMobileLayout?"top":"right",this.tooltipId=i()}render(){var t,e;return(null===(e=null===(t=this.item)||void 0===t?void 0:t.dockMenu)||void 0===e?void 0:e.componentName)?this.renderPopover():this.renderButton(this.handleClick)}openWatcher(){this.isOpen&&!this.intersectionObserver&&(this.intersectionObserver=new IntersectionObserver(this.focusCustomComponentElement),this.intersectionObserver.observe(this.customComponentElement))}disconnectedCallback(){var t;null===(t=this.intersectionObserver)||void 0===t||t.disconnect(),this.intersectionObserver=void 0}renderPopover(){var t;const e=null===(t=this.item)||void 0===t?void 0:t.dockMenu.componentName;return o("limel-popover",{openDirection:this.useMobileLayout?"top":"right-start",open:this.isOpen||this.item.dockMenu.menuOpen,onClose:this.onPopoverClose},this.renderButton(this.openPopover,"trigger"),o(e,Object.assign({ref:this.setCustomComponentElement},this.item.dockMenu.props||{},{onClose:this.onPopoverClose})))}renderButton(t,e){var i;return o("button",{slot:e,tabindex:"0",id:this.tooltipId,type:"button",onClick:t,"aria-live":"polite","aria-current":(null===(i=this.item)||void 0===i?void 0:i.selected)?"page":void 0},this.renderIcon(),this.renderLabel(),this.renderTooltip(),this.renderNotification())}renderIcon(){if(this.item.icon)return o("limel-icon",{name:this.item.icon,class:"icon"})}renderLabel(){return o("span",{class:"text"},this.item.label)}renderTooltip(){return!this.expanded&&this.item.label?o("limel-tooltip",{elementId:this.tooltipId,label:this.item.label,helperLabel:this.item.helperLabel,openDirection:this.getOpenDirection()}):this.expanded&&this.item.helperLabel?o("limel-tooltip",{elementId:this.tooltipId,label:this.item.helperLabel,openDirection:this.getOpenDirection()}):void 0}static get watchers(){return{isOpen:[{openWatcher:0}]}}};r.style='@charset "UTF-8";limel-dock-button button{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;isolation:isolate;position:relative;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-dock-item-text-color);background-color:var(--dock-background-color)}limel-dock-button button:hover,limel-dock-button button:focus,limel-dock-button button:focus-visible{will-change:color, background-color, box-shadow, transform}limel-dock-button button:hover,limel-dock-button button:focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}limel-dock-button button:hover{box-shadow:var(--button-shadow-hovered)}limel-dock-button button:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset-pressed)}limel-dock-button button:hover,limel-dock-button button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}limel-dock-button button:focus{outline:none}limel-dock-button button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-dock-button button{box-sizing:border-box;display:flex;align-items:center;width:100%;height:var(--dock-item-height);border-radius:0.375rem;font-size:var(--limel-theme-default-font-size);padding:0 0.5rem;min-width:var(--dock-item-height)}limel-dock-button button:hover{z-index:1}limel-dock-button button[aria-current=page]{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)}limel-dock-button button[aria-current=page]:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}limel-dock-button button[aria-current=page] .icon{color:var(--limel-dock-item-text--selected)}limel-popover{display:grid;grid-template-columns:100%}limel-popover button[slot=trigger][aria-expanded=true]{box-shadow:var(--button-shadow-inset)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:0.5rem;padding-right:0.75rem}limel-dock-button:not([expanded]) .text{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap}.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))}limel-badge{position:absolute;top:-0.125rem;right:-0.125rem}limel-dock-button[use-mobile-layout][expanded]{flex:1 1 0;min-width:0}limel-dock-button[use-mobile-layout][expanded] button{flex-direction:column;justify-content:center;gap:0.125rem;height:auto;min-height:var(--dock-item-height);padding:0.375rem 0.25rem}limel-dock-button[use-mobile-layout][expanded] .text{box-sizing:border-box;max-width:100%;padding:0 0.125rem;font-size:0.6875rem;line-height:1.2;text-align:center}limel-dock-button[use-mobile-layout][expanded] limel-badge{right:auto;left:calc(50% + 0.375rem)}.icon{position:relative}.icon:before{text-align:center;pointer-events:none;position:absolute;inset:0;background-color:var(--dock-background-color, rgb(var(--contrast-100)));background-position:center;background-repeat:no-repeat;background-size:contain;background-image:var(--limel-custom-home-icon);content:var(--limel-custom-home-icon-enabler)}button[aria-current=page] .icon:before{background-color:var(--dock-item-background-color--selected, rgb(var(--contrast-200)))}';export{r as limel_dock_button}

package/dist/lime-elements/p-982a0f10.entry.js

@@ -0,0 +1 @@
+import{r as e,c as o,h as t,H as i}from"./p-BU9IJqli.js";import{t as a}from"./p-w3yKYfBQ.js";import"./p-ChagAaNf.js";const n=class{constructor(i){e(this,i),this.itemSelected=o(this,"itemSelected",7),this.menuOpen=o(this,"menuOpen",7),this.close=o(this,"close",7),this.dockExpanded=o(this,"dockExpanded",7),this.dockItems=[],this.dockFooterItems=[],this.expanded=!1,this.allowResize=!0,this.mobileBreakPoint=700,this.language="en",this.useMobileLayout=!1,this.renderSeparator=()=>this.useMobileLayout?null:t("span",{class:"footer-separator"}),this.renderDockItem=e=>t("limel-dock-button",{class:{"dock-item":!0,selected:e.selected},item:e,expanded:this.expanded,useMobileLayout:this.useMobileLayout}),this.handleResize=()=>{this.useMobileLayout=window.innerWidth<=this.mobileBreakPoint},this.toggleDockWidth=()=>{this.expanded=!this.expanded,this.dockExpanded.emit(this.expanded)}}watchMobileBreakPoint(){this.handleResize()}componentDidLoad(){this.resizeObserver=new ResizeObserver(this.handleResize),this.resizeObserver.observe(document.body)}disconnectedCallback(){this.resizeObserver.disconnect()}render(){return t(i,{key:"e65453b3695262055614dbfa5ed8661dc01ec453",class:{dock:!0,expanded:this.expanded,"has-mobile-layout":this.useMobileLayout}},t("nav",{key:"53e89c37b752969184959043fe790fa481acb464","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 t("button",{class:{"expand-shrink":!0,expanded:this.expanded},"aria-label":a.get("dock.show-labels",this.language),"aria-pressed":String(this.expanded),onClick:this.toggleDockWidth},t("limel-icon",{name:"angle_right"}))}static get watchers(){return{mobileBreakPoint:[{watchMobileBreakPoint:0}]}}};n.style='@charset "UTF-8";button.expand-shrink{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;box-sizing:border-box;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}button.expand-shrink:hover,button.expand-shrink:focus,button.expand-shrink:focus-visible{will-change:color, background-color, box-shadow, transform}button.expand-shrink:hover,button.expand-shrink:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}button.expand-shrink:hover{box-shadow:var(--button-shadow-hovered)}button.expand-shrink: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.expand-shrink:hover,button.expand-shrink:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button.expand-shrink:focus{outline:none}button.expand-shrink:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.expand-shrink{display:flex;justify-content:center;align-items:center;height:var(--dock-expand-shrink-button-height);padding:0 0.5rem;margin:var(--limel-dock-padding);border-radius:0.375rem}button.expand-shrink.expanded{justify-content:flex-end}button.expand-shrink.expanded limel-icon{transform:rotateY(180deg)}button.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))}:host(limel-dock){--badge-background-color:rgb(var(--color-red-default));--badge-text-color:rgb(var(--color-white));--dock-item-height:2.75rem;--limel-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;box-sizing:border-box;display:inline-flex;flex-direction:column;background-color:var(--dock-background-color, rgb(var(--contrast-100)));box-shadow:var(--shadow-depth-8);padding-top:var(--dock-padding-top);padding-right:var(--dock-padding-right);padding-bottom:var(--dock-padding-bottom);padding-left:var(--dock-padding-left)}:host(limel-dock:not(.has-mobile-layout)){height:100%;width:calc(var(--limel-dock-padding) * 2 + var(--dock-item-height) + var(--dock-padding-left, 0px) + var(--dock-padding-right, 0px))}:host(limel-dock:not(.has-mobile-layout)) nav{padding-bottom:calc(var(--limel-dock-padding) + 0.25rem)}:host(limel-dock.expanded:not(.has-mobile-layout)){width:calc(var(--dock-expanded-max-width, 10rem) + var(--dock-padding-left, 0px) + var(--dock-padding-right, 0px))}.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(--limel-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}limel-dock-button:first-of-type{--limel-custom-home-icon-enabler:var(--crm-custom-home-icon-enabler);--limel-custom-home-icon:var(--crm-custom-home-icon)}';export{n as limel_dock}

package/dist/types/components/dock/dock.d.ts

@@ -27,13 +27,18 @@ export declare class Dock {
      */
     accessibleLabel?: string;
     /**
-     * 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.
+     * Defines whether the labels of the dock items are shown, when the
+     * component loads.
+     * - `true`: shows both icons and labels of the dock items. In the
+     * vertical layout, the labels are placed beside the icons. In the
+     * horizontal mobile layout, they are placed below the icons, in small
+     * text that is truncated when there is not enough space.
+     * - `false`: only shows icons of the dock items, and displays
+     * their labels as tooltips.
      *
-     * Note: when `useMobileLayout` is `true`, labels will always
-     * be shown as tooltips. Read more below…
+     * In the horizontal mobile layout, there is no room for the button
+     * that expands and shrinks the dock, so end-users cannot change this
+     * there. Set `expanded` yourself, for example from a user setting.
      */
     expanded?: boolean;
     /**
@@ -79,6 +84,7 @@ export declare class Dock {
      */
     private useMobileLayout;
     private resizeObserver;
+    protected watchMobileBreakPoint(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     render(): any;

package/dist/types/components.d.ts

@@ -1462,7 +1462,7 @@ export namespace Components {
          */
         "dockItems": DockItem[];
         /**
-          * 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…
+          * Defines whether the labels of the dock items are shown, when the component loads. - `true`: shows both icons and labels of the dock items. In the vertical layout, the labels are placed beside the icons. In the horizontal mobile layout, they are placed below the icons, in small text that is truncated when there is not enough space. - `false`: only shows icons of the dock items, and displays their labels as tooltips.  In the horizontal mobile layout, there is no room for the button that expands and shrinks the dock, so end-users cannot change this there. Set `expanded` yourself, for example from a user setting.
           * @default false
          */
         "expanded"?: boolean;
@@ -8363,7 +8363,7 @@ declare namespace LocalJSX {
          */
         "dockItems"?: DockItem[];
         /**
-          * 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…
+          * Defines whether the labels of the dock items are shown, when the component loads. - `true`: shows both icons and labels of the dock items. In the vertical layout, the labels are placed beside the icons. In the horizontal mobile layout, they are placed below the icons, in small text that is truncated when there is not enough space. - `false`: only shows icons of the dock items, and displays their labels as tooltips.  In the horizontal mobile layout, there is no room for the button that expands and shrinks the dock, so end-users cannot change this there. Set `expanded` yourself, for example from a user setting.
           * @default false
          */
         "expanded"?: boolean;

package/package.json

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

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

@@ -1 +0,0 @@
-import{r as e,c as o,h as t,H as i}from"./p-BU9IJqli.js";import{t as a}from"./p-w3yKYfBQ.js";import"./p-ChagAaNf.js";const n=class{constructor(i){e(this,i),this.itemSelected=o(this,"itemSelected",7),this.menuOpen=o(this,"menuOpen",7),this.close=o(this,"close",7),this.dockExpanded=o(this,"dockExpanded",7),this.dockItems=[],this.dockFooterItems=[],this.expanded=!1,this.allowResize=!0,this.mobileBreakPoint=700,this.language="en",this.useMobileLayout=!1,this.renderSeparator=()=>this.useMobileLayout?null:t("span",{class:"footer-separator"}),this.renderDockItem=e=>t("limel-dock-button",{class:{"dock-item":!0,selected:e.selected},item:e,expanded:this.expanded&&!this.useMobileLayout,useMobileLayout:this.useMobileLayout}),this.handleResize=()=>{this.useMobileLayout=window.innerWidth<=this.mobileBreakPoint},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 t(i,{key:"3e2bd23bc0b5a49c71c6ebf309ce787d93d35c93",class:{dock:!0,expanded:this.expanded,"has-mobile-layout":this.useMobileLayout}},t("nav",{key:"11c81532a988da8be0dd72e404b5b190e1054ba7","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 t("button",{class:{"expand-shrink":!0,expanded:this.expanded},"aria-label":a.get("dock.show-labels",this.language),"aria-pressed":String(this.expanded),onClick:this.toggleDockWidth},t("limel-icon",{name:"angle_right"}))}};n.style='@charset "UTF-8";button.expand-shrink{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;box-sizing:border-box;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}button.expand-shrink:hover,button.expand-shrink:focus,button.expand-shrink:focus-visible{will-change:color, background-color, box-shadow, transform}button.expand-shrink:hover,button.expand-shrink:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}button.expand-shrink:hover{box-shadow:var(--button-shadow-hovered)}button.expand-shrink: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.expand-shrink:hover,button.expand-shrink:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button.expand-shrink:focus{outline:none}button.expand-shrink:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.expand-shrink{display:flex;justify-content:center;align-items:center;height:var(--dock-expand-shrink-button-height);padding:0 0.5rem;margin:var(--limel-dock-padding);border-radius:0.375rem}button.expand-shrink.expanded{justify-content:flex-end}button.expand-shrink.expanded limel-icon{transform:rotateY(180deg)}button.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))}:host(limel-dock){--badge-background-color:rgb(var(--color-red-default));--badge-text-color:rgb(var(--color-white));--dock-item-height:2.75rem;--limel-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;box-sizing:border-box;display:inline-flex;flex-direction:column;background-color:var(--dock-background-color, rgb(var(--contrast-100)));box-shadow:var(--shadow-depth-8);padding-top:var(--dock-padding-top);padding-right:var(--dock-padding-right);padding-bottom:var(--dock-padding-bottom);padding-left:var(--dock-padding-left)}:host(limel-dock:not(.has-mobile-layout)){height:100%;width:calc(var(--limel-dock-padding) * 2 + var(--dock-item-height) + var(--dock-padding-left, 0px) + var(--dock-padding-right, 0px))}:host(limel-dock:not(.has-mobile-layout)) nav{padding-bottom:calc(var(--limel-dock-padding) + 0.25rem)}:host(limel-dock.expanded){width:calc(var(--dock-expanded-max-width, 10rem) + var(--dock-padding-left, 0px) + var(--dock-padding-right, 0px))}.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(--limel-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}limel-dock-button:first-of-type{--limel-custom-home-icon-enabler:var(--crm-custom-home-icon-enabler);--limel-custom-home-icon:var(--crm-custom-home-icon)}';export{n as limel_dock}