@paraboly/pwc-multi-filter/dist/cjs/pwc-choices-option-bubble.cjs.entry.js

A wrapper over pwc-tabview and pwc-filter. Provides means of dynamically managing multiple filters via a single component.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const core = require('./core-d69cee64.js');
require('./_commonjsHelpers-ab75601c.js');
require('./lodash-23b825de.js');
const constructIcon = require('./constructIcon-cc1d9297.js');

const PwcChoicesOptionBubble = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.closeClicked = core.createEvent(this, "closeClicked", 7);
    }
    onCloseClicked(event) {
        this.closeClicked.emit({
            originalEvent: event,
            option: this.option,
            bubbleElement: this.rootElement,
            index: this.indexInSelectedList
        });
    }
    render() {
        const { displayIcon, iconElm } = constructIcon.constructIcon(this.displayIcon, this.option.icon);
        return [
            displayIcon && iconElm,
            core.h("span", { class: "pwc-choices___bubble-label" }, this.option.label),
            this.showCloseButton && (core.h("span", { class: "pwc-choices___bubble-close-button", onClick: e => this.onCloseClicked(e) }, core.h("svg", { width: "16", height: "16", viewBox: "0 0 18 18" }, core.h("path", { d: "M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z" }))))
        ];
    }
    get rootElement() { return core.getElement(this); }
    static get style() { return "pwc-choices-option-bubble {\n  font-size: medium;\n  font-family: Calibri, sans-serif;\n  border: 1px solid black;\n  border-radius: 5px;\n  padding: 5px 10px 5px 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n  margin: 5px;\n  min-height: 22px;\n  height: -webkit-fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n.pwc-choices___bubble-label {\n  -ms-flex-order: 1;\n  order: 1;\n  display: block;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  max-width: 100px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.pwc-choices___bubble-close-button {\n  -ms-flex-order: 3;\n  order: 3;\n  margin-left: 10px;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n.pwc-choices___placeholder-bubble {\n  color: grey;\n}\n\n.pwc-choices___placeholder-bubble > .pwc-choices___bubble-label {\n  max-width: unset;\n}\n\n.pwc-choices___count-bubble > .pwc-choices___bubble-label {\n  max-width: unset;\n  -ms-flex-item-align: center;\n  align-self: center;\n  justify-self: center;\n}\n\npwc-choices-option-bubble > img {\n  display: block;\n  -ms-flex-positive: 0;\n  flex-grow: 0;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n}\n\npwc-choices-option-bubble > img[placement=left] {\n  -ms-flex-order: 0;\n  order: 0;\n  margin-right: 10px;\n}\n\npwc-choices-option-bubble > img[placement=right] {\n  -ms-flex-order: 2;\n  order: 2;\n  margin-left: 10px;\n}"; }
};

exports.pwc_choices_option_bubble = PwcChoicesOptionBubble;