UNPKG

@limetech/lime-elements

Version:
2 lines 5.03 kB
import{r as e,c as o,h as i,H as t}from"./p-288f0842.js";const r='@charset "UTF-8";: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(\n --dock-item-text-color,\n rgb(var(--contrast-1100))\n );--limel-dock-item-text-color--selected:var(\n --dock-item-text-color--selected,\n rgb(var(--contrast-1300))\n );isolation:isolate;position:relative;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))}:host(limel-dock:not(.has-mobile-layout)) nav{padding-bottom:calc(var(--limel-dock-padding) + 0.25rem)}:host(limel-dock.expanded){width:var(--dock-expanded-max-width, max-content)}.footer-separator{margin-top:auto;justify-self:flex-end}nav{box-sizing:border-box;display:inline-flex;flex-direction:column;gap:0.375rem;flex-grow:1;padding:var(--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)}.expand-shrink{all:unset;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;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}.expand-shrink:hover,.expand-shrink:focus,.expand-shrink:focus-visible{will-change:color, background-color, box-shadow, transform}.expand-shrink:hover,.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)}.expand-shrink:hover{box-shadow:var(--button-shadow-hovered)}.expand-shrink:active{--limel-clickable-transform-timing-function:cubic-bezier(\n 0.83,\n -0.15,\n 0.49,\n 1.16\n );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.expand-shrink:hover,.expand-shrink:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.expand-shrink:focus{outline:none}.expand-shrink:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.expand-shrink.expanded{justify-content:flex-end}.expand-shrink.expanded limel-icon{transform:rotateY(180deg)}.expand-shrink limel-icon{width:calc(var(--dock-expand-shrink-button-height) - 0.25rem);color:var(--dock-item-icon-color, var(--limel-dock-item-text-color))}';const n=700;const a=class{constructor(t){e(this,t);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.renderSeparator=()=>this.useMobileLayout?null:i("span",{class:"footer-separator"});this.renderDockItem=e=>i("limel-dock-button",{class:{"dock-item":true,selected:e.selected},item:e,expanded:this.expanded&&!this.useMobileLayout,useMobileLayout:this.useMobileLayout});this.handleResize=()=>{if(window.innerWidth<=this.mobileBreakPoint){this.useMobileLayout=true}else{this.useMobileLayout=false}};this.toggleDockWidth=()=>{this.expanded=!this.expanded;this.dockExpanded.emit(this.expanded)};this.dockItems=[];this.dockFooterItems=[];this.accessibleLabel=undefined;this.expanded=false;this.allowResize=true;this.mobileBreakPoint=n;this.useMobileLayout=false}componentDidLoad(){this.resizeObserver=new ResizeObserver(this.handleResize);this.resizeObserver.observe(document.body)}disconnectedCallback(){this.resizeObserver.disconnect()}render(){return i(t,{class:{dock:true,expanded:this.expanded,"has-mobile-layout":this.useMobileLayout}},i("nav",{"aria-label":this.accessibleLabel},this.dockItems.map(this.renderDockItem),this.renderSeparator(),this.dockFooterItems.map(this.renderDockItem)),this.renderExpandShrinkToggle())}renderExpandShrinkToggle(){if(this.useMobileLayout||!this.allowResize){return}return i("button",{class:{"expand-shrink":true,expanded:this.expanded},onClick:this.toggleDockWidth},i("limel-icon",{name:"angle_right"}))}};a.style=r;export{a as limel_dock}; //# sourceMappingURL=p-cbbe129b.entry.js.map