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

Lime Elements

import { r as registerInstance, c as createEvent, h, H as Host } from './index-DBTJNfo7.js';

const dockCss = () => `@charset "UTF-8";.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}.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(       0.83,       -0.15,       0.49,       1.16   );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{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.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))}: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;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)}`;

const DEFAULT_MOBILE_BREAKPOINT = 700;
const Dock = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.itemSelected = createEvent(this, "itemSelected");
        this.menuOpen = createEvent(this, "menuOpen");
        this.close = createEvent(this, "close");
        this.dockExpanded = createEvent(this, "dockExpanded");
        /**
         * Items that are placed in the dock.
         */
        this.dockItems = [];
        /**
         * Items that are placed at the bottom of the dock. (Or at the end in mobile
         * layout.)
         */
        this.dockFooterItems = [];
        /**
         * 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…
         */
        this.expanded = false;
        /**
         * Set to `false` if you do not want to allow end-users
         * to exapnd or shrink the Dock. This will hide the
         * expand/shrink button, and the only things that defines
         * the layout will be the `expanded` property, and
         * the `mobileBreakPoint`.
         */
        this.allowResize = true;
        /**
         * Defines the breakpoint in pixles, at which the component will be rendered
         * in a hoizontal layout. Default breakpoint is `700` pixels, which means
         * when the screen size is smaller than `700px`, the component will automatically
         * switch to a horizontal layout.
         */
        this.mobileBreakPoint = DEFAULT_MOBILE_BREAKPOINT;
        /**
         * Is used to render the component horizontally, and place
         * the Dock items in a row.
         */
        this.useMobileLayout = false;
        this.renderSeparator = () => {
            return this.useMobileLayout ? null : h("span", { class: "footer-separator" });
        };
        this.renderDockItem = (item) => {
            return (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);
        };
    }
    componentDidLoad() {
        this.resizeObserver = new ResizeObserver(this.handleResize);
        this.resizeObserver.observe(document.body);
    }
    disconnectedCallback() {
        this.resizeObserver.disconnect();
    }
    render() {
        return (h(Host, { key: '3a859df9c1fb4b56bb1ba18b846a2da353075b0f', class: {
                dock: true,
                expanded: this.expanded,
                'has-mobile-layout': this.useMobileLayout,
            } }, h("nav", { key: '75303da2b5c8f86a4a6e1be7e76811e3dce8a303', "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 (h("button", { class: {
                'expand-shrink': true,
                expanded: this.expanded,
            }, onClick: this.toggleDockWidth }, h("limel-icon", { name: "angle_right" })));
    }
};
Dock.style = dockCss();

export { Dock as limel_dock };