@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
150 lines (145 loc) • 23.8 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-Blhe_h6i.js';
import { h as handleShadowDOMStyles } from './p-tWS3Egrk.js';
import { K as KEY, i as inheritAriaAttributes } from './p-DUWn6PrQ.js';
import { d as defineCustomElement$1 } from './p-B8VJbmjw.js';
const convertPropsToClasses = ({ active, disabled, hasError, shape, size, variant, }) => {
let classes = '';
if (active) {
classes = `${classes} modus-wc-chip--active`;
}
if (disabled) {
classes = `${classes} modus-wc-chip--disabled`;
}
if (hasError) {
classes = `${classes} modus-wc-chip--error`;
}
if (size) {
classes = `${classes} modus-wc-btn-${size}`;
}
if (shape === 'circle') {
classes = `${classes} modus-wc-chip--circle`;
}
if (variant) {
switch (variant) {
case 'outline':
classes = `${classes} modus-wc-chip--outline`;
break;
}
}
return classes.trim();
};
const modusWcChipCss = "modus-wc-chip .modus-wc-chip.modus-wc-btn{background-color:var(--modus-wc-color-base-100);border-color:transparent;box-sizing:border-box;--rounded-btn:var(--modus-wc-border-radius-chip)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--circle{--rounded-btn:var(--modus-wc-border-radius-3xl)}modus-wc-chip .modus-wc-chip.modus-wc-btn:hover{background-color:var(--modus-wc-color-base-100);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn:focus{background-color:var(--modus-wc-color-base-200);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn:active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn-selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn-active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn-open{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn.selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn.active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn-disabled:hover{background-color:inherit}modus-wc-chip .modus-wc-chip.modus-wc-btn--active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn--selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn:checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-chip .modus-wc-chip.modus-wc-btn.checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-chip .modus-wc-chip.modus-wc-btn-checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-chip .modus-wc-chip.modus-wc-btn.pressed{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-chip .modus-wc-chip.modus-wc-btn-pressed{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-chip .modus-wc-chip.modus-wc-btn[aria-pressed=true]{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-chip .modus-wc-chip.modus-wc-btn-xs{height:var(--modus-wc-size-xs);min-height:var(--modus-wc-size-xs)}modus-wc-chip .modus-wc-chip.modus-wc-btn-sm{height:var(--modus-wc-size-sm);min-height:var(--modus-wc-size-sm)}modus-wc-chip .modus-wc-chip.modus-wc-btn-md{height:var(--modus-wc-size-md);min-height:var(--modus-wc-size-md)}modus-wc-chip .modus-wc-chip.modus-wc-btn-lg{height:var(--modus-wc-size-lg);min-height:var(--modus-wc-size-lg)}modus-wc-chip .modus-wc-chip.modus-wc-btn-xl{height:var(--modus-wc-size-xl);min-height:var(--modus-wc-size-xl)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm{height:var(--modus-wc-spacing-xl);min-height:var(--modus-wc-spacing-xl);padding:var(--modus-wc-spacing-xs) var(--modus-wc-spacing-sm)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm modus-wc-avatar .modus-wc-avatar>div{height:14px;width:14px}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm .modus-wc-chip-remove-icon{font-size:var(--modus-wc-font-size-md);line-height:1}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md{height:var(--modus-wc-spacing-2xl);min-height:var(--modus-wc-spacing-2xl);padding:var(--modus-wc-spacing-sm) var(--modus-wc-spacing-sm)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md modus-wc-avatar .modus-wc-avatar>div{height:var(--modus-wc-spacing-lg);width:var(--modus-wc-spacing-lg)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md .modus-wc-chip-remove-icon{font-size:var(--modus-wc-font-size-lg);line-height:1}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg{height:var(--modus-wc-spacing-3xl);min-height:var(--modus-wc-spacing-3xl);padding:var(--modus-wc-spacing-md) var(--modus-wc-spacing-md)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg modus-wc-avatar .modus-wc-avatar>div{height:18px;width:18px}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg .modus-wc-chip-remove-icon{font-size:var(--modus-wc-font-size-xl);line-height:1}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip-multiline{height:auto;line-height:var(--modus-wc-line-height-md);text-align:start;white-space:normal}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active{background-color:var(--modus-wc-color-primary-pale);border-color:transparent}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline{background-color:var(--modus-wc-color-primary-pale);border-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline .modus-wc-chip-label{color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error{background-color:var(--modus-wc-color-red-pale);border-color:transparent;color:var(--modus-wc-color-red-dark)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error.modus-wc-chip--outline{background-color:var(--modus-wc-color-red-pale);border-color:var(--modus-wc-color-red-dark)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--outline{background-color:var(--modus-wc-color-base-page);border-color:var(--modus-wc-color-base-100)}modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error){color:var(--modus-wc-color-base-content)}modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error).modus-wc-chip--outline{border-color:var(--modus-wc-color-base-200)}modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active){border-color:transparent}modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline{background-color:transparent;border-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline .modus-wc-chip-label{color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn:focus{outline-offset:0}modus-wc-chip .modus-wc-chip.modus-wc-chip--disabled{opacity:0.3;--tw-text-opacity:1}modus-wc-chip .modus-wc-chip.modus-wc-chip--disabled .modus-wc-avatar{filter:grayscale(100%)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn{background-color:var(--modus-wc-color-gray-1);border-color:transparent;box-sizing:border-box;color:var(--modus-wc-color-base-content);font-size:var(--modus-wc-font-size-md)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm{font-size:var(--modus-wc-font-size-md);height:var(--modus-wc-spacing-xl);min-height:var(--modus-wc-spacing-xl);padding:var(--modus-wc-spacing-xs) var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm modus-wc-avatar .modus-wc-avatar>div,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm modus-wc-avatar .modus-wc-avatar>div{height:var(--modus-wc-spacing-lg);width:var(--modus-wc-font-size-lg)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm .modus-wc-chip-remove-icon,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm .modus-wc-chip-remove-icon{font-size:var(--modus-wc-font-size-md);line-height:1}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md{font-size:var(--modus-wc-font-size-md);height:var(--modus-wc-spacing-2xl);min-height:var(--modus-wc-spacing-2xl);padding:var(--modus-wc-spacing-sm) var(--modus-wc-spacing-md)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md modus-wc-avatar .modus-wc-avatar>div,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md modus-wc-avatar .modus-wc-avatar>div{height:var(--modus-wc-spacing-lg);width:var(--modus-wc-spacing-lg)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md .modus-wc-chip-remove-icon,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md .modus-wc-chip-remove-icon{font-size:var(--modus-wc-font-size-lg);line-height:1}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg{font-size:var(--modus-wc-font-size-xl);height:var(--modus-wc-spacing-3xl);min-height:var(--modus-wc-spacing-3xl);padding:var(--modus-wc-spacing-md) var(--modus-wc-spacing-lg)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg modus-wc-avatar .modus-wc-avatar>div,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg modus-wc-avatar .modus-wc-avatar>div{height:18px;width:18px}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg .modus-wc-chip-remove-icon,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg .modus-wc-chip-remove-icon{font-size:var(--modus-wc-font-size-xl);line-height:1}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip-multiline,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip-multiline{height:auto;line-height:var(--modus-wc-line-height-md);text-align:start;white-space:normal}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active{background-color:color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 15%, transparent);border-color:transparent;color:var(--modus-wc-color-base-content)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline{background-color:var(--modus-wc-color-primary);border-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline .modus-wc-chip-label,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline .modus-wc-chip-label{color:var(--modus-wc-color-base-content)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error{background-color:var(--modus-wc-color-red-pale);border-color:transparent;color:var(--modus-wc-color-red-dark)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error.modus-wc-chip--outline,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error.modus-wc-chip--outline{background-color:var(--modus-wc-color-red-pale);border-color:var(--modus-wc-color-red-dark)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--outline,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--outline{background-color:transparent;border-color:var(--modus-wc-color-base-100)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error),[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error){background-color:var(--modus-wc-color-base-100);border-color:transparent;color:var(--modus-wc-color-base-content)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error).modus-wc-chip--outline,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error).modus-wc-chip--outline{background-color:var(--modus-wc-color-base-100);border-color:var(--modus-wc-color-base-200);color:var(--modus-wc-color-base-content)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active),[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active){background-color:color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 15%, transparent);border-color:transparent;color:var(--modus-wc-color-gray-10)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline{background-color:color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 15%, transparent)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline .modus-wc-chip-label,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline .modus-wc-chip-label{color:var(--modus-wc-color-primary)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn:focus,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:focus{outline-offset:0}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-chip--disabled,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-chip--disabled{opacity:0.3;--tw-text-opacity:1}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-chip--disabled .modus-wc-avatar,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-chip--disabled .modus-wc-avatar{filter:grayscale(100%)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip .modus-wc-avatar,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip .modus-wc-avatar{display:flex}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn{background-color:var(--modus-wc-color-gray-1);border-color:var(--modus-wc-color-gray-1);color:var(--modus-wc-color-gray-9)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active{background-color:var(--modus-wc-color-highlight-blue);border-color:transparent;color:var(--modus-wc-color-gray-10)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline{background-color:color-mix(in sRGB, var(--modus-wc-color-blue-dark) 50%, transparent);border-color:var(--modus-wc-color-highlight-blue);color:var(--modus-wc-color-gray-1)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline .modus-wc-chip-label{color:var(--modus-wc-color-gray-1)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error{background-color:var(--modus-wc-color-red-pale);border-color:transparent;color:var(--modus-wc-color-red-dark)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error.modus-wc-chip--outline{background-color:var(--modus-wc-color-red-pale);border-color:var(--modus-wc-color-red-dark);color:var(--modus-wc-color-red-dark)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--outline{background-color:transparent;border-color:var(--modus-wc-color-base-100);color:var(--modus-wc-color-gray-1)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error){background-color:var(--modus-wc-color-gray-0);border-color:transparent;color:var(--modus-wc-color-gray-9)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error).modus-wc-chip--outline{background-color:color-mix(in sRGB, var(--modus-wc-color-gray-1) 12%, transparent);border-color:var(--modus-wc-color-base-200);color:var(--modus-wc-color-gray-1)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active){background-color:var(--modus-wc-color-highlight-blue);border-color:transparent;color:var(--modus-wc-color-gray-10)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline{background-color:color-mix(in sRGB, var(--modus-wc-color-blue-dark) 50%, transparent);border-color:var(--modus-wc-color-highlight-blue);color:var(--modus-wc-color-gray-1)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline .modus-wc-chip-label{color:var(--modus-wc-color-gray-1)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-chip--disabled{opacity:0.6;--tw-text-opacity:1}";
const ModusWcChip = /*@__PURE__*/ proxyCustomElement(class ModusWcChip extends H {
constructor() {
super();
this.__registerHost();
this.chipClick = createEvent(this, "chipClick", 7);
this.chipRemove = createEvent(this, "chipRemove", 7);
this.inheritedAttributes = {};
/** Active state of chip. */
this.active = false;
/** Custom CSS class to apply to the inner div. */
this.customClass = '';
/** Whether the chip is disabled. */
this.disabled = false;
/** Whether the chip has an error. */
this.hasError = false;
/** The label to display in the chip. */
this.label = '';
/** Whether the chip height can grow and its content can wrap across multiple lines. */
this.multiline = false;
/** Whether to show the close icon on right side of the chip. */
this.showRemove = false;
/** The shape of the chip: 'rectangle' (default) or 'circle'. */
this.shape = 'rectangle';
/** The size of the chip. */
this.size = 'md';
/** The variant of the chip. */
this.variant = 'filled';
this.handleKeyDown = (event) => {
if (!this.disabled &&
(event.key === KEY.Enter || event.key === KEY.Space)) {
event.preventDefault();
this.chipClick.emit(event);
}
};
this.handleKeyUp = (event) => {
if (!this.disabled && event.key === KEY.Escape) {
event.preventDefault();
this.chipRemove.emit(event);
}
};
this.handleChipClick = (event) => {
if (!this.disabled) {
this.chipClick.emit(event);
}
};
this.handleChipRemove = (event) => {
if (!this.disabled) {
this.chipRemove.emit(event);
}
};
}
componentWillLoad() {
// Auto-inject CSS if component is used inside user's shadow DOM
handleShadowDOMStyles(this.el);
if (!this.el.ariaLabel) {
this.el.ariaLabel = this.label || 'Chip';
}
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
getClasses() {
const classList = ['modus-wc-chip', 'modus-wc-btn'];
const propClasses = convertPropsToClasses({
active: this.active,
disabled: this.disabled,
hasError: this.hasError,
shape: this.shape,
size: this.size,
variant: this.variant,
});
// The order CSS classes are added matters to CSS specificity
if (propClasses)
classList.push(propClasses);
if (this.multiline)
classList.push('modus-wc-chip-multiline');
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
}
render() {
return (h(Host, { key: '6607ee12f2652f7f80a51ee5cfaa73ad16dbbb3e' }, h("button", Object.assign({ key: '1e75774576706b7a0d8ccc224254ffbfbdf824c5', "aria-disabled": this.disabled, class: this.getClasses(), disabled: this.disabled, onClick: this.handleChipClick, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: 0, type: "button" }, this.inheritedAttributes), h("slot", { key: '8e03e28f633c65d326567c0e63cb583240b35ac7' }), this.label && h("span", { key: '8c2a1dc60e3ff0f726fef0e534ee13d3a8219a60', class: "modus-wc-chip-label" }, this.label), this.showRemove && (h("modus-wc-icon", { key: 'c4749217f4f5fe0939c2bcc6677887c95f481283', "custom-class": "modus-wc-chip-remove-icon", name: "close", onClick: this.handleChipRemove })))));
}
get el() { return this; }
static get style() { return modusWcChipCss; }
}, [4, "modus-wc-chip", {
"active": [4],
"customClass": [1, "custom-class"],
"disabled": [4],
"hasError": [4, "has-error"],
"label": [1],
"multiline": [4],
"showRemove": [4, "show-remove"],
"shape": [1],
"size": [1],
"variant": [1]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["modus-wc-chip", "modus-wc-icon"];
components.forEach(tagName => { switch (tagName) {
case "modus-wc-chip":
if (!customElements.get(tagName)) {
customElements.define(tagName, ModusWcChip);
}
break;
case "modus-wc-icon":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { ModusWcChip as M, defineCustomElement as d };