@limetech/lime-elements
Version:
129 lines (125 loc) • 8.06 kB
JavaScript
import { r as registerInstance, c as createEvent, h } from './index-DBTJNfo7.js';
import { c as createRandomString } from './random-string-JbKhhoXs.js';
const dockButtonCss = () => ` "UTF-8";.button{all:unset;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)}.button:hover,.button:focus,.button:focus-visible{will-change:color, background-color, box-shadow, transform}.button:hover,.button:focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.button:hover{box-shadow:var(--button-shadow-hovered)}.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)}.button:hover,.button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.button:focus{outline:none}.button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.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)}.button:hover{z-index:1}.button.selected{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)}.button.selected:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}.button.selected .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}.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.selected .icon:before{background-color:var(--dock-item-background-color--selected, rgb(var(--contrast-200)))}`;
const DockButton = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.itemSelected = createEvent(this, "itemSelected");
this.menuOpen = createEvent(this, "menuOpen");
this.close = createEvent(this, "close");
/**
* When the dock is expanded or collapsed, dock items
* show labels and tooltips as suitable for the layout.
*/
this.expanded = false;
/**
* When dock is using mobile layout, dock items
* show labels and tooltips as suitable for the layout.
*/
this.useMobileLayout = false;
/**
* Indicated whether the popover that renders a component is open.
*/
this.isOpen = false;
this.renderNotification = () => {
if (this.item.badge !== undefined) {
return h("limel-badge", { label: this.item.badge });
}
};
this.openPopover = (event) => {
event.stopPropagation();
this.isOpen = true;
this.menuOpen.emit(this.item);
};
this.setCustomComponentElement = (element) => {
this.customComponentElement = element;
};
this.onPopoverClose = () => {
this.isOpen = false;
this.close.emit();
};
this.handleClick = (event) => {
event.stopPropagation();
this.itemSelected.emit(this.item);
};
this.focusCustomComponentElement = (entries) => {
var _a, _b, _c;
const entry = entries.find((e) => e.target === this.customComponentElement);
if (!entry) {
return;
}
if (!entry.isIntersecting) {
return;
}
if ((_b = (_a = this.customComponentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.delegatesFocus) {
(_c = this.customComponentElement) === null || _c === void 0 ? void 0 : _c.focus();
}
};
this.getOpenDirection = () => {
if (this.useMobileLayout) {
return 'top';
}
return 'right';
};
this.tooltipId = createRandomString();
}
render() {
var _a, _b;
if ((_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.dockMenu) === null || _b === void 0 ? void 0 : _b.componentName) {
return this.renderPopover();
}
return this.renderButton(this.handleClick);
}
openWatcher() {
if (!this.isOpen) {
return;
}
if (!this.intersectionObserver) {
this.intersectionObserver = new IntersectionObserver(this.focusCustomComponentElement);
this.intersectionObserver.observe(this.customComponentElement);
}
}
disconnectedCallback() {
var _a;
(_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
this.intersectionObserver = undefined;
}
renderPopover() {
var _a;
const CustomComponent = (_a = this.item) === null || _a === void 0 ? void 0 : _a.dockMenu.componentName;
return (h("limel-popover", { openDirection: this.useMobileLayout ? 'top' : 'right-start', open: this.isOpen || this.item.dockMenu.menuOpen, onClose: this.onPopoverClose }, this.renderButton(this.openPopover, 'trigger'), h(CustomComponent, Object.assign({ ref: this.setCustomComponentElement }, (this.item.dockMenu.props || {}), { onClose: this.onPopoverClose }))));
}
renderButton(handleClick, slot) {
var _a;
return (h("button", { slot: slot, tabindex: "0", id: this.tooltipId, type: "button", class: {
button: true,
selected: (_a = this.item) === null || _a === void 0 ? void 0 : _a.selected,
}, onClick: handleClick, "aria-live": "polite" }, this.renderIcon(), this.renderLabel(), this.renderTooltip(), this.renderNotification()));
}
renderIcon() {
if (!this.item.icon) {
return;
}
return h("limel-icon", { name: this.item.icon, class: "icon" });
}
renderLabel() {
if (this.expanded) {
return h("span", { class: "text" }, this.item.label);
}
}
renderTooltip() {
if (!this.expanded && this.item.label) {
return (h("limel-tooltip", { elementId: this.tooltipId, label: this.item.label, helperLabel: this.item.helperLabel, openDirection: this.getOpenDirection() }));
}
if (this.expanded && this.item.helperLabel) {
return (h("limel-tooltip", { elementId: this.tooltipId, label: this.item.helperLabel, openDirection: this.getOpenDirection() }));
}
}
static get watchers() { return {
"isOpen": [{
"openWatcher": 0
}]
}; }
};
DockButton.style = dockButtonCss();
export { DockButton as limel_dock_button };