@limetech/lime-elements/dist/cjs/limel-dock.cjs.entry.js

Lime Elements

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-174a078a.js');

const dockCss = "@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 DEFAULT_MOBILE_BREAKPOINT = 700;
const Dock = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.itemSelected = index.createEvent(this, "itemSelected", 7);
    this.menuOpen = index.createEvent(this, "menuOpen", 7);
    this.close = index.createEvent(this, "close", 7);
    this.dockExpanded = index.createEvent(this, "dockExpanded", 7);
    this.renderSeparator = () => {
      return this.useMobileLayout ? null : index.h("span", { class: "footer-separator" });
    };
    this.renderDockItem = (item) => {
      return (index.h("limel-dock-button", { class: {
          'dock-item': true,
          selected: item.selected,
        }, item: item, expanded: this.expanded && !this.useMobileLayout, useMobileLayout: this.useMobileLayout }));
    };
    this.handleResize = () => {
      if (window.innerWidth <= this.mobileBreakPoint) {
        this.useMobileLayout = true;
      }
      else {
        this.useMobileLayout = false;
      }
    };
    this.toggleDockWidth = () => {
      this.expanded = !this.expanded;
      this.dockExpanded.emit(this.expanded);
    };
    this.dockItems = [];
    this.dockFooterItems = [];
    this.accessibleLabel = undefined;
    this.expanded = false;
    this.allowResize = true;
    this.mobileBreakPoint = DEFAULT_MOBILE_BREAKPOINT;
    this.useMobileLayout = false;
  }
  componentDidLoad() {
    this.resizeObserver = new ResizeObserver(this.handleResize);
    this.resizeObserver.observe(document.body);
  }
  disconnectedCallback() {
    this.resizeObserver.disconnect();
  }
  render() {
    return (index.h(index.Host, { class: {
        dock: true,
        expanded: this.expanded,
        'has-mobile-layout': this.useMobileLayout,
      } }, index.h("nav", { "aria-label": this.accessibleLabel }, this.dockItems.map(this.renderDockItem), this.renderSeparator(), this.dockFooterItems.map(this.renderDockItem)), this.renderExpandShrinkToggle()));
  }
  renderExpandShrinkToggle() {
    if (this.useMobileLayout || !this.allowResize) {
      return;
    }
    return (index.h("button", { class: {
        'expand-shrink': true,
        expanded: this.expanded,
      }, onClick: this.toggleDockWidth }, index.h("limel-icon", { name: "angle_right" })));
  }
};
Dock.style = dockCss;

exports.limel_dock = Dock;

//# sourceMappingURL=limel-dock.cjs.entry.js.map