@postnord/web-components
Version:
PostNord Web Components
268 lines (267 loc) • 9.85 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { uuidv4 } from "../../../../globals/helpers";
import { h, Host } from "@stencil/core";
/**
* The `pn-segment` is built with a native `input[type="radio"]` in the background.
* Do not listen to events on the `pn-segment`, but on the `pn-segmented-control` instead.
*/
export class PnSegment {
id = `pn-segment-${uuidv4()}`;
hostElement;
/** 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 (h(Host, { key: 'c1ca80ac494bc4b75dea79723d12650d18c47e98', onMouseEnter: (event) => this.handleHover(event) }, h("input", { key: 'c3bdb057f6ecb46a0a343da3c54331375a6c0e35', class: "pn-segment", id: this.getId(), name: this.name, checked: this.selected, type: "radio", value: this.value, disabled: this.disabled }), h("label", { key: '06f7c91d9440c867a98642246a7ef9c958f2eb1b', htmlFor: this.getId(), class: "pn-segment-label" }, this.icon && h("pn-icon", { key: 'caf831966dd81f60ac72f2c3a18ca1afd085d07c', icon: this.icon, color: "blue700" }), h("span", { key: '0d14699fcadef37bcb33d43464db9e5217d0d202', class: "pn-segment-text" }, this.label, h("slot", { key: '7e7398bba9a088764e844dc7856aec2ec325161b' })))));
}
static get is() { return "pn-segment"; }
static get originalStyleUrls() {
return {
"$": ["pn-segment.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-segment.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "since",
"text": "v7.7.0"
}],
"text": "The segment label, same as the slot."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "label"
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "Native attributes"
}],
"text": "The segment value."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "value"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "Native attributes"
}],
"text": "The segment controller name."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "name"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "since",
"text": "v7.7.0"
}, {
"name": "category",
"text": "Native attributes"
}],
"text": "Disable the segment."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"selected": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "hide",
"text": "true"
}],
"text": "Set the segment as selected. Used by the `pn-segmented-control`. **Do not use manually**."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "selected",
"defaultValue": "false"
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Features"
}],
"text": "The SVG content of the icon you want."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "icon"
},
"pnId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "since",
"text": "v7.25.0"
}, {
"name": "category",
"text": "HTML attributes"
}],
"text": "Set a custom ID for the segment."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "pn-id"
},
"segmentid": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "deprecated",
"text": "Use `pn-id` instead."
}, {
"name": "category",
"text": "HTML attributes"
}],
"text": "Set a custom ID for the segment."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "segmentid"
}
};
}
static get events() {
return [{
"method": "segmentHover",
"name": "segmentHover",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "This event is used by the `pn-segmented-control` component. Do not use manually."
},
"complexType": {
"original": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}];
}
static get elementRef() { return "hostElement"; }
}