@paraboly/pwc-sliding-panel
Version:
A panel that slides open from the sides of the page when you click a handle.
88 lines (87 loc) • 4.42 kB
JavaScript
import { r as registerInstance, h, g as getElement, c as createEvent } from './core-95ed22b2.js';
var PwcSlidingPanel = /** @class */ (function () {
function PwcSlidingPanel(hostRef) {
registerInstance(this, hostRef);
this.active = false;
this.anchor = "left";
}
PwcSlidingPanel.prototype.activeWatchHandler = function (newValue) {
if (newValue) {
this.root.classList.add("pwc-sliding-panel___active");
}
else {
this.root.classList.remove("pwc-sliding-panel___active");
}
};
PwcSlidingPanel.prototype.toggledListener = function () {
this.active = !this.active;
};
PwcSlidingPanel.prototype.render = function () {
return h("slot", null);
};
Object.defineProperty(PwcSlidingPanel.prototype, "root", {
get: function () { return getElement(this); },
enumerable: true,
configurable: true
});
Object.defineProperty(PwcSlidingPanel, "watchers", {
get: function () {
return {
"active": ["activeWatchHandler"]
};
},
enumerable: true,
configurable: true
});
Object.defineProperty(PwcSlidingPanel, "style", {
get: function () { return ":root{--pwc-sliding-panel___content-width:200px;--pwc-sliding-panel___toggle-width:30px;--pwc-sliding-panel___toggle-height:30px;--pwc-sliding-panel___transition-duration:0.25s}pwc-sliding-panel{display:block;position:absolute;-webkit-transition:all var(--pwc-sliding-panel___transition-duration) ease;transition:all var(--pwc-sliding-panel___transition-duration) ease;-webkit-box-sizing:border-box;box-sizing:border-box}pwc-sliding-panel[anchor=left]{left:calc(var(--pwc-sliding-panel___content-width) * -1)}pwc-sliding-panel[anchor=left].pwc-sliding-panel___active{left:0}pwc-sliding-panel[anchor=right]{right:calc(var(--pwc-sliding-panel___content-width) * -1)}pwc-sliding-panel[anchor=right].pwc-sliding-panel___active{right:0}"; },
enumerable: true,
configurable: true
});
return PwcSlidingPanel;
}());
var PwcSlidingPanelContent = /** @class */ (function () {
function PwcSlidingPanelContent(hostRef) {
registerInstance(this, hostRef);
}
PwcSlidingPanelContent.prototype.render = function () {
return h("slot", null);
};
Object.defineProperty(PwcSlidingPanelContent.prototype, "root", {
get: function () { return getElement(this); },
enumerable: true,
configurable: true
});
Object.defineProperty(PwcSlidingPanelContent, "style", {
get: function () { return "pwc-sliding-panel-content{display:block;width:var(--pwc-sliding-panel___content-width);background:#fff;border:1px solid #000;-webkit-box-sizing:border-box;box-sizing:border-box}"; },
enumerable: true,
configurable: true
});
return PwcSlidingPanelContent;
}());
var PwcSlidingPanelToggle = /** @class */ (function () {
function PwcSlidingPanelToggle(hostRef) {
registerInstance(this, hostRef);
this.toggled = createEvent(this, "toggled", 7);
}
PwcSlidingPanelToggle.prototype.clickListener = function (event) {
if (event.target === this.root) {
this.toggled.emit();
}
};
PwcSlidingPanelToggle.prototype.render = function () {
return h("slot", null);
};
Object.defineProperty(PwcSlidingPanelToggle.prototype, "root", {
get: function () { return getElement(this); },
enumerable: true,
configurable: true
});
Object.defineProperty(PwcSlidingPanelToggle, "style", {
get: function () { return "pwc-sliding-panel-toggle{width:var(--pwc-sliding-panel___toggle-width);height:var(--pwc-sliding-panel___toggle-height);position:absolute;top:0;display:block;background:#fff;border:1px solid #000;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box}pwc-sliding-panel[anchor=left]>pwc-sliding-panel-toggle{right:calc(var(--pwc-sliding-panel___toggle-width) * -1)}pwc-sliding-panel[anchor=right]>pwc-sliding-panel-toggle{left:calc(var(--pwc-sliding-panel___toggle-width) * -1)}"; },
enumerable: true,
configurable: true
});
return PwcSlidingPanelToggle;
}());
export { PwcSlidingPanel as pwc_sliding_panel, PwcSlidingPanelContent as pwc_sliding_panel_content, PwcSlidingPanelToggle as pwc_sliding_panel_toggle };