@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
171 lines (162 loc) • 30.4 kB
JavaScript
import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-D_4hbGjA.js';
import { K as KEY, i as inheritAriaAttributes } from './utils-DQvnWXRl.js';
const convertPropsToClasses$1 = ({ 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 CancelCircleSolidIcon = ({ className, onClick, }) => (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-solid mi-cancel-circle ${className || ''}`, onClick: onClick || undefined, viewBox: "0 0 24 24" },
h("path", { d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m4.3 14.3a.996.996 0 0 1-1.41 0L12 13.41 9.11 16.3a.996.996 0 1 1-1.41-1.41L10.59 12 7.7 9.11A.996.996 0 1 1 9.11 7.7L12 10.59l2.89-2.89a.996.996 0 1 1 1.41 1.41L13.41 12l2.89 2.89c.38.38.38 1.02 0 1.41" })));
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{height:var(--modus-wc-spacing-lg);width:var(--modus-wc-spacing-lg)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm .modus-wc-chip-remove-icon{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{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{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{height:var(--modus-wc-spacing-lg);width:var(--modus-wc-spacing-lg)}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{height:var(--modus-wc-spacing-xl);width:var(--modus-wc-spacing-xl)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg .modus-wc-chip-remove-icon{height:var(--modus-wc-spacing-xl);width:var(--modus-wc-spacing-xl)}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-200)}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%)}modus-wc-chip .modus-wc-chip .modus-wc-avatar{display:flex}[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,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm .modus-wc-avatar{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-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{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,[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,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md .modus-wc-avatar{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{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-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,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg .modus-wc-avatar{height:var(--modus-wc-spacing-xl);width:var(--modus-wc-spacing-xl)}[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{height:var(--modus-wc-spacing-xl);width:var(--modus-wc-spacing-xl)}[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-200)}[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:var(--modus-wc-color-base-100);background-color:transparent;background-color:color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 15%, transparent);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-gray-1);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-gray-5);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 = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.chipClick = createEvent(this, "chipClick");
this.chipRemove = createEvent(this, "chipRemove");
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 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() {
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$1({
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.customClass)
classList.push(this.customClass);
return classList.join(' ');
}
render() {
return (h(Host, { key: 'db82ce0e4024fbc5200869df34bf4d8dc3d52f9d' }, h("button", Object.assign({ key: '7f57b6753ee96742236aae21feb4a1b421c1474c', "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: 'b65e34278ed8681cccc823161615d686b51f1209' }), this.label && h("span", { key: '15fd32b4fb2b0b1342031f81cc5432c357e1949b', class: "modus-wc-chip-label" }, this.label), this.showRemove && (h(CancelCircleSolidIcon, { key: '6cb2586d635f89e3e9b71841b647e642a7662a8a', className: "modus-wc-chip-remove-icon", onClick: this.handleChipRemove })))));
}
get el() { return getElement(this); }
};
ModusWcChip.style = modusWcChipCss;
const convertPropsToClasses = ({ color, size, variant, }) => {
let classes = '';
if (color) {
classes = `${classes} modus-wc-text-${color}`;
}
if (size) {
classes = `${classes} modus-wc-loader-${size}`;
}
if (variant) {
classes = `${classes} modus-wc-loader-${variant}`;
}
return classes.trim();
};
const modusWcLoaderCss = "/**\n* This component uses styles adapted from DaisyUI's loading component.\n* https://github.com/saadeghi/daisyui/blob/master/src/components/styled/loading.css\n*\n* We found that 'loading' classes from DaisyUI will break styles in the Modus Web Components during\n* the build process so we define all styles here for this component.\n*\n* Note: do not use the 'loading' classes from DaisyUI in this component.\n*/\nmodus-wc-loader .modus-wc-loader {\n aspect-ratio: 1/1;\n background-color: currentColor;\n display: inline-block;\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: 100%;\n pointer-events: none;\n}\nmodus-wc-loader .modus-wc-loader.modus-wc-loader-xs {\n width: 1rem;\n}\nmodus-wc-loader .modus-wc-loader.modus-wc-loader-sm {\n width: 1.25rem;\n}\nmodus-wc-loader .modus-wc-loader.modus-wc-loader-md {\n width: 1.5rem;\n}\nmodus-wc-loader .modus-wc-loader.modus-wc-loader-lg {\n width: 2.5rem;\n}\nmodus-wc-loader .modus-wc-loader.modus-wc-loader-ball {\n mask-image: url(\"data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_rXNP%7Banimation:spinner_YeBj .8s infinite%7D@keyframes spinner_YeBj%7B0%25%7Banimation-timing-function:cubic-bezier(0.33,0,.66,.33);cy:5px%7D46.875%25%7Bcy:20px;rx:4px;ry:4px%7D50%25%7Banimation-timing-function:cubic-bezier(0.33,.66,.66,1);cy:20.5px;rx:4.8px;ry:3px%7D53.125%25%7Brx:4px;ry:4px%7D100%25%7Bcy:5px%7D%7D%3C/style%3E%3Cellipse class='spinner_rXNP' cx='12' cy='5' rx='4' ry='4'/%3E%3C/svg%3E\");\n}\nmodus-wc-loader .modus-wc-loader.modus-wc-loader-bars {\n mask-image: url(\"data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_hzlK%7Banimation:spinner_vc4H .8s linear infinite;animation-delay:-.8s%7D.spinner_koGT%7Banimation-delay:-.65s%7D.spinner_YF1u%7Banimation-delay:-.5s%7D@keyframes spinner_vc4H%7B0%25%7By:1px;height:22px%7D93.75%25%7By:5px;height:14px;opacity:.2%7D%7D%3C/style%3E%3Crect class='spinner_hzlK' x='1' y='1' width='6' height='22'/%3E%3Crect class='spinner_hzlK spinner_koGT' x='9' y='1' width='6' height='22'/%3E%3Crect class='spinner_hzlK spinner_YF1u' x='17' y='1' width='6' height='22'/%3E%3C/svg%3E\");\n}\nmodus-wc-loader .modus-wc-loader.modus-wc-loader-dots {\n mask-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_qM83%7Banimation:spinner_8HQG 1.05s infinite%7D.spinner_oXPr%7Banimation-delay:.1s%7D.spinner_ZTLf%7Banimation-delay:.2s%7D@keyframes spinner_8HQG%7B0%25,57.14%25%7Banimation-timing-function:cubic-bezier(0.33,.66,.66,1);transform:translate(0)%7D28.57%25%7Banimation-timing-function:cubic-bezier(0.33,0,.66,.33);transform:translateY(-6px)%7D100%25%7Btransform:translate(0)%7D%7D%3C/style%3E%3Ccircle class='spinner_qM83' cx='4' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_oXPr' cx='12' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_ZTLf' cx='20' cy='12' r='3'/%3E%3C/svg%3E\");\n}\nmodus-wc-loader .modus-wc-loader.modus-wc-loader-infinity {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='shape-rendering: auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='%230a0a0a' stroke-width='10' stroke-dasharray='205.271142578125 51.317785644531256' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.58892822265625'%3E%3C/animate%3E%3C/path%3E%3C/svg%3E\");\n}\nmodus-wc-loader .modus-wc-loader.modus-wc-loader-ring {\n mask-image: url(\"data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='%23fff'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite' /%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite' /%3E%3C/circle%3E%3C/g%3E%3C/svg%3E\");\n}\nmodus-wc-loader .modus-wc-loader.modus-wc-loader-spinner {\n mask-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}";
const ModusWcLoader = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.inheritedAttributes = {};
/** The color of the loader. */
this.color = 'primary';
/** Custom CSS class to apply to the loader element. */
this.customClass = '';
/** The size of the loader. */
this.size = 'md';
/** The variant of the loader. */
this.variant = 'spinner';
}
componentWillLoad() {
if (!this.el.ariaLabel) {
this.el.ariaLabel = 'Loading';
}
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
getClasses() {
const classList = ['modus-wc-loader'];
const propClasses = convertPropsToClasses({
color: this.color,
size: this.size,
variant: this.variant,
});
// The order CSS classes are added matters to CSS specificity
if (propClasses)
classList.push(propClasses);
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
}
render() {
return (h(Host, { key: '99b13b7c5bf1e5bbb425150aeadae61882273ddf' }, h("span", Object.assign({ key: '32ed0fdbff3a0594701886ac38fd6c0c4c89743c', class: this.getClasses(), role: "status", tabindex: -1 }, this.inheritedAttributes))));
}
get el() { return getElement(this); }
};
ModusWcLoader.style = modusWcLoaderCss;
export { ModusWcChip as modus_wc_chip, ModusWcLoader as modus_wc_loader };