@cbpds/web-components
Version:
Web components for the CBP Design System.
103 lines (97 loc) • 6.43 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-cd71cbd5.js');
const utils = require('./utils-99c9e716.js');
const cbpDrawerCss = ":root{--cbp-drawer-color-bg:var(--cbp-color-white);--cbp-drawer-color-bg-dark:var(--cbp-color-gray-cool-70);--cbp-drawer-color-backdrop:var(--cbp-color-backdrop-light);--cbp-drawer-color-backdrop-dark:var(--cbp-color-backdrop-dark);--cbp-drawer-close-button-color:var(--cbp-color-interactive-secondary-darker);--cbp-drawer-close-button-color-hover:var(--cbp-color-text-lightest);--cbp-drawer-close-button-color-bg-hover:var(--cbp-color-interactive-secondary-darker);--cbp-drawer-close-button-color-border-hover:var(--cbp-color-interactive-secondary-darker)}[data-cbp-theme=light] cbp-drawer[context*=dark],[data-cbp-theme=dark] cbp-drawer:not([context=dark-inverts]):not([context=light-always]){--cbp-drawer-color-bg:var(--cbp-drawer-color-bg-dark);--cbp-drawer-color-backdrop:var(--cbp-drawer-color-backdrop-dark)}cbp-drawer{all:unset;display:none;position:relative}cbp-drawer:not(.cbp-drawer--persistent){--cbp-panel-border-radius:0;--cbp-panel-border-width:0}cbp-drawer.cbp-drawer--persistent{display:block}cbp-drawer.cbp-drawer--persistent .cbp-drawer__content{height:auto}cbp-drawer .cbp-drawer__content{display:flex;flex-direction:column;top:0;overflow-y:auto;z-index:var(--cbp-z-index-level-top);width:100%;height:101%;margin:0;padding:0;border:0;max-width:100%;max-height:101%;transition:0.5s;height:100%;background-color:var(--cbp-drawer-color-bg)}cbp-drawer .cbp-drawer__content .cbp-drawer__close-button{position:absolute;right:1rem;top:1em}cbp-drawer .cbp-drawer__content .cbp-drawer__close-button[fill][color]{--cbp-button-color:var(--cbp-drawer-close-button-color);--cbp-button-color-hover:var(--cbp-drawer-close-button-color-hover)}cbp-drawer[open]{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:calc(var(--cbp-z-index-level-top) - 1);overflow-y:auto;background-color:var(--cbp-drawer-color-backdrop)}cbp-drawer[open][position=left] .cbp-drawer__content{left:-100%;box-shadow:var(--cbp-shadow-level-4-right)}cbp-drawer[open][position=left] .cbp-drawer__content.cbp-drawer--open{left:0}cbp-drawer[open][position=right] .cbp-drawer__content{right:-100%;box-shadow:var(--cbp-shadow-level-4-left)}cbp-drawer[open][position=right] .cbp-drawer__content.cbp-drawer--open{right:0}cbp-drawer[open] .cbp-drawer__content{position:fixed}@media (min-width: 37.5em){cbp-drawer[open] .cbp-drawer__content{width:25rem}}";
const CbpDrawerStyle0 = cbpDrawerCss;
const CbpDrawer = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.drawerOpen = index.createEvent(this, "drawerOpen", 7);
this.drawerClose = index.createEvent(this, "drawerClose", 7);
this.position = 'left';
this.open = undefined;
this.uid = undefined;
this.accessibilityText = undefined;
this.persistAt = undefined;
this.context = undefined;
this.sx = {};
this.persistent = false;
}
watchOpenHandler(newValue) {
newValue == true ? this.setFocus() : this.closeDrawer();
}
async openDrawer(e = undefined) {
this.open = true;
this.drawerOpen.emit({
host: this.host,
open: this.open,
nativeEvent: e
});
}
async closeDrawer(e = undefined) {
this.open = false;
this.drawerClose.emit({
host: this.host,
open: this.open,
nativeEvent: e
});
}
setFocus() {
setTimeout(() => {
var _a;
if (!this.focusableElements) {
this.focusableElements = utils.getFocusableElements(this.host);
}
(_a = this.focusableElements[0]) === null || _a === void 0 ? void 0 : _a.focus();
}, 100);
}
handleBackdropClick(e) {
const { target } = e;
!target.closest('.cbp-drawer__content') && this.closeDrawer(e);
}
handleKeyUp(e) {
e.key == 'Escape' && this.closeDrawer(e);
}
doPersistAt(mql) {
if (mql.matches) {
this.persistent = true;
}
else {
this.persistent = false;
}
}
componentDidLoad() {
if (this.persistAt) {
const MQ = window === null || window === void 0 ? void 0 : window.matchMedia(`(${this.persistAt})`);
if (MQ) {
MQ.addEventListener('change', mql => this.doPersistAt(mql));
this.doPersistAt(MQ);
}
}
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
utils.setCSSProps(this.drawer, Object.assign({}, this.sx));
this.open && this.setFocus();
}
componentDidRender() {
setTimeout(() => {
this.open ? this.drawer.classList.add('cbp-drawer--open') : this.drawer.classList.remove('cbp-drawer--open');
}, 10);
}
render() {
return (index.h(index.Host, { key: '637b2776dea7decd265e6509d81c578d4c292f13', class: (this.persistent && !this.open) ? "cbp-drawer--persistent" : "", onClick: e => this.handleBackdropClick(e), onKeyUp: e => this.handleKeyUp(e), id: this.uid }, index.h("div", { key: '293d3c3bd3fa079e6860b861635b5ebfae75d6f4', ref: el => (this.drawer = el), role: this.persistent ? "region" : "dialog", "aria-modal": !this.persistent ? "true" : false, class: "cbp-drawer__content", "aria-label": this.accessibilityText, tabindex: "-1" }, (!this.persistent || this.open) &&
index.h("cbp-button", { key: '485b3bd8f4e256d834b51d070834841041484de6', class: "cbp-drawer__close-button", variant: "square", type: "button", color: "secondary", fill: "ghost", accessibilityText: "Close", targetProp: "open", controls: this.uid, context: utils.getInvertedContext(this.context) }, index.h("cbp-icon", { key: '68f00449f40f2cd25e67d3ee720975f2c7f231c4', name: "circle-xmark", size: "var(--cbp-space-5x)" })), index.h("slot", { key: '8866b25e69f0bbd74f87385a3f3646aeb0b2a0d8' }))));
}
get host() { return index.getElement(this); }
static get watchers() { return {
"open": ["watchOpenHandler"]
}; }
};
CbpDrawer.style = CbpDrawerStyle0;
exports.cbp_drawer = CbpDrawer;
//# sourceMappingURL=cbp-drawer.cjs.entry.js.map