@cbpds/web-components
Version:
Web components for the CBP Design System.
146 lines (145 loc) • 5.04 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
export const createNamespaceKey = (prefix) => (prefix ? prefix + '-' : '') + (Math.random() + 1).toString(26).slice(2, 7);
export const setCSSProps = (host, _a) => {
var props = __rest(_a, []);
Object.entries(props).forEach(([key, value]) => {
try {
if (value != undefined) {
host.style.setProperty(key, value);
}
}
catch (e) {
console.log('Error in setCSSProps: ', { host }, { key }, { value }, { e });
}
});
};
export const getInvertedContext = (context) => {
switch (context) {
case 'light-inverts':
return 'dark-inverts';
case 'dark-inverts':
return 'light-inverts';
case 'light-always':
return 'dark-always';
case 'dark-always':
return 'light-always';
default:
return 'dark-inverts';
}
};
export const getFocusableElements = (scope) => {
const not = {
inert: ':not([inert]):not([inert] *)',
negTabIndex: ':not([tabindex^="-"])',
disabled: ':not(:disabled)',
};
const selectors = [
`a[href]${not.inert}${not.negTabIndex}`,
`area[href]${not.inert}${not.negTabIndex}`,
`input:not([type="hidden"]):not([type="radio"])${not.inert}${not.negTabIndex}${not.disabled}`,
`input[type="radio"]${not.inert}${not.negTabIndex}${not.disabled}`,
`select${not.inert}${not.negTabIndex}${not.disabled}`,
`textarea${not.inert}${not.negTabIndex}${not.disabled}`,
`button${not.inert}${not.negTabIndex}${not.disabled}`,
`details${not.inert} > summary:first-of-type${not.negTabIndex}`,
`iframe${not.inert}${not.negTabIndex}`,
`audio[controls]${not.inert}${not.negTabIndex}`,
`video[controls]${not.inert}${not.negTabIndex}`,
`[contenteditable]${not.inert}${not.negTabIndex}`,
`[tabindex]${not.inert}${not.negTabIndex}`,
];
return Array.from(scope.querySelectorAll(selectors.join(',')));
};
export const debounce = (callback, wait, prevent = false) => {
let timer = null;
;
return (...args) => {
if (prevent) {
const e = args[0];
e.preventDefault();
e.stopPropagation();
}
clearTimeout(timer);
timer = setTimeout(() => {
callback.apply(null, args);
}, wait);
};
};
export const getElementAttrs = (el) => {
let attrs = {};
Array.from((el === null || el === void 0 ? void 0 : el.attributes) || []).forEach(({ name, value }) => {
attrs = Object.assign(Object.assign({}, attrs), { [name]: value });
});
return attrs;
};
export const clamp = (min, n, max) => {
return Math.max(min, Math.min(n, max));
};
export const doKeyboardNav = (collection, key, focusIndex = 0) => {
const i = focusIndex;
const l = (collection === null || collection === void 0 ? void 0 : collection.length) - 1 || 0;
const n = {
Home: 0,
ArrowUp: -1 < i + -1 ? i + -1 : l,
ArrowLeft: -1 < i + -1 ? i + -1 : l,
ArrowDown: l + 1 > i + 1 ? i + 1 : 0,
ArrowRight: l + 1 > i + 1 ? i + 1 : 0,
End: l,
}[key];
if (n !== undefined) {
focusIndex = n;
}
return focusIndex;
};
export const clickAwayListener = (host, callback) => {
const tagName = host === null || host === void 0 ? void 0 : host.tagName.toLowerCase();
if (!tagName)
return;
const events = ['click', 'touchend'];
const eventHandler = ({ target }) => {
const parentElement = target.closest(tagName);
if (!parentElement) {
callback({
flag: false
});
cancelEvents();
}
else if (!parentElement.contains(host)) {
if (!(parentElement === null || parentElement === void 0 ? void 0 : parentElement.parentElement.closest(tagName))) {
callback({
flag: true
});
}
}
else {
if (parentElement.closest(tagName) != host) {
callback({
flag: true
});
}
}
};
const cancelEvents = () => {
events.forEach(e => {
document.removeEventListener(e, eventHandler, false);
});
};
events.forEach(e => {
document.addEventListener(e, eventHandler);
});
};
//# sourceMappingURL=utils.js.map