@limetech/lime-elements
Version:
169 lines (165 loc) • 12 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DBTJNfo7.js';
import { i as isItem } from './is-item-CrvUOVvg.js';
import { g as getIconName } from './get-icon-props-CgNJbSP4.js';
import { g as getMouseEventHandlers } from './3d-tilt-hover-effect-5eP2N9QI.js';
const cardCss = () => ` "UTF-8";*{box-sizing:border-box;min-width:0;min-height:0}:host(limel-card){display:flex;border-radius:var(--card-border-radius, 0.95rem)}section{box-sizing:border-box;display:flex;gap:0.5rem;flex-direction:column}:host(limel-card[orientation=landscape]) section{flex-direction:row}section{width:100%;border-radius:var(--card-border-radius, 0.95rem);border:1px solid rgb(var(--contrast-500));padding:0.25rem;background-color:var(--card-background-color, rgb(var(--contrast-300)))}section:hover{border-color:transparent;background-color:var(--card-background-color--hovered, var(--card-background-color, rgb(var(--contrast-200))))}.body{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem}.image-wrapper{flex-shrink:0;display:flex;align-items:center;justify-content:center}:host(limel-card[orientation=portrait]) .image-wrapper{width:100%}:host(limel-card[orientation=landscape]) .image-wrapper{flex-shrink:0;max-width:40%;height:100%}:host(limel-card[orientation=landscape]) .image-wrapper img{height:100%}img{transition:filter 0.6s ease;object-fit:cover;border-radius:calc(var(--card-border-radius, 0.95rem) / 1.4);min-width:0.5rem;min-height:0.5rem;max-width:100%;max-height:100%}section:hover img,section:focus-visible img{transition-duration:0.2s;filter:saturate(1.3)}.markdown-wrapper{position:relative;flex-grow:1;display:flex;flex-direction:column}.markdown-wrapper limel-markdown{overflow-y:auto;flex-grow:1;padding:0.5rem 0.75rem}.markdown-wrapper::before{top:0;background:radial-gradient(farthest-side at 50% 0%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0))}.markdown-wrapper::after{bottom:0;background:radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0))}.markdown-wrapper::before,.markdown-wrapper::after{content:"";pointer-events:none;position:absolute;right:0;left:0;height:0.75rem;opacity:0;transition:opacity 0.6s ease;background-repeat:no-repeat}.markdown-wrapper.can-scroll-up::before,.markdown-wrapper.can-scroll-down::after{opacity:1}header{flex-shrink:0;display:flex;justify-content:center;gap:0.5rem;padding:0.25rem 0.75rem}:host(limel-card[orientation=landscape]) header{padding-top:0.5rem}header:has(limel-icon){padding-left:0.25rem}header .headings{flex-grow:1;display:flex;flex-direction:column;gap:0.125rem}header .title{padding-right:1.25rem}header limel-icon{flex-shrink:0;width:2rem}header h1{font-size:1.125rem;font-weight:500;color:var(--card-heading-color, rgb(var(--contrast-1100)));letter-spacing:-0.03125rem}header h2{font-size:var(--limel-theme-default-font-size);font-weight:400;color:var(--card-subheading-color, rgb(var(--contrast-1000)))}header h1,header h2{word-break:break-word;hyphens:auto;-webkit-hyphens:auto;margin:0}limel-action-bar{flex-shrink:0;--action-bar-background-color:transparent;margin-left:auto}limel-3d-hover-effect-glow{border-radius:var(--card-border-radius, 0.95rem)}:host(limel-card[show-3d-effect]){isolation:isolate;transform-style:preserve-3d;perspective:1000px} (prefers-reduced-motion){:host(limel-card[show-3d-effect]){perspective:2000px}}section{position:relative;transition-duration:0.8s;transition-property:transform, box-shadow, background-color;transition-timing-function:ease-out;transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg)}section:focus{outline:none}section:hover,section:focus,section:focus-visible,section:focus-within{will-change:background-color, box-shadow, transform}section:hover,section:focus,section:focus-visible,section:active{transition-duration:0.2s}section:hover,section:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}section:hover{transform:scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d))}section:focus-visible{outline:none;transform:scale3d(1.01, 1.01, 1.01)}section:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.5} (prefers-reduced-motion){section:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.2}}:host(limel-card[clickable]) section{cursor:pointer;box-shadow:var(--button-shadow-normal)}:host(limel-card[clickable]) section:hover,:host(limel-card[clickable]) section:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}:host(limel-card[clickable]) section:active{transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);box-shadow:var(--button-shadow-pressed)}:host(limel-card[clickable]) section:focus-visible{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-hovered)}:host(limel-card[clickable]) section:focus-visible:active{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-pressed)}:host(limel-card[selected]) section,:host(limel-card[selected]) section:hover,:host(limel-card[selected]) section:focus-visible,:host(limel-card[selected]) section:active{box-shadow:var(--shadow-focused-state)}`;
const Card = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.actionSelected = createEvent(this, "actionSelected");
/**
* Actions to display in the card,
* to provide the user with options to interact with the content.
*/
this.actions = [];
/**
* When true, improve the accessibility of the component and hints the user
* that the card can be interacted width.
*/
this.clickable = false;
/**
* The orientation of the card,
* specially useful when the card has an image.
*/
this.orientation = 'portrait';
/**
* When `true`, the card displays a visual selected state (highlighted border shadow).
* Should be used together with `clickable` to let users toggle selection.
*/
this.selected = false;
/**
* When `true`, the card displays a glow effect on hover,
* following the 3D tilt hover effect.
*/
this.show3dEffect = true;
this.canScrollUp = false;
this.canScrollDown = false;
this.setMarkdownElement = (element) => {
var _a;
if (element === this.markdownElement) {
return;
}
if (this.markdownElement) {
(_a = this.markdownResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
this.markdownElement.removeEventListener('scroll', this.checkIfScrollable);
}
this.markdownElement = element;
if (!this.markdownElement) {
return;
}
this.markdownResizeObserver = new ResizeObserver(this.checkIfScrollable);
this.markdownResizeObserver.observe(this.markdownElement);
this.markdownElement.addEventListener('scroll', this.checkIfScrollable, { passive: true });
this.checkIfScrollable();
};
this.checkIfScrollable = () => {
if (!this.markdownElement) {
return;
}
const scrollHeight = this.markdownElement.scrollHeight;
const clientHeight = this.markdownElement.clientHeight;
const scrollTop = this.markdownElement.scrollTop;
const isScrollable = scrollHeight > clientHeight;
// Use a 2px tolerance to handle sub-pixel rounding issues
const isScrolledToBottom = scrollTop + clientHeight >= scrollHeight - 2;
const shouldShowBottomShadow = isScrollable && !isScrolledToBottom;
const isScrolledToTop = scrollTop <= 1;
const shouldShowTopShadow = isScrollable && !isScrolledToTop;
if (this.canScrollDown !== shouldShowBottomShadow) {
this.canScrollDown = shouldShowBottomShadow;
}
if (this.canScrollUp !== shouldShowTopShadow) {
this.canScrollUp = shouldShowTopShadow;
}
};
this.handleActionSelect = (event) => {
event.stopPropagation();
if (isItem(event.detail)) {
this.actionSelected.emit(event.detail);
}
};
this.handleKeyDown = (event) => {
if (event.target !== event.currentTarget) {
return;
}
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
this.host.click();
}
};
}
componentWillLoad() {
const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(this.host);
this.handleMouseEnter = handleMouseEnter;
this.handleMouseLeave = handleMouseLeave;
}
disconnectedCallback() {
var _a, _b;
(_a = this.markdownResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
(_b = this.markdownElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('scroll', this.checkIfScrollable);
}
componentDidLoad() {
this.setMarkdownElement(this.markdownElement);
}
render() {
return (h(Host, { key: 'fbb3c4a47fe819511f56bf250b52a5effdf64f15', onMouseEnter: this.show3dEffect ? this.handleMouseEnter : undefined, onMouseLeave: this.show3dEffect ? this.handleMouseLeave : undefined }, h("section", { key: '735df6ada728adabd822698395a280742a49cee2', tabindex: this.clickable ? 0 : undefined, role: this.clickable ? 'button' : undefined, "aria-pressed": this.clickable ? String(this.selected) : undefined, onKeyDown: this.clickable ? this.handleKeyDown : undefined }, this.renderImage(), h("div", { key: '2382833712ee8e01bbd702b30b10ea6d3a0f7dcb', class: "body" }, this.renderHeader(), this.renderSlot(), this.renderValue(), this.renderActionBar()), this.show3dEffect && h("limel-3d-hover-effect-glow", { key: 'd13545dc6829b59bce0d870dfdeed409f2608529' }))));
}
renderImage() {
var _a;
if (!((_a = this.image) === null || _a === void 0 ? void 0 : _a.src)) {
return;
}
return (h("div", { class: "image-wrapper" }, h("img", { src: this.image.src, alt: this.image.alt, loading: "lazy" })));
}
renderHeader() {
if (!this.heading && !this.subheading && !this.icon) {
return;
}
return (h("header", null, this.renderIcon(), h("div", { class: "headings" }, this.renderHeading(), this.renderSubheading())));
}
renderIcon() {
var _a;
const icon = getIconName(this.icon);
const color = typeof this.icon === 'string' ? undefined : (_a = this.icon) === null || _a === void 0 ? void 0 : _a.color;
if (!icon) {
return;
}
return (h("limel-icon", { style: {
color: `${color}`,
}, badge: true, name: icon }));
}
renderHeading() {
if (!this.heading) {
return;
}
return h("h1", { class: "title" }, this.heading);
}
renderSubheading() {
if (!this.subheading) {
return;
}
return h("h2", null, this.subheading);
}
renderSlot() {
return h("slot", { name: "component" });
}
renderValue() {
if (!this.value) {
return;
}
return (h("div", { class: {
'markdown-wrapper': true,
'can-scroll-up': this.canScrollUp,
'can-scroll-down': this.canScrollDown,
} }, h("limel-markdown", { class: "body-text", ref: this.setMarkdownElement, value: this.value })));
}
renderActionBar() {
if (this.actions.length === 0) {
return;
}
return (h("limel-action-bar", { actions: this.actions, onItemSelected: this.handleActionSelect }));
}
get host() { return getElement(this); }
};
Card.style = cardCss();
export { Card as limel_card };