@limetech/lime-elements
Version:
252 lines (246 loc) • 12.7 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-2714248e.js';
import { t as translate } from './translations-91c611da.js';
import { i as isItem } from './is-item-cd3a5cec.js';
import { a as ENTER, E as ESCAPE } from './keycodes-e2e44b7e.js';
const actionBarCss = "@charset \"UTF-8\";:host(limel-action-bar){--action-bar-item-height:2rem;--limel-action-bar-item-text-color:var(\n --action-bar-item-text-color,\n rgb(var(--contrast-1100))\n );box-sizing:border-box;display:inline-flex;align-items:center;padding:0.125rem 0.25rem;max-width:100%;border-radius:var(--action-bar-border-radius);background-color:var(--action-bar-background-color, rgb(var(--contrast-100)));transition:max-width 0.3s ease}:host(limel-action-bar),.items{gap:0.25rem}@media (pointer: coarse){:host(limel-action-bar),.items{gap:0.5rem}}.items{display:inline-flex;max-width:100%;min-width:0}:host(limel-action-bar.is-shrunk) .items{opacity:0}:host(limel-action-bar:not(.is-shrunk)) .items{opacity:1}:host(limel-action-bar.is-full-width){width:100%}:host(limel-action-bar.is-floating){--action-bar-border-radius:100vw;border:1px solid rgb(var(--contrast-400));padding-right:0.125rem;padding-left:0.125rem;max-width:calc(100% - 2rem);box-shadow:var(--shadow-depth-16), var(--shadow-depth-8)}:host(limel-action-bar.is-shrunk){max-width:5rem;transition:max-width 0.3s ease-in-out}:host(limel-action-bar.is-shrunk) .expand-shrink{transition:transform 0.3s ease;transform:rotateY(180deg)}:host(limel-action-bar:not(.is-shrunk)){max-width:100%;transition:max-width 0.3s ease-in-out}:host(limel-action-bar:not(.is-shrunk)) .expand-shrink{transition:transform 0.3s ease;transform:rotateY(0deg)}:host(limel-action-bar.can-be-shrunk.is-full-width) .expand-shrink{margin-left:auto}.expand-shrink{all:unset;box-sizing:border-box;border-radius:50%;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}.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 limel-icon{width:1.5rem;height:1.5rem;padding:0.125rem;color:var(--action-bar-shrink-icon-color, rgb(var(--contrast-1000)))}";
const ActionBar = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.itemSelected = createEvent(this, "itemSelected", 7);
this.hasRendered = false;
this.isFirstIntersectionCheck = true;
this.actionBarItems = [];
this.renderActionBarItem = (item, index) => {
return (h("limel-action-bar-item", { item: item, onSelect: this.handleSelect, isVisible: this.isVisible(index), role: "gridcell" }));
};
this.renderOverflowMenu = (items) => {
if (!(this.actions.length - this.overflowCutoff)) {
return;
}
const shrunkOverFlowIcon = {
name: 'more',
color: 'rgb(var(--contrast-1000))',
title: this.getTranslation('action-bar.actions'),
};
return (h("limel-action-bar-overflow-menu", { openDirection: this.openDirection, items: items, onSelect: this.handleSelect, role: "gridcell", overFlowIcon: this.actionBarIsShrunk ? shrunkOverFlowIcon : undefined }));
};
this.handleCollapseExpandClick = () => {
this.actionBarIsShrunk = !this.actionBarIsShrunk;
};
this.handleSelect = (event) => {
event.stopPropagation();
if (isItem(event.detail)) {
this.itemSelected.emit(event.detail);
}
};
this.getTranslation = (key) => {
return translate.get(key, this.language);
};
this.handleIntersection = (entries) => {
const intersectingItems = entries.filter((entry) => entry.isIntersecting);
const notIntersectingItems = entries.filter((entry) => !entry.isIntersecting);
if (this.isFirstIntersectionCheck) {
this.overflowCutoff = intersectingItems.length;
}
else {
this.overflowCutoff =
this.overflowCutoff +
intersectingItems.length -
notIntersectingItems.length;
}
this.isFirstIntersectionCheck = false;
};
this.actions = [];
this.language = document.documentElement.lang;
this.accessibleLabel = undefined;
this.layout = undefined;
this.collapsible = false;
this.openDirection = undefined;
this.overflowCutoff = this.actions.length;
this.actionBarIsShrunk = false;
}
connectedCallback() {
if (this.hasRendered) {
this.createIntersectionObserver();
}
}
componentDidRender() {
var _a;
if (this.haveItemsChanged()) {
(_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
this.createIntersectionObserver();
}
}
disconnectedCallback() {
var _a;
(_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
this.intersectionObserver = undefined;
this.actionBarItems = [];
}
render() {
this.hasRendered = true;
let overflowActions = [];
if (this.actions.length > 0) {
overflowActions = this.actions.slice(this.overflowCutoff);
}
return (h(Host, { "aria-label": this.accessibleLabel, class: {
'is-full-width': this.layout === 'fullWidth',
'is-floating': this.layout === 'floating',
'is-shrunk': this.actionBarIsShrunk && this.collapsible,
'can-be-shrunk': !!this.collapsible,
}, role: "grid" }, h("div", { class: "items", role: "rowgroup" }, this.actions.map(this.renderActionBarItem)), this.renderOverflowMenu(overflowActions), this.renderCollapseExpandButton()));
}
renderCollapseExpandButton() {
if (!this.collapsible || this.actions.length <= 1) {
return;
}
return (h("button", { class: {
'expand-shrink': true,
}, "aria-label": this.tooltipLabel, type: "button", onClick: this.handleCollapseExpandClick }, h("limel-icon", { name: "double_left", id: "tooltip-expand-shrink-button" }), h("limel-tooltip", { label: this.tooltipLabel, elementId: "tooltip-expand-shrink-button" })));
}
isVisible(index) {
return index < this.overflowCutoff;
}
get tooltipLabel() {
let key = 'action-bar.collapse';
if (this.actionBarIsShrunk) {
key = 'action-bar.expand';
}
return this.getTranslation(key);
}
createIntersectionObserver() {
const options = {
root: this.host.shadowRoot.querySelector('.items'),
rootMargin: '0px',
threshold: 1,
};
this.overflowCutoff = this.actions.length;
this.isFirstIntersectionCheck = true;
this.actionBarItems = [];
this.intersectionObserver = new IntersectionObserver(this.handleIntersection, options);
for (const actionBarItem of this.host.shadowRoot.querySelectorAll('limel-action-bar-item')) {
this.observe(actionBarItem);
}
}
observe(actionBarItem) {
this.intersectionObserver.observe(actionBarItem);
this.actionBarItems.push(actionBarItem);
}
haveItemsChanged() {
const someItemRemoved = this.actionBarItems.some((actionBarItem) => !this.host.shadowRoot.contains(actionBarItem));
const someItemAdded = [
...this.host.shadowRoot.querySelectorAll('limel-action-bar-item'),
].some((actionBarItem) => !this.actionBarItems.includes(actionBarItem));
return someItemRemoved || someItemAdded;
}
get host() { return getElement(this); }
};
ActionBar.style = actionBarCss;
const editorLinkMenuCss = ":host(limel-text-editor-link-menu){animation:fade 0.2s ease forwards;animation-delay:0.1s;opacity:0;display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem;max-width:calc(100vw - 2rem);border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--shadow-depth-16)}.actions{display:flex;justify-content:end;gap:0.5rem}@keyframes fade{0%{scale:0.86;opacity:0}100%{scale:1;opacity:1}}";
const TextEditorLinkMenu = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.cancel = createEvent(this, "cancel", 7);
this.save = createEvent(this, "save", 7);
this.linkChange = createEvent(this, "linkChange", 7);
this.getTranslation = (key) => {
return translate.get(key, this.language);
};
this.isValid = (href) => {
try {
new URL(href);
}
catch (_a) {
return false;
}
return true;
};
this.handleKeyDown = (event) => {
var _a;
if (event.key !== ENTER) {
return;
}
if (this.saveButton) {
this.saveButton.focus();
}
event.preventDefault();
if (this.isValid((_a = this.link) === null || _a === void 0 ? void 0 : _a.href)) {
this.handleSave(event);
}
};
this.handleCancel = (event) => {
if (event instanceof KeyboardEvent && event.key !== ESCAPE) {
return;
}
event.stopPropagation();
event.preventDefault();
this.cancel.emit();
};
this.handleSave = (event) => {
event.stopPropagation();
this.save.emit();
};
this.handleLinkInputAction = (event) => {
window.open(this.link.href, '_blank');
event.stopPropagation();
};
this.handleLinkTitleChange = (event) => {
var _a;
this.emitLinkChange(event.detail, (_a = this.link) === null || _a === void 0 ? void 0 : _a.href);
};
this.handleLinkValueChange = (event) => {
var _a;
const href = event.detail;
this.emitLinkChange((_a = this.link) === null || _a === void 0 ? void 0 : _a.text, href);
};
this.emitLinkChange = (text, href) => {
const newLink = {
text: text,
href: href,
};
this.linkChange.emit(newLink);
};
this.link = undefined;
this.language = 'en';
this.isOpen = false;
}
connectedCallback() {
this.setupGlobalHandlers();
}
disconnectedCallback() {
this.teardownGlobalHandlers();
}
setupGlobalHandlers() {
if (this.isOpen) {
document.addEventListener('keyup', this.handleCancel);
}
}
teardownGlobalHandlers() {
document.removeEventListener('keyup', this.handleCancel);
}
componentDidLoad() {
this.focusOnTextInput();
}
focusOnTextInput() {
if (this.textInput) {
const inputField = this.textInput.shadowRoot.querySelector('input');
if (inputField) {
requestAnimationFrame(() => {
inputField.focus();
});
}
}
}
render() {
var _a, _b;
const isValid = this.isValid(this.link.href);
return [
h("limel-input-field", { label: this.getTranslation('editor-link-menu.text'), value: ((_a = this.link) === null || _a === void 0 ? void 0 : _a.text) || '', leadingIcon: "text_cursor", onChange: this.handleLinkTitleChange, onKeyDown: this.handleKeyDown, ref: (el) => (this.textInput = el) }),
h("limel-input-field", { label: this.getTranslation('editor-link-menu.link'), value: ((_b = this.link) === null || _b === void 0 ? void 0 : _b.href) || '', type: "text", leadingIcon: "-lime-text-link", trailingIcon: "external_link", invalid: !isValid, onChange: this.handleLinkValueChange, onAction: this.handleLinkInputAction, onKeyDown: this.handleKeyDown }),
h("div", { class: "actions" }, h("limel-button", { label: this.getTranslation('cancel'), onClick: this.handleCancel }), h("limel-button", { primary: true, label: this.getTranslation('save'), disabled: !isValid, onClick: this.handleSave, ref: (el) => (this.saveButton = el), slot: "button" })),
];
}
};
TextEditorLinkMenu.style = editorLinkMenuCss;
export { ActionBar as limel_action_bar, TextEditorLinkMenu as limel_text_editor_link_menu };
//# sourceMappingURL=limel-action-bar_2.entry.js.map