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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-5606614b.js';
import { u as uuidv4 } from './helpers-88f72b54.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 PnSegmentStyle0 = pnSegmentCss;

const PnSegment = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.segmentHover = createEvent(this, "segmentHover", 7);
        this.label = undefined;
        this.name = undefined;
        this.value = undefined;
        this.selected = false;
        this.segmentid = this.id;
        this.icon = undefined;
        this.disabled = false;
    }
    id = `pn-segment-${uuidv4()}`;
    get hostElement() { return getElement(this); }
    /** 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: 'b325719082527754f09c013b3e01e8de7d5595e7', onMouseEnter: (event) => this.handleHover(event) }, h("input", { key: 'a077d547cf945c3d54d345bda5ead3fd7282b527', class: "pn-segment", id: this.segmentid, name: this.name, checked: this.selected, type: "radio", value: this.value, disabled: this.disabled }), h("label", { key: '334868268acf600c2dd1d15e585d3a98859dba44', htmlFor: this.segmentid, class: "pn-segment-label" }, this.icon && h("pn-icon", { key: 'bff15a1148753a1abc5eb9dfcee01026f8eabbb5', icon: this.icon, color: "blue700" }), h("span", { key: '3b6a60bee13d4f929ac463196b1b8492a2efccbc', class: "pn-segment-text" }, this.label, h("slot", { key: '266ffb928bcd8f1e66c771ccb5856032859c08e7' })))));
    }
};
PnSegment.style = PnSegmentStyle0;

export { PnSegment as pn_segment };

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