@postnord/web-components/components/pn-choice-chip.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { u as uuidv4 } from './helpers.js';
import { c as check } from './check.js';
import { d as defineCustomElement$2 } from './pn-icon2.js';

const pnChoiceChipCss = "pn-choice-chip{display:inline-block}pn-choice-chip .pn-choice-chip{position:relative;font-size:1em;font-weight:500;text-align:center}pn-choice-chip .pn-choice-chip-container{cursor:pointer;position:relative;display:flex;align-items:center;gap:0;padding:0.5em 1em;border:0.0625em solid #969087;border-radius:0.5em;background-color:#ffffff;transition-property:border-color, outline-color, background-color, padding, gap;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);outline:0.2rem solid transparent;outline-offset:0.2rem}pn-choice-chip .pn-choice-chip-container[data-icon]{gap:0.25em;padding-left:0.75em}pn-choice-chip .pn-choice-chip-container[data-icon][data-small]{padding-left:0.5em}pn-choice-chip .pn-choice-chip-container[data-icon][data-large]{padding-left:1em}pn-choice-chip .pn-choice-chip-container[data-icon]>.pn-choice-chip-icon{width:1.5em}pn-choice-chip .pn-choice-chip-container[data-small]{padding:0.25em 0.75em}pn-choice-chip .pn-choice-chip-container[data-small] .pn-choice-chip-label{line-height:1.25em}pn-choice-chip .pn-choice-chip-container[data-small] .pn-choice-chip-label>span{font-size:0.875em}pn-choice-chip .pn-choice-chip-container[data-large]{padding:0.625em 1.25em}pn-choice-chip .pn-choice-chip-icon{position:relative;width:0;height:1.5em;transition-property:width;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-choice-chip .pn-choice-chip-icon pn-icon{opacity:0;transform:scale(0);position:absolute;top:0;left:0;transition-property:transform, opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-choice-chip .pn-choice-chip-icon pn-icon.pn-choice-chip-icon-user{opacity:1;transform:scale(1)}pn-choice-chip .pn-choice-chip-label{color:#005d92;line-height:1.5em;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);cursor:pointer;display:flex;align-items:center;flex-grow:1;height:100%}pn-choice-chip .pn-choice-chip>input{position:absolute;z-index:1;opacity:0;top:0;left:0;width:100%;height:100%;margin:0;cursor:pointer}pn-choice-chip .pn-choice-chip>input:not(:checked)~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-user{transform:scale(1);opacity:1}pn-choice-chip .pn-choice-chip>input:hover~.pn-choice-chip-container{background-color:#effbff;border-color:#005d92}pn-choice-chip .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-icon-user .pn-icon-svg path,pn-choice-chip .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-icon-check .pn-icon-svg path{fill:#005d92}pn-choice-chip .pn-choice-chip>input:hover~.pn-choice-chip-container .pn-choice-chip-label{color:#005d92}pn-choice-chip .pn-choice-chip>input:checked~.pn-choice-chip-container{gap:0.25em;background-color:#e0f8ff;border-color:#005d92}pn-choice-chip .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon{width:1.5em;stroke-dashoffset:23}pn-choice-chip .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-check{transform:scale(1);opacity:1}pn-choice-chip .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-user{transform:scale(0);opacity:0}pn-choice-chip .pn-choice-chip>input:checked~.pn-choice-chip-container>.pn-choice-chip-label{color:#0d234b}pn-choice-chip .pn-choice-chip>input:checked:hover~.pn-choice-chip-container{background-color:#effbff;border-color:#0d234b}pn-choice-chip .pn-choice-chip>input:checked:hover~.pn-choice-chip-container>.pn-choice-chip-icon>.pn-choice-chip-icon-check path{fill:#0d234b}pn-choice-chip .pn-choice-chip>input:checked:hover~.pn-choice-chip-container>.pn-choice-chip-label{color:#0d234b}pn-choice-chip .pn-choice-chip>input:focus-visible~.pn-choice-chip-container{outline-color:#005d92;border-color:#005d92}pn-choice-chip .pn-choice-chip>input:disabled{cursor:not-allowed}pn-choice-chip .pn-choice-chip>input:disabled:active~.pn-choice-chip-container{outline:none}pn-choice-chip .pn-choice-chip>input:disabled~.pn-choice-chip-container{background-color:#f3f2f2;border-color:#f3f2f2;cursor:not-allowed}pn-choice-chip .pn-choice-chip>input:disabled~.pn-choice-chip-container .pn-choice-chip-label{color:#5e554a;cursor:not-allowed}pn-choice-chip .pn-choice-chip>input:disabled~.pn-choice-chip-container pn-icon .pn-icon-svg path{fill:#5e554a}";
const PnChoiceChipStyle0 = pnChoiceChipCss;

const PnChoiceChip$1 = /*@__PURE__*/ proxyCustomElement(class PnChoiceChip extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.moving = false;
        this.label = undefined;
        this.value = undefined;
        this.name = undefined;
        this.checked = false;
        this.radio = false;
        this.choiceid = `pn-choice-chip-${uuidv4()}`;
        this.icon = undefined;
        this.required = false;
        this.disabled = false;
        this.small = false;
        this.large = false;
    }
    get hostElement() { return this; }
    render() {
        return (h(Host, { key: 'b74986fe1928d28a6a3eacfdb9919a33d847de89' }, h("div", { key: '6b25a1b32b29596c3862af80d22f5063e5a1d7be', class: "pn-choice-chip" }, h("input", { key: '58308564d6ee8ce60472fe037fe7bef42627733d', type: this.radio ? 'radio' : 'checkbox', id: this.choiceid, value: this.value, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled }), h("div", { key: 'f1debc7c902d94df49dcdb8b0abeaab331c25073', class: "pn-choice-chip-container", "data-icon": !!this.icon, "data-small": this.small, "data-large": this.large }, h("div", { key: '9a5ed1e9107f5c63b54dea6943290e74c5b7aca8', class: "pn-choice-chip-icon" }, h("pn-icon", { key: '05631fab98155a693063d1576675fa4aa10e3081', color: "blue700", class: "pn-choice-chip-icon-check", icon: check }), !!this.icon && h("pn-icon", { key: '41e6de5e34ea3ba1115ab1a7d14f81c6154c3a5a', color: "blue700", class: "pn-choice-chip-icon-user", icon: this.icon })), h("label", { key: 'ba505e94891f9d8fe50c3c9364c6e12cc1e9e844', class: "pn-choice-chip-label", htmlFor: this.choiceid }, h("span", { key: 'd0e2ccf06db3d4fb19dc470b1b422dc1ca04c9d5' }, this.label), h("slot", { key: '25ffbcad9a5e81594d39dffc6d0b2421013ab89d' }))))));
    }
    static get style() { return PnChoiceChipStyle0; }
}, [4, "pn-choice-chip", {
        "label": [1],
        "value": [513],
        "name": [1],
        "checked": [1028],
        "radio": [4],
        "choiceid": [1],
        "icon": [1],
        "required": [4],
        "disabled": [4],
        "small": [4],
        "large": [4],
        "moving": [32]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-choice-chip", "pn-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-choice-chip":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnChoiceChip$1);
            }
            break;
        case "pn-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const PnChoiceChip = PnChoiceChip$1;
const defineCustomElement = defineCustomElement$1;

export { PnChoiceChip, defineCustomElement };

//# sourceMappingURL=pn-choice-chip.js.map