@paraboly/pwc-multi-filter/dist/pwc-multi-filter/pwc-choices-dropdown-item.entry.js

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

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';

const PwcChoicesDropdownItem = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.dropdownItemClicked = createEvent(this, "dropdownItemClicked", 7);
    }
    selectCountWatchHandler(value) {
        this.active = value > 0;
    }
    clickSelfHandler(event) {
        if (!this.isNoOption) {
            this.dropdownItemClicked.emit({
                originalEvent: event,
                option: this.option
            });
        }
    }
    constructDropdownOption() {
        const { displayIcon, iconElm } = this.isNoOption
            ? { displayIcon: false, iconElm: null }
            : constructIcon(true, this.option.original.icon);
        const indicatorContent = (this.selectionBehaviour === "accumulate" && this.selectCount) ||
            (this.selectionBehaviour === "toggle" && this.toggleText) ||
            "";
        return [
            this.selectionBehaviour !== "remove" && (h("i", null, this.selectCount > 0 && indicatorContent)),
            displayIcon && iconElm,
            h("span", { innerHTML: this.option.string })
        ];
    }
    componentWillLoad() {
        this.selectCountWatchHandler(this.selectCount);
    }
    render() {
        return this.constructDropdownOption();
    }
    get root() { return getElement(this); }
    static get watchers() { return {
        "selectCount": ["selectCountWatchHandler"]
    }; }
    static get style() { return "pwc-choices-dropdown-item {\n  -webkit-transition: background-color ease 0.2s;\n  transition: background-color ease 0.2s;\n  margin: 0;\n  cursor: pointer;\n  padding: 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}\n\npwc-choices-dropdown-item:hover {\n  background-color: #eee;\n}\n\npwc-choices-dropdown-item + pwc-choices-dropdown-item {\n  border-top: 1px solid black;\n}\n\npwc-choices-dropdown-item[is-no-option] {\n  cursor: default;\n  color: grey;\n}\n\npwc-choices-dropdown-item > 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-dropdown-item > img[placement=left] {\n  -ms-flex-order: 0;\n  order: 0;\n  margin-right: 10px;\n}\n\npwc-choices-dropdown-item > img[placement=right] {\n  -ms-flex-order: 2;\n  order: 2;\n  margin-left: 10px;\n}\n\npwc-choices-dropdown-item > span {\n  -ms-flex-order: 1;\n  order: 1;\n  display: block;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\npwc-choices-dropdown-item > i {\n  -ms-flex-order: -1;\n  order: -1;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -ms-flex-positive: 0;\n  flex-grow: 0;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  width: 25px;\n  height: 25px;\n  margin-right: 10px;\n  color: white;\n  border-radius: 50%;\n  font-style: normal;\n  font-weight: bold;\n}\n\npwc-choices-dropdown-item[active] > i {\n  background-color: green;\n}"; }
};

export { PwcChoicesDropdownItem as pwc_choices_dropdown_item };