@paraboly/pwc-multi-filter
Version:
A wrapper over pwc-tabview and pwc-filter. Provides means of dynamically managing multiple filters via a single component.
154 lines (150 loc) • 9.08 kB
JavaScript
import { r as registerInstance, c as createEvent, h, d as getElement } from './core-ba89e169.js';
import './_commonjsHelpers-4ab098b6.js';
import './lodash-62c1633d.js';
import { c as constructIcon } from './constructIcon-63ebed3b.js';
/**
* Determines if the passed element is overflowing its bounds,
* either vertically or horizontally.
* Will temporarily modify the "overflow" style to detect this
* if necessary.
*/
function checkOverflow(el, width, height) {
const curOverflow = el.style.overflow;
if (!curOverflow || curOverflow === "visible")
el.style.overflow = "hidden";
const isOverflowing = (width && el.clientWidth < el.scrollWidth) ||
(height && el.clientHeight < el.scrollHeight);
el.style.overflow = curOverflow;
return isOverflowing;
}
const PwcChoicesInputBar = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.isOverflowing = false;
this.isCalculating = true;
this.type = "multi";
this.optionDiscarded = createEvent(this, "optionDiscarded", 7);
this.inputBarClicked = createEvent(this, "inputBarClicked", 7);
}
optionsWatchHandler() {
if (this.type === "multi" && this.displayMode === "dynamic") {
this.isCalculating = true;
}
}
optionBubbleCloseClickedHandler(event) {
this.optionDiscarded.emit({
originalEvent: event,
option: event.detail.option,
index: event.detail.index
});
}
onInputBarClick(e) {
const eventTarget = event.target;
const closestBubbleCloseButton = eventTarget.closest(".pwc-choices___bubble-close-button");
const shouldEmitAClickOnSelf = !closestBubbleCloseButton;
if (shouldEmitAClickOnSelf) {
this.inputBarClicked.emit({ originalEvent: e });
}
}
constructSelectedOptions() {
return this.options.map((option, index) => (h("pwc-choices-option-bubble", { option: option, showCloseButton: this.showCloseButtons, indexInSelectedList: index, displayIcon: this.displayIcons })));
}
constructPlaceholder() {
const selectedItemCount = this.options.length;
const shouldDisplay = this.placeholder !== "" &&
!(this.autoHidePlaceholder && selectedItemCount > 0);
return (shouldDisplay && (h("pwc-choices-option-bubble", { class: "pwc-choices___placeholder-bubble", option: {
value: "placeholder",
label: this.placeholder
}, showCloseButton: false, indexInSelectedList: -1 })));
}
constructMainRender() {
switch (this.type) {
case "single":
if (this.options && this.options.length > 0) {
const { displayIcon, iconElm } = constructIcon(this.displayIcons, this.options[0].icon);
return (h("div", { class: "pwc-choices___single-select-input-bar-item" }, displayIcon && iconElm, h("span", null, this.options[0].label)));
}
else {
return (h("div", { class: "pwc-choices___single-select-input-bar-item pwc-choices___single-select-input-bar-placeholder" }, h("span", null, this.placeholder)));
}
case "multi":
return this.constructMultiSelecMainRender();
}
}
constructMultiSelecMainRender() {
return [this.constructSelectedOptions(), this.constructPlaceholder()];
}
decideFlexAlignClass() {
if (this.type === "single") {
return " pwc-choices___flex-align-main-start pwc-choices___flex-align-cross-center";
}
if (this.type === "multi") {
if (this.isOverflowing) {
return " pwc-choices___flex-align-main-center pwc-choices___flex-align-cross-center";
}
else {
return " pwc-choices___flex-align-main-start pwc-choices___flex-align-cross-start";
}
}
}
constructBubbles() {
const flexAlignClass = this.decideFlexAlignClass();
return [
h("div", { class: "pwc-choices___input-bar-main " + flexAlignClass }, this.constructMainRender()),
h("div", { class: "pwc-choices___input-bar-dropdown-icon" }, h("svg", { width: "28", height: "28", viewBox: "0 0 18 18" }, h("path", { d: "M5 8l4 4 4-4z" })))
];
}
constructCount() {
const flexAlignClass = this.decideFlexAlignClass();
return [
h("div", { class: "pwc-choices___input-bar-main" + flexAlignClass }, h("span", null, this.countTextProvider(this.options.length))),
h("div", { class: "pwc-choices___input-bar-dropdown-icon" }, h("svg", { width: "28", height: "28", viewBox: "0 0 18 18" }, h("path", { d: "M5 8l4 4 4-4z" })))
];
}
componentWillRender() {
if (this.type === "multi" && this.displayMode === "dynamic") {
if (this.isCalculating) {
if (!this.root.hasAttribute("calculating")) {
this.root.setAttribute("calculating", "");
this.root.forceUpdate();
}
}
}
}
render() {
let toReturn;
const shouldCollapse = this.isCalculating
? false
: this.displayMode !== "bubblesOnly" && this.isOverflowing;
if (this.type === "multi" &&
(this.displayMode === "countOnly" || shouldCollapse)) {
toReturn = this.constructCount();
}
else {
toReturn = this.constructBubbles();
}
return toReturn;
}
componentDidRender() {
if (this.type === "multi" && this.displayMode === "dynamic") {
if (this.isCalculating) {
this.isOverflowing = checkOverflow(this.root, true, true);
this.isCalculating = false;
this.root.forceUpdate();
}
else {
if (this.root.hasAttribute("calculating")) {
this.root.removeAttribute("calculating");
this.root.forceUpdate();
}
}
}
}
get root() { return getElement(this); }
static get watchers() { return {
"options": ["optionsWatchHandler"]
}; }
static get style() { return "pwc-choices-input-bar {\n margin: 0;\n font-size: medium;\n font-family: Calibri, sans-serif;\n border: 1px solid black;\n padding: 5px;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: nowrap;\n flex-wrap: nowrap;\n border-radius: 5px;\n overflow: hidden;\n background-color: white;\n height: 100%;\n width: 100%;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\npwc-choices-input-bar[calculating] > .pwc-choices___input-bar-main {\n visibility: hidden;\n overflow: visible;\n}\n\n.pwc-choices___option-count {\n display: block;\n margin: auto;\n}\n\n.pwc-choices___flex-align-main-start {\n -ms-flex-pack: start;\n justify-content: flex-start;\n justify-items: flex-start;\n}\n\n.pwc-choices___flex-align-main-center {\n -ms-flex-pack: center;\n justify-content: center;\n justify-items: center;\n}\n\n.pwc-choices___flex-align-cross-start {\n -ms-flex-line-pack: start;\n align-content: flex-start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n.pwc-choices___flex-align-cross-center {\n -ms-flex-line-pack: center;\n align-content: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.pwc-choices___input-bar-main {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-positive: 1;\n flex-grow: 1;\n overflow-y: auto;\n}\n\n.pwc-choices___input-bar-dropdown-icon {\n -ms-flex-positive: 0;\n flex-grow: 0;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-line-pack: center;\n align-content: center;\n margin: 0 10px 0 10px;\n}\n\n.pwc-choices___single-select-input-bar-item {\n display: -ms-flexbox;\n display: flex;\n padding: 10px;\n max-width: 100%;\n max-height: 100%;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n -ms-flex-line-pack: center;\n align-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-align: center;\n align-items: center;\n justify-items: center;\n}\n\n.pwc-choices___single-select-input-bar-placeholder {\n color: grey;\n}\n\n.pwc-choices___single-select-input-bar-item > img {\n display: block;\n -ms-flex-positive: 0;\n flex-grow: 0;\n margin-right: 10px;\n}\n\n.pwc-choices___single-select-input-bar-item > span {\n -ms-flex-order: 1;\n order: 1;\n display: block;\n -ms-flex-positive: 1;\n flex-grow: 1;\n overflow-y: auto;\n}\n\n.pwc-choices___single-select-input-bar-item > img[placement=left] {\n -ms-flex-order: 0;\n order: 0;\n margin-right: 10px;\n}\n\n.pwc-choices___single-select-input-bar-item > img[placement=right] {\n -ms-flex-order: 2;\n order: 2;\n margin-left: 10px;\n}"; }
};
export { PwcChoicesInputBar as pwc_choices_input_bar };