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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
'use strict';

var index = require('./index-CfUQZtlH.js');
var index$1 = require('./index.cjs.js');

const pnSegmentCss = () => `${index.transformTag("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)}${index.transformTag("pn-segment")}:last-of-type{margin-right:0}${index.transformTag("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}${index.transformTag("pn-segment")} .pn-segment:disabled{cursor:not-allowed}${index.transformTag("pn-segment")} .pn-segment:disabled~.pn-segment-label{color:#5e554a}${index.transformTag("pn-segment")} .pn-segment:disabled~.pn-segment-label ${index.transformTag("pn-icon")} .pn-icon-svg path{fill:#5e554a}${index.transformTag("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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.segmentHover = index.createEvent(this, "segmentHover");
    }
    id = `pn-segment-${index$1.uuidv4()}`;
    get hostElement() { return index.getElement(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 (index.h(index.Host, { key: 'b98bb414de20d14fc2ee9d087be192d5f17bf1f9', onMouseEnter: (event) => this.handleHover(event) }, index.h("input", { key: '0b6117d85bb547c249a402cc26494355f3dc3e95', class: "pn-segment", id: this.segmentid, name: this.name, checked: this.selected, type: "radio", value: this.value, disabled: this.disabled }), index.h("label", { key: '8570c7c62ccfcfdd5dca9d8e1a6e016ca9c6a304', htmlFor: this.segmentid, class: "pn-segment-label" }, this.icon && index.h("pn-icon", { key: 'e10a1ea4ca26f71e6caadbeeda6bf5d68cfc266f', icon: this.icon, color: "blue700" }), index.h("span", { key: '8ec12157e0ca6f62772743e06beefc677f9f9f87', class: "pn-segment-text" }, this.label, index.h("slot", { key: '6342dfb17f71cae05318a3c19a19fdb6e46bb157' })))));
    }
};
PnSegment.style = pnSegmentCss();

exports.pn_segment = PnSegment;