UNPKG

@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

126 lines (123 loc) 3.81 kB
import './p-BMvVSi6Y.js'; /** * Checks if the app is in light mode by checking the html element's data-theme attribute. * @returns { boolean } - Whether the app is in light mode or not. */ const isLightMode = () => { const theme = document.documentElement.getAttribute('data-theme'); return !theme || theme.includes('light'); }; /* * Generates a random string of the specified length. * @param length { number } - The length of the random string to generate. * @returns { string } - A random string of the specified length. */ function generateRandomId(length = 8) { return Math.random() .toString(36) .substring(2, 2 + length); } /** * Elements inside of web components sometimes need to inherit global attributes * set on the host. For example, the inner input in `ion-input` should inherit * the `title` attribute that developers set directly on `ion-input`. This * helper function should be called in componentWillLoad and assigned to a variable * that is later used in the render function. * * This does not need to be reactive as changing attributes on the host element * does not trigger a re-render. */ const inheritAttributes = (el, attributes = []) => { const attributeObject = {}; attributes.forEach((attr) => { if (el.hasAttribute(attr)) { const value = el.getAttribute(attr); if (value !== null) { attributeObject[attr] = value; } el.removeAttribute(attr); } }); return attributeObject; }; /** * List of available ARIA attributes + `role`. * Removed deprecated attributes. * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes */ const ariaAttributes = [ 'role', 'aria-activedescendant', 'aria-atomic', 'aria-autocomplete', 'aria-braillelabel', 'aria-brailleroledescription', 'aria-busy', 'aria-checked', 'aria-colcount', 'aria-colindex', 'aria-colindextext', 'aria-colspan', 'aria-controls', 'aria-current', 'aria-describedby', 'aria-description', 'aria-details', 'aria-disabled', 'aria-errormessage', 'aria-expanded', 'aria-flowto', 'aria-haspopup', 'aria-hidden', 'aria-invalid', 'aria-keyshortcuts', 'aria-label', 'aria-labelledby', 'aria-level', 'aria-live', 'aria-multiline', 'aria-multiselectable', 'aria-orientation', 'aria-owns', 'aria-placeholder', 'aria-posinset', 'aria-pressed', 'aria-readonly', 'aria-relevant', 'aria-required', 'aria-roledescription', 'aria-rowcount', 'aria-rowindex', 'aria-rowindextext', 'aria-rowspan', 'aria-selected', 'aria-setsize', 'aria-sort', 'aria-valuemax', 'aria-valuemin', 'aria-valuenow', 'aria-valuetext', ]; /** * Returns an array of aria attributes that should be copied from * the shadow host element to a target within the light DOM. * @param el The element that the attributes should be copied from. * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host. * Use this in instances where we manually specify aria attributes on the `<Host>` element. */ const inheritAriaAttributes = (el, ignoreList) => { let attributesToInherit = ariaAttributes; if (ignoreList && ignoreList.length > 0) { attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr)); } return inheritAttributes(el, attributesToInherit); }; const KEY = { Enter: 'Enter', Space: ' ', Escape: 'Escape', Backspace: 'Backspace', ArrowDown: 'ArrowDown', ArrowUp: 'ArrowUp', }; export { KEY as K, inheritAttributes as a, isLightMode as b, generateRandomId as g, inheritAriaAttributes as i };