@postnord/web-components/components/pn-segment.js

PostNord Web Components

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

const pnSegmentCss = "pn-segment{position:relative;color:#005d92;margin-right:0.5em;z-index:2;white-space:nowrap;scroll-snap-align:center;outline:none;-webkit-tap-highlight-color:transparent;transform:translateZ(0)}pn-segment:last-of-type{margin-right:0}pn-segment .pn-segment{cursor:pointer;margin:0;padding:0;opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;-webkit-tap-highlight-color:transparent}pn-segment .pn-segment:disabled{cursor:not-allowed}pn-segment .pn-segment:disabled~.pn-segment-label{color:#5e554a}pn-segment .pn-segment:disabled~.pn-segment-label pn-icon .pn-icon-svg path{fill:#5e554a}pn-segment .pn-segment-label{height:100%;width:100%;padding:0.5em;border-radius:3em;font-weight:500;border:0.0625em solid transparent;display:inline-flex;gap:0.5em;align-items:center;-webkit-tap-highlight-color:transparent}";

const PnSegment$1 = /*@__PURE__*/ proxyCustomElement(class PnSegment extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.segmentHover = createEvent(this, "segmentHover", 7);
    }
    id = `pn-segment-${uuidv4()}`;
    get hostElement() { return this; }
    /** The segment label, same as the slot. @since v7.7.0 */
    label;
    /** The segment controller name. */
    name;
    /** The segment value. */
    value;
    /** Set the segment as selected. Used by the `pn-segmented-control`. **Do not use manually**. @hide true */
    selected = false;
    /** A unique HTML id. */
    segmentid = this.id;
    /** The SVG content of the icon you want. */
    icon;
    /** Disable the segment. @since v7.7.0 */
    disabled = false;
    /** This event is used by the `pn-segmented-control` component. Do not use manually. */
    segmentHover;
    handleHover(mouse) {
        this.segmentHover.emit(mouse);
    }
    render() {
        return (h(Host, { key: '574fe8d993deed3332202537e1c9047cc3dd4688', onMouseEnter: (event) => this.handleHover(event) }, h("input", { key: 'd4fc2249615c6ea3c9fa20ba5b06aa110822f0e0', class: "pn-segment", id: this.segmentid, name: this.name, checked: this.selected, type: "radio", value: this.value, disabled: this.disabled }), h("label", { key: '06a1200964530e3fe11863044df843abdacbe14a', htmlFor: this.segmentid, class: "pn-segment-label" }, this.icon && h("pn-icon", { key: '1e138fa0add653a48260b1684b164ac0bd3cfdd3', icon: this.icon, color: "blue700" }), h("span", { key: '356cbc0115529549239bad888f443ec11ac6cb7d', class: "pn-segment-text" }, this.label, h("slot", { key: '011ac099bea01d58c3507cfe2fb4dce270b80f27' })))));
    }
    static get style() { return pnSegmentCss; }
}, [260, "pn-segment", {
        "label": [1],
        "name": [1],
        "value": [1],
        "selected": [4],
        "segmentid": [1],
        "icon": [1],
        "disabled": [4]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-segment", "pn-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-segment":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnSegment$1);
            }
            break;
        case "pn-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const PnSegment = PnSegment$1;
const defineCustomElement = defineCustomElement$1;

export { PnSegment, defineCustomElement };
//# sourceMappingURL=pn-segment.js.map

//# sourceMappingURL=pn-segment.js.map