@limetech/lime-elements
Version:
176 lines (172 loc) • 15.4 kB
JavaScript
import { r as registerInstance, h, H as Host } from './index-DBTJNfo7.js';
import { g as getIconName } from './get-icon-props-CgNJbSP4.js';
import { c as createRandomString } from './random-string-JbKhhoXs.js';
import { C as CheckboxTemplate } from './checkbox.template-CfWJ3CAC.js';
import { t as translate } from './translations-DVRaJQvC.js';
const listItemCss = () => ` "UTF-8";*,*:before,*:after{box-sizing:border-box}.boolean-input{--limel-boolean-input-box-size:1.25rem;--limel-boolean-input-gap-size:0.5rem;position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--limel-checkbox-min-height, 2.5rem);width:100%}.boolean-input input[type=checkbox],.boolean-input input[type=radio]{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none}label.boolean-input-label{min-width:var(--limel-boolean-input-box-size);min-height:var(--limel-boolean-input-box-size);padding-top:0.125rem;cursor:pointer;position:relative;width:100%;font-size:var(--limel-theme-default-small-font-size);color:var(--limel-theme-text-primary-on-background-color);padding-left:calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size))}.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label{cursor:not-allowed;color:var(--limel-theme-text-disabled-color)}.required label.boolean-input-label:after{margin-left:0.0625rem;content:"*"}.invalid:not(.readonly) label.boolean-input-label{color:var(--limel-theme-error-text-color)}:host(limel-checkbox.hide-label) label.boolean-input-label,.hide-label label.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}.box{position:absolute;pointer-events:none;transition:border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;display:inline-block;vertical-align:middle;width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);margin-right:var(--limel-boolean-input-gap-size);border-radius:var(--limel-boolean-input-box-border-radius);border:0.125rem solid;border-color:var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));background-color:var(--limel-checkbox-background-color, rgb(var(--contrast-300)));}.checked .box,.boolean-input>input[type=checkbox]:checked+.box,.boolean-input>input[type=radio]:checked+.box{background-color:var(--lime-primary-color, var(--limel-theme-primary-color));border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.disabled .box{opacity:0.4}.box{}.boolean-input:not(.disabled):hover .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):active .box{will-change:box-shadow;box-shadow:var(--button-shadow-pressed)}.box:before{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);content:"";position:absolute;inset:-0.1875rem;border-radius:inherit;}.boolean-input>input[type=checkbox]:focus-visible+.box:before,.boolean-input>input[type=radio]:focus-visible+.box:before{will-change:box-shadow;box-shadow:var(--shadow-depth-8-focused)}.box:after{transition:opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);content:"";position:absolute;inset:0;margin:auto;border-radius:1rem;opacity:0;background-color:rgb(var(--color-white));}.boolean-input:not(.disabled):hover .box:after{will-change:opacity, box-shadow, transform, width}:host(limel-checkbox){min-height:var(--limel-checkbox-min-height, 2.5rem)}.box:after{height:0.125rem;width:0.25rem}.indeterminate .box:after{opacity:1;width:calc(var(--limel-boolean-input-box-size) - 0.5rem)}.checkbox{--limel-boolean-input-box-border-radius:0.25rem}.checkbox svg.check-mark{position:absolute;z-index:1;inset:0;transform:translate3d(-0.125rem, -0.125rem, 0);width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);padding:0.25rem;color:rgb(var(--color-white));opacity:0;stroke-width:0.1875rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.checkbox svg.check-mark path{stroke-dashoffset:29.7833;stroke-dasharray:29.7833;transition:stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1)}.checkbox{}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark{opacity:1}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark path{stroke-dashoffset:0}limel-dynamic-label{margin-top:0.375rem;margin-left:-0.25rem}:host(limel-checkbox:focus),:host(limel-checkbox:focus-visible),:host(limel-checkbox:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-checkbox){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-checkbox:focus) limel-helper-line,:host(limel-checkbox:focus-visible) limel-helper-line,:host(limel-checkbox:focus-within) limel-helper-line,:host(limel-checkbox:hover) limel-helper-line{will-change:grid-template-rows}*,*:before,*:after{box-sizing:border-box}limel-list-item{min-height:2.5rem}limel-list-item:focus{outline:none}limel-list-item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-list-item{transition:background-color 0.6s ease;position:relative;isolation:isolate;display:flex;align-items:center;gap:0.5rem;padding:0 1rem;background-color:rgb(var(--contrast-100))}limel-list-item:hover{z-index:1;transition:background-color 0.2s ease;border-radius:0.5rem}limel-list-item:focus,limel-list-item:focus-visible,limel-list-item:active{z-index:1;border-radius:0.5rem}limel-list-item:first-of-type{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}limel-list-item:last-of-type{border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem}limel-list-item:not([disabled]):not([disabled=true]){cursor:pointer}limel-list-item[disabled]:not([disabled=false]){cursor:not-allowed}limel-list-item[disabled]:not([disabled=false]){cursor:not-allowed}limel-list-item[disabled]:not([disabled=false]) .text,limel-list-item[disabled]:not([disabled=false]) limel-icon,limel-list-item[disabled]:not([disabled=false]) img,limel-list-item[disabled]:not([disabled=false]) .boolean-input{opacity:0.4}limel-list-item:not([disabled]):not([disabled=true]):hover,limel-list-item:not([disabled]):not([disabled=true]):focus-visible{background-color:rgb(var(--contrast-400))}limel-list-item[type=option]:before{transition:background-color 0.6s ease;content:"";position:absolute;inset:0;opacity:0.2;border-radius:0.5rem}limel-list-item[type=option][selected]:not([selected=false]):before{transition:background-color 0.2s ease;background-color:var(--limel-theme-primary-color)}limel-list-item .text{flex-grow:1;min-width:0;display:flex;flex-direction:column;padding:0.5rem 0;color:var(--limel-theme-text-primary-on-background-color)}limel-list-item .label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--limel-theme-default-font-size);line-height:1rem}limel-list-item .description{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:var(--maxLinesSecondaryText);line-height:1rem;font-size:var(--limel-theme-default-small-font-size);opacity:0.6}limel-list-item limel-icon{color:var(--limel-theme-text-secondary-on-background-color);flex-shrink:0;margin-left:-0.5rem}limel-list-item limel-icon:has(+img){margin-left:0;position:absolute;top:0.125rem;left:0.125rem;padding:0.1875rem;width:1.25rem;background-color:rgb(var(--contrast-200), 0.8)}limel-list-item img{flex-shrink:0;object-fit:cover;border-radius:var(--list-item-image-border-radius, 50%);width:2rem;height:2rem;box-shadow:0 0 0 1px rgb(var(--contrast-800), 0.5)}limel-list-item limel-menu{margin-right:-0.5rem;order:var(--limel-list-item-menu-order, 3)}limel-list-item[role=menuitem] limel-list-item .label{font-size:var(--limel-theme-default-small-font-size)}.boolean-input,limel-radio-button{width:var(--limel-boolean-input-box-size) !important;margin-left:-0.25rem !important}.boolean-input.checkbox{margin-right:0.25rem}limel-list-item:has(limel-icon) .boolean-input,limel-list-item:has(img) .boolean-input{margin-right:-0.25rem;margin-left:0;order:2}.boolean-input .boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}`;
const ListItemComponent = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* Defines the language for translations.
* Will translate the translatable strings on the components.
*/
this.language = 'en';
/**
* {@inheritdoc ListItem.disabled}
*/
this.disabled = false;
/**
* Size of the icon displayed for this item.
*/
this.iconSize = 'small';
/**
* Set to `true` if the list should display larger icons with a background
*/
this.badgeIcon = false;
/**
* {@inheritdoc ListItem.selected}
*/
this.selected = false;
/**
* The semantic role of the list item. This affects the ARIA role
* and the interaction behavior.
*
* - 'option' → selectable via click/Enter/Space, aria-selected
* - 'radio'/'checkbox' → selectable, aria-checked
* - 'menuitem'/'listitem' → activation only, no selection toggle
*/
this.type = 'listitem';
this.renderLabel = () => {
return (h("span", { class: "label", id: this.labelId }, this.text));
};
this.renderDescription = () => {
if (!this.secondaryText) {
return;
}
return (h("span", { class: "description", id: this.descriptionId }, this.secondaryText));
};
this.renderIcon = () => {
const iconName = getIconName(this.icon);
if (!iconName) {
return;
}
let iconColor;
let iconBackgroundColor;
let title;
if (typeof this.icon === 'object') {
iconColor = this.icon.color;
iconBackgroundColor = this.icon.backgroundColor;
title = this.icon.title;
}
const iconProps = {
'aria-label': title,
'aria-hidden': title ? null : 'true',
name: iconName,
style: {
color: iconColor,
'background-color': iconBackgroundColor,
},
badge: this.badgeIcon,
size: this.iconSize,
};
return h("limel-icon", Object.assign({}, iconProps));
};
this.renderPrimaryComponent = () => {
const primary = this.primaryComponent;
if (!(primary === null || primary === void 0 ? void 0 : primary.name)) {
return;
}
const PrimaryComponent = primary.name;
const props = primary.props || {};
return h(PrimaryComponent, Object.assign({}, props));
};
this.renderImage = () => {
if (!this.image) {
return;
}
return h("img", { src: this.image.src, alt: this.image.alt, loading: "lazy" });
};
this.renderActionMenu = (actions) => {
if (!actions || actions.length === 0) {
return;
}
const stableActions = this.getStableActions(actions);
return (h("limel-menu", { class: "mdc-deprecated-list-item__meta", items: stableActions, openDirection: "left-start" }, h("limel-icon-button", { class: "action-menu-trigger", slot: "trigger", icon: "menu_2", label: this.actionMenuLabel() })));
};
this.renderRadioButton = () => {
if (this.type !== 'radio') {
return;
}
return (h("limel-radio-button", { id: `radio_${this.labelId}`, checked: this.selected, disabled: this.disabled }));
};
this.renderCheckbox = () => {
if (this.type !== 'checkbox') {
return;
}
return (h(CheckboxTemplate, { id: `checkbox_${this.labelId}`, checked: this.selected, disabled: this.disabled }));
};
this.actionMenuLabel = () => {
return translate.get('file-viewer.more-actions', this.language);
};
this.labelId = createRandomString();
this.descriptionId = createRandomString();
}
render() {
var _a;
const ariaProps = {
'aria-labelledby': this.labelId,
'aria-describedby': this.secondaryText
? this.descriptionId
: undefined,
'aria-disabled': this.disabled ? 'true' : 'false',
};
// ARIA state depending on `role`/`type`
if (this.type === 'radio' || this.type === 'checkbox') {
ariaProps['aria-checked'] = this.selected ? 'true' : 'false';
}
else if (this.type === 'option' || this.type === 'menuitem') {
// aria-selected for `option` (spec);
// also keep for `menuitem` for visual state consistency
ariaProps['aria-selected'] = this.selected ? 'true' : 'false';
}
return (h(Host, Object.assign({ key: '4f769d4dc9bcf065f0891ae394efb8f2cb4e3cbe', role: this.getHostRole(), class: {
'has-primary-component': !!((_a = this.primaryComponent) === null || _a === void 0 ? void 0 : _a.name),
} }, ariaProps), this.renderRadioButton(), this.renderCheckbox(), this.renderIcon(), this.renderImage(), this.renderPrimaryComponent(), h("div", { key: 'f3ae79f70d048a6541af55782a8a1956fd7338c5', class: "text" }, this.renderLabel(), this.renderDescription()), this.renderActionMenu(this.actions)));
}
/**
* Returns a stable reference for the provided actions array to avoid
* unnecessary re-renders of the action menu when the reference is unchanged.
*
* @param actions The actions (and separators) to display in the menu
* @returns The same array instance that was previously seen, if unchanged
*/
getStableActions(actions) {
if (this.memoizedActions === actions) {
return this.memoizedActions;
}
this.memoizedActions = actions;
return actions;
}
getHostRole() {
switch (this.type) {
case 'option': {
return 'option';
}
case 'radio': {
return 'radio';
}
case 'checkbox': {
return 'checkbox';
}
case 'menuitem': {
return 'menuitem';
}
default: {
return 'listitem';
}
}
}
};
ListItemComponent.style = listItemCss();
export { ListItemComponent as limel_list_item };