@postnord/web-components
Version:
PostNord Web Components
50 lines (45 loc) • 3.33 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
;
var index = require('./index-DWu-2oJc.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", 7);
}
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 value. @category Native attributes */
value;
/** The segment controller name. @category Native attributes */
name;
/** Disable the segment. @since v7.7.0 @category Native attributes */
disabled = false;
/** Set the segment as selected. Used by the `pn-segmented-control`. **Do not use manually**. @hide true */
selected = false;
/** The SVG content of the icon you want. @category Features */
icon;
/** Set a custom ID for the segment. @since v7.25.0 @category HTML attributes */
pnId;
/** Set a custom ID for the segment. @deprecated Use `pn-id` instead. @category HTML attributes */
segmentid;
/** This event is used by the `pn-segmented-control` component. Do not use manually. */
segmentHover;
handleHover(mouse) {
this.segmentHover.emit(mouse);
}
getId() {
return this.pnId || this.segmentid || this.id;
}
render() {
return (index.h(index.Host, { key: 'c1ca80ac494bc4b75dea79723d12650d18c47e98', onMouseEnter: (event) => this.handleHover(event) }, index.h("input", { key: 'c3bdb057f6ecb46a0a343da3c54331375a6c0e35', class: "pn-segment", id: this.getId(), name: this.name, checked: this.selected, type: "radio", value: this.value, disabled: this.disabled }), index.h("label", { key: '06f7c91d9440c867a98642246a7ef9c958f2eb1b', htmlFor: this.getId(), class: "pn-segment-label" }, this.icon && index.h("pn-icon", { key: 'caf831966dd81f60ac72f2c3a18ca1afd085d07c', icon: this.icon, color: "blue700" }), index.h("span", { key: '0d14699fcadef37bcb33d43464db9e5217d0d202', class: "pn-segment-text" }, this.label, index.h("slot", { key: '7e7398bba9a088764e844dc7856aec2ec325161b' })))));
}
};
PnSegment.style = pnSegmentCss();
exports.pn_segment = PnSegment;