@limetech/lime-elements
Version:
248 lines (247 loc) • 7.42 kB
JavaScript
import { h, } from '@stencil/core';
import { createRandomString } from '../../../util/random-string';
/**
* @private
*/
export class DockButton {
constructor() {
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.item = undefined;
this.expanded = false;
this.useMobileLayout = false;
this.isOpen = false;
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 is() { return "limel-dock-button"; }
static get originalStyleUrls() {
return {
"$": ["dock-button.scss"]
};
}
static get styleUrls() {
return {
"$": ["dock-button.css"]
};
}
static get properties() {
return {
"item": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "DockItem",
"resolved": "DockItem",
"references": {
"DockItem": {
"location": "import",
"path": "../dock.types"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Item that is placed in the dock."
}
},
"expanded": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "When the dock is expanded or collapsed, dock items\nshow labels and tooltips as suitable for the layout."
},
"attribute": "expanded",
"reflect": true,
"defaultValue": "false"
},
"useMobileLayout": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "When dock is using mobile layout, dock items\nshow labels and tooltips as suitable for the layout."
},
"attribute": "use-mobile-layout",
"reflect": true,
"defaultValue": "false"
}
};
}
static get states() {
return {
"isOpen": {}
};
}
static get events() {
return [{
"method": "itemSelected",
"name": "itemSelected",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Fired when a dock item has been selected from the dock."
},
"complexType": {
"original": "DockItem",
"resolved": "DockItem",
"references": {
"DockItem": {
"location": "import",
"path": "../dock.types"
}
}
}
}, {
"method": "menuOpen",
"name": "menuOpen",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Fired when a dock menu is opened."
},
"complexType": {
"original": "DockItem",
"resolved": "DockItem",
"references": {
"DockItem": {
"location": "import",
"path": "../dock.types"
}
}
}
}, {
"method": "close",
"name": "close",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Fired when the popover is closed."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get watchers() {
return [{
"propName": "isOpen",
"methodName": "openWatcher"
}];
}
}
//# sourceMappingURL=dock-button.js.map